/* AnacleStudioSyn - Modern DAW Studio UI Styles */
:root {
  --bg-dark: #0a0c10;
  --bg-panel: rgba(16, 20, 28, 0.88);
  --bg-panel-solid: #121722;
  --border-color: rgba(255, 255, 255, 0.12);
  --border-accent: #00f0ff;
  --text-main: #f0f4fc;
  --text-muted: #8a99ad;
  --accent-cyan: #00f0ff;
  --accent-magenta: #ff0077;
  --accent-yellow: #ffea00;
  --accent-green: #00ff88;
  --accent-red: #ff3344;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ui-scale: 1;
  --text-scale: 1;
  --font-2xs: calc(9px * var(--text-scale, 1));
  --font-xs: calc(10px * var(--text-scale, 1));
  --font-sm: calc(11px * var(--text-scale, 1));
  --font-base: calc(12px * var(--text-scale, 1));
  --font-md: calc(13px * var(--text-scale, 1));
  --font-lg: calc(15px * var(--text-scale, 1));
  --font-xl: calc(18px * var(--text-scale, 1));
  --font-2xl: calc(22px * var(--text-scale, 1));
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* iOS: stop the page itself from panning/zooming/selecting under the studio */
  touch-action: none !important;
  -webkit-touch-callout: none;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-sans);
}

#canvas-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Phase 1 touch: the WebGL canvas owns all touch gestures (look/tap/long-press)
   and must not let the browser scroll or select text on it. */
#canvas-container canvas {
  touch-action: none !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Scrollable modal bodies keep native panning/scrolling gestures. */
.modal-body,
.master-options-layout,
.options-content-area,
.options-sidebar {
  touch-action: manipulation;
}

/* Crosshair Reticle & Targeting */
#crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  pointer-events: none;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.2s ease;
}

#crosshair.inverting {
  mix-blend-mode: difference !important;
}

#crosshair.inverting svg {
  filter: none !important;
}

#crosshair svg,
#crosshair-preview-widget svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.85));
}

#crosshair .reticle-dot,
#crosshair .reticle-ring,
#crosshair .reticle-cross,
#crosshair .reticle-brackets,
#crosshair .reticle-chevron,
#crosshair-preview-widget .reticle-dot,
#crosshair-preview-widget .reticle-ring,
#crosshair-preview-widget .reticle-cross,
#crosshair-preview-widget .reticle-brackets,
#crosshair-preview-widget .reticle-chevron {
  display: none;
  transition: stroke 0.15s ease, fill 0.15s ease;
}

/* 1. Minimal Dot */
#crosshair.style-dot .reticle-dot,
#crosshair-preview-widget.style-dot .reticle-dot {
  display: block;
}

/* 2. Precision Cross */
#crosshair.style-cross .reticle-cross,
#crosshair.style-cross .reticle-dot,
#crosshair-preview-widget.style-cross .reticle-cross,
#crosshair-preview-widget.style-cross .reticle-dot {
  display: block;
}

/* 3. Ring + Center Dot */
#crosshair.style-ring-dot .reticle-dot,
#crosshair.style-ring-dot .reticle-ring,
#crosshair-preview-widget.style-ring-dot .reticle-dot,
#crosshair-preview-widget.style-ring-dot .reticle-ring {
  display: block;
}

/* 4. Framing Brackets */
#crosshair.style-brackets .reticle-brackets,
#crosshair.style-brackets .reticle-dot,
#crosshair-preview-widget.style-brackets .reticle-brackets,
#crosshair-preview-widget.style-brackets .reticle-dot {
  display: block;
}

/* 5. HUD Chevrons */
#crosshair.style-chevron .reticle-chevron,
#crosshair.style-chevron .reticle-dot,
#crosshair-preview-widget.style-chevron .reticle-chevron,
#crosshair-preview-widget.style-chevron .reticle-dot {
  display: block;
}

/* Tactical Hover Response */
#crosshair.hover-knob,
#crosshair.hover-jack,
#crosshair.hover-button,
#crosshair.hover-cable {
  transform: translate(-50%, -50%) scale(1.22);
}

#crosshair:not(.inverting).hover-knob .reticle-dot { fill: var(--accent-cyan); }
#crosshair:not(.inverting).hover-knob .reticle-ring,
#crosshair:not(.inverting).hover-knob line,
#crosshair:not(.inverting).hover-knob path { stroke: var(--accent-cyan); }

#crosshair:not(.inverting).hover-jack .reticle-dot { fill: var(--accent-yellow); }
#crosshair:not(.inverting).hover-jack .reticle-ring,
#crosshair:not(.inverting).hover-jack line,
#crosshair:not(.inverting).hover-jack path { stroke: var(--accent-yellow); }

#crosshair:not(.inverting).hover-button .reticle-dot { fill: var(--accent-green); }
#crosshair:not(.inverting).hover-button .reticle-ring,
#crosshair:not(.inverting).hover-button line,
#crosshair:not(.inverting).hover-button path { stroke: var(--accent-green); }

#crosshair:not(.inverting).hover-cable .reticle-dot { fill: var(--accent-magenta); }
#crosshair:not(.inverting).hover-cable .reticle-ring,
#crosshair:not(.inverting).hover-cable line,
#crosshair:not(.inverting).hover-cable path { stroke: var(--accent-magenta); }

/* Active Knob Drag Indicator (Vertical Linear DAW Mode) */
#crosshair.knob-dragging {
  transform: translate(-50%, -50%) scale(1.4) !important;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.95)) !important;
}

#crosshair.knob-dragging .reticle-chevron {
  display: block !important;
  stroke: var(--accent-cyan) !important;
  stroke-width: 2.2px !important;
  animation: knob-drag-pulse 1s infinite alternate ease-in-out;
  transform-origin: 20px 20px;
}

#crosshair.knob-dragging .reticle-dot {
  display: block !important;
  fill: var(--accent-cyan) !important;
}

#crosshair.knob-dragging .reticle-cross,
#crosshair.knob-dragging .reticle-ring,
#crosshair.knob-dragging .reticle-brackets {
  display: none !important;
}

@keyframes knob-drag-pulse {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(1.22); }
}

/* Fixed Bottom-Left Parameter Tooltip */
#param-tooltip {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: rgba(10, 14, 24, 0.94);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-left: 4px solid var(--accent-cyan);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-main);
  pointer-events: none;
  z-index: 105;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  min-width: 280px;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 240, 255, 0.2);
  backdrop-filter: blur(14px);
}

#param-tooltip.active {
  opacity: 1;
  transform: translateY(0);
}

#param-tooltip .tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

#param-tooltip .param-title {
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 12px;
}

#param-tooltip .param-val {
  color: #fff;
  font-weight: 700;
}

#param-tooltip .param-desc {
  font-size: 10px;
  color: #c0cde0;
  line-height: 1.4;
  margin-bottom: 4px;
}

#param-tooltip .param-hint {
  display: block;
  font-size: 9px;
  color: var(--accent-yellow);
  margin-top: 2px;
}

/* Top Navigation & Status Bar */
#top-hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: linear-gradient(180deg, rgba(8, 11, 18, 0.95) 0%, rgba(8, 11, 18, 0.6) 80%, transparent 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 50;
  backdrop-filter: blur(10px);
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-badge {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #00f0ff, #ff0077);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.sub-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 4px;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
}

.hud-center-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-main);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  font-family: var(--font-sans);
}

.hud-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--accent-cyan);
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.hud-btn.active {
  background: var(--accent-cyan);
  color: #000;
  font-weight: 700;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.6);
}

.hud-btn .key-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ddd;
}

.hud-btn.active .key-hint {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}

/* Record Button Special Styling */
.hud-btn.record-btn {
  border-color: rgba(255, 51, 68, 0.5);
  background: rgba(255, 51, 68, 0.1);
  color: #ff99aa;
}

.hud-btn.record-btn:hover {
  background: rgba(255, 51, 68, 0.25);
  border-color: var(--accent-red);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 51, 68, 0.4);
}

.hud-btn.record-btn.recording {
  background: var(--accent-red);
  color: #fff;
  animation: pulse-red 1.2s infinite;
  box-shadow: 0 0 20px var(--accent-red);
}

@keyframes pulse-red {
  0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 51, 68, 0.6); }
  50% { transform: scale(1.03); box-shadow: 0 0 22px rgba(255, 51, 68, 0.9); }
  100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 51, 68, 0.6); }
}

.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
}

.hud-btn.record-btn.recording .rec-dot {
  background: #fff;
}

/* Cable Color Selector Pill */
.cable-color-preview {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #fff;
}

/* Bottom Hint & Controls Bar */
#bottom-hud {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 14, 22, 0.85);
  border: 1px solid var(--border-color);
  border-radius: 30px;
  padding: 6px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  z-index: 50;
  backdrop-filter: blur(8px);
}

.key-badge {
  color: var(--accent-cyan);
  font-weight: 700;
  margin-right: 4px;
}

/* Fullscreen Cinematic Overlays */
#fx-focusblur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
  will-change: backdrop-filter;
  z-index: 35;
  display: none;
  backdrop-filter: blur(var(--fx-focusblur-radius, 4px));
  -webkit-backdrop-filter: blur(var(--fx-focusblur-radius, 4px));
  mask-image: radial-gradient(ellipse at 50% 55%, transparent 40%, black 82%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, transparent 40%, black 82%);
}

#fx-motionblur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
  will-change: backdrop-filter;
  z-index: 36;
  display: none;
  backdrop-filter: blur(var(--fx-motionblur-amount, 0px));
  -webkit-backdrop-filter: blur(var(--fx-motionblur-amount, 0px));
}

#fx-chromatic-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 37;
  display: none;
  box-shadow: inset 0 0 calc(var(--fx-chromatic-spread, 3px) * 33) rgba(0, 240, 255, 0.06), inset 0 0 calc(var(--fx-chromatic-spread, 3px) * 53) rgba(255, 0, 110, 0.04);
  mix-blend-mode: screen;
}

#fx-vignette-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 38;
  display: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) var(--fx-vignette-radius, 52%), rgba(0, 0, 0, var(--fx-vignette-opacity, 0.65)) 100%);
  mix-blend-mode: multiply;
  transition: opacity 0.2s ease;
}

#fx-filmgrain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 39;
  display: none;
  opacity: var(--fx-filmgrain-opacity, 0.048);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}

/* Fullscreen CRT Scanlines & Chromatic Aberration Shader */
#crt-scanlines-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
  display: none;
  opacity: var(--fx-scanlines-opacity, 0.7);
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 3px, 6px 100%;
  mix-blend-mode: overlay;
}

/* Start Screen / Pointer Lock Overlay */
#click-to-play-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 7, 12, 0.88);
  backdrop-filter: blur(12px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Use flex-start + `margin:auto` on .hero-box (not justify-content:center):
     when the hero is taller than a landscape phone viewport, centering clips
     its top and the ENTER button becomes unreachable. Auto margins center it
     when there is room and top-align it into the scroll range when there is
     not, so the whole screen stays scrollable and tappable. */
  justify-content: flex-start;
  cursor: pointer;
  transition: opacity 0.3s ease;
  overflow-y: auto;
  padding: 24px 16px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

#click-to-play-screen.hidden {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

.hero-box {
  background: var(--ui-bg-panel, rgba(16, 22, 32, 0.95));
  border: 1px solid var(--ui-border-accent, rgba(0, 240, 255, 0.3));
  border-radius: 16px;
  padding: 36px 44px;
  text-align: center;
  width: 620px;
  max-width: calc(92vw / var(--ui-scale, 1));
  box-shadow: 0 0 50px var(--ui-border-glow, rgba(0, 240, 255, 0.15));
  margin: auto;
  zoom: var(--ui-scale, 1);
  cursor: default;
}

.hero-title {
  font-family: var(--font-mono);
  font-size: calc(36px * var(--text-scale, 1));
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--ui-accent-primary, #00f0ff), var(--ui-accent-secondary, #ff0077));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.hero-subtitle {
  font-size: calc(14px * var(--text-scale, 1));
  color: var(--ui-text-muted, var(--text-muted));
  margin-bottom: 24px;
  line-height: 1.5;
}

.start-action-btn {
  background: linear-gradient(135deg, var(--ui-accent-primary, #00f0ff), var(--ui-accent-secondary, #0088ff));
  color: #000;
  font-weight: 800;
  font-size: calc(15px * var(--text-scale, 1));
  padding: calc(14px * var(--text-scale, 1)) calc(36px * var(--text-scale, 1));
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 25px var(--ui-border-glow, rgba(0, 240, 255, 0.5));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 24px;
}

.start-action-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 35px var(--ui-border-glow, rgba(0, 240, 255, 0.8));
}

/* ENTER on the left, account status / LOG IN on the right. Wraps cleanly on
   narrow portrait screens (the account chip drops to its own right-aligned
   line) and stays on one row in landscape/desktop. */
.start-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 24px;
}

.start-action-row .start-action-btn {
  margin-bottom: 0;
}

.start-account {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

.start-account-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--accent-green, #00ff66);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.85);
  flex: 0 0 auto;
}

.start-account-status {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: calc(13px * var(--text-scale, 1));
  color: var(--accent-green, #00ff66);
  max-width: 44vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.start-account-btn {
  min-height: 44px;
  padding: 0 calc(18px * var(--text-scale, 1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--ui-accent-primary, #00f0ff);
  color: var(--ui-accent-primary, #00f0ff);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: calc(13px * var(--text-scale, 1));
  letter-spacing: 0.5px;
  border-radius: max(4px, var(--ui-border-radius, 8px));
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.start-account-btn:hover {
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 18px var(--ui-border-glow, rgba(0, 240, 255, 0.4));
}

/* The explicit display values above would otherwise defeat the [hidden]
   attribute the account state toggles, leaving LOG IN visible while logged in. */
.start-account-btn[hidden],
.start-account-status[hidden],
.start-account-dot[hidden] {
  display: none !important;
}

.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
  font-size: calc(12px * var(--text-scale, 1));
  font-family: var(--font-mono);
  color: var(--ui-text-muted, var(--text-muted));
  border-top: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.1));
  padding-top: 18px;
}

.controls-grid span strong {
  color: var(--ui-accent-primary, var(--accent-cyan));
}

/* Modals & Dialogs */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  overflow-y: auto;
  padding: 24px 16px;
  box-sizing: border-box;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay > .modal-window,
.modal-overlay > .modal-card,
.modal-overlay > .master-options-window,
.modal-overlay > .knob-behavior-window,
.modal-overlay > .lfo-matrix-window {
  margin: auto;
}

.modal-window {
  background: var(--bg-panel-solid);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  width: 780px;
  max-width: calc(92vw / var(--ui-scale, 1));
  max-height: calc(88vh / var(--ui-scale, 1));
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 240, 255, 0.15);
  overflow: hidden;
}

.modal-header {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-title-count {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.modal-close-btn:hover {
  color: #fff;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

/* Per-knob behavior editor */
.knob-behavior-window {
  width: 560px;
  max-width: 92vw;
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.18);
}

.knob-behavior-header .modal-title {
  color: #c084fc;
}

.knob-behavior-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.knob-behavior-close:hover {
  color: #fff;
}

.knob-behavior-summary {
  margin: 0 0 6px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
}

.knob-behavior-unit-note {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 11px;
}

.knob-behavior-unit-note span {
  color: var(--accent-cyan);
  font-family: var(--font-mono);
}

.knob-behavior-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.knob-behavior-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.knob-behavior-profile-field,
.knob-behavior-range-field {
  grid-column: 1 / -1;
}

.knob-behavior-field label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.knob-behavior-field label span,
.knob-behavior-field output {
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

.knob-behavior-field input[type="number"],
.knob-behavior-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 5px;
  background: rgba(3, 8, 15, 0.75);
  color: #fff;
  padding: 8px 9px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.knob-behavior-field input[type="number"]:focus,
.knob-behavior-field select:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.16);
}

.knob-behavior-range-field input[type="range"] {
  width: 100%;
  accent-color: #c084fc;
}

.knob-behavior-check {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
}

.knob-behavior-check input {
  margin-top: 2px;
  accent-color: var(--accent-cyan);
}

.knob-behavior-check span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.knob-behavior-check small {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 10px;
}

.knob-behavior-profile-description,
.knob-behavior-help {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
}

.knob-behavior-profile-description {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 32px;
}

.knob-behavior-help {
  margin: 16px 0 20px;
}

.knob-behavior-help strong {
  color: #c084fc;
}

.knob-behavior-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 16px;
}

.knob-behavior-actions .hud-btn {
  justify-content: center;
  min-height: 38px;
}

.knob-behavior-reset {
  border-color: rgba(255, 255, 255, 0.2);
}

.knob-behavior-editor {
  border-color: rgba(255, 170, 0, 0.55);
  color: #ffaa00;
}

.knob-behavior-apply {
  border-color: #c084fc;
  color: #e9d5ff;
  background: rgba(168, 85, 247, 0.14);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.2);
}

.knob-behavior-apply-all {
  border-color: rgba(0, 240, 255, 0.6);
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.2);
}

.knob-behavior-apply-all:hover {
  background: rgba(0, 240, 255, 0.25);
  color: #fff;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.5);
}

@media (max-width: 560px) {
  .knob-behavior-grid {
    grid-template-columns: 1fr;
  }

  .knob-behavior-profile-field,
  .knob-behavior-range-field,
  .knob-behavior-check,
  .knob-behavior-profile-description {
    grid-column: auto;
  }

  .knob-behavior-actions {
    flex-wrap: wrap;
  }

  .knob-behavior-actions .hud-btn {
    flex: 1 1 140px;
  }
}

/* Module Cards Grid in Spawner */
.spawner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.spawner-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.spawner-card:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.2);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-title {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.card-tag {
  font-size: 9px;
  font-family: var(--font-mono);
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.15));
  color: var(--ui-accent-primary, var(--accent-cyan));
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.card-desc {
  font-size: 11px;
  color: var(--ui-text-muted, var(--text-muted));
  line-height: 1.4;
  margin-bottom: 12px;
}

.card-btn {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.2));
  border: 1px solid var(--ui-border-accent, var(--accent-cyan));
  color: var(--ui-text-main, #fff);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
}

.spawner-card:hover .card-btn {
  background: var(--ui-accent-primary, var(--accent-cyan));
  color: #000;
}

/* Theme Selector Styles */
.theme-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.theme-card {
  background: var(--ui-bg-sidebar, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.1));
  border-radius: var(--ui-border-radius, 8px);
  padding: 16px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.theme-card:hover {
  border-color: var(--ui-border-accent, var(--accent-cyan));
  background: var(--ui-accent-subtle, rgba(255, 255, 255, 0.05));
}

.theme-card.active {
  border-color: var(--ui-border-accent, var(--accent-cyan));
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.1));
  box-shadow: 0 0 20px var(--ui-border-glow, rgba(0, 240, 255, 0.3));
}

.theme-card-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ui-text-main, #fff);
}

.theme-card.active .theme-card-title {
  color: var(--ui-accent-primary, var(--accent-cyan));
}

.theme-card-desc {
  font-size: 11px;
  color: var(--ui-text-muted, var(--text-muted));
}

/* Room Size Controls */
.room-sliders-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px;
}

.room-sliders-box h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-cyan);
  margin-bottom: 12px;
}

.slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: var(--font-mono);
}

.slider-row input[type="range"] {
  flex: 1;
  margin: 0 16px;
  accent-color: var(--accent-cyan);
}

/* Cable Color Palette Popover */
.cable-palette-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.color-swatch:hover {
  transform: scale(1.2);
}

.color-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 60px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 120;
  pointer-events: none;
}

.toast {
  background: rgba(16, 22, 32, 0.95);
  border: 1px solid var(--accent-cyan);
  border-radius: 6px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  animation: slideInRight 0.25s ease forwards;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Keybindings Settings Table */
.keybinds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
}

.keybinds-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.keybinds-table td {
  padding: 10px 14px;
}

.keybind-action-name {
  color: var(--text-main);
  font-weight: 500;
}

.keybind-btn {
  background: var(--ui-bg-sidebar, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.3));
  color: var(--ui-accent-primary, var(--accent-cyan));
  padding: 6px 16px;
  border-radius: var(--ui-border-radius, 6px);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  min-width: 80px;
  text-align: center;
  transition: all 0.15s ease;
}

.keybind-btn:hover {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.2));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  box-shadow: 0 0 10px var(--ui-border-glow, rgba(0, 240, 255, 0.4));
}

.keybind-btn.listening {
  background: var(--ui-accent-secondary, var(--accent-magenta));
  color: #fff;
  border-color: #fff;
  animation: pulse-listening 0.8s infinite;
}

@keyframes pulse-listening {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.settings-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Module Transform & Angle Menu */
.transform-section {
  background: var(--ui-bg-card, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.08));
  border-radius: var(--ui-border-radius, 8px);
  padding: 14px;
  margin-bottom: 14px;
}

.transform-section-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ui-accent-primary, var(--accent-cyan));
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.transform-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  font-size: 12px;
  font-family: var(--font-mono);
}

.transform-row span {
  width: 125px;
  min-width: 125px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ui-text-muted, var(--text-muted));
}

.transform-row input[type="range"] {
  flex: 1;
  margin: 0 10px;
  accent-color: var(--ui-accent-primary, var(--accent-cyan));
}

.module-skin-select {
  flex: 1;
  min-width: 0;
  margin-left: 10px;
  padding: 6px 8px;
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.35));
  border-radius: max(3px, calc(var(--ui-border-radius, 4px) * 0.75));
  background: var(--ui-bg-sidebar, rgba(0, 0, 0, 0.45));
  color: var(--ui-text-main, #fff);
  font-family: var(--font-mono);
  font-size: 11px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.module-skin-select:focus {
  border-color: var(--ui-border-accent, var(--accent-cyan));
  box-shadow: 0 0 8px var(--ui-border-glow, rgba(0, 240, 255, 0.25));
}

.module-skin-select option {
  background: var(--ui-bg-panel-solid, #101722);
  color: var(--ui-text-main, #fff);
}

.module-skin-description {
  color: var(--ui-text-muted, var(--text-muted));
  font-size: 11px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.transform-val-display {
  width: 55px;
  text-align: right;
  color: var(--ui-text-main, #fff);
  font-weight: 700;
  font-size: 12px;
}

.transform-number-input {
  flex: 0 0 76px;
  width: 76px;
  box-sizing: border-box;
  margin-left: 8px;
  padding: 4px 6px;
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.32));
  border-radius: max(3px, calc(var(--ui-border-radius, 4px) * 0.75));
  background: var(--ui-bg-sidebar, rgba(0, 0, 0, 0.42));
  color: var(--ui-text-main, #fff);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.transform-number-input:focus {
  border-color: var(--ui-border-accent, var(--accent-cyan));
  box-shadow: 0 0 10px var(--ui-border-glow, rgba(0, 240, 255, 0.22));
}

.transform-number-input::-webkit-outer-spin-button,
.transform-number-input::-webkit-inner-spin-button {
  margin-left: 3px;
  opacity: 0.55;
}

.theme-skybox-select {
  flex: 1;
  min-width: 0;
  margin-left: 12px;
  padding: 7px 9px;
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.35));
  border-radius: max(3px, calc(var(--ui-border-radius, 4px) * 0.75));
  background: var(--ui-bg-sidebar, rgba(0, 0, 0, 0.45));
  color: var(--ui-text-main, #fff);
  font-family: var(--font-mono);
  font-size: 11px;
}

.theme-skybox-select option {
  background: var(--ui-bg-panel-solid, #101722);
  color: var(--ui-text-main, #fff);
}

.skybox-description,
.skybox-storage-note,
.skybox-animation-note {
  color: var(--ui-text-muted, var(--text-muted));
  font-size: 11px;
  line-height: 1.45;
  margin: 5px 0 0;
}

.skybox-animation-row {
  margin-top: 10px;
}

.skybox-animation-row input[type="range"] {
  flex: 1;
  min-width: 100px;
  accent-color: var(--ui-accent-primary, var(--accent-cyan));
}

.skybox-animation-note {
  color: var(--ui-accent-glow-subtle, rgba(143, 252, 255, 0.72));
}

.skybox-storage-note code,
.preset-storage-help code {
  color: var(--ui-accent-primary, var(--accent-cyan));
}

.angle-presets-bar {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.angle-preset-btn {
  flex: 1;
  background: var(--ui-bg-sidebar, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.15));
  color: var(--ui-text-main, var(--text-main));
  padding: 5px 6px;
  border-radius: max(3px, calc(var(--ui-border-radius, 4px) * 0.75));
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.15s ease;
}

.angle-preset-btn:hover {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.2));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  color: var(--ui-text-main, #fff);
  box-shadow: 0 0 10px var(--ui-border-glow, rgba(0, 240, 255, 0.3));
}

.transform-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

/* Preset Cards */
.preset-card {
  background: var(--ui-bg-card, rgba(14, 18, 28, 0.95));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.1));
  border-radius: var(--ui-border-radius, 8px);
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
}

.preset-card:hover {
  border-color: var(--ui-border-accent, var(--accent-cyan));
  background: var(--ui-accent-subtle, rgba(20, 26, 40, 0.98));
  box-shadow: 0 4px 16px var(--ui-border-glow, rgba(0, 240, 255, 0.2));
  transform: translateY(-2px);
}

.preset-card.factory-preset {
  border-left: 3px solid var(--ui-accent-secondary, var(--accent-yellow));
}

.preset-card.user-preset {
  border-left: 3px solid var(--ui-accent-primary, var(--accent-cyan));
}

.preset-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-text-main, #fff);
  margin-bottom: 4px;
}

.preset-desc {
  font-size: 10px;
  color: var(--ui-text-muted, var(--text-muted));
  line-height: 1.4;
  margin-bottom: 10px;
}

.preset-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.06));
  padding-top: 8px;
}

.preset-mini-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.15));
  color: var(--ui-text-main, var(--text-main));
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.15s ease;
}

.preset-mini-btn:hover {
  background: var(--ui-accent-primary, var(--accent-cyan));
  color: #000;
  border-color: var(--ui-border-accent, var(--accent-cyan));
}

.preset-mini-btn.btn-delete:hover {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
}

.preset-card-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-text-main, #fff);
  line-height: 1.35;
}

.preset-card-desc {
  margin-top: 5px;
  color: var(--ui-text-muted, var(--text-muted));
  font-size: 10px;
  line-height: 1.4;
}

.preset-card-file {
  margin-top: 7px;
  color: var(--ui-accent-primary, var(--accent-cyan));
  font-family: var(--font-mono);
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-list-message {
  grid-column: 1 / -1;
  padding: 18px;
  color: var(--ui-text-muted, var(--text-muted));
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}

.preset-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.06));
}

.preset-action-btn {
  padding: 4px 7px;
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.28));
  border-radius: 4px;
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.08));
  color: var(--ui-text-main, var(--text-main));
  font-family: var(--font-mono);
  font-size: 9px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.preset-action-btn:hover {
  background: var(--ui-accent-primary, var(--accent-cyan));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  color: #000;
}

.preset-action-btn.btn-replace {
  border-color: rgba(255, 234, 0, 0.45);
  color: #ffea00;
}

.preset-action-btn.btn-replace:hover {
  background: #ffea00;
  border-color: #ffea00;
  color: #000;
}

.preset-action-btn.btn-delete:hover {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #fff;
}

.preset-action-btn.btn-reveal:hover {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.15));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  color: var(--ui-accent-primary, var(--accent-cyan));
}

/* Ownership-gated actions: a preset you may not replace/delete stays visible
   but reads as locked, with the reason in its title. */
.preset-action-btn:disabled,
.preset-action-btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.preset-action-btn:disabled:hover,
.preset-action-btn[aria-disabled="true"]:hover {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.08));
  border-color: var(--ui-border-color, rgba(0, 240, 255, 0.28));
  color: var(--ui-text-main, var(--text-main));
}

/* Server preset toggle: status badge + >=40px touch targets. */
.preset-server-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: var(--accent-cyan);
  background: rgba(0, 240, 255, 0.08);
}
.preset-server-badge.on-server {
  border-color: rgba(0, 255, 136, 0.5);
  color: #00ff88;
  background: rgba(0, 255, 136, 0.12);
}
.preset-action-btn.btn-toggle-server {
  border-color: rgba(0, 255, 136, 0.45);
  color: #00ff88;
}
.preset-action-btn.btn-toggle-server:hover {
  background: #00ff88;
  border-color: #00ff88;
  color: #000;
}
.preset-action-btn.btn-toggle-server.on-server {
  border-color: rgba(255, 51, 85, 0.55);
  color: #ff5577;
}
.preset-action-btn.btn-toggle-server.on-server:hover {
  background: #ff3355;
  border-color: #ff3355;
  color: #fff;
}
.preset-action-btn.btn-toggle-server.needs-login {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text-muted);
}

/* Per-card 3-dots actions menu (present on every preset card). */
.preset-card-menu-wrap {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}
/* Lift the whole card while its menu is open so the dropdown is never painted
   underneath a later grid sibling (cards are grid items, so z-index applies). */
.preset-card.preset-menu-open {
  z-index: 50;
}
.preset-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 24px;
  padding: 2px 4px;
  line-height: 1;
}
.preset-menu-btn[aria-expanded="true"] {
  background: var(--ui-accent-primary, var(--accent-cyan));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  color: #000;
}
.preset-card-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 100000;
  min-width: 210px;
  background: var(--ui-bg-sidebar, #0c101b);
  border: 1px solid var(--ui-border-accent, var(--accent-cyan));
  border-radius: var(--ui-border-radius, 6px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 20px var(--ui-border-glow, rgba(0, 240, 255, 0.3));
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}
.preset-card-menu[hidden] {
  display: none;
}
.preset-card-menu .context-menu-item {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 11px;
}
.preset-card-menu .context-menu-item.disabled,
.preset-card-menu .context-menu-item:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.preset-card-menu .context-menu-item.disabled:hover,
.preset-card-menu .context-menu-item:disabled:hover {
  background: transparent;
  color: var(--ui-text-main, #f0f4fc);
}
@media (max-width: 1024px), (pointer: coarse) {
  .preset-menu-btn {
    min-width: 40px;
    min-height: 40px;
  }
  .preset-card-menu .context-menu-item {
    min-height: 40px;
    padding: 10px 14px;
  }
}
@media (max-width: 1024px), (pointer: coarse) {
  .preset-action-btn {
    min-height: 40px;
    min-width: 44px;
    padding: 8px 10px;
    font-size: 10px;
  }
  .preset-card-actions {
    gap: 6px;
  }
}

/* Custom Themed Context Menu */
.context-menu {
  position: fixed;
  z-index: 100000;
  min-width: 220px;
  background: var(--ui-bg-sidebar, #0c101b);
  border: 1px solid var(--ui-border-accent, var(--accent-cyan));
  border-radius: var(--ui-border-radius, 6px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 20px var(--ui-border-glow, rgba(0, 240, 255, 0.3));
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.context-menu-header {
  padding: 6px 14px 4px 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-accent-primary, var(--accent-cyan));
  border-bottom: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.1));
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--ui-text-main, #f0f4fc);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.context-menu-item:hover {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.15));
  color: var(--ui-accent-primary, var(--accent-cyan));
}

.context-menu-item.danger:hover {
  background: rgba(255, 68, 102, 0.2);
  color: #ff4466;
}

.context-menu-separator {
  height: 1px;
  background: var(--ui-border-color, rgba(255, 255, 255, 0.08));
  margin: 4px 0;
}

.preset-storage-heading {
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 5px;
}

.preset-storage-status {
  color: #00ff88;
  font-size: 10px;
  font-weight: 600;
}

.preset-storage-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.preset-refresh-btn {
  padding: 3px 7px;
  border: 1px solid var(--ui-border-accent, rgba(0, 240, 255, 0.35));
  border-radius: 4px;
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.08));
  color: var(--ui-accent-primary, var(--accent-cyan));
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}

.preset-refresh-btn:hover:not(:disabled) {
  background: var(--ui-accent-primary, rgba(0, 240, 255, 0.2));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  color: #000;
}

.preset-refresh-btn:disabled {
  cursor: wait;
  opacity: 0.55;
}

.preset-storage-help {
  margin: -8px 0 14px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

/* Non-Blocking Side Inspector */
.side-inspector {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 38px;
  width: 410px;
  background: var(--ui-bg-panel, rgba(10, 14, 22, 0.90));
  border-left: 1px solid var(--ui-border-accent, rgba(0, 240, 255, 0.3));
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.7), 0 0 20px var(--ui-border-glow, rgba(0, 240, 255, 0.15));
  backdrop-filter: blur(14px);
  z-index: 110;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.side-inspector.active {
  transform: translateX(0);
}

/* Left-Pinned Module MIDI Inspector */
.side-midi-inspector {
  position: fixed;
  top: 52px;
  left: 0;
  right: auto;
  bottom: 38px;
  width: 440px;
  min-width: 320px;
  max-width: 650px;
  background: var(--ui-bg-panel, rgba(10, 14, 22, 0.93));
  border-right: 1px solid var(--ui-border-accent, rgba(0, 240, 255, 0.35));
  border-left: none;
  box-shadow: 6px 0 28px rgba(0, 0, 0, 0.7), 0 0 20px var(--ui-border-glow, rgba(0, 240, 255, 0.15));
  backdrop-filter: blur(14px);
  z-index: 110;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.side-midi-inspector.active {
  transform: translateX(0);
}

.inspector-resize-handle {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  background: transparent;
  z-index: 120;
  transition: background 0.15s ease;
}

.inspector-resize-handle:hover,
.inspector-resize-handle.active {
  background: var(--ui-accent-primary, rgba(0, 240, 255, 0.5));
  box-shadow: 0 0 10px var(--ui-border-glow, rgba(0, 240, 255, 0.8));
}

/* Knob Mapping Card Styles in Left Inspector */
.side-midi-knob-card {
  background: var(--ui-bg-card, rgba(18, 24, 36, 0.7));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.08));
  border-radius: var(--ui-border-radius, 8px);
  padding: 10px 12px;
  transition: all 0.18s ease;
  position: relative;
}

.side-midi-knob-card:hover {
  background: var(--ui-bg-sidebar, rgba(22, 30, 46, 0.85));
  border-color: var(--ui-border-accent, rgba(0, 240, 255, 0.3));
}

.side-midi-knob-card.is-mapped {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.05));
  border: 1px solid var(--ui-border-accent, rgba(0, 240, 255, 0.35));
  box-shadow: 0 0 14px var(--ui-border-glow, rgba(0, 240, 255, 0.08));
}

.side-midi-knob-card.is-learning {
  border-color: #ffea00 !important;
  background: rgba(255, 234, 0, 0.1) !important;
  box-shadow: 0 0 18px rgba(255, 234, 0, 0.3) !important;
  animation: midiLearnPulse 1.2s infinite ease-in-out;
}

@keyframes midiLearnPulse {
  0%, 100% { border-color: rgba(255, 234, 0, 0.6); }
  50% { border-color: rgba(255, 234, 0, 1.0); box-shadow: 0 0 24px rgba(255, 234, 0, 0.5); }
}

.side-midi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.side-midi-knob-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-text-main, #fff);
  display: flex;
  align-items: center;
  gap: 6px;
}

.side-midi-knob-range {
  font-size: 11px;
  color: var(--ui-text-muted, var(--text-muted));
  font-family: var(--font-mono);
}

.side-midi-live-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ui-accent-primary, var(--accent-cyan));
  padding: 2px 7px;
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.1));
  border-radius: 4px;
}

.side-midi-grid-controls {
  display: grid;
  grid-template-columns: minmax(75px, 1fr) minmax(80px, 1.1fr) auto auto;
  gap: 6px;
  align-items: center;
}

.side-midi-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-midi-field label {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ui-text-muted, var(--text-muted));
  text-transform: uppercase;
}

.side-midi-input-badge {
  background: var(--ui-bg-sidebar, rgba(0, 0, 0, 0.6));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.15));
  border-radius: max(3px, calc(var(--ui-border-radius, 4px) * 0.75));
  color: var(--ui-text-main, #fff);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 6px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.side-midi-input-badge:focus {
  border-color: var(--ui-border-accent, var(--accent-cyan));
  box-shadow: 0 0 8px var(--ui-border-glow, rgba(0, 240, 255, 0.3));
}

.side-midi-btn-learn {
  padding: 5px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  border-color: var(--ui-border-accent, var(--accent-cyan));
  color: var(--ui-accent-primary, var(--accent-cyan));
  white-space: nowrap;
}

.side-midi-btn-unmap {
  padding: 5px 7px;
  font-size: 10px;
  border-color: rgba(255, 51, 85, 0.35);
  color: #ff99aa;
}

.side-midi-btn-unmap:hover {
  border-color: #ff3355;
  color: #fff;
  background: rgba(255, 51, 85, 0.2);
}

.side-midi-gauge-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.side-midi-gauge-bar {
  height: 100%;
  background: var(--ui-accent-primary, var(--accent-cyan));
  width: 0%;
  border-radius: 2px;
  transition: width 0.05s linear;
}

.inspector-header {
  padding: 12px 16px;
  background: var(--ui-bg-sidebar, rgba(16, 22, 34, 0.95));
  border-bottom: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.08));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inspector-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ui-accent-primary, var(--accent-cyan));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inspector-close-btn {
  background: transparent;
  border: none;
  color: var(--ui-text-muted, var(--text-muted));
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.inspector-close-btn:hover {
  color: var(--ui-text-main, #fff);
  background: var(--ui-accent-subtle, rgba(255, 255, 255, 0.1));
}

.inspector-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

.inspector-footer-tip {
  padding: 10px 14px;
  background: var(--ui-bg-dark, rgba(6, 9, 15, 0.98));
  border-top: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.06));
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ui-text-muted, var(--text-muted));
  text-align: center;
}

/* ==========================================================================
   MASTER STUDIO OPTIONS HUB (TABBED INTERFACE)
   ========================================================================== */
.master-options-window {
  width: 900px;
  max-width: calc(94vw / var(--ui-scale, 1));
  height: 640px;
  max-height: calc(88vh / var(--ui-scale, 1));
  display: flex;
  flex-direction: column;
}

.master-options-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.options-sidebar {
  width: 220px;
  background: rgba(0, 0, 0, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 6px;
  overflow-y: auto;
}

.options-tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.options-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

.options-tab-btn.active {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.12));
  color: var(--ui-accent-primary, var(--accent-cyan));
  border-color: var(--ui-border-accent, rgba(0, 240, 255, 0.4));
  box-shadow: 0 0 15px var(--ui-border-glow, rgba(0, 240, 255, 0.1));
}

.options-content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: var(--ui-bg-content, rgba(10, 14, 22, 0.5));
}

.options-tab-pane {
  display: none;
}

.options-tab-pane.active {
  display: block;
}

/* DSP Control Grids */
.dsp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.dsp-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px;
}

.dsp-card-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dsp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.dsp-row input[type="range"] {
  flex: 1;
  margin: 0 12px;
  height: 4px;
  accent-color: var(--accent-cyan);
}

.dsp-val {
  min-width: 50px;
  text-align: right;
  color: #fff;
  font-weight: 700;
}

.telemetry-badge-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.2);
}

.telemetry-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  background: rgba(0, 240, 255, 0.08);
  border-radius: 4px;
  color: var(--accent-cyan);
}

/* Color Swatches Selector (20 Palette Colors) */
.swatches-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin: 14px 0;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

.color-swatch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  transition: all 0.15s ease;
  user-select: none;
  /* Touch target: cable palette swatches are tapped on mobile (>=40 px). */
  min-height: 40px;
}

.color-swatch-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.color-swatch-item.active {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.12));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  box-shadow: 0 0 10px var(--ui-border-glow, rgba(0, 240, 255, 0.25));
}

.color-swatch-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}

/* Spawner Category Filter Tabs */
.spawner-category-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.spawner-cat-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #c0cad8;
  padding: 7px 16px;
  border-radius: 6px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Touch target: category filters are tapped on mobile (>=40 px). */
  min-height: 40px;
}

.spawner-cat-btn:hover {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.1));
  border-color: var(--ui-border-accent, rgba(0, 240, 255, 0.4));
  color: #fff;
}

.spawner-cat-btn.active {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.18));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  color: var(--ui-accent-primary, var(--accent-cyan));
  box-shadow: 0 0 12px var(--ui-border-glow, rgba(0, 240, 255, 0.25));
}

/* =========================================================================
   ESC PAUSE & MASTER STUDIO MENU
   ========================================================================= */
.esc-menu-window {
  background: rgba(12, 16, 24, 0.94);
  border-radius: 14px;
  overflow: hidden;
}

/* ESC ACCOUNT action row: LOGIN WITH GOOGLE / REGISTER / LOG IN / LOG OUT.
   Wraps instead of overflowing on narrow (phone landscape) viewports and keeps
   every target at the 40px touch minimum. */
.esc-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.esc-account-actions .hud-btn {
  min-height: 40px;
  justify-content: center;
  padding: 0 12px;
}

.esc-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: #4285f4;
  color: #ffffff;
  background: rgba(66, 133, 244, 0.12);
}

.esc-google-btn:hover {
  background: rgba(66, 133, 244, 0.22);
  border-color: #5b9bff;
}


.esc-action-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.esc-action-btn:hover {
  background: rgba(0, 240, 255, 0.10);
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.18);
}

.esc-action-btn:active {
  transform: translateY(0);
}

.esc-action-btn .esc-icon {
  font-size: 22px;
  line-height: 1;
}

.esc-action-btn .esc-svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-accent-primary, var(--accent-cyan));
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.esc-action-btn:hover .esc-svg-icon {
  transform: scale(1.08);
  color: #ffffff;
  filter: drop-shadow(0 0 6px var(--ui-border-glow, rgba(0, 240, 255, 0.6)));
}

.record-action-btn .esc-svg-icon {
  color: #ff3355;
}

.record-action-btn:hover .esc-svg-icon {
  color: #ff5577;
  filter: drop-shadow(0 0 8px rgba(255, 51, 85, 0.7));
}

.esc-action-btn .esc-btn-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.esc-action-btn .esc-btn-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.esc-action-btn .esc-btn-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.esc-action-btn .key-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--ui-accent-primary, var(--accent-cyan));
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.15));
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.3));
}

.record-action-btn:hover {
  background: rgba(255, 51, 68, 0.12);
  border-color: var(--accent-red);
  box-shadow: 0 6px 20px rgba(255, 51, 68, 0.2);
}

.record-action-btn .key-hint {
  color: var(--accent-red);
  background: rgba(255, 51, 68, 0.15);
  border-color: rgba(255, 51, 68, 0.3);
}

/* ==========================================================================
   DYNAMIC UI & TEXT SCALING ENGINE (70% - 200%) & VIEWPORT CONTAINMENT
   ========================================================================== */
#top-hud {
  zoom: var(--ui-scale, 1);
  max-width: calc(100vw / var(--ui-scale, 1));
}

#bottom-hud {
  zoom: var(--ui-scale, 1);
  max-width: calc(90vw / var(--ui-scale, 1));
  white-space: nowrap;
}

#param-tooltip {
  zoom: var(--ui-scale, 1);
  max-width: calc(360px / var(--ui-scale, 1));
}

#side-inspector,
#side-midi-inspector,
.side-inspector {
  zoom: var(--ui-scale, 1);
  max-height: calc((100vh - 90px) / var(--ui-scale, 1)) !important;
  max-width: calc(85vw / var(--ui-scale, 1)) !important;
}

.modal-window,
.modal-card,
.master-options-window,
.knob-behavior-window,
.lfo-matrix-window {
  zoom: var(--ui-scale, 1);
  max-height: calc(88vh / var(--ui-scale, 1)) !important;
  max-width: calc(94vw / var(--ui-scale, 1)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.modal-header,
.knob-behavior-header,
.master-options-window .modal-header {
  flex-shrink: 0 !important;
}

.modal-body,
.knob-behavior-body,
.master-options-layout,
.options-content-area,
.lfo-matrix-window .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.modal-footer,
.inspector-footer-tip {
  flex-shrink: 0 !important;
}

#toast-container {
  zoom: var(--ui-scale, 1);
}

/* Decoupled Text Readability Scaling across UI surfaces */
.options-content-area,
.modal-body,
.inspector-body,
.side-inspector,
.side-midi-inspector,
.help-guide-container,
.tab-help,
.dsp-card,
.preset-card,
.theme-card,
.hero-box,
.start-screen-display-bar,
.controls-grid,
#param-tooltip {
  font-size: calc(13px * var(--text-scale, 1));
}

.options-content-area p,
.dsp-card p,
.help-section-desc,
.guide-pro-tip,
.hero-subtitle,
.control-subtext {
  font-size: calc(11px * var(--text-scale, 1)) !important;
  line-height: 1.45 !important;
}

.options-tab-btn,
.hud-btn,
.scale-pill-btn,
.start-perf-btn,
.start-theme-btn,
.display-select-box {
  font-size: calc(11px * var(--text-scale, 1));
}

.dsp-card-title,
.transform-section-title,
.control-title,
.start-perf-tag,
.display-info-pill {
  font-size: calc(12px * var(--text-scale, 1)) !important;
}

.dsp-val,
.control-value-badge,
.start-theme-title {
  font-size: calc(11px * var(--text-scale, 1));
}

.start-perf-sub,
.start-theme-tag,
.display-dpr-pill {
  font-size: calc(9px * var(--text-scale, 1)) !important;
}

.guide-table th,
.guide-table td {
  font-size: calc(11px * var(--text-scale, 1)) !important;
}

.keycap,
.mac-keycap {
  font-size: calc(10px * var(--text-scale, 1)) !important;
}

/* Resolution Advisory Warning Badge */
.scale-warning-badge {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.4);
  border-radius: 6px;
  color: #ffaa00;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--text-scale, 1));
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  animation: fadeInWarning 0.25s ease;
}

.scale-warning-badge.active {
  display: flex;
}

@keyframes fadeInWarning {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Live Typography Preview Box in Master Options */
.typography-preview-box {
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px dashed var(--ui-border-color, rgba(0, 240, 255, 0.3));
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}

.typography-preview-label {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 700;
  color: var(--ui-accent-primary, var(--accent-cyan));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.typography-preview-sample {
  font-family: var(--font-sans);
  font-size: calc(13px * var(--text-scale, 1));
  color: var(--ui-text-main, #f0f4fc);
  line-height: 1.4;
}

.typography-preview-meta {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--text-scale, 1));
  color: var(--ui-text-muted, var(--text-muted));
}

/* Start Screen Display, Resolution & UI Scaling Bar */
.start-screen-display-bar {
  background: var(--ui-bg-card, rgba(14, 19, 30, 0.94));
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.3));
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  text-align: left;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.02);
}

.display-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.display-info-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-accent-primary, var(--accent-cyan));
  letter-spacing: 0.5px;
}

.display-dpr-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(0, 255, 136, 0.12);
  border: 1px solid rgba(0, 255, 136, 0.35);
  border-radius: 4px;
  color: var(--accent-green);
  font-weight: 700;
}

/* Startup Screen Graphic Quality Presets */
.start-perf-preset-section {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.start-perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}

@media (max-width: 600px) {
  .start-perf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.start-perf-btn {
  background: var(--ui-bg-sidebar, rgba(14, 20, 32, 0.85));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.start-perf-btn:hover {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.12));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--ui-border-glow, rgba(0, 240, 255, 0.2));
}

.start-perf-btn.active {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.18));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  box-shadow: 0 0 16px var(--ui-border-glow, rgba(0, 240, 255, 0.35)), inset 0 0 10px rgba(255, 255, 255, 0.04);
}

.start-perf-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ffffff;
}

.start-perf-btn.active .start-perf-tag {
  color: var(--ui-accent-primary, var(--accent-cyan));
}

.start-perf-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.start-perf-btn.active .start-perf-sub {
  color: rgba(255, 255, 255, 0.9);
}

.display-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

@media (max-width: 580px) {
  .display-controls-grid {
    grid-template-columns: 1fr;
  }
}

.display-control-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
}

.control-title {
  color: #c5d4ea;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.control-value-badge {
  color: var(--ui-accent-primary, var(--accent-cyan));
  font-weight: 700;
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.12));
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
}

.hud-range-slider {
  width: 100%;
  accent-color: var(--ui-accent-primary, var(--accent-cyan));
  cursor: pointer;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  outline: none;
}

.preset-pills-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.scale-pill-btn {
  background: var(--ui-bg-sidebar, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.14));
  color: var(--ui-text-muted, var(--text-muted));
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.scale-pill-btn:hover {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.15));
  color: var(--ui-text-main, #fff);
  border-color: var(--ui-border-accent, var(--accent-cyan));
}

.scale-pill-btn.active {
  background: var(--ui-accent-primary, var(--accent-cyan));
  color: #000;
  font-weight: 700;
  border-color: var(--ui-border-accent, var(--accent-cyan));
  box-shadow: 0 0 10px var(--ui-border-glow, rgba(0, 240, 255, 0.4));
}

.display-select-box {
  background: var(--ui-bg-sidebar, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.3));
  color: var(--ui-text-main, #fff);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  outline: none;
  width: 100%;
}

.display-select-box:focus {
  border-color: var(--ui-border-accent, var(--accent-cyan));
  box-shadow: 0 0 10px var(--ui-border-glow, rgba(0, 240, 255, 0.3));
}

.display-select-box option {
  background: var(--ui-bg-sidebar, #0f1420);
  color: var(--ui-text-main, #fff);
}

/* AUTODETECT DEVICE: full-width, >=40px touch target, landscape-safe. */
.autodetect-device-btn {
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  justify-content: center;
  border-color: rgba(0, 240, 255, 0.35);
  flex-wrap: wrap;
  white-space: normal;
  text-align: center;
}

.autodetect-device-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.autodetect-result {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  color: #00ff88;
  word-break: break-word;
}

.control-subtext {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  line-height: 1.3;
}

/* --- MIDI & CONTROLLER HUB STYLES --- */
.midi-device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.midi-device-item.connected {
  border-color: rgba(0, 240, 255, 0.3);
  background: rgba(0, 240, 255, 0.04);
}

.midi-event-log-console {
  background: #080b10;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 10px;
  height: 90px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.midi-log-entry {
  color: #00f0ff;
  line-height: 1.4;
}

.midi-log-entry.note {
  color: #00ff88;
}

.midi-log-entry.placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.midi-mappings-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: left;
}

.midi-mappings-table th {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-muted);
  font-size: 10px;
  background: rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0;
}

.midi-mappings-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
}

.midi-mappings-table tr:hover td {
  background: rgba(0, 240, 255, 0.05);
}

.midi-learn-active {
  animation: pulse-midi-learn 1s infinite alternate;
  background: rgba(255, 234, 0, 0.25) !important;
  border-color: #ffea00 !important;
  color: #ffea00 !important;
}

@keyframes pulse-midi-learn {
  from {
    box-shadow: 0 0 5px rgba(255, 234, 0, 0.3);
  }
  to {
    box-shadow: 0 0 16px rgba(255, 234, 0, 0.8);
  }
}

/* ==========================================================================
   SAMPLER 8 // SAMPLE BROWSER & WAVEFORM EDITOR MODAL
   ========================================================================== */
.sampler8-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(3, 6, 12, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sampler8-modal-overlay.active {
  display: flex;
}

.sampler8-modal-container {
  width: 100%;
  max-width: 1160px;
  height: 84vh;
  max-height: 780px;
  background: linear-gradient(180deg, rgba(14, 19, 30, 0.96) 0%, rgba(8, 11, 18, 0.98) 100%);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 0 45px rgba(0, 240, 255, 0.15), 0 20px 60px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-mono, monospace);
  color: #fff;
}

.sampler8-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: rgba(0, 240, 255, 0.05);
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.sampler8-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sampler8-header-badge {
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid #00f0ff;
  color: #00f0ff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
}

.sampler8-header-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}

.sampler8-track-target-pill {
  background: rgba(0, 255, 136, 0.15);
  border: 1px solid #00ff88;
  color: #00ff88;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
}

.sampler8-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sampler8-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #00f0ff;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.sampler8-btn-secondary:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.sampler8-btn-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  transition: color 0.2s;
  /* Touch target: the sample browser is used on phones/tablets, so the close
     control must meet the 40 px minimum in both axes (was ~26x24). */
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sampler8-btn-close:hover {
  color: #ff0055;
}

.sampler8-modal-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  flex: 1;
  overflow: hidden;
}

/* Sidebar & Search */
.sampler8-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 9, 15, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sampler8-search-box {
  position: relative;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
}

.sampler8-search-icon {
  position: absolute;
  left: 20px;
  pointer-events: none;
}

.sampler8-search-box input {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 6px;
  padding: 8px 30px 8px 32px;
  /* Touch target: keep the search field tap-friendly on mobile (>=40 px). */
  min-height: 40px;
  box-sizing: border-box;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  outline: none;
  transition: border-color 0.2s;
}

.sampler8-search-box input:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
}

.sampler8-btn-clear {
  position: absolute;
  right: 20px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 14px;
}

.sampler8-tree-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.sampler8-folder-group {
  margin-bottom: 4px;
}

.sampler8-folder-header {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.sampler8-folder-header:hover {
  background: rgba(0, 240, 255, 0.08);
}

.sampler8-folder-arrow {
  font-size: 9px;
  color: #00f0ff;
}

.sampler8-folder-name {
  font-size: 11px;
  font-weight: bold;
  color: #d0e4f5;
  flex: 1;
}

.sampler8-folder-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.sampler8-folder-children.closed {
  display: none;
}

.sampler8-folder-children.open {
  display: block;
  padding-left: 12px;
  margin-top: 2px;
}

.sampler8-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 2px;
}

.sampler8-file-item:hover {
  background: rgba(0, 240, 255, 0.1);
}

.sampler8-file-item.selected {
  background: rgba(0, 240, 255, 0.2);
  border-left: 3px solid #00f0ff;
}

.sampler8-btn-item-play {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s;
}

.sampler8-btn-item-play:hover {
  background: #00f0ff;
  color: #060911;
  transform: scale(1.1);
}

.sampler8-file-item-info {
  flex: 1;
  overflow: hidden;
}

.sampler8-file-item-name {
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sampler8-file-item-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
}

.sampler8-dropzone {
  padding: 14px 10px;
  margin: 10px;
  border: 1px dashed rgba(0, 240, 255, 0.35);
  border-radius: 8px;
  text-align: center;
  background: rgba(0, 240, 255, 0.02);
  cursor: pointer;
  transition: all 0.2s;
}

.sampler8-dropzone:hover, .sampler8-dropzone.dragover {
  background: rgba(0, 240, 255, 0.1);
  border-color: #00f0ff;
}

.sampler8-drop-text {
  font-size: 10px;
  font-weight: bold;
  color: #00f0ff;
  letter-spacing: 0.5px;
}

.sampler8-drop-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

/* Editor Pane */
.sampler8-editor-pane {
  display: flex;
  flex-direction: column;
  padding: 18px 24px;
  overflow-y: auto;
  gap: 14px;
}

.sampler8-editor-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sampler8-sample-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sampler8-meta-name {
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.5px;
}

.sampler8-meta-sub {
  font-size: 11px;
  color: #00f0ff;
}

.sampler8-editor-quick-actions {
  display: flex;
  gap: 8px;
}

.sampler8-btn-action {
  padding: 7px 14px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

.sampler8-btn-play {
  background: #00f0ff;
  border: 1px solid #00f0ff;
  color: #060911;
}

.sampler8-btn-play:hover {
  background: #33f3ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

.sampler8-btn-stop {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.sampler8-btn-stop:hover {
  background: rgba(255, 0, 85, 0.2);
  border-color: #ff0055;
  color: #ff0055;
}

.sampler8-canvas-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: #060911;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

#sampler8-waveform-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.sampler8-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ffea00;
  box-shadow: 0 0 8px #ffea00;
  pointer-events: none;
}

.sampler8-controls-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.sampler8-param-pill {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 110px;
}

.sampler8-param-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
}

.sampler8-param-val {
  font-size: 11px;
  color: #00f0ff;
  font-weight: bold;
}

.sampler8-btn-mini {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.sampler8-btn-mini:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: #00f0ff;
  color: #00f0ff;
}

.sampler8-btn-mini.active {
  background: #00f0ff;
  color: #060911;
  font-weight: bold;
}

/* Assign Card */
.sampler8-assign-card {
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sampler8-assign-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sampler8-assign-title {
  font-size: 12px;
  font-weight: bold;
  color: #00f0ff;
  letter-spacing: 0.5px;
}

.sampler8-assign-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

.sampler8-assign-btn-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}

.sampler8-btn-assign-track {
  background: linear-gradient(180deg, rgba(20, 28, 42, 0.9) 0%, rgba(10, 15, 24, 0.95) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 6px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 0.15s;
}

.sampler8-btn-assign-track:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: #00f0ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 240, 255, 0.3);
}

.sampler8-track-num {
  font-size: 13px;
  font-weight: bold;
  color: #00f0ff;
}

.sampler8-track-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
}

.sampler8-btn-assign-track.flash-success {
  animation: flashTrackAssign 0.6s ease;
}

@keyframes flashTrackAssign {
  0% {
    background: #00ff88;
    border-color: #00ff88;
    color: #000;
  }
  100% {
    background: linear-gradient(180deg, rgba(20, 28, 42, 0.9) 0%, rgba(10, 15, 24, 0.95) 100%);
    border-color: rgba(0, 240, 255, 0.3);
    color: #fff;
  }
}

/* Drag & Drop Interactivity */
.sampler8-file-item[draggable="true"] {
  cursor: grab;
}

.sampler8-file-item[draggable="true"]:active {
  cursor: grabbing;
}

.sampler8-file-item.dragging-sample {
  opacity: 0.45;
  border: 1px dashed #00f0ff;
  background: rgba(0, 240, 255, 0.18);
}

.sampler8-btn-assign-track.drag-target-hover {
  background: rgba(0, 255, 136, 0.28) !important;
  border-color: #00ff88 !important;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.6) !important;
  transform: scale(1.08) translateY(-3px) !important;
}

.sampler8-canvas-wrap.drag-target-hover {
  border-color: #00ff88 !important;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4) !important;
}

.sampler8-meta-name.draggable-source {
  cursor: grab;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sampler8-meta-name.draggable-source:hover {
  color: #00f0ff;
}

/* 8-Track Overview Rack inside Sample Menu */
.sampler8-track-strip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.sampler8-track-strip-title {
  font-size: 11px;
  font-weight: bold;
  color: #00f0ff;
  letter-spacing: 0.5px;
}

.sampler8-track-strip-hint {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.45);
}

.sampler8-tracks-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.sampler8-track-card {
  background: rgba(10, 15, 25, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 56px;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.sampler8-track-card:hover {
  border-color: rgba(0, 240, 255, 0.5);
  background: rgba(0, 240, 255, 0.08);
}

.sampler8-track-card.active {
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.18) 0%, rgba(10, 25, 40, 0.9) 100%);
  border-color: #00f0ff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.sampler8-track-card.drag-target-hover {
  border-color: #00ff88 !important;
  background: rgba(0, 255, 136, 0.25) !important;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.6) !important;
  transform: scale(1.05);
}

.sampler8-track-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sampler8-track-card-badge {
  font-size: 11px;
  font-weight: 800;
  color: #00f0ff;
}

.sampler8-track-card.active .sampler8-track-card-badge {
  color: #fff;
  text-shadow: 0 0 6px #00f0ff;
}

.sampler8-track-card-status {
  font-size: 8px;
  padding: 1px 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

.sampler8-track-card.active .sampler8-track-card-status {
  background: #00ff88;
  color: #060a12;
  font-weight: bold;
}

.sampler8-track-card-name {
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* ==========================================================================
   MASTER STUDIO OPTIONS & DSP HUB ENLARGED SUITE (+40% Sizing & Responsive)
   ========================================================================== */
.master-options-window {
  width: 1180px !important;
  max-width: 95vw !important;
  height: 86vh !important;
  max-height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--ui-bg-panel, var(--bg-panel, rgba(8, 12, 20, 0.96))) !important;
  border: 1px solid var(--ui-border-accent, var(--border-accent, rgba(0, 240, 255, 0.35))) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 35px var(--ui-border-glow, rgba(0, 240, 255, 0.2)) !important;
  border-radius: 12px;
  overflow: hidden;
}

.master-options-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* Sidebar */
.options-sidebar {
  width: 250px;
  min-width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  background: var(--ui-bg-sidebar, rgba(4, 7, 13, 0.7));
  border-right: 1px solid var(--ui-border-color, var(--border-color, rgba(0, 240, 255, 0.15)));
  overflow-y: auto;
  box-sizing: border-box;
}

.options-sidebar::-webkit-scrollbar {
  width: 5px;
}
.options-sidebar::-webkit-scrollbar-thumb {
  background: var(--ui-border-glow, rgba(0, 240, 255, 0.2));
  border-radius: 3px;
}

.options-tab-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ui-text-muted, var(--text-muted));
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.options-tab-btn:hover {
  color: var(--ui-text-main, #fff);
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.08));
  border-color: var(--ui-border-color, rgba(0, 240, 255, 0.2));
}

.options-tab-btn.active {
  color: var(--ui-accent-primary, #00f0ff);
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.14));
  border-color: var(--ui-border-accent, rgba(0, 240, 255, 0.4));
  box-shadow: 0 0 14px var(--ui-border-glow, rgba(0, 240, 255, 0.15));
}

.opt-tab-icon,
.opt-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

/* Content Area */
.options-content-area {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 28px;
  background: var(--ui-bg-content, rgba(5, 9, 16, 0.55));
  box-sizing: border-box;
}

.options-content-area::-webkit-scrollbar {
  width: 6px;
}
.options-content-area::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}
.options-content-area::-webkit-scrollbar-thumb {
  background: var(--ui-border-glow, rgba(0, 240, 255, 0.25));
  border-radius: 3px;
}
.options-content-area::-webkit-scrollbar-thumb:hover {
  background: var(--ui-accent-primary, rgba(0, 240, 255, 0.5));
}

.options-tab-pane {
  display: none;
  width: 100%;
  box-sizing: border-box;
}

.options-tab-pane.active {
  display: block;
  animation: optFadeIn 0.18s ease;
}

@keyframes optFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.transform-section-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--ui-accent-primary, var(--accent-cyan));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.2));
}

/* Grids & Cards */
.dsp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.ground-grid-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 960px) {
  .dsp-grid,
  .ground-grid-container {
    grid-template-columns: 1fr !important;
  }
}

.dsp-card {
  background: var(--ui-bg-card, rgba(10, 16, 26, 0.88));
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.18));
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dsp-card:hover {
  border-color: var(--ui-border-accent, rgba(0, 240, 255, 0.35));
  box-shadow: 0 0 20px var(--ui-border-glow, rgba(0, 240, 255, 0.08));
}

.dsp-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
  gap: 8px;
}

.dsp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Robust Dropdown Layout: Select controls its width, not long text */
.dsp-row select,
.theme-skybox-select {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  background: var(--ui-bg-sidebar, rgba(12, 19, 32, 0.92));
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.25));
  color: var(--ui-text-main, #fff);
  padding: 7px 10px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  cursor: pointer;
}

.dsp-row select:focus,
.theme-skybox-select:focus {
  border-color: var(--ui-border-accent, var(--accent-cyan));
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

.dsp-row select option,
.theme-skybox-select option {
  background: #0a0f1a;
  color: #fff;
  font-family: var(--font-mono);
  padding: 4px 8px;
}

.dsp-row input[type="range"] {
  flex: 1 1 0;
  min-width: 0;
  accent-color: var(--accent-cyan);
}

.dsp-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-cyan);
  min-width: 65px;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.grid-color-presets-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.grid-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.grid-color-swatch:hover {
  transform: scale(1.15);
}

.grid-color-swatch.active {
  border-color: #ffffff !important;
  box-shadow: 0 0 8px currentColor;
}

/* ==========================================================================
   DARK THEMED SELECT / DROPDOWN CONTROLS (LFO Matrix & Studio Menus)
   ========================================================================== */
select,
.lfo-dest-select,
.lfo-dest-card select,
#modal-lfo-matrix select {
  color-scheme: dark !important;
  background-color: var(--ui-bg-sidebar, #0c101b) !important;
  color: var(--ui-text-main, #f0f4fc) !important;
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.28)) !important;
  border-radius: var(--ui-border-radius, 6px);
  padding: 7px 10px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  outline: none;
  cursor: pointer;
  appearance: auto;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

select:focus,
.lfo-dest-select:focus,
.lfo-dest-card select:focus,
#modal-lfo-matrix select:focus {
  border-color: var(--ui-border-accent, #00f0ff) !important;
  box-shadow: 0 0 10px var(--ui-border-glow, rgba(0, 240, 255, 0.35)), inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  background-color: var(--ui-bg-card, #111827) !important;
}

select option,
.lfo-dest-select option,
.lfo-dest-card select option,
#modal-lfo-matrix select option {
  background-color: var(--ui-bg-sidebar, #0c101b) !important;
  color: var(--ui-text-main, #f0f4fc) !important;
  padding: 8px 12px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

select option:checked,
select option:hover,
.lfo-dest-card select option:checked,
#modal-lfo-matrix select option:checked {
  background-color: var(--ui-accent-subtle, #162238) !important;
  color: var(--ui-accent-primary, #00f0ff) !important;
}

select option[value=""] {
  color: #7a889b !important;
}

/* ==========================================================================
   THEMES & ENVIRONMENT PERFORMANCE PRESET BAR & ACCORDION SYSTEM
   ========================================================================== */
.perf-preset-bar-wrapper {
  margin-bottom: 20px;
  background: var(--ui-bg-card, rgba(10, 15, 26, 0.7));
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.25));
  border-radius: var(--ui-border-radius, 10px);
  padding: 14px 16px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
}

.perf-preset-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.08));
}

.perf-preset-bar-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-accent-primary, var(--accent-cyan));
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.perf-preset-notice {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ui-text-muted, var(--text-muted));
  font-style: italic;
}

.perf-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .perf-preset-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.perf-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 14px;
  background: var(--ui-bg-sidebar, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.12));
  border-radius: var(--ui-border-radius, 8px);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  user-select: none;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

.perf-preset-btn:hover {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.08));
  border-color: var(--ui-border-accent, rgba(0, 240, 255, 0.4));
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--ui-border-glow, rgba(0, 240, 255, 0.12));
}

.perf-preset-btn.active {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.15));
  border-color: var(--ui-border-accent, var(--accent-cyan));
  box-shadow: 0 0 16px var(--ui-border-glow, rgba(0, 240, 255, 0.25)), inset 0 0 8px var(--ui-accent-glow-subtle, rgba(0, 240, 255, 0.15));
}

.perf-preset-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ui-accent-primary, var(--accent-cyan));
  box-shadow: 0 0 8px var(--ui-border-glow, var(--accent-cyan));
}

.perf-preset-btn-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-text-main, #fff);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.perf-preset-btn.active .perf-preset-btn-name {
  color: var(--ui-accent-primary, var(--accent-cyan));
}

.perf-preset-btn-desc {
  font-size: 10px;
  color: var(--ui-text-muted, var(--text-muted));
  line-height: 1.25;
}

/* Accordion Component */
.env-accordion-section {
  background: var(--ui-bg-card, rgba(14, 20, 32, 0.65));
  border: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.18));
  border-radius: var(--ui-border-radius, 8px);
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.env-accordion-section:hover {
  border-color: var(--ui-border-accent, rgba(0, 240, 255, 0.35));
}

.env-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: var(--ui-bg-sidebar, rgba(20, 28, 44, 0.6));
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--ui-border-color, rgba(0, 240, 255, 0.12));
  transition: background 0.18s ease;
}

.env-accordion-header:hover {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.08));
}

.env-accordion-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ui-text-main, #ffffff);
  display: flex;
  align-items: center;
  gap: 10px;
}

.env-accordion-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.12));
  border: 1px solid var(--ui-border-accent, rgba(0, 240, 255, 0.3));
  color: var(--ui-accent-primary, var(--accent-cyan));
  text-transform: uppercase;
}

.env-accordion-chevron {
  font-size: 11px;
  color: var(--ui-accent-primary, var(--accent-cyan));
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.env-accordion-body {
  padding: 18px;
  display: block;
}

.env-accordion-section.collapsed .env-accordion-header {
  border-bottom: none;
}

.env-accordion-section.collapsed .env-accordion-body {
  display: none;
}

.env-accordion-section.collapsed .env-accordion-chevron {
  transform: rotate(-90deg);
}

/* Surroundings Option Category Grid */
.surroundings-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

/* ==========================================================================
   HELP & MODULAR DOCUMENTATION HUB
   ========================================================================== */
.help-hub-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.help-subnav-bar {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.help-subnav-btn {
  flex: 1;
  min-width: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-subnav-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}

.help-subnav-btn.active {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.12));
  color: var(--ui-accent-primary, var(--accent-cyan));
  border-color: var(--ui-border-accent, rgba(0, 240, 255, 0.4));
  box-shadow: 0 0 16px var(--ui-border-glow, rgba(0, 240, 255, 0.15));
}

.help-section-pane {
  display: none;
  animation: fadeIn 0.2s ease;
}

.help-section-pane.active {
  display: block;
}

/* Category Pills */
.help-category-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.help-cat-pill {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.help-cat-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.help-cat-pill.active {
  background: var(--ui-accent-primary, #00f0ff);
  color: #060a12;
  border-color: var(--ui-accent-primary, #00f0ff);
  box-shadow: 0 0 10px var(--ui-border-glow, rgba(0, 240, 255, 0.3));
}

/* Module Chips Grid */
.help-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.help-mod-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--ui-text-main, #d0d8e8);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.help-mod-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.help-mod-chip.active {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--ui-accent-primary, #00f0ff);
  color: var(--ui-accent-primary, #00f0ff);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

.mod-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

/* Help Cards */
.help-card {
  background: var(--ui-bg-panel, rgba(14, 18, 26, 0.85));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.help-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-accent-primary, #00f0ff);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}

/* Module Detail Banner */
.help-mod-banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.help-mod-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.help-mod-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.help-mod-sub {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.help-mod-specs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.spec-pill {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 8px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.spec-pill strong {
  color: #fff;
}

.help-mod-overview {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ui-text-main, #d0d8e8);
  margin: 0 0 14px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.help-subhead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-accent-primary, #00f0ff);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Help Tables */
.help-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 6px;
}

.help-spec-table th {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.5px;
}

.help-spec-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--ui-text-main, #d0d8e8);
}

.help-spec-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.mono-code {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #00ff88;
}

.dir-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
}

.dir-badge.in {
  background: rgba(255, 234, 0, 0.15);
  color: #ffea00;
  border: 1px solid rgba(255, 234, 0, 0.3);
}

.dir-badge.out {
  background: rgba(0, 240, 255, 0.15);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.help-type-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.badge-audio {
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.badge-cv {
  background: rgba(180, 0, 255, 0.15);
  color: #d066ff;
  border: 1px solid rgba(180, 0, 255, 0.3);
}

.badge-trigger, .badge-gate {
  background: rgba(255, 170, 0, 0.15);
  color: #ffaa00;
  border: 1px solid rgba(255, 170, 0, 0.3);
}

.help-protip-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 234, 0, 0.06);
  border: 1px solid rgba(255, 234, 0, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.4;
  color: #ffe082;
}

/* OS Switcher & Keycaps */
.help-os-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.help-os-toggle-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.help-os-pills {
  display: flex;
  gap: 6px;
}

.help-os-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.help-os-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.help-os-btn.active {
  background: var(--ui-accent-subtle, rgba(0, 240, 255, 0.15));
  border-color: var(--ui-accent-primary, #00f0ff);
  color: var(--ui-accent-primary, #00f0ff);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.help-controls-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.help-keycaps-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.help-keycap {
  display: inline-block;
  background: #1e2430;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

/* Signal Basics */
.help-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.help-signal-item {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
}

.help-signal-item p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--ui-text-main, #d0d8e8);
  margin: 8px 0 0 0;
}

.help-intro-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ui-text-main, #d0d8e8);
  margin-bottom: 12px;
}

.help-routing-diagram {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
}

.routing-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.step-num {
  width: 22px;
  height: 22px;
  background: var(--ui-accent-primary, #00f0ff);
  color: #060a12;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.step-content {
  font-size: 11px;
  line-height: 1.4;
  color: #fff;
}

.step-content code {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  color: var(--ui-accent-primary, #00f0ff);
}

.step-note {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Mixer Setup & Stem Matrix Styles */
.mixer-matrix-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
}
.mixer-matrix-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.mixer-matrix-row.armed {
  background: rgba(255, 51, 85, 0.06);
}
.mixer-matrix-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}
.mixer-matrix-input {
  background: var(--ui-bg-sidebar, rgba(0, 0, 0, 0.5));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.1));
  color: var(--ui-text-main, #fff);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  width: 100%;
  box-sizing: border-box;
}
.mixer-matrix-input:focus {
  border-color: var(--ui-accent-primary, #00f0ff);
  outline: none;
}
.mixer-vu-meter {
  height: 10px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-width: 120px;
}
.mixer-vu-level {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00ff88 0%, #ffea00 70%, #ff0055 95%);
  transition: width 0.06s linear;
  border-radius: 2px;
}
.multitrack-session-card {
  background: var(--ui-bg-card, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--ui-border-color, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.multitrack-session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.multitrack-stems-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.multitrack-stem-pill {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* DM-Seq64 editor -------------------------------------------------------- */
.dm-seq64-editor-overlay {
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 14, 0.82);
  backdrop-filter: blur(12px);
}
.dm-seq64-editor-window {
  width: min(1460px, 96vw);
  max-width: 1460px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 240, 255, 0.38);
  box-shadow: 0 0 55px rgba(0, 240, 255, 0.16);
  background: rgba(9, 14, 23, 0.98);
}
.dm-seq64-editor-header {
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}
.dm-seq64-editor-header .modal-title {
  color: #00f0ff;
  letter-spacing: 0.12em;
}
.dm-seq64-editor-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 10px 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.dm-seq64-tab,
.dm-seq64-editor-actions button,
.dm-seq64-editor-form > button {
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 4px;
  background: rgba(0, 240, 255, 0.05);
  color: #bdeff5;
  font: 700 11px var(--font-mono, monospace);
  letter-spacing: 0.06em;
  padding: 8px 12px;
  cursor: pointer;
}
.dm-seq64-tab:hover,
.dm-seq64-tab.active,
.dm-seq64-editor-actions button:hover,
.dm-seq64-editor-form > button:hover {
  color: #061018;
  background: #00f0ff;
}
.dm-seq64-editor-body {
  min-height: 0;
  overflow: auto;
  padding: 14px 18px 20px;
  color: #d9e7ef;
  font: 12px var(--font-mono, monospace);
}
.dm-seq64-editor-global,
.dm-seq64-editor-actions,
.dm-seq64-editor-form,
.dm-seq64-arp-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.dm-seq64-editor-global {
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
}
.dm-seq64-editor-global label,
.dm-seq64-editor-form label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9fb4c0;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.dm-seq64-editor-global input[type="number"],
.dm-seq64-editor-form input[type="number"],
.dm-seq64-editor-form select,
.dm-seq64-step-card input[type="number"],
.dm-seq64-step-card select {
  box-sizing: border-box;
  min-width: 58px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 4px 5px;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  font: 11px var(--font-mono, monospace);
}
.dm-seq64-editor-form select,
.dm-seq64-step-card select {
  min-width: 74px;
}
.dm-seq64-editor-global input:focus,
.dm-seq64-editor-form input:focus,
.dm-seq64-editor-form select:focus,
.dm-seq64-step-card input:focus,
.dm-seq64-step-card select:focus {
  outline: none;
  border-color: #00f0ff;
}
.dm-seq64-readout,
.dm-seq64-context,
.dm-seq64-selection-readout,
.dm-seq64-help-line {
  color: #7f9ba8;
}
.dm-seq64-context {
  margin-left: auto;
}
.dm-seq64-record-status {
  color: #ffcb6b;
  font: 700 10px var(--font-mono, monospace);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dm-seq64-runtime-button {
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 4px;
  padding: 7px 9px;
  background: rgba(0, 240, 255, 0.05);
  color: #bdeff5;
  font: 700 10px var(--font-mono, monospace);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.dm-seq64-runtime-button.active {
  color: #061018;
  background: #00f0ff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.22);
}
.dm-seq64-runtime-button:hover {
  border-color: #00f0ff;
}
.dm-seq64-editor-pane {
  display: none;
}
.dm-seq64-editor-pane.active {
  display: block;
}
.dm-seq64-editor-actions {
  margin-bottom: 13px;
}
.dm-seq64-editor-actions .dm-seq64-selection-readout {
  margin-left: auto;
  font-size: 10px;
}
.dm-seq64-banks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.dm-seq64-bank {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(0, 240, 255, 0.17);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}
.dm-seq64-bank-title {
  margin-bottom: 8px;
  color: #00f0ff;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.dm-seq64-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.dm-seq64-step-card {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
}
.dm-seq64-step-card.enabled {
  border-color: rgba(0, 255, 136, 0.35);
}
.dm-seq64-step-card.muted {
  border-color: rgba(255, 0, 119, 0.5);
}
.dm-seq64-step-card.selected {
  box-shadow: inset 0 0 0 1px #00f0ff, 0 0 12px rgba(0, 240, 255, 0.12);
}
.dm-seq64-step-card header {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 5px;
  color: #78919e;
  font-size: 9px;
}
.dm-seq64-step-feedback {
  min-height: 31px;
  margin: 4px 0 6px;
  color: #00f0ff;
  font-size: 8px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dm-seq64-step-select {
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
  color: #d9e7ef;
  font: 700 10px var(--font-mono, monospace);
  cursor: pointer;
  white-space: nowrap;
}
.dm-seq64-step-card label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 4px;
  color: #87a0ac;
  font-size: 9px;
}
.dm-seq64-step-card output {
  display: block;
  margin-top: 5px;
  color: #00f0ff;
  font-size: 9px;
}
.dm-seq64-step-card input[type="checkbox"],
.dm-seq64-editor-global input[type="checkbox"],
.dm-seq64-editor-form input[type="checkbox"] {
  accent-color: #00f0ff;
}
.dm-seq64-keyboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(32px, 1fr));
  gap: 4px;
  padding: 13px;
  margin: 12px 0 16px;
  border: 1px solid rgba(0, 240, 255, 0.17);
  border-radius: 6px;
  background: #070b12;
}
.dm-seq64-key {
  min-height: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  background: #e7edf0;
  color: #17232b;
  font: 9px var(--font-mono, monospace);
  cursor: pointer;
}
.dm-seq64-key.manual {
  background: #00ff88;
  border-color: #00ff88;
  box-shadow: 0 0 9px rgba(0, 255, 136, 0.45);
}
.dm-seq64-key.live {
  box-shadow: inset 0 -5px 0 #ff0077;
}
.dm-seq64-key:hover {
  border-color: #00f0ff;
}
.dm-seq64-arp-summary {
  justify-content: space-between;
  color: #9fb4c0;
  font-size: 10px;
}
.dm-seq64-arp-form,
.dm-seq64-randomizer-form,
.dm-seq64-evolve-form {
  padding: 13px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
}
.dm-seq64-randomizer-form label,
.dm-seq64-evolve-form label {
  min-height: 32px;
}
.dm-seq64-randomizer-form input[type="range"],
.dm-seq64-evolve-form input[type="range"] {
  width: 110px;
  accent-color: #00f0ff;
}
.dm-seq64-randomizer-form output,
.dm-seq64-evolve-form output {
  min-width: 34px;
  color: #00f0ff;
}
.dm-seq64-primary {
  border-color: #00ff88 !important;
  color: #00ff88 !important;
}
.dm-seq64-primary:hover {
  color: #061018 !important;
  background: #00ff88 !important;
}
.side-midi-performance-heading {
  margin: 18px 0 8px;
  padding: 8px 10px;
  border-top: 1px solid rgba(0, 240, 255, 0.22);
  color: var(--ui-accent-primary, var(--accent-cyan));
  font: 700 10px var(--font-mono, monospace);
  letter-spacing: 0.08em;
}
.side-midi-performance-card {
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
}
.side-midi-performance-card.is-mapped {
  border-color: rgba(0, 240, 255, 0.35);
}
.side-midi-performance-title,
.side-midi-performance-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.side-midi-performance-title {
  justify-content: space-between;
  margin-bottom: 7px;
  color: var(--ui-text-primary, #d9e7ef);
  font: 700 10px var(--font-mono, monospace);
}
.side-midi-performance-title small,
.side-midi-performance-binding {
  color: var(--ui-text-muted, #7f9ba8);
  font: 9px var(--font-mono, monospace);
}
.side-midi-performance-controls .perf-source {
  width: 78px;
}
.perf-invert {
  color: var(--ui-text-muted, #7f9ba8);
  font: 9px var(--font-mono, monospace);
}
.side-midi-performance-binding {
  margin-top: 6px;
}
.dm-seq64-help-line {
  margin: 14px 0 0;
  line-height: 1.5;
  font-size: 10px;
}
@media (max-width: 900px) {
  .dm-seq64-banks { grid-template-columns: 1fr; }
  .dm-seq64-step-grid { grid-template-columns: repeat(4, minmax(90px, 1fr)); overflow-x: auto; }
  .dm-seq64-keyboard { grid-template-columns: repeat(8, minmax(42px, 1fr)); }
  .dm-seq64-context { flex-basis: 100%; margin-left: 0; }
}

/* DM-Seq64 clarity pass --------------------------------------------------
 * The editor is intentionally information-dense, but its hierarchy is
 * explicit: state/context first, a 64-cell map second, then full value cards.
 * This keeps copy/paste and live playback visible at a glance without making
 * the modal depend on a canvas or a second rendering surface.
 */
.dm-seq64-editor-window {
  width: min(1680px, 96vw);
  max-width: 1680px;
  max-height: 94vh;
  border-radius: 10px;
}
.dm-seq64-editor-body {
  padding: 16px 20px 24px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.025), transparent 220px);
}
.dm-seq64-editor-global {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(380px, 1.3fr) minmax(390px, 1.4fr);
  gap: 12px 18px;
  align-items: center;
  padding: 13px 15px;
  border-color: rgba(0, 240, 255, 0.22);
  background: linear-gradient(105deg, rgba(0, 240, 255, 0.08), rgba(255, 255, 255, 0.025) 42%, rgba(0, 0, 0, 0.18));
}
.dm-seq64-status-hero,
.dm-seq64-pane-hero,
.dm-seq64-sequence-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.dm-seq64-status-hero {
  min-width: 0;
  flex-wrap: wrap;
}
.dm-seq64-status-hero strong {
  color: #00ff88;
  font-size: 22px;
  letter-spacing: 0.08em;
}
.dm-seq64-status-hero span:last-child {
  color: #9fb4c0;
  flex-basis: 100%;
  font-size: 10px;
}
.dm-seq64-status-kicker,
.dm-seq64-section-kicker {
  display: block;
  color: #7f9ba8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.dm-seq64-global-fields,
.dm-seq64-runtime-strip,
.dm-seq64-context-row,
.dm-seq64-inline-controls,
.dm-seq64-action-group,
.dm-seq64-field-grid,
.dm-seq64-arp-routing,
.dm-seq64-randomizer-context,
.dm-seq64-evolve-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.dm-seq64-global-fields {
  align-content: center;
}
.dm-seq64-global-fields label {
  min-height: 28px;
}
.dm-seq64-runtime-strip {
  justify-content: flex-end;
}
.dm-seq64-runtime-state {
  color: #7f9ba8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.dm-seq64-runtime-state.live {
  color: #ffcb6b;
}
.dm-seq64-context-row {
  grid-column: 1 / -1;
  justify-content: space-between;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #7f9ba8;
  font-size: 10px;
}
.dm-seq64-sequence-hero,
.dm-seq64-pane-hero {
  margin: 8px 0 12px;
  padding: 15px 16px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}
.dm-seq64-sequence-hero h2,
.dm-seq64-pane-hero h2 {
  margin: 4px 0 5px;
  color: #f0fcff;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.dm-seq64-sequence-hero p,
.dm-seq64-pane-hero p {
  max-width: 820px;
  margin: 0;
  color: #8fa8b3;
  font-size: 10px;
  line-height: 1.5;
}
.dm-seq64-sequence-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 12px;
  color: #8fa8b3;
  font-size: 9px;
  white-space: nowrap;
}
.dm-seq64-sequence-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;
  background: #263445;
}
.dm-seq64-sequence-legend i.enabled { background: #00ff88; }
.dm-seq64-sequence-legend i.muted { background: #ff0077; }
.dm-seq64-sequence-legend i.playhead { background: #00f0ff; box-shadow: 0 0 7px #00f0ff; }
.dm-seq64-overview {
  padding: 10px 12px 12px;
  margin: 0 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: #070c13;
}
.dm-seq64-overview-labels {
  display: flex;
  justify-content: space-between;
  color: #65808c;
  font-size: 8px;
  margin: 0 1px 5px;
}
.dm-seq64-overview-grid {
  display: grid;
  grid-template-columns: repeat(64, minmax(4px, 1fr));
  gap: 2px;
}
.dm-seq64-overview-cell,
.dm-seq64-bank-cell {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1a2731;
  color: transparent;
  cursor: pointer;
}
.dm-seq64-overview-cell {
  min-width: 0;
  height: 20px;
  padding: 0;
  border-radius: 2px;
}
.dm-seq64-overview-cell.enabled,
.dm-seq64-bank-cell.enabled { background: #00a968; border-color: #00ff88; }
.dm-seq64-overview-cell.muted,
.dm-seq64-bank-cell.muted { background: #7d1649; border-color: #ff0077; }
.dm-seq64-overview-cell.outside { opacity: 0.28; }
.dm-seq64-overview-cell.selected,
.dm-seq64-bank-cell.selected { box-shadow: inset 0 0 0 2px #f0fcff; }
.dm-seq64-overview-cell.playhead,
.dm-seq64-bank-cell.playhead { background: #00f0ff; border-color: #cfffff; box-shadow: 0 0 8px rgba(0, 240, 255, 0.8); }
.dm-seq64-overview-cell:hover,
.dm-seq64-bank-cell:hover { transform: translateY(-1px); border-color: #fff; }
.dm-seq64-editor-actions {
  justify-content: space-between;
  padding: 9px 10px;
  margin-bottom: 13px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-radius: 6px;
  background: rgba(0, 240, 255, 0.035);
}
.dm-seq64-editor-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.dm-seq64-bank-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #00f0ff;
}
.dm-seq64-bank-title span:last-child {
  color: #7f9ba8;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-align: right;
}
.dm-seq64-bank-mini {
  display: grid;
  grid-template-columns: repeat(16, minmax(5px, 1fr));
  gap: 3px;
  margin: 0 0 9px;
}
.dm-seq64-bank-cell {
  height: 8px;
  padding: 0;
  border-radius: 1px;
}
.dm-seq64-step-card {
  padding: 8px 9px;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.dm-seq64-step-card.rest { background: rgba(255, 255, 255, 0.018); }
.dm-seq64-step-card.playhead { border-color: #00f0ff; background: rgba(0, 240, 255, 0.09); }
.dm-seq64-step-card.record-target { box-shadow: inset 0 0 0 2px #ffcb6b, 0 0 14px rgba(255, 203, 107, 0.2); }
.dm-seq64-step-feedback {
  display: grid;
  gap: 2px;
  min-height: 48px;
  margin: 5px 0 8px;
  color: #9fb4c0;
}
.dm-seq64-step-feedback strong {
  color: #00f0ff;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.dm-seq64-step-feedback span { font-size: 8px; }
.dm-seq64-pane-hero {
  align-items: flex-start;
}
.dm-seq64-arp-context,
.dm-seq64-seed-badge {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 8px;
  min-width: 160px;
  padding: 10px 12px;
  border-left: 1px solid rgba(0, 240, 255, 0.24);
  color: #7f9ba8;
  font-size: 9px;
  text-align: right;
}
.dm-seq64-arp-context strong,
.dm-seq64-seed-badge strong { color: #00ff88; font-size: 18px; }
.dm-seq64-arp-context small,
.dm-seq64-seed-badge small { grid-column: 1 / -1; color: #00f0ff; }
.dm-seq64-arp-summary {
  justify-content: flex-start;
  gap: 8px 18px;
  padding: 9px 11px;
  border-left: 3px solid #00ff88;
  color: #9fb4c0;
  background: rgba(0, 255, 136, 0.045);
}
.dm-seq64-arp-summary b { color: #00ff88; font-size: 9px; }
.dm-seq64-keyboard {
  grid-template-columns: repeat(13, minmax(36px, 1fr));
  gap: 5px;
  padding: 15px;
  margin: 12px 0 16px;
}
.dm-seq64-key { min-height: 42px; font-size: 9px; }
.dm-seq64-form-card { align-items: stretch; }
.dm-seq64-form-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-basis: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #00f0ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.dm-seq64-form-heading small { color: #7f9ba8; font-size: 9px; font-weight: 400; letter-spacing: 0; }
.dm-seq64-inline-controls { flex-basis: 100%; }
.dm-seq64-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  align-items: center;
  flex-basis: 100%;
}
.dm-seq64-field-grid label { justify-content: space-between; min-height: 32px; }
.dm-seq64-wide-field { grid-column: 1 / -1; }
.dm-seq64-randomizer-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
  gap: 13px;
}
.dm-seq64-randomizer-columns .dm-seq64-editor-form { margin-top: 0; }
.dm-seq64-evolve-note {
  justify-content: space-between;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #7f9ba8;
  font-size: 9px;
}
.dm-seq64-evolve-note strong { color: #ffcb6b; }
.dm-seq64-randomizer-context,
.dm-seq64-arp-routing {
  justify-content: flex-start;
  padding: 11px 13px;
  margin-top: 13px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-radius: 6px;
  color: #7f9ba8;
  font-size: 9px;
}
.dm-seq64-randomizer-context strong,
.dm-seq64-arp-routing strong { color: #d9e7ef; margin-right: 8px; }
.dm-seq64-randomizer-context span,
.dm-seq64-arp-routing span { color: #00f0ff; font-weight: 700; letter-spacing: 0.08em; }
@media (max-width: 1180px) {
  .dm-seq64-editor-global { grid-template-columns: 1fr; }
  .dm-seq64-runtime-strip { justify-content: flex-start; }
  .dm-seq64-randomizer-columns { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .dm-seq64-editor-overlay { padding: 8px; }
  .dm-seq64-editor-window { width: 100vw; max-height: 98vh; }
  .dm-seq64-editor-body { padding: 10px; }
  .dm-seq64-sequence-hero,
  .dm-seq64-pane-hero { display: block; }
  .dm-seq64-sequence-legend,
  .dm-seq64-arp-context,
  .dm-seq64-seed-badge { justify-content: flex-start; margin-top: 10px; text-align: left; border-left: 0; border-top: 1px solid rgba(0, 240, 255, 0.2); }
  .dm-seq64-overview-grid { grid-template-columns: repeat(32, minmax(4px, 1fr)); }
  .dm-seq64-overview-cell:nth-child(n + 33) { display: none; }
  .dm-seq64-field-grid { grid-template-columns: 1fr; }
  .dm-seq64-wide-field { grid-column: auto; }
  .dm-seq64-banks { grid-template-columns: 1fr; }
}

/* DM-Seq64 selected-step editor ----------------------------------------- */
.dm-seq64-sequence-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
  align-items: start;
  gap: 14px;
}
.dm-seq64-step-map {
  min-width: 0;
}
.dm-seq64-map-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
}
.dm-seq64-map-caption small {
  color: #7f9ba8;
  font-size: 9px;
}
.dm-seq64-overview {
  display: grid;
  gap: 10px;
  padding: 10px;
  margin: 0;
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 7px;
  background: #070c13;
}
.dm-seq64-overview-row {
  min-width: 0;
  padding: 8px 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.022);
}
.dm-seq64-overview-row.record-lane {
  border-color: rgba(255, 203, 107, 0.55);
  box-shadow: inset 3px 0 0 #ffcb6b;
}
.dm-seq64-overview-row-heading {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 7px;
  color: #7f9ba8;
  font-size: 9px;
  letter-spacing: 0.08em;
}
.dm-seq64-overview-row-heading strong {
  color: #00f0ff;
  font-size: 10px;
}
.dm-seq64-overview-row-heading small {
  justify-self: end;
  color: #6d8793;
  font-size: 8px;
}
.dm-seq64-overview-grid {
  display: grid;
  grid-template-columns: repeat(16, minmax(24px, 1fr));
  gap: 4px;
}
.dm-seq64-overview-step {
  position: relative;
  display: grid;
  grid-template-rows: 25px auto;
  min-width: 0;
  gap: 4px;
  padding-left: 0;
}
.dm-seq64-overview-step.group-start {
  padding-left: 4px;
  border-left: 1px solid rgba(0, 240, 255, 0.42);
}
.dm-seq64-overview-step.outside {
  opacity: 0.34;
}
.dm-seq64-overview-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 25px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 3px;
  background: #1a2731;
  color: transparent;
  cursor: pointer;
  transition: border-color 100ms ease, box-shadow 100ms ease, transform 100ms ease;
}
.dm-seq64-step-light {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #324655;
}
.dm-seq64-overview-cell.enabled {
  border-color: rgba(0, 255, 136, 0.72);
  background: #087b55;
}
.dm-seq64-overview-cell.enabled .dm-seq64-step-light {
  background: #00ff88;
  box-shadow: 0 0 7px rgba(0, 255, 136, 0.65);
}
.dm-seq64-overview-cell.muted {
  border-color: rgba(255, 0, 119, 0.82);
  background: #721643;
}
.dm-seq64-overview-cell.muted .dm-seq64-step-light {
  background: #ff0077;
  box-shadow: 0 0 7px rgba(255, 0, 119, 0.5);
}
.dm-seq64-overview-cell.playhead {
  border-color: #d9ffff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.92), inset 0 0 0 2px #00f0ff;
}
.dm-seq64-overview-cell.playhead .dm-seq64-step-light {
  width: 9px;
  height: 9px;
  background: #d9ffff;
  box-shadow: 0 0 9px #00f0ff;
}
.dm-seq64-overview-step.selected .dm-seq64-overview-cell {
  box-shadow: inset 0 0 0 2px #f0fcff;
}
.dm-seq64-overview-cell:hover {
  transform: translateY(-1px);
  border-color: #fff;
}
.dm-seq64-step-number {
  display: block;
  overflow: hidden;
  color: #718c98;
  font-size: 9px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.dm-seq64-step-number.group-start {
  color: #d9faff;
  font-weight: 700;
}
.dm-seq64-step-inspector {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 7px;
  background: linear-gradient(155deg, rgba(0, 240, 255, 0.08), rgba(0, 0, 0, 0.26) 58%);
}
.dm-seq64-step-inspector.empty {
  min-height: 210px;
  color: #8fa8b3;
}
.dm-seq64-step-inspector.empty strong {
  display: block;
  margin: 12px 0 5px;
  color: #f0fcff;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.dm-seq64-step-inspector.empty p {
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}
.dm-seq64-inspector-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.dm-seq64-inspector-heading h3 {
  margin: 4px 0 3px;
  color: #f0fcff;
  font-size: 19px;
  letter-spacing: 0.08em;
}
.dm-seq64-inspector-heading small {
  color: #8fa8b3;
  font-size: 9px;
}
.dm-seq64-inspector-heading > strong {
  color: #00f0ff;
  font-size: 28px;
  line-height: 1;
}
.dm-seq64-step-inspector.enabled {
  border-color: rgba(0, 255, 136, 0.42);
}
.dm-seq64-step-inspector.muted {
  border-color: rgba(255, 0, 119, 0.55);
}
.dm-seq64-selected-feedback {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  padding: 11px 0;
  color: #9fb4c0;
  font-size: 9px;
}
.dm-seq64-selected-feedback span:nth-child(2) {
  color: #00f0ff;
}
.dm-seq64-selected-fields {
  display: grid;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.dm-seq64-selected-fields label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 27px;
  color: #9fb4c0;
  font-size: 9px;
}
.dm-seq64-selected-fields input[type="number"],
.dm-seq64-selected-fields select {
  box-sizing: border-box;
  min-width: 90px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 5px 6px;
  background: rgba(0, 0, 0, 0.40);
  color: #fff;
  font: 11px var(--font-mono, monospace);
}
.dm-seq64-selected-fields input:focus,
.dm-seq64-selected-fields select:focus {
  outline: none;
  border-color: #00f0ff;
}
@media (max-width: 900px) {
  .dm-seq64-sequence-workspace { grid-template-columns: 1fr; }
  .dm-seq64-step-inspector { order: 0; }
}
@media (max-width: 700px) {
  .dm-seq64-overview-grid { grid-template-columns: repeat(16, minmax(17px, 1fr)); gap: 3px; }
  .dm-seq64-overview-step { grid-template-rows: 22px auto; }
  .dm-seq64-overview-cell { height: 22px; }
  .dm-seq64-overview-row-heading { grid-template-columns: auto 1fr; }
  .dm-seq64-overview-row-heading small { grid-column: 1 / -1; justify-self: start; }
}

/* DM-Seq64 ARP performance console -------------------------------------
 * The ARP tab intentionally uses a low-luminance surface.  Accent colour is
 * reserved for state, focus, and phrase position so a dark-room session does
 * not get flooded by four dozen always-on white/cyan keys.
 */
.dm-seq64-arp-console {
  display: grid;
  gap: 12px;
  color: #a8bac4;
}
.dm-seq64-arp-status-panel,
.dm-seq64-arp-control-deck,
.dm-seq64-arp-preview-panel,
.dm-seq64-arp-keyboard-panel {
  border: 1px solid rgba(0, 240, 255, 0.16);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(9, 22, 27, 0.98), rgba(7, 12, 17, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}
.dm-seq64-arp-status-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
}
.dm-seq64-arp-status-copy p {
  max-width: 700px;
  margin: 8px 0 0;
  color: #78909b;
  font-size: 10px;
  line-height: 1.5;
}
.dm-seq64-arp-status-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 5px;
}
.dm-seq64-arp-status-title h2 {
  margin: 0;
  color: #d9faff;
  font-size: clamp(18px, 2vw, 27px);
  letter-spacing: 0.08em;
}
.dm-seq64-arp-status-dot {
  width: 9px;
  height: 9px;
  border: 1px solid #2b4a54;
  border-radius: 50%;
  background: #1a2b32;
}
.dm-seq64-arp-status-dot.active {
  border-color: #00cf82;
  background: #00cf82;
  box-shadow: 0 0 8px rgba(0, 207, 130, 0.42);
}
.dm-seq64-arp-status-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  align-items: end;
  min-width: min(420px, 40vw);
  border-left: 1px solid rgba(0, 240, 255, 0.18);
  padding-left: 18px;
}
.dm-seq64-arp-status-metrics div {
  display: grid;
  gap: 4px;
  padding: 0 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.dm-seq64-arp-status-metrics div:first-child { padding-left: 0; }
.dm-seq64-arp-status-metrics div:last-of-type { border-right: 0; }
.dm-seq64-arp-status-metrics strong {
  color: #00d68a;
  font-size: 20px;
  line-height: 1;
}
.dm-seq64-arp-status-metrics span,
.dm-seq64-arp-status-metrics small {
  color: #6f8994;
  font-size: 8px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.dm-seq64-arp-status-metrics small {
  grid-column: 1 / -1;
  margin-top: 10px;
  color: #00b9c8;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-seq64-arp-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 15px;
  padding: 9px 12px 9px 14px;
  border-left: 3px solid #00cf82;
  background: rgba(0, 25, 22, 0.62);
  color: #91a8b2;
  font-size: 9px;
  line-height: 1.35;
}
.dm-seq64-arp-summary b { color: #00cf82; }
.dm-seq64-arp-control-deck,
.dm-seq64-arp-preview-panel,
.dm-seq64-arp-keyboard-panel { padding: 14px; }
.dm-seq64-arp-control-deck .dm-seq64-form-heading,
.dm-seq64-arp-preview-panel .dm-seq64-form-heading,
.dm-seq64-arp-keyboard-panel .dm-seq64-form-heading {
  margin-bottom: 12px;
}
.dm-seq64-arp-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
}
.dm-seq64-arp-control-grid label,
.dm-seq64-arp-note-actions label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.20);
  color: #8fa8b3;
  font-size: 9px;
  letter-spacing: 0.04em;
}
.dm-seq64-arp-control-grid label:focus-within,
.dm-seq64-arp-note-actions label:focus-within {
  border-color: rgba(0, 209, 222, 0.65);
}
.dm-seq64-arp-control-grid input[type="number"],
.dm-seq64-arp-control-grid select,
.dm-seq64-arp-note-actions input[type="number"] {
  width: 82px;
  min-width: 0;
  border: 1px solid #243b45;
  border-radius: 3px;
  padding: 5px 6px;
  background: #071015;
  color: #d8eef1;
  font: 11px var(--font-mono, monospace);
}
.dm-seq64-arp-control-grid select { width: 128px; }
.dm-seq64-arp-control-grid input[type="checkbox"] { accent-color: #00cf82; }
.dm-seq64-arp-note-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.dm-seq64-arp-note-actions label { min-width: 152px; }
.dm-seq64-arp-note-actions button,
.dm-seq64-arp-control-deck button {
  min-height: 30px;
  border: 1px solid rgba(0, 209, 222, 0.36);
  border-radius: 4px;
  padding: 6px 10px;
  background: #0b2026;
  color: #a9dce1;
  font: 700 9px var(--font-mono, monospace);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.dm-seq64-arp-note-actions button:hover,
.dm-seq64-arp-control-deck button:hover {
  border-color: #00cfdd;
  background: #0d2b31;
  color: #e5ffff;
}
.dm-seq64-arp-preview-grid {
  display: grid;
  grid-template-columns: repeat(16, minmax(28px, 1fr));
  gap: 4px;
  min-height: 68px;
}
.dm-seq64-arp-preview-cell {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid rgba(0, 194, 205, 0.20);
  border-radius: 3px;
  background: #0b171d;
  color: #86a3ad;
  font-size: 9px;
}
.dm-seq64-arp-preview-cell span { overflow: hidden; font-weight: 700; text-overflow: ellipsis; }
.dm-seq64-arp-preview-cell small { color: #55747d; font-size: 8px; }
.dm-seq64-arp-preview-cell.manual { border-color: rgba(0, 207, 130, 0.65); color: #7de8bc; }
.dm-seq64-arp-preview-cell.live { border-color: rgba(233, 55, 151, 0.72); color: #e69bc6; }
.dm-seq64-arp-preview-cell.silent { color: #40545d; }
.dm-seq64-arp-preview-cell.bypassed { opacity: 0.56; }
.dm-seq64-arp-keyboard-panel { overflow: hidden; }
.dm-seq64-arp-keyboard {
  display: grid;
  grid-template-columns: repeat(13, minmax(28px, 1fr));
  grid-auto-rows: minmax(42px, 1fr);
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  background: #050a0e;
}
.dm-seq64-arp-keyboard .dm-seq64-arp-key {
  min-width: 0;
  min-height: 42px;
  border: 1px solid #1c3038;
  border-radius: 3px;
  background: #111e24;
  color: #849aa3;
  font: 700 9px var(--font-mono, monospace);
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
}
.dm-seq64-arp-keyboard .dm-seq64-arp-key:hover,
.dm-seq64-arp-keyboard .dm-seq64-arp-key:focus-visible {
  outline: none;
  border-color: #00b9c8;
  color: #d4fbff;
}
.dm-seq64-arp-keyboard .dm-seq64-arp-key.manual {
  border-color: #008f68;
  background: #123a32;
  color: #9deac9;
}
.dm-seq64-arp-keyboard .dm-seq64-arp-key.live {
  border-color: #9b2b72;
  box-shadow: inset 0 -2px #da4b9c;
}
.dm-seq64-arp-keyboard .dm-seq64-arp-key.manual.live {
  border-color: #00a99a;
  box-shadow: inset 0 -2px #db4da7;
}
.dm-seq64-arp-routing {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  align-items: baseline;
  padding: 9px 12px;
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 5px;
  background: #071015;
  color: #6c8791;
  font-size: 9px;
}
.dm-seq64-arp-routing span { color: #00b9c8; font-weight: 700; letter-spacing: 0.08em; }
.dm-seq64-arp-routing strong { color: #b9d7dd; font-size: 9px; }
@media (max-width: 850px) {
  .dm-seq64-arp-status-panel { grid-template-columns: 1fr; }
  .dm-seq64-arp-status-metrics { min-width: 0; border-top: 1px solid rgba(0, 240, 255, 0.14); border-left: 0; padding: 12px 0 0; }
  .dm-seq64-arp-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dm-seq64-arp-control-grid { grid-template-columns: 1fr; }
  .dm-seq64-arp-preview-grid { grid-template-columns: repeat(8, minmax(28px, 1fr)); }
  .dm-seq64-arp-keyboard { grid-template-columns: repeat(7, minmax(28px, 1fr)); }
}

/* =====================================================================
   Phase 2 touch UI (move stick, knob HUD, placement HUD, action rail)
   Hidden entirely on non-touch devices via .pwr-touch-ui--hidden.
   ===================================================================== */
.pwr-touch-ui {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}
.pwr-touch-ui--hidden { display: none !important; }

/* Menu takeover: while a studio menu/popover is open the on-screen sticks,
   button arc, tweak/placement HUDs and on-screen hints must not intercept
   touches meant for the menu. Hiding them also removes any chance of a
   pointer-events trap over menu controls. The crosshair is intentionally left
   visible (it is non-interactive and does not interfere). */
.pwr-touch-ui--menu-open .pwr-touch-stick,
.pwr-touch-ui--menu-open .pwr-touch-cluster,
.pwr-touch-ui--menu-open .pwr-touch-cursor-zone,
.pwr-touch-ui--menu-open .pwr-touch-look-hint,
.pwr-touch-ui--menu-open .pwr-touch-tweak-hint,
.pwr-touch-ui--menu-open .pwr-touch-entry,
.pwr-touch-ui--menu-open .pwr-touch-toast,
.pwr-touch-ui--menu-open .pwr-touch-hud {
  display: none !important;
  pointer-events: none !important;
}

/* The top/bottom HUD bars are separate roots from the touch UI. Their
   semi-transparent menu surfaces let them bleed through; hide them too while
   any touch menu is open so no HUD hint overlaps menu content. */
body:has(.pwr-touch-ui--menu-open) #top-hud,
body:has(.pwr-touch-ui--menu-open) #bottom-hud {
  display: none !important;
  pointer-events: none !important;
}

/* Touch ergonomics: on coarse pointers every menu close affordance must reach
   the 44x44 CSS-px minimum recommended for touch. Desktop (fine pointer) keeps
   the compact styling. */
@media (pointer: coarse) {
  .modal-close-btn,
  .inspector-close-btn,
  .knob-behavior-close,
  .sampler8-modal-close,
  .cyber-youtube-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 24px;
  }
}

/* Bottom-left dynamic move zone: owner reserves the bottom-left corner for
   movement; the rest of the screen (including the whole top edge) drives the
   camera. No visible stick at rest - the nipple appears under the finger. */
.pwr-touch-stick {
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto;
  width: 40%;
  height: 45%;
  pointer-events: auto;
  touch-action: none;
}
/* Remaining area cursor zone. Transparent to pointer events in LOOK mode (the
   canvas one-finger drag owns it); captures them in CURSOR mode. */
.pwr-touch-cursor-zone {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  touch-action: none;
}
.pwr-touch-ui--passthrough { pointer-events: none; }
.pwr-touch-ui--active-zone { pointer-events: auto; }
.pwr-touch-look-hint {
  position: absolute;
  left: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  padding: 3px 8px;
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.8);
  color: #b3f2ff;
  font-size: 10px;
  letter-spacing: 0.12em;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Mobile-FPS action arc, bottom-right thumb anchor.
   The container itself is pointer-transparent and only the buttons capture
   pointers, so a look drag still works in the gaps between them. */
.pwr-touch-cluster {
  position: absolute;
  right: calc(8px + env(safe-area-inset-right, 0px));
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  width: 240px;
  height: 216px;
  pointer-events: none;
}
.pwr-touch-cluster-row { display: contents; }
.pwr-touch-cluster .pwr-touch-btn {
  position: absolute;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
}
/* Primary thumb arc: USE inner anchor, CONTEXT adjacent, CROUCH/MODE above. */
#pwr-touch-use { right: 16px; bottom: 8px; width: 72px; height: 72px; font-size: 14px; }
#pwr-touch-context { right: 96px; bottom: 22px; width: 64px; height: 64px; font-size: 9px; flex-direction: column; gap: 1px; line-height: 1; }
/* RM button internals: a mouse silhouette with the RIGHT button filled. */
.pwr-rmb-icon { width: 20px; height: 20px; display: block; }
.pwr-rmb-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; }
#pwr-touch-crouch { right: 22px; bottom: 92px; width: 56px; height: 56px; font-size: 10px; }
#pwr-touch-mode { right: 92px; bottom: 96px; width: 56px; height: 56px; font-size: 9px; line-height: 1.05; }
/* CLIP: desktop 'F' (pin guide clip) exposed to touch. Sits beside MODE, above
   RM, clear of CROUCH and the MENU utility row. */
#pwr-touch-clip { right: 162px; bottom: 100px; width: 56px; height: 56px; font-size: 10px; }
/* Pure-touch phones: no mouse CURSOR mode is offered, so the MODE toggle is
   removed from the thumb arc entirely (LOOK-only aim). Hybrid touch+mouse
   devices keep it. */
.pwr-touch-ui--no-cursor #pwr-touch-mode { display: none !important; }
/* Outer utility arc: smaller and slightly translucent. */
#pwr-touch-fine,
#pwr-touch-del,
#pwr-touch-insp,
#pwr-touch-menu { width: 48px; height: 48px; font-size: 9px; opacity: 0.82; }
#pwr-touch-fine { right: 8px; bottom: 160px; }
#pwr-touch-del { right: 58px; bottom: 166px; }
#pwr-touch-insp { right: 108px; bottom: 160px; }
#pwr-touch-menu { right: 168px; bottom: 164px; }
.pwr-touch-cluster .pwr-touch-btn:active { transform: scale(0.9); }
.pwr-touch-hud {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 240, 255, 0.55);
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.86);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.18);
  color: #cdfaff;
  pointer-events: auto;
}
.pwr-touch-hud--knob {
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
}
.pwr-touch-hud--placement {
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  flex-wrap: wrap;
  max-width: calc(100vw - 24px);
  justify-content: center;
}
.pwr-knob-label {
  min-width: 52px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #7df9ff;
  text-transform: uppercase;
}
.pwr-knob-value {
  min-width: 54px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.pwr-touch-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.14), rgba(8, 12, 20, 0.9));
  color: #d6fbff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}
.pwr-touch-btn:active { transform: scale(0.95); }
.pwr-touch-btn--square { min-width: 44px; padding: 8px; font-size: 18px; line-height: 1; }
.pwr-touch-btn--fine.pwr-touch-btn--active {
  background: linear-gradient(180deg, rgba(0, 255, 170, 0.35), rgba(0, 90, 60, 0.9));
  border-color: #00ffaa;
  color: #eafff5;
  box-shadow: 0 0 16px rgba(0, 255, 170, 0.45);
}
.pwr-touch-btn--look.pwr-touch-btn--active {
  background: linear-gradient(180deg, rgba(255, 0, 160, 0.35), rgba(90, 0, 56, 0.9));
  border-color: #ff00a0;
  color: #ffe6f6;
  box-shadow: 0 0 16px rgba(255, 0, 160, 0.45);
}
.pwr-touch-btn--lmb,
.pwr-touch-btn--use {
  border-color: rgba(0, 240, 255, 0.85);
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.32), rgba(8, 12, 20, 0.94));
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.22);
}
.pwr-touch-btn--rmb,
.pwr-touch-btn--context {
  border-color: rgba(255, 170, 0, 0.8);
  background: linear-gradient(180deg, rgba(255, 170, 0, 0.26), rgba(8, 12, 20, 0.94));
  color: #ffe6bf;
}
.pwr-touch-btn--mini {
  border-radius: 50%;
  background: rgba(10, 16, 26, 0.7);
  color: #bfefff;
}
.pwr-touch-btn--use:active,
.pwr-touch-btn--lmb:active,
.pwr-touch-btn--context:active,
.pwr-touch-btn--rmb:active {
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.55), rgba(8, 12, 20, 0.98));
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.5);
}
.pwr-touch-btn--crouch.pwr-touch-btn--active {
  background: linear-gradient(180deg, rgba(0, 255, 170, 0.32), rgba(0, 90, 60, 0.9));
  border-color: #00ffaa;
  color: #eafff5;
  box-shadow: 0 0 14px rgba(0, 255, 170, 0.4);
}
.pwr-touch-btn--mode.pwr-touch-btn--active {
  background: linear-gradient(180deg, rgba(255, 0, 160, 0.32), rgba(90, 0, 56, 0.9));
  border-color: #ff00a0;
  color: #ffe6f6;
  box-shadow: 0 0 14px rgba(255, 0, 160, 0.4);
}
.pwr-touch-btn--clip {
  border-color: rgba(0, 255, 170, 0.75);
  background: linear-gradient(180deg, rgba(0, 255, 170, 0.2), rgba(8, 12, 20, 0.94));
  color: #c9ffe9;
}
.pwr-touch-btn--clip.pwr-touch-btn--active {
  background: linear-gradient(180deg, rgba(0, 255, 170, 0.42), rgba(0, 70, 48, 0.95));
  border-color: #00ffaa;
  color: #eafff5;
  box-shadow: 0 0 16px rgba(0, 255, 170, 0.5);
}

/* USE knob-tweak mode: blink the armed USE button and show the swipe hint. */
@keyframes pwr-tweak-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 20px rgba(0, 240, 255, 0.6); }
  50% { opacity: 0.3; box-shadow: 0 0 4px rgba(0, 240, 255, 0.08); }
}
.pwr-touch-btn--tweaking {
  animation: pwr-tweak-blink 0.85s ease-in-out infinite;
  border-color: #00f0ff !important;
}
.pwr-touch-tweak-hint {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 10px;
  border: 1px solid rgba(0, 240, 255, 0.65);
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.86);
  color: #9ff4ff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  white-space: pre-line;
  text-align: center;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* While tweaking: hide every cluster button except USE, and the move hint.
   The whole screen becomes a vertical swipe surface for the focused knob. */
.pwr-touch-ui--tweaking .pwr-touch-cluster .pwr-touch-btn:not(#pwr-touch-use) {
  display: none !important;
}
.pwr-touch-ui--tweaking .pwr-touch-look-hint {
  display: none !important;
}
#pwr-touch-use { position: absolute; }
.pwr-knob-value {
  cursor: pointer;
  border-bottom: 1px dashed rgba(0, 240, 255, 0.5);
  padding-bottom: 1px;
}
/* FINE +/- panel and slide HUD share the knob value presentation. */
.pwr-tweak-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #7df9ff;
  text-transform: uppercase;
}
.pwr-tweak-value {
  min-width: 96px;
  margin: 2px 0;
  text-align: center;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(0, 240, 255, 0.55);
  -webkit-user-select: none;
  user-select: none;
}
.pwr-tweak-hint-title {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #7df9ff;
  opacity: 0.85;
}
/* Tappable slide-intensity chip inside the (pointer-transparent) slide panel.
   Re-enables pointer events for itself and stays >= 44px so it is a real thumb
   target while the rest of the screen is a swipe surface. */
.pwr-touch-chip {
  pointer-events: auto;
  margin-top: 4px;
  min-width: 92px;
  min-height: 44px;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  touch-action: manipulation;
}
.pwr-touch-chip:active { transform: scale(0.94); }
/* Placement HUD "what am I placing" status row. */
.pwr-placement-label {
  flex: 1 0 100%;
  margin-bottom: 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #7df9ff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* Live numeric value inside the slide panel: make it the visual anchor. */
.pwr-touch-tweak-hint .pwr-tweak-value {
  font-size: 32px;
}
/* Transient hint toast (FINE with no focused knob). */
.pwr-touch-toast {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border: 1px solid rgba(0, 240, 255, 0.6);
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.92);
  color: #cdfaff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  pointer-events: none;
}

/* Keyboard value-entry overlay. */
.pwr-touch-entry {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  min-width: 260px;
  padding: 14px;
  border: 1px solid rgba(0, 240, 255, 0.7);
  border-radius: 12px;
  background: rgba(6, 10, 18, 0.96);
  box-shadow: 0 0 26px rgba(0, 240, 255, 0.28);
  color: #cdfaff;
  pointer-events: auto;
}
.pwr-touch-entry-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #7df9ff;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.pwr-touch-entry-row { display: flex; gap: 8px; align-items: center; }
.pwr-touch-entry-input {
  flex: 1;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(0, 240, 255, 0.55);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.pwr-touch-entry-input:focus { outline: none; border-color: #00f0ff; box-shadow: 0 0 12px rgba(0, 240, 255, 0.4); }
.pwr-touch-entry-ok { background: linear-gradient(180deg, rgba(0, 240, 255, 0.35), rgba(8, 12, 20, 0.95)); }
.pwr-touch-entry-cancel { opacity: 0.75; }
.pwr-touch-entry-error {
  min-height: 14px;
  margin-top: 8px;
  color: #ff6b9d;
  font-size: 11px;
  text-align: center;
}

/* Active-controls indicator pill inside the bottom hint bar. */
.active-controls-indicator {
  padding: 2px 8px;
  margin-right: 6px;
  border: 1px solid rgba(0, 240, 255, 0.6);
  border-radius: 999px;
  color: #7df9ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Landscape phones/tablets: keep the arc low and wide, clear of the hint bar. */
@media (orientation: landscape) {
  .pwr-touch-cluster {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}
/* Portrait phones: lift the arc above the wrapped bottom hint bar. */
@media (orientation: portrait) {
  .pwr-touch-cluster {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    right: calc(6px + env(safe-area-inset-right, 0px));
  }
}
/* Short landscape viewports (phone rotated): scale the arc down as one unit. */
@media (orientation: landscape) and (max-height: 430px) {
  .pwr-touch-cluster {
    transform: scale(0.86);
    transform-origin: bottom right;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 600px) {
  .pwr-touch-look-hint { font-size: 9px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   Studio touch hardening + orientation fit.
   Page-level gestures (pull-to-refresh, rubber-band, double-tap zoom) are
   blocked inside the studio 3D surface. Safari cannot block the OS/browser
   edge-swipe back gesture from a tab; an installed standalone PWA has no
   browser chrome so those gestures disappear there.
   ===================================================================== */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
/* The 3D viewport owns every touch: no pan, no pinch-zoom, no double-tap zoom. */
#canvas-container canvas,
#canvas-container {
  touch-action: none;
  overscroll-behavior: none;
}
/* Buttons and inputs stay tappable (manipulation disables double-tap zoom). */
.pwr-touch-btn,
button,
input,
select,
textarea {
  touch-action: manipulation;
}
/* Scrollable menus keep native touch scrolling even while the page gate is on. */
.modal-overlay,
.side-inspector,
.sampler8-modal-overlay,
.cyber-youtube-modal-container,
.cyber-youtube-browser-window,
.dm-seq64-editor-window {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* Both orientations: menus must never overflow the visible viewport. */
.modal-overlay > .modal-window,
.modal-overlay > .modal-card,
.modal-overlay > .master-options-window,
.modal-overlay > .knob-behavior-window,
.modal-overlay > .lfo-matrix-window,
.sampler8-modal-overlay > .sampler8-modal,
.cyber-youtube-modal-container > *,
.dm-seq64-editor-window {
  max-height: calc(100vh - 16px) !important;
}
.modal-body,
.sampler8-modal-body,
.dm-seq64-editor-window .modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Portrait phones: give the bottom-left move zone a little more vertical room
   and keep the arc clear of the wrapped hint bar. */
@media (orientation: portrait) and (max-width: 600px) {
  .pwr-touch-stick { width: 46%; height: 42%; }
  .pwr-touch-cluster { transform: scale(0.92); transform-origin: bottom right; }
}
/* Short landscape viewports (phone rotated): compact the move zone so the
   camera keeps most of the screen. */
@media (orientation: landscape) and (max-height: 430px) {
  .pwr-touch-stick { width: 38%; height: 50%; }
}

/* Themed scrollbars for the whole studio document (windowed dock + fullscreen).
   The parent page's theme cannot reach this iframe document, so the studio
   ships its own copy. Matches the main app: green thumb, dark track.
   Firefox uses the standard properties, Chromium/WebKit the pseudo-elements. */
* {
  scrollbar-width: thin;
  scrollbar-color: #00ff66 #0a1408;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0a1408;
}

::-webkit-scrollbar-thumb {
  background: #00ff66;
  border: 2px solid #0a1408;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #e5ff00;
}

::-webkit-scrollbar-corner {
  background: #0a1408;
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* === iOS Add-to-Home-Screen fullscreen hint ============================= */
.a2hs-banner {
  display: none;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  margin: 14px auto 0;
  max-width: 560px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 10px;
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.15);
}
.a2hs-banner.visible { display: flex; }
.a2hs-banner-icon { color: var(--accent-cyan, #00f0ff); flex: 0 0 auto; margin-top: 2px; }
.a2hs-banner-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.a2hs-banner-title {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-cyan, #00f0ff);
}
.a2hs-banner-text { font-size: 12px; line-height: 1.45; color: var(--text-main, #e6ecf5); }
.a2hs-banner-btn {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent-cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.14);
  color: var(--accent-cyan, #00f0ff);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.a2hs-banner-btn:hover { background: rgba(0, 240, 255, 0.24); }
.a2hs-banner-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--text-muted, #8a94a6);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.a2hs-banner-close:hover { color: #fff; }
/* Crash-loop safe-mode notice reuses the A2HS banner shell with a warning tint. */
.safe-mode-banner {
  border-color: rgba(229, 255, 0, 0.5);
  background: rgba(229, 255, 0, 0.07);
  box-shadow: 0 0 24px rgba(229, 255, 0, 0.15);
}
.safe-mode-banner .a2hs-banner-icon,
.safe-mode-banner .a2hs-banner-title { color: #e5ff00; }
.safe-mode-banner .a2hs-banner-btn {
  border-color: #e5ff00;
  background: rgba(229, 255, 0, 0.14);
  color: #e5ff00;
}
.safe-mode-banner .a2hs-banner-btn:hover { background: rgba(229, 255, 0, 0.24); }
.esc-a2hs-hint {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 8px;
  background: rgba(0, 240, 255, 0.07);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted, #8a94a6);
  text-align: center;
}

/* =====================================================================
   Mobile landscape forcing (touch only).
   TouchUI resolves the studio "presentation": when a phone is portrait and
   the OS orientation lock is unavailable (iOS) the controls lay out against
   the wide content geometry, so these rules are keyed on
   .pwr-touch-ui--landscape rather than the physical orientation. Desktop
   never receives the touch UI at all, so it is untouched.
   ===================================================================== */

/* Every on-screen touch control keeps a >= 40 CSS px tap target. */
.pwr-touch-cluster .pwr-touch-btn { min-width: 40px; min-height: 40px; }

/* Landscape content: move zone low and wide, arc clear of the bottom edge and
   safe areas, HUDs inset from the rounded corners. */
.pwr-touch-ui--landscape .pwr-touch-stick {
  width: 38%;
  height: 52%;
}
.pwr-touch-ui--landscape .pwr-touch-cluster {
  right: calc(10px + env(safe-area-inset-right, 0px));
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
.pwr-touch-ui--landscape .pwr-touch-look-hint {
  left: calc(14px + env(safe-area-inset-left, 0px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  font-size: 9px;
}
.pwr-touch-ui--landscape .pwr-touch-hud--knob { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.pwr-touch-ui--landscape .pwr-touch-hud--placement {
  top: calc(48px + env(safe-area-inset-top, 0px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

/* Short landscape phones (844x390 / 915x412): compact the arc as one unit so
   the wider app never clips or overlaps the HUD. */
@media (max-height: 430px) {
  .pwr-touch-ui--landscape .pwr-touch-cluster {
    transform: scale(0.82);
    transform-origin: bottom right;
    bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }
  /* The 0.82 cluster scale shrinks the fixed 48px outer utility row to
     39.36px, below the 40px touch minimum. Keep the thumb arc compact but
     enlarge the utility buttons (50 * 0.82 = 41px) and re-space the row so a
     >=40px target never trades for an overlap. */
  .pwr-touch-ui--landscape #pwr-touch-fine,
  .pwr-touch-ui--landscape #pwr-touch-del,
  .pwr-touch-ui--landscape #pwr-touch-insp,
  .pwr-touch-ui--landscape #pwr-touch-menu {
    width: 50px;
    height: 50px;
  }
  .pwr-touch-ui--landscape #pwr-touch-fine { right: 6px; bottom: 160px; }
  .pwr-touch-ui--landscape #pwr-touch-del { right: 58px; bottom: 164px; }
  .pwr-touch-ui--landscape #pwr-touch-insp { right: 110px; bottom: 160px; }
  .pwr-touch-ui--landscape #pwr-touch-menu { right: 168px; bottom: 162px; }
}

/* Menus always scroll inside the visible (content) viewport. */
.pwr-touch-ui--landscape ~ .modal-overlay > .modal-window,
.modal-overlay > .modal-window {
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}

/* Marker class set while the simulated rotation is active. The studio stage
   consumes the same class to apply the quarter-turn transform; the touch UI
   itself stays in content space so hit-testing lines up after rotation. */
.pwr-touch-ui--rotated { transform-origin: 50% 50%; }

/* =====================================================================
   Simulated-landscape stage (portrait touch only).
   app.js publishes the resolved content size as --pwr-stage-w/h and toggles
   body.pwr-stage--rotated. The entire stage - 3D canvas, touch HUD and every
   menu overlay - is laid out at the content size (device long edge x short
   edge), then given a quarter turn about the physical viewport. That keeps the
   HUD and aim math in a single coordinate space; when the user does turn the
   device the presentation resolves to native landscape and the class is
   removed. Desktop never receives the class, so it is untouched.
   ===================================================================== */
body.pwr-stage--rotated {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--pwr-stage-w, 100vh);
  height: var(--pwr-stage-h, 100vw);
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-100%);
  overflow: hidden;
}

/* The canvas itself is sized to the content box by the renderer; drop the
   portrait safe-area padding so the rotated stage lands exactly. */
body.pwr-stage--rotated #canvas-container {
  padding: 0 !important;
}

/* Safe areas are physical top/bottom in portrait; after the turn they become
   the content left/right edges. Swap them for the touch controls so the move
   zone and button arc clear the notch and home indicator. */
body.pwr-stage--rotated .pwr-touch-ui--landscape .pwr-touch-stick {
  left: env(safe-area-inset-top, 0px);
  bottom: env(safe-area-inset-left, 0px);
}
body.pwr-stage--rotated .pwr-touch-ui--landscape .pwr-touch-cluster {
  right: calc(10px + env(safe-area-inset-bottom, 0px));
  bottom: calc(56px + env(safe-area-inset-left, 0px));
}
body.pwr-stage--rotated .pwr-touch-ui--landscape .pwr-touch-look-hint {
  left: calc(14px + env(safe-area-inset-top, 0px));
  bottom: calc(10px + env(safe-area-inset-left, 0px));
}

/* =====================================================================
   Master Options hub: single-pane phone landscape layout.
   Short landscape viewports (rotated phones: 844x390 / 915x412) cannot fit
   the 250 px vertical tab rail beside a multi-column card grid - the content
   pane overlapped / clipped the Display pane's UI SCALE cards. Stack the hub
   instead: a compact horizontally-scrollable tab strip on top, one content
   pane below, one card per row. Keyed on the short landscape viewport only,
   so desktop keeps the two-column layout untouched.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 430px) {
  .modal-overlay:has(> .master-options-window) {
    padding: 6px !important;
  }

  .modal-overlay > .master-options-window {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 8px;
  }

  .master-options-window .master-options-layout {
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Tab list becomes a compact, horizontally scrollable strip above content. */
  .master-options-window .options-sidebar {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ui-border-color, var(--border-color, rgba(0, 240, 255, 0.15))) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .master-options-window .options-tab-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }

  /* Single content pane; owns its own vertical scrolling. */
  .master-options-window .options-content-area {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* One card per row. Inline `grid-column: span 2` on the UI SCALE /
     sound cards would otherwise create an implicit second grid column and
     clip the cards against the content pane edge. */
  .master-options-window .dsp-grid,
  .master-options-window .ground-grid-container {
    grid-template-columns: 1fr !important;
  }
  .master-options-window .dsp-grid > *,
  .master-options-window .ground-grid-container > * {
    grid-column: 1 / -1 !important;
  }

  /* Finger-sized controls inside the hub. */
  .master-options-window .options-content-area button,
  .master-options-window .options-content-area select {
    min-height: 40px;
  }
  .master-options-window .options-content-area button {
    min-width: 40px;
  }
  /* Preset cards live in a scrolling grid; keep every action finger-sized and
     let the action row wrap instead of overlapping. */
  .master-options-window .preset-card-actions {
    gap: 8px;
  }
  .master-options-window .preset-action-btn {
    min-height: 40px;
    min-width: 40px;
    padding: 8px 10px;
    font-size: 10px;
  }
}

/* =====================================================================
   ESC pause menu: short-landscape phone fit (844x390 / 915x412).
   The two-column action grid plus the ACCOUNT / USER DATA rows are taller
   than a rotated phone viewport, so the window scrolls and the account
   action row wraps. Every control keeps the 40px touch minimum and the
   window is capped to the visible viewport so nothing is clipped off-screen.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 430px) {
  .modal-overlay:has(> .esc-menu-window) {
    padding: 6px !important;
  }

  .modal-overlay > .esc-menu-window {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 12px) !important;
    border-radius: 8px;
  }

  .esc-menu-window .modal-body {
    padding: 12px 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Compact the action cards so more of the menu is visible without scrolling. */
  .esc-menu-window .esc-menu-grid {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .esc-menu-window .esc-action-btn {
    padding: 8px 10px !important;
    gap: 10px !important;
    min-height: 40px;
  }
  .esc-menu-window .esc-action-btn .esc-btn-title {
    font-size: 11px;
  }
  .esc-menu-window .esc-action-btn .esc-btn-desc {
    font-size: 10px;
  }
  .esc-menu-window .esc-action-btn .key-hint {
    display: none;
  }

  /* Account / user-data rows: wrap the action buttons, keep 40px targets. */
  .esc-menu-window .esc-account-actions .hud-btn,
  .esc-menu-window .esc-user-data .hud-btn {
    min-height: 40px;
    padding: 0 10px;
    font-size: 10px;
  }
  .esc-menu-window .esc-account-actions,
  .esc-menu-window .esc-user-data > div > div:last-child {
    flex-wrap: wrap;
  }

  /* Footer actions (QUIT / FULLSCREEN / RESUME) are 31px tall by default;
     raise them to the 40px touch minimum. */
  .esc-menu-window #esc-btn-quit,
  .esc-menu-window #esc-btn-fullscreen,
  .esc-menu-window #esc-btn-resume {
    min-height: 40px;
  }
}

/* =====================================================================
   Storage & Spawner: short-landscape phone fit.
   The auto-fill grid keeps 3 columns at 844px, so the 26px PLACE buttons
   are below the touch minimum and the lower rows sit off-screen. Force a
   single column, raise the card buttons to 40px and let the body scroll.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 430px) {
  .modal-overlay:has(> .modal-window) > .modal-window {
    max-height: calc(100vh - 12px) !important;
  }
  #modal-spawner .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #modal-spawner .spawner-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #modal-spawner .card-btn {
    min-height: 40px;
    padding: 10px 12px;
  }
  #modal-spawner .spawner-category-bar {
    flex-wrap: wrap;
  }
}

/* =====================================================================
   Master Options hub: keep the tab strip reachable in short landscape.
   The strip is horizontally scrollable, but the off-screen tabs must still
   be reachable by scrolling; the active tab is scrolled into view by the
   hub. Ensure the strip itself never clips its own scroll affordance.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 430px) {
  .master-options-window .options-sidebar {
    scrollbar-width: thin;
  }
  /* Preset search input is 32px tall; raise it to the 40px touch minimum. */
  .master-options-window #input-search-presets {
    min-height: 40px;
  }

  /* DSP range sliders and checkboxes are 4px / 18px by default. Grow the hit
     area to the 40px touch minimum (the range track stays visually thin). */
  .master-options-window .dsp-row input[type="range"],
  .master-options-window input[type="range"] {
    height: 40px;
  }
  .master-options-window input[type="checkbox"] {
    width: 40px !important;
    height: 40px !important;
  }
}



/* --- Portable .pwrpreset import banner ---------------------------------- */
#imported-preset-banner.imported-preset-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(720px, 94vw);
  padding: 12px 14px;
  background: rgba(10, 14, 22, 0.96);
  border: 1px solid var(--ui-border-accent, #00d9ff);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
#imported-preset-banner.imported-preset-banner[hidden] { display: none !important; }
.imported-preset-banner-body { flex: 1 1 auto; min-width: 0; }
.imported-preset-banner-title {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--ui-accent-primary, #00d9ff);
}
.imported-preset-banner-text {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ui-text-muted, #9aa4b2);
}
#imported-preset-banner .imported-preset-banner-btn {
  min-height: 40px;
  min-width: 40px;
  white-space: nowrap;
}
.preset-drop-active { outline: 2px dashed var(--ui-accent-primary, #00d9ff); outline-offset: -6px; }
@media (max-width: 900px) {
  #imported-preset-banner.imported-preset-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #imported-preset-banner .imported-preset-banner-btn { width: 100%; }
}