*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--gold:#d4a843;--gold-light:#f0d078;--gold-dark:#a67c2e;--bg-overlay:#0f0a058c;--glass-bg:#1e160c73;--glass-border:#d4a84333;--glass-shadow:#0006;--text-primary:#f5efe6;--text-secondary:#f5efe6b3;--tag-active-bg:#d4a84333;--tag-active-border:#d4a84399;--tag-hover-bg:#d4a8431a;--font-main:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif}html,body{width:100%;height:100%;font-family:var(--font-main);color:var(--text-primary);overflow:hidden}.app-container{justify-content:center;align-items:center;width:100%;height:100dvh;display:flex;position:relative;overflow:hidden}.bg-image{object-fit:cover;z-index:0;filter:brightness()saturate(1.15);width:100%;height:100%;position:absolute;inset:0}.bg-overlay{z-index:1;position:absolute;inset:0}.radio-card{z-index:2;-webkit-backdrop-filter:blur(7px)saturate(1.1)brightness(1.2);backdrop-filter:blur(7px)saturate(1.1)brightness(1.2);opacity:0;background:#120c0640;border:1px solid #ffffff1a;border-top-color:#ffffff2e;border-radius:100px;flex-direction:column;gap:.75rem;width:calc(100% - 3rem);max-width:780px;padding:1.1rem 3rem 1.2rem;animation:.8s cubic-bezier(.22,1,.36,1) forwards cardIn;display:flex;position:absolute;bottom:2rem;left:50%;transform:translate(-50%)translateY(24px);box-shadow:0 8px 48px #00000080,inset 0 2px #ffffff14,inset 0 0 0 1px #d4a84314}@keyframes cardIn{to{opacity:1;transform:translate(-50%)translateY(0)}}.top-row{align-items:center;gap:1rem;width:100%;display:flex;overflow:hidden}.bottom-row{align-items:center;gap:1.2rem;width:100%;display:flex}.radio-title{letter-spacing:.04em;white-space:nowrap;background:linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;flex-shrink:0;font-size:1rem;font-weight:700}.channel-tags{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;flex:1;align-items:center;gap:.45rem;display:flex;overflow-x:auto}.channel-tags::-webkit-scrollbar{display:none}.channel-tag{color:var(--text-secondary);font-family:var(--font-main);letter-spacing:.03em;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;border:1px solid #d4a84326;border-radius:100px;padding:.45rem 1rem;font-size:.78rem;font-weight:400;transition:all .3s cubic-bezier(.22,1,.36,1)}.channel-tag:hover{background:var(--tag-hover-bg);color:var(--text-primary);border-color:#d4a84359}.channel-tag.active{background:var(--tag-active-bg);border-color:var(--tag-active-border);color:var(--gold-light);font-weight:500;box-shadow:0 0 16px #d4a8431f}.channel-tag.disabled{opacity:.4;cursor:not-allowed}.channel-tag.disabled:hover{color:var(--text-secondary);background:0 0;border-color:#d4a84326}.bar-divider{background:var(--glass-border);flex-shrink:0;width:1px;height:28px}.now-playing{color:var(--text-secondary);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;flex:1;align-items:center;gap:.45rem;font-size:.65rem;display:flex}.live-dot{background:#e74c3c;border-radius:50%;width:7px;height:7px;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 #e74c3c80}50%{opacity:.7;box-shadow:0 0 0 6px #e74c3c00}}.play-btn-wrapper{position:relative}.play-btn-ring{border:2px solid #0000;border-top-color:var(--gold);opacity:0;border-right-color:#d4a8434d;border-radius:50%;transition:opacity .4s;animation:none;position:absolute;inset:-8px}.play-btn-ring.spinning{opacity:1;animation:2.4s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.play-btn{border:2px solid var(--gold);cursor:pointer;z-index:1;background:#d4a84314;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;transition:all .3s cubic-bezier(.22,1,.36,1);display:flex;position:relative}.play-btn:hover{background:#d4a8432e;transform:scale(1.06);box-shadow:0 0 28px #d4a84333}.play-btn:active{transform:scale(.96)}.play-btn svg{width:28px;height:28px;fill:var(--gold-light);transition:transform .2s}.play-btn .play-icon{margin-left:3px}.visualizer{flex-shrink:0;align-items:flex-end;gap:3px;height:24px;display:flex}.visualizer .bar{background:var(--gold);opacity:.6;border-radius:2px;width:3px;transition:height .15s}.visualizer .bar:first-child{animation:.8s ease-in-out infinite barBounce}.visualizer .bar:nth-child(2){animation:.8s ease-in-out .1s infinite barBounce}.visualizer .bar:nth-child(3){animation:.8s ease-in-out .2s infinite barBounce}.visualizer .bar:nth-child(4){animation:.8s ease-in-out .3s infinite barBounce}.visualizer .bar:nth-child(5){animation:.8s ease-in-out .15s infinite barBounce}.visualizer.paused .bar{opacity:.3;animation-play-state:paused;height:4px!important}@keyframes barBounce{0%,to{height:4px}50%{height:20px}}.spotify-embed{border:none;border-radius:12px;flex:1;width:100%;height:80px}.loading-spinner{border:2px solid #d4a84333;border-top-color:var(--gold);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}.volume-control{flex-shrink:0;align-items:center;gap:.6rem;width:120px;display:flex}.volume-icon{width:18px;height:18px;fill:var(--text-secondary);cursor:pointer;flex-shrink:0;transition:fill .2s}.volume-icon:hover{fill:var(--gold-light)}.volume-slider{appearance:none;cursor:pointer;background:#d4a84326;border-radius:2px;outline:none;width:100%;height:3px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--gold);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:transform .2s;box-shadow:0 0 8px #d4a8434d}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{background:var(--gold);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #d4a8434d}@media (max-width:600px){.radio-card{gap:.6rem;width:calc(100% - 2rem);padding:.9rem 1rem 1rem;bottom:1rem}.radio-title{font-size:.85rem}.channel-tag{padding:.35rem .7rem;font-size:.7rem}.volume-control{width:80px}.play-btn{width:44px;height:44px}.play-btn svg{width:18px;height:18px}}