.account-page { min-height: 100dvh; margin: 0; color: #102a4c; background: linear-gradient(90deg,#062b43 0 43%,#eef4f8 43% 100%); font-family: Inter,Segoe UI,Arial,sans-serif; }
.account-shell { width: min(100% - 2rem,920px); min-height: 100dvh; margin: auto; display: grid; grid-template-columns: minmax(260px,.8fr) minmax(340px,1fr); align-items: center; gap: clamp(2rem,6vw,5rem); padding-block: 2rem; }
.account-brand { color: #fff; text-align: center; }
.account-brand img { width: clamp(110px,16vw,170px); filter: drop-shadow(0 12px 25px rgba(0,0,0,.25)); }
.account-brand p { margin: .45rem 0 0; color: #d6e4ee; letter-spacing: .08em; }
.account-brand .account-wordmark { margin-top: .9rem; color: #fff; font-size: clamp(1.25rem,3vw,1.75rem); font-weight: 800; letter-spacing: .12em; }
.account-card { padding: clamp(1.5rem,4vw,2.5rem); background: #fff; border-top: 5px solid #08a546; border-radius: 16px; box-shadow: 0 18px 50px rgba(6,43,67,.18); }
.account-eyebrow { margin: 0 0 .45rem; color: #0879c9; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.account-card h1 { margin: 0; font-size: clamp(1.8rem,4vw,2.4rem); }
.account-intro { margin: .65rem 0 1.5rem; color: #52657d; line-height: 1.5; }
.field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: .86rem; font-weight: 750; }
.field input, .field select, .field textarea { min-height: 48px; box-sizing: border-box; width: 100%; padding: .7rem .8rem; color: #102a4c; background: #fff; border: 1px solid #bdcad8; border-radius: 8px; font: inherit; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(0,122,204,.2); border-color: #007acc; }
.field span, .validation-summary { color: #a52727; font-size: .82rem; }
.validation-summary ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.account-card button, .account-link { min-height: 48px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.2rem; color: #fff; background: #0879c9; border: 0; border-radius: 8px; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.account-card button { width: 100%; }
.account-card button:hover, .account-link:hover { background: #0566aa; }
.account-note { margin: 1.25rem 0 0; color: #66778d; font-size: .82rem; line-height: 1.45; }
@media (max-width:700px) { .account-page { background: #eef4f8; } .account-shell { width: min(100% - 1.25rem,460px); grid-template-columns: 1fr; gap: 1rem; padding-block: 1.25rem; } .account-brand { color: #062b43; } .account-brand img { width: 88px; } .account-brand p { color: #52657d; } .account-brand .account-wordmark { color: #062b43; font-size: 1.15rem; margin-top: .45rem; } .account-card { padding: 1.35rem; } }

.account-form-link { margin: -.35rem 0 1rem; text-align: right; font-size: .84rem; }
.account-form-link a, .account-note a { color: #0879c9; font-weight: 700; text-decoration: none; }
.account-form-link a:hover, .account-note a:hover { text-decoration: underline; }
.password-requirements { margin-top: .15rem; color: #66778d; font-size: .78rem; line-height: 1.4; }
.password-requirements p { margin: 0 0 .2rem; font-weight: 700; }
.password-requirements ul { margin: 0; padding-left: 1.1rem; }

/* Two-factor sign-in */
.mfa-login-card {
    gap: .65rem;
}

.mfa-login-card h1 {
    margin-bottom: .15rem;
}

.mfa-login-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: .5rem 0 .35rem;
}

.mfa-login-methods form {
    margin: 0;
}

.mfa-login-method {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: .5rem .7rem;
    border: 1px solid var(--edge-control-border);
    border-radius: 9px;
    background: var(--edge-surface);
    color: var(--edge-text);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.mfa-login-method:hover {
    border-color: var(--edge-blue);
    background: var(--edge-blue-soft);
}

.mfa-login-method.active {
    border-color: var(--edge-blue);
    background: var(--edge-blue-soft);
    color: var(--edge-blue);
}

.mfa-login-instruction {
    margin: .4rem 0 .15rem;
    color: var(--edge-text-muted);
}

.mfa-code-field {
    margin-top: .25rem;
}

.mfa-code-field input {
    font-size: 1.15rem;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}

.mfa-login-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin-top: .65rem;
    padding-top: .8rem;
    border-top: 1px solid var(--edge-border);
    font-size: .9rem;
}

.mfa-login-footer form {
    margin: 0;
}

.mfa-login-footer a,
.mfa-text-action {
    color: var(--edge-blue);
    font: inherit;
    font-weight: 650;
    text-decoration: none;
}

.mfa-text-action {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mfa-login-footer a:hover,
.mfa-text-action:hover {
    text-decoration: underline;
}

@media (max-width: 520px) {
    .mfa-login-methods {
        grid-template-columns: 1fr;
    }
}

/* Authenticator enrollment */
.authenticator-setup-card {
    gap: .7rem;
}

.authenticator-qr {
    display: flex;
    justify-content: center;
    padding: .75rem;
    margin: .25rem 0;
    border: 1px solid var(--edge-border);
    border-radius: 10px;
    background: #fff;
}

.authenticator-qr svg {
    display: block;
    width: min(220px, 100%);
    height: auto;
}

.authenticator-manual {
    padding: .7rem;
    border-radius: 9px;
    background: var(--edge-surface-alt);
}

.authenticator-manual summary {
    cursor: pointer;
    font-weight: 700;
}

.authenticator-manual code {
    display: block;
    margin-top: .45rem;
    overflow-wrap: anywhere;
    font-size: .9rem;
}

.recovery-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    margin: .5rem 0;
}

.recovery-code-grid code {
    padding: .55rem;
    border: 1px solid var(--edge-border);
    border-radius: 7px;
    background: var(--edge-surface-alt);
    text-align: center;
    font-size: .9rem;
}

.account-continue-button {
    display: block;
    padding: .75rem 1rem;
    border-radius: 9px;
    background: var(--edge-blue);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

@media (max-width: 520px) {
    .recovery-code-grid {
        grid-template-columns: 1fr;
    }
}

/* MFA verification method selector */
.mfa-method-label {
    margin: .65rem 0 -.1rem;
    color: var(--edge-text);
    font-size: .9rem;
    font-weight: 700;
}

.account-card .mfa-login-methods .mfa-login-method {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: .5rem .7rem;
    border: 1px solid var(--edge-control-border);
    border-radius: 9px;
    background: #fff;
    color: var(--edge-text);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.account-card .mfa-login-methods .mfa-login-method:hover {
    border-color: var(--edge-blue);
    background: var(--edge-blue-soft);
    color: var(--edge-blue);
}

.account-card .mfa-login-methods .mfa-login-method.active {
    border-color: var(--edge-blue);
    background: var(--edge-blue);
    color: #fff;
}

.account-card .mfa-login-methods .mfa-login-method.active:hover {
    background: var(--edge-blue);
    color: #fff;
}

/* MFA method selection */
.mfa-method-label {
    margin: .55rem 0 -.1rem;
    color: var(--edge-text);
    font-size: .9rem;
    font-weight: 700;
}

/* Both choices are neutral until selected. */
.account-card .mfa-login-methods .mfa-login-method {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: .5rem .7rem;
    border: 1px solid var(--edge-control-border);
    border-radius: 9px;
    background: #fff;
    color: var(--edge-text);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.account-card .mfa-login-methods .mfa-login-method:hover {
    border-color: var(--edge-blue);
    background: var(--edge-blue-soft);
    color: var(--edge-blue);
}

/* Only the currently selected method is blue. */
.account-card .mfa-login-methods .mfa-login-method.active,
.account-card .mfa-login-methods button.mfa-login-method.active {
    border-color: var(--edge-blue);
    background: var(--edge-blue);
    color: #fff;
}

.account-card .mfa-login-methods .mfa-login-method.active:hover,
.account-card .mfa-login-methods button.mfa-login-method.active:hover {
    border-color: var(--edge-blue);
    background: var(--edge-blue);
    color: #fff;
}

/* Recovery-code action is the only secondary MFA login action. */
.mfa-login-footer-single {
    justify-content: center;
}


/* MFA OFFER */
.mfa-offer-card {
    max-width: 620px;
}

.mfa-offer-options {
    display: grid;
    gap: 14px;
    margin: 24px 0 18px;
}

.mfa-offer-options form {
    margin: 0;
}

.mfa-offer-option {
    width: 100%;
    text-align: left;
    padding: 18px;
    border: 1px solid #d6dce5;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    display: grid;
    gap: 6px;
}

.mfa-offer-option:hover,
.mfa-offer-option:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}

.mfa-offer-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.mfa-offer-recommended {
    width: fit-content;
    font-size: .75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e8f0ff;
}

.mfa-offer-description {
    font-size: .92rem;
    line-height: 1.45;
}

.mfa-offer-later {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.account-footnote {
    margin-top: 20px;
    text-align: center;
    font-size: .85rem;
}

.mfa-offer-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mfa-offer-note {
    text-align: center;
    margin-top: 18px;
}

/* Keep the MFA recommendation badge readable on the blue option card. */
.mfa-offer-option .mfa-offer-recommended {
    background: #ffffff;
    color: #17365f;
    border: 1px solid rgba(255, 255, 255, 0.9);
}