/* auth.css — gate de login do Ninja Tech (2 painéis, estilo ManyChat) */
body.locked .topbar, body.locked .layout, body.locked #screen, body.locked #detail { display: none !important; }

/* [hidden] tem que vencer o display:flex dos campos (senão login mostra campos de cadastro) */
.auth-shell [hidden] { display: none !important; }

/* CRÍTICO: .auth-gate{display:flex} vence o [hidden] do UA — sem isto, gate.hidden=true
   NÃO esconde o gate: ele fica vazio por cima (z-index 10000) e tapa o app (tela "branca"). */
.auth-gate[hidden] { display: none !important; }

.auth-gate {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 14px; overflow: auto; font-family: "Geist", system-ui, sans-serif;
  background: radial-gradient(1200px 700px at 15% -10%, #2a1a4d 0%, #0F0F1A 55%), #0F0F1A;
}

/* shell dos 2 painéis — nunca passa da altura da tela; o form rola por dentro */
.auth-shell {
  display: flex; width: 100%; max-width: 900px; margin: auto;
  height: min(700px, calc(100vh - 34px));   /* tamanho fixo: não muda ao trocar Entrar/Criar conta; -34 cobre o padding do gate */
  background: #17172A; border: 1px solid #2D1B4D; border-radius: 20px; overflow: hidden;
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
}

/* ── painel esquerdo: branding (~55%) ── */
.auth-hero {
  flex: 1.25; position: relative; display: flex; align-items: center; justify-content: center; padding: 34px; color: #fff; overflow: hidden;
  background:
    linear-gradient(150deg, #3a2170 0%, #1a1030 72%),
    repeating-linear-gradient(90deg, rgba(212,175,55,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(139,92,246,.06) 0 1px, transparent 1px 40px);
}
.auth-hero::after {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; top: -90px; right: -90px;
  background: radial-gradient(circle, rgba(139,92,246,.35), transparent 65%);
}
.auth-hero-in { position: relative; max-width: 340px; }
.auth-hero-logo { display: block; margin: 0 auto 8px; width: 140px; height: 140px; border-radius: 26px; }
.auth-hero-brand { text-align: center; color: #D4AF37; font-family: "Space Grotesk", sans-serif;
  font-weight: 700; letter-spacing: 4px; font-size: 19px; }
.auth-hero-title { margin: 14px 0 9px; font-family: "Space Grotesk", sans-serif; font-size: 26px; line-height: 1.15; color: #fff; }
.auth-hero-sub { margin: 0 0 18px; color: #c7c2e0; font-size: 14px; line-height: 1.5; }
.auth-hero-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.auth-hero-feats li { position: relative; padding-left: 24px; color: #ded9f2; font-size: 13.5px; }
.auth-hero-feats li::before { content: "▸"; position: absolute; left: 4px; color: #D4AF37; font-weight: 700; }

/* ── painel direito: formulário (~45%) — rola por dentro se faltar altura ── */
.auth-panel { flex: 1; display: flex; flex-direction: column; padding: 20px 22px; overflow-y: auto; }
.auth-card { width: 100%; max-width: 330px; margin: 0 auto; }  /* ancorado no topo: abas+Google fixos nas 2 visões */
.auth-mini { display: none; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.auth-mini img { width: 38px; height: 38px; border-radius: 9px; }
.auth-mini span { color: #D4AF37; font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: 3px; font-size: 15px; }

.auth-tabs { display: flex; gap: 6px; background: #0F0F1A; border-radius: 10px; padding: 4px; margin-bottom: 12px; }
.auth-tabs button { flex: 1; padding: 9px; border: 0; border-radius: 8px; background: transparent;
  color: #b8b8cc; font-weight: 600; cursor: pointer; font-size: 13.5px; font-family: inherit; }
.auth-tabs button.on { background: #8B5CF6; color: #fff; }

.auth-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #222; border: 0; border-radius: 10px; padding: 10px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.auth-google:hover { background: #f1f1f4; }

.auth-or { display: flex; align-items: center; gap: 10px; color: #6a6a86; font-size: 11.5px; margin: 11px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: #2D1B4D; }

#auth-form { display: flex; flex-direction: column; gap: 6px; text-align: left; }
@keyframes auth-swap { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.auth-swap { animation: auth-swap .34s cubic-bezier(.4, 0, .2, 1); }
.auth-row { display: flex; gap: 9px; min-width: 0; }
.auth-row .auth-f { flex: 1; min-width: 0; }
.auth-f { display: flex; flex-direction: column; gap: 4px; color: #8b8ba3; font-size: 11.5px; font-weight: 600; min-width: 0; }
.auth-hint { color: #55556e; font-weight: 500; }
.auth-f input { width: 100%; min-width: 0; box-sizing: border-box; background: #0F0F1A; border: 1px solid #2D1B4D;
  color: #fff; border-radius: 9px; padding: 8px 12px; font-size: 13.5px; outline: none; font-family: inherit; }
.auth-f input::placeholder { color: #55556e; }
.auth-f input:focus { border-color: #8B5CF6; box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
.auth-pass { position: relative; }
.auth-pass input { width: 100%; padding-right: 38px; box-sizing: border-box; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: 0; border: 0;
  color: #6a6a86; cursor: pointer; padding: 5px; display: flex; align-items: center; }
.auth-eye:hover { color: #b8b8cc; }
.auth-eye.on { color: #8B5CF6; }

.auth-check { display: flex; align-items: flex-start; gap: 9px; color: #b8b8cc; font-size: 12px; line-height: 1.4; cursor: pointer; margin-top: 2px; }
.auth-check input { margin-top: 1px; width: 15px; height: 15px; accent-color: #8B5CF6; flex: 0 0 auto; }
.auth-check b { color: #D4AF37; font-weight: 600; }
/* slot reservado pro captcha (Turnstile/reCAPTCHA) — entra aqui na hora */
.auth-captcha { min-height: 56px; display: flex; align-items: center; justify-content: center; margin: 6px 0 2px;
  border: 1px dashed #2D1B4D; border-radius: 10px; color: #4a4a63; font-size: 11px; letter-spacing: .3px; }
.auth-captcha:empty::before { content: "\1F6E1  verificação de segurança (em breve)"; }

.auth-primary { margin-top: 4px; background: #8B5CF6; color: #fff; border: 0; border-radius: 10px;
  padding: 11px; font-weight: 700; font-size: 14.5px; cursor: pointer; font-family: inherit; }
.auth-primary:hover { background: #7c4ef0; }
.auth-primary:disabled { opacity: .6; cursor: default; }
.auth-msg { min-height: 16px; font-size: 12.5px; text-align: center; line-height: 1.4; }
.auth-msg.err { color: #ff6b6b; }
.auth-msg.ok { color: #4ade80; }
.auth-link { background: 0; border: 0; color: #8B5CF6; font-size: 12.5px; cursor: pointer; padding: 2px; align-self: center; }

.tb-email { color: #8b8ba3; font-size: 12px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }

/* telas baixas: aperta mais o vertical */
@media (max-height: 780px) {
  .auth-shell { min-height: 0; }
  #auth-form { gap: 7px; }
  .auth-f input { padding: 8px 12px; }
  .auth-or { margin: 9px 0; }
  .auth-hero { padding: 28px; }
}

/* ── responsivo: some o branding, vira card único ── */
@media (max-width: 820px) {
  .auth-shell { max-width: 400px; min-height: 0; }
  .auth-hero { display: none; }
  .auth-mini { display: flex; }
  .auth-panel { padding: 26px 22px; }
}
@media (max-width: 380px) {
  .auth-row { flex-direction: column; gap: 8px; }
  .tb-email { display: none; }
}