/*
 * Auth + error frame — a centred card under the mascot and name.
 * Shared by layouts/auth.php (sign-in, two-factor) and
 * layouts/error.php (401/403/404/500/503).
 */
.auth { width: 100%; max-width: 400px; min-width: 0; }
.auth__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    text-align: center;
}
.auth__title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: 0.02em; }
.auth__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--sp-5);
}
.auth__card .alert { margin-bottom: var(--sp-4); }
.form--auth .form__title { font-size: var(--fs-lg); }
.form--auth .btn--block { margin-top: var(--sp-1); }
.auth__foot { text-align: center; font-size: var(--fs-xs); color: var(--color-text-dim); }
.auth__foot a { color: var(--color-primary-hi); }
@media (max-width: 640px) {
    .auth__card { padding: var(--sp-4); }
}

/* HTTP error views */
.error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    text-align: center;
    padding: var(--sp-3) 0;
}
.error__code {
    font-size: var(--fs-3xl);
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 1;
    color: var(--color-danger);
}
.error__message { color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 32ch; }
.error__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-3); }