/* Dimensoes proprias do acesso; cores e botoes usam o design system. */
    .auth-surface {
        --exp-button-bg-primary: var(--exp-color-brand-navy);
        --exp-button-radius: var(--exp-radius-lg);
        color: var(--exp-color-text-primary);
    }

    .auth-surface h2 {
        color: var(--exp-color-brand-navy);
    }

    .tab-content h2[tabindex="-1"]:focus {
        outline: none;
    }

    .auth-surface .login-input {
        width: 100%;
        height: 50px;
        min-width: 0;
        padding: 12px 16px 12px 48px;
        border: 1px solid var(--exp-color-border-strong);
        border-radius: var(--exp-radius-lg);
        background: var(--exp-color-surface);
        color: var(--exp-color-text-primary);
        font: inherit;
        font-size: 16px;
        line-height: 24px;
        transition: border-color var(--exp-transition-base), box-shadow var(--exp-transition-base);
    }

    .auth-surface #login-password {
        padding-right: 52px;
    }

    .auth-surface .login-input::placeholder {
        color: var(--exp-color-text-muted);
    }

    .auth-surface .login-input:focus {
        outline: none;
        border-color: var(--exp-color-brand-blue);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--exp-color-brand-blue) 20%, transparent);
    }

    .auth-surface .group:focus-within .login-field-icon {
        color: var(--exp-color-brand-blue);
    }

    .auth-surface .exp-btn {
        width: 100%;
        min-height: 50px;
        font-size: 16px;
        font-weight: 600;
    }

    .auth-surface .login-link {
        color: var(--exp-color-brand-navy);
        font-weight: 600;
        text-underline-offset: 3px;
    }

    .auth-surface .login-link:hover {
        text-decoration: underline;
        text-decoration-color: var(--exp-color-brand-blue);
    }

    .auth-surface :is(button, a, input[type="checkbox"]):focus-visible {
        outline: 2px solid var(--exp-color-brand-blue);
        outline-offset: 3px;
    }

    .auth-surface #remember-me {
        accent-color: var(--exp-color-brand-navy);
    }

/* Componentes exclusivos da jornada de acesso; ações usam ExpeditFeedback. */
.login-scene .auth-surface { padding: 28px; font-family: Inter, sans-serif; }
.login-scene-page .login-scene-layout { padding-block: var(--login-scene-padding, clamp(20px, 4svh, 48px)); }
.login-scene-product { display: flex; flex-direction: column; align-items: flex-start; }
.login-scene-product p { flex: 1; }
.auth-header { margin-bottom: 24px; }
.auth-brand { display: block; width: 48px; height: 48px; object-fit: contain; margin: 0 auto 16px; }
.auth-header h2 { font: 700 28px/1.2 Inter, sans-serif; letter-spacing: -.025em; margin: 0 0 8px; }
.auth-header p { font-size: 14px; line-height: 1.5; color: var(--exp-color-text-muted); margin: 0; }
.auth-surface [data-auth-form] { display: flex; flex-direction: column; gap: 16px; }
.auth-surface [data-auth-form] > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.auth-surface [data-auth-form] > .trigger_ajax:empty { display: none; }
.auth-surface [data-auth-form] > .pt-4 { padding-top: 0; }
.auth-surface [data-auth-form] label { font-size: 14px; }
.auth-surface .login-input { height: 48px; }
.auth-surface input[type="password"], .auth-surface #register-email { padding-right: 52px; }
.auth-surface #register-email, .auth-surface #OnboardInpTelefone { padding-right: 120px; }
.auth-surface input[autocomplete="one-time-code"] { padding-inline: 14px; letter-spacing: .15em; }
.auth-surface .exp-btn { min-height: 46px; font-size: 14px; }
.auth-surface .step .exp-btn { width: auto; }
.auth-surface .step > div > a.exp-btn { width: 100%; }
.auth-footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--exp-color-border); }
.auth-footer p { font-size: 13px; }
.auth-footer p:empty { display: none; }
.auth-footer p:first-child:not(:last-child) { margin-bottom: 10px; }
.auth-feedback { padding: 12px 14px; border-radius: var(--exp-radius-lg); font-size: 14px; line-height: 1.5; color: var(--exp-color-danger-text); background: var(--exp-color-danger-subtle); }
.auth-feedback[hidden] { display: none; }
.auth-feedback[data-status="success"] { color: var(--exp-color-success-text); background: var(--exp-color-success-subtle); }
.auth-surface .exp-btn[aria-busy="true"] { cursor: wait; }
.auth-surface #register-progress { margin-bottom: 20px; }
@media (min-width: 821px) and (max-height: 850px) {
    .login-scene-page .login-scene-layout { padding-block: var(--login-scene-padding, 20px); }
    .login-scene .auth-surface { padding: 24px; }
    .auth-brand { width: 40px; height: 40px; margin-bottom: 12px; }
    .auth-header { margin-bottom: 20px; }
    .auth-header h2 { font-size: 26px; }
}
@media (min-width: 821px) and (max-height: 740px) {
    .login-scene .auth-surface { padding: 20px 24px; }
    .auth-brand { width: 36px; height: 36px; margin-bottom: 10px; }
    .auth-header { margin-bottom: 16px; }
    .auth-header h2 { font-size: 24px; }
    .auth-surface [data-auth-form] { gap: 12px; }
    .auth-footer { margin-top: 16px; padding-top: 14px; }
}
@media (min-width: 821px) and (max-height: 660px) {
    .auth-surface [data-auth-form] { gap: 10px; }
    .auth-footer { margin-top: 12px; padding-top: 10px; }
    .auth-footer p:first-child:not(:last-child) { margin-bottom: 8px; }
}
@media (min-width: 821px) and (max-width: 1000px) {
    .auth-surface #loginForm > .flex-wrap { gap: 8px; }
    .auth-surface #loginForm label[for="remember-me"] { margin-left: 8px; font-size: 13px; }
}
@media (max-width: 600px) {
    .login-scene .auth-surface { padding: 24px 20px; }
    .auth-header h2 { font-size: 26px; }
    .auth-surface .login-input { font-size: 16px; }
    .auth-surface .step-indicator { font-size: 11px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-surface, .auth-surface * { animation: none !important; transition: none !important; }
}