/* Auth screens (login / TOTP): a single quiet column on the ledger ground. */

.auth-body {
    display: grid;
    place-items: center;
    /* Center the card + footer as a group (two grid items since the footer). */
    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);
}

.brand-center { text-align: center; margin-bottom: var(--space-xl); }
.brand-center .brand-logo { max-width: 190px; margin: 0 auto; }
/* Match the auth screens' wider logo so the lockup label spans it exactly. */
.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;
}

/* Copyright footer below the auth card. */
.auth-foot .copyright {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    text-align: center;
}

@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); }
}