/* ── TOKENS ── */
    :root{
      --bg:#08060F;--bg2:#0F0B1C;--surface:#141026;--surface2:#1C1735;--surface3:#241F40;
      --accent:#7C3FFF;--accent-l:#9B6FFF;--accent-2:#C084FC;
      --gold:#C9940A;--gold-l:#E8B60E;
      --text:#FFFFFF;--text-2:#F0EEFF;--muted:#9B94C0;
      --border:rgba(124,63,255,0.15);--border2:rgba(124,63,255,0.28);
      --radius:20px;--radius-sm:12px;--player-h:68px;--nav-w:220px;
      --tr:0.3s cubic-bezier(0.4,0,0.2,1);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}

    /* ── BODY + ATMOSFERA ── */
    body{
      font-family:'DM Sans',sans-serif;
      background:var(--bg);color:var(--text-2);
      overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh;
      position:relative;
    }
    /* Gradientes de atmosfera nos cantos */
    body::before{
      content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
      background:
        radial-gradient(ellipse 55% 40% at 0% 0%,rgba(124,63,255,0.12),transparent),
        radial-gradient(ellipse 45% 35% at 100% 100%,rgba(192,132,252,0.08),transparent),
        radial-gradient(ellipse 40% 50% at 100% 0%,rgba(124,63,255,0.06),transparent);
    }
    /* SVG noise grain overlay */
    body::after{
      content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
      opacity:0.028;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size:200px 200px;
    }
    body>*{position:relative;z-index:1}
    a{color:inherit;text-decoration:none}
    button{font-family:'DM Sans',sans-serif;cursor:pointer}
    input,select{font-family:'DM Sans',sans-serif}

    /* Tema das paginas pagas */
    body.premium-page{
      --bg:#0B0B10;--bg2:#101019;--surface:#181822;--surface2:#20202D;--surface3:#29293A;
      --accent:#D6B25E;--accent-l:#F1DFA5;--accent-2:#B9924A;
      --gold:#D6B25E;--gold-l:#F1DFA5;
      --muted:#B8B8C7;
      --border:rgba(214,178,94,0.16);--border2:rgba(241,223,165,0.32);
    }
    body.premium-page::before{
      background:
        radial-gradient(ellipse 58% 42% at 0% 0%,rgba(214,178,94,0.14),transparent),
        radial-gradient(ellipse 48% 36% at 100% 100%,rgba(75,46,131,0.16),transparent),
        radial-gradient(ellipse 42% 48% at 100% 0%,rgba(241,223,165,0.07),transparent);
    }
    body.premium-page .brand-icon,
    body.premium-page .avatar-btn,
    body.premium-page .play-btn,
    body.premium-page .np-thumb{
      background:linear-gradient(135deg,#C79A3A,#F1DFA5 52%,#8A6A2B);
      color:#100F14;
      box-shadow:0 0 22px rgba(214,178,94,0.26);
      border-color:rgba(241,223,165,0.38);
    }
    body.premium-page .nav-item.active{
      color:#fff;background:rgba(214,178,94,0.12);border-left-color:var(--gold);
    }
    body.premium-page .nav-item:hover,
    body.premium-page .notif-btn:hover{
      background:rgba(214,178,94,0.09);border-color:rgba(241,223,165,0.28);
    }
    body.premium-page .nav-item-premium,
    body.premium-page .upgrade-btn,
    body.premium-page .absolute-cta,
    body.premium-page .ad-upgrade,
    body.premium-page .download-btn-premium{
      color:#100F14!important;
      background:linear-gradient(135deg,#B8872F,#F1DFA5 52%,#D6B25E)!important;
      border:1px solid rgba(255,238,186,0.34)!important;
      box-shadow:0 8px 24px rgba(214,178,94,0.28),inset 0 1px 0 rgba(255,255,255,0.38)!important;
    }
    body.premium-page .nav-item-premium:hover,
    body.premium-page .upgrade-btn:hover,
    body.premium-page .absolute-cta:hover,
    body.premium-page .ad-upgrade:hover,
    body.premium-page .download-btn-premium:hover{
      background:linear-gradient(135deg,#C99A42,#FFF0BD 52%,#E0BD69)!important;
      box-shadow:0 12px 32px rgba(214,178,94,0.42),inset 0 1px 0 rgba(255,255,255,0.46)!important;
    }
    body.premium-page .sidebar-plan,
    body.premium-page .premium-status-card{
      border-color:rgba(241,223,165,0.34);
      background:
        radial-gradient(circle at 88% 14%,rgba(241,223,165,0.2),transparent 30%),
        linear-gradient(135deg,rgba(214,178,94,0.14),rgba(22,22,32,0.96) 48%,rgba(11,11,16,0.98));
      box-shadow:0 18px 46px rgba(0,0,0,0.34),0 0 34px rgba(214,178,94,0.12);
    }
    body.premium-page .hero{
      background:linear-gradient(135deg,#15151E 0%,#211A2F 52%,#0B0B10 100%);
      border-color:rgba(241,223,165,0.28);
    }
    body.premium-page .album-feature-card{
      background:
        linear-gradient(90deg,rgba(12,11,17,.24),rgba(12,11,17,.62)),
        radial-gradient(ellipse 58% 95% at 82% 42%,rgba(214,178,94,.18),transparent 62%),
        url('album-wallpaper-texture.webp') center/cover no-repeat,
        linear-gradient(135deg,#15151E 0%,#211A2F 52%,#0B0B10 100%);
      border-color:rgba(241,223,165,0.28);
    }
    body.premium-page .album-feature-card::before,
    body.premium-page .hero::before{
      background:
        radial-gradient(ellipse 55% 90% at 85% 45%,rgba(214,178,94,.22),transparent 62%),
        radial-gradient(ellipse 35% 50% at 12% 80%,rgba(75,46,131,.2),transparent 68%);
    }
    body.premium-page .album-feature-label,
    body.premium-page .hero-eyebrow,
    body.premium-page .selecao-label,
    body.premium-page .plan-label,
    body.premium-page .see-all,
    body.premium-page .ctrl-btn.active{
      color:var(--gold-l);
    }
    body.premium-page .premium-status-badge,
    body.premium-page .btn-primary,
    body.premium-page .album-feature-btn,
    body.premium-page .selecao-play-btn,
    body.premium-page .sponsored-cta{
      background:linear-gradient(135deg,var(--gold),var(--gold-l));
      color:#100F14;
      box-shadow:0 8px 24px rgba(214,178,94,0.3);
    }
    body.premium-page .progress-fill,
    body.premium-page .waveform span,
    body.premium-page .selecao-waveform span{
      background:linear-gradient(90deg,var(--gold),var(--gold-l));
    }
    body:not(.premium-page) .btn-primary,
    body:not(.premium-page) .album-feature-btn,
    body:not(.premium-page) .selecao-play-btn,
    body:not(.premium-page) .sponsored-cta{
      background:linear-gradient(135deg,#13c45b,#25D366 48%,#7dffa9);
      color:#06130b;
      box-shadow:0 8px 24px rgba(37,211,102,0.32);
    }
    body:not(.premium-page) .btn-primary:hover,
    body:not(.premium-page) .selecao-play-btn:hover{
      box-shadow:0 10px 28px rgba(37,211,102,0.48);
    }
    body:not(.premium-page) .album-feature-cover,
    body:not(.premium-page) .premium-status-card{
      border-color:rgba(37,211,102,0.28);
    }

    /* ── LAYOUT ── */
    .app-shell{display:flex;height:100vh;overflow:hidden}
    .sidebar{width:var(--nav-w);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;z-index:10}
    .main-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(var(--player-h)+20px)}
    .main-content::-webkit-scrollbar{width:4px}
    .main-content::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:4px}

    /* ── BRAND / LOGO SVG ── */
    .brand{padding:20px 20px 14px;border-bottom:1px solid var(--border)}
    .brand-logo{display:flex;align-items:center;gap:10px}
    .brand-icon{
      width:38px;height:38px;border-radius:10px;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      display:grid;place-items:center;flex-shrink:0;
      box-shadow:0 0 18px rgba(124,63,255,0.35);
    }
    .brand-icon svg{width:22px;height:22px}
    .brand-name{font-family:'Syne',sans-serif;font-size:17px;font-weight:800;letter-spacing:0.5px;line-height:1;color:#fff}
    .brand-tagline{font-size:10px;color:var(--muted);letter-spacing:0.5px;margin-top:2px}

    /* ── NAV ── */
    .nav-section{padding:14px 10px 6px}
    .nav-label{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:0 10px;margin-bottom:4px;opacity:0.7}
    .nav-item{
      display:flex;align-items:center;gap:10px;
      padding:11px 10px;border-radius:10px;
      font-size:15px;font-weight:800;color:var(--muted);
      text-transform:uppercase;letter-spacing:0.25px;
      transition:all var(--tr);cursor:pointer;
      border-left:3px solid transparent;
      margin-bottom:1px;
    }
    .nav-item:hover{color:var(--text);background:rgba(124,63,255,0.08)}
    .nav-item.active{
      color:#fff;background:rgba(124,63,255,0.12);
      border-left-color:var(--accent);
      font-weight:600;
    }
    .nav-item .icon{
      width:22px;height:22px;display:inline-grid;place-items:center;flex-shrink:0;
      color:currentColor;opacity:.9;
    }
    .nav-item .icon svg{
      width:20px;height:20px;display:block;fill:none;stroke:currentColor;
      stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    }
    .nav-item .badge{margin-left:auto;font-size:9px;padding:2px 6px;border-radius:999px;background:var(--accent);color:white;font-weight:700}
    .nav-item .badge-gold{background:var(--gold)}
    .nav-item-premium{
      color:#06130b;
      background:linear-gradient(135deg,#13c45b,#25D366 48%,#7dffa9);
      box-shadow:0 6px 22px rgba(37,211,102,0.26);
    }
    .nav-item-premium:hover{color:#06130b;background:linear-gradient(135deg,#18d965,#39df76 48%,#8cffb7)}
    .nav-whatsapp{
      color:#d8ffef;
      background:rgba(37,211,102,0.1);
      border-left-color:rgba(37,211,102,0.55);
    }
    .nav-whatsapp .icon{color:#25D366}
    .nav-whatsapp:hover{
      color:#06130b;
      background:linear-gradient(135deg,#18d965,#39df76 48%,#8cffb7);
      border-left-color:#25D366;
    }
    .nav-whatsapp:hover .icon{color:#06130b}
    .nav-install{
      color:#e6ddff;
      background:rgba(124,63,255,0.08);
      border-left-color:rgba(155,111,255,0.48);
    }
    .nav-install .icon{color:var(--accent-l)}
    .nav-install:hover{
      color:#fff;
      background:rgba(124,63,255,0.16);
      border-left-color:var(--accent-l);
    }
    .sidebar-plan{
      margin:auto 10px 12px;padding:14px;border-radius:var(--radius-sm);
      border:1px solid var(--border2);
      background:linear-gradient(135deg,rgba(124,63,255,0.12),rgba(192,132,252,0.05));
    }
    .plan-label{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-2);margin-bottom:5px}
    .plan-title{font-size:13px;font-weight:700;margin-bottom:8px;color:#fff}
    .upgrade-btn{
      width:100%;padding:9px;border-radius:8px;
      background:linear-gradient(135deg,#13c45b,#25D366 48%,#7dffa9);
      border:none;color:#06130b;font-size:11px;font-weight:900;
      transition:transform var(--tr),box-shadow var(--tr);
      box-shadow:0 4px 18px rgba(37,211,102,0.38);
      text-transform:uppercase;letter-spacing:.2px;
    }
    .upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(37,211,102,0.55)}
    .absolute-cta{
      background:linear-gradient(135deg,#13c45b,#25D366 48%,#8cffb7)!important;
      color:#06130b!important;border:none!important;font-weight:900!important;
      box-shadow:0 6px 22px rgba(37,211,102,0.42),inset 0 1px 0 rgba(255,255,255,0.35)!important;
      position:relative;overflow:hidden;
    }
    .absolute-cta::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.28) 48%,transparent 62%);
      transform:translateX(-120%);transition:transform .7s ease;pointer-events:none;
    }
    .absolute-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,211,102,0.58)!important}
    .absolute-cta:hover::after{transform:translateX(120%)}

    /* ── TOPBAR ── */
    .topbar{
      display:flex;align-items:center;gap:12px;padding:14px 24px;
      position:sticky;top:0;z-index:5;
      background:rgba(8,6,15,0.88);backdrop-filter:blur(24px);
      border-bottom:1px solid var(--border);
    }
    .mobile-menu-btn{
      display:none;width:40px;height:40px;border-radius:8px;
      background:var(--surface);border:1px solid var(--border);
      color:#fff;font-size:22px;line-height:1;place-items:center;
      flex-shrink:0;
    }
    .mobile-menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
    .mobile-backdrop{display:none}
    .search-wrap{
      flex:1;display:flex;align-items:center;gap:8px;
      background:var(--surface);border:1px solid var(--border);
      border-radius:999px;padding:8px 16px;
      transition:border-color var(--tr),box-shadow var(--tr);max-width:380px;
    }
    .search-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,63,255,0.1)}
    .search-wrap input{background:none;border:none;outline:none;color:var(--text);font-size:13px;width:100%}
    .search-wrap input::placeholder{color:var(--muted)}
    .topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
    .lang-btn{
      padding:5px 10px;border-radius:999px;
      background:var(--surface);border:1px solid var(--border);
      color:var(--muted);font-size:11px;font-weight:700;transition:all var(--tr);
    }
    .lang-btn.active{color:#fff;border-color:var(--accent);background:rgba(124,63,255,0.15)}
    .lang-btn:hover{color:#fff}
    .notif-btn{
      width:34px;height:34px;border-radius:50%;background:var(--surface);
      border:1px solid var(--border);display:grid;place-items:center;font-size:15px;
      transition:all var(--tr);
    }
    .notif-btn svg{width:17px;height:17px}.notif-btn:hover{border-color:var(--accent);background:rgba(124,63,255,0.1)}
    .notif-btn.has-alert{
      color:var(--gold-l);
      box-shadow:0 0 0 1px rgba(201,148,10,0.18),0 0 18px rgba(201,148,10,0.16);
    }
    .avatar-btn{
      width:34px;height:34px;border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      display:grid;place-items:center;font-size:12px;font-weight:800;
      border:2px solid rgba(124,63,255,0.5);cursor:pointer;
      transition:transform var(--tr),box-shadow var(--tr);color:#fff;
    }
    .avatar-btn:hover{transform:scale(1.06);box-shadow:0 0 16px rgba(124,63,255,0.4)}

    /* ── HERO ── */
    .hero{
      margin:22px 22px 0;border-radius:var(--radius);overflow:hidden;
      background:linear-gradient(135deg,#170d30 0%,#1e1040 50%,#0f0820 100%);
      border:1px solid var(--border2);padding:40px;position:relative;
    }
    .hero::before{
      content:'';position:absolute;inset:0;pointer-events:none;
      background:
        radial-gradient(ellipse 55% 90% at 85% 50%,rgba(124,63,255,0.25),transparent),
        radial-gradient(ellipse 30% 40% at 10% 80%,rgba(192,132,252,0.1),transparent);
    }
    /* Emoji watermark mais visível */
    .hero::after{
      content:'';position:absolute;right:32px;top:50%;
      transform:translateY(-50%);font-size:130px;
      opacity:0.13;pointer-events:none;
      filter:blur(1px);
    }
    .hero-eyebrow{
      display:inline-flex;align-items:center;gap:6px;
      font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
      color:var(--accent-2);margin-bottom:16px;
    }
    .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent-2);animation:pulse-ring 2s ease-in-out infinite}
    @keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(192,132,252,0.5)}50%{box-shadow:0 0 0 6px rgba(192,132,252,0)}}
    .hero h1{
      font-family:'Syne',sans-serif;
      font-size:clamp(32px,4vw,54px);
      font-weight:800;line-height:1.0;
      margin-bottom:14px;color:#fff;
      animation:hero-in 0.7s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes hero-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
    .hero h1 span{
      background:linear-gradient(135deg,#a78bff,var(--accent-2));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
    .hero p{
      color:rgba(155,148,192,0.9);font-size:15px;line-height:1.65;
      max-width:460px;margin-bottom:24px;
      animation:hero-in 0.7s 0.1s cubic-bezier(0.16,1,0.3,1) both;
    }
    .hero-actions{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
      width:min(440px,100%);
      animation:hero-in 0.7s 0.2s cubic-bezier(0.16,1,0.3,1) both;
    }
    .hero-actions button{
      min-height:48px;display:inline-flex;align-items:center;justify-content:center;
      text-align:center;line-height:1.1;white-space:nowrap;
    }
    .hero-actions .activate-code-btn{grid-column:1 / -1;justify-self:stretch}
    .btn-primary{
      padding:11px 24px;border-radius:999px;
      background:linear-gradient(135deg,var(--gold),var(--gold-l));
      border:none;color:#0A0618;font-size:14px;font-weight:800;
      transition:transform var(--tr),box-shadow var(--tr);
      box-shadow:0 4px 16px rgba(201,148,10,0.4);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,148,10,0.55)}
    .btn-primary:active{transform:scale(0.98)}
    .btn-ghost{
      padding:10px 20px;border-radius:999px;
      background:rgba(124,63,255,0.1);border:1px solid rgba(124,63,255,0.4);
      color:var(--accent-l);font-size:14px;font-weight:600;transition:all var(--tr);
    }
    .btn-ghost:hover{background:rgba(124,63,255,0.2);border-color:var(--accent-l)}
    .hero .absolute-cta{
      padding:11px 22px;border-radius:999px;font-size:14px;
    }
    .hero .activate-code-btn{
      border-color:rgba(125,255,169,.38);color:#d8ffef;background:rgba(34,197,94,.08);
      box-shadow:inset 0 0 0 1px rgba(125,255,169,.08);
    }
    .hero .activate-code-btn:hover{background:rgba(34,197,94,.14);border-color:rgba(125,255,169,.62);color:#fff}
    .home-premium-hero{display:none}
    .album-feature{padding:22px 22px 0}
    .album-feature-card{
      display:grid;grid-template-columns:168px 1fr;gap:18px;align-items:center;
      background:
        linear-gradient(90deg,rgba(12,7,24,.22),rgba(12,7,24,.68)),
        radial-gradient(ellipse 58% 95% at 82% 42%,rgba(124,63,255,.18),transparent 62%),
        url('album-wallpaper-texture.webp') center/cover no-repeat,
        linear-gradient(135deg,#151025 0%,#241146 52%,#0f0820 100%);
      border:1px solid var(--border2);border-radius:var(--radius);padding:18px;
      cursor:pointer;position:relative;overflow:hidden;transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr);
    }
    .album-feature-card::before{
      content:'';position:absolute;inset:0;pointer-events:none;
      background:
        linear-gradient(115deg,transparent 0 44%,rgba(255,255,255,0.045) 45% 46%,transparent 47% 100%),
        radial-gradient(ellipse 55% 90% at 85% 45%,rgba(124,63,255,.18),transparent 62%);
      opacity:.85;
    }
    .album-feature-card:hover{transform:translateY(-3px);border-color:rgba(155,111,255,.48);box-shadow:0 18px 44px rgba(0,0,0,.42)}
    .album-feature-cover{
      position:relative;z-index:1;aspect-ratio:1;border-radius:14px;overflow:hidden;
      border:1px solid rgba(232,182,14,.36);box-shadow:0 18px 34px rgba(0,0,0,.35);
      background:linear-gradient(160deg,#1a0a2e,#2d1060,#0d0620);
    }
    .album-feature-cover img{width:100%;height:100%;object-fit:cover;display:block}
    .album-feature-info{position:relative;z-index:1;min-width:0}
    .album-feature-label{
      display:inline-flex;margin-bottom:8px;color:var(--accent-2);
      font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
    }
    .album-feature-info h2{
      font-family:'Syne',sans-serif;font-size:22px;line-height:1.05;font-weight:800;color:#fff;margin-bottom:10px;
      overflow-wrap:anywhere;
    }
    .album-feature-info p{max-width:520px;color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:14px}
    .album-feature-btn{
      display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
      border:none;background:linear-gradient(135deg,var(--gold),var(--gold-l));color:#0A0618;
      font-size:13px;font-weight:900;text-transform:uppercase;
      box-shadow:0 8px 22px rgba(201,148,10,.3);
    }
    /* ── SECTIONS ── */
    .section{padding:26px 22px 0}
    .selection-section{display:none}
    .selection-section.is-visible{display:block}
    .playlist-grid>.selection-section{
      grid-column:1 / -1;
      padding:2px 0 8px;
    }
    .section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
    .section-head h2{font-family:'Syne',sans-serif;font-size:21px;font-weight:700;color:#fff}
    .see-all{font-size:12px;color:var(--accent-l);font-weight:600;cursor:pointer;transition:color var(--tr)}
    .see-all:hover{color:var(--accent-2)}

    /* ── PLAYLIST GRID ── */
    .playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}
    .playlist-card{
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius-sm);padding:12px;
      cursor:pointer;transition:all var(--tr);position:relative;overflow:hidden;
    }
    .playlist-card::before{
      content:'';position:absolute;inset:0;
      background:radial-gradient(circle at 75% 15%,rgba(124,63,255,0.1),transparent 55%);
      opacity:0;transition:opacity var(--tr);
    }
    .playlist-card:hover{transform:translateY(-5px);border-color:var(--border2);box-shadow:0 14px 36px rgba(0,0,0,0.5)}
    .playlist-card:hover::before{opacity:1}
    .playlist-card.is-selected{
      border-color:var(--accent-l);
      box-shadow:0 14px 36px rgba(0,0,0,0.44),0 0 0 1px rgba(232,182,14,0.24);
    }

    /* Covers com profundidade e padrão geométrico */
    .cover{
      width:100%;aspect-ratio:1;border-radius:10px;
      margin-bottom:11px;display:grid;place-items:center;
      font-size:52px;position:relative;overflow:hidden;
      box-shadow:inset 0 -6px 20px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.08);
    }
    /* Padrão de linhas geométricas em cada cover */
    
    .cover img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      border-radius:10px;
      transition:transform var(--tr);
    }
    .playlist-card:hover .cover img{transform:scale(1.06)}
.cover::before{
      content:'';position:absolute;inset:0;opacity:0.08;
      background-image:repeating-linear-gradient(
        45deg,transparent,transparent 6px,rgba(255,255,255,0.8) 6px,rgba(255,255,255,0.8) 7px
      );
    }
    .cover-overlay{
      position:absolute;inset:0;display:grid;place-items:center;
      background:rgba(0,0,0,0.45);opacity:0;transition:opacity var(--tr);
    }
    .playlist-card:hover .cover-overlay{opacity:1}
    .play-circle{
      width:46px;height:46px;border-radius:50%;
      background:rgba(124,63,255,0.9);
      backdrop-filter:blur(8px);
      display:grid;place-items:center;
      transform:scale(0.75);transition:transform var(--tr);
      box-shadow:0 4px 20px rgba(124,63,255,0.5);
    }
    .playlist-card:hover .play-circle{transform:scale(1)}
    .play-circle svg{width:18px;height:18px;fill:white;margin-left:2px}
    .card-name{font-size:14px;font-weight:700;margin-bottom:3px;color:#fff;line-height:1.2;text-transform:uppercase}
    .card-count{font-size:11px;color:var(--muted)}
    .card-coming{
      position:absolute;top:9px;left:9px;
      font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;
      padding:3px 7px;border-radius:999px;
      background:rgba(155,111,255,0.2);border:1px solid rgba(155,111,255,0.35);color:var(--accent-l);
    }
    .card-badge{
      position:absolute;top:9px;right:9px;
      font-size:9px;font-weight:700;padding:3px 7px;border-radius:999px;
    }
    .badge-hot{background:rgba(232,64,64,0.25);border:1px solid rgba(232,64,64,0.4);color:#ff8080}
    .badge-new{background:rgba(32,180,100,0.2);border:1px solid rgba(32,180,100,0.35);color:#6ee7a0}

    /* Cover gradients */
    .cov-kids{background:linear-gradient(135deg,#FF6B9D,#FFB347)}
    .cov-elas{background:linear-gradient(135deg,#C84B8E,#FF6B9D)}
    .cov-curtir{background:linear-gradient(135deg,#4A90D9,#7B68EE)}
    .cov-treino{background:linear-gradient(135deg,#E84040,#FF6B35)}
    .cov-eventos{background:linear-gradient(135deg,#FFD700,#FF8C00)}
    .cov-relaxar{background:linear-gradient(135deg,#56CCF2,#2F80ED)}
    .cov-gringas{background:linear-gradient(135deg,#1DB954,#191414)}

    /* ── SELEÇÃO ORFHEU ── */
    .selecao-card{
      position:relative;display:block;
      background:linear-gradient(145deg,rgba(24,21,40,.96),rgba(14,12,25,.98));
      border:1px solid rgba(232,182,14,.18);
      border-radius:var(--radius);overflow:hidden;transition:border-color var(--tr);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    }
    .selecao-card:hover{border-color:var(--border2)}
    .selecao-cover{
      position:absolute;left:18px;top:18px;width:86px;height:86px;
      background:linear-gradient(160deg,#1a0a2e,#2d1060,#0d0620);
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:6px;padding:10px;min-height:0;border-radius:50%;
      overflow:hidden;border:1px solid rgba(192,132,252,0.35);
      box-shadow:0 0 0 1px rgba(124,63,255,0.12),0 14px 34px rgba(0,0,0,0.35);
    }
    .selecao-cover::before{
      content:'';position:absolute;inset:8px;border-radius:50%;
      border:1px solid rgba(232,182,14,0.32);
      animation:coin-pulse 2.2s ease-in-out infinite;
      z-index:1;pointer-events:none;
    }
    .selecao-cover::after{
      content:'';position:absolute;inset:-35%;
      background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,0.18) 48%,transparent 60%);
      animation:coin-shine 3.4s linear infinite;
      z-index:2;pointer-events:none;
    }
    @keyframes coin-pulse{0%,100%{transform:scale(0.92);opacity:0.45}50%{transform:scale(1.08);opacity:0.9}}
    @keyframes coin-shine{0%{transform:translateX(-55%) rotate(12deg)}55%,100%{transform:translateX(55%) rotate(12deg)}}
    .selecao-cover-bg{
      position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(ellipse at 50% 30%,rgba(124,63,255,0.45),transparent 65%);
    }
    /* Waveform decorativo na cover */
    .selecao-waveform{
      position:absolute;bottom:10px;left:0;right:0;
      display:flex;align-items:flex-end;justify-content:center;gap:3px;
      opacity:0.42;z-index:3;
    }
    .selecao-waveform span{
      width:3px;background:var(--accent-l);border-radius:2px;
      animation:wave-decor 1.4s ease-in-out infinite;
    }
    @keyframes wave-decor{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.8)}}
    .selecao-avatar{font-size:30px;position:relative;z-index:4;filter:drop-shadow(0 0 12px rgba(124,63,255,0.65));animation:float 4s ease-in-out infinite}
    .selecao-cover-img{
      position:absolute;inset:0;width:100%;height:100%;
      object-fit:cover;opacity:0;transition:opacity var(--tr);
    }
    .selecao-cover.has-image .selecao-cover-img{opacity:1}
    .selecao-cover.has-image .selecao-cover-bg{background:linear-gradient(180deg,rgba(8,6,15,0.18),rgba(8,6,15,0.72))}
    .selecao-cover.has-image .selecao-avatar{
      width:34px;height:34px;border-radius:50%;font-size:20px;
      display:grid;place-items:center;background:rgba(8,6,15,0.72);
      border:1px solid rgba(255,255,255,0.18);backdrop-filter:blur(8px);
      filter:none;animation:none;
    }
    @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
    .selecao-badge{display:none}
    .selecao-info{padding:22px 22px 22px 124px;display:flex;flex-direction:column;gap:11px}
    .selecao-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-2)}
    .selecao-label:empty{display:none}
    .selecao-title{font-family:'Syne',sans-serif;font-size:24px;font-weight:800;line-height:1;color:#fff}
    .selecao-desc{font-size:13px;color:var(--muted);line-height:1.6}
    .selecao-meta{display:flex;flex-wrap:wrap;gap:6px}
    .selecao-chip{font-size:10px;padding:4px 10px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);color:var(--muted)}
    .style-filter{
      appearance:none;border:1px solid var(--border);background:var(--surface2);color:var(--muted);
      border-radius:999px;padding:6px 11px;font-size:10px;font-weight:800;text-transform:uppercase;
      cursor:pointer;transition:background var(--tr),border-color var(--tr),color var(--tr);
    }
    .style-filter:hover,.style-filter.active{background:rgba(124,63,255,0.18);border-color:var(--accent);color:#fff}
    .selecao-tracks{display:flex;flex-direction:column;background:rgba(255,255,255,.035);border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.075)}
    .track-row{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;transition:background var(--tr)}
    .track-row:hover{background:var(--surface3)}
    .track-row.active-track{background:rgba(124,63,255,0.12)}
    .track-num{font-size:11px;color:var(--muted);width:16px;text-align:center;flex-shrink:0}
    .track-icon{display:none}
    .track-info{flex:1;min-width:0}
    .track-name{font-size:13px;font-weight:700;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
    .track-cat{font-size:10px;color:var(--muted)}
    .track-download-btn{
      height:26px;padding:0 10px;border-radius:999px;border:1px solid rgba(37,211,102,0.42);
      background:rgba(37,211,102,0.14);color:#9dffbf;
      font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;
      flex-shrink:0;transition:background var(--tr),border-color var(--tr),transform var(--tr);
    }
    .track-download-btn:hover{background:rgba(37,211,102,0.24);border-color:rgba(37,211,102,0.66);transform:translateY(-1px)}
    .track-duration{font-size:11px;color:var(--muted)}
    .track-more{cursor:default;opacity:0.55}
    .track-more:hover{background:transparent}
    .selecao-play-btn{
      display:flex;align-items:center;justify-content:center;gap:8px;
      padding:11px 22px;border-radius:999px;
      background:linear-gradient(135deg,var(--gold),var(--gold-l));
      border:none;color:#0A0618;font-size:13px;font-weight:700;
      width:fit-content;transition:transform var(--tr),box-shadow var(--tr);
      box-shadow:0 4px 16px rgba(201,148,10,0.35);
    }
    .selecao-play-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,148,10,0.5)}
    @media(max-width:900px){
      .selecao-info{padding-left:116px}
      .selecao-cover{width:78px;height:78px}
    }

    /* ── AD BANNER ── */
    .ad-banner{
      margin:18px 22px 0;padding:10px 16px;
      background:rgba(28,23,53,0.8);
      border:1px solid rgba(124,63,255,0.1);border-radius:var(--radius-sm);
      display:flex;align-items:center;gap:12px;
    }
    .ad-label{
      font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
      color:var(--muted);padding:2px 6px;border-radius:4px;
      border:1px solid rgba(155,148,192,0.2);flex-shrink:0;
    }
    .ad-content{flex:1;font-size:12px;color:var(--muted)}
    .ad-upgrade{
      font-size:11px;font-weight:900;color:#06130b;
      padding:7px 16px;border-radius:999px;
      border:none;background:linear-gradient(135deg,#13c45b,#25D366 48%,#8cffb7);
      white-space:nowrap;transition:all var(--tr);
      box-shadow:0 2px 12px rgba(37,211,102,0.34);
    }
    .ad-upgrade:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(37,211,102,0.52)}
    .sponsored-card{
      width:calc(100% - 44px);
      max-width:760px;
      margin:14px auto 0;
      border:1px solid rgba(232,182,14,0.22);
      border-radius:var(--radius);
      overflow:hidden;
      background:linear-gradient(135deg,rgba(232,182,14,0.14),rgba(124,63,255,0.12)),var(--surface);
      cursor:pointer;
      box-shadow:0 18px 46px rgba(0,0,0,0.28);
    }
    .sponsored-media{
      position:relative;
      aspect-ratio:1.91/1;
      min-height:118px;
      padding:12px;
      background:
        radial-gradient(circle at 50% 42%,rgba(232,182,14,0.16),transparent 46%),
        linear-gradient(135deg,#151121,#24163d 52%,#160f22);
      display:grid;
      place-items:center;
    }
    .sponsored-media img{
      position:relative;z-index:2;width:100%;height:100%;object-fit:contain;display:block;
      border-radius:12px;
    }
    .sponsored-placeholder{
      position:absolute;inset:0;
      display:grid;place-items:center;
      padding:22px;
      color:#fff;
      font-family:'Syne',sans-serif;
      font-weight:800;
      text-align:center;
      letter-spacing:0;z-index:1;
    }
    .sponsored-badge{
      position:absolute;top:10px;left:10px;
      padding:4px 9px;border-radius:999px;
      background:rgba(8,6,15,0.72);
      border:1px solid rgba(255,255,255,0.18);
      color:#ffe8a3;font-size:9px;font-weight:900;
      text-transform:uppercase;letter-spacing:1px;
      backdrop-filter:blur(8px);z-index:3;
    }
    .sponsored-body{padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px}
    .sponsored-title{font-size:13px;font-weight:800;color:#fff}
    .sponsored-copy{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35}
    .sponsored-cta{font-size:11px;font-weight:900;color:#06130b;background:var(--gold);border-radius:999px;padding:7px 12px;white-space:nowrap}
    .premium-status-card{
      margin:14px 22px 0;
      border:1px solid rgba(232,182,14,0.28);
      border-radius:var(--radius);
      padding:18px;
      background:
        radial-gradient(circle at 85% 18%,rgba(232,182,14,0.24),transparent 28%),
        linear-gradient(135deg,rgba(124,63,255,0.22),rgba(28,18,52,0.94) 48%,rgba(8,6,15,0.96));
      box-shadow:0 18px 46px rgba(0,0,0,0.28),0 0 28px rgba(124,63,255,0.12);
      display:grid;
      gap:14px;
    }
    .premium-status-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .premium-status-kicker{
      display:inline-flex;align-items:center;gap:7px;
      color:var(--gold-l);
      font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1.4px;
    }
    .premium-status-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(232,182,14,0.64)}
    .premium-status-badge{
      color:#06130b;background:linear-gradient(135deg,var(--gold),var(--gold-l));
      padding:7px 10px;border-radius:999px;
      font-size:10px;font-weight:900;text-transform:uppercase;white-space:nowrap;
    }
    .premium-status-card h2{
      font-family:'Syne',sans-serif;
      color:#fff;font-size:clamp(24px,3vw,36px);
      line-height:1.02;font-weight:900;margin:0;
    }
    .premium-status-card p{color:var(--muted);font-size:13px;line-height:1.55;margin:0;max-width:640px}
    .premium-status-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
    .premium-status-perks span{
      min-height:38px;
      display:flex;align-items:center;justify-content:center;text-align:center;
      padding:8px 10px;border-radius:999px;
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.09);
      color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;
    }
    .premium-status-mini{
      width:max-content;
      max-width:calc(100% - 44px);
      display:inline-flex;
      align-items:center;
      gap:10px;
      margin:12px 22px 0;
      padding:8px 10px 8px 12px;
      border-radius:999px;
      background:rgba(20,16,38,0.78);
      box-shadow:0 10px 26px rgba(0,0,0,0.24);
    }
    .premium-status-mini .premium-status-kicker{font-size:9px;letter-spacing:1.2px}
    .premium-status-mini .premium-status-badge{font-size:9px;padding:5px 8px}

    /* ── PLAYER BAR ── */
    .player-bar{
      position:fixed;left:var(--nav-w);right:0;bottom:0;z-index:20;
      height:var(--player-h);
      background:rgba(9,6,18,0.97);
      border-top:1px solid var(--border);
      backdrop-filter:blur(24px);
      display:grid;grid-template-columns:1fr 2fr 1fr;
      align-items:center;padding:0 18px;gap:12px;
    }
    .now-playing{display:flex;align-items:center;gap:12px;min-width:0}
    .np-thumb{
      width:40px;height:40px;border-radius:10px;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      display:grid;place-items:center;font-size:20px;flex-shrink:0;
      animation:thumb-glow 4s ease-in-out infinite;
    }
    @keyframes thumb-glow{0%,100%{box-shadow:0 0 0 0 rgba(124,63,255,0.3)}50%{box-shadow:0 0 0 8px rgba(124,63,255,0)}}
    .np-info{min-width:0;flex:1}
    /* Marquee para títulos longos */
    .np-title{
      font-size:13px;font-weight:700;color:#fff;
      white-space:nowrap;overflow:hidden;
    }
    .np-title.marquee{animation:marquee 8s linear infinite}
    @keyframes marquee{0%{transform:translateX(0)}40%{transform:translateX(-40%)}60%{transform:translateX(-40%)}100%{transform:translateX(0)}}
    .np-artist{font-size:11px;color:var(--muted)}
    .np-heart{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(124,63,255,.12);border:1px solid rgba(124,63,255,.28);color:var(--text-2);font-size:11px;font-weight:800;padding:0;margin-left:6px;transition:all var(--tr);box-shadow:0 4px 14px rgba(124,63,255,.15)}
    .np-heart svg{width:18px;height:18px}.np-heart:hover{color:#ff6b9d;transform:scale(1.08);background:rgba(255,107,157,.12);border-color:rgba(255,107,157,.35)}
    .np-heart.liked{color:#ff6b9d;background:rgba(255,107,157,.12);border-color:rgba(255,107,157,.35)}
    .np-heart.fav-pop{animation:favPop .28s ease}
    @keyframes favPop{0%{transform:scale(1)}55%{transform:scale(1.24)}100%{transform:scale(1)}}
    .fav-count{
      margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
      display:inline-grid;place-items:center;background:rgba(255,107,157,.16);
      color:#ff8ab3;font-size:10px;font-weight:800;border:1px solid rgba(255,107,157,.28)
    }
    .search-wrap{position:relative}
    .search-clear{
      display:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);
      width:26px;height:26px;border:0;border-radius:50%;background:rgba(255,255,255,.07);
      color:var(--muted);font-size:16px;line-height:1;cursor:pointer
    }
    .search-wrap.has-value .search-clear{display:grid;place-items:center}
    .search-wrap.has-value input{padding-right:42px}
    .empty-state{
      min-height:160px;display:grid;place-items:center;text-align:center;padding:22px;
      color:var(--muted);border:1px dashed rgba(155,148,192,.22);border-radius:8px;
      background:rgba(255,255,255,.025)
    }
    .empty-state strong{display:block;color:#fff;margin-bottom:6px}
    .toast{
      position:fixed;left:50%;bottom:calc(var(--player-h) + 18px);z-index:80;
      transform:translate(-50%,20px);opacity:0;pointer-events:none;
      background:rgba(15,10,31,.96);border:1px solid rgba(124,63,255,.36);
      color:#fff;border-radius:8px;padding:10px 14px;font-size:13px;font-weight:700;
      box-shadow:0 10px 32px rgba(0,0,0,.34);transition:opacity var(--tr),transform var(--tr);
      max-width:min(90vw,360px);text-align:center
    }
    .toast.show{opacity:1;transform:translate(-50%,0)}
    .admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
    .admin-stat{border:1px solid rgba(124,63,255,.2);border-radius:8px;padding:12px;background:rgba(255,255,255,.04)}
    .admin-stat b{display:block;color:#fff;font-size:20px;margin-bottom:2px}
    .admin-stat span{color:var(--muted);font-size:11px}
    .admin-list{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.7}

    /* Waveform bars enquanto toca */
    .waveform{display:none;align-items:flex-end;gap:2px;height:16px;margin-left:6px}
    .waveform.playing{display:flex}
    .waveform span{
      width:3px;background:var(--accent-l);border-radius:2px;
      animation:wv 0.8s ease-in-out infinite;
    }
    .waveform span:nth-child(1){height:8px;animation-delay:0s}
    .waveform span:nth-child(2){height:14px;animation-delay:0.15s}
    .waveform span:nth-child(3){height:6px;animation-delay:0.3s}
    @keyframes wv{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}

    .player-center{display:flex;flex-direction:column;align-items:center;gap:6px}
    .player-controls{display:flex;align-items:center;gap:12px}
    .ctrl-btn{background:none;border:none;color:var(--muted);font-size:17px;padding:4px;transition:color var(--tr),transform var(--tr)}
    .ctrl-btn:hover{color:#fff;transform:scale(1.1)}
    .ctrl-btn.active{color:var(--accent-l)}
    .shuffle-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .play-btn{
      width:34px;height:34px;border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent-l));
      border:none;display:grid;place-items:center;
      transition:transform var(--tr),box-shadow var(--tr);
      box-shadow:0 4px 14px rgba(124,63,255,0.4);
    }
    .play-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(124,63,255,0.6)}
    .play-btn svg{width:15px;height:15px;fill:white}
    .play-btn .pause-icon{display:none}
    .play-btn.playing .play-icon{display:none}
    .play-btn.playing .pause-icon{display:block}

    /* Progress bar com hover expand */
    .progress-wrap{width:100%;display:flex;align-items:center;gap:8px}
    .progress-time{font-size:11px;color:var(--muted);min-width:32px;font-variant-numeric:tabular-nums}
    .progress-bar{
      flex:1;height:4px;background:var(--surface3);
      border-radius:2px;cursor:pointer;position:relative;
      transition:height var(--tr);
    }
    .progress-bar:hover{height:6px}
    .progress-bar:hover .progress-thumb{opacity:1}
    .progress-fill{
      height:100%;width:0%;
      background:linear-gradient(90deg,var(--accent),var(--accent-l));
      border-radius:2px;transition:width 0.15s linear;position:relative;
    }
    .progress-thumb{
      position:absolute;right:-5px;top:50%;transform:translateY(-50%);
      width:10px;height:10px;border-radius:50%;background:#fff;
      opacity:0;transition:opacity var(--tr);pointer-events:none;
      box-shadow:0 0 6px rgba(124,63,255,0.6);
    }

    .player-right{display:flex;align-items:center;justify-content:flex-end;gap:10px}
    .download-btn-premium{
      min-width:92px;height:36px;padding:0 14px;border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;gap:6px;
      background:rgba(37,211,102,0.16);border:1px solid rgba(37,211,102,0.4);
      color:#9dffbf;font-size:12px;font-weight:800;letter-spacing:0.2px;
      box-shadow:0 8px 22px rgba(37,211,102,0.12);
    }
    .download-btn-premium svg{width:15px;height:15px;flex-shrink:0}.download-btn-premium:hover{
      background:rgba(37,211,102,0.24);
      border-color:rgba(37,211,102,0.62);
      transform:translateY(-1px);
    }
    .vol-icon{font-size:14px;color:var(--muted)}
    .vol-slider{
      -webkit-appearance:none;width:76px;height:4px;
      border-radius:2px;background:var(--surface3);outline:none;cursor:pointer;
    }
    .vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent-l);cursor:grab}
    .badge-abs-player{
      font-size:9px;font-weight:700;letter-spacing:0.5px;
      padding:3px 8px;border-radius:999px;
      background:linear-gradient(135deg,rgba(201,148,10,0.22),rgba(232,182,14,0.1));
      border:1px solid rgba(201,148,10,0.35);color:var(--gold-l);
    }
    .vol-label{
      font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
      color:var(--muted);
    }
    audio{display:none}

    /* ── MODALS ── */
    .modal-overlay{
      position:fixed;inset:0;z-index:50;
      background:rgba(0,0,0,0.72);backdrop-filter:blur(10px);
      display:grid;place-items:center;
      overflow-y:auto;padding:16px 0;
      opacity:0;pointer-events:none;transition:opacity var(--tr);
      -webkit-overflow-scrolling:touch;
    }
    .modal-overlay.open{opacity:1;pointer-events:all}
    .modal{
      background:var(--bg2);border:1px solid var(--border2);
      border-radius:var(--radius);padding:32px;
      width:min(440px,calc(100vw - 40px));
      max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch;
      transform:translateY(20px);transition:transform var(--tr);position:relative;
    }
    .modal-overlay.open .modal{transform:translateY(0)}
    .modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;transition:color var(--tr)}
    .modal-close:hover{color:#fff}
    .modal h2{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;margin-bottom:6px;color:#fff}
    .modal p{color:var(--muted);font-size:14px;margin-bottom:20px;line-height:1.6}
    .form-group{margin-bottom:13px}
    .form-group label{display:block;font-size:12px;font-weight:600;margin-bottom:5px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
    .form-group input,.form-group select{
      width:100%;padding:10px 14px;border-radius:10px;
      background:var(--surface);border:1px solid var(--border);
      color:#fff;font-size:14px;outline:none;transition:border-color var(--tr),box-shadow var(--tr);
    }
    .form-group input:focus,.form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,63,255,0.1)}
    .form-group select option{background:var(--surface2)}
    .modal-submit{
      width:100%;padding:12px;border-radius:999px;
      background:linear-gradient(135deg,var(--accent),var(--accent-l));
      border:none;color:white;font-size:15px;font-weight:700;
      transition:transform var(--tr),opacity var(--tr);margin-top:6px;
      box-shadow:0 4px 16px rgba(124,63,255,0.35);
    }
    .modal-submit:hover{opacity:0.9;transform:translateY(-1px)}
    .modal-alt{text-align:center;margin-top:12px;font-size:13px;color:var(--muted)}
    .modal-alt span{color:var(--accent-l);cursor:pointer;font-weight:600}
    .price-big{font-family:'Syne',sans-serif;font-size:44px;font-weight:800;margin:10px 0;color:#25D366}
    .price-big small{font-size:16px;font-weight:400;color:var(--muted)}
    .plan-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0 14px}
    .plan-option{
      text-align:left;border:1px solid var(--border);background:var(--surface);
      color:var(--text-2);border-radius:8px;padding:12px;cursor:pointer;
      transition:border-color var(--tr),background var(--tr),transform var(--tr)
    }
    .plan-option:hover{transform:translateY(-1px);border-color:var(--accent-l)}
    .plan-option.active{border-color:rgba(232,182,14,.65);background:rgba(201,148,10,.1)}
    .plan-option strong{display:block;color:#fff;font-size:13px;margin-bottom:4px}
    .plan-option b{display:block;color:var(--gold-l);font-size:20px;margin-bottom:2px}
    .plan-option small{color:var(--muted);font-size:11px}
    .plan-save{display:inline-block;margin-top:6px;padding:3px 6px;border-radius:999px;background:rgba(37,211,102,.14);color:#7dffa9;font-size:9px;font-weight:800}
    .plan-payment-note{text-align:left;margin:14px 0;padding:12px;border-radius:8px;background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.24)}
    .plan-payment-note strong{display:block;color:#7dffa9;font-size:12px;margin-bottom:4px}
    .plan-payment-note span{display:block;color:var(--muted);font-size:11px;line-height:1.5}
    .install-modal{width:min(520px,calc(100vw - 40px))}
    .install-status{
      margin:0 0 12px;padding:11px 12px;border-radius:10px;
      background:rgba(124,63,255,.08);border:1px solid rgba(124,63,255,.24);
      color:var(--text-2);font-size:12px;line-height:1.5;
    }
    .install-status.success{
      background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.28);color:#cffff1;
    }
    .install-native-btn{margin-bottom:14px}
    .install-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
    .install-panel{
      padding:14px;border-radius:10px;background:rgba(255,255,255,.035);
      border:1px solid rgba(255,255,255,.08);
    }
    .install-panel h3{
      font-family:'Syne',sans-serif;font-size:15px;font-weight:800;color:#fff;margin-bottom:9px;
    }
    .install-panel ol{padding-left:18px;color:var(--muted);font-size:12px;line-height:1.7}
    .install-panel li{padding-left:3px;margin-bottom:5px}
    .install-note{
      margin-top:12px;color:var(--muted);font-size:12px;line-height:1.5;
    }
    .badge-perks{list-style:none;text-align:left;margin-bottom:20px}
    .badge-perks li{
      display:flex;align-items:center;gap:10px;
      padding:9px 0;border-bottom:1px solid var(--border);
      font-size:14px;color:var(--muted);
    }
    .badge-perks li:last-child{border-bottom:none}
    .badge-perks li span:first-child{font-size:16px}
    @keyframes badge-appear{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

    /* ── REVEAL ANIMATIONS ── */
    .reveal{opacity:0;transform:translateY(22px);transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),transform 0.65s cubic-bezier(0.16,1,0.3,1)}
    .reveal.visible{opacity:1;transform:none}
    .delay-1{transition-delay:0.08s}.delay-2{transition-delay:0.16s}.delay-3{transition-delay:0.24s}

    /* ── RESPONSIVE ── */
    @media(max-width:768px){
      .app-shell{height:auto;min-height:100vh;overflow:visible}
      .sidebar{
        display:flex;position:fixed;top:0;left:0;bottom:0;height:100dvh;
        width:min(84vw,320px);z-index:80;transform:translateX(-105%);
        transition:transform var(--tr);box-shadow:18px 0 45px rgba(0,0,0,0.45);
        overflow-y:auto;-webkit-overflow-scrolling:touch;
        padding-bottom:calc(var(--player-h) + 170px + env(safe-area-inset-bottom,0px));
        overscroll-behavior:contain;
      }
      .sidebar.open{transform:translateX(0);z-index:90}
      .sidebar-plan{margin:18px 10px 28px;flex-shrink:0}
      .brand,.nav-section{flex-shrink:0}
      .nav-label{font-size:10px}
      .nav-item{font-size:17px;padding:13px 12px}
      .mobile-backdrop{
        display:block;position:fixed;inset:0;z-index:70;
        background:rgba(0,0,0,0.58);opacity:0;pointer-events:none;
        transition:opacity var(--tr);
      }
      .mobile-backdrop.open{opacity:1;pointer-events:auto}
      .mobile-menu-btn{display:grid}
      .main-content{padding-bottom:330px;min-height:100vh}
      .topbar{padding:10px 12px;gap:8px}
      .search-wrap{max-width:none;padding:8px 11px}
      .topbar-right{gap:5px}
      .lang-btn{padding:5px 7px;font-size:10px}
      .notif-btn,.avatar-btn{width:32px;height:32px}
      .modal-overlay{place-items:start center;padding:12px 0 170px}
      .modal{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:22px 16px;border-radius:12px}
      .install-panels{grid-template-columns:1fr;gap:10px}
      .plan-options{grid-template-columns:1fr}
      .price-big{font-size:34px}
      .player-bar{
        left:0;
        grid-template-columns:1fr;
        height:auto;
        padding-bottom:env(safe-area-inset-bottom,8px);
      }
      .now-playing{padding:6px 12px}
      .np-thumb{width:32px;height:32px;font-size:15px}
      .np-title{font-size:12px}
      .np-artist{font-size:10px}
      .player-center{
        display:flex;
        padding:0 12px 4px;
        gap:4px;
      }
      .player-controls{gap:8px}
      .player-controls .ctrl-btn{font-size:14px;padding:4px}
      .play-btn{width:34px;height:34px}
      .progress-wrap{gap:6px}
      .progress-time{font-size:9px}
      .player-right{
        display:flex;
        padding:0 12px 7px;
        justify-content:space-between;
        gap:8px;
      }
      .download-btn-premium{min-width:84px;height:34px;padding:0 12px;font-size:11px}
      .vol-icon,.vol-slider{display:none}
      .ad-banner{display:none!important}
      .ad-content{font-size:11px;line-height:1.35}
      .ad-upgrade{display:inline-flex;width:100%;justify-content:center}
      .sponsored-card{width:calc(100% - 24px);margin:10px auto 0;border-radius:12px}
      .sponsored-media{min-height:92px;max-height:138px;aspect-ratio:2.2/1;padding:8px}
      .sponsored-badge{top:7px;left:7px;padding:3px 7px;font-size:8px}
      .sponsored-body{padding:8px 10px;align-items:flex-start}
      .sponsored-title{font-size:12px}
      .sponsored-copy{font-size:10px;line-height:1.25}
      .sponsored-cta{display:none}
      .hero{margin:12px;padding:18px}
      .hero::after{font-size:56px;right:16px;opacity:0.08}
      .hero h1{font-size:26px}
      .hero-actions{width:100%;gap:9px}
      .hero-actions button{min-height:44px;padding-left:12px;padding-right:12px;font-size:13px}
      .album-feature{padding:12px 12px 0}
      .album-feature-card{grid-template-columns:124px 1fr;gap:13px;align-items:start;padding:13px;border-radius:16px}
      .album-feature-cover{border-radius:13px;box-shadow:0 14px 28px rgba(0,0,0,.38)}
      .album-feature-label{font-size:9px;letter-spacing:1.6px;margin-bottom:6px}
      .album-feature-info h2{font-size:14px;line-height:1.08;margin-bottom:10px}
      .album-feature-info p{display:none}
      .album-feature-btn{padding:10px 13px;font-size:11px;max-width:100%;white-space:nowrap}
      .premium-status-card{margin:8px 12px 0;padding:14px;border-radius:14px;gap:11px}
      .premium-status-mini{
        max-width:calc(100% - 24px);
        margin:8px 12px 0;
        padding:7px 8px 7px 10px;
        border-radius:999px;
        gap:8px;
      }
      .premium-status-top{align-items:flex-start}
      .premium-status-kicker{font-size:9px;letter-spacing:1.2px}
      .premium-status-badge{font-size:9px;padding:6px 9px}
      .premium-status-card h2{font-size:24px}
      .premium-status-card p{font-size:12px}
      .premium-status-perks{grid-template-columns:1fr;gap:7px}
      .premium-status-perks span{min-height:34px;font-size:10px}
      .section{padding:16px 14px 0}
      .section-head{margin-bottom:10px}
      .section-head h2{font-size:20px;line-height:1.05}
      .see-all{font-size:12px;white-space:nowrap}
      .playlist-grid{grid-template-columns:repeat(2,1fr);gap:8px}
      .selecao-card{
        display:block;
        padding:14px;
        border-radius:18px;
        background:linear-gradient(150deg,rgba(24,21,40,.97),rgba(13,11,23,.99));
      }
      .selecao-cover{
        left:auto;right:14px;top:14px;width:58px;height:58px;
        min-height:0;padding:0;gap:4px;
        border-radius:14px;
      }
      .selecao-cover::before,
      .selecao-cover::after,
      .selecao-waveform{display:none}
      .selecao-info{
        padding:0;
        gap:9px;
      }
      .selecao-label{font-size:9px;letter-spacing:1.6px;padding-right:76px}
      .selecao-title{
        max-width:calc(100% - 72px);
        font-size:25px;
        line-height:1;
        letter-spacing:0;
      }
      .selecao-desc{
        font-size:12px;
        line-height:1.45;
        max-width:100%;
        padding-right:0;
      }
      .selecao-meta{gap:7px;margin-top:1px}
      .selecao-chip{font-size:9px;padding:5px 9px}
      .style-filter{font-size:10px;padding:7px 11px}
      .selecao-tracks{
        width:100%;
        margin-top:2px;
        border-radius:12px;
        background:transparent;
        border:0;
        overflow:visible;
        gap:4px;
      }
      .track-row{
        min-height:48px;
        padding:8px 10px;
        border-radius:10px;
        background:rgba(255,255,255,.045);
        border:1px solid rgba(255,255,255,.07);
        gap:9px;
      }
      .track-row:hover{background:rgba(255,255,255,.07)}
      .track-row.active-track{background:rgba(124,63,255,.16)}
      .track-num{width:18px;font-size:11px}
      .track-name{font-size:12.5px;line-height:1.15}
      .track-cat{font-size:10.5px;margin-top:3px}
      .track-more{justify-content:center;min-height:42px}
      .selecao-play-btn{
        width:100%;
        min-height:46px;
        margin-top:4px;
        font-size:13px;
      }
      .selecao-avatar{
        width:32px;height:32px;border-radius:50%;font-size:19px;
        display:grid;place-items:center;background:rgba(8,6,15,0.62);
        border:1px solid rgba(255,255,255,0.15);filter:none;animation:none;
      }
      .selecao-badge{display:none}
    ::-webkit-scrollbar{width:4px}
    ::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:4px}
    *:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    /* ── INTERSTITIAL AD ── */
    .ad-interstitial{
      position:fixed;inset:0;z-index:60;
      background:rgba(0,0,0,0.92);backdrop-filter:blur(16px);
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:18px;opacity:0;pointer-events:none;transition:opacity 0.4s;
    }
    .ad-interstitial.open{opacity:1;pointer-events:all}
    .ad-interstitial.no-visual{display:none!important}
    .ad-interstitial-badge{font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding:3px 10px;border-radius:999px;border:1px solid rgba(155,148,192,0.2)}
    .ad-interstitial-img{width:min(340px,80vw);aspect-ratio:16/9;border-radius:var(--radius);object-fit:cover;border:1px solid var(--border2)}
    .ad-interstitial-text{color:var(--text-2);font-size:15px;font-weight:600;text-align:center;max-width:360px;line-height:1.5}
    .ad-interstitial-cta{padding:10px 22px;border-radius:999px;background:var(--gold);color:#0A0618;font-size:13px;font-weight:700;border:none;cursor:pointer;transition:all var(--tr)}
    .ad-interstitial-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(201,148,10,0.4)}
    .ad-interstitial-skip{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;margin-top:6px;transition:color var(--tr)}
    .ad-interstitial-skip:hover{color:#fff}
    .ad-interstitial-skip:disabled{opacity:0.3;cursor:not-allowed}
    .ad-interstitial-remove{margin-top:8px;font-size:11px;color:var(--accent-l);cursor:pointer;text-decoration:underline;background:none;border:none}

    /* ── FEEDBACK WIDGET ── */
    .feedback-fab{
      position:fixed;bottom:100px;right:20px;z-index:25;
      width:52px;height:52px;border-radius:50%;
      background:linear-gradient(135deg,#13c45b,#25D366 48%,#7dffa9);
      border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;
      cursor:pointer;box-shadow:0 10px 34px rgba(37,211,102,0.36),inset 0 1px 0 rgba(255,255,255,.16);
      transition:transform var(--tr),box-shadow var(--tr),filter var(--tr);
    }
    .feedback-fab::before{
      content:'';width:24px;height:24px;display:block;
      background:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M16.04 3.2A12.74 12.74 0 0 0 5.15 22.5L3.4 28.8l6.48-1.7A12.75 12.75 0 1 0 16.04 3.2Zm0 2.28a10.47 10.47 0 0 1 8.9 15.98 10.5 10.5 0 0 1-13.9 3.48l-.46-.27-3.84 1 1.03-3.73-.3-.48A10.47 10.47 0 0 1 16.04 5.48Zm-4.18 4.92c-.23 0-.6.09-.91.43-.32.35-1.2 1.17-1.2 2.86 0 1.68 1.23 3.31 1.4 3.54.17.23 2.38 3.8 5.85 5.17 2.89 1.14 3.48.91 4.1.85.63-.06 2.03-.83 2.32-1.63.28-.8.28-1.48.2-1.63-.09-.14-.32-.23-.66-.4-.34-.17-2.03-1-2.34-1.12-.32-.11-.55-.17-.78.18-.23.34-.89 1.11-1.09 1.34-.2.23-.4.26-.74.09-.34-.17-1.45-.53-2.76-1.7-1.02-.91-1.71-2.03-1.91-2.37-.2-.34-.02-.53.15-.7.16-.15.34-.4.51-.6.17-.2.23-.34.34-.57.12-.23.06-.43-.03-.6-.09-.17-.78-1.88-1.07-2.57-.28-.68-.57-.58-.78-.59l-.66-.01Z'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    .feedback-fab:hover{transform:translateY(-2px) scale(1.05);filter:saturate(1.12);box-shadow:0 14px 40px rgba(37,211,102,0.58),inset 0 1px 0 rgba(255,255,255,.18)}
    .feedback-menu{
      position:fixed;bottom:166px;right:20px;z-index:25;
      background:rgba(12,8,24,.96);border:1px solid rgba(165,119,255,.28);border-radius:14px;
      padding:8px;width:250px;box-shadow:0 18px 48px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.035);
      backdrop-filter:blur(18px);transform:translateY(10px) scale(.98);opacity:0;pointer-events:none;transition:all var(--tr);
    }
    .feedback-menu::after{
      content:'';position:absolute;right:18px;bottom:-7px;width:14px;height:14px;
      background:rgba(12,8,24,.96);border-right:1px solid rgba(165,119,255,.28);border-bottom:1px solid rgba(165,119,255,.28);
      transform:rotate(45deg);
    }
    .feedback-menu.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}
    .feedback-option{
      position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-height:42px;
      padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;
      color:var(--text-2);transition:background var(--tr),color var(--tr),transform var(--tr);
      border:none;background:transparent;width:100%;text-align:left;
    }
    .feedback-option:hover{background:rgba(124,63,255,0.16);color:#fff;transform:translateX(2px)}
    .feedback-option .fb-icon{display:none}

    /* ── MULTI-STEP FORM ── */
    .form-step{display:none}
    .form-step.active{display:block}
    .step-dots{display:flex;gap:6px;justify-content:center;margin:14px 0 8px}
    .step-dot{width:8px;height:8px;border-radius:50%;background:var(--surface3);transition:background var(--tr)}
    .step-dot.active{background:var(--accent)}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    @media(max-width:500px){.form-row{grid-template-columns:1fr}}

    /* ── TREINO DO DIA BADGE ── */
    .treino-dia-btn{
      display:inline-flex;align-items:center;gap:6px;
      padding:8px 16px;border-radius:999px;
      background:linear-gradient(135deg,rgba(232,64,64,0.15),rgba(255,107,53,0.1));
      border:1px solid rgba(232,64,64,0.3);color:#ff8080;
      font-size:12px;font-weight:700;cursor:pointer;transition:all var(--tr);
    }
    .treino-dia-btn:hover{background:rgba(232,64,64,0.25);transform:translateY(-1px)}

    /* ── RANKING BADGES ── */
    .rank-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(232,64,64,0.2);border:1px solid rgba(232,64,64,0.35);color:#ff8080;margin-left:6px}
    .rank-up{color:#6ee7a0;background:rgba(32,180,100,0.15);border-color:rgba(32,180,100,0.3)}

    @media(max-width:768px){
      .feedback-fab{bottom:96px;right:12px;width:42px;height:42px}
      .feedback-fab::before{width:21px;height:21px}
      .feedback-menu{bottom:148px;right:12px;width:min(260px,calc(100vw - 28px))}
      .feedback-option{min-height:40px;font-size:13px}
    }