:root {
  --ground:#eef2f7; --surface:#fff; --ink:#12233d; --soft:#4d5d75;
  --line:#d5dee9; --brand:#1c4585; --bad:#ab2a20; --bad-wash:#fbeceb; --ok:#1a7343;
}
@media (prefers-color-scheme: dark) {
  :root { --ground:#0d1621; --surface:#15202e; --ink:#e4ebf5; --soft:#9fb0c6;
          --line:#26364a; --brand:#82abe9; --bad:#f2887f; --bad-wash:#2a1614; --ok:#63c78e; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink);
       font:400 15px/1.5 "Segoe UI", system-ui, sans-serif; }
.wrap { max-width:1180px; margin:0 auto; padding:0 16px; }
header { background:var(--brand); color:#fff; }
header .wrap { display:flex; align-items:center; gap:24px; height:52px; }
.brand { font-weight:700; font-size:17px; }
header nav a { color:#cfe0f7; text-decoration:none; padding:4px 10px; border-radius:6px; }
header nav a.on { background:rgba(255,255,255,.18); color:#fff; }
h1 { font-size:24px; margin:22px 0 14px; }
h2 { font-size:18px; margin:26px 0 8px; }
.tiles { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:10px;
        padding:12px 18px; min-width:150px; }
.tile .num { display:block; font-size:26px; font-weight:700; }
.tile .num.bad { color:var(--bad); }
.tile .num.ok { color:var(--ok); }
.tile .cap { color:var(--soft); font-size:13px; }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
           background:var(--surface); border:1px solid var(--line);
           border-radius:10px; padding:12px; margin-bottom:14px; }
.filters label { display:flex; flex-direction:column; font-size:12px; color:var(--soft); gap:4px; }
.filters label.check { flex-direction:row; align-items:center; gap:6px; font-size:14px; color:var(--ink); }
.filters input, .filters select, .filters button {
  font:inherit; padding:6px 8px; border:1px solid var(--line);
  border-radius:7px; background:var(--surface); color:var(--ink); }
.filters button { background:var(--brand); color:#fff; border-color:var(--brand);
                  cursor:pointer; padding:7px 18px; }
table.feed { width:100%; border-collapse:collapse; background:var(--surface);
             border:1px solid var(--line); border-radius:10px; overflow:hidden; }
table.narrow { max-width:420px; }
.feed th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
           color:var(--soft); padding:9px 12px; border-bottom:1px solid var(--line); }
.feed td { padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.feed tr:last-child td { border-bottom:none; }
.bad-row td { background:var(--bad-wash); }
.t { font-variant-numeric:tabular-nums; color:var(--soft); white-space:nowrap; }
.sec { background:var(--ground); border-radius:999px; padding:2px 10px; font-size:13px; white-space:nowrap; }
.out { color:var(--soft); }
.dev { color:var(--soft); font-size:13px; white-space:nowrap; }
.empty { text-align:center; color:var(--soft); padding:26px; }
.bad { color:var(--bad); }
.more { color:var(--soft); font-size:14px; }
.login { max-width:320px; margin:16vh auto; background:var(--surface);
         border:1px solid var(--line); border-radius:12px; padding:24px; }
.login h1 { margin:0 0 16px; font-size:20px; }
.login input, .login button { width:100%; font:inherit; padding:9px 12px; margin-bottom:10px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); }
.login button { background:var(--brand); color:#fff; border-color:var(--brand); cursor:pointer; }
@media (max-width: 720px) {
  .feed .out, .feed .dev { display:none; }
}