:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #102f4a; background: #eef6fa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(145deg, #f8fcfe, #e6f3f9); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 460px); padding: 38px; border: 1px solid #c9dce7; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px rgba(16, 47, 74, .14); }
.brand { text-align: center; font-size: 52px; line-height: 1; letter-spacing: -2px; color: #0a3154; white-space: nowrap; }
.brand span { color: #aaa; }
.brand-subtitle { margin: 5px 0 34px; text-align: center; font-size: 18px; color: #1c2d3a; white-space: nowrap; }
h1 { margin: 0; text-align: center; font-size: 30px; }
.intro { margin: 8px 0 26px; text-align: center; color: #58758c; }
form { display: grid; gap: 18px; }
label { display: grid; gap: 8px; font-weight: 700; color: #233d50; }
input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid #aebfca; border-radius: 7px; font: inherit; font-size: 17px; }
input:focus { outline: 3px solid rgba(0, 125, 190, .18); border-color: #087ebb; }
button { height: 52px; border: 0; border-radius: 7px; background: #087ebb; color: #fff; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; white-space: nowrap; }
button:hover { background: #05689c; }
button:disabled { opacity: .65; cursor: wait; }
.error { margin: 0; padding: 11px 13px; border: 1px solid #e8a4a4; border-radius: 7px; background: #fff0f0; color: #9f2020; }
.password-help { margin: -4px 0 0; text-align: center; color: #58758c; font-size: 14px; line-height: 1.4; }
#mfa-step { display: grid; gap: 10px; }
#mfa-step[hidden] { display: none; }
#mfa-step .password-help { margin: 0; padding: 0 8px; }
@media (max-width: 520px) { .login-card { padding: 28px 22px; } .brand { font-size: 44px; } .brand-subtitle { font-size: 16px; } }