*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0f172a;
  --bg-card:#1e293b;
  --bg-sidebar:#0c1322;
  --border:#334155;
  --border-hover:#6366f1;
  --text:#e2e8f0;
  --text-muted:#94a3b8;
  --text-heading:#f8fafc;
  --accent:#818cf8;
  --accent-hover:#a5b4fc;
  --code-bg:#020617;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --radius:10px;
  --sidebar-w:280px;
}

html{scroll-behavior:smooth}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-hover)}

/* ── Top bar ───────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  height:56px;display:flex;align-items:center;gap:16px;
}
.topbar-brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:.95rem;color:var(--text-heading);
  white-space:nowrap;
}
.topbar-brand svg{flex-shrink:0}
.topbar-brand span.highlight{color:var(--accent)}
.topbar-search{
  margin-left:auto;
  position:relative;max-width:260px;width:100%;
}
.topbar-search input{
  width:100%;padding:7px 12px 7px 34px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:.85rem;
  outline:none;transition:border-color .2s;
}
.topbar-search input:focus{border-color:var(--accent)}
.topbar-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.45}
.menu-toggle{
  display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:4px;
}

/* ── Layout ────────────────────────────────────── */
.layout{display:flex;flex:1;overflow:hidden}

/* ── Sidebar ───────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  overflow-y:auto;padding:20px 0;
  height:calc(100vh - 56px);position:sticky;top:56px;
}
.sidebar-group{margin-bottom:6px}
.sidebar-group-title{
  font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);padding:10px 20px 4px;font-weight:600;
}
.sidebar-link{
  display:block;padding:7px 20px 7px 28px;
  font-size:.84rem;color:var(--text-muted);
  border-left:2px solid transparent;
  transition:all .15s;cursor:pointer;
}
.sidebar-link:hover{color:var(--text);background:rgba(99,102,241,.06)}
.sidebar-link.active{
  color:var(--accent);border-left-color:var(--accent);
  background:rgba(99,102,241,.08);font-weight:500;
}

/* ── Content ───────────────────────────────────── */
.content{
  flex:1;overflow-y:auto;padding:32px 40px 60px;
  height:calc(100vh - 56px);
  max-width:900px;
}
.page{display:none}
.page.active{display:block}

.content h1{font-size:1.9rem;font-weight:800;color:var(--text-heading);margin-bottom:6px}
.content h2{font-size:1.35rem;font-weight:700;color:var(--text-heading);margin:32px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.content h3{font-size:1.05rem;font-weight:600;color:var(--text-heading);margin:22px 0 8px}
.content p{margin:8px 0}
.content ul,.content ol{margin:8px 0 8px 22px}
.content li{margin:4px 0}
.content li::marker{color:var(--accent)}
.content strong{color:var(--text-heading)}

.badge{
  display:inline-block;padding:2px 8px;border-radius:20px;
  font-size:.72rem;font-weight:600;vertical-align:middle;
}
.badge-ok{background:rgba(34,197,94,.15);color:var(--success)}
.badge-warn{background:rgba(245,158,11,.15);color:var(--warning)}
.badge-err{background:rgba(239,68,68,.15);color:var(--danger)}

/* ── Cards ─────────────────────────────────────── */
.card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;margin:14px 0;
  transition:border-color .2s;
}
.card:hover{border-color:rgba(99,102,241,.35)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:14px 0}

.card-link{text-decoration:none;color:inherit}
.card-link .card{cursor:pointer}
.card-link .card h3{margin:0 0 4px;font-size:.95rem}
.card-link .card p{font-size:.82rem;color:var(--text-muted)}

/* ── Code ──────────────────────────────────────── */
pre{
  background:var(--code-bg);color:#e2e8f0;
  padding:14px 16px;border-radius:8px;
  overflow-x:auto;font-size:.82rem;line-height:1.65;
  border:1px solid var(--border);margin:10px 0;
}
code{
  background:rgba(99,102,241,.12);padding:2px 6px;border-radius:5px;
  font-size:.84em;color:var(--accent);
}
pre code{background:none;padding:0;color:inherit;font-size:inherit}

/* ── Tables ────────────────────────────────────── */
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.86rem}
th{text-align:left;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-heading);font-weight:600}
td{padding:8px 12px;border:1px solid var(--border)}

/* ── Alert boxes ───────────────────────────────── */
.alert{padding:14px 16px;border-radius:8px;margin:12px 0;font-size:.88rem;border-left:3px solid}
.alert-warn{background:rgba(245,158,11,.08);border-color:var(--warning);color:var(--warning)}
.alert-info{background:rgba(99,102,241,.08);border-color:var(--accent);color:var(--accent)}

/* ── Breadcrumb / page subtitle ────────────────── */
.page-subtitle{color:var(--text-muted);font-size:.88rem;margin-bottom:18px}

/* ── Responsive ────────────────────────────────── */
@media(max-width:860px){
  .menu-toggle{display:block}
  .sidebar{
    position:fixed;left:-100%;top:56px;
    width:280px;height:calc(100vh - 56px);
    z-index:40;transition:left .25s;
  }
  .sidebar.open{left:0}
  .content{padding:24px 18px 48px}
  .topbar-search{max-width:180px}
}
@media(max-width:480px){
  .content h1{font-size:1.5rem}
  .card-grid{grid-template-columns:1fr}
}