:root{--bg:#f3f5f7;--surface:#fff;--fg:#14181d;--muted:#5b6672;--line:#d9dfe5;--accent:#f2b705;--accent-fg:#14181d;--ink:#14181d;--ink-fg:#fff;--ok:#17803d;--warn:#b45309;--bad:#b42318;--focus:#1d5fd1;--display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#0f1317;--surface:#181e24;--fg:#eef1f4;--muted:#9aa6b2;--line:#2b343d;--ink:#0a0d10;--ok:#4cc27a;--warn:#f0a050;--bad:#ff7b6e;--focus:#6aa2ff;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 var(--body)}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.top{background:var(--ink);color:var(--ink-fg);position:sticky;top:0;z-index:10;padding:12px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.bar,nav,main,footer{max-width:980px;margin:0 auto}
.bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.brand{font:700 26px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;text-decoration:none}
.brand b{color:var(--accent)}
.brand small{display:block;font:500 12px/1.2 var(--body);letter-spacing:.06em;color:#b8c2cc;margin-top:4px}
.call{font-weight:600;font-size:15px;text-decoration:none;border:1px solid #3a4651;border-radius:6px;padding:7px 12px}
nav{display:flex;gap:4px;margin-top:12px;overflow-x:auto}
nav a{color:#b8c2cc;text-decoration:none;font-weight:600;padding:10px 14px;border-bottom:3px solid transparent;white-space:nowrap}
nav a.on{color:var(--ink-fg);border-bottom-color:var(--accent)}
main{padding:28px max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left));min-height:60vh}
footer{padding:20px max(16px,env(safe-area-inset-left));color:var(--muted);font-size:13px}
h1{font:700 clamp(32px,6vw,48px)/1.05 var(--display);text-transform:uppercase;margin:0 0 10px;text-wrap:balance}
h2{font:700 24px/1.1 var(--display);text-transform:uppercase;margin:28px 0 12px}
h3{margin:0;font:700 22px/1.1 var(--display);text-transform:uppercase}
.muted{color:var(--muted)}.lead{color:var(--muted);max-width:60ch;margin:0 0 20px}
.btn{display:inline-block;font:600 15px var(--body);background:var(--accent);color:var(--accent-fg);border:0;border-radius:6px;padding:11px 16px;cursor:pointer;text-decoration:none;text-align:center}
.btn:disabled{opacity:.6;cursor:default}.btn.alt{background:none;color:var(--fg);border:1px solid var(--line)}.btn.sm{padding:6px 10px;font-size:13px}.btn.danger{background:none;color:var(--bad);border:1px solid var(--bad)}
.filters,.stats,.actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{font:600 13px var(--body);background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}
.search{max-width:320px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:start}
.card h3{overflow-wrap:anywhere}.meta{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.tag{display:inline-block;font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--muted);margin-right:6px}
.tag.new{border-color:var(--warn);color:var(--warn)}.tag.ok{border-color:var(--ok);color:var(--ok)}
form,.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;max-width:640px}
.panel.wide{max-width:none}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}
label{font-weight:600;font-size:14px}
input,select,textarea{font:16px var(--body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px 12px;width:100%;min-width:0}
textarea{min-height:90px;resize:vertical}input[type=checkbox]{width:auto}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--muted);margin-bottom:16px}.chk input{margin-top:4px}
.msg{border-radius:6px;padding:12px 14px;margin:14px 0;border:1px solid var(--line)}
.msg.ok{border-color:var(--ok);color:var(--ok)}.msg.bad{border-color:var(--bad);color:var(--bad)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 14px;min-width:110px}
.stat b{display:block;font:700 28px/1 var(--display)}.stat span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.desc{white-space:pre-wrap;max-width:65ch}
.empty{border:1px dashed var(--line);border-radius:6px;padding:24px;color:var(--muted);max-width:60ch}
.stack{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.narrow{max-width:640px}
select.status{width:auto;font-size:13px;padding:6px 8px}
@media (max-width:520px){.card{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}