/* PULSEDECK PRO CONSOLE - MASTER BUNDLED DESIGN SYSTEM */

/* --- BUNDLED: styles.css --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@600;800&display=swap');
:root{--bg:#07080c;--panel:#10131a;--panel2:#151925;--line:#252b39;--text:#f5f7fb;--muted:#8d96a8;--a:#ff7a00;--b:#ff174f;--cyan:#24d9ff}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:radial-gradient(circle at 50% -20%,#29213d 0,transparent 38%),var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;min-width:1180px}button,input{font:inherit}.topbar{height:64px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#090b10;position:sticky;top:0;z-index:20}.logo{font:800 21px Orbitron;color:white;text-decoration:none}.logo span{color:var(--a)}.logo b{font:700 9px Inter;background:var(--a);color:#111;padding:3px 5px;border-radius:3px;margin-left:6px}.top-actions{display:flex;align-items:center;gap:9px}.top-actions button,.outline,.icon-btn{border:1px solid var(--line);background:#11151d;color:white;border-radius:7px;padding:8px 12px;cursor:pointer}.top-actions button:hover{border-color:var(--a)}.record{color:#ff4e66!important}.record.active{background:#da1437!important;color:white!important;animation:pulse 1s infinite}.notice{background:#15110b;border-bottom:1px solid #4a331a;color:#e2b97a;padding:7px 22px;font-size:12px}.dj-app{padding:12px}.master-waveforms{height:76px;display:grid;grid-template-columns:1fr 90px 1fr;background:#0b0e14;border:1px solid var(--line);border-radius:8px;overflow:hidden}.master-waveforms canvas{width:100%;height:76px}.wave-center{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#121722}.wave-center b{font:700 20px Orbitron}.wave-center small{font-size:9px;color:var(--muted)}
.decks{display:grid;grid-template-columns:1fr 180px 1fr;gap:10px;margin-top:10px}.deck,.mixer{background:linear-gradient(150deg,#191e2a,#0d1017 70%);border:1px solid var(--line);border-radius:10px;overflow:hidden}.deck-a{--deck:var(--a)}.deck-b{--deck:var(--b)}.deck-head{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--line)}.deck-label{font:800 11px Orbitron;color:var(--deck)}.deck-head div{min-width:0}.deck-head strong,.deck-head small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck-head small,.deck-head>span:last-child{font-size:11px;color:var(--muted)}.source-tabs{display:flex;padding:7px 10px 0;gap:5px}.source{background:transparent;border:0;color:var(--muted);font-size:10px;padding:6px 9px;cursor:pointer;border-radius:4px}.source.active{background:var(--deck);color:#101014;font-weight:800}.youtube-loader{display:none;padding:8px 10px;gap:5px}.youtube-loader.open{display:flex}.youtube-loader input{flex:1;background:#080a0f;border:1px solid var(--line);color:white;padding:8px;border-radius:5px}.youtube-loader button{background:var(--deck);border:0;font-weight:800;border-radius:5px}.video-wrap{display:none;height:170px;background:black}.video-wrap.open{display:block}.video-wrap iframe{width:100%;height:100%}.deck-body{display:grid;grid-template-columns:65px 1fr 110px;align-items:center;min-height:250px;padding:10px 16px}.deck-b .deck-body{grid-template-columns:110px 1fr 65px}.platter{width:220px;height:220px;margin:auto;border-radius:50%;position:relative;background:radial-gradient(circle,#15171b 0 11%,#050609 12% 19%,#1b1e24 20% 21%,#07080b 22% 33%,#1b1e24 34% 35%,#050609 36% 48%,#1b1e24 49% 50%,#050609 51%);box-shadow:0 10px 30px #000,inset 0 0 0 6px #232834}.platter.playing{animation:spin 2s linear infinite}.vinyl{position:absolute;inset:11px;border-radius:50%;border:1px solid #333}.vinyl:after{content:"";position:absolute;top:8px;left:50%;width:2px;height:30px;background:var(--deck)}.label{position:absolute;inset:36%;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--deck),#222);font:800 22px Orbitron;color:white}.pitch-box{height:220px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-size:9px}.pitch-box input{appearance:slider-vertical;width:25px;height:160px;accent-color:var(--deck)}.pitch-box output{color:var(--deck);font:700 10px Orbitron}.eq-strip{display:grid;gap:7px}.eq-strip label,.master-knob{font-size:8px;color:var(--muted);text-align:center}.eq-strip input,.master-knob input{display:block;width:100%;accent-color:var(--deck)}.performance{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px 10px}.performance button{border:1px solid #343b4a;border-bottom:3px solid var(--deck);background:#191e29;color:#ccd1db;padding:9px 3px;border-radius:5px;font-size:9px}.performance button.set{background:var(--deck);color:#101014}.transport{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:10px;background:#0b0e14}.transport button{border:1px solid var(--line);background:#202634;color:white;padding:10px 5px;border-radius:5px;font-weight:800;font-size:10px;cursor:pointer}.transport .play{background:var(--deck);color:#101014}.transport .cue{border-color:var(--deck)}.transport .sync.on{color:var(--deck)}
.mixer{padding:12px;text-align:center}.mixer-title{font:800 11px Orbitron;color:var(--cyan);letter-spacing:2px}.meters{height:100px;display:flex;justify-content:center;align-items:end;gap:4px;margin:12px}.meters i{display:block;width:7px;height:10%;background:linear-gradient(to top,#22df6c 65%,#ffd12e 80%,#ff3658);border-radius:3px;transition:.05s}.master-knob input{margin:8px 0 20px;accent-color:var(--cyan)}.channel-faders{height:180px;display:flex;justify-content:space-around}.channel-faders label{font:800 10px Orbitron;color:var(--muted)}.channel-faders input{appearance:slider-vertical;width:32px;height:150px;accent-color:var(--cyan)}.cue-row{display:flex;gap:6px}.cue-row button{flex:1;background:#171c27;color:white;border:1px solid var(--line);padding:8px}.cross-label{display:block;font-size:8px;color:var(--muted);margin-top:20px}.cross-label input{display:block;width:100%;margin-top:8px;accent-color:var(--cyan)}
.browser{display:grid;grid-template-columns:135px 1fr;margin-top:10px;min-height:260px;border:1px solid var(--line);border-radius:10px;background:#0c0f15;overflow:hidden}.browser aside{border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:5px}.browser aside button{background:transparent;border:0;color:var(--muted);text-align:left;padding:10px;border-radius:5px}.browser aside button.active,.browser aside button:hover{background:#191f2a;color:white}.library{padding:15px}.library-head{display:flex;justify-content:space-between;align-items:center}.library h2{font-size:16px;margin:0}.library p{font-size:10px;color:var(--muted)}.upload{position:relative;background:var(--a);color:#111;padding:9px 12px;border-radius:6px;font-size:11px;font-weight:800;cursor:pointer}.upload input{position:absolute;inset:0;opacity:0}.drop-area{border:1px dashed #343c4c;color:var(--muted);text-align:center;padding:10px;font-size:11px;border-radius:6px}.drop-area.drag{border-color:var(--a);color:var(--a)}table{width:100%;border-collapse:collapse;margin-top:10px;font-size:11px}th,td{text-align:left;padding:9px;border-bottom:1px solid #1e2430}th{color:var(--muted);font-size:9px}td button{border:1px solid var(--line);background:#181d27;color:white;border-radius:4px;padding:5px 8px}.empty-row{text-align:center;color:var(--muted)}.midi-panel h3{font-size:13px}.midi-panel strong{color:#ff6575}.midi-panel p,.midi-panel div{font-size:10px;color:var(--muted)}.toast{position:fixed;right:18px;bottom:18px;max-width:370px;background:#202634;border:1px solid #3a4559;padding:12px 16px;border-radius:7px;transform:translateY(100px);opacity:0;transition:.25s;z-index:50;font-size:12px}.toast.show{transform:none;opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.55}}@media(max-width:1250px){.platter{width:190px;height:190px}.deck-body{min-height:225px}} 
tr.selected td{background:#1b2230;color:white}.cue-row button.on{border-color:var(--cyan);color:var(--cyan)}.performance button.on{background:var(--deck);color:#111}
.pro-center-mixer .cue-row .headphones-master{border-color:#ff344f!important;background:linear-gradient(#c51d34,#540510)!important;color:#fff!important;text-shadow:0 1px 2px #000;box-shadow:inset 0 1px #ff9aaa,0 0 10px #ff173b66!important}.pro-center-mixer .cue-row .headphones-master.on{background:linear-gradient(#5cff88,#08742e)!important;border-color:#68ff91!important;color:#031108!important;box-shadow:inset 0 1px #d4ffe0,0 0 18px #31ff6faa!important}
.headphone-console{display:grid!important;grid-template-columns:52px 86px 52px!important;align-items:center!important;justify-content:center!important;gap:12px!important;min-height:78px!important;margin:7px 0!important;padding:5px!important;border:1px solid #3d4651!important;border-radius:8px!important;background:radial-gradient(circle at 50% 45%,#252b32,#07090c 72%)!important;box-shadow:inset 0 0 16px #000!important}.headphone-console button{display:grid!important;place-items:center!important;font:900 11px Orbitron!important;cursor:pointer!important}.headphone-deck-select{width:48px!important;height:38px!important;border:2px solid #6b7785!important;border-radius:7px!important;background:linear-gradient(#343b44,#0b0e12)!important;color:#dce8f2!important;box-shadow:inset 0 1px #ffffff42,0 4px 7px #000!important}.headphone-deck-select.deck-a-select.on{border-color:#ff8a19!important;color:#ffae54!important;box-shadow:0 0 15px #ff7800!important}.headphone-deck-select.deck-b-select.on{border-color:#ff315f!important;color:#ff7190!important;box-shadow:0 0 15px #ff174f!important}.headphones-rotary{width:78px!important;height:78px!important;border:5px solid #ff4056!important;border-radius:50%!important;background:radial-gradient(circle at 38% 30%,#ff8c98 0 6%,#c51932 15%,#700817 48%,#180207 72%)!important;color:#fff!important;box-shadow:inset 0 0 0 3px #36030b,inset 0 -10px 14px #0009,0 5px 8px #000,0 0 18px #ff203f99!important;transform:rotate(0deg);transition:transform .2s,filter .2s!important}.headphones-rotary span{font-size:18px!important}.headphones-rotary b{font-size:5px!important;letter-spacing:.5px!important}.headphones-rotary.on{transform:rotate(18deg)!important;border-color:#5dff88!important;background:radial-gradient(circle at 38% 30%,#d8ffe2 0 6%,#38e66c 15%,#087a31 48%,#021b0b 72%)!important;box-shadow:inset 0 0 0 3px #053e18,inset 0 -10px 14px #0009,0 5px 8px #000,0 0 23px #35ff73!important}.mini-main-decks .headphone-console{display:none!important}
.controller-grille{height:112px;margin-top:10px;border:3px solid #c7ccd4;border-bottom:0;border-radius:10px 10px 0 0;background-color:#111621;background-image:radial-gradient(#384153 1.2px,transparent 1.6px);background-size:7px 7px;position:relative;display:grid;place-items:center;box-shadow:0 -8px 30px #000}.controller-grille:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,99,255,.15),transparent 32%,rgba(255,0,91,.12) 68%,transparent)}.controller-grille>div:last-child{z-index:2;text-align:center;text-shadow:0 3px 12px #000}.controller-grille strong{display:block;font:800 27px Orbitron;color:#6e7788}.controller-grille small{font:700 8px Orbitron;color:#aab2c0;letter-spacing:2px}.grille-lights{position:absolute;inset:0;display:flex;justify-content:center;gap:85px}.grille-lights i{width:35px;height:8px;background:var(--a);filter:blur(7px);opacity:.7}.grille-lights i:nth-child(2){background:#2ae571}.grille-lights i:nth-child(3){background:#8f5cff}.hardware-layout{margin-top:0;border:3px solid #c7ccd4;border-top:1px solid #555d6b;border-radius:0 0 10px 10px;padding:5px;background:linear-gradient(180deg,#121a2c,#080b12);gap:5px}.hardware-layout .deck,.hardware-layout .mixer{border-radius:2px;border-color:#273044;background:linear-gradient(145deg,#1a2237,#0a0e18 72%)}.hardware-layout .deck-head{background:#111827}.hardware-layout .platter{width:245px;height:245px;border:8px solid #242c3c;box-shadow:0 0 0 4px #07090d,0 12px 32px #000,inset 0 0 0 5px #343d4c}.hardware-layout .vinyl{inset:5px}.hardware-layout .performance{grid-template-columns:repeat(2,1fr);width:220px;margin:0 auto}.hardware-layout .performance button{height:45px;border:2px solid var(--deck);box-shadow:inset 0 0 12px color-mix(in srgb,var(--deck) 15%,transparent)}.pad-mode-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:220px;margin:0 auto 8px}.pad-mode-buttons button{background:#10141d;color:#818a9a;border:1px solid #343c4c;border-radius:3px;font-size:7px;padding:5px 2px}.pad-mode-buttons button.active{background:var(--deck);color:#0a0b0e;font-weight:800}.hardware-layout .transport{border-top:1px solid #2e3747}.hardware-layout .mixer{padding-top:18px}.browse-control{display:flex;flex-direction:column;align-items:center;font-size:7px;color:#9da6b7}.hardware-knob{display:block;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,#394254 0 20%,#111620 22% 55%,#667085 58% 62%,#0a0d13 64%);box-shadow:0 4px 8px #000}.hardware-knob:after{content:"";display:block;width:2px;height:12px;background:white;margin:5px auto}.load-row{display:flex;justify-content:center;gap:12px;margin:8px}.load-row button{background:#111620;color:#fff;border:1px solid #3c4556;border-radius:50%;font-size:7px;width:39px;height:26px}.head-controls{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}.head-controls label{font-size:7px;color:#858fa2}.head-controls input{width:100%;accent-color:var(--cyan)}
@media(max-width:1250px){.hardware-layout .platter{width:205px;height:205px}.hardware-layout .performance,.pad-mode-buttons{width:190px}}
.performance-studio{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(135deg,var(--panel),#090c12);padding:16px}.studio-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.studio-head span{font:700 8px Orbitron;color:var(--a);letter-spacing:2px}.studio-head h2{font:700 18px Orbitron;margin:4px 0}.theme-picker{display:flex;gap:7px;background:#080a0f;border:1px solid var(--line);padding:8px;border-radius:30px}.theme-picker button{width:25px;height:25px;border-radius:50%;border:2px solid #343b48;background:var(--swatch);cursor:pointer;box-shadow:inset 0 0 0 4px #10131a}.theme-picker button.active{border-color:white;transform:scale(1.14);box-shadow:0 0 12px var(--swatch)}.studio-grid{display:grid;grid-template-columns:1fr .7fr 1fr;gap:12px}.pad-editor,.fx-editor{border:1px solid var(--line);background:#0b0e14;border-radius:8px;padding:12px}.pad-editor h3,.fx-editor h3{font:700 10px Orbitron;margin:0 0 10px}.deck-a-editor h3{color:var(--a)}.deck-b-editor h3{color:var(--b)}.sample-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.sample-slots label{position:relative;border:1px solid #353d4c;border-bottom:3px solid var(--a);background:#151a24;padding:9px 5px;border-radius:5px;font:800 8px Orbitron;text-align:center;cursor:pointer;overflow:hidden}.deck-b-editor .sample-slots label{border-bottom-color:var(--b)}.sample-slots label.loaded{background:#183023}.sample-slots input{position:absolute;inset:0;opacity:0;cursor:pointer}.sample-slots small{display:block;margin-top:5px;color:var(--muted);font:400 7px Inter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-config{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:10px}.slot-config label,.fx-slots label{font-size:8px;color:var(--muted)}.slot-config select,.fx-slots select{display:block;margin-top:4px;background:#111620;color:white;border:1px solid #343d4c;border-radius:4px;padding:6px}.slot-config button{background:#181e29;color:#f17a89;border:1px solid #3b2930;border-radius:4px;padding:7px;font-size:8px}.fx-editor p{font-size:9px;color:var(--muted)}.fx-slots{display:grid;grid-template-columns:1fr 1fr;gap:7px}.fx-slots select{width:100%}
body{transition:background-color .35s}.deck,.mixer,.performance-studio,.browser{transition:background-color .35s,border-color .35s}
.youtube-center{display:grid;grid-template-columns:220px 1fr auto auto 175px;align-items:center;gap:8px;background:linear-gradient(90deg,#19080b,#0c1017 35%);border:1px solid #45232a;border-radius:8px;padding:9px 12px;margin-bottom:10px}.youtube-brand{display:flex;align-items:center;gap:9px}.youtube-brand>span{display:grid;place-items:center;width:34px;height:25px;background:#ff1644;border-radius:7px;color:white}.youtube-brand b,.youtube-brand small{display:block}.youtube-brand b{font:700 11px Orbitron}.youtube-brand small,.youtube-limit{font-size:8px;color:var(--muted)}.youtube-center>input{background:#090c12;border:1px solid #343d4c;border-radius:5px;color:white;padding:9px}.youtube-center>button{background:#ff1644;color:white;border:0;border-radius:5px;padding:9px 12px;font-size:9px;font-weight:800;cursor:pointer}.youtube-center>button:nth-of-type(2){background:#c70d38}
.library-actions{display:flex;align-items:center;gap:6px}.library-actions select,.library-actions>button{background:#111620;color:white;border:1px solid #343d4c;border-radius:5px;padding:8px;font-size:9px}.favorite{border:0!important;background:transparent!important;color:#596274!important;padding:2px!important}.favorite.on{color:#ffd34e!important;text-shadow:0 0 8px #ffd34e}.deck.drag-target{outline:3px solid var(--deck);box-shadow:inset 0 0 45px color-mix(in srgb,var(--deck) 30%,transparent)}[data-track-id]{cursor:grab}.midi-import{position:relative;background:#151b25;color:#aab2c0;border:1px solid #343c4c;padding:9px;border-radius:5px;font-size:9px;cursor:pointer}.midi-import input{position:absolute;inset:0;opacity:0;cursor:pointer}
.theme-picker{display:grid;grid-template-columns:repeat(10,25px);border-radius:18px;max-height:112px;overflow:auto}.theme-picker button{flex:none}body{background:var(--wallpaper,var(--bg));background-attachment:fixed}
.dj-app{zoom:var(--app-zoom,1)}.zoom-controls{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden}.zoom-controls button{border:0!important;border-radius:0!important;padding:7px 8px!important}.zoom-controls span{min-width:44px;text-align:center;font-size:9px;color:var(--muted)}
.auxiliary-decks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.mini-deck{--deck:#22d3ee;background:linear-gradient(135deg,var(--panel),#090c12);border:1px solid var(--line);border-radius:9px;padding:10px;transition:.25s}.deck-d{--deck:#a66cff}.mini-title{display:grid;grid-template-columns:65px 1fr auto;gap:10px;align-items:center}.mini-title>span{font:800 10px Orbitron;color:var(--deck)}.mini-title b,.mini-title small{display:block}.mini-title small,.mini-title time{font-size:8px;color:var(--muted)}.mini-deck canvas{width:100%;height:45px;background:#07090e;margin:8px 0}.mini-controls{display:grid;grid-template-columns:55px repeat(7,1fr) auto auto;gap:7px;align-items:center}.mini-controls label{font-size:7px;color:var(--muted);text-align:center}.mini-controls input{display:block;width:100%;accent-color:var(--deck)}.mini-controls output{font-size:7px;color:var(--deck)}.mini-controls button{background:#191f2b;color:white;border:1px solid var(--line);border-radius:4px;padding:9px;font-size:8px}.mini-controls .play{background:var(--deck);color:#091014;font-weight:800}.mini-platter{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#111 30%,#303846 32%,#090a0d 65%);border:3px solid #3b4453;color:var(--deck);font:800 11px Orbitron}.mini-platter.playing{animation:spin 2s linear infinite}
.compact-decks .controller-grille{height:54px}.compact-decks .hardware-layout .deck-body{min-height:155px}.compact-decks .hardware-layout .platter{width:145px;height:145px}.compact-decks .performance,.compact-decks .pad-mode-buttons{width:170px}.compact-decks .performance button{height:31px}.compact-decks .auxiliary-decks{display:none}.compact-library .browser{min-height:115px;max-height:155px}.compact-library .browser table{margin-top:3px}.compact-library .drop-area,.compact-library .library-head p{display:none}.compact-library .library{padding:8px;overflow:auto}
.hardware-layout,.browser{resize:vertical;overflow:auto;min-height:220px}.browser{min-height:140px}.sample-slots .sample-volume{position:static;opacity:1;width:100%;height:14px;margin-top:7px;accent-color:var(--a);cursor:pointer}.deck-b-editor .sample-volume{accent-color:var(--b)}.logo-loader{display:flex;align-items:center;gap:8px;position:relative;background:#111620;border:1px dashed #3b4556;border-radius:5px;padding:7px;margin:0 0 9px;font-size:8px;color:var(--muted);cursor:pointer}.logo-loader input{position:absolute;inset:0;opacity:0;cursor:pointer}.logo-loader small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-window .topbar,.library-window .notice,.library-window .youtube-center,.library-window .master-waveforms,.library-window .controller-grille,.library-window .hardware-layout,.library-window .performance-studio{display:none}.library-window{min-width:760px}.library-window .dj-app{padding:0;zoom:1}.library-window .browser{margin:0;min-height:100vh;height:100vh!important;resize:none;border-radius:0}.library-window .browser>aside:first-child{display:flex}
.sample-slots input[data-sample]{inset:0 0 52px}.sample-play{position:relative;z-index:4;width:34px;height:28px;margin:6px auto 2px;border:1px solid var(--a);border-radius:5px;background:var(--a);color:#090b0f;font-size:14px;cursor:pointer}.deck-b-editor .sample-play{border-color:var(--b);background:var(--b)}.sample-play:hover,.sample-play.playing{transform:scale(1.08);filter:brightness(1.3);box-shadow:0 0 12px currentColor}.sample-slots .sample-volume{position:relative;z-index:4}
.audio-test{background:var(--cyan);color:#071014;border:0;border-radius:6px;padding:9px 13px;font-size:9px;font-weight:800;cursor:pointer;white-space:nowrap}
.direct-loader{display:none;grid-template-columns:1fr auto;gap:6px;padding:8px 10px;background:#071711;border-top:1px solid #1c4937}.direct-loader.open{display:grid}.direct-loader input{min-width:0;background:#080a0f;border:1px solid #286347;color:white;padding:8px;border-radius:5px}.direct-loader button{background:#34df8b;color:#06140d;border:0;border-radius:5px;padding:8px 11px;font-size:9px;font-weight:800;cursor:pointer}.direct-loader small{grid-column:1/-1;color:#6fc69b;font-size:8px}
.sample-bank-picker{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 9px;padding:7px 9px;border:1px solid #3d4658;border-radius:5px;background:#141a25;color:#c8cfdb;font-size:8px}.sample-bank-picker select{background:#090d14;color:#fff;border:1px solid #465167;border-radius:4px;padding:6px}.sample-play.pad-fired,.hardware-layout .performance button.pad-fired{background:#f01835!important;border-color:#ff6074!important;color:#fff!important;box-shadow:0 0 20px #ff173f,inset 0 0 12px #ff8796!important;transform:scale(.96)}
.platter{cursor:pointer}.platter:hover{outline:2px solid color-mix(in srgb,var(--deck) 60%,transparent);outline-offset:3px}.platter .label{background-repeat:no-repeat}
.platter-upload-trigger{position:absolute;right:12px;bottom:12px;z-index:6;display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--deck);border-radius:50%;background:#080b10dd;color:#fff;cursor:pointer;font-size:14px;box-shadow:0 0 12px #000}.platter-upload-trigger:hover{background:var(--deck);transform:scale(1.08)}
.hardware-layout .deck>.performance{display:none}
.studio-toggle{background:#171e2a;color:#dce4f2;border:1px solid #3b4659;border-radius:6px;padding:8px 11px;font-size:9px;font-weight:700;cursor:pointer;white-space:nowrap}.studio-toggle:hover{border-color:var(--a);color:var(--a)}.performance-studio.studio-collapsed{min-height:0!important;height:auto!important;resize:none;overflow:hidden;padding:10px 16px}.performance-studio.studio-collapsed .studio-grid,.performance-studio.studio-collapsed .theme-picker,.performance-studio.studio-collapsed .audio-test,.performance-studio.studio-collapsed .resize-hint{display:none}.performance-studio.studio-collapsed .studio-head{margin:0}.performance-studio.studio-collapsed:after{display:none}.performance-studio.studio-collapsed .studio-head h2{font-size:13px;margin:2px 0}
.hardware-layout .mixer{align-self:start;resize:vertical;overflow:auto;min-height:260px;max-height:1100px;position:relative}.hardware-layout .mixer:after{content:"";position:absolute;right:3px;bottom:3px;width:14px;height:14px;border-right:3px solid var(--cyan);border-bottom:3px solid var(--cyan);pointer-events:none}
.hide-decks-btn{background:#d71936!important;border:1px solid #ff526a!important;border-radius:3px!important;color:#fff!important;padding:9px 14px!important;font-weight:800!important;box-shadow:0 0 12px #d7193644}.hide-decks-btn:hover{background:#ff2848!important}.hide-decks-btn.decks-are-hidden{background:#172231!important;border-color:#45d5ff!important;color:#73e4ff!important}.main-decks-hidden .hardware-layout{grid-template-columns:minmax(180px,260px);justify-content:center}.main-decks-hidden .hardware-layout>.deck{display:none}.main-decks-hidden .hardware-layout .mixer{width:100%}
.mini-deck-mode-btn{background:#112233!important;border:1px solid #31cfff!important;color:#75e6ff!important;border-radius:4px!important;font-weight:800!important}.mini-deck-mode-btn.active{background:#23c8f2!important;color:#051118!important;box-shadow:0 0 14px #23c8f266}.mini-main-decks .controller-grille{height:30px;border-width:1px}.mini-main-decks .controller-grille strong{font-size:12px}.mini-main-decks .controller-grille small,.mini-main-decks .grille-lights{display:none}.mini-main-decks .hardware-layout{grid-template-columns:1fr 135px 1fr;min-height:170px!important;height:auto!important;resize:none;align-items:start}.mini-main-decks .hardware-layout .deck{height:auto;min-height:165px;overflow:hidden}.mini-main-decks .hardware-layout .deck-head{grid-template-columns:48px 1fr auto;gap:6px;padding:5px 7px}.mini-main-decks .deck-head strong{font-size:10px}.mini-main-decks .deck-head small,.mini-main-decks .deck-head>span:last-child{font-size:7px}.mini-main-decks .source-tabs{padding:3px 6px 0}.mini-main-decks .source{font-size:7px;padding:3px 5px}.mini-main-decks .youtube-loader,.mini-main-decks .direct-loader{padding:4px 6px}.mini-main-decks .video-wrap{height:90px}.mini-main-decks .hardware-layout .deck-body{grid-template-columns:36px 1fr!important;min-height:82px;height:82px;padding:3px 8px}.mini-main-decks .hardware-layout .deck-b .deck-body{grid-template-columns:1fr 36px!important}.mini-main-decks .hardware-layout .eq-strip{display:none}.mini-main-decks .hardware-layout .platter{width:76px;height:76px;border-width:4px;box-shadow:0 0 0 2px #07090d,0 5px 14px #000,inset 0 0 0 2px #343d4c}.mini-main-decks .hardware-layout .platter-upload-trigger{width:20px;height:20px;right:2px;bottom:2px;font-size:9px}.mini-main-decks .hardware-layout .pitch-box{height:78px}.mini-main-decks .hardware-layout .pitch-box input{height:52px}.mini-main-decks .pad-mode-buttons{display:none}.mini-main-decks .hardware-layout .transport{padding:4px;gap:3px}.mini-main-decks .hardware-layout .transport button{padding:5px 2px;font-size:7px}.mini-main-decks .hardware-layout .mixer{min-height:165px!important;height:165px!important;resize:none;padding:6px;overflow:hidden}.mini-main-decks .mixer-title{font-size:8px}.mini-main-decks .browse-control{transform:scale(.72);margin:-4px}.mini-main-decks .load-row{margin:2px}.mini-main-decks .load-row button{width:32px;height:20px}.mini-main-decks .meters{height:18px;margin:4px}.mini-main-decks .master-knob input{margin:3px 0 5px}.mini-main-decks .channel-faders{height:42px}.mini-main-decks .channel-faders input{height:35px}.mini-main-decks .cue-row,.mini-main-decks .head-controls,.mini-main-decks .cross-label{display:none}.mini-main-decks .auxiliary-decks{display:none}
.users-card{max-height:92vh;overflow:auto}.midi-settings-card{margin-top:18px;padding:15px;border:1px solid #344057;border-radius:9px;background:#090d14}.midi-settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.midi-settings-head h3{margin:0 0 5px}.midi-settings-actions,.mapping-file-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.midi-settings-actions button,.mapping-file-actions button{background:#151d29;color:#fff;border:1px solid #3b475a;border-radius:5px;padding:8px 10px;font-size:9px;cursor:pointer}.mapping-file-actions{margin-top:10px}.midi-settings-card .midi-profile-label{max-width:360px}.midi-settings-card #denonActionGrid{grid-template-columns:repeat(4,1fr);max-height:240px}.admin-user-management.permission-hidden{display:none!important}
.denon-connect{border-color:#315879!important;color:#78ceff!important}.top-actions button.controller-selected{border-color:#52e878!important;box-shadow:0 0 0 1px #52e878,0 0 12px #52e87833}.performance-studio{resize:both;overflow:auto;min-width:560px;min-height:190px;max-width:100%;position:relative}.performance-studio:after{content:"";position:absolute;right:3px;bottom:3px;width:15px;height:15px;border-right:3px solid var(--a);border-bottom:3px solid var(--a);pointer-events:none}.resize-hint{color:var(--muted);font-size:8px;white-space:nowrap}
.sample-list{position:relative;z-index:5;width:100%;margin-top:6px;background:#080b10;color:white;border:1px solid #394354;border-radius:4px;padding:4px;font-size:7px}.sample-slots input[data-sample]{inset:0 0 82px}
.browser{grid-template-columns:210px minmax(0,1fr);height:460px!important;min-height:440px!important;overflow:hidden!important}.browser>aside{min-height:0;overflow:hidden;background:#0a0d13}.browser>aside>button{flex:none;padding:8px 10px}.browser .library-actions{display:flex;flex-direction:column;align-items:stretch;gap:5px;margin-top:6px;padding:8px;border:1px solid #343d4c;border-radius:8px;background:#111620;box-shadow:inset 0 0 18px #0006}.browser .library-actions select,.browser .library-actions>button,.browser .library-actions>.upload{width:100%;min-height:31px;background:#151b25;color:white;border:1px solid #343d4c;border-radius:5px;padding:7px;font-size:9px;text-align:left}.browser .library-actions>.upload{display:flex;align-items:center;background:var(--a);color:#111;border-color:var(--a)}.browser>.library{min-width:0;min-height:0;overflow-y:scroll!important;overflow-x:auto!important;scrollbar-gutter:stable}.browser .library-head{position:sticky;top:-15px;z-index:3;background:#0c0f15;padding:15px 0 8px}.library-window .browser{grid-template-columns:210px minmax(0,1fr);height:100vh!important;min-height:100vh!important}
.permission-hidden{display:none!important}.users-card{width:min(850px,calc(100% - 30px))}.dj-user-row{gap:15px}.permission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;flex:1}.permission-grid label{display:flex;align-items:center;gap:4px;margin:0;background:#10151e;padding:5px;border-radius:4px;font-size:8px}.permission-grid input{width:auto;margin:0}.dj-user-row em{color:var(--a);font-size:9px}.permission-legend{color:var(--muted);font-size:8px;margin-top:12px}.delete-track{color:#ff7184!important;border-color:#52242d!important}#autoDjBtn.active{background:var(--cyan);color:#071014}
.playlist-folders{display:flex;flex-direction:column;gap:4px;max-height:105px;overflow:auto;padding:3px;border:1px dashed #344052;border-radius:5px}.playlist-folder{display:flex!important;justify-content:space-between;align-items:center;min-height:28px!important;padding:5px 7px!important;background:#0b1018!important;color:#bfc8d8!important}.playlist-folder.active{border-color:var(--a)!important;color:#fff!important}.playlist-folder.drop-target{background:#173521!important;border-color:#45e67c!important;box-shadow:0 0 10px #45e67c55}.playlist-folder small{color:var(--a)}.no-folders{padding:6px;color:#697487;font-size:8px}.playlist-picker-card select{display:block;width:100%;margin:16px 0;background:#080b10;color:#fff;border:1px solid #384254;border-radius:6px;padding:11px}.browser tr[draggable=true]:active{opacity:.6}.browser tr[draggable=true]{cursor:grab}
#loginModal{overflow:hidden;background:radial-gradient(circle at 50% 45%,#30250b88,transparent 34%),linear-gradient(125deg,#03050a 0%,#0a1020 55%,#080a0f 100%)}#loginModal:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 49.8%,#d5aa3544 50%,transparent 50.2%);opacity:.45}.login-brand-logo{position:absolute;left:28px;top:28px;z-index:3;width:150px;padding:7px;border:1px solid #d8b34e;border-radius:14px;background:#07090ddd;box-shadow:0 0 32px #d7aa3d55;text-align:center}.login-brand-logo img{display:block;width:100%;height:112px;object-fit:cover;object-position:center 34%;border-radius:9px}.login-brand-logo span{display:block;padding:7px 2px 2px;font:800 13px Orbitron;color:#eac55e;letter-spacing:2px}.login-gold-title{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font:800 clamp(90px,15vw,230px) Orbitron;color:transparent;background:linear-gradient(180deg,#fff0a5 0,#d7aa34 42%,#75500b 78%,#f1cf68 100%);background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 8px 2px #000) drop-shadow(0 0 25px #d8ad3b66);letter-spacing:.08em;opacity:.32;user-select:none}.branded-login-card{z-index:4;margin:0!important;border-color:#9b7627;background:linear-gradient(145deg,#171a20f5,#07090df5);box-shadow:0 25px 80px #000,0 0 35px #d6a93a55}.branded-login-card .login-submit{background:linear-gradient(180deg,#f4d570,#b57b12);color:#160f02}.login-website{position:absolute;left:0;right:0;bottom:7%;z-index:3;overflow:hidden;white-space:nowrap;border-top:1px solid #be922b55;border-bottom:1px solid #be922b55;background:#05070bbb;padding:13px 0}.login-website span{display:inline-block;font:800 25px Orbitron;color:#efcb63;text-shadow:0 0 15px #e9b934;animation:website-scroll 12s linear infinite}@keyframes website-scroll{from{transform:translateX(-110%)}to{transform:translateX(110vw)}}@media(max-width:1250px){.login-gold-title{font-size:100px}.login-brand-logo{width:120px}.login-brand-logo img{height:88px}}
.library-view-tabs{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}.library-view-tabs button{background:#111620;color:#9fa9ba;border:1px solid #343d4c;border-radius:5px;padding:8px 11px;font-size:9px;cursor:pointer}.library-view-tabs button.active,.library-view-tabs button:hover{background:#20283a;color:#fff;border-color:var(--a)}.library-head{gap:15px}
.branded-login-card{width:min(520px,calc(100% - 30px));max-height:82vh;overflow:auto;padding:22px 28px}.login-site-player{margin-top:16px;padding:12px;border:1px solid #8d6a20;border-radius:9px;background:linear-gradient(145deg,#16140d,#08090d);box-shadow:inset 0 0 18px #000}.login-site-player>div{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.login-site-player span{font:700 7px Orbitron;color:#997526;letter-spacing:1px}.login-site-player strong{flex:1;font:700 10px Orbitron;color:#f0cb62;text-align:center}.login-site-player>div button{width:26px;height:26px;border:1px solid #8d6a20;border-radius:50%;background:#18130a;color:#f0cb62;cursor:pointer}.login-site-player>div button:hover{background:#d7aa34;color:#111}.login-site-player select{display:block;width:100%;background:#050609;color:#fff;border:1px solid #6e5522;border-radius:6px;padding:9px;font-size:9px}.login-site-player audio{display:block;width:100%;height:36px;margin-top:8px;accent-color:#d7aa34}.login-site-player a{display:block;margin-top:7px;color:#d9b957;text-align:right;text-decoration:none;font-size:8px}.login-site-player a:hover{color:#fff0a5}
.login-brand-logo{width:300px!important;max-height:calc(100vh - 55px);overflow:auto;padding:9px!important}.login-brand-logo>img{height:155px!important}.login-brand-logo>.login-site-player{margin-top:5px;text-align:left}.login-site-player canvas{display:block;width:100%;height:52px;margin:6px 0 8px;border:1px solid #493915;border-radius:5px;background:#070708}.login-admin-ticker{margin-top:8px;overflow:hidden;border:1px solid #d6aa39;border-radius:6px;background:#070704;padding:9px 0;white-space:nowrap;box-shadow:inset 0 0 16px #b7831422}.login-admin-ticker span{display:inline-block;padding-left:100%;font:800 11px Orbitron;color:#f0cb62;text-shadow:0 0 9px #d9a72c;animation:login-ticker-scroll 16s linear infinite}@keyframes login-ticker-scroll{to{transform:translateX(-100%)}}.ticker-admin-settings{margin-top:16px;padding:12px;border:1px solid #8d6a20;border-radius:8px;background:#0d0c08}.ticker-admin-settings h3{margin:0 0 8px;color:#f0cb62;font:700 11px Orbitron}.ticker-admin-settings textarea{display:block;width:100%;min-height:75px;resize:vertical;background:#07090d;color:#fff;border:1px solid #55431e;border-radius:6px;padding:9px}.ticker-admin-settings button{margin-top:7px;background:linear-gradient(#f1ce66,#a87311);color:#171004;border:0;border-radius:5px;padding:8px 12px;font-weight:800;cursor:pointer}@media(max-width:1250px){.login-brand-logo{width:270px!important;left:14px!important;top:14px!important}.login-brand-logo>img{height:125px!important}}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(2,4,8,.82);backdrop-filter:blur(12px);z-index:100}.modal.open{display:grid}.modal-card{position:relative;width:min(420px,calc(100% - 30px));background:linear-gradient(145deg,#171d28,#090c12);border:1px solid #343e50;border-radius:14px;padding:28px;box-shadow:0 25px 80px #000;color:white}.modal-card h2{font:700 22px Orbitron;margin:8px 0}.modal-card p{color:var(--muted);font-size:11px}.modal-card label{display:block;font-size:9px;color:var(--muted);margin:12px 0}.modal-card input{display:block;width:100%;margin-top:5px;background:#080b10;color:white;border:1px solid #384254;border-radius:6px;padding:10px}.modal-close{position:absolute;right:12px;top:12px;background:transparent;color:#99a3b4;border:0;font-size:22px}.modal-icon{font-size:28px}.login-submit,.add-dj-form button{width:100%;background:var(--a);color:#080b0f;border:0;border-radius:6px;padding:11px;font-weight:800}.modal-card>small{display:block;color:#687386;text-align:center;margin-top:13px}.users-card{width:min(620px,calc(100% - 30px))}.add-dj-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}.add-dj-form input{margin:0}.add-dj-form button{width:auto}.dj-users-list{margin-top:18px}.dj-users-list>div{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #28303e}.dj-users-list span{display:flex;flex-direction:column}.dj-users-list small{color:var(--muted)}.dj-users-list button{background:#31131a;color:#ff8092;border:1px solid #57202b;border-radius:5px;padding:6px 9px}
.midi-profile-label{display:grid;gap:5px;margin:10px 0;color:#aeb8cc;font-size:12px}
.midi-profile-label select{width:100%;padding:8px;border:1px solid #313a4c;border-radius:7px;background:#111722;color:#f3f6ff}
.denon-mapper{margin:10px 0;padding:8px;border:1px solid #2d374b;border-radius:8px;background:#0b101a}
.denon-mapper summary{cursor:pointer;color:#62d8ff;font-weight:700}
.denon-mapper p{font-size:11px;line-height:1.35;color:#aeb8cc}
#denonActionGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px;max-height:300px;overflow:auto}
#denonActionGrid button{padding:6px 4px;font-size:10px;border-color:#344057}
#denonActionGrid button.mapped{border-color:#24d47d;color:#70efa9;background:#10251d}
.login-brand-logo .login-site-player span{display:inline;padding:0}.login-brand-logo .login-admin-ticker span{padding-top:0;padding-right:0;padding-bottom:0}
.login-brand-logo{left:28px!important;right:auto!important}.console-preview-panel{position:absolute;right:28px;top:50%;z-index:4;width:300px;margin:0;transform:translateY(-50%);overflow:hidden;border:1px solid #d8b34e;border-radius:14px;background:#07090ddd;box-shadow:0 0 32px #d7aa3d44;padding:8px}.console-preview-panel img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;border:1px solid #4e4020;border-radius:8px}.console-preview-panel figcaption{padding:10px 5px 5px;text-align:center}.console-preview-panel strong,.console-preview-panel span{display:block}.console-preview-panel strong{font:800 12px Orbitron;color:#f0cb62;letter-spacing:1px}.console-preview-panel span{margin-top:5px;color:#9da7b8;font-size:8px}@media(max-width:1250px){.login-brand-logo{left:14px!important;right:auto!important}.console-preview-panel{right:14px;width:270px}}
.login-brand-logo{left:auto!important;right:28px!important}.login-admin-ticker{position:absolute;left:50%;top:7%;z-index:5;width:min(520px,calc(100% - 680px));min-width:420px;transform:translateX(-50%);margin:0}.login-site-player>div .login-stop-track{width:auto;height:26px;padding:0 7px;border-radius:5px;color:#ffce62;font:800 7px Orbitron}.login-site-player>div .login-stop-track:hover{background:#a21d20;color:#fff}@media(max-width:1250px){.login-brand-logo{left:auto!important;right:14px!important}.login-admin-ticker{top:4%;min-width:390px;width:430px}}
.login-brand-logo{left:28px!important;right:auto!important}@media(max-width:1250px){.login-brand-logo{left:14px!important;right:auto!important}}
#loginLaserCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 40%,#120b1b88 0,transparent 45%),#020305}.login-gold-title,.login-brand-logo,.branded-login-card,.console-preview-panel,.login-admin-ticker,.login-website{z-index:3}
.login-admin-ticker span,.login-website span{will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}.login-admin-ticker span{animation-name:login-ticker-scroll-smooth!important}@keyframes login-ticker-scroll-smooth{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}.login-website span{animation-name:website-scroll-smooth!important}@keyframes website-scroll-smooth{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(100vw,0,0)}}
.deck-a-appearance{display:flex;align-items:center;justify-content:flex-end;gap:8px;overflow:visible!important}.deck-a-appearance>span{font-size:10px;color:var(--muted);white-space:nowrap}.deck-a-appearance label{display:flex;align-items:center;gap:4px;color:var(--deck);font-size:15px;cursor:pointer}.deck-a-appearance select{width:66px;background:#080b11;color:#fff;border:1px solid #3a4353;border-radius:4px;padding:4px;font-size:8px;cursor:pointer}
.interface-white{background:#eef2f7!important;color:#101722!important}.interface-white .topbar,.interface-white .notice{background:#fff;color:#17202c;border-color:#b9c2ce}.interface-white .logo{color:#111}.interface-white .controller-grille{background-color:#e3e8ef;background-image:radial-gradient(#8c98a8 1.2px,transparent 1.6px)}.interface-white .controller-grille strong,.interface-white .controller-grille small{color:#273445}.interface-white .hardware-layout{background:linear-gradient(#e9edf3,#cdd5df);border-color:#7e8996}.interface-white .hardware-layout .deck,.interface-white .hardware-layout .mixer,.interface-white .mini-deck,.interface-white .performance-studio,.interface-white .browser,.interface-white .browser>aside,.interface-white .library-head{background:#f8fafc;color:#111923;border-color:#aeb8c5}.interface-white .hardware-layout .deck-head{background:#e9eef5;color:#111923;border-color:#b5beca}.interface-white .deck-head strong,.interface-white .library h2,.interface-white .studio-head h2,.interface-white .mixer-title{color:#111923}.interface-white .deck-head small,.interface-white .pitch-box,.interface-white .eq-strip label,.interface-white .master-knob,.interface-white .cross-label,.interface-white .library p{color:#4e5b6b}.interface-white button,.interface-white .source,.interface-white .library-actions>button,.interface-white .playlist-folder{background:#e3e9f1!important;color:#121a25!important;border-color:#8d99a8!important;text-shadow:none!important}.interface-white button:hover,.interface-white .source.active,.interface-white .library-view-tabs button.active{background:#cfd8e4!important;color:#05080c!important}.interface-white .transport,.interface-white .youtube-loader,.interface-white .direct-loader,.interface-white .pad-editor,.interface-white .fx-editor,.interface-white .library-actions{background:#e7ecf3;color:#111923}.interface-white input,.interface-white select,.interface-white textarea{background:#fff!important;color:#111!important;border-color:#8e99a7!important}.interface-white table,.interface-white th,.interface-white td{color:#17202b;border-color:#c1c9d3}.interface-white .platter{box-shadow:0 0 0 4px #7c8795,0 10px 25px #8290a5,inset 0 0 0 5px #404958}.interface-white .deck-a-appearance select{background:#fff;color:#111}.interface-white .toast{background:#fff;color:#111;border-color:#8e99a7}
.logo{display:flex;align-items:center;gap:5px}.logo img{width:34px;height:34px;border-radius:8px;object-fit:cover;box-shadow:0 0 12px #ff5b6333}.login-admin-ticker span{animation-duration:var(--ticker-duration,16s)!important}.login-website span{animation-duration:var(--ticker-duration,16s)!important}.advanced-settings{margin-top:18px;padding:15px;border:1px solid #344057;border-radius:9px;background:#090d14}.advanced-settings>h3{margin:0 0 12px;color:var(--a);font:700 13px Orbitron}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.settings-grid fieldset{min-width:0;margin:0;border:1px solid #2f3a4b;border-radius:7px;background:#0d121b;padding:10px}.settings-grid legend{padding:0 6px;color:#dce4f2;font:700 9px Orbitron}.settings-grid label{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:8px;margin:7px 0;font-size:8px}.settings-grid input,.settings-grid select{min-width:0;width:100%;margin:0;padding:7px;background:#070a10;color:#fff;border:1px solid #394557;border-radius:5px}.settings-grid button,.settings-buttons label{background:#171f2c;color:#fff;border:1px solid #3b485d;border-radius:5px;padding:8px;font-size:8px;cursor:pointer}.settings-grid small{color:#7f8a9d;font-size:7px}.settings-buttons{display:flex;gap:6px;margin-top:9px}.settings-buttons label{position:relative}.settings-buttons input{position:absolute;inset:0;opacity:0}.interface-white .advanced-settings,.interface-white .settings-grid fieldset{background:#f3f6fa;color:#15202d;border-color:#aeb8c5}.interface-white .settings-grid legend,.interface-white .advanced-settings h3{color:#182230}@media(max-width:1250px){.settings-grid{grid-template-columns:1fr}}
.ai-settings-card{grid-column:1/-1;border-color:#2f8f9d!important;background:linear-gradient(145deg,#0b1820,#0a1018)!important;box-shadow:inset 0 0 24px #22d4ff0b}.ai-settings-card legend{color:#4fe4ff!important}.ai-stems-title{margin:10px 0 6px;color:#9aefff;font:700 8px Orbitron}.ai-stem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.ai-stem-grid button{border-color:#286478;background:#0d2630;color:#a7efff}.ai-stem-grid button.active{background:#3ce2ff;color:#041015;box-shadow:0 0 14px #3ce2ff55}.ai-track-data{display:block;margin:3px 0 0 28px;color:#36dfff;font:700 7px Orbitron}.interface-white .ai-settings-card{background:linear-gradient(145deg,#eefbff,#e6f1f5)!important}.interface-white .ai-stem-grid button.active{background:#19bdd9!important;color:#031014!important}
.deck-stems-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 12px 8px}.deck-stems-strip button{padding:7px 3px;border:1px solid #31546a;border-radius:4px;background:#0d1720;color:#79cce6;font:700 7px Orbitron;cursor:pointer}.deck-stems-strip button.active{background:var(--deck);color:#080b0e;border-color:var(--deck);box-shadow:0 0 14px color-mix(in srgb,var(--deck) 55%,transparent)}

/* 3D Professional keeps the existing controls and changes only their presentation. */
.interface-3d{--panel:#171b20;--panel2:#242a31;background:radial-gradient(ellipse at 50% -10%,#29333d 0,#090c10 48%,#030405 100%)!important}
.interface-3d .topbar{background:linear-gradient(180deg,#171b20,#080a0d);border-bottom-color:#3b434d;box-shadow:0 8px 22px #000b}
.interface-3d .controller-grille{height:82px;border-color:#5e6874;background:linear-gradient(180deg,#222a33,#0d1116);box-shadow:inset 0 1px #89929c55,0 8px 25px #000}
.interface-3d .controller-grille strong{color:#d6dde6;text-shadow:0 2px 2px #000}.interface-3d .controller-grille small{color:#6de6ff}
.interface-3d .hardware-layout{grid-template-columns:minmax(390px,1fr) 270px minmax(390px,1fr);gap:8px;padding:8px;border:1px solid #4b545e;border-radius:14px;background:linear-gradient(180deg,#0b0e12,#020304);box-shadow:0 22px 50px #000,inset 0 1px #8994a033}
.interface-3d .hardware-layout .deck,.interface-3d .hardware-layout .mixer{position:relative;border:1px solid #59636d;border-radius:11px;background:linear-gradient(145deg,#30363d 0,#15191e 38%,#080a0d 100%);box-shadow:inset 0 1px #ffffff25,inset 0 -14px 35px #0008,0 8px 20px #000}
.interface-3d .hardware-layout .deck:before,.interface-3d .hardware-layout .mixer:before{content:"";position:absolute;inset:5px;z-index:0;border:1px solid #000;border-radius:8px;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff0b}
.interface-3d .hardware-layout .deck>* , .interface-3d .hardware-layout .mixer>*{position:relative;z-index:1}
.interface-3d .hardware-layout .deck-head{margin:8px 8px 0;border:1px solid #090b0e;border-radius:6px;background:linear-gradient(180deg,#11161c,#05070a);box-shadow:inset 0 1px #5c657033;padding:10px}
.interface-3d .deck-head strong{font-size:13px;color:#eef4fb}.interface-3d .deck-head small{color:#8e9aaa}.interface-3d .deck-label{font-size:13px;text-shadow:0 0 12px var(--deck)}
.interface-3d .source-tabs{margin:4px 8px 0;padding:5px;background:#090c10;border-radius:5px}.interface-3d .source{border:1px solid #303842!important;background:linear-gradient(#252b32,#10141a)!important;color:#aeb7c2!important;box-shadow:inset 0 1px #ffffff18}.interface-3d .source.active{border-color:var(--deck)!important;color:#fff!important;box-shadow:inset 0 0 12px color-mix(in srgb,var(--deck) 25%,transparent),0 0 8px color-mix(in srgb,var(--deck) 25%,transparent)}
.interface-3d .deck-body{min-height:290px;padding:12px 14px}.interface-3d .platter{width:245px;height:245px;border:10px solid #313943;background:repeating-radial-gradient(circle,#0a0c0f 0 3px,#252a30 4px,#08090b 6px);box-shadow:0 0 0 3px #050607,0 0 0 5px #69737e,0 16px 28px #000,inset 0 0 0 6px #020304,inset 0 0 32px #000}
.interface-3d .deck-a .platter{filter:drop-shadow(0 0 9px #ff7a0044)}.interface-3d .deck-b .platter{filter:drop-shadow(0 0 9px #ff174f44)}
.interface-3d .platter:after{content:"";position:absolute;inset:-5px;border:2px solid var(--deck);border-radius:50%;box-shadow:0 0 13px var(--deck),inset 0 0 10px var(--deck);opacity:.78}
.interface-3d .vinyl{inset:7px;border-color:#4d535b;background:radial-gradient(circle,#111 0 10%,#2c3035 11% 12%,#08090b 13% 50%,#282c31 50.5% 51%,#08090b 52% 69%,#292d32 69.5% 70%,#07080a 71%)}
.interface-3d .label{inset:34%;border:3px solid #111;background:radial-gradient(circle at 38% 32%,#f2f4f6 0,#69717a 20%,#16191d 56%,var(--deck) 100%);box-shadow:0 0 0 2px var(--deck),0 0 15px var(--deck);text-shadow:0 2px 2px #000}
.interface-3d .pitch-box{padding:8px 2px;border:1px solid #444d57;border-radius:6px;background:linear-gradient(90deg,#0b0d10,#23282e,#0b0d10);box-shadow:inset 0 0 10px #000}.interface-3d .pitch-box input{accent-color:var(--deck)}
.interface-3d .eq-strip{padding:7px;border:1px solid #414a54;border-radius:7px;background:linear-gradient(90deg,#080a0d,#20252b,#080a0d);box-shadow:inset 0 0 12px #000}.interface-3d .eq-strip label{color:#c3ccd6;font-weight:700}.interface-3d .eq-strip input{accent-color:var(--deck)}
.interface-3d .performance{padding:5px 12px 9px}.interface-3d .performance button{height:43px;border:1px solid #69737e;border-bottom:4px solid var(--deck);background:linear-gradient(145deg,#313842,#101419);box-shadow:inset 0 1px #ffffff2b,0 3px 4px #000;color:#dbe2ea;font-weight:800}.interface-3d .performance button:nth-child(1){border-bottom-color:#ffcf35}.interface-3d .performance button:nth-child(2){border-bottom-color:#ff3f77}.interface-3d .performance button:nth-child(3){border-bottom-color:#28a7ff}.interface-3d .performance button:nth-child(4){border-bottom-color:#69e743}
.interface-3d .deck-stems-strip button{background:linear-gradient(#26313a,#0a1015);border-color:#476071;box-shadow:inset 0 1px #ffffff1d}.interface-3d .deck-stems-strip button.active{background:var(--deck);color:#07090c}
.interface-3d .pad-mode-buttons button{background:linear-gradient(#252b32,#0c0f13);border-color:#49525d;color:#aab4bf}.interface-3d .pad-mode-buttons button.active{box-shadow:0 0 10px var(--deck)}
.interface-3d .transport{margin:0 8px 8px;border:1px solid #343c45;border-radius:8px;background:linear-gradient(#11151a,#050608);box-shadow:inset 0 1px #ffffff16}.interface-3d .transport button{border-color:#5c6670;background:linear-gradient(#343b44,#11151a);box-shadow:inset 0 1px #ffffff32,0 3px 5px #000}.interface-3d .transport .play{border-radius:22px;background:radial-gradient(circle at 38% 28%,#baffcb,#1ed75a 42%,#086c29 80%);color:#021307;text-shadow:0 1px #fff8;box-shadow:0 0 12px #27ed67aa,inset 0 2px #ffffff88}.interface-3d .transport .cue{border-color:#ff9d27;color:#ffc16d;box-shadow:inset 0 0 10px #ff8a0028}
.interface-3d .hardware-layout .mixer{padding:15px 12px}.interface-3d .mixer-title{font-size:13px;color:#76e9ff;text-shadow:0 0 12px #24d9ff}.interface-3d .browse-knob,.interface-3d .hardware-knob{background:radial-gradient(circle at 38% 32%,#bfc7cf,#414951 28%,#090b0d 68%);border-color:#7e8994;box-shadow:0 5px 8px #000,0 0 0 3px #13171b}.interface-3d .meters{height:125px;padding:9px;border:1px solid #333d46;border-radius:5px;background:#050708;box-shadow:inset 0 0 12px #000}.interface-3d .meters i{box-shadow:0 0 7px currentColor}
.interface-3d .channel-faders{padding:8px 3px;border:1px solid #343d47;border-radius:6px;background:linear-gradient(90deg,#090b0e,#20252b,#090b0e)}.interface-3d .channel-faders input,.interface-3d .cross-label input{accent-color:#32dcff}.interface-3d .cross-label{padding:9px;border:1px solid #343d47;border-radius:6px;background:#080a0d;color:#d7e0e9}.interface-3d .cross-label input{filter:drop-shadow(0 0 5px #24d9ff)}
.interface-3d .browser,.interface-3d .performance-studio{border-color:#48515c;background:linear-gradient(145deg,#171c22,#07090c);box-shadow:0 12px 30px #0008,inset 0 1px #ffffff15}
.interface-3d .deck-a-appearance select{width:82px;background:#070a0e;color:#fff;border-color:#59636e}.interface-3d .toast{border-color:#4ddfff;background:#101820;box-shadow:0 0 20px #24d9ff33}
.mini-main-decks .deck-stems-strip{display:none}
.real-stems-panel{margin:0 12px 8px;padding:7px;border:1px solid #315d70;border-radius:7px;background:linear-gradient(145deg,#0b1820,#080c11);box-shadow:inset 0 0 16px #23d8ff0c}.real-stems-head{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;margin-bottom:6px}.real-stems-head strong{color:#55e5ff;font:800 8px Orbitron}.real-stems-head button,.stem-reset{border:1px solid #3c768c;border-radius:4px;background:#12303c;color:#b8f4ff;padding:5px 7px;font:700 7px Orbitron;cursor:pointer}.real-stems-head button:disabled{opacity:.45;cursor:wait}.real-stems-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8298a3;font-size:7px;text-align:right}.real-stems-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.real-stems-grid>div{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:5px;border:1px solid #283943;border-radius:5px;background:#0a1015}.real-stems-grid b{grid-column:1/-1;color:#dce9ee;font:700 7px Orbitron;text-align:center}.real-stems-grid button{border:1px solid #3b5360;border-radius:3px;background:#17232a;color:#9fb5bf;padding:5px 2px;font:700 6px Orbitron;cursor:pointer}.real-stems-grid [data-stem-solo].active{background:#26d8ff;color:#041014;border-color:#76ecff;box-shadow:0 0 10px #26d8ff88}.real-stems-grid [data-stem-mute].active{background:#eb3459;color:#fff;border-color:#ff7590;box-shadow:0 0 10px #eb345988}.stem-reset{display:block;width:100%;margin-top:5px;background:#111a20;color:#b7c8d0}.interface-3d .real-stems-panel{border-color:#596873;background:linear-gradient(#20272d,#080b0e);box-shadow:inset 0 1px #ffffff17,0 4px 10px #000}.mini-main-decks .real-stems-panel{display:none}
.deck-lcd{display:grid;grid-template-columns:1fr 90px;min-height:72px;margin:7px 10px 0;overflow:hidden;border:1px solid #050607;border-radius:6px;background:#05070a;box-shadow:inset 0 0 18px #000,0 0 0 1px #3b4650}.deck-lcd canvas{width:100%;height:72px}.deck-lcd>div{display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid #303943;background:linear-gradient(#141a21,#07090c)}.deck-lcd b{color:var(--deck);font:800 12px Orbitron;text-shadow:0 0 9px var(--deck)}.deck-lcd span{margin-top:6px;color:#71808d;font:700 6px Orbitron}.interface-3d .deck-lcd{border-color:#69737e;box-shadow:inset 0 0 20px #000,0 4px 9px #000}.mini-main-decks .deck-lcd{min-height:34px;margin:3px;grid-template-columns:1fr}.mini-main-decks .deck-lcd canvas{height:34px}.mini-main-decks .deck-lcd>div{display:none}
.hardware-layout{grid-template-columns:minmax(390px,1fr) 330px minmax(390px,1fr)!important}.hardware-layout .pro-center-mixer{align-self:stretch;resize:none;overflow:hidden;min-height:0;max-height:none;padding:13px 11px;background:linear-gradient(145deg,#282e35,#11151a 48%,#050608);border:1px solid #65707b;border-radius:9px;box-shadow:inset 0 1px #ffffff2d,inset 0 -20px 35px #0008,0 10px 24px #000}.hardware-layout .pro-center-mixer:after{display:none}.pro-center-mixer .mixer-title{padding:8px;border:1px solid #39434d;border-radius:5px;background:#080b0e;color:#5de5ff;text-shadow:0 0 10px #26d9ff}.mixer-top-row{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;gap:7px;margin:10px 0}.mixer-top-row>button{height:34px;border:1px solid #57626e;border-radius:5px;background:linear-gradient(#343b43,#101419);color:#eef4f8;font:800 8px Orbitron;box-shadow:inset 0 1px #ffffff30,0 3px 5px #000}.mixer-top-row .browse-control{transform:scale(.82)}.pro-meter-screen{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;min-height:105px;padding:8px;border:1px solid #35404a;border-radius:6px;background:radial-gradient(circle,#101b20,#020405 72%);box-shadow:inset 0 0 20px #000}.pro-meter-screen .meters{height:84px;margin:0;padding:5px;border:0;background:transparent}.pro-meter-screen .meters i{width:12px;box-shadow:0 0 7px #3eff7c}.pro-meter-screen strong{writing-mode:vertical-rl;color:#dbe5eb;font:700 7px Orbitron}.pro-meter-screen small{position:absolute;left:0;right:0;bottom:3px;color:#5f717b;font-size:6px}.mixer-channel-eq{display:grid;grid-template-columns:1fr 60px 1fr;gap:7px;margin-top:9px}.mixer-channel{display:grid;gap:5px;padding:7px;border:1px solid #3e4852;border-radius:6px;background:linear-gradient(90deg,#07090c,#20262c,#07090c);box-shadow:inset 0 0 10px #000}.mixer-channel>b{font:800 7px Orbitron}.mixer-channel.channel-a>b{color:#ff9b32}.mixer-channel.channel-b>b{color:#ff426c}.mixer-channel label{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:4px;color:#aab5bf;font:700 6px Orbitron}.mixer-channel input{min-width:0;width:100%;height:13px;accent-color:#28dfff}.channel-a input{accent-color:#ff7a00}.channel-b input{accent-color:#ff174f}.mixer-channel-eq .master-knob{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px;border:1px solid #3b4650;border-radius:6px;background:#080b0e;color:#64e8ff;font:700 7px Orbitron}.mixer-channel-eq .master-knob input{appearance:slider-vertical;width:25px;height:105px;margin:7px 0;accent-color:#29ddff}.pro-center-mixer .channel-faders{height:165px;margin-top:9px;padding:9px 15px;border:1px solid #3e4852;border-radius:7px;background:repeating-linear-gradient(90deg,#080a0d 0 48%,#303841 49% 50%,#080a0d 51% 100%);box-shadow:inset 0 0 15px #000}.pro-center-mixer .channel-faders input{height:135px;width:48px}.pro-center-mixer .channel-faders label:first-child input{accent-color:#ff7a00}.pro-center-mixer .channel-faders label:last-child input{accent-color:#ff174f}.pro-center-mixer .cue-row{margin-top:8px}.pro-center-mixer .cue-row button{border-color:#5c6874;border-radius:5px;background:linear-gradient(#323a43,#0e1217);font:800 8px Orbitron;box-shadow:inset 0 1px #ffffff28}.pro-center-mixer .cue-row button.on{background:#16cfff;color:#031014;box-shadow:0 0 12px #16cfff}.pro-center-mixer .head-controls{padding:7px;border:1px solid #34404a;border-radius:6px;background:#0a0d11}.pro-center-mixer .cross-label{margin-top:8px;padding:9px;border:1px solid #4a5661;border-radius:6px;background:#080b0e;color:#e1e8ed;font:800 7px Orbitron}.pro-center-mixer .cross-label input{height:18px;filter:drop-shadow(0 0 5px #27ddff)}.interface-white .pro-center-mixer,.interface-white .mixer-channel,.interface-white .pro-meter-screen,.interface-white .pro-center-mixer .channel-faders{background:#e8edf3!important;color:#111!important;border-color:#8995a3}.mini-main-decks .hardware-layout{grid-template-columns:1fr 155px 1fr!important}.mini-main-decks .mixer-channel-eq,.mini-main-decks .pro-meter-screen small{display:none}.mini-main-decks .pro-center-mixer{height:165px!important}


/* --- BUNDLED: headphones-console-v74.css --- */
.mini-main-decks .headphone-console {
  display: grid !important;
  grid-template-columns: 28px 46px 28px !important;
  gap: 4px !important;
  min-height: 46px !important;
  margin: 2px 0 !important;
  padding: 1px !important;
}
.mini-main-decks .headphone-deck-select { width: 26px !important; height: 24px !important; }
.mini-main-decks .headphones-rotary { width: 43px !important; height: 43px !important; border-width: 3px !important; }
.mini-main-decks .headphones-rotary span { font-size: 10px !important; }
.mini-main-decks .headphones-rotary b { font-size: 3px !important; }
.fx-bank-nav { display:none; grid-template-columns:34px 1fr 34px; gap:5px; align-items:center; margin:4px auto; width:min(260px,92%); }
.fx-pads-visible .fx-bank-nav { display:grid; }
.fx-bank-nav button { height:25px; border:1px solid #ff3c66; border-radius:5px; background:linear-gradient(#3a101a,#100307); color:#ff7592; font:900 13px Orbitron; box-shadow:0 0 9px #ff174744; }
.fx-bank-nav strong { color:#61e8ff; text-align:center; font:800 7px Orbitron; letter-spacing:1px; }
.fx-pads-visible .performance button { font-size:6px; line-height:1.15; }
.fx-pads-visible .performance .v4-extra-pad { display:block !important; }
.mini-main-decks .fx-bank-nav { width:120px; grid-template-columns:22px 1fr 22px; margin:1px auto; }
.mini-main-decks .fx-bank-nav button { height:18px; font-size:9px; }
.mini-main-decks .fx-bank-nav strong { font-size:4px; }
#waveA,#waveB,#deckWaveA,#deckWaveB { cursor:ew-resize; touch-action:none; }
#waveA:hover,#deckWaveA:hover { filter:brightness(1.25) drop-shadow(0 0 5px #ff7a00); }
#waveB:hover,#deckWaveB:hover { filter:brightness(1.25) drop-shadow(0 0 5px #ff174f); }


/* --- BUNDLED: professional-admin-history-v79.css --- */
.studio-grid { grid-template-columns:minmax(360px,1fr) minmax(360px,1fr) minmax(270px,.72fr) !important; align-items:stretch; }
.studio-history-panel { min-width:0; max-height:475px; display:flex; flex-direction:column; padding:12px; border:1px solid #354253; border-radius:8px; background:linear-gradient(145deg,#111722,#06090e); box-shadow:inset 0 0 18px #000; overflow:hidden; }
.studio-history-panel>header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.studio-history-panel header span { color:#ffb135; font:800 7px Orbitron; letter-spacing:2px; }
.studio-history-panel h3 { margin:3px 0 0; color:#fff; font:900 13px Orbitron; }
.studio-history-panel header button { padding:6px 9px; border:1px solid #ff3d5d; background:#2a0810; color:#ff7790; border-radius:5px; font-size:7px; }
.history-stats { display:grid; grid-template-columns:1fr 1.45fr; gap:7px; margin:10px 0; }
.history-stats strong { display:grid; place-items:center; padding:8px 4px; border:1px solid #314251; border-radius:6px; background:#060a0f; }
.history-stats b { color:#56e8ff; font:900 15px Orbitron; text-shadow:0 0 9px #27dfff; }
.history-stats small { color:#8e9baa; font:700 6px Orbitron; }
.studio-history-list { min-height:180px; flex:1; overflow-y:auto; scroll-behavior:smooth; padding-right:4px; scrollbar-color:#ff9e22 #090c11; }
.studio-history-list article { display:grid; grid-template-columns:25px minmax(0,1fr); gap:7px; align-items:center; padding:8px 5px; border-bottom:1px solid #26313d; }
.studio-history-list article>b { color:#ff9f22; font:900 9px Orbitron; }
.studio-history-list article strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#eef5fb; font-size:9px; }
.studio-history-list article small { display:block; margin-top:3px; color:#7f8c9d; font-size:6px; }
.advanced-settings .settings-grid fieldset[data-feature] { border-color:#31556a; background:linear-gradient(145deg,#0b1820,#070b10); }
.advanced-settings .settings-grid fieldset[data-feature] legend { color:#5de7ff; font:800 8px Orbitron; }
.advanced-settings [data-pro-setting][type="checkbox"] { accent-color:#32e873; }
@media(max-width:1250px){.studio-grid{grid-template-columns:1fr 1fr!important}.studio-history-panel{grid-column:1/-1;max-height:300px}.advanced-settings .settings-grid{grid-template-columns:repeat(2,minmax(220px,1fr))!important}}
@media(max-width:760px){.studio-grid{grid-template-columns:1fr!important}.studio-history-panel{grid-column:auto}.advanced-settings .settings-grid{grid-template-columns:1fr!important}}


/* --- BUNDLED: mixer-lite.css --- */
.hardware-layout .pro-center-mixer {
  height: auto !important;
  min-height: 760px !important;
}

.mini-main-decks .pro-center-mixer {
  height: 165px !important;
  min-height: 165px !important;
}


/* --- BUNDLED: web-3d-controls.css --- */
/* PulseDeck Web — hardware-style 3D controls */
.hardware-layout .deck,
.hardware-layout .pro-center-mixer {
  border: 1px solid #4b525c !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 18%),
    linear-gradient(180deg, #242a31 0%, #151a20 46%, #0d1116 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 5px rgba(0,0,0,.75),
    0 8px 18px rgba(0,0,0,.55) !important;
}

.hardware-layout button {
  position: relative;
  border: 1px solid #020305 !important;
  color: #e9edf2;
  background: linear-gradient(180deg, #3d444d 0%, #252b32 42%, #11151a 48%, #20262c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 2px rgba(0,0,0,.78),
    0 3px 0 #050608,
    0 5px 8px rgba(0,0,0,.55) !important;
  text-shadow: 0 1px 2px #000;
  transition: transform 70ms ease, filter 90ms ease, box-shadow 90ms ease;
}

.hardware-layout button:hover {
  filter: brightness(1.18);
}

.hardware-layout button:active,
.hardware-layout button.active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.8),
    inset 0 0 12px rgba(255,255,255,.08),
    0 1px 0 #020304 !important;
}

.transport {
  min-height: 84px;
  align-items: center !important;
}

.transport .play {
  justify-self: center;
  width: 76px !important;
  min-width: 76px;
  height: 76px !important;
  padding: 0 !important;
  border: 3px solid #152019 !important;
  border-radius: 50% !important;
  color: #f5fff7 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  background:
    radial-gradient(circle at 38% 28%, #aaffae 0 5%, #44ce58 19%, #168e31 48%, #073b15 72%, #06150b 100%) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.65),
    inset 0 -7px 10px rgba(0,0,0,.75),
    0 0 0 3px #070a08,
    0 0 0 6px #50ff69,
    0 5px 0 #06160a,
    0 8px 16px rgba(0,0,0,.8),
    0 0 24px rgba(68,255,98,.45) !important;
}

.transport .play.playing {
  color: #fff !important;
  filter: brightness(1.25);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.8),
    0 0 0 3px #070a08,
    0 0 0 6px #7bff8b,
    0 0 30px rgba(64,255,94,.8) !important;
}

.transport .cue {
  justify-self: center;
  width: 62px !important;
  min-width: 62px;
  height: 62px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #fff4dc !important;
  font-weight: 900 !important;
  background: radial-gradient(circle at 38% 28%, #5f5140, #2b251d 40%, #14100b 72%, #080706) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.32),
    inset 0 -6px 8px #000,
    0 0 0 3px #080909,
    0 0 0 6px #ff941f,
    0 5px 0 #261202,
    0 8px 14px #000,
    0 0 18px rgba(255,139,22,.38) !important;
}

.deck-a .transport .sync,
.deck-a .performance button.active,
.deck-a .pad-mode-buttons button.active {
  color: #ffad3d !important;
  border-color: #ff8500 !important;
  box-shadow: inset 0 0 10px #ff850033, 0 3px 0 #080402, 0 0 10px #ff850044 !important;
}

.deck-b .transport .sync,
.deck-b .performance button.active,
.deck-b .pad-mode-buttons button.active {
  color: #ff668a !important;
  border-color: #ff2458 !important;
  box-shadow: inset 0 0 10px #ff245833, 0 3px 0 #080204, 0 0 10px #ff245844 !important;
}

.performance button {
  min-height: 48px;
  border-radius: 6px !important;
  font-weight: 800;
}

.deck-a .performance button {
  border-bottom: 3px solid #ff8500 !important;
}

.deck-b .performance button {
  border-bottom: 3px solid #ff2458 !important;
}

.pad-mode-buttons button,
.transport button:not(.play):not(.cue) {
  min-height: 36px;
  border-radius: 5px !important;
  font-weight: 800;
}

.pro-center-mixer .mixer-top-row button,
.pro-center-mixer .cue-row button {
  border-radius: 5px !important;
  color: #80ecff !important;
  border-bottom: 3px solid #32d9f4 !important;
}

.hardware-layout input[type="range"] {
  accent-color: #4ddaf5;
}

.hardware-layout input[type="range"]::-webkit-slider-runnable-track {
  height: 9px;
  border: 1px solid #050608;
  border-radius: 2px;
  background: linear-gradient(180deg, #050608, #1d2329 52%, #050608);
  box-shadow: inset 0 1px 3px #000, 0 1px 0 #4a5159;
}

.hardware-layout input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 31px;
  margin-top: -12px;
  border: 1px solid #050608;
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(90deg, #090b0d 0 18%, #c4c9cd 19% 28%, #4c5359 29% 44%, #f2f3f4 45% 55%, #4c5359 56% 72%, #c4c9cd 73% 82%, #090b0d 83%);
  box-shadow: inset 0 1px 0 #fff9, inset 0 -3px 4px #000b, 0 3px 5px #000;
}

.eq-strip input[type="range"]::-webkit-slider-thumb,
.mixer-channel input[type="range"]::-webkit-slider-thumb,
.head-controls input[type="range"]::-webkit-slider-thumb {
  width: 19px;
  height: 19px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ecf2f5, #555d65 35%, #15191e 70%, #050607);
}

.interface-white .hardware-layout button {
  color: #10151a;
  text-shadow: 0 1px #fff;
  background: linear-gradient(180deg, #fff, #cfd4d8 45%, #929aa1 50%, #e9ecee) !important;
}

.login-reset-password {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d6aa39;
  border-radius: 6px;
  color: #f0cb62;
  background: linear-gradient(180deg, #302712, #100d08);
  font-weight: 900;
  cursor: pointer;
}

.login-reset-password:hover {
  color: #111;
  background: linear-gradient(180deg, #ffe99b, #c99020);
}


/* --- BUNDLED: web-fit-screen.css --- */
/* Fit the complete console inside the viewport without an internal horizontal bar. */
html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.dj-app,
.controller-grille,
.hardware-layout {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.hardware-layout {
  grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  resize: none !important;
}

.hardware-layout > .deck,
.hardware-layout > .pro-center-mixer {
  width: 100%;
  min-width: 0;
  height: auto !important;
}

.hardware-layout .pro-center-mixer {
  min-height: 650px !important;
  padding: 10px 8px !important;
}

.pro-center-mixer .mixer-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mixer-height-controls {
  display: flex;
  gap: 5px;
}

.pro-center-mixer .mixer-height-controls button {
  width: 27px;
  height: 25px;
  min-height: 0;
  padding: 0 !important;
  border: 1px solid #38dffb !important;
  border-radius: 5px !important;
  color: #8becff;
  background: linear-gradient(180deg, #27313a, #080b0e) !important;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.pro-center-mixer .mixer-height-controls button:hover {
  color: #071014;
  background: #55e5ff !important;
}

.deck-a-appearance,
.deck-b-height-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.deck-height-controls {
  display: flex;
  gap: 4px;
}

.hardware-layout .deck-height-controls button {
  width: 25px;
  height: 24px;
  min-height: 0;
  padding: 0 !important;
  border: 1px solid var(--deck) !important;
  border-radius: 5px !important;
  color: var(--deck);
  background: linear-gradient(180deg, #303740, #090c10) !important;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.hardware-layout .deck-height-controls button:hover {
  color: #080a0d;
  background: var(--deck) !important;
}

.hardware-layout .deck-body {
  min-height: 218px;
  padding: 7px 10px;
}

.hardware-layout .platter {
  width: 205px;
  height: 205px;
}

.deck-lcd {
  min-width: 0;
}

.deck-lcd canvas {
  max-width: 100%;
}

.master-waveforms {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.transport {
  min-height: 70px;
  padding: 7px !important;
  gap: 5px !important;
}

.transport .play {
  width: 64px !important;
  min-width: 64px;
  height: 64px !important;
}

.transport .cue {
  width: 52px !important;
  min-width: 52px;
  height: 52px !important;
}

.pro-center-mixer .channel-faders {
  height: 135px;
}

.pro-center-mixer .channel-faders input {
  height: 108px;
}

@media (max-width: 1350px) {
  .hardware-layout {
    grid-template-columns: minmax(0, 1fr) 245px minmax(0, 1fr) !important;
  }

  .hardware-layout .platter {
    width: 175px;
    height: 175px;
  }

  .hardware-layout .deck-body {
    grid-template-columns: 52px minmax(0, 1fr) 88px;
    min-height: 190px;
  }

  .hardware-layout .deck-b .deck-body {
    grid-template-columns: 88px minmax(0, 1fr) 52px;
  }
}

.mini-main-decks .hardware-layout {
  grid-template-columns: minmax(0, 1fr) 155px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.mini-main-decks .hardware-layout .pro-center-mixer {
  min-height: 165px !important;
}


/* --- BUNDLED: rainbow-platter.css --- */
/* Rainbow 3D LED rings for both platters. */
.hardware-layout .platter-upload-trigger {
  display: none !important;
}

.hardware-layout .platter {
  isolation: isolate;
  overflow: visible;
}

.hardware-layout .platter::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: -10px;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  background: conic-gradient(
    from 0deg,
    #ff174f,
    #ff7a00,
    #ffe600,
    #31ff65,
    #20e6ff,
    #2867ff,
    #a829ff,
    #ff2abf,
    #ff174f
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 8px #28dfff)
    drop-shadow(0 0 13px #ff2a76);
  animation: platter-rainbow-led 1.8s linear infinite;
}

.hardware-layout .platter::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -13px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    #ff174f55,
    #ffae0055,
    #55ff6655,
    #25dcff55,
    #733cff55,
    #ff2bb855,
    #ff174f55
  );
  filter: blur(11px);
  animation: platter-rainbow-led 1.8s linear infinite;
}

@keyframes platter-rainbow-led {
  to {
    transform: rotate(360deg);
  }
}

.mini-main-decks .hardware-layout .platter::after {
  inset: -5px;
  padding: 3px;
}

.mini-main-decks .hardware-layout .platter::before {
  inset: -7px;
  filter: blur(6px);
}


/* --- BUNDLED: floating-decks.css --- */
.deck-detach-button {
  width: 30px;
  height: 24px;
  min-height: 0;
  padding: 0 !important;
  border: 1px solid var(--deck) !important;
  border-radius: 5px !important;
  color: var(--deck) !important;
  background: linear-gradient(180deg, #303740, #090c10) !important;
  font-size: 13px !important;
  cursor: pointer;
}

.deck-detach-button.active {
  color: #071014 !important;
  background: var(--deck) !important;
}

.deck-floating-placeholder {
  min-width: 0;
  min-height: 420px;
  border: 1px dashed #485361;
  border-radius: 10px;
  background: #080b0f88;
}

.hardware-layout .deck.floating-deck {
  position: fixed !important;
  z-index: 80 !important;
  width: min(560px, 46vw) !important;
  min-width: 390px !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 20px) !important;
  overflow: auto !important;
  resize: both !important;
  box-shadow: 0 24px 70px #000, 0 0 0 2px var(--deck), 0 0 25px color-mix(in srgb, var(--deck) 45%, transparent) !important;
}

.floating-deck .deck-head {
  cursor: grab;
  user-select: none;
}

.floating-deck.deck-dragging .deck-head {
  cursor: grabbing;
}

@media (max-width: 900px) {
  .hardware-layout .deck.floating-deck {
    width: calc(100vw - 20px) !important;
    min-width: 0 !important;
  }
}


/* --- BUNDLED: laptop-15-fit.css --- */
/* Optimized layout for common 15-inch laptop displays. */
@media (max-width: 1500px), (max-height: 850px) {
  .topbar {
    height: 52px;
    padding: 0 10px;
  }

  .logo {
    font-size: 16px;
  }

  .top-actions {
    gap: 5px;
  }

  .top-actions button,
  .outline,
  .icon-btn {
    padding: 6px 8px;
    font-size: 9px;
  }

  .notice {
    padding: 4px 12px;
    font-size: 9px;
  }

  .dj-app {
    padding: 6px;
  }

  .master-waveforms,
  .master-waveforms canvas {
    height: 48px;
  }

  .controller-grille {
    height: 48px;
    margin-top: 5px;
    border-width: 1px;
  }

  .controller-grille strong {
    font-size: 17px;
  }

  .controller-grille small {
    font-size: 6px;
  }

  .hardware-layout {
    grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .hardware-layout .deck-head {
    min-height: 42px;
    padding: 5px 7px;
    gap: 6px;
  }

  .deck-head strong {
    font-size: 10px;
  }

  .deck-head small,
  .deck-head > span:last-child {
    font-size: 7px;
  }

  .source-tabs {
    padding: 4px 6px 0;
  }

  .source {
    padding: 4px 6px;
    font-size: 7px;
  }

  .deck-lcd {
    height: 37px !important;
    min-height: 37px;
    max-height: 37px;
  }

  .deck-lcd canvas {
    height: 35px !important;
  }

  .hardware-layout .deck-body {
    min-height: 174px;
    padding: 5px 7px;
  }

  .hardware-layout .platter {
    width: 164px;
    height: 164px;
    border-width: 5px;
  }

  .pitch-box {
    height: 168px;
  }

  .pitch-box input {
    height: 112px;
  }

  .eq-strip {
    gap: 3px;
  }

  .pad-mode-buttons {
    width: 190px;
    margin-bottom: 4px;
  }

  .pad-mode-buttons button {
    padding: 4px 2px;
  }

  .transport {
    min-height: 61px;
    padding: 5px !important;
  }

  .transport .play {
    width: 54px !important;
    min-width: 54px;
    height: 54px !important;
    font-size: 10px !important;
  }

  .transport .cue {
    width: 46px !important;
    min-width: 46px;
    height: 46px !important;
    font-size: 9px !important;
  }

  .transport button:not(.play):not(.cue) {
    min-height: 31px;
    font-size: 8px;
  }

  .hardware-layout .pro-center-mixer {
    padding: 6px !important;
  }

  .pro-center-mixer .mixer-title {
    padding: 5px;
    font-size: 9px;
  }

  .mixer-top-row {
    margin: 5px 0;
  }

  .pro-meter-screen {
    min-height: 70px;
  }

  .pro-meter-screen .meters {
    height: 58px;
  }

  .mixer-channel-eq {
    margin-top: 5px;
  }

  .mixer-channel {
    gap: 3px;
    padding: 5px;
  }

  .mixer-channel-eq .master-knob input {
    height: 75px;
  }

  .pro-center-mixer .channel-faders {
    height: 108px;
    margin-top: 5px;
    padding: 6px 10px;
  }

  .pro-center-mixer .channel-faders input {
    height: 84px;
  }

  .pro-center-mixer .cue-row,
  .pro-center-mixer .cross-label {
    margin-top: 4px;
  }

  .pro-center-mixer .head-controls,
  .pro-center-mixer .cross-label {
    padding: 5px;
  }

  .performance-studio,
  .browser {
    margin-top: 7px;
  }
}

@media (max-width: 1200px) {
  .hardware-layout {
    grid-template-columns: minmax(0, 1fr) 205px minmax(0, 1fr) !important;
  }

  .hardware-layout .platter {
    width: 145px;
    height: 145px;
  }

  .top-actions {
    overflow-x: auto;
    scrollbar-width: none;
  }
}


/* --- BUNDLED: deck-playlist-focus.css --- */
.deck-playlist-focus .master-waveforms,
.deck-playlist-focus .controller-grille,
.deck-playlist-focus .hardware-layout > .pro-center-mixer,
.deck-playlist-focus .performance-studio,
.deck-playlist-focus .auxiliary-decks {
  display: none !important;
}

.deck-playlist-focus .hardware-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.deck-playlist-focus .browser {
  margin-top: 7px;
}

.focus-deck-playlist-btn {
  border-color: #9c72ff !important;
  color: #cdbaff !important;
  background: linear-gradient(180deg, #261b43, #0c0913) !important;
  font-weight: 800 !important;
}

.focus-deck-playlist-btn.active {
  border-color: #55e5ff !important;
  color: #071014 !important;
  background: #55e5ff !important;
}


/* --- BUNDLED: reference-console-v49.css --- */
/* Visual proportions inspired by the supplied compact DJ layout. No behavior changes. */
body {
  background: #050609 !important;
}

.hardware-layout {
  grid-template-columns: minmax(0, 1fr) 245px minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #17192c !important;
}

.hardware-layout .deck,
.hardware-layout .pro-center-mixer {
  border-color: #292c45 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #202239 0%, #17192c 55%, #11131f 100%) !important;
  box-shadow: inset 0 1px #45496355, inset 0 -1px #000 !important;
}

.hardware-layout .deck-head {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #353951 !important;
  border-radius: 0 !important;
  background: #17192c !important;
}

.deck-a .deck-label,
.deck-a .deck-head strong {
  color: #ff8b00 !important;
}

.deck-b .deck-label,
.deck-b .deck-head strong {
  color: #ff315f !important;
}

.hardware-layout .deck-body {
  min-height: 198px !important;
  background: #191b30;
}

.hardware-layout .platter {
  width: 184px !important;
  height: 184px !important;
  border-width: 3px !important;
  background-color: #08090d !important;
  box-shadow: 0 7px 16px #000, inset 0 0 0 3px #25293a !important;
}

.deck-lcd {
  margin: 0 8px;
  border-color: #3b3f57 !important;
  border-radius: 0 !important;
  background: #111321 !important;
}

.source-tabs {
  background: #11131f;
}

.source.active {
  color: #fff !important;
  background: #363a4d !important;
}

.eq-strip {
  padding: 5px;
  border-left: 1px solid #303349;
  border-right: 1px solid #0b0c13;
}

.pad-mode-buttons {
  width: calc(100% - 24px) !important;
}

.transport {
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #34384e !important;
  border-radius: 0 !important;
  background: #11131f !important;
}

.transport .play {
  width: 84px !important;
  min-width: 70px !important;
  height: 50px !important;
  border-radius: 3px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #686b76, #373a45) !important;
  box-shadow: inset 0 1px #ffffff55, 0 2px 4px #000 !important;
}

.transport .cue {
  width: 62px !important;
  min-width: 52px !important;
  height: 50px !important;
  border-radius: 3px !important;
  box-shadow: inset 0 1px #ffffff33, 0 2px 4px #000 !important;
}

.hardware-layout .pro-center-mixer {
  padding: 7px !important;
}

.pro-center-mixer .mixer-title {
  border: 0 !important;
  border-bottom: 1px solid #383b51 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.mixer-channel,
.pro-meter-screen,
.pro-center-mixer .channel-faders,
.pro-center-mixer .head-controls,
.pro-center-mixer .cross-label {
  border-color: #363a50 !important;
  background-color: #11131f !important;
}

.browser {
  margin-top: 0 !important;
  border: 0 !important;
  border-top: 2px solid #262a39 !important;
  border-radius: 0 !important;
  background: #020304 !important;
}

.browser > aside,
.browser .library,
.browser .library-head {
  background: #050607 !important;
}

.browser tbody tr:hover {
  background: #17191e !important;
}

@media (max-width: 1400px) {
  .hardware-layout {
    grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr) !important;
  }

  .hardware-layout .platter {
    width: 160px !important;
    height: 160px !important;
  }
}


/* --- BUNDLED: deck-zoom-v50.css --- */
/* The percentage control scales only Deck A and Deck B. */
.hardware-layout > .deck:not(.floating-deck) {
  zoom: var(--deck-panel-zoom, 1);
}

.zoom-controls span {
  min-width: 48px;
}

.zoom-controls::before {
  content: "DECK";
  padding-left: 7px;
  color: #7f8a9d;
  font: 700 7px Orbitron, sans-serif;
}

.floating-deck {
  zoom: 1 !important;
}


/* --- BUNDLED: neon-menu-autodj-v51.css --- */
#autoDjBtn {
  border: 1px solid #ff294d !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ef2345, #8d071e) !important;
  box-shadow: inset 0 1px #ff9bac88, 0 0 12px #ff173f55 !important;
  font-weight: 900 !important;
}

#autoDjBtn.active {
  border-color: #80ff9b !important;
  color: #041309 !important;
  background: linear-gradient(180deg, #94ffad, #20e85b 48%, #07972f) !important;
  box-shadow: inset 0 1px #fff, 0 0 8px #65ff88, 0 0 22px #27ff62, 0 0 38px #27ff6277 !important;
  text-shadow: 0 1px #fff8 !important;
}

.browser > aside .library-actions > button,
.browser > aside .library-actions > select,
.browser > aside .library-actions > .upload,
.browser > aside .playlist-folder {
  position: relative;
  transition: transform .12s ease, color .12s ease, box-shadow .12s ease, filter .12s ease;
}

.browser > aside .library-actions > button:hover,
.browser > aside .library-actions > select:hover,
.browser > aside .library-actions > .upload:hover,
.browser > aside .playlist-folder:hover {
  border: 1px solid transparent !important;
  color: #fff !important;
  background:
    linear-gradient(180deg, #242938, #080b10) padding-box,
    conic-gradient(from var(--neon-angle, 0deg), #ff174f, #ff8a00, #fff000, #35ff67, #20e5ff, #6541ff, #ff2bc2, #ff174f) border-box !important;
  box-shadow: inset 0 1px #ffffff44, 0 4px 0 #020304, 0 0 9px #22e6ff, 0 0 17px #ff2bb877 !important;
  transform: translateY(-2px) perspective(180px) rotateX(3deg);
  filter: saturate(1.35);
}


/* --- BUNDLED: play-neon-focus-v52.css --- */
.deck-playlist-focus .hardware-layout > .pro-center-mixer,
.deck-playlist-focus .pro-center-mixer {
  display: none !important;
  visibility: hidden !important;
}

.deck-playlist-focus .hardware-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.hardware-layout .transport .play {
  border: 1px solid #ff294d !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ed2848, #8b081e) !important;
  box-shadow: inset 0 1px #ffa1b088, 0 0 8px #ff173f, 0 0 18px #ff173f66 !important;
  text-shadow: 0 1px 2px #000 !important;
}

.hardware-layout .transport .play.is-playing {
  border-color: #8aff9f !important;
  color: #031308 !important;
  background: linear-gradient(180deg, #a6ffb7, #27ed61 48%, #07992f) !important;
  box-shadow: inset 0 1px #fff, 0 0 8px #72ff91, 0 0 22px #24ff60, 0 0 36px #24ff6077 !important;
  text-shadow: 0 1px #fff9 !important;
}


/* --- BUNDLED: playlist-accordion-v53.css --- */
.library-head {
  gap: 12px;
}

.library-playlist-accordion {
  position: relative;
  margin-left: auto;
}

.library-playlist-accordion > summary {
  display: grid;
  place-items: center;
  width: 132px;
  height: 50px;
  border: 1px solid #ffe14b;
  border-radius: 6px;
  color: #241900;
  background: linear-gradient(180deg, #fff28a, #f0c41d 48%, #b77b00);
  box-shadow: inset 0 2px #fffbbd, inset 0 -5px 8px #71440099, 0 4px 0 #5c3900, 0 0 15px #ffd72f66;
  font: 900 11px Orbitron, sans-serif;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.library-playlist-accordion > summary::-webkit-details-marker {
  display: none;
}

.library-playlist-accordion[open] > summary {
  border-color: #ffb229;
  color: #1a0900;
  background: linear-gradient(180deg, #ffc15a, #ff7a00 52%, #a83300);
  box-shadow: inset 0 2px #ffe2a2, inset 0 -5px 8px #6c1800aa, 0 2px 0 #5a1700, 0 0 20px #ff7900aa;
  transform: translateY(2px);
}

.playlist-accordion-panel {
  position: absolute;
  z-index: 35;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: 230px;
  gap: 7px;
  padding: 10px;
  border: 1px solid #ff8a20;
  border-radius: 8px;
  background: linear-gradient(145deg, #20232d, #080a0e);
  box-shadow: 0 16px 35px #000, 0 0 18px #ff760055;
}

.playlist-accordion-panel select,
.playlist-accordion-panel button {
  width: 100%;
  min-height: 37px;
  padding: 8px 10px;
  border: 1px solid #434b5a;
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(180deg, #2c323c, #101318);
  text-align: left;
  cursor: pointer;
}

.playlist-accordion-panel button:hover,
.playlist-accordion-panel select:hover {
  border-color: #ff8a20;
  box-shadow: 0 0 12px #ff790066;
}

@media (max-width: 1050px) {
  .library-playlist-accordion > summary {
    width: 108px;
    height: 44px;
  }
}


/* --- BUNDLED: cloud-auth-v54.css --- */
.branded-login-card {
  width: min(610px, calc(100% - 30px)) !important;
  padding: 34px 42px !important;
  border: 2px solid #d9b441 !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #202630f7, #080a0ef7 62%, #171006f7) !important;
  box-shadow: 0 30px 100px #000, 0 0 42px #d6a93a66, inset 0 1px #fff3 !important;
}

.branded-login-card .modal-icon {
  display: block;
  font-size: 42px;
  text-align: center;
}

.branded-login-card h2 {
  color: #f1ce68;
  font-size: 27px;
  text-align: center;
  text-shadow: 0 0 16px #d8a82f88;
}

.branded-login-card p {
  text-align: center;
}

.branded-login-card label {
  font-size: 11px;
}

.branded-login-card input {
  min-height: 48px;
  padding: 12px 14px;
  border-color: #7b6530;
  font-size: 15px;
}

.branded-login-card .login-submit {
  min-height: 52px;
  margin-top: 9px;
  font-size: 14px;
}

#cloudLoginStatus {
  display: block;
  min-height: 20px;
  margin-top: 14px;
  color: #71eaff;
  text-align: center;
}

#cloudLoginStatus.error {
  color: #ff6982;
}

.ai-settings-card {
  display: none !important;
}

.library-playlist-accordion > summary {
  width: 105px !important;
  height: 40px !important;
  font-size: 9px !important;
}


/* --- BUNDLED: login-centered-v55.css --- */
#loginModal {
  place-items: center !important;
}

#loginModal .branded-login-card {
  position: relative !important;
  inset: auto !important;
  place-self: center !important;
  width: min(470px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 70px) !important;
  margin: auto !important;
  padding: 24px 30px !important;
  border-radius: 16px !important;
  overflow-y: auto;
  transform: none !important;
}

#loginModal .branded-login-card .modal-icon {
  font-size: 31px;
}

#loginModal .branded-login-card h2 {
  margin: 5px 0 7px;
  font-size: 21px;
}

#loginModal .branded-login-card p {
  margin: 0 0 10px;
  font-size: 9px;
}

#loginModal .branded-login-card label {
  margin: 9px 0;
}

#loginModal .branded-login-card input {
  min-height: 41px;
  padding: 9px 11px;
  font-size: 13px;
}

#loginModal .branded-login-card .login-submit {
  min-height: 44px;
  margin-top: 6px;
  font-size: 12px;
}

#cloudLoginStatus {
  margin-top: 9px;
  font-size: 9px;
}

@media (max-height: 700px) {
  #loginModal .branded-login-card {
    width: min(430px, calc(100vw - 28px)) !important;
    padding: 17px 25px !important;
  }

  #loginModal .branded-login-card .modal-icon {
    font-size: 25px;
  }
}


/* --- BUNDLED: responsive-auto-v56.css --- */
/* Automatic viewport adaptation for desktop and laptop displays. */
html,body{min-width:0;max-width:100%;overflow-x:hidden}
.deck-head #timeA,.deck-head #timeB{
  display:inline-flex!important;align-items:center;justify-content:center;
  min-width:112px;height:31px;padding:0 9px;box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--deck) 72%,#6f7a8a);
  border-radius:5px;background:#03070b;color:#f5fbff!important;
  font:800 13px/1 Orbitron,monospace!important;letter-spacing:.4px;
  text-shadow:0 0 8px var(--deck);box-shadow:inset 0 0 10px #000,0 0 8px color-mix(in srgb,var(--deck) 30%,transparent);
  opacity:1!important;visibility:visible!important;white-space:nowrap!important;
}
.deck-a-appearance,.deck-b-height-box{flex-wrap:nowrap!important;overflow:visible!important}
.zoom-controls span{min-width:68px}
.auto-transition{border-color:#ff334f!important;background:linear-gradient(#701526,#26070e)!important;color:#fff!important;box-shadow:0 0 12px #ff234777,inset 0 1px #ff9aaa66!important;animation:transition-ready 1s ease-in-out infinite}
.auto-transition.transition-active{border-color:#5cff86!important;background:linear-gradient(#28f06b,#086e2e)!important;color:#021b0a!important;box-shadow:0 0 20px #37ff78,inset 0 1px #d8ffe2!important;animation:none}
.transport .cue.cue-command{background:#ff9b24!important;color:#140900!important;box-shadow:0 0 18px #ff9b24!important}
.transport .cue.cue-double-ready{border-color:#fff36a!important;box-shadow:0 0 16px #ffe63e!important;filter:brightness(1.3)}
.hardware-layout .deck.fx-pads-visible>.performance{display:grid!important}
.hardware-layout .deck.fx-pads-visible>.performance button{animation:fx-pad-ready 1.4s ease-in-out infinite alternate}
.hardware-layout .deck.fx-pads-visible>.performance button.pad-fired{background:var(--deck)!important;color:#05070a!important;box-shadow:0 0 20px var(--deck)!important;animation:none}
@keyframes transition-ready{50%{filter:brightness(1.65);box-shadow:0 0 22px #ff2347cc,inset 0 1px #ffc3cc88}}
@keyframes fx-pad-ready{to{filter:brightness(1.35);box-shadow:0 0 10px color-mix(in srgb,var(--deck) 65%,transparent)}}

@media(max-width:1600px){
  .topbar{padding-inline:10px}.top-actions{min-width:0;overflow-x:auto;scrollbar-width:none}.top-actions::-webkit-scrollbar{display:none}
  .hardware-layout{grid-template-columns:minmax(330px,1fr) 270px minmax(330px,1fr)!important}
}
@media(max-width:1250px){
  .hardware-layout{grid-template-columns:minmax(280px,1fr) 220px minmax(280px,1fr)!important}
  .hardware-layout .deck-body{grid-template-columns:50px minmax(130px,1fr) 82px}.hardware-layout .deck-b .deck-body{grid-template-columns:82px minmax(130px,1fr) 50px}
  .library{min-width:0}.library-head{gap:8px}.library-actions{flex-wrap:wrap;justify-content:flex-end}
}
@media(max-width:1250px){.deck-head #timeA,.deck-head #timeB{min-width:96px;font-size:11px!important;padding-inline:5px}}
@media(max-width:980px){
  .topbar{position:relative;height:auto;min-height:58px;flex-wrap:wrap;gap:7px;padding-block:7px}.top-actions{width:100%;padding-bottom:3px}
  .hardware-layout{grid-template-columns:1fr!important}.hardware-layout>.deck,.hardware-layout>.pro-center-mixer{width:100%!important;zoom:1!important}
  .hardware-layout>.pro-center-mixer{order:3;max-height:720px}.browser{grid-template-columns:120px minmax(0,1fr)}
  .studio-grid{grid-template-columns:1fr}.fx-editor{order:3}
}
@media(max-height:720px) and (min-width:981px){
  .controller-grille{height:34px!important}.controller-grille strong{font-size:13px!important}.controller-grille small{display:none}
  .hardware-layout .deck-head{min-height:36px!important}.deck-lcd,.deck-lcd canvas{height:30px!important;min-height:30px!important}
}
@media(prefers-reduced-motion:reduce){.auto-transition{animation-duration:2.2s}}
/* YouTube search per deck: result is cued, never auto-started. */
.youtube-loader.open{display:grid!important;gap:6px}
.youtube-search-row,.youtube-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;width:100%}
.youtube-search-row input,.youtube-link-row input{min-width:0;width:100%}
.youtube-search-button{min-width:92px;background:#d9163d!important;color:#fff!important;box-shadow:0 0 8px #ff174d66;transition:background .2s,box-shadow .2s,transform .2s}
.youtube-search-button.searching{background:#e10e36!important;box-shadow:0 0 8px #ff174d,0 0 22px #ff174dcc;animation:youtubeSearchPulse .65s ease-in-out infinite alternate}
.youtube-search-button.found{background:#20e46b!important;color:#03150a!important;box-shadow:0 0 10px #20e46b,0 0 25px #20e46baa}
.youtube-search-button.failed{background:#ff173f!important;box-shadow:0 0 16px #ff173f}
@keyframes youtubeSearchPulse{to{transform:translateY(-1px);filter:brightness(1.35);box-shadow:0 0 14px #ff174d,0 0 34px #ff174d}}
@media(max-width:900px){.youtube-search-row,.youtube-link-row{grid-template-columns:minmax(0,1fr) 82px}.youtube-search-button{min-width:82px}}


/* --- BUNDLED: metal-pro-theme-v62.css --- */
/* PulseDeck Metal Pro — independent visual skin. No control behavior is changed. */
.interface-metal-pro{
  --metal-edge:#68717a;--metal-dark:#07090b;--metal-red:#ec243b;--metal-blue:#168dff;
  background:#050607!important;color:#e8edf2;
  background-image:radial-gradient(circle at 50% -20%,#283039 0,transparent 42%),linear-gradient(#080a0c,#030405)!important;
}
.interface-metal-pro .topbar{
  background:linear-gradient(180deg,#202429 0,#090b0d 44%,#030405 48%,#111418 100%)!important;
  border-bottom:2px solid #444b52;box-shadow:0 5px 18px #000!important;
}
.interface-metal-pro .logo{filter:drop-shadow(0 0 7px #4cdfff55)}
.interface-metal-pro .notice{background:#090b0d;color:#b8c0c8;border-color:#353b41}
.interface-metal-pro .controller-grille{
  border-color:#606870!important;background-color:#0d1013!important;
  background-image:linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(#ffffff06 1px,transparent 1px),radial-gradient(#333b43 1px,transparent 1px)!important;
  background-size:28px 28px,28px 28px,6px 6px!important;box-shadow:inset 0 1px #aeb5bb66,0 -5px 18px #000!important;
}
.interface-metal-pro .controller-grille strong{color:#dce2e6!important;font-style:italic;text-shadow:0 2px #000,0 0 10px #fff4}
.interface-metal-pro .hardware-layout{border:2px solid #636b72!important;background:#090b0d!important;gap:4px!important;box-shadow:0 14px 35px #000!important}
.interface-metal-pro .hardware-layout .deck,.interface-metal-pro .hardware-layout .pro-center-mixer{
  position:relative;border:1px solid #4d555c!important;border-radius:3px!important;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),linear-gradient(145deg,#252a2f,#080a0c 58%,#161a1e)!important;
  box-shadow:inset 0 1px #cdd2d533,inset 0 -3px 8px #000,0 5px 12px #000!important;
}
.interface-metal-pro .hardware-layout .deck:before,.interface-metal-pro .hardware-layout .pro-center-mixer:before{
  content:"";position:absolute;inset:7px;pointer-events:none;border:1px solid #ffffff0d;border-radius:2px;
}
.interface-metal-pro .deck-head{margin:6px 7px 0;padding:9px 10px!important;border:1px solid #020304!important;border-radius:3px;
  background:linear-gradient(#1c2126,#060708)!important;box-shadow:inset 0 1px #62697066,0 2px 6px #000!important}
.interface-metal-pro .deck-label{font-size:12px!important;color:#f1f3f5!important;text-shadow:0 0 8px var(--deck)}
.interface-metal-pro .deck-a .deck-label{border-left:3px solid #ff3b32;padding-left:7px}.interface-metal-pro .deck-b .deck-label{border-left:3px solid #1f98ff;padding-left:7px}
.interface-metal-pro .source-tabs{margin:0 7px;padding-top:6px;border-inline:1px solid #23282d;background:#07090b}
.interface-metal-pro .source{border:1px solid #252a2f!important;border-bottom:2px solid #8e151f!important;border-radius:2px!important;background:linear-gradient(#24292e,#08090a)!important;color:#cfd5da!important}
.interface-metal-pro .source.active{color:#fff!important;border-color:#f12b3d!important;box-shadow:inset 0 0 10px #e3213338,0 0 7px #e3213344!important}
.interface-metal-pro .deck-body{background:radial-gradient(circle at 50% 48%,#282d31 0,#0b0d0f 44%,#050607 72%)!important}
.interface-metal-pro .platter{
  border:9px solid #111417!important;background:
  repeating-conic-gradient(from 0deg,#eef1f2 0 4deg,#6f777d 5deg 9deg,#d7dcdf 10deg 14deg),
  radial-gradient(circle,#050607 0 14%,#cfd4d6 15% 48%,#4d5459 49% 52%,#b8bec1 53% 66%,#111417 67%)!important;
  box-shadow:0 0 0 3px #697178,0 0 0 6px #08090a,0 13px 24px #000,inset 0 0 0 5px #dde1e3aa,inset 0 0 32px #000!important;
}
.interface-metal-pro .platter .vinyl{inset:14%!important;border:2px solid #1a1c1e!important;background:repeating-radial-gradient(circle,#c9ced0 0 2px,#7f878c 3px 5px)!important;box-shadow:inset 0 0 18px #0008}
.interface-metal-pro .platter .label{inset:34%!important;background:radial-gradient(circle at 37% 30%,#e6ebed,#333a3f 35%,#050607 69%)!important;border:4px solid var(--deck);box-shadow:0 0 14px var(--deck),inset 0 0 8px #000!important}
.interface-metal-pro .platter.playing{animation:spin 2s linear infinite,metal-ring 1.2s ease-in-out infinite alternate!important}
@keyframes metal-ring{to{box-shadow:0 0 0 3px #aab1b7,0 0 0 7px var(--deck),0 0 26px var(--deck),0 13px 24px #000,inset 0 0 0 5px #fff9!important}}
.interface-metal-pro .eq-strip{padding:10px 8px;border:1px solid #353b40;background:linear-gradient(#171b1f,#060708);box-shadow:inset 0 1px #ffffff1c}
.interface-metal-pro .eq-strip label{color:#dce2e6!important;font-weight:800}.interface-metal-pro input[type=range]{accent-color:#df293a}
.interface-metal-pro .performance{padding:8px 12px 12px;background:#07090a;border-top:1px solid #353a3e}
.interface-metal-pro .performance button{min-height:48px!important;border:2px solid #111!important;border-radius:3px!important;color:#fff!important;font-weight:900!important;box-shadow:inset 0 2px #fff5,inset 0 -5px #0007,0 3px 5px #000!important}
.interface-metal-pro .performance button:nth-child(1){background:linear-gradient(#ff6868,#d32231)!important}.interface-metal-pro .performance button:nth-child(2){background:linear-gradient(#ffb35d,#e36125)!important}.interface-metal-pro .performance button:nth-child(3){background:linear-gradient(#5e9cff,#245ddd)!important}.interface-metal-pro .performance button:nth-child(4){background:linear-gradient(#ffe06b,#cf9b24)!important}
.interface-metal-pro .performance button:active,.interface-metal-pro .performance button.pad-fired{filter:brightness(1.45);transform:translateY(2px);box-shadow:inset 0 4px 10px #0008,0 0 20px currentColor!important}
.interface-metal-pro .pad-mode-buttons{background:#080a0b}.interface-metal-pro .pad-mode-buttons button{border-bottom:2px solid #e72d3e!important}
.interface-metal-pro .transport{border-top:2px solid #41474c!important;background:linear-gradient(#171b1e,#060708)!important}
.interface-metal-pro .transport button:not(.play):not(.cue){border:1px solid #575e64!important;background:linear-gradient(#343a40,#0a0c0e 55%,#20252a)!important}
.interface-metal-pro .transport .play{border-color:#b9c0c4!important;background:radial-gradient(circle at 35% 28%,#dfe4e6,#6f777c 34%,#202529 65%,#080a0b)!important;box-shadow:inset 0 2px #fff8,inset 0 -7px 9px #000,0 0 0 4px #101315,0 0 0 6px #42e85a,0 7px 12px #000!important}
.interface-metal-pro .transport .play.is-playing{background:radial-gradient(circle at 35% 28%,#bcffc5,#21bf45 40%,#075c22 70%)!important;box-shadow:0 0 0 4px #071009,0 0 0 7px #58ff76,0 0 25px #45ff69!important}
.interface-metal-pro .transport .cue{background:radial-gradient(circle at 35% 28%,#fff1d5,#a96622 42%,#261505 70%)!important}
.interface-metal-pro .pro-center-mixer{background:linear-gradient(90deg,#0b0d0f,#252a2e 48%,#0a0c0e 52%,#202529)!important}
.interface-metal-pro .hardware-knob{background:radial-gradient(circle at 35% 28%,#f1f3f4 0 8%,#899096 10% 22%,#171a1c 24% 54%,#b8bdc0 57% 61%,#08090a 64%)!important;box-shadow:0 4px 8px #000,0 0 0 1px #777!important}
.interface-metal-pro .meters{border:1px solid #010203;background:#050706!important;box-shadow:inset 0 0 12px #000}
.interface-metal-pro .browser,.interface-metal-pro .browser>aside,.interface-metal-pro .library-head{background:linear-gradient(#181c1f,#070809)!important;border-color:#454c52!important}
.interface-metal-pro .library table{background:#060708}.interface-metal-pro .library th{background:#15191c;color:#cdd3d8}.interface-metal-pro .library tr:nth-child(even){background:#101316}.interface-metal-pro .library tr:hover{background:#242a2f}
.interface-metal-pro .mini-deck,.interface-metal-pro .performance-studio,.interface-metal-pro .advanced-settings,.interface-metal-pro .settings-grid fieldset{background:linear-gradient(145deg,#1c2125,#070809)!important;border-color:#4c5359!important}
.interface-metal-pro select,.interface-metal-pro input,.interface-metal-pro textarea{background:#060809;color:#eef2f5;border-color:#4c535a}
@media(max-width:1250px){.interface-metal-pro .platter{border-width:6px!important}.interface-metal-pro .deck-head{margin-inline:3px}}


/* --- BUNDLED: metal-pro-v2-theme-v63.css --- */
/* PulseDeck Metal Pro V2 — full functional controller skin. */
.interface-metal-pro-v2{
  --v2-red:#ff3045;--v2-blue:#1e9bff;--v2-cyan:#38dafa;--v2-metal:#aeb5ba;
  background:#030405!important;color:#edf1f3;
  background-image:linear-gradient(90deg,#ffffff04 1px,transparent 1px),linear-gradient(#ffffff03 1px,transparent 1px),radial-gradient(circle at 50% 0,#252a2e,transparent 48%)!important;
  background-size:24px 24px,24px 24px,auto!important;
}
.interface-metal-pro-v2 .topbar{height:54px;background:linear-gradient(#1e2225,#070809 52%,#15181b)!important;border-bottom:2px solid #525960;box-shadow:0 5px 20px #000!important}
.interface-metal-pro-v2 .top-actions>button,.interface-metal-pro-v2 .zoom-controls{border:1px solid #555d63!important;background:linear-gradient(#343a3e,#090b0c 52%,#202428)!important;color:#e7ecef!important;box-shadow:inset 0 1px #fff3,0 3px 5px #000!important}
.interface-metal-pro-v2 .controller-grille{height:45px!important;border:2px solid #777f85!important;border-bottom:0!important;border-radius:5px 5px 0 0!important;background:repeating-linear-gradient(90deg,#101315 0 3px,#080a0b 3px 6px)!important;box-shadow:inset 0 1px #fff5,0 -5px 15px #000!important}
.interface-metal-pro-v2 .controller-grille strong{font-size:20px!important;color:#e9edef!important;font-style:italic;letter-spacing:-1px;text-shadow:0 2px #000}
.interface-metal-pro-v2 .controller-grille small{color:#8d969d!important}
.interface-metal-pro-v2 .hardware-layout{grid-template-columns:minmax(420px,1fr) minmax(350px,430px) minmax(420px,1fr)!important;gap:3px!important;padding:4px!important;border:3px solid #858c91!important;border-top:1px solid #4d5358!important;border-radius:0 0 5px 5px!important;background:#050607!important;box-shadow:0 16px 35px #000!important}
.interface-metal-pro-v2 .hardware-layout>.deck,.interface-metal-pro-v2 .hardware-layout>.pro-center-mixer{height:min(690px,calc(100vh - 285px))!important;min-height:575px!important;border:1px solid #596066!important;border-radius:2px!important;background:repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),linear-gradient(145deg,#252a2e,#080a0b 55%,#171b1e)!important;box-shadow:inset 0 1px #fff4,inset 0 -4px 10px #000,0 4px 10px #000!important}
.interface-metal-pro-v2 .deck-head{height:58px;box-sizing:border-box;margin:5px 6px 0;padding:7px 9px!important;border:1px solid #020303!important;border-radius:3px;background:linear-gradient(#20252a,#050607)!important;box-shadow:inset 0 1px #6b737955,0 3px 6px #000!important}
.interface-metal-pro-v2 .deck-head strong{font-size:12px!important;color:#f3f5f6}.interface-metal-pro-v2 .deck-head small{font-size:8px!important;color:#8f9aa2}
.interface-metal-pro-v2 .deck-a .deck-label{color:var(--v2-red)!important;text-shadow:0 0 10px var(--v2-red)}.interface-metal-pro-v2 .deck-b .deck-label{color:var(--v2-blue)!important;text-shadow:0 0 10px var(--v2-blue)}
.interface-metal-pro-v2 .deck-head #timeA,.interface-metal-pro-v2 .deck-head #timeB{height:28px!important;min-width:106px!important;border-color:#4e565c!important;background:#020303!important;color:#fff!important;text-shadow:0 0 8px currentColor!important}
.interface-metal-pro-v2 .source-tabs{margin:0 6px;padding:5px 6px;background:#080a0b;border:1px solid #24292d;border-top:0}
.interface-metal-pro-v2 .source{height:28px;border:1px solid #4c5359!important;border-radius:2px!important;background:linear-gradient(#33393e,#080a0b 55%,#202428)!important;color:#cbd2d7!important;box-shadow:0 2px 3px #000!important}
.interface-metal-pro-v2 .source.active{border-color:var(--deck)!important;color:#fff!important;box-shadow:inset 0 0 9px color-mix(in srgb,var(--deck) 30%,transparent),0 0 7px color-mix(in srgb,var(--deck) 45%,transparent)!important}
.interface-metal-pro-v2 .deck-lcd{margin-inline:6px;border:2px solid #010203;background:#03090c!important;box-shadow:inset 0 0 16px #000,0 1px #596168!important}
.interface-metal-pro-v2 .deck-body{min-height:285px!important;height:300px!important;padding:5px 12px!important;background:radial-gradient(circle at 50% 48%,#33383c 0,#101315 42%,#050607 70%)!important}
.interface-metal-pro-v2 .platter{width:285px!important;height:285px!important;border:10px solid #101315!important;background:repeating-conic-gradient(#e9edef 0 4deg,#777f84 5deg 9deg,#c6cccf 10deg 14deg)!important;box-shadow:0 0 0 3px #7f878d,0 0 0 7px #050607,0 14px 25px #000,inset 0 0 0 7px #f4f6f799,inset 0 0 38px #000!important}
.interface-metal-pro-v2 .platter:before{content:"";position:absolute;inset:11%;border-radius:50%;background:repeating-radial-gradient(circle,#d9dddf 0 2px,#747c81 3px 5px);box-shadow:inset 0 0 30px #0009}
.interface-metal-pro-v2 .platter .vinyl{inset:24%!important;z-index:1;border:4px solid #151719!important;background:radial-gradient(circle,#dce0e2 0 18%,#15191c 20% 34%,#838b90 36% 50%,#080a0b 52%)!important;box-shadow:0 0 0 3px var(--deck),0 0 13px var(--deck)!important}
.interface-metal-pro-v2 .platter .label{inset:39%!important;z-index:2;background:radial-gradient(circle at 35% 30%,#f7f8f8,#5f686d 30%,#080a0b 67%)!important;border:3px solid var(--deck)!important;box-shadow:0 0 13px var(--deck)!important}
.interface-metal-pro-v2 .platter.playing{animation:spin 1.8s linear infinite,v2-led 1s ease-in-out infinite alternate!important}
@keyframes v2-led{to{box-shadow:0 0 0 3px #abb2b7,0 0 0 8px var(--deck),0 0 28px var(--deck),0 14px 25px #000,inset 0 0 0 7px #fff9,inset 0 0 38px #000}}
.interface-metal-pro-v2 .pitch-box{height:270px!important;padding:8px 6px;border:1px solid #383e43;background:linear-gradient(#181c1f,#050607);box-shadow:inset 0 1px #fff2}.interface-metal-pro-v2 .pitch-box input{height:205px!important}
.interface-metal-pro-v2 .eq-strip{padding:10px 7px;border:1px solid #3f464b;background:linear-gradient(#1a1e21,#050607);box-shadow:inset 0 1px #fff2}
.interface-metal-pro-v2 .eq-strip input[type=range]{height:18px}.interface-metal-pro-v2 .eq-strip label{font-size:8px!important;font-weight:900;color:#cbd2d7!important}
.interface-metal-pro-v2 input[type=range]::-webkit-slider-runnable-track{height:8px;border:1px solid #000;background:linear-gradient(#030405,#24292d 52%,#030405);box-shadow:inset 0 2px 3px #000,0 1px #60676c}
.interface-metal-pro-v2 input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:26px;margin-top:-10px;border:1px solid #111;border-radius:2px;background:linear-gradient(90deg,#151718,#d9dddf 25%,#555d62 42%,#fff 50%,#555d62 58%,#d9dddf 75%,#151718);box-shadow:0 3px 5px #000}
.interface-metal-pro-v2 .performance{height:112px;box-sizing:border-box;gap:6px;padding:8px 12px!important;border-top:1px solid #4c5358;background:#070809!important}
.interface-metal-pro-v2 .performance button{height:45px!important;border:2px solid #0b0c0d!important;border-radius:3px!important;color:#fff!important;font-weight:900!important;text-shadow:0 1px #000;box-shadow:inset 0 2px #fff6,inset 0 -6px #0006,0 3px 5px #000!important}
.interface-metal-pro-v2 .performance button:nth-child(1){background:linear-gradient(#ff6969,#d81d35)!important}.interface-metal-pro-v2 .performance button:nth-child(2){background:linear-gradient(#ffb75f,#df622a)!important}.interface-metal-pro-v2 .performance button:nth-child(3){background:linear-gradient(#5f9fff,#235fdc)!important}.interface-metal-pro-v2 .performance button:nth-child(4){background:linear-gradient(#ffe36d,#d49b20)!important}
.interface-metal-pro-v2 .performance button.pad-fired,.interface-metal-pro-v2 .performance button:active{transform:translateY(2px);filter:brightness(1.5);box-shadow:inset 0 5px 10px #0008,0 0 20px var(--deck)!important}
.interface-metal-pro-v2 .pad-mode-buttons{margin-bottom:4px!important}.interface-metal-pro-v2 .pad-mode-buttons button{height:25px;border:1px solid #4d545a!important;border-bottom:2px solid var(--deck)!important;background:linear-gradient(#2c3236,#08090a)!important;color:#dbe0e3!important}
.interface-metal-pro-v2 .transport{height:85px;padding:8px!important;border-top:2px solid #50575d;background:linear-gradient(#1a1e21,#060708)!important}
.interface-metal-pro-v2 .transport button{background:linear-gradient(#363c41,#080a0b 52%,#22272b)!important;border:1px solid #626a70!important;box-shadow:inset 0 1px #fff4,0 4px 5px #000!important}
.interface-metal-pro-v2 .transport .play{width:68px!important;height:68px!important;min-width:68px;border-radius:50%!important;background:radial-gradient(circle at 35% 30%,#f1f3f4,#697177 42%,#15191b 70%)!important;box-shadow:inset 0 2px #fff9,inset 0 -7px #000,0 0 0 4px #080a0b,0 0 0 7px #51ec66,0 7px 12px #000!important}
.interface-metal-pro-v2 .transport .play.is-playing{background:radial-gradient(circle at 35% 30%,#c6ffce,#22c448 42%,#075a23 70%)!important;box-shadow:0 0 0 4px #071009,0 0 0 7px #59ff78,0 0 25px #4dff6d!important}
.interface-metal-pro-v2 .transport .cue{width:58px!important;height:58px!important;min-width:58px;border-radius:50%!important;background:radial-gradient(circle at 35% 30%,#fff2d5,#b36d25 42%,#261505 72%)!important;border:2px solid #ff9b2e!important}
.interface-metal-pro-v2 .pro-center-mixer{padding:8px!important;background:linear-gradient(90deg,#090b0c,#24292d 48%,#090b0c 52%,#202529)!important}
.interface-metal-pro-v2 .mixer-title{color:#edf1f3!important;font-style:italic}.interface-metal-pro-v2 .browse-control{padding:4px;border-bottom:1px solid #4d545a}.interface-metal-pro-v2 .hardware-knob{background:radial-gradient(circle at 35% 28%,#f5f6f6 0 7%,#8c9499 9% 22%,#15191b 24% 55%,#c8cdd0 58% 62%,#050607 64%)!important;box-shadow:0 4px 8px #000,0 0 0 1px #777!important}
.interface-metal-pro-v2 .meters{height:120px!important;border:2px solid #020303;background:#050706!important;box-shadow:inset 0 0 15px #000,0 1px #666!important}.interface-metal-pro-v2 .channel-faders{height:185px!important}.interface-metal-pro-v2 .channel-faders input{height:160px!important}
.interface-metal-pro-v2 .browser{border:2px solid #4e565c!important;background:#070809!important}.interface-metal-pro-v2 .browser>aside,.interface-metal-pro-v2 .library-head{background:linear-gradient(#1b1f22,#070809)!important;border-color:#4b5258!important}.interface-metal-pro-v2 .library table{background:#050607}.interface-metal-pro-v2 .library th{background:#171b1e;color:#cdd4d8}.interface-metal-pro-v2 .library tr:nth-child(even){background:#101315}.interface-metal-pro-v2 .library tr:hover{background:#22282c}
.interface-metal-pro-v2 select,.interface-metal-pro-v2 input,.interface-metal-pro-v2 textarea{background:#050708;color:#eef2f4;border-color:#4c545a}
@media(max-width:1600px){.interface-metal-pro-v2 .hardware-layout{grid-template-columns:minmax(350px,1fr) 310px minmax(350px,1fr)!important}.interface-metal-pro-v2 .platter{width:235px!important;height:235px!important}.interface-metal-pro-v2 .deck-body{height:255px!important;min-height:245px!important}.interface-metal-pro-v2 .hardware-layout>.deck,.interface-metal-pro-v2 .hardware-layout>.pro-center-mixer{min-height:535px!important}}
@media(max-width:1100px){.interface-metal-pro-v2 .hardware-layout{grid-template-columns:1fr!important}.interface-metal-pro-v2 .hardware-layout>.deck,.interface-metal-pro-v2 .hardware-layout>.pro-center-mixer{height:auto!important;min-height:560px!important}.interface-metal-pro-v2 .pro-center-mixer{order:3}}


/* --- BUNDLED: metal-pro-v4-theme-v64.css --- */
/* Metal Pro V4 — faithful full-console arrangement layered over V2. */
.v4-extra-pad{display:none}
.interface-metal-pro-v4 .topbar{height:50px!important}.interface-metal-pro-v4 .logo{font-size:19px!important}
.interface-metal-pro-v4 .controller-grille{height:34px!important}.interface-metal-pro-v4 .controller-grille strong{font-size:16px!important}.interface-metal-pro-v4 .controller-grille small{font-size:7px!important}
.interface-metal-pro-v4 .hardware-layout{grid-template-columns:minmax(430px,1fr) minmax(370px,430px) minmax(430px,1fr)!important;align-items:stretch!important}
.interface-metal-pro-v4 .hardware-layout>.deck,.interface-metal-pro-v4 .hardware-layout>.pro-center-mixer{height:690px!important;min-height:690px!important;overflow:hidden!important}
.interface-metal-pro-v4 .deck-head{height:62px!important;grid-template-columns:70px minmax(0,1fr) auto!important}
.interface-metal-pro-v4 .deck-lcd{height:58px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 110px!important}.interface-metal-pro-v4 .deck-lcd canvas{height:58px!important}
.interface-metal-pro-v4 .deck-body{height:300px!important;min-height:300px!important;grid-template-columns:72px minmax(250px,1fr) 108px!important}.interface-metal-pro-v4 .deck-b .deck-body{grid-template-columns:108px minmax(250px,1fr) 72px!important}
.interface-metal-pro-v4 .platter{width:292px!important;height:292px!important}
.interface-metal-pro-v4 .pitch-box{height:280px!important}.interface-metal-pro-v4 .pitch-box input{height:215px!important}
.interface-metal-pro-v4 .eq-strip{gap:6px!important}.interface-metal-pro-v4 .eq-strip input{width:100%!important}
.interface-metal-pro-v4 .performance{height:128px!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;grid-template-rows:repeat(2,52px)!important;gap:7px!important;padding:8px 13px!important}
.interface-metal-pro-v4 .performance .v4-extra-pad{display:block!important}
.interface-metal-pro-v4 .performance button{height:52px!important;font-size:8px!important}
.interface-metal-pro-v4 .performance button:nth-child(5){background:linear-gradient(#68f49b,#20a857)!important}.interface-metal-pro-v4 .performance button:nth-child(6){background:linear-gradient(#df83ff,#8f3ee0)!important}.interface-metal-pro-v4 .performance button:nth-child(7){background:linear-gradient(#63dfff,#258dcc)!important}.interface-metal-pro-v4 .performance button:nth-child(8){background:linear-gradient(#cb7bff,#7235c9)!important}
.interface-metal-pro-v4 .pad-mode-buttons{height:30px!important;margin:0 13px 2px!important}.interface-metal-pro-v4 .pad-mode-buttons button{height:27px!important}
.interface-metal-pro-v4 .transport{height:81px!important}
.interface-metal-pro-v4 .pro-center-mixer{display:flex!important;flex-direction:column!important;padding:7px 10px!important}
.interface-metal-pro-v4 .mixer-title{height:28px!important}.interface-metal-pro-v4 .mixer-top-row{height:58px!important}.interface-metal-pro-v4 .pro-meter-screen{height:118px!important}.interface-metal-pro-v4 .pro-meter-screen .meters{height:82px!important}
.interface-metal-pro-v4 .mixer-channel-eq{height:208px!important;grid-template-columns:1fr 82px 1fr!important}.interface-metal-pro-v4 .mixer-channel{gap:4px!important}.interface-metal-pro-v4 .mixer-channel label{font-size:7px!important}.interface-metal-pro-v4 .mixer-channel input{width:100%!important}
.interface-metal-pro-v4 .channel-faders{height:146px!important;min-height:146px!important}.interface-metal-pro-v4 .channel-faders input{height:125px!important}
.interface-metal-pro-v4 .cue-row{height:37px!important}.interface-metal-pro-v4 .head-controls{height:40px!important}.interface-metal-pro-v4 .cross-label{margin-top:3px!important}
.interface-metal-pro-v4 .performance-studio{margin-top:8px!important;border-color:#4d555b!important;background:linear-gradient(#1b1f22,#070809)!important}.interface-metal-pro-v4 .performance-studio:not(.collapsed){max-height:430px;overflow:auto}
.interface-metal-pro-v4 .browser{display:grid!important;grid-template-columns:245px minmax(0,1fr)!important;min-height:355px!important;max-height:46vh!important;margin-top:7px!important;border:2px solid #555d63!important}
.interface-metal-pro-v4 .browser>aside{display:block!important;width:auto!important;padding:10px!important;border-right:1px solid #50575d!important;background:linear-gradient(145deg,#1d2226,#070809)!important;overflow:auto!important}
.interface-metal-pro-v4 .library-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}.interface-metal-pro-v4 .library-actions button,.interface-metal-pro-v4 .playlist-folder{min-height:34px!important;border:1px solid #4e565c!important;background:linear-gradient(#30363b,#080a0b 55%,#202428)!important;color:#e9edef!important}
.interface-metal-pro-v4 .library-view-tabs{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;margin-top:9px!important}.interface-metal-pro-v4 .library-view-tabs button{text-align:left!important;min-height:34px!important}.interface-metal-pro-v4 .library-view-tabs button.active{border-left:4px solid #ff7a00!important;background:#20262b!important;color:#fff!important}
.interface-metal-pro-v4 .library{min-width:0!important;background:#050607!important;overflow:auto!important}.interface-metal-pro-v4 .library-head{position:sticky;top:0;z-index:3;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:66px!important;padding:10px 16px!important}.interface-metal-pro-v4 .library h2{font-size:20px!important}.interface-metal-pro-v4 .drop-area{min-height:46px!important;margin:7px 12px!important}.interface-metal-pro-v4 .library table{width:100%!important}.interface-metal-pro-v4 .library tbody tr{height:45px!important}
.interface-metal-pro-v4 .playlist-folders{max-height:115px!important;overflow:auto!important}
@media(max-width:1650px){.interface-metal-pro-v4 .hardware-layout{grid-template-columns:minmax(370px,1fr) 340px minmax(370px,1fr)!important}.interface-metal-pro-v4 .platter{width:245px!important;height:245px!important}.interface-metal-pro-v4 .deck-body{grid-template-columns:58px minmax(210px,1fr) 90px!important}.interface-metal-pro-v4 .deck-b .deck-body{grid-template-columns:90px minmax(210px,1fr) 58px!important}}
@media(max-width:1180px){.interface-metal-pro-v4 .hardware-layout{grid-template-columns:1fr!important}.interface-metal-pro-v4 .hardware-layout>.deck,.interface-metal-pro-v4 .hardware-layout>.pro-center-mixer{height:auto!important;min-height:650px!important}.interface-metal-pro-v4 .browser{grid-template-columns:190px minmax(0,1fr)!important}}

/* V4 fit correction: all controls stay inside the deck at common 15-inch resolutions. */
.interface-metal-pro-v4 .hardware-layout>.deck:not(.floating-deck){zoom:1!important}
.interface-metal-pro-v4 .hardware-layout{height:620px!important;min-height:620px!important;overflow:hidden!important;resize:none!important}
.interface-metal-pro-v4 .hardware-layout>.deck,.interface-metal-pro-v4 .hardware-layout>.pro-center-mixer{height:610px!important;min-height:610px!important;max-height:610px!important}
.interface-metal-pro-v4 .deck-head{height:50px!important;padding-block:5px!important}
.interface-metal-pro-v4 .source-tabs{height:31px!important;box-sizing:border-box;padding-block:3px!important}
.interface-metal-pro-v4 .source{height:24px!important;padding:3px 6px!important;font-size:7px!important}
.interface-metal-pro-v4 .deck-lcd{height:42px!important;min-height:42px!important}.interface-metal-pro-v4 .deck-lcd canvas{height:42px!important}
.interface-metal-pro-v4 .deck-body{height:245px!important;min-height:245px!important;padding-block:3px!important}
.interface-metal-pro-v4 .platter{width:232px!important;height:232px!important;border-width:7px!important}
.interface-metal-pro-v4 .pitch-box{height:225px!important}.interface-metal-pro-v4 .pitch-box input{height:165px!important}
.interface-metal-pro-v4 .performance{height:96px!important;grid-template-rows:repeat(2,38px)!important;gap:5px!important;padding:7px 12px!important}
.interface-metal-pro-v4 .performance button{height:38px!important;min-height:38px!important;font-size:7px!important}
.interface-metal-pro-v4 .pad-mode-buttons{height:25px!important;margin-block:0!important}.interface-metal-pro-v4 .pad-mode-buttons button{height:23px!important;min-height:23px!important;padding:2px!important}
.interface-metal-pro-v4 .transport{height:72px!important;min-height:72px!important;padding:5px!important}.interface-metal-pro-v4 .transport .play{width:58px!important;height:58px!important;min-width:58px!important}.interface-metal-pro-v4 .transport .cue{width:50px!important;height:50px!important;min-width:50px!important}
.interface-metal-pro-v4 .mixer-title{height:25px!important;min-height:25px!important}.interface-metal-pro-v4 .mixer-top-row{height:50px!important;min-height:50px!important}.interface-metal-pro-v4 .pro-meter-screen{height:94px!important;min-height:94px!important}.interface-metal-pro-v4 .pro-meter-screen .meters{height:61px!important}
.interface-metal-pro-v4 .mixer-channel-eq{height:150px!important;min-height:150px!important}.interface-metal-pro-v4 .mixer-channel{gap:2px!important;padding-block:4px!important}.interface-metal-pro-v4 .channel-faders{height:128px!important;min-height:128px!important}.interface-metal-pro-v4 .channel-faders input{height:107px!important}.interface-metal-pro-v4 .cue-row{height:33px!important}.interface-metal-pro-v4 .head-controls{height:37px!important}.interface-metal-pro-v4 .cross-label{height:43px!important;margin:0!important}
.interface-metal-pro-v4 .browser{height:340px!important;min-height:340px!important;max-height:340px!important;resize:none!important}
@media(min-width:1660px){.interface-metal-pro-v4 .hardware-layout{grid-template-columns:minmax(420px,1fr) 500px minmax(420px,1fr)!important}.interface-metal-pro-v4 .platter{width:244px!important;height:244px!important}}
@media(max-height:760px) and (min-width:1181px){.interface-metal-pro-v4 .hardware-layout{height:575px!important;min-height:575px!important}.interface-metal-pro-v4 .hardware-layout>.deck,.interface-metal-pro-v4 .hardware-layout>.pro-center-mixer{height:565px!important;min-height:565px!important;max-height:565px!important}.interface-metal-pro-v4 .deck-body{height:210px!important;min-height:210px!important}.interface-metal-pro-v4 .platter{width:202px!important;height:202px!important}.interface-metal-pro-v4 .pitch-box{height:195px!important}.interface-metal-pro-v4 .pitch-box input{height:140px!important}.interface-metal-pro-v4 .performance{height:88px!important;grid-template-rows:repeat(2,34px)!important}.interface-metal-pro-v4 .performance button{height:34px!important;min-height:34px!important}.interface-metal-pro-v4 .transport{height:65px!important;min-height:65px!important}}


/* --- BUNDLED: metal-pro-v5-mixer-v66.css --- */
/* Metal Pro V5: V4 deck layout plus an expanded, fully wired central mixer. */
.v5-mixer-extra{display:none}
.interface-metal-pro-v5 .hardware-layout{grid-template-columns:minmax(400px,1fr) minmax(470px,540px) minmax(400px,1fr)!important}
.interface-metal-pro-v5 .pro-center-mixer{padding:6px 9px!important;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),linear-gradient(90deg,#090b0c,#2a3034 48%,#080a0b 52%,#242a2e)!important}
.interface-metal-pro-v5 .mixer-title{font-size:10px!important;letter-spacing:2px;border-bottom:1px solid #51585d;text-shadow:0 0 8px #4bddff}
.interface-metal-pro-v5 .mixer-top-row{grid-template-columns:1fr 78px 1fr!important;gap:10px!important}.interface-metal-pro-v5 .mixer-top-row button{height:38px!important;border-bottom:3px solid #2fe0ff!important}.interface-metal-pro-v5 .browse-control{transform:none!important}.interface-metal-pro-v5 .browse-control .hardware-knob{width:38px!important;height:38px!important}
.interface-metal-pro-v5 .pro-meter-screen{height:76px!important;min-height:76px!important;display:grid!important;grid-template-columns:1fr 76px 1fr;align-items:center;background:#050707!important;border:2px solid #020303!important}.interface-metal-pro-v5 .pro-meter-screen .meters{grid-column:2;height:60px!important;width:62px!important;margin:0!important}.interface-metal-pro-v5 .pro-meter-screen strong{position:absolute;left:12px;top:8px}.interface-metal-pro-v5 .pro-meter-screen small{position:absolute;right:10px;bottom:8px}
.interface-metal-pro-v5 .v5-mixer-extra{display:grid!important;grid-template-columns:1fr 74px 1fr;gap:7px;height:112px;min-height:112px;padding:5px;border-block:1px solid #4c5358;background:linear-gradient(#171b1e,#060708);box-sizing:border-box}
.interface-metal-pro-v5 .v5-fx-channel{min-width:0;padding:5px;border:1px solid #41484d;background:linear-gradient(145deg,#1e2327,#070809);box-shadow:inset 0 1px #fff2}.interface-metal-pro-v5 .v5-fx-channel>b{display:block;margin-bottom:4px;color:#d8dee2;font-size:7px;letter-spacing:1px}.interface-metal-pro-v5 .v5-fx-a>b{color:#ff775e}.interface-metal-pro-v5 .v5-fx-b>b{color:#4ba9ff}
.interface-metal-pro-v5 .v5-fx-channel label{display:grid;grid-template-columns:42px 1fr;align-items:center;font-size:6px;color:#aeb7bd}.interface-metal-pro-v5 .v5-fx-channel label input{width:100%}.interface-metal-pro-v5 .v5-fx-channel>div{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:5px 0}.interface-metal-pro-v5 .v5-fx-channel button{min-width:0;height:25px;padding:2px!important;border:1px solid #515a60!important;background:linear-gradient(#30363b,#08090a 55%,#202428)!important;color:#e4e9ec!important;font-size:6px!important;box-shadow:inset 0 1px #fff3,0 2px 3px #000!important}.interface-metal-pro-v5 .v5-fx-channel button.active{color:#051009!important;background:#4aff72!important;box-shadow:0 0 14px #4aff72!important}.interface-metal-pro-v5 .v5-fx-channel .v5-transition{width:100%;height:27px!important;border-color:#ff304d!important;color:#ffb0bc!important}.interface-metal-pro-v5 .v5-fx-channel .v5-transition.transition-active{background:#28ef69!important;color:#03160a!important;border-color:#64ff8a!important}
.interface-metal-pro-v5 .v5-master-strip{display:flex;flex-direction:column;align-items:center;justify-content:center;border-inline:1px solid #3f464b;color:#cdd4d8;font-size:6px}.interface-metal-pro-v5 .v5-master-strip b{font-size:6px}.interface-metal-pro-v5 .v5-master-strip small{font-size:5px;color:#78838b}.interface-metal-pro-v5 .v5-master-knob{width:44px;height:44px;margin:5px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#f7f8f8 0 7%,#899196 9% 22%,#15191b 24% 55%,#c5cacf 58% 62%,#050607 64%);box-shadow:0 0 0 1px #777,0 5px 8px #000}.interface-metal-pro-v5 .v5-master-knob:after{content:"";display:block;width:2px;height:13px;margin:5px auto;background:#ff334b;box-shadow:0 0 5px #ff334b}
.interface-metal-pro-v5 .mixer-channel-eq{height:110px!important;min-height:110px!important;grid-template-columns:1fr 80px 1fr!important}.interface-metal-pro-v5 .mixer-channel{grid-template-rows:16px repeat(4,19px)!important}.interface-metal-pro-v5 .mixer-channel label{grid-template-columns:38px 1fr!important}.interface-metal-pro-v5 .master-knob{padding-inline:6px}
.interface-metal-pro-v5 .channel-faders{height:100px!important;min-height:100px!important}.interface-metal-pro-v5 .channel-faders input{height:80px!important}.interface-metal-pro-v5 .cue-row{height:31px!important}.interface-metal-pro-v5 .head-controls{height:34px!important}.interface-metal-pro-v5 .cross-label{height:39px!important}
@media(max-width:1650px){.interface-metal-pro-v5 .hardware-layout{grid-template-columns:minmax(350px,1fr) 430px minmax(350px,1fr)!important}.interface-metal-pro-v5 .v5-mixer-extra{grid-template-columns:1fr 58px 1fr}.interface-metal-pro-v5 .v5-master-knob{width:36px;height:36px}}
@media(max-width:1250px){.interface-metal-pro-v5 .hardware-layout{grid-template-columns:1fr!important}.interface-metal-pro-v5 .hardware-layout>.deck,.interface-metal-pro-v5 .hardware-layout>.pro-center-mixer{height:auto!important;max-height:none!important;min-height:610px!important}.interface-metal-pro-v5 .pro-center-mixer{order:3}}


/* --- BUNDLED: playlist-custom-v67.css --- */
/* Playlist typography, track info and mixer gesture isolation. */
.library tbody td,.library tbody td b,.library tbody td small{
  color:var(--playlist-text-color,#fff)!important;
  font-family:var(--playlist-text-font,Inter),sans-serif!important;
  font-size:var(--playlist-text-size,13px)!important;
}
.playlist-appearance-panel{border:1px solid #414a57;border-radius:6px;background:#0c1118;color:#dce4ee}
.playlist-appearance-panel summary{padding:9px;cursor:pointer;font-size:9px;font-weight:800}
.playlist-appearance-panel[open]{padding-bottom:8px}
.playlist-appearance-panel label{display:grid;grid-template-columns:75px minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px 8px;font-size:8px}
.playlist-appearance-panel input,.playlist-appearance-panel select{min-width:0;width:100%;height:27px;padding:3px;background:#05080c;color:#fff;border:1px solid #46515e;border-radius:4px}
.playlist-appearance-panel input[type=color]{padding:2px}.playlist-appearance-panel output{min-width:34px;color:#8edfff;font-size:7px}
.playlist-appearance-panel button{width:calc(100% - 16px);margin:5px 8px 0;padding:7px!important}
.advanced-settings>.playlist-appearance-top{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:end;margin:0 0 14px;padding:12px 14px;border:2px solid #d6a62e!important;background:linear-gradient(135deg,#211a08,#0a0e14)!important;box-shadow:0 0 18px #d6a62e33!important}
.advanced-settings>.playlist-appearance-top legend{padding:0 8px;color:#ffd866!important;font:800 11px Orbitron,sans-serif}.advanced-settings>.playlist-appearance-top label{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;margin:0!important;color:#fff;font-size:9px}.advanced-settings>.playlist-appearance-top button{width:auto!important;min-height:34px;margin:0!important}.advanced-settings>.playlist-appearance-top small{grid-column:1/-1;color:#f0cc70!important;font-size:8px}
@media(max-width:900px){.advanced-settings>.playlist-appearance-top{grid-template-columns:1fr 1fr}.advanced-settings>.playlist-appearance-top small{grid-column:1/-1}}
.track-info-card{width:min(560px,calc(100vw - 30px))!important}.track-info-card dl{display:grid;grid-template-columns:90px minmax(0,1fr);gap:0;margin:12px 0;border:1px solid #394554;border-radius:7px;overflow:hidden}.track-info-card dt,.track-info-card dd{margin:0;padding:10px;border-bottom:1px solid #303a47}.track-info-card dt{background:#111824;color:#79ddff;font-weight:800}.track-info-card dd{background:#080c12;color:#f0f4f7;overflow-wrap:anywhere}.track-info-card small{display:block;color:#9ba7b5;line-height:1.5}
.mixer-adjusting .browser{height:340px!important;min-height:340px!important;max-height:340px!important}
.mixer-adjusting .browser,.mixer-adjusting .library{transition:none!important}
body.playlist-fullscreen-mode{overflow:hidden!important}
body.playlist-fullscreen-mode .browser{
  position:fixed!important;inset:0!important;z-index:10000!important;
  display:grid!important;grid-template-columns:250px minmax(0,1fr)!important;
  width:100vw!important;height:100vh!important;min-height:100vh!important;max-height:none!important;
  margin:0!important;border-radius:0!important;resize:none!important;background:#050607!important;
}
body.playlist-fullscreen-mode .browser>aside{display:block!important;overflow:auto!important}
body.playlist-fullscreen-mode .library{height:100vh!important;max-height:none!important;overflow:auto!important}
body.playlist-fullscreen-mode .library-head{position:sticky!important;top:0;z-index:5}
body.playlist-fullscreen-mode .drop-area{display:block!important}
body.playlist-fullscreen-mode .library tbody td{padding-block:12px!important}
@media(max-width:760px){body.playlist-fullscreen-mode .browser{grid-template-columns:150px minmax(0,1fr)!important}}


/* --- BUNDLED: controllers/controllers-panel-v70.css --- */
.controllers-panel{margin:18px 0;padding:14px;border:2px solid #2fdaff;border-radius:10px;background:linear-gradient(145deg,#0b1720,#070a0f);box-shadow:0 0 22px #22d8ff22;color:#eef6fb}
.controllers-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #294252;padding-bottom:10px}.controllers-panel header span{color:#4ce4ff;font:800 8px Orbitron;letter-spacing:2px}.controllers-panel h3,.controllers-panel h4{margin:3px 0}.controllers-panel header strong{color:#ffb243;font-size:10px}.controller-actions{display:flex;flex-wrap:wrap;gap:7px;padding:10px 0}.controller-actions button,.controller-actions label,.controller-live-test button{position:relative;padding:9px 11px;border:1px solid #425568;border-radius:5px;background:#121b27;color:#fff;font-size:8px;cursor:pointer}.controller-actions input{position:absolute;inset:0;opacity:0;cursor:pointer}.controller-device-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}.controller-device-card{padding:10px;border:1px solid #36485a;border-left:4px solid #ff5b6b;border-radius:6px;background:#0b111a}.controller-device-card.connected{border-left-color:#4bea78}.controller-device-card h4{font-size:11px}.controller-device-card dl{display:grid;grid-template-columns:80px 1fr;gap:4px;margin:7px 0;font-size:7px}.controller-device-card dt{color:#8190a0}.controller-device-card dd{margin:0;overflow-wrap:anywhere}.controller-live-test{display:grid;grid-template-columns:minmax(0,1fr) 240px auto;align-items:end;gap:9px;margin-top:10px;padding:10px;border:1px solid #34475a;border-radius:6px;background:#070b11}.controller-live-test code{display:block;color:#64f68c;font-size:8px}.controller-live-test label{display:grid;gap:5px;font-size:7px}.controller-live-test select{width:100%;padding:7px;background:#05080c;color:#fff;border:1px solid #425268}.controller-profile-info{display:flex;justify-content:space-between;gap:10px;margin-top:9px;color:#85eaff;font-size:8px}.controller-profile-info small{color:#ffba62}.controllers-panel.learning{border-color:#ffb228;box-shadow:0 0 25px #ffb22855}.controllers-panel.learning #controllerAutoLearn{background:#ffb228;color:#180e00}.controller-event-flash{animation:controllerFlash .3s}@keyframes controllerFlash{50%{background:#153923;box-shadow:0 0 20px #48ff79}}
@media(max-width:900px){.controller-live-test{grid-template-columns:1fr}.controller-profile-info{flex-direction:column}}


/* --- BUNDLED: admin-access-v71.css --- */
.user-access-timer{min-width:160px;padding:8px 10px;border:1px solid #ffb52d;border-radius:6px;background:#171006;color:#ffd36b;font:800 9px Orbitron;white-space:nowrap;box-shadow:0 0 12px #ffad2533}.user-access-timer.warning{border-color:#ff334f;color:#ff7184;animation:accessPulse .8s infinite alternate}.user-access-timer.full{border-color:#45ff78;color:#65ff8d;background:#07160c}@keyframes accessPulse{to{box-shadow:0 0 22px #ff334f99}}
.admin-access-panel{margin:10px 0;padding:11px;border:1px solid #e1ad32;border-radius:7px;background:linear-gradient(135deg,#261d08,#0b0f15)}.admin-access-panel h3{margin:0 0 5px;color:#ffd56b;font:800 11px Orbitron}.admin-access-panel p{margin:0;color:#c9b882;font-size:8px}.add-dj-form label{display:grid;gap:3px;color:#dce4ed;font-size:7px}.add-dj-form label input{width:100%;box-sizing:border-box}
.dj-users-list .cloud-user-access{display:grid;grid-template-columns:minmax(130px,1fr) 90px 95px auto;align-items:end;gap:6px;width:100%;margin-top:7px;padding-top:7px;border-top:1px solid #303b48}.cloud-user-access label{display:grid;gap:3px;color:#8e9aa8;font-size:6px}.cloud-user-access input{width:100%;box-sizing:border-box;padding:6px;background:#070a0f;color:#fff;border:1px solid #3d4958}.cloud-user-access button{padding:7px!important}.cloud-user-dates{display:block;color:#e6c66c!important;font-size:7px!important;line-height:1.5}.access-expired-modal{z-index:30000!important;background:#020305f2!important}.access-expired-card{border:2px solid #ff334f!important;box-shadow:0 0 40px #ff244d66!important;text-align:center}.access-expired-card h2{color:#ff667b}.access-expired-card label{display:grid;gap:6px;text-align:left}.access-expired-card input{padding:11px;background:#05070b;color:#fff;border:1px solid #ff536a;border-radius:5px}.app-access-locked .dj-app,.app-access-locked .topbar,.app-access-locked .notice{pointer-events:none;filter:blur(4px)}
.cloud-user-permissions{width:100%;margin-top:8px;padding-top:8px;border-top:1px solid #303b48}.cloud-user-permissions strong{display:block;margin-bottom:6px;color:#66e7ff;font:800 8px Orbitron}.cloud-user-permissions>div{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:5px}.cloud-user-permissions label{display:flex;align-items:center;gap:5px;padding:6px;border:1px solid #344252;border-radius:4px;background:#0b1017;color:#dbe7f2;font-size:7px}.cloud-user-permissions input{accent-color:#39e36e}.cloud-user-permissions button{margin-top:7px;background:#0d6f35!important;border-color:#37ff7a!important;color:white!important}
@media(max-width:800px){.dj-users-list .cloud-user-access{grid-template-columns:1fr 1fr}.user-access-timer{min-width:120px}}

/* DJ Settings admin: full-page, responsive workspace. */
#usersModal{place-items:stretch;padding:0;background:#070a10f7;backdrop-filter:blur(18px)}
#usersModal .users-card{width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(18px,2vw,38px);overflow-x:hidden;overflow-y:auto;box-sizing:border-box;border:0;border-radius:0;background:linear-gradient(135deg,#101722 0%,#080c13 48%,#10131c 100%);box-shadow:none}
#usersModal .modal-close{position:fixed;z-index:3;top:16px;right:22px;width:44px;height:44px;border:1px solid #48566b;border-radius:50%;background:#101722;color:#fff;box-shadow:0 0 18px #40dcff33;cursor:pointer}
#usersModal .users-card>h2{margin:0 60px 22px 0;font-size:clamp(24px,2.4vw,40px);color:#66e8ff;text-shadow:0 0 18px #21d8ff66}
#usersModal .admin-user-management,#usersModal .advanced-settings,#usersModal .midi-settings-card{width:min(1600px,100%);margin-left:auto;margin-right:auto;box-sizing:border-box}
#usersModal .add-dj-form{grid-template-columns:minmax(180px,1.4fr) minmax(180px,1.4fr) minmax(100px,.55fr) minmax(100px,.55fr) auto;align-items:end;padding:16px;border:1px solid #304052;border-radius:14px;background:#090e16}
#usersModal .add-dj-form label{margin:0}
#usersModal .add-dj-form button{min-height:38px;padding-inline:22px}
#usersModal .dj-users-list{display:grid;gap:16px;margin-top:20px}
#usersModal .dj-users-list>div.cloud-user-row{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr);gap:14px 22px;align-items:start;padding:18px;border:1px solid #334154;border-radius:16px;background:linear-gradient(145deg,#111925,#090e15);box-shadow:0 10px 30px #0005}
#usersModal .cloud-user-row>span{grid-column:1;grid-row:1;gap:5px;padding:10px}
#usersModal .cloud-user-row>[data-cloud-delete]{grid-column:1;grid-row:2;width:100%;min-height:40px;font-size:13px}
#usersModal .cloud-user-row>.cloud-user-access{grid-column:2;grid-row:1;width:100%;margin:0;padding:0 0 14px;border-top:0;border-bottom:1px solid #303b48;grid-template-columns:minmax(100px,1fr) minmax(100px,1fr) minmax(150px,auto)}
#usersModal .cloud-user-row>.cloud-user-permissions{grid-column:2;grid-row:2;width:100%;margin:0;padding:0;border-top:0}
#usersModal .cloud-user-permissions strong{font-size:12px;margin-bottom:12px}
#usersModal .cloud-user-permissions>div{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}
#usersModal .cloud-user-permissions label{min-height:38px;padding:8px 10px;font-size:11px;box-sizing:border-box}
#usersModal .cloud-user-permissions button{width:100%;min-height:42px;margin-top:12px;font-size:12px}
#usersModal .remote-license-admin{grid-column:2!important;width:100%;box-sizing:border-box;margin:0!important}
@media(max-width:900px){#usersModal .add-dj-form{grid-template-columns:1fr 1fr}#usersModal .add-dj-form button{grid-column:1/-1}#usersModal .dj-users-list>div.cloud-user-row{grid-template-columns:1fr}#usersModal .cloud-user-row>span,#usersModal .cloud-user-row>[data-cloud-delete],#usersModal .cloud-user-row>.cloud-user-access,#usersModal .cloud-user-row>.cloud-user-permissions,#usersModal .remote-license-admin{grid-column:1;grid-row:auto}#usersModal .cloud-user-row>.cloud-user-access{grid-template-columns:1fr 1fr}#usersModal .cloud-user-row>.cloud-user-access button{grid-column:1/-1}}
@media(max-width:560px){#usersModal .users-card{padding:16px 12px}#usersModal .add-dj-form,#usersModal .cloud-user-row>.cloud-user-access{grid-template-columns:1fr}#usersModal .add-dj-form button,#usersModal .cloud-user-row>.cloud-user-access button{grid-column:auto}#usersModal .cloud-user-permissions>div{grid-template-columns:1fr 1fr}}


/* --- BUNDLED: remote-license-admin-v109.css --- */
.remote-license-admin{display:grid!important;grid-template-columns:repeat(2,minmax(110px,1fr));gap:8px!important;margin-top:10px!important;padding:12px!important;border:1px solid #28ef79!important;border-radius:12px;background:linear-gradient(145deg,#10271a,#08110c)!important;box-shadow:0 0 14px #20e56d33!important}.remote-license-admin strong,.remote-license-admin>small{grid-column:1/-1}.remote-license-admin strong{color:#72ffa8;letter-spacing:.12em}.remote-license-admin>small{color:#a9cdb7}.remote-license-admin label{display:flex;gap:6px;align-items:center}.remote-license-admin input[type=number]{width:90px}.remote-license-admin button{min-height:36px}.remote-license-admin [data-remote-stop]{border-color:#ff405b!important;color:#ff9cac!important}.remote-code-generator{grid-column:1/-1;margin-top:10px;padding:12px;border:1px solid #38a966;border-radius:12px;background:#06120b}.remote-code-generator>strong{display:block;margin-bottom:10px}.remote-code-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.remote-code-actions button{border-color:#e4b800!important;color:#ffe36b!important}.remote-code-result{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:10px}.remote-code-result input{min-width:0;padding:10px;border:1px solid #4eff8d;border-radius:8px;background:#020805;color:#8dffb2;font-weight:900;letter-spacing:.08em}.remote-code-history{display:grid;gap:6px;margin-top:10px}.remote-code-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:7px;padding:7px;border:1px solid #243c2c;border-radius:8px}.remote-code-row span small{display:block;color:#8fae98}.remote-code-row em{font-style:normal;font-size:10px}.remote-code-row em.active{color:#ffdc45}.remote-code-row em.redeemed{color:#59ff91}.remote-code-row em.revoked{color:#ff6d82}@media(max-width:700px){.remote-code-actions{grid-template-columns:1fr}.remote-code-row{grid-template-columns:1fr auto}}


/* --- BUNDLED: library-neon-line-v80.css --- */
.library-head{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:none!important;align-items:start!important;gap:8px!important;padding:12px 0!important;overflow:visible!important}
.library-head>div:first-child{display:block!important;min-width:0!important}.library-head h2{display:block!important;margin:0!important;color:#fff!important;font:900 clamp(15px,1.4vw,22px) Orbitron!important}.library-head>div:first-child p{display:block!important;margin:4px 0 0!important}
.library .library-head .library-view-tabs{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;width:100%!important;min-width:0!important;max-width:none!important;overflow-x:auto!important;overflow-y:visible!important;padding:7px 3px 10px!important;scrollbar-width:thin;writing-mode:horizontal-tb!important}
.library .library-head .library-view-tabs>*{display:block;float:none!important;position:relative;writing-mode:horizontal-tb!important}
.library-playlist-accordion{position:relative!important;flex:0 0 102px!important;width:102px!important;margin:0!important;z-index:20!important}
.library-playlist-accordion>summary,.library-view-tabs>button{display:grid!important;place-items:center!important;flex:0 0 102px!important;width:102px!important;min-width:102px!important;height:36px!important;min-height:36px!important;margin:0!important;padding:0 5px!important;border:1px solid #ff4965!important;border-radius:6px!important;background:linear-gradient(180deg,#ff7689,#d91e3b 50%,#690714)!important;color:#fff!important;box-shadow:inset 0 1px #ffc0ca,inset 0 -3px 6px #58000d99,0 3px 0 #4b0710,0 0 14px #ff244f99!important;font:900 7px Orbitron!important;text-align:center!important;white-space:nowrap!important;cursor:grab!important;user-select:none!important}
.library-playlist-accordion[open]>summary,.library-view-tabs>button.active{border-color:#71ff98!important;background:linear-gradient(180deg,#bdffce,#35ed70 50%,#08772e)!important;color:#031208!important;box-shadow:inset 0 2px #e6ffec,inset 0 -5px 8px #06451e99,0 4px 0 #034e1c,0 0 22px #38ff79cc!important}
.library-view-tabs>[draggable="true"].library-control-dragging{opacity:.35!important;transform:scale(.94)!important}.library-view-tabs>.library-control-drop{outline:3px solid #5de9ff!important;outline-offset:2px!important}
.playlist-accordion-panel{top:calc(100% + 8px)!important;left:0!important;right:auto!important}
.sidebar-playlist-accordion{display:block!important;position:relative!important;width:100%!important;flex:none!important;margin:0!important}.sidebar-playlist-accordion>summary{width:100%!important;min-width:100%!important;height:31px!important;min-height:31px!important;cursor:pointer!important;place-items:center start!important;padding:7px!important;font:800 9px Inter!important}.sidebar-playlist-accordion .playlist-accordion-panel{position:static!important;width:100%!important;margin-top:6px!important;padding:7px!important;box-shadow:inset 0 0 12px #000!important}.sidebar-playlist-accordion[open]>summary{background:linear-gradient(180deg,#baffcb,#35ee70 48%,#087b30)!important;color:#031208!important;border-color:#75ff99!important;box-shadow:0 0 16px #38ff79aa!important}
@media(max-width:800px){.library-playlist-accordion,.library-playlist-accordion>summary,.library-view-tabs>button{flex-basis:92px!important;width:92px!important;min-width:92px!important;height:34px!important;min-height:34px!important;font-size:6px!important}}


/* --- BUNDLED: library-rainbow-tracks-v87.css --- */
#trackList tr[data-track-id] td{border-top:2px solid transparent!important;border-bottom:2px solid transparent!important;background:linear-gradient(#111722,#111722) padding-box,linear-gradient(90deg,#ff174f,#ff8a00,#ffe600,#32ff72,#28dfff,#704dff,#ff35d3,#ff174f) border-box!important;background-size:100% 100%,400% 100%!important;animation:trackRainbow 3.2s linear infinite!important}
#trackList tr[data-track-id] td:first-child{border-left:2px solid transparent!important;border-radius:8px 0 0 8px!important}
#trackList tr[data-track-id] td:last-child{border-right:2px solid transparent!important;border-radius:0 8px 8px 0!important}
#trackList tr[data-track-id]{filter:drop-shadow(0 0 5px #37dfff44)}
#trackList tr[data-track-id]:hover td{filter:brightness(1.25);box-shadow:inset 0 0 14px #33e8ff22}
@keyframes trackRainbow{to{background-position:0 0,400% 0}}
.deck-load-square{width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;border:2px solid #ff405a!important;border-radius:5px!important;background:linear-gradient(#df2340,#650712)!important;color:#fff!important;font:900 11px Orbitron!important;box-shadow:inset 0 1px #ff9dac,0 0 11px #ff174f88!important;transition:.18s!important}
.deck-load-square.loaded{border-color:#6aff91!important;background:linear-gradient(#58f982,#087a31)!important;color:#031108!important;box-shadow:inset 0 1px #d8ffe2,0 0 18px #39ff73!important;transform:scale(1.08)}
.deck-load-a:not(.loaded):hover{box-shadow:inset 0 1px #ffb36e,0 0 18px #ff7800!important}.deck-load-b:not(.loaded):hover{box-shadow:inset 0 1px #ff9dac,0 0 18px #ff174f!important}
@media(prefers-reduced-motion:reduce){#trackList tr[data-track-id] td{animation:none!important}}


/* --- BUNDLED: console-layout-repair-v92.css --- */
/* Menține consola completă A–Mixer–B pe laptopuri cu scalare Windows 125–150%. */
@media (min-width:901px) and (max-width:1250px){
  body.interface-metal-pro-v5:not(.deck-playlist-focus) .hardware-layout,
  body.interface-metal-pro-v4:not(.deck-playlist-focus) .hardware-layout,
  body.interface-metal-pro-v2:not(.deck-playlist-focus) .hardware-layout{
    grid-template-columns:minmax(0,1fr) 270px minmax(0,1fr)!important;
    gap:3px!important;
  }
  body.interface-metal-pro-v5:not(.deck-playlist-focus) .hardware-layout>.deck,
  body.interface-metal-pro-v5:not(.deck-playlist-focus) .hardware-layout>.pro-center-mixer,
  body.interface-metal-pro-v4:not(.deck-playlist-focus) .hardware-layout>.deck,
  body.interface-metal-pro-v4:not(.deck-playlist-focus) .hardware-layout>.pro-center-mixer{
    height:565px!important;min-height:565px!important;max-height:565px!important;order:initial!important;overflow:hidden!important;
  }
  body.interface-metal-pro-v5:not(.deck-playlist-focus) .v5-mixer-extra{grid-template-columns:1fr 46px 1fr!important;gap:3px!important}
}


/* --- BUNDLED: sidebar-access-v94.css --- */
.browser>aside .sidebar-access-timer{display:block;width:100%;min-width:0;margin:2px 0 0;padding:10px 8px;box-sizing:border-box;text-align:center;white-space:normal}.browser>aside .sidebar-access-timer[hidden]{display:none!important}


/* --- BUNDLED: digi-storage-v108.css --- */
#digiStorageBtn{border-color:#49d9ff;color:#91ecff;box-shadow:0 0 12px #00bfff38}.digi-storage-card{width:min(920px,94vw);height:min(760px,88vh);overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(145deg,#101722,#05080e)}.digi-storage-card>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #28374b;padding-bottom:12px}.digi-storage-card>header span{color:#55dfff;font-size:11px;letter-spacing:2px}.digi-storage-card>header h2{margin:3px 0}.digi-storage-path{display:flex;align-items:center;gap:10px;margin:12px 0}.digi-storage-path code{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;color:#67eeff;background:#05080d;border:1px solid #26364a;border-radius:8px;padding:10px}.digi-storage-files{min-height:180px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:7px;padding:8px;border:1px solid #26364a;border-radius:12px;background:#05070b}.digi-storage-files article{display:flex;align-items:center;gap:7px;padding:7px;border:1px solid #253246;border-radius:9px;background:linear-gradient(90deg,#111925,#090d14)}.digi-folder button{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;text-align:left}.digi-folder span{color:#7f91aa}.digi-file>div{min-width:0;flex:1;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.digi-file b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.digi-file small{color:#8392a8}.digi-file button{min-width:42px}.digi-file button[data-digi-target=A]{border-color:#ff9200;color:#ffb650}.digi-file button[data-digi-target=B]{border-color:#ff174f;color:#ff6688}.digi-file button[data-digi-target=playlist]{border-color:#46df83;color:#61f39a}.digi-storage-card footer{display:flex;justify-content:space-between;align-items:end;gap:15px;padding-top:10px}.digi-storage-card footer label{display:flex;flex-direction:column;gap:4px}.digi-storage-settings{border-color:#00bce8!important;box-shadow:inset 0 0 18px #00cfff12}@media(max-width:650px){.digi-storage-card{height:92vh}.digi-storage-card footer{align-items:stretch;flex-direction:column}.digi-file small{display:none}}


/* --- TRINITY ENGINE STYLING: REKORDBOX, SERATO & VIRTUALDJ --- */
.deck-key-badge {
  display: inline-block;
  background: rgba(121, 40, 202, 0.35);
  border: 1px solid #7928ca;
  color: #d8b4fe;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.5px;
}
.harmonic-match-badge {
  display: inline-block;
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid #10b981;
  color: #34d399;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  animation: pulse-glow 1.5s infinite alternate;
}
@keyframes pulse-glow {
  0% { box-shadow: 0 0 4px rgba(16, 185, 129, 0.3); }
  100% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.8); }
}
.trinity-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0;
  padding: 6px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.trinity-stems-group, .trinity-jump-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.trinity-label {
  font-size: 9px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
  width: 78px;
}
.trinity-btn {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.trinity-btn:hover {
  background: #334155;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.stem-btn.active {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  border-color: #f43f5e;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}
.jump-btn:active {
  transform: scale(0.92);
  background: #0ea5e9;
  color: #fff;
}
.brake-btn {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fca5a5;
}
.brake-btn:hover {
  background: #ef4444;
  color: #fff;
}
.stems-pad-btn {
  background: linear-gradient(135deg, #7928ca, #ff0080) !important;
  color: #fff !important;
  font-weight: 800 !important;
}
.rekordbox-usb-btn {
  background: linear-gradient(135deg, #1e3a8a, #0284c7);
  color: #fff;
  border: 1px solid #38bdf8;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s;
}
.rekordbox-usb-btn:hover {
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}


/* =========================================================================
   HARMONIC PRO TOPBAR & ACTIONS DESIGN SYSTEM
   ========================================================================= */
.topbar {
  height: 52px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(11, 15, 25, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  z-index: 100 !important;
}

.topbar .logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
}

.topbar .logo img {
  width: 26px !important;
  height: 26px !important;
}

.top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* Digital Clock */
#clock {
  font-family: 'JetBrains Mono', 'Consolas', monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  background: rgba(15, 23, 42, 0.7) !important;
  padding: 0 10px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 6px !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  letter-spacing: 1px !important;
}

/* Base Top Actions Button Style */
.top-actions button {
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 6px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 0 12px !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  outline: none !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

.top-actions button:hover {
  background: #334155 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* REC Button */
#recordBtn.record {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}
#recordBtn.record:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
}

/* AUTO DJ Button */
#autoDjBtn {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(225, 29, 72, 0.35)) !important;
  border: 1px solid #f43f5e !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.25) !important;
}
#autoDjBtn:hover {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.5) !important;
}
#autoDjBtn.active {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  box-shadow: 0 0 18px rgba(244, 63, 94, 0.7) !important;
  color: #fff !important;
}

/* Deck View Modes */
.hide-decks-btn, #toggleMainDecksBtn {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
.hide-decks-btn:hover, #toggleMainDecksBtn:hover {
  background: #334155 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.hide-decks-btn.active, #toggleMainDecksBtn.active {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

.focus-deck-playlist-btn {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
.focus-deck-playlist-btn.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(99, 102, 241, 0.25)) !important;
  border-color: #8b5cf6 !important;
  color: #c4b5fd !important;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3) !important;
}

.mini-deck-mode-btn {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
.mini-deck-mode-btn.active {
  background: rgba(6, 182, 212, 0.2) !important;
  border-color: #06b6d4 !important;
  color: #67e8f9 !important;
}

/* Zoom Controls Segmented Control */
.zoom-controls {
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.zoom-controls::before {
  content: 'DECK' !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  padding-left: 8px !important;
  padding-right: 4px !important;
  letter-spacing: 0.5px !important;
}

.zoom-controls button {
  width: 24px !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.zoom-controls button:hover {
  background: #1e293b !important;
  color: #fff !important;
  transform: none !important;
}

.zoom-controls span {
  min-width: 44px !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  font-family: 'JetBrains Mono', 'Consolas', monospace !important;
  padding: 0 4px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* DJ Settings Button */
#userSettingsBtn {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}

/* Kitty Admin Auth Pill */
#authBtn {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.3)) !important;
  border: 1px solid #8b5cf6 !important;
  color: #d8b4fe !important;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.25) !important;
}
#authBtn:hover {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.5) !important;
}

/* DIGI Storage Pill */
#digiStorageBtn {
  background: rgba(6, 182, 212, 0.15) !important;
  border: 1px solid #06b6d4 !important;
  color: #67e8f9 !important;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.2) !important;
}
#digiStorageBtn:hover {
  background: #06b6d4 !important;
  color: #000 !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.5) !important;
}

/* Fullscreen Icon Button */
#fullscreenBtn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  border-radius: 6px !important;
}
#fullscreenBtn:hover {
  background: #334155 !important;
  color: #fff !important;
}


/* =========================================================================
   TRUE HARMONIC STUDIO COMMAND DOCK (ALL TOPBAR BUTTONS UNIFIED)
   ========================================================================= */
.topbar {
  height: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #090d16 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  z-index: 100 !important;
}

.top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* Unified Pod Containers */
.top-pod {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(18, 24, 38, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 7px !important;
  padding: 3px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4) !important;
}

/* Universal Button Style (Every single button has the exact same baseline) */
.top-actions button {
  height: 28px !important;
  line-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 5px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  padding: 0 10px !important;
  cursor: pointer !important;
  outline: none !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #94a3b8 !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Universal Hover */
.top-actions button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: none !important;
}

/* Specific Harmonized Accents within the Unified Pods */
#recordBtn.record {
  color: #f87171 !important;
}
#recordBtn.record:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fff !important;
}

#autoDjBtn {
  color: #fb7185 !important;
  background: rgba(244, 63, 94, 0.1) !important;
  border-color: rgba(244, 63, 94, 0.25) !important;
}
#autoDjBtn:hover {
  background: rgba(244, 63, 94, 0.25) !important;
  border-color: #f43f5e !important;
  color: #fff !important;
}
#autoDjBtn.active {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  color: #fff !important;
  border-color: #fb7185 !important;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.6) !important;
}

/* Active states for view buttons */
.top-pod button.active {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.3) !important;
}

/* Zoom Controls Segmented Pod */
.zoom-controls {
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(18, 24, 38, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  padding: 3px !important;
  gap: 2px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4) !important;
}

.zoom-controls::before {
  content: 'DECK' !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  padding: 0 6px !important;
  letter-spacing: 0.5px !important;
}

.zoom-controls button {
  width: 24px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  background: transparent !important;
}

.zoom-controls button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.zoom-controls span {
  min-width: 44px !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  font-family: 'JetBrains Mono', monospace !important;
  padding: 0 4px !important;
  line-height: 28px !important;
}

/* System Pod Accents (Kitty & Digi Storage) */
#authBtn {
  color: #c084fc !important;
  background: rgba(192, 132, 252, 0.08) !important;
  border-color: rgba(192, 132, 252, 0.25) !important;
}
#authBtn:hover {
  background: rgba(192, 132, 252, 0.2) !important;
  border-color: #c084fc !important;
  color: #fff !important;
}

#digiStorageBtn {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}
#digiStorageBtn:hover {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: #38bdf8 !important;
  color: #fff !important;
}

#fullscreenBtn {
  width: 28px !important;
  padding: 0 !important;
  font-size: 13px !important;
}


/* --- LIBRARY INSTANT SEARCH BAR --- */
.library-search-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 14px 0;
  padding: 4px 6px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.library-search-box {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}
.search-magnifier {
  font-size: 14px;
  opacity: 0.7;
}
#librarySearchInput {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #f1f5f9 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 4px !important;
}
#librarySearchInput::placeholder {
  color: #64748b;
  font-weight: 500;
}
.clear-search-btn {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}
.clear-search-btn:hover {
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.search-count-badge {
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* --- YOUTUBE EJECT BAR --- */
.video-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 800;
  color: #f43f5e;
  letter-spacing: 0.5px;
}
.youtube-eject-btn {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid #ef4444 !important;
  color: #fca5a5 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.youtube-eject-btn:hover {
  background: #ef4444 !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5) !important;
}


/* =========================================================================
   ACCORDION COLLAPSIBLE TOPBAR (CA LA KITTYLAB)
   ========================================================================= */
.topbar-accordion-btn {
  background: rgba(14, 165, 233, 0.12) !important;
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
  color: #38bdf8 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  height: 28px !important;
  padding: 0 9px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
}
.topbar-accordion-btn:hover {
  background: #0ea5e9 !important;
  color: #000 !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5) !important;
}

/* Accordion Fold Animation */
.topbar.is-collapsed .view-pod,
.topbar.is-collapsed .zoom-controls {
  max-width: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.view-pod, .zoom-controls {
  max-width: 600px;
  opacity: 1;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   PRO THEMES SYSTEM (PIONEER, SERATO, VIRTUALDJ, TRAKTOR, KITTY, STEALTH)
   ========================================================================= */
.pro-themes-fieldset {
  margin-top: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  background: rgba(15, 23, 42, 0.5) !important;
}
.theme-subtitle {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 0;
  margin-bottom: 10px;
}
.pro-themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.theme-tile-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
  text-align: left !important;
}
.theme-tile-btn:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  transform: translateY(-2px) !important;
}
.theme-tile-btn.active {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3) !important;
}
.theme-tile-btn strong {
  font-size: 12px !important;
  color: #f1f5f9 !important;
  margin-bottom: 2px !important;
}
.theme-tile-btn small {
  font-size: 10px !important;
  color: #94a3b8 !important;
}
.theme-swatch {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 6px;
}
.theme-swatch.gold { background: linear-gradient(90deg, #eab308, #f59e0b, #ca8a04); }
.theme-swatch.serato { background: linear-gradient(90deg, #10b981, #f43f5e); }
.theme-swatch.vdj { background: linear-gradient(90deg, #06b6d4, #8b5cf6); }
.theme-swatch.traktor { background: linear-gradient(90deg, #38bdf8, #64748b); }
.theme-swatch.kitty { background: linear-gradient(90deg, #ec4899, #a855f7, #f43f5e); }
.theme-swatch.stealth { background: linear-gradient(90deg, #1e293b, #475569); }

/* --- THEME 1: PIONEER CYBER GOLD --- */
body.theme-pioneer-gold {
  background: radial-gradient(circle at 50% 10%, #17150a 0%, #080705 100%) !important;
}
body.theme-pioneer-gold .platter#platterA .label { color: #eab308 !important; text-shadow: 0 0 10px #eab308 !important; }
body.theme-pioneer-gold .platter#platterB .label { color: #f59e0b !important; text-shadow: 0 0 10px #f59e0b !important; }
body.theme-pioneer-gold .sync { border-color: #ca8a04 !important; color: #fde047 !important; }
body.theme-pioneer-gold .deck-body { border-color: rgba(234, 179, 8, 0.25) !important; }

/* --- THEME 2: SERATO TOXIC NIGHT --- */
body.theme-serato-toxic {
  background: radial-gradient(circle at 50% 10%, #06170e 0%, #050807 100%) !important;
}
body.theme-serato-toxic .platter#platterA .label { color: #10b981 !important; text-shadow: 0 0 12px #10b981 !important; }
body.theme-serato-toxic .platter#platterB .label { color: #f43f5e !important; text-shadow: 0 0 12px #f43f5e !important; }
body.theme-serato-toxic .sync { border-color: #10b981 !important; color: #6ee7b7 !important; }

/* --- THEME 3: VIRTUALDJ HOLOGRAPHIC CYAN --- */
body.theme-virtualdj-cyan {
  background: radial-gradient(circle at 50% 10%, #061529 0%, #050a14 100%) !important;
}
body.theme-virtualdj-cyan .platter#platterA .label { color: #06b6d4 !important; text-shadow: 0 0 12px #06b6d4 !important; }
body.theme-virtualdj-cyan .platter#platterB .label { color: #8b5cf6 !important; text-shadow: 0 0 12px #8b5cf6 !important; }
body.theme-virtualdj-cyan .topbar { border-bottom-color: #0284c7 !important; }

/* --- THEME 4: TRAKTOR ICE CARBON --- */
body.theme-traktor-ice {
  background: radial-gradient(circle at 50% 10%, #0c1424 0%, #060910 100%) !important;
}
body.theme-traktor-ice .platter#platterA .label { color: #38bdf8 !important; text-shadow: 0 0 10px #38bdf8 !important; }
body.theme-traktor-ice .platter#platterB .label { color: #60a5fa !important; text-shadow: 0 0 10px #60a5fa !important; }

/* --- THEME 5: KITTY CYBER MATRIX --- */
body.theme-kitty-matrix {
  background: radial-gradient(circle at 50% 10%, #20052b 0%, #0c0212 100%) !important;
}
body.theme-kitty-matrix .platter#platterA .label { color: #ec4899 !important; text-shadow: 0 0 14px #ec4899 !important; }
body.theme-kitty-matrix .platter#platterB .label { color: #a855f7 !important; text-shadow: 0 0 14px #a855f7 !important; }
body.theme-kitty-matrix .topbar { border-bottom-color: #ec4899 !important; }
body.theme-kitty-matrix .topbar .logo span { color: #f472b6 !important; }

/* --- THEME 6: DARK CLUB STEALTH --- */
body.theme-stealth-black {
  background: #000000 !important;
}
body.theme-stealth-black .topbar { background: #050505 !important; }
body.theme-stealth-black .deck-body { background: #080808 !important; border-color: #222 !important; }
body.theme-stealth-black .mixer { background: #050505 !important; }


/* =========================================================================
   HARMONIC PROPORTIONAL SCALING & ZERO-CLIPPING GUARANTEE
   ========================================================================= */
.hardware-layout {
  overflow: visible !important;
  height: auto !important;
  min-height: fit-content !important;
}

.hardware-layout > .deck {
  height: auto !important;
  min-height: fit-content !important;
  max-height: none !important;
  overflow: visible !important;
  zoom: var(--deck-panel-zoom, 0.85);
  transform-origin: top center;
}

.hardware-layout > .pro-center-mixer {
  height: auto !important;
  min-height: fit-content !important;
  max-height: none !important;
  overflow: visible !important;
}

.deck-body {
  height: auto !important;
  min-height: fit-content !important;
  overflow: visible !important;
}

/* Red Deck Load Buttons A and B (Ultra-Visible on ALL Themes) */
.deck-load-square {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border: 2px solid #ff405a !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #e11d48, #881337) !important;
  color: #fff !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 0 10px rgba(225, 29, 72, 0.4) !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.deck-load-square:hover {
  background: #f43f5e !important;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.7) !important;
  transform: scale(1.06) !important;
}
.deck-load-square.loaded {
  border-color: #10b981 !important;
  background: linear-gradient(180deg, #10b981, #065f46) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.6) !important;
}


/* =========================================================================
   PRO EXPANSION: SOUND COLOR FX, SLIP MODE, HARMONIC KEY SHIFT & DEMUCS
   ========================================================================= */
/* Sound Color FX Panel on Mixer */
.color-fx-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 7px !important;
  margin: 6px 10px 4px 10px !important;
}
.fx-panel-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  letter-spacing: 0.5px !important;
  margin-right: 4px !important;
}
.color-fx-btn {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 4px 7px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.color-fx-btn:hover {
  background: #334155 !important;
  color: #fff !important;
}
.color-fx-btn.active {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

/* Slip Mode Button */
.slip-btn {
  background: #1e293b !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}
.slip-btn:hover {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fff !important;
}
.slip-btn.active {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #fef08a !important;
  color: #000 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.8) !important;
  animation: pulse-glow-slip 1s infinite alternate !important;
}
@keyframes pulse-glow-slip {
  0% { box-shadow: 0 0 4px #f59e0b; }
  100% { box-shadow: 0 0 14px #fbbf24; }
}

/* Harmonic Key Shift Box */
.deck-key-shift-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 2px 5px !important;
  border-radius: 5px !important;
  margin-left: 8px !important;
}
.key-shift-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}
.key-shift-btn:hover {
  background: #334155 !important;
  color: #fff !important;
  border-color: #38bdf8 !important;
}
.deck-key-tag {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  font-family: monospace !important;
  padding: 0 4px !important;
}
.key-match-btn {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.key-match-btn:hover {
  background: #10b981 !important;
  color: #000 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
}

/* Demucs AI Stems Button */
.demucs-btn {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.3)) !important;
  border: 1px solid #8b5cf6 !important;
  color: #d8b4fe !important;
}
.demucs-btn:hover {
  background: #8b5cf6 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.6) !important;
}


/* =========================================================================
   DEDICATED PRO STEMS CONSOLE STRIP (PC & LAPTOP HIGH-VISIBILITY)
   ========================================================================= */
.pro-stems-strip {
  margin: 10px 0 6px 0 !important;
  padding: 8px 10px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

.stems-strip-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

.stems-strip-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  letter-spacing: 0.6px !important;
}

.demucs-mini-btn {
  background: rgba(139, 92, 246, 0.15) !important;
  border: 1px solid rgba(139, 92, 246, 0.4) !important;
  color: #c4b5fd !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.demucs-mini-btn:hover {
  background: #8b5cf6 !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.6) !important;
}

.stems-pad-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
}

.pro-stem-btn {
  height: 38px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 2px 4px !important;
  position: relative !important;
}

.pro-stem-btn strong {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.1 !important;
}

.pro-stem-btn .stem-icon {
  font-size: 13px !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}

.pro-stem-btn .stem-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 4px !important;
  right: 5px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  transition: all 0.2s !important;
}

/* VOCAL STEM (Electric Cyan) */
.pro-stem-btn.vocal-stem { color: #67e8f9 !important; border-color: rgba(6, 182, 212, 0.3) !important; }
.pro-stem-btn.vocal-stem:hover { background: rgba(6, 182, 212, 0.2) !important; border-color: #06b6d4 !important; }
.pro-stem-btn.vocal-stem.active {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  color: #000 !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.7) !important;
}
.pro-stem-btn.vocal-stem.active .stem-dot { background: #fff !important; box-shadow: 0 0 8px #fff !important; }

/* DRUMS STEM (Neon Coral / Red) */
.pro-stem-btn.drums-stem { color: #fca5a5 !important; border-color: rgba(244, 63, 94, 0.3) !important; }
.pro-stem-btn.drums-stem:hover { background: rgba(244, 63, 94, 0.2) !important; border-color: #f43f5e !important; }
.pro-stem-btn.drums-stem.active {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.7) !important;
}
.pro-stem-btn.drums-stem.active .stem-dot { background: #fff !important; box-shadow: 0 0 8px #fff !important; }

/* BASS STEM (Neon Amber / Gold) */
.pro-stem-btn.bass-stem { color: #fde047 !important; border-color: rgba(245, 158, 11, 0.3) !important; }
.pro-stem-btn.bass-stem:hover { background: rgba(245, 158, 11, 0.2) !important; border-color: #f59e0b !important; }
.pro-stem-btn.bass-stem.active {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #000 !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.7) !important;
}
.pro-stem-btn.bass-stem.active .stem-dot { background: #fff !important; box-shadow: 0 0 8px #fff !important; }

/* MELODY STEM (Neon Violet / Purple) */
.pro-stem-btn.melody-stem { color: #d8b4fe !important; border-color: rgba(168, 85, 247, 0.3) !important; }
.pro-stem-btn.melody-stem:hover { background: rgba(168, 85, 247, 0.2) !important; border-color: #a855f7 !important; }
.pro-stem-btn.melody-stem.active {
  background: linear-gradient(135deg, #a855f7, #9333ea) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.7) !important;
}
.pro-stem-btn.melody-stem.active .stem-dot { background: #fff !important; box-shadow: 0 0 8px #fff !important; }

/* FULL ORIGINAL STEM */
.pro-stem-btn.full-stem { color: #cbd5e1 !important; }
.pro-stem-btn.full-stem:hover { background: #334155 !important; color: #fff !important; }

.compact-actions {
  margin-top: 4px !important;
}


/* =========================================================================
   CENTRAL MIXER ACCORDION & COLOR FX IN SETTINGS
   ========================================================================= */
/* Mixer Accordion Button on Mixer Title */
.mixer-accordion-btn {
  background: rgba(14, 165, 233, 0.15) !important;
  border: 1px solid rgba(14, 165, 233, 0.35) !important;
  color: #38bdf8 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  margin-left: auto !important;
  transition: all 0.15s ease !important;
}
.mixer-accordion-btn:hover {
  background: #0ea5e9 !important;
  color: #000 !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.6) !important;
}

/* Mixer Collapsed State (Deck A and Deck B expand to fill entire width!) */
.hardware-layout.mixer-collapsed {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px !important;
}
.hardware-layout.mixer-collapsed > .pro-center-mixer {
  display: none !important;
}

/* Sound Color FX in DJ Settings Modal */
.color-fx-fieldset {
  margin-top: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  background: rgba(15, 23, 42, 0.5) !important;
}
.color-fx-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 6px !important;
}
.color-fx-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  text-align: left !important;
}
.color-fx-tile:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
}
.color-fx-tile.active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.3), rgba(14, 165, 233, 0.3)) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}
.color-fx-tile strong {
  font-size: 11px !important;
  color: #38bdf8 !important;
  margin-bottom: 2px !important;
}
.color-fx-tile small {
  font-size: 9px !important;
  color: #94a3b8 !important;
}


/* =========================================================================
   KITTY AI LIVE STEMS BUTTON
   ========================================================================= */
.kitty-ai-live-btn {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.3)) !important;
  border: 1px solid #ec4899 !important;
  color: #f472b6 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.kitty-ai-live-btn:hover {
  background: #ec4899 !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.7) !important;
}
.kitty-ai-live-btn.active {
  background: linear-gradient(135deg, #ec4899, #d946ef) !important;
  border-color: #fbcfe8 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.8) !important;
}


/* =========================================================================
   REAL-TIME NEURAL STEMS MUTE / ACTIVE / SOLO STATES
   ========================================================================= */
.pro-stem-btn .stem-state {
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  text-transform: uppercase !important;
  opacity: 0.85 !important;
}

/* Muted State (when a stem is turned OFF) */
.pro-stem-btn.muted {
  background: #0f172a !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #64748b !important;
  box-shadow: none !important;
  opacity: 0.55 !important;
}
.pro-stem-btn.muted strong {
  text-decoration: line-through !important;
}
.pro-stem-btn.muted .stem-dot {
  background: #ef4444 !important;
  box-shadow: 0 0 6px #ef4444 !important;
}
.pro-stem-btn.muted .stem-state {
  color: #ef4444 !important;
}

/* Solo State */
.pro-stem-btn.solo-active {
  animation: pulse-glow-solo 0.8s infinite alternate !important;
}
@keyframes pulse-glow-solo {
  0% { transform: scale(1); }
  100% { transform: scale(1.03); }
}


/* =========================================================================
   SERATO STEMS FX & STEMS PREPARATION CACHE STYLES
   ========================================================================= */
.stems-actions-right {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.stems-fx-btn {
  background: rgba(2, 132, 199, 0.2) !important;
  border: 1px solid #0ea5e9 !important;
  color: #38bdf8 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.stems-fx-btn:hover {
  background: #0ea5e9 !important;
  color: #000 !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.7) !important;
}
.stems-fx-btn.active {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  border-color: #7dd3fc !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.9) !important;
  animation: pulse-glow-fx 1s infinite alternate !important;
}
@keyframes pulse-glow-fx {
  0% { box-shadow: 0 0 4px #0ea5e9; }
  100% { box-shadow: 0 0 14px #38bdf8; }
}

.stems-cache-btn {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.stems-cache-btn:hover {
  background: #10b981 !important;
  color: #000 !important;
}
.stems-cache-btn.active {
  background: #10b981 !important;
  color: #000 !important;
  border-color: #a7f3d0 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
}


/* =========================================================================
   KITTY AI SUPABASE LEARNING BADGE & TELEMETRY STYLES
   ========================================================================= */
.kitty-learn-pod {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
  color: #d8b4fe !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.kitty-learn-pod:hover {
  background: rgba(139, 92, 246, 0.28) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.5) !important;
}
.kitty-brain-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
  animation: pulse-brain-sync 1.5s infinite alternate !important;
}
@keyframes pulse-brain-sync {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px #34d399; }
}


/* =========================================================================
   SERATO STEMS FX ROW & 1-CLICK MACROS
   ========================================================================= */
.stems-macro-btn {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.acapella-macro {
  background: rgba(6, 182, 212, 0.15) !important;
  border: 1px solid rgba(6, 182, 212, 0.4) !important;
  color: #67e8f9 !important;
}
.acapella-macro:hover {
  background: #06b6d4 !important;
  color: #000 !important;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.7) !important;
}
.instrumental-macro {
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #d8b4fe !important;
}
.instrumental-macro:hover {
  background: #a855f7 !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7) !important;
}

.stems-fx-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
  padding-top: 5px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.stems-fx-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.5px !important;
}
.stems-fx-pill {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.stems-fx-pill:hover {
  background: #334155 !important;
  color: #fff !important;
}
.stems-fx-pill.active {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  border-color: #38bdf8 !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.7) !important;
}


/* =========================================================================
   GUEST DEMO MODE & 2-MINUTE TIMER STYLES (ZERO SERVER PING)
   ========================================================================= */
/* STRICT DEMO VISIBILITY: Hidden when attribute [hidden] or when authenticated */
#demoTimerBadge[hidden],
body.is-authenticated #demoTimerBadge,
.is-authenticated #demoTimerBadge,
body:not(.is-guest-demo) #demoTimerBadge {
  display: none !important;
}

.demo-timer-badge {
  background: rgba(244, 63, 94, 0.15) !important;
  border: 1px solid rgba(244, 63, 94, 0.4) !important;
  color: #fda4af !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 0 10px !important;
  display: inline-flex;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 7px !important;
  height: 34px !important;
}
.demo-pulse-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #f43f5e !important;
  box-shadow: 0 0 8px #f43f5e !important;
  animation: pulse-demo-warn 1s infinite alternate !important;
}
@keyframes pulse-demo-warn {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #f43f5e; }
}
.demo-expired-card {
  text-align: center !important;
  max-width: 440px !important;
  padding: 30px 24px !important;
  background: linear-gradient(145deg, #131722, #0b0d14) !important;
  border: 1px solid rgba(244, 63, 94, 0.4) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(244, 63, 94, 0.25) !important;
}
.demo-expired-icon {
  font-size: 48px !important;
  display: block !important;
  margin-bottom: 12px !important;
}
.demo-expired-title {
  color: #f43f5e !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.5px !important;
}
.demo-expired-desc {
  color: #cbd5e1 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}


/* =========================================================================
   YOUTUBE VIDEO PLAYER - FULL 16:9 WIDESCREEN UN-SQUASHED DISPLAY
   ========================================================================= */
.video-wrap {
  display: none;
  width: 100% !important;
  height: auto !important;
  background: #000 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.video-wrap.open {
  display: block !important;
}

.video-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 12px !important;
  background: #090d16 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #f43f5e !important;
  letter-spacing: 0.5px !important;
}

.video-wrap #youtubeA,
.video-wrap #youtubeB {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 260px !important;
  background: #000 !important;
}

.video-wrap iframe {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 260px !important;
  display: block !important;
  border: none !important;
}

.mini-main-decks .video-wrap {
  height: auto !important;
}
.mini-main-decks .video-wrap iframe,
.mini-main-decks .video-wrap #youtubeA,
.mini-main-decks .video-wrap #youtubeB {
  aspect-ratio: 16 / 9 !important;
  min-height: 200px !important;
}


/* =========================================================================
   KITTYLAB KO-FI SUPPORT INTEGRATION (OFFICIAL STYLES)
   ========================================================================= */
.kofi-top-btn {
  background: rgba(255, 94, 91, 0.15) !important;
  border: 1px solid rgba(255, 94, 91, 0.45) !important;
  color: #ff9e9c !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  height: 28px !important;
  line-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}
.kofi-top-btn:hover {
  background: #ff5e5b !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(255, 94, 91, 0.6) !important;
  transform: translateY(-1px) !important;
}

.kofi-login-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 8px 14px !important;
  background: rgba(255, 94, 91, 0.12) !important;
  border: 1px dashed rgba(255, 94, 91, 0.4) !important;
  border-radius: 6px !important;
  color: #ffb4b3 !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.kofi-login-pill:hover {
  background: rgba(255, 94, 91, 0.25) !important;
  border-color: #ff5e5b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(255, 94, 91, 0.3) !important;
}
.kofi-login-pill strong {
  color: #fff !important;
  font-weight: 800 !important;
}

.kofi-modal-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  background: rgba(255, 94, 91, 0.15) !important;
  border: 1px solid rgba(255, 94, 91, 0.5) !important;
  border-radius: 6px !important;
  color: #ff9e9c !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
.kofi-modal-btn:hover {
  background: #ff5e5b !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(255, 94, 91, 0.6) !important;
  transform: translateY(-1px) !important;
}


/* =========================================================================
   KITTY AI DJ COPILOT · NEXT TRACK SMART ENGINE STYLES
   ========================================================================= */
.copilot-toggle-btn {
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #c084fc !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  height: 28px !important;
  padding: 0 9px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.copilot-toggle-btn.active {
  background: rgba(168, 85, 247, 0.28) !important;
  border-color: #a855f7 !important;
  color: #f3e8ff !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4) !important;
}
.copilot-toggle-btn:hover {
  background: #a855f7 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.6) !important;
}

.kitty-copilot-panel {
  background: linear-gradient(145deg, #0e1320, #080a10) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 8px !important;
  margin: 10px 0 !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: all 0.25s ease !important;
}
.kitty-copilot-panel.collapsed .copilot-body {
  display: none !important;
}

.copilot-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  background: rgba(168, 85, 247, 0.08) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.2) !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.copilot-title-pod {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.copilot-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #a855f7 !important;
  box-shadow: 0 0 8px #a855f7 !important;
  animation: pulse-copilot-dot 1.2s infinite alternate !important;
}
@keyframes pulse-copilot-dot {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #c084fc; }
}
.copilot-brand {
  color: #e9d5ff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}
.copilot-badge {
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px !important;
}

.copilot-live-status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
}
.copilot-deck-indicator {
  color: #94a3b8 !important;
}
.copilot-deck-indicator strong {
  color: #f1f5f9 !important;
}
.copilot-key-tag {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #7928ca !important;
  color: #a855f7 !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}
.copilot-bpm-tag {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #38bdf8 !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}

.copilot-controls {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.copilot-tool-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.copilot-tool-btn:hover {
  background: rgba(168, 85, 247, 0.3) !important;
  border-color: #a855f7 !important;
  color: #fff !important;
}

.copilot-body {
  padding: 10px !important;
}
.copilot-recommendations {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px !important;
}

.copilot-empty-hint {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 16px !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.copilot-empty-hint span {
  font-size: 24px !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.copilot-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}
.copilot-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}
.copilot-card.badge-perfect {
  border-color: rgba(16, 185, 129, 0.4) !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(0, 0, 0, 0.2)) !important;
}
.copilot-card.badge-harmonic {
  border-color: rgba(56, 189, 248, 0.4) !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.06), rgba(0, 0, 0, 0.2)) !important;
}
.copilot-card.badge-energy {
  border-color: rgba(245, 158, 11, 0.4) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(0, 0, 0, 0.2)) !important;
}

.copilot-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}
.copilot-match-score {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #10b981 !important;
}
.copilot-card.badge-harmonic .copilot-match-score {
  color: #38bdf8 !important;
}
.copilot-card.badge-energy .copilot-match-score {
  color: #f59e0b !important;
}

.copilot-reason-pill {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: #cbd5e1 !important;
}

.copilot-card-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.copilot-track-name {
  font-size: 12px !important;
  color: #f8fafc !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.copilot-track-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
}
.copilot-key-chip {
  border: 1px solid #7928ca !important;
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  font-weight: 800 !important;
}
.copilot-bpm-chip {
  color: #38bdf8 !important;
  font-weight: 800 !important;
}
.copilot-dur-chip {
  color: #64748b !important;
}

.copilot-card-actions {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 4px !important;
}
.copilot-load-btn {
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
  border: 1px solid #c084fc !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.copilot-load-btn:hover {
  background: #c084fc !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.6) !important;
}


/* =========================================================================
   SIDEBAR COMPACT COPILOT WIDGET STYLES
   ========================================================================= */
.sidebar-copilot {
  width: 100% !important;
  margin: 8px 0 4px 0 !important;
  background: linear-gradient(180deg, #0e1320, #080a12) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden !important;
}
.sidebar-copilot .copilot-header {
  padding: 6px 8px !important;
  gap: 4px !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: rgba(168, 85, 247, 0.1) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.2) !important;
}
.sidebar-copilot .copilot-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.sidebar-copilot .copilot-brand {
  font-size: 10px !important;
  font-weight: 900 !important;
  color: #e9d5ff !important;
}
.sidebar-copilot .copilot-live-status {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  font-size: 10px !important;
  color: #94a3b8 !important;
  width: 100% !important;
}
.sidebar-copilot .copilot-deck-indicator {
  max-width: 110px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10px !important;
}
.sidebar-copilot .copilot-tags-mini {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}
.sidebar-copilot .copilot-key-tag,
.sidebar-copilot .copilot-bpm-tag {
  font-size: 9px !important;
  padding: 1px 4px !important;
}
.sidebar-copilot .copilot-body {
  padding: 6px !important;
}
.sidebar-copilot .copilot-recommendations {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
}
.sidebar-copilot .copilot-card {
  padding: 6px 8px !important;
  gap: 4px !important;
  border-radius: 5px !important;
}
.sidebar-copilot .copilot-match-score {
  font-size: 10px !important;
}
.sidebar-copilot .copilot-reason-pill {
  font-size: 9px !important;
  padding: 1px 4px !important;
}
.sidebar-copilot .copilot-track-name {
  font-size: 11px !important;
  line-height: 1.25 !important;
  max-width: 180px !important;
}
.sidebar-copilot .copilot-load-btn {
  width: 100% !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-align: center !important;
}


/* =========================================================================
   COPILOT EXPAND / DETACH / FLOATING HUD MODAL STYLES
   ========================================================================= */
.copilot-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(5px) !important;
  z-index: 999990 !important;
}

.kitty-copilot-panel.is-expanded-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(860px, 94vw) !important;
  max-height: 85vh !important;
  z-index: 999999 !important;
  background: linear-gradient(145deg, #101525, #070912) !important;
  border: 2px solid #a855f7 !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(168, 85, 247, 0.45) !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  animation: copilot-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes copilot-pop-in {
  0% { transform: translate(-50%, -46%) scale(0.92); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.kitty-copilot-panel.is-expanded-modal .copilot-header {
  padding: 12px 18px !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.3) !important;
  background: rgba(168, 85, 247, 0.12) !important;
}

.kitty-copilot-panel.is-expanded-modal .copilot-brand {
  font-size: 14px !important;
}

.kitty-copilot-panel.is-expanded-modal .copilot-live-status {
  font-size: 13px !important;
  margin-top: 6px !important;
}

.kitty-copilot-panel.is-expanded-modal .copilot-deck-indicator {
  max-width: none !important;
  font-size: 13px !important;
}

.kitty-copilot-panel.is-expanded-modal .copilot-tags-mini .copilot-key-tag,
.kitty-copilot-panel.is-expanded-modal .copilot-tags-mini .copilot-bpm-tag {
  font-size: 12px !important;
  padding: 2px 8px !important;
}

.kitty-copilot-panel.is-expanded-modal .copilot-recommendations {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 12px !important;
  max-height: 65vh !important;
  padding: 14px !important;
  overflow-y: auto !important;
}

.kitty-copilot-panel.is-expanded-modal .copilot-card {
  padding: 12px !important;
  gap: 8px !important;
}

.kitty-copilot-panel.is-expanded-modal .copilot-track-name {
  font-size: 13px !important;
  max-width: 100% !important;
}

.kitty-copilot-panel.is-expanded-modal .copilot-load-btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* Detached Standalone Window Mode (?copilot=1) */
body.copilot-window .app,
body.copilot-window .topbar,
body.copilot-window .decks,
body.copilot-window .mixer,
body.copilot-window .performance-studio,
body.copilot-window .library {
  display: none !important;
}
body.copilot-window .browser {
  grid-template-columns: 1fr !important;
  height: 100vh !important;
  max-height: none !important;
  border: none !important;
}
body.copilot-window .browser > aside {
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  padding: 12px !important;
}
body.copilot-window .sidebar-copilot {
  height: calc(100vh - 30px) !important;
  display: flex !important;
  flex-direction: column !important;
}
body.copilot-window .sidebar-copilot .copilot-recommendations {
  max-height: none !important;
  flex: 1 !important;
}


/* =========================================================================
   FLOATING DETACHED COPILOT (MATCHING DECK A FLOATING ARCHITECTURE)
   ========================================================================= */
.copilot-floating-placeholder {
  border: 1px dashed rgba(168, 85, 247, 0.45) !important;
  border-radius: 6px !important;
  background: rgba(168, 85, 247, 0.06) !important;
  margin: 6px 0 !important;
  height: 90px !important;
  display: block !important;
}

.kitty-copilot-panel.floating-copilot {
  position: fixed !important;
  z-index: 9999 !important;
  width: 320px !important;
  min-width: 270px !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 40px) !important;
  overflow: hidden !important;
  resize: both !important;
  box-shadow: 0 24px 70px #000, 0 0 0 2px #a855f7, 0 0 25px rgba(168, 85, 247, 0.5) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #101525, #080a12) !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.kitty-copilot-panel.floating-copilot .copilot-header {
  cursor: grab !important;
  user-select: none !important;
  background: rgba(168, 85, 247, 0.18) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.3) !important;
}
.kitty-copilot-panel.floating-copilot.copilot-dragging .copilot-header {
  cursor: grabbing !important;
}

.kitty-copilot-panel.floating-copilot.copilot-large {
  width: min(580px, 92vw) !important;
}
.kitty-copilot-panel.floating-copilot.copilot-large .copilot-recommendations {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  max-height: 480px !important;
  gap: 10px !important;
}
.kitty-copilot-panel.floating-copilot.copilot-large .copilot-track-name {
  max-width: 100% !important;
  font-size: 13px !important;
}


/* =========================================================================
   KITTY MEDIA GROUP -- ENHANCED LARGE ZOOM CONTROLS (LAPTOP & PRO DJ FIT)
   ========================================================================= */
.zoom-controls {
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: linear-gradient(145deg, #0f172a, #070a12) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  padding: 2px 4px !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s ease !important;
}

.zoom-controls:hover {
  border-color: rgba(56, 189, 248, 0.7) !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.zoom-controls::before {
  content: 'DECK' !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  color: #38bdf8 !important;
  padding: 0 6px !important;
  letter-spacing: 0.8px !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
  user-select: none !important;
}

/* Larger, high-visibility tactile buttons for plus and minus */
.zoom-controls button {
  width: 32px !important;
  min-width: 32px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e2e8f0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.zoom-controls button:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-1px) !important;
}

.zoom-controls button:active {
  transform: translateY(0) !important;
  background: rgba(56, 189, 248, 0.4) !important;
}

/* Crisp, large percentage display */
.zoom-controls span {
  min-width: 54px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  font-family: 'JetBrains Mono', 'Consolas', monospace !important;
  padding: 0 4px !important;
  letter-spacing: 0.4px !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.7) !important;
  user-select: none !important;
}

/* Reset button */
.zoom-controls #zoomReset {
  width: 28px !important;
  min-width: 28px !important;
  font-size: 14px !important;
  color: #94a3b8 !important;
}
.zoom-controls #zoomReset:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Authenticated mode: extra breathing room and glowing highlight */
body.is-authenticated .zoom-controls {
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* Responsive Laptop Adaptations (13-inch, 15-inch, 125%/150% scaled screens) */
@media (max-width: 1536px) {
  .topbar {
    padding: 0 12px !important;
  }
  .top-actions {
    gap: 6px !important;
  }
  .view-pod button {
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 1400px) {
  .topbar {
    height: auto !important;
    min-height: 56px !important;
  }
  .top-actions {
    gap: 5px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .top-actions::-webkit-scrollbar {
    display: none !important;
  }
  .view-pod button {
    padding: 0 6px !important;
    font-size: 10px !important;
  }
  .zoom-controls {
    flex-shrink: 0 !important;
  }
}


/* =========================================================================
   KITTY MEDIA GROUP -- EXACT IMAGE 1 TOPBAR & LAPTOP ZERO-CUTOFF ENGINE
   ========================================================================= */

.topbar {
  height: 52px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #090b10 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: visible !important;
}

.top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Compact, Sleek Button Sizing ("mai mici să intre frumos") */
.top-actions button,
.top-pod button,
.top-actions .outline {
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

/* 1. REC Button (Image 1: Dark pod, red dot, red text) */
#recordBtn.record {
  background: #0f172a !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
  font-weight: 700 !important;
}
#recordBtn.record:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* 2. AUTO DJ Button (Image 1: Vibrant crimson-pink pill) */
#autoDjBtn {
  background: linear-gradient(135deg, #e11d48, #be123c) !important;
  border: 1px solid #f43f5e !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  box-shadow: 0 0 10px rgba(225, 29, 72, 0.4) !important;
}
#autoDjBtn:hover {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.6) !important;
}

/* 3. Deck Normal / Deck Mini (Image 1: Electric Cyan Pill with Black Bold Text) */
#miniDeckModeBtn {
  background: #00d4ff !important;
  border: 1px solid #38bdf8 !important;
  color: #000000 !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.45) !important;
}
#miniDeckModeBtn:hover {
  background: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.7) !important;
  color: #000000 !important;
}

/* 4. Ascunde Deck A/B (Image 1: Vibrant Magenta-Red Button) */
#toggleMainDecksBtn {
  background: #da1437 !important;
  border: 1px solid #fb7185 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  box-shadow: 0 0 8px rgba(218, 20, 55, 0.35) !important;
}
#toggleMainDecksBtn:hover {
  background: #e11d48 !important;
  border-color: #fda4af !important;
}

/* 5. Doar Deck A/B + Playlist (Image 1: Purple/Indigo Button with Border) */
#deckPlaylistFocusBtn {
  background: rgba(124, 58, 237, 0.35) !important;
  border: 1px solid #8b5cf6 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important;
}
#deckPlaylistFocusBtn:hover {
  background: rgba(139, 92, 246, 0.5) !important;
  border-color: #a78bfa !important;
}

/* 6. Playlist ↕ (Image 1: Dark Slate Button) */
#librarySizeBtn {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}
#librarySizeBtn:hover {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 7. Precision Zoom Pod (Image 1: DECK - 77% + ↺) */
.zoom-controls {
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #0b0f19 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  padding: 0 2px !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.zoom-controls::before {
  content: 'DECK' !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  color: #64748b !important;
  padding: 0 5px !important;
  letter-spacing: 0.5px !important;
  user-select: none !important;
}
.zoom-controls button {
  width: 22px !important;
  min-width: 22px !important;
  height: 24px !important;
  line-height: 24px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #cbd5e1 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
.zoom-controls button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #38bdf8 !important;
}
.zoom-controls span {
  min-width: 44px !important;
  text-align: center !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  font-family: 'JetBrains Mono', 'Consolas', monospace !important;
  padding: 0 3px !important;
  user-select: none !important;
}
.zoom-controls #zoomReset {
  width: 20px !important;
  min-width: 20px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

/* 8. DJ Settings Button (Image 1: Dark Slate Button with Gear) */
#userSettingsBtn {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #e2e8f0 !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
}
#userSettingsBtn:hover {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* 9. Auth Pill (Image 1: Purple Pill with Avatar) */
#authBtn {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(124, 58, 237, 0.35)) !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  color: #f5f3ff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
}
#authBtn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(124, 58, 237, 0.55)) !important;
  border-color: #a855f7 !important;
  color: #ffffff !important;
}

/* Guarantee System Pod (Settings & Auth) Stays Anchored to the Right */
.system-pod {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* LAPTOP SCREEN ADAPTATIONS (<= 1440px / Dell 1366px Laptops) */
@media (max-width: 1440px), (max-height: 850px) {
  .topbar {
    height: 48px !important;
    padding: 0 8px !important;
  }
  .logo {
    font-size: 15px !important;
  }
  .top-actions {
    gap: 3px !important;
  }
  .top-actions button,
  .top-pod button,
  .top-actions .outline {
    height: 26px !important;
    line-height: 26px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
  #clock {
    font-size: 10px !important;
    padding: 2px 4px !important;
  }
  #topbarAccordionBtn {
    display: none !important; /* Hide redundant accordion button on laptops */
  }
  .kitty-learn-pod {
    display: none !important; /* Hide 180px text badge so DJ Settings always fit! */
  }
  .kofi-top-btn {
    display: none !important; /* Hide Ko-fi on small laptop screens to prevent overflow */
  }
  #fullscreenBtn {
    padding: 0 5px !important;
  }
}

#librarySizeBtn { display: none !important; }


/* =========================================================================
   KITTY MEDIA GROUP -- MASTER SCREEN MULTI-ANIMATION VISUALIZER
   ========================================================================= */
.pro-meter-screen {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: radial-gradient(circle, #0a1118, #030508 85%) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9), 0 0 15px rgba(56, 189, 248, 0.1) !important;
}

.master-screen-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

.viz-cycle-badge {
  position: absolute !important;
  top: 6px !important;
  left: 8px !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(10, 15, 25, 0.88) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  border-radius: 20px !important;
  padding: 3px 8px !important;
  cursor: pointer !important;
  color: #38bdf8 !important;
  font-family: 'Orbitron', monospace, sans-serif !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25) !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

.viz-cycle-badge:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: scale(1.06) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5) !important;
}

.viz-cycle-badge small {
  color: #94a3b8 !important;
  font-size: 7px !important;
  font-weight: 700 !important;
}

.viz-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  box-shadow: 0 0 6px #38bdf8 !important;
  animation: viz-dot-pulse 1s infinite alternate !important;
}

@keyframes viz-dot-pulse {
  0% { opacity: 0.5; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.25); box-shadow: 0 0 10px #38bdf8; }
}

.pro-meter-screen .meters {
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.pro-meter-screen strong {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  writing-mode: vertical-rl !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font: 800 7px 'Orbitron', sans-serif !important;
  letter-spacing: 2px !important;
  pointer-events: none !important;
}

.pro-meter-screen small {
  position: absolute !important;
  bottom: 2px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  z-index: 3 !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 6px !important;
  pointer-events: none !important;
}


/* =========================================================================
   KITTY MEDIA GROUP -- DISTINCT NEON PERFORMANCE PADS (IMAGE 2 REPLICA)
   ========================================================================= */

/* General Pad Square Card Base */
.sample-slots label {
  position: relative !important;
  border-radius: 8px !important;
  padding: 10px 6px !important;
  font: 800 9px 'Orbitron', monospace, sans-serif !important;
  text-align: center !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
}

.sample-slots label:hover {
  transform: translateY(-2px) !important;
}

/* ---------------- DECK A PADS (DISTINCT VIBRANT NEON PALETTE) ---------------- */

/* Deck A - PAD 1: NEON ELECTRIC CYAN */
.deck-a-editor .sample-slots label:nth-child(1) {
  border: 1px solid rgba(0, 240, 255, 0.45) !important;
  border-bottom: 3.5px solid #00f0ff !important;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.12), #0d131f 75%) !important;
  color: #00f0ff !important;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.15), inset 0 0 12px rgba(0, 240, 255, 0.05) !important;
}
.deck-a-editor .sample-slots label:nth-child(1):hover {
  border-color: #00f0ff !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.35), inset 0 0 16px rgba(0, 240, 255, 0.1) !important;
}

.deck-a-editor .sample-slots label:nth-child(1) .sample-volume {
  accent-color: #00f0ff !important;
}

/* Deck A - PAD 2: NEON ULTRA VIOLET / PURPLE */
.deck-a-editor .sample-slots label:nth-child(2) {
  border: 1px solid rgba(176, 38, 255, 0.45) !important;
  border-bottom: 3.5px solid #b026ff !important;
  background: linear-gradient(180deg, rgba(176, 38, 255, 0.12), #0d131f 75%) !important;
  color: #d8b4fe !important;
  box-shadow: 0 4px 15px rgba(176, 38, 255, 0.15), inset 0 0 12px rgba(176, 38, 255, 0.05) !important;
}
.deck-a-editor .sample-slots label:nth-child(2):hover {
  border-color: #b026ff !important;
  box-shadow: 0 0 20px rgba(176, 38, 255, 0.35), inset 0 0 16px rgba(176, 38, 255, 0.1) !important;
}

.deck-a-editor .sample-slots label:nth-child(2) .sample-volume {
  accent-color: #b026ff !important;
}

/* Deck A - PAD 3: NEON ACID EMERALD / GREEN */
.deck-a-editor .sample-slots label:nth-child(3) {
  border: 1px solid rgba(0, 255, 102, 0.45) !important;
  border-bottom: 3.5px solid #00ff66 !important;
  background: linear-gradient(180deg, rgba(0, 255, 102, 0.12), #0d131f 75%) !important;
  color: #00ff66 !important;
  box-shadow: 0 4px 15px rgba(0, 255, 102, 0.15), inset 0 0 12px rgba(0, 255, 102, 0.05) !important;
}
.deck-a-editor .sample-slots label:nth-child(3):hover {
  border-color: #00ff66 !important;
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.35), inset 0 0 16px rgba(0, 255, 102, 0.1) !important;
}

.deck-a-editor .sample-slots label:nth-child(3) .sample-volume {
  accent-color: #00ff66 !important;
}

/* Deck A - PAD 4: NEON SOLAR AMBER / ORANGE */
.deck-a-editor .sample-slots label:nth-child(4) {
  border: 1px solid rgba(255, 170, 0, 0.45) !important;
  border-bottom: 3.5px solid #ffaa00 !important;
  background: linear-gradient(180deg, rgba(255, 170, 0, 0.12), #0d131f 75%) !important;
  color: #ffaa00 !important;
  box-shadow: 0 4px 15px rgba(255, 170, 0, 0.15), inset 0 0 12px rgba(255, 170, 0, 0.05) !important;
}
.deck-a-editor .sample-slots label:nth-child(4):hover {
  border-color: #ffaa00 !important;
  box-shadow: 0 0 20px rgba(255, 170, 0, 0.35), inset 0 0 16px rgba(255, 170, 0, 0.1) !important;
}

.deck-a-editor .sample-slots label:nth-child(4) .sample-volume {
  accent-color: #ffaa00 !important;
}


/* ---------------- DECK B PADS (DISTINCT VIBRANT NEON PALETTE) ---------------- */

/* Deck B - PAD 1: NEON HOT MAGENTA / PINK */
.deck-b-editor .sample-slots label:nth-child(1) {
  border: 1px solid rgba(255, 0, 127, 0.45) !important;
  border-bottom: 3.5px solid #ff007f !important;
  background: linear-gradient(180deg, rgba(255, 0, 127, 0.12), #0d131f 75%) !important;
  color: #ff007f !important;
  box-shadow: 0 4px 15px rgba(255, 0, 127, 0.15), inset 0 0 12px rgba(255, 0, 127, 0.05) !important;
}
.deck-b-editor .sample-slots label:nth-child(1):hover {
  border-color: #ff007f !important;
  box-shadow: 0 0 20px rgba(255, 0, 127, 0.35), inset 0 0 16px rgba(255, 0, 127, 0.1) !important;
}

.deck-b-editor .sample-slots label:nth-child(1) .sample-volume {
  accent-color: #ff007f !important;
}

/* Deck B - PAD 2: NEON LASER CRIMSON / RED */
.deck-b-editor .sample-slots label:nth-child(2) {
  border: 1px solid rgba(255, 34, 68, 0.45) !important;
  border-bottom: 3.5px solid #ff2244 !important;
  background: linear-gradient(180deg, rgba(255, 34, 68, 0.12), #0d131f 75%) !important;
  color: #ff3b5c !important;
  box-shadow: 0 4px 15px rgba(255, 34, 68, 0.15), inset 0 0 12px rgba(255, 34, 68, 0.05) !important;
}
.deck-b-editor .sample-slots label:nth-child(2):hover {
  border-color: #ff2244 !important;
  box-shadow: 0 0 20px rgba(255, 34, 68, 0.35), inset 0 0 16px rgba(255, 34, 68, 0.1) !important;
}

.deck-b-editor .sample-slots label:nth-child(2) .sample-volume {
  accent-color: #ff2244 !important;
}

/* Deck B - PAD 3: NEON CYBER GOLD / YELLOW */
.deck-b-editor .sample-slots label:nth-child(3) {
  border: 1px solid rgba(255, 230, 0, 0.45) !important;
  border-bottom: 3.5px solid #ffe600 !important;
  background: linear-gradient(180deg, rgba(255, 230, 0, 0.12), #0d131f 75%) !important;
  color: #ffe600 !important;
  box-shadow: 0 4px 15px rgba(255, 230, 0, 0.15), inset 0 0 12px rgba(255, 230, 0, 0.05) !important;
}
.deck-b-editor .sample-slots label:nth-child(3):hover {
  border-color: #ffe600 !important;
  box-shadow: 0 0 20px rgba(255, 230, 0, 0.35), inset 0 0 16px rgba(255, 230, 0, 0.1) !important;
}

.deck-b-editor .sample-slots label:nth-child(3) .sample-volume {
  accent-color: #ffe600 !important;
}

/* Deck B - PAD 4: NEON AQUAMARINE / MINT ICE */
.deck-b-editor .sample-slots label:nth-child(4) {
  border: 1px solid rgba(0, 245, 212, 0.45) !important;
  border-bottom: 3.5px solid #00f5d4 !important;
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.12), #0d131f 75%) !important;
  color: #00f5d4 !important;
  box-shadow: 0 4px 15px rgba(0, 245, 212, 0.15), inset 0 0 12px rgba(0, 245, 212, 0.05) !important;
}
.deck-b-editor .sample-slots label:nth-child(4):hover {
  border-color: #00f5d4 !important;
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.35), inset 0 0 16px rgba(0, 245, 212, 0.1) !important;
}

.deck-b-editor .sample-slots label:nth-child(4) .sample-volume {
  accent-color: #00f5d4 !important;
}


/* =========================================================================
   KITTY MEDIA GROUP -- BALANCED, SPACIOUS & ELEGANT TOPBAR LAYOUT
   (Eliminates void after PRO, stops cramped grouping, adds beautiful breathing room)
   ========================================================================= */
.topbar {
  height: 54px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* No void between PRO and controls */
  background: #080a0f !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  overflow: visible !important;
}

.logo {
  margin-right: 18px !important; /* Clean, elegant space between PRO and the controls */
  flex-shrink: 0 !important;
}

.top-actions {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important; /* Beautiful breathing space between pods */
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* Individual Pods: Spacious, Elegant Groupings */
.top-pod {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important; /* Comfortable spacing between buttons inside pods */
  background: rgba(18, 24, 38, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 3px 5px !important;
  flex-shrink: 0 !important;
}

/* Comfortable, Generous Button Sizing (No longer cramped!) */
.top-actions button,
.top-pod button,
.top-actions .outline {
  height: 30px !important;
  line-height: 30px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

/* Clock: Sleek Digital Readout right after PRO */
#clock {
  font-family: 'JetBrains Mono', 'Consolas', monospace !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  letter-spacing: 0.5px !important;
  flex-shrink: 0 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}

/* Precision Zoom Pod: Spacious & Polished */
.zoom-controls {
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #0b0f19 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  padding: 0 3px !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.zoom-controls::before {
  content: 'DECK' !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  color: #64748b !important;
  padding: 0 6px !important;
  letter-spacing: 0.5px !important;
  user-select: none !important;
}
.zoom-controls button {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  line-height: 26px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #cbd5e1 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
.zoom-controls button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #38bdf8 !important;
}
.zoom-controls span {
  min-width: 48px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  font-family: 'JetBrains Mono', 'Consolas', monospace !important;
  padding: 0 4px !important;
  user-select: none !important;
}
.zoom-controls #zoomReset {
  width: 24px !important;
  min-width: 24px !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
}

/* System Pod: Pushed gracefully to the far right edge */
.system-pod {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important; /* Anchors DJ Settings and Auth to the right edge */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Responsive Laptop Adaptations (Maintains spacious look, fits gracefully) */
@media (max-width: 1440px) {
  .topbar {
    padding: 0 12px !important;
    height: 50px !important;
  }
  .logo {
    margin-right: 14px !important;
  }
  .top-actions {
    gap: 8px !important;
  }
  .top-pod {
    gap: 4px !important;
  }
  .top-actions button,
  .top-pod button,
  .top-actions .outline {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
  }
  .zoom-controls {
    height: 29px !important;
  }
  .zoom-controls button {
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
  }
}

@media (max-width: 1280px) {
  .top-actions {
    gap: 6px !important;
  }
  .top-actions button,
  .top-pod button,
  .top-actions .outline {
    padding: 0 8px !important;
    font-size: 10px !important;
  }
}


/* =========================================================================
   KITTY MEDIA GROUP -- PAD PLAY BUTTON DYNAMIC COLOR OVERRIDE (IMAGE 2 HOOK)
   Only the play button in the middle changes color, preserving the big neon card squares!
   ========================================================================= */
.sample-play {
  background: var(--pad-play-btn-color, var(--pad-default-btn-color, #00f0ff)) !important;
  border: 1px solid var(--pad-play-btn-color, var(--pad-default-btn-color, #00f0ff)) !important;
  color: var(--pad-play-icon-color, #050b14) !important;
  box-shadow: 0 0 14px var(--pad-play-btn-color, rgba(0, 240, 255, 0.5)) !important;
  transition: all 0.2s ease !important;
}

.sample-play:hover {
  transform: scale(1.1) !important;
  filter: brightness(1.25) !important;
}

/* Default Fallbacks when no custom swatch is picked */











/* =========================================================================
   KITTY MEDIA GROUP -- PAD TEXT & PLAY BUTTON DYNAMIC THEME COLORING
   ========================================================================= */

/* The entire pad text (PAD 1..4, small labels) responds dynamically to the chosen color */
.sample-slots label {
  color: var(--pad-theme-color, #ffffff) !important;
  border-bottom: 3.5px solid var(--pad-theme-color, var(--pad-default-btn-color, #00f0ff)) !important;
  transition: all 0.2s ease !important;
}

.sample-slots label small {
  color: var(--pad-theme-color, #94a3b8) !important;
  opacity: 0.9 !important;
}

/* Play button dynamically takes the chosen swatch color with high specificity */
.sample-slots label .sample-play,
.sample-play {
  background: var(--pad-play-btn-color, var(--pad-default-btn-color, #00f0ff)) !important;
  border: 1px solid var(--pad-play-btn-color, var(--pad-default-btn-color, #00f0ff)) !important;
  color: var(--pad-play-icon-color, #050b14) !important;
  box-shadow: 0 0 16px var(--pad-play-btn-color, rgba(0, 240, 255, 0.6)) !important;
  transition: all 0.2s ease !important;
}

.sample-slots label .sample-play:hover,
.sample-play:hover {
  transform: scale(1.12) !important;
  filter: brightness(1.3) !important;
  box-shadow: 0 0 22px var(--pad-play-btn-color, rgba(0, 240, 255, 0.8)) !important;
}

.sample-slots label .sample-volume {
  accent-color: var(--pad-play-btn-color, var(--pad-default-btn-color, #00f0ff)) !important;
}

/* Default distinct neon colors when no custom swatch is picked */
.deck-a-editor .sample-slots label:nth-child(1) { --pad-default-btn-color: #00f0ff; }
.deck-a-editor .sample-slots label:nth-child(2) { --pad-default-btn-color: #b026ff; }
.deck-a-editor .sample-slots label:nth-child(3) { --pad-default-btn-color: #00ff66; }
.deck-a-editor .sample-slots label:nth-child(4) { --pad-default-btn-color: #ffaa00; }

.deck-b-editor .sample-slots label:nth-child(1) { --pad-default-btn-color: #ff007f; }
.deck-b-editor .sample-slots label:nth-child(2) { --pad-default-btn-color: #ff2244; }
.deck-b-editor .sample-slots label:nth-child(3) { --pad-default-btn-color: #ffe600; }
.deck-b-editor .sample-slots label:nth-child(4) { --pad-default-btn-color: #00f5d4; }


/* =========================================================================
   KITTY MEDIA GROUP -- HARMONIZED SAMPLER & LIBRARY COLOR ACCENTS
   Matches DECK A · SAMPLER, DECK B · SAMPLER, and ＋ Adaugă piese to the chosen swatch!
   ========================================================================= */
.deck-a-editor h3,
.deck-b-editor h3 {
  color: var(--pad-theme-color, #ff7a00) !important;
  text-shadow: 0 0 12px var(--pad-theme-color, rgba(255, 122, 0, 0.45)) !important;
  transition: all 0.25s ease !important;
}

/* ＋ Adaugă piese (Square Button in Sidebar Library) */
.upload,
.browser > aside .library-actions > .upload,
.browser .library-actions > .upload {
  background: var(--pad-theme-color, #ff7a00) !important;
  border: 1px solid var(--pad-theme-color, #ff7a00) !important;
  color: var(--pad-theme-btn-text, #050b14) !important;
  box-shadow: 0 0 16px var(--pad-theme-color, rgba(255, 122, 0, 0.45)) !important;
  font-weight: 800 !important;
  transition: all 0.25s ease !important;
}

.upload:hover,
.browser > aside .library-actions > .upload:hover,
.browser .library-actions > .upload:hover {
  filter: brightness(1.25) !important;
  box-shadow: 0 0 24px var(--pad-theme-color, rgba(255, 122, 0, 0.7)) !important;
  transform: translateY(-2px) !important;
}

/* Studio Head subtitle and Performance accent */
.studio-head span {
  color: var(--pad-theme-color, var(--a)) !important;
  text-shadow: 0 0 8px var(--pad-theme-color, rgba(255, 122, 0, 0.3)) !important;
  transition: all 0.25s ease !important;
}


/* =========================================================================
   KITTY MEDIA GROUP -- PERFECTLY EQUAL, HARMONIZED & COMPACT TOPBAR (FITS AT 77%)
   Every button has the exact same 28px height, uniform padding, and zero overflow.
   ========================================================================= */

/* 1. Container: Zero overflow, elegant sleek height */
.topbar {
  height: 46px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #080a0f !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.logo {
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.top-actions {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  overflow: visible !important;
}

/* 2. Pods: Sleek, compact grouping boxes */
.top-pod {
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(18, 24, 38, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  padding: 0 3px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* 3. EVERY BUTTON IN TOPBAR: Exactly Equal 28px Height & Level Alignment */
.top-actions button,
.top-pod button,
.top-actions .outline,
.topbar-accordion-btn,
.kofi-top-btn,
#digiStorageBtn {
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Clock: Equal 28px Height */
#clock {
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Topbar Accordion Button (▾ Restrânge): Sleek & Equal */
#topbarAccordionBtn {
  background: #111622 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
  padding: 0 6px !important;
}
#topbarAccordionBtn:hover {
  background: #1e2638 !important;
  color: #ffffff !important;
}

/* Copilot & Mixer Toggle Buttons: Sleek & Equal */
#toggleCopilotBtn,
#toggleMixerBtn {
  background: #111622 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
}

/* 4. Precision Zoom Pod: Exactly 28px, Perfectly Level */
.zoom-controls {
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #0b0f19 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  padding: 0 2px !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.zoom-controls::before {
  content: 'DECK' !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  padding: 0 4px !important;
}
.zoom-controls button {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  padding: 0 !important;
  font-size: 13px !important;
}
.zoom-controls span {
  min-width: 38px !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  padding: 0 2px !important;
}
.zoom-controls #zoomReset {
  width: 20px !important;
  min-width: 20px !important;
  font-size: 12px !important;
}

/* 5. Kitty AI Learn Pod: Sleek pill, never stretches */
.kitty-learn-pod {
  height: 28px !important;
  padding: 0 7px !important;
  gap: 5px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #34d399 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
.kitty-learn-pod .kitty-brain-dot {
  width: 6px !important;
  height: 6px !important;
  background: #10b981 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #10b981 !important;
}

/* 6. System Pod: Pinned to the right, fully visible */
.system-pod {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Ko-fi & Digi: Compact & Equal */
.kofi-top-btn {
  padding: 0 6px !important;
  font-size: 10px !important;
  background: rgba(255, 95, 95, 0.15) !important;
  border: 1px solid rgba(255, 95, 95, 0.3) !important;
  color: #ff7575 !important;
}
#digiStorageBtn {
  padding: 0 6px !important;
  font-size: 10px !important;
}


/* =========================================================================
   KITTY MEDIA GROUP -- FLOATING HUD VISIBLE OVER EVERYTHING (Z-INDEX 99999)
   ========================================================================= */
.kitty-copilot-panel.floating-copilot {
  position: fixed !important;
  z-index: 99999 !important;
  width: 340px !important;
  min-width: 280px !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 40px) !important;
  overflow: hidden !important;
  box-shadow: 0 24px 70px #000, 0 0 0 2px #a855f7, 0 0 35px rgba(168, 85, 247, 0.7) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #101525, #080a12) !important;
  display: flex !important;
  flex-direction: column !important;
  animation: copilot-hud-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes copilot-hud-pop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

#toggleCopilotBtn.active {
  background: linear-gradient(135deg, #a855f7, #7e22ce) !important;
  color: #ffffff !important;
  border-color: #c084fc !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.7) !important;
}

/* Sidebar scroll fix so docked copilot is never hidden behind overflow */
.browser > aside {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}
.browser .library-actions {
  overflow: visible !important;
}


/* =========================================================================
   KITTY MEDIA GROUP -- DOCKED SIDEBAR COPILOT FULL VISIBILITY FIX
   Ensures recommendation cards, track titles, and Deck load buttons
   appear 100% visible and stacked vertically in both docked AND floating modes!
   ========================================================================= */
.kitty-copilot-panel,
.sidebar-copilot {
  display: flex !important;
  flex-direction: column !important; /* CRITICAL: Stacks header and recommendations vertically */
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, #0e1320, #080a12) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  overflow: visible !important;
  margin: 8px 0 !important;
}

.kitty-copilot-panel .copilot-header,
.sidebar-copilot .copilot-header {
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px !important;
  gap: 5px !important;
  background: rgba(168, 85, 247, 0.12) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.25) !important;
}

.kitty-copilot-panel .copilot-body,
.sidebar-copilot .copilot-body {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 6px !important;
  min-height: 50px !important;
  overflow: visible !important;
}

.kitty-copilot-panel .copilot-recommendations,
.sidebar-copilot .copilot-recommendations {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  min-height: 40px !important;
}

.kitty-copilot-panel .copilot-card,
.sidebar-copilot .copilot-card {
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 8px !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 6px !important;
  overflow: visible !important;
}

.kitty-copilot-panel .copilot-card:hover,
.sidebar-copilot .copilot-card:hover {
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25) !important;
}

.kitty-copilot-panel .copilot-card-top,
.sidebar-copilot .copilot-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.kitty-copilot-panel .copilot-match-score,
.sidebar-copilot .copilot-match-score {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #fb923c !important;
}

.kitty-copilot-panel .copilot-reason-pill,
.sidebar-copilot .copilot-reason-pill {
  font-size: 9px !important;
  padding: 1px 5px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  color: #cbd5e1 !important;
}

.kitty-copilot-panel .copilot-card-info,
.sidebar-copilot .copilot-card-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  width: 100% !important;
}

.kitty-copilot-panel .copilot-track-name,
.sidebar-copilot .copilot-track-name {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: break-word !important;
  display: block !important;
  max-width: 100% !important;
}

.kitty-copilot-panel .copilot-track-meta,
.sidebar-copilot .copilot-track-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  color: #94a3b8 !important;
}

.kitty-copilot-panel .copilot-card-actions,
.sidebar-copilot .copilot-card-actions {
  width: 100% !important;
  margin-top: 3px !important;
}

.kitty-copilot-panel .copilot-load-btn,
.sidebar-copilot .copilot-load-btn {
  width: 100% !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #a855f7, #7e22ce) !important;
  color: #ffffff !important;
  border: 1px solid #c084fc !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4) !important;
  transition: all 0.15s ease !important;
}

.kitty-copilot-panel .copilot-load-btn:hover,
.sidebar-copilot .copilot-load-btn:hover {
  background: linear-gradient(135deg, #c084fc, #9333ea) !important;
  box-shadow: 0 0 16px rgba(192, 132, 252, 0.7) !important;
  transform: translateY(-1px) !important;
}

/* Ensure sidebar container scrolls cleanly and never clips Copilot */
.browser > aside {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  display: flex !important;
  flex-direction: column !important;
}

.browser .library-actions {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}


/* =========================================================================
   KITTY MEDIA GROUP -- SUBBAR NOTICE & VIEW CONTROLS (ALIGNED UNDER DJ SETTINGS)
   Image 1 controls moved to subbar, always visible on all devices, zero collapse trap!
   ========================================================================= */
.notice.subbar-notice {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 12px !important;
  min-height: 38px !important;
  background: #0d111a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2b97a !important;
  font-size: 11px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.notice-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  color: #fbbf24 !important;
}

.notice-midi-badge {
  background: rgba(245, 158, 11, 0.2) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

.subbar-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important; /* Positions neatly under DJ Settings */
}

.subbar-view-pod {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(18, 24, 38, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  padding: 2px 4px !important;
}

.subbar-view-pod button {
  height: 27px !important;
  line-height: 27px !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.subbar-zoom {
  height: 27px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #0b0f19 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  padding: 0 2px !important;
  gap: 2px !important;
  box-sizing: border-box !important;
}
.subbar-zoom::before {
  content: 'DECK' !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  padding: 0 4px !important;
}
.subbar-zoom button {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  padding: 0 !important;
  font-size: 13px !important;
}
.subbar-zoom span {
  min-width: 38px !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  padding: 0 2px !important;
}
.subbar-zoom #zoomReset {
  width: 20px !important;
  min-width: 20px !important;
  font-size: 12px !important;
}

/* Force view-pod, subbar-view-pod, and zoom to be ALWAYS visible everywhere! */
.topbar.is-collapsed .view-pod,
.topbar.is-collapsed .zoom-controls,
.view-pod,
.subbar-view-pod,
.zoom-controls,
.subbar-zoom {
  max-width: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  display: inline-flex !important;
}

/* --- REALISTIC METALLIC JOG WHEEL --- */
.platter { background: transparent !important; box-shadow: none !important; border: none !important; display: flex; justify-content: center; align-items: center; }
.platter.playing { animation: none !important; }
.platter.playing .vinyl-record { animation: spin 2s linear infinite; }
.interface-3d .platter { background: transparent !important; box-shadow: none !important; border: none !important; filter: none !important; }
.interface-3d .platter:after { display: none !important; }
.interface-white .platter { box-shadow: none !important; }

.jog-wheel-assembly {
  position: absolute; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle, #22252a 0%, #111215 70%, #08090b 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,0.8), inset 0 2px 5px rgba(255,255,255,0.1), inset 0 -5px 15px rgba(0,0,0,0.9);
  display: flex; justify-content: center; align-items: center; border: 2px solid #2c3038;
}
.jog-outer-ring {
  position: absolute; width: 94%; height: 94%; border-radius: 50%;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20viewBox%3D%22-100%20-100%20200%20200%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22hole%22%20cx%3D%2240%25%22%20cy%3D%2240%25%22%20r%3D%2260%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23000%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%231b1e25%22%2F%3E%0A%20%20%20%20%3C%2FradialGradient%3E%0A%20%20%20%20%3CradialGradient%20id%3D%22ring%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23111%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%2272%25%22%20stop-color%3D%22%231a1c22%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%2285%25%22%20stop-color%3D%22%233c4350%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%2296%25%22%20stop-color%3D%22%231a1c22%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23000%22%2F%3E%0A%20%20%20%20%3C%2FradialGradient%3E%0A%20%20%20%20%3Cfilter%20id%3D%22glow%22%3E%0A%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%221%22%20dy%3D%221%22%20stdDeviation%3D%220.5%22%20flood-color%3D%22%23ffffff%22%20flood-opacity%3D%220.1%22%2F%3E%0A%20%20%20%20%20%20%3CfeDropShadow%20dx%3D%22-1%22%20dy%3D%22-1%22%20stdDeviation%3D%221%22%20flood-color%3D%22%23000000%22%20flood-opacity%3D%220.9%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3C!--%20Outer%20metallic%20ring%20background%20--%3E%0A%20%20%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%22100%22%20fill%3D%22url(%23ring)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2285.00%22%20cy%3D%220.00%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2283.14%22%20cy%3D%2217.67%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2277.65%22%20cy%3D%2234.57%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2268.77%22%20cy%3D%2249.96%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2256.88%22%20cy%3D%2263.17%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2242.50%22%20cy%3D%2273.61%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2226.27%22%20cy%3D%2280.84%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%228.88%22%20cy%3D%2284.53%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-8.88%22%20cy%3D%2284.53%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-26.27%22%20cy%3D%2280.84%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-42.50%22%20cy%3D%2273.61%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-56.88%22%20cy%3D%2263.17%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-68.77%22%20cy%3D%2249.96%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-77.65%22%20cy%3D%2234.57%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-83.14%22%20cy%3D%2217.67%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-85.00%22%20cy%3D%220.00%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-83.14%22%20cy%3D%22-17.67%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-77.65%22%20cy%3D%22-34.57%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-68.77%22%20cy%3D%22-49.96%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-56.88%22%20cy%3D%22-63.17%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-42.50%22%20cy%3D%22-73.61%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-26.27%22%20cy%3D%22-80.84%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%22-8.88%22%20cy%3D%22-84.53%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%228.88%22%20cy%3D%22-84.53%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2226.27%22%20cy%3D%22-80.84%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2242.50%22%20cy%3D%22-73.61%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2256.88%22%20cy%3D%22-63.17%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2268.77%22%20cy%3D%22-49.96%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2277.65%22%20cy%3D%22-34.57%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%2283.14%22%20cy%3D%22-17.67%22%20r%3D%228%22%20fill%3D%22url(%23hole)%22%20stroke%3D%22%23000%22%20stroke-width%3D%220.5%22%20filter%3D%22url(%23glow)%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2274%22%20fill%3D%22none%22%20stroke%3D%22%23606b7d%22%20stroke-width%3D%222%22%20opacity%3D%220.8%22%20%2F%3E%0A%20%20%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2272%22%20fill%3D%22none%22%20stroke%3D%22%23222%22%20stroke-width%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.9);
  display: flex; justify-content: center; align-items: center;
}
.jog-indent-track { display: none; }
.jog-inner-body {
  position: absolute; width: 79%; height: 79%; border-radius: 50%;
  background: radial-gradient(circle, #25282e 0%, #141619 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.08); border: 1px solid #3a3f4b;
}
.vinyl-record {
  position: relative; width: 67%; height: 67%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #111 0px, #111 1px, #1a1a1a 2px, #080808 3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.7), inset 0 0 10px rgba(0,0,0,0.9);
  display: flex; justify-content: center; align-items: center; border: 1px solid #333;
}
.vinyl-sheen {
  position: absolute; width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}
.vinyl-label {
  width: 40%; height: 40%; border-radius: 50%;
  background: radial-gradient(circle, #1a1c23 0%, #0d0e12 100%); border: 2px solid #ff6600;
  box-shadow: 0 0 10px rgba(255,102,0,0.4), inset 0 0 5px rgba(0,0,0,0.8);
  display: flex; justify-content: center; align-items: center; position: relative;
  background-size: cover; background-position: center;
}
.deck-a .vinyl-label { border-color: var(--a); box-shadow: 0 0 10px var(--a), inset 0 0 5px rgba(0,0,0,0.8); }
.deck-b .vinyl-label { border-color: var(--b); box-shadow: 0 0 10px var(--b), inset 0 0 5px rgba(0,0,0,0.8); }

.cue-marker {
  position: absolute; top: 3px; width: 2px; height: 15%; background: #ff6600; border-radius: 1px; box-shadow: 0 0 4px #ff6600;
}
.deck-a .cue-marker { background: var(--a); box-shadow: 0 0 4px var(--a); }
.deck-b .cue-marker { background: var(--b); box-shadow: 0 0 4px var(--b); }

.spindle-hub {
  width: 35%; height: 35%; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center;
  color: #fff; font-weight: bold; font-size: 10px; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.deck-a .spindle-hub { background: radial-gradient(circle, var(--a) 0%, #0099cc 100%); }
.deck-b .spindle-hub { background: radial-gradient(circle, var(--b) 0%, #cc0066 100%); }