/* css/axiom-compact.css — one-screen app shell, menus, knobs, sequencer lanes.
 * Load AFTER css/style.css. This is a starting point: tune values against the
 * real style.css, and move inline style="" attributes out of index.html where
 * they fight these rules (inline styles beat stylesheet rules).
 */
:root {
  --vw: 1vw; --vh: 1vh;   /* js/uiscale.js overrides them so window-based sizes follow the UI zoom */
  --ui-gap: 6px;
  --knob-size: 30px;
  --pads-col: clamp(250px, calc(28 * var(--vw)), 420px);
  --final-col: clamp(190px, calc(20 * var(--vw)), 270px);
  --looper-h: 44px;
  --pads-head-h: 28px;
  --seq-max-h: calc(48 * var(--vh));
}

/* ---------- App shell: no page scroll, sequencer always on screen ---------- */
html, body { height: 100%; margin: 0; overflow: hidden; }

.workstation-chassis {
  height: calc(100 * var(--vh));
  height: calc(100 * var(--vh));
  box-sizing: border-box;
  max-width: none;
  margin: 0;
  padding: var(--ui-gap);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--ui-gap);
  overflow: hidden;
}

/* ---------- Top bar (header + top rack merged) ---------- */
.ax-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 4px 8px;
  box-sizing: border-box;
}

.ax-topbar .ax-group { display: flex; align-items: center; gap: 4px; }

.ax-topbar .ax-spacer { flex: 1 1 0; }

.ax-topbar .brand-title { font-size: 13px; letter-spacing: 1px; }
.ax-topbar .brand-subtitle { font-size: 8px; letter-spacing: 0.5px; }
.ax-topbar .btn-transport { padding: 3px 7px; font-size: 9px; }
.ax-topbar .led-display-box { padding: 1px 4px; min-width: 0; }
.ax-topbar .led-display-box .label { font-size: 7px; }
.ax-topbar .led-display-box .led-digits { font-size: 11px; }
.ax-topbar .led-display-box input { height: 16px; font-size: 9px; padding: 0 2px; }
.ax-topbar .control-item { font-size: 8px; }
.ax-topbar .category-select { font-size: 9px; padding: 2px 4px; }
.ax-topbar canvas { height: 32px; width: 90px; }

#axiom-build { font: 700 9px var(--font-mono, monospace); color: var(--text-dim, #7a8494); }

#axiom-build.build-mismatch { color: #fff; background: #b3261e; padding: 1px 6px; border-radius: 3px; }

/* ---------- Dropdown menus (FILE / MIDI / SETTINGS) ---------- */
details.ax-menu { position: relative; }

details.ax-menu > summary { list-style: none; cursor: pointer; user-select: none; }

details.ax-menu > summary::-webkit-details-marker { display: none; }

.ax-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 900;                 /* above the deck, below .modal-overlay — check style.css */
  min-width: 230px;
  max-height: calc(75 * var(--vh));
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--bg-panel, #11151c);
  border: 1px solid #2a3140;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.ax-menu-panel .btn-transport { justify-content: flex-start; width: 100%; box-sizing: border-box; }

.ax-menu-panel .ax-menu-heading {
  margin: 6px 0 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-dim, #7a8494);
}

/* ---------- Middle: pads | editor ---------- */
.middle-deck {
  display: grid;
  grid-template-columns: var(--pads-col) minmax(0, 1fr);
  gap: var(--ui-gap);
  min-height: 0;
  margin: 0;
}

.pads-panel-box {
  container-type: size;          /* lets the 4x4 grid size itself to the space it actually has */
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap);
}

.drum-pads-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 5px;
  width: min(100cqw, calc(100cqh - var(--looper-h) - var(--pads-head-h) - 2 * var(--ui-gap)));
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  flex: 0 0 auto;
}

.drum-pads-matrix .drum-pad { min-width: 0; min-height: 0; }

#pad-looper-tool { height: var(--looper-h); box-sizing: border-box; flex: 0 0 auto; }

.deep-deck-box {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.deep-deck-box > .engine-content-panel:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Pad editor: engine on the left, Final Stage as a right column, LFO under the engine */
#panel-deep-pad-editor:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--final-col);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head  head"
    "synth final"
    "lfo   final";
  gap: var(--ui-gap);
  overflow: hidden;
}

#panel-deep-pad-editor > .panel-sub-header { grid-area: head; }

#pad-window-synth { grid-area: synth; min-height: 0; overflow: auto; }

#pad-window-lfo   { grid-area: lfo; margin-top: 0; }

#pad-window-final { grid-area: final; min-height: 0; overflow: auto; margin-top: 0; }

#pad-window-lfo.is-collapsed .lfo-tab-panel { display: none; }

/* ---------- Bottom: sequencer ---------- */
.bottom-deck-sequencer {
  min-height: 0;
  max-height: var(--seq-max-h);
  overflow: auto;
  padding: 4px 8px;
  gap: 4px;
}

.sequencer-top-controls {
  padding-bottom: 2px;
  gap: 3px 6px;
}

.sequencer-preset-management {
  flex-wrap: wrap;
  gap: 2px;
}

.sequencer-preset-management .btn-transport {
  padding: 2px 5px;
  font-size: 8px;
}

.step-automation-toolbar {
  padding: 2px 6px;
  margin-bottom: 2px;
  gap: 3px;
}

.step-automation-toolbar .btn-transport {
  padding: 2px 5px;
  font-size: 8px;
}

.sequencer-track-main-header {
  padding: 2px 6px;
  margin-bottom: 2px;
}

.sequencer-top-controls .sequence-slot-btn {
  padding: 2px 4px;
  font-size: 8px;
  min-width: 20px;
}

.sequencer-top-controls .bar-btn {
  padding: 2px 4px;
  font-size: 8px;
}

.active-step-btn {
  height: 26px;
  padding: 1px 2px;
}

.active-step-num {
  font-size: 8px;
}

.active-step-mod-badge {
  font-size: 6px;
  padding: 0 1px;
}

.step-edit-tool-card {
  gap: 1px;
  padding: 2px 1px;
}

.step-mini-select {
  font-size: 7px;
  padding: 1px 2px;
  height: 15px;
}

.step-mini-row {
  font-size: 7px;
  line-height: 1;
}

.step-mini-slider {
  height: 8px;
  margin: 1px 0;
}

/* ---------- Rotary knobs (js/knob.js) ---------- */
.axk-src {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.axk-field { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }

.axk-field .header-val,
.axk-field .sub-mixer-label-row { width: 100%; }

.params-grid:has(.axk-field) { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px 4px; }

.axk-dial {
  --p: 0;
  position: relative;
  flex: 0 0 auto;
  width: var(--knob-size);
  height: var(--knob-size);
  border-radius: 50%;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  outline: none;
  background:
    radial-gradient(closest-side, var(--bg-panel-inset, #14171d) calc(100% - 4px), transparent calc(100% - 3px)),
    conic-gradient(from 225deg,
      var(--knob-accent, var(--accent-orange, #ff6a00)) 0deg calc(var(--p) * 270deg),
      var(--knob-track, #2a2f38) calc(var(--p) * 270deg) 270deg,
      transparent 270deg);
}

.axk-dial::after {                       /* pointer line */
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  top: 4px;
  width: 2px;
  height: calc(50% - 4px);
  border-radius: 1px;
  background: var(--text-main, #e6e9ef);
  transform-origin: 50% 100%;
  transform: rotate(calc(-135deg + var(--p) * 270deg));
}

.axk-dial:focus-visible { box-shadow: 0 0 0 2px var(--accent-cyan, #00ffd0); }

.axk-dial.is-dragging { filter: brightness(1.3); }

.axk-dial.is-disabled { opacity: 0.35; cursor: not-allowed; }

/* MIDI Learn: mirror whatever class app.js adds to learnable / selected sliders */
.axk-src.midi-learnable + .axk-dial {
  outline: 1px dashed var(--accent-orange, #ff6a00);
  outline-offset: 2px;
}
.axk-src.midi-learning + .axk-dial {
  outline: 2px solid var(--accent-cyan, #00ffd0);
  outline-offset: 2px;
  box-shadow: 0 0 8px var(--accent-cyan, #00ffd0);
}
/* ---------- Sequencer value lane (VEL / PAN / MICRO / MOD) ---------- */
.seq-lane-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid #1f242e;
}

.seq-lane-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
}

.seq-lane-tab {
  background: #14171d;
  border: 1px solid #28303d;
  color: var(--text-dim, #7a8494);
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.seq-lane-tab:hover {
  color: #fff;
  border-color: #3e4a5d;
}

.seq-lane-tab.active {
  background: #00332a;
  color: var(--accent-cyan, #00ffd0);
  border-color: var(--accent-cyan, #00ffd0);
  box-shadow: 0 0 6px rgba(0, 255, 208, 0.2);
}

.seq-lane-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 5px;
  height: 38px;
  touch-action: none;
}

/* use the SAME grid-template-columns as the step row */
.seq-lane-cell {
  position: relative;
  background: #11151c;
  border: 1px solid #232730;
  border-radius: 2px;
  overflow: hidden;
}

.seq-lane-cell .bar {                    /* --lo / --len are set by AxiomUI.renderLaneCell() */
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: calc(var(--lo, 0) * 100%);
  height: calc(var(--len, 0) * 100%);
  min-height: 1px;
  background: var(--accent-cyan, #00ffd0);
  opacity: 0.85;
}

.seq-lane-cell.bipolar::before {         /* centre line for PAN / MICRO */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed #3a4250;
}

.seq-lane-cell.step-off .bar { opacity: 0.25; }

.seq-lane-cell .mod-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 9px var(--font-mono, monospace);
  color: var(--text-main, #e6e9ef);
}

/* ---------- Tighter sizes on short / narrow screens ---------- */
@media (max-height: 820px) {
  :root { --knob-size: 26px; --looper-h: 36px; --seq-max-h: calc(48 * var(--vh)); }
}

@media (max-width: 1280px) {
  :root { --pads-col: clamp(220px, calc(26 * var(--vw)), 300px); --final-col: 180px; }
}

/* =====================================================================
 * v9.3 LAYOUT: focus views.  <div class="workstation-chassis" data-view="pads|sound|seq" data-seq="full|min" data-pads="show|hide">
 *   PADS  - big square pads on the left (no window), sound editor beside them, compact sequencer below
 *   SOUND - pads shrink to a one-row strip, the synth / sampler / loop / aux editor gets the whole middle, slim sequencer
 *   SEQ   - pads strip + one-line editor header, the sequencer gets the whole screen
 * Switched by js/layout.js (F1/F2/F3 or the buttons in the top bar). All element IDs are unchanged.
 * ===================================================================== */
.ax-viewswitch { gap: 3px; margin-right: 8px; }

.view-btn {
  background: #1a1f27;
  border: 1px solid #323a48;
  color: var(--text-dim, #8c97a8);
  font: 800 10px var(--font-mono, monospace);
  letter-spacing: 0.8px;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.view-btn:hover { color: #fff; border-color: #55627a; }
.view-btn.active {
  background: #00332a;
  color: var(--accent-cyan, #00ffd0);
  border-color: var(--accent-cyan, #00ffd0);
  box-shadow: 0 0 8px rgba(0, 255, 208, 0.25);
}
.view-btn.view-toggle { padding: 5px 7px; font-size: 9px; border-style: dashed; }
.view-btn.view-toggle.is-collapsed { color: var(--accent-orange, #ff6a00); border-color: var(--accent-orange, #ff6a00); }

/* ---- Pads: no window chrome in any view ---- */
.pads-panel-box {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.pads-panel-box > .panel-sub-header { display: none; }

.pads-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.pads-toolbar .btn-transport { padding: 6px 12px; font-size: 11px; }
.pads-keys-hint { margin-left: auto; font: 9px var(--font-mono, monospace); color: var(--text-dim, #7a8494); }

.drum-pads-matrix .drum-pad { aspect-ratio: auto; }

/* ---- PADS view ---- */
.workstation-chassis[data-view="pads"] {
  --pads-head-h: 0px;
  --toolbar-h: 38px;
  --pads-col: clamp(280px, calc(calc(100 * var(--vh)) - 440px), calc(50 * var(--vw)));
  --seq-max-h: calc(32 * var(--vh));
  --knob-size: 34px;
}
.workstation-chassis[data-view="pads"] .middle-deck { grid-template-columns: var(--pads-col) minmax(0, 1fr); }
.workstation-chassis[data-view="pads"] .drum-pads-matrix {
  width: min(100cqw, calc(100cqh - var(--looper-h) - var(--toolbar-h) - 3 * var(--ui-gap)));
  gap: 7px;
}
.workstation-chassis[data-view="pads"] .drum-pad { border-width: 2px; border-radius: 10px; padding: 8px 10px; }
.workstation-chassis[data-view="pads"] .drum-pad .pad-name { font-size: clamp(10px, calc(1.25 * var(--vw)), 16px); }
.workstation-chassis[data-view="pads"] .drum-pad .pad-key-badge { font-size: clamp(10px, calc(1 * var(--vw)), 13px); padding: 2px 6px; }
.workstation-chassis[data-view="pads"] .drum-pad .pad-num { font-size: 12px; }

/* ---- SOUND / SEQ views: pads become a strip, editor / sequencer take the rest ---- */
.workstation-chassis[data-view="sound"] .middle-deck,
.workstation-chassis[data-view="seq"] .middle-deck {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.workstation-chassis[data-view="sound"][data-pads="hide"] .middle-deck,
.workstation-chassis[data-view="seq"][data-pads="hide"] .middle-deck { grid-template-rows: minmax(0, 1fr); }
.workstation-chassis[data-view="sound"][data-pads="hide"] .pads-panel-box,
.workstation-chassis[data-view="seq"][data-pads="hide"] .pads-panel-box { display: none; }

.workstation-chassis[data-view="sound"] .pads-panel-box,
.workstation-chassis[data-view="seq"] .pads-panel-box {
  flex-direction: row;
  align-items: stretch;
  container-type: normal;
  overflow: visible;
  gap: 6px;
}
.workstation-chassis[data-view="sound"] .drum-pads-matrix,
.workstation-chassis[data-view="seq"] .drum-pads-matrix {
  grid-template-columns: repeat(16, minmax(0, 1fr));
  grid-template-rows: 1fr;
  width: auto;
  height: 50px;
  aspect-ratio: auto;
  flex: 1 1 auto;
  margin: 0;
  gap: 4px;
}
.workstation-chassis[data-view="sound"] .drum-pad,
.workstation-chassis[data-view="seq"] .drum-pad { padding: 2px 4px; border-radius: 5px; justify-content: center; align-items: center; }
.workstation-chassis[data-view="sound"] .drum-pad .pad-num,
.workstation-chassis[data-view="seq"] .drum-pad .pad-num,
.workstation-chassis[data-view="sound"] .drum-pad .pad-led,
.workstation-chassis[data-view="seq"] .drum-pad .pad-led { display: none; }
.workstation-chassis[data-view="sound"] .drum-pad .pad-key-badge,
.workstation-chassis[data-view="seq"] .drum-pad .pad-key-badge { align-self: center; font-size: 8px; padding: 0 3px; }
.workstation-chassis[data-view="sound"] .drum-pad .pad-name,
.workstation-chassis[data-view="seq"] .drum-pad .pad-name { font-size: 8px; max-width: 100%; text-align: center; letter-spacing: 0; }
.workstation-chassis[data-view="sound"] #pad-looper-tool,
.workstation-chassis[data-view="seq"] #pad-looper-tool { flex: 0 0 150px; width: 150px; height: 50px; margin: 0; padding: 2px 6px; }
.workstation-chassis[data-view="sound"] .pads-toolbar,
.workstation-chassis[data-view="seq"] .pads-toolbar { flex: 0 0 auto; flex-wrap: nowrap; }
.workstation-chassis[data-view="sound"] .pads-toolbar .btn-transport,
.workstation-chassis[data-view="seq"] .pads-toolbar .btn-transport { padding: 3px 8px; font-size: 9px; }
.workstation-chassis[data-view="sound"] .pads-keys-hint,
.workstation-chassis[data-view="seq"] .pads-keys-hint { display: none; }
.workstation-chassis[data-view="sound"] #btn-pads-edit-sound,
.workstation-chassis[data-view="seq"] #btn-pads-edit-sound { display: none; }

/* ---- SOUND view: the editor is the hero ---- */
.workstation-chassis[data-view="sound"] {
  --final-col: clamp(240px, calc(24 * var(--vw)), 360px);
  --knob-size: 44px;
  --seq-max-h: calc(24 * var(--vh));
}
.workstation-chassis[data-view="sound"] .deep-deck-box { padding: 10px 14px; gap: 8px; }
.workstation-chassis[data-view="sound"] #pad-window-lfo.is-collapsed .lfo-tab-panel:not(.hidden) { display: block; }
.workstation-chassis[data-view="sound"] #pad-window-lfo.is-collapsed #btn-toggle-lfo-collapse { opacity: 0.6; }
.workstation-chassis[data-view="sound"] #pad-window-synth,
.workstation-chassis[data-view="sound"] #pad-window-final { overflow: auto; }
.workstation-chassis[data-view="sound"] .params-grid:has(.axk-field) { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px 8px; }

/* ---- PADS view: editor shares the screen, so tighten its chrome ---- */
.workstation-chassis[data-view="pads"] .deep-deck-box { padding: 8px 10px; gap: 6px; }

/* ---- SEQ view: editor collapses to its header, sequencer takes the screen ---- */
.workstation-chassis[data-view="seq"] { grid-template-rows: auto auto minmax(0, 1fr); --seq-max-h: none; }
.workstation-chassis[data-view="seq"] .bottom-deck-sequencer { max-height: none; min-height: 0; }
.workstation-chassis[data-view="seq"] .deep-deck-box { padding: 4px 10px; gap: 4px; }
.workstation-chassis[data-view="seq"] .deep-deck-box > .engine-content-panel:not(#panel-deep-pad-editor) { display: none; }
.workstation-chassis[data-view="seq"] #panel-deep-pad-editor { display: flex; }
.workstation-chassis[data-view="seq"] #panel-deep-pad-editor > :not(.panel-sub-header) { display: none !important; }
.workstation-chassis[data-view="seq"] .deep-deck-tabs { padding-bottom: 4px; }
.workstation-chassis[data-view="seq"] .active-step-btn { height: 40px; }

/* ---- Compact sequencer (PADS and SOUND views): patterns, bar navigation and the step row only ---- */
.workstation-chassis[data-view="sound"] .sequencer-preset-management,
.workstation-chassis[data-view="sound"] .sequencer-top-controls > div:nth-child(n+3),
.workstation-chassis[data-view="sound"] .step-automation-toolbar,
.workstation-chassis[data-view="sound"] .seq-lane-bar { display: none !important; }   /* !important: these blocks carry inline display styles */

/* ---- Sequencer collapsed to a single line (any view) ---- */
.workstation-chassis[data-seq="min"] { --seq-max-h: 44px; }
.workstation-chassis[data-seq="min"] .bottom-deck-sequencer { max-height: 52px; overflow: hidden; }
.workstation-chassis[data-seq="min"] .bottom-deck-sequencer > :not(.sequencer-top-controls) { display: none !important; }
.workstation-chassis[data-seq="min"] .sequencer-top-controls > div:nth-child(n+2),
.workstation-chassis[data-seq="min"] .sequencer-preset-management { display: none !important; }
.workstation-chassis[data-seq="min"][data-view="seq"] { grid-template-rows: auto minmax(0, 1fr) auto; }

@media (max-height: 820px) {
  .workstation-chassis[data-view="pads"] { --pads-col: clamp(250px, calc(calc(100 * var(--vh)) - 400px), calc(50 * var(--vw))); --knob-size: 30px; }
  .workstation-chassis[data-view="sound"] { --knob-size: 36px; }
}

/* ---- polish after first screenshots ---- */
.drum-pads-matrix .drum-pad .pad-name { white-space: normal; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.workstation-chassis[data-view="sound"] .drum-pad .pad-name,
.workstation-chassis[data-view="seq"] .drum-pad .pad-name { -webkit-line-clamp: 2; font-size: 7.5px; }
.workstation-chassis[data-view="sound"] .pads-toolbar,
.workstation-chassis[data-view="seq"] .pads-toolbar { display: none; }
.workstation-chassis[data-view="sound"] #pad-looper-tool .pad-name,
.workstation-chassis[data-view="seq"] #pad-looper-tool .pad-name { font-size: 8px !important; white-space: nowrap; display: block; }
.workstation-chassis[data-view="sound"] #pad-looper-tool > div:nth-child(2) > span,
.workstation-chassis[data-view="seq"] #pad-looper-tool > div:nth-child(2) > span { display: none; }
.workstation-chassis[data-view="sound"] #pad-looper-tool,
.workstation-chassis[data-view="seq"] #pad-looper-tool { flex-direction: column; justify-content: center; gap: 2px; }
/* inline display styles on these blocks require !important to collapse them in compact views */
.workstation-chassis[data-view="sound"] .sequencer-preset-management,
.workstation-chassis[data-view="sound"] .sequencer-top-controls > div:nth-child(n+3),
.workstation-chassis[data-view="sound"] .step-automation-toolbar,
.workstation-chassis[data-view="sound"] .seq-lane-bar { display: none !important; }

/* ---- fit exactly inside the window (the chassis had a 6px offset that pushed the footer past the bottom edge) ---- */
.workstation-chassis { height: calc(calc(100 * var(--vh)) - 12px); height: calc(calc(100 * var(--vh)) - 12px); margin: 6px; }

/* ---- SOUND view: give the synth every spare pixel (LFO stays collapsed until opened; sequencer is just patterns + steps) ---- */
.workstation-chassis[data-view="sound"] #pad-window-lfo.is-collapsed .lfo-tab-panel { display: none; }
.workstation-chassis[data-view="sound"] .sequencer-top-controls > div:nth-child(n+2),
.workstation-chassis[data-view="sound"] .active-instrument-header,
.workstation-chassis[data-view="sound"] .sequencer-playhead-bar { display: none !important; }
.workstation-chassis[data-view="sound"] .bottom-deck-sequencer { padding-top: 4px; padding-bottom: 4px; }
.workstation-chassis[data-view="sound"] #pad-window-final .params-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.workstation-chassis[data-view="sound"] #pad-window-synth { flex: 1 1 auto; min-height: 0; }

/* ---- editor chrome: keep the recipe row on one line and the knobs a bit tighter so more of the synth shows ---- */
.workstation-chassis[data-view="pads"] .category-control-row,
.workstation-chassis[data-view="sound"] .category-control-row { flex-wrap: nowrap !important; }
.workstation-chassis[data-view="pads"] .category-control-row select,
.workstation-chassis[data-view="sound"] .category-control-row select { min-width: 0; }
.workstation-chassis[data-view="sound"] { --knob-size: 38px; }

/* =====================================================================
 * v9.3.1 PADS: plain rubber pads - a tiny number in the corner, no names / key badges / LEDs.
 * They light up when their sound plays (sequencer, MIDI, keys, mouse) via App.flashPad() -> .hit
 * ===================================================================== */
.drum-pads-matrix .drum-pad {
  background: linear-gradient(160deg, #2b313c 0%, #1b1f27 62%, #161a21 100%);
  border: 1px solid #3a4252;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -8px 14px rgba(0, 0, 0, 0.25);
  padding: 0;
  display: block;
  transition: background 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s ease-out, transform 0.08s ease-out;
}
.drum-pads-matrix .drum-pad .pad-name,
.drum-pads-matrix .drum-pad .pad-key-badge,
.drum-pads-matrix .drum-pad .pad-led { display: none !important; }
.drum-pads-matrix .drum-pad .pad-num {
  position: absolute;
  top: 6px;
  left: 8px;
  right: auto;
  font: 600 10px var(--font-mono, monospace);
  color: #6f7a8c;
  letter-spacing: 0;
}
.drum-pads-matrix .drum-pad:hover { border-color: #5a667c; }
.drum-pads-matrix .drum-pad.selected {
  border-color: var(--accent-cyan, #00ffd0);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--accent-cyan, #00ffd0), 0 0 12px rgba(0, 255, 208, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.drum-pads-matrix .drum-pad.selected .pad-num { color: var(--accent-cyan, #00ffd0); }
/* lit: instant on, soft fade off (the transition above) */
.drum-pads-matrix .drum-pad.hit {
  background: linear-gradient(160deg, #ffb066 0%, #ff7a1f 55%, #d85a00 100%);
  border-color: #ffd0a0;
  box-shadow: 0 0 22px rgba(255, 122, 31, 0.85), inset 0 0 14px rgba(255, 255, 255, 0.35);
  transform: translateY(1px) scale(0.985);
  transition: none;
}
.drum-pads-matrix .drum-pad.hit .pad-num { color: #fff; }
.workstation-chassis[data-view="pads"] .drum-pads-matrix .drum-pad .pad-num { top: 8px; left: 10px; font-size: 12px; }
.workstation-chassis[data-view="sound"] .drum-pads-matrix .drum-pad .pad-num,
.workstation-chassis[data-view="seq"] .drum-pads-matrix .drum-pad .pad-num { display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; }
.workstation-chassis[data-view="sound"] .drum-pads-matrix .drum-pad.hit .pad-num,
.workstation-chassis[data-view="seq"] .drum-pads-matrix .drum-pad.hit .pad-num { transform: translate(-50%, -50%); }

/* =====================================================================
 * v9.4 COMPACT CHROME: slimmer top bar, no oscillator mixer strip (level / pan / mute live in each source's own controls),
 * tighter synth window, bake tools, tempo-sync selects
 * ===================================================================== */
:root { --ui-gap: 5px; }

/* ---- top bar ---- */
.workstation-chassis { padding: 4px; }
.ax-topbar { gap: 2px 8px; padding: 3px 6px; padding-bottom: 3px; border-bottom-width: 1px; }
.ax-topbar .brand-subtitle { display: none; }
.ax-topbar .brand-title { font-size: 12px; }
.ax-topbar .btn-transport { padding: 2px 6px; font-size: 9px; line-height: 1.2; min-height: 0; }
.ax-topbar .btn-transport .icon { font-size: 9px; }
.ax-topbar .led-display-box { padding: 0 3px; }
.ax-topbar .led-display-box .led-digits { font-size: 10px; }
.ax-topbar .led-display-box input { height: 13px; font-size: 8px; }
.ax-topbar .led-display-box .label { font-size: 6px; }
.ax-topbar .control-item { font-size: 7px; gap: 0; }
.ax-topbar .control-item label { font-size: 7px !important; }
.ax-topbar .category-select { font-size: 8px; padding: 1px 3px; height: 17px; }
.ax-topbar canvas { height: 24px; width: 64px; }
.ax-topbar input[type="range"] { height: 10px; }
.ax-topbar .vu-meter-rack { height: 24px; }
.ax-viewswitch { margin-right: 4px; }
.view-btn { padding: 2px 7px; font-size: 9px; }
.view-btn.view-toggle { padding: 2px 5px; font-size: 8px; }
.ax-topbar .preset-tier-cluster { gap: 4px !important; }
.ax-topbar #btn-master-random-kit { padding: 2px 7px; }

/* ---- the 5-channel oscillator mixer strip is gone: level, pan and mute are the first controls of each source tab ---- */
#sub-5channel-mixer { display: none !important; }
.mute-field .header-val { margin-bottom: 2px; }
.mute-field .sub-mixer-mute-btn { width: 100%; padding: 3px 6px; font-size: 10px; }

/* ---- pad editor: smaller chrome, one-line headers ---- */
.deep-deck-box { gap: 6px; }
.deep-deck-tabs { padding-bottom: 4px; gap: 5px; }
.deck-tab-btn { padding: 3px 10px; font-size: 10px; }
.panel-sub-header { padding-bottom: 2px; gap: 8px; flex-wrap: wrap; }
.panel-sub-header .panel-title { font-size: 11px; }
.bake-tools { display: flex; gap: 5px; align-items: center; margin-left: auto; margin-right: 8px; }
.bake-tools .btn-transport { padding: 3px 9px; font-size: 9px; background: #1d2a3d; border-color: #3d6ea8; color: #9fc4f0; }
.engine-sub-tabs .sub-tab-btn { padding: 3px 9px; font-size: 9px; }
.category-control-row { gap: 6px !important; }
.category-control-row .btn-dice { padding: 3px 10px; font-size: 10px; height: auto; }
.subtractive-module-tabs { margin: 3px 0 4px 0 !important; padding-bottom: 3px !important; }
.subtractive-module-tabs .deck-sub-btn { padding: 2px 7px; font-size: 9px; }
.pad-window .params-grid { padding: 6px; gap: 6px 8px; }
.pad-window .param-field .header-val { font-size: 9px; }
.pad-window .param-field select { font-size: 10px; padding: 1px 4px; }
.lfo-sync-select { font-size: 9px; padding: 1px 3px; margin-top: 3px; width: 100%; }
.pads-toolbar .bake-keep { display: inline-flex; align-items: center; gap: 4px; font: 9px var(--font-mono, monospace); color: var(--text-dim, #8c97a8); cursor: pointer; }
.pads-toolbar #btn-pads-bake-all { background: #1d2a3d; border-color: #3d6ea8; color: #9fc4f0; }
.pads-toolbar .btn-transport { padding: 4px 9px; font-size: 10px; }
.pads-keys-hint { display: none; }

.workstation-chassis[data-view="pads"] { --knob-size: 30px; }
.workstation-chassis[data-view="sound"] { --knob-size: 36px; }

/* =====================================================================
 * v9.4 PERFORM MODE  (.workstation-chassis[data-mode="perf"])
 * Sample playback only: the synths, LFO, loop slicer and the heavy sequencer tools are gone, leaving pads, the basic sampler
 * controls (ADSR / filter / resonance / volume / tune / sends), the aux FX and the 16-step row with the pattern buttons.
 * ===================================================================== */
.ax-modeswitch { gap: 3px; margin-right: 4px; }
.mode-btn { letter-spacing: 1px; }
.mode-btn[data-mode="perf"].active { background: #3a2a00; color: #ffcc66; border-color: #ffaa00; box-shadow: 0 0 8px rgba(255, 170, 0, 0.3); }

.workstation-chassis[data-mode="perf"] { --looper-h: 44px; --toolbar-h: 38px; --pads-col: clamp(280px, calc(calc(100 * var(--vh)) - 380px), calc(44 * var(--vw))); --seq-max-h: calc(36 * var(--vh)); --knob-size: 40px; }

/* top bar: only what a performer needs */
.workstation-chassis[data-mode="perf"] #btn-record-setup,
.workstation-chassis[data-mode="perf"] .visualizer-bay canvas { display: none !important; }

/* pads: no looper bar, no bake / synth tools */
.workstation-chassis[data-mode="perf"] #btn-pads-bake-all,
.workstation-chassis[data-mode="perf"] #btn-pads-edit-sound { display: none !important; }

/* editor: only the sample controls + effects */
.workstation-chassis[data-mode="perf"] .engine-sub-tabs,
.workstation-chassis[data-mode="perf"] #bake-tools,
.workstation-chassis[data-mode="perf"] #panel-engine-sub,
.workstation-chassis[data-mode="perf"] #panel-engine-additive,
.workstation-chassis[data-mode="perf"] #pad-window-lfo { display: none !important; }
.workstation-chassis[data-mode="perf"] #panel-engine-sample.hidden { display: flex !important; }
.workstation-chassis[data-mode="perf"] #panel-engine-sample { gap: 6px; }
.workstation-chassis[data-mode="perf"] #btn-sample-to-additive,
.workstation-chassis[data-mode="perf"] #btn-convert-sample-to-sub,
.workstation-chassis[data-mode="perf"] #btn-match-sample-to-synth,
.workstation-chassis[data-mode="perf"] #select-sample-preset,
.workstation-chassis[data-mode="perf"] label[for="select-sample-preset"],
.workstation-chassis[data-mode="perf"] #sample-meta-display { display: none !important; }
.workstation-chassis[data-mode="perf"] #canvas-waveform-cropper { height: 56px !important; }
.workstation-chassis[data-mode="perf"] .sample-controls-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px 10px; }

/* sequencer: PERFORM has the complete sequencer (16 steps, 16 pattern presets, edit tools, the 17 rows with the looper); only LOOPS mode swaps it for the loop pads */


/* FULL mode PADS view: the pad toolbar (random / edit / bake tools) wraps to two rows, so reserve room for it */
.workstation-chassis[data-mode="full"][data-view="pads"] { --toolbar-h: 68px; }
.workstation-chassis[data-mode="full"][data-view="pads"] .pads-toolbar { gap: 5px; }
.workstation-chassis[data-mode="full"][data-view="pads"] .pads-toolbar .btn-transport { padding: 3px 8px; font-size: 9px; }

/* =====================================================================
 * v9.5 TOP BAR: two blocks. LEFT (logo, transport, tempo, master volume, meters) is big and tall; RIGHT is a column:
 * mode / view switches + FILE / MIDI / SETTINGS on top, the kit / style presets and the random generator underneath.
 * ===================================================================== */
.ax-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 4px 14px;
  padding: 5px 8px;
}
.ax-topbar-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; }
.ax-topbar-side { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; }
.ax-topbar-side-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.ax-topbar-side .preset-tier-cluster { justify-content: flex-end; }

/* the big left block */
.ax-topbar-main .brand-title { font-size: 22px; letter-spacing: 1.5px; }
.ax-topbar-main .brand-title span { font-size: 22px; }
.ax-topbar-main .btn-transport { padding: 8px 14px; font-size: 12px; min-height: 34px; }
.ax-topbar-main .btn-transport .icon { font-size: 12px; }
.ax-topbar-main .led-displays-group { gap: 8px; align-items: center; }
.ax-topbar-main .led-display-box { padding: 3px 8px; min-width: 52px; }
.ax-topbar-main .led-display-box .label { font-size: 8px; }
.ax-topbar-main .led-display-box .led-digits { font-size: 22px; }
.ax-topbar-main .led-display-box input { height: 20px; font-size: 12px; padding: 0 3px; }
.ax-topbar-main .control-item { font-size: 9px; }
.ax-topbar-main .control-item input[type="range"] { height: 14px; min-width: 90px; }
.ax-topbar-main .category-select { font-size: 10px; height: 22px; }
.ax-topbar-main canvas { height: 44px; width: 110px; }
.ax-topbar-main .vu-meter-rack { height: 44px; }

/* tempo extras: PRESET TEMPO button + what last changed the tempo */
.tempo-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.orig-tempo { padding: 5px 10px !important; font-size: 10px !important; min-height: 0 !important; white-space: nowrap; background: #1d2a3d; border-color: #3d6ea8; color: #9fc4f0; }
.orig-tempo .orig-tempo-val { font-family: var(--font-mono, monospace); font-weight: 800; color: #fff; }
.orig-tempo:disabled { opacity: 0.35; cursor: default; }
.orig-tempo.differs { background: #3a2a00; border-color: #ffaa00; color: #ffcc66; box-shadow: 0 0 8px rgba(255, 170, 0, 0.35); }
.tempo-source { font: 800 8px var(--font-mono, monospace); letter-spacing: 1px; color: var(--accent-cyan, #00ffd0); }

/* the side column keeps its compact controls */
.ax-topbar-side .btn-transport { padding: 3px 8px; font-size: 10px; }
.ax-topbar-side .category-select { font-size: 9px; height: 19px; }

/* two-row left block: row 1 = logo + transport, row 2 = tempo / bar / step / swing + master volume + meters */
.ax-flexbreak { flex: 0 0 100%; height: 0; }
.ax-topbar-main { gap: 4px 14px; }
.ax-topbar-main .brand-title { font-size: 20px; }
.ax-topbar-main .brand-title span { font-size: 20px; }
.ax-topbar-main .btn-transport { padding: 6px 12px; font-size: 11px; min-height: 30px; }
.ax-topbar-main .led-display-box .led-digits { font-size: 20px; }
.ax-topbar-main .led-display-box { padding: 2px 7px; }
.ax-topbar-main canvas { height: 40px; width: 96px; }
.ax-topbar-main .vu-meter-rack { height: 40px; }
.ax-topbar-main .led-displays-group { gap: 8px; }
.orig-tempo { padding: 3px 7px !important; font-size: 9px !important; max-width: 118px; }


/* fit row 2 of the left block at 1366 px: tempo, bar, step, swing, master volume and the meters */
.ax-topbar-main { gap: 4px 10px; }
.ax-topbar-main .led-displays-group { gap: 6px; }
.ax-topbar-main .led-display-box { min-width: 44px; padding: 2px 5px; }
.ax-topbar-main .control-item input[type="range"] { min-width: 70px; width: 76px; }
.ax-topbar-main canvas { width: 70px; height: 36px; }
.ax-topbar-main .vu-meter-rack { height: 36px; }
.ax-topbar-main .ax-group { gap: 4px; }
.ax-topbar-main .visualizer-bay { gap: 4px; }
.orig-tempo .orig-tempo-label { letter-spacing: 0; }

/* narrower preset selects so the left block keeps two rows at 1366 px */
.ax-topbar-side .preset-tier-cluster .category-select { min-width: 118px !important; max-width: 150px; }
.ax-topbar-side .preset-tier-cluster .control-item { min-width: 0; }
.ax-topbar-side .preset-tier-cluster input[type="range"] { width: 62px; min-width: 62px; }
.ax-topbar-main canvas { width: 60px; height: 32px; }
.ax-topbar-main .vu-meter-rack { height: 32px; }

/* narrow windows: drop the oscilloscope picture (the stereo meters stay) so the left block keeps two rows */
@media (max-width: 1480px) { .ax-topbar-main .visualizer-bay canvas { display: none; } }

/* settings rows + the LOAD (time-keeping) indicator */
.ax-setting { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 9px var(--font-mono, monospace); color: var(--text-main, #e6e9ef); padding: 2px 4px; }
.ax-setting input[type="number"] { width: 54px; font-size: 10px; background: #14171d; color: #fff; border: 1px solid #333; border-radius: 3px; padding: 1px 4px; }
.load-indicator { font: 800 10px var(--font-mono, monospace); color: #ffb020; background: #3a2600; border: 1px solid #ffb020; border-radius: 3px; padding: 1px 6px; animation: axLoadPulse 1.2s ease-in-out infinite; white-space: nowrap; }
@keyframes axLoadPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* v9.6 DSP readout (calm state): no pulsing, green */
.load-indicator.ok { animation: none; color: #3ddc97; background: #0f2a20; border-color: #1f6b4c; }

/* =====================================================================
 * v9.7 TOP BAR: transport centred in the left block; the preset / random-kit bar is a bigger framed window.
 * ===================================================================== */
.ax-topbar-main { justify-content: center; }
.ax-topbar-main .brand-badge { flex: 1 1 0; min-width: 170px; }
.ax-topbar-main .transport-cluster { flex: 0 0 auto; }
.ax-topbar-main .ax-spacer-r { flex: 1 1 0; min-width: 170px; }
.ax-topbar-side { align-self: stretch; justify-content: space-between; }
.ax-topbar-side .preset-tier-cluster {
  flex: 1 1 auto; flex-wrap: wrap; align-content: center; justify-content: flex-end;
  gap: 8px 12px !important; padding: 8px 12px; max-width: 400px;
  background: var(--bg-panel-inset, #14171d); border: 1px solid #2a303b; border-radius: 6px;
}
.ax-topbar-side .preset-tier-cluster .control-item { font-size: 10px; gap: 2px; }
.ax-topbar-side .preset-tier-cluster .control-item label { font-size: 9px !important; }
.ax-topbar-side .preset-tier-cluster .category-select { min-width: 160px !important; max-width: 180px; height: 26px; font-size: 11px; padding: 3px 6px; }
.ax-topbar-side .preset-tier-cluster input[type="range"] { width: 90px; min-width: 90px; height: 14px; }
.ax-topbar-side .preset-tier-cluster #btn-master-random-kit { padding: 9px 16px; font-size: 12px; min-height: 34px; }

/* v9.7 PAD CONTROLS (was "Window 3"): 2 columns. Rows 1-4 shaping, row 5 DRIVE / OD alone, rows 6-7 the four FX sends as their own tinted set */
#pad-window-final .pad-controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#pad-window-final .fx-drive { grid-column: 1; margin-top: 6px; padding-top: 6px; border-top: 1px solid #232730; }
#pad-window-final .fx-send { background: rgba(0, 255, 208, 0.06); border-left: 2px solid rgba(0, 255, 208, 0.55); border-radius: 3px; padding-left: 4px; }
#pad-window-final .fx-send-first { grid-column: 1; }
#pad-window-final .fx-send-first, #pad-window-final .fx-send-first + .fx-send { margin-top: 6px; }
.workstation-chassis[data-view="sound"] #pad-window-final .pad-controls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ax-topbar-main #axiom-build { display: block; font-size: 8px; white-space: nowrap; }

/* =====================================================================
 * v9.8 TOP BAR: two even rows, minimum height, every control still readable (>= 11 px text on buttons / selects).
 *   ROW A  logo + tempo | transport (centred) | master volume, meters, FILE / MIDI / SETTINGS
 *   ROW B  mode + view switches + swing | the preset bar (a single line that stretches to fill the row)
 * Replaces the v9.5 / v9.7 two-block layout (.ax-topbar-main / -side), whose rows could not line up.
 * ===================================================================== */
.ax-topbar { display: flex !important; flex-direction: column; gap: 3px; padding: 3px 8px; grid-template-columns: none; }
.ax-topbar .ax-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ax-topbar .ax-row-a { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.ax-topbar .ax-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ax-topbar .ax-row-a .ax-cell-left { justify-content: flex-start; }
.ax-topbar .ax-row-a .ax-cell-center { justify-content: center; }
.ax-topbar .ax-row-a .ax-cell-right { justify-content: flex-end; }
.ax-topbar .ax-row-b .ax-cell-left { flex: 0 0 auto; }

/* row A */
.ax-topbar .brand-badge { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; }
.ax-topbar .brand-title { font-size: 17px; letter-spacing: 1px; white-space: nowrap; }
.ax-topbar .brand-title span { font-size: 17px; }
.ax-topbar .brand-title #axiom-build { display: none; }
.ax-topbar .brand-subtitle { display: none; }
.ax-topbar .ax-row-a .btn-transport { padding: 4px 11px; font-size: 11px; min-height: 26px; }
.ax-topbar .ax-row-a .btn-transport .icon { font-size: 11px; }
.ax-topbar .transport-cluster { gap: 5px; }
.ax-topbar .led-displays-group { display: flex; align-items: center; gap: 6px; }
.ax-topbar .led-display-box { display: flex; flex-direction: row; align-items: center; gap: 5px; padding: 1px 7px; min-width: 0; }
.ax-topbar .led-display-box .label { font-size: 8px; letter-spacing: 0.5px; }
.ax-topbar .led-display-box .led-digits { font-size: 18px; line-height: 1; }
.ax-topbar .led-display-box input { width: 44px; height: 20px; font-size: 11px; margin: 0 !important; }
.ax-topbar .tempo-extra { flex-direction: row; align-items: center; gap: 5px; }
.ax-topbar .orig-tempo { padding: 3px 8px !important; font-size: 10px !important; max-width: none; min-height: 24px !important; }
.ax-topbar .tempo-source { font-size: 8px; }
.ax-topbar .ax-cell-right > .control-item { flex-direction: row; align-items: center; gap: 6px; min-width: 0 !important; font-size: 9px; }
.ax-topbar .ax-cell-right input[type="range"] { width: 84px; min-width: 60px; }
.ax-topbar .visualizer-bay canvas { display: none; }          /* the stereo meters stay; the scope picture costs CPU and width */
.ax-topbar .vu-meter-rack { height: 24px; }
.ax-topbar .ax-cell-right .btn-transport, .ax-topbar .ax-cell-right summary { padding: 4px 10px; font-size: 11px; min-height: 26px; }

/* row B */
.ax-topbar .ax-row-b .view-btn { padding: 3px 9px; font-size: 11px; min-height: 24px; }
.ax-topbar .ax-row-b .ax-cell-left > .control-item { flex-direction: row; align-items: center; gap: 6px; font-size: 9px; min-width: 0; }
.ax-topbar .ax-row-b .ax-cell-left > .control-item input[type="range"] { width: 80px; min-width: 60px; }
.ax-topbar .ax-row-b .ax-cell-left > .control-item .category-select { height: 22px; font-size: 10px; }
.ax-topbar .preset-tier-cluster { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px !important; justify-content: stretch; }
.ax-topbar .preset-tier-cluster .control-item { flex: 1 1 0; min-width: 0; flex-direction: row; align-items: center; gap: 5px; }
.ax-topbar .preset-tier-cluster .control-item label { flex: 0 0 auto; font-size: 10px !important; white-space: nowrap; }
.ax-topbar .preset-tier-cluster .category-select { flex: 1 1 0; width: 100%; min-width: 0 !important; max-width: none !important; height: 26px; font-size: 11px; padding: 2px 6px; }
.ax-topbar .preset-tier-cluster .preset-tier-uniq { flex: 0 0 170px; }
.ax-topbar .preset-tier-cluster .preset-tier-uniq > div { display: flex; gap: 5px; align-items: center; flex: 0 0 auto; }
.ax-topbar .preset-tier-cluster .preset-tier-uniq span { font-size: 9px !important; }
.ax-topbar .preset-tier-cluster input[type="range"] { flex: 1 1 auto; width: auto; min-width: 50px; height: 14px; }
.ax-topbar .preset-tier-cluster #btn-master-random-kit { flex: 0 0 auto; padding: 4px 14px; font-size: 11px; min-height: 26px; }

/* v9.8.1 fit at 1366 px */
.ax-topbar .ax-cell-right #project-autosave-status { display: none; }
.ax-topbar .ax-cell-right { gap: 8px; }
.ax-topbar .ax-modeswitch { margin-right: 0; }
.ax-topbar .ax-row-a .btn-transport { padding: 4px 9px; }
.ax-topbar .ax-cell-right > .control-item span { white-space: nowrap; }
.ax-topbar summary, .ax-topbar .btn-transport, .ax-topbar .view-btn { white-space: nowrap; }
.ax-topbar .ax-row-b .view-btn { padding: 3px 7px; }
.ax-topbar .ax-row-b .ax-cell-left { gap: 8px; }
.ax-topbar .ax-viewswitch { margin-right: 0; gap: 2px; }
.ax-topbar .ax-row-b .ax-cell-left > .control-item .category-select { max-width: 86px; }

/* narrow windows: the preset bar drops to its own full-width line instead of squeezing the selects; row A wraps below ~1150 px */
@media (max-width: 1280px) {
  .ax-topbar .ax-row-b { flex-wrap: wrap; }
  .ax-topbar .ax-row-b .preset-tier-cluster { flex: 1 1 100%; }
}
@media (max-width: 1150px) {
  .ax-topbar .ax-row-a { display: flex; flex-wrap: wrap; }
  .ax-topbar .ax-row-a .ax-cell-left, .ax-topbar .ax-row-a .ax-cell-right { flex: 1 1 auto; }
}

/* full names stay in the DOM (MIDI-learn labels, screen readers) but are not drawn in the one-line preset bar */
.ax-topbar .lbl-full { display: none; }

/* v9.8.5 readability floor: nothing clickable in the top area below 10 px, the bar's own buttons 11 px */
.ax-topbar .led-display-box .label { font-size: 9px; }
.ax-topbar .ax-modeswitch .mode-btn, .ax-topbar .ax-row-b .view-btn { font-size: 11px; }
.ax-topbar #select-groove, .ax-topbar .ax-row-b .ax-cell-left > .control-item { font-size: 10px; }
.ax-topbar #select-groove { height: 22px; }
.ax-menu-panel .btn-transport, .ax-menu-panel select, .ax-menu-panel label, .ax-menu-panel .ax-setting, .ax-menu-panel .ax-setting span { font-size: 10px !important; }

/* v10 LOOPER PAD: orange, so it reads as "the loop track", and it stays in PERFORM mode */
.drum-pad.looper-pad { background: linear-gradient(145deg, #3a2208 0%, #241505 100%); border: 2px solid #b45f10; }
.drum-pad.looper-pad:hover { border-color: #ff9a2e; }
.drum-pad.looper-pad.selected { border-color: #ffb347; box-shadow: 0 0 14px rgba(255, 150, 40, 0.5), inset 0 0 10px rgba(255, 150, 40, 0.25); }
.drum-pad.looper-pad.hit { background: linear-gradient(145deg, #e07a10 0%, #a35400 100%); border-color: #ffb347; box-shadow: 0 0 18px rgba(255, 150, 40, 0.85); }
#pad-looper-tool .pad-key-badge { background: #ff9a2e !important; color: #1a0f03 !important; }
#pad-looper-tool .pad-num { color: #ffb347 !important; }
#pad-looper-tool #looper-pad-led { background: #ff9a2e; }

/* pattern buttons: a double-clicked cue (switches at the NEXT MEASURE) is brighter and pulses faster than a normal cue */
.btn-seq-slot.cued-now { outline: 2px solid #ffb347; box-shadow: 0 0 10px rgba(255, 150, 40, 0.8); animation: axCueNow 0.5s ease-in-out infinite; }
@keyframes axCueNow { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ===================================================================================================================
 * v11: EDIT side has no sequencer; PERFORM side has no synth engines; render state + sample history strip
 * =================================================================================================================== */
.workstation-chassis[data-mode="full"] #bottom-deck-sequencer,
.workstation-chassis[data-mode="full"] .transport-cluster,
.workstation-chassis[data-mode="full"] .led-displays-group .led-display-box:nth-of-type(n+3),
.workstation-chassis[data-mode="full"] #pad-looper-tool .pad-led { display: none !important; }
.workstation-chassis[data-mode="full"] { --seq-max-h: 0px; }
.bake-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.render-state { font-size: 9px; font-family: var(--font-mono); padding: 2px 6px; border-radius: 3px; border: 1px solid #2b3038; color: var(--text-dim); }
.render-state.fresh { color: #6fe3a0; border-color: #1f5a3a; }
.render-state.stale { color: #ffcc66; border-color: #7a5a14; }
.render-state.none { color: #ff8a8a; border-color: #6a2a2a; }
.sample-history { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.sample-history .sh-label { font-size: 8px; color: var(--text-dim); font-weight: 800; letter-spacing: .4px; }
.sample-history .sh-btn { min-width: 22px; padding: 1px 4px; font-size: 9px; border: 1px solid #2b3038; background: #151922; color: var(--text-dim); border-radius: 3px; cursor: pointer; }
.sample-history .sh-btn:not([disabled]):hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.sample-history .sh-btn[disabled] { opacity: .35; cursor: default; }
/* a pad whose engine was edited after its last render carries a dot (the PERFORM side still plays the older sample) */
.drum-pad.needs-render::after { content: ''; position: absolute; right: 6px; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; background: #ffaa00; box-shadow: 0 0 6px rgba(255,170,0,.7); }
.workstation-chassis[data-mode="perf"] .render-state,
.workstation-chassis[data-mode="perf"] .sample-history,
.workstation-chassis[data-mode="perf"] .drum-pad.needs-render::after { display: none !important; }

/* PERFORM keeps only the basics of a sample: its name, LOAD / AUDITION, and level, pan, FX 1-2 sends (everything else is edit-side) */
.workstation-chassis[data-mode="perf"] .sample-controls-grid,
.workstation-chassis[data-mode="perf"] #btn-sample-autotrim,
.workstation-chassis[data-mode="perf"] #btn-sample-normalize,
.workstation-chassis[data-mode="perf"] #btn-sample-reverse,
.workstation-chassis[data-mode="perf"] #btn-random-sample { display: none !important; }
.workstation-chassis[data-mode="perf"] #pad-window-final .param-field:not(:has(#final-pad-vol, #final-pad-pan, #final-pad-send1, #final-pad-send2)) { display: none !important; }


/* MODULATION window: two LFOs */
.pad-window-lfo { border: 1px solid #232730; border-radius: 4px; padding: 6px 10px; background: var(--bg-panel-inset); }
.lfo-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid #232730; padding-bottom: 4px; margin-bottom: 6px; }
.lfo-head-title { font-size: 10px; font-weight: 800; color: var(--accent-orange); }
.lfo-head-sub { font-size: 8px; color: var(--text-dim); font-family: var(--font-mono); }
.lfo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lfo-col { min-width: 0; }
.lfo-title { font-size: 9px; font-weight: 800; color: var(--accent-cyan); margin-bottom: 3px; }
.lfo-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px 8px; }
.lfo-target-field { grid-column: span 2; }
.lfo-checks { display: flex; flex-direction: column; gap: 2px; font-size: 9px; color: var(--text-dim); }
.lfo-checks label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.workstation-chassis[data-mode="perf"] #pad-window-lfo { display: none !important; }
.workstation-chassis[data-view="sound"] .lfo-cols { grid-template-columns: 1fr 1fr; }

/* FX 3 and FX 4 are edit-side effects: PERFORM has the two light ones (FX 1 reverb, FX 2 delay) */
.workstation-chassis[data-mode="perf"] .edit-only,
.workstation-chassis[data-mode="perf"] #btn-aux-bay-2,
.workstation-chassis[data-mode="perf"] #btn-aux-bay-3 { display: none !important; }
.workstation-chassis[data-mode="perf"] .aux-trigger-pads-grid { grid-template-columns: repeat(2, 1fr) !important; }
.render-sends { font-size: 9px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }


/* ===== LOOP SET: PERFORM loop buttons (greys, dark to light) and the EDIT panel ===== */
.seqmode-switch { display: none; align-items: center; gap: 4px; }
.workstation-chassis[data-mode="perf"] .seqmode-switch { display: flex; }
.seqmode-btn { padding: 3px 10px; font-size: 10px; font-weight: 800; border: 1px solid #2b3038; background: #151922; color: var(--text-dim); border-radius: 3px; cursor: pointer; }
.seqmode-btn.active { background: #3a2a00; color: #ffcc66; border-color: #ffaa00; }
.loopset-bar { display: none; align-items: stretch; gap: 8px; flex: 1 1 100%; }
.loopset-buttons { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; flex: 1; }
.loopset-btn { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 5px 8px; min-height: 40px; border: 1px solid #00000066; border-radius: 4px; cursor: pointer; background: var(--ls-bg, #333); color: var(--ls-fg, #eee); text-align: left; overflow: hidden; }
.loopset-btn .ls-num { font-size: 9px; font-weight: 800; opacity: .75; }
.loopset-btn .ls-name { font-size: 10px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.loopset-btn .ls-info { font-size: 8px; opacity: .75; font-family: var(--font-mono); }
.loopset-btn.empty { opacity: .45; }
.loopset-btn.playing { outline: 2px solid #00ffd0; box-shadow: 0 0 10px rgba(0,255,208,.45); }
.loopset-btn.queued { outline: 2px dashed #ffaa00; }
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] .loopset-bar { display: flex; }
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] #sequence-slots-container,
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] #sequencer-preset-management,
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] #active-instrument-sequencer,
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] #container-full-grid,
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] .sequencer-top-controls > div:not(.seqmode-switch):not(.loopset-bar) { display: none !important; }
.workstation-chassis[data-mode="full"] .loopset-bar,
.workstation-chassis[data-mode="full"] .seqmode-switch { display: none !important; }
.ls-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ls-title { font-size: 12px; font-weight: 800; color: var(--accent-cyan); }
.ls-count { font-size: 9px; color: var(--text-dim); font-family: var(--font-mono); margin-left: 8px; }
.ls-tools { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ls-help { font-size: 9px; color: var(--text-dim); margin-bottom: 6px; }
.ls-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.ls-row { display: flex; align-items: center; gap: 4px; padding: 3px 6px; background: var(--bg-panel-inset); border: 1px solid #232730; border-radius: 3px; }
.ls-row.empty { opacity: .6; }
.ls-row.playing { border-color: #00ffd0; }
.ls-rnum { width: 16px; font-size: 9px; font-weight: 800; color: var(--text-dim); text-align: right; }
.ls-rname { width: 118px; font-size: 10px; background: #14171d; color: #fff; border: 1px solid #333; border-radius: 3px; padding: 1px 4px; }
.ls-rinfo { flex: 1; font-size: 8px; color: var(--text-dim); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-row button { font-size: 9px; padding: 1px 6px; }
.workstation-chassis[data-mode="perf"] #tab-deep-loopset { display: none !important; }

/* ===== v11: extra engines (physical model, waveshaper, wavetable, vocoder) + chord strip ===== */
.engine-sub-tabs { flex-wrap: wrap; }
.engine-sub-tabs .sub-tab-btn[id^="tab-engine-"][style*="--eng-color"].active { box-shadow: inset 0 -2px 0 var(--eng-color); }
.sub-tab-btn.used-by-link { background: rgba(197,134,255,0.22) !important; box-shadow: inset 0 0 0 1px #c586ff, 0 0 8px rgba(197,134,255,0.55); position: relative; }
.sub-tab-btn.used-by-link::after { content: "\2192 " attr(data-used-by); font-size: 7px; opacity: .85; margin-left: 5px; letter-spacing: .5px; }
.drum-pad.linked-source { box-shadow: 0 0 0 2px #c586ff, 0 0 14px rgba(197,134,255,0.7) !important; }
.eng-panel { padding: 6px 8px 10px; overflow-y: auto; max-height: 100%; }
.eng-blurb { font-size: 10px; line-height: 1.4; opacity: .75; margin: 2px 0 8px; max-width: 900px; }
.eng-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.eng-info { font-size: 9px; opacity: .7; margin-left: 6px; }
.eng-group { margin-bottom: 8px; border-left: 2px solid rgba(255,255,255,0.12); padding-left: 8px; }
.eng-group-title { font-size: 9px; letter-spacing: 1.5px; opacity: .65; margin-bottom: 4px; }
.eng-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; }
.eng-check { font-size: 10px; display: flex; gap: 5px; align-items: center; cursor: pointer; }
.chord-strip { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 3px 10px; font-size: 9px; }
.chord-strip .chord-sel { width: 62px; font-size: 9px; padding: 1px 3px; }
.chord-strip .chord-on { display: flex; gap: 4px; align-items: center; letter-spacing: 1px; cursor: pointer; }
.chord-strip .chord-lab { margin-left: 8px; opacity: .65; letter-spacing: 1px; }
.workstation-chassis[data-mode="perf"] .eng-panel,
.workstation-chassis[data-mode="perf"] .chord-strip,
.workstation-chassis[data-mode="perf"] #pad-window-lfo { display: none !important; }


/* ===== v11.1: PERFORM keeps the complete sequencer ===== */
.workstation-chassis[data-mode="perf"] #btn-view-sound,
.workstation-chassis[data-mode="perf"] #btn-view-toggle-pads,
.workstation-chassis[data-mode="full"] #btn-view-seq { display: none !important; }
.workstation-chassis[data-mode="perf"][data-view="pads"] .bottom-deck-sequencer { overflow-y: auto; max-height: var(--seq-max-h); }
.workstation-chassis[data-mode="perf"][data-view="pads"] { --seq-max-h: calc(42 * var(--vh)); }
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] .step-automation-toolbar,
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] .seq-lane-bar,
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] .active-instrument-header,
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] .sequencer-playhead-bar,
.workstation-chassis[data-mode="perf"][data-seqmode="loops"] #btn-toggle-seq-collapse { display: none !important; }


/* ===== v11.4: the pad matrix is the original big 4x4; the two looper pads + switches are a slim row under it ===== */
.drum-pad.looper-pad { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.drum-pad.looper-pad .pad-num { position: absolute; top: 4px; left: 8px; font-size: 9px; }
.drum-pad.looper-pad .looper-name { font-size: 10px; font-weight: 800; color: #ffd9a0; text-align: center; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; margin-top: 8px; }
.drum-pad.looper-pad.queued { animation: looper-queued 0.5s ease-in-out infinite alternate; }
@keyframes looper-queued { from { box-shadow: 0 0 4px rgba(255,150,40,0.3); } to { box-shadow: 0 0 20px rgba(255,170,60,0.95); border-color: #ffd080; } }
#looper-pads-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; width: min(100cqw, calc(100cqh - var(--toolbar-h) - var(--looper-h) - 3 * var(--ui-gap))); margin-inline: auto; height: var(--looper-h); flex: 0 0 auto; }
#looper-pads-row .drum-pad { height: var(--looper-h); min-height: 0; padding: 2px 4px; }
.looper-ctl { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-width: 0; border: 1px dashed #3a2a12; border-radius: 10px; background: #14100a; }
.looper-power { width: 90%; padding: 3px 2px; font: 800 9px var(--font-mono, monospace); border-radius: 5px; border: 1px solid #00ffd0; background: #1b3824; color: #00ffd0; cursor: pointer; }
.looper-power:not(.on) { background: #381b1b; color: #ff6666; border-color: #ff6666; }
.looper-ctl-label { font: 700 8px var(--font-mono, monospace); color: var(--text-dim, #7a8494); letter-spacing: 1px; }
.workstation-chassis[data-view="sound"] #looper-pads-row, .workstation-chassis[data-view="seq"] #looper-pads-row { width: 330px; height: 50px; margin: 0; flex: 0 0 330px; gap: 4px; }
.workstation-chassis[data-view="sound"] #looper-pads-row .drum-pad, .workstation-chassis[data-view="seq"] #looper-pads-row .drum-pad { height: 50px; }
.workstation-chassis[data-view="sound"] .looper-ctl-label, .workstation-chassis[data-view="seq"] .looper-ctl-label { display: none; }
.workstation-chassis[data-view="sound"] .drum-pad.looper-pad .looper-name, .workstation-chassis[data-view="seq"] .drum-pad.looper-pad .looper-name { font-size: 7px; margin-top: 6px; }
.rack-looper-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.rack-looper-btn { padding: 3px 12px; font: 800 10px var(--font-mono, monospace); border: 1px solid #3a2a12; background: #1a130a; color: #ffb36b; border-radius: 4px; cursor: pointer; }
.rack-looper-btn.active { background: #4a2a06; border-color: #ff9a2e; color: #ffd9a0; }
.rack-looper-help { font-size: 9px; color: var(--text-dim, #7a8494); }
.loop-kind-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--bg-panel-inset); padding: 6px 10px; border-radius: 4px; border: 1px solid #232730; }

.page-render-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.page-render-row .btn-transport { background: #1b3824; border-color: #00ffd0; color: #00ffd0; font-weight: 800; }
.page-render-state { font: 700 9px var(--font-mono, monospace); color: var(--text-dim, #7a8494); letter-spacing: .5px; }
.page-render-state.stale { color: #ffb347; }
.page-render-state.fresh { color: #00ffd0; }
.workstation-chassis[data-mode="perf"] .page-render-row { display: none !important; }

/* the sequencer's top toolbar (patterns, bars, style + RANDOM PATTERN) stays in view while the track rows scroll under it */
.bottom-deck-sequencer { overflow-y: auto; }
.bottom-deck-sequencer > .sequencer-top-controls { position: sticky; top: 0; z-index: 20; background: var(--bg-deck, #0d1016); box-shadow: 0 3px 6px rgba(0,0,0,.5); }


/* ===== DJ / LOOP mode: the rig replaces pads + sequencer (the rig itself is built by js/dj.js, styled in css/dj.css) ===== */
.workstation-chassis[data-mode="dj"] { grid-template-rows: auto minmax(0, 1fr); }
.workstation-chassis[data-mode="dj"] > .middle-deck,
.workstation-chassis[data-mode="dj"] > #bottom-deck-sequencer { display: none !important; }
.workstation-chassis:not([data-mode="dj"]) > #dj-rig { display: none !important; }
.mode-btn[data-mode="dj"].active { background: #2a0a3a; color: #e0a8ff; border-color: #b04bff; box-shadow: 0 0 8px rgba(176, 75, 255, 0.35); }

/* the old PADS | LOOPS switch is replaced by DJ / LOOP mode (kept in the page, hidden, for the loop-set code) */
#btn-seqmode-pads, #btn-seqmode-loops, #btn-seq-to-loop, #btn-seqs-to-loops { display: none !important; }
.seq-dj-btn { background: #2a0a3a !important; border-color: #b04bff !important; color: #e0a8ff !important; font-weight: 800; }
.rs-body { display: flex; flex-direction: column; gap: 10px; font-size: 11px; }
.rs-box { background: var(--bg-panel-inset, #12151b); border: 1px solid #232730; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.rs-head { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--accent-cyan, #00ffd0); }
.rs-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rs-line label { font-size: 9px; color: var(--text-dim, #7a8494); }
.rs-note { font-size: 9px; color: var(--text-dim, #7a8494); }
.rs-status { font: 10px var(--font-mono, monospace); color: var(--accent-cyan, #00ffd0); min-height: 14px; }
/* RECORD MIX indicator */
.mixrec-bar { position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; gap: 10px; align-items: center; padding: 4px 14px; border-radius: 14px; background: #4a0d0d; border: 1px solid #ff4d4d; color: #fff; font: 800 11px var(--font-mono, monospace); cursor: pointer; box-shadow: 0 0 14px rgba(255, 60, 60, .6); }
.mixrec-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; animation: mixrec-blink 1s infinite; }
.mixrec-bar .stop { padding: 1px 8px; border: 1px solid #ff9a9a; border-radius: 3px; }
@keyframes mixrec-blink { 50% { opacity: .25; } }
#btn-mix-rec.recording { background: #4a0d0d; border-color: #ff4d4d; color: #ffaaaa; }
.workstation-chassis[data-mode="dj"] #ax-viewswitch { display: none !important; }


/* ===== the three sections: EDIT | PERFORM | DJ / LOOP, big and first in the top bar ===== */
.ax-modeswitch-big { display: flex; gap: 0; border: 1px solid #3a4150; border-radius: 8px; overflow: hidden; margin-right: 10px; }
.ax-modeswitch-big .mode-btn { padding: 8px 20px !important; font: 900 13px var(--font-ui, sans-serif) !important; letter-spacing: 1.5px; border: 0 !important; border-radius: 0 !important; background: #12161d; color: #8d97a8; cursor: pointer; }
.ax-modeswitch-big .mode-btn + .mode-btn { border-left: 1px solid #3a4150 !important; }
.ax-modeswitch-big .mode-btn[data-mode="full"].active { background: #0d4a3f; color: #5dffe0; box-shadow: inset 0 -3px 0 #00ffd0; }
.ax-modeswitch-big .mode-btn[data-mode="perf"].active { background: #4a2e00; color: #ffcc66; box-shadow: inset 0 -3px 0 #ffaa00; }
.ax-modeswitch-big .mode-btn[data-mode="dj"].active { background: #3a0f55; color: #e8b8ff; box-shadow: inset 0 -3px 0 #b04bff; }
.ax-modeswitch-big .mode-btn[data-mode="dj"]:not(.active) { color: #c58bff; }
.ax-modeswitch-big .mode-btn:hover { filter: brightness(1.25); }
.ax-cell-center { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* PERFORM keeps the pads big: the sequencer shows patterns + bars + the step row; the TOOLS button opens the rest */
.workstation-chassis[data-mode="perf"][data-view="pads"] { --seq-max-h: calc(30 * var(--vh)); }
.workstation-chassis[data-mode="perf"][data-view="pads"]:not([data-seqtools="open"]) .sequencer-preset-management,
.workstation-chassis[data-mode="perf"][data-view="pads"]:not([data-seqtools="open"]) .step-automation-toolbar,
.workstation-chassis[data-mode="perf"][data-view="pads"]:not([data-seqtools="open"]) .seq-lane-bar,
.workstation-chassis[data-mode="perf"][data-view="pads"]:not([data-seqtools="open"]) #container-full-grid,
.workstation-chassis[data-mode="perf"][data-view="pads"]:not([data-seqtools="open"]) .sequencer-top-controls > div:nth-child(6) { display: none !important; }
.workstation-chassis[data-mode="perf"][data-view="pads"][data-seqtools="open"] { --seq-max-h: calc(46 * var(--vh)); }
.workstation-chassis[data-mode="perf"] #btn-seq-tools-toggle.open { background: #4a2e00; border-color: #ffaa00; color: #ffcc66; }
.workstation-chassis[data-mode="full"] #btn-seq-tools-toggle { display: none; }


/* ===== v11.4: a slimmer top bar, so the pads stay big ===== */
.ax-topbar .brand-subtitle { display: none; }
.ax-modeswitch-big { margin-right: 14px; flex: 0 0 auto; }
.ax-modeswitch-big .mode-btn { padding: 5px 16px !important; font-size: 12px !important; }
.ax-row-b > .ax-cell-left { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ax-topbar { gap: 2px 8px; padding-top: 2px; padding-bottom: 2px; }
.ax-topbar .ax-cell-right .control-item { min-width: 70px !important; }
.ax-topbar #slider-master-vol { width: 90px; }
.workstation-chassis[data-mode="perf"][data-view="pads"] { --seq-max-h: calc(26 * var(--vh)); }
.workstation-chassis[data-mode="perf"][data-view="pads"]:not([data-seqtools="open"]) .sequencer-top-controls > div:nth-child(3) > span { display: none; }
.workstation-chassis[data-mode="perf"][data-view="pads"]:not([data-seqtools="open"]) .active-instrument-header { padding-top: 0; padding-bottom: 0; }

.workstation-chassis, .workstation-chassis[data-mode="perf"] { --looper-h: 56px; }
.looper-ctl-label { display: none; }
.looper-ctl { gap: 3px; }
#looper-pads-row .dj-deckbtn, .looper-ctl .dj-deckbtn { margin: 0; }

/* DJ / LOOP: the header keeps only the mode buttons, tempo and transport so the decks get the screen */
.workstation-chassis[data-mode="dj"] .ax-row-b > .preset-tier-cluster,
.workstation-chassis[data-mode="dj"] .ax-row-b > .ax-cell-left > .control-item,
.workstation-chassis[data-mode="dj"] #ax-viewswitch,
.workstation-chassis[data-mode="dj"] .visualizer-bay { display: none !important; }
.workstation-chassis[data-mode="dj"] .ax-row-b { min-height: 0; }

/* the sample strip stays in PERFORM: waveform + start / stop / fade rubber band */
.workstation-chassis[data-mode="perf"] #canvas-waveform-cropper { height: 78px !important; }