/* Autenticação — layout centralizado. Depende de components.css. */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: var(--space-6) var(--space-4);
}
.auth__card {
    width: 100%; max-width: 420px; padding: var(--space-7) var(--space-6);
}
.auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); text-align: center; }
.auth__logo {
    width: auto; min-width: 150px; max-width: 230px; height: 48px;
    background: center / contain no-repeat url('../images/logo.png');
    color: transparent; font-size: 0; box-shadow: none; border-radius: 0;
    filter: none;
}
:root[data-theme="light"] .auth__logo { filter: brightness(0); }
.auth__brand h1 { font-size: var(--text-xl); }
.auth__brand p { font-size: var(--text-sm); color: var(--text-muted); }

.auth__footer { margin-top: var(--space-5); text-align: center; font-size: var(--text-sm); color: var(--text-muted); }

.input-group { position: relative; display: flex; align-items: center; }
.input-group svg { position: absolute; left: var(--space-3); color: var(--text-subtle); pointer-events: none; }
.input-group .input { padding-left: 42px; }
.input-group .input-toggle { position: absolute; right: var(--space-2); background: none; border: 0; color: var(--text-subtle); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); }
.input-group .input-toggle:hover { color: var(--text); }

.checkbox { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--brand); }

.auth__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }