body, body.vip-login {
  background:
    radial-gradient(1200px 800px at 15% 15%, rgba(0,197,110,.06), transparent 60%),
    radial-gradient(1000px 700px at 85% 85%, rgba(202,255,234,.05), transparent 60%),
    #101820 !important;
  background-color: #101820 !important;
  color: #eaf8f1;
}

html, body { height: 100%; }
body {
  background:
    radial-gradient(1200px 800px at 15% 15%, rgba(0,197,110,.06), transparent 60%),
    radial-gradient(1000px 700px at 85% 85%, rgba(202,255,234,.05), transparent 60%),
    #101820;
  background-color: #101820;
  color: #eaf8f1;
  font-family:'Inter', system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}
body.vip-login { min-height: 100vh; }


/* ===== BLOQUEIOS GERAIS (anti-cópia leve) ===== */
.vip-login * { -webkit-tap-highlight-color: transparent; }
html, body  { height: 100%; }
.vip-login, .vip-login main, .vip-login header, .vip-login section, .vip-login footer {
  -webkit-user-select: none; user-select: none;
}
.vip-login input, .vip-login textarea, .vip-login .otp { -webkit-user-select: auto; user-select: auto; }
.vip-login .hidden { display: none !important; }

/* ===== PALETA / TOKENS ===== */
/* ===== PALETA / TOKENS (escopo correto) ===== */
body.vip-login{
  --emerald:#00c56e;
  --emerald-2:#27e18f;
  --ink:#0a0d0b;          /* cor do fundo */
  --card:#0b100ecc;
  --ring:rgba(0,197,110,.32);
  --btnh:48px;
}


body.vip-login{
  background:
    radial-gradient(1200px 800px at 15% 15%, rgba(0,197,110,.06), transparent 60%),
    radial-gradient(1000px 700px at 85% 85%, rgba(202,255,234,.05), transparent 60%),
    var(--ink);
  background-color: var(--ink); /* fallback extra */
  color:#eaf8f1;
  font-family:'Inter', system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

body.vip-login::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, transparent 55%, rgba(0,0,0,.38) 100%);
}

.vip-login .brand{font-family:'Orbitron', monospace; letter-spacing:.6px}
.vip-login .glass{background:var(--card); backdrop-filter: blur(8px)}
.vip-login .neon{border:1px solid var(--ring)}
.vip-login .glass:hover, .vip-login .glass:focus-within{


  border-color:rgba(0,197,110,.7);
  box-shadow:0 0 16px rgba(0,197,110,.22), inset 0 0 16px rgba(0,197,110,.12)
}
.vip-login .divider{height:1px;background:linear-gradient(90deg,transparent,var(--ring),transparent)}

/* halo + bolhas + grid decorativos */
.vip-login .halo{position:fixed; inset:0; z-index:-5; pointer-events:none; opacity:.25}
.vip-login .halo::before,.vip-login .halo::after{content:""; position:absolute; filter: blur(70px); border-radius:9999px; transform: rotate(15deg)}
.vip-login .halo::before{width:520px;height:520px;left:-120px;top:-120px;background:radial-gradient(circle, rgba(0,197,110,.28), transparent 60%)}
.vip-login .halo::after{width:560px;height:560px;right:-140px;bottom:-140px;background:radial-gradient(circle, rgba(0,197,110,.20), transparent 60%)}
.vip-login .bubbles{position:fixed; inset:0; z-index:-4; overflow:hidden; pointer-events:none}
.vip-login .bubble{position:absolute; bottom:-10vh; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #eafff6, #b5ffe6 35%, #00c56e 60%, rgba(0,197,110,.85) 75%, rgba(0,197,110,0) 100%);
  box-shadow:0 0 10px rgba(0,197,110,.55), 0 0 24px rgba(0,197,110,.35), inset 0 0 8px rgba(255,255,255,.35);
  opacity:.8; filter:saturate(1.08); animation:rise linear infinite, sway 5s ease-in-out infinite, twinkle 3.4s ease-in-out infinite}
@keyframes rise{to{transform:translateY(-120vh)}} @keyframes sway{50%{margin-left:18px}}
@keyframes twinkle{50%{filter:brightness(1.25)}}
.vip-login #bgGrid{position:fixed; inset:0; z-index:-3; pointer-events:none; filter:saturate(1.04) contrast(1.04) brightness(.98)}

/* ORBE */
.vip-login .hero-orb{position:relative; width:min(160px,36vw); aspect-ratio:1/1; margin:8px auto 10px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden; background:radial-gradient(45% 55% at 50% 45%, rgba(0,197,110,.18), transparent 60%);
  box-shadow:0 0 0 2px rgba(0,197,110,.45) inset, 0 0 30px rgba(0,197,110,.35), 0 0 0 8px rgba(0,197,110,.06)}
.vip-login .hero-orb::before{content:""; position:absolute; inset:-6px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(0,197,110,0) 0 55%, rgba(0,197,110,.75) 60%, rgba(0,197,110,0) 70% 100%);
  filter:blur(6px); animation:orbSpin 6s linear infinite}
.vip-login .hero-orb::after{content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 24px rgba(0,197,110,.25), 0 0 40px rgba(0,197,110,.25); animation:orbBreath 2.6s ease-in-out infinite; pointer-events:none}
.vip-login .hero-orb img{width:85%; height:85%; border-radius:50%; object-fit:cover; filter:drop-shadow(0 0 16px rgba(0,197,110,.55))}
@keyframes orbSpin{to{transform:rotate(360deg)}} @keyframes orbBreath{50%{box-shadow:inset 0 0 28px rgba(0,197,110,.35), 0 0 54px rgba(0,197,110,.35)}}

/* OTP */
.vip-login .otp-wrap{display:grid; grid-template-columns:repeat(9,1fr); gap:.6rem}
.vip-login .otp{width:100%; height:52px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0e1411; color:#fff;
  text-align:center; font:700 22px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.vip-login .otp:focus{outline:none; border-color:var(--emerald-2); box-shadow:0 0 0 4px rgba(0,197,110,.15)}

/* botões */
.vip-login .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  height:64px; min-height:64px; padding:0 38px;
  border-radius:18px;
  font-size:1.32rem; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  background:linear-gradient(90deg,#0f1512 0%,#00c56e 100%);
  color:#eafff6;
  box-shadow:0 8px 32px #00c56e33,0 2px 0 #27e18f;
  border:1.5px solid #00c56e;
  text-shadow:0 2px 12px #00c56e33;
  transition:background .18s, box-shadow .18s, color .18s, transform .08s;
}
.vip-login .btn:hover, .vip-login .btn:focus {
  background:linear-gradient(90deg,#27e18f 0%,#00c56e 100%);
  color:#fff;
  box-shadow:0 12px 40px #00c56e55,0 2px 0 #27e18f;
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.08) saturate(1.1);
}
.vip-login .btn:active {
  transform:translateY(1px) scale(0.98);
  filter:brightness(.98);
}
.vip-login .btn-primary{background:linear-gradient(90deg,#1a201d,#101512); color:#e9fff6; border:1px solid rgba(0,197,110,.6); box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 0 12px rgba(0,197,110,.12)}
.vip-login .btn[disabled]{opacity:.6; filter:grayscale(20%); cursor:not-allowed}
.vip-login .wa-btn{background:linear-gradient(90deg,#25d366,#1fb65a)!important;color:#03150a;border:none;box-shadow:0 10px 18px rgba(31,182,90,.35)!important}

/* botão secundário (link para o Telegram) */
.vip-login .btn-secondary{
  background:transparent;
  color:#b9ffe3;
  border:1px solid rgba(0,197,110,.45);
  box-shadow:inset 0 0 12px rgba(0,197,110,.08);
}
.vip-login .btn-secondary:hover{
  background:rgba(0,197,110,.06);
  border-color:rgba(0,197,110,.70);
}

/* CTA Telegram */
.vip-login .btn-telegram{
  background:linear-gradient(90deg,#2a2f2c,#101512);
  color:#bfffe9;
  border:1px solid rgba(0,197,110,.75);
  box-shadow:0 12px 22px rgba(0,0,0,.35), inset 0 0 14px rgba(0,197,110,.14);
}
.vip-login .btn-telegram:hover{
  background:linear-gradient(90deg,#1d2320,#0d130f);
  border-color:rgba(0,197,110,.95);
}

/* overlay loading */
.vip-login .overlay{position:fixed; inset:0; background:rgba(7,7,8,.6); backdrop-filter: blur(4px); display:none; align-items:center; justify-content:center; z-index:40}
.vip-login .overlay.show{display:flex}
.vip-login .spinner{width:46px; height:46px; border:4px solid rgba(255,255,255,.18); border-top-color:var(--emerald); border-radius:999px; animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.vip-login .small-note{color:rgba(255,255,255,.62); font-size:12px}

/* Acessibilidade */
.vip-login .btn:focus-visible,
.vip-login .btn-secondary:focus-visible,
.vip-login .btn-primary:focus-visible {
  outline: 2px solid rgba(0,197,110,.6);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(0,197,110,.12);
}

/* Feedback no clique */
.vip-login .btn:active,
.vip-login .btn-primary:active,
.vip-login .btn-secondary:active { transform: translateY(1px); filter: brightness(0.98); }

/* Anti-print básico */
@media print { .vip-login { display: none; } }

/* iOS extra */
.vip-login { -webkit-touch-callout: none; }