/* ===========================
   LOGIN / AUTH – plugado no tema global
   =========================== */

:root{
  /* Espaço reservado pra variáveis locais do login, se precisar depois */
}

/* Wrapper central */
.auth-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  position:relative;
  z-index:0;
}

/* Overlay de fundo cobrindo a tela inteira
   (usa o glow e fundo do tema, sem faixa estranha) */
.auth-wrap::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1200px 700px at 50% 0%, var(--app-primary-glow-soft), transparent 60%),
    linear-gradient(180deg, var(--app-bg-900) 0%, var(--app-bg-900) 100%);
}

/* Card de login – usa tokens de card global, mas com glow extra */
.auth-card{
  width:100%;
  max-width: 420px;
  background: var(--app-card-bg);
  border:1px solid var(--app-card-border);
  border-radius: var(--app-radius-base);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    var(--app-shadow-hard);
  padding:22px 20px 20px;
  position:relative;
}

/* filete de luz no topo do card */
.auth-card::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--app-primary), transparent);
  filter:blur(.6px);
}

/* Marca + título */
.brand-line{
  text-align:center;
  margin-bottom:14px;
}

.logo-img{
  height: clamp(144px, 7.5vw, 216px);
  width:auto;
  display:block;
  margin:0 auto 8px;
  object-fit:contain;
  filter: drop-shadow(0 0 16px var(--app-primary-glow-soft));
  border-radius:4px;
}

/* Aproveita .h1 global, só ajusta o brilho */
.brand-line .h1{
  margin:0;
  font-weight:800;
  letter-spacing:.4px;
  text-shadow:0 0 18px var(--app-primary-glow-soft);
}

/* Lâmina abaixo da marca: usa cor do tema */
.brand-line .lamina{
  width:160px;
  height:6px;
  margin:.7rem auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--app-lamina-core), transparent);
  filter:blur(.4px);
}

/* Formulário */
.auth-card .form{
  margin-top:14px;
}

/* Escopo local pra não brigar com .field global de outras páginas */
.auth-card .field{
  display:block;
  font-size:14px;
  color:var(--app-text);
  margin-bottom:12px;
}

.auth-card .field label{
  display:block;
}

/* Inputs do login, plugados nos tokens de input */
.auth-card .field input{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  background: var(--app-input-bg);
  color: var(--app-text);
  border:1px solid var(--app-input-border);
  border-radius:10px;
  outline: none;
  transition:
    border-color .15s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.auth-card .field input::placeholder{
  color: var(--app-input-placeholder);
}

.auth-card .field input:focus{
  border-color: var(--app-input-focus-border);
  box-shadow:
    0 0 0 3px var(--app-input-focus-ring-inner),
    0 0 0 5px var(--app-input-focus-ring-outer),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Botão principal (aproveita .btn global, só força full width e peso) */
.auth-card .btn{
  width:100%;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1rem;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.2px;
}

/* Mantém a experiência de foco mais “premium” aqui */
.auth-card .btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(5,11,22,.85),
    0 0 0 5px rgba(151,218,255,.65),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* Mensagem dinâmica (erro/ok) – usa cores do tema */
.auth-card .msg{
  min-height:20px;
  margin-top:10px;
  font-size:13px;
  color: var(--app-msg-error);
}

.auth-card .msg.ok{
  color: var(--app-success);
}

/* Responsivo extra */
@media (max-width:420px){
  .auth-card{
    padding:18px 16px 16px;
  }
  .brand-line .lamina{
    width:140px;
  }
}