.login-page { display: flex; flex-direction: column; min-height: 100dvh; padding: 40px 20px 24px; justify-content: center; align-items: center; background: #f7f9fc; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.login-shell { width: 100%; max-width: 440px; display: grid; justify-items: center; gap: 26px; margin: auto; }
.login-page .login-brand { position: static; display: flex; align-items: center; justify-content: center; }
.login-brand img { display: block; width: auto; height: 68px; max-width: 100%; object-fit: contain; }
.login-page .login-card { max-width: 440px; padding: 36px; border-radius: 12px; border-color: #e4eaf2; box-shadow: 0 8px 32px #17253a05; }
.login-card .eyebrow { font-size: 10px; letter-spacing: 1px; margin: 0 0 12px; }
.login-page .login-card h1 { font-family: inherit; font-size: 25px; line-height: 1.4; font-weight: 650; letter-spacing: -.5px; }
.login-page .login-subtitle { font-size: 13px; line-height: 1.8; color: #6f7d90; margin: 12px 0 28px; }
.login-page .login-card form > label:not(.remember-row) { font-size: 12px; margin: 20px 0 9px; }
.login-page .login-card input[type=email], .login-page .login-card input[type=password] { height: 46px; padding: 0 13px; font-size: 15px; }
.login-page .remember-row { font-size: 12px; margin: 20px 0; }
.login-page .remember-row input { width: 16px; height: 16px; margin: 0; }
.login-page .button-wide { height: 46px; font-size: 13px; padding: 0 16px; }
.login-page .field-error { font-size: 12px; line-height: 1.6; margin-top: 8px; }
.login-page .login-note { font-size: 12px; line-height: 1.7; color: #7a8799; margin: 22px 0 0; }
.login-public-link { color: #3978d4; font-size: 12px; }
.login-page .login-footer { position: static; margin-top: 36px; color: #8290a3; font-size: 11px; text-align: center; line-height: 1.8; }
.login-page a:focus-visible, .login-page button:focus-visible { outline: 2px solid #3978d4; outline-offset: 4px; }
@media (max-width: 520px) { .login-page { padding: 24px 16px; } .login-shell { gap: 22px; } .login-brand img { height: 56px; } .login-page .login-card { padding: 28px 22px; } .login-page .login-card h1 { font-size: 23px; } .login-page .login-card input[type=email], .login-page .login-card input[type=password] { font-size: 16px; } }
/* Public demo accounts under the login card. */
.login-shell:has(.demo-accounts) { max-width: 640px; }
.login-shell:has(.demo-accounts) .login-card { width: 100%; }
.demo-accounts { width: 100%; padding: 26px 28px; background: #fff; border: 1px solid #e4eaf2; border-radius: 12px; box-shadow: 0 8px 32px #17253a05; }
.demo-accounts-head h2 { margin: 0; font-size: 16px; font-weight: 650; color: #202f46; }
.demo-accounts-head p { margin: 8px 0 18px; font-size: 12px; line-height: 1.7; color: #6f7d90; }
.demo-accounts code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #202f46; background: #f2f5f9; padding: 1px 6px; border-radius: 4px; }
.demo-account-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.demo-account { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid #e8edf3; border-radius: 10px; transition: border-color .15s, background .15s; }
.demo-account:hover, .demo-account.is-selected { border-color: #bfd5f2; background: #f7fafe; }
.demo-account-role strong, .demo-account-role span { display: block; }
.demo-account-role strong { font-size: 13px; color: #202f46; }
.demo-account-role span { margin-top: 3px; font-size: 11px; line-height: 1.5; color: #7a8799; }
.demo-account-credentials { margin: 0; display: grid; gap: 5px; }
.demo-account-credentials div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.demo-account-credentials dt { width: 46px; flex-shrink: 0; font-size: 10px; color: #8290a3; text-transform: uppercase; letter-spacing: .04em; }
.demo-account-credentials dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.demo-account-use { height: 34px; padding: 0 14px; border: 1px solid #c9dbf3; border-radius: 8px; background: #f2f7fe; color: #3978d4; font-size: 12px; font-weight: 600; cursor: pointer; }
.demo-account-use:hover { background: #3978d4; border-color: #3978d4; color: #fff; }
@media (max-width: 600px) {
    .demo-accounts { padding: 20px 16px; }
    .demo-account { grid-template-columns: minmax(0, 1fr) auto; }
    .demo-account-credentials { grid-column: 1 / -1; grid-row: 2; }
}