*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;min-height:150px;background:transparent;font-family:Inter,Segoe UI,Arial,sans-serif;overflow:hidden}.player{--pad:clamp(10px,1.35vw,20px);height:100%;min-height:150px;width:100%;display:grid;grid-template-columns:clamp(76px,8vw,112px) minmax(0,1fr) clamp(180px,18vw,280px);align-items:center;gap:clamp(8px,1.2vw,18px);padding:var(--pad);color:#fff;border:1px solid color-mix(in srgb,var(--c1) 62%,#31424e);border-radius:18px;background:radial-gradient(circle at 10% 35%,color-mix(in srgb,var(--c1) 25%,transparent),transparent 27%),radial-gradient(circle at 88% 50%,color-mix(in srgb,var(--c2) 58%,transparent),transparent 36%),linear-gradient(112deg,#050708,#12181e 53%,color-mix(in srgb,var(--c2) 84%,#000));box-shadow:inset 0 0 42px #000,0 10px 32px #0008;position:relative;isolation:isolate;overflow:hidden;transition:background 1.2s,border-color 1.2s,box-shadow 1.2s}.player:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px #ffffff30;pointer-events:none}.shine{position:absolute;z-index:-1;inset:-80% -20%;background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--c1) 20%,transparent) 49%,transparent 58%);transform:translateX(-65%)}.playing .shine{animation:shine 4.4s linear infinite}.texture{position:absolute;inset:0;z-index:-1;opacity:.18;pointer-events:none}.logo-wrap{width:clamp(68px,7.5vw,102px);aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;justify-self:center}.logo-wrap img{width:86%;height:86%;object-fit:cover;border-radius:50%;z-index:3;border:2px solid #fff9;box-shadow:0 0 0 3px var(--c1),0 0 29px color-mix(in srgb,var(--c1) 88%,transparent);transition:box-shadow 1.2s}.logo-ring{position:absolute;inset:1px;border-radius:50%;border:1px dashed #ffffffa8;animation:spin 10s linear infinite}.pulse{position:absolute;inset:0;border:2px solid var(--c1);border-radius:50%;opacity:.72;filter:drop-shadow(0 0 8px var(--c1))}.playing .pulse{animation:heart 1.02s infinite}.info{min-width:0;height:100%;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.topline{display:flex;justify-content:space-between;gap:10px;font-size:clamp(7px,.72vw,10px);font-weight:950;letter-spacing:.65px;color:#c0d0d8;white-space:nowrap}.live{color:var(--c1);transition:color 1.2s}.live i{display:inline-block;width:7px;height:7px;background:#ff2638;border-radius:50%;box-shadow:0 0 10px #ff2638;margin-right:5px;animation:blink 1s infinite}.info h1{font-size:clamp(16px,1.62vw,25px);line-height:1.08;margin:6px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 13px #000}.info p{font-size:clamp(8px,.88vw,12px);line-height:1.25;color:#e0e8ec;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.visualizer{height:clamp(52px,7vh,76px);min-height:48px;display:flex;align-items:flex-end;justify-content:center;gap:2px;overflow:hidden;padding:3px 2px 0;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.visualizer b{flex:1;max-width:7px;min-width:2px;height:8px;border-radius:5px 5px 1px 1px;background:linear-gradient(to top,color-mix(in srgb,var(--c2) 42%,#080808),var(--c1) 45%,#fff 100%);opacity:.42;box-shadow:0 0 8px color-mix(in srgb,var(--c1) 72%,transparent);transition:height .075s linear,opacity .2s,background 1.2s}.playing .visualizer b{opacity:1}.wave-line{height:13px;position:relative;overflow:hidden}.wave-line:before,.wave-line:after,.wave-line i{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:linear-gradient(90deg,transparent,var(--c1),#fff,var(--c1),transparent);filter:drop-shadow(0 0 6px var(--c1));border-radius:50%;transition:background 1.2s}.wave-line:before{transform:translateY(-3px) scaleX(.84);opacity:.5}.wave-line:after{transform:translateY(3px) scaleX(.67);opacity:.3}.playing .wave-line i{animation:wave 1s ease-in-out infinite}.controls{display:grid;grid-template-columns:auto minmax(88px,1fr) auto;align-items:center;gap:9px;min-width:0}.play-btn{width:clamp(58px,6.7vw,92px);aspect-ratio:1;border-radius:50%;border:3px solid #ffffffe0;background:radial-gradient(circle at 30% 22%,#fff 0 3%,color-mix(in srgb,var(--c1) 92%,#fff) 10%,var(--c1) 30%,color-mix(in srgb,var(--c1) 55%,#000) 76%);color:#fff;font-size:clamp(23px,2.6vw,36px);box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 34%,transparent),0 0 22px #fff8,0 0 40px var(--c1),inset 0 0 21px #fffa,inset 0 -15px 24px #0006;cursor:pointer;position:relative;transition:transform .2s,filter .2s,background 1.2s,box-shadow 1.2s;flex:none}.play-btn:before{content:"";position:absolute;inset:8%;border-radius:50%;border:1px solid #ffffff80}.play-btn:hover{transform:scale(1.07);filter:brightness(1.15)}.play-btn:active{transform:scale(.95)}.play-icon{display:block;transform:translateX(3px);text-shadow:0 2px 6px #0008}.playing .play-icon{transform:none;font-size:.8em}.heart-ring{position:absolute;inset:-10px;border:2px solid var(--c1);border-radius:50%;opacity:0}.playing .heart-ring{animation:buttonHeart 1.02s infinite}.volume-box{display:grid;grid-template-columns:34px minmax(55px,1fr);grid-template-rows:auto auto;align-items:center;gap:3px 7px;padding:7px 9px;border:1px solid #ffffff36;border-radius:14px;background:linear-gradient(145deg,#1d2a33cc,#05080acc);box-shadow:inset 0 1px #ffffff26,0 8px 18px #0007;backdrop-filter:blur(8px)}.volume-btn{grid-row:1/3;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff55;background:linear-gradient(#33424d,#070a0d);color:#fff;cursor:pointer;box-shadow:inset 0 1px #ffffff45}.volume-box input{width:100%;height:4px;accent-color:var(--c1);cursor:pointer}.volume-box span:last-child{font-size:9px;color:#b9cad3;text-align:right}.whatsapp{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff55;background:linear-gradient(#1fd66c,#087c37);color:#fff;text-decoration:none;box-shadow:0 0 15px #13c85f66}.is-transparent{background:linear-gradient(112deg,#091016c7,#111b22aa 55%,color-mix(in srgb,var(--c2) 45%,transparent));backdrop-filter:blur(16px)}
/* 10 modelos realmente distintos */
.theme-aurora{border-radius:20px}.theme-aurora .texture{background:radial-gradient(circle at 75% 25%,var(--c1),transparent 30%)}
.theme-studio{border-radius:8px;background:linear-gradient(180deg,#20272c,#090c0e 55%,#171c20)}.theme-studio .texture{opacity:.35;background:repeating-linear-gradient(90deg,transparent 0 18px,#ffffff08 19px 20px)}.theme-studio .play-btn{border-radius:16px;aspect-ratio:1}.theme-studio .logo-wrap,.theme-studio .logo-wrap img,.theme-studio .logo-ring,.theme-studio .pulse{border-radius:16px}
.theme-neon{border-radius:28px;background:#03030a;box-shadow:inset 0 0 40px color-mix(in srgb,var(--c2) 70%,#000),0 0 25px color-mix(in srgb,var(--c1) 45%,transparent)}.theme-neon .texture{opacity:.3;background:linear-gradient(90deg,transparent 49%,var(--c1) 50%,transparent 51%);background-size:34px 100%}.theme-neon .info h1{text-transform:uppercase;letter-spacing:1px}
.theme-luxury{background:linear-gradient(120deg,#080603,#2d2209 50%,#080603);border:2px solid var(--c1)}.theme-luxury:before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--c1) 45%,transparent);border-radius:12px;pointer-events:none}.theme-luxury .play-btn{border-width:5px}
.theme-wave{background:linear-gradient(110deg,#03101b,#06476a 58%,#02131e);border-radius:30px 8px 30px 8px}.theme-wave .texture{opacity:.4;background:radial-gradient(ellipse at bottom,var(--c1),transparent 60%)}.theme-wave .visualizer b{border-radius:50% 50% 2px 2px}
.theme-carbon{background:linear-gradient(135deg,#111,#252525 50%,#050505)}.theme-carbon .texture{opacity:.35;background:linear-gradient(45deg,#ffffff08 25%,transparent 25% 75%,#ffffff08 75%),linear-gradient(45deg,#ffffff08 25%,transparent 25% 75%,#ffffff08 75%);background-size:18px 18px;background-position:0 0,9px 9px}.theme-carbon{border-radius:10px}
.theme-crystal{color:#10202b;background:linear-gradient(125deg,#ffffffed,#dceff8dc 55%,color-mix(in srgb,var(--c1) 35%,#fff));box-shadow:inset 0 0 35px #fff,0 10px 25px #0004}.theme-crystal .info p,.theme-crystal .topline{color:#314653}.theme-crystal .info h1{text-shadow:none}.theme-crystal .volume-box{background:#ffffff99;border-color:#0002}.theme-crystal .volume-box span:last-child{color:#263844}
.theme-retro{border-radius:6px;background:linear-gradient(#33250c,#0e0b06);border:4px ridge color-mix(in srgb,var(--c1) 80%,#705000)}.theme-retro .visualizer b{border-radius:0;background:linear-gradient(to top,#e02112 0 22%,#ffd000 23% 68%,#42ff65 69%)}.theme-retro .info h1{font-family:Georgia,serif}
.theme-minimal{background:linear-gradient(120deg,#0d1317ee,#18242bee);border-radius:999px;padding-left:clamp(12px,2vw,28px);padding-right:clamp(12px,2vw,28px)}.theme-minimal .texture,.theme-minimal .shine{display:none}.theme-minimal .logo-wrap{width:clamp(60px,6.7vw,88px)}.theme-minimal .visualizer{height:44px}.theme-minimal .play-btn{width:clamp(52px,5.8vw,76px)}
.theme-galaxy{background:radial-gradient(circle at 15% 20%,var(--c1),transparent 18%),radial-gradient(circle at 75% 30%,#7a2cff55,transparent 25%),linear-gradient(120deg,#02020d,#11104a 55%,#030315);border-radius:24px}.theme-galaxy .texture{opacity:.7;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:19px 19px}.theme-galaxy .logo-ring{border-style:solid;box-shadow:0 0 24px var(--c1)}
@keyframes heart{0%,100%{transform:scale(.96);opacity:.7}14%{transform:scale(1.11);opacity:1}28%{transform:scale(.98)}43%{transform:scale(1.08)}68%{transform:scale(.96);opacity:.35}}@keyframes buttonHeart{0%,100%{transform:scale(.9);opacity:.08}20%{transform:scale(1.14);opacity:.95}45%{transform:scale(1.03);opacity:.48}70%{transform:scale(1.22);opacity:0}}@keyframes wave{0%,100%{transform:scaleX(.96) translateY(0)}50%{transform:scaleX(.68) translateY(-3px);opacity:.55}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{50%{opacity:.3}}@keyframes shine{to{transform:translateX(65%)}}
@media(max-width:760px){.player{grid-template-columns:68px minmax(0,1fr) 118px;gap:7px;padding:9px;border-radius:12px}.logo-wrap{width:64px}.topline>span:last-child{display:none}.visualizer{height:48px;min-height:42px}.visualizer b:nth-child(n+38){display:none}.controls{grid-template-columns:auto 36px}.volume-box{display:block;padding:0;border:0;background:none;box-shadow:none}.volume-box input,.volume-box span:last-child{display:none}.whatsapp{display:none}.play-btn{width:58px}.info h1{margin-top:5px}.theme-minimal{border-radius:18px}}
@media(max-width:430px){.player{grid-template-columns:54px minmax(0,1fr) 92px;padding:7px;gap:5px}.logo-wrap{width:50px}.play-btn{width:50px}.volume-btn{width:30px;height:30px}.visualizer{height:39px;min-height:34px}.visualizer b:nth-child(n+28){display:none}.info p{font-size:8px}.controls{gap:5px}}
/* V6 — dez composições visuais realmente diferentes */
.theme-aurora{grid-template-columns:clamp(76px,8vw,112px) minmax(0,1fr) clamp(180px,18vw,280px)}
.theme-aurora .logo-wrap{transform:translateY(0)}

.theme-studio{grid-template-columns:clamp(150px,16vw,230px) minmax(0,1fr) clamp(170px,17vw,250px);border:3px solid #39444b;border-radius:10px;padding:14px 18px}
.theme-studio .logo-wrap{width:clamp(112px,12vw,170px);border:5px ridge #84939c;background:#111;box-shadow:inset 0 0 24px #000}
.theme-studio .info{border-left:1px solid #ffffff22;padding-left:18px}
.theme-studio .visualizer{background:#050708;border:1px inset #53616a;padding:8px;height:72px}
.theme-studio .controls{padding:12px;border:1px solid #ffffff20;background:#05080b;border-radius:8px}

.theme-neon{grid-template-columns:minmax(0,1fr) clamp(120px,13vw,190px);grid-template-rows:auto 1fr;padding-left:28px}
.theme-neon .logo-wrap{grid-column:2;grid-row:1/3;width:clamp(96px,10vw,150px);border-radius:26px;transform:rotate(3deg)}
.theme-neon .info{grid-column:1;grid-row:1/3;padding-right:20px}
.theme-neon .controls{position:absolute;right:clamp(130px,15vw,220px);bottom:18px;width:clamp(250px,28vw,410px)}
.theme-neon .visualizer{height:84px}.theme-neon .wave-line{height:20px}

.theme-luxury{grid-template-columns:clamp(100px,11vw,160px) minmax(0,1fr) clamp(145px,15vw,220px);padding:22px 30px;border-radius:2px}
.theme-luxury .logo-wrap{width:clamp(88px,9vw,132px)}
.theme-luxury .info{text-align:center}.theme-luxury .topline{justify-content:center;gap:34px}.theme-luxury .visualizer{height:64px;max-width:620px;margin:auto;width:100%}
.theme-luxury .controls{display:flex;flex-direction:column;justify-content:center}.theme-luxury .volume-box{width:100%}

.theme-wave{grid-template-columns:clamp(90px,10vw,145px) minmax(0,1fr) clamp(210px,22vw,330px);border-radius:44px 6px 44px 6px;padding:18px 28px}
.theme-wave .logo-wrap{align-self:end}.theme-wave .info{justify-content:flex-start;padding-top:10px}.theme-wave .visualizer{height:82px;transform:skewX(-8deg)}
.theme-wave .controls{align-self:end;margin-bottom:10px}.theme-wave .play-btn{border-radius:50% 30% 50% 30%;transform:rotate(-8deg)}

.theme-carbon{grid-template-columns:clamp(82px,9vw,125px) clamp(220px,25vw,390px) minmax(0,1fr);border-radius:12px;padding:16px 22px}
.theme-carbon .info{grid-column:3}.theme-carbon .controls{grid-column:2;grid-row:1;display:flex;justify-content:center}.theme-carbon .logo-wrap{grid-column:1;grid-row:1}.theme-carbon .visualizer{height:78px}.theme-carbon .play-btn{border-radius:12px;transform:rotate(45deg)}.theme-carbon .play-icon{transform:rotate(-45deg) translateX(2px)}.theme-carbon.playing .play-icon{transform:rotate(-45deg)}

.theme-crystal{grid-template-columns:clamp(150px,16vw,240px) minmax(0,1fr) clamp(210px,22vw,320px);border-radius:36px;padding:10px 30px}
.theme-crystal .logo-wrap{width:clamp(110px,12vw,180px)}.theme-crystal .info h1{font-size:clamp(24px,2.4vw,38px)}.theme-crystal .visualizer{height:54px}.theme-crystal .play-btn{border-radius:24px;background:#fff;color:#111;box-shadow:0 12px 26px #3d536055}.theme-crystal .controls{background:#ffffff70;border-radius:28px;padding:10px}

.theme-retro{grid-template-columns:clamp(130px,14vw,210px) minmax(0,1fr) clamp(150px,15vw,220px);padding:18px 24px}
.theme-retro .logo-wrap{width:clamp(105px,11vw,165px);border-radius:8px}.theme-retro .logo-wrap img,.theme-retro .logo-ring,.theme-retro .pulse{border-radius:8px}.theme-retro .info{background:#090703;border:4px inset #6a4b12;padding:9px 14px}.theme-retro .visualizer{height:72px}.theme-retro .controls{display:flex;flex-direction:column}.theme-retro .play-btn{border-radius:8px;width:74px}.theme-retro .volume-box{width:100%;border-radius:4px}

.theme-minimal{grid-template-columns:clamp(100px,11vw,170px) minmax(0,1fr) clamp(300px,31vw,470px);padding:8px 26px}
.theme-minimal .logo-wrap{display:none}.theme-minimal .info{padding-left:4px}.theme-minimal .info h1{font-size:clamp(22px,2.2vw,34px)}.theme-minimal .visualizer{height:38px}.theme-minimal .controls{background:#0008;border-radius:999px;padding:7px 12px}.theme-minimal .play-btn{border-radius:18px;width:68px}.theme-minimal .volume-box{border-radius:999px}
.theme-minimal:before{content:'▶';display:grid;place-items:center;width:76px;height:76px;border-radius:22px;background:#fff;color:#000;font-size:34px;box-shadow:0 12px 30px #0005}

.theme-galaxy{grid-template-columns:minmax(0,1fr) clamp(110px,12vw,180px) clamp(170px,18vw,270px);padding:18px 28px}
.theme-galaxy .info{grid-column:1}.theme-galaxy .logo-wrap{grid-column:2;width:clamp(96px,10vw,150px)}.theme-galaxy .controls{grid-column:3}.theme-galaxy.playing .logo-wrap{animation:danceLogo 1.6s ease-in-out infinite}.theme-galaxy.playing .info h1{animation:danceText 1.25s ease-in-out infinite}.theme-galaxy .visualizer{height:88px}.theme-galaxy .play-btn{border-radius:38% 62% 44% 56% / 54% 44% 56% 46%;animation:blob 5s linear infinite}
@keyframes danceLogo{0%,100%{transform:translateY(0) rotate(-2deg)}25%{transform:translateY(-8px) rotate(3deg)}50%{transform:translateY(2px) rotate(-3deg)}75%{transform:translateY(-5px) rotate(2deg)}}
@keyframes danceText{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@keyframes blob{0%,100%{border-radius:38% 62% 44% 56% / 54% 44% 56% 46%}50%{border-radius:62% 38% 57% 43% / 40% 61% 39% 60%}}
@media(max-width:760px){.theme-studio,.theme-neon,.theme-luxury,.theme-wave,.theme-carbon,.theme-crystal,.theme-retro,.theme-minimal,.theme-galaxy{grid-template-columns:64px minmax(0,1fr) 118px;grid-template-rows:1fr;padding:9px}.theme-studio .logo-wrap,.theme-neon .logo-wrap,.theme-luxury .logo-wrap,.theme-wave .logo-wrap,.theme-carbon .logo-wrap,.theme-crystal .logo-wrap,.theme-retro .logo-wrap,.theme-galaxy .logo-wrap{grid-column:1;grid-row:1;width:60px;transform:none;align-self:center}.theme-studio .info,.theme-neon .info,.theme-luxury .info,.theme-wave .info,.theme-carbon .info,.theme-crystal .info,.theme-retro .info,.theme-minimal .info,.theme-galaxy .info{grid-column:2;grid-row:1;padding:0;text-align:left;background:none;border:0}.theme-studio .controls,.theme-neon .controls,.theme-luxury .controls,.theme-wave .controls,.theme-carbon .controls,.theme-crystal .controls,.theme-retro .controls,.theme-minimal .controls,.theme-galaxy .controls{grid-column:3;grid-row:1;position:static;width:auto;margin:0;padding:0;background:none;display:grid;grid-template-columns:auto 36px}.theme-minimal:before{display:none}.theme-minimal .logo-wrap{display:grid}.theme-luxury .topline{justify-content:space-between}.theme-carbon .play-btn{transform:none}.theme-carbon .play-icon,.theme-carbon.playing .play-icon{transform:none}.theme-galaxy.playing .logo-wrap{animation:danceLogo 1.6s ease-in-out infinite}}
