:root {
  --bg:#0f172a; /* slate-900 */
  --panel:#111827; /* gray-900 */
  --muted:#9ca3af;
  --text:#e5e7eb;
  --brand:#22d3ee; /* cyan-400 */
  --brand-2:#a78bfa; /* violet-400 */
  --ok:#10b981; /* emerald */
  --warn:#f59e0b; /* amber */
  --err:#ef4444; /* red */
  --code:#0b1220; /* code bg */
  --border:#1f2937; /* gray-800 */
}
html, body { height:100%; }
body {
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:linear-gradient(180deg, #0b1220 0%, #0f172a 60%, #0b1220 100%);
  color:var(--text);
  overflow-x:hidden;
  word-break:break-word;
}
.layout { display:grid; grid-template-columns: 320px 1fr; min-height:100vh; }
img { max-width:100%; height:auto; }
.nav-toggle {
  display:none;
  position:fixed;
  top:16px;
  left:16px;
  background:var(--brand);
  color:#111;
  border:none;
  padding:8px 12px;
  border-radius:8px;
  font-size:18px;
  z-index:1001;
}
nav {
  position:sticky; top:0; align-self:start; height:100vh; overflow:auto;
  padding:24px; background:linear-gradient(180deg, #0b1220 0%, #0d1324 100%);
  border-right:1px solid var(--border);
}
nav h1 { font-size:22px; line-height:1.2; margin:0 0 12px; }
nav .version { color:var(--muted); font-size:13px; }
nav .updated { color:var(--muted); font-size:12px; margin-top:6px; }
nav input[type="search"] { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0a0f1b; color:var(--text); margin:12px 0 10px; }
.toc { list-style:none; padding-left:0; margin:10px 0 0; }
.toc li { margin:6px 0; }
.toc a { color:var(--text); text-decoration:none; opacity:.9; }
.toc a:hover { color:var(--brand); }
.toc .grp {
margin-top:14px;
font-size:12px;
font-weight:bold;
color:var(--brand);
text-transform:uppercase;
letter-spacing:.12em;
padding:4px 6px;
border-left:3px solid var(--brand-2);
background:rgba(167,139,250,.08);
border-radius:6px;
}

main { padding:40px 56px; }
section { margin:40px 0 72px; }
h2 { font-size:30px; margin:24px 0 10px; }
h3 { font-size:20px; margin:18px 0 8px; color:#dbeafe; }
p { line-height:1.75; }
a { color:var(--brand); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
pre { background:var(--code); padding:16px; border:1px solid var(--border); border-radius:12px; overflow:auto; }
code.inline { background:var(--code); padding:2px 6px; border-radius:6px; border:1px solid var(--border); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.panel { background:rgba(17,24,39,.5); border:1px solid var(--border); border-radius:16px; padding:18px; }
.callout { border-left:4px solid var(--brand); background:rgba(34,211,238,.07); padding:12px 14px; border-radius:10px; }
.callout.warn { border-left-color: var(--warn); background:rgba(245,158,11,.08); }
.callout.err { border-left-color: var(--err); background:rgba(239,68,68,.08); }
.list-check li { margin:8px 0; }
.kbd { border:1px solid var(--border); background:#0a0f1b; padding:2px 6px; border-radius:6px; font-size:12px; }
table { width:100%; border-collapse:collapse; }
th, td { border:1px solid var(--border); padding:10px; text-align:left; }
th { background:#0a0f1b; }
.footer { color:var(--muted); font-size:12px; margin-top:56px; border-top:1px solid var(--border); padding-top:18px; }
img.mock { width:100%; border-radius:12px; border:1px solid var(--border); background:#0a0f1b; display:block; }
.img-fluid { max-width:100%; height:auto; margin-top: 15px; border-radius:12px; border:1px solid var(--border); background:#0a0f1b; }
.tag { display:inline-block; font-size:12px; color:#111; background:linear-gradient(90deg, var(--brand), var(--brand-2)); padding:2px 8px; border-radius:999px; }
.badge { display:inline-block; font-size:11px; color:var(--text); border:1px solid var(--border); padding:2px 6px; border-radius:999px; }

@media (max-width: 1024px) {
  .layout {
    display:block;
  }
  nav {
    position:fixed;
    left:0; top:0; bottom:0;
    width:260px;
    height:100%;
    transform:translateX(-100%);
    transition:transform .3s;
    border-right:1px solid var(--border);
    border-bottom:none;
    z-index:1000;
  }
  nav.open {
    transform:translateX(0);
  }
  main {
    padding:80px 20px 40px;
  }
  .grid-2 {
    grid-template-columns:1fr;
  }
  .nav-toggle {
    display:block;
  }
  table, pre {
    display:block;
    overflow-x:auto;
  }
}