.login-body { min-height: 100vh; }
.login-shell { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 1.5rem; }
.login-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: grid; gap: 2rem; max-width: 28rem; padding: 2rem; width: 100%; }
.login-card h1 { letter-spacing: -.035em; margin: .5rem 0; }
.login-card p { color: var(--color-text-muted); margin: 0; }
.login-brand { width: fit-content; }
.login-submit { width: 100%; }

/* Lista de critérios de senha, atualizada em tempo real por password-requirements.js conforme o
   usuário digita — mostra o que falta antes do envio, em vez de só depois de um erro. */
.password-requirements { display: grid; font-size: .85rem; gap: .35rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.password-requirements li { color: var(--color-text-muted); }
.password-requirements li::before { content: "○ "; }
.password-requirements li.met { color: var(--color-primary-strong); }
.password-requirements li.met::before { color: var(--color-primary); content: "✓ "; font-weight: 700; }

.visually-hidden { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

/* Campo de senha com o ícone de olho dentro do próprio input — mesmo padrão de .combobox-clear em
   controlpanel.css. Ver password-visibility.js. */
.password-field { position: relative; }
.password-field input { padding-right: 2.75rem; width: 100%; }
.password-toggle { align-items: center; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; display: inline-flex; height: 2.25rem; justify-content: center; padding: 0; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); width: 2.25rem; }
.password-toggle:hover { color: var(--color-primary-strong); }
.password-toggle svg { height: 1.1rem; width: 1.1rem; }
/* Visibilidade pelo estado do próprio botão (aria-pressed, trocado por password-visibility.js), não
   pelo atributo "hidden" de cada ícone — mais robusto a diferenças de suporte por navegador. */
.password-toggle .icon-eye-off { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }

/* Truque padrão para detectar autofill em navegadores baseados em WebKit/Blink (Chrome, Edge,
   Safari): eles preenchem o valor sem disparar o evento "input" que password-requirements.js
   escuta, então uma senha sugerida pelo próprio navegador nunca atualizaria a checklist sem isto. */
@keyframes password-autofill-detect { from { opacity: 1; } to { opacity: 1; } }
input:-webkit-autofill { animation-duration: .001s; animation-name: password-autofill-detect; }