:root { color-scheme: light dark; --fg:#1a1a1a; --muted:#666; --bg:#f6f6f4; --card:#fff; --line:#e2e2df; --accent:#2b6; --err:#c33; }
@media (prefers-color-scheme: dark){ :root{ --fg:#eee; --muted:#9a9a9a; --bg:#191919; --card:#242424; --line:#3a3a3a; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, sans-serif; color:var(--fg); background:var(--bg); }
#app { max-width:720px; margin:6vh auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; }
h1 { font-size:1.15rem; margin:0 0 8px; }
.muted { color:var(--muted); }
.ok { color:var(--accent); font-weight:600; }
.error { color:var(--err); }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
form { display:grid; gap:12px; margin-top:12px; max-width:340px; }
label { display:grid; gap:4px; font-size:.85rem; color:var(--muted); }
input { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font-size:1rem; }
button { padding:9px 14px; border:1px solid var(--line); border-radius:8px; background:var(--fg); color:var(--bg); cursor:pointer; font-size:.95rem; }
button.link { background:none; color:var(--muted); border:none; padding:4px; text-decoration:underline; }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
@media (max-width:520px){ .tiles { grid-template-columns:1fr; } }
.tile { display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.tile .num { font-size:1.9rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.tile .tlabel { font-size:.82rem; color:var(--muted); }