:root { color-scheme: light; font-family: Tahoma, Arial, sans-serif; color: #233344; background: #e9edf2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-size: 14px; }
.topbar { min-height: 72px; background: linear-gradient(#456d96, #2d5278); color: white; display: flex; justify-content: space-between; align-items: center; padding: 14px 30px; border-bottom: 3px solid #c8d6e5; }
.brand { display: flex; gap: 20px; align-items: center; color: white; text-decoration: none; }
.brand strong { letter-spacing: 2px; font-size: 22px; }
.brand span { border-left: 1px solid #ffffff60; padding-left: 20px; font-size: 16px; }
.account { display: flex; align-items: center; gap: 18px; }
.account form { margin: 0; }
main { flex: 1; padding: 48px 20px; }
.auth-card { width: 100%; max-width: 480px; margin: 0 auto; padding: 32px; border: 1px solid #becbd8; border-top: 4px solid #456d96; border-radius: 5px; background: white; box-shadow: 0 5px 20px #20384c12; }
.eyebrow { color: #4b6a89; font-size: 11px; font-weight: bold; letter-spacing: 1.2px; margin-bottom: 14px; }
h1 { font-size: 23px; line-height: 1.35; margin: 0 0 14px; }
p { line-height: 1.65; }
.muted, .help { color: #637589; }
.help { font-size: 12px; }
label { display: block; font-weight: bold; margin: 22px 0 8px; }
input { display: block; width: 100%; border: 1px solid #aabacb; border-radius: 3px; background: #fff; font: inherit; padding: 12px; color: #213547; }
input:focus { outline: 2px solid #608cb6; outline-offset: 2px; }
button { font: inherit; cursor: pointer; border-radius: 3px; padding: 12px 16px; }
.primary { display: block; width: 100%; background: #365f88; border: 1px solid #2c5277; color: white; font-weight: bold; margin-top: 26px; }
.primary:hover { background: #254d75; }
.secondary { background: #f0f3f6; border: 1px solid #bdc9d6; color: #344e68; margin-top: 12px; width: 100%; }
.link-button { color: white; background: transparent; border: 1px solid #ffffff70; padding: 8px 12px; }
.validation { color: #a52a35; line-height: 1.5; background: #fff1f2; border-radius: 3px; }
.validation ul { padding: 12px 14px 12px 32px; }
.validation-summary-valid { display: none; }
.notice { border-left: 3px solid #b9872a; padding: 10px 14px; background: #fff7e8; color: #775515; }
.workspace { max-width: 1240px; margin: 0 auto; border: 1px solid #bbc8d6; border-radius: 4px; overflow: hidden; background: white; }
.module-bar { display: flex; flex-wrap: wrap; gap: 0; background: #edf2f7; border-bottom: 1px solid #bbc8d6; }
.module-bar span { padding: 16px 24px; border-right: 1px solid #c9d3de; font-weight: bold; color: #6f8090; }
.welcome { padding: 36px; }
a { color: #365f88; }
footer { text-align: center; color: #6c7c8b; padding: 20px; font-size: 12px; }
@media (max-width: 600px) { .topbar { padding: 16px; align-items: flex-start; gap: 12px; flex-direction: column; } .brand { gap: 12px; } .brand span { padding-left: 12px; font-size: 14px; } main { padding: 24px 12px; } .auth-card { padding: 24px; } .welcome { padding: 24px; } }

.mfa-card { max-width: 580px; }
.mfa-card ol { padding-left: 22px; line-height: 1.8; }
.mfa-qr { display: block; width: 260px; max-width: 100%; height: auto; margin: 20px auto; image-rendering: pixelated; }
.manual-key { overflow-wrap: anywhere; display: block; margin-top: 12px; font-size: 16px; }
details { padding: 12px; border: 1px solid #c8d6e5; border-radius: 3px; }
summary { cursor: pointer; color: #365f88; }
.recovery-codes { padding-left: 20px; line-height: 2.2; font-size: 14px; overflow-wrap: anywhere; }
.account-security { color: white; }
@media print { .topbar, footer, .button, .link-button { display: none; } main { padding: 0; } .auth-card { box-shadow: none; border: none; } }