/* Minimal, framework-free CSS. Default = dark mode. */
:root{
  --bg:#0f1115; --fg:#e5e7eb; --muted:#a3aab6; --card:#151821; --border:#22252c; --accent:#60a5fa;
}
html[data-theme="light"]{
  --bg:#ffffff; --fg:#111827; --muted:#6b7280; --card:#f8fafc; --border:#e5e7eb; --accent:#2563eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.top{position:sticky;top:0;background:rgba(0,0,0,.2);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--border);z-index:10}
.top .brand a{display:inline-block;padding:12px 0;font-weight:600;color:var(--fg);text-decoration:none}
.nav{display:flex;gap:12px;align-items:center}
.nav a{padding:10px 6px;color:var(--fg)}
.nav a.active{border-bottom:2px solid var(--accent)}
.toggle{border:1px solid var(--border);background:transparent;color:var(--fg);padding:6px 10px;border-radius:8px;cursor:pointer}
.layout{display:grid;grid-template-columns:260px 1fr;gap:16px;padding:16px}
.sidebar .card,.content .card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.card-h{padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.08em}
.card-b{padding:14px}
.list{display:flex;flex-direction:column}
.item{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--fg)}
.item:hover{background:rgba(255,255,255,.04)}
.item.active{background:rgba(96,165,250,.14);border-left:3px solid var(--accent);padding-left:9px}
.h{margin:0 0 8px 0; font-size:28px; font-weight:800}
.h2{margin:0 0 8px 0; font-size:16px; font-weight:700}
.alert{padding:12px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.03)}
.muted{color:var(--muted)}
.foot{border-top:1px solid var(--border);margin-top:24px;padding:16px 0}
/* Ensure included content looks good on dark */
.content a{color:var(--accent)}
.content hr{border-color:var(--border)}
.content table{border-collapse:collapse}
.content table, .content th, .content td{border:1px solid var(--border)}
.content th, .content td{padding:6px 8px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:12px}
.tile{display:block; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--card); text-decoration:none; color:var(--fg)}
.tile:hover{outline:1px solid var(--accent)}
.t{font-weight:600; font-size:14px}
@media (max-width:900px){ .layout{grid-template-columns:1fr} }

/* Clean grouped sidebar */
.p0{ padding:0 }
.side-block{ padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06) }
.side-block:last-child{ border-bottom:none }
.side-label{
  padding:8px 14px;
  color:var(--muted);
  font-size:12.5px;
  letter-spacing:.02em;
}

.side-list{ display:flex; flex-direction:column; gap:2px; padding:4px 6px 8px 8px }
.side-link{
  display:block;
  padding:8px 12px 8px 18px;
  border-radius:8px;
  color:var(--fg);
  text-decoration:none;
}
.side-link:hover{ background:rgba(255,255,255,.04); text-decoration:none }
.side-link.active{ background:rgba(96,165,250,.14); outline:1px solid rgba(96,165,250,.25) }

/* Mobile-friendly sidebar (if you added a Menu button) */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .sidebar.open{display:block;margin-bottom:12px}
}
/* Make the active item pop slightly more */
.side-link.active{
  background: rgba(96,165,250,.18);
  outline: 1px solid rgba(96,165,250,.35);
}

/* Improve table readability on dark */
.content table { border-collapse: separate; border-spacing: 0; }
.content th, .content td { background: rgba(255,255,255,.02); }
.content tr:nth-child(even) td { background: rgba(255,255,255,.04); }

/* Prevent images from overflowing */
.content img { max-width: 100%; height: auto; }