.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* #080810 é o tom de fundo do próprio fate_logo.gif, extraído direto
     da imagem — fundo todo nessa cor pra logo se dissolver nele. */
  background: #080810;
}

.auth-card {
  width: 100%;
  max-width: 240px;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  text-align: center;
}

.auth-brand .auth-mark {
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sem borda reta: a imagem esmaece gradualmente até ficar transparente
   antes de chegar na borda de verdade do arquivo, então ela se dissolve
   no fundo da página em vez de parecer um "recorte colado" em cima. */
.auth-brand .auth-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 68%);
  mask-image: radial-gradient(circle, #000 45%, transparent 68%);
}

.auth-card .card {
  padding: 14px;
}

.auth-footnote {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.onboarding-card {
  max-width: 440px;
}