:root { color-scheme: light; font: 100%/1.55 system-ui, sans-serif; color: #142843; background: #f3f6fa; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px 16px; min-height: 100dvh; display: grid; place-items: center; }
.card { width: 100%; max-width: 480px; padding: clamp(20px, 5vw, 36px); background: white; border: 1px solid #dce4ee; border-radius: 20px; overflow-wrap: anywhere; }
.brand { font-weight: 750; letter-spacing: .02em; color: #1554a3; }
h1 { font-size: 1.65rem; line-height: 1.25; margin: 16px 0; }
form { display: grid; gap: 12px; margin-top: 24px; }
[hidden] { display: none !important; }
label { font-weight: 600; }
input, button { font: inherit; width: 100%; min-width: 0; min-height: 48px; border-radius: 10px; padding: 12px; }
input { border: 1px solid #899caf; background: white; }
button { border: 0; background: #1554a3; color: white; font-weight: 650; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
button:disabled { cursor: wait; opacity: .65; }
.secondary { color: #142843; background: #eaf0f7; margin-top: 12px; }
a { display: inline-block; margin-top: 16px; color: #1554a3; }
.small { font-size: .875rem; color: #52657b; }
#error { color: #8c2525; background: #fff1f1; padding: 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid #e3a431; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }