:root { color-scheme: dark; --bg:#131a17; --panel:#1b2420; --text:#e9eeeb; --dim:#a6b2ac; --line:#34413b; --accent:#a9c7b6; --on-accent:#122019; --bad:#f09a86; }
:root[data-theme="light"] { color-scheme: light; --bg:#f5f5f2; --panel:#fff; --text:#1d2b26; --dim:#5d6a64; --line:#d8dcd8; --accent:#1f4a3c; --on-accent:#fff; --bad:#a8321f; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:16px; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:28px; }
h1 { margin:0; font-size:24px; }
main > p { margin:4px 0 20px; color:var(--dim); }
label { display:block; margin:14px 0 6px; font-weight:600; font-size:14px; }
input { width:100%; min-height:44px; padding:8px 12px; font:inherit; color:inherit; background:transparent; border:1px solid var(--line); border-radius:6px; }
button { width:100%; min-height:44px; margin-top:20px; font:inherit; font-weight:600; color:var(--on-accent); background:var(--accent); border:0; border-radius:6px; cursor:pointer; }
button:disabled { opacity:.6; }
#error { margin:14px 0 0; color:var(--bad); }