/*--------------------------------------------------------------
# Telas fora do layout (login, cadastro, senha, 404/erro)
# Sempre no visual do site (site/css/style.css), independente do tema salvo:
# a página põe class="dark-mode" no <html> e carrega theme.css antes deste arquivo.
--------------------------------------------------------------*/

body.ss-auth {
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(0, 201, 167, .14) 0%, transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgba(245, 158, 11, .06) 0%, transparent 70%),
    var(--ss-bg);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Logo + nome como no header do site */
.ss-auth .logo span {
  font-family: var(--ss-ff-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ss-text-title);
}

.ss-auth .card {
  background: var(--ss-surface);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--ss-r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.ss-auth .card-title { letter-spacing: -.02em; }
.ss-auth .form-control,
.ss-auth .form-select,
.ss-auth .btn { border-radius: var(--ss-r); }

/* CTA principal da tela = ouro (conversão), como o "Testar grátis" do site */
.ss-auth .btn-primary {
  --bs-btn-color: var(--ss-on-accent);
  --bs-btn-bg: var(--ss-gold);
  --bs-btn-border-color: var(--ss-gold);
  --bs-btn-hover-color: var(--ss-on-accent);
  --bs-btn-hover-bg: var(--ss-gold-lt);
  --bs-btn-hover-border-color: var(--ss-gold-lt);
  --bs-btn-focus-shadow-rgb: 245, 158, 11;
  --bs-btn-active-color: var(--ss-on-accent);
  --bs-btn-active-bg: var(--ss-gold-lt);
  --bs-btn-active-border-color: var(--ss-gold-lt);
  --bs-btn-disabled-color: var(--ss-on-accent);
  --bs-btn-disabled-bg: var(--ss-gold);
  --bs-btn-disabled-border-color: var(--ss-gold);
  font-weight: 600;
  transition: transform var(--ss-dur) var(--ss-ease), box-shadow var(--ss-dur) var(--ss-ease), background-color var(--ss-dur);
}
.ss-auth .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--ss-gold-glow); }

/* Botões sociais (Google/Facebook): mantêm fundo branco no padrão dos provedores */
/* prefixo html.dark-mode: precisa vencer html.dark-mode .btn-outline-secondary do theme.css */
html.dark-mode .ss-auth .btn-social { background: #fff; color: #1A2845; border-color: rgba(255, 255, 255, .12); }
html.dark-mode .ss-auth .btn-social:hover { background: #E8EDF8; color: #080F1E; border-color: #E8EDF8; }
.ss-auth .divider-text { color: var(--ss-text-muted); }
.ss-auth .divider-text::before,
.ss-auth .divider-text::after { background: rgba(255, 255, 255, .08); }

/* 404 / erro */
.ss-auth .error-404 h1 { font-family: var(--ss-ff-display); letter-spacing: -.035em; color: var(--ss-accent); }
.ss-auth .error-404 h2 { color: var(--ss-text-title); }
.ss-auth .error-404 .btn {
  background: var(--ss-accent-btn);
  color: var(--ss-on-accent);
  font-weight: 600;
  border-radius: var(--ss-r);
}
.ss-auth .error-404 .btn:hover { background: var(--ss-accent-btn-h); }
.ss-auth .ss-auth-ico { color: var(--ss-accent); }
.ss-auth .credits { color: var(--ss-text-muted); }