:root { --ink:#16191d; --soft:#6b7280; --line:#e5e7eb; --page:#f6f7f9; --card:#fff;
        --good:#15803d; --bad:#b91c1c; --accent:#1d4ed8; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#e7e9ee; --soft:#9aa3b2; --line:#2a2f37; --page:#14171c; --card:#1b1f26;
          --good:#4ade80; --bad:#f87171; --accent:#93b4ff; }
}
* { box-sizing: border-box; }
body { margin:0; padding:24px 16px; background:var(--page); color:var(--ink);
       font:15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
h1 { font-size:20px; margin:0 0 12px; }
.card { max-width:420px; margin:8vh auto; background:var(--card); border:1px solid var(--line);
        border-radius:12px; padding:24px; }
.card.wide { max-width:860px; margin:24px auto; }
label { display:block; margin:12px 0; font-size:13px; color:var(--soft); }
input { display:block; width:100%; margin-top:4px; padding:9px 10px; font-size:15px;
        border:1px solid var(--line); border-radius:8px; background:var(--page); color:var(--ink); }
button { margin-top:8px; padding:9px 16px; font-size:15px; border:0; border-radius:8px;
         background:var(--accent); color:#fff; cursor:pointer; }
button.plain { background:none; color:var(--accent); padding:0; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
     color:var(--soft); font-weight:600; padding:0 8px 8px; }
td { padding:10px 8px; border-top:1px solid var(--line); vertical-align:top; }
td.actions { text-align:right; white-space:nowrap; }
form.open { display:inline-flex; align-items:center; gap:8px; }
form.open select { margin-top:8px; padding:8px 10px; font-size:14px; border:1px solid var(--line);
                   border-radius:8px; background:var(--page); color:var(--ink); }
.bar { display:flex; align-items:center; gap:12px; max-width:860px; margin:0 auto; }
.bar .spacer { flex:1; }
.why { color:var(--soft); font-size:13px; }
.bad { color:var(--bad); }
.empty { color:var(--soft); text-align:center; padding:24px 0; }
.up { color:var(--good); }
.down { color:var(--soft); }
form { margin:0; }
a { color:var(--accent); }