*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0f1219;--bg-secondary:#181c25;--bg-card:#1f232d;--bg-card-hover:#262a36;--bg-glass:#212531bf;--bg-glass-border:#47578533;--text-primary:#f0f2f5;--text-secondary:#98a6b3;--text-muted:#67737e;--accent:#2dd29b;--accent-glow:#2dd29b4d;--accent-soft:#2dd29b1f;--danger:#e05252;--danger-glow:#e052524d;--danger-soft:#e052521f;--warning:#e8ab30;--warning-soft:#e8ab301f;--speech-color:#2dd29b;--music-color:#ad5cd6;--singing-color:#db5799;--dj-color:#3ca7dd;--jingle-color:#e8ab30;--unknown-color:#6c8093;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--radius-sm:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.25rem;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1)}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-size:16px}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(60% 40% at 20% 10%,#2dd29b0f 0%,#0000 70%),radial-gradient(50% 50% at 80% 90%,#9933cc0d 0%,#0000 70%);position:fixed;inset:0}.app-header{contain:layout style;z-index:1;justify-content:center;align-items:center;gap:var(--space-md);padding:var(--space-xl) var(--space-md) var(--space-md);display:flex;position:relative}.app-title{letter-spacing:-.02em;background:linear-gradient(135deg, var(--accent) 0%, #52b1e0 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.4rem;font-weight:700}.model-status{align-items:center;gap:var(--space-xs);background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--bg-glass-border);transition:all var(--transition-base);border-radius:999px;padding:.3rem .75rem;font-size:.7rem;font-weight:500;display:inline-flex}.model-status.ready{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-glow)}.model-status.error{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-glow)}.status-dot{width:6px;height:6px;transition:background var(--transition-base);background:currentColor;border-radius:50%}.model-status.ready .status-dot{animation:2s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;box-shadow:0 0}50%{opacity:.7;box-shadow:0 0 0 4px #0000}}.main-content{contain:layout style;z-index:1;padding:0 var(--space-md) calc(340px + var(--space-lg));position:relative}.stations-grid{gap:var(--space-sm);content-visibility:auto;contain-intrinsic-size:auto 600px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:480px;margin:0 auto;display:grid}.station-btn{justify-content:center;align-items:center;gap:var(--space-xs);padding:var(--space-md) var(--space-sm);background:var(--bg-card);border:1px solid var(--bg-glass-border);border-radius:var(--radius-lg);cursor:pointer;min-width:0;transition:all var(--transition-base);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;contain:layout style;will-change:transform;flex-direction:column;min-height:90px;display:flex;position:relative}.station-btn:hover{background:var(--bg-card-hover);border-color:#596ca64d;transform:translateY(-1px)}.station-btn:active{transition-duration:80ms;transform:scale(.97)}.station-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale();background:var(--bg-primary);transform:none!important}.station-btn.active{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow), inset 0 0 20px #2dd29b0d}.station-name{text-align:center;color:#fff;font-size:.85rem;font-weight:600;line-height:1.3}.station-program{color:var(--accent);white-space:nowrap;text-overflow:ellipsis;text-align:center;width:100%;max-width:100%;font-size:.9rem;font-weight:500;overflow:hidden}.station-lang{color:var(--text-muted);font-size:.65rem;font-weight:400}.station-number{top:var(--space-xs);right:var(--space-sm);color:var(--text-muted);opacity:.5;font-size:.6rem;font-weight:600;position:absolute}.player-panel{contain:layout style paint;z-index:100;background:var(--bg-glass);-webkit-backdrop-filter:blur(24px)saturate(1.4);backdrop-filter:blur(24px)saturate(1.4);border-top:1px solid var(--bg-glass-border);padding:var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom,0px));transition:transform var(--transition-slow);will-change:transform;position:fixed;bottom:0;left:0;right:0;transform:translateY(100%)}.player-panel.visible{transform:translateY(0)}.now-playing{margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.now-playing-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.now-playing-station{white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:600;overflow:hidden}.now-playing-program{color:var(--accent);-webkit-line-clamp:1;cursor:pointer;transition:all var(--transition-base);-webkit-tap-highlight-color:transparent;-webkit-box-orient:vertical;margin-bottom:2px;font-size:.75rem;display:-webkit-box;overflow:hidden}.now-playing-program.expanded{-webkit-line-clamp:15;scrollbar-width:none;-ms-overflow-style:none;max-height:25vh;overflow-y:auto}.now-playing-program.expanded::-webkit-scrollbar{display:none}.now-playing-status{color:var(--text-secondary);align-items:center;gap:var(--space-xs);font-size:.7rem;display:flex}.stop-btn{background:var(--danger-soft);height:36px;color:var(--danger);cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent;border:none;border-radius:18px;flex-shrink:0;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:.75rem;font-weight:600;display:flex}.stop-btn:hover{background:var(--danger);color:#fff}.stop-btn:active{transform:scale(.9)}.stop-icon{background:currentColor;border-radius:2px;width:12px;height:12px}.classification-row{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);display:flex}.class-label{min-width:90px;transition:color var(--transition-base);font-size:.8rem;font-weight:600}.class-label.speech{color:var(--speech-color)}.class-label.music{color:var(--music-color)}.class-label.singing{color:var(--singing-color)}.class-label.dj{color:var(--dj-color)}.class-label.jingle{color:var(--jingle-color)}.class-label.unknown{color:var(--unknown-color)}.confidence-bar-track{contain:strict;background:#3d455c80;border-radius:999px;flex:1;height:4px;overflow:hidden}.confidence-bar-fill{height:100%;transition:width var(--transition-base), background var(--transition-base);will-change:width;background:var(--accent);border-radius:999px}.confidence-value{color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums;min-width:32px;font-size:.65rem;font-weight:500}.telemetry-row{justify-content:space-between;gap:var(--space-sm);color:var(--text-muted);font-variant-numeric:tabular-nums;padding-top:var(--space-xs);border-top:1px solid #33394d80;font-size:.6rem;display:flex}.telemetry-item{align-items:center;gap:3px;display:flex}.telemetry-label{opacity:.6}.mute-toggle-row{padding:var(--space-sm) 0;margin-top:var(--space-xs);border-top:1px solid #33394d80;justify-content:space-between;align-items:center;display:flex}.mute-toggle-label{color:var(--text-secondary);font-size:.75rem;font-weight:500}.toggle-switch{-webkit-tap-highlight-color:transparent;width:44px;height:24px;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;transition:background var(--transition-base);background:#363b49;border-radius:999px;position:absolute;inset:0}.toggle-slider:before{content:"";width:18px;height:18px;transition:transform var(--transition-base);will-change:transform;background:#fff;border-radius:50%;position:absolute;bottom:3px;left:3px}.toggle-switch input:checked+.toggle-slider{background:var(--accent)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.settings-grid{gap:var(--space-md);margin-top:var(--space-xs);border-top:1px solid #33394d80;grid-template-columns:1fr 1fr;display:grid}.settings-grid .mute-toggle-row{border-top:none;margin-top:0}.alt-station-row{padding:var(--space-sm) 0;justify-content:space-between;align-items:center;gap:var(--space-md);transition:all var(--transition-base);display:flex}.select-wrapper{flex:1;max-width:160px;position:relative}.select-wrapper:after{content:"▼";color:var(--text-muted);pointer-events:none;font-size:.6rem;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.alt-station-select{appearance:none;background:var(--bg-card);width:100%;color:var(--text-primary);border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-base);padding:.4rem 2rem .4rem .6rem;font-size:.75rem;font-weight:500}.alt-station-select:focus{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow);outline:none}.custom-url-row{transition:grid-template-rows var(--transition-base), opacity var(--transition-base), margin var(--transition-base);opacity:0;grid-template-rows:0fr;margin-top:0;display:grid;overflow:hidden}.custom-url-row.open{opacity:1;margin-top:var(--space-xs);margin-bottom:var(--space-sm);grid-template-rows:1fr}.custom-url-inner{min-height:0}.custom-url-input{border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);transition:all var(--transition-base);background:#14171f80;padding:.6rem .8rem;font-family:inherit;font-size:.75rem}.custom-url-input:focus{border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow);background:#181c25cc;outline:none}.custom-url-input::placeholder{color:var(--text-muted);opacity:.5}.mute-indicator{align-items:center;gap:var(--space-xs);transition:all var(--transition-base);opacity:0;border-radius:999px;padding:.2rem .5rem;font-size:.65rem;font-weight:600;display:inline-flex}.mute-indicator.active{opacity:1}.mute-indicator.muted{background:var(--danger-soft);color:var(--danger)}.mute-indicator.unmuted{background:var(--accent-soft);color:var(--accent)}.score-bars{gap:var(--space-xs) var(--space-md);margin-bottom:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}.score-item{align-items:center;gap:var(--space-xs);display:flex}.score-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;min-width:28px;font-size:.6rem;font-weight:600}.score-bar-track{background:#33394d99;border-radius:999px;flex:1;height:3px;overflow:hidden}.score-bar-fill{height:100%;transition:width var(--transition-base);will-change:width;border-radius:999px}.score-bar-fill.speech{background:var(--speech-color)}.score-bar-fill.music{background:var(--music-color)}.score-bar-fill.singing{background:var(--singing-color)}.score-bar-fill.jingle{background:var(--jingle-color)}.score-value{color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums;min-width:24px;font-size:.55rem}@keyframes fade-in-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.station-btn{animation:.4s ease-out both fade-in-up}.station-btn:first-child{animation-delay:20ms}.station-btn:nth-child(2){animation-delay:40ms}.station-btn:nth-child(3){animation-delay:60ms}.station-btn:nth-child(4){animation-delay:80ms}.station-btn:nth-child(5){animation-delay:.1s}.station-btn:nth-child(6){animation-delay:.12s}.station-btn:nth-child(7){animation-delay:.14s}.station-btn:nth-child(8){animation-delay:.16s}.station-btn:nth-child(9){animation-delay:.18s}.station-btn:nth-child(10){animation-delay:.2s}.station-btn:nth-child(11){animation-delay:.22s}.station-btn:nth-child(12){animation-delay:.24s}.station-btn:nth-child(13){animation-delay:.26s}.station-btn:nth-child(14){animation-delay:.28s}.station-btn:nth-child(15){animation-delay:.3s}@keyframes eq-bar{0%,to{height:3px}25%{height:10px}50%{height:6px}75%{height:12px}}.eq-bars{align-items:flex-end;gap:2px;height:14px;display:flex}.eq-bar{background:var(--accent);border-radius:999px;width:2px;animation:.8s ease-in-out infinite eq-bar}.eq-bar:first-child{height:3px;animation-delay:0s}.eq-bar:nth-child(2){height:6px;animation-delay:.15s}.eq-bar:nth-child(3){height:4px;animation-delay:.3s}.eq-bars.muted .eq-bar{background:var(--danger);animation-play-state:paused;height:3px!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.player-panel{transition:none}}@media (width>=420px){.stations-grid{gap:var(--space-md)}.station-btn{min-height:100px;padding:var(--space-lg) var(--space-md)}.station-name{font-size:.9rem}}@media (width>=600px){.stations-grid{grid-template-columns:repeat(4,1fr);max-width:720px}}@supports (padding:env(safe-area-inset-bottom)){.player-panel{padding-bottom:calc(var(--space-md) + env(safe-area-inset-bottom))}}