:root{
  --bg:#050505; --panel:#121212; --panel2:#181818; --card:#181818; --cardHover:#282828;
  --text:#fff; --muted:#b3b3b3; --line:#292929; --green:#1ed760; --blue:#4ba7ff; --pink:#d22bd8; --purple:#7b61ff;
  --hero:#1f4f36; --radius:14px; --shadow:0 26px 80px rgba(0,0,0,.48);
  --font:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*{box-sizing:border-box} html{height:100%;scroll-behavior:smooth} body{margin:0;min-height:100%;background:#000;color:var(--text);font-family:var(--font);overflow-x:hidden;overflow-y:auto} body.lock{overflow:hidden}
button,input,textarea,select{font:inherit} button,a{cursor:pointer} a{color:inherit;text-decoration:none} img{max-width:100%;display:block}.hidden{display:none!important}
#app{min-height:100vh}.app-frame{min-height:100vh;background:#000}.app-shell{height:100vh;display:grid;grid-template-columns:304px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 86px;gap:8px;padding:8px;background:#000;overflow:hidden}.app-shell.public{grid-template-rows:minmax(0,1fr)}
.sidebar{grid-row:1/2;background:#0f0f0f;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-height:0}.brand{height:74px;display:flex;align-items:center;gap:12px;padding:14px 18px;flex:0 0 auto}.brand img{height:44px;max-width:158px;object-fit:contain;border-radius:8px}.brand strong{font-size:18px}.nav{display:grid;gap:7px;padding:2px 14px 14px}.nav a{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:12px;color:#d8d8d8;font-weight:850}.nav a:hover,.nav a.active{background:#1d1d1d;color:#fff}.nav .ico{width:22px;text-align:center;font-size:19px}.library{margin:0 8px 8px;background:#151515;border-radius:10px;min-height:0;flex:1;display:flex;flex-direction:column;position:relative}.library-head{padding:16px;display:flex;justify-content:space-between;align-items:center;font-weight:950}.lib-title{display:flex;align-items:center;gap:12px;color:#ddd}.round{width:36px;height:36px;border:0;border-radius:50%;background:#232323;color:#fff;font-weight:950;display:grid;place-items:center}.round:hover{background:#303030;transform:scale(1.04)}.lib-menu{position:absolute;right:12px;top:55px;width:258px;background:#282828;border:1px solid #3a3a3a;border-radius:10px;box-shadow:var(--shadow);z-index:25;padding:8px;display:none}.lib-menu.open{display:block}.lib-menu button,.lib-menu a{width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:12px;border-radius:8px;display:flex;gap:10px;align-items:center;font-weight:750}.lib-menu button:hover,.lib-menu a:hover{background:#3a3a3a}.chips{display:flex;gap:8px;padding:0 14px 12px;flex-wrap:wrap}.chip{border:0;border-radius:999px;padding:8px 12px;background:#242424;color:#fff;font-size:12px;font-weight:850}.chip:hover,.chip.active{background:#fff;color:#000}.library-list{overflow:auto;min-height:0;padding:0 8px 16px;scrollbar-width:thin}.mini{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;padding:8px;border-radius:9px}.mini:hover{background:#252525}.mini img{width:48px;height:48px;object-fit:cover;border-radius:6px}.mini b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-card{margin:8px 10px;background:#242424;border-radius:10px;padding:15px}.side-card h4{margin:0 0 8px}.side-card p{margin:0 0 12px;color:#dedede;font-size:13px;line-height:1.35}.main{grid-row:1/2;background:#121212;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-width:0;min-height:0}.topbar{height:66px;background:rgba(0,0,0,.45);display:flex;align-items:center;gap:14px;padding:0 24px;position:sticky;top:0;z-index:15;backdrop-filter:blur(18px);flex:0 0 auto}.topbar .navbtn{width:36px;height:36px;border:0;border-radius:50%;background:#090909;color:#fff;font-size:18px}.topbar .spacer{flex:1}.top-actions{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:max-content}.top-link{font-weight:900;color:#ddd;padding:10px 12px;border-radius:999px;white-space:nowrap}.top-link:hover{color:#fff;transform:scale(1.03)}.btn{border:0;border-radius:999px;padding:13px 22px;font-weight:950;background:#fff;color:#000;display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:1;white-space:nowrap}.btn:hover{transform:scale(1.035)}.btn.green{background:var(--green);color:#000}.btn.dark{background:#242424;color:#fff}.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}.btn.pink{background:linear-gradient(90deg,#d82dd8,#5aa4ff);color:#fff}.search{width:min(440px,44vw);height:44px;border-radius:999px;background:#242424;border:1px solid transparent;display:flex;align-items:center;gap:10px;padding:0 15px;color:#aaa}.search:focus-within{background:#2b2b2b;border-color:#555}.search input{border:0;outline:0;background:transparent;color:#fff;width:100%}.content{flex:1;min-height:0;overflow:auto;background:#121212;padding-bottom:50px;scrollbar-width:thin}.player{grid-column:1/3;grid-row:2/3;background:#000;border-top:1px solid #111;display:grid;grid-template-columns:304px minmax(0,1fr) 304px;align-items:center;gap:16px;padding:10px 16px;min-height:0}.now{display:grid;grid-template-columns:56px minmax(0,1fr) 36px;gap:12px;align-items:center}.now img{width:56px;height:56px;object-fit:cover;border-radius:6px}.now b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls{display:flex;align-items:center;flex-direction:column;gap:7px;min-width:0}.control-row{display:flex;align-items:center;gap:18px}.control-row button{border:0;background:transparent;color:#fff;font-size:18px}.control-row .big{width:40px;height:40px;min-width:40px;border-radius:50%;background:#fff;color:#000;font-size:18px;display:flex;align-items:center;justify-content:center;font-weight:900;border:0;cursor:pointer;flex-shrink:0}.progress{width:min(590px,50vw);display:flex;align-items:center;gap:9px;color:#aaa;font-size:11px}.bar{height:4px;background:#555;border-radius:99px;overflow:hidden;flex:1}.bar i{display:block;height:100%;width:0;background:#fff}.vol{display:flex;align-items:center;gap:12px;justify-content:flex-end;color:#aaa}.vol button{border:0;background:#111;color:#fff;border-radius:999px;padding:8px 12px}.hero{padding:58px 40px 38px;background:radial-gradient(circle at 20% 0,var(--hero),transparent 48%),linear-gradient(180deg,var(--hero),#121212);min-height:278px}.hero h1{font-size:clamp(42px,7vw,88px);letter-spacing:-.065em;line-height:.95;margin:0 0 18px}.hero p{max-width:760px;line-height:1.45;font-size:18px;color:#eee}.hero.big{width:40px;height:40px;min-width:40px;border-radius:50%;background:#fff;color:#000;font-size:18px;display:flex;align-items:center;justify-content:center;font-weight:900;border:0;cursor:pointer;flex-shrink:0}.hero-art{aspect-ratio:1/1;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);background:#222}.hero-art img{width:100%;height:100%;object-fit:cover}.section{padding:28px 40px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.section h2{margin:0;font-size:26px;letter-spacing:-.035em}.show-all{border:0;background:transparent;color:#cfcfcf;font-size:13px;font-weight:950;padding:8px 12px;border-radius:999px}.show-all:hover{background:#2a2a2a;color:#fff}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:16px}.grid.wide{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.card{position:relative;background:#181818;border-radius:10px;padding:13px;min-height:236px;transition:.18s ease;overflow:hidden}.card:hover{background:#292929;transform:translateY(-2px)}.card-cover{width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#222;box-shadow:0 12px 28px rgba(0,0,0,.34)}.card-cover img{width:100%;height:100%;object-fit:cover}.card h3{font-size:16px;line-height:1.25;margin:12px 0 6px}.card p{font-size:14px;color:#bdbdbd;margin:0;line-height:1.35}.play{position:absolute;right:20px;top:calc(100% - 95px);width:50px;height:50px;border:0;border-radius:50%;background:var(--green);color:#000;box-shadow:0 12px 30px rgba(0,0,0,.5);font-weight:950;opacity:0;transform:translateY(10px);transition:.18s}.card:hover .play{opacity:1;transform:none}.recent-six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.recent-card{height:80px;border:0;background:rgba(255,255,255,.1);border-radius:8px;overflow:hidden;display:flex;align-items:center;gap:13px;color:#fff;font-weight:950;text-align:left}.recent-card:hover{background:rgba(255,255,255,.22)}.recent-card img{height:80px;width:80px;object-fit:cover}.album-head{padding:38px 40px 30px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:end;background:linear-gradient(180deg,var(--hero),rgba(18,18,18,.96))}.album-head img{width:230px;height:230px;object-fit:cover;border-radius:8px;box-shadow:var(--shadow)}.album-head small{text-transform:uppercase;font-weight:900}.album-head h1{font-size:clamp(48px,8vw,92px);letter-spacing:-.06em;line-height:.95;margin:8px 0 12px}.album-head p{margin:0;color:#eee}.tracklist{padding:22px 40px 70px;background:linear-gradient(180deg,rgba(0,0,0,.18),#121212)}.track{display:grid;grid-template-columns:38px 52px minmax(0,1fr) 160px 42px;gap:12px;align-items:center;padding:10px;border-radius:8px;color:#ddd}.track:hover{background:#2a2a2a}.track img{width:48px;height:48px;object-fit:cover;border-radius:4px}.track b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track span{color:#aaa;font-size:13px}.track button{border:0;border-radius:50%;width:36px;height:36px;background:#000;color:#fff}.gate{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 20% 10%,rgba(30,215,96,.28),transparent 38%),radial-gradient(circle at 80% 20%,rgba(123,97,255,.32),transparent 42%),rgba(0,0,0,.88);backdrop-filter:blur(16px);display:grid;place-items:center;padding:24px}.gate-card{width:min(980px,96vw);min-height:560px;border:1px solid rgba(255,255,255,.13);border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045));box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.gate-art{background:radial-gradient(circle,#1ed76055,transparent 60%);display:grid;place-items:center}.gate-art img{width:min(360px,80%);border-radius:28px;filter:drop-shadow(0 20px 45px rgba(0,0,0,.45))}.gate-copy{padding:54px;display:flex;flex-direction:column;justify-content:center}.gate-copy h2{font-size:clamp(40px,5vw,72px);letter-spacing:-.06em;line-height:.95;margin:0 0 18px}.gate-copy p{color:#eee;font-size:18px;line-height:1.45}.gate-close{position:absolute;right:24px;top:22px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#000;font-size:26px}.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) 460px;gap:50px;align-items:center;padding:52px min(7vw,90px);background:radial-gradient(circle at 18% 10%,rgba(30,215,96,.23),transparent 34%),radial-gradient(circle at 84% 14%,rgba(210,43,216,.26),transparent 38%),#050505}.auth-copy h1{font-size:clamp(56px,8vw,108px);letter-spacing:-.075em;line-height:.9;margin:22px 0}.auth-copy p{font-size:20px;color:#ddd;max-width:640px}.mascot-stage{display:flex;gap:14px;align-items:center}.mascot-stage img{width:86px;height:86px;border-radius:24px;object-fit:cover;box-shadow:var(--shadow)}.auth-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:28px;padding:28px;box-shadow:var(--shadow)}.auth-card h2{font-size:34px;margin:0 0 20px}.field{margin-bottom:14px}.field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#cfcfcf;font-weight:900;margin:0 0 7px}.field input,.field textarea{width:100%;border:1px solid #4a4a4a;background:#111;color:#fff;border-radius:12px;padding:14px;outline:0}.field input:focus,.field textarea:focus{border-color:#fff}.auth-link{margin-top:18px;color:#ddd}.auth-link a{text-decoration:underline;font-weight:900}.marketing{min-height:100vh;background:#050505;color:#fff}.marketing .mk-top{height:82px;background:#000;display:flex;align-items:center;padding:0 min(7vw,90px);gap:18px;position:sticky;top:0;z-index:10}.mk-top img{height:48px;border-radius:8px}.mk-top nav{display:flex;gap:18px;margin-left:auto;align-items:center}.mk-hero{min-height:570px;padding:80px min(9vw,130px);display:grid;grid-template-columns:minmax(0,1.1fr) 390px;gap:54px;align-items:center;background:radial-gradient(circle at 18% 12%,var(--mk1,#8a2cff),transparent 44%),linear-gradient(180deg,var(--mk2,#111),#050505)}.mk-hero h1{font-size:clamp(48px,6.5vw,90px);line-height:.95;letter-spacing:-.07em;margin:0 0 22px}.mk-hero p{font-size:19px;color:#eee;line-height:1.45}.mk-visual{min-height:330px;border-radius:34px;display:grid;place-items:center;background:linear-gradient(135deg,#e333d9,#40a4ff);box-shadow:var(--shadow);overflow:hidden}.mk-visual img{width:76%;filter:drop-shadow(0 20px 42px rgba(0,0,0,.5))}.mk-section{padding:54px min(8vw,100px)}.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.plan{background:#fff;color:#000;border-radius:20px;padding:24px;box-shadow:var(--shadow)}.plan h3{font-size:24px;margin:0 0 8px}.price{font-size:36px;font-weight:950;margin:12px 0}.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.device{border-radius:30px;background:linear-gradient(135deg,#141414,#282828);min-height:340px;padding:34px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center}.device h2{font-size:42px;letter-spacing:-.045em;line-height:1;margin:0 0 16px}.legal-page{min-height:100vh;background:#fff;color:#111;padding:80px min(12vw,160px)}.legal-page h1{font-size:54px;line-height:1;letter-spacing:-.05em}.legal-tabs{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}.legal-tabs a{background:#eee;border-radius:8px;padding:9px 12px;font-weight:850}.legal-page p{font-size:17px;line-height:1.6}.footer{background:#000;padding:48px min(7vw,90px);display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:28px;border-top:1px solid #1b1b1b}.footer img{height:48px;border-radius:8px}.footer h4{margin:0 0 14px}.footer a{display:block;color:#bcbcbc;margin:10px 0}.footer a:hover{color:#fff}.rightbar{position:fixed;right:16px;top:82px;bottom:102px;width:330px;background:#181818;border:1px solid #2c2c2c;border-radius:18px;box-shadow:var(--shadow);z-index:35;padding:18px;overflow:auto}.rightbar .close{float:right;border:0;background:#333;color:#fff;border-radius:50%;width:34px;height:34px}.rightbar img{border-radius:14px;width:100%;aspect-ratio:1/1;object-fit:cover;margin:14px 0}.empty{padding:40px;border-radius:20px;background:#181818;color:#ddd}.splash{position:fixed;inset:0;background:#050505;display:grid;place-items:center;z-index:200;transition:.5s;pointer-events:none}.splash.hide{opacity:0;visibility:hidden}.splash-box{text-align:center}.splash-box img{width:130px;height:130px;object-fit:cover;border-radius:30px;margin:0 auto 16px;box-shadow:0 0 60px rgba(30,215,96,.25)}.splash-box h1{font-size:44px;letter-spacing:-.05em;margin:0}.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:#fff;color:#000;padding:13px 20px;border-radius:999px;font-weight:900;box-shadow:var(--shadow);z-index:120}
@media (max-width:960px){.app-shell{grid-template-columns:1fr;grid-template-rows:64px minmax(0,1fr) 86px}.app-shell.public{grid-template-rows:64px minmax(0,1fr)}.sidebar{grid-row:1/2;border-radius:0;height:64px;flex-direction:row;align-items:center}.brand{height:64px}.nav{display:none}.library{display:none}.main{grid-row:2/3;border-radius:0}.player{grid-column:1;grid-row:3/4;grid-template-columns:1fr 1fr}.vol{display:none}.topbar{padding:0 14px}.top-actions{gap:6px}.top-link{display:none}.btn{padding:12px 16px}.search{width:100%}.hero.big,.mk-hero,.auth-page,.gate-card,.install-grid{grid-template-columns:1fr}.hero-art,.mk-visual{display:none}.recent-six{grid-template-columns:1fr}.album-head{grid-template-columns:1fr}.album-head img{width:190px;height:190px}.track{grid-template-columns:32px 46px 1fr 42px}.track .hide-sm{display:none}.footer{grid-template-columns:1fr 1fr}.rightbar{left:12px;right:12px;width:auto}.auth-page{padding:32px 18px}.gate-copy{padding:30px}.mk-top nav{display:none}}

/* HOTFIX 1.31 — player Spotify/PWA/vídeo/artista */
.now-hero{margin:18px 40px 0;padding:32px;border-radius:28px;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px;align-items:center;background:linear-gradient(135deg,var(--hero-color,#211343) 0%,#121212 100%);box-shadow:var(--shadow);overflow:hidden;transition:background 1.2s ease}.now-hero.video-on{background:linear-gradient(135deg,var(--hero-color,#351010) 0%,#121212 100%)}.now-hero.audio-on{background:linear-gradient(135deg,var(--hero-color,#123927) 0%,#121212 100%)}.now-hero small{text-transform:uppercase;font-weight:950;letter-spacing:.08em;color:var(--green)}.now-hero h1{font-size:clamp(36px,5vw,72px);letter-spacing:-.06em;line-height:.96;margin:8px 0}.now-hero p{color:#e8e8e8}.now-hero img{width:220px;height:220px;object-fit:cover;border-radius:18px;box-shadow:0 22px 70px rgba(0,0,0,.5)}
.spotify-side{padding:0;overflow:auto;background:#121212}.spotify-side .close{position:sticky;top:12px;right:12px;float:right;margin:12px;z-index:4}.spotify-side>h2{padding:20px 20px 4px;margin:0;font-size:18px}.spotify-side>h1{padding:0 20px;margin:12px 0 3px;font-size:24px;line-height:1.08}.spotify-side>p{padding:0 20px;margin:0 0 12px;color:#cfcfcf}.side-video-box{position:relative;margin-top:8px;background:#050505;min-height:360px;display:grid;place-items:center;overflow:hidden}.side-video-box video{width:100%;height:360px;object-fit:cover;background:#000}.video-pill{position:absolute;left:16px;bottom:18px;border:0;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;padding:10px 16px;font-weight:950}.side-actions{display:flex;gap:8px;padding:0 20px 15px;flex-wrap:wrap}.ai-bio{margin:0 20px 16px;padding:14px;border-radius:14px;background:#202020;color:#ddd;font-size:13px;line-height:1.42}.artist-info-card{margin:16px 12px;background:#202020;border-radius:14px;padding:15px}.artist-info-card h3{font-size:16px;margin:0 0 10px}.artist-info-card img{width:100%;height:160px;object-fit:cover;border-radius:12px;margin:0 0 12px}.artist-info-card h2{font-size:20px;margin:4px 0}.artist-info-card p{color:#d0d0d0;font-size:13px;line-height:1.42}.credits{margin-top:12px;border-top:1px solid #3a3a3a;padding-top:10px}.credits b{display:block;margin-bottom:8px}.credits span{display:block;color:#ddd;margin:5px 0}.now button,.vol button{transition:.15s}.now button:hover,.vol button:hover{color:var(--green)}
@media (min-width:1180px){.app-shell:has(.rightbar){grid-template-columns:304px minmax(0,1fr)}}
@media (max-width:960px){.now-hero{margin:12px;padding:22px;grid-template-columns:1fr}.now-hero img{width:160px;height:160px}.side-video-box video{height:280px}.player{grid-template-columns:minmax(0,1fr) 112px}.progress{display:none}.now{grid-template-columns:48px minmax(0,1fr) 32px}.now img{width:48px;height:48px}.control-row{gap:8px}.rightbar{top:70px;bottom:92px}}

/* HOTFIX 1.32 — playlists reais estilo Spotify */
.mini-icon{width:48px;height:48px;border-radius:6px;background:linear-gradient(135deg,#303030,#151515);display:grid;place-items:center;color:var(--green);font-size:22px;font-weight:950}.track{grid-template-columns:38px 52px minmax(0,1fr) 160px 42px 72px}.track button+button{border-radius:999px;width:auto;padding:0 12px;background:#181818;border:1px solid #4a4a4a}.playlist-cover{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;background:#282828}.playlist-cover img{width:100%;height:100%;object-fit:cover;border-radius:0}.playlist-empty{grid-column:1/3;grid-row:1/3;display:grid;place-items:center;font-size:70px;color:var(--green);background:linear-gradient(135deg,#333,#111)}.playlist-main-cover{width:230px;height:230px;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);background:#222;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playlist-main-cover img{width:100%;height:100%;object-fit:cover}.playlist-head img{border-radius:0;box-shadow:none}.playlist-card .card-cover{box-shadow:0 12px 28px rgba(0,0,0,.34)}
@media (max-width:960px){.track{grid-template-columns:32px 46px 1fr 42px 54px}.playlist-main-cover{width:190px;height:190px}.track button+button{font-size:11px;padding:0 8px}.hide-sm{display:none}}

/* HOTFIX 1.33 — pastas, organizar biblioteca e ouvir offline */
.folder-cover,.folder-main{display:grid!important;place-items:center;background:linear-gradient(135deg,#303030,#151515)!important;color:var(--green);font-size:74px;font-weight:950;border-radius:8px}.folder-main{width:230px;height:230px;box-shadow:var(--shadow)}.folder-card .card-cover{box-shadow:0 12px 28px rgba(0,0,0,.34)}.offline-head{background:#181818;border:1px solid #282828;border-radius:20px;padding:22px;margin-bottom:18px}.offline-head h2{margin:0 0 8px;font-size:28px;letter-spacing:-.04em}.offline-head p{margin:0;color:#cfcfcf;line-height:1.45}.track button[title="Baixar offline"],.track button.hide-sm{min-width:68px}.lib-menu a{display:block;padding:11px 12px;color:#ddd;border-radius:10px}.lib-menu a:hover{background:#3a3a3a;color:#fff}.player .vol{display:flex;gap:8px;justify-content:flex-end}.player .vol button{white-space:nowrap}
@media (max-width:960px){.folder-main{width:190px;height:190px}.player .vol button:nth-child(2){display:none}}


/* HOTFIX 1.34 — downloads, fila e área offline mais completa */
.storage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.storage-grid div{background:#202020;border:1px solid #303030;border-radius:14px;padding:14px}.storage-grid b{display:block;font-size:24px;color:var(--green);line-height:1}.storage-grid span{display:block;color:#cfcfcf;font-size:12px;margin-top:5px}.rightbar .side-actions{gap:7px}.rightbar .side-actions .btn{padding:9px 12px;font-size:12px}.track button{cursor:pointer}.track button:hover{border-color:var(--green);color:var(--green)}
@media (max-width:960px){.storage-grid{grid-template-columns:1fr}.rightbar .side-actions{display:grid;grid-template-columns:1fr 1fr}}

.lyrics-box{margin:14px 0;padding:14px;border-radius:14px;background:rgba(255,255,255,.06);color:#ddd;max-height:260px;overflow:auto}.lyrics-box h3{margin:0 0 8px}.lyrics-box pre{white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.45;color:#ddd}.lyrics-box p{color:#aaa;font-size:13px}

/* ===== HOTFIX 2.0 — Lateral Spotify-style com vídeo, tabs e letra ===== */
.rb-tabs{display:flex;gap:0;border-bottom:1px solid #2a2a2a;margin:0;padding:0 14px;background:#0f0f0f;position:sticky;top:0;z-index:5;border-radius:0}
.rb-tab{flex:1;border:0;background:transparent;color:#aaa;padding:14px 8px;font-weight:850;font-size:13px;border-bottom:2px solid transparent;transition:.15s;cursor:pointer}
.rb-tab.active{color:#fff;border-bottom-color:var(--green)}
.rb-tab:hover{color:#ddd}

.side-video-box{position:relative;background:#000;overflow:hidden;min-height:0}
.side-video-box video{width:100%;display:block;max-height:320px;object-fit:cover;background:#000}
.video-overlay{position:absolute;bottom:12px;left:12px;right:12px;display:flex;gap:8px;flex-wrap:wrap}
.video-pill{border:0;border-radius:999px;background:rgba(0,0,0,.75);color:#fff;padding:8px 14px;font-size:12px;font-weight:900;backdrop-filter:blur(10px);cursor:pointer;transition:.15s}
.video-pill:hover{background:rgba(255,255,255,.2)}

.rb-cover-art{position:relative;overflow:hidden;aspect-ratio:1/1;background:#111}
.rb-cover-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.rb-cover-art:hover img{transform:scale(1.04)}
.rb-cover-glow{position:absolute;inset:0;opacity:.35;filter:blur(40px);transform:scale(1.2);pointer-events:none}

.rb-track-info{display:grid;grid-template-columns:52px minmax(0,1fr) 36px;gap:12px;align-items:center;padding:14px 16px 8px;border-top:1px solid #222;margin-top:auto}
.rb-thumb{width:52px;height:52px;border-radius:8px;object-fit:cover}
.rb-meta b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-meta span{display:block;font-size:12px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-fav{border:0;background:transparent;color:#aaa;font-size:20px;cursor:pointer;transition:.15s}
.rb-fav:hover{color:var(--green);transform:scale(1.2)}

.lyrics-box{padding:20px;overflow:auto;flex:1;min-height:200px}
.lyrics-box h3{margin:0 0 16px;font-size:16px;color:#fff}
.lyrics-box pre{white-space:pre-wrap;font-family:inherit;font-size:15px;line-height:1.8;color:#d8d8d8}
.lyrics-box p{color:#aaa;font-size:13px;padding:20px 0;text-align:center}
.lyrics-loading{padding:30px;text-align:center;color:#aaa;font-size:13px;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

.rightbar.spotify-side{display:flex;flex-direction:column;padding:0;overflow:hidden}
.rightbar.spotify-side .close{position:absolute;right:12px;top:60px;z-index:10;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);border:0;color:#fff;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:grid;place-items:center}
.rightbar.spotify-side .side-actions{display:flex;gap:8px;padding:10px 14px 16px;flex-wrap:wrap;flex-shrink:0}
.rightbar.spotify-side .side-actions .btn{padding:10px 14px;font-size:13px}
.rightbar.spotify-side .ai-bio{padding:16px;font-size:13px;line-height:1.5;color:#ccc;overflow:auto;max-height:280px}
.rightbar.spotify-side .ai-bio p{margin:0}

/* Rightbar ocupa coluna própria no layout quando aberta */
@media (min-width:1180px){
  .app-shell:has(.rightbar){grid-template-columns:280px minmax(0,1fr) 360px}
  .rightbar{position:static;width:auto;border-radius:10px;top:auto;bottom:auto}
}
@media (max-width:1179px){
  .rightbar{position:fixed;right:14px;top:78px;bottom:106px;width:340px;border-radius:16px;z-index:35}
}
@media (max-width:960px){
  .side-video-box video{max-height:240px}
  .rightbar{left:10px;right:10px;width:auto;top:68px;bottom:96px}
  .app-shell:has(.rightbar){grid-template-columns:1fr}
}

/* Player: botão de vídeo destacado quando há clipe */
.has-video-btn{color:var(--green)!important;font-weight:950}

/* ===== STREAMS AO VIVO NO SIDEBAR ===== */
.side-streams { margin: 12px 0 4px; padding: 0 8px; }
.side-streams-head { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; padding: 0 8px; }
.stream-btn { width: 100%; border: 0; background: transparent; color: #ccc; padding: 10px 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 600; transition: .15s; text-align: left; }
.stream-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.stream-btn.active { background: rgba(30,215,96,.15); color: #1ed760; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; flex-shrink: 0; box-shadow: 0 0 6px #ef4444; animation: livepulse 1.5s infinite; }
.stream-btn.active .live-dot { background: #1ed760; box-shadow: 0 0 6px #1ed760; }
@keyframes livepulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.playing-wave { margin-left: auto; font-size: 12px; color: #1ed760; }

/* ===== PÁGINA DE ESTILOS (GENRES) ===== */
.genres-hero { padding: 40px 32px 24px; background: linear-gradient(180deg, #1a1a2e 0%, transparent 100%); }
.genres-hero h1 { font-size: 36px; font-weight: 900; margin-bottom: 6px; }
.genres-hero p { color: #aaa; font-size: 14px; }
.genres-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 0 24px 40px; }
.genre-card { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 1/1; cursor: pointer; transition: transform .2s; }
.genre-card:hover { transform: scale(1.04); }
.genre-card .genre-bg { position: absolute; inset: 0; }
.genre-card .genre-img { position: absolute; bottom: -10px; right: -10px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; transform: rotate(20deg); box-shadow: -4px 4px 16px rgba(0,0,0,.5); }
.genre-card h3 { position: absolute; bottom: 16px; left: 16px; font-size: 18px; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.genre-card .genre-play { position: absolute; bottom: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: #1ed760; border: 0; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(6px); transition: .2s; }
.genre-card:hover .genre-play { opacity: 1; transform: translateY(0); }

/* ===== CARDS DE TEMA NA HOME ===== */
.theme-card { position: relative; overflow: hidden; min-height: 120px; }
.theme-bg { position: absolute; inset: 0; opacity: .8; }
.theme-img { position: absolute; bottom: -8px; right: -8px; width: 70px; height: 70px; object-fit: cover; border-radius: 6px; transform: rotate(18deg); box-shadow: -4px 4px 12px rgba(0,0,0,.4); }
.theme-card h3 { position: relative; z-index: 1; font-size: 16px; font-weight: 900; padding: 14px; text-shadow: 0 2px 6px rgba(0,0,0,.5); }

/* ===== GRID ACESSO RÁPIDO (HOME LOGADO) ===== */
.hero-logged { padding: 24px 24px 8px; }
.hero-logged h1 { font-size: 28px; font-weight: 900; margin-bottom: 16px; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 700px) { .quick-grid { grid-template-columns: repeat(2,1fr); } }
.quick-card { position: relative; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.1); border: 0; border-radius: 6px; padding: 0; overflow: hidden; cursor: pointer; color: #fff; font-size: 13px; font-weight: 700; transition: background .15s; text-align: left; width: 100%; }
.quick-card:hover { background: rgba(255,255,255,.2); }
.quick-card img { width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; }
.quick-card span { flex: 1; padding-right: 8px; line-height: 1.3; }
.quick-play { position: absolute; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: #1ed760; border: 0; font-size: 14px; cursor: pointer; opacity: 0; transform: scale(0.8); transition: .2s; display: flex; align-items: center; justify-content: center; }
.quick-card:hover .quick-play { opacity: 1; transform: scale(1); }

/* VIDEO BADGE */
.video-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; backdrop-filter: blur(6px); }

/* ===== BARRA DE LOGIN NO RODAPÉ (igual Spotify) ===== */
.login-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #af2896, #509bf5);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 999;
  box-shadow: 0 -2px 20px rgba(0,0,0,.4);
}
.login-bar-left b {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
}
.login-bar-left span {
  font-size: 13px;
  color: rgba(255,255,255,.8);
}
.login-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.btn-bar-outline {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: .15s;
  white-space: nowrap;
}
.btn-bar-outline:hover { background: rgba(255,255,255,.15); }
.btn-bar-solid {
  background: #fff;
  color: #000;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: .15s;
  white-space: nowrap;
}
.btn-bar-solid:hover { transform: scale(1.04); }
/* Empurra o conteúdo para cima quando a barra aparece */
.app-frame:has(~ .login-bar) .content { padding-bottom: 80px; }
@media (max-width: 640px) {
  .login-bar { flex-direction: column; text-align: center; padding: 14px 20px; }
  .login-bar-right { width: 100%; justify-content: center; }
}

/* ===== ARTIST HERO BANNER — full width com foto de fundo ===== */
.artist-hero-banner {
  position: relative;
  width: 100%;
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  align-items: center;
  margin: 24px 0;
  overflow: hidden;
  padding: 40px;
  gap: 24px;
}
.artist-hero-img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.artist-hero-img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  border: 4px solid rgba(255,255,255,.15);
}
.artist-hero-content { position: relative; z-index: 1; }
.artist-hero-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  letter-spacing: .12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.artist-hero-name {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.artist-hero-bio {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  max-width: 500px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.artist-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-hero-play {
  background: #1ed760;
  color: #000;
  border: 0;
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: .15s;
}
.btn-hero-play:hover { transform: scale(1.05); background: #1fdf64; }
.btn-hero-follow {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.6);
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s;
}
.btn-hero-follow:hover { border-color: #fff; }
.artist-hero-count { font-size: 13px; color: rgba(255,255,255,.6); }

/* ===== FEATURED VIDEO — vídeo grande em destaque ===== */
.featured-video-section { margin: 8px 0 24px; }
.featured-video-wrap {
  position: relative;
  width: calc(100% - 48px);
  margin: 0 24px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/7;
  cursor: pointer;
  background: #111;
}
.featured-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 50%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px;
  opacity: 0;
  transition: opacity .3s;
}
.featured-video-wrap:hover .featured-video-overlay { opacity: 1; }
.featured-video-info h3 { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.featured-video-info p { font-size: 13px; color: rgba(255,255,255,.7); }
.featured-video-play {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #1ed760;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transform: scale(0.8);
  transition: transform .2s;
}
.featured-video-wrap:hover .featured-video-play { transform: scale(1); }

/* ===== PARADAS EM DESTAQUE — cards menores coloridos ===== */
.paradas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 0 24px;
}
.parada-card {
  position: relative;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  overflow: hidden;
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: filter .15s;
}
.parada-card:hover { filter: brightness(1.15); }
.parada-card:hover .parada-play { opacity: 1; transform: scale(1) translateY(0); }
.parada-icon { font-size: 20px; flex-shrink: 0; }
.parada-info { flex: 1; min-width: 0; }
.parada-info b { display: block; font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parada-info span { font-size: 12px; color: rgba(255,255,255,.7); }
.parada-img {
  position: absolute;
  right: -8px; bottom: -8px;
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: 6px;
  transform: rotate(20deg);
  box-shadow: -4px 4px 12px rgba(0,0,0,.4);
  opacity: .7;
}
.parada-play {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #1ed760;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.8) translateY(4px);
  transition: .2s;
  z-index: 2;
}

/* ===== NOW PLAYING HERO — cor dinâmica ===== */
.now-hero.stream-on {
  background: linear-gradient(135deg, #1db954 0%, #0a3d1f 100%) !important;
}

/* Radio pulse animation */
.now-hero-radio-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.now-hero-radio-art img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.radio-pulse {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(30,215,96,.3);
  animation: radio-ring 2s ease-out infinite;
}
.radio-pulse::after {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: rgba(30,215,96,.15);
  animation: radio-ring 2s ease-out infinite .5s;
}
@keyframes radio-ring {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Quick grid 3x2 */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 700px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== HOME TABS (Tudo/Músicas/Podcasts/Seguindo) ===== */
.home-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 0 8px;
  flex-wrap: wrap;
}
.home-tab {
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255,255,255,.1);
  color: #fff;
  transition: .15s;
}
.home-tab:hover { background: rgba(255,255,255,.2); }
.home-tab.active { background: #fff; color: #000; }

/* ===== QUICK ACCESS GRID — 3 colunas com capa + nome ===== */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.quick-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.1);
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: background .15s;
  text-align: left;
  width: 100%;
  height: 56px;
}
.quick-card:hover { background: rgba(255,255,255,.2); }
.quick-card img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
}
.quick-card span {
  flex: 1;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-play {
  position: absolute;
  right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #1ed760;
  border: 0;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: .2s;
  display: flex; align-items: center; justify-content: center;
  color: #000;
}
.quick-card:hover .quick-play { opacity: 1; transform: scale(1); }

/* ===== CARD HOVER COLOR EFFECT ===== */
.card { transition: background .2s, transform .2s; }
.card:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); }
.card .play { opacity: 0; transition: opacity .2s, transform .2s; }

/* ===== EMPTY FOLLOW STATE ===== */
.empty-follow {
  text-align: center;
  padding: 60px 20px;
}
.empty-follow-avatars {
  font-size: 48px;
  margin-bottom: 20px;
  letter-spacing: -8px;
}
.empty-follow h2 { font-size: 22px; margin-bottom: 10px; }
.empty-follow p { color: #aaa; font-size: 14px; margin-bottom: 20px; }

@media (max-width: 700px) {
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== CONTENT HEADER GRADIENT (igual versão velha) ===== */
.content-header-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 340px;
  z-index: 0;
  background: linear-gradient(#535353 0%, #121212 100%);
  pointer-events: none;
  transition: background .5s ease;
}
.content { position: relative; }
.content > *:not(.content-header-gradient) { position: relative; z-index: 1; }

/* ===== FAQ PAGE ===== */
.faq-hero { padding: 48px 40px 24px; }
.faq-hero h1 { font-size: 42px; font-weight: 900; margin-bottom: 8px; }
.faq-hero p { color: #aaa; font-size: 16px; }
.faq-list { padding: 0 40px 32px; max-width: 800px; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.1); padding: 18px 0; cursor: pointer; }
.faq-item h3 { font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; margin: 0; }
.faq-item h3 span { font-size: 22px; transition: transform .2s; flex-shrink: 0; margin-left: 12px; line-height: 1; }
.faq-item.open h3 span { transform: rotate(45deg); }
.faq-item p { font-size: 14px; color: #aaa; line-height: 1.7; margin: 12px 0 0; display: none; }
.faq-item.open p { display: block; }
.faq-cta { padding: 40px; text-align: center; }
.faq-cta h2 { font-size: 28px; margin-bottom: 8px; }
.faq-cta p { color: #aaa; margin-bottom: 20px; }

/* ===== ARTIST HERO BANNER ===== */
.artist-hero-banner {
  display: grid;
  grid-template-columns: minmax(0,1fr) 280px;
  align-items: center;
  padding: 48px 40px;
  gap: 32px;
  margin: 8px 0;
  cursor: pointer;
  transition: filter .2s;
}
.artist-hero-banner:hover { filter: brightness(1.08); }
.ahb-text small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); display: block; margin-bottom: 10px; }
.ahb-text h2 { font-size: clamp(32px,5vw,64px); font-weight: 900; line-height: 1; margin: 0 0 12px; }
.ahb-text p { font-size: 14px; color: rgba(255,255,255,.7); margin: 0 0 20px; max-width: 460px; }
.ahb-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ahb-cover { display: flex; justify-content: center; }
.ahb-cover img { width: 220px; height: 220px; object-fit: cover; border-radius: 50%; box-shadow: 0 20px 60px rgba(0,0,0,.6); border: 4px solid rgba(255,255,255,.15); }

/* ===== FEATURED VIDEO (sem autoplay, só capa + play) ===== */
.featured-video-section { margin: 8px 0 24px; }
.featured-video-wrap { padding: 0 24px; cursor: pointer; }
.fv-cover {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fv-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .6; }
.fv-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 50%);
}
.fv-info h3 { font-size: 22px; font-weight: 900; margin: 0 0 4px; }
.fv-info p { font-size: 13px; color: rgba(255,255,255,.7); margin: 0; }
.fv-play-btn {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #1ed760;
  color: #000;
  font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: transform .2s;
}
.featured-video-wrap:hover .fv-play-btn { transform: scale(1.1); }

@media (max-width: 700px) {
  .artist-hero-banner { grid-template-columns: 1fr; padding: 32px 20px; }
  .ahb-cover { display: none; }
}

/* ===== HOME HEADER STICKY (igual versão velha) ===== */
.home-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 24px 0;
  background: transparent;
  backdrop-filter: blur(10px);
}
.home-header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
}
/* Remove as home-tabs antigas que estavam dentro do scroll */
.home-tabs { display: none !important; }

/* ===== SPOTIFY HERO CARD (artista/álbum grande) ===== */
.spotify-hero-card {
  position: relative;
  margin: 8px 0;
  min-height: 380px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
.shc-bg { position: absolute; inset: 0; }
.shc-bg-img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.shc-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.8) 0%, transparent 60%); }
.shc-content { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 28px; padding: 40px; width: 100%; }
.shc-mini-cover { flex-shrink: 0; }
.shc-mini-img { width: 160px; height: 160px; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.7); }
.shc-mini-label { font-size: 11px; color: rgba(255,255,255,.6); text-align: center; margin-top: 6px; font-weight: 700; text-transform: uppercase; }
.shc-info { flex: 1; }
.shc-info small { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.6); text-transform: uppercase; display: block; margin-bottom: 8px; }
.shc-info h2 { font-size: clamp(28px,4vw,56px); font-weight: 900; line-height: 1; margin-bottom: 10px; }
.shc-info p { font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 20px; max-width: 460px; }
.shc-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shc-play { background: #1ed760; color: #000; border: 0; border-radius: 999px; padding: 14px 32px; font-size: 15px; font-weight: 900; cursor: pointer; transition: .15s; }
.shc-play:hover { transform: scale(1.05); }
.shc-follow { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); border-radius: 999px; padding: 12px 24px; font-size: 14px; font-weight: 700; cursor: pointer; transition: .15s; }
.shc-follow:hover { border-color: #fff; }
.shc-count { font-size: 13px; color: rgba(255,255,255,.5); }

/* ===== SPOTIFY VIDEO CARD (vídeo grande) ===== */
.spotify-video-card {
  position: relative;
  margin: 8px 0;
  aspect-ratio: 16/7;
  overflow: hidden;
  cursor: pointer;
}
.svc-bg { position: absolute; inset: 0; }
.svc-img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.svc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.svc-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.svc-mini { display: flex; align-items: center; gap: 14px; flex: 1; }
.svc-mini img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.svc-mini b { display: block; font-size: 18px; font-weight: 900; }
.svc-mini span { font-size: 13px; color: rgba(255,255,255,.6); }
.svc-play { width: 56px; height: 56px; border-radius: 50%; background: #1ed760; border: 0; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #000; flex-shrink: 0; transition: transform .2s; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.svc-play:hover, .spotify-video-card:hover .svc-play { transform: scale(1.1); }

@media (max-width: 700px) {
  .shc-content { flex-direction: column; align-items: flex-start; padding: 24px; }
  .shc-mini-img { width: 120px; height: 120px; }
  .spotify-video-card { aspect-ratio: 16/9; }
}

/* ===== ONDAS ANIMADAS (playing bars) ===== */
.playing-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  width: 16px;
}
.playing-bars i {
  display: block;
  width: 3px;
  background: #1ed760;
  border-radius: 2px;
  animation: bar-bounce 1.2s ease-in-out infinite;
}
.playing-bars i:nth-child(1){ height: 60%; animation-delay: 0s; }
.playing-bars i:nth-child(2){ height: 100%; animation-delay: .2s; }
.playing-bars i:nth-child(3){ height: 40%; animation-delay: .4s; }
.playing-bars i:nth-child(4){ height: 80%; animation-delay: .1s; }
@keyframes bar-bounce {
  0%,100% { transform: scaleY(.4); }
  50%      { transform: scaleY(1); }
}
.track-row.active .tr-num { color: #1ed760; }
.track-row.active b { color: #1ed760 !important; }
.green { color: #1ed760 !important; }

/* ===== ÁLBUM HERO — cor dinâmica ===== */
.album-hero {
  padding: 0 0 24px;
}
.album-hero-inner {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 80px 32px 24px;
}
.album-cover-wrap {
  flex-shrink: 0;
}
.album-cover-img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.album-hero-info small {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.7);
  display: block;
  margin-bottom: 6px;
}
.album-hero-info h1 {
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 12px;
}
.album-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.album-artist-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.album-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px 24px;
}
.album-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1ed760;
  color: #000;
  border: 0;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.album-play-btn:hover { transform: scale(1.06); }

/* TRACK LIST */
.tr-cover { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.tr-video-badge { font-size: 10px; background: rgba(255,255,255,.1); color: #aaa; border-radius: 99px; padding: 2px 8px; flex-shrink: 0; }
.track-row { display: grid; grid-template-columns: 32px 40px minmax(0,1fr) auto auto 36px; align-items: center; gap: 12px; padding: 8px 32px; border-radius: 6px; transition: background .15s; cursor: pointer; }
.track-row:hover { background: rgba(255,255,255,.07); }
.track-row:hover .tr-add { opacity: 1; }
.tr-add { opacity: 0; border: 0; background: transparent; color: #aaa; font-size: 20px; cursor: pointer; transition: .15s; }
.tr-add:hover { color: #fff; transform: scale(1.2); }
.tr-dur { font-size: 13px; color: #aaa; text-align: right; }

@media (max-width: 700px) {
  .album-hero-inner { flex-direction: column; padding: 40px 20px 16px; }
  .album-cover-img { width: 160px; height: 160px; }
  .track-row { grid-template-columns: 28px minmax(0,1fr) auto 28px; padding: 8px 16px; }
  .tr-cover, .tr-video-badge, .tr-dur { display: none; }
}

/* ===== BOTÃO PLAY — nunca fica vazio ===== */
.btn-play-toggle:empty::before { content: 'Tocar'; }
.album-play-btn { font-size: 22px; font-weight: 900; }

/* ===== SEGUINDO EMPTY STATE ===== */
.following-empty { display: flex; justify-content: center; }
.follow-avatars { text-align: center; padding: 60px 20px; }
.fa-avatars { display: flex; justify-content: center; margin-bottom: 24px; }
.fa-avatars img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 -12px; border: 3px solid #121212; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.follow-avatars h2 { font-size: 24px; font-weight: 900; margin-bottom: 8px; }
.follow-avatars p { color: #aaa; font-size: 14px; margin-bottom: 24px; }
.btn-follow-find { background: #fff; color: #000; border: 0; border-radius: 999px; padding: 14px 32px; font-size: 15px; font-weight: 900; cursor: pointer; transition: .15s; }
.btn-follow-find:hover { transform: scale(1.04); background: #e0e0e0; }

/* ===== LISTA DE FAIXAS — igual Spotify ===== */
.tracks-header { display: grid; grid-template-columns: 32px minmax(0,1fr) 1fr auto; gap: 12px; padding: 8px 32px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; }
.tracks-header span { font-size: 12px; color: #aaa; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* ===== ALBUM PAGE — igual Spotify ===== */
.album-page {}
.album-hero { padding: 0; }
.album-hero-inner { display: flex; align-items: flex-end; gap: 24px; padding: 80px 32px 24px; }
.album-cover-img { width: 232px; height: 232px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 60px rgba(0,0,0,.5); flex-shrink: 0; }
.album-hero-info small { font-size: 12px; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 8px; }
.album-hero-info h1 { font-size: clamp(24px,5vw,72px); font-weight: 900; line-height: 1.1; margin-bottom: 12px; }
.album-meta { display: flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,.7); flex-wrap: wrap; }
.album-artist-thumb { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.album-toolbar { display: flex; align-items: center; gap: 24px; padding: 16px 32px 24px; background: rgba(0,0,0,.2); }
.album-play-btn { width: 56px; height: 56px; border-radius: 50%; background: #1ed760; color: #000; border: 0; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s; flex-shrink: 0; }
.album-play-btn:hover { transform: scale(1.06); }
.tracks-table { padding: 0 32px 32px; }
.tracks-thead { display: grid; grid-template-columns: 40px minmax(0,3fr) minmax(0,2fr) 50px 36px; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 4px; color: #aaa; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.track-row { display: grid; grid-template-columns: 40px minmax(0,3fr) minmax(0,2fr) 50px 36px; gap: 8px; align-items: center; padding: 8px 0; border-radius: 4px; cursor: pointer; transition: background .15s; }
.track-row:hover { background: rgba(255,255,255,.07); }
.tr-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tr-cover { width: 40px; height: 40px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.tr-info { min-width: 0; }
.tr-info b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.tr-artist { font-size: 14px; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-dur { font-size: 13px; color: #aaa; text-align: right; }
.tr-add { opacity: 0; border: 0; background: transparent; color: #aaa; font-size: 20px; cursor: pointer; }
.track-row:hover .tr-add { opacity: 1; }
.tr-num { color: #aaa; font-size: 14px; text-align: center; }
.track-row.active .tr-num, .track-row.active b { color: #1ed760; }

@media (max-width:700px) {
  .album-hero-inner { flex-direction: column; padding: 40px 20px 16px; align-items: flex-start; }
  .album-cover-img { width: 160px; height: 160px; }
  .tracks-table { padding: 0 16px 24px; }
  .tracks-thead, .track-row { grid-template-columns: 32px minmax(0,1fr) 40px; }
  .tr-artist, .tr-cover, .tr-add { display: none; }
}

/* ===== TRACK PAGE ===== */
.track-page { min-height: 100vh; }
.track-hero { display: flex; align-items: flex-end; gap: 24px; padding: 80px 32px 24px; }
.track-cover { width: 232px; height: 232px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 60px rgba(0,0,0,.5); flex-shrink: 0; }
.track-hero-info { flex: 1; }
.track-hero-info small { font-size: 12px; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 8px; color: rgba(255,255,255,.7); }
.track-hero-info h1 { font-size: clamp(32px,6vw,80px); font-weight: 900; line-height: 1; margin-bottom: 12px; }
.track-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.7); flex-wrap: wrap; }
.track-artist-thumb { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.track-meta b { color: #fff; }
.track-toolbar { display: flex; align-items: center; gap: 20px; padding: 16px 32px 24px; }
.track-icon-btn { background: transparent; border: 0; color: #aaa; font-size: 22px; cursor: pointer; transition: .15s; padding: 4px; }
.track-icon-btn:hover { color: #fff; transform: scale(1.1); }
.track-lyrics { padding: 24px 32px 60px; max-width: 600px; }
.track-lyrics h2 { font-size: 24px; font-weight: 900; margin-bottom: 20px; }
.lyrics-content p { font-size: 18px; line-height: 2; color: rgba(255,255,255,.8); margin: 0; }
.lyrics-content p:empty { height: 18px; }

/* ===== MENU DE CONTEXTO ===== */
.ctx-menu {
  background: #282828;
  border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  min-width: 200px;
  padding: 4px 0;
  z-index: 9999;
}
.ctx-menu button {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 10px 16px;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  transition: background .1s;
}
.ctx-menu button:hover { background: rgba(255,255,255,.1); }
.ctx-menu hr { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 4px 0; }

@media (max-width:700px){
  .track-hero { flex-direction: column; padding: 40px 20px 16px; align-items: flex-start; }
  .track-cover { width: 160px; height: 160px; }
}

/* ===== FEATURED VIDEO — sem capa placeholder ===== */
.featured-video-section { margin: 8px 0 24px; }
.featured-video-wrap { margin: 0 24px; border-radius: 16px; overflow: hidden; cursor: pointer; position: relative; aspect-ratio: 16/7; }
.fv-bg { position: absolute; inset: 0; }
.fv-bg-img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.fv-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.2) 60%); display: flex; align-items: flex-end; justify-content: space-between; padding: 28px; }
.fv-mini { display: flex; align-items: center; gap: 16px; }
.fv-mini-cover { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fv-mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.fv-mini-info b { display: block; font-size: 18px; font-weight: 900; }
.fv-mini-info span { font-size: 13px; color: rgba(255,255,255,.7); }
.fv-play-btn { width: 56px; height: 56px; border-radius: 50%; background: #1ed760; border: 0; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #000; flex-shrink: 0; transition: transform .2s; }
.fv-play-btn:hover, .featured-video-wrap:hover .fv-play-btn { transform: scale(1.1); }

.fv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }

/* ===== ALBUM TOOLBAR BUTTONS ===== */
.album-tool-btn {
  background: transparent;
  border: 0;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: .15s;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
}
.album-tool-btn:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ── Fileira horizontal por categoria (estilo Spotify) ── */
.grid.row{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:16px;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.grid.row::-webkit-scrollbar{height:8px}
.grid.row::-webkit-scrollbar-thumb{background:#333;border-radius:8px}
.grid.row .card{flex:0 0 168px;width:168px;scroll-snap-align:start}
/* ── Artistas em bolinha ── */
.round-cover{border-radius:50% !important}
.artist-card{text-align:center}
.artist-card h3,.artist-card p{text-align:center}
.artist-card .play{right:50%;transform:translateX(50%) translateY(10px)}
.artist-card:hover .play{transform:translateX(50%)}

/* ── Corrige .hero.big quebrado (era estilo de botão por engano) ── */
.hero.big{width:auto;height:auto;min-width:0;border-radius:0;background:radial-gradient(circle at 20% 0,var(--hero),transparent 48%),linear-gradient(180deg,var(--hero),#121212);display:block;color:#fff;font-size:inherit;font-weight:inherit}
/* ── Página do artista ── */
.artist-hero{display:flex;align-items:flex-end;gap:26px;padding:56px 40px 30px;min-height:300px}
.artist-hero-img{width:200px;height:200px;border-radius:50%;overflow:hidden;flex:0 0 auto;box-shadow:0 12px 34px rgba(0,0,0,.5);background:#222}
.artist-hero-img img{width:100%;height:100%;object-fit:cover}
.artist-hero-info{min-width:0}
.artist-hero-info small{font-weight:900;letter-spacing:.05em}
.artist-hero-info h1{font-size:clamp(40px,7vw,80px);letter-spacing:-.05em;line-height:.95;margin:8px 0 10px}
.artist-hero-info p{color:#eee;margin:0 0 16px}

/* ── Ícones SVG (estilo Spotify) ── */
.ico-btn{background:transparent;border:0;cursor:pointer;color:#b3b3b3;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:7px;border-radius:50%;transition:color .15s,transform .15s}
.ico-btn:hover{color:#fff;transform:scale(1.06)}
.ico-btn svg{width:20px;height:20px;display:block}
.player .big{width:46px;height:46px;border-radius:50%;background:#fff;color:#000;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:12px;transition:transform .15s}
.player .big:hover{transform:scale(1.06)}
.player .big svg{width:20px;height:20px}
.player .now button.ico-btn{color:#1ed760}
.control-row{display:flex;align-items:center;justify-content:center;gap:16px}
.ico-btn.on,.player .ico-btn.on{color:#1ed760}
/* Play redondo verde (álbum, faixa, lado direito) */
.album-play-btn{width:56px;height:56px;border-radius:50%;background:#1ed760;color:#000;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:16px;box-shadow:0 8px 18px rgba(0,0,0,.4);transition:transform .15s,background .15s}
.album-play-btn:hover{transform:scale(1.06);background:#1fdf64}
.album-play-btn svg{width:24px;height:24px}
.track-icon-btn,.album-tool-btn{background:transparent;border:0;color:#b3b3b3;cursor:pointer;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:9px;border-radius:50%;transition:color .15s,transform .15s}
.track-icon-btn:hover,.album-tool-btn:hover{color:#fff;transform:scale(1.06)}
.track-icon-btn svg,.album-tool-btn svg{width:24px;height:24px}
.side-actions{display:flex;align-items:center;gap:14px}
.side-actions .album-play-btn{width:48px;height:48px;padding:13px}
.side-actions .album-play-btn svg{width:22px;height:22px}
.now .ico-btn svg{width:18px;height:18px}

/* ===== SPRINT 2026-06-18 — polimento + canais + rightbar rica ===== */

/* Canais temáticos */
.canais-hero{padding:48px 40px 28px;background:linear-gradient(180deg,#1f3a4f 0%,#121212 100%)}
.canais-hero h1{font-size:clamp(36px,5vw,72px);letter-spacing:-.06em;margin:0 0 10px}
.canais-hero p{color:#ccc;font-size:16px;margin:0}
.canais-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:28px 40px 60px}
.canais-loading{padding:40px;text-align:center;color:#aaa}
.canal-card{position:relative;border-radius:14px;padding:20px 16px 48px;cursor:pointer;overflow:hidden;transition:.18s ease;min-height:120px}
.canal-card:hover{transform:scale(1.035);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.canal-card h3{font-size:18px;font-weight:950;margin:0 0 6px;line-height:1.15}
.canal-card span{font-size:12px;opacity:.8}
.canal-play{position:absolute;bottom:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);color:#fff;font-size:18px;cursor:pointer;transition:.18s;display:flex;align-items:center;justify-content:center;opacity:0}
.canal-card:hover .canal-play{opacity:1;transform:scale(1.1)}
.genre-hero{padding:52px 40px 32px}
.genre-hero h1{font-size:clamp(40px,6vw,80px);letter-spacing:-.06em;margin:0 0 10px}
.genre-hero p{color:#ccc;font-size:16px;margin:0 0 20px}
@media(max-width:960px){.canais-grid{padding:16px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}

/* Rightbar artista rica */
.rb-artist-card{padding:16px}
.rb-artist-img{width:100%;max-height:200px;object-fit:cover;border-radius:14px;margin-bottom:12px;display:block}
.rb-artist-name{font-size:20px;font-weight:950;margin:0 0 8px;letter-spacing:-.03em}
.rb-artist-bio{font-size:13px;color:#ccc;line-height:1.5;margin:0 0 12px;max-height:80px;overflow:hidden}
.rb-artist-stats{font-size:12px;color:#aaa;margin-bottom:12px}
.rb-section{padding:0 16px 12px}
.rb-section h4{font-size:13px;font-weight:950;color:#aaa;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.rb-mini-list{display:flex;flex-direction:column;gap:6px}
.rb-mini-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;cursor:pointer;transition:.15s}
.rb-mini-item:hover{background:#202020}
.rb-mini-item img{width:40px;height:40px;border-radius:6px;object-fit:cover}
.rb-mini-item span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-mini-item small{font-size:11px;color:#aaa;display:block}
.rb-mini-badge{color:var(--green);font-size:13px;flex-shrink:0}

/* Micro-animações no player */
.big:hover{transform:scale(1.08)!important;transition:.15s}
.ico-btn{transition:color .15s,transform .15s}
.ico-btn:hover{color:var(--green);transform:scale(1.12)}
.ico-btn.on{color:var(--green)}
.card{transition:.18s ease}
.card:hover .play{opacity:1;transform:none;box-shadow:0 8px 24px rgba(30,215,96,.4)}

/* Barras de playing animadas */
.playing-bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.playing-bars i{display:block;width:3px;background:var(--green);border-radius:2px;animation:playbar .8s ease-in-out infinite alternate}
.playing-bars i:nth-child(2){animation-delay:.15s}
.playing-bars i:nth-child(3){animation-delay:.3s}
.playing-bars i:nth-child(4){animation-delay:.45s}
@keyframes playbar{from{height:4px}to{height:14px}}

/* Login bar (barra de baixo para não-logados) */
.login-bar{position:fixed;bottom:0;left:0;right:0;z-index:50;background:linear-gradient(90deg,#4508a5,#0f6bc5);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.login-bar-left b{display:block;font-weight:950}
.login-bar-left span{font-size:13px;color:#ddd}
.login-bar-right{display:flex;gap:10px;flex-shrink:0}
.btn-bar-outline{border:1px solid #fff;background:transparent;color:#fff;border-radius:999px;padding:12px 20px;font-weight:950;cursor:pointer;white-space:nowrap}
.btn-bar-solid{background:#fff;color:#000;border:0;border-radius:999px;padding:12px 20px;font-weight:950;cursor:pointer;white-space:nowrap}
.btn-bar-outline:hover{background:rgba(255,255,255,.15)}
.btn-bar-solid:hover{background:#ddd}
@media(max-width:640px){.login-bar{flex-direction:column;text-align:center}.login-bar-right{width:100%;justify-content:center}}

/* Ctx-menu estilo Spotify */
.ctx-menu{background:#282828;border:1px solid #3a3a3a;border-radius:10px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.6);min-width:200px;z-index:9999}
.ctx-menu button{display:block;width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:10px 14px;border-radius:7px;font-size:14px;cursor:pointer}
.ctx-menu button:hover{background:#3a3a3a}
.ctx-menu hr{border:0;border-top:1px solid #3a3a3a;margin:4px 0}

/* Side streams */
.side-streams{padding:8px 14px 12px;border-bottom:1px solid #1e1e1e}
.side-streams-head{font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.07em;color:#aaa;margin-bottom:8px}
.stream-btn{width:100%;border:0;background:transparent;color:#ddd;text-align:left;padding:9px 12px;border-radius:9px;display:flex;align-items:center;gap:9px;cursor:pointer;transition:.15s;font-size:14px}
.stream-btn:hover,.stream-btn.active{background:#1d1d1d;color:#fff}
.live-dot{width:8px;height:8px;border-radius:50%;background:#e8115b;flex-shrink:0;animation:livePulse 1.2s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}
.playing-wave{color:var(--green);font-size:12px;margin-left:auto}

/* ===== BUG FIX 2026-06-18-2 — correções pós-teste ===== */

/* BUG 1 — Texto invisível: .green !important sobrepunha cor do .btn.green */
.btn.green { color: #000 !important; }

/* BUG 4 — Player fixo no rodapé (independente de scroll) */
.player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  grid-column: unset;
  grid-row: unset;
}
/* Remove a linha de 86px do grid (player está fora do fluxo agora) */
.app-shell { grid-template-rows: minmax(0,1fr); }
/* Padding para o conteúdo não ficar escondido atrás do player fixo */
.content { padding-bottom: 96px; }
@media (max-width:960px) {
  /* Mobile: sidebar (64px) + conteúdo — player continua fixed */
  .app-shell { grid-template-rows: 64px minmax(0,1fr); }
  .player { grid-row: unset; grid-column: unset; }
}

/* ===== ANÚNCIOS — overlay entre músicas e banner topo ===== */

/* Overlay fullscreen entre músicas (estilo free tier) */
.ad-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.85); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.ad-box {
  background: #1a1a1a; border: 1px solid #333; border-radius: 18px;
  padding: 24px; max-width: 480px; width: 90%; text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
}
.ad-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #888; margin-bottom: 12px;
}
.ad-countdown { color: #1ed760; }
.ad-link { display: block; text-decoration: none; color: inherit; }
.ad-img { width: 100%; max-width: 420px; border-radius: 10px; margin-bottom: 12px; display: block; }
.ad-titulo { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 18px; }
.ad-skip {
  border: 1px solid #555; background: transparent; color: #aaa;
  border-radius: 999px; padding: 10px 24px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: .15s; margin-top: 8px;
}
.ad-skip:disabled { opacity: .4; cursor: not-allowed; }
.ad-skip:not(:disabled):hover { border-color: #fff; color: #fff; }

/* Banner topo (posição topo/lateral) */
.ad-banner {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 10px 14px; margin: 0 24px 16px;
}
.ad-banner-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #666; flex-shrink: 0;
}
.ad-banner-link { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 1; }
.ad-banner-img { height: 44px; width: auto; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.ad-banner-titulo { font-size: 13px; font-weight: 600; color: #ddd; }
.ad-banner-link:hover .ad-banner-titulo { color: #fff; }

/* ── Sistema de Spots ──────────────────────────────────────── */
.spot-overlay {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(0,0,0,.82); backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fadeIn .35s ease;
}
.spot-vinheta {
  background: radial-gradient(circle at 50% 40%, rgba(30,215,96,.18), transparent 60%), rgba(0,0,0,.9);
}
.spot-box {
  background: #1a1a1a; border: 1px solid #2e2e2e;
  border-radius: 22px; padding: 28px; max-width: 460px; width: 100%;
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: slideUp .35s ease;
}
.spot-box-vinheta {
  background: linear-gradient(135deg, #0d2818, #0a1f10);
  border-color: rgba(30,215,96,.25);
}
.spot-logo {
  width: 90px; height: 90px; object-fit: cover;
  border-radius: 20px; margin-bottom: 16px;
  box-shadow: 0 8px 30px rgba(30,215,96,.25);
}
.spot-img {
  width: 100%; max-height: 200px; object-fit: cover;
  border-radius: 14px; margin-bottom: 14px;
}
.spot-texto {
  font-size: 17px; line-height: 1.5; color: #e8e8e8;
  margin: 0 0 18px;
}
.spot-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #1ed760; margin-bottom: 14px;
}
.spot-link {
  display: inline-block; background: var(--green); color: #000;
  border-radius: 999px; padding: 10px 24px;
  font-weight: 900; font-size: 14px; margin-bottom: 16px;
  text-decoration: none; transition: transform .15s;
}
.spot-link:hover { transform: scale(1.04); }
.spot-skip {
  display: block; width: 100%; border: 1px solid #444;
  background: transparent; color: #aaa; border-radius: 999px;
  padding: 11px 24px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: .15s; margin-top: 6px;
}
.spot-skip:disabled { opacity: .4; cursor: not-allowed; }
.spot-skip:not(:disabled):hover { border-color: #fff; color: #fff; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Micro-animações (Item 7a) ──────────────────────────────── */
.card { transition: background .2s, transform .22s, box-shadow .22s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(0,0,0,.44); }
.btn { transition: transform .15s, filter .15s; }
.btn:hover { transform: scale(1.038); filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.ico-btn { transition: color .15s, transform .15s; }
.ico-btn:hover { color: var(--green); transform: scale(1.18); }
.ico-btn:active { transform: scale(.9); }
.mini { transition: background .15s; }
.mini:hover { background: #2a2a2a; }

/* Animação do coração (fav) */
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(.88); }
  100% { transform: scale(1); }
}
.ico-btn.fav-active { color: #e83155; animation: heartPop .35s ease; }

/* ── Login Google ───────────────────────────────────────────── */
.google-btn {
  background: #fff; color: #3c4043; border: 1px solid #dadce0;
  border-radius: 999px; padding: 12px 18px;
  font-weight: 700; display: flex; align-items: center;
  justify-content: center; gap: 10px; width: 100%;
  margin-bottom: 8px; transition: box-shadow .15s;
}
.google-btn:hover { box-shadow: 0 2px 12px rgba(0,0,0,.3); transform: none; filter: none; }
.auth-sep { display: flex; align-items: center; gap: 10px; color: #666; font-size: 13px; margin: 10px 0; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: #2e2e2e; }

/* ── Player fixo (garantia extra) ─────────────────────────── */
.player { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; }

/* ── Spot Pill (ducking — discreto, música continua tocando) ── */
.spot-pill {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,10,10,0.93);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 200;
  backdrop-filter: blur(12px);
  animation: pillIn .25s ease;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.spot-pill-icon { font-size: 18px; animation: pulse 1.2s ease-in-out infinite; flex-shrink: 0; }
.spot-pill-text { color: #eee; font-size: 13px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-pill-skip { background: transparent; border: 1px solid rgba(255,255,255,0.22); color: #aaa; border-radius: 12px; padding: 3px 10px; font-size: 11px; cursor: pointer; transition: border-color .15s, color .15s; flex-shrink: 0; }
.spot-pill-skip:not(:disabled):hover { border-color: #fff; color: #fff; }
.spot-pill-skip:disabled { opacity: .4; cursor: not-allowed; }
@keyframes pillIn { from { opacity:0; transform: translateX(-50%) translateY(8px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
@media (max-width: 600px) { .spot-pill { bottom: 96px; max-width: calc(100vw - 24px); } }
/* Variante premium_promo: borda laranja, sem botão pular */
.spot-pill-promo { border-color: rgba(255,165,0,0.35); }
.spot-pill-promo .spot-pill-icon { animation: none; }

/* ── Stats Banner (Item 1) ─────────────────────────────────────── */
.stats-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #0a1a0a 0%, #081408 100%);
  border: 1px solid rgba(30,215,96,0.18);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: .92rem;
  color: #ccc;
  line-height: 1.5;
}
.stats-banner strong { color: #1ed760; }
.stats-pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: #1ed760;
  box-shadow: 0 0 0 0 rgba(30,215,96,.6);
  animation: statsPulse 1.8s ease-out infinite;
}
@keyframes statsPulse {
  0%   { box-shadow: 0 0 0 0   rgba(30,215,96,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(30,215,96,0);  }
  100% { box-shadow: 0 0 0 0   rgba(30,215,96,0);  }
}

/* ── Premium Card (Item 2B) ────────────────────────────────────── */
.premium-card {
  background: linear-gradient(135deg, #0d1f0d 0%, #091409 100%);
  border: 1px solid rgba(30,215,96,0.3);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 480px;
  margin: 24px auto;
  position: relative;
  box-shadow: 0 4px 32px rgba(30,215,96,0.08);
}
.premium-card-badge {
  display: inline-block;
  background: #1ed760;
  color: #000;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 3px 12px;
  margin-bottom: 14px;
}
.premium-card-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.3;
}
.premium-card-body {
  color: #bbb;
  font-size: .93rem;
  line-height: 1.6;
  margin: 0 0 18px;
}
.premium-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.premium-benefits li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ddd;
  font-size: .9rem;
}
.premium-benefits li::before {
  content: '✓';
  color: #1ed760;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.premium-price {
  font-size: 2rem;
  font-weight: 800;
  color: #1ed760;
  margin: 0 0 20px;
  letter-spacing: -.02em;
}
.premium-price span {
  font-size: .95rem;
  font-weight: 400;
  color: #888;
  margin-left: 4px;
}
.premium-cta {
  width: 100%;
  padding: 14px;
  background: #1ed760;
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s, transform .12s;
}
.premium-cta:hover { background: #1fef6e; transform: translateY(-1px); }
.premium-cta:active { transform: translateY(0); }
.premium-already {
  margin: 0 auto;
  display: block;
  text-align: center;
  padding: 14px;
  color: #1ed760;
  font-size: .93rem;
  font-weight: 600;
  opacity: .75;
}