@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
    :root {
      --bg: #0b1016;
      --bg-2: #101721;
      --surface: rgba(20, 28, 39, .78);
      --surface-strong: #172231;
      --surface-soft: rgba(255,255,255,.045);
      --text: #f4f7fb;
      --muted: #96a4b5;
      --line: rgba(255,255,255,.09);
      --accent: #d4ff4f;
      --accent-2: #83d6ff;
      --accent-ink: #11180a;
      --danger: #ff7d7d;
      --shadow: 0 20px 70px rgba(0,0,0,.27);
      --radius: 20px;
      --grid-line: rgba(255,255,255,.035);
    }
    [data-theme="light"] {
      --bg: #f3f6f8;
      --bg-2: #e8eef2;
      --surface: rgba(255,255,255,.84);
      --surface-strong: #ffffff;
      --surface-soft: rgba(10, 30, 42, .045);
      --text: #10202b;
      --muted: #637382;
      --line: rgba(16,32,43,.11);
      --accent: #b7e638;
      --accent-2: #227ea4;
      --accent-ink: #172000;
      --shadow: 0 18px 55px rgba(34,62,78,.12);
      --grid-line: rgba(16,32,43,.045);
    }
    [data-theme="royal"] {
      --bg: #0b0d1a; --bg-2: #14152b; --surface: rgba(24,24,48,.82); --surface-strong:#1d1d3a; --surface-soft:rgba(255,255,255,.055); --text:#f7f4ff; --muted:#a8a2c5; --line:rgba(203,190,255,.15); --accent:#b9a3ff; --accent-2:#70d8ff; --accent-ink:#161126; --danger:#ff93b3; --shadow:0 20px 70px rgba(35,20,90,.35); --grid-line:rgba(201,184,255,.045);
    }
    [data-theme="ocean"] {
      --bg:#07141a; --bg-2:#0b222a; --surface:rgba(12,38,47,.82); --surface-strong:#10313b; --surface-soft:rgba(255,255,255,.055); --text:#effdff; --muted:#91b6bd; --line:rgba(121,222,231,.16); --accent:#57e0d0; --accent-2:#7bb8ff; --accent-ink:#06211e; --danger:#ff9d87; --shadow:0 20px 70px rgba(0,45,60,.35); --grid-line:rgba(109,224,225,.045);
    }
    [data-theme="sunset"] {
      --bg:#1a1115; --bg-2:#2a1719; --surface:rgba(48,27,29,.82); --surface-strong:#3a2022; --surface-soft:rgba(255,255,255,.055); --text:#fff8f0; --muted:#c9a9a0; --line:rgba(255,198,148,.17); --accent:#ffbd69; --accent-2:#ff819d; --accent-ink:#291509; --danger:#ff8c7b; --shadow:0 20px 70px rgba(86,25,25,.32); --grid-line:rgba(255,195,140,.045);
    }
    [data-theme="paper"] {
      --bg:#f7f3ec; --bg-2:#eee7dc; --surface:rgba(255,253,248,.9); --surface-strong:#fffdf8; --surface-soft:rgba(57,45,31,.055); --text:#2b241d; --muted:#817467; --line:rgba(77,57,38,.14); --accent:#d48b35; --accent-2:#3d8490; --accent-ink:#261708; --danger:#b95545; --shadow:0 18px 55px rgba(79,55,29,.13); --grid-line:rgba(76,57,39,.05);
    }
    [data-theme="graphite"] {
      --bg:#101113; --bg-2:#191b1e; --surface:rgba(30,32,35,.88); --surface-strong:#25282c; --surface-soft:rgba(255,255,255,.06); --text:#f5f6f7; --muted:#a0a5ab; --line:rgba(255,255,255,.13); --accent:#f1f1ec; --accent-2:#9ca9ff; --accent-ink:#17181a; --danger:#ff8b8b; --shadow:0 20px 65px rgba(0,0,0,.4); --grid-line:rgba(255,255,255,.04);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--text); background: var(--bg); font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif; min-height: 100vh; overflow-x: hidden; }
    body::before { content: ''; position: fixed; inset: 0; pointer-events:none; opacity: .62; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
    button, input { font: inherit; }
    button { cursor: pointer; border: 0; }
    .app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; position: relative; }
    .sidebar { border-left: 1px solid var(--line); padding: 28px 18px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); z-index: 5; }
    .brand { display:flex; align-items:center; gap: 11px; padding: 0 8px; }
    .brand-mark { width: 39px; height: 39px; border-radius: 12px 12px 12px 4px; background: var(--accent); color: var(--accent-ink); display:grid; place-items:center; font-weight: 800; font-size: 21px; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 25%, transparent); }
    .brand-name { font-weight: 700; letter-spacing: -.4px; font-size: 17px; }
    .brand-name span { color: var(--accent); font-family: 'Space Grotesk', sans-serif; direction:ltr; display:inline-block; margin-right: 4px; }
    .eyebrow { color: var(--accent); letter-spacing: 1.2px; font-size: 10px; text-transform: uppercase; font-family: 'Space Grotesk', sans-serif; }
    .nav { display:flex; flex-direction:column; gap: 5px; }
    .nav-title { color: var(--muted); font-size: 11px; padding: 0 11px 8px; }
    .nav a { color: var(--muted); text-decoration:none; display:flex; align-items:center; gap: 11px; padding: 11px; border-radius: 12px; font-size: 13px; transition:.2s; }
    .nav a:hover, .nav a.active { color: var(--text); background: var(--surface-soft); }
    .nav a.active { box-shadow: inset -3px 0 var(--accent); }
    .nav svg { width: 17px; height: 17px; stroke: currentColor; fill:none; stroke-width: 1.7; }
    .side-note { margin-top:auto; border: 1px solid var(--line); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); padding: 17px; border-radius: 16px; }
    .side-note strong { display:block; font-size: 13px; margin-bottom: 6px; }
    .side-note p { color:var(--muted); font-size: 11px; line-height: 1.7; margin:0; }
    main { min-width: 0; padding: 26px clamp(18px, 4vw, 56px) 60px; }
    .topbar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom: 32px; }
    .crumb { color:var(--muted); font-size:12px; }
    .actions { display:flex; align-items:center; gap:9px; }
    .icon-btn, .profile { background: var(--surface); border: 1px solid var(--line); color: var(--text); height: 39px; border-radius: 12px; display:grid; place-items:center; }
    .icon-btn { width:39px; }
    .icon-btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .profile { padding: 4px 11px 4px 5px; display:flex; gap:8px; font-size:12px; }
    .avatar { width:29px; height:29px; display:grid; place-items:center; border-radius: 9px; color:#10200b; background: var(--accent); font-weight:700; }
    .hero { position:relative; overflow:hidden; border:1px solid var(--line); border-radius: 28px; padding: clamp(27px, 5vw, 55px); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 32%), radial-gradient(circle at 7% 100%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 35%), var(--surface); box-shadow:var(--shadow); }
    .hero::after { content:'DZ'; position:absolute; left: 3%; bottom:-27px; font-family:'Space Grotesk'; font-size: 170px; font-weight:700; letter-spacing:-15px; opacity:.045; direction:ltr; }
    .hero-content { position:relative; z-index:1; max-width: 720px; }
    h1 { font-size: clamp(31px, 5vw, 62px); letter-spacing: -2.4px; line-height: 1.08; margin: 13px 0 16px; max-width: 650px; }
    h1 em { font-style:normal; color: var(--accent); }
    .hero p { color: var(--muted); line-height: 1.9; max-width: 590px; margin:0 0 24px; font-size: clamp(13px, 2vw, 16px); }
    .hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
    .primary, .secondary { border-radius: 11px; padding: 12px 17px; font-weight:700; font-size:13px; transition:.2s; }
    .primary { color:var(--accent-ink); background:var(--accent); box-shadow: 0 8px 25px color-mix(in srgb, var(--accent) 20%, transparent); }
    .primary:hover { transform:translateY(-2px); filter:brightness(1.06); }
    .secondary { color:var(--text); background:var(--surface-soft); border:1px solid var(--line); }
    .secondary:hover { background:var(--surface-strong); }
    .stats { display:grid; grid-template-columns:repeat(3, 1fr); gap: 12px; margin: 17px 0 29px; }
    .stat { border:1px solid var(--line); background:var(--surface); border-radius:15px; padding:15px 17px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
    .stat b { display:block; font-family:'Space Grotesk'; font-size: 24px; direction:ltr; text-align:right; }
    .stat span { color:var(--muted); font-size:11px; }
    .stat i { color:var(--accent); font-style:normal; font-size:11px; }
    .section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin: 30px 0 15px; }
    h2 { margin:0; font-size: 20px; letter-spacing:-.5px; }
    .section-head p { color:var(--muted); font-size:12px; margin: 6px 0 0; }
    .view-all { color:var(--accent-2); background:none; font-size:12px; padding: 8px 0; }
    .toolbar { display:flex; align-items:center; gap:10px; margin-bottom:17px; }
    .search { flex:1; position:relative; }
    .search input { width:100%; background:var(--surface); color:var(--text); border:1px solid var(--line); outline:none; border-radius:12px; padding:12px 42px 12px 15px; font-size:12px; transition:.2s; }
    .search input:focus { border-color:var(--accent-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-2) 15%, transparent); }
    .search svg { position:absolute; right:14px; top:12px; width:17px; height:17px; stroke:var(--muted); fill:none; stroke-width:1.8; }
    .filter { display:flex; gap:6px; overflow:auto; scrollbar-width:none; }
    .filter button { white-space:nowrap; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:11px; }
    .filter button.active { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:700; }
    .modules { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .module { position:relative; overflow:hidden; min-height:164px; border:1px solid var(--line); border-radius:17px; background:var(--surface); padding:17px; transition:transform .25s, border-color .25s, box-shadow .25s; display:flex; flex-direction:column; cursor:pointer; animation:cardIn .55s both; }
    .module:nth-child(2){animation-delay:.04s}.module:nth-child(3){animation-delay:.08s}.module:nth-child(4){animation-delay:.12s}.module:nth-child(5){animation-delay:.16s}.module:nth-child(6){animation-delay:.2s}.module:nth-child(7){animation-delay:.24s}.module:nth-child(8){animation-delay:.28s}.module:nth-child(9){animation-delay:.32s}.module:nth-child(10){animation-delay:.36s}.module:nth-child(11){animation-delay:.4s}.module:nth-child(12){animation-delay:.44s}
    .module:hover { transform: translateY(-6px) scale(1.012); border-color: color-mix(in srgb, var(--accent-2) 60%, var(--line)); box-shadow: var(--shadow); }
    .module:active { transform:translateY(-2px) scale(.99); }
    .module::after { content:'افتح القسم'; position:absolute; top:12px; left:13px; color:var(--accent-2); font-size:9px; opacity:0; transform:translateY(-5px); transition:.25s; }
    .module:hover::after { opacity:1; transform:translateY(0); }
    .module::before { content:''; position:absolute; inset:auto -20px -38px auto; width:90px; height:90px; border-radius:50%; background: color-mix(in srgb, var(--module-color, var(--accent)) 12%, transparent); }
    .module-top { display:flex; justify-content:space-between; align-items:start; }
    .module-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background: color-mix(in srgb, var(--module-color, var(--accent)) 15%, transparent); color:var(--module-color, var(--accent)); }
    .module-icon svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .number { color:var(--muted); font: 11px 'Space Grotesk'; direction:ltr; }
    .module h3 { font-size:14px; margin:15px 0 5px; }
    .module p { color:var(--muted); font-size:11px; line-height:1.65; margin:0; }
    .module .arrow { margin-top:auto; padding-top:13px; color:var(--accent-2); font-size:12px; opacity:.85; }
    .module.hidden { display:none; }
    @keyframes cardIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
    .bottom-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 13px; margin-top:13px; }
    .focus, .quote { border:1px solid var(--line); background:var(--surface); border-radius:18px; padding:20px; }
    .focus { display:flex; align-items:center; justify-content:space-between; gap:20px; overflow:hidden; position:relative; }
    .focus-copy { position:relative; z-index:1; }
    .focus h3, .quote h3 { font-size:16px; margin: 7px 0; }
    .focus p, .quote p { color:var(--muted); font-size:12px; line-height:1.8; margin:0 0 13px; }
    .focus-art { min-width:120px; height:120px; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--accent), transparent 14%), radial-gradient(circle at 60% 60%, var(--accent-2), transparent 18%), #1b3040; box-shadow: inset 12px -16px 35px rgba(0,0,0,.28); opacity:.8; }
    .quote { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); }
    .quote-mark { color:var(--accent); font: 42px Georgia; line-height:.5; }
    .quote p { color:var(--text); font-size:14px; margin-top:7px; }
    .quote small { color:var(--muted); font-size:11px; }
    .mobile-nav { display:none; }
    .toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%, 130px); opacity:0; background:var(--surface-strong); border:1px solid var(--line); color:var(--text); padding:12px 17px; border-radius:12px; box-shadow:var(--shadow); font-size:12px; z-index:20; transition:.3s; }
    .toast.show { transform:translate(-50%, 0); opacity:1; }
    .modal-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:18px; background:rgba(3,8,13,.68); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transition:.3s; }
    .modal-backdrop.open { opacity:1; visibility:visible; }
    .modal { width:min(100%, 560px); max-height:min(720px, 90vh); overflow:auto; border:1px solid var(--line); border-radius:24px; background:var(--surface-strong); box-shadow:0 30px 100px rgba(0,0,0,.42); transform:translateY(24px) scale(.96); transition:.35s cubic-bezier(.2,.8,.2,1); }
    .modal-backdrop.open .modal { transform:translateY(0) scale(1); }
    .modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; padding:24px 24px 17px; border-bottom:1px solid var(--line); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%); }
    .modal-kicker { color:var(--accent); font:11px 'Space Grotesk'; letter-spacing:1px; direction:ltr; }
    .modal h3 { margin:7px 0 0; font-size:22px; letter-spacing:-.6px; }
    .modal-close { width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface-soft); font-size:20px; line-height:1; transition:.2s; }
    .modal-close:hover { color:var(--text); background:var(--surface); transform:rotate(90deg); }
    .modal-body { padding:18px 24px 24px; }
    .modal-intro { color:var(--muted); font-size:12px; line-height:1.8; margin:0 0 15px; }
    .detail-list { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
    .detail-list li { display:flex; align-items:center; justify-content:space-between; gap:11px; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); color:var(--text); font-size:13px; animation:itemIn .4s both; cursor:pointer; transition:.2s; }
    .detail-list li:hover { background:color-mix(in srgb, var(--accent) 10%, var(--surface-soft)); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); transform:translateX(-4px); }
    .detail-list li::before { display:none; }
    .detail-label { display:flex; align-items:center; gap:11px; flex:1; }
    .detail-label::before { content:'✓'; display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:7px; color:var(--accent-ink); background:var(--accent); font-weight:700; font-size:12px; }
    .detail-go { color:var(--accent-2); font-size:16px; opacity:.75; transition:.2s; }
    .detail-list li:hover .detail-go { opacity:1; transform:translateX(-3px); }
    .item-open { flex:none; color:var(--accent-ink); background:var(--accent); border:0; border-radius:8px; padding:7px 10px; font-size:10px; font-weight:700; cursor:pointer; transition:.2s; }
    .item-open:hover { filter:brightness(1.08); transform:translateY(-1px); }
    .detail-list li:nth-child(2){animation-delay:.04s}.detail-list li:nth-child(3){animation-delay:.08s}.detail-list li:nth-child(4){animation-delay:.12s}.detail-list li:nth-child(5){animation-delay:.16s}
    @keyframes itemIn { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
    body.modal-open { overflow:hidden; }
    #itemModal { z-index:40; }
    #welcomeModal { z-index:60; background:rgba(3,8,13,.78); }
    .welcome-modal { width:min(100%, 720px); overflow:hidden; border:1px solid var(--line); border-radius:28px; background:var(--surface-strong); box-shadow:0 35px 120px rgba(0,0,0,.5); transform:translateY(26px) scale(.94); transition:.5s cubic-bezier(.2,.85,.2,1); }
    .modal-backdrop.open .welcome-modal { transform:translateY(0) scale(1); }
    .welcome-top { position:relative; padding:32px 32px 24px; text-align:center; overflow:hidden; background:radial-gradient(circle at 50% -30%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 57%); }
    .welcome-top::before { content:'م'; position:absolute; left:50%; top:-62px; transform:translateX(-50%); font-size:190px; line-height:1; color:var(--accent); opacity:.06; font-weight:700; }
    .welcome-mark { position:relative; width:58px; height:58px; display:grid; place-items:center; margin:0 auto 15px; border-radius:19px 19px 19px 5px; background:var(--accent); color:var(--accent-ink); font-size:30px; font-weight:800; box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 27%, transparent); }
    .welcome-top h2 { position:relative; margin:0 0 9px; font-size:26px; letter-spacing:-1px; }
    .welcome-top p { position:relative; color:var(--muted); max-width:480px; margin:0 auto; font-size:13px; line-height:1.9; }
    .theme-options { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:0 24px 25px; }
    .theme-option { position:relative; text-align:right; border:1px solid var(--line); background:var(--surface-soft); color:var(--text); border-radius:18px; padding:12px; transition:.25s; cursor:pointer; }
    .theme-option:hover { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 14px 32px rgba(0,0,0,.18); }
    .theme-option:focus-visible { outline:3px solid color-mix(in srgb, var(--accent-2) 45%, transparent); outline-offset:3px; }
    .theme-option.selected { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
    .theme-option.selected::after { content:'✓ مختار للمعاينة'; position:absolute; top:10px; left:10px; color:var(--accent-ink); background:var(--accent); border-radius:999px; padding:5px 8px; font-size:9px; font-weight:700; }
    .theme-preview { height:116px; border-radius:12px; padding:12px; margin-bottom:12px; overflow:hidden; }
    .theme-preview.dark { background:#0b1016; border:1px solid #263544; }
    .theme-preview.light { background:#f1f5f7; border:1px solid #d9e1e6; }
    .preview-bar { width:55%; height:7px; border-radius:9px; margin-bottom:13px; }
    .dark .preview-bar { background:#d4ff4f; }.light .preview-bar { background:#227ea4; }
    .preview-line { height:6px; border-radius:8px; margin:8px 0; width:82%; }.preview-line.short { width:52%; }
    .dark .preview-line { background:#344353; }.light .preview-line { background:#c7d3da; }
    .preview-cards { display:flex; gap:6px; margin-top:13px; }.preview-card { height:27px; flex:1; border-radius:6px; }.dark .preview-card { background:#1a2835; border:1px solid #304354; }.light .preview-card { background:#fff; border:1px solid #d8e1e6; }
    .theme-option strong { display:block; font-size:14px; margin-bottom:3px; }.theme-option span { color:var(--muted); font-size:11px; }
    .welcome-status { color:var(--muted); font-size:11px; text-align:center; margin:0 0 12px; }
    .welcome-confirm { display:block; margin:0 auto 14px; min-width:220px; }
    .welcome-foot { padding:0 25px 23px; text-align:center; color:var(--muted); font-size:10px; }
    .theme-library { width:min(100%, 760px); max-height:min(760px, 92vh); overflow:auto; border:1px solid var(--line); border-radius:28px; background:var(--surface-strong); box-shadow:0 35px 120px rgba(0,0,0,.5); transform:translateY(26px) scale(.94); transition:.5s cubic-bezier(.2,.85,.2,1); }
    .modal-backdrop.open .theme-library { transform:translateY(0) scale(1); }
    .library-head { display:flex; justify-content:space-between; gap:18px; padding:27px 28px 19px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%); }
    .library-head h2 { margin:7px 0 5px; font-size:25px; letter-spacing:-1px; }
    .library-head p { color:var(--muted); font-size:12px; line-height:1.8; margin:0; }
    .library-close { width:34px; height:34px; flex:none; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface-soft); font-size:20px; transition:.2s; }
    .library-close:hover { color:var(--text); transform:rotate(90deg); }
    .theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px 24px 17px; }
    .theme-card { position:relative; text-align:right; border:1px solid var(--line); background:var(--surface-soft); color:var(--text); border-radius:16px; padding:10px; cursor:pointer; transition:.25s; }
    .theme-card:hover { transform:translateY(-4px); border-color:var(--accent-2); box-shadow:var(--shadow); }
    .theme-card.selected { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
    .theme-card.selected::after { content:'مفعّل'; position:absolute; top:17px; left:17px; color:var(--accent-ink); background:var(--accent); border-radius:99px; padding:4px 7px; font-size:9px; font-weight:700; }
    .theme-shot { height:112px; border-radius:10px; padding:11px; margin-bottom:10px; overflow:hidden; }
    .shot-dark{background:#0b1016;border:1px solid #263544}.shot-light{background:#f1f5f7;border:1px solid #d9e1e6}.shot-royal{background:#0b0d1a;border:1px solid #39345f}.shot-ocean{background:#07141a;border:1px solid #1b5960}.shot-sunset{background:#1a1115;border:1px solid #673333}.shot-paper{background:#f7f3ec;border:1px solid #ddcdb7}.shot-graphite{background:#101113;border:1px solid #44484f}
    .shot-top{height:7px;width:52%;border-radius:9px;margin-bottom:13px}.shot-dark .shot-top{background:#d4ff4f}.shot-light .shot-top{background:#227ea4}.shot-royal .shot-top{background:#b9a3ff}.shot-ocean .shot-top{background:#57e0d0}.shot-sunset .shot-top{background:#ffbd69}.shot-paper .shot-top{background:#d48b35}.shot-graphite .shot-top{background:#f1f1ec}
    .shot-line{height:6px;width:84%;border-radius:8px;margin:8px 0}.shot-line.short{width:52%}.shot-dark .shot-line,.shot-royal .shot-line,.shot-ocean .shot-line,.shot-sunset .shot-line,.shot-graphite .shot-line{background:#354452}.shot-light .shot-line,.shot-paper .shot-line{background:#cbd5d8}
    .shot-cards{display:flex;gap:5px;margin-top:13px}.shot-card{height:25px;flex:1;border-radius:5px}.shot-dark .shot-card,.shot-royal .shot-card,.shot-ocean .shot-card,.shot-sunset .shot-card,.shot-graphite .shot-card{background:#1c2a36;border:1px solid #304354}.shot-light .shot-card,.shot-paper .shot-card{background:#fff;border:1px solid #d9e0e1}
    .theme-card strong{display:block;font-size:13px;margin-bottom:2px}.theme-card small{color:var(--muted);font-size:10px}.theme-swatch{display:flex;gap:4px;margin-top:8px}.theme-swatch i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
    .library-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px 23px}.library-status{color:var(--muted);font-size:11px}.library-apply{min-width:170px}
    .ai-fab { position:fixed; left:24px; bottom:24px; z-index:22; display:flex; align-items:center; gap:9px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:15px; padding:10px 13px 10px 10px; font-size:12px; font-weight:700; box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 25%, transparent); transition:.25s; }
    .ai-fab:hover { transform:translateY(-4px); box-shadow:0 16px 36px color-mix(in srgb, var(--accent) 32%, transparent); }
    .ai-fab-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:9px; background:rgba(0,0,0,.12); font-size:15px; }
    .ai-pulse { position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#ff6c6c; box-shadow:0 0 0 4px color-mix(in srgb, #ff6c6c 18%, transparent); }
    .ai-panel { position:fixed; left:24px; bottom:82px; z-index:50; width:min(390px, calc(100vw - 32px)); height:min(610px, calc(100vh - 110px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--surface-strong); box-shadow:0 25px 90px rgba(0,0,0,.38); transform:translateY(18px) scale(.96); opacity:0; visibility:hidden; transition:.3s cubic-bezier(.2,.8,.2,1); }
    .ai-panel.open { transform:translateY(0) scale(1); opacity:1; visibility:visible; }
    .ai-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 16px; border-bottom:1px solid var(--line); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%); }
    .ai-agent { display:flex; align-items:center; gap:10px; }.ai-agent-mark { position:relative; width:37px; height:37px; display:grid; place-items:center; color:var(--accent-ink); background:var(--accent); border-radius:12px 12px 12px 4px; font-weight:800; }.ai-agent strong { display:block; font-size:13px; }.ai-agent span { color:var(--muted); font-size:10px; }.ai-online { display:inline-block; width:6px; height:6px; margin-left:4px; border-radius:50%; background:#58d58a; }
    .ai-close { width:30px; height:30px; border-radius:9px; color:var(--muted); background:var(--surface-soft); border:1px solid var(--line); font-size:18px; transition:.2s; }.ai-close:hover { color:var(--text); transform:rotate(90deg); }
    .ai-messages { flex:1; overflow:auto; padding:17px 14px; display:flex; flex-direction:column; gap:11px; }
    .ai-message { max-width:88%; padding:10px 12px; border-radius:14px; font-size:12px; line-height:1.8; animation:itemIn .3s both; }.ai-message.bot { align-self:flex-start; color:var(--text); background:var(--surface-soft); border:1px solid var(--line); border-top-right-radius:4px; }.ai-message.user { align-self:flex-end; color:var(--accent-ink); background:var(--accent); border-top-left-radius:4px; }
    .ai-suggestions { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }.ai-suggestion { color:var(--accent-2); background:var(--surface-soft); border:1px solid var(--line); border-radius:99px; padding:7px 9px; font-size:10px; transition:.2s; }.ai-suggestion:hover { border-color:var(--accent-2); transform:translateY(-2px); }
    .ai-input-wrap { display:flex; gap:7px; padding:11px; border-top:1px solid var(--line); background:var(--surface); }.ai-input { min-width:0; flex:1; color:var(--text); background:var(--surface-soft); border:1px solid var(--line); outline:none; border-radius:11px; padding:10px 11px; font-size:11px; }.ai-input:focus { border-color:var(--accent-2); }.ai-send { width:38px; flex:none; color:var(--accent-ink); background:var(--accent); border-radius:11px; font-size:16px; }.ai-note { color:var(--muted); font-size:9px; text-align:center; padding:0 12px 9px; }
    @media (max-width:650px){.theme-grid{grid-template-columns:repeat(2,1fr);padding:15px}.library-head{padding:22px 18px 16px}.library-foot{padding:0 15px 18px;display:block}.library-status{margin-bottom:10px}.library-apply{width:100%}.ai-fab{left:14px;bottom:78px}.ai-fab-label{display:none}.ai-panel{left:16px;bottom:142px;width:calc(100vw - 32px);height:min(570px,calc(100vh - 180px))}}
    @media (max-width:520px) { .welcome-top { padding:27px 20px 20px; }.welcome-top h2 { font-size:22px; }.theme-options { gap:8px; padding:0 14px 18px; }.theme-option { padding:8px; }.theme-preview { height:88px; padding:8px; }.welcome-foot { padding:0 16px 18px; } }
    .item-symbol { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; margin-bottom:16px; color:var(--accent-ink); background:var(--accent); font-size:26px; font-weight:700; box-shadow:0 10px 25px color-mix(in srgb, var(--accent) 18%, transparent); }
    .item-path { color:var(--accent-2); font-size:11px; margin:0 0 5px; }
    .item-description { color:var(--muted); font-size:13px; line-height:1.95; margin:0 0 19px; }
    .demo-badge { display:inline-flex; align-items:center; gap:6px; color:var(--accent-ink); background:var(--accent); border-radius:999px; padding:6px 10px; font-size:10px; font-weight:700; margin-bottom:15px; }
    .demo-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(17,24,10,.1); }
    .item-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 17px; }
    .item-stat { border:1px solid var(--line); background:var(--surface-soft); border-radius:12px; padding:10px; min-width:0; }
    .item-stat strong { display:block; font:700 17px 'Space Grotesk'; direction:ltr; margin-bottom:3px; }
    .item-stat span { display:block; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sample-title { color:var(--muted); font-size:11px; margin:0 0 8px; }
    .sample-list { display:grid; gap:7px; margin:0 0 19px; padding:0; list-style:none; }
    .sample-list li { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--text); font-size:11px; padding:8px 10px; border-radius:9px; background:var(--surface-soft); }
    .sample-data { display:flex; align-items:center; gap:8px; }
    .sample-list li::before { content:'✦'; color:var(--accent); }
    .item-actions { display:flex; gap:9px; flex-wrap:wrap; }
    .item-back { color:var(--text); background:var(--surface-soft); border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:12px; }
    .item-back:hover { background:var(--surface); }
    @media (max-width:520px) { .item-stats { gap:6px; } .item-stat { padding:9px 7px; } .item-stat strong { font-size:15px; } }
    @media (max-width: 1100px) { .modules { grid-template-columns:repeat(3, minmax(0,1fr)); } }
    @media (max-width: 820px) { .app { display:block; } .sidebar { display:none; } main { padding:18px 16px 88px; } .topbar { margin-bottom:20px; } .crumb { font-size:11px; } .profile { display:none; } .modules { grid-template-columns:repeat(2, minmax(0,1fr)); } .bottom-grid { grid-template-columns:1fr; } .mobile-nav { display:flex; position:fixed; bottom:12px; left:12px; right:12px; height:60px; z-index:10; border:1px solid var(--line); background:color-mix(in srgb, var(--surface-strong) 87%, transparent); backdrop-filter:blur(16px); border-radius:18px; justify-content:space-around; align-items:center; box-shadow:var(--shadow); } .mobile-nav a { text-decoration:none; color:var(--muted); font-size:10px; display:flex; flex-direction:column; align-items:center; gap:4px; } .mobile-nav a.active { color:var(--accent); } .mobile-nav svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; } }
    @media (max-width: 520px) { .hero { border-radius:20px; padding:27px 20px 30px; } h1 { letter-spacing:-1.2px; } .stats { gap:7px; } .stat { padding:12px 10px; display:block; } .stat b { font-size:20px; margin-bottom:3px; } .stat i { display:block; margin-top:4px; } .toolbar { display:block; } .filter { margin-top:8px; } .module { min-height:157px; padding:14px; } .focus { align-items:flex-start; } .focus-art { min-width:80px; width:80px; height:80px; } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }