:root{--bg-app: #050505;--bg-card: #111111;--bg-elevated: #1a1a1a;--accent: #ff6600;--accent-light: #ff8533;--accent-red: #ff3300;--accent-yellow: #ffcc00;--text-primary: #ffffff;--text-secondary: #999999;--text-tertiary: #666666;--border: rgba(255, 255, 255, .08);--safe-top: env(safe-area-inset-top);--safe-bottom: env(safe-area-inset-bottom)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;overflow:hidden}audio{display:none}.hidden{display:none!important}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-title{font-size:16px;font-weight:600;letter-spacing:-.02em}.text-xs{font-size:10px}.text-sm{font-size:11px}.text-base{font-size:14px}.text-lg{font-size:15px}.text-xl{font-size:16px}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.app{height:100%;height:100dvh;display:flex;flex-direction:column;padding:var(--safe-top) 16px var(--safe-bottom)}.status-bar{height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.content{flex:1;display:flex;flex-direction:column;gap:12px;padding-bottom:12px;overflow:hidden}.footer{text-align:center;padding:16px 0;flex-shrink:0}.footer-text{font-size:12px;color:var(--text-secondary);font-weight:500;line-height:1.4}.footer-link{color:var(--accent);text-decoration:none}.action-item{display:flex;align-items:center;padding:18px 20px;text-decoration:none;color:var(--text-primary);transition:background .15s ease;min-height:60px}.action-item:active{background:var(--bg-elevated)}.action-icon{width:40px;height:40px;background:#ff660026;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-right:16px;color:var(--accent)}.action-content{flex:1}.action-title{font-size:16px;font-weight:500;margin-bottom:2px}.action-subtitle{font-size:13px;color:var(--text-secondary)}.action-chevron{color:var(--text-tertiary)}@media (max-width: 320px){.app{padding:var(--safe-top) 12px var(--safe-bottom)}.content{gap:8px}.player-card{padding:12px;min-height:120px;max-height:160px}.play-btn{width:56px;height:56px}.play-btn svg{width:20px;height:20px}.action-item{padding:14px 16px;min-height:52px}.action-icon{width:36px;height:36px;margin-right:12px}.action-title{font-size:14px}.action-subtitle{font-size:12px}.footer{padding:12px 0}.footer-text{font-size:11px}}@media (min-width: 768px){.content{max-width:400px;margin:0 auto}.hero-card{max-height:300px}}.hero-card{border-radius:16px;overflow:hidden;background:var(--bg-card);box-shadow:0 8px 32px #0006;flex-shrink:1;min-height:0;max-height:40vh}.hero-card img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;display:block}.player-card{background:var(--bg-card);border-radius:16px;padding:14px;flex:0 1 auto;display:flex;flex-direction:column;min-height:140px;max-height:180px;justify-content:space-between}.actions-card{background:var(--bg-card);border-radius:16px;overflow:hidden;flex-shrink:0}.play-btn{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-red) 100%);border:none;color:#fff;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 20px #f606;transition:transform .15s ease,box-shadow .15s ease;position:relative}.play-btn:active{transform:scale(.95)}.play-btn.playing{box-shadow:0 4px 30px #f609}.play-btn svg{width:24px;height:24px}.install-banner-btn{padding:8px 16px;border-radius:20px;font-size:13px;font-weight:500;border:none;cursor:pointer;transition:all .15s ease;min-width:80px;white-space:nowrap;font-family:Inter,sans-serif}.install-banner-btn.dismiss{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.install-banner-btn.dismiss:hover,.install-banner-btn.dismiss:focus{background:var(--bg-elevated);color:var(--text-primary)}.install-banner-btn.primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-red) 100%);color:#fff;box-shadow:0 2px 12px #ff66004d}.install-banner-btn.primary:hover,.install-banner-btn.primary:focus{transform:translateY(-1px);box-shadow:0 4px 16px #f606}.install-banner-btn:active{transform:scale(.95)}.volume-slider{flex:1;height:4px;background:var(--bg-elevated);border-radius:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d}.volume-slider::-moz-range-thumb{width:20px;height:20px;background:#fff;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 8px #0000004d}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes wave1{0%,to{height:60%}50%{height:30%}}@keyframes wave2{0%,to{height:80%}50%{height:50%}}@keyframes wave3{0%,to{height:50%}50%{height:80%}}@keyframes wave4{0%,to{height:90%}50%{height:40%}}@keyframes wave5{0%,to{height:65%}50%{height:85%}}@keyframes wave6{0%,to{height:75%}50%{height:45%}}@keyframes wave7{0%,to{height:55%}50%{height:75%}}@keyframes wave8{0%,to{height:85%}50%{height:55%}}@keyframes wave9{0%,to{height:70%}50%{height:40%}}@keyframes wave10{0%,to{height:60%}50%{height:90%}}@keyframes wave11{0%,to{height:80%}50%{height:35%}}@keyframes wave12{0%,to{height:50%}50%{height:70%}}@keyframes pulseConnected{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@keyframes pulseBuffering{0%,to{opacity:1}50%{opacity:.4}}@keyframes pulseReconnecting{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.2)}}@keyframes pulseError{0%,to{opacity:1}25%{opacity:.2}50%{opacity:1}75%{opacity:.2}}.loading .wave-bar{animation:none!important;height:20%!important;opacity:.3}.now-playing{display:flex;align-items:center;gap:8px;flex-shrink:0}.live-badge{display:flex;align-items:center;gap:6px;background:#ff660026;padding:5px 10px;border-radius:20px}.live-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse 2s ease-in-out infinite}.live-label{font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--accent);text-transform:uppercase}.waveform{display:flex;align-items:center;justify-content:center;gap:3px;flex:1;min-height:24px;padding:6px 0}.wave-bar{width:3px;background:var(--accent);border-radius:2px;transition:height .1s ease}.wave-bar:nth-child(1){height:60%;animation:wave1 1.2s ease-in-out infinite}.wave-bar:nth-child(2){height:80%;animation:wave2 .8s ease-in-out infinite}.wave-bar:nth-child(3){height:50%;animation:wave3 1.1s ease-in-out infinite}.wave-bar:nth-child(4){height:90%;animation:wave4 .9s ease-in-out infinite}.wave-bar:nth-child(5){height:65%;animation:wave5 1.3s ease-in-out infinite}.wave-bar:nth-child(6){height:75%;animation:wave6 1s ease-in-out infinite}.wave-bar:nth-child(7){height:55%;animation:wave7 1.4s ease-in-out infinite}.wave-bar:nth-child(8){height:85%;animation:wave8 .7s ease-in-out infinite}.wave-bar:nth-child(9){height:70%;animation:wave9 1.2s ease-in-out infinite}.wave-bar:nth-child(10){height:60%;animation:wave10 .85s ease-in-out infinite}.wave-bar:nth-child(11){height:80%;animation:wave11 1.15s ease-in-out infinite}.wave-bar:nth-child(12){height:50%;animation:wave12 .95s ease-in-out infinite}.play-container{display:flex;justify-content:center;flex-shrink:0;padding:6px 0}.volume-control{display:flex;align-items:center;gap:10px;flex-shrink:0}.volume-icon{color:var(--text-tertiary);flex-shrink:0}.install-banner{position:fixed;top:0;left:0;right:0;z-index:1000;background:linear-gradient(180deg,var(--bg-elevated) 0%,var(--bg-card) 100%);border-bottom:1px solid var(--border);padding:var(--safe-top) 16px 16px;transform:translateY(-100%);transition:transform .3s cubic-bezier(.3,0,0,1)}.install-banner.visible{transform:translateY(0)}.install-banner.hidden{display:none}.install-banner-content{display:flex;align-items:center;gap:12px;max-width:100%}.install-banner-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;overflow:hidden;background:var(--bg-app);box-shadow:0 4px 12px #0000004d}.install-banner-icon img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.install-banner-info{flex:1;min-width:0}.install-banner-title{font-size:15px;font-weight:600;color:var(--text-primary);margin:0 0 2px;line-height:1.3}.install-banner-description{font-size:13px;color:var(--text-secondary);margin:0;line-height:1.4}.install-banner-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0}@media (max-width: 320px){.install-banner-content{gap:10px}.install-banner-icon{width:44px;height:44px}.install-banner-actions{gap:6px}.install-banner-btn{padding:6px 12px;font-size:12px;min-width:70px}}.install-banner.visible~.app{padding-top:calc(var(--safe-top) + 80px)}