:root { --sidebar-width: 264px; }
    /* ─── DOCS LAYOUT ─────────────────────────────────── */
    .docs-layout {
      display: flex;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
      min-height: calc(100vh - 72px);
    }

    /* ─── SIDEBAR ─────────────────────────────────────── */
    .docs-sidebar {
      width: var(--sidebar-width);
      flex-shrink: 0;
      position: sticky;
      top: 72px;
      height: calc(100vh - 72px);
      overflow-y: auto;
      padding: 32px 0 32px;
      border-right: 1px solid var(--border);
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }
    .docs-sidebar::-webkit-scrollbar { width: 4px; }
    .docs-sidebar::-webkit-scrollbar-track { background: transparent; }
    .docs-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

    .sidebar-section {
      margin-bottom: 8px;
    }
    .sidebar-section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      padding: 16px 20px 8px;
    }
    .sidebar-link {
      display: block;
      padding: 7px 20px;
      font-size: 13.5px;
      color: var(--text-secondary);
      text-decoration: none;
      border-radius: 6px;
      margin: 0 8px;
      transition: color 0.15s, background 0.15s;
      line-height: 1.4;
    }
    .sidebar-link:hover {
      color: var(--text-primary);
      background: rgba(79,142,247,0.06);
    }
    .sidebar-link.active {
      color: var(--accent);
      background: rgba(79,142,247,0.1);
      font-weight: 600;
    }
    .sidebar-sub-link {
      display: block;
      padding: 5px 20px 5px 32px;
      font-size: 12.5px;
      color: var(--text-muted);
      text-decoration: none;
      border-radius: 6px;
      margin: 0 8px;
      transition: color 0.15s, background 0.15s;
    }
    .sidebar-sub-link:hover {
      color: var(--text-secondary);
      background: rgba(79,142,247,0.04);
    }
    .sidebar-sub-link.active {
      color: var(--accent);
    }

    /* ─── CONTENT ──────────────────────────────────────── */
    .docs-content {
      flex: 1;
      min-width: 0;
      padding: 56px 0 96px 56px;
      max-width: 860px;
    }

    /* ─── TYPOGRAPHY ───────────────────────────────────── */
    .docs-content h1 {
      font-size: 42px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: var(--text-primary);
      margin-bottom: 16px;
    }
    .docs-content h1 .grad {
      background: linear-gradient(135deg, var(--accent), #a78bfa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .docs-content h2 {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      margin-top: 72px;
      margin-bottom: 20px;
      padding-top: 72px;
      border-top: 1px solid var(--border);
    }
    .docs-content h2:first-of-type {
      margin-top: 40px;
      padding-top: 0;
      border-top: none;
    }
    .docs-content h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin-top: 40px;
      margin-bottom: 12px;
    }
    .docs-content h4 {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-top: 28px;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 12px;
    }
    .docs-content p {
      color: var(--text-secondary);
      margin-bottom: 16px;
      font-size: 15.5px;
    }
    .docs-content p:last-child { margin-bottom: 0; }
    .docs-content ul, .docs-content ol {
      color: var(--text-secondary);
      padding-left: 24px;
      margin-bottom: 16px;
      font-size: 15.5px;
    }
    .docs-content li { margin-bottom: 6px; }
    .docs-content li:last-child { margin-bottom: 0; }
    .docs-content strong { color: var(--text-primary); font-weight: 600; }
    .docs-content a {
      color: var(--accent);
      text-decoration: none;
    }
    .docs-content a:hover { text-decoration: underline; }
    .docs-content code {
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 2px 6px;
      color: var(--accent);
    }

    /* ─── CODE BLOCKS ──────────────────────────────────── */
    .code-wrap {
      position: relative;
      margin: 24px 0;
    }
    .code-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-card-2);
      border: 1px solid var(--border);
      border-bottom: none;
      border-radius: var(--radius) var(--radius) 0 0;
      padding: 10px 16px;
    }
    .code-lang {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .copy-btn {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 5px;
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 500;
      font-family: 'Inter', sans-serif;
      padding: 3px 10px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
      letter-spacing: 0.03em;
    }
    .copy-btn:hover { color: var(--text-secondary); border-color: var(--border-light); background: rgba(255,255,255,0.04); }
    .copy-btn.copied { color: var(--green); border-color: var(--green-dim); }
    .code-block {
      background: var(--code-bg);
      border: 1px solid var(--border);
      border-radius: 0 0 var(--radius) var(--radius);
      padding: 20px 20px;
      overflow-x: auto;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      line-height: 1.7;
      color: var(--text-secondary);
      white-space: pre;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }
    .code-block::-webkit-scrollbar { height: 4px; }
    .code-block::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    .code-block .kw  { color: #a78bfa; }
    .code-block .str { color: #22d3a0; }
    .code-block .cmt { color: #4a6490; font-style: italic; }
    .code-block .fn  { color: #60a5fa; }
    .code-block .ty  { color: #f59e0b; }
    .code-block .num { color: #fb923c; }
    .code-block .yk  { color: #7dd3fc; }
    .code-block .yv  { color: #22d3a0; }
    .code-block .prop { color: #e8edf8; }

    /* code-only block (no header) */
    .code-block-bare {
      background: var(--code-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      overflow-x: auto;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      line-height: 1.7;
      color: var(--text-secondary);
      white-space: pre;
      margin: 24px 0;
    }
    .code-block-bare .kw  { color: #a78bfa; }
    .code-block-bare .str { color: #22d3a0; }
    .code-block-bare .cmt { color: #4a6490; font-style: italic; }
    .code-block-bare .fn  { color: #60a5fa; }
    .code-block-bare .ty  { color: #f59e0b; }
    .code-block-bare .num { color: #fb923c; }

    /* ─── CALLOUTS ──────────────────────────────────────── */
    .callout {
      border-radius: var(--radius);
      padding: 16px 20px;
      margin: 24px 0;
      font-size: 14.5px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .callout-icon { flex-shrink: 0; font-size: 17px; margin-top: 1px; }
    .callout-body { color: var(--text-secondary); }
    .callout-body strong { color: var(--text-primary); }
    .callout.info {
      background: rgba(79,142,247,0.07);
      border: 1px solid rgba(79,142,247,0.25);
    }
    .callout.tip {
      background: rgba(34,211,160,0.07);
      border: 1px solid rgba(34,211,160,0.25);
    }
    .callout.warn {
      background: rgba(245,158,11,0.07);
      border: 1px solid rgba(245,158,11,0.25);
    }
    .callout.danger {
      background: rgba(239,68,68,0.07);
      border: 1px solid rgba(239,68,68,0.25);
    }

    /* ─── CARDS / GRIDS ─────────────────────────────────── */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
      margin: 24px 0;
    }
    .feature-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
    }
    .feature-card h4 {
      font-size: 14px !important;
      font-weight: 600 !important;
      color: var(--text-primary) !important;
      margin-bottom: 6px !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }
    .feature-card p {
      font-size: 13.5px;
      color: var(--text-muted);
      margin: 0;
    }
    .feature-card-icon {
      font-size: 22px;
      margin-bottom: 12px;
    }

    /* ─── TABLE ─────────────────────────────────────────── */
    .docs-table {
      width: 100%;
      border-collapse: collapse;
      margin: 24px 0;
      font-size: 14px;
    }
    .docs-table th {
      text-align: left;
      padding: 10px 14px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      background: var(--bg-card-2);
    }
    .docs-table th:first-child { border-radius: var(--radius) 0 0 0; }
    .docs-table th:last-child  { border-radius: 0 var(--radius) 0 0; }
    .docs-table td {
      padding: 11px 14px;
      border-bottom: 1px solid var(--border);
      color: var(--text-secondary);
      vertical-align: top;
    }
    .docs-table td code {
      font-size: 12px;
    }
    .docs-table tr:last-child td { border-bottom: none; }
    .docs-table tr:hover td { background: rgba(255,255,255,0.015); }

    /* ─── STEP LIST ─────────────────────────────────────── */
    .step-list { list-style: none; padding: 0; counter-reset: steps; margin: 24px 0; }
    .step-item {
      counter-increment: steps;
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
      align-items: flex-start;
    }
    .step-num {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(79,142,247,0.12);
      border: 1px solid rgba(79,142,247,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
      margin-top: 2px;
    }
    .step-body h4 {
      font-size: 15px !important;
      font-weight: 600 !important;
      color: var(--text-primary) !important;
      margin: 0 0 4px !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }
    .step-body p { font-size: 14.5px; margin: 0; }

    /* ─── BADGE / TAG ────────────────────────────────────── */
    .badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.8;
    }
    .badge-green { background: rgba(34,211,160,0.12); color: var(--green); border: 1px solid rgba(34,211,160,0.3); }
    .badge-blue  { background: rgba(79,142,247,0.12); color: var(--accent); border: 1px solid rgba(79,142,247,0.3); }
    .badge-orange{ background: rgba(245,158,11,0.12); color: var(--orange); border: 1px solid rgba(245,158,11,0.3); }

    /* ─── HERO ──────────────────────────────────────────── */
    .docs-hero {
      padding-bottom: 40px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 0;
    }
    .docs-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(79,142,247,0.1);
      border: 1px solid rgba(79,142,247,0.3);
      border-radius: 100px;
      padding: 5px 14px;
      font-size: 12px;
      font-weight: 500;
      color: var(--accent);
      margin-bottom: 24px;
    }
    .docs-hero-badge .dot {
      width: 6px; height: 6px;
      background: var(--green);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.6; transform: scale(0.85); }
    }

    /* ─── GRAPH DIAGRAM ─────────────────────────────────── */
    .graph-diagram {
      background: var(--code-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px;
      margin: 24px 0;
      text-align: center;
      overflow-x: auto;
    }
    .graph-diagram svg { max-width: 100%; }

    /* ─── FOOTER ─────────────────────────────────────────── */
    footer {
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding: 64px 0 36px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr repeat(4, 1fr);
      gap: 40px 32px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .footer-brand p { margin-top: 16px; font-size: 13px; color: var(--text-muted); max-width: 260px; line-height: 1.6; }
    .footer-socials { display: flex; gap: 10px; margin-top: 20px; }
    .footer-socials a {
      width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-secondary); text-decoration: none;
    }
    .footer-socials a:hover { color: var(--text-primary); }
    .footer-col h3 { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
    .footer-col ul { list-style: none; }
    .footer-col li + li { margin-top: 10px; }
    .footer-col a { font-size: 13px; color: var(--text-muted); text-decoration: none; }
    .footer-col a:hover { color: var(--text-secondary); }
    .footer-bottom {
      max-width: 1400px; margin: 48px auto 0; padding: 24px 24px 0;
      border-top: 1px solid var(--border);
      display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    }
    .footer-copy { font-size: 13px; color: var(--text-muted); }
    .footer-links { display: flex; gap: 24px; }
    .footer-links a { font-size: 13px; color: var(--text-muted); text-decoration: none; }
    .footer-links a:hover { color: var(--text-secondary); }

    /* ─── RESPONSIVE ─────────────────────────────────────── */
    @media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 900px) {
      .docs-sidebar { display: none; }
      .docs-content { padding: 40px 0 72px; }
      .nav-toggle { display: inline-flex; }
      .nav-links, .nav-actions { display: none; }
      nav.menu-open { background: rgba(5,7,13,0.97); }
      nav.menu-open .nav-inner { flex-wrap: wrap; height: auto; padding-bottom: 12px; }
      nav.menu-open .nav-links {
        display: flex; flex-direction: column; align-items: stretch;
        order: 3; width: 100%; padding: 12px 0; gap: 4px; margin-left: 0;
      }
      nav.menu-open .nav-actions { display: flex; order: 4; width: 100%; margin: 0 0 12px; }
      .nav-dropdown, .nav-dropdown.wide {
        position: static; opacity: 1; visibility: visible; transform: none;
        display: none; min-width: 0; box-shadow: none; background: transparent; border: none;
        grid-template-columns: 1fr;
      }
      .nav-item.open > .nav-dropdown { display: grid; }
    }
    @media (max-width: 600px) {
      .docs-content h1 { font-size: 30px; }
      .docs-content h2 { font-size: 22px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }