:root { --bg:#f2f3f5; --fg:#1b1f24; --card:#fff; --muted:#6b7280; --accent:#2a7de1; --line:#d9dce1; --err:#d33; }
:root[data-theme="dark"] { --bg:#14171b; --fg:#e8eaed; --card:#1e2227; --muted:#9aa1ab; --line:#313740; --err:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
       padding:12px max(16px, env(safe-area-inset-left)) 24px; }
main { max-width:480px; margin:0 auto; }
.card { background:var(--card); border-radius:14px; padding:18px; margin-bottom:12px; }
h1 { margin:0 0 8px; font-size:1.4rem; } h2 { margin:0 0 4px; font-size:1.15rem; }
h3 { margin:18px 0 6px; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
p { margin:.4rem 0; } .muted { color:var(--muted); } .err { color:var(--err); }
input { width:100%; padding:12px; font-size:1rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--fg); margin:6px 0; }
button { width:100%; padding:13px; font-size:1rem; border:0; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; margin-top:6px; }
button:disabled { opacity:.6; } button.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.seg { display:flex; gap:6px; } .seg button { margin:0; padding:10px 6px; background:var(--bg); color:var(--fg); border:1px solid var(--line); font-size:.9rem; }
.seg button.on { background:var(--accent); color:#fff; border-color:var(--accent); }