*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,system-ui,sans-serif;background:#020308;color:#fff}button,a,input{font:inherit}.bg-photo,.bg-shade{position:fixed;inset:0;pointer-events:none}.bg-photo{background-image:var(--app-bg);background-size:cover;background-position:center;filter:saturate(.92) contrast(1.04);animation:bgDrift 28s ease-in-out infinite alternate;transform:scale(1.02)}.bg-shade{background:linear-gradient(180deg,rgba(0,2,8,.78) 0%,rgba(0,2,8,.26) 32%,rgba(0,2,8,.58) 58%,rgba(0,0,0,.97) 100%)}@keyframes bgDrift{to{transform:scale(1.055) translateY(-.6%)}}
.app-shell{position:relative;z-index:2;width:min(100%,420px);min-height:100vh;margin:auto;padding:9px 10px 13px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg,rgba(1,3,10,.10),rgba(1,3,10,.48));box-shadow:0 0 52px rgba(0,0,0,.82);overflow:hidden}
.topbar{height:48px;display:grid;grid-template-columns:38px 1fr 38px;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);padding:0 1px}.brand-center{text-align:center;min-width:0}.brand-center strong{display:block;font-size:12px;letter-spacing:.4px;font-weight:750;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-btn{width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.22);text-decoration:none;font-size:18px;cursor:pointer}.menu-btn{font-size:20px}.settings-btn{font-size:20px}
.hero-player{position:relative;text-align:center;padding:3px 0 0}.hero-disc-wrap{height:236px;position:relative;display:grid;place-items:center;margin:0 auto}.main-disc{position:relative;z-index:4;width:205px;height:205px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.35);box-shadow:0 12px 35px rgba(0,0,0,.72);animation:discSpin var(--disc-speed) linear infinite}.main-disc.paused{animation-play-state:paused}@keyframes discSpin{to{transform:rotate(360deg)}}
.visualizer{position:absolute;z-index:2;left:3px;right:3px;bottom:0;height:var(--viz-height);display:flex;align-items:flex-end;justify-content:center;gap:2px;overflow:hidden;opacity:0;transition:opacity .2s ease;pointer-events:none}.visualizer.active{opacity:.96}.visualizer span{display:block;width:7px;min-width:7px;height:100%;border-radius:3px 3px 0 0;background:#f3c400;transform-origin:50% 100%;transform:scaleY(.04);animation:thickWave .62s cubic-bezier(.18,.02,.31,1) infinite alternate;animation-play-state:paused;box-shadow:inset 1px 0 rgba(255,255,255,.20),0 0 4px currentColor;will-change:transform}.visualizer.active span{animation-play-state:running}.visualizer span:nth-child(2n){animation-duration:.76s;animation-delay:-.22s}.visualizer span:nth-child(3n){animation-duration:.53s;animation-delay:-.39s}.visualizer span:nth-child(4n){animation-duration:.91s;animation-delay:-.52s}.visualizer span:nth-child(5n){animation-duration:.69s;animation-delay:-.28s}.visualizer span:nth-child(7n){animation-duration:1.02s;animation-delay:-.66s}.visualizer span:nth-child(-n+5),.visualizer span:nth-last-child(-n+5){height:58%}.visualizer span:nth-child(n+6):nth-child(-n+10),.visualizer span:nth-last-child(n+6):nth-last-child(-n+10){height:75%}.visualizer span:nth-child(n+11):nth-child(-n+15),.visualizer span:nth-last-child(n+11):nth-last-child(-n+15){height:90%}.visualizer span:nth-child(n+16):nth-child(-n+29){height:100%}@keyframes thickWave{0%{transform:scaleY(.05)}14%{transform:scaleY(.31)}29%{transform:scaleY(.14)}47%{transform:scaleY(.82)}62%{transform:scaleY(.42)}78%{transform:scaleY(.97)}91%{transform:scaleY(.56)}100%{transform:scaleY(.73)}}
.live-pill{display:inline-flex;align-items:center;justify-content:center;margin-top:-2px;padding:6px 14px;border-radius:999px;background:#e31d2b;color:#fff;font-size:8px;font-weight:900;letter-spacing:.25px;box-shadow:0 5px 16px rgba(0,0,0,.38)}.tagline{font-size:8px;margin:5px 0 3px;color:#f0f3f7;letter-spacing:.28px;text-transform:uppercase;text-shadow:0 2px 8px #000}
.now-card{margin-top:0;padding:7px 8px 8px;border-radius:12px;background:linear-gradient(180deg,rgba(2,4,10,.52),rgba(2,4,10,.86));border:1px solid rgba(255,255,255,.065);box-shadow:0 10px 26px rgba(0,0,0,.36)}.track-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:9px;align-items:center;padding:5px 2px 7px}.cover-button{width:46px;height:46px;border-radius:50%;padding:3px;background:#e61f2d;border:2px solid #f7c600;box-shadow:0 5px 13px rgba(0,0,0,.58);display:grid;place-items:center}.album-cover{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#111}.metadata{min-width:0;text-align:left}.metadata small{font-size:7px;font-weight:900;letter-spacing:1.15px;color:#ffd000}.metadata h1{font-size:14px;line-height:1.08;margin:2px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metadata p{font-size:9.5px;margin:0;color:#e3e6eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metadata em{display:block;margin-top:2px;font-size:6.8px;color:#8f98a7;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transport{display:grid;grid-template-columns:34px 38px 58px 38px 34px;align-items:center;justify-content:center;gap:5px;margin-top:1px;border-top:1px solid rgba(255,255,255,.06);padding-top:7px}.mini-control{width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.065);color:#fff;display:grid;place-items:center;font-size:13px;cursor:pointer}.mini-control:first-child,.mini-control:last-child{color:#ffd000}.play-btn{width:56px;height:56px;border-radius:50%;border:3px solid rgba(255,255,255,.18);background:#ffb400;color:#0d0d0d;font-size:20px;font-weight:900;display:grid;place-items:center;cursor:pointer;box-shadow:0 7px 19px rgba(0,0,0,.55);transition:background-color .4s ease,transform .14s ease}.play-btn.playing{animation:heartBeat 1.05s ease-in-out infinite}@keyframes heartBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.11)}24%{transform:scale(1)}39%{transform:scale(1.065)}52%{transform:scale(1)}}.play-btn:active{transform:scale(.93)}
.volume-row{display:grid;grid-template-columns:22px 1fr 22px;gap:6px;align-items:center;margin:6px 22px 0;font-size:10px}.volume-row input{width:100%;accent-color:#ffd000}.status{text-align:center;min-height:10px;margin-top:2px;font-size:7.3px;color:#9ca4b1}
.socials{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;padding:1px 0}.socials a{font-size:7.3px;color:#fff;text-decoration:none;padding:5px 7px;border-radius:6px;background:rgba(3,5,10,.88);border:1px solid rgba(255,209,0,.22)}
.on-air-card{display:grid;grid-template-columns:28px 1fr 66px;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(255,209,0,.18);border-radius:8px;background:rgba(3,5,10,.76)}.tower{color:#ffd000;font-size:18px}.on-air-card div:nth-child(2){display:grid}.on-air-card strong{font-size:10px;color:#ffd000}.on-air-card small{font-size:7.5px;color:#d6d9df}.micro-wave{height:22px;display:flex;align-items:center;justify-content:flex-end;gap:2px}.micro-wave i{display:block;width:2px;height:5px;background:#ffd000;animation:microWave .65s ease-in-out infinite alternate}.micro-wave i:nth-child(2n){animation-delay:-.24s;height:11px}.micro-wave i:nth-child(3n){animation-delay:-.38s;height:17px}@keyframes microWave{to{transform:scaleY(1.8)}}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px}.action{min-height:30px;border-radius:8px;border:1px solid rgba(255,209,0,.20);background:rgba(2,4,9,.86);color:#fff;font-size:8px;font-weight:750;cursor:pointer}.hidden{display:none!important}
.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08);padding-top:5px}.bottom-nav a{display:grid;place-items:center;gap:1px;text-decoration:none;color:#aeb5c1;font-size:14px}.bottom-nav a span{font-size:6.8px}.bottom-nav a.active{color:#ffd000}footer{text-align:center;font-size:6.5px;color:#6f7885;padding:1px 0}
@media(max-width:390px){.app-shell{padding:7px 8px 10px}.hero-disc-wrap{height:216px}.main-disc{width:188px;height:188px}.visualizer{height:min(var(--viz-height),145px);gap:1.5px}.visualizer span{width:6.5px;min-width:6.5px}.track-row{grid-template-columns:44px minmax(0,1fr)}.cover-button{width:43px;height:43px}.metadata h1{font-size:13px}.transport{grid-template-columns:32px 35px 54px 35px 32px}.play-btn{width:52px;height:52px}.socials a{font-size:6.8px}}
@media(max-height:720px){.hero-disc-wrap{height:185px}.main-disc{width:165px;height:165px}.visualizer{height:min(var(--viz-height),125px)}.live-pill{padding:5px 12px}.now-card{padding-top:5px}.on-air-card{display:none}.quick-actions{display:none}.bottom-nav{padding-top:3px}}