:root {
  --bg: #0a0e14; --bg-card: #131820; --bg-hover: #1a2030; --bg-input: #0d1218;
  --border: #1e2a3a; --text: #e6edf3; --text-muted: #7a8a9e; --text-dim: #3d4a5a;
  --accent: #3b82f6; --accent-hover: #60a5fa; --accent-bg: rgba(59,130,246,0.08);
  --green: #22c55e; --red: #ef4444; --yellow: #eab308;
  --purple: #a855f7; --pink: #ec4899;
  --sidebar-w: 260px; --topbar-h: 56px;
  --radius: 8px; --radius-lg: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 1rem)}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent-hover)}
code{font-family:'SF Mono','Fira Code','JetBrains Mono',monospace;font-size:0.88em}
::selection{background:rgba(59,130,246,0.3)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* Topbar */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 1.5rem;z-index:100;backdrop-filter:blur(12px)}
.topbar-brand{display:flex;align-items:center;gap:0.6rem;color:var(--text);font-weight:700;font-size:1.1rem}
.topbar-brand svg{color:var(--accent)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.topbar-right a{color:var(--text-muted);font-size:0.85rem;transition:color var(--transition)}
.topbar-right a:hover{color:var(--accent)}
.topbar-right .btn-demo{background:linear-gradient(135deg,var(--accent),#6366f1);color:#fff;padding:0.4rem 1rem;border-radius:var(--radius);font-size:0.8rem;font-weight:600}
.topbar-right .btn-demo:hover{color:#fff;filter:brightness(1.1)}
.menu-toggle{display:none;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0.4rem}

/* Sidebar */
.sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--sidebar-w);background:var(--bg-card);border-right:1px solid var(--border);overflow-y:auto;padding:1.25rem 0;z-index:50}
.sidebar-section{margin-bottom:1.5rem}
.sidebar-section-title{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-dim);font-weight:700;padding:0 1.25rem;margin-bottom:0.5rem}
.sidebar a{display:block;padding:0.4rem 1.25rem;color:var(--text-muted);font-size:0.85rem;transition:all var(--transition);border-left:2px solid transparent}
.sidebar a:hover{color:var(--text);background:var(--bg-hover);text-decoration:none}
.sidebar a.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-bg);font-weight:500}

/* Main content */
.main{margin-left:var(--sidebar-w);margin-top:var(--topbar-h);padding:2.5rem 3rem 4rem;max-width:900px}

/* Headings */
h1{font-size:2.25rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:0.5rem;background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
h2{font-size:1.5rem;font-weight:700;margin-top:3rem;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border);color:var(--text)}
h3{font-size:1.15rem;font-weight:600;margin-top:2rem;margin-bottom:0.75rem;color:var(--text)}
h4{font-size:1rem;font-weight:600;margin-top:1.5rem;margin-bottom:0.5rem;color:var(--text-muted)}
p{margin-bottom:1rem;color:var(--text-muted)}

/* Hero section */
.hero{padding:2rem 0 3rem;text-align:center}
.hero h1{font-size:2.8rem;margin-bottom:0.75rem}
.hero p{font-size:1.15rem;color:var(--text-muted);max-width:600px;margin:0 auto 2rem}
.hero-badges{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}

/* Feature cards */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin:2rem 0}
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:all var(--transition)}
.feature-card:hover{border-color:rgba(59,130,246,0.3);transform:translateY(-2px);box-shadow:var(--shadow)}
.feature-card h3{font-size:1rem;margin:0 0 0.5rem;display:flex;align-items:center;gap:0.5rem}
.feature-card p{font-size:0.875rem;margin:0}
.feature-icon{color:var(--accent);flex-shrink:0}

/* Code blocks */
pre{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;margin:1rem 0;position:relative}
pre code{display:block;padding:1rem 1.25rem;font-size:0.85rem;line-height:1.7}
code:not(pre code){background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:0.15rem 0.4rem;color:var(--accent)}
.code-header{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 1rem;background:var(--bg-hover);border-bottom:1px solid var(--border);font-size:0.75rem;color:var(--text-dim)}
.copy-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-muted);padding:0.2rem 0.5rem;font-size:0.7rem;cursor:pointer;transition:all var(--transition)}
.copy-btn:hover{border-color:var(--accent);color:var(--accent)}
.copy-btn.copied{border-color:var(--green);color:var(--green)}

/* Tables */
table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:0.875rem}
th{text-align:left;padding:0.75rem 1rem;background:var(--bg-hover);border-bottom:2px solid var(--border);color:var(--text-muted);font-weight:600;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em}
td{padding:0.75rem 1rem;border-bottom:1px solid var(--border);color:var(--text-muted)}
tr:hover td{background:var(--bg-hover)}

/* Badges */
.badge{display:inline-block;padding:0.15rem 0.5rem;border-radius:999px;font-size:0.7rem;font-weight:600;letter-spacing:0.02em}
.badge-green{background:rgba(34,197,94,0.1);color:var(--green)}
.badge-blue{background:rgba(59,130,246,0.1);color:var(--accent)}
.badge-yellow{background:rgba(234,179,8,0.1);color:var(--yellow)}
.badge-red{background:rgba(239,68,68,0.1);color:var(--red)}
.method{font-weight:700;font-size:0.75rem;text-transform:uppercase}
.method-get{color:var(--green)}
.method-post{color:var(--accent)}
.method-delete{color:var(--red)}

/* Alert boxes */
.alert{padding:1rem 1.25rem;border-radius:var(--radius);margin:1rem 0;font-size:0.875rem;border:1px solid}
.alert-info{background:rgba(59,130,246,0.06);border-color:rgba(59,130,246,0.2);color:var(--accent)}
.alert-warn{background:rgba(234,179,8,0.06);border-color:rgba(234,179,8,0.2);color:var(--yellow)}
.alert-tip{background:rgba(34,197,94,0.06);border-color:rgba(34,197,94,0.2);color:var(--green)}

/* Lists */
ul,ol{margin:0.5rem 0 1rem 1.5rem;color:var(--text-muted)}
li{margin-bottom:0.35rem;font-size:0.9rem}
li code{font-size:0.82em}

/* Footer */
.footer{margin-left:var(--sidebar-w);border-top:1px solid var(--border);padding:2rem 3rem;text-align:center;color:var(--text-dim);font-size:0.8rem}
.footer a{color:var(--text-muted)}

/* Responsive */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);transition:transform 0.3s ease}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;padding:1.5rem 1rem 3rem}
  .footer{margin-left:0;padding:1.5rem 1rem}
  .menu-toggle{display:block}
  h1{font-size:1.75rem}
  .hero h1{font-size:2rem}
  .features-grid{grid-template-columns:1fr}
  table{font-size:0.8rem}
  th,td{padding:0.5rem 0.75rem}
}