.deck{display:flex;flex-direction:column;gap:0;padding:0;background:var(--bg-surface);border-right:1px solid var(--border);cursor:pointer;transition:background var(--dur-fast);position:relative;overflow:hidden;min-width:0}.deck:last-child{border-right:none}.deck-active{background:var(--bg-raised)}.deck:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--deck-color, transparent);opacity:0;transition:opacity var(--dur-normal)}.deck-playing:before{opacity:1}.deck-a.deck-playing{box-shadow:inset 0 0 40px var(--deck-a-glass);animation:pulse-a 3s ease-in-out infinite}.deck-b.deck-playing{box-shadow:inset 0 0 40px var(--deck-b-glass);animation:pulse-b 3s ease-in-out infinite}.deck-waveform-wrap{position:relative;height:72px;border-radius:var(--radius);background:var(--bg-base);overflow:hidden;flex-shrink:0}.deck-waveform{width:100%;height:100%;display:block}.deck-loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);background:var(--bg-glass);font-size:var(--text-xs);color:var(--text-muted)}.spinner{width:18px;height:18px;border:2px solid var(--border-bright);border-top-color:var(--deck-color, var(--deck-a));border-radius:50%;animation:spin .8s linear infinite}.deck-info{display:flex;align-items:flex-start;gap:var(--space-3);min-width:0}.deck-art{flex-shrink:0}.deck-cover{width:54px;height:54px;border-radius:var(--radius);object-fit:cover;border:1px solid var(--border);display:block}.deck-cover-placeholder{width:54px;height:54px;border-radius:var(--radius);background:var(--bg-raised);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--text-muted)}.deck-meta{flex:1;min-width:0}.deck-title{font-size:var(--text-sm);font-weight:600;color:var(--text-primary);margin-bottom:2px}.deck-artist{font-size:var(--text-xs);color:var(--text-secondary)}.deck-views{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}.deck-header-row{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4) 0;position:relative;z-index:2}.deck-id-badge{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:700;opacity:.25;flex-shrink:0;line-height:1;letter-spacing:-2px}.deck-playing .deck-id-badge{opacity:.6}.deck-body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) var(--space-4) var(--space-3);flex:1;min-width:0;transition:opacity var(--dur-normal),filter var(--dur-normal)}.deck-disabled .deck-body{opacity:.38;filter:grayscale(.55);pointer-events:none}.deck-transport{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.deck-transport .btn{display:inline-flex;align-items:center;justify-content:center;line-height:1}.deck-transport .btn svg{display:block}.play-btn{width:42px;height:42px;border-radius:50%!important;font-size:1rem}.btn-transport{width:34px;height:34px;border-radius:var(--radius)!important}.deck-seek-row{display:flex;align-items:center;gap:var(--space-2)}.deck-time{font-size:var(--text-xs);color:var(--text-secondary);white-space:nowrap}.seek-track{flex:1;height:4px;background:var(--bg-hover);border-radius:var(--radius-full);position:relative;cursor:pointer}.seek-fill{position:absolute;top:0;left:0;height:100%;border-radius:var(--radius-full);transition:width .2s linear}.seek-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;transition:left .2s linear}.cue-btn{font-size:.85rem;position:relative;transition:background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast)!important}.cue-active{box-shadow:0 0 12px currentColor!important}.deck-previewing:after{content:"PREVIEW";position:absolute;top:var(--space-2);right:var(--space-3);font-size:9px;font-family:var(--font-mono);letter-spacing:.12em;color:var(--bg-base);background:var(--deck-color);padding:2px 6px;border-radius:var(--radius-full);animation:blink 1.4s ease-in-out infinite;pointer-events:none}@keyframes blink{0%,to{opacity:1}50%{opacity:.35}}.deck-link-badge{display:flex;align-items:center;gap:var(--space-2);font-size:9px;font-family:var(--font-mono);letter-spacing:.05em;padding:2px 8px;border:1px solid;border-radius:var(--radius-full);background:#ffffff0a;align-self:flex-start}.deck-link-unlink{background:none;border:none;color:inherit;opacity:.5;cursor:pointer;padding:0;font-size:9px;line-height:1}.deck-link-unlink:hover{opacity:1}.deck-disabled{cursor:default}.deck-disabled-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);background:#0000008c;color:#ef4444;font-size:9px;font-family:var(--font-mono);letter-spacing:.12em;pointer-events:none}.power-btn{background:none;border:none;padding:3px;border-radius:var(--radius-sm);cursor:pointer;transition:color var(--dur-fast),opacity var(--dur-fast);opacity:.4;display:flex;align-items:center}.power-btn:hover{opacity:1}.power-btn.power-off{color:#ef4444!important;opacity:1!important}.preview-seek-row{display:flex;align-items:center;gap:var(--space-2);padding:2px 0;opacity:.85}.preview-time{font-size:9px;color:var(--text-muted);white-space:nowrap;min-width:28px}.preview-seek-track{flex:1;height:3px;background:#ffffff1a;border-radius:var(--radius-full);position:relative;cursor:pointer}.preview-seek-fill{position:absolute;top:0;left:0;height:100%;border-radius:var(--radius-full);transition:width .25s linear;opacity:.8}.preview-seek-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;transition:left .25s linear;opacity:.9}.preview-reset-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0;display:flex;align-items:center;opacity:.6;transition:opacity var(--dur-fast)}.preview-reset-btn:hover{opacity:1}.mixer{display:flex;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);background:var(--bg-surface);border-bottom:1px solid var(--border);height:88px;-webkit-user-select:none;user-select:none}.xfader-label{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:700;letter-spacing:-1px;flex-shrink:0;width:28px;text-align:center;background:none;border:none;padding:4px 0;border-radius:var(--radius);cursor:pointer;transition:transform var(--dur-fast),text-shadow var(--dur-fast);line-height:1}.xfader-label:hover{transform:scale(1.15)}.xfader-label:active{transform:scale(.92)}.xfader-a-label{color:#00e5ff;text-shadow:0 0 10px rgba(0,229,255,.5)}.xfader-a-label:hover{text-shadow:0 0 18px rgba(0,229,255,.9)}.xfader-b-label{color:#ffb300;text-shadow:0 0 10px rgba(255,179,0,.5)}.xfader-b-label:hover{text-shadow:0 0 18px rgba(255,179,0,.9)}.mixer-body{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);width:320px}.mixer-label{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.08em;line-height:1}.xfader-track{position:relative;width:100%;height:18px;cursor:ew-resize;display:flex;align-items:center}.xfader-groove{position:absolute;top:50%;left:0;right:0;height:6px;transform:translateY(-50%);background:#ffffff12;border-radius:3px}.xfader-fill{position:absolute;top:50%;transform:translateY(-50%);height:6px;border-radius:3px;pointer-events:none}.xfader-fill-a{left:0;background:#00e5ff59}.xfader-fill-b{background:#ffb30059}.xfader-cap{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:28px;border-radius:4px;background:linear-gradient(180deg,#e0e0e0,#9e9e9e);box-shadow:0 0 0 1px #ffffff26,0 2px 8px #00000080,inset 0 1px #ffffff4d;cursor:ew-resize;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;pointer-events:none;z-index:2}.xfader-grip{width:6px;height:1px;background:#00000059;border-radius:1px;flex-shrink:0}.mixer-controls{display:flex;align-items:center;gap:var(--space-6)}.mixer-control-item{display:flex;align-items:center;gap:var(--space-2);cursor:pointer}.mixer-select{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--text-xs);padding:1px var(--space-2);outline:none;cursor:pointer}.mixer-select:focus{border-color:#00e5ff}.auto-toggle input[type=checkbox]{accent-color:#00e5ff;width:14px;height:14px;cursor:pointer}.auto-toggle .mixer-label{color:var(--text-secondary)}.volume-faders{display:flex;height:100%;background:var(--bg-surface);border-left:1px solid var(--border);border-right:1px solid var(--border);-webkit-user-select:none;user-select:none}.vf-divider{width:1px;background:var(--border);flex-shrink:0;align-self:stretch}.vf-channel{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px 8px 8px;gap:0;min-width:0}.vf-label{font-size:11px;font-family:var(--font-mono);font-weight:700;letter-spacing:.04em;flex-shrink:0;margin-bottom:10px;line-height:1}.vf-val{font-size:9px;color:var(--text-muted);font-family:var(--font-mono);flex-shrink:0;margin-top:8px;line-height:1}.vf-track{flex:1;width:100%;position:relative;cursor:ns-resize;display:flex;justify-content:center}.vf-groove{position:absolute;top:0;bottom:0;width:4px;background:#ffffff12;border-radius:2px;left:50%;transform:translate(-50%)}.vf-fill{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:4px;border-radius:2px;pointer-events:none;transition:height .05s linear}.vf-cap{position:absolute;left:50%;transform:translate(-50%,-50%);width:32px;height:12px;border-radius:4px;border:1px solid transparent;cursor:ns-resize;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:box-shadow .12s ease;pointer-events:none;z-index:2}.vf-track:active .vf-cap{width:34px}.vf-grip{width:18px;height:1px;background:#ffffff59;border-radius:1px;flex-shrink:0}.search-trigger{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);cursor:pointer;font-size:var(--text-sm);font-family:var(--font-ui);transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast);min-width:220px;max-width:440px;width:100%}.search-trigger:hover{border-color:var(--border-bright);color:var(--text-secondary);background:var(--bg-hover)}.search-trigger-text{flex:1;text-align:left}.search-kbd{font-size:10px;font-family:var(--font-mono);padding:1px 5px;border:1px solid var(--border-bright);border-radius:4px;background:var(--bg-base);color:var(--text-muted);flex-shrink:0}.search-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:200;animation:overlayIn .2s var(--ease-out)}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.search-drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);z-index:201;background:var(--bg-surface);border-left:1px solid var(--border-bright);box-shadow:-16px 0 48px #00000080;display:flex;flex-direction:column;overflow:hidden;animation:drawerIn .25s var(--ease-out);outline:none}@keyframes drawerIn{0%{transform:translate(100%)}to{transform:translate(0)}}.search-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);flex-shrink:0}.search-drawer-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}.search-drawer-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);display:flex;align-items:center;transition:color var(--dur-fast),background var(--dur-fast)}.search-drawer-close:hover{color:var(--text-primary);background:var(--bg-hover)}.search-input-wrap{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border);flex-shrink:0;position:relative}.search-input-icon{color:var(--text-muted);flex-shrink:0}.search-input{flex:1;padding:var(--space-2) var(--space-2);font-size:var(--text-sm);background:transparent;border:none;outline:none;color:var(--text-primary)}.search-clear{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px;display:flex;align-items:center;border-radius:var(--radius-sm);transition:color var(--dur-fast)}.search-clear:hover{color:var(--text-primary)}.search-go{flex-shrink:0;font-size:var(--text-sm);display:flex;align-items:center;gap:4px}.suggestions-list{position:absolute;top:100%;left:0;right:0;z-index:10;background:var(--bg-raised);border:1px solid var(--border-bright);border-top:none;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-lg);list-style:none;overflow:hidden}.suggestion-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:background var(--dur-fast)}.suggestion-item:hover{background:var(--bg-hover);color:var(--text-primary)}.search-drawer-body{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}.search-section-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-family:var(--font-mono);letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--space-3);text-transform:uppercase}.genre-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}.genre-chip{display:flex;align-items:center;gap:4px;padding:var(--space-2) var(--space-3);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--dur-fast);white-space:nowrap}.genre-chip:hover{border-color:var(--deck-a);color:var(--deck-a);background:#00e5ff0f}.search-skeleton{display:flex;flex-direction:column;gap:var(--space-3)}.skeleton-row{display:flex;gap:var(--space-3);align-items:center}.skeleton-thumb{width:52px;height:36px;border-radius:var(--radius-sm);flex-shrink:0}.skeleton-meta{flex:1;display:flex;flex-direction:column;gap:var(--space-2)}.skeleton-line{height:10px;border-radius:var(--radius-sm)}.shimmer{background:linear-gradient(90deg,var(--bg-raised) 25%,var(--bg-hover) 50%,var(--bg-raised) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.search-results{display:flex;flex-direction:column;gap:var(--space-2)}.search-result{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius);background:var(--bg-raised);transition:background var(--dur-fast)}.search-result:hover{background:var(--bg-hover)}.result-thumb{width:52px;height:36px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0;background:var(--bg-hover)}.result-meta{flex:1;min-width:0}.result-title{font-size:var(--text-sm);font-weight:500;margin-bottom:2px}.result-sub{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.result-uploader{font-size:var(--text-xs);color:var(--text-secondary)}.result-duration,.result-views{display:flex;align-items:center;gap:3px;font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono)}.result-dot{color:var(--text-muted);font-size:var(--text-xs)}.result-actions{display:flex;gap:var(--space-1);flex-shrink:0}.result-btn{display:flex;align-items:center;gap:3px;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-family:var(--font-mono)}.search-error{color:var(--danger);font-size:var(--text-sm);padding:var(--space-3);text-align:center}.search-empty{color:var(--text-muted);font-size:var(--text-sm);padding:var(--space-6);text-align:center}.spin{animation:spin .7s linear infinite}.folder-picker-modal{width:500px;max-width:94vw;max-height:70vh;display:flex;flex-direction:column}.folder-picker-path-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg-raised)}.folder-picker-current{font-size:var(--text-sm);font-family:var(--font-mono);color:var(--deck-a);flex:1;min-width:0}.folder-picker-list{flex:1;overflow-y:auto;padding:var(--space-2);min-height:200px;max-height:400px}.folder-picker-item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);background:none;border:none;color:var(--text-primary);font-size:var(--text-sm);cursor:pointer;border-radius:var(--radius);transition:background var(--dur-fast);text-align:left}.folder-picker-item:hover{background:var(--bg-hover)}.folder-picker-item svg:first-child{color:var(--text-muted);flex-shrink:0}.folder-picker-name{flex:1;min-width:0}.folder-picker-arrow{color:var(--text-muted);flex-shrink:0;opacity:0;transition:opacity var(--dur-fast)}.folder-picker-item:hover .folder-picker-arrow{opacity:1}.folder-picker-loading,.folder-picker-error,.folder-picker-empty{padding:var(--space-8);text-align:center;color:var(--text-muted);font-size:var(--text-sm)}.folder-picker-error{color:var(--danger)}.folder-picker-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);flex-shrink:0}.btn-primary{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--deck-a);color:var(--bg-base);border-color:var(--deck-a);font-weight:600}.btn-primary:hover{background:var(--deck-a-bright);border-color:var(--deck-a-bright)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.playlist-panel{display:flex;flex:1;min-width:0;overflow:hidden}.nav-rail{display:flex;flex-direction:column;width:64px;flex-shrink:0;background:var(--bg-surface);border-right:1px solid var(--border);padding:var(--space-2) 0;gap:var(--space-1);align-items:center}.nav-rail-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:52px;padding:var(--space-2) var(--space-1);border:none;background:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius);transition:all var(--dur-fast);position:relative}.nav-rail-item:hover{color:var(--text-secondary);background:var(--bg-hover)}.nav-rail-item.nav-active{color:var(--deck-a);background:var(--deck-a-glass)}.nav-rail-item.nav-active:before{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);height:3px;width:60%;background:var(--deck-a);border-radius:var(--radius-full) var(--radius-full) 0 0}.nav-rail-label{font-size:9px;font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;line-height:1}.playlist-sidebar{flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--bg-surface);min-width:160px;max-width:400px}.sidebar-section{flex:1;display:flex;flex-direction:column;overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);flex-shrink:0}.sidebar-title{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.08em}.sidebar-actions{display:flex;gap:var(--space-1)}.sidebar-btn{min-width:26px;min-height:26px;font-size:.8rem;padding:0;display:inline-flex;align-items:center;justify-content:center}.yt-import-row{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);flex-shrink:0}.yt-import-icon{color:var(--text-muted);flex-shrink:0}.yt-import-input{flex:1;min-width:0;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-ui)}.yt-import-input::placeholder{color:var(--text-muted)}.yt-import-input:focus{border-color:var(--deck-a);outline:none}.artist-icon{color:var(--text-muted);flex-shrink:0}.playlist-list{flex:1;overflow-y:auto;list-style:none;padding:var(--space-2)}.playlist-empty-hint{padding:var(--space-4);font-size:var(--text-xs);color:var(--text-muted);text-align:center;line-height:1.6}.playlist-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius);cursor:pointer;transition:background var(--dur-fast);position:relative;-webkit-user-select:none;user-select:none}.playlist-item:hover{background:var(--bg-hover)}.playlist-item:hover .playlist-actions,.playlist-item:hover .effect-actions{opacity:1}.playlist-active{background:var(--bg-raised)}.playlist-active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:60%;background:var(--deck-a);border-radius:var(--radius-full)}.playlist-name{flex:1;font-size:var(--text-sm);min-width:0}.playlist-count{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono);flex-shrink:0}.playlist-actions{display:flex;gap:2px;opacity:0;transition:opacity var(--dur-fast);flex-shrink:0}.playlist-rename{padding:2px var(--space-2);font-size:var(--text-sm)}.icon-btn{background:none;border:none;cursor:pointer;font-size:.7rem;padding:2px;opacity:.6;transition:opacity var(--dur-fast);display:inline-flex;align-items:center}.icon-btn:hover{opacity:1}.icon-btn.danger:hover{color:var(--danger)}.effect-actions{display:flex;gap:3px;flex-shrink:0;opacity:0;transition:opacity var(--dur-fast)}.effect-play-btn{color:var(--success)!important}.effect-stop-btn{color:var(--danger)!important}.local-path-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);flex-shrink:0}.local-current-path{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-secondary);flex:1;min-width:0}.resize-handle{width:4px;cursor:col-resize;background:transparent;flex-shrink:0;transition:background var(--dur-fast);position:relative}.resize-handle:hover,.resize-handle:active{background:var(--deck-a);opacity:.5}.resize-handle:after{content:"";position:absolute;left:-4px;right:-4px;top:0;bottom:0}.track-list-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-base)}.track-list-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border);flex-shrink:0}.track-list-title{font-size:var(--text-sm);font-weight:600;display:flex;align-items:center}.track-list-count{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono)}.track-list-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);color:var(--text-muted);font-size:var(--text-sm);text-align:center;padding:var(--space-8)}.empty-icon{font-size:2.5rem;opacity:.4}.empty-hint{font-size:var(--text-xs)}.track-list{flex:1;overflow-y:auto;list-style:none;padding:var(--space-2)}.track-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius);transition:background var(--dur-fast);cursor:grab}.track-item:hover{background:var(--bg-raised)}.track-item:hover .track-actions{opacity:1}.track-dragging{opacity:.5;background:var(--bg-hover)}.track-drag-handle{color:var(--text-muted);font-size:.9rem;cursor:grab;flex-shrink:0}.track-num{font-size:var(--text-xs);color:var(--text-muted);min-width:20px}.track-thumb{width:48px;height:33px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0;background:var(--bg-raised)}.track-meta{flex:1;min-width:0}.track-title{font-size:var(--text-sm);font-weight:500;margin-bottom:1px}.track-artist{font-size:var(--text-xs);color:var(--text-secondary)}.track-duration{font-size:var(--text-xs);color:var(--text-muted);flex-shrink:0}.track-actions{display:flex;gap:var(--space-1);flex-shrink:0;opacity:0;transition:opacity var(--dur-fast)}.track-btn{display:inline-flex;align-items:center;gap:2px;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-family:var(--font-mono)}.danger-btn{border-color:var(--danger);color:var(--danger)}.danger-btn:hover{background:var(--danger-glow)}.playlist-link-btns{display:none;gap:3px;flex-shrink:0}.playlist-item:hover .playlist-link-btns{display:flex}.link-deck-btn{font-size:9px;font-family:var(--font-mono);font-weight:700;padding:1px 5px;border-radius:3px;border:1px solid var(--border);background:var(--bg-raised);color:var(--text-muted);cursor:pointer;transition:all var(--dur-fast);line-height:1.4}.link-deck-btn:hover{color:var(--text-primary);border-color:var(--border-bright)}.link-active-a{border-color:#00e5ff;color:#00e5ff;background:#00e5ff1f}.link-active-b{border-color:#ffb300;color:#ffb300;background:#ffb3001f}.artist-albums-section{flex-shrink:0;border-bottom:1px solid var(--border);padding:var(--space-2);max-height:200px;overflow-y:auto}.section-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;padding:var(--space-2) var(--space-4);flex-shrink:0}.section-loading{padding:var(--space-4);text-align:center;font-size:var(--text-xs);color:var(--text-muted)}.album-item{border-radius:var(--radius);margin-bottom:2px}.album-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);width:100%;background:none;border:none;color:var(--text-primary);font-size:var(--text-sm);cursor:pointer;border-radius:var(--radius);transition:background var(--dur-fast);text-align:left}.album-header:hover{background:var(--bg-hover)}.album-title{flex:1;min-width:0}.album-count{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono);flex-shrink:0}.album-actions{padding:var(--space-2) var(--space-4)}.btn-sm{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-family:var(--font-mono);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;transition:all var(--dur-fast)}.btn-sm:hover{border-color:var(--deck-a);color:var(--deck-a)}.section-count{margin-left:auto;font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono);padding:1px 6px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-full)}.pagination-bar{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);flex-shrink:0;background:var(--bg-surface)}.pagination-btn{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-size:var(--text-xs);font-family:var(--font-mono);padding:var(--space-1) var(--space-3);cursor:pointer;transition:all var(--dur-fast)}.pagination-btn:hover:not(:disabled){border-color:var(--deck-a);color:var(--deck-a)}.pagination-btn:disabled{opacity:.3;cursor:not-allowed}.pagination-info{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-muted);min-width:90px;text-align:center}.local-setup{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-3)}.local-browse-btn{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);padding:var(--space-2) var(--space-3);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;transition:all var(--dur-fast)}.local-browse-btn:hover{border-color:var(--deck-a);color:var(--deck-a)}.local-permission-note{font-size:10px;color:var(--text-muted);text-align:center;line-height:1.4;opacity:.7;padding:0 var(--space-2)}.local-browse-server{border-color:var(--deck-b)!important;color:var(--deck-b)!important}.local-browse-server:hover{background:#ffb30026!important}.local-error-note{font-size:10px;color:#ef4444;text-align:center;line-height:1.4;padding:0 var(--space-2)}.local-path-bar{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-bottom:1px solid var(--border);min-height:28px}.local-current-path{font-size:var(--text-xs);color:var(--text-muted);flex:1;min-width:0}.local-root-info{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);min-height:34px}.local-root-icon{color:var(--deck-a);flex-shrink:0}.local-root-name{flex:1;min-width:0;font-size:var(--text-xs);font-weight:600;color:var(--text-primary)}.local-nav-header{gap:var(--space-2)}.local-nav-left{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0}.local-back-btn{flex-shrink:0;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;transition:all var(--dur-fast)}.local-back-btn:hover{border-color:var(--deck-a);color:var(--deck-a)}.local-folder-item{cursor:pointer;background:var(--bg-surface);border-bottom:1px solid var(--border)}.local-folder-item:hover{background:var(--bg-raised)}.local-folder-item:last-of-type{border-bottom:2px solid var(--border);margin-bottom:var(--space-1)}.request-link-banner{display:flex;align-items:center;gap:.35rem;padding:.4rem var(--space-3);margin:var(--space-1) var(--space-2) 0;background:#3b82f614;border:1px solid rgba(59,130,246,.22);border-radius:var(--radius);font-size:.7rem;color:var(--text-muted)}.request-link-icon{color:#3b82f6;flex-shrink:0}.request-link-label{color:var(--text-secondary);flex-shrink:0}.request-link-url{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3b82f6;font-family:var(--font-mono)}.request-link-copy{flex-shrink:0;color:var(--text-muted)}.request-link-copy:hover{color:#3b82f6!important}.icon-btn.public-active{color:#3b82f6;opacity:1}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:100;animation:drawer-bg-in var(--dur-normal) ease forwards}@keyframes drawer-bg-in{0%{opacity:0}to{opacity:1}}.drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;background:var(--bg-surface);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:101;animation:drawer-slide-in .22s cubic-bezier(.4,0,.2,1) forwards;overflow:hidden}@keyframes drawer-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);background:var(--bg-raised);flex-shrink:0}.drawer-title{font-size:var(--text-base);font-weight:700;color:var(--text-primary);letter-spacing:-.01em;margin:0}.drawer-body{flex:1;overflow-y:auto;padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}.drawer-body::-webkit-scrollbar{width:4px}.drawer-body::-webkit-scrollbar-track{background:transparent}.drawer-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.settings-section{display:flex;flex-direction:column;gap:var(--space-3)}.settings-section-title{font-size:var(--text-xs);font-family:var(--font-mono);font-weight:600;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;padding-bottom:var(--space-2);border-bottom:1px solid var(--border);margin:0}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.toggle-row{cursor:pointer}.settings-label{font-size:var(--text-sm);color:var(--text-secondary);flex:1;min-width:0}.settings-control{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.settings-slider{width:100px;accent-color:#00e5ff;cursor:pointer}.settings-val{font-size:var(--text-xs);color:var(--text-secondary);min-width:36px;text-align:right}.settings-toggle{accent-color:#00e5ff;width:16px;height:16px;cursor:pointer}.settings-about{font-size:var(--text-xs);color:var(--text-muted);line-height:1.6;margin:0}.shortcuts-table{width:100%;border-collapse:collapse;font-size:var(--text-xs)}.shortcuts-table th{text-align:left;color:var(--text-muted);font-weight:600;padding:var(--space-1) var(--space-2);border-bottom:1px solid var(--border);font-family:var(--font-mono);letter-spacing:.06em}.shortcuts-table td{padding:var(--space-2) var(--space-2);color:var(--text-secondary);border-bottom:1px solid rgba(255,255,255,.03);vertical-align:middle}.shortcuts-table tr:last-child td{border-bottom:none}.key-bind-btn{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--text-xs);padding:2px 8px;min-width:36px;text-align:center;cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast);line-height:1.6}.key-bind-btn:hover{border-color:#00e5ff44;background:var(--bg-hover)}.key-bind-btn.recording{border-color:#00e5ff;background:#00e5ff1f;color:#00e5ff;animation:blink .8s ease-in-out infinite}.shortcuts-reset-btn{margin-top:var(--space-2);font-size:var(--text-xs);padding:var(--space-1) var(--space-3);align-self:flex-start}.shortcut-group-label{font-size:9px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:var(--space-2) var(--space-2) var(--space-1);opacity:.7}.broadcast-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:100;animation:broadcast-fade-in var(--dur-normal) var(--ease-out) both}@keyframes broadcast-fade-in{0%{opacity:0}to{opacity:1}}.broadcast-drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:90vw;background:var(--bg-surface);border-left:1px solid var(--border);box-shadow:-8px 0 32px #00000080;z-index:101;display:flex;flex-direction:column;animation:broadcast-slide-in var(--dur-slow) var(--ease-out) both}@keyframes broadcast-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.broadcast-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);flex-shrink:0}.broadcast-header-left{display:flex;align-items:center;gap:var(--space-3)}.broadcast-icon{flex-shrink:0}.broadcast-title{font-size:var(--text-md);font-weight:600;color:var(--text-primary);letter-spacing:.02em}.broadcast-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);color:var(--text-secondary);font-family:var(--font-ui);font-size:var(--text-base);cursor:pointer;transition:all var(--dur-fast);flex-shrink:0}.broadcast-close:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-bright)}.broadcast-body{flex:1;overflow-y:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}.protocol-tabs{display:flex;gap:var(--space-1);background:var(--bg-raised);border-radius:var(--radius);padding:3px}.protocol-tab{flex:1;padding:var(--space-2) var(--space-3);border:none;border-radius:calc(var(--radius) - 2px);background:transparent;color:var(--text-secondary);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}.protocol-tab:hover{color:var(--text-primary)}.protocol-tab.active{background:var(--bg-hover);color:var(--text-primary);box-shadow:var(--shadow-sm)}.broadcast-fields{display:flex;flex-direction:column;gap:var(--space-4)}.broadcast-field{display:flex;flex-direction:column;gap:var(--space-1)}.broadcast-field-label{font-size:var(--text-xs);font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}.broadcast-input{width:100%;padding:var(--space-2) var(--space-3);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--text-sm);outline:none;transition:border-color var(--dur-fast)}.broadcast-input:focus{border-color:var(--live-red-dim)}.broadcast-input::placeholder{color:var(--text-muted);font-family:var(--font-ui)}.broadcast-inline-row{display:flex;gap:var(--space-3)}.broadcast-inline-row>.broadcast-field{flex:1}.broadcast-inline-row>.broadcast-field.small{flex:0 0 100px}.broadcast-select{padding:var(--space-2) var(--space-3);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-sm);outline:none;cursor:pointer}.broadcast-select:focus{border-color:var(--live-red-dim)}.broadcast-actions{display:flex;align-items:center;gap:var(--space-3);margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--border)}.btn-go-live{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border:1px solid var(--live-red-dim);border-radius:var(--radius);background:var(--live-red-bg);color:var(--live-red);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}.btn-go-live:hover{background:#ee2b2b33;border-color:var(--live-red);box-shadow:0 0 16px var(--live-red-glow)}.btn-go-live:active{transform:scale(.97)}.btn-go-live.is-live{background:var(--live-red);border-color:var(--live-red);color:#fff;box-shadow:0 0 20px var(--live-red-glow),0 0 40px #ee2b2b26}.btn-go-live.is-live:hover{background:#d61f1f}.btn-go-live.is-connecting{border-color:var(--deck-a-dim);background:var(--deck-a-glass);color:var(--deck-a);cursor:wait}.btn-go-live:disabled{opacity:.4;cursor:not-allowed}.live-dot-sm{width:8px;height:8px;border-radius:50%;background:currentColor;animation:live-pulse 1.2s ease-in-out infinite}.broadcast-status{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius);font-size:var(--text-sm);background:var(--bg-raised)}.broadcast-status.is-live{background:var(--live-red-bg);border:1px solid hsla(0,85%,55%,.2)}.broadcast-status.is-error{background:var(--danger-glow);border:1px solid hsla(0,75%,55%,.3)}.broadcast-status.is-connecting{background:var(--deck-a-glass);border:1px solid hsla(185,100%,50%,.15)}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.live{background:var(--live-red);animation:live-pulse 1.2s ease-in-out infinite}.status-dot.connecting{background:var(--deck-a);animation:live-pulse .8s ease-in-out infinite}.status-dot.error{background:var(--danger)}.status-dot.idle{background:var(--text-muted)}.status-text{color:var(--text-secondary);flex:1}.status-uptime{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);min-width:48px;text-align:right}.status-error{font-size:var(--text-xs);color:var(--danger);padding:var(--space-1) 0;word-break:break-all}.header-live-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:3px var(--space-3);border-radius:var(--radius-full);background:var(--live-red);color:#fff;font-family:var(--font-ui);font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 12px var(--live-red-glow),0 0 24px #ee2b2b26;animation:fadeIn var(--dur-normal) var(--ease-out) both;white-space:nowrap;flex-shrink:0}.header-live-dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:live-pulse 1.2s ease-in-out infinite}.btn-broadcast{position:relative}.btn-broadcast.is-live{color:var(--live-red);border-color:var(--live-red-dim);background:var(--live-red-bg)}.btn-broadcast.is-live:hover{box-shadow:0 0 12px var(--live-red-glow)}.broadcast-section-label{font-size:var(--text-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;padding-top:var(--space-2);border-top:1px solid var(--border);margin-top:var(--space-1)}.broadcast-now-playing{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius);background:#33cc8014;border:1px solid hsla(150,60%,50%,.2);font-size:var(--text-xs);min-width:0}.now-playing-dot{width:6px;height:6px;border-radius:50%;background:#33cc80;flex-shrink:0;animation:live-pulse 1.8s ease-in-out infinite}.now-playing-text{color:#70dba6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;font-family:var(--font-ui)}.app{display:grid;grid-template-rows:auto auto auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-base)}.app-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-5);background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:10}.app-logo{display:flex;align-items:center;gap:var(--space-2);white-space:nowrap;flex-shrink:0}.logo-icon{font-size:1.4rem}.logo-text{font-size:var(--text-lg);color:var(--text-secondary);letter-spacing:-.01em}.logo-text strong{color:var(--deck-a);font-weight:700}.header-search{flex:1;min-width:0;display:flex;justify-content:center}.header-settings{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px}.decks-row{display:grid;grid-template-columns:1fr 140px 1fr;border-bottom:1px solid var(--border);min-height:0}.mixer-row{border-bottom:1px solid var(--border)}.content-row{display:flex;min-height:0;overflow:hidden}.app-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-5);background:var(--bg-surface);border-top:1px solid var(--border);gap:var(--space-6);flex-shrink:0}.footer-devices{display:flex;align-items:center;gap:var(--space-4)}.footer-device{display:flex;align-items:center;gap:var(--space-2)}.footer-master{display:flex;align-items:center;gap:var(--space-3);min-width:220px}.footer-label{font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap;flex-shrink:0}.footer-device-label{font-size:var(--text-xs);color:var(--text-muted)}.footer-vol{font-size:var(--text-sm);color:var(--text-secondary);min-width:36px}.device-select{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-sm);padding:var(--space-1) var(--space-3);outline:none;cursor:pointer;max-width:200px}.device-select:focus{border-color:var(--deck-a)}.not-supported-badge{font-size:var(--text-xs);color:var(--text-muted);background:var(--bg-raised);padding:2px var(--space-2);border-radius:var(--radius-full);border:1px solid var(--border)}.master-slider{flex:1}.header-logout{color:var(--text-muted);flex-shrink:0}.header-logout:hover{color:var(--danger, #ef4444)}.auth-gate-loading{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg, #0d0d0d)}.auth-spinner{color:var(--deck-a, #3b82f6);animation:auth-spin .8s linear infinite}@keyframes auth-spin{to{transform:rotate(360deg)}}.auth-gate{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg, #0d0d0d);padding:1.5rem}.auth-card{display:flex;flex-direction:column;gap:1.25rem;background:var(--surface, #1a1a1a);border:1px solid var(--border, #2a2a2a);border-radius:14px;padding:2.25rem 2rem;width:100%;max-width:360px;box-shadow:0 20px 60px #00000080}.auth-logo{display:flex;align-items:center;gap:.6rem;justify-content:center}.auth-logo-icon{color:var(--deck-a, #3b82f6)}.auth-logo-text{font-size:1.25rem;color:var(--text, #e8e8e8);letter-spacing:-.01em}.auth-lock{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.8rem;color:var(--text-muted, #888);text-transform:uppercase;letter-spacing:.06em}.auth-field{display:flex;flex-direction:column;gap:.5rem}.auth-input{width:100%;padding:.65rem .85rem;background:var(--bg, #0d0d0d);border:1px solid var(--border, #2a2a2a);border-radius:8px;color:var(--text, #e8e8e8);font-size:.9rem;outline:none;transition:border-color .15s;box-sizing:border-box}.auth-input:focus{border-color:var(--deck-a, #3b82f6)}.auth-error{margin:0;padding:.5rem .75rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:7px;color:#f87171;font-size:.82rem;text-align:center}.auth-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem;background:var(--deck-a, #3b82f6);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s}.auth-btn:hover:not(:disabled){opacity:.9}.auth-btn:active:not(:disabled){transform:scale(.98)}.auth-btn:disabled{opacity:.45;cursor:not-allowed}.auth-spinner-inline{animation:auth-spin .8s linear infinite}.auth-hint{margin:0;font-size:.78rem;color:var(--text-muted, #888);text-align:center}.auth-request-link{color:var(--deck-a, #3b82f6);text-decoration:none}.auth-request-link:hover{text-decoration:underline}:root{--req-bg: hsl(225, 15%, 6%);--req-surface: hsl(225, 12%, 10%);--req-raised: hsl(225, 12%, 14%);--req-border: hsl(225, 10%, 18%);--req-border2: hsl(225, 10%, 25%);--req-text: hsl(220, 10%, 88%);--req-muted: hsl(220, 8%, 50%);--req-accent: hsl(220, 90%, 60%);--req-accent-d: hsl(220, 90%, 45%);--req-success: hsl(145, 65%, 48%);--req-error: hsl(0, 75%, 55%);--deck-a: hsl(185, 100%, 50%);--deck-a-glow: hsla(185, 100%, 50%, .18);--deck-a-glass: hsla(185, 100%, 50%, .06);--deck-a-border: hsla(185, 100%, 50%, .35);--deck-b: hsl(35, 100%, 55%);--deck-b-glow: hsla(35, 100%, 55%, .18);--deck-b-glass: hsla(35, 100%, 55%, .06);--deck-b-border: hsla(35, 100%, 55%, .35)}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--req-bg);color:var(--req-text);font-family:DM Sans,ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.req-loading{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--req-bg)}.req-spinner{color:var(--deck-a);animation:req-spin 1s linear infinite}@keyframes req-spin{to{transform:rotate(360deg)}}.req-closed{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem;padding:2rem;text-align:center}.req-closed-icon{color:var(--req-muted)}.req-closed h2{margin:0;font-size:1.4rem;font-weight:600;color:var(--req-text)}.req-closed p{margin:0;color:var(--req-muted);max-width:320px;line-height:1.6;font-size:.9rem}.req-app{min-height:100vh;display:flex;flex-direction:column}.req-header{background:#0f1115d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--req-border);padding:0 1.25rem;height:52px;position:sticky;top:0;z-index:20}.req-header-inner{max-width:680px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between}.req-logo{display:flex;align-items:center;gap:.5rem}.req-logo-icon{color:var(--deck-a)}.req-logo-text{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--req-text)}.req-live-badge{display:flex;align-items:center;gap:.35rem;background:#ee2b2b1f;border:1px solid hsla(0,85%,55%,.3);color:#f25a5a;font-size:.65rem;font-weight:700;letter-spacing:.1em;padding:.25rem .6rem;border-radius:100px}.req-live-dot{width:6px;height:6px;border-radius:50%;background:#f04242;animation:live-pulse 1.4s ease-in-out infinite}@keyframes live-pulse{0%,to{opacity:1}50%{opacity:.35}}.req-main{flex:1;max-width:680px;width:100%;margin:0 auto;padding:1.5rem 1.25rem 5rem;display:flex;flex-direction:column;gap:1.25rem}.np-section-label,.pl-section-label{display:flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--req-muted);margin-bottom:.65rem}.np-hint{font-weight:400;letter-spacing:0;text-transform:none;opacity:.7;font-size:.68rem}.np-decks{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}@media (max-width: 420px){.np-decks{grid-template-columns:1fr}}.np-deck{border-radius:12px;padding:.85rem 1rem;border:1px solid transparent;transition:box-shadow .3s,border-color .3s,opacity .3s;min-height:90px;display:flex;flex-direction:column;gap:.5rem}.np-deck-a{background:var(--deck-a-glass);border-color:var(--deck-a-border)}.np-deck-b{background:var(--deck-b-glass);border-color:var(--deck-b-border)}.np-deck-a.np-deck-onair{box-shadow:0 0 0 1px var(--deck-a),0 0 24px var(--deck-a-glow),0 0 48px #00eaff14;border-color:var(--deck-a);animation:deck-pulse-a 2s ease-in-out infinite}.np-deck-b.np-deck-onair{box-shadow:0 0 0 1px var(--deck-b),0 0 24px var(--deck-b-glow),0 0 48px #ff9f1a14;border-color:var(--deck-b);animation:deck-pulse-b 2s ease-in-out infinite}.np-deck:not(.np-deck-onair):not(.np-deck-empty){opacity:.55}.np-deck-empty{opacity:.3}@keyframes deck-pulse-a{0%,to{box-shadow:0 0 0 1px var(--deck-a),0 0 20px var(--deck-a-glow)}50%{box-shadow:0 0 0 1px var(--deck-a),0 0 36px #00eaff59}}@keyframes deck-pulse-b{0%,to{box-shadow:0 0 0 1px var(--deck-b),0 0 20px var(--deck-b-glow)}50%{box-shadow:0 0 0 1px var(--deck-b),0 0 36px #ff9f1a59}}.np-deck-header{display:flex;align-items:center;justify-content:space-between}.np-deck-label{display:flex;align-items:center;gap:.3rem;font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.np-deck-a .np-deck-label{color:var(--deck-a)}.np-deck-b .np-deck-label{color:var(--deck-b)}.np-disc-spin{animation:np-spin 2s linear infinite}@keyframes np-spin{to{transform:rotate(360deg)}}.np-badge{font-size:.58rem;font-weight:700;letter-spacing:.1em;padding:.15rem .45rem;border-radius:100px}.np-badge-air{display:flex;align-items:center;gap:.3rem;background:#ee2b2b26;border:1px solid hsla(0,85%,55%,.4);color:#f47171}.np-air-dot{width:5px;height:5px;border-radius:50%;background:#f04242;animation:live-pulse 1.2s ease-in-out infinite}.np-badge-deck{background:#737b8c1f;border:1px solid hsla(220,10%,50%,.2);color:var(--req-muted)}.np-deck-idle{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--req-muted);flex:1}.np-idle-waves{animation:np-idle-wave 2.5s ease-in-out infinite}@keyframes np-idle-wave{0%,to{opacity:.25}50%{opacity:.6}}.np-deck-info{display:flex;align-items:center;gap:.65rem;flex:1}.np-deck-thumb{width:42px;height:30px;object-fit:cover;border-radius:5px;flex-shrink:0;background:var(--req-raised)}.np-deck-meta{flex:1;min-width:0}.np-deck-title{font-size:.8rem;font-weight:600;color:var(--req-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.np-deck-artist{font-size:.7rem;color:var(--req-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}.np-deck-dur{display:flex;align-items:center;gap:.2rem;font-size:.65rem;color:var(--req-muted);margin-top:.25rem;opacity:.7}.pl-section-label{display:flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--req-muted);margin-bottom:.6rem}.pl-cards{display:flex;flex-wrap:wrap;gap:.5rem}.pl-card{display:flex;align-items:center;gap:.4rem;padding:.5rem .9rem;background:var(--req-surface);border:1px solid var(--req-border);border-radius:100px;color:var(--req-muted);font-size:.82rem;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s,background .15s;outline:none}.pl-card:hover{border-color:var(--req-border2);color:var(--req-text)}.pl-card-selected{background:#3d7af51a;border-color:var(--req-accent);color:var(--req-text)}.pl-card-icon{color:inherit}.pl-card-check{color:var(--req-accent)}.pl-single-banner{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--req-muted);padding:.55rem .9rem;background:var(--req-surface);border:1px solid var(--req-border);border-radius:10px}.pl-single-banner strong{color:var(--req-text)}.req-search-wrap{position:relative;display:flex;align-items:center}.req-search-icon{position:absolute;left:.9rem;color:var(--req-muted);pointer-events:none}.req-search-input{width:100%;padding:.8rem 2.8rem;background:var(--req-surface);border:1px solid var(--req-border);border-radius:12px;color:var(--req-text);font-size:.95rem;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}.req-search-input:focus{border-color:var(--req-accent);box-shadow:0 0 0 3px #3d7af51f}.req-search-input::placeholder{color:var(--req-muted)}.req-search-spinner{position:absolute;right:.9rem;color:var(--req-muted);animation:req-spin .8s linear infinite}.req-error{color:var(--req-error);font-size:.84rem;text-align:center;margin:0}.req-no-results{color:var(--req-muted);font-size:.85rem;text-align:center;margin:0}.req-empty{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:3rem 1rem;color:var(--req-muted);text-align:center}.req-empty-icon{color:var(--req-border2)}.req-empty p{margin:0;font-size:.88rem;line-height:1.6;max-width:280px}.req-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}.req-result{display:flex;align-items:center;gap:.75rem;background:var(--req-surface);border:1px solid var(--req-border);border-radius:10px;padding:.6rem .75rem;transition:border-color .15s,background .15s}.req-result:hover{background:var(--req-raised);border-color:var(--req-border2)}.req-thumb{width:56px;height:40px;object-fit:cover;border-radius:6px;background:var(--req-raised);flex-shrink:0}.req-meta{flex:1;min-width:0}.req-title{font-size:.87rem;font-weight:500;color:var(--req-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.req-sub{display:flex;align-items:center;gap:.35rem;margin-top:.2rem;font-size:.74rem;color:var(--req-muted)}.req-duration{display:flex;align-items:center;gap:.2rem}.req-dot{opacity:.4}.req-add-btn{display:flex;align-items:center;gap:.3rem;padding:.42rem .8rem;border:none;border-radius:8px;font-size:.8rem;font-weight:600;font-family:inherit;cursor:pointer;flex-shrink:0;transition:opacity .15s,transform .1s,background .2s;white-space:nowrap}.req-add-idle{background:var(--req-accent);color:#fff}.req-add-idle:hover{opacity:.85}.req-add-idle:active{transform:scale(.95)}.req-add-adding{background:var(--req-accent);color:#fff;opacity:.6;cursor:wait}.req-add-done{background:var(--req-success);color:#fff;cursor:default}.req-add-error{background:var(--req-error);color:#fff}.req-btn-spinner{animation:req-spin .8s linear infinite}.req-toasts{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:.45rem;align-items:center;z-index:100;pointer-events:none}.req-toast{padding:.55rem 1.2rem;border-radius:100px;font-size:.84rem;font-weight:500;white-space:nowrap;animation:req-toast-in .22s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.req-toast-success{background:var(--req-success);color:#fff}.req-toast-error{background:var(--req-error);color:#fff}.req-toast-info{background:var(--req-accent);color:#fff}@keyframes req-toast-in{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}:root{--bg-base: hsl(225, 15%, 6%);--bg-surface: hsl(225, 12%, 10%);--bg-raised: hsl(225, 12%, 14%);--bg-hover: hsl(225, 12%, 18%);--bg-glass: hsla(225, 15%, 10%, .7);--bg-glass-light: hsla(225, 15%, 20%, .4);--deck-a: hsl(185, 100%, 50%);--deck-a-dim: hsl(185, 100%, 30%);--deck-a-glow: hsla(185, 100%, 50%, .25);--deck-a-glass: hsla(185, 100%, 50%, .08);--deck-b: hsl(35, 100%, 55%);--deck-b-dim: hsl(35, 100%, 35%);--deck-b-glow: hsla(35, 100%, 55%, .25);--deck-b-glass: hsla(35, 100%, 55%, .08);--text-primary: hsl(220, 10%, 88%);--text-secondary: hsl(220, 8%, 55%);--text-muted: hsl(220, 6%, 38%);--border: hsl(225, 10%, 18%);--border-bright: hsl(225, 10%, 25%);--danger: hsl(0, 75%, 55%);--danger-glow: hsla(0, 75%, 55%, .2);--success: hsl(145, 65%, 50%);--live-red: hsl(0, 85%, 55%);--live-red-dim: hsl(0, 70%, 38%);--live-red-glow: hsla(0, 85%, 55%, .4);--live-red-bg: hsla(0, 85%, 55%, .12);--font-ui: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Courier New", monospace;--text-xs: .7rem;--text-sm: .8rem;--text-base: .9rem;--text-md: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-sm: 4px;--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 3px hsla(0,0%,0%,.4);--shadow: 0 4px 16px hsla(0,0%,0%,.5);--shadow-lg: 0 8px 32px hsla(0,0%,0%,.6);--glow-a: 0 0 20px var(--deck-a-glow), 0 0 40px hsla(185,100%,50%,.1);--glow-b: 0 0 20px var(--deck-b-glow), 0 0 40px hsla(35,100%,55%,.1);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--dur-fast: .12s;--dur-normal: .22s;--dur-slow: .35s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-ui);font-size:var(--text-base);background:var(--bg-base);color:var(--text-primary);line-height:1.5;overflow:hidden;height:100vh;width:100vw;-webkit-user-select:none;user-select:none}#root{height:100vh;width:100vw;display:flex;flex-direction:column;overflow:hidden}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.mono{font-family:var(--font-mono)}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.glass{background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);outline:none;white-space:nowrap}.btn:hover{background:var(--bg-hover);border-color:var(--border-bright)}.btn:active{transform:scale(.96)}.btn:focus-visible{outline:2px solid var(--deck-a);outline-offset:2px}.btn-icon{padding:var(--space-2);min-width:36px;min-height:36px;border-radius:var(--radius)}.btn-transport{min-width:44px;min-height:44px;border-radius:var(--radius-full);border:none;background:var(--bg-raised);font-size:1.1rem}.btn-transport:hover{background:var(--bg-hover)}.btn-transport.play-btn{min-width:52px;min-height:52px;font-size:1.3rem}.btn-deck-a{border-color:var(--deck-a-dim);color:var(--deck-a)}.btn-deck-a:hover{background:var(--deck-a-glass);border-color:var(--deck-a);box-shadow:var(--glow-a)}.btn-deck-b{border-color:var(--deck-b-dim);color:var(--deck-b)}.btn-deck-b:hover{background:var(--deck-b-glass);border-color:var(--deck-b);box-shadow:var(--glow-b)}.input{width:100%;padding:var(--space-2) var(--space-3);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-base);outline:none;transition:border-color var(--dur-fast)}.input:focus{border-color:var(--deck-a)}.input::placeholder{color:var(--text-muted)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--bg-hover);border-radius:var(--radius-full);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text-primary);cursor:pointer;transition:transform var(--dur-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}input[type=range].deck-a-slider{accent-color:var(--deck-a)}input[type=range].deck-a-slider::-webkit-slider-thumb{background:var(--deck-a);box-shadow:0 0 8px var(--deck-a-glow)}input[type=range].deck-b-slider{accent-color:var(--deck-b)}input[type=range].deck-b-slider::-webkit-slider-thumb{background:var(--deck-b);box-shadow:0 0 8px var(--deck-b-glow)}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-a{0%,to{box-shadow:0 0 8px var(--deck-a-glow)}50%{box-shadow:0 0 20px var(--deck-a-glow),0 0 40px #00eaff26}}@keyframes pulse-b{0%,to{box-shadow:0 0 8px var(--deck-b-glow)}50%{box-shadow:0 0 20px var(--deck-b-glow),0 0 40px #ff9f1a26}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes live-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fade-in{animation:fadeIn var(--dur-normal) var(--ease-out) both}.skeleton{background:linear-gradient(90deg,var(--bg-raised) 25%,var(--bg-hover) 50%,var(--bg-raised) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius)}.toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:1000;display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none}.toast{padding:var(--space-3) var(--space-5);background:var(--bg-raised);border:1px solid var(--border-bright);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);font-size:var(--text-sm);animation:fadeIn var(--dur-normal) var(--ease-out) both;pointer-events:all}.toast.success{border-color:var(--success);color:var(--success)}.toast.error{border-color:var(--danger);color:var(--danger)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}