:root{--ink:#14213d;--paper:#f7f9fc;--line:#c9d3e3;--accent:#0b6e4f;--err:#b3261e}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--paper);color:var(--ink);font:16px/1.5 "Segoe UI",system-ui,sans-serif}
main{width:min(92vw,380px)}
h1{font-size:1.9rem;margin:0 0 .25rem;letter-spacing:-.02em}
p.sub{margin:0 0 1.5rem;color:#51607a}
label{display:block;font-weight:600;margin:1rem 0 .3rem}
input{width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:6px;font:inherit;background:#fff}
input:focus,button:focus-visible,a:focus-visible{outline:3px solid #7fb8ff;outline-offset:1px}
button{width:100%;margin-top:1.5rem;padding:.8rem;border:0;border-radius:6px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}
button:hover{background:#085a41}
.err{background:#fdecea;color:var(--err);padding:.6rem .8rem;border-radius:6px;margin-bottom:1rem}
.ok{background:#e6f4ee;color:var(--accent);padding:.6rem .8rem;border-radius:6px;margin-bottom:1rem}
.alt{margin-top:1.25rem;text-align:center}
a{color:var(--accent)}