:root { --bg:#f6f7f9; --fg:#14181f; --muted:#5b6472; --card:#fff; --accent:#2457d6; --ok:#13804a; --warn:#b45309; --border:#dde1e8; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#10131a; --fg:#eef1f6; --muted:#9aa4b5; --card:#1a1f2a; --accent:#6d93ff; --ok:#4ade80; --warn:#fbbf24; --border:#2c3342; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,-apple-system,sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 24px 16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:24px; margin-bottom:16px; }
.muted { color:var(--muted); }
.big { font-size: 96px; font-weight:800; line-height:1; margin:8px 0; }
.center { text-align:center; }
.banner { border-radius:16px; padding:20px; font-size:22px; font-weight:700; margin-bottom:16px; }
.banner.near { background:var(--warn); color:#111; }
.banner.go { background:var(--ok); color:#06210f; }
button { font:inherit; font-weight:600; padding:10px 16px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--fg); cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:transparent; font-size:28px; padding:24px 32px; width:100%; }
button:disabled { opacity:.5; cursor:default; }
input[type=text], input[type=number] { font:inherit; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--fg); width:100%; }
table { width:100%; border-collapse:collapse; }
td, th { text-align:left; padding:8px 4px; border-bottom:1px solid var(--border); }
label { display:block; margin:12px 0 4px; font-weight:600; }