/* Entrar (login.html) no desenho V2 (Telas.dc.html › Login, 08/11/2026). Carregado por último no login.html; mora em
   brand/login/ porque só /brand/ abre antes de entrar (lib/auth.js).
   O login não carrega style.css: as cores abaixo são as mesmas do :root e do [data-theme="dark"] de style.css
   (handoff de 08/11/2026), repetidas só aqui. Cartão de 380 px, raio 12, logo de 28 px, título 22/650, campos e
   botão de 44 px, foco azul. Fundo liso (--bg). O comportamento da página não muda. */
:root, :root[data-theme="light"] { --v2-bg: #FFFFFF; --v2-surface: #FFFFFF; --v2-text: #303030; --v2-muted: #616161; --v2-border: #E3E3E3; --v2-border-strong: #CCCCCC; --v2-primary: #303030; --v2-primary-ink: #FFFFFF; --v2-focus: #005BD3; --v2-shadow: 0 1px 2px rgba(26, 26, 26, .04); }
:root[data-theme="dark"] { --v2-bg: #121212; --v2-surface: #1C1C1C; --v2-text: #F0F0F0; --v2-muted: #B3B3B3; --v2-border: #2C2C2C; --v2-border-strong: #4A4A4A; --v2-primary: #F0F0F0; --v2-primary-ink: #1A1A1A; --v2-focus: #9CC2FF; --v2-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --v2-bg: #121212; --v2-surface: #1C1C1C; --v2-text: #F0F0F0; --v2-muted: #B3B3B3; --v2-border: #2C2C2C; --v2-border-strong: #4A4A4A; --v2-primary: #F0F0F0; --v2-primary-ink: #1A1A1A; --v2-focus: #9CC2FF; --v2-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
}
html, body { background: var(--v2-bg) !important; background-image: none !important; color: var(--v2-text); }
.caixa { width: 100%; max-width: 380px !important; padding: 28px !important; border: 1px solid var(--v2-border) !important; border-radius: 12px !important; background: var(--v2-surface) !important; box-shadow: var(--v2-shadow) !important; }
.marca { margin-bottom: 8px !important; }
.marca img { height: 28px !important; width: auto !important; }
h1 { margin-top: 8px !important; font-size: 22px !important; font-weight: 650 !important; letter-spacing: 0 !important; color: var(--v2-text) !important; }
label { font-size: 13px !important; font-weight: 550 !important; color: var(--v2-text) !important; }
input { height: 44px !important; padding: 0 12px !important; border: 1px solid var(--v2-border-strong) !important; border-radius: 8px !important; background: var(--v2-surface) !important; color: var(--v2-text) !important; font-weight: 450 !important; }
input:focus, :root[data-theme="dark"] input:focus { border-color: var(--v2-border-strong) !important; box-shadow: none !important; outline: 2px solid var(--v2-focus) !important; outline-offset: 2px !important; }
.olho { width: 36px !important; height: 36px !important; border-radius: 6px !important; color: var(--v2-muted) !important; }
.olho:focus-visible { outline: 2px solid var(--v2-focus) !important; outline-offset: 2px !important; }
.entrar, :root[data-theme="dark"] .entrar { height: 44px !important; margin-top: 4px; border: 0 !important; border-radius: 8px !important; background: var(--v2-primary) !important; color: var(--v2-primary-ink) !important; box-shadow: none !important; font: 600 14px 'Inter', sans-serif !important; }
.entrar:hover, :root[data-theme="dark"] .entrar:hover { background: var(--v2-primary) !important; filter: brightness(.96); }
.entrar:focus-visible { outline: 2px solid var(--v2-focus) !important; outline-offset: 2px !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entrar { background: var(--v2-primary) !important; color: var(--v2-primary-ink) !important; box-shadow: none !important; }
  :root:not([data-theme="light"]) input:focus { border-color: var(--v2-border-strong) !important; box-shadow: none !important; }
}
.dica, .voltar { color: var(--v2-muted) !important; }
@media (max-width: 600px) {
  .caixa { padding: 24px !important; }
}