.login-page body, body.login-page { }
body.login-page {
  position: relative;
  background: linear-gradient(120deg, #1e3c72, #2a5298);
  background-size: 180% 180%;
  animation: hmAuthBg 16s ease-in-out infinite;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 16px;
  overflow-x: hidden;
}

/* Decorative background blobs (subtle) */
body.login-page::before,
body.login-page::after {
  content:"";
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(48px);
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
}
body.login-page::before {
  left: -160px;
  top: -140px;
  background: radial-gradient(circle at 30% 30%, rgba(255,138,75,0.85), rgba(255,90,31,0.0) 60%);
}
body.login-page::after {
  right: -180px;
  bottom: -160px;
  background: radial-gradient(circle at 70% 70%, rgba(42,82,152,0.85), rgba(30,60,114,0.0) 62%);
}

@keyframes hmAuthBg {
  0% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}

/* Login page styles (matching Criar Conta visual) — cartão mais estreito e legível */
.login-container { width: 100%; max-width: 460px; display:flex; align-items:center; justify-content:center; }
.login-card { width: 100%; max-width: 420px; padding: 20px 22px; border-radius: 18px; box-shadow: 0 40px 80px rgba(6,22,50,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(12px) saturate(120%); position:relative; overflow:hidden; animation: hmAuthCardIn .22s cubic-bezier(.2,.9,.3,1) both; }
.login-card:hover { box-shadow: 0 52px 110px rgba(6,22,50,0.62); }

@keyframes hmAuthCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-card__brand { display:flex; align-items:center; gap:6px; margin-bottom:10px; justify-content:center; flex-direction:column; }

/* Override theme.css square brand icon (56x56) for auth logo */
.login-card__brand img.login-logo-icon {
  width: 200px;
  max-width: 88%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border: 0;
  padding: 0;
  display: block;
  object-fit: contain;
  margin: 0 auto 8px auto;
}

.login-card__brand p { color: #fff; font-weight:700; margin:2px 0 0 0; font-size:1.02rem; text-shadow:0 6px 20px rgba(3,18,40,0.45); }

.login-card__form { display:flex; flex-direction:column; gap:8px; }
/* style.css define margin-bottom nos .form-group — empurra o botão "Entrar" para baixo */
.login-card .form-group { margin-bottom: 0; }
.login-card .form-group.has-toggle .form-control {
  padding-right: 48px;
}
/* altura reservada para erros só quando há mensagem */
.login-card .error-message:empty { display: none; height: 0; min-height: 0; margin: 0; }
/* dica sob o email (login + criar conta) */
.login-card .auth-hint {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
}
.login-card .auth-hint strong { font-weight: 700; }
/* Criar conta: formulário longo — o mínimo de espaço azul entre campos */
.register-page.login-page .login-card__form {
  gap: 4px;
  row-gap: 4px;
}
.register-page.login-page .login-card .form-group {
  margin: 0;
  padding: 0;
  gap: 3px;
}
.register-page.login-page .login-card .form-group label.sr-only {
  position: absolute;
  margin: 0;
}
.register-page.login-page .login-card .auth-hint {
  margin: 0.15rem 0 0;
  line-height: 1.25;
}
.register-page .login-card__footer {
  margin-top: 8px;
}
.register-page .login-card__footer .login-footer-tagline {
  display: block;
  margin-bottom: 0.1rem;
}
.register-page .login-card__footer .register-footer-links {
  margin: 0.25rem 0 0;
  font-size: 0.86rem;
}
/* Criar conta: menos espaço entre logo e título */
.register-page.login-page .login-card__brand {
  margin-bottom: 6px;
  gap: 2px;
}
.register-page.login-page .login-card__brand img.login-logo-icon {
  margin-bottom: 4px;
}
.register-page.login-page .login-card__brand p {
  margin: 0;
}
.form-control { height:48px; padding:0 14px; border-radius:12px; border:0; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.95)); color:#0b2b45; box-shadow: 0 6px 22px rgba(6,18,40,0.18), inset 0 1px 0 rgba(255,255,255,0.8); }
.form-control::placeholder { color: #9fb5cc; }

.btn-primary { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:10px; font-weight:900; font-size:0.98rem; background: linear-gradient(90deg,#ff8a4b,#ff5a1f); color:#07122b; border:0; box-shadow:0 18px 40px rgba(6,18,40,0.36); border-bottom: 4px solid rgba(0,0,0,0.06); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow:0 26px 54px rgba(6,18,40,0.44); }
.btn-primary:active { transform: translateY(0px); }
.btn-primary i { color: rgba(7,18,43,0.95); }

.login-card__footer { text-align:center; margin-top:10px; color: rgba(255,255,255,0.92); font-size:0.86rem; }
.login-card__footer a { color: #eaf6ff; text-decoration:underline; }

/* subtle large ring behind card (pure CSS decorative) */
.login-card::before { content: ''; position:absolute; left:50%; top:40%; width:420px; height:420px; transform:translate(-50%,-40%); border-radius:50%; border:8px solid rgba(255,255,255,0.06); filter: blur(6px); pointer-events:none; }

.flash-message { padding:8px 10px; border-radius:10px; }
.flash-message.flash-danger { background: rgba(255,80,80,0.08); color:#ffdede; border:1px solid rgba(255,80,80,0.12); }
.flash-message.flash-success { background: rgba(40,200,120,0.08); color:#e8fff0; border:1px solid rgba(40,200,120,0.12); }

@media (max-width: 900px) {
  .login-container { max-width: 100%; }
  .login-card { padding:12px 14px; border-radius:12px; width:100%; max-width: 400px; }
  .login-card__brand img.login-logo-icon { width: 140px; }
  .form-control { height:46px; }
  .btn-primary { padding:10px 14px; }
}

/* Accessibility: focus states */
.form-control:focus { outline: 3px solid rgba(255,90,31,0.16); box-shadow:0 12px 30px rgba(1,25,60,0.28); }

/* Slightly larger clickable footer links */
.login-card__footer small a { padding:4px 6px; border-radius:6px; }

/* End of login overrides */

@media (prefers-reduced-motion: reduce) {
  body.login-page { animation: none !important; }
  .login-card { animation: none !important; }
  .btn-primary { transition: none !important; }
}