:root { --bg:#f6f7f9; --card:#fff; --text:#1c2024; --muted:#667085; --line:#e4e7ec; --accent:#2457d6; --bad:#c0342b; --ok:#1c7c4a; --warn:#a15c00; }
@media (prefers-color-scheme: dark) { :root { --bg:#14161a; --card:#1d2026; --text:#e8eaee; --muted:#9aa3b2; --line:#2c313a; --accent:#6b93f5; --bad:#f0746b; --ok:#54c98a; --warn:#e0a24a; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
header { display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
header .who { margin-left:auto; color:var(--muted); }
nav { display:flex; gap:4px; flex-wrap:wrap; padding:8px 16px 0; }
nav button { border:0; background:none; color:var(--muted); padding:8px 12px; border-radius:6px 6px 0 0; cursor:pointer; font:inherit; }
nav button.on { background:var(--card); color:var(--text); border:1px solid var(--line); border-bottom-color:var(--card); }
main { padding:16px; max-width:1200px; margin:0 auto; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px; margin-bottom:14px; }
h2 { margin:0 0 10px; font-size:16px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
input, select, button { font:inherit; color:inherit; }
input, select { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:6px 8px; max-width:100%; }
button.btn { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:6px 12px; cursor:pointer; }
button.btn.ghost { background:none; color:var(--accent); border:1px solid var(--line); }
button.btn.bad { background:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:6px 0; }
.err { color:var(--bad); } .ok { color:var(--ok); } .muted { color:var(--muted); } .warn { color:var(--warn); }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; background:var(--bg); border:1px solid var(--line); font-size:12px; }
.login { max-width:340px; margin:12vh auto; }
.login input { width:100%; margin:4px 0 10px; }
code { background:var(--bg); padding:1px 5px; border-radius:4px; word-break:break-all; }
@media (max-width:640px) { th:nth-child(n+5), td:nth-child(n+5) { display:none; } }