/* ============================================================
   PARSHA — Control Room + Visual DJ demo console
   Faithful to the live app: Adobe-Premiere charcoal, Archivo UI,
   IBM Plex Mono readouts, blue #2f8cff, red #d94b4b, green #2fbf57.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg-0:#191919; --bg-1:#242424; --bg-2:#202020; --bg-3:#2b2b2b; --bg-4:#303030; --bg-5:#383838;
  --line-1:#343434; --line-2:#3c3c3c; --line-3:#444444;
  --ink-0:#f1f1f1; --ink-1:#b8b8b8; --ink-2:#8f8f8f; --ink-3:#777777;
  --blue:#2f8cff; --blue-2:#1473e6; --blue-soft:#cfe2ff; --blue-glow:rgba(47,140,255,.28);
  --green:#2fbf57; --green-2:#1f9a42; --green-glow:rgba(47,191,87,.35);
  --amber:#e3c23f; --red:#d94b4b; --red-2:#c23b3b; --red-soft:#f0bdbd; --red-glow:rgba(217,75,75,.32);
  --font:'Archivo',system-ui,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --r:8px; --r-sm:6px; --r-lg:12px;
  --shadow:0 18px 40px -22px rgba(0,0,0,.85);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg-0);color:var(--ink-0);font-family:var(--font);font-size:14px;
  -webkit-font-smoothing:antialiased;overflow:hidden}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mauto{margin-left:auto}
.app{height:100vh;display:flex;flex-direction:column}

/* ---------------- top bar ---------------- */
.topbar{flex:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;
  background:linear-gradient(180deg,#292929,#1c1c1c);border-bottom:1px solid #18181b;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
.tb-left,.tb-right{display:flex;align-items:center;gap:8px;min-width:0}
.tb-right{margin-left:auto}
.tb-logo{width:26px;height:26px;border-radius:6px;overflow:hidden;background:#101010;border:1px solid #3f3f3f;flex:none;display:block}
.tb-logo img{width:100%;height:100%;object-fit:cover;display:block}
.tb-brand{font-weight:900;font-size:15px;color:#ececec;white-space:nowrap;padding-right:6px}
.tb-brand em{font-style:italic;font-weight:600;color:#c9c9c9;margin-left:5px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#171717;border:1px solid #343434;border-radius:5px;
  padding:5px 9px;font-size:11.5px;color:var(--ink-1);white-space:nowrap}
.chip svg{width:13px;height:13px;color:var(--ink-2)}
.chip b{color:var(--ink-0);font-weight:600}
.chip .mono{font-size:11.5px;color:var(--ink-0)}
.chip.rec .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red-glow)}
.chip.rec.live .dot{animation:pulse 1.4s infinite}
@media(max-width:1180px){.chip.hide-md{display:none}}
@media(max-width:940px){.chip.hide-sm{display:none}}
.ic-btn{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;color:var(--ink-1);border:1px solid transparent}
.ic-btn:hover{background:var(--bg-3);border-color:var(--line-1)}
.ic-btn svg{width:16px;height:16px}
.sess{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px;background:#1b1b1d;border:1px solid #3a3a3d;
  border-radius:7px;font-size:12.5px;color:#ebebeb;white-space:nowrap}
.sess svg{width:14px;height:14px;color:var(--ink-2)}
.sess .mono{color:var(--green);font-size:11px}
.ghost{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid var(--line-2);
  border-radius:7px;background:transparent;color:var(--ink-1);font-size:12.5px;font-weight:600;white-space:nowrap;transition:.15s}
.ghost:hover{background:var(--bg-3);color:var(--ink-0);border-color:var(--line-3)}
.ghost svg{width:14px;height:14px}
.ghost.sm{height:26px;padding:0 9px;font-size:11.5px}
.ghost.danger{color:var(--red);border-color:rgba(217,75,75,.45)}
.ghost.danger:hover{background:rgba(217,75,75,.12);color:var(--red-soft)}
.sep{width:1px;height:20px;background:var(--line-2);margin:0 2px}
.winctrls{display:flex;align-items:center;gap:2px;margin-left:4px}
.winctrls i,.winctrls a{width:30px;height:30px;display:grid;place-items:center;color:var(--ink-2);font-style:normal;font-size:14px;border-radius:6px}
.winctrls a.x:hover{background:var(--red);color:#fff}
.winctrls i:hover{background:var(--bg-3)}

/* menu dropdown */
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:36px;z-index:60;min-width:190px;background:#1e1e1e;border:1px solid var(--line-3);
  border-radius:9px;box-shadow:var(--shadow);padding:6px;display:none}
.menu.open{display:block}
.menu a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:6px;font-size:13px;color:var(--ink-1)}
.menu a:hover{background:var(--bg-4);color:var(--ink-0)}
.menu a svg{width:15px;height:15px;color:var(--ink-2)}
.menu .div{height:1px;background:var(--line-1);margin:5px 4px}

/* ---------------- status bar ---------------- */
.statusbar{flex:none;position:relative;display:flex;align-items:center;gap:16px;height:34px;padding:0 14px;
  background:linear-gradient(180deg,#232323,#191919);border-top:1px solid #101010;
  font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.statusbar b{color:var(--ink-0);font-weight:600}
.sb-item{display:inline-flex;align-items:center;gap:6px}
.sb-play{color:var(--green)}
.sb-red{color:var(--red)}
.sb-logo{position:absolute;left:50%;top:-16px;transform:translateX(-50%);width:40px;height:40px;border-radius:9px;
  overflow:hidden;background:#0d0d0f;border:1px solid var(--line-3);box-shadow:var(--shadow)}
.sb-logo img{width:100%;height:100%;object-fit:cover}
.sb-master{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--ink-1)}
.hmeter{display:flex;gap:2px;align-items:flex-end;height:12px}
.hmeter i{width:3px;border-radius:1px;background:var(--green)}

/* ============================================================
   CONTROL ROOM
   ============================================================ */
.cr{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:14px 16px;overflow:auto}

.monitors{display:grid;grid-template-columns:1fr 96px 1fr;gap:12px;align-items:stretch}
.mon{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.mon.preview{border-color:var(--green)}
.mon.program{border-color:var(--red)}
.mon-head{display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.mon.preview .mh-l{color:#bfe6cd}
.mon.program .mh-l{color:var(--red-soft)}
.mon-head .mh-r{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--ink-2);letter-spacing:.04em;text-transform:none;font-weight:600;font-size:11.5px}
.mon-stage{position:relative;width:100%;aspect-ratio:16/9;
  background:radial-gradient(120% 90% at 50% 20%,#141414,#050608 75%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.55),inset 0 2px 12px rgba(0,0,0,.6)}
.mon-stage .feed{position:absolute;inset:0;transition:opacity .35s}
.mon-stage .portrait{position:absolute;inset:0;background:
  radial-gradient(38% 46% at 50% 44%,rgba(150,160,175,.16),transparent 60%),
  radial-gradient(120% 90% at 50% 15%,#151515,#040507 78%)}
.mon-stage .wm{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:26px;height:26px;opacity:.5}
.mon-stage .badge{position:absolute;top:10px;right:10px;z-index:3;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  color:var(--ink-1);background:rgba(10,10,12,.72);border:1px solid var(--line-2);padding:3px 8px;border-radius:5px}
.mon-stage .l3{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;border-radius:5px;overflow:hidden;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.8)}
.mon-stage .l3 .bar{width:4px;background:var(--blue)}
.mon-stage .l3 .bd{background:linear-gradient(180deg,rgba(12,12,14,.94),rgba(12,12,14,.86));padding:6px 12px}
.mon-stage .l3 b{font-weight:700;font-size:13px}
.mon-stage .go-row{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;gap:8px}
.golive{height:30px;padding:0 16px;border-radius:7px;background:var(--blue);border:1px solid var(--blue-2);color:#fff;
  font-weight:800;font-size:12.5px;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px -6px var(--blue-glow)}
.golive:hover{background:var(--blue-2)}
.golive.live{background:var(--red);border-color:var(--red-2);box-shadow:0 0 0 1px var(--red),0 0 16px -3px var(--red-glow);animation:pulse 1.5s infinite}

/* take column */
.take-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.take-lbl,.take-fade{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.take{width:88px;height:38px;border-radius:7px;background:linear-gradient(180deg,#d5d9de,#b7bdc4);color:#1a1a1a;
  font-weight:900;font-size:13px;letter-spacing:.08em;border:1px solid #9aa0a7;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -6px rgba(0,0,0,.6)}
.take:active{transform:translateY(1px)}
.tbar{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:26px;height:150px;
  background:transparent;cursor:pointer}
.tbar::-webkit-slider-runnable-track{width:6px;background:linear-gradient(180deg,#0e0e0e,#1c1c1c);border:1px solid var(--line-3);border-radius:4px}
.tbar::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:16px;border-radius:4px;margin-left:-9px;
  background:linear-gradient(180deg,#e6e9ee,#b8bec6);border:1px solid #8b9198;box-shadow:0 2px 6px rgba(0,0,0,.5)}

/* scene strip + switch bar */
.scene-row{display:flex;gap:8px}
.scenes{display:flex;align-items:center;gap:10px;padding:14px;background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--r-lg);min-height:70px}
.scenes-empty{color:var(--ink-3);font-size:13px}
.scene-new{margin-left:auto;min-width:110px;height:56px;border:1px dashed var(--line-3);border-radius:9px;color:var(--ink-2);
  font-size:12.5px;font-weight:600;background:var(--bg-1)}
.scene-new:hover{color:var(--ink-0);border-color:var(--ink-3)}
.switchbar{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1)}
.switchbar .lbl{font-size:12px;color:var(--ink-2)}
.sel{height:30px;padding:0 10px;background:var(--bg-3);border:1px solid var(--line-3);border-radius:7px;color:var(--ink-0);
  font:inherit;font-size:12.5px;min-width:120px}

/* media + sequencer */
.deck2{display:grid;grid-template-columns:320px minmax(0,1fr);gap:12px}
.pane{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-lg);padding:12px;min-width:0;display:flex;flex-direction:column}
.pane-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.pane-head h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:800}
.pane-head .count{background:var(--bg-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 7px;font-size:11px;color:var(--ink-1);font-weight:600}
.media-grid{display:flex;flex-direction:column;gap:8px;overflow:auto;max-height:300px}
.mtile{display:grid;grid-template-columns:86px minmax(0,1fr);gap:9px;align-items:center}
.mtile .thumb{aspect-ratio:16/9;border-radius:6px;background:linear-gradient(180deg,#101010,#05070e);border:1px solid var(--line-1);
  display:grid;place-items:center;font-size:8.5px;font-weight:800;letter-spacing:.06em;color:var(--ink-3);overflow:hidden;position:relative}
.mtile .thumb.sel{outline:2px solid var(--blue);outline-offset:-1px}
.mtile .thumb .vj{position:absolute;inset:0;background:radial-gradient(60% 70% at 40% 45%,rgba(120,90,220,.85),transparent 60%),radial-gradient(50% 60% at 72% 60%,rgba(50,180,210,.8),transparent 60%),#06060c}
.mtile .m-title{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtile .m-kind{font-size:11px;color:var(--ink-2)}
.seq-tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.seq-tab{height:34px;padding:0 12px;background:var(--blue);border:1px solid var(--blue-2);border-radius:7px;color:#fff;
  display:flex;flex-direction:column;justify-content:center;line-height:1.1}
.seq-tab b{font-size:12.5px;font-weight:700}
.seq-tab span{font-size:10px;opacity:.85}
.seq-tools{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.seq-tools .tname{height:28px;padding:0 10px;background:var(--bg-3);border:1px solid var(--line-3);border-radius:6px;color:var(--ink-0);font:inherit;font-size:12px;min-width:120px}
.filmstrip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.shot{flex:0 0 200px;background:#171717;border:2px solid var(--line-3);border-radius:8px;overflow:hidden}
.shot.active{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-glow)}
.shot .sthumb{position:relative;aspect-ratio:16/9;background:linear-gradient(180deg,#0c0c0c,#050608)}
.shot .sthumb.vj{background:radial-gradient(55% 70% at 45% 45%,rgba(120,90,220,.9),transparent 60%),radial-gradient(50% 60% at 72% 62%,rgba(50,180,210,.85),transparent 60%),#06060c}
.shot .idx{position:absolute;top:7px;left:7px;min-width:18px;height:18px;display:grid;place-items:center;font-size:11px;font-weight:700;
  background:rgba(7,12,20,.8);border:1px solid rgba(255,255,255,.14);border-radius:5px;color:#fff}
.shot .smeta{padding:8px 10px}
.shot .smeta b{font-size:12.5px;font-weight:700}
.shot .smeta span{display:block;font-size:11px;color:var(--ink-2);font-family:var(--mono)}

/* ============================================================
   VISUAL DJ
   ============================================================ */
.vdj{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:14px 16px;overflow:auto}
.decks{display:grid;grid-template-columns:1fr 240px 1fr;gap:12px;align-items:start}
.deck{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line-1);border-radius:var(--r-lg);padding:13px}
.deck.a{border-top:2px solid var(--green)}
.deck.b{border-top:2px solid var(--blue)}
.deck-top{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.deck-name{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.deck.a .deck-name{color:var(--green)}
.deck.b .deck-name{color:var(--blue)}
.deck-track{min-width:0}
.deck-track b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-track span{font-size:11px;color:var(--ink-2)}
.deck-bpm{margin-left:auto;font-family:var(--mono);font-size:16px;font-weight:600;color:#cdd3da;text-align:right}
.deck-bpm small{display:block;font-size:9px;letter-spacing:.14em;color:var(--ink-3)}
.wave{height:64px;border-radius:8px;background:linear-gradient(180deg,#080b12,#0e0e0e);border:1px solid var(--line-1);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.6);overflow:hidden;position:relative;display:flex;align-items:center;gap:2px;padding:0 8px}
.wave i{flex:1;border-radius:1px;opacity:.9}
.deck.a .wave i{background:linear-gradient(180deg,#5fe08d,#1f9a42)}
.deck.b .wave i{background:linear-gradient(180deg,#7db6ff,#1f6fd6)}
.wave .playhead{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.6)}
.deck-mid{display:flex;gap:12px;margin-top:12px}
.jog{width:92px;height:92px;flex:none;border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 42%,#2c2c2c,#101010 62%,#121215 100%);border:1px solid var(--line-3);
  box-shadow:inset 0 0 20px rgba(0,0,0,.7),0 4px 12px rgba(0,0,0,.5)}
.jog::after{content:"";position:absolute;inset:30%;border-radius:50%;background:#0c0c0e;border:1px solid #262626}
.jog .mark{position:absolute;left:50%;top:8px;width:2px;height:34px;margin-left:-1px;transform-origin:50% 38px;border-radius:2px}
.deck.a .jog .mark{background:var(--green);box-shadow:0 0 8px var(--green-glow)}
.deck.b .jog .mark{background:var(--blue);box-shadow:0 0 8px var(--blue-glow)}
.jog.spin .mark{animation:spin 1.8s linear infinite}
.deck-ctrls{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.transport{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.tbtn{height:32px;border-radius:6px;background:var(--bg-3);border:1px solid var(--line-3);color:var(--ink-1);font-size:12px;font-weight:700;letter-spacing:.02em}
.tbtn:hover{background:var(--bg-4);color:var(--ink-0)}
.tbtn.play.on{color:#06140b;background:var(--green);border-color:var(--green-2)}
.deck.b .tbtn.play.on{color:#06122e;background:var(--blue);border-color:var(--blue-2)}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.mbtn{height:24px;border-radius:5px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink-2);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.mbtn.on{color:var(--ink-0);border-color:var(--line-3);background:var(--bg-4)}
.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.pad{height:30px;border-radius:6px;font-size:10px;font-weight:800;color:#0c0c0c;border:1px solid rgba(0,0,0,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.pad.p1{background:#d94b4b}.pad.p2{background:#e08a3c}.pad.p3{background:#d9c53c}.pad.p4{background:#4bd07a}
.pad.p5{background:#3cc6d9}.pad.p6{background:#3c8ad9}.pad.p7{background:#8a6bff}.pad.p8{background:#d94bc0}
.pad:active{filter:brightness(1.2)}
.eq{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.eq .knobrow{display:flex;align-items:center;gap:9px}
.eq .kl{width:34px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.hslider{-webkit-appearance:none;appearance:none;flex:1;height:5px;border-radius:3px;background:linear-gradient(90deg,#0e0e0e,#2a2a2a);outline:none}
.hslider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:17px;border-radius:4px;background:linear-gradient(180deg,#e6e9ee,#b8bec6);border:1px solid #8b9198}

/* mixer */
.mixer{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line-1);border-radius:var(--r-lg);padding:13px;display:flex;flex-direction:column;gap:12px}
.mix-head{display:flex;align-items:center;gap:8px}
.mix-head .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-2)}
.mix-head .linked{margin-left:auto;background:var(--green);color:#061014;font-size:9.5px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:999px}
.channels{display:flex;justify-content:center;gap:16px}
.chan{display:flex;flex-direction:column;align-items:center;gap:6px}
.chan .stack{display:flex;gap:6px;align-items:flex-end;height:120px}
.vfader{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:22px;height:120px;background:transparent;cursor:pointer}
.vfader::-webkit-slider-runnable-track{width:6px;background:linear-gradient(180deg,#0e0e0e,#1c1c1c);border:1px solid var(--line-3);border-radius:4px}
.vfader::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:12px;border-radius:3px;margin-left:-7px;background:linear-gradient(180deg,#e6e9ee,#b8bec6);border:1px solid #8b9198}
.chan.a .vfader{accent-color:var(--green)}.chan.b .vfader{accent-color:var(--blue)}
.vu{width:9px;height:120px;border-radius:3px;background:#0e0e0e;border:1px solid var(--line-2);overflow:hidden;position:relative}
.vu .fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#d94b4b 0%,#e3c23f 22%,#2fbf57 60%);
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 5px);mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 5px)}
.chan .cl{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.crossfader{display:flex;flex-direction:column;gap:5px}
.crossfader .xf{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:5px;background:linear-gradient(90deg,#0e0e0e,#2a2a2a);outline:none}
.crossfader .xf::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:24px;border-radius:5px;background:linear-gradient(180deg,#e6e9ee,#b8bec6);border:1px solid #8b9198}
.crossfader .xl{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.mix-stage{flex:1;min-height:90px;border-radius:9px;border:1px solid rgba(217,75,75,.35);position:relative;overflow:hidden;
  background:radial-gradient(80% 90% at 50% 30%,rgba(60,90,160,.28),#08080c 75%);display:grid;place-items:center}
.mix-stage .lbl{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.xacts{display:flex;gap:6px}
.xacts .tbtn{flex:1;height:26px;font-size:10.5px}

/* library */
.library{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line-1);border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;min-height:0}
.lib-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.lib-head .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-2)}
.lib-search{flex:1;height:30px;background:var(--bg-3);border:1px solid var(--line-3);border-radius:7px;color:var(--ink-0);
  padding:0 11px;font:inherit;font-size:12.5px}
.lib-search::placeholder{color:var(--ink-3)}
.lib-list{display:flex;flex-direction:column;overflow:auto;max-height:260px}
.trow{display:grid;grid-template-columns:120px minmax(0,1fr) auto auto auto;gap:12px;align-items:center;
  padding:8px 6px;border-bottom:1px solid var(--line-1)}
.trow:hover{background:var(--bg-2)}
.trow .tthumb{height:44px;border-radius:5px;position:relative;overflow:hidden;background:#0a0a0e}
.trow .tthumb .g{position:absolute;inset:0}
.trow .tthumb .d{position:absolute;right:4px;bottom:3px;font-family:var(--mono);font-size:9px;background:rgba(0,0,0,.6);padding:1px 4px;border-radius:3px;color:#ddd}
.trow .ti b{font-size:13px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .ti span{font-size:11px;color:var(--ink-2)}
.trow .bpm{font-family:var(--mono);font-size:12.5px;color:var(--ink-1);text-align:right}
.trow .key{font-family:var(--mono);font-size:12px;font-weight:700;padding:2px 7px;border-radius:5px}
.key.g{color:#7be0a1;background:rgba(47,191,87,.14)}.key.o{color:#e0b06a;background:rgba(227,150,60,.14)}
.key.b{color:#8fc0ff;background:rgba(47,140,255,.14)}.key.v{color:#c3a6ff;background:rgba(150,110,255,.14)}
.trow .st{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.st.a{color:#8ff0b3;background:rgba(47,191,87,.16)}.st.b{color:#9cc7ff;background:rgba(47,140,255,.16)}.st.r{color:var(--ink-2);background:var(--bg-3)}
.lib-foot{display:flex;align-items:center;gap:9px;margin-top:10px;flex-wrap:wrap;color:var(--ink-3);font-size:11.5px}

/* animations */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.jog.spin .mark,.golive.live,.chip.rec.live .dot{animation:none}}

@media(max-width:1100px){
  .monitors{grid-template-columns:1fr}
  .take-col{flex-direction:row;justify-content:center}
  .tbar{writing-mode:horizontal-tb;width:150px;height:26px}
  .decks{grid-template-columns:1fr}
  .deck2{grid-template-columns:1fr}
}