* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px; background: #eef4fb; color: #102a4c; font: 16px/1.5 system-ui, sans-serif; }
main { width: min(460px, 100%); padding: 28px; background: white; border: 1px solid #d7e6f8; border-radius: 18px; }
.brand { color: #0756bd; font-size: .8rem; font-weight: 700; }
h1 { font-size: 1.7rem; line-height: 1.2; }
form { display: grid; gap: 10px; }
[hidden] { display: none !important; }
input, button { width: 100%; min-width: 0; min-height: 48px; border-radius: 8px; padding: 10px; font: inherit; }
input { border: 1px solid #abc2df; }
button { background: #0967dc; color: white; border: 0; cursor: pointer; font-weight: 700; margin-top: 6px; }
button:disabled { opacity: .6; cursor: wait; }
a { color: #0756bd; overflow-wrap: anywhere; }
main > a { display: block; margin-top: 12px; }
:focus-visible { outline: 3px solid #c99721; outline-offset: 3px; }
#message { overflow-wrap: anywhere; }
#message[data-error="true"] { color: #a42323; }
small, .support { font-size: .85rem; }