:root { color-scheme: dark; --bg:#07111f; --panel:#0d1b2f; --line:#24405e; --text:#e6f0fb; --muted:#91a8bf; --accent:#4cc9f0; --danger:#ff8c8c; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(rgba(7,17,31,.82),rgba(7,17,31,.9)),url('/assets/socunitedstates.png') center/cover fixed; color:var(--text); font:16px/1.5 system-ui,sans-serif; }
main { width:min(100%,460px); background:rgba(13,27,47,.96); border:1px solid var(--line); border-radius:14px; padding:32px; box-shadow:0 24px 70px #0008; }
.brand { display:block; margin-bottom:28px; text-align:center; }
.brand img { display:block; width:240px; height:auto; max-width:100%; margin:0 auto; object-fit:contain; }
.brand-description { max-width:360px; margin:14px auto 0; color:var(--muted); font-size:.9rem; line-height:1.45; }
h1 { margin:0 0 8px; font-size:1.65rem; }
.intro { margin:0 0 24px; color:var(--muted); }
label { display:block; margin:16px 0 6px; color:var(--muted); font-size:.9rem; }
input { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:8px; background:#081426; color:var(--text); font:inherit; }
input:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { width:100%; margin-top:22px; padding:12px; border:0; border-radius:8px; background:var(--accent); color:#03111b; font:700 1rem inherit; cursor:pointer; }
.error { padding:11px 12px; border:1px solid #7f3f4b; border-radius:8px; background:#431d2b; color:var(--danger); }
.links { margin-top:20px; text-align:center; color:var(--muted); font-size:.9rem; }
a { color:var(--accent); }
.captcha { display:flex; justify-content:center; margin-top:18px; min-height:78px; }
.notice { margin-top:10px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:#0a2238; color:var(--accent); }
.otp-input { font-size:1.5rem; letter-spacing:.5em; text-align:center; font-variant-numeric:tabular-nums; }
.resend-form button.secondary { margin-top:12px; background:transparent; border:1px solid var(--line); color:var(--muted); font-weight:600; }
.resend-form button.secondary:hover { color:var(--text); border-color:var(--accent); }
@media (max-width:520px) { main { padding:24px; } }