@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#f8f9fb;color:#111;display:flex;min-height:100vh}
code,.mono{font-family:'JetBrains Mono',monospace}
a{color:#111;text-decoration:none}

/* ── Sidebar ── */
.sidebar{width:280px;background:#fff;border-right:1px solid #e5e7eb;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:50;padding:0}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #e5e7eb;position:sticky;top:0;background:#fff;z-index:10}
.sidebar-brand .logo{width:32px;height:32px;background:#000;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar-brand .logo svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sidebar-brand span{font-weight:800;font-size:14px;letter-spacing:-.02em}
.sidebar-brand .badge{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb;padding:2px 6px;border-radius:4px;margin-left:auto}
.sidebar-section{padding:16px 0 8px}
.sidebar-label{padding:0 20px 8px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9ca3af}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:8px 20px;font-size:13px;font-weight:500;color:#6b7280;transition:all .15s;border-left:3px solid transparent}
.sidebar-link:hover{color:#111;background:#f9fafb}
.sidebar-link.active{color:#111;font-weight:700;background:#f3f4f6;border-left-color:#111}
.sidebar-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;opacity:.6}
.sidebar-link.active svg{opacity:1}
.sidebar-divider{height:1px;background:#e5e7eb;margin:8px 20px}

/* ── Main ── */
.main{margin-left:280px;flex:1;min-width:0}

/* ── Top bar ── */
.topbar{position:sticky;top:0;z-index:40;background:rgba(248,249,251,.92);backdrop-filter:blur(20px);border-bottom:1px solid #e5e7eb;padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:56px}
.topbar-left{display:flex;align-items:center;gap:8px;font-size:13px;color:#9ca3af}
.topbar-left a{color:#9ca3af;transition:color .15s}
.topbar-left a:hover{color:#111}
.topbar-left .sep{margin:0 4px}
.topbar-left .current{color:#111;font-weight:600}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-right a{display:flex;align-items:center;gap:6px;padding:7px 14px;font-size:12px;font-weight:600;border-radius:7px;transition:all .15s}
.gh-btn{background:#000;color:#fff}
.gh-btn:hover{background:#374151;transform:translateY(-1px)}
.gh-btn svg{width:14px;height:14px;fill:currentColor}
.site-btn{border:1px solid #e5e7eb;color:#6b7280}
.site-btn:hover{background:#f3f4f6;color:#111}

/* ── Content ── */
.content{max-width:820px;padding:48px 40px 80px}
.content h1{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:8px}
.content .subtitle{font-size:16px;color:#6b7280;line-height:1.6;margin-bottom:32px}
.content h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:48px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid #e5e7eb}
.content h3{font-size:17px;font-weight:700;margin-top:32px;margin-bottom:12px}
.content p{font-size:15px;line-height:1.7;color:#374151;margin-bottom:16px}
.content ul,.content ol{margin:0 0 16px 24px;font-size:15px;line-height:1.8;color:#374151}
.content li{margin-bottom:4px}
.content strong{color:#111;font-weight:700}
.content code{font-size:13px;background:#f3f4f6;padding:2px 7px;border-radius:5px;border:1px solid #e5e7eb;color:#111}
.content a{color:#111;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#d1d5db;transition:text-decoration-color .15s}
.content a:hover{text-decoration-color:#111}

/* ── Code blocks ── */
.codeblock{background:#1a1a2e;color:#e5e7eb;border-radius:10px;padding:20px 24px;margin:16px 0 24px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;position:relative}
.codeblock .lang{position:absolute;top:10px;right:14px;font-size:10px;font-weight:700;color:#6b7280;letter-spacing:.08em;text-transform:uppercase}
.codeblock .t-dim{color:#6b7280}
.codeblock .t-grn{color:#34d399}
.codeblock .t-blu{color:#60a5fa}
.codeblock .t-ylw{color:#fbbf24}
.codeblock .t-red{color:#f87171}
.codeblock .t-pur{color:#a78bfa}
.codeblock .t-prompt{color:#6b7280;user-select:none}

/* ── Cards ── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:24px 0}
.doc-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px;transition:all .2s;display:block}
.doc-card:hover{border-color:#d1d5db;box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-2px)}
.doc-card .card-icon{width:40px;height:40px;background:#f3f4f6;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.doc-card .card-icon svg{width:20px;height:20px;stroke:#111;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.doc-card h3{font-size:15px;font-weight:700;margin-bottom:6px;text-decoration:none}
.doc-card p{font-size:13px;color:#6b7280;line-height:1.5;margin:0}

/* ── Info / Warn box ── */
.info-box{background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;padding:16px 20px;margin:16px 0 24px;font-size:14px;line-height:1.6;color:#0c4a6e}
.warn-box{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:16px 20px;margin:16px 0 24px;font-size:14px;line-height:1.6;color:#78350f}

/* ── Table ── */
.doc-table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:13px}
.doc-table th{text-align:left;padding:10px 14px;background:#f3f4f6;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;border-bottom:2px solid #e5e7eb}
.doc-table td{padding:10px 14px;border-bottom:1px solid #f3f4f6;vertical-align:top}
.doc-table tr:hover td{background:#f9fafb}
.doc-table code{font-size:12px}
.sev-critical{color:#ef4444;font-weight:700;font-size:11px}
.sev-high{color:#f97316;font-weight:700;font-size:11px}
.sev-medium{color:#eab308;font-weight:700;font-size:11px}
.sev-low{color:#6b7280;font-weight:700;font-size:11px}
.sev-info{color:#3b82f6;font-weight:700;font-size:11px}

/* ── Footer ── */
.doc-footer{border-top:1px solid #e5e7eb;padding:32px 40px;margin-top:60px;font-size:12px;color:#9ca3af;display:flex;justify-content:space-between;align-items:center}
.doc-footer a{color:#6b7280;text-decoration:none;margin:0 8px}
.doc-footer a:hover{color:#111}

/* ── Responsive ── */
@media(max-width:768px){
  .sidebar{display:none}
  .main{margin-left:0}
  .content{padding:32px 20px 60px}
  .topbar{padding:0 20px}
}