/* =====================================================================
   auth.css — login, cadastro, MFA, recuperação de senha
   ===================================================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
    position: relative;
    isolation: isolate;
    background: var(--bg);
}
.auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(620px 380px at 50% -4%, var(--brand-soft), transparent 70%),
        linear-gradient(180deg, #f3f4f8 0%, var(--bg) 60%);
}

.auth-card {
    width: 100%;
    max-width: 426px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-lg);
}
.auth-card--wide { max-width: 540px; }

.auth-card__brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-5);
}
.auth-card__brand a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.auth-logo {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.auth-logo__mark {
    width: 34px; height: 34px;
    display: grid; place-content: center;
    background: var(--brand);
    border-radius: 9px;
    flex-shrink: 0;
}
.auth-logo__mark svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 2; }

.auth-card h1 {
    font-size: 23px;
    margin-bottom: 6px;
    text-align: center;
}
.auth-card__subtitle {
    color: var(--ink-soft);
    font-size: 13.5px;
    text-align: center;
    margin-bottom: var(--sp-5);
    line-height: 1.55;
}

.auth-card__footer {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 13.5px;
    color: var(--ink-soft);
}
.auth-card__footer a { font-weight: 600; }

.auth-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 13px;
    margin-top: var(--sp-4);
    text-decoration: none;
}
.auth-back:hover { color: var(--ink); text-decoration: none; }
.auth-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Ícone de confirmação / e-mail enviado */
.auth-confirm-icon {
    display: flex;
    justify-content: center;
    color: var(--brand);
    margin: 4px 0 14px;
}
.auth-email-sent { text-align: center; padding: var(--sp-3) 0; }
.auth-email-sent__icon {
    width: 60px; height: 60px;
    margin: 0 auto var(--sp-4);
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 50%;
    display: grid; place-content: center;
}
.auth-email-sent__icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; }

.auth-confirm-msg {
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    margin: 16px 0 18px;
    padding: 13px 15px;
    background: var(--brand-soft2);
    border: 1px solid #e0def8;
    border-radius: var(--r-sm);
}
.auth-confirm-hint {
    color: var(--ink-mute);
    font-size: 11.5px;
    text-align: center;
    margin: 10px 0 0;
}

/* Códigos de backup do 2FA */
.backup-codes {
    background: var(--surface-2);
    border: 1px dashed var(--brand);
    border-radius: var(--r-sm);
    padding: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 14px;
    margin: var(--sp-4) 0;
    columns: 2;
    column-gap: var(--sp-4);
}
.backup-codes div { padding: 5px 0; color: var(--ink); break-inside: avoid; }

/* QR code do 2FA */
.qr-box {
    display: flex;
    justify-content: center;
    padding: var(--sp-4);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin: var(--sp-4) 0;
}
.btn[disabled] { opacity: .55; cursor: not-allowed; }