/* Telas de entrar / criar conta / aguardando liberação.
   O protótipo não tinha login — estas telas são novas, mas usam as mesmas
   variáveis do app.css para manter a identidade verde. */

/* `.app` e `.auth-wrap` usam display:flex, que é regra de autor e portanto
   vence o display:none que o navegador aplica a [hidden]. Sem este reset as
   três telas aparecem empilhadas na mesma página. */
[hidden]{display:none !important}

.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(160deg,var(--brand-light),var(--bg));
}

.auth-card{
  width:100%;max-width:400px;background:var(--card);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.10);padding:32px 28px;
}

.auth-brand{text-align:center;margin-bottom:22px}
.auth-logo{
  width:56px;height:56px;margin:0 auto 12px;border-radius:14px;
  background:var(--brand);color:#fff;font-size:28px;
  display:flex;align-items:center;justify-content:center;
}
.auth-brand h1{font-size:20px;color:var(--brand-dark);font-weight:700}
.auth-brand p{font-size:13px;color:var(--muted);margin-top:4px}

.auth-form .field{margin-bottom:14px}
.auth-form .field small{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.auth-btn{width:100%;justify-content:center;margin-top:6px}

.auth-alt{text-align:center;font-size:13px;color:var(--muted);margin-top:16px}
.auth-alt a{color:var(--brand);font-weight:600;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}

.auth-erro{
  background:#fef2f2;color:var(--danger);border:1px solid #fecaca;
  border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:12px;
}

.auth-msg{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:20px;text-align:center}

/* Link de sair na barra lateral */
.sair-link{
  display:block;color:#c7e6d3;text-decoration:none;font-weight:600;
  margin-bottom:10px;font-size:13px;
}
.sair-link:hover{color:#fff}