*{box-sizing:border-box;margin:0;padding:0}
:root{--accent:#c99a3b;--accent2:#e3b857;--accent-light:#f3d37a;--accent-dark:#80551c;--text:#fff;--muted:#d2c8b3}
html,body{width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{height:100dvh;overflow:hidden;background:#080b14;display:flex;flex-direction:column}
.background{position:fixed;inset:0;background-color:#050914;background-image:radial-gradient(circle at 9% 18%,rgba(243,211,122,.55) 0 1px,transparent 2px),radial-gradient(circle at 20% 72%,rgba(227,184,87,.3) 0 2px,transparent 4px),radial-gradient(circle at 39% 28%,rgba(243,211,122,.32) 0 1px,transparent 3px),radial-gradient(circle at 68% 16%,rgba(227,184,87,.42) 0 1px,transparent 3px),radial-gradient(circle at 82% 66%,rgba(243,211,122,.28) 0 2px,transparent 4px),radial-gradient(circle at 94% 35%,rgba(227,184,87,.38) 0 1px,transparent 3px),radial-gradient(ellipse 75% 38% at 8% 115%,transparent 55%,rgba(201,154,59,.16) 56%,transparent 57%),radial-gradient(ellipse 72% 34% at 12% 112%,transparent 64%,rgba(243,211,122,.11) 65%,transparent 66%),radial-gradient(ellipse 68% 40% at 94% -12%,transparent 58%,rgba(201,154,59,.12) 59%,transparent 60%),radial-gradient(ellipse at 12% 100%,rgba(128,85,28,.2),transparent 40%),radial-gradient(ellipse at 88% 0%,rgba(36,48,68,.4),transparent 46%),linear-gradient(135deg,#050914 0%,#111827 48%,#070a12 100%);background-size:cover;background-position:center;z-index:-3}
.topbar{height:70px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.08)}
.install-banner{position:fixed;top:84px;left:50%;z-index:15;width:min(560px,calc(100% - 28px));transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(227,184,87,.35);border-radius:16px;background:rgba(14,13,10,.96);box-shadow:0 16px 40px rgba(0,0,0,.42);backdrop-filter:blur(14px)}.install-banner[hidden]{display:none}.install-banner img{width:46px;height:46px;flex:0 0 46px;border-radius:10px;object-fit:cover}.install-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.install-copy strong{font-size:14px}.install-copy span{color:var(--muted);font-size:11px}.install-btn{border:0;border-radius:10px;padding:10px 12px;background:linear-gradient(135deg,var(--accent-light),var(--accent-dark));color:#fff;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap}.install-btn:hover{filter:brightness(1.1)}.install-close{width:28px;height:28px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1;cursor:pointer}.install-close:hover{background:rgba(255,255,255,.2)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}.brand img{width:44px;height:44px;border-radius:10px;object-fit:cover}.brand span{font-size:18px}
.menu-btn,.menu-header button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);color:#fff;border-radius:12px;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}.menu-btn{font-size:27px;width:46px;height:46px;line-height:1}.menu-btn:hover,.menu-header button:hover{background:rgba(201,154,59,.3);border-color:rgba(243,211,122,.55);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}.menu-btn:active,.menu-header button:active{transform:scale(.94)}.menu-btn:focus-visible,.menu-header button:focus-visible,.social-links a:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px}
.player{width:min(520px,92%);margin:auto;text-align:center;padding:28px 20px 40px;display:flex;flex-direction:column;align-items:center}
.radio-logo{width:clamp(180px,35vw,280px);height:clamp(180px,35vw,280px);border-radius:18px;object-fit:cover;border:3px solid rgba(227,184,87,.8);box-shadow:0 15px 55px rgba(0,0,0,.45),0 0 24px rgba(201,154,59,.16);margin-bottom:22px}
h1{font-size:clamp(25px,5vw,36px);margin-bottom:7px}.status{color:var(--muted);font-size:14px;min-height:20px}
.now-playing{width:100%;margin:24px 0 20px;padding:14px 17px;display:flex;gap:13px;align-items:center;text-align:left;border-radius:16px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1)}
.now-playing small{font-size:10px;letter-spacing:1.5px;color:var(--accent-light)}.song-title-viewport{min-width:0;max-width:380px;overflow:hidden;margin-top:4px}.now-playing #songTitle{display:inline-block;font-weight:700;white-space:nowrap}.now-playing #songTitle.is-scrolling{animation:metadata-scroll 12s linear infinite alternate}@keyframes metadata-scroll{0%,20%{transform:translateX(0)}80%,100%{transform:translateX(calc(-100% + var(--metadata-visible-width)))}}
.equalizer{width:28px;height:28px;display:flex;gap:3px;align-items:center}.equalizer i{width:4px;height:10px;border-radius:4px;background:var(--accent-light)}.equalizer.playing i{animation:bars .75s infinite ease-in-out}.equalizer.playing i:nth-child(2){animation-delay:.1s}.equalizer.playing i:nth-child(3){animation-delay:.2s}.equalizer.playing i:nth-child(4){animation-delay:.3s}.equalizer.playing i:nth-child(5){animation-delay:.4s}
@keyframes bars{50%{height:25px}}
.play-btn{position:relative;width:92px;height:92px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:linear-gradient(145deg,var(--accent-light) 0%,var(--accent) 58%,var(--accent-dark) 100%);color:#fff;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 14px 35px rgba(201,154,59,.3),inset 0 1px 1px rgba(255,255,255,.45);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}.play-btn::before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.35);border-radius:50%;pointer-events:none}.play-btn:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 18px 42px rgba(201,154,59,.42),inset 0 1px 1px rgba(255,255,255,.5)}.play-btn:active{transform:scale(.95)}.play-btn:focus-visible{outline:3px solid var(--accent-light);outline-offset:5px}.play-btn.is-playing{background:linear-gradient(145deg,var(--accent-light) 0%,var(--accent) 58%,var(--accent-dark) 100%);box-shadow:0 14px 35px rgba(201,154,59,.3),inset 0 1px 1px rgba(255,255,255,.5)}.play-btn.is-playing::before{border-color:rgba(255,255,255,.6);animation:pulse-ring 1.8s ease-out infinite}@keyframes pulse-ring{0%,100%{transform:scale(.94);opacity:.6}50%{transform:scale(1.04);opacity:1}}
.volume-row{width:min(400px,100%);display:flex;align-items:center;gap:10px;margin:24px 0}.volume-row input{flex:1;accent-color:var(--accent2)}.volume-row span:last-child{font-size:12px;color:var(--muted);width:40px}
.share-btn{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#fff;padding:12px 18px;border-radius:12px;cursor:pointer}
.side-menu{position:fixed;top:0;right:-320px;width:min(320px,88vw);height:100vh;background:rgba(8,12,25,.97);z-index:20;padding:20px;transition:right .28s ease;box-shadow:-15px 0 45px rgba(0,0,0,.4)}.side-menu.open{right:0}
.menu-header{display:flex;justify-content:space-between;align-items:center;font-size:21px;font-weight:700;margin-bottom:25px}.menu-header button{font-size:30px;width:42px;height:42px;line-height:1}.social-links{display:flex;flex-direction:column;gap:10px}.social-links a,.menu-share{color:#fff;text-decoration:none;padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.07);display:flex;gap:12px;align-items:center;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease,padding-left .2s ease}.social-links a:hover,.menu-share:hover{background:linear-gradient(100deg,rgba(201,154,59,.3),rgba(227,184,87,.12));border-color:rgba(227,184,87,.32);transform:translateX(-3px);padding-left:17px}.menu-share{width:100%;font:inherit;text-align:left}.menu-share span:first-child{width:22px;flex:0 0 22px;text-align:center;font-size:22px;color:var(--accent-light)}.social-icon{width:22px;height:22px;flex:0 0 22px;fill:currentColor}.social-icon rect,.social-icon circle,.web-icon path{fill:none;stroke:currentColor;stroke-width:1.8}.instagram-icon .icon-fill{fill:currentColor;stroke:none}.social-links a[data-social="facebook"] .social-icon{color:#60a5fa}.social-links a[data-social="instagram"] .social-icon{color:#f9a8d4}.social-links a[data-social="youtube"] .social-icon{color:#f87171}.social-links a[data-social="whatsapp"] .social-icon{color:#4ade80}.social-links a[data-social="web"] .social-icon{color:var(--accent-light)}
.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10;opacity:0;visibility:hidden;transition:.2s}.menu-backdrop.show{opacity:1;visibility:visible}
.chat-panel{width:min(520px,92%);min-height:420px;margin:auto;padding:28px 20px 40px;display:flex;flex-direction:column}.chat-header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.chat-header small{font-size:10px;letter-spacing:1.5px;color:var(--accent-light)}.chat-header h2{font-size:clamp(22px,5vw,30px);margin-top:4px}.back-btn{width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.09);color:#fff;font-size:25px;cursor:pointer}.back-btn:hover{background:rgba(201,154,59,.3)}.chat-messages{flex:1;min-height:270px;max-height:calc(100vh - 220px);overflow-y:auto;padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.07)}.chat-message{width:fit-content;max-width:85%;margin:0 0 10px auto;padding:10px 13px;border-radius:14px 14px 3px 14px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));overflow-wrap:anywhere}.chat-form{display:flex;gap:10px;margin-top:14px}.chat-form input{min-width:0;flex:1;padding:13px 14px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(255,255,255,.09);color:#fff;outline:none}.chat-form input:focus{border-color:var(--accent-light)}.chat-form button{width:48px;border:0;border-radius:12px;background:var(--accent2);color:#fff;font-size:20px;cursor:pointer}.chat-form button:hover{filter:brightness(1.1)}
.chat-panel[hidden]{display:none!important}
.cbox-frame{width:100%;height:450px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#fff;overflow:hidden}
.chat-panel.is-floating{position:fixed;right:22px;bottom:22px;width:min(430px,calc(100% - 32px));min-height:0;padding:10px;z-index:30;border:1px solid rgba(227,184,87,.3);border-radius:18px;background:rgba(8,12,25,.96);box-shadow:0 22px 60px rgba(0,0,0,.55);backdrop-filter:blur(14px)}.chat-panel.is-floating .cbox-frame{height:450px}.chat-close{position:absolute;top:15px;right:15px;z-index:2;width:30px;height:30px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(8,12,25,.8);color:#fff;font-size:23px;line-height:1;cursor:pointer}.chat-close:hover{background:var(--accent-dark)}.chat-close:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px}.chat-float{position:fixed;right:22px;bottom:22px;z-index:25;display:flex;align-items:center;gap:8px;padding:12px 17px;border:1px solid rgba(243,211,122,.55);border-radius:999px;background:linear-gradient(135deg,var(--accent-light),var(--accent-dark));color:#fff;font-weight:700;cursor:pointer;box-shadow:0 12px 30px rgba(128,85,28,.45);transition:transform .2s ease,filter .2s ease}.chat-float:hover{transform:translateY(-3px);filter:brightness(1.1)}.chat-float:focus-visible{outline:2px solid var(--accent-light);outline-offset:4px}.chat-float[aria-expanded="true"]{opacity:0;pointer-events:none}.chat-float-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.chat-float-icon path:last-child{stroke-linecap:round;stroke-width:2.8}
footer{text-align:center;padding:15px;color:rgba(255,255,255,.55);font-size:12px}
.social-links a[data-social="chat"] .social-icon{color:var(--accent-light)}.chat-icon path{fill:none;stroke:currentColor;stroke-width:1.8}.chat-icon path:last-child{stroke-linecap:round;stroke-width:2.8}
@media(min-width:800px){.topbar{padding-left:35px;padding-right:35px}.player{padding-top:45px}}
@media(max-width:480px){.topbar{height:62px;padding:9px 14px}.brand img{width:38px;height:38px}.brand span{font-size:16px}.player{padding-top:25px}.radio-logo{width:200px;height:200px;border-radius:16px}.song-title-viewport{max-width:270px}}
@media(max-width:480px){.install-banner{top:72px;padding:8px;gap:8px}.install-banner img{width:40px;height:40px;flex-basis:40px}.install-copy span{display:none}.install-copy strong{font-size:12px}.install-btn{padding:9px 8px;font-size:11px}}