*{box-sizing:border-box}:root{--cyan:#36e8ff;--pink:#ff42c8;--green:#69f58c;--amber:#ffc04f;--red:#ff415c;--text:#eaf3fb;--muted:#8190a2}
html{background:#05070a}body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at 50% -15%,#14243b,#080c12 38%,#05070a 72%);transition:background .35s;overflow-x:hidden}button,input{font:inherit}a{color:inherit;text-decoration:none}header,main,footer{max-width:1500px;margin:auto}
header{height:58px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{display:flex;align-items:center;gap:9px}.brand>b{width:39px;height:39px;display:grid;place-items:center;border:1px solid #43515f;border-radius:8px;background:#121922;font:800 12px Orbitron}.brand strong{display:block;font:800 18px Orbitron}.brand em,footer span{font-style:normal;color:var(--cyan)}.brand small{display:block;color:#708092;font:700 7px Orbitron}.top-links{display:flex;gap:6px}.top-links a,.head-actions>*{padding:8px 10px;border:1px solid #31404e;border-radius:7px;background:#0d141c;color:#9cabb9;font:700 7px Orbitron}.head-actions{display:flex;gap:6px;align-items:center}.head-actions button{cursor:pointer}.online{color:#a9c2ca}
main{padding:0 12px 42px}.event-display{margin:0 0 9px;border:1px solid #2c4653;border-radius:9px;background:#07151b;overflow:hidden}.event-next{display:flex;gap:10px;align-items:center;padding:7px 11px;border-bottom:1px solid #17333e}.event-next span{font:700 6px Orbitron;color:#638d98}.event-next strong{font:700 9px Orbitron;color:#c8f9ff}.ticker-window{height:22px;overflow:hidden;position:relative}.ticker-window div{position:absolute;white-space:nowrap;line-height:22px;padding-left:100%;font:700 7px Orbitron;color:#7fa4ae;animation:ticker 26s linear infinite}@keyframes ticker{to{transform:translateX(-100%)}}
.rig{display:grid;grid-template-columns:1fr .9fr 1fr;gap:9px;padding:9px;border:1px solid #35404d;border-radius:20px;background:linear-gradient(145deg,#151c25,#0b1016);box-shadow:0 22px 60px #0009,inset 0 1px #424c59}.deck,.mixer{min-width:0;padding:13px;border:1px solid #35414e;border-radius:14px;background:linear-gradient(145deg,#181f28,#0d1218 72%);box-shadow:inset 0 1px #3e4956,0 8px 20px #0008}.label{display:flex;justify-content:space-between;margin-bottom:7px;color:#8290a1;font:700 7px Orbitron}.label b{font-size:10px;color:#d8e1eb}.label.center{justify-content:center;gap:9px}
.deck-screen,.master{border:1px solid #286276;border-radius:7px;background:linear-gradient(rgba(55,231,255,.025) 1px,transparent 1px),#06171e;background-size:100% 17px;box-shadow:inset 0 0 25px #000}.deck-screen{padding:8px}.deck-screen>div{display:flex;justify-content:space-between;color:#69929d;font:700 7px Orbitron}.deck-screen>strong{display:block;margin:5px 0;color:#c9f9ff;font:700 10px Orbitron;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wave-wrap{position:relative}.wave-wrap canvas{display:block;width:100%;height:58px;border-block:1px solid #153945;cursor:pointer}.beat-leds{position:absolute;top:3px;left:50%;transform:translateX(-50%);display:flex;gap:4px}.beat-leds i{width:5px;height:5px;border:1px solid #5a7b85;border-radius:50%}.beat-leds i.on{background:white;box-shadow:0 0 7px white}.deck-meta{gap:10px}
.deck-core{display:grid;align-items:center;margin:10px 0 8px;gap:8px}.deck-a-core{grid-template-columns:50px 43px 1fr}.deck-b-core{grid-template-columns:1fr 43px 50px}.jog{width:min(100%,260px);aspect-ratio:1;margin:auto;position:relative;border:8px solid #28323e;border-radius:50%;background:repeating-radial-gradient(circle,#37414d 0 1px,#171d24 1px 4px);box-shadow:0 0 0 1px #53606e,inset 0 0 36px #000,0 10px 23px #000a;cursor:grab;touch-action:none}.ticks{position:absolute;inset:5.5%;border:2px dotted #596777;border-radius:50%}.disc{position:absolute;inset:22%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid #52606d;border-radius:50%;background:radial-gradient(circle,#222b36,#080b0f 76%)}.disc small{font:700 6px Orbitron;color:#7d8d9d}.disc strong{max-width:90%;font:800 9px Orbitron;color:#e3fbff;line-height:1.25}.disc span{margin-top:5px;color:var(--cyan);font:700 6px Orbitron}.panel-b .disc span{color:var(--pink)}
.pitch{display:flex;flex-direction:column;align-items:center;gap:5px;color:#7e8d9d;font:700 6px Orbitron}.pitch input{width:115px;transform:rotate(-90deg);accent-color:var(--cyan)}.panel-b .pitch input{accent-color:var(--pink)}.pitch b{font-size:6px}.loop-side{display:flex;flex-direction:column;align-items:center;gap:4px}.loop-side span{font:700 6px Orbitron;color:#778797}.loop-side button{width:34px;padding:5px 2px;border:1px solid #40505d;border-radius:4px;background:#101720;color:#9cabb9;font:700 5px Orbitron;cursor:pointer}.loop-side button.active{color:#d1fbff;border-color:#3a8da0;box-shadow:0 0 9px #37e7ff33}
.transport{display:flex;justify-content:center;gap:14px}.transport button{width:46px;height:46px;border:1px solid #4a5968;border-radius:50%;background:linear-gradient(#202a35,#0b1117);color:#b8c5d2;box-shadow:inset 0 1px #657281,0 5px 11px #0008;font:700 7px Orbitron;cursor:pointer}.transport .play{color:#8affd1}.hotcues{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:7px}.hotcues button{height:28px;border:1px solid #42515e;border-radius:4px;background:#111820;color:#94a3b3;font:700 6px Orbitron}.hotcues button.set{color:#d7fbff;border-color:#378498}
.menu-strip{display:grid;grid-template-columns:70px 1fr;gap:8px;margin-bottom:7px}.menu-knob-wrap{display:flex;flex-direction:column;align-items:center;color:#718192;font:700 5.5px Orbitron}.menu-knob{width:46px;height:46px;position:relative;border:1px solid #697684;border-radius:50%;background:radial-gradient(circle at 40% 35%,#5d6977,#151a20 61%);cursor:grab}.menu-knob u,.knob u{position:absolute;left:50%;top:3px;width:2px;height:12px;background:var(--cyan);transform-origin:50% 18px}.menu-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;align-self:end}.menu-tabs button{padding:8px 2px;border:1px solid #394958;border-radius:5px;background:#101820;color:#8190a1;font:700 6px Orbitron;cursor:pointer}.menu-tabs button.active{color:#c9faff;border-color:#398397;background:#0a252e}
.master{height:205px;padding:9px;overflow:hidden}.masterhead{display:flex;justify-content:space-between;padding-bottom:6px;border-bottom:1px solid #1a3b47;color:#638d98;font:700 7px Orbitron}.menu-page{display:none!important;height:169px;overflow:auto}.menu-page.active{display:block!important}.social-menu.active{display:grid!important}.menu-page::-webkit-scrollbar,#library::-webkit-scrollbar{width:6px}.menu-page::-webkit-scrollbar-thumb,#library::-webkit-scrollbar-thumb{background:#2b5a67;border-radius:6px}#library{height:169px;overflow:auto}.library-head,.track-row{display:grid;grid-template-columns:23px 1fr 44px 42px 42px;gap:5px;align-items:center}.library-head{position:sticky;top:0;z-index:2;padding:6px 3px;background:#06171e;color:#5d8792;font:700 6px Orbitron}.track-row{padding:6px 3px;border-top:1px solid #173742}.track-row:hover{background:#0a2730}.track-row .num,.track-row .bpm{color:#83b4be;font:700 6px Orbitron}.track-row strong{display:block;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row .title span{display:block;color:#62838c;font-size:7px}.track-row button{padding:5px 2px;border:1px solid #2d6c7a;border-radius:4px;background:#0a232a;color:#bdf8ff;font:700 5px Orbitron}.track-row button:last-child{border-color:#794c70;color:#ffd2f4;background:#26121f}.loading{text-align:center;padding:28px;color:#638b95;font:700 7px Orbitron}
.social-menu{grid-template-columns:1fr 1fr;gap:6px;padding:6px 1px}.social{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;gap:0 8px;align-items:center;padding:8px;border:1px solid #314652;border-radius:7px;background:#091920}.social i{grid-row:1/3;width:28px;height:28px;display:grid;place-items:center;border-radius:7px;color:#fff;font-style:normal;font-weight:900;font-size:14px}.social b{font:700 7px Orbitron}.social span{font-size:7px;color:#7b929c}.twitch i{background:#9146ff}.kick i{background:#53fc18;color:#071008}.instagram i{background:linear-gradient(135deg,#ffc14d,#f43b73,#8134af)}.tiktok i{background:#111;box-shadow:inset 3px 0 #25f4ee,inset -3px 0 #fe2c55}.youtube i{background:#f00}.discord i{background:#5865f2}.soundcloud i{background:#f50}.xnet i{background:#050505;border:1px solid #666}.info-card{text-align:center;padding:20px 8px}.info-card>b{color:#d4fbff;font:800 11px Orbitron}.info-card p{color:#7e98a2;font-size:9px;line-height:1.6}.info-card a{display:inline-block;margin:4px;padding:8px 10px;border:1px solid #34788a;border-radius:5px;background:#0a252d;color:#c8faff;font:700 6px Orbitron}
.mixer-matrix{display:grid;grid-template-columns:1fr 1fr 15px 15px 1fr 1fr;gap:6px;align-items:start;margin:10px 3px 8px;padding:8px 3px;border-block:1px solid #293945}.matrix-side,.matrix-eq{display:grid;grid-template-rows:48px 45px 45px 45px;gap:2px}.control{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#8998a8;font:700 5.5px Orbitron}.knob{width:29px;height:29px;position:relative;border:1px solid #667482;border-radius:50%;background:radial-gradient(circle at 40% 35%,#596675,#151a20 61%);cursor:ns-resize;touch-action:none}.knob.big{width:35px;height:35px}.knob u{height:8px;transform-origin:50% 12px}.knob.big u{height:10px;transform-origin:50% 15px}.right .knob u{background:var(--pink)}.eq-spacer{height:48px}.vu-column{display:flex;flex-direction:column;align-items:center;gap:3px;color:#6f8290;font:700 5px Orbitron}.vu{position:relative;width:11px;height:181px;overflow:hidden;border:1px solid #354754;border-radius:3px;background:repeating-linear-gradient(to top,#101820 0 4px,#1d2932 4px 6px)}.vu b{position:absolute;bottom:1px;left:1px;right:1px;height:0;background:linear-gradient(to top,var(--green) 0 66%,var(--amber) 66% 84%,var(--red) 84%);transition:height .06s}.cross{display:flex;align-items:center;gap:8px;color:#758596;font:700 6px Orbitron}.cross input{flex:1;accent-color:var(--cyan)}
footer{padding:0 20px 22px;display:flex;justify-content:space-between;color:#718091;font-size:8px}footer b{font:800 13px Orbitron}.mobile-tabs{display:none}#toast{position:fixed;right:16px;bottom:16px;z-index:20;padding:9px 12px;border:1px solid #394b58;border-radius:7px;background:#0c131be8;font-size:9px;opacity:0;transform:translateY(6px);transition:.2s}#toast.show{opacity:1;transform:none}
#lights{
 position:fixed;inset:0;z-index:18;pointer-events:none;overflow:hidden;
 opacity:0;transition:opacity .28s ease;mix-blend-mode:screen
}
.lights-on #lights{opacity:1}
#lights::before,#lights::after{
 content:"";position:absolute;top:-15vh;width:62vw;height:115vh;
 filter:blur(38px);opacity:.23;transition:opacity .3s,transform .5s;
}
#lights::before{left:-15vw;background:radial-gradient(ellipse at 45% 18%,#37e7ff99 0,#37e7ff30 28%,transparent 67%);transform:rotate(8deg)}
#lights::after{right:-15vw;background:radial-gradient(ellipse at 55% 18%,#ff3bc899 0,#ff3bc830 28%,transparent 67%);transform:rotate(-8deg)}
.party-a #lights::before{opacity:.42}.party-a #lights::after{opacity:.07}
.party-b #lights::before{opacity:.07}.party-b #lights::after{opacity:.42}
.party-both #lights::before,.party-both #lights::after{opacity:.34}
.party-idle #lights::before,.party-idle #lights::after{opacity:.22}
#lights i{
 position:absolute;top:-25%;width:15vw;height:130vh;opacity:0;
 filter:blur(14px);transform-origin:top center;transition:opacity .3s,transform .45s;
 border-radius:50%
}
.lights-on.party-idle #lights i:nth-child(1){left:13%;background:linear-gradient(#37e7ff99,transparent 72%);transform:rotate(18deg);opacity:.17}
.lights-on.party-idle #lights i:nth-child(2){left:35%;background:linear-gradient(#37e7ff55,transparent 68%);transform:rotate(-12deg);opacity:.10}
.lights-on.party-idle #lights i:nth-child(3){right:13%;background:linear-gradient(#ff3bc899,transparent 72%);transform:rotate(-18deg);opacity:.17}
.lights-on.party-idle #lights i:nth-child(4){right:35%;background:linear-gradient(#ff3bc855,transparent 68%);transform:rotate(12deg);opacity:.10}
.party-a #lights i:nth-child(1){left:14%;background:linear-gradient(#37e7ff,transparent 72%);transform:rotate(21deg);opacity:.30}
.party-a #lights i:nth-child(2){left:38%;background:linear-gradient(#37e7ffbb,transparent 70%);transform:rotate(-14deg);opacity:.18}
.party-b #lights i:nth-child(3){right:14%;background:linear-gradient(#ff3bc8,transparent 72%);transform:rotate(-21deg);opacity:.30}
.party-b #lights i:nth-child(4){right:38%;background:linear-gradient(#ff3bc8bb,transparent 70%);transform:rotate(14deg);opacity:.18}
.party-both #lights i:nth-child(1){left:13%;background:linear-gradient(#37e7ff,transparent 72%);transform:rotate(20deg);opacity:.23}
.party-both #lights i:nth-child(2){left:36%;background:linear-gradient(#37e7ff99,transparent 70%);transform:rotate(-12deg);opacity:.14}
.party-both #lights i:nth-child(3){right:13%;background:linear-gradient(#ff3bc8,transparent 72%);transform:rotate(-20deg);opacity:.23}
.party-both #lights i:nth-child(4){right:36%;background:linear-gradient(#ff3bc899,transparent 70%);transform:rotate(12deg);opacity:.14}
.party-a .panel-a{box-shadow:0 0 44px #37e7ff50,inset 0 1px #3e4956}
.party-b .panel-b{box-shadow:0 0 44px #ff3bc850,inset 0 1px #3e4956}
.party-both .panel-a{box-shadow:0 0 48px #37e7ff48}.party-both .panel-b{box-shadow:0 0 48px #ff3bc848}
#party.active{
 border-color:#59eafa;color:#d9fbff;background:#0a2e37;
 box-shadow:0 0 14px #37e7ff88,inset 0 0 12px #37e7ff20
}
@media(max-width:1100px){.rig{grid-template-columns:1fr 1fr}.mixer{grid-column:1/-1;grid-row:2}.top-links{display:none}.jog{max-width:250px}}
@media(max-width:700px){header{height:auto;padding:10px}.online{display:none}.brand strong{font-size:14px}main{padding:0 6px 30px}.mobile-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;position:sticky;top:3px;z-index:12;margin-bottom:6px}.mobile-tabs button{padding:9px;border:1px solid #374957;border-radius:5px;background:#101820;color:#8291a2;font:700 6px Orbitron}.mobile-tabs button.active{color:#c9faff;border-color:#398397}.rig{display:block;padding:6px}.rig>.deck,.rig>.mixer{display:none}.rig.show-a>.panel-a,.rig.show-mix>.panel-mix,.rig.show-b>.panel-b{display:block}.deck-a-core{grid-template-columns:46px 39px 1fr}.deck-b-core{grid-template-columns:1fr 39px 46px}.jog{max-width:255px}.mixer-matrix{grid-template-columns:1fr 1fr 12px 12px 1fr 1fr;gap:4px}.vu{width:9px}.social-menu{grid-template-columns:1fr 1fr}.event-next{display:block}.event-next span{display:block;margin-bottom:3px}footer{padding:0 10px 18px;flex-direction:column;gap:6px}}

/* V8 additions */
.trackline{display:grid!important;grid-template-columns:1fr auto;gap:8px;align-items:center}.trackline strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 10px Orbitron;color:#c9f9ff}.trackline span{color:#8fcbd4;font:700 7px Orbitron}
.rolling-wrap{position:relative;height:72px;border-block:1px solid #173b47;overflow:hidden;background:#041116}.rolling-wrap canvas{width:100%;height:72px;display:block}.center-playhead{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 7px #fff}.wave-tip{position:absolute;top:4px;display:none;padding:3px 5px;border:1px solid #46616c;border-radius:4px;background:#061014e8;color:#d8faff;font:700 6px Orbitron;pointer-events:none}
.overview-wrap{position:relative;height:31px;margin-top:4px}.overview-wrap canvas{width:100%;height:31px!important;border:0!important}.overview-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff9;pointer-events:none}
.deck-tools{display:grid;grid-template-columns:auto auto auto auto 1fr;gap:4px;align-items:center;margin:6px 0}.deck-tools button{padding:5px;border:1px solid #3b4b58;border-radius:4px;background:#101820;color:#8797a7;font:700 5px Orbitron;cursor:pointer}.deck-tools button.active{color:#c9faff;border-color:#348295;box-shadow:0 0 7px #37e7ff25}.panel-b .deck-tools button.active{color:#ffd4f4;border-color:#8b4a78;box-shadow:0 0 7px #ff3bc825}.deck-tools label{display:flex;align-items:center;gap:5px;justify-content:flex-end;color:#78899a;font:700 5px Orbitron}.deck-tools input{width:70px}
.cover{width:44px;height:44px;border-radius:50%;margin:2px auto 4px;background:radial-gradient(circle,#17222c,#080b0e);background-size:cover;background-position:center;box-shadow:inset 0 0 9px #000}
.library-toolbar{display:grid;grid-template-columns:1fr 64px 72px;gap:4px;padding:5px 2px}.library-toolbar input,.library-toolbar select,.library-toolbar button{min-width:0;padding:6px;border:1px solid #31505c;border-radius:4px;background:#08171d;color:#aee5ed;font:700 5.5px Orbitron}.library-toolbar button.active{color:#fff;border-color:#5fba75;background:#12311d}
#library{height:136px!important}.menu-page{height:169px}.library-head,.track-row{grid-template-columns:22px 1fr 38px 34px 37px 37px!important}.track-row .key{color:#d7a9e5;font:700 5.5px Orbitron;text-align:center}.deckmark{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font:800 6px Orbitron}.deckmark.a{background:#0e6677;color:#d6fbff}.deckmark.b{background:#76285f;color:#ffe1f7}
.phrase16,.phrase32{position:absolute;top:0;bottom:0;width:1px;pointer-events:none}.phrase16{background:#fff2}.phrase32{background:#fff5}
#flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none}.beat-flash #flash{animation:beatFlash .16s ease-out}.drop-flash #flash{animation:dropFlash .28s ease-out}@keyframes beatFlash{0%{opacity:.11}100%{opacity:0}}@keyframes dropFlash{0%{opacity:.28}100%{opacity:0}}
body.idle .disc{animation:idleSpin 16s linear infinite}body.idle .deck-screen{opacity:.88}@keyframes idleSpin{to{transform:rotate(360deg)}}
@media(max-width:700px){.deck-tools{grid-template-columns:repeat(4,1fr)}.deck-tools label{grid-column:1/-1;justify-content:center}.library-toolbar{grid-template-columns:1fr 58px 66px}}

/* V9 RGB dot-matrix event display */
.led-event-display{border-color:#31414a;background:#030506;box-shadow:inset 0 0 30px #000,0 0 22px #0008}
.led-event-display .event-next{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:linear-gradient(#10161b,#080c0f);border-bottom:1px solid #26343b}
.led-event-display .event-next>span:first-child{color:#6d7c83}.matrix-status{color:#60ff8a!important;text-align:right}.led-matrix-shell{position:relative;height:92px;padding:7px 9px;background:radial-gradient(circle at 50% 50%,#0a0d0e,#010202 75%);overflow:hidden}
.led-matrix-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#ffffff08 1px,transparent 1px);background-size:100% 4px;mix-blend-mode:screen}
#eventMatrix{display:block;width:100%;height:78px;image-rendering:pixelated}
@media(max-width:700px){.led-matrix-shell{height:76px;padding:6px}#eventMatrix{height:64px}.led-event-display .event-next{grid-template-columns:1fr auto}.led-event-display .event-next strong{grid-column:1/-1;grid-row:2}.matrix-status{grid-column:2}}

/* V10 matrix information channel */
#eventMatrix{transition:filter .18s ease}
#eventMatrix[style*="pointer"]:hover{filter:brightness(1.2)}
.led-matrix-shell:has(#eventMatrix[style*="pointer"]){box-shadow:inset 0 0 18px #37e7ff12}

/* V11 EVENTS MENU */
.events-menu{padding:6px 2px}
#eventsList{display:grid;gap:6px;padding:2px}
.event-card{display:grid;grid-template-columns:74px 1fr;gap:9px;align-items:center;padding:8px;border:1px solid #29434d;border-radius:7px;background:#091820}
.event-card.next{border-color:#398a9b;background:linear-gradient(90deg,#0a2630,#0b1820);box-shadow:inset 3px 0 #37e7ff}
.event-date{display:flex;flex-direction:column;border-right:1px solid #25404a;padding-right:8px}
.event-date b{font:800 8px Orbitron;color:#bdf8ff}.event-date span{font:700 7px Orbitron;color:#6f9ca7;margin-top:3px}
.event-info{min-width:0}.event-info small{display:block;color:#37e7ff;font:700 5px Orbitron;margin-bottom:3px}.event-info strong{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-info span{display:block;color:#78949d;font-size:7px;margin-top:2px}
.event-empty{text-align:center;color:#698994;padding:30px 5px;font:700 7px Orbitron}
#party.active{border-color:#3b9dab;color:#bdfaff;box-shadow:0 0 10px #37e7ff33}

header,main,footer{position:relative;z-index:1}

/* V12 – subtle controller color accents */
.output-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:7px 0 8px;padding:7px;border-top:1px solid #293945;border-bottom:1px solid #293945}
.output-controls label{display:grid;grid-template-columns:46px 1fr 28px;align-items:center;gap:6px;padding:5px 7px;border:1px solid #2b414d;border-radius:6px;background:linear-gradient(180deg,#101b23,#091117)}
.output-controls label:first-child{box-shadow:inset 2px 0 #37e7ff55}.output-controls label:last-child{box-shadow:inset 2px 0 #ff3bc855}
.output-controls span{font:700 6px Orbitron;color:#8fa5b0}.output-controls b{font:700 7px Orbitron;color:#c7f8ff;text-align:right}
.output-controls input{width:100%;accent-color:#37e7ff}.output-controls label:last-child input{accent-color:#ff3bc8}

.panel-a .label b,.panel-a .deck-screen>div:first-child small:first-child,#statusA{color:#60edff}
.panel-b .label b,.panel-b .deck-screen>div:first-child small:first-child,#statusB{color:#ff65d1}
.panel-a .transport .play{border-color:#2f9aad;color:#76ffd5;box-shadow:inset 0 0 13px #37e7ff16,0 5px 11px #0008}
.panel-b .transport .play{border-color:#a3428b;color:#ff9ee4;box-shadow:inset 0 0 13px #ff3bc816,0 5px 11px #0008}
#syncA{border-color:#2d7c8b;color:#7cefff}#syncB{border-color:#854274;color:#ff86d9}
.loop-side button:nth-of-type(1),.loop-side button:nth-of-type(2),.loop-side button:nth-of-type(3),.loop-side button:nth-of-type(4),.loop-side button:nth-of-type(5){border-color:#685826;color:#f4c96c}
.deck-a-core .pitch input{accent-color:#37e7ff}.deck-b-core .pitch input{accent-color:#ff3bc8}
.panel-a .hotcues button.set{background:#0b333d;border-color:#3bdcf2;color:#c9fbff}
.panel-b .hotcues button.set{background:#341027;border-color:#dc48b4;color:#ffd2f2}
.mixer .label.center b{color:#d8faff;text-shadow:0 0 9px #37e7ff55,0 0 14px #ff3bc833}
.menu-tabs button:nth-child(2).active{border-color:#d19c39;color:#ffe0a0;background:#2b200b}
.menu-tabs button:nth-child(3).active{border-color:#875bba;color:#dec7ff;background:#20122d}
.menu-tabs button:nth-child(4).active{border-color:#a64282;color:#ffc4e9;background:#2d1125}
.menu-tabs button:nth-child(5).active{border-color:#5b9a60;color:#caffcc;background:#102614}
.social.custom i{background:linear-gradient(135deg,#2c8da0,#8f3fa0)}

/* V12.1 – resolution-adaptive layout */
header,main,footer{width:100%;max-width:clamp(1180px,92vw,1760px)}
main{padding-left:clamp(6px,1vw,18px);padding-right:clamp(6px,1vw,18px)}
.rig{gap:clamp(5px,.6vw,12px);padding:clamp(6px,.65vw,12px)}
.deck,.mixer{padding:clamp(8px,.8vw,14px)}
.jog{width:min(100%,clamp(205px,16vw,292px))}
.master{height:clamp(190px,13.5vw,225px)}
.menu-page{height:calc(100% - 28px)}
#library{height:100%}

/* Channel volume faders beside VU meters */
.mixer-matrix{
 grid-template-columns:1fr 1fr 20px 13px 13px 20px 1fr 1fr;
 gap:clamp(3px,.35vw,6px)
}
.channel-strip{
 height:202px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
 gap:4px;color:#7c909c;font:700 5px Orbitron
}
.channel-strip>span{height:11px;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:1px}
.channel-strip>b{font:700 5px Orbitron;color:#9fb4bd;margin-top:2px}
.vslider-wrap{position:relative;width:18px;height:160px;display:flex;align-items:center;justify-content:center}
.vslider{
 position:absolute;width:154px;height:16px;transform:rotate(-90deg);transform-origin:center;
 margin:0;padding:0;cursor:ns-resize
}
.channel-a .vslider{accent-color:#37e7ff}.channel-b .vslider{accent-color:#ff3bc8}
.channel-a{border-left:1px solid #37e7ff22}.channel-b{border-right:1px solid #ff3bc822}
.channel-a>b{color:#67eaff}.channel-b>b{color:#ff72d4}

/* Larger screens get a little more breathing room. */
@media(min-width:1700px){
 header,main,footer{max-width:1760px}
 .jog{max-width:305px}
 .label{font-size:7.5px}.control{font-size:6px}
 .mixer-matrix{grid-template-columns:1fr 1fr 22px 14px 14px 22px 1fr 1fr}
}
@media(min-width:2100px){
 header,main,footer{max-width:1940px}
 .jog{max-width:325px}
 .deck,.mixer{padding:15px}
}

/* Compact desktop/tablet without horizontal overflow. */
@media(min-width:701px) and (max-width:1250px){
 .jog{width:min(100%,220px)}
 .deck,.mixer{padding:9px}
 .rig{gap:6px;padding:7px}
 .mixer-matrix{grid-template-columns:1fr 1fr 17px 10px 10px 17px 1fr 1fr;gap:3px}
 .channel-strip{height:194px}.vslider-wrap{height:152px}.vslider{width:146px}
}

/* Mobile keeps the full mixer, including both channel faders. */
@media(max-width:700px){
 header,main,footer{max-width:100%}
 .jog{width:min(100%,255px)}
 .master{height:220px}
 .mixer-matrix{grid-template-columns:1fr 1fr 16px 9px 9px 16px 1fr 1fr;gap:3px}
 .channel-strip{height:198px}
 .vslider-wrap{width:14px;height:156px}.vslider{width:150px}
 .channel-strip>span{font-size:4.5px}.channel-strip>b{font-size:4.5px}
}

/* V13 sponsor stickers + sponsor menu */
.menu-tabs{grid-template-columns:repeat(6,1fr)}
.sponsor-stickers{
 min-height:34px;display:flex;justify-content:center;align-items:center;gap:7px;
 margin:-2px 0 6px;overflow:visible
}
.sponsor-sticker{
 height:30px;min-width:54px;max-width:92px;padding:3px 7px;border:0;border-radius:4px;
 background:#eef1e7;color:#101318;box-shadow:0 2px 4px #0008,0 0 0 1px #ffffff30;
 transform:rotate(-2deg);cursor:pointer;overflow:hidden;position:relative
}
.sponsor-sticker:nth-child(2n){transform:rotate(2.2deg)}
.sponsor-sticker:nth-child(3n){transform:rotate(-1deg) translateY(2px)}
.sponsor-sticker::after{
 content:"";position:absolute;inset:0;border:1px solid #0002;border-radius:4px;pointer-events:none
}
.sponsor-sticker img{display:block;max-width:100%;height:22px;object-fit:contain;margin:auto}
.sponsor-sticker b{font:800 6px Orbitron;white-space:nowrap}
.sponsor-sticker:hover{transform:rotate(0) scale(1.08);z-index:2;box-shadow:0 4px 12px #000a,0 0 10px #37e7ff30}
.sponsors-menu{padding:6px 2px}
#sponsorList{display:grid;gap:7px;padding:2px}
.sponsor-card{
 display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:center;
 padding:9px;border:1px solid #344752;border-radius:8px;background:linear-gradient(135deg,#0a1b22,#10131a)
}
.sponsor-logo{
 height:62px;display:flex;align-items:center;justify-content:center;padding:5px;
 border:1px solid #31434c;border-radius:7px;background:#f3f2e9;color:#101318;overflow:hidden
}
.sponsor-logo img{max-width:100%;max-height:52px;object-fit:contain}
.sponsor-logo b{font:800 7px Orbitron;text-align:center}
.sponsor-copy{min-width:0}.sponsor-copy>strong{font:800 9px Orbitron;color:#e2fbff}
.sponsor-copy p{margin:4px 0;color:#8199a3;font-size:7px;line-height:1.4}
.sponsor-offer{
 margin:6px 0;padding:5px 7px;border:1px solid #745b23;border-radius:6px;
 background:#2b210b;color:#ffe0a0
}
.sponsor-offer span{display:block;font:700 5px Orbitron;color:#c99d43}
.sponsor-offer b{display:block;margin-top:2px;font-size:8px}
.sponsor-actions{display:flex;gap:5px;flex-wrap:wrap}
.sponsor-actions a{
 padding:5px 7px;border:1px solid #2e7180;border-radius:5px;background:#0a2530;
 color:#c8faff;font:700 5px Orbitron
}
.sponsor-actions a.offer{border-color:#8b6726;background:#2a200b;color:#ffe0a0}
.menu-tabs button:nth-child(6).active{border-color:#c79a38;color:#ffe2a3;background:#2d220c}
@media(max-width:700px){
 .menu-tabs{grid-template-columns:repeat(3,1fr)}
 .sponsor-stickers{gap:4px;flex-wrap:wrap;min-height:30px}
 .sponsor-sticker{height:27px;max-width:76px}
 .sponsor-sticker img{height:19px}
 .sponsor-card{grid-template-columns:70px 1fr}
 .sponsor-logo{height:54px}
}