:root { color-scheme: dark; font-family: Inter, "Segoe UI", Arial, sans-serif; background: #111318; color: #f4f5f7; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { min-height: 100svh; max-width: 1440px; margin: 0 auto; padding: 2rem 5vw; display: flex; flex-direction: column; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { color: inherit; text-decoration: none; font-size: 1.75rem; font-weight: 800; letter-spacing: -.07rem; }
.wordmark span { color: #c2d0dd; font-weight: 400; }
.label, footer { color: #b5bbc5; font-size: .875rem; }
main { flex: 1; display: grid; place-items: center; padding: 4rem 0; }
.card { width: min(100%, 440px); }
.eyebrow { margin: 0 0 1rem; color: #d9fc68; font-size: .875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0 0 2rem; font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 650; line-height: 1.12; letter-spacing: -.04em; overflow-wrap: break-word; }
h1 span { color: #d9fc68; }
.intro { margin: -1rem 0 2rem; color: #b5bbc5; font-size: 1rem; line-height: 1.65; }
strong { color: #f4f5f7; }
form { display: flex; flex-direction: column; }
label { margin: 0 0 .625rem; font-size: .9375rem; font-weight: 500; }
input { width: 100%; min-height: 52px; margin: 0 0 1.5rem; padding: .875rem 1rem; border: 1px solid #4b5360; border-radius: 8px; background: #1c2028; color: #f4f5f7; font: inherit; font-size: 1rem; }
input:focus { outline: 2px solid #d9fc68; outline-offset: 2px; }
button { min-height: 52px; margin-top: .5rem; padding: .875rem 1rem; border: 0; border-radius: 8px; background: #d9fc68; color: #111318; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
button:hover { background: #e6ff9b; }
button:focus-visible, a:focus-visible { outline: 2px solid #d9fc68; outline-offset: 5px; }
.secondary { align-self: flex-start; background: #222833; color: #f4f5f7; border: 1px solid #4b5360; padding-inline: 1.5rem; }
.secondary:hover { background: #333c4b; }
.error { margin: 0 0 1.5rem; padding: 1rem; border: 1px solid #b76464; border-radius: 8px; background: #311e24; color: #ffd6d6; line-height: 1.5; }
.hint { margin: -.875rem 0 1.5rem; color: #b5bbc5; font-size: .875rem; line-height: 1.5; }
.text-link { color: #d9fc68; text-underline-offset: 4px; }
footer { border-top: 1px solid #333842; padding-top: 1.5rem; }
@media (max-width: 480px) { .page { padding: 1.5rem; } .wordmark { font-size: 1.5rem; } main { padding: 3rem 0; } }