:root{line-height:1.5;font-weight:400;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--accent: #4da3ff;--bg: #1a1136;--bg-deep: #120d26;--card: rgba(255, 255, 255, .055);--card-line: rgba(255, 255, 255, .11);--dock: #221947;--text: #f2effc;--muted: rgba(226, 219, 250, .55);--live: #ff4d6d;--font: "Outfit", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg-deep);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;touch-action:manipulation}#root{width:100%}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.stage{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;background:var(--bg-deep)}.app{width:100%;max-width:480px;min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;gap:14px;padding:calc(env(safe-area-inset-top,0px) + 22px) 18px calc(env(safe-area-inset-bottom,0px) + 18px)}.header{display:flex;align-items:center;gap:12px;padding:4px 4px 2px}.logo{width:46px;height:46px;border-radius:50%;flex-shrink:0;object-fit:cover;background:#ffffff14}.header-text{flex:1}.header-title{font-size:18px;font-weight:800;letter-spacing:.3px}.header-sub{font-size:12.5px;color:var(--muted)}.live-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#ff4d6d21;border:1px solid rgba(255,77,109,.35);font-size:12px;font-weight:800;letter-spacing:1px;color:#ff8aa0}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--live);flex-shrink:0;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #ff4d6d99}70%{box-shadow:0 0 0 6px #ff4d6d00}to{box-shadow:0 0 #ff4d6d00}}.player-area{flex:1;display:flex;flex-direction:column;gap:14px;min-height:0}.section-label{font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);padding:6px 4px 0}.stream-list{display:flex;flex-direction:column;gap:10px}.stream-card{display:flex;align-items:center;gap:14px;min-height:76px;padding:0 18px;border-radius:20px;text-align:left;background:var(--card);border:1px solid var(--card-line);transition:border-color .2s,background .2s}.stream-card.active{background:color-mix(in oklab,var(--accent) 16%,var(--bg-deep));border-color:color-mix(in oklab,var(--accent) 50%,transparent)}.stream-card .info{flex:1}.stream-card .name{font-size:16px;font-weight:700}.stream-card .tag{font-size:13px;color:var(--muted);margin-top:3px}.stream-card .idle-dot{width:8px;height:8px;border-radius:50%;background:#ffffff38;flex-shrink:0}.eq{display:flex;align-items:flex-end;gap:2.5px;height:18px}.eq span{width:3.5px;height:100%;border-radius:2px;background:var(--accent);transform:scaleY(.22);transform-origin:bottom}.playing .eq span{animation:eq .9s ease-in-out infinite}.eq span:nth-child(2){animation-delay:.18s}.eq span:nth-child(3){animation-delay:.36s}.eq span:nth-child(4){animation-delay:.54s}@keyframes eq{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.socials{display:flex;justify-content:center;gap:14px;margin-top:auto}.social-btn{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);transition:background .2s,transform .15s ease}.social-btn:hover{background:#ffffff1f}.social-btn:active{transform:scale(.94)}.social-btn svg{width:20px;height:20px}.dock{border-radius:26px;padding:16px 18px 14px;background:var(--dock);border:1px solid var(--card-line);box-shadow:0 14px 36px #0006;display:flex;flex-direction:column;gap:10px}.dock-row{display:flex;align-items:center;gap:14px}.play-btn{width:58px;height:58px;border-radius:50%;flex-shrink:0;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .15s ease}.play-btn:active{transform:scale(.94)}.play-btn svg{width:22px;height:22px}.play-btn .play-icon{margin-left:3px}.spinner{width:22px;height:22px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dock-info{flex:1;min-width:0}.dock-title{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.marquee{display:flex;text-overflow:clip}.marquee-text{display:inline-block;white-space:nowrap}.marquee .marquee-text{padding-right:48px;animation:marquee var(--marquee-duration, 10s) linear infinite}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}.dock-sub{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:12.5px;color:var(--muted)}.dock-sub svg{width:13px;height:13px;flex-shrink:0}.playing .dock-sub{color:var(--accent);font-weight:600}.fade-in{animation:fadeup .45s ease both}@keyframes fadeup{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.error-message{padding:8px 12px;border-radius:12px;background:#ff4d6d21;border:1px solid rgba(255,77,109,.35);color:#ff8aa0;font-size:13px;text-align:center}.vol-row{display:flex;align-items:center;gap:8px}.vol-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;color:var(--muted);font-size:18px;transition:background .2s}.vol-icon:hover{background:#ffffff14}.volume-hint{font-size:12.5px;color:var(--muted)}.vol-slider{--fill: 100%;flex:1;height:36px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;outline:none;cursor:pointer;margin:0}.vol-slider::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--fill),rgba(255,255,255,.14) var(--fill))}.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7.5px;border-radius:50%;background:var(--accent);box-shadow:0 1px 6px #00000073;cursor:pointer}.vol-slider::-moz-range-track{height:5px;border-radius:3px;background:#ffffff24}.vol-slider::-moz-range-progress{height:5px;border-radius:3px;background:var(--accent)}.vol-slider::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--accent);box-shadow:0 1px 6px #00000073;cursor:pointer}.install-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--dock);border:1px solid var(--card-line);animation:fadeup .45s ease both}.install-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.install-text strong{font-size:14px;font-weight:700}.install-text span{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:4px;flex-wrap:wrap}.install-text svg{width:13px;height:13px;flex-shrink:0;color:var(--accent)}.install-btn{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;flex-shrink:0;transition:transform .15s ease}.install-btn:active{transform:scale(.94)}.install-btn svg{width:13px;height:13px}.install-close{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background .2s}.install-close:hover{background:#ffffff14}@media (prefers-reduced-motion: reduce){.eq span,.fade-in,.live-dot,.spinner,.marquee .marquee-text{animation:none!important}}