:root{
  --bg:#0b0f19; --panel:#0f172a; --card:#111a2e;
  --text:#e6eaf2; --muted:#a8b3cf; --border:rgba(255,255,255,.12);
  --accent:#6ea8fe; --accent2:#8bd4ff;
  --radius:14px; --shadow:0 18px 60px rgba(0,0,0,.35);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
[data-theme="light"]{
  --bg:#f6f7fb; --panel:#ffffff; --card:#ffffff;
  --text:#111827; --muted:#4b5563; --border:rgba(17,24,39,.12);
  --shadow:0 18px 60px rgba(17,24,39,.10);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:var(--sans); color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(110,168,254,.22), transparent 55%),
              radial-gradient(1000px 700px at 110% 10%, rgba(139,212,255,.18), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--panel));
}
.wrap{max-width:1200px; margin:0 auto; padding:0 16px}
.topbar{
  position:sticky; top:0; z-index:10;
  background: rgba(10, 14, 24, .65);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
}
[data-theme="light"] .topbar{background: rgba(246,247,251,.8)}
.topbar .wrap{display:flex; gap:10px; align-items:center; padding:12px 16px}
.brand{color:var(--text); text-decoration:none; font-weight:800}
.spacer{flex:1}
.search{
  width:min(520px, 55vw); padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background: rgba(255,255,255,.04);
  color:var(--text); font-weight:650;
}
[data-theme="light"] .search{background: rgba(17,24,39,.03)}
.btn{
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background: transparent;
  color:var(--text); font-weight:800; cursor:pointer;
}
.layout{display:grid; grid-template-columns: 360px 1fr; gap:16px; padding:16px 16px 28px}
@media (max-width: 980px){ .layout{grid-template-columns:1fr} }

.sidebar, .content{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
[data-theme="light"] .sidebar, [data-theme="light"] .content{background: rgba(255,255,255,.92)}
.sidebar{padding:14px}
.sidebar h1{margin:4px 0 6px; font-size:22px}
.muted{color:var(--muted); line-height:1.5}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 6px}
.tag{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  padding:7px 10px; border-radius:999px;
  cursor:pointer; user-select:none; font-weight:800; font-size:12px;
}
[data-theme="light"] .tag{background: rgba(17,24,39,.02)}
.tag[aria-pressed="true"]{
  color:var(--text);
  border-color: rgba(110,168,254,.55);
  box-shadow: 0 0 0 3px rgba(110,168,254,.15);
}

.list-head{display:flex; justify-content:space-between; margin:10px 0 6px}
.list{display:flex; flex-direction:column; gap:8px; max-height: 70vh; overflow:auto; padding-right:6px}
.item{
  display:block; padding:10px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  background: rgba(255,255,255,.03);
}
[data-theme="light"] .item{background: rgba(17,24,39,.02)}
.item:hover{transform: translateY(-1px)}
.item .t{font-weight:900}
.item .s{color:var(--muted); font-size:13px; margin-top:4px}
.item.active{border-color: rgba(110,168,254,.6); box-shadow: 0 0 0 3px rgba(110,168,254,.12)}

.content{padding:16px}
.content-head{border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:12px}
.content-head h2{margin:0 0 8px; font-size:22px}
.meta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.doc{line-height:1.7}
.doc h2{margin-top:22px}
.doc h3{margin-top:18px}
.doc code{font-family:var(--mono)}
.doc pre{
  overflow:auto; padding:12px; border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.22);
}
[data-theme="light"] .doc pre{background: rgba(17,24,39,.04)}
.doc a{color:var(--accent); font-weight:800}