:root{--bg:#EEF2F0;--surface:#FFFFFF;--ink:#14201C;--muted:#5C6B65;--line:#D6DEDA;--accent:#1D6B57;--accent-ink:#FFFFFF;--pos:#1E7A4B;--neg:#B42C23}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#0F1614;--surface:#18211E;--ink:#E4ECE8;--muted:#8FA09A;--line:#2A3632;--accent:#4FB395;--accent-ink:#06120E;--pos:#5CC78E;--neg:#F0776D}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 "IBM Plex Sans",system-ui,sans-serif;min-height:100vh;display:grid;place-items:center;padding:16px}
.card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px}
h1{font-size:20px;margin:0}
p{margin:0}
.hint{color:var(--muted);font-size:13px}
.error{color:var(--neg);font-size:13px;min-height:1.45em}
.ok{color:var(--pos);font-size:13px;min-height:1.45em}
form{display:flex;flex-direction:column;gap:10px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
input{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:44px}
button{font:inherit;font-weight:600;color:var(--accent-ink);background:var(--accent);border:0;border-radius:8px;padding:10px 14px;min-height:44px;cursor:pointer}
button:disabled{opacity:.6;cursor:default}
a{color:var(--accent)}
ul{margin:0;padding-left:18px;font-size:13px;color:var(--muted)}