/* ============================================================
   Tema Elite AI Solutions — identidade própria em todo o fluxo.
   03/10/2026: o arquivo anterior tinha 313 bytes e dizia, no próprio
   comentário, que NÃO substituía o branding da plataforma. Decisão do
   dono: o ecossistema é da Elite, e a tela que o Membro Elite vê tem
   de ser nossa — do fundo ao botão. Reversível: desativar o plugin.
   ============================================================ */

:root {
  --getfy-primary: #2E7BF6;

  --elite-azul: #2E7BF6;
  --elite-azul-claro: #5AA6FF;
  --elite-violeta: #8B5CF6;

  --elite-fundo: #070B14;
  --elite-fundo-2: #0C1424;
  --elite-carta: rgba(14, 21, 36, .82);
  --elite-borda: rgba(90, 166, 255, .18);
  --elite-texto: #EEF3FB;
  --elite-suave: #93A4BE;

  --elite-logo: url("/plugins/elite-theme/assets/icone.png");
}

/* ------------------------------------------------------------
   ÁREA DE MEMBROS — tela de entrada
   A marcação é Tailwind gerada pelo core, então os ganchos são as
   classes estruturais. Tudo aqui é escopado por .min-h-screen para
   não vazar para dentro da área depois de logado.
   ------------------------------------------------------------ */

body:has(> #app) {
  background: var(--elite-fundo);
}

/* o palco */
#app .min-h-screen.items-center.justify-center {
  position: relative;
  background-color: var(--elite-fundo) !important;
  isolation: isolate;
}

/* brilho da marca: dois halos e uma malha fina, sem imagem externa */
#app .min-h-screen.items-center.justify-center::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 36rem at 14% -8%, rgba(46, 123, 246, .30), transparent 62%),
    radial-gradient(48rem 34rem at 92% 108%, rgba(139, 92, 246, .22), transparent 60%),
    linear-gradient(170deg, var(--elite-fundo) 0%, var(--elite-fundo-2) 58%, var(--elite-fundo) 100%);
}

#app .min-h-screen.items-center.justify-center::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(90, 166, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 166, 255, .05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
}

/* o cartão */
#app .min-h-screen .max-w-md {
  position: relative;
  z-index: 1;
  max-width: 27rem;
  padding: 2.5rem 2.25rem 2.25rem;
  border: 1px solid var(--elite-borda) !important;
  border-radius: 22px !important;
  background: var(--elite-carta) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 30px 80px -24px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(255, 255, 255, .02);
}

/* fio de luz no topo do cartão */
#app .min-h-screen .max-w-md::before {
  content: "";
  position: absolute;
  top: -1px; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--elite-azul-claro), transparent);
  opacity: .75;
}

/* A MARCA, acima do título. Entra por CSS para não depender de JS. */
#app .min-h-screen .max-w-md > .flex.flex-col.items-center::before {
  content: "";
  display: block;
  width: 74px;
  height: 74px;
  margin: 0 auto 1.1rem;
  background-image: var(--elite-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 10px 26px rgba(46, 123, 246, .55));
}

#app .min-h-screen .max-w-md h1 {
  font-size: 1.55rem !important;
  letter-spacing: -.02em;
  color: var(--elite-texto) !important;
}

#app .min-h-screen .max-w-md > .flex.flex-col.items-center > p {
  color: var(--elite-suave) !important;
  font-size: .875rem !important;
}

/* campos */
#app .min-h-screen form label {
  color: var(--elite-suave) !important;
  font-size: .78rem !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#app .min-h-screen form input[type="email"],
#app .min-h-screen form input[type="password"],
#app .min-h-screen form input[type="text"] {
  background: rgba(7, 11, 20, .72) !important;
  border: 1px solid rgba(147, 164, 190, .22) !important;
  border-radius: 13px !important;
  color: var(--elite-texto) !important;
  padding: .8rem .95rem !important;
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}

#app .min-h-screen form input:focus {
  outline: 0 !important;
  border-color: var(--elite-azul) !important;
  background: rgba(7, 11, 20, .92) !important;
  box-shadow: 0 0 0 3px rgba(46, 123, 246, .22) !important;
}

#app .min-h-screen form input::placeholder { color: #5C6B84 !important; }

/* botão principal */
#app .min-h-screen form button[type="submit"],
#app .min-h-screen form > button {
  background: linear-gradient(135deg, var(--elite-azul) 0%, var(--elite-azul-claro) 100%) !important;
  border: 0 !important;
  border-radius: 13px !important;
  padding: .95rem 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  box-shadow: 0 12px 30px -10px rgba(46, 123, 246, .75) !important;
  transition: transform .14s, box-shadow .14s, filter .14s;
}

#app .min-h-screen form > button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 16px 36px -10px rgba(46, 123, 246, .9) !important;
}

#app .min-h-screen form > button:active:not(:disabled) { transform: translateY(0); }

/* links e caixa de marcar */
#app .min-h-screen a { color: var(--elite-azul-claro) !important; }
#app .min-h-screen a:hover { color: #8FC2FF !important; }
#app .min-h-screen input[type="checkbox"] { accent-color: var(--elite-azul); }

/* "Instalar App": deixa de ser um botão cinza de plataforma e vira um
   convite nosso, com a marca e o contorno da casa. */
#app .min-h-screen .max-w-md button:not([type="submit"]):not(.absolute),
#app .min-h-screen .max-w-md a[role="button"] {
  border: 1px solid var(--elite-borda) !important;
  border-radius: 13px !important;
  background: rgba(46, 123, 246, .07) !important;
  color: var(--elite-azul-claro) !important;
  font-weight: 600 !important;
  transition: background-color .16s, border-color .16s;
}

#app .min-h-screen .max-w-md button:not([type="submit"]):not(.absolute):hover {
  background: rgba(46, 123, 246, .14) !important;
  border-color: rgba(90, 166, 255, .38) !important;
}

/* o olho de mostrar senha não é botão de ação: volta ao discreto */
#app .min-h-screen form .relative button,
#app .min-h-screen form button.absolute {
  border: 0 !important;
  background: transparent !important;
  color: var(--elite-suave) !important;
}

/* assinatura da casa embaixo do cartão */
#app .min-h-screen .max-w-md::after {
  content: "Elite AI Solutions";
  position: absolute;
  left: 0; right: 0; bottom: -2.35rem;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(147, 164, 190, .55);
}

@media (max-width: 420px) {
  #app .min-h-screen .max-w-md { padding: 2rem 1.35rem 1.9rem; border-radius: 18px !important; }
  #app .min-h-screen .max-w-md > .flex.flex-col.items-center::before { width: 62px; height: 62px; }
}