/* ====================================================================
   TIME DISTORTION PORTAL — APPLE FUTURE THEME
   Liquid glass morphism · Deep space black · iOS System palette
   Precision controls · SF Pro typography · Cinematic depth
   ==================================================================== */

/* ── Root variables — full Apple system palette ──────────────────── */
:root {
  --bg-deep:     #000000;
  --bg-surface:  #08080F;
  --bg-panel:    rgba(255,255,255,0.048);  /* ×1.15 brightness boost */
  --bg-control:  rgba(255,255,255,0.075);
  --border-sub:  rgba(255,255,255,0.104);
  --border-mid:  rgba(255,255,255,0.184);
  --text-dim:    rgba(255,255,255,0.37);
  --text-mid:    rgba(255,255,255,0.74);
  --text-bright: rgba(255,255,255,0.97);

  /* iOS System Blue → primary accent throughout */
  --cyan:   #0A84FF;
  --purple: #BF5AF2;
  --gold:   #FF9F0A;
  --green:  #30D158;
  --pink:   #FF375F;
  --orange: #FF6B2B;

  /* Convenience glow tokens */
  --glow-blue:   rgba(10,132,255,0.28);
  --glow-purple: rgba(191,90,242,0.22);
  --glow-cyan:   rgba(10,232,255,0.22);
}

/* ── Per-panel accent colours — RAINBOW top→bottom (Red→Magenta) ── */
/* 1 Master       */ .panel-master      { --pc: #FF2D55; --pc-rgb: 255,45,85; }
/* 2 Core Reverb  */ .panel-reverb      { --pc: #FF4E30; --pc-rgb: 255,78,48; }
/* 3 Rev Delay    */ .panel-delay       { --pc: #FF6B20; --pc-rgb: 255,107,32; }
/* 4 Granular     */ .panel-granular    { --pc: #FF9500; --pc-rgb: 255,149,0; }
/* 5 Pitch Shift  */ .panel-pitch       { --pc: #FFCC00; --pc-rgb: 255,204,0; }
/* 6 Comb Filter  */ .panel-comb        { --pc: #A8E820; --pc-rgb: 168,232,32; }
/* 7 Shimmer      */ .panel-shimmer     { --pc: #30D158; --pc-rgb: 48,209,88; }
/* 8 Distortion   */ .panel-distortion  { --pc: #00C878; --pc-rgb: 0,200,120; }
/* 9 HyperComb    */ .panel-hypercomb   { --pc: #00E5CC; --pc-rgb: 0,229,204; }
/* 10 Chorus      */ .panel-chorus      { --pc: #00CFFF; --pc-rgb: 0,207,255; }
/* 11 Ring Mod    */ .panel-ringmod     { --pc: #0A84FF; --pc-rgb: 10,132,255; }
/* 12 Vowel Filt  */ .panel-vowelfilter { --pc: #3050FF; --pc-rgb: 48,80,255; }
/* 13 Bode Shift  */ .panel-bodeshift   { --pc: #5E5CE6; --pc-rgb: 94,92,230; }
/* 14 Filters     */ .panel-filters     { --pc: #BF5AF2; --pc-rgb: 191,90,242; }
/* 15 Spatial     */ .panel-spatial     { --pc: #FF2D9A; --pc-rgb: 255,45,154; }

/* Automation module rows — kept in exact sync with panel colours above */
.autom-mod-row[data-module="master"]      { --mod-color: #FF2D55; }
.autom-mod-row[data-module="reverb"]      { --mod-color: #FF4E30; }
.autom-mod-row[data-module="delay"]       { --mod-color: #FF6B20; }
.autom-mod-row[data-module="granular"]    { --mod-color: #FF9500; }
.autom-mod-row[data-module="pitch"]       { --mod-color: #FFCC00; }
.autom-mod-row[data-module="comb"]        { --mod-color: #A8E820; }
.autom-mod-row[data-module="shimmer"]     { --mod-color: #30D158; }
.autom-mod-row[data-module="distortion"]  { --mod-color: #00C878; }
.autom-mod-row[data-module="hypercomb"]   { --mod-color: #00E5CC; }
.autom-mod-row[data-module="chorus"]      { --mod-color: #00CFFF; }
.autom-mod-row[data-module="ringmod"]     { --mod-color: #0A84FF; }
.autom-mod-row[data-module="vowelfilter"] { --mod-color: #3050FF; }
.autom-mod-row[data-module="bodeshift"]   { --mod-color: #5E5CE6; }
.autom-mod-row[data-module="filters"]     { --mod-color: #BF5AF2; }
.autom-mod-row[data-module="spatial"]     { --mod-color: #FF2D9A; }


/* ═══════════════════════════════════════════════════════════════════
   BASE & BACKGROUND
   ═══════════════════════════════════════════════════════════════════ */

html {
  background: #000000 !important; /* dark fallback visible if body is transparent */
}

body {
  background: transparent !important; /* lets #tdpBg show through */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
  /* brightness boost applied via CSS variable opacities above — filter removed to preserve position:fixed stacking */
}

/* ── Background image — top half (normal) + bottom half (mirrored) ───────── */

/* Both containers are fixed half-screen clip masks */
#tdpBg,
#tdpBgMirror {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  height: 50vh !important;
  z-index: 0 !important;        /* above html background, below .container (z-index:1) */
  overflow: hidden !important;  /* clips the inner pseudo-element to its half */
  pointer-events: none !important;
}

/* Background image hidden — re-enable by removing these two lines */
#tdpBg        { top: 0 !important; display: none !important; }
#tdpBgMirror  { bottom: 0 !important; display: none !important; }

/* Both ::before elements are full-viewport-height so they share the same
   image scale and position — this guarantees a seamless seam at the fold. */
#tdpBg::before,
#tdpBgMirror::before {
  content: '' !important;
  position: absolute !important;
  width: 100vw !important;
  height: 100vh !important;   /* full viewport, not just 50vh */
  left: 0 !important;
  background-image: url('images/tdp-backgound.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: blur(8px) !important;
  opacity: 0.42 !important;
}

/* Top half: pseudo-element starts at the top of its container = viewport top */
#tdpBg::before {
  top: 0 !important;
  transform: scale(1.06) !important; /* hides blur fringe at outer edges */
}

/* Bottom half: offset upward by 50vh so the pseudo-element also spans the
   full viewport (0→100vh), then flip around viewport centre (50vh from
   element top = the fold point) — image centre stays fixed, top↔bottom swap */
#tdpBgMirror::before {
  top: -50vh !important;
  transform: scale(1.06) scaleY(-1) !important;
  transform-origin: center 50vh !important; /* pivot = the fold / viewport centre */
}

body::before {
  background:
    radial-gradient(ellipse at 18% 45%, rgba(10,132,255,0.055) 0%, transparent 58%),
    radial-gradient(ellipse at 82% 18%, rgba(191,90,242,0.04) 0%, transparent 54%),
    radial-gradient(ellipse at 52% 88%, rgba(10,232,255,0.03) 0%, transparent 52%) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */

h1 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(32px, 5.6vw, 62px) !important;
  letter-spacing: -0.04em !important;
  color: rgba(255,255,255,0.90) !important;
  text-shadow: none !important;
}

.subtitle {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(10px, 1.2vw, 11px) !important;
  letter-spacing: 0.28em !important;
  color: rgba(255,255,255,0.24) !important;
  text-transform: uppercase !important;
}

.control-group > label {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.32) !important;
}

.value-display {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', 'Menlo', 'Monaco', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.control-panel h2 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(var(--pc-rgb, 255,255,255), 0.72) !important;
  text-shadow: 0 0 24px rgba(var(--pc-rgb, 255,255,255), 0.2) !important;
  border-bottom: 0.5px solid rgba(var(--pc-rgb, 255,255,255), 0.1) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  cursor: pointer !important;
}

.top-drawer-col-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: rgba(255,255,255,0.22) !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.07) !important;
}

.process-name {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}


/* ═══════════════════════════════════════════════════════════════════
   CONTROL PANELS — LIQUID GLASS
   ═══════════════════════════════════════════════════════════════════ */

.control-panel {
  /* Solid bg — no backdrop-filter (kills performance when many panels are open) */
  background: rgba(10,10,20,0.97) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0.5px solid rgba(255,255,255,0.09) !important;
  border-top: 0.5px solid rgba(255,255,255,0.15) !important;
  border-left: 0.5px solid rgba(255,255,255,0.09) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 4px 20px rgba(0,0,0,0.4) !important;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

.control-panel:hover {
  border-color: rgba(var(--pc-rgb, 255,255,255), 0.16) !important;
  border-top-color: rgba(var(--pc-rgb, 255,255,255), 0.26) !important;
  border-left-color: rgba(var(--pc-rgb, 255,255,255), 0.16) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 20px rgba(0,0,0,0.45),
    0 0 28px rgba(var(--pc-rgb, 255,255,255), 0.04) !important;
}

/* ── Active (powered on) panel ─────────────────────────────────────────────── */
.control-panel:not(.panel-inactive) {
  background: linear-gradient(
    135deg,
    rgba(var(--pc-rgb, 80,40,160), 0.28) 0%,
    rgba(8, 6, 20, 0.98) 60%
  ) !important;
  border-color: rgba(var(--pc-rgb, 255,255,255), 0.38) !important;
  border-top-color: rgba(var(--pc-rgb, 255,255,255), 0.52) !important;
  border-left-color: rgba(var(--pc-rgb, 255,255,255), 0.52) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 4px 20px rgba(0,0,0,0.35),
    0 0 32px rgba(var(--pc-rgb, 80,40,160), 0.20) !important;
}

.control-panel:not(.panel-inactive) h2 {
  color: #ffffff !important;
  text-shadow:
    0 0 12px rgba(var(--pc-rgb, 180,120,255), 0.6),
    0 0 28px rgba(var(--pc-rgb, 180,120,255), 0.25) !important;
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   SLIDERS — APPLE PRECISION
   ═══════════════════════════════════════════════════════════════════ */

input[type="range"] {
  height: 3px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 2px !important;
  outline: none !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  cursor: pointer !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.5),
    0 0 0 3px rgba(var(--pc-rgb, 10,132,255), 0.28) !important;
  transition: transform 0.14s ease, box-shadow 0.14s ease !important;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.22) !important;
  box-shadow:
    0 3px 10px rgba(0,0,0,0.6),
    0 0 0 4px rgba(var(--pc-rgb, 10,132,255), 0.45) !important;
}

input[type="range"]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.5),
    0 0 0 3px rgba(var(--pc-rgb, 10,132,255), 0.28) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   BUTTONS — GLASS MORPHISM
   ═══════════════════════════════════════════════════════════════════ */

button {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.065) !important;
  border: 0.5px solid rgba(255,255,255,0.11) !important;
  color: rgba(255,255,255,0.75) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease !important;
}

button:not(#transportDrawerToggle):hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.9) !important;
  transform: translateY(-0.5px) !important;
}

button:not(#transportDrawerToggle):active {
  transform: scale(0.97) !important;
}

/* Drawer handle — keep its centering transform intact, add a lift instead */
#transportDrawerToggle:hover {
  transform: translateX(-50%) translateY(-2px) !important;
  transition: transform 0.15s ease, background 0.15s, color 0.15s !important;
}

/* ── Gain Envelope buttons — amber (toggle/reset) and blue-white (show/hide) ── */
.gain-env-toggle,
.gain-env-reset,
.gain-env-show {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
}
.gain-env-toggle {
  border: 1px solid rgba(255,200,80,0.3) !important;
  background: rgba(0,0,0,0.6) !important;
  color: rgba(255,200,80,0.55) !important;
}
.gain-env-toggle:hover {
  border-color: rgba(255,200,80,0.7) !important;
  color: rgba(255,200,80,0.9) !important;
  transform: none !important;
}
.gain-env-toggle.active {
  background: rgba(255,200,80,0.12) !important;
  border-color: #ffc850 !important;
  color: #ffc850 !important;
  box-shadow: 0 0 8px rgba(255,200,80,0.18) !important;
}
.gain-env-reset {
  border: 1px solid rgba(255,200,80,0.2) !important;
  background: rgba(0,0,0,0.6) !important;
  color: rgba(255,200,80,0.35) !important;
}
.gain-env-reset:hover {
  border-color: rgba(255,200,80,0.6) !important;
  color: rgba(255,200,80,0.85) !important;
  transform: none !important;
}
.gain-env-show {
  border: 1px solid rgba(180,220,255,0.25) !important;
  background: rgba(0,0,0,0.6) !important;
  color: rgba(180,220,255,0.5) !important;
}
.gain-env-show:hover {
  border-color: rgba(180,220,255,0.65) !important;
  color: rgba(180,220,255,0.9) !important;
  transform: none !important;
}
.gain-env-show.active {
  background: rgba(180,220,255,0.1) !important;
  border-color: rgba(180,220,255,0.8) !important;
  color: #c8e8ff !important;
  box-shadow: 0 0 7px rgba(180,220,255,0.15) !important;
}

/* ── Automation Curve Type toggle buttons (S-Curve / Power) ─────────── */
.autom-curvetype-btn {
  padding: 4px 10px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(0,0,0,0.55) !important;
  color: rgba(255,255,255,0.38) !important;
  font-family: 'Maven Pro', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
}
.autom-curvetype-btn:hover {
  border-color: rgba(204,68,255,0.55) !important;
  color: rgba(204,68,255,0.85) !important;
  background: rgba(0,0,0,0.55) !important;
  transform: none !important;
}
/* S-Curve active: purple accent (matches the rest of the automation panel) */
#automCurveTypeSBtn.active {
  background: rgba(204,68,255,0.14) !important;
  border-color: #cc44ff !important;
  color: #cc44ff !important;
  box-shadow: 0 0 6px rgba(204,68,255,0.18) !important;
}
/* Power active: amber accent (matches the amber diamond handles) */
#automCurveTypePBtn.active {
  background: rgba(255,160,80,0.14) !important;
  border-color: #ffa050 !important;
  color: #ffa050 !important;
  box-shadow: 0 0 6px rgba(255,160,80,0.18) !important;
}
#automCurveTypePBtn.active:hover,
#automCurveTypeSBtn.active:hover {
  transform: none !important;
}

/* Primary action buttons */
.btn-primary {
  background: rgba(10,132,255,0.18) !important;
  border: 0.5px solid rgba(10,132,255,0.45) !important;
  color: #4DA6FF !important;
  font-weight: 600 !important;
}
.btn-primary:hover {
  background: rgba(10,132,255,0.28) !important;
  border-color: rgba(10,132,255,0.7) !important;
  color: #70BAFF !important;
  box-shadow: 0 0 22px rgba(10,132,255,0.18) !important;
  transform: translateY(-0.5px) !important;
}
.btn-primary:disabled {
  opacity: 0.3 !important;
  pointer-events: none !important;
}

/* Process / generate buttons */
.btn-process {
  background: linear-gradient(135deg, rgba(10,132,255,0.22), rgba(191,90,242,0.18)) !important;
  border: 0.5px solid rgba(10,132,255,0.45) !important;
  color: #64D2FF !important;
  font-weight: 600 !important;
}
.btn-process:hover {
  background: linear-gradient(135deg, rgba(10,132,255,0.34), rgba(191,90,242,0.28)) !important;
  border-color: rgba(10,132,255,0.65) !important;
  box-shadow: 0 0 28px rgba(10,132,255,0.16) !important;
}

/* Note / division buttons */
.note-btn {
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 4px 9px !important;
  text-transform: none !important;
  background: rgba(255,255,255,0.05) !important;
  border: 0.5px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.55) !important;
}
.note-btn:hover {
  background: rgba(var(--pc-rgb, 10,132,255), 0.14) !important;
  border-color: rgba(var(--pc-rgb, 10,132,255), 0.38) !important;
  color: var(--pc, #0A84FF) !important;
  transform: none !important;
}

/* Panel preset buttons */
.panel-preset-btn {
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  padding: 3px 8px !important;
}

/* Slicer/view tabs */
.slicer-view-tab {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

/* Signal generator buttons */
.siggen-wave-btn,
.siggen-tuning-btn,
.siggen-octave-btn,
.siggen-length-btn,
.siggen-env-btn {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

/* Tour navigation buttons */
.tour-btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* Sweep/sync mode buttons */
.sweep-dir-btn,
.sweep-tgt-btn,
.sweep-shp-btn,
.sweep-osc-btn,
.mod-sync-btn {
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   UPLOAD SECTION
   ═══════════════════════════════════════════════════════════════════ */

.upload-section {
  background: rgba(18,18,28,0.8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px dashed rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  transition: all 0.22s ease !important;
}
.upload-section:hover {
  border-color: rgba(10,132,255,0.4) !important;
  background: rgba(10,132,255,0.04) !important;
}
.upload-section.dragging {
  border-color: rgba(191,90,242,0.5) !important;
  background: rgba(191,90,242,0.05) !important;
}

/* File info */
.file-info {
  background: rgba(10,132,255,0.06) !important;
  border: 0.5px solid rgba(10,132,255,0.2) !important;
  border-radius: 8px !important;
}
.file-info strong { color: #0A84FF !important; }


/* ═══════════════════════════════════════════════════════════════════
   NUMBER INPUTS & TEXT INPUTS
   ═══════════════════════════════════════════════════════════════════ */

.freq-number-input,
.preset-name-input,
.preset-folder-input {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', 'Menlo', monospace !important;
  color: rgba(255,255,255,0.85) !important;
  transition: border-color 0.15s ease !important;
}
.freq-number-input:focus,
.preset-name-input:focus,
.preset-folder-input:focus {
  border-color: rgba(10,132,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.12) !important;
  outline: none !important;
}
.freq-number-input::placeholder,
.preset-name-input::placeholder,
.preset-folder-input::placeholder {
  color: rgba(255,255,255,0.2) !important;
}

.number-btn {
  background: rgba(255,255,255,0.05) !important;
  border: 0.5px solid rgba(255,255,255,0.09) !important;
  border-radius: 5px !important;
  color: rgba(255,255,255,0.5) !important;
  font-family: -apple-system, sans-serif !important;
}
.number-btn:hover {
  background: rgba(var(--pc-rgb, 10,132,255), 0.12) !important;
  border-color: rgba(var(--pc-rgb, 10,132,255), 0.35) !important;
  color: var(--pc, #0A84FF) !important;
  transform: none !important;
}

/* Signal generator frequency input */
.siggen-freq-input {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PROCESS ORDER
   ═══════════════════════════════════════════════════════════════════ */

.process-order-item {
  background: rgba(255,255,255,0.04) !important;
  border: 0.5px solid rgba(255,255,255,0.09) !important;
  border-radius: 8px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.16s ease !important;
}
.process-order-item:hover:not(.static) {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.14) !important;
  transform: translateX(2px) !important;
}
.process-order-item.drag-over {
  border-color: rgba(10,132,255,0.45) !important;
  background: rgba(10,132,255,0.06) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   TRANSPORT DRAWER
   ═══════════════════════════════════════════════════════════════════ */

#transportDrawer {
  backdrop-filter: blur(40px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(160%) !important;
  background: rgba(18,8,38,0.92) !important;
  border-top: 0.5px solid rgba(136,68,255,0.22) !important;
}

/* Stop + Loop — override the blanket button { font-size: 12px !important } */
#transportDrawer button[onclick="stopPlayback()"] {
  font-size: 24px !important;
  font-weight: 700 !important;
}
#transportDrawer #loopPlaybackBtn {
  font-size: 26px !important;
  font-weight: 800 !important;
}
/* Loop active — green icon, override blanket color !important */
#transportDrawer #loopPlaybackBtn.active {
  color: #00e868 !important;
}
/* Play buttons — match text colour to glow when playing */
#playOriginalBtn.td-btn-playing  { color: #00d4ff !important; }
/* Processed button: white when idle, soft purple when playing */
#transportDrawer #playProcessedBtn:not(.td-btn-playing) {
  color: #ffffff !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
#transportDrawer #playProcessedBtn.td-btn-playing {
  color: #d0aaff !important;
  background: rgba(138,80,255,0.14) !important;
  border-color: rgba(138,80,255,0.55) !important;
}

#tdTabBar {
  border-bottom: 0.5px solid rgba(255,255,255,0.08) !important;
}

#tdTabBar .td-tab {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.32) !important;
  border-right: 0.5px solid rgba(255,255,255,0.07) !important;
}
#tdTabBar .td-tab:hover {
  background: rgba(10,132,255,0.07) !important;
  color: rgba(10,132,255,0.8) !important;
}
#tdTabBar .td-tab.active {
  background: rgba(10,132,255,0.1) !important;
  color: #0A84FF !important;
  box-shadow: inset 0 -2px 0 #0A84FF !important;
}
#tdTabBar .td-tab[data-td-tab="transport"] {
  color: rgba(191,90,242,0.55) !important;
}
#tdTabBar .td-tab[data-td-tab="transport"].active {
  background: rgba(191,90,242,0.1) !important;
  color: #BF5AF2 !important;
  box-shadow: inset 0 -2px 0 #BF5AF2 !important;
}
#tdTabBar .td-tab[data-td-tab="transport"]:hover {
  background: rgba(191,90,242,0.08) !important;
  color: rgba(191,90,242,0.85) !important;
}

#topDrawerBody {
  border-bottom: 0.5px solid rgba(255,255,255,0.07) !important;
}

.top-drawer-pane-inner {
  padding: 16px 20px 18px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PRESETS
   ═══════════════════════════════════════════════════════════════════ */

.preset-folder-header {
  background: rgba(255,255,255,0.032) !important;
  border: 0.5px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.45) !important;
  transition: all 0.16s ease !important;
}
.preset-folder-header:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.75) !important;
}

.custom-preset-load {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 0.5px solid rgba(255,255,255,0.08) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
.custom-preset-load:hover {
  background: rgba(10,132,255,0.1) !important;
  border-color: rgba(10,132,255,0.35) !important;
  color: #0A84FF !important;
  transform: none !important;
}

.custom-preset-delete {
  border-radius: 6px !important;
  border: 0.5px solid rgba(255,55,95,0.2) !important;
  color: rgba(255,55,95,0.45) !important;
}
.custom-preset-delete:hover {
  background: rgba(255,55,95,0.1) !important;
  border-color: rgba(255,55,95,0.55) !important;
  color: #FF375F !important;
  transform: none !important;
}

.custom-preset-rename {
  border-radius: 6px !important;
  border: 0.5px solid rgba(10,132,255,0.18) !important;
  color: rgba(10,132,255,0.45) !important;
}
.custom-preset-rename:hover {
  background: rgba(10,132,255,0.09) !important;
  border-color: rgba(10,132,255,0.45) !important;
  color: #0A84FF !important;
  transform: none !important;
}

.preset-last-loaded {
  background: rgba(191,90,242,0.05) !important;
  border: 0.5px solid rgba(191,90,242,0.16) !important;
  border-radius: 8px !important;
}
.preset-last-loaded-name { color: rgba(210,180,255,0.8) !important; }
.preset-last-loaded-btn {
  background: rgba(191,90,242,0.1) !important;
  border: 0.5px solid rgba(191,90,242,0.3) !important;
  border-radius: 5px !important;
  color: rgba(191,90,242,0.8) !important;
}
.preset-last-loaded-btn:hover {
  background: rgba(191,90,242,0.2) !important;
  border-color: rgba(191,90,242,0.6) !important;
  color: #BF5AF2 !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   TOOLTIPS & OVERLAYS
   ═══════════════════════════════════════════════════════════════════ */

#sliderTooltip {
  background: rgba(8,8,18,0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.85) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.05) !important;
}
#sliderTooltip::after {
  border-top-color: rgba(255,255,255,0.14) !important;
}
#sliderTooltip::before {
  border-top-color: rgba(8,8,18,0.96) !important;
}

#paramTooltip {
  background: rgba(8,8,20,0.97) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 0 0 0.5px rgba(255,255,255,0.04) !important;
}
.pt-title {
  color: #0A84FF !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
}
.pt-desc {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  font-size: 12px !important;
  color: rgba(220,220,240,0.68) !important;
  line-height: 1.55 !important;
}

/* Global drop overlay */
#globalDropOverlay {
  background: rgba(0,0,8,0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.gdo-inner {
  border: 1px dashed rgba(10,132,255,0.45) !important;
  border-radius: 22px !important;
  background: rgba(10,132,255,0.04) !important;
  backdrop-filter: blur(12px) !important;
}
.gdo-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  font-size: 22px !important;
}
.gdo-sub {
  color: rgba(10,132,255,0.5) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  letter-spacing: 0.16em !important;
}
@keyframes gdo-pulse {
  0%, 100% { border-color: rgba(10,132,255,0.28); box-shadow: 0 0 40px rgba(10,132,255,0.05); }
  50%       { border-color: rgba(10,132,255,0.6);  box-shadow: 0 0 70px rgba(10,132,255,0.12); }
}


/* ═══════════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════════ */

#adModal-box {
  background: rgba(10,10,22,0.97) !important;
  backdrop-filter: blur(40px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(160%) !important;
  border: 0.5px solid rgba(255,255,255,0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(255,255,255,0.04) !important;
}
#adModal-input {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
}
#adModal-input:focus {
  border-color: rgba(10,132,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.12) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   TOUR OVERLAY
   ═══════════════════════════════════════════════════════════════════ */

#tourCard {
  background: rgba(8,8,20,0.97) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 0.5px solid rgba(191,90,242,0.3) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 0 0.5px rgba(191,90,242,0.08) !important;
}
.tour-eyebrow {
  color: rgba(191,90,242,0.72) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  letter-spacing: 0.18em !important;
  font-size: 8.5px !important;
}
.tour-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  letter-spacing: -0.02em !important;
  color: rgba(255,255,255,0.9) !important;
}
.tour-desc {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.58 !important;
  color: rgba(220,200,255,0.72) !important;
}

#tourReplayBtn {
  border: 0.5px solid rgba(191,90,242,0.25) !important;
  border-radius: 5px !important;
  color: rgba(191,90,242,0.55) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  letter-spacing: 0.1em !important;
}


/* ═══════════════════════════════════════════════════════════════════
   EFFECTS SECTION — collapsible wrapper panel
   ═══════════════════════════════════════════════════════════════════ */

#effectsSectionPanel {
  /* Slightly different bg to distinguish from individual panels */
  background: rgba(12,12,22,0.9) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 18px !important;
  padding: 14px 20px 0 !important;
  /* No bottom padding — effectsGrid panels provide their own spacing */
}

/* Remove inner gap when the grid is the direct child being revealed */
#effectsSectionPanel > .panel-body {
  padding-bottom: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTOMATION
   ═══════════════════════════════════════════════════════════════════ */

.autom-canvas-wrap {
  background: rgba(0,0,0,0.65) !important;
  border: 0.5px solid rgba(191,90,242,0.2) !important;
  border-radius: 10px !important;
}

.autom-controls,
.autom-visible-params {
  background: rgba(0,0,0,0.22) !important;
  border: 0.5px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
}

.autom-module-list {
  background: rgba(0,0,0,0.3) !important;
  border: 0.5px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
}

.autom-mod-row {
  /* Colour tint derived from each module's --mod-color */
  background: color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.06)) 9%, rgba(12,12,22,1)) !important;
  border: 0.5px solid color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.09)) 22%, transparent) !important;
  border-radius: 6px !important;
  transition: background 0.16s ease, border-color 0.16s ease !important;
}
.autom-mod-row:hover {
  background: color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.06)) 16%, rgba(12,12,22,1)) !important;
  border-color: color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.09)) 40%, transparent) !important;
}

.autom-param-btn {
  border-radius: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* ───────────────────────────────────────────────────────────────────
   AUTOMATION CONTROL BAR — Buttons coloured by functional group
   ─────────────────────────────────────────────────────────────────── */

/* Base reset — all autom control buttons get a neutral ghost style */
.autom-toggle-btn,
.autom-reset-btn,
.autom-div-btn,
.autom-draw-shape-btn,
.autom-slew-btn,
.autom-ydiv-btn {
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease !important;
}

/* ── ENVELOPE group — Purple #BF5AF2
   Targets: Enable, Reset, Rev, Inv, Undo, Redo ── */
.autom-ctrl-group:has(#automEnableBtn) .autom-toggle-btn,
.autom-ctrl-group:has(#automEnableBtn) .autom-reset-btn {
  background: rgba(191,90,242,0.07) !important;
  border: 0.5px solid rgba(191,90,242,0.22) !important;
  color: rgba(191,90,242,0.72) !important;
}
.autom-ctrl-group:has(#automEnableBtn) .autom-toggle-btn:hover,
.autom-ctrl-group:has(#automEnableBtn) .autom-reset-btn:hover {
  background: rgba(191,90,242,0.15) !important;
  border-color: rgba(191,90,242,0.48) !important;
  color: #BF5AF2 !important;
}
.autom-ctrl-group:has(#automEnableBtn) .autom-toggle-btn.active,
.autom-ctrl-group:has(#automEnableBtn) .autom-reset-btn.active {
  background: rgba(191,90,242,0.2) !important;
  border-color: rgba(191,90,242,0.7) !important;
  color: #D882FF !important;
  box-shadow: 0 0 10px rgba(191,90,242,0.28), inset 0 0 8px rgba(191,90,242,0.1) !important;
}

/* ── X GRID group — Blue #0A84FF
   Targets: Grid toggle, Snap toggle, division buttons (1/4, 1/1 …) ── */
.autom-ctrl-group:has(#automGridBtn) .autom-toggle-btn,
.autom-div-btn {
  background: rgba(10,132,255,0.07) !important;
  border: 0.5px solid rgba(10,132,255,0.22) !important;
  color: rgba(10,132,255,0.72) !important;
}
.autom-ctrl-group:has(#automGridBtn) .autom-toggle-btn:hover,
.autom-div-btn:hover {
  background: rgba(10,132,255,0.15) !important;
  border-color: rgba(10,132,255,0.48) !important;
  color: #0A84FF !important;
}
.autom-ctrl-group:has(#automGridBtn) .autom-toggle-btn.active,
.autom-div-btn.active {
  background: rgba(10,132,255,0.2) !important;
  border-color: rgba(10,132,255,0.7) !important;
  color: #4AABFF !important;
  box-shadow: 0 0 10px rgba(10,132,255,0.28), inset 0 0 8px rgba(10,132,255,0.1) !important;
}

/* ── RANDOM group — Green #30D158
   Targets: — Steps, ∕ Ramps, ~ Curves ── */
.autom-rand-shape-btn {
  background: rgba(48,209,88,0.07) !important;
  border: 0.5px solid rgba(48,209,88,0.22) !important;
  color: rgba(48,209,88,0.72) !important;
}
.autom-rand-shape-btn:hover {
  background: rgba(48,209,88,0.15) !important;
  border-color: rgba(48,209,88,0.48) !important;
  color: #30D158 !important;
}
.autom-rand-shape-btn.active {
  background: rgba(48,209,88,0.20) !important;
  border-color: rgba(48,209,88,0.70) !important;
  color: #62E882 !important;
  box-shadow: 0 0 10px rgba(48,209,88,0.28), inset 0 0 8px rgba(48,209,88,0.10) !important;
}

/* ── DRAW group — Amber #FF9F0A
   Targets: — Flat, ↑ Ramp, ↓ Ramp ── */
.autom-draw-shape-btn {
  background: rgba(255,159,10,0.07) !important;
  border: 0.5px solid rgba(255,159,10,0.22) !important;
  color: rgba(255,159,10,0.72) !important;
}
.autom-draw-shape-btn:hover {
  background: rgba(255,159,10,0.15) !important;
  border-color: rgba(255,159,10,0.48) !important;
  color: #FF9F0A !important;
}
.autom-draw-shape-btn.active {
  background: rgba(255,159,10,0.2) !important;
  border-color: rgba(255,159,10,0.7) !important;
  color: #FFBA3C !important;
  box-shadow: 0 0 10px rgba(255,159,10,0.28), inset 0 0 8px rgba(255,159,10,0.1) !important;
}

/* ── SLEW group — Teal #00E5CC
   Targets: |, 5%, 20%, 50% ── */
.autom-slew-btn {
  background: rgba(0,229,204,0.07) !important;
  border: 0.5px solid rgba(0,229,204,0.22) !important;
  color: rgba(0,229,204,0.72) !important;
}
.autom-slew-btn:hover {
  background: rgba(0,229,204,0.15) !important;
  border-color: rgba(0,229,204,0.48) !important;
  color: #00E5CC !important;
}
.autom-slew-btn.active {
  background: rgba(0,229,204,0.2) !important;
  border-color: rgba(0,229,204,0.7) !important;
  color: #4DFCE8 !important;
  box-shadow: 0 0 10px rgba(0,229,204,0.28), inset 0 0 8px rgba(0,229,204,0.1) !important;
}

/* ── Y GRID group — Indigo #5E5CE6
   Targets: Y Grid toggle, Y Snap toggle, ydiv buttons (12, 4 …) ── */
.autom-ctrl-group:has(#automYGridBtn) .autom-toggle-btn,
.autom-ydiv-btn {
  background: rgba(94,92,230,0.07) !important;
  border: 0.5px solid rgba(94,92,230,0.22) !important;
  color: rgba(94,92,230,0.82) !important;
}
.autom-ctrl-group:has(#automYGridBtn) .autom-toggle-btn:hover,
.autom-ydiv-btn:hover {
  background: rgba(94,92,230,0.15) !important;
  border-color: rgba(94,92,230,0.48) !important;
  color: #7C7AFF !important;
}
.autom-ctrl-group:has(#automYGridBtn) .autom-toggle-btn.active,
.autom-ydiv-btn.active {
  background: rgba(94,92,230,0.2) !important;
  border-color: rgba(94,92,230,0.7) !important;
  color: #A0A0FF !important;
  box-shadow: 0 0 10px rgba(94,92,230,0.3), inset 0 0 8px rgba(94,92,230,0.12) !important;
}

/* ── CLIPBOARD group — Purple-blue #9D70FF
   Targets: Copy, Paste ── */
.autom-ctrl-group:has(#automCopyBtn) .autom-reset-btn {
  background: rgba(157,112,255,0.07) !important;
  border: 0.5px solid rgba(157,112,255,0.22) !important;
  color: rgba(157,112,255,0.72) !important;
}
.autom-ctrl-group:has(#automCopyBtn) .autom-reset-btn:hover {
  background: rgba(157,112,255,0.15) !important;
  border-color: rgba(157,112,255,0.48) !important;
  color: #9D70FF !important;
}
.autom-ctrl-group:has(#automCopyBtn) .autom-reset-btn.active {
  background: rgba(157,112,255,0.2) !important;
  border-color: rgba(157,112,255,0.7) !important;
  color: #C4A4FF !important;
  box-shadow: 0 0 10px rgba(157,112,255,0.28), inset 0 0 8px rgba(157,112,255,0.1) !important;
}

/* ── VIEW group — Green #30D158
   Targets: Show All toggle, +, −, Fit ── */
.autom-ctrl-group:has(#automShowAllBtn) .autom-toggle-btn,
.autom-ctrl-group:has(#automShowAllBtn) .autom-reset-btn {
  background: rgba(48,209,88,0.07) !important;
  border: 0.5px solid rgba(48,209,88,0.22) !important;
  color: rgba(48,209,88,0.72) !important;
}
.autom-ctrl-group:has(#automShowAllBtn) .autom-toggle-btn:hover,
.autom-ctrl-group:has(#automShowAllBtn) .autom-reset-btn:hover {
  background: rgba(48,209,88,0.15) !important;
  border-color: rgba(48,209,88,0.48) !important;
  color: #30D158 !important;
}
.autom-ctrl-group:has(#automShowAllBtn) .autom-toggle-btn.active,
.autom-ctrl-group:has(#automShowAllBtn) .autom-reset-btn.active {
  background: rgba(48,209,88,0.2) !important;
  border-color: rgba(48,209,88,0.7) !important;
  color: #62E882 !important;
  box-shadow: 0 0 10px rgba(48,209,88,0.28), inset 0 0 8px rgba(48,209,88,0.1) !important;
}

/* ── DANGER group — Red #FF375F
   Targets: Full Reset (last group after spacer) ── */
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-reset-btn,
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-toggle-btn {
  background: rgba(255,55,95,0.07) !important;
  border: 0.5px solid rgba(255,55,95,0.25) !important;
  color: rgba(255,55,95,0.72) !important;
}
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-reset-btn:hover,
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-toggle-btn:hover {
  background: rgba(255,55,95,0.15) !important;
  border-color: rgba(255,55,95,0.55) !important;
  color: #FF375F !important;
}
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-reset-btn.active,
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-toggle-btn.active {
  background: rgba(255,55,95,0.22) !important;
  border-color: rgba(255,55,95,0.75) !important;
  color: #FF6680 !important;
  box-shadow: 0 0 12px rgba(255,55,95,0.32), inset 0 0 8px rgba(255,55,95,0.12) !important;
}

/* ── Automation module power buttons — vivid, mod-color matched ── */
.autom-mod-power {
  opacity: 0.45 !important;
  border: 0.5px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.35) !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s !important;
}
.autom-mod-power:hover {
  opacity: 0.85 !important;
  border-color: var(--mod-color, rgba(255,255,255,0.4)) !important;
  color: var(--mod-color, rgba(255,255,255,0.85)) !important;
  background: color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.1)) 12%, transparent) !important;
}
.autom-mod-power.active {
  opacity: 1 !important;
  color: var(--mod-color, #fff) !important;
  border-color: var(--mod-color, #fff) !important;
  background: color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.15)) 18%, transparent) !important;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.3)) 55%, transparent),
    0 0 22px color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.15)) 28%, transparent) !important;
  text-shadow: 0 0 6px color-mix(in srgb, var(--mod-color, #fff) 80%, transparent) !important;
}

/* ── Active module rows — brighter background and border ─────── */
.autom-mod-row.autom-module-selected {
  background: color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.08)) 18%, rgba(12,12,22,1)) !important;
  border-color: color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.2)) 60%, transparent) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--mod-color, rgba(255,255,255,0.1)) 20%, transparent) !important;
}

/* Inactive modules — further dim so enabled ones pop */
.autom-mod-row:not(.autom-module-selected) {
  opacity: 0.65 !important;
}
.autom-mod-row:not(.autom-module-selected):hover {
  opacity: 1 !important;
}
/* Powered-on rows always show at full brightness */
.autom-mod-row:not(.autom-module-selected):has(.autom-mod-power.active) {
  opacity: 1 !important;
}

/* ── Automation control bar — white text on all coloured buttons ─ */
.autom-ctrl-group:has(#automEnableBtn) .autom-toggle-btn,
.autom-ctrl-group:has(#automEnableBtn) .autom-reset-btn,
.autom-ctrl-group:has(#automGridBtn) .autom-toggle-btn,
.autom-div-btn,
.autom-draw-shape-btn,
.autom-slew-btn,
.autom-ctrl-group:has(#automYGridBtn) .autom-toggle-btn,
.autom-ydiv-btn,
.autom-ctrl-group:has(#automCopyBtn) .autom-reset-btn,
.autom-ctrl-group:has(#automShowAllBtn) .autom-toggle-btn,
.autom-ctrl-group:has(#automShowAllBtn) .autom-reset-btn,
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-reset-btn,
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-toggle-btn {
  color: rgba(255,255,255,0.62) !important;
}

/* Hover → brighter white */
.autom-ctrl-group:has(#automEnableBtn) .autom-toggle-btn:hover,
.autom-ctrl-group:has(#automEnableBtn) .autom-reset-btn:hover,
.autom-ctrl-group:has(#automGridBtn) .autom-toggle-btn:hover,
.autom-div-btn:hover,
.autom-draw-shape-btn:hover,
.autom-slew-btn:hover,
.autom-ctrl-group:has(#automYGridBtn) .autom-toggle-btn:hover,
.autom-ydiv-btn:hover,
.autom-ctrl-group:has(#automCopyBtn) .autom-reset-btn:hover,
.autom-ctrl-group:has(#automShowAllBtn) .autom-toggle-btn:hover,
.autom-ctrl-group:has(#automShowAllBtn) .autom-reset-btn:hover,
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-reset-btn:hover,
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-toggle-btn:hover {
  color: rgba(255,255,255,0.92) !important;
}

/* Active/on → full white */
.autom-ctrl-group:has(#automEnableBtn) .autom-toggle-btn.active,
.autom-ctrl-group:has(#automEnableBtn) .autom-reset-btn.active,
.autom-ctrl-group:has(#automGridBtn) .autom-toggle-btn.active,
.autom-div-btn.active,
.autom-draw-shape-btn.active,
.autom-slew-btn.active,
.autom-ctrl-group:has(#automYGridBtn) .autom-toggle-btn.active,
.autom-ydiv-btn.active,
.autom-ctrl-group:has(#automCopyBtn) .autom-reset-btn.active,
.autom-ctrl-group:has(#automShowAllBtn) .autom-toggle-btn.active,
.autom-ctrl-group:has(#automShowAllBtn) .autom-reset-btn.active,
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-reset-btn.active,
.autom-ctrl-spacer ~ .autom-ctrl-group .autom-toggle-btn.active {
  color: #ffffff !important;
}

#automNodeInput {
  background: rgba(12,12,28,0.97) !important;
  backdrop-filter: blur(20px) !important;
  border: 0.5px solid rgba(191,90,242,0.65) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.65), 0 0 20px rgba(191,90,242,0.12) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace !important;
}
#automNodeInput input[type=number] {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid rgba(191,90,242,0.35) !important;
  border-radius: 5px !important;
  font-family: inherit !important;
}
#automNodeInput input[type=number]:focus {
  border-color: rgba(191,90,242,0.8) !important;
  box-shadow: 0 0 0 2px rgba(191,90,242,0.14) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   STUDIO BRIDGE
   ═══════════════════════════════════════════════════════════════════ */

.studio-bridge {
  border-top: 0.5px solid rgba(255,255,255,0.07) !important;
}
.studio-bridge-label {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.28) !important;
}
.studio-bridge-btn {
  background: rgba(123,79,255,0.07) !important;
  border: 0.5px solid rgba(123,79,255,0.22) !important;
  border-radius: 8px !important;
  color: rgba(180,140,255,0.85) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}
.studio-bridge-btn:hover {
  background: rgba(123,79,255,0.14) !important;
  border-color: rgba(123,79,255,0.42) !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   SLICER
   ═══════════════════════════════════════════════════════════════════ */

.slicer-fs-overlay {
  background: #060810 !important;
}
.slicer-fs-hdr {
  background: rgba(0,200,120,0.04) !important;
  border-bottom: 0.5px solid rgba(0,200,120,0.2) !important;
  height: 44px !important;
}
.slicer-fs-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}
.slicer-fs-close {
  background: rgba(255,55,95,0.09) !important;
  border: 0.5px solid rgba(255,55,95,0.28) !important;
  border-radius: 7px !important;
}

.slicer-preset-btn {
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.slicer-export-kit-btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

.slicer-loop-btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   KEYBOARD SHORTCUT HELP
   ═══════════════════════════════════════════════════════════════════ */

#kbHelp-box {
  background: rgba(8,8,20,0.97) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 18px !important;
}
#kbHelp-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  border-bottom: 0.5px solid rgba(255,255,255,0.08) !important;
}
#kbHelp-close {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  border-radius: 7px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   MINI METERS (transport drawer)
   ═══════════════════════════════════════════════════════════════════ */

#tdMiniSpectrum,
#tdMiniScope {
  background: rgba(0,0,0,0.55) !important;
  border: 0.5px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar       { width: 4px !important; height: 4px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 2px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   INFO TEXT
   ═══════════════════════════════════════════════════════════════════ */

.info-text {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.28) !important;
  letter-spacing: 0.01em !important;
}


/* ═══════════════════════════════════════════════════════════════════
   NATIVE INPUTS — CHECKBOX / SELECT
   ═══════════════════════════════════════════════════════════════════ */

input[type="checkbox"] {
  accent-color: #0A84FF !important;
}

select {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,0.75) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
  font-size: 12px !important;
}
select:focus {
  border-color: rgba(10,132,255,0.5) !important;
  outline: none !important;
}

.hc-lfo-select {
  background: rgba(255,255,255,0.06) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
}


/* ═══════════════════════════════════════════════════════════════════
   DEPTH, SPACING & TRANSPARENT GAPS
   ═══════════════════════════════════════════════════════════════════ */

/* Fully transparent sticky transport — ColorBends shows through */
.sticky-transport {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Richer drop shadow on all panels — directional light from top-left */
.control-panel {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 2px 4px rgba(0,0,0,0.5),
    0 8px 24px rgba(0,0,0,0.55),
    0 20px 48px rgba(0,0,0,0.35) !important;
}
.control-panel:not(.panel-inactive) {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 2px 4px rgba(0,0,0,0.5),
    0 8px 24px rgba(0,0,0,0.55),
    0 20px 48px rgba(0,0,0,0.35),
    0 0 40px rgba(var(--pc-rgb, 80,40,160), 0.22) !important;
}

/* More breathing room between panels */
.controls-grid-3col,
.controls-grid {
  gap: 14px !important;
}
.effects-col {
  gap: 14px !important;
}
/* Extra margin below the waveform display and between major sections */
#waveformPanel {
  margin-bottom: 16px !important;
}
.container > .control-panel,
.container > div > .control-panel {
  margin-bottom: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TRANSPORT DRAWER — INSTRUMENT STRIP
   DAW-inspired: flat hierarchy, one solid primary, neutral ghosts,
   annotation labels, hardware-weight separators, mono timecode.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Drawer shell — dark aluminum, not purple ──────────────────────── */
#transportDrawer {
  background: rgba(22,22,30,0.97) !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.06), 0 -8px 32px rgba(0,0,0,0.45) !important;
}

/* ── Toggle pill — neutral, not purple ────────────────────────────── */
#transportDrawerToggle {
  background: rgba(44,44,56,0.97) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.38) !important;
}
#transportDrawerToggle:hover {
  background: rgba(30,30,40,0.97) !important;
  color: rgba(255,255,255,0.65) !important;
}
#transportDrawerToggle.td-open {
  border-color: rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.72) !important;
}

/* ── Tab bar — unified blue accent, no purple transport exception ─── */
#tdTabBar {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
#tdTabBar .td-tab {
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: rgba(255,255,255,0.28) !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  background: transparent !important;
}
#tdTabBar .td-tab:hover {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.65) !important;
}
#tdTabBar .td-tab.active {
  background: transparent !important;
  color: rgba(255,255,255,0.88) !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.5) !important;
}
/* Override the purple transport-tab exception in inline CSS */
#tdTabBar .td-tab[data-td-tab="transport"] {
  color: rgba(255,255,255,0.28) !important;
}
#tdTabBar .td-tab[data-td-tab="transport"]:hover {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.65) !important;
}
#tdTabBar .td-tab[data-td-tab="transport"].active {
  background: transparent !important;
  color: rgba(255,255,255,0.88) !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.5) !important;
}

/* ── Group labels — annotation weight, not headings ───────────────── */
#transportDrawer .autom-ctrl-group-label,
#topPane-transport .autom-ctrl-group-label {
  font-size: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  margin-bottom: 5px !important;
}

/* ── Vertical separator — thin rule, hardware-engraved feel ──────── */
#transportDrawer .autom-ctrl-sep {
  display: block !important;
  width: 1px !important;
  background: rgba(255,255,255,0.07) !important;
  align-self: stretch !important;
  margin: 0 4px !important;
  flex-shrink: 0 !important;
}

/* ── Base button reset inside drawer — neutral ghost ─────────────── */
#transportDrawer button,
#topPane-transport button {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  color: rgba(255,255,255,0.65) !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  transition: background 0.12s, border-color 0.12s, color 0.12s !important;
}
#transportDrawer button:hover:not(:disabled),
#topPane-transport button:hover:not(:disabled) {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.88) !important;
  transform: none !important;
  box-shadow: none !important;
}
#transportDrawer button:disabled,
#topPane-transport button:disabled {
  opacity: 0.25 !important;
}

/* ── PRIMARY — Process Audio: solid fill, stands alone ───────────── */
#transportDrawer #processBtn,
#topPane-transport #processBtn {
  background: rgba(10,132,255,0.85) !important;
  border-color: rgba(10,132,255,0.9) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
#transportDrawer #processBtn:hover:not(:disabled),
#topPane-transport #processBtn:hover:not(:disabled) {
  background: rgba(10,132,255,1) !important;
  border-color: #0A84FF !important;
  box-shadow: 0 0 16px rgba(10,132,255,0.35) !important;
  color: #ffffff !important;
}
#transportDrawer #processBtn:disabled,
#topPane-transport #processBtn:disabled {
  background: rgba(10,132,255,0.18) !important;
  border-color: rgba(10,132,255,0.28) !important;
  color: rgba(10,132,255,0.5) !important;
  opacity: 1 !important;
}

/* ── Play Processed — slightly elevated (second-most important) ───── */
#transportDrawer #playProcessedBtn:not(.td-btn-playing),
#topPane-transport #playProcessedBtn:not(.td-btn-playing) {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.82) !important;
}

/* ── Playing states — keep existing color logic, just tighten ─────── */
#transportDrawer #playOriginalBtn.td-btn-playing {
  border-color: rgba(0,212,255,0.55) !important;
  color: #00d4ff !important;
  background: rgba(0,212,255,0.08) !important;
}
#transportDrawer #playProcessedBtn.td-btn-playing {
  border-color: rgba(138,80,255,0.45) !important;
  color: #c0aaff !important;
  background: rgba(138,80,255,0.1) !important;
}

/* ── Loop — green active state ────────────────────────────────────── */
#transportDrawer #loopPlaybackBtn {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
}
#transportDrawer #loopPlaybackBtn.active {
  color: #00e868 !important;
  border-color: rgba(0,232,104,0.45) !important;
  background: rgba(0,232,104,0.08) !important;
}

/* ── Stop — larger icon, same neutral ghost ───────────────────────── */
#transportDrawer button[onclick="stopPlayback()"] {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
}

/* ── Auto Process — amber, unchanged intent ───────────────────────── */
#transportDrawer .auto-process-btn,
#topPane-transport .auto-process-btn {
  border-color: rgba(255,170,0,0.22) !important;
  color: rgba(255,170,0,0.55) !important;
  background: transparent !important;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
}
#transportDrawer .auto-process-btn:hover,
#topPane-transport .auto-process-btn:hover {
  border-color: rgba(255,170,0,0.5) !important;
  color: rgba(255,170,0,0.85) !important;
  background: rgba(255,170,0,0.05) !important;
}
#transportDrawer .auto-process-btn.active,
#topPane-transport .auto-process-btn.active {
  background: rgba(255,170,0,0.1) !important;
  border-color: rgba(255,170,0,0.55) !important;
  color: #ffaa00 !important;
}

/* ── Timecode / position display — monospaced DAW readout ─────────── */
#transportDrawer #tdTimeDisplay {
  font-family: 'SF Mono', 'Menlo', 'Monaco', ui-monospace, monospace !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.88) !important;
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
}
#tdMeterWrap #playPosDisplay {
  font-family: 'SF Mono', 'Menlo', 'Monaco', ui-monospace, monospace !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.88) !important;
  /* Fixed width — wide enough for longest value (000:00.000 + bar/beat) */
  min-width: 11ch !important;
  display: inline-block !important;
  text-align: left !important;
}

/* ── Master Controls drawer: section col-titles ───────────────────── */
#topPane-master .top-drawer-col-title,
#topDrawerBody .top-drawer-col-title {
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  color: rgba(255,255,255,0.22) !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
}

/* ── Safe Mode — demote from primary button to subtle toggle ─────── */
.waveform-master-controls .safe-mode-label,
#transportDrawer .safe-mode-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
  background: transparent !important;
  border-color: rgba(68,255,136,0.18) !important;
  color: rgba(68,255,136,0.6) !important;
}

/* ── Normalise — same demoted weight ─────────────────────────────── */
.waveform-master-controls .btn-normalise,
#transportDrawer .btn-normalise {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
  background: transparent !important;
  border-color: rgba(255,200,50,0.18) !important;
  color: rgba(255,200,50,0.55) !important;
}
.waveform-master-controls .btn-normalise:hover:not(:disabled),
#transportDrawer .btn-normalise:hover:not(:disabled) {
  background: rgba(255,200,50,0.06) !important;
  border-color: rgba(255,200,50,0.42) !important;
  color: rgba(255,200,50,0.9) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MASTER CONTROLS DRAWER — RESPONSIVE SCALING
   Three breakpoints toggled via ResizeObserver (see inline JS).
   mc-compact  : 1100–1400px — no group labels, smaller canvases (40px)
   mc-icon-only:  820–1100px — emoji only, text hidden, canvases (32px)
   mc-dial-hide:    < 820px  — dial row hidden entirely
   Canvas CSS sizing shrinks layout; JS draw quality unaffected (reads
   canvas.width/height attrs which stay at 52).
   ═══════════════════════════════════════════════════════════════════ */

/* ── mc-compact: hide group labels, smaller canvases ─────────────── */
#topPane-master.mc-compact .autom-ctrl-group-label {
  display: none !important;
}
#topPane-master.mc-compact .autom-ctrl-group-btns button,
#topPane-master.mc-compact .safe-mode-label,
#topPane-master.mc-compact .btn-normalise {
  padding: 5px 8px !important;
}
#topPane-master.mc-compact .mstr-dial-row canvas {
  width: 40px !important;
  height: 40px !important;
}
#topPane-master.mc-compact .mstr-dial-item {
  padding: 3px 5px !important;
}
#topPane-master.mc-compact .mstr-dial-val {
  min-width: 36px !important;
  font-size: 8.5px !important;
}

/* ── mc-icon-only: hide button text, even smaller canvases ───────── */
#topPane-master.mc-icon-only .autom-ctrl-group-label {
  display: none !important;
}
#topPane-master.mc-icon-only .mc-lbl {
  display: none !important;
}
#topPane-master.mc-icon-only .autom-ctrl-group-btns button,
#topPane-master.mc-icon-only .safe-mode-label,
#topPane-master.mc-icon-only .btn-normalise {
  padding: 5px 7px !important;
  min-width: 0 !important;
}
#topPane-master.mc-icon-only .mstr-dial-row canvas {
  width: 32px !important;
  height: 32px !important;
}
#topPane-master.mc-icon-only .mstr-dial-item {
  padding: 2px 4px !important;
}
#topPane-master.mc-icon-only .mstr-dial-val {
  min-width: 30px !important;
  font-size: 7.5px !important;
}
#topPane-master.mc-icon-only .mstr-dial-lbl {
  font-size: 6.5px !important;
}

/* ── mc-dial-hide: dials gone, emoji-only buttons ────────────────── */
#topPane-master.mc-dial-hide .autom-ctrl-group-label {
  display: none !important;
}
#topPane-master.mc-dial-hide .mc-lbl {
  display: none !important;
}
#topPane-master.mc-dial-hide .mstr-dial-row {
  display: none !important;
}
#topPane-master.mc-dial-hide .autom-ctrl-group-btns button,
#topPane-master.mc-dial-hide .safe-mode-label,
#topPane-master.mc-dial-hide .btn-normalise {
  padding: 5px 7px !important;
  min-width: 0 !important;
}

/* ── Fluid button padding — scales with window width at all sizes ── */
#topPane-master .autom-ctrl-group-btns button,
#topPane-master .autom-ctrl-group-btns .safe-mode-label,
#topPane-master .autom-ctrl-group-btns .btn-normalise {
  padding: var(--mc-pad-v, 5px) var(--mc-pad-h, 7px) !important;
}

/* ── Stacked button groups: only active at compact/narrow widths ─── */
/* mc-stack: buttons stack vertically (Timing+Presets, EQ+Dynamics, Output) */
#topPane-master.mc-compact .mc-stack .autom-ctrl-group-btns,
#topPane-master.mc-icon-only .mc-stack .autom-ctrl-group-btns,
#topPane-master.mc-dial-hide .mc-stack .autom-ctrl-group-btns {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
}
#topPane-master.mc-compact .mc-stack .autom-ctrl-group-btns button,
#topPane-master.mc-compact .mc-stack .autom-ctrl-group-btns .safe-mode-label,
#topPane-master.mc-compact .mc-stack .autom-ctrl-group-btns .btn-normalise,
#topPane-master.mc-icon-only .mc-stack .autom-ctrl-group-btns button,
#topPane-master.mc-icon-only .mc-stack .autom-ctrl-group-btns .safe-mode-label,
#topPane-master.mc-icon-only .mc-stack .autom-ctrl-group-btns .btn-normalise,
#topPane-master.mc-dial-hide .mc-stack .autom-ctrl-group-btns button,
#topPane-master.mc-dial-hide .mc-stack .autom-ctrl-group-btns .safe-mode-label,
#topPane-master.mc-dial-hide .mc-stack .autom-ctrl-group-btns .btn-normalise {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
/* mc-stack-2col: 2×2 grid (Export group) at compact widths */
#topPane-master.mc-compact .mc-stack-2col .autom-ctrl-group-btns,
#topPane-master.mc-icon-only .mc-stack-2col .autom-ctrl-group-btns,
#topPane-master.mc-dial-hide .mc-stack-2col .autom-ctrl-group-btns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  flex-direction: unset !important;
  gap: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION — MANDATORY ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}