:root {
    color-scheme: light;
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #34465e;
    background: #f4f7fc;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 40px 16px;
    background: #f4f7fc;
    font-size: 1rem;
    line-height: 1.65;
}
::selection { background: #ccdff2; color: #002552; }
:focus-visible { outline: 3px solid #002552; outline-offset: 3px; }
[hidden] { display: none !important; }
.login-box { width: 100%; max-width: 440px; min-width: 0; }
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand img { display: block; max-width: 100%; height: auto; max-height: 76px; object-fit: contain; margin: 0 auto 18px; filter: brightness(0) saturate(100%) invert(12%) sepia(48%) saturate(2663%) hue-rotate(190deg) brightness(92%) contrast(106%); }
.login-eyebrow { margin: 0 0 5px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: #34465e; }
h1, h2 { color: #002552; letter-spacing: -0.035em; line-height: 1.3; }
h1 { margin: 0; font-size: 2rem; font-weight: 800; }
h2 { margin: 0 0 8px; font-size: 1.375rem; font-weight: 700; }
.login-card { background: #fff; border: 1px solid #cdd9e8; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 37, 82, 0.055); }
.login-card-body { padding: 28px 28px 16px; }
.login-intro { margin: 0 0 24px; color: #34465e; font-size: 1rem; }
.login-field { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 700; color: #002552; }
input, button { font: inherit; }
input { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; color: #002552; border: 1px solid #cdd9e8; border-radius: 6px; background: #fbfcfe; font-size: 1rem; }
input::placeholder { color: #63748b; opacity: 1; font-size: 0.875rem; }
input:focus { background: #fff; border-color: #7196bd; }
input[aria-invalid="true"] { border-color: #b93655; }
.login-password { display: flex; align-items: stretch; gap: 6px; }
.login-password input { flex: 1; }
.login-password button { flex: 0 0 48px; min-height: 48px; padding: 0 8px; border: 1px solid #cdd9e8; border-radius: 6px; color: #002552; background: #f1f5fa; cursor: pointer; }
.login-password button:hover { background: #e7f0fa; }
/* Reuse the bundled Font Awesome Free eye glyphs. */
@font-face { font-family: "Login Icons"; src: url("../style/dist/assets/fonts/fa-regular-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
.login-eye::before { content: "\f06e"; font: 20px/1 "Login Icons"; }
[aria-pressed="true"] .login-eye::before { content: "\f070"; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; margin-top: 6px; padding: 12px 16px; border: 1px solid #002552; border-radius: 6px; background: #002552; color: #fff; font-weight: 700; cursor: pointer; }
.login-submit:hover { background: #153c69; }
.login-submit:disabled { opacity: 0.75; cursor: wait; }
.login-status { min-height: 1.65em; margin: 12px 0 0; color: #52657e; text-align: center; font-size: 0.75rem; }
.login-alert { margin-bottom: 20px; padding: 12px 14px; border: 1px solid #e6b8c3; border-radius: 6px; background: #fff4f6; color: #942b44; overflow-wrap: anywhere; }
.login-alert p { margin: 0; font-weight: 700; }
.login-alert ul { margin: 6px 0 0; padding-left: 20px; }
.login-field-error { margin: 6px 0 0; color: #942b44; font-size: 0.75rem; overflow-wrap: anywhere; }
.login-footer { margin: 20px 0 0; text-align: center; color: #34465e; font-size: 0.75rem; }
.login-footer span { padding: 0 8px; color: #00889b; }
@media (max-width: 480px) {
    body { padding-block: 24px; }
    .login-card-body { padding: 22px 20px 12px; }
    h2 { font-size: 1.25rem; }
}