.dj-console{--dj-bg: #07080d;--dj-panel: #11131c;--dj-panel-2: #171a26;--dj-panel-3: #1e2231;--dj-border: #2a3042;--dj-text: #e8ecf5;--dj-muted: #8792a8;--dj-cyan: #22d3ee;--dj-magenta: #f43f9d;--dj-amber: #fbbf24;--dj-green: #34d399;--dj-red: #f87171;--dj-deck-a: #22d3ee;--dj-deck-b: #f43f9d;position:relative;min-height:calc(100vh - var(--header-height, 64px));margin:calc(-1 * var(--content-padding, 26px));padding:18px 20px 28px;background:radial-gradient(1200px 500px at 20% -10%,rgba(34,211,238,.1),transparent 60%),radial-gradient(1000px 500px at 90% 0%,rgba(244,63,157,.1),transparent 55%),var(--dj-bg);color:var(--dj-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}@media (max-width: 900px){.dj-console{margin:calc(-1 * var(--mobile-content-padding, 16px));padding:14px 12px 24px}}.dj-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 18px;margin-bottom:16px;border-radius:16px;background:linear-gradient(180deg,#1e2231e6,#11131ce6);border:1px solid var(--dj-border);box-shadow:0 12px 40px #00000073}.dj-brand{display:flex;align-items:center;gap:12px}.dj-brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px;color:#05070c;background:linear-gradient(135deg,var(--dj-cyan),var(--dj-magenta));box-shadow:0 0 22px #22d3ee80}.dj-brand-title{font-size:18px;font-weight:800;letter-spacing:.5px;line-height:1}.dj-brand-sub{font-size:11px;color:var(--dj-muted);letter-spacing:2px;text-transform:uppercase}.dj-master-clock{display:flex;align-items:center;gap:18px}.dj-clock-item{text-align:center}.dj-clock-value{font-variant-numeric:tabular-nums;font-size:20px;font-weight:800;color:var(--dj-cyan);text-shadow:0 0 12px rgba(34,211,238,.55)}.dj-clock-value.mag{color:var(--dj-magenta);text-shadow:0 0 12px rgba(244,63,157,.55)}.dj-clock-label{font-size:10px;color:var(--dj-muted);letter-spacing:1.5px;text-transform:uppercase}.dj-transport{display:flex;align-items:center;gap:10px}.dj-rec-dot{width:10px;height:10px;border-radius:50%;background:#4b5563}.dj-rec-dot.on{background:var(--dj-red);box-shadow:0 0 12px var(--dj-red);animation:djpulse 1s infinite}@keyframes djpulse{0%,to{opacity:1}50%{opacity:.35}}.dj-decks-row{display:grid;grid-template-columns:1fr 240px 1fr;gap:16px;align-items:stretch}@media (max-width: 1100px){.dj-decks-row{grid-template-columns:1fr}}.dj-panel{background:linear-gradient(180deg,var(--dj-panel-2),var(--dj-panel));border:1px solid var(--dj-border);border-radius:16px;padding:16px;box-shadow:0 14px 44px #0006}.dj-deck{display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}.dj-deck.a{border-top:3px solid var(--dj-deck-a)}.dj-deck.b{border-top:3px solid var(--dj-deck-b)}.dj-deck-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.dj-deck-badge{font-weight:900;font-size:15px;letter-spacing:1px;padding:4px 12px;border-radius:8px;color:#05070c}.dj-deck.a .dj-deck-badge{background:var(--dj-deck-a);box-shadow:0 0 16px #22d3ee80}.dj-deck.b .dj-deck-badge{background:var(--dj-deck-b);box-shadow:0 0 16px #f43f9d80}.dj-track-title{font-weight:700;font-size:15px;line-height:1.2}.dj-track-meta{font-size:12px;color:var(--dj-muted)}.dj-track-empty{color:var(--dj-muted);font-style:italic}.dj-track-info{min-width:0;flex:1}.dj-track-info .dj-track-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dj-tags{display:flex;gap:6px;flex-wrap:wrap}.dj-chip{font-size:11px;padding:2px 9px;border-radius:999px;border:1px solid var(--dj-border);color:var(--dj-muted);background:#ffffff05}.dj-chip.bpm{color:var(--dj-cyan);border-color:#22d3ee66}.dj-chip.key{color:var(--dj-amber);border-color:#fbbf2466}.dj-waveform{position:relative;height:90px;border-radius:10px;background:#05060b;border:1px solid var(--dj-border);display:flex;align-items:center;gap:2px;padding:0 8px;overflow:hidden}.dj-wave-bar{flex:1;border-radius:2px;min-width:1px;opacity:.85;transition:opacity .2s}.dj-wave-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 10px #fff;z-index:3}.dj-wave-cue{position:absolute;top:0;bottom:0;width:2px;z-index:2;opacity:.9}.dj-wave-cue:after{content:attr(data-label);position:absolute;top:2px;left:3px;font-size:9px;font-weight:700;white-space:nowrap;text-shadow:0 1px 2px #000}.dj-jog-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.dj-jog{width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#262b3a,#0c0e16 70%);border:2px solid var(--dj-border);display:grid;place-items:center;position:relative;box-shadow:inset 0 0 24px #0009}.dj-jog:before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(255,255,255,.12)}.dj-jog-inner{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#2b3142,#131722);border:1px solid var(--dj-border);display:grid;place-items:center;font-size:11px;color:var(--dj-muted)}.dj-jog.spin:before{animation:djspin 1.6s linear infinite}@keyframes djspin{to{transform:rotate(360deg)}}.dj-transport-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;flex:1}.dj-tbtn{border:1px solid var(--dj-border);background:var(--dj-panel-3);color:var(--dj-text);border-radius:10px;padding:10px 8px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}.dj-tbtn:hover{border-color:var(--dj-cyan);color:var(--dj-cyan)}.dj-tbtn:disabled{opacity:.4;cursor:not-allowed}.dj-tbtn.play.on{background:var(--dj-green);border-color:var(--dj-green);color:#05070c;box-shadow:0 0 16px #34d39980}.dj-tbtn.cue{color:var(--dj-amber)}.dj-tbtn.sync.on{background:var(--dj-cyan);border-color:var(--dj-cyan);color:#05070c}.dj-hotcues{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.dj-hotcue{border-radius:8px;padding:8px 4px;text-align:center;font-size:10px;font-weight:700;cursor:pointer;border:1px solid var(--dj-border);background:var(--dj-panel-3);color:var(--dj-muted);transition:all .15s}.dj-hotcue.set{color:#05070c}.dj-hotcue:hover{transform:translateY(-1px)}.dj-controls-row{display:flex;gap:14px;align-items:flex-end;justify-content:space-around}.dj-knob-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}.dj-knob{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#313749,#10131d 72%);border:1px solid var(--dj-border);position:relative;cursor:ns-resize;box-shadow:inset 0 2px 8px #00000080}.dj-knob-indicator{position:absolute;left:50%;top:6px;width:3px;height:16px;border-radius:2px;background:var(--dj-cyan);transform-origin:50% 20px;box-shadow:0 0 8px var(--dj-cyan)}.dj-knob-label{font-size:10px;color:var(--dj-muted);letter-spacing:1px;text-transform:uppercase}.dj-knob-value{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}.dj-mixer{display:flex;flex-direction:column;gap:14px}.dj-mixer h4{text-align:center;color:var(--dj-muted);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin:0}.dj-channel-faders{display:flex;justify-content:space-around;gap:12px}.dj-vfader-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}.dj-vfader{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:8px;height:150px;background:linear-gradient(180deg,#2a3042,#10131d);border-radius:6px;outline:none;cursor:pointer}.dj-vfader::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:16px;border-radius:4px;background:linear-gradient(180deg,#eef2f9,#9aa6bd);border:1px solid #05070c;cursor:grab;box-shadow:0 2px 6px #0009}.dj-vfader::-moz-range-thumb{width:30px;height:16px;border-radius:4px;background:linear-gradient(180deg,#eef2f9,#9aa6bd);border:1px solid #05070c;cursor:grab}.dj-vfader.a{accent-color:var(--dj-deck-a)}.dj-vfader.b{accent-color:var(--dj-deck-b)}.dj-crossfader-wrap{text-align:center}.dj-crossfader{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:6px;outline:none;cursor:pointer;background:linear-gradient(90deg,var(--dj-deck-a),#2a3042 50%,var(--dj-deck-b))}.dj-crossfader::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:26px;border-radius:5px;background:linear-gradient(180deg,#eef2f9,#9aa6bd);border:1px solid #05070c;box-shadow:0 2px 6px #0009}.dj-crossfader::-moz-range-thumb{width:18px;height:26px;border-radius:5px;background:linear-gradient(180deg,#eef2f9,#9aa6bd);border:1px solid #05070c}.dj-xf-labels{display:flex;justify-content:space-between;font-size:11px;font-weight:800;margin-top:6px}.dj-xf-labels .a{color:var(--dj-deck-a)}.dj-xf-labels .b{color:var(--dj-deck-b)}.dj-vu{height:8px;border-radius:4px;overflow:hidden;background:#05060b;border:1px solid var(--dj-border)}.dj-vu-fill{height:100%;background:linear-gradient(90deg,var(--dj-green),var(--dj-amber) 70%,var(--dj-red));transition:width .1s}.dj-lower-row{display:grid;grid-template-columns:1.1fr 1fr 1.4fr;gap:16px;margin-top:16px}@media (max-width: 1100px){.dj-lower-row{grid-template-columns:1fr}}.dj-section-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--dj-muted);margin-bottom:12px;font-weight:700}.dj-section-title .accent{color:var(--dj-cyan)}.dj-fx-list{display:flex;flex-direction:column;gap:10px}.dj-fx{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--dj-border);background:var(--dj-panel-3)}.dj-fx.active{border-color:var(--dj-magenta);box-shadow:0 0 16px #f43f9d40}.dj-fx-name{flex:1;font-weight:700;font-size:13px}.dj-fx-sub{font-size:11px;color:var(--dj-muted)}.dj-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.dj-pad{aspect-ratio:1.4;border-radius:12px;cursor:pointer;border:1px solid var(--dj-border);background:linear-gradient(180deg,var(--dj-panel-3),#0e111a);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:700;text-align:center;padding:4px;transition:all .12s;color:var(--dj-text)}.dj-pad:hover{border-color:var(--dj-amber)}.dj-pad.empty{color:var(--dj-muted);font-weight:500}.dj-pad.hit{animation:djhit .3s}@keyframes djhit{0%{background:var(--dj-amber);color:#05070c}}.dj-pad-num{font-size:9px;color:var(--dj-muted)}.dj-library{display:flex;flex-direction:column}.dj-lib-search{margin-bottom:10px}.dj-lib-list{display:flex;flex-direction:column;gap:4px;max-height:340px;overflow-y:auto;padding-right:4px}.dj-lib-list::-webkit-scrollbar{width:6px}.dj-lib-list::-webkit-scrollbar-thumb{background:var(--dj-border);border-radius:3px}.dj-lib-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid transparent;cursor:default;transition:all .12s}.dj-lib-item:hover{background:var(--dj-panel-3);border-color:var(--dj-border)}.dj-lib-track-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dj-lib-track-meta{font-size:11px;color:var(--dj-muted)}.dj-lib-actions{display:flex;gap:6px}.dj-load-btn{border:1px solid var(--dj-border);background:var(--dj-panel-3);border-radius:8px;padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;transition:all .12s}.dj-load-btn.a:hover{border-color:var(--dj-deck-a);color:var(--dj-deck-a)}.dj-load-btn.b:hover{border-color:var(--dj-deck-b);color:var(--dj-deck-b)}.dj-empty{color:var(--dj-muted);text-align:center;padding:24px;font-style:italic}.dj-console .dj-btn{border:1px solid var(--dj-border);background:var(--dj-panel-3);color:var(--dj-text);border-radius:10px;padding:8px 14px;font-weight:700;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}.dj-console .dj-btn:hover{border-color:var(--dj-cyan);color:var(--dj-cyan)}.dj-console .dj-btn.primary{background:linear-gradient(135deg,var(--dj-cyan),var(--dj-magenta));border:none;color:#05070c}.dj-console .dj-btn.primary:hover{color:#05070c;filter:brightness(1.08)}.dj-console .dj-btn.danger{color:var(--dj-red)}.dj-console .dj-btn.danger:hover{border-color:var(--dj-red);color:var(--dj-red)}.dj-console .dj-btn:disabled{opacity:.4;cursor:not-allowed}.dj-mixes-row{margin-top:16px}.dj-mixes-list{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}.dj-mix-card{min-width:200px;border-radius:14px;padding:12px;border:1px solid var(--dj-border);background:var(--dj-panel-3);display:flex;flex-direction:column;gap:8px}.dj-mix-title{font-weight:700;font-size:13px}.dj-mix-meta{font-size:11px;color:var(--dj-muted);display:flex;gap:12px}.dj-mix-actions{display:flex;gap:6px}.dj-loading{display:grid;place-items:center;min-height:40vh;color:var(--dj-muted)}