/* =========================
   MAGIC LOGIN — CSS LIMPO
   - Um único :root
   - Sem overrides duplicados
   - Desktop e mobile consistentes
   ========================= */

:root{
  /* brand */
  --accent-cyan:#22d3ee;
  --accent-blue:#3b82f6;
  --danger:#ef4444;

  /* base */
  --bg-1:#0b1220;
  --bg-2:#0c1426;
  --panel-1:#0b1b33;
  --panel-2:#0a1730;

  /* text */
  --text:#f1f5f9;
  --muted:#94a3b8;
  --muted2:#64748b;

  /* glass */
  --stroke:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.07);

  /* sizing */
  --card-radius:24px;
  --card-max:520px;
  --tabs-max:320px;
  --logo-size:160px;
}

/* Reset */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
html{ background: var(--bg-1); overscroll-behavior: contain; }

body{
  min-height:100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--text);
  overflow-x:hidden;

  /* fundo mais azul profundo, sem “esverdear” */
  background:
    radial-gradient(1100px 700px at 18% -10%, rgba(37, 99, 235, .22), transparent 60%),
    radial-gradient(900px 600px at 105% 12%, rgba(79, 70, 229, .18), transparent 62%),
    radial-gradient(800px 520px at 50% 85%, rgba(30, 64, 175, .16), transparent 62%),
    linear-gradient(160deg, #050814, #07142a 55%, #050814);
  background-attachment: fixed;

  -webkit-user-select:none;
  user-select:none;
}

/* card mais “navy premium” */


  /* opcional: bloquear seleção (se quiser) */
  -webkit-user-select:none;
  user-select:none;
}

/* brilho suave decorativo (fica atrás do conteúdo) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.45;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(216, 179, 92, .55), transparent 60%),
    radial-gradient(2px 2px at 18% 35%, rgba(216, 179, 92, .45), transparent 60%),
    radial-gradient(2px 2px at 78% 18%, rgba(216, 179, 92, .50), transparent 60%),
    radial-gradient(2px 2px at 82% 42%, rgba(216, 179, 92, .35), transparent 60%);
}


/* opcional: canvas/particles */
.particle-bg{
  position:fixed;
  inset:0;
  z-index:1;
  opacity:.35;
  pointer-events:none;
}

/* layout */
.container{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}

.auth-wrapper{
  width:100%;
  max-width: var(--card-max);
  margin:0 auto;
}

/* CARD */


/* header centralizado */
.auth-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding-right:56px; /* espaço para o X */
  position:relative;
}

/* botão X */
.close-btn{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color: var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  transition:.2s ease;
  z-index:5;
}
.close-btn:hover{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
  color: var(--danger);
}

/* logo */
.brand{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-logo{
  width: var(--logo-size);
  height:auto;
  max-width:70%;
  margin: 0 auto 10px;
  object-fit:contain;
  filter: drop-shadow(0 0 8px rgba(34,211,238,.25));
}

/* se você tinha brand-text, some com ele para ficar como o print */
.brand-text{ display:none; }

/* tabs */
.tab-bar{
  width: min(100%, var(--tabs-max));
  margin:0 auto;
  display:flex;
  gap:8px;
  padding:4px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tab{
  flex:1 1 0;
  border:none;
  outline:none;
  cursor:pointer;
  padding:.7rem 0;
  border-radius:12px;
  font-weight:800;
  font-size:.92rem;
  color:#e2e8f0;
  background:transparent;
  transition:.2s ease;
  white-space:nowrap;
  text-align:center;
}
.tab:hover:not(.active){
  background: rgba(255,255,255,.10);
  color:#fff;
}
.tab.active{
  color:#0b1220;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
}

/* título */
.auth-title{
  margin: .25rem 0 1.2rem;
  text-align:center;
  font-weight:900;
  font-size:1.05rem;
  background: linear-gradient(135deg, #fff, rgba(148,163,184,.95));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* mensagens */
.message{
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:12px;
  font-weight:700;
  font-size:.9rem;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  text-align:center;
}
.message-success{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  color: #22c55e;
}
.message-error{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: var(--danger);
}

/* forms toggle */
.form{ display:none; opacity:0; transform: translateY(10px); transition:.25s ease; }
.form.active{ display:block; opacity:1; transform: translateY(0); }

/* inputs */
.form-group{ margin-bottom:14px; position:relative; }
.form-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform: translateY(-50%);
  width:20px;
  height:20px;
  color: var(--muted);
}
.form-input{
  width:100%;
  height:56px;
  padding: 0 1rem 0 42px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.94);
  color:#0f172a;
  font-size:.95rem;
  font-weight:600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(0,0,0,.03);
}
.form-input::placeholder{ color: var(--muted2); font-weight:600; }
.form-input:focus{
  outline:none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18), 0 10px 20px rgba(2,132,199,.10);
  background:#fff;
}
.form-input:focus + .form-icon{ color: var(--accent-cyan); }

/* submit */
.submit-btn{
  width:100%;
  height:56px;
  border:none;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;

  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
  color:#fff;
  font-weight:900;
  font-size:1rem;
  letter-spacing:.02em;
  box-shadow: 0 10px 24px rgba(34,211,238,.30);
  transition:.2s ease;
}
.submit-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(34,211,238,.38);
}
.submit-btn:active{ transform: translateY(0); }

/* divider + footer */
.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 14px 0 10px;
}
.divider-line{
  flex:1;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.30), transparent);
}
.divider-text{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.15em;
  color:#9fb3c8;
  text-transform:uppercase;
}
.auth-footer{ margin-top: 10px; text-align:center; }
.footer-note{
  color: rgba(166,180,199,.95);
  font-size:.82rem;
  line-height:1.45;
  margin-bottom:.5rem;
}
.footer-credit{
  color: rgba(123,138,161,.95);
  font-size:.75rem;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.12);
}
.footer-credit a{
  color: var(--accent-cyan);
  text-decoration:none;
  font-weight:800;
}
.footer-credit a:hover{ color: var(--accent-blue); }

/* focus acessível */
.tab:focus,
.form-input:focus,
.submit-btn:focus,
.close-btn:focus{
  outline:2px solid var(--accent-cyan);
  outline-offset:2px;
}

/* reduz motion */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
}

/* responsivo */
@media (max-width:768px){
  :root{ --logo-size:150px; }
  .auth-card{ padding:22px 18px; }
  .auth-header{ padding-right:0; } /* no mobile não precisa compensar */
}

@supports (height: 100dvh){
  body{ min-height:100dvh; background-attachment: scroll; }
  .container{ min-height:100dvh; }
}
/* ✅ FIX: centralização perfeita do logo + abas no desktop (sem torto por causa do X) */
.auth-header{
  padding-right: 0 !important;       /* mata o deslocamento */
  padding-inline: 56px !important;   /* cria “margem” igual dos 2 lados */
}

/* mobile continua limpo */
@media (max-width:768px){
  .auth-header{
    padding-inline: 0 !important;
  }
}
/* NÃO mostrar texto de loading em lugar nenhum */
.loading-text{
  display:none !important;
}
/* =========================
   TIRA O VERDE + ESTRELAS DOURADAS (MAGIC)
   cole no final do CSS
   ========================= */

:root{
  /* dourado do "MAGIC" (ajuste fino se quiser) */
  --magic-gold: #d6b85a;
  --magic-gold-2:#f2d27a;
}

/* 1) Remove qualquer "verde" do card: sombras, bordas e gradientes */
.auth-card{
  width:100%;
  border-radius: var(--card-radius);
  position:relative;
  overflow:hidden;

  /* vidro fosco real */
  background: rgba(10, 24, 52, 0.75); /* azul profundo, sem cyan */
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(32px) saturate(155%);

  /* borda de vidro */
  border: 1px solid rgba(255,255,255,.14);

  /* sombra premium */
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);

  padding:28px 24px 22px;
}
.auth-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,0) 40%
    );

  opacity:.7;
}
.auth-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;

  background:
    radial-gradient(
      60% 40% at 20% 0%,
      rgba(59,130,246,.18),
      transparent 60%
    );

  opacity:.6;
}


/* 2) Esse botão "Secure Logout" estava gritando verde. Deixa azul/ciano */
.message-success,
.message-success *{
  color: var(--accent-cyan) !important;
}
.message-success{
  border-color: rgba(34,211,238,.35) !important;
  background: rgba(34,211,238,.08) !important;
}

/* 3) Se o "Secure Logout" for um elemento específico (parece um badge), força o estilo */
.secure-logout,
#secureLogout,
a.secure-logout,
div.secure-logout{
  border-color: rgba(34,211,238,.25) !important;
  background: rgba(34,211,238,.06) !important;
  color: rgba(34,211,238,.95) !important;
}

/* 4) Estrelas douradas: funciona se você usa "particles" ou pontinhos via pseudo-elemento */
.particle-bg,
canvas.particle-bg{
  /* deixa o canvas mais quente/dourado sem explodir brilho */
  filter: hue-rotate(-25deg) saturate(1.35) brightness(1.08) contrast(1.02);
  opacity:.45; /* ajusta se ficar forte demais */
}

/* 5) Se suas "estrelas" forem feitas via background-image (radials), troca a cor para dourado */
body::before{
  opacity:.40;
  background:
    radial-gradient(60px 60px at 12% 22%, rgba(214,184,90,.12), transparent 60%),
    radial-gradient(80px 80px at 78% 18%, rgba(242,210,122,.10), transparent 65%);
}

/* 6) Se você desenha estrelas como elementos .star (caso exista) */
.star{
  background: radial-gradient(circle, rgba(242,210,122,.95), rgba(214,184,90,.35) 45%, transparent 70%) !important;
  box-shadow: 0 0 10px rgba(242,210,122,.35) !important;
  opacity:.85 !important;
}