/* Auth screens (login / TOTP verify / first-login enrollment): a single
   quiet column on the dark ledger ground. */

.auth-body {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-lg);
    min-height: 100vh;
    padding: var(--space-lg);
}

.auth-main {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-xl);
}

/* Enrollment carries a QR + manual key and needs the wider column. */
.auth-main.auth-wide { max-width: 440px; }

.brand-center { text-align: center; margin-bottom: var(--space-xl); }
.brand-center .brand-logo { max-width: 190px; margin: 0 auto; }
.brand-center .brand-sub { max-width: 190px; margin-left: auto; margin-right: auto; }

.auth-title {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: var(--space-lg);
}
.auth-lead {
    font-size: 0.9375rem;
    text-align: center;
    margin-top: calc(-1 * var(--space-sm));
}

.auth-form { margin-top: var(--space-md); }
.auth-form .button { margin-top: var(--space-sm); }
.auth-form .input-code { margin: 0 auto; display: block; }

.auth-aside {
    margin: var(--space-lg) 0 0;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    text-align: center;
}

.auth-foot .copyright {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    text-align: center;
}

/* ── First-login TOTP enrollment ─────────────────────────────────────────── */

.totp-enroll { text-align: center; }

/* The QR tile stays white with a quiet zone so scanners read it off the
   dark screen; qrcodejs draws dark modules on a light canvas. */
.totp-qr {
    display: inline-block;
    background: #ffffff;
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    line-height: 0;
}
.totp-qr img, .totp-qr canvas { display: block; }

.totp-secret {
    font-size: 0.8125rem;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
    margin-bottom: var(--space-md);
}
.totp-secret code { display: inline-block; margin-top: var(--space-xs); font-size: 0.9375rem; }

@media (max-width: 480px) {
    .auth-body { padding: var(--space-md); align-items: start; align-content: start; }
    .auth-main { margin-top: var(--space-xl); padding: var(--space-lg); }
}