

:root {
  --bg:#09090f; --bg2:#0f0f1a; --bg3:#141421; --sf:#1a1a2e; --sf2:#22223a;
  --b:rgba(255,255,255,.06); --b2:rgba(255,255,255,.11); --b3:rgba(255,255,255,.18);
  --red:#ff3355; --red2:#ff6680; --red3:rgba(255,51,85,.1);
  --gold:#f5c842; --gold-hi:#ffe9a8; --gold-lo:#c9870f;
  --coin:#f5c842; --coin2:#ffe3a0; --coin3:rgba(245,200,66,.12);
  --live:#00e896; --live3:rgba(0,232,150,.08);
  --purple:#9d6bff; --purple-hi:#c9acff; --purple-lo:#6a34c8;
  --acc:#9d6bff; --acc3:rgba(157,107,255,.12);
  --tx:#f0f0f8; --tx2:#8888aa; --tx3:#44445a;
  --fd:'Plus Jakarta Sans','Sora',system-ui,-apple-system,'Segoe UI',sans-serif; --fb:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:12px; --rs:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--tx);font-family:var(--fb);font-weight:400;letter-spacing:-.006em;overflow-x:hidden;padding-top:36px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Jerarquía tipográfica: títulos con Plus Jakarta Sans (peso alto, un poco
   ceñido) y cuerpo con Inter (legible). Esto da el ritmo dinámico y limpio. */
h1,h2,h3,h4,h5,h6{font-family:var(--fd);letter-spacing:-.02em;line-height:1.15}
h1{font-weight:800}h2{font-weight:800}h3{font-weight:700}h4,h5,h6{font-weight:700}
strong,b{font-weight:700}
button,input,textarea,select{font-family:var(--fb)}/* ── ADMIN RETIROS ── */
.ar-filter-btn{padding:5px 11px;border-radius:6px;border:none;background:none;color:var(--tx2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.ar-filter-btn:hover{color:var(--tx)}
.ar-filter-btn.ar-active{background:var(--red);color:var(--tx-hi)}
.ar-filter-badge{background:var(--coin);color:#000;font-size:9px;font-weight:800;padding:1px 5px;border-radius:10px;margin-left:3px}
.ar-row{border-bottom:1px solid var(--b);transition:background .12s;cursor:pointer}
.ar-row:hover{background:var(--wa-03)}
.ar-row.ar-selected{background:rgba(123,92,255,.08);border-left:2px solid var(--acc)}
.ar-status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700}
.ar-status-pending{background:rgba(245,166,35,.12);color:var(--coin)}
.ar-status-approved{background:rgba(123,92,255,.12);color:#a78bfa}
.ar-status-paid{background:rgba(0,232,150,.1);color:var(--live)}
.ar-status-rejected{background:rgba(255,51,85,.1);color:var(--red)}
.ar-timeline{display:flex;flex-direction:column;gap:0}
.ar-tl-step{display:flex;gap:10px;align-items:flex-start;padding:8px 0}
.ar-tl-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:3px;border:2px solid}
.ar-tl-dot.done{background:var(--live);border-color:var(--live)}
.ar-tl-dot.current{background:var(--coin);border-color:var(--coin);box-shadow:0 0 0 3px rgba(245,166,35,.2)}
.ar-tl-dot.rejected-dot{background:var(--red);border-color:var(--red)}
.ar-tl-dot.pending-dot{background:transparent;border-color:var(--b2)}
.ar-tl-line{width:2px;background:var(--b2);margin-left:5px;height:14px}
.ar-action-btn{width:100%;padding:10px;border-radius:var(--rs);font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .15s;font-family:var(--fb)}
.ar-btn-approve{background:var(--live);color:#000}
.ar-btn-approve:hover{background:#00c878}
.ar-btn-paid{background:var(--acc);color:var(--tx-hi)}
.ar-btn-paid:hover{background:#6849e8}
.ar-btn-reject{background:rgba(255,51,85,.15);color:var(--red);border:1px solid rgba(255,51,85,.3)}
.ar-btn-reject:hover{background:rgba(255,51,85,.25)}

/* TICKER */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ===== Ticker Destacado · dorado con presencia ===== */
.feat-badge{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(90deg,var(--gold-hi),var(--gold) 72%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 8px rgba(245,200,66,.35))}
.feat-row{display:inline-flex;align-items:center;gap:7px;padding:0 22px;
  border-right:1px solid rgba(245,200,66,.14);font-size:11px;letter-spacing:.4px;white-space:nowrap}
.feat-row .ic{filter:drop-shadow(0 0 6px rgba(245,200,66,.45))}
.feat-txt{font-weight:500;
  background:linear-gradient(100deg,#cf9a1c 0%,var(--gold) 30%,#fff3c4 47%,var(--gold) 64%,#cf9a1c 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:featShine 5.5s linear infinite}
.feat-idle{font-size:11px;padding:0 24px;letter-spacing:.5px;font-weight:400;color:rgba(245,200,66,.5)}
@keyframes featShine{from{background-position:200% center}to{background-position:-200% center}}
.ti{display:inline-flex;align-items:center;gap:7px;padding:0 18px;border-right:1px solid var(--b)}

/* VIEWS */
.view{display:none}
.view.on{display:block}

/* ===== LANDING ===== */
nav{display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:62px;background:rgba(9,9,15,.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--b);position:sticky;top:0;z-index:200}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--fd);font-size:20px;font-weight:900;cursor:pointer}
.logo-ico{width:30px;height:30px;background:var(--red);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px}
.logo em{color:var(--red);font-style:normal}
.nav-links{display:flex;gap:2px}
.nav-link{padding:7px 13px;border-radius:var(--rs);font-size:13px;color:var(--tx2);cursor:pointer;background:none;border:none;font-family:var(--fb);transition:all .15s}
.nav-link:hover{background:var(--sf);color:var(--tx)}
.nav-actions{display:flex;gap:8px}

/* HERO */
.hero{max-width:1160px;margin:0 auto;padding:80px 40px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:5px;background:var(--red3);border:1px solid rgba(255,51,85,.2);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600;color:var(--red2);margin-bottom:18px}
.hero-title{font-family:var(--fd);font-size:58px;font-weight:900;line-height:1.04;letter-spacing:-2.5px;margin-bottom:16px}
.hero-title .hl{color:var(--red)}
.hero-sub{font-size:16px;color:var(--tx2);line-height:1.75;margin-bottom:30px;max-width:460px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.hero-trust{display:flex;gap:18px;flex-wrap:wrap}
.trust{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx3)}

/* LIVE CARD MOCK */
.live-card-mock{background:var(--bg3,var(--bg3));border:1px solid var(--b2);border-radius:16px;padding:20px;overflow:hidden;position:relative}
.live-card-mock::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,51,85,.07),transparent 70%);pointer-events:none}
.lm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.lm-badge{background:var(--red);color:var(--tx-hi);font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;letter-spacing:.3px;display:flex;align-items:center;gap:4px}
.lm-viewers{font-size:12px;color:var(--tx2);display:flex;align-items:center;gap:4px}
.lm-name{font-family:var(--fd);font-size:15px;font-weight:800;margin-bottom:3px}
.lm-platform{font-size:11px;color:var(--tx3);margin-bottom:14px}
.lm-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.lm-stat{background:var(--sf);border-radius:var(--rs);padding:11px}
.lm-stat-lbl{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.lm-stat-val{font-family:var(--fd);font-size:22px;font-weight:800}
.lm-stat-val.r{color:var(--red)}.lm-stat-val.c{color:var(--coin)}
.lm-prog-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--tx3);margin-bottom:5px}
.lm-bar{height:5px;background:var(--sf2);border-radius:5px;overflow:hidden;margin-bottom:12px}
.lm-fill{height:100%;background:linear-gradient(90deg,var(--red),var(--coin));border-radius:5px;width:65%;animation:pani 2s ease-in-out infinite alternate}
@keyframes pani{from{width:60%}to{width:72%}}
.lm-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;background:var(--sf);border-radius:var(--rs);padding:10px;text-align:center}
.lm-b-val{font-family:var(--fd);font-size:16px;font-weight:800}
.lm-b-lbl{font-size:9px;color:var(--tx3);margin-top:1px}

/* SECTION */
.section{max-width:1160px;margin:0 auto;padding:0 40px 80px}
.sec-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--red);margin-bottom:8px}
.sec-title{font-family:var(--fd);font-size:clamp(26px,3.5vw,40px);font-weight:900;letter-spacing:-.5px;line-height:1.1;margin-bottom:8px}
.sec-sub{font-size:14px;color:var(--tx2);margin-bottom:44px}

/* HOW IT WORKS */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.how-side-title{font-family:var(--fd);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:18px;display:flex;align-items:center;gap:7px}
.how-side-title.r{color:var(--red)}.how-side-title.g{color:var(--live)}
.how-steps{display:flex;flex-direction:column;gap:14px}
.how-step{display:flex;gap:12px;align-items:flex-start}
.how-num{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:12px;font-weight:800;flex-shrink:0}
.how-num.r{background:var(--red3);border:1px solid rgba(255,51,85,.2);color:var(--red)}
.how-num.g{background:var(--live3);border:1px solid rgba(0,232,150,.2);color:var(--live)}
.how-step h4{font-family:var(--fd);font-size:13px;font-weight:700;margin-bottom:2px}
.how-step p{font-size:12px;color:var(--tx3);line-height:1.55}
.earn-pill{display:inline-flex;align-items:center;gap:3px;margin-top:5px;background:var(--coin3);border:1px solid rgba(245,166,35,.2);border-radius:20px;padding:2px 9px;font-size:10px;font-weight:600;color:var(--coin)}

/* CAMPAIGNS */
.camp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px}
.camp-card{background:var(--bg3,var(--bg3));border:1px solid var(--b);border-radius:var(--r);overflow:hidden;transition:border-color .15s,transform .15s;cursor:pointer}
.camp-card:hover{border-color:var(--b2);transform:translateY(-2px)}
.cc-thumb{height:90px;background:var(--sf);display:flex;align-items:center;justify-content:center;font-size:30px;position:relative}
.cc-live{position:absolute;top:7px;left:7px;background:var(--red);color:var(--tx-hi);font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px}
.cc-v{position:absolute;top:7px;right:7px;background:var(--ba-60);color:var(--tx-hi);font-size:10px;padding:2px 6px;border-radius:4px}
.cc-body{padding:11px}
.cc-name{font-family:var(--fd);font-size:13px;font-weight:700;margin-bottom:2px}
.cc-plat{font-size:10px;color:var(--tx3);margin-bottom:8px}
.cc-bar-wrap{margin-bottom:7px}
.cc-bar-info{display:flex;justify-content:space-between;font-size:10px;color:var(--tx3);margin-bottom:3px}
.cc-bar{height:3px;background:var(--sf2);border-radius:3px;overflow:hidden}
.cc-fill{height:100%;background:var(--red);border-radius:3px}
.cc-bottom{display:flex;justify-content:space-between;align-items:center}
.cc-reward{font-family:var(--fd);font-size:14px;font-weight:800;color:var(--coin)}
.cc-btn{background:var(--red3);border:1px solid rgba(255,51,85,.2);color:var(--red);border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--fb)}

/* RANKING TABLE */
.rank-table{background:var(--bg3,var(--bg3));border:1px solid var(--b);border-radius:var(--r);overflow:hidden}
.rank-head{display:grid;grid-template-columns:50px 1fr 130px 140px 130px;padding:11px 18px;border-bottom:1px solid var(--b);font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.rank-row{display:grid;grid-template-columns:50px 1fr 130px 140px 130px;padding:13px 18px;border-bottom:1px solid var(--b);align-items:center;transition:background .15s}
.rank-row:last-child{border-bottom:none}
.rank-row:hover{background:var(--sf)}
.rpos{font-family:var(--fd);font-size:13px;font-weight:800}
.rpos.p1{color:#FFD700}.rpos.p2{color:#C0C0C0}.rpos.p3{color:#CD7F32}.rpos.pn{color:var(--tx3)}
.ruser{display:flex;align-items:center;gap:9px}
.rav{width:32px;height:32px;border-radius:8px;background:var(--sf2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#a78bfa}
.rav.p1{border:2px solid #FFD700}.rav.p2{border:2px solid #C0C0C0}.rav.p3{border:2px solid #CD7F32}
.rname{font-size:13px;font-weight:600}.rniche{font-size:10px;color:var(--tx3)}
.rnum{font-family:var(--fd);font-size:13px;font-weight:700}
.rnum.c{color:var(--coin)}
.rpbar{height:4px;background:var(--sf2);border-radius:4px;overflow:hidden;margin-top:3px}
.rpfill{height:100%;background:var(--red);border-radius:4px}

/* FAQ */
.faq-wrap{max-width:860px;margin:0 auto;text-align:center}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin-top:32px}
.faq-item{background:var(--bg3,var(--bg3));border:1px solid var(--b);border-radius:var(--r);padding:18px}
.faq-q{font-family:var(--fd);font-size:13px;font-weight:700;margin-bottom:6px}
.faq-a{font-size:12px;color:var(--tx3);line-height:1.6}

/* CTA */
.cta-sec{background:var(--bg2);border-top:1px solid var(--b);padding:64px 40px;text-align:center}
.cta-title{font-family:var(--fd);font-size:clamp(26px,4vw,42px);font-weight:900;letter-spacing:-.5px;margin-bottom:10px}
.cta-sub{font-size:14px;color:var(--tx3);margin-bottom:26px}
.cta-note{font-size:11px;color:var(--tx3);margin-top:10px}

/* FOOTER */
footer{padding:28px 40px;border-top:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-links{display:flex;gap:18px}
.footer-link{font-size:12px;color:var(--tx3);cursor:pointer}.footer-link:hover{color:var(--tx2)}
.cd-footer{display:block;border-top:1px solid var(--b);background:var(--bg2);margin-top:30px}
.cdf-inner{max-width:1080px;margin:0 auto;padding:30px 24px 16px;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between}
.cdf-brand{max-width:340px}
.cdf-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px}
.cdf-coin{width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,var(--coin),var(--coin2));display:flex;align-items:center;justify-content:center;color:#3a2606;font-weight:800}
.cdf-gold{color:var(--coin2)}
.cdf-tag{color:var(--tx3);font-size:12.5px;margin:9px 0 13px;line-height:1.5}
.cdf-social{display:flex;gap:9px}
.cdf-soc{width:34px;height:34px;border-radius:10px;border:1px solid var(--b2);background:var(--sf);display:flex;align-items:center;justify-content:center;color:var(--tx3);cursor:default;transition:.15s;position:relative}
.cdf-soc svg{width:17px;height:17px}
.cdf-soc:hover{color:var(--coin2);border-color:var(--coin3);transform:translateY(-2px)}
.cdf-soc::after{content:'Pr\00f3ximamente';position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:#000;color:var(--coin2);font-size:10px;padding:3px 7px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;border:1px solid var(--coin3)}
.cdf-soc:hover::after{opacity:1}
.cdf-links{display:flex;flex-direction:column;gap:7px}
.cdf-links-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--coin2);font-weight:700;margin-bottom:2px}
.cdf-links a{color:var(--tx2);text-decoration:none;font-size:13.5px;transition:.13s}
.cdf-links a:hover{color:var(--coin2)}
.cdf-bottom{max-width:1080px;margin:0 auto;padding:13px 24px 22px;border-top:1px solid var(--b);display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:11.5px;color:var(--tx3)}
@media(max-width:680px){.cdf-inner{flex-direction:column;gap:20px}}

/* ===== APP ===== */
.app-wrap{display:flex;height:calc(100vh - 36px);height:calc(100dvh - 36px)}

/* UNA SOLA BARRA EN LA APP (fix 2026-07-27) ────────────────────────────────
   En escritorio salían DOS barras pegadas en el borde derecho: la de la
   ventana y la de .main-area. La del documento no debería existir nunca —
   el alto está calculado para que cuadre clavado: 36px de #prestige-bar
   (fijo) + calc(100vh - 36px) de .app-wrap = 100vh exacto. El problema es que
   ese "exacto" no lo es: con zoom del navegador o escalado de Windows
   distinto de 100%, 100vh cae en un valor fraccionario y el redondeo deja
   1px de sobra → la ventana cree que hay que desplazar y dibuja su barra
   entera al lado de la de .main-area.
   Se bloquea el desplazamiento del documento: el único contenedor que
   scrollea es .main-area, que es el que tiene el contenido. Sólo a partir de
   821px, porque en móvil cd-mobile.css hace .app-wrap{height:auto} a
   propósito y ahí sí debe scrollear el documento. */
@media (min-width:821px){
  html,body{height:100%;overflow-y:hidden}
}

/* PÁGINAS-IFRAME: UNA SOLA BARRA (fix 2026-07-27) ───────────────────────────
   Sonidos y Avatar 2D no son páginas normales: son un <iframe> a otro
   documento. Con el .page llevando su padding de 24/28 px y el <iframe> con
   alto fijo, salían DOS barras haciendo lo mismo — la del iframe (pegada al
   borde del panel) y la de .main-area (pegada al borde de la ventana). Dos
   ruedas para el mismo contenido.
   Aquí la página-iframe pasa a llenar EXACTAMENTE el hueco que queda bajo la
   barra superior: .main-area se vuelve una columna flex, la página es el
   elemento elástico y el iframe la llena entera. Así solo scrollea el iframe,
   y su barra queda pegada al borde derecho de la ventana — la que se quiso
   conservar. El pie se oculta en estas dos páginas: no había forma de llegar
   a él sin devolver la segunda barra.
   Se limita a ≥821px porque en móvil cd-mobile.css hace .app-wrap{height:auto}
   a propósito y allí el documento sí debe scrollear. */
@media (min-width:821px){
  .main-area:has(> .page.pg-full.on){display:flex;flex-direction:column;overflow:hidden}
  .main-area:has(> .page.pg-full.on) > #cd-topbar{flex:0 0 auto}
  .main-area:has(> .page.pg-full.on) .cd-footer{display:none}
  .page.pg-full.on{flex:1 1 auto;min-height:0;padding:0;display:flex}
  /* El <iframe> trae height y min-height EN LÍNEA (calc(100vh-74px) y 560px).
     Un estilo en línea gana a la hoja, así que ambos necesitan !important:
     sin tocar min-height, en pantallas cortas los 560px forzaban desborde
     y devolvían la segunda barra. */
  .page.pg-full.on > iframe{flex:1 1 auto;width:100%;height:auto !important;min-height:0 !important}
}

/* SIDEBAR */
.sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--b);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}/* MAIN */
.main-area{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.page{display:none;padding:24px 28px;min-height:100%}
.page.on{display:block}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.topbar-l h1{font-family:var(--fd);font-size:21px;font-weight:900;letter-spacing:-.3px}
.topbar-l p{font-size:12px;color:var(--tx3);margin-top:2px}
.topbar-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.live-badge{display:flex;align-items:center;gap:5px;background:var(--live3);border:1px solid rgba(0,232,150,.2);border-radius:20px;padding:5px 11px;font-size:11px;font-weight:600;color:var(--live)}
.live-dot{width:5px;height:5px;background:var(--live);border-radius:50%;animation:blink 1.4s infinite}
.coin-wid{display:flex;align-items:center;gap:7px;background:var(--sf);border:1px solid var(--b);border-radius:var(--rs);padding:6px 11px;cursor:pointer}
.cw-ico{width:21px;height:21px;background:linear-gradient(135deg,var(--coin),#f97316);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.cw-val{font-family:var(--fd);font-size:14px;font-weight:800;color:var(--coin)}
.cw-lbl{font-size:9px;color:var(--tx3)}
.notif-btn{width:34px;height:34px;background:var(--sf);border:1px solid var(--b);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx2);position:relative;font-size:15px}
.notif-dot{position:absolute;top:5px;right:5px;width:6px;height:6px;background:var(--red);border-radius:50%;border:2px solid var(--bg2)}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:18px}
.stat-c{background:radial-gradient(120% 100% at 100% 0%,rgba(245,200,66,.05),transparent 50%),linear-gradient(165deg,#15141f 0%,#0e0d16 100%);border:1px solid var(--b);border-radius:var(--r);padding:17px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.24);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.stat-c:hover{border-color:rgba(124,92,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(124,92,255,.13);transform:translateY(-2px)}
.stat-c::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px}
.stat-c.sr::after{background:var(--red)}.stat-c.sg::after{background:var(--live)}.stat-c.sa::after{background:var(--acc)}.stat-c.sc::after{background:var(--coin)}
.stat-lbl{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.stat-val{font-family:var(--fd);font-size:26px;font-weight:900;line-height:1.1;margin-bottom:4px}
.stat-trend{font-size:11px;color:var(--tx3)}
.up{color:var(--live);font-weight:600}

/* CARDS */
.card{background:radial-gradient(130% 100% at 0% 0%,rgba(124,92,255,.055),transparent 52%),radial-gradient(120% 90% at 100% 0%,rgba(245,200,66,.04),transparent 46%),linear-gradient(165deg,#15141f 0%,#0e0d16 100%);border:1px solid var(--b);border-radius:var(--r);overflow:hidden;margin-bottom:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.28);transition:border-color .22s ease,box-shadow .22s ease}
.card:hover{border-color:rgba(245,200,66,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 36px rgba(124,92,255,.12),0 6px 18px rgba(0,0,0,.3)}
.card-h{padding:13px 17px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)}
.card-title{font-family:var(--fd);font-size:13px;font-weight:700}
.card-b{padding:15px 17px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.g2 .card{margin-bottom:0}

/* LIVE ROWS */
.lr{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--b)}
.lr:last-child{border-bottom:none}
.lr-thumb{width:48px;height:48px;border-radius:9px;background:var(--sf);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;position:relative}
.lr-live{position:absolute;bottom:1px;left:1px;background:var(--red);color:var(--tx-hi);font-size:7px;font-weight:700;padding:1px 3px;border-radius:3px}
.lr-plat{position:absolute;bottom:1px;right:1px;font-size:7px;font-weight:700;padding:1px 3px;border-radius:3px}
.lr-plat.tt{background:#000;color:var(--tx-hi)}.lr-plat.ki{background:#53ff53;color:#000}
.lr-info{flex:1;min-width:0}
.lr-name{font-size:13px;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-meta{font-size:11px;color:var(--tx3);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.lr-vc{color:var(--live);font-weight:600}
.lr-bar{height:3px;background:var(--sf2);border-radius:3px;overflow:hidden}
.lr-bf{height:100%;background:var(--red);border-radius:3px}
.lr-right{text-align:right;flex-shrink:0}
.lr-reward{font-family:var(--fd);font-size:13px;font-weight:800;color:var(--coin)}
.lr-rlbl{font-size:9px;color:var(--tx3)}
.bs-red{background:var(--red);color:var(--tx-hi);margin-top:4px}.bs-red:hover{background:#e02848}
.bs-g{background:var(--sf2);color:var(--tx2);border:1px solid var(--b2)}

/* AFF ROWS */
.ar{display:flex;align-items:center;gap:9px;padding:8px;background:var(--sf);border-radius:var(--rs);margin-bottom:5px}
.ar:last-child{margin-bottom:0}
.ar-av{width:30px;height:30px;border-radius:7px;background:var(--sf2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#a78bfa;flex-shrink:0}
.ar-name{font-size:12px;font-weight:600}
.ar-date{font-size:10px;color:var(--tx3)}
.ar-earn{margin-left:auto;font-family:var(--fd);font-size:12px;font-weight:700;color:var(--coin)}

/* WEEKLY */
.week-row{display:flex;justify-content:space-between;gap:4px;margin-bottom:14px}
.day{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.day-c{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:12px;font-weight:700;border:2px solid var(--b2);color:var(--tx3)}
.day-c.done{background:var(--live);border-color:var(--live);color:#000}
.day-c.today{border-color:var(--red);color:var(--red)}
.day-l{font-size:9px;color:var(--tx3)}

/* TIMER */
.timer-ring{width:60px;height:60px;position:relative;flex-shrink:0}
.timer-ring svg{transform:rotate(-90deg)}
.trb{fill:none;stroke:var(--sf2);stroke-width:4}
.trf{fill:none;stroke:var(--live);stroke-width:4;stroke-linecap:round;stroke-dasharray:163;stroke-dashoffset:40}
.timer-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:11px;font-weight:700}

/* PROGRESS */
.pbar{height:4px;background:var(--sf2);border-radius:4px;overflow:hidden;margin-top:4px}
.pf{height:100%;border-radius:4px}
.pf-r{background:var(--red)}.pf-g{background:var(--live)}.pf-c{background:var(--coin)}.pf-a{background:var(--acc)}

/* PILLS */
.pill{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:500}
.pill-tt{background:var(--wa-05);color:var(--tx2)}
.pill-kick{background:rgba(83,255,83,.07);color:#53ff53}

/* INPUTS */
.inp-g{margin-bottom:13px}
.inp-lbl{font-size:10px;color:var(--tx3);display:block;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.inp{width:100%;background:var(--sf);border:1px solid var(--b2);border-radius:var(--rs);padding:9px 12px;color:var(--tx);font-family:var(--fb);font-size:13px;outline:none;transition:border-color .15s}
.inp:focus{border-color:var(--red)}
.inp::placeholder{color:var(--tx3)}
select.inp option{background:var(--sf)}

/* BADGE GRID */
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.badge-card{background:var(--bg3,var(--bg3));border:1px solid var(--b);border-radius:var(--r);padding:14px;text-align:center}
.badge-ico{font-size:28px;margin-bottom:6px}
.badge-name{font-family:var(--fd);font-size:11px;font-weight:700;margin-bottom:2px}
.badge-desc{font-size:10px;color:var(--tx3);line-height:1.4}
.badge-card.locked{opacity:.3;filter:grayscale(1)}

/* AFF PAGE */
.aff-code-box{background:var(--bg);border:1px dashed var(--b3);border-radius:var(--rs);padding:12px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.aff-code-val{font-family:var(--fd);font-size:17px;font-weight:900;color:var(--live);letter-spacing:2px}
.aff-url{font-size:10px;color:var(--tx3);margin-top:2px}
.tier-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--sf);border-radius:var(--rs);border:1px solid var(--b);margin-bottom:5px}
.tier-name{font-size:12px;font-weight:600}
.tier-pct{font-family:var(--fd);font-size:13px;font-weight:800;color:var(--live)}

/* RANK LEVELS */
.rank-levels{display:flex;flex-direction:column;gap:8px}
.rl-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--sf);border-radius:var(--rs)}
.rl-ico{font-size:28px;width:36px;text-align:center;flex-shrink:0}
.rl-name{font-family:var(--fd);font-size:13px;font-weight:700;margin-bottom:1px}
.rl-range{font-size:10px;color:var(--tx3)}
.rl-perks{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.rl-perk{font-size:9px;padding:2px 6px;border-radius:20px;background:var(--sf2);color:var(--tx2)}

/* BOOST PAGE */
.slider-wrap{margin-bottom:16px}
.slider-top{display:flex;justify-content:space-between;margin-bottom:6px}
.slider-lbl{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.slider-val{font-family:var(--fd);font-size:18px;font-weight:900;color:var(--red)}
input[type=range]{width:100%;-webkit-appearance:none;height:4px;border-radius:4px;outline:none;cursor:pointer;background:var(--sf2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--red);cursor:pointer;border:2px solid var(--bg3,var(--bg3));box-shadow:0 0 0 2px rgba(255,51,85,.3)}
/* Perilla visible en sliders de campaña (overlay sobre barra gradiente) */
/* Track nativo completamente transparente — la barra coloreada es el div debajo */
#tap-slider::-webkit-slider-runnable-track,#tap-mult-slider::-webkit-slider-runnable-track,
#com-slider::-webkit-slider-runnable-track,#com-mult-slider::-webkit-slider-runnable-track,
#pre-q-slider::-webkit-slider-runnable-track,#pre-qr-slider::-webkit-slider-runnable-track,
#pre-p-slider::-webkit-slider-runnable-track,#pre-pr-slider::-webkit-slider-runnable-track,
#pre-mult-slider::-webkit-slider-runnable-track{height:6px;background:transparent;border:none;box-shadow:none}
#tap-slider::-moz-range-track,#tap-mult-slider::-moz-range-track,
#com-slider::-moz-range-track,#com-mult-slider::-moz-range-track,
#pre-q-slider::-moz-range-track,#pre-qr-slider::-moz-range-track,
#pre-p-slider::-moz-range-track,#pre-pr-slider::-moz-range-track,
#pre-mult-slider::-moz-range-track{height:6px;background:transparent;border:none}
/* Perilla: círculo blanco uniforme, sin borde de color */
#tap-slider::-webkit-slider-thumb,#tap-mult-slider::-webkit-slider-thumb,
#com-slider::-webkit-slider-thumb,#com-mult-slider::-webkit-slider-thumb,
#pre-q-slider::-webkit-slider-thumb,#pre-qr-slider::-webkit-slider-thumb,
#pre-p-slider::-webkit-slider-thumb,#pre-pr-slider::-webkit-slider-thumb,
#pre-mult-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#fff7e6 58%,#ffe9b8);border:3px solid var(--coin2);cursor:pointer;box-shadow:0 0 0 3px rgba(245,166,35,.16),0 0 14px rgba(245,166,35,.6),0 3px 9px var(--ba-60);margin-top:-8px;transition:transform .12s,box-shadow .12s}
#tap-slider::-moz-range-thumb,#tap-mult-slider::-moz-range-thumb,
#com-slider::-moz-range-thumb,#com-mult-slider::-moz-range-thumb,
#pre-q-slider::-moz-range-thumb,#pre-qr-slider::-moz-range-thumb,
#pre-p-slider::-moz-range-thumb,#pre-pr-slider::-moz-range-thumb,
#pre-mult-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff7e6;border:3px solid var(--coin2);cursor:pointer;box-shadow:0 0 0 3px rgba(245,166,35,.16),0 0 14px rgba(245,166,35,.6),0 3px 9px var(--ba-60);transition:transform .12s,box-shadow .12s}
/* Hover sutil */
#tap-slider:hover::-webkit-slider-thumb,#tap-mult-slider:hover::-webkit-slider-thumb,
#com-slider:hover::-webkit-slider-thumb,#com-mult-slider:hover::-webkit-slider-thumb,
#pre-q-slider:hover::-webkit-slider-thumb,#pre-qr-slider:hover::-webkit-slider-thumb,
#pre-p-slider:hover::-webkit-slider-thumb,#pre-pr-slider:hover::-webkit-slider-thumb,
#pre-mult-slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(245,166,35,.22),0 0 18px rgba(245,166,35,.7),0 3px 9px var(--ba-60)}
/* Efecto arrastre */
#tap-slider:active::-webkit-slider-thumb,#tap-mult-slider:active::-webkit-slider-thumb,
#com-slider:active::-webkit-slider-thumb,#com-mult-slider:active::-webkit-slider-thumb,
#pre-q-slider:active::-webkit-slider-thumb,#pre-qr-slider:active::-webkit-slider-thumb,
#pre-p-slider:active::-webkit-slider-thumb,#pre-pr-slider:active::-webkit-slider-thumb,
#pre-mult-slider:active::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 6px rgba(245,166,35,.26),0 0 22px rgba(245,166,35,.8),0 4px 11px rgba(0,0,0,.65)}
/* Input: appearance none, transparent, sin altura visible del track */
#tap-slider,#tap-mult-slider,#com-slider,#com-mult-slider,
#pre-q-slider,#pre-qr-slider,#pre-p-slider,#pre-pr-slider,
#pre-mult-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;outline:none}
/* Small sliders (16px height, 4px bar): adjust thumb margin */
#pre-q-slider::-webkit-slider-thumb,#pre-qr-slider::-webkit-slider-thumb,
#pre-p-slider::-webkit-slider-thumb,#pre-pr-slider::-webkit-slider-thumb{margin-top:-8px}
#pre-q-slider::-moz-range-thumb,#pre-qr-slider::-moz-range-thumb,
#pre-p-slider::-moz-range-thumb,#pre-pr-slider::-moz-range-thumb{margin-top:0}
/* ── Composición Boosts (solo layout/estética; lógica intacta) ── */
.bx-sec{display:flex;align-items:center;gap:14px;margin:26px 0 14px}
.bx-create>.bx-sec:first-child{margin-top:0}
.bx-sec .bx-ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(245,166,35,.28),transparent)}
.bx-sec .bx-tt{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--coin2);white-space:nowrap}
.bx-types{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:14px;margin-bottom:4px}
.bx-tcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border-radius:16px;padding:18px;cursor:pointer;min-height:118px;transition:transform .16s,box-shadow .16s}
.bx-tcard:hover{transform:translateY(-3px)}
.bx-tcard .bx-ic{position:absolute;top:14px;right:14px}
.bx-tcard .bx-em{font-family:var(--fd);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--coin2);font-weight:700}
.bx-tcard h3{font-family:var(--fd);font-weight:700;font-size:17px;margin:8px 0 5px}
.bx-tcard p{font-size:11.5px;color:var(--tx2);line-height:1.5;max-width:92%;margin:0}
.bx-tcard .bx-pro{display:inline-block;font-size:9px;font-weight:800;letter-spacing:1px;color:#1a1206;background:linear-gradient(135deg,#ffe9b0,#f5c142);padding:3px 9px;border-radius:20px;margin-bottom:9px}
.bx-tcard.bx-prem{box-shadow:0 0 30px rgba(245,166,35,.08)}
.bx-common{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;background:var(--sf);border:1px solid var(--b);border-radius:16px;padding:18px;margin-bottom:14px}
.bx-lbl{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--tx2);font-weight:700;margin-bottom:8px;display:block}
.bx-inp{width:100%;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--rs);padding:11px 13px;color:var(--tx);font-family:var(--fb);font-size:13px}
.bx-plats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bx-plat{padding:11px;border-radius:var(--rs);font-size:12px;font-weight:600;text-align:center;cursor:pointer}
.bx-plat.off{opacity:.4;cursor:not-allowed}
.bx-panel{background:var(--sf);border:1px solid rgba(245,166,35,.16);border-radius:16px;padding:22px}
.bx-row{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;align-items:start}
.bx-active{margin-bottom:2px}
.bx-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:11px;align-content:start;max-height:560px;overflow:auto;padding:2px 4px 2px 0}
.bx-cfg2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
.bx-cfg-r{background:linear-gradient(180deg,rgba(245,166,35,.06),transparent 42%),var(--sf2);border:1px solid rgba(245,166,35,.28);border-radius:14px;padding:14px;position:sticky;top:16px}
.bx-check{display:none;margin-top:10px;font-size:11px;font-weight:700;color:var(--red2)}
.bx-tcard[style*="--red"] .bx-check{display:block}
.bx-tcard[style*="--red"]{background:linear-gradient(180deg,rgba(245,166,35,.10),transparent 55%),var(--sf)!important;border:1px solid rgba(245,166,35,.55)!important;box-shadow:0 0 30px rgba(245,166,35,.12),inset 0 0 0 1px rgba(245,166,35,.16)!important;color:var(--tx)!important}
.bx-tcard[style*="--red"] h3{color:var(--coin2)}
.bx-tcard[style*="--red"] .bx-em{color:var(--coin2)}
.bx-plat[style*="--red"]{background:linear-gradient(180deg,rgba(245,166,35,.12),transparent),var(--bg3)!important;border:1px solid rgba(245,166,35,.5)!important;color:var(--coin2)!important}
.bx-row2{display:grid;grid-template-columns:1fr 1.5fr;gap:16px;align-items:start;margin-top:4px}
#page-boosts .bx-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.bx-top{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media(min-width:1000px){.bx-top{grid-template-columns:minmax(0,1.95fr) minmax(0,1fr)}}
.bx-create{min-width:0}
.bx-track{display:flex;flex-direction:column;gap:14px;position:sticky;top:14px}
.bx-balance{width:100%;background:linear-gradient(160deg,rgba(245,166,35,.14),rgba(245,166,35,.03)),var(--bg3);border:1px solid rgba(245,166,35,.30);border-radius:16px;padding:14px 20px;box-shadow:0 0 28px rgba(245,166,35,.08)}
.bx-bal-cap{font-family:var(--fd);font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--coin2);opacity:.85;margin-bottom:9px}
/* ── WALLET rediseño ── */
.wl-wrap{max-width:1180px;margin:0 auto}
.wl-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px}
.wl-top>.wl-hero{grid-column:1/-1}
.wl-left,.wl-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.wl-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;background:radial-gradient(120% 140% at 0% 0%,rgba(245,166,35,.20),transparent 55%),linear-gradient(160deg,rgba(245,166,35,.10),rgba(245,166,35,.02)),var(--bg3);border:1px solid rgba(245,166,35,.40);border-radius:20px;padding:24px 30px;box-shadow:0 0 48px rgba(245,166,35,.14),inset 0 0 0 1px rgba(245,166,35,.06)}
.wl-hero-main{min-width:0}
.wl-hero-cap{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--coin2);opacity:.95}
.wl-hero-num{font-family:var(--fd);font-size:54px;font-weight:900;color:var(--coin2);line-height:1;letter-spacing:-1px;margin-top:8px;text-shadow:0 2px 24px rgba(245,166,35,.25)}
.wl-hero-side{flex:0 0 auto;min-width:240px;display:flex;flex-direction:column;gap:9px}
.wl-split-it{display:flex;flex-direction:column;gap:2px;background:var(--wa-03);border:1px solid rgba(245,166,35,.14);border-radius:11px;padding:9px 13px}
.wl-split-it span{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--tx3)}
.wl-split-it b{font-family:var(--fd);font-size:22px;font-weight:900;color:var(--coin2)}
.wl-split-soon{border-color:var(--b)}
.wl-split-soon b{color:var(--tx3)}
.wl-hero-note{font-size:10px;color:var(--tx3);margin-top:2px;line-height:1.4}
.wl-usd{background:var(--sf);border:1px solid var(--b);border-radius:16px;padding:14px 16px}
.wl-usd-h{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--tx2);margin-bottom:10px}
.wl-usd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wl-usd-cell{text-align:center;background:var(--bg3);border:1px solid var(--b);border-radius:10px;padding:9px 6px}
.wl-usd-v{font-family:var(--fd);font-size:16px;font-weight:900;line-height:1}
.wl-usd-av{color:var(--live)}.wl-usd-pd{color:#f59e0b}.wl-usd-wd{color:var(--tx2)}
.wl-usd-l{font-size:8.5px;letter-spacing:.3px;text-transform:uppercase;color:var(--tx3);margin-top:4px}
.wl-methods{background:var(--sf);border:1px solid var(--b);border-radius:16px;padding:13px 16px}
.wl-methods-h{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--tx2);margin-bottom:9px}
.wl-method{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--b)}
.wl-method:last-of-type{border-bottom:none}
.wl-method-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:13px;flex-shrink:0}
.wl-ic-pp{background:rgba(0,112,201,.16);color:#4ea3e8;border:1px solid rgba(0,112,201,.32)}
.wl-ic-card{background:rgba(245,166,35,.14);color:var(--coin2);border:1px solid rgba(245,166,35,.28)}
.wl-method-n{font-size:12px;font-weight:700;color:var(--tx);min-width:52px}
.wl-method-s{flex:1;font-size:10.5px;color:var(--tx3)}
.wl-link{font-size:10.5px;font-weight:700;padding:5px 13px;border-radius:7px;border:1px solid var(--b2);background:transparent;color:var(--tx3);cursor:not-allowed;opacity:.7}
.wl-methods-note{font-size:9.5px;color:var(--tx3);margin-top:9px;line-height:1.4}
.wl-card{background:var(--sf);border:1px solid var(--b);border-radius:16px;padding:16px;position:relative}
.wl-card-h{font-family:var(--fd);font-size:14px;font-weight:700;color:var(--tx);margin-bottom:12px}
.wl-card .inp-g{margin-bottom:10px}
.wl-soon{background:radial-gradient(130% 150% at 100% 0%,rgba(123,92,255,.22),transparent 55%),linear-gradient(160deg,rgba(245,166,35,.07),rgba(123,92,255,.03)),var(--bg3);border:1px solid rgba(123,92,255,.34);box-shadow:0 0 30px rgba(123,92,255,.12)}
.wl-soon-badge{position:absolute;top:14px;right:14px;font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#1a1206;background:linear-gradient(135deg,#ffe9b0,#f5c142);padding:3px 10px;border-radius:20px}
.wl-soon-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(245,166,35,.28),rgba(123,92,255,.20));border:1px solid rgba(245,166,35,.25);margin-bottom:11px}
.wl-soon-txt{font-size:11px;color:var(--tx2);line-height:1.5;margin-bottom:11px}
.wl-soon-rule{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:var(--coin2);background:rgba(245,166,35,.10);border:1px solid rgba(245,166,35,.28);border-radius:9px;padding:8px 11px;margin-bottom:13px;line-height:1.35}
.wl-buy-method{display:flex;align-items:center;gap:10px;padding:9px 11px;background:rgba(0,0,0,.18);border:1px solid var(--b);border-radius:11px;margin-bottom:13px}
.wl-bm-t{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.wl-bm-t b{font-size:12px;color:var(--tx)}
.wl-bm-t span{font-size:10px;color:var(--tx3)}
.wl-bm-badge{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:rgba(123,92,255,.14);color:var(--acc2);border:1px solid rgba(123,92,255,.3);flex-shrink:0}
.wl-buy{width:100%;padding:12px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--coin),#f97316);color:#1a1206;font-weight:800;font-size:12.5px;cursor:not-allowed;opacity:.92;box-shadow:0 4px 16px rgba(245,166,35,.22)}
.wl-pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.wl-pkg{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 12px;border-radius:12px;border:1px solid rgba(245,166,35,.3);background:linear-gradient(160deg,rgba(245,166,35,.09),rgba(123,92,255,.04));color:var(--tx1,#fff);cursor:pointer;transition:.15s;text-align:left}
.wl-pkg:hover{border-color:rgba(245,166,35,.6);background:linear-gradient(160deg,rgba(245,166,35,.16),rgba(123,92,255,.07));transform:translateY(-1px)}
.wl-pkg-d{font-size:13px;color:var(--tx2,#cfcfe0)}
.wl-pkg-d b{color:var(--coin2,#f5c142);font-size:15px}
.wl-pkg-p{font-size:11px;font-weight:800;color:var(--coin,#f5a623)}
.wl-movs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wl-mov{background:var(--sf);border:1px solid var(--b);border-radius:16px;padding:14px 16px;min-width:0;display:flex;flex-direction:column}
.wl-mov-h{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--tx);margin-bottom:10px}
.wl-mov-grid{flex:1;min-height:180px;max-height:300px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.wl-mov-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:24px 16px;color:var(--tx3);font-size:12px;text-align:center}
.wl-mov-empty::before{content:"";display:block;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(245,166,35,.20),transparent 70%),var(--bg3);border:1px solid var(--b2);box-shadow:inset 0 0 14px rgba(245,166,35,.07)}
.wl-mov-card{background:var(--bg3);border:1px solid var(--b);border-radius:12px;padding:11px 12px}
@media(max-width:1000px){.wl-movs{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.wl-top{grid-template-columns:1fr}.wl-hero{flex-direction:column;align-items:stretch;gap:16px}.wl-hero-side{min-width:0}.wl-movs{grid-template-columns:1fr}}
.bx-bal-main{display:flex;align-items:center;gap:12px}
.bx-bal-coin{flex:0 0 auto}
.bx-bal-coin svg{display:block;width:40px;height:40px}
.bx-balance .cw-val{font-family:var(--fd);font-size:34px;font-weight:900;color:var(--coin2);line-height:1;letter-spacing:-.5px}
.bx-activar-row{display:flex;justify-content:flex-end;margin-top:10px}
.bx-activar{width:auto!important;min-width:230px;padding:13px 30px}
.bx-reach{margin:-2px 0 14px;padding:11px 13px;background:linear-gradient(180deg,rgba(245,166,35,.05),transparent),var(--bg3);border:1px solid var(--b2);border-left:3px solid var(--coin);border-radius:10px}
.bx-reach-l{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--tx2);font-weight:700}
.bx-reach-v{font-family:var(--fd);font-size:18px;font-weight:800;color:var(--coin2);margin:3px 0 5px}
.bx-reach-n{font-size:10.5px;color:var(--tx3);line-height:1.5}
.bx-hist-box{max-width:1180px;margin:6px auto 0;background:var(--sf);border:1px solid var(--b);border-radius:16px;padding:16px;max-height:500px;overflow-y:auto}
.bx-hist-box .bx-gallery{max-height:none;overflow:visible;padding:0;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.bx-row2 .bx-gallery{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
@media(max-width:1000px){.bx-cfg2,.bx-row2{grid-template-columns:1fr}.bx-cfg-r{position:static}}.bx-activar{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:12px;cursor:pointer;font-family:var(--fd);font-weight:800;font-size:14px;color:#0a0712;background:linear-gradient(135deg,#ffd98a,#f5c842);border:none;margin-top:8px;transition:.15s}
.bx-activar:hover{filter:brightness(1.06)}
.bx-activar:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
@media(max-width:1000px){.bx-types,.bx-common,.bx-row{grid-template-columns:1fr}}
/* Parte completada: gloss superior + brillo dorado en el borde de progreso (no toca el color base) */
#tap-bar,#com-bar,#tap-mult-bar,#com-mult-bar,#pre-mult-bar,#pre-q-bar,#pre-qr-bar,#pre-p-bar,#pre-pr-bar{box-shadow:inset 0 1px 0 var(--wa-50),inset -6px 0 12px rgba(245,166,35,.55);border-radius:6px}

/* Modal Lives: animaciones */
@keyframes modalIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(12px)}}
.modal-lives-panel{animation:modalIn .22s ease}
.modal-lives-panel.closing{animation:modalOut .18s ease forwards}
/* TOAST — panel flotante */
#cd-toast-wrap{position:fixed;bottom:84px;right:16px;z-index:99999;display:flex;flex-direction:column-reverse;gap:10px;align-items:flex-end;pointer-events:none;max-width:88vw}
.cd-toast{display:flex;align-items:center;gap:11px;min-width:214px;max-width:300px;padding:11px 16px 13px 17px;border-radius:var(--r);background:linear-gradient(180deg,rgba(24,23,34,.97),rgba(14,13,22,.97));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--b2);box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);pointer-events:auto;position:relative;overflow:hidden;animation:cdToastIn .42s cubic-bezier(.2,.8,.2,1)}
/* Rediseño 11-jul: SIN iconos. El tipo lo dicen el borde de acento (con brillo del
   color), el KICKER y la barra de vida. --tc = color del tipo, una sola fuente de verdad. */
.cd-toast{--tc:var(--acc)}
.cd-toast.coin{--tc:#f5c842}
.cd-toast.ok{--tc:#3ddc97}
.cd-toast.warn{--tc:#ffb020}
.cd-toast.err{--tc:var(--red)}
.cd-toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tc);box-shadow:0 0 14px var(--tc)}
.cd-toast-k{font-family:var(--fd);font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--tc);margin-bottom:2px}
.cd-toast.coin .cd-toast-t{color:#ffe08a;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.cd-toast-life{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--tc);opacity:.55;transform-origin:left;animation:cdToastLife 3.4s linear forwards}
@keyframes cdToastLife{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.cd-toast-life{animation:none;opacity:.25}}
/* .cd-toast-ic retirado (11-jul): los toasts ya no llevan caja de icono */
.cd-toast-bd{min-width:0;flex:1}
.cd-toast-t{font-family:var(--fd);font-size:13.5px;font-weight:800;color:var(--tx);line-height:1.18;word-break:break-word}
.cd-toast-m{font-size:11.5px;color:var(--tx2);line-height:1.3;margin-top:2px;word-break:break-word}
.cd-toast.out{animation:cdToastOut .32s ease forwards}
@keyframes cdToastIn{from{transform:translateX(44px) scale(.95);opacity:0}to{transform:none;opacity:1}}
@keyframes cdToastOut{to{transform:translateX(44px) scale(.95);opacity:0}}
/* Spinner circular (aro cargando) */
.cd-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.22);border-top-color:currentColor;border-radius:50%;animation:cdSpin .7s linear infinite;vertical-align:-2px}
@keyframes cdSpin{to{transform:rotate(360deg)}}
.cd-loading-ring{background:transparent!important;border-color:transparent!important;box-shadow:none!important;min-width:0!important;padding:0 6px!important}

/* SETUP MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg2);border:1px solid var(--b2);border-radius:16px;padding:26px;max-width:400px;width:100%}
.modal h2{font-family:var(--fd);font-size:19px;font-weight:800;margin-bottom:4px}
.modal p{font-size:12px;color:var(--tx3);margin-bottom:18px}

/* RESPONSIVE */
@media(max-width:900px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr;padding:48px 20px;gap:32px}
  .live-card-mock{display:none}
  .how-grid{grid-template-columns:1fr}
  .rank-head{display:none}
  .rank-row{grid-template-columns:40px 1fr 90px}
  .faq-grid{grid-template-columns:1fr}
  .sidebar{width:58px}}
@media(max-width:600px){
  nav .nav-links{display:none}
  .section,.hero{padding-left:18px;padding-right:18px}
  .page{padding:14px}
  .rank-head{display:none}
}

/* ══ PROFUNDIDAD PREMIUM — cajas planas del wallet/dashboard (cosmético, sin tocar estructura) ══ */
.wl-usd,.wl-methods,.wl-mov,.bx-panel{
  background:radial-gradient(120% 100% at 100% 0%,rgba(245,200,66,.05),transparent 52%),linear-gradient(165deg,#181722 0%,#100f18 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 26px rgba(0,0,0,.26) !important;
  transition:border-color .22s ease,box-shadow .22s ease !important;
}
.wl-usd:hover,.wl-methods:hover,.wl-mov:hover,.bx-panel:hover{
  border-color:rgba(245,200,66,.2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 32px rgba(124,92,255,.11) !important;
}
.faq-item{transition:border-color .2s ease,transform .2s ease}
.faq-item:hover{border-color:rgba(245,200,66,.18);transform:translateY(-1px)}
.rank-table{box-shadow:0 10px 26px rgba(0,0,0,.24)}
.modal{box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(245,200,66,.08) !important}
#page-coins .dr-stat{
  background:radial-gradient(120% 100% at 100% 0%,rgba(124,92,255,.06),transparent 55%),linear-gradient(165deg,#181722,#100f18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 20px rgba(0,0,0,.22) !important;
  transition:transform .2s ease,border-color .2s ease !important;
}
#page-coins .dr-stat:hover{transform:translateY(-2px);border-color:rgba(245,200,66,.2) !important}

/* ══════════════════════════════════════════════════════════════════════
   REDISEÑO INTERACTIVO — corazón Tap-Tap, copiar overlay, cajas de campaña.
   Overrides con especificidad superior (ganan al <style> que inyecta el JS).
   SOLO visual: no toca conteo, selectores js-tap-*, ni funciones congeladas.
   ══════════════════════════════════════════════════════════════════════ */
/* — aura cónica girando detrás del corazón (profundidad premium) — */
.tt-hero-heart{isolation:isolate}
.tt-hero-heart::before{
  content:"";position:absolute;top:50%;left:50%;width:220px;height:220px;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(255,51,85,.22),rgba(245,200,66,.14),rgba(124,92,255,.20),rgba(255,51,85,.22));
  filter:blur(26px);opacity:.55;animation:cdHeartAura 7s linear infinite;
}
@keyframes cdHeartAura{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* — glow del corazón: doble capa más rica — */
.tt-hero-heart .tt-heart-glow{
  background:radial-gradient(circle,rgba(255,120,90,.6),rgba(255,45,80,.32) 44%,rgba(124,92,255,.12) 66%,transparent 74%) !important;
  filter:blur(22px) !important;
}
.tt-hero-heart .tt-heart-glow.on{opacity:.92 !important}
/* — corazón: sombra más profunda con acento dorado — */
.tt-hero-heart .tap-heart{
  filter:drop-shadow(0 16px 30px rgba(220,20,55,.55)) drop-shadow(0 0 34px rgba(255,90,50,.28)) drop-shadow(0 0 10px rgba(245,200,66,.18)) !important;
}
.tt-hero-heart .tap-heart.beating{
  filter:drop-shadow(0 0 48px rgba(255,80,90,.9)) drop-shadow(0 18px 36px rgba(220,20,55,.62)) drop-shadow(0 0 14px rgba(245,200,66,.3)) brightness(1.07) !important;
}
/* — ondas: gradiente rojo→dorado más vivo y anillo más fino/elegante — */
.tt-hero-heart .tt-ring{
  border:2px solid rgba(255,80,100,.55) !important;
  box-shadow:0 0 18px rgba(255,60,90,.28),inset 0 0 12px rgba(245,200,66,.12) !important;
}
/* — el número de taps: brillo dorado premium (visual, no toca el valor) — */
.tt-hero-heart .js-tap-count{text-shadow:0 2px 18px rgba(120,0,20,.6),0 0 26px rgba(245,200,66,.22) !important}

/* ═══ BOTÓN COPIAR OVERLAY — de azul genérico a identidad CoinDrop ═══ */
body .cd-obs-ico-btn{
  background:linear-gradient(135deg,rgba(245,200,66,.14),rgba(124,92,255,.10)) !important;
  border:1px solid rgba(245,200,66,.4) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body .cd-obs-ico-btn:hover{
  border-color:rgba(245,200,66,.8) !important;
  box-shadow:0 6px 20px rgba(245,200,66,.26),0 0 0 1px rgba(124,92,255,.18) !important;
  transform:translateY(-1px);
}
body .cd-obs-ico-btn.copied{border-color:rgba(34,211,168,.8) !important;background:rgba(34,211,168,.14) !important}

/* ═══ CAJAS DE TIPO DE CAMPAÑA (comentario/quiéreme/populares) — profundidad ═══ */
.bx-tcard{
  background:radial-gradient(120% 100% at 100% 0%,rgba(124,92,255,.06),transparent 52%),linear-gradient(165deg,#181722,#100f18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 26px rgba(0,0,0,.28) !important;
}
.bx-tcard:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 38px rgba(124,92,255,.16) !important}
.bx-common,.bx-panel,.bx-hist-box{
  background:radial-gradient(120% 100% at 0% 0%,rgba(245,200,66,.04),transparent 50%),linear-gradient(165deg,#181722,#100f18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 24px rgba(0,0,0,.24) !important;
}
.bx-activar{box-shadow:0 8px 22px rgba(245,200,66,.3) !important;transition:filter .18s,transform .18s !important}
.bx-activar:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* ══ CONTROL DEL STREAMER — panel y tarjetas internas con profundidad premium ══ */
#streamer-modal-panel{
  background:radial-gradient(120% 80% at 0% 0%,rgba(124,92,255,.08),transparent 46%),radial-gradient(100% 70% at 100% 0%,rgba(255,51,85,.05),transparent 50%),linear-gradient(180deg,#181722,#100f18) !important;
  box-shadow:0 34px 90px rgba(0,0,0,.68),0 0 0 1px rgba(245,200,66,.08),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#streamer-modal-body .sc-stat,#streamer-modal-body .sc-card,#streamer-modal-body .dr-stat{
  background:radial-gradient(120% 100% at 100% 0%,rgba(245,200,66,.05),transparent 52%),linear-gradient(165deg,#1c1a28,#131120) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 20px rgba(0,0,0,.24) !important;
  transition:transform .2s ease,border-color .2s ease !important;
}
#streamer-modal-body .sc-stat:hover,#streamer-modal-body .sc-card:hover{transform:translateY(-2px);border-color:rgba(245,200,66,.24) !important}

/* ── Adaptación a pantallas pequeñas. La navegación ya no es un riel:
     vive en el menú Cortina (cd-aurora.css). ── */
/* Tablet: riel un poco más compacto */
@media (max-width:820px){
  }
/* Móvil: riel mínimo funcional + flyout tipo hoja ancha y clamped */
@media (max-width:560px){
  /* tooltips hover no aplican en táctil: se ocultan para no estorbar */
  /* flyout: ancho cómodo, nunca se sale (el JS lo clampa al viewport) */
  #sb-flyout{min-width:min(232px,72vw);max-width:78vw;padding:8px}/* el avatar de usuario del riel un poco más compacto */
  /* páginas con menos padding lateral para ganar ancho útil */
  .page{padding:16px 13px}
}
/* Móvil muy estrecho */
@media (max-width:380px){
  #sb-flyout{min-width:min(210px,74vw)}
}
