:root { --ink:#202428; --muted:#697178; --line:#dfe2e4; --surface:#fff; --canvas:#f6f6f5; --action:#30363b; --focus:#4d7c8a; --error:#a33641; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; color:var(--ink); background:var(--canvas); font:15px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shell { display:grid; min-height:100vh; padding:32px 18px; place-items:center; }
.card { width:min(440px,100%); padding:38px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 18px 55px rgba(24,30,34,.07); }
header { margin-bottom:26px; }
h1 { margin:0 0 7px; font-size:29px; line-height:1.15; letter-spacing:-.025em; }
p { margin:0; color:var(--muted); }
.step { margin-bottom:9px; color:#596168; text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:800; }
form { display:grid; gap:18px; }
label { display:grid; gap:7px; color:#363c41; font-size:13px; font-weight:700; }
input { width:100%; min-height:44px; padding:10px 11px; border:1px solid #cbd0d3; border-radius:7px; outline:none; color:var(--ink); background:#fff; font:inherit; }
input:focus { border-color:var(--focus); box-shadow:0 0 0 3px rgba(77,124,138,.13); }
.agreement { grid-template-columns:18px 1fr; align-items:start; gap:10px; font-weight:500; line-height:1.4; }
.agreement input { width:18px; min-height:18px; margin:1px 0 0; accent-color:var(--action); }
.agreement a { color:var(--ink); font-weight:650; }
small, .footnote { color:var(--muted); font-size:11px; font-weight:500; }
.footnote a { color:var(--ink); font-weight:650; }
button { min-height:45px; padding:10px 16px; border:0; border-radius:7px; color:#fff; background:var(--action); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; }
button:hover { background:#15191c; }
.footnote { margin-top:20px; text-align:center; }
.alert { margin-bottom:20px; padding:11px 13px; border:1px solid #e5bcc1; border-radius:7px; color:var(--error); background:#fbedef; font-size:13px; font-weight:650; }
.result { text-align:center; }
.result h1 { margin-top:16px; }
.result p { margin:0 auto 23px; max-width:340px; }
.result form { margin-top:25px; }
.result-icon { display:grid; width:46px; height:46px; margin:auto; place-items:center; border-radius:50%; color:#326e5d; background:#e5f2ed; font-size:20px; font-weight:800; }
.result-icon.error { color:var(--error); background:#fbedef; }
@media (max-width:520px) { .shell { padding:0; } .card { min-height:100vh; padding:34px 23px; border:0; border-radius:0; box-shadow:none; } .result { display:flex; flex-direction:column; justify-content:center; } }