/* css/app.css — design tokens, page layout, sidebar, typography, dark theme */

:root{--bg:#edf1f3;--surface:#fff;--ink:#12222b;--muted:#586973;--line:#d3dce1;--accent:#0b7a75;--accent-d:#095f5b;--accent-soft:#dff1ef;--rec:#d9402f;--ok:#1b7a4b;--ok-soft:#e1f3e8;--warn:#8f5400;--warn-soft:#fbefd6;--bad:#b73226;--bad-soft:#fbe4e1;--info-soft:#e6eef3;--surface2:#f6f9fa;--ok-text:#14573a;--info-text:#2b4a5a;--unk-bg:#eef2f4;--unk-text:#43545e;--band:#0f2a33;--r:10px;--ipa:"Charis SIL","Cambria","Noto Serif","DejaVu Serif",Georgia,serif;--ui:"Segoe UI",system-ui,-apple-system,"Noto Sans","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--ui)}
button,select,input{font:inherit;color:inherit}
a{color:var(--accent-d)}
:focus-visible{outline:3px solid #1e6fd9;outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--surface);padding:8px 12px;z-index:100}.skip:focus{left:8px;top:8px}
.shell{display:grid;grid-template-columns:204px minmax(0,1fr);min-height:100vh}
.side{background:var(--band);color:#d7e6ea;padding:16px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:14px}
.brand{display:flex;align-items:center;gap:8px;font-weight:650;color:#fff;font-size:15px;padding:2px 6px}
.brand i{width:26px;height:26px;border-radius:7px;background:var(--accent);display:grid;place-items:center;font:600 15px var(--ipa);font-style:normal;color:#fff}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;color:#c4d6db;text-decoration:none}
.side nav a:hover{background:#17404c}.side nav a[aria-current=page]{background:var(--accent);color:#fff}
.side svg,.bottom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side-foot{margin-top:auto;font-size:12px;color:#9db6bc}
.tag{display:inline-block;border:1px solid currentColor;border-radius:99px;padding:1px 8px;font-size:12px}
.top{display:none}
main{padding:20px 22px 40px;max-width:1240px;width:100%;outline:none}
h1,h2,h3{line-height:1.2;margin:0}
h2{font-size:17px;margin-bottom:10px}h3{font-size:15px;margin-bottom:6px}
.pg-title{font-size:22px;margin-bottom:4px}.sub{color:var(--muted);margin:0 0 16px}
.muted{color:var(--muted)}.small{font-size:13px}

/* dark theme: explicit choice or system preference */
:root[data-theme=dark]{--bg:#0d1a20;--surface:#14262e;--surface2:#10202a;--ink:#e5eef1;--muted:#9fb4bc;--line:#28414b;--accent:#14877f;--accent-d:#5fd3c8;--accent-soft:#12383a;--ok:#4cc58a;--ok-soft:#10301f;--ok-text:#8fe3b8;--warn:#e0a84a;--warn-soft:#352a0e;--bad:#f07a6d;--bad-soft:#3b1b17;--info-soft:#1a2e39;--info-text:#a9c6d6;--unk-bg:#1c2f38;--unk-text:#b5c9d1;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0d1a20;--surface:#14262e;--surface2:#10202a;--ink:#e5eef1;--muted:#9fb4bc;--line:#28414b;--accent:#14877f;--accent-d:#5fd3c8;--accent-soft:#12383a;--ok:#4cc58a;--ok-soft:#10301f;--ok-text:#8fe3b8;--warn:#e0a84a;--warn-soft:#352a0e;--bad:#f07a6d;--bad-soft:#3b1b17;--info-soft:#1a2e39;--info-text:#a9c6d6;--unk-bg:#1c2f38;--unk-text:#b5c9d1;color-scheme:dark}}


/* Professional UI refresh — visual-only overrides, existing routes and logic preserved. */
:root{--bg:#f3f6fb;--surface:#fff;--surface2:#f8faff;--ink:#15243a;--muted:#65758b;--line:#e3eaf2;--accent:#2563eb;--accent-d:#1d4ed8;--accent-soft:#eaf1ff;--band:#101e36;--r:16px;--ui:Inter,"Segoe UI",system-ui,-apple-system,sans-serif}
body{font-size:14px;line-height:1.55;letter-spacing:.005em}
.shell{grid-template-columns:244px minmax(0,1fr)}
.side{padding:26px 16px 20px;gap:26px;background:linear-gradient(180deg,#142744 0%,#0d1a30 100%);border-right:1px solid #223a59}
.brand{font-size:16px;letter-spacing:-.025em;gap:11px;padding:3px 8px}
.brand i{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#4389ff,#2460df);box-shadow:0 5px 18px #1b5de655;font-size:20px}
.side nav{gap:5px}
.side nav a{padding:11px 13px;border-radius:11px;font-size:13px;font-weight:550;color:#b7c9df;transition:background .18s,color .18s}
.side nav a:hover{background:#ffffff13;color:#fff}
.side nav a[aria-current=page]{background:#ffffff1b;color:#fff;box-shadow:inset 3px 0 #69a4ff}
.side-foot{border-top:1px solid #ffffff1c;padding:17px 9px 0;color:#a8bed8}
main{max-width:1440px;padding:32px clamp(20px,3vw,48px) 64px;margin:0 auto}
.pg-title{font-size:clamp(25px,2.2vw,32px);font-weight:750;letter-spacing:-.045em;margin-bottom:6px}
h2{font-size:17px;letter-spacing:-.025em;margin-bottom:15px}
h3{letter-spacing:-.015em}
.sub{margin-bottom:24px}
.tag{border-color:#ffffff3d;padding:3px 10px}
:root[data-theme=dark]{--bg:#0c1423;--surface:#172338;--surface2:#1c2a42;--ink:#eef3fc;--muted:#a4b5cd;--line:#2d3e56;--accent:#5790ff;--accent-d:#8cb4ff;--accent-soft:#223d65;--band:#101e36}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0c1423;--surface:#172338;--surface2:#1c2a42;--ink:#eef3fc;--muted:#a4b5cd;--line:#2d3e56;--accent:#5790ff;--accent-d:#8cb4ff;--accent-soft:#223d65;--band:#101e36}}