/* ===== CUSTOM ZEROVYPER CURSOR PACK INTEGRATION (100% COMPLETE & BULLETPROOF) ===== */
* {
  cursor: url('cursor/pointer.cur'), auto;
}
input, textarea, select, button, a {
  cursor: url('cursor/pointer.cur'), auto;
}
/* beam.cur — Text inputs selection */
input[type="text"], input[type="password"], input[type="email"], [contenteditable="true"] {
  cursor: url('cursor/beam.cur'), text !important;
}
/* link.cur — Interactive buttons and navigation */
a, button, .key, .m-key, .nav-item, .sidebar-brand, .topbar-section-title, .chpass-btn, .chpass-save, .chpass-cancel, #chpass-send-code-btn, .scroll-top, .terms-modal-close, .expired-back-btn, .splash-logo, .sidebar-logo-wrap, #music-toggle, #music-mute {
  cursor: url('cursor/link.cur'), pointer !important;
}
/* alternate.cur — Secondary / Alternate buttons and controls */
.lang-btn, .btn-sm, .mobile-nav-item {
  cursor: url('cursor/alternate.cur'), pointer !important;
}
/* handwriting.cur — Textarea code editor keys config */
textarea, .ini-editor, code, pre {
  cursor: url('cursor/handwriting.cur'), vertical-text !important;
}
/* person.cur — User avatar and Profile settings */
.user-avatar-top, #user-avatar, .user-profile, .avatar {
  cursor: url('cursor/person.cur'), pointer !important;
}
/* pin.cur — Pinned / Active navigation tabs */
.nav-item.active, .mobile-nav-item.active {
  cursor: url('cursor/pin.cur'), pointer !important;
}
/* precision.cur — Precision targeting crosshair during key mapping */
.bind-row.assigning, .key.assigning, .m-key.assigning, .assign-banner, .assigning *, body.assigning-active, body.assigning-active * {
  cursor: url('cursor/precision.cur'), crosshair !important;
}
/* help.cur — Support center and User Guide tooltips */
.guide-step, #sec-guia *, #sec-soporte *, .topbar-notif, [title], [data-tooltip] {
  cursor: url('cursor/help.cur'), help !important;
}
/* unavailable.cur — Blocked features and Expired license sections */
[disabled], .disabled, .btn-none, .btn-sm:disabled, .login-btn:disabled, .expired-box *, #no-license-banner {
  cursor: url('cursor/unavailable.cur'), not-allowed !important;
}
/* busy.ani / working.ani — Busy loading animations */
.splash-screen, .splash-screen *, .splash-overlay, .splash-overlay * {
  cursor: url('cursor/working.ani'), url('cursor/busy.ani'), url('cursor/pointer.cur'), wait !important;
}
/* move.cur — Range sliders and volume controls */
.music-vol, .music-vol-wrap, input[type="range"] {
  cursor: url('cursor/move.cur'), move !important;
}
/* dgn1.cur / dgn2.cur — Interactive borders on Hover cards */
.stat-card:hover {
  cursor: url('cursor/dgn1.cur'), pointer !important;
}
.dash-card:hover {
  cursor: url('cursor/dgn2.cur'), pointer !important;
}
/* horz.cur / vert.cur — Panel dividers and layout separations */
hr, .divider, .topbar {
  cursor: url('cursor/horz.cur'), row-resize !important;
}
.conn-badge, .timeline-item, .sidebar {
  cursor: url('cursor/vert.cur'), col-resize !important;
}

/* Bulletproof Inheritance: Prevents cursor resetting when hovering over texts or icons inside buttons/cards */
a *, button *, .key *, .m-key *, .nav-item *, .lang-btn *, .sidebar-brand *, .topbar-section-title *, .user-avatar-top *, .mobile-nav-item *, .chpass-btn *, .chpass-save *, .chpass-cancel *, #chpass-send-code-btn *, .scroll-top *, .terms-modal-close *, .expired-back-btn *, .stat-card *, .dash-card * {
  cursor: inherit !important;
}

/* Spark particle trail */
.cursor-spark {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 99999;
  transform: translate(-50%, -50%);
  animation: sparkFade .6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes sparkFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0.2);
  }
}

/* ===== SPLASH SCREEN ===== */
.splash-screen{position:fixed;inset:0;z-index:99999;background:#060b18;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s}
.splash-screen.hide{opacity:0;visibility:hidden}
.splash-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.15),rgba(167,139,250,.08),transparent 70%);animation:splashGlow 2s ease infinite;pointer-events:none}
@keyframes splashGlow{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.2);opacity:1}}
.splash-logo{display:flex;gap:4px;margin-bottom:16px;position:relative;z-index:1}
.splash-z,.splash-v{font-size:80px;font-weight:900;font-family:'Inter',sans-serif;line-height:1;animation:splashLetter 1.5s ease infinite}
.splash-z{background:linear-gradient(135deg,#38bdf8,#06b6d4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 30px rgba(56,189,248,.4));animation-delay:0s}
.splash-v{background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px rgba(167,139,250,.4));animation-delay:.15s}
@keyframes splashLetter{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.splash-name{font-size:14px;font-weight:700;color:#475569;letter-spacing:4px;text-transform:uppercase;margin-bottom:24px;position:relative;z-index:1}
.splash-dots{display:flex;gap:8px;position:relative;z-index:1}
.splash-dots span{width:8px;height:8px;border-radius:50%;background:#38bdf8;animation:splashDot 1.2s ease infinite}
.splash-dots span:nth-child(2){animation-delay:.2s}
.splash-dots span:nth-child(3){animation-delay:.4s}
@keyframes splashDot{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

/* ===== ANIMATED BACKGROUND ===== */
.bg-mesh{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-mesh .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.12;animation:orbFloat 20s ease-in-out infinite}
.bg-mesh .orb-1{width:400px;height:400px;background:radial-gradient(circle,#38bdf8,transparent 70%);top:-10%;left:-5%;animation-duration:22s}
.bg-mesh .orb-2{width:350px;height:350px;background:radial-gradient(circle,#a78bfa,transparent 70%);bottom:-10%;right:-5%;animation-duration:18s;animation-delay:-5s}
.bg-mesh .orb-3{width:300px;height:300px;background:radial-gradient(circle,#f472b6,transparent 70%);top:40%;left:50%;animation-duration:25s;animation-delay:-10s}
@keyframes orbFloat{0%{transform:translate(0,0) scale(1)}25%{transform:translate(60px,-40px) scale(1.1)}50%{transform:translate(-30px,50px) scale(.95)}75%{transform:translate(40px,20px) scale(1.05)}100%{transform:translate(0,0) scale(1)}}

/* ===== 1. CURSOR GLOW ===== */
.cursor-glow{position:fixed;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.08),transparent 70%);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .15s ease,top .15s ease,opacity .3s;opacity:0}
.cursor-glow.visible{opacity:1}

/* ===== 2. 3D CARD TILT ===== */
.stat-card,.dash-card,.profile-card,.bindings-panel{transition:all .4s cubic-bezier(.03,.98,.52,.99);transform-style:preserve-3d}
.stat-card:hover,.dash-card:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(10px)}

/* ===== 3. FLOATING PARTICLES ===== */
.particles-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.particle{position:absolute;width:2px;height:2px;background:rgba(255,255,255,.15);border-radius:50%;animation:particleUp linear infinite}
.particle:nth-child(odd){width:3px;height:3px;background:rgba(56,189,248,.2)}
.particle:nth-child(3n){background:rgba(167,139,250,.2)}
.particle:nth-child(5n){width:1px;height:1px;background:rgba(244,114,182,.2)}
@keyframes particleUp{0%{transform:translateY(100vh) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-10vh) translateX(30px);opacity:0}}

/* ===== 4. 3D SECTION ENTRANCE (defined in SECTIONS block below) ===== */
@keyframes cardStagger{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.stat-card{animation:cardStagger .6s cubic-bezier(.25,.46,.45,.94) both}
.stat-card:nth-child(1){animation-delay:.05s}
.stat-card:nth-child(2){animation-delay:.1s}
.stat-card:nth-child(3){animation-delay:.15s}
.stat-card:nth-child(4){animation-delay:.2s}

/* ===== 5. ANIMATED GRADIENT TEXT ===== */
.welcome h2 span,.sidebar-brand h2,.topbar-title{background-size:200% 200%;animation:gradientShift 4s ease infinite}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ===== 6. SIDEBAR GLOW ===== */
.nav-item.active{position:relative;overflow:hidden}
.nav-item.active::after{content:'';position:absolute;top:0;left:-100%;width:200%;height:100%;background:linear-gradient(90deg,transparent,rgba(56,189,248,.06),transparent);animation:navGlow 3s ease infinite}
@keyframes navGlow{0%{left:-100%}100%{left:100%}}
@keyframes auroraFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== 7. LOGIN ENHANCEMENTS ===== */
.login-overlay{overflow:hidden}
.login-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(56,189,248,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.03) 1px,transparent 1px);background-size:60px 60px;animation:gridMove 20s linear infinite;pointer-events:none}
@keyframes gridMove{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}
.login-shape{position:absolute;border:1px solid;border-radius:4px;opacity:.06;animation:shapeFloat 15s ease-in-out infinite;pointer-events:none}
.login-shape.s1{width:80px;height:80px;top:10%;left:8%;border-color:#38bdf8;animation-duration:18s;transform:rotate(15deg)}
.login-shape.s2{width:50px;height:50px;top:20%;right:12%;border-color:#a78bfa;animation-duration:14s;animation-delay:-3s;border-radius:50%;transform:rotate(-10deg)}
.login-shape.s3{width:120px;height:60px;bottom:15%;left:15%;border-color:#f472b6;animation-duration:20s;animation-delay:-7s;transform:rotate(25deg)}
.login-shape.s4{width:40px;height:40px;bottom:25%;right:10%;border-color:#22c55e;animation-duration:16s;animation-delay:-5s;transform:rotate(45deg)}
.login-shape.s5{width:100px;height:100px;top:50%;left:5%;border-color:#f59e0b;animation-duration:22s;animation-delay:-10s;border-radius:50%;opacity:.04}
.login-shape.s6{width:60px;height:60px;top:5%;right:30%;border-color:#38bdf8;animation-duration:17s;animation-delay:-8s;transform:rotate(60deg)}
@keyframes shapeFloat{0%{transform:rotate(0deg) translate(0,0)}25%{transform:rotate(90deg) translate(20px,-15px)}50%{transform:rotate(180deg) translate(-10px,20px)}75%{transform:rotate(270deg) translate(15px,10px)}100%{transform:rotate(360deg) translate(0,0)}}
.login-box{position:relative;z-index:2;animation:loginFloat 6s ease-in-out infinite}
@keyframes loginFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ===== INTERACTIVE HOVER EFFECTS ===== */
.bind-row{transition:all .3s cubic-bezier(.25,.46,.45,.94)}
.bind-row:hover{transform:translateX(4px) scale(1.01);box-shadow:0 4px 20px rgba(0,0,0,.2)}
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.15);transition:all .5s ease;transform:translate(-50%,-50%)}
.btn:active::after{width:300px;height:300px;opacity:0}
.nav-item{transition:all .3s cubic-bezier(.25,.46,.45,.94)}
.nav-item:hover{transform:translateX(4px)}
.logout-item{transition:all .3s}
.logout-item:hover{transform:translateX(4px)}

/* ===== RESET ===== */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:#060b18;color:#fff;min-height:100vh;overflow-x:hidden}

/* ===== FOCUS RINGS (Accessibility) ===== */
:focus-visible{outline:2px solid rgba(56,189,248,.5);outline-offset:2px;border-radius:8px}
button:focus-visible,.nav-item:focus-visible,.key:focus-visible,.lang-btn:focus-visible{outline:2px solid rgba(56,189,248,.4);outline-offset:2px}

/* ===== APP LAYOUT ===== */
.app{display:flex;height:100vh;max-height:100vh;overflow:hidden;display:none}

/* ===== SIDEBAR ===== */
.sidebar{width:220px;background:rgba(15,23,42,.7);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:100;transition:transform .3s}
.sidebar-brand{padding:24px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.06);transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}
.sidebar-brand:hover{transform:scale(1.05)}
.sidebar-brand:hover .sidebar-logo{animation:logoSpin 3s linear infinite}
@keyframes logoSpin{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.1);filter:drop-shadow(0 0 25px rgba(56,189,248,.6))}100%{transform:rotate(360deg) scale(1)}}
.sidebar-brand h2{font-size:18px;font-weight:900;background:linear-gradient(135deg,#38bdf8,#a78bfa,#f472b6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;color:#94a3b8;cursor:pointer;transition:all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);border:1px solid transparent}
.nav-item:hover{background:rgba(56,189,248,.08);color:#e2e8f0;transform:translateX(4px)}
.nav-item.active{
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  border-bottom: 3px solid rgba(0, 0, 0, 0.5) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.35) !important;
  position: relative;
  overflow: hidden;
  transform: translateY(-1px);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #38bdf8;
  z-index: 2;
}
.nav-item .nav-icon{font-size:18px;width:24px;text-align:center}
.sidebar-footer{padding:16px 12px;border-top:1px solid rgba(255,255,255,.06)}
.logout-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;color:#ef4444;cursor:pointer;transition:.2s;border:none;background:none;width:100%}
.logout-item:hover{background:rgba(239,68,68,.08)}

/* ===== MAIN ===== */
.main{margin-left:220px;flex:1;height:100vh;max-height:100vh;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{padding:16px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(6,11,24,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50}
.topbar-title{font-size:18px;font-weight:700;color:#e2e8f0}
.topbar-right{display:flex;align-items:center;gap:16px}
.conn-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #090e1a;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 2.5px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.25s ease;
}
.conn-badge.online {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 8px rgba(34, 197, 94, 0.12) !important;
}
.conn-badge.offline {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 8px rgba(239, 68, 68, 0.12) !important;
}
.conn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}
.conn-badge.online .conn-dot {
  background: radial-gradient(circle at 3px 3px, #4ade80 0%, #22c55e 60%, #15803d 100%);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
  animation: ledPulse 2s ease-in-out infinite;
}
.conn-badge.offline .conn-dot {
  background: radial-gradient(circle at 3px 3px, #fca5a5 0%, #ef4444 60%, #b91c1c 100%);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
  animation: ledPulse 2s ease-in-out infinite;
}
@keyframes ledPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.user-avatar-top {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3b82f6 0%, #1d4ed8 50%, #1e1b4b 100%);
  border: 2.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 
    inset 0 2px 3px rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 15px rgba(59, 130, 246, 0.3) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0,0,0,0.9);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: visible;
  z-index: 1;
}
.user-avatar-top::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  z-index: -1;
  opacity: 0.25;
  filter: blur(4px);
  transition: all 0.3s ease;
}
.user-avatar-top:hover {
  transform: scale(1.08);
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 6px 16px rgba(0, 0, 0, 0.5) !important;
}
.user-avatar-top:hover::before {
  inset: -3px;
  opacity: 0.4;
}
.content{padding:32px;flex:1;overflow-y:auto;overflow-x:hidden}

/* ===== SECTIONS ===== */
.section{display:none;transform-style:preserve-3d;perspective:1200px}
.section.active{display:block;animation:sectionIn .45s cubic-bezier(.25,.46,.45,.94) both}
@keyframes sectionIn{from{opacity:0;transform:perspective(1200px) translateY(16px) scale(.99)}to{opacity:1;transform:perspective(1200px) translateY(0) scale(1)}}

/* ===== WELCOME ===== */
.welcome{margin-bottom:28px}
.welcome h2{font-size:24px;font-weight:800;color:#e2e8f0;margin-bottom:4px}
.welcome h2 span{background:linear-gradient(135deg,#38bdf8,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.welcome-sub{font-size:13px;color:#475569;display:flex;align-items:center;gap:8px}
.welcome-time {
  background: #090e1a;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-bottom: 2.5px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    inset 0 2.5px 5px rgba(0, 0, 0, 0.85),
    0 1px 0 rgba(255, 255, 255, 0.05);
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px !important;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.65);
  letter-spacing: 0.5px;
  display: inline-block;
}

/* ===== STAT CARDS ===== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px}
.stat-card {
  background: linear-gradient(180deg, rgba(20, 28, 48, 0.75), rgba(8, 12, 24, 0.9)) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 4px solid rgba(0, 0, 0, 0.45) !important;
  border-radius: 20px;
  padding: 24px;
  transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 25px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(56, 189, 248, 0.03);
}
.stat-card:hover {
  border-color: rgba(56, 189, 248, 0.2) !important;
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 15px 35px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(56, 189, 248, 0.1);
}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:20px 20px 0 0}
.stat-card.cyan::before{background:linear-gradient(90deg,#38bdf8,#06b6d4)}
.stat-card.green::before{background:linear-gradient(90deg,#22c55e,#16a34a)}
.stat-card.amber::before{background:linear-gradient(90deg,#f59e0b,#f97316)}
.stat-card.purple::before{background:linear-gradient(90deg,#a78bfa,#7c3aed)}
.stat-icon{font-size:28px;margin-bottom:12px}
.stat-value{font-size:32px;font-weight:900;font-family:'JetBrains Mono',monospace;line-height:1;margin-bottom:4px}
.stat-card.cyan .stat-value{color:#38bdf8}
.stat-card.green .stat-value{color:#22c55e}
.stat-card.amber .stat-value{color:#f59e0b}
.stat-card.purple .stat-value{color:#a78bfa}
.stat-label{font-size:13px;color:#64748b;font-weight:600}

/* D1: SPARKLINES */
.stat-sparkline{display:flex;align-items:flex-end;gap:2px;height:24px;margin-top:10px}
.spark-bar {
  width: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  transition: height .6s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
}
.spark-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent);
}
.stat-card.cyan .spark-bar {
  background: linear-gradient(180deg, #38bdf8, #0284c7) !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}
.stat-card.green .spark-bar {
  background: linear-gradient(180deg, #22c55e, #15803d) !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4) !important;
}
.stat-card.amber .spark-bar {
  background: linear-gradient(180deg, #f59e0b, #b91c1c) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4) !important;
}
.stat-card.purple .spark-bar {
  background: linear-gradient(180deg, #a78bfa, #6d28d9) !important;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.4) !important;
}

/* D2: COUNTDOWN VISUAL */
.countdown-visual{display:flex;align-items:center;gap:16px;margin-top:20px;margin-bottom:28px}
.countdown-ring{position:relative;width:100px;height:100px;flex-shrink:0}
.countdown-ring svg{transform:rotate(-90deg);width:100px;height:100px}
.countdown-ring .ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:6}
.countdown-ring .ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s ease,stroke .5s}
.countdown-ring .ring-fill.green{stroke:#22c55e}
.countdown-ring .ring-fill.amber{stroke:#f59e0b}
.countdown-ring .ring-fill.red{stroke:#ef4444}
.countdown-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.countdown-center .cd-num{font-size:28px;font-weight:900;font-family:'JetBrains Mono',monospace;color:#e2e8f0;line-height:1}
.countdown-center .cd-lbl{font-size:10px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.countdown-blocks{display:flex;gap:10px;flex:1}
.cd-block{background:rgba(15,23,42,.6);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px 16px;text-align:center;flex:1;transition:all .3s}
.cd-block:hover{border-color:rgba(56,189,248,.15);transform:translateY(-1px)}
.cd-block-num{font-size:24px;font-weight:900;font-family:'JetBrains Mono',monospace;color:#e2e8f0;line-height:1;margin-bottom:2px}
.cd-block-lbl{font-size:10px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* ===== ALERTS ===== */
.alerts-bar{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}
.alert-item{padding:10px 16px;border-radius:12px;font-size:13px;display:flex;align-items:center;gap:8px;font-weight:600}
.alert-warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.15);color:#f59e0b}
.alert-ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.15);color:#22c55e}

/* ===== BIND PREVIEW MODAL ===== */
.bind-preview-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:300;align-items:center;justify-content:center}
.bind-preview-overlay.show{display:flex}
.bind-preview{background:linear-gradient(180deg,#1e293b,#0f172a);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:28px;width:92%;max-width:400px;text-align:center;animation:modalIn .3s ease;position:relative}
@keyframes modalIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.bind-preview-close{position:absolute;top:12px;right:14px;background:none;border:none;color:#64748b;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:.2s}
.bind-preview-close:hover{color:#ef4444;background:rgba(239,68,68,.1)}
.bind-preview h3{font-size:18px;font-weight:800;color:#e2e8f0;margin-bottom:4px}
.bind-preview .bp-desc{font-size:13px;color:#64748b;margin-bottom:20px}
.bind-preview .bp-scene{width:100%;height:180px;border-radius:16px;background:rgba(6,11,24,.8);border:1px solid rgba(255,255,255,.06);overflow:hidden;position:relative;margin-bottom:16px}
.bind-preview .bp-tag{display:inline-block;padding:4px 12px;border-radius:8px;font-size:11px;font-weight:700;background:rgba(56,189,248,.1);color:#38bdf8;border:1px solid rgba(56,189,248,.2)}

/* == WALL ANIM (personajes dentro de cajas rojas) == */
.bp-scene.wall {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: gridScroll 10s linear infinite;
  perspective: 400px;
}
@keyframes gridScroll {
  0% { background-position: 0 0; }
  100% { background-position: 20px 20px; }
}
.bp-scene.wall .bw-box {
  position: absolute;
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 4px;
  background:
    linear-gradient(to right, #ef4444 8px, transparent 8px) 0 0,
    linear-gradient(to bottom, #ef4444 8px, transparent 8px) 0 0,
    linear-gradient(to left, #ef4444 8px, transparent 8px) 100% 0,
    linear-gradient(to bottom, #ef4444 8px, transparent 8px) 100% 0,
    linear-gradient(to right, #ef4444 8px, transparent 8px) 0 100%,
    linear-gradient(to top, #ef4444 8px, transparent 8px) 0 100%,
    linear-gradient(to left, #ef4444 8px, transparent 8px) 100% 100%,
    linear-gradient(to top, #ef4444 8px, transparent 8px) 100% 100%,
    rgba(239, 68, 68, 0.02);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 12px rgba(239, 68, 68, 0.1);
  animation: wallPop 2s ease-in-out infinite alternate;
}
.bp-scene.wall .bw-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ef4444, transparent);
  box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239, 68, 68, 0.5);
  animation: scanline 2.5s linear infinite;
  opacity: 0.8;
}
@keyframes scanline {
  0% { top: 0%; opacity: 0; }
  10%, 90% { opacity: 0.8; }
  50% { top: 100%; }
  100% { top: 0%; opacity: 0; }
}
.bp-scene.wall .bw-box::after {
  position: absolute;
  bottom: 4px;
  left: 6px;
  font-size: 6px;
  font-family: 'JetBrains Mono', monospace;
  color: #ef4444;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: pre;
  line-height: 1.1;
  text-shadow: 0 0 4px #ef4444;
  opacity: 0.8;
}
.bp-scene.wall .bw-box:nth-child(1) {
  width: 80px;
  height: 120px;
  bottom: 15px;
  left: 30px;
  animation-delay: 0s;
}
.bp-scene.wall .bw-box:nth-child(1)::after {
  content: 'TRK: #001\A DST: 42m\A LKD: YES';
}
.bp-scene.wall .bw-box:nth-child(2) {
  width: 70px;
  height: 105px;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.3s;
}
.bp-scene.wall .bw-box:nth-child(2)::after {
  content: 'TRK: #002\A DST: 18m\A LKD: YES';
}
.bp-scene.wall .bw-box:nth-child(3) {
  width: 75px;
  height: 115px;
  bottom: 15px;
  right: 30px;
  animation-delay: 0.6s;
}
.bp-scene.wall .bw-box:nth-child(3)::after {
  content: 'TRK: #003\A DST: 29m\A LKD: YES';
}

/* Stick figures como esqueletos holográficos */
.bp-scene.wall .bw-stick {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 0 4px currentColor);
  animation: holoBreathe 2s ease-in-out infinite alternate;
}
@keyframes holoBreathe {
  0% { transform: scale(0.98) translateY(1px); opacity: 0.6; }
  100% { transform: scale(1.02) translateY(-1px); opacity: 1; }
}
.bp-scene.wall .bw-stick .st-head {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent);
  box-shadow: inset 0 0 5px currentColor, 0 0 5px currentColor;
  position: relative;
}
.bp-scene.wall .bw-stick .st-head::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}
.bp-scene.wall .bw-stick .st-body {
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, currentColor, transparent);
  box-shadow: 0 0 3px currentColor;
}
.bp-scene.wall .bw-stick .st-arms {
  width: 20px;
  height: 1px;
  margin-top: -18px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  box-shadow: 0 0 3px currentColor;
}
.bp-scene.wall .bw-stick .st-legs {
  width: 16px;
  height: 18px;
  border: none !important;
  background: transparent !important;
  margin-top: 0;
  position: relative;
}
.bp-scene.wall .bw-stick .st-legs::before,
.bp-scene.wall .bw-stick .st-legs::after {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 16px;
  background: currentColor;
  box-shadow: 0 0 3px currentColor;
}
.bp-scene.wall .bw-stick .st-legs::before {
  left: 8px;
  transform: rotate(22deg);
  transform-origin: top center;
}
.bp-scene.wall .bw-stick .st-legs::after {
  right: 8px;
  transform: rotate(-22deg);
  transform-origin: top center;
}
.bp-scene.wall .bw-stick:nth-child(4) { bottom: 30px; left: 48px; color: #f5d000; animation-delay: 0s; }
.bp-scene.wall .bw-stick:nth-child(5) { bottom: 35px; left: 50%; transform: translateX(-50%); color: #22c55e; animation-delay: 0.3s; }
.bp-scene.wall .bw-stick:nth-child(6) { bottom: 28px; right: 48px; color: #38bdf8; animation-delay: 0.6s; }

@keyframes wallPop {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* == ESP ANIM (personajes con nombre y HP) == */
.bp-scene.esp {
  background-image:
    radial-gradient(circle at center, transparent 30%, rgba(34, 197, 94, 0.02) 30%, rgba(34, 197, 94, 0.02) 31%, transparent 31%),
    radial-gradient(circle at center, transparent 60%, rgba(34, 197, 94, 0.02) 60%, rgba(34, 197, 94, 0.02) 61%, transparent 61%),
    linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 20px 20px, 20px 20px;
}
.bp-scene.esp .esp-player {
  position: absolute;
  width: 14px;
  height: 32px;
  border-radius: 3px;
  box-shadow: 0 0 8px currentColor;
  transform-style: preserve-3d;
  transform: rotateY(15deg);
  animation: espPulse 2s ease infinite alternate;
}
.bp-scene.esp .esp-player::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: inherit;
  background: inherit;
  box-shadow: 0 0 5px currentColor;
}
/* Barra de vida neón cilíndrica a la izquierda de cada enemigo */
.bp-scene.esp .esp-player::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -6px;
  width: 2px;
  height: calc(100% + 10px);
  border-radius: 1px;
}
.bp-scene.esp .esp-player:nth-child(1) {
  top: 65px;
  left: 65px;
  background: linear-gradient(to bottom, rgba(239, 68, 68, 0.15), transparent);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #ef4444;
  animation-delay: 0s;
}
.bp-scene.esp .esp-player:nth-child(1)::after {
  background: linear-gradient(to top, #22c55e 80%, rgba(255, 255, 255, 0.1) 80%);
  box-shadow: 0 0 4px #22c55e;
}
.bp-scene.esp .esp-player:nth-child(2) {
  top: 70px;
  left: 165px;
  background: linear-gradient(to bottom, rgba(245, 158, 11, 0.15), transparent);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #f59e0b;
  animation-delay: 0.3s;
}
.bp-scene.esp .esp-player:nth-child(2)::after {
  background: linear-gradient(to top, #ef4444 40%, rgba(255, 255, 255, 0.1) 40%);
  box-shadow: 0 0 4px #ef4444;
}
.bp-scene.esp .esp-player:nth-child(3) {
  top: 75px;
  right: 65px;
  background: linear-gradient(to bottom, rgba(34, 197, 94, 0.15), transparent);
  border: 1px solid rgba(34, 197, 94, 0.5);
  color: #22c55e;
  animation-delay: 0.6s;
}
.bp-scene.esp .esp-player:nth-child(3)::after {
  background: linear-gradient(to top, #22c55e 100%, rgba(255, 255, 255, 0.1) 100%);
  box-shadow: 0 0 4px #22c55e;
}

.bp-scene.esp .esp-name,
.bp-scene.esp .esp-hp {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  text-shadow: 0 0 4px currentColor;
  background: rgba(15, 23, 42, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1px 4px;
  white-space: nowrap;
}
.bp-scene.esp .esp-name { font-size: 7px; letter-spacing: 0.5px; }
.bp-scene.esp .esp-hp { font-size: 6px; }

.bp-scene.esp .esp-name:nth-child(4) { top: 38px; left: 52px; color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
.bp-scene.esp .esp-name:nth-child(5) { top: 44px; left: 150px; color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
.bp-scene.esp .esp-name:nth-child(6) { top: 49px; right: 50px; color: #22c55e; border-color: rgba(34, 197, 94, 0.3); }

.bp-scene.esp .esp-hp { animation: hpPulse 2s ease infinite; }
.bp-scene.esp .esp-hp:nth-child(7) { top: 48px; left: 56px; color: #ef4444; border-color: rgba(239, 68, 68, 0.2); }
.bp-scene.esp .esp-hp:nth-child(8) { top: 54px; left: 156px; color: #f59e0b; border-color: rgba(245, 158, 11, 0.2); }
.bp-scene.esp .esp-hp:nth-child(9) { top: 59px; right: 54px; color: #22c55e; border-color: rgba(34, 197, 94, 0.2); }

.bp-scene.esp .esp-wall {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25px;
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
@keyframes espPulse {
  0% { opacity: 0.6; transform: rotateY(15deg) scale(0.97); }
  100% { opacity: 1; transform: rotateY(15deg) scale(1.03); }
}
@keyframes hpPulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.5; }
}

/* == HEADON ANIM == */
.bp-scene.headon {
  background:
    radial-gradient(circle, transparent 20%, rgba(239, 68, 68, 0.02) 20%, rgba(239, 68, 68, 0.02) 40%, transparent 40%),
    radial-gradient(circle, transparent 50%, rgba(6, 11, 24, 0.6) 70%),
    linear-gradient(90deg, transparent 49.5%, rgba(239, 68, 68, 0.15) 50%, transparent 50.5%),
    linear-gradient(180deg, transparent 49.5%, rgba(239, 68, 68, 0.15) 50%, transparent 50.5%);
}
/* Anillo de la mira en el centro */
.bp-scene.headon::before {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.05);
}
.bp-scene.headon .ho-player {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 52px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.12), transparent);
  border: 1px solid rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
}
.bp-scene.headon .ho-player::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 20%, rgba(239, 68, 68, 0.1) 70%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}
/* Laser lock-on en la cabeza */
.bp-scene.headon .ho-player::after {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #ef4444, 0 0 16px #ef4444;
}
.bp-scene.headon .ho-hitmarker {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
  width: 24px;
  height: 24px;
  pointer-events: none;
  animation: hitmarkerBlast 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}
.bp-scene.headon .ho-hitmarker::before,
.bp-scene.headon .ho-hitmarker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}
.bp-scene.headon .ho-hitmarker::before { transform: translate(-50%, -50%) rotate(45deg); }
.bp-scene.headon .ho-hitmarker::after { transform: translate(-50%, -50%) rotate(-45deg); }

@keyframes hitmarkerBlast {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; box-shadow: 0 0 0 0px rgba(239, 68, 68, 0.6); }
  10% { opacity: 1; }
  50% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

.bp-scene.headon .ho-label {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: #ef4444;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.4);
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 4px 12px;
  border-radius: 6px;
  letter-spacing: 2px;
  animation: alarmPulse 0.5s ease infinite alternate;
  white-space: nowrap;
}
.bp-scene.headon .ho-arrow {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 25px;
  background: linear-gradient(to top, transparent, #ef4444);
  animation: correctionFlow 1.2s ease-in-out infinite;
}
.bp-scene.headon .ho-arrow::after {
  content: '▲';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: #ef4444;
  text-shadow: 0 0 5px #ef4444;
}
@keyframes correctionFlow {
  0% { height: 0; opacity: 0; }
  50% { opacity: 1; }
  100% { height: 35px; opacity: 0; }
}

/* == HEADOFF ANIM == */
.bp-scene.headoff {
  background: radial-gradient(circle, rgba(15, 23, 42, 0.6), rgba(6, 11, 24, 0.95));
}
.bp-scene.headoff .ho-player {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 52px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.08), transparent);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 0 5px rgba(148, 163, 184, 0.1);
}
.bp-scene.headoff .ho-player::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.bp-scene.headoff .hoff-body,
.bp-scene.headoff .hoff-head {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 1px;
  border: 1px solid currentColor;
  background: rgba(15, 23, 42, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.bp-scene.headoff .hoff-body {
  bottom: 48px;
  left: calc(50% + 30px);
  color: #f59e0b;
  animation: bodyLabel 2.5s ease infinite;
}
.bp-scene.headoff .hoff-body::before {
  content: '➔ ';
  font-weight: 400;
}
.bp-scene.headoff .hoff-head {
  bottom: 88px;
  left: calc(50% - 75px);
  color: #22c55e;
  animation: headLabel 2.5s ease infinite 1.2s;
  opacity: 0;
}
.bp-scene.headoff .hoff-head::before {
  content: '➔ ';
  font-weight: 400;
}

@keyframes bodyLabel {
  0% { opacity: 0; transform: translateX(5px); }
  15%, 45% { opacity: 1; transform: translateX(0); }
  60%, 100% { opacity: 0; transform: translateX(-5px); }
}
@keyframes headLabel {
  0% { opacity: 0; transform: translateX(-5px); }
  15%, 45% { opacity: 1; transform: translateX(0); }
  60%, 100% { opacity: 0; transform: translateX(5px); }
}

/* == RECOIL ANIM == */
.bp-scene.recoil {
  perspective: 200px;
  transform-style: preserve-3d;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.4), rgba(6, 11, 24, 0.95));
}
.bp-scene.recoil .bullet {
  position: absolute;
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: linear-gradient(to top, transparent, #f59e0b 40%, #fff 100%);
  box-shadow: 0 0 8px #f59e0b, 0 0 16px rgba(245, 158, 11, 0.4);
  left: 50%;
  animation: recoilShot3D 1.6s linear infinite;
}
.bp-scene.recoil .bullet:nth-child(1) { animation-delay: 0s; }
.bp-scene.recoil .bullet:nth-child(2) { animation-delay: 0.15s; }
.bp-scene.recoil .bullet:nth-child(3) { animation-delay: 0.3s; }
.bp-scene.recoil .bullet:nth-child(4) { animation-delay: 0.45s; }
.bp-scene.recoil .bullet:nth-child(5) { animation-delay: 0.6s; }

.bp-scene.recoil .muzzle {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #fff 20%, #f59e0b 60%, transparent 80%);
  border-radius: 50%;
  animation: muzzleFlash 0.15s ease infinite alternate;
}
@keyframes recoilShot3D {
  0% {
    bottom: 30px;
    opacity: 0.8;
    transform: translateX(-50%) scale(1) translateZ(0);
  }
  100% {
    bottom: 160px;
    opacity: 0;
    transform: translateX(calc(-25px + 50px * var(--r, 0.5))) scale(0.1) translateZ(-40px);
  }
}
@keyframes muzzleFlash {
  0% { transform: translateX(-50%) scale(0.7); box-shadow: 0 0 10px #f59e0b, 0 0 20px rgba(245,158,11,0.6); }
  100% { transform: translateX(-50%) scale(1.3); box-shadow: 0 0 25px #f59e0b, 0 0 45px #ff7800, 0 0 60px rgba(245,158,11,0.8); }
}

/* == RAPID FIRE ANIM == */
.bp-scene.rapid {
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.4), rgba(6, 11, 24, 0.95));
}
.bp-scene.rapid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: gridWarp 0.8s linear infinite;
  pointer-events: none;
}
@keyframes gridWarp {
  0% { background-position: 0 0; }
  100% { background-position: 0 30px; }
}
.bp-scene.rapid .rapid-bullet {
  position: absolute;
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: linear-gradient(to top, transparent, #38bdf8 30%, #fff 100%);
  box-shadow: 0 0 10px #38bdf8, 0 0 20px rgba(56, 189, 248, 0.6);
  left: 50%;
  transform: translateX(-50%);
  animation: rapidShot 0.35s linear infinite;
}
.bp-scene.rapid .rapid-bullet:nth-child(1) { animation-delay: 0s; }
.bp-scene.rapid .rapid-bullet:nth-child(2) { animation-delay: 0.04s; }
.bp-scene.rapid .rapid-bullet:nth-child(3) { animation-delay: 0.08s; }
.bp-scene.rapid .rapid-bullet:nth-child(4) { animation-delay: 0.12s; }
.bp-scene.rapid .rapid-bullet:nth-child(5) { animation-delay: 0.16s; }
.bp-scene.rapid .rapid-bullet:nth-child(6) { animation-delay: 0.2s; }
.bp-scene.rapid .rapid-bullet:nth-child(7) { animation-delay: 0.24s; }
.bp-scene.rapid .rapid-bullet:nth-child(8) { animation-delay: 0.28s; }

.bp-scene.rapid .rapid-muzzle {
  position: absolute;
  bottom: 85px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, #fff 10%, #38bdf8 60%, transparent 80%);
  border-radius: 50%;
  animation: rapidMuzzleBlast 0.06s ease infinite alternate;
}
@keyframes rapidShot {
  0% { bottom: 95px; opacity: 0; transform: translateX(-50%) scaleY(0.4); }
  20% { opacity: 1; }
  100% { bottom: 185px; opacity: 0; transform: translateX(-50%) scaleY(1.3); }
}
@keyframes rapidMuzzleBlast {
  0% { transform: translateX(-50%) scale(0.8) rotate(0deg); box-shadow: 0 0 15px #38bdf8, 0 0 30px rgba(56,189,248,0.5); }
  100% { transform: translateX(-50%) scale(1.2) rotate(180deg); box-shadow: 0 0 25px #38bdf8, 0 0 45px rgba(56,189,248,0.8); }
}

.bp-scene.rapid .rapid-flash {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: #38bdf8;
  text-shadow: 0 0 15px #38bdf8, 0 0 35px rgba(56, 189, 248, 0.8);
  animation: lightningFlicker 0.4s ease infinite;
}
@keyframes lightningFlicker {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(0.8) skewX(-8deg); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.15) skewX(8deg); }
}

/* == SPEED/SAVE ANIM == */
.bp-scene.speed {
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.4), rgba(6, 11, 24, 0.95));
}
.bp-scene.speed::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: 15px 15px;
  pointer-events: none;
}
.bp-scene.speed .speed-block {
  position: absolute;
  width: 32px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: serverPulse 1.5s ease-in-out infinite alternate;
}
/* Diodos LED parpadeantes en el servidor */
.bp-scene.speed .speed-block::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
  animation: ledBlink 0.35s ease infinite alternate;
}
.bp-scene.speed .speed-block:nth-child(even)::after {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation-delay: 0.18s;
}
.bp-scene.speed .speed-block:nth-child(1) { top: 80px; left: 40px; animation-delay: 0s; }
.bp-scene.speed .speed-block:nth-child(2) { top: 80px; left: 80px; animation-delay: 0.1s; }
.bp-scene.speed .speed-block:nth-child(3) { top: 80px; left: 120px; animation-delay: 0.2s; }
.bp-scene.speed .speed-block:nth-child(4) { top: 80px; left: 160px; animation-delay: 0.3s; }
.bp-scene.speed .speed-block:nth-child(5) { top: 60px; left: 60px; animation-delay: 0.15s; }
.bp-scene.speed .speed-block:nth-child(6) { top: 60px; left: 100px; animation-delay: 0.25s; }
.bp-scene.speed .speed-block:nth-child(7) { top: 60px; left: 140px; animation-delay: 0.35s; }

.bp-scene.speed .streak {
  position: absolute;
  width: 2px;
  height: 40px;
  background: linear-gradient(to top, transparent, #38bdf8);
  animation: dataStream 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0.8;
}
.bp-scene.speed .streak:nth-child(8) { left: 30%; top: 40%; animation-delay: 0.1s; }
.bp-scene.speed .streak:nth-child(9) { left: 70%; top: 30%; animation-delay: 0.3s; }

@keyframes serverPulse {
  0% { border-color: rgba(56, 189, 248, 0.2); box-shadow: 0 2px 6px rgba(0,0,0,0.6); }
  100% { border-color: rgba(56, 189, 248, 0.6); box-shadow: 0 2px 10px rgba(56, 189, 248, 0.25); }
}
@keyframes ledBlink {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}
@keyframes dataStream {
  0% { transform: translateY(70px) scaleY(0.5); opacity: 0; }
  20%, 80% { opacity: 0.8; }
  100% { transform: translateY(-70px) scaleY(1.2); opacity: 0; }
}

/* == ABORT ANIM == */
.bp-scene.abort {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.05), rgba(6, 11, 24, 0.95));
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: inset 0 0 25px rgba(239, 68, 68, 0.15);
}
/* Diagonal hazard lines */
.bp-scene.abort::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(239, 68, 68, 0.05) 0, rgba(239, 68, 68, 0.05) 8px, transparent 8px, transparent 16px);
  pointer-events: none;
}
.bp-scene.abort::after {
  content: 'CRITICAL ALERT // SYSTEM ABORT';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: #ef4444;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-shadow: 0 0 6px #ef4444;
  animation: alarmPulse 0.4s ease infinite alternate;
}
@keyframes alarmPulse {
  0% { opacity: 0.35; }
  100% { opacity: 1; }
}
.bp-scene.abort .abort-x {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 15px #ef4444, 0 0 35px rgba(239, 68, 68, 0.6);
  font-family: 'Inter', sans-serif;
  animation: abortGlitch 1.2s linear infinite;
  line-height: 1;
}
@keyframes abortGlitch {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: skewX(0deg); }
  10% { transform: translate(-52%, -48%) scale(1.05); filter: skewX(-6deg) brightness(1.2); }
  12% { transform: translate(-48%, -52%) scale(0.95); filter: skewX(6deg) brightness(0.8); }
  14% { transform: translate(-50%, -50%) scale(1); filter: skewX(0deg); }
  45% { transform: translate(-50%, -50%) scale(1); }
  47% { transform: translate(-51%, -49%) scale(1.1); filter: contrast(1.5); }
  49% { transform: translate(-50%, -50%) scale(1); }
}

/* ===== DASH GRID ===== */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.dash-card {
  background: linear-gradient(180deg, rgba(20, 28, 48, 0.75), rgba(8, 12, 24, 0.9)) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 4px solid rgba(0, 0, 0, 0.45) !important;
  border-radius: 20px;
  padding: 24px;
  transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 25px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(56, 189, 248, 0.03);
}
.dash-card:hover {
  border-color: rgba(56, 189, 248, 0.2) !important;
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 15px 35px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(56, 189, 248, 0.1);
}
.dash-card-title{font-size:14px;font-weight:700;color:#94a3b8;margin-bottom:16px;display:flex;align-items:center;gap:8px}

/* DISTRIBUTION */
.dist-chart{display:flex;flex-direction:column;gap:12px}
.dist-row{display:flex;align-items:center;gap:12px}
.dist-label{font-size:12px;color:#94a3b8;width:90px;font-weight:600;flex-shrink:0}
.dist-bar-bg {
  flex: 1;
  height: 26px;
  border-radius: 8px;
  background: #060911;
  border: 1.5px solid rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  position: relative;
}
.dist-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 1s cubic-bezier(.34, 1.56, .64, 1);
  display: flex;
  align-items: center;
  padding-left: 12px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  min-width: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  position: relative;
}
.dist-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 35%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.dist-bar.green {
  background: linear-gradient(90deg, #22c55e, #10b981) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 12px rgba(34, 197, 94, 0.3) !important;
}
.dist-bar.amber {
  background: linear-gradient(90deg, #f59e0b, #d97706) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 12px rgba(245, 158, 11, 0.3) !important;
}
.dist-bar.red {
  background: linear-gradient(90deg, #ef4444, #b91c1c) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 12px rgba(239, 68, 68, 0.3) !important;
}
.dist-count{font-size:12px;color:#64748b;font-weight:700;width:30px;text-align:right;flex-shrink:0;font-family:'JetBrains Mono',monospace}

/* ACTIVITY */
.timeline{display:flex;flex-direction:column;gap:0;max-height:300px;overflow-y:auto}
.tl-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.tl-item:last-child{border-bottom:none}
.tl-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.tl-icon.green{background:rgba(34,197,94,.12)}
.tl-icon.blue{background:rgba(56,189,248,.12)}
.tl-icon.amber{background:rgba(245,158,11,.12)}
.tl-text{font-size:13px;color:#e2e8f0;font-weight:500;line-height:1.4}
.tl-text strong{color:#38bdf8}
.tl-time{font-size:11px;color:#475569;font-family:'JetBrains Mono',monospace;margin-top:2px}

/* ===== HAMBURGER ===== */
.hamburger{display:none;background:none;border:none;color:#e2e8f0;font-size:24px;cursor:pointer;padding:4px}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}

/* ===== PROFILE CARD ===== */
.profile-card {
  background: linear-gradient(180deg, rgba(20, 28, 48, 0.75), rgba(8, 12, 24, 0.9));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 5px solid rgba(0, 0, 0, 0.4);
  border-radius: 24px;
  padding: 32px;
  max-width: 480px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 15px 35px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(56, 189, 248, 0.05);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}
.profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #a78bfa);
  opacity: 0.6;
}
.profile-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-card label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  margin: 14px 0 6px;
}
.profile-card .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 14px;
  transition: all 0.2s ease;
  border-radius: 8px;
}
.profile-card .info-row:hover {
  background: rgba(56, 189, 248, 0.04);
  transform: translateX(4px);
  border-bottom-color: rgba(56, 189, 248, 0.15);
}
.profile-card .info-label {
  color: #818cf8;
  font-weight: 700;
}
.profile-card .info-value {
  color: #e2e8f0;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-shadow: 0 0 8px rgba(226, 232, 240, 0.2);
}

/* ===== BUTTONS ===== */
.btn{padding:14px 24px;border-radius:14px;border:none;color:#fff;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#38bdf8,#6366f1)}
.btn-primary:hover{box-shadow:0 8px 25px rgba(56,189,248,.3)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop.show{display:block}
  .main{margin-left:0}
  .hamburger{display:block}
  .content{padding:16px 12px}
  .topbar{padding:12px 16px}
  .topbar-title{font-size:15px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat-card{padding:10px;border-radius:14px;gap:8px;flex-direction:column;align-items:flex-start;text-align:left}
  .stat-icon{font-size:18px;width:32px;height:32px;margin-bottom:0}
  .stat-value{font-size:18px}
  .stat-label{font-size:9px;letter-spacing:0.5px;word-break:break-word;line-height:1.3}
  .stat-sparkline{height:18px;margin-top:6px}
  .dash-grid{grid-template-columns:1fr}
  .welcome{margin-bottom:20px}
  .welcome h2{font-size:18px}
  .welcome-sub{font-size:12px;flex-wrap:wrap}
  /* Countdown */
  .countdown-visual{flex-direction:column;gap:12px;align-items:stretch}
  .countdown-ring{width:80px;height:80px;align-self:center}
  .countdown-ring svg{width:80px;height:80px}
  .countdown-center .cd-num{font-size:22px}
  .countdown-blocks{gap:6px}
  .cd-block{padding:10px 8px;border-radius:10px}
  .cd-block-num{font-size:18px}
  .cd-block-lbl{font-size:8px}
  /* Bindings */
  .bindings-panel{border-radius:14px}
  .bindings-header{flex-direction:column;gap:8px;padding:14px}
  .bindings-title{font-size:13px}
  .assign-banner{font-size:12px;padding:10px}
  /* Keyboard: all mobile handling in index.html <style> */
  /* Profile */
  .profile-card{padding:20px}
  .profile-card h3{font-size:15px}
  .profile-card .info-row{font-size:13px;padding:10px 0}
  /* Alerts */
  .alert-item{font-size:12px;padding:8px 12px}
  /* Timeline */
  .tl-text{font-size:12px}
  .tl-icon{width:28px;height:28px;font-size:12px}
  /* Distribution */
  .dist-label{width:70px;font-size:11px}
  .dist-bar-bg{height:22px}
  .dist-bar{font-size:10px}
}

@media(max-width:400px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card{padding:12px}
  .stat-icon{font-size:18px;margin-bottom:6px}
  .stat-value{font-size:18px}
  .stat-label{font-size:10px}
  .welcome h2{font-size:16px}
  .countdown-blocks{flex-wrap:wrap}
  .cd-block{min-width:calc(50% - 4px)}
  /* Keyboard: all mobile handling in index.html <style> */
}

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(6,11,24,.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.06);z-index:200;padding:6px 0 env(safe-area-inset-bottom,6px)}
.mobile-nav-list{display:flex;justify-content:space-around;align-items:center;list-style:none;margin:0;padding:0}
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border-radius:10px;cursor:pointer;transition:.2s;color:#475569;font-size:10px;font-weight:600;border:none;background:none}
.mobile-nav-item.active{color:#38bdf8}
.mobile-nav-item .mnav-icon{font-size:18px}
@media(max-width:768px){
  .mobile-nav{display:block}
  body{padding-bottom:70px}
  .toast{bottom:90px}
  .fab-container{bottom:80px}
  .scroll-top{bottom:80px}
  /* Comments mobile */
  .comment-emoji-picker { width: 240px; right: -10px; }
  .comment-emoji-grid { grid-template-columns: repeat(7, 1fr); }
  .comment-emoji-grid span { font-size: 16px; padding: 5px; }
  .news-comments-area.open { max-height: 400px; }
}

/* ===== PREMIUM INTERACTIVE POLISH (Dar vida a Teclado y Bindings) ===== */

/* pulsating keyboard shell during key mapping */
body.assigning-active .shell {
  border-color: #f472b6 !important;
  box-shadow: 0 0 30px rgba(244, 114, 182, 0.4), 0 0 60px rgba(244, 114, 182, 0.15) !important;
  animation: shellGlowPulse 1.6s ease-in-out infinite !important;
}
@keyframes shellGlowPulse {
  0%, 100% { box-shadow: 0 0 25px rgba(244, 114, 182, 0.35), 0 0 50px rgba(244, 114, 182, 0.15); filter: brightness(1); }
  50% { box-shadow: 0 0 40px rgba(244, 114, 182, 0.65), 0 0 80px rgba(244, 114, 182, 0.3); filter: brightness(1.15); }
}

/* pulsating inviting key glow during mapping */
body.assigning-active .key, body.assigning-active .m-key {
  opacity: 1 !important;
  border-color: rgba(244, 114, 182, 0.7) !important;
  animation: keyAssignInvite 1.4s ease-in-out infinite alternate !important;
}
@keyframes keyAssignInvite {
  0% {
    background: linear-gradient(180deg, #fdf2f8, #fbcfe8) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 4px rgba(244, 114, 182, 0.1);
  }
  100% {
    background: linear-gradient(180deg, #fbcfe8, #f472b6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 18px rgba(244, 114, 182, 0.35);
  }
}

/* sleek neon glowing accent left border on hover for bindings */
.bind-row {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}
.bind-row:hover {
  transform: translateX(6px) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.08), 0 0 10px rgba(56, 189, 248, 0.05) !important;
}
.bind-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #38bdf8, #a78bfa);
  transform: scaleY(0);
  transition: transform .25s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.bind-row:hover::before {
  transform: scaleY(1);
}

/* cyber-gleam sweep animation on category header hover */
.bind-category {
  position: relative;
  overflow: hidden;
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}
.bind-category::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.08), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.bind-category:hover::before {
  transform: translateX(100%);
}
.bind-category:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ===== SECTION CONTENT ENTRANCE ANIMATIONS (Dar vida a las Secciones por dentro) ===== */

/* Staggered slide up & scale-in when section becomes active */
.section.active .stat-card,
.section.active .dash-card,
.section.active .news-card,
.section.active .support-card,
.section.active .profile-card,
.section.active .guide-card,
.section.active .bind-category,
.section.active .bindings-header {
  animation: contentSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes contentSlideUp {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Sequential Stagger Delays for high-end organic flow */
.section.active .stat-card:nth-child(1) { animation-delay: 30ms; }
.section.active .stat-card:nth-child(2) { animation-delay: 60ms; }
.section.active .stat-card:nth-child(3) { animation-delay: 90ms; }
.section.active .stat-card:nth-child(4) { animation-delay: 120ms; }

.section.active .news-card:nth-child(1) { animation-delay: 40ms; }
.section.active .news-card:nth-child(2) { animation-delay: 80ms; }
.section.active .news-card:nth-child(3) { animation-delay: 120ms; }

.section.active .support-card:nth-child(1) { animation-delay: 50ms; }
.section.active .support-card:nth-child(2) { animation-delay: 100ms; }

.section.active .dash-card:nth-child(1) { animation-delay: 80ms; }
.section.active .dash-card:nth-child(2) { animation-delay: 160ms; }

/* Premium Card hover glows & visual responses */
.news-card, .support-card, .profile-card, .guide-card, .plan-card, .pay-stat {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s, box-shadow 0.3s !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 5px solid rgba(0, 0, 0, 0.4) !important;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 28, 48, 0.75), rgba(8, 12, 24, 0.9)) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 25px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(56, 189, 248, 0.02) !important;
}
.news-card:hover {
  transform: translateY(-5px) scale(1.015) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 15px 35px rgba(0, 0, 0, 0.5), 
    0 0 20px rgba(56, 189, 248, 0.08) !important;
}

/* ===== NEWS COMMENTS SYSTEM ===== */
.news-comment-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.15);
  color: #818cf8; padding: 5px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s;
  margin-top: 10px; font-family: 'Inter', sans-serif;
}
.news-comment-toggle:hover { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.3); color: #a5b4fc; }
.news-comment-toggle .comment-count {
  background: #6366f1; color: #fff; font-size: 9px; padding: 1px 6px;
  border-radius: 10px; font-weight: 800; min-width: 14px; text-align: center;
}
.news-comment-toggle .comment-new {
  background: #ef4444; color: #fff; font-size: 8px; padding: 1px 5px;
  border-radius: 8px; font-weight: 800; animation: pulse 2s infinite;
}
.news-comments-area {
  margin-top: 10px; overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, margin 0.3s ease, overflow 0s 0.4s;
}
.news-comments-area.open { max-height: 600px; opacity: 1; overflow: visible; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, margin 0.3s ease, overflow 0s 0s; }
.news-comments-thread {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;
  max-height: 300px; overflow-y: auto; padding-right: 4px;
}
.news-comments-thread::-webkit-scrollbar { width: 4px; }
.news-comments-thread::-webkit-scrollbar-track { background: transparent; }
.news-comments-thread::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 4px; }
.comment-bubble {
  background: rgba(30,41,59,0.8); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 8px 12px; font-size: 12px; line-height: 1.5;
  color: #e2e8f0; position: relative; animation: fadeSlideUp 0.3s ease;
}
.comment-bubble .comment-meta {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-size: 9px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.comment-bubble .comment-meta .comment-author { color: #818cf8; }
.comment-reply {
  margin-left: 20px; background: rgba(99,102,241,0.06);
  border-left: 2px solid rgba(99,102,241,0.3);
  border-radius: 0 12px 12px 0; padding: 8px 12px;
  font-size: 12px; color: #c7d2fe; animation: fadeSlideUp 0.3s ease;
}
.comment-reply .reply-meta {
  display: flex; align-items: center; gap: 5px; margin-bottom: 3px;
  font-size: 9px; color: #6366f1; font-weight: 700; letter-spacing: 0.5px;
}
.comment-input-area {
  display: flex; gap: 6px; align-items: center;
  background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 6px 8px; transition: border-color 0.2s;
}
.comment-input-area:focus-within { border-color: rgba(99,102,241,0.3); }
.comment-input-area input[type="text"] {
  flex: 1; background: none !important; border: none !important; outline: none !important;
  color: #e2e8f0 !important; font-size: 12px; font-family: 'Inter', sans-serif;
  padding: 4px 0 !important; min-width: 0;
}
.comment-input-area input[type="text"]::placeholder { color: #475569; }
.comment-emoji-btn {
  background: none; border: none; font-size: 16px; cursor: pointer;
  padding: 2px; opacity: 0.6; transition: opacity 0.2s; line-height: 1;
}
.comment-emoji-btn:hover { opacity: 1; }
.comment-send-btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6); border: none;
  color: #fff; width: 28px; height: 28px; border-radius: 8px;
  cursor: pointer; font-size: 12px; display: flex; align-items: center;
  justify-content: center; transition: all 0.2s; flex-shrink: 0;
}
.comment-send-btn:hover { transform: scale(1.1); box-shadow: 0 0 12px rgba(99,102,241,0.4); }
.comment-send-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
.comment-empty { text-align: center; color: #475569; font-size: 11px; padding: 12px 0; font-style: italic; }
.comment-emoji-picker {
  position: absolute; bottom: 100%; right: 0; margin-bottom: 6px;
  background: #11141e; border: 1px solid rgba(99,102,241,0.2);
  border-radius: 12px; padding: 8px; width: 280px; z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: none;
}
.comment-emoji-picker.show { display: block; animation: fadeSlideUp 0.2s ease; }
.comment-emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  max-height: 160px; overflow-y: auto;
}
.comment-emoji-grid span {
  font-size: 18px; cursor: pointer; padding: 4px; text-align: center;
  border-radius: 6px; transition: background 0.15s;
}
.comment-emoji-grid span:hover { background: rgba(99,102,241,0.15); }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.support-card:hover {
  transform: translateY(-5px) scale(1.015) !important;
  border-color: rgba(167, 139, 250, 0.25) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 15px 35px rgba(0, 0, 0, 0.5), 
    0 0 20px rgba(167, 139, 250, 0.08) !important;
}
.profile-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 12px 30px rgba(0, 0, 0, 0.55), 
    0 0 20px rgba(34, 197, 94, 0.06) !important;
}
.guide-card:hover, .plan-card:hover, .pay-stat:hover {
  transform: translateY(-5px) scale(1.015) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 15px 35px rgba(0, 0, 0, 0.5), 
    0 0 20px rgba(56, 189, 248, 0.08) !important;
}

/* Glassmorphic glows on primary buttons with 3D mechanical travel */
.support-btn, .btn-primary, #logout-btn, .plan-btn, .btn-sm {
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid rgba(0, 0, 0, 0.4) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 10px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1), border-bottom-width 0.1s, box-shadow 0.15s, background-color 0.2s !important;
}
.support-btn:hover, .btn-primary:hover, .plan-btn:hover, .btn-sm:hover {
  transform: translateY(-2px) scale(1.01);
  border-bottom-width: 5px !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px rgba(56, 189, 248, 0.35),
    0 0 12px rgba(56, 189, 248, 0.15) !important;
}
#logout-btn:hover {
  transform: translateY(-2px) scale(1.01);
  border-bottom-width: 5px !important;
  background: rgba(239, 68, 68, 0.2) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 20px rgba(239, 68, 68, 0.35),
    0 0 12px rgba(239, 68, 68, 0.15) !important;
}
.support-btn:active, .btn-primary:active, #logout-btn:active, .plan-btn:active, .btn-sm:active {
  transform: translateY(2px) scale(0.985) !important;
  border-bottom-width: 1px !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* ===== HIGH-END 3D GAMING HARDWARE RENDER (Teclado y Ratón 3D/Tactil) ===== */

/* Metallic Brushed Keyboard Deck with Flowing RGB Underglow */
.shell {
  background: linear-gradient(135deg, #090d16, #020408) !important;
  border: 2px solid #1e293b !important;
  border-radius: 24px !important;
  padding: 28px !important;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.05), 0 0 30px rgba(56, 189, 248, 0.05) !important;
  position: relative;
}
.shell::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 28px;
  background: linear-gradient(90deg, #38bdf8, #a78bfa, #f472b6, #38bdf8);
  background-size: 300% 300%;
  animation: rgb-flowing-glow 8s linear infinite;
  z-index: -1;
  opacity: 0.45;
  filter: blur(12px);
}
@keyframes rgb-flowing-glow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Deep Tactile 3D Backlit Mechanical Keycaps */
.key {
  background: linear-gradient(135deg, #111827, #1f2937) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 5px solid #070a0f !important;
  color: #9ca3af !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 12px rgba(56, 189, 248, 0.03) !important;
  transition: transform .12s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow .12s, border-color .2s, color .2s !important;
}
.key .t {
  font-weight: 700;
  color: #e5e7eb !important;
  transition: color .2s, text-shadow .2s !important;
}
.key .c {
  color: #4b5563 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  transition: color .2s !important;
}

/* Key hover state: Backlit LED activates! */
.key:hover {
  transform: translateY(-4px) scale(1.04) !important;
  background: linear-gradient(135deg, #1f2937, #374151) !important;
  border-color: #38bdf8 !important;
  border-bottom-color: #0284c7 !important;
  color: #38bdf8 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 20px rgba(56, 189, 248, 0.3), 0 0 40px rgba(56, 189, 248, 0.1) !important;
}
.key:hover .t {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important;
}
.key:hover .c {
  color: rgba(56, 189, 248, 0.8) !important;
}

/* Key active/press state: Deep mechanical key travel */
.key:active, .key.detected {
  transform: translateY(2px) scale(0.96) !important;
  border-bottom-width: 1px !important;
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  border-color: #0ea5e9 !important;
  border-bottom-color: #0284c7 !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.6) !important;
}
.key:active .t, .key.detected .t {
  color: #fff !important;
  text-shadow: 0 0 12px #fff !important;
}
.key:active .c, .key.detected .c {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* High-Tech Gaming Mouse Body with Aura Underglow */
.mouse-body-shell {
  position: relative;
  background: 
    radial-gradient(circle at 50% 80%, rgba(30, 41, 59, 0.95) 0%, rgba(9, 13, 22, 0.98) 100%),
    linear-gradient(45deg, rgba(255,255,255,0.01) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.01) 75%, rgba(255,255,255,0.01)),
    linear-gradient(45deg, rgba(255,255,255,0.01) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.01) 75%, rgba(255,255,255,0.01)) !important;
  background-size: 100% 100%, 8px 8px, 8px 8px !important;
  background-position: 0 0, 0 0, 4px 4px !important;
  border: 3px solid #1e293b !important;
  box-shadow: 
    0 40px 85px rgba(0, 0, 0, 0.9), 
    inset 0 3px 25px rgba(255, 255, 255, 0.05),
    inset 0 -15px 40px rgba(0, 0, 0, 0.7) !important;
}
.mouse-body-shell::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 144px 144px 94px 94px;
  background: linear-gradient(90deg, #38bdf8, #a78bfa, #f472b6, #38bdf8);
  background-size: 300% 300%;
  animation: rgb-flowing-glow 8s linear infinite;
  z-index: -1;
  opacity: 0.45;
  filter: blur(14px);
}

/* Split-Trigger 3D Clickers */
.m-key {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 7px solid #05070a !important; /* Thick bottom mechanical slot edge */
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.08), 0 6px 12px rgba(0, 0, 0, 0.6) !important;
  color: #e5e7eb !important;
  transition: transform .12s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow .12s, border-color .2s, color .2s !important;
}
.m-key::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: linear-gradient(180deg, #374151 0%, #1e293b 100%) !important;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 -3px 6px rgba(0, 0, 0, 0.4) !important;
  pointer-events: none;
  transition: background 0.2s ease !important;
}
.m-key .t {
  font-weight: 800;
  color: #e5e7eb !important;
  transition: color .2s, text-shadow .2s !important;
}
.m-key .c {
  font-size: 10px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #38bdf8 !important;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  transition: all 0.2s !important;
}
.m-left {
  border-radius: 160px 10px 25px 10px !important;
}
.m-right {
  border-radius: 10px 160px 10px 25px !important;
}

/* Mouse key hovers: dynamic high-tech LED glows */
.m-key:hover {
  background: linear-gradient(135deg, #1f2937, #374151) !important;
  border-color: #38bdf8 !important;
  border-bottom-color: #0284c7 !important;
  color: #38bdf8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.4) !important;
}
.m-key:hover::before {
  background: linear-gradient(180deg, #4b5563 0%, #2a3342 100%) !important;
}
.m-key:hover .t {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}

/* Click trigger travel */
.m-key:active {
  transform: translateY(4px) !important;
  border-bottom-width: 1px !important;
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  border-color: #0ea5e9 !important;
  border-bottom-color: #02b0ff !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.6) !important;
}
.m-key:active .t {
  color: #fff !important;
  text-shadow: 0 0 10px #fff !important;
}
.m-key:active .c {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Textured 3D Scroll Wheel with pulsing LED core */
.m-wheel {
  background: repeating-linear-gradient(0deg, #090c10 0px, #090c10 5px, #2a3342 5px, #2a3342 10px) !important;
  border: 3px solid #334155 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.85), inset 0 0 10px rgba(0, 0, 0, 0.9), 0 0 25px rgba(56, 189, 248, 0.5) !important;
  position: relative;
}
.m-wheel::before {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 45%;
  right: 45%;
  background: #38bdf8;
  border-radius: 4px;
  box-shadow: 0 0 8px #38bdf8, 0 0 16px rgba(56, 189, 248, 0.6);
  animation: wheelPulse 2s ease-in-out infinite alternate;
}
@keyframes wheelPulse {
  0% { opacity: 0.35; filter: brightness(0.7); }
  100% { opacity: 1; filter: brightness(1.4); }
}

/* Beveled Side buttons X1 & X2 */
.m-side {
  background: linear-gradient(90deg, #111827 0%, #1f2937 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-left: 5px solid #38bdf8 !important;
  border-bottom: 4px solid #070a0f !important;
  box-shadow: -5px 5px 12px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s !important;
}
.m-side::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f2937 0%, #374151 100%) !important;
  box-shadow: inset -1px 1px 2px rgba(255, 255, 255, 0.08) !important;
}
.m-side:hover {
  border-left-color: #a78bfa !important;
  box-shadow: -5px 5px 16px rgba(167, 139, 250, 0.35) !important;
}
.m-side:active {
  transform: translateX(10px) !important;
  border-left-color: #0ea5e9 !important;
}

/* Curved Palm Rest breathing gamer logo */
.m-palm-logo {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(99, 102, 241, 0.05) 50%, transparent 75%) !important;
  border: 2px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3), inset 0 0 15px rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 10px #38bdf8, 0 0 20px rgba(56, 189, 248, 0.6), 0 0 35px rgba(99, 102, 241, 0.4) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  animation: palmReactor 3s ease-in-out infinite alternate !important;
}
@keyframes palmReactor {
  0% { box-shadow: 0 0 12px rgba(56, 189, 248, 0.1); text-shadow: 0 0 8px rgba(56, 189, 248, 0.3); opacity: 0.6; }
  100% { box-shadow: 0 0 25px rgba(56, 189, 248, 0.3), inset 0 0 15px rgba(56, 189, 248, 0.1); text-shadow: 0 0 18px rgba(56, 189, 248, 0.8); opacity: 1; }
}

/* ==========================================================================
   == AIMBOT SCENE (SILENT ON / SILENT FOV) PREMIUM 3D VISUALS ==
   ========================================================================== */
.bp-scene.aimbot {
  background:
    radial-gradient(circle at center, transparent 35%, rgba(167, 139, 250, 0.05) 35%, rgba(167, 139, 250, 0.05) 37%, transparent 37%),
    radial-gradient(circle at center, transparent 65%, rgba(167, 139, 250, 0.05) 65%, rgba(167, 139, 250, 0.05) 67%, transparent 67%),
    radial-gradient(circle, rgba(15, 23, 42, 0.4), rgba(6, 11, 24, 0.95)),
    linear-gradient(rgba(167, 139, 250, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.02) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 20px 20px, 20px 20px !important;
  perspective: 400px;
}

/* Rotating scanning radar beam */
.bp-scene.aimbot::before {
  content: '';
  position: absolute;
  inset: -100px;
  background: conic-gradient(from 0deg, rgba(167, 139, 250, 0.15) 0deg, rgba(167, 139, 250, 0.03) 90deg, transparent 180deg) !important;
  transform-origin: center center;
  animation: radarSweep 5s linear infinite !important;
  pointer-events: none;
  z-index: 1;
}
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mannequin target dummy */
.bp-scene.aimbot .ho-player {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 55px;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.15), transparent) !important;
  border: 1.5px solid rgba(167, 139, 250, 0.35) !important;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.2) !important;
  animation: aimbotTargetBreathe 2.5s ease-in-out infinite alternate !important;
  z-index: 2;
}
@keyframes aimbotTargetBreathe {
  0% { transform: translateX(-50%) scale(0.96) rotateY(-10deg); }
  100% { transform: translateX(-50%) scale(1.04) rotateY(10deg); }
}

.bp-scene.aimbot .ho-player::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.5) 20%, rgba(167, 139, 250, 0.1) 70%) !important;
  border: 1.5px solid rgba(167, 139, 250, 0.4) !important;
  box-shadow: 0 0 15px rgba(167, 139, 250, 0.6) !important;
}

/* Lock-on laser light on head */
.bp-scene.aimbot .ho-player::after {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff !important;
  box-shadow: 0 0 10px #a78bfa, 0 0 20px #a78bfa, 0 0 35px #a78bfa !important;
  animation: lockOnGlow 0.6s ease infinite alternate !important;
}
@keyframes lockOnGlow {
  0% { box-shadow: 0 0 8px #a78bfa, 0 0 15px #a78bfa; transform: translate(-50%, -50%) scale(0.8); }
  100% { box-shadow: 0 0 16px #a78bfa, 0 0 30px #a78bfa; transform: translate(-50%, -50%) scale(1.2); }
}

/* Flying laser bullet route for SilentOn */
.bp-scene.aimbot .ho-arrow {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 65px);
  width: 55px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a78bfa, #ffffff) !important;
  transform: rotate(-30deg) !important;
  transform-origin: left center;
  animation: bulletFlight 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite !important;
  z-index: 3;
}
@keyframes bulletFlight {
  0% { width: 0; opacity: 0; }
  10% { opacity: 1; }
  70% { width: 72px; opacity: 1; }
  90%, 100% { width: 72px; opacity: 0; }
}

.bp-scene.aimbot .ho-arrow::before {
  content: '';
  position: absolute;
  right: 0;
  top: -2.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff !important;
  box-shadow: 0 0 12px #a78bfa, 0 0 20px #ffffff !important;
}

/* Purple explosion hitmarker for SilentOn */
.bp-scene.aimbot .ho-hitmarker {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
  width: 28px;
  height: 28px;
  pointer-events: none;
  animation: purpleHitmarkerBlast 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) infinite !important;
  z-index: 4;
}
.bp-scene.aimbot .ho-hitmarker::before,
.bp-scene.aimbot .ho-hitmarker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2.5px;
  background: #ffffff !important;
  box-shadow: 0 0 8px #a78bfa !important;
}
.bp-scene.aimbot .ho-hitmarker::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
.bp-scene.aimbot .ho-hitmarker::after { transform: translate(-50%, -50%) rotate(-45deg) !important; }

@keyframes purpleHitmarkerBlast {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; box-shadow: 0 0 0 0px rgba(167, 139, 250, 0.8); }
  55% { opacity: 0; }
  60% { opacity: 1; }
  90% { box-shadow: 0 0 0 25px rgba(167, 139, 250, 0); }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* Glowing SILENT! alarm banner */
.bp-scene.aimbot .ho-label {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  color: #a78bfa !important;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.8), 0 0 25px rgba(167, 139, 250, 0.4) !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
  padding: 4px 14px !important;
  border-radius: 6px !important;
  letter-spacing: 2.5px !important;
  animation: purpleAlarmPulse 0.6s ease infinite alternate !important;
  white-space: nowrap;
  z-index: 5;
}
@keyframes purpleAlarmPulse {
  0% { opacity: 0.6; box-shadow: 0 0 3px rgba(167, 139, 250, 0.3); }
  100% { opacity: 1; box-shadow: 0 0 14px rgba(167, 139, 250, 0.6); }
}

/* Revolving Pulsing FOV Circle for SilentFOV */
.bp-scene.aimbot .fov-circle {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 2px dashed rgba(167, 139, 250, 0.65) !important;
  border-radius: 50% !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 
    0 0 20px rgba(167, 139, 250, 0.25), 
    inset 0 0 20px rgba(167, 139, 250, 0.15) !important;
  animation: fovCircleRotate 8s linear infinite, fovCirclePulse 2.5s ease-in-out infinite alternate !important;
  z-index: 1;
}
@keyframes fovCircleRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes fovCirclePulse {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.92); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) rotate(180deg) scale(1.08); opacity: 1; }
}

/* Pulsating target dots inside radar sweep */
.bp-scene.aimbot .fov-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff !important;
  box-shadow: 0 0 8px #a78bfa, 0 0 15px #a78bfa !important;
  animation: targetDotPulse 1.2s infinite alternate !important;
  z-index: 2;
}
@keyframes targetDotPulse {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.3); }
}

/* ===== CUSTOM SCROLLBAR (THEMED PREMIUM NEON) ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #060b18;
  border-left: 1px solid rgba(255, 255, 255, 0.03);
}
::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.15);
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 10px rgba(56, 189, 248, 0.15);
  transition: all 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.45);
  box-shadow: inset 0 0 0 10px rgba(56, 189, 248, 0.45);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.15) #060b18;
}

/* ===== USER PROFILE DROPDOWN ===== */
.profile-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 290px;
  background: linear-gradient(180deg, #101625, #070a12) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 18px !important;
  padding: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.15) !important;
  display: none;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  cursor: default !important;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-dropdown.show {
  display: flex !important;
  animation: dropdownFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.profile-dropdown h3 {
  font-size: 15px;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 6px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}
.profile-dropdown .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  border-radius: 6px;
}
.profile-dropdown .info-row:hover {
  background: rgba(56, 189, 248, 0.05);
}
.profile-dropdown .info-label {
  color: #818cf8;
  font-weight: 700;
}
.profile-dropdown .info-value {
  color: #e2e8f0;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}