:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#5b6474; --card:#fff; --line:#dde1e7; --control:#767f8f; --accent:#2457c5; --on-accent:#fff; --ok:#1d7a46; --warn:#a1540b; --err:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#12151b; --fg:#e7eaf0; --muted:#9aa3b2; --card:#1a1f28; --line:#2a313d; --control:#7a8494; --accent:#7ea2ff; --on-accent:#0b1220; --ok:#5fcf8a; --warn:#f0a35e; --err:#ff7b72; } }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; flex-wrap:wrap; gap:18px; align-items:center; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--card); }
header .brand { font-weight:700; letter-spacing:.3px; }
header nav a { color:var(--muted); text-decoration:none; margin-right:14px; }
header nav a.active, header nav a:hover { color:var(--fg); }
header nav a.active { text-decoration:underline; text-underline-offset:4px; }
header .spacer { flex:1; }
header form { margin:0; }
main { max-width:1100px; margin:0 auto; padding:20px; }
h1 { font-size:20px; margin:0 0 14px; } h2 { font-size:16px; margin:22px 0 8px; color:var(--muted); font-weight:600; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.card .n { font-size:24px; font-weight:700; } .card .l { color:var(--muted); font-size:12px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; font-size:13.5px; }
caption { text-align:left; color:var(--muted); font-size:12px; padding:6px 0; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
tr:last-child td { border-bottom:0; }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line); }
.ok { color:var(--ok); } .warn { color:var(--warn); } .err { color:var(--err); } .muted { color:var(--muted); }
button, .btn { font:inherit; padding:6px 12px; border-radius:6px; border:1px solid var(--control); background:var(--card); color:var(--fg); cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
button.danger { color:var(--err); }
input[type=text], input[type=password] { font:inherit; width:100%; padding:9px 10px; border:1px solid var(--control); border-radius:6px; background:var(--card); color:var(--fg); }
.login { max-width:380px; margin:60px auto; }
.login label { display:block; margin:12px 0 4px; color:var(--muted); font-size:13px; }
.flash { padding:10px 12px; border-radius:6px; margin-bottom:12px; border:1px solid var(--line); border-left-width:4px; }
.flash.error { border-color:var(--err); } .flash.ok { border-color:var(--ok); }
code { font-size:12.5px; background:var(--bg); padding:1px 5px; border-radius:4px; }
footer { color:var(--muted); font-size:12px; text-align:center; padding:24px; }

/* accessibility helpers */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-9999px; top:8px; background:var(--card); color:var(--fg); padding:8px 12px; border:2px solid var(--accent); border-radius:6px; z-index:10; }
.skip:focus { left:8px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
dl.stats { display:contents; }
.card dt { color:var(--muted); font-size:12px; order:2; }
.card dd { margin:0; font-size:24px; font-weight:700; order:1; }
.card { display:flex; flex-direction:column; }