@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&family=Barlow+Condensed:wght@400;500;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{--deck-bg:#1a1a1c;--deck-panel:#242428;--deck-border:#3a3a3e;--screen-glow:#00d4ff;--orange:#ff7a00;--orange-glow:#ffa544;--cue-orange:#ff5a00;--play-green:#00ff7a;--red:#ff2e2e;--yellow:#ffd400;--purple:#c800ff;--pink:#ff3c78;--text:#e8e8ea;--text-dim:#9a9a9e;--bg:#0a0a0a}
body.theme-light{--deck-bg:#e5e5e7;--deck-panel:#f5f5f7;--deck-border:#b0b0b2;--text:#1a1a1c;--text-dim:#5a5a5e;--bg:#f0f0f2}
body.theme-neon{--orange:#ff00ff;--screen-glow:#00ffff;--play-green:#00ff00}
body.theme-gold{--orange:#3a2a0a;--orange-glow:#5a3f12;--cue-orange:#6b4a18;--play-green:#2a3a1a;--screen-glow:#2a1a08;--yellow:#c8a848;--red:#8a2020;--purple:#5a4020;--pink:#a8886a;--text:#1a1208;--text-dim:#4a3a1a;--bg:#0a0806;--deck-bg:#c8a656;--deck-panel:#d4b468;--deck-border:#8a6a2e}
body.theme-euphonia{--orange:#c77848;--orange-glow:#e8a778;--cue-orange:#ffb347;--play-green:#7fffa3;--screen-glow:#9ee5ff;--yellow:#ffd966;--red:#ff5050;--purple:#b087e8;--pink:#ff8ab3;--text:#eaeaec;--text-dim:#8a8a90;--bg:#050507;--deck-bg:#0d0d0f;--deck-panel:#141416;--deck-border:#2a2a2e}
body.theme-blade{--orange:#00f0ff;--orange-glow:#7ff7ff;--cue-orange:#00f0ff;--play-green:#00f0ff;--screen-glow:#00f0ff;--yellow:#00f0ff;--red:#ff3344;--purple:#00f0ff;--pink:#00f0ff;--text:#e8f5fa;--text-dim:#6a7a88;--bg:#060810;--deck-bg:#0c0e14;--deck-panel:#12141a;--deck-border:#1e2028}
html,body{background:radial-gradient(ellipse at center,#222 0%,var(--bg) 70%);min-height:100vh;font-family:'Barlow Condensed',sans-serif;color:var(--text)}
body{padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:10px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#0a0a0b}
::-webkit-scrollbar-thumb{background:var(--orange);border-radius:3px}
.header-bar{
  width:100%;max-width:1700px;display:flex;flex-wrap:wrap;align-items:center;
  padding:8px 12px;gap:10px 14px;
  background:linear-gradient(180deg,#15151a 0%,#0b0b0f 100%);
  border:1px solid rgba(255,255,255,.06);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 14px rgba(0,0,0,.45);
}
.header-bar .brand{order:1;flex:0 0 auto;margin-right:auto}
.header-bar .header-right{order:2;flex:0 0 auto}
/* DECK FOCUS gets its own dedicated row below brand + actions */
.header-bar .header-dsb,
body.show-all .header-bar .header-dsb,
body.work-mode .header-bar .header-dsb{
  order:3;flex:1 1 100%;width:100%;min-width:0;max-width:none;
  background:linear-gradient(180deg,rgba(255,138,26,.05),rgba(255,138,26,0));
  border:1px solid rgba(255,138,26,.18);
  box-shadow:inset 0 0 14px rgba(255,138,26,.05);
  padding:6px 10px;margin:0;border-radius:8px;
  display:flex !important;flex-wrap:wrap !important;align-items:center;gap:6px;
  justify-content:flex-start !important;
  position:static;top:auto;left:auto;right:auto;
}
.header-bar .header-dsb::before{display:none}
.header-bar .header-dsb .dsb-label{flex:0 0 auto;font-size:10px;letter-spacing:2.5px;padding:5px 10px;border-radius:4px;background:rgba(255,138,26,.12);border:1px solid rgba(255,138,26,.3);color:var(--orange);margin:0;font-weight:900}
.header-bar .header-dsb .dsb-btn{flex:0 0 auto;padding:6px 10px;font-size:10px;letter-spacing:1.4px;min-height:28px}
.header-bar .header-dsb .dsb-monitor{margin-left:auto;gap:4px;flex-wrap:wrap}
.header-bar .header-dsb .dsb-chip{padding:3px 8px;font-size:9px}
.brand{font-family:'Orbitron',sans-serif;font-weight:900;font-size:22px;letter-spacing:3px;color:#fff;text-transform:uppercase}
.brand span{color:var(--orange)}
.brand .max{font-size:10px;background:var(--orange);color:#000;padding:2px 6px;border-radius:3px;margin-right:8px;letter-spacing:1px}
.header-right{display:flex;align-items:center;gap:10px;font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-dim);letter-spacing:2px;padding:4px 8px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));border:1px solid rgba(255,255,255,.05);border-radius:8px}
.master-bpm{background:#000;border:1px solid #333;padding:4px 10px;color:var(--orange);font-size:14px}
.rec-btn{padding:6px 14px;background:#2a0a0a;border:1px solid var(--red);color:var(--red);font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;cursor:pointer;border-radius:4px;display:flex;align-items:center;gap:6px}
.rec-btn::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red)}
.rec-btn.recording{background:var(--red);color:#fff;animation:recPulse 1s infinite}
.rec-btn.recording::before{background:#fff}
@keyframes recPulse{0%,100%{box-shadow:0 0 10px var(--red)}50%{box-shadow:0 0 25px var(--red)}}
.power-led{width:8px;height:8px;border-radius:50%;background:var(--play-green);box-shadow:0 0 6px var(--play-green);animation:blink 2s infinite}
@keyframes blink{0%,90%,100%{opacity:1}95%{opacity:.3}}
.main-tabs{width:100%;max-width:1700px;display:flex;gap:3px;padding:4px;background:#0a0a0b;border-radius:8px;border:1px solid #2a2a2e;overflow-x:auto}
.tab-btn{flex:1;min-width:100px;padding:9px;background:transparent;border:none;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;border-radius:4px;cursor:pointer;white-space:nowrap}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{background:linear-gradient(180deg,var(--orange) 0%,#c85a00 100%);color:#000;box-shadow:0 0 15px rgba(255,122,0,.4)}
.tab-content{display:none;width:100%}
.tab-content.active{display:flex;flex-direction:column;gap:12px;align-items:center}
.tool-btn{padding:7px 11px;background:linear-gradient(180deg,#2a2a2e 0%,#1a1a1c 100%);border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:1.5px;border-radius:4px;cursor:pointer}
.tool-btn:hover{border-color:var(--orange);color:var(--orange)}
.tool-btn.active{background:var(--orange);color:#000}
.beat-fx-panel{width:100%;max-width:1700px;background:linear-gradient(180deg,#2a2a2e 0%,#1a1a1c 100%);border-radius:10px;padding:10px 14px;border:1px solid var(--deck-border);box-shadow:0 10px 30px rgba(0,0,0,.6);display:grid;grid-template-columns:auto auto auto 1fr auto auto auto auto;gap:12px;align-items:center}
.beat-fx-label{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:3px;color:var(--orange);font-weight:700}
.fx-selector{background:#0a0a0b;border:1px solid #333;color:var(--screen-glow);padding:6px 10px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;border-radius:4px;cursor:pointer;min-width:100px}
.beat-display{background:#020608;border:1px solid #1a2a30;border-radius:4px;padding:6px 14px;font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:var(--orange-glow);text-shadow:0 0 8px rgba(255,122,0,.6);min-width:70px;text-align:center}
.beat-buttons{display:flex;gap:3px}
.beat-btn{padding:5px 9px;background:linear-gradient(180deg,#3a3a3e 0%,#1a1a1c 100%);border:none;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;border-radius:3px;cursor:pointer;min-width:34px}
.beat-btn.active{background:var(--screen-glow);color:#000;box-shadow:0 0 10px rgba(0,212,255,.6)}
.fx-onoff{padding:12px 20px;background:linear-gradient(180deg,#3a3a3e 0%,#1a1a1c 100%);border:2px solid #555;color:var(--text);font-family:'Orbitron',sans-serif;font-size:12px;font-weight:800;letter-spacing:3px;border-radius:6px;cursor:pointer}
.fx-onoff.active{background:var(--orange);color:#000;border-color:var(--orange-glow);box-shadow:0 0 25px rgba(255,122,0,.8)}
.tap-btn{padding:9px 14px;background:#1a1a1c;border:1px solid #444;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;border-radius:4px;cursor:pointer}
.tap-btn:active{background:var(--orange);color:#000}
.rgb-ambient{width:100%;max-width:1700px;height:5px;background:linear-gradient(90deg,var(--orange),var(--pink),var(--purple),var(--screen-glow),var(--play-green),var(--yellow),var(--orange));background-size:200% 100%;border-radius:3px;animation:ambient 8s linear infinite;filter:blur(3px);opacity:.6}
@keyframes ambient{from{background-position:0% 0%}to{background-position:200% 0%}}
/* ── Mixer toolbar — pixel-perfect horizontal bar above the decks ── */
.mixer-toolbar{width:100%;max-width:1700px;display:grid;grid-template-columns:minmax(340px,2fr) minmax(230px,1.2fr) minmax(230px,1.1fr) minmax(200px,.95fr);gap:8px;padding:8px;background:linear-gradient(180deg,#2a2a2e 0%,#16161a 100%);border:1px solid var(--deck-border);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.6);align-items:stretch;position:relative}
.mixer-toolbar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,122,0,.4) 30%,rgba(46,224,255,.35) 50%,rgba(255,122,0,.4) 70%,transparent);border-radius:12px 12px 0 0;pointer-events:none}

.mixer-toolbar .mtb-section{display:flex;flex-direction:column;padding:8px 10px;background:linear-gradient(180deg,#0d0d10 0%,#070709 100%);border-radius:8px;border:1px solid #1a1a1c;min-width:0;min-height:138px;position:relative;box-shadow:inset 0 0 24px rgba(0,0,0,.5)}
.mixer-toolbar .mtb-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,122,0,.25),transparent);pointer-events:none}

/* Section header — always top, always same size */
.mixer-toolbar .mtb-head{display:flex;align-items:center;justify-content:space-between;height:16px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:6px}
.mixer-toolbar .mtb-label{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2.5px;color:var(--orange);font-weight:800;white-space:nowrap;text-shadow:0 0 3px rgba(0,0,0,.8)}
.mixer-toolbar .mtb-dir{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--screen-glow);letter-spacing:1px}

/* Body area — grows to fill the section so all boxes stay equal height */
.mixer-toolbar .mtb-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:0}

/* AUTO MIX ─────────────────────────────────── */
.mixer-toolbar .mtb-automix .automix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mixer-toolbar .mtb-automix .automix-btn{padding:7px 4px;font-size:10px;letter-spacing:1px;border-radius:4px}
.mixer-toolbar .mtb-automix .automix-sub{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;padding-top:2px;flex-wrap:wrap}
.mixer-toolbar .mtb-automix .automix-sub > span{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;color:var(--text-dim);font-weight:700}
.mixer-toolbar .mtb-automix .automix-bars{padding:4px 8px;font-size:10px;width:auto;min-width:62px;border-radius:4px}
.mixer-toolbar .mtb-automix .automix-sync{padding:5px 10px;font-size:9px;letter-spacing:1.5px;white-space:nowrap}

/* WIDE-SCREEN AUTO MIX — single-row buttons + prominent progress */
@media (min-width:1400px){
  .mixer-toolbar .mtb-automix .automix-grid{grid-template-columns:repeat(6,1fr);gap:6px}
  .mixer-toolbar .mtb-automix .automix-btn{padding:10px 6px;font-size:11px;letter-spacing:1.4px}
  .mixer-toolbar .mtb-automix .mtb-dir{
    flex:1;text-align:right;font-size:11px;font-weight:700;
    color:var(--screen-glow);letter-spacing:1.5px;
    padding:2px 8px;border-radius:4px;
    background:linear-gradient(180deg,rgba(46,224,255,.08),rgba(46,224,255,.02));
    border:1px solid rgba(46,224,255,.2);
    box-shadow:inset 0 0 8px rgba(46,224,255,.08);
    margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  .mixer-toolbar .mtb-automix .mtb-head{height:auto;padding-bottom:8px}
  .mixer-toolbar .mtb-automix .automix-sub{
    grid-template-columns:auto auto 1fr auto auto;gap:6px;
  }
  .mixer-toolbar .mtb-automix .automix-bars{min-width:74px;font-size:11px;padding:6px 8px}
  .mixer-toolbar .mtb-automix .automix-sync{padding:7px 14px;font-size:10px}
}

/* HEADPHONES / MIC / ISOLATOR — grouped knob rows with subtle inner frame */
.mixer-toolbar .mtb-knobrow{display:flex;justify-content:center;align-items:center;gap:14px;flex:1;padding:6px 8px;background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.04);border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.mixer-toolbar .mtb-knobrow .knob-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.mixer-toolbar .mtb-section .knob.small{width:32px;height:32px}
.mixer-toolbar .mtb-section .knob-label{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:1px;color:var(--text-dim);text-align:center;text-transform:uppercase;white-space:nowrap}

/* HP — knobs tight together, CUE buttons 4-col fixed width */
.mixer-toolbar .mtb-hp .mtb-knobrow{gap:18px}
.mixer-toolbar .mtb-hp .cue-hp-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:6px}
.mixer-toolbar .mtb-hp .cue-hp-btn{padding:4px 2px;font-size:9px;letter-spacing:1px;border-radius:3px}

/* MIC — 3 knobs + ON button, all in one row with centered gap */
.mixer-toolbar .mtb-mic .mtb-knobrow{gap:10px}
.mixer-toolbar .mtb-mic .mic-btn{padding:6px 10px;font-size:10px;letter-spacing:1.5px;min-width:38px;border-radius:4px;margin-left:4px}

/* ISOLATOR — red accent, grouped with subtle red rim */
.mixer-toolbar .mtb-iso .mtb-knobrow{gap:10px;border-color:rgba(255,46,46,.15);box-shadow:inset 0 0 10px rgba(255,46,46,.04)}
.mixer-toolbar .mtb-iso .knob-indicator{background:linear-gradient(180deg,#fff,var(--red))}
.mixer-toolbar .mtb-iso .knob-label{color:var(--red);text-shadow:0 0 6px rgba(255,46,46,.35)}

/* Responsive */
@media(max-width:1400px){
  .mixer-toolbar{grid-template-columns:1fr 1fr;gap:6px}
  .mixer-toolbar .mtb-automix{grid-column:1/-1}
}
@media(max-width:820px){
  .mixer-toolbar{grid-template-columns:1fr 1fr;gap:6px;padding:6px}
  .mixer-toolbar .mtb-automix{grid-column:1/-1}
  .mixer-toolbar .mtb-section{padding:6px 8px}
}
@media(max-width:520px){
  .mixer-toolbar{grid-template-columns:1fr;padding:6px;gap:5px}
  .mixer-toolbar .mtb-section{grid-column:auto}
}

.console{display:grid;grid-template-columns:1fr 400px 1fr;gap:12px;max-width:1700px;width:100%}
@media(min-width:1920px){.console{grid-template-columns:1fr 460px 1fr;gap:16px;max-width:1850px}}
@media(min-width:2560px){.console{grid-template-columns:1fr 540px 1fr;gap:22px;max-width:2200px}}
/* In ALL-4 mode ALL rows (header, tabs, toolbar, bars, library) share the
   console's expanded width */
body.show-all .header-bar,
body.show-all .main-tabs,
body.show-all .mixer-toolbar,
body.show-all .deck-switch-bar,
body.show-all .beat-fx-panel,
body.show-all .scene-fx-panel,
body.show-all .top-fx-row,
body.show-all .library,
body.show-all .rgb-ambient{max-width:none;width:calc(100vw - 16px)}
@media(min-width:1920px){
  body.show-all .header-bar,body.show-all .main-tabs,
  body.show-all .mixer-toolbar,body.show-all .deck-switch-bar,
  body.show-all .beat-fx-panel,body.show-all .scene-fx-panel,
  body.show-all .top-fx-row,
  body.show-all .library,body.show-all .rgb-ambient{width:calc(100vw - 24px)}
}
/* Make internal grids of those rows use the full horizontal space so content
   isn't clustered on the left. */
body.show-all .beat-fx-panel{grid-template-columns:auto auto auto 1fr auto auto auto auto}
body.show-all .scene-fx-panel{grid-template-columns:auto 1fr auto auto}
body.show-all .deck-switch-bar{justify-content:space-between}
body.show-all .console.show-all{max-width:none;width:calc(100vw - 16px)}
@media(min-width:1920px){body.show-all .console.show-all{width:calc(100vw - 24px)}}
@media(max-width:1200px){.console{grid-template-columns:1fr 340px 1fr;gap:10px}}
@media(max-width:960px){.console{grid-template-columns:1fr 300px 1fr;gap:8px}}
/* console 820px collapse handled in responsive layer below */
.cdj{background:linear-gradient(180deg,#323236 0%,#1e1e22 55%,#131316 100%);border-radius:16px;padding:14px;border:1px solid var(--deck-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 40px rgba(255,122,0,.03),inset 0 -1px 0 rgba(0,0,0,.6),0 24px 70px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.04);transition:box-shadow .25s,transform .25s;position:relative;overflow:hidden;--deck-accent:var(--orange);--deck-accent-rgb:255,122,0}
.cdj[data-deck="A"]{--deck-accent:#ff7a00;--deck-accent-rgb:255,122,0}
.cdj[data-deck="B"]{--deck-accent:#2ee0ff;--deck-accent-rgb:46,224,255}
.cdj[data-deck="C"]{--deck-accent:#ff3c78;--deck-accent-rgb:255,60,120}
.cdj[data-deck="D"]{--deck-accent:#c800ff;--deck-accent-rgb:200,0,255}
/* Per-deck accent color on the jog ring light + indicator */
.cdj .jog-ring-light{
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(var(--deck-accent-rgb),.15) 2deg,
    rgba(var(--deck-accent-rgb),.6) 5deg,
    var(--deck-accent) 8deg,
    rgba(var(--deck-accent-rgb),.85) 11deg,
    rgba(var(--deck-accent-rgb),.4) 15deg,
    rgba(var(--deck-accent-rgb),.15) 20deg,
    transparent 28deg);
  filter:blur(1.2px) drop-shadow(0 0 6px rgba(var(--deck-accent-rgb),.5));
}
.cdj .jog-indicator{
  background:linear-gradient(180deg,#fff 0%,var(--deck-accent) 100%);
  box-shadow:0 0 10px rgba(var(--deck-accent-rgb),.9),0 0 2px rgba(255,255,255,.9);
}
.cdj .jog-center-screen .bpm-display{
  color:var(--deck-accent);
  text-shadow:0 0 14px rgba(var(--deck-accent-rgb),.95),0 0 2px rgba(255,255,255,.3);
}
.cdj .jog-center-screen{border-color:rgba(var(--deck-accent-rgb),.3);box-shadow:inset 0 0 26px rgba(var(--deck-accent-rgb),.15),inset 0 2px 6px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.7),0 0 18px rgba(var(--deck-accent-rgb),.18),0 4px 10px rgba(0,0,0,.7)}
.cdj::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(var(--deck-accent-rgb),.35) 25%,rgba(var(--deck-accent-rgb),.75) 50%,rgba(var(--deck-accent-rgb),.35) 75%,transparent 100%);pointer-events:none;z-index:1;box-shadow:0 0 8px rgba(var(--deck-accent-rgb),.5)}
.cdj::after{content:'';position:absolute;top:-40%;left:-10%;right:-10%;height:80%;background:radial-gradient(ellipse at center top,rgba(var(--deck-accent-rgb),.08) 0%,transparent 60%);pointer-events:none;z-index:0}
.cdj .deck-number{
  color:#fff;
  background:linear-gradient(180deg,var(--orange-glow) 0%,var(--orange) 50%,#b84600 100%);
  -webkit-text-fill-color:#fff;
  -webkit-background-clip:border-box;background-clip:border-box;
  padding:3px 10px;border-radius:6px;
  border:1px solid rgba(255,138,26,.85);
  box-shadow:0 0 12px rgba(255,138,26,.55),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.4);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  filter:none;
  font-size:22px;line-height:1;letter-spacing:1px;
}
.cdj > *{position:relative;z-index:2}
.cdj:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 40px rgba(255,122,0,.05),0 26px 80px rgba(0,0,0,.8)}
.cdj.drop-target{border-color:var(--orange);box-shadow:0 0 40px rgba(255,122,0,.8),inset 0 0 30px rgba(255,122,0,.15)}
.deck-label{font-family:'Orbitron',sans-serif;font-weight:800;font-size:11px;letter-spacing:3px;color:#fff}
.deck-number{font-family:'Orbitron',sans-serif;font-weight:900;font-size:28px;color:var(--orange);text-shadow:0 0 12px rgba(255,122,0,.5);line-height:1}
.screen{background:linear-gradient(180deg,#0a141a 0%,#060b0f 50%,#030609 100%);border:1px solid #1a2a30;border-radius:8px;padding:9px;font-family:'Share Tech Mono',monospace;color:var(--screen-glow);box-shadow:inset 0 0 40px rgba(0,212,255,.08),inset 0 2px 8px rgba(0,0,0,.9),0 0 0 2px #0a0a0b,0 1px 0 rgba(255,255,255,.04);position:relative;overflow:hidden;margin-bottom:8px}
.screen::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(0,212,255,.04) 0%,transparent 100%);pointer-events:none;z-index:1}
.screen::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,212,255,.02) 0px,rgba(0,212,255,.02) 1px,transparent 1px,transparent 3px);pointer-events:none}
.screen-top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:6px;border-bottom:1px dashed rgba(0,212,255,.2);margin-bottom:6px}
.track-title{font-size:13px;font-weight:500;color:#fff;letter-spacing:1px;text-shadow:0 0 8px rgba(0,212,255,.4);max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-artist{font-size:10px;color:var(--text-dim);letter-spacing:1px}
.screen-right{text-align:left;direction:ltr}
.screen-bpm{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:700;color:var(--orange-glow);text-shadow:0 0 10px rgba(255,122,0,.6);line-height:1}
.screen-bpm-label{font-size:9px;color:var(--text-dim);letter-spacing:2px}
.screen-key{font-size:11px;color:var(--play-green);text-shadow:0 0 2px rgba(0,0,0,.9);margin-top:2px}
.waveform{height:48px;background:#020608;border-radius:3px;margin:6px 0;position:relative;overflow:hidden;border:1px solid rgba(0,212,255,.1)}
.waveform-canvas{width:100%;height:100%;display:block}
.playhead{position:absolute;top:0;left:50%;width:2px;height:100%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9);z-index:3}
.phrase-markers{position:absolute;top:0;left:0;right:0;height:5px;background:transparent;pointer-events:none;z-index:2}
.phrase-mark{position:absolute;top:0;width:2px;height:5px;background:var(--yellow);box-shadow:0 0 3px var(--yellow)}
.time-row{display:flex;justify-content:space-between;align-items:center;padding-top:4px;border-top:1px dashed rgba(0,212,255,.2)}
.time-label{font-size:8px;color:var(--text-dim);letter-spacing:2px}
.time-value{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;color:#fff;letter-spacing:1px;direction:ltr}
.time-value.remain{color:var(--orange)}
.loop-section,.beat-jump,.deck-utils{display:grid;gap:4px;margin-bottom:6px}
.loop-section{grid-template-columns:repeat(4,1fr)}
.beat-jump{grid-template-columns:repeat(4,1fr)}
.deck-utils{grid-template-columns:repeat(5,1fr)}
.loop-btn,.jump-btn,.util-btn{padding:6px 2px;background:linear-gradient(180deg,#2a2a2e 0%,#0a0a0b 100%);border:1px solid #333;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:1px;border-radius:4px;cursor:pointer}
.loop-btn{color:var(--screen-glow)}
.loop-btn.active{background:var(--screen-glow);color:#000;box-shadow:0 0 12px rgba(0,212,255,.7)}
.jump-btn{color:var(--purple)}
.util-btn{color:var(--text-dim);font-size:8px}
.util-btn.sync.active{background:var(--orange);color:#000;box-shadow:0 0 10px rgba(255,122,0,.6)}
.util-btn.keylock.active{background:var(--play-green);color:#000;box-shadow:0 0 10px rgba(0,255,122,.6)}
.util-btn.quantize.active{background:var(--screen-glow);color:#000;box-shadow:0 0 10px rgba(0,212,255,.6)}
.util-btn.slip.active{background:var(--pink);color:#000;box-shadow:0 0 10px rgba(255,60,120,.6)}
.util-btn.reverse.active{background:var(--red);color:#000;box-shadow:0 0 10px rgba(255,46,46,.6)}
.session-card{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#0a0a0b;border-radius:8px;border:1px solid #333;margin-bottom:8px}
.session-card:hover{border-color:var(--orange)}
.spectrum-canvas{width:100%;height:40px;background:#050506;border-radius:4px;margin-top:3px;display:block}
.pad-mode-row{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin-bottom:5px}
.pad-mode-btn{padding:4px 1px;background:linear-gradient(180deg,#2a2a2e 0%,#0a0a0b 100%);border:1px solid #222;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;letter-spacing:1px;border-radius:3px;cursor:pointer}
.pad-mode-btn.active{background:linear-gradient(180deg,var(--orange) 0%,#c85a00 100%);color:#000;box-shadow:0 0 8px rgba(255,122,0,.5)}
.pad-mode-btn[data-pad-mode="cue"].active{background:linear-gradient(180deg,#00e5ff 0%,#0088aa 100%)}
.pad-mode-btn[data-pad-mode="roll"].active{background:linear-gradient(180deg,#ff3c78 0%,#aa2050 100%)}
.pad-mode-btn[data-pad-mode="slicer"].active{background:linear-gradient(180deg,#ffd400 0%,#aa8a00 100%)}
.pad-mode-btn[data-pad-mode="sampler"].active{background:linear-gradient(180deg,#00ff7a 0%,#008a40 100%)}
.pad-mode-btn[data-pad-mode="loop"].active{background:linear-gradient(180deg,#c800ff 0%,#7a00aa 100%)}
.pad-mode-btn[data-pad-mode="pitch"].active{background:linear-gradient(180deg,#ff7a00 0%,#aa4a00 100%)}
.hot-cues{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.cue-btn{aspect-ratio:1.8/1;border:none;border-radius:5px;background:linear-gradient(180deg,#42424a 0%,#26262a 50%,#141418 100%);color:var(--text-dim);font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 4px rgba(0,0,0,.7),0 2px 4px rgba(0,0,0,.4);transition:transform .08s,box-shadow .1s;position:relative}
.cue-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 4px rgba(0,0,0,.7),0 4px 8px rgba(0,0,0,.6)}
.cue-btn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.cue-btn.active{background:var(--cue-color,var(--orange));color:#000;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 3px rgba(0,0,0,.3),0 0 20px var(--cue-color,var(--orange)),0 0 4px var(--cue-color,var(--orange)),0 0 1px rgba(255,255,255,.9)}
.cue-btn[data-color="1"]{--cue-color:#00e5ff}
.cue-btn[data-color="2"]{--cue-color:#ff3c78}
.cue-btn[data-color="3"]{--cue-color:#ffd400}
.cue-btn[data-color="4"]{--cue-color:#00ff7a}
.cue-btn[data-color="5"]{--cue-color:#ff7a00}
.cue-btn[data-color="6"]{--cue-color:#c800ff}
.cue-btn[data-color="7"]{--cue-color:#00ffd4}
.cue-btn[data-color="8"]{--cue-color:#ff5a00}
.jog-wrapper{display:flex;justify-content:center;align-items:center;margin:4px 0 8px}
.jog-wheel{width:250px;height:250px;position:relative;border-radius:50%}
.jog-outer{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,#7a7a80 0%,#3a3a3e 40%,#1a1a1c 75%,#050506 100%);box-shadow:0 0 0 2px #0a0a0b,0 0 0 4px #3a3a3e,0 0 0 5px #0a0a0b,inset 0 2px 10px rgba(255,255,255,.12),inset 0 -6px 14px rgba(0,0,0,.85),0 12px 36px rgba(0,0,0,.75),0 0 40px rgba(255,122,0,.05)}
.jog-ring{position:absolute;inset:12px;border-radius:50%;background:#000;overflow:hidden;box-shadow:inset 0 0 12px rgba(0,0,0,.9)}
.jog-ring-light{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,var(--orange) 1deg,var(--orange-glow) 3deg,transparent 6deg);filter:blur(.5px);animation:jogSpin 2s linear infinite;animation-play-state:paused}
.jog-wheel.playing .jog-ring-light{animation-play-state:running}
@keyframes jogSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.jog-markers{position:absolute;inset:0;border-radius:50%}
.jog-markers::before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.15) 0deg 1deg,transparent 1deg 9deg);mask:radial-gradient(circle,transparent 55%,#000 55%,#000 58%,transparent 58%);-webkit-mask:radial-gradient(circle,transparent 55%,#000 55%,#000 58%,transparent 58%)}
.jog-platter{position:absolute;inset:32px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a2a2e 0%,#121214 60%,#050506 100%);box-shadow:inset 0 2px 8px rgba(255,255,255,.08),inset 0 -4px 10px rgba(0,0,0,.9);display:flex;justify-content:center;align-items:center;cursor:grab}
.jog-platter-disc{position:absolute;inset:12px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 1px,transparent 1px,transparent 3px),radial-gradient(circle,#1a1a1c 0%,#0a0a0b 100%)}
/* ═══ TITAN ONYX · jog-wheel centre (large, precisely-centred BPM dial) ═══ */
.jog-center-screen{
  width:120px;height:120px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg,#161618 0%,#0a0a0c 50%,#020203 100%);
  border:1px solid #2e2e36;
  /* Centre content absolutely so the BPM number sits DEAD centre
     regardless of what's around it */
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -10px 16px rgba(0,0,0,.85),
    inset 0 0 0 3px #050507,
    0 0 0 1px #000,
    0 6px 16px rgba(0,0,0,.75);
  z-index:2;position:relative;overflow:hidden;
}
/* Dial SVG covers the whole centre screen — the arc sits on the rim,
   the needle points outward, and there's a clear empty centre for the
   BPM number to sit in. */
.jog-bpm-dial{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
.jdial-needle{transition:transform .18s cubic-bezier(.22,.9,.3,1);transform-origin:50px 50px}
/* Numeric readout — perfectly centred, no margin hacks. The flex parent
   handles alignment; .jdial-text is absolute+translate for pixel precision. */
.jdial-text{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;pointer-events:none;z-index:3;
  line-height:1;
}
.jog-center-screen .bpm-display{
  font-family:'Orbitron',sans-serif;font-size:24px;font-weight:800;
  color:#ff9030;
  /* One soft ring-glow, no stacked hard shadows — crisper look */
  text-shadow:0 0 6px rgba(255,144,48,.5);
  letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
  line-height:1;
  margin:0 !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.jog-center-screen .bpm-sub{
  font-family:'Orbitron',sans-serif;font-size:7px;font-weight:700;
  color:#6a6a72;letter-spacing:4px;margin-top:4px;
  opacity:.9;
}
.jog-center-screen .deck-badge{
  font-family:'Orbitron',sans-serif;font-size:8px;color:#fff;
  letter-spacing:2px;margin-top:3px;opacity:.6;
}
.jog-indicator{position:absolute;top:34px;left:50%;width:3px;height:14px;background:linear-gradient(180deg,#fff 0%,var(--orange) 100%);transform:translateX(-50%);border-radius:2px;z-index:3}
.jog-platter.spinning{animation:platterSpin 2s linear infinite}
@keyframes platterSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.transport{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.big-btn{padding:12px 8px;border:none;border-radius:8px;font-family:'Orbitron',sans-serif;font-weight:800;font-size:11px;letter-spacing:3px;cursor:pointer;background:linear-gradient(180deg,#4a4a4e 0%,#2a2a2e 40%,#16161a 100%);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -3px 5px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.03);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;transition:transform .08s,box-shadow .12s;position:relative;line-height:1}
.big-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 5px rgba(0,0,0,.7),0 6px 14px rgba(0,0,0,.6)}
.big-btn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.big-btn .icon{font-size:14px;line-height:1;display:block;text-align:center;width:100%}
.big-btn .lbl{display:block;line-height:1;text-align:center;width:100%}
.big-btn.cue{color:var(--cue-orange);box-shadow:inset 0 2px 0 rgba(255,90,0,.45),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -3px 5px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.5);text-shadow:0 0 8px rgba(255,90,0,.4)}
.big-btn.cue:hover{box-shadow:inset 0 2px 0 rgba(255,90,0,.55),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 5px rgba(0,0,0,.7),0 6px 14px rgba(0,0,0,.6)}
.big-btn.cue.active{background:linear-gradient(180deg,#ff8a3a 0%,var(--cue-orange) 50%,#c84500 100%);color:#000;text-shadow:none;box-shadow:0 0 25px rgba(255,90,0,.9),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.4)}
.big-btn.play{color:var(--play-green);box-shadow:inset 0 2px 0 rgba(0,255,122,.45),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -3px 5px rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.5);text-shadow:0 0 8px rgba(0,255,122,.4)}
.big-btn.play:hover{box-shadow:inset 0 2px 0 rgba(0,255,122,.55),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 5px rgba(0,0,0,.7),0 6px 14px rgba(0,0,0,.6)}
.big-btn.play.active{background:linear-gradient(180deg,#5affa0 0%,var(--play-green) 50%,#00aa50 100%);color:#000;text-shadow:none;animation:playPulse 1s ease-in-out infinite}
@keyframes playPulse{0%,100%{box-shadow:0 0 20px rgba(0,255,122,.8)}50%{box-shadow:0 0 30px rgba(0,255,122,1)}}
.tempo-section{background:linear-gradient(180deg,#0c0c0e 0%,#060608 100%);border-radius:8px;padding:8px;border:1px solid #1a1a1c;box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.04)}
.tempo-header{display:flex;justify-content:space-between;align-items:center;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;color:var(--text-dim);margin-bottom:6px}
.tempo-value{color:var(--orange);font-weight:700;font-size:13px}
.tempo-range{background:#1a1a1c;border:1px solid #333;color:var(--screen-glow);padding:2px 6px;font-family:'Share Tech Mono',monospace;font-size:9px;border-radius:3px;cursor:pointer}
.tempo-slider-wrap{display:flex;align-items:center;gap:8px}
.tempo-ticks{display:flex;flex-direction:column;justify-content:space-between;height:90px;font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--text-dim)}
.tempo-slider{flex:1;height:90px;background:linear-gradient(180deg,#1a1a1c 0%,#050506 100%);border-radius:4px;position:relative;cursor:pointer;border:1px solid #0a0a0b}
.tempo-slider::before{content:'';position:absolute;left:50%;top:5px;bottom:5px;width:2px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.15) 0,rgba(255,255,255,.15) 1px,transparent 1px,transparent 6px);transform:translateX(-50%)}
.tempo-handle{position:absolute;left:4px;right:4px;height:20px;background:linear-gradient(180deg,#6a6a6e 0%,#3a3a3e 50%,#1a1a1c 100%);border-radius:3px;top:50%;transform:translateY(-50%);cursor:grab}
.tempo-handle::before{content:'';position:absolute;top:50%;left:4px;right:4px;height:1px;background:#ff3c00;box-shadow:0 0 4px #ff3c00;transform:translateY(-50%)}
.tempo-controls{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px}
.tempo-btn-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;padding:6px;background:#0a0a0b;border-radius:6px}
.tempo-btn{padding:10px 2px;background:linear-gradient(180deg,#3a3a3e 0%,#1a1a1c 100%);border:1px solid #444;color:var(--orange);font-family:'Orbitron',sans-serif;font-weight:800;font-size:14px;border-radius:4px;cursor:pointer;user-select:none;touch-action:manipulation}
.tempo-btn:active{background:var(--orange);color:#000;box-shadow:0 0 15px rgba(255,122,0,.7)}
.tempo-btn.reset{color:var(--play-green);font-size:10px;letter-spacing:1px}
.tempo-btn.reset:active{background:var(--play-green);color:#000}
.tempo-display-big{grid-column:1/-1;background:#020608;border:1px solid #1a2a30;border-radius:4px;padding:6px;font-family:'Orbitron',sans-serif;font-size:22px;font-weight:800;color:var(--orange-glow);text-shadow:0 0 10px rgba(255,122,0,.6);text-align:center;letter-spacing:1px}
.tempo-step-row{grid-column:1/-1;display:flex;justify-content:center;gap:3px;margin-top:3px}
.step-btn{padding:4px 8px;background:#1a1a1c;border:1px solid #333;color:var(--text-dim);font-family:'Share Tech Mono',monospace;font-size:9px;border-radius:3px;cursor:pointer}
.step-btn.active{background:var(--screen-glow);color:#000}
.mixer{background:linear-gradient(180deg,#323236 0%,#1e1e22 55%,#131316 100%);border-radius:16px;padding:12px;border:1px solid var(--deck-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 40px rgba(255,122,0,.02),inset 0 -1px 0 rgba(0,0,0,.6),0 24px 70px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.04);display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden}
.mixer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,122,0,.25) 30%,rgba(255,122,0,.45) 50%,rgba(255,122,0,.25) 70%,transparent 100%);pointer-events:none;z-index:1}
.mixer::after{content:'';position:absolute;top:-30%;left:-10%;right:-10%;height:70%;background:radial-gradient(ellipse at center top,rgba(255,122,0,.05) 0%,transparent 60%);pointer-events:none;z-index:0}
.mixer > *{position:relative;z-index:2}
.mixer-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.05)}
.mixer-brand{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:3px;color:#fff}
.mixer-brand .model{color:var(--orange);font-size:9px}
.master-vu{display:flex;gap:2px}
.master-vu .vu-meter{width:10px;height:40px}
.master-section{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:6px;background:#0a0a0b;border-radius:6px}
.master-knob-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}
.master-knob-wrap .knob-label{color:var(--orange);font-weight:700}
.color-fx-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px;background:#0a0a0b;border-radius:6px}
.color-fx-channel{display:flex;flex-direction:column;align-items:center;gap:3px}
.color-fx-channel .knob-label{color:var(--orange);font-weight:700;font-size:8px;letter-spacing:1px}
.color-fx-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:6px;background:#0a0a0b;border-radius:6px}
.color-fx-select{position:relative;background:linear-gradient(180deg,#2a2a2e 0%,#121214 100%);border:1px solid #1e1e22;color:var(--text-dim);padding:6px 8px;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:1.5px;border-radius:4px;cursor:pointer;transition:all .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.4)}
.color-fx-select:hover{background:linear-gradient(180deg,#323236 0%,#1a1a1c 100%);color:var(--orange);border-color:rgba(255,122,0,.3)}
.color-fx-select.active{background:linear-gradient(180deg,var(--orange) 0%,#c85a00 100%);color:#000;border-color:var(--orange-glow);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 14px rgba(255,122,0,.55)}
.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.channel .knob.small{width:30px;height:30px}
.channel .vu-meter{width:12px;height:150px}
.channel .fader-wrap{width:24px;height:150px}
.channel{display:flex;flex-direction:column;align-items:center;gap:6px}
.channel-label{font-family:'Orbitron',sans-serif;font-size:11px;color:var(--orange);font-weight:700}
.knob{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#7a7a80 0%,#3a3a3e 50%,#1a1a1c 85%,#070708 100%);position:relative;box-shadow:inset 0 2px 4px rgba(255,255,255,.2),inset 0 -2px 4px rgba(0,0,0,.8),0 3px 6px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.5);cursor:grab;touch-action:none;transition:box-shadow .15s}
.knob:hover{box-shadow:inset 0 2px 4px rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.8),0 4px 10px rgba(0,0,0,.8),0 0 0 1px rgba(255,122,0,.3)}
.knob.small{width:34px;height:34px}
.knob.large{width:54px;height:54px}
.knob-indicator{position:absolute;top:3px;left:50%;width:3px;height:38%;background:linear-gradient(180deg,#fff,var(--orange));box-shadow:0 0 4px rgba(255,255,255,.6);transform-origin:bottom center;border-radius:2px;margin-left:-1.5px}
.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}
.knob-label{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:1px;color:var(--text-dim);text-transform:uppercase}
.headphone-section{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;background:#0a0a0b;border-radius:6px}
.headphone-section .knob-label{color:var(--screen-glow)}
.cue-hp-buttons{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:3px}
.cue-hp-btn{padding:5px;background:linear-gradient(180deg,#2a2a2e 0%,#0a0a0b 100%);border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;border-radius:3px;cursor:pointer}
.cue-hp-btn.active{background:var(--screen-glow);color:#000;box-shadow:0 0 10px rgba(0,212,255,.6)}
.vu-meter{width:14px;height:170px;background:#000;border-radius:3px;border:1px solid #1a1a1c;padding:2px;display:flex;flex-direction:column-reverse;gap:1px;box-shadow:inset 0 0 4px rgba(0,0,0,.9)}
.vu-led{flex:1;border-radius:1px;background:#0a1a0a;transition:background .05s}
.vu-led.on.green{background:var(--play-green);box-shadow:0 0 3px var(--play-green)}
.vu-led.on.yellow{background:var(--yellow);box-shadow:0 0 3px var(--yellow)}
.vu-led.on.red{background:var(--red);box-shadow:0 0 3px var(--red)}
.fader-wrap{position:relative;width:28px;height:170px;background:linear-gradient(180deg,#1a1a1c 0%,#050506 100%);border-radius:4px;box-shadow:inset 0 0 10px rgba(0,0,0,.9);border:1px solid #0a0a0b}
.fader-wrap::before{content:'';position:absolute;left:50%;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 1px,transparent 1px,transparent 8px);transform:translateX(-50%)}
.fader-handle{position:absolute;left:2px;right:2px;height:24px;background:linear-gradient(180deg,#9a9aa0 0%,#5a5a5e 30%,#3a3a3e 50%,#1e1e22 80%,#0e0e10 100%);border-radius:4px;bottom:0%;cursor:grab;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.4),0 4px 8px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.5);transition:box-shadow .12s}
.fader-handle:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.4),0 5px 12px rgba(0,0,0,.9),0 0 0 1px rgba(255,122,0,.3)}
.fader-handle::before{content:'';position:absolute;top:50%;left:3px;right:3px;height:2px;background:linear-gradient(90deg,transparent,#ff3c00 20%,#ff8a3a 50%,#ff3c00 80%,transparent);box-shadow:0 0 6px #ff3c00;transform:translateY(-50%)}
.channel-body{display:flex;gap:7px;align-items:flex-start}
.xfader-assign{display:flex;justify-content:center;gap:2px;margin-top:3px}
.xfader-assign .assign-btn{padding:3px 6px;background:#1a1a1c;border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:8px;border-radius:3px;cursor:pointer}
.xfader-assign .assign-btn.active{background:var(--orange);color:#000}
.crossfader-section{padding:7px;background:#0a0a0b;border-radius:6px}
.crossfader-label{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;color:var(--text-dim);text-align:center;margin-bottom:4px}
.crossfader-ab{display:flex;justify-content:space-between;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;color:var(--orange);padding:0 4px;margin-bottom:3px}
.crossfader-track{width:100%;height:24px;background:linear-gradient(90deg,#1a1a1c 0%,#050506 50%,#1a1a1c 100%);border-radius:4px;position:relative;cursor:pointer;border:1px solid #0a0a0b}
.crossfader-handle{position:absolute;top:2px;bottom:2px;width:36px;background:linear-gradient(180deg,#9a9aa0 0%,#5a5a5e 30%,#3a3a3e 50%,#1e1e22 80%,#0e0e10 100%);border-radius:4px;left:50%;transform:translateX(-50%);cursor:grab;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.4),0 4px 8px rgba(0,0,0,.8);transition:box-shadow .12s}
.crossfader-handle:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.4),0 5px 12px rgba(0,0,0,.9),0 0 0 1px rgba(255,122,0,.3)}
.crossfader-handle::before{content:'';position:absolute;left:50%;top:3px;bottom:3px;width:2px;background:linear-gradient(180deg,transparent,#ff3c00 20%,#ff8a3a 50%,#ff3c00 80%,transparent);box-shadow:0 0 6px #ff3c00;transform:translateX(-50%)}
.curve-switch{display:flex;justify-content:center;gap:3px;margin-top:3px}
.curve-btn{padding:3px 6px;background:#1a1a1c;border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:8px;border-radius:3px;cursor:pointer}
.curve-btn.active{background:var(--orange);color:#000}
.mic-section{padding:6px;background:#0a0a0b;border-radius:6px;display:grid;grid-template-columns:auto 1fr 1fr 1fr auto;gap:7px;align-items:center}
.mic-label{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;color:var(--yellow);writing-mode:vertical-rl;transform:rotate(180deg)}
.mic-btn{padding:8px;background:linear-gradient(180deg,#3a3a3e 0%,#1a1a1c 100%);border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1px;border-radius:4px;cursor:pointer}
.mic-btn.active{background:var(--yellow);color:#000;box-shadow:0 0 10px rgba(255,212,0,.6)}
.library{width:100%;max-width:1700px;background:linear-gradient(180deg,#2a2a2e 0%,#1a1a1c 100%);border-radius:10px;padding:12px;border:1px solid var(--deck-border);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.library-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05);gap:12px;flex-wrap:wrap}
.library-title{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:3px;color:#fff}
.library-title .count{color:var(--orange);font-size:10px}
.library-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.upload-btn,.url-btn,.yt-btn,.playlist-btn{padding:7px 12px;border:none;border-radius:4px;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;cursor:pointer}
.upload-btn{background:linear-gradient(180deg,var(--orange) 0%,#c85a00 100%);color:#000;box-shadow:0 2px 6px rgba(255,122,0,.4)}
.url-btn{background:linear-gradient(180deg,var(--screen-glow) 0%,#006699 100%);color:#000;box-shadow:0 2px 6px rgba(0,212,255,.4)}
.yt-btn{background:linear-gradient(180deg,#ff0000 0%,#aa0000 100%);color:#fff;box-shadow:0 2px 6px rgba(255,0,0,.4)}
.playlist-btn{background:linear-gradient(180deg,var(--purple) 0%,#8000aa 100%);color:#fff;box-shadow:0 2px 6px rgba(200,0,255,.4)}
.url-input-wrap,.yt-input-wrap{display:none;gap:6px;align-items:center;padding:10px 12px;background:#0a0a0b;border-radius:6px;margin-bottom:10px}
.url-input-wrap.open,.yt-input-wrap.open{display:flex}
.url-input-wrap{border:1px solid var(--screen-glow)}
.yt-input-wrap{border:1px solid var(--red)}
.url-input,.yt-input{flex:1;padding:8px 12px;background:#050506;border:1px solid #333;color:#fff;font-family:'Share Tech Mono',monospace;font-size:12px;border-radius:4px;direction:ltr}
.url-load,.yt-load{padding:8px 18px;color:#000;border:none;font-family:'Orbitron',sans-serif;font-weight:700;font-size:10px;letter-spacing:2px;border-radius:4px;cursor:pointer}
.url-load{background:var(--screen-glow)}
.yt-load{background:var(--red);color:#fff}
.url-load:disabled,.yt-load:disabled{opacity:.5;cursor:wait}
.url-status{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim);min-width:100px}
.url-status.error{color:var(--red)}
.url-status.success{color:var(--play-green)}
.search-wrap{display:flex;gap:6px;align-items:center}
.search-input{padding:6px 10px;background:#050506;border:1px solid #333;color:#fff;font-family:'Share Tech Mono',monospace;font-size:11px;border-radius:4px;width:160px}
.sort-select,.filter-select{padding:6px 10px;background:#050506;border:1px solid #333;color:var(--screen-glow);font-family:'Share Tech Mono',monospace;font-size:11px;border-radius:4px;cursor:pointer}
.track-list{display:flex;flex-direction:column;gap:3px;max-height:280px;overflow-y:auto}
.track-row{display:grid;grid-template-columns:30px 1.4fr 1fr 55px 50px 80px 280px;gap:10px;padding:7px 10px;background:#0a0a0b;border-radius:4px;align-items:center;font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-dim);border:1px solid transparent;cursor:grab}
.tl-btn{transition:all .12s ease;white-space:nowrap;}
.tl-btn:hover{filter:brightness(1.3);transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.5);}
.tl-btn.tl-a:hover{background:linear-gradient(180deg,#2ee0ff,#0088b4) !important;color:#000 !important;box-shadow:0 0 12px rgba(46,224,255,.6);}
.tl-btn.tl-b:hover{background:linear-gradient(180deg,#ff3c78,#a02050) !important;color:#fff !important;box-shadow:0 0 12px rgba(255,60,120,.6);}
.tl-btn.tl-c:hover{background:linear-gradient(180deg,#ffd400,#a08800) !important;color:#000 !important;box-shadow:0 0 12px rgba(255,212,0,.6);}
.tl-btn.tl-d:hover{background:linear-gradient(180deg,#c800ff,#6000a0) !important;color:#fff !important;box-shadow:0 0 12px rgba(200,0,255,.6);}
.tl-btn.preview:hover{background:linear-gradient(180deg,#ffd400,#a08800) !important;color:#000 !important;}
.tl-btn.remove:hover{background:linear-gradient(180deg,#ff3c3c,#a02020) !important;color:#fff !important;}
.track-row:hover{border-color:var(--orange);background:#141416}
.track-row.dragging{opacity:.5}
.track-row.yt-track{border-right:3px solid var(--red)}
.track-row .t-num{color:var(--orange)}
.track-row .t-title{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-row .t-artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-row .t-bpm{color:var(--screen-glow);text-align:center}
.track-row .t-key{color:var(--play-green);text-align:center}
.rating{display:flex;gap:2px;justify-content:center}
.star{cursor:pointer;color:#333;font-size:12px}
.star.filled{color:var(--yellow)}
.track-row .actions{display:flex;gap:3px;justify-content:flex-end;flex-wrap:wrap}
.track-row .actions button{padding:3px 7px;border:1px solid #2a2a2e;background:transparent;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1px;cursor:pointer;border-radius:3px}
.track-row .actions .deck-a:hover{border-color:#00e5ff;color:#00e5ff}
.track-row .actions .deck-b:hover{border-color:#ff3c78;color:#ff3c78}
.track-row .actions .preview:hover{border-color:var(--yellow);color:var(--yellow)}
.track-row .actions .remove:hover{border-color:var(--red);color:var(--red)}
.sampler-panel,.youtube-panel,.playlists-panel,.ai-dj-panel,.analytics-panel,.midi-panel,.settings-panel{width:100%;max-width:1700px;background:linear-gradient(180deg,#2a2a2e 0%,#1a1a1c 100%);border-radius:10px;padding:14px;border:1px solid var(--deck-border)}
.settings-panel{max-width:900px;padding:20px}
.ai-dj-panel{max-width:1200px;padding:20px;background:linear-gradient(135deg,rgba(200,0,255,.1) 0%,rgba(0,212,255,.1) 100%),linear-gradient(180deg,#2a2a2e 0%,#1a1a1c 100%);border-color:var(--purple);box-shadow:0 0 40px rgba(200,0,255,.2)}
.analytics-panel{max-width:1400px;padding:20px}
.midi-panel{max-width:900px;padding:20px}
.sampler-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05)}
.sampler-title{font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:3px;color:#fff}
.sampler-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
@media(max-width:800px){.sampler-grid{grid-template-columns:repeat(4,1fr)}}
.sample-pad{aspect-ratio:1;background:linear-gradient(180deg,#3a3a3e 0%,#1a1a1c 100%);border:2px solid #333;border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;position:relative;overflow:hidden;font-family:'Orbitron',sans-serif}
.sample-pad .pad-num{font-size:24px;font-weight:900;color:var(--text-dim);text-shadow:0 0 10px currentColor}
.sample-pad .pad-name{font-size:9px;color:var(--text-dim);letter-spacing:1px;margin-top:4px;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sample-pad.loaded{border-color:var(--pad-color,var(--orange))}
.sample-pad.loaded .pad-num{color:var(--pad-color,var(--orange))}
.sample-pad.playing{background:var(--pad-color,var(--orange));box-shadow:0 0 25px var(--pad-color,var(--orange));transform:scale(.95)}
.sample-pad.playing .pad-num,.sample-pad.playing .pad-name{color:#000}
.sample-pad[data-color="0"]{--pad-color:#00e5ff}.sample-pad[data-color="1"]{--pad-color:#ff3c78}.sample-pad[data-color="2"]{--pad-color:#ffd400}.sample-pad[data-color="3"]{--pad-color:#00ff7a}.sample-pad[data-color="4"]{--pad-color:#ff7a00}.sample-pad[data-color="5"]{--pad-color:#c800ff}.sample-pad[data-color="6"]{--pad-color:#00ffd4}.sample-pad[data-color="7"]{--pad-color:#ff5a00}.sample-pad[data-color="8"]{--pad-color:#9bff00}.sample-pad[data-color="9"]{--pad-color:#ff009b}.sample-pad[data-color="10"]{--pad-color:#00b0ff}.sample-pad[data-color="11"]{--pad-color:#ff8800}.sample-pad[data-color="12"]{--pad-color:#b000ff}.sample-pad[data-color="13"]{--pad-color:#ffff00}.sample-pad[data-color="14"]{--pad-color:#00ff00}.sample-pad[data-color="15"]{--pad-color:#ff00aa}

/* COMPACT DECKS C+D in mixer */
.compact-decks{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;background:#0a0a0b;border-radius:6px;border:1px solid #1a1a1c}
.compact-deck{display:flex;flex-direction:column;gap:4px;padding:6px;background:#141416;border-radius:4px;border:1px solid #2a2a2e}
.compact-deck.drop-target{border-color:var(--orange);box-shadow:0 0 15px rgba(255,122,0,.6)}
.compact-deck-header{display:flex;justify-content:space-between;align-items:center;font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px}
.compact-deck-header .cd-num{color:var(--orange);font-weight:800;font-size:14px}
.compact-deck-title{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 4px;background:#050506;border-radius:3px;border:1px solid #1a2a30}
.compact-deck-bpm{font-family:'Orbitron',sans-serif;font-size:12px;color:var(--orange-glow);text-align:center}
.compact-transport{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.compact-btn{padding:5px 2px;border:none;border-radius:3px;font-family:'Orbitron',sans-serif;font-weight:800;font-size:9px;letter-spacing:1px;cursor:pointer;background:linear-gradient(180deg,#3a3a3e 0%,#1a1a1c 100%);color:var(--text)}
.compact-btn.cue{color:var(--cue-orange)}
.compact-btn.cue.active{background:var(--cue-orange);color:#000}
.compact-btn.play{color:var(--play-green)}
.compact-btn.play.active{background:var(--play-green);color:#000;animation:playPulse 1s infinite}
.compact-tempo{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px}
.compact-tempo button{padding:3px;background:#1a1a1c;border:1px solid #333;color:var(--orange);font-family:'Orbitron',sans-serif;font-size:9px;border-radius:3px;cursor:pointer}
.compact-tempo button:active{background:var(--orange);color:#000}
.compact-vol{display:flex;align-items:center;gap:4px}
.compact-vol input{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:#333;border-radius:2px;outline:none}
.compact-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--orange);border-radius:50%;cursor:pointer}
.compact-vol-label{font-family:'Share Tech Mono',monospace;font-size:8px;color:var(--text-dim);letter-spacing:1px}

/* SCENE FX & X-PAD */
.scene-fx-panel{width:100%;max-width:1700px;background:linear-gradient(180deg,#2a2a2e 0%,#1a1a1c 100%);border-radius:10px;padding:10px 14px;border:1px solid var(--deck-border);box-shadow:0 10px 30px rgba(0,0,0,.6);display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center}
.scene-fx-label{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:3px;color:var(--pink);font-weight:700}
.scene-fx-buttons{display:flex;gap:3px;flex-wrap:wrap}
.scene-btn{padding:7px 11px;background:linear-gradient(180deg,#2a2a2e 0%,#1a1a1c 100%);border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:1.5px;border-radius:4px;cursor:pointer}
.scene-btn.active{background:var(--pink);color:#000;box-shadow:0 0 15px rgba(255,60,120,.6)}
.x-pad-wrap{display:flex;gap:10px;align-items:center}
.x-pad{width:160px;height:80px;background:radial-gradient(ellipse,#1a1a1c 0%,#050506 100%);border:2px solid #444;border-radius:6px;position:relative;cursor:crosshair;box-shadow:inset 0 0 20px rgba(0,0,0,.8);touch-action:none}
.x-pad.active{border-color:var(--purple);box-shadow:0 0 20px rgba(200,0,255,.5),inset 0 0 20px rgba(0,0,0,.8)}
.x-pad-dot{position:absolute;width:12px;height:12px;background:var(--purple);border-radius:50%;box-shadow:0 0 15px var(--purple);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .15s}
.x-pad.active .x-pad-dot{opacity:1}
.x-pad-labels{position:absolute;inset:0;pointer-events:none;font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--text-dim);opacity:.5}
.x-pad-labels .top{position:absolute;top:3px;left:50%;transform:translateX(-50%)}
.x-pad-labels .bottom{position:absolute;bottom:3px;left:50%;transform:translateX(-50%)}
.x-pad-labels .left{position:absolute;left:3px;top:50%;transform:translateY(-50%)}
.x-pad-labels .right{position:absolute;right:3px;top:50%;transform:translateY(-50%)}

/* Master Isolator */
.isolator-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;background:#0a0a0b;border-radius:6px;border:1px solid var(--red)}
.isolator-panel .knob-wrap .knob-label{color:var(--red);font-weight:700}
.settings-section{margin-bottom:18px}
.settings-section h3{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:3px;color:var(--orange);margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.05)}
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;gap:10px;flex-wrap:wrap}
.setting-label{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--text)}
.setting-desc{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim)}
.toggle-switch{position:relative;width:48px;height:24px;background:#1a1a1c;border-radius:12px;cursor:pointer;border:1px solid #333}
.toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#666;border-radius:50%;transition:all .2s}
.toggle-switch.on{background:var(--orange)}
.toggle-switch.on::after{left:26px;background:#fff}
/* Deck + Mixer layout picker */
.layout-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;width:100%;padding:8px 0}
.layout-card{position:relative;background:linear-gradient(180deg,#15151a 0%,#08080b 100%);border:1px solid #2a2a30;border-radius:10px;padding:10px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.layout-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(255,144,32,.06) 0%,transparent 60%);pointer-events:none;opacity:0;transition:opacity .2s}
.layout-card:hover{border-color:rgba(255,144,32,.5);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.6)}
.layout-card:hover::before{opacity:1}
.layout-card.selected{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 0 18px rgba(255,144,32,.45),inset 0 0 18px rgba(255,144,32,.08)}
.layout-card.selected::after{content:'✓';position:absolute;top:6px;right:8px;width:20px;height:20px;background:var(--orange);color:#1a0800;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;box-shadow:0 0 10px rgba(255,144,32,.7)}
.layout-card .lc-preview{width:100%;height:120px;background:radial-gradient(ellipse at center,#0c0c12 0%,#000 100%);border-radius:6px;border:1px solid #1a1a20;display:flex;align-items:center;justify-content:center;overflow:hidden}
.layout-card .lc-preview svg{width:100%;height:100%;display:block}
.layout-card .lc-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:6px}
.layout-card .lc-name{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;color:#fff;font-weight:700}
.layout-card .lc-model{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--orange);letter-spacing:1.5px}
.layout-card .lc-desc{font-family:'Share Tech Mono',monospace;font-size:9.5px;color:var(--text-dim);line-height:1.4}
.ai-dj-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.ai-dj-title{font-family:'Orbitron',sans-serif;font-size:16px;letter-spacing:4px;font-weight:900;background:linear-gradient(90deg,var(--purple),var(--screen-glow));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ai-dj-status{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:6px}
.ai-dj-status .dot{width:8px;height:8px;border-radius:50%;background:var(--red)}
.ai-dj-status.active .dot{background:var(--play-green);animation:blink 1s infinite}
.ai-dj-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.ai-dj-btn{padding:12px;background:linear-gradient(180deg,#3a3a3e 0%,#1a1a1c 100%);border:1px solid #555;color:var(--text);font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;border-radius:6px;cursor:pointer}
.ai-dj-btn.primary{background:linear-gradient(180deg,var(--purple) 0%,#6000aa 100%);border-color:var(--purple);color:#fff}
.ai-dj-btn.primary.active{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 20px rgba(200,0,255,.6)}50%{box-shadow:0 0 40px rgba(200,0,255,1)}}
.ai-dj-config{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px;background:#0a0a0b;border-radius:8px}
.ai-config-item{display:flex;flex-direction:column;gap:4px}
.ai-config-item label{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim);letter-spacing:1px}
.ai-log{max-height:140px;overflow-y:auto;padding:8px;background:#050506;border-radius:4px;margin-top:10px;font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--screen-glow);line-height:1.6}
.ai-log-entry{opacity:.7}
.ai-log-entry.recent{opacity:1;color:var(--play-green)}
/* AI SMART MIX — profiles, queue, options, history */
.ai-smart-section{margin-top:14px;padding:12px;background:linear-gradient(180deg,#0c0c10 0%,#070708 100%);border:1px solid #2a2a30;border-radius:8px}
.ai-smart-section h5{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2.5px;color:var(--orange);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.ai-smart-section h5 .badge{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.5px;padding:2px 7px;background:rgba(200,0,255,.18);color:var(--purple);border:1px solid rgba(200,0,255,.4);border-radius:3px;font-weight:700}
.ai-profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.ai-profile-btn{position:relative;padding:10px 8px;background:linear-gradient(180deg,#1c1c20 0%,#0a0a0c 100%);border:1px solid #333;border-radius:6px;color:var(--text);cursor:pointer;text-align:left;transition:all .15s}
.ai-profile-btn:hover{border-color:var(--screen-glow);box-shadow:0 0 14px rgba(46,224,255,.25);transform:translateY(-1px)}
.ai-profile-btn.active{border-color:var(--purple);background:linear-gradient(180deg,rgba(200,0,255,.22) 0%,rgba(200,0,255,.08) 100%);box-shadow:0 0 18px rgba(200,0,255,.45),inset 0 0 12px rgba(200,0,255,.15)}
.ai-profile-btn .ap-name{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:1.5px;font-weight:800;color:#fff;display:flex;align-items:center;gap:6px;margin-bottom:3px}
.ai-profile-btn .ap-desc{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--text-dim);letter-spacing:.4px;line-height:1.35}
.ai-profile-btn .ap-meta{margin-top:5px;font-family:'Share Tech Mono',monospace;font-size:8.5px;color:var(--screen-glow);letter-spacing:.5px}
.ai-profile-btn.active .ap-meta{color:var(--orange-glow)}
.ai-pl-player{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.ai-pl-player select{flex:1;padding:9px 10px;background:#0a0a0b;border:1px solid #333;color:var(--text);font-family:'Share Tech Mono',monospace;font-size:11px;border-radius:5px}
.ai-pl-player select:focus{outline:none;border-color:var(--purple)}
.ai-pl-btn{padding:10px 14px;background:linear-gradient(180deg,var(--purple) 0%,#5a0099 100%);border:1px solid var(--purple);color:#fff;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:800;letter-spacing:1.8px;border-radius:5px;cursor:pointer;white-space:nowrap;box-shadow:0 0 12px rgba(200,0,255,.4)}
.ai-pl-btn:hover{transform:translateY(-1px);box-shadow:0 0 18px rgba(200,0,255,.7)}
.ai-pl-btn.stop{background:linear-gradient(180deg,var(--red) 0%,#aa0000 100%);border-color:var(--red);box-shadow:0 0 12px rgba(255,46,46,.4)}
.ai-pl-shuffle{padding:10px;background:#0a0a0b;border:1px solid #444;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.4px;border-radius:5px;cursor:pointer;min-width:70px}
.ai-pl-shuffle.active{background:var(--orange);color:#000;border-color:var(--orange);box-shadow:0 0 10px rgba(255,138,26,.5)}
.ai-pl-status{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim);margin-top:8px;line-height:1.5}
.ai-pl-status .live{color:var(--play-green);font-weight:700}
.ai-pl-status .now{color:var(--orange-glow);font-weight:700}
.ai-options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.ai-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;background:#0a0a0c;border:1px solid #2a2a30;border-radius:5px;cursor:pointer;transition:border-color .12s,background .12s}
.ai-toggle:hover{border-color:#444}
.ai-toggle.on{border-color:var(--play-green);background:linear-gradient(180deg,rgba(28,255,143,.10),rgba(28,255,143,.03))}
.ai-toggle .ato-label{font-family:'Orbitron',sans-serif;font-size:9.5px;letter-spacing:1.4px;color:var(--text);font-weight:700}
.ai-toggle .ato-sub{font-family:'Share Tech Mono',monospace;font-size:8.5px;color:var(--text-dim);margin-top:2px;letter-spacing:.4px}
.ai-toggle .ato-led{width:10px;height:10px;border-radius:50%;background:#333;flex-shrink:0;border:1px solid #555}
.ai-toggle.on .ato-led{background:var(--play-green);box-shadow:0 0 8px var(--play-green)}
.ai-queue-list{display:flex;flex-direction:column;gap:5px}
.ai-queue-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:8px 10px;background:#0a0a0c;border:1px solid #222;border-radius:5px;cursor:pointer;transition:all .15s}
.ai-queue-item:hover{border-color:var(--screen-glow);transform:translateX(2px)}
.ai-queue-item.pinned{border-color:var(--orange);background:linear-gradient(90deg,rgba(255,122,0,.10) 0%,#0a0a0c 60%)}
.ai-queue-item .aq-rank{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:900;color:var(--screen-glow);min-width:22px;text-align:center}
.ai-queue-item.pinned .aq-rank{color:var(--orange)}
.ai-queue-item .aq-info{min-width:0}
.ai-queue-item .aq-title{font-family:'Share Tech Mono',monospace;font-size:11px;color:#fff;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-queue-item .aq-reason{font-family:'Share Tech Mono',monospace;font-size:9.5px;color:var(--text-dim);margin-top:2px;letter-spacing:.4px}
.ai-queue-item .aq-reason b{color:var(--play-green);font-weight:700}
.ai-queue-item .aq-reason b.warn{color:var(--yellow)}
.ai-queue-item .aq-score{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:800;color:var(--orange);min-width:42px;text-align:right}
.ai-queue-item .aq-pin{padding:5px 9px;background:transparent;border:1px solid #555;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:8.5px;letter-spacing:1.2px;font-weight:700;border-radius:3px;cursor:pointer}
.ai-queue-item .aq-pin:hover{border-color:var(--orange);color:var(--orange)}
.ai-queue-item.pinned .aq-pin{background:var(--orange);color:#000;border-color:var(--orange)}
.ai-history-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.ai-history-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:7px 10px;background:#0a0a0c;border:1px solid #222;border-radius:4px;font-family:'Share Tech Mono',monospace;font-size:10px}
.ai-history-row .ahr-time{color:var(--text-dim);font-size:9px;letter-spacing:.5px;min-width:56px}
.ai-history-row .ahr-tracks{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-history-row .ahr-style{padding:2px 7px;border-radius:3px;font-size:9px;letter-spacing:1px;font-weight:700;color:#000;background:var(--screen-glow);font-family:'Orbitron',sans-serif}
.ai-history-row .ahr-style.energy{background:var(--orange)}
.ai-history-row .ahr-style.cut{background:var(--red);color:#fff}
.ai-history-row .ahr-style.echo{background:var(--screen-glow)}
.ai-history-row .ahr-style.harmonic{background:var(--play-green)}
.ai-history-row .ahr-style.smooth{background:var(--purple);color:#fff}
.playlist-card .pl-actions button.pl-ai{background:linear-gradient(180deg,var(--purple) 0%,#5a0099 100%);color:#fff;border-color:var(--purple);font-weight:800;letter-spacing:1.2px}
.playlist-card .pl-actions button.pl-ai:hover{box-shadow:0 0 12px rgba(200,0,255,.6);color:#fff;border-color:#fff}
.yt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.yt-grid{grid-template-columns:1fr}}
.yt-player-box{background:#000;border-radius:8px;overflow:hidden;border:2px solid var(--red);box-shadow:0 0 20px rgba(255,0,0,.3)}
.yt-player-wrap{position:relative;padding-bottom:56.25%;height:0}
.yt-player-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.yt-controls{padding:10px;display:flex;justify-content:space-between;align-items:center;background:#0a0a0b;gap:8px}
.yt-title{font-family:'Share Tech Mono',monospace;font-size:11px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.yt-vol{width:100px;-webkit-appearance:none;appearance:none;height:4px;background:#333;border-radius:2px;outline:none}
.yt-vol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--red);border-radius:50%;cursor:pointer}
.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.playlist-card{background:linear-gradient(135deg,rgba(255,122,0,.1) 0%,transparent 100%),#0a0a0b;border:1px solid #333;border-radius:8px;padding:12px;cursor:pointer;transition:all .15s}
.playlist-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.playlist-card h4{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;margin-bottom:6px;letter-spacing:1px}
.playlist-card .pl-meta{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim);margin-bottom:8px}
.playlist-card .pl-actions{display:flex;gap:5px}
.playlist-card button{flex:1;padding:5px;background:transparent;border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:8px;border-radius:3px;cursor:pointer}
.playlist-card button:hover{border-color:var(--orange);color:var(--orange)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.stat-card{background:#0a0a0b;border:1px solid #333;border-radius:8px;padding:14px;text-align:center}
.stat-card h5{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim);letter-spacing:2px;margin-bottom:6px}
.stat-card .stat-value{font-family:'Orbitron',sans-serif;font-size:28px;font-weight:800;color:var(--orange);text-shadow:0 0 10px rgba(255,122,0,.5)}
.stat-card .stat-sub{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--screen-glow);margin-top:4px}
.mix-history{background:#0a0a0b;border-radius:8px;padding:14px}
.mix-history h4{font-family:'Orbitron',sans-serif;font-size:12px;color:var(--orange);margin-bottom:10px;letter-spacing:2px}
.mix-history-list{max-height:200px;overflow-y:auto;font-family:'Share Tech Mono',monospace;font-size:11px}
.mix-entry{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #1a1a1c;color:var(--text)}
.mix-entry .time{color:var(--text-dim)}
.midi-devices{max-height:200px;overflow-y:auto;background:#0a0a0b;border-radius:6px;padding:10px;margin-bottom:14px}
.midi-device{padding:8px;background:#141416;border-radius:4px;margin-bottom:5px;display:flex;justify-content:space-between;font-family:'Share Tech Mono',monospace;font-size:11px}
.midi-device .status{color:var(--play-green)}
.midi-log{background:#050506;padding:10px;border-radius:4px;font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--screen-glow);max-height:150px;overflow-y:auto;white-space:pre-wrap}
.toast{position:fixed;bottom:20px;right:20px;background:#0a0a0b;border:1px solid var(--orange);color:#fff;padding:12px 18px;font-family:'Share Tech Mono',monospace;font-size:12px;border-radius:4px;z-index:10000;box-shadow:0 0 20px rgba(255,122,0,.4);animation:slideIn .3s}
.toast.error{border-color:var(--red);box-shadow:0 0 20px rgba(255,46,46,.4)}
.toast.success{border-color:var(--play-green);box-shadow:0 0 20px rgba(0,255,122,.4)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;animation:fadeIn .2s}
.modal-overlay.open{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:linear-gradient(180deg,#2a2a2e 0%,#1a1a1c 100%);border:1px solid var(--orange);border-radius:10px;padding:24px;max-width:500px;width:90%;box-shadow:0 0 60px rgba(255,122,0,.3)}
.modal-box h3{font-family:'Orbitron',sans-serif;font-size:14px;color:var(--orange);margin-bottom:14px;letter-spacing:2px}
.modal-box input{width:100%;padding:10px;background:#0a0a0b;border:1px solid #333;color:#fff;font-family:'Share Tech Mono',monospace;font-size:13px;border-radius:4px;margin-bottom:10px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
.modal-actions button{padding:8px 16px;background:transparent;border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;border-radius:4px;cursor:pointer}
.modal-actions button.primary{background:var(--orange);color:#000;border-color:var(--orange)}
.modal-actions button:hover{border-color:var(--orange)}
.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px;background:#0a0a0b;border-radius:8px}
.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:#141416;border-radius:4px;font-family:'Share Tech Mono',monospace;font-size:11px}
.shortcut-item kbd{padding:3px 8px;background:var(--orange);color:#000;border-radius:3px;font-weight:700;font-size:10px}

/* ============================================================
   VISUAL POLISH LAYER v3 — material depth, lighting, motion
   ============================================================ */
:root{
  --orange:#ff8a1a;
  --orange-glow:#ffb366;
  --cue-orange:#ff6a1a;
  --screen-glow:#2ee0ff;
  --play-green:#1cff8f;
  --accent-cyan:#00e5ff;
  --panel-edge:rgba(255,255,255,.07);
  --panel-edge-strong:rgba(255,255,255,.12);
  --inset-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.5);
  --metal:radial-gradient(circle at 30% 25%,#8a8a90 0%,#3a3a40 40%,#141418 80%,#0a0a0c 100%);
  --metal-dark:radial-gradient(circle at 30% 25%,#4a4a50 0%,#26262a 45%,#0e0e12 100%);
  --glass:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.25) 100%);
}

/* Ambient body glow + vignette */
html,body{
  background:
    radial-gradient(ellipse at 20% 0%,rgba(255,138,26,.06) 0%,transparent 45%),
    radial-gradient(ellipse at 80% 100%,rgba(46,224,255,.05) 0%,transparent 45%),
    radial-gradient(ellipse at center,#1a1a1e 0%,var(--bg) 70%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
}

/* Smooth micro-transitions everywhere */
button,.tab-btn,.tool-btn,.beat-btn,.loop-btn,.jump-btn,.util-btn,
.pad-mode-btn,.cue-btn,.big-btn,.tempo-btn,.step-btn,.mic-btn,
.sample-pad,.scene-btn,.compact-btn,.cue-hp-btn,.fx-onoff,.tap-btn,
.assign-btn,.curve-btn,.ai-dj-btn{
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
button:hover:not(:disabled),.tool-btn:hover,.tab-btn:hover,.big-btn:hover,
.loop-btn:hover,.jump-btn:hover,.util-btn:hover,.scene-btn:hover,
.pad-mode-btn:hover,.tempo-btn:hover,.beat-btn:hover,.mic-btn:hover{
  transform:translateY(-1px);
}
button:active:not(:disabled),.big-btn:active,.loop-btn:active,.jump-btn:active,
.util-btn:active,.scene-btn:active,.pad-mode-btn:active,.tempo-btn:active,
.beat-btn:active{ transform:translateY(0) scale(.97) }

/* Refined panel look — decks, mixer, library */
.cdj,.mixer,.library,.sampler-panel,.youtube-panel,.playlists-panel,
.ai-dj-panel,.analytics-panel,.midi-panel,.settings-panel,
.beat-fx-panel,.scene-fx-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 10%,rgba(0,0,0,.15) 100%),
    linear-gradient(180deg,#2c2c31 0%,#17171a 100%);
  border:1px solid var(--panel-edge);
  box-shadow:
    inset 0 1px 0 var(--panel-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.03),
    0 24px 60px -12px rgba(0,0,0,.75),
    0 2px 8px rgba(0,0,0,.4);
}
.cdj.drop-target{
  border-color:var(--orange);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 0 1px rgba(255,138,26,.35),
    0 0 48px -4px rgba(255,138,26,.6),
    0 24px 60px -12px rgba(0,0,0,.75);
}

/* BRAND & header */
.brand{text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 20px rgba(255,138,26,.15)}
.brand .max{
  background:linear-gradient(180deg,#ffb366 0%,var(--orange) 55%,#c85a00 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.5),0 0 12px rgba(255,138,26,.5);
}
.master-bpm{
  background:#020608;border:1px solid #1a2a30;
  box-shadow:inset 0 0 16px rgba(46,224,255,.08),inset 0 1px 2px rgba(0,0,0,.8);
  color:var(--orange-glow);text-shadow:0 0 10px rgba(255,138,26,.7);
  font-family:'Orbitron',sans-serif;font-weight:700;
}

/* SCREEN glass effect */
.screen{
  background:
    linear-gradient(180deg,rgba(46,224,255,.06) 0%,transparent 40%),
    linear-gradient(180deg,#06121a 0%,#020608 100%);
  border:1px solid rgba(46,224,255,.18);
  box-shadow:
    inset 0 0 40px rgba(46,224,255,.08),
    inset 0 2px 8px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,0,0,.5);
}
.screen::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 18%,transparent 82%,rgba(0,0,0,.3) 100%);
  border-radius:inherit;
}
.track-title{text-shadow:0 0 12px rgba(46,224,255,.55),0 0 2px rgba(255,255,255,.6)}
.screen-bpm{
  font-size:22px;
  text-shadow:0 0 14px rgba(255,138,26,.8),0 0 2px rgba(255,180,100,.6);
}
.time-value{text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 1px rgba(0,0,0,.6)}
.time-value.remain{text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 3px rgba(255,138,26,.35)}

/* JOG WHEEL — Pioneer CDJ-3000 inspired, pro studio finish */
.jog-wheel{
  filter:drop-shadow(0 20px 32px rgba(0,0,0,.8));
}
/* Outer bezel — brushed metal rim with chrome highlight ring */
.jog-outer{
  background:
    radial-gradient(circle at 32% 25%,rgba(255,255,255,.22) 0%,transparent 32%),
    radial-gradient(circle at 68% 82%,rgba(255,138,26,.09) 0%,transparent 45%),
    conic-gradient(from 220deg,#5a5a60 0deg,#2a2a2e 45deg,#3a3a40 90deg,#1a1a1e 180deg,#3a3a40 270deg,#5a5a60 360deg),
    radial-gradient(circle at 30% 30%,#6a6a70 0%,#2a2a2e 55%,#0a0a0c 100%);
  box-shadow:
    0 0 0 2px #050506,
    0 0 0 3px rgba(255,255,255,.05),
    0 0 0 5px #1e1e22,
    0 0 0 6px rgba(0,0,0,.7),
    inset 0 3px 14px rgba(255,255,255,.14),
    inset 0 -8px 22px rgba(0,0,0,.95),
    0 20px 48px rgba(0,0,0,.85);
}
/* Inner black ring where the orange light sweeps */
.jog-ring{
  background:
    radial-gradient(circle,#050507 0%,#000 100%);
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.95),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 0 1px rgba(0,0,0,.8);
}
/* Rotating orange accent light — denser + richer gradient */
.jog-ring-light{
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,138,26,.15) 2deg,
    rgba(255,138,26,.6) 5deg,
    var(--orange) 8deg,
    var(--orange-glow) 11deg,
    rgba(255,200,140,.5) 15deg,
    rgba(255,138,26,.15) 20deg,
    transparent 28deg);
  filter:blur(1.2px) drop-shadow(0 0 6px rgba(255,138,26,.4));
}
/* Hash-mark scale on the inner bezel for rotational reference */
.jog-markers::before{
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.22) 0deg 1.2deg,transparent 1.2deg 9deg);
  mask:radial-gradient(circle,transparent 56%,#000 56%,#000 60%,transparent 60%);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 56%,#000 60%,transparent 60%);
}
/* Platter — dark brushed surface with subtle radial grain */
.jog-platter{
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.14) 0%,transparent 32%),
    conic-gradient(from 0deg,
      rgba(255,255,255,.025) 0deg 1.5deg,
      transparent 1.5deg 3deg),
    radial-gradient(circle at 35% 35%,#2e2e32 0%,#151517 55%,#06060a 100%);
  box-shadow:
    inset 0 3px 12px rgba(255,255,255,.12),
    inset 0 -8px 18px rgba(0,0,0,.95),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 2px 6px rgba(0,0,0,.7);
}
/* Disc inner — fine vinyl-grooves pattern + accent dot ring */
.jog-platter-disc{
  background:
    repeating-radial-gradient(circle,rgba(255,255,255,.03) 0px,rgba(255,255,255,.03) 1px,transparent 1px,transparent 2px),
    conic-gradient(from 0deg,rgba(255,255,255,.05) 0deg 1.5deg,transparent 1.5deg 3deg),
    radial-gradient(circle,#1c1c1f 0%,#06060a 100%);
  box-shadow:inset 0 0 20px rgba(0,0,0,.7);
}
.jog-platter-disc::before{
  content:'';position:absolute;inset:14%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,138,26,.18) 0deg 1deg,transparent 1deg 18deg);
  mask:radial-gradient(circle,transparent 65%,#000 65%,#000 68%,transparent 68%);
  -webkit-mask:radial-gradient(circle,transparent 65%,#000 65%,#000 68%,transparent 68%);
  pointer-events:none;
}
/* Center LCD-style screen with hairline bezel ring */
.jog-center-screen{
  background:
    linear-gradient(180deg,rgba(46,224,255,.12) 0%,transparent 38%),
    radial-gradient(circle,#0c1c24 0%,#020608 100%);
  border:2px solid rgba(46,224,255,.3);
  box-shadow:
    inset 0 0 26px rgba(46,224,255,.18),
    inset 0 2px 6px rgba(0,0,0,.95),
    0 0 0 1px rgba(0,0,0,.7),
    0 0 18px rgba(46,224,255,.14),
    0 4px 10px rgba(0,0,0,.7);
}
/* Thin outer halo around the screen */
.jog-center-screen::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(46,224,255,.15);pointer-events:none;
}
.jog-center-screen .bpm-display{font-size:22px;text-shadow:0 0 14px rgba(255,138,26,.95),0 0 2px rgba(255,255,255,.3)}
.jog-center-screen .bpm-sub{color:var(--screen-glow);opacity:.85}
.jog-center-screen .deck-badge{color:#fff;opacity:.85;font-weight:700;text-shadow:0 0 4px rgba(255,255,255,.2)}
/* Top pointer — white→orange arrow */
.jog-indicator{
  background:linear-gradient(180deg,#fff 0%,var(--orange-glow) 50%,var(--orange) 100%);
  box-shadow:0 0 10px rgba(255,138,26,.9),0 0 2px rgba(255,255,255,.9);
  border-radius:3px 3px 50% 50%;
}

/* KNOBS — brushed metal + dimensional indicator */
.knob{
  background:
    radial-gradient(circle at 30% 28%,rgba(255,255,255,.35) 0%,transparent 30%),
    conic-gradient(from 0deg,#45454a 0deg,#6a6a70 45deg,#2a2a2e 90deg,#55555a 180deg,#25252a 270deg,#45454a 360deg),
    radial-gradient(circle at 30% 30%,#6a6a6e 0%,#2a2a2e 60%,#0a0a0b 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.22),
    inset 0 -3px 6px rgba(0,0,0,.85),
    0 3px 6px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.5);
}
.knob::after{
  content:'';position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.12) 0%,transparent 55%);
  pointer-events:none;
}
.knob-indicator{
  background:linear-gradient(180deg,#fff 0%,var(--orange-glow) 50%,var(--orange) 100%);
  box-shadow:0 0 6px rgba(255,180,100,.7),0 0 2px rgba(255,255,255,.9);
}
.knob-wrap:hover .knob{filter:brightness(1.08)}
/* +/- stepper — mobile / narrow viewport replaces the rotary knob so
   touch users can nudge values precisely instead of fighting a tiny dial. */
.knob-steppers{display:none;align-items:center;gap:3px;user-select:none}
.knob-step{width:22px;height:22px;padding:0;border-radius:5px;border:1px solid #2a2a30;background:linear-gradient(180deg,#3a3a3e 0%,#1a1a1c 100%);color:var(--text);font-family:'Orbitron',sans-serif;font-size:14px;font-weight:800;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.5);transition:background .12s,border-color .12s,color .12s,box-shadow .12s;flex:0 0 auto}
.knob-step:active{background:linear-gradient(180deg,var(--orange) 0%,#c85a00 100%);color:#000;box-shadow:inset 0 1px 3px rgba(0,0,0,.4),0 0 10px rgba(255,138,26,.55);border-color:#c85a00}
.knob-step.plus{color:var(--play-green);border-color:rgba(0,255,122,.35)}
.knob-step.minus{color:var(--cue-orange);border-color:rgba(255,90,0,.35)}
.knob-step-val{flex:1;min-width:26px;text-align:center;font-family:'Share Tech Mono',monospace;font-size:11px;font-weight:700;color:var(--screen-glow);letter-spacing:.5px;cursor:pointer;padding:3px 0;border-radius:3px;text-shadow:0 0 6px rgba(0,212,255,.5);background:#050a0c;border:1px solid #1a1a1c}
/* SIMPLE view = mobile / narrow viewport — replace rotary knobs with stepper */
@media(max-width:760px){
  .channel .knob,.color-fx-channel .knob,.master-section .knob,
  .isolator-panel .knob,.headphone-section .knob,.mic-section .knob,
  .mixer-toolbar .knob,.mixer .knob{display:none !important}
  .channel .knob-steppers,.color-fx-channel .knob-steppers,.master-section .knob-steppers,
  .isolator-panel .knob-steppers,.headphone-section .knob-steppers,.mic-section .knob-steppers,
  .mixer-toolbar .knob-steppers,.mixer .knob-steppers{display:inline-flex}
  .channel .knob-wrap,.color-fx-channel{gap:3px}
}

/* BIG BUTTONS — pronounced tactile feel */
.big-btn{
  background:
    linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 40%),
    linear-gradient(180deg,#404045 0%,#1a1a1e 60%,#111114 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 6px rgba(0,0,0,.7),
    0 3px 0 rgba(0,0,0,.45),
    0 6px 14px rgba(0,0,0,.55);
}
.big-btn:hover{filter:brightness(1.12)}
.big-btn.cue.active{
  background:linear-gradient(180deg,#ff7a1a 0%,#c44a00 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 0 26px rgba(255,106,26,.85),0 0 2px rgba(255,200,150,.9);
}
.big-btn.play.active{
  background:linear-gradient(180deg,#2dff9a 0%,#0ab066 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 0 26px rgba(28,255,143,.85);
}

/* FADERS — metal handle with highlight band */
.fader-wrap,.crossfader-track,.tempo-slider{
  background:linear-gradient(180deg,#0a0a0c 0%,#02020a 100%);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.95),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 0 0 1px rgba(0,0,0,.6);
}
.fader-handle,.tempo-handle,.crossfader-handle{
  background:
    linear-gradient(180deg,#aaaab0 0%,#6a6a70 25%,#3a3a40 55%,#1a1a1e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 3px rgba(0,0,0,.7),
    0 4px 10px rgba(0,0,0,.8),
    0 0 0 1px rgba(0,0,0,.5);
}
.fader-handle::after,.tempo-handle::after,.crossfader-handle::after{
  content:'';position:absolute;left:15%;right:15%;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.15) 0 2px,transparent 2px 4px);
  transform:translateY(-50%);pointer-events:none;
}
.fader-handle::before{
  background:linear-gradient(90deg,transparent,#ff3c00,transparent);
  box-shadow:0 0 8px #ff3c00;height:2px;
}

/* VU METER LEDs — crisper, with mild glow */
.vu-led{background:#050a08;box-shadow:inset 0 0 1px rgba(0,0,0,.9)}
.vu-led.on.green{background:linear-gradient(90deg,#0fb05c,#1cff8f);box-shadow:0 0 5px rgba(28,255,143,.8),inset 0 0 2px rgba(255,255,255,.3)}
.vu-led.on.yellow{background:linear-gradient(90deg,#c8a400,#ffd400);box-shadow:0 0 5px rgba(255,212,0,.8),inset 0 0 2px rgba(255,255,255,.3)}
.vu-led.on.red{background:linear-gradient(90deg,#c41a1a,#ff3c3c);box-shadow:0 0 6px rgba(255,46,46,.9),inset 0 0 2px rgba(255,255,255,.3)}

/* HOT CUES — chiclet look */
.cue-btn{
  background:
    linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 45%),
    linear-gradient(180deg,#3a3a40 0%,#18181c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 3px rgba(0,0,0,.7),
    0 2px 4px rgba(0,0,0,.55);
  border:1px solid rgba(0,0,0,.4);
}
.cue-btn:hover{filter:brightness(1.15)}
.cue-btn.active{
  background:var(--cue-color,var(--orange)) !important;
  color:#000 !important;
  border-color:rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 3px rgba(0,0,0,.3),
    0 0 24px var(--cue-color,var(--orange)),
    0 0 6px var(--cue-color,var(--orange)),
    0 0 1px rgba(255,255,255,.9);
  filter:brightness(1.25);
}

/* SAMPLE PADS — elevated, 3D */
.sample-pad{
  background:
    linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 40%),
    linear-gradient(180deg,#36363c 0%,#18181c 100%);
  border:1px solid rgba(0,0,0,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -3px 5px rgba(0,0,0,.6),
    0 3px 6px rgba(0,0,0,.55);
}
.sample-pad:hover{filter:brightness(1.1);transform:translateY(-1px)}
.sample-pad.playing{
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.5),
    0 0 32px var(--pad-color,var(--orange)),
    0 0 2px rgba(255,255,255,.7);
}

/* TABS — active pill with depth */
.main-tabs{
  background:linear-gradient(180deg,#070708 0%,#0e0e10 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.04);
}
.tab-btn.active{
  background:linear-gradient(180deg,#ffa94a 0%,var(--orange) 45%,#c65a00 100%);
  color:#0a0a0a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 3px rgba(0,0,0,.25),
    0 0 18px rgba(255,138,26,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

/* BEAT FX + SCENE FX buttons */
.fx-onoff.active{
  background:linear-gradient(180deg,#ffa94a 0%,var(--orange) 60%,#c65a00 100%);
  border-color:var(--orange-glow);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 28px rgba(255,138,26,.75);
}
.beat-btn.active{
  background:linear-gradient(180deg,#d6faff 0%,#7ff0ff 50%,#2ee0ff 100%) !important;
  color:#00131a !important;
  border:1px solid #d6faff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 16px rgba(46,224,255,.95) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  font-weight:900;
}

/* ACTIVE UTIL BUTTONS — uniform soft glow */
.util-btn.sync.active,.util-btn.keylock.active,.util-btn.quantize.active,
.util-btn.slip.active,.util-btn.reverse.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 14px currentColor;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* X-PAD polish */
.x-pad{
  background:
    radial-gradient(circle at 30% 20%,rgba(200,0,255,.08) 0%,transparent 50%),
    radial-gradient(ellipse,#1a1a1e 0%,#050508 100%);
  box-shadow:inset 0 0 28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
}

/* RGB AMBIENT bar — upgraded */
.rgb-ambient{
  height:6px;opacity:.75;
  filter:blur(4px) saturate(1.3);
}

/* REC BUTTON polish */
.rec-btn{
  background:linear-gradient(180deg,#3a0a0a 0%,#1a0505 100%);
  box-shadow:inset 0 1px 0 rgba(255,100,100,.15),0 2px 4px rgba(0,0,0,.5);
}
.rec-btn.recording{
  background:linear-gradient(180deg,#ff4a4a 0%,#c41818 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 22px rgba(255,46,46,.75);
}

/* TRACK LIST — improved hover */
.track-row{transition:background .15s,border-color .15s,transform .15s}
.track-row:hover{transform:translateX(-2px);box-shadow:0 4px 14px rgba(0,0,0,.4)}

/* Slight global font polish */
.brand{letter-spacing:2.5px}
.deck-label{letter-spacing:3px}
.beat-fx-label,.scene-fx-label{letter-spacing:2.5px}
.tab-btn{letter-spacing:1.8px}

/* Focus states for accessibility */
button:focus-visible{outline:2px solid var(--orange-glow);outline-offset:2px}

/* Tempo display big — more presence */
.tempo-display-big{
  background:linear-gradient(180deg,#06121a 0%,#020608 100%);
  border:1px solid rgba(46,224,255,.2);
  box-shadow:inset 0 0 18px rgba(46,224,255,.08),inset 0 2px 4px rgba(0,0,0,.8);
  font-size:24px;text-shadow:0 0 14px rgba(255,138,26,.7);
}

/* Subtle beat pulse on power LED — already blinks; just strengthen glow */
.power-led{box-shadow:0 0 10px var(--play-green),0 0 2px rgba(255,255,255,.6)}

/* Header right — unified caps */
.header-right{text-transform:uppercase}

/* Playlist cards — lift */
.playlist-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.playlist-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.55),0 0 0 1px rgba(255,138,26,.35)}

/* Toasts — softer */
.toast{
  background:linear-gradient(180deg,#1a1a1e 0%,#0a0a0c 100%);
  box-shadow:0 12px 36px rgba(0,0,0,.6),0 0 22px rgba(255,138,26,.3),inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:6px;
}

/* Modals — nicer card */
.modal-box{
  background:linear-gradient(180deg,#26262a 0%,#14141a 100%);
  box-shadow:0 40px 80px rgba(0,0,0,.8),0 0 60px rgba(255,138,26,.25),inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:12px;
}

/* Scrollbar refinement */
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--orange-glow),var(--orange));
  border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffcc99,var(--orange-glow))}

/* Deck number — solid badge for clarity in every view */
.deck-number{
  color:#fff;
  background:linear-gradient(180deg,var(--orange-glow) 0%,var(--orange) 50%,#b84600 100%);
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:#fff;
  padding:3px 10px;border-radius:6px;
  border:1px solid rgba(255,138,26,.85);
  box-shadow:0 0 12px rgba(255,138,26,.55),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.4);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  font-size:22px;line-height:1;letter-spacing:1px;font-weight:900;
}

/* Mixer crossfader + faders get slightly thicker tactile highlight */
.crossfader-handle::before,.tempo-handle::before{
  background:linear-gradient(90deg,transparent,#ff3c00 50%,transparent);
  box-shadow:0 0 8px #ff3c00;
}

/* ============================================================
   JOG WHEEL v5 — premium CDJ-style rotation and lighting
   ============================================================ */
.jog-wheel{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  perspective:1200px;
}
.jog-platter{
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  transition:filter .35s cubic-bezier(.4,0,.2,1);
}
.jog-platter-disc{
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.jog-platter.spinning{
  animation:platterSpin 3.2s linear infinite;
  animation-play-state:running;
}
.jog-platter.jog-active.spinning,.jog-platter.jog-active{
  animation-play-state:paused;
}
@keyframes platterSpin{
  from{transform:translateZ(0) rotate(0deg)}
  to{transform:translateZ(0) rotate(360deg)}
}
.jog-ring-light{
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,160,50,.45) 6deg,
    rgba(255,200,120,.7) 12deg,
    rgba(255,160,50,.45) 18deg,
    transparent 26deg,
    transparent 360deg);
  filter:blur(.4px);
  animation:jogSpin 4s linear infinite;
  animation-play-state:paused;
  will-change:transform;
  opacity:.55;
  transition:opacity .35s ease;
  mix-blend-mode:screen;
}
.jog-wheel.playing .jog-ring-light{animation-play-state:running;opacity:.65}
.jog-wheel:not(.playing) .jog-ring-light{opacity:0;animation:none}
@keyframes jogSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Subtle idle glow so paused decks still feel alive */
.jog-wheel:not(.playing) .jog-outer{box-shadow:
  0 0 0 2px #050506,
  0 0 0 3px rgba(255,255,255,.04),
  0 0 0 5px #1e1e22,
  inset 0 3px 12px rgba(255,255,255,.08),
  inset 0 -6px 18px rgba(0,0,0,.92),
  0 16px 36px rgba(0,0,0,.75);
}
/* Inner platter carries a very subtle radial shine, no counter-rotating
   gradient (those cause visible motion trails on large wheels). */
/* Indicator tick — clean narrow glow, no motion smear */
.jog-wheel.playing .jog-indicator{
  box-shadow:0 0 4px rgba(255,255,255,.7);
}
/* On hover while NOT playing, subtle lift */
.jog-wheel:not(.playing):hover .jog-outer{filter:brightness(1.05)}
/* Respect user reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  .jog-platter.spinning,.jog-ring-light,.jog-platter.spinning .jog-platter-disc::before{animation:none !important}
}

/* ================================================================
   JOG POINTER v2 — crisp, consistent across every deck and view mode
   (all-4, DJ focus, work-mode, compact). The pointer is a filled
   arrow that scales with the wheel (uses %) and is always clearly
   visible regardless of the deck accent color.
   ================================================================ */
.cdj .jog-indicator,
.jog-wheel .jog-indicator,
.console.show-all .cdj .jog-indicator,
body.work-mode .jog-indicator{
  position:absolute !important;
  top:2.4% !important;
  left:50% !important;
  width:18px !important;
  height:22px !important;
  transform:translateX(-50%) !important;
  border:none !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 24%,var(--deck-accent,#ff7a00) 70%,var(--deck-accent,#ff7a00) 100%) !important;
  clip-path:polygon(0 0,100% 0,100% 35%,62% 35%,50% 100%,38% 35%,0 35%) !important;
  -webkit-clip-path:polygon(0 0,100% 0,100% 35%,62% 35%,50% 100%,38% 35%,0 35%) !important;
  filter:drop-shadow(0 0 6px rgba(var(--deck-accent-rgb,255,122,0),.95))
         drop-shadow(0 0 2px rgba(255,255,255,.85)) !important;
  z-index:6 !important;
  pointer-events:none !important;
}
/* Slightly larger on bigger wheels */
@media(min-width:1400px){
  .cdj .jog-indicator{width:20px !important;height:24px !important;top:2.2% !important}
}
@media(min-width:1920px){
  .cdj .jog-indicator{width:22px !important;height:26px !important;top:2% !important}
}
.jog-wheel.playing .jog-indicator{
  filter:drop-shadow(0 0 8px rgba(var(--deck-accent-rgb),1))
         drop-shadow(0 0 3px rgba(255,255,255,.95)) !important;
  animation:jogIndPulse 1.6s ease-in-out infinite;
}
@keyframes jogIndPulse{
  0%,100%{opacity:1}
  50%{opacity:.82}
}

/* Center screen — make the BPM / DECK text uniformly crisp across modes */
.cdj .jog-center-screen{
  background:
    linear-gradient(180deg,rgba(var(--deck-accent-rgb),.18) 0%,transparent 42%),
    radial-gradient(circle,#0a1318 0%,#020507 100%) !important;
  border:2px solid rgba(var(--deck-accent-rgb),.55) !important;
  box-shadow:
    inset 0 0 22px rgba(var(--deck-accent-rgb),.2),
    inset 0 2px 6px rgba(0,0,0,.95),
    0 0 0 1px rgba(0,0,0,.8),
    0 0 20px rgba(var(--deck-accent-rgb),.35),
    0 4px 10px rgba(0,0,0,.7) !important;
}
.cdj .jog-center-screen .bpm-display{
  color:var(--deck-accent) !important;
  text-shadow:
    0 0 12px rgba(var(--deck-accent-rgb),.9),
    0 0 2px rgba(255,255,255,.5) !important;
  font-weight:800 !important;
  letter-spacing:.5px !important;
}
.cdj .jog-center-screen .bpm-sub{
  color:#fff !important;
  opacity:.85 !important;
  text-shadow:0 0 4px rgba(var(--deck-accent-rgb),.55) !important;
}
/* Hide the inner "DECK X" label on the jog wheel across every display
   mode (all-4, DJ focus, work-mode, compact, all themes) */
.jog-center-screen .deck-badge,
.cdj .jog-center-screen .deck-badge,
.console.show-all .cdj .jog-center-screen .deck-badge,
body.work-mode .jog-center-screen .deck-badge,
body.dj-focus-mode .jog-center-screen .deck-badge{display:none !important}

/* Work-mode jog wheels: clean, slow, crisp — no motion trails. */
body.work-mode .jog-platter.spinning{animation-duration:4.8s}
body.work-mode .jog-ring-light{animation-duration:6s;filter:none;opacity:.45;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,160,50,.35) 8deg,
    rgba(255,210,140,.55) 14deg,
    rgba(255,160,50,.35) 20deg,
    transparent 30deg,
    transparent 360deg);
}
body.work-mode .jog-wheel,
body.work-mode .jog-platter,
body.work-mode .jog-platter-disc,
body.work-mode .jog-ring-light,
body.work-mode .jog-center-screen{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Isolate the console on its own compositing layer so the neon halo
   never triggers a relayout/repaint while the platter is rotating. */
body.work-mode .console{contain:layout paint;will-change:auto}
body.work-mode .console::before,body.work-mode .console::after{
  will-change:background-position,opacity;
  contain:strict;
}
@media(min-width:1900px){
  body.work-mode .jog-platter.spinning{animation-duration:5.6s}
  body.work-mode .jog-ring-light{animation-duration:7s}
}
@media(min-width:2400px){
  body.work-mode .jog-platter.spinning{animation-duration:6.4s}
  body.work-mode .jog-ring-light{animation-duration:8s}
}

/* ============================================================
   VISUAL POLISH LAYER v4 — per-tab refinements + interactions
   ============================================================ */

/* Jog wheel — active scrubbing/scratching state */
.jog-platter{transition:filter .12s ease;will-change:transform}
.jog-platter.jog-active{filter:brightness(1.18) contrast(1.05)}
.jog-platter.jog-active~.jog-ring .jog-ring-light,
.jog-wheel:has(.jog-platter.jog-active) .jog-ring-light{
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(46,224,255,.3) 3deg,
    var(--screen-glow) 8deg,
    rgba(127,240,255,.4) 14deg,
    transparent 24deg);
  animation-play-state:running !important;
  animation-duration:.6s !important;
}
.jog-wheel{cursor:grab}
.jog-wheel:active{cursor:grabbing}

/* CUE preview — pulsing glow while held */
.big-btn.cue:active,.big-btn.cue.preview{
  background:linear-gradient(180deg,#ffb066 0%,var(--cue-orange) 60%,#aa3a00 100%);
  color:#0a0a0a;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 32px rgba(255,106,26,.95),0 0 4px rgba(255,220,180,.9);
  animation:cuePulse .3s ease-in-out infinite alternate;
}
@keyframes cuePulse{
  from{box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 24px rgba(255,106,26,.7)}
  to{box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 40px rgba(255,106,26,1),0 0 6px rgba(255,255,255,.9)}
}

/* SAMPLER — ripple on trigger + pad-bank header */
.sampler-grid{position:relative}
.sample-pad::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at center,rgba(255,255,255,.25) 0%,transparent 60%);
  opacity:0;transform:scale(.5);pointer-events:none;
  transition:none;
}
.sample-pad.playing::before{
  opacity:1;transform:scale(1.4);
  transition:opacity .6s ease-out,transform .6s ease-out;
}
.sample-pad{position:relative;overflow:hidden}
.sample-pad .pad-num{transition:transform .12s ease}
.sample-pad.playing .pad-num{transform:scale(1.15)}
.sampler-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sampler-header .sub{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim);letter-spacing:1.5px}

/* PLAYLISTS — richer cards */
.playlist-card{position:relative;overflow:hidden;min-height:104px}
.playlist-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--screen-glow),var(--purple));
  opacity:.6;
}
.playlist-card h4{display:flex;align-items:center;gap:8px}
.playlist-card h4::before{
  content:'♪';color:var(--orange);font-size:18px;
  text-shadow:0 0 8px rgba(255,138,26,.7);
}
.playlist-card .pl-meta{font-size:10px;letter-spacing:1px;text-transform:uppercase}
.playlist-card .pl-meta strong{color:var(--screen-glow);font-weight:700}
.playlist-card .pl-actions button{transition:all .15s ease}
.playlist-card .pl-actions button:hover{background:rgba(255,138,26,.1)}

/* SESSIONS — deck-state preview chips */
.session-card{position:relative;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:14px}
.session-card::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:linear-gradient(180deg,var(--play-green),var(--screen-glow));
  border-radius:2px;
}
.session-card .session-name{color:#fff;font-family:'Orbitron',sans-serif;letter-spacing:1.5px}
.session-card .session-meta{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim);letter-spacing:1.5px}
.session-card .session-actions{display:flex;gap:6px}
.session-card .session-actions button{
  padding:6px 11px;background:transparent;border:1px solid #333;
  color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:9px;
  letter-spacing:1.5px;border-radius:4px;cursor:pointer;
}
.session-card .session-actions button:hover{border-color:var(--orange);color:var(--orange)}
.session-card .session-actions button.danger:hover{border-color:var(--red);color:var(--red)}

/* AI DJ — energy bar + status indicators */
.ai-dj-config{position:relative}
.ai-energy-bar{
  grid-column:1/-1;height:6px;background:#0a0a0c;border-radius:3px;overflow:hidden;
  position:relative;margin-top:8px;border:1px solid rgba(255,255,255,.04);
}
.ai-energy-bar::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:var(--energy,30%);
  background:linear-gradient(90deg,var(--play-green),var(--yellow),var(--orange),var(--red));
  transition:width .4s ease;box-shadow:0 0 12px rgba(255,138,26,.5);
}
.ai-dj-status .dot{box-shadow:0 0 4px currentColor}
.ai-dj-status.active .dot{box-shadow:0 0 12px var(--play-green)}
.ai-dj-btn{position:relative;overflow:hidden}
.ai-dj-btn::after{
  content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.ai-dj-btn:hover::after{transform:translateX(100%)}

/* ANALYTICS — lift cards + tiny sparkline placeholder */
.stat-card{transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.6),0 0 0 1px rgba(255,138,26,.3)}
.stat-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--orange),transparent);
}
.stat-card .stat-value{
  font-feature-settings:'tnum';
  background:linear-gradient(180deg,#fff 0%,var(--orange-glow) 50%,var(--orange) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,138,26,.4));
}
.mix-history h4{display:flex;align-items:center;gap:8px}
.mix-history h4::before{content:'⏱';font-size:14px}
.mix-entry{padding:8px 4px;transition:padding .15s}
.mix-entry:hover{padding-left:8px;background:rgba(255,138,26,.04)}

/* MIDI — devices + log */
.midi-device{position:relative;padding:10px 12px;border:1px solid #2a2a2e;transition:border-color .15s}
.midi-device:hover{border-color:var(--screen-glow)}
.midi-device .status::before{content:'●';margin-right:5px;animation:blink 1.5s infinite}
.midi-log{font-size:11px;line-height:1.5}
.midi-log::before{
  content:'> MIDI MONITOR';display:block;color:var(--orange);
  font-weight:700;margin-bottom:6px;letter-spacing:2px;
}

/* SETTINGS — section headings + nicer toggles */
.settings-section{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.settings-section:last-of-type{border-bottom:none}
.settings-section h3{
  display:flex;align-items:center;gap:10px;
  text-transform:uppercase;
}
.settings-section h3::before{
  content:'';width:4px;height:14px;background:var(--orange);
  border-radius:2px;box-shadow:0 0 8px rgba(255,138,26,.6);
}
.toggle-switch{
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.05);
  transition:background .2s;
}
.toggle-switch::after{
  box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);
  transition:left .2s ease,background .2s;
}
.toggle-switch.on{box-shadow:inset 0 1px 3px rgba(0,0,0,.4),0 0 12px rgba(255,138,26,.4)}

/* HELP — searchable shortcuts */
.shortcut-grid{position:relative}
.shortcut-item{transition:background .15s,transform .15s}
.shortcut-item:hover{background:#1a1a1e;transform:translateX(2px)}
.shortcut-item kbd{
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.2);
  text-transform:uppercase;
}

/* TRACK LIST — drag affordance + better row */
.track-row{position:relative;padding-left:16px}
.track-row::before{
  content:'⋮⋮';position:absolute;left:5px;top:50%;transform:translateY(-50%);
  font-family:monospace;color:#3a3a3e;font-size:14px;line-height:.6;letter-spacing:-3px;
  transition:color .15s;
}
.track-row:hover::before{color:var(--orange)}
.track-row .t-bpm{font-weight:700;text-shadow:0 0 6px rgba(46,224,255,.3)}
.track-row .t-key{font-weight:700;text-shadow:0 0 6px rgba(28,255,143,.3)}

/* WAVEFORM — beat-pulse on phrase markers */
.phrase-mark{box-shadow:0 0 4px var(--yellow),0 0 8px rgba(255,212,0,.4)}

/* HEADER — beat-pulse on master BPM when any deck plays */
.master-bpm{transition:text-shadow .1s ease}

/* Loop active glow */
.loop-btn.active{
  background:linear-gradient(180deg,#7ff0ff 0%,var(--screen-glow) 55%,#0e88a6 100%);
  color:#000;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 18px rgba(46,224,255,.7);
}

/* Toast variants — softer arrival */
.toast{animation:slideIn .35s cubic-bezier(.2,.8,.3,1)}

/* Tab content — fade-in transition */
.tab-content.active{animation:tabFade .3s ease}
@keyframes tabFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Scrollbar inside panels */
.track-list,.ai-log,.mix-history-list,.midi-devices,.midi-log{
  scrollbar-width:thin;
  scrollbar-color:var(--orange) #0a0a0b;
}

/* AUTO MIX panel in the mixer */
.automix-panel{
  padding:10px;background:#0a0a0b;border-radius:8px;
  border:1px solid rgba(200,0,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 18px rgba(200,0,255,.08);
  display:flex;flex-direction:column;gap:8px;
}
.automix-title{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:3px;
  color:var(--purple);font-weight:800;text-shadow:0 0 8px rgba(200,0,255,.5);
}
.automix-title span{
  font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--orange);
  padding:2px 8px;background:#050506;border:1px solid #2a2a2e;border-radius:3px;letter-spacing:2px;
}
.automix-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.automix-btn{
  padding:10px 4px;background:linear-gradient(180deg,#3a3a3e 0%,#1a1a1c 100%);
  border:1px solid #333;color:var(--text);font-family:'Orbitron',sans-serif;
  font-size:9px;font-weight:800;letter-spacing:1.5px;border-radius:4px;cursor:pointer;
  transition:all .15s ease;position:relative;overflow:hidden;
}
.automix-btn:hover{
  background:linear-gradient(180deg,#4a4a4e 0%,#2a2a2c 100%);
  border-color:var(--purple);color:var(--purple);
  box-shadow:0 0 14px rgba(200,0,255,.4);transform:translateY(-1px);
}
.automix-btn:active{transform:translateY(0) scale(.96)}
.automix-btn.running{
  background:linear-gradient(180deg,var(--purple) 0%,#6000aa 100%);
  color:#fff;border-color:var(--purple);
  box-shadow:0 0 22px rgba(200,0,255,.75),inset 0 1px 0 rgba(255,255,255,.25);
  animation:automixPulse 1s ease-in-out infinite;
}
@keyframes automixPulse{
  0%,100%{box-shadow:0 0 22px rgba(200,0,255,.7)}
  50%{box-shadow:0 0 34px rgba(200,0,255,1)}
}
.automix-btn.danger:hover{border-color:var(--red);color:var(--red);box-shadow:0 0 14px rgba(255,46,46,.4)}
.automix-btn.echo:hover{border-color:var(--screen-glow);color:var(--screen-glow);box-shadow:0 0 14px rgba(46,224,255,.4)}
.automix-btn.pick:hover{border-color:var(--play-green);color:var(--play-green);box-shadow:0 0 14px rgba(28,255,143,.4)}
.automix-sub{
  display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;
  font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--text-dim);letter-spacing:2px;
  padding-top:2px;border-top:1px solid rgba(255,255,255,.04);
}
.automix-bars{min-width:auto;padding:4px 8px;font-size:10px}
.automix-sync{
  padding:5px 10px;background:linear-gradient(180deg,#3a3a3e 0%,#1a1a1c 100%);
  border:1px solid var(--orange);color:var(--orange);
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;font-weight:700;
  border-radius:3px;cursor:pointer;transition:all .15s ease;
}
.automix-sync:hover{background:var(--orange);color:#000;box-shadow:0 0 12px rgba(255,138,26,.6)}
.automix-sync.active{background:var(--orange);color:#000;box-shadow:0 0 14px rgba(255,138,26,.7),inset 0 0 8px rgba(0,0,0,.3);border-color:#fff}

/* DECK SWITCH BAR — 4-deck focus toggle */
.deck-switch-bar{
  width:100%;max-width:1700px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:10px 14px;background:linear-gradient(180deg,#1c1c20 0%,#111114 100%);
  border:1px solid rgba(255,255,255,.10);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.5);
}
.dsb-label{
  font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:3px;
  color:var(--orange);font-weight:900;margin-right:8px;
  text-shadow:0 0 8px rgba(255,138,26,.5);
}
.dsb-btn{
  padding:10px 18px;background:linear-gradient(180deg,#33333a 0%,#1a1a1f 100%);
  border:2px solid #555;color:#f0f0f0;font-family:'Orbitron',sans-serif;
  font-size:13px;letter-spacing:2.5px;font-weight:900;border-radius:6px;cursor:pointer;
  transition:all .15s ease;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  min-height:38px;
}
.dsb-btn:hover{
  border-color:var(--orange);color:var(--orange);transform:translateY(-1px);
  box-shadow:0 0 12px rgba(255,138,26,.45);
  background:linear-gradient(180deg,#3a3a42 0%,#1f1f25 100%);
}
.dsb-btn.active{
  background:linear-gradient(180deg,var(--orange) 0%,#c85a00 100%);
  color:#0a0a0a;border-color:#ffd9a8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 22px rgba(255,138,26,.75);
  text-shadow:none;
}
.dsb-split{font-size:12px;letter-spacing:2px}
.dsb-all{letter-spacing:2px}
.dsb-monitor{
  margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;
  font-family:'Share Tech Mono',monospace;font-size:10px;
}
.dsb-chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  background:#0a0a0b;border:1px solid #2a2a2e;border-radius:3px;letter-spacing:1.5px;
}
.dsb-chip .dsb-dot{width:6px;height:6px;border-radius:50%;background:#444}
.dsb-chip.playing .dsb-dot{background:var(--play-green);box-shadow:0 0 6px var(--play-green);animation:blink 1.2s infinite}
.dsb-chip .dsb-id{color:var(--orange);font-weight:700}
.dsb-chip .dsb-bpm{color:var(--screen-glow)}
.dsb-chip.focus{border-color:var(--orange)}

/* When ALL 4 decks visible, adjust console grid */
/* ── ALL 4 MODE grid ──────────────────────────────── */
.console.show-all{grid-template-columns:1fr 1fr 360px 1fr 1fr;gap:10px}

/* Tighten deck internals when 4 are visible side-by-side */
.console.show-all .cdj{padding:10px 8px}
.console.show-all .cdj .track-title{font-size:11px}
.console.show-all .cdj .track-artist{font-size:9px}
.console.show-all .cdj .screen-bpm{font-size:14px}
.console.show-all .cdj .time-value{font-size:13px}
.console.show-all .cdj .hot-cues{gap:3px}
.console.show-all .cdj .cue-btn{font-size:10px;padding:4px 2px}
.console.show-all .cdj .big-btn{padding:8px 4px !important;font-size:10px;letter-spacing:2px}
.console.show-all .cdj .loop-btn,.console.show-all .cdj .jump-btn,.console.show-all .cdj .util-btn{font-size:8px;padding:4px 1px}
.console.show-all .cdj .jog-wrapper{margin:2px 0}
.console.show-all .cdj .jog-wheel{width:190px;height:190px}
.console.show-all .cdj .jog-center-screen{width:60px;height:60px}
.console.show-all .cdj .jog-center-screen .bpm-display{font-size:16px}
.console.show-all .cdj .deck-number{font-size:18px;padding:2px 8px;letter-spacing:.5px}
.console.show-all .cdj .tempo-btn-row{gap:2px;padding:4px}
.console.show-all .cdj .tempo-btn{padding:7px 2px;font-size:12px}
.console.show-all .cdj .tempo-display-big{font-size:18px;padding:4px}

/* ── Compact monitor in mixer ─────────────────────── */
.compact-decks{min-height:0}
.compact-decks:empty{display:none}

/* ============================================================
   RESPONSIVE LAYER — full screen-size coverage
   ============================================================ */

/* Ultra-wide / 4K — breathing room, bigger elements */
@media(min-width:1920px){
  .console.show-all{grid-template-columns:1fr 1fr 400px 1fr 1fr;gap:14px;max-width:1850px}
  .console.show-all .cdj .jog-wheel{width:220px;height:220px}
  .console.show-all .cdj .jog-center-screen{width:72px;height:72px}
  .console.show-all .cdj .jog-center-screen .bpm-display{font-size:18px}
  .console.show-all .cdj .track-title{font-size:13px}
  .console.show-all .cdj .screen-bpm{font-size:16px}
  .console.show-all .cdj .deck-number{font-size:26px}
  .console.show-all .cdj .big-btn{padding:11px 6px !important;font-size:11px}
  .console.show-all .cdj .cue-btn{font-size:11px;padding:5px 3px}
  .console.show-all .cdj .tempo-btn{padding:9px 3px;font-size:13px}
}
@media(min-width:2560px){
  .console.show-all{grid-template-columns:1fr 1fr 480px 1fr 1fr;gap:20px;max-width:2200px}
  .console.show-all .cdj .jog-wheel{width:260px;height:260px}
  .console.show-all .cdj .jog-center-screen{width:86px;height:86px}
  .console.show-all .cdj .jog-center-screen .bpm-display{font-size:22px}
}

/* Large desktop — 5-col ALL 4 fits, keep it */
@media(max-width:1700px){
  .console.show-all{grid-template-columns:1fr 1fr 320px 1fr 1fr;gap:8px}
}

/* Laptop 1400-1550px — ALL 4 still 5-col but very compact */
@media(max-width:1550px){
  .console.show-all{grid-template-columns:1fr 1fr 290px 1fr 1fr;gap:6px}
  .console.show-all .cdj .jog-wheel{width:160px;height:160px}
  .console.show-all .cdj .jog-center-screen{width:50px;height:50px}
  .console.show-all .cdj .jog-center-screen .bpm-display{font-size:14px}
  .console.show-all .cdj .hot-cues{grid-template-columns:repeat(4,1fr);gap:2px}
  .console.show-all .cdj .cue-btn{font-size:9px;padding:3px 1px}
  .console.show-all .cdj .screen{padding:5px;margin-bottom:5px}
  .console.show-all .cdj .deck-header .deck-label .suffix{display:none}
}

/* Small laptop — 2-deck default keeps 3-col; ALL 4 → 2x2+mixer */
@media(max-width:1400px){
  .beat-fx-panel{grid-template-columns:repeat(2,1fr) 1fr}
  .scene-fx-panel{grid-template-columns:auto 1fr auto}
  /* ALL 4: A B on top, mixer full-width, C D on bottom */
  .console.show-all{grid-template-columns:1fr 1fr;gap:10px}
  .console.show-all .mixer{grid-column:1/-1;order:2;max-width:860px;justify-self:center;width:100%}
  .console.show-all .cdj:nth-child(1){order:1}
  .console.show-all .cdj:nth-child(2){order:1}
  .console.show-all .cdj:nth-child(3){order:3}
  .console.show-all .cdj:nth-child(4){order:3}
  .console.show-all .cdj .jog-wheel{width:200px;height:200px}
  .console.show-all .cdj .jog-center-screen{width:64px;height:64px}
}

/* Tablet landscape / small laptop */
@media(max-width:1100px){
  body{padding:8px 4px;gap:8px}
  .header-bar{padding:6px 8px;gap:8px}
  .brand{font-size:18px;letter-spacing:2px}
  .master-bpm{font-size:12px;padding:4px 8px}
  .main-tabs{gap:2px;padding:3px}
  .tab-btn{min-width:78px;padding:7px 4px;font-size:9px;letter-spacing:1.5px}
  .deck-switch-bar{padding:6px 8px;gap:4px}
  .dsb-btn{padding:6px 10px;font-size:10px;letter-spacing:1.8px}
  .dsb-monitor{margin-left:0;width:100%;margin-top:4px;order:99}
  .dsb-chip{padding:3px 7px;font-size:9px}
  /* 2-deck: shrink mixer column */
  .console{grid-template-columns:1fr 280px 1fr;gap:8px}
  .jog-wheel{width:200px;height:200px}
  .jog-center-screen{width:64px;height:64px}
  .jog-center-screen .bpm-display{font-size:17px}
  .cdj{padding:10px}
  .hot-cues{grid-template-columns:repeat(4,1fr);gap:4px}
  .cue-btn{font-size:10px}
  .loop-btn,.jump-btn,.util-btn{font-size:8px;padding:5px 1px}
  .compact-decks{grid-template-columns:1fr 1fr;gap:6px;padding:6px}
  .beat-fx-panel{grid-template-columns:repeat(3,1fr);padding:8px;gap:8px}
  .beat-fx-label,.scene-fx-label{font-size:10px;letter-spacing:2px}
  .automix-panel{padding:8px}
  .automix-btn{padding:8px 2px;font-size:8px}
  .library{padding:8px}
  .track-row{grid-template-columns:24px 1.5fr 1fr 45px 40px 70px 120px;gap:6px;padding:5px 6px;font-size:10px}
  .stat-card .stat-value{font-size:22px}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
  /* ALL 4 at 1100px */
  .console.show-all{grid-template-columns:1fr 1fr;gap:8px}
  .console.show-all .cdj .jog-wheel{width:170px;height:170px}
  .console.show-all .cdj .jog-center-screen{width:54px;height:54px}
  .console.show-all .cdj .jog-center-screen .bpm-display{font-size:14px}
}

/* Tablet portrait */
@media(max-width:820px){
  body{padding:6px 3px;gap:6px}
  .brand{font-size:15px;letter-spacing:1.5px}
  .brand .max{font-size:9px;padding:1px 4px}
  .header-right{font-size:10px;letter-spacing:1.5px;gap:6px}
  .rec-btn{padding:5px 10px;font-size:9px;letter-spacing:1.5px}
  .main-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab-btn{flex:0 0 auto;min-width:96px}
  .rgb-ambient{height:4px}
  /* Both modes → single column */
  .console,.console.show-all{grid-template-columns:1fr;gap:10px}
  .console.show-all .mixer{grid-column:auto;order:0;max-width:100%;justify-self:stretch}
  .console.show-all .cdj:nth-child(n){order:0}
  .jog-wheel{width:72vw;height:72vw;max-width:280px;max-height:280px}
  .jog-center-screen{width:62px;height:62px}
  .jog-indicator{top:26px;height:12px}
  .beat-fx-panel{grid-template-columns:1fr 1fr;padding:6px;gap:6px}
  .beat-fx-panel .beat-fx-label{grid-column:1/-1;text-align:center}
  .fx-onoff{padding:10px 14px;font-size:11px;letter-spacing:2px}
  .scene-fx-panel{grid-template-columns:1fr;gap:6px}
  .scene-fx-buttons{justify-content:center}
  .x-pad{width:100%;max-width:300px;height:70px}
  .mixer{padding:8px}
  .channels{grid-template-columns:repeat(4,1fr);gap:4px}
  .channel .fader-wrap,.channel .vu-meter{height:120px}
  .channel .knob.small{width:28px;height:28px}
  .knob{width:36px;height:36px}
  .knob.small{width:28px;height:28px}
  .knob.large{width:46px;height:46px}
  .automix-grid{grid-template-columns:1fr 1fr}
  .library-header{flex-direction:column;align-items:stretch;gap:8px}
  .library-actions{justify-content:center;flex-wrap:wrap}
  .search-wrap{order:99}
  .track-row{grid-template-columns:20px 1fr 70px 70px;gap:5px}
  .track-row .t-artist,.track-row .t-rating,.track-row .t-added{display:none}
  .track-row .actions{grid-column:1/-1;justify-content:flex-start;margin-top:4px}
  .sampler-grid{grid-template-columns:repeat(4,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-card{padding:10px}
  .stat-card .stat-value{font-size:20px}
  .ai-dj-config{grid-template-columns:1fr;gap:10px;padding:10px}
  .ai-dj-controls{grid-template-columns:1fr}
  .playlist-grid{grid-template-columns:1fr}
  .shortcut-grid{grid-template-columns:1fr}
  .yt-grid{grid-template-columns:1fr}
  .mic-section{grid-template-columns:auto 1fr 1fr 1fr auto;gap:4px}
  .master-section{grid-template-columns:1fr 1fr 1fr;gap:4px}
  .isolator-panel{grid-template-columns:1fr 1fr 1fr;gap:4px}
  .compact-decks{grid-template-columns:1fr}
}

/* Phone */
@media(max-width:520px){
  body{padding:5px 2px;gap:5px}
  .brand{font-size:13px}
  .header-right{width:100%;justify-content:space-between;margin-top:2px}
  .deck-switch-bar{padding:5px 6px}
  .dsb-label{font-size:9px;letter-spacing:2px;width:100%;margin-bottom:2px}
  .dsb-btn{padding:5px 8px;font-size:9px;letter-spacing:1.5px;flex:1}
  .dsb-monitor{margin-top:2px}
  .jog-wheel{width:86vw;height:86vw;max-width:320px;max-height:320px}
  .jog-center-screen{width:56px;height:56px}
  .jog-center-screen .bpm-display{font-size:16px}
  .deck-number{font-size:24px}
  .deck-label{font-size:10px;letter-spacing:2px}
  .screen{padding:6px}
  .track-title{font-size:11px}
  .screen-bpm{font-size:18px}
  .time-value{font-size:13px}
  .hot-cues{grid-template-columns:repeat(4,1fr);gap:3px}
  .cue-btn{font-size:9px}
  .big-btn{padding:9px 6px;font-size:10px;letter-spacing:2px}
  .tempo-slider-wrap{gap:4px}
  .tempo-ticks{font-size:8px}
  .tempo-slider{height:70px}
  .tempo-btn{padding:7px 2px;font-size:12px}
  .beat-fx-panel{padding:5px;gap:4px}
  .fx-selector{min-width:70px;padding:4px 6px;font-size:10px}
  .beat-display{font-size:16px;padding:4px 8px;min-width:56px}
  .beat-btn{padding:4px 5px;font-size:8px;min-width:28px}
  .fx-onoff{padding:8px 12px;font-size:10px;letter-spacing:1.5px}
  .tap-btn{padding:7px 10px;font-size:9px}
  .channels{grid-template-columns:repeat(2,1fr);gap:6px}
  .channel .fader-wrap,.channel .vu-meter{height:100px}
  .automix-grid{grid-template-columns:1fr 1fr}
  .automix-btn{padding:9px 2px;font-size:8px;letter-spacing:1px}
  .automix-sub{grid-template-columns:auto 1fr auto;font-size:8px;gap:4px}
  .sampler-grid{grid-template-columns:repeat(3,1fr);gap:5px}
  .sample-pad .pad-num{font-size:18px}
  .sample-pad .pad-name{font-size:8px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat-card .stat-value{font-size:18px}
  .track-row{grid-template-columns:18px 1fr 55px;gap:4px;padding:5px;font-size:10px}
  .track-row .t-bpm{font-size:10px}
  .track-row .t-key{display:none}
  .brand .max{margin-right:4px}
  .upload-btn,.url-btn,.yt-btn,.playlist-btn{padding:6px 9px;font-size:9px;letter-spacing:1.2px}
  .search-input,.sort-select,.filter-select{font-size:10px;padding:5px 7px}
  .modal-box{padding:16px}
  .modal-box h3{font-size:12px}
  .toast{font-size:11px;padding:10px 14px;right:10px;bottom:10px}
  /* keep mixer stacked tightly on phone */
  .mixer{padding:6px;gap:5px}
  .master-section,.isolator-panel{grid-template-columns:1fr 1fr 1fr;gap:3px;padding:4px}
  .crossfader-section,.headphone-section{padding:5px}
  .cue-hp-btn{padding:4px;font-size:8px;letter-spacing:1.5px}
  .mic-section{grid-template-columns:1fr 1fr 1fr 1fr;gap:4px;padding:4px}
  .mic-label{writing-mode:horizontal-tb;transform:none;grid-column:1/-1;text-align:center}
  .mic-btn{padding:6px 8px;font-size:8px}
  .isolator-panel,.color-fx-row,.color-fx-grid{padding:4px}
}

/* Prevent overflow of the ambient bar on narrow viewports */
@media(max-width:520px){
  .rgb-ambient{max-width:calc(100% - 6px)}
}

/* Tiny phone */
@media(max-width:360px){
  .tab-btn{min-width:74px;font-size:8px}
  .brand{font-size:11px}
  .jog-wheel{max-width:96vw;max-height:96vw}
  .hot-cues{grid-template-columns:repeat(4,1fr)}
  .sampler-grid{grid-template-columns:repeat(2,1fr)}
  .channels{grid-template-columns:1fr 1fr}
  .automix-grid{grid-template-columns:1fr}
  .mic-section{grid-template-columns:1fr 1fr;gap:3px;padding:3px}
  .mic-btn{padding:5px 4px;font-size:7px}
  .master-section,.isolator-panel{grid-template-columns:1fr 1fr;gap:3px}
  .beat-fx-panel{grid-template-columns:1fr;gap:4px}
  .beat-buttons{flex-wrap:wrap;justify-content:center}
}

/* Hover-capable devices get nicer affordances; touch devices skip transform hovers */
@media(hover:none){
  button:hover:not(:disabled),.tool-btn:hover,.tab-btn:hover,.big-btn:hover,
  .loop-btn:hover,.jump-btn:hover,.util-btn:hover,.scene-btn:hover,
  .pad-mode-btn:hover,.tempo-btn:hover,.beat-btn:hover,.mic-btn:hover,
  .automix-btn:hover{transform:none}
  .track-row:hover{transform:none}
  .playlist-card:hover{transform:none}
  .stat-card:hover{transform:none}
}

/* Landscape phone — fit console side-by-side */
@media(max-height:520px) and (orientation:landscape){
  body{padding:4px 3px;gap:4px}
  .header-bar{display:none}
  .rgb-ambient{display:none}
  .jog-wheel{width:40vh;height:40vh;max-width:220px;max-height:220px}
  .main-tabs{padding:2px}
  .tab-btn{padding:5px 6px;font-size:9px;min-width:auto}
}

/* ============================================================
   PIXEL PERFECT LAYER — alignment, box-sizing, consistent rhythm
   ============================================================ */

/* Centering base — body already flex column + align-items:center */
body{align-items:center;justify-content:flex-start}

/* Ensure all top-level containers line up at the same max-width + inset */
.header-bar,.main-tabs,.rgb-ambient,.deck-switch-bar,.console,.library,
.beat-fx-panel,.scene-fx-panel,.sampler-panel,.youtube-panel,
.playlists-panel,.ai-dj-panel,.analytics-panel,.midi-panel,.settings-panel,
.tab-content > *{
  width:100%;max-width:1700px;box-sizing:border-box;
}

/* Console grid: equal-height columns so decks and mixer line up */
.console{align-items:stretch}
.console > .cdj,.console > .mixer{min-width:0;align-self:stretch}

/* All decks identical padding and internal rhythm */
.cdj{padding:14px;display:flex;flex-direction:column;gap:8px}
.cdj > *{min-width:0}
.deck-header{margin:0 0 2px}
.screen{margin-bottom:0}
.loop-section,.beat-jump,.deck-utils{margin:0}
.tempo-section,.hot-cues,.transport,.pad-mode-row{margin:0}

/* Mixer internals — even vertical rhythm */
.mixer{padding:12px;gap:8px}
.mixer > *{min-width:0}
.master-section,.color-fx-row,.color-fx-grid,.headphone-section,
.mic-section,.crossfader-section,.isolator-panel,.automix-panel{
  margin:0;border-radius:8px;
}

/* Channels: equal width, bottom-aligned faders/VU */
.channels{align-items:end}
.channel{gap:6px;align-items:center}
.channel .channel-body{align-items:end}
.fader-wrap{display:block}
.vu-meter{display:flex;flex-direction:column-reverse}
.vu-led{flex:1 1 auto;min-height:4px}

/* Crossfader section — centered, even margins */
.crossfader-section{display:flex;flex-direction:column;gap:6px;padding:8px}
.crossfader-ab{padding:0 2px}
.crossfader-track{margin:0}
.crossfader-label{text-align:center;margin:0}
.curve-switch{display:flex;justify-content:center;gap:4px;margin:0}

/* Auto-mix panel — consistent grid cell heights */
.automix-grid{grid-auto-rows:1fr}
.automix-btn{min-height:36px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1}

/* DSB monitor row — consistent chip height + baseline */
.deck-switch-bar{align-items:center;min-height:44px}
.dsb-btn{min-height:30px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.dsb-chip{min-height:22px;display:inline-flex;align-items:center;line-height:1}

/* Library — add a header row that matches the track-row grid */
.track-list{gap:2px}
.track-list::before{
  content:'# TITLE ARTIST BPM KEY RATING ACTIONS';
  display:none;
}
.track-list-header{
  display:grid;grid-template-columns:30px 1fr 1fr 55px 50px 80px 150px;gap:10px;
  padding:6px 10px 6px 16px;color:var(--orange);font-family:'Orbitron',sans-serif;
  font-size:9px;letter-spacing:2px;font-weight:700;
  border-bottom:1px solid rgba(255,138,26,.2);margin-bottom:4px;
}
.track-list-header span{text-align:left}
.track-list-header .th-bpm,.track-list-header .th-key,.track-list-header .th-rating{text-align:center}
.track-list-header .th-actions{text-align:right}
@media(max-width:1100px){
  .track-list-header{grid-template-columns:24px 1.5fr 1fr 45px 40px 70px 120px;padding-left:12px}
}
@media(max-width:820px){
  .track-list-header{grid-template-columns:20px 1fr 70px 70px;padding-left:8px}
  .track-list-header .th-artist,.track-list-header .th-rating,.track-list-header .th-actions{display:none}
}
@media(max-width:520px){
  .track-list-header{grid-template-columns:18px 1fr 55px}
  .track-list-header .th-key{display:none}
}

/* Header bar — baseline alignment + no-overflow */
.header-bar{align-items:center;min-height:36px}
.header-right{align-items:center;flex-wrap:wrap;min-height:32px}

/* RGB ambient — never exceed its container */
.rgb-ambient{box-sizing:border-box}

/* Toast/modal — sit above everything and never jitter */
.toast{z-index:9998}
.modal-overlay{z-index:9999}

/* Beat FX / Scene FX — vertical centering and equal gaps */
.beat-fx-panel,.scene-fx-panel{align-items:center;min-height:54px}
.beat-fx-panel > *,.scene-fx-panel > *{align-self:center}

/* Stats / AI DJ config — equal row heights */
.stats-grid,.ai-dj-controls,.ai-dj-config{grid-auto-rows:1fr}
.stat-card,.ai-config-item{display:flex;flex-direction:column;justify-content:center}

/* Sampler — square pads always */
.sample-pad{aspect-ratio:1/1}

/* Jog wheel — always a perfect circle, centered */
.jog-wheel{display:block;margin:0 auto}
.jog-wrapper{justify-content:center;align-items:center}

/* Knobs: exact circle */
.knob{aspect-ratio:1/1}

/* Playlists / sessions — equal row heights in grid */
.playlist-grid{grid-auto-rows:1fr}
.playlist-card,.session-card{height:100%}

/* Tab switches — active indicator lines up with pill */
.main-tabs{align-items:center;min-height:40px}
.tab-btn{min-height:28px;display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* Mic section — evenly spaced */
.mic-section{align-items:center;min-height:56px}

/* Make sure everything uses border-box (sanity net) */
*,*::before,*::after{box-sizing:border-box}

/* Consistent scrollbar gutter so headers don't shift when lists grow */
.track-list{scrollbar-gutter:stable}

/* MUSIC SEARCH panel styles */
.search-source-group{display:inline-flex;gap:3px;padding:3px;background:#050506;border:1px solid #2a2a2e;border-radius:4px}
.search-src-btn{padding:6px 12px;background:transparent;border:none;color:var(--text-dim);
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;font-weight:700;
  border-radius:3px;cursor:pointer;transition:all .15s ease;}
.search-src-btn:hover{color:var(--text)}
.search-src-btn.active{background:linear-gradient(180deg,var(--orange) 0%,#c85a00 100%);color:#000;box-shadow:0 0 10px rgba(255,138,26,.4)}
.search-status-row{min-height:18px;padding:6px 0;font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-dim);letter-spacing:1.5px}
.search-status-row.error{color:var(--red)}
.search-status-row.success{color:var(--play-green)}
.search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;max-height:560px;overflow-y:auto;padding:4px;scrollbar-gutter:stable}
.search-card{display:flex;flex-direction:column;gap:6px;padding:10px;background:#0a0a0b;border:1px solid #2a2a2e;border-radius:8px;transition:all .18s ease;cursor:default}
.search-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.5)}
.search-card .sc-top{display:flex;gap:10px;align-items:center}
.search-card .sc-art{width:52px;height:52px;object-fit:cover;border-radius:4px;background:#1a1a1c;flex-shrink:0}
.search-card .sc-info{display:flex;flex-direction:column;min-width:0;flex:1}
.search-card .sc-title{color:#fff;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-card .sc-artist{color:var(--text-dim);font-family:'Share Tech Mono',monospace;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:1px}
.search-card .sc-meta{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--screen-glow);letter-spacing:1.5px}
.search-card .sc-actions{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:3px;margin-top:auto}
.search-card .sc-actions button{
  padding:6px 4px;background:linear-gradient(180deg,#2a2a2e 0%,#151518 100%);
  border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;
  font-size:9px;letter-spacing:1.5px;font-weight:700;border-radius:3px;cursor:pointer;
  transition:all .12s ease;
}
.search-card .sc-actions button:hover{border-color:var(--orange);color:var(--orange)}
.search-card .sc-actions button.to-a:hover{border-color:var(--screen-glow);color:var(--screen-glow)}
.search-card .sc-actions button.to-b:hover{border-color:var(--pink);color:var(--pink)}
.search-card .sc-actions button.to-c:hover{border-color:var(--yellow);color:var(--yellow)}
.search-card .sc-actions button.to-d:hover{border-color:var(--purple);color:var(--purple)}
.search-card .sc-source{display:inline-block;padding:2px 6px;border-radius:2px;font-size:8px;letter-spacing:1.5px;margin-left:auto}
.search-card .sc-source.itunes{background:rgba(255,138,26,.12);color:var(--orange-glow);border:1px solid rgba(255,138,26,.3)}
.search-card .sc-source.spotify{background:rgba(28,255,143,.12);color:var(--play-green);border:1px solid rgba(28,255,143,.3)}
.search-card .sc-source.youtube{background:rgba(255,46,46,.12);color:#ff6a6a;border:1px solid rgba(255,46,46,.3)}
@media(max-width:820px){.search-results{grid-template-columns:1fr}}

/* WORK MODE — stage-ready performance view with library drawer */
body.work-mode .header-bar,
body.work-mode .main-tabs,
body.work-mode canvas#spectrumCanvas,
body.work-mode .tab-content:not(#tab-deck),
body.work-mode #tab-deck > *:not(.console):not(.library):not(.beat-fx-panel):not(.scene-fx-panel):not(.deck-switch-bar):not(.mixer-toolbar):not(.top-fx-row):not(.quick-lib-overlay):not(.auth-modal):not(.wm-exit-btn):not(#toastBox){display:none !important;}
body.work-mode .quick-lib-overlay.open{display:flex !important;z-index:100000;}
body.work-mode .deck-switch-bar{position:fixed;top:8px;right:8px;left:auto;width:auto;max-width:none;z-index:60;background:rgba(10,10,14,.92);backdrop-filter:blur(10px);border:1px solid rgba(255,138,26,.35);box-shadow:0 10px 30px rgba(0,0,0,.7);padding:6px 10px;border-radius:10px;gap:6px;flex-wrap:wrap}
body.work-mode .deck-switch-bar .dsb-label{color:var(--orange) !important;font-size:10px}
body.work-mode .beat-fx-panel,body.work-mode .scene-fx-panel{
  display:grid !important;
  padding:12px 18px !important;
  background:
    linear-gradient(180deg,rgba(255,138,26,.05) 0%,transparent 40%),
    linear-gradient(180deg,rgba(50,50,58,.95) 0%,rgba(30,30,36,.95) 100%) !important;
  backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(255,138,26,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 1px rgba(255,138,26,.55),
    0 0 28px rgba(255,138,26,.18),
    0 10px 28px rgba(0,0,0,.6) !important;
}
body.work-mode .scene-fx-panel{
  border-color:rgba(255,60,120,.45) !important;
  background:
    linear-gradient(180deg,rgba(255,60,120,.05) 0%,transparent 40%),
    linear-gradient(180deg,rgba(50,50,58,.95) 0%,rgba(30,30,36,.95) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 1px rgba(255,60,120,.55),
    0 0 28px rgba(255,60,120,.18),
    0 10px 28px rgba(0,0,0,.6) !important;
}
/* Labels glow brighter in work mode */
body.work-mode .beat-fx-label{
  color:var(--orange-glow) !important;font-size:14px !important;letter-spacing:3px;
  text-shadow:0 0 12px rgba(255,138,26,.85),0 0 4px rgba(255,200,120,.6);
}
body.work-mode .scene-fx-label{
  color:#ff6fa0 !important;font-size:14px !important;letter-spacing:3px;
  text-shadow:0 0 12px rgba(255,60,120,.9),0 0 4px rgba(255,140,180,.6);
}
/* Selectors + beat display brighter */
body.work-mode .fx-selector,body.work-mode .beat-display{
  background:#020608 !important;border-color:rgba(46,224,255,.5) !important;
  color:#7ff0ff !important;font-size:12px;
  text-shadow:0 0 8px rgba(46,224,255,.7);
  box-shadow:inset 0 0 12px rgba(46,224,255,.15),inset 0 1px 2px rgba(0,0,0,.7);
}
body.work-mode .beat-display{font-size:22px;min-width:90px;color:var(--orange-glow) !important;text-shadow:0 0 12px rgba(255,138,26,.85)}
body.work-mode .beat-btn{
  padding:8px 14px;font-size:11px;letter-spacing:1.5px;
  background:linear-gradient(180deg,#3a3a42 0%,#1a1a20 100%);color:#ddd;
  border:1px solid rgba(255,255,255,.08);
}
body.work-mode .beat-btn:hover{border-color:var(--screen-glow);color:var(--screen-glow);box-shadow:0 0 10px rgba(46,224,255,.5)}
body.work-mode .beat-btn.active{
  background:linear-gradient(180deg,#7ff0ff 0%,var(--screen-glow) 55%,#0e88a6 100%);color:#000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 18px rgba(46,224,255,.85);
}
body.work-mode .fx-onoff{
  padding:13px 26px !important;font-size:14px !important;letter-spacing:4px;
  border-width:2px !important;
}
body.work-mode .fx-onoff.active{
  background:linear-gradient(180deg,#ffb366 0%,var(--orange) 60%,#c85a00 100%) !important;
  border-color:var(--orange-glow) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 34px rgba(255,138,26,.9) !important;
}
body.work-mode .tap-btn{
  padding:12px 18px;font-size:12px;letter-spacing:2.5px;
  border:1px solid rgba(255,138,26,.4);color:var(--orange-glow);
  text-shadow:0 0 6px rgba(255,138,26,.5);
}
body.work-mode .tap-btn:active{background:var(--orange);color:#000;box-shadow:0 0 20px rgba(255,138,26,.8)}
body.work-mode .scene-btn{
  padding:9px 14px;font-size:11px;letter-spacing:2px;
  background:linear-gradient(180deg,#3a3a42 0%,#1a1a20 100%);color:#ddd;
  border:1px solid rgba(255,255,255,.1);
}
body.work-mode .scene-btn:hover{border-color:var(--pink);color:var(--pink);box-shadow:0 0 12px rgba(255,60,120,.5)}
body.work-mode .scene-btn.active{
  background:linear-gradient(180deg,#ff6fa0 0%,var(--pink) 55%,#aa2050 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 22px rgba(255,60,120,.85);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
body.work-mode .x-pad{
  border-width:2px;border-color:rgba(200,0,255,.5);
  box-shadow:inset 0 0 24px rgba(0,0,0,.85),0 0 20px rgba(200,0,255,.3);
}
body.work-mode .x-pad.active{
  border-color:var(--purple);
  box-shadow:inset 0 0 24px rgba(0,0,0,.7),0 0 34px rgba(200,0,255,.8);
}
body.work-mode .x-pad-labels{color:#ccc !important;opacity:.85;font-size:11px}
body.work-mode .knob-label{color:#e8e8ea !important;font-size:10px;text-shadow:0 0 4px rgba(255,255,255,.3)}

/* ============================================================
   LIGHT THEME v3 — 'Pioneer White' (CDJ-3000-W / DJM-900NXS2-W)
   Clean cool-white body matching the real Pioneer DJ hardware in
   white finish: porcelain panels, dark charcoal control buttons,
   chrome jog ring, dark LED-style screens with cyan/orange glow.
   ============================================================ */
body.theme-light{
  --deck-bg:#eeeef2;
  --deck-panel:#f5f5f7;
  --deck-border:#bdbdc4;
  --screen-glow:#00b4dc;
  --orange:#ff7a1a;
  --orange-glow:#c85a00;
  --cue-orange:#ff5a00;
  --play-green:#00a656;
  --red:#dc2e2e;
  --yellow:#e8a500;
  --purple:#8c00c8;
  --pink:#c82e5a;
  --text:#1a1a1c;
  --text-dim:#5a5a60;
  --bg:#e9e9ed;
  --panel-edge:rgba(0,0,0,.08);
  --panel-edge-strong:rgba(0,0,0,.16);
}
body.theme-light,body.theme-light html{
  background:
    radial-gradient(ellipse at 20% 0%,rgba(0,180,220,.05) 0%,transparent 45%),
    radial-gradient(ellipse at 80% 100%,rgba(255,138,26,.05) 0%,transparent 45%),
    radial-gradient(ellipse at center,#f4f4f8 0%,var(--bg) 70%);
}
body.theme-light::after{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.08) 100%)}
body.theme-light ::-webkit-scrollbar-track{background:#e0ddd6}
body.theme-light ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--orange),#c85a00)}

/* Top panels */
body.theme-light .header-bar{color:#1a1a1c}
body.theme-light .brand{color:#1a1a1c;text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 16px rgba(255,138,26,.12)}
body.theme-light .brand .max{background:linear-gradient(180deg,#ffa84a 0%,var(--orange) 55%,#c85a00 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.2),0 0 12px rgba(255,138,26,.4)}
body.theme-light .header-right{color:#5a5a60}

/* All main panels: porcelain white with soft shadow */
body.theme-light .cdj,body.theme-light .mixer,body.theme-light .library,
body.theme-light .sampler-panel,body.theme-light .youtube-panel,body.theme-light .playlists-panel,
body.theme-light .ai-dj-panel,body.theme-light .analytics-panel,body.theme-light .midi-panel,
body.theme-light .settings-panel,body.theme-light .beat-fx-panel,body.theme-light .scene-fx-panel,
body.theme-light .deck-switch-bar{
  background:
    linear-gradient(180deg,rgba(0,0,0,.015) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,.04) 100%),
    linear-gradient(180deg,#fcfcfe 0%,#ececf0 100%);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.05),
    0 1px 0 rgba(0,0,0,.02),
    0 12px 30px -8px rgba(60,60,80,.25),
    0 2px 6px rgba(0,0,0,.06);
}
body.theme-light .main-tabs{background:linear-gradient(180deg,#eaeaef 0%,#dadade 100%);border:1px solid rgba(0,0,0,.08);box-shadow:inset 0 2px 4px rgba(0,0,0,.06)}
body.theme-light .tab-btn{color:#5a5a60}
body.theme-light .tab-btn:hover{color:#1a1a1c}
body.theme-light .tab-btn.active{background:linear-gradient(180deg,#ffa84a 0%,var(--orange) 45%,#c85a00 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 14px rgba(255,138,26,.5);text-shadow:0 1px 0 rgba(0,0,0,.2)}

/* LED-style displays stay dark even in light theme (like real hardware) */
body.theme-light .screen{
  background:linear-gradient(180deg,#06121a 0%,#020608 100%);
  border:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 0 32px rgba(0,136,180,.12),inset 0 2px 6px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.15);
}
body.theme-light .jog-center-screen{
  background:radial-gradient(circle,#0b1a22 0%,#020608 100%);
  border:2px solid rgba(0,0,0,.4);
  box-shadow:inset 0 0 20px rgba(0,136,180,.15),inset 0 2px 6px rgba(0,0,0,.9),0 4px 12px rgba(0,0,0,.3);
}
body.theme-light .track-title{color:#7ff0ff;text-shadow:0 0 10px rgba(46,224,255,.6)}
body.theme-light .screen-bpm{color:#ffb366;text-shadow:0 0 10px rgba(255,138,26,.8)}
body.theme-light .screen-key{color:#6cff9e}
body.theme-light .master-bpm{background:#020608;border:1px solid #0a1a20;color:#ffb366}
body.theme-light .jog-center-screen .bpm-display{color:#ffb366}
body.theme-light .jog-center-screen .bpm-sub,body.theme-light .jog-center-screen .deck-badge{color:#7fd4ea}

/* Deck number */
body.theme-light .deck-number{
  background:linear-gradient(180deg,#ff9040 0%,var(--orange) 55%,#a04a00 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 4px rgba(255,138,26,.25));
}
body.theme-light .deck-label{color:#1a1a1c}
body.theme-light .deck-label .model{color:var(--orange)}

/* Jog wheel — brushed-chrome treatment */
body.theme-light .jog-outer{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.85) 0%,transparent 38%),
    radial-gradient(circle at 30% 30%,#d8d8dc 0%,#9a9aa0 55%,#58585e 100%);
  box-shadow:0 0 0 2px #888,0 0 0 3px rgba(255,255,255,.4),0 0 0 5px #a8a8ae,inset 0 3px 10px rgba(255,255,255,.5),inset 0 -6px 14px rgba(0,0,0,.35),0 14px 32px rgba(40,40,60,.3);
}
body.theme-light .jog-platter{
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.4) 0%,transparent 35%),radial-gradient(circle at 35% 35%,#d4d4d8 0%,#8a8a90 55%,#3a3a40 100%);
  box-shadow:inset 0 3px 10px rgba(255,255,255,.5),inset 0 -6px 14px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.2);
}
body.theme-light .jog-platter-disc{background:repeating-radial-gradient(circle,rgba(0,0,0,.04) 0px,rgba(0,0,0,.04) 1px,transparent 1px,transparent 3px),radial-gradient(circle,#c8c8cc 0%,#6a6a70 100%)}
body.theme-light .jog-indicator{background:linear-gradient(180deg,#fff 0%,var(--orange) 70%,#aa3a00 100%);box-shadow:0 0 4px rgba(0,0,0,.3),0 0 8px rgba(255,138,26,.6)}

/* Knobs — brushed silver */
body.theme-light .knob{
  background:
    radial-gradient(circle at 30% 28%,rgba(255,255,255,.95) 0%,transparent 32%),
    conic-gradient(from 0deg,#e4e4e8 0deg,#c0c0c6 45deg,#a8a8ae 90deg,#d4d4d8 180deg,#b0b0b6 270deg,#e4e4e8 360deg),
    radial-gradient(circle at 30% 30%,#e4e4e8 0%,#a0a0a6 60%,#58585e 100%);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.8),inset 0 -3px 6px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.15);
}
body.theme-light .knob-indicator{background:linear-gradient(180deg,#3a3a40 0%,var(--orange) 70%,#aa3a00 100%);box-shadow:0 0 4px rgba(0,0,0,.4)}
body.theme-light .knob-label{color:#6a6a72;font-weight:700}

/* VU meters stay dark (LEDs look right only on dark) */
body.theme-light .vu-meter{background:#0a0a0e;border:1px solid #2a2a30;box-shadow:inset 0 0 5px rgba(0,0,0,.8)}
body.theme-light .vu-led{background:#0a1a15}

/* Faders — light track, chrome handle */
body.theme-light .fader-wrap,body.theme-light .crossfader-track,body.theme-light .tempo-slider{
  background:linear-gradient(180deg,#c0c0c6 0%,#9a9aa0 100%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.15);
}
body.theme-light .fader-handle,body.theme-light .tempo-handle,body.theme-light .crossfader-handle{
  background:linear-gradient(180deg,#fff 0%,#d0d0d6 30%,#8a8a90 70%,#4a4a50 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.15);
}

/* Buttons: light with crisp edges */
body.theme-light .big-btn,body.theme-light .loop-btn,body.theme-light .jump-btn,body.theme-light .util-btn,
body.theme-light .beat-btn,body.theme-light .scene-btn,body.theme-light .pad-mode-btn,
body.theme-light .tempo-btn,body.theme-light .step-btn,body.theme-light .mic-btn,
body.theme-light .cue-btn,body.theme-light .compact-btn,body.theme-light .cue-hp-btn,
body.theme-light .automix-btn,body.theme-light .dsb-btn,body.theme-light .search-src-btn,
body.theme-light .studio-preset-btn,body.theme-light .tool-btn,body.theme-light .assign-btn,
body.theme-light .curve-btn,body.theme-light .ai-dj-btn{
  background:linear-gradient(180deg,#ffffff 0%,#e4e4e8 60%,#d0d0d6 100%);
  border:1px solid rgba(0,0,0,.12);
  color:#3a3a42;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 2px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.1);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
body.theme-light .big-btn:hover,body.theme-light .loop-btn:hover,body.theme-light .jump-btn:hover,
body.theme-light .util-btn:hover,body.theme-light .beat-btn:hover,body.theme-light .scene-btn:hover,
body.theme-light .pad-mode-btn:hover{filter:brightness(1.02);border-color:rgba(255,138,26,.4)}

/* Active states keep their signature color glow */
body.theme-light .big-btn.cue.active{background:linear-gradient(180deg,#ff9040 0%,var(--cue-orange) 60%,#8a2a00 100%);color:#fff;border-color:#8a2a00;text-shadow:0 1px 0 rgba(0,0,0,.3)}
body.theme-light .big-btn.play.active{background:linear-gradient(180deg,#4affa0 0%,var(--play-green) 60%,#00653a 100%);color:#fff;border-color:#00653a;text-shadow:0 1px 0 rgba(0,0,0,.3)}
body.theme-light .loop-btn.active{background:linear-gradient(180deg,#7ff0ff 0%,var(--screen-glow) 60%,#00607a 100%);color:#fff;border-color:#00607a}
body.theme-light .beat-btn.active{background:linear-gradient(180deg,#7ff0ff 0%,var(--screen-glow) 60%,#00607a 100%);color:#fff}
body.theme-light .scene-btn.active{background:linear-gradient(180deg,#ff8ab3 0%,var(--pink) 60%,#8a1a40 100%);color:#fff}
body.theme-light .fx-onoff{background:linear-gradient(180deg,#fff 0%,#dcdce0 100%);border:2px solid #b0b0b6;color:#1a1a1c}
body.theme-light .fx-onoff.active{background:linear-gradient(180deg,#ff9040 0%,var(--orange) 55%,#aa3a00 100%);color:#fff;border-color:#aa3a00}
body.theme-light .util-btn.sync.active{background:linear-gradient(180deg,#ffc0a0 0%,var(--orange) 100%);color:#fff}
body.theme-light .tab-btn{background:transparent}
body.theme-light .rec-btn{background:linear-gradient(180deg,#ffefef 0%,#ffd0d0 100%);border-color:var(--red);color:var(--red)}
body.theme-light .rec-btn.recording{background:linear-gradient(180deg,#ff6060 0%,var(--red) 100%);color:#fff}

/* Sample pads */
body.theme-light .sample-pad{background:linear-gradient(180deg,#ffffff 0%,#dcdce0 100%);border:1px solid rgba(0,0,0,.12);color:#3a3a42;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(0,0,0,.1),0 3px 6px rgba(0,0,0,.15)}
body.theme-light .sample-pad .pad-num{color:#3a3a42}
body.theme-light .sample-pad .pad-name{color:#6a6a72}

/* Inputs */
body.theme-light input,body.theme-light select,body.theme-light textarea{
  background:#fff;color:#1a1a1c;border:1px solid rgba(0,0,0,.15);
}
body.theme-light input:focus,body.theme-light select:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px rgba(255,138,26,.18)}
body.theme-light .url-input,body.theme-light .search-input,body.theme-light .yt-input{background:#fff;color:#1a1a1c}
body.theme-light .fx-selector{background:#020608;color:#7ff0ff;border-color:rgba(0,0,0,.3)}

/* Titles + text */
body.theme-light .library-title,body.theme-light .mixer-brand,body.theme-light .sampler-title,
body.theme-light .modal-box h3,body.theme-light .settings-section h3,
body.theme-light .ai-dj-title,body.theme-light .dsb-label{color:#1a1a1c}
body.theme-light .count{color:var(--orange)}
body.theme-light .setting-desc{color:#7a7a80}
body.theme-light .ai-log{background:#020608;color:#7ff0ff}

/* Playlist + session cards */
body.theme-light .playlist-card,body.theme-light .session-card,body.theme-light .stat-card,body.theme-light .midi-device,body.theme-light .shortcut-item{
  background:linear-gradient(180deg,#fff 0%,#f0f0f4 100%);border:1px solid rgba(0,0,0,.08);color:#1a1a1c;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
body.theme-light .playlist-card h4,body.theme-light .session-name,body.theme-light .stat-card .stat-value{color:#1a1a1c}
body.theme-light .pl-meta,body.theme-light .session-meta{color:#5a5a60}
body.theme-light .stat-card .stat-value{background:linear-gradient(180deg,#1a1a1c 0%,var(--orange) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Track rows */
body.theme-light .track-row{background:#fafafc;border:1px solid transparent;color:#3a3a42}
body.theme-light .track-row:hover{background:#fff;border-color:var(--orange);box-shadow:0 4px 10px rgba(0,0,0,.06)}
body.theme-light .track-row .t-title{color:#1a1a1c}
body.theme-light .track-row .t-artist{color:#5a5a60}
body.theme-light .track-list-header{color:var(--orange);border-bottom:1px solid rgba(255,138,26,.3)}

/* Toast + modal */
body.theme-light .toast{background:linear-gradient(180deg,#fff 0%,#f0f0f4 100%);color:#1a1a1c;border:1px solid var(--orange);box-shadow:0 12px 30px rgba(0,0,0,.2),0 0 20px rgba(255,138,26,.2)}
body.theme-light .modal-box{background:linear-gradient(180deg,#fff 0%,#f0f0f4 100%);color:#1a1a1c;box-shadow:0 40px 80px rgba(0,0,0,.4),0 0 40px rgba(255,138,26,.15)}
body.theme-light .modal-overlay{background:rgba(40,40,60,.65)}

/* Studio panel */
body.theme-light .studio-eq-canvas,body.theme-light .studio-spectrum{background:linear-gradient(180deg,#06121a 0%,#020608 100%)}
body.theme-light .studio-block{background:#fff;border-color:rgba(0,0,0,.1)}
body.theme-light .studio-presets,body.theme-light .studio-eq,body.theme-light .studio-spectrum-wrap{background:#f6f6f8;border-color:rgba(0,0,0,.1)}
body.theme-light .studio-block-title{color:#1a1a1c;border-bottom-color:rgba(0,0,0,.1)}

/* Mixer extras */
body.theme-light .channel-label{color:var(--orange)}
body.theme-light .compact-decks{background:#eaeaef;border-color:rgba(0,0,0,.1)}
body.theme-light .compact-deck{background:#fff;border-color:rgba(0,0,0,.08)}
body.theme-light .compact-deck-title{background:#020608;color:#7ff0ff;border-color:rgba(0,0,0,.3)}
body.theme-light .isolator-panel{background:#fff5f5;border-color:rgba(220,46,46,.3)}
body.theme-light .master-section,body.theme-light .color-fx-row,body.theme-light .color-fx-grid,
body.theme-light .crossfader-section,body.theme-light .headphone-section,body.theme-light .mic-section,
body.theme-light .automix-panel{background:#eef0f4;border:1px solid rgba(0,0,0,.06)}

/* Toggle switches */
body.theme-light .toggle-switch{background:#d0d0d6;border-color:rgba(0,0,0,.15)}
body.theme-light .toggle-switch::after{background:#fff}
body.theme-light .toggle-switch.on{background:var(--orange)}

/* Waveform */
body.theme-light .waveform{background:#05101c;border:1px solid rgba(0,0,0,.25);box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
body.theme-light .playhead{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9),0 0 2px rgba(0,0,0,.7)}

/* WORK MODE button keeps its look */
body.theme-light .dsb-work{color:var(--purple) !important;border-color:rgba(140,0,200,.4) !important}
body.theme-light .wm-exit-btn{background:linear-gradient(180deg,#ff8080 0%,var(--red) 100%);color:#fff;border:2px solid var(--red)}

/* Shortcut badge */
body.theme-light .shortcut-item kbd{background:linear-gradient(180deg,#fff 0%,#d0d0d6 100%);color:#1a1a1c;border:1px solid rgba(0,0,0,.15);box-shadow:inset 0 -2px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1)}

/* Ambient RGB strip reads softer on light */
body.theme-light .rgb-ambient{opacity:.9}

/* AUTH button + chip in header */
.auth-btn{
  padding:6px 12px;background:linear-gradient(180deg,#2a2a2e 0%,#151518 100%);
  border:1px solid var(--play-green);color:var(--play-green);
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;font-weight:700;
  border-radius:4px;cursor:pointer;transition:all .15s ease;
}
.auth-btn:hover{background:var(--play-green);color:#0a0a0a;box-shadow:0 0 14px rgba(28,255,143,.55)}
.auth-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  background:linear-gradient(180deg,#2a2a2e 0%,#151518 100%);
  border:1px solid rgba(28,255,143,.5);color:var(--play-green);
  font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;
  border-radius:4px;
}
.auth-chip #authName{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.auth-logout{background:transparent;border:none;color:var(--red);cursor:pointer;font-size:13px;padding:0 4px;font-weight:900}
.auth-logout:hover{color:#fff;text-shadow:0 0 6px var(--red)}

/* AUTH modal */
.auth-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);align-items:center;justify-content:center;animation:fadeIn .2s}
.auth-modal.open{display:flex}
.auth-box{
  background:linear-gradient(180deg,#2a2a2e 0%,#14141a 100%);
  border:1px solid var(--orange);border-radius:14px;padding:28px;
  width:min(420px,92vw);
  box-shadow:0 40px 80px rgba(0,0,0,.8),0 0 60px rgba(255,138,26,.3);
}
.auth-box h3{font-family:'Orbitron',sans-serif;color:var(--orange);font-size:16px;letter-spacing:3px;text-align:center;margin-bottom:20px}
.auth-box .auth-tabs{display:flex;gap:4px;background:#0a0a0b;padding:3px;border-radius:6px;margin-bottom:18px}
.auth-box .auth-tab{flex:1;padding:8px;background:transparent;border:none;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;border-radius:4px;cursor:pointer;font-weight:700}
.auth-box .auth-tab.active{background:linear-gradient(180deg,var(--orange),#c85a00);color:#0a0a0a}
.auth-box .auth-method{display:flex;flex-direction:column;gap:10px}
.auth-box .auth-method.hidden{display:none}
.auth-box label{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim);letter-spacing:1.5px;display:block;margin-bottom:4px}
.auth-box input{width:100%;padding:10px 12px;background:#0a0a0b;border:1px solid #333;color:#fff;font-family:'Share Tech Mono',monospace;font-size:13px;border-radius:4px}
.auth-box input:focus{border-color:var(--orange);outline:none}
.auth-primary-btn{padding:12px;background:linear-gradient(180deg,var(--orange),#c85a00);border:none;color:#0a0a0a;font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:3px;font-weight:800;border-radius:6px;cursor:pointer;transition:all .15s}
.auth-primary-btn:hover{filter:brightness(1.1);box-shadow:0 0 20px rgba(255,138,26,.5)}
.auth-primary-btn:disabled{opacity:.5;cursor:wait}
.auth-google-btn{padding:12px;background:#fff;color:#202124;border:1px solid #dadce0;font-family:'Share Tech Mono',monospace;font-size:13px;font-weight:700;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.auth-google-btn:hover{background:#f8f9fa;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;margin:14px 0}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
.auth-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer}
.auth-close:hover{color:var(--red)}
.auth-status{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;text-align:center;min-height:16px;padding:6px 0}
.auth-status.error{color:var(--red)}
.auth-status.success{color:var(--play-green)}

/* ADMIN panel */
.admin-table-wrap{max-height:560px;overflow-y:auto;scrollbar-gutter:stable;background:#0a0a0b;border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.admin-table{width:100%;border-collapse:collapse;font-family:'Share Tech Mono',monospace;font-size:11px}
.admin-table th{padding:10px 12px;text-align:left;background:#141416;color:var(--orange);letter-spacing:2px;font-weight:700;border-bottom:1px solid rgba(255,138,26,.3);position:sticky;top:0;z-index:1}
.admin-table td{padding:10px 12px;color:var(--text);border-bottom:1px solid rgba(255,255,255,.04)}
.admin-table tr:hover td{background:rgba(255,138,26,.04)}
.admin-role{padding:3px 8px;border-radius:3px;font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;font-weight:700}
.admin-role.admin{background:rgba(255,138,26,.18);color:var(--orange);border:1px solid rgba(255,138,26,.5)}
.admin-role.user{background:rgba(46,224,255,.12);color:var(--screen-glow);border:1px solid rgba(46,224,255,.4)}
.admin-role.banned{background:rgba(255,46,46,.18);color:var(--red);border:1px solid rgba(255,46,46,.5)}
.admin-actions{display:flex;gap:4px}
.admin-actions button{padding:5px 9px;background:linear-gradient(180deg,#2a2a2e,#151518);border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.3px;border-radius:3px;cursor:pointer}
.admin-actions button:hover{border-color:var(--orange);color:var(--orange)}
.admin-actions button.danger:hover{border-color:var(--red);color:var(--red)}
.admin-actions button.promote:hover{border-color:var(--play-green);color:var(--play-green)}

body.theme-light .auth-box{background:linear-gradient(180deg,#fff 0%,#f0f0f4 100%);color:#1a1a1c}
body.theme-light .auth-box input{background:#f4f4f8;color:#1a1a1c;border-color:rgba(0,0,0,.15)}
body.theme-light .auth-box .auth-tab{color:#5a5a60}
body.theme-light .auth-box .auth-tab.active{color:#fff}
body.theme-light .admin-table-wrap{background:#fff;border-color:rgba(0,0,0,.08)}
body.theme-light .admin-table th{background:#f0f0f4;border-bottom-color:rgba(255,138,26,.35)}
body.theme-light .admin-table td{color:#1a1a1c;border-bottom-color:rgba(0,0,0,.05)}

/* ============================================================
   LIGHT THEME v2.1 — final polish pass for accessibility + clarity
   ============================================================ */

/* Upload / URL / YT / Playlist buttons + all tool buttons */
body.theme-light .upload-btn{background:linear-gradient(180deg,#ffa84a 0%,var(--orange) 50%,#c85a00 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px rgba(255,138,26,.35)}
body.theme-light .url-btn{background:linear-gradient(180deg,#5ce0ff 0%,#00a0d0 50%,#006088 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px rgba(0,160,208,.35)}
body.theme-light .yt-btn{background:linear-gradient(180deg,#ff6464 0%,#dc2e2e 60%,#8a0a0a 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 8px rgba(220,46,46,.3)}
body.theme-light .playlist-btn{background:linear-gradient(180deg,#c85aff 0%,#8c00c8 60%,#5a008a 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 8px rgba(140,0,200,.3)}

/* Focus ring + visible outline on every interactive element */
body.theme-light button:focus-visible,body.theme-light input:focus-visible,body.theme-light select:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px;
}

/* Knob labels / parameter readouts — always dark + clear */
body.theme-light .knob-label,body.theme-light .studio-val,body.theme-light .eq-label,
body.theme-light .eq-value,body.theme-light .compact-vol-label,body.theme-light .dsb-label,
body.theme-light .beat-fx-label,body.theme-light .scene-fx-label,body.theme-light .crossfader-label{
  color:#2a2a30;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.7);
}
body.theme-light .beat-fx-label{color:var(--orange-glow)}
body.theme-light .scene-fx-label{color:#c82e5a}

/* Channel labels + mixer brand */
body.theme-light .channel-label{color:#1a1a1c;text-shadow:0 1px 0 rgba(255,255,255,.7)}
body.theme-light .mixer-brand{color:#1a1a1c;text-shadow:0 1px 0 rgba(255,255,255,.7)}
body.theme-light .mixer-brand .model{color:var(--orange)}

/* Waveform, time values stay LED-bright on their dark screens */
body.theme-light .waveform{border-color:#00405a}
body.theme-light .track-artist{color:#5aa0c8}
body.theme-light .time-label{color:#5a8fa8}
body.theme-light .time-value{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.6)}
body.theme-light .time-value.remain{color:#ffb366}
body.theme-light .screen-bpm-label{color:#5a8fa8}
body.theme-light .phrase-mark{background:#ffb366;box-shadow:0 0 3px rgba(255,138,26,.9)}

/* Tab bar */
body.theme-light .tab-btn{background:transparent;color:#4a4a52}
body.theme-light .tab-btn:hover{background:rgba(255,138,26,.08);color:#1a1a1c}

/* Library actions + search panel */
body.theme-light .search-src-btn{color:#5a5a60}
body.theme-light .search-src-btn.active{background:linear-gradient(180deg,var(--orange),#c85a00);color:#fff}
body.theme-light .search-card{background:linear-gradient(180deg,#fff 0%,#f4f4f8 100%);border-color:rgba(0,0,0,.1)}
body.theme-light .search-card:hover{border-color:var(--orange);box-shadow:0 10px 22px rgba(0,0,0,.12)}
body.theme-light .search-card .sc-title{color:#1a1a1c}
body.theme-light .search-card .sc-artist{color:#5a5a60}
body.theme-light .search-card .sc-meta{color:#0088b4}
body.theme-light .search-card .sc-actions button{background:linear-gradient(180deg,#fff,#e0e0e6);color:#3a3a40;border-color:rgba(0,0,0,.1)}
body.theme-light .search-card .sc-actions button:hover{border-color:var(--orange);color:var(--orange)}
body.theme-light .search-status-row{color:#5a5a60}
body.theme-light .url-status{color:#5a5a60}
body.theme-light .url-status.success{color:#007a3c}
body.theme-light .url-status.error{color:var(--red)}

/* Studio panel extras */
body.theme-light .studio-panel{background:linear-gradient(180deg,#fff 0%,#eaeaef 100%);color:#1a1a1c}
body.theme-light .studio-preset-btn{color:#3a3a42}
body.theme-light .studio-preset-btn.active{background:linear-gradient(180deg,var(--orange),#c85a00);color:#fff}
body.theme-light .studio-eq-band{background:#f0f0f4;border:1px solid rgba(0,0,0,.05)}
body.theme-light .studio-sub-label{color:var(--orange-glow)}
body.theme-light .studio-gr-meter{background:#d8d8dc;border-color:rgba(0,0,0,.1)}
body.theme-light .studio-level-bar{background:#d8d8dc;border-color:rgba(0,0,0,.1)}
body.theme-light .studio-level-label{color:#5a5a60}
body.theme-light .studio-level-val{color:var(--orange-glow)}
body.theme-light .studio-block-title{color:#1a1a1c;border-bottom-color:rgba(0,0,0,.08)}

/* Analytics — stat cards, mix history */
body.theme-light .stat-card h5{color:#5a5a60;letter-spacing:2px}
body.theme-light .stat-card .stat-sub{color:#0088b4}
body.theme-light .mix-history{background:#fff;border:1px solid rgba(0,0,0,.08)}
body.theme-light .mix-history h4{color:var(--orange-glow)}
body.theme-light .mix-entry{color:#3a3a42;border-bottom-color:rgba(0,0,0,.05)}
body.theme-light .mix-entry:hover{background:rgba(255,138,26,.06)}
body.theme-light .mix-entry .time{color:#7a7a80}

/* MIDI devices */
body.theme-light .midi-devices{background:#f4f4f8;border:1px solid rgba(0,0,0,.05)}
body.theme-light .midi-device{background:#fff;color:#3a3a42}
body.theme-light .midi-device .status{color:#007a3c}
body.theme-light .midi-log{background:#020608;color:#7ff0ff}

/* AI DJ */
body.theme-light .ai-dj-panel{background:linear-gradient(135deg,rgba(200,0,255,.04) 0%,rgba(0,180,220,.04) 100%),linear-gradient(180deg,#fff 0%,#f0f0f4 100%);border-color:rgba(200,0,255,.15);color:#1a1a1c}
body.theme-light .ai-dj-title{background:linear-gradient(90deg,#8c00c8,#0088b4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.theme-light .ai-dj-status{color:#5a5a60}
body.theme-light .ai-dj-btn{background:linear-gradient(180deg,#fff,#dcdce0);color:#3a3a42;border-color:rgba(0,0,0,.12)}
body.theme-light .ai-dj-btn.primary{background:linear-gradient(180deg,#c85aff,var(--purple));color:#fff;border-color:var(--purple)}
body.theme-light .ai-config-item label{color:#4a4a52}
body.theme-light .ai-log{background:#020608;color:#7ff0ff;border:1px solid rgba(0,0,0,.2)}

/* Help — shortcut badges */
body.theme-light .shortcut-grid{background:#f4f4f8;border:1px solid rgba(0,0,0,.05)}
body.theme-light .shortcut-item{background:#fff;color:#3a3a42}
body.theme-light .shortcut-item:hover{background:rgba(255,138,26,.06)}

/* Library title badges */
body.theme-light .library-title{color:#1a1a1c}
body.theme-light .library-title .count{color:var(--orange-glow);font-weight:700}

/* Rating stars */
body.theme-light .star{color:#c8c8ce}
body.theme-light .star.filled{color:var(--yellow);text-shadow:0 0 4px rgba(232,165,0,.3)}

/* Modal box */
body.theme-light .modal-box input{background:#f4f4f8;color:#1a1a1c;border-color:rgba(0,0,0,.15)}
body.theme-light .modal-actions button{color:#3a3a42;border-color:rgba(0,0,0,.12)}
body.theme-light .modal-actions button.primary{background:var(--orange);color:#fff;border-color:var(--orange)}

/* Color FX channel labels + master */
body.theme-light .master-knob-wrap .knob-label{color:var(--orange-glow)}
body.theme-light .color-fx-channel .knob-label{color:#c82e5a}
body.theme-light .isolator-panel .knob-wrap .knob-label{color:var(--red)}
body.theme-light .headphone-section .knob-label{color:#0088b4}

/* Deck switch bar label */
body.theme-light .dsb-label{color:var(--orange-glow)}
body.theme-light .dsb-btn{color:#3a3a42}
body.theme-light .dsb-btn:hover{border-color:var(--orange);color:var(--orange-glow)}
body.theme-light .dsb-btn.active{background:linear-gradient(180deg,#ffa84a 0%,var(--orange) 55%,#c85a00 100%);color:#fff;border-color:#aa3a00;text-shadow:0 1px 0 rgba(0,0,0,.25)}
body.theme-light .dsb-chip{background:#fff;border-color:rgba(0,0,0,.1)}
body.theme-light .dsb-chip .dsb-id{color:var(--orange-glow)}
body.theme-light .dsb-chip .dsb-bpm{color:#0088b4}

/* Auto-mix panel */
body.theme-light .automix-panel{background:linear-gradient(180deg,#faf6ff 0%,#ecdcf4 100%);border-color:rgba(140,0,200,.25)}
body.theme-light .automix-title{color:var(--purple)}
body.theme-light .automix-title span{background:#fff;color:var(--orange-glow);border-color:rgba(0,0,0,.1)}
body.theme-light .automix-btn{background:linear-gradient(180deg,#fff,#dcdce0);color:#3a3a42}
body.theme-light .automix-btn:hover{border-color:var(--purple);color:var(--purple);box-shadow:0 0 10px rgba(140,0,200,.25)}
body.theme-light .automix-sync{background:linear-gradient(180deg,#fff,#e4e4e8);color:var(--orange-glow);border-color:var(--orange)}
body.theme-light .automix-sync:hover{background:var(--orange);color:#fff}
body.theme-light .automix-sub{color:#5a5a60;border-top-color:rgba(0,0,0,.06)}

/* XFader + crossfader area */
body.theme-light .crossfader-ab{color:var(--orange-glow)}
body.theme-light .curve-switch button{background:linear-gradient(180deg,#fff,#e4e4e8);color:#3a3a42;border-color:rgba(0,0,0,.12)}
body.theme-light .curve-switch button.active{background:var(--orange);color:#fff}
body.theme-light .xfader-assign .assign-btn{background:linear-gradient(180deg,#fff,#e4e4e8);color:#3a3a42;border-color:rgba(0,0,0,.12)}
body.theme-light .xfader-assign .assign-btn.active{background:var(--orange);color:#fff}

/* Tempo display big */
body.theme-light .tempo-display-big{background:#020608;color:#ffb366;border-color:#00405a}
body.theme-light .tempo-value{color:var(--orange-glow)}
body.theme-light .tempo-range{background:#fff;color:#0088b4;border-color:rgba(0,0,0,.12)}

/* Autoloop + fx selectors */
body.theme-light .fx-selector{background:#020608;color:#7ff0ff;border-color:#00405a}

/* Preview / deck load buttons in track rows */
body.theme-light .track-row .actions button{background:#fff;color:#5a5a60;border-color:rgba(0,0,0,.1)}
body.theme-light .track-row .actions .preview:hover{border-color:var(--yellow);color:#a08800}
body.theme-light .track-row .actions .deck-a:hover{border-color:#0088b4;color:#0088b4}
body.theme-light .track-row .actions .deck-b:hover{border-color:#c82e5a;color:#c82e5a}
body.theme-light .track-row .actions .remove:hover{border-color:var(--red);color:var(--red)}

/* Session cards */
body.theme-light .session-card::before{background:linear-gradient(180deg,var(--play-green),#0088b4)}
body.theme-light .session-card .session-actions button{background:#fff;color:#5a5a60;border-color:rgba(0,0,0,.12)}
body.theme-light .session-card .session-actions button:hover{border-color:var(--orange);color:var(--orange-glow)}

/* Playlist cards */
body.theme-light .playlist-card .pl-actions button{background:#fff;color:#5a5a60;border-color:rgba(0,0,0,.12)}
body.theme-light .playlist-card .pl-actions button:hover{background:rgba(255,138,26,.08);border-color:var(--orange);color:var(--orange)}

/* Sample pads get their signature color when loaded/playing even in light mode */
body.theme-light .sample-pad.loaded{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 2px var(--pad-color,var(--orange)),0 3px 6px rgba(0,0,0,.15)}
body.theme-light .sample-pad.playing{background:var(--pad-color,var(--orange));color:#fff;box-shadow:0 0 22px var(--pad-color,var(--orange))}

/* YouTube player box */
body.theme-light .yt-player-box{border-color:var(--red);box-shadow:0 0 16px rgba(220,46,46,.2)}
body.theme-light .yt-controls{background:#fff;border-top:1px solid rgba(0,0,0,.06)}
body.theme-light .yt-title{color:#1a1a1c}

/* Deck header, track title glow visibility */
body.theme-light .brand span{color:var(--orange)}
body.theme-light .power-led{box-shadow:0 0 8px var(--play-green),0 0 2px rgba(0,0,0,.3)}

/* General hover accents */
body.theme-light .cdj:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px -8px rgba(60,60,80,.3),0 0 0 1px rgba(255,138,26,.15)}
body.theme-light .cdj.drop-target{border-color:var(--orange);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--orange),0 0 40px rgba(255,138,26,.4)}

/* Help tab */
body.theme-light .shortcut-grid{padding:16px}

/* ============================================================
   PRO v3 — clean, high-contrast FX + DECK FOCUS styling
   Solid colours, sharp edges, no rainbow/shimmer animations.
   Inspired by Pioneer DJM-V10 hardware panels.
   ============================================================ */

.scene-fx-panel,.beat-fx-panel{
  position:relative;padding:12px 18px !important;overflow:hidden;
  background:linear-gradient(180deg,#26262b 0%,#141418 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.5);
}
.scene-fx-panel::before,.beat-fx-panel::before{content:none}

.scene-fx-label,.beat-fx-label{
  font-family:'Orbitron',sans-serif;font-size:12px !important;letter-spacing:3px;font-weight:800;
  background:none;-webkit-text-fill-color:initial;filter:none;color:#fff;
  text-shadow:none;
  padding-left:8px;border-left:3px solid var(--orange);
}
.scene-fx-label{border-left-color:var(--pink);color:#fff}

/* Scene buttons — subtle solid tile with clean active state */
.scene-btn{
  position:relative;padding:8px 16px;font-size:10px;letter-spacing:2px;font-weight:700;
  background:#2e2e34;
  border:1px solid rgba(255,255,255,.06);color:#c8c8cc;
  border-radius:4px;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.scene-btn::before{content:none}
.scene-btn:hover{background:#3a3a42;color:#fff;border-color:rgba(255,255,255,.14)}
.scene-btn[data-scene="dubspiral"]{--sc-color:#22c088}
.scene-btn[data-scene="sweep"]{--sc-color:#d8922e}
.scene-btn[data-scene="helix"]{--sc-color:#9c32d4}
.scene-btn[data-scene="mod"]{--sc-color:#d43c78}
.scene-btn[data-scene="shimmer"]{--sc-color:#a8aab8}
.scene-btn[data-scene="plaza"]{--sc-color:#d8a820}
.scene-btn.active{
  background:var(--sc-color);color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.25);
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}

/* X-PAD — clean matte surface */
.x-pad{
  background:linear-gradient(180deg,#17171c 0%,#0a0a0e 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 22px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
}
.x-pad.active{
  border-color:var(--purple);
  box-shadow:inset 0 0 22px rgba(0,0,0,.5),0 0 0 1px rgba(200,0,255,.35);
}
.x-pad-dot{
  width:14px;height:14px;
  background:var(--purple);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
.x-pad-labels{font-size:10px;opacity:.8;font-weight:700;letter-spacing:1.5px}
.x-pad-labels .top,.x-pad-labels .bottom,.x-pad-labels .left,.x-pad-labels .right{
  color:#c8c8cc;text-shadow:none;
}

/* DEPTH knob */
.scene-fx-panel .knob-wrap::before{content:none}
.scene-fx-panel .knob-wrap .knob-label{
  color:#e0e0e4;font-weight:700;font-size:10px;letter-spacing:2px;text-shadow:none;
}
.scene-fx-panel .knob{
  background:
    radial-gradient(circle at 30% 28%,rgba(255,255,255,.22) 0%,transparent 30%),
    radial-gradient(circle at 30% 30%,#6a6a70 0%,#2a2a2e 60%,#0a0a0b 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.18),
    inset 0 -3px 5px rgba(0,0,0,.8),
    0 0 0 1px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.6);
}
.scene-fx-panel .knob-indicator{background:linear-gradient(180deg,#fff 0%,var(--pink) 100%);box-shadow:none}

/* DECK FOCUS — clean flat toolbar */
.deck-switch-bar{
  position:relative;padding:10px 16px !important;
  background:linear-gradient(180deg,#26262b 0%,#141418 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 14px rgba(0,0,0,.45);
  overflow:hidden;
}
.deck-switch-bar::before{content:none}

.dsb-label{
  font-family:'Orbitron',sans-serif;font-weight:800;font-size:11px;letter-spacing:3px;
  background:none;-webkit-text-fill-color:initial;color:#fff;filter:none;text-shadow:none;
  padding:0 10px 0 8px;border-left:3px solid var(--orange);
}
.dsb-btn{
  padding:8px 18px;font-size:11px;letter-spacing:2.5px;font-weight:700;
  background:#2e2e34;
  border:1px solid rgba(255,255,255,.06);color:#c8c8cc;
  border-radius:4px;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
  text-shadow:none;
}
.dsb-btn::before{content:none}
.dsb-btn:hover{background:#3a3a42;color:#fff;border-color:rgba(255,138,26,.35);transform:none;box-shadow:none}
.dsb-btn.active{
  background:var(--orange);color:#0a0a0a;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.2);
  text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.dsb-split{font-size:11px;letter-spacing:2px}
.dsb-all{background:#2e2e34;color:var(--orange-glow)}
.dsb-all.active{background:var(--orange);color:#0a0a0a}

.dsb-chip{
  padding:5px 12px;border-radius:4px;
  background:#17171c;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
.dsb-chip .dsb-id{font-weight:800;letter-spacing:2px;color:#fff}
.dsb-chip .dsb-bpm{color:var(--screen-glow)}
.dsb-chip.focus{border-color:var(--orange);box-shadow:none}
.dsb-chip.playing{border-color:var(--play-green);box-shadow:none}

/* Beat FX label stays orange accent bar (already set above) */
.beat-fx-label{border-left-color:var(--orange);color:#fff}

/* WORK MODE — same clean professional treatment */
body.work-mode .scene-fx-panel,body.work-mode .beat-fx-panel{
  background:linear-gradient(180deg,#28282e 0%,#15151a 100%) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.55) !important;
  backdrop-filter:none !important;
}
body.work-mode .scene-fx-panel::before,body.work-mode .beat-fx-panel::before{display:none}
body.work-mode .scene-fx-label,body.work-mode .beat-fx-label{
  color:#fff !important;background:none !important;-webkit-text-fill-color:initial !important;
  filter:none !important;text-shadow:none !important;font-size:14px !important;
  padding-left:10px;border-left:4px solid var(--pink);
}
body.work-mode .beat-fx-label{border-left-color:var(--orange)}
body.work-mode .scene-btn{
  background:#34343a !important;color:#e8e8ec !important;border-color:rgba(255,255,255,.1) !important;
  font-size:12px !important;padding:10px 16px !important;
}
body.work-mode .scene-btn:hover{background:#3e3e46 !important;color:#fff !important}
body.work-mode .scene-btn.active{
  background:var(--sc-color,var(--pink)) !important;color:#fff !important;border-color:transparent !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.25) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.3) !important;
}
body.work-mode .beat-btn{
  background:#2e2e34 !important;color:#e8e8ec !important;border:1px solid rgba(255,255,255,.08) !important;
}
body.work-mode .beat-btn.active{
  background:var(--screen-glow) !important;color:#0a0a0a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3) !important;
}
body.work-mode .fx-selector,body.work-mode .beat-display{
  background:#0a0a0b !important;color:var(--screen-glow) !important;border-color:rgba(255,255,255,.1) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6) !important;text-shadow:none !important;
}
body.work-mode .beat-display{color:var(--orange) !important;font-size:22px !important}
body.work-mode .fx-onoff{
  background:#34343a !important;border:2px solid rgba(255,255,255,.12) !important;color:#fff !important;
  text-shadow:none !important;letter-spacing:3.5px !important;padding:12px 24px !important;
}
body.work-mode .fx-onoff.active{
  background:var(--orange) !important;color:#0a0a0a !important;border-color:var(--orange-glow) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3) !important;
}
body.work-mode .tap-btn{
  background:#2e2e34 !important;border:1px solid rgba(255,138,26,.35) !important;
  color:var(--orange-glow) !important;text-shadow:none !important;
}
body.work-mode .tap-btn:active{background:var(--orange) !important;color:#0a0a0a !important;box-shadow:none !important}
body.work-mode .x-pad{
  background:linear-gradient(180deg,#15151a 0%,#080810 100%) !important;
  border:1px solid rgba(255,255,255,.1) !important;box-shadow:inset 0 0 22px rgba(0,0,0,.7) !important;
}
body.work-mode .x-pad.active{
  border-color:var(--purple) !important;
  box-shadow:inset 0 0 22px rgba(0,0,0,.55),0 0 0 1px rgba(200,0,255,.4) !important;
}
body.work-mode .x-pad-labels{font-size:11px !important}
body.work-mode .x-pad-labels .top,body.work-mode .x-pad-labels .bottom,
body.work-mode .x-pad-labels .left,body.work-mode .x-pad-labels .right{
  color:#d8d8dc !important;text-shadow:none !important;
}
body.work-mode .deck-switch-bar{
  background:linear-gradient(180deg,#28282e 0%,#15151a 100%) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  backdrop-filter:none !important;
}
body.work-mode .dsb-label{color:#fff !important;background:none !important;-webkit-text-fill-color:initial !important;filter:none !important;text-shadow:none !important;border-left-color:var(--orange)}
body.work-mode .dsb-btn{background:#34343a !important;color:#e8e8ec !important;text-shadow:none !important}
body.work-mode .dsb-btn.active{background:var(--orange) !important;color:#0a0a0a !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28) !important;text-shadow:0 1px 0 rgba(255,255,255,.2) !important}
body.work-mode .dsb-chip{background:#17171c !important;border:1px solid rgba(255,255,255,.1) !important;box-shadow:none !important}

/* Light-theme adjustments */
body.theme-light .scene-fx-panel,body.theme-light .beat-fx-panel,body.theme-light .deck-switch-bar{
  background:linear-gradient(180deg,#fff 0%,#e8e8ec 100%);
  border:1px solid rgba(0,0,0,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.08);
}
body.theme-light .scene-fx-label,body.theme-light .beat-fx-label,body.theme-light .dsb-label{color:#1a1a1c}
body.theme-light .scene-btn,body.theme-light .dsb-btn{background:#f4f4f8;color:#3a3a42;border-color:rgba(0,0,0,.08)}
body.theme-light .scene-btn:hover,body.theme-light .dsb-btn:hover{background:#ededf2;color:#1a1a1c}
body.theme-light .scene-btn.active{color:#fff;border-color:transparent}
body.theme-light .dsb-btn.active{color:#fff;background:var(--orange);border-color:transparent}
body.theme-light .dsb-chip{background:#fff;border-color:rgba(0,0,0,.1)}
body.theme-light .x-pad{background:linear-gradient(180deg,#f4f4f8 0%,#dcdce2 100%);border-color:rgba(0,0,0,.1);box-shadow:inset 0 2px 6px rgba(0,0,0,.1)}
body.theme-light .x-pad-labels .top,body.theme-light .x-pad-labels .bottom,
body.theme-light .x-pad-labels .left,body.theme-light .x-pad-labels .right{color:#4a4a52}
body.theme-light .scene-fx-panel .knob-wrap .knob-label{color:#1a1a1c}

/* ============================================================
   AUDIO EDITOR styles
   ============================================================ */
.editor-panel{display:flex;flex-direction:column;gap:12px}
.editor-waveform-wrap{
  position:relative;background:linear-gradient(180deg,#06121a 0%,#020608 100%);
  border:1px solid rgba(46,224,255,.25);border-radius:8px;padding:4px;
  box-shadow:inset 0 0 16px rgba(0,0,0,.6);height:170px;
}
.editor-waveform{width:100%;height:160px;display:block;cursor:crosshair}
.editor-marker{position:absolute;top:4px;bottom:4px;width:2px;pointer-events:auto;cursor:ew-resize}
.editor-marker-in{background:var(--play-green);box-shadow:0 0 6px var(--play-green);left:0}
.editor-marker-in::before{content:'IN';position:absolute;top:-2px;left:4px;font-family:'Orbitron',sans-serif;font-size:9px;color:var(--play-green);letter-spacing:1.5px}
.editor-marker-out{background:var(--red);box-shadow:0 0 6px var(--red);left:calc(100% - 2px)}
.editor-marker-out::before{content:'OUT';position:absolute;top:-2px;right:4px;font-family:'Orbitron',sans-serif;font-size:9px;color:var(--red);letter-spacing:1.5px}
.editor-playhead{position:absolute;top:4px;bottom:4px;width:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8);left:0;display:none;pointer-events:none}
.editor-playhead.playing{display:block}
.editor-timeline{display:flex;justify-content:space-between;align-items:center;padding:4px 10px;background:#0a0a0b;border-radius:6px;border:1px solid rgba(255,255,255,.05)}
.editor-time-label{font-family:'Share Tech Mono',monospace;font-size:13px;color:var(--orange);letter-spacing:2px}
.editor-transport{display:flex;gap:6px}
.editor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.editor-block{padding:12px;background:#0a0a0b;border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.editor-block-title{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2.5px;color:var(--screen-glow);font-weight:700;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.05)}
.editor-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.editor-row label{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim);letter-spacing:1.5px;min-width:110px}
.editor-row input[type=range]{flex:1;accent-color:var(--orange)}
.editor-row .tool-btn{flex:1}
.editor-val{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--orange-glow);letter-spacing:1.5px;min-width:60px;text-align:right}

body.theme-light .editor-block{background:#fff;border-color:rgba(0,0,0,.08)}
body.theme-light .editor-block-title{color:#1a1a1c}
body.theme-light .editor-timeline{background:#f4f4f8;border-color:rgba(0,0,0,.08)}

/* ============================================================
   MASTER METERS — twin vertical LED columns (like channel strips)
   ============================================================ */
.master-meters{
  padding:8px 10px;background:#0a0a0b;border:1px solid rgba(255,255,255,.05);
  border-radius:6px;box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
  display:flex;justify-content:center;
}
.master-meter-pair{display:flex;gap:6px;align-items:flex-end}
.master-meter-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.mm-label{font-family:'Orbitron',sans-serif;font-size:9px;color:var(--orange);font-weight:800;letter-spacing:1px}
.vu-meter.vu-master{
  width:14px;height:110px;min-width:14px;
  background:#020408;border:1px solid rgba(0,0,0,.6);
  border-radius:2px;padding:2px;
  box-shadow:inset 0 0 5px rgba(0,0,0,.9);
  display:flex !important;flex-direction:column-reverse !important;gap:1px;
}
.vu-meter.vu-master .vu-led{flex:1 1 auto;min-height:3px;border-radius:1px;width:100%}

/* Premium master L/R VU — dramatic, animated, bulletproof */
.master-vu-box{
  position:relative;display:grid;
  grid-template-columns:auto auto auto auto;
  justify-content:center;align-items:flex-end;gap:10px;
  padding:12px 14px 10px;margin-bottom:6px;
  background:radial-gradient(ellipse at center,rgba(255,138,26,.08) 0%,transparent 60%),linear-gradient(180deg,#0c0c10 0%,#050507 100%);
  border:1px solid rgba(255,138,26,.2);border-radius:8px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 6px 18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
}
/* Master VU — wide bars filling the frame, compact */
.master-vu-modern{
  position:relative;margin-bottom:8px;padding:16px 10px 8px;
  background:linear-gradient(180deg,#141418 0%,#060609 100%);
  border:1px solid rgba(255,138,26,.22);border-radius:10px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9),0 6px 22px rgba(0,0,0,.65),inset 0 0 30px rgba(255,138,26,.03);
  display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:stretch;min-height:140px;
}
.master-vu-modern::before{
  content:'MASTER';position:absolute;top:4px;left:50%;transform:translateX(-50%);
  font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:3px;
  color:rgba(255,138,26,.55);font-weight:800;pointer-events:none;
}
.master-vu-modern .mvm-scale{
  display:flex;flex-direction:column;justify-content:space-between;
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.5px;
  color:rgba(46,224,255,.7);text-align:right;padding:18px 0 12px;
}
.master-vu-modern .mvm-scale span{line-height:1;padding-right:4px;position:relative}
.master-vu-modern .mvm-scale span::after{
  content:'';position:absolute;top:50%;right:-4px;width:4px;height:1px;
  background:rgba(46,224,255,.5);
}
.master-vu-modern .mvm-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 2px}
.master-vu-modern .mvm-col{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:relative}
.master-vu-modern .mvm-chlabel{
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;letter-spacing:2px;
  color:var(--orange);text-shadow:0 0 8px rgba(255,122,0,.55);line-height:1;text-align:center;
}
.master-vu-modern .mvm-chlabel-r{color:var(--screen-glow);text-shadow:0 0 8px rgba(46,224,255,.5)}
.master-vu-modern .mvm-clip{
  width:100%;height:5px;border-radius:2px;
  background:#150505;border:1px solid rgba(255,46,46,.28);
  box-shadow:inset 0 0 2px rgba(0,0,0,.8);transition:all .08s linear;
}
.master-vu-modern .mvm-clip.hot{
  background:linear-gradient(180deg,#ff5c5c,#c01818);
  box-shadow:0 0 14px rgba(255,46,46,1),inset 0 1px 0 rgba(255,255,255,.5);
  animation:clipFlash .25s linear;
}
/* Wide master VU meter — fills column width, same LED system as channels */
.master-vu-modern .vu-meter.vu-master{
  flex:1;width:100%;min-height:100px;
  background:#000;border:1px solid #1a1a1c;border-radius:3px;
  padding:2px;box-shadow:inset 0 0 6px rgba(0,0,0,.95);
  display:flex;flex-direction:column-reverse;gap:1px;
  position:relative;
}
/* Faint reference guide lines inside each bar at key dB marks */
.master-vu-modern .vu-meter.vu-master::before{
  content:'';position:absolute;inset:2px;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg,rgba(255,46,46,.25) 0,rgba(255,46,46,.25) 1px,transparent 1px) 0 10%/100% 100%,
    linear-gradient(180deg,rgba(255,212,0,.18) 0,rgba(255,212,0,.18) 1px,transparent 1px) 0 30%/100% 100%,
    linear-gradient(180deg,rgba(255,255,255,.08) 0,rgba(255,255,255,.08) 1px,transparent 1px) 0 45%/100% 100%,
    linear-gradient(180deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) 1px,transparent 1px) 0 65%/100% 100%;
  background-repeat:no-repeat;
}
/* R channel uses cyan greens */
.master-vu-modern .vu-master-r .vu-led.on.green{
  background:var(--screen-glow);
  box-shadow:0 0 3px var(--screen-glow);
}
.master-vu-halo{
  position:absolute;inset:-6px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(28,255,143,.0) 0%,transparent 70%);
  transition:background .1s linear;z-index:0;
}
.master-vu-col{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1}
.master-vu-clip{
  width:16px;height:8px;border-radius:2px;
  background:#1a0a0a;border:1px solid rgba(255,46,46,.35);
  box-shadow:inset 0 0 3px rgba(0,0,0,.8);transition:all .08s linear;
}
.master-vu-clip.hot{background:linear-gradient(180deg,#ff4040,#c41010);box-shadow:0 0 14px rgba(255,46,46,.95),inset 0 1px 0 rgba(255,255,255,.4);animation:clipFlash .3s linear}
@keyframes clipFlash{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.vu-meter.vu-master{
  width:18px;height:140px;background:#020305;
  border:1px solid rgba(255,255,255,.08);border-radius:3px;padding:2px;
  box-shadow:inset 0 0 6px rgba(0,0,0,.95);
  display:flex;flex-direction:column-reverse;gap:1px;position:relative;
}
.master-vu-lbl{
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:900;letter-spacing:1.5px;
  color:var(--orange);text-shadow:0 0 6px rgba(255,138,26,.5);
  transition:text-shadow .08s linear,color .08s linear,transform .08s linear;
}
.master-vu-lbl.hot{color:#fff;text-shadow:0 0 14px var(--play-green),0 0 6px #fff;transform:scale(1.15)}
.master-vu-scale{
  display:flex;flex-direction:column;justify-content:space-between;
  height:140px;padding:2px 0;align-self:flex-end;
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.5px;
  color:rgba(255,255,255,.35);text-align:center;min-width:18px;
}
.master-vu-scale span{line-height:1;display:block}
.master-vu-scale span:nth-child(1){color:var(--red)}
.master-vu-scale span:nth-child(2){color:var(--yellow)}
body.theme-light .master-meters{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:inset 0 2px 4px rgba(0,0,0,.06)}

/* Deck-header — clean, non-overlapping spacing across all widths */
.deck-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 4px 8px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:10px}
.deck-header .deck-label{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.deck-header .deck-label .model{color:var(--orange);font-size:9px;margin:0;letter-spacing:2px;font-weight:900}
.deck-header .deck-label .suffix{color:#fff;font-size:10px;letter-spacing:3px;font-weight:800;opacity:.85}
.deck-header .deck-number{margin-left:auto;flex:0 0 auto}
.deck-header .deck-upload-btn,.deck-header .deck-lib-btn{flex:0 0 auto;margin-left:0 !important}
/* Icon-only UPLOAD + LIBRARY in deck header — always compact */
.deck-header .deck-upload-btn .btn-text,.deck-header .deck-lib-btn .btn-text{display:none}
.deck-header .deck-upload-btn .btn-icon,.deck-header .deck-lib-btn .btn-icon{display:inline-block;font-size:15px;line-height:1}
.deck-header .deck-upload-btn,.deck-header .deck-lib-btn{
  padding:6px 10px !important;min-width:36px;font-size:14px;letter-spacing:0;
  display:inline-flex;align-items:center;justify-content:center;
}
@media(max-width:1550px){
  .console.show-all .cdj .deck-header .deck-label .suffix{display:none}
}
.deck-header .deck-lib-btn{
  margin-left:4px;padding:6px 12px;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;font-weight:800;
  background:linear-gradient(180deg,#2a2a2e 0%,#151518 100%);
  border:1px solid rgba(28,255,143,.4);color:var(--play-green);
  border-radius:4px;cursor:pointer;transition:all .15s ease;
}
.deck-header .deck-lib-btn:hover{background:var(--play-green);color:#0a0a0a;box-shadow:0 0 14px rgba(28,255,143,.55)}
body.theme-light .deck-header .deck-lib-btn{background:linear-gradient(180deg,#fff,#e4e4e8);color:#00a656;border-color:rgba(0,166,86,.4)}
.deck-header .deck-upload-btn{
  margin-left:auto;padding:6px 10px;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;font-weight:800;
  background:linear-gradient(180deg,#2a2a2e 0%,#151518 100%);
  border:1px solid rgba(255,138,26,.45);color:var(--orange);
  border-radius:4px;cursor:pointer;transition:all .15s ease;
  display:inline-flex;align-items:center;gap:4px;
}
.deck-header .deck-upload-btn:hover{
  background:linear-gradient(180deg,#ffb366 0%,var(--orange) 60%,#c85a00 100%);color:#0a0a0a;
  box-shadow:0 0 14px rgba(255,138,26,.55),inset 0 1px 0 rgba(255,255,255,.3);
  border-color:var(--orange-glow);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.deck-header .deck-upload-btn.loading{
  background:linear-gradient(90deg,#ffb366,var(--orange),#ffb366);background-size:200% 100%;
  color:#0a0a0a;border-color:var(--orange-glow);
  animation:deckUploadPulse 1.2s linear infinite;
}
@keyframes deckUploadPulse{0%{background-position:0 0}100%{background-position:200% 0}}
body.theme-light .deck-header .deck-upload-btn{background:linear-gradient(180deg,#fff,#e4e4e8);color:var(--orange-glow);border-color:rgba(255,138,26,.5)}
body.theme-light .deck-header .deck-upload-btn:hover{background:var(--orange);color:#fff}

/* CUE/PLAY big-btn centering */
.big-btn{justify-content:center !important;align-items:center !important;text-align:center !important;padding:12px 8px !important}
.big-btn .icon,.big-btn .lbl{display:block;text-align:center;width:100%;line-height:1;text-indent:0;margin:0;padding:0}
body.theme-light .deck-header .deck-lib-btn:hover{background:#00a656;color:#fff}

/* Enhanced deck LIBRARY button — premium animated, always visible */
.deck-header .deck-lib-btn{
  margin-left:4px;padding:7px 14px;font-family:'Orbitron',sans-serif;font-size:11px;
  letter-spacing:2.5px;font-weight:900;
  background:linear-gradient(180deg,#1a3325 0%,#0a1a12 60%,#050a08 100%);
  border:1px solid rgba(28,255,143,.6);color:var(--play-green);
  border-radius:5px;cursor:pointer;transition:all .18s ease;
  box-shadow:0 0 0 1px rgba(28,255,143,.15) inset,0 2px 6px rgba(0,0,0,.5),0 0 10px rgba(28,255,143,.25);
  text-shadow:0 0 8px rgba(28,255,143,.6);
  display:inline-flex;align-items:center;gap:5px;
  position:relative;overflow:hidden;
}
.deck-header .deck-lib-btn::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(28,255,143,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.deck-header .deck-lib-btn:hover{
  background:linear-gradient(180deg,var(--play-green) 0%,#0aa05a 100%);
  color:#001a0c;border-color:#baffd9;
  box-shadow:0 0 20px rgba(28,255,143,.8),inset 0 1px 0 rgba(255,255,255,.3);
  transform:translateY(-1px);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.deck-header .deck-lib-btn:hover::before{transform:translateX(120%)}
.deck-header .deck-lib-btn:active{transform:translateY(0) scale(.97)}

/* Quick library picker modal */
.quick-lib-overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);align-items:flex-start;justify-content:center;padding-top:6vh;animation:fadeIn .18s}
.quick-lib-overlay.open{display:flex}
.quick-lib-box{
  width:min(720px,94vw);max-height:86vh;overflow:hidden;
  background:linear-gradient(180deg,#2a2a2e 0%,#14141a 100%);
  border:1px solid var(--play-green);border-radius:14px;
  display:flex;flex-direction:column;
  box-shadow:0 40px 80px rgba(0,0,0,.8),0 0 60px rgba(28,255,143,.25);
}
.quick-lib-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
.quick-lib-head h3{flex:0 0 auto;font-family:'Orbitron',sans-serif;color:var(--play-green);font-size:14px;letter-spacing:3px;margin:0}
.quick-lib-head h3 .dtarget{color:var(--orange)}
.quick-lib-head input{flex:1;padding:9px 12px;background:#0a0a0b;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:5px;font-family:'Share Tech Mono',monospace;font-size:13px}
.quick-lib-head input:focus{outline:none;border-color:var(--play-green)}
.quick-lib-head button{padding:8px 12px;background:transparent;border:none;color:var(--text-dim);font-size:18px;cursor:pointer}
.quick-lib-head button:hover{color:var(--red)}
.quick-lib-list{flex:1;overflow-y:auto;padding:6px}
.quick-lib-row{
  display:grid;grid-template-columns:28px 1fr auto 46px 36px;gap:10px;
  align-items:center;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.04);
  font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--text);cursor:pointer;
  transition:background .12s ease;
}
.quick-lib-row:hover{background:rgba(28,255,143,.06)}
.quick-lib-row .ql-num{color:var(--orange)}
.quick-lib-row .ql-title{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-lib-row .ql-artist{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.quick-lib-row .ql-bpm{color:var(--screen-glow);text-align:right}
.quick-lib-row .ql-key{color:var(--play-green);text-align:center}
body.theme-light .quick-lib-box{background:linear-gradient(180deg,#fff 0%,#f0f0f4 100%);color:#1a1a1c}
body.theme-light .quick-lib-head input{background:#f4f4f8;color:#1a1a1c;border-color:rgba(0,0,0,.15)}
body.theme-light .quick-lib-row{color:#1a1a1c;border-bottom-color:rgba(0,0,0,.05)}
body.theme-light .quick-lib-row .ql-title{color:#1a1a1c}

/* ============================================================
   PRO SAMPLER UI — banks, edit panel, step sequencer
   ============================================================ */
.bank-switcher{display:inline-flex;gap:3px;padding:3px;background:#050506;border:1px solid #2a2a2e;border-radius:4px}
.bank-btn{padding:6px 14px;background:transparent;border:none;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2.5px;font-weight:800;border-radius:3px;cursor:pointer}
.bank-btn:hover{color:var(--text)}
.bank-btn.active{background:linear-gradient(180deg,var(--orange),#c85a00);color:#0a0a0a;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.sample-pad.selected{outline:2px solid var(--orange);outline-offset:2px}
.sample-pad .pad-fx{position:absolute;top:4px;right:4px;font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(255,255,255,.55);letter-spacing:1px;line-height:1}
.sample-pad .pad-loop,.sample-pad .pad-rev{position:absolute;bottom:4px;font-family:'Share Tech Mono',monospace;font-size:8px;color:var(--play-green);letter-spacing:1px}
.sample-pad .pad-loop{left:4px}
.sample-pad .pad-rev{right:4px;color:var(--pink)}
.sampler-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:900px){.sampler-tools{grid-template-columns:1fr}}
.sampler-tool-block{padding:12px;background:#0a0a0b;border:1px solid rgba(255,255,255,.06);border-radius:8px}
.sampler-tool-title{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2.5px;color:var(--orange);font-weight:800;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.05)}
.sampler-tool-title span{color:var(--screen-glow);font-weight:700}
.se-grid{display:flex;flex-direction:column;gap:6px}
.se-row{display:flex;align-items:center;gap:8px}
.se-row label{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-dim);letter-spacing:1.5px;min-width:100px}
.se-row input[type=range]{flex:1;accent-color:var(--orange)}
.se-row select{flex:1;background:#020608;color:var(--screen-glow);border:1px solid #333;padding:5px;border-radius:3px;font-family:'Share Tech Mono',monospace;font-size:11px}
.se-row .editor-val{min-width:54px}
.se-toggles{display:flex;gap:14px;justify-content:flex-start}
.se-toggle{display:inline-flex;align-items:center;gap:6px;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:1.5px;color:var(--text);cursor:pointer;font-weight:700}
.se-toggle input{accent-color:var(--orange)}
.seq-controls{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.seq-row{display:grid;grid-template-columns:repeat(16,1fr);gap:3px}
.seq-step{aspect-ratio:1;background:linear-gradient(180deg,#1a1a1e,#0a0a0c);border:1px solid rgba(255,255,255,.05);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(255,255,255,.25);transition:all .12s ease}
.seq-step:hover{border-color:var(--orange)}
.seq-step.on{background:linear-gradient(180deg,var(--orange),#c85a00);color:#0a0a0a;border-color:var(--orange-glow);text-shadow:0 1px 0 rgba(255,255,255,.25)}
.seq-step.cur{outline:2px solid var(--play-green);outline-offset:1px;animation:seqPulse .15s ease}
.seq-step.beat{border-bottom:2px solid rgba(255,138,26,.3)}
@keyframes seqPulse{from{transform:scale(1.1)}to{transform:scale(1)}}
body.theme-light .bank-btn{color:#5a5a60}
body.theme-light .bank-btn.active{color:#fff}
body.theme-light .sampler-tool-block{background:#fff;border-color:rgba(0,0,0,.08)}
body.theme-light .seq-step{background:linear-gradient(180deg,#fff,#e8e8ec);color:rgba(0,0,0,.25)}
body.theme-light .seq-step.on{color:#fff}

/* ============================================================
   GOLD THEME — 'Vertex Luxury' premium metallic gold mixer
   ============================================================ */
body.theme-gold,body.theme-gold html{
  background:
    radial-gradient(ellipse at 20% 0%,rgba(232,196,99,.14) 0%,transparent 45%),
    radial-gradient(ellipse at 80% 100%,rgba(184,134,11,.10) 0%,transparent 45%),
    radial-gradient(ellipse at center,#17120c 0%,#0a0806 70%);
}
body.theme-gold::after{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%)}
body.theme-gold ::-webkit-scrollbar-track{background:#120e08}
body.theme-gold ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f5d76e,#8b6914);border:1px solid #6b4f1e}
body.theme-gold .header-bar{color:#f3e3b0}
body.theme-gold .brand{color:#f3e3b0;text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 20px rgba(255,215,100,.4)}
body.theme-gold .brand .max{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 45%,#8b6914 100%);color:#1a1410;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.4),0 0 16px rgba(232,196,99,.55)}
body.theme-gold .header-right{color:#c9a85a}
body.theme-gold .power-led{background:radial-gradient(circle,#fff0a8,#e8c463);box-shadow:0 0 8px rgba(232,196,99,.8)}
body.theme-gold .cdj,body.theme-gold .mixer,body.theme-gold .library,
body.theme-gold .sampler-panel,body.theme-gold .youtube-panel,body.theme-gold .playlists-panel,
body.theme-gold .ai-dj-panel,body.theme-gold .analytics-panel,body.theme-gold .midi-panel,
body.theme-gold .settings-panel,body.theme-gold .beat-fx-panel,body.theme-gold .scene-fx-panel,
body.theme-gold .deck-switch-bar,body.theme-gold .mixer-toolbar{
  background:
    linear-gradient(180deg,rgba(255,240,168,.04) 0%,rgba(255,255,255,0) 14%,rgba(0,0,0,.35) 100%),
    repeating-linear-gradient(135deg,rgba(232,196,99,.025) 0px,rgba(232,196,99,.025) 1px,transparent 1px,transparent 3px),
    linear-gradient(180deg,#26200f 0%,#120e08 100%);
  border:1px solid #6b4f1e;
  box-shadow:inset 0 1px 0 rgba(255,240,168,.25),inset 0 -1px 0 rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.35),0 18px 40px -10px rgba(0,0,0,.8),0 0 24px rgba(232,196,99,.08);
}
body.theme-gold .main-tabs{background:linear-gradient(180deg,#1f190e 0%,#0e0b06 100%);border:1px solid #6b4f1e;box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
body.theme-gold .tab-btn{color:#c9a85a}
body.theme-gold .tab-btn:hover{color:#fff0a8}
body.theme-gold .tab-btn.active{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 45%,#8b6914 100%);color:#1a1410;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 18px rgba(232,196,99,.55);text-shadow:0 1px 0 rgba(255,255,255,.3)}
body.theme-gold .screen{background:linear-gradient(180deg,#0a0806 0%,#000 100%);border:1px solid #6b4f1e;box-shadow:inset 0 0 12px rgba(0,0,0,.9),0 0 8px rgba(232,196,99,.14)}
body.theme-gold .jog-center-screen{background:radial-gradient(circle,#120e08 0%,#000 100%);border:1px solid #6b4f1e;box-shadow:inset 0 0 20px rgba(0,0,0,.9)}
body.theme-gold .track-title{color:#ffd97a;text-shadow:0 0 10px rgba(255,215,100,.7)}
body.theme-gold .screen-bpm{color:#fff0a8;text-shadow:0 0 12px rgba(255,215,100,.8)}
body.theme-gold .screen-key{color:#e8c463}
body.theme-gold .master-bpm{background:#000;border:1px solid #6b4f1e;color:#fff0a8;text-shadow:0 0 10px rgba(255,215,100,.8)}
body.theme-gold .jog-center-screen .bpm-display{color:#fff0a8;text-shadow:0 0 10px rgba(255,215,100,.8)}
body.theme-gold .jog-center-screen .bpm-sub,body.theme-gold .jog-center-screen .deck-badge{color:#e8c463}
body.theme-gold .deck-number{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 45%,#8b6914 100%);color:#1a1410;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px rgba(0,0,0,.6),0 0 10px rgba(232,196,99,.4)}
body.theme-gold .deck-label{color:#f3e3b0}
body.theme-gold .deck-label .model{color:#e8c463}
body.theme-gold .jog-outer{background:radial-gradient(circle,#2a2112 0%,#0a0806 100%);border:2px solid #6b4f1e;box-shadow:inset 0 2px 8px rgba(0,0,0,.8),0 4px 12px rgba(0,0,0,.6)}
body.theme-gold .jog-platter{background:radial-gradient(circle,#3a2e1a 0%,#16110a 70%,#0a0806 100%);box-shadow:inset 0 0 30px rgba(0,0,0,.8),inset 0 2px 4px rgba(255,240,168,.12)}
body.theme-gold .jog-platter-disc{background:repeating-radial-gradient(circle,rgba(255,240,168,.06) 0px,rgba(255,240,168,.06) 1px,transparent 1px,transparent 3px),radial-gradient(circle,#6b4f1e 0%,#2a1f10 100%)}
body.theme-gold .jog-indicator{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 60%,#8b6914 100%);box-shadow:0 0 6px rgba(0,0,0,.6),0 0 14px rgba(255,215,100,.9)}
body.theme-gold .knob{background:radial-gradient(circle at 40% 30%,#fff0a8 0%,#e8c463 25%,#8b6914 70%,#4a3510 100%);border:1px solid #2a1f10;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.7),0 3px 6px rgba(0,0,0,.7),0 0 10px rgba(232,196,99,.18)}
body.theme-gold .knob-indicator{background:linear-gradient(180deg,#fff0a8 0%,#fff 60%,#e8c463 100%);box-shadow:0 0 4px rgba(0,0,0,.6),0 0 6px rgba(255,215,100,.6)}
body.theme-gold .knob-label{color:#c9a85a;font-weight:700;letter-spacing:1.5px}
body.theme-gold .vu-meter{background:#000;border:1px solid #6b4f1e;box-shadow:inset 0 0 6px rgba(0,0,0,.9),0 0 4px rgba(232,196,99,.12)}
body.theme-gold .vu-led{background:#08060a}
body.theme-gold .vu-led.on.green{background:linear-gradient(90deg,#8b6914,#f5d76e);box-shadow:0 0 6px rgba(245,215,110,.9),inset 0 0 2px rgba(255,255,255,.35)}
body.theme-gold .vu-led.on.yellow{background:linear-gradient(90deg,#c8a400,#ffed4e);box-shadow:0 0 6px rgba(255,237,78,.9),inset 0 0 2px rgba(255,255,255,.35)}
body.theme-gold .vu-led.on.red{background:linear-gradient(90deg,#c83c3c,#ff6b4a);box-shadow:0 0 7px rgba(255,107,74,.95),inset 0 0 2px rgba(255,255,255,.35)}
body.theme-gold .fader-wrap,body.theme-gold .crossfader-track,body.theme-gold .tempo-slider{background:linear-gradient(180deg,#0a0806 0%,#1a1410 100%);border:1px solid #6b4f1e;box-shadow:inset 0 2px 5px rgba(0,0,0,.8)}
body.theme-gold .fader-handle,body.theme-gold .tempo-handle,body.theme-gold .crossfader-handle{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 45%,#8b6914 100%);border:1px solid #2a1f10;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 6px rgba(0,0,0,.8),0 0 10px rgba(232,196,99,.3)}
body.theme-gold .big-btn,body.theme-gold .loop-btn,body.theme-gold .jump-btn,body.theme-gold .util-btn,
body.theme-gold .beat-btn,body.theme-gold .scene-btn,body.theme-gold .pad-mode-btn,
body.theme-gold .tempo-btn,body.theme-gold .step-btn,body.theme-gold .mic-btn,
body.theme-gold .cue-btn,body.theme-gold .compact-btn,body.theme-gold .cue-hp-btn,
body.theme-gold .automix-btn,body.theme-gold .dsb-btn,body.theme-gold .search-src-btn,
body.theme-gold .studio-preset-btn,body.theme-gold .tool-btn,body.theme-gold .assign-btn,
body.theme-gold .curve-btn,body.theme-gold .ai-dj-btn{
  background:linear-gradient(180deg,#2a2112 0%,#120e08 100%);border:1px solid #6b4f1e;color:#e8c463;
  box-shadow:inset 0 1px 0 rgba(255,240,168,.15),inset 0 -2px 3px rgba(0,0,0,.7),0 2px 5px rgba(0,0,0,.6);text-shadow:0 1px 0 rgba(0,0,0,.6)
}
body.theme-gold .big-btn:hover,body.theme-gold .loop-btn:hover,body.theme-gold .jump-btn:hover,
body.theme-gold .util-btn:hover,body.theme-gold .beat-btn:hover,body.theme-gold .scene-btn:hover,
body.theme-gold .pad-mode-btn:hover{filter:brightness(1.2);border-color:#e8c463}
body.theme-gold .big-btn.cue.active{background:linear-gradient(180deg,#fff0a8 0%,#ffcf40 50%,#8b6914 100%);color:#1a1410;border-color:#fff0a8;box-shadow:0 0 24px rgba(255,207,64,.9),inset 0 1px 0 rgba(255,255,255,.5)}
body.theme-gold .big-btn.play.active{background:linear-gradient(180deg,#fff0a8 0%,#f5d76e 50%,#8b6914 100%);color:#1a1410;border-color:#fff0a8;box-shadow:0 0 24px rgba(245,215,110,.9),inset 0 1px 0 rgba(255,255,255,.5);animation:playPulse 1s ease-in-out infinite}
body.theme-gold .loop-btn.active{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 55%,#8b6914 100%);color:#1a1410;box-shadow:0 0 16px rgba(232,196,99,.8)}
body.theme-gold .beat-btn.active{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 55%,#8b6914 100%);color:#1a1410;box-shadow:0 0 16px rgba(232,196,99,.8)}
body.theme-gold .scene-btn.active{background:linear-gradient(180deg,#fff0a8 0%,#e6b25a 55%,#8b6914 100%);color:#1a1410;box-shadow:0 0 16px rgba(230,178,90,.8)}
body.theme-gold .util-btn.sync.active{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 100%);color:#1a1410}
body.theme-gold .util-btn.keylock.active{background:linear-gradient(180deg,#fff0a8 0%,#f5d76e 100%);color:#1a1410}
body.theme-gold .util-btn.quantize.active{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 100%);color:#1a1410}
body.theme-gold .util-btn.slip.active{background:linear-gradient(180deg,#ffd97a 0%,#e6b25a 100%);color:#1a1410}
body.theme-gold .util-btn.reverse.active{background:linear-gradient(180deg,#ff9c6b 0%,#c83c3c 100%);color:#fff}
body.theme-gold .fx-onoff{background:linear-gradient(180deg,#1a1410 0%,#0a0806 100%);border:2px solid #6b4f1e;color:#e8c463}
body.theme-gold .fx-onoff.active{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 55%,#8b6914 100%);color:#1a1410;border-color:#fff0a8;box-shadow:0 0 16px rgba(232,196,99,.7)}
body.theme-gold .cue-btn.active{background:linear-gradient(180deg,#fff0a8 0%,#ffcf40 55%,#8b6914 100%) !important;color:#1a1410 !important;border-color:#fff0a8;box-shadow:0 0 22px rgba(255,207,64,.85),inset 0 1px 0 rgba(255,255,255,.45)}
body.theme-gold .sample-pad{background:linear-gradient(180deg,#2a2112 0%,#120e08 100%);border:1px solid #6b4f1e;color:#e8c463;box-shadow:inset 0 1px 0 rgba(255,240,168,.15),inset 0 -3px 5px rgba(0,0,0,.7),0 3px 6px rgba(0,0,0,.6)}
body.theme-gold .sample-pad .pad-num{color:#fff0a8}
body.theme-gold .sample-pad .pad-name{color:#c9a85a}
body.theme-gold .sample-pad.playing{box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 0 32px rgba(232,196,99,.9),0 0 3px rgba(255,240,168,.9)}
body.theme-gold input,body.theme-gold select,body.theme-gold textarea{background:#120e08;color:#f3e3b0;border:1px solid #6b4f1e}
body.theme-gold input:focus,body.theme-gold select:focus{border-color:#fff0a8;outline:none;box-shadow:0 0 0 3px rgba(232,196,99,.25)}
body.theme-gold .url-input,body.theme-gold .search-input,body.theme-gold .yt-input{background:#120e08;color:#f3e3b0}
body.theme-gold .fx-selector{background:#000;color:#ffd97a;border-color:#6b4f1e}
body.theme-gold .library-title,body.theme-gold .mixer-brand,body.theme-gold .sampler-title,
body.theme-gold .modal-box h3,body.theme-gold .settings-section h3,
body.theme-gold .ai-dj-title,body.theme-gold .dsb-label{color:#fff0a8;text-shadow:0 0 8px rgba(232,196,99,.3)}
body.theme-gold .count{color:#e8c463}
body.theme-gold .setting-desc{color:#a68845}
body.theme-gold .ai-log{background:#000;color:#ffd97a;border-color:#6b4f1e}
body.theme-gold .playlist-card,body.theme-gold .session-card,body.theme-gold .stat-card,body.theme-gold .midi-device,body.theme-gold .shortcut-item{background:linear-gradient(180deg,#1f190e 0%,#0e0b06 100%);border:1px solid #6b4f1e;color:#f3e3b0}
body.theme-gold .playlist-card h4,body.theme-gold .session-name,body.theme-gold .stat-card .stat-value{color:#fff0a8}
body.theme-gold .pl-meta,body.theme-gold .session-meta{color:#c9a85a}
body.theme-gold .stat-card .stat-value{background:linear-gradient(180deg,#fff0a8 0%,#8b6914 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
body.theme-gold .track-row{background:#120e08;border:1px solid transparent;color:#f3e3b0}
body.theme-gold .track-row:hover{background:#1f190e;border-color:#e8c463;box-shadow:0 4px 10px rgba(0,0,0,.5),0 0 14px rgba(232,196,99,.2)}
body.theme-gold .track-row .t-title{color:#fff0a8}
body.theme-gold .track-row .t-artist{color:#c9a85a}
body.theme-gold .track-list-header{color:#e8c463;border-bottom:1px solid rgba(232,196,99,.3)}
body.theme-gold .toast{background:linear-gradient(180deg,#2a2112 0%,#120e08 100%);color:#f3e3b0;border:1px solid #e8c463;box-shadow:0 12px 30px rgba(0,0,0,.7),0 0 22px rgba(232,196,99,.3)}
body.theme-gold .modal-box{background:linear-gradient(180deg,#2a2112 0%,#120e08 100%);color:#f3e3b0;border:1px solid #6b4f1e;box-shadow:0 40px 80px rgba(0,0,0,.8),0 0 40px rgba(232,196,99,.18)}
body.theme-gold .modal-overlay{background:rgba(10,8,6,.85)}
body.theme-gold .studio-eq-canvas,body.theme-gold .studio-spectrum{background:linear-gradient(180deg,#0a0806 0%,#000 100%)}
body.theme-gold .studio-block{background:#1a1410;border-color:#6b4f1e}
body.theme-gold .studio-presets,body.theme-gold .studio-eq,body.theme-gold .studio-spectrum-wrap{background:#120e08;border-color:#6b4f1e}
body.theme-gold .studio-block-title{color:#fff0a8;border-bottom-color:#6b4f1e}
body.theme-gold .channel-label{color:#e8c463}
body.theme-gold .compact-decks{background:#0e0b06;border-color:#6b4f1e}
body.theme-gold .compact-deck{background:#1a1410;border-color:#6b4f1e}
body.theme-gold .compact-deck-title{background:#000;color:#ffd97a;border-color:#6b4f1e}
body.theme-gold .isolator-panel{background:#1f170a;border-color:rgba(232,196,99,.35)}
body.theme-gold .master-section,body.theme-gold .color-fx-row,body.theme-gold .color-fx-grid,
body.theme-gold .crossfader-section,body.theme-gold .headphone-section,body.theme-gold .mic-section,
body.theme-gold .automix-panel{background:#120e08;border:1px solid #6b4f1e}
body.theme-gold .dsb-btn{background:linear-gradient(180deg,#2a2112 0%,#120e08 100%);border:1px solid #6b4f1e;color:#e8c463}
body.theme-gold .dsb-btn.active{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 55%,#8b6914 100%);color:#1a1410;border-color:#fff0a8;box-shadow:0 0 14px rgba(232,196,99,.7)}
body.theme-gold .auth-btn{background:linear-gradient(180deg,#2a2112 0%,#120e08 100%);border:1px solid #e8c463;color:#fff0a8}
body.theme-gold .rec-btn{background:linear-gradient(180deg,#2a1818 0%,#120808 100%);border-color:#c83c3c;color:#ff8a8a}
body.theme-gold .rec-btn.recording{background:linear-gradient(180deg,#ff6060 0%,#c83c3c 100%);color:#fff}
body.theme-gold .toggle-switch{background:#2a2112;border:1px solid #6b4f1e}
body.theme-gold .toggle-switch.on{background:linear-gradient(180deg,#fff0a8 0%,#e8c463 100%);border-color:#fff0a8;box-shadow:0 0 10px rgba(232,196,99,.6)}
body.theme-gold .master-meters{background:#000;border-color:#6b4f1e;box-shadow:inset 0 2px 6px rgba(0,0,0,.9)}
body.theme-gold .cdj[data-deck]{--deck-accent:#e8c463;--deck-accent-rgb:232,196,99}
body.theme-gold .quick-lib-box{background:linear-gradient(180deg,#2a2112 0%,#120e08 100%);color:#f3e3b0;border:1px solid #6b4f1e}
body.theme-gold .quick-lib-head input{background:#120e08;color:#f3e3b0;border-color:#6b4f1e}
body.theme-gold .quick-lib-row{color:#f3e3b0;border-bottom-color:rgba(232,196,99,.15)}
body.theme-gold .quick-lib-row .ql-title{color:#fff0a8}
body.theme-gold .bank-btn{color:#c9a85a}
body.theme-gold .bank-btn.active{color:#1a1410;background:linear-gradient(180deg,#fff0a8 0%,#e8c463 100%)}
body.theme-gold .sampler-tool-block{background:#1a1410;border-color:#6b4f1e}
body.theme-gold .seq-step{background:linear-gradient(180deg,#1a1410,#0a0806);color:rgba(255,240,168,.25);border:1px solid #6b4f1e}
body.theme-gold .seq-step.on{color:#1a1410;background:linear-gradient(180deg,#fff0a8 0%,#e8c463 100%);box-shadow:0 0 10px rgba(232,196,99,.7)}
body.theme-gold .deck-header .deck-lib-btn{background:linear-gradient(180deg,#2a2112,#120e08);color:#f5d76e;border-color:#6b4f1e}
body.theme-gold .deck-header .deck-lib-btn:hover{background:linear-gradient(180deg,#fff0a8,#e8c463);color:#1a1410}
body.theme-gold .deck-header .deck-upload-btn{background:linear-gradient(180deg,#2a2112,#120e08);color:#e8c463;border-color:#6b4f1e}
body.theme-gold .deck-header .deck-upload-btn:hover{background:linear-gradient(180deg,#fff0a8,#e8c463);color:#1a1410}
body.theme-gold .rgb-ambient{background:linear-gradient(90deg,#8b6914 0%,#e8c463 20%,#fff0a8 50%,#e8c463 80%,#8b6914 100%);box-shadow:0 0 20px rgba(232,196,99,.6)}

/* ============================================================
   PIONEER THEME — authentic CDJ-3000 club-standard look:
   matte graphite body, brushed-aluminum silver jog rim,
   glossy black platter, Pioneer signature orange accents.
   ============================================================ */
body.theme-pioneer{
  --orange:#ff9020;--orange-glow:#ffb060;--cue-orange:#ff9020;--play-green:#3de55f;
  --screen-glow:#2ed5ff;--yellow:#ffc840;--red:#ff3c3c;--purple:#b07aff;--pink:#ff4faa;
  --text:#e6e6ea;--text-dim:#8a8a92;--bg:#060608;--deck-bg:#14141a;--deck-panel:#1a1a20;--deck-border:#2a2a30;
}
body.theme-pioneer,body.theme-pioneer html{background:radial-gradient(ellipse at 20% 0%,rgba(255,144,32,.04) 0%,transparent 38%),radial-gradient(ellipse at center,#12121a 0%,#040406 80%)}
body.theme-pioneer::after{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%)}
body.theme-pioneer ::-webkit-scrollbar-track{background:#0a0a0c}
body.theme-pioneer ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#505058,#24242a);border:1px solid #2a2a30}
body.theme-pioneer .header-bar{color:#e6e6ea}
body.theme-pioneer .brand{color:#e6e6ea;text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 18px rgba(255,144,32,.25)}
body.theme-pioneer .brand .max{background:linear-gradient(180deg,#ffc080 0%,#ff9020 50%,#c35a00 100%);color:#1a0800;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.5),0 0 14px rgba(255,144,32,.55)}
body.theme-pioneer .header-right{color:#8a8a92}
body.theme-pioneer .power-led{background:radial-gradient(circle,#ffc080,#ff9020);box-shadow:0 0 8px rgba(255,144,32,.9)}
body.theme-pioneer .cdj,body.theme-pioneer .mixer,body.theme-pioneer .library,
body.theme-pioneer .sampler-panel,body.theme-pioneer .youtube-panel,body.theme-pioneer .playlists-panel,
body.theme-pioneer .ai-dj-panel,body.theme-pioneer .analytics-panel,body.theme-pioneer .midi-panel,
body.theme-pioneer .settings-panel,body.theme-pioneer .beat-fx-panel,body.theme-pioneer .scene-fx-panel,
body.theme-pioneer .deck-switch-bar,body.theme-pioneer .mixer-toolbar{
  background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,transparent 6%,transparent calc(100% - 2px),rgba(0,0,0,.55) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.008) 0px,rgba(255,255,255,.008) 1px,transparent 1px,transparent 3px),linear-gradient(180deg,#1e1e22 0%,#131317 50%,#0a0a0c 100%);
  border:1px solid #2a2a30;border-top-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.55),0 18px 40px -10px rgba(0,0,0,.88)
}
body.theme-pioneer .main-tabs{background:linear-gradient(180deg,#1e1e22 0%,#0c0c10 100%);border:1px solid #2a2a30;box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
body.theme-pioneer .tab-btn{color:#8a8a92}
body.theme-pioneer .tab-btn:hover{color:#e6e6ea}
body.theme-pioneer .tab-btn.active{background:linear-gradient(180deg,#ffc080 0%,#ff9020 45%,#c35a00 100%);color:#1a0800;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 16px rgba(255,144,32,.55);text-shadow:0 1px 0 rgba(255,255,255,.25)}
body.theme-pioneer .screen{background:linear-gradient(180deg,#05050a 0%,#000 100%);border:2px solid #0c0c10;box-shadow:inset 0 0 14px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07),0 0 10px rgba(46,213,255,.08)}
body.theme-pioneer .jog-center-screen{background:radial-gradient(circle,#0a0a10 0%,#000 100%);border:2px solid #0c0c10;box-shadow:inset 0 0 22px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
body.theme-pioneer .track-title{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.45)}
body.theme-pioneer .screen-bpm{color:#2ed5ff;text-shadow:0 0 12px rgba(46,213,255,.9)}
body.theme-pioneer .screen-key{color:#ff9020}
body.theme-pioneer .master-bpm{background:#000;border:1px solid #2a2a30;color:#2ed5ff;text-shadow:0 0 10px rgba(46,213,255,.85)}
body.theme-pioneer .jog-center-screen .bpm-display{color:#2ed5ff;text-shadow:0 0 10px rgba(46,213,255,.85)}
body.theme-pioneer .jog-center-screen .bpm-sub,body.theme-pioneer .jog-center-screen .deck-badge{color:#e6e6ea}
body.theme-pioneer .deck-number{background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,transparent 14%,transparent 55%,rgba(0,0,0,.45) 100%),linear-gradient(180deg,#d0d0d6 0%,#808088 40%,#40404a 72%,#1a1a20 100%);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.55),0 -1px 0 rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.7)}
body.theme-pioneer .deck-label{color:#e6e6ea}
body.theme-pioneer .deck-label .model{color:#ff9020;text-shadow:0 0 8px rgba(255,144,32,.35)}
body.theme-pioneer .jog-outer{background:radial-gradient(circle at 50% 5%,rgba(255,255,255,.65) 0%,transparent 22%),radial-gradient(circle at 50% 95%,rgba(0,0,0,.7) 0%,transparent 30%),conic-gradient(from 0deg,#6a6a72 0deg,#9a9aa2 28deg,#d4d4da 58deg,#f0f0f4 88deg,#c8c8ce 118deg,#8a8a92 150deg,#b4b4ba 190deg,#6a6a72 220deg,#a8a8b0 260deg,#d8d8de 300deg,#8a8a92 340deg,#6a6a72 360deg);border:3px solid #06060a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 0 2px rgba(0,0,0,.75),inset 0 2px 12px rgba(0,0,0,.7),0 4px 18px rgba(0,0,0,.88),0 0 0 1px rgba(255,255,255,.1)}
body.theme-pioneer .jog-platter{background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.22) 0%,transparent 30%),radial-gradient(circle at 50% 92%,rgba(0,0,0,.8) 0%,transparent 30%),radial-gradient(circle,#1a1a20 0%,#0a0a0e 68%,#000 100%);box-shadow:inset 0 0 44px rgba(0,0,0,.96),inset 0 2px 6px rgba(255,255,255,.12),0 0 0 2px rgba(255,255,255,.04)}
body.theme-pioneer .jog-platter-disc{background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.035) 0deg,transparent 3deg,transparent 6deg),radial-gradient(circle at 50% 35%,rgba(255,80,180,.55) 0%,transparent 14%),radial-gradient(circle at 50% 55%,rgba(46,213,255,.45) 0%,transparent 14%),radial-gradient(circle,#141418 0%,#05050a 72%,#000 100%)}
body.theme-pioneer .jog-indicator{background:linear-gradient(180deg,#fff 0%,#ffc080 35%,#ff9020 70%,#c35a00 100%);box-shadow:0 0 8px rgba(0,0,0,.85),0 0 20px rgba(255,144,32,.98),0 0 4px rgba(255,255,255,.9)}
body.theme-pioneer .knob{background:radial-gradient(ellipse 55% 28% at 45% 18%,rgba(255,255,255,.6) 0%,rgba(255,255,255,.2) 30%,transparent 58%),radial-gradient(circle at 50% 108%,rgba(0,0,0,.85) 0%,transparent 48%),radial-gradient(circle at 40% 35%,#5a5a62 0%,#2c2c32 35%,#141418 70%,#06060a 100%);border:1px solid #04040a;box-shadow:inset 0 2px 1px rgba(255,255,255,.3),inset 0 -3px 6px rgba(0,0,0,.9),0 3px 7px rgba(0,0,0,.85)}
body.theme-pioneer .knob-indicator{background:linear-gradient(180deg,#fff 0%,#ffc080 50%,#ff9020 100%);box-shadow:0 0 4px rgba(0,0,0,.8),0 0 10px rgba(255,144,32,.9)}
body.theme-pioneer .knob-label{color:#9a9aa0;font-weight:700;letter-spacing:1.8px;text-shadow:0 1px 0 rgba(0,0,0,.85)}
body.theme-pioneer .vu-meter{background:#000;border:1px solid #2a2a30;box-shadow:inset 0 0 6px rgba(0,0,0,.95)}
body.theme-pioneer .vu-led{background:#08080a}
body.theme-pioneer .vu-led.on.green{background:linear-gradient(90deg,#15a030,#3de55f);box-shadow:0 0 6px rgba(61,229,95,.9),inset 0 0 2px rgba(255,255,255,.3)}
body.theme-pioneer .vu-led.on.yellow{background:linear-gradient(90deg,#c89000,#ffc840);box-shadow:0 0 6px rgba(255,200,64,.9),inset 0 0 2px rgba(255,255,255,.3)}
body.theme-pioneer .vu-led.on.red{background:linear-gradient(90deg,#c82020,#ff4a4a);box-shadow:0 0 7px rgba(255,74,74,.95),inset 0 0 2px rgba(255,255,255,.3)}
body.theme-pioneer .fader-wrap,body.theme-pioneer .crossfader-track,body.theme-pioneer .tempo-slider{background:linear-gradient(180deg,#04040a 0%,#141418 100%);border:1px solid #2a2a30;box-shadow:inset 0 2px 6px rgba(0,0,0,.95)}
body.theme-pioneer .fader-handle,body.theme-pioneer .tempo-handle,body.theme-pioneer .crossfader-handle{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,transparent 18%,transparent 82%,rgba(0,0,0,.45) 100%),linear-gradient(180deg,#d8d8de 0%,#a0a0a8 25%,#606068 60%,#2a2a30 100%);border:1px solid #04040a;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.88)}
body.theme-pioneer .big-btn,body.theme-pioneer .loop-btn,body.theme-pioneer .jump-btn,body.theme-pioneer .util-btn,
body.theme-pioneer .beat-btn,body.theme-pioneer .scene-btn,body.theme-pioneer .pad-mode-btn,
body.theme-pioneer .tempo-btn,body.theme-pioneer .step-btn,body.theme-pioneer .mic-btn,
body.theme-pioneer .cue-btn,body.theme-pioneer .compact-btn,body.theme-pioneer .cue-hp-btn,
body.theme-pioneer .automix-btn,body.theme-pioneer .dsb-btn,body.theme-pioneer .search-src-btn,
body.theme-pioneer .studio-preset-btn,body.theme-pioneer .tool-btn,body.theme-pioneer .assign-btn,
body.theme-pioneer .curve-btn,body.theme-pioneer .ai-dj-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 30%,rgba(0,0,0,.35) 100%),linear-gradient(180deg,#3a3a42 0%,#1e1e24 55%,#0c0c10 100%);
  border:1px solid #04040a;border-top-color:rgba(255,255,255,.22);color:#e6e6ea;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 4px rgba(0,0,0,.75),0 2px 5px rgba(0,0,0,.7);
  text-shadow:0 1px 0 rgba(0,0,0,.9)
}
body.theme-pioneer .big-btn:hover,body.theme-pioneer .loop-btn:hover,body.theme-pioneer .jump-btn:hover,
body.theme-pioneer .util-btn:hover,body.theme-pioneer .beat-btn:hover,body.theme-pioneer .scene-btn:hover,
body.theme-pioneer .pad-mode-btn:hover{filter:brightness(1.25);border-color:#ff9020}
body.theme-pioneer .big-btn.cue.active{background:linear-gradient(180deg,#ffd4a0 0%,#ff9020 50%,#a04000 100%);color:#1a0800;border-color:#ffc080;box-shadow:0 0 24px rgba(255,144,32,.9),inset 0 1px 0 rgba(255,255,255,.5)}
body.theme-pioneer .big-btn.play.active{background:linear-gradient(180deg,#b8ffc8 0%,#3de55f 50%,#15a030 100%);color:#00200a;border-color:#a8ffb8;box-shadow:0 0 24px rgba(61,229,95,.85),inset 0 1px 0 rgba(255,255,255,.5);animation:playPulse 1s ease-in-out infinite}
body.theme-pioneer .loop-btn.active,body.theme-pioneer .beat-btn.active,body.theme-pioneer .scene-btn.active{background:linear-gradient(180deg,#ffc080 0%,#ff9020 55%,#a04000 100%);color:#1a0800;box-shadow:0 0 18px rgba(255,144,32,.85)}
body.theme-pioneer .fx-onoff{background:linear-gradient(180deg,#1a1a20 0%,#08080a 100%);border:2px solid #2a2a30;color:#e6e6ea}
body.theme-pioneer .fx-onoff.active{background:linear-gradient(180deg,#ffc080 0%,#ff9020 55%,#a04000 100%);color:#1a0800;border-color:#ffc080;box-shadow:0 0 16px rgba(255,144,32,.75)}
body.theme-pioneer .cue-btn.active{background:linear-gradient(180deg,#ffd4a0 0%,#ff9020 55%,#a04000 100%) !important;color:#1a0800 !important;border-color:#ffc080;box-shadow:0 0 22px rgba(255,144,32,.85),inset 0 1px 0 rgba(255,255,255,.45)}
body.theme-pioneer .sample-pad{background:linear-gradient(180deg,#2a2a30 0%,#12121a 100%);border:1px solid #2a2a30;color:#e6e6ea;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 5px rgba(0,0,0,.75),0 3px 6px rgba(0,0,0,.65)}
body.theme-pioneer .sample-pad .pad-num{color:#ff9020}
body.theme-pioneer .sample-pad .pad-name{color:#8a8a92}
body.theme-pioneer .sample-pad.playing{box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 0 32px rgba(255,144,32,.9),0 0 3px rgba(255,192,128,.9)}
body.theme-pioneer input,body.theme-pioneer select,body.theme-pioneer textarea{background:#12121a;color:#e6e6ea;border:1px solid #2a2a30}
body.theme-pioneer input:focus,body.theme-pioneer select:focus{border-color:#ff9020;outline:none;box-shadow:0 0 0 3px rgba(255,144,32,.22)}
body.theme-pioneer .fx-selector{background:#000;color:#2ed5ff;border-color:#2a2a30}
body.theme-pioneer .library-title,body.theme-pioneer .mixer-brand,body.theme-pioneer .sampler-title,
body.theme-pioneer .modal-box h3,body.theme-pioneer .settings-section h3,
body.theme-pioneer .ai-dj-title,body.theme-pioneer .dsb-label{color:#ffc080;text-shadow:0 0 8px rgba(255,144,32,.3)}
body.theme-pioneer .count{color:#ff9020}
body.theme-pioneer .setting-desc{color:#6a6a72}
body.theme-pioneer .playlist-card,body.theme-pioneer .session-card,body.theme-pioneer .stat-card,body.theme-pioneer .midi-device,body.theme-pioneer .shortcut-item{background:linear-gradient(180deg,#1a1a20 0%,#0c0c10 100%);border:1px solid #2a2a30;color:#e6e6ea}
body.theme-pioneer .track-row{background:#12121a;border:1px solid transparent;color:#e6e6ea}
body.theme-pioneer .track-row:hover{background:#1e1e24;border-color:#ff9020;box-shadow:0 4px 10px rgba(0,0,0,.5),0 0 14px rgba(255,144,32,.2)}
body.theme-pioneer .track-row .t-title{color:#fff}
body.theme-pioneer .track-row .t-artist{color:#8a8a92}
body.theme-pioneer .track-list-header{color:#ff9020;border-bottom:1px solid rgba(255,144,32,.3)}
body.theme-pioneer .toast{background:linear-gradient(180deg,#1e1e22 0%,#0c0c10 100%);color:#e6e6ea;border:1px solid #ff9020;box-shadow:0 12px 30px rgba(0,0,0,.7),0 0 22px rgba(255,144,32,.25)}
body.theme-pioneer .modal-box{background:linear-gradient(180deg,#1e1e22 0%,#0c0c10 100%);color:#e6e6ea;border:1px solid #2a2a30;box-shadow:0 40px 80px rgba(0,0,0,.85)}
body.theme-pioneer .modal-overlay{background:rgba(6,6,8,.85)}
body.theme-pioneer .channel-label{color:#ff9020}
body.theme-pioneer .compact-decks{background:#0c0c10;border-color:#2a2a30}
body.theme-pioneer .compact-deck{background:#16161c;border-color:#2a2a30}
body.theme-pioneer .compact-deck-title{background:#000;color:#2ed5ff;border-color:#2a2a30}
body.theme-pioneer .isolator-panel{background:#14141a;border-color:rgba(255,144,32,.25)}
body.theme-pioneer .master-section,body.theme-pioneer .color-fx-row,body.theme-pioneer .color-fx-grid,
body.theme-pioneer .crossfader-section,body.theme-pioneer .headphone-section,body.theme-pioneer .mic-section,
body.theme-pioneer .automix-panel{background:#0e0e14;border:1px solid #2a2a30}
body.theme-pioneer .dsb-btn.active{background:linear-gradient(180deg,#ffc080 0%,#ff9020 55%,#a04000 100%);color:#1a0800;border-color:#ffc080;box-shadow:0 0 14px rgba(255,144,32,.75)}
body.theme-pioneer .auth-btn{background:linear-gradient(180deg,#1e1e22,#0c0c10);border:1px solid #ff9020;color:#ffc080}
body.theme-pioneer .rec-btn{background:linear-gradient(180deg,#1e1e22,#0c0c10);border-color:#ff3c3c;color:#ff8a8a}
body.theme-pioneer .rec-btn.recording{background:linear-gradient(180deg,#ff6060,#c82020);color:#fff}
body.theme-pioneer .toggle-switch{background:#14141a;border:1px solid #2a2a30}
body.theme-pioneer .toggle-switch.on{background:linear-gradient(180deg,#ffc080,#ff9020);border-color:#ffc080;box-shadow:0 0 10px rgba(255,144,32,.6)}
body.theme-pioneer .master-meters{background:#000;border-color:#2a2a30;box-shadow:inset 0 2px 6px rgba(0,0,0,.95)}
body.theme-pioneer .cdj[data-deck]{--deck-accent:#ff9020;--deck-accent-rgb:255,144,32}
body.theme-pioneer .rgb-ambient{background:linear-gradient(90deg,#a04000 0%,#ff9020 30%,#ffc080 50%,#ff9020 70%,#a04000 100%);box-shadow:0 0 20px rgba(255,144,32,.55)}
body.theme-pioneer .bank-btn{color:#8a8a92}
body.theme-pioneer .bank-btn.active{color:#1a0800;background:linear-gradient(180deg,#ffc080,#ff9020)}
body.theme-pioneer .seq-step{background:linear-gradient(180deg,#1a1a20,#08080c);color:rgba(230,230,234,.25);border:1px solid #2a2a30}
body.theme-pioneer .seq-step.on{color:#1a0800;background:linear-gradient(180deg,#ffc080,#ff9020);box-shadow:0 0 10px rgba(255,144,32,.7)}

/* ============================================================
   XDJ-XZ THEME — Pioneer DJ XDJ-XZ all-in-one inspired.
   Matte jet-black chassis, polished chrome jog wheels,
   cyan LCD screens, deep Pioneer orange accents, RGB pads.
   ============================================================ */
body.theme-xdjxz{
  --orange:#ff8a1e;--orange-glow:#ffb764;--cue-orange:#ff8a1e;--play-green:#2ee066;
  --screen-glow:#36d8ff;--yellow:#ffcf3a;--red:#ff3838;--purple:#b07aff;--pink:#ff4faa;
  --text:#eaeaee;--text-dim:#8a8a92;--bg:#040406;--deck-bg:#101014;--deck-panel:#16161c;--deck-border:#26262c;
}
/* Make the XDJ-XZ identity unmistakable: glowing cyan top hairline on every
   deck/mixer panel, bright chrome jog wheels with a cyan halo, neon-cyan
   inner glow on screens. */
body.theme-xdjxz .cdj::before{background:linear-gradient(90deg,transparent 0%,rgba(54,216,255,.55) 16%,rgba(54,216,255,1) 50%,rgba(54,216,255,.55) 84%,transparent 100%) !important;box-shadow:0 0 16px rgba(54,216,255,.95),0 0 32px rgba(54,216,255,.5) !important;height:4px !important;opacity:1 !important}
body.theme-xdjxz .mixer::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 0%,rgba(255,138,30,.55) 16%,rgba(255,138,30,1) 50%,rgba(255,138,30,.55) 84%,transparent 100%);box-shadow:0 0 16px rgba(255,138,30,.95),0 0 32px rgba(255,138,30,.5);pointer-events:none;z-index:3}
body.theme-xdjxz .cdj{background:linear-gradient(180deg,#0e0e14 0%,#070709 55%,#020203 100%) !important;border:1px solid rgba(54,216,255,.22) !important;box-shadow:inset 0 1px 0 rgba(54,216,255,.22),inset 0 0 80px rgba(54,216,255,.05),inset 0 -1px 0 rgba(0,0,0,.8),0 30px 90px rgba(0,0,0,.92),0 0 0 1px rgba(54,216,255,.15),0 0 60px -20px rgba(54,216,255,.4) !important}
body.theme-xdjxz .mixer{background:linear-gradient(180deg,#0e0e14 0%,#070709 55%,#020203 100%) !important;border:1px solid rgba(255,138,30,.22) !important;box-shadow:inset 0 1px 0 rgba(255,138,30,.24),inset 0 0 80px rgba(255,138,30,.05),inset 0 -1px 0 rgba(0,0,0,.82),0 30px 90px rgba(0,0,0,.94),0 0 0 1px rgba(255,138,30,.18),0 0 60px -20px rgba(255,138,30,.4) !important;position:relative}
/* Polished-chrome jog wheel — brighter and more reflective than the default. */
body.theme-xdjxz .jog-wheel{box-shadow:0 0 40px rgba(54,216,255,.32),0 0 0 1px rgba(54,216,255,.22),0 12px 38px rgba(0,0,0,.82) !important}
body.theme-xdjxz .jog-outer{background:radial-gradient(circle at 50% 6%,rgba(255,255,255,.92) 0%,transparent 22%),radial-gradient(circle at 50% 94%,rgba(0,0,0,.78) 0%,transparent 32%),conic-gradient(from 0deg,#9a9aa2 0deg,#cccdd2 24deg,#f0f0f4 56deg,#ffffff 90deg,#dcdce0 122deg,#a4a4ac 152deg,#cacace 188deg,#86868e 222deg,#bcbcc2 258deg,#eeeef2 296deg,#a0a0a8 332deg,#9a9aa2 360deg) !important;border:3px solid #04040a !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 0 0 2px rgba(0,0,0,.82),inset 0 2px 14px rgba(0,0,0,.65),0 5px 22px rgba(0,0,0,.92),0 0 0 1px rgba(255,255,255,.16) !important}
/* RGB performance pads at rest — so the deck looks lit like the XDJ-XZ. */
body.theme-xdjxz .pad-mode-btn[data-mode]{filter:saturate(1.25) brightness(1.05)}
body.theme-xdjxz .sample-pad{background:linear-gradient(180deg,#2a2a32 0%,#0e0e14 100%) !important;border:1px solid rgba(54,216,255,.12) !important;box-shadow:inset 0 1px 0 rgba(54,216,255,.18),inset 0 -3px 5px rgba(0,0,0,.78),0 3px 6px rgba(0,0,0,.7),0 0 14px rgba(54,216,255,.08) !important}
/* End XDJ-XZ identity boosters */
body.theme-xdjxz,body.theme-xdjxz html{background:radial-gradient(ellipse at 50% 0%,rgba(54,216,255,.04) 0%,transparent 42%),radial-gradient(ellipse at 50% 100%,rgba(255,138,30,.035) 0%,transparent 45%),radial-gradient(ellipse at center,#0c0c12 0%,#020203 82%)}
body.theme-xdjxz::after{background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.72) 100%)}
body.theme-xdjxz ::-webkit-scrollbar-track{background:#06060a}
body.theme-xdjxz ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5a5a64,#1e1e24);border:1px solid #26262c}
body.theme-xdjxz .header-bar{color:#eaeaee}
body.theme-xdjxz .brand{color:#f0f0f4;text-shadow:0 1px 0 rgba(0,0,0,.95),0 0 20px rgba(54,216,255,.22)}
body.theme-xdjxz .brand .max{background:linear-gradient(180deg,#ffc888 0%,#ff8a1e 50%,#a84600 100%);color:#1a0800;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.55),0 0 16px rgba(255,138,30,.6)}
body.theme-xdjxz .header-right{color:#8a8a92}
body.theme-xdjxz .power-led{background:radial-gradient(circle,#ffd0a0,#ff8a1e);box-shadow:0 0 10px rgba(255,138,30,.95),0 0 2px rgba(255,255,255,.6)}
body.theme-xdjxz .cdj,body.theme-xdjxz .mixer,body.theme-xdjxz .library,
body.theme-xdjxz .sampler-panel,body.theme-xdjxz .youtube-panel,body.theme-xdjxz .playlists-panel,
body.theme-xdjxz .ai-dj-panel,body.theme-xdjxz .analytics-panel,body.theme-xdjxz .midi-panel,
body.theme-xdjxz .settings-panel,body.theme-xdjxz .beat-fx-panel,body.theme-xdjxz .scene-fx-panel,
body.theme-xdjxz .deck-switch-bar,body.theme-xdjxz .mixer-toolbar{
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,transparent 4px,transparent calc(100% - 2px),rgba(0,0,0,.65) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.006) 0px,rgba(255,255,255,.006) 1px,transparent 1px,transparent 4px),linear-gradient(180deg,#1a1a20 0%,#0e0e12 55%,#040406 100%);
  border:1px solid #26262c;border-top-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.6),0 20px 44px -12px rgba(0,0,0,.92)
}
body.theme-xdjxz .main-tabs{background:linear-gradient(180deg,#1a1a20 0%,#08080c 100%);border:1px solid #26262c;box-shadow:inset 0 2px 6px rgba(0,0,0,.78)}
body.theme-xdjxz .tab-btn{color:#8a8a92}
body.theme-xdjxz .tab-btn:hover{color:#eaeaee}
body.theme-xdjxz .tab-btn.active{background:linear-gradient(180deg,#ffc888 0%,#ff8a1e 48%,#a84600 100%);color:#1a0800;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 18px rgba(255,138,30,.6);text-shadow:0 1px 0 rgba(255,255,255,.22)}
body.theme-xdjxz .screen{background:linear-gradient(180deg,#03060c 0%,#000 100%);border:2px solid #08080c;box-shadow:inset 0 0 16px rgba(0,0,0,.96),0 0 0 1px rgba(255,255,255,.06),0 0 14px rgba(54,216,255,.12)}
body.theme-xdjxz .jog-center-screen{background:radial-gradient(circle,#06080e 0%,#000 100%);border:2px solid #08080c;box-shadow:inset 0 0 24px rgba(0,0,0,.96),0 0 0 1px rgba(255,255,255,.06)}
body.theme-xdjxz .track-title{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.5)}
body.theme-xdjxz .screen-bpm{color:#36d8ff;text-shadow:0 0 14px rgba(54,216,255,.95)}
body.theme-xdjxz .screen-key{color:#ff8a1e;text-shadow:0 0 8px rgba(255,138,30,.45)}
body.theme-xdjxz .master-bpm{background:#000;border:1px solid #26262c;color:#36d8ff;text-shadow:0 0 11px rgba(54,216,255,.9)}
body.theme-xdjxz .jog-center-screen .bpm-display{color:#36d8ff;text-shadow:0 0 11px rgba(54,216,255,.9)}
body.theme-xdjxz .jog-center-screen .bpm-sub,body.theme-xdjxz .jog-center-screen .deck-badge{color:#eaeaee}
body.theme-xdjxz .deck-number{background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,transparent 14%,transparent 55%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#dadae0 0%,#888890 40%,#42424a 72%,#1a1a20 100%);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.75)}
body.theme-xdjxz .deck-label{color:#eaeaee}
body.theme-xdjxz .deck-label .model{color:#ff8a1e;text-shadow:0 0 8px rgba(255,138,30,.4)}
body.theme-xdjxz .jog-outer{background:radial-gradient(circle at 50% 4%,rgba(255,255,255,.78) 0%,transparent 22%),radial-gradient(circle at 50% 96%,rgba(0,0,0,.75) 0%,transparent 30%),conic-gradient(from 0deg,#7a7a82 0deg,#a8a8b0 28deg,#dcdce0 58deg,#f6f6f8 88deg,#d0d0d6 118deg,#90909a 150deg,#bcbcc2 190deg,#74747c 220deg,#b0b0b8 260deg,#e0e0e6 300deg,#90909a 340deg,#7a7a82 360deg);border:3px solid #04040a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 0 2px rgba(0,0,0,.78),inset 0 2px 12px rgba(0,0,0,.7),0 4px 20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12)}
body.theme-xdjxz .jog-platter{background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.24) 0%,transparent 30%),radial-gradient(circle at 50% 92%,rgba(0,0,0,.85) 0%,transparent 30%),radial-gradient(circle,#16161c 0%,#08080c 70%,#000 100%);box-shadow:inset 0 0 46px rgba(0,0,0,.97),inset 0 2px 6px rgba(255,255,255,.14),0 0 0 2px rgba(255,255,255,.05)}
body.theme-xdjxz .jog-platter-disc{background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.04) 0deg,transparent 3deg,transparent 6deg),radial-gradient(circle at 50% 35%,rgba(255,138,30,.55) 0%,transparent 14%),radial-gradient(circle at 50% 55%,rgba(54,216,255,.5) 0%,transparent 14%),radial-gradient(circle,#12121a 0%,#06060a 72%,#000 100%)}
body.theme-xdjxz .jog-indicator{background:linear-gradient(180deg,#fff 0%,#ffc888 35%,#ff8a1e 70%,#a84600 100%);box-shadow:0 0 8px rgba(0,0,0,.85),0 0 22px rgba(255,138,30,1),0 0 4px rgba(255,255,255,.95)}
body.theme-xdjxz .knob{background:radial-gradient(ellipse 55% 28% at 45% 18%,rgba(255,255,255,.62) 0%,rgba(255,255,255,.22) 30%,transparent 58%),radial-gradient(circle at 50% 108%,rgba(0,0,0,.88) 0%,transparent 48%),radial-gradient(circle at 40% 35%,#5e5e66 0%,#2e2e34 35%,#141418 70%,#06060a 100%);border:1px solid #04040a;box-shadow:inset 0 2px 1px rgba(255,255,255,.32),inset 0 -3px 6px rgba(0,0,0,.92),0 3px 7px rgba(0,0,0,.88)}
body.theme-xdjxz .knob-indicator{background:linear-gradient(180deg,#fff 0%,#ffc888 50%,#ff8a1e 100%);box-shadow:0 0 4px rgba(0,0,0,.85),0 0 12px rgba(255,138,30,.95)}
body.theme-xdjxz .knob-label{color:#9a9aa0;font-weight:700;letter-spacing:1.8px;text-shadow:0 1px 0 rgba(0,0,0,.88)}
body.theme-xdjxz .vu-meter{background:#000;border:1px solid #26262c;box-shadow:inset 0 0 6px rgba(0,0,0,.96)}
body.theme-xdjxz .vu-led{background:#08080a}
body.theme-xdjxz .vu-led.on.green{background:linear-gradient(90deg,#16a834,#2ee066);box-shadow:0 0 6px rgba(46,224,102,.92),inset 0 0 2px rgba(255,255,255,.32)}
body.theme-xdjxz .vu-led.on.yellow{background:linear-gradient(90deg,#c89000,#ffcf3a);box-shadow:0 0 6px rgba(255,207,58,.92),inset 0 0 2px rgba(255,255,255,.32)}
body.theme-xdjxz .vu-led.on.red{background:linear-gradient(90deg,#c81e1e,#ff4848);box-shadow:0 0 7px rgba(255,72,72,.96),inset 0 0 2px rgba(255,255,255,.32)}
body.theme-xdjxz .fader-wrap,body.theme-xdjxz .crossfader-track,body.theme-xdjxz .tempo-slider{background:linear-gradient(180deg,#03030a 0%,#12121a 100%);border:1px solid #26262c;box-shadow:inset 0 2px 6px rgba(0,0,0,.96)}
body.theme-xdjxz .fader-handle,body.theme-xdjxz .tempo-handle,body.theme-xdjxz .crossfader-handle{background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,transparent 18%,transparent 82%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#dcdce0 0%,#a4a4ac 25%,#62626a 60%,#2c2c32 100%);border:1px solid #04040a;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(0,0,0,.5),0 3px 9px rgba(0,0,0,.92)}
body.theme-xdjxz .big-btn,body.theme-xdjxz .loop-btn,body.theme-xdjxz .jump-btn,body.theme-xdjxz .util-btn,
body.theme-xdjxz .beat-btn,body.theme-xdjxz .scene-btn,body.theme-xdjxz .pad-mode-btn,
body.theme-xdjxz .tempo-btn,body.theme-xdjxz .step-btn,body.theme-xdjxz .mic-btn,
body.theme-xdjxz .cue-btn,body.theme-xdjxz .compact-btn,body.theme-xdjxz .cue-hp-btn,
body.theme-xdjxz .automix-btn,body.theme-xdjxz .dsb-btn,body.theme-xdjxz .search-src-btn,
body.theme-xdjxz .studio-preset-btn,body.theme-xdjxz .tool-btn,body.theme-xdjxz .assign-btn,
body.theme-xdjxz .curve-btn,body.theme-xdjxz .ai-dj-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,transparent 30%,rgba(0,0,0,.4) 100%),linear-gradient(180deg,#3c3c44 0%,#1e1e24 55%,#08080c 100%);
  border:1px solid #04040a;border-top-color:rgba(255,255,255,.24);color:#eaeaee;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 4px rgba(0,0,0,.78),0 2px 5px rgba(0,0,0,.72);
  text-shadow:0 1px 0 rgba(0,0,0,.92)
}
body.theme-xdjxz .big-btn:hover,body.theme-xdjxz .loop-btn:hover,body.theme-xdjxz .jump-btn:hover,
body.theme-xdjxz .util-btn:hover,body.theme-xdjxz .beat-btn:hover,body.theme-xdjxz .scene-btn:hover,
body.theme-xdjxz .pad-mode-btn:hover{filter:brightness(1.28);border-color:#ff8a1e}
body.theme-xdjxz .big-btn.cue.active{background:linear-gradient(180deg,#ffd8a8 0%,#ff8a1e 50%,#9c4000 100%);color:#1a0800;border-color:#ffc888;box-shadow:0 0 26px rgba(255,138,30,.92),inset 0 1px 0 rgba(255,255,255,.5)}
body.theme-xdjxz .big-btn.play.active{background:linear-gradient(180deg,#bcffcc 0%,#2ee066 50%,#16a834 100%);color:#00200a;border-color:#a8ffb8;box-shadow:0 0 26px rgba(46,224,102,.88),inset 0 1px 0 rgba(255,255,255,.5);animation:playPulse 1s ease-in-out infinite}
body.theme-xdjxz .loop-btn.active,body.theme-xdjxz .beat-btn.active,body.theme-xdjxz .scene-btn.active{background:linear-gradient(180deg,#ffc888 0%,#ff8a1e 55%,#9c4000 100%);color:#1a0800;box-shadow:0 0 18px rgba(255,138,30,.88)}
body.theme-xdjxz .fx-onoff{background:linear-gradient(180deg,#1a1a20 0%,#08080a 100%);border:2px solid #26262c;color:#eaeaee}
body.theme-xdjxz .fx-onoff.active{background:linear-gradient(180deg,#ffc888 0%,#ff8a1e 55%,#9c4000 100%);color:#1a0800;border-color:#ffc888;box-shadow:0 0 16px rgba(255,138,30,.78)}
body.theme-xdjxz .cue-btn.active{background:linear-gradient(180deg,#ffd8a8 0%,#ff8a1e 55%,#9c4000 100%) !important;color:#1a0800 !important;border-color:#ffc888;box-shadow:0 0 22px rgba(255,138,30,.88),inset 0 1px 0 rgba(255,255,255,.45)}
body.theme-xdjxz .sample-pad{background:linear-gradient(180deg,#2c2c34 0%,#12121a 100%);border:1px solid #26262c;color:#eaeaee;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 5px rgba(0,0,0,.78),0 3px 6px rgba(0,0,0,.68)}
body.theme-xdjxz .sample-pad .pad-num{color:#ff8a1e}
body.theme-xdjxz .sample-pad .pad-name{color:#8a8a92}
body.theme-xdjxz .sample-pad.playing{box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 0 32px rgba(255,138,30,.92),0 0 3px rgba(255,200,136,.92)}
body.theme-xdjxz input,body.theme-xdjxz select,body.theme-xdjxz textarea{background:#12121a;color:#eaeaee;border:1px solid #26262c}
body.theme-xdjxz input:focus,body.theme-xdjxz select:focus{border-color:#ff8a1e;outline:none;box-shadow:0 0 0 3px rgba(255,138,30,.24)}
body.theme-xdjxz .fx-selector{background:#000;color:#36d8ff;border-color:#26262c}
body.theme-xdjxz .library-title,body.theme-xdjxz .mixer-brand,body.theme-xdjxz .sampler-title,
body.theme-xdjxz .modal-box h3,body.theme-xdjxz .settings-section h3,
body.theme-xdjxz .ai-dj-title,body.theme-xdjxz .dsb-label{color:#ffc888;text-shadow:0 0 8px rgba(255,138,30,.32)}
body.theme-xdjxz .count{color:#ff8a1e}
body.theme-xdjxz .setting-desc{color:#6a6a72}
body.theme-xdjxz .playlist-card,body.theme-xdjxz .session-card,body.theme-xdjxz .stat-card,body.theme-xdjxz .midi-device,body.theme-xdjxz .shortcut-item{background:linear-gradient(180deg,#1a1a20 0%,#08080c 100%);border:1px solid #26262c;color:#eaeaee}
body.theme-xdjxz .track-row{background:#10101a;border:1px solid transparent;color:#eaeaee}
body.theme-xdjxz .track-row:hover{background:#1c1c24;border-color:#ff8a1e;box-shadow:0 4px 10px rgba(0,0,0,.55),0 0 14px rgba(255,138,30,.22)}
body.theme-xdjxz .track-row .t-title{color:#fff}
body.theme-xdjxz .track-row .t-artist{color:#8a8a92}
body.theme-xdjxz .track-list-header{color:#ff8a1e;border-bottom:1px solid rgba(255,138,30,.32)}
body.theme-xdjxz .toast{background:linear-gradient(180deg,#1a1a20 0%,#08080c 100%);color:#eaeaee;border:1px solid #ff8a1e;box-shadow:0 12px 30px rgba(0,0,0,.75),0 0 22px rgba(255,138,30,.28)}
body.theme-xdjxz .modal-box{background:linear-gradient(180deg,#1a1a20 0%,#08080c 100%);color:#eaeaee;border:1px solid #26262c;box-shadow:0 40px 80px rgba(0,0,0,.88)}
body.theme-xdjxz .modal-overlay{background:rgba(4,4,6,.88)}
body.theme-xdjxz .channel-label{color:#ff8a1e}
body.theme-xdjxz .compact-decks{background:#08080c;border-color:#26262c}
body.theme-xdjxz .compact-deck{background:#12121a;border-color:#26262c}
body.theme-xdjxz .compact-deck-title{background:#000;color:#36d8ff;border-color:#26262c}
body.theme-xdjxz .isolator-panel{background:#10101a;border-color:rgba(255,138,30,.28)}
body.theme-xdjxz .master-section,body.theme-xdjxz .color-fx-row,body.theme-xdjxz .color-fx-grid,
body.theme-xdjxz .crossfader-section,body.theme-xdjxz .headphone-section,body.theme-xdjxz .mic-section,
body.theme-xdjxz .automix-panel{background:#0a0a12;border:1px solid #26262c}
body.theme-xdjxz .dsb-btn.active{background:linear-gradient(180deg,#ffc888 0%,#ff8a1e 55%,#9c4000 100%);color:#1a0800;border-color:#ffc888;box-shadow:0 0 14px rgba(255,138,30,.78)}
body.theme-xdjxz .auth-btn{background:linear-gradient(180deg,#1a1a20,#08080c);border:1px solid #ff8a1e;color:#ffc888}
body.theme-xdjxz .rec-btn{background:linear-gradient(180deg,#1a1a20,#08080c);border-color:#ff3838;color:#ff8a8a}
body.theme-xdjxz .rec-btn.recording{background:linear-gradient(180deg,#ff6060,#c81e1e);color:#fff}
body.theme-xdjxz .toggle-switch{background:#10101a;border:1px solid #26262c}
body.theme-xdjxz .toggle-switch.on{background:linear-gradient(180deg,#ffc888,#ff8a1e);border-color:#ffc888;box-shadow:0 0 10px rgba(255,138,30,.65)}
body.theme-xdjxz .master-meters{background:#000;border-color:#26262c;box-shadow:inset 0 2px 6px rgba(0,0,0,.96)}
body.theme-xdjxz .cdj[data-deck]{--deck-accent:#ff8a1e;--deck-accent-rgb:255,138,30}
body.theme-xdjxz .rgb-ambient{background:linear-gradient(90deg,#9c4000 0%,#ff8a1e 25%,#36d8ff 50%,#ff8a1e 75%,#9c4000 100%);box-shadow:0 0 22px rgba(255,138,30,.55)}
body.theme-xdjxz .bank-btn{color:#8a8a92}
body.theme-xdjxz .bank-btn.active{color:#1a0800;background:linear-gradient(180deg,#ffc888,#ff8a1e)}
body.theme-xdjxz .seq-step{background:linear-gradient(180deg,#1a1a20,#08080c);color:rgba(234,234,238,.25);border:1px solid #26262c}
body.theme-xdjxz .seq-step.on{color:#1a0800;background:linear-gradient(180deg,#ffc888,#ff8a1e);box-shadow:0 0 10px rgba(255,138,30,.72)}

/* ============================================================
   EUPHONIA THEME — Pioneer DJM-A9 / Euphonia inspired.
   Matte jet-black body, copper/rose-gold knobs, amber SEND
   glow, clean white labels, subtle cyan meter accents.
   ============================================================ */
body.theme-euphonia,body.theme-euphonia html{background:radial-gradient(ellipse at 20% 0%,rgba(199,120,72,.035) 0%,transparent 40%),radial-gradient(ellipse at center,#0a0a0c 0%,#020203 85%)}
body.theme-euphonia::after{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.7) 100%)}
body.theme-euphonia ::-webkit-scrollbar-track{background:#08080a}
body.theme-euphonia ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3a3a40,#16161a);border:1px solid #24242a}
body.theme-euphonia .header-bar{color:#eaeaec}
body.theme-euphonia .brand{color:#f2f2f4;text-shadow:0 1px 0 rgba(0,0,0,.95),0 0 18px rgba(199,120,72,.25)}
body.theme-euphonia .brand .max{background:linear-gradient(180deg,#e8a778 0%,#c77848 50%,#7a3f1f 100%);color:#140a04;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(199,120,72,.45)}
body.theme-euphonia .header-right{color:#8a8a90}
body.theme-euphonia .power-led{background:radial-gradient(circle,#ffd199,#c77848);box-shadow:0 0 10px rgba(199,120,72,.85)}
body.theme-euphonia .cdj,body.theme-euphonia .mixer,body.theme-euphonia .library,
body.theme-euphonia .sampler-panel,body.theme-euphonia .youtube-panel,body.theme-euphonia .playlists-panel,
body.theme-euphonia .ai-dj-panel,body.theme-euphonia .analytics-panel,body.theme-euphonia .midi-panel,
body.theme-euphonia .settings-panel,body.theme-euphonia .beat-fx-panel,body.theme-euphonia .scene-fx-panel,
body.theme-euphonia .deck-switch-bar,body.theme-euphonia .mixer-toolbar{
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 5%,transparent calc(100% - 2px),rgba(0,0,0,.6) 100%),linear-gradient(180deg,#16161a 0%,#0b0b0d 55%,#050507 100%);
  border:1px solid #24242a;border-top-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.6),0 18px 40px -10px rgba(0,0,0,.9)
}
body.theme-euphonia .main-tabs{background:linear-gradient(180deg,#18181c 0%,#0a0a0d 100%);border:1px solid #24242a;box-shadow:inset 0 2px 6px rgba(0,0,0,.75)}
body.theme-euphonia .tab-btn{color:#8a8a90}
body.theme-euphonia .tab-btn:hover{color:#eaeaec}
body.theme-euphonia .tab-btn.active{background:linear-gradient(180deg,#e8a778 0%,#c77848 48%,#7a3f1f 100%);color:#140a04;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 16px rgba(199,120,72,.5);text-shadow:0 1px 0 rgba(255,255,255,.18)}
body.theme-euphonia .screen{background:linear-gradient(180deg,#030308 0%,#000 100%);border:2px solid #0a0a0e;box-shadow:inset 0 0 14px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06),0 0 10px rgba(158,229,255,.08)}
body.theme-euphonia .jog-center-screen{background:radial-gradient(circle,#06060a 0%,#000 100%);border:2px solid #0a0a0e;box-shadow:inset 0 0 22px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.05)}
body.theme-euphonia .track-title{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.4)}
body.theme-euphonia .screen-bpm{color:#9ee5ff;text-shadow:0 0 12px rgba(158,229,255,.85)}
body.theme-euphonia .screen-key{color:#e8a778}
body.theme-euphonia .master-bpm{background:#000;border:1px solid #24242a;color:#9ee5ff;text-shadow:0 0 10px rgba(158,229,255,.8)}
body.theme-euphonia .jog-center-screen .bpm-display{color:#9ee5ff;text-shadow:0 0 10px rgba(158,229,255,.8)}
body.theme-euphonia .jog-center-screen .bpm-sub,body.theme-euphonia .jog-center-screen .deck-badge{color:#eaeaec}
body.theme-euphonia .deck-number{background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,transparent 14%,transparent 55%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#d4a788 0%,#c77848 40%,#7a3f1f 72%,#2a1608 100%);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.55),0 -1px 0 rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.7)}
body.theme-euphonia .deck-label{color:#eaeaec}
body.theme-euphonia .deck-label .model{color:#e8a778;text-shadow:0 0 8px rgba(199,120,72,.35)}
body.theme-euphonia .jog-outer{background:radial-gradient(circle at 50% 5%,rgba(255,255,255,.5) 0%,transparent 22%),radial-gradient(circle at 50% 95%,rgba(0,0,0,.8) 0%,transparent 30%),conic-gradient(from 0deg,#4a4a50 0deg,#7a7a82 28deg,#b4b4ba 58deg,#d4d4da 88deg,#a8a8ae 118deg,#6a6a70 150deg,#8a8a90 190deg,#4a4a50 220deg,#88888e 260deg,#b8b8be 300deg,#6a6a70 340deg,#4a4a50 360deg);border:3px solid #04040a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 0 0 2px rgba(0,0,0,.8),inset 0 2px 12px rgba(0,0,0,.75),0 4px 18px rgba(0,0,0,.92),0 0 0 1px rgba(255,255,255,.08)}
body.theme-euphonia .jog-platter{background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.18) 0%,transparent 30%),radial-gradient(circle at 50% 92%,rgba(0,0,0,.85) 0%,transparent 30%),radial-gradient(circle,#101014 0%,#06060a 70%,#000 100%);box-shadow:inset 0 0 44px rgba(0,0,0,.97),inset 0 2px 6px rgba(255,255,255,.1)}
body.theme-euphonia .jog-platter-disc{background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.03) 0deg,transparent 3deg,transparent 6deg),radial-gradient(circle at 50% 35%,rgba(199,120,72,.5) 0%,transparent 14%),radial-gradient(circle at 50% 55%,rgba(158,229,255,.35) 0%,transparent 14%),radial-gradient(circle,#0e0e12 0%,#04040a 72%,#000 100%)}
body.theme-euphonia .jog-indicator{background:linear-gradient(180deg,#fff 0%,#e8a778 35%,#c77848 70%,#7a3f1f 100%);box-shadow:0 0 8px rgba(0,0,0,.88),0 0 20px rgba(199,120,72,.95),0 0 4px rgba(255,255,255,.85)}
body.theme-euphonia .knob{background:radial-gradient(ellipse 55% 28% at 45% 18%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 30%,transparent 58%),radial-gradient(circle at 50% 108%,rgba(0,0,0,.88) 0%,transparent 48%),radial-gradient(circle at 40% 35%,#e4a880 0%,#c77848 35%,#7a3f1f 72%,#3a1c0c 100%);border:1px solid #2a140a;box-shadow:inset 0 2px 1px rgba(255,235,220,.45),inset 0 -3px 6px rgba(0,0,0,.85),0 3px 7px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.05)}
body.theme-euphonia .knob-indicator{background:linear-gradient(180deg,#fff 0%,#fff0e0 50%,#e8a778 100%);box-shadow:0 0 4px rgba(0,0,0,.85),0 0 10px rgba(255,240,224,.9)}
body.theme-euphonia .knob-label{color:#9a9aa0;font-weight:700;letter-spacing:1.8px;text-shadow:0 1px 0 rgba(0,0,0,.85)}
body.theme-euphonia .vu-meter{background:#000;border:1px solid #24242a;box-shadow:inset 0 0 6px rgba(0,0,0,.95)}
body.theme-euphonia .vu-led{background:#0a0a0e}
body.theme-euphonia .fader-wrap,body.theme-euphonia .crossfader-track,body.theme-euphonia .tempo-slider{background:linear-gradient(180deg,#06060a 0%,#000 100%);border:1px solid #24242a;box-shadow:inset 0 2px 6px rgba(0,0,0,.95)}
body.theme-euphonia .fader-handle,body.theme-euphonia .tempo-handle,body.theme-euphonia .crossfader-handle{background:linear-gradient(180deg,#3a3a42 0%,#1a1a20 50%,#0a0a0e 100%);border:1px solid #050508;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 4px rgba(0,0,0,.85)}
body.theme-euphonia .big-btn,body.theme-euphonia .loop-btn,body.theme-euphonia .jump-btn,body.theme-euphonia .util-btn,
body.theme-euphonia .beat-btn,body.theme-euphonia .scene-btn,body.theme-euphonia .pad-mode-btn,
body.theme-euphonia .tempo-btn,body.theme-euphonia .step-btn,body.theme-euphonia .mic-btn,
body.theme-euphonia .cue-btn,body.theme-euphonia .compact-btn,body.theme-euphonia .cue-hp-btn,
body.theme-euphonia .automix-btn,body.theme-euphonia .dsb-btn,body.theme-euphonia .search-src-btn,
body.theme-euphonia .studio-preset-btn,body.theme-euphonia .tool-btn,body.theme-euphonia .assign-btn,
body.theme-euphonia .curve-btn,body.theme-euphonia .ai-dj-btn{background:linear-gradient(180deg,#1a1a1e 0%,#0a0a0d 100%);border:1px solid #24242a;color:#eaeaec;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 4px rgba(0,0,0,.7)}
body.theme-euphonia .big-btn:hover,body.theme-euphonia .loop-btn:hover,body.theme-euphonia .jump-btn:hover,
body.theme-euphonia .util-btn:hover,body.theme-euphonia .beat-btn:hover,body.theme-euphonia .scene-btn:hover,
body.theme-euphonia .pad-mode-btn:hover{border-color:rgba(199,120,72,.55);filter:brightness(1.05)}
body.theme-euphonia .big-btn.cue.active{background:linear-gradient(180deg,#ffd199 0%,#ffb347 55%,#8a4a0c 100%);color:#1a0a00;border-color:#ffb347;text-shadow:0 1px 0 rgba(255,255,255,.3);box-shadow:0 0 16px rgba(255,179,71,.7)}
body.theme-euphonia .big-btn.play.active{background:linear-gradient(180deg,#b4ffc8 0%,#7fffa3 55%,#1e7a3a 100%);color:#021a08;border-color:#7fffa3;text-shadow:0 1px 0 rgba(255,255,255,.3);box-shadow:0 0 16px rgba(127,255,163,.6)}
body.theme-euphonia .loop-btn.active{background:linear-gradient(180deg,#caf0ff 0%,#9ee5ff 55%,#1a6880 100%);color:#021018;border-color:#9ee5ff}
body.theme-euphonia .beat-btn.active{background:linear-gradient(180deg,#caf0ff 0%,#9ee5ff 55%,#1a6880 100%);color:#021018}
body.theme-euphonia .scene-btn.active{background:linear-gradient(180deg,#ffc0d4 0%,#ff8ab3 55%,#7a1a40 100%);color:#fff}
body.theme-euphonia .fx-onoff{background:linear-gradient(180deg,#1a1a1e 0%,#0a0a0d 100%);border:2px solid #3a3a42;color:#eaeaec}
body.theme-euphonia .fx-onoff.active{background:linear-gradient(180deg,#e8a778 0%,#c77848 55%,#7a3f1f 100%);color:#140a04;border-color:#e8a778;box-shadow:0 0 14px rgba(199,120,72,.65)}
body.theme-euphonia .util-btn.sync.active{background:linear-gradient(180deg,#e8a778,#c77848);color:#140a04}
body.theme-euphonia .rec-btn{background:linear-gradient(180deg,#1a1a1e,#0a0a0d);border-color:#ff5050;color:#ff8a8a}
body.theme-euphonia .rec-btn.recording{background:linear-gradient(180deg,#ff6060,#c82020);color:#fff}
body.theme-euphonia .sample-pad{background:linear-gradient(180deg,#18181c 0%,#0a0a0d 100%);border:1px solid #24242a;color:#eaeaec;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 4px rgba(0,0,0,.7)}
body.theme-euphonia .sample-pad .pad-num{color:#eaeaec}
body.theme-euphonia .sample-pad .pad-name{color:#8a8a90}
body.theme-euphonia input,body.theme-euphonia select,body.theme-euphonia textarea{background:#0a0a0d;color:#eaeaec;border:1px solid #24242a}
body.theme-euphonia input:focus,body.theme-euphonia select:focus{border-color:#c77848;outline:none;box-shadow:0 0 0 3px rgba(199,120,72,.25)}
body.theme-euphonia .url-input,body.theme-euphonia .search-input,body.theme-euphonia .yt-input{background:#0a0a0d;color:#eaeaec}
body.theme-euphonia .track-row{background:#0e0e12;border:1px solid transparent;color:#eaeaec}
body.theme-euphonia .track-row:hover{background:#16161a;border-color:#c77848;box-shadow:0 4px 10px rgba(0,0,0,.6),0 0 14px rgba(199,120,72,.22)}
body.theme-euphonia .track-row .t-title{color:#fff}
body.theme-euphonia .track-row .t-artist{color:#8a8a90}
body.theme-euphonia .track-list-header{color:#e8a778;border-bottom:1px solid rgba(199,120,72,.32)}
body.theme-euphonia .toast{background:linear-gradient(180deg,#16161a 0%,#0a0a0d 100%);color:#eaeaec;border:1px solid #c77848;box-shadow:0 12px 30px rgba(0,0,0,.75),0 0 22px rgba(199,120,72,.25)}
body.theme-euphonia .modal-box{background:linear-gradient(180deg,#16161a 0%,#0a0a0d 100%);color:#eaeaec;border:1px solid #24242a;box-shadow:0 40px 80px rgba(0,0,0,.9)}
body.theme-euphonia .modal-overlay{background:rgba(3,3,5,.88)}
body.theme-euphonia .channel-label{color:#e8a778}
body.theme-euphonia .compact-decks{background:#0a0a0d;border-color:#24242a}
body.theme-euphonia .compact-deck{background:#12121a;border-color:#24242a}
body.theme-euphonia .compact-deck-title{background:#000;color:#9ee5ff;border-color:#24242a}
body.theme-euphonia .isolator-panel{background:#10101a;border-color:rgba(199,120,72,.28)}
body.theme-euphonia .master-section,body.theme-euphonia .color-fx-row,body.theme-euphonia .color-fx-grid,
body.theme-euphonia .crossfader-section,body.theme-euphonia .headphone-section,body.theme-euphonia .mic-section,
body.theme-euphonia .automix-panel{background:#0b0b10;border:1px solid #24242a}
body.theme-euphonia .dsb-btn.active{background:linear-gradient(180deg,#e8a778 0%,#c77848 55%,#7a3f1f 100%);color:#140a04;border-color:#e8a778;box-shadow:0 0 14px rgba(199,120,72,.7)}
body.theme-euphonia .auth-btn{background:linear-gradient(180deg,#16161a,#0a0a0d);border:1px solid #c77848;color:#e8a778}
body.theme-euphonia .toggle-switch{background:#10101a;border:1px solid #24242a}
body.theme-euphonia .toggle-switch.on{background:linear-gradient(180deg,#e8a778,#c77848);border-color:#e8a778;box-shadow:0 0 10px rgba(199,120,72,.6)}
body.theme-euphonia .master-meters{background:#000;border-color:#24242a;box-shadow:inset 0 2px 6px rgba(0,0,0,.96)}
body.theme-euphonia .cdj[data-deck]{--deck-accent:#c77848;--deck-accent-rgb:199,120,72}
body.theme-euphonia .rgb-ambient{background:linear-gradient(90deg,#7a3f1f 0%,#c77848 30%,#ffd199 50%,#c77848 70%,#7a3f1f 100%);box-shadow:0 0 20px rgba(199,120,72,.55)}
body.theme-euphonia .bank-btn{color:#8a8a90}
body.theme-euphonia .bank-btn.active{color:#140a04;background:linear-gradient(180deg,#e8a778,#c77848)}
body.theme-euphonia .seq-step{background:linear-gradient(180deg,#14141a,#06060a);color:rgba(234,234,236,.25);border:1px solid #24242a}
body.theme-euphonia .seq-step.on{color:#140a04;background:linear-gradient(180deg,#e8a778,#c77848);box-shadow:0 0 10px rgba(199,120,72,.7)}

/* ============================================================
   PULSE / NEON THEME — interactive states.
   Mirrors ONYX button logic (hover transition + active glow)
   but with magenta/cyan/green neon palette.
   ============================================================ */
body.theme-neon .big-btn:hover,body.theme-neon .loop-btn:hover,body.theme-neon .jump-btn:hover,
body.theme-neon .util-btn:hover,body.theme-neon .beat-btn:hover,body.theme-neon .scene-btn:hover,
body.theme-neon .pad-mode-btn:hover,body.theme-neon .fx-onoff:hover,body.theme-neon .tempo-btn:hover,
body.theme-neon .dsb-btn:hover,body.theme-neon .mic-btn:hover{filter:brightness(1.18);border-color:rgba(255,0,255,.6)}
body.theme-neon .big-btn.cue.active{background:linear-gradient(180deg,#ff9cff 0%,#ff00ff 55%,#8a008a 100%);color:#14001a;border-color:#ff00ff;box-shadow:0 0 22px rgba(255,0,255,.85),inset 0 1px 0 rgba(255,255,255,.3)}
body.theme-neon .big-btn.play.active{background:linear-gradient(180deg,#9cff9c 0%,#00ff00 55%,#008a00 100%);color:#001a00;border-color:#00ff00;box-shadow:0 0 22px rgba(0,255,0,.85),inset 0 1px 0 rgba(255,255,255,.3)}
body.theme-neon .loop-btn.active{background:linear-gradient(180deg,#9cffff 0%,#00ffff 55%,#008a8a 100%);color:#001a1a;border-color:#00ffff;box-shadow:0 0 16px rgba(0,255,255,.8)}
body.theme-neon .beat-btn.active{background:linear-gradient(180deg,#9cffff 0%,#00ffff 55%,#008a8a 100%);color:#001a1a;box-shadow:0 0 14px rgba(0,255,255,.75)}
body.theme-neon .scene-btn.active{background:linear-gradient(180deg,#ff9cff 0%,#ff00ff 55%,#8a008a 100%);color:#fff;box-shadow:0 0 14px rgba(255,0,255,.75)}
body.theme-neon .fx-onoff.active{background:linear-gradient(180deg,#ff9cff 0%,#ff00ff 55%,#8a008a 100%);color:#14001a;border-color:#ff00ff;box-shadow:0 0 18px rgba(255,0,255,.85)}
body.theme-neon .util-btn.sync.active{background:linear-gradient(180deg,#ff9cff,#ff00ff);color:#14001a;box-shadow:0 0 14px rgba(255,0,255,.75)}
body.theme-neon .pad-mode-btn.active{background:linear-gradient(180deg,#ff9cff 0%,#ff00ff 55%,#8a008a 100%);color:#14001a;box-shadow:0 0 12px rgba(255,0,255,.7)}
body.theme-neon .toggle-switch.on{background:linear-gradient(180deg,#ff9cff,#ff00ff);border-color:#ff00ff;box-shadow:0 0 12px rgba(255,0,255,.7)}
body.theme-neon .dsb-btn.active{background:linear-gradient(180deg,#ff9cff 0%,#ff00ff 55%,#8a008a 100%);color:#14001a;border-color:#ff00ff;box-shadow:0 0 14px rgba(255,0,255,.75)}
body.theme-neon .bank-btn.active{color:#14001a;background:linear-gradient(180deg,#ff9cff,#ff00ff);box-shadow:0 0 10px rgba(255,0,255,.6)}
body.theme-neon .seq-step.on{color:#001a1a;background:linear-gradient(180deg,#9cffff,#00ffff);box-shadow:0 0 10px rgba(0,255,255,.7)}
body.theme-neon .rec-btn.recording{background:linear-gradient(180deg,#ff6060,#ff0040);color:#fff;box-shadow:0 0 14px rgba(255,0,64,.8)}
body.theme-neon .tab-btn.active{background:linear-gradient(180deg,#ff9cff 0%,#ff00ff 50%,#8a008a 100%);color:#14001a;box-shadow:0 0 16px rgba(255,0,255,.7);text-shadow:0 1px 0 rgba(255,255,255,.25)}
body.theme-neon .tempo-btn.active{background:linear-gradient(180deg,#ff9cff,#ff00ff);color:#14001a;box-shadow:0 0 12px rgba(255,0,255,.7)}
body.theme-neon .mic-btn.active{background:linear-gradient(180deg,#9cffff,#00ffff);color:#001a1a;box-shadow:0 0 12px rgba(0,255,255,.7)}

/* ============================================================
   HEADPHONES cue-hp-btn.active — fix for every non-ONYX theme.
   Theme group-selectors (light/gold/pioneer/euphonia) override
   the base background with higher specificity, killing the
   .active glow. These rules restore it per-palette.
   ============================================================ */
body.theme-neon .cue-hp-btn.active{background:linear-gradient(180deg,#9cffff 0%,#00ffff 60%,#008a8a 100%);color:#001a1a;border-color:#00ffff;box-shadow:0 0 14px rgba(0,255,255,.85),inset 0 1px 0 rgba(255,255,255,.35)}
body.theme-pioneer .cue-hp-btn.active{background:linear-gradient(180deg,#9cf0ff 0%,#2ed5ff 55%,#0a6a88 100%);color:#001018;border-color:#2ed5ff;box-shadow:0 0 14px rgba(46,213,255,.85),inset 0 1px 0 rgba(255,255,255,.35)}
body.theme-euphonia .cue-hp-btn.active{background:linear-gradient(180deg,#e0f5ff 0%,#9ee5ff 55%,#1a6880 100%);color:#021018;border-color:#9ee5ff;box-shadow:0 0 14px rgba(158,229,255,.8),inset 0 1px 0 rgba(255,255,255,.4)}
body.theme-gold .cue-hp-btn.active{background:linear-gradient(180deg,#fff0b8 0%,#ffd97a 55%,#a6801a 100%);color:#1a1208;border-color:#ffd97a;box-shadow:0 0 14px rgba(255,217,122,.85),inset 0 1px 0 rgba(255,255,255,.45)}
body.theme-light .cue-hp-btn.active{background:linear-gradient(180deg,#ffb366 0%,var(--orange) 55%,#c85a00 100%);color:#fff;border-color:#c85a00;box-shadow:0 0 12px rgba(255,138,26,.6),inset 0 1px 0 rgba(255,255,255,.35)}

/* ============================================================
   BLADE THEME — professional graphite chassis, every active
   control lights in a single electric-cyan digital glow.
   ============================================================ */
body.theme-blade,body.theme-blade html{background:radial-gradient(ellipse at 20% 0%,rgba(0,240,255,.05) 0%,transparent 40%),radial-gradient(ellipse at center,#0a0d16 0%,#020308 85%)}
body.theme-blade::after{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.7) 100%)}
body.theme-blade ::-webkit-scrollbar-track{background:#06080e}
body.theme-blade ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2a2e38,#12141a);border:1px solid #1e2028}
body.theme-blade .header-bar{color:#e8f5fa}
body.theme-blade .brand{color:#f2fafd;text-shadow:0 1px 0 rgba(0,0,0,.95),0 0 18px rgba(0,240,255,.35)}
body.theme-blade .brand .max{background:linear-gradient(180deg,#7ff7ff 0%,#00f0ff 50%,#0080a0 100%);color:#001014;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.6),0 0 16px rgba(0,240,255,.65)}
body.theme-blade .header-right{color:#6a7a88}
body.theme-blade .power-led{background:radial-gradient(circle,#c8fbff,#00f0ff);box-shadow:0 0 12px rgba(0,240,255,1)}
body.theme-blade .cdj,body.theme-blade .mixer,body.theme-blade .library,
body.theme-blade .sampler-panel,body.theme-blade .youtube-panel,body.theme-blade .playlists-panel,
body.theme-blade .ai-dj-panel,body.theme-blade .analytics-panel,body.theme-blade .midi-panel,
body.theme-blade .settings-panel,body.theme-blade .beat-fx-panel,body.theme-blade .scene-fx-panel,
body.theme-blade .deck-switch-bar,body.theme-blade .mixer-toolbar{
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 5%,transparent calc(100% - 2px),rgba(0,0,0,.6) 100%),linear-gradient(180deg,#181c24 0%,#0c0e14 55%,#05070c 100%);
  border:1px solid #1e2028;border-top-color:rgba(0,240,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 0 rgba(0,0,0,.6),0 18px 40px -10px rgba(0,0,0,.9),0 0 0 1px rgba(0,240,255,.05)
}
body.theme-blade .main-tabs{background:linear-gradient(180deg,#181c24 0%,#0a0d14 100%);border:1px solid #1e2028;box-shadow:inset 0 2px 6px rgba(0,0,0,.75)}
body.theme-blade .tab-btn{color:#6a7a88}
body.theme-blade .tab-btn:hover{color:#7ff7ff;text-shadow:0 0 8px rgba(0,240,255,.5)}
body.theme-blade .tab-btn.active{background:linear-gradient(180deg,#7ff7ff 0%,#00f0ff 50%,#0080a0 100%);color:#001014;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 18px rgba(0,240,255,.8);text-shadow:0 1px 0 rgba(255,255,255,.25)}
body.theme-blade .screen{background:linear-gradient(180deg,#020510 0%,#000 100%);border:2px solid #0a0e18;box-shadow:inset 0 0 14px rgba(0,0,0,.96),0 0 0 1px rgba(0,240,255,.08),0 0 12px rgba(0,240,255,.12)}
body.theme-blade .jog-center-screen{background:radial-gradient(circle,#050810 0%,#000 100%);border:2px solid #0a0e18;box-shadow:inset 0 0 22px rgba(0,0,0,.96),0 0 0 1px rgba(0,240,255,.08)}
body.theme-blade .track-title{color:#e8f5fa;text-shadow:0 0 8px rgba(0,240,255,.5)}
body.theme-blade .screen-bpm{color:#00f0ff;text-shadow:0 0 14px rgba(0,240,255,1)}
body.theme-blade .screen-key{color:#7ff7ff;text-shadow:0 0 8px rgba(0,240,255,.7)}
body.theme-blade .master-bpm{background:#000;border:1px solid #1e2028;color:#00f0ff;text-shadow:0 0 12px rgba(0,240,255,.95)}
body.theme-blade .jog-center-screen .bpm-display{color:#00f0ff;text-shadow:0 0 12px rgba(0,240,255,.95)}
body.theme-blade .jog-center-screen .bpm-sub,body.theme-blade .jog-center-screen .deck-badge{color:#7ff7ff}
body.theme-blade .deck-number{background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,transparent 14%,transparent 55%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,#1a2030 0%,#0c1018 50%,#03050a 100%);color:#00f0ff;text-shadow:0 0 10px rgba(0,240,255,.95),0 1px 0 rgba(0,0,0,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.7),0 0 12px rgba(0,240,255,.25)}
body.theme-blade .deck-label{color:#e8f5fa}
body.theme-blade .deck-label .model{color:#00f0ff;text-shadow:0 0 8px rgba(0,240,255,.65)}
body.theme-blade .jog-outer{background:radial-gradient(circle at 50% 5%,rgba(255,255,255,.4) 0%,transparent 22%),radial-gradient(circle at 50% 95%,rgba(0,0,0,.8) 0%,transparent 30%),conic-gradient(from 0deg,#2a303a 0deg,#4a5260 28deg,#7a8290 58deg,#a0a8b4 88deg,#7a8290 118deg,#4a5260 150deg,#6a7280 190deg,#2a303a 220deg,#5a626e 260deg,#8a929e 300deg,#4a5260 340deg,#2a303a 360deg);border:3px solid #050810;box-shadow:inset 0 0 0 1px rgba(0,240,255,.18),inset 0 0 0 2px rgba(0,0,0,.8),inset 0 2px 12px rgba(0,0,0,.75),0 4px 18px rgba(0,0,0,.92),0 0 0 1px rgba(0,240,255,.08)}
body.theme-blade .jog-platter{background:radial-gradient(circle at 50% 20%,rgba(0,240,255,.08) 0%,transparent 30%),radial-gradient(circle at 50% 92%,rgba(0,0,0,.85) 0%,transparent 30%),radial-gradient(circle,#0c1018 0%,#06080e 70%,#000 100%);box-shadow:inset 0 0 44px rgba(0,0,0,.97),inset 0 2px 6px rgba(0,240,255,.08),0 0 0 1px rgba(0,240,255,.1)}
body.theme-blade .jog-platter-disc{background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(0,240,255,.04) 0deg,transparent 3deg,transparent 6deg),radial-gradient(circle at 50% 35%,rgba(0,240,255,.55) 0%,transparent 14%),radial-gradient(circle at 50% 55%,rgba(0,240,255,.35) 0%,transparent 14%),radial-gradient(circle,#0a0e18 0%,#03050a 72%,#000 100%)}
body.theme-blade .jog-indicator{background:linear-gradient(180deg,#fff 0%,#c8fbff 35%,#00f0ff 70%,#0080a0 100%);box-shadow:0 0 8px rgba(0,0,0,.88),0 0 22px rgba(0,240,255,1),0 0 4px rgba(255,255,255,.85)}
body.theme-blade .knob{background:radial-gradient(ellipse 55% 28% at 45% 18%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.15) 30%,transparent 58%),radial-gradient(circle at 50% 108%,rgba(0,0,0,.88) 0%,transparent 48%),radial-gradient(circle at 40% 35%,#3a424e 0%,#1a1e28 50%,#0a0d14 85%,#030510 100%);border:1px solid #050810;box-shadow:inset 0 2px 1px rgba(255,255,255,.22),inset 0 -3px 6px rgba(0,0,0,.88),0 3px 7px rgba(0,0,0,.85),0 0 0 1px rgba(0,240,255,.08)}
body.theme-blade .knob-indicator{background:linear-gradient(180deg,#fff 0%,#c8fbff 50%,#00f0ff 100%);box-shadow:0 0 4px rgba(0,0,0,.85),0 0 12px rgba(0,240,255,1)}
body.theme-blade .knob-label{color:#6a7a88;font-weight:700;letter-spacing:1.8px;text-shadow:0 1px 0 rgba(0,0,0,.85)}
body.theme-blade .vu-meter{background:#000;border:1px solid #1e2028;box-shadow:inset 0 0 6px rgba(0,0,0,.96)}
body.theme-blade .vu-led{background:#03080c}
body.theme-blade .fader-wrap,body.theme-blade .crossfader-track,body.theme-blade .tempo-slider{background:linear-gradient(180deg,#06080e 0%,#000 100%);border:1px solid #1e2028;box-shadow:inset 0 2px 6px rgba(0,0,0,.96)}
body.theme-blade .fader-handle,body.theme-blade .tempo-handle,body.theme-blade .crossfader-handle{background:linear-gradient(180deg,#3a424e 0%,#1a1e28 50%,#0a0d14 100%);border:1px solid #050810;box-shadow:inset 0 1px 0 rgba(0,240,255,.2),0 2px 4px rgba(0,0,0,.85),0 0 6px rgba(0,240,255,.15)}
body.theme-blade .big-btn,body.theme-blade .loop-btn,body.theme-blade .jump-btn,body.theme-blade .util-btn,
body.theme-blade .beat-btn,body.theme-blade .scene-btn,body.theme-blade .pad-mode-btn,
body.theme-blade .tempo-btn,body.theme-blade .step-btn,body.theme-blade .mic-btn,
body.theme-blade .cue-btn,body.theme-blade .compact-btn,body.theme-blade .cue-hp-btn,
body.theme-blade .automix-btn,body.theme-blade .dsb-btn,body.theme-blade .search-src-btn,
body.theme-blade .studio-preset-btn,body.theme-blade .tool-btn,body.theme-blade .assign-btn,
body.theme-blade .curve-btn,body.theme-blade .ai-dj-btn{background:linear-gradient(180deg,#1a2028 0%,#0a0e16 100%);border:1px solid rgba(0,240,255,.35);color:#c0ecf5;text-shadow:0 0 4px rgba(0,240,255,.45);box-shadow:inset 0 1px 0 rgba(0,240,255,.12),inset 0 0 10px rgba(0,240,255,.06),0 2px 4px rgba(0,0,0,.75),0 0 8px rgba(0,240,255,.18);transition:box-shadow .2s ease,border-color .2s ease,filter .15s ease,color .18s ease}
body.theme-blade .big-btn:hover,body.theme-blade .loop-btn:hover,body.theme-blade .jump-btn:hover,
body.theme-blade .util-btn:hover,body.theme-blade .beat-btn:hover,body.theme-blade .scene-btn:hover,
body.theme-blade .pad-mode-btn:hover,body.theme-blade .fx-onoff:hover,body.theme-blade .tempo-btn:hover,
body.theme-blade .dsb-btn:hover,body.theme-blade .mic-btn:hover,body.theme-blade .cue-hp-btn:hover,
body.theme-blade .compact-btn:hover,body.theme-blade .cue-btn:hover,body.theme-blade .sample-pad:hover{filter:brightness(1.18);border-color:#00f0ff;color:#e8fbff;text-shadow:0 0 6px rgba(0,240,255,.8);box-shadow:inset 0 1px 0 rgba(0,240,255,.25),inset 0 0 16px rgba(0,240,255,.15),0 2px 4px rgba(0,0,0,.7),0 0 18px rgba(0,240,255,.55)}
/* Every active state glows in the same electric cyan — single-color digital LED blaze */
body.theme-blade .big-btn.cue.active,
body.theme-blade .big-btn.play.active,
body.theme-blade .loop-btn.active,
body.theme-blade .beat-btn.active,
body.theme-blade .scene-btn.active,
body.theme-blade .fx-onoff.active,
body.theme-blade .util-btn.sync.active,
body.theme-blade .pad-mode-btn.active,
body.theme-blade .dsb-btn.active,
body.theme-blade .bank-btn.active,
body.theme-blade .tab-btn.active,
body.theme-blade .tempo-btn.active,
body.theme-blade .mic-btn.active,
body.theme-blade .cue-hp-btn.active,
body.theme-blade .seq-step.on{background:linear-gradient(180deg,#e8fbff 0%,#00f0ff 55%,#0a8aa8 100%);color:#001418;border-color:#7ff7ff;box-shadow:0 0 32px rgba(0,240,255,1),0 0 60px rgba(0,240,255,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 14px rgba(255,255,255,.25);text-shadow:0 1px 0 rgba(255,255,255,.4),0 0 6px rgba(255,255,255,.6);filter:brightness(1.05)}
body.theme-blade .fx-onoff{background:linear-gradient(180deg,#181c24 0%,#0a0d14 100%);border:2px solid #2a303c;color:#e8f5fa}
body.theme-blade .rec-btn{background:linear-gradient(180deg,#181c24,#0a0d14);border-color:#ff3344;color:#ff8a8a}
body.theme-blade .rec-btn.recording{background:linear-gradient(180deg,#ff6070,#c81e2e);color:#fff;box-shadow:0 0 16px rgba(255,51,68,.8)}
body.theme-blade .sample-pad,body.theme-blade .cue-btn{background:linear-gradient(180deg,#1a2028 0%,#0a0e16 100%);border:1px solid rgba(0,240,255,.35);color:#c0ecf5;text-shadow:0 0 4px rgba(0,240,255,.45);box-shadow:inset 0 1px 0 rgba(0,240,255,.12),inset 0 0 12px rgba(0,240,255,.06),0 2px 4px rgba(0,0,0,.75),0 0 10px rgba(0,240,255,.2)}
body.theme-blade .cue-btn[data-color]{filter:none}
body.theme-blade .cue-btn.active,body.theme-blade .sample-pad.playing,body.theme-blade .sample-pad.active{background:linear-gradient(180deg,#e8fbff 0%,#00f0ff 60%,#0a8aa8 100%);color:#001418;border-color:#7ff7ff;box-shadow:0 0 28px rgba(0,240,255,1),0 0 50px rgba(0,240,255,.5),inset 0 1px 0 rgba(255,255,255,.5)}
body.theme-blade .knob{box-shadow:inset 0 2px 1px rgba(255,255,255,.22),inset 0 -3px 6px rgba(0,0,0,.88),0 3px 7px rgba(0,0,0,.85),0 0 0 1px rgba(0,240,255,.2),0 0 12px rgba(0,240,255,.18)}
body.theme-blade .fader-handle,body.theme-blade .tempo-handle,body.theme-blade .crossfader-handle{box-shadow:inset 0 1px 0 rgba(0,240,255,.35),0 2px 4px rgba(0,0,0,.85),0 0 10px rgba(0,240,255,.35)}
body.theme-blade .sample-pad .pad-num{color:#e8f5fa}
body.theme-blade .sample-pad .pad-name{color:#6a7a88}
body.theme-blade input,body.theme-blade select,body.theme-blade textarea{background:#0a0d14;color:#e8f5fa;border:1px solid #1e2028}
body.theme-blade input:focus,body.theme-blade select:focus{border-color:#00f0ff;outline:none;box-shadow:0 0 0 3px rgba(0,240,255,.22)}
body.theme-blade .url-input,body.theme-blade .search-input,body.theme-blade .yt-input{background:#0a0d14;color:#e8f5fa}
body.theme-blade .track-row{background:#0c0f18;border:1px solid transparent;color:#e8f5fa}
body.theme-blade .track-row:hover{background:#141824;border-color:#00f0ff;box-shadow:0 4px 10px rgba(0,0,0,.6),0 0 14px rgba(0,240,255,.25)}
body.theme-blade .track-row .t-title{color:#fff}
body.theme-blade .track-row .t-artist{color:#6a7a88}
body.theme-blade .track-list-header{color:#00f0ff;border-bottom:1px solid rgba(0,240,255,.35);text-shadow:0 0 6px rgba(0,240,255,.4)}
body.theme-blade .toast{background:linear-gradient(180deg,#14181f 0%,#080a10 100%);color:#e8f5fa;border:1px solid #00f0ff;box-shadow:0 12px 30px rgba(0,0,0,.75),0 0 22px rgba(0,240,255,.35)}
body.theme-blade .modal-box{background:linear-gradient(180deg,#14181f 0%,#080a10 100%);color:#e8f5fa;border:1px solid #1e2028;box-shadow:0 40px 80px rgba(0,0,0,.9),0 0 0 1px rgba(0,240,255,.08)}
body.theme-blade .modal-overlay{background:rgba(2,4,8,.88)}
body.theme-blade .channel-label{color:#00f0ff;text-shadow:0 0 6px rgba(0,240,255,.45)}
body.theme-blade .compact-decks{background:#08090f;border-color:#1e2028}
body.theme-blade .compact-deck{background:#10141c;border-color:#1e2028}
body.theme-blade .compact-deck-title{background:#000;color:#00f0ff;border-color:#1e2028;text-shadow:0 0 6px rgba(0,240,255,.6)}
body.theme-blade .isolator-panel{background:#0c1018;border-color:rgba(0,240,255,.3)}
body.theme-blade .master-section,body.theme-blade .color-fx-row,body.theme-blade .color-fx-grid,
body.theme-blade .crossfader-section,body.theme-blade .headphone-section,body.theme-blade .mic-section,
body.theme-blade .automix-panel{background:#0a0d14;border:1px solid #1e2028}
body.theme-blade .auth-btn{background:linear-gradient(180deg,#14181f,#080a10);border:1px solid #00f0ff;color:#7ff7ff;text-shadow:0 0 6px rgba(0,240,255,.35)}
body.theme-blade .toggle-switch{background:#0c1018;border:1px solid #1e2028}
body.theme-blade .toggle-switch.on{background:linear-gradient(180deg,#7ff7ff,#00f0ff);border-color:#00f0ff;box-shadow:0 0 12px rgba(0,240,255,.8)}
body.theme-blade .master-meters{background:#000;border-color:#1e2028;box-shadow:inset 0 2px 6px rgba(0,0,0,.96)}
body.theme-blade .cdj[data-deck]{--deck-accent:#00f0ff;--deck-accent-rgb:0,240,255}
body.theme-blade .rgb-ambient{background:linear-gradient(90deg,#0080a0 0%,#00f0ff 30%,#c8fbff 50%,#00f0ff 70%,#0080a0 100%);box-shadow:0 0 22px rgba(0,240,255,.7)}
body.theme-blade .bank-btn{color:#6a7a88}
body.theme-blade .seq-step{background:linear-gradient(180deg,#14181f,#06080e);color:rgba(232,245,250,.25);border:1px solid #1e2028}

/* ============================================================
   Per-theme clock (.time-value) halo — keep the crisp base
   drop-shadow, swap the accent halo so it matches palette.
   ============================================================ */
body.theme-neon .time-value.remain{color:#ff00ff;text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 3px rgba(255,0,255,.45)}
body.theme-pioneer .time-value.remain{color:#ff9020;text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 3px rgba(255,144,32,.45)}
body.theme-euphonia .time-value.remain{color:#e8a778;text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 3px rgba(199,120,72,.45)}
body.theme-gold .time-value.remain{color:#ffd97a;text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 3px rgba(255,217,122,.5)}
body.theme-blade .time-value{color:#e8f5fa;text-shadow:0 1px 0 rgba(0,0,0,.9)}
body.theme-blade .time-value.remain{color:#00f0ff;text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 3px rgba(0,240,255,.55)}
body.theme-light .time-value.remain{color:#c85a00;text-shadow:0 1px 0 rgba(255,255,255,.6),0 0 2px rgba(200,90,0,.4)}

body.work-mode .library{display:block !important}
body.work-mode .tab-content#tab-deck{display:flex !important;flex-direction:column;align-items:center;gap:12px}
body.work-mode .rgb-ambient{display:block;height:3px;opacity:.85;max-width:1700px;margin:0 auto}
body.work-mode .library{display:block;opacity:1}
body.work-mode .library.wm-collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;margin:0;border-width:0;opacity:0}
body.work-mode .deck-switch-bar{
  position:sticky;top:6px;z-index:50;
  backdrop-filter:blur(14px) saturate(1.2);
  background:linear-gradient(180deg,rgba(20,20,24,.88) 0%,rgba(14,14,18,.75) 100%);
  border-color:rgba(255,138,26,.25);
  box-shadow:0 10px 32px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
}

/* Big floating EXIT button visible only in WORK MODE */
.wm-exit-btn{
  display:none;position:fixed;top:8px;right:8px;z-index:9000;
  padding:5px 10px;
  background:linear-gradient(180deg,#3a0a0a 0%,#1a0505 100%);
  border:1px solid var(--red);color:#fff;
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;
  border-radius:6px;cursor:pointer;
  box-shadow:0 2px 8px rgba(255,46,46,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  transition:all .15s ease;opacity:.85;
}
.wm-exit-btn:hover{background:linear-gradient(180deg,var(--red) 0%,#8a0a0a 100%);box-shadow:0 0 32px rgba(255,46,46,.8);transform:translateY(-2px)}
.wm-exit-btn:active{transform:translateY(0) scale(.96)}
.wm-exit-btn,body.work-mode .wm-exit-btn{display:none !important}
/* WORK MODE top exit strip — removed (blocked the decks). Small floating
   .wm-exit-btn at top-right is the single exit UI. */
.wm-topbar,.wm-exit-bar{display:none !important}
body.work-mode .wm-topbar,body.work-mode .wm-exit-bar{display:none !important}
.wm-exit-bar{
  padding:10px 28px;
  background:linear-gradient(90deg,rgba(40,6,6,.9) 0%,rgba(80,12,12,.95) 50%,rgba(40,6,6,.9) 100%);
  border:1px solid var(--red);
  color:#fff;
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:900;letter-spacing:4px;
  border-radius:0 0 12px 12px;
  cursor:pointer;transition:all .2s ease;
  box-shadow:0 6px 20px rgba(255,46,46,.4),inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(255,46,46,.5);
  animation:wmBarPulse 3s ease-in-out infinite;
}
.wm-exit-bar:hover{
  padding:12px 40px;
  background:linear-gradient(90deg,var(--red) 0%,#ff5050 50%,var(--red) 100%);
  box-shadow:0 10px 30px rgba(255,46,46,.8),inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(1px);
  letter-spacing:5px;
}
.wm-exit-bar:active{transform:translateY(2px) scale(.985)}
.wm-esc-hint{font-size:10px;opacity:.75;margin-left:6px;letter-spacing:2px}
@keyframes wmBarPulse{
  0%,100%{box-shadow:0 6px 18px rgba(255,46,46,.35),inset 0 1px 0 rgba(255,255,255,.15)}
  50%{box-shadow:0 10px 30px rgba(255,46,46,.75),inset 0 1px 0 rgba(255,255,255,.2)}
}
body.work-mode{
  padding:6px;
  background:
    radial-gradient(ellipse at 20% 5%,rgba(255,138,26,.08) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 95%,rgba(46,224,255,.08) 0%,transparent 50%),
    radial-gradient(ellipse at center,#0b0b0e 0%,#040405 80%);
}
body.work-mode .console,body.work-mode .library,
body.work-mode .beat-fx-panel,body.work-mode .scene-fx-panel,
body.work-mode .mixer-toolbar,body.work-mode .top-fx-row,body.work-mode .rgb-ambient{
  max-width:none !important;width:calc(100vw - 12px) !important;
}
/* When the FX panels live inside the top-fx-row grid, they must fill
   their grid column (100%), not the whole viewport (100vw) — otherwise
   each child claims the full screen and they overlap. The row itself
   gets 100vw above; the cells inside it get 100% of the cell. */
body.work-mode .top-fx-row > .mixer-toolbar,
body.work-mode .top-fx-row > .beat-fx-panel,
body.work-mode .top-fx-row > .scene-fx-panel{
  width:100% !important;max-width:none !important;min-width:0 !important;margin:0 !important;
}
/* Larger work-mode padding/font-size on the FX buttons can overflow a
   grid cell on narrower screens. Allow buttons to wrap and the
   selectors to shrink so the AUTO MIX / BEAT FX / SCENE FX columns
   stay inside their share of the row. */
body.work-mode .top-fx-row{
  grid-template-columns:minmax(0,1.4fr) minmax(0,1.8fr) minmax(0,1.5fr) !important;
  gap:14px !important;
}
body.work-mode .top-fx-row .beat-fx-panel,
body.work-mode .top-fx-row .scene-fx-panel{
  padding:10px 14px !important;
}
body.work-mode .top-fx-row .beat-fx-panel .beat-buttons{
  display:flex !important;flex-wrap:wrap !important;gap:6px !important;flex:1 1 100%;
}
body.work-mode .top-fx-row .beat-btn{
  flex:1 1 auto;min-width:48px !important;padding:8px 6px !important;font-size:11px !important;letter-spacing:1px !important;
}
body.work-mode .top-fx-row .scene-fx-panel .scene-fx-buttons{
  display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:6px !important;
}
body.work-mode .top-fx-row .scene-btn{
  padding:8px 4px !important;font-size:10.5px !important;letter-spacing:1.2px !important;min-width:0;
}
body.work-mode .top-fx-row .fx-selector{
  min-width:80px !important;font-size:11px !important;padding:5px 8px !important;
}
body.work-mode .top-fx-row .mtb-automix .automix-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:5px !important;
}
body.work-mode .top-fx-row .mtb-automix .automix-btn{
  padding:8px 4px !important;font-size:10px !important;letter-spacing:1px !important;min-height:32px;
}
body.work-mode .top-fx-row .mtb-automix .automix-btn .amx-txt{font-size:10px}
body.work-mode .top-fx-row .mtb-automix .automix-decks{padding:4px 2px !important;gap:4px !important}
body.work-mode .top-fx-row .mtb-automix .automix-deck-btn{height:26px;font-size:10.5px !important;padding:0 4px 0 14px !important}
body.work-mode .top-fx-row .mtb-automix .automix-sub{gap:6px !important}
body.work-mode .top-fx-row .mtb-automix .automix-bars{padding:4px 8px !important;font-size:10px !important;min-width:54px}
body.work-mode .top-fx-row .mtb-automix .automix-sync{padding:6px 12px !important;font-size:10px !important}
/* Keep the floating deck-switch-bar pinned (the full-width rule above does
   not apply to it because it's not in the list). */
body.work-mode .console{grid-template-columns:1fr 420px 1fr}
body.work-mode .console.show-all{grid-template-columns:1fr 1fr 440px 1fr 1fr}
/* Hot cues are compact even on huge screens; transport + loop + util
   grow for finger-friendly stage use */
body.work-mode .hot-cues{grid-template-columns:repeat(8,1fr);gap:4px;margin-bottom:10px}
body.work-mode .cue-btn{aspect-ratio:auto;height:42px;font-size:13px;letter-spacing:1px}
body.work-mode .loop-btn,body.work-mode .jump-btn{padding:11px 4px;font-size:12px;letter-spacing:1.5px}
body.work-mode .util-btn{padding:11px 4px;font-size:11px;letter-spacing:1.2px}
body.work-mode .pad-mode-btn{padding:9px 2px;font-size:10px;letter-spacing:1.2px}
body.work-mode .big-btn{padding:18px 14px;font-size:15px;letter-spacing:3px}
body.work-mode .big-btn .icon{font-size:18px}
body.work-mode .tempo-btn{padding:14px 4px;font-size:18px}
body.work-mode .tempo-btn.reset{font-size:12px}
body.work-mode .step-btn{padding:7px 12px;font-size:11px}
body.work-mode .tempo-display-big{font-size:28px;padding:10px}
body.work-mode .automix-btn{padding:13px 6px;font-size:11px;letter-spacing:1.8px;min-height:46px}

@media(min-width:1900px){
  body.work-mode .console{grid-template-columns:1fr 480px 1fr;gap:20px;padding:22px}
  body.work-mode .jog-wheel{width:340px;height:340px}
  body.work-mode .jog-center-screen{width:110px;height:110px}
  body.work-mode .jog-center-screen .bpm-display{font-size:28px}
  body.work-mode .deck-number{font-size:28px;padding:4px 14px}
  body.work-mode .screen-bpm{font-size:30px}
  body.work-mode .time-value{font-size:22px}
  body.work-mode .cdj{padding:22px}
  body.work-mode .channel .fader-wrap,body.work-mode .channel .vu-meter{height:210px}
  body.work-mode .hot-cues{gap:5px}
  body.work-mode .cue-btn{height:46px;font-size:14px}
  body.work-mode .big-btn{padding:22px 16px;font-size:17px}
  body.work-mode .big-btn .icon{font-size:22px}
  body.work-mode .loop-btn,body.work-mode .jump-btn{padding:14px 4px;font-size:13px}
  body.work-mode .util-btn{padding:13px 4px;font-size:12px}
  body.work-mode .pad-mode-btn{padding:11px 2px;font-size:11px}
  body.work-mode .tempo-btn{padding:17px 4px;font-size:22px}
  body.work-mode .tempo-display-big{font-size:32px}
  body.work-mode .automix-btn{padding:16px 6px;font-size:12px;min-height:52px}
}
@media(min-width:2400px){
  body.work-mode .console{grid-template-columns:1fr 560px 1fr;gap:26px;padding:30px}
  body.work-mode .jog-wheel{width:420px;height:420px}
  body.work-mode .jog-center-screen{width:140px;height:140px}
  body.work-mode .jog-center-screen .bpm-display{font-size:34px}
  body.work-mode .deck-number{font-size:34px;padding:5px 18px}
  body.work-mode .screen-bpm{font-size:38px}
  body.work-mode .time-value{font-size:28px}
  body.work-mode .channel .fader-wrap,body.work-mode .channel .vu-meter{height:260px}
  body.work-mode .cue-btn{height:52px;font-size:15px}
  body.work-mode .big-btn{padding:26px 18px;font-size:20px}
  body.work-mode .big-btn .icon{font-size:26px}
  body.work-mode .loop-btn,body.work-mode .jump-btn{padding:17px 6px;font-size:14px}
  body.work-mode .util-btn{padding:15px 4px;font-size:13px}
  body.work-mode .pad-mode-btn{padding:13px 2px;font-size:12px}
  body.work-mode .tempo-btn{padding:20px 4px;font-size:26px}
  body.work-mode .tempo-display-big{font-size:38px}
  body.work-mode .automix-btn{padding:18px 6px;font-size:13px;min-height:58px}
  body.work-mode .waveform{height:70px}
}
body.work-mode .console{
  padding:14px;border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 15%,transparent 85%,rgba(0,0,0,.2) 100%),
    rgba(14,14,18,.65);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,138,26,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 1px rgba(255,138,26,.35),
    0 0 40px rgba(255,138,26,.1),
    0 0 100px rgba(46,224,255,.06),
    0 24px 80px rgba(0,0,0,.7);
  position:relative;
  isolation:isolate;
}
body.work-mode .console::before{
  content:'';position:absolute;inset:-1px;border-radius:21px;pointer-events:none;z-index:-1;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(255,138,26,.55) 0%,
    rgba(255,60,120,.35) 25%,
    rgba(200,0,255,.35) 50%,
    rgba(46,224,255,.45) 75%,
    rgba(255,138,26,.55) 100%);
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:neonFlow 12s ease-in-out infinite;
}
body.work-mode .console::after{
  content:'';position:absolute;inset:-6px;border-radius:26px;pointer-events:none;z-index:-2;
  background:linear-gradient(135deg,
    rgba(255,138,26,.18),rgba(200,0,255,.14),rgba(46,224,255,.18),rgba(255,138,26,.18));
  background-size:300% 300%;
  filter:blur(26px);opacity:.7;
  animation:neonFlow 12s ease-in-out infinite,neonPulse 4.5s ease-in-out infinite;
}
@keyframes neonFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes neonPulse{
  0%,100%{opacity:.45}
  50%{opacity:.85}
}
body.work-mode .cdj,body.work-mode .mixer{
  background:linear-gradient(180deg,rgba(42,42,46,.9) 0%,rgba(23,23,26,.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(255,138,26,.1),
    0 10px 30px rgba(0,0,0,.7);
}
body.work-mode .library{
  max-width:1700px;margin:0 auto;
  background:linear-gradient(180deg,rgba(30,30,34,.85) 0%,rgba(17,17,20,.9) 100%);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,138,26,.18);
  transition:max-height .4s ease,opacity .3s ease,padding .3s ease;
}
body.work-mode .library-title::after{
  content:' — LIVE';color:var(--play-green);font-size:9px;margin-left:8px;letter-spacing:2px;
}
/* WM library toggle button styled like other dsb buttons */
.dsb-wmlib{color:var(--play-green) !important;border-color:rgba(28,255,143,.4) !important;display:none}
body.work-mode .dsb-wmlib{display:inline-flex}
.dsb-wmlib.active{background:linear-gradient(180deg,var(--play-green),#0aa05a) !important;color:#000 !important;box-shadow:0 0 18px rgba(28,255,143,.6) !important}
.dsb-wmexit{color:var(--red) !important;border:1px solid rgba(255,46,46,.6) !important;display:none;font-weight:800 !important;letter-spacing:2.5px !important}
body.work-mode .dsb-wmexit{display:inline-flex;background:linear-gradient(180deg,#2a0808,#1a0404) !important;animation:wmExitPulse 2.5s ease-in-out infinite}
.dsb-wmexit:hover{background:linear-gradient(180deg,var(--red),#8a0000) !important;color:#fff !important;box-shadow:0 0 18px rgba(255,46,46,.7) !important}
.dsb-work{
  color:#e0a8ff !important;
  border:2px solid rgba(200,0,255,.65) !important;
  background:linear-gradient(180deg,#2a1438 0%,#150820 100%) !important;
  text-shadow:0 0 6px rgba(200,0,255,.5) !important;
}
.dsb-work.active{background:linear-gradient(180deg,var(--purple),#6000aa) !important;color:#fff !important;box-shadow:0 0 22px rgba(200,0,255,.8) !important;border-color:#e0a8ff !important;text-shadow:none !important}
.dsb-work:hover{color:#fff !important;border-color:var(--purple) !important;box-shadow:0 0 18px rgba(200,0,255,.6) !important}

/* STUDIO MASTERING panel */
.studio-panel{display:flex;flex-direction:column;gap:14px}
.studio-sub-label{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;color:var(--orange);font-weight:700;margin-bottom:6px}
.studio-presets{padding:10px;background:#0a0a0b;border-radius:8px;border:1px solid #222}
.studio-preset-row{display:flex;gap:4px;flex-wrap:wrap}
.studio-preset-btn{padding:8px 14px;background:linear-gradient(180deg,#2a2a2e 0%,#151518 100%);border:1px solid #333;color:var(--text-dim);font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;font-weight:700;border-radius:4px;cursor:pointer;transition:all .15s}
.studio-preset-btn:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)}
.studio-preset-btn.active{background:linear-gradient(180deg,var(--orange),#c85a00);color:#0a0a0a;border-color:var(--orange-glow);box-shadow:0 0 16px rgba(255,138,26,.5)}
.studio-preset-btn[data-preset="natural"]{border-color:rgba(92,240,160,.5);color:#9ce6b8}
.studio-preset-btn[data-preset="natural"]:hover{border-color:#5cf0a0;color:#5cf0a0;box-shadow:0 0 10px rgba(92,240,160,.3)}
.studio-preset-btn[data-preset="natural"].active{background:linear-gradient(180deg,#5cf0a0,#2db86b);color:#04140a;border-color:#5cf0a0;box-shadow:0 0 16px rgba(92,240,160,.5)}
.studio-eq{padding:12px;background:#0a0a0b;border-radius:8px;border:1px solid #222}
.studio-eq-canvas{width:100%;display:block;background:linear-gradient(180deg,#04080c 0%,#020406 100%);border-radius:6px;border:1px solid #1a2a30}
.studio-eq-bands{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.studio-eq-band{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;background:#141416;border-radius:5px}
.studio-eq-band .eq-label{font-family:'Orbitron',sans-serif;font-size:10px;color:var(--orange);font-weight:700;letter-spacing:1.5px}
.studio-eq-band input[type=range]{-webkit-appearance:slider-vertical;appearance:slider-vertical;writing-mode:bt-lr;width:24px;height:110px;background:transparent;cursor:pointer}
.studio-eq-band .eq-value{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--screen-glow);letter-spacing:1px;min-height:14px}
.studio-proc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.studio-block{padding:12px;background:#0a0a0b;border-radius:8px;border:1px solid #222}
.studio-block-title{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2.5px;color:var(--screen-glow);font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05)}
.studio-knobs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.studio-knobs .knob-wrap{align-items:center}
.studio-val{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--orange-glow);letter-spacing:1px;min-height:12px}
.studio-gr-meter{margin-top:10px;height:10px;background:#020406;border-radius:2px;position:relative;overflow:hidden;border:1px solid #1a2a30}
.studio-gr-fill{position:absolute;top:0;bottom:0;right:0;width:0%;background:linear-gradient(90deg,var(--play-green),var(--yellow),var(--orange),var(--red));transition:width .05s}
.studio-gr-label{position:absolute;top:-16px;right:0;font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--text-dim);letter-spacing:1.5px}
.studio-level-meter{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.studio-level-row{display:grid;grid-template-columns:50px 1fr 50px;gap:6px;align-items:center;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1px}
.studio-level-label{color:var(--text-dim)}
.studio-level-bar{height:8px;background:#020406;border-radius:2px;overflow:hidden;border:1px solid #1a2a30;position:relative}
.studio-level-fill{position:absolute;top:0;bottom:0;left:0;width:0%;background:linear-gradient(90deg,var(--play-green) 0%,var(--yellow) 75%,var(--red) 95%);transition:width .06s}
.studio-level-fill.lufs{background:linear-gradient(90deg,#00d4ff,#00ff7a,#ffd400,#ff2e2e)}
.studio-level-val{color:var(--orange);text-align:right}
.studio-spectrum-wrap{padding:10px;background:#0a0a0b;border-radius:8px;border:1px solid #222}
.studio-spectrum{width:100%;display:block;background:linear-gradient(180deg,#04080c 0%,#020406 100%);border-radius:6px;border:1px solid #1a2a30}
#studioStatus.bypassed{color:var(--red) !important}

/* =====================================================================
   SOUND TAB — AMPLIFIER CABINET CHASSIS
   Each processor block (and the preset bank) is dressed as a pro-rack
   chassis: dark brushed-metal panel, chrome corner brackets, a thin
   orange accent bezel, and a brushed-metal nameplate held by chrome
   hex screws — matching the rest of the TITAN console.
   The displays + visual controls inside (knobs, sliders, EQ canvas,
   spectrum, meters) are intentionally left untouched.
   ===================================================================== */
.studio-proc-grid{gap:18px;padding:4px}

.studio-block{
  position:relative;
  padding:26px 18px 20px;
  background:
    /* fine diagonal grain — subtle brushed-metal texture */
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.22) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    /* faint ambient orange wash — matches --orange accent across the app */
    radial-gradient(120% 80% at 50% 110%,
      rgba(255,122,0,.06) 0%, rgba(0,0,0,0) 55%),
    /* main chassis gradient — neutral dark, same family as --deck-bg */
    linear-gradient(160deg,#1a1a1c 0%,#0d0d0e 50%,#060607 100%);
  border:1px solid #2a2a2e;
  border-radius:10px;
  box-shadow:
    /* outer drop shadow — chassis sitting on the rack */
    0 10px 24px rgba(0,0,0,.7),
    0 2px 0 rgba(0,0,0,.6),
    /* top-edge highlight */
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -2px 10px rgba(0,0,0,.75),
    /* thin orange accent bezel — uses --orange family */
    inset 0 0 0 4px transparent,
    inset 0 0 0 5px rgba(255,122,0,.18);
}

/* Chrome corner protectors — top-left + top-right + bottom-left + bottom-right */
.studio-block::before,
.studio-block::after{
  content:'';
  position:absolute;
  width:20px;height:20px;
  background:
    radial-gradient(circle at 32% 28%,
      #f8f8fa 0%, #cdcdd2 28%, #828289 65%, #2c2c30 100%);
  border:1px solid #1a1a1c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.6);
  pointer-events:none;
  z-index:2;
}
.studio-block::before{
  top:-3px;left:-3px;
  border-radius:11px 3px 9px 3px;
}
.studio-block::after{
  top:-3px;right:-3px;
  border-radius:3px 11px 3px 9px;
}

/* Brushed-metal nameplate — replaces the plain title underline */
.studio-block-title{
  position:relative;
  margin:-8px -4px 14px;
  padding:9px 30px;
  text-align:center;
  background:
    linear-gradient(180deg,
      #2e2e32 0%, #202024 35%, #131316 70%, #0a0a0c 100%);
  color:var(--orange) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 8px rgba(255,122,0,.25);
  border:1px solid #3a3a3e;
  border-radius:3px;
  border-bottom:1px solid #1a1a1c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 2px 4px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35);
  z-index:1;
}
/* Chrome hex screws holding the nameplate to the chassis */
.studio-block-title::before,
.studio-block-title::after{
  content:'';
  position:absolute;top:50%;width:8px;height:8px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,
      #f8f8fa 0%, #cdcdd2 35%, #6a6a70 75%, #1a1a1c 100%);
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 1px 1px 0 rgba(255,255,255,.25),
    0 1px 1px rgba(0,0,0,.55);
  transform:translateY(-50%);
}
.studio-block-title::before{left:8px}
.studio-block-title::after{right:8px}

/* Preset bank — same chassis treatment, slightly slimmer */
.studio-presets{
  position:relative;
  padding:18px 16px 14px;
  background:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.22) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    linear-gradient(160deg,#1a1a1c 0%,#0d0d0e 50%,#060607 100%);
  border:1px solid #2a2a2e;
  border-radius:10px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -2px 10px rgba(0,0,0,.75),
    inset 0 0 0 5px rgba(255,122,0,.18);
}
.studio-presets::before,
.studio-presets::after{
  content:'';position:absolute;width:20px;height:20px;
  background:radial-gradient(circle at 32% 28%,
    #f8f8fa 0%, #cdcdd2 28%, #828289 65%, #2c2c30 100%);
  border:1px solid #1a1a1c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.6);
  pointer-events:none;z-index:2;
}
.studio-presets::before{top:-3px;left:-3px;border-radius:11px 3px 9px 3px}
.studio-presets::after{top:-3px;right:-3px;border-radius:3px 11px 3px 9px}

/* Make sure theme overrides for these blocks still win — they already
   have higher specificity (body.theme-x .studio-block), so the chassis
   styling above only applies on the default dark theme. */

/* =====================================================================
   SOUND TAB — AMPLIFIER METERING BRIDGE + PRO METERS
   Matches the brushed-metal CDJ chassis and the orange/amber LED palette
   ===================================================================== */
.amp-bridge{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(120px,auto) minmax(180px,1fr) minmax(180px,auto);
  gap:12px;align-items:stretch;
  padding:14px 16px;margin-bottom:14px;
  background:linear-gradient(180deg,#2a2a2e 0%,#18181b 55%,#0c0c0e 100%);
  border:1px solid #3a3a3e;border-radius:12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 0 0 40px rgba(255,138,26,.02),
    0 12px 32px rgba(0,0,0,.65);
  position:relative;overflow:hidden;
}
.amp-bridge::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,138,26,.35) 50%,transparent);
}
.amp-bridge::after{
  content:'TITAN · AMPLIFIER METER BRIDGE';
  position:absolute;top:4px;right:14px;
  font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:3px;
  color:rgba(255,255,255,.25);
}

/* ═══════ DIGITAL PRECISION METERING — UAD / iZotope aesthetic ═══════
   Dark matte chassis, 48-segment colour-graded LED ladders, peak-hold
   indicators that hang + fall, K-weighted reference lines, massive
   numeric LED read-out. No paper, no paint, no brass. This is the
   look of a plug-in that costs $400 and ships in every pro studio. */
.amp-digital{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:12px;
  background:linear-gradient(180deg,#0d0d10,#050507);
  border:1px solid #1a1a1c;border-radius:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 0 30px rgba(0,0,0,.7),
    0 6px 18px rgba(0,0,0,.7);
}
.amp-dm-col{
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  gap:6px;min-height:240px;
  padding:8px;
  background:linear-gradient(180deg,#050506,#020203);
  border:1px solid #141418;border-radius:6px;
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
}
.amp-dm-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:3px 6px;border-bottom:1px dashed rgba(46,224,255,.15);
}
.amp-dm-label{
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;
  color:#2ee0ff;font-weight:800;
  text-shadow:0 0 4px rgba(46,224,255,.5);
}
.amp-dm-hold{
  font-family:'Share Tech Mono',monospace;font-size:10px;
  color:#7a7a80;letter-spacing:1px;
}
.amp-dm-hold b{color:#ffb040;font-weight:700}

.amp-dm-body{
  display:grid;grid-template-columns:28px 1fr 12px;gap:3px;
  padding:4px 2px;min-height:180px;
}
.amp-dm-scale{
  display:flex;flex-direction:column;justify-content:space-between;
  font-family:'Share Tech Mono',monospace;font-size:8px;color:#3a3a42;
  letter-spacing:.5px;text-align:right;padding:1px 3px 1px 0;
  border-right:1px solid rgba(255,255,255,.03);
}
.amp-dm-scale span{line-height:1}
.amp-dm-scale span.zero{color:#ff6060;font-weight:700}
.amp-dm-scale span.minus6{color:#ffb040;font-weight:700}
.amp-dm-scale span.minus18{color:#60ff90;font-weight:700}

.amp-dm-ladder{
  display:flex;flex-direction:column-reverse;
  gap:1px;padding:1px;
  background:#010203;border:1px solid #0a0a0b;border-radius:2px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.95);
  position:relative;overflow:hidden;
}
.amp-dm-seg{
  flex:1;min-height:2px;border-radius:0.5px;
  background:#061014;
  transition:background .03s,box-shadow .03s;
}
/* Lit segments — colour depends on position (set via data-zone) */
.amp-dm-seg.on.g{background:#28e070;box-shadow:0 0 3px rgba(40,224,112,.8),inset 0 0 1px rgba(255,255,255,.2)}
.amp-dm-seg.on.y{background:#f0d020;box-shadow:0 0 3px rgba(240,208,32,.85),inset 0 0 1px rgba(255,255,255,.25)}
.amp-dm-seg.on.o{background:#ff8010;box-shadow:0 0 4px rgba(255,128,16,.9),inset 0 0 1px rgba(255,255,255,.3)}
.amp-dm-seg.on.r{background:#ff2020;box-shadow:0 0 5px rgba(255,32,32,1),inset 0 0 1px rgba(255,255,255,.35)}
/* Peak-hold segment — single bright dash that hangs at the peak */
.amp-dm-seg.hold{
  background:#ffffff !important;
  box-shadow:0 0 6px rgba(255,255,255,.95),0 0 2px #fff !important;
}
.amp-dm-seg.hold.clip{
  background:#ff2020 !important;
  box-shadow:0 0 10px rgba(255,32,32,1),0 0 2px #fff !important;
}

.amp-dm-gridlines{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(255,32,32,.18) 4.7%,    /* 0 dB */
      transparent 4.8%,transparent 14.2%,
      rgba(255,176,64,.12) 14.3%,  /* -6 dB */
      transparent 14.4%,transparent 28.5%,
      rgba(96,255,144,.1) 28.6%,   /* -18 dB */
      transparent 28.7%);
}

.amp-dm-numeric{
  font-family:'Orbitron',sans-serif;font-size:30px;font-weight:900;
  letter-spacing:2px;line-height:1;text-align:center;
  padding:8px 4px 4px;
  color:#2ee0ff;
  text-shadow:
    0 0 8px rgba(46,224,255,.7),
    0 0 2px rgba(46,224,255,1);
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#020608,#000);
  border:1px solid #1a2a30;border-radius:4px;
  box-shadow:inset 0 0 12px rgba(0,0,0,.9),inset 0 1px 0 rgba(46,224,255,.08);
}
.amp-dm-numeric.warn{color:#ffb040;text-shadow:0 0 8px rgba(255,176,64,.7)}
.amp-dm-numeric.clip{color:#ff4040;text-shadow:0 0 10px rgba(255,64,64,.9),0 0 2px #fff}
.amp-dm-unit{
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;
  color:#5a5a60;text-align:center;font-weight:700;
  padding-bottom:2px;
}

/* Chip label strip at the top-right of the whole digital block */
.amp-digital::before{
  content:'DIGITAL PRECISION METERING · 48 SEG · PEAK+HOLD';
  position:absolute;top:-1px;right:10px;
  font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:3px;
  color:rgba(46,224,255,.4);font-weight:700;
  transform:translateY(-50%);
  background:#0d0d10;padding:0 6px;
}
.amp-digital{position:relative}

/* Legacy analog VU CSS kept below so the JS that touches amp-vu-* ids
   is still valid even after the swap; the SVG elements have been
   removed from the DOM, so these rules only paint if something opts in. */
.amp-vu-wrap{display:flex;flex-direction:column;gap:10px;justify-content:center}
.amp-vu{
  width:100%;max-width:460px;aspect-ratio:2.4/1;
  /* The outer "brass bezel" — two gradients stacked give the illusion
     of polished metal with four subtle highlights at the corners */
  background:
    /* Top-left brass highlight */
    radial-gradient(circle at 10% 10%, rgba(255,235,180,.55), transparent 40%),
    /* Bottom-right darker brass */
    radial-gradient(circle at 90% 90%, rgba(80,50,10,.45), transparent 45%),
    /* Overall brass body */
    linear-gradient(145deg,#d4a849 0%,#b58630 35%,#8a6420 65%,#5a3f12 100%);
  border-radius:12px;
  box-shadow:
    /* Outer drop shadow — sits on a dark surface */
    0 10px 26px rgba(0,0,0,.85),
    0 2px 4px rgba(0,0,0,.6),
    /* Brass rim highlight */
    inset 0 1px 0 rgba(255,245,210,.6),
    inset 0 -1px 0 rgba(40,20,0,.8),
    /* Inner black gasket where the glass sits in the bezel */
    inset 0 0 0 4px #0a0a0b,
    inset 0 0 0 5px rgba(255,220,160,.15);
  position:relative;overflow:hidden;
}
/* Corner screws — 4 tiny Phillips-head indentations */
.amp-vu::before,
.amp-vu::after{
  content:'';position:absolute;width:8px;height:8px;border-radius:50%;
  background:
    /* Brass head with a subtle slot */
    linear-gradient(180deg,transparent 40%,rgba(0,0,0,.4) 44%,rgba(0,0,0,.4) 56%,transparent 60%),
    radial-gradient(circle at 35% 30%,#f0dca0 0%,#b0832a 40%,#3a1c04 100%);
  box-shadow:
    inset 0 0 0 1px #0a0400,
    0 1px 2px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,235,180,.2);
  z-index:5;
}
.amp-vu::before{top:8px;left:10px}
.amp-vu::after{top:8px;right:10px}
/* Bottom-corner screws, via a small extra pseudo on .amp-vu-dial */
.amp-vu-dial::before,
.amp-vu-dial::after{
  content:'';position:absolute;width:8px;height:8px;border-radius:50%;
  background:
    linear-gradient(180deg,transparent 40%,rgba(0,0,0,.4) 44%,rgba(0,0,0,.4) 56%,transparent 60%),
    radial-gradient(circle at 35% 30%,#f0dca0 0%,#b0832a 40%,#3a1c04 100%);
  box-shadow:
    inset 0 0 0 1px #0a0400,
    0 1px 2px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,235,180,.2);
  z-index:5;bottom:-6px;
}
.amp-vu-dial::before{left:-6px}
.amp-vu-dial::after{right:-6px}

/* R CHANNEL — cooler brass tone so at a glance L and R don't look identical */
.amp-vu-right{
  background:
    radial-gradient(circle at 10% 10%, rgba(220,235,255,.45), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(40,40,70,.4), transparent 45%),
    linear-gradient(145deg,#b8a0d0 0%,#8a7aaa 35%,#5a5080 65%,#2e2a4a 100%) !important;
}
.amp-vu-right .amp-vu-dial{
  background:
    radial-gradient(ellipse at 50% 120%, rgba(180,160,200,.25) 0%, transparent 55%),
    repeating-linear-gradient(45deg,rgba(80,70,110,.04) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(80,70,110,.04) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#e8e4f2 0%,#d5ccdf 45%,#afa3bd 100%) !important;
}
/* The inner dial "face" — cream with subtle patina */
.amp-vu-dial{
  position:absolute;inset:14px 12px 12px;
  border-radius:6px;overflow:hidden;
  background:
    /* soft radial vignette for aged paper feel */
    radial-gradient(ellipse at 50% 120%, rgba(220,180,120,.35) 0%, transparent 55%),
    /* tiny grid of bumps — subtle paper texture */
    repeating-linear-gradient(45deg,rgba(160,120,60,.04) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(160,120,60,.04) 0 1px,transparent 1px 3px),
    /* main cream paper gradient */
    linear-gradient(180deg,#fbf0cc 0%,#f3e4b0 45%,#ddc280 100%);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.55),
    inset 0 -6px 12px rgba(130,80,20,.4),
    inset 0 0 0 1px rgba(60,30,0,.4);
}
.amp-vu svg{width:100%;height:100%;display:block;position:relative;z-index:2}
/* Glass dome — a curved highlight across the top-front of the meter,
   the thing that actually makes it "feel" like real glass */
.amp-vu-glass{
  position:absolute;inset:14px 12px 12px;border-radius:6px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.12) 18%,
      rgba(255,255,255,.02) 38%,
      transparent 55%);
  pointer-events:none;z-index:3;
  /* Flick-light streak on the top-right, mimicking a ceiling spot */
  box-shadow:inset 30px 8px 40px -18px rgba(255,255,255,.35);
}
.amp-vu-label{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:4px;color:#3a2810;
  opacity:.55;z-index:4;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.amp-vu-ch{
  position:absolute;bottom:10px;right:16px;z-index:4;
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;letter-spacing:3px;
  color:#1a0f04;
  text-shadow:0 1px 0 rgba(255,255,255,.4),0 -1px 0 rgba(0,0,0,.2);
  opacity:.7;
}
/* Manufacturer / model tag at bottom-center — pure vintage-amp flavour */
.amp-vu-wrap .amp-vu::before,
.amp-vu-wrap .amp-vu::after{z-index:4}

/* PPM segmented LED ladders */
/* ═══════════════════════════════════════════════════════════════════
   ACADEMY — product-grade learning tab
   Visual language: warm teal → emerald gradient for the primary path,
   soft charcoal cards, generous spacing, large numeric progress.
   Reference marks: Duolingo's course path, Yousician's lesson cards,
   Simply Piano's badge drawer. Everything is scoped with `.academy-*`
   so nothing can bleed into the rest of the console UI.
   ═══════════════════════════════════════════════════════════════════ */
.academy-wrap{
  display:flex;flex-direction:column;gap:16px;
  max-width:1200px;margin:0 auto;padding:0 4px;
  font-family:'Inter','SF Pro Text','Segoe UI',system-ui,sans-serif;
  color:#e8f0ea;
}
.academy-hero{
  position:relative;overflow:hidden;
  padding:28px 32px;border-radius:16px;
  background:
    radial-gradient(ellipse at 85% -30%, rgba(92,240,160,.18), transparent 55%),
    radial-gradient(ellipse at 15% 130%, rgba(46,224,255,.08), transparent 50%),
    linear-gradient(135deg,#09181c 0%,#071410 55%,#050a07 100%);
  border:1px solid rgba(92,240,160,.2);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.academy-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 92% 92%, rgba(255,255,255,.04), transparent 40%);
}
.academy-hero-grid{
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  position:relative;z-index:1;
}
@media(max-width:760px){.academy-hero-grid{grid-template-columns:1fr}}
.academy-kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;
  color:#5cf0a0;font-weight:700;text-transform:uppercase;
  padding:5px 12px;border:1px solid rgba(92,240,160,.35);border-radius:999px;
  background:rgba(92,240,160,.06);
  margin-bottom:14px;
}
.academy-title{
  font-family:'Orbitron',sans-serif;font-size:34px;font-weight:900;
  letter-spacing:-.5px;line-height:1.05;color:#fff;margin:0 0 10px;
}
.academy-title span{color:#5cf0a0}
.academy-tagline{
  font-size:14px;line-height:1.6;color:#a0c8af;max-width:560px;margin:0 0 18px;
}
.academy-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border:none;border-radius:10px;
  background:linear-gradient(180deg,#5cf0a0 0%,#00b868 100%);
  color:#041a0d;font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:2px;
  font-weight:800;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,184,104,.35);
  transition:transform .15s, box-shadow .15s;
}
.academy-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,184,104,.45)}
.academy-cta.ghost{
  background:transparent;color:#5cf0a0;
  border:1px solid rgba(92,240,160,.4);box-shadow:none;
}
.academy-cta.ghost:hover{background:rgba(92,240,160,.08);box-shadow:none}

.academy-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;min-width:260px;
}
.academy-stat{
  padding:14px 16px;border-radius:10px;
  background:rgba(4,12,8,.7);
  border:1px solid rgba(92,240,160,.12);
  display:flex;flex-direction:column;gap:4px;
}
.academy-stat-label{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;
  color:#6a8a78;text-transform:uppercase;
}
.academy-stat-value{
  font-family:'Orbitron',sans-serif;font-size:26px;font-weight:800;
  color:#5cf0a0;line-height:1;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
}
.academy-stat-value small{font-size:12px;color:#7a9a8a;font-weight:600;margin-left:4px}

.academy-progress-track{
  height:4px;background:rgba(92,240,160,.08);border-radius:2px;overflow:hidden;
  margin-top:6px;
}
.academy-progress-fill{
  height:100%;background:linear-gradient(90deg,#5cf0a0,#00d074);
  transition:width .5s cubic-bezier(.22,.88,.3,1);
}

/* ───── Continue card ───── */
.academy-continue{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;border-radius:12px;
  background:linear-gradient(90deg,rgba(92,240,160,.08),rgba(46,224,255,.03));
  border:1px solid rgba(92,240,160,.2);
  cursor:pointer;transition:transform .15s, background .15s;
}
.academy-continue:hover{transform:translateX(2px);background:linear-gradient(90deg,rgba(92,240,160,.12),rgba(46,224,255,.05))}
.academy-continue-icon{
  width:48px;height:48px;border-radius:10px;
  background:linear-gradient(180deg,#5cf0a0,#00a858);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#041a0d;flex-shrink:0;
}
.academy-continue-body{flex:1;min-width:0}
.academy-continue-label{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;
  color:#7a9a88;text-transform:uppercase;margin-bottom:3px;
}
.academy-continue-title{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:800;color:#fff;margin-bottom:2px}
.academy-continue-meta{font-size:11px;color:#8aaa98}
.academy-continue-arrow{color:#5cf0a0;font-size:20px;opacity:.6;transition:transform .15s,opacity .15s}
.academy-continue:hover .academy-continue-arrow{transform:translateX(4px);opacity:1}

/* ───── Course cards ───── */
.academy-section-title{
  display:flex;align-items:baseline;justify-content:space-between;
  font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:3px;
  color:#a0c8af;text-transform:uppercase;font-weight:700;
  padding:0 4px;
}
.academy-section-title small{
  font-family:'Share Tech Mono',monospace;font-size:10px;
  color:#5a7a68;letter-spacing:1px;text-transform:none;
}
.academy-courses{display:flex;flex-direction:column;gap:14px}

.course-card{
  position:relative;
  background:linear-gradient(135deg,#0f1a14 0%,#0a1410 100%);
  border:1px solid #1a2a1e;border-radius:14px;
  overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.course-card:hover{border-color:rgba(92,240,160,.3);transform:translateY(-1px)}
.course-card.locked{opacity:.55}
.course-card.complete{border-color:rgba(92,240,160,.35)}
.course-card.complete::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#5cf0a0,#00d074);
}
.course-head{
  display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;
  padding:18px 22px;
}
.course-num{
  width:56px;height:56px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;
  color:var(--cc,#5cf0a0);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.3));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 0 10px rgba(0,0,0,.5);
}
.course-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.course-title{
  font-family:'Orbitron',sans-serif;font-size:17px;font-weight:800;
  color:#fff;letter-spacing:.3px;
}
.course-desc{font-size:13px;color:#8aaa98;line-height:1.45}
.course-meta{
  display:flex;gap:14px;margin-top:6px;flex-wrap:wrap;
  font-family:'Share Tech Mono',monospace;font-size:10px;color:#6a8a78;
  letter-spacing:1px;
}
.course-meta span{display:flex;align-items:center;gap:4px}
.course-meta b{color:var(--cc,#a0d8b0);font-weight:600}
.course-action{
  padding:10px 18px;border-radius:8px;
  font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;font-weight:800;
  background:transparent;border:1px solid rgba(92,240,160,.4);
  color:#5cf0a0;cursor:pointer;
  transition:background .15s, color .15s;
  white-space:nowrap;
}
.course-action:hover{background:rgba(92,240,160,.1)}
.course-action.primary{background:linear-gradient(180deg,#5cf0a0,#00b868);color:#041a0d;border-color:transparent}
.course-action.primary:hover{background:linear-gradient(180deg,#6cff9f,#00c872)}

.course-lessons{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:8px;padding:0 22px 22px;
}
.lesson-chip{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:8px;
  background:#070e0a;border:1px solid #152218;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .15s;
}
.lesson-chip:hover{background:#0a1510;border-color:rgba(92,240,160,.3);transform:translateX(2px)}
.lesson-chip.done{border-color:rgba(92,240,160,.4);background:rgba(92,240,160,.04)}
.lesson-chip.locked{opacity:.4;cursor:not-allowed}
.lesson-chip.locked:hover{transform:none;border-color:#152218}
.lesson-chip-mark{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid #2a3a30;background:transparent;
  font-size:11px;color:#5a7a68;
}
.lesson-chip.done .lesson-chip-mark{background:#5cf0a0;border-color:#5cf0a0;color:#041a0d;font-weight:900}
.lesson-chip-body{flex:1;min-width:0}
.lesson-chip-title{font-size:12.5px;font-weight:600;color:#d0e8d8;line-height:1.2;margin-bottom:1px}
.lesson-chip-xp{
  font-family:'Share Tech Mono',monospace;font-size:9px;color:#6a8a78;
  letter-spacing:1px;
}

/* ───── Achievements ───── */
.academy-badges{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}
.badge-card{
  padding:16px 12px;border-radius:10px;
  background:#0c1510;border:1px solid #1a2a1e;
  text-align:center;
  transition:border-color .15s, transform .15s;
  cursor:default;
}
.badge-card.earned{border-color:rgba(92,240,160,.4);background:linear-gradient(180deg,rgba(92,240,160,.06),#0a1410)}
.badge-card.earned:hover{transform:translateY(-2px);border-color:rgba(92,240,160,.6)}
.badge-card.locked{opacity:.45}
.badge-icon{font-size:28px;line-height:1;margin-bottom:8px;display:block;filter:grayscale(.8)}
.badge-card.earned .badge-icon{filter:none}
.badge-name{
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:800;letter-spacing:1px;
  color:#d0e8d8;margin-bottom:3px;
}
.badge-desc{font-size:10px;color:#7a9a88;line-height:1.3;min-height:26px}

/* ───── Full-screen active-lesson overlay ───── */
.academy-lesson-overlay{
  display:none;position:fixed;inset:0;z-index:5000;
  background:rgba(2,8,6,.85);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
  padding:20px;
  animation:academyFade .25s ease;
}
.academy-lesson-overlay.open{display:flex}
@keyframes academyFade{from{opacity:0}to{opacity:1}}
.academy-lesson-modal{
  width:100%;max-width:560px;
  background:linear-gradient(180deg,#0f1a14,#0a1410);
  border:1px solid rgba(92,240,160,.35);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 40px rgba(92,240,160,.15);
  padding:28px 32px 24px;
  position:relative;
  animation:academyPop .3s cubic-bezier(.22,1.4,.4,1);
}
@keyframes academyPop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.academy-lesson-close{
  position:absolute;top:14px;right:16px;
  background:transparent;border:none;color:#6a8a78;font-size:22px;
  cursor:pointer;padding:4px 10px;line-height:1;border-radius:6px;
}
.academy-lesson-close:hover{color:#5cf0a0;background:rgba(92,240,160,.08)}
.academy-lesson-kicker{
  display:flex;align-items:center;gap:10px;
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;
  color:#6a8a78;text-transform:uppercase;margin-bottom:14px;
}
.academy-lesson-dots{display:flex;gap:5px}
.academy-lesson-dot{
  width:22px;height:4px;border-radius:2px;background:#1a2a20;
  transition:background .3s;
}
.academy-lesson-dot.done{background:#5cf0a0}
.academy-lesson-dot.active{background:linear-gradient(90deg,#5cf0a0,#00d074);box-shadow:0 0 8px rgba(92,240,160,.5)}
.academy-lesson-title{
  font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;
  color:#fff;letter-spacing:-.3px;line-height:1.2;margin-bottom:10px;
}
.academy-lesson-text{font-size:14px;line-height:1.65;color:#b8d8c0;margin-bottom:16px}
.academy-lesson-hint{
  display:none;padding:10px 14px;border-radius:8px;
  background:rgba(46,224,255,.06);border:1px solid rgba(46,224,255,.2);
  font-size:12px;color:#8ecae8;line-height:1.4;margin-bottom:16px;
}
.academy-lesson-hint.show{display:block}
.academy-lesson-status{
  display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;
  background:rgba(92,240,160,.08);border:1px solid rgba(92,240,160,.3);
  font-size:12px;color:#5cf0a0;font-weight:600;margin-bottom:16px;
  opacity:0;transform:translateY(4px);
  transition:opacity .25s, transform .25s;
}
.academy-lesson-status.show{opacity:1;transform:none}
.academy-lesson-nav{display:flex;gap:10px;justify-content:space-between;align-items:center}
.academy-lesson-btn{
  padding:10px 18px;border-radius:8px;
  font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;font-weight:800;
  cursor:pointer;transition:background .15s, color .15s, transform .15s;
}
.academy-lesson-btn.back{background:transparent;border:1px solid #2a3a30;color:#7a9a88}
.academy-lesson-btn.back:hover{color:#d0e8d8;border-color:#4a6a58}
.academy-lesson-btn.back:disabled{opacity:.3;cursor:not-allowed}
.academy-lesson-btn.skip{background:transparent;border:1px solid transparent;color:#6a8a78}
.academy-lesson-btn.skip:hover{color:#a0c8af}
.academy-lesson-btn.next{
  background:linear-gradient(180deg,#5cf0a0,#00b868);color:#041a0d;border:none;
  box-shadow:0 4px 14px rgba(0,184,104,.3);
}
.academy-lesson-btn.next:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,184,104,.4)}
.academy-lesson-btn.next.ready{animation:academyPulse 1s ease-in-out infinite}
@keyframes academyPulse{0%,100%{box-shadow:0 4px 14px rgba(0,184,104,.3)}50%{box-shadow:0 4px 14px rgba(0,184,104,.3),0 0 0 8px rgba(92,240,160,.15)}}

/* Arrow that points to the target control during a lesson */
.academy-target-arrow{
  position:fixed;z-index:4999;pointer-events:none;
  width:36px;height:36px;
  color:#5cf0a0;filter:drop-shadow(0 0 8px rgba(92,240,160,.8));
  animation:academyArrow 1.2s ease-in-out infinite;
}
@keyframes academyArrow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.academy-highlight{
  animation:academyHighlight 1.4s ease-in-out infinite;
  border-radius:6px;position:relative;z-index:50;
}
@keyframes academyHighlight{
  0%,100%{box-shadow:0 0 0 0 rgba(92,240,160,0),0 0 0 0 rgba(92,240,160,0)}
  50%{box-shadow:0 0 0 4px rgba(92,240,160,.4),0 0 22px rgba(92,240,160,.5)}
}

/* Completion celebration overlay */
.academy-celebrate{
  display:none;position:fixed;inset:0;z-index:5100;
  align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center, rgba(92,240,160,.25), rgba(0,0,0,.85) 60%);
  animation:academyFade .3s ease;
}
.academy-celebrate.open{display:flex}
.academy-celebrate-card{
  text-align:center;padding:40px 50px;
  background:linear-gradient(180deg,#0f1a14,#051410);
  border:1px solid rgba(92,240,160,.5);border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.9),0 0 60px rgba(92,240,160,.3);
  max-width:420px;
  animation:academyPop .4s cubic-bezier(.22,1.4,.4,1);
}
.academy-celebrate-icon{font-size:64px;line-height:1;margin-bottom:16px;display:block;animation:academyBounce .6s ease-in-out infinite alternate}
@keyframes academyBounce{from{transform:translateY(0) scale(1)}to{transform:translateY(-6px) scale(1.05)}}
.academy-celebrate-title{font-family:'Orbitron',sans-serif;font-size:26px;font-weight:900;color:#fff;margin-bottom:8px;letter-spacing:-.3px}
.academy-celebrate-sub{font-size:14px;color:#a0c8af;margin-bottom:24px;line-height:1.5}
.academy-celebrate-xp{
  font-family:'Orbitron',sans-serif;font-size:38px;font-weight:900;color:#5cf0a0;
  text-shadow:0 0 20px rgba(92,240,160,.6);margin-bottom:20px;letter-spacing:-.5px;
}
.academy-celebrate-xp small{font-size:14px;color:#7a9a88;font-weight:600;margin-left:4px}

/* Hide the old inline-styled controls on the LEARN tab if they still render */
#learnActiveLesson{display:none !important}

/* PPM segmented LED ladders */
.amp-ppm-col{display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:68px}
.amp-ppm-head{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;
  color:#9a9a9e;text-align:center;
}
.amp-ppm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.amp-ppm{
  display:flex;flex-direction:column-reverse;gap:1px;
  width:22px;height:110px;padding:2px;
  background:#020406;border-radius:3px;border:1px solid #1a2a30;
  box-shadow:inset 0 0 6px rgba(0,0,0,.9);
}
.amp-ppm .seg{flex:1;border-radius:1px;background:#061416;transition:background .04s,box-shadow .04s}
.amp-ppm .seg.on.g{background:#00d074;box-shadow:0 0 3px rgba(0,208,116,.7)}
.amp-ppm .seg.on.y{background:#ffcc00;box-shadow:0 0 3px rgba(255,204,0,.8)}
.amp-ppm .seg.on.o{background:#ff8a1a;box-shadow:0 0 4px rgba(255,138,26,.85)}
.amp-ppm .seg.on.r{background:#ff2e2e;box-shadow:0 0 5px rgba(255,46,46,.95)}
.amp-ppm-scale{
  display:flex;flex-direction:column;justify-content:space-between;
  height:110px;font-family:'Share Tech Mono',monospace;font-size:8px;color:#6a6a70;
  letter-spacing:.5px;padding:2px 0;
}

/* GONIOMETER + PHASE CORRELATION */
.amp-stereo{display:flex;flex-direction:column;gap:6px;justify-content:center}
.amp-gonio{
  width:100%;aspect-ratio:1.6/1;
  background:
    radial-gradient(circle at center, rgba(0,212,255,.04), transparent 70%),
    linear-gradient(180deg,#02080c,#01040a);
  border:1px solid #1a2a30;border-radius:6px;
  box-shadow:inset 0 0 20px rgba(0,0,0,.85);
  position:relative;overflow:hidden;
}
.amp-gonio canvas{width:100%;height:100%;display:block}
.amp-gonio-label{
  position:absolute;top:3px;left:6px;
  font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:2px;color:#5a7a88;
}
.amp-phase-wrap{
  display:flex;flex-direction:column;gap:3px;
}
.amp-phase-row{display:flex;justify-content:space-between;font-family:'Share Tech Mono',monospace;font-size:8px;color:#7a7a80;letter-spacing:1px}
.amp-phase-bar{
  position:relative;height:12px;border-radius:2px;
  background:linear-gradient(90deg,#ff2e2e 0%,#ffcc00 35%,#00d074 50%,#ffcc00 65%,#ff2e2e 100%);
  border:1px solid #0a0a0b;box-shadow:inset 0 0 4px rgba(0,0,0,.7);
}
.amp-phase-needle{
  position:absolute;top:-2px;bottom:-2px;width:3px;left:50%;transform:translateX(-50%);
  background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9),0 0 2px #fff;
  transition:left .06s ease-out;
}

/* LUFS DIGITAL READOUT PANEL */
.amp-lufs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:6px;align-content:center;
  padding:8px;background:#02080c;border:1px solid #1a2a30;border-radius:6px;
  box-shadow:inset 0 0 16px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.03);
  min-width:140px;
}
.amp-lufs-cell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:4px 6px;background:rgba(255,138,26,.03);border-radius:4px;border:1px solid rgba(255,138,26,.1)}
.amp-lufs-cell .lbl{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:1px;color:#6a6a70;text-transform:uppercase}
.amp-lufs-cell .val{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:800;color:#ffa544;text-shadow:0 0 6px rgba(255,138,26,.5);line-height:1;letter-spacing:.5px}
.amp-lufs-cell.target .val{color:#5cf0a0;text-shadow:0 0 6px rgba(92,240,160,.5)}
.amp-lufs-cell.warn .val{color:#ffcc00;text-shadow:0 0 6px rgba(255,204,0,.5)}
.amp-lufs-cell.danger .val{color:#ff5a5a;text-shadow:0 0 6px rgba(255,90,90,.5)}
.amp-lufs-cell.pill-wide{grid-column:1/-1}

/* TARGET LOUDNESS PRESETS — second row inside studio-presets */
.studio-target-row{
  display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;padding-top:8px;
  border-top:1px dashed rgba(255,255,255,.06);
}
.studio-target-btn{
  padding:6px 10px;background:linear-gradient(180deg,#1a1a1c,#0a0a0b);
  border:1px solid #2a2a2e;color:#9a9a9e;
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;font-weight:700;
  border-radius:4px;cursor:pointer;transition:all .15s;
}
.studio-target-btn:hover{border-color:#5cf0a0;color:#5cf0a0}
.studio-target-btn.active{background:linear-gradient(180deg,#1a3a2a,#0a1a12);color:#5cf0a0;border-color:#3a8a5a;box-shadow:0 0 10px rgba(92,240,160,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.studio-target-btn .tgt-lufs{color:#6a6a70;font-size:8px;margin-left:4px;font-weight:400}
.studio-target-btn.active .tgt-lufs{color:#4a8a6a}

/* MULTI-BAND COMPRESSOR — 3 mini GR meters */
.amp-mbc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.amp-mbc-band{padding:6px;background:#141416;border-radius:4px;border:1px solid #222}
.amp-mbc-band .band-name{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;color:#ffa544;font-weight:700;text-align:center;margin-bottom:4px}
.amp-mbc-band .band-gr{height:6px;background:#020406;border-radius:1px;position:relative;overflow:hidden;border:1px solid #1a2a30}
.amp-mbc-band .band-gr-fill{position:absolute;top:0;bottom:0;right:0;width:0%;background:linear-gradient(90deg,#00d074,#ffcc00,#ff2e2e);transition:width .05s}
.amp-mbc-band .band-val{font-family:'Share Tech Mono',monospace;font-size:8px;color:#7a7a80;text-align:center;margin-top:2px}

/* OSCILLOSCOPE + LUFS HISTORY */
.amp-scope-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.amp-scope,.amp-lufs-hist{
  padding:10px;background:#0a0a0b;border-radius:8px;border:1px solid #222;
}
.amp-scope canvas,.amp-lufs-hist canvas{
  width:100%;height:120px;display:block;border-radius:6px;
  background:linear-gradient(180deg,#04080c 0%,#020406 100%);
  border:1px solid #1a2a30;
}

/* MONO CHECK / DIM toggle on the bridge */
.amp-ctrl-col{display:flex;flex-direction:column;gap:6px;justify-content:center;min-width:100px}
.amp-ctrl-btn{
  padding:8px 10px;background:linear-gradient(180deg,#26262a,#111114);
  border:1px solid #2a2a2e;color:#cfcfd2;
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;font-weight:700;
  border-radius:4px;cursor:pointer;text-align:center;
}
.amp-ctrl-btn:hover{border-color:#ffa544;color:#ffa544}
.amp-ctrl-btn.active{background:linear-gradient(180deg,#3a2a18,#1f1610);color:#ffd28a;border-color:#c8841a;box-shadow:0 0 10px rgba(232,163,64,.4),inset 0 1px 0 rgba(255,255,255,.08)}

/* Responsive collapse for the bridge on narrow screens */
@media(max-width:1200px){
  .amp-bridge{grid-template-columns:1fr 1fr;gap:10px}
  .amp-vu-wrap{grid-column:1/-1}
  .amp-scope-wrap{grid-template-columns:1fr}
}

/* Sub-pixel crisp borders on retina */
@media(min-resolution:2dppx){
  .cdj,.mixer,.library,.beat-fx-panel,.scene-fx-panel,
  .sampler-panel,.playlists-panel,.ai-dj-panel,.analytics-panel,
  .midi-panel,.settings-panel,.youtube-panel,.deck-switch-bar{
    border-width:.5px;
  }
}

/* ====================================================
   STUDIO PRO — Music production studio (synth + organ
   + drum machine + TB-303 bass + sequencer + piano).
   Theme matches Pioneer dark/orange aesthetic.
   ==================================================== */
.sp-panel{padding:14px 16px;background:linear-gradient(160deg,#0a0a0c 0%,#0d0d10 100%);border:1px solid #1a1a1e;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.5);color:var(--text-bright,#eee);}
.sp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.sp-sub-label{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2.5px;color:var(--text-dim,#888);margin:8px 0 6px;text-transform:uppercase;}
.sp-block{background:linear-gradient(180deg,#0f0f12 0%,#0a0a0c 100%);border:1px solid #26262a;border-radius:10px;padding:10px 12px;margin-bottom:10px;position:relative;}
.sp-block-title{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2.2px;color:#ff8a1a;margin-bottom:8px;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.sp-block-title .sp-led{width:6px;height:6px;border-radius:50%;background:#2a2a2e;box-shadow:inset 0 0 3px rgba(0,0,0,.6);}
.sp-block-title.on .sp-led{background:#ff3b3b;box-shadow:0 0 8px #ff3b3b,inset 0 0 3px rgba(0,0,0,.4);}
.sp-preset-row{display:flex;gap:6px;flex-wrap:wrap;}
.sp-preset-btn{padding:8px 14px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.8px;background:#151519;color:#ccc;border:1px solid #2a2a2e;border-radius:6px;cursor:pointer;transition:.15s;}
.sp-preset-btn:hover{border-color:#ff8a1a;color:#ff8a1a;background:#1a1a1e;}
.sp-preset-btn.active{background:linear-gradient(180deg,#ff8a1a,#cc6a0a);color:#0a0a0c;border-color:#ff8a1a;font-weight:700;box-shadow:0 0 14px rgba(255,138,26,.35);}
.sp-mini-btn{padding:5px 10px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.6px;background:#17171b;color:#bbb;border:1px solid #28282c;border-radius:5px;cursor:pointer;transition:.1s;}
.sp-mini-btn:hover{border-color:#2aeaff;color:#2aeaff;}
.sp-mini-btn.active{background:#2aeaff;color:#0a0a0c;border-color:#2aeaff;font-weight:700;}

/* Synth/Organ knobs row */
.sp-knobs{display:flex;gap:14px;flex-wrap:wrap;}
.sp-knob-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:62px;}
.sp-knob{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#33333a,#141418 70%);border:2px solid #28282c;position:relative;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 -2px 6px rgba(0,0,0,.4);touch-action:none;user-select:none;}
.sp-knob::after{content:'';position:absolute;inset:8px;border-radius:50%;background:linear-gradient(160deg,#222228,#0a0a0c);box-shadow:inset 0 2px 3px rgba(0,0,0,.7);}
.sp-knob-indicator{position:absolute;top:3px;left:50%;width:2px;height:12px;background:#ff8a1a;margin-left:-1px;transform-origin:center 22px;pointer-events:none;box-shadow:0 0 4px #ff8a1a;z-index:2;}
.sp-knob-label{font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:1.4px;color:#888;text-transform:uppercase;}
.sp-knob-val{font-family:'Share Tech Mono',monospace;font-size:9px;color:#2aeaff;letter-spacing:1.2px;}

/* Oscillator waveform selector */
.sp-osc-wave{display:flex;gap:2px;}
.sp-wave-btn{width:28px;height:24px;background:#15151a;border:1px solid #28282c;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#888;font-size:14px;}
.sp-wave-btn:hover{color:#ff8a1a;border-color:#ff8a1a;}
.sp-wave-btn.active{background:#ff8a1a;color:#0a0a0c;border-color:#ff8a1a;}

/* Drum machine grid — 8 tracks x 16 steps */
.sp-seq-grid{display:grid;grid-template-columns:90px repeat(16,1fr);gap:3px;padding:6px;background:#08080a;border-radius:8px;border:1px solid #22222a;}
.sp-seq-label{display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.5px;color:#bbb;background:#0f0f13;border-radius:4px;border:1px solid #222228;}
.sp-seq-label .sp-mute{padding:2px 6px;font-size:8px;background:#15151a;border:1px solid #2a2a30;border-radius:3px;color:#888;cursor:pointer;}
.sp-seq-label .sp-mute.muted{background:#902020;color:#fff;border-color:#902020;}
.sp-seq-cell{aspect-ratio:1;border-radius:4px;background:#121216;border:1px solid #22222a;cursor:pointer;position:relative;transition:.06s;}
.sp-seq-cell:hover{border-color:#444;}
.sp-seq-cell.on{background:linear-gradient(180deg,#ff8a1a,#cc6a0a);border-color:#ffab4a;box-shadow:0 0 6px rgba(255,138,26,.5);}
.sp-seq-cell.on.accent{background:linear-gradient(180deg,#ff3b3b,#c42020);border-color:#ff6060;box-shadow:0 0 10px rgba(255,60,60,.7);}
.sp-seq-cell.playing{outline:2px solid #2aeaff;outline-offset:-1px;}
.sp-seq-cell.beat1{border-left:2px solid #2aeaff44;}

/* Synth panel grid */
.sp-synth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;}

/* Organ drawbars */
.sp-drawbars{display:flex;gap:6px;justify-content:center;padding:12px 6px;background:linear-gradient(180deg,#1a1410,#0d0a08);border:1px solid #2e2622;border-radius:8px;}
.sp-drawbar{display:flex;flex-direction:column;align-items:center;gap:6px;width:44px;}
.sp-drawbar-track{width:18px;height:130px;background:linear-gradient(180deg,#1a1a20,#050507);border:1px solid #2a2a30;border-radius:3px;position:relative;cursor:ns-resize;touch-action:none;user-select:none;overflow:hidden;}
.sp-drawbar-knob{position:absolute;left:50%;transform:translateX(-50%);width:30px;height:18px;background:linear-gradient(180deg,#e8e2d4,#a8a294);border:1px solid #5a564c;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.6);cursor:ns-resize;top:0;}
.sp-drawbar-knob.white{background:linear-gradient(180deg,#f0ebdd,#bab5a6);}
.sp-drawbar-knob.brown{background:linear-gradient(180deg,#8a6a40,#5a4220);}
.sp-drawbar-knob.black{background:linear-gradient(180deg,#35353a,#0a0a0d);}
.sp-drawbar-label{font-family:'Share Tech Mono',monospace;font-size:8px;color:#aaa;letter-spacing:.5px;text-align:center;}
.sp-drawbar-num{font-family:'Share Tech Mono',monospace;font-size:10px;color:#ff8a1a;font-weight:700;}

/* TB-303 bass sequencer */
.sp-bass-seq-row{display:grid;grid-template-columns:90px repeat(16,1fr);gap:3px;margin-bottom:4px;align-items:stretch;}
.sp-bass-step{background:#121216;border:1px solid #22222a;border-radius:4px;padding:4px 2px;display:flex;flex-direction:column;gap:2px;cursor:pointer;min-height:52px;position:relative;}
.sp-bass-step:hover{border-color:#444;}
.sp-bass-step.playing{outline:2px solid #2aeaff;outline-offset:-1px;}
.sp-bass-step.on{background:linear-gradient(180deg,#1a1a22,#0a0a0e);}
.sp-bass-step select{background:#0a0a0c;color:#ff8a1a;border:1px solid #333;border-radius:3px;font-family:'Share Tech Mono',monospace;font-size:9px;padding:1px;text-align:center;}
.sp-bass-step .sp-bass-flags{display:flex;gap:2px;font-family:'Share Tech Mono',monospace;font-size:7.5px;}
.sp-bass-step .sp-bass-flag{flex:1;text-align:center;background:#15151a;border:1px solid #28282c;border-radius:2px;color:#555;padding:1px 0;cursor:pointer;}
.sp-bass-step .sp-bass-flag.on{background:#ff3b3b;color:#fff;border-color:#ff3b3b;}
.sp-bass-step .sp-bass-flag.slide.on{background:#2aeaff;color:#0a0a0c;border-color:#2aeaff;}

/* ====================================================================
   TITAN LAB — VIBE SOUND CODING panel
   ==================================================================== */
.vibe-panel{
  max-width:1600px;margin:0 0 12px;padding:14px 16px;
  background:
    radial-gradient(circle at 0% 0%,rgba(42,234,255,.10),transparent 40%),
    radial-gradient(circle at 100% 100%,rgba(255,138,26,.12),transparent 40%),
    linear-gradient(160deg,#0b0b10 0%,#0a0a0c 100%);
  border:1px solid #2a2a32;border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;overflow:hidden;
}
.vibe-panel::before{
  content:'';position:absolute;inset:-1px;border-radius:14px;padding:1px;
  background:linear-gradient(90deg,rgba(42,234,255,.4),rgba(255,138,26,.4),rgba(42,234,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.35;
}
.vibe-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.vibe-badge{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:13px;letter-spacing:3px;
  color:#0a0a0c;background:linear-gradient(90deg,#2aeaff,#ff8a1a);
  padding:6px 14px;border-radius:20px;box-shadow:0 0 18px rgba(42,234,255,.45);
}
.vibe-sub{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1.5px;color:#aaa;}
.vibe-body{display:flex;gap:10px;align-items:stretch;margin-bottom:10px;}
.vibe-btn-col{display:flex;flex-direction:column;gap:6px;min-width:170px;}
.vibe-btn-row{display:flex;gap:6px;}
.vibe-var-btn{flex:1;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1.5px;background:#15151a !important;color:#2aeaff !important;border:1px solid #2aeaff !important;cursor:pointer;}
.vibe-var-btn:hover{filter:brightness(1.2);}
.vibe-mode-btn{flex:1;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1.5px;background:#15151a !important;color:#ff8a1a !important;border:1px solid #ff8a1a !important;cursor:pointer;}
.vibe-mode-btn[data-mode="loop"]{color:#ffc94a !important;border-color:#ffc94a !important;}
.vibe-mode-btn:hover{filter:brightness(1.2);}
.vibe-input{
  flex:1;min-height:60px;resize:vertical;
  font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:.5px;
  padding:10px 12px;color:#eee;background:#08080a;
  border:1px solid #26262e;border-radius:8px;outline:none;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
.vibe-input:focus{border-color:#2aeaff;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 10px rgba(42,234,255,.3);}
.vibe-gen-btn{
  min-width:160px;font-family:'Orbitron',sans-serif;font-weight:900;font-size:13px;letter-spacing:2px;
  background:linear-gradient(180deg,#2aeaff 0%,#0a8fa0 100%) !important;
  color:#0a0a0c !important;border:1px solid #2aeaff !important;
  box-shadow:0 0 18px rgba(42,234,255,.55) !important;cursor:pointer;
}
.vibe-gen-btn:hover{filter:brightness(1.1);}
.vibe-gen-btn.working{background:linear-gradient(180deg,#ff8a1a 0%,#a0540a 100%) !important;border-color:#ff8a1a !important;box-shadow:0 0 18px rgba(255,138,26,.55) !important;}
.vibe-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.vibe-chip{
  padding:6px 12px;font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:1.2px;
  background:#15151a;color:#eaeaea;border:1px solid #2a2a32;border-radius:16px;cursor:pointer;
}
.vibe-chip:hover{border-color:#2aeaff;color:#2aeaff;background:#161a1e;}
.vibe-chip.active{background:linear-gradient(180deg,#2aeaff,#0a8fa0);color:#0a0a0c;border-color:#2aeaff;font-weight:700;}
.vibe-status{font-family:'Share Tech Mono',monospace;font-size:11.5px;letter-spacing:1.1px;color:#cfeaff;min-height:15px;padding:8px 10px 4px;line-height:1.7;background:rgba(42,234,255,.05);border-left:2px solid #2aeaff;border-radius:0 6px 6px 0;margin-top:4px;}
.vibe-status.warn{color:#ffb84d;}
@media (max-width:720px){
  .vibe-body{flex-direction:column;}
  .vibe-gen-btn{min-width:0;width:100%;}
  .vibe-chips{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .vibe-chip{flex:0 0 auto;}
}

/* ====================================================================
   First-run onboarding tour — 30-second guided tour
   ==================================================================== */
.tour-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9998;pointer-events:none;backdrop-filter:blur(1px);}
.tour-highlight{position:relative !important;z-index:9999 !important;box-shadow:0 0 0 4px #ff8a1a,0 0 36px rgba(255,138,26,0.85) !important;border-radius:8px !important;animation:tourPulse 1.6s ease-in-out infinite;}
@keyframes tourPulse{0%,100%{box-shadow:0 0 0 4px #ff8a1a,0 0 36px rgba(255,138,26,0.85);}50%{box-shadow:0 0 0 4px #ffcf6a,0 0 60px rgba(255,200,80,1);}}
.tour-tooltip{position:fixed;z-index:10000;max-width:340px;background:linear-gradient(160deg,#0c0c10,#080809);border:1px solid #ff8a1a;border-radius:10px;padding:14px 16px;font-family:'Share Tech Mono',monospace;color:#eee;box-shadow:0 12px 40px rgba(0,0,0,.65),0 0 30px rgba(255,138,26,0.3);pointer-events:auto;}
.tour-step{font-size:9.5px;letter-spacing:2px;color:#888;}
.tour-title{font-family:'Orbitron',sans-serif;font-size:14px;color:#ff8a1a;margin:4px 0 6px;letter-spacing:1.5px;}
.tour-body{font-size:12px;line-height:1.55;color:#ddd;margin-bottom:12px;}
.tour-actions{display:flex;gap:8px;justify-content:flex-end;}
.tour-actions button{padding:7px 14px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1.4px;cursor:pointer;border-radius:5px;border:1px solid;background:#15151a;color:#888;border-color:#2a2a30;}
.tour-actions .tour-next{background:linear-gradient(180deg,#ff8a1a,#cc6a0a);color:#0a0a0c;border-color:#ff8a1a;font-weight:900;}
.tour-actions .tour-next:hover{filter:brightness(1.1);}
.tour-actions .tour-skip:hover{color:#ff5555;border-color:#ff5555;}

/* ====================================================================
   TITAN LAB — STUDIO MIXER (full-screen)
   ==================================================================== */
.spmx-overlay{
  position:fixed;inset:0;z-index:9999;background:linear-gradient(160deg,#060608 0%,#0d0d10 100%);
  display:none;flex-direction:column;color:#eee;padding:14px 18px;overflow:hidden;
}
.spmx-overlay.open{display:flex;}
.spmx-head{display:flex;align-items:center;justify-content:space-between;padding:4px 0 10px;border-bottom:1px solid #1e1e24;margin-bottom:10px;}
.spmx-title{font-family:'Orbitron',sans-serif;font-size:18px;letter-spacing:3px;color:#ff8a1a;text-shadow:0 0 14px rgba(255,138,26,.55);font-weight:900;}
.spmx-head-right{display:flex;align-items:center;gap:10px;}
.spmx-hint{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.4px;color:#888;}
.spmx-body{flex:1;display:flex;gap:14px;padding:4px 2px 20px;overflow-x:auto;overflow-y:hidden;align-items:stretch;}
.spmx-group{display:flex;flex-direction:column;background:linear-gradient(180deg,#0f0f13,#08080a);border:1px solid #1e1e24;border-radius:10px;padding:8px 8px 10px;min-height:100%;}
.spmx-group-title{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2.4px;color:#ff8a1a;text-align:center;padding-bottom:6px;border-bottom:1px dashed #242428;margin-bottom:8px;text-transform:uppercase;}
.spmx-row{display:flex;gap:6px;flex:1;}
.spmx-strip{
  width:62px;display:flex;flex-direction:column;align-items:stretch;gap:4px;
  padding:6px 4px 8px;background:linear-gradient(180deg,#121216,#0a0a0c);
  border:1px solid #22222a;border-radius:7px;position:relative;
}
.spmx-strip.master{width:74px;border-color:#ff8a1a;box-shadow:0 0 16px rgba(255,138,26,.25);}
.spmx-strip .spmx-label{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.2px;color:#ff8a1a;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 0;border-bottom:1px solid #1a1a1e;}
.spmx-btns{display:flex;gap:3px;justify-content:center;}
.spmx-btn{flex:1;padding:4px 0;font-family:'Share Tech Mono',monospace;font-size:9px;background:#15151a;border:1px solid #28282c;color:#aaa;border-radius:3px;cursor:pointer;font-weight:700;}
.spmx-btn:hover{border-color:#666;color:#eee;}
.spmx-btn.mute.on{background:#ff3b3b;color:#fff;border-color:#ff3b3b;}
.spmx-btn.solo.on{background:#ffc94a;color:#0a0a0c;border-color:#ffc94a;}
.spmx-pan-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;}
.spmx-sub{font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:1px;color:#888;text-align:center;}
.spmx-pan{width:100%;height:14px;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent;}
.spmx-pan::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,#15151a,#2aeaff,#15151a);border-radius:2px;}
.spmx-pan::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5px;border-radius:50%;background:#ff8a1a;border:1px solid #0a0a0c;box-shadow:0 0 4px #ff8a1a;}
.spmx-pan-val{color:#2aeaff;font-size:9px;}
.spmx-meter{position:relative;height:110px;width:100%;background:#050506;border:1px solid #1a1a1e;border-radius:3px;overflow:hidden;display:flex;align-items:flex-end;}
.spmx-meter-bar{width:100%;height:0%;background:#2aeaff;transition:height .04s linear,background .04s linear;}
.spmx-fader{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:ns-resize;writing-mode:bt-lr;}
.spmx-fader[orient="vertical"]{writing-mode:bt-lr;-webkit-appearance:slider-vertical;appearance:slider-vertical;height:150px;width:30px;margin:4px auto 2px;}
.spmx-fader::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:10px;background:linear-gradient(180deg,#ffcf6a,#ff8a1a);border:1px solid #0a0a0c;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.6);}
.spmx-vol{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;color:#ff8a1a;text-align:center;padding-top:2px;}
@media (max-width:800px){
  .spmx-overlay{padding:10px 8px;}
  .spmx-strip{width:54px;}
  .spmx-fader[orient="vertical"]{height:120px;}
  .spmx-meter{height:80px;}
}

/* Piano keyboard */
.sp-piano-wrap{margin-top:10px;padding:10px;background:linear-gradient(180deg,#18120c,#0a0806);border:1px solid #2e2420;border-radius:8px;}
.sp-piano{position:relative;height:110px;background:#0a0a0c;border-radius:4px;user-select:none;overflow:hidden;}
.sp-key{position:absolute;top:0;bottom:0;cursor:pointer;transition:.04s;}
.sp-key-white{background:linear-gradient(180deg,#f2ebd8,#c5bea8);border:1px solid #2a2a2e;border-radius:0 0 4px 4px;z-index:1;}
.sp-key-white.active{background:linear-gradient(180deg,#ff8a1a,#cc6a0a);}
.sp-key-black{background:linear-gradient(180deg,#1a1a1e,#050507);border:1px solid #0a0a0d;border-radius:0 0 3px 3px;height:62%;z-index:2;box-shadow:0 2px 4px rgba(0,0,0,.6);}
.sp-key-black.active{background:linear-gradient(180deg,#ff8a1a,#8a3f0a);}
.sp-key-label{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-family:'Share Tech Mono',monospace;font-size:8px;color:#555;pointer-events:none;}
.sp-key-black .sp-key-label{color:#777;}

/* Master section */
.sp-master{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:8px;}
.sp-master-block{background:#0e0e12;border:1px solid #26262a;border-radius:8px;padding:10px;}
.sp-master-title{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:#2aeaff;margin-bottom:8px;}

/* Transport button states */
.sp-transport .tool-btn.play-on{background:#2aea6a;color:#0a0a0c;border-color:#2aea6a;}
.sp-transport .tool-btn.rec-on{background:#ff3b3b;color:#fff;border-color:#ff3b3b;animation:sp-rec-blink 1s infinite;}
@keyframes sp-rec-blink{50%{opacity:.55;}}

/* Selector chips (synth / organ / bass active instrument) */
.sp-inst-row{display:flex;gap:4px;margin-bottom:8px;}
.sp-inst-chip{padding:6px 14px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.6px;background:#13131a;color:#888;border:1px solid #26262a;border-radius:6px 6px 0 0;cursor:pointer;}
.sp-inst-chip.active{background:linear-gradient(180deg,#2a2a30,#0a0a0c);color:#ff8a1a;border-color:#ff8a1a;border-bottom:none;}

/* ====================================================
   MOBILE-FIRST OVERRIDES — mixer 4ch single row, decks
   stack, Studio/Studio Pro panels fit phones cleanly,
   all controls with proper touch targets.
   ==================================================== */
@media(max-width:820px){
  .console,.console.show-all{grid-template-columns:1fr!important;gap:8px}
  .cdj{padding:8px;min-width:0}
  /* Mixer — keep 4 channels side-by-side even on tablets */
  .channels{grid-template-columns:repeat(4,1fr)!important;gap:4px!important}
  .channel{min-width:0;align-items:stretch}
  .channel .fader-wrap{width:22px;height:130px;margin:0 auto}
  .channel .vu-meter{width:10px;height:130px;margin:0 auto}
  .channel .knob,.channel .knob.small{width:30px;height:30px}
  .channel .knob-label{font-size:8px;letter-spacing:.5px}
  /* Tabs — horizontal scroll, bigger tap targets */
  .main-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;flex-wrap:nowrap}
  .tab-btn{flex:0 0 auto;padding:10px 14px;font-size:11px;min-width:90px;min-height:40px}
  /* Studio Pro fits narrow viewports */
  .sp-synth-grid{grid-template-columns:1fr}
  .sp-master{grid-template-columns:1fr}
  .sp-seq-grid{grid-template-columns:62px repeat(16,1fr);gap:2px;padding:5px}
  .sp-seq-label{font-size:9px;padding:0 4px}
  .sp-seq-label .sp-mute{padding:1px 4px;font-size:7.5px}
  .sp-drawbars{flex-wrap:wrap;gap:4px;justify-content:center}
  .sp-drawbar{width:38px}
  .sp-drawbar-track{height:100px}
  .sp-knob{width:44px;height:44px}
  .sp-knob-wrap{min-width:56px}
  .sp-piano{height:92px}
  .sp-preset-row{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:4px}
  .sp-preset-btn{flex:0 0 auto}
  .sp-inst-chip{flex:1;text-align:center}
  /* Settings / editor — full width, single column blocks */
  .settings-panel{padding:8px;max-width:100%!important}
  .editor-grid,.studio-proc-grid{grid-template-columns:1fr!important}
  .studio-knobs{gap:8px;flex-wrap:wrap;justify-content:center}
  /* Library/track rows — minimal on narrow */
  .library-actions{gap:6px}
}

@media(max-width:520px){
  /* FORCE 4-channel mixer in single row (override previous 2-col) */
  .channels{grid-template-columns:repeat(4,1fr)!important;gap:3px!important}
  .channel{gap:4px}
  .channel .fader-wrap{width:20px;height:108px}
  .channel .vu-meter{width:9px;height:108px}
  .channel .knob,.channel .knob.small{width:26px;height:26px}
  .channel .knob-label{font-size:7.5px;letter-spacing:.5px}
  /* Bigger tap targets for deck controls */
  .hot-cues{grid-template-columns:repeat(4,1fr);gap:3px}
  .cue-btn{padding:9px 2px;min-height:36px;font-size:10px}
  .big-btn{padding:12px 4px;min-height:44px;font-size:11px}
  .loop-btn,.jump-btn,.util-btn{min-height:30px;padding:6px 2px}
  .tempo-btn{min-height:32px}
  .tab-btn{min-height:40px;padding:10px 12px;min-width:82px}
  /* Jog wheel size */
  .jog-wheel{width:80vw;height:80vw;max-width:300px;max-height:300px}
  /* Studio Pro tighter */
  .sp-seq-grid{grid-template-columns:54px repeat(16,1fr);gap:2px;padding:4px}
  .sp-seq-label{font-size:8.5px;padding:0 3px}
  .sp-seq-label .sp-mute{padding:1px 3px;font-size:7px}
  .sp-preset-btn{padding:8px 11px;font-size:9px;min-height:36px}
  .sp-mini-btn{padding:6px 9px;font-size:9px;min-height:32px}
  .sp-knob{width:40px;height:40px}
  .sp-knob-wrap{min-width:52px}
  .sp-knob-label{font-size:7.5px}
  .sp-drawbar{width:34px}
  .sp-drawbar-track{height:88px}
  .sp-piano{height:82px}
  .sp-inst-chip{padding:8px 10px;font-size:10px;min-height:36px}
  .sp-bass-step{min-height:48px;padding:3px 2px}
  /* Modal fits viewport */
  .modal-box{max-width:calc(100vw - 16px);max-height:calc(100vh - 60px);overflow-y:auto}
  /* Input fields taller for comfortable typing */
  input[type="text"],input[type="number"],input[type="url"],select,textarea,
  .url-input,.search-input,.sort-select,.filter-select{min-height:36px;font-size:12px}
}

@media(max-width:360px){
  /* Tiny phone — still 4-channel mixer, minimal sizing */
  .channels{grid-template-columns:repeat(4,1fr)!important;gap:2px!important}
  .channel .fader-wrap{width:18px;height:92px}
  .channel .vu-meter{width:8px;height:92px}
  .channel .knob,.channel .knob.small{width:24px;height:24px}
  .channel .knob-label{font-size:7px}
  .tab-btn{min-width:72px;padding:9px 10px;font-size:10px}
  .sp-seq-grid{grid-template-columns:46px repeat(16,1fr);gap:1px}
  .sp-seq-label{font-size:8px;padding:0 2px}
  .sp-knob{width:36px;height:36px}
}

/* Pointer: coarse (touch) — enforce larger tap targets & disable hover FX */
@media (hover:none) and (pointer:coarse){
  button,.tool-btn,.tab-btn,.big-btn,.loop-btn,.jump-btn,.util-btn,
  .scene-btn,.pad-mode-btn,.tempo-btn,.beat-btn,.cue-btn,.mic-btn,
  .automix-btn,.sp-preset-btn,.sp-mini-btn,.sp-inst-chip,.sp-wave-btn,
  .studio-preset-btn,.dsb-btn{
    -webkit-tap-highlight-color:transparent;
  }
  .knob,.sp-knob,.sp-drawbar-track,.fader-handle,.crossfader-handle,
  .tempo-handle,.jog-platter,.sp-key{touch-action:none}
  .library-list,.playlist-grid,.sessions-grid,.history-list,
  .tab-content,.main-tabs,.sp-preset-row{
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  /* Make sure text inputs don't trigger iOS zoom */
  input[type="text"],input[type="number"],input[type="url"],input[type="search"],
  select,textarea{font-size:16px!important}
}

/* Portrait lock guidance for very narrow — keep mixer usable */
@media(max-width:480px) and (orientation:portrait){
  .mixer{padding:6px;gap:6px}
  .master-section,.isolator-panel{grid-template-columns:repeat(3,1fr);gap:3px;padding:4px}
  .mic-section{grid-template-columns:repeat(4,1fr);gap:3px;padding:4px}
  .crossfader-section{padding:6px}
  .color-fx-row,.color-fx-grid{padding:4px;gap:3px}
}

/* ================================================================
   DJ DECK FOCUS — 2 big decks, no internal mixer
   Tailored for performers using an external DJ mixer (DJM / Xone / etc.)
   Toggled via `body.dj-focus-mode` + `.dsb-btn[data-pair="DJAB|DJCD"]`.
   ================================================================ */
.dsb-dj-focus{
  background:linear-gradient(180deg,#4a2e1e 0%,#1f120a 100%);
  border:2px solid rgba(255,138,26,.75);color:#ffcc88;
  letter-spacing:1.8px;font-size:12px;font-weight:900;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 10px rgba(255,138,26,.28);
  text-shadow:0 0 6px rgba(255,138,26,.4);
}
.dsb-dj-focus:hover{border-color:var(--orange);color:#fff;box-shadow:0 0 18px rgba(255,138,26,.6)}
.dsb-dj-focus.active{
  background:linear-gradient(180deg,#ff9a40 0%,var(--orange) 55%,#aa4a00 100%) !important;
  color:#0a0a0a !important;border-color:#ffd9a8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 22px rgba(255,138,26,.8) !important;
}

/* ── Clear the stage — only the two decks on screen in DJ FOCUS ── */
body.dj-focus-mode #mixer-container,
body.dj-focus-mode .mixer-toolbar,
body.dj-focus-mode .compact-decks,
body.dj-focus-mode .beat-fx-panel,
body.dj-focus-mode .scene-fx-panel,
body.dj-focus-mode .library,
body.dj-focus-mode .rgb-ambient{
  display:none !important;
}

body.dj-focus-mode body,body.dj-focus-mode{padding:8px;gap:8px}
body.dj-focus-mode .console{
  grid-template-columns:1fr 1fr !important;
  gap:14px;
  max-width:1400px;
  width:100%;
  margin:0 auto;
  padding:4px;
  align-items:stretch;
}
@media(min-width:1920px){
  body.dj-focus-mode .console{max-width:1500px;gap:20px}
}
@media(max-width:1200px){
  body.dj-focus-mode .console{max-width:100%;gap:10px}
}
body.dj-focus-mode .header-bar,
body.dj-focus-mode .main-tabs,
body.dj-focus-mode .deck-switch-bar{
  max-width:1400px;width:100%;margin-left:auto;margin-right:auto;
}
@media(min-width:1920px){
  body.dj-focus-mode .header-bar,
  body.dj-focus-mode .main-tabs,
  body.dj-focus-mode .deck-switch-bar{max-width:1500px}
}

body.dj-focus-mode::before{
  content:'🎛 DJ DECK FOCUS · EXTERNAL MIXER MODE';
  position:fixed;top:6px;left:50%;transform:translateX(-50%);
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;
  color:var(--orange);background:rgba(10,10,14,.88);
  padding:5px 16px;border:1px solid rgba(255,138,26,.45);border-radius:20px;
  box-shadow:0 4px 14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  z-index:50;pointer-events:none;backdrop-filter:blur(10px);
}

/* ══════════════════════════════════════════════════════════════
   CDJ-3000-INSPIRED LAYOUT — chassis + grid areas
   ══════════════════════════════════════════════════════════════ */
body.dj-focus-mode .cdj{
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(0,2fr) minmax(190px,1fr);
  grid-template-rows:auto auto auto auto auto 1fr auto;
  grid-template-areas:
    "hdr hdr hdr"
    "scr scr scr"
    "pmd jog bjp"
    "cue jog utl"
    "lop jog tmp"
    "trn trn tmp"
    "vol vol vol";
  gap:12px 16px;
  padding:22px 20px 28px;
  border-radius:22px;
  border:2px solid #0a0a0d;
  background:
    linear-gradient(180deg,
      #32323a 0%,#23232a 22%,
      #16161b 55%,#0f0f13 100%);
  box-shadow:
    0 0 0 1px rgba(var(--deck-accent-rgb),.18),
    0 0 70px rgba(var(--deck-accent-rgb),.12),
    0 30px 90px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.75);
  position:relative;
  overflow:visible;
  align-content:start;
}
body.dj-focus-mode .cdj .deck-header   {grid-area:hdr}
body.dj-focus-mode .cdj .screen        {grid-area:scr}
body.dj-focus-mode .cdj .pad-mode-row  {grid-area:pmd}
body.dj-focus-mode .cdj .hot-cues      {grid-area:cue;align-content:center}
body.dj-focus-mode .cdj .loop-section  {grid-area:lop}
body.dj-focus-mode .cdj .beat-jump     {grid-area:bjp}
body.dj-focus-mode .cdj .deck-utils    {grid-area:utl}
body.dj-focus-mode .cdj .jog-wrapper   {grid-area:jog;place-self:center;margin:0}
body.dj-focus-mode .cdj .transport     {grid-area:trn;margin-top:6px}
body.dj-focus-mode .cdj .tempo-section {grid-area:tmp;align-self:stretch;display:flex;flex-direction:column}
body.dj-focus-mode .cdj .tempo-section .tempo-btn-row{flex:1}
body.dj-focus-mode .cdj .dj-focus-vol  {grid-area:vol;display:grid}

body.dj-focus-mode .cdj .jog-wrapper{
  grid-area:jog;
  place-self:center;
  min-width:0;max-width:100%;
  width:100%;margin:0;
  display:flex;align-items:center;justify-content:center;
}

/* ── Per-deck channel volume strip (DJ FOCUS only) ───────────── */
.dj-focus-vol{display:none}
body.dj-focus-mode .dj-focus-vol{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  gap:6px 10px;
  padding:10px 14px;
  margin-top:6px;
  border-radius:10px;
  background:linear-gradient(180deg,#141418 0%,#08080b 100%);
  border:1px solid rgba(var(--deck-accent-rgb),.22);
  box-shadow:inset 0 0 20px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5);
  align-items:center;
}
.dj-focus-vol .djfv-head{
  grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
  font-family:'Orbitron',sans-serif;letter-spacing:2.5px;
}
.dj-focus-vol .djfv-label{
  font-size:11px;font-weight:800;color:var(--deck-accent);
  text-shadow:0 0 8px rgba(var(--deck-accent-rgb),.5);
}
.dj-focus-vol .djfv-mute{
  padding:6px 14px;font-size:10px;letter-spacing:2px;font-weight:800;
  background:linear-gradient(180deg,#2a2a2e 0%,#141418 100%);
  border:1px solid #3a3a42;color:var(--text-dim);border-radius:5px;cursor:pointer;
  transition:all .15s;font-family:'Orbitron',sans-serif;
}
.dj-focus-vol .djfv-mute:hover{border-color:var(--red);color:var(--red)}
.dj-focus-vol .djfv-mute.active{
  background:linear-gradient(180deg,#ff4040 0%,#aa1010 100%);
  color:#fff;border-color:#ff8080;box-shadow:0 0 14px rgba(255,60,60,.6);
}
.dj-focus-vol .djfv-body{
  grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto 60px;
  gap:10px;align-items:center;
}
.dj-focus-vol .djfv-btn{
  width:42px;height:42px;border-radius:8px;
  background:linear-gradient(180deg,#3a3a42 0%,#16161a 100%);
  border:1px solid #4a4a52;color:var(--deck-accent);
  font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.5);
  transition:all .1s;
}
.dj-focus-vol .djfv-btn:hover{border-color:var(--deck-accent);box-shadow:0 0 14px rgba(var(--deck-accent-rgb),.6)}
.dj-focus-vol .djfv-btn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.dj-focus-vol .djfv-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:10px;border-radius:5px;
  background:linear-gradient(90deg,
    #141418 0%,
    rgba(var(--deck-accent-rgb),.6) var(--djfv-pct,80%),
    #0a0a0d var(--djfv-pct,80%),
    #0a0a0d 100%);
  outline:none;cursor:pointer;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
  border:1px solid #2a2a2e;
}
.dj-focus-vol .djfv-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:6px;
  background:linear-gradient(180deg,#f0f0f2 0%,#9a9a9e 100%);
  border:2px solid var(--deck-accent);cursor:grab;
  box-shadow:0 3px 10px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.7),
    0 0 12px rgba(var(--deck-accent-rgb),.5);
}
.dj-focus-vol .djfv-slider::-moz-range-thumb{
  width:26px;height:26px;border-radius:6px;
  background:linear-gradient(180deg,#f0f0f2 0%,#9a9a9e 100%);
  border:2px solid var(--deck-accent);cursor:grab;
  box-shadow:0 3px 10px rgba(0,0,0,.8),0 0 12px rgba(var(--deck-accent-rgb),.5);
}
.dj-focus-vol .djfv-value{
  font-family:'Orbitron',sans-serif;font-size:18px;font-weight:800;
  color:var(--deck-accent);text-align:center;min-width:54px;
  padding:7px 4px;border-radius:6px;
  background:#020608;border:1px solid rgba(var(--deck-accent-rgb),.35);
  text-shadow:0 0 10px rgba(var(--deck-accent-rgb),.6);
  letter-spacing:1px;
}
.dj-focus-vol.muted .djfv-slider,
.dj-focus-vol.muted .djfv-value,
.dj-focus-vol.muted .djfv-btn{opacity:.45}
.dj-focus-vol.muted .djfv-value{color:var(--red);border-color:var(--red)}

body.dj-focus-mode .cdj::after{
  content:'Pioneer CDJ-3000 · NEXUS PRO';
  position:absolute;left:0;right:0;bottom:8px;top:auto;
  width:auto;height:auto;background:none;
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:4px;
  color:rgba(255,255,255,.16);text-align:center;pointer-events:none;z-index:1;
}
body.dj-focus-mode .cdj[data-deck]::before{z-index:2}

body.dj-focus-mode .deck-header{
  padding:6px 14px 10px;
  border-bottom:1px solid rgba(var(--deck-accent-rgb),.22);
  align-items:center;
}
body.dj-focus-mode .deck-label{font-size:13px;letter-spacing:3px}
body.dj-focus-mode .deck-label .model{color:var(--deck-accent)}
body.dj-focus-mode .deck-number{
  font-size:36px;padding:4px 18px;letter-spacing:2px;
  background:linear-gradient(180deg,var(--deck-accent) 0%,#000 250%);
  color:#fff;border-radius:8px;
  box-shadow:0 0 18px rgba(var(--deck-accent-rgb),.45),inset 0 1px 0 rgba(255,255,255,.4);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
body.dj-focus-mode .deck-upload-btn,
body.dj-focus-mode .deck-lib-btn{padding:8px 12px;font-size:11px}

body.dj-focus-mode .screen{
  padding:14px 16px;
  border-radius:12px;
  background:radial-gradient(ellipse at top,rgba(var(--deck-accent-rgb),.12),#020608 65%);
  border:1px solid rgba(var(--deck-accent-rgb),.35);
  box-shadow:inset 0 0 24px rgba(var(--deck-accent-rgb),.08),0 2px 10px rgba(0,0,0,.6);
}
body.dj-focus-mode .screen-top{gap:14px}
body.dj-focus-mode .track-title{font-size:18px;letter-spacing:1.5px;font-weight:800}
body.dj-focus-mode .track-artist{font-size:13px;letter-spacing:1px;opacity:.85}
body.dj-focus-mode .screen-bpm{font-size:36px;line-height:1;text-shadow:0 0 14px rgba(var(--deck-accent-rgb),.8)}
body.dj-focus-mode .screen-bpm-label{font-size:10px;letter-spacing:2px}
body.dj-focus-mode .screen-key{font-size:16px;padding:3px 8px}
body.dj-focus-mode .waveform{height:78px;margin-top:10px}
body.dj-focus-mode .time-row{margin-top:10px}
body.dj-focus-mode .time-value{font-size:24px;letter-spacing:1px}
body.dj-focus-mode .time-label{font-size:10px;letter-spacing:2.5px}

body.dj-focus-mode .jog-wheel{
  width:100%;max-width:420px;
  height:auto;aspect-ratio:1;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.7));
}
body.dj-focus-mode .jog-center-screen{width:34%;height:34%;min-width:60px;min-height:60px;max-width:150px;max-height:150px}
body.dj-focus-mode .jog-center-screen .bpm-display{font-size:clamp(16px,3vw,32px)}
body.dj-focus-mode .jog-center-screen .deck-badge{font-size:10px;letter-spacing:3px;margin-top:5px}

body.dj-focus-mode .hot-cues{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:10px;border-radius:10px;
  background:linear-gradient(180deg,#0e0e12 0%,#050507 100%);
  border:1px solid #1a1a1f;
  box-shadow:inset 0 0 22px rgba(0,0,0,.6);
}
body.dj-focus-mode .cue-btn{
  font-size:16px;height:56px;letter-spacing:1px;padding:0;
  border-radius:7px;font-weight:800;
}

body.dj-focus-mode .pad-mode-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  padding:6px;border-radius:8px;background:#0a0a0d;border:1px solid #1a1a1f;
}
body.dj-focus-mode .pad-mode-btn{font-size:11px;padding:12px 3px;letter-spacing:1.4px}

body.dj-focus-mode .loop-section{display:grid;grid-template-columns:1fr 1fr;gap:5px}
body.dj-focus-mode .loop-section > [data-autoloop]{grid-column:1/-1}
body.dj-focus-mode .beat-jump{display:grid;grid-template-columns:1fr 1fr;gap:5px}
body.dj-focus-mode .deck-utils{display:grid;grid-template-columns:1fr 1fr;gap:5px}
body.dj-focus-mode .loop-btn,
body.dj-focus-mode .jump-btn{font-size:12px;padding:13px 4px;letter-spacing:1.5px;min-height:44px}
body.dj-focus-mode .util-btn{font-size:11px;padding:13px 3px;letter-spacing:1.2px;min-height:42px}

body.dj-focus-mode .transport{
  display:grid;grid-template-columns:1fr 1.4fr;gap:12px;
  padding:10px 8px 6px;
}
body.dj-focus-mode .big-btn{
  padding:24px 14px;font-size:17px;letter-spacing:3px;
  border-radius:10px;min-height:74px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(0,0,0,.6);
}
body.dj-focus-mode .big-btn .icon{font-size:26px}
body.dj-focus-mode .big-btn.play.active{box-shadow:0 0 30px rgba(0,255,122,.55),inset 0 1px 0 rgba(255,255,255,.3)}

body.dj-focus-mode .tempo-section{padding:10px}
body.dj-focus-mode .tempo-header{font-size:12px;letter-spacing:2px}
body.dj-focus-mode .tempo-display-big{font-size:28px;padding:12px}
body.dj-focus-mode .tempo-btn{padding:14px 4px;font-size:18px;min-height:48px}
body.dj-focus-mode .tempo-btn.reset{font-size:13px}
body.dj-focus-mode .step-btn{padding:8px 10px;font-size:11px}

/* 4K / ultra-wide */
@media(min-width:2100px){
  body.dj-focus-mode .cdj{padding:28px 24px 34px}
  body.dj-focus-mode .jog-wheel{max-width:520px}
  body.dj-focus-mode .deck-number{font-size:44px;padding:5px 22px}
  body.dj-focus-mode .screen-bpm{font-size:44px}
  body.dj-focus-mode .track-title{font-size:22px}
  body.dj-focus-mode .time-value{font-size:30px}
  body.dj-focus-mode .big-btn{padding:30px 18px;font-size:20px;min-height:88px}
  body.dj-focus-mode .cue-btn{height:66px;font-size:18px}
}

@media(max-width:1700px){
  body.dj-focus-mode .cdj{grid-template-columns:minmax(170px,1fr) minmax(0,1.9fr) minmax(170px,1fr);padding:18px 16px 24px;gap:10px 12px}
  body.dj-focus-mode .jog-wheel{max-width:380px}
  body.dj-focus-mode .screen-bpm{font-size:30px}
  body.dj-focus-mode .track-title{font-size:16px}
  body.dj-focus-mode .big-btn{padding:20px 12px;font-size:15px;min-height:66px}
  body.dj-focus-mode .cue-btn{height:50px;font-size:14px}
}

@media(max-width:1400px){
  body.dj-focus-mode .cdj{grid-template-columns:minmax(150px,1fr) minmax(0,1.8fr) minmax(150px,1fr);padding:14px 12px 22px;gap:8px 10px}
  body.dj-focus-mode .jog-wheel{max-width:310px}
  body.dj-focus-mode .screen-bpm{font-size:26px}
  body.dj-focus-mode .track-title{font-size:14px}
  body.dj-focus-mode .cue-btn{height:44px;font-size:12px}
  body.dj-focus-mode .big-btn{padding:16px 10px;font-size:14px;min-height:58px}
  body.dj-focus-mode .tempo-display-big{font-size:22px}
}

@media(max-width:1100px){
  body.dj-focus-mode .cdj{
    grid-template-columns:minmax(120px,1fr) minmax(0,1.7fr) minmax(120px,1fr);
    padding:12px 10px 20px;gap:7px 8px;
  }
  body.dj-focus-mode .jog-wheel{max-width:260px}
  body.dj-focus-mode .deck-number{font-size:26px;padding:3px 12px}
  body.dj-focus-mode .screen-bpm{font-size:22px}
  body.dj-focus-mode .cue-btn{height:40px;font-size:11px}
  body.dj-focus-mode .big-btn{padding:14px 8px;font-size:13px;min-height:54px}
  body.dj-focus-mode .tempo-display-big{font-size:18px}
}

@media(max-width:820px){
  body.dj-focus-mode .console{grid-template-columns:1fr !important;gap:12px}
  body.dj-focus-mode::before{font-size:8px;letter-spacing:2px;padding:3px 10px;top:4px}
  body.dj-focus-mode .cdj{
    display:flex;flex-direction:column;gap:8px;
    padding:14px 12px 18px;
    grid-template-areas:none;
  }
  body.dj-focus-mode .cdj .jog-wrapper{order:6;align-self:center;margin:8px 0}
  body.dj-focus-mode .cdj .deck-header{order:1}
  body.dj-focus-mode .cdj .screen{order:2}
  body.dj-focus-mode .cdj .pad-mode-row{order:3}
  body.dj-focus-mode .cdj .hot-cues{order:4}
  body.dj-focus-mode .cdj .loop-section{order:5;display:grid;grid-template-columns:repeat(3,1fr) auto}
  body.dj-focus-mode .cdj .transport{order:7;grid-template-columns:1fr 1.4fr}
  body.dj-focus-mode .cdj .beat-jump{order:8;grid-template-columns:repeat(4,1fr)}
  body.dj-focus-mode .cdj .deck-utils{order:9;grid-template-columns:repeat(5,1fr)}
  body.dj-focus-mode .cdj .tempo-section{order:10}
  body.dj-focus-mode .cdj .jog-wrapper{width:auto;max-width:300px}
  body.dj-focus-mode .jog-wheel{width:min(70vw,300px);max-width:300px}
  body.dj-focus-mode .jog-center-screen .bpm-display{font-size:20px}
  body.dj-focus-mode .big-btn{padding:16px 10px;font-size:14px;min-height:58px}
  body.dj-focus-mode .cue-btn{height:46px;font-size:12px}
  body.dj-focus-mode .screen-bpm{font-size:26px}
  body.dj-focus-mode .tempo-display-big{font-size:22px}
}

@media(max-width:520px){
  body.dj-focus-mode::before{display:none}
  body.dj-focus-mode .cdj{padding:10px 8px 14px}
  body.dj-focus-mode .cdj .jog-wrapper{max-width:340px}
  body.dj-focus-mode .jog-wheel{width:min(86vw,340px);max-width:340px}
  body.dj-focus-mode .jog-center-screen .bpm-display{font-size:18px}
  body.dj-focus-mode .deck-number{font-size:22px;padding:3px 10px}
  body.dj-focus-mode .screen-bpm{font-size:22px}
  body.dj-focus-mode .track-title{font-size:13px}
  body.dj-focus-mode .big-btn{padding:14px 8px;font-size:13px;letter-spacing:2px;min-height:52px}
  body.dj-focus-mode .cue-btn{height:42px;font-size:11px}
  body.dj-focus-mode .pad-mode-btn{font-size:9px;padding:9px 1px}
  body.dj-focus-mode .cdj .beat-jump{grid-template-columns:repeat(4,1fr)}
  body.dj-focus-mode .cdj .deck-utils{grid-template-columns:repeat(5,1fr)}
}

/* ================================================================
   MOBILE POLISH — DECK tab refinements for pocket-sized screens
   Tighten tap targets, prevent overflow, keep the essentials front+center.
   ================================================================ */
@media(max-width:820px){
  /* DECK tab content flows nicely with breathing room */
  #tab-deck{gap:8px}
  /* Deck switch bar — wrap into two rows cleanly */
  .deck-switch-bar{flex-wrap:wrap;row-gap:4px}
  .dsb-label{width:100%;text-align:center;margin-right:0}
  .dsb-btn{flex:1 1 calc(33% - 6px);min-height:36px}
  .dsb-dj-focus{flex:1 1 calc(50% - 4px)}
  /* Library and tabs keep horizontal scroll behaviour */
  .main-tabs{scrollbar-width:thin}
  /* Make sure deck sections don't overflow their containers */
  .cdj{min-width:0;overflow:hidden}
  .cdj .screen,.cdj .waveform,.cdj .hot-cues,.cdj .transport,
  .cdj .tempo-section,.cdj .loop-section,.cdj .beat-jump,
  .cdj .deck-utils,.cdj .pad-mode-row{min-width:0}
  /* Touch-friendly transport buttons on the main deck */
  .big-btn{min-height:48px}
  .cue-btn{min-height:40px}
  .pad-mode-btn{min-height:36px}
  .tempo-btn{min-height:40px}
  /* Deck header buttons wrap to keep the badge visible */
  .deck-header{flex-wrap:wrap;gap:6px}
  .deck-upload-btn,.deck-lib-btn{padding:6px 8px;font-size:10px}
}

@media(max-width:520px){
  /* Header compacts so the DJ-focus chip has room */
  .header-bar{flex-wrap:wrap;row-gap:4px}
  /* Upload/library buttons show icon-only on very narrow */
  .deck-upload-btn .btn-text,.deck-lib-btn .btn-text{display:none}
  .deck-upload-btn,.deck-lib-btn{padding:6px 10px}
  /* Hot cues stay legible */
  .hot-cues{gap:4px}
  .cue-btn{min-height:42px;font-size:10px;letter-spacing:.5px}
  /* Transport area uses larger tap targets */
  .transport{gap:6px}
  .big-btn{min-height:52px;font-size:11px}
  .big-btn .icon{font-size:16px}
  /* Pad-mode row splits into two rows on tiny screens */
  .pad-mode-row{grid-template-columns:repeat(3,1fr);gap:3px}
  /* Tempo slider / buttons stack comfortably */
  .tempo-btn-row{grid-template-columns:1fr 1fr 1fr}
  .tempo-display-big{grid-column:1/-1}
  /* Deck switch bar — show full width chips on phone */
  .dsb-btn{flex:1 1 calc(50% - 4px);font-size:9px;min-height:40px}
  .dsb-dj-focus{flex:1 1 100%;order:-1;min-height:42px;font-size:10px}
  /* Scene / Beat FX panels get finger-friendly */
  .beat-fx-panel .beat-btn{min-height:32px;min-width:36px}
  .scene-fx-panel .scene-btn{min-height:36px}
  /* Mixer faders taller for precision */
  .channel .fader-wrap,.channel .vu-meter{height:130px}
}

@media(max-width:360px){
  .dsb-btn{flex:1 1 100%;font-size:10px}
  .dsb-dj-focus{font-size:11px}
  .cue-btn{font-size:9px}
  /* Tiny phone — collapse DECK FOCUS grid to 2 columns */
  .deck-switch-bar.header-dsb{grid-template-columns:repeat(2,1fr) !important}
  .deck-switch-bar.header-dsb .dsb-btn[data-pair="ALL"]{grid-column:span 2 !important}
  .deck-switch-bar.header-dsb .dsb-btn.dsb-dj-focus{grid-column:span 2 !important;font-size:9px !important}
  .deck-switch-bar.header-dsb .dsb-btn{font-size:9.5px !important;padding:8px 2px !important;letter-spacing:.6px !important}
}

/* ================================================================
   AUTO MIX — professional, compact, uniform-height chip toolbar
   ================================================================ */
:root{--automix-h:26px}
@media(min-width:1400px){:root{--automix-h:28px}}
@media(min-width:1920px){:root{--automix-h:30px}}

.automix-panel{padding:8px 10px;gap:6px;border-radius:8px}
.automix-title{font-size:10px;letter-spacing:2.5px}
.automix-title span{font-size:9px;padding:2px 7px;letter-spacing:1.5px}

.automix-grid{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:4px !important;
}
.automix-btn{
  padding:0 8px !important;
  height:var(--automix-h);min-height:var(--automix-h);
  font-size:9.5px !important;letter-spacing:1.2px !important;
  font-weight:700 !important;line-height:1;
  background:linear-gradient(180deg,#24242a 0%,#141418 100%) !important;
  border:1px solid #2a2a30 !important;color:var(--text) !important;
  border-radius:4px !important;
  text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .12s,color .12s,box-shadow .12s,background .12s;
  transform:none !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.automix-btn:hover{
  background:linear-gradient(180deg,#2e2e36 0%,#1a1a20 100%) !important;
  border-color:rgba(200,0,255,.5) !important;color:#e6bbff !important;
  box-shadow:0 0 10px rgba(200,0,255,.22) !important;
}
.automix-btn.running{
  background:linear-gradient(180deg,var(--purple) 0%,#5a00a0 100%) !important;
  color:#fff !important;border-color:#dea0ff !important;
  box-shadow:0 0 14px rgba(200,0,255,.55),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.automix-btn.danger:hover{border-color:rgba(255,46,46,.55) !important;color:#ffb0b0 !important;box-shadow:0 0 10px rgba(255,46,46,.25) !important}
.automix-btn.echo:hover{border-color:rgba(46,224,255,.55) !important;color:#a5ecff !important;box-shadow:0 0 10px rgba(46,224,255,.25) !important}
.automix-btn.pick:hover{border-color:rgba(28,255,143,.55) !important;color:#a8f7c7 !important;box-shadow:0 0 10px rgba(28,255,143,.25) !important}

.automix-sub{
  display:flex !important;align-items:center;gap:6px !important;
  padding-top:6px !important;margin-top:2px;
  border-top:1px solid rgba(255,255,255,.05);
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;
  color:var(--text-dim);
}
.automix-sub > span{
  font-size:9px !important;letter-spacing:1.5px !important;
  color:var(--text-dim) !important;font-weight:700;flex:0 0 auto;
}
.automix-bars{
  height:var(--automix-h);min-height:var(--automix-h);
  padding:0 8px !important;min-width:54px !important;width:auto !important;
  font-size:10px !important;letter-spacing:1px;
  background:#0a0a0d !important;border:1px solid #2a2a30 !important;
  color:var(--text) !important;border-radius:4px !important;
  font-family:'Share Tech Mono',monospace;
  flex:0 0 auto;
}
.automix-sync{
  height:var(--automix-h);min-height:var(--automix-h);
  padding:0 12px !important;font-size:9.5px !important;letter-spacing:1.5px;
  border-radius:4px !important;flex:0 0 auto;
  background:linear-gradient(180deg,#24242a 0%,#141418 100%) !important;
  border:1px solid rgba(255,138,26,.55) !important;color:var(--orange) !important;
  font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .12s;transform:none !important;
}
.automix-sync:hover{
  background:linear-gradient(180deg,var(--orange) 0%,#c85a00 100%) !important;
  color:#0a0a0a !important;box-shadow:0 0 12px rgba(255,138,26,.5) !important;
}
.automix-sync.active{
  background:linear-gradient(180deg,var(--orange) 0%,#aa4500 100%) !important;
  color:#0a0a0a !important;border-color:#ffd9a8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 14px rgba(255,138,26,.55) !important;
}

.mtb-automix .mtb-dir{flex:1 1 auto;text-align:right}

.mixer-toolbar .mtb-automix .automix-grid{grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:4px !important}
.mixer-toolbar .mtb-automix .automix-btn{padding:0 6px !important;font-size:9px !important;letter-spacing:1px !important}
.mixer-toolbar .mtb-automix .automix-sub{display:flex !important;gap:6px !important;padding-top:6px !important}
.mixer-toolbar .mtb-automix .automix-bars{min-width:54px !important;padding:0 8px !important;font-size:10px !important}
.mixer-toolbar .mtb-automix .automix-sync{padding:0 12px !important;font-size:9.5px !important}

@media(min-width:1400px){
  .mixer-toolbar .mtb-automix .automix-btn{padding:0 8px !important;font-size:10px !important;letter-spacing:1.2px !important}
  .mixer-toolbar .mtb-automix .automix-bars{min-width:62px !important;font-size:11px !important}
  .mixer-toolbar .mtb-automix .automix-sync{font-size:10px !important;padding:0 14px !important}
  .mixer-toolbar .mtb-automix .mtb-dir{font-size:10px;padding:2px 8px}
}

body.show-all .automix-btn,
body.work-mode .automix-btn{
  height:var(--automix-h);min-height:var(--automix-h);
  padding:0 8px !important;font-size:10px !important;letter-spacing:1.2px !important;
}
body.show-all .automix-bars,
body.show-all .automix-sync,
body.work-mode .automix-bars,
body.work-mode .automix-sync{
  height:var(--automix-h);min-height:var(--automix-h);padding:0 10px !important;font-size:10px !important;
}

@media(max-width:820px){
  .automix-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .automix-sub{flex-wrap:wrap}
}
@media(max-width:420px){
  .automix-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:3px !important}
  .automix-btn{height:28px;min-height:28px;font-size:9.5px !important}
}

/* ================================================================
   AUTO MIX — refined header, pro chip buttons, polished SYNC/CONT
   ================================================================ */
.mixer-toolbar .mtb-automix{
  background:linear-gradient(180deg,#121217 0%,#07070a 100%);
  border:1px solid #1d1d22;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 28px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35);
}
.mixer-toolbar .mtb-automix::before{
  background:linear-gradient(90deg,transparent,rgba(255,138,26,.55) 50%,transparent) !important;
  height:1px !important;
}
.mixer-toolbar .mtb-automix .mtb-head{
  align-items:center;gap:8px;border-bottom:1px solid rgba(255,138,26,.12);
  padding-bottom:6px;margin-bottom:8px;
}
.mixer-toolbar .mtb-automix .mtb-label{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:10px !important;letter-spacing:2.2px !important;
  color:#ffb675;text-shadow:none;text-transform:uppercase;
}
.mixer-toolbar .mtb-automix .mtb-led{
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffd8a3 0%,var(--orange) 45%,#7a2a00 100%);
  box-shadow:0 0 6px rgba(255,138,26,.7),inset 0 0 2px rgba(255,255,255,.4);
  animation:amxLed 2.2s ease-in-out infinite;flex:0 0 auto;
}
@keyframes amxLed{0%,100%{opacity:.55;box-shadow:0 0 4px rgba(255,138,26,.4)}50%{opacity:1;box-shadow:0 0 9px rgba(255,138,26,.85)}}
.mixer-toolbar .mtb-automix .mtb-dir{
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.4px;
  color:#7ce8ff;padding:2px 8px;border-radius:3px;
  background:rgba(46,224,255,.06);border:1px solid rgba(46,224,255,.18);
}

.mixer-toolbar .mtb-automix .automix-sub{
  display:flex !important;align-items:center;gap:8px !important;
  padding:7px 2px 2px !important;margin-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.mixer-toolbar .mtb-automix .automix-sub > .automix-sub-label{
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.8px;
  color:#8a8a8f;font-weight:700;text-transform:uppercase;
  padding:0 2px;flex:0 0 auto;
}
.mixer-toolbar .mtb-automix .automix-sub > .automix-sep{
  width:1px;height:16px;flex:0 0 auto;padding:0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent);
  margin:0 2px;
}

/* SYNC + CONT — matched pro chips */
.mixer-toolbar .mtb-automix .automix-sync{
  height:var(--automix-h);min-height:var(--automix-h);
  padding:0 12px !important;font-size:10px !important;letter-spacing:1.6px !important;
  font-family:'Orbitron',sans-serif;font-weight:800;
  border-radius:4px !important;flex:0 0 auto;
  background:linear-gradient(180deg,#1e1e24 0%,#0c0c10 100%) !important;
  border:1px solid rgba(255,138,26,.45) !important;color:#ffb675 !important;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.5) !important;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform .08s;
  transform:none !important;margin:0 !important;
}
.mixer-toolbar .mtb-automix .automix-sync:hover{
  background:linear-gradient(180deg,#2a2a32 0%,#151519 100%) !important;
  border-color:rgba(255,138,26,.85) !important;color:#ffd9a8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 10px rgba(255,138,26,.35) !important;
}
.mixer-toolbar .mtb-automix .automix-sync:active{transform:translateY(1px) !important}
.mixer-toolbar .mtb-automix .automix-sync.active{
  background:linear-gradient(180deg,#ffa040 0%,#c85a00 100%) !important;
  color:#0a0a0a !important;border-color:#ffd9a8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 12px rgba(255,138,26,.55) !important;
}
.mixer-toolbar .mtb-automix .automix-sync .asy-txt{line-height:1}
.mixer-toolbar .mtb-automix .automix-sync .asy-arrow{
  width:10px;height:10px;position:relative;flex:0 0 auto;
}
.mixer-toolbar .mtb-automix .automix-sync .asy-arrow::before,
.mixer-toolbar .mtb-automix .automix-sync .asy-arrow::after{
  content:'';position:absolute;background:currentColor;border-radius:1px;
}
.mixer-toolbar .mtb-automix .automix-sync .asy-arrow::before{
  left:1px;top:4px;width:7px;height:1.5px;
}
.mixer-toolbar .mtb-automix .automix-sync .asy-arrow::after{
  right:1px;top:1.5px;width:5px;height:5px;
  background:transparent;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);border-radius:0;
}

.mixer-toolbar .mtb-automix .automix-cont{
  border-color:rgba(46,224,255,.4) !important;color:#7ce8ff !important;
}
.mixer-toolbar .mtb-automix .automix-cont:hover{
  border-color:rgba(46,224,255,.85) !important;color:#b6f2ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 10px rgba(46,224,255,.35) !important;
}
.mixer-toolbar .mtb-automix .automix-cont.active{
  background:linear-gradient(180deg,#2ee0ff 0%,#0088aa 100%) !important;
  color:#06121a !important;border-color:#baf1ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 12px rgba(46,224,255,.55) !important;
}

/* Tighter sub-row on narrow screens */
@media(max-width:820px){
  .mixer-toolbar .mtb-automix .automix-sub{gap:6px !important}
  .automix-sep{display:none}
}

/* ================================================================
   TOP FX ROW — AUTO MIX + BEAT FX + SCENE FX side-by-side
   ================================================================ */
.top-fx-row{
  width:100%;max-width:1700px;margin:0 auto 8px;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1.7fr) minmax(0,1.4fr);
  gap:10px;align-items:stretch;
}
.top-fx-row > .mixer-toolbar,
.top-fx-row > .beat-fx-panel,
.top-fx-row > .scene-fx-panel{
  width:100% !important;max-width:none !important;margin:0 !important;min-width:0;
}
.top-fx-row .beat-fx-panel{
  display:flex !important;flex-wrap:wrap !important;gap:8px !important;
  align-items:center !important;align-content:center;padding:8px 10px !important;
}
.top-fx-row .beat-fx-panel .beat-buttons{flex:1 1 100%;justify-content:flex-start}
.top-fx-row .scene-fx-panel{
  display:flex !important;flex-wrap:wrap !important;gap:8px !important;
  align-items:center !important;align-content:center;padding:8px 10px !important;
}
.top-fx-row .scene-fx-panel .scene-fx-buttons{flex:1 1 100%}
.top-fx-row .scene-fx-panel .x-pad-wrap{flex:1 1 auto}
.top-fx-row .mixer-toolbar-top .mtb-automix .automix-grid{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:3px !important;
}
.top-fx-row .mixer-toolbar-top .mtb-automix .automix-btn{
  padding:0 4px !important;font-size:9px !important;letter-spacing:.6px !important;
}
.top-fx-row .mixer-toolbar-top .mtb-automix .amx-led{margin-right:3px}
.top-fx-row .mixer-toolbar-top .mtb-automix .automix-sub{
  flex-wrap:wrap;gap:6px !important;
}

/* AUTO MIX deck-enable row */
.automix-decks{
  display:flex;align-items:center;gap:5px;
  padding:6px 4px 4px;margin-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.automix-decks-label{
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.4px;
  color:var(--text-dim);font-weight:700;flex:0 0 auto;
  padding-right:4px;border-right:1px solid rgba(255,255,255,.08);
  margin-right:2px;
}
.automix-deck-btn{
  flex:1 1 0;min-width:0;height:24px;padding:0 6px 0 16px;
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:1.2px;font-weight:800;
  background:linear-gradient(180deg,#1a1a20 0%,#0d0d12 100%);
  border:1px solid #2a2a32;color:var(--text-dim);
  border-radius:4px;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .12s,color .12s,box-shadow .12s,background .12s,transform .08s;
}
.automix-deck-btn:active{transform:translateY(1px)}
.automix-deck-btn:hover{
  border-color:rgba(255,138,26,.55);color:var(--orange-glow);
  box-shadow:0 0 8px rgba(255,138,26,.25);
}
/* Small LED pip on the left identifies the deck (per-deck color),
   while the body stays uniform with the rest of the UI. */
.automix-deck-btn::before{
  content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;
  background:#2a2a30;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
  transition:background .12s,box-shadow .12s;
}
.automix-deck-btn[data-amx-deck="A"]::before{background:#3a2418}
.automix-deck-btn[data-amx-deck="B"]::before{background:#1a2c34}
.automix-deck-btn[data-amx-deck="C"]::before{background:#1a3324}
.automix-deck-btn[data-amx-deck="D"]::before{background:#2a1a34}
.automix-deck-btn.active{
  background:linear-gradient(180deg,#221912 0%,#15100b 100%);
  color:var(--orange-glow);
  border-color:rgba(255,138,26,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 8px rgba(255,138,26,.2);
}
.automix-deck-btn[data-amx-deck="A"].active::before{background:#ff8a3c;box-shadow:0 0 6px #ff8a3c}
.automix-deck-btn[data-amx-deck="B"].active::before{background:#3cd2ff;box-shadow:0 0 6px #3cd2ff}
.automix-deck-btn[data-amx-deck="C"].active::before{background:#5dff8a;box-shadow:0 0 6px #5dff8a}
.automix-deck-btn[data-amx-deck="D"].active::before{background:#d685ff;box-shadow:0 0 6px #d685ff}

/* AUTO MIX engaged state — pulsing border on the section */
.mtb-section.mtb-automix.is-running{
  border-color:rgba(255,138,26,.55) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 28px rgba(255,138,26,.12),
             0 0 18px rgba(255,138,26,.35),0 4px 10px rgba(0,0,0,.45) !important;
  animation:amxRunningPulse 1.6s ease-in-out infinite;
}
@keyframes amxRunningPulse{
  0%,100%{border-color:rgba(255,138,26,.45) !important}
  50%{border-color:rgba(255,138,26,.85) !important}
}
.mtb-section.mtb-automix .mtb-led.is-running-led{
  animation-duration:.7s !important;
  box-shadow:0 0 10px var(--orange),0 0 18px var(--orange) !important;
}
.top-fx-row .mixer-toolbar-top .mtb-automix .automix-bars{
  height:28px;font-size:10.5px !important;letter-spacing:1px !important;
}

/* ================================================================
   BEAT FX + SCENE FX — refined button structure inside top-fx-row
   ================================================================ */
.top-fx-row .beat-fx-panel{
  align-content:flex-start;gap:6px !important;padding:10px 12px !important;
  position:relative;
}
.top-fx-row .beat-fx-panel .beat-fx-label{
  flex:0 0 auto;font-size:11px;letter-spacing:2.5px;
  padding-right:8px;border-right:1px solid rgba(255,138,26,.22);margin-right:2px;
  position:relative;
}
.top-fx-row .beat-fx-panel .beat-fx-label::before{
  content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%);
  width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--orange-glow),var(--orange));
  box-shadow:0 0 6px rgba(255,138,26,.6);
}
.top-fx-row .beat-fx-panel .fx-selector{
  flex:1 1 0;min-width:80px;padding:6px 8px !important;font-size:10px !important;
  height:30px;
}
.top-fx-row .beat-fx-panel .beat-buttons{
  display:grid !important;grid-template-columns:repeat(9,minmax(0,1fr));
  gap:3px;flex:1 1 100%;margin:4px 0 2px;
}
.top-fx-row .beat-fx-panel .beat-btn{
  padding:7px 0 !important;font-size:10px !important;letter-spacing:.5px !important;
  min-width:0;text-align:center;
  background:linear-gradient(180deg,#2a2a32 0%,#16161c 100%);
  border:1px solid #2e2e36;border-radius:4px;
  transition:border-color .12s,color .12s,box-shadow .12s,background .15s;
}
.top-fx-row .beat-fx-panel .beat-btn:hover{
  border-color:rgba(46,224,255,.55);color:#a5ecff;
  box-shadow:0 0 8px rgba(46,224,255,.25);
}
.top-fx-row .beat-fx-panel .beat-display{
  flex:0 0 60px;font-size:20px;padding:6px 0;text-align:center;
  height:36px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 50%,#04141a 0%,#02080b 100%);
  border:1px solid rgba(46,224,255,.25);
  box-shadow:inset 0 0 12px rgba(0,0,0,.7),inset 0 0 6px rgba(46,224,255,.06);
}
.top-fx-row .beat-fx-panel .knob-wrap{flex:0 0 auto}
.top-fx-row .beat-fx-panel .tap-btn{
  flex:0 0 auto;padding:6px 18px;font-size:10px;letter-spacing:1.8px;
  height:36px;border-radius:5px;
}
.top-fx-row .beat-fx-panel .fx-onoff{
  flex:0 0 110px;padding:0 14px !important;font-size:11px;letter-spacing:2px;
  height:36px;border-radius:6px;border-width:1px !important;
}
.top-fx-row .beat-fx-panel .fx-onoff.active{
  box-shadow:0 0 16px rgba(255,138,26,.75),inset 0 1px 0 rgba(255,255,255,.3) !important;
  animation:fxOnPulse 1.6s ease-in-out infinite;
}
@keyframes fxOnPulse{
  0%,100%{box-shadow:0 0 12px rgba(255,138,26,.55),inset 0 1px 0 rgba(255,255,255,.25)}
  50%{box-shadow:0 0 22px rgba(255,138,26,.9),inset 0 1px 0 rgba(255,255,255,.35)}
}

.top-fx-row .scene-fx-panel{
  align-content:flex-start;gap:6px !important;padding:10px 12px !important;
  position:relative;
}
.top-fx-row .scene-fx-panel .scene-fx-label{
  flex:0 0 auto;font-size:11px;letter-spacing:2.5px;
  padding-right:8px;border-right:1px solid rgba(255,138,26,.22);margin-right:2px;
  position:relative;
}
/* Bar sits just to the LEFT of the text — matches BEAT FX exactly.
   Removing the label's padding-left (was 8px) lets the text start
   flush with the label box, so left:-4px puts the accent in the
   panel's padding zone right next to the text instead of leaving a
   12px visible gap between bar and text. */
.top-fx-row .scene-fx-panel .scene-fx-label::before{
  content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%);
  width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--orange-glow),var(--orange));
  box-shadow:0 0 6px rgba(255,138,26,.6);
}
.top-fx-row .scene-fx-panel .scene-fx-buttons{
  display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;flex:1 1 100%;
}
.top-fx-row .scene-fx-panel .scene-btn{
  padding:9px 4px !important;font-size:9.5px !important;letter-spacing:1.2px !important;
  min-width:0;border-radius:5px;
  background:linear-gradient(180deg,#2a2a30 0%,#16161c 100%);
  border:1px solid #2e2e36;color:var(--text);
  transition:border-color .12s,color .12s,box-shadow .12s,background .15s,transform .08s;
}
.top-fx-row .scene-fx-panel .scene-btn:hover{
  border-color:rgba(255,138,26,.55);color:var(--orange-glow);
  box-shadow:0 0 10px rgba(255,138,26,.28);transform:translateY(-1px);
}
.top-fx-row .scene-fx-panel .scene-btn.active{
  background:linear-gradient(180deg,var(--orange) 0%,#a64500 100%) !important;
  color:#0a0a0a !important;border-color:var(--orange-glow) !important;
  box-shadow:0 0 14px rgba(255,138,26,.55),inset 0 1px 0 rgba(255,255,255,.3) !important;
  text-shadow:0 0 1px rgba(0,0,0,.6);
}
.top-fx-row .scene-fx-panel .x-pad-wrap{
  flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
}
.top-fx-row .scene-fx-panel .x-pad{
  width:100%;height:84px;border-radius:8px;
  border-color:rgba(46,224,255,.18);
  box-shadow:inset 0 0 24px rgba(0,0,0,.85),inset 0 0 12px rgba(46,224,255,.04);
}
.top-fx-row .scene-fx-panel > .knob-wrap{
  flex:0 0 56px;align-self:center;
}
.top-fx-row .scene-fx-panel > .knob-wrap .knob{width:38px !important;height:38px !important}
@media(max-width:1200px){
  .top-fx-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .top-fx-row > .mixer-toolbar-top{grid-column:1/-1}
}
@media(max-width:760px){
  .top-fx-row{grid-template-columns:1fr;gap:6px}
  .top-fx-row > *{grid-column:auto}
}

/* ================================================================
   SPLIT MIXER TOOLBARS — top (AUTO MIX) and bottom (HP/MIC/ISO)
   ================================================================ */
.mixer-toolbar.mixer-toolbar-top{
  grid-template-columns:1fr;
  margin:0 auto 8px;
}
.mixer-toolbar.mixer-toolbar-top .mtb-automix{min-height:auto}
.mixer-toolbar.mixer-toolbar-bottom{
  grid-template-columns:minmax(520px,2.4fr) minmax(220px,1fr);
  margin:8px auto 0;
}
@media(max-width:980px){
  .mixer-toolbar.mixer-toolbar-bottom{grid-template-columns:1fr;gap:6px}
  .mixer-toolbar.mixer-toolbar-bottom .mtb-hpmic{grid-column:1/-1}
}
@media(max-width:600px){
  .mixer-toolbar.mixer-toolbar-bottom{grid-template-columns:1fr;gap:5px}
  .mixer-toolbar.mixer-toolbar-bottom .mtb-section{grid-column:auto}
  .mixer-toolbar.mixer-toolbar-bottom .mtb-hpmic-grid{grid-template-columns:1fr;gap:8px}
  .mixer-toolbar.mixer-toolbar-bottom .mtb-hpmic-divider{display:none}
}

/* HEADPHONES + MIC merged section */
.mixer-toolbar .mtb-hpmic .mtb-hpmic-grid{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:10px;align-items:stretch;flex:1;min-height:0;
}
.mixer-toolbar .mtb-hpmic .mtb-hp,
.mixer-toolbar .mtb-hpmic .mtb-mic{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  padding:6px 8px;background:rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.04);border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.mixer-toolbar .mtb-hpmic .mtb-hp .mtb-knobrow,
.mixer-toolbar .mtb-hpmic .mtb-mic .mtb-knobrow{
  background:transparent;border:none;box-shadow:none;padding:2px 0;
}
.mixer-toolbar .mtb-hpmic .mtb-sublabel{
  font-family:'Orbitron',sans-serif;font-size:8.5px;letter-spacing:2px;
  color:var(--text-dim);font-weight:700;text-align:center;
  padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,.05);
}
.mixer-toolbar .mtb-hpmic-divider{
  width:1px;align-self:stretch;
  background:linear-gradient(180deg,transparent,rgba(255,122,0,.18),transparent);
  flex:0 0 auto;
}

/* ================================================================
   AUTO MIX — theme-aware LED indicators + polished buttons
   ================================================================ */
.automix-btn .amx-led{
  width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.45) 0%,var(--amx-led-color,var(--orange)) 55%,rgba(0,0,0,.6) 100%);
  box-shadow:0 0 4px var(--amx-led-color,var(--orange)),inset 0 0 1px rgba(255,255,255,.4);
  opacity:.55;transition:opacity .15s,box-shadow .15s,transform .15s;
  margin-right:6px;display:inline-block;
}
.automix-btn{
  --amx-led-color:var(--purple);
  gap:0;
}
.automix-btn[data-mix="smooth"]{--amx-led-color:var(--screen-glow)}
.automix-btn[data-mix="energy"]{--amx-led-color:var(--orange)}
.automix-btn[data-mix="harmonic"]{--amx-led-color:var(--play-green)}
.automix-btn.danger{--amx-led-color:var(--red)}
.automix-btn.echo{--amx-led-color:var(--screen-glow)}
.automix-btn.pick{--amx-led-color:var(--yellow)}
.automix-btn:hover .amx-led{
  opacity:1;
  box-shadow:0 0 8px var(--amx-led-color,var(--orange)),inset 0 0 1px rgba(255,255,255,.6);
}
.automix-btn.running .amx-led{
  opacity:1;
  background:radial-gradient(circle at 30% 30%,#fff 0%,var(--amx-led-color,var(--orange)) 60%,rgba(0,0,0,.6) 100%);
  box-shadow:0 0 10px var(--amx-led-color,var(--orange)),0 0 18px var(--amx-led-color,var(--orange)),inset 0 0 1px #fff;
  animation:amxBtnLed 1.1s ease-in-out infinite;
}
.automix-btn .amx-txt{
  display:inline-block;line-height:1;
  text-shadow:0 0 1px rgba(0,0,0,.6);
}
.automix-btn.running .amx-txt{
  text-shadow:0 0 6px var(--amx-led-color,var(--orange)),0 0 1px rgba(0,0,0,.7);
}
.automix-btn.running{
  --amx-active-rgb:200,0,255;
  background:linear-gradient(180deg,var(--amx-led-color,var(--purple)) 0%,#000 220%) !important;
  color:#fff !important;border-color:var(--amx-led-color,#dea0ff) !important;
  box-shadow:0 0 14px var(--amx-led-color,var(--purple)),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
@keyframes amxBtnLed{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.15)}
}

/* ================================================================
   VINYL TAB — realistic twin turntables + centered mixer core
   ================================================================ */
#tab-vinyl{padding:4px 0 28px}
.vinyl-stage{
  width:100%;max-width:1700px;margin:0 auto;position:relative;
  padding:26px 20px 34px;border-radius:18px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,138,26,.08) 0%,transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%,rgba(46,224,255,.05) 0%,transparent 60%),
    linear-gradient(180deg,#111116 0%,#050507 100%);
  border:1px solid #1f1f25;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 60px rgba(0,0,0,.6),0 30px 80px rgba(0,0,0,.7);
  display:grid;grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);
  gap:18px;align-items:stretch;
  overflow:hidden;
}
.vinyl-stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,transparent 2px 6px),
    radial-gradient(circle at 50% 40%,rgba(200,0,255,.035) 0%,transparent 55%);
}
.vinyl-stage > *{position:relative;z-index:1}
.vinyl-stage .vinyl-floor{
  grid-column:1/-1;position:absolute;left:0;right:0;bottom:0;height:60%;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 80%);
  pointer-events:none;
}

/* ---------------- Turntable ---------------- */
.turntable{
  position:relative;border-radius:14px;padding:18px 18px 22px;
  background:
    linear-gradient(180deg,#c7c7cc 0%,#8a8a90 2%,#3a3a40 8%,#1c1c20 24%,#141418 100%);
  border:1px solid #2a2a30;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.8),
    inset 0 0 50px rgba(0,0,0,.55),
    0 20px 40px rgba(0,0,0,.7),
    0 2px 0 rgba(255,255,255,.04);
  min-height:460px;
  isolation:isolate;overflow:hidden;
}
.turntable::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% -20%,rgba(255,255,255,.12),transparent 60%);
  mix-blend-mode:screen;opacity:.5;
}
.turntable[data-tt="L"]{--tt-accent:#ff7a00;--tt-accent-rgb:255,122,0}
.turntable[data-tt="R"]{--tt-accent:#2ee0ff;--tt-accent-rgb:46,224,255}

/* top bezel row */
.tt-topbar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:6px 10px;margin-bottom:10px;border-radius:8px;
  background:linear-gradient(180deg,#0a0a0c 0%,#050507 100%);
  border:1px solid #222227;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 12px rgba(0,0,0,.7);
}
.tt-brand{
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2.5px;
  font-weight:800;color:#bfbfc4;
}
.tt-brand .brand-accent{color:var(--tt-accent);text-shadow:0 0 8px rgba(var(--tt-accent-rgb),.45)}
.tt-screen{
  flex:1;min-width:0;padding:4px 10px;border-radius:4px;
  background:linear-gradient(180deg,#020a10 0%,#000507 100%);
  border:1px solid #0b1a24;
  box-shadow:inset 0 0 12px rgba(var(--tt-accent-rgb),.12);
  display:flex;align-items:center;gap:8px;overflow:hidden;
}
.tt-screen .tt-scr-title{
  flex:1;min-width:0;font-family:'Share Tech Mono',monospace;font-size:10px;
  color:#9fd8ff;letter-spacing:1.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 6px rgba(46,224,255,.45);
}
.tt-screen .tt-scr-bpm{
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:800;
  color:var(--tt-accent);text-shadow:0 0 8px rgba(var(--tt-accent-rgb),.6);
  letter-spacing:1.2px;white-space:nowrap;
}
.tt-power{
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffd,var(--tt-accent) 45%,#3a1000 100%);
  box-shadow:0 0 8px rgba(var(--tt-accent-rgb),.9),inset 0 0 2px rgba(255,255,255,.4);
  animation:ttPower 1.8s ease-in-out infinite;flex:0 0 auto;
}
@keyframes ttPower{0%,100%{opacity:.6}50%{opacity:1}}

/* main deck area */
.tt-deck{
  position:relative;
  background:
    radial-gradient(circle at 50% 50%,#1a1a1e 0%,#0b0b0d 58%,#050506 100%);
  border-radius:10px;padding:14px;
  border:1px solid #1a1a1e;
  box-shadow:inset 0 0 40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.03);
  min-height:340px;
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
}
.turntable[data-tt="R"] .tt-deck{grid-template-columns:auto 1fr auto}

/* Left controls column */
.tt-leftctl{display:flex;flex-direction:column;gap:10px;align-items:center;min-width:58px}
.tt-rpm{
  display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:6px;
  background:linear-gradient(180deg,#18181c 0%,#0a0a0c 100%);
  border:1px solid #26262c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.tt-rpm-btn{
  padding:5px 10px;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:1.2px;color:#8a8a90;
  background:linear-gradient(180deg,#1e1e22 0%,#101014 100%);
  border:1px solid #2e2e34;border-radius:4px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.5);
  transition:all .12s;
}
.tt-rpm-btn:hover{color:var(--tt-accent);border-color:rgba(var(--tt-accent-rgb),.4)}
.tt-rpm-btn.active{
  background:linear-gradient(180deg,var(--tt-accent) 0%,#7a3500 100%);
  color:#0a0a0a;border-color:rgba(var(--tt-accent-rgb),.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 10px rgba(var(--tt-accent-rgb),.5);
}
.turntable[data-tt="R"] .tt-rpm-btn.active{background:linear-gradient(180deg,var(--tt-accent) 0%,#005566 100%)}
.tt-startstop{
  position:relative;width:52px;height:52px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#fafafa 0%,#aaa 35%,#606066 70%,#1a1a1e 100%);
  border:1px solid #1a1a1e;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.55),
    inset 0 -3px 6px rgba(0,0,0,.75),
    0 4px 10px rgba(0,0,0,.7),
    0 0 0 4px #0a0a0c,
    0 0 0 5px #26262c;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .08s;
}
.tt-startstop:active{transform:scale(.96)}
.tt-startstop::before{
  content:'';width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffb080,var(--tt-accent) 55%,#4a1500 100%);
  box-shadow:0 0 10px rgba(var(--tt-accent-rgb),.65);
  opacity:.4;transition:opacity .2s;
}
.tt-startstop.playing::before{opacity:1;animation:ttPulse 1.1s ease-in-out infinite}
@keyframes ttPulse{0%,100%{box-shadow:0 0 8px rgba(var(--tt-accent-rgb),.55)}50%{box-shadow:0 0 18px rgba(var(--tt-accent-rgb),.95)}}
.tt-startstop-label{
  font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1.5px;
  color:#9a9a9e;font-weight:800;
}

/* Platter + vinyl */
.tt-platter-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.tt-platter{
  position:relative;width:290px;height:290px;max-width:100%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#3a3a40 0%,#1c1c20 55%,#0a0a0c 100%);
  box-shadow:
    0 0 0 3px #0a0a0c,
    0 0 0 4px #2a2a30,
    0 0 0 5px #0a0a0c,
    inset 0 2px 6px rgba(255,255,255,.08),
    inset 0 -6px 18px rgba(0,0,0,.9),
    0 14px 40px rgba(0,0,0,.7),
    0 0 60px rgba(var(--tt-accent-rgb),.08);
}
.tt-platter::before{
  /* strobe dots */
  content:'';position:absolute;inset:6px;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,rgba(255,255,255,.25) 0deg 1deg,transparent 1deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 0 49%,#000 49% 51%,transparent 51%);
  mask:radial-gradient(circle,transparent 0 49%,#000 49% 51%,transparent 51%);
}
.tt-platter::after{
  /* rgb accent ring */
  content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,var(--tt-accent) 10deg,transparent 50deg,transparent 340deg);
  filter:blur(1px);opacity:.45;
  animation:ttRing 3.5s linear infinite;animation-play-state:paused;
}
.tt-platter.spinning::after{animation-play-state:running}
@keyframes ttRing{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.tt-vinyl{
  position:absolute;inset:18px;border-radius:50%;
  background:
    repeating-radial-gradient(circle,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 48% 48%,#222 0%,#0c0c0e 75%,#000 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.08),
    inset 0 -3px 8px rgba(0,0,0,.9),
    0 0 0 1px #000;
  display:flex;align-items:center;justify-content:center;
  cursor:grab;transform:rotate(0deg);
  transition:transform .05s linear;
}
.tt-vinyl:active{cursor:grabbing}
.tt-vinyl.spinning{animation:ttVinyl var(--tt-spin,1.8s) linear infinite}
.tt-vinyl.scratching{
  cursor:grabbing;
  box-shadow:
    inset 0 0 0 1px rgba(var(--tt-accent-rgb),.9),
    inset 0 2px 4px rgba(255,255,255,.08),
    inset 0 -4px 10px rgba(0,0,0,.95),
    0 0 22px rgba(var(--tt-accent-rgb),.55),
    0 0 0 1px #000;
  transition:box-shadow .08s;
}
.tt-vinyl{touch-action:none;user-select:none;-webkit-user-select:none}
@keyframes ttVinyl{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.tt-vinyl::before{
  /* light reflection streak */
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 200deg,transparent 0deg,rgba(255,255,255,.06) 18deg,transparent 38deg,transparent 360deg);
  pointer-events:none;
}
/* ═══ Analog vinyl centre label — cream paper, no colourful gradient ═══
   Emulates a real 7"/12" record label: off-white paper stock with a
   subtle radial darkening at the edge (light box in a studio), thin
   concentric ring, standard black text. Both decks look identical —
   only the spindle hole says which side is playing. */
.tt-label{
  position:relative;width:38%;height:38%;border-radius:50%;
  background:
    /* paper grain — very fine diagonal crosshatch */
    repeating-linear-gradient(45deg,rgba(60,40,20,.02) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(60,40,20,.02) 0 1px,transparent 1px 3px),
    /* soft spotlight top-left, age darkening at edge */
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.25) 0%,transparent 35%),
    radial-gradient(circle at 50% 50%,#f0e6cc 35%,#d6c9a5 80%,#a88f5a 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#1a0a00;font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;
  text-align:center;padding:6px;
  box-shadow:
    inset 0 0 12px rgba(80,50,20,.35),
    inset 0 0 0 1px rgba(80,50,20,.25),
    0 0 0 1px rgba(0,0,0,.35);
  text-shadow:0 1px 0 rgba(255,245,210,.35);
}
.turntable[data-tt="R"] .tt-label{
  /* same cream as deck L — no colour accent */
  background:
    repeating-linear-gradient(45deg,rgba(60,40,20,.02) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(60,40,20,.02) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.25) 0%,transparent 35%),
    radial-gradient(circle at 50% 50%,#f0e6cc 35%,#d6c9a5 80%,#a88f5a 100%);
}
/* Thin ink-ring just inside the label's edge — the real thing almost
   always has one. */
.tt-label::before{
  content:'';position:absolute;inset:8%;border-radius:50%;
  border:1px solid rgba(40,25,10,.3);
  pointer-events:none;
}
/* Spindle hole — dark well with a faint brass rim like a real record */
.tt-label::after{
  content:'';position:absolute;width:7px;height:7px;border-radius:50%;
  background:#0a0708;
  box-shadow:
    0 0 0 1px rgba(180,140,80,.6),
    inset 0 0 2px #000,
    inset 0 1px 0 rgba(255,255,255,.12);
}
.tt-label .lbl-title{font-size:10px;font-weight:800;line-height:1.1;margin-top:-6px;color:#1a0a00}
.tt-label .lbl-sub{font-size:7px;letter-spacing:2px;opacity:.75;margin-top:3px;color:#3a2a10}

/* Tonearm */
.tt-tonearm{
  position:absolute;top:14px;right:14px;width:140px;height:180px;pointer-events:none;
  transform-origin:85% 12%;transform:rotate(-22deg);
  transition:transform .6s cubic-bezier(.6,.02,.3,1);
}
.tt-tonearm.dropped{transform:rotate(-8deg)}
.tt-tonearm svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}
.tt-tonearm .ta-pivot{
  position:absolute;right:10px;top:4px;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f5f5f7 0%,#9a9aa0 40%,#2a2a30 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 2px 4px rgba(0,0,0,.7),0 0 0 2px #0a0a0c;
}
.tt-tonearm .ta-cw{
  position:absolute;right:-6px;top:-4px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#cfcfd4 0%,#6a6a70 55%,#1a1a1e 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.7);
}

/* Right controls column (pitch fader) */
.tt-rightctl{display:flex;flex-direction:column;gap:6px;align-items:center;min-width:46px}
.tt-pitch-label{
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;
  color:#8a8a90;font-weight:800;
}
.tt-pitch-val{
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;
  color:var(--tt-accent);text-shadow:0 0 6px rgba(var(--tt-accent-rgb),.5);
  background:#05080c;padding:2px 6px;border-radius:3px;min-width:48px;text-align:center;
  border:1px solid #1a1a1e;
}
.tt-pitch-track{
  position:relative;width:34px;height:180px;border-radius:6px;
  background:linear-gradient(180deg,#0a0a0c 0%,#030304 100%);
  border:1px solid #1a1a1e;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9),inset 0 0 10px rgba(var(--tt-accent-rgb),.05);
  display:flex;align-items:center;justify-content:center;
}
.tt-pitch-track::before{
  content:'';position:absolute;left:50%;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
  transform:translateX(-50%);border-radius:1px;
}
.tt-pitch-track::after{
  content:'';position:absolute;left:50%;top:50%;width:14px;height:1px;
  background:var(--tt-accent);transform:translate(-50%,-50%);
  box-shadow:0 0 6px rgba(var(--tt-accent-rgb),.7);
}
.tt-pitch-input{
  -webkit-appearance:none;appearance:none;position:absolute;
  width:170px;height:30px;background:transparent;cursor:pointer;
  transform:rotate(-90deg);top:calc(50% - 15px);left:calc(50% - 85px);
}
.tt-pitch-input::-webkit-slider-runnable-track{height:4px;background:transparent}
.tt-pitch-input::-moz-range-track{height:4px;background:transparent}
.tt-pitch-input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:20px;border-radius:3px;
  background:linear-gradient(90deg,#dadade 0%,#8a8a90 50%,#3a3a40 100%);
  border:1px solid #0a0a0c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.7),0 0 8px rgba(var(--tt-accent-rgb),.3);
  cursor:grab;
}
.tt-pitch-input::-moz-range-thumb{
  width:30px;height:20px;border-radius:3px;
  background:linear-gradient(90deg,#dadade 0%,#8a8a90 50%,#3a3a40 100%);
  border:1px solid #0a0a0c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.7);cursor:grab;
}

/* bottom row: cue + sync + fx */
.tt-bottom{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;
}

/* ═══ NEW: professional per-turntable control strip ═══
   TIME, VOLUME, PLAY/PAUSE, BPM, HOTCUES — everything a DJ needs
   directly on the turntable without flipping to the DECKS tab. */
.tt-pro{
  display:flex;flex-direction:column;gap:8px;
  margin-top:10px;padding:10px 12px;
  background:linear-gradient(180deg,#0a0a0c 0%,#050507 100%);
  border:1px solid #1a1a1e;border-radius:7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 18px rgba(0,0,0,.65);
}
.tt-pro-row{display:flex;align-items:center;gap:10px}
.tt-pro-play{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(180deg,var(--tt-accent) 0%,rgba(var(--tt-accent-rgb),.4) 100%);
  border:1px solid rgba(var(--tt-accent-rgb),.6);color:#0a0a0c;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 3px 8px rgba(0,0,0,.6),0 0 14px rgba(var(--tt-accent-rgb),.35);
  transition:transform .1s;
}
.tt-pro-play:hover{transform:scale(1.06)}
.tt-pro-play:active{transform:scale(.96)}
.tt-pro-play.playing{background:linear-gradient(180deg,#ff4040 0%,#8a1010 100%);border-color:#ff8080}

.tt-pro-time{
  flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;
}
.tt-pro-time-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:'Share Tech Mono',monospace;font-size:11px;
}
.tt-pro-elapsed{color:var(--tt-accent);font-weight:700;font-variant-numeric:tabular-nums}
.tt-pro-remain{color:#6a6a72;font-variant-numeric:tabular-nums}
.tt-pro-dur{color:#4a4a52;font-size:9px;letter-spacing:1px}
.tt-pro-bar{
  height:4px;background:#050507;border:1px solid #1a1a1e;border-radius:2px;
  overflow:hidden;position:relative;cursor:pointer;
}
.tt-pro-bar-fill{
  position:absolute;top:0;bottom:0;left:0;width:0%;
  background:linear-gradient(90deg,rgba(var(--tt-accent-rgb),.4),var(--tt-accent));
  transition:width .1s linear;
}

.tt-pro-vol-row{
  display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:center;
}
.tt-pro-vol-label{
  font-family:'Orbitron',sans-serif;font-size:9px;font-weight:800;
  letter-spacing:2px;color:#8a8a92;
}
.tt-pro-vol{
  appearance:none;width:100%;height:4px;border-radius:2px;
  background:linear-gradient(90deg,#2a2a30,var(--tt-accent));
  border:1px solid #0a0a0c;outline:none;cursor:pointer;
}
.tt-pro-vol::-webkit-slider-thumb{
  appearance:none;width:14px;height:18px;border-radius:2px;
  background:linear-gradient(180deg,#f0f0f4 0%,#8a8a90 60%,#2a2a2e 100%);
  border:1px solid #0a0a0c;
  box-shadow:0 2px 4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.4);
  cursor:grab;
}
.tt-pro-vol-val{
  font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--tt-accent);
  letter-spacing:1px;min-width:30px;text-align:right;font-variant-numeric:tabular-nums;
}

.tt-pro-hotcues{
  display:grid;grid-template-columns:repeat(4,1fr);gap:5px;
}
.tt-pro-hc{
  padding:8px 6px;border-radius:3px;
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:900;
  background:linear-gradient(180deg,#1a1a1e 0%,#0a0a0c 100%);
  border:1px solid #26262c;color:#6a6a72;
  cursor:pointer;transition:all .1s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.tt-pro-hc:hover{border-color:rgba(var(--tt-accent-rgb),.5);color:var(--tt-accent)}
.tt-pro-hc.set{
  background:linear-gradient(180deg,var(--tt-accent) 0%,rgba(var(--tt-accent-rgb),.3) 100%);
  color:#0a0a0c;border-color:rgba(var(--tt-accent-rgb),.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 8px rgba(var(--tt-accent-rgb),.5);
}

/* ═══ NEW: transport row — quick CUE + beat-jump buttons ═══
   Sits between the time/progress bar and the hot-cue pads.
   Gives the DJ a one-tap way to nudge the playhead exactly where they
   want a CUE marker, then tap the big red SET CUE to drop it.  No
   need to scratch-drag the vinyl for a precise set. */
.tt-pro-nav{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:2px;
}
.tt-pro-nav button{
  padding:6px 2px;border-radius:3px;
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;
  background:linear-gradient(180deg,#1a1a1e 0%,#0a0a0c 100%);
  border:1px solid #26262c;color:#b0b0b6;cursor:pointer;
  transition:all .12s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.tt-pro-nav button:hover{
  color:var(--tt-accent);border-color:rgba(var(--tt-accent-rgb),.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 8px rgba(var(--tt-accent-rgb),.3);
}
.tt-pro-nav button:active{transform:translateY(1px)}
.tt-pro-nav .setcue{
  background:linear-gradient(180deg,#c83c1a 0%,#7a1a08 100%);
  border-color:#ff8050;color:#fff;font-weight:900;letter-spacing:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.5),0 0 10px rgba(200,60,26,.4);
  font-size:11px;
}
.tt-pro-nav .setcue:hover{
  background:linear-gradient(180deg,#ff4818 0%,#a02010 100%);
  color:#fff;border-color:#ffb890;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 8px rgba(0,0,0,.6),0 0 16px rgba(255,72,24,.55);
}
.tt-pro-nav .setcue.armed{
  animation:setCuePulse .9s ease-in-out infinite;
}
@keyframes setCuePulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.5),0 0 10px rgba(200,60,26,.4)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 4px rgba(0,0,0,.5),0 0 20px rgba(255,72,24,.9)}
}
.tt-pro-nav .gotocue{
  background:linear-gradient(180deg,#1a1a1e 0%,#0a0a0c 100%);
  border:1px solid rgba(255,138,26,.4);color:#ffaa66;
}
.tt-pro-nav .gotocue:hover{border-color:#ffaa66;color:#fff;background:linear-gradient(180deg,#2a1a10 0%,#1a0a08 100%);box-shadow:0 0 10px rgba(255,138,26,.4)}

/* original bottom buttons ---------- */
.tt-btn{
  padding:8px 6px;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:1.3px;color:#b0b0b6;
  background:linear-gradient(180deg,#1c1c20 0%,#0a0a0c 100%);
  border:1px solid #26262c;border-radius:5px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.6);
  transition:all .12s;
}
.tt-btn:hover{color:var(--tt-accent);border-color:rgba(var(--tt-accent-rgb),.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 10px rgba(var(--tt-accent-rgb),.3)}
.tt-btn.cue{color:#ffaa66}
.tt-btn.cue.armed{background:linear-gradient(180deg,#ff7a00 0%,#6a2a00 100%);color:#0a0a0a;border-color:#ffd9a8;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 10px rgba(255,122,0,.55)}
.tt-btn.sync.active{background:linear-gradient(180deg,#2ee0ff 0%,#006680 100%);color:#05131a;border-color:#baf1ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 10px rgba(46,224,255,.55)}

/* ---------------- Mixer core (between decks) ---------------- */
.vx-mixer{
  position:relative;border-radius:14px;padding:16px 14px 18px;
  background:
    linear-gradient(180deg,#1a1a1e 0%,#0b0b0d 100%);
  border:1px solid #2a2a30;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.8),
    inset 0 0 40px rgba(0,0,0,.6),
    0 20px 40px rgba(0,0,0,.7);
  display:flex;flex-direction:column;gap:12px;align-items:stretch;
  min-height:460px;
}
.vx-mixer::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,138,26,.55),rgba(46,224,255,.55),transparent);
}
.vx-brand{
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:900;letter-spacing:2.5px;
  color:#bfbfc4;text-align:center;padding-bottom:2px;
}
.vx-brand b{color:var(--orange)}
.vx-vu{
  display:flex;justify-content:center;gap:4px;padding:6px;border-radius:6px;
  background:#050507;border:1px solid #1a1a1e;
  box-shadow:inset 0 0 10px rgba(0,0,0,.8);
}
.vx-vu-col{width:10px;height:56px;border-radius:2px;position:relative;overflow:hidden;background:#0a0a0c;border:1px solid #151518}
.vx-vu-fill{
  position:absolute;left:0;right:0;bottom:0;height:65%;
  background:linear-gradient(180deg,#ff2e2e 0%,#ffd400 25%,#00ff7a 55%,#008844 100%);
  box-shadow:inset 0 0 4px rgba(255,255,255,.2);
}
.vx-vu-fill::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.45) 0 2px,transparent 2px 4px);
}

.vx-channels{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-height:0}
.vx-ch{
  display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:8px;
  background:linear-gradient(180deg,#101014 0%,#060608 100%);
  border:1px solid #1d1d22;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 18px rgba(0,0,0,.6);
}
.vx-ch-head{
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;font-weight:800;
  text-align:center;padding:3px 0;border-radius:3px;
}
.vx-ch[data-ch="A"] .vx-ch-head{color:#ff7a00;background:rgba(255,122,0,.08);border:1px solid rgba(255,122,0,.25)}
.vx-ch[data-ch="B"] .vx-ch-head{color:#2ee0ff;background:rgba(46,224,255,.08);border:1px solid rgba(46,224,255,.25)}
.vx-eq{display:flex;flex-direction:column;gap:6px;align-items:center}
.vx-knob{
  width:32px;height:32px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#f5f5f7 0%,#8a8a90 35%,#26262c 85%,#050507 100%);
  border:1px solid #050507;position:relative;cursor:pointer;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 2px 5px rgba(0,0,0,.7),0 0 0 2px #0a0a0c;
}
.vx-knob::after{
  content:'';position:absolute;left:50%;top:4px;width:2px;height:10px;border-radius:1px;
  background:var(--vx-ind,#ff7a00);transform:translateX(-50%);
  box-shadow:0 0 4px var(--vx-ind,#ff7a00);
}
.vx-ch[data-ch="B"] .vx-knob{--vx-ind:#2ee0ff}
.vx-knob-lbl{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:1.2px;color:#8a8a90;text-align:center}
.vx-fader-wrap{
  position:relative;flex:1;min-height:110px;border-radius:4px;
  background:#030305;border:1px solid #151518;
  box-shadow:inset 0 0 8px rgba(0,0,0,.9);
  display:flex;align-items:flex-end;justify-content:center;padding:4px 0;
}
.vx-fader-wrap::before{
  content:'';position:absolute;left:50%;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.04));
  transform:translateX(-50%);
}
.vx-fader{
  -webkit-appearance:none;appearance:none;position:absolute;
  width:90px;height:22px;background:transparent;transform:rotate(-90deg);
  top:calc(50% - 11px);left:calc(50% - 45px);cursor:pointer;
}
.vx-fader::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:28px;border-radius:3px;
  background:linear-gradient(90deg,#e4e4e8 0%,#8a8a90 50%,#3a3a40 100%);
  border:1px solid #050507;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.7);
}
.vx-fader::-moz-range-thumb{
  width:22px;height:28px;border-radius:3px;
  background:linear-gradient(90deg,#e4e4e8 0%,#8a8a90 50%,#3a3a40 100%);
  border:1px solid #050507;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 4px rgba(0,0,0,.7);
}
.vx-cue{
  padding:6px;font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;
  font-weight:800;color:#8a8a90;
  background:linear-gradient(180deg,#1a1a1e 0%,#0a0a0c 100%);
  border:1px solid #26262c;border-radius:4px;cursor:pointer;
  transition:all .12s;
}
.vx-cue:hover{color:#ffd700;border-color:rgba(255,215,0,.4)}
.vx-cue.active{background:linear-gradient(180deg,#ffd700,#8a6a00);color:#1a1410;border-color:#fff3a0;box-shadow:0 0 10px rgba(255,215,0,.5)}

/* Crossfader */
.vx-xfader-wrap{
  padding:10px 8px;border-radius:8px;
  background:linear-gradient(180deg,#07070a 0%,#03030505 100%);
  background:linear-gradient(180deg,#07070a 0%,#030305 100%);
  border:1px solid #1d1d22;box-shadow:inset 0 0 12px rgba(0,0,0,.8);
}
.vx-xfader-head{
  display:flex;justify-content:space-between;font-family:'Orbitron',sans-serif;
  font-size:9px;letter-spacing:1.5px;font-weight:800;margin-bottom:4px;
}
.vx-xfader-head .xf-a{color:#ff7a00}
.vx-xfader-head .xf-b{color:#2ee0ff}
.vx-xfader-track{
  position:relative;height:24px;border-radius:3px;
  background:linear-gradient(180deg,#050507,#101014);
  border:1px solid #1a1a1e;box-shadow:inset 0 2px 4px rgba(0,0,0,.9);
  display:flex;align-items:center;padding:0 4px;
}
.vx-xfader-track::before{
  content:'';position:absolute;left:8px;right:8px;top:50%;height:2px;
  background:linear-gradient(90deg,#ff7a00,#8a8a90 50%,#2ee0ff);transform:translateY(-50%);
  border-radius:1px;opacity:.5;
}
.vx-xfader{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;
  background:transparent;cursor:pointer;
}
.vx-xfader::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:28px;border-radius:3px;
  background:linear-gradient(180deg,#e4e4e8 0%,#8a8a90 55%,#3a3a40 100%);
  border:1px solid #050507;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 5px rgba(0,0,0,.7);
}
.vx-xfader::-moz-range-thumb{
  width:22px;height:28px;border-radius:3px;
  background:linear-gradient(180deg,#e4e4e8 0%,#8a8a90 55%,#3a3a40 100%);
  border:1px solid #050507;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 5px rgba(0,0,0,.7);
}

/* ---------- PRO v2 polish: realistic turntable body + details ---------- */
/* Brushed-metal top surface with screw accents and raised edge */
.turntable{
  background:
    linear-gradient(180deg,#d6d6da 0%,#9a9a9f 2%,#525258 7%,#2a2a2f 16%,#181820 36%,#0d0d11 100%);
  border:1px solid #1c1c22;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 0 0 3px #0c0c10,
    inset 0 -1px 0 rgba(0,0,0,.9),
    inset 0 0 60px rgba(0,0,0,.55),
    0 28px 60px rgba(0,0,0,.75),
    0 2px 0 rgba(255,255,255,.05);
}
.turntable::after{
  content:'';position:absolute;inset:6px;border-radius:12px;pointer-events:none;
  border:1px solid rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
  z-index:0;
}
.turntable .corner-screw{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#e4e4e8 0%,#8a8a90 45%,#2a2a30 100%);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.8),0 1px 1px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.6);
  z-index:2;pointer-events:none;
}
.turntable .corner-screw::after{
  content:'';position:absolute;inset:3px;border-radius:50%;
  background:linear-gradient(45deg,#1a1a1c,#505056);
}
.turntable .corner-screw.c-tl{top:8px;left:8px}
.turntable .corner-screw.c-tr{top:8px;right:8px}
.turntable .corner-screw.c-bl{bottom:8px;left:8px}
.turntable .corner-screw.c-br{bottom:8px;right:8px}

/* Side pitch scale markers */
.tt-pitch-scale{
  position:absolute;inset:6px 0;display:flex;flex-direction:column;
  justify-content:space-between;pointer-events:none;
}
.tt-pitch-scale i{
  display:block;height:1px;background:rgba(255,255,255,.28);margin-left:0;
}
.tt-pitch-scale i.major{background:rgba(255,255,255,.6);box-shadow:0 0 4px rgba(var(--tt-accent-rgb),.35)}
.tt-pitch-center-mark{
  position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  font-family:'Share Tech Mono',monospace;font-size:8px;color:var(--tt-accent);
  text-shadow:0 0 4px rgba(var(--tt-accent-rgb),.6);letter-spacing:.8px;
}

/* Target/strobe light next to the start button */
.tt-target{
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffe5b0,var(--tt-accent) 55%,#3a0f00 100%);
  box-shadow:0 0 10px rgba(var(--tt-accent-rgb),.75),inset 0 0 2px rgba(255,255,255,.35);
  opacity:.45;
}
.tt-startstop.playing ~ .tt-target,
#ttL-startstop.playing ~ .tt-target,
#ttR-startstop.playing ~ .tt-target{opacity:1;animation:ttTarget 1.1s ease-in-out infinite}
@keyframes ttTarget{0%,100%{box-shadow:0 0 8px rgba(var(--tt-accent-rgb),.6)}50%{box-shadow:0 0 18px rgba(var(--tt-accent-rgb),1)}}

/* Premium vinyl groove sheen + ring depth */
.tt-vinyl{
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.12),transparent 32%),
    repeating-radial-gradient(circle,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 50% 50%,#1a1a1e 0%,#0b0b0d 72%,#000 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 2px 4px rgba(255,255,255,.05),
    inset 0 -4px 10px rgba(0,0,0,.95),
    0 0 0 1px #000,
    0 0 14px rgba(0,0,0,.8);
}

/* Polished platter edge ring with reflective cap */
.tt-platter{
  box-shadow:
    0 0 0 3px #0a0a0c,
    0 0 0 4px linear-gradient(180deg,#c0c0c6,#3a3a40),
    0 0 0 5px #0a0a0c,
    inset 0 2px 6px rgba(255,255,255,.14),
    inset 0 -6px 18px rgba(0,0,0,.95),
    0 14px 40px rgba(0,0,0,.8),
    0 0 80px rgba(var(--tt-accent-rgb),.12);
}

/* Better tonearm — counterweight, cueing lever shadows, anti-skate */
.tt-tonearm{filter:drop-shadow(0 5px 8px rgba(0,0,0,.7))}

/* Pro START/STOP — brushed alloy with red LED */
.tt-startstop{
  background:
    radial-gradient(circle at 35% 28%,#fff 0%,#d4d4da 22%,#9a9aa0 48%,#4a4a50 78%,#141418 100%);
  border:1px solid #0a0a0c;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.7),
    inset 0 -4px 6px rgba(0,0,0,.8),
    0 5px 12px rgba(0,0,0,.8),
    0 0 0 4px #0a0a0c,
    0 0 0 5px #3a3a40,
    0 0 0 6px #0a0a0c;
}

/* Premium pitch-fader thumb */
.tt-pitch-input::-webkit-slider-thumb{
  width:36px;height:22px;border-radius:4px;
  background:
    linear-gradient(90deg,#ededf0 0%,#bebec3 18%,#6a6a70 52%,#2a2a30 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);
  background-blend-mode:overlay;
  border:1px solid #080808;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.7),
    inset 0 -2px 4px rgba(0,0,0,.8),
    0 2px 4px rgba(0,0,0,.8),
    0 0 10px rgba(var(--tt-accent-rgb),.25);
}
.tt-pitch-input::-moz-range-thumb{
  width:36px;height:22px;border-radius:4px;
  background:linear-gradient(90deg,#ededf0,#6a6a70 55%,#2a2a30);
  border:1px solid #080808;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.8),0 2px 4px rgba(0,0,0,.8);
}
.tt-pitch-track{
  box-shadow:inset 0 2px 5px rgba(0,0,0,.95),inset 0 0 12px rgba(var(--tt-accent-rgb),.08),0 1px 0 rgba(255,255,255,.06);
}

/* Load buttons in the turntable topbar */
.tt-load-btn{
  padding:3px 8px;min-width:26px;height:22px;
  font-size:12px;line-height:1;
  background:linear-gradient(180deg,#1e1e22 0%,#0c0c10 100%);
  border:1px solid rgba(var(--tt-accent-rgb),.45);color:var(--tt-accent);
  border-radius:4px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.5);
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform .08s;
  flex:0 0 auto;
}
.tt-load-btn:hover{
  background:linear-gradient(180deg,#2a2a32 0%,#141418 100%);
  color:#fff;border-color:rgba(var(--tt-accent-rgb),.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 10px rgba(var(--tt-accent-rgb),.35);
}
.tt-load-btn:active{transform:translateY(1px)}
.tt-load-btn.lib{color:#8aff9f;border-color:rgba(28,255,143,.45)}
.tt-load-btn.lib:hover{color:#fff;border-color:rgba(28,255,143,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 10px rgba(28,255,143,.4)}

/* Drag-and-drop target state */
.turntable.drop-target{
  border-color:rgba(var(--tt-accent-rgb),.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 60px rgba(var(--tt-accent-rgb),.25),
    0 0 40px rgba(var(--tt-accent-rgb),.6),
    0 20px 40px rgba(0,0,0,.7);
}
.turntable.drop-target::after{
  content:'DROP TO LOAD';
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  padding:10px 18px;border-radius:8px;
  font-family:'Orbitron',sans-serif;font-size:14px;font-weight:900;letter-spacing:3px;
  color:#fff;background:rgba(var(--tt-accent-rgb),.85);
  box-shadow:0 0 24px rgba(var(--tt-accent-rgb),.7);
  z-index:5;pointer-events:none;
}

/* ---------- PRO v2 polish: mixer core ---------- */
.vx-mixer{
  background:
    linear-gradient(180deg,#c8c8cd 0%,#868690 2%,#2d2d33 7%,#1a1a1e 18%,#0a0a0c 100%);
  border:1px solid #1c1c22;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.9),
    inset 0 0 0 3px #0c0c10,
    inset 0 0 40px rgba(0,0,0,.6),
    0 24px 50px rgba(0,0,0,.8);
}
.vx-mixer > *{z-index:1}
.vx-mixer .corner-screw{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#e4e4e8 0%,#8a8a90 45%,#2a2a30 100%);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.8),0 1px 1px rgba(0,0,0,.5);
  z-index:2;
}
.vx-mixer .corner-screw.tl{top:8px;left:8px}
.vx-mixer .corner-screw.tr{top:8px;right:8px}
.vx-mixer .corner-screw.bl{bottom:8px;left:8px}
.vx-mixer .corner-screw.br{bottom:8px;right:8px}

.vx-brand{
  background:linear-gradient(180deg,#050506 0%,#0d0d10 100%);
  border:1px solid #1a1a1e;
  border-radius:5px;padding:5px 6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 10px rgba(0,0,0,.6);
  position:relative;
}
.vx-brand::before{
  content:'';position:absolute;inset:0;border-radius:5px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,138,26,.14) 40%,rgba(46,224,255,.14) 60%,transparent);
}

.vx-vu{background:linear-gradient(180deg,#030304 0%,#0a0a0c 100%)}

.vx-ch{
  background:linear-gradient(180deg,#16161a 0%,#060608 100%);
  border:1px solid #212128;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 20px rgba(0,0,0,.7);
  position:relative;
}
.vx-ch::before{
  content:'';position:absolute;top:-1px;left:12%;right:12%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--vx-hi,#ff7a00),transparent);
  box-shadow:0 0 6px var(--vx-hi,#ff7a00);
}
.vx-ch[data-ch="B"]::before{--vx-hi:#2ee0ff}
.vx-ch-head{
  background:linear-gradient(180deg,rgba(255,122,0,.14),rgba(255,122,0,.05));
  border:1px solid rgba(255,122,0,.35) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 8px rgba(255,122,0,.15);
}
.vx-ch[data-ch="B"] .vx-ch-head{
  background:linear-gradient(180deg,rgba(46,224,255,.14),rgba(46,224,255,.05));
  border:1px solid rgba(46,224,255,.35) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 8px rgba(46,224,255,.15);
}

.vx-knob{
  background:
    radial-gradient(circle at 35% 28%,#fff 0%,#d0d0d5 18%,#8a8a90 40%,#3a3a40 75%,#0a0a0c 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.7),
    inset 0 -2px 3px rgba(0,0,0,.8),
    0 2px 5px rgba(0,0,0,.8),
    0 0 0 2px #050507,
    0 0 0 3px rgba(255,255,255,.05);
}
.vx-knob::before{
  content:'';position:absolute;inset:4px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(0,0,0,.35) 0 2deg,transparent 2deg 12deg);
  opacity:.35;
}

.vx-fader-wrap{
  background:linear-gradient(180deg,#020203 0%,#0a0a0c 100%);
  box-shadow:inset 0 0 12px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.04);
}
.vx-fader::-webkit-slider-thumb{
  width:26px;height:32px;border-radius:3px;
  background:
    linear-gradient(90deg,#fafafd 0%,#c4c4ca 28%,#6a6a70 60%,#2a2a30 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);
  background-blend-mode:overlay;
  border:1px solid #050507;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.85),0 3px 6px rgba(0,0,0,.85);
}
.vx-fader::-moz-range-thumb{
  width:26px;height:32px;border-radius:3px;
  background:linear-gradient(90deg,#fafafd,#6a6a70 60%,#2a2a30);
  border:1px solid #050507;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.85),0 3px 6px rgba(0,0,0,.85);
}

.vx-xfader-wrap{background:linear-gradient(180deg,#0a0a0c 0%,#030304 100%)}
.vx-xfader-track{
  background:linear-gradient(180deg,#030304,#0a0a0c 55%,#050506);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.04),0 1px 0 rgba(255,255,255,.04);
}
.vx-xfader-track::before{
  background:linear-gradient(90deg,#ff7a00 0%,#ffd3a8 50%,#2ee0ff 100%);opacity:.65;
  box-shadow:0 0 8px rgba(255,138,26,.4),0 0 8px rgba(46,224,255,.4);
}
.vx-xfader::-webkit-slider-thumb{
  width:24px;height:30px;border-radius:3px;
  background:
    linear-gradient(180deg,#fafafd 0%,#c4c4ca 28%,#6a6a70 60%,#2a2a30 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);
  background-blend-mode:overlay;
  border:1px solid #050507;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.85),0 3px 6px rgba(0,0,0,.85);
}

/* Responsive */
@media(max-width:1100px){
  .vinyl-stage{grid-template-columns:1fr;gap:14px}
  .vx-mixer{min-height:auto}
  .turntable{min-height:auto}
  .tt-platter{width:260px;height:260px}
}
@media(max-width:600px){
  .vinyl-stage{padding:14px 10px}
  .tt-platter{width:220px;height:220px}
  .tt-deck{grid-template-columns:auto 1fr;padding:10px;min-height:auto}
  .tt-rightctl{grid-column:1/-1;flex-direction:row;width:100%;min-width:0;justify-content:center;margin-top:6px}
  .tt-pitch-track{width:60%;height:28px}
  .tt-pitch-input{transform:rotate(0);width:100%;top:-4px;left:0}
  .tt-pitch-track::before{left:6px;right:6px;top:50%;bottom:auto;width:auto;height:2px}
  .tt-pitch-track::after{top:50%;left:50%;width:1px;height:14px}
  .tt-bottom{grid-template-columns:repeat(2,1fr)}
}

/* ================================================================
   JOG — keep BPM screen and top pointer STATIC (outside platter)
   The platter spins; the center screen and the top pointer are now
   siblings of the platter so they never rotate — BPM always readable.
   ================================================================ */
.jog-wheel > .jog-center-screen,
.cdj .jog-wheel > .jog-center-screen{
  position:absolute !important;
  top:50% !important;left:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:5 !important;
  margin:0 !important;
  width:32% !important;height:32% !important;   /* scales with wheel size */
  max-width:100px;max-height:100px;
  min-width:54px;min-height:54px;
}
.jog-wheel > .jog-indicator,
.cdj .jog-wheel > .jog-indicator{
  z-index:6 !important;
}
/* Make sure the BPM text is always upright and sharp */
.jog-wheel > .jog-center-screen .bpm-display,
.cdj .jog-wheel > .jog-center-screen .bpm-display{
  transform:none !important;
  font-variant-numeric:tabular-nums !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.jog-wheel > .jog-center-screen .bpm-sub,
.cdj .jog-wheel > .jog-center-screen .bpm-sub{
  transform:none !important;
  font-size:9px !important;
  letter-spacing:2.4px !important;
}

/* ================================================================
   YOUTUBE — per-deck player cards in the MUSIC tab
   ================================================================ */
.yt-players-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px;
}
.yt-card{
  display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;
  background:linear-gradient(180deg,#18181c 0%,#0a0a0c 100%);
  border:1px solid #26262c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 18px rgba(0,0,0,.5);
}
.yt-card-head{
  display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;
  background:rgba(255,122,0,.06);border:1px solid rgba(255,122,0,.2);
}
.yt-card-deck{
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;letter-spacing:2px;
  color:var(--orange);flex:0 0 auto;
}
.yt-card-title{
  flex:1;min-width:0;font-family:'Share Tech Mono',monospace;font-size:11px;
  color:#bfd8ff;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.yt-player-slot{
  position:relative;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;
  border:1px solid #1a1a20;
  box-shadow:inset 0 0 30px rgba(0,0,0,.9);
}
.yt-player-slot::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at top,rgba(255,0,0,.04),transparent 60%);
}
.yt-player-slot > div,
.yt-player-slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-player-slot > div:empty::after{
  content:'Load a YouTube track onto this deck';
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Share Tech Mono',monospace;font-size:11px;color:#3a4a52;letter-spacing:1px;text-align:center;padding:20px;
}
.yt-card-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.yt-ctl-btn{
  padding:7px 12px;border-radius:5px;cursor:pointer;
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;letter-spacing:1.8px;
  background:linear-gradient(180deg,#2a2a30,#15151a);
  border:1px solid #3a3a40;color:#e8e8ea;
  transition:all .12s;
}
.yt-ctl-btn:hover{border-color:var(--orange);color:var(--orange);box-shadow:0 0 10px rgba(255,138,26,.35)}
.yt-ctl-btn.play{background:linear-gradient(180deg,#1cff8f,#008844);color:#0a0a0c;border-color:#1cff8f}
.yt-ctl-btn.play:hover{filter:brightness(1.08);box-shadow:0 0 14px rgba(28,255,143,.5)}
.yt-vol-label{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;color:var(--text-dim)}
.yt-vol{flex:1;min-width:80px}
.yt-quick-row{display:flex;gap:8px;margin:6px 0 12px;align-items:center}
.yt-quick-row .url-input{flex:1}

@media(max-width:880px){
  .yt-players-grid{grid-template-columns:1fr}
}

/* ================================================================
   DISCOVER — world music catalog search (iTunes + Deezer) + genres
   ================================================================ */
.disc-btn{
  padding:7px 12px;border:none;border-radius:4px;
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;letter-spacing:2px;
  color:#0a0a0c;cursor:pointer;
  background:linear-gradient(180deg,#2ee0ff 0%,#007a9a 100%);
  box-shadow:0 2px 6px rgba(46,224,255,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transition:all .15s ease;
}
.disc-btn:hover{filter:brightness(1.08);box-shadow:0 2px 10px rgba(46,224,255,.5)}
.disc-btn.open{background:linear-gradient(180deg,#5afdff,#00a6c9);box-shadow:0 0 18px rgba(46,224,255,.6)}

.discover-wrap{
  display:none;width:100%;max-width:1700px;margin:6px 0 4px;
  padding:12px 14px;border-radius:10px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(46,224,255,.08) 0%,transparent 60%),
    linear-gradient(180deg,#0f1418 0%,#05080b 100%);
  border:1px solid rgba(46,224,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.55),0 0 22px rgba(46,224,255,.08);
}
.discover-wrap.open{display:flex;flex-direction:column;gap:10px;animation:fadeIn .2s}
.disc-topbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.disc-sources{display:flex;gap:4px;background:rgba(255,255,255,.03);border:1px solid #1a2a30;padding:3px;border-radius:6px}
.disc-src-btn{
  padding:6px 12px;border:none;border-radius:4px;cursor:pointer;
  background:transparent;color:var(--text-dim);
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;
  transition:all .12s;
}
.disc-src-btn:hover{color:#fff}
.disc-src-btn.active{background:linear-gradient(180deg,#2ee0ff,#007a9a);color:#0a0a0c;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 8px rgba(46,224,255,.4)}
.disc-src-tag{
  display:inline-block;margin-left:5px;padding:1px 5px;border-radius:3px;
  font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:1px;font-weight:700;
  background:rgba(255,255,255,.08);color:inherit;opacity:.85;
}
.disc-src-tag.full{background:linear-gradient(180deg,#00ff7a,#008844);color:#0a0a0c}
.disc-src-btn.active .disc-src-tag{background:rgba(0,0,0,.18)}
.disc-src-btn.active .disc-src-tag.full{background:#0a0a0c;color:#9aff9a}
.disc-search{flex:1;min-width:260px;display:flex;gap:6px;align-items:stretch}
.disc-input{
  flex:1;padding:8px 12px;border-radius:5px;
  background:#020608;border:1px solid #1a2a30;color:#7ce8ff;
  font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:.5px;
  outline:none;
}
.disc-input:focus{border-color:#2ee0ff;box-shadow:0 0 8px rgba(46,224,255,.3)}
.disc-input::placeholder{color:#3a4a52}
.disc-go{
  padding:8px 18px;border:none;border-radius:5px;cursor:pointer;
  background:linear-gradient(180deg,#2ee0ff,#00a6c9);color:#0a0a0c;
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;letter-spacing:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 6px rgba(46,224,255,.35);
  transition:all .12s;
}
.disc-go:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 10px rgba(46,224,255,.55)}

.disc-genres{display:flex;flex-wrap:wrap;gap:6px}
.disc-genre-btn{
  padding:6px 12px;border-radius:20px;cursor:pointer;
  background:linear-gradient(180deg,rgba(46,224,255,.06),rgba(46,224,255,.02));
  border:1px solid rgba(46,224,255,.28);
  color:#9fd8ff;
  font-family:'Orbitron',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:1.5px;
  transition:all .12s;white-space:nowrap;
}
.disc-genre-btn:hover{background:rgba(46,224,255,.14);color:#fff;border-color:rgba(46,224,255,.6)}
.disc-genre-btn.active{background:linear-gradient(180deg,#2ee0ff,#007a9a);color:#0a0a0c;border-color:#baf1ff;box-shadow:0 0 12px rgba(46,224,255,.55)}

.disc-sub-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.5px}
.disc-hint{color:#6a8a92}
.disc-hint b{color:#2ee0ff}
.disc-status{color:var(--orange)}

.disc-results{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:8px;
  max-height:52vh;overflow-y:auto;padding:4px 2px;
}
.disc-row{
  display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;
  padding:6px 10px;border-radius:6px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
  transition:background .1s;
}
.disc-row:hover{background:rgba(46,224,255,.06);border-color:rgba(46,224,255,.2)}
.disc-art{width:44px;height:44px;border-radius:4px;object-fit:cover;background:#0a0a0c;border:1px solid #1a2a30}
.disc-info{min-width:0}
.disc-title-txt{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-artist-txt{font-family:'Share Tech Mono',monospace;font-size:9.5px;color:#7ca2ac;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.disc-preview,.disc-add{
  padding:6px 10px;border:1px solid #1a2a30;border-radius:4px;cursor:pointer;
  background:#0a0a0c;color:#9fd8ff;
  font-family:'Orbitron',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:1.2px;
  transition:all .12s;min-width:40px;
}
.disc-preview:hover{border-color:#2ee0ff;color:#fff;box-shadow:0 0 8px rgba(46,224,255,.35)}
.disc-preview.playing{background:#2ee0ff;color:#0a0a0c;border-color:#baf1ff}
.disc-add{color:#9aff9a;border-color:rgba(28,255,143,.35)}
.disc-add:hover{background:rgba(28,255,143,.14);color:#fff;border-color:rgba(28,255,143,.7);box-shadow:0 0 10px rgba(28,255,143,.4)}
.disc-add:disabled{opacity:.5;cursor:wait}

.disc-loading,.disc-empty,.disc-error{
  grid-column:1/-1;padding:20px;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--text-dim);letter-spacing:1px;
}
.disc-error{color:var(--red)}
.disc-note{
  grid-column:1/-1;padding:6px 10px;font-size:10px;color:#8fa6ad;
  font-family:'Share Tech Mono',monospace;letter-spacing:.4px;
  background:rgba(46,224,255,.04);border:1px solid rgba(46,224,255,.12);border-radius:4px;
}

@media(max-width:720px){
  .disc-results{grid-template-columns:1fr;max-height:60vh}
  .disc-topbar{flex-direction:column;align-items:stretch}
  .disc-search{min-width:0}
}

/* ================================================================
   JOG WHEEL PRO v3 — premium, modern, uniform across every deck and
   every display mode (all-4 / DJ focus / work-mode / compact / mobile
   / every theme). Uses !important + high specificity to dominate the
   earlier cascade layers.
   ================================================================ */

/* Chrome highlight arc on the outer bezel (top lit rim reflection) */
.cdj .jog-wheel .jog-outer{
  background:
    radial-gradient(circle at 32% 22%,rgba(255,255,255,.28) 0%,transparent 36%),
    radial-gradient(circle at 68% 85%,rgba(var(--deck-accent-rgb),.09) 0%,transparent 48%),
    conic-gradient(from 210deg,#6a6a72 0deg,#2a2a30 60deg,#3a3a42 120deg,#1a1a20 200deg,#3a3a42 270deg,#5e5e66 360deg),
    radial-gradient(circle at 30% 30%,#6a6a72 0%,#2a2a2e 55%,#050506 100%) !important;
  box-shadow:
    0 0 0 2px #050506,
    0 0 0 3px rgba(255,255,255,.07),
    0 0 0 5px #1a1a20,
    0 0 0 6px rgba(0,0,0,.75),
    inset 0 3px 14px rgba(255,255,255,.16),
    inset 0 -10px 24px rgba(0,0,0,.95),
    0 18px 46px rgba(0,0,0,.85),
    0 0 34px rgba(var(--deck-accent-rgb),.06) !important;
}

/* Inner bevel ring — gives a second rim of depth inside the bezel */
.cdj .jog-wheel .jog-outer::before{
  content:'';position:absolute;inset:3.5%;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.7),
    inset 0 3px 6px rgba(255,255,255,.06),
    inset 0 -3px 8px rgba(0,0,0,.7);
}

/* Refined tick markers — every 9°, with stronger majors every 90° */
.cdj .jog-markers::before{
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.5) 0deg .8deg,
      transparent .8deg 9deg) !important;
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 54%,#000 59%,transparent 59%) !important;
  mask:radial-gradient(circle,transparent 54%,#000 54%,#000 59%,transparent 59%) !important;
}
/* 4 accent dots at N / E / S / W (north is deck color, others white) */
.cdj .jog-markers::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle 3.5px at 50% 7%,var(--deck-accent,#fff) 0 50%,transparent 60%),
    radial-gradient(circle 3px at 93% 50%,rgba(255,255,255,.55) 0 50%,transparent 60%),
    radial-gradient(circle 3px at 50% 93%,rgba(255,255,255,.55) 0 50%,transparent 60%),
    radial-gradient(circle 3px at 7% 50%,rgba(255,255,255,.55) 0 50%,transparent 60%);
  filter:drop-shadow(0 0 5px rgba(var(--deck-accent-rgb),.75));
}

/* Platter gets a soft accent-colored gradient halo */
.cdj .jog-platter{
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.16) 0%,transparent 30%),
    conic-gradient(from 0deg,rgba(255,255,255,.03) 0deg 1.5deg,transparent 1.5deg 3deg),
    radial-gradient(circle at 50% 50%,rgba(var(--deck-accent-rgb),.05) 0%,#14141a 45%,#06060a 100%) !important;
  box-shadow:
    inset 0 3px 14px rgba(255,255,255,.12),
    inset 0 -10px 24px rgba(0,0,0,.95),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px rgba(0,0,0,.8),
    0 0 30px rgba(var(--deck-accent-rgb),.08) !important;
}

/* Accent halo just outside the center screen */
.cdj .jog-center-screen::before{
  content:'';position:absolute;inset:-14%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(var(--deck-accent-rgb),.25) 0%,transparent 70%);
}
/* CRT-style subtle scan-lines inside the screen */
.cdj .jog-center-screen::after{
  content:'';position:absolute;inset:4px;border-radius:50%;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.7;
}

/* Recessed beveled center screen */
.cdj .jog-center-screen{
  background:
    linear-gradient(180deg,rgba(var(--deck-accent-rgb),.14) 0%,transparent 40%),
    radial-gradient(circle at 50% 45%,#0e1820 0%,#04080c 60%,#020407 100%) !important;
  border:2px solid rgba(var(--deck-accent-rgb),.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 26px rgba(var(--deck-accent-rgb),.25),
    inset 0 3px 6px rgba(0,0,0,.95),
    inset 0 -2px 4px rgba(var(--deck-accent-rgb),.18),
    0 0 0 1px rgba(0,0,0,.85),
    0 0 24px rgba(var(--deck-accent-rgb),.38),
    0 4px 14px rgba(0,0,0,.75) !important;
}

/* Refined BPM readout — tabular digits, tight kerning, stronger glow */
.cdj .jog-center-screen .bpm-display{
  font-family:'Orbitron',sans-serif !important;
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:-.4px !important;
  line-height:1 !important;
  color:var(--deck-accent) !important;
  text-shadow:
    0 0 10px rgba(var(--deck-accent-rgb),.95),
    0 0 2px rgba(255,255,255,.55) !important;
  font-variant-numeric:tabular-nums !important;
}
.cdj .jog-center-screen .bpm-sub{
  font-family:'Share Tech Mono',monospace !important;
  font-size:8px !important;
  letter-spacing:3px !important;
  color:rgba(255,255,255,.6) !important;
  opacity:1 !important;
  margin-top:4px !important;
  text-shadow:0 0 2px rgba(var(--deck-accent-rgb),.55) !important;
}

/* Subtle "breathing" pulse on the center screen when the deck is playing */
.jog-wheel.playing .jog-center-screen{
  animation:jogBeatPulseV3 2.1s ease-in-out infinite;
}
@keyframes jogBeatPulseV3{
  0%,100%{
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      inset 0 0 26px rgba(var(--deck-accent-rgb),.25),
      inset 0 3px 6px rgba(0,0,0,.95),
      inset 0 -2px 4px rgba(var(--deck-accent-rgb),.18),
      0 0 0 1px rgba(0,0,0,.85),
      0 0 24px rgba(var(--deck-accent-rgb),.38),
      0 4px 14px rgba(0,0,0,.75);
  }
  50%{
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.14),
      inset 0 0 32px rgba(var(--deck-accent-rgb),.42),
      inset 0 3px 6px rgba(0,0,0,.95),
      inset 0 -2px 4px rgba(var(--deck-accent-rgb),.28),
      0 0 0 1px rgba(0,0,0,.85),
      0 0 38px rgba(var(--deck-accent-rgb),.7),
      0 4px 14px rgba(0,0,0,.75);
  }
}

/* ================================================================
   LIBRARY icon — stacked-records glyph replacing the 📚 emoji
   Inherits currentColor so it takes on each button's theme color.
   ================================================================ */
.lib-svg{
  width:16px;height:16px;display:inline-block;vertical-align:-3px;
  overflow:visible;stroke-linecap:round;
  filter:drop-shadow(0 0 2px currentColor);
}
.deck-header .deck-lib-btn .btn-icon .lib-svg{width:18px;height:18px;margin:0}
.tt-load-btn.lib .lib-svg{width:14px;height:14px}
.deck-header .deck-lib-btn .btn-icon{display:inline-flex;align-items:center;justify-content:center}

/* ================================================================
   TITAN CLOCK — digital LCD header clock (time only, fixed width)
   Fixed-size chip so the header never reflows.
   ================================================================ */
.titan-clock{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 14px;border-radius:6px;
  box-sizing:border-box;width:112px;height:32px;flex:0 0 auto;
  background:linear-gradient(180deg,#020608 0%,#000305 100%);
  border:1px solid rgba(46,224,255,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 10px rgba(46,224,255,.18),
    inset 0 2px 4px rgba(0,0,0,.9),
    0 1px 0 rgba(255,255,255,.04),
    0 2px 6px rgba(0,0,0,.6),
    0 0 10px rgba(46,224,255,.15);
  position:relative;overflow:hidden;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.titan-clock::before{
  /* faint CRT scan lines on the chip background only */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
}
.titan-clock:hover{
  border-color:rgba(46,224,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 14px rgba(46,224,255,.26),
    inset 0 2px 4px rgba(0,0,0,.9),
    0 2px 8px rgba(0,0,0,.6),
    0 0 18px rgba(46,224,255,.32);
}
.titan-clock .tc-time{
  font-family:'Share Tech Mono',monospace;
  font-size:17px;font-weight:700;letter-spacing:2.5px;line-height:1;
  color:#7ff4ff;
  text-shadow:
    0 0 1px #2ee0ff,
    0 1px 0 rgba(0,0,0,.95),
    0 0 3px rgba(46,224,255,.55);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  position:relative;z-index:1;
}

/* Light-theme — dark LCD chip on porcelain, neon stays bright */
body.theme-light .titan-clock{
  background:linear-gradient(180deg,#02161c 0%,#000a10 100%) !important;
  border:1px solid rgba(0,120,160,.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 18px rgba(46,224,255,.2),
    0 2px 5px rgba(80,60,30,.25),
    0 0 0 1px rgba(255,255,255,.85),
    0 0 16px rgba(46,224,255,.22) !important;
}
body.theme-light .titan-clock .tc-time{color:#7ff4ff !important;text-shadow:0 0 1px #2ee0ff,0 1px 0 rgba(0,0,0,.95),0 0 3px rgba(46,224,255,.55) !important}
body.theme-blade .titan-clock{border-color:rgba(0,240,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 12px rgba(0,240,255,.22),inset 0 2px 4px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.6),0 0 14px rgba(0,240,255,.25)}
body.theme-blade .titan-clock .tc-time{color:#d0fbff;text-shadow:0 0 1px #00f0ff,0 1px 0 rgba(0,0,0,.95),0 0 3px rgba(0,240,255,.7)}

@media(max-width:760px){
  .titan-clock{width:96px;height:28px;padding:4px 10px}
  .titan-clock .tc-time{font-size:14px;letter-spacing:1.8px}
}

/* ================================================================
   THEME LIGHT v2 — premium porcelain look (2026 refresh)
   Warmer off-white backgrounds, subtle shadows, refined accents,
   professional typography. Dominates earlier cascade with
   body.theme-light specificity + !important where needed.
   ================================================================ */
body.theme-light{
  --deck-bg:#f1eee6 !important;
  --deck-panel:#faf7f0 !important;
  --deck-border:#c4bfb2 !important;
  --bg:#eae4d6 !important;
  --text:#1a1814 !important;
  --text-dim:#6a645a !important;
}
body.theme-light,body.theme-light html{
  background:
    radial-gradient(ellipse 60% 35% at 50% 0%,rgba(255,138,26,.08) 0%,transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 100%,rgba(46,160,200,.06) 0%,transparent 60%),
    linear-gradient(180deg,#f7f3ea 0%,#e8e2d2 100%) !important;
}
body.theme-light::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.012) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 50% 30%,rgba(255,138,26,.04),transparent 55%);
}

/* Refined brand header */
body.theme-light .brand{
  color:#1a1814 !important;font-weight:900 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(0,0,0,.08) !important;
  letter-spacing:3.5px !important;
}
body.theme-light .brand .max{
  background:linear-gradient(180deg,#ff9f3a 0%,#ff7a1a 50%,#b84000 100%) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 4px rgba(184,64,0,.3),0 0 14px rgba(255,138,26,.35) !important;
  padding:3px 8px !important;border-radius:4px !important;font-size:11px !important;
}
body.theme-light .brand span:not(.max){
  background:linear-gradient(180deg,#ff9f3a 0%,#b84000 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  text-shadow:none !important;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6));
}

/* Main panels — porcelain with warm tint, layered depth */
body.theme-light .cdj,
body.theme-light .mixer,
body.theme-light .library,
body.theme-light .sampler-panel,
body.theme-light .youtube-panel,
body.theme-light .playlists-panel,
body.theme-light .ai-dj-panel,
body.theme-light .analytics-panel,
body.theme-light .midi-panel,
body.theme-light .settings-panel,
body.theme-light .beat-fx-panel,
body.theme-light .scene-fx-panel,
body.theme-light .deck-switch-bar,
body.theme-light .sp-panel,
body.theme-light .editor-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(248,244,236,.95) 100%) !important;
  border:1px solid #d6cfbe !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.05),
    0 2px 4px rgba(80,60,30,.06),
    0 12px 28px rgba(80,60,30,.12),
    0 24px 60px rgba(80,60,30,.08) !important;
  border-radius:12px !important;
}

/* CDJ deck — warm porcelain body with a crisp colored top strip */
body.theme-light .cdj{
  background:
    linear-gradient(180deg,#ffffff 0%,#f8f5ec 50%,#f1ede2 100%) !important;
  border:1px solid #c4bfb2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 60px rgba(255,138,26,.03),
    0 2px 0 rgba(255,255,255,.7),
    0 12px 24px rgba(80,60,30,.15),
    0 26px 60px rgba(80,60,30,.08) !important;
}
body.theme-light .cdj::before{
  height:3px !important;top:0 !important;
  background:linear-gradient(90deg,transparent 5%,rgba(var(--deck-accent-rgb),.25) 20%,rgba(var(--deck-accent-rgb),.85) 50%,rgba(var(--deck-accent-rgb),.25) 80%,transparent 95%) !important;
  box-shadow:0 0 12px rgba(var(--deck-accent-rgb),.45),0 2px 6px rgba(var(--deck-accent-rgb),.3) !important;
}
body.theme-light .cdj::after{
  background:radial-gradient(ellipse at center top,rgba(var(--deck-accent-rgb),.08) 0%,transparent 65%) !important;
}

/* Main tabs — clean porcelain toolbar */
body.theme-light .main-tabs{
  background:linear-gradient(180deg,#f4efe3 0%,#e8e1cf 100%) !important;
  border:1px solid #c8c2b0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.05),0 2px 6px rgba(80,60,30,.08) !important;
}
body.theme-light .tab-btn{
  color:#5a544a !important;font-weight:800 !important;
}
body.theme-light .tab-btn:hover{color:#1a1814 !important;background:rgba(255,255,255,.6) !important}
body.theme-light .tab-btn.active{
  background:linear-gradient(180deg,#ff9f3a 0%,#ff7a1a 50%,#b84000 100%) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 10px rgba(255,138,26,.45),0 0 14px rgba(255,138,26,.35) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.2) !important;
}

/* Panel labels / titles */
body.theme-light .library-title,
body.theme-light .mixer-brand,
body.theme-light .deck-label,
body.theme-light .deck-number{color:#1a1814 !important;text-shadow:0 1px 0 rgba(255,255,255,.8)}
body.theme-light .deck-label .suffix{color:#6a645a !important}
body.theme-light .mixer-brand .model{color:var(--orange) !important;text-shadow:0 1px 0 rgba(255,255,255,.8) !important}

/* Screens (track info, spectrum) — inverted: dark-in-light panel for contrast */
body.theme-light .screen{
  background:linear-gradient(180deg,#1a2228 0%,#0a1217 100%) !important;
  border:1px solid #b8b2a2 !important;
  box-shadow:
    inset 0 0 30px rgba(46,224,255,.12),
    inset 0 2px 6px rgba(0,0,0,.7),
    0 2px 5px rgba(80,60,30,.15),
    0 0 0 1px #ffffff !important;
  color:#9fe6ff !important;
}

/* Jog wheel — deeper, richer look on light so it doesn't look flat */
body.theme-light .jog-outer,
body.theme-light .cdj .jog-wheel .jog-outer{
  background:
    radial-gradient(circle at 32% 22%,rgba(255,255,255,.55) 0%,transparent 32%),
    radial-gradient(circle at 68% 85%,rgba(var(--deck-accent-rgb),.1) 0%,transparent 48%),
    conic-gradient(from 210deg,#b8b2a2 0deg,#4a4540 60deg,#5e564c 120deg,#2a2620 200deg,#5e564c 270deg,#a8a292 360deg),
    radial-gradient(circle at 30% 30%,#8a8478 0%,#3a3530 55%,#0a0806 100%) !important;
  box-shadow:
    0 0 0 2px #0a0806,
    0 0 0 3px rgba(255,255,255,.7),
    0 0 0 5px #302a22,
    0 0 0 6px rgba(255,255,255,.5),
    inset 0 3px 14px rgba(255,255,255,.25),
    inset 0 -10px 24px rgba(0,0,0,.85),
    0 20px 40px rgba(60,40,20,.35),
    0 0 30px rgba(var(--deck-accent-rgb),.1) !important;
}
body.theme-light .cdj .jog-center-screen{
  background:
    linear-gradient(180deg,rgba(var(--deck-accent-rgb),.15) 0%,transparent 40%),
    radial-gradient(circle at 50% 45%,#0e1820 0%,#04080c 60%,#020407 100%) !important;
  border:2px solid rgba(var(--deck-accent-rgb),.7) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    inset 0 0 26px rgba(var(--deck-accent-rgb),.35),
    inset 0 3px 6px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.6),
    0 0 20px rgba(var(--deck-accent-rgb),.45),
    0 4px 12px rgba(60,40,20,.25) !important;
}

/* Buttons — subtle lift with warm shadow */
body.theme-light .big-btn,
body.theme-light .compact-btn,
body.theme-light .util-btn,
body.theme-light .cue-btn,
body.theme-light .pad-mode-btn,
body.theme-light .loop-btn,
body.theme-light .jump-btn,
body.theme-light .beat-btn,
body.theme-light .scene-btn,
body.theme-light .dsb-btn,
body.theme-light .sample-pad{
  background:linear-gradient(180deg,#ffffff 0%,#ebe4d4 100%) !important;
  border:1px solid #c4bdab !important;
  color:#1a1814 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 1px rgba(0,0,0,.06),
    0 1px 2px rgba(80,60,30,.1),
    0 2px 4px rgba(80,60,30,.08) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.8) !important;
}
body.theme-light .big-btn.play{color:#008040 !important;text-shadow:0 1px 0 rgba(255,255,255,.7) !important}
body.theme-light .big-btn.play.active{
  background:linear-gradient(180deg,#4affa0 0%,#00c060 50%,#006030 100%) !important;color:#fff !important;
  border-color:#00663a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 18px rgba(0,200,90,.55),0 2px 6px rgba(0,80,40,.4) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.3) !important;
}
body.theme-light .util-btn.sync.active{
  background:linear-gradient(180deg,#ffa84a,#c85a00) !important;color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 12px rgba(255,138,26,.5) !important;
}

/* Track list rows */
body.theme-light .track-row{
  background:linear-gradient(180deg,#ffffff,#f5f0e3) !important;
  border:1px solid #d8d0bd !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important;
  color:#1a1814 !important;
}
body.theme-light .track-row:hover{background:linear-gradient(180deg,#fff8ec,#ffe8c8) !important;border-color:var(--orange) !important}
body.theme-light .track-row.active{
  background:linear-gradient(180deg,#fff3d8,#ffd89a) !important;border-color:var(--orange) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 10px rgba(255,138,26,.25) !important;
}

/* Knobs — pearl/chrome look */
body.theme-light .knob,
body.theme-light .sp-knob,
body.theme-light .vx-knob{
  background:
    radial-gradient(circle at 35% 28%,#ffffff 0%,#d8d0c0 25%,#8e8678 55%,#3a342a 90%,#1a1510 100%) !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -3px 5px rgba(0,0,0,.45),
    0 2px 4px rgba(80,60,30,.25),
    0 0 0 1px rgba(255,255,255,.7),
    0 0 0 2px rgba(0,0,0,.25) !important;
}

/* AUTO MIX / mixer-toolbar on light */
body.theme-light .mixer-toolbar{
  background:linear-gradient(180deg,#f4efe3 0%,#e4ddcd 100%) !important;
  border:1px solid #c8c0ae !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px rgba(80,60,30,.1),0 2px 4px rgba(80,60,30,.06) !important;
}
body.theme-light .mixer-toolbar .mtb-section{
  background:linear-gradient(180deg,#fefcf6 0%,#f1ebdc 100%) !important;
  border:1px solid #d6cebc !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 20px rgba(255,138,26,.04),0 1px 2px rgba(80,60,30,.06) !important;
}
body.theme-light .mixer-toolbar .mtb-label{color:#b84000 !important;text-shadow:0 1px 0 rgba(255,255,255,.9) !important}
body.theme-light .mixer-toolbar .mtb-dir{
  background:rgba(46,160,200,.12) !important;border:1px solid rgba(46,160,200,.3) !important;color:#006080 !important;
}
body.theme-light .automix-btn{
  background:linear-gradient(180deg,#ffffff,#ebe4d4) !important;color:#3a342a !important;
  border:1px solid #c4bdab !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(80,60,30,.08) !important;
}
body.theme-light .automix-btn.running{
  background:linear-gradient(180deg,#ffa84a,#c85a00) !important;color:#fff !important;border-color:#b84000 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 14px rgba(255,138,26,.5) !important;
}
body.theme-light .automix-sync{
  background:linear-gradient(180deg,#ffffff,#ebe4d4) !important;color:#b84000 !important;border:1px solid #b84000 !important;
}
body.theme-light .automix-cont{color:#006080 !important;border-color:#006080 !important}

/* TITAN LAB studio panels */
body.theme-light .sp-block,body.theme-light .sp-presets,body.theme-light .sp-master,body.theme-light .sp-piano-wrap{
  background:linear-gradient(180deg,#fefcf6 0%,#f1ebdc 100%) !important;
  border:1px solid #d6cebc !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 2px 4px rgba(80,60,30,.06) !important;
}
body.theme-light .sp-block-title{color:#b84000 !important;text-shadow:0 1px 0 rgba(255,255,255,.8)}

/* VINYL stage */
body.theme-light .vinyl-stage{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,138,26,.08) 0%,transparent 60%),
    linear-gradient(180deg,#f1ede2 0%,#e4dccb 100%) !important;
  border:1px solid #c8c0ae !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 40px rgba(80,60,30,.15) !important;
}
body.theme-light .turntable{
  background:
    linear-gradient(180deg,#f6f2e8 0%,#9a9488 6%,#4a4540 20%,#2a2620 50%,#1a1510 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.8),
    inset 0 0 0 3px #1a1510,
    inset 0 0 50px rgba(0,0,0,.55),
    0 22px 48px rgba(60,40,20,.35) !important;
}

/* DISCOVER panel — gentle blue tint */
body.theme-light .discover-wrap{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(46,160,200,.06) 0%,transparent 60%),
    linear-gradient(180deg,#fdfcf7 0%,#f0ebde 100%) !important;
  border:1px solid rgba(46,160,200,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 28px rgba(80,60,30,.1) !important;
}
body.theme-light .disc-input{
  background:#ffffff !important;color:#1a2a30 !important;
  border:1px solid #c8c0ae !important;
}
body.theme-light .disc-row{
  background:rgba(255,255,255,.7) !important;border-color:rgba(0,0,0,.06) !important;color:#1a1814;
}
body.theme-light .disc-row:hover{background:rgba(46,160,200,.08) !important;border-color:rgba(46,160,200,.35) !important}
body.theme-light .disc-title-txt{color:#1a1814 !important}
body.theme-light .disc-artist-txt{color:#5a544a !important}

/* Text inputs */
body.theme-light input[type="text"],
body.theme-light input[type="password"],
body.theme-light input[type="number"],
body.theme-light input[type="search"],
body.theme-light select,
body.theme-light textarea,
body.theme-light .url-input,
body.theme-light .search-input,
body.theme-light .fx-selector{
  background:#ffffff !important;color:#1a1814 !important;
  border:1px solid #c8c0ae !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05),inset 0 0 0 1px rgba(255,255,255,.9) !important;
}
body.theme-light input:focus,body.theme-light select:focus{
  border-color:var(--orange) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05),0 0 0 3px rgba(255,138,26,.18) !important;
  outline:none !important;
}

/* Scrollbar */
body.theme-light ::-webkit-scrollbar{width:8px;height:8px}
body.theme-light ::-webkit-scrollbar-track{background:#e8e1cf !important}
body.theme-light ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ff9f3a,#b84000) !important;border-radius:4px !important;
  border:1px solid #a03800 !important;
}

/* ================================================================
   TAB MORE — dropdown so the main tab bar isn't overcrowded
   ================================================================ */
.tab-more{position:relative;display:inline-flex;align-items:stretch;flex:0 0 auto}
.tab-more-btn{position:relative}
.tab-more.open .tab-more-btn{
  background:linear-gradient(180deg,var(--orange),#c85a00) !important;
  color:#0a0a0a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 14px rgba(255,138,26,.5);
}
.tab-more-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:1000;
  min-width:240px;display:none;flex-direction:column;gap:2px;
  padding:6px;border-radius:10px;
  background:linear-gradient(180deg,#121217 0%,#05050a 100%);
  border:1px solid rgba(255,138,26,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 40px rgba(0,0,0,.75),
    0 0 24px rgba(255,138,26,.18);
  animation:tabMoreIn .14s ease;
}
.tab-more.open .tab-more-menu{display:flex}
@keyframes tabMoreIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.tab-more-menu::before{
  content:'';position:absolute;top:-6px;right:20px;width:10px;height:10px;
  background:linear-gradient(135deg,#121217,#121217);
  border-top:1px solid rgba(255,138,26,.35);border-left:1px solid rgba(255,138,26,.35);
  transform:rotate(45deg);
}
.tab-more-menu .tab-btn{
  width:100%;min-width:0;padding:9px 14px;text-align:left;border-radius:6px;
  background:transparent;color:#cccfd5;font-size:10.5px;
  letter-spacing:2px;line-height:1;display:flex;align-items:center;gap:6px;
  justify-content:flex-start;
}
.tab-more-menu .tab-btn:hover{background:rgba(255,138,26,.08);color:#fff}
.tab-more-menu .tab-btn.active{
  background:linear-gradient(180deg,var(--orange),#c85a00) !important;
  color:#0a0a0a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.tab-more-sep{height:1px;margin:4px 8px;background:linear-gradient(90deg,transparent,rgba(255,138,26,.3),transparent)}

/* Light theme */
body.theme-light .tab-more-menu{
  background:linear-gradient(180deg,#ffffff,#f1ebdc) !important;
  border:1px solid rgba(184,64,0,.35) !important;
  box-shadow:0 12px 28px rgba(80,60,30,.22),0 0 0 1px rgba(255,255,255,.8) !important;
}
body.theme-light .tab-more-menu::before{
  background:#ffffff !important;border-color:rgba(184,64,0,.35) !important;
}
body.theme-light .tab-more-menu .tab-btn{color:#3a342a !important}
body.theme-light .tab-more-menu .tab-btn:hover{background:rgba(255,138,26,.12) !important}

/* Mobile — more button stays, main bar scrolls horizontally */
@media(max-width:760px){
  .tab-more-menu{right:auto;left:0;min-width:220px}
  .tab-more-menu::before{right:auto;left:20px}
}

/* ================================================================
   VINYL — PITCH fader (rotated horizontal range for cross-browser drag)
   The native vertical-slider approach (appearance:slider-vertical)
   stopped dragging in newer Chrome. Back to the battle-tested rotated
   horizontal range, centered inside its track via transform-origin.
   ================================================================ */
.tt-pitch-track{position:relative !important;display:block !important;padding:0 !important}
.tt-pitch-input{
  -webkit-appearance:none !important;appearance:none !important;
  writing-mode:horizontal-tb !important;direction:ltr !important;
  position:absolute !important;
  /* unrotated footprint matches the track's HEIGHT (so after -90deg it
     spans the full vertical length) + a 28px thickness to capture pointer */
  width:220px !important;height:28px !important;
  top:50% !important;left:50% !important;
  transform:translate(-50%,-50%) rotate(-90deg) !important;
  transform-origin:center center !important;
  margin:0 !important;padding:0 !important;
  background:transparent !important;cursor:grab;touch-action:none;
}
.tt-pitch-input:active{cursor:grabbing}
.tt-pitch-input::-webkit-slider-runnable-track{height:4px;background:transparent}
.tt-pitch-input::-moz-range-track{height:4px;background:transparent}
.tt-pitch-input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  /* after rotate(-90deg) a 22×36 thumb reads as 36 tall × 22 wide which
     matches the original Technics fader look on the vertical track */
  width:22px !important;height:36px !important;border-radius:4px !important;
  background:
    linear-gradient(180deg,#fafafc 0%,#bebec3 16%,#6a6a70 52%,#2a2a30 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px) !important;
  background-blend-mode:overlay !important;
  border:1px solid #050507 !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.75),
    inset 0 -2px 4px rgba(0,0,0,.85),
    0 3px 5px rgba(0,0,0,.85),
    0 0 12px rgba(var(--tt-accent-rgb),.25) !important;
  margin-top:-12px;
}
.tt-pitch-input::-moz-range-thumb{
  width:22px !important;height:36px !important;border-radius:4px !important;
  background:linear-gradient(180deg,#fafafc,#6a6a70 60%,#2a2a30) !important;
  border:1px solid #050507 !important;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.75),inset 0 -2px 4px rgba(0,0,0,.85),0 3px 5px rgba(0,0,0,.85) !important;
}

/* Top tabs — compact so all fit cleanly on one row */
.main-tabs{
  flex-wrap:wrap !important;overflow-x:visible !important;
  gap:3px !important;row-gap:3px !important;padding:3px !important;
}
.main-tabs .tab-btn{
  flex:1 1 auto !important;min-width:0 !important;
  padding:6px 8px !important;
  font-size:9px !important;letter-spacing:1.1px !important;
  font-weight:800 !important;min-height:28px !important;
  white-space:nowrap !important;
}
@media(min-width:1400px){
  .main-tabs .tab-btn{font-size:9.5px !important;padding:7px 10px !important;letter-spacing:1.3px !important}
}
@media(max-width:720px){
  .main-tabs .tab-btn{font-size:9px !important;padding:5px 7px !important;letter-spacing:1px !important;min-height:26px !important}
}

/* ================================================================
   COMING SOON — banner on TITAN LAB while the engine is wired up
   ================================================================ */
.coming-soon-card{
  width:100%;max-width:1600px;margin:0 auto 14px;
  padding:20px 24px 22px;border-radius:14px;
  background:
    radial-gradient(ellipse 60% 60% at 100% 0%,rgba(255,138,26,.18) 0%,transparent 55%),
    radial-gradient(ellipse 60% 60% at 0% 100%,rgba(46,224,255,.14) 0%,transparent 55%),
    linear-gradient(180deg,#14141a 0%,#080810 100%);
  border:1px solid rgba(255,138,26,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 10px 30px rgba(0,0,0,.5),
    0 0 28px rgba(255,138,26,.15);
  position:relative;overflow:hidden;
}
.coming-soon-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange) 30%,#2ee0ff 70%,transparent);
  box-shadow:0 0 12px rgba(255,138,26,.65);
  animation:csTopLine 6s linear infinite;
}
@keyframes csTopLine{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}
.coming-soon-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.4;
}
.cs-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,138,26,.18);
}
.cs-led{
  width:12px;height:12px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 30% 30%,#ffe5b0,var(--orange) 50%,#5a1c00 100%);
  box-shadow:0 0 10px rgba(255,138,26,.9),inset 0 0 2px rgba(255,255,255,.5);
  animation:csLedPulse 1.2s ease-in-out infinite;
}
@keyframes csLedPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.9)}}
.cs-badge{
  font-family:'Orbitron',sans-serif;font-size:12px;font-weight:900;letter-spacing:3px;
  color:#0a0a0a;padding:6px 14px;border-radius:6px;
  background:linear-gradient(180deg,#ffa84a 0%,var(--orange) 50%,#b84000 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(255,138,26,.55),0 0 12px rgba(255,138,26,.35);
  text-shadow:0 1px 1px rgba(0,0,0,.2);
}
.cs-sub{font-family:'Share Tech Mono',monospace;font-size:12px;color:#9fd8ff;letter-spacing:1.2px;flex:1;text-align:right}
.cs-body h3{
  font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;letter-spacing:2.5px;
  color:#fff;margin:0 0 10px;
  text-shadow:0 0 12px rgba(255,138,26,.35);
}
.cs-body p{
  font-family:'Share Tech Mono',monospace;font-size:12.5px;color:#c8cdd3;letter-spacing:.4px;line-height:1.7;margin:0 0 10px;
}
.cs-sub-line{color:#8a9aa4 !important;font-size:11.5px !important;font-style:italic}
.cs-progress{
  display:flex;flex-direction:column;gap:6px;margin:16px 0 12px;
  padding:14px;border-radius:10px;
  background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.55));
  border:1px solid rgba(255,255,255,.05);
}
.cs-progress-row{
  display:grid;grid-template-columns:minmax(160px,1fr) 3fr auto;gap:12px;align-items:center;
  font-family:'Share Tech Mono',monospace;font-size:11px;color:#bfbfc4;letter-spacing:.5px;
}
.cs-progress-row span:first-child{color:#e8e8ea}
.cs-bar{
  height:8px;border-radius:4px;overflow:hidden;
  background:#050507;border:1px solid #1a1a1e;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
}
.cs-bar-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,#ff7a00 0%,#ffa84a 50%,#2ee0ff 100%);
  box-shadow:0 0 8px rgba(255,138,26,.6);
  animation:csBarShine 4s ease-in-out infinite;
}
@keyframes csBarShine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
.cs-pct{color:var(--orange);font-weight:800;min-width:36px;text-align:right}
.cs-cta{
  margin-top:14px;padding:10px 12px;border-radius:8px;
  background:rgba(46,224,255,.06);border:1px solid rgba(46,224,255,.22);
  color:#bfe8f0 !important;font-size:12px !important;
}
.cs-cta a{color:#2ee0ff;text-decoration:none;font-weight:700;border-bottom:1px solid rgba(46,224,255,.4)}
.cs-cta a:hover{background:rgba(46,224,255,.15);border-bottom-color:#2ee0ff}

/* Preview overlay label on the (muted) real panel below */
.cs-preview-overlay{
  position:absolute;top:10px;right:10px;z-index:5;pointer-events:none;
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;letter-spacing:3px;color:var(--orange);
  padding:5px 10px;border-radius:5px;
  background:rgba(10,10,12,.85);border:1px solid rgba(255,138,26,.55);
  box-shadow:0 0 12px rgba(255,138,26,.3);
}

/* Light theme variants */
body.theme-light .coming-soon-card{
  background:
    radial-gradient(ellipse 60% 60% at 100% 0%,rgba(255,138,26,.12) 0%,transparent 55%),
    radial-gradient(ellipse 60% 60% at 0% 100%,rgba(46,160,200,.1) 0%,transparent 55%),
    linear-gradient(180deg,#fdfcf7 0%,#f0ebde 100%) !important;
  border:1px solid rgba(184,64,0,.5) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 18px rgba(80,60,30,.18),0 0 24px rgba(255,138,26,.15) !important;
}
body.theme-light .cs-body h3{color:#1a1814 !important;text-shadow:0 1px 0 rgba(255,255,255,.6) !important}
body.theme-light .cs-body p{color:#3a342a !important}
body.theme-light .cs-sub-line{color:#6a645a !important}
body.theme-light .cs-sub{color:#1a5a70 !important}

/* ================================================================
   SUPPORT TAB — contact form + purchase request
   ================================================================ */
.support-panel{padding:18px !important}
.support-panel .sup-direct{
  font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:.5px;
  color:var(--orange);text-decoration:none;
  padding:6px 12px;border-radius:6px;
  background:rgba(255,138,26,.08);border:1px solid rgba(255,138,26,.3);
}
.support-panel .sup-direct:hover{background:rgba(255,138,26,.16);color:#ffcf7a}
.sup-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:18px;margin-top:14px}
@media(max-width:900px){.sup-grid{grid-template-columns:1fr}}

.sup-mode-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.sup-mode-btn{
  padding:9px 14px;border-radius:6px;cursor:pointer;
  background:linear-gradient(180deg,#1e1e24 0%,#0e0e12 100%);
  border:1px solid #2c2c34;color:var(--text-dim);
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;letter-spacing:1.5px;
  transition:all .15s;
}
.sup-mode-btn:hover{color:#fff;border-color:rgba(255,138,26,.55)}
.sup-mode-btn.active{
  background:linear-gradient(180deg,var(--orange),#c85a00);
  color:#0a0a0a;border-color:var(--orange-glow);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 14px rgba(255,138,26,.5);
}
.sup-mode-btn[data-sup-mode="purchase"].active{background:linear-gradient(180deg,#1cff8f,#008844);border-color:#baffdc}

.sup-form{
  padding:16px;border-radius:10px;
  background:linear-gradient(180deg,#16161a 0%,#0a0a0c 100%);
  border:1px solid rgba(255,138,26,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.5);
}
.sup-row{margin-bottom:14px}
.sup-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.sup-row-2{grid-template-columns:1fr}}
.sup-label{
  display:block;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:1.8px;
  font-weight:700;color:var(--orange);margin-bottom:6px;
}
.sup-form .url-input,.sup-form textarea{
  width:100%;padding:10px 12px;border-radius:6px;
  background:#020608;color:#9fd8ff;
  border:1px solid #1a2a30;
  font-family:'Share Tech Mono',monospace;font-size:12px;
}
.sup-form .url-input:focus,.sup-form textarea:focus{
  border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,138,26,.15);outline:none;
}
.sup-form textarea{resize:vertical;min-height:130px}

.sup-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
@media(max-width:700px){.sup-tiers{grid-template-columns:1fr}}
.sup-tier{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;cursor:pointer;transition:all .12s;
  background:linear-gradient(180deg,#1a1a20,#0e0e12);border:1px solid #2a2a32;
}
.sup-tier:hover{border-color:rgba(28,255,143,.5)}
.sup-tier input{margin-top:3px;accent-color:#1cff8f}
.sup-tier input:checked + span{color:#9aff9f}
.sup-tier input:checked + span b{color:#1cff8f}
.sup-tier span{display:flex;flex-direction:column;gap:2px;color:#bfbfc4;flex:1;min-width:0}
.sup-tier b{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:1.5px;color:#fff}
.sup-tier em{font-style:normal;font-size:10px;color:#8a8a92;letter-spacing:.2px}
.sup-tier strong{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--orange-glow);letter-spacing:1px;font-weight:700;margin-top:2px}

.sup-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:0}
.sup-send{
  padding:12px 20px;border-radius:6px;cursor:pointer;border:none;
  background:linear-gradient(180deg,#1cff8f,#008844);color:#021810;
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;letter-spacing:2.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 10px rgba(28,255,143,.4);
  transition:all .12s;
}
.sup-send:hover{filter:brightness(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 16px rgba(28,255,143,.55)}
.sup-copy,.sup-mailto{
  padding:12px 18px;border-radius:6px;cursor:pointer;
  background:linear-gradient(180deg,#2a2a30,#141418);color:#9fd8ff;
  border:1px solid rgba(46,224,255,.35);
  font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;letter-spacing:2px;
}
.sup-copy:hover,.sup-mailto:hover{border-color:#2ee0ff;color:#fff;box-shadow:0 0 12px rgba(46,224,255,.3)}
.sup-mailto{color:#ffc9a0;border-color:rgba(255,138,26,.45)}
.sup-mailto:hover{border-color:var(--orange);color:#fff;box-shadow:0 0 12px rgba(255,138,26,.35)}
.sup-send:disabled{opacity:.55;cursor:wait;filter:grayscale(.3)}
.sup-status{
  font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.8px;
  padding:0 4px;min-height:14px;color:var(--text-dim);
}
.sup-status.ok{color:#9aff9f}
.sup-status.err{color:var(--red)}
.sup-note{
  margin-top:12px;padding:10px;border-radius:6px;
  background:rgba(46,224,255,.05);border:1px solid rgba(46,224,255,.2);
  font-family:'Share Tech Mono',monospace;font-size:10.5px;color:#9fd8ff;line-height:1.5;
}
.sup-note b{color:var(--orange);letter-spacing:.5px}

.sup-info-col{display:flex;flex-direction:column;gap:12px}
.sup-card{
  padding:14px;border-radius:10px;
  background:linear-gradient(180deg,#14141a 0%,#08080a 100%);
  border:1px solid #22222a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 14px rgba(0,0,0,.45);
}
.sup-card-title{
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2.5px;font-weight:900;
  color:var(--orange);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,138,26,.18);
}
.sup-card-body{display:flex;flex-direction:column;gap:8px}
.sup-contact-item{display:flex;justify-content:space-between;gap:10px;font-family:'Share Tech Mono',monospace;font-size:11px}
.sup-contact-k{color:#8a8a92;letter-spacing:1.2px}
.sup-contact-item a{color:var(--orange);text-decoration:none}
.sup-contact-item a:hover{text-decoration:underline}
.sup-feat{display:flex;gap:8px;align-items:flex-start;font-family:'Share Tech Mono',monospace;font-size:11px;color:#bfd8ff;line-height:1.4}
.sup-feat-dot{color:var(--orange);flex:0 0 auto}
.sup-hint{margin-top:6px;font-family:'Share Tech Mono',monospace;font-size:10px;color:#8a8a92;line-height:1.5}
.sup-hint b{color:#1cff8f}

/* Light theme */
body.theme-light .sup-form{background:linear-gradient(180deg,#ffffff,#f5f0e3) !important;border:1px solid #c8c0ae !important;box-shadow:0 4px 14px rgba(80,60,30,.1) !important}
body.theme-light .sup-form .url-input,body.theme-light .sup-form textarea{background:#ffffff !important;color:#1a1814 !important;border:1px solid #c8c0ae !important}
body.theme-light .sup-mode-btn{background:linear-gradient(180deg,#ffffff,#ebe4d4) !important;color:#5a544a !important;border:1px solid #c4bdab !important}
body.theme-light .sup-mode-btn.active{background:linear-gradient(180deg,var(--orange),#c85a00) !important;color:#fff !important}
body.theme-light .sup-tier{background:linear-gradient(180deg,#fefcf6,#f1ebdc) !important;border-color:#c4bdab !important}
body.theme-light .sup-tier b{color:#1a1814 !important}
body.theme-light .sup-card{background:linear-gradient(180deg,#fefcf6,#f1ebdc) !important;border-color:#c4bdab !important}

/* ================================================================
   SAMPLER PADS — loaded-by-default look (soft colored LED glow)
   ================================================================ */
.sample-pad.loaded{
  border-color:var(--pad-color,var(--orange)) !important;
  background:
    radial-gradient(ellipse at 50% 120%,rgba(var(--pad-color-rgb,255,122,0),.25) 0%,transparent 60%),
    linear-gradient(180deg,#3a3a42 0%,#1a1a1c 60%,#0d0d10 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 4px rgba(0,0,0,.6),
    0 0 0 1px rgba(var(--pad-color-rgb,255,122,0),.15),
    0 0 12px rgba(var(--pad-color-rgb,255,122,0),.18),
    0 3px 6px rgba(0,0,0,.5) !important;
}
.sample-pad.loaded::after{
  content:'';position:absolute;top:4px;left:4px;width:6px;height:6px;border-radius:50%;
  background:var(--pad-color,var(--orange));
  box-shadow:0 0 8px var(--pad-color,var(--orange)),inset 0 0 2px rgba(255,255,255,.6);
  animation:padLedPulse 2.4s ease-in-out infinite;z-index:2;pointer-events:none;
}
@keyframes padLedPulse{0%,100%{opacity:.6}50%{opacity:1}}
.sample-pad.loaded .pad-num{
  color:var(--pad-color,var(--orange)) !important;
  text-shadow:0 0 8px rgba(var(--pad-color-rgb,255,122,0),.7),0 0 2px rgba(255,255,255,.3) !important;
}
.sample-pad.loaded .pad-name{
  color:var(--pad-color,var(--orange)) !important;opacity:.85 !important;
  text-shadow:0 0 4px rgba(var(--pad-color-rgb,255,122,0),.55) !important;
}
/* Per-pad accent RGB so box-shadows can render with alpha */
.sample-pad[data-color="0"]{--pad-color-rgb:0,229,255}
.sample-pad[data-color="1"]{--pad-color-rgb:255,60,120}
.sample-pad[data-color="2"]{--pad-color-rgb:255,212,0}
.sample-pad[data-color="3"]{--pad-color-rgb:0,255,122}
.sample-pad[data-color="4"]{--pad-color-rgb:255,122,0}
.sample-pad[data-color="5"]{--pad-color-rgb:200,0,255}
.sample-pad[data-color="6"]{--pad-color-rgb:0,255,212}
.sample-pad[data-color="7"]{--pad-color-rgb:255,90,0}
.sample-pad[data-color="8"]{--pad-color-rgb:155,255,0}
.sample-pad[data-color="9"]{--pad-color-rgb:255,0,155}
.sample-pad[data-color="10"]{--pad-color-rgb:0,176,255}
.sample-pad[data-color="11"]{--pad-color-rgb:255,136,0}
.sample-pad[data-color="12"]{--pad-color-rgb:176,0,255}
.sample-pad[data-color="13"]{--pad-color-rgb:255,255,0}
.sample-pad[data-color="14"]{--pad-color-rgb:0,255,0}
.sample-pad[data-color="15"]{--pad-color-rgb:255,0,170}

/* ================================================================
   VINYL PRO v4 — realistic 1200-style turntables + wider mixer core
   Larger platters, refined tonearm (counterweight + cueing lever +
   cartridge), pitch fader with scale ticks and zero LED, bigger
   START/STOP with LED collar, stepped VU meter in the mixer core.
   Dominates earlier VINYL cascade with !important.
   ================================================================ */
.vinyl-stage{
  grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr) !important;
  gap:22px !important;padding:30px 24px 38px !important;
}
.turntable{
  min-height:560px !important;padding:22px 24px 28px !important;border-radius:16px !important;
  background:
    linear-gradient(180deg,#dadde3 0%,#9a9eaa 2%,#3c4048 8%,#1a1c22 22%,#0e1014 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 2px 0 rgba(255,255,255,.15),
    inset 0 0 0 3px #0c0e12,
    inset 0 -1px 0 rgba(0,0,0,.9),
    inset 0 0 80px rgba(0,0,0,.55),
    0 34px 70px rgba(0,0,0,.8),
    0 2px 0 rgba(255,255,255,.06) !important;
}
.turntable::after{
  content:'';position:absolute;inset:10px;border-radius:12px;pointer-events:none;z-index:0;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
/* Top bezel — a more substantial screen with TITAN plate */
.tt-topbar{
  padding:9px 14px !important;border-radius:10px !important;margin-bottom:14px !important;
  background:linear-gradient(180deg,#050608 0%,#02030480 100%) !important;
  background:linear-gradient(180deg,#050608 0%,#020304 100%) !important;
  border:1px solid #1a1c22 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 14px rgba(0,0,0,.8),
    0 1px 0 rgba(255,255,255,.05) !important;
}
.tt-brand{
  font-size:11px !important;letter-spacing:3px !important;color:#cccfd5 !important;font-weight:900 !important;
}

/* Deck area — a recessed plate on the body */
.tt-deck{
  padding:20px !important;border-radius:12px !important;
  grid-template-columns:auto 1fr auto !important;gap:18px !important;
  background:
    radial-gradient(circle at 50% 50%,#1e2028 0%,#0d0e12 60%,#050507 100%) !important;
  border:1px solid #202228 !important;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.9),
    inset 0 2px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
/* Make room for a larger platter */
.tt-platter-wrap{min-height:360px}

/* PLATTER — substantially larger (like a real 12" turntable).
   Uses aspect-ratio so the platter stays perfectly round even when
   the container narrows (was going oval on mid-size screens). */
.tt-platter-wrap{
  display:flex !important;align-items:center !important;justify-content:center !important;
  min-width:0 !important;aspect-ratio:1/1 !important;
  width:100% !important;max-width:360px !important;margin:0 auto !important;
}
.tt-platter{
  width:min(340px,100%) !important;height:auto !important;
  aspect-ratio:1/1 !important;flex:0 0 auto !important;
  background:
    radial-gradient(circle at 50% 50%,#3c3c42 0%,#1c1c22 58%,#08080b 100%) !important;
  box-shadow:
    0 0 0 3px #0a0a0c,
    0 0 0 4px #3e3e46,
    0 0 0 5px #0a0a0c,
    0 0 0 7px #2a2a30,
    0 0 0 8px #0a0a0c,
    inset 0 3px 8px rgba(255,255,255,.12),
    inset 0 -8px 22px rgba(0,0,0,.95),
    0 18px 50px rgba(0,0,0,.8),
    0 0 70px rgba(var(--tt-accent-rgb),.08) !important;
}
@media(max-width:1280px){.tt-platter-wrap{max-width:320px !important}.tt-platter{width:min(300px,100%) !important}}
@media(max-width:1100px){.vinyl-stage{grid-template-columns:1fr !important;gap:18px !important}.tt-platter-wrap{max-width:340px !important}.tt-platter{width:min(320px,100%) !important}}

.tt-platter::before{
  /* brighter strobe dots */
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.32) 0deg .8deg,
      transparent .8deg 6deg) !important;
  -webkit-mask:radial-gradient(circle,transparent 0 50%,#000 50% 52%,transparent 52%) !important;
  mask:radial-gradient(circle,transparent 0 50%,#000 50% 52%,transparent 52%) !important;
}

/* VINYL — pronounced concentric grooves + gloss sheen */
.tt-vinyl{
  inset:22px !important;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.16) 0%,transparent 34%),
    repeating-radial-gradient(circle,rgba(255,255,255,.06) 0 1px,transparent 1px 2.2px),
    radial-gradient(circle at 50% 50%,#1e1e22 0%,#0a0a0c 70%,#000 100%) !important;
  box-shadow:
    inset 0 0 0 2px #000,
    inset 0 2px 6px rgba(255,255,255,.08),
    inset 0 -6px 14px rgba(0,0,0,.98),
    0 0 0 1px #000,
    0 0 26px rgba(0,0,0,.9) !important;
}
.tt-vinyl::before{
  /* stronger light streak */
  background:conic-gradient(from 195deg,
    transparent 0deg,
    rgba(255,255,255,.12) 12deg,
    rgba(255,255,255,.02) 30deg,
    transparent 50deg,
    transparent 360deg) !important;
}
.tt-label{
  /* PRO v2 polish — SIZE tweaks only. The colour + texture of the
     label now comes from the earlier .tt-label block (cream paper,
     cross-hatch grain, ink ring, brass spindle) — that's the
     user-requested analog look. Do NOT paint per-deck colour here. */
  width:36% !important;height:36% !important;
  font-size:11px !important;letter-spacing:2px !important;
}
.tt-label::after{
  width:8px !important;height:8px !important;
  background:#0a0708 !important;
  box-shadow:
    0 0 0 1px rgba(180,140,80,.7),
    inset 0 0 3px #000,
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 3px rgba(0,0,0,.7) !important;
}

/* TONEARM — richer SVG detail with counterweight + cueing lever */
.tt-tonearm{
  width:160px !important;height:200px !important;top:16px !important;right:20px !important;
  transform:rotate(-24deg) !important;transform-origin:82% 10% !important;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.75)) !important;
}
.tt-tonearm.dropped{transform:rotate(-8deg) !important}
.tt-tonearm .ta-pivot{
  width:34px !important;height:34px !important;right:8px !important;top:0 !important;
  background:radial-gradient(circle at 30% 30%,#fafafc,#a0a0a6 35%,#3a3a40 75%,#0a0a0c 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.7),
    0 3px 6px rgba(0,0,0,.8),
    0 0 0 3px #0a0a0c,
    0 0 0 4px #2e2e34 !important;
}
.tt-tonearm .ta-pivot::after{
  content:'';position:absolute;inset:8px;border-radius:50%;
  background:radial-gradient(circle,#050506 0%,#0a0a0c 100%);
  box-shadow:inset 0 0 4px rgba(255,255,255,.08);
}
.tt-tonearm .ta-cw{
  width:28px !important;height:28px !important;right:-10px !important;top:-6px !important;
  background:radial-gradient(circle at 30% 30%,#d8d8dc,#6e6e74 55%,#1a1a1e 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(0,0,0,.6),
    0 3px 5px rgba(0,0,0,.75) !important;
}
.tt-tonearm .ta-cw::after{
  content:'';position:absolute;inset:3px;border-radius:50%;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px);
  opacity:.5;
}

/* LEFT column — RPM + START/STOP */
.tt-leftctl{gap:14px !important;min-width:68px !important}
.tt-rpm{padding:8px !important;gap:5px !important}
.tt-rpm-btn{padding:6px 12px !important;font-size:11px !important;font-weight:900 !important;letter-spacing:1.5px !important;min-width:48px !important}

/* START/STOP — larger, with a chrome bezel */
.tt-startstop{
  width:62px !important;height:62px !important;
  background:
    radial-gradient(circle at 35% 28%,#ffffff 0%,#d8d8dc 20%,#9a9aa0 45%,#4a4a52 78%,#0a0a0e 100%) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.75),
    inset 0 -4px 8px rgba(0,0,0,.85),
    0 5px 14px rgba(0,0,0,.85),
    0 0 0 3px #0a0a0c,
    0 0 0 4px #3a3a42,
    0 0 0 5px #0a0a0c,
    0 0 0 7px #1a1a20 !important;
}
.tt-startstop::before{
  width:16px !important;height:16px !important;
  background:radial-gradient(circle at 30% 30%,#ffd8b0,var(--tt-accent) 55%,#3a0f00 100%) !important;
  box-shadow:0 0 12px rgba(var(--tt-accent-rgb),.75) !important;
}
.tt-startstop-label{font-size:9px !important;letter-spacing:2px !important;font-weight:900 !important;color:#b0b0b6 !important}

/* PITCH fader — wider track with scale markings + zero LED */
.tt-rightctl{min-width:78px !important;gap:6px !important}
.tt-pitch-label{font-size:10px !important;letter-spacing:2px !important;color:#cccfd5 !important;font-weight:900 !important}
.tt-pitch-val{
  font-size:11px !important;padding:3px 8px !important;min-width:62px !important;
  background:#05080c !important;color:var(--tt-accent) !important;
  text-shadow:0 0 6px rgba(var(--tt-accent-rgb),.6) !important;
  border:1px solid #1a2a30 !important;
}
.tt-pitch-track{
  width:52px !important;height:240px !important;padding:8px 0 !important;
  background:linear-gradient(180deg,#0a0a0c 0%,#020305 100%) !important;
  border:1px solid #1a1c22 !important;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.95),
    inset 0 0 14px rgba(var(--tt-accent-rgb),.05),
    0 1px 0 rgba(255,255,255,.05) !important;
}
.tt-pitch-track::before{
  /* vertical scale track (center line) */
  left:50% !important;top:10px !important;bottom:10px !important;width:2px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(255,255,255,.04) 55%,rgba(255,255,255,.16)) !important;
}
.tt-pitch-track::after{
  /* center ZERO LED glow */
  left:50% !important;top:50% !important;width:22px !important;height:2px !important;
  background:var(--tt-accent) !important;transform:translate(-50%,-50%) !important;
  box-shadow:0 0 10px rgba(var(--tt-accent-rgb),.85),0 0 2px rgba(255,255,255,.6) !important;
}
/* Scale ticks overlay (no extra DOM needed — use ::marker via wrap) */
.tt-pitch-track{position:relative}
.tt-pitch-track > .tt-pitch-ticks{
  position:absolute;inset:12px 6px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:1;
}
.tt-pitch-input{
  width:230px !important;height:36px !important;
  top:calc(50% - 18px) !important;left:calc(50% - 115px) !important;
}
.tt-pitch-input::-webkit-slider-thumb{
  width:42px !important;height:24px !important;border-radius:4px !important;
  background:
    linear-gradient(90deg,#fafafc 0%,#bebec3 16%,#6a6a70 52%,#2a2a30 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 1px,transparent 1px 3px) !important;
  background-blend-mode:overlay !important;
  border:1px solid #050507 !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.75),
    inset 0 -2px 4px rgba(0,0,0,.85),
    0 3px 5px rgba(0,0,0,.85),
    0 0 12px rgba(var(--tt-accent-rgb),.25) !important;
}

/* Bottom transport buttons — wider/more substantial */
.tt-bottom{gap:10px !important;margin-top:16px !important}
.tt-btn{
  padding:11px 8px !important;font-size:11px !important;letter-spacing:2px !important;
  background:linear-gradient(180deg,#24242a 0%,#0c0c10 100%) !important;
  border:1px solid #2c2c34 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 1px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.7) !important;
}

/* ---------- MIXER CORE — wider, with stepped VU meter ---------- */
.vx-mixer{
  padding:18px 14px 20px !important;gap:14px !important;min-height:560px !important;
  background:linear-gradient(180deg,#1e2028 0%,#0a0b0e 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.85),
    inset 0 0 0 3px #0c0e12,
    inset 0 0 50px rgba(0,0,0,.65),
    0 22px 46px rgba(0,0,0,.8) !important;
}
.vx-brand{font-size:11px !important;letter-spacing:3px !important;padding:7px 8px !important}
.vx-vu{
  gap:6px !important;padding:10px 10px 12px !important;border-radius:8px !important;
  background:linear-gradient(180deg,#030305 0%,#020204 100%) !important;
  border:1px solid #1a1c22 !important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.95) !important;
}
.vx-vu-col{
  width:14px !important;height:86px !important;
  background:
    repeating-linear-gradient(180deg,#1a1a1e 0 3px,#050506 3px 4px) !important;
}
.vx-vu-fill{
  background:linear-gradient(180deg,#ff2e2e 0%,#ff8a00 14%,#ffd400 30%,#a0ff30 50%,#00ff7a 70%,#008844 100%) !important;
  box-shadow:inset 0 0 4px rgba(255,255,255,.25) !important;
}
.vx-vu-fill::after{
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 3px,transparent 3px 4px) !important;
}

/* Channel strips — more substantial */
.vx-channels{gap:12px !important}
.vx-ch{padding:10px !important;gap:8px !important}
.vx-ch-head{padding:5px 0 !important;font-size:10px !important;letter-spacing:2.5px !important}
.vx-knob{width:36px !important;height:36px !important}
.vx-knob-lbl{font-size:8.5px !important;letter-spacing:1.4px !important}
.vx-fader-wrap{min-height:130px !important}
.vx-cue{padding:7px !important;font-size:10px !important;letter-spacing:2px !important}

/* Crossfader — larger */
.vx-xfader-wrap{padding:12px 10px !important}
.vx-xfader-head{font-size:10px !important;letter-spacing:2px !important;margin-bottom:6px !important}
.vx-xfader-track{height:28px !important}
.vx-xfader{height:26px !important}
.vx-xfader::-webkit-slider-thumb{width:30px !important;height:34px !important}

/* ================================================================
   HOT CUES — force all 8 pads visible in every deck view mode
   Fixes a regression where DJ-FOCUS/ALL-4 compact layouts clipped
   pads 3, 4, 7, 8 because cue-btn was refusing to shrink below its
   text width.
   ================================================================ */
.cdj .hot-cues,
body.dj-focus-mode .cdj .hot-cues,
.console.show-all .cdj .hot-cues{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-auto-rows:minmax(0,1fr);
  gap:4px !important;
}
.cdj .hot-cues .cue-btn,
body.dj-focus-mode .cdj .hot-cues .cue-btn,
.console.show-all .cdj .hot-cues .cue-btn{
  min-width:0 !important;width:100% !important;padding:0 !important;
  overflow:hidden;text-overflow:ellipsis;
}
/* DJ-FOCUS: keep the padding inside the hot-cues cell, but never force
   more than 4 columns, and never overflow the left cell */
body.dj-focus-mode .cdj .hot-cues{
  padding:8px !important;
}
body.dj-focus-mode .cdj .hot-cues .cue-btn{
  height:clamp(34px,4vw,56px) !important;
  font-size:clamp(11px,1.2vw,16px) !important;
}
/* Work-mode: 8 in a single row (already defined) still wins via its
   existing rule — keep it */

/* ================================================================
   MOBILE FINAL PASS — polish every tab for small screens (≤720px)
   and tablets (≤980px). Last in the cascade so it dominates.
   ================================================================ */

/* ---------- Tablet (≤980px) ---------- */
@media(max-width:980px){
  body{padding:6px 4px !important;gap:6px !important}
  .header-bar{padding:2px 6px;gap:6px}
  .brand{font-size:15px !important;letter-spacing:2px !important}
  .brand .max{font-size:9px !important;padding:1px 4px !important;margin-right:4px !important}
  .header-right{gap:6px !important;font-size:10px;flex-wrap:wrap}
  .master-bpm{padding:3px 8px !important;font-size:12px !important}
  .rec-btn{padding:5px 10px !important;font-size:9px !important;letter-spacing:1.5px !important}
  .auth-btn{padding:5px 10px !important;font-size:9px !important;letter-spacing:1.5px !important}
  .titan-clock{width:92px !important;height:28px !important;padding:4px 10px !important}
  .titan-clock .tc-time{font-size:13px !important;letter-spacing:1.5px !important}
  /* DECKS → 2-column layout on tablet */
  .console{grid-template-columns:1fr 1fr !important;grid-template-rows:auto auto auto !important;gap:8px !important}
  .console > .cdj{grid-column:auto !important}
  .console > .mixer{grid-column:1/-1 !important;order:3 !important}
  /* Library / forms */
  .library-actions{flex-wrap:wrap !important;gap:4px !important}
  .search-wrap{flex:1 1 100% !important}

  /* DECK FOCUS bar — let buttons wrap onto multiple rows on tablets */
  .deck-switch-bar.header-dsb{
    flex:1 1 100% !important;flex-wrap:wrap !important;
    justify-content:center !important;gap:5px !important;padding:5px 6px !important;
  }
  .deck-switch-bar.header-dsb .dsb-btn{
    padding:7px 10px !important;font-size:10px !important;
    letter-spacing:1.4px !important;min-height:34px !important;
  }
}

/* ---------- Phone (≤720px) ---------- */
@media(max-width:720px){
  html,body{font-size:14px !important}
  body{padding:4px 2px !important;gap:4px !important}

  /* Header — clock alongside brand, compact */
  .header-bar{padding:2px 4px !important;flex-wrap:wrap;gap:4px}
  .brand{font-size:13px !important;letter-spacing:1.4px !important;flex:1 1 100%;text-align:center}
  .header-right{justify-content:center !important;gap:5px !important;width:100%;flex-wrap:wrap}

  /* DECK FOCUS bar — grid layout with comfortable touch targets on phones */
  .deck-switch-bar.header-dsb{
    flex:1 1 100% !important;display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:4px !important;padding:6px 4px !important;
    justify-content:stretch !important;
  }
  .deck-switch-bar.header-dsb .dsb-label{
    grid-column:1 / -1 !important;text-align:center !important;
    margin:0 0 2px !important;width:auto !important;
  }
  .deck-switch-bar.header-dsb .dsb-btn{
    flex:none !important;padding:9px 4px !important;
    font-size:10px !important;letter-spacing:1px !important;
    min-height:40px !important;white-space:nowrap !important;
  }
  .deck-switch-bar.header-dsb .dsb-btn[data-pair="ALL"]{grid-column:span 4 !important}
  .deck-switch-bar.header-dsb .dsb-btn.dsb-dj-focus{
    grid-column:span 2 !important;font-size:9.5px !important;letter-spacing:.5px !important;
  }
  .deck-switch-bar.header-dsb .dsb-btn.dsb-work,
  .deck-switch-bar.header-dsb .dsb-btn.dsb-wmlib,
  .deck-switch-bar.header-dsb .dsb-btn.dsb-wmexit{grid-column:1 / -1 !important}
  .deck-switch-bar.header-dsb .dsb-monitor{
    grid-column:1 / -1 !important;flex-wrap:wrap !important;
    margin:2px 0 0 !important;justify-content:center !important;
  }
  .master-bpm{font-size:11px !important;padding:2px 6px !important}
  .rec-btn{padding:4px 8px !important;font-size:8.5px !important;letter-spacing:1px !important}
  .auth-btn{padding:4px 8px !important;font-size:8.5px !important;letter-spacing:1px !important;min-width:0 !important}
  .auth-chip{font-size:9px !important;padding:3px 6px !important}
  .titan-clock{width:82px !important;height:26px !important;padding:3px 8px !important}
  .titan-clock .tc-time{font-size:12px !important;letter-spacing:1.4px !important}

  /* Tabs — compact, still wrap */
  .main-tabs{padding:2px !important;gap:2px !important;row-gap:2px !important}
  .main-tabs .tab-btn{flex:1 1 28% !important;min-height:26px !important;font-size:8.5px !important;padding:5px 3px !important;letter-spacing:.6px !important}

  /* DECKS → 1 column (stack all decks + mixer) */
  .console{grid-template-columns:1fr !important;grid-template-rows:auto auto auto auto auto !important;gap:6px !important}
  .console > .cdj,.console > .mixer,.console > .compact-deck{grid-column:1 !important}
  .cdj{padding:6px !important;min-height:auto !important}
  .cdj .deck-header{flex-wrap:wrap;gap:4px}
  .deck-header .deck-lib-btn,.deck-header .deck-upload-btn{min-width:32px !important;padding:4px 6px !important}
  .deck-number{font-size:18px !important;padding:2px 7px !important}
  .screen{padding:5px !important;font-size:9px !important}
  .screen .track-title{font-size:10px !important}
  .screen .track-bpm,.screen .track-time{font-size:9px !important}
  /* Transport buttons */
  .big-btn{font-size:9px !important;letter-spacing:1.5px !important;padding:8px 4px !important}
  .big-btn .icon{font-size:12px !important}
  /* Loop/util buttons */
  .loop-btn,.util-btn,.jump-btn,.beat-btn{font-size:8.5px !important;padding:5px 4px !important;letter-spacing:.6px !important}
  /* Hot cues */
  .cue-btn{font-size:8px !important;padding:5px 2px !important}
  /* Tempo area */
  .tempo-big{font-size:14px !important}
  .tempo-row button{font-size:9px !important;padding:4px 6px !important}

  /* MIXER — horizontal scroll if needed, smaller channel strips */
  .mixer{padding:6px !important;overflow-x:auto !important}
  .channel{padding:4px !important;min-width:56px !important}
  .channel .fader-wrap,.channel .vu-meter{height:90px !important}
  .channel .knob.small{width:28px !important;height:28px !important}
  .channel .knob-label{font-size:7.5px !important}
  .master-section,.color-fx-row,.color-fx-grid{padding:4px !important}

  /* AUTO MIX toolbar → single column stack */
  .mixer-toolbar{grid-template-columns:1fr !important;padding:6px !important;gap:5px !important}
  .mixer-toolbar .mtb-section{padding:6px 8px !important;min-height:auto !important}
  .mixer-toolbar .mtb-label{font-size:9px !important}
  .mixer-toolbar .mtb-automix .automix-grid{grid-template-columns:repeat(3,1fr) !important;gap:3px !important}
  .mixer-toolbar .mtb-hp .cue-hp-buttons{grid-template-columns:repeat(4,1fr) !important;gap:2px !important}
  .mixer-toolbar .mtb-hp .cue-hp-btn{padding:4px 2px !important;font-size:8.5px !important;letter-spacing:.5px !important}

  /* BEAT FX / SCENE FX panels */
  .beat-fx-panel,.scene-fx-panel{grid-template-columns:1fr 1fr !important;padding:6px !important;gap:5px !important}
  .beat-fx-label,.scene-fx-label{grid-column:1/-1 !important;text-align:center !important;font-size:10px !important;letter-spacing:1.5px !important}
  .fx-onoff{padding:8px 10px !important;font-size:10px !important;letter-spacing:1.5px !important}
  .fx-selector{min-width:60px !important;padding:4px 6px !important;font-size:10px !important}
  .beat-buttons{grid-column:1/-1}
  .beat-btn{padding:5px 2px !important;font-size:9px !important}

  /* VINYL tab → 1 column (already done, just tighten) */
  .vinyl-stage{padding:10px 6px 14px !important;gap:10px !important;grid-template-columns:1fr !important}
  .turntable{padding:12px 10px 14px !important;min-height:auto !important}
  .tt-deck{padding:10px !important;gap:10px !important;grid-template-columns:auto 1fr auto !important}
  .tt-topbar{padding:5px 8px !important;margin-bottom:8px !important}
  .tt-brand{font-size:9px !important;letter-spacing:1.5px !important}
  .tt-screen{padding:3px 6px !important}
  .tt-screen .tt-scr-title{font-size:9px !important}
  .tt-screen .tt-scr-bpm{font-size:10px !important}
  .tt-load-btn{padding:2px 6px !important;min-width:22px !important;height:20px !important;font-size:11px !important}
  .tt-platter-wrap{max-width:260px !important}
  .tt-platter{width:min(240px,100%) !important}
  .tt-startstop{width:44px !important;height:44px !important}
  .tt-startstop-label{font-size:7px !important;letter-spacing:1.2px !important}
  .tt-rpm-btn{padding:3px 6px !important;font-size:9px !important;min-width:36px !important}
  .tt-rightctl{min-width:56px !important}
  .tt-pitch-track{width:42px !important;height:180px !important}
  .tt-pitch-input{width:170px !important}
  .tt-pitch-label{font-size:9px !important}
  .tt-pitch-val{font-size:9px !important;padding:2px 4px !important;min-width:50px !important}
  .tt-bottom .tt-btn{padding:7px 4px !important;font-size:9px !important;letter-spacing:1.2px !important}
  .vx-mixer{padding:10px 8px !important;min-height:auto !important}
  .vx-mixer .vx-vu-col{height:60px !important}
  .vx-knob{width:28px !important;height:28px !important}
  .vx-fader-wrap{min-height:90px !important}

  /* SAMPLER — 4-column grid of pads on phones */
  .sampler-panel{padding:8px !important}
  .sampler-grid{grid-template-columns:repeat(4,1fr) !important;gap:4px !important}
  .sample-pad .pad-num{font-size:16px !important}
  .sample-pad .pad-name{font-size:7.5px !important;letter-spacing:.5px !important}
  .bank-btn{padding:5px 10px !important;font-size:10px !important;min-width:32px !important}

  /* LIBRARY / MUSIC / PLAYLISTS / DISCOVER */
  .library,.youtube-panel,.playlists-panel,.sessions-panel,.ai-dj-panel,
  .analytics-panel,.midi-panel,.sampler-panel,.editor-panel,.sp-panel,
  .settings-panel,.support-panel{padding:8px !important;border-radius:8px !important}
  .library-header{flex-direction:column !important;align-items:stretch !important;gap:6px !important;padding-bottom:6px !important}
  .library-title{font-size:12px !important;letter-spacing:1.2px !important;text-align:center}
  .library-actions{flex-wrap:wrap !important;justify-content:center !important;gap:3px !important}
  .library-actions > *{font-size:9px !important;padding:5px 8px !important;letter-spacing:.8px !important}
  .search-wrap{flex:1 1 100% !important;flex-wrap:wrap;gap:3px}
  .search-input{flex:1 1 100% !important;font-size:11px !important;padding:6px 8px !important}
  .sort-select,.filter-select{flex:1 1 48% !important;font-size:10px !important}
  .track-list-header{font-size:9px !important;padding:4px !important}
  .track-list-header .th-artist,.track-list-header .th-key{display:none !important}
  .track-row{font-size:10px !important;padding:5px !important;gap:4px !important}
  .track-row .track-artist,.track-row .track-key{display:none !important}
  .url-input,.yt-input{font-size:11px !important;padding:6px 8px !important}

  /* DISCOVER */
  .discover-wrap{padding:8px !important}
  .disc-topbar{flex-direction:column !important;align-items:stretch !important;gap:6px !important}
  .disc-sources{width:100%;justify-content:center}
  .disc-src-btn{padding:5px 10px !important;font-size:9px !important}
  .disc-genre-btn{padding:5px 8px !important;font-size:8.5px !important;letter-spacing:.8px !important}
  .disc-results{grid-template-columns:1fr !important;max-height:60vh !important}
  .disc-row{grid-template-columns:38px 1fr auto auto !important;padding:5px 6px !important;gap:6px !important}
  .disc-art{width:38px !important;height:38px !important}
  .disc-title-txt{font-size:10px !important}
  .disc-artist-txt{font-size:9px !important}
  .disc-preview,.disc-add{padding:5px 7px !important;font-size:8.5px !important;min-width:32px !important}

  /* SETTINGS */
  .settings-section{padding:8px !important;margin-bottom:6px !important}
  .settings-section h3{font-size:11px !important;letter-spacing:1.5px !important}
  .settings-row{flex-direction:column !important;align-items:stretch !important;gap:6px !important;padding:5px 0 !important}
  .settings-row > div:first-child{flex:1 1 auto}
  .setting-label{font-size:11px !important}
  .setting-desc{font-size:9.5px !important}
  .toggle-switch{align-self:flex-start}
  input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=search],select,textarea{font-size:12px !important;padding:6px 8px !important}

  /* SUPPORT form */
  .sup-grid{grid-template-columns:1fr !important;gap:10px !important}
  .sup-mode-row{gap:3px}
  .sup-mode-btn{padding:6px 8px !important;font-size:9px !important;letter-spacing:.8px !important}
  .sup-row-2{grid-template-columns:1fr !important}
  .sup-label{font-size:9px !important}
  .sup-form{padding:10px !important}
  .sup-form .url-input,.sup-form textarea{font-size:11px !important;padding:8px !important}
  .sup-actions{flex-direction:column !important;align-items:stretch !important;gap:6px !important}
  .sup-send,.sup-copy,.sup-mailto{width:100%;padding:10px !important;font-size:10px !important}
  .sup-tiers{grid-template-columns:1fr !important}
  .sup-card{padding:10px !important}

  /* TITAN LAB / STUDIO PRO */
  .coming-soon-card{padding:14px !important}
  .cs-body h3{font-size:14px !important;letter-spacing:1.5px !important}
  .cs-body p{font-size:11px !important;line-height:1.6 !important}
  .cs-progress-row{grid-template-columns:1fr !important;gap:4px !important}
  .cs-progress-row span:first-child{font-size:10px}
  .cs-bar{height:6px}
  .sp-panel{padding:8px !important}
  .sp-block{padding:8px !important}
  .sp-row{flex-wrap:wrap !important;gap:4px !important}
  .sp-preset-row{flex-wrap:wrap !important}
  .sp-preset-btn{padding:6px 10px !important;font-size:9px !important}
  .sp-mini-btn{font-size:9px !important;padding:5px 8px !important}
  .sp-knob{width:30px !important;height:30px !important}
  .sp-knob-label,.sp-knob-val{font-size:8.5px !important}
  .sp-seq-grid{grid-template-columns:60px repeat(8,1fr) !important;overflow-x:auto !important}

  /* EDITOR */
  .editor-panel{padding:8px !important}
  .editor-waveform-wrap{height:120px !important}
  .editor-grid{grid-template-columns:1fr !important;gap:6px !important}
  .editor-block{padding:8px !important}
  .editor-row{flex-direction:column !important;align-items:stretch !important;gap:4px !important}

  /* AI DJ / ANALYTICS / MIDI / SESSIONS — generic panels */
  .ai-config-item,.stat-card{padding:8px !important}
  .stat-card h5{font-size:10px !important}
  .stat-value{font-size:16px !important}

  /* Any fixed-size knob-row things */
  .knob{width:36px;height:36px}
  .knob-label{font-size:8px}
}

/* ---------- Very small phones (≤400px) ---------- */
@media(max-width:400px){
  .brand{font-size:11px !important}
  .main-tabs .tab-btn{flex:1 1 32% !important;font-size:8px !important;padding:4px 2px !important}
  .sampler-grid{grid-template-columns:repeat(3,1fr) !important}
  .tt-platter-wrap{max-width:220px !important}
  .tt-platter{width:min(200px,100%) !important}
}

/* ================================================================
   DECK PAD AREA — clean, balanced, premium look
   (PAD MODES + HOT CUES — the area the user flagged)
   Scoped to .cdj only. Keeps vinyl / mixer untouched.
   ================================================================ */
.cdj .pad-modes{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:5px !important;
  margin:6px 0 8px !important;
  padding:6px !important;border-radius:8px !important;
  background:linear-gradient(180deg,#0a0a0c 0%,#050507 100%);
  border:1px solid #22222a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 12px rgba(0,0,0,.6);
}
.cdj .pad-mode-btn{
  padding:8px 6px !important;min-height:30px !important;
  font-size:9.5px !important;letter-spacing:1.4px !important;font-weight:800 !important;
  background:linear-gradient(180deg,#2a2a32 0%,#141418 100%) !important;
  border:1px solid #2e2e36 !important;color:#b0b0b6 !important;
  border-radius:5px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 1px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.6) !important;
  transition:all .12s;cursor:pointer;
}
.cdj .pad-mode-btn:hover{
  color:#fff !important;border-color:rgba(255,255,255,.22) !important;
  background:linear-gradient(180deg,#363640 0%,#1c1c22 100%) !important;
}
.cdj .pad-mode-btn.active{
  color:#0a0a0c !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 12px currentColor !important;
  text-shadow:0 1px 1px rgba(0,0,0,.25) !important;
  border-color:currentColor !important;
}
.cdj .pad-mode-btn[data-pad-mode="cue"].active{background:linear-gradient(180deg,#5af0ff 0%,#00a0c0 100%) !important;color:#071420 !important}
.cdj .pad-mode-btn[data-pad-mode="roll"].active{background:linear-gradient(180deg,#ff5a90 0%,#b02060 100%) !important;color:#fff !important}
.cdj .pad-mode-btn[data-pad-mode="slicer"].active{background:linear-gradient(180deg,#ffe046 0%,#c49a00 100%) !important;color:#201800 !important}
.cdj .pad-mode-btn[data-pad-mode="sampler"].active{background:linear-gradient(180deg,#5affa0 0%,#009440 100%) !important;color:#06140a !important}
.cdj .pad-mode-btn[data-pad-mode="loop"].active{background:linear-gradient(180deg,#d85aff 0%,#7820b0 100%) !important;color:#fff !important}
.cdj .pad-mode-btn[data-pad-mode="pitch"].active{background:linear-gradient(180deg,#ffa84a 0%,#c85a00 100%) !important;color:#1a0a00 !important}

/* HOT CUES grid — 4×2 with taller cells, cleaner body */
.cdj .hot-cues{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:6px !important;
  padding:6px !important;margin:0 0 8px !important;border-radius:8px !important;
  background:linear-gradient(180deg,#0a0a0c 0%,#050507 100%);
  border:1px solid #22222a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 12px rgba(0,0,0,.6);
}
.cdj .cue-btn{
  aspect-ratio:1.4/1 !important;
  border:1px solid #2a2a32 !important;border-radius:6px !important;
  background:
    radial-gradient(ellipse at 50% 120%,rgba(var(--cue-color-rgb,255,122,0),.18) 0%,transparent 65%),
    linear-gradient(180deg,#35353d 0%,#1c1c22 50%,#0c0c10 100%) !important;
  color:#e0e3e8 !important;
  font-family:'Orbitron',sans-serif !important;font-weight:900 !important;font-size:15px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 4px rgba(0,0,0,.7),
    0 2px 4px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35) !important;
  cursor:pointer;transition:transform .08s,box-shadow .1s,filter .12s;
  position:relative;overflow:hidden;
}
.cdj .cue-btn::before{
  content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:32%;height:3px;border-radius:2px;
  background:var(--cue-color,#ff7a00);
  box-shadow:0 0 6px var(--cue-color,#ff7a00);
  opacity:.35;transition:opacity .12s;
}
.cdj .cue-btn:hover{filter:brightness(1.15);transform:translateY(-1px)}
.cdj .cue-btn:hover::before{opacity:.85}
.cdj .cue-btn.active,.cdj .cue-btn.armed{
  background:
    radial-gradient(ellipse at 50% 120%,rgba(var(--cue-color-rgb,255,122,0),.55) 0%,transparent 70%),
    linear-gradient(180deg,var(--cue-color,#ff7a00) 0%,color-mix(in srgb,var(--cue-color,#ff7a00) 60%,#000) 100%) !important;
  color:#0a0a0a !important;
  text-shadow:0 1px 1px rgba(255,255,255,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 4px rgba(0,0,0,.35),
    0 0 14px rgba(var(--cue-color-rgb,255,122,0),.6),
    0 2px 4px rgba(0,0,0,.55) !important;
}
.cdj .cue-btn.active::before,.cdj .cue-btn.armed::before{opacity:1}
.cdj .cue-btn:active{transform:translateY(1px)}

/* Pad-color RGBs so the glow has alpha */
.cdj .cue-btn[data-color="1"]{--cue-color-rgb:0,229,255}
.cdj .cue-btn[data-color="2"]{--cue-color-rgb:255,60,120}
.cdj .cue-btn[data-color="3"]{--cue-color-rgb:255,212,0}
.cdj .cue-btn[data-color="4"]{--cue-color-rgb:0,255,122}
.cdj .cue-btn[data-color="5"]{--cue-color-rgb:255,122,0}
.cdj .cue-btn[data-color="6"]{--cue-color-rgb:200,0,255}
.cdj .cue-btn[data-color="7"]{--cue-color-rgb:0,255,212}
.cdj .cue-btn[data-color="8"]{--cue-color-rgb:255,90,0}

/* Compact layouts (all-4 / work mode) — keep the polish but tighter */
.console.show-all .cdj .pad-modes{padding:4px !important;gap:3px !important}
.console.show-all .cdj .pad-mode-btn{padding:5px 3px !important;font-size:8.5px !important;letter-spacing:1px !important;min-height:24px !important}
.console.show-all .cdj .hot-cues{padding:4px !important;gap:4px !important}
.console.show-all .cdj .cue-btn{font-size:13px !important;aspect-ratio:1.5/1 !important}

/* Light-theme adjustments */
body.theme-light .cdj .pad-modes,
body.theme-light .cdj .hot-cues{
  background:linear-gradient(180deg,#f0ebde,#e4ddcd) !important;
  border:1px solid #c4bdab !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 8px rgba(80,60,30,.08) !important;
}
body.theme-light .cdj .pad-mode-btn{
  background:linear-gradient(180deg,#ffffff,#ebe4d4) !important;
  border:1px solid #c4bdab !important;color:#3a342a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(80,60,30,.08) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.6) !important;
}
body.theme-light .cdj .cue-btn{
  background:linear-gradient(180deg,#ffffff,#e0d8c5) !important;
  color:#3a342a !important;border:1px solid #c4bdab !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -2px 4px rgba(0,0,0,.06),0 2px 4px rgba(80,60,30,.1) !important;
}

/* ================================================================
   VINYL PITCH FADER v2 — custom div slider (no rotation hack,
   no native range). Identical behaviour every browser + touch.
   ================================================================ */
.tt-pitch-track.ttpv2{
  position:relative !important;
  width:56px !important;height:240px !important;padding:10px 0 !important;
  background:linear-gradient(180deg,#0a0a0c 0%,#020305 100%) !important;
  border:1px solid #1a1c22 !important;border-radius:6px !important;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.95),
    inset 0 0 14px rgba(var(--tt-accent-rgb),.05),
    0 1px 0 rgba(255,255,255,.05) !important;
  touch-action:none;user-select:none;-webkit-user-select:none;
  display:block !important;flex:0 0 auto !important;cursor:pointer;
}
.tt-pitch-track.ttpv2::before,.tt-pitch-track.ttpv2::after{display:none !important;content:none !important}
.ttpv2-scale{
  position:absolute;left:4px;right:6px;top:10px;bottom:10px;
  display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:1;
}
.ttpv2-scale i{display:block;position:relative;height:1px;background:rgba(255,255,255,.25)}
.ttpv2-scale i.major{background:rgba(255,255,255,.6);box-shadow:0 0 3px rgba(var(--tt-accent-rgb),.35)}
.ttpv2-scale i em{
  position:absolute;left:-2px;top:-6px;transform:translateX(-100%);
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.5px;
  color:var(--tt-accent);text-shadow:0 0 4px rgba(var(--tt-accent-rgb),.55);font-style:normal;
}
.ttpv2-rail{
  position:absolute;left:50%;top:12px;bottom:12px;width:3px;
  transform:translateX(-50%);pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 45%,rgba(255,255,255,.04) 55%,rgba(255,255,255,.2));
  border-radius:2px;box-shadow:inset 0 0 2px rgba(0,0,0,.8);
}
.ttpv2-zero{
  position:absolute;left:50%;top:50%;width:26px;height:2px;
  transform:translate(-50%,-50%);pointer-events:none;z-index:2;
  background:var(--tt-accent);
  box-shadow:0 0 10px rgba(var(--tt-accent-rgb),.95),0 0 2px rgba(255,255,255,.6);
}
.ttpv2-thumb{
  position:absolute;left:50%;top:50%;
  width:44px;height:22px;border-radius:5px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(180deg,#fafafc 0%,#bebec3 18%,#6a6a70 55%,#2a2a30 100%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 1px,transparent 1px 3px);
  background-blend-mode:overlay;
  border:1px solid #050507;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.8),
    inset 0 -2px 4px rgba(0,0,0,.85),
    0 3px 6px rgba(0,0,0,.9),
    0 0 12px rgba(var(--tt-accent-rgb),.35);
  cursor:grab;z-index:3;transition:box-shadow .12s,filter .12s;
}
.ttpv2-thumb::before{
  content:'';position:absolute;left:10%;right:10%;top:50%;height:1.5px;
  transform:translateY(-50%);border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--tt-accent) 45%,var(--tt-accent) 55%,transparent);
  box-shadow:0 0 6px rgba(var(--tt-accent-rgb),.65);opacity:.9;
}
.ttpv2-thumb:hover{filter:brightness(1.08);box-shadow:inset 0 2px 2px rgba(255,255,255,.85),inset 0 -2px 4px rgba(0,0,0,.85),0 3px 8px rgba(0,0,0,.95),0 0 16px rgba(var(--tt-accent-rgb),.5)}
.ttpv2-thumb.dragging{cursor:grabbing;filter:brightness(1.15);box-shadow:inset 0 2px 2px rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,0,0,.85),0 3px 10px rgba(0,0,0,1),0 0 22px rgba(var(--tt-accent-rgb),.75)}
.ttpv2-thumb:focus-visible{outline:none;box-shadow:inset 0 2px 2px rgba(255,255,255,.85),inset 0 -2px 4px rgba(0,0,0,.85),0 0 0 2px rgba(var(--tt-accent-rgb),.9),0 0 20px rgba(var(--tt-accent-rgb),.6)}
@media(max-width:720px){
  .tt-pitch-track.ttpv2{width:44px !important;height:180px !important;padding:8px 0 !important}
  .ttpv2-thumb{width:34px;height:18px}
  .ttpv2-scale i em{font-size:7px}
}

/* Consistent widths for pad-modes + hot-cues across all 4 decks */
.cdj .pad-modes,.cdj .hot-cues{width:100% !important;box-sizing:border-box !important}
.cdj .pad-mode-btn,.cdj .cue-btn{min-width:0 !important;box-sizing:border-box !important}

/* ═══════════════════════════════════════════════════════════════════
   TITAN GOLD — Vestax PMC-style brushed-brass panel look
   Decks + mixer chassis become brushed gold metal with dark text,
   black knobs with white indicator, and subtle corner screws.
   Matches the reference photo the user supplied.
   ═══════════════════════════════════════════════════════════════════ */
body.theme-gold{
  /* Brushed-brass backdrop for the whole page */
  background:
    radial-gradient(ellipse at 50% 50%, #3a2a10 0%, #1a0e04 70%) !important;
}
/* Deck chassis — brushed brass with faint vertical grain */
body.theme-gold .cdj,
body.theme-gold .mixer{
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.03) 0 1px,
      transparent 1px 2px,
      rgba(255,255,255,.02) 2px 3px,
      transparent 3px 4px) ,
    linear-gradient(180deg,#e6c878 0%,#d4b456 35%,#b8983e 75%,#8e6e22 100%) !important;
  border:1px solid #6a4a0e !important;
  box-shadow:
    inset 0 1px 0 rgba(255,245,200,.6),
    inset 0 -2px 8px rgba(60,40,8,.55),
    inset 0 0 0 2px #2a1a08,
    inset 0 0 0 3px #8a6a2e,
    0 12px 28px rgba(0,0,0,.7) !important;
  position:relative;
}
/* Four brass screws in the corners */
body.theme-gold .cdj::before,
body.theme-gold .cdj::after,
body.theme-gold .mixer::before,
body.theme-gold .mixer::after{
  content:'';position:absolute;width:10px;height:10px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#f0d890 0%,#a07830 55%,#2a1408 100%) !important;
  box-shadow:
    inset 0 0 0 1px #1a0a00,
    0 1px 1px rgba(0,0,0,.6) !important;
  z-index:4;pointer-events:none;
}
body.theme-gold .cdj::before{top:8px;left:10px !important;background:radial-gradient(circle at 35% 30%,#f0d890 0%,#a07830 55%,#2a1408 100%) !important;height:10px;width:10px;border-radius:50%;opacity:1;}
body.theme-gold .cdj::after{top:8px;right:10px;bottom:auto;left:auto;height:10px;width:10px;}
body.theme-gold .mixer::before{top:8px;left:10px;height:10px;width:10px;background:radial-gradient(circle at 35% 30%,#f0d890 0%,#a07830 55%,#2a1408 100%) !important;opacity:1;}
body.theme-gold .mixer::after{top:8px;right:10px;bottom:auto;left:auto;height:10px;width:10px;display:block !important}

/* Text over brass should be dark (matches the Vestax reference). */
body.theme-gold .deck-label,
body.theme-gold .deck-number,
body.theme-gold .time-label,
body.theme-gold .tempo-header,
body.theme-gold .knob-label,
body.theme-gold .channel-label,
body.theme-gold .crossfader-label,
body.theme-gold .mixer-brand,
body.theme-gold .loop-btn,
body.theme-gold .jump-btn,
body.theme-gold .util-btn,
body.theme-gold .pad-mode-btn{
  color:#1a0a00 !important;
  text-shadow:0 1px 0 rgba(255,240,200,.25) !important;
}
body.theme-gold .deck-number{
  background:transparent !important;
  -webkit-text-fill-color:#1a0a00 !important;
  border:1px solid rgba(26,10,0,.3) !important;
  box-shadow:inset 0 1px 0 rgba(255,245,200,.5) !important;
}
/* Knobs = black plastic with white indicator line (the Vestax look) */
body.theme-gold .knob{
  background:
    radial-gradient(circle at 35% 30%,#3a3a3a 0%,#1a1a1a 45%,#050505 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 4px rgba(0,0,0,.8),
    0 3px 6px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,0,0,.7),
    0 0 0 2px rgba(255,220,150,.25) !important;
}
body.theme-gold .knob-indicator{
  background:linear-gradient(180deg,#fff,#d0d0d0) !important;
  box-shadow:0 0 2px rgba(255,255,255,.6) !important;
}
/* Faders — gold chassis, dark silver handle with black accent line */
body.theme-gold .fader-wrap,
body.theme-gold .crossfader-track{
  background:linear-gradient(180deg,#1a1208,#050302) !important;
  border:1px solid #3a2810 !important;
  box-shadow:inset 0 0 8px rgba(0,0,0,.95) !important;
}
body.theme-gold .fader-handle,
body.theme-gold .crossfader-handle{
  background:linear-gradient(180deg,#e0e0e0 0%,#a0a0a0 40%,#606060 70%,#2a2a2a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 3px 6px rgba(0,0,0,.8) !important;
}
body.theme-gold .fader-handle::before,
body.theme-gold .crossfader-handle::before{
  background:#0a0a0a !important;box-shadow:none !important;
}
/* Small action buttons — dark pills on gold */
body.theme-gold .loop-btn,
body.theme-gold .jump-btn,
body.theme-gold .util-btn,
body.theme-gold .pad-mode-btn,
body.theme-gold .tempo-btn{
  background:linear-gradient(180deg,#2a2010,#0a0806) !important;
  border:1px solid #4a3818 !important;
  color:#f3e3b0 !important;
  text-shadow:none !important;
  box-shadow:inset 0 1px 0 rgba(255,240,200,.1),0 1px 2px rgba(0,0,0,.6) !important;
}
/* Hot cue pads — ivory with subtle shadow, the Vestax rubber-pad look */
body.theme-gold .cue-btn{
  background:linear-gradient(180deg,#f0e0a0,#c8a656) !important;
  border:1px solid #6a4a0e !important;
  color:#1a0a00 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,250,220,.6),
    inset 0 -2px 3px rgba(90,60,15,.3),
    0 2px 3px rgba(0,0,0,.5) !important;
}
body.theme-gold .cue-btn.active{
  background:linear-gradient(180deg,#fff0a8,#e8c463) !important;
  color:#1a0a00 !important;
  box-shadow:
    0 0 12px rgba(255,220,150,.7),
    inset 0 1px 0 rgba(255,255,240,.8) !important;
}
/* Big transport buttons — keep dark but rim with gold */
body.theme-gold .big-btn{
  background:linear-gradient(180deg,#2a2010,#0a0806) !important;
  border:1px solid #8a6a2e !important;
  color:#f3e3b0 !important;
}
body.theme-gold .big-btn.play.active{
  background:linear-gradient(180deg,#e8c463,#8a6a2e) !important;
  color:#0a0806 !important;
  box-shadow:0 0 20px rgba(232,196,99,.6),inset 0 1px 0 rgba(255,250,220,.4) !important;
}
body.theme-gold .big-btn.cue.active{
  background:linear-gradient(180deg,#ffcf40,#a87a18) !important;
  color:#0a0806 !important;
  box-shadow:0 0 18px rgba(255,207,64,.7),inset 0 1px 0 rgba(255,250,220,.4) !important;
}
/* Jog wheel sits in gold — outer ring becomes brass */
body.theme-gold .jog-outer{
  background:
    radial-gradient(circle at 30% 30%,#f0d890 0%,#b8983e 45%,#6a4a0e 100%) !important;
  box-shadow:
    inset 0 2px 6px rgba(255,245,200,.4),
    inset 0 -4px 10px rgba(30,18,4,.7),
    0 0 0 2px #2a1a08,
    0 0 0 4px #8a6a2e,
    0 8px 18px rgba(0,0,0,.7) !important;
}
body.theme-gold .jog-platter{
  background:
    radial-gradient(circle at 35% 35%,#2a2a2e 0%,#0a0a0b 70%,#000 100%) !important;
}
/* BPM dial stays dark so the orange needle pops */
body.theme-gold .jog-center-screen{
  background:
    radial-gradient(circle at 50% 35%, rgba(255,245,200,.08), transparent 60%),
    linear-gradient(180deg,#141008 0%,#050302 100%) !important;
  border:1px solid #8a6a2e !important;
  box-shadow:
    inset 0 0 0 3px #050302,
    0 0 0 1px #6a4a0e,
    0 2px 6px rgba(0,0,0,.8) !important;
}
body.theme-gold .jog-center-screen .bpm-display{
  color:#f5d76e !important;text-shadow:0 0 6px rgba(245,215,110,.7) !important;
}
/* Screens (display panels) — keep dark LCD feel against gold chassis */
body.theme-gold .screen{
  background:linear-gradient(180deg,#0e0a04 0%,#050302 100%) !important;
  border:1px solid #3a2810 !important;
  box-shadow:
    inset 0 0 0 2px #1a0e04,
    inset 0 0 16px rgba(255,220,120,.05),
    0 0 0 1px rgba(255,220,150,.15) !important;
}
body.theme-gold .track-title{color:#f5e3a8 !important;text-shadow:0 0 6px rgba(245,215,110,.4) !important}
body.theme-gold .screen-bpm{color:#f5d76e !important}
body.theme-gold .time-value{color:#f5e3a8 !important}
body.theme-gold .waveform{background:#050302 !important;border:1px solid #3a2810 !important}

/* ═══ TITAN GOLD · top bar + tabs + toolbar readability pass ═══ */
/* Header top-row — time, BPM badge, REC, SIGN IN — all on the gold body */
body.theme-gold .header-bar{color:#1a0a00}
body.theme-gold .header-right{color:#1a0a00 !important}
body.theme-gold .master-bpm{
  background:linear-gradient(180deg,#0a0503,#000) !important;
  border:1px solid #3a2810 !important;color:#ffcf40 !important;
  box-shadow:inset 0 0 10px rgba(255,207,64,.12) !important;
}
body.theme-gold .titan-clock{
  background:linear-gradient(180deg,#0a0503,#000) !important;
  border:1px solid #3a2810 !important;color:#ffcf40 !important;
}
body.theme-gold .titan-clock .tc-time{color:#ffcf40 !important}
body.theme-gold .rec-btn{
  background:linear-gradient(180deg,#3a1010,#1a0606) !important;
  border:1px solid #8a2020 !important;color:#ff9898 !important;
}
body.theme-gold .brand{color:#1a0a00 !important}
body.theme-gold .brand span{color:#8a5a18 !important}
body.theme-gold .brand .max{
  background:#1a0a00 !important;color:#ffcf40 !important;
}

/* ─── MAIN TABS row — readable on gold chassis ─── */
body.theme-gold .main-tabs{
  background:linear-gradient(180deg,#3a2a10,#1a1208) !important;
  border:1px solid #6a4a0e !important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,200,.2),
    inset 0 -1px 0 rgba(0,0,0,.5) !important;
}
body.theme-gold .tab-btn{
  color:#d8b860 !important;
  font-weight:800 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.6) !important;
}
body.theme-gold .tab-btn:hover{
  color:#ffe8a0 !important;
  background:rgba(255,220,150,.08) !important;
}
body.theme-gold .tab-btn.active{
  background:linear-gradient(180deg,#f0d890,#b8983e) !important;
  color:#1a0a00 !important;
  text-shadow:0 1px 0 rgba(255,250,200,.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,250,200,.5),
    inset 0 -1px 0 rgba(90,60,15,.4),
    0 2px 6px rgba(0,0,0,.4) !important;
}
body.theme-gold .learn-tab-btn{
  background:linear-gradient(180deg,rgba(120,200,150,.2),rgba(30,60,40,.4)) !important;
  color:#a0f0b8 !important;
  border:1px solid rgba(160,240,180,.4) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.5) !important;
}

/* ─── MIXER TOOLBAR — AUTO MIX / HEADPHONES / MIC / ISOLATOR sections ─── */
body.theme-gold .mixer-toolbar{
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.03) 0 1px,transparent 1px 2px,
      rgba(255,255,255,.02) 2px 3px,transparent 3px 4px) ,
    linear-gradient(180deg,#e6c878 0%,#b8983e 100%) !important;
  border:1px solid #6a4a0e !important;
  box-shadow:
    inset 0 1px 0 rgba(255,245,200,.5),
    inset 0 -2px 8px rgba(60,40,8,.5),
    inset 0 0 0 2px #2a1a08,
    0 8px 20px rgba(0,0,0,.55) !important;
}
body.theme-gold .mixer-toolbar .mtb-section{
  background:linear-gradient(180deg,#0a0503,#020100) !important;
  border:1px solid #3a2810 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,200,.06),
    inset 0 0 20px rgba(0,0,0,.7) !important;
}
body.theme-gold .mixer-toolbar .mtb-label{
  color:#ffcf40 !important;
  text-shadow:0 0 4px rgba(255,200,80,.4),0 1px 0 #000 !important;
}
body.theme-gold .mixer-toolbar .mtb-dir{color:#f5d76e !important}
body.theme-gold .mixer-toolbar .mtb-knobrow{
  background:rgba(255,220,150,.02) !important;
  border:1px solid rgba(255,220,150,.08) !important;
}
body.theme-gold .mixer-toolbar .mtb-section .knob-label{
  color:#f3e3b0 !important;font-weight:700 !important;
}
body.theme-gold .automix-btn,
body.theme-gold .automix-bars,
body.theme-gold .automix-sync,
body.theme-gold .cue-hp-btn,
body.theme-gold .mic-btn{
  background:linear-gradient(180deg,#1a1208,#050302) !important;
  border:1px solid #6a4a0e !important;
  color:#ffcf40 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.6) !important;
}
body.theme-gold .automix-btn.active,
body.theme-gold .cue-hp-btn.active,
body.theme-gold .mic-btn.active{
  background:linear-gradient(180deg,#f0d890,#b8983e) !important;
  color:#1a0a00 !important;
  box-shadow:0 0 12px rgba(255,220,150,.55),inset 0 1px 0 rgba(255,250,200,.5) !important;
}

/* ─── MASTER + COLOR FX section inside the mixer ─── */
body.theme-gold .master-section,
body.theme-gold .color-fx-row,
body.theme-gold .color-fx-grid,
body.theme-gold .headphone-section,
body.theme-gold .mic-section,
body.theme-gold .crossfader-section{
  background:linear-gradient(180deg,#0a0503,#020100) !important;
  border:1px solid #3a2810 !important;
  box-shadow:inset 0 1px 0 rgba(255,240,200,.06),inset 0 0 16px rgba(0,0,0,.7) !important;
}
body.theme-gold .master-knob-wrap .knob-label,
body.theme-gold .color-fx-channel .knob-label,
body.theme-gold .channel-label,
body.theme-gold .crossfader-label,
body.theme-gold .crossfader-ab{
  color:#ffcf40 !important;
  text-shadow:0 1px 0 #000 !important;
  font-weight:800 !important;
}
/* COLOR FX buttons (FILTER / DUB ECHO / NOISE / PITCH / SPACE / CRUSH) */
body.theme-gold .color-fx-select{
  background:linear-gradient(180deg,#1a1208,#050302) !important;
  border:1px solid #6a4a0e !important;
  color:#ffcf40 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.6) !important;
}
body.theme-gold .color-fx-select:hover{
  background:linear-gradient(180deg,#2a1e0c,#0a0604) !important;
  color:#fff0a8 !important;
  border-color:#8a6a2e !important;
}
body.theme-gold .color-fx-select.active{
  background:linear-gradient(180deg,#f0d890,#b8983e) !important;
  color:#1a0a00 !important;
  border-color:#fff0a8 !important;
  box-shadow:0 0 14px rgba(255,220,150,.6),inset 0 1px 0 rgba(255,250,200,.5) !important;
}
/* Channel strip xfader-assign + curve-switch */
body.theme-gold .xfader-assign .assign-btn,
body.theme-gold .curve-btn{
  background:#0a0503 !important;border:1px solid #3a2810 !important;
  color:#d8b860 !important;
}
body.theme-gold .xfader-assign .assign-btn.active,
body.theme-gold .curve-btn.active{
  background:linear-gradient(180deg,#f0d890,#b8983e) !important;
  color:#1a0a00 !important;
}

/* ─── DECK controls that were still muted ─── */
/* Channel faders inside the gold mixer need the same gold surround */
body.theme-gold .channel{background:transparent !important}
body.theme-gold .channels{
  background:linear-gradient(180deg,#0a0503,#020100) !important;
  border:1px solid #3a2810 !important;padding:8px !important;border-radius:6px !important;
}
/* Time / tempo LCD readouts on the deck header */
body.theme-gold .track-artist{color:#b89850 !important}
body.theme-gold .time-value.remain{color:#ffcf40 !important}
body.theme-gold .screen-key{color:#f5d76e !important}
body.theme-gold .screen-bpm-label{color:#8a6a2e !important}
body.theme-gold .time-label{color:#8a6a2e !important;text-shadow:0 1px 0 rgba(255,240,200,.2) !important}

/* Tempo section — the big +/- panel */
body.theme-gold .tempo-section,
body.theme-gold .tempo-btn-row{
  background:linear-gradient(180deg,#0a0503,#020100) !important;
  border:1px solid #3a2810 !important;
}
body.theme-gold .tempo-value,
body.theme-gold .tempo-display-big{
  color:#ffcf40 !important;
  text-shadow:0 0 6px rgba(255,200,80,.35) !important;
}
body.theme-gold .tempo-range{
  background:#0a0503 !important;border:1px solid #3a2810 !important;
  color:#ffcf40 !important;
}
body.theme-gold .step-btn{color:#d8b860 !important;border-color:#3a2810 !important}
body.theme-gold .step-btn.active{background:#ffcf40 !important;color:#1a0a00 !important}

/* ═══ end GOLD readability pass ═══ */

/* ============================================================
   PROFESSIONAL TURNTABLE / CDJ LOOK
   Realistic Pioneer-style hardware: matte black + brushed
   metal, single white tracking light, amber/green LEDs only
   when active. No rainbow per-deck accents.
   ============================================================ */

/* Unify deck chassis — remove per-deck accents; restore neutral metal */
.cdj,
.cdj[data-deck="A"],
.cdj[data-deck="B"],
.cdj[data-deck="C"],
.cdj[data-deck="D"]{
  --deck-accent:#d8d8dc;
  --deck-accent-rgb:216,216,220;
  background:linear-gradient(180deg,#262629 0%,#1a1a1d 55%,#0e0e10 100%);
  border:1px solid #2a2a2e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 22px 60px rgba(0,0,0,.7);
}
.cdj::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 50%,transparent);
  box-shadow:none;
  height:1px;
  opacity:.6;
}
.cdj::after{display:none}
.cdj:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 24px 70px rgba(0,0,0,.8);
}
.cdj.drop-target{
  border-color:#e0a040;
  box-shadow:0 0 22px rgba(224,160,64,.45),inset 0 0 18px rgba(224,160,64,.1);
}
.cdj .deck-number{
  color:#e8e8ea;
  background:linear-gradient(180deg,#3a3a3e 0%,#1e1e22 100%);
  -webkit-text-fill-color:#e8e8ea;
  border:1px solid #4a4a4e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}

/* ───── JOG WHEEL: brushed-metal platter, single white tracking light ───── */
.jog-outer{
  background:
    radial-gradient(circle at 30% 28%, #6e6e72 0%, #3a3a3e 38%, #1c1c1e 72%, #050506 100%);
  box-shadow:
    0 0 0 2px #0a0a0b,
    0 0 0 4px #2a2a2e,
    0 0 0 5px #050506,
    inset 0 2px 8px rgba(255,255,255,.08),
    inset 0 -8px 16px rgba(0,0,0,.85),
    0 12px 32px rgba(0,0,0,.75);
}
.jog-ring{
  background:#000;
  box-shadow:inset 0 0 16px rgba(0,0,0,.95),inset 0 0 0 1px #1a1a1c;
}
/* Single neutral position light (like real CDJ tracking dot) */
.cdj .jog-ring-light,
.jog-ring-light{
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,255,255,.22) 2deg,
    rgba(255,255,255,.85) 5deg,
    rgba(255,255,255,.45) 9deg,
    transparent 16deg);
  filter:blur(.6px) drop-shadow(0 0 3px rgba(255,255,255,.4));
}
.jog-platter{
  background:
    radial-gradient(circle at 35% 35%, #2c2c30 0%, #141416 60%, #050506 100%);
  box-shadow:
    inset 0 2px 8px rgba(255,255,255,.06),
    inset 0 -4px 12px rgba(0,0,0,.95),
    inset 0 0 0 1px #0a0a0b;
}
.jog-platter-disc{
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    radial-gradient(circle, #1a1a1c 0%, #07070a 100%);
}
.jog-center-screen,
.cdj .jog-center-screen{
  background:linear-gradient(180deg,#0a0a0c 0%,#020203 100%);
  border:1px solid #1a1a1e;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px #050506;
}
.cdj .jog-center-screen .bpm-display,
.jog-center-screen .bpm-display{
  color:#e0a040;
  text-shadow:0 0 6px rgba(224,160,64,.5);
}
.jog-center-screen .bpm-sub{color:#7a7a80;letter-spacing:2.5px}
.jog-center-screen .deck-badge{color:#9a9a9e}
.cdj .jog-indicator,
.jog-indicator{
  background:#f0f0f2;
  box-shadow:0 0 4px rgba(255,255,255,.7);
  width:2px;
  height:12px;
}
.jog-markers::before{
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.12) 0deg 1deg,
    transparent 1deg 9deg);
}

/* ───── TRANSPORT BUTTONS: real CDJ LED-style (CUE = amber, PLAY = green) ───── */
.big-btn{
  background:linear-gradient(180deg,#3c3c40 0%,#222226 45%,#0e0e10 100%);
  color:#cfcfd2;
  text-shadow:none;
  border:1px solid #1a1a1c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 4px rgba(0,0,0,.7),
    0 3px 8px rgba(0,0,0,.55);
}
.big-btn:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 4px rgba(0,0,0,.7),
    0 5px 12px rgba(0,0,0,.7);
}
.big-btn .icon{opacity:.85}
.big-btn .lbl{opacity:.95;letter-spacing:3px}

/* CUE — small amber LED indicator strip on top of the button face */
.big-btn.cue{
  color:#e8e8ea;
  text-shadow:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 4px rgba(0,0,0,.7),
    0 3px 8px rgba(0,0,0,.55);
}
.big-btn.cue::before{
  content:'';
  position:absolute;
  top:4px;left:50%;transform:translateX(-50%);
  width:34%;height:3px;border-radius:2px;
  background:#3a2a18;
  box-shadow:inset 0 0 1px rgba(0,0,0,.6);
  transition:background .12s,box-shadow .12s;
}
.big-btn.cue:hover::before{background:#5a3818}
.big-btn.cue.active{
  background:linear-gradient(180deg,#3c3c40 0%,#222226 45%,#0e0e10 100%);
  color:#ffb060;
  text-shadow:0 0 4px rgba(224,160,64,.4);
  animation:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 4px rgba(0,0,0,.7),
    0 0 14px rgba(224,160,64,.35),
    0 3px 8px rgba(0,0,0,.55);
}
.big-btn.cue.active::before{
  background:#ffb050;
  box-shadow:0 0 10px rgba(255,176,80,.9),0 0 2px rgba(255,255,255,.6);
}

/* PLAY — green LED indicator strip; no pulsing animation */
.big-btn.play{
  color:#e8e8ea;
  text-shadow:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 4px rgba(0,0,0,.7),
    0 3px 8px rgba(0,0,0,.55);
}
.big-btn.play::before{
  content:'';
  position:absolute;
  top:4px;left:50%;transform:translateX(-50%);
  width:34%;height:3px;border-radius:2px;
  background:#163018;
  box-shadow:inset 0 0 1px rgba(0,0,0,.6);
  transition:background .12s,box-shadow .12s;
}
.big-btn.play:hover::before{background:#1f4a22}
.big-btn.play.active{
  background:linear-gradient(180deg,#3c3c40 0%,#222226 45%,#0e0e10 100%);
  color:#5cf0a0;
  text-shadow:0 0 4px rgba(92,240,160,.4);
  animation:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 4px rgba(0,0,0,.7),
    0 0 14px rgba(92,240,160,.35),
    0 3px 8px rgba(0,0,0,.55);
}
.big-btn.play.active::before{
  background:#3cf590;
  box-shadow:0 0 10px rgba(60,245,144,.9),0 0 2px rgba(255,255,255,.6);
}

/* ───── HOT CUES: uniform charcoal pads, single amber LED on activation ───── */
.cue-btn{
  background:linear-gradient(180deg,#2e2e32 0%,#1c1c20 50%,#0c0c0f 100%);
  border:1px solid #1a1a1c;
  color:#8a8a8e;
}
.cue-btn:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 4px rgba(0,0,0,.7),
    0 3px 6px rgba(0,0,0,.55);
}
/* All 8 cues use the same warm amber when active (real-hardware feel) */
.cue-btn[data-color="1"],
.cue-btn[data-color="2"],
.cue-btn[data-color="3"],
.cue-btn[data-color="4"],
.cue-btn[data-color="5"],
.cue-btn[data-color="6"],
.cue-btn[data-color="7"],
.cue-btn[data-color="8"]{--cue-color:#e8a340}
.cue-btn.active{
  background:linear-gradient(180deg,#3a2a18 0%,#1f1610 100%);
  color:#ffd28a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 2px rgba(0,0,0,.5),
    0 0 10px rgba(232,163,64,.55),
    0 0 2px rgba(255,255,255,.4);
}
.cue-btn.armed{
  background:linear-gradient(180deg,#2a2418 0%,#161210 100%);
  color:#d8a060;
}

/* ───── DECK UTILITY ROWS: muted neutral palette ───── */
.loop-btn,.jump-btn,.util-btn{
  background:linear-gradient(180deg,#26262a 0%,#0c0c0f 100%);
  border:1px solid #1a1a1c;
  color:#9a9a9e;
}
.loop-btn{color:#a8b8c0}
.loop-btn.active{
  background:linear-gradient(180deg,#1a3a48 0%,#0a1a22 100%);
  color:#7fd0ff;
  box-shadow:0 0 8px rgba(127,208,255,.35),inset 0 1px 0 rgba(255,255,255,.1);
}
.jump-btn{color:#b0a8c0}
.jump-btn:hover{color:#d8c8f0}
.util-btn{color:#8a8a8e}
.util-btn.sync.active,
.util-btn.keylock.active,
.util-btn.quantize.active,
.util-btn.slip.active,
.util-btn.reverse.active{
  background:linear-gradient(180deg,#3a2a18 0%,#1f1610 100%);
  color:#ffd28a;
  box-shadow:0 0 8px rgba(232,163,64,.4),inset 0 1px 0 rgba(255,255,255,.1);
}
.util-btn.reverse.active{
  background:linear-gradient(180deg,#3a1818 0%,#1f0e0e 100%);
  color:#ff9090;
  box-shadow:0 0 8px rgba(255,90,90,.4),inset 0 1px 0 rgba(255,255,255,.1);
}

/* ───── PAD MODES: uniform amber-on-charcoal ───── */
.pad-mode-btn{
  background:linear-gradient(180deg,#26262a 0%,#0c0c0f 100%);
  border:1px solid #1a1a1c;
  color:#8a8a8e;
}
.pad-mode-btn.active,
.pad-mode-btn[data-pad-mode="cue"].active,
.pad-mode-btn[data-pad-mode="roll"].active,
.pad-mode-btn[data-pad-mode="slicer"].active,
.pad-mode-btn[data-pad-mode="sampler"].active,
.pad-mode-btn[data-pad-mode="loop"].active,
.pad-mode-btn[data-pad-mode="pitch"].active{
  background:linear-gradient(180deg,#3a2a18 0%,#1f1610 100%);
  color:#ffd28a;
  box-shadow:0 0 8px rgba(232,163,64,.4),inset 0 1px 0 rgba(255,255,255,.1);
}

/* ───── TEMPO CONTROLS: monochrome with amber readout ───── */
.tempo-value{color:#e8a340}
.tempo-handle::before{
  background:#f0f0f2;
  box-shadow:0 0 3px rgba(255,255,255,.7);
}
.tempo-btn{color:#cfcfd2;border-color:#2a2a2e}
.tempo-btn:active{
  background:#e8a340;
  color:#0a0a0a;
  box-shadow:0 0 10px rgba(232,163,64,.5);
}
.tempo-btn.reset{color:#a8d8b0}
.tempo-btn.reset:active{background:#5cf0a0;color:#0a0a0a}
.tempo-display-big{
  color:#e8a340;
  text-shadow:0 0 6px rgba(232,163,64,.5);
}

/* Deck label model strip — neutralize bright orange */
.deck-label .model{color:#cfcfd2}
.deck-label .suffix{color:#7a7a80}

/* ═══════════════════════════════════════════════════════════════════
   FINAL UNIFIED JOG-WHEEL CENTRE (BPM panel)
   Wins the cascade over every earlier + theme-specific rule so every
   jog wheel — in DECKS tab, VINYL stage's deck mirrors, theme-gold,
   theme-blade, DJ-FOCUS, WORK-MODE — uses the same polished analog
   readout: dark matte disc, thin neutral rim, 12 precise ticks, an
   amber needle, and the BPM number as the hero.
   ═══════════════════════════════════════════════════════════════════ */
.cdj .jog-center-screen,
.jog-center-screen{
  width:120px !important;height:120px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.06) 0%, transparent 60%),
    linear-gradient(180deg,#161618 0%,#0a0a0c 55%,#020203 100%) !important;
  border:1px solid #2e2e36 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -12px 18px rgba(0,0,0,.85),
    inset 0 0 0 3px #050507,
    0 0 0 1px #000,
    0 6px 16px rgba(0,0,0,.75) !important;
  overflow:hidden !important;position:relative !important;
}
.jog-bpm-dial{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;pointer-events:none !important;
}
.jdial-needle{
  transition:transform .18s cubic-bezier(.22,.9,.3,1) !important;
  transform-origin:50px 50px !important;
}
/* Pixel-centred text stack — absolute+translate, never a margin hack */
.jdial-text{
  position:absolute !important;left:50% !important;top:50% !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;flex-direction:column !important;
  align-items:center !important;justify-content:center !important;
  gap:1px !important;pointer-events:none !important;z-index:3 !important;line-height:1 !important;
}
.cdj .jog-center-screen .bpm-display,
.jog-center-screen .bpm-display{
  font-family:'Orbitron',sans-serif !important;
  font-size:24px !important;font-weight:800 !important;
  color:#ff9030 !important;
  text-shadow:0 0 6px rgba(255,144,48,.5) !important;
  letter-spacing:-.5px !important;
  font-variant-numeric:tabular-nums !important;
  line-height:1 !important;margin:0 !important;
  -webkit-font-smoothing:antialiased !important;
  text-rendering:geometricPrecision !important;
}
.cdj .jog-center-screen .bpm-sub,
.jog-center-screen .bpm-sub{
  font-family:'Orbitron',sans-serif !important;
  font-size:7px !important;font-weight:700 !important;
  color:#6a6a72 !important;letter-spacing:4px !important;margin-top:4px !important;
  opacity:.9 !important;
}
/* Deck badge intentionally hidden (redundant with the deck-number
   tag in the chassis). Already hidden in most modes; lock it here too. */
.cdj .jog-center-screen .deck-badge,
.jog-center-screen .deck-badge{display:none !important}
/* Theme-gold keeps amber on amber dial nicely */
body.theme-gold .cdj .jog-center-screen .bpm-display,
body.theme-gold .jog-center-screen .bpm-display{color:#ffcf40 !important;text-shadow:0 0 6px rgba(255,207,64,.5) !important}
/* Theme-blade: cyan number on the same dark dial */
body.theme-blade .cdj .jog-center-screen .bpm-display,
body.theme-blade .jog-center-screen .bpm-display{color:#2ee0ff !important;text-shadow:0 0 6px rgba(46,224,255,.5) !important}

/* ═══ ALL 4 mode + responsive resizing of the unified jog centre ═══
   In ALL 4 the 4 decks share the row, so each deck's jog wheel shrinks
   from 250 px down to 190-260 px depending on the viewport.  The main
   rule above locks the centre to 120 px which is too big for a 190 px
   wheel — it crushes the dial and steals space from the track-name
   screen above. These overrides restore a sensible ratio (~40% of the
   wheel) for every ALL-4 width bucket + mobile. */
.console.show-all .cdj .jog-center-screen,
body.show-all .cdj .jog-center-screen{
  width:78px !important;height:78px !important;
}
.console.show-all .cdj .jog-center-screen .bpm-display,
body.show-all .cdj .jog-center-screen .bpm-display{
  font-size:16px !important;
}
.console.show-all .cdj .jog-center-screen .bpm-sub,
body.show-all .cdj .jog-center-screen .bpm-sub{
  font-size:6px !important;letter-spacing:2.5px !important;margin-top:2px !important;
}
@media(min-width:1920px){
  .console.show-all .cdj .jog-center-screen,
  body.show-all .cdj .jog-center-screen{width:90px !important;height:90px !important}
  .console.show-all .cdj .jog-center-screen .bpm-display,
  body.show-all .cdj .jog-center-screen .bpm-display{font-size:18px !important}
}
@media(min-width:2560px){
  .console.show-all .cdj .jog-center-screen,
  body.show-all .cdj .jog-center-screen{width:108px !important;height:108px !important}
  .console.show-all .cdj .jog-center-screen .bpm-display,
  body.show-all .cdj .jog-center-screen .bpm-display{font-size:22px !important}
}
@media(max-width:1200px){
  .console.show-all .cdj .jog-center-screen,
  body.show-all .cdj .jog-center-screen{width:66px !important;height:66px !important}
  .console.show-all .cdj .jog-center-screen .bpm-display,
  body.show-all .cdj .jog-center-screen .bpm-display{font-size:14px !important;letter-spacing:-.3px !important}
  .console.show-all .cdj .jog-center-screen .bpm-sub,
  body.show-all .cdj .jog-center-screen .bpm-sub{font-size:5px !important;letter-spacing:2px !important}
}
@media(max-width:820px){
  .cdj .jog-center-screen,
  .jog-center-screen{width:96px !important;height:96px !important}
  .cdj .jog-center-screen .bpm-display,
  .jog-center-screen .bpm-display{font-size:20px !important}
}
/* ===== TITAN LANDING ===== */
#titan-landing{position:fixed;inset:0;z-index:99999;background:radial-gradient(ellipse at 30% 20%,#1a1a1f 0%,#070708 60%,#000 100%);color:#e8e8ea;font-family:'Barlow Condensed',sans-serif;overflow-y:auto;overflow-x:hidden;animation:tlIn .5s cubic-bezier(.2,.8,.2,1);-webkit-overflow-scrolling:touch}
#titan-landing.tl-out{opacity:0;pointer-events:none;transition:opacity .35s ease-out}
@keyframes tlIn{from{opacity:0}to{opacity:1}}
@keyframes tlRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes tlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes tlPulseRing{0%{box-shadow:0 0 0 0 rgba(255,122,0,.45)}70%{box-shadow:0 0 0 14px rgba(255,122,0,0)}100%{box-shadow:0 0 0 0 rgba(255,122,0,0)}}
#titan-landing .tl-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 15%,rgba(255,122,0,.20) 0%,transparent 45%),radial-gradient(circle at 10% 90%,rgba(0,212,255,.14) 0%,transparent 45%),radial-gradient(circle at 50% 50%,rgba(200,0,255,.05) 0%,transparent 60%)}
#titan-landing .tl-grid{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 60px,rgba(255,255,255,.018) 60px 61px),repeating-linear-gradient(0deg,transparent 0 60px,rgba(255,255,255,.018) 60px 61px);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
#titan-landing .tl-wrap{position:relative;max-width:1240px;margin:0 auto;padding:clamp(20px,3.5vw,40px) clamp(18px,4vw,40px) clamp(40px,6vw,72px)}

/* Nav */
#titan-landing .tl-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(32px,6vw,72px);gap:16px;flex-wrap:wrap}
#titan-landing .tl-brand{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(18px,2.2vw,22px);letter-spacing:clamp(2px,.4vw,5px);color:#fff;text-transform:uppercase;display:flex;align-items:center;gap:10px;flex:0 0 auto}
#titan-landing .tl-brand .tl-tag{font-size:10px;background:#ff7a00;color:#000;padding:4px 8px;border-radius:3px;letter-spacing:2px;box-shadow:0 4px 14px rgba(255,122,0,.45)}
#titan-landing .tl-brand b{color:#ff7a00;font-weight:900}
#titan-landing .tl-navlinks{display:flex;gap:clamp(14px,2.6vw,28px);font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:3px;color:#9a9a9e;text-transform:uppercase;flex-wrap:wrap;justify-content:flex-end}
#titan-landing .tl-navlinks a{color:inherit;text-decoration:none;cursor:pointer;padding:6px 2px;transition:color .2s ease;position:relative}
#titan-landing .tl-navlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:#ff7a00;transition:right .25s ease}
#titan-landing .tl-navlinks a:hover{color:#ff7a00}
#titan-landing .tl-navlinks a:hover::after{right:0}
#titan-landing .tl-navlinks a:focus-visible{outline:2px solid #ff7a00;outline-offset:4px;border-radius:2px}

/* Hero */
#titan-landing .tl-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:clamp(48px,7vw,88px)}
#titan-landing .tl-hero > *:first-child{animation:tlRise .7s cubic-bezier(.2,.8,.2,1) both}
#titan-landing .tl-hero > *:last-child{animation:tlRise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:.1s}
#titan-landing .tl-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:4px;color:#ff7a00;border:1px solid rgba(255,122,0,.4);padding:7px 14px;border-radius:99px;margin-bottom:22px;background:rgba(255,122,0,.06);text-transform:uppercase;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#titan-landing .tl-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:#ff7a00;box-shadow:0 0 8px #ff7a00;animation:tlPulseRing 2s infinite}
#titan-landing h1{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(34px,6vw,68px);line-height:1.04;letter-spacing:1px;color:#fff;margin-bottom:22px;text-transform:uppercase;text-wrap:balance}
#titan-landing h1 em{font-style:normal;background:linear-gradient(135deg,#ff7a00,#ffb347 60%,#ffd49a);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
#titan-landing .tl-sub{font-size:clamp(15px,1.5vw,19px);line-height:1.6;color:#b8b8bc;max-width:540px;margin-bottom:clamp(24px,3vw,36px);font-weight:400;text-wrap:pretty}
#titan-landing .tl-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
#titan-landing .tl-cta{font-family:'Orbitron',sans-serif;font-weight:800;font-size:clamp(12px,1.1vw,14px);letter-spacing:3px;padding:clamp(14px,1.6vw,18px) clamp(22px,2.6vw,32px);border-radius:8px;cursor:pointer;border:none;text-transform:uppercase;transition:transform .15s ease, box-shadow .25s ease, border-color .2s ease, color .2s ease, background .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;position:relative;overflow:hidden}
#titan-landing .tl-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);transition:transform .6s ease}
#titan-landing .tl-cta:hover::before{transform:translateX(100%)}
#titan-landing .tl-cta-primary{background:linear-gradient(135deg,#ff7a00,#ff5a00);color:#000;box-shadow:0 8px 32px rgba(255,122,0,.35),inset 0 1px 0 rgba(255,255,255,.25)}
#titan-landing .tl-cta-primary:hover{transform:translateY(-2px);box-shadow:0 14px 48px rgba(255,122,0,.6),inset 0 1px 0 rgba(255,255,255,.35)}
#titan-landing .tl-cta-primary:active{transform:translateY(0);box-shadow:0 4px 16px rgba(255,122,0,.5)}
#titan-landing .tl-cta-ghost{background:rgba(255,255,255,.02);color:#e8e8ea;border:1px solid #3a3a3e;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#titan-landing .tl-cta-ghost:hover{border-color:#00d4ff;color:#00d4ff;background:rgba(0,212,255,.06);box-shadow:0 0 24px rgba(0,212,255,.2)}
#titan-landing .tl-cta:focus-visible{outline:2px solid #00d4ff;outline-offset:3px}
#titan-landing .tl-meta{margin-top:clamp(18px,2.4vw,24px);font-family:'Share Tech Mono',monospace;font-size:11px;color:#7a7a7e;letter-spacing:2px;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:6px 14px}
#titan-landing .tl-meta b{color:#9a9a9e;font-weight:400;display:inline-flex;align-items:center;gap:8px}
#titan-landing .tl-meta b::before{content:'';width:5px;height:5px;border-radius:50%;background:#ff7a00;box-shadow:0 0 6px rgba(255,122,0,.6)}

/* Hero mock */
#titan-landing .tl-mock{position:relative;aspect-ratio:5/4;border-radius:18px;background:linear-gradient(135deg,#1a1a1c 0%,#0a0a0b 100%);border:1px solid #2a2a2e;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 60px rgba(255,122,0,.08),inset 0 0 60px rgba(0,0,0,.4);animation:tlFloat 7s ease-in-out infinite;will-change:transform}
#titan-landing .tl-mock::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.018) 14px 15px),repeating-linear-gradient(0deg,transparent 0 14px,rgba(255,255,255,.018) 14px 15px)}
#titan-landing .tl-mock::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,122,0,.15) 0%,transparent 50%);pointer-events:none}
#titan-landing .tl-jog{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3a3a3e,#0a0a0b 70%);border:3px solid #1a1a1c;box-shadow:0 8px 30px rgba(0,0,0,.6),inset 0 0 30px rgba(0,0,0,.6)}
#titan-landing .tl-jog.l{width:40%;aspect-ratio:1;top:14%;left:6%}
#titan-landing .tl-jog.r{width:40%;aspect-ratio:1;top:14%;right:6%}
#titan-landing .tl-jog::before{content:'';position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,#222 0%,#0a0a0b 70%);border:1px solid #2a2a2e}
#titan-landing .tl-jog::after{content:'';position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffa544 0%,#ff5a00 50%,#5a2200 100%);box-shadow:0 0 28px rgba(255,122,0,.6),inset 0 -6px 12px rgba(0,0,0,.5);animation:tlSpin 6s linear infinite;will-change:transform}
#titan-landing .tl-jog.r::after{animation-direction:reverse;animation-duration:5s;background:radial-gradient(circle at 30% 30%,#7fefff 0%,#00d4ff 50%,#003a5a 100%);box-shadow:0 0 28px rgba(0,212,255,.6),inset 0 -6px 12px rgba(0,0,0,.5)}
@keyframes tlSpin{to{transform:rotate(360deg)}}
#titan-landing .tl-mixer{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:22%;height:64%;background:#0d0d0f;border:1px solid #2a2a2e;border-radius:6px;display:flex;justify-content:space-around;align-items:flex-end;padding:18% 10% 10%;box-shadow:0 6px 24px rgba(0,0,0,.5),inset 0 0 20px rgba(0,0,0,.6)}
#titan-landing .tl-mixer span{display:block;width:7px;height:100%;background:linear-gradient(to top,#1a1a1c 0%,#1a1a1c 60%,#ff7a00 60%,#ff7a00 100%);border-radius:2px;animation:tlVu 1.4s ease-in-out infinite alternate;transform-origin:bottom;will-change:transform,filter}
#titan-landing .tl-mixer span:nth-child(2){animation-delay:.2s;background:linear-gradient(to top,#1a1a1c 0%,#1a1a1c 35%,#00ff7a 35%,#00ff7a 100%)}
#titan-landing .tl-mixer span:nth-child(3){animation-delay:.4s;background:linear-gradient(to top,#1a1a1c 0%,#1a1a1c 50%,#ffd400 50%,#ffd400 100%)}
#titan-landing .tl-mixer span:nth-child(4){animation-delay:.6s;background:linear-gradient(to top,#1a1a1c 0%,#1a1a1c 30%,#00d4ff 30%,#00d4ff 100%)}
@keyframes tlVu{from{filter:brightness(.55);transform:scaleY(.85)}to{filter:brightness(1.25);transform:scaleY(1)}}
#titan-landing .tl-mock-label{position:absolute;top:12px;left:14px;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;color:#5a5a5e;text-transform:uppercase}
#titan-landing .tl-mock-led{position:absolute;top:14px;right:14px;display:flex;gap:5px}
#titan-landing .tl-mock-led i{width:6px;height:6px;border-radius:50%;background:#ff7a00;box-shadow:0 0 6px #ff7a00;animation:tlBlink 1.6s infinite}
#titan-landing .tl-mock-led i:nth-child(2){background:#00ff7a;box-shadow:0 0 6px #00ff7a;animation-delay:.4s}
#titan-landing .tl-mock-led i:nth-child(3){background:#00d4ff;box-shadow:0 0 6px #00d4ff;animation-delay:.8s}
@keyframes tlBlink{0%,80%,100%{opacity:1}90%{opacity:.3}}

/* ── TITAN-BOT face mockup ─────────────────────────────────────────
   The jog wheels become glowing eyes. Headphones arch over the top,
   the mixer is the nose ridge, an EQ analyzer is the mouth/grille,
   and angular cheek vents + a jaw plate finish the cyborg DJ. */
#titan-landing .tl-mock-bot{aspect-ratio:1/1;max-height:560px}
#titan-landing .tl-mock-bot::after{background:radial-gradient(ellipse at 50% -10%,rgba(255,122,0,.22) 0%,transparent 55%),radial-gradient(circle at 50% 110%,rgba(0,212,255,.1) 0%,transparent 50%)}

/* Headphones: band + ear cups extending past the eyes */
#titan-landing .tl-headphones{position:absolute;inset:0;pointer-events:none}
#titan-landing .tl-hp-band{position:absolute;top:5%;left:6%;right:6%;height:18%;border:4px solid #2a2a2e;border-bottom:0;border-radius:50% 50% 0 0 / 100% 100% 0 0;background:linear-gradient(180deg,#2a2a2e 0%,#1a1a1c 100%);box-shadow:0 4px 14px rgba(0,0,0,.6),inset 0 -4px 10px rgba(0,0,0,.5)}
#titan-landing .tl-hp-band::after{content:'';position:absolute;top:18%;left:4%;right:4%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,122,0,.65),transparent);box-shadow:0 0 8px rgba(255,122,0,.5);animation:tlScan 3.2s ease-in-out infinite}
@keyframes tlScan{0%,100%{transform:translateX(-12%)}50%{transform:translateX(12%)}}
#titan-landing .tl-hp-cup{position:absolute;top:11%;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3a3e 0%,#0a0a0b 70%);border:3px solid #1a1a1c;box-shadow:0 10px 24px rgba(0,0,0,.7),inset 0 0 20px rgba(0,0,0,.7)}
#titan-landing .tl-hp-cup-l{left:-2%}
#titan-landing .tl-hp-cup-r{right:-2%}
#titan-landing .tl-hp-cup i{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,#1a1a1c 0%,#050506 100%);border:1px solid #2a2a2e;box-shadow:inset 0 0 12px rgba(0,0,0,.9)}
#titan-landing .tl-hp-cup i::after{content:'';position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,rgba(255,122,0,.55),transparent 70%);animation:tlPulse 2s ease-in-out infinite}
#titan-landing .tl-hp-cup-r i::after{background:radial-gradient(circle,rgba(0,212,255,.55),transparent 70%);animation-delay:.6s}
@keyframes tlPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:.95;transform:scale(1.1)}}

/* Forehead chip / TITAN badge */
#titan-landing .tl-chip{position:absolute;top:8%;left:50%;transform:translateX(-50%);font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;font-weight:800;color:#ff7a00;background:#0a0a0b;padding:4px 10px;border:1px solid rgba(255,122,0,.35);border-radius:3px;box-shadow:0 0 10px rgba(255,122,0,.25),inset 0 0 6px rgba(0,0,0,.6);text-shadow:0 0 6px rgba(255,122,0,.6);z-index:3}
#titan-landing .tl-chip b{color:#5a5a5e;font-weight:400;margin:0 2px}

/* Antenna with blinking tip */
#titan-landing .tl-antenna{position:absolute;top:-4%;left:50%;transform:translateX(-50%);width:2px;height:8%;background:linear-gradient(180deg,transparent,#3a3a3e);z-index:2}
#titan-landing .tl-antenna i{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#ff7a00;box-shadow:0 0 12px #ff7a00,0 0 20px rgba(255,122,0,.6);animation:tlBlink 1.4s infinite}

/* Override default jog wheel placement so they sit as eyes */
#titan-landing .tl-mock-bot .tl-jog.l,
#titan-landing .tl-mock-bot .tl-jog.r{width:30%;top:24%}
#titan-landing .tl-mock-bot .tl-jog.l{left:14%}
#titan-landing .tl-mock-bot .tl-jog.r{right:14%}
#titan-landing .tl-mock-bot .tl-jog::after{inset:34%}
#titan-landing .tl-pupil{position:absolute;inset:46%;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 22px rgba(255,255,255,.8);z-index:3;animation:tlLook 5s ease-in-out infinite}
#titan-landing .tl-mock-bot .tl-jog.r .tl-pupil{animation-delay:.4s}
@keyframes tlLook{0%,100%{transform:translate(0,0)}25%{transform:translate(-25%,-15%)}55%{transform:translate(28%,10%)}75%{transform:translate(-12%,18%)}}

/* Eyebrows: angular bars above each eye */
#titan-landing .tl-brow{position:absolute;top:21%;width:24%;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(255,122,0,.1),#ff7a00,rgba(255,122,0,.1));box-shadow:0 0 14px rgba(255,122,0,.55);z-index:2}
#titan-landing .tl-brow-l{left:17%;transform:rotate(-9deg)}
#titan-landing .tl-brow-r{right:17%;transform:rotate(9deg);background:linear-gradient(90deg,rgba(0,212,255,.1),#00d4ff,rgba(0,212,255,.1));box-shadow:0 0 14px rgba(0,212,255,.55)}

/* Override mixer: becomes the nose plate */
#titan-landing .tl-mock-bot .tl-mixer{width:14%;height:30%;bottom:30%;padding:14% 8% 8%;border-radius:4px 4px 8px 8px;background:linear-gradient(180deg,#1a1a1c 0%,#050506 100%);border:1px solid #2a2a2e}
#titan-landing .tl-mock-bot .tl-mixer::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:60%;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,#ff7a00,#00d4ff,transparent);filter:blur(.4px);box-shadow:0 0 10px rgba(255,122,0,.5)}
#titan-landing .tl-mock-bot .tl-mixer span{width:4px}

/* Mouth: wide audio-reactive grille that spans the lower face */
#titan-landing .tl-mouth{position:absolute;left:18%;right:18%;bottom:14%;height:14%;background:radial-gradient(ellipse at 50% 50%,#0a0a0b 0%,#020203 100%);border:1px solid #1a1a1c;border-radius:8px;display:flex;justify-content:space-between;align-items:flex-end;padding:6px 10px;box-shadow:inset 0 0 18px rgba(0,0,0,.85),0 6px 18px rgba(0,0,0,.5),0 0 22px rgba(255,122,0,.08)}
#titan-landing .tl-mouth::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
#titan-landing .tl-mouth span{display:block;width:6%;height:30%;background:linear-gradient(to top,#ff7a00 0%,#ffb347 100%);border-radius:1px;box-shadow:0 0 6px rgba(255,122,0,.55);animation:tlBars 1s ease-in-out infinite alternate;transform-origin:bottom;will-change:transform}
#titan-landing .tl-mouth span:nth-child(2){background:linear-gradient(to top,#ffb347,#ffd400);box-shadow:0 0 6px rgba(255,212,0,.45);animation-delay:.05s}
#titan-landing .tl-mouth span:nth-child(3){background:linear-gradient(to top,#ffd400,#00ff7a);box-shadow:0 0 6px rgba(0,255,122,.45);animation-delay:.1s}
#titan-landing .tl-mouth span:nth-child(4){background:linear-gradient(to top,#00ff7a,#00d4ff);box-shadow:0 0 6px rgba(0,255,122,.45);animation-delay:.18s}
#titan-landing .tl-mouth span:nth-child(5){background:linear-gradient(to top,#00d4ff,#7fefff);box-shadow:0 0 6px rgba(0,212,255,.55);animation-delay:.24s}
#titan-landing .tl-mouth span:nth-child(6){background:linear-gradient(to top,#7fefff,#ffffff);box-shadow:0 0 8px rgba(127,239,255,.7);animation-delay:.32s;height:80%}
#titan-landing .tl-mouth span:nth-child(7){background:linear-gradient(to top,#ffffff,#7fefff);box-shadow:0 0 8px rgba(127,239,255,.7);animation-delay:.38s;height:78%}
#titan-landing .tl-mouth span:nth-child(8){background:linear-gradient(to top,#00d4ff,#7fefff);box-shadow:0 0 6px rgba(0,212,255,.55);animation-delay:.44s}
#titan-landing .tl-mouth span:nth-child(9){background:linear-gradient(to top,#00ff7a,#00d4ff);box-shadow:0 0 6px rgba(0,255,122,.45);animation-delay:.5s}
#titan-landing .tl-mouth span:nth-child(10){background:linear-gradient(to top,#ffd400,#00ff7a);box-shadow:0 0 6px rgba(0,255,122,.45);animation-delay:.58s}
#titan-landing .tl-mouth span:nth-child(11){background:linear-gradient(to top,#ffb347,#ffd400);box-shadow:0 0 6px rgba(255,212,0,.45);animation-delay:.66s}
#titan-landing .tl-mouth span:nth-child(12){background:linear-gradient(to top,#ff7a00,#ffb347);box-shadow:0 0 6px rgba(255,122,0,.55);animation-delay:.74s}
@keyframes tlBars{0%{transform:scaleY(.25);filter:brightness(.7)}40%{transform:scaleY(.85);filter:brightness(1.05)}70%{transform:scaleY(1);filter:brightness(1.2)}100%{transform:scaleY(.55);filter:brightness(.85)}}

/* Cheek vents — angular intake fins on each side */
#titan-landing .tl-cheek{position:absolute;bottom:18%;width:9%;height:14%;display:flex;flex-direction:column;justify-content:space-between;padding:4px 0;z-index:1}
#titan-landing .tl-cheek-l{left:5%}
#titan-landing .tl-cheek-r{right:5%}
#titan-landing .tl-cheek i{display:block;height:2px;background:linear-gradient(90deg,transparent,rgba(255,122,0,.55),transparent);border-radius:1px;box-shadow:0 0 4px rgba(255,122,0,.35);transform:skewX(-18deg)}
#titan-landing .tl-cheek-r i{background:linear-gradient(90deg,transparent,rgba(0,212,255,.55),transparent);box-shadow:0 0 4px rgba(0,212,255,.35);transform:skewX(18deg)}

/* Jaw plate: a thin angular highlight under the mouth */
#titan-landing .tl-jaw{position:absolute;left:22%;right:22%;bottom:9%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,122,0,.4),rgba(0,212,255,.4),transparent);border-radius:2px;filter:blur(.3px);box-shadow:0 0 10px rgba(255,122,0,.25)}

/* Features */
#titan-landing .tl-features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-bottom:clamp(40px,6vw,72px)}
#titan-landing .tl-feat{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:14px;padding:clamp(20px,2.2vw,28px);transition:border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease;position:relative;overflow:hidden}
#titan-landing .tl-feat::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,122,0,.12) 0%,transparent 60%);opacity:0;transition:opacity .25s ease;pointer-events:none}
#titan-landing .tl-feat:hover{border-color:#ff7a00;transform:translateY(-4px);background:linear-gradient(180deg,rgba(255,122,0,.04),rgba(255,255,255,0));box-shadow:0 20px 40px rgba(0,0,0,.4),0 0 30px rgba(255,122,0,.08)}
#titan-landing .tl-feat:hover::before{opacity:1}
#titan-landing .tl-feat-ico{font-size:30px;margin-bottom:14px;display:block;filter:drop-shadow(0 4px 10px rgba(255,122,0,.25))}
#titan-landing .tl-feat h3{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:3px;color:#fff;margin-bottom:10px;text-transform:uppercase}
#titan-landing .tl-feat p{font-size:14px;line-height:1.6;color:#9a9a9e}

/* Stats band */
#titan-landing .tl-band{border-top:1px solid #1f1f23;border-bottom:1px solid #1f1f23;padding:clamp(24px,3.4vw,36px) 0;margin-bottom:clamp(32px,4vw,52px);display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;background:linear-gradient(180deg,transparent,rgba(255,122,0,.02),transparent)}
#titan-landing .tl-stat b{display:block;font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(26px,3.4vw,38px);background:linear-gradient(135deg,#ff7a00,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px;line-height:1}
#titan-landing .tl-stat span{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:3px;color:#9a9a9e;text-transform:uppercase}

/* Footer */
#titan-landing .tl-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-family:'Share Tech Mono',monospace;font-size:11px;color:#6a6a6e;letter-spacing:2px;text-transform:uppercase}
#titan-landing .tl-foot a{color:#9a9a9e;text-decoration:none;border-bottom:1px dashed #3a3a3e;padding-bottom:1px;transition:color .2s ease, border-color .2s ease}
#titan-landing .tl-foot a:hover{color:#ff7a00;border-color:#ff7a00}
#titan-landing .tl-foot a:focus-visible{outline:2px solid #ff7a00;outline-offset:3px;border-radius:2px}
body.tl-locked{overflow:hidden}

/* ── Responsive: large desktop ── */
@media (min-width:1440px){
  #titan-landing .tl-wrap{max-width:1320px}
  #titan-landing .tl-features{grid-template-columns:repeat(3,1fr);gap:24px}
}

/* ── Responsive: tablet (≤1024px) ── */
@media (max-width:1024px){
  #titan-landing .tl-features{grid-template-columns:repeat(2,1fr)}
}

/* ── Responsive: small tablet / large phone (≤900px) ── */
@media (max-width:900px){
  #titan-landing .tl-hero{grid-template-columns:1fr;gap:32px}
  #titan-landing .tl-mock{max-width:520px;margin:0 auto;width:100%}
  #titan-landing .tl-band{grid-template-columns:repeat(4,1fr);gap:14px}
}

/* ── Responsive: phone (≤640px) ── */
@media (max-width:640px){
  #titan-landing .tl-nav{margin-bottom:32px}
  #titan-landing .tl-navlinks{width:100%;justify-content:flex-start;gap:18px;font-size:10px;letter-spacing:2.5px}
  #titan-landing .tl-navlinks a{padding:4px 0}
  #titan-landing .tl-features{grid-template-columns:1fr;gap:12px}
  #titan-landing .tl-band{grid-template-columns:repeat(2,1fr);gap:24px 14px}
  #titan-landing .tl-cta-row{width:100%;flex-direction:column;align-items:stretch}
  #titan-landing .tl-cta{width:100%;justify-content:center}
  #titan-landing .tl-foot{flex-direction:column;align-items:flex-start;gap:8px;text-align:left}
  #titan-landing .tl-meta{justify-content:flex-start}
}

/* ── Responsive: tiny phone (≤380px) ── */
@media (max-width:380px){
  #titan-landing .tl-wrap{padding:18px 14px 36px}
  #titan-landing .tl-eyebrow{font-size:10px;letter-spacing:2.5px;padding:6px 10px}
  #titan-landing h1{font-size:30px;letter-spacing:.5px}
  #titan-landing .tl-sub{font-size:14px}
  #titan-landing .tl-feat{padding:18px}
}

/* ── Responsive: short viewports (landscape phones) ── */
@media (max-height:520px) and (orientation:landscape){
  #titan-landing .tl-nav{margin-bottom:24px}
  #titan-landing .tl-hero{margin-bottom:36px;align-items:start}
  #titan-landing h1{font-size:clamp(28px,4.5vw,44px)}
  #titan-landing .tl-mock{aspect-ratio:5/3}
}

/* ── Touch / coarse pointer: drop hover lift, keep colors ── */
@media (hover:none){
  #titan-landing .tl-feat:hover{transform:none}
  #titan-landing .tl-cta-primary:hover{transform:none}
  #titan-landing .tl-cta::before{display:none}
}

/* ===== TITAN PRICING ===== */
#titan-landing .tl-pricing{margin-bottom:clamp(40px,6vw,72px);scroll-margin-top:24px}
#titan-landing .tl-pricing-head{text-align:center;margin-bottom:clamp(24px,3vw,36px)}
#titan-landing .tl-pricing-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:4px;color:#00d4ff;border:1px solid rgba(0,212,255,.4);padding:7px 14px;border-radius:99px;margin-bottom:18px;background:rgba(0,212,255,.06);text-transform:uppercase}
#titan-landing .tl-pricing-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:#00d4ff;box-shadow:0 0 8px #00d4ff;animation:tlPulseRing 2s infinite}
#titan-landing .tl-pricing-head h2{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(28px,4.4vw,46px);line-height:1.05;letter-spacing:1px;color:#fff;margin-bottom:10px;text-transform:uppercase}
#titan-landing .tl-pricing-head h2 em{font-style:normal;background:linear-gradient(135deg,#ff7a00,#ffb347 60%,#ffd49a);-webkit-background-clip:text;background-clip:text;color:transparent}
#titan-landing .tl-pricing-head p{font-size:clamp(14px,1.3vw,16px);color:#9a9a9e;max-width:560px;margin:0 auto;line-height:1.55}
#titan-landing .tl-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);align-items:stretch}
#titan-landing .tl-plan{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:18px;padding:clamp(22px,2.6vw,32px);transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;overflow:hidden}
#titan-landing .tl-plan::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,122,0,.12) 0%,transparent 60%);opacity:0;transition:opacity .25s ease;pointer-events:none}
#titan-landing .tl-plan:hover{transform:translateY(-4px);border-color:#ff7a00;box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 36px rgba(255,122,0,.08)}
#titan-landing .tl-plan:hover::before{opacity:1}
#titan-landing .tl-plan.tl-plan-featured{border-color:rgba(255,122,0,.55);background:linear-gradient(180deg,rgba(255,122,0,.06),rgba(255,255,255,0));box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 30px rgba(255,122,0,.1)}
#titan-landing .tl-plan-tag{position:absolute;top:14px;right:14px;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2.5px;color:#000;background:linear-gradient(135deg,#ff7a00,#ffb347);padding:5px 10px;border-radius:99px;text-transform:uppercase;box-shadow:0 6px 18px rgba(255,122,0,.4)}
#titan-landing .tl-plan-ico{font-size:30px;margin-bottom:14px;display:block;filter:drop-shadow(0 4px 10px rgba(255,122,0,.25))}
#titan-landing .tl-plan h3{font-family:'Orbitron',sans-serif;font-size:16px;letter-spacing:3px;color:#fff;margin-bottom:6px;text-transform:uppercase}
#titan-landing .tl-plan-sub{font-family:'Share Tech Mono',monospace;font-size:11px;color:#7a7a7e;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px}
#titan-landing .tl-plan-price{display:flex;align-items:flex-end;gap:6px;margin-bottom:6px;flex-wrap:wrap}
#titan-landing .tl-plan-price .tl-price-amt{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(38px,5vw,56px);line-height:1;background:linear-gradient(135deg,#ff7a00,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent}
#titan-landing .tl-plan-price .tl-price-cur{font-family:'Orbitron',sans-serif;font-weight:700;font-size:18px;color:#9a9a9e;margin-bottom:8px}
#titan-landing .tl-plan-price .tl-price-per{font-family:'Share Tech Mono',monospace;font-size:12px;color:#9a9a9e;letter-spacing:2px;margin-bottom:10px;text-transform:uppercase}
#titan-landing .tl-plan-bill{font-family:'Share Tech Mono',monospace;font-size:11px;color:#6a6a6e;letter-spacing:1.5px;margin-bottom:18px;text-transform:uppercase}
#titan-landing .tl-plan ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px;flex:1}
#titan-landing .tl-plan li{font-size:14px;color:#cfcfd2;display:flex;align-items:flex-start;gap:10px;line-height:1.5}
#titan-landing .tl-plan li::before{content:'';flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb347,#ff5a00);box-shadow:0 0 8px rgba(255,122,0,.45);margin-top:3px;position:relative}
#titan-landing .tl-plan li small{display:block;color:#7a7a7e;font-size:11.5px;font-family:'Share Tech Mono',monospace;letter-spacing:1px;margin-top:2px}
#titan-landing .tl-plan-cta{font-family:'Orbitron',sans-serif;font-weight:800;font-size:12px;letter-spacing:3px;padding:14px 22px;border-radius:8px;cursor:pointer;border:1px solid #3a3a3e;text-transform:uppercase;transition:transform .15s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;background:rgba(255,255,255,.02);color:#e8e8ea;width:100%}
#titan-landing .tl-plan-cta:hover{border-color:#00d4ff;color:#00d4ff;background:rgba(0,212,255,.06);box-shadow:0 0 24px rgba(0,212,255,.2)}
#titan-landing .tl-plan-featured .tl-plan-cta{background:linear-gradient(135deg,#ff7a00,#ff5a00);color:#000;border-color:transparent;box-shadow:0 8px 26px rgba(255,122,0,.35),inset 0 1px 0 rgba(255,255,255,.25)}
#titan-landing .tl-plan-featured .tl-plan-cta:hover{transform:translateY(-2px);color:#000;background:linear-gradient(135deg,#ff8a18,#ff6a18);box-shadow:0 14px 40px rgba(255,122,0,.55),inset 0 1px 0 rgba(255,255,255,.35)}
#titan-landing .tl-plan-cta.tl-in-cart{background:linear-gradient(135deg,#00ff7a,#00b85a);color:#000;border-color:transparent;box-shadow:0 6px 20px rgba(0,255,122,.35)}
#titan-landing .tl-plan-cta:focus-visible{outline:2px solid #00d4ff;outline-offset:3px}
#titan-landing .tl-plan-foot{font-family:'Share Tech Mono',monospace;font-size:10.5px;color:#6a6a6e;letter-spacing:1.5px;margin-top:12px;text-align:center;text-transform:uppercase}

/* Cart launcher pill (floats top-right of nav) */
#titan-landing .tl-cart-pill{display:inline-flex;align-items:center;gap:8px;font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;color:#fff;background:rgba(255,122,0,.12);border:1px solid rgba(255,122,0,.4);padding:7px 12px;border-radius:99px;cursor:pointer;text-transform:uppercase;transition:background .2s ease, border-color .2s ease, transform .15s ease}
#titan-landing .tl-cart-pill:hover{background:rgba(255,122,0,.22);border-color:#ff7a00;transform:translateY(-1px)}
#titan-landing .tl-cart-pill .tl-cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:99px;background:#ff7a00;color:#000;font-size:10px;font-weight:900}
#titan-landing .tl-cart-pill[data-empty="1"] .tl-cart-count{display:none}

/* Cart drawer (slides from right) */
#titan-landing .tl-cart{position:fixed;top:0;right:0;width:min(420px,92vw);height:100%;background:linear-gradient(180deg,#111114 0%,#070708 100%);border-left:1px solid #2a2a2e;box-shadow:-30px 0 80px rgba(0,0,0,.6);transform:translateX(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:100001;display:flex;flex-direction:column}
#titan-landing .tl-cart.tl-open{transform:translateX(0)}
#titan-landing .tl-cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #1f1f23}
#titan-landing .tl-cart-head h3{font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:3px;color:#fff;text-transform:uppercase}
#titan-landing .tl-cart-close{background:none;border:none;color:#9a9a9e;font-size:22px;cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1}
#titan-landing .tl-cart-close:hover{color:#ff7a00;background:rgba(255,122,0,.08)}
#titan-landing .tl-cart-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:12px}
#titan-landing .tl-cart-empty{text-align:center;color:#6a6a6e;font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;margin:auto 0;text-transform:uppercase}
#titan-landing .tl-cart-empty span{display:block;font-size:42px;margin-bottom:14px;opacity:.5}
#titan-landing .tl-cart-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;background:rgba(255,255,255,.025);border:1px solid #1f1f23;border-radius:12px}
#titan-landing .tl-cart-item-ico{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,rgba(255,122,0,.18),rgba(0,212,255,.12));display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid #2a2a2e}
#titan-landing .tl-cart-item-info{min-width:0}
#titan-landing .tl-cart-item-info b{display:block;font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:1.5px;color:#fff;text-transform:uppercase;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#titan-landing .tl-cart-item-info span{font-family:'Share Tech Mono',monospace;font-size:11px;color:#7a7a7e;letter-spacing:1.2px;text-transform:uppercase}
#titan-landing .tl-cart-item-price{font-family:'Orbitron',sans-serif;font-weight:800;font-size:14px;color:#ff7a00;text-align:right}
#titan-landing .tl-cart-item-price small{display:block;font-size:9.5px;color:#6a6a6e;font-weight:400;letter-spacing:1.5px;font-family:'Share Tech Mono',monospace;margin-top:2px;text-transform:uppercase}
#titan-landing .tl-cart-item-rm{grid-column:3;background:none;border:none;color:#5a5a5e;cursor:pointer;font-size:11px;font-family:'Share Tech Mono',monospace;letter-spacing:1.5px;padding:4px 0;text-transform:uppercase}
#titan-landing .tl-cart-item-rm:hover{color:#ff5a5a}
#titan-landing .tl-cart-item-row{display:flex;justify-content:flex-end;grid-column:1/-1;margin-top:-2px}
#titan-landing .tl-cart-foot{padding:18px 22px;border-top:1px solid #1f1f23;background:rgba(0,0,0,.35);display:flex;flex-direction:column;gap:14px}
#titan-landing .tl-cart-totals{display:flex;flex-direction:column;gap:6px;font-family:'Share Tech Mono',monospace;font-size:12px;color:#9a9a9e;letter-spacing:1.5px;text-transform:uppercase}
#titan-landing .tl-cart-totals > div{display:flex;justify-content:space-between}
#titan-landing .tl-cart-totals .tl-total{font-family:'Orbitron',sans-serif;font-size:18px;color:#fff;letter-spacing:2px;border-top:1px dashed #2a2a2e;padding-top:8px;margin-top:4px}
#titan-landing .tl-cart-totals .tl-total b{color:#ff7a00}
#titan-landing .tl-cart-checkout{font-family:'Orbitron',sans-serif;font-weight:800;font-size:12px;letter-spacing:3px;padding:14px 22px;border-radius:8px;cursor:pointer;border:none;text-transform:uppercase;background:linear-gradient(135deg,#ff7a00,#ff5a00);color:#000;box-shadow:0 8px 26px rgba(255,122,0,.35),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s ease, box-shadow .25s ease}
#titan-landing .tl-cart-checkout:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,122,0,.55)}
#titan-landing .tl-cart-checkout:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Backdrop shared by cart + checkout */
#titan-landing .tl-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:100000}
#titan-landing .tl-backdrop.tl-open{opacity:1;pointer-events:auto}

/* Checkout modal */
#titan-landing .tl-checkout{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:100002;opacity:0;pointer-events:none;transition:opacity .25s ease}
#titan-landing .tl-checkout.tl-open{opacity:1;pointer-events:auto}
#titan-landing .tl-checkout-card{width:min(880px,100%);max-height:calc(100vh - 48px);overflow:auto;background:linear-gradient(180deg,#16161a 0%,#0a0a0b 100%);border:1px solid #2a2a2e;border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 60px rgba(255,122,0,.08);display:grid;grid-template-columns:1fr 1.1fr;transform:translateY(20px) scale(.98);transition:transform .25s ease}
#titan-landing .tl-checkout.tl-open .tl-checkout-card{transform:translateY(0) scale(1)}
#titan-landing .tl-checkout-summary{padding:28px;background:linear-gradient(180deg,rgba(255,122,0,.05),rgba(255,255,255,0));border-right:1px solid #1f1f23;display:flex;flex-direction:column;gap:16px}
#titan-landing .tl-checkout-summary h4{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:3px;color:#ff7a00;text-transform:uppercase;margin-bottom:4px}
#titan-landing .tl-checkout-summary .tl-co-list{display:flex;flex-direction:column;gap:10px}
#titan-landing .tl-checkout-summary .tl-co-item{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px;background:rgba(255,255,255,.025);border:1px solid #1f1f23;border-radius:10px}
#titan-landing .tl-checkout-summary .tl-co-item b{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:1.5px;color:#fff;text-transform:uppercase;display:block;margin-bottom:3px}
#titan-landing .tl-checkout-summary .tl-co-item span{font-family:'Share Tech Mono',monospace;font-size:11px;color:#7a7a7e;letter-spacing:1.2px;text-transform:uppercase}
#titan-landing .tl-checkout-summary .tl-co-item strong{font-family:'Orbitron',sans-serif;font-weight:800;font-size:14px;color:#ff7a00;white-space:nowrap}
#titan-landing .tl-checkout-summary .tl-co-totals{margin-top:auto;padding-top:14px;border-top:1px dashed #2a2a2e;font-family:'Share Tech Mono',monospace;font-size:12px;color:#9a9a9e;letter-spacing:1.5px;text-transform:uppercase;display:flex;flex-direction:column;gap:6px}
#titan-landing .tl-checkout-summary .tl-co-totals > div{display:flex;justify-content:space-between}
#titan-landing .tl-checkout-summary .tl-co-totals .tl-total{font-family:'Orbitron',sans-serif;font-size:20px;color:#fff;letter-spacing:2px;border-top:1px solid #2a2a2e;padding-top:10px;margin-top:6px}
#titan-landing .tl-checkout-summary .tl-co-totals .tl-total b{color:#ff7a00}
#titan-landing .tl-checkout-form{padding:28px;display:flex;flex-direction:column;gap:14px}
#titan-landing .tl-checkout-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
#titan-landing .tl-checkout-head h3{font-family:'Orbitron',sans-serif;font-size:16px;letter-spacing:3px;color:#fff;text-transform:uppercase}
#titan-landing .tl-checkout-close{background:none;border:none;color:#9a9a9e;font-size:22px;cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1}
#titan-landing .tl-checkout-close:hover{color:#ff7a00;background:rgba(255,122,0,.08)}
#titan-landing .tl-form-row{display:grid;gap:6px}
#titan-landing .tl-form-row.tl-form-2{grid-template-columns:1fr 1fr;gap:10px}
#titan-landing .tl-form-row.tl-form-3{grid-template-columns:2fr 1fr 1fr;gap:10px}
#titan-landing .tl-form-row label{font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:2px;color:#9a9a9e;text-transform:uppercase}
#titan-landing .tl-form-row input,
#titan-landing .tl-form-row select{font-family:'Share Tech Mono',monospace;font-size:13px;color:#e8e8ea;background:#08080a;border:1px solid #2a2a2e;border-radius:8px;padding:11px 12px;outline:none;letter-spacing:1px;transition:border-color .15s ease, box-shadow .15s ease;width:100%}
#titan-landing .tl-form-row input:focus,
#titan-landing .tl-form-row select:focus{border-color:#ff7a00;box-shadow:0 0 0 3px rgba(255,122,0,.15)}
#titan-landing .tl-form-row input::placeholder{color:#4a4a4e}
#titan-landing .tl-form-row.tl-form-grid-2{grid-template-columns:1fr 1fr;gap:10px}
#titan-landing .tl-pay-method{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
#titan-landing .tl-pay-method label{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid #2a2a2e;border-radius:10px;background:rgba(255,255,255,.02);cursor:pointer;font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;color:#9a9a9e;text-transform:uppercase;transition:border-color .15s ease, color .15s ease, background .15s ease}
#titan-landing .tl-pay-method input{display:none}
#titan-landing .tl-pay-method label:hover{color:#fff;border-color:#3a3a3e}
#titan-landing .tl-pay-method input:checked + label{border-color:#ff7a00;color:#fff;background:rgba(255,122,0,.08);box-shadow:inset 0 0 14px rgba(255,122,0,.1)}
#titan-landing .tl-checkout-pay{margin-top:6px;font-family:'Orbitron',sans-serif;font-weight:800;font-size:13px;letter-spacing:3px;padding:16px 22px;border-radius:10px;cursor:pointer;border:none;text-transform:uppercase;background:linear-gradient(135deg,#ff7a00,#ff5a00);color:#000;box-shadow:0 8px 26px rgba(255,122,0,.35),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s ease, box-shadow .25s ease}
#titan-landing .tl-checkout-pay:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,122,0,.55)}
#titan-landing .tl-checkout-pay:disabled{opacity:.55;cursor:not-allowed;transform:none}
#titan-landing .tl-checkout-secure{font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:1.5px;color:#6a6a6e;text-align:center;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px}
#titan-landing .tl-checkout-secure::before{content:'';width:6px;height:6px;border-radius:50%;background:#00ff7a;box-shadow:0 0 6px #00ff7a}
#titan-landing .tl-checkout-error{font-family:'Share Tech Mono',monospace;font-size:11px;color:#ff5a5a;letter-spacing:1px;background:rgba(255,90,90,.08);border:1px solid rgba(255,90,90,.25);border-radius:8px;padding:10px;display:none}
#titan-landing .tl-checkout-error.tl-show{display:block}

/* Success state replaces the form */
#titan-landing .tl-success{padding:34px 28px;text-align:center;display:none}
#titan-landing .tl-success.tl-show{display:block}
#titan-landing .tl-success-ico{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#00ff7a,#00b85a);box-shadow:0 0 30px rgba(0,255,122,.45);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:34px;color:#000;font-weight:900}
#titan-landing .tl-success h3{font-family:'Orbitron',sans-serif;font-size:18px;letter-spacing:3px;color:#fff;text-transform:uppercase;margin-bottom:10px}
#titan-landing .tl-success p{color:#9a9a9e;line-height:1.55;font-size:14px;margin-bottom:8px}
#titan-landing .tl-success .tl-success-id{font-family:'Share Tech Mono',monospace;font-size:11.5px;color:#ff7a00;letter-spacing:2px;background:rgba(255,122,0,.08);border:1px solid rgba(255,122,0,.25);border-radius:6px;padding:8px 12px;display:inline-block;margin:6px 0 18px;text-transform:uppercase}
#titan-landing .tl-success .tl-success-cta{margin-top:10px;font-family:'Orbitron',sans-serif;font-weight:800;font-size:12px;letter-spacing:3px;padding:12px 22px;border-radius:8px;cursor:pointer;border:1px solid #3a3a3e;background:rgba(255,255,255,.02);color:#e8e8ea;text-transform:uppercase;transition:border-color .15s ease, color .15s ease, background .15s ease}
#titan-landing .tl-success .tl-success-cta:hover{border-color:#ff7a00;color:#ff7a00;background:rgba(255,122,0,.06)}

/* Pricing responsiveness */
@media (max-width:780px){
  #titan-landing .tl-plans{grid-template-columns:1fr}
  #titan-landing .tl-checkout-card{grid-template-columns:1fr}
  #titan-landing .tl-checkout-summary{border-right:none;border-bottom:1px solid #1f1f23}
}
@media (max-width:480px){
  #titan-landing .tl-form-row.tl-form-2,
  #titan-landing .tl-form-row.tl-form-3,
  #titan-landing .tl-form-row.tl-form-grid-2{grid-template-columns:1fr}
  #titan-landing .tl-pay-method{grid-template-columns:1fr}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  #titan-landing,
  #titan-landing *,
  #titan-landing *::before,
  #titan-landing *::after{animation:none !important;transition:none !important}
}

/* ===== TITAN LINEUP — full-width 3-decks · 6-ch mixer · 3-decks ===== */
.t3d-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at center,#0a0a10 0%,#000 75%);z-index:9999;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:24px;overflow:auto}
.t3d-overlay.open{display:flex}
.t3d-head{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.t3d-title{font-family:'Orbitron',sans-serif;font-size:18px;letter-spacing:4px;color:#fff;text-shadow:0 0 12px rgba(255,122,0,.55)}
.t3d-title b{color:var(--orange)}
.t3d-sub{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1.5px;color:var(--text-dim)}
.t3d-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.t3d-btn{padding:8px 14px;background:linear-gradient(180deg,#26262c,#16161a);border:1px solid #3a3a42;border-radius:6px;color:#e8e8ec;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;cursor:pointer;transition:all .18s}
.t3d-btn:hover{border-color:var(--orange);color:var(--orange);box-shadow:0 0 12px rgba(255,122,0,.25)}
.t3d-btn.t3d-close{border-color:#5a2020;color:#ff8a8a}
.t3d-btn.t3d-close:hover{background:linear-gradient(180deg,#3a1010,#200808);color:#ff5a5a;box-shadow:0 0 14px rgba(255,46,46,.35)}
.t3d-stage{width:100%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.t3d-rig{width:100%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.7))}
.t3d-rig svg{width:100%;height:auto;display:block}
.t3d-legend{width:100%;margin-top:14px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.4px}
.t3d-leg-cell{padding:8px 6px;background:linear-gradient(180deg,rgba(20,20,24,.85),rgba(8,8,10,.85));border:1px solid #2a2a30;border-radius:6px;text-align:center;color:var(--text-dim)}
.t3d-leg-cell b{display:block;color:var(--orange);font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;margin-bottom:3px}
.t3d-leg-cell.mid b{color:#2ee0ff}
.dsb-3d{background:linear-gradient(180deg,rgba(46,224,255,.16),rgba(46,224,255,.04)) !important;color:#7ee8ff !important;border:1px solid rgba(46,224,255,.45) !important}
.dsb-3d.active{background:linear-gradient(180deg,#2ee0ff,#1a8aa8) !important;color:#001020 !important;border-color:#7ee8ff !important;box-shadow:0 0 14px rgba(46,224,255,.55) !important}
@media (max-width:900px){
  .t3d-legend{grid-template-columns:repeat(2,1fr)}
  .t3d-title{font-size:14px;letter-spacing:2.5px}
}
@media (max-width:560px){
  .t3d-overlay{padding:14px 8px}
  .t3d-actions .t3d-btn{padding:6px 10px;font-size:9px}
}

/* ============================================================
   LIGHT THEME — Pioneer White hardware match
   Override pass that re-skins controls so the white theme reads
   like a CDJ-3000-W deck and DJM-900NXS2-W mixer:
   white body panels + dark charcoal control buttons + chrome
   knob caps with orange indicator + chrome fader handles.
   ============================================================ */

/* Body + main panels: cool porcelain white (replaces warm cream) */
body.theme-light .cdj,body.theme-light .mixer,body.theme-light .library,
body.theme-light .sampler-panel,body.theme-light .youtube-panel,body.theme-light .playlists-panel,
body.theme-light .ai-dj-panel,body.theme-light .analytics-panel,body.theme-light .midi-panel,
body.theme-light .settings-panel,body.theme-light .deck-switch-bar{
  background:
    linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,0) 12%,rgba(0,0,0,.05) 100%),
    linear-gradient(180deg,#fafafc 0%,#e6e6ea 100%) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 14px 32px -10px rgba(40,40,55,.28),
    0 2px 6px rgba(0,0,0,.07) !important;
}

/* All control buttons → dark charcoal with light label, like real hardware */
body.theme-light .big-btn,body.theme-light .loop-btn,body.theme-light .jump-btn,body.theme-light .util-btn,
body.theme-light .beat-btn,body.theme-light .pad-mode-btn,
body.theme-light .tempo-btn,body.theme-light .step-btn,body.theme-light .mic-btn,
body.theme-light .cue-btn,body.theme-light .compact-btn,body.theme-light .cue-hp-btn,
body.theme-light .dsb-btn,body.theme-light .search-src-btn,
body.theme-light .tool-btn,body.theme-light .assign-btn,body.theme-light .curve-btn{
  background:linear-gradient(180deg,#3a3a40 0%,#1d1d22 100%) !important;
  border:1px solid #0a0a0c !important;
  color:#e8e8ec !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 1px 2px rgba(0,0,0,.25) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.55) !important;
}
body.theme-light .big-btn:hover,body.theme-light .loop-btn:hover,body.theme-light .jump-btn:hover,
body.theme-light .util-btn:hover,body.theme-light .beat-btn:hover,
body.theme-light .pad-mode-btn:hover,body.theme-light .tool-btn:hover,
body.theme-light .dsb-btn:hover{
  filter:brightness(1.15);
  border-color:rgba(255,138,26,.55) !important;
}

/* Hardware-correct accent buttons keep their LED color */
body.theme-light .big-btn.cue.active{
  background:linear-gradient(180deg,#ffb060 0%,var(--cue-orange) 55%,#8a2a00 100%) !important;
  color:#fff !important;border-color:#5a1a00 !important;
}
body.theme-light .big-btn.play.active{
  background:linear-gradient(180deg,#5cffa8 0%,var(--play-green) 55%,#005a30 100%) !important;
  color:#0a0a0a !important;border-color:#003e22 !important;
}

/* Knobs: brushed silver cap with orange indicator (Pioneer mixer caps) */
body.theme-light .knob{
  background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0%,transparent 32%),
    conic-gradient(from 0deg,#dcdce2 0deg,#a8a8b0 60deg,#7a7a82 130deg,#c8c8d0 200deg,#90909a 280deg,#dcdce2 360deg),
    radial-gradient(circle at 30% 30%,#e0e0e6 0%,#888890 65%,#3e3e44 100%) !important;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.85),
    inset 0 -3px 6px rgba(0,0,0,.4),
    0 2px 5px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.22) !important;
}
body.theme-light .knob-indicator{
  background:linear-gradient(180deg,#fff 0%,var(--cue-orange) 65%,#8a2a00 100%) !important;
  box-shadow:0 0 4px rgba(0,0,0,.5),0 0 6px rgba(255,90,0,.5) !important;
}
body.theme-light .knob-label{color:#1a1a1c;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.8)}

/* Channel labels (1, 2, 3, 4) — bold dark, like printed hardware */
body.theme-light .channel-label,body.theme-light .channel-num{
  color:#1a1a1c !important;
  font-weight:800;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

/* Faders: dark track with chrome handle (matches DJM-900NXS2-W) */
body.theme-light .fader-wrap,body.theme-light .crossfader-track,body.theme-light .tempo-slider{
  background:linear-gradient(180deg,#1a1a1e 0%,#0a0a0c 100%) !important;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.25),
    0 0 0 2px rgba(255,255,255,.5) !important;
}
body.theme-light .fader-handle,body.theme-light .tempo-handle,body.theme-light .crossfader-handle{
  background:linear-gradient(180deg,#fff 0%,#d8d8de 28%,#8c8c94 70%,#3a3a40 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(0,0,0,.4),
    0 3px 8px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.22) !important;
}

/* Sample / performance pads: dark like real CDJ-3000-W performance pads */
body.theme-light .sample-pad{
  background:linear-gradient(180deg,#2e2e34 0%,#16161a 100%) !important;
  border:1px solid #050507 !important;
  color:#e8e8ec !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 3px 6px rgba(0,0,0,.18) !important;
}
body.theme-light .sample-pad .pad-num{color:#fff !important}
body.theme-light .sample-pad .pad-name{color:#a8a8b0 !important}

/* Jog wheel: chrome ring stays, but inner platter slightly cleaner */
body.theme-light .jog-outer{
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.9) 0%,transparent 38%),
    radial-gradient(circle at 30% 30%,#e4e4e8 0%,#9c9ca4 55%,#4e4e56 100%) !important;
  box-shadow:
    0 0 0 2px #888,
    0 0 0 3px rgba(255,255,255,.5),
    0 0 0 5px #b4b4ba,
    inset 0 3px 10px rgba(255,255,255,.55),
    inset 0 -6px 14px rgba(0,0,0,.4),
    0 14px 32px rgba(40,40,60,.32) !important;
}

/* Tempo slider area: white background with bold dark tempo readout */
body.theme-light .tempo-display-big{
  background:#0a0a0e !important;
  color:#ffb366 !important;
  border:1px solid #0a0a0e !important;
  box-shadow:inset 0 0 8px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.2) !important;
}

/* Headphone / master / crossfader sections: subtle white panel */
body.theme-light .master-section,body.theme-light .crossfader-section,
body.theme-light .headphone-section,body.theme-light .mic-section,
body.theme-light .color-fx-row,body.theme-light .color-fx-grid{
  background:linear-gradient(180deg,#f4f4f6 0%,#e2e2e6 100%) !important;
  border:1px solid rgba(0,0,0,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.06) !important;
}

/* COLOR FX selectors keep dark LED look on white body */
body.theme-light .fx-onoff{
  background:linear-gradient(180deg,#3a3a40 0%,#1d1d22 100%) !important;
  border:2px solid #0a0a0c !important;
  color:#e8e8ec !important;
}
body.theme-light .fx-onoff.active{
  background:linear-gradient(180deg,#ffa84a 0%,var(--orange) 55%,#aa3a00 100%) !important;
  color:#fff !important;border-color:#5a1a00 !important;
  box-shadow:0 0 18px rgba(255,138,26,.55) !important;
}

/* Mixer brand label printed on white panel */
body.theme-light .mixer-brand,body.theme-light .deck-label{
  color:#1a1a1c !important;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
body.theme-light .mixer-brand .model,body.theme-light .deck-label .model{color:var(--orange) !important}

/* Crisp dark border around big surfaces so panels look molded */
body.theme-light .cdj,body.theme-light .mixer{
  border:1px solid rgba(0,0,0,.18) !important;
}


/* ============================================================
   CUE BUTTONS — matte black, realistic look in all views
   Replaces the legacy chiclet gradient with a uniform soft-touch
   matte black surface. Active states still light up so the user
   sees their cue colour, but the resting state is consistent.
   ============================================================ */
.cue-btn,
.big-btn.cue,
.tt-btn.cue,
.vx-cue,
.compact-btn.cue,
.cue-hp-btn{
  background:linear-gradient(180deg,#1a1a1c 0%,#0d0d0f 55%,#040405 100%) !important;
  border:1px solid #050506 !important;
  color:#cfcfd2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -2px 3px rgba(0,0,0,.85),
    0 1px 0 rgba(0,0,0,.6),
    0 3px 6px rgba(0,0,0,.55) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.6) !important;
}
.cue-btn:hover,
.big-btn.cue:hover,
.tt-btn.cue:hover,
.vx-cue:hover,
.compact-btn.cue:hover,
.cue-hp-btn:hover{
  background:linear-gradient(180deg,#222226 0%,#121214 55%,#060607 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 3px rgba(0,0,0,.85),
    0 4px 10px rgba(0,0,0,.65) !important;
}
.cue-btn:active,
.big-btn.cue:active,
.tt-btn.cue:active,
.vx-cue:active,
.compact-btn.cue:active,
.cue-hp-btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.9),
    0 1px 2px rgba(0,0,0,.5) !important;
}
/* Active hot-cues fully light up in their assigned cue colour —
   each pad glows a different colour so the deck reads at a
   glance which cues are armed. */
.cue-btn.active{
  background:
    radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.55) 0%,transparent 60%),
    linear-gradient(180deg,var(--cue-color,var(--orange)) 0%,color-mix(in srgb,var(--cue-color,var(--orange)) 60%, #000) 100%) !important;
  color:#000 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(0,0,0,.45),
    0 0 12px var(--cue-color,var(--orange)),
    0 0 24px var(--cue-color,var(--orange)),
    0 0 2px rgba(255,255,255,.9) !important;
}
.big-btn.cue.active{
  color:var(--cue-orange) !important;
  text-shadow:0 0 10px rgba(255,90,0,.8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 3px rgba(0,0,0,.85),
    0 0 22px rgba(255,90,0,.85) !important;
}
.compact-btn.cue.active{
  color:var(--cue-orange) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 3px rgba(0,0,0,.85),
    0 0 16px rgba(255,90,0,.8) !important;
}
/* Light theme: keep the matte black so they read like real
   physical cue buttons even on a porcelain surface. */
body.theme-light .cue-btn,
body.theme-light .big-btn.cue,
body.theme-light .tt-btn.cue,
body.theme-light .vx-cue,
body.theme-light .compact-btn.cue,
body.theme-light .cue-hp-btn{
  background:linear-gradient(180deg,#222226 0%,#0e0e10 55%,#040405 100%) !important;
  color:#e6e6ea !important;
  border:1px solid #050506 !important;
}

/* ============================================================
   BOOTH LIGHT — LED halos around every button in the decks
   and mixer. Toggled by body.booth-light. The halo is a warm
   amber outer glow on each interactive control, with a tighter
   ring on hover/active so the booth genuinely lights up the
   surface from the buttons themselves.
   ============================================================ */
.dsb-boothlight{
  background:linear-gradient(180deg,rgba(255,180,90,.28),rgba(255,180,90,.08)) !important;
  color:#ffe0b0 !important;
  border:2px solid rgba(255,180,90,.7) !important;
  text-shadow:0 0 6px rgba(255,180,90,.45) !important;
}
.dsb-boothlight:hover{
  border-color:#ffd6a0 !important;
  color:#fff !important;
  box-shadow:0 0 14px rgba(255,176,96,.5) !important;
}
.dsb-boothlight.active{
  background:linear-gradient(180deg,#ffb060,#a06020) !important;
  color:#1a0c00 !important;
  border-color:#ffd6a0 !important;
  box-shadow:0 0 22px rgba(255,176,96,.75) !important;
  text-shadow:none !important;
}

/* Halo selectors — limit to controls inside decks (.cdj) and the
   mixer surfaces so we light up the studio gear, not landing or
   modals. Tabs and toolbars are excluded so their accent colours
   stay legible. */
body.booth-light .cdj button,
body.booth-light .cdj .knob,
body.booth-light .cdj .pad-mode-btn,
body.booth-light .cdj .loop-btn,
body.booth-light .cdj .jump-btn,
body.booth-light .cdj .tempo-btn,
body.booth-light .cdj .sample-pad,
body.booth-light .cdj .step-btn,
body.booth-light .mixer button,
body.booth-light .mixer .knob,
body.booth-light .mixer-toolbar button,
body.booth-light .mixer-toolbar .knob,
body.booth-light .scene-fx-panel button,
body.booth-light .beat-fx-panel button{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -2px 3px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,170,80,.35),
    0 0 10px rgba(255,160,70,.45),
    0 0 22px rgba(255,140,60,.30) !important;
}
body.booth-light .cdj button:hover,
body.booth-light .cdj .pad-mode-btn:hover,
body.booth-light .cdj .loop-btn:hover,
body.booth-light .cdj .jump-btn:hover,
body.booth-light .cdj .tempo-btn:hover,
body.booth-light .cdj .step-btn:hover,
body.booth-light .mixer button:hover,
body.booth-light .mixer-toolbar button:hover,
body.booth-light .scene-fx-panel button:hover,
body.booth-light .beat-fx-panel button:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 3px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,200,120,.6),
    0 0 14px rgba(255,180,90,.7),
    0 0 28px rgba(255,150,70,.45) !important;
}
/* Hot cue pads keep their cue colour but get a stronger amber
   ring so they read as freshly-lit LEDs in the booth. */
body.booth-light .cue-btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 3px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,170,80,.45),
    0 0 12px rgba(255,160,70,.55),
    0 0 24px rgba(255,140,60,.35) !important;
}
body.booth-light .cue-btn.active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 3px rgba(0,0,0,.85),
    0 0 0 1px var(--cue-color,var(--orange)),
    0 0 16px var(--cue-color,var(--orange)),
    0 0 28px var(--cue-color,var(--orange)) !important;
}
/* Reduced motion: just a static halo, no transitions to animate. */
@media (prefers-reduced-motion:reduce){
  body.booth-light .cdj button,
  body.booth-light .mixer button,
  body.booth-light .mixer-toolbar button{transition:none !important}
}

/* ============================================================
   ACCESSIBILITY LAYER — keyboard focus, reduced-motion,
   high-contrast support. Append-only so existing styling is
   not affected.
   ============================================================ */

/* Visible keyboard focus on every interactive control. Mouse
   clicks won't show the ring (focus-visible only triggers from
   keyboard / programmatic focus). */
.dsb-btn:focus-visible,
.tab-btn:focus-visible,
.tool-btn:focus-visible,
.big-btn:focus-visible,
.cue-btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #ff8a1a;
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,138,26,.25);
  z-index:2;
}

/* Honour the OS-level "reduce motion" preference. We turn off
   the heaviest visual effects: vinyl spin, scrolling waveforms,
   pulsing glows. Functionality is unchanged. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Screen-reader only utility — visually hidden but readable
   by assistive tech. Use for icon-only labels we can't move
   inline without breaking the visual layout. */
.sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}

/* ─── Accessibility: skip-link ───────────────────────────────────
   Visible only when focused via keyboard. Lets keyboard / screen-
   reader users jump past the landing chrome straight to the app. */
.skip-link{
  position:fixed;top:-40px;left:8px;z-index:99999;
  padding:8px 16px;background:#ff7a00;color:#000;
  font:700 13px/1.2 'Orbitron',sans-serif;letter-spacing:.08em;
  text-decoration:none;border-radius:0 0 6px 6px;
  transition:top .12s ease;
}
.skip-link:focus{top:0;outline:2px solid #fff;outline-offset:2px;}

/* ─── Utility classes — extracted from repeated inline styles ─────
   Each `.u-*` class replaces an inline style="…" attribute that was
   duplicated 5+ times across index.html. Reduces HTML size, allows
   browser caching of the styling, and is a step toward removing
   'unsafe-inline' from the CSP. */
.u-text-amber{color:#ffd089}
.u-text-blue{color:#aac4ff}
.u-text-purple{color:#e0a8ff}
.u-text-green{color:#9ad8b0}
.u-text-orange-soft{color:#ffd28a}
.u-text-pink{color:#ffb0c0}
.u-text-skyblue{color:#9ed8ff}
.u-text-screen{color:var(--screen-glow)}
.u-hidden{display:none}
.u-pad-row{padding:8px 12px}
.u-pad-bottom{padding-bottom:8px}
.u-mb-6{margin-bottom:6px}
.u-min-w-32{min-width:32px}
.u-spacer-line{width:6px;height:1px;background:rgba(255,255,255,.15)}
.u-flex-col-stretch{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.u-card-dark{background:#0a0a0c;border:1px solid #2a2a2e;border-radius:10px;padding:12px 14px}
.u-list-clean{list-style:none;padding:0;margin:10px 0 0 0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.45;color:#cfe6d8}
.u-tag-orange{background:var(--orange);color:#000;padding:1px 5px;border-radius:3px}

/* ============================================================
   TITAN LANDING — extended sections (showcase, flow, sounds,
   testimonials, FAQ, final CTA). Pure CSS mockups, no images.
   ============================================================ */
#titan-landing .tl-section-head{text-align:center;margin-bottom:clamp(28px,3.4vw,44px);max-width:760px;margin-left:auto;margin-right:auto}
#titan-landing .tl-section-head h2{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(28px,4.4vw,46px);line-height:1.05;letter-spacing:1px;color:#fff;margin:14px 0 12px;text-transform:uppercase;text-wrap:balance}
#titan-landing .tl-section-head h2 em{font-style:normal;background:linear-gradient(135deg,#ff7a00,#ffb347 60%,#ffd49a);-webkit-background-clip:text;background-clip:text;color:transparent}
#titan-landing .tl-section-head p{font-size:clamp(14px,1.3vw,16px);color:#9a9a9e;line-height:1.6;text-wrap:pretty}
#titan-landing .tl-eyebrow-cyan{color:#00d4ff;border-color:rgba(0,212,255,.4);background:rgba(0,212,255,.06)}
#titan-landing .tl-eyebrow-cyan::before{background:#00d4ff;box-shadow:0 0 8px #00d4ff}
#titan-landing .tl-eyebrow-magenta{color:#d680ff;border-color:rgba(200,0,255,.4);background:rgba(200,0,255,.06)}
#titan-landing .tl-eyebrow-magenta::before{background:#d680ff;box-shadow:0 0 8px #d680ff}
#titan-landing .tl-eyebrow-green{color:#5cf0a0;border-color:rgba(92,240,160,.4);background:rgba(92,240,160,.06)}
#titan-landing .tl-eyebrow-green::before{background:#5cf0a0;box-shadow:0 0 8px #5cf0a0}

/* ── Showcase / hardware ───────────────────────────────────── */
#titan-landing .tl-showcase{margin-bottom:clamp(56px,7vw,96px)}
#titan-landing .tl-gear-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
#titan-landing .tl-gear{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:18px;padding:clamp(20px,2.4vw,28px);position:relative;overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
#titan-landing .tl-gear::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,122,0,.4),transparent 35%,transparent 65%,rgba(0,212,255,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}
#titan-landing .tl-gear:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 40px rgba(255,122,0,.1)}
#titan-landing .tl-gear:hover::before{opacity:1}
#titan-landing .tl-gear h3{font-family:'Orbitron',sans-serif;font-size:18px;letter-spacing:2px;color:#fff;margin:18px 0 4px;text-transform:uppercase}
#titan-landing .tl-gear-tag{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;color:#ff7a00;text-transform:uppercase;margin-bottom:14px}
#titan-landing .tl-gear-mixer .tl-gear-tag{color:#00d4ff}
#titan-landing .tl-gear-sound .tl-gear-tag{color:#5cf0a0}
#titan-landing .tl-gear-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
#titan-landing .tl-gear-list li{font-size:13.5px;line-height:1.5;color:#b8b8bc;padding-left:18px;position:relative}
#titan-landing .tl-gear-list li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#ff7a00,#ffb347);box-shadow:0 0 8px rgba(255,122,0,.5)}
#titan-landing .tl-gear-mixer .tl-gear-list li::before{background:linear-gradient(135deg,#00d4ff,#7fefff);box-shadow:0 0 8px rgba(0,212,255,.5)}
#titan-landing .tl-gear-sound .tl-gear-list li::before{background:linear-gradient(135deg,#5cf0a0,#00d074);box-shadow:0 0 8px rgba(92,240,160,.5)}
#titan-landing .tl-gear-list li b{color:#fff;font-weight:700}
#titan-landing .tl-gear-mock{position:relative;height:clamp(280px,28vw,360px);min-height:clamp(280px,28vw,360px);border-radius:12px;background:linear-gradient(135deg,#1a1a1c,#0a0a0b);border:1px solid #2a2a2e;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 0 30px rgba(0,0,0,.5)}
#titan-landing .tl-gear-mock::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(255,255,255,.015) 12px 13px);pointer-events:none}

/* ── Deck mockup (grid with named areas) ──────────────────── */
#titan-landing .tl-deck-mock{padding:12px 14px;display:grid;grid-template-areas:"head head head" "screen screen screen" "jog pads pitch" "jog transport pitch";grid-template-columns:1.05fr 1fr 32px;grid-template-rows:auto minmax(56px,30%) 1fr auto;gap:8px 10px}
#titan-landing .tl-dm-head{grid-area:head;display:flex;justify-content:space-between;align-items:center;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#7a7a7e}
#titan-landing .tl-dm-tag{color:#ff7a00;font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:3px;font-size:10px}
#titan-landing .tl-dm-tag b{color:#5a5a5e;font-weight:400}
#titan-landing .tl-dm-deck{padding:2px 6px;background:#050506;border:1px solid #2a2a2e;border-radius:3px;color:#ffb347}
#titan-landing .tl-dm-leds{display:flex;gap:4px}
#titan-landing .tl-dm-leds i{width:5px;height:5px;border-radius:50%;background:#ff7a00;box-shadow:0 0 6px #ff7a00;animation:tlBlink 1.6s infinite}
#titan-landing .tl-dm-leds i:nth-child(2){background:#00ff7a;box-shadow:0 0 6px #00ff7a;animation-delay:.4s}
#titan-landing .tl-dm-leds i:nth-child(3){background:#00d4ff;box-shadow:0 0 6px #00d4ff;animation-delay:.8s}
#titan-landing .tl-dm-screen{grid-area:screen;background:radial-gradient(ellipse at 30% 20%,#02141a 0%,#000 80%);border:1px solid #1a3340;border-radius:6px;padding:6px 10px;box-shadow:inset 0 0 18px rgba(0,212,255,.12);min-height:56px;display:grid;grid-template-areas:"bpm key" "wave wave" "meta meta";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;gap:2px 6px}
#titan-landing .tl-dm-bpm{grid-area:bpm;font-family:'Orbitron',sans-serif;color:#7fefff;letter-spacing:1px;line-height:1}
#titan-landing .tl-dm-bpm b{font-size:18px;font-weight:900;text-shadow:0 0 8px rgba(127,239,255,.7)}
#titan-landing .tl-dm-bpm span{font-size:8px;color:#00d4ff;letter-spacing:2px;display:block;margin-top:2px}
#titan-landing .tl-dm-key{grid-area:key;justify-self:end;align-self:start;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:#ffb347;text-shadow:0 0 6px rgba(255,179,71,.6)}
#titan-landing .tl-dm-wave{grid-area:wave;align-self:end;display:flex;align-items:flex-end;justify-content:space-between;gap:1px;height:100%;min-height:18px}
#titan-landing .tl-dm-wave span{flex:1;background:linear-gradient(to top,#ff7a00,#ffb347);border-radius:1px;animation:tlBars 1.1s ease-in-out infinite alternate;transform-origin:bottom;height:30%}
#titan-landing .tl-dm-wave span:nth-child(3n){background:linear-gradient(to top,#00d4ff,#7fefff);height:60%;animation-delay:.1s}
#titan-landing .tl-dm-wave span:nth-child(5n){height:80%;animation-delay:.2s}
#titan-landing .tl-dm-wave span:nth-child(7n){background:linear-gradient(to top,#ffd400,#ffb347);height:50%;animation-delay:.3s}
#titan-landing .tl-dm-wave span:nth-child(11n){height:90%;background:linear-gradient(to top,#ff7a00,#ffd400);animation-delay:.5s}
#titan-landing .tl-dm-meta{grid-area:meta;display:flex;justify-content:space-between;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2px;color:#5a8aa0}
#titan-landing .tl-dm-meta span:last-child{color:#5cf0a0}
#titan-landing .tl-dm-jog{grid-area:jog;position:relative;aspect-ratio:1;height:100%;width:auto;max-width:100%;justify-self:center;align-self:center;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3a3a3e 0%,#0a0a0b 75%);border:3px solid #1a1a1c;box-shadow:0 8px 24px rgba(0,0,0,.7),inset 0 0 30px rgba(0,0,0,.7)}
#titan-landing .tl-dm-ring{position:absolute;inset:6%;border-radius:50%;border:1px dashed rgba(255,122,0,.45);animation:tlSpin 8s linear infinite}
#titan-landing .tl-dm-disc{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffa544 0%,#ff5a00 60%,#5a2200 100%);box-shadow:0 0 20px rgba(255,122,0,.55),inset 0 -4px 10px rgba(0,0,0,.6);animation:tlSpin 6s linear infinite}
#titan-landing .tl-dm-arm{position:absolute;top:8%;left:50%;width:1px;height:42%;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);transform-origin:top center;animation:tlSpin 6s linear infinite}
#titan-landing .tl-dm-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.9);z-index:2}
#titan-landing .tl-dm-pads{grid-area:pads;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:4px;align-self:center;justify-self:stretch;width:100%;min-height:0}
#titan-landing .tl-dm-pads i{aspect-ratio:1;border-radius:3px;background:linear-gradient(180deg,#1a1a1c,#0a0a0b);border:1px solid #2a2a2e;box-shadow:inset 0 0 6px rgba(0,0,0,.6)}
#titan-landing .tl-dm-pads i:nth-child(1){background:linear-gradient(180deg,rgba(255,122,0,.55),rgba(120,40,0,.7));box-shadow:0 0 8px rgba(255,122,0,.45)}
#titan-landing .tl-dm-pads i:nth-child(3){background:linear-gradient(180deg,rgba(0,212,255,.55),rgba(0,60,90,.7));box-shadow:0 0 8px rgba(0,212,255,.45)}
#titan-landing .tl-dm-pads i:nth-child(6){background:linear-gradient(180deg,rgba(0,255,122,.55),rgba(0,80,40,.7));box-shadow:0 0 8px rgba(0,255,122,.45)}
#titan-landing .tl-dm-pads i:nth-child(8){background:linear-gradient(180deg,rgba(255,212,0,.55),rgba(110,90,0,.7));box-shadow:0 0 8px rgba(255,212,0,.45)}
#titan-landing .tl-dm-transport{grid-area:transport;display:flex;justify-content:center;align-self:end;gap:6px;font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;color:#fff}
#titan-landing .tl-dm-transport span{padding:5px 10px;border-radius:3px;background:#0a0a0b;border:1px solid #2a2a2e}
#titan-landing .tl-dm-play{background:linear-gradient(180deg,#00ff7a,#00a858) !important;color:#000 !important;border-color:#00ff7a !important;box-shadow:0 0 8px rgba(0,255,122,.5)}
#titan-landing .tl-dm-cue{color:#ff7a00 !important;border-color:rgba(255,122,0,.5) !important}
#titan-landing .tl-dm-pitch{grid-area:pitch;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;align-self:stretch;padding:14px 0 4px;background:linear-gradient(180deg,#0a0a0b,#050506);border:1px solid #1f1f23;border-radius:4px;box-shadow:inset 0 0 6px rgba(0,0,0,.6);min-height:0}
#titan-landing .tl-dm-pitch::before{content:'PITCH';position:absolute;top:3px;left:0;right:0;text-align:center;font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:1.5px;color:#5a5a5e}
#titan-landing .tl-dm-pitch-track{position:absolute;left:50%;top:14px;bottom:18px;width:2px;background:linear-gradient(180deg,#1a1a1c,#0a0a0b);border-radius:1px;transform:translateX(-50%);border:1px solid #2a2a2e}
#titan-landing .tl-dm-pitch-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:6px;border-radius:2px;background:linear-gradient(180deg,#3a3a3e,#1a1a1c);border:1px solid #4a4a4e;box-shadow:0 0 6px rgba(255,122,0,.4)}
#titan-landing .tl-dm-pitch span{font-family:'Share Tech Mono',monospace;font-size:7px;color:#ff7a00;letter-spacing:1px;position:relative;z-index:1;margin-top:2px;text-shadow:0 0 4px rgba(255,122,0,.5)}

/* ── Mixer mockup (grid with named areas) ─────────────────── */
#titan-landing .tl-mixer-mock{padding:14px 14px 12px;display:grid;grid-template-areas:"head" "strips" "master";grid-template-rows:auto 1fr auto;gap:8px;min-height:0}
#titan-landing .tl-mm-head{grid-area:head;display:flex;justify-content:space-between;align-items:center;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:#7a7a7e;text-transform:uppercase}
#titan-landing .tl-mm-tag{color:#00d4ff;font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:3px;font-size:10px}
#titan-landing .tl-mm-tag b{color:#5a5a5e;font-weight:400;margin:0 2px}
#titan-landing .tl-mm-strip-row{grid-area:strips;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;min-height:0}
#titan-landing .tl-mm-strip{position:relative;background:linear-gradient(180deg,#0a0a0b,#050506);border:1px solid #1f1f23;border-top:2px solid var(--ch);border-radius:5px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:inset 0 0 10px rgba(0,0,0,.6)}
#titan-landing .tl-mm-label{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:2px;color:var(--ch);font-weight:800;text-shadow:0 0 6px var(--ch)}
#titan-landing .tl-mm-knob{display:block;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3a3a3e,#0a0a0b);border:1px solid #2a2a2e;box-shadow:inset 0 0 6px rgba(0,0,0,.7);position:relative}
#titan-landing .tl-mm-knob::after{content:'';position:absolute;left:50%;top:14%;width:2px;height:30%;border-radius:1px;background:var(--ch);box-shadow:0 0 4px var(--ch);transform:translateX(-50%) rotate(-30deg);transform-origin:bottom}
#titan-landing .tl-mm-strip:nth-child(2) .tl-mm-knob::after{transform:translateX(-50%) rotate(20deg)}
#titan-landing .tl-mm-strip:nth-child(3) .tl-mm-knob::after{transform:translateX(-50%) rotate(45deg)}
#titan-landing .tl-mm-strip:nth-child(4) .tl-mm-knob::after{transform:translateX(-50%) rotate(-50deg)}
#titan-landing .tl-mm-fx{display:block;width:80%;height:6px;border-radius:2px;background:linear-gradient(90deg,#0a0a0b,var(--ch),#0a0a0b);box-shadow:0 0 6px var(--ch);opacity:.7;margin-top:2px}
#titan-landing .tl-mm-fader{position:relative;width:8px;flex:1;background:linear-gradient(180deg,#1a1a1c,#0a0a0b);border-radius:3px;border:1px solid #2a2a2e;box-shadow:inset 0 0 4px rgba(0,0,0,.7);margin-top:4px;min-height:50px}
#titan-landing .tl-mm-fader i{position:absolute;left:-4px;width:16px;height:8px;border-radius:2px;background:linear-gradient(180deg,#4a4a4e,#1a1a1c);border:1px solid var(--ch);box-shadow:0 0 6px var(--ch),inset 0 0 2px rgba(255,255,255,.2)}
#titan-landing .tl-mm-vu{width:80%;height:5px;background:#050506;border:1px solid #1a1a1c;border-radius:1px;overflow:hidden;display:flex;align-items:flex-end;margin-top:2px}
#titan-landing .tl-mm-vu span{width:100%;background:linear-gradient(90deg,#00ff7a 0%,#ffd400 70%,#ff3c3c 100%);box-shadow:0 0 6px var(--ch);animation:tlVu 1.2s ease-in-out infinite alternate;transform:scaleX(1);transform-origin:left;height:100%}
#titan-landing .tl-mm-master{grid-area:master;background:linear-gradient(180deg,#0a0a0b,#020203);border:1px solid #1f1f23;border-radius:5px;padding:6px 8px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
#titan-landing .tl-mm-master span{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:2px;color:#fff;font-weight:700}
#titan-landing .tl-mm-cross{position:relative;height:8px;background:linear-gradient(90deg,#ff7a00,#0a0a0b 50%,#00d4ff);border-radius:4px;box-shadow:inset 0 0 4px rgba(0,0,0,.7)}
#titan-landing .tl-mm-cross-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:3px;background:linear-gradient(180deg,#4a4a4e,#1a1a1c);border:1px solid #5a5a5e;box-shadow:0 0 6px rgba(255,255,255,.25)}
#titan-landing .tl-mm-master-vu{display:flex;gap:2px}
#titan-landing .tl-mm-master-vu i{width:4px;height:10px;background:linear-gradient(to top,#00ff7a,#00ff7a);border-radius:1px;box-shadow:0 0 4px rgba(0,255,122,.6)}
#titan-landing .tl-mm-master-vu i:nth-child(n+7){background:linear-gradient(to top,#ffd400,#ffd400);box-shadow:0 0 4px rgba(255,212,0,.6)}
#titan-landing .tl-mm-master-vu i:nth-child(n+9){background:linear-gradient(to top,#ff3c3c,#ff3c3c);box-shadow:0 0 4px rgba(255,60,60,.6);opacity:.4}

/* ── Sound mockup (grid with named areas) ─────────────────── */
#titan-landing .tl-sound-mock{padding:14px;display:grid;grid-template-areas:"head" "osc" "bands" "rack";grid-template-rows:auto auto 1fr auto;gap:8px;min-height:0}
#titan-landing .tl-sm-head{grid-area:head;display:flex;justify-content:space-between;align-items:center;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:#7a7a7e;text-transform:uppercase}
#titan-landing .tl-sm-tag{color:#5cf0a0;font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:4px;font-size:11px;text-shadow:0 0 8px rgba(92,240,160,.4)}
#titan-landing .tl-sm-led{width:8px;height:8px;border-radius:50%;background:#5cf0a0;box-shadow:0 0 8px #5cf0a0,0 0 14px rgba(92,240,160,.6);animation:tlBlink 1.4s infinite}
#titan-landing .tl-sm-osc{grid-area:osc;min-height:clamp(40px,6vw,60px);background:radial-gradient(ellipse at 50% 50%,rgba(92,240,160,.06) 0%,#000 80%);border:1px solid #1a3a26;border-radius:5px;overflow:hidden;position:relative;box-shadow:inset 0 0 16px rgba(0,0,0,.7)}
#titan-landing .tl-sm-osc::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(92,240,160,.18);box-shadow:0 0 4px rgba(92,240,160,.3)}
#titan-landing .tl-sm-osc svg{width:100%;height:100%}
#titan-landing .tl-sm-osc path{fill:none;stroke:#5cf0a0;stroke-width:1.4;filter:drop-shadow(0 0 4px rgba(92,240,160,.7));animation:tlOscPhase 4s linear infinite}
#titan-landing .tl-sm-osc-2{stroke:#7fefff !important;opacity:.55;animation-duration:6s !important;animation-direction:reverse !important}
@keyframes tlOscPhase{0%{transform:translateX(0)}100%{transform:translateX(-12%)}}
#titan-landing .tl-sm-bands{grid-area:bands;display:grid;grid-template-columns:repeat(10,1fr);gap:3px;align-items:end;padding:4px 0;background:#02080a;border:1px solid #1a3a26;border-radius:5px;box-shadow:inset 0 0 12px rgba(0,0,0,.6);min-height:0}
#titan-landing .tl-sm-bands > div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px;padding:2px 0}
#titan-landing .tl-sm-bands i{display:block;width:60%;background:linear-gradient(to top,#00d074 0%,#5cf0a0 60%,#7fefff 100%);border-radius:1px;box-shadow:0 0 4px rgba(92,240,160,.4);animation:tlBars 1.3s ease-in-out infinite alternate;transform-origin:bottom}
#titan-landing .tl-sm-bands > div:nth-child(2n) i{animation-delay:.15s}
#titan-landing .tl-sm-bands > div:nth-child(3n) i{animation-delay:.3s}
#titan-landing .tl-sm-bands > div:nth-child(5n) i{animation-delay:.45s}
#titan-landing .tl-sm-bands span{font-family:'Share Tech Mono',monospace;font-size:7px;color:#5a8a72;letter-spacing:.5px}
#titan-landing .tl-sm-rack{grid-area:rack;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#titan-landing .tl-sm-mod{background:linear-gradient(180deg,#0a0a0b,#050506);border:1px solid #1f1f23;border-radius:4px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
#titan-landing .tl-sm-mod span{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1.5px;color:#5cf0a0;font-weight:800}
#titan-landing .tl-sm-mod i{display:block;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3a3a3e,#0a0a0b);border:1px solid #2a2a2e;box-shadow:inset 0 0 4px rgba(0,0,0,.7);position:relative}
#titan-landing .tl-sm-mod i::after{content:'';position:absolute;left:50%;top:14%;width:2px;height:36%;border-radius:1px;background:#5cf0a0;box-shadow:0 0 4px #5cf0a0;transform:translateX(-50%) rotate(-20deg);transform-origin:bottom}
#titan-landing .tl-sm-mod:nth-child(2) i::after{transform:translateX(-50%) rotate(20deg)}
#titan-landing .tl-sm-mod:nth-child(3) i::after{transform:translateX(-50%) rotate(45deg)}
#titan-landing .tl-sm-mod:nth-child(4) i::after{transform:translateX(-50%) rotate(-45deg)}

/* ── Workflow ─────────────────────────────────────────────── */
#titan-landing .tl-flow{margin-bottom:clamp(56px,7vw,96px)}
#titan-landing .tl-flow-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);counter-reset:none}
#titan-landing .tl-step{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:14px;padding:clamp(18px,2vw,24px);transition:transform .25s ease,border-color .25s ease,background .25s ease}
#titan-landing .tl-step:hover{transform:translateY(-4px);border-color:rgba(200,0,255,.45);background:linear-gradient(180deg,rgba(200,0,255,.04),rgba(255,255,255,0))}
#titan-landing .tl-step-num{font-family:'Orbitron',sans-serif;font-weight:900;font-size:34px;letter-spacing:1px;background:linear-gradient(135deg,#c800ff,#7a00b8);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:10px;line-height:1}
#titan-landing .tl-step h3{font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:2px;color:#fff;margin-bottom:8px;text-transform:uppercase}
#titan-landing .tl-step p{font-size:13.5px;line-height:1.55;color:#9a9a9e}
#titan-landing .tl-step:not(:last-child)::after{content:'→';position:absolute;top:50%;right:-18px;transform:translateY(-50%);font-family:'Orbitron',sans-serif;font-size:18px;color:rgba(200,0,255,.5);z-index:2}

/* ── Sound library / genres ──────────────────────────────── */
#titan-landing .tl-sounds{margin-bottom:clamp(56px,7vw,96px)}
#titan-landing .tl-sound-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
#titan-landing .tl-sound-chip{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid #1f1f23;border-radius:12px;padding:16px 18px;transition:transform .2s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;overflow:hidden}
#titan-landing .tl-sound-chip::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);box-shadow:0 0 10px var(--c)}
#titan-landing .tl-sound-chip::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 0% 0%,color-mix(in srgb,var(--c) 18%,transparent) 0%,transparent 60%);opacity:0;transition:opacity .25s ease;pointer-events:none}
#titan-landing .tl-sound-chip:hover{transform:translateY(-3px);border-color:var(--c);box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 22px color-mix(in srgb,var(--c) 25%,transparent)}
#titan-landing .tl-sound-chip:hover::after{opacity:1}
#titan-landing .tl-sound-chip b{display:block;font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:1.5px;color:#fff;font-weight:800;text-transform:uppercase;margin-bottom:4px}
#titan-landing .tl-sound-chip span{display:block;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.5px;color:var(--c);text-transform:uppercase}

/* ── Testimonials ────────────────────────────────────────── */
#titan-landing .tl-voices{margin-bottom:clamp(56px,7vw,96px)}
#titan-landing .tl-voices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
#titan-landing .tl-voice{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:14px;padding:24px;margin:0;position:relative;transition:transform .25s ease,border-color .25s ease}
#titan-landing .tl-voice:hover{transform:translateY(-4px);border-color:rgba(255,122,0,.45)}
#titan-landing .tl-voice::before{content:'\201C';position:absolute;top:6px;left:14px;font-family:'Orbitron',sans-serif;font-size:48px;line-height:1;color:rgba(255,122,0,.35)}
#titan-landing .tl-voice blockquote{font-size:14.5px;line-height:1.6;color:#d8d8de;margin:0 0 14px;padding-top:18px;font-style:italic}
#titan-landing .tl-voice figcaption{display:flex;flex-direction:column;gap:2px;border-top:1px solid #1f1f23;padding-top:10px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase}
#titan-landing .tl-voice figcaption b{color:#ff7a00;font-weight:700}
#titan-landing .tl-voice figcaption span{color:#7a7a7e}

/* ── FAQ ─────────────────────────────────────────────────── */
#titan-landing .tl-faq{margin-bottom:clamp(48px,6vw,80px);max-width:880px;margin-left:auto;margin-right:auto}
#titan-landing .tl-faq-list{display:flex;flex-direction:column;gap:10px}
#titan-landing .tl-faq-item{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:12px;padding:0 20px;transition:border-color .2s ease,background .2s ease}
#titan-landing .tl-faq-item[open]{border-color:rgba(0,212,255,.4);background:linear-gradient(180deg,rgba(0,212,255,.04),rgba(255,255,255,0))}
#titan-landing .tl-faq-item summary{list-style:none;cursor:pointer;font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;letter-spacing:1.5px;color:#fff;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;text-transform:uppercase}
#titan-landing .tl-faq-item summary::-webkit-details-marker{display:none}
#titan-landing .tl-faq-item summary::after{content:'+';font-family:'Orbitron',sans-serif;font-weight:900;font-size:22px;color:#00d4ff;transition:transform .25s ease;flex:0 0 auto}
#titan-landing .tl-faq-item[open] summary::after{transform:rotate(45deg)}
#titan-landing .tl-faq-item p{font-size:14px;line-height:1.65;color:#b8b8bc;padding:0 0 18px;margin:0;max-width:760px}

/* ── Final CTA ───────────────────────────────────────────── */
#titan-landing .tl-final{margin-bottom:clamp(40px,5vw,64px)}
#titan-landing .tl-final-card{position:relative;background:linear-gradient(135deg,rgba(255,122,0,.1) 0%,rgba(0,212,255,.06) 100%);border:1px solid rgba(255,122,0,.35);border-radius:20px;padding:clamp(34px,5vw,56px) clamp(22px,4vw,48px);text-align:center;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 50px rgba(255,122,0,.08)}
#titan-landing .tl-final-card::before{content:'';position:absolute;top:-40%;left:-10%;width:50%;height:180%;background:radial-gradient(ellipse at center,rgba(255,122,0,.18),transparent 60%);pointer-events:none}
#titan-landing .tl-final-card::after{content:'';position:absolute;top:-20%;right:-10%;width:40%;height:140%;background:radial-gradient(ellipse at center,rgba(0,212,255,.12),transparent 60%);pointer-events:none}
#titan-landing .tl-final-card > *{position:relative;z-index:1}
#titan-landing .tl-final-card h2{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(28px,4.4vw,46px);line-height:1.05;letter-spacing:1px;color:#fff;margin:14px 0 12px;text-transform:uppercase}
#titan-landing .tl-final-card h2 em{font-style:normal;background:linear-gradient(135deg,#ff7a00,#ffb347 60%,#ffd49a);-webkit-background-clip:text;background-clip:text;color:transparent}
#titan-landing .tl-final-card p{font-size:clamp(14px,1.3vw,16px);color:#c8c8cc;line-height:1.6;margin:0 auto 26px;max-width:520px}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:1024px){
  #titan-landing .tl-gear-grid,
  #titan-landing .tl-flow-grid,
  #titan-landing .tl-voices-grid{grid-template-columns:repeat(2,1fr)}
  #titan-landing .tl-sound-grid{grid-template-columns:repeat(3,1fr)}
  #titan-landing .tl-step:nth-child(2):not(:last-child)::after,
  #titan-landing .tl-step:nth-child(4):not(:last-child)::after{display:none}
}
@media (max-width:720px){
  #titan-landing .tl-gear-grid,
  #titan-landing .tl-flow-grid,
  #titan-landing .tl-voices-grid{grid-template-columns:1fr}
  #titan-landing .tl-sound-grid{grid-template-columns:repeat(2,1fr)}
  #titan-landing .tl-step:not(:last-child)::after{display:none}
  #titan-landing .tl-faq-item{padding:0 16px}
  #titan-landing .tl-faq-item summary{font-size:13px;padding:14px 0}
  #titan-landing .tl-gear-mock{height:clamp(300px,52vw,420px);min-height:clamp(300px,52vw,420px)}
  #titan-landing .tl-deck-mock{grid-template-rows:auto minmax(54px,28%) 1fr auto;gap:6px;padding:10px 12px}
  #titan-landing .tl-mixer-mock,
  #titan-landing .tl-sound-mock{padding:12px;gap:6px}
}
@media (max-width:420px){
  #titan-landing .tl-sound-grid{grid-template-columns:1fr}
}
@media (max-width:380px){
  #titan-landing .tl-deck-mock{grid-template-areas:"head head" "screen screen" "jog pads" "jog transport";grid-template-columns:1.05fr 1fr;gap:6px 8px}
  #titan-landing .tl-dm-pitch{display:none}
}

/* ============================================================
   TITAN LANDING — phase 2: vinyl, lab, views, quality, install,
   plus club-grade credibility band.
   ============================================================ */

/* ── Club-grade credibility band ─────────────────────────── */
#titan-landing .tl-grade{margin:clamp(28px,4vw,48px) 0 clamp(56px,7vw,96px)}
#titan-landing .tl-grade-card{position:relative;background:linear-gradient(135deg,rgba(255,122,0,.08) 0%,rgba(0,212,255,.06) 50%,rgba(200,0,255,.06) 100%);border:1px solid rgba(255,122,0,.3);border-radius:20px;padding:clamp(28px,4vw,48px) clamp(22px,4vw,52px);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
#titan-landing .tl-grade-card::before{content:'';position:absolute;top:-30%;right:-5%;width:35%;height:160%;background:radial-gradient(ellipse at center,rgba(255,122,0,.18),transparent 60%);pointer-events:none}
#titan-landing .tl-grade-card::after{content:'';position:absolute;bottom:-30%;left:-5%;width:35%;height:160%;background:radial-gradient(ellipse at center,rgba(0,212,255,.14),transparent 60%);pointer-events:none}
#titan-landing .tl-grade-card > *{position:relative;z-index:1}
#titan-landing .tl-grade-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:4px;color:#ff7a00;border:1px solid rgba(255,122,0,.45);padding:8px 14px;border-radius:99px;background:rgba(255,122,0,.08);margin-bottom:18px;text-transform:uppercase}
#titan-landing .tl-grade-pulse{width:8px;height:8px;border-radius:50%;background:#ff7a00;box-shadow:0 0 10px #ff7a00;animation:tlPulseRing 2s infinite}
#titan-landing .tl-grade-card h2{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(26px,3.8vw,40px);line-height:1.08;letter-spacing:1px;color:#fff;margin:0 0 14px;text-transform:uppercase;text-wrap:balance}
#titan-landing .tl-grade-card h2 em{font-style:normal;background:linear-gradient(135deg,#ff7a00,#ffb347 60%,#ffd49a);-webkit-background-clip:text;background-clip:text;color:transparent}
#titan-landing .tl-grade-lead{font-size:clamp(14px,1.3vw,16px);line-height:1.65;color:#d8d8de;margin:0 0 24px;max-width:880px}
#titan-landing .tl-grade-rows{display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.25);border:1px solid #1f1f23;border-radius:12px;padding:6px;margin-bottom:18px;overflow:hidden}
#titan-landing .tl-grade-row{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:8px;align-items:center;padding:10px 14px;background:rgba(255,255,255,.015);border-radius:8px;transition:background .2s ease}
#titan-landing .tl-grade-row:hover{background:rgba(255,122,0,.04)}
#titan-landing .tl-grade-cell{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1.5px;color:#9a9a9e;text-transform:uppercase}
#titan-landing .tl-grade-cell b{color:#3a3a3e;font-weight:400;margin:0 4px}
#titan-landing .tl-grade-feature{color:#fff;font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.5px}
#titan-landing .tl-grade-club{color:#7a7a7e}
#titan-landing .tl-grade-titan{color:#5cf0a0;font-weight:600}
#titan-landing .tl-grade-titan b{color:rgba(92,240,160,.4)}
#titan-landing .tl-grade-foot{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;color:#9a9a9e;text-transform:uppercase;text-align:center;margin:0;padding-top:8px;border-top:1px dashed rgba(255,122,0,.2)}

/* ── TITAN VINYL turntable ──────────────────────────────── */
#titan-landing .tl-vinyl{margin-bottom:clamp(56px,7vw,96px)}
#titan-landing .tl-vinyl-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,40px);align-items:center}
#titan-landing .tl-vinyl-mock{position:relative;aspect-ratio:5/4;border-radius:18px;background:linear-gradient(135deg,#1a1a1c 0%,#0a0a0b 100%);border:1px solid #2a2a2e;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.65),inset 0 0 60px rgba(0,0,0,.5);padding:24px}
#titan-landing .tl-vinyl-mock::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,122,0,.1) 0%,transparent 60%);pointer-events:none}
#titan-landing .tl-vn-deck{position:relative;width:100%;height:100%;background:linear-gradient(180deg,#202024 0%,#0a0a0b 100%);border:1px solid #2a2a2e;border-radius:10px;box-shadow:inset 0 0 30px rgba(0,0,0,.7),0 8px 30px rgba(0,0,0,.6);overflow:hidden}
#titan-landing .tl-vn-platter{position:absolute;left:6%;top:8%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#1a1a1c 0%,#020203 80%);border:2px solid #1a1a1c;box-shadow:0 14px 30px rgba(0,0,0,.7),inset 0 0 30px rgba(0,0,0,.85);animation:tlSpin 4s linear infinite}
#titan-landing .tl-vn-rings{position:absolute;inset:4%;border-radius:50%;border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
#titan-landing .tl-vn-rings::before,
#titan-landing .tl-vn-rings::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.025)}
#titan-landing .tl-vn-rings::before{inset:8%}
#titan-landing .tl-vn-rings::after{inset:18%}
#titan-landing .tl-vn-grooves{position:absolute;inset:6%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 2px,rgba(255,255,255,.02) 2px 3px);pointer-events:none}
#titan-landing .tl-vn-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ff7a00 0%,#c84a00 80%);box-shadow:inset 0 -4px 10px rgba(0,0,0,.4),0 0 18px rgba(255,122,0,.4);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:6%}
#titan-landing .tl-vn-label-top{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;color:#000;font-weight:900}
#titan-landing .tl-vn-label-mid{font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:2px;color:#fff;font-weight:900;margin:2px 0;text-shadow:0 1px 0 rgba(0,0,0,.3)}
#titan-landing .tl-vn-label-bot{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:1.5px;color:rgba(0,0,0,.7);text-transform:uppercase}
#titan-landing .tl-vn-spindle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8%;height:8%;border-radius:50%;background:radial-gradient(circle,#5a5a5e,#1a1a1c);border:1px solid #3a3a3e;box-shadow:inset 0 0 4px rgba(0,0,0,.7)}
#titan-landing .tl-vn-shine{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 30% 25%,rgba(255,255,255,.1) 0%,transparent 35%);pointer-events:none}
#titan-landing .tl-vn-arm{position:absolute;right:8%;top:6%;width:34%;height:60%;pointer-events:none}
#titan-landing .tl-vn-arm-base{position:absolute;right:0;top:0;width:24%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#3a3a3e,#0a0a0b);border:1px solid #2a2a2e;box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 0 6px rgba(0,0,0,.7)}
#titan-landing .tl-vn-arm-base::after{content:'';position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,#5a5a5e,#1a1a1c);box-shadow:inset 0 0 4px rgba(255,122,0,.4)}
#titan-landing .tl-vn-arm-shaft{position:absolute;right:10%;top:10%;width:1px;height:80%;background:linear-gradient(180deg,#5a5a5e,#2a2a2e);transform-origin:top right;transform:rotate(-30deg);box-shadow:1px 0 2px rgba(0,0,0,.6);width:3px;border-radius:2px}
#titan-landing .tl-vn-arm-head{position:absolute;right:10%;top:10%;width:14%;height:8%;border-radius:2px;background:linear-gradient(180deg,#3a3a3e,#1a1a1c);border:1px solid #2a2a2e;transform-origin:top right;transform:rotate(-30deg) translate(0,68%);box-shadow:0 2px 4px rgba(0,0,0,.6)}
#titan-landing .tl-vn-arm-needle{position:absolute;right:10%;top:10%;width:2px;height:6%;background:linear-gradient(180deg,#ff7a00,#a04000);box-shadow:0 0 8px #ff7a00;transform-origin:top right;transform:rotate(-30deg) translate(0,800%);border-radius:1px}
#titan-landing .tl-vn-startstop{position:absolute;left:6%;bottom:8%;display:flex;flex-direction:column;gap:4px;font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1.5px;font-weight:800}
#titan-landing .tl-vn-start{padding:6px 10px;background:linear-gradient(180deg,#00ff7a,#00a858);color:#000;border-radius:4px;box-shadow:0 0 10px rgba(0,255,122,.45),inset 0 1px 0 rgba(255,255,255,.3);text-align:center}
#titan-landing .tl-vn-stop{padding:6px 10px;background:linear-gradient(180deg,#1a1a1c,#0a0a0b);color:#ff5a5a;border:1px solid rgba(255,90,90,.4);border-radius:4px;text-align:center}
#titan-landing .tl-vn-pitch{position:absolute;right:6%;bottom:8%;width:30%;height:34%;background:linear-gradient(180deg,#0a0a0b,#020203);border:1px solid #1f1f23;border-radius:6px;padding:8px;box-shadow:inset 0 0 10px rgba(0,0,0,.7)}
#titan-landing .tl-vn-pitch-track{position:absolute;left:50%;top:14%;bottom:30%;width:3px;border-radius:2px;background:linear-gradient(180deg,#1a1a1c,#0a0a0b);transform:translateX(-50%);border:1px solid #2a2a2e}
#titan-landing .tl-vn-pitch-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60%;height:10px;border-radius:3px;background:linear-gradient(180deg,#4a4a4e,#1a1a1c);border:1px solid #ff7a00;box-shadow:0 0 8px rgba(255,122,0,.5),inset 0 1px 0 rgba(255,255,255,.2)}
#titan-landing .tl-vn-pitch-label{position:absolute;top:4px;left:0;right:0;text-align:center;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2px;color:#7a7a7e;text-transform:uppercase}
#titan-landing .tl-vn-pitch-val{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-family:'Orbitron',sans-serif;font-size:10px;color:#ff7a00;font-weight:800;letter-spacing:1px}
#titan-landing .tl-vn-tag{position:absolute;left:50%;top:6%;transform:translateX(-50%);font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:3px;color:#ff7a00;background:#0a0a0b;padding:4px 10px;border:1px solid rgba(255,122,0,.4);border-radius:3px;font-weight:800;white-space:nowrap}
#titan-landing .tl-vn-tag b{color:#5a5a5e;font-weight:400}
#titan-landing .tl-vn-tag span{color:#5a5a5e;font-weight:400;font-family:'Share Tech Mono',monospace;font-size:7px;margin-left:6px}
#titan-landing .tl-vn-led{position:absolute;right:8%;top:18%;display:flex;flex-direction:column;align-items:center;gap:2px}
#titan-landing .tl-vn-led i{width:6px;height:6px;border-radius:50%;background:#ff7a00;box-shadow:0 0 8px #ff7a00;animation:tlBlink 1.4s infinite}
#titan-landing .tl-vn-led i:nth-of-type(2){background:#5a5a5e;box-shadow:none;animation:none}
#titan-landing .tl-vn-led span{font-family:'Share Tech Mono',monospace;font-size:7px;color:#ff7a00;letter-spacing:1px;font-weight:700}
#titan-landing .tl-vn-led span:nth-of-type(2){color:#5a5a5e}
#titan-landing .tl-vinyl-features{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#titan-landing .tl-vinyl-feat{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:12px;padding:18px 18px 16px;transition:transform .2s ease,border-color .2s ease}
#titan-landing .tl-vinyl-feat:hover{transform:translateY(-3px);border-color:rgba(255,122,0,.45)}
#titan-landing .tl-vinyl-ico{display:inline-block;font-size:22px;color:#ff7a00;margin-bottom:8px;text-shadow:0 0 10px rgba(255,122,0,.5)}
#titan-landing .tl-vinyl-feat h4{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:1.5px;color:#fff;margin:0 0 6px;text-transform:uppercase;font-weight:700}
#titan-landing .tl-vinyl-feat p{font-size:13px;line-height:1.55;color:#9a9a9e;margin:0}

/* ── TITAN LAB / SAMPLER ─────────────────────────────────── */
#titan-landing .tl-lab{margin-bottom:clamp(56px,7vw,96px)}
#titan-landing .tl-lab-grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(22px,3vw,40px);align-items:stretch}
#titan-landing .tl-lab-mock{position:relative;background:linear-gradient(135deg,#1a1a1c 0%,#0a0a0b 100%);border:1px solid #2a2a2e;border-radius:14px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.55),inset 0 0 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:14px;min-height:380px}
#titan-landing .tl-lab-head{display:flex;justify-content:space-between;align-items:center;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:#7a7a7e;text-transform:uppercase}
#titan-landing .tl-lab-tag{color:#d680ff;font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:3px;font-size:11px;text-shadow:0 0 8px rgba(200,0,255,.4)}
#titan-landing .tl-lab-tag b{color:#5a5a5e;font-weight:400;margin:0 2px}
#titan-landing .tl-lab-mode{padding:3px 8px;background:#050506;border:1px solid #2a2a2e;border-radius:3px;color:#d680ff}
#titan-landing .tl-lab-rec{display:inline-flex;align-items:center;gap:6px;color:#ff5a5a}
#titan-landing .tl-lab-rec i{width:8px;height:8px;border-radius:50%;background:#ff3c3c;box-shadow:0 0 8px #ff3c3c;animation:tlBlink 1.2s infinite}
#titan-landing .tl-lab-pads{flex:1;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;gap:5px}
#titan-landing .tl-lab-pads i{aspect-ratio:1;border-radius:4px;background:linear-gradient(180deg,#1a1a1c,#0a0a0b);border:1px solid #2a2a2e;box-shadow:inset 0 0 4px rgba(0,0,0,.7)}
#titan-landing .tl-lab-pads i.lp-1{background:linear-gradient(180deg,rgba(255,122,0,.7),rgba(120,40,0,.8));box-shadow:0 0 10px rgba(255,122,0,.5),inset 0 1px 0 rgba(255,255,255,.2);border-color:rgba(255,122,0,.6)}
#titan-landing .tl-lab-pads i.lp-2{background:linear-gradient(180deg,rgba(0,212,255,.7),rgba(0,60,90,.8));box-shadow:0 0 10px rgba(0,212,255,.5);border-color:rgba(0,212,255,.6)}
#titan-landing .tl-lab-pads i.lp-3{background:linear-gradient(180deg,rgba(0,255,122,.7),rgba(0,80,40,.8));box-shadow:0 0 10px rgba(0,255,122,.5);border-color:rgba(0,255,122,.6)}
#titan-landing .tl-lab-pads i.lp-4{background:linear-gradient(180deg,rgba(255,212,0,.7),rgba(110,90,0,.8));box-shadow:0 0 10px rgba(255,212,0,.5);border-color:rgba(255,212,0,.6)}
#titan-landing .tl-lab-pads i.lp-5{background:linear-gradient(180deg,rgba(200,0,255,.7),rgba(80,0,120,.8));box-shadow:0 0 10px rgba(200,0,255,.5);border-color:rgba(200,0,255,.6)}
#titan-landing .tl-lab-pads i.lp-6{background:linear-gradient(180deg,rgba(255,60,120,.7),rgba(120,30,60,.8));box-shadow:0 0 10px rgba(255,60,120,.5);border-color:rgba(255,60,120,.6)}
#titan-landing .tl-lab-pads i.lp-7{background:linear-gradient(180deg,rgba(127,239,255,.65),rgba(20,80,100,.8));box-shadow:0 0 10px rgba(127,239,255,.5);border-color:rgba(127,239,255,.6)}
#titan-landing .tl-lab-pads i.lp-8{background:linear-gradient(180deg,rgba(255,179,71,.7),rgba(120,80,30,.8));box-shadow:0 0 10px rgba(255,179,71,.5);border-color:rgba(255,179,71,.6)}
#titan-landing .tl-lab-pads i.lp-9{background:linear-gradient(180deg,rgba(160,107,255,.7),rgba(60,30,120,.8));box-shadow:0 0 10px rgba(160,107,255,.5);border-color:rgba(160,107,255,.6)}
#titan-landing .tl-lab-pads i.lp-10{background:linear-gradient(180deg,rgba(70,224,160,.7),rgba(20,80,60,.8));box-shadow:0 0 10px rgba(70,224,160,.5);border-color:rgba(70,224,160,.6)}
#titan-landing .tl-lab-seq{position:relative;background:#02080a;border:1px solid #1f1f23;border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;box-shadow:inset 0 0 10px rgba(0,0,0,.6)}
#titan-landing .lab-seq-row{display:grid;grid-template-columns:48px repeat(16,1fr);gap:3px;align-items:center}
#titan-landing .lab-seq-name{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1.5px;color:#d680ff;font-weight:800}
#titan-landing .lab-seq-row i{aspect-ratio:1;border-radius:2px;background:#0a0a0b;border:1px solid #1f1f23;max-height:18px}
#titan-landing .lab-seq-row[data-row="KICK"] i.on{background:linear-gradient(180deg,#ff7a00,#a04000);box-shadow:0 0 6px rgba(255,122,0,.6);border-color:#ff7a00}
#titan-landing .lab-seq-row[data-row="HAT"] i.on{background:linear-gradient(180deg,#ffd400,#a08800);box-shadow:0 0 6px rgba(255,212,0,.6);border-color:#ffd400}
#titan-landing .lab-seq-row[data-row="SNR"] i.on{background:linear-gradient(180deg,#ff5a5a,#a02020);box-shadow:0 0 6px rgba(255,90,90,.6);border-color:#ff5a5a}
#titan-landing .lab-seq-row[data-row="PRC"] i.on{background:linear-gradient(180deg,#7fefff,#0088b4);box-shadow:0 0 6px rgba(127,239,255,.6);border-color:#7fefff}
#titan-landing .lab-seq-cursor{position:absolute;top:6px;bottom:6px;left:60px;width:6%;border-radius:3px;background:rgba(214,128,255,.18);border:1px solid rgba(214,128,255,.5);box-shadow:0 0 10px rgba(214,128,255,.4);animation:tlSeqCursor 4s linear infinite;pointer-events:none}
@keyframes tlSeqCursor{from{transform:translateX(0)}to{transform:translateX(1500%)}}
#titan-landing .tl-lab-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
#titan-landing .tl-lab-feat{background:linear-gradient(180deg,rgba(214,128,255,.05),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:12px;padding:18px;transition:transform .2s ease,border-color .2s ease,background .2s ease}
#titan-landing .tl-lab-feat:hover{transform:translateY(-3px);border-color:rgba(214,128,255,.45);background:linear-gradient(180deg,rgba(214,128,255,.08),rgba(255,255,255,0))}
#titan-landing .tl-lab-ico{display:inline-block;font-size:24px;color:#d680ff;margin-bottom:8px;text-shadow:0 0 10px rgba(214,128,255,.5);line-height:1}
#titan-landing .tl-lab-feat h4{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:1.5px;color:#fff;margin:0 0 6px;text-transform:uppercase;font-weight:700}
#titan-landing .tl-lab-feat p{font-size:13px;line-height:1.55;color:#9a9a9e;margin:0}

/* ── Views / Display modes ──────────────────────────────── */
#titan-landing .tl-views{margin-bottom:clamp(56px,7vw,96px)}
#titan-landing .tl-views-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
#titan-landing .tl-view{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:14px;padding:16px;transition:transform .25s ease,border-color .25s ease,background .25s ease}
#titan-landing .tl-view:hover{transform:translateY(-4px);border-color:rgba(0,212,255,.45);background:linear-gradient(180deg,rgba(0,212,255,.04),rgba(255,255,255,0))}
#titan-landing .tl-view-mock{position:relative;aspect-ratio:16/9;background:radial-gradient(ellipse at 50% 30%,#0a0f15 0%,#020205 80%);border:1px solid #1a3340;border-radius:6px;padding:8px;display:flex;gap:5px;align-items:stretch;margin-bottom:14px;box-shadow:inset 0 0 16px rgba(0,212,255,.06)}
#titan-landing .tl-view-mock i.vw-deck{flex:1;background:radial-gradient(circle at 50% 50%,#3a3a3e 0%,#0a0a0b 70%);border:1px solid #1f1f23;border-radius:50%;aspect-ratio:1;align-self:center;height:auto;max-height:90%;box-shadow:0 0 8px rgba(255,122,0,.2),inset 0 0 6px rgba(0,0,0,.6);position:relative}
#titan-landing .tl-view-mock i.vw-deck::after{content:'';position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffa544,#ff5a00);box-shadow:0 0 8px rgba(255,122,0,.6)}
#titan-landing .tl-view-mock i.vw-mixer{flex:0 0 18%;background:linear-gradient(180deg,#1a1a1c,#0a0a0b);border:1px solid #1f1f23;border-radius:3px;box-shadow:inset 0 0 6px rgba(0,0,0,.6);position:relative}
#titan-landing .tl-view-mock i.vw-mixer::before{content:'';position:absolute;left:25%;right:25%;top:14%;height:1px;background:#ff7a00;box-shadow:0 4px 0 0 #00d4ff,0 8px 0 0 #00ff7a;border-radius:1px}
#titan-landing .tl-view-mock i.vw-mixer::after{content:'';position:absolute;left:50%;top:50%;bottom:8%;width:2px;background:#ff7a00;transform:translateX(-50%);border-radius:1px;box-shadow:0 0 4px #ff7a00}
#titan-landing .tl-view-mock i.vw-mixer.tall{flex:0 0 14%}
#titan-landing .tl-view-mock i.vw-deck.small{flex:1;max-height:80%}
#titan-landing .tl-view-mock i.vw-deck.wide{flex:1;max-height:96%}
#titan-landing .tl-view-mock[data-view="quad"]{flex-wrap:nowrap}
#titan-landing .tl-view-mock[data-view="djfocus"] i.vw-deck::after{inset:24%}
#titan-landing .tl-view-mock[data-view="work"]{justify-content:center;align-items:center;background:radial-gradient(ellipse at 50% 50%,rgba(255,122,0,.18) 0%,#020205 70%)}
#titan-landing .tl-view-mock i.vw-stage{position:absolute;left:18%;right:18%;top:30%;bottom:18%;background:linear-gradient(180deg,#1a1a1c,#0a0a0b);border:1px solid #2a2a2e;border-radius:4px;box-shadow:0 0 22px rgba(255,122,0,.4),inset 0 0 12px rgba(0,0,0,.6)}
#titan-landing .tl-view-mock i.vw-stage::before{content:'128';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;color:#ff7a00;text-shadow:0 0 10px rgba(255,122,0,.7);letter-spacing:1px}
#titan-landing .tl-view-mock i.vw-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(0,212,255,.25) 0%,transparent 50%);pointer-events:none;border:0;flex:0}
#titan-landing .tl-view h4{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:2px;color:#fff;margin:0 0 6px;text-transform:uppercase;font-weight:700}
#titan-landing .tl-view p{font-size:12.5px;line-height:1.5;color:#9a9a9e;margin:0}

/* ── Sound quality / specs ──────────────────────────────── */
#titan-landing .tl-quality{margin-bottom:clamp(56px,7vw,96px)}
#titan-landing .tl-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
#titan-landing .tl-spec{position:relative;background:linear-gradient(180deg,rgba(92,240,160,.04),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:14px;padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;overflow:hidden}
#titan-landing .tl-spec::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#5cf0a0,transparent);opacity:.6}
#titan-landing .tl-spec:hover{transform:translateY(-4px);border-color:rgba(92,240,160,.45);box-shadow:0 20px 40px rgba(0,0,0,.45),0 0 24px rgba(92,240,160,.12)}
#titan-landing .tl-spec-num{display:block;font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-1px;background:linear-gradient(135deg,#5cf0a0,#7fefff);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
#titan-landing .tl-spec-num small{font-size:.4em;letter-spacing:2px;color:#5cf0a0;-webkit-text-fill-color:#5cf0a0;font-weight:700;margin-left:4px;vertical-align:top;display:inline-block;padding-top:.6em}
#titan-landing .tl-spec h5{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:2px;color:#fff;margin:0 0 8px;text-transform:uppercase;font-weight:700}
#titan-landing .tl-spec p{font-size:13px;line-height:1.55;color:#9a9a9e;margin:0}

/* ── Install · Windows / macOS / Linux ─────────────────── */
#titan-landing .tl-install{margin-bottom:clamp(56px,7vw,96px)}
#titan-landing .tl-os-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
#titan-landing .tl-os{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border:1px solid #1f1f23;border-radius:16px;padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;gap:14px}
#titan-landing .tl-os:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.5)}
#titan-landing .tl-os-win{--os:#00d4ff}
#titan-landing .tl-os-mac{--os:#ffd49a}
#titan-landing .tl-os-linux{--os:#ffd400}
#titan-landing .tl-os:hover{border-color:var(--os)}
#titan-landing .tl-os-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid #1f1f23}
#titan-landing .tl-os-logo{width:36px;height:36px;color:var(--os);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--os) 40%,transparent));flex:0 0 auto}
#titan-landing .tl-os-head h4{font-family:'Orbitron',sans-serif;font-size:18px;letter-spacing:2px;color:#fff;margin:0 0 4px;text-transform:uppercase;font-weight:800}
#titan-landing .tl-os-head span{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1.5px;color:var(--os);text-transform:uppercase;display:block}
#titan-landing .tl-os-steps{list-style:none;counter-reset:step;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
#titan-landing .tl-os-steps li{counter-increment:step;position:relative;padding-left:36px;font-size:13.5px;line-height:1.5;color:#b8b8bc;min-height:26px}
#titan-landing .tl-os-steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));border:1px solid var(--os);font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;color:var(--os);display:flex;align-items:center;justify-content:center;letter-spacing:.5px;box-shadow:0 0 8px color-mix(in srgb,var(--os) 25%,transparent)}
#titan-landing .tl-os-steps li b{color:#fff;font-weight:700}
#titan-landing .tl-os-steps li code{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--os);background:rgba(0,0,0,.4);padding:1px 6px;border-radius:3px;border:1px solid #1f1f23}
#titan-landing .tl-os-cta{font-family:'Orbitron',sans-serif;font-weight:800;font-size:12px;letter-spacing:2px;padding:14px 18px;border-radius:8px;cursor:pointer;border:1px solid var(--os);background:linear-gradient(180deg,color-mix(in srgb,var(--os) 18%,#0a0a0b),color-mix(in srgb,var(--os) 8%,#050506));color:#fff;text-transform:uppercase;transition:transform .15s ease,box-shadow .25s ease,background .2s ease;margin-top:auto}
#titan-landing .tl-os-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--os) 25%,transparent),0 0 24px color-mix(in srgb,var(--os) 30%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--os) 30%,#0a0a0b),color-mix(in srgb,var(--os) 14%,#050506))}
#titan-landing .tl-os-foot{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.5px;color:#7a7a7e;text-transform:uppercase;text-align:center}

/* ── Responsive (phase 2) ──────────────────────────────── */
@media (max-width:1024px){
  #titan-landing .tl-views-grid{grid-template-columns:repeat(2,1fr)}
  #titan-landing .tl-spec-grid{grid-template-columns:repeat(2,1fr)}
  #titan-landing .tl-os-grid{grid-template-columns:1fr}
  #titan-landing .tl-vinyl-grid{grid-template-columns:1fr;gap:24px}
  #titan-landing .tl-lab-grid{grid-template-columns:1fr}
  #titan-landing .tl-grade-row{grid-template-columns:1fr;gap:4px;padding:12px 14px}
  #titan-landing .tl-grade-cell{font-size:11px}
}
@media (max-width:720px){
  #titan-landing .tl-views-grid{grid-template-columns:1fr}
  #titan-landing .tl-spec-grid{grid-template-columns:1fr}
  #titan-landing .tl-vinyl-features,
  #titan-landing .tl-lab-features{grid-template-columns:1fr}
  #titan-landing .tl-vinyl-mock{aspect-ratio:5/4}
  #titan-landing .tl-lab-mock{min-height:0}
  #titan-landing .lab-seq-row{grid-template-columns:36px repeat(16,1fr)}
}

/* ============================================================
   TITAN LANDING — phase 3: polish pass
   Refines geometry, spacing, hierarchy, and adds proper
   table headers, vinyl SVG arm, install badges.
   ============================================================ */

/* ── Section heads · subtle accent line ─────────────────── */
#titan-landing .tl-section-head{position:relative;padding-bottom:14px}
#titan-landing .tl-section-head::after{content:'';position:absolute;left:50%;bottom:0;width:60px;height:2px;background:linear-gradient(90deg,transparent,#ff7a00,transparent);transform:translateX(-50%);border-radius:2px;opacity:.7}
#titan-landing .tl-views .tl-section-head::after{background:linear-gradient(90deg,transparent,#00d4ff,transparent)}
#titan-landing .tl-quality .tl-section-head::after{background:linear-gradient(90deg,transparent,#5cf0a0,transparent)}
#titan-landing .tl-lab .tl-section-head::after,
#titan-landing .tl-flow .tl-section-head::after{background:linear-gradient(90deg,transparent,#d680ff,transparent)}

/* ── Grade band: proper table with header row + ticks ──── */
#titan-landing .tl-grade-table{display:flex;flex-direction:column;gap:0;background:rgba(0,0,0,.32);border:1px solid #1f1f23;border-radius:14px;padding:0;margin-bottom:18px;overflow:hidden;box-shadow:inset 0 0 30px rgba(0,0,0,.4)}
#titan-landing .tl-grade-thead,
#titan-landing .tl-grade-row{display:grid;grid-template-columns:1.2fr 1.1fr 1.4fr;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid #1a1a1e}
#titan-landing .tl-grade-row:last-child{border-bottom:0}
#titan-landing .tl-grade-thead{background:linear-gradient(180deg,rgba(255,122,0,.08),rgba(0,212,255,.04));border-bottom:1px solid #2a2a2e}
#titan-landing .tl-grade-h{font-family:'Orbitron',sans-serif !important;font-size:10px !important;letter-spacing:3px !important;color:#9a9a9e !important;font-weight:800 !important;text-transform:uppercase}
#titan-landing .tl-grade-h-club{color:#7a7a7e !important}
#titan-landing .tl-grade-h-titan{color:#5cf0a0 !important;text-shadow:0 0 8px rgba(92,240,160,.3)}
#titan-landing .tl-grade-row{transition:background .2s ease}
#titan-landing .tl-grade-row:hover{background:rgba(255,122,0,.04)}
#titan-landing .tl-grade-cell{font-family:'Share Tech Mono',monospace;font-size:12.5px;letter-spacing:1.2px;color:#9a9a9e;text-transform:uppercase;line-height:1.4}
#titan-landing .tl-grade-feature{color:#fff !important;font-family:'Orbitron',sans-serif !important;font-weight:700 !important;font-size:12.5px !important;letter-spacing:1.2px !important}
#titan-landing .tl-grade-club{color:#7a7a7e !important}
#titan-landing .tl-grade-titan{color:#d8d8de !important;font-weight:500;display:inline-flex;align-items:center;gap:8px}
#titan-landing .tl-tick{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#5cf0a0,#00a858);color:#000;font-size:11px;font-weight:900;font-style:normal;font-family:'Orbitron',sans-serif;box-shadow:0 0 8px rgba(92,240,160,.5),inset 0 1px 0 rgba(255,255,255,.3)}
#titan-landing .tl-grade-foot{display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;color:#9a9a9e;text-transform:uppercase;text-align:center;margin:0;padding-top:14px;border-top:1px dashed rgba(255,122,0,.18)}
#titan-landing .tl-grade-foot-tick{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#5cf0a0,#00a858);color:#000;font-size:10px;font-weight:900;font-family:'Orbitron',sans-serif;box-shadow:0 0 8px rgba(92,240,160,.4)}

/* ── Vinyl mockup · SVG tone-arm + cleaner geometry ────── */
#titan-landing .tl-vinyl-mock{padding:clamp(18px,2.4vw,28px)}
#titan-landing .tl-vn-deck{padding:clamp(14px,2vw,20px)}
#titan-landing .tl-vn-arm,
#titan-landing .tl-vn-arm-base,
#titan-landing .tl-vn-arm-shaft,
#titan-landing .tl-vn-arm-head,
#titan-landing .tl-vn-arm-needle{display:none !important}
#titan-landing .tl-vn-arm-svg{position:absolute;right:6%;top:6%;width:38%;height:64%;pointer-events:none;z-index:3;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
#titan-landing .tl-vn-strobe{position:absolute;inset:0;border-radius:50%;border:1px dotted rgba(255,255,255,.06);animation:tlSpin 4s linear infinite reverse;pointer-events:none}
#titan-landing .tl-vn-platter{box-shadow:0 18px 36px rgba(0,0,0,.75),inset 0 0 40px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.03)}
#titan-landing .tl-vn-tag{top:auto !important;bottom:auto !important;left:18px !important;transform:none !important;top:14px !important;background:linear-gradient(180deg,#0a0a0b,#050506) !important;padding:5px 12px !important;font-size:9px !important;letter-spacing:3px !important;border-radius:4px !important;display:inline-flex;align-items:center;gap:6px}
#titan-landing .tl-vn-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:#ff7a00;box-shadow:0 0 6px #ff7a00;animation:tlBlink 1.4s infinite}
#titan-landing .tl-vn-led{flex-direction:row !important;right:auto !important;top:14px !important;left:auto !important;right:18px !important;background:linear-gradient(180deg,#0a0a0b,#050506);padding:5px 10px;border-radius:4px;border:1px solid #1f1f23;display:inline-flex !important;align-items:center;gap:6px}
#titan-landing .tl-vn-led i{width:7px;height:7px;border-radius:50%;background:#1a1a1c;border:1px solid #2a2a2e;box-shadow:none;animation:none}
#titan-landing .tl-vn-led i.active{background:#ff7a00;border-color:#ff7a00;box-shadow:0 0 8px #ff7a00,0 0 14px rgba(255,122,0,.5)}
#titan-landing .tl-vn-led span{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:1px;color:#7a7a7e;font-weight:800}
#titan-landing .tl-vn-led span:first-of-type{color:#ff7a00}
#titan-landing .tl-vn-startstop{left:auto !important;right:14% !important;bottom:14% !important;display:flex !important;flex-direction:row !important;gap:8px !important}
#titan-landing .tl-vn-start,
#titan-landing .tl-vn-stop{padding:8px 14px !important;font-size:9px !important;letter-spacing:2px !important;border-radius:5px !important;min-width:60px}
#titan-landing .tl-vn-pitch{width:14% !important;height:46% !important;right:6% !important;bottom:auto !important;top:32% !important;padding:18px 6px 24px !important;display:flex;flex-direction:column;align-items:center;border-radius:8px !important}
#titan-landing .tl-vn-pitch-track{position:absolute;left:50% !important;top:30px !important;bottom:30px !important;width:4px !important;border-radius:2px;background:linear-gradient(180deg,#0a0a0b,#1a1a1c) !important;transform:translateX(-50%);border:1px solid #1a1a1c !important;box-shadow:inset 0 0 4px rgba(0,0,0,.8)}
#titan-landing .tl-vn-pitch-tick{position:absolute;left:50%;width:10px;height:1px;background:rgba(255,255,255,.18);transform:translateX(-50%);border-radius:1px}
#titan-landing .tl-vn-pitch-tick-mid{background:#ff7a00;box-shadow:0 0 4px rgba(255,122,0,.6);width:14px;height:1.5px}
#titan-landing .tl-vn-pitch-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80% !important;height:14px !important;border-radius:3px;background:linear-gradient(180deg,#5a5a5e,#1a1a1c) !important;border:1px solid #ff7a00 !important;box-shadow:0 0 10px rgba(255,122,0,.6),0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)}
#titan-landing .tl-vn-pitch-handle::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60%;height:1px;background:rgba(0,0,0,.5);border-radius:1px}
#titan-landing .tl-vn-pitch-label{position:absolute;top:6px !important;left:0;right:0;text-align:center;font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:1.5px;color:#9a9a9e;text-transform:uppercase;font-weight:800;white-space:nowrap}
#titan-landing .tl-vn-pitch-val{position:absolute;bottom:6px !important;left:0;right:0;text-align:center;font-family:'Orbitron',sans-serif;font-size:9px;color:#ff7a00;font-weight:800;letter-spacing:.5px;text-shadow:0 0 6px rgba(255,122,0,.5)}

/* ── Sound quality · spec card polish ──────────────────── */
#titan-landing .tl-spec{padding:22px 22px 22px;display:flex;flex-direction:column;gap:6px}
#titan-landing .tl-spec-meta{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;color:#5cf0a0;text-transform:uppercase;font-weight:700;display:inline-flex;align-items:center;gap:6px;margin-bottom:4px}
#titan-landing .tl-spec-meta::before{content:'';width:5px;height:5px;border-radius:50%;background:#5cf0a0;box-shadow:0 0 6px #5cf0a0}
#titan-landing .tl-spec-num{display:flex;align-items:baseline;gap:2px;font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(38px,4.4vw,52px);line-height:.9;letter-spacing:-1.5px;background:linear-gradient(135deg,#5cf0a0 0%,#7fefff 60%,#a06bff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin:2px 0 8px}
#titan-landing .tl-spec-num small{font-size:.36em;letter-spacing:2px;-webkit-text-fill-color:#5cf0a0;color:#5cf0a0;font-weight:700;align-self:flex-start;padding-top:.6em;margin-left:2px}
#titan-landing .tl-spec h5{font-size:14px;letter-spacing:2px;margin:0 0 6px}
#titan-landing .tl-spec p{font-size:13px;line-height:1.55;color:#9a9a9e;margin:0}

/* ── Install · platform badges + chips ─────────────────── */
#titan-landing .tl-os{padding-top:48px}
#titan-landing .tl-os-badges{position:absolute;top:18px;right:18px;display:flex;gap:6px;z-index:2}
#titan-landing .tl-os-badge{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 8px;border-radius:99px;border:1px solid #2a2a2e;background:rgba(0,0,0,.5);color:#9a9a9e;font-weight:700}
#titan-landing .tl-os-badge-arch{color:var(--os);border-color:color-mix(in srgb,var(--os) 40%,#2a2a2e);background:color-mix(in srgb,var(--os) 8%,rgba(0,0,0,.5))}
#titan-landing .tl-os-foot{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px;text-align:center}
#titan-landing .tl-os-chip{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1px solid #1f1f23;background:rgba(255,255,255,.025);color:#7a7a7e;display:inline-flex;align-items:center;gap:5px}
#titan-landing .tl-os-chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--os);box-shadow:0 0 6px var(--os)}
#titan-landing .tl-os-steps li{font-size:13px;line-height:1.55;padding-left:38px;min-height:28px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
#titan-landing .tl-os-steps li > b{flex:0 0 auto}
#titan-landing .tl-os-steps li code{font-size:11.5px;padding:2px 7px;background:rgba(0,0,0,.55);border-color:color-mix(in srgb,var(--os) 30%,#1f1f23);color:var(--os)}

/* ── Views · corner labels + tighter mockups ───────────── */
#titan-landing .tl-view-mock{padding:10px 8px 8px}
#titan-landing .vw-label{position:absolute;top:6px;left:8px;font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:2px;color:#00d4ff;background:rgba(0,0,0,.5);padding:3px 7px;border-radius:3px;border:1px solid rgba(0,212,255,.3);font-weight:800;z-index:2;text-transform:uppercase}
#titan-landing .vw-label-work{color:#ff7a00;border-color:rgba(255,122,0,.4);background:rgba(0,0,0,.6);box-shadow:0 0 8px rgba(255,122,0,.3)}

/* ── LAB sequencer · fix cursor track ──────────────────── */
#titan-landing .lab-seq-cursor{left:54px !important;width:calc((100% - 56px) / 16) !important;animation:tlSeqCursor 4s steps(16) infinite !important;border-radius:4px}
@keyframes tlSeqCursor{from{transform:translateX(0)}to{transform:translateX(1600%)}}

/* ── Phase 3 responsive ────────────────────────────────── */
@media (max-width:900px){
  #titan-landing .tl-grade-thead,
  #titan-landing .tl-grade-row{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  #titan-landing .tl-grade-thead{display:none}
  #titan-landing .tl-grade-feature::before{content:'CAPABILITY · ';color:#ff7a00;font-size:9px;letter-spacing:2px;margin-right:6px}
  #titan-landing .tl-grade-club::before{content:'INDUSTRY · ';color:#5a5a5e;font-size:9px;letter-spacing:2px;margin-right:6px}
  #titan-landing .tl-grade-titan::before{content:'TITAN · ';color:#5cf0a0;font-size:9px;letter-spacing:2px;margin-right:6px}
}
@media (max-width:720px){
  #titan-landing .tl-os-badges{position:static;margin-bottom:6px;justify-content:flex-start}
  #titan-landing .tl-os{padding-top:24px}
  #titan-landing .tl-vn-startstop{flex-direction:column !important;right:10% !important;bottom:10% !important}
  #titan-landing .tl-vn-pitch{width:18% !important;right:4% !important}
}

/* ============================================================
   TITAN LANDING — phase 4: A11y, RTL, performance &
   user-preference media queries (raises overall quality bar).
   ============================================================ */

/* ── Content-visibility: skip painting below-fold sections ── */
#titan-landing .tl-features,
#titan-landing .tl-band,
#titan-landing .tl-grade,
#titan-landing .tl-showcase,
#titan-landing .tl-flow,
#titan-landing .tl-vinyl,
#titan-landing .tl-lab,
#titan-landing .tl-views,
#titan-landing .tl-quality,
#titan-landing .tl-sounds,
#titan-landing .tl-voices,
#titan-landing .tl-install,
#titan-landing .tl-pricing,
#titan-landing .tl-faq,
#titan-landing .tl-final{content-visibility:auto;contain-intrinsic-size:0 800px}

/* ── prefers-reduced-motion: hard stop on every TITAN anim ── */
@media (prefers-reduced-motion: reduce){
  #titan-landing .tl-jog::after,
  #titan-landing .tl-mock,
  #titan-landing .tl-mixer span,
  #titan-landing .tl-mouth span,
  #titan-landing .tl-mock-led i,
  #titan-landing .tl-pupil,
  #titan-landing .tl-hp-cup i::after,
  #titan-landing .tl-antenna i,
  #titan-landing .tl-eyebrow::before,
  #titan-landing .tl-pricing-eyebrow::before,
  #titan-landing .tl-grade-pulse,
  #titan-landing .tl-vn-platter,
  #titan-landing .tl-vn-strobe,
  #titan-landing .tl-dm-wave span,
  #titan-landing .tl-dm-ring,
  #titan-landing .tl-dm-disc,
  #titan-landing .tl-dm-arm,
  #titan-landing .tl-mm-vu span,
  #titan-landing .tl-sm-bands i,
  #titan-landing .tl-sm-osc path,
  #titan-landing .tl-sm-led,
  #titan-landing .tl-lab-rec i,
  #titan-landing .lab-seq-cursor,
  #titan-landing .tl-vn-tag::before,
  #titan-landing .tl-vn-led i.active{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
  #titan-landing .tl-cta::before{transform:translateX(0) !important;transition:none !important}
  #titan-landing .tl-cta:hover{transform:none !important}
  html{scroll-behavior:auto !important}
}

/* ── prefers-contrast: more — sharpen UI for low-vision ── */
@media (prefers-contrast: more){
  #titan-landing{background:#000 !important}
  #titan-landing h1,
  #titan-landing h2,
  #titan-landing h3,
  #titan-landing h4,
  #titan-landing h5{color:#fff !important;text-shadow:none !important}
  #titan-landing .tl-sub,
  #titan-landing .tl-section-head p,
  #titan-landing .tl-feat p,
  #titan-landing .tl-step p,
  #titan-landing .tl-spec p,
  #titan-landing .tl-os-steps li,
  #titan-landing .tl-faq-item p,
  #titan-landing .tl-voice blockquote,
  #titan-landing .tl-grade-cell{color:#f0f0f0 !important}
  #titan-landing .tl-feat,
  #titan-landing .tl-step,
  #titan-landing .tl-spec,
  #titan-landing .tl-sound-chip,
  #titan-landing .tl-voice,
  #titan-landing .tl-os,
  #titan-landing .tl-faq-item,
  #titan-landing .tl-view,
  #titan-landing .tl-vinyl-feat,
  #titan-landing .tl-lab-feat,
  #titan-landing .tl-gear,
  #titan-landing .tl-plan{border-color:#fff !important;border-width:2px !important;background:#000 !important}
  #titan-landing .tl-cta-primary{outline:2px solid #fff;outline-offset:2px}
}

/* ── forced-colors: respect Windows High Contrast / a11y ── */
@media (forced-colors: active){
  #titan-landing .tl-cta,
  #titan-landing .tl-os-cta,
  #titan-landing .tl-plan-cta,
  #titan-landing .tl-cart-checkout,
  #titan-landing .tl-checkout-pay{
    forced-color-adjust:none;
    border:2px solid ButtonBorder !important;
    background:ButtonFace !important;
    color:ButtonText !important;
  }
  #titan-landing .tl-feat,
  #titan-landing .tl-step,
  #titan-landing .tl-spec,
  #titan-landing .tl-os,
  #titan-landing .tl-faq-item,
  #titan-landing .tl-voice,
  #titan-landing .tl-view,
  #titan-landing .tl-sound-chip,
  #titan-landing .tl-grade-card,
  #titan-landing .tl-final-card,
  #titan-landing .tl-vinyl-mock,
  #titan-landing .tl-lab-mock,
  #titan-landing .tl-gear-mock{border:1px solid CanvasText !important}
  #titan-landing .tl-tick,
  #titan-landing .tl-grade-foot-tick{forced-color-adjust:none;background:Highlight !important;color:HighlightText !important}
}

/* ── Focus-visible: clear, consistent, never invisible ── */
#titan-landing .tl-feat:focus-visible,
#titan-landing .tl-step:focus-visible,
#titan-landing .tl-spec:focus-visible,
#titan-landing .tl-sound-chip:focus-visible,
#titan-landing .tl-voice:focus-visible,
#titan-landing .tl-faq-item summary:focus-visible,
#titan-landing .tl-os-cta:focus-visible,
#titan-landing .tl-plan-cta:focus-visible,
#titan-landing .tl-cart-pill:focus-visible,
#titan-landing .tl-cart-close:focus-visible,
#titan-landing .tl-checkout-close:focus-visible,
#titan-landing .tl-checkout-pay:focus-visible,
#titan-landing .tl-cart-checkout:focus-visible,
#titan-landing details summary:focus-visible{
  outline:2px solid #00d4ff;
  outline-offset:3px;
  border-radius:6px;
}

/* ── Skip link visible on focus ─────────────────────────── */
.skip-link{position:absolute;top:-40px;left:8px;z-index:100000;background:#ff7a00;color:#000;padding:10px 16px;border-radius:6px;font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:2px;font-size:12px;text-decoration:none;text-transform:uppercase}
.skip-link:focus,.skip-link:focus-visible{top:8px;outline:2px solid #fff;outline-offset:2px}

/* ── RTL support (Hebrew, Arabic, Persian, Urdu) ────────── */
[dir="rtl"] #titan-landing,
#titan-landing[dir="rtl"]{font-family:'Heebo','Rubik','Assistant',system-ui,sans-serif}
[dir="rtl"] #titan-landing .tl-nav,
[dir="rtl"] #titan-landing .tl-navlinks,
[dir="rtl"] #titan-landing .tl-cta-row,
[dir="rtl"] #titan-landing .tl-meta{flex-direction:row-reverse}
[dir="rtl"] #titan-landing .tl-eyebrow,
[dir="rtl"] #titan-landing .tl-pricing-eyebrow,
[dir="rtl"] #titan-landing .tl-grade-eyebrow{direction:rtl}
[dir="rtl"] #titan-landing h1,
[dir="rtl"] #titan-landing .tl-sub,
[dir="rtl"] #titan-landing .tl-section-head h2,
[dir="rtl"] #titan-landing .tl-section-head p,
[dir="rtl"] #titan-landing .tl-feat h3,
[dir="rtl"] #titan-landing .tl-feat p,
[dir="rtl"] #titan-landing .tl-step h3,
[dir="rtl"] #titan-landing .tl-step p,
[dir="rtl"] #titan-landing .tl-spec h5,
[dir="rtl"] #titan-landing .tl-spec p,
[dir="rtl"] #titan-landing .tl-faq-item p,
[dir="rtl"] #titan-landing .tl-faq-item summary,
[dir="rtl"] #titan-landing .tl-voice blockquote,
[dir="rtl"] #titan-landing .tl-os-steps li,
[dir="rtl"] #titan-landing .tl-vinyl-feat p,
[dir="rtl"] #titan-landing .tl-lab-feat p,
[dir="rtl"] #titan-landing .tl-gear-list li,
[dir="rtl"] #titan-landing .tl-plan p,
[dir="rtl"] #titan-landing .tl-final-card p{text-align:right;direction:rtl}
[dir="rtl"] #titan-landing .tl-step:not(:last-child)::after{content:'←';right:auto;left:-18px}
[dir="rtl"] #titan-landing .tl-os-steps li{padding-left:0;padding-right:38px}
[dir="rtl"] #titan-landing .tl-os-steps li::before{left:auto;right:0}
[dir="rtl"] #titan-landing .tl-sound-chip{padding:16px 22px 16px 18px}
[dir="rtl"] #titan-landing .tl-sound-chip::before{left:auto;right:0}
[dir="rtl"] #titan-landing .tl-gear-list li{padding-left:0;padding-right:18px}
[dir="rtl"] #titan-landing .tl-gear-list li::before{left:auto;right:0}
[dir="rtl"] #titan-landing .tl-voice::before{left:auto;right:14px}
[dir="rtl"] #titan-landing .tl-faq-item summary::after{content:'+'}
[dir="rtl"] #titan-landing .tl-grade-eyebrow,
[dir="rtl"] #titan-landing .tl-eyebrow{flex-direction:row-reverse}
[dir="rtl"] #titan-landing .tl-section-head::after{transform:translateX(50%) scaleX(-1)}

/* ── Print stylesheet — clean, no animations ────────────── */
@media print{
  #titan-landing{position:static !important;background:#fff !important;color:#000 !important}
  #titan-landing .tl-bg,
  #titan-landing .tl-grid,
  #titan-landing .tl-mock,
  #titan-landing .tl-vinyl-mock,
  #titan-landing .tl-lab-mock,
  #titan-landing .tl-gear-mock,
  #titan-landing .tl-cta-row,
  #titan-landing .tl-os-cta,
  #titan-landing .tl-plan-cta,
  #titan-landing .tl-cart,
  #titan-landing .tl-backdrop,
  #titan-landing .tl-checkout,
  #titan-landing .tl-final-card .tl-cta-row{display:none !important}
  #titan-landing h1,
  #titan-landing h2,
  #titan-landing h3,
  #titan-landing h4{color:#000 !important;text-shadow:none !important;background:none !important;-webkit-text-fill-color:#000 !important}
  #titan-landing .tl-sub,
  #titan-landing .tl-section-head p,
  #titan-landing .tl-feat p,
  #titan-landing .tl-step p,
  #titan-landing .tl-spec p,
  #titan-landing .tl-faq-item p{color:#222 !important}
  #titan-landing .tl-feat,
  #titan-landing .tl-step,
  #titan-landing .tl-spec,
  #titan-landing .tl-faq-item,
  #titan-landing .tl-grade-card,
  #titan-landing .tl-os{break-inside:avoid;page-break-inside:avoid;border:1px solid #aaa !important;background:#fff !important;box-shadow:none !important}
  #titan-landing .tl-faq-item{padding:8px 12px}
  #titan-landing .tl-faq-item p{display:block !important}
}

/* ── Performance hints: contain repaint scope ───────────── */
#titan-landing .tl-mock,
#titan-landing .tl-vinyl-mock,
#titan-landing .tl-lab-mock,
#titan-landing .tl-gear-mock{contain:layout paint style}
#titan-landing .tl-feat,
#titan-landing .tl-step,
#titan-landing .tl-spec,
#titan-landing .tl-sound-chip,
#titan-landing .tl-voice,
#titan-landing .tl-faq-item,
#titan-landing .tl-os,
#titan-landing .tl-view,
#titan-landing .tl-vinyl-feat,
#titan-landing .tl-lab-feat,
#titan-landing .tl-gear,
#titan-landing .tl-plan{contain:layout style}


/* ── VIBE SOUND CODING · AI mode toggle ── */
#spVibeAIToggle.vibe-ai-on{
  background:linear-gradient(180deg,rgba(214,128,255,.22),rgba(214,128,255,.08))!important;
  color:#d680ff!important;
  border-color:#d680ff!important;
  box-shadow:0 0 12px rgba(214,128,255,.45),inset 0 0 6px rgba(214,128,255,.15)!important;
}
#spVibeAIToggle.vibe-ai-on::before{content:'●  ';color:#d680ff}
.vibe-status[data-ai] b{color:#d680ff}

/* ============================================================
   ★ COMPREHENSIVE MOBILE PASS (Q2 2026)
   Touch-friendly, content-first. Three breakpoints:
   - 1024px: tablet — minor reflows, larger touch targets
   - 720px: phone — stack decks vertically, full-width controls
   - 420px: small phone — extra-compact, single-column everything
   ============================================================ */

/* ── Safe-area insets for iOS notch + home indicator ── */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .header-bar {
    padding-top: max(env(safe-area-inset-top, 0), 0px);
  }
  body.tl-locked #titan-landing {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .auth-modal,
  .quick-lib-overlay,
  .tl-cart,
  .tl-checkout {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── Tablet & smaller (≤1024px) ── */
@media (max-width: 1024px) {
  /* Touch targets: minimum 44px on interactive elements */
  .tab-btn,
  .dsb-btn,
  .tool-btn,
  .upload-btn,
  .url-btn,
  .yt-btn,
  .playlist-btn,
  .disc-btn,
  .auth-btn,
  .rec-btn,
  .vibe-chip,
  .sp-preset-btn,
  .crate-chip,
  .disc-genre-btn,
  .disc-src-btn {
    min-height: 38px;
  }
  .tab-btn { padding: 8px 10px; font-size: 11px; }
}

/* ── Phone (≤720px) — stack deck console + structural reflow ── */
@media (max-width: 720px) {
  body { font-size: 13px; }

  /* HEADER — wrap & shrink */
  .header-bar {
    padding: 6px 8px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .brand { font-size: 13px !important; letter-spacing: 1px !important; }
  .brand .max { font-size: 11px !important; }
  .header-right { gap: 4px; flex-wrap: wrap; justify-content: flex-end }
  .header-right .titan-clock { display: none; }
  .master-bpm { font-size: 14px; }
  .auth-btn,
  .rec-btn { font-size: 10px; padding: 6px 10px; }

  /* DECK SWITCH BAR — horizontal scroll, hide label */
  .deck-switch-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 4px 6px;
  }
  .deck-switch-bar::-webkit-scrollbar { height: 4px; }
  .deck-switch-bar::-webkit-scrollbar-thumb { background: rgba(255,138,26,.4); border-radius: 2px; }
  .deck-switch-bar .dsb-label { display: none; }
  .deck-switch-bar .dsb-btn {
    flex: 0 0 auto;
    min-width: 56px;
    font-size: 10px !important;
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  /* MAIN TABS — horizontal scroll, prominent active */
  .main-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 4px;
    gap: 2px;
  }
  .main-tabs::-webkit-scrollbar { height: 4px; }
  .main-tabs::-webkit-scrollbar-thumb { background: rgba(255,138,26,.4); border-radius: 2px; }
  .main-tabs .tab-btn {
    flex: 0 0 auto;
    font-size: 10px !important;
    padding: 9px 11px !important;
    letter-spacing: 1.2px !important;
    white-space: nowrap;
    min-width: auto;
  }

  /* CONSOLE — stack decks vertically (deck → mixer → deck) */
  .console,
  .console.show-all,
  body.show-all .console {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .console .cdj { padding: 10px !important; }
  /* DJ FOCUS modes (mixer hidden) — keep deck full-width */
  body.dj-focus .console,
  .console.dj-focus { grid-template-columns: 1fr !important; }
  /* ALL-4 mode — 2x2 grid on phone instead of horizontal scroll */
  .console.show-all { grid-template-columns: 1fr 1fr !important; }
  .console.show-all .mixer { grid-column: 1 / -1; }
  body.show-all .header-bar,
  body.show-all .main-tabs,
  body.show-all .mixer-toolbar,
  body.show-all .deck-switch-bar,
  body.show-all .top-fx-row,
  body.show-all .library {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* MIXER — full-width strip below decks */
  .mixer {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* TOP FX ROW (Beat FX + Scene FX) — wrap into single column */
  .top-fx-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .beat-fx-panel,
  .scene-fx-panel {
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .beat-fx-panel .beat-buttons,
  .scene-fx-panel .scene-fx-buttons {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 3px;
  }
  .beat-buttons .beat-btn,
  .scene-fx-buttons .scene-btn {
    flex: 1 0 calc(33.33% - 3px);
    min-width: 0;
    padding: 8px 4px;
    font-size: 10px;
  }
  .x-pad-wrap { grid-column: 1 / -1; }
  .x-pad { width: 100%; aspect-ratio: 2/1; }

  /* MIXER TOOLBAR */
  .mixer-toolbar { padding: 6px !important; }

  /* TRACK LIBRARY — hide artist + key columns, tighten layout */
  .library { padding: 8px 6px !important; }
  .library-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .library-actions {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
  }
  .library-actions > * { flex: 0 1 auto; }
  .search-wrap {
    width: 100%;
    flex-direction: column;
    gap: 4px;
  }
  .search-input,
  .sort-select,
  .filter-select { width: 100%; min-height: 38px; }
  .track-list-header {
    grid-template-columns: 28px 1fr 50px 60px 70px !important;
    font-size: 9px !important;
    padding: 6px !important;
  }
  .track-list-header .th-artist,
  .track-list-header .th-rating { display: none; }
  .track-list .track-row {
    grid-template-columns: 28px 1fr 50px 60px 70px !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
    min-height: 50px;
  }
  .track-list .track-row .tr-artist,
  .track-list .track-row .tr-rating { display: none; }
  .track-list .track-row .tr-title {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* DISCOVER panel */
  .discover-wrap { padding: 8px !important; }
  .disc-topbar {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .disc-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: stretch;
  }
  .disc-src-btn { flex: 1 0 calc(33.33% - 3px); }
  .disc-search { width: 100%; }
  .disc-input { width: 100%; min-height: 38px; }
  .disc-genres {
    flex-wrap: wrap;
    gap: 4px;
  }
  .disc-genre-btn {
    flex: 0 1 auto;
    font-size: 10px;
    padding: 6px 10px;
  }

  /* AI MIX tab */
  #tab-ai .auto-mix-row,
  #tab-ai .ai-section-row {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* MIDI tab */
  #tab-midi .midi-row,
  #tab-midi .settings-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  /* SOUND tab — STUDIO PANEL */
  .studio-panel { padding: 8px !important; max-width: 100% !important; }
  .studio-panel .settings-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* TITAN LAB — instrument panels stack */
  .sp-panel { padding: 8px !important; max-width: 100% !important; }
  .sp-panel .sp-transport {
    flex-wrap: wrap;
    gap: 4px;
  }
  .sp-panel .sp-transport .tool-btn { flex: 0 0 auto; }
  .sp-presets { padding: 6px !important; }
  .sp-preset-row { flex-wrap: wrap; gap: 4px; }
  .sp-preset-btn {
    flex: 1 0 calc(50% - 4px);
    font-size: 10px;
    padding: 8px 6px;
  }

  /* VIBE SOUND CODING panel — phone-friendly */
  .vibe-panel { padding: 10px !important; }
  .vibe-body {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .vibe-input { min-height: 60px; font-size: 13px; }
  .vibe-btn-col { width: 100%; }
  .vibe-btn-row { flex-wrap: wrap; gap: 4px; }
  .vibe-btn-row .tool-btn { flex: 1 0 calc(50% - 4px); min-height: 38px; }
  .vibe-gen-btn { width: 100%; min-height: 44px; }
  .vibe-chips {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }
  .vibe-chip { font-size: 10px; padding: 8px 6px; min-height: 38px; }

  /* SETTINGS panels — stack rows */
  #tab-settings .settings-panel { padding: 10px !important; max-width: 100% !important; }
  #tab-settings .settings-section { padding: 10px !important; }
  #tab-settings .settings-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #tab-settings .layout-picker {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  /* Keep AI key settings input usable */
  #aiKeyInput { min-width: 0 !important; flex: 1 1 100% !important; }

  /* SUPPORT / GUIDE / SHORTCUTS — readable on narrow screens */
  #tab-support .settings-panel,
  #tab-guide .settings-panel,
  #tab-help .settings-panel { padding: 10px !important; max-width: 100% !important; }

  /* LEARN tab */
  #tab-learn .settings-panel { padding: 0 !important; }
  #tab-learn .lesson-grid,
  #tab-learn #lessonGrid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* PLAYLISTS tab */
  #tab-playlists .playlist-grid {
    grid-template-columns: 1fr !important;
  }

  /* SESSIONS tab */
  #tab-sessions .session-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* RADIO tab */
  #tab-radio .radio-grid {
    grid-template-columns: 1fr !important;
  }

  /* SAMPLER tab — 4 cols on phone */
  .sampler-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
  .sampler-pad { aspect-ratio: 1; min-height: 56px; }

  /* AUTH MODAL — full width, scrollable */
  .auth-modal .auth-box {
    width: 94vw !important;
    max-width: 420px !important;
    max-height: 92vh !important;
    overflow-y: auto;
    padding: 18px !important;
  }
  .auth-modal input { min-height: 42px; }

  /* QUICK LIB OVERLAY — full screen */
  .quick-lib-overlay { padding: 0 !important; }
  .quick-lib-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .quick-lib-head {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
  }
  .quick-lib-head input { min-height: 42px; }

  /* CART / CHECKOUT (landing) — full screen */
  .tl-cart {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .tl-checkout-card {
    flex-direction: column !important;
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    overflow-y: auto;
  }
  .tl-checkout-summary,
  .tl-checkout-form { width: 100% !important; }
  .tl-form-2,
  .tl-form-3 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* URL/YT input bars */
  .url-input-wrap,
  .yt-input-wrap {
    flex-direction: column;
    gap: 4px;
  }
  .url-input,
  .yt-input { width: 100%; min-height: 38px; }
}

/* ── Small phone (≤420px) ── */
@media (max-width: 420px) {
  body { font-size: 12px; }

  /* HEADER stacks fully */
  .header-bar { flex-direction: column; align-items: stretch; }
  .brand { text-align: center; }
  .header-right { justify-content: center; }

  /* Console ALL-4 → single column */
  .console.show-all { grid-template-columns: 1fr !important; }

  /* Beat / Scene FX — single column */
  .beat-fx-panel,
  .scene-fx-panel { grid-template-columns: 1fr !important; }

  /* Sampler — 3 cols only */
  .sampler-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Vibe chips — single column on tiny screens */
  .vibe-chips { grid-template-columns: 1fr !important; }

  /* Layout picker — single column */
  #tab-settings .layout-picker { grid-template-columns: 1fr !important; }

  /* Tab buttons — minimum size only */
  .main-tabs .tab-btn {
    font-size: 9px !important;
    padding: 8px 9px !important;
    letter-spacing: 1px !important;
  }
  .deck-switch-bar .dsb-btn { font-size: 9px !important; padding: 7px 8px !important; }

  /* Track row — even tighter */
  .track-list-header,
  .track-list .track-row {
    grid-template-columns: 24px 1fr 44px 56px !important;
  }
  .track-list-header .th-bpm,
  .track-list .track-row .tr-bpm { display: block; }
  .track-list-header .th-actions,
  .track-list .track-row .tr-actions { font-size: 10px; }
}

/* ── Landscape phone — give the console max vertical room ── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .header-bar { padding: 4px 8px; }
  .deck-switch-bar { padding: 2px 6px; }
  .main-tabs { padding: 2px; }
  .console { gap: 6px !important; }
}

/* ============================================================
   ★ LANDING PAGE — mobile finishing pass
   Tightens every section + mockup for phones. The earlier
   landing-page CSS already responds at 1024/720/420; this layer
   smooths the corners so mockups stay readable on small screens.
   ============================================================ */

/* ── Landing root: tighter padding on phones ── */
@media (max-width: 720px) {
  #titan-landing .tl-wrap {
    padding: 16px 14px 32px !important;
  }
  #titan-landing .tl-nav { gap: 12px; margin-bottom: 24px; }
  #titan-landing .tl-brand { font-size: 16px !important; letter-spacing: 2px !important; }
  #titan-landing .tl-navlinks { font-size: 9px; letter-spacing: 2px; gap: 12px; }
  #titan-landing h1 {
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 1.05 !important;
    letter-spacing: .5px !important;
  }
  #titan-landing .tl-sub { font-size: 14px !important; }

  /* Hero mockup: smaller + centered */
  #titan-landing .tl-hero { gap: 24px !important; margin-bottom: 36px !important; }
  #titan-landing .tl-mock {
    max-width: 360px !important;
    margin: 0 auto !important;
    aspect-ratio: 1/1 !important;
  }
  #titan-landing .tl-mock-bot { aspect-ratio: 1/1 !important; max-height: 380px !important; }

  /* Section heads: tighter */
  #titan-landing .tl-section-head { margin-bottom: 18px !important; padding-bottom: 10px !important; }
  #titan-landing .tl-section-head h2 {
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1.05 !important;
    margin: 10px 0 !important;
  }
  #titan-landing .tl-section-head p { font-size: 13.5px !important; }

  /* Eyebrow chips: prevent wrap break */
  #titan-landing .tl-eyebrow,
  #titan-landing .tl-pricing-eyebrow,
  #titan-landing .tl-grade-eyebrow {
    font-size: 9.5px !important;
    letter-spacing: 2px !important;
    padding: 5px 10px !important;
    line-height: 1.2;
  }

  /* CTAs: full width, touch-friendly */
  #titan-landing .tl-cta-row { width: 100%; gap: 8px !important; }
  #titan-landing .tl-cta {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 12px !important;
    padding: 14px 18px !important;
  }
  #titan-landing .tl-meta { font-size: 10px !important; gap: 4px 10px !important; }
}

/* ── Hardware showcase: 3 gear cards stacked on phone ── */
@media (max-width: 720px) {
  #titan-landing .tl-showcase { margin-bottom: 40px !important; }
  #titan-landing .tl-gear-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  #titan-landing .tl-gear { padding: 16px !important; }
  #titan-landing .tl-gear h3 { font-size: 16px !important; margin: 12px 0 4px !important; }
  #titan-landing .tl-gear-list li { font-size: 13px !important; line-height: 1.5 !important; }
  /* Mockup cards keep aspect ratio but cap height so they don't dominate */
  #titan-landing .tl-gear-mock {
    aspect-ratio: 4/3 !important;
    max-height: 280px !important;
  }
  /* Deck mock: tighten internal labels */
  #titan-landing .tl-dm-head { font-size: 8px !important; margin-bottom: 8px !important; }
  #titan-landing .tl-dm-tag { font-size: 9px !important; letter-spacing: 2px !important; }
  #titan-landing .tl-dm-bpm b { font-size: 14px !important; }
  #titan-landing .tl-dm-key { font-size: 8px !important; }
  #titan-landing .tl-dm-meta { font-size: 7px !important; }
  /* Mixer mock: slimmer strips */
  #titan-landing .tl-mm-strip { padding: 4px 3px !important; gap: 3px !important; }
  #titan-landing .tl-mm-label { font-size: 7px !important; }
  #titan-landing .tl-mm-master { padding: 4px 6px !important; gap: 6px !important; }
  #titan-landing .tl-mm-master span { font-size: 8px !important; }
  /* Sound mock: smaller bands */
  #titan-landing .tl-sm-bands span { font-size: 6px !important; }
  #titan-landing .tl-sm-mod span { font-size: 7px !important; letter-spacing: 1px !important; }
}

/* ── Workflow steps: stack with no connector arrows ── */
@media (max-width: 720px) {
  #titan-landing .tl-flow { margin-bottom: 40px !important; }
  #titan-landing .tl-flow-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  #titan-landing .tl-step { padding: 16px !important; }
  #titan-landing .tl-step-num { font-size: 28px !important; }
  #titan-landing .tl-step h3 { font-size: 13px !important; }
  #titan-landing .tl-step:not(:last-child)::after { display: none !important; }
}

/* ── TITAN VINYL turntable mockup ── */
@media (max-width: 720px) {
  #titan-landing .tl-vinyl { margin-bottom: 40px !important; }
  #titan-landing .tl-vinyl-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  #titan-landing .tl-vinyl-mock {
    aspect-ratio: 5/4 !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 14px !important;
  }
  #titan-landing .tl-vn-deck { padding: 10px !important; }
  #titan-landing .tl-vn-tag {
    top: 8px !important;
    left: 8px !important;
    font-size: 7px !important;
    padding: 3px 8px !important;
    letter-spacing: 2px !important;
  }
  #titan-landing .tl-vn-tag span { font-size: 6px !important; margin-left: 4px !important; }
  #titan-landing .tl-vn-led {
    top: 8px !important;
    right: 8px !important;
    padding: 3px 7px !important;
  }
  #titan-landing .tl-vn-led i { width: 5px !important; height: 5px !important; }
  #titan-landing .tl-vn-led span { font-size: 7px !important; }
  /* Start/Stop buttons - smaller, side-by-side */
  #titan-landing .tl-vn-startstop {
    right: 8% !important;
    bottom: 8% !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  #titan-landing .tl-vn-start,
  #titan-landing .tl-vn-stop {
    padding: 5px 10px !important;
    font-size: 7px !important;
    min-width: 50px !important;
    letter-spacing: 1.5px !important;
  }
  #titan-landing .tl-vn-pitch {
    width: 16% !important;
    height: 38% !important;
    right: 4% !important;
    top: 28% !important;
    padding: 14px 4px 18px !important;
  }
  #titan-landing .tl-vn-pitch-label { font-size: 7px !important; top: 4px !important; }
  #titan-landing .tl-vn-pitch-val { font-size: 8px !important; bottom: 4px !important; }
  #titan-landing .tl-vinyl-features { grid-template-columns: 1fr !important; gap: 10px !important; }
  #titan-landing .tl-vinyl-feat { padding: 14px !important; }
  #titan-landing .tl-vinyl-feat h4 { font-size: 12px !important; }
  #titan-landing .tl-vinyl-feat p { font-size: 12.5px !important; }
}

/* ── TITAN LAB sampler mockup ── */
@media (max-width: 720px) {
  #titan-landing .tl-lab { margin-bottom: 40px !important; }
  #titan-landing .tl-lab-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  #titan-landing .tl-lab-mock {
    min-height: 280px !important;
    padding: 14px !important;
  }
  #titan-landing .tl-lab-pads { gap: 4px !important; }
  #titan-landing .tl-lab-head { font-size: 8px !important; }
  #titan-landing .tl-lab-tag { font-size: 9px !important; letter-spacing: 2px !important; }
  #titan-landing .lab-seq-row { grid-template-columns: 32px repeat(16, 1fr) !important; gap: 2px !important; }
  #titan-landing .lab-seq-name { font-size: 7px !important; letter-spacing: 1px !important; }
  #titan-landing .lab-seq-row i { max-height: 14px !important; }
  #titan-landing .lab-seq-cursor { left: 36px !important; }
  #titan-landing .tl-lab-features { grid-template-columns: 1fr !important; gap: 10px !important; }
  #titan-landing .tl-lab-feat { padding: 14px !important; }
  #titan-landing .tl-lab-feat h4 { font-size: 12px !important; }
  #titan-landing .tl-lab-feat p { font-size: 12.5px !important; }
}

/* ── Views / display modes (4 mini-mockups) ── */
@media (max-width: 720px) {
  #titan-landing .tl-views { margin-bottom: 40px !important; }
  #titan-landing .tl-views-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #titan-landing .tl-view { padding: 12px !important; }
  #titan-landing .tl-view-mock { padding: 6px !important; margin-bottom: 10px !important; }
  #titan-landing .tl-view h4 { font-size: 11px !important; letter-spacing: 1.5px !important; }
  #titan-landing .tl-view p { font-size: 11.5px !important; line-height: 1.45 !important; }
  #titan-landing .vw-label { font-size: 7px !important; padding: 2px 5px !important; }
}
@media (max-width: 420px) {
  #titan-landing .tl-views-grid { grid-template-columns: 1fr !important; }
}

/* ── Sound quality specs ── */
@media (max-width: 720px) {
  #titan-landing .tl-quality { margin-bottom: 40px !important; }
  #titan-landing .tl-spec-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #titan-landing .tl-spec { padding: 16px !important; }
  #titan-landing .tl-spec-meta { font-size: 8px !important; letter-spacing: 2px !important; }
  #titan-landing .tl-spec-num { font-size: 30px !important; margin: 2px 0 6px !important; }
  #titan-landing .tl-spec h5 { font-size: 12px !important; letter-spacing: 1.5px !important; }
  #titan-landing .tl-spec p { font-size: 12px !important; line-height: 1.5 !important; }
}
@media (max-width: 420px) {
  #titan-landing .tl-spec-grid { grid-template-columns: 1fr !important; }
}

/* ── Sound library (genre chips) ── */
@media (max-width: 720px) {
  #titan-landing .tl-sounds { margin-bottom: 40px !important; }
  #titan-landing .tl-sound-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #titan-landing .tl-sound-chip { padding: 12px 14px !important; }
  #titan-landing .tl-sound-chip b { font-size: 12px !important; }
  #titan-landing .tl-sound-chip span { font-size: 9px !important; }
}
@media (max-width: 420px) {
  #titan-landing .tl-sound-grid { grid-template-columns: 1fr !important; }
}

/* ── Testimonials ── */
@media (max-width: 720px) {
  #titan-landing .tl-voices { margin-bottom: 40px !important; }
  #titan-landing .tl-voices-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  #titan-landing .tl-voice { padding: 18px !important; }
  #titan-landing .tl-voice blockquote { font-size: 13.5px !important; padding-top: 14px !important; }
  #titan-landing .tl-voice::before { font-size: 36px !important; }
}

/* ── Install (Win/Mac/Linux cards) ── */
@media (max-width: 720px) {
  #titan-landing .tl-install { margin-bottom: 40px !important; }
  #titan-landing .tl-os-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  #titan-landing .tl-os { padding: 16px !important; padding-top: 38px !important; gap: 10px !important; }
  #titan-landing .tl-os-badges { top: 12px; right: 12px; }
  #titan-landing .tl-os-badge { font-size: 8px !important; padding: 3px 6px !important; }
  #titan-landing .tl-os-head h4 { font-size: 16px !important; }
  #titan-landing .tl-os-head span { font-size: 10px !important; }
  #titan-landing .tl-os-logo { width: 30px !important; height: 30px !important; }
  #titan-landing .tl-os-cta { font-size: 11px !important; padding: 12px 14px !important; min-height: 44px; }
  #titan-landing .tl-os-steps li { font-size: 12.5px !important; padding-left: 32px !important; }
  #titan-landing .tl-os-steps li::before { width: 22px !important; height: 22px !important; font-size: 9px !important; }
  #titan-landing .tl-os-steps li code { font-size: 11px !important; padding: 1px 5px !important; }
}

/* ── Pricing plans ── */
@media (max-width: 720px) {
  #titan-landing .tl-pricing { margin-bottom: 40px !important; }
  #titan-landing .tl-plans { grid-template-columns: 1fr !important; gap: 12px !important; }
  #titan-landing .tl-plan { padding: 18px !important; }
  #titan-landing .tl-plan h3 { font-size: 18px !important; }
  #titan-landing .tl-plan-price .tl-price-amt { font-size: 36px !important; }
  #titan-landing .tl-plan ul { font-size: 12.5px !important; }
  #titan-landing .tl-plan-cta { min-height: 48px; font-size: 12px !important; }
}

/* ── FAQ ── */
@media (max-width: 720px) {
  #titan-landing .tl-faq { margin-bottom: 32px !important; }
  #titan-landing .tl-faq-item { padding: 0 14px !important; }
  #titan-landing .tl-faq-item summary { font-size: 12px !important; padding: 14px 0 !important; letter-spacing: 1px !important; }
  #titan-landing .tl-faq-item p { font-size: 13px !important; padding-bottom: 14px !important; line-height: 1.55 !important; }
}

/* ── Final CTA card ── */
@media (max-width: 720px) {
  #titan-landing .tl-final { margin-bottom: 24px !important; }
  #titan-landing .tl-final-card { padding: 28px 18px !important; }
  #titan-landing .tl-final-card h2 { font-size: 24px !important; }
  #titan-landing .tl-final-card p { font-size: 13px !important; }
}

/* ── Stats band ── */
@media (max-width: 720px) {
  #titan-landing .tl-band { padding: 18px 0 !important; gap: 10px !important; }
  #titan-landing .tl-stat b { font-size: 22px !important; }
  #titan-landing .tl-stat span { font-size: 9px !important; letter-spacing: 2px !important; }
}

/* ── Club-grade band: already collapses cleanly at 1024px,
   tighten further on phones ── */
@media (max-width: 720px) {
  #titan-landing .tl-grade-card { padding: 20px 16px !important; }
  #titan-landing .tl-grade-eyebrow { font-size: 9px !important; padding: 5px 10px !important; }
  #titan-landing .tl-grade-card h2 { font-size: 22px !important; line-height: 1.1 !important; }
  #titan-landing .tl-grade-lead { font-size: 13px !important; line-height: 1.55 !important; }
  #titan-landing .tl-grade-row { padding: 10px 12px !important; gap: 4px !important; }
  #titan-landing .tl-grade-cell { font-size: 11px !important; line-height: 1.4 !important; }
  #titan-landing .tl-grade-feature { font-size: 11px !important; }
  #titan-landing .tl-tick { width: 16px !important; height: 16px !important; font-size: 10px !important; }
  #titan-landing .tl-grade-foot { font-size: 11px !important; padding-top: 10px !important; }
}

/* ── Footer ── */
@media (max-width: 720px) {
  #titan-landing .tl-foot {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 10px !important;
  }
}

/* ============================================================
   ★ MOBILE OVERFLOW FIX + MOCKUP DOWNSCALE
   Hard-locks horizontal overflow at the document level and
   shrinks the heavier landing mockups on phones.
   ============================================================ */

/* ── Hard overflow lock — no horizontal scroll on phones ── */
@media (max-width: 720px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  #main-app, #titan-landing, .tab-content { max-width: 100vw !important; overflow-x: hidden !important; }
  /* Ensure absolutely-positioned children of any visible card never escape */
  #titan-landing .tl-final-card,
  #titan-landing .tl-grade-card,
  #titan-landing .tl-gear,
  #titan-landing .tl-vinyl-mock,
  #titan-landing .tl-lab-mock,
  #titan-landing .tl-os,
  #titan-landing .tl-spec,
  #titan-landing .tl-step,
  #titan-landing .tl-voice,
  #titan-landing .tl-faq-item,
  #titan-landing .tl-final {
    max-width: 100% !important;
    overflow: hidden;
    box-sizing: border-box !important;
  }
  /* Long unbreakable strings (URLs, code, IDs) wrap on phones */
  #titan-landing code,
  #titan-landing a,
  #titan-landing .tl-os-steps li {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Wide grids with min-width children stop forcing horizontal overflow */
  #titan-landing .tl-grade-table,
  #titan-landing .tl-grade-row,
  #titan-landing .tl-grade-thead { min-width: 0 !important; }
  /* Console / studio app — clip sub-content at viewport */
  .console, .cdj, .mixer, .library, .header-bar, .main-tabs,
  .deck-switch-bar, .top-fx-row, .beat-fx-panel, .scene-fx-panel,
  .mixer-toolbar {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .cdj > * { max-width: 100% !important; }
}

/* ── Phone breakpoint at 480px — heavier mockup downscaling ── */
@media (max-width: 480px) {
  /* Landing wrapper extra-tight */
  #titan-landing .tl-wrap { padding: 14px 12px 28px !important; }

  /* Hero — smaller mock, condensed copy */
  #titan-landing h1 { font-size: 26px !important; line-height: 1.05 !important; }
  #titan-landing .tl-sub { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 18px !important; }
  #titan-landing .tl-mock { max-width: 280px !important; aspect-ratio: 1/1 !important; }
  #titan-landing .tl-mock-bot { max-height: 280px !important; }

  /* Section heads further compressed */
  #titan-landing .tl-section-head { margin-bottom: 14px !important; }
  #titan-landing .tl-section-head h2 { font-size: 22px !important; line-height: 1.05 !important; }
  #titan-landing .tl-section-head p { font-size: 12.5px !important; line-height: 1.5 !important; }

  /* Hardware showcase — mockups ~70% of phone width */
  #titan-landing .tl-gear { padding: 14px !important; }
  #titan-landing .tl-gear-mock {
    aspect-ratio: 4/3 !important;
    max-height: 200px !important;
    max-width: 100% !important;
  }
  #titan-landing .tl-gear h3 { font-size: 15px !important; }
  #titan-landing .tl-gear-tag { font-size: 10px !important; }
  #titan-landing .tl-gear-list li { font-size: 12.5px !important; padding-left: 14px !important; }
  #titan-landing .tl-gear-list li::before { width: 6px !important; height: 6px !important; }
  /* Deck mock internal — smaller everything, cleaner mobile layout */
  #titan-landing .tl-deck-mock { padding: 12px 12px 14px !important; }
  #titan-landing .tl-dm-head { margin-bottom: 8px !important; font-size: 8px !important; letter-spacing: 1.5px !important; }
  #titan-landing .tl-dm-tag { font-size: 9px !important; letter-spacing: 2px !important; }
  #titan-landing .tl-dm-deck { font-size: 7.5px !important; padding: 2px 5px !important; }
  #titan-landing .tl-dm-leds i { width: 4px !important; height: 4px !important; }
  #titan-landing .tl-dm-screen { padding: 6px 8px !important; height: 36% !important; }
  #titan-landing .tl-dm-bpm b { font-size: 13px !important; }
  #titan-landing .tl-dm-bpm span { font-size: 7px !important; }
  #titan-landing .tl-dm-key { font-size: 8px !important; }
  #titan-landing .tl-dm-meta { font-size: 6.5px !important; bottom: 3px !important; }
  #titan-landing .tl-dm-jog { left: 5% !important; bottom: 10% !important; width: 34% !important; }
  #titan-landing .tl-dm-pads { right: 5% !important; bottom: 32% !important; width: 36% !important; gap: 3px !important; }
  #titan-landing .tl-dm-pads i { border-radius: 4px !important; }
  /* Center the transport row under the pads for a cleaner mobile layout */
  #titan-landing .tl-dm-transport {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 7% !important;
    gap: 5px !important;
    font-size: 8px !important;
  }
  #titan-landing .tl-dm-transport span { padding: 5px 9px !important; border-radius: 4px !important; }
  /* Pitch fader is too cramped to be legible at this size — hide it */
  #titan-landing .tl-dm-pitch { display: none !important; }
  /* Mixer mock */
  #titan-landing .tl-mixer-mock { padding: 10px !important; gap: 6px !important; }
  #titan-landing .tl-mm-strip-row { gap: 3px !important; }
  #titan-landing .tl-mm-strip { padding: 3px 2px !important; gap: 2px !important; }
  #titan-landing .tl-mm-knob { width: 60% !important; }
  #titan-landing .tl-mm-fader i { width: 12px !important; height: 6px !important; left: -2px !important; }
  /* Sound mock */
  #titan-landing .tl-sound-mock { padding: 10px !important; gap: 6px !important; }
  #titan-landing .tl-sm-bands { gap: 2px !important; }

  /* Vinyl mock — squeeze proportions */
  #titan-landing .tl-vinyl-mock {
    aspect-ratio: 5/4 !important;
    max-width: 100% !important;
    padding: 10px !important;
  }
  #titan-landing .tl-vn-deck { padding: 8px !important; }
  #titan-landing .tl-vn-platter { width: 56% !important; left: 4% !important; top: 14% !important; }
  #titan-landing .tl-vn-arm-svg { width: 36% !important; right: 4% !important; top: 4% !important; }
  #titan-landing .tl-vn-tag { font-size: 6px !important; padding: 2px 6px !important; letter-spacing: 1.5px !important; }
  #titan-landing .tl-vn-tag span { display: none !important; }
  #titan-landing .tl-vn-led { padding: 2px 5px !important; gap: 4px !important; }
  #titan-landing .tl-vn-led i { width: 4px !important; height: 4px !important; }
  #titan-landing .tl-vn-led span { font-size: 6px !important; }
  #titan-landing .tl-vn-startstop { right: 6% !important; bottom: 6% !important; gap: 3px !important; }
  #titan-landing .tl-vn-start,
  #titan-landing .tl-vn-stop { padding: 4px 8px !important; font-size: 6.5px !important; min-width: 42px !important; }
  #titan-landing .tl-vn-pitch { width: 14% !important; height: 36% !important; right: 3% !important; padding: 12px 3px 16px !important; }
  #titan-landing .tl-vn-pitch-label { font-size: 6px !important; letter-spacing: 1px !important; top: 3px !important; }
  #titan-landing .tl-vn-pitch-val { font-size: 7px !important; bottom: 3px !important; }
  #titan-landing .tl-vn-pitch-handle { height: 10px !important; }
  /* TITAN LAB mock — compact */
  #titan-landing .tl-lab-mock { min-height: 220px !important; padding: 10px !important; gap: 8px !important; }
  #titan-landing .tl-lab-pads { gap: 3px !important; }
  #titan-landing .tl-lab-head { font-size: 7px !important; }
  #titan-landing .tl-lab-tag { font-size: 8px !important; }
  #titan-landing .lab-seq-row { grid-template-columns: 26px repeat(16, 1fr) !important; gap: 1px !important; }
  #titan-landing .lab-seq-name { font-size: 6px !important; }
  #titan-landing .lab-seq-row i { max-height: 10px !important; }
  #titan-landing .lab-seq-cursor { left: 28px !important; }

  /* Workflow steps */
  #titan-landing .tl-step { padding: 14px !important; }
  #titan-landing .tl-step-num { font-size: 24px !important; margin-bottom: 6px !important; }
  #titan-landing .tl-step h3 { font-size: 12px !important; letter-spacing: 1.5px !important; }
  #titan-landing .tl-step p { font-size: 12.5px !important; line-height: 1.45 !important; }

  /* Specs */
  #titan-landing .tl-spec-num { font-size: 24px !important; }
  #titan-landing .tl-spec h5 { font-size: 11px !important; letter-spacing: 1.2px !important; }
  #titan-landing .tl-spec p { font-size: 11.5px !important; line-height: 1.45 !important; }

  /* OS install cards — tighter layout, smaller logo + steps */
  #titan-landing .tl-os { padding: 14px !important; padding-top: 32px !important; }
  #titan-landing .tl-os-head { padding-bottom: 10px !important; gap: 10px !important; }
  #titan-landing .tl-os-logo { width: 26px !important; height: 26px !important; }
  #titan-landing .tl-os-head h4 { font-size: 14px !important; }
  #titan-landing .tl-os-head span { font-size: 9px !important; letter-spacing: 1px !important; }
  #titan-landing .tl-os-steps { gap: 8px !important; }
  #titan-landing .tl-os-steps li { font-size: 11.5px !important; padding-left: 28px !important; min-height: 22px !important; }
  #titan-landing .tl-os-steps li::before { width: 20px !important; height: 20px !important; font-size: 8px !important; }
  #titan-landing .tl-os-steps li code { font-size: 10.5px !important; padding: 1px 4px !important; word-break: break-all; }
  #titan-landing .tl-os-cta { font-size: 10px !important; padding: 11px 12px !important; letter-spacing: 1.5px !important; }
  #titan-landing .tl-os-chip { font-size: 8.5px !important; padding: 3px 7px !important; }
  #titan-landing .tl-os-badge { font-size: 8px !important; padding: 3px 6px !important; }

  /* Plans */
  #titan-landing .tl-plan { padding: 16px !important; }
  #titan-landing .tl-plan h3 { font-size: 16px !important; }
  #titan-landing .tl-plan-price .tl-price-amt { font-size: 30px !important; }
  #titan-landing .tl-plan-price .tl-price-cur,
  #titan-landing .tl-plan-price .tl-price-per { font-size: 12px !important; }
  #titan-landing .tl-plan ul { font-size: 12px !important; gap: 6px !important; }
  #titan-landing .tl-plan-cta { font-size: 11px !important; padding: 13px 16px !important; }

  /* Voices */
  #titan-landing .tl-voice { padding: 14px !important; }
  #titan-landing .tl-voice blockquote { font-size: 12.5px !important; line-height: 1.5 !important; padding-top: 12px !important; }
  #titan-landing .tl-voice::before { font-size: 28px !important; top: 4px !important; left: 10px !important; }
  #titan-landing .tl-voice figcaption { font-size: 10px !important; letter-spacing: 1.5px !important; }

  /* FAQ */
  #titan-landing .tl-faq-item { padding: 0 12px !important; }
  #titan-landing .tl-faq-item summary { font-size: 11.5px !important; padding: 12px 0 !important; }
  #titan-landing .tl-faq-item p { font-size: 12.5px !important; }
  #titan-landing .tl-faq-item summary::after { font-size: 18px !important; }

  /* Final CTA */
  #titan-landing .tl-final-card { padding: 24px 16px !important; border-radius: 14px !important; }
  #titan-landing .tl-final-card h2 { font-size: 22px !important; }
  #titan-landing .tl-final-card p { font-size: 12.5px !important; margin-bottom: 18px !important; }

  /* Stats band */
  #titan-landing .tl-band { padding: 14px 0 !important; }
  #titan-landing .tl-stat b { font-size: 18px !important; }
  #titan-landing .tl-stat span { font-size: 8px !important; }

  /* Club-grade band */
  #titan-landing .tl-grade-card { padding: 18px 14px !important; border-radius: 14px !important; }
  #titan-landing .tl-grade-card h2 { font-size: 20px !important; }
  #titan-landing .tl-grade-lead { font-size: 12.5px !important; line-height: 1.5 !important; }
  #titan-landing .tl-grade-row { padding: 10px 12px !important; }
  #titan-landing .tl-grade-cell,
  #titan-landing .tl-grade-feature { font-size: 11px !important; line-height: 1.4 !important; }
  #titan-landing .tl-tick { width: 14px !important; height: 14px !important; font-size: 9px !important; }
  #titan-landing .tl-grade-foot { font-size: 10px !important; }

  /* Eyebrow chips smaller */
  #titan-landing .tl-eyebrow,
  #titan-landing .tl-pricing-eyebrow,
  #titan-landing .tl-grade-eyebrow {
    font-size: 9px !important;
    letter-spacing: 1.8px !important;
    padding: 4px 9px !important;
  }
  #titan-landing .tl-section-head::after { width: 40px !important; height: 1px !important; }

  /* Sound chips – tighter */
  #titan-landing .tl-sound-chip { padding: 10px 12px !important; }
  #titan-landing .tl-sound-chip b { font-size: 11.5px !important; letter-spacing: 1.2px !important; }
  #titan-landing .tl-sound-chip span { font-size: 8.5px !important; letter-spacing: 1px !important; }

  /* CTA buttons in hero */
  #titan-landing .tl-cta { font-size: 11px !important; padding: 12px 16px !important; letter-spacing: 2px !important; }
}

/* ── Tiny phone (≤360px) — final containment pass ── */
@media (max-width: 360px) {
  #titan-landing .tl-wrap { padding: 12px 10px 24px !important; }
  #titan-landing h1 { font-size: 22px !important; }
  #titan-landing .tl-section-head h2 { font-size: 19px !important; }
  #titan-landing .tl-mock { max-width: 240px !important; }
  #titan-landing .tl-gear-mock { max-height: 170px !important; }
  #titan-landing .tl-vinyl-mock { max-height: 240px !important; }
  #titan-landing .tl-vn-pitch { display: none !important; }  /* fader too cramped */
  #titan-landing .tl-vn-led { display: none !important; }
  /* Force every grid to single column */
  #titan-landing .tl-views-grid,
  #titan-landing .tl-spec-grid,
  #titan-landing .tl-sound-grid { grid-template-columns: 1fr !important; }
  /* Section spacing tighter */
  #titan-landing .tl-showcase,
  #titan-landing .tl-flow,
  #titan-landing .tl-vinyl,
  #titan-landing .tl-lab,
  #titan-landing .tl-views,
  #titan-landing .tl-quality,
  #titan-landing .tl-sounds,
  #titan-landing .tl-voices,
  #titan-landing .tl-install,
  #titan-landing .tl-pricing,
  #titan-landing .tl-faq { margin-bottom: 28px !important; }
}

/* ============================================================
   ★ MOBILE NAVIGATION HARD-OVERRIDE
   The earlier mobile pass was being beaten by line-2802
   `.deck-switch-bar{overflow:hidden!important}` and the inner
   line-1858 `.dsb-btn{flex:1}` — causing the deck-switch
   bar to render on 5 stacked rows and the main tabs to squish.
   This block uses higher-specificity selectors + !important to
   force a single-row, horizontally-scrollable nav on phones.
   ============================================================ */

@media (max-width: 720px) {
  /* HEADER BAR — proper stacked layout on mobile */
  body .header-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  body .header-bar .brand,
  body .header-bar .header-dsb,
  body .header-bar .header-right {
    width: 100% !important;
    max-width: 100% !important;
  }
  body .header-bar .brand {
    text-align: center;
    font-size: 13px !important;
  }
  body .header-bar .header-right {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* DECK SWITCH BAR — single horizontal scroll row */
  body .header-bar .header-dsb,
  body .deck-switch-bar.header-dsb,
  .deck-switch-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    scrollbar-width: thin;
  }
  .deck-switch-bar::-webkit-scrollbar { height: 3px; }
  .deck-switch-bar::-webkit-scrollbar-thumb {
    background: rgba(255, 138, 26, 0.4);
    border-radius: 2px;
  }
  /* Every dsb-btn: natural width, never grow */
  body .deck-switch-bar .dsb-btn,
  body .header-bar .header-dsb .dsb-btn,
  .deck-switch-bar .dsb-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 7px 9px !important;
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
    white-space: nowrap !important;
  }
  /* Hide the label and non-essential power-user buttons on phone */
  .deck-switch-bar .dsb-label,
  .deck-switch-bar .dsb-dj-focus,
  .deck-switch-bar .dsb-boothlight,
  .deck-switch-bar .dsb-wmlib,
  .deck-switch-bar .dsb-wmexit,
  .deck-switch-bar[data-pair].dsb-split,
  .deck-switch-bar .dsb-monitor {
    display: none !important;
  }

  /* MAIN TABS — single horizontal scroll row */
  body .main-tabs,
  .main-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 4px !important;
    gap: 3px !important;
    scrollbar-width: thin;
  }
  .main-tabs::-webkit-scrollbar { height: 3px; }
  .main-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 138, 26, 0.4);
    border-radius: 2px;
  }
  /* Every tab-btn: natural width with min-width, never grow to fill */
  body .main-tabs .tab-btn,
  .main-tabs .tab-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 64px !important;
    padding: 9px 11px !important;
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
    white-space: nowrap !important;
  }
}

/* ── 480px and under: even tighter nav + hide more buttons ── */
@media (max-width: 480px) {
  body .header-bar .brand { font-size: 12px !important; letter-spacing: 1px !important; }
  body .header-bar .master-bpm { font-size: 13px !important; }
  body .header-bar .auth-btn,
  body .header-bar .rec-btn { font-size: 10px !important; padding: 6px 9px !important; min-height: 36px !important; }
  /* Hide split modes (1·3 / 2·4) on small screens — keep just 1·2, 3·4, ALL 4, WORK MODE */
  .deck-switch-bar .dsb-split,
  .deck-switch-bar [data-pair="AC"],
  .deck-switch-bar [data-pair="BD"] {
    display: none !important;
  }
  body .deck-switch-bar .dsb-btn,
  .deck-switch-bar .dsb-btn {
    padding: 6px 8px !important;
    font-size: 9.5px !important;
    letter-spacing: 1px !important;
    min-width: 0 !important;
  }
  body .main-tabs .tab-btn,
  .main-tabs .tab-btn {
    min-width: 56px !important;
    padding: 8px 9px !important;
    font-size: 9.5px !important;
    letter-spacing: 1px !important;
  }
}

/* ============================================================
   ★ MOBILE-ONLY BLOCKER MODAL
   On phones, every path that would enter the studio routes
   here instead. Visible only when bootstrap.js opens it.
   ============================================================ */
.tl-mobile-block {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tl-mobile-block.tl-mb-open {
  display: flex;
  opacity: 1;
}
.tl-mobile-block-card {
  background: linear-gradient(160deg, #1a1a1f 0%, #0a0a0c 100%);
  border: 1px solid rgba(255, 122, 0, 0.4);
  border-radius: 18px;
  padding: 28px 22px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7),
              0 0 50px rgba(255, 122, 0, 0.15);
  animation: tlMbRise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes tlMbRise {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.tl-mobile-block-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 6px 18px rgba(255, 122, 0, 0.4));
}
.tl-mobile-block-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 14px;
  text-transform: uppercase;
  line-height: 1.1;
}
.tl-mobile-block-card p {
  font-size: 14px;
  line-height: 1.55;
  color: #c8c8cc;
  margin: 0 0 12px;
}
.tl-mobile-block-sub {
  font-size: 12.5px !important;
  color: #9a9a9e !important;
  font-style: italic;
}
.tl-mobile-block-url {
  background: #050507;
  border: 1px solid #2a2a2e;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 16px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.tl-mobile-block-url-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: #6a6a6e;
  text-transform: uppercase;
}
.tl-mobile-block-url code {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  color: #ff8a1a;
  background: transparent;
  border: none;
  padding: 0;
  word-break: break-all;
  text-align: center;
}
.tl-mobile-block-copy {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  background: rgba(255, 138, 26, 0.1);
  border: 1px solid rgba(255, 138, 26, 0.4);
  color: #ff8a1a;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
  min-height: 36px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.tl-mobile-block-copy:hover { background: rgba(255, 138, 26, 0.18); }
.tl-mobile-block-copy:active { transform: scale(0.97); }
.tl-mobile-block-cta {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #ff7a00, #ff5a00);
  color: #000;
  border: none;
  padding: 14px 22px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  text-transform: uppercase;
  min-height: 48px;
  box-shadow: 0 8px 24px rgba(255, 122, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.25s ease;
}
.tl-mobile-block-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(255, 122, 0, 0.5);
}
.tl-mobile-block-cta:active { transform: translateY(0); }
.tl-mobile-block-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Tiny phones — make the card fit */
@media (max-width: 380px) {
  .tl-mobile-block { padding: 12px; }
  .tl-mobile-block-card { padding: 22px 16px; }
  .tl-mobile-block-icon { font-size: 44px; }
  .tl-mobile-block-card h3 { font-size: 18px; }
  .tl-mobile-block-card p { font-size: 13px; }
}

/* Reduced motion: no rise animation */
@media (prefers-reduced-motion: reduce) {
  .tl-mobile-block-card { animation: none; }
}

/* ============================================================
   ★ LANDING CONTACT FORM (Sales / Support)
   ============================================================ */
#titan-landing .tl-contact { margin-bottom: clamp(48px, 6vw, 80px); }
#titan-landing .tl-contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(20px, 2.6vw, 32px);
  align-items: stretch;
}
#titan-landing .tl-contact-form {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border: 1px solid #1f1f23;
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#titan-landing .tl-contact-topics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
#titan-landing .tl-topic input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#titan-landing .tl-topic span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  background: #0a0a0c;
  border: 1px solid #2a2a2e;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
  text-align: left;
}
#titan-landing .tl-topic span b {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #fff;
  font-weight: 800;
}
#titan-landing .tl-topic span em {
  font-family: 'Share Tech Mono', monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 1px;
  color: #7a7a7e;
  text-transform: uppercase;
}
#titan-landing .tl-topic input:checked + span {
  background: rgba(214, 128, 255, .08);
  border-color: #d680ff;
  box-shadow: 0 0 12px rgba(214, 128, 255, .3),
              inset 0 0 6px rgba(214, 128, 255, .08);
}
#titan-landing .tl-topic input:checked + span b { color: #d680ff; }
#titan-landing .tl-topic span:hover { border-color: #4a4a4e; transform: translateY(-1px); }
#titan-landing .tl-topic input:focus-visible + span {
  outline: 2px solid #d680ff;
  outline-offset: 2px;
}
#titan-landing .tl-contact-row { display: flex; flex-direction: column; gap: 8px; }
#titan-landing .tl-contact-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex-direction: row;
}
#titan-landing .tl-contact-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#titan-landing .tl-contact-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #9a9a9e;
  text-transform: uppercase;
}
#titan-landing .tl-contact-label em {
  font-style: normal;
  color: #5a5a5e;
  font-size: 9px;
  text-transform: lowercase;
  letter-spacing: 1px;
}
#titan-landing .tl-contact-form input[type="text"],
#titan-landing .tl-contact-form input[type="email"],
#titan-landing .tl-contact-form textarea {
  background: #0a0a0c;
  border: 1px solid #2a2a2e;
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
  width: 100%;
}
#titan-landing .tl-contact-form input::placeholder,
#titan-landing .tl-contact-form textarea::placeholder { color: #5a5a5e; }
#titan-landing .tl-contact-form input:focus,
#titan-landing .tl-contact-form textarea:focus {
  outline: none;
  border-color: #d680ff;
  box-shadow: 0 0 0 3px rgba(214, 128, 255, .15);
}
#titan-landing .tl-contact-form textarea {
  resize: vertical;
  min-height: 120px;
  font-family: 'Barlow Condensed', sans-serif;
  line-height: 1.5;
}
#titan-landing .tl-contact-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
#titan-landing .tl-contact-send {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #d680ff, #a060e0);
  color: #fff;
  border: none;
  padding: 14px 24px;
  border-radius: 10px;
  cursor: pointer;
  text-transform: uppercase;
  min-height: 48px;
  box-shadow: 0 8px 24px rgba(214, 128, 255, .3);
  transition: transform .15s ease, box-shadow .25s ease, opacity .2s ease;
}
#titan-landing .tl-contact-send:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(214, 128, 255, .45); }
#titan-landing .tl-contact-send:active { transform: translateY(0); }
#titan-landing .tl-contact-send:disabled { opacity: .55; cursor: progress; transform: none; }
#titan-landing .tl-contact-status {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  color: #9a9a9e;
}
#titan-landing .tl-contact-status[data-kind="ok"] { color: #5cf0a0; }
#titan-landing .tl-contact-status[data-kind="err"] { color: #ff8a8a; }
#titan-landing .tl-contact-fineprint {
  font-size: 11px;
  color: #6a6a6e;
  line-height: 1.5;
  margin: 0;
}

#titan-landing .tl-contact-side {
  background: linear-gradient(180deg, rgba(214,128,255,.06), rgba(255,255,255,0));
  border: 1px solid rgba(214, 128, 255, .25);
  border-radius: 16px;
  padding: clamp(18px, 2.2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#titan-landing .tl-contact-side h4 {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  letter-spacing: 2.5px;
  color: #fff;
  margin: 0 0 4px;
  text-transform: uppercase;
  font-weight: 800;
}
#titan-landing .tl-contact-channels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#titan-landing .tl-contact-channels li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1f1f23;
  font-size: 13.5px;
}
#titan-landing .tl-contact-channels li:last-child { border-bottom: 0; padding-bottom: 0; }
#titan-landing .tl-contact-ch-k {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #9a9a9e;
  text-transform: uppercase;
}
#titan-landing .tl-contact-channels a {
  color: #d680ff;
  text-decoration: none;
  font-weight: 500;
}
#titan-landing .tl-contact-channels a:hover { text-decoration: underline; }
#titan-landing .tl-contact-promise {
  background: rgba(0, 0, 0, .25);
  border: 1px dashed rgba(214, 128, 255, .35);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: #c8c8cc;
  margin-top: auto;
}
#titan-landing .tl-contact-promise b { color: #d680ff; }

/* Contact form responsive */
@media (max-width: 1024px) {
  #titan-landing .tl-contact-grid { grid-template-columns: 1fr !important; }
  #titan-landing .tl-contact-topics { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
  #titan-landing .tl-contact-form { padding: 16px !important; }
  #titan-landing .tl-contact-row-2 { grid-template-columns: 1fr !important; }
  #titan-landing .tl-contact-send { width: 100%; }
  #titan-landing .tl-contact-side { padding: 16px !important; }
}
@media (max-width: 480px) {
  #titan-landing .tl-contact-topics { grid-template-columns: 1fr !important; }
}

/* ============================================================
   ★ DECK-SWITCH BUTTON UNIFICATION
   All buttons (DECK FOCUS, 1·2, 3·4, 1·3, 2·4, ALL 4, DJ FOCUS,
   BOOTH LIGHT) share the same neutral styling. Only WORK MODE
   gets the showcase glow treatment.
   ============================================================ */

/* Reset every dsb-btn variant to the same neutral look */
.deck-switch-bar .dsb-btn,
.deck-switch-bar .dsb-btn.dsb-split,
.deck-switch-bar .dsb-btn.dsb-all,
.deck-switch-bar .dsb-btn.dsb-dj-focus,
.deck-switch-bar .dsb-btn.dsb-boothlight {
  background: linear-gradient(180deg, #25252b, #16161a) !important;
  color: #cfcfd5 !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04),
              0 2px 6px rgba(0, 0, 0, .35) !important;
  text-shadow: none !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  border-radius: 6px !important;
  transition: border-color .2s ease, color .2s ease, box-shadow .25s ease, transform .15s ease;
}
.deck-switch-bar .dsb-btn:hover,
.deck-switch-bar .dsb-btn.dsb-split:hover,
.deck-switch-bar .dsb-btn.dsb-all:hover,
.deck-switch-bar .dsb-btn.dsb-dj-focus:hover,
.deck-switch-bar .dsb-btn.dsb-boothlight:hover {
  border-color: rgba(255, 138, 26, .5) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(255, 138, 26, .25),
              inset 0 1px 0 rgba(255, 255, 255, .08),
              0 4px 10px rgba(0, 0, 0, .5) !important;
  transform: translateY(-1px);
}
/* Active state: same orange treatment for any selected pair / mode toggle */
.deck-switch-bar .dsb-btn.active,
.deck-switch-bar .dsb-btn.dsb-split.active,
.deck-switch-bar .dsb-btn.dsb-all.active,
.deck-switch-bar .dsb-btn.dsb-dj-focus.active,
.deck-switch-bar .dsb-btn.dsb-boothlight.active {
  background: linear-gradient(180deg, #ffa84a 0%, var(--orange) 55%, #c85a00 100%) !important;
  color: #000 !important;
  border-color: #aa3a00 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25) !important;
  box-shadow: 0 0 18px rgba(255, 122, 0, .55),
              inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

/* WORK MODE — show-stopper glow treatment */
.deck-switch-bar .dsb-btn.dsb-work {
  position: relative;
  background: linear-gradient(180deg, #3a1854 0%, #1f0a32 100%) !important;
  color: #f0d4ff !important;
  border: 2px solid rgba(214, 128, 255, .7) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 24px rgba(200, 0, 255, .55),
    0 0 48px rgba(200, 0, 255, .25),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 12px rgba(214, 128, 255, .15) !important;
  text-shadow: 0 0 8px rgba(214, 128, 255, .8),
               0 0 14px rgba(200, 0, 255, .5) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  animation: dsbWorkGlow 3s ease-in-out infinite;
  overflow: hidden;
}
.deck-switch-bar .dsb-btn.dsb-work::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, .12) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s ease;
  pointer-events: none;
}
.deck-switch-bar .dsb-btn.dsb-work:hover {
  color: #fff !important;
  border-color: #e0a8ff !important;
  box-shadow:
    0 0 32px rgba(200, 0, 255, .8),
    0 0 60px rgba(200, 0, 255, .4),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 0 16px rgba(214, 128, 255, .25) !important;
  transform: translateY(-2px);
}
.deck-switch-bar .dsb-btn.dsb-work:hover::before { transform: translateX(100%); }
.deck-switch-bar .dsb-btn.dsb-work.active {
  background: linear-gradient(180deg, #c800ff 0%, #8000c0 50%, #5a0090 100%) !important;
  color: #fff !important;
  border-color: #e0a8ff !important;
  box-shadow:
    0 0 40px rgba(200, 0, 255, .9),
    0 0 80px rgba(200, 0, 255, .5),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -2px 8px rgba(0, 0, 0, .3) !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, .6) !important;
}
@keyframes dsbWorkGlow {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(200, 0, 255, .55),
      0 0 48px rgba(200, 0, 255, .25),
      inset 0 1px 0 rgba(255, 255, 255, .12),
      inset 0 0 12px rgba(214, 128, 255, .15);
  }
  50% {
    box-shadow:
      0 0 32px rgba(200, 0, 255, .75),
      0 0 64px rgba(200, 0, 255, .4),
      inset 0 1px 0 rgba(255, 255, 255, .15),
      inset 0 0 16px rgba(214, 128, 255, .25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .deck-switch-bar .dsb-btn.dsb-work { animation: none; }
}

/* DECK FOCUS label keeps its styling — it's a label, not a button */
.deck-switch-bar .dsb-label {
  background: linear-gradient(180deg, #1a1a1e, #0a0a0c) !important;
  border: 1px dashed rgba(255, 138, 26, .35) !important;
  color: var(--orange) !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
}

/* ============================================================
   ★ STICKY LANDING NAV — backdrop-blur pill, hide on scroll
   down, reveal on scroll up. JS in bootstrap.js toggles the
   `tl-nav-scrolled` and `tl-nav-hidden` classes on the
   container as the user scrolls.
   ============================================================ */
#titan-landing .tl-nav {
  position: sticky;
  top: 8px;
  z-index: 50;
  background: rgba(8, 8, 12, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: clamp(28px, 5vw, 56px);
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    padding 0.25s ease,
    top 0.25s ease;
  will-change: transform;
}

/* Once the user scrolls past ~20px, intensify the background
   and add a soft shadow to make the nav read as a layer above
   content. */
#titan-landing.tl-nav-scrolled .tl-nav {
  background: rgba(7, 7, 11, 0.82);
  border-color: rgba(255, 122, 0, 0.18);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 122, 0, 0.08);
  padding: 8px 16px;
}

/* Hide on scroll-down, slide back in on scroll-up. The
   translateY(-120%) ensures the box-shadow also clears the
   viewport so there's no dark line peeking through. */
#titan-landing.tl-nav-hidden .tl-nav {
  transform: translateY(-120%);
  pointer-events: none;
}

/* Compact brand on the sticky nav so it stays elegant when
   the bar gets denser. */
@media (min-width: 720px) {
  #titan-landing.tl-nav-scrolled .tl-nav .tl-brand {
    font-size: 16px !important;
    letter-spacing: 3px !important;
  }
  #titan-landing.tl-nav-scrolled .tl-nav .tl-brand .tl-tag {
    font-size: 9px;
    padding: 3px 7px;
  }
}

/* Reduced-motion: slide instantly */
@media (prefers-reduced-motion: reduce) {
  #titan-landing .tl-nav {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  #titan-landing.tl-nav-hidden .tl-nav {
    transform: none;
    opacity: 0;
    visibility: hidden;
  }
}

/* Mobile: thinner sticky bar */
@media (max-width: 720px) {
  #titan-landing .tl-nav { padding: 8px 12px !important; top: 4px !important; border-radius: 10px !important; }
  #titan-landing.tl-nav-scrolled .tl-nav { padding: 6px 12px !important; }
}

/* ============================================================
   ★ DEDICATED PAGES — Features / Hardware / Sound / Pricing /
   FAQ / Contact opened via nav clicks. Each .tl-page is hidden
   by default; bootstrap.js openPage() shows one at a time and
   hides the .tl-home-content. Matches the home design language.
   ============================================================ */
#titan-landing .tl-page {
  animation: tlPageIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
#titan-landing .tl-page[hidden] { display: none !important; }
@keyframes tlPageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #titan-landing .tl-page { animation: none; }
}

/* Back-to-home button */
#titan-landing .tl-page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #2a2a2e;
  color: #b8b8bc;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  margin-bottom: clamp(20px, 3vw, 32px);
}
#titan-landing .tl-page-back:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 122, 0, 0.06);
  transform: translateX(-2px);
}
#titan-landing .tl-page-back:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* Page header */
#titan-landing .tl-page-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto clamp(36px, 5vw, 64px);
  padding-bottom: 16px;
  position: relative;
}
#titan-landing .tl-page-head::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff7a00, transparent);
  transform: translateX(-50%);
  border-radius: 2px;
  opacity: 0.7;
}
#titan-landing .tl-page-head h1 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: 1px;
  color: #fff;
  margin: 14px 0 16px;
  text-transform: uppercase;
  text-wrap: balance;
}
#titan-landing .tl-page-head h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #ff7a00, #ffb347 60%, #ffd49a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#titan-landing .tl-page-lead {
  font-size: clamp(15px, 1.5vw, 18px);
  color: #b8b8bc;
  line-height: 1.65;
  margin: 0;
  text-wrap: pretty;
}

/* Content blocks within a page */
#titan-landing .tl-page-block {
  max-width: 880px;
  margin: 0 auto clamp(28px, 3.6vw, 44px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
  border: 1px solid #1f1f23;
  border-radius: 16px;
  padding: clamp(20px, 2.6vw, 32px);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
#titan-landing .tl-page-block:hover {
  border-color: rgba(255, 122, 0, 0.3);
  transform: translateY(-2px);
}
#titan-landing .tl-page-block h2 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 0.5px;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.15;
}
#titan-landing .tl-page-block p {
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.7;
  color: #c8c8cc;
  margin: 0 0 12px;
}
#titan-landing .tl-page-block p:last-of-type { margin-bottom: 0; }
#titan-landing .tl-page-block p b { color: #fff; font-weight: 600; }
#titan-landing .tl-page-block a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 122, 0, 0.5);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
#titan-landing .tl-page-block a:hover { border-bottom-color: var(--orange); }

#titan-landing .tl-page-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}
#titan-landing .tl-page-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #b8b8bc;
}
#titan-landing .tl-page-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a00, #ffb347);
  box-shadow: 0 0 6px rgba(255, 122, 0, 0.5);
}
#titan-landing .tl-page-list li b { color: #fff; font-weight: 600; }

/* FAQ items inside a page */
#titan-landing .tl-page-block .tl-faq-item {
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}
#titan-landing .tl-page-block .tl-faq-item:last-child { margin-bottom: 0; }

/* Bottom CTA row */
#titan-landing .tl-page-cta-row {
  max-width: 880px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
#titan-landing .tl-page-cta-row .tl-cta {
  flex: 0 1 auto;
}

/* Page-level body lock when a page is open: home and pages share
   the same scroll container; .tl-on-page just signals "we're not
   on home anymore" if other code wants to react. */
#titan-landing.tl-on-page .tl-home-content { display: none !important; }

/* Mobile: tighter padding, single-column lists */
@media (max-width: 720px) {
  #titan-landing .tl-page-back { font-size: 10px !important; padding: 7px 12px !important; margin-bottom: 16px !important; }
  #titan-landing .tl-page-head h1 { font-size: clamp(26px, 8vw, 38px) !important; }
  #titan-landing .tl-page-lead { font-size: 14px !important; }
  #titan-landing .tl-page-block { padding: 18px !important; margin-bottom: 12px !important; }
  #titan-landing .tl-page-block h2 { font-size: 18px !important; }
  #titan-landing .tl-page-block p { font-size: 13.5px !important; }
  #titan-landing .tl-page-list { grid-template-columns: 1fr !important; }
  #titan-landing .tl-page-cta-row .tl-cta { width: 100% !important; }
}

/* ============================================================
   ★ NAV REDESIGN — pill-style links with section-accent colors
   matching each page's identity, plus breathing room under the
   sticky nav so page content never bumps into it.
   ============================================================ */

/* Brand: add tagline + cursor + tighter layout */
#titan-landing .tl-brand {
  cursor: pointer;
  align-items: center;
  gap: 8px;
}
#titan-landing .tl-brand-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: #7a7a7e;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 0.25s ease, border-color 0.25s ease;
}
#titan-landing .tl-brand:hover .tl-brand-sub {
  color: #b8b8bc;
  border-left-color: rgba(255, 122, 0, 0.4);
}
#titan-landing .tl-brand:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 4px;
}
#titan-landing.tl-nav-scrolled .tl-brand-sub {
  font-size: 10px;
  opacity: 0.8;
}

/* Nav links: pill buttons with per-section accent colors */
#titan-landing .tl-navlinks {
  gap: 4px;
  font-size: 11px;
  letter-spacing: 2px;
}
#titan-landing .tl-navlinks a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  color: #b8b8bc;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 700;
  letter-spacing: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
#titan-landing .tl-navlinks a::after { display: none; } /* drop the old underline animation */
#titan-landing .tl-navlinks a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--nav-glow, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
}

/* Per-link accent colors — match each page's eyebrow color
   (orange/cyan/green/orange/green/cyan/magenta) so the nav reads
   as a colour-coded map of the site. */
#titan-landing .tl-navlinks a[data-tl-page="features"]   { --nav-c: #ff7a00; --nav-cr: 255,122,0; }
#titan-landing .tl-navlinks a[data-tl-page="hardware"]   { --nav-c: #00d4ff; --nav-cr: 0,212,255; }
#titan-landing .tl-navlinks a[data-tl-page="sound"]      { --nav-c: #5cf0a0; --nav-cr: 92,240,160; }
#titan-landing .tl-navlinks a[data-tl-page="pricing"]    { --nav-c: #ffb347; --nav-cr: 255,179,71; }
#titan-landing .tl-navlinks a[data-tl-page="academy"]    { --nav-c: #5cf0a0; --nav-cr: 92,240,160; }
#titan-landing .tl-navlinks a[data-tl-page="faq"]        { --nav-c: #7fefff; --nav-cr: 127,239,255; }
#titan-landing .tl-navlinks a[data-tl-page="contact"]    { --nav-c: #d680ff; --nav-cr: 214,128,255; }

/* Hover: lift, accent glow, colored border */
#titan-landing .tl-navlinks a:hover {
  color: var(--nav-c, var(--orange)) !important;
  background: rgba(var(--nav-cr, 255 122 0), 0.08);
  border-color: rgba(var(--nav-cr, 255 122 0), 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--nav-cr, 255 122 0), 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#titan-landing .tl-navlinks a:focus-visible {
  outline: 2px solid var(--nav-c, var(--orange));
  outline-offset: 3px;
}

/* Active state — highlight the nav link for the page the user is on */
#titan-landing.tl-on-features .tl-navlinks a[data-tl-page="features"],
#titan-landing.tl-on-hardware .tl-navlinks a[data-tl-page="hardware"],
#titan-landing.tl-on-sound .tl-navlinks a[data-tl-page="sound"],
#titan-landing.tl-on-pricing .tl-navlinks a[data-tl-page="pricing"],
#titan-landing.tl-on-faq .tl-navlinks a[data-tl-page="faq"],
#titan-landing.tl-on-contact .tl-navlinks a[data-tl-page="contact"] {
  color: var(--nav-c) !important;
  background: rgba(var(--nav-cr), 0.12);
  border-color: rgba(var(--nav-cr), 0.5);
  box-shadow: 0 0 16px rgba(var(--nav-cr), 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Tighten the sticky nav padding when scrolled */
#titan-landing.tl-nav-scrolled .tl-navlinks a { padding: 6px 12px; }

/* ── Breathing room: page content never bumps the sticky nav ── */
#titan-landing .tl-page {
  padding-top: clamp(16px, 2.4vw, 28px);
  /* Subtle top fade so content slides under the sticky nav softly */
  position: relative;
}
#titan-landing .tl-page::before {
  content: '';
  position: sticky;
  top: 0;
  display: block;
  height: 24px;
  margin-top: -24px;
  background: linear-gradient(180deg, var(--bg-tint, #07070a) 0%, transparent 100%);
  pointer-events: none;
  z-index: 49;
}
/* Same fade for home content when sticky nav is active */
#titan-landing .tl-home-content {
  scroll-margin-top: 80px;
}

/* Mobile nav adjustments */
@media (max-width: 720px) {
  #titan-landing .tl-brand-sub { display: none !important; }
  #titan-landing .tl-navlinks {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    width: 100%;
    padding: 4px 0;
    gap: 4px !important;
  }
  #titan-landing .tl-navlinks::-webkit-scrollbar { height: 3px; }
  #titan-landing .tl-navlinks::-webkit-scrollbar-thumb {
    background: rgba(255, 138, 26, 0.4);
    border-radius: 2px;
  }
  #titan-landing .tl-navlinks a {
    flex: 0 0 auto !important;
    padding: 7px 11px !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
  }
  #titan-landing .tl-page { padding-top: 12px !important; }
}


/* ── Auth modal: small "use different email" link button ── */
.auth-link-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 10px;
  margin-top: 4px;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
}
.auth-link-btn:hover {
  color: var(--orange);
  background: rgba(255, 122, 0, 0.06);
}
.auth-link-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ============================================================
   ★ HAMBURGER + MOBILE SIDEBAR (replaces inline nav on phones)
   ============================================================ */

/* Hamburger button — desktop hidden, mobile shown */
.tl-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 138, 26, 0.3);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  flex: 0 0 auto;
}
.tl-nav-toggle:hover {
  background: rgba(255, 138, 26, 0.1);
  border-color: rgba(255, 138, 26, 0.6);
}
.tl-nav-toggle:active { transform: scale(0.96); }
.tl-nav-toggle:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.tl-burger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
  height: 14px;
  justify-content: space-between;
}
.tl-burger i {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--orange);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.25s ease;
  box-shadow: 0 0 6px rgba(255, 138, 26, 0.5);
}
.tl-nav-toggle[aria-expanded="true"] .tl-burger i:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.tl-nav-toggle[aria-expanded="true"] .tl-burger i:nth-child(2) {
  opacity: 0;
}
.tl-nav-toggle[aria-expanded="true"] .tl-burger i:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Sidebar drawer */
.tl-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99998;
}
.tl-sidebar-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.tl-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: linear-gradient(180deg, #14141a 0%, #07070a 100%);
  border-left: 1px solid rgba(255, 138, 26, 0.25);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.6);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tl-sidebar.open { transform: translateX(0); }
@supports (padding: env(safe-area-inset-right)) {
  .tl-sidebar { padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
}
.tl-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tl-sidebar-brand {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 4px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
.tl-sidebar-brand .tl-tag {
  font-size: 10px;
  background: var(--orange);
  color: #000;
  padding: 4px 8px;
  border-radius: 3px;
  letter-spacing: 2px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.45);
}
.tl-sidebar-brand b { color: var(--orange); font-weight: 900; }
.tl-sidebar-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tl-sidebar-close:hover {
  background: rgba(255, 60, 60, 0.1);
  border-color: rgba(255, 60, 60, 0.4);
  color: #ff6060;
}
.tl-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
}
.tl-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  color: #c8c8cc;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.tl-sidebar-nav a:hover,
.tl-sidebar-nav a:focus-visible {
  background: rgba(255, 138, 26, 0.08);
  border-color: rgba(255, 138, 26, 0.4);
  transform: translateX(-2px);
  outline: none;
}
.tl-sidebar-nav .tl-sb-ico {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 138, 26, 0.2);
  border-radius: 8px;
  font-size: 18px;
  flex: 0 0 auto;
}
.tl-sidebar-nav .tl-sb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.tl-sidebar-nav .tl-sb-text b {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
}
.tl-sidebar-nav .tl-sb-text em {
  font-family: 'Share Tech Mono', monospace;
  font-style: normal;
  font-size: 10.5px;
  color: #7a7a7e;
  letter-spacing: 1px;
}
/* Per-link accent colour matches the page's theme */
.tl-sidebar-nav a[data-tl-page="features"] .tl-sb-ico { color: #ff7a00; border-color: rgba(255,122,0,0.35); }
.tl-sidebar-nav a[data-tl-page="hardware"] .tl-sb-ico { color: #00d4ff; border-color: rgba(0,212,255,0.35); }
.tl-sidebar-nav a[data-tl-page="sound"] .tl-sb-ico { color: #5cf0a0; border-color: rgba(92,240,160,0.35); }
.tl-sidebar-nav a[data-tl-page="pricing"] .tl-sb-ico { color: #ffb347; border-color: rgba(255,179,71,0.35); }
.tl-sidebar-nav a[data-tl-page="academy"] .tl-sb-ico { color: #5cf0a0; border-color: rgba(92,240,160,0.35); }
.tl-sidebar-nav a[data-tl-page="faq"] .tl-sb-ico { color: #7fefff; border-color: rgba(127,239,255,0.35); }
.tl-sidebar-nav a[data-tl-page="contact"] .tl-sb-ico { color: #d680ff; border-color: rgba(214,128,255,0.35); }
.tl-sidebar-foot {
  padding: 16px 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.tl-sidebar-cta {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #ff7a00, #ff5a00);
  color: #000;
  border: none;
  padding: 14px 18px;
  border-radius: 10px;
  cursor: pointer;
  text-transform: uppercase;
  min-height: 48px;
  box-shadow: 0 8px 24px rgba(255, 122, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.25s ease;
}
.tl-sidebar-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(255, 122, 0, 0.5); }
.tl-sidebar-version {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #5a5a5e;
  text-align: center;
  text-transform: uppercase;
}
body.tl-sidebar-open { overflow: hidden; }

/* Hide inline nav links on mobile, show hamburger */
@media (max-width: 720px) {
  #titan-landing .tl-navlinks { display: none !important; }
  .tl-nav-toggle { display: inline-flex !important; }
  /* Brand on mobile tightens up further */
  #titan-landing .tl-nav { gap: 8px !important; }
}
@media (min-width: 721px) {
  .tl-sidebar, .tl-sidebar-backdrop { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-sidebar { transition: none; }
  .tl-sidebar-backdrop { transition: none; }
}

/* ============================================================
   ★ MOBILE: TITAN bot mockup — narrow, centered, square-ish.
   Sits above the hero text but stays compact (not a stretched
   full-width banner) so the face reads cleanly on phones.
   ============================================================ */
@media (max-width: 720px) {
  #titan-landing .tl-hero { gap: 18px !important; }
  #titan-landing .tl-mock,
  #titan-landing .tl-mock-bot {
    order: -1 !important;
    width: 100% !important;
    max-width: 380px !important;
    aspect-ratio: 1/1 !important;
    max-height: 380px !important;
    margin: 0 auto 4px !important;
    border-radius: 14px !important;
  }
}
@media (max-width: 480px) {
  #titan-landing .tl-mock,
  #titan-landing .tl-mock-bot {
    max-width: 300px !important;
    max-height: 300px !important;
    aspect-ratio: 1/1 !important;
  }
}

/* ============================================================
   ★ WELCOME BANNER — slides in after a successful sign-in,
   auto-hides after 5.5 seconds.
   ============================================================ */
.welcome-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 99997;
  background: linear-gradient(135deg, rgba(20, 20, 26, 0.96), rgba(10, 10, 14, 0.96));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(92, 240, 160, 0.5);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(92, 240, 160, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  max-width: 90vw;
}
.welcome-banner.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.welcome-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}
.welcome-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5cf0a0, #00a858);
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 4px 14px rgba(92, 240, 160, 0.45);
}
.welcome-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.welcome-banner-text b {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
}
.welcome-banner-text span {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #9a9a9e;
}
.welcome-banner-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #9a9a9e;
  font-size: 16px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.2s ease, background 0.2s ease;
}
.welcome-banner-close:hover { color: #fff; background: rgba(255, 60, 60, 0.1); }
@media (prefers-reduced-motion: reduce) {
  .welcome-banner { transition: opacity 0.2s ease; transform: translateX(-50%) translateY(0) !important; }
}
@media (max-width: 480px) {
  .welcome-banner { top: 8px; padding: 10px 14px; }
  .welcome-banner-text b { font-size: 12px; }
  .welcome-banner-text span { font-size: 10px; }
}

/* OTP hint text below the email field */
.auth-otp-hint {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #9a9a9e;
  line-height: 1.5;
  background: rgba(255, 138, 26, 0.06);
  border: 1px dashed rgba(255, 138, 26, 0.25);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 4px;
}
.auth-otp-hint b { color: #ffb347; }

/* ============================================================
   ★ AUTH CHIP — make "signed in" unmissable
   The default chip was tiny (11px text, 5px padding) and easy
   to miss after Google OAuth redirected back. This styling
   keeps the same markup but turns it into a clear pill with
   an avatar circle, a pulsing green status dot, and a proper
   logout icon button.
   ============================================================ */
.header-bar .auth-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 10px !important;
  padding: 6px 8px 6px 6px !important;
  background: linear-gradient(180deg, rgba(28, 255, 143, 0.12), rgba(0, 0, 0, 0.4)) !important;
  border: 1px solid rgba(28, 255, 143, 0.55) !important;
  border-radius: 22px !important;
  box-shadow:
    0 4px 14px rgba(28, 255, 143, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-family: 'Orbitron', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  color: #5cf0a0;
  position: relative;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.header-bar .auth-chip:hover {
  box-shadow:
    0 6px 22px rgba(28, 255, 143, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Avatar circle: shows the first letter of the name */
.header-bar .auth-chip::before {
  content: attr(data-initial);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5cf0a0, #00a858);
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0;
  flex: 0 0 auto;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(28, 255, 143, 0.4);
}
/* Pulsing green status dot in the avatar's bottom-right corner */
.header-bar .auth-chip::after {
  content: '';
  position: absolute;
  left: 28px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00ff7a;
  border: 2px solid #07070a;
  box-shadow: 0 0 6px rgba(0, 255, 122, 0.7);
  animation: chipPulse 2s ease-in-out infinite;
}
@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(0, 255, 122, 0.7); }
  50%      { box-shadow: 0 0 12px rgba(0, 255, 122, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .header-bar .auth-chip::after { animation: none; }
}
.header-bar .auth-chip #authName {
  color: #fff !important;
  font-weight: 700;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  font-size: 12px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-bar .auth-chip .auth-logout {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  background: rgba(255, 60, 60, 0.08) !important;
  border: 1px solid rgba(255, 60, 60, 0.3) !important;
  border-radius: 50%;
  color: #ff8080 !important;
  font-size: 13px !important;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  flex: 0 0 auto;
}
.header-bar .auth-chip .auth-logout:hover {
  background: rgba(255, 60, 60, 0.2) !important;
  border-color: rgba(255, 60, 60, 0.6) !important;
  color: #fff !important;
  transform: scale(1.05);
}
.header-bar .auth-chip .auth-logout:focus-visible {
  outline: 2px solid #ff8080;
  outline-offset: 2px;
}
/* Mobile: keep the chip readable but tighter */
@media (max-width: 720px) {
  .header-bar .auth-chip {
    font-size: 11px !important;
    padding: 4px 6px 4px 4px !important;
    gap: 6px !important;
  }
  .header-bar .auth-chip::before { width: 24px !important; height: 24px !important; font-size: 12px !important; }
  .header-bar .auth-chip::after { left: 24px !important; top: 2px !important; }
  .header-bar .auth-chip #authName { max-width: 100px !important; font-size: 11px !important; }
}