/* =================================================================
   JETFLIX BOT — PREMIUM LAYER · SaaS MILIONÁRIO
   Camada de visual premium que ESTENDE style.css.
   Não quebra nada existente — apenas eleva o nível visual.
   ================================================================= */

:root{
  /* paleta premium estendida */
  --neon-green:#39ff14;
  --neon-cyan:#00fff0;
  --neon-blue:#3a86ff;
  --neon-purple:#bf00ff;
  --neon-pink:#ff10f0;
  --jet-red:#ff1744;
  --jet-orange:#ff8a00;
  --jet-gold:#ffd700;
  --jet-platinum:#e6f1ff;
  --jet-black:#02050d;
  --jet-deep:#04081a;

  /* gradientes premium */
  --grad-jet:linear-gradient(135deg, #ff1744 0%, #ff8a00 50%, #ffd700 100%);
  --grad-hacker:linear-gradient(135deg, #39ff14 0%, #00fff0 50%, #3a86ff 100%);
  --grad-money:linear-gradient(135deg, #10f5a0 0%, #ffd700 100%);
  --grad-cyber:linear-gradient(135deg, #bf00ff 0%, #ff10f0 50%, #ff1744 100%);
  --grad-deep:linear-gradient(180deg, #050a1a 0%, #02050d 100%);
  --grad-card:linear-gradient(155deg, rgba(15,22,42,.88) 0%, rgba(8,14,28,.94) 100%);
  --grad-glass:linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%);

  /* glows premium */
  --glow-jet:0 0 24px rgba(255,23,68,.5), 0 0 60px rgba(255,138,0,.25);
  --glow-neon:0 0 24px rgba(57,255,20,.55), 0 0 60px rgba(0,255,240,.2);
  --glow-cyber:0 0 24px rgba(191,0,255,.5), 0 0 60px rgba(255,16,240,.2);
  --glow-gold:0 0 24px rgba(255,215,0,.45), 0 0 60px rgba(255,138,0,.2);
  --glow-soft:0 12px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;

  /* sombras 3D premium */
  --shadow-elev-1:0 4px 14px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-elev-2:0 12px 36px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
  --shadow-elev-3:0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  --shadow-elev-4:0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(0,229,255,.12) inset, 0 0 80px rgba(0,229,255,.1);
}

/* ===== APRIMORAMENTO DO BACKGROUND ===== */
body::before{
  background:
    radial-gradient(ellipse 70% 50% at 12% 8%, rgba(0,229,255,.22) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 88% 92%, rgba(191,0,255,.20) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(16,245,160,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 25% at 50% 0%, rgba(255,138,0,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-0) 100%) !important;
}

/* ===== AURORA EFFECT (camada extra animada) ===== */
.aurora-bg{
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  overflow:hidden;
}
.aurora-bg::before, .aurora-bg::after{
  content:''; position:absolute;
  width:60vw; height:60vw; min-width:600px; min-height:600px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.18;
  animation:auroraDrift 22s ease-in-out infinite;
}
.aurora-bg::before{
  background:radial-gradient(circle, rgba(0,229,255,.7), transparent 60%);
  top:-20%; left:-15%;
}
.aurora-bg::after{
  background:radial-gradient(circle, rgba(191,0,255,.6), transparent 60%);
  bottom:-20%; right:-15%;
  animation-delay:-11s;
}
@keyframes auroraDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(8vw,-4vw) scale(1.1); }
  66%{ transform:translate(-6vw,6vw) scale(.95); }
}

/* ===== KPI CARDS PREMIUM ===== */
.kpi{
  background:var(--grad-card) !important;
  border:1px solid rgba(0,229,255,.15) !important;
  position:relative;
  overflow:hidden;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.kpi::after{
  content:''; position:absolute;
  bottom:-50%; left:-50%;
  width:200%; height:200%;
  background:conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    rgba(0,229,255,.18) 60deg,
    transparent 120deg,
    rgba(191,0,255,.15) 180deg,
    transparent 240deg,
    rgba(57,255,20,.15) 300deg,
    transparent 360deg);
  animation:spin 14s linear infinite;
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
  z-index:0;
}
.kpi:hover::after{ opacity:.5; }
.kpi:hover{
  transform:translateY(-4px) scale(1.02);
  border-color:rgba(0,229,255,.45) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 50px rgba(0,229,255,.2);
}
.kpi > *{ position:relative; z-index:1; }
.kpi b{
  font-size:34px !important;
  background:linear-gradient(135deg, #fff 0%, var(--brand) 50%, var(--brand-2) 100%) !important;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  filter:drop-shadow(0 2px 8px rgba(0,229,255,.3));
}
.kpi.money b{
  background:linear-gradient(135deg, #fff 0%, var(--money) 50%, var(--jet-gold) 100%) !important;
  -webkit-background-clip:text;
  background-clip:text;
}
.kpi.purple b{
  background:linear-gradient(135deg, #fff 0%, var(--neon-purple) 50%, var(--neon-pink) 100%) !important;
  -webkit-background-clip:text;
  background-clip:text;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== HOLO CARDS (cards principais com efeito holográfico) ===== */
.card,.module{
  background:var(--grad-card) !important;
  box-shadow:var(--shadow-elev-2);
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.card::after,.module::after{
  content:''; position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(0,229,255,.4) 0%,
    rgba(191,0,255,.25) 30%,
    transparent 50%,
    rgba(16,245,160,.25) 70%,
    rgba(0,229,255,.4) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.card:hover::after,.module:hover::after{ opacity:.75; }
.card:hover,.module:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-elev-3), 0 0 40px rgba(0,229,255,.12);
}

/* ===== BUTTONS PREMIUM ===== */
button.primary,.btn.primary{
  background:linear-gradient(135deg, var(--jet-red) 0%, var(--jet-orange) 50%, var(--jet-gold) 100%) !important;
  background-size:200% 200% !important;
  animation:gradientShift 6s ease infinite;
  font-weight:800 !important;
  letter-spacing:.04em;
  box-shadow:
    0 8px 20px rgba(255,23,68,.35),
    0 0 0 1px rgba(255,255,255,.15) inset,
    0 1px 0 rgba(255,255,255,.2) inset;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  color:#fff !important;
}
button.primary:hover,.btn.primary:hover{
  box-shadow:
    0 14px 40px rgba(255,23,68,.55),
    0 0 60px rgba(255,138,0,.35),
    0 0 0 1px rgba(255,255,255,.2) inset !important;
  filter:brightness(1.1) saturate(1.15);
  transform:translateY(-2px) scale(1.01);
}
button.money,.btn.money{
  background:linear-gradient(135deg, #10f5a0 0%, #00fff0 50%, #ffd700 100%) !important;
  background-size:200% 200% !important;
  animation:gradientShift 6s ease infinite;
  color:#001810 !important;
  font-weight:800;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
@keyframes gradientShift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* shine effect on primary buttons */
button.primary::before,.btn.primary::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
  transform:translateX(-100%);
  transition:transform .8s ease;
  pointer-events:none;
}
button.primary:hover::before,.btn.primary:hover::before{ transform:translateX(100%); }

/* ===== SIDEBAR PREMIUM ===== */
.sidebar{
  background:linear-gradient(180deg, rgba(2,5,16,.96) 0%, rgba(4,8,24,.97) 100%) !important;
  border-right:1px solid rgba(0,229,255,.12) !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
}
.sidebar::before{
  content:''; position:absolute; top:0; right:-1px; bottom:0; width:1px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(0,229,255,.4) 20%,
    rgba(191,0,255,.3) 50%,
    rgba(16,245,160,.3) 80%,
    transparent 100%);
  opacity:.6;
  pointer-events:none;
}
.sidebar .logo-row{
  position:relative;
}
.sidebar .logo-row::after{
  content:'';
  position:absolute;
  left:8px; right:8px; bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity:.4;
}

.nav{
  border-radius:10px !important;
}
.nav:hover{
  background:linear-gradient(90deg, rgba(0,229,255,.08), rgba(0,229,255,.02)) !important;
  transform:translateX(2px);
}
.nav.active{
  background:linear-gradient(90deg,
    rgba(255,23,68,.15) 0%,
    rgba(255,138,0,.08) 50%,
    transparent 100%) !important;
  color:#fff !important;
  font-weight:600;
}
.nav.active::before{
  background:linear-gradient(180deg, var(--brand), var(--brand-2)) !important;
  box-shadow:0 0 16px var(--brand), 0 0 32px rgba(255,138,0,.3) !important;
  width:3px !important;
  transform:scaleY(1) !important;
}

/* ===== USER AVATAR PREMIUM ===== */
.user-avatar{
  background:var(--grad-jet) !important;
  background-size:200% 200% !important;
  animation:gradientShift 8s ease infinite;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08),
    0 0 24px rgba(255,23,68,.45),
    0 4px 12px rgba(0,0,0,.4) !important;
  font-family:var(--font-display) !important;
  font-weight:900 !important;
  font-size:15px !important;
  letter-spacing:0;
}
.user-avatar::after{
  content:''; position:absolute;
  width:10px; height:10px; border-radius:50%;
  background:var(--money); border:2px solid var(--bg-0);
  bottom:-2px; right:-2px;
  box-shadow:0 0 8px var(--money);
  animation:livePulse 1.8s ease-in-out infinite;
}
.user-avatar{ position:relative; }

/* ===== TOPBAR PREMIUM ===== */
.topbar{
  background:linear-gradient(180deg, rgba(4,8,18,.85) 0%, rgba(4,8,18,.55) 100%) !important;
  border-bottom:1px solid rgba(0,229,255,.12) !important;
  position:relative;
}
.topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(0,229,255,.4) 30%, rgba(255,23,68,.4) 50%, rgba(191,0,255,.4) 70%, transparent 100%);
  pointer-events:none;
}
.topbar h2{
  background:linear-gradient(135deg, #fff 0%, var(--brand) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 12px rgba(0,229,255,.3));
}

/* ===== LOGIN CARD PREMIUM ===== */
.login-card{
  background:var(--grad-card) !important;
  box-shadow:var(--shadow-elev-4) !important;
}
.login-card::before{
  background:linear-gradient(135deg,
    rgba(0,229,255,.6) 0%,
    rgba(191,0,255,.45) 30%,
    rgba(16,245,160,.3) 60%,
    rgba(255,138,0,.4) 100%) !important;
  opacity:.85 !important;
  animation:borderRotate 8s linear infinite;
}
@keyframes borderRotate{
  0%{ filter:hue-rotate(0deg); }
  100%{ filter:hue-rotate(360deg); }
}
.login-card .logo.big{
  background:linear-gradient(135deg, var(--jet-red) 0%, var(--jet-orange) 50%, var(--jet-gold) 100%) !important;
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:gradientShift 6s ease infinite;
  filter:drop-shadow(0 0 24px rgba(255,23,68,.4));
}

/* ===== INPUT PREMIUM ===== */
input,textarea,select{
  background:rgba(2,5,18,.85) !important;
  border:1px solid rgba(0,229,255,.15) !important;
  transition:all .3s ease !important;
}
input:hover,textarea:hover,select:hover{
  border-color:rgba(0,229,255,.3) !important;
}
input:focus,textarea:focus,select:focus{
  background:rgba(2,5,18,.95) !important;
  border-color:var(--brand) !important;
  box-shadow:
    0 0 0 4px rgba(0,229,255,.12),
    0 0 28px rgba(0,229,255,.25),
    0 0 0 1px rgba(0,229,255,.4) !important;
}

/* ===== PILL PREMIUM ===== */
.pill{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-shadow:0 0 8px currentColor;
}
.pill::before{ box-shadow:0 0 8px currentColor, 0 0 16px currentColor !important; }

/* ===== JARVIS HUD APRIMORADO ===== */
.jarvis-hud{
  background:linear-gradient(135deg,
    rgba(2,8,24,.92) 0%,
    rgba(7,18,42,.85) 50%,
    rgba(2,8,24,.92) 100%) !important;
  border:1px solid rgba(0,229,255,.3) !important;
  box-shadow:
    0 0 40px rgba(0,229,255,.1),
    0 8px 32px rgba(0,0,0,.4),
    inset 0 0 24px rgba(0,229,255,.04) !important;
}
.jarvis-hud-cell{
  background:linear-gradient(135deg, rgba(7,16,38,.7) 0%, rgba(2,8,24,.85) 100%) !important;
  border:1px solid rgba(124,58,237,.28) !important;
  transition:all .25s;
}
.jarvis-hud-cell:hover{
  border-color:rgba(0,229,255,.5) !important;
  background:linear-gradient(135deg, rgba(0,229,255,.06) 0%, rgba(7,16,38,.85) 100%) !important;
  transform:translateY(-2px);
}

/* ===== STATUS STRIP PREMIUM ===== */
.status-strip{
  background:linear-gradient(90deg,
    rgba(0,229,255,.08) 0%,
    rgba(191,0,255,.06) 50%,
    transparent 100%) !important;
  border:1px solid rgba(0,229,255,.15) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* ===== EMPTY STATES BONITOS ===== */
.empty-state{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:48px 24px; gap:18px;
  text-align:center;
}
.empty-state-icon{
  width:80px; height:80px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(0,229,255,.12), rgba(191,0,255,.08));
  border:2px solid rgba(0,229,255,.25);
  display:grid; place-items:center;
  font-size:36px;
  color:var(--brand);
  position:relative;
  animation:floatY 4s ease-in-out infinite;
  box-shadow:0 0 32px rgba(0,229,255,.18);
}
.empty-state-icon::after{
  content:''; position:absolute; inset:-8px;
  border-radius:50%;
  border:1px dashed rgba(0,229,255,.3);
  animation:rotate 14s linear infinite;
}
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
.empty-state b{
  font-family:var(--font-display);
  font-size:18px;
  color:var(--text);
  letter-spacing:.04em;
  margin-top:4px;
}
.empty-state p{
  color:var(--muted);
  font-size:13.5px;
  line-height:1.6;
  max-width:380px;
}
.empty-state .empty-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:4px;
}

/* ===== TUTORIAL TOOLTIP / HINT ===== */
.hint-bubble{
  position:relative;
  background:linear-gradient(135deg, rgba(0,229,255,.12), rgba(191,0,255,.08));
  border:1px solid rgba(0,229,255,.3);
  border-radius:14px;
  padding:14px 18px;
  margin:12px 0;
  font-size:13.5px;
  color:var(--text-soft);
  line-height:1.6;
  display:flex; gap:12px; align-items:flex-start;
}
.hint-bubble::before{
  content:'💡';
  font-size:20px;
  filter:drop-shadow(0 0 8px var(--gold));
}
.hint-bubble b{ color:var(--text); display:block; margin-bottom:2px; }

/* ===== SOUND TOGGLE ===== */
.sound-toggle{
  position:fixed;
  bottom:18px; left:18px;
  width:42px; height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(2,8,24,.9), rgba(7,18,42,.85));
  border:1px solid rgba(0,229,255,.35);
  display:grid; place-items:center;
  cursor:pointer;
  z-index:60;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--brand);
  font-size:16px;
  transition:all .25s;
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 24px rgba(0,229,255,.1);
}
.sound-toggle:hover{
  border-color:var(--brand);
  transform:scale(1.1);
  box-shadow:0 12px 32px rgba(0,229,255,.3);
}
.sound-toggle.muted{
  color:var(--muted);
  border-color:rgba(255,255,255,.08);
}
.sound-toggle.muted::after{
  content:''; position:absolute;
  width:80%; height:2px;
  background:var(--danger);
  transform:rotate(-45deg);
  border-radius:1px;
  box-shadow:0 0 8px var(--danger);
}
@media (max-width:980px){
  .sound-toggle{ bottom:14px; left:14px; width:36px; height:36px; font-size:14px; }
}

/* ===== RIPPLE EFFECT ===== */
.ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  transform:scale(0);
  animation:ripple .6s ease-out;
  pointer-events:none;
}
@keyframes ripple{
  to{ transform:scale(4); opacity:0; }
}

/* ===== PLAN CARDS PREMIUM ===== */
.plan-card{
  background:var(--grad-card) !important;
  position:relative;
  overflow:hidden;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.plan-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(0,229,255,.18), transparent 60%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.plan-card:hover::before{ opacity:1; }
.plan-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 24px 64px rgba(0,229,255,.25), 0 0 0 1px rgba(0,229,255,.3) inset !important;
  border-color:rgba(0,229,255,.5) !important;
}
.plan-card.active{
  background:linear-gradient(155deg, rgba(0,229,255,.12) 0%, rgba(191,0,255,.06) 50%, rgba(15,22,42,.95) 100%) !important;
  border:1px solid var(--brand) !important;
  box-shadow:
    0 0 0 2px rgba(0,229,255,.3),
    0 24px 64px rgba(0,229,255,.25),
    0 0 80px rgba(0,229,255,.2) !important;
  transform:translateY(-4px) scale(1.03);
}
.plan-card.active::before{ opacity:1; }
.plan-card strong{
  background:linear-gradient(135deg, var(--jet-red), var(--jet-orange), var(--money)) !important;
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  animation:gradientShift 5s ease infinite;
  filter:drop-shadow(0 0 12px rgba(255,138,0,.3));
  font-size:36px !important;
}
.plan-card .btn,.plan-card .primary{ margin-top:auto; }

/* ===== HERO LANDING PREMIUM ===== */
.hero-title{
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.4));
}
.grad-brand{
  background:linear-gradient(90deg, var(--jet-red) 0%, var(--jet-orange) 50%, var(--jet-gold) 100%) !important;
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:gradientShift 6s ease infinite;
}
.grad-money{
  background:linear-gradient(90deg, var(--money) 0%, var(--neon-cyan) 50%, var(--jet-gold) 100%) !important;
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:gradientShift 6s ease infinite;
}

.hud-screen{
  background:linear-gradient(155deg,
    rgba(15,22,42,.95) 0%,
    rgba(8,14,32,.92) 50%,
    rgba(15,22,42,.95) 100%) !important;
  border:1px solid rgba(0,229,255,.3) !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,229,255,.15) inset,
    0 0 60px rgba(0,229,255,.2) !important;
}
.hud-screen::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 3px,
    rgba(0,229,255,.025) 3px,
    rgba(0,229,255,.025) 4px
  );
  pointer-events:none;
  border-radius:inherit;
}
.hud-grid-mini b{
  background:linear-gradient(135deg, var(--brand), var(--neon-cyan)) !important;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  filter:drop-shadow(0 0 8px rgba(0,229,255,.4));
  font-weight:800 !important;
}

/* ===== KPI STRIP LANDING ===== */
.kpi-cell{
  background:var(--grad-card) !important;
  border:1px solid rgba(0,229,255,.15) !important;
  transition:all .3s;
}
.kpi-cell:hover{
  border-color:var(--brand) !important;
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,229,255,.18);
}
.kpi-cell b{
  background:var(--grad-jet) !important;
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  animation:gradientShift 6s ease infinite;
  filter:drop-shadow(0 0 12px rgba(255,138,0,.3));
}

/* ===== FEATURE CARDS PREMIUM ===== */
.feat{
  background:var(--grad-card) !important;
  border:1px solid rgba(0,229,255,.12) !important;
  position:relative;
  overflow:hidden;
}
.feat::before{
  content:''; position:absolute;
  top:-50%; right:-50%;
  width:200px; height:200px;
  background:radial-gradient(circle, rgba(0,229,255,.15), transparent 70%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.feat:hover::before{ opacity:1; }
.feat:hover{
  border-color:var(--brand) !important;
  box-shadow:0 24px 60px rgba(0,229,255,.18) !important;
}
.feat-ico{
  position:relative;
  overflow:hidden;
}
.feat-ico::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  opacity:0; transition:opacity .3s;
}
.feat:hover .feat-ico::after{ opacity:1; }

/* ===== STACK CHIPS PREMIUM ===== */
.stack-chip{
  background:linear-gradient(135deg, rgba(15,22,42,.7), rgba(8,14,28,.85)) !important;
  border:1px solid rgba(0,229,255,.18) !important;
  transition:all .25s;
}
.stack-chip:hover{
  border-color:var(--brand) !important;
  background:linear-gradient(135deg, rgba(0,229,255,.1), rgba(191,0,255,.06)) !important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,229,255,.2);
}

/* ===== ONBOARD CARD PREMIUM ===== */
.onboard-card{
  background:var(--grad-card) !important;
  box-shadow:var(--shadow-elev-4) !important;
}
.step-bar .step.active b{
  background:var(--grad-jet) !important;
  background-size:200% 200%;
  animation:gradientShift 4s ease infinite;
  box-shadow:0 0 24px rgba(255,23,68,.55), 0 0 48px rgba(255,138,0,.25) !important;
}
.step-bar .step.done b{
  background:linear-gradient(135deg, rgba(16,245,160,.25), rgba(57,255,20,.15)) !important;
  border-color:var(--money) !important;
  box-shadow:0 0 12px rgba(16,245,160,.4);
}

/* ===== ONBOARD HELP PREMIUM ===== */
.onboard-help{
  background:linear-gradient(135deg, rgba(0,229,255,.05), rgba(191,0,255,.03)) !important;
  border:1px solid rgba(0,229,255,.18) !important;
  transition:all .2s;
}
.onboard-help:hover{ border-color:rgba(0,229,255,.35) !important; }
.onboard-help[open]{
  background:linear-gradient(135deg, rgba(0,229,255,.08), rgba(191,0,255,.04)) !important;
  border-color:rgba(0,229,255,.35) !important;
}

/* ===== TOAST PREMIUM ===== */
.toast{
  background:linear-gradient(135deg,
    rgba(10,18,42,.97) 0%,
    rgba(7,13,34,.97) 100%) !important;
  border:1px solid rgba(0,229,255,.4) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,.55),
    0 0 40px rgba(0,229,255,.25),
    0 0 0 1px rgba(255,255,255,.05) inset !important;
}
.toast.ok{ border-color:rgba(16,245,160,.5) !important; }
.toast.ok::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--money); box-shadow:0 0 12px var(--money);
}
.toast.bad::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--danger); box-shadow:0 0 12px var(--danger);
}

/* ===== MODAL PREMIUM ===== */
.modal{
  background:rgba(2,5,16,.85) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}
.modal-card{
  background:var(--grad-card) !important;
  border:1px solid rgba(0,229,255,.3) !important;
  box-shadow:
    0 60px 160px rgba(0,0,0,.7),
    0 0 120px rgba(0,229,255,.15),
    0 0 0 1px rgba(255,255,255,.05) inset !important;
}

/* ===== TABLE PREMIUM ===== */
table th{
  background:linear-gradient(180deg, rgba(0,229,255,.08), rgba(0,229,255,.02)) !important;
  border-bottom:2px solid rgba(0,229,255,.3) !important;
  text-shadow:0 0 8px rgba(0,229,255,.3);
}
table tr{ transition:background .15s; }
table tr:hover td{ background:linear-gradient(90deg, rgba(0,229,255,.06), transparent) !important; }

/* ===== PROGRESS BAR PREMIUM (USAGE) ===== */
.bar > div{
  background:rgba(0,0,0,.6) !important;
  border:1px solid rgba(0,229,255,.15) !important;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
.bar i{
  background:linear-gradient(90deg,
    var(--brand) 0%,
    var(--brand-2) 50%,
    var(--money) 100%) !important;
  background-size:300% 100% !important;
  box-shadow:
    0 0 12px rgba(0,229,255,.5),
    0 0 24px rgba(255,138,0,.3) !important;
  animation:shimmer 3s linear infinite, glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.25); }
}

/* ===== STATUS DOT EXTRA GLOW ===== */
.brand-mark .dot,
.brand-dot,
.status-dot::before{
  box-shadow:
    0 0 0 4px rgba(16,245,160,.15),
    0 0 12px var(--money),
    0 0 24px var(--money) !important;
}

/* ===== TICKER PREMIUM ===== */
.ticker{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(0,229,255,.04) 30%,
    rgba(191,0,255,.04) 70%,
    transparent 100%) !important;
  border-color:rgba(0,229,255,.15) !important;
}

/* ===== BOOT SCREEN ENHANCED ===== */
.boot-logo{
  letter-spacing:10px !important;
  background:linear-gradient(135deg, var(--jet-red), var(--jet-orange), var(--jet-gold)) !important;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  text-shadow:0 0 60px rgba(255,23,68,.4) !important;
  filter:drop-shadow(0 0 24px rgba(255,138,0,.4));
}

/* ===== LANDING NAV PREMIUM ===== */
.land-nav{
  background:linear-gradient(180deg, rgba(2,5,14,.85), rgba(2,5,14,.5)) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
  border-bottom:1px solid rgba(0,229,255,.15) !important;
  box-shadow:0 4px 24px rgba(0,0,0,.3);
}
.land-nav::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.5), rgba(191,0,255,.5), transparent);
  pointer-events:none;
}

/* ===== TUTORIAL CHECKLIST CARD ===== */
.checklist-card{
  background:var(--grad-card);
  border:1px solid rgba(0,229,255,.15);
  border-radius:16px;
  padding:20px 22px;
  margin-bottom:14px;
  position:relative;
  overflow:hidden;
  transition:all .25s;
}
.checklist-card::before{
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--muted), var(--muted));
  transition:background .3s;
}
.checklist-card.done::before{
  background:linear-gradient(180deg, var(--money), var(--neon-green));
  box-shadow:0 0 16px var(--money);
}
.checklist-card.warn::before{ background:linear-gradient(180deg, var(--warn), var(--brand-2)); }
.checklist-card:hover{ border-color:rgba(0,229,255,.35); transform:translateX(2px); }
.checklist-card .clh{
  display:flex; align-items:center; gap:12px;
  margin-bottom:6px;
}
.checklist-card .clh b{
  font-family:var(--font-display);
  font-size:14px; letter-spacing:.04em;
  color:var(--text);
}
.checklist-card .clh .check-mark{
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px; font-weight:800;
  flex-shrink:0;
}
.checklist-card.done .check-mark{
  background:linear-gradient(135deg, var(--money), var(--neon-green));
  color:#001810;
  border-color:transparent;
  box-shadow:0 0 12px rgba(16,245,160,.4);
}
.checklist-card p{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.6;
  margin:2px 0 8px;
}
.checklist-card .cl-actions{
  display:flex; gap:8px; flex-wrap:wrap;
}
.checklist-card .cl-actions .btn,
.checklist-card .cl-actions button{
  padding:6px 12px;
  font-size:12px;
}

/* ===== SCROLLBAR PREMIUM ===== */
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,
    rgba(0,229,255,.35),
    rgba(191,0,255,.3),
    rgba(16,245,160,.35)) !important;
  border-radius:99px;
  box-shadow:inset 0 0 4px rgba(0,229,255,.3);
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,
    rgba(0,229,255,.7),
    rgba(191,0,255,.55),
    rgba(16,245,160,.7)) !important;
}

/* ===== SECTION HEAD COM GLOW ===== */
.section-head h3{
  text-shadow:0 0 24px rgba(0,229,255,.15);
}

/* ===== TUTORIAL STEPS BADGE ===== */
.step-num{
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--grad-jet);
  background-size:200% 200%;
  animation:gradientShift 5s ease infinite;
  color:#fff; font-family:var(--font-display);
  font-weight:900; font-size:13px;
  box-shadow:0 0 16px rgba(255,23,68,.4);
  flex-shrink:0;
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width:980px){
  .topbar h2{ font-size:22px !important; }
  .kpi b{ font-size:26px !important; }
  .login-card .logo.big{ font-size:30px !important; }
}
@media (max-width:640px){
  .kpi b{ font-size:22px !important; }
  .plan-card strong{ font-size:28px !important; }
  .hero-title{ font-size:34px !important; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  .aurora-bg::before, .aurora-bg::after,
  .user-avatar, .login-card::before,
  .boot-logo, .plan-card strong,
  button.primary, button.money{
    animation:none !important;
  }
}

/* ===== FOCUS RING PREMIUM ===== */
*:focus-visible{
  outline:2px solid var(--brand) !important;
  outline-offset:3px !important;
  border-radius:6px;
  box-shadow:0 0 0 6px rgba(0,229,255,.15) !important;
}

/* ===== TEXT GRADIENT UTILITIES ===== */
.text-grad-jet{ background:var(--grad-jet); background-size:200% 200%; animation:gradientShift 6s ease infinite; -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-grad-money{ background:var(--grad-money); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-grad-cyber{ background:var(--grad-cyber); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== BADGE PREMIUM ===== */
.badge.on{
  background:linear-gradient(135deg, rgba(16,245,160,.15), rgba(57,255,20,.08)) !important;
  border-color:rgba(16,245,160,.4) !important;
  box-shadow:0 0 12px rgba(16,245,160,.25);
  text-shadow:0 0 8px rgba(16,245,160,.5);
}
.badge.off{
  background:linear-gradient(135deg, rgba(255,61,110,.15), rgba(255,23,68,.08)) !important;
  border-color:rgba(255,61,110,.4) !important;
}

/* ===== PARTICLES PREMIUM (canvas opacity boost) ===== */
#bgCanvas{ opacity:.55 !important; }

/* ===== EXTRA HOVER POLISH ===== */
button:hover, .btn:hover{
  transition:all .22s cubic-bezier(.4,0,.2,1) !important;
}

/* ===== BLINK CURSOR PREMIUM ===== */
.hud-term .caret{
  text-shadow:0 0 8px var(--brand);
}

/* ===== FAB / FLOATING BTN ===== */
.fab{
  position:fixed;
  bottom:18px; right:18px;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--grad-jet);
  background-size:200% 200%;
  animation:gradientShift 4s ease infinite;
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  z-index:80;
  display:grid; place-items:center;
  box-shadow:
    0 12px 32px rgba(255,23,68,.45),
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 0 48px rgba(255,138,0,.25);
  transition:all .3s;
}
.fab:hover{
  transform:scale(1.1) rotate(8deg);
  box-shadow:
    0 16px 48px rgba(255,23,68,.6),
    0 0 80px rgba(255,138,0,.35);
}
.fab:active{ transform:scale(.95); }
@media (max-width:980px){
  .fab{ display:none; }
}

/* ===== CHECKOUT SUMMARY ===== */
.checkout-summary{
  background:linear-gradient(155deg, rgba(15,22,42,.92), rgba(8,14,32,.95));
  border:1px solid rgba(16,245,160,.3);
  border-radius:18px;
  padding:24px 28px;
  margin:16px 0;
  position:relative;
  overflow:hidden;
}
.checkout-summary::before{
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--money), var(--gold), var(--money));
  background-size:200% 100%;
  animation:shimmer 3s linear infinite;
  box-shadow:0 0 12px var(--money);
}
.checkout-summary .line{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
  font-size:13.5px;
}
.checkout-summary .line:last-child{ border-bottom:none; }
.checkout-summary .line b{ color:var(--text); }
.checkout-summary .total{
  margin-top:8px;
  padding-top:14px;
  border-top:1px solid rgba(0,229,255,.25);
  font-size:18px;
  font-family:var(--font-display);
}
.checkout-summary .total b{
  background:var(--grad-money);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  font-size:24px;
}

/* ===== SUCCESS BANNER ===== */
.success-banner{
  background:linear-gradient(135deg, rgba(16,245,160,.15), rgba(57,255,20,.08));
  border:1px solid rgba(16,245,160,.4);
  border-radius:16px;
  padding:18px 22px;
  margin:12px 0;
  display:flex; align-items:center; gap:14px;
  position:relative;
  overflow:hidden;
}
.success-banner::before{
  content:''; position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 50%, rgba(16,245,160,.18), transparent 60%);
  pointer-events:none;
}
.success-banner .ico{
  font-size:32px;
  filter:drop-shadow(0 0 12px var(--money));
  position:relative;
}
.success-banner b{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--text);
  letter-spacing:.04em;
  display:block;
}
.success-banner p{ color:var(--text-soft); font-size:13px; margin:2px 0 0; }

/* ===== ANIMATION VARIANT — FLOAT-IN ===== */
@keyframes floatIn{
  from{ opacity:0; transform:translateY(20px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.tab.active > *{ animation:floatIn .5s cubic-bezier(.34,1.56,.64,1) both !important; }

/* ===== BG NOISE TEXTURE ===== */
body{ position:relative; }
body > .noise{
  position:fixed; inset:0; pointer-events:none;
  z-index:-1; opacity:.025;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* ===== FINAL POLISH ===== */
.logo, .brand-logo, .text-grad-jet{
  letter-spacing:.06em;
}