*{box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif}
body{margin:0;background:#000;color:#fff;display:flex;justify-content:center}
.phone{margin:20px;padding:14px;border-radius:28px;background:linear-gradient(180deg,#111,#000);box-shadow:0 30px 80px rgba(0,0,0,.8)}
.app{width:360px}
.cover-wrapper{width:250px;height:250px;margin:0 auto 10px;border-radius:18px;overflow:hidden;background:#000}
.cover-wrapper img{width:100%;height:100%;object-fit:cover}
.meta{text-align:center;margin-bottom:6px}
#nowPlaying{font-weight:700}
#listeners{font-size:12px;color:#bbb}
.marquee{overflow:hidden;white-space:nowrap;margin:8px 0}
.marquee-inner{display:inline-block;animation:scroll 18s linear infinite;color:#ccc;font-size:12px}
@keyframes scroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
audio{width:100%;margin:10px 0;background:#e6e6e6;border-radius:12px}
.buttons{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.btn{padding:12px;border-radius:14px;text-decoration:none;text-align:center;font-weight:700}
.btn.primary{background:#ff1a1a;color:#fff}
.btn.dark{background:#1a1a1a;color:#fff}
.sponsored{text-align:center;font-size:12px;color:#aaa;margin-top:10px}
.ads-wrapper{width:300px;height:300px;margin:8px auto;border-radius:18px;overflow:hidden;background:#111}
.ads-wrapper img{width:100%;height:100%;object-fit:cover}
.history{margin-top:10px}
.history-title{font-size:13px;color:#ccc;margin-bottom:4px}
#historyList{list-style:none;padding:0;margin:0}
#historyList li{font-size:12px;color:#ddd;margin:2px 0}

.phone {
  box-shadow: 0 0 20px rgba(255,0,0,0.85);
}