*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-page:#0e1117;--bg-card:#161b22;--bg-card-hover:#1c2129;--bg-input:#0d1117;--border:#ffffff0f;--border-hover:#ffffff1a;--border-focus:#22d3a766;--text-primary:#e6edf3;--text-secondary:#8b949e;--text-muted:#484f58;--accent:#22d3a7;--accent-soft:#22d3a71a;--accent-glow:#22d3a740;--danger:#f85149;--danger-soft:#f851491a;--speech-color:#22d3a7;--music-color:#a371f7;--singing-color:#f778ba;--dj-color:#58a6ff;--jingle-color:#d29922;--unknown-color:#6b7280;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--ease:cubic-bezier(.4, 0, .2, 1);--t-fast:.12s var(--ease);--t-base:.2s var(--ease);--t-slow:.35s var(--ease)}html{text-size-adjust:100%;font-size:16px}body{background:var(--bg-page);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}.app-shell{flex-direction:column;max-width:1200px;min-height:100dvh;margin:0 auto;display:flex}.top-bar{padding:var(--sp-4) var(--sp-4) var(--sp-3);z-index:50;background:var(--bg-page);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.top-bar-title{color:var(--text-primary);letter-spacing:-.02em;font-size:1.125rem;font-weight:700}.model-status{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border);transition:all var(--t-base);border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:.6875rem;font-weight:500;display:inline-flex}.model-status.ready{background:var(--accent-soft);color:var(--accent);border-color:var(--border-focus)}.model-status.error{background:var(--danger-soft);color:var(--danger);border-color:#f851494d}.status-dot{background:currentColor;border-radius:50%;width:6px;height:6px}.model-status.ready .status-dot{animation:2s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.station-strip{gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;display:flex;overflow:auto hidden}.station-strip::-webkit-scrollbar{display:none}.station-btn{padding:var(--sp-2) var(--sp-3);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;min-width:120px;max-width:160px;transition:all var(--t-base);-webkit-tap-highlight-color:transparent;user-select:none;scroll-snap-align:start;flex-direction:column;flex-shrink:0;align-items:flex-start;gap:2px;display:flex;position:relative}.station-btn:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}.station-btn:active{transition-duration:80ms;transform:scale(.97)}.station-btn.active{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.station-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.station-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:.8125rem;font-weight:600;line-height:1.3;overflow:hidden}.station-program{color:var(--accent);white-space:nowrap;text-overflow:ellipsis;max-width:100%;min-height:1em;font-size:.6875rem;font-weight:500;overflow:hidden}.station-lang{color:var(--text-muted);font-size:.625rem;font-weight:400}.station-number{display:none}.dashboard{gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);flex-direction:column;flex:1;display:flex}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.card-header{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.card-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;font-size:.8125rem;font-weight:600}.card--player{opacity:0;max-height:0;transition:opacity var(--t-slow), max-height var(--t-slow);border:none;overflow:hidden}.card--player.visible{opacity:1;border:1px solid var(--border);max-height:200px}.player-body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.player-info{margin-bottom:var(--sp-2)}.player-station{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9375rem;font-weight:600;overflow:hidden}.player-program{color:var(--accent);-webkit-line-clamp:1;cursor:pointer;transition:all var(--t-base);-webkit-tap-highlight-color:transparent;-webkit-box-orient:vertical;margin-top:2px;font-size:.75rem;display:-webkit-box;overflow:hidden}.player-program.expanded{-webkit-line-clamp:10;scrollbar-width:none;max-height:20vh;overflow-y:auto}.player-program.expanded::-webkit-scrollbar{display:none}.player-status{align-items:center;gap:var(--sp-2);color:var(--text-secondary);font-size:.75rem;display:flex}.player-label{font-weight:500}.btn-stop{border-radius:var(--radius-sm);background:var(--danger-soft);color:var(--danger);cursor:pointer;transition:all var(--t-fast);-webkit-tap-highlight-color:transparent;border:1px solid #f8514933;align-items:center;gap:5px;padding:5px 12px;font-family:inherit;font-size:.75rem;font-weight:600;display:inline-flex}.btn-stop:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.btn-stop:active{transform:scale(.95)}.stop-icon{background:currentColor;border-radius:2px;width:10px;height:10px}.mute-indicator{transition:all var(--t-base);opacity:0;border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:.6875rem;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)}.class-label{background:var(--bg-page);transition:all var(--t-base);border-radius:999px;padding:2px 10px;font-size:.75rem;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)}.analysis-body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.confidence-row{align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);display:flex}.confidence-label{color:var(--text-muted);flex-shrink:0;min-width:40px;font-size:.6875rem;font-weight:500}.confidence-bar-track{background:#ffffff0f;border-radius:999px;flex:1;height:4px;overflow:hidden}.confidence-bar-fill{background:var(--accent);height:100%;transition:width var(--t-base), background var(--t-base);will-change:width;border-radius:999px}.confidence-value{color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums;min-width:32px;font-size:.6875rem;font-weight:500}.score-bars{gap:var(--sp-2) var(--sp-5);grid-template-columns:1fr 1fr;display:grid}.score-item{align-items:center;gap:var(--sp-2);display:flex}.score-label{color:var(--text-muted);min-width:26px;font-size:.6875rem;font-weight:500}.score-bar-track{background:#ffffff0f;border-radius:999px;flex:1;height:3px;overflow:hidden}.score-bar-fill{height:100%;transition:width var(--t-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:20px;font-size:.625rem;font-weight:500}.controls-body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.control-row{padding:var(--sp-2) 0;justify-content:space-between;align-items:center;min-height:40px;display:flex}.control-label{color:var(--text-secondary);font-size:.8125rem;font-weight:500}.control-divider{background:var(--border);height:1px;margin:var(--sp-1) 0}.toggle-switch{cursor:pointer;-webkit-tap-highlight-color:transparent;width:40px;height:22px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-track{transition:background var(--t-base);background:#30363d;border-radius:999px;position:absolute;inset:0}.toggle-thumb{width:16px;height:16px;transition:transform var(--t-base);will-change:transform;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px}.toggle-switch input:checked+.toggle-track{background:var(--accent)}.toggle-switch input:checked+.toggle-track .toggle-thumb{transform:translate(18px)}.toggle-switch input:focus-visible+.toggle-track{outline:2px solid var(--border-focus);outline-offset:2px}.select-wrapper{min-width:140px;position:relative}.select-wrapper:after{content:"▾";color:var(--text-muted);pointer-events:none;font-size:.75rem;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.control-select{appearance:none;background:var(--bg-input);width:100%;color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--t-base);padding:6px 28px 6px 10px;font-family:inherit;font-size:.75rem;font-weight:500}.control-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow);outline:none}.slider-wrapper{flex:1;align-items:center;max-width:160px;display:flex}.control-slider{appearance:none;cursor:pointer;background:#ffffff0f;border-radius:999px;outline:none;width:100%;height:4px}.control-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid var(--bg-card);cursor:pointer;width:16px;height:16px;transition:transform var(--t-fast);border-radius:50%}.control-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-slider::-webkit-slider-thumb:active{transform:scale(1.1)}.control-slider::-moz-range-thumb{background:var(--accent);border:2px solid var(--bg-card);cursor:pointer;border-radius:50%;width:16px;height:16px}.custom-url-row{transition:grid-template-rows var(--t-base), opacity var(--t-base), margin var(--t-base);opacity:0;grid-template-rows:0fr;margin-top:0;display:grid;overflow:hidden}.custom-url-row.open{opacity:1;margin-top:var(--sp-2);grid-template-rows:1fr}.custom-url-inner{min-height:0}.control-input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);transition:all var(--t-base);padding:8px 12px;font-family:inherit;font-size:.75rem}.control-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow);outline:none}.control-input::placeholder{color:var(--text-muted)}.telemetry-bar{justify-content:center;gap:var(--sp-6);padding:var(--sp-3) var(--sp-4);padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--bg-page);display:flex}.telemetry-item{font-variant-numeric:tabular-nums;align-items:center;gap:4px;font-size:.6875rem;display:flex}.telemetry-label{color:var(--text-muted);font-weight:500}.telemetry-value{color:var(--text-secondary);font-weight:600}.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}@keyframes eq-bar{0%,to{height:3px}25%{height:10px}50%{height:6px}75%{height:12px}}.eq-bars.muted .eq-bar{background:var(--danger);animation-play-state:paused;height:3px!important}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.card{animation:fade-in .3s var(--ease) both}.card--analysis{animation-delay:50ms}.card--controls{animation-delay:.1s}.station-btn{animation:fade-in .25s var(--ease) both}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.station-btn:focus-visible,.btn-stop:focus-visible,.control-select:focus-visible,.control-input:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}@media (width>=768px){.top-bar{padding:var(--sp-5) var(--sp-6) var(--sp-3)}.station-strip{padding:var(--sp-2) var(--sp-6)}.dashboard{gap:var(--sp-4);padding:var(--sp-4) var(--sp-6);grid-template-columns:1fr 1fr;align-items:start;display:grid}.dashboard-primary,.dashboard-secondary{gap:var(--sp-4);flex-direction:column;display:flex}.station-btn{min-width:140px}}@media (width>=1024px){.dashboard{grid-template-columns:1.2fr 1fr}}@supports (padding:env(safe-area-inset-bottom)){.telemetry-bar{padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom))}}