.auth-page{background:#0a0a0a;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex;position:relative}.auth-logo{color:#fff;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:700;text-decoration:none;display:flex;position:absolute;top:2rem;left:2rem}.auth-container{width:100%;max-width:400px;margin-bottom:2rem}.auth-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;margin-bottom:1rem;padding:2rem}.auth-card h1{color:#fff;text-align:center;margin-bottom:.5rem;font-size:1.5rem}.auth-subtitle{color:#ffffffb3;text-align:center;margin-bottom:2rem;font-size:.9rem}.auth-form{flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.form-group{flex-direction:column;display:flex}.form-group input{color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;padding:.75rem;font-size:1rem;transition:all .2s}.form-group input:focus{border-color:#f06;outline:none;box-shadow:0 0 0 2px #f063}.form-group input::placeholder{color:#ffffff80}.submit-button{color:#fff;cursor:pointer;background:#f06;border:none;border-radius:8px;padding:.75rem;font-size:1rem;font-weight:600;transition:all .2s}.submit-button:hover{background:#e6005c}.auth-switch{text-align:center;color:#ffffffb3;margin-top:1rem}.auth-switch .link{color:#f06;cursor:pointer;background:0 0;border:none;margin-left:.5rem;font-weight:500;text-decoration:underline}.auth-switch .link:hover{color:#e6005c}.auth-features{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;width:100%;max-width:400px;padding:2rem}.auth-features h3{color:#fff;margin-bottom:1rem;font-size:1.1rem}.auth-features ul{margin:0;padding:0;list-style:none}.auth-features li{color:#ffffffe6;padding:.5rem 0;font-size:.9rem}.cl-rootBox{width:100%!important}.cl-card{-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;background:#ffffff0d!important;border:1px solid #ffffff1a!important;border-radius:16px!important;box-shadow:0 20px 40px #0006!important}.cl-headerTitle{color:#fff!important}.cl-headerSubtitle{color:#ffffffb3!important}.cl-socialButtonsBlockButton{color:#fff!important;background:#ffffff1a!important;border:1px solid #fff3!important}.cl-socialButtonsBlockButton:hover{background:#ff00661a!important;border-color:#f06!important}.cl-formButtonPrimary{background:#f06!important;border:none!important}.cl-formButtonPrimary:hover{background:#e6005c!important}.cl-footerActionLink{color:#f06!important}.cl-footerActionLink:hover{color:#e6005c!important}.cl-formFieldInput{color:#fff!important;background:#ffffff1a!important;border:1px solid #fff3!important}.cl-formFieldInput:focus{border-color:#f06!important;box-shadow:0 0 0 2px #f063!important}.cl-formFieldLabel{color:#fff!important}.cl-dividerLine{background:#fff3!important}.cl-dividerText{color:#ffffffb3!important}.collaborative-room{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;margin-bottom:24px;padding:24px}.room-header{margin-bottom:24px}.room-header h3{color:#fff;margin-bottom:8px;font-size:24px;font-weight:600}.room-header p{color:#fff9;font-size:14px}.room-actions{flex-direction:column;gap:20px;display:flex}.join-session{gap:12px;display:flex}.join-session input{color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;outline:none;flex:1;padding:12px 16px;font-size:14px;transition:all .2s}.join-session input:focus{background:#ffffff26;border-color:#f06}.join-session input::placeholder{color:#fff6}.btn-primary,.btn-secondary{cursor:pointer;border:none;border-radius:8px;outline:none;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.btn-primary:hover:not(:disabled){background:#ff1a75;transform:translateY(-1px)}.btn-secondary:hover:not(:disabled){background:#ffffff26;border-color:#ffffff4d}.btn-primary:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.btn-small{padding:8px 16px;font-size:13px}.modal-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#000c;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:#1a1a1a;border:1px solid #ffffff1a;border-radius:16px;width:90%;max-width:480px;padding:32px;animation:.3s slideUp}.modal-content h3{color:#fff;margin-bottom:24px;font-size:20px;font-weight:600}.form-group{margin-bottom:20px}.form-group label{color:#fffc;margin-bottom:8px;font-size:14px;font-weight:500;display:block}.form-group input[type=text]{color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;outline:none;width:100%;padding:12px 16px;font-size:14px;transition:all .2s}.form-group input[type=text]:focus{background:#ffffff26;border-color:#f06}.checkbox-label{cursor:pointer;color:#fffc;align-items:center;gap:8px;font-size:14px;display:flex}.checkbox-label input[type=checkbox]{cursor:pointer;width:18px;height:18px}.form-hint{color:#ffffff80;margin-top:4px;font-size:12px}.modal-actions{justify-content:flex-end;gap:12px;margin-top:32px;display:flex}.collaborative-room.active .room-header{justify-content:space-between;align-items:flex-start;margin-bottom:24px;display:flex}.session-info h3{color:#fff;margin-bottom:8px;font-size:20px;font-weight:600}.session-code{color:#f06;background:#ffffff1a;border-radius:6px;align-items:center;gap:8px;padding:8px 12px;font-family:SF Mono,Monaco,Inconsolata,monospace;font-size:13px;display:flex}.icon-button{color:#fff9;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex}.icon-button:hover{color:#fff}.participants{background:#ffffff0d;border-radius:8px;margin-bottom:20px;padding:16px}.participants h4{color:#fffc;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;font-weight:500;display:flex}.participants-list{flex-wrap:wrap;gap:12px;display:flex}.participant{color:#ffffffe6;background:#ffffff0d;border-radius:6px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;display:flex}.participant img{object-fit:cover;border-radius:50%;width:24px;height:24px}.host-badge{color:#fff;background:#f06;border-radius:4px;margin-left:4px;padding:2px 8px;font-size:11px;font-weight:500}.session-status{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px;display:grid}.status-item{background:#ffffff0d;border-radius:8px;flex-direction:column;gap:4px;padding:12px 16px;display:flex}.status-label{color:#ffffff80;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:500}.status-value{color:#fff;font-size:14px;font-weight:500}.share-link{color:#ffffffb3;background:#ff66001a;border:1px solid #f603;border-radius:8px;align-items:center;gap:8px;padding:12px 16px;font-size:13px;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.collaborative-room{padding:16px}.room-header{flex-direction:column;gap:16px}.join-session{flex-direction:column}.modal-content{padding:24px}.session-status{grid-template-columns:1fr}}.ai-recommendations{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;height:100%;padding:24px;display:flex}.recommendations-header{margin-bottom:20px}.recommendations-header h3{color:#fff;align-items:center;gap:8px;margin-bottom:16px;font-size:18px;font-weight:600;display:flex}.recommendations-header h3 svg{color:#f06}.recommendation-controls{flex-wrap:wrap;gap:20px;display:flex}.control-group label{color:#fff9;text-transform:uppercase;letter-spacing:.5px;font-size:12px}.button-group{background:#ffffff0d;border-radius:6px;display:flex;overflow:hidden}.button-group button{color:#fff9;cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;padding:8px 12px;transition:all .2s;display:flex}.button-group button:hover{color:#fff;background:#ffffff1a}.button-group button.active{color:#fff;background:#f06}.control-group select{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;outline:none;padding:8px 12px;font-size:13px}.control-group select:focus{border-color:#f06}.recommendations-loading{color:#fff9;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.spinner{border:3px solid #ffffff1a;border-top-color:#f06;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.no-recommendations{color:#fff6;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.recommendations-list{flex-direction:column;flex:1;gap:12px;display:flex;overflow-y:auto}.recommendation-item{cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;padding:16px;transition:all .2s}.recommendation-item:hover{background:#ffffff14;border-color:#fff3;transform:translate(4px)}.track-info{margin-bottom:12px}.track-info h4{color:#fff;margin-bottom:4px;font-size:15px;font-weight:600}.track-info p{color:#fff9;font-size:13px}.track-details{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.track-details span{border-radius:4px;padding:4px 8px;font-size:11px;font-weight:500}.bpm{color:#fffc;background:#ffffff1a}.key{color:#000;font-weight:600}.track-metrics{gap:16px;margin-bottom:12px;display:flex}.metric{flex:1}.metric span{color:#ffffff80;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px;display:block}.metric-bar{background:#ffffff1a;border-radius:2px;height:4px;overflow:hidden}.metric-fill{background:#f06;height:100%;transition:width .3s}.metric-fill.confidence{background:#0f6}.mix-notes{color:#ffffff80;font-size:12px;font-style:italic;line-height:1.4}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.recommendations-list::-webkit-scrollbar{width:6px}.recommendations-list::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.recommendations-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.recommendations-list::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (width<=768px){.ai-recommendations{padding:16px}.recommendation-controls{flex-direction:column;gap:16px}.control-group,.control-group select{width:100%}}.keyboard-shortcuts-help{z-index:1000;pointer-events:all;position:fixed;inset:0}.shortcuts-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;background:#000c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.shortcuts-panel h3{color:#fff;margin:0 0 24px;font-size:24px}.shortcuts-section h4{color:#f72c5b;margin:0 0 12px;font-size:16px}.shortcut-item kbd{color:#fff;text-align:center;background:#333;border-radius:4px;min-width:40px;padding:4px 8px;font-family:monospace;font-size:12px}.simple-copilot{color:#fff;background:linear-gradient(#0f0f14 0%,#0a0a0e 100%);flex-direction:column;height:100%;font-size:13px;display:flex}.copilot-header{border-bottom:1px solid #ffffff1a;align-items:center;gap:8px;padding:16px;font-weight:600;display:flex}.copilot-header svg:first-child{color:#f60}.refresh-btn{color:#fff9;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;margin-left:auto;transition:all .15s;display:flex}.refresh-btn:hover{color:#fff;background:#ffffff1a}.copilot-empty,.copilot-loading{text-align:center;color:#ffffff80;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex}.copilot-empty p,.copilot-loading p{margin:0;font-size:14px}.copilot-empty .hint{color:#ffffff59;font-size:12px}.copilot-loading .spin{animation:1s linear infinite spin}.copilot-suggestion{flex-direction:column;flex:1;gap:12px;padding:16px;display:flex}.suggestion-label{color:#ffffff80;text-transform:uppercase;letter-spacing:.5px;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;display:flex}.confidence{color:#f60;background:#ff660026;border-radius:4px;padding:3px 8px;font-weight:700}.suggestion-track{background:#ffffff0d;border:1px solid #f603;border-radius:10px;padding:14px}.track-title{text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px;font-size:15px;font-weight:600;overflow:hidden}.track-meta{color:#fff9;align-items:center;gap:8px;font-size:12px;display:flex}.track-meta .artist{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.track-meta .bpm{font-weight:500}.track-meta .key{color:#000;border-radius:4px;padding:2px 6px;font-size:11px;font-weight:700}.suggestion-reason{flex-wrap:wrap;gap:6px;display:flex}.reason-item{color:#ffffffb3;background:#ffffff0d;border-radius:4px;padding:4px 8px;font-size:11px}.load-btn{color:#000;cursor:pointer;background:#f60;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;height:44px;font-size:14px;font-weight:600;transition:all .15s;display:flex}.load-btn:hover{background:#f72;transform:translateY(-1px)}.load-btn:active{transform:translateY(0)}.alternatives{border-top:1px solid #ffffff14;flex-direction:column;gap:6px;padding-top:12px;display:flex}.alt-label{color:#fff6;margin-bottom:4px;font-size:11px}.alt-track{color:#ffffffb3;text-align:left;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:#ffffff08;border:1px solid #ffffff14;border-radius:6px;padding:8px 12px;font-size:12px;transition:all .15s;overflow:hidden}.alt-track:hover{color:#fff;background:#ffffff14;border-color:#ff66004d}.copilot-stats{color:#ffffff59;border-top:1px solid #ffffff14;justify-content:space-between;padding:10px 16px;font-size:11px;display:flex}.copilot-stats span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.copilot-stats span:last-child{text-align:right;max-width:60%}.dj-page{color:#fff;background:#0a0a0a;min-height:100vh;padding:40px 20px}.dj-page.loading,.dj-page.auth-required{justify-content:center;align-items:center;display:flex}.dj-header{max-width:1400px;margin:0 auto 40px}.header-content{justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.dj-header h1{background:linear-gradient(135deg,#f06,#f60);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:48px;font-weight:700}.dj-header p{color:#fff9;font-size:18px}.header-actions{align-items:center;gap:16px;margin-top:8px;display:flex}.dj-workspace{max-width:1400px;margin:0 auto;padding-top:60px;position:relative}.dj-main-area{flex-direction:row;gap:20px;width:100%;display:flex;position:relative}.dj-decks-container{flex:1;min-width:0}.dj-decks{grid-template-columns:1fr auto 1fr;align-items:start;gap:24px;width:100%;transition:all .3s;display:grid}.ai-copilot-dock-container{flex-shrink:0;width:340px;max-height:calc(100vh - 100px);position:sticky;top:80px;overflow-y:auto}.dj-sidebar{z-index:1000;background:#0a0a0a;border-left:1px solid #333;width:420px;height:100vh;padding:60px 20px 20px;transition:right .3s;position:fixed;top:0;right:-420px;overflow-y:auto;box-shadow:-5px 0 20px #00000080}.sidebar-close{color:#fff;cursor:pointer;z-index:1001;background:#ffffff1a;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;transition:all .2s;display:flex;position:absolute;top:15px;right:15px}.sidebar-close:hover{background:#fff3;transform:scale(1.1)}.dj-sidebar.open{right:0}.sidebar-overlay{z-index:999;opacity:0;pointer-events:none;background:#0009;transition:opacity .3s;position:fixed;inset:0}.sidebar-overlay.active{opacity:1;pointer-events:all}.dj-visualizations{margin-top:32px}.viz-grid{grid-template-columns:1fr 1fr;align-items:start;gap:24px;display:grid}.viz-item{background:0 0;border-radius:12px;overflow:hidden}.viz-item.full-width{grid-column:1/-1}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (width<=1400px){.viz-grid{grid-template-columns:1fr}.ai-copilot-dock-container{width:300px}}@media (width<=1200px){.dj-main-area{flex-direction:column}.ai-copilot-dock-container{order:-1;width:100%;max-height:none;margin-bottom:20px;position:relative;top:0}.dj-decks{grid-template-columns:1fr;gap:24px}.viz-grid{gap:16px}}@media (width<=768px){.dj-page{padding:20px 16px}.header-content{flex-direction:column;align-items:flex-start;gap:16px}.dj-header h1{font-size:32px}.dj-header p{font-size:16px}.header-actions{margin-top:0}.dj-visualizations{margin-top:24px}.viz-grid{gap:12px}.dj-sidebar{width:100%;right:-100%}.dj-sidebar.open{right:0}}.master-controls{z-index:10;align-items:center;gap:20px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%)}.master-bpm-display{background:#ffffff1a;border-radius:8px;align-items:center;gap:8px;padding:8px 16px;display:flex}.master-bpm-display label{opacity:.7;font-size:12px}.emergency-stop-indicator{color:#fff;text-transform:uppercase;background:red;border-radius:8px;padding:8px 20px;font-weight:700;animation:.5s ease-in-out infinite flash;display:none}.shortcuts-active-indicator{color:#0f0;background:#0f03;border-radius:4px;padding:4px 12px;font-size:12px;display:none}.midi-indicator{color:#888;background:#80808033;border-radius:4px;padding:4px 12px;font-size:12px}.midi-indicator.connected{color:#00c8ff;background:#00c8ff33}.automix-status{background:#ff008033;border:1px solid #ff008066;border-radius:4px;flex-direction:column;gap:4px;margin-top:8px;padding:8px 12px;display:flex}.automix-indicator{color:#ff0080;font-size:12px;font-weight:700;animation:1.5s infinite pulse}.active-deck{color:#ff80c0;font-size:11px}@keyframes flash{0%,to{opacity:1}50%{opacity:.5}}.sidebar-controls{z-index:100;background:#000c;border-radius:0 8px 8px 0;flex-direction:column;gap:10px;padding:10px;display:flex;position:fixed;top:50%;left:0;transform:translateY(-50%);box-shadow:2px 0 10px #00000080}.sidebar-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:8px;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;transition:all .3s;display:flex}.sidebar-btn:hover{background:#fff3;transform:scale(1.1)}.sidebar-btn.active{background:linear-gradient(135deg,#f06,#f60);box-shadow:0 0 15px #ff660080}.bpm-adjuster{align-items:center;gap:4px;display:flex}.bpm-adjust-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff4d;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;font-size:16px;transition:all .2s;display:flex}.bpm-adjust-btn:hover:not(:disabled){background:#fff3}.bpm-adjust-btn:disabled{opacity:.3;cursor:not-allowed}.bpm-adjuster input.bpm-value{color:#f72c5b;text-align:center;background:#0000004d;border:1px solid #fff3;border-radius:4px;width:60px;padding:4px;font-size:16px;font-weight:600}.bpm-adjuster input.bpm-value:disabled{opacity:.5}.master-bpm-control{background:#ffffff1a;border-radius:8px;align-items:center;gap:8px;padding:8px 16px;display:flex}.master-bpm-control label{opacity:.7;font-size:12px}.keyboard-shortcuts-help{z-index:1000;position:fixed;inset:0}.shortcuts-overlay{cursor:pointer;background:#000c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.shortcuts-panel{cursor:default;background:#1a1a1a;border:1px solid #333;border-radius:8px;max-width:800px;max-height:80vh;padding:30px;overflow-y:auto}.shortcut-item{color:#ccc;align-items:center;gap:10px;margin-bottom:10px;display:flex}.shortcut-item kbd{color:#fff;text-align:center;background:#333;border:1px solid #666;border-radius:4px;min-width:40px;padding:4px 10px;font-family:monospace;font-size:.9em}.master-controls{background:#1a1a1a;border-bottom:1px solid #333;align-items:center;gap:20px;margin-bottom:20px;padding:10px 20px;display:flex}.master-bpm-display{background:#2a2a2a;border:1px solid #333;border-radius:4px;flex-direction:column;align-items:center;padding:10px 20px;display:flex}.master-bpm-display label{color:#999;margin-bottom:5px;font-size:.8em}.master-bpm-display .bpm-value{color:#6c47ff;font-size:1.5em;font-weight:700}.emergency-stop-indicator{color:#fff;background:#f33;border-radius:4px;padding:10px 20px;font-weight:700;animation:.5s ease-in-out infinite emergency-flash;display:none}.emergency-stop-indicator.active{display:block}@keyframes emergency-flash{0%,to{opacity:1}50%{opacity:.6}}.shortcuts-active-indicator{color:#000;background:#0f8;border-radius:4px;padding:8px 16px;font-size:.85em;font-weight:500;display:none}.shortcuts-active-indicator.active{display:block}.dj-deck{color:#fff;background:#1a1a1a;border:1px solid #333;border-radius:8px;min-width:300px;margin:10px;padding:20px}.deck-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;display:flex}.deck-header h3{color:#6c47ff;margin:0}.track-info{text-align:right;font-size:.9em}.track-title{color:#fff;font-weight:700}.deck-display{background:#2a2a2a;border-radius:4px;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:20px;padding:15px;display:grid}.bpm-display,.key-display,.position-display{text-align:center}.bpm-display label,.key-display label,.position-display label{color:#999;margin-bottom:5px;font-size:.7em;display:block}.bpm-value,.key-value{color:#6c47ff;font-size:1.5em;font-weight:700}.deck-controls{margin-bottom:20px}.transport-controls{justify-content:center;gap:10px;margin-bottom:15px;display:flex}.transport-controls button{color:#fff;cursor:pointer;background:#333;border:none;border-radius:4px;align-items:center;gap:5px;min-width:80px;min-height:44px;padding:10px 15px;font-size:.9em;display:flex}.transport-controls button:hover{background:#444}.transport-controls button:disabled{color:#666;cursor:not-allowed;background:#222}.play-button.playing{background:#6c47ff}.cue-button{background:#ff6b47}.cue-button:hover{background:#ff7a57}.pitch-control,.volume-control{align-items:center;gap:10px;margin-bottom:10px;display:flex}.pitch-control label,.volume-control label{color:#ccc;min-width:60px;font-size:.9em}.pitch-slider,.volume-slider{cursor:pointer;background:#333;border-radius:3px;outline:none;flex:1;height:6px}.pitch-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:20px;height:20px}.volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:20px;height:20px}.pitch-value,.volume-value{text-align:right;color:#ccc;min-width:50px;font-size:.9em}.deck-load{margin-bottom:20px}.load-button{color:#fff;cursor:pointer;background:#4a4a4a;border:none;border-radius:4px;width:100%;min-height:44px;padding:12px;font-size:1em}.load-button:hover{background:#555}.deck-waveform{background:#0a0a0a;border-radius:4px;height:80px;margin-bottom:10px;position:relative;overflow:hidden}.waveform-placeholder{align-items:center;height:100%;display:flex;position:relative}.waveform-bars{align-items:flex-end;width:100%;height:100%;display:flex}.waveform-bar{opacity:.7;background:#6c47ff;flex:1;min-height:2px;margin:0 1px}.playhead{z-index:10;background:#ff6b47;width:2px;transition:left .1s;position:absolute;top:0;bottom:0}.deck-indicators{text-align:center}.loaded-indicator{color:#4ade80;font-size:.8em;font-weight:700}.cue-indicator{color:#fff;background:#ff9500;border-radius:16px;align-items:center;gap:6px;padding:4px 12px;font-size:12px;font-weight:600;animation:2s ease-in-out infinite pulse-cue;display:flex}@keyframes pulse-cue{0%,to{opacity:1}50%{opacity:.7}}.cue-point-indicator{color:#000;background:#0f8;border-radius:4px;margin-left:10px;padding:4px 12px;font-size:11px;font-weight:600;display:inline-block}.audio-mixer{color:#fff;background:#1a1a1a;border:1px solid #333;border-radius:8px;min-width:250px;margin:10px;padding:20px}.mixer-header{text-align:center;border-bottom:1px solid #333;margin-bottom:20px;padding-bottom:10px}.mixer-header h3{color:#6c47ff;margin:0}.mixer-controls{flex-direction:column;gap:20px;display:flex}.master-effects-section{border-top:1px solid #333;padding-top:15px}.master-effects-section h4{color:#6c47ff;margin:0 0 15px;font-size:16px}.effects-controls{flex-direction:column;gap:15px;display:flex}.effect-group{flex-direction:column;gap:8px;display:flex}.effect-group label{color:#ccc;text-transform:uppercase;letter-spacing:.5px;font-size:12px}.effect-slider,.filter-sweep-slider{cursor:pointer;background:#333;border-radius:2px;outline:none;width:100%;height:4px}.effect-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:16px;height:16px;transition:all .2s}.filter-sweep-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:16px;height:16px;transition:all .2s}.effect-slider::-webkit-slider-thumb:hover{background:#8a6bff;transform:scale(1.1)}.filter-sweep-slider::-webkit-slider-thumb:hover{background:#8a6bff;transform:scale(1.1)}.filter-value{text-align:center;color:#6c47ff;font-size:11px;font-weight:600}.beat-sync{flex-direction:row;align-items:center;gap:10px}.sync-toggle{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #333;border-radius:4px;padding:6px 12px;font-size:12px;transition:all .2s}.sync-toggle.active{background:#6c47ff;border-color:#6c47ff}.bpm-input{color:#fff;text-align:center;background:#0000004d;border:1px solid #333;border-radius:4px;width:60px;padding:4px 6px;font-size:12px}.beat-effects{flex-direction:row;gap:8px}.beat-gate-btn,.beat-echo-btn{color:#f60;cursor:pointer;background:#f603;border:1px solid #f60;border-radius:4px;flex:1;padding:8px;font-size:11px;font-weight:600;transition:all .2s}.beat-gate-btn:hover,.beat-echo-btn:hover{background:#ff66004d;transform:scale(1.05)}.beat-gate-btn:active,.beat-echo-btn:active{background:#ff660080}.chain-controls{border-top:1px solid #333;padding-top:15px}.wet-dry-controls{gap:15px;display:flex}.mix-slider-group{flex-direction:column;flex:1;gap:4px;display:flex}.mix-slider-group label{color:#999;font-size:11px}.chain-wet-slider,.chain-dry-slider{cursor:pointer;background:#333;border-radius:2px;outline:none;width:100%;height:3px}.chain-wet-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#0f8;border-radius:50%;width:12px;height:12px}.chain-dry-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#f80;border-radius:50%;width:12px;height:12px}.mix-slider-group span{color:#666;text-align:center;font-size:10px}.effects-toggle{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #333;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:12px;font-weight:600;transition:all .3s;display:flex}.effects-toggle.active{background:linear-gradient(135deg,#6c47ff,#8a6bff);border-color:#6c47ff;box-shadow:0 0 15px #6c47ff80}.effects-toggle:hover{transform:translateY(-2px);box-shadow:0 4px 15px #6c47ff4d}.crossfader-section{text-align:center}.crossfader-container{align-items:center;gap:10px;margin:10px 0;display:flex}.crossfader-label{color:#6c47ff;min-width:20px;font-weight:700}.crossfader{cursor:pointer;background:#333;border-radius:4px;outline:none;flex:1;height:8px}.crossfader::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:4px;width:30px;height:30px}.crossfader-position{color:#ccc;margin-top:5px;font-size:.9em}.crossfader-value{color:#6c47ff;text-transform:uppercase;margin-top:5px;font-size:.85em;font-weight:700}.master-section,.cue-section{background:#2a2a2a;border-radius:4px;padding:15px}.master-section label,.cue-section label{color:#ccc;margin-bottom:10px;font-weight:700;display:block}.volume-control{align-items:center;gap:10px;display:flex}.mute-button{color:#fff;cursor:pointer;background:#333;border:none;border-radius:4px;justify-content:center;align-items:center;min-width:44px;min-height:44px;padding:8px;display:flex}.mute-button:hover{background:#444}.mute-button.muted{background:#dc2626}.master-volume,.cue-volume{cursor:pointer;background:#333;border-radius:3px;outline:none;flex:1;height:6px}.master-volume::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:20px;height:20px}.cue-volume::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:20px;height:20px}.volume-value{text-align:right;color:#ccc;min-width:40px;font-size:.9em}.eq-section{background:#2a2a2a;border-radius:4px;padding:15px}.eq-section h4{color:#ccc;text-align:center;margin:0 0 15px}.eq-channel{flex:1}.eq-channel label{text-align:center;color:#6c47ff;margin-bottom:10px;font-weight:700;display:block}.eq-knobs{gap:10px;display:flex}.eq-knob{text-align:center;flex-direction:column;flex:1;align-items:center;gap:5px;display:flex}.eq-knob label{color:#999;margin-bottom:5px;font-size:.7em;display:block}.eq-slider{cursor:pointer;background:#333;border-radius:3px;outline:none;width:40px;height:6px;transform:rotate(-90deg)}.eq-kill{color:#999;cursor:pointer;background:#333;border:1px solid #666;border-radius:3px;min-width:35px;padding:4px 8px;font-size:.65em;transition:all .2s}.eq-kill:hover{background:#444;border-color:#777}.eq-kill.active{color:#fff;background:#dc2626;border-color:#dc2626}.vu-meters{gap:20px;display:flex}.vu-meter{text-align:center;flex:1}.vu-meter label{color:#999;margin-bottom:5px;font-size:.8em;display:block}.vu-bars{align-items:flex-end;gap:2px;height:60px;display:flex}.vu-bar{background:#333;border-radius:2px;flex:1;min-height:4px}.vu-bar.active{background:#4ade80}.vu-bar:nth-child(8),.vu-bar:nth-child(9),.vu-bar:nth-child(10){background:#fbbf24}.vu-bar:nth-child(10).active{background:#dc2626}.waveform-display{background:linear-gradient(#0006,#0009);border:1px solid #ffffff1a;border-radius:8px;margin:1rem 0;padding:.5rem;position:relative}.waveform-loading{color:#999;font-size:.875rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.waveform-canvas{width:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;border-radius:4px;display:block}.waveform-time{color:#999;justify-content:space-between;margin-top:.5rem;font-size:.75rem;display:flex}.waveform-time .current-time{color:#6c47ff}.waveform-controls{gap:.5rem;margin-bottom:.5rem;display:flex}.beat-grid-toggle{color:#fff9;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:4px;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;transition:all .2s;display:flex}.beat-grid-toggle:hover{color:#fffc;background:#ffffff26}.beat-grid-toggle.active{color:#6c47ff;background:#6c47ff4d;border-color:#6c47ff}.beat-grid-toggle svg{width:16px;height:16px}.hot-cue-controller{background:#1a1a1a;border-radius:8px;margin:1rem 0;padding:1rem}.hot-cue-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.hot-cue-header h4{color:#fff;margin:0;font-size:1rem}.cue-mode-toggle{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;padding:.25rem .75rem;font-size:.75rem;transition:all .2s}.cue-mode-toggle.active{color:#fff;background:#6c47ff;border-color:#6c47ff}.hot-cue-grid{grid-template-columns:repeat(4,1fr);gap:.5rem;display:grid}.hot-cue-button{cursor:pointer;background:0 0;border:2px solid #666;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;min-height:60px;padding:.75rem;transition:all .2s;display:flex;position:relative}.hot-cue-button:hover{transform:scale(.95)}.hot-cue-button.active{transform:scale(1);box-shadow:0 0 10px #00000080}.hot-cue-button.active.set{border-width:3px}.hot-cue-button.triggered{animation:.3s ease-out trigger-flash;transform:scale(1.1)!important}@keyframes trigger-flash{0%{filter:brightness(1.5);transform:scale(1.2)}to{filter:brightness();transform:scale(1.1)}}.hot-cue-button.setting-mode{animation:1s infinite pulse}.hot-cue-button.setting-mode:not(.active){opacity:.7;border-style:dashed}.cue-number{color:#fff;font-size:1rem;font-weight:700}.cue-time{color:#fffc;font-size:.7rem}.loop-controller{background:#1a1a1a;border-radius:8px;margin:1rem 0;padding:1rem}.loop-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.loop-header h4{color:#fff;margin:0;font-size:1rem}.loop-clear{color:#fff;cursor:pointer;background:#dc2626;border:none;border-radius:4px;padding:.25rem;transition:all .2s}.loop-clear:hover{background:#ef4444}.loop-manual-controls{gap:.5rem;margin-bottom:1rem;display:flex}.loop-in-button,.loop-out-button{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;flex:1;padding:.75rem;transition:all .2s;position:relative}.loop-in-button.active{color:#fff;background:#059669;border-color:#059669}.loop-out-button.active{color:#fff;background:#dc2626;border-color:#dc2626}.loop-in-button:disabled,.loop-out-button:disabled{opacity:.5;cursor:not-allowed}.loop-time{margin-top:.25rem;font-size:.7rem;display:block}.loop-activate{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;justify-content:center;align-items:center;padding:.75rem;transition:all .2s;display:flex}.loop-activate.active{color:#fff;background:#6c47ff;border-color:#6c47ff}.loop-activate:disabled{opacity:.5;cursor:not-allowed}.beat-loop-controls{margin-bottom:1rem}.beat-loop-controls label{color:#999;margin-bottom:.5rem;font-size:.875rem;display:block}.beat-loop-buttons{gap:.25rem;display:flex}.beat-loop-button{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;flex:1;padding:.5rem;font-size:.875rem;transition:all .2s}.beat-loop-button:hover{background:#444}.beat-loop-button.active{color:#fff;background:#6c47ff;border-color:#6c47ff}.loop-info{color:#999;background:#0000004d;border-radius:4px;justify-content:space-between;padding:.5rem;font-size:.875rem;display:flex}.loop-active-indicator{text-align:center;color:#fff;background:#6c47ff;border-radius:4px;margin-top:10px;padding:8px 16px;font-size:.85em;font-weight:700;animation:2s ease-in-out infinite loop-pulse}@keyframes loop-pulse{0%,to{opacity:1}50%{opacity:.8}}.effects-rack{background:#1a1a1a;border-radius:8px;margin:1rem 0;padding:1rem;position:relative}.effects-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.effects-header h4{color:#fff;margin:0;font-size:1rem}.preset-actions{gap:.25rem;display:flex}.preset-action-btn{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;padding:.5rem;transition:all .2s;display:flex}.preset-action-btn:hover:not(:disabled){background:#444;border-color:#6c47ff}.preset-action-btn:disabled{opacity:.5;cursor:not-allowed}.import-btn{cursor:pointer;position:relative}.preset-selector{background:#0000004d;border-radius:4px;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem;display:flex}.preset-selector label{color:#ccc;min-width:80px;font-size:.875rem}.preset-select{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;flex:1;padding:.5rem;font-size:.875rem}.preset-select:focus{border-color:#6c47ff;outline:none}.delete-preset-btn{color:#fff;cursor:pointer;background:#dc2626;border:1px solid #dc2626;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;padding:.5rem;transition:all .2s;display:flex}.delete-preset-btn:hover{background:#ef4444}.preset-dialog{z-index:100;background:#000c;border-radius:8px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.preset-dialog-content{background:#1a1a1a;border:1px solid #333;border-radius:8px;min-width:300px;max-width:90%;padding:1.5rem}.preset-dialog-content h5{color:#fff;margin:0 0 1rem;font-size:1.1rem}.preset-name-input{color:#fff;background:#333;border:1px solid #666;border-radius:4px;width:100%;margin-bottom:1rem;padding:.75rem;font-size:.875rem}.preset-name-input:focus{border-color:#6c47ff;outline:none}.preset-name-input::placeholder{color:#999}.preset-dialog-actions{justify-content:flex-end;gap:.5rem;display:flex}.preset-save-btn{color:#fff;cursor:pointer;background:#6c47ff;border:1px solid #6c47ff;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;transition:all .2s}.preset-save-btn:hover:not(:disabled){background:#5b39d8}.preset-save-btn:disabled{opacity:.5;cursor:not-allowed}.preset-cancel-btn{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;padding:.5rem 1rem;font-size:.875rem;transition:all .2s}.preset-cancel-btn:hover{background:#444}.effect-selector{gap:.5rem;margin-bottom:1rem;display:flex}.effect-tab{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;flex:1;justify-content:space-between;align-items:center;padding:.5rem;transition:all .2s;display:flex}.effect-tab.active{background:#444;border-color:#6c47ff}.effect-tab.enabled{box-shadow:0 0 10px #6c47ff4d}.effect-name{font-size:.875rem}.effect-power{color:#666;cursor:pointer;background:0 0;border:1px solid #666;border-radius:4px;justify-content:center;align-items:center;padding:.25rem;transition:all .2s;display:flex}.effect-power.active{color:#fff;background:#6c47ff;border-color:#6c47ff}.effect-controls{background:#0000004d;border-radius:4px;margin-bottom:1rem;padding:1rem}.effect-param{margin-bottom:1rem}.effect-param:last-child{margin-bottom:0}.effect-param label{color:#999;margin-bottom:.5rem;font-size:.875rem;display:block}.param-slider{cursor:pointer;vertical-align:middle;background:#333;border-radius:2px;outline:none;width:calc(100% - 60px);height:4px;margin-right:10px}.param-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:16px;height:16px}.param-value{text-align:right;color:#ccc;width:40px;font-size:.875rem;display:inline-block}.filter-type-selector{gap:.25rem;display:flex}.filter-type-selector button{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;flex:1;padding:.5rem;font-size:.875rem;transition:all .2s}.filter-type-selector button.active{color:#fff;background:#6c47ff;border-color:#6c47ff}.effect-chain-indicator{background:#0000004d;border-radius:4px;align-items:center;gap:.5rem;padding:.5rem;display:flex}.chain-label{color:#999;font-size:.875rem}.active-effects{flex-wrap:wrap;gap:.5rem;display:flex}.active-effect-badge{color:#fff;background:#6c47ff;border-radius:4px;padding:.25rem .5rem;font-size:.75rem}.beat-sync-controller{background:#1a1a1a;border-radius:8px;margin:1rem 0;padding:1rem}.sync-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.sync-header h4{color:#fff;margin:0;font-size:1rem}.bpm-display{align-items:center;gap:.5rem;font-family:monospace;display:flex}.current-bpm{color:#6c47ff;font-size:1.1rem;font-weight:700}.target-bpm{color:#999;font-size:.9rem}.sync-controls{margin-bottom:1rem}.sync-button{color:#ccc;cursor:pointer;background:#333;border:2px solid #666;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1rem;font-size:1rem;font-weight:700;transition:all .2s;display:flex}.sync-button:hover:not(:disabled){background:#444}.sync-button.active{color:#000;background:#fbbf24;border-color:#fbbf24}.sync-button.matched{color:#fff;background:#10b981;border-color:#10b981}.sync-button:disabled{opacity:.5;cursor:not-allowed}.sync-status{text-align:center;margin-top:.5rem}.sync-indicator{border-radius:4px;padding:.25rem .5rem;font-size:.875rem;font-weight:700}.sync-indicator.syncing{color:#000;background:#fbbf24}.sync-indicator.matched{color:#fff;background:#10b981}.beat-jump-controls{margin-bottom:1rem}.beat-jump-controls label{color:#999;margin-bottom:.5rem;font-size:.875rem;display:block}.jump-size-selector{gap:.25rem;margin-bottom:.5rem;display:flex}.jump-size-button{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;flex:1;padding:.25rem;font-size:.875rem;transition:all .2s}.jump-size-button.active{color:#fff;background:#6c47ff;border-color:#6c47ff}.jump-controls{gap:.5rem;display:flex}.jump-backward,.jump-forward{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;flex:1;justify-content:center;align-items:center;gap:.25rem;padding:.5rem;font-size:.875rem;transition:all .2s;display:flex}.jump-backward:hover,.jump-forward:hover{background:#444}.tempo-tools{border-top:1px solid #333;padding-top:1rem}.tap-tempo{align-items:center;gap:.5rem;display:flex}.tap-button{color:#ccc;cursor:pointer;background:#333;border:2px solid #666;border-radius:8px;padding:.75rem 1.5rem;font-weight:700;transition:all .2s}.tap-button:hover{background:#444}.tap-button:active{color:#fff;background:#6c47ff;border-color:#6c47ff}.tap-hint{color:#666;font-size:.875rem}.track-library{background:#1a1a1a;border-radius:8px;flex-direction:column;max-height:600px;margin:1rem 0;padding:1rem;display:flex}.library-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.library-header h3{color:#fff;margin:0;font-size:1.1rem}.library-actions{gap:.5rem;display:flex}.folder-button,.refresh-button,.upload-button{color:#fff;cursor:pointer;background:#6c47ff;border:none;border-radius:4px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;transition:all .2s;display:flex}.folder-button:hover,.refresh-button:hover,.upload-button:hover{background:#5b39d8}.folder-button:disabled,.refresh-button:disabled{opacity:.5;cursor:not-allowed}.refresh-button .spinning{animation:1s linear infinite spin}.library-controls{flex-direction:column;gap:.5rem;margin-bottom:1rem;display:flex}.search-bar{background:#333;border-radius:4px;align-items:center;gap:.5rem;padding:.5rem;display:flex}.search-bar svg{color:#666}.search-input{color:#fff;background:0 0;border:none;outline:none;flex:1;font-size:.875rem}.search-input::placeholder{color:#666}.filter-controls{gap:.5rem;display:flex}.genre-filter,.sort-select{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;padding:.5rem;font-size:.875rem}.genre-filter{flex:1}.sort-select{min-width:120px}.tracks-list{flex:1;margin:-.5rem;padding:.5rem;overflow-y:auto}.track-item{cursor:pointer;background:#333;border-radius:4px;align-items:center;gap:1rem;margin-bottom:.5rem;padding:.75rem;transition:all .2s;display:flex}.track-item.selected{color:#fff;background:#6c47ff}.track-main-info{flex:1;align-items:center;gap:.75rem;min-width:0;display:flex}.track-icon{color:#666;flex-shrink:0}.track-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:500;overflow:hidden}.track-artist{color:#999;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.track-meta{flex-shrink:0;align-items:center;gap:.75rem;display:flex}.track-meta-item{color:#999;align-items:center;gap:.25rem;font-size:.75rem;display:flex}.track-meta-item.key{color:#6c47ff;background:#6c47ff33;border-radius:3px;padding:.125rem .375rem;font-weight:500}.track-actions{flex-shrink:0;gap:.25rem;display:flex}.load-to-deck{color:#ccc;cursor:pointer;background:0 0;border:1px solid #666;border-radius:4px;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;font-weight:700;transition:all .2s;display:flex}.load-to-deck.deck-a:hover{color:#fff;background:#059669;border-color:#059669}.load-to-deck.deck-b:hover{color:#fff;background:#dc2626;border-color:#dc2626}.empty-library{color:#666;text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:3rem 1rem;display:flex}.empty-library svg{opacity:.5;margin-bottom:1rem}.empty-library p{margin:.5rem 0}.empty-hint{opacity:.8;font-size:.875rem}.shortcuts-overlay{z-index:1000;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.shortcuts-panel{background:#1a1a1a;border-radius:8px;width:90%;max-width:800px;max-height:80%;padding:2rem;overflow-y:auto}.shortcuts-panel h3{color:#fff;text-align:center;margin:0 0 1.5rem;font-size:1.5rem}.shortcuts-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;display:grid}.shortcuts-section h4{color:#6c47ff;border-bottom:1px solid #333;margin:0 0 1rem;padding-bottom:.5rem;font-size:1.1rem}.shortcut-item{color:#ccc;align-items:center;gap:.75rem;margin-bottom:.75rem;font-size:.9rem;display:flex}kbd{color:#fff;text-align:center;background:#333;border:1px solid #666;border-radius:4px;min-width:30px;padding:.25rem .5rem;font-family:monospace;font-size:.8rem;box-shadow:0 1px 2px #0000004d}:focus,button:focus,input:focus,select:focus{outline-offset:2px;outline:2px solid #6c47ff}.booth-monitor{background:#1a1a1a;border:1px solid #333;border-radius:8px;margin:1rem 0;padding:1rem}.booth-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;display:flex}.booth-title{color:#fff;align-items:center;gap:.5rem;display:flex}.booth-title h3{margin:0;font-size:1rem}.booth-power-btn{color:#ccc;cursor:pointer;background:#333;border:2px solid #666;border-radius:4px;min-width:50px;padding:.5rem 1rem;font-size:.875rem;font-weight:700;transition:all .2s}.booth-power-btn:hover{background:#444}.booth-power-btn.enabled{color:#fff;background:#10b981;border-color:#10b981}.booth-controls,.booth-volume-section{margin-bottom:1rem}.booth-volume-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.booth-volume-header label{color:#ccc;font-size:.875rem;font-weight:500}.booth-volume-value{color:#6c47ff;font-size:.875rem;font-weight:700}.booth-volume-control{align-items:center;gap:.75rem;display:flex}.booth-mute-btn{color:#ccc;cursor:pointer;background:#333;border:1px solid #666;border-radius:4px;justify-content:center;align-items:center;min-width:40px;min-height:40px;padding:.5rem;transition:all .2s;display:flex}.booth-mute-btn:hover:not(:disabled){background:#444}.booth-mute-btn:disabled{opacity:.5;cursor:not-allowed}.booth-mute-btn.muted{color:#fff;background:#dc2626;border-color:#dc2626}.booth-volume-slider{cursor:pointer;background:#333;border-radius:3px;outline:none;flex:1;height:6px;transition:opacity .2s}.booth-volume-slider:disabled{opacity:.5;cursor:not-allowed}.booth-volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:20px;height:20px}.booth-volume-slider:disabled::-webkit-slider-thumb{background:#666}.booth-status{background:#0000004d;border-radius:4px;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.75rem;display:flex}.booth-status-indicator{align-items:center;gap:.5rem;display:flex}.booth-status-dot{background:#666;border-radius:50%;width:8px;height:8px;transition:background-color .2s}.booth-status-dot.active{background:#10b981;animation:2s ease-in-out infinite pulse-booth}@keyframes pulse-booth{0%,to{opacity:1}50%{opacity:.6}}.booth-status-text{color:#ccc;font-size:.875rem}.booth-level-indicator{align-items:center;display:flex}.booth-level-bars{align-items:flex-end;gap:2px;display:flex}.booth-level-bar{background:#333;border-radius:1px;width:3px;height:12px;transition:background-color .1s}.booth-level-bar.active{background:#10b981}.booth-level-bar:nth-child(n+8).active{background:#fbbf24}.booth-level-bar:nth-child(n+9).active{background:#dc2626}.booth-info{flex-direction:column;gap:.25rem;display:flex}.booth-info-item{justify-content:space-between;align-items:center;font-size:.75rem;display:flex}.booth-info-label{color:#999}.booth-info-value{color:#ccc;font-weight:500}@media (width<=768px){.dj-deck,.audio-mixer{min-width:auto;margin:5px;padding:15px}.deck-display{grid-template-columns:1fr;gap:10px}.transport-controls{flex-wrap:wrap}.eq-controls,.vu-meters{flex-direction:column}.booth-monitor{padding:.75rem}.booth-status{flex-direction:column;align-items:stretch;gap:.5rem}.booth-level-indicator{justify-content:center}}.track-meta-item.bpm{color:#f72c5b;font-weight:600}.track-meta-item.energy{flex:1;min-width:60px}.energy-bar{background:#ffffff1a;border-radius:2px;height:4px;overflow:hidden}.energy-fill{background:linear-gradient(90deg,#6c47ff,#f72c5b);height:100%;transition:width .3s}.library-stats{color:#999;border-top:1px solid #333;border-bottom:1px solid #333;gap:1rem;margin:.5rem 0;padding:.5rem;font-size:.75rem;display:flex}.bpm-filter{background:#0000004d;border-radius:4px;flex-direction:column;gap:.5rem;margin-top:.5rem;padding:.5rem;display:flex}.bpm-filter label{color:#999;font-size:.75rem}.bpm-slider{appearance:none;background:#ffffff1a;border-radius:2px;outline:none;width:100%;height:4px}.bpm-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:12px;height:12px}.bpm-slider::-moz-range-thumb{cursor:pointer;background:#6c47ff;border-radius:50%;width:12px;height:12px}.folder-filter,.key-filter{color:#ccc;cursor:pointer;background:#2a2a2a;border:1px solid #333;border-radius:4px;padding:.5rem;font-size:.875rem}.track-item.unanalyzed{opacity:.7}.track-item.unanalyzed .track-meta{filter:grayscale()}.track-icon .spinning{animation:1s linear infinite spin}.nudge-controls{border-top:1px solid #ffffff1a;margin-top:12px;padding-top:12px}.nudge-controls label{text-transform:uppercase;color:#ffffff80;margin-bottom:6px;font-size:10px;display:block}.nudge-buttons{justify-content:center;align-items:center;gap:8px;display:flex}.nudge-button{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .15s;display:flex}.nudge-button:hover:not(:disabled){background:#fff3;border-color:#08f}.nudge-button:active:not(:disabled){background:#08f;transform:scale(.95)}.nudge-button:disabled{opacity:.3;cursor:not-allowed}.phase-offset-display{text-align:center;min-width:70px;font-family:monospace;font-size:11px}.phase-offset-display .ahead{color:#fa0}.phase-offset-display .behind{color:#f48}.phase-offset-display .in-phase{color:#0f8;font-weight:700}.phase-offset-display .no-sync{color:#ffffff4d}.master-button{color:#fff9;text-transform:uppercase;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:4px;align-items:center;gap:4px;padding:6px 12px;font-size:10px;font-weight:700;transition:all .2s;display:flex}.master-button:hover{color:#fffc;background:#ffffff26;border-color:#ffffff4d}.master-button.active{color:#000;background:linear-gradient(135deg,gold 0%,#fa0 100%);border-color:gold;box-shadow:0 0 12px #ffd70066}.master-button.active:hover{background:linear-gradient(135deg,#ffe033 0%,#fb3 100%)}.master-button svg{opacity:.8}.master-button.active svg{opacity:1}.master-indicator{background:linear-gradient(135deg,#ffd7001a 0%,#ffaa001a 100%);border:1px solid #ffd7004d;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:12px;display:flex}.master-badge{color:#000;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(135deg,gold 0%,#fa0 100%);border-radius:4px;align-items:center;gap:6px;padding:6px 16px;font-size:12px;font-weight:700;display:flex}.master-hint{color:#ffd700b3;text-align:center;font-size:10px}.stem-playback-controls{background:#0003;border-radius:4px;margin-top:8px;padding:8px}.stem-mode-toggle{color:#96f;text-transform:uppercase;cursor:pointer;background:#8a2be233;border:1px solid #8a2be266;border-radius:4px;width:100%;padding:8px 12px;font-size:11px;font-weight:700;transition:all .2s}.stem-mode-toggle:hover{background:#8a2be24d;border-color:#8a2be299}.stem-mode-toggle.active{color:#fff;background:linear-gradient(135deg,#8a2be2 0%,#96f 100%);border-color:#8a2be2;box-shadow:0 0 12px #8a2be266}.not-found-container{background:#0a0a0a;justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.not-found-content{text-align:center;max-width:500px}.vinyl-404{width:200px;height:200px;margin:0 auto 2rem;position:relative}.vinyl-record{background:linear-gradient(45deg,#1a1a1a 25%,#2a2a2a 25% 50%,#1a1a1a 50% 75%,#2a2a2a 75%) 0 0/20px 20px;border-radius:50%;justify-content:center;align-items:center;width:200px;height:200px;animation:10s linear infinite spin-slow;display:flex;box-shadow:0 0 20px #00000080}.vinyl-label{color:#fff;background:#f06;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:1.5rem;font-weight:700;display:flex}.broken-headphones{color:#ffffff80;width:60px;height:60px;position:absolute;bottom:-20px;right:-20px;transform:rotate(45deg)}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.not-found-content h1{color:#fff;margin-bottom:1rem;font-size:2.5rem}.not-found-content p{color:#ffffffb3;margin-bottom:2rem;font-size:1.2rem}.not-found-actions{justify-content:center;gap:1rem;display:flex}.btn-primary,.btn-secondary{border-radius:8px;padding:.75rem 1.5rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-block}.landing-page{color:#fff;background:#0a0a0a;min-height:100vh}.nav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;background:#0a0a0af2;border-bottom:1px solid #ffffff1a;transition:all .3s;position:fixed;top:0;left:0;right:0}.nav-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex}.logo{color:#fff;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:700;text-decoration:none;display:flex}.logo-icon{color:#f06}.nav-links{align-items:center;gap:2rem;display:flex}.nav-links a{color:#fffffff2;font-weight:500;text-decoration:none;transition:color .2s}.nav-links a:hover{color:#fff}.btn-primary,.btn-secondary{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ff00664d}.hero{grid-template-columns:1fr 1fr;align-items:center;gap:4rem;max-width:1200px;min-height:100vh;margin:0 auto;padding:8rem 2rem 4rem;display:grid}.hero-content h1{background:linear-gradient(135deg,#f06 0%,#f60 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1.5rem;font-size:3.5rem;font-weight:800;line-height:1.1}.hero-subtitle{color:#ffffffe6;margin-bottom:2rem;font-size:1.25rem;line-height:1.6}.hero-buttons{flex-wrap:wrap;gap:1rem;display:flex}.hero-visual{justify-content:center;align-items:center;height:500px;display:flex;position:relative}.dj-visualization{background:radial-gradient(#f063 0%,#6600ff1a 70%,#0000 100%);border-radius:20px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.turntable-icon{color:#ff00664d;font-size:120px;animation:20s linear infinite spin}.audio-bars{align-items:flex-end;gap:4px;height:60px;display:flex;position:absolute;bottom:20px;left:20px;right:20px}.bar{background:linear-gradient(#f60,#f06);border-radius:2px;flex:1;animation:1.5s ease-in-out infinite audioBar}.bar:nth-child(odd){animation-delay:.1s}.bar:nth-child(2n){animation-delay:.3s}.features{background:#ffffff05;padding:6rem 2rem}.features-container{max-width:1200px;margin:0 auto}.features h2{text-align:center;margin-bottom:3rem;font-size:2.5rem;font-weight:700}.features-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;display:grid}.feature-card{text-align:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;padding:2rem;transition:all .3s}.feature-card:hover{background:#ffffff14;transform:translateY(-8px);box-shadow:0 20px 40px #0000004d}.feature-icon{color:#f06;background:linear-gradient(135deg,#f063,#f603);border-radius:16px;margin-bottom:1rem;padding:1rem;display:inline-flex}.feature-card h3{margin-bottom:1rem;font-size:1.5rem;font-weight:600}.feature-card p{color:#ffffffe6;line-height:1.6}.how-it-works{padding:6rem 2rem}.how-container{max-width:1200px;margin:0 auto}.how-it-works h2{text-align:center;margin-bottom:3rem;font-size:2.5rem;font-weight:700}.steps{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;display:grid}.step{text-align:center;position:relative}.step-number{background:linear-gradient(135deg,#f06,#f60);border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin-bottom:1rem;font-size:1.5rem;font-weight:700;display:inline-flex}.step h3{margin-bottom:.75rem;font-size:1.25rem;font-weight:600}.step p{color:#ffffffe6;line-height:1.6}.footer{background:#ffffff05;border-top:1px solid #ffffff1a;padding:3rem 2rem 2rem}.footer-content{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:3rem;max-width:1200px;margin:0 auto;display:flex}.footer-brand{color:#fff;align-items:center;gap:.75rem;font-weight:600;display:flex}.footer-links{gap:2rem;display:flex}.footer-links a{color:#ffffffd9;text-decoration:none;transition:color .2s}.footer-links a:hover{color:#fff}.footer-section{flex:1;min-width:200px}.footer-section h3{color:#fff;margin-bottom:1rem;font-size:1rem;font-weight:600}.footer-section a{color:#ffffffe6;padding:.25rem 0;text-decoration:none;transition:color .2s;display:block}.footer-section a:hover{color:#f06}.footer-bottom{text-align:center;color:#ffffffe6;border-top:1px solid #ffffff1a;max-width:1200px;margin:2rem auto 0;padding-top:2rem}@keyframes audioBar{0%,to{height:20%}50%{height:100%}}.mobile-nav-toggle{color:#fff;cursor:pointer;background:0 0;border:none;padding:8px;display:none}@media (width<=768px){.nav{display:none}.hero{text-align:center;grid-template-columns:1fr;gap:2rem;padding:6rem 1rem 2rem}.hero-content h1{font-size:2.5rem}.hero-subtitle{font-size:1.1rem}.hero-visual{height:300px}.turntable-icon{font-size:80px}.features{padding:4rem 1rem}.features-grid{grid-template-columns:1fr;gap:1.5rem}.feature-card{padding:1.5rem}.how-it-works{padding:4rem 1rem}.steps{grid-template-columns:1fr;gap:3rem}.footer{padding:2rem 1rem}.footer-content,.footer-links{text-align:center;flex-direction:column;gap:1rem}}@media (width<=480px){.hero-content h1{font-size:2rem}.hero-buttons{flex-direction:column;align-items:center}.btn-primary,.btn-secondary{justify-content:center;width:100%;max-width:300px}.features h2,.how-it-works h2{font-size:2rem}}@media (-webkit-device-pixel-ratio>=2),(resolution>=192dpi){.hero-visual{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}.language-selector{display:inline-block;position:relative}.language-toggle{background:var(--surface);border:1px solid var(--surface-light);color:var(--text);cursor:pointer;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;transition:all .2s;display:flex}.language-toggle:hover{background:var(--surface-light);border-color:var(--primary)}.language-dropdown{background:var(--surface);border:1px solid var(--surface-light);z-index:1000;border-radius:8px;min-width:150px;margin-top:.5rem;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:0 10px 30px #0000004d}.language-option{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;padding:.75rem 1rem;font-size:.875rem;transition:background-color .2s;display:block}.language-option:hover{background:var(--surface-light)}.language-option.active{background:var(--primary);color:#fff}@media (width<=768px){.language-toggle{padding:.375rem .75rem;font-size:.8rem}.language-dropdown{min-width:120px}.language-option{padding:.5rem .75rem;font-size:.8rem}}.pricing-page{color:#fff;background:#0a0a0a;min-height:100vh}.pricing-page .logo,.pricing-page .nav-links a{color:#fff!important}.pricing-page .btn-secondary{color:#fff!important;border-color:#ffffff4d!important}.pricing-page .btn-secondary:hover{background:#ffffff1a}.pricing-page button.btn-secondary,.pricing-page button[component=SignUpButton]{color:#fff!important;background:#ffffff0d!important;border-color:#ffffff4d!important}.pricing-hero{text-align:center;max-width:1200px;margin:0 auto;padding:8rem 2rem 4rem}.pricing-hero h1{background:linear-gradient(135deg,#f06 0%,#f60 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1rem;font-size:3rem;font-weight:700}.pricing-hero p{color:#ffffffe6;margin-bottom:3rem;font-size:1.25rem}.pricing-container{max-width:1200px;margin:0 auto;padding:0 2rem 4rem}.pricing-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:4rem;display:grid}.pricing-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;padding:2rem;transition:all .3s;position:relative}.pricing-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px #0000004d}.pricing-card.highlighted{background:#ff00660d;border:2px solid #f06}.badge{color:#fff;background:#cc0052;border-radius:20px;padding:.25rem 1rem;font-size:.875rem;font-weight:600;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.pricing-card h2{margin-bottom:1rem;font-size:1.75rem;font-weight:600}.price{margin-bottom:1.5rem}.amount{color:#fff;font-size:2.5rem;font-weight:700}.period{color:#fffc;margin-left:.5rem;font-size:1rem}.description{color:#ffffffd9;margin-bottom:2rem;font-size:1rem;line-height:1.6}.features{margin-bottom:2rem;list-style:none}.features li{color:#ffffffe6;align-items:center;gap:.75rem;padding:.5rem 0;font-size:.95rem;display:flex}.features .icon{flex-shrink:0;width:20px;height:20px}.features .included .icon{color:#10b981}.features .not-included{color:#ffffff80}.features .not-included .icon{color:#ffffff4d}.btn-block{text-align:center;justify-content:center;width:100%;padding:.875rem 1.5rem;font-size:1rem;font-weight:600}.faq-section{max-width:1200px;margin:0 auto;padding:4rem 2rem}.faq-section h2{text-align:center;margin-bottom:3rem;font-size:2.5rem;font-weight:700}.faq-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;display:grid}.faq-item{background:#ffffff0d;border-radius:12px;padding:1.5rem}.faq-item h3{color:#fff;margin-bottom:.75rem;font-size:1.25rem;font-weight:600}.faq-item p{color:#ffffffd9;line-height:1.6}.footer{text-align:center;background:#ffffff05;border-top:1px solid #ffffff1a;padding:2rem}.footer p{color:#fffc;font-size:.95rem}.container{max-width:1200px;margin:0 auto}@media (width<=768px){.pricing-hero{padding:6rem 1rem 2rem}.pricing-hero h1{font-size:2rem}.pricing-grid,.faq-grid{grid-template-columns:1fr}}@media (prefers-contrast:high){.pricing-card{border:2px solid #ffffff80}.features li{color:#fff}.features .not-included{color:#ffffffb3}}.performance-playback{background:var(--surface-color,#1a1a1a);border:1px solid var(--border-color,#333);border-radius:12px;margin:8px;padding:20px;position:relative;overflow:hidden}.playback-header{border-bottom:1px solid var(--border-color,#333);justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;display:flex}.header-left h3{color:var(--text-primary,#fff);margin:0;font-size:18px;font-weight:600}.action-button{background:var(--button-bg,#333);border:1px solid var(--border-color,#444);color:var(--text-primary,#fff);cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:8px 12px;font-size:14px;transition:all .2s;display:flex}.action-button:hover{background:var(--button-hover,#444);transform:translateY(-1px)}.upload-area{border:2px dashed var(--border-color,#333);background:var(--surface-alt,#222);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;min-height:300px;transition:all .3s;display:flex;position:relative}.upload-area:hover,.upload-area.drag-active{border-color:var(--accent-color,#0f8);background:var(--accent-bg,#00ff881a);transform:scale(1.02)}.upload-area h4{color:var(--text-primary,#fff);margin:16px 0 8px;font-size:20px;font-weight:600}.upload-area p{color:var(--text-secondary,#999);text-align:center;margin:4px 0}.upload-area .file-info{background:var(--surface-color,#1a1a1a);border-radius:6px;margin-top:12px;padding:8px 12px;font-size:12px}.track-info{background:var(--surface-alt,#222);border-radius:12px;align-items:center;gap:16px;margin-bottom:20px;padding:16px;display:flex}.track-artwork{background:var(--accent-bg,#0f83);width:80px;height:80px;color:var(--accent-color,#0f8);border-radius:8px;justify-content:center;align-items:center;display:flex}.track-details{flex:1;min-width:0}.track-title{color:var(--text-primary,#fff);white-space:nowrap;text-overflow:ellipsis;margin:0 0 4px;font-size:18px;font-weight:600;overflow:hidden}.track-artist{color:var(--text-secondary,#999);white-space:nowrap;text-overflow:ellipsis;margin:0 0 8px;font-size:14px;overflow:hidden}.track-meta{flex-wrap:wrap;gap:12px;display:flex}.track-meta span{background:var(--surface-color,#1a1a1a);color:var(--text-secondary,#999);border-radius:4px;padding:2px 8px;font-size:12px}.track-navigation{gap:8px;display:flex}.nav-button{background:var(--button-bg,#333);border:1px solid var(--border-color,#444);width:40px;height:40px;color:var(--text-primary,#fff);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex}.nav-button:hover:not(:disabled){background:var(--button-hover,#444);transform:translateY(-1px)}.nav-button:disabled{opacity:.5;cursor:not-allowed}.progress-section{margin-bottom:24px}.time-display{justify-content:space-between;margin-bottom:8px;font-family:SF Mono,Monaco,monospace;font-size:14px;display:flex}.current-time{color:var(--accent-color,#0f8);font-weight:600}.duration{color:var(--text-secondary,#999)}.progress-bar-container{background:var(--surface-alt,#222);cursor:pointer;border-radius:4px;height:8px;position:relative;overflow:hidden}.progress-bar{width:100%;height:100%;position:relative}.progress-fill{background:linear-gradient(90deg, var(--accent-color,#0f8), var(--accent-light,#4fa));border-radius:4px;height:100%;transition:width .1s linear}.track-marker{background:var(--warning-color,#fa0);opacity:.7;pointer-events:none;width:2px;height:100%;position:absolute;top:0}.cue-marker{cursor:pointer;z-index:2;border-radius:3px;width:6px;height:12px;position:absolute;top:-2px;transform:translate(-50%)}.cue-marker.hot-cue{background:#f33}.cue-marker.loop-in{background:#3f3}.cue-marker.loop-out{background:#f93}.cue-marker.beatjump{background:#33f}.cue-marker.marker{background:#f3f}.main-controls{justify-content:center;align-items:center;gap:16px;margin-bottom:20px;display:flex}.control-button{border:2px solid var(--border-color,#333);background:var(--button-bg,#333);width:48px;height:48px;color:var(--text-primary,#fff);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.control-button:hover:not(:disabled){background:var(--button-hover,#444);border-color:var(--accent-color,#0f8);transform:scale(1.05)}.control-button:disabled{opacity:.5;cursor:not-allowed}.control-button.play-pause{background:var(--accent-color,#0f8);color:#000;border-color:var(--accent-color,#0f8);width:64px;height:64px}.control-button.play-pause:hover{background:var(--accent-hover,#0fa)}.control-button.play-pause.playing{background:var(--warning-color,#fa0);border-color:var(--warning-color,#fa0)}.secondary-controls{background:var(--surface-alt,#222);border-radius:8px;gap:24px;margin-bottom:20px;padding:16px;display:flex}.control-group{flex:1;align-items:center;gap:12px;display:flex}.control-group svg{color:var(--text-secondary,#999)}.volume-slider,.speed-slider{appearance:none;background:var(--slider-track,#333);border-radius:2px;outline:none;flex:1;height:4px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-color,#0f8);cursor:pointer;border-radius:50%;width:16px;height:16px}.speed-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-color,#0f8);cursor:pointer;border-radius:50%;width:16px;height:16px}.volume-slider::-moz-range-thumb{background:var(--accent-color,#0f8);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px}.speed-slider::-moz-range-thumb{background:var(--accent-color,#0f8);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px}.value-display{color:var(--text-secondary,#999);text-align:right;min-width:40px;font-family:SF Mono,Monaco,monospace;font-size:12px}.action-buttons{gap:12px;margin-bottom:20px;display:flex}.action-buttons .action-button{flex:1}.info-panel{background:var(--surface-alt,#222);border-radius:8px;margin-bottom:16px;padding:16px}.info-panel h4{color:var(--text-primary,#fff);margin:0 0 16px;font-size:16px;font-weight:600}.tracklist{max-height:300px;overflow-y:auto}.track-item{cursor:pointer;border-radius:8px;align-items:center;gap:16px;margin-bottom:8px;padding:12px;transition:all .2s;display:flex}.track-item:hover{background:var(--surface-color,#1a1a1a)}.track-item.current{background:var(--accent-bg,#0f83);border:1px solid var(--accent-color,#0f8)}.track-item .track-time{color:var(--text-secondary,#999);align-items:center;gap:6px;min-width:80px;font-family:SF Mono,Monaco,monospace;font-size:12px;display:flex}.track-item .track-info{flex:1;min-width:0}.track-item .track-title{color:var(--text-primary,#fff);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;display:block;overflow:hidden}.track-item .track-artist{color:var(--text-secondary,#999);white-space:nowrap;text-overflow:ellipsis;font-size:12px;display:block;overflow:hidden}.track-item .track-meta{gap:8px;display:flex}.track-item .track-meta span{background:var(--surface-color,#1a1a1a);color:var(--text-secondary,#999);border-radius:3px;padding:2px 6px;font-size:11px}.cuepoints{max-height:300px;overflow-y:auto}.cue-item{cursor:pointer;border-left:4px solid;border-radius:8px;align-items:center;gap:16px;margin-bottom:8px;padding:12px;transition:all .2s;display:flex}.cue-item.hot-cue{border-left-color:#f33}.cue-item.loop-in{border-left-color:#3f3}.cue-item.loop-out{border-left-color:#f93}.cue-item.beatjump{border-left-color:#33f}.cue-item.marker{border-left-color:#f3f}.cue-item:hover{background:var(--surface-color,#1a1a1a)}.cue-item .cue-time{color:var(--text-secondary,#999);align-items:center;gap:6px;min-width:80px;font-family:SF Mono,Monaco,monospace;font-size:12px;display:flex}.cue-item .cue-info{flex:1}.cue-item .cue-label{color:var(--text-primary,#fff);font-size:14px;font-weight:500;display:block}.cue-item .cue-type{color:var(--text-secondary,#999);text-transform:capitalize;font-size:12px;display:block}.cue-item .cue-deck{background:var(--surface-color,#1a1a1a);color:var(--text-secondary,#999);border-radius:3px;padding:2px 6px;font-size:11px}.loading-overlay{z-index:10;background:#000c;border-radius:12px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.loading-spinner{flex-direction:column;align-items:center;gap:16px;display:flex}.spinner{border:4px solid var(--border-color,#333);border-top:4px solid var(--accent-color,#0f8);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.loading-spinner p{color:var(--text-primary,#fff);margin:0}@media (width<=768px){.performance-playback{padding:16px}.track-info{text-align:center;flex-direction:column}.track-navigation{justify-content:center}.secondary-controls{flex-direction:column;gap:16px}.action-buttons{flex-direction:column}.track-item{flex-direction:column;align-items:flex-start;gap:8px}.track-item .track-meta{justify-content:flex-start}}.stream-broadcast{background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);border-radius:12px;min-height:400px;padding:20px;position:relative;box-shadow:0 4px 20px #0000004d}.stream-broadcast.loading{justify-content:center;align-items:center;display:flex}.loading-spinner{text-align:center}.spinner{border:3px solid #f063;border-top-color:#f06;border-radius:50%;width:40px;height:40px;margin:0 auto 10px;animation:1s linear infinite spin}.broadcast-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;display:flex}.header-left{align-items:center;gap:10px;display:flex}.header-left h3{color:#fff;margin:0;font-size:18px}.live-icon{color:#f06;animation:2s ease-in-out infinite pulse}.live-badge{color:#fff;background:#f06;border-radius:4px;padding:2px 8px;font-size:12px;font-weight:700;animation:2s ease-in-out infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.header-actions{gap:10px;display:flex}.action-button{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:6px;align-items:center;gap:5px;padding:8px;transition:all .2s;display:flex}.action-button:hover{background:#fff3}.broadcast-controls{align-items:center;gap:20px;margin-bottom:20px;display:flex}.stream-button{color:#000;cursor:pointer;background:linear-gradient(135deg,#0f8 0%,#0c6 100%);border:none;border-radius:8px;align-items:center;gap:10px;padding:12px 24px;font-size:16px;font-weight:700;transition:all .3s;display:flex;box-shadow:0 2px 10px #00ff884d}.stream-button.stop{color:#fff;background:linear-gradient(135deg,#f44 0%,#c00 100%);box-shadow:0 2px 10px #ff44444d}.stream-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #00ff8880}.stream-button.stop:hover{box-shadow:0 4px 15px #ff444480}.stream-indicators{flex:1;gap:15px;display:flex}.indicator{color:#888;background:#ffffff0d;border-radius:6px;align-items:center;gap:5px;padding:6px 12px;font-size:14px;display:flex}.indicator.active{color:#0f8;background:#00ff881a}.platform-status{flex-wrap:wrap;gap:10px;margin-bottom:20px;display:flex}.platform-badge{color:#fff;background:#ffffff1a;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:14px;display:flex}.platform-icon{font-size:16px}.platform-status{color:#fff;background:#f06;border-radius:4px;padding:2px 6px;font-size:11px;font-weight:700}.no-platforms{color:#fa0;align-items:center;gap:6px;font-size:14px;display:flex}.stream-stats{background:#0000004d;border-radius:8px;gap:20px;margin-bottom:20px;padding:15px;display:flex}.stat-item{color:#ccc;align-items:center;gap:6px;font-size:14px;display:flex}.stat-label{color:#888}.stat-value{color:#fff;font-weight:700}.quick-controls{gap:10px;margin-bottom:20px;display:flex}.control-button{color:#888;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;justify-content:center;align-items:center;padding:10px;transition:all .2s;display:flex}.control-button:hover{background:#ffffff1a;border-color:#fff3}.control-button.active{color:#0f8;background:#00ff881a;border-color:#0f8}.settings-panel{z-index:100;background:#2a2a2a;border:1px solid #ffffff1a;border-radius:8px;width:400px;max-height:500px;position:absolute;top:70px;right:20px;overflow-y:auto;box-shadow:0 4px 20px #00000080}.panel-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:15px;display:flex}.panel-header h4{color:#fff;margin:0;font-size:16px}.panel-header button{color:#888;cursor:pointer;background:0 0;border:none;padding:4px;transition:color .2s}.panel-header button:hover{color:#fff}.settings-content{padding:15px}.setting-group{margin-bottom:20px}.setting-group h5{color:#ccc;margin:0 0 10px;font-size:14px;font-weight:400}.quality-select{color:#fff;background:#0000004d;border:1px solid #ffffff1a;border-radius:4px;width:100%;padding:8px;font-size:14px}.platform-config{margin-bottom:15px}.platform-config label{color:#fff;cursor:pointer;align-items:center;gap:8px;margin-bottom:8px;display:flex}.platform-config input[type=checkbox]{width:16px;height:16px}.platform-fields{flex-direction:column;gap:8px;margin-left:24px;display:flex}.stream-key-input,.server-url-input{color:#fff;background:#0000004d;border:1px solid #ffffff1a;border-radius:4px;width:100%;padding:8px;font-size:14px}.stream-key-input::placeholder,.server-url-input::placeholder{color:#666}.overlay-editor{z-index:100;background:#2a2a2a;border:1px solid #ffffff1a;border-radius:8px;width:350px;max-height:500px;position:absolute;top:70px;left:20px;overflow-y:auto;box-shadow:0 4px 20px #00000080}.overlays-list{padding:15px}.overlay-item{cursor:pointer;background:#ffffff0d;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px;transition:all .2s;display:flex}.overlay-item:hover{background:#ffffff14}.overlay-item.selected{background:#00ff881a;border:1px solid #0f8}.overlay-item label{color:#fff;cursor:pointer;flex:1;align-items:center;gap:8px;display:flex}.overlay-item input[type=checkbox]{width:16px;height:16px}.remove-button{color:#f44;cursor:pointer;background:#f443;border:none;border-radius:4px;padding:4px;transition:all .2s}.remove-button:hover{color:#f66;background:#ff44444d}.add-overlay-button{color:#0f8;cursor:pointer;background:#00ff881a;border:1px dashed #0f8;border-radius:6px;justify-content:center;align-items:center;gap:8px;width:100%;padding:10px;font-size:14px;transition:all .2s;display:flex}.add-overlay-button:hover{background:#0f83}.overlay-properties{border-top:1px solid #ffffff1a;padding:15px}.overlay-properties h5{color:#ccc;margin:0 0 10px;font-size:14px;font-weight:400}@media (width<=768px){.stream-broadcast{padding:15px}.broadcast-controls{flex-direction:column;align-items:stretch}.stream-button{justify-content:center;width:100%}.stream-indicators{justify-content:space-around}.settings-panel,.overlay-editor{width:90%;max-width:400px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.stream-stats{flex-wrap:wrap}.quick-controls{justify-content:space-around}}.ai-dj-interface{color:#fff;background:linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 100%);border-radius:16px;max-width:1200px;margin:0 auto;padding:24px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;box-shadow:0 8px 32px #0006}.ai-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:24px;display:flex}.ai-logo{align-items:center;gap:16px;display:flex}.brain-icon{color:#0f8;filter:drop-shadow(0 0 8px #00ff884d)}.ai-logo h2{background:linear-gradient(45deg,#0f8,#0cd);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:24px;font-weight:700}.ai-logo p{color:#888;margin:0;font-size:14px}.ai-status{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:12px;padding:12px 16px;display:flex}.status-indicator{border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .3s;display:flex}.status-indicator.idle{color:#666;background:#64646433}.status-indicator.analyzing{color:orange;background:#ffa50033}.status-indicator.planning{color:#007bff;background:#007bff33}.status-indicator.ready{color:#0f8;background:#0f83}.status-indicator.mixing{color:#f06;background:#f063}.spinning{animation:1s linear infinite spin}.pulsing{animation:2s ease-in-out infinite pulse}.status-text{flex-direction:column;gap:2px;display:flex}.status-text strong{letter-spacing:.5px;font-size:12px}.status-text span{color:#999;font-size:11px}.ai-library-section,.ai-planning-section,.ai-setplan-section,.ai-execution-section,.ai-settings-section{background:#ffffff08;border:1px solid #ffffff14;border-radius:12px;margin-bottom:20px;padding:20px;transition:all .3s}.ai-library-section:hover,.ai-planning-section:hover,.ai-setplan-section:hover,.ai-execution-section:hover{background:#ffffff0d;border-color:#ffffff26}.section-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.section-header h3{color:#fff;align-items:center;gap:8px;margin:0;font-size:18px;font-weight:600;display:flex}.upload-btn,.plan-btn{color:#000;cursor:pointer;background:linear-gradient(135deg,#0f8 0%,#0c6 100%);border:none;border-radius:6px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .2s;display:flex;box-shadow:0 2px 8px #0f83}.upload-btn:hover,.plan-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00ff884d}.upload-btn:disabled,.plan-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.library-stats{gap:24px;margin-bottom:16px;display:flex}.stat{color:#ccc;align-items:center;gap:6px;font-size:14px;display:flex}.stat svg{color:#0f8}.track-list{flex-direction:column;gap:8px;display:flex}.track-item{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:12px;padding:12px;transition:all .2s;display:flex}.track-item:hover{background:#ffffff14;border-color:#00ff884d}.track-number{color:#0f8;background:#0f83;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:600;display:flex}.track-info{flex:1}.track-title{color:#fff;margin-bottom:4px;font-weight:600}.track-details{color:#999;gap:12px;font-size:12px;display:flex}.track-details span{background:#ffffff1a;border-radius:4px;padding:2px 6px}.track-details .bpm{color:orange;background:#ffa50033}.track-details .key{color:#007bff;background:#007bff33}.track-details .energy{color:#f06;background:#f063}.track-details .genre{color:#8a2be2;background:#8a2be233}.more-tracks{text-align:center;color:#666;padding:8px;font-style:italic}.planning-controls{gap:32px;margin-top:16px;display:flex}.control-group{flex-direction:column;gap:8px;display:flex}.control-group label{color:#ccc;align-items:center;gap:6px;font-size:14px;font-weight:600;display:flex}.duration-slider{align-items:center;gap:12px;display:flex}.duration-slider input[type=range]{appearance:none;background:#ffffff1a;border-radius:3px;outline:none;width:120px;height:6px}.duration-slider input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#0f8;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 6px #0f86}.duration-slider span{color:#0f8;min-width:60px;font-size:14px;font-weight:600}.energy-buttons{gap:8px;display:flex}.energy-buttons button{color:#ccc;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;padding:6px 12px;font-size:12px;transition:all .2s}.energy-buttons button:hover{background:#ffffff26;border-color:#ffffff4d}.energy-buttons button.active{color:#0f8;background:#0f83;border-color:#0f8}.setplan-overview{gap:24px;margin-bottom:20px;display:flex}.track-count,.transition-count{align-items:center;gap:8px;font-size:16px;font-weight:600;display:flex}.set-duration{color:#0f8;background:#00ff881a;border:1px solid #00ff884d;border-radius:6px;padding:4px 12px;font-weight:600}.energy-curve{margin-bottom:20px}.curve-label{color:#ccc;margin-bottom:8px;font-size:14px}.curve-visualization{background:#0000004d;border-radius:4px;align-items:end;gap:2px;height:60px;padding:4px;display:flex}.energy-bar{background:linear-gradient(#0cd,#0f8);border-radius:1px;flex:1;min-height:2px;transition:height .3s}.section-timeline{border-radius:6px;height:40px;display:flex;overflow:hidden;box-shadow:inset 0 2px 4px #0003}.timeline-section{border-right:1px solid #ffffff1a;flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:relative}.timeline-section:last-child{border-right:none}.timeline-section.opening{background:linear-gradient(135deg,#4a90e2,#357abd)}.timeline-section.build{background:linear-gradient(135deg,#f5a623,#e08e0b)}.timeline-section.peak{background:linear-gradient(135deg,#f06,#cc0052)}.timeline-section.maintain{background:linear-gradient(135deg,#0f8,#0c6)}.timeline-section.cooldown{background:linear-gradient(135deg,#9013fe,#6b0fb8)}.section-name{text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:600}.section-energy{opacity:.8;font-size:10px}.execution-controls{align-items:center;gap:20px;margin-bottom:20px;display:flex}.play-button{color:#000;cursor:pointer;background:linear-gradient(135deg,#0f8 0%,#0c6 100%);border:none;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;transition:all .3s;display:flex;box-shadow:0 4px 16px #00ff884d}.play-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #0f86}.play-button.playing{background:linear-gradient(135deg,#f06 0%,#cc0052 100%);box-shadow:0 4px 16px #ff00664d}.play-button.playing:hover{box-shadow:0 6px 20px #f066}.mix-info{flex:1}.now-playing,.up-next{margin-bottom:4px;font-size:14px}.now-playing strong,.up-next strong{color:#0f8}.crowd-energy{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;padding:16px}.energy-label{align-items:center;gap:6px;margin-bottom:8px;font-size:14px;font-weight:600;display:flex}.energy-meter{background:#ffffff1a;border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden}.energy-fill{background:linear-gradient(90deg,#f06,#f60,#fa0,#0f8);border-radius:4px;height:100%;transition:width .5s}.energy-controls{justify-content:center;align-items:center;gap:8px;display:flex}.energy-controls button{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:all .2s;display:flex}.energy-controls button:hover{background:#fff3;border-color:#ffffff4d}.energy-controls span{text-align:center;min-width:32px;font-weight:600}.settings-toggle{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;align-items:center;gap:8px;padding:10px 16px;font-size:14px;transition:all .2s;display:flex}.settings-toggle:hover{background:#ffffff26;border-color:#ffffff4d}.settings-panel{background:#0000004d;border:1px solid #ffffff1a;border-radius:8px;margin-top:16px;padding:16px}.setting{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:12px 0;display:flex}.setting:last-child{border-bottom:none}.setting label{color:#ccc;align-items:center;gap:8px;font-size:14px;display:flex}.setting input[type=checkbox]{accent-color:#0f8;width:18px;height:18px}.setting input[type=range]{appearance:none;background:#ffffff1a;border-radius:3px;outline:none;width:100px;height:6px}.setting input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#0f8;border-radius:50%;width:14px;height:14px}.setting span{color:#0f8;text-align:right;min-width:40px;font-size:12px}.genre-select{flex-wrap:wrap;gap:6px;display:flex}.genre-select button{color:#ccc;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:4px;padding:4px 8px;font-size:11px;transition:all .2s}.genre-select button:hover{background:#ffffff26;border-color:#ffffff4d}.genre-select button.active{color:#0f8;background:#0f83;border-color:#0f8}@media (width<=768px){.ai-dj-interface{padding:16px}.ai-header{flex-direction:column;align-items:flex-start;gap:16px}.planning-controls{flex-direction:column;gap:16px}.library-stats{flex-wrap:wrap;gap:12px}.execution-controls{flex-direction:column;align-items:flex-start;gap:16px}.setplan-overview{flex-direction:column;gap:12px}}.simple-dj-interface{color:#fff;background:#0a0a0a;flex-direction:column;height:100vh;display:flex;position:relative;overflow:hidden}.keyboard-help{z-index:100;background:#000c;border:1px solid #333;border-radius:12px;flex-direction:column;gap:4px;padding:8px 12px;font-size:11px;display:flex;position:fixed;bottom:20px;left:20px}.keyboard-help-minimized{z-index:100;opacity:.7;background:#0009;border:1px solid #333;border-radius:8px;padding:6px 10px;font-size:10px;transition:opacity .2s;position:fixed;bottom:20px;left:20px}.keyboard-help-minimized:hover{opacity:1}.help-item{color:#999;white-space:nowrap}.help-item:last-child{color:#6c47ff;border-top:1px solid #333;margin-top:2px;padding-top:4px;font-weight:600}.waveform-controls{z-index:100;background:#000c;border:1px solid #333;border-radius:20px;align-items:center;gap:15px;padding:8px 12px;display:flex;position:fixed;top:20px;right:20px}.visualization-controls{background:#ffffff0d;border-radius:6px;gap:3px;padding:2px;display:flex}.viz-toggle-btn{color:#ccc;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:10px;font-weight:600;transition:all .2s}.viz-toggle-btn:hover{color:#fff;background:#ffffff1a}.viz-toggle-btn.active{color:#fff;background:#6c47ff;box-shadow:0 0 6px #6c47ff66}.ai-controls{gap:5px;display:flex}.ai-transition-btn{color:#ccc;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:#ffffff0d;border:1px solid #333;border-radius:6px;padding:6px 12px;font-size:10px;font-weight:600;transition:all .2s;position:relative}.ai-transition-btn:hover{color:#fff;background:#ffffff1a;border-color:#6c47ff}.ai-transition-btn.active{color:#fff;background:#6c47ff;border-color:#6c47ff;box-shadow:0 0 8px #6c47ff66}.suggestion-count{color:#fff;text-align:center;background:#f44;border-radius:10px;min-width:16px;margin-left:4px;padding:2px 5px;font-size:8px;font-weight:700;position:absolute;top:-2px;right:-2px}.transition-suggestions-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:200;background:#000000f2;border:1px solid #333;border-radius:12px;width:380px;max-height:calc(100vh - 120px);position:fixed;top:80px;right:20px;overflow:hidden;box-shadow:0 8px 32px #000c}.transition-header{background:#6c47ff1a;border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.transition-header h3{color:#fff;margin:0;font-size:14px;font-weight:600}.close-btn{color:#999;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px;font-size:16px;transition:all .2s}.close-btn:hover{color:#fff;background:#ffffff1a}.no-suggestions{padding:40px 20px}.no-suggestions-content{text-align:center;color:#666}.no-suggestions-icon{margin-bottom:16px;font-size:48px}.no-suggestions-text p{margin:8px 0;line-height:1.4}.sub-text{color:#555;font-size:12px}.suggestions-list{max-height:calc(100vh - 200px);padding:0;overflow-y:auto}.current-track-info{background:#6c47ff0d;border-bottom:1px solid #222;padding:16px 20px}.current-track-label{color:#999;margin-bottom:4px;font-size:11px}.current-track-details .track-title{color:#fff;margin-bottom:2px;font-size:13px;font-weight:600}.current-track-details .track-meta{color:#ccc;font-size:10px}.suggestion-item{border-bottom:1px solid #222;padding:16px 20px;transition:background .2s;display:flex}.suggestion-item:hover{background:#ffffff05}.suggestion-rank{color:#fff;background:#333;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-right:12px;font-size:10px;font-weight:700;display:flex}.suggestion-content{flex:1}.suggestion-header{justify-content:space-between;align-items:flex-start;margin-bottom:8px;display:flex}.track-info .track-title{color:#fff;margin-bottom:2px;font-size:13px;font-weight:600}.track-info .track-artist{color:#999;font-size:11px}.compatibility-score{text-align:right}.score-badge{border-radius:12px;margin-bottom:2px;padding:4px 8px;font-size:10px;font-weight:700}.score-badge.excellent{color:#000;background:#0f6}.score-badge.good{color:#000;background:#fa0}.score-badge.fair{color:#fff;background:#666}.transition-type{color:#999;text-transform:uppercase;letter-spacing:.5px;font-size:9px}.suggestion-details{margin-top:8px}.track-analysis{flex-wrap:wrap;gap:8px;margin-bottom:8px;display:flex}.analysis-item{color:#ccc;background:#ffffff0d;border-radius:10px;padding:2px 6px;font-size:9px}.transition-reasons{flex-wrap:wrap;gap:4px;margin-bottom:8px;display:flex}.reason-tag{color:#6c47ff;background:#6c47ff33;border-radius:8px;padding:2px 6px;font-size:9px;font-weight:600}.suggestion-actions{justify-content:space-between;align-items:center;display:flex}.mix-point{color:#999;font-size:10px}.load-track-btn{color:#fff;cursor:pointer;background:#6c47ff;border:none;border-radius:6px;padding:6px 12px;font-size:10px;font-weight:600;transition:all .2s}.load-track-btn:hover{background:#5a3ae0;transform:translateY(-1px);box-shadow:0 2px 8px #6c47ff66}.smart-loop-controls{gap:8px;margin-top:8px;display:flex}.smart-loop-btn,.smart-loop-suggest-btn{color:#ccc;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:#ffffff0d;border:1px solid #333;border-radius:6px;padding:6px 10px;font-size:9px;font-weight:600;transition:all .2s;position:relative}.smart-loop-btn:hover,.smart-loop-suggest-btn:hover{color:#fff;background:#ffffff1a;border-color:#0f6}.smart-loop-btn.active{color:#000;background:#0f6;border-color:#0f6;box-shadow:0 0 8px #0f66}.smart-loop-suggest-btn .suggestion-count{color:#000;text-align:center;background:#0f6;border-radius:8px;min-width:12px;margin-left:4px;padding:1px 4px;font-size:7px;font-weight:700;position:absolute;top:-2px;right:-2px}.loop-suggestions-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:200;background:#000000f2;border:1px solid #333;border-radius:12px;width:400px;max-height:calc(100vh - 120px);position:fixed;top:80px;left:20px;overflow:hidden;box-shadow:0 8px 32px #000c}.loop-panel-header{background:#00ff661a;border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.loop-panel-header h3{color:#fff;margin:0;font-size:14px;font-weight:600}.loop-suggestions-content{max-height:calc(100vh - 200px);padding:0;overflow-y:auto}.deck-loop-suggestions{border-bottom:1px solid #222}.deck-header{background:#ffffff05;border-bottom:1px solid #222;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.deck-label{color:#0f6;background:#0f63;border-radius:10px;padding:2px 8px;font-size:12px;font-weight:700}.track-name{color:#ccc;text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0 12px;font-size:11px;overflow:hidden}.auto-loop-toggle{color:#999;font-size:10px}.auto-loop-toggle input[type=checkbox]{accent-color:#0f6;margin-right:4px}.loop-suggestions-list{padding:0}.loop-suggestion-item{border-bottom:1px solid #1a1a1a;justify-content:space-between;align-items:center;padding:12px 20px;transition:background .2s;display:flex}.loop-suggestion-item:hover{background:#ffffff05}.suggestion-info{flex:1}.loop-type{color:#0f6;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:10px;font-weight:700}.loop-details{gap:12px;margin-bottom:4px;display:flex}.loop-time{color:#fff;font-family:monospace;font-size:11px}.loop-length{color:#999;background:#ffffff0d;border-radius:8px;padding:1px 6px;font-size:10px}.loop-reason{color:#666;font-size:9px;line-height:1.3}.suggestion-actions{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.confidence-score{border-radius:8px;padding:2px 6px;font-size:9px;font-weight:700}.confidence-score.excellent{color:#000;background:#0f6}.confidence-score.good{color:#000;background:#fa0}.confidence-score.fair{color:#fff;background:#666}.activate-loop-btn{color:#000;cursor:pointer;background:#0f6;border:none;border-radius:4px;padding:4px 8px;font-size:9px;font-weight:600;transition:all .2s}.activate-loop-btn:hover{background:#0c5;transform:translateY(-1px);box-shadow:0 2px 6px #0f66}.no-loop-suggestions{text-align:center;color:#666;padding:40px 20px}.no-loop-suggestions .no-suggestions-icon{margin-bottom:16px;font-size:48px}.no-loop-suggestions p{margin:8px 0;line-height:1.4}.no-loop-suggestions .sub-text{color:#555;font-size:12px}.track-analysis-info{justify-content:space-between;align-items:center;gap:8px;margin-top:8px;display:flex}.analysis-tags{flex-wrap:wrap;gap:4px;display:flex}.key-tag,.energy-tag,.mood-tag,.advanced-indicator{background:#ffffff1a;border-radius:8px;padding:2px 6px;font-size:9px;font-weight:600}.key-tag{color:#0f6;background:#0f63}.energy-tag{color:#fa0;background:#fa03}.mood-tag{color:#6c47ff;background:#6c47ff33}.advanced-indicator{color:#f66;background:#f663}.analyze-track-btn{color:#ccc;cursor:pointer;white-space:nowrap;background:#ffffff0d;border:1px solid #333;border-radius:4px;padding:4px 8px;font-size:9px;font-weight:600;transition:all .2s}.analyze-track-btn:hover{color:#fff;background:#ffffff1a;border-color:#f66}.analyze-track-btn.analyzing{color:#000;background:#f66;border-color:#f66;animation:1s infinite pulse}.analysis-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:200;background:#000000f2;border:1px solid #333;border-radius:12px;width:500px;max-height:calc(100vh - 120px);position:fixed;bottom:20px;right:20px;overflow:hidden;box-shadow:0 8px 32px #000c}.analysis-header{background:#ff66661a;border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.analysis-header h3{color:#fff;margin:0;font-size:14px;font-weight:600}.analysis-content{max-height:calc(100vh - 200px);padding:0;overflow-y:auto}.deck-analysis{border-bottom:1px solid #222}.deck-analysis-header{background:#ffffff05;border-bottom:1px solid #222;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.deck-analysis-header .deck-label{color:#f66;background:#f663;border-radius:10px;padding:2px 8px;font-size:12px;font-weight:700}.deck-analysis-header .track-name{color:#ccc;text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0 12px;font-size:11px;overflow:hidden}.analyze-btn{color:#000;cursor:pointer;background:#f66;border:none;border-radius:4px;padding:4px 8px;font-size:10px;transition:all .2s}.analyze-btn:hover{background:#f44;transform:scale(1.05)}.analyze-btn.analyzing{animation:1s linear infinite spin}.analysis-data{padding:16px 20px}.analysis-section{margin-bottom:20px}.analysis-section h4{color:#f66;text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;font-size:12px}.analysis-section h5{color:#ccc;margin:0 0 8px;font-size:11px}.analysis-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.analysis-item{background:#ffffff05;border-radius:4px;justify-content:space-between;align-items:center;padding:6px 8px;display:flex}.analysis-item .label{color:#999;font-size:10px}.analysis-item .value{color:#fff;font-size:10px;font-weight:600}.analysis-item .key-value{color:#0f6;font-family:monospace}.analysis-item .mood-value{color:#6c47ff;text-transform:capitalize}.analysis-item .confidence{color:#666;margin-left:4px;font-size:8px}.structure-analysis{margin-top:16px}.sections{flex-direction:column;gap:4px;display:flex}.section-item{background:#ffffff05;border-radius:4px;justify-content:space-between;align-items:center;padding:4px 8px;display:flex}.section-type{color:#0f6;width:60px;font-size:9px;font-weight:700}.section-time{color:#ccc;text-align:center;flex:1;font-family:monospace;font-size:9px}.section-energy{color:#fa0;font-size:9px}.no-analysis,.no-tracks{text-align:center;color:#666;padding:20px}.no-tracks-icon{margin-bottom:16px;font-size:48px}.no-analysis p,.no-tracks p{margin:8px 0;line-height:1.4}.no-tracks .sub-text{color:#555;font-size:12px}.analysis-btn{color:#ccc;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:#ffffff0d;border:1px solid #333;border-radius:6px;padding:6px 12px;font-size:10px;font-weight:600;transition:all .2s}.analysis-btn:hover{color:#fff;background:#ffffff1a;border-color:#f66}.analysis-btn.active{color:#fff;background:#f66;border-color:#f66;box-shadow:0 0 8px #f666}.zoom-controls{align-items:center;gap:10px;display:flex}.zoom-btn{color:#fff;cursor:pointer;background:#6c47ff;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;font-weight:700;transition:all .2s;display:flex}.zoom-btn:hover:not(:disabled){background:#8a6bff;transform:scale(1.1)}.zoom-btn:disabled{opacity:.5;cursor:not-allowed}.zoom-display{color:#6c47ff;text-align:center;min-width:50px;font-size:12px;font-weight:600}.zoom-toggle,.beatgrid-toggle{color:#6c47ff;cursor:pointer;background:0 0;border:1px solid #6c47ff;border-radius:12px;padding:6px 12px;font-size:11px;font-weight:700;transition:all .2s}.zoom-toggle.active,.beatgrid-toggle.active{color:#fff;background:#6c47ff}.zoom-toggle:hover,.beatgrid-toggle:hover{transform:scale(1.05)}.recording-controls{align-items:center;gap:8px;display:flex}.record-btn{color:#f33;cursor:pointer;background:0 0;border:1px solid #f33;border-radius:12px;min-width:60px;padding:6px 12px;font-size:11px;font-weight:700;transition:all .2s}.record-btn:hover{background:#ff33331a;transform:scale(1.05)}.record-btn.recording{color:#fff;background:#f33;animation:2s infinite recordPulse;box-shadow:0 0 10px #ff333380}.recording-actions{gap:4px;display:flex}.download-btn,.clear-recording-btn{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;transition:all .2s;display:flex}.download-btn{color:#fff;background:linear-gradient(135deg,#0a4,#0c5)}.download-btn:hover{background:linear-gradient(135deg,#0c5,#0e6);transform:scale(1.1)}.clear-recording-btn{color:#fff;background:linear-gradient(135deg,#a40,#c50)}.clear-recording-btn:hover{background:linear-gradient(135deg,#c50,#e60);transform:scale(1.1)}@keyframes recordPulse{0%{opacity:1;box-shadow:0 0 10px #ff333380}50%{opacity:.8;box-shadow:0 0 20px #f33c}to{opacity:1;box-shadow:0 0 10px #ff333380}}.deck-section{border-bottom:2px solid #333;gap:15px;height:calc(50vh - 70px);min-height:180px;max-height:280px;padding:15px;display:flex}.deck-section.deck-a{border-bottom:2px solid #f06}.deck-section.deck-b{border-top:2px solid #0f6;border-bottom:none}.deck-section.selected{background:#6c47ff0d;box-shadow:inset 0 0 20px #6c47ff1a}.deck-section.selected .deck-letter{box-shadow:0 0 10px #6c47ff80}.deck-controls{background:#ffffff0d;border:1px solid #333;border-radius:6px;flex-direction:row;gap:8px;width:220px;height:100%;padding:8px;display:flex}.deck-main-content{flex-direction:column;flex:1;gap:6px;display:flex}.deck-header{align-items:center;gap:10px;margin-bottom:8px;display:flex}.deck-info{flex:1;align-items:center;gap:8px;display:flex}.deck-letter{color:#fff;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:16px;font-weight:700;display:flex}.bpm-slider-sidebar{background:#0000004d;border-left:1px solid #333;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:40px;height:100%;padding:8px 4px;display:flex}.deck-bpm-slider{-webkit-appearance:slider-vertical;cursor:pointer;writing-mode:vertical-lr;direction:rtl;background:#333;border-radius:3px;outline:none;width:6px;height:100%;min-height:100px;max-height:200px}.deck-bpm-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:16px;height:16px;transition:all .2s}.sync-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6c47ff,#8a6bff);border:none;border-radius:4px;width:50px;height:24px;font-size:10px;font-weight:700;transition:all .2s}.load-track-btn{color:#ccc;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#333,#555);border:1px dashed #666;border-radius:4px;padding:4px 8px;font-size:10px;font-weight:600;transition:all .2s}.load-track-btn:hover{color:#fff;background:linear-gradient(135deg,#555,#777);border-color:#6c47ff}.sync-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 0 8px #6c47ff80}.sync-btn:disabled{opacity:.3;cursor:not-allowed}.deck-a .deck-letter{background:#f06}.deck-b .deck-letter{background:#0f6}.track-info-header{background:#00000080;border-bottom:1px solid #333;border-radius:6px 6px 0 0;padding:8px 12px;display:block}.track-info-header .track-title{margin-bottom:2px}.track-info-header .track-artist{margin-bottom:4px}.track-info-header .track-bpm{text-align:right;float:right;margin-top:-20px}.track-title{color:#fff;font-size:14px;font-weight:600;line-height:1.2}.track-artist{color:#999;margin-top:2px;font-size:12px;line-height:1.2}.track-bpm{align-items:center;gap:4px;font-family:monospace;font-size:12px;display:flex}.detected-bpm{color:#6c47ff;font-weight:600}.default-bpm{color:#999;font-weight:600}.bpm-confidence{color:#666;font-size:10px}.no-track{color:#666;cursor:pointer;text-align:center;border:1px dashed #444;border-radius:4px;flex:1;padding:8px 12px;font-size:11px;font-style:italic;transition:all .3s}.no-track:hover{color:#fff;background:#6c47ff1a;border-color:#6c47ff}.transport-controls{justify-content:center;gap:8px;margin-top:auto;display:flex}.loop-controls{justify-content:center;gap:4px;margin-top:8px;display:flex}.loop-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4a00ff,#6c47ff);border:none;border-radius:4px;min-width:70px;padding:6px 12px;font-size:10px;font-weight:700;transition:all .3s}.loop-btn.active{background:linear-gradient(135deg,#f60,#f80);animation:1s infinite pulse}.loop-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 0 10px #6c47ff80}.loop-btn:disabled{opacity:.3;cursor:not-allowed}.loop-length-btn{color:#6c47ff;cursor:pointer;background:#6c47ff33;border:1px solid #6c47ff;border-radius:4px;width:28px;height:28px;font-size:11px;font-weight:700;transition:all .2s}.loop-length-btn:hover:not(:disabled){background:#6c47ff66;transform:scale(1.1)}.loop-length-btn:disabled{opacity:.3;cursor:not-allowed}.play-btn,.cue-btn{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:10px;font-weight:700;transition:all .3s;display:flex}.play-btn{color:#000;background:linear-gradient(135deg,#0f6,#00cc52)}.play-btn.playing{background:linear-gradient(135deg,#f60,#f80)}.play-btn:hover{transform:scale(1.1);box-shadow:0 0 20px #00ff6680}.cue-btn{color:#000;background:linear-gradient(135deg,#fa0,#f80)}.cue-btn:hover{transform:scale(1.1);box-shadow:0 0 20px #ffaa0080}.play-btn:disabled,.cue-btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none;transform:none}.hot-cues{grid-template-columns:1fr 1fr;gap:4px;display:grid}.hot-cue{color:#666;cursor:pointer;background:#ffffff1a;border:1px solid #666;border-radius:4px;width:32px;height:32px;font-size:12px;font-weight:700;transition:all .3s;position:relative;overflow:hidden}.hot-cue.set{color:#fff;background:linear-gradient(135deg,#6c47ff4d,#6c47ff80);border-color:#6c47ff;box-shadow:0 0 10px #6c47ff4d,inset 0 0 5px #6c47ff33}.hot-cue.set:before{content:"";background:#0f6;border-radius:50%;width:4px;height:4px;animation:2s infinite cuePulse;position:absolute;top:2px;right:2px;box-shadow:0 0 3px #0f6c}@keyframes cuePulse{0%,to{opacity:1}50%{opacity:.4}}.hot-cue.playing{background:linear-gradient(135deg,#00ff664d,#00ff6680);border-color:#0f6;animation:.5s infinite cuePlayPulse}@keyframes cuePlayPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.hot-cue:hover:not(:disabled){color:#fff;border-color:#fff;transform:scale(1.1)}.hot-cue:disabled{opacity:.3;cursor:not-allowed}.bpm-display{color:#6c47ff;white-space:nowrap;font-family:monospace;font-size:13px;font-weight:700}.tap-tempo-controls{align-items:center;gap:4px;margin-top:4px;display:flex}.tap-tempo-btn{color:#ccc;cursor:pointer;background:linear-gradient(135deg,#333,#555);border:1px solid #666;border-radius:4px;min-width:35px;padding:4px 8px;font-size:10px;font-weight:700;transition:all .2s}.tap-tempo-btn:hover{color:#fff;background:linear-gradient(135deg,#555,#777);border-color:#6c47ff;transform:scale(1.05)}.tap-tempo-btn.active{color:#fff;background:linear-gradient(135deg,#6c47ff,#8a6bff);border-color:#6c47ff;animation:.3s ease-out tapPulse;box-shadow:0 0 8px #6c47ff80}.tap-reset-btn{color:#f66;cursor:pointer;background:#f663;border:1px solid #f66;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-size:12px;transition:all .2s;display:flex}.tap-reset-btn:hover{background:#f666;transform:scale(1.1)}@keyframes tapPulse{0%{transform:scale(1)}50%{transform:scale(1.1);box-shadow:0 0 15px #6c47ffcc}to{transform:scale(1);box-shadow:0 0 8px #6c47ff80}}.pitch-value{color:#999;white-space:nowrap;font-family:monospace;font-size:10px;font-weight:600}.pitch-bend-controls{flex-direction:column;align-items:center;gap:2px;display:flex;position:relative}.pitch-bend-btn,.pitch-bend-button{cursor:pointer;color:#fff;-webkit-user-select:none;user-select:none;border:none;border-radius:3px;width:24px;height:18px;font-size:14px;font-weight:700;transition:all .1s}.pitch-bend-btn.bend-up,.pitch-bend-button.pitch-bend-up{background:linear-gradient(135deg,#f60,#f80);margin-bottom:2px}.pitch-bend-btn.bend-down,.pitch-bend-button.pitch-bend-down{background:linear-gradient(135deg,#06f,#08f);margin-top:2px}.pitch-bend-btn:hover,.pitch-bend-button:hover{transform:scale(1.1);box-shadow:0 0 8px #ffffff4d}.pitch-bend-btn:active,.pitch-bend-button:active,.pitch-bend-button.active{transform:scale(.95);box-shadow:0 0 15px #ffffff80}.pitch-values{flex-direction:column;align-items:center;gap:2px;margin-top:4px;display:flex}.pitch-bend-value{color:#f80;background:#f803;border:1px solid #ff88004d;border-radius:2px;padding:1px 4px;font-family:monospace;font-size:8px;font-weight:700;animation:.5s infinite bendPulse}@keyframes bendPulse{0%,to{opacity:1}50%{opacity:.7}}.time-display{background:#00000080;border-radius:4px;justify-content:space-between;padding:4px 6px;font-family:monospace;font-size:11px;font-weight:600;display:flex}.position{color:#0f6}.remaining{color:#f60}.waveform-container{background:#0000004d;border:2px solid #333;border-radius:12px;flex-direction:column;flex:1;padding:0;display:flex;overflow:hidden}.waveform-canvas{cursor:pointer;background:#111;border:1px solid #333;border-top:none;border-radius:0 0 8px 8px;flex:1;width:100%;height:100%}.bottom-mixer{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-top:3px solid #6c47ff;justify-content:center;height:140px;padding:15px;display:flex}.mixer-section{align-items:center;gap:40px;width:100%;max-width:1200px;display:flex}.deck-mixer{flex-direction:column;align-items:center;gap:15px;display:flex}.deck-mixer label{color:#999;text-transform:uppercase;font-size:14px;font-weight:700}.deck-a-mixer label{color:#f06}.deck-b-mixer label{color:#0f6}.eq-controls{gap:20px;display:flex}.eq-knob{flex-direction:column;align-items:center;gap:12px;display:flex;position:relative}.eq-knob label{color:#999;z-index:10;text-transform:uppercase;margin-bottom:8px;font-size:12px;font-weight:600}.eq-slider{cursor:pointer;background:#333;border-radius:2px;outline:none;width:60px;height:4px;margin:10px 0;transform:rotate(-90deg)}.eq-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border-radius:50%;width:16px;height:16px}.eq-knob span{color:#6c47ff;text-align:center;min-width:40px;margin-top:4px;font-family:monospace;font-size:10px;font-weight:600}.kill-switch{color:#999;cursor:pointer;text-transform:uppercase;background:#333;border:1px solid #555;border-radius:4px;min-width:40px;margin-bottom:4px;padding:4px 8px;font-size:9px;font-weight:700;transition:all .2s}.kill-switch:hover{background:#555;border-color:#777}.kill-switch.killed{color:#fff;background:#f33;border-color:#f33;animation:1.5s infinite killPulse;box-shadow:0 0 10px #ff33334d}.kill-switch.killed:hover{background:#c00;border-color:#c00}@keyframes killPulse{0%,to{box-shadow:0 0 10px #ff33334d}50%{box-shadow:0 0 20px #f339}}.eq-slider:disabled{opacity:.3;cursor:not-allowed}.eq-slider:disabled::-webkit-slider-thumb{cursor:not-allowed;background:#666}.reset-eq{color:#ccc;cursor:pointer;text-transform:uppercase;background:#444;border:1px solid #666;border-radius:4px;margin-top:10px;padding:6px 10px;font-size:10px;font-weight:600;transition:all .2s}.reset-eq:hover{color:#fff;background:#666;border-color:#888}.eq-controls{align-items:flex-end;gap:15px;display:flex}.eq-knob{background:#ffffff05;border:1px solid #ffffff1a;border-radius:6px;flex-direction:column;align-items:center;gap:6px;padding:8px;display:flex;position:relative}.eq-knob label{color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px;font-weight:700}.eq-slider{cursor:pointer;background:linear-gradient(90deg,#333 0%,#555 50%,#333 100%);border-radius:3px;outline:none;width:80px;height:6px;margin:15px 0;position:relative;transform:rotate(-90deg)}.eq-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(135deg,#6c47ff,#8b5fff);border:2px solid #fff;border-radius:50%;width:20px;height:20px;transition:all .2s;box-shadow:0 2px 8px #6c47ff66}.eq-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #6c47ff99}.eq-slider::-webkit-slider-thumb:active{transform:scale(.95)}.beat-grid-panel{z-index:1000;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000f2;border:2px solid #333;border-radius:12px;flex-direction:column;width:450px;max-height:80vh;display:flex;position:fixed;top:20px;right:20px;overflow:hidden}.beat-grid-header{background:linear-gradient(135deg,#4a90e2,#357abd);border-bottom:1px solid #555;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.beat-grid-header h3{margin:0;font-size:16px;font-weight:700}.deck-selector{border:1px solid #fff3;border-radius:6px;gap:0;display:flex;overflow:hidden}.deck-tab{color:#ffffffb3;cursor:pointer;background:#ffffff1a;border:none;padding:6px 12px;font-size:12px;font-weight:600;transition:all .2s}.deck-tab.active{color:#fff;background:#fff3}.deck-tab:hover{background:#ffffff26}.beat-grid-content{flex:1;padding:20px;overflow-y:auto}.beat-grid-controls{flex-direction:column;gap:20px;display:flex}.grid-status{background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;gap:15px;padding:15px;display:flex}.status-item{flex-direction:column;flex:1;align-items:center;gap:8px;display:flex}.status-item label{color:#ccc;text-transform:uppercase;font-size:11px;font-weight:600}.bpm-input,.time-input{color:#fff;text-align:center;background:#ffffff1a;border:1px solid #fff3;border-radius:4px;width:80px;padding:6px 8px;font-size:14px;font-weight:600}.bpm-input:focus,.time-input:focus{border-color:#4a90e2;outline:none;box-shadow:0 0 0 2px #4a90e233}.bpm-input:disabled,.time-input:disabled{opacity:.5;cursor:not-allowed}.accuracy-bar{background:#ffffff1a;border:1px solid #fff3;border-radius:10px;width:80px;height:20px;position:relative;overflow:hidden}.accuracy-fill{border-radius:inherit;background:linear-gradient(90deg,#f33,#fa0,#0f6);height:100%;transition:width .3s}.accuracy-bar.good .accuracy-fill{background:#0f6}.accuracy-bar.ok .accuracy-fill{background:#fa0}.accuracy-bar.poor .accuracy-fill{background:#f33}.accuracy-bar span{color:#000;text-shadow:0 0 2px #fffc;font-size:11px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.grid-actions{justify-content:center;gap:10px;display:flex}.lock-btn,.reset-btn,.snap-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;padding:8px 16px;font-size:12px;font-weight:600;transition:all .2s}.lock-btn:hover,.reset-btn:hover,.snap-btn:hover{background:#fff3;transform:translateY(-1px)}.lock-btn:disabled,.reset-btn:disabled,.snap-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.lock-btn.locked{background:#ff6b6b;border-color:#ff5252}.lock-btn.locked:hover{background:#ff5252}.markers-section{background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;overflow:hidden}.markers-header{background:#ffffff0d;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:12px 15px;display:flex}.markers-header h4{color:#fff;margin:0;font-size:14px}.add-marker-btn{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:4px;padding:6px 12px;font-size:11px;font-weight:600;transition:all .2s}.add-marker-btn:hover{background:#357abd;transform:translateY(-1px)}.add-marker-btn:disabled{cursor:not-allowed;background:#666;transform:none}.markers-list{max-height:200px;overflow-y:auto}.marker-item{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:8px 15px;transition:background .2s;display:flex}.marker-item:hover{background:#ffffff0d}.marker-item.manual{background:#4a90e21a}.marker-item.manual:hover{background:#4a90e233}.marker-info{align-items:center;gap:8px;display:flex}.marker-time{color:#4a90e2;min-width:60px;font-family:monospace;font-weight:600}.marker-beat{color:#ccc;min-width:50px;font-size:12px}.downbeat-indicator,.manual-indicator{font-size:12px}.marker-controls{align-items:center;gap:8px;display:flex}.marker-time-input{color:#fff;text-align:center;background:#ffffff1a;border:1px solid #fff3;border-radius:4px;width:60px;padding:4px 6px;font-family:monospace;font-size:11px}.marker-time-input:focus{border-color:#4a90e2;outline:none}.marker-time-input:disabled{opacity:.5;cursor:not-allowed}.remove-marker-btn{color:#fff;cursor:pointer;background:#ff6b6b;border:none;border-radius:3px;padding:4px 8px;font-size:10px;transition:all .2s}.remove-marker-btn:hover{background:#ff5252}.remove-marker-btn:disabled{cursor:not-allowed;background:#666}.markers-overflow{color:#999;text-align:center;padding:8px 15px;font-size:12px;font-style:italic}.grid-help{background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;padding:15px}.grid-help h4{color:#4a90e2;margin:0 0 10px;font-size:14px}.grid-help ul{margin:0;padding-left:20px}.grid-help li{color:#ccc;margin-bottom:4px;font-size:12px;line-height:1.4}.beat-grid-btn{color:#fff;cursor:pointer;text-transform:uppercase;background:#ffffff1a;border:1px solid #fff3;border-radius:4px;padding:6px 12px;font-size:11px;font-weight:600;transition:all .2s}.beat-grid-btn:hover{background:#fff3;transform:translateY(-1px)}.beat-grid-btn.active{background:#4a90e2;border-color:#4a90e2;box-shadow:0 0 10px #4a90e24d}.effects-controls{border-top:1px solid #333;gap:20px;margin-top:15px;padding-top:15px;display:flex}.effect-knob{flex-direction:column;align-items:center;gap:12px;display:flex;position:relative}.effect-knob label{color:#f80;z-index:10;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:11px;font-weight:700}.effect-slider{cursor:pointer;background:#333;border-radius:2px;outline:none;width:60px;height:4px;margin:10px 0;transition:all .2s;transform:rotate(-90deg)}.effect-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(135deg,#f60,#f80);border-radius:50%;width:14px;height:14px;transition:all .2s;box-shadow:0 0 6px #f806}.effect-slider::-webkit-slider-thumb:hover{background:linear-gradient(135deg,#f80,#fa0);transform:scale(1.1);box-shadow:0 0 10px #f809}.effect-knob span{color:#f80;text-align:center;background:#ff88001a;border:1px solid #f803;border-radius:4px;min-width:30px;padding:2px 6px;font-family:monospace;font-size:11px;font-weight:600}.effect-led{background:#333;border:1px solid #444;border-radius:50%;width:8px;height:8px;margin-top:4px;transition:all .2s}.effect-led.active{background:#f80;border-color:#f80;animation:1s infinite ledPulse;box-shadow:0 0 10px #f80c,inset 0 0 3px #ffffff4d}.effect-led.active.high{background:#f33;border-color:#f33;animation:.5s infinite ledPulse;box-shadow:0 0 12px #ff3333e6,inset 0 0 3px #fff6}@keyframes ledPulse{0%,to{opacity:1}50%{opacity:.7}}.deck-volume-control{flex-direction:column;align-items:center;gap:4px;margin-top:8px;display:flex}.deck-volume-control label{color:#999;text-transform:uppercase;letter-spacing:.5px;font-size:10px}.horizontal-volume-slider{cursor:pointer;background:#333;border-radius:2px;outline:none;width:80px;height:4px}.horizontal-volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#0f6;border-radius:50%;width:16px;height:16px;transition:all .2s}.horizontal-volume-slider::-webkit-slider-thumb:hover{background:#3f8;transform:scale(1.1)}.volume-value{color:#0f6;text-align:center;min-width:25px;font-family:monospace;font-size:10px;font-weight:600}.crossfader-master-section{flex-direction:row;align-items:center;gap:30px;padding:0 40px;display:flex;position:relative}.beat-sync-indicator{background:#000c;border:1px solid #333;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:6px 12px;display:flex;position:absolute;top:-40px;left:50%;transform:translate(-50%)}.sync-status{align-items:center;gap:8px;display:flex}.sync-led{background:#333;border:1px solid #444;border-radius:50%;width:10px;height:10px;transition:all .3s}.sync-status.synced .sync-led{background:#0f6;border-color:#0f6;animation:2s infinite syncPulse;box-shadow:0 0 10px #0f6c,inset 0 0 3px #ffffff4d}.sync-status.not-synced .sync-led{background:#f60;border-color:#f60;box-shadow:0 0 8px #f609}.sync-label{text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:700}.sync-status.synced .sync-label{color:#0f6}.sync-status.not-synced .sync-label{color:#f60}.sync-bpm-display{color:#999;align-items:center;gap:8px;font-family:monospace;font-size:11px;display:flex}.deck-a-bpm{color:#f06;font-weight:600}.deck-b-bpm{color:#0f6;font-weight:600}.sync-separator{color:#666}@keyframes syncPulse{0%,to{opacity:1}50%{opacity:.6}}.crossfader-section{flex-direction:column;align-items:center;gap:15px;display:flex}.master-volume-section{flex-direction:column;align-items:center;gap:12px;display:flex;position:relative}.limiter-indicator{background:#0009;border:1px solid #333;border-radius:4px;align-items:center;gap:6px;padding:4px 8px;display:flex}.limiter-led{background:#333;border:1px solid #444;border-radius:50%;width:8px;height:8px;transition:all .1s}.limiter-led.active{background:#f33;border-color:#f33;box-shadow:0 0 8px #f33c,inset 0 0 2px #ffffff4d}.limiter-label{color:#999;text-transform:uppercase;letter-spacing:.5px;font-size:9px;font-weight:700}.volume-vu-container{align-items:center;gap:8px;display:flex}.vu-meter{background:#222;border:1px solid #444;border-radius:3px;width:60px;height:6px;overflow:hidden}.vu-bar{border-radius:2px;height:100%;transition:width 50ms ease-out}.master-vu-meter{background:#222;border:1px solid #444;border-radius:6px;width:12px;height:80px;margin-left:8px;position:relative;overflow:hidden}.master-vu-bar{border-radius:0 0 5px 5px;width:100%;transition:height 50ms ease-out;position:absolute;bottom:0}.vu-meter:before{content:"";pointer-events:none;background:repeating-linear-gradient(90deg,#0000 0 8px,#333 8px 9px);width:100%;height:100%;position:absolute;top:0;left:0}.master-vu-meter:before{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 8px,#333 8px 9px);width:100%;height:100%;position:absolute;top:0;left:0}.crossfader-section label,.master-volume-section label{color:#6c47ff;text-transform:uppercase;letter-spacing:1px;font-size:16px;font-weight:700}.crossfader-container{align-items:center;gap:20px;display:flex}.crossfader-container span{color:#999;font-size:18px;font-weight:700}.crossfader{cursor:pointer;background:linear-gradient(90deg,#f06,#333,#0f6);border-radius:4px;outline:none;width:300px;height:8px}.crossfader::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(135deg,#6c47ff,#8a6bff);border-radius:50%;width:24px;height:24px;box-shadow:0 0 10px #6c47ff80}.crossfader-value,.master-volume-value{color:#6c47ff;font-family:monospace;font-size:14px;font-weight:600}.crossfader-curve-controls{background:#6c47ff0d;border:1px solid #6c47ff33;border-radius:8px;flex-direction:column;gap:10px;margin-top:12px;padding:12px;display:flex}.curve-type-selector{flex-direction:column;gap:4px;display:flex}.curve-type-selector label{color:#ccc;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.curve-type-select{color:#fff;cursor:pointer;background:#2a2a3a;border:1px solid #444;border-radius:4px;outline:none;padding:6px 8px;font-size:12px;transition:border-color .2s}.curve-type-select:focus{border-color:#6c47ff}.curve-type-select:hover{border-color:#555}.curve-sharpness,.curve-center-blend{flex-direction:column;gap:4px;display:flex}.curve-sharpness label,.curve-center-blend label{color:#ccc;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.curve-slider{appearance:none;cursor:pointer;background:linear-gradient(90deg,#333,#6c47ff);border-radius:2px;outline:none;height:4px;transition:background .2s}.curve-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#6c47ff;border:2px solid #1a1a2e;border-radius:50%;width:16px;height:16px;transition:background .2s,transform .1s}.curve-slider::-webkit-slider-thumb:hover{background:#8562ff;transform:scale(1.1)}.curve-slider::-moz-range-thumb{cursor:pointer;background:#6c47ff;border:2px solid #1a1a2e;border-radius:50%;width:16px;height:16px;transition:background .2s,transform .1s}.curve-slider::-moz-range-thumb:hover{background:#8562ff;transform:scale(1.1)}.master-volume-container{flex-direction:column;align-items:center;gap:8px;display:flex}.master-volume-slider-vertical{-webkit-appearance:slider-vertical;cursor:pointer;writing-mode:vertical-lr;direction:rtl;background:linear-gradient(#0f6,#333);border-radius:4px;outline:none;width:8px;height:120px}.master-volume-slider-vertical::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(135deg,#0f6,#3f8);border-radius:50%;width:20px;height:20px;transition:all .2s;box-shadow:0 0 8px #00ff6680}.master-volume-slider-vertical::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 12px #00ff66b3}@media (width<=1400px){.deck-controls{width:250px}.mixer-section{gap:30px}.crossfader{width:250px}}@media (width<=1200px){.simple-dj-interface{height:auto;min-height:100vh}.deck-section{flex-direction:column;gap:15px}.deck-controls{flex-flow:wrap;justify-content:space-around;width:100%}.waveform-canvas{height:100px}.bottom-mixer{height:auto;padding:15px}.mixer-section{flex-direction:column;gap:20px}.eq-controls{gap:15px}.crossfader{width:200px}}@media (width<=768px){.deck-section,.deck-controls{padding:15px}.transport-controls{gap:10px}.play-btn,.cue-btn{width:50px;height:50px}.hot-cues{gap:8px}.hot-cue{width:40px;height:40px;font-size:14px}.waveform-canvas{height:80px}}.recording-panel-overlay{z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.recording-panel{background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);border:1px solid #333;border-radius:12px;width:90%;max-width:600px;max-height:80vh;padding:30px;overflow-y:auto;box-shadow:0 10px 40px #00000080}.recording-panel .panel-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:15px;display:flex}.recording-panel .panel-header h3{color:#f33;margin:0;font-size:24px}.recording-panel .close-btn{color:#999;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;padding:5px;font-size:24px;transition:all .3s;display:flex}.recording-panel .close-btn:hover:not(:disabled){color:#fff;background:#ffffff1a}.recording-panel .close-btn:disabled{opacity:.3;cursor:not-allowed}.start-recording-section h4{color:#fff;margin-bottom:15px;font-size:16px}.format-buttons{gap:15px;display:grid}.format-btn{cursor:pointer;text-align:left;background:#ffffff0d;border:1px solid #444;border-radius:8px;grid-template-rows:auto auto;grid-template-columns:50px 1fr;align-items:center;gap:10px;padding:20px;transition:all .3s;display:grid}.format-btn:hover{background:#ff33331a;border-color:#f33;transform:translateY(-2px)}.format-icon{grid-row:span 2;font-size:32px}.format-name{color:#fff;font-size:18px;font-weight:600}.format-desc{color:#999;grid-column:2;font-size:12px}.recording-active{text-align:center;padding:20px}.recording-indicator{color:#f33;justify-content:center;align-items:center;gap:10px;margin-bottom:15px;font-size:20px;font-weight:600;display:flex}.recording-dot{background:#f33;border-radius:50%;width:12px;height:12px;animation:1.5s ease-in-out infinite recording-pulse}@keyframes recording-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.recording-time{color:#fff;margin:20px 0;font-family:Courier New,monospace;font-size:48px;font-weight:300}.recording-format{color:#999;margin-bottom:20px;font-size:14px}.stop-recording-btn{color:#fff;cursor:pointer;background:#f33;border:none;border-radius:8px;padding:15px 30px;font-size:16px;font-weight:600;transition:all .3s}.stop-recording-btn:hover{background:#f55;transform:scale(1.05)}.recording-tracklist{border-top:1px solid #333;margin-top:30px;padding-top:20px}.recording-tracklist h4{color:#fff;margin-bottom:15px;font-size:16px}.tracklist-entries{gap:10px;max-height:200px;padding-right:10px;display:grid;overflow-y:auto}.tracklist-entry{background:#ffffff0d;border-radius:6px;grid-template-columns:60px 1fr auto;align-items:center;gap:10px;padding:10px;font-size:14px;display:grid}.track-time{color:#f33;font-family:Courier New,monospace;font-size:12px}.track-info{color:#fff}.track-key{color:#6c47ff;font-weight:600}.track-bpm{color:#999;font-size:12px}.no-tracks-yet{text-align:center;color:#666;padding:30px;font-style:italic}.export-section{border-top:1px solid #333;margin-top:30px;padding-top:20px}.export-section h4{color:#fff;margin-bottom:15px;font-size:16px}.export-btn,.export-tracklist-btn{color:#6c47ff;cursor:pointer;background:#6c47ff33;border:1px solid #6c47ff;border-radius:8px;width:100%;margin-bottom:10px;padding:15px;font-size:14px;font-weight:600;transition:all .3s;display:block}.export-btn:hover,.export-tracklist-btn:hover{background:#6c47ff4d;transform:translateY(-2px)}.tracklist-btn{color:#fff;cursor:pointer;background:#f333;border:1px solid #f33;border-radius:6px;margin-left:10px;padding:8px 12px;font-size:12px;transition:all .3s}.tracklist-btn:hover{background:#ff33334d}.sampler-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6c47ff 0%,#4c27ff 100%);border:1px solid #6c47ff;border-radius:8px;margin-left:10px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .3s}.sampler-btn:hover{background:linear-gradient(135deg,#7c57ff 0%,#5c37ff 100%);transform:scale(1.05)}.sampler-btn.active{background:linear-gradient(135deg,#8c67ff 0%,#6c47ff 100%);box-shadow:0 0 20px #6c47ff80}.sampler-panel{z-index:500;background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);border:1px solid #333;border-radius:12px;flex-direction:column;width:90%;max-width:800px;max-height:500px;padding:20px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #000c}.sampler-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;display:flex}.sampler-header h3{color:#fff;margin:0;font-size:20px}.sampler-header .close-btn{color:#999;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;padding:5px;font-size:20px;transition:all .3s;display:flex}.sampler-header .close-btn:hover{color:#fff;background:#ffffff1a}.sampler-grid{flex:1;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(8,1fr);gap:10px;min-height:200px;margin-bottom:20px;display:grid}.sampler-pad{aspect-ratio:1;cursor:pointer;background:#ffffff0d;border:2px solid #333;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;overflow:hidden}.sampler-pad:hover{border-color:#6c47ff;transform:scale(1.05)}.sampler-pad.loaded{background:linear-gradient(135deg,#6c47ff1a 0%,#6c47ff33 100%)}.sampler-pad.playing{border-width:3px;animation:.5s ease-in-out infinite pad-pulse}@keyframes pad-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.pad-name{color:#fff;text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding:0 5px;font-size:11px;font-weight:600;overflow:hidden}.pad-hotkey{color:#6c47ff;background:#00000080;border-radius:3px;padding:2px 5px;font-size:10px;font-weight:700;position:absolute;top:5px;left:5px}.pad-loop-indicator{color:#0f6;font-size:12px;position:absolute;top:5px;right:5px}.pad-playing-indicator{color:#f33;font-size:12px;animation:1s ease-in-out infinite blink;position:absolute;bottom:5px;right:5px}.pad-empty{flex-direction:column;justify-content:center;align-items:center;gap:5px;display:flex}.pad-number{color:#666;font-size:16px;font-weight:700}.pad-add{color:#666;font-size:20px;line-height:1}.pad-loading{font-size:20px;animation:1s linear infinite spin}.pad-editor{background:#00000080;border:1px solid #333;border-radius:8px;margin-top:15px;padding:15px}.pad-editor-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;display:flex}.pad-editor-header h4{color:#fff;margin:0;font-size:14px}.pad-editor-header button{color:#999;cursor:pointer;background:0 0;border:none;padding:5px;font-size:16px;transition:color .3s}.pad-editor-header button:hover{color:#fff}.pad-controls{flex-direction:column;gap:15px;display:flex}.control-group{align-items:center;gap:10px;display:flex}.control-group label{color:#999;min-width:60px;font-size:12px}.control-group input[type=range]{flex:1}.control-group span{color:#fff;text-align:right;min-width:40px;font-size:12px}.control-group input[type=checkbox]{margin-right:5px}.clear-pad-btn{color:#fff;cursor:pointer;background:#f33;border:none;border-radius:6px;padding:8px 16px;font-size:12px;transition:all .3s}.clear-pad-btn:hover{background:#f55}.pad-upload{text-align:center;padding:20px}.upload-btn{color:#fff;cursor:pointer;background:#6c47ff;border-radius:6px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .3s;display:inline-block}.upload-btn:hover{background:#7c57ff;transform:scale(1.05)}.pad-upload p{color:#666;margin-top:10px;font-size:12px}.sampler-footer{border-top:1px solid #333;justify-content:space-between;align-items:center;margin-top:15px;padding-top:15px;display:flex}.stop-all-btn{color:#fff;cursor:pointer;background:#333;border:1px solid #666;border-radius:6px;padding:8px 16px;font-size:14px;transition:all .3s}.stop-all-btn:hover{background:#444;border-color:#888}.sampler-info{color:#666;font-size:12px;font-style:italic}.midi-config-panel{z-index:1000;background:#1a1a1a;border:2px solid #333;border-radius:12px;flex-direction:column;width:600px;max-width:90vw;max-height:80vh;display:flex;position:fixed;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 10px 30px #000c}.midi-config-header{background:linear-gradient(135deg,#6c47ff,#9c27b0);border-bottom:1px solid #333;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.midi-config-header h3{color:#fff;margin:0;font-size:18px;font-weight:600}.midi-config-content{flex:1;padding:20px;overflow-y:auto}.midi-status{background:#222;border:1px solid #333;border-radius:8px;margin-bottom:20px;padding:15px}.status-indicator{align-items:center;gap:10px;margin-bottom:10px;display:flex}.status-light{border-radius:50%;flex-shrink:0;width:12px;height:12px}.status-light.connected{background:#4caf50;box-shadow:0 0 10px #4caf5099}.status-light.disconnected{background:#666}.midi-info{color:#999;font-size:13px;line-height:1.4}.midi-devices{margin-bottom:20px}.midi-devices h4{color:#fff;margin:0 0 10px;font-size:16px}.device-list{flex-direction:column;gap:8px;display:flex}.device-item{background:#2a2a2a;border:1px solid #333;border-radius:6px;padding:12px}.device-info{align-items:center;gap:12px;display:flex}.device-name{color:#fff;font-weight:600}.device-manufacturer{color:#999;font-size:13px}.device-configured{color:#4caf50;background:#4caf501a;border-radius:4px;margin-left:auto;padding:2px 6px;font-size:12px}.no-devices{color:#666;text-align:center;padding:20px;font-style:italic}.midi-learning{margin-bottom:20px}.midi-learning h4{color:#fff;margin:0 0 10px;font-size:16px}.learning-options p{color:#ccc;margin-bottom:15px;line-height:1.4}.learning-buttons{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;display:grid}.learn-btn{color:#fff;cursor:pointer;background:#6c47ff;border:1px solid #8a63ff;border-radius:6px;padding:8px 12px;font-size:13px;transition:all .2s}.learn-btn:hover{background:#7d5aff;border-color:#9b73ff}.learning-active{text-align:center;background:#2a1a4a;border:1px solid #6c47ff;border-radius:8px;padding:15px}.learning-status{justify-content:center;align-items:center;gap:10px;margin-bottom:10px;display:flex}.learning-indicator{color:#f44;font-weight:600;animation:1s infinite pulse}.learning-target{color:#6c47ff;font-weight:600}.cancel-learn-btn{color:#fff;cursor:pointer;background:#666;border:1px solid #888;border-radius:6px;padding:8px 16px;transition:all .2s}.cancel-learn-btn:hover{background:#777;border-color:#999}.midi-mappings h4{color:#fff;margin:0 0 10px;font-size:16px}.mappings-controls{gap:10px;margin-bottom:15px;display:flex}.save-mappings-btn,.clear-mappings-btn{cursor:pointer;border:1px solid;border-radius:6px;padding:8px 12px;font-size:13px;transition:all .2s}.save-mappings-btn{color:#fff;background:#4caf50;border-color:#66bb6a}.save-mappings-btn:hover{background:#5cbf60;border-color:#81c784}.clear-mappings-btn{color:#fff;background:#f44336;border-color:#ef5350}.clear-mappings-btn:hover{background:#f55549;border-color:#ff7875}.mappings-info{background:#222;border:1px solid #333;border-radius:6px;padding:12px}.mappings-info h5{color:#fff;margin:0 0 8px;font-size:14px}.mappings-info ul{color:#ccc;margin:0;padding-left:20px}.mappings-info li{margin-bottom:4px;font-size:13px;line-height:1.3}.midi-btn{color:#ccc;cursor:pointer;white-space:nowrap;background:#333;border:1px solid #555;border-radius:6px;padding:8px 12px;font-size:12px;transition:all .3s}.midi-btn:hover{color:#fff;background:#444;border-color:#666}.midi-btn.active{color:#fff;background:#6c47ff;border-color:#8a63ff;box-shadow:0 0 10px #6c47ff4d}.midi-btn.connected{color:#4caf50;border-color:#4caf50}.midi-btn.connected.active{color:#fff;background:#6c47ff;border-color:#8a63ff}.performance-controls{background:#0000004d;border:1px solid #333;border-radius:8px;margin:15px 0;padding:15px}.section-label{color:#0f8;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:11px;font-weight:600;display:block}.loop-roll-section{margin-bottom:15px}.loop-roll-buttons{flex-wrap:wrap;gap:5px;display:flex}.loop-roll-btn{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:center;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:1px solid #444;border-radius:4px;min-width:35px;padding:6px 10px;font-size:11px;font-weight:600;transition:all .2s}.loop-roll-btn:hover:not(:disabled){background:linear-gradient(145deg,#3a3a3a,#2a2a2a);border-color:#666;transform:translateY(-1px)}.loop-roll-btn.active{color:#000;background:linear-gradient(145deg,#0f8,#00cc6a);border-color:#0f8;box-shadow:0 0 10px #00ff884d}.loop-roll-btn:disabled{opacity:.5;cursor:not-allowed}.beat-jump-section{margin-bottom:15px}.beat-jump-controls{justify-content:center;gap:8px;display:flex}.beat-jump-btn{color:#fff;cursor:pointer;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:1px solid #444;border-radius:4px;min-width:60px;padding:8px 12px;font-size:11px;font-weight:600;transition:all .2s}.beat-jump-btn:hover:not(:disabled){background:linear-gradient(145deg,#3a3a3a,#2a2a2a);border-color:#666;transform:translateY(-1px)}.beat-jump-btn.backward{border-left:3px solid #f60}.beat-jump-btn.forward{border-right:3px solid #f60}.beat-jump-btn:disabled{opacity:.5;cursor:not-allowed}.mode-controls{justify-content:space-between;gap:8px;display:flex}.slip-mode-btn,.key-lock-btn{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:1px solid #444;border-radius:4px;flex:1;padding:8px 16px;font-size:11px;font-weight:600;transition:all .2s}.slip-mode-btn:hover:not(:disabled),.key-lock-btn:hover:not(:disabled){background:linear-gradient(145deg,#3a3a3a,#2a2a2a);border-color:#666;transform:translateY(-1px)}.slip-mode-btn.active{background:linear-gradient(145deg,#6c47ff,#5a3dd9);border-color:#6c47ff;box-shadow:0 0 10px #6c47ff4d}.key-lock-btn.active{background:linear-gradient(145deg,#f60,#e55a00);border-color:#f60;box-shadow:0 0 10px #ff66004d}.slip-mode-btn:disabled,.key-lock-btn:disabled{opacity:.5;cursor:not-allowed}@media (width<=1200px){.performance-controls{padding:10px}.loop-roll-buttons{gap:3px}.loop-roll-btn{min-width:30px;padding:4px 6px;font-size:10px}.beat-jump-controls{gap:5px}.beat-jump-btn{min-width:50px;padding:6px 8px;font-size:10px}.mode-controls{gap:5px}.slip-mode-btn,.key-lock-btn{padding:6px 10px;font-size:10px}}.effects-btn{color:#ccc;cursor:pointer;white-space:nowrap;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:1px solid #444;border-radius:6px;margin:0 5px;padding:8px 16px;font-size:12px;transition:all .3s}.effects-btn:hover{color:#fff;background:#444;border-color:#666}.effects-btn.active{color:#fff;background:#f60;border-color:#f83;box-shadow:0 0 10px #ff66004d}.effects-panel{z-index:1000;background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);border-left:2px solid #f60;width:400px;height:100vh;position:fixed;top:0;right:0;overflow-y:auto;box-shadow:-2px 0 20px #00000080}.effects-panel-header{background:#ff66001a;border-bottom:1px solid #444;justify-content:space-between;align-items:center;padding:20px;display:flex}.effects-panel-header h3{color:#f60;margin:0;font-size:18px;font-weight:600}.effects-panel-content{padding:20px}.deck-selector{gap:10px;margin-bottom:25px;display:flex}.deck-btn{color:#fff;cursor:pointer;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:1px solid #444;border-radius:6px;flex:1;padding:12px;font-weight:600;transition:all .2s}.deck-btn:hover{background:linear-gradient(145deg,#3a3a3a,#2a2a2a);border-color:#666}.deck-btn.active{background:linear-gradient(145deg,#f60,#e55a00);border-color:#f60;box-shadow:0 0 10px #ff66004d}.effect-presets{margin-bottom:25px}.effect-presets h4{color:#f60;text-transform:uppercase;letter-spacing:1px;margin-bottom:15px;font-size:14px;font-weight:600}.preset-buttons{flex-wrap:wrap;gap:8px;display:flex}.preset-btn{color:#fff;cursor:pointer;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:1px solid #444;border-radius:4px;padding:8px 12px;font-size:11px;font-weight:500;transition:all .2s}.preset-btn:hover{background:linear-gradient(145deg,#3a3a3a,#2a2a2a);border-color:#666;transform:translateY(-1px)}.reset-btn{color:#fff;cursor:pointer;background:linear-gradient(145deg,#f44,#c33);border:1px solid #f44;border-radius:4px;padding:8px 12px;font-size:11px;font-weight:500;transition:all .2s}.reset-btn:hover{background:linear-gradient(145deg,#f66,#f44);transform:translateY(-1px)}.individual-effects h4{color:#f60;text-transform:uppercase;letter-spacing:1px;margin-bottom:15px;font-size:14px;font-weight:600}.effect-control{background:#0000004d;border:1px solid #333;border-radius:8px;margin-bottom:15px;overflow:hidden}.effect-header{background:#ffffff0d;border-bottom:1px solid #444;justify-content:space-between;align-items:center;padding:15px;display:flex}.effect-name{color:#fff;font-size:14px;font-weight:600}.effect-toggle{color:#ccc;cursor:pointer;text-transform:uppercase;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border:1px solid #444;border-radius:4px;padding:6px 12px;font-size:11px;font-weight:600;transition:all .2s}.effect-toggle:hover{background:linear-gradient(145deg,#3a3a3a,#2a2a2a);border-color:#666}.effect-toggle.active{color:#000;background:linear-gradient(145deg,#0f8,#00cc6a);border-color:#0f8;box-shadow:0 0 8px #00ff884d}.effect-parameters{padding:15px}.parameter-control{align-items:center;gap:10px;margin-bottom:12px;display:flex}.parameter-control:last-child{margin-bottom:0}.parameter-control label{color:#ccc;text-transform:uppercase;letter-spacing:.5px;min-width:80px;font-size:12px;font-weight:500}.effect-slider{cursor:pointer;appearance:none;background:#333;border-radius:3px;outline:none;flex:1;height:6px}.effect-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(145deg,#f60,#e55a00);border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 6px #0000004d}.effect-slider::-moz-range-thumb{cursor:pointer;background:linear-gradient(145deg,#f60,#e55a00);border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 6px #0000004d}.parameter-value{color:#f60;text-align:right;min-width:50px;font-size:11px;font-weight:600}@media (width<=1400px){.effects-panel{width:350px}}@media (width<=1200px){.effects-panel{width:300px}.effects-panel-content{padding:15px}.preset-buttons{gap:5px}.preset-btn,.reset-btn{padding:6px 8px;font-size:10px}.parameter-control{gap:8px}.parameter-control label{min-width:60px;font-size:11px}}.sync-panel{z-index:1000;background:#1a1a1a;border:2px solid #333;border-radius:12px;width:600px;max-width:90vw;max-height:80vh;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 10px 30px #00000080}.sync-panel-header{background:#222;border-bottom:1px solid #333;border-radius:10px 10px 0 0;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.sync-panel-header h3{color:#fff;margin:0;font-size:18px}.sync-panel-content{padding:20px}.sync-status{background:#262626;border:1px solid #333;border-radius:8px;margin-bottom:20px;padding:15px}.sync-info{grid-template-columns:1fr 1fr;gap:10px;display:grid}.sync-state{color:#ddd;font-size:14px}.sync-state strong{color:#4caf50}.deck-sync-controls{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;display:grid}.deck-sync-section{background:#262626;border:1px solid #333;border-radius:8px;padding:15px}.deck-sync-section h4{color:#fff;text-align:center;margin:0 0 15px;font-size:16px}.sync-controls{flex-direction:column;gap:10px;margin-bottom:15px;display:flex}.sync-mode-btn{color:#fff;cursor:pointer;background:#333;border:1px solid #444;border-radius:6px;padding:12px 16px;font-weight:500;transition:all .2s}.sync-mode-btn:hover:not(:disabled){background:#444;border-color:#555}.sync-mode-btn.active{color:#fff;background:#4caf50;border-color:#4caf50}.sync-mode-btn:disabled{opacity:.5;cursor:not-allowed}.sync-mode-select{color:#fff;cursor:pointer;background:#333;border:1px solid #444;border-radius:6px;padding:8px 12px}.sync-mode-select:disabled{opacity:.5;cursor:not-allowed}.nudge-controls{gap:10px;display:flex}.nudge-btn{color:#fff;cursor:pointer;background:#333;border:1px solid #444;border-radius:6px;flex:1;padding:8px 12px;font-size:12px;transition:all .2s}.nudge-btn:hover:not(:disabled){background:#444;border-color:#555}.nudge-btn:active:not(:disabled){background:#555}.nudge-btn:disabled{opacity:.5;cursor:not-allowed}.auto-beatmatch-section{text-align:center;background:#262626;border:1px solid #333;border-radius:8px;margin-bottom:20px;padding:15px}.auto-beatmatch-section h4{color:#fff;margin:0 0 15px;font-size:16px}.auto-beatmatch-btn{color:#fff;cursor:pointer;background:#ff9800;border:2px solid #ff9800;border-radius:8px;margin-bottom:10px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s}.auto-beatmatch-btn:hover:not(:disabled){background:#f57c00;border-color:#f57c00;transform:translateY(-1px)}.auto-beatmatch-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.auto-beatmatch-help{color:#999;margin:0;font-size:12px;line-height:1.4}.compatibility-section{background:#262626;border:1px solid #333;border-radius:8px;padding:15px}.compatibility-section h4{color:#fff;margin:0 0 15px;font-size:16px}.compatibility-info{flex-direction:column;gap:10px;display:flex}.compatibility-item{border-radius:6px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:14px;display:flex}.compatibility-item.compatible{color:#4caf50;background:#4caf501a;border:1px solid #4caf504d}.compatibility-item.incompatible{color:#f44336;background:#f443361a;border:1px solid #f443364d}.compatibility-recommendation{color:#ddd;background:#333;border:1px solid #444;border-radius:6px;padding:10px 12px;font-size:13px;line-height:1.4}.sync-panel-btn{color:#ddd;cursor:pointer;background:#333;border:1px solid #555;border-radius:6px;padding:8px 12px;font-size:12px;font-weight:500;transition:all .2s}.sync-panel-btn:hover{background:#444;border-color:#666}.sync-panel-btn.active{color:#fff;background:#4caf50;border-color:#4caf50}.sync-btn{position:relative}.sync-btn.active{color:#fff;background:#4caf50;border-color:#4caf50;animation:2s infinite pulse}.playback-panel-overlay,.stream-panel-overlay,.ai-panel-overlay{z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.playback-panel,.stream-panel,.ai-panel{background:var(--surface-color,#1a1a1a);border:1px solid var(--border-color,#333);border-radius:12px;flex-direction:column;width:90%;max-width:900px;max-height:85vh;display:flex;overflow:hidden;box-shadow:0 10px 30px #00000080}.playback-panel .panel-header,.stream-panel .panel-header,.ai-panel .panel-header{background:var(--surface-alt,#222);border-bottom:1px solid var(--border-color,#333);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.playback-panel .panel-header h3,.stream-panel .panel-header h3,.ai-panel .panel-header h3{color:var(--text-primary,#fff);margin:0;font-size:18px;font-weight:600}.playback-panel .close-btn,.stream-panel .close-btn,.ai-panel .close-btn{color:var(--text-secondary,#999);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:18px;transition:all .2s}.playback-panel .close-btn:hover{background:var(--button-hover,#444);color:var(--text-primary,#fff)}.playback-panel .panel-content,.stream-panel .panel-content,.ai-panel .panel-content{flex:1;padding:20px;overflow-y:auto}@media (width<=768px){.playback-panel{width:95%;max-height:90vh}.playback-panel .panel-content{padding:16px}}.social-page{color:#fff;background:#0a0a0a;min-height:100vh;padding:40px 20px}.social-page.loading,.social-page.auth-required{justify-content:center;align-items:center;display:flex}.loader{color:#ffffffb3;font-size:18px;animation:1.5s ease-in-out infinite pulse}.auth-message{text-align:center}.auth-message h1{margin-bottom:16px;font-size:32px;font-weight:700}.auth-message p{color:#ffffffb3;font-size:18px}.social-header{text-align:center;max-width:600px;margin:0 auto 40px}.social-header h1{background:linear-gradient(135deg,#f06,#f60);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:48px;font-weight:700}.social-header p{color:#ffffffb3;margin-bottom:32px;font-size:18px}.filter-tabs{background:#ffffff0d;border-radius:12px;justify-content:center;gap:4px;max-width:320px;margin:0 auto;padding:4px;display:flex}.filter-tab{color:#ffffffb3;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;align-items:center;gap:6px;padding:10px 16px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.filter-tab:hover{color:#fff;background:#ffffff1a}.filter-tab.active{color:#f06;background:#f063}.social-content{max-width:600px;margin:0 auto}.loading-state{flex-direction:column;gap:24px;display:flex}.mix-card-skeleton{background:#ffffff0d;border-radius:16px;gap:16px;padding:24px;display:flex}.skeleton-title,.skeleton-text{background:#ffffff1a;border-radius:4px;height:16px;margin-bottom:8px;animation:1.5s ease-in-out infinite skeleton-pulse}.skeleton-title{width:60%}.skeleton-text{width:40%}.skeleton-cover{background:#ffffff1a;border-radius:12px;width:100%;height:200px;margin-top:16px;animation:1.5s ease-in-out infinite skeleton-pulse}.mixes-feed{flex-direction:column;gap:32px;display:flex}.mix-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;padding:24px;transition:all .2s}.mix-card:hover{background:#ffffff14;transform:translateY(-2px)}.mix-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.artist-info{align-items:center;gap:12px;display:flex}.artist-avatar{object-fit:cover;border-radius:50%;width:48px;height:48px}.artist-info h3{color:#fff;margin:0;font-size:16px;font-weight:600}.artist-info p{color:#ffffffb3;margin:0;font-size:13px}.more-btn{color:#ffffffb3;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px;transition:all .2s}.more-btn:hover{color:#fff;background:#ffffff1a}.mix-content h2{color:#fff;margin:0 0 12px;font-size:20px;font-weight:700}.mix-details{flex-wrap:wrap;gap:12px;margin-bottom:16px;display:flex}.mix-details span{color:#fffc;background:#ffffff1a;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:500}.genre{color:#f06!important;background:#f063!important}.mix-cover-container{group:mix-cover;border-radius:12px;margin-bottom:16px;position:relative;overflow:hidden}.mix-cover{object-fit:cover;width:100%;height:300px;transition:transform .3s;display:block}.mix-cover-container:hover .mix-cover{transform:scale(1.05)}.play-overlay{opacity:0;background:#0009;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.mix-cover-container:hover .play-overlay{opacity:1}.play-btn{cursor:pointer;color:#000;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;transition:all .2s;display:flex}.mix-tags{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.tag{color:#ffffffd9;background:#ffffff1a;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:500}.mix-actions{border-top:1px solid #ffffff1a;align-items:center;gap:20px;padding-top:20px;display:flex}.action-btn{color:#ffffffb3;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-size:14px;transition:all .2s;display:flex}.action-btn:hover{color:#fff;background:#ffffff1a}.action-btn.liked{color:#f06}.action-btn.liked:hover{color:#ff1a75}.shares-count{color:#ffffffb3;align-items:center;gap:4px;margin-left:auto;font-size:13px;display:flex}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media (width<=768px){.social-page{padding:20px 16px}.social-header h1{font-size:32px}.social-header p{font-size:16px}.filter-tabs{max-width:100%}.filter-tab{padding:8px 12px;font-size:13px}.mix-card{padding:16px}.mix-cover{height:200px}.mix-actions{flex-wrap:wrap;gap:16px}.shares-count{margin-left:0}}.section-overlay-container{width:100%;position:relative}.section-overlay-canvas{cursor:pointer;width:100%;display:block}.section-labels{pointer-events:none;height:100%;display:flex;position:absolute;top:0;left:0;right:0}.section-label{color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 2px #00000080;border-radius:3px;max-width:calc(100% - 8px);padding:2px 6px;font-size:10px;font-weight:600;position:absolute;top:50%;overflow:hidden;transform:translateY(-50%)}.section-label.small{padding:1px 4px;font-size:8px}.transition-decision-panel{color:#fff;background:#ffffff08;border:1px solid #ffffff1a;border-radius:12px;padding:20px}.panel-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:flex-start;margin-bottom:16px;padding-bottom:16px;display:flex}.transition-type-display{align-items:center;gap:12px;display:flex}.transition-icon{background:#ffffff0d;border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;font-size:32px;display:flex}.transition-type-info h3{margin:0 0 4px;font-size:18px;font-weight:600}.transition-duration{color:#888;font-size:12px}.confidence-display{text-align:right}.confidence-label{color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px}.confidence-value{font-size:28px;font-weight:700}.confidence-value.high{color:#0f8}.confidence-value.medium{color:orange}.confidence-value.low{color:#f66}.confidence-bar{background:#ffffff1a;border-radius:2px;width:60px;height:4px;margin-top:4px;overflow:hidden}.confidence-fill{border-radius:2px;height:100%;transition:width .3s}.track-flow{background:#0003;border-radius:8px;justify-content:center;align-items:center;gap:16px;margin-bottom:16px;padding:12px;display:flex}.track-info{text-align:center;flex:1}.track-label{color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:10px}.track-title{color:#fff;font-size:14px;font-weight:600}.track-artist{color:#888;font-size:12px}.flow-arrow{color:#666;font-size:20px}.reasoning-section{margin-bottom:16px}.reasoning-label{color:#888;text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:6px;margin-bottom:8px;font-size:11px;display:flex}.reasoning-text{color:#ccc;background:#0003;border-left:3px solid #a855f7;border-radius:8px;padding:12px;font-size:14px;line-height:1.5}.metadata-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.metadata-item{background:#ffffff08;border:1px solid #ffffff14;border-radius:8px;padding:12px}.metadata-label{color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:10px}.metadata-value{color:#fff;align-items:center;gap:6px;font-size:14px;font-weight:600;display:flex}.key-badge{border-radius:20px;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.stems-badge{color:#9b59b6;background:#9b59b633;border:1px solid #9b59b666;border-radius:20px;align-items:center;gap:4px;padding:4px 10px;font-size:11px;display:inline-flex}.stems-badge.not-required{color:#888;background:#64646433;border-color:#64646466}.eq-strategy-badge{color:#0f8;text-transform:lowercase;background:#00ff881a;border:1px solid #00ff884d;border-radius:20px;align-items:center;gap:4px;padding:4px 10px;font-size:11px;display:inline-flex}.transition-timeline-container{background:#0000004d;border-radius:8px;padding:12px;position:relative}.timeline-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.timeline-title{color:#888;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.timeline-duration{color:#ccc;align-items:center;gap:12px;font-size:12px;display:flex}.time-current{color:#0f8;font-weight:600}.time-separator{color:#666}.time-total{color:#888}.timeline-canvas-wrapper{border-radius:4px;position:relative;overflow:hidden}.transition-timeline-canvas{cursor:pointer;width:100%;display:block}.timeline-legend{border-top:1px solid #ffffff1a;flex-wrap:wrap;gap:16px;margin-top:8px;padding-top:8px;display:flex}.legend-item{color:#888;align-items:center;gap:6px;font-size:11px;display:flex}.legend-icon{font-size:12px}.timeline-tooltip{pointer-events:none;z-index:100;white-space:nowrap;background:#000000e6;border:1px solid #fff3;border-radius:6px;margin-top:-8px;padding:8px 12px;position:absolute;transform:translate(-50%,-100%)}.tooltip-title{color:#fff;margin-bottom:4px;font-size:12px;font-weight:600}.tooltip-detail{color:#aaa;font-size:11px}.automation-curves-container{background:#0000004d;border-radius:8px;padding:16px;position:relative}.curves-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.curves-title{color:#888;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.curves-legend{gap:16px;display:flex}.legend-item{align-items:center;gap:6px;font-size:11px;display:flex}.legend-line{border-radius:2px;width:20px;height:3px}.legend-line.outgoing{background:linear-gradient(90deg,#ff6b6b,#ff6b6b88)}.legend-line.incoming{background:linear-gradient(90deg,#4ecdc488,#4ecdc4)}.legend-label{color:#aaa}.curves-canvas-wrapper{position:relative}.automation-curves-canvas{border-radius:4px;width:100%;display:block}.progress-indicator{pointer-events:none;z-index:10;background:#fff;width:2px;position:absolute;top:0;bottom:0}.progress-indicator:before{content:"";background:#fff;border-radius:50%;width:10px;height:10px;position:absolute;top:-6px;left:-4px}.eq-bands-section{border-top:1px solid #ffffff1a;margin-top:12px;padding-top:12px}.eq-bands-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.eq-bands-title{color:#888;text-transform:uppercase;letter-spacing:.5px;font-size:11px}.eq-band-legend{gap:12px;display:flex}.band-item{align-items:center;gap:4px;font-size:10px;display:flex}.band-dot{border-radius:50%;width:8px;height:8px}.band-dot.low{background:#e74c3c}.band-dot.mid{background:#f39c12}.band-dot.high{background:#3498db}.band-label{color:#888;text-transform:uppercase}.effects-section{border-top:1px solid #ffffff1a;margin-top:12px;padding-top:12px}.effects-title{color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:11px}.effects-canvas{border-radius:4px;width:100%;height:40px;display:block}.execution-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;background:#0006;border:1px solid #ffffff1a;border-radius:12px;padding:16px}.overlay-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.overlay-title{align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.live-indicator{align-items:center;gap:6px;font-size:12px;display:flex}.live-dot{background:#f06;border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.live-text{color:#f06;text-transform:uppercase;letter-spacing:1px;font-weight:600}.transition-progress-section{margin-bottom:16px}.progress-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.transition-type-badge{border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:600;display:flex}.progress-percentage{font-family:monospace;font-size:20px;font-weight:700}.progress-bar-container{background:#ffffff1a;border-radius:4px;height:8px;overflow:hidden}.progress-bar-fill{border-radius:4px;height:100%;transition:width .1s linear}.crossfader-section{background:#0000004d;border-radius:8px;margin-bottom:16px;padding:12px}.crossfader-label{color:#888;text-transform:uppercase;letter-spacing:.5px;text-align:center;margin-bottom:8px;font-size:10px}.crossfader-track{background:linear-gradient(90deg,#ff6b6b,#666,#4ecdc4);border-radius:4px;height:24px;position:relative;overflow:hidden}.crossfader-handle{background:#fff;border-radius:3px;width:16px;height:20px;transition:left .1s linear;position:absolute;top:2px;transform:translate(-50%);box-shadow:0 2px 4px #0000004d}.crossfader-labels{color:#888;justify-content:space-between;margin-top:4px;font-size:10px;display:flex}.effects-section{margin-bottom:16px}.effects-label{color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:10px}.effects-grid{flex-wrap:wrap;gap:8px;display:flex}.effect-badge{color:#9b59b6;background:#9b59b633;border:1px solid #9b59b666;border-radius:6px;align-items:center;gap:4px;padding:6px 10px;font-size:11px;display:flex}.effect-badge.active{background:#9b59b666;border-color:#9b59b6;animation:1s ease-in-out infinite effect-pulse}@keyframes effect-pulse{0%,to{opacity:1}50%{opacity:.7}}.no-effects{color:#666;font-size:12px;font-style:italic}.next-transition-section{background:#ffffff08;border:1px solid #ffffff14;border-radius:8px;padding:12px}.next-label{color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:10px}.next-info{justify-content:space-between;align-items:center;display:flex}.next-track{color:#fff;font-size:13px;font-weight:600}.next-countdown{color:orange;align-items:center;gap:4px;font-family:monospace;font-size:16px;font-weight:700;display:flex}.countdown-icon{font-size:14px}.user-profile{color:#fff;background:#0a0a0a;min-height:100vh}.user-profile.loading{justify-content:center;align-items:center;display:flex}.profile-skeleton{gap:20px;padding:40px;display:flex}.skeleton-avatar{background:#ffffff1a;border-radius:50%;width:120px;height:120px;animation:1.5s ease-in-out infinite skeleton-pulse}.skeleton-content{flex:1}.skeleton-line{background:#ffffff1a;border-radius:4px;height:16px;margin-bottom:12px;animation:1.5s ease-in-out infinite skeleton-pulse}.skeleton-line.wide{width:300px}.skeleton-line.narrow{width:150px}.profile-header{background:linear-gradient(135deg,#ff00661a 0%,#6600ff1a 100%);position:relative}.cover-image{background:linear-gradient(135deg,#f06 0%,#60f 100%);height:200px;position:relative;overflow:hidden}.cover-gradient{background:linear-gradient(#0000,#0a0a0ae6);height:100px;position:absolute;bottom:0;left:0;right:0}.profile-info{padding:0 40px 40px;position:relative;top:-60px}.profile-main{gap:24px;margin-bottom:24px;display:flex}.avatar-section{position:relative}.profile-avatar{object-fit:cover;border:4px solid #0a0a0a;border-radius:50%;width:120px;height:120px}.verified-badge{color:#fff;background:#1da1f2;border:2px solid #0a0a0a;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:700;display:flex;position:absolute;bottom:8px;right:8px}.info-section{flex:1;margin-top:60px}.info-section h1{color:#fff;margin:0 0 4px;font-size:32px;font-weight:700}.username{color:#fff9;margin:0 0 16px;font-size:16px}.profile-meta{flex-wrap:wrap;gap:20px;margin-bottom:16px;display:flex}.meta-item{color:#ffffffb3;align-items:center;gap:6px;font-size:14px;text-decoration:none;display:flex}.meta-item.link{cursor:pointer;transition:color .2s}.meta-item.link:hover{color:#f06}.bio{color:#fffc;margin:0 0 16px;font-size:16px;line-height:1.5}.genres{flex-wrap:wrap;gap:8px;display:flex}.genre-tag{color:#f06;background:#f063;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:500}.profile-actions{gap:12px;margin-top:60px;display:flex}.btn-primary,.btn-secondary{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.btn-primary{color:#fff;background:#f06}.btn-primary:hover{background:#ff1a75;transform:translateY(-1px)}.btn-primary.following{color:#fffc;background:#ffffff1a;border:1px solid #fff3}.btn-primary.following:hover{color:#f06;background:#ff00661a;border-color:#f06}.btn-secondary{color:#fffc;background:#ffffff1a;border:1px solid #fff3}.btn-secondary:hover{color:#fff;background:#ffffff26}.profile-stats{border-bottom:1px solid #ffffff1a;justify-content:center;gap:40px;margin-top:-60px;padding:32px 40px;display:flex}.stat-item{text-align:center}.stat-value{color:#fff;margin-bottom:4px;font-size:24px;font-weight:700;display:block}.stat-label{color:#fff9;text-transform:uppercase;letter-spacing:.5px;font-size:13px}.profile-content{padding:40px}.content-tabs{border-bottom:1px solid #ffffff1a;gap:8px;margin-bottom:32px;display:flex}.tab-btn{color:#fff9;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:8px;padding:16px 20px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.tab-btn:hover{color:#fff;background:#ffffff0d}.tab-btn.active{color:#f06;border-bottom-color:#f06}.content-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px;display:grid}.mix-item{cursor:pointer;background:#ffffff0d;border-radius:12px;transition:all .2s;overflow:hidden}.mix-item:hover{background:#ffffff14;transform:translateY(-4px)}.mix-cover{aspect-ratio:1;position:relative;overflow:hidden}.mix-cover img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.mix-item:hover .mix-cover img{transform:scale(1.1)}.mix-overlay{opacity:0;background:#0009;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.mix-item:hover .mix-overlay{opacity:1}.play-btn{cursor:pointer;color:#000;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:16px;transition:all .2s;display:flex}.play-btn:hover{background:#fff;transform:scale(1.1)}.mix-details{padding:16px}.mix-details h4{color:#fff;margin:0 0 4px;font-size:14px;font-weight:600;line-height:1.3}.mix-details p{color:#fff9;margin:0 0 8px;font-size:12px}.mix-stats{gap:12px;display:flex}.mix-stats span{color:#ffffff80;align-items:center;gap:4px;font-size:11px;display:flex}@media (width<=768px){.profile-info{padding:0 20px 20px}.profile-main{text-align:center;flex-direction:column;align-items:center}.info-section{margin-top:16px}.profile-actions{justify-content:center;margin-top:20px}.profile-stats{flex-wrap:wrap;gap:20px;padding:20px}.profile-content{padding:20px}.content-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.profile-meta{justify-content:center}}