:root { color-scheme: light dark; --bg:#f2f5f0; --card:#fff; --text:#182019; --muted:#667067; --accent:#176b49; --border:#d9dfda; --error:#b52f38; }
@media (prefers-color-scheme:dark) { :root { --bg:#111713; --card:#1b231d; --text:#f0f5f1; --muted:#a7b3aa; --accent:#76d3a5; --border:#39443c; --error:#ff8b91; } }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; display:grid; place-items:center; padding:1rem; background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 32rem),var(--bg); color:var(--text); font:16px/1.5 Inter,system-ui,sans-serif; }
main { width:min(100%,28rem); padding:clamp(1.25rem,5vw,2rem); background:var(--card); border:1px solid var(--border); border-radius:1.25rem; box-shadow:0 20px 55px rgba(0,0,0,.12); }
h1 { margin:.15rem 0 .4rem; font-size:clamp(1.7rem,7vw,2.4rem); letter-spacing:-.04em; }
p { color:var(--muted); } form { display:grid; gap:.85rem; margin-top:1.4rem; } label { display:grid; gap:.35rem; font-weight:650; }
input,button { width:100%; min-height:3rem; border-radius:.75rem; font:inherit; }
input { padding:0 .8rem; color:var(--text); background:var(--card); border:1px solid var(--border); }
input:focus { outline:3px solid color-mix(in srgb,var(--accent) 24%,transparent); border-color:var(--accent); }
button { border:0; color:var(--card); background:var(--accent); font-weight:750; cursor:pointer; }
.error { color:var(--error); font-weight:650; }.success { color:var(--accent); font-weight:650; }.links { display:flex; gap:1rem; margin-top:1.2rem; }.links a { color:var(--accent); }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }