:root{--bg-primary: #07080b;--bg-surface: #101319;--bg-surface-elevated: #161b24;--border-color: #242b38;--border-subtle: #191f2b;--text-main: #f1f5f9;--text-muted: #8b99ae;--accent-blue: #38bdf8;--accent-cyan: #06b6d4;--accent-purple: #a855f7;--accent-pink: #ec4899;--accent-deckA: #38bdf8;--accent-deckB: #a855f7;--deck-a-glow: rgba(56, 189, 248, .3);--deck-b-glow: rgba(168, 85, 247, .3);--knob-bg: #1c222d;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body{background-color:var(--bg-primary);color:var(--text-main);font-family:var(--font-family);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}.splash-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,#0e121a,#050608);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .6s cubic-bezier(.16,1,.3,1),visibility .6s ease}.splash-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.splash-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:820px;width:90%;padding:40px}.splash-hero-logo{max-width:680px;width:100%;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.9)) drop-shadow(0 0 25px rgba(56,189,248,.35));margin-bottom:28px;animation:logo-glow 3s ease-in-out infinite alternate}@keyframes logo-glow{0%{transform:scale(.99);filter:drop-shadow(0 10px 30px rgba(0,0,0,.9)) drop-shadow(0 0 20px rgba(56,189,248,.25))}to{transform:scale(1.01);filter:drop-shadow(0 15px 40px rgba(0,0,0,.95)) drop-shadow(0 0 35px rgba(168,85,247,.45))}}.splash-loader-bar{width:320px;height:4px;background:#1e2430;border-radius:4px;overflow:hidden;margin-bottom:16px;box-shadow:0 0 8px #000c}.splash-loader-progress{height:100%;width:0%;background:linear-gradient(90deg,#38bdf8,#a855f7,#ec4899);border-radius:4px;transition:width .3s ease;box-shadow:0 0 10px #38bdf8cc}.splash-status-text{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;margin-bottom:24px}.splash-enter-btn{background:linear-gradient(135deg,#0284c7,#0369a1);border:1px solid #38bdf8;color:#fff;font-size:13px;font-weight:800;letter-spacing:2px;padding:12px 36px;border-radius:30px;cursor:pointer;box-shadow:0 4px 20px #38bdf866;transition:all .2s ease;text-transform:uppercase;display:none}.splash-enter-btn.ready{display:inline-block;animation:pulse-button 2s infinite}.splash-enter-btn:hover{transform:translateY(-1px);box-shadow:0 6px 25px #38bdf899;border-color:#fff}@keyframes pulse-button{0%{box-shadow:0 0 #38bdf8b3}70%{box-shadow:0 0 0 12px #38bdf800}to{box-shadow:0 0 #38bdf800}}header.app-header{background:var(--bg-surface);border-bottom:1px solid var(--border-color);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 20px #00000080;z-index:10}.brand-section{display:flex;align-items:center;gap:16px}.brand-logo-link{display:flex;align-items:center;text-decoration:none}.brand-header-logo{height:48px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.7));transition:transform .2s ease}.brand-header-logo:hover{transform:scale(1.03)}.brand-titles{display:flex;flex-direction:column}.brand-badge-row{display:flex;align-items:center;gap:8px}.brand-badge{font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px;background:#38bdf826;border:1px solid rgba(56,189,248,.4);color:var(--accent-blue);letter-spacing:.5px}.brand-badge-sub{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--text-muted)}.header-sfx-bar{display:flex;align-items:center;gap:8px;background:#090b0f;padding:4px 12px;border-radius:8px;border:1px solid var(--border-subtle)}.sfx-bar-label{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--text-muted);margin-right:4px}.btn-sfx{background:var(--bg-surface-elevated);border:1px solid var(--border-color);color:var(--text-main);padding:4px 10px;font-size:10px;font-weight:800;letter-spacing:.5px;border-radius:4px;cursor:pointer;transition:all .1s ease}.btn-sfx:active{background:var(--accent-blue);color:#000;transform:scale(.95);box-shadow:0 0 10px var(--accent-blue)}.header-actions{display:flex;align-items:center;gap:12px}.btn-header{background:var(--bg-surface-elevated);border:1px solid var(--border-color);color:var(--text-main);padding:7px 16px;font-size:12px;font-weight:700;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease}.btn-header:hover{background:var(--border-color);border-color:var(--accent-blue)}.btn-record.recording{background:#dc2626;border-color:#ef4444;color:#fff;animation:pulse-red 1.5s infinite}@keyframes pulse-red{0%{box-shadow:0 0 #ef4444b3}70%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 #ef444400}}main.dj-console{flex:1;display:grid;grid-template-columns:1fr 340px 1fr;gap:20px;padding:20px 24px;max-width:1720px;margin:0 auto;width:100%}.deck-panel{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 30px #00000080;position:relative}.deck-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);padding-bottom:12px}.deck-title-group{display:flex;align-items:center;gap:12px}.deck-tag{font-size:13px;font-weight:900;letter-spacing:1px;color:#fff;background:#000;padding:4px 10px;border-radius:6px;border:1px solid var(--border-color)}#deck-A .deck-tag{border-color:#38bdf880;color:var(--accent-blue)}#deck-B .deck-tag{border-color:#a855f780;color:var(--accent-purple)}.deck-meta{display:flex;flex-direction:column;max-width:280px}.deck-track-title{font-size:14px;font-weight:700;color:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck-track-artist{font-size:11px;color:var(--text-muted)}.deck-bpm-readout{font-family:var(--font-mono);font-size:18px;font-weight:800;color:var(--accent-blue);background:#000;padding:4px 12px;border-radius:6px;border:1px solid var(--border-subtle)}#deck-B .deck-bpm-readout{color:var(--accent-purple)}.waveform-container{width:100%;height:64px;background:#040507;border:1px solid var(--border-subtle);border-radius:6px;position:relative;overflow:hidden}.waveform-canvas{width:100%;height:100%;display:block}.platter-row{display:flex;align-items:center;justify-content:center;gap:24px}.vinyl-container{position:relative;width:310px;height:310px;display:flex;align-items:center;justify-content:center}.vinyl-disc{width:295px;height:295px;border-radius:50%;background:radial-gradient(circle,#1a1a1a,#08090b 45%,#14171d 65%,#050608);border:2px solid #2a313d;box-shadow:0 10px 35px #000000e6,inset 0 0 20px #ffffff0a;position:relative;cursor:grab;touch-action:none;transition:box-shadow .2s ease}#deck-A .vinyl-disc:active{cursor:grabbing;box-shadow:0 0 30px var(--accent-blue)}#deck-B .vinyl-disc:active{cursor:grabbing;box-shadow:0 0 30px var(--accent-purple)}.vinyl-disc:before{content:"";position:absolute;top:15px;right:15px;bottom:15px;left:15px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0,transparent 2px,rgba(255,255,255,.04) 3px,transparent 4px);pointer-events:none}.vinyl-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:95px;height:95px;border-radius:50%;background:radial-gradient(circle,#1a202c,#0d1017);border:2px solid var(--accent-blue);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 0 14px #000000e6}#deck-B .vinyl-label{border-color:var(--accent-purple)}.vinyl-label-text{font-size:8px;font-weight:800;letter-spacing:1px;color:#fff}.vinyl-label-sub{font-size:7px;color:var(--accent-blue);margin-top:2px}#deck-B .vinyl-label-sub{color:var(--accent-purple)}.vinyl-spindle{width:14px;height:14px;border-radius:50%;background:#cbd5e1;border:2px solid #475569;margin-top:4px}.vinyl-marker{position:absolute;top:10px;left:50%;transform:translate(-50%);width:4px;height:35px;background:#fff;border-radius:2px;box-shadow:0 0 8px #ffffffe6}.pitch-slider-group{display:flex;flex-direction:column;align-items:center;gap:10px;height:295px;background:#090b0f;padding:16px 10px;border-radius:8px;border:1px solid var(--border-subtle)}.pitch-label{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--text-muted)}.pitch-value{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-main)}.pitch-slider-vertical{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;writing-mode:bt-lr;width:24px;flex:1;cursor:pointer;accent-color:var(--accent-blue)}#deck-B .pitch-slider-vertical{accent-color:var(--accent-purple)}.pitch-reset-btn{background:var(--bg-surface-elevated);border:1px solid var(--border-color);color:var(--text-muted);font-size:10px;font-weight:800;padding:4px 6px;border-radius:4px;cursor:pointer}.pitch-reset-btn:hover{color:#fff;border-color:var(--accent-blue)}.performance-pad-section{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#090b0f;padding:12px;border-radius:8px;border:1px solid var(--border-subtle)}.performance-row{display:flex;flex-direction:column;gap:6px}.pad-section-label{font-size:9px;font-weight:800;letter-spacing:1px;color:var(--text-muted)}.pad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.pad-btn,.loop-btn{background:var(--bg-surface-elevated);border:1px solid var(--border-color);color:var(--text-muted);font-size:11px;font-weight:800;padding:10px 0;border-radius:6px;cursor:pointer;transition:all .1s ease}.pad-btn:hover,.loop-btn:hover{background:var(--border-color);color:#fff}.pad-btn.active-cue{background:#0284c7;border-color:#38bdf8;color:#fff;box-shadow:0 0 10px #38bdf880}#deck-B .pad-btn.active-cue{background:#7c3aed;border-color:#a855f7;box-shadow:0 0 10px #a855f780}.loop-btn.active-loop{background:#10b981;border-color:#34d399;color:#fff;box-shadow:0 0 10px #34d39980}.deck-controls-bottom{display:flex;flex-direction:column}.deck-transport-buttons{display:grid;grid-template-columns:1fr 1.2fr 1.5fr 1fr;gap:8px}.btn-transport{background:var(--bg-surface-elevated);border:1px solid var(--border-color);color:var(--text-main);padding:12px;font-size:12px;font-weight:800;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease}.btn-transport:hover{background:var(--border-color)}.btn-transport.btn-play.playing{background:#0284c7;border-color:#38bdf8;color:#fff;box-shadow:0 0 15px #38bdf866}#deck-B .btn-transport.btn-play.playing{background:#7c3aed;border-color:#a855f7;box-shadow:0 0 15px #a855f766}.btn-transport.btn-brake:active{background:#ef4444;border-color:#f87171;color:#fff}.mixer-panel{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 30px #00000080}.mixer-header{text-align:center;border-bottom:1px solid var(--border-subtle);padding-bottom:8px}.mixer-title{font-size:13px;font-weight:900;letter-spacing:2px;color:var(--text-muted)}.mixer-channels-grid{display:grid;grid-template-columns:1fr 36px 1fr;gap:12px;flex:1}.mixer-channel{display:flex;flex-direction:column;align-items:center;gap:12px;background:#090b0f;padding:12px 6px;border-radius:8px;border:1px solid var(--border-subtle)}.channel-tag{font-size:11px;font-weight:800;color:var(--text-muted);letter-spacing:1px}.eq-knob-group{display:flex;flex-direction:column;align-items:center;gap:4px}.eq-knob-label{font-size:9px;font-weight:800;color:var(--text-muted)}.filter-group{border-top:1px dashed var(--border-subtle);padding-top:8px;width:100%}.filter-label{color:#38bdf8;font-size:8px}#channel-B .filter-label{color:#a855f7}.rotary-knob{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,#252b38,#151821);border:2px solid #333d4e;position:relative;cursor:ns-resize;box-shadow:0 4px 8px #0009}.rotary-knob-pointer{position:absolute;top:4px;left:50%;transform:translate(-50%);width:3px;height:12px;background:var(--accent-blue);border-radius:2px}.knob-filter .rotary-knob-pointer{background:#f59e0b}.channel-volume-fader{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}.fader-vertical{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;writing-mode:bt-lr;width:24px;height:100px;cursor:pointer;accent-color:var(--accent-blue)}#channel-B .fader-vertical{accent-color:var(--accent-purple)}.mixer-meters-column{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0}.meter-strip{width:12px;flex:1;background:#000;border:1px solid var(--border-subtle);border-radius:4px;display:flex;flex-direction:column-reverse;padding:2px;gap:2px;overflow:hidden}.meter-led{width:100%;height:3px;border-radius:1px;background:#181c24}.meter-led.active-green{background:#22c55e;box-shadow:0 0 4px #22c55e}.meter-led.active-yellow{background:#eab308;box-shadow:0 0 4px #eab308}.meter-led.active-red{background:#ef4444;box-shadow:0 0 4px #ef4444}.crossfader-container{display:flex;flex-direction:column;gap:8px;background:#090b0f;padding:12px;border-radius:8px;border:1px solid var(--border-subtle)}.crossfader-labels{display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:var(--text-muted)}.crossfader-slider{width:100%;height:20px;cursor:pointer;accent-color:var(--accent-blue)}.crate-panel{background:var(--bg-surface);border-top:2px solid var(--border-color);padding:16px 24px;box-shadow:0 -8px 25px #00000080;display:flex;flex-direction:column;gap:12px;transition:max-height .3s ease}.crate-panel.collapsed{display:none}.crate-header{display:flex;align-items:center;justify-content:space-between}.crate-title-group{display:flex;align-items:center;gap:10px}.crate-title{font-size:13px;font-weight:900;letter-spacing:1.5px;color:#fff}.crate-badge{font-size:10px;font-weight:800;background:#38bdf826;border:1px solid rgba(56,189,248,.3);color:var(--accent-blue);padding:2px 8px;border-radius:4px}.crate-actions{display:flex;align-items:center;gap:10px}.btn-crate-import{background:var(--bg-surface-elevated);border:1px solid var(--border-color);color:#fff;padding:6px 14px;font-size:12px;font-weight:700;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px}.btn-crate-import:hover{border-color:var(--accent-blue)}.btn-crate-close{background:transparent;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px 8px}.btn-crate-close:hover{color:#fff}.crate-table-container{max-height:220px;overflow-y:auto;border:1px solid var(--border-subtle);border-radius:6px;background:#090b0f}.crate-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.crate-table th{background:#11141c;padding:8px 12px;color:var(--text-muted);font-size:10px;font-weight:800;letter-spacing:.5px;border-bottom:1px solid var(--border-color);position:sticky;top:0}.crate-table td{padding:8px 12px;border-bottom:1px solid #141720}.crate-table tr:hover td{background:#151922}.btn-load-deck{background:var(--bg-surface-elevated);border:1px solid var(--border-color);padding:4px 10px;font-size:10px;font-weight:800;border-radius:4px;cursor:pointer;margin-left:6px}.btn-load-deck.load-A{color:var(--accent-blue);border-color:#38bdf866}.btn-load-deck.load-A:hover{background:var(--accent-blue);color:#000}.btn-load-deck.load-B{color:var(--accent-purple);border-color:#a855f766}.btn-load-deck.load-B:hover{background:var(--accent-purple);color:#000}footer.app-footer{background:var(--bg-surface);border-top:1px solid var(--border-color);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted)}.footer-links{display:flex;gap:16px}.footer-link{color:var(--text-muted);text-decoration:none}.footer-link:hover{color:var(--accent-blue)}@media (max-width: 1200px){main.dj-console{grid-template-columns:1fr}}