/* ============================================================
   LOGIN — identidade fixa (02/08/2026)
   O tema é preferência de quem já entrou; o login é a porta da marca.
   Por isso aqui NADA depende de --acc: as cores são literais da Seven
   Black (preto + limão). Assim o contraste é sempre o mesmo, escolha o
   usuário o tema que escolher.
   Bug corrigido: .login-title/.login-sub tinham color:#fff fixo e ficavam
   invisíveis quando o tema clareou o cartão.
   ============================================================ */

.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(760px 420px at 72% 8%, rgba(180, 240, 74, .16), transparent 62%),
    radial-gradient(620px 480px at 12% 96%, rgba(143, 203, 46, .10), transparent 62%),
    linear-gradient(180deg, #0A0D07 0%, #070A05 100%) !important;
  overflow: auto;
}

/* malha técnica discreta, a mesma assinatura do chassi */
.login-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(180,240,74,.028) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(180,240,74,.028) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(700px 500px at 70% 10%, #000, transparent 78%);
  mask-image: radial-gradient(700px 500px at 70% 10%, #000, transparent 78%);
}

.login-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 372px;
  padding: 44px 34px 34px;
  text-align: center;
  border-radius: 22px !important;
  background: linear-gradient(168deg, rgba(28, 37, 20, .92), rgba(12, 17, 9, .96)) !important;
  border: 1px solid rgba(180, 240, 74, .18) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  animation: loginIn .5s cubic-bezier(.25, .46, .45, .94) both;
}

.login-logo {
  width: 56px; height: 56px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  background: linear-gradient(150deg, #D3FB86, #B4F04A 48%, #8FCB2E) !important;
  color: #0B1005 !important;
  box-shadow: 0 0 32px rgba(180, 240, 74, .34), inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* Estes dois eram o bug: branco fixo sobre cartão que virou claro. */
.login-title {
  font-family: var(--font-display);
  font-size: 25px; font-weight: 700; letter-spacing: .09em;
  color: #F2F8E8 !important;
  margin-bottom: 6px;
}
.login-sub {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(226, 240, 208, .55) !important;
  margin-bottom: 26px; line-height: 1.6;
}

/* campos: fundo escuro, foco limão — contraste garantido */
.login-box .form-input,
.login-box input[type="email"],
.login-box input[type="password"] {
  width: 100%;
  background: rgba(0, 0, 0, .34) !important;
  border: 1.5px solid rgba(180, 240, 74, .16) !important;
  color: #F2F8E8 !important;
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 14px;
  text-align: center;
}
.login-box .form-input::placeholder { color: rgba(226, 240, 208, .38) !important; }
.login-box .form-input:focus {
  border-color: #B4F04A !important;
  box-shadow: 0 0 0 3px rgba(180, 240, 74, .18) !important;
  outline: none;
}

/* botão: sempre limão, com o texto escuro (14:1) */
.login-box .btn-primary {
  width: 100%; justify-content: center; margin-top: 16px;
  padding: 14px 20px; font-size: 14.5px; font-weight: 750;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #B4F04A 0%, #8FCB2E 130%) !important;
  color: #0B1005 !important;
  border: 1px solid rgba(211, 251, 134, .85) !important;
  box-shadow: 0 8px 26px -8px rgba(180, 240, 74, .85), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}
.login-box .btn-primary:hover {
  background: linear-gradient(180deg, #C6F55F 0%, #9FD93A 130%) !important;
  transform: translateY(-1px);
}
.login-box .btn-primary:disabled { opacity: .6; transform: none; }

.login-error { color: #FCA5A5 !important; font-size: 13px; margin-top: 10px; min-height: 18px; }

/* rodapé da caixa (assinatura) */
.login-box > div:last-child {
  margin-top: 22px !important;
  font-size: 11px !important;
  color: rgba(226, 240, 208, .42) !important;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

@keyframes loginIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .login-overlay { padding: 20px 16px; align-items: center !important; }
  .login-box {
    max-width: 100%; padding: 38px 24px 28px;
    border-radius: 22px !important;
  }
  .login-logo { width: 52px; height: 52px; font-size: 24px; }
  .login-title { font-size: 23px; }
  .login-sub { font-size: 10.5px; margin-bottom: 22px; }
  /* alvo de toque confortável, sem estourar a tela */
  .login-box .form-input { min-height: 48px; font-size: 16px; }  /* 16px evita o zoom do iOS */
  .login-box .btn-primary { min-height: 50px; }
}
@media (max-height: 560px) {
  .login-overlay { align-items: flex-start !important; }
  .login-box { padding: 28px 24px 22px; }
  .login-logo { width: 44px; height: 44px; font-size: 20px; margin-bottom: 14px; }
  .login-sub { margin-bottom: 16px; }
}

/* O caret de terminal é assinatura da marca — mas estava grande e solto
   ao lado do título. Aqui ele fica proporcional, alinhado e discreto. */
.login-title::after {
  content: '▊';
  color: #B4F04A !important;
  font-size: .5em !important;
  margin-left: 5px !important;
  vertical-align: 14%;
  opacity: .85;
  animation: caretBlink 1.15s steps(1) infinite;
}