:root{
  --bg:#0b1220; --panel:#111a2e; --panel2:#0f1726; --line:#1e2a44;
  --text:#e6ecf7; --muted:#93a1bd; --accent:#3b82f6; --accent-2:#60a5fa;
  --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --chip:#1b2742;
  --sidebar-w:300px; --maxw:880px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline}
code{background:#0c1424; border:1px solid var(--line); border-radius:6px; padding:.1em .4em; font-size:.88em; color:#cfe0ff; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
kbd{background:#0c1424;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:.05em .45em;font-size:.82em}

/* Layout */
.layout{display:flex; min-height:100vh}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--panel2); border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:22px 16px 60px;
}
.brand{display:flex; align-items:center; gap:11px; padding:6px 8px 18px; border-bottom:1px solid var(--line); margin-bottom:14px}
.brand .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:18px;flex:0 0 38px}
.brand b{font-size:16px;display:block;letter-spacing:.2px}
.brand span{font-size:12px;color:var(--muted)}

/* Language selector */
.langsel{display:flex;gap:6px;margin:0 0 12px}
.langsel a{flex:1;text-align:center;padding:7px 0;border-radius:8px;border:1px solid var(--line);background:#0c1424;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.langsel a:hover{color:var(--text);text-decoration:none;border-color:#2b3c5e}
.langsel a.active{background:var(--accent);border-color:var(--accent);color:#fff}

.search{width:100%;margin:0 0 14px;padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:#0c1424;color:var(--text);font-size:14px}
.search::placeholder{color:#64748b}
nav.toc a{display:block;color:var(--muted);padding:6px 10px;border-radius:8px;font-size:14px;line-height:1.4}
nav.toc a:hover{background:var(--chip);color:var(--text);text-decoration:none}
nav.toc a.active{background:rgba(59,130,246,.16);color:#bfdbfe}
nav.toc .group{font-size:11px;text-transform:uppercase;letter-spacing:.10em;color:#5b6b8c;margin:18px 10px 6px;font-weight:700}
nav.toc a.sub{padding-left:24px;font-size:13.5px}

/* Content */
.content{flex:1 1 auto; min-width:0; padding:0}
.content-inner{max-width:var(--maxw); margin:0 auto; padding:46px 34px 120px}
h1,h2,h3{line-height:1.25;scroll-margin-top:24px}
h1{font-size:32px;margin:.2em 0 .35em;letter-spacing:-.4px}
h2{font-size:24px;margin:2.2em 0 .6em;padding-top:.4em;border-top:1px solid var(--line)}
h2:first-of-type{border-top:0}
h3{font-size:18.5px;margin:1.7em 0 .4em;color:#dbe6fb}
p{margin:.55em 0}
ul,ol{margin:.5em 0 .9em; padding-left:1.35em}
li{margin:.3em 0}
.lead{font-size:18px;color:var(--muted);margin:.4em 0 1.4em}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:16px 0}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.feature .ic{font-size:22px;margin-bottom:6px}
.feature b{display:block;margin-bottom:3px}
.feature p{margin:0;color:var(--muted);font-size:14px}

.note,.tip,.warn{border-radius:12px;padding:13px 16px;margin:16px 0;border:1px solid;font-size:14.5px}
.note{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.35)}
.tip{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.35)}
.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.35)}
.note b,.tip b,.warn b{display:block;margin-bottom:2px}

table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:#cdd9f0;font-weight:600;background:var(--panel2)}
tr:hover td{background:rgba(255,255,255,.015)}

.chip{display:inline-block;font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--chip);color:#cbd5e1;margin:0 4px 4px 0}
.chip.pro{color:#bfdbfe;border-color:rgba(59,130,246,.5);background:rgba(59,130,246,.12)}
.chip.green{color:#bbf7d0;border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.12)}
.chip.amber{color:#fde68a;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.12)}

.steps{counter-reset:step;list-style:none;padding-left:0}
.steps>li{position:relative;padding:2px 0 2px 44px;margin:.6em 0}
.steps>li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}

.topbar{display:none}
.footer{color:#5b6b8c;font-size:13px;border-top:1px solid var(--line);padding-top:18px;margin-top:40px}
.no-result{color:var(--muted);padding:10px;display:none}

@media (max-width:880px){
  .sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.5)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .backdrop{display:block}
  .backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30}
  .topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;background:var(--panel2);border-bottom:1px solid var(--line);padding:11px 16px}
  .topbar b{font-size:15px}
  .hamburger{background:var(--chip);border:1px solid var(--line);color:var(--text);border-radius:9px;width:40px;height:38px;font-size:18px;cursor:pointer}
  .content-inner{padding:24px 18px 90px}
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  h1{font-size:26px}
}