:root{
    --bg: var(--tg-theme-bg-color, #0f1115);
    --card: var(--tg-theme-secondary-bg-color, #1a1d24);
    --text: var(--tg-theme-text-color, #ffffff);
    --hint: var(--tg-theme-hint-color, #8b93a1);
    --link: var(--tg-theme-link-color, #4ea3ff);
    --sep: rgba(255,255,255,.08);
    --accent1:#6a5cff; --accent2:#22d3ee; --accent3:#ff5ca8;
    --ok:#2ecc71; --danger:#ff5c5c; --gold:#ffc34d;
    --radius:18px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
  html,body{min-height:100%}
  body{
    background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    padding-bottom:calc(90px + env(safe-area-inset-bottom));
    overflow-x:hidden; overflow-y:auto; line-height:1.45;
    -webkit-overflow-scrolling:touch;
  }
  svg{display:block}
  .ic{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .ic.fill{fill:currentColor;stroke:none}
  .wrap{max-width:560px;margin:0 auto;padding:16px}
  .view{display:none;animation:viewIn .4s cubic-bezier(.2,.75,.2,1)}
  .view.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes viewIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes pop{0%{transform:translateY(-2px) scale(.85)}55%{transform:translateY(-5px) scale(1.28)}100%{transform:translateY(-2px) scale(1.1)}}

  .hero{
    position:relative;border-radius:24px;padding:22px 20px;overflow:hidden;
    background:linear-gradient(135deg,var(--accent1),var(--accent3) 55%,var(--accent2));
    color:#fff;box-shadow:0 12px 30px -10px rgba(106,92,255,.6)
  }
  .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.25),transparent 60%)}
  .hero::before{content:"";position:absolute;top:0;left:-60%;width:48%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);animation:shine 6s ease-in-out infinite;pointer-events:none}
  @keyframes shine{0%,100%{left:-60%}55%{left:135%}}
  .hero .htitle{display:flex;align-items:center;gap:11px;position:relative}
  .hero h1{font-size:21px;font-weight:800;letter-spacing:.3px}
  .hlogo{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,.3);background:transparent}
  .hlogo-fb{display:flex;align-items:center;justify-content:center}

  .segs{display:flex;gap:8px;background:rgba(255,255,255,.05);border-radius:12px;padding:4px}
  .seg{flex:1;background:0;border:0;color:var(--hint);font-size:13px;font-weight:700;padding:9px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.2s}
  .seg .ic{width:15px;height:15px}
  .seg.on{background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff}
  .sres{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--sep);cursor:pointer}
  .sres:last-child{border:0}
  .sres:active{opacity:.6}
  .sres .th{width:64px;height:44px;border-radius:9px;object-fit:cover;flex:none;background:rgba(255,255,255,.06)}
  .sres .info{flex:1;min-width:0}
  .sres .st{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sres .ss{font-size:11.5px;color:var(--hint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sres .go{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff}
  .sres .go .ic{width:16px;height:16px}
  .subnote{background:linear-gradient(135deg,rgba(46,204,113,.16),rgba(34,211,238,.08));border:1px solid rgba(46,204,113,.3);border-radius:14px;padding:14px;margin-top:12px;display:flex;align-items:center;gap:12px}
  .subnote .si{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(46,204,113,.2);color:var(--ok);flex:none}
  .hero p{opacity:.92;font-size:13.5px;margin-top:6px;position:relative}
  .hero .glyph{position:absolute;right:-6px;bottom:-20px;opacity:.16;animation:floaty 6s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .hero .glyph svg{width:110px;height:110px;stroke:#fff;stroke-width:1.4;fill:none}

  .card{background:var(--card);border-radius:var(--radius);padding:16px;margin-top:14px;border:1px solid var(--sep);animation:fade .45s ease both}
  .card h3{font-size:15px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
  .card h3 .ic{width:18px;height:18px;color:var(--accent2)}
  .muted{color:var(--hint);font-size:13px}

  .paste{display:flex;gap:8px;margin-top:6px}
  .paste input{
    flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--sep);color:var(--text);
    border-radius:14px;padding:14px 14px;font-size:15px;outline:none;transition:border .2s
  }
  .paste input:focus{border-color:var(--accent1)}
  .btn{
    border:0;border-radius:14px;padding:14px 16px;font-size:15px;font-weight:700;color:#fff;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s,opacity .2s;white-space:nowrap
  }
  .btn .ic{width:18px;height:18px}
  .btn:active{transform:scale(.96)}
  .linkrow{transition:transform .12s ease,background .2s}
  .linkrow:active{transform:scale(.98)}
  .btn.block{width:100%;margin-top:12px}
  .btn.ghost{background:rgba(255,255,255,.07);color:var(--text);border:1px solid var(--sep)}
  .btn.gold{background:linear-gradient(135deg,#ffb020,#ff7a45);color:#1a1200}
  .btn.sq{padding:0;width:50px;height:50px;flex:none}
  .btn:disabled{opacity:.55}

  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .chip{background:rgba(255,255,255,.06);border:1px solid var(--sep);border-radius:20px;padding:7px 12px;font-size:12.5px;color:var(--hint);display:flex;align-items:center;gap:6px}
  .chip .ic{width:14px;height:14px;color:var(--accent2)}

  .profile{display:flex;align-items:center;gap:14px}
  .avatar{width:60px;height:60px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent1),var(--accent3));overflow:hidden;position:relative}
  .avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
  .mycard{width:100%;border-radius:16px;display:block;margin-bottom:12px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
  .badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;margin-top:5px}
  .badge .ic{width:13px;height:13px}
  .badge.free{background:rgba(255,255,255,.1);color:var(--hint)}
  .badge.prem{background:linear-gradient(135deg,#ffc34d,#ff9838);color:#3a2500}
  .badge.ultra{background:linear-gradient(135deg,#a06bff,#22d3ee);color:#0a0030}

  .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
  .stat{background:rgba(255,255,255,.05);border:1px solid var(--sep);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px}
  .stat .si{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(106,92,255,.18);color:var(--accent2)}
  .stat .si .ic{width:18px;height:18px}
  .stat .n{font-size:19px;font-weight:800;line-height:1}
  .stat .l{font-size:11px;color:var(--hint);margin-top:3px}

  .bar{height:8px;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden;margin-top:8px}
  .bar > i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent1),var(--accent2))}

  .hist{margin-top:6px}
  .hrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--sep)}
  .hrow:last-child{border:0}
  .hrow .hi{width:20px;height:20px;color:var(--accent2)}
  .hrow .t{flex:1;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hrow .d{font-size:11px;color:var(--hint)}

  .plan{border-radius:18px;padding:16px;margin-top:12px;border:1px solid var(--sep);position:relative;overflow:hidden}
  .plan.prem{background:linear-gradient(160deg,rgba(255,195,77,.14),transparent)}
  .plan.ultra{background:linear-gradient(160deg,rgba(160,107,255,.16),rgba(34,211,238,.08))}
  .plan .name{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
  .plan .name .ic{width:20px;height:20px}
  .plan .price{font-size:22px;font-weight:800;margin:6px 0}
  .plan .price small{font-size:12px;color:var(--hint);font-weight:600}
  .feat{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin-top:7px}
  .feat .ic{width:16px;height:16px;color:var(--ok);flex:none;margin-top:1px}

  .result{margin-top:12px;background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.3);border-radius:14px;padding:12px;font-size:13px;word-break:break-all;display:none}
  .result.show{display:block}
  .result .url{color:var(--link);font-size:12.5px;margin-top:6px;display:block}

  /* TOP */
  .topitem{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .topcard{background:var(--card);border:1px solid var(--sep);border-radius:18px;overflow:hidden;position:relative}
  .topcard.me{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2)}
  .topcard .rankbadge{position:absolute;top:10px;left:10px;z-index:2;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(4px)}
  .topcard .rankbadge.g1{background:linear-gradient(135deg,#ffd35a,#ff9d2e);color:#3a2500}
  .topcard .rankbadge.g2{background:linear-gradient(135deg,#dfe6ee,#a9b4c2);color:#20242b}
  .topcard .rankbadge.g3{background:linear-gradient(135deg,#e0a86a,#b9793d);color:#2a1600}
  .topcard img{width:100%;display:block;background:rgba(255,255,255,.03)}
  .topcard .imgskel{width:100%;height:0;padding-bottom:43.75%}
  .topcard .meta{display:flex;align-items:center;gap:10px;padding:10px 14px}
  .topcard .meta .nmwrap{flex:1;display:flex;align-items:center;gap:4px;min-width:0}
  .vbadge.tv{width:24px;height:24px}
  .topcard .meta .nm{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .vbadge{width:16px;height:16px;flex:none;vertical-align:middle;cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
  .vbadge.big{width:22px;height:22px}
  .vpill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:20px;color:#fff;cursor:pointer;background:linear-gradient(135deg,#2f9dff,#1f6fe0);box-shadow:0 2px 8px rgba(45,140,255,.4);letter-spacing:.3px}
  .vpill .ic{width:14px;height:14px}
  .vpill.sm{flex:none;font-size:10.5px;font-weight:700;padding:3px 9px 3px 6px;gap:4px}
  .vpill.sm .ic{width:17px;height:17px}
  .topcard .meta .st{font-size:12px;color:var(--hint);display:flex;align-items:center;gap:5px}
  .topcard .meta .st .ic{width:14px;height:14px;color:var(--accent2)}
  .topcard.tap{cursor:pointer;transition:transform .14s ease}
  .topcard.tap:active{transform:scale(.985)}
  .topcard .meta .verperfil{display:inline-flex;align-items:center;gap:3px;flex:none;margin-left:4px;font-size:11px;font-weight:800;color:var(--accent2);background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.32);padding:4px 9px;border-radius:20px;white-space:nowrap}
  .topcard .meta .verperfil .ic{width:13px;height:13px}
  .topcard .meta .verperfil .ch{width:12px;height:12px;margin-left:-1px;animation:nudge 1.6s ease-in-out infinite}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
  .pchip{font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px}
  .pchip.prem{background:#ffc34d;color:#3a2500}.pchip.ultra{background:linear-gradient(135deg,#a06bff,#22d3ee);color:#04002a}

  .nav{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    /* Fondo SÓLIDO (fallback universal). color-mix/backdrop-filter no existen en
       Android WebView antiguo y dejaban la barra transparente y descuadrada. */
    background:var(--tg-theme-secondary-bg-color,#12141a);
    background:var(--card);
    border-top:1px solid var(--sep);display:flex;justify-content:space-around;
    padding:9px 4px calc(9px + env(safe-area-inset-bottom))
  }
  @supports (backdrop-filter:blur(1px)){
    .nav{background:rgba(18,20,26,.82);backdrop-filter:blur(14px)}
  }
  .nav button{background:0;border:0;color:var(--hint);font-size:10px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;padding:4px 0;cursor:pointer;transition:color .2s}
  .nav button .ic{width:23px;height:23px;transition:transform .2s}
  .nav button.on{color:var(--text)}
  .nav button.on .ic{transform:translateY(-2px) scale(1.1);color:var(--accent2);animation:pop .4s ease}
  .nav button.on::after{content:'';position:absolute;bottom:2px;width:5px;height:5px;border-radius:50%;background:var(--accent2);box-shadow:0 0 8px var(--accent2)}
  .nav button{position:relative}

  .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);opacity:0;background:#000;color:#fff;padding:12px 18px;border-radius:14px;font-size:13.5px;z-index:100;transition:.3s;max-width:90%;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.4);pointer-events:none}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
  @keyframes sp{to{transform:rotate(360deg)}}
  .skeleton{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px}
  @keyframes sk{to{background-position:-200% 0}}
  .center{text-align:center;padding:30px 10px;color:var(--hint)}

  /* ——— Anti-desbordamiento (todo se queda dentro del margen) ——— */
  img{max-width:100%}
  .wrap *{max-width:100%}
  .hero h1,.hero p,.card h3,.feat,.muted{overflow-wrap:anywhere}
  .stat > div{min-width:0;overflow:hidden}
  .stat .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .subnote > div{min-width:0}
  .plan .name{flex-wrap:wrap}

  /* ——— Invitar / referidos ——— */
  .affgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
  .affbox{background:linear-gradient(135deg,rgba(46,204,113,.14),rgba(34,211,238,.08));border:1px solid rgba(46,204,113,.28);border-radius:14px;padding:11px 6px;text-align:center}
  .affbox .n{font-size:19px;font-weight:800;line-height:1.1}
  .affbox .l{font-size:10.5px;color:var(--hint);margin-top:3px}
  .reflink{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.06);border:1px solid var(--sep);border-radius:12px;padding:10px 12px;margin-top:10px}
  .reflink code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--link);font-size:12.5px}
  .reflink button{flex:none;background:rgba(255,255,255,.08);border:0;color:var(--text);border-radius:9px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer}

  /* ——— Fila de función bloqueada (upsell) ——— */
  .lockrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--sep)}
  .lockrow:last-child{border:0}
  .lockrow .li{width:36px;height:36px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(106,92,255,.16);color:var(--accent2)}
  .lockrow .li .ic{width:19px;height:19px}
  .lockrow .lt{flex:1;min-width:0}
  .lockrow .lt b{font-size:13.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lockrow .lt span{display:block;font-size:11.5px;color:var(--hint)}
  .lockrow .lk{flex:none;font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:10px}
  .lockrow .lk.p{background:linear-gradient(135deg,#ffc34d,#ff9838);color:#3a2500}
  .lockrow .lk.u{background:linear-gradient(135deg,#a06bff,#22d3ee);color:#04002a}

  /* ——— Progreso de rango ——— */
  .rankwrap{margin-top:6px}
  .rankwrap .rl{display:flex;justify-content:space-between;font-size:12px;color:var(--hint);margin-bottom:7px;gap:8px}
  .rankwrap .rl b{color:var(--text);font-weight:700}

  /* ——— Fila-enlace tipo lista ——— */
  .linkrow{display:flex;align-items:center;gap:12px;width:100%;background:rgba(255,255,255,.05);border:1px solid var(--sep);border-radius:14px;padding:13px;margin-top:10px;cursor:pointer;color:var(--text);text-align:left;font:inherit}
  .linkrow:active{opacity:.6}
  .linkrow .li{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(106,92,255,.16);color:var(--accent2)}
  .linkrow .lx{flex:1;min-width:0}
  .linkrow .lx b{font-size:14px;font-weight:600;display:block}
  .linkrow .lx span{font-size:11.5px;color:var(--hint)}
  .linkrow .arr{color:var(--hint);flex:none}

  /* ——— Cinta "recomendado" / social proof ——— */
  .ribbon{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;padding:5px 11px;border-radius:20px;background:rgba(46,204,113,.16);color:var(--ok);border:1px solid rgba(46,204,113,.35)}
  .compare{margin-top:12px;border:1px solid var(--sep);border-radius:14px;overflow:hidden}
  .compare .row{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:10px 12px;font-size:12.5px;align-items:center;border-bottom:1px solid var(--sep)}
  .compare .row:last-child{border:0}
  .compare .row.head{background:rgba(255,255,255,.04);font-weight:700;font-size:11.5px;color:var(--hint)}
  .compare .row .c{width:22px;text-align:center}
  .compare .yes{color:var(--ok)}.compare .no{color:var(--hint);opacity:.5}

  /* ——— Mis marcos: cambio rápido (chips) ——— */
  .mfrow{display:flex;gap:8px;overflow-x:auto;padding:4px 0 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mfrow::-webkit-scrollbar{display:none}
  .mfchip{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:76px;padding:10px 8px;border-radius:14px;border:1px solid var(--sep);background:rgba(255,255,255,.04);cursor:pointer;transition:transform .12s ease,border-color .12s ease}
  .mfchip:active{transform:scale(.95)}
  .mfchip.on{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2),inset 0 0 20px rgba(34,211,238,.1)}
  .mfchip .mfp{width:100%;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px}
  .mfchip .mfn{font-size:10.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:66px}
  .mfchip .mfok{font-size:9.5px;font-weight:800;color:var(--accent2)}
  /* ——— Marcos (tienda) — con PREVIEW visual de lo que compras ——— */
  .frame{display:block;background:var(--card);border:1px solid var(--sep);border-radius:16px;padding:0;margin-top:12px;overflow:hidden;animation:fade .35s ease both}
  .frame.eq{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2),0 8px 24px rgba(34,211,238,.16)}
  .frame .prev{position:relative;height:80px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .frame .prev::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 0,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
  .frame .prev .nm{position:relative;z-index:2;font-weight:800;font-size:19px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88%;text-align:center;padding:0 12px}
  .frame .eqbadge{position:absolute;top:8px;right:9px;z-index:3;font-size:10px;font-weight:800;background:rgba(46,204,113,.9);color:#04220f;padding:3px 8px;border-radius:9px}
  .frame .meta{display:flex;align-items:center;gap:11px;padding:11px 13px}
  .frame .meta .fi{font-size:23px;flex:none;width:32px;text-align:center}
  .frame .meta .fn{flex:1;min-width:0}
  .frame .meta .fn b{font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
  .frame .meta .fn span{font-size:11.5px;color:var(--hint)}
  .frame .fbtn{flex:none;border:0;border-radius:11px;padding:10px 15px;font-size:12.5px;font-weight:800;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--accent1),var(--accent2));transition:transform .12s ease}
  .frame .fbtn:active{transform:scale(.94)}
  .frame .fbtn.owned{background:rgba(255,255,255,.1);color:var(--text)}
  .frame .fbtn.eqd{background:rgba(46,204,113,.2);color:var(--ok)}
  .frame .fbtn:disabled{opacity:.55;cursor:default}
  .ftag{font-size:9px;font-weight:800;padding:2px 7px;border-radius:8px;margin-left:6px}
  .ftag.premium{background:#ffc34d;color:#3a2500}
  .ftag.ultra{background:linear-gradient(135deg,#a06bff,#22d3ee);color:#04002a}
  .ftag.logro{background:rgba(255,255,255,.12);color:var(--hint)}

  /* ——— Dashboard: resumen de descargas ——— */
  .dashTop{display:flex;gap:12px;margin:4px 0 14px}
  .dashTop>div{flex:1;background:var(--bg);border:1px solid var(--sep);border-radius:14px;padding:12px;text-align:center}
  .dashN{font-size:22px;font-weight:800;background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .dashL{font-size:11px;color:var(--hint);margin-top:2px}
  .segbar{display:flex;height:14px;border-radius:8px;overflow:hidden;background:var(--bg);border:1px solid var(--sep)}
  .segbar i{height:100%;transition:width .5s ease}
  .seglegend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px}
  .legitem{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--hint)}
  .legdot{width:9px;height:9px;border-radius:3px;flex:none}
  .legitem b{color:var(--text);font-weight:700}

  /* ——— Logros ——— */
  .ach{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--sep)}
  .ach:last-child{border-bottom:0}
  .ach .aic{font-size:23px;width:34px;text-align:center;flex:none}
  .ach:not(.done) .aic{filter:grayscale(1);opacity:.45}
  .ach .ax{flex:1;min-width:0}
  .ach .ax b{font-size:13.5px;font-weight:800;display:block}
  .ach .ax .abar{height:6px;border-radius:4px;background:var(--bg);overflow:hidden;margin-top:5px}
  .ach .ax .abar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent1),var(--accent2));transition:width .5s ease}
  .ach .ax span{font-size:11px;color:var(--hint)}
  .ach .adone{color:var(--ok);font-size:17px;font-weight:800;flex:none}

  /* ——— Ruleta animada ——— */
  .wheelModal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
  .wheelModal.show{display:flex;animation:fade .25s ease}
  .wheelBox{background:var(--card);border:1px solid var(--sep);border-radius:22px;padding:22px 20px;width:100%;max-width:360px;text-align:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .wheelClose{position:absolute;top:10px;right:14px;background:0;border:0;color:var(--hint);font-size:20px;cursor:pointer;line-height:1}
  .wheelTitle{font-weight:800;font-size:17px;margin-bottom:16px}
  .wheelStage{position:relative;width:264px;height:264px;margin:0 auto 6px}
  .wheelPin{position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid var(--gold);z-index:3;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
  .wheelSpin{width:100%;height:100%;transition:transform 4.6s cubic-bezier(.16,.86,.22,1);transform:rotate(0deg);filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
  .wheelSpin svg{display:block;width:100%;height:100%;border-radius:50%}
  .wheelResult{min-height:26px;font-weight:800;font-size:16px;margin:10px 0 4px}

  /* ===== ✨ MEJORAS v3: banners ricos, comunidad, tienda y efectos ===== */
  @keyframes shimmer{0%{background-position:-160% 0}100%{background-position:260% 0}}
  @keyframes glowpulse{0%,100%{box-shadow:0 0 0 1px var(--accent2),0 6px 22px rgba(34,211,238,.15)}50%{box-shadow:0 0 0 1px var(--accent2),0 10px 34px rgba(34,211,238,.42)}}
  @keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  @keyframes popIn{0%{opacity:0;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:none}}
  @keyframes ringSpin{to{transform:rotate(360deg)}}
  @keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}

  /* 🎴 Preview de la tarjeta REAL en la tienda de marcos (como el TOP).
     Uso padding-bottom para el aspecto 900:500 en vez de aspect-ratio, que en
     algunos Android viejos no funciona y rompía las proporciones. */
  .fcard{position:relative;width:100%;padding-bottom:55.55%;overflow:hidden}
  .fcard .fimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;z-index:3}
  .fcard .fimg.on{opacity:1}
  .fcard .sheen{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);background-size:220% 100%;animation:shimmer 3.6s ease-in-out infinite;pointer-events:none;mix-blend-mode:screen}
  .fcard .fcardhint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;opacity:.45}
  .fcard .fcardhint .ic{width:34px;height:34px}
  .fcard .eqbadge{position:absolute;top:8px;right:9px;z-index:4;font-size:10px;font-weight:800;background:rgba(46,204,113,.92);color:#04220f;padding:3px 8px;border-radius:9px}

  /* (Compat) preview antiguo, ya no se usa pero se deja por si acaso */
  .frame .prev{height:104px}
  .frame .prev.rich{background-size:180% 180%;animation:none}
  .frame .prev .sheen{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);background-size:220% 100%;animation:shimmer 3.6s ease-in-out infinite;pointer-events:none;mix-blend-mode:screen}
  .frame .prev .dots{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none}
  .frame .prev .ava{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;border:2px solid rgba(255,255,255,.55);box-shadow:0 3px 10px rgba(0,0,0,.4)}
  .frame .prev .nm{max-width:66%}
  .frame .prev .rk{position:absolute;left:12px;bottom:8px;z-index:2;font-size:9.5px;font-weight:800;letter-spacing:.4px;padding:2px 7px;border-radius:7px;background:rgba(0,0,0,.32);color:rgba(255,255,255,.92);backdrop-filter:blur(2px)}
  .frame{border-radius:18px}
  .frame.eq{animation:glowpulse 2.6s ease-in-out infinite}
  .ftag{font-size:9px;font-weight:800;padding:2px 7px;border-radius:7px;margin-left:7px;vertical-align:middle}
  .ftag.premium{background:rgba(255,195,77,.2);color:var(--gold)}
  .ftag.ultra{background:rgba(160,107,255,.22);color:#b98bff}
  .ftag.logro{background:rgba(46,204,113,.2);color:var(--ok)}
  .ftag.especial{background:linear-gradient(135deg,rgba(255,207,51,.28),rgba(255,120,220,.22));color:#ffe08a}
  .fbtns{display:flex;flex-direction:column;gap:6px;flex:none}
  .fbtns .fbtn{width:100%}
  .fbtn.stars{background:linear-gradient(135deg,#ffcf33,#ff8a3d);color:#3a2500}

  /* Sección comunidad */
  .commrow{display:flex;align-items:center;gap:12px;padding:13px;border-radius:15px;margin-top:10px;border:1px solid var(--sep);background:rgba(255,255,255,.03);cursor:pointer;transition:transform .14s ease,background .2s;position:relative;overflow:hidden;color:#fff;text-decoration:none}
  .commrow:active{transform:scale(.98)}
  .commrow .ci{width:44px;height:44px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
  .commrow .ci svg{width:22px;height:22px}
  .commrow .cx{flex:1;min-width:0}
  .commrow .cx b{display:block;font-size:14px;font-weight:800;color:#fff;text-decoration:none}
  .commrow .cx span{font-size:11.5px;color:var(--hint);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .commrow .cgo{flex:none;color:var(--hint)}
  .commrow.support .ci{background:linear-gradient(135deg,#0ea5e9,#22d3ee)}
  .commrow.channel .ci{background:linear-gradient(135deg,#6a5cff,#a06bff)}
  .commrow.ultra .ci{background:linear-gradient(135deg,#a06bff,#ff5ca8)}
  .commrow.ultra{border-color:rgba(160,107,255,.4);background:linear-gradient(135deg,rgba(160,107,255,.12),rgba(255,92,168,.06))}
  .commrow .lockmini{font-size:9px;font-weight:800;background:rgba(160,107,255,.25);color:#c9a7ff;padding:3px 7px;border-radius:7px;flex:none}

  /* 📊 Tarjeta de cifras de la comunidad */
  .statcard{display:flex;align-items:stretch;gap:8px;background:linear-gradient(135deg,rgba(106,92,255,.14),rgba(34,211,238,.1));border:1px solid rgba(106,92,255,.28);border-radius:16px;padding:16px 12px;margin-top:12px}
  .statitem{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
  .statitem .sc-ic{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--accent2);margin-bottom:3px}
  .statitem .sc-ic .ic{width:18px;height:18px}
  .statitem b{font-size:23px;font-weight:900;color:#fff;line-height:1}
  .statitem span{font-size:11.5px;color:var(--hint);font-weight:600}
  .statsep{width:1px;background:rgba(255,255,255,.1);flex:none}

  /* Tienda: filas de compra */
  .buyrow{display:flex;align-items:center;gap:11px;padding:11px;border-radius:13px;border:1px solid var(--sep);background:rgba(255,255,255,.03);margin-top:8px;animation:popIn .4s ease both}
  .buyrow .bi{width:36px;height:36px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(255,255,255,.06)}
  .buyrow .bx{flex:1;min-width:0}
  .buyrow .bx b{font-size:13.5px;font-weight:700;display:block}
  .buyrow .bx span{font-size:11px;color:var(--hint)}
  .buyrow .bp{flex:none;font-size:12.5px;font-weight:800;padding:6px 11px;border-radius:10px;background:rgba(255,255,255,.07);white-space:nowrap}
  .buyrow .bp.star{background:rgba(255,195,77,.16);color:var(--gold)}
  .buyrow .bp.coin{background:rgba(255,195,77,.1);color:var(--gold)}
  .buyrow .bp.logro{background:rgba(46,204,113,.16);color:var(--ok)}

  /* Ruleta v2 */
  .wheelStage{filter:drop-shadow(0 0 26px rgba(122,92,255,.35))}
  .wheelStage::before{content:'';position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(from 0deg,#6a5cff,#22d3ee,#ff5ca8,#ffc34d,#2ecc71,#6a5cff);opacity:.9;z-index:0;animation:ringSpin 9s linear infinite;filter:blur(1px)}
  .wheelStage::after{content:'';position:absolute;inset:-2px;border-radius:50%;background:var(--card);z-index:0}
  .wheelSpin{position:relative;z-index:1}
  .wheelSpin.spinning{transition:transform 5.2s cubic-bezier(.12,.75,.16,1)}
  .wheelPin{animation:none;transition:transform .08s}
  .wheelPin.tick{transform:translateX(-50%) rotate(-11deg)}
  .wheelHub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a2f3c,#14161c);border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.55)}
  .wheelHub svg{width:22px;height:22px;color:var(--gold)}
  .wheelBox{overflow:hidden}
  .wheelBox::before{content:'';position:absolute;top:-40%;left:-40%;width:180%;height:180%;background:radial-gradient(circle,rgba(122,92,255,.2),transparent 60%);pointer-events:none}

  /* Micro-interacciones globales */
  .card{transition:transform .15s ease}
  .linkrow:active,.buyrow:active{transform:scale(.985)}
  .hero .glyph{animation:floaty 5s ease-in-out infinite}
  .countup{font-variant-numeric:tabular-nums}
  .navpulse{animation:pop .4s ease}

  /* ===== 🛍 Tienda dedicada ===== */
  .hero.shop{background:linear-gradient(135deg,#f59e0b,#ec4899 52%,#8b5cf6)}
  .coinpill{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:13px;padding:6px 13px;border-radius:20px}
  .coinpill .ic{width:16px;height:16px;color:#ffd76a}
  .storesec{margin-top:20px}
  .storesec h4{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:800;margin:0 0 11px}
  .storesec h4 .ic{width:18px;height:18px;color:var(--accent2)}
  .splan{position:relative;background:var(--card);border:1px solid var(--sep);border-radius:18px;padding:16px;margin-bottom:12px;overflow:hidden;animation:popIn .4s ease both}
  .splan.pop{border-color:rgba(255,195,77,.55);box-shadow:0 10px 34px rgba(255,160,40,.14)}
  .splan.ul{border-color:rgba(160,107,255,.42)}
  .splan::before{content:'';position:absolute;top:-60%;right:-30%;width:75%;height:220%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 62%);pointer-events:none}
  .splan-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .splan-nm{font-size:17px;font-weight:800;display:flex;align-items:center;gap:7px}
  .splan-nm .ic{width:20px;height:20px}
  .splan-badge{font-size:10px;font-weight:800;letter-spacing:.5px;background:linear-gradient(135deg,#ffcf33,#ff8a3d);color:#3a2500;padding:4px 9px;border-radius:8px}
  .splan-badge.u{background:linear-gradient(135deg,#a06bff,#ff5ca8);color:#fff}
  .splan-have{font-size:11px;font-weight:800;color:var(--ok);background:rgba(46,204,113,.15);padding:4px 9px;border-radius:8px}
  .splan-price{font-size:30px;font-weight:800;display:flex;align-items:center;gap:5px;margin:2px 0 11px}
  .splan-price .star{width:22px;height:22px}
  .splan-price small{font-size:13px;font-weight:600;color:var(--hint)}
  .splan-feats{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;margin-bottom:14px}
  .splan-feats span{font-size:12px;color:var(--text);position:relative;padding-left:17px;line-height:1.25}
  .splan-feats span::before{content:'✓';position:absolute;left:0;top:0;color:var(--ok);font-weight:800}
  .splan .ultbtn{background:linear-gradient(135deg,#a06bff,#22d3ee)}
  .ftease{display:flex;gap:9px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
  .ftease::-webkit-scrollbar{display:none}
  .fteaseitem{flex:none;width:122px;height:58px;border-radius:13px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 8px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
  .fteaseitem b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .nav button{font-size:9.5px}
  @keyframes softpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
  .ic.anim-pulse{transform-origin:50% 50%;animation:softpulse 2.4s ease-in-out infinite}
  /* Blindaje de proporciones en móviles estrechos */
  .wrap{box-sizing:border-box}
  .nav{gap:2px}
  .nav button{min-width:0;overflow:hidden}
  @media (max-width:360px){
    .hero h1{font-size:20px}
    .nav button .ic{width:21px;height:21px}
    .splan-feats{grid-template-columns:1fr}
    .splan-price{font-size:26px}
    .frame .prev .nm{font-size:17px;max-width:60%}
  }

  /* ===== Iconos SVG animados ===== */
  @keyframes coinflip{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
  @keyframes wheelnudge{0%,72%,100%{transform:rotate(0)}84%{transform:rotate(20deg)}}
  @keyframes giftshake{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-9deg)}95%{transform:rotate(9deg)}}
  .ic.anim-coin{animation:coinflip 3.2s ease-in-out infinite}
  .ic.anim-spark{animation:twinkle 1.9s ease-in-out infinite}
  .ic.anim-wheel{transform-origin:50% 50%;animation:wheelnudge 3.4s ease-in-out infinite}
  .ic.anim-gift{transform-origin:50% 80%;animation:giftshake 3.6s ease-in-out infinite}
  .ic.uco{color:var(--gold)}
  .ic.ustar{color:var(--gold)}
  .price-ic{width:15px;height:15px;vertical-align:-2px}

  /* ——— 🎧 Entrada a Música ——— */
  .spotify-entry{display:flex;align-items:center;gap:13px;width:100%;text-align:left;margin-top:14px;padding:14px;border:0;border-radius:16px;cursor:pointer;
    background:linear-gradient(135deg,#1db954,#0d7a37);color:#fff;box-shadow:0 8px 22px rgba(29,185,84,.28)}
  .spotify-entry .se-ic{width:44px;height:44px;border-radius:12px;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;flex:none}
  .spotify-entry .se-tx{flex:1;min-width:0}
  .spotify-entry .se-tx b{font-size:15.5px;font-weight:800;display:block}
  .spotify-entry .se-tx span{font-size:12px;opacity:.9}
  .spotify-entry .arr{width:18px;height:18px;opacity:.85}

  /* ——— 🎧 Vista Música (estilo Spotify) ——— */
  /* Full-bleed EXACTO al ancho de la pantalla (evita la tira del fondo en el borde
     derecho en cualquier teléfono, sin depender del padding del contenedor). */
  .view.spot{background:#0a0a0c;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:-16px;padding:0;min-height:100vh;overflow-x:hidden}
  .view.spot .spot-in{max-width:560px;margin:0 auto;padding:0 16px}
  .spot-top{padding:calc(14px + var(--tgTop, env(safe-area-inset-top))) 0 8px;position:sticky;top:0;background:linear-gradient(180deg,#12121a 0%,#0a0a0c 100%);z-index:8}
  .spot-title{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.5px}
  .spot-sub{font-size:12px;color:#9aa0a6;font-weight:600;margin-top:1px}
  /* App-bar del emulador: logo del bot + marca + salir */
  .spot-appbar{display:flex;align-items:center;gap:11px}
  .spot-exit{flex:none;background:rgba(255,255,255,.1);border:0;color:#fff;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,background .2s}
  .spot-exit:active{transform:scale(.9)}
  .spot-exit .ic{width:24px;height:24px}
  .spot-logo{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 3px 10px rgba(0,0,0,.4);background:transparent}
  .spot-brand{flex:1;min-width:0}
  .spot-iconbtn{flex:none;background:rgba(255,255,255,.1);border:0;color:#fff;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s}
  .spot-iconbtn:active{transform:scale(.9)}
  /* 🎧 MODO INMERSIVO: se oculta la barra de navegación y el emulador ocupa todo. */
  .nav{transition:transform .34s cubic-bezier(.2,.7,.2,1)}
  body.spot-mode .nav{transform:translateY(180%);pointer-events:none}
  body.spot-mode{padding-bottom:0}
  body.spot-mode .player{bottom:calc(14px + env(safe-area-inset-bottom))}
  /* Entrada épica del emulador */
  .view.spot.active{animation:spotIn .5s cubic-bezier(.2,.75,.2,1)}
  @keyframes spotIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
  .spot-appbar>*{animation:spotItem .5s both}
  .spot-appbar>*:nth-child(1){animation-delay:.05s}.spot-appbar>*:nth-child(2){animation-delay:.1s}.spot-appbar>*:nth-child(3){animation-delay:.15s}.spot-appbar>*:nth-child(4){animation-delay:.2s}
  @keyframes spotItem{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .spot-search{display:flex;align-items:center;gap:11px;background:#fff;border-radius:26px;padding:12px 18px;margin-top:14px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
  .spot-search .ic{width:20px;height:20px;color:#121212;flex:none}
  .spot-search input{flex:1;border:0;outline:0;background:0;font-size:15px;color:#121212;font-weight:600}
  .spot-search input::placeholder{color:#6b6b6b;font-weight:600}
  /* Géneros: rejilla de tarjetas tipo "Explorar" de Spotify */
  .spot-genres{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}
  .genre{position:relative;overflow:hidden;border:0;border-radius:12px;height:92px;padding:12px 13px;font-size:15px;font-weight:800;color:#fff;cursor:pointer;text-align:left;display:flex;align-items:flex-start;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .12s ease}
  .genre:active{transform:scale(.97)}
  .genre .genre-lbl{position:relative;z-index:2;line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,.35)}
  /* Miniatura del artista/portada en la esquina, girada como en Spotify */
  .genre::after{content:"";position:absolute;right:-14px;bottom:-14px;width:58px;height:58px;border-radius:9px;background:rgba(0,0,0,.28);transform:rotate(28deg);box-shadow:-3px -3px 8px rgba(0,0,0,.18);z-index:0}
  .genre .genre-img{position:absolute;right:-12px;bottom:-12px;width:60px;height:60px;object-fit:cover;border-radius:8px;transform:rotate(26deg);box-shadow:-4px -3px 12px rgba(0,0,0,.4);z-index:1;animation:gimg .4s ease both}
  @keyframes gimg{from{opacity:0;transform:rotate(26deg) scale(.8)}to{opacity:1;transform:rotate(26deg) scale(1)}}
  .spot-more{display:block;width:100%;margin-top:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#dfe3e8;font-weight:700;font-size:13px;padding:9px;border-radius:10px;cursor:pointer;transition:background .18s}
  .spot-more:active{background:rgba(255,255,255,.14)}
  .spot-h{color:#fff;font-size:18px;font-weight:800;margin:24px 0 10px;display:flex;align-items:center;gap:10px}
  .spot-h .ic{width:18px;height:18px}
  .spot-empty{color:#8a9099;text-align:center;padding:34px 20px;font-size:13.5px}
  /* Al buscar, ocultamos las secciones de inicio para que no estorben (recientes, listas, etc.) */
  .view.spot.searching #musGenres,.view.spot.searching #musFavWrap,.view.spot.searching #musFollowWrap,.view.spot.searching #musListsWrap,.view.spot.searching #musPubWrap,.view.spot.searching #musRecentWrap{display:none!important}
  .trow{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:9px;cursor:pointer}
  .trow:active{background:rgba(255,255,255,.06)}
  .trow.playing{background:rgba(29,185,84,.13)}
  .trow img{width:50px;height:50px;border-radius:6px;flex:none;object-fit:cover;background:#222}
  .trow .ti{flex:1;min-width:0}
  .trow .ti b{display:block;font-size:14.5px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .trow.playing .ti b{color:#1db954}
  .trow .ti span{font-size:12.5px;color:#9aa0a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .trow .tdl{width:38px;height:38px;border-radius:50%;flex:none;background:rgba(255,255,255,.08);border:0;color:#cfd3d8;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .trow .tdl .ic{width:17px;height:17px}
  .trow .tfav{width:38px;height:38px;border-radius:50%;flex:none;background:0;border:0;color:#9aa0a6;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .trow .tfav.on{color:#1db954}
  .trow .tfav .ic{width:19px;height:19px}
  /* Logo Spotify al pie */
  .spot-foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 0 12px;opacity:.9}
  .spot-foot .sp-logo{display:flex;align-items:center;gap:8px;color:#1db954}
  .spot-foot .sp-logo svg{width:26px;height:26px}
  .spot-foot .sp-logo b{font-size:17px;font-weight:800;letter-spacing:-.3px;color:#fff}
  .spot-foot .foot-botlogo{width:24px;height:24px;border-radius:50%;object-fit:cover;background:transparent}
  .spot-foot span{font-size:11px;color:#6b7178;text-align:center}
  /* Reproductor fijo (mini) */
  .player{position:fixed;left:10px;right:10px;bottom:calc(64px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto;background:linear-gradient(180deg,#2a2436,#1c1926);border-radius:13px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.55);display:none;z-index:20}
  .player.on{display:block}
  .player .pl-prog{height:3px;background:rgba(255,255,255,.14);cursor:pointer}
  .player .pl-prog i{display:block;height:100%;width:0;background:#1db954}
  .player .pl-body{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer}
  .player .pl-cover{width:44px;height:44px;border-radius:8px;flex:none;object-fit:cover;background:#333}
  .player .pl-meta{flex:1;min-width:0}
  .player .pl-meta b{display:block;font-size:13.5px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .player .pl-meta span{font-size:11.5px;color:#b9bec6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .player .pl-play{width:44px;height:44px;border-radius:50%;flex:none;background:#1db954;border:0;color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .player .pl-nav{background:0;border:0;color:#dfe3e8;cursor:pointer;flex:none;padding:4px;display:flex;align-items:center;justify-content:center}
  .player .pl-play .ic{width:20px;height:20px}
  .player .pl-nav .ic{width:20px;height:20px}
  /* Pantalla completa "reproduciendo ahora" */
  .np{position:fixed;inset:0;z-index:60;background:#0a0a0c;display:flex;flex-direction:column;align-items:center;padding:18px 22px 28px;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.7,.2,1);overflow:hidden}
  .np.on{transform:translateY(0)}
  .np-in{width:100%;max-width:420px;margin:auto 0;display:flex;flex-direction:column;align-items:center}
  .np-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(70px) brightness(.5) saturate(1.5);transform:scale(1.4);opacity:.75;z-index:-1}
  .np-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.25),rgba(10,10,12,.94))}
  .np-top{display:flex;align-items:center;width:100%;max-width:420px;margin:2px auto 0}
  .np-min{background:0;border:0;color:#fff;line-height:1;cursor:pointer;width:40px;display:flex;align-items:center}
  .np-min .ic{width:24px;height:24px}
  .np-lbl{flex:1;text-align:center;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;opacity:.85}
  .np-dots{background:0;border:0;color:#fff;cursor:pointer;width:40px;display:flex;justify-content:flex-end}.np-dots .ic{width:22px;height:22px}
  .np-cover{width:min(74vw,300px);height:min(74vw,300px);border-radius:16px;object-fit:cover;margin:18px 0;box-shadow:0 26px 64px rgba(0,0,0,.65);background:#222}
  .np-info{width:100%}
  .np-info b{display:block;color:#fff;font-size:23px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .np-info span{color:#c6ccd4;font-size:15px}
  .np-seek{width:100%;height:5px;background:rgba(255,255,255,.24);border-radius:6px;margin-top:16px;cursor:pointer}
  .np-seek i{display:block;height:100%;width:0;background:#1db954;border-radius:6px;position:relative}
  .np-seek i::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
  .np-times{width:100%;display:flex;justify-content:space-between;color:#b9bec6;font-size:11.5px;margin-top:6px}
  .np-ctrls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:16px;width:100%}
  .np-ctrls button{background:0;border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .np-ctrls button .ic{width:30px;height:30px}
  .np-ctrls .np-big{width:66px;height:66px;border-radius:50%;background:#1db954;color:#000}
  .np-ctrls .np-big .ic{width:28px;height:28px}
  .np-actions{display:flex;gap:10px;margin-top:18px;width:100%;justify-content:center}
  .np-act{flex:1;max-width:180px;justify-content:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:22px;padding:11px 14px;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
  .np-act .ic{width:16px;height:16px}
  .np-act.liked{background:rgba(29,185,84,.2);border-color:#1db954;color:#1db954}
  .np-btnrow{display:flex;gap:10px;margin-top:11px;width:100%}
  .np-follow{flex:1;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:22px;padding:11px 14px;font-weight:800;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
  .np-follow .ic{width:17px;height:17px}
  .np-follow.on{background:rgba(29,185,84,.18);border-color:#1db954;color:#1db954}
  .np-lyrbtn{flex:none;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:22px;padding:11px 16px;font-weight:800;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
  .np-lyrbtn .ic{width:16px;height:16px}
  .np-dlbtn{margin-top:11px;width:100%;justify-content:center;background:#1db954;border:0;color:#000;border-radius:24px;padding:13px 22px;font-weight:800;font-size:14.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
  .np-dlbtn .ic{width:18px;height:18px}
  .np-note{color:#8a9099;font-size:11.5px;margin-top:10px;text-align:center}
  /* Panel de LETRA (desliza sobre la pantalla de reproducción) */
  .np-lyrics{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,#1e1a2b,#0a0a0c);transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:16px 20px 28px}
  .np-lyrics.on{transform:translateY(0)}
  .np-lyrics .lyr-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .np-lyrics .lyr-top button{background:rgba(255,255,255,.12);border:0;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .np-lyrics .lyr-top button .ic{width:20px;height:20px}
  .np-lyrics .lyr-top b{color:#fff;font-size:17px;font-weight:800}
  .np-lyrics .lyr-body{flex:1;overflow-y:auto;color:#e8eaed;font-size:16px;line-height:1.7;font-weight:600;white-space:pre-wrap}
  .np-lyrics .lyr-body.empty{display:flex;align-items:center;justify-content:center;text-align:center;color:#8a9099;font-weight:600}
  /* shuffle / repeat */
  .np-ctrls .np-side{color:#c6ccd4}
  .np-ctrls .np-side .ic{width:22px;height:22px}
  .np-ctrls .np-side.on{color:#1db954}
  .np-info b.tap{cursor:pointer}
  .np-info b.tap:active{opacity:.7}
  /* Página de artista */
  .art{position:fixed;inset:0;z-index:62;background:#0a0a0c;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.7,.2,1);overflow-y:auto;display:flex;flex-direction:column}
  .art.on{transform:translateY(0)}
  .art-hero{position:relative;padding:0 0 14px;background:linear-gradient(180deg,#1e1a2b,#0a0a0c)}
  .art-topbar{display:flex;align-items:center;gap:10px;padding:16px 16px 6px;position:sticky;top:0;z-index:3}
  .art-topbar button{background:rgba(0,0,0,.35);border:0;color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
  .art-topbar button .ic{width:22px;height:22px}
  .art-head{display:flex;flex-direction:column;align-items:center;padding:6px 20px 0;text-align:center}
  .art-cover{width:132px;height:132px;border-radius:50%;object-fit:cover;background:#222;box-shadow:0 16px 40px rgba(0,0,0,.55)}
  .art-name{color:#fff;font-size:26px;font-weight:900;margin-top:14px;letter-spacing:-.4px}
  .art-follow{margin-top:12px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:24px;padding:9px 26px;font-weight:800;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
  .art-follow .ic{width:16px;height:16px}
  .art-follow.on{background:rgba(29,185,84,.18);border-color:#1db954;color:#1db954}
  .art-in{max-width:560px;margin:0 auto;width:100%;padding:8px 16px 40px}
  .art-h{color:#fff;font-size:18px;font-weight:800;margin:22px 0 10px;display:flex;align-items:center;gap:9px}
  .art-h .ic{width:18px;height:18px;color:#1db954}
  .evt{display:flex;align-items:center;gap:13px;padding:12px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;margin-bottom:9px}
  .evt .evt-d{flex:none;width:52px;text-align:center;background:rgba(29,185,84,.14);border-radius:10px;padding:7px 4px;color:#1db954}
  .evt .evt-d b{display:block;font-size:19px;font-weight:900;line-height:1}
  .evt .evt-d span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
  .evt .evt-i{flex:1;min-width:0}
  .evt .evt-i b{display:block;color:#fff;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .evt .evt-i span{display:block;color:#9aa0a6;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .evt .evt-t{flex:none;background:#1db954;border:0;color:#000;border-radius:20px;padding:8px 12px;font-weight:800;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;text-decoration:none}
  .evt .evt-t .ic{width:14px;height:14px}
  /* 🎬 Cine (TMDB) */
  .cine{position:fixed;inset:0;z-index:63;background:#0a0a0c;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.7,.2,1);overflow-y:auto;display:flex;flex-direction:column}
  .cine.on{transform:translateY(0)}
  .cine-top{display:flex;align-items:center;gap:12px;padding:16px 16px 6px;position:sticky;top:0;background:linear-gradient(180deg,#12121a,#0a0a0c);z-index:3}
  .cine-top button{background:rgba(255,255,255,.1);border:0;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
  .cine-top button .ic{width:22px;height:22px}
  .cine-top b{color:#fff;font-size:22px;font-weight:900}
  .cine-in{max-width:640px;margin:0 auto;width:100%;padding:6px 16px 40px}
  .cine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:12px}
  .cf{cursor:pointer;position:relative}
  .cf .po{width:100%;aspect-ratio:2/3;border-radius:12px;object-fit:cover;background:#1a1d24;display:block;box-shadow:0 6px 16px rgba(0,0,0,.35)}
  .cf b{display:block;font-size:12px;color:#fff;margin-top:6px;font-weight:600;line-height:1.25;max-height:2.5em;overflow:hidden}
  .cf .rt{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.7);color:#ffc34d;font-size:11px;font-weight:800;padding:2px 6px;border-radius:8px;display:flex;align-items:center;gap:3px}
  .cf .rt .ic{width:11px;height:11px;color:#ffc34d}
  .cf .badge{position:absolute;top:6px;left:6px;background:rgba(106,92,255,.9);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:7px;text-transform:uppercase}
  /* Ficha */
  .cd{position:fixed;inset:0;z-index:64;background:#0a0a0c;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);overflow-y:auto}
  .cd.on{transform:translateY(0)}
  .cd-hero{position:relative;height:220px;background-size:cover;background-position:center}
  .cd-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.1),#0a0a0c)}
  .cd-back{position:absolute;top:14px;left:14px;z-index:3;background:rgba(0,0,0,.45);border:0;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
  .cd-back .ic{width:22px;height:22px}
  .cd-in{max-width:640px;margin:-56px auto 0;position:relative;z-index:2;padding:0 18px 44px;display:flex;flex-direction:column}
  .cd-head{display:flex;gap:14px;align-items:flex-end}
  .cd-poster{width:104px;height:156px;border-radius:12px;object-fit:cover;flex:none;box-shadow:0 10px 26px rgba(0,0,0,.5);background:#1a1d24}
  .cd-ht{flex:1;min-width:0;padding-bottom:4px}
  .cd-ht h2{color:#fff;font-size:20px;font-weight:900;line-height:1.15}
  .cd-meta{color:#c6ccd4;font-size:12.5px;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .cd-meta .rt{color:#ffc34d;font-weight:800;display:inline-flex;align-items:center;gap:3px}
  .cd-meta .rt .ic{width:13px;height:13px;color:#ffc34d}
  .cd-genres{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
  .cd-genres span{background:rgba(255,255,255,.08);color:#cfd3d8;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:14px}
  .cd-trailer{margin-top:16px;width:100%;justify-content:center;background:linear-gradient(135deg,#6a5cff,#22d3ee);border:0;color:#fff;border-radius:24px;padding:14px;font-weight:800;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:9px}
  .cd-trailer .ic{width:20px;height:20px}
  .cd-ov{color:#dfe3e8;font-size:14.5px;line-height:1.6;margin-top:16px}
  .cd-h{color:#fff;font-size:15px;font-weight:800;margin:18px 0 8px}
  .cd-cast{color:#b9bec6;font-size:13px;line-height:1.6}
  .cd-prov{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
  .cd-prov span{background:rgba(46,204,113,.14);border:1px solid rgba(46,204,113,.3);color:#7ee6a6;font-size:12px;font-weight:700;padding:5px 11px;border-radius:12px}
  /* 🌍 Playlists de la comunidad */
  .pub-tabs{display:flex;gap:8px;margin:14px 0 8px;overflow-x:auto;scrollbar-width:none}.pub-tabs::-webkit-scrollbar{display:none}
  .pubtab{flex:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#cfd3d8;font-size:13px;font-weight:700;border-radius:16px;padding:7px 15px;cursor:pointer}
  .pubtab.on{background:#22d3ee;border-color:#22d3ee;color:#04222a}
  .plrow{display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:9px;cursor:pointer}
  .plrow:active{background:rgba(255,255,255,.06)}
  .plrow img{width:54px;height:54px;border-radius:9px;object-fit:cover;flex:none;background:linear-gradient(135deg,#3a2a6e,#22d3ee)}
  .plrow .pi{flex:1;min-width:0}
  .plrow .pi b{display:block;font-size:14.5px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .plrow .pi span{display:block;font-size:12px;color:#9aa0a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .plrow .pm{flex:none;font-size:11px;color:#9aa0a6;text-align:right;line-height:1.6}
  .plist .pl-art img{width:100%;height:100%;object-fit:cover;border-radius:12px}
  .np-follow.on{background:rgba(29,185,84,.18);border-color:#1db954;color:#1db954}
  /* me gusta / listas */
  .spot-playall{margin-left:auto;background:rgba(29,185,84,.16);border:1px solid rgba(29,185,84,.4);color:#1db954;font-size:12px;font-weight:800;border-radius:16px;padding:6px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
  .spot-playall .ic{width:13px;height:13px}
  .spot-lists{display:flex;gap:12px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}.spot-lists::-webkit-scrollbar{display:none}
  .artchips{display:flex;gap:14px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}.artchips::-webkit-scrollbar{display:none}
  .artchip{flex:none;width:74px;text-align:center;cursor:pointer}
  .artchip .av{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#3a2a6e,#1db954);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.35)}
  .artchip b{display:block;font-size:11.5px;color:#fff;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
  .artchip:active{opacity:.7}
  .plist{flex:none;width:118px;cursor:pointer}
  .plist .pl-art{width:118px;height:118px;border-radius:12px;background:linear-gradient(135deg,#3a2a6e,#1db954);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
  .plist .pl-art .ic{width:44px;height:44px;color:#fff;opacity:.92}
  .plist .pl-art img{width:100%;height:100%;object-fit:cover;border-radius:12px}
  .plist b{display:block;font-size:12.5px;color:#fff;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .plist span{font-size:11px;color:#9aa0a6}
  .spotify-entry .arr{width:18px;height:18px}
  /* modal listas */
  .lm{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center}
  .lm.on{display:flex}
  .lm-box{background:#1c1c22;width:100%;max-width:520px;border-radius:18px 18px 0 0;padding:18px 18px 26px;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .lm-title{color:#fff;font-size:17px;font-weight:800;margin-bottom:12px}
  .lm-list{max-height:40vh;overflow-y:auto}
  .lm-item{display:flex;align-items:center;gap:10px;padding:12px 6px;color:#fff;font-size:14.5px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer}
  .lm-item .c{margin-left:auto;font-size:12px;color:#9aa0a6}
  .lm-new{display:flex;gap:8px;margin-top:12px}
  .lm-new input{flex:1;background:#0f0f14;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;color:#fff;font-size:14px}
  .lm-new button{background:#1db954;border:0;color:#000;font-weight:800;border-radius:12px;padding:0 18px;cursor:pointer}
  .lm-close{width:100%;margin-top:14px;background:rgba(255,255,255,.08);border:0;color:#fff;border-radius:12px;padding:12px;font-weight:700;cursor:pointer}
  .cfgopt{display:flex;align-items:center;gap:10px;padding:13px 12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;margin-bottom:8px;cursor:pointer}
  .cfgopt.on{border-color:#1db954;background:rgba(29,185,84,.12)}
  .cfgopt .co-x{flex:1;min-width:0}
  .cfgopt .co-x b{display:block;color:#fff;font-size:14.5px;font-weight:700}
  .cfgopt .co-x span{font-size:12px;color:#9aa0a6}
  .cfgopt .co-c{width:20px;height:20px;color:#1db954;flex:none}
  /* Menú contextual de canción */
  .tm-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .tm-head img{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:none;background:#222}
  .tm-head .tm-ht{flex:1;min-width:0}
  .tm-head .tm-ht b{display:block;color:#fff;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tm-head .tm-ht span{color:#9aa0a6;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .tm-acts{display:flex;flex-direction:column;gap:2px}
  .tm-acts button{display:flex;align-items:center;gap:13px;width:100%;background:0;border:0;color:#e8eaed;font-size:14.5px;font-weight:600;padding:13px 6px;cursor:pointer;text-align:left;border-radius:8px}
  .tm-acts button:active{background:rgba(255,255,255,.06)}
  .tm-acts button .ic{width:19px;height:19px;color:#9aa0a6;flex:none}

  /* ===================== 🎧 MEGA EMULADOR: acento por color, animaciones, ecualizador y cola ===================== */
  /* Acento dinámico extraído de la carátula (fallback a gris) */
  .np{ --np-accent:#2b2b38; background-color:#0a0a0c !important; background-image:linear-gradient(180deg, var(--np-accent) 0%, #0a0a0c 44%) !important }
  .np-bg{opacity:.45}
  /* Portada: envoltura con glow del color de la canción + "respiración" al sonar */
  .np-art{position:relative;display:flex;align-items:center;justify-content:center;margin:14px 0 4px}
  .np-art::before{content:"";position:absolute;width:76%;height:76%;border-radius:24px;background:var(--np-accent);filter:blur(46px);opacity:.55;z-index:0;transition:opacity .5s}
  .np-cover{position:relative;z-index:1;margin:6px 0!important;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
  .np.playing .np-cover{animation:npBreathe 6s ease-in-out infinite}
  .np.playing .np-art::before{animation:npGlow 6s ease-in-out infinite}
  @keyframes npBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
  @keyframes npGlow{0%,100%{opacity:.42}50%{opacity:.72}}
  .np:not(.playing) .np-cover{transform:scale(.97)}
  /* Entrada en cascada de la pantalla Now Playing */
  .np.on .np-in>*{animation:npItem .5s both}
  .np.on .np-in>*:nth-child(1){animation-delay:.02s}
  .np.on .np-in>*:nth-child(2){animation-delay:.07s}
  .np.on .np-in>*:nth-child(3){animation-delay:.12s}
  .np.on .np-in>*:nth-child(4){animation-delay:.16s}
  .np.on .np-in>*:nth-child(5){animation-delay:.2s}
  .np.on .np-in>*:nth-child(6){animation-delay:.24s}
  .np.on .np-in>*:nth-child(7){animation-delay:.28s}
  @keyframes npItem{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  /* La barra de progreso y el botón grande usan el color de la canción */
  .np-seek i{background:var(--np-accent)!important}
  .np-ctrls .np-big{background:var(--np-accent)!important;box-shadow:0 8px 22px -6px var(--np-accent)}
  .player .pl-prog i{background:var(--np-accent,#1db954)}
  /* 📊 Ecualizador visual (Web Audio) */
  .np-eq{width:100%;max-width:420px;height:40px;margin:12px 0 -4px;display:block;opacity:.9}
  /* 📋 Cola de reproducción (panel deslizante, igual que la letra) */
  .np-queue{position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,#181722,#0a0a0c);transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:16px 18px 24px}
  .np-queue.on{transform:translateY(0)}
  .np-queue .lyr-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .np-queue .lyr-top button{background:rgba(255,255,255,.12);border:0;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .np-queue .lyr-top button .ic{width:20px;height:20px}
  .np-queue .lyr-top b{color:#fff;font-size:17px;font-weight:800}
  .q-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .q-sec{color:#9aa0a6;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin:14px 4px 6px}
  .q-row{display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:10px;cursor:pointer}
  .q-row:active{background:rgba(255,255,255,.06)}
  .q-row.now{background:rgba(255,255,255,.05)}
  .q-row img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;background:#333}
  .q-row .qi{flex:1;min-width:0}
  .q-row .qi b{display:block;color:#fff;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .q-row .qi span{display:block;color:#aeb4bc;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .q-row .qeq{flex:none;color:var(--np-accent,#1db954);font-size:11px;font-weight:800}
  .q-row .qx{flex:none;background:0;border:0;color:#8a9099;cursor:pointer;padding:6px;display:flex}
  .q-row .qx .ic{width:18px;height:18px}
  .q-empty{color:#8a9099;text-align:center;padding:30px 20px;font-size:13.5px}
  /* Saludo por hora del día en la cabecera del emulador */
  .spot-hi{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.5px}
  /* Revelado suave de las tarjetas de género al entrar */
  .view.spot.active .genre{animation:npItem .5s both}
  .view.spot.active .genre:nth-child(2){animation-delay:.04s}
  .view.spot.active .genre:nth-child(3){animation-delay:.08s}
  .view.spot.active .genre:nth-child(4){animation-delay:.12s}
  .view.spot.active .genre:nth-child(5){animation-delay:.16s}
  .view.spot.active .genre:nth-child(6){animation-delay:.2s}

  /* 🎤 Letra SINCRONIZADA (karaoke): línea activa brillante, el resto atenuado */
  .np-lyrics .lyr-body.synced{display:block;font-size:20px;line-height:1.45;font-weight:800;padding:6px 2px 46vh;scroll-behavior:smooth}
  .lyr-line{color:#828a95;margin:15px 0;cursor:pointer;transition:color .25s ease,opacity .25s ease,transform .25s ease;transform-origin:left center;opacity:.85}
  .lyr-line.on{color:#fff;opacity:1;transform:scale(1.03)}
  .lyr-line:active{color:#cfd3d8}

  /* ===== 🔽 Now Playing con scroll + secciones extra (Sobre el artista, recomendaciones) ===== */
  /* El scroll vive en un contenedor interno; así los paneles (letra/cola) NO se descolocan. */
  .np{padding:0 !important;overflow:hidden}
  .np-scroll{position:relative;z-index:1;height:100%;width:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;padding:18px 22px 30px}
  .np-in{margin:0 auto !important;min-height:calc(100vh - 205px);justify-content:center}
  .np-extra{position:relative;z-index:1;width:100%;max-width:420px;margin:4px auto 0;padding-bottom:36px}
  .npx-sec{margin-top:24px}
  .npx-h{color:#fff;font-size:18px;font-weight:800;margin-bottom:12px}
  .npx-artist{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:13px}
  .npx-ph{width:58px;height:58px;border-radius:50%;flex:none;background:#2a2a35;background-size:cover;background-position:center}
  .npx-cover{width:58px;height:58px;border-radius:10px;flex:none;object-fit:cover;background:#2a2a35}
  .npx-ai{flex:1;min-width:0}
  .npx-ai b{display:block;color:#fff;font-size:15.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .npx-ai span{color:#aeb4bc;font-size:12.5px}
  .npx-artist .np-follow{flex:none;padding:9px 15px}
  /* Los paneles de letra/cola cubren toda la pantalla del reproductor (que ya no hace scroll) */
  .np-lyrics,.np-queue{position:absolute;z-index:70}
  /* 🎛 Fila de acciones en ICONOS (limpia y ordenada, en vez de botones grandes con texto) */
  .np-iconrow{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;max-width:360px;margin:20px auto 0}
  .npi{flex:1;height:48px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:14px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,background .2s,color .2s,border-color .2s}
  .npi:active{transform:scale(.88)}
  .npi .ic{width:22px;height:22px}
  /* Activado → usa el color detectado de la carátula (como la barra y el ecualizador) */
  .npi.liked,.npi.on{color:var(--np-accent,#1db954);border-color:var(--np-accent,#1db954);background:rgba(255,255,255,.10)}
  .npi-dl{background:var(--np-accent,#1db954);border-color:transparent;color:#fff}
  .npi-dl .ic{width:23px;height:23px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
  .npi-dl:active{transform:scale(.88)}
  /* 👇 Indicador "desliza para más" */
  .np-hint{display:flex;flex-direction:column;align-items:center;gap:1px;color:#cdd2d9;font-size:11.5px;font-weight:700;margin-top:18px;opacity:.9;transition:opacity .3s;animation:hintBob 1.8s ease-in-out infinite}
  .np-hint .ic{width:20px;height:20px}
  .np-hint.hide{opacity:0;pointer-events:none}
  @keyframes hintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

  /* ===== 🎧 Mixes para ti (carrusel) + búsquedas recientes ===== */
  .mixrow{display:flex;gap:12px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none;margin-top:10px}.mixrow::-webkit-scrollbar{display:none}
  .mixcard{flex:none;width:150px;height:88px;border:0;border-radius:14px;position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:flex-end;padding:12px;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .12s ease}
  .mixcard:active{transform:scale(.96)}
  .mixcard span{color:#fff;font-weight:800;font-size:15px;text-shadow:0 1px 5px rgba(0,0,0,.45);position:relative;z-index:1;line-height:1.15}
  .mixcard::after{content:"";position:absolute;right:-12px;top:-12px;width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.16);transform:rotate(24deg)}
  .srch-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .srch-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#e8eaed;border-radius:18px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer}
  .srch-chip i{font-style:normal;color:#8a9099;font-size:11px}
  .srch-chip:active{background:rgba(255,255,255,.14)}
  .sleepopt{cursor:pointer;width:100%;text-align:left;background:rgba(255,255,255,.05);color:#fff;-webkit-appearance:none;appearance:none;font:inherit}
  .sleepopt .co-x b{color:#fff}
  .sleepopt.on{border-color:#1db954;background:rgba(29,185,84,.14)}
  /* Al buscar, ocultar también mixes y búsquedas recientes */
  .view.spot.searching #musMixesWrap,.view.spot.searching #musRecentSearchWrap{display:none !important}
  /* Oculta TODAS las secciones del inicio al buscar (mascota, máquina del tiempo, juegos, sala, compatibilidad, amigos…) */
  .view.spot.searching .home-sec{display:none !important}
  /* ✨ Animaciones: entrada suave de resultados y secciones + micro-interacciones */
  @keyframes trowIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  #musResults .trow{animation:trowIn .30s cubic-bezier(.22,1,.36,1) both}
  #musResults .trow:nth-child(2){animation-delay:.03s}
  #musResults .trow:nth-child(3){animation-delay:.06s}
  #musResults .trow:nth-child(4){animation-delay:.09s}
  #musResults .trow:nth-child(5){animation-delay:.12s}
  #musResults .trow:nth-child(6){animation-delay:.15s}
  #musResults .trow:nth-child(n+7){animation-delay:.18s}
  @keyframes homeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .home-sec,.spot-in>#musMixesWrap,.spot-in>#musForYouWrap{animation:homeIn .42s cubic-bezier(.22,1,.36,1) both}
  .mixcard,.decade,.genre,.pet-card,.wrap-card{transition:transform .14s ease, box-shadow .18s ease}
  .mixcard:active,.decade:active,.genre:active{transform:scale(.94)}
  .mixcard:hover,.decade:hover{box-shadow:0 6px 20px rgba(0,0,0,.4)}
  /* Botón de play del reproductor: latido sutil mientras suena */
  @keyframes npBeat{0%,100%{box-shadow:0 6px 22px rgba(0,0,0,.4)}50%{box-shadow:0 8px 30px var(--np-accent,#1db954)}}
  #npScreen.playing .np-big{animation:npBeat 2.2s ease-in-out infinite}
  /* La carátula respira levemente al reproducir (no toca el contenedor .np-art para no chocar con el marco Premium) */
  @keyframes npBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
  #npScreen.playing .np-cover{animation:npBreath 6s ease-in-out infinite}

  /* ===== 🎠 Carrusel de tarjetas de canciones (recientes/tops) ===== */
  .cardrow{display:flex;gap:12px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}.cardrow::-webkit-scrollbar{display:none}
  .tcard{flex:none;width:132px;cursor:pointer}
  .tcard img{width:132px;height:132px;border-radius:12px;object-fit:cover;background:#333;box-shadow:0 6px 18px rgba(0,0,0,.35)}
  .tcard b{display:block;font-size:12.5px;color:#fff;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
  .tcard span{display:block;font-size:11px;color:#9aa0a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tcard:active{opacity:.75}
  /* ===== 🎁 Tu resumen (Wrapped) ===== */
  .wrap-card{width:100%;display:flex;align-items:center;gap:12px;justify-content:space-between;background:linear-gradient(135deg,#3a2a6e,#1db954);border:0;border-radius:16px;padding:16px;color:#fff;cursor:pointer;margin-top:20px;box-shadow:0 8px 22px rgba(0,0,0,.35);transition:transform .12s ease}
  .wrap-card:active{transform:scale(.98)}
  .wrap-card .wc-t{text-align:left;min-width:0}
  .wrap-card b{display:block;font-size:16px;font-weight:900}
  .wrap-card span{font-size:12px;opacity:.92}
  .wrap-card .ic{width:22px;height:22px;flex:none}
  .wrap-stats{display:flex;gap:10px;margin:14px 0 4px}
  .wtile{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:14px 8px;text-align:center}
  .wtile b{display:block;color:#fff;font-size:24px;font-weight:900}
  .wtile span{color:#9aa0a6;font-size:11.5px}
  .wrank{width:26px;text-align:center;font-weight:900;color:var(--np-accent,#1db954);font-size:16px;flex:none}
  /* ===== 🌑 Tema AMOLED (negro puro) ===== */
  body.amoled-on .view.spot{background:#000}
  body.amoled-on .spot-top{background:linear-gradient(180deg,#000,#000)}
  body.amoled-on .np{background-color:#000 !important}
  body.amoled-on .np-lyrics,body.amoled-on .np-queue{background:#000}
  body.amoled-on .player{background:linear-gradient(180deg,#0d0d11,#000)}
  body.amoled-on .art,body.amoled-on .cine{background:#000}

  /* ===== 🔀 Filtros de búsqueda (Canciones / Artistas / Álbumes) ===== */
  .filt-chips{display:flex;gap:8px;margin:2px 0 12px;flex-wrap:wrap}
  .filt{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#dfe3e8;border-radius:18px;padding:6px 15px;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
  .filt.on{background:#1db954;border-color:#1db954;color:#04120a}
  .filt:active{transform:scale(.94)}
  /* "Hecho para ti" también se oculta al buscar */
  .view.spot.searching #musForYouWrap,.view.spot.searching #musWrapWrap,.view.spot.searching #musNewsWrap{display:none !important}

  /* Controles de reordenar en la cola */
  .qctrl{display:flex;align-items:center;gap:0;flex:none}
  .qctrl .qx{padding:5px}
  .qctrl .qx .ic{width:17px;height:17px}

  /* ===== 💎 Temas Premium (tiñen el fondo del emulador) ===== */
  body.theme-aurora .view.spot{background:linear-gradient(180deg,#082a2a 0%,#0a0a0c 42%)}
  body.theme-aurora .spot-top{background:linear-gradient(180deg,#0c3333,#0a0a0c)}
  body.theme-sunset .view.spot{background:linear-gradient(180deg,#2a1408 0%,#0a0a0c 42%)}
  body.theme-sunset .spot-top{background:linear-gradient(180deg,#331a0c,#0a0a0c)}
  body.theme-neon .view.spot{background:linear-gradient(180deg,#26082a 0%,#0a0a0c 42%)}
  body.theme-neon .spot-top{background:linear-gradient(180deg,#2e0c33,#0a0a0c)}
  body.theme-gold .view.spot{background:linear-gradient(180deg,#2a2410 0%,#0a0a0c 42%)}
  body.theme-gold .spot-top{background:linear-gradient(180deg,#33290c,#0a0a0c)}
  .prem-badge{font-size:9px;background:linear-gradient(135deg,#ffc34d,#ff7a45);color:#3a2400;padding:1px 6px;border-radius:8px;font-weight:900;vertical-align:1px;margin-left:5px;letter-spacing:.5px}
  .cfgopt.locked{opacity:.9}

  /* ============================================================
     💎 SKINS PREMIUM — estética completa (fondo, botones, tarjetas, animaciones)
     ============================================================ */
  #skinFx{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}
  /* Cada opción de tema muestra su propia estética (vista previa) con texto blanco legible */
  .skinopt{position:relative;border:0 !important;color:#fff}
  .skinopt .co-x b{color:#fff !important;text-shadow:0 1px 3px rgba(0,0,0,.7)}
  .skinopt .co-x span{color:rgba(255,255,255,.92) !important;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .skinopt.on{box-shadow:0 0 0 2px #fff, 0 0 0 4px #1db954}
  .skin-prev-dark{background:linear-gradient(135deg,#2a2a30,#0f0f12) !important}
  .skin-prev-amoled{background:linear-gradient(135deg,#161616,#000) !important}
  .skin-prev-sakura{background:linear-gradient(135deg,#ff9ec0,#c56b9c) !important}
  .skin-prev-midnight{background:linear-gradient(135deg,#3a7bd5,#7b5cff) !important}
  .skin-prev-retro{background:linear-gradient(135deg,#ff2fd0,#00e5ff) !important}
  .skin-prev-ytmusic{background:linear-gradient(135deg,#ff0033,#212121) !important}
  .skin-prev-applemusic{background:linear-gradient(135deg,#fa2b56,#1c1c1e) !important}
  .skin-prev-pirate{background:linear-gradient(135deg,#e0a84e,#5a3a14) !important}
  .skin-prev-navidad{background:linear-gradient(135deg,#e53935,#2e7d32) !important}

  /* ---------- 🌸 SAKURA ---------- */
  body.skin-sakura .view.spot{background:linear-gradient(180deg,#3a1f2e 0%,#1c1016 45%,#0a0a0c 100%)}
  body.skin-sakura .spot-top{background:linear-gradient(180deg,#3a1f2e,#1c1016)}
  body.skin-sakura .spot-title,body.skin-sakura .spot-hi{color:#ffd9e6;text-shadow:0 1px 10px rgba(255,120,170,.45)}
  body.skin-sakura .spot-sub{color:#e8b8c8}
  body.skin-sakura .spot-search{background:#fff0f5;border:2px solid #ffb7c5;box-shadow:0 6px 22px rgba(255,120,170,.3)}
  body.skin-sakura .spot-h{color:#ffd9e6}
  body.skin-sakura .npi{background:rgba(255,158,192,.14);border-color:rgba(255,158,192,.4);border-radius:16px 6px 16px 6px}
  body.skin-sakura .npi.liked,body.skin-sakura .npi.on{color:#ff7aa8;border-color:#ff7aa8;background:rgba(255,122,168,.2)}
  body.skin-sakura .npi-dl{background:linear-gradient(135deg,#ff9ec0,#ff6f9c)!important;color:#3a1020}
  body.skin-sakura .np-ctrls .np-big{background:linear-gradient(135deg,#ff9ec0,#ff6f9c)!important;box-shadow:0 8px 24px -6px rgba(255,111,156,.7)}
  body.skin-sakura .player .pl-play{background:#ff7aa8;color:#3a1020}
  body.skin-sakura .mixcard,body.skin-sakura .genre{border-radius:18px 6px 18px 6px}
  body.skin-sakura .tcard img,body.skin-sakura .np-cover{border-radius:18px 6px 18px 6px}
  body.skin-sakura .wrap-card{background:linear-gradient(135deg,#ff9ec0,#c56b9c)}
  body.skin-sakura .filt.on{background:#ff7aa8;border-color:#ff7aa8;color:#3a1020}
  .fx-sakura .petal{position:absolute;top:-24px;width:14px;height:14px;background:radial-gradient(circle at 30% 30%,#ffe3ee,#ff9ec0);border-radius:150% 0 150% 0;opacity:.85;box-shadow:0 0 6px rgba(255,150,190,.5);animation:petalFall linear infinite}
  @keyframes petalFall{0%{transform:translateY(-24px) translateX(0) rotate(0);opacity:0}12%{opacity:.9}50%{transform:translateY(50vh) translateX(30px) rotate(240deg)}100%{transform:translateY(112vh) translateX(-20px) rotate(560deg);opacity:.15}}

  /* ---------- 🌌 MEDIANOCHE (aurora + estrellas) ---------- */
  body.skin-midnight .view.spot{background:linear-gradient(180deg,#04122a 0%,#071b3a 40%,#020814 100%)}
  body.skin-midnight .spot-top{background:linear-gradient(180deg,#04122a,#020814)}
  body.skin-midnight .spot-title,body.skin-midnight .spot-hi{color:#cfe8ff;text-shadow:0 0 12px rgba(90,160,255,.5)}
  body.skin-midnight .spot-sub{color:#9ecbff}
  body.skin-midnight .spot-search{background:#0a1f3c;border:2px solid #3a7bd5}
  body.skin-midnight .spot-search input{color:#fff}
  body.skin-midnight .spot-search input::placeholder{color:#8fb4e0}
  body.skin-midnight .spot-search .ic{color:#3a7bd5}
  body.skin-midnight .spot-h{color:#9ecbff}
  body.skin-midnight .npi.liked,body.skin-midnight .npi.on{color:#4db8ff;border-color:#4db8ff;background:rgba(77,184,255,.15)}
  body.skin-midnight .npi-dl{background:linear-gradient(135deg,#4db8ff,#7b5cff)!important;color:#02122a}
  body.skin-midnight .np-ctrls .np-big{background:linear-gradient(135deg,#4db8ff,#7b5cff)!important;box-shadow:0 8px 26px -6px rgba(123,92,255,.7)}
  body.skin-midnight .player .pl-play{background:#4db8ff;color:#02122a}
  body.skin-midnight .wrap-card{background:linear-gradient(135deg,#3a7bd5,#7b5cff)}
  body.skin-midnight .filt.on{background:#4db8ff;border-color:#4db8ff;color:#02122a}
  .fx-midnight::before{content:"";position:absolute;top:0;left:-20%;right:-20%;height:42%;background:radial-gradient(60% 100% at 30% 0,rgba(77,184,255,.2),transparent 70%),radial-gradient(55% 100% at 72% 0,rgba(123,92,255,.2),transparent 70%);filter:blur(22px)}
  .fx-midnight .star{position:absolute;background:#fff;border-radius:50%;opacity:.7;box-shadow:0 0 6px rgba(255,255,255,.8);animation:twinkle 3s ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.95}}

  /* ---------- 🕹️ RETRO 80s (synthwave) ---------- */
  body.skin-retro .view.spot{background:linear-gradient(180deg,#1a0b2e 0%,#0f0524 55%,#05010f 100%)}
  body.skin-retro .spot-top{background:linear-gradient(180deg,#1a0b2e,#0f0524)}
  body.skin-retro .spot-title,body.skin-retro .spot-hi{color:#ff2fd0;font-style:italic;text-shadow:0 0 12px rgba(255,47,208,.7),0 0 2px #fff}
  body.skin-retro .spot-sub{color:#00e5ff}
  body.skin-retro .spot-search{background:#12043a;border:2px solid #00e5ff;box-shadow:0 0 20px rgba(0,229,255,.45)}
  body.skin-retro .spot-search input{color:#fff}
  body.skin-retro .spot-search input::placeholder{color:#7fd7e6}
  body.skin-retro .spot-search .ic{color:#00e5ff}
  body.skin-retro .spot-h{color:#00e5ff;text-shadow:0 0 10px rgba(0,229,255,.5)}
  body.skin-retro .npi{border-radius:6px;background:rgba(255,47,208,.12);border-color:#ff2fd0;box-shadow:0 0 10px rgba(255,47,208,.3)}
  body.skin-retro .npi.liked,body.skin-retro .npi.on{color:#00e5ff;border-color:#00e5ff;box-shadow:0 0 12px rgba(0,229,255,.4)}
  body.skin-retro .npi-dl{background:linear-gradient(135deg,#ff2fd0,#00e5ff)!important;color:#05010f}
  body.skin-retro .np-ctrls .np-big{background:linear-gradient(135deg,#ff2fd0,#00e5ff)!important;box-shadow:0 0 22px rgba(255,47,208,.6)}
  body.skin-retro .player .pl-play{background:#00e5ff;color:#05010f}
  body.skin-retro .mixcard,body.skin-retro .genre,body.skin-retro .tcard img,body.skin-retro .np-cover{border-radius:6px;box-shadow:0 0 16px rgba(0,229,255,.25)}
  body.skin-retro .wrap-card{background:linear-gradient(135deg,#ff2fd0,#00e5ff)}
  body.skin-retro .filt.on{background:#ff2fd0;border-color:#ff2fd0;color:#05010f}
  .fx-retro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background-image:linear-gradient(rgba(0,229,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.35) 1px,transparent 1px);background-size:38px 38px;transform:perspective(300px) rotateX(62deg);transform-origin:bottom;opacity:.45}

  /* ---------- ▶️ YOUTUBE MUSIC ---------- */
  body.skin-ytmusic .view.spot{background:linear-gradient(180deg,#212121 0%,#0f0f0f 55%,#000 100%)}
  body.skin-ytmusic .spot-top{background:linear-gradient(180deg,#212121,#0f0f0f)}
  body.skin-ytmusic .spot-title,body.skin-ytmusic .spot-hi{color:#fff}
  body.skin-ytmusic .spot-sub{color:#aaa}
  body.skin-ytmusic .spot-search{background:#121212;border:1px solid #383838}
  body.skin-ytmusic .spot-search input{color:#fff}
  body.skin-ytmusic .spot-search input::placeholder{color:#909090}
  body.skin-ytmusic .spot-search .ic{color:#909090}
  body.skin-ytmusic .spot-h{color:#fff}
  body.skin-ytmusic .npi.liked,body.skin-ytmusic .npi.on{color:#ff0033;border-color:#ff0033;background:rgba(255,0,51,.14)}
  body.skin-ytmusic .npi-dl{background:#ff0033!important;color:#fff}
  body.skin-ytmusic .np-ctrls .np-big{background:#fff!important;color:#000;box-shadow:0 6px 18px rgba(0,0,0,.5)}
  body.skin-ytmusic .player .pl-play{background:#fff;color:#000}
  body.skin-ytmusic .mixcard,body.skin-ytmusic .genre,body.skin-ytmusic .tcard img,body.skin-ytmusic .np-cover{border-radius:6px}
  body.skin-ytmusic .wrap-card{background:linear-gradient(135deg,#ff0033,#7a0018)}
  body.skin-ytmusic .filt.on{background:#ff0033;border-color:#ff0033;color:#fff}

  /* ---------- 🍎 APPLE MUSIC ---------- */
  body.skin-applemusic .view.spot{background:linear-gradient(180deg,#1c1c1e 0%,#0a0a0a 60%,#000 100%)}
  body.skin-applemusic .spot-top{background:linear-gradient(180deg,#1c1c1e,#0a0a0a)}
  body.skin-applemusic .spot-title,body.skin-applemusic .spot-hi{color:#fff;letter-spacing:-.6px}
  body.skin-applemusic .spot-sub{color:#fa2b56}
  body.skin-applemusic .spot-search{background:#2c2c2e;border:0}
  body.skin-applemusic .spot-search input{color:#fff}
  body.skin-applemusic .spot-search input::placeholder{color:#98989f}
  body.skin-applemusic .spot-search .ic{color:#98989f}
  body.skin-applemusic .spot-h{color:#fff}
  body.skin-applemusic .npi.liked,body.skin-applemusic .npi.on{color:#fa2b56;border-color:#fa2b56;background:rgba(250,43,86,.14)}
  body.skin-applemusic .npi-dl{background:linear-gradient(135deg,#fa2b56,#fc3c44)!important;color:#fff}
  body.skin-applemusic .np-ctrls .np-big{background:linear-gradient(135deg,#fa2b56,#fc3c44)!important;box-shadow:0 8px 24px -6px rgba(250,43,86,.7)}
  body.skin-applemusic .player .pl-play{background:linear-gradient(135deg,#fa2b56,#fc3c44);color:#fff}
  body.skin-applemusic .mixcard,body.skin-applemusic .genre,body.skin-applemusic .tcard img,body.skin-applemusic .np-cover{border-radius:12px}
  body.skin-applemusic .wrap-card{background:linear-gradient(135deg,#fa2b56,#fc3c44)}
  body.skin-applemusic .filt.on{background:#fa2b56;border-color:#fa2b56;color:#fff}

  /* ---------- 🏴‍☠️ PIRATA ---------- */
  body.skin-pirate .view.spot{background:linear-gradient(180deg,#3a2a14 0%,#241708 50%,#0f0a04 100%)}
  body.skin-pirate .spot-top{background:linear-gradient(180deg,#3a2a14,#241708)}
  body.skin-pirate .spot-title,body.skin-pirate .spot-hi{color:#e9c579;font-family:Georgia,'Times New Roman',serif;text-shadow:0 2px 4px rgba(0,0,0,.6)}
  body.skin-pirate .spot-sub{color:#c8a25c}
  body.skin-pirate .spot-search{background:#f3e2b8;border:2px solid #8a5a2e;box-shadow:0 6px 18px rgba(0,0,0,.4)}
  body.skin-pirate .spot-search input{color:#3a2410;font-weight:700}
  body.skin-pirate .spot-search input::placeholder{color:#8a6a3e}
  body.skin-pirate .spot-search .ic{color:#5a3a1e}
  body.skin-pirate .spot-h{color:#e9c579;font-family:Georgia,serif}
  body.skin-pirate .npi{background:rgba(224,168,78,.14);border-color:#a9772e;border-radius:10px}
  body.skin-pirate .npi.liked,body.skin-pirate .npi.on{color:#e0a84e;border-color:#e0a84e;background:rgba(224,168,78,.22)}
  body.skin-pirate .npi-dl{background:linear-gradient(135deg,#e0a84e,#a9772e)!important;color:#2a1808}
  body.skin-pirate .np-ctrls .np-big{background:linear-gradient(135deg,#e0a84e,#a9772e)!important;box-shadow:0 8px 22px -6px rgba(169,119,46,.8)}
  body.skin-pirate .player{background:linear-gradient(180deg,#2e2110,#1a1206)}
  body.skin-pirate .player .pl-play{background:#e0a84e;color:#2a1808}
  body.skin-pirate .mixcard,body.skin-pirate .genre,body.skin-pirate .tcard img,body.skin-pirate .np-cover{border-radius:8px;border:1px solid rgba(224,168,78,.3)}
  body.skin-pirate .wrap-card{background:linear-gradient(135deg,#a9772e,#5a3a14)}
  body.skin-pirate .filt.on{background:#e0a84e;border-color:#e0a84e;color:#2a1808}
  .fx-pirate .pir-wheel{position:absolute;right:-46px;bottom:-46px;width:230px;height:230px;opacity:.13;animation:wheelSpin 44s linear infinite}
  @keyframes wheelSpin{to{transform:rotate(360deg)}}

  /* ---------- 🎄 NAVIDAD ---------- */
  body.skin-navidad .view.spot{background:linear-gradient(180deg,#0b2e1a 0%,#0a1a12 50%,#07100a 100%)}
  body.skin-navidad .spot-top{background:linear-gradient(180deg,#0b2e1a,#0a1a12)}
  body.skin-navidad .spot-title,body.skin-navidad .spot-hi{color:#fff;text-shadow:0 1px 8px rgba(229,57,53,.5)}
  body.skin-navidad .spot-sub{color:#ff8a80}
  body.skin-navidad .spot-search{background:#fff;border:2px solid #e53935}
  body.skin-navidad .spot-search input{color:#1a1a1a}
  body.skin-navidad .spot-h{color:#fff}
  body.skin-navidad .npi.liked,body.skin-navidad .npi.on{color:#e53935;border-color:#e53935;background:rgba(229,57,53,.16)}
  body.skin-navidad .npi-dl{background:linear-gradient(135deg,#e53935,#43a047)!important;color:#fff}
  body.skin-navidad .np-ctrls .np-big{background:linear-gradient(135deg,#e53935,#c62828)!important;box-shadow:0 8px 22px -6px rgba(229,57,53,.7)}
  body.skin-navidad .player .pl-play{background:#e53935;color:#fff}
  body.skin-navidad .wrap-card{background:linear-gradient(135deg,#e53935,#2e7d32)}
  body.skin-navidad .filt.on{background:#e53935;border-color:#e53935;color:#fff}
  .fx-snow .snow{position:absolute;top:-12px;border-radius:50%;background:#fff;opacity:.9;box-shadow:0 0 6px rgba(255,255,255,.7);animation:snowFall linear infinite}
  @keyframes snowFall{0%{transform:translateY(-12px) translateX(0)}50%{transform:translateY(50vh) translateX(20px)}100%{transform:translateY(112vh) translateX(-16px);opacity:.4}}

  /* ============================================================
     🍎 APPLE MUSIC — reestructuración de la estética (no solo color)
     ============================================================ */
  body.skin-applemusic .view.spot,body.skin-applemusic .np,body.skin-applemusic .player{font-family:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",sans-serif}
  /* Home: cabeceras grandes y bold, muy Apple */
  body.skin-applemusic .spot-title,body.skin-applemusic .spot-hi{font-size:27px;font-weight:800;letter-spacing:-.9px}
  body.skin-applemusic .spot-h{font-size:22px;font-weight:800;letter-spacing:-.5px;margin:26px 0 12px}
  body.skin-applemusic .spot-search{border-radius:12px;padding:11px 15px}
  /* Tarjetas más grandes y redondeadas */
  body.skin-applemusic .tcard{width:150px}
  body.skin-applemusic .tcard img{width:150px;height:150px;border-radius:12px}
  body.skin-applemusic .mixcard{border-radius:12px;width:160px;height:96px}
  body.skin-applemusic .plist .pl-art,body.skin-applemusic .plist .pl-art img{border-radius:12px}
  body.skin-applemusic .trow img{border-radius:6px}
  /* Mini-reproductor: barra flotante frosted (efecto cristal) */
  body.skin-applemusic .player{border-radius:14px;background:rgba(42,42,46,.9);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.06)}
  body.skin-applemusic .player .pl-cover{border-radius:6px}
  /* ---- Now Playing estilo Apple ---- */
  body.skin-applemusic .np-bg{opacity:.6}
  body.skin-applemusic .np-in{max-width:400px}
  body.skin-applemusic .np-cover{width:min(80vw,330px);height:min(80vw,330px);border-radius:12px;box-shadow:0 22px 54px rgba(0,0,0,.6)}
  body.skin-applemusic .np:not(.playing) .np-cover{transform:scale(.8)}   /* Apple encoge bastante al pausar */
  body.skin-applemusic .np.playing .np-cover{transform:scale(1)}
  /* título a la izquierda, artista en rojo tappable (como Apple) */
  body.skin-applemusic .np-info{width:100%;text-align:left;margin-top:10px}
  body.skin-applemusic .np-info b{font-size:22px;font-weight:800;letter-spacing:-.4px}
  body.skin-applemusic .np-info span{color:#fa2b56;font-size:18px;font-weight:600}
  /* barra de progreso fina */
  body.skin-applemusic .np-seek{height:7px;border-radius:8px;background:rgba(255,255,255,.22);margin-top:20px}
  body.skin-applemusic .np-seek i{background:rgba(255,255,255,.85)!important}
  body.skin-applemusic .np-seek i::after{display:none}   /* Apple no muestra la bolita salvo al arrastrar */
  body.skin-applemusic .np-times{font-size:11px;color:rgba(255,255,255,.65)}
  /* controles: grandes y minimalistas */
  body.skin-applemusic .np-ctrls{gap:30px;margin-top:20px}
  body.skin-applemusic .np-ctrls button .ic{width:34px;height:34px}
  body.skin-applemusic .np-ctrls .np-big{width:72px;height:72px;background:rgba(255,255,255,.95)!important;color:#000;box-shadow:none}
  body.skin-applemusic .np-ctrls .np-big .ic{width:32px;height:32px}
  body.skin-applemusic .np-side{opacity:.85}
  /* fila de iconos: pastillas de cristal */
  body.skin-applemusic .np-iconrow{gap:12px;margin-top:22px}
  body.skin-applemusic .npi{background:rgba(255,255,255,.12);border:0;border-radius:12px;height:46px}
  body.skin-applemusic .npi.liked,body.skin-applemusic .npi.on{background:rgba(250,43,86,.9);color:#fff}
  body.skin-applemusic .npi-dl{background:linear-gradient(135deg,#fa2b56,#fc3c44)!important;color:#fff;border-radius:12px}
  /* secciones extra (sobre el artista) con look Apple */
  body.skin-applemusic .npx-h{font-size:20px;font-weight:800;letter-spacing:-.4px}
  body.skin-applemusic .npx-artist{border-radius:14px}

  /* ============================================================
     ▶️ YOUTUBE MUSIC — reestructuración de la estética (no solo color)
     ============================================================ */
  body.skin-ytmusic .view.spot,body.skin-ytmusic .np,body.skin-ytmusic .player{font-family:Roboto,"Roboto",system-ui,Arial,sans-serif}
  body.skin-ytmusic .spot-title,body.skin-ytmusic .spot-hi{font-weight:700;letter-spacing:-.3px}
  body.skin-ytmusic .spot-h{font-weight:700;letter-spacing:-.2px}
  body.skin-ytmusic .spot-search{border-radius:24px;padding:11px 16px}
  /* Tarjetas cuadradas, muy YT Music */
  body.skin-ytmusic .tcard img,body.skin-ytmusic .mixcard,body.skin-ytmusic .genre,body.skin-ytmusic .plist .pl-art,body.skin-ytmusic .plist .pl-art img,body.skin-ytmusic .trow img,body.skin-ytmusic .np-cover{border-radius:4px}
  /* ---- Now Playing estilo YT Music ---- */
  body.skin-ytmusic .np-bg{opacity:.35}
  body.skin-ytmusic .np-cover{width:min(82vw,340px);height:min(82vw,340px);border-radius:4px;box-shadow:0 18px 44px rgba(0,0,0,.6)}
  body.skin-ytmusic .np:not(.playing) .np-cover{transform:scale(.92)}
  /* título y artista CENTRADOS (YT Music) */
  body.skin-ytmusic .np-info{text-align:center;width:100%;margin-top:14px}
  body.skin-ytmusic .np-info b{font-size:21px;font-weight:700}
  body.skin-ytmusic .np-info span{color:#aaa;font-size:15px;font-weight:400}
  /* barra de progreso ROJA (marca YouTube) */
  body.skin-ytmusic .np-seek{height:4px;background:rgba(255,255,255,.28);margin-top:22px}
  body.skin-ytmusic .np-seek i{background:#ff0033 !important}
  body.skin-ytmusic .np-seek i::after{background:#ff0033}
  body.skin-ytmusic .player .pl-prog i{background:#ff0033}
  body.skin-ytmusic .np-times{font-size:11px;color:#aaa}
  /* controles: play blanco grande, resto en gris claro */
  body.skin-ytmusic .np-ctrls{gap:26px;margin-top:18px}
  body.skin-ytmusic .np-ctrls button{color:#fff}
  body.skin-ytmusic .np-ctrls button .ic{width:32px;height:32px}
  body.skin-ytmusic .np-ctrls .np-big{width:64px;height:64px;background:#fff !important;color:#000;box-shadow:0 6px 18px rgba(0,0,0,.5)}
  body.skin-ytmusic .np-ctrls .np-big .ic{width:30px;height:30px}
  body.skin-ytmusic .np-side{color:#aaa}
  body.skin-ytmusic .np-side.on{color:#fff}
  /* fila de iconos: planos y sin pastilla (como YT Music) */
  body.skin-ytmusic .np-iconrow{gap:4px;margin-top:20px}
  body.skin-ytmusic .npi{background:transparent;border:0;height:44px;color:#fff}
  body.skin-ytmusic .npi.liked,body.skin-ytmusic .npi.on{background:transparent;color:#ff0033}
  body.skin-ytmusic .npi-dl{background:#ff0033 !important;color:#fff;border-radius:22px}
  /* mini-reproductor plano oscuro */
  body.skin-ytmusic .player{background:#212121;border-radius:6px}
  body.skin-ytmusic .player .pl-play{background:#fff;color:#000}
  body.skin-ytmusic .npx-h{font-weight:700}

  /* 🖥️ En pantalla completa real, empuja las páginas (menos el emulador) bajo la barra de estado.
     Mismo respaldo que el emulador: si Telegram no da --tgTop, usa env(safe-area-inset-top).
     El emulador (.spot) queda excluido porque ya se despeja con su propia barra superior. */
  body.tg-fs .view:not(.spot){padding-top:calc(var(--tgTop, env(safe-area-inset-top, 0px)) + 6px)}

  /* 🖥️ Fullscreen: baja las barras superiores de las pantallas superpuestas para que
     el botón "volver"/"cerrar" no quede bajo el notch y se pueda pulsar. */
  body.tg-fs .art-topbar{padding-top:calc(16px + var(--tgTop, env(safe-area-inset-top,0px)))}
  body.tg-fs .cine-top{padding-top:calc(16px + var(--tgTop, env(safe-area-inset-top,0px)))}
  body.tg-fs .np-scroll{padding-top:calc(18px + var(--tgTop, env(safe-area-inset-top,0px)))}
  body.tg-fs .np-lyrics,body.tg-fs .np-queue{padding-top:calc(16px + var(--tgTop, env(safe-area-inset-top,0px)))}

  /* ❌ Botón para borrar el buscador de música */
  .spot-clear{flex:none;background:0;border:0;cursor:pointer;color:#6b6b6b;display:flex;align-items:center;justify-content:center;padding:2px}
  .spot-clear .ic{width:18px;height:18px}
  .spot-clear:active{opacity:.6}
  /* 🔒 Gate de inicio de sesión */
  #loginGate{position:fixed;inset:0;z-index:200;background:#0a0a0c;display:none;align-items:center;justify-content:center;padding:28px;text-align:center}
  #loginGate.on{display:flex}
  #loginGate .lg-box{max-width:340px;display:flex;flex-direction:column;align-items:center;gap:12px}
  #loginGate .lg-logo{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,.5)}
  #loginGate b{color:#fff;font-size:22px;font-weight:900}
  #loginGate p{color:#aeb4bc;font-size:14px;line-height:1.6}
  #loginGate button{margin-top:6px;background:#1db954;color:#04120a;border:0;border-radius:24px;padding:13px 28px;font-weight:800;font-size:15px;cursor:pointer}
  #loginGate button:active{transform:scale(.96)}
  /* 🧬 ADN musical */
  .adn-box{margin:6px 0 4px}
  .adn-load,.adn-box .q-empty{color:#9aa0a6;text-align:center;padding:24px 12px;font-size:13.5px}
  .adn-card{background:linear-gradient(180deg,rgba(40,26,74,.55),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:16px 14px 18px;text-align:center}
  .adn-title{color:#fff;font-weight:900;font-size:16px;margin-bottom:6px}
  .adn-radar{display:block;margin:2px auto 8px;max-width:280px}
  .adn-tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:6px 0 10px}
  .adn-tag{font-size:12px;font-weight:800;color:#fff;padding:5px 11px;border-radius:20px;background:color-mix(in srgb,var(--c) 26%,transparent);border:1px solid var(--c)}
  .adn-mood{color:#e6e8ea;font-size:14px;font-weight:700;line-height:1.5}
  .adn-share{width:100%;margin-top:12px;background:#1db954;color:#04120a;border:0;border-radius:22px;padding:12px;font-weight:800;font-size:14.5px;cursor:pointer}
  .adn-share:active{transform:scale(.97)}
  /* 🎉 Evento de temporada */
  .mus-season{display:flex;align-items:center;gap:10px;margin:8px 0 2px;padding:10px 12px;border-radius:14px;background:linear-gradient(120deg,rgba(232,17,91,.16),rgba(160,108,255,.12));border:1px solid rgba(255,255,255,.1)}
  .se-emoji{font-size:22px;flex:none}
  .se-msg{flex:1;min-width:0;color:#fff;font-size:12.5px;font-weight:700;line-height:1.35}
  .se-btn{flex:none;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:16px;padding:7px 12px;font-weight:800;font-size:12px;cursor:pointer}
  /* 🕰 Máquina del tiempo */
  .decades{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .decades::-webkit-scrollbar{display:none}
  .decade{flex:0 0 auto;min-width:92px;height:66px;border:0;border-radius:14px;color:#fff;font-weight:900;font-size:17px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
  .decade:active{transform:scale(.95)}
  /* 🎧 Sala de escucha */
  .room-actions{display:flex;gap:10px}
  .room-actions button{flex:1;background:rgba(255,109,0,.14);border:1px solid rgba(255,109,0,.4);color:#ffb26b;border-radius:14px;padding:12px;font-weight:800;font-size:13px;cursor:pointer}
  .room-actions button:active{transform:scale(.98)}
  #roomScreen{position:fixed;inset:0;z-index:134;display:none;flex-direction:column;background:radial-gradient(120% 80% at 50% 0%,#2a1808,#08080c 70%);padding:0 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
  #roomScreen.on{display:flex}
  .room-top{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 14px) 0 10px}
  .room-x{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:36px;height:36px;font-size:15px;cursor:pointer}
  .room-code{flex:1;color:#fff;font-weight:900;font-size:22px;letter-spacing:3px;text-align:center}
  .room-members{color:#ffb26b;font-size:12px;font-weight:700;min-width:70px;text-align:right}
  .room-now{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;text-align:center;margin-bottom:8px}
  .rn-t{color:#fff;font-weight:900;font-size:17px}
  .rn-a{color:#9aa0a6;font-size:13px;margin-top:2px}
  .room-share{margin-bottom:8px}
  .room-share button{width:100%;background:rgba(255,255,255,.08);color:#fff;border:0;border-radius:12px;padding:9px;font-weight:700;font-size:12.5px;cursor:pointer}
  .room-qhead{color:#9aa0a6;font-size:12px;font-weight:800;margin:6px 2px}
  .room-queue{flex:1;overflow-y:auto}
  .rq-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
  .rq-i{flex:1;min-width:0}
  .rq-i b{display:block;color:#fff;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rq-i span{color:#9aa0a6;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rq-vote{flex:none;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:16px;padding:7px 12px;font-weight:800;font-size:12px;cursor:pointer}
  .rq-vote.on{background:rgba(255,109,0,.28);color:#ffb26b}
  .room-ctrls{display:flex;gap:10px;padding-top:8px}
  .room-ctrls .pomo-btn{flex:1}
  /* 🌈 Visualizador a pantalla completa */
  #vizScreen{position:fixed;inset:0;z-index:135;display:none;background:#06060a}
  #vizScreen.on{display:block}
  #vizCanvas{width:100%;height:100%;display:block}
  .viz-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:18px;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:38px;height:38px;font-size:16px;cursor:pointer;z-index:2}
  .viz-info{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);text-align:center;color:#fff;font-weight:800;font-size:15px;padding:0 24px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
  /* 🎮 Juego de ritmo */
  #rhythmScreen{position:fixed;inset:0;z-index:136;display:none;background:#08080e}
  #rhythmScreen.on{display:block}
  #rgCanvas{width:100%;height:100%;display:block;touch-action:none}
  .rg-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:0;right:0;display:flex;align-items:center;gap:12px;padding:0 16px;z-index:2}
  .rg-x{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:36px;height:36px;font-size:15px;cursor:pointer}
  .rg-score{flex:1;color:#fff;font-weight:900;font-size:22px;font-variant-numeric:tabular-nums}
  .rg-combo{color:var(--np-accent,#1db954);font-weight:900;font-size:18px}
  .rg-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:26px;background:rgba(6,6,12,.72);z-index:3}
  .rg-panel b{color:#fff;font-size:22px;font-weight:900}
  .rg-panel span{color:#9aa0a6;font-size:13px;max-width:280px;line-height:1.5}
  .rg-open{background:rgba(160,108,255,.14);border-color:rgba(160,108,255,.4);color:#c9b0ff}
  /* 🎯 Modo concentración (Pomodoro) */
  .pomo-open{width:100%;margin:10px 0 4px;background:rgba(29,185,84,.14);border:1px solid rgba(29,185,84,.4);color:#7ee2a3;border-radius:14px;padding:12px;font-weight:800;font-size:13.5px;cursor:pointer}
  .pomo-open:active{transform:scale(.98)}
  #pomoScreen{position:fixed;inset:0;z-index:130;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;background:radial-gradient(120% 90% at 50% 20%,#0f2a1c,#08080c 70%);transition:background .6s ease}
  #pomoScreen.on{display:flex}
  #pomoScreen.resting{background:radial-gradient(120% 90% at 50% 20%,#1a2140,#08080c 70%)}
  .pomo-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:18px;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:50%;width:38px;height:38px;font-size:16px;cursor:pointer}
  .pomo-phase{color:#7ee2a3;font-weight:800;font-size:16px;letter-spacing:2px;text-transform:uppercase}
  #pomoScreen.resting .pomo-phase{color:#8fb0ff}
  .pomo-time{color:#fff;font-size:82px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
  .pomo-round{color:#9aa0a6;font-size:13px}
  .pomo-ctrls{display:flex;gap:12px;margin-top:14px}
  .pomo-btn{border:0;border-radius:24px;padding:13px 26px;font-weight:800;font-size:15px;cursor:pointer;background:rgba(255,255,255,.12);color:#fff}
  .pomo-btn.primary{background:#1db954;color:#04120a}
  .pomo-btn:active{transform:scale(.96)}
  .pomo-hint{color:#8a9099;font-size:12px;max-width:280px;margin-top:8px;line-height:1.5}
  /* 🎯 Metas del mes */
  .goals-box{display:flex;flex-direction:column;gap:12px;margin:6px 0 4px}
  .goal-top{display:flex;justify-content:space-between;align-items:center;color:#e6e8ea;font-size:13.5px;margin-bottom:6px}
  .goal-top b{color:#fff;font-size:13px}
  .goal-bar{height:9px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
  .goal-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#1db954,#4be07a);transition:width .5s ease}
  /* ⚡ Botón de velocidad (Nightcore/Slowed) */
  .npi-tempo{font-weight:900;font-size:15px;line-height:1}
  #npTempo.on{color:var(--np-accent,#1db954)}
  /* 🐣 Mascota musical */
  .pet-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin:8px 0 4px;padding:12px 14px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:linear-gradient(120deg,rgba(29,185,84,.12),rgba(255,255,255,.04));cursor:pointer}
  .pet-card:active{transform:scale(.99)}
  .pet-emoji{font-size:40px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));animation:petBob 2.6s ease-in-out infinite}
  @keyframes petBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .pet-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .pet-info b{color:#fff;font-size:15px}
  .pet-info span{color:#9aa0a6;font-size:12px}
  .pet-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:3px}
  .pet-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#1db954,#4be07a);transition:width .5s ease}
  /* ✨ Nick con brillo animado (Ultra) */
  @keyframes nickGlow{0%,100%{text-shadow:0 0 6px rgba(29,185,84,.6),0 0 14px rgba(29,185,84,.28)}50%{text-shadow:0 0 10px rgba(80,180,255,.85),0 0 24px rgba(160,110,255,.5)}}
  .nick-ultra{animation:nickGlow 2.8s ease-in-out infinite}
  /* Marco de portada (Premium): resplandor suave en el color de la portada, sin cuadro ni rotación */
  .np-art.frame-prem{border-radius:16px;animation:framePulse 4s ease-in-out infinite}
  @keyframes framePulse{
    0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 16px 0 var(--np-accent,#1db954)}
    50%{box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 30px 4px var(--np-accent,#1db954)}
  }
  /* 🎪 Conciertos */
  .concert-row{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
  .concert-date{flex:0 0 auto;min-width:46px;text-align:center;color:#e8115b;font-weight:900;font-size:13px;text-transform:uppercase}
  .concert-info{flex:1;min-width:0;display:flex;flex-direction:column}
  .concert-info b{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .concert-info span{color:#9aa0a6;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .concert-tix{flex:0 0 auto;font-size:20px;text-decoration:none;padding:4px 8px;border-radius:10px;background:rgba(232,17,91,.16);cursor:pointer}
  /* ⏳ Cápsula del tiempo */
  #musCapsule{display:flex;flex-direction:column;gap:9px}
  .capsule-new{width:100%;background:rgba(160,108,255,.14);border:1px solid rgba(160,108,255,.4);color:#c9b0ff;border-radius:14px;padding:11px;font-weight:800;font-size:13.5px;cursor:pointer}
  .capsule-new:active{transform:scale(.98)}
  .capsule-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.04);cursor:pointer}
  .capsule-row.open{border-color:rgba(160,108,255,.55);background:linear-gradient(120deg,rgba(160,108,255,.16),rgba(255,255,255,.04))}
  .capsule-ic{font-size:26px;line-height:1}
  .capsule-info{flex:1;min-width:0;display:flex;flex-direction:column}
  .capsule-info b{color:#fff;font-size:14px}
  .capsule-info span{color:#9aa0a6;font-size:12px}
  .capsule-x{flex:0 0 auto;background:transparent;border:0;color:#8a9099;font-size:16px;cursor:pointer;padding:4px 6px}
  /* 🤝 Compatibilidad */
  .compat-share{width:100%;background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.4);color:#8fe6f5;border-radius:14px;padding:12px;font-weight:800;font-size:13.5px;cursor:pointer}
  .compat-share:active{transform:scale(.98)}
  .compat-share+.compat-share{margin-top:8px}
  .blend-share{background:rgba(160,108,255,.14);border-color:rgba(160,108,255,.4);color:#c9b0ff}
  .profile-share{background:rgba(75,224,122,.13);border-color:rgba(75,224,122,.4);color:#79e6a1}
  /* 🏆 Sala de trofeos */
  .troph-open{width:100%;margin-top:10px;background:linear-gradient(135deg,#FCD25E,#E39A2E);color:#4a2f08;border:0;border-radius:12px;padding:11px;font-weight:800;font-size:13.5px;cursor:pointer}
  .troph-open:active{transform:scale(.98)}
  #trophyRoom{position:fixed;inset:0;z-index:120;background:radial-gradient(120% 80% at 50% 0%,#241a2e,#0c0c12 70%);display:none;flex-direction:column;overflow:hidden}
  #trophyRoom.on{display:flex}
  .troom-top{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 12px}
  .troom-close{background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:20px;padding:8px 16px;font-weight:700;cursor:pointer}
  .troom-title{flex:1;color:#fff;font-weight:900;font-size:18px;text-align:center}
  .troom-count{color:#FCD25E;font-weight:800;font-size:14px;min-width:54px;text-align:right}
  .troom-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:8px 14px 30px}
  .troom-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px 10px 14px;text-align:center}
  .troom-card.done{border-color:rgba(252,210,94,.45);background:linear-gradient(180deg,rgba(252,210,94,.13),rgba(255,255,255,.03))}
  .troom-cup{width:96px;margin:0 auto 2px}
  .troom-card:not(.done) .troom-cup{opacity:.85}
  .troom-name{color:#fff;font-weight:800;font-size:13px;margin-top:2px}
  .troom-ok{color:#4be07a;font-weight:800;font-size:12px;margin-top:5px}
  .troom-sub{color:#9aa0a6;font-size:11px;margin-top:3px;line-height:1.35}
  .troom-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin:7px 8px 0}
  .troom-bar i{display:block;height:100%;background:linear-gradient(90deg,#FCD25E,#E39A2E)}
  /* 🔔 Notificaciones */
  .notif{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--sep)}
  .notif:last-child{border-bottom:0}
  .notif .nic{font-size:20px;width:30px;text-align:center;flex:none}
  .notif .nx{flex:1;min-width:0}
  .notif .nx b{display:block;font-size:13px;font-weight:800}
  .notif .nx span{display:block;font-size:11.5px;color:var(--hint);margin-top:1px}
  .notif.unread{position:relative}
  .notif.unread .nx b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent1,#1db954);margin-left:7px;vertical-align:middle}
  .notif-empty{color:var(--hint);font-size:12.5px;line-height:1.5;padding:6px 0}
  /* 👥 Amigos */
  #musFriends{display:flex;flex-direction:column;gap:8px}
  .friend-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.04);cursor:pointer}
  .friend-row:active{transform:scale(.99)}
  .friend-av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;color:#04120a;background:linear-gradient(135deg,#4be07a,#1db954)}
  .friend-info{flex:1;min-width:0;display:flex;flex-direction:column}
  .friend-info b{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .friend-info span{color:#9aa0a6;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .friend-row .ic{color:#8a9099;flex:0 0 auto}
  /* 👤 Perfil (modal) */
  .prof-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-bottom:8px}
  .prof-av{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;color:#04120a;background:linear-gradient(135deg,#22d3ee,#4be07a);margin-bottom:4px}
  .prof-name{color:#fff;font-size:20px;font-weight:900}
  .prof-sub{color:#9aa0a6;font-size:12.5px}
  .prof-sec{color:#e6e8ea;font-weight:800;font-size:13px;margin:12px 0 8px}
  .prof-arts{display:flex;flex-wrap:wrap;gap:7px}
  .prof-chip{font-size:12px;font-weight:700;color:#fff;padding:5px 11px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
  .prof-btns{display:flex;gap:10px;margin-top:16px}
  .prof-btn{flex:1;border:0;border-radius:22px;padding:12px;font-weight:800;font-size:14px;cursor:pointer}
  .prof-btn.compat{background:rgba(34,211,238,.16);color:#8fe6f5}
  .prof-btn.blend{background:rgba(160,108,255,.16);color:#c9b0ff}
  .prof-btn:active{transform:scale(.97)}