:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172033; background: #f1f5f9; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top right, #dbeafe, transparent 40%), #f1f5f9; }
main { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(540px, 100%); padding: 34px; border: 1px solid #dbe3ef; border-radius: 16px; background: #fff; box-shadow: 0 24px 64px rgba(15, 23, 42, .13); }
header { margin-bottom: 28px; }
.eyebrow { margin: 0 0 8px; color: #2563eb; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; color: #111827; font-size: clamp(26px, 5vw, 34px); letter-spacing: -.04em; }
.intro { margin: 11px 0 0; color: #5d687a; line-height: 1.5; }
form { display: grid; gap: 18px; }
label { display: grid; gap: 7px; color: #334155; font-size: 14px; font-weight: 700; }
input { width: 100%; min-height: 48px; border: 1px solid #bfcadb; border-radius: 9px; padding: 0 13px; color: #172033; background: #fff; font: inherit; font-weight: 500; outline: none; }
input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
small { color: #657287; font-size: 12px; font-weight: 500; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
button { min-height: 50px; border: 0; border-radius: 9px; color: white; background: #2563eb; font: inherit; font-weight: 800; cursor: pointer; }
button:hover { background: #1d4ed8; }
button:disabled { cursor: progress; opacity: .7; }
#message { min-height: 21px; margin: 0; font-size: 14px; font-weight: 600; }
#message.success { color: #15803d; }
#message.error { color: #b91c1c; }
@media (max-width: 460px) { .card { padding: 25px 20px; } .two-columns { grid-template-columns: 1fr; } }