:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#667085; --card:#fff; --line:#e4e7ec; --accent:#1d4ed8; --good:#047857; }
@media (prefers-color-scheme: dark) { :root { --bg:#0e1116; --fg:#e6e8eb; --muted:#9aa4b2; --card:#171b22; --line:#2a303a; --accent:#6ea0ff; --good:#34d399; } }
* { box-sizing:border-box; }
body { margin:0 auto; max-width:640px; font:15px/1.45 system-ui,sans-serif; background:var(--bg); color:var(--fg); }
body.popup { width:400px; min-height:520px; }
header { padding:12px 16px 0; position:sticky; top:0; background:var(--bg); z-index:1; }
h1 { font-size:18px; margin:0 0 6px; } h3 { margin:16px 0 8px; font-size:14px; }
nav { display:flex; border-bottom:1px solid var(--line); }
nav button { flex:1; background:none; border:0; padding:10px 6px; cursor:pointer; color:var(--muted); font:inherit; border-bottom:2px solid transparent; }
nav button.on { color:var(--accent); border-color:var(--accent); font-weight:600; }
main { padding:12px 16px 32px; }
input, textarea, .btn { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); }
input[type=text], input:not([type]), textarea { width:100%; margin-bottom:8px; }
input[type=checkbox] { width:auto; }
.btn { cursor:pointer; } .btn:hover { border-color:var(--accent); }
.link { background:none; border:0; color:var(--accent); cursor:pointer; font:inherit; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; }
.card.top { border-color:var(--good); box-shadow:0 0 0 1px var(--good) inset; }
.row { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.pct { font-weight:700; color:var(--good); font-size:17px; }
.muted { color:var(--muted); font-size:13px; } .small { font-size:12px; margin-top:8px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.chip { border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:999px; padding:5px 11px; cursor:pointer; font:inherit; font-size:13px; }
.chip.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.flag { display:inline-block; margin-top:4px; padding:1px 8px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:12px; }
.banner { padding:8px 12px; border-radius:8px; background:var(--card); border:1px solid var(--line); margin-bottom:8px; }
.pick { margin-right:8px; white-space:nowrap; }