/* shared styles */
:root{
  --bg:#f6f7fb; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
  --brand:#2563eb; --border:#e5e7eb; --codebg:#0b1020;
  --radius:14px; --shadow:0 10px 30px rgba(17,24,39,.08);
  --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;
}
*{box-sizing:border-box}
body{margin:0; font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.65}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px; margin:0 auto; padding:24px}
.header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(8px); background:rgba(246,247,251,.85); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; max-width:1180px; margin:0 auto}
.brand{display:flex; flex-direction:column}
.brand strong{font-size:16px}
.brand span{color:var(--muted); font-size:12px}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{font-size:12px; padding:6px 10px; border:1px solid var(--border); background:var(--card); border-radius:999px}
.layout{display:grid; grid-template-columns: 320px 1fr; gap:18px; align-items:start}
.sidebar{position:sticky; top:86px; align-self:start; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.sidebar .side-top{padding:16px; border-bottom:1px solid var(--border)}
.sidebar .side-top h2{margin:0 0 6px 0; font-size:14px}
.sidebar .side-top p{margin:0; color:var(--muted); font-size:13px}
.nav{max-height:70vh; overflow:auto; padding:10px}
.nav a{display:block; padding:10px 12px; border-radius:10px; color:var(--text)}
.nav a small{display:block; color:var(--muted)}
.nav a.active{background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.18)}
.nav a:hover{background:rgba(17,24,39,.04); text-decoration:none}
.main{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
h1{margin:0 0 8px 0; font-size:28px; letter-spacing:-.02em}
.lead{color:var(--muted); margin-top:0}
.card{border:1px solid var(--border); border-radius:14px; padding:16px; background:#fff; margin:16px 0}
.card h2{margin:0 0 8px 0; font-size:18px}
.card h3{margin:14px 0 8px 0; font-size:15px}
.note{border-left:4px solid var(--brand); background:rgba(37,99,235,.07); padding:12px 14px; border-radius:12px; margin:12px 0}
.warn{border-left:4px solid #f59e0b; background:rgba(245,158,11,.10); padding:12px 14px; border-radius:12px; margin:12px 0}
.ok{border-left:4px solid #10b981; background:rgba(16,185,129,.10); padding:12px 14px; border-radius:12px; margin:12px 0}
/* Code blocks: keep a nice container even with Prism */
pre{padding:14px; border-radius:14px; overflow:auto; border:1px solid rgba(17,24,39,.10); background:#0b1020}
code{font-family:var(--mono)}
.inline{background:#eef2ff; border:1px solid #e0e7ff; padding:2px 6px; border-radius:8px; font-family:var(--mono); font-size:.95em}
.table{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:14px; overflow:hidden}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top}
.table th{background:#fafafa; font-size:13px}
.table tr:last-child td{border-bottom:none}
.footer{color:var(--muted); font-size:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border)}
.pager{display:flex; justify-content:space-between; gap:10px; margin-top:18px}
.pager a{display:inline-flex; gap:8px; align-items:center; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff}
.pager a:hover{text-decoration:none; background:#fafafa}
@media (max-width:980px){.layout{grid-template-columns:1fr}.sidebar{position:relative; top:auto}.nav{max-height:none}}