:root { color-scheme:light dark; font-family:system-ui,sans-serif; color:#252831; background:#f5f6f8; }
* { box-sizing:border-box; }
body { margin:0; padding:32px 16px; }
main { max-width:480px; margin:32px auto; padding:32px; background:#fff; border:1px solid #d8dce3; border-radius:12px; }
.brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:650; }
h1 { font-size:26px; margin:28px 0 16px; }
p { line-height:1.55; overflow-wrap:anywhere; }
form { display:grid; gap:10px; margin:24px 0; }
label { font-weight:600; }
input,select,button,.primary { font:inherit; min-height:44px; border:1px solid #9ca4b1; border-radius:6px; padding:10px 12px; max-width:100%; }
input,select { width:100%; color:inherit; background:inherit; }
button,.primary { color:#fff; background:#343a85; border-color:#343a85; cursor:pointer; text-align:center; font-weight:600; }
button:disabled { cursor:default; opacity:.65; }
.secondary { background:transparent; color:#343a85; }
a { color:#343a85; text-underline-offset:3px; }
.primary { display:inline-block; text-decoration:none; }
.note { color:#535d6b; font-size:14px; }
[role="alert"] { padding:12px; border:1px solid #b43831; border-radius:6px; }
:focus-visible { outline:3px solid #6557b3; outline-offset:3px; }
@media (prefers-color-scheme:dark) {
 :root { color:#edf0f7; background:#151821; }
 main { background:#202530; border-color:#4a5261; }
 .brand img { filter:invert(1); }
 a,.secondary { color:#c0c4ff; }
 .note { color:#b9c1cf; }
 button,.primary { background:#bbbfff; border-color:#bbbfff; color:#171c38; }
 .secondary { background:transparent; color:#c0c4ff; }
 :focus-visible { outline-color:#c7baff; }
}
@media (max-width:420px) { main { padding:24px 20px; margin:8px auto; } }