*{box-sizing:border-box}html,body{margin:0;width:100%;height:128px;overflow:hidden;background:transparent;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#fff}.player{--theme:#50e6ff;--bg1:#050812;--bg2:#10162a;--bg3:#05070c;--button-bg:#fff;--button-fg:#06080d;position:relative;width:calc(100% - 4px);height:124px;margin:2px;display:grid;grid-template-columns:88px minmax(260px,1fr) 170px 98px;grid-template-areas:"left brand fx controls";overflow:hidden;isolation:isolate;background:linear-gradient(125deg,var(--bg1),var(--bg2),var(--bg3));border:1px solid #ffffff20;box-shadow:0 14px 36px #0007;color:#fff;transition:.6s ease}.player:before,.player:after,.ambient-bg,.theme-layer,.weather-layer{content:"";position:absolute;inset:0;pointer-events:none}.ambient-bg{z-index:0;background:radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--theme) 28%,transparent),transparent 30%),radial-gradient(circle at 86% 75%,color-mix(in srgb,var(--theme) 16%,transparent),transparent 36%);opacity:.55}.theme-layer{z-index:1}.weather-layer{z-index:2;overflow:hidden}.left,.brand,.fx,.controls{position:relative;z-index:4;min-width:0}.left{grid-area:left;display:flex;align-items:center;justify-content:center}.brand{grid-area:brand;display:flex;flex-direction:column;justify-content:center;padding:9px 14px}.fx{grid-area:fx;display:flex;align-items:center;justify-content:center;overflow:hidden}.controls{grid-area:controls;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.identity{display:flex;align-items:center;gap:11px;min-width:0}.logo{width:58px;height:58px;flex:0 0 58px;object-fit:contain;padding:4px;background:#ffffff0d;border:1px solid #ffffff25}.logo.fallback{display:grid;place-items:center;font-size:25px}.texts{min-width:0;overflow:hidden}.theme-tag{display:inline-flex;max-width:100%;padding:3px 8px;font-size:8px;line-height:1;font-weight:950;letter-spacing:1.35px;text-transform:uppercase;white-space:nowrap}.texts strong{display:block;margin-top:4px;font-size:19px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.marquee{height:23px;margin-top:3px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.marquee-track{width:max-content;display:flex;gap:42px;animation:marq 19s linear infinite}.marquee-track span{font-size:13px;font-weight:750;line-height:23px;white-space:nowrap;text-shadow:0 1px 3px #0009}@keyframes marq{to{transform:translateX(calc(-50% - 21px))}}.play{position:relative;width:60px;height:60px;border:0;background:var(--button-bg);color:var(--button-fg);display:grid;place-items:center;cursor:pointer;font-size:23px;font-weight:950;transition:.22s ease;box-shadow:0 10px 24px #0008}.play:active{transform:scale(.94)}.pausemark{display:none}.player:not(.paused) .playmark{display:none}.player:not(.paused) .pausemark{display:inline}.visual-core{position:absolute;width:98px;height:98px;display:grid;place-items:center}.disc,.orbit,.wave-line{position:absolute;display:none}.bars{position:absolute;inset:25px 5px;display:flex;align-items:center;justify-content:center;gap:2px}.bar{width:3px;height:14%;min-height:3px;border-radius:8px;background:linear-gradient(to top,var(--theme),#fff);box-shadow:0 0 7px color-mix(in srgb,var(--theme) 65%,transparent);animation:eq .42s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-19ms);transform-origin:center bottom}.player.paused .bar{height:10%;opacity:.14;animation-play-state:paused;box-shadow:none}@keyframes eq{0%{height:12%;transform:scaleY(.75)}100%{height:92%;transform:scaleY(1)}}.live-dot{width:8px;height:8px;border-radius:50%;background:#ff314f;box-shadow:0 0 12px #ff314f}.controls>b{font-size:9px;letter-spacing:1.2px}.vrow{display:flex;gap:5px;font-size:9px}.controls input{width:70px;accent-color:var(--theme)}.onair-program{position:absolute;right:9px;bottom:5px;display:flex;gap:6px;align-items:center;padding:4px 7px;border-radius:9px;background:#0007;font-size:9px;backdrop-filter:blur(6px)}.onair-program[hidden]{display:none}.host-photo{width:26px;height:26px;border-radius:50%;object-fit:cover}.onair-program b,.onair-program small{display:block;white-space:nowrap}.heartbeat-logo{animation:logoBeat 1.7s ease-in-out infinite}.player.paused .heartbeat-logo{animation-play-state:paused}@keyframes logoBeat{0%,100%{transform:scale(1)}18%{transform:scale(1.045)}36%{transform:scale(1)}54%{transform:scale(1.025)}}
/* CLIMA ALEATÓRIO - criado via JS; só anima tocando */
.weather-layer .rain{position:absolute;width:2px;height:22px;background:linear-gradient(#ffffff00,#bdefffdd);transform:rotate(11deg);animation:rainFall .72s linear infinite;opacity:.72}.player.paused .weather-layer .rain{animation-play-state:paused;opacity:0}@keyframes rainFall{from{transform:translateY(-34px) rotate(11deg)}to{transform:translateY(155px) rotate(11deg)}}.weather-layer .snow{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;filter:blur(.25px);box-shadow:0 0 8px #cfefff;animation:snowFall 4.2s linear infinite;opacity:.82}.player.paused .weather-layer .snow{animation-play-state:paused;opacity:0}@keyframes snowFall{0%{transform:translate(0,-15px) rotate(0)}50%{transform:translate(15px,62px) rotate(120deg)}100%{transform:translate(-6px,145px) rotate(240deg)}}.weather-layer .sun{position:absolute;right:7%;top:-26px;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#ffe779 24%,#ff9f2f 49%,#ff9f2f00 70%);filter:drop-shadow(0 0 18px #ffc14a);animation:sunPulse 2.2s ease-in-out infinite;opacity:.86}.player.paused .weather-layer .sun{animation-play-state:paused;opacity:0}@keyframes sunPulse{50%{transform:scale(1.15);filter:drop-shadow(0 0 30px #ffd45f)}}.weather-layer .lightning{position:absolute;inset:0;background:linear-gradient(112deg,transparent 0 43%,#fff 45%,#bfe9ff 46%,transparent 49%);opacity:0;animation:flash 2.6s steps(1) infinite}.player.paused .weather-layer .lightning{animation-play-state:paused;opacity:0}@keyframes flash{0%,76%,80%,100%{opacity:0}77%{opacity:.88}78%{opacity:.12}79%{opacity:.62}}
/* 01 - TITANIUM BLADE: lâmina metálica assimétrica */
.model-1{grid-template-columns:98px minmax(250px,1fr) 185px 96px;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);border:0;background:linear-gradient(112deg,#05070a,#1d222a 28%,#080b10 61%,#161b22);box-shadow:inset 0 1px #ffffff30,inset 0 -1px #000}.model-1:before{z-index:2;inset:5px;border:1px solid color-mix(in srgb,var(--theme) 62%,#fff);clip-path:inherit;opacity:.55}.model-1 .left{background:linear-gradient(180deg,#ffffff09,#0006);border-right:3px solid var(--theme)}.model-1 .play{border-radius:9px;box-shadow:0 0 0 5px #0008,0 0 24px color-mix(in srgb,var(--theme) 60%,transparent)}.model-1 .logo{border-radius:8px}.model-1 .theme-tag{border-left:3px solid var(--theme);background:#ffffff0b}.model-1 .bars{transform:skewX(-9deg)}
/* 02 - NEON RING: cápsula com halo central */
.model-2{grid-template-columns:minmax(270px,1fr) 200px 96px 96px;grid-template-areas:"brand fx controls left";border-radius:64px;background:radial-gradient(circle at 72% 50%,color-mix(in srgb,var(--theme) 22%,transparent),transparent 23%),linear-gradient(90deg,#05070e,#0c1020,#05070b);border:2px solid color-mix(in srgb,var(--theme) 68%,#fff);box-shadow:0 0 26px color-mix(in srgb,var(--theme) 35%,transparent),inset 0 0 30px #000}.model-2 .play{border-radius:50%;box-shadow:0 0 0 7px color-mix(in srgb,var(--theme) 18%,transparent),0 0 32px color-mix(in srgb,var(--theme) 60%,transparent)}.model-2 .logo{border-radius:50%}.model-2 .bars{inset:19px 14px;border-radius:50%;padding:18px}.model-2 .bar{width:2px}.model-2 .theme-tag{border-radius:30px;background:var(--theme);color:#061015}
/* 03 - BROADCAST CONSOLE: mesa de rádio realista */
.model-3{grid-template-columns:128px minmax(260px,1fr) 100px 92px;grid-template-areas:"fx brand controls left";border-radius:5px;background:linear-gradient(180deg,#323740 0 12%,#101318 13% 68%,#080a0e 69%);border:1px solid #777d88;box-shadow:inset 0 1px #ccd1da66,inset 0 -2px #000}.model-3 .fx{border-right:1px solid #575d67;background:repeating-linear-gradient(90deg,#11151a 0 5px,#171c22 5px 10px)}.model-3 .disc{display:block;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle,#111 0 7px,var(--theme) 8px 12px,#050505 13px 24px,#292929 25px 27px,#060606 28px 40px);border:2px solid #8b929d;box-shadow:0 8px 16px #000,inset 0 0 6px #fff2;animation:spin 3.4s linear infinite}.player.paused.model-3 .disc{animation-play-state:paused}.model-3 .bars{display:none}.model-3 .play{border-radius:5px}.model-3 .brand{border-left:5px solid var(--theme)}.model-3 .logo,.model-3 .theme-tag{border-radius:3px}@keyframes spin{to{transform:rotate(360deg)}}
/* 04 - CRYSTAL WAVE: vidro translúcido com onda */
.model-4{grid-template-columns:90px minmax(270px,1fr) 190px 95px;border-radius:28px;background:linear-gradient(120deg,#ffffff10,#ffffff04 44%,color-mix(in srgb,var(--theme) 10%,transparent));backdrop-filter:blur(20px) saturate(150%);border:1px solid #ffffff55;box-shadow:inset 0 1px #ffffff55,0 14px 34px #0004}.model-4:after{z-index:2;top:auto;height:44px;background:radial-gradient(80% 70% at 20% 100%,color-mix(in srgb,var(--theme) 38%,transparent),transparent 70%);animation:waveGlow 2.4s ease-in-out infinite}.model-4 .play{border-radius:22px;background:#ffffffef}.model-4 .logo{border-radius:19px}.model-4 .bars{opacity:.38}.model-4 .theme-tag{border-radius:20px;background:#ffffff13;border:1px solid #ffffff25}@keyframes waveGlow{50%{transform:translateX(8%);opacity:.55}}
/* 05 - BLACK DIAMOND: facetado luxo escuro */
.model-5{grid-template-columns:100px minmax(250px,1fr) 180px 96px;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);border:0;background:linear-gradient(135deg,#020204,#1a1a20 30%,#09090d 60%,#25252d);box-shadow:inset 0 0 0 2px #ffffff13}.model-5:before{z-index:1;background:linear-gradient(135deg,transparent 0 27%,#ffffff0b 28% 29%,transparent 30% 63%,#ffffff08 64% 65%,transparent 66%)}.model-5 .left{border-right:1px solid #ffffff18}.model-5 .play{transform:rotate(45deg);border-radius:10px}.model-5 .play span{transform:rotate(-45deg)}.model-5 .logo{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:0}.model-5 .theme-tag{background:linear-gradient(90deg,var(--theme),#fff);color:#09090d;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%)}
/* 06 - HYPER GRID: cyber HUD */
.model-6{grid-template-columns:84px 150px minmax(250px,1fr) 96px;grid-template-areas:"left fx brand controls";border-radius:0;border:0;background:#02060a}.model-6:before{z-index:1;background-image:linear-gradient(color-mix(in srgb,var(--theme) 17%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--theme) 17%,transparent) 1px,transparent 1px);background-size:14px 14px;opacity:.55}.model-6:after{z-index:2;inset:7px;border:1px solid var(--theme);clip-path:polygon(0 0,100% 0,100% 72%,92% 100%,0 100%)}.model-6 .play,.model-6 .logo,.model-6 .theme-tag{border-radius:0}.model-6 .play{clip-path:polygon(15% 0,100% 0,100% 75%,75% 100%,0 100%,0 15%);box-shadow:none}.model-6 .brand{border-top:2px solid var(--theme);border-bottom:2px solid var(--theme)}.model-6 .bars{opacity:.9}
/* 07 - VELVET CROWN: luxo vinho/dourado */
.model-7{grid-template-columns:96px minmax(270px,1fr) 175px 96px;border-radius:18px;background:radial-gradient(circle at 40% -70%,#ffffff22,transparent 43%),linear-gradient(115deg,#18050d,#3b0d22 38%,#10060c 72%,#241008);border:1px solid #d7b36b88;box-shadow:inset 0 0 0 2px #0008,0 14px 32px #0008}.model-7:after{z-index:2;inset:5px;border:1px solid #d7b36b44;border-radius:14px}.model-7 .play{border-radius:50%;background:linear-gradient(145deg,#f9df9d,#b47a28);color:#271400;box-shadow:0 0 0 4px #5b3516,0 0 18px #f1c76788}.model-7 .logo{border-radius:50%;border:1px solid #d6b36b88}.model-7 .theme-tag{background:#d7b36b;color:#2a1608;border-radius:3px}.model-7 .bar{background:linear-gradient(to top,#9c6425,#ffe8a5)}
/* 08 - PULSE TUNNEL: túnel luminoso */
.model-8{grid-template-columns:92px minmax(250px,1fr) 220px 88px;border-radius:14px;background:linear-gradient(90deg,#05050a,#111329,#05050a);border:1px solid color-mix(in srgb,var(--theme) 50%,#fff)}.model-8 .fx:before,.model-8 .fx:after{content:"";position:absolute;border:2px solid var(--theme);border-radius:50%;animation:tunnel 1.2s ease-out infinite;opacity:.8}.model-8 .fx:after{animation-delay:-.6s}.player.paused.model-8 .fx:before,.player.paused.model-8 .fx:after{animation-play-state:paused;opacity:.08}@keyframes tunnel{from{width:18px;height:18px;opacity:.9}to{width:180px;height:100px;opacity:0}}.model-8 .play{border-radius:50%}.model-8 .logo{border-radius:13px}.model-8 .theme-tag{border:1px solid var(--theme);background:#0008;border-radius:4px}
/* 09 - ICE EDGE: gelo azul cortado */
.model-9{grid-template-columns:86px minmax(270px,1fr) 185px 96px;clip-path:polygon(0 0,95% 0,100% 20%,97% 52%,100% 100%,5% 100%,0 78%,3% 43%);border:0;background:linear-gradient(120deg,#e9f9ff20,#0a1f30 34%,#07101b 70%,#bddfff20);box-shadow:inset 0 0 0 1px #d8f6ff77}.model-9:before{z-index:1;background:linear-gradient(145deg,transparent 15%,#dff8ff16 16% 17%,transparent 18% 45%,#dff8ff12 46% 47%,transparent 48%)}.model-9 .play{clip-path:polygon(50% 0,100% 24%,92% 82%,50% 100%,8% 82%,0 24%);border-radius:0}.model-9 .logo{clip-path:polygon(50% 0,100% 18%,92% 85%,50% 100%,8% 85%,0 18%);border:0}.model-9 .theme-tag{background:#dff7ff;color:#08202d;clip-path:polygon(0 0,100% 0,92% 100%,7% 100%)}
/* 10 - REDLINE RACING: painel esportivo */
.model-10{grid-template-columns:96px minmax(260px,1fr) 185px 98px;border-radius:10px;background:linear-gradient(110deg,#08090c,#1b1e24 43%,#08090c);border:1px solid #3c4148;box-shadow:inset 0 -4px #000}.model-10:before{z-index:2;top:auto;height:5px;background:linear-gradient(90deg,#ff1f3d 0 22%,transparent 22% 27%,#ff1f3d 27% 54%,transparent 54% 59%,#ff1f3d 59%)}.model-10 .left{background:repeating-linear-gradient(135deg,#ffffff08 0 6px,transparent 6px 12px)}.model-10 .play{border-radius:8px;background:#ff2441;color:#fff;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}.model-10 .logo{border-radius:7px}.model-10 .theme-tag{background:#ff2441;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}.model-10 .bar{background:linear-gradient(to top,#ff213e,#fff)}
/* 11 - ANALOG VU: medidores clássicos */
.model-11{grid-template-columns:92px minmax(250px,1fr) 230px 90px;border-radius:12px;background:linear-gradient(180deg,#5d4b36 0 9%,#21190f 10% 100%);border:2px solid #8e744e;box-shadow:inset 0 0 0 2px #120e09}.model-11 .fx{background:linear-gradient(#efe6c9,#cdbc8f);margin:14px 8px;border-radius:5px;border:2px solid #786f59;box-shadow:inset 0 0 12px #7b6d4c55}.model-11 .bars{inset:21px 18px;align-items:flex-end}.model-11 .bar{background:#322414;box-shadow:none;border-radius:1px}.model-11 .play{border-radius:50%;background:radial-gradient(circle,#4b3925,#18110b);color:#f4dca5;border:2px solid #9f8051}.model-11 .logo{border-radius:50%;background:#1a130c}.model-11 .theme-tag{background:#d0b578;color:#2a2014;border-radius:2px}
/* 12 - OLED FLOAT: minimalista preto absoluto */
.model-12{grid-template-columns:minmax(290px,1fr) 180px 80px 88px;grid-template-areas:"brand fx controls left";border-radius:24px;background:#010204;border:1px solid #ffffff12;box-shadow:0 16px 40px #000b}.model-12 .ambient-bg{opacity:.24}.model-12 .play{width:54px;height:54px;border-radius:50%;background:var(--theme);box-shadow:0 0 28px color-mix(in srgb,var(--theme) 55%,transparent)}.model-12 .logo{border-radius:16px;background:#ffffff06;border-color:#ffffff12}.model-12 .theme-tag{background:transparent;color:var(--theme);padding-left:0}.model-12 .controls{opacity:.62}.model-12 .bars{opacity:.72}
/* 13 - LASER FRAME: moldura laser em movimento */
.model-13{grid-template-columns:88px minmax(260px,1fr) 195px 96px;border-radius:7px;background:#05060a;border:0}.model-13:before{z-index:2;inset:3px;border:2px solid transparent;border-image:linear-gradient(90deg,var(--theme),#fff,var(--theme)) 1;animation:laserHue 1.5s linear infinite}.player.paused.model-13:before{animation-play-state:paused;opacity:.35}@keyframes laserHue{50%{filter:hue-rotate(90deg);transform:scaleX(.995)}}.model-13 .left{border-right:1px solid #ffffff15}.model-13 .play{border-radius:4px;box-shadow:0 0 25px var(--theme)}.model-13 .logo{border-radius:4px}.model-13 .theme-tag{background:var(--theme);color:#05060a;border-radius:2px}
/* 14 - EMERALD ARC: arcos orgânicos */
.model-14{grid-template-columns:94px minmax(255px,1fr) 205px 92px;border-radius:38px 12px 38px 12px;background:linear-gradient(120deg,#03120d,#073a28 36%,#04100c 72%,#0b1d17);border:1px solid #4dffb966;box-shadow:inset 0 0 28px #00ff9d10}.model-14 .fx:before,.model-14 .fx:after{content:"";position:absolute;width:150px;height:70px;border:3px solid var(--theme);border-left-color:transparent;border-right-color:transparent;border-radius:50%;animation:arcSpin 1.2s linear infinite}.model-14 .fx:after{width:112px;height:50px;animation-direction:reverse}.player.paused.model-14 .fx:before,.player.paused.model-14 .fx:after{animation-play-state:paused;opacity:.16}@keyframes arcSpin{to{transform:rotate(360deg)}}.model-14 .play{border-radius:50% 18% 50% 18%;background:#72ffc4}.model-14 .logo{border-radius:50% 20%}.model-14 .theme-tag{border-radius:20px;background:#103f2d;color:#9bffd5;border:1px solid #5effbb55}
/* 15 - SUNSET MIXER: mesa quente com faders */
.model-15{grid-template-columns:92px minmax(250px,1fr) 210px 96px;border-radius:9px;background:linear-gradient(115deg,#24110b,#5a2119 33%,#2b0d20 66%,#10101b);border:1px solid #ff9f5b66}.model-15 .fx{background:repeating-linear-gradient(90deg,transparent 0 16px,#ffffff0c 16px 17px)}.model-15 .bars{align-items:flex-end;padding-bottom:8px}.model-15 .bar:nth-child(3n){background:#ffb148}.model-15 .bar:nth-child(3n+1){background:#ff5e54}.model-15 .bar:nth-child(3n+2){background:#d85cff}.model-15 .play{border-radius:10px;background:linear-gradient(145deg,#ffbe56,#ff4c62);color:#fff}.model-15 .logo{border-radius:12px}.model-15 .theme-tag{background:linear-gradient(90deg,#ffb353,#f05b8a);color:#1a0b0d;border-radius:3px}
/* 16 - SKY GLASS: clean premium azul claro */
.model-16{grid-template-columns:minmax(280px,1fr) 175px 95px 95px;grid-template-areas:"brand fx controls left";border-radius:22px;background:linear-gradient(120deg,#eaf8ff18,#d8efff0b,#ffffff08);backdrop-filter:blur(16px);border:1px solid #ccefff55;box-shadow:inset 0 1px #ffffff66,0 12px 30px #0004}.model-16 .play{border-radius:18px;background:#eaf8ff;color:#0b2032;box-shadow:0 8px 20px #0005,0 0 0 5px #bdeeff1c}.model-16 .logo{border-radius:18px}.model-16 .theme-tag{background:#dff6ff;color:#123047;border-radius:20px}.model-16 .bar{background:linear-gradient(to top,#72d9ff,#fff)}
/* 17 - ROYAL GOLD: assinatura ouro/preto */
.model-17{grid-template-columns:110px minmax(250px,1fr) 175px 96px;border-radius:0;background:linear-gradient(110deg,#050505,#16120b 35%,#050505 75%,#1e1709);border:3px double #d6a83c;box-shadow:0 14px 34px #000a}.model-17:before{z-index:1;background:linear-gradient(135deg,transparent 0 48%,#d6a83c12 49% 51%,transparent 52%)}.model-17 .left{border-right:1px solid #d6a83c55}.model-17 .play{border-radius:50%;background:radial-gradient(circle,#ffeaa4,#c38b18);color:#1c1305;box-shadow:0 0 0 5px #2e220e,0 0 25px #e8b93d55}.model-17 .logo{border-radius:50%;border-color:#d6a83c66}.model-17 .theme-tag{background:#d6a83c;color:#1b1307}.model-17 .bar{background:linear-gradient(to top,#a87919,#ffe99e)}
/* 18 - CARBON FORCE: fibra de carbono agressiva */
.model-18{grid-template-columns:94px minmax(255px,1fr) 195px 96px;clip-path:polygon(0 0,94% 0,100% 28%,100% 100%,6% 100%,0 72%);border:0;background-color:#090b0d;background-image:linear-gradient(45deg,#ffffff08 25%,transparent 25%),linear-gradient(-45deg,#ffffff08 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff08 75%),linear-gradient(-45deg,transparent 75%,#ffffff08 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.model-18:after{z-index:1;background:linear-gradient(90deg,color-mix(in srgb,var(--theme) 18%,transparent),transparent 35%,transparent 65%,color-mix(in srgb,var(--theme) 18%,transparent))}.model-18 .play{border-radius:4px;transform:skewX(-10deg);background:var(--theme)}.model-18 .play span{transform:skewX(10deg)}.model-18 .logo{border-radius:4px;transform:skewX(-5deg)}.model-18 .theme-tag{transform:skewX(-10deg);background:var(--theme);color:#080b0d}.model-18 .theme-tag::first-letter{transform:skewX(10deg)}
/* 19 - CITY SPECTRUM: skyline de equalizador */
.model-19{grid-template-columns:88px minmax(250px,1fr) 235px 92px;border-radius:15px;background:linear-gradient(180deg,#081323,#07101c 60%,#02060b);border:1px solid #4cc9ff44}.model-19 .fx{align-items:flex-end}.model-19 .bars{inset:27px 7px 10px;align-items:flex-end;background:linear-gradient(to top,#071a30 0 22%,transparent 22%)}.model-19 .bar{width:4px;border-radius:1px 1px 0 0;background:linear-gradient(to top,#3b86ff,#7ef4ff,#fff)}.model-19 .play{border-radius:50%;background:#8cecff;color:#07111d;box-shadow:0 0 25px #55caff55}.model-19 .logo{border-radius:11px}.model-19 .theme-tag{background:#0a2742;color:#8eeaff;border:1px solid #50cfff55;border-radius:4px}
/* 20 - GHOST LUXE: quase invisível, flutuante */
.model-20{grid-template-columns:minmax(300px,1fr) 170px 88px 92px;grid-template-areas:"brand fx controls left";border-radius:36px;background:linear-gradient(120deg,#ffffff08,#ffffff02,color-mix(in srgb,var(--theme) 6%,transparent));backdrop-filter:blur(24px) saturate(160%);border:1px solid #ffffff33;box-shadow:inset 0 1px #ffffff30,0 16px 36px #0003}.model-20 .ambient-bg{opacity:.18}.model-20 .play{border-radius:50%;background:#ffffffdd;color:#0c1016;box-shadow:0 7px 24px #0005,0 0 0 8px #ffffff08}.model-20 .logo{border-radius:50%;background:#ffffff08;border-color:#ffffff1c}.model-20 .theme-tag{background:#ffffff0a;border:1px solid #ffffff20;border-radius:30px}.model-20 .bars{opacity:.25}
/* intensidade */.fx-low .bar{animation-duration:.85s;opacity:.55}.fx-medium .bar{animation-duration:.58s}.fx-high .bar{animation-duration:.34s}.fx-high:not(.paused) .fx{filter:saturate(1.2)}.is-transparent{background:linear-gradient(120deg,#ffffff08,#ffffff02,color-mix(in srgb,var(--theme) 5%,transparent))!important;backdrop-filter:blur(18px);border-color:#ffffff38!important}
@media(max-width:760px){.player{grid-template-columns:82px minmax(220px,1fr) 130px 82px}.logo{width:52px;height:52px;flex-basis:52px}.texts strong{font-size:17px}.controls input{width:58px}.model-2,.model-12,.model-16,.model-20{grid-template-columns:minmax(220px,1fr) 130px 78px 82px}.model-6{grid-template-columns:78px 120px minmax(210px,1fr) 82px}.model-11,.model-19{grid-template-columns:82px minmax(220px,1fr) 155px 80px}}
@media(max-width:520px){html,body{height:128px}.player{height:124px;grid-template-columns:68px minmax(0,1fr) 92px;grid-template-areas:"left brand fx";clip-path:none!important;border-radius:10px!important}.controls{display:none!important}.brand{padding:7px 8px}.logo{width:44px;height:44px;flex-basis:44px}.texts strong{font-size:14px}.theme-tag{font-size:6.8px;padding:2px 5px}.marquee{height:20px}.marquee-track span{font-size:11px;line-height:20px}.play{width:52px;height:52px}.fx{min-width:88px}.bars{inset:29px 3px}.bar{width:2px}.model-2,.model-12,.model-16,.model-20{grid-template-columns:minmax(0,1fr) 90px 68px;grid-template-areas:"brand fx left"}.model-3{grid-template-columns:92px minmax(0,1fr) 68px;grid-template-areas:"fx brand left"}.model-6{grid-template-columns:68px 90px minmax(0,1fr);grid-template-areas:"left fx brand"}.model-11,.model-19{grid-template-columns:68px minmax(0,1fr) 92px;grid-template-areas:"left brand fx"}.model-3 .disc{width:64px;height:64px}}
@media(prefers-reduced-motion:reduce){.bar,.disc,.marquee-track,.heartbeat-logo,.weather-layer *, .model-8 .fx:before,.model-8 .fx:after,.model-13:before,.model-14 .fx:before,.model-14 .fx:after{animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* ===== UPGRADE PREMIUM V5: BOTOES / COR TOTAL / MODULACAO AGRESSIVA ===== */
.player{background:
 linear-gradient(118deg,var(--bg1) 0%,var(--bg2) 48%,var(--bg3) 100%);}
.player:after{z-index:1;background:linear-gradient(105deg,transparent 0 32%,color-mix(in srgb,var(--theme) 24%,transparent) 48%,transparent 63%);transform:translateX(-120%);opacity:.65}
.player:not(.paused):after{animation:premiumSweep 2.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes premiumSweep{0%{transform:translateX(-120%)}65%,100%{transform:translateX(120%)}}
.play{border:1px solid #ffffff88!important;outline:1px solid color-mix(in srgb,var(--theme) 58%,transparent);outline-offset:4px;overflow:visible;isolation:isolate;backdrop-filter:blur(10px) saturate(180%);background:linear-gradient(145deg,color-mix(in srgb,var(--button-bg) 86%,#fff),color-mix(in srgb,var(--button-bg) 84%,#000 16%));box-shadow:0 10px 24px #0009,inset 0 1px 1px #fff9,inset 0 -5px 12px #0003,0 0 20px color-mix(in srgb,var(--theme) 38%,transparent)}
.play:before,.play:after{content:"";position:absolute;inset:-7px;border:1px solid color-mix(in srgb,var(--theme) 78%,#fff);border-radius:inherit;opacity:.4;pointer-events:none}
.play:after{inset:-13px;opacity:.18}
.player:not(.paused) .play{animation:buttonHeartbeat 1.12s ease-in-out infinite;box-shadow:0 10px 26px #000a,inset 0 1px 2px #fff,0 0 25px color-mix(in srgb,var(--theme) 70%,transparent),0 0 46px color-mix(in srgb,var(--theme) 38%,transparent)}
.player:not(.paused) .play:before{animation:heartRing 1.12s ease-out infinite}.player:not(.paused) .play:after{animation:heartRing 1.12s .16s ease-out infinite}
@keyframes buttonHeartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.10)}24%{transform:scale(.98)}36%{transform:scale(1.075)}52%{transform:scale(1)}}
@keyframes heartRing{0%{transform:scale(.9);opacity:.65}65%,100%{transform:scale(1.22);opacity:0}}
.playmark,.pausemark{filter:drop-shadow(0 2px 2px #0006);transform:translateZ(0)}

/* Equalizador mais agressivo: mais altura, brilho, golpes e profundidade */
.bar{width:4px;min-height:4px;background:linear-gradient(to top,color-mix(in srgb,var(--theme) 75%,#000),var(--theme) 55%,#fff 100%);box-shadow:0 0 6px var(--theme),0 0 14px color-mix(in srgb,var(--theme) 70%,transparent);animation:eqAttack .23s cubic-bezier(.2,.9,.2,1) infinite alternate;animation-delay:calc(var(--i)*-13ms)}
.player:not(.paused) .bars{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--theme) 65%,transparent));animation:barsPunch .72s ease-in-out infinite}
@keyframes eqAttack{0%{height:8%;transform:scaleY(.55) translateY(2px)}35%{height:45%}70%{height:20%}100%{height:100%;transform:scaleY(1.12) translateY(-2px)}}
@keyframes barsPunch{0%,100%{transform:scaleY(.92)}50%{transform:scaleY(1.08)}}
.fx-high .bar{animation-duration:.18s;box-shadow:0 0 8px var(--theme),0 0 18px color-mix(in srgb,var(--theme) 80%,transparent)}
.fx-medium .bar{animation-duration:.29s}.fx-low .bar{animation-duration:.42s;box-shadow:0 0 5px color-mix(in srgb,var(--theme) 45%,transparent)}
.player.paused .bar{height:8%!important;opacity:.12;animation-play-state:paused!important;box-shadow:none}.player.paused .bars{animation-play-state:paused!important;filter:none}

/* ===== PLAYER 20 — AQUA FLOOD X / ÁGUA REALISTA DINÂMICA ===== */
.flood-water{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.model-20{--water-top:43%;background:
 radial-gradient(120% 130% at 12% 0%,color-mix(in srgb,var(--theme) 38%,transparent),transparent 47%),
 radial-gradient(95% 115% at 88% 100%,color-mix(in srgb,var(--theme) 26%,transparent),transparent 55%),
 linear-gradient(118deg,var(--bg1),var(--bg2) 50%,var(--bg3));
 border-color:#d9f7ff50;box-shadow:inset 0 1px #fff7,inset 0 -22px 34px #00172288,0 16px 38px #0006;transition:background .8s ease,border-color .8s ease,box-shadow .8s ease}
.model-20 .ambient-bg{opacity:.78;background:radial-gradient(circle at 18% 25%,color-mix(in srgb,var(--theme) 34%,transparent),transparent 30%),radial-gradient(circle at 82% 75%,color-mix(in srgb,var(--theme) 25%,transparent),transparent 38%)}
.model-20 .flood-water{display:block;top:43%;background:
 linear-gradient(to bottom,#eaffff22 0 2%,#75e9ff55 10%,#18bfe07a 35%,#087ba8c9 70%,#034c70ed 100%);
 backdrop-filter:blur(1px) saturate(160%);box-shadow:inset 0 12px 18px #bff7ff20,inset 0 -25px 30px #00334d80;transition:top 11s cubic-bezier(.22,.68,.28,1)}
.model-20.flood-rain .flood-water{transition-duration:5.5s}.model-20.flood-drain .flood-water{transition-duration:12s}
.model-20 .flood-water:before,.model-20 .flood-water:after{content:"";position:absolute;left:-14%;width:128%;top:-15px;height:42px;pointer-events:none}
.model-20 .flood-water:before{background:
 radial-gradient(ellipse at 50% 65%,#f4ffffe8 0 6%,#bff9ffba 7% 13%,#59ddf28a 14% 23%,transparent 24%) 0 0/76px 34px repeat-x;
 filter:drop-shadow(0 3px 5px #20c7e599);opacity:.96;animation:floodWaveA 1.18s linear infinite}
.model-20 .flood-water:after{top:-7px;background:
 radial-gradient(ellipse at 50% 60%,#e9ffffb9 0 5%,#76eaff70 7% 17%,transparent 19%) 0 0/108px 37px repeat-x;
 opacity:.64;filter:blur(.35px);animation:floodWaveB 1.85s linear infinite reverse}
.model-20 .flood-water i{position:absolute;display:block;border-radius:50%;border:1px solid #e9ffffb8;background:radial-gradient(circle at 31% 25%,#fff 0 5%,#c9faff8c 9%,#63dff14a 28%,transparent 69%);box-shadow:inset -3px -4px 9px #006b9355,0 0 10px #b9f8ff66;animation:bubbleRise 2.35s ease-in infinite}
.model-20 .flood-water i:nth-child(1){width:14px;height:14px;left:15%;bottom:-18px;animation-delay:-.3s}.model-20 .flood-water i:nth-child(2){width:8px;height:8px;left:57%;bottom:-12px;animation-delay:-1.2s;animation-duration:1.95s}.model-20 .flood-water i:nth-child(3){width:18px;height:18px;left:84%;bottom:-24px;animation-delay:-.8s;animation-duration:2.75s}
.model-20 .flood-water b{position:absolute;inset:0;background:
 linear-gradient(103deg,transparent 0 22%,#d7fbff12 30%,transparent 39% 58%,#82eaff14 66%,transparent 75%),
 repeating-radial-gradient(ellipse at 45% 125%,#baf5ff1f 0 2px,transparent 3px 17px);
 mix-blend-mode:screen;animation:underCurrent 2.15s ease-in-out infinite alternate}
.model-20 .brand,.model-20 .left,.model-20 .fx,.model-20 .controls{z-index:4}.model-20 .weather-layer{z-index:6}.model-20 .logo{box-shadow:0 0 20px #b9f7ff59,inset 0 0 13px #fff2}.model-20 .bars{opacity:1}
/* Ondas/modulador ficam destacadas e aquáticas; a cor aleatória pertence ao fundo inteiro. */
.model-20 .bar{background:linear-gradient(to top,#007da8 0%,#20d7ec 40%,#bffaff 78%,#fff 100%);box-shadow:0 0 7px #2ce6f0,0 0 18px #53eff7a8,0 0 28px #ffffff28;animation-duration:.18s}
.model-20:not(.paused) .bars{filter:drop-shadow(0 0 8px #49ecf6) drop-shadow(0 0 15px #d7ffff55);animation:barsPunch .56s ease-in-out infinite}
.model-20 .wave-line{display:block;left:7%;right:7%;bottom:16px;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,#6beeff,#fff,#34d9eb,transparent);box-shadow:0 0 9px #66efff,0 0 22px #4cecff90;animation:aquaWaveGlow .72s ease-in-out infinite alternate}
.model-20.paused .flood-water,.model-20.paused .flood-water:before,.model-20.paused .flood-water:after,.model-20.paused .flood-water i,.model-20.paused .flood-water b,.model-20.paused .wave-line{animation-play-state:paused!important;transition:none!important}
.model-20.paused .wave-line{opacity:.22;box-shadow:none}.model-20.paused .flood-water{filter:saturate(.72) brightness(.72)}
@keyframes floodWaveA{to{transform:translateX(76px) translateY(1px)}}@keyframes floodWaveB{to{transform:translateX(108px) translateY(-1px)}}
@keyframes bubbleRise{0%{transform:translateY(0) translateX(0) scale(.65);opacity:0}12%{opacity:.82}55%{transform:translateY(-54px) translateX(8px) scale(.9)}100%{transform:translateY(-116px) translateX(18px) scale(1.18);opacity:0}}
@keyframes underCurrent{from{transform:translateX(-3%) scale(1.01);opacity:.45}to{transform:translateX(4%) scale(1.08);opacity:.88}}
@keyframes aquaWaveGlow{from{transform:scaleX(.92);opacity:.55}to{transform:scaleX(1.05);opacity:1}}