:root { --bg:#fff; --fg:#1b1b1b; --muted:#555; --accent:#0b5cad; --err:#b00020; --line:#d0d0d0; }
@media (prefers-color-scheme: dark) { :root { --bg:#121212; --fg:#eee; --muted:#aaa; --accent:#6aa9ff; --err:#ff6b6b; --line:#444; } }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, sans-serif; }
main { max-width:40rem; margin:0 auto; padding:16px; }
h1 { font-size:1.4rem; margin:0 0 .5rem; } h2 { font-size:1.1rem; margin:1.5rem 0 .5rem; }
.note { color:var(--muted); font-size:.9rem; }
.error { color:var(--err); font-weight:600; }
.field { margin:.6rem 0; display:flex; flex-direction:column; gap:.2rem; }
input:not([type=radio]), select { padding:.5rem; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:6px; }
button { padding:.6rem 1.2rem; font:inherit; border:0; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; }
button:disabled { opacity:.5; }
button.link { background:none; color:var(--accent); padding:.2rem 0; text-decoration:underline; }
a { color:var(--accent); }
.plan { display:flex; gap:.5rem; align-items:center; padding:.5rem; border:1px solid var(--line); border-radius:6px; margin:.3rem 0; }
table { width:100%; border-collapse:collapse; } th, td { text-align:start; padding:.4rem; border-bottom:1px solid var(--line); }