/* =====================================================================
   GrooveGraft — Ableton-inspired DAW UI
   Warm dark grays, amber accent, panel-based layout, JetBrains Mono
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* Surface palette */
  --bg:         #1A1A1A;
  --panel:      #242424;
  --panel-border: #2E2E2E;
  --nested:     #1E1E1E;
  --header-bar: #2A2A2A;
  --recessed:   #161616;

  /* Accent */
  --accent:     #FF6B2B;
  --accent-dim: rgba(255,107,43,0.15);
  --accent-glow: rgba(255,107,43,0.30);

  /* Text hierarchy */
  --text-primary:   rgba(255,255,255,0.87);
  --text-secondary: rgba(255,255,255,0.54);
  --text-disabled:  rgba(255,255,255,0.30);
  --text-faint:     rgba(255,255,255,0.15);

  /* Borders */
  --border:       #2E2E2E;
  --border-light: #383838;
  --border-faint: #222222;

  /* Instrument data colors (unchanged) */
  --kick:   #E06C45;
  --snare:  #60A5FA;
  --hihat:  #34D399;
  --error:  #EF4444;

  /* Fonts */
  --mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Radii */
  --radius: 4px;
}

/* === Reset & base ======================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Ambient glow */
body::before {
  content: '';
  position: fixed;
  top: -250px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 550px;
  background: radial-gradient(ellipse, rgba(255,107,43,0.02) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

.container {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  position: relative;
  z-index: 1;
}

/* === Top navigation bar ================================================= */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--nested);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px; height: 40px;
}
.top-nav .nav-logo {
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-secondary); margin-right: auto;
}
.top-nav .nav-links {
  display: flex; gap: 2px; align-items: center;
}
.top-nav .nav-dot {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; font-weight: 400;
  color: var(--text-disabled);
  cursor: pointer; border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.top-nav .nav-dot:hover {
  color: var(--accent);
  background: var(--accent-dim);
  border-bottom-color: var(--accent);
}
/* Map nav entry sits next to the section dots; icon-sized rather
   than number-sized so it reads as "link out to another page". */
.top-nav .nav-dot.nav-map {
  font-size: 14px;
  color: var(--text-secondary);
  margin-left: 4px;
  border-left: 1px solid var(--border-faint);
  padding-left: 4px;
}

/* "View as Map" CTA in Section 04 header. */
.view-map-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  text-transform: uppercase;
  transition: background-color 150ms, color 150ms;
}
.view-map-btn:hover {
  background: var(--accent);
  color: #1A1A1A;
}
.top-nav .nav-status {
  margin-left: 12px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--hihat);
  box-shadow: 0 0 6px var(--hihat);
}
.top-nav .nav-status.nav-status-live {
  background: var(--snare);
  box-shadow: 0 0 4px var(--snare);
  opacity: 0.6;
}
/* Push content below nav */
.container { padding-top: 56px; }

/* === Site header ======================================================== */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.logo {
  font-size: 14px; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-primary);
}
.status {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-disabled);
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hihat);
  box-shadow: 0 0 6px var(--hihat), 0 0 14px rgba(52,211,153,0.25);
}
.status-dot.status-dot-live {
  background: var(--snare);
  box-shadow: 0 0 4px var(--snare), 0 0 10px rgba(96,165,250,0.25);
  opacity: 0.8;
}

/* === Section panels ===================================================== */
.section-num {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--header-bar);
  margin: -20px -20px 20px -20px;
  padding: 8px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
}
.section-num::before { display: none; }

.section {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.section.disabled { opacity: 0.3; pointer-events: none; }
.section.fade-in {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.section.fade-in.visible { opacity: 1; transform: translateY(0); }

/* === Dividers =========================================================== */
.divider {
  height: 0; margin: 0; border: none;
  /* Panels provide their own spacing now */
}

/* === File drop zones ==================================================== */
.file-drop {
  display: block; background: var(--recessed);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius);
  padding: 28px 24px; text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 16px;
}
.file-drop:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.file-drop.has-file {
  border-color: var(--accent); border-style: solid;
}
.file-drop.dragging {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.file-drop.drop-accepted {
  border-color: var(--hihat);
  transition: border-color 0s;
}
.file-drop input { display: none; }
.file-drop-label {
  font-size: 12px; font-weight: 300;
  color: var(--text-disabled); letter-spacing: 0.08em;
}
.file-drop-label small {
  display: block; font-size: 10px; margin-top: 6px;
  color: var(--text-faint);
  letter-spacing: 0.15em; text-transform: uppercase;
}
/* The main CTA text in the drop zone — slightly emphasized so it
   reads as an actionable instruction rather than a passive label. */
.drop-cta {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}
.file-drop.has-file .file-drop-label {
  color: var(--text-primary);
  font-family: var(--mono); font-weight: 400; letter-spacing: 0;
}

/* === Form controls ====================================================== */
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.2fr;
  gap: 16px; margin-bottom: 16px; align-items: end;
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-size: 9px; font-weight: 400;
  color: var(--text-disabled);
  text-transform: uppercase; letter-spacing: 0.2em;
}
.form-input, .form-select {
  background: var(--nested);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  padding: 8px 12px;
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  width: 100%;
  transition: border-color 0.2s;
  -webkit-appearance: none; appearance: none;
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.3)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}
.form-input:focus, .form-select:focus {
  outline: none; border-color: var(--accent);
}
.form-input::placeholder { color: var(--text-faint); }

/* === Toggle checkbox ==================================================== */
.toggle-label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 8px 0;
  font-size: 11px; font-weight: 300;
  color: var(--text-disabled); letter-spacing: 0.05em;
}
.toggle-label input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  border: 1px solid var(--border-light);
  border-radius: 2px; background: transparent;
  cursor: pointer; position: relative; flex-shrink: 0;
}
.toggle-label input[type="checkbox"]:checked {
  border-color: var(--accent); background: var(--accent-dim);
}
.toggle-label input[type="checkbox"]:checked::after {
  content: ''; position: absolute;
  left: 3px; top: 1px; width: 5px; height: 8px;
  border: solid var(--accent); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.toggle-label input[type="checkbox"]:checked + .toggle-text {
  color: var(--text-primary);
}

/* === Buttons ============================================================ */
.ghost-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-secondary);
  padding: 10px 24px;
  font-family: var(--sans); font-weight: 400;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; cursor: pointer;
  transition: all 0.2s; width: 100%;
}
.ghost-btn:hover:not(:disabled) {
  background: var(--accent); color: #000;
  border-color: var(--accent);
}
.ghost-btn:active:not(:disabled) { transform: scale(0.98); opacity: 0.9; }
.ghost-btn:disabled { opacity: 0.2; cursor: not-allowed; }
.ghost-btn-sm {
  padding: 6px 14px; font-size: 10px;
  letter-spacing: 0.12em; width: auto;
}

/* === Slider ============================================================= */
.slider-row { margin-bottom: 16px; }
.slider-header {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 10px;
}
.slider-value {
  font-family: var(--mono); font-size: 13px;
  font-weight: 400; color: var(--text-primary);
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: transparent;
  height: 20px; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; background: var(--border); border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: none; margin-top: -5px;
  box-shadow: 0 0 8px var(--accent-glow);
  transition: box-shadow 0.2s;
}
input[type="range"]:hover::-webkit-slider-thumb {
  box-shadow: 0 0 12px var(--accent-glow), 0 0 24px rgba(255,107,43,0.15);
}
input[type="range"]::-moz-range-track {
  height: 3px; background: var(--border); border-radius: 2px; border: none;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: none;
}
input[type="range"]::-moz-range-progress {
  height: 3px; background: var(--accent); border-radius: 2px;
}

/* === Master + per-instrument intensity group =========================== */
.intensity-group { margin-bottom: 18px; }
.intensity-group.mixed .slider-value#intensity-val,
.intensity-group.mixed #intensity-label {
  color: var(--text-disabled);
}
.link-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-disabled);
  font-family: var(--sans);
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; cursor: pointer;
  border-radius: var(--radius);
  margin-left: auto;
  transition: color 0.2s, border-color 0.2s;
}
.link-toggle:hover { color: var(--accent); border-color: var(--accent); }
.link-toggle.linked {
  color: var(--hihat); border-color: var(--hihat);
}

.per-instrument-sliders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 12px 14px;
  background: var(--recessed);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.inst-slider { margin-bottom: 0; }
.inst-slider .slider-header { margin-bottom: 6px; }
.inst-slider .form-label {
  font-size: 9px; letter-spacing: 0.15em;
}
.inst-slider .slider-value { font-size: 11px; }

/* Color-coded thumbs per instrument */
.inst-kick input[type="range"]::-webkit-slider-thumb {
  background: var(--kick);
  box-shadow: 0 0 6px rgba(224,108,69,0.55);
}
.inst-kick input[type="range"]::-moz-range-thumb { background: var(--kick); }
.inst-kick input[type="range"]::-moz-range-progress { background: var(--kick); }
.inst-kick .form-label { color: var(--kick); }

.inst-snare input[type="range"]::-webkit-slider-thumb {
  background: var(--snare);
  box-shadow: 0 0 6px rgba(96,165,250,0.55);
}
.inst-snare input[type="range"]::-moz-range-thumb { background: var(--snare); }
.inst-snare input[type="range"]::-moz-range-progress { background: var(--snare); }
.inst-snare .form-label { color: var(--snare); }

.inst-hihat input[type="range"]::-webkit-slider-thumb {
  background: var(--hihat);
  box-shadow: 0 0 6px rgba(52,211,153,0.55);
}
.inst-hihat input[type="range"]::-moz-range-thumb { background: var(--hihat); }
.inst-hihat input[type="range"]::-moz-range-progress { background: var(--hihat); }
.inst-hihat .form-label { color: var(--hihat); }

@media (max-width: 600px) {
  .per-instrument-sliders { grid-template-columns: 1fr; }
}

/* === Velocity mode group =============================================== */
.velocity-group {
  padding: 12px 14px;
  background: var(--nested);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.velocity-group .slider-row { margin-bottom: 0; }
.velocity-group .slider-row + .slider-row { margin-top: 10px; }

/* Velocity status in the A/B player footer. Mirrors player-time styling. */
.player-velocity-status {
  font-family: var(--mono); font-size: 10px;
  font-weight: 300; letter-spacing: 0.08em;
  color: var(--text-disabled);
  margin-left: 12px;
  white-space: nowrap;
}
.player-stack-status {
  font-family: var(--mono); font-size: 10px;
  font-weight: 300; letter-spacing: 0.08em;
  color: var(--accent);
  margin-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

/* === Stack routing (Section 03 Stack panel) =========================== */
.stack-routing {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--recessed);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.stack-row {
  display: flex; align-items: center; gap: 12px;
}
.stack-label {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 400;
  width: 56px; flex-shrink: 0;
}
.stack-row.inst-kick  .stack-label { color: var(--kick); }
.stack-row.inst-snare .stack-label { color: var(--snare); }
.stack-row.inst-hihat .stack-label { color: var(--hihat); }

.stack-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stack-seg-btn {
  background: transparent;
  color: var(--text-disabled);
  border: none; border-right: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-width: 32px;
}
.stack-seg-btn:last-child { border-right: none; }
.stack-seg-btn:hover { color: var(--text-secondary); }
.stack-seg-btn.active {
  background: var(--header-bar);
  color: var(--accent);
  font-weight: 500;
}
.stack-row.inst-kick  .stack-seg-btn.active { color: var(--kick); }
.stack-row.inst-snare .stack-seg-btn.active { color: var(--snare); }
.stack-row.inst-hihat .stack-seg-btn.active { color: var(--hihat); }

/* === Results ============================================================ */
.results { margin-top: 0; }
.results.hidden { display: none; }

/* === Stats grid (mixer-strip style) ===================================== */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-bottom: 16px;
  background: var(--border-faint);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius); overflow: hidden;
}
.stat {
  background: var(--nested); padding: 14px 14px;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.stat-label {
  font-size: 8px; font-weight: 400;
  color: var(--text-disabled);
  text-transform: uppercase; letter-spacing: 0.2em;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 18px; font-weight: 400;
  font-family: var(--mono);
  color: var(--text-primary); letter-spacing: -0.02em;
}
.stat-value.accent { color: var(--accent); }

/* === Save preset ======================================================== */
.save-preset-row {
  display: flex; gap: 12px; margin-top: 16px; align-items: center;
}
.save-preset-row .form-input {
  flex: 1; padding: 8px 12px;
  font-family: var(--sans); font-weight: 300;
  font-size: 12px; letter-spacing: 0.02em;
}

/* === Download bar ======================================================= */
/* One-line A/B hint below the player — fades out on first interaction. */
.ab-hint {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-disabled);
  padding: 6px 0 2px;
}
.download-bar {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
  margin-bottom: 16px; background: var(--nested);
}
.download-bar span {
  font-size: 11px; font-weight: 400; font-family: var(--mono);
  color: var(--text-disabled); letter-spacing: 0.05em;
}
.download-bar a {
  color: var(--accent); text-decoration: none;
  font-weight: 400; font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 5px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius); transition: all 0.2s;
}
.download-bar a:hover {
  background: var(--accent); color: #000;
}
/* Prominent post-apply export strip — orange primary download,
   secondary "copy template" button alongside. */
.download-bar-prominent {
  border-color: var(--accent);
  background: rgba(255, 107, 43, 0.06);
}
.download-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.download-btn-primary {
  background: var(--accent) !important;
  color: #1A1A1A !important;
  border-color: var(--accent) !important;
  font-family: var(--mono);
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7px 16px !important;
  border-radius: var(--radius);
  transition: background-color 150ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.download-btn-primary:hover {
  background: #FF8754 !important;
}
.download-btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
}
.download-btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* === A/B Player (transport bar) ========================================= */
.player {
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  margin-bottom: 16px; background: var(--nested);
}
.player.hidden { display: none; }
.player-controls {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.play-circle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-light);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  flex-shrink: 0; color: var(--text-secondary); font-size: 11px;
}
.play-circle:hover {
  border-color: var(--accent); color: var(--accent);
}
.play-circle.playing {
  border-color: var(--accent);
  background: var(--accent); color: #000;
}
.player-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-disabled); padding: 6px 12px;
  font-family: var(--sans); font-weight: 400;
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.player-btn:hover {
  border-color: var(--border-light); color: var(--text-secondary);
}
.ab-group { display: flex; margin-left: auto; gap: 0; }
.ab-btn {
  background: transparent;
  color: var(--text-disabled);
  border: 1px solid var(--border);
  padding: 6px 14px;
  font-family: var(--sans); font-weight: 400;
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.ab-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.ab-btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.ab-btn:hover { color: var(--text-secondary); border-color: var(--border-light); }
.ab-btn.active {
  background: var(--accent); color: #000;
  border-color: var(--accent);
}

/* Render audio bar */
.render-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.render-indicator {
  font-family: var(--mono); font-size: 9px;
  font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 8px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-dim);
}
.render-indicator.hidden { display: none; }

/* Oscilloscope canvas (legacy — no longer rendered into; kept for CSS
   compatibility with any stale HTML in cached pages) */
.oscilloscope {
  width: 100%; height: 40px;
  display: block; margin-bottom: 8px;
  border-radius: var(--radius);
  background: var(--recessed);
  border: 1px solid var(--border-faint);
}

/* A/B player Wavesurfer container (replaces the oscilloscope). The two
   .player-waveform divs hold one Wavesurfer instance each; the inactive
   one is hidden via inline display:none from player.js. */
.player-waveform-wrap {
  width: 100%; height: 40px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: var(--recessed);
  border: 1px solid var(--border-faint);
  overflow: hidden;
  position: relative;
}
.player-waveform { width: 100%; height: 40px; }

/* Volume control */
.volume-wrap {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.volume-icon {
  font-size: 12px; color: var(--text-disabled);
  cursor: default; user-select: none;
}
.volume-slider {
  width: 80px; height: 20px;
}

/* Active side pulse on A/B buttons */
.ab-btn.active-pulse {
  animation: side-pulse 1.5s ease-in-out infinite;
}
@keyframes side-pulse {
  0%, 100% { box-shadow: inset 3px 0 0 var(--accent); }
  50% { box-shadow: inset 3px 0 0 rgba(255,107,43,0.3); }
}

/* Active player label highlight */
.player-label.active-label {
  color: var(--accent);
}

.progress-track {
  height: 3px; background: var(--border);
  border-radius: 2px; margin-bottom: 10px;
  overflow: hidden; cursor: pointer;
}
.progress-fill {
  height: 100%; background: var(--accent);
  width: 0%; transition: none;
}
.player-footer {
  display: flex; justify-content: space-between; align-items: center;
}
.player-time {
  font-size: 11px; font-family: var(--mono);
  font-weight: 400; color: var(--text-disabled); letter-spacing: 0.02em;
}
.player-label {
  font-size: 9px; font-weight: 400;
  color: var(--text-disabled);
  text-transform: uppercase; letter-spacing: 0.15em;
}

/* === Preset library ===================================================== */
.preset-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px; background: var(--border-faint);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius); overflow: hidden;
}
.preset-card {
  background: var(--nested); padding: 14px 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.15s;
  position: relative;
  border-left: 3px solid var(--border);
}
.preset-card:hover {
  background: var(--header-bar);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.preset-card.previewing {
  border-left: 3px solid var(--accent);
}
.preset-card.previewing .preset-name::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 8px;
  vertical-align: middle;
  animation: pulse-dot 1s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.preset-name {
  font-size: 12px; font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 6px; padding-right: 20px;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; letter-spacing: 0.02em;
}
.preset-meta {
  font-size: 10px; font-weight: 400;
  color: var(--text-disabled);
  font-family: var(--mono); line-height: 1.7; letter-spacing: 0;
}
.preset-bars {
  display: flex; align-items: flex-end; gap: 2px;
  height: 16px; margin-top: 8px;
}
.preset-bars span {
  width: 3px; border-radius: 1px;
  background: var(--text-faint);
}
.preset-badge {
  display: inline-block; font-size: 8px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-disabled); margin-top: 6px;
}
.preset-delete {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border: none;
  background: transparent; color: var(--text-faint);
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s; line-height: 1; border-radius: 2px;
}
.preset-delete:hover { color: var(--error); }
.preset-use {
  position: absolute; bottom: 8px; right: 8px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text-disabled);
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.2s, border-color 0.2s;
  font-family: var(--sans);
}
.preset-use:hover { color: var(--accent); border-color: var(--accent); }
.preset-similar {
  position: absolute; bottom: 8px; right: 52px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text-disabled);
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.2s, border-color 0.2s;
  font-family: var(--sans);
}
.preset-similar:hover { color: var(--hihat); border-color: var(--hihat); }

/* --- Find Similar results panel (sections 02 + 04) --------------------- */
.similar-results-panel {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--nested);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
}
.similar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.similar-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-secondary);
}
.similar-query-name {
  color: var(--accent); font-family: var(--mono);
  text-transform: none; letter-spacing: 0;
}
.similar-close {
  background: transparent; border: none; color: var(--text-faint);
  font-size: 16px; cursor: pointer; line-height: 1;
  padding: 0 4px; border-radius: 2px;
}
.similar-close:hover { color: var(--error); }
.similar-list {
  display: flex; flex-direction: column; gap: 4px;
}
.similar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--recessed);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.similar-row:hover {
  border-color: var(--accent);
  background: var(--header-bar);
}
.similar-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  padding: 2px 6px;
  border: 1px solid;
  border-radius: var(--radius);
  min-width: 42px; text-align: center;
  letter-spacing: 0.04em;
}
.similar-name {
  font-size: 12px; color: var(--text-primary); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.similar-meta {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-disabled);
  white-space: nowrap;
}
.similar-empty {
  font-size: 11px; color: var(--text-disabled);
  padding: 8px 4px; font-style: italic;
}
.preset-export-wrap {
  position: absolute; bottom: 8px; right: 34px;
}
.preset-export-btn {
  border: 1px solid var(--border);
  background: transparent; color: var(--text-faint);
  font-size: 12px; cursor: pointer;
  padding: 2px 6px; border-radius: var(--radius);
  transition: color 0.2s, border-color 0.2s;
  font-family: var(--sans); line-height: 1;
}
.preset-export-btn:hover { color: var(--accent); border-color: var(--accent); }
.preset-export-dropdown {
  display: none; position: absolute;
  bottom: 100%; right: 0; z-index: 20;
  min-width: 130px; margin-bottom: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  overflow: hidden;
}
.preset-export-dropdown.open { display: block; }
.preset-export-item {
  padding: 6px 12px;
  font-size: 10px; font-weight: 300;
  color: var(--text-secondary);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.preset-export-item:hover {
  background: var(--accent-dim); color: var(--accent);
}
.preset-empty {
  color: var(--text-faint); font-size: 11px;
  font-weight: 300; padding: 16px 0; letter-spacing: 0.05em;
}

/* === Errors ============================================================= */
.error {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: rgba(239,68,68,0.8);
  font-size: 11px; margin-top: 12px;
  font-family: var(--mono); font-weight: 400;
  white-space: pre-wrap; max-height: 200px; overflow-y: auto;
}
.error.hidden { display: none; }

/* === Sequencer (drum machine) =========================================== */
.seq-grid {
  display: grid;
  grid-template-columns: 48px repeat(16, 1fr);
  gap: 2px; background: var(--recessed);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  overflow: hidden; margin-bottom: 16px; user-select: none;
}
.seq-label {
  background: var(--nested);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 8px;
  font-size: 9px; font-weight: 500;
  font-family: var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  border-left: 3px solid var(--border);
}
.seq-cell {
  background: var(--nested);
  aspect-ratio: 1; min-height: 36px;
  cursor: pointer; position: relative;
  transition: background 0.1s;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.seq-cell:hover { background: var(--header-bar); }
.seq-cell.beat-start { box-shadow: inset 2px 0 0 var(--border), inset 0 1px 2px rgba(0,0,0,0.3); }
.seq-cell .hit {
  position: absolute; inset: 4px;
  border-radius: 3px;
  transition: opacity 0.1s, box-shadow 0.1s;
}
.seq-header-cell {
  background: var(--nested);
  text-align: center;
  font-size: 9px; font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0; padding: 4px 0;
  font-family: var(--mono);
}
.seq-header-cell.beat-start { color: var(--text-disabled); }
.seq-controls {
  display: flex; align-items: center;
  gap: 10px; margin-bottom: 16px;
}
/* REC button */
.rec-circle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--error); font-size: 8px;
  font-family: var(--mono); font-weight: 500;
  letter-spacing: 0.08em;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.rec-circle:hover { border-color: var(--error); background: rgba(239,68,68,0.1); }
.rec-circle.armed {
  border-color: var(--error); background: var(--error); color: #000;
  animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
/* Countdown overlay */
.seq-countdown {
  position: relative; text-align: center;
  padding: 20px 0; margin-bottom: 8px;
}
.seq-countdown.hidden { display: none; }
.seq-countdown-num {
  font-family: var(--mono); font-size: 48px;
  font-weight: 500; color: var(--error);
  animation: countdown-pop 0.6s ease-out;
}
@keyframes countdown-pop {
  0% { transform: scale(1.5); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* Recording status bar */
.seq-rec-status {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; margin-bottom: 8px;
  font-size: 10px; font-weight: 400;
  color: var(--error); letter-spacing: 0.1em;
  text-transform: uppercase;
}
.seq-rec-status.hidden { display: none; }
.rec-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--error);
  animation: rec-blink 0.8s ease-in-out infinite;
}
@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
/* Cell flash during recording */
.seq-cell.rec-flash .hit {
  opacity: 1 !important;
  box-shadow: 0 0 8px rgba(239,68,68,0.5);
  transition: none;
}
/* Deviation indicator dot in cell */
.seq-cell .dev-dot {
  position: absolute; bottom: 2px; left: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%);
}
.seq-bpm {
  font-family: var(--mono);
  font-size: 12px; font-weight: 400;
  color: var(--text-disabled); letter-spacing: 0;
  white-space: nowrap;
}
.seq-header-cell.active {
  color: var(--accent); background: var(--accent-dim);
}

/* --- Recording options row --- */
.seq-rec-options {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.seq-opt-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  color: var(--text-disabled); letter-spacing: 0.12em; text-transform: uppercase;
}
.seq-opt-val {
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  color: var(--text-secondary); min-width: 28px;
}
.seq-opt-sep {
  width: 1px; height: 16px; background: var(--border-faint); margin: 0 4px;
}
.seq-slider {
  -webkit-appearance: none; appearance: none;
  width: 100px; height: 3px; background: var(--border-faint);
  border-radius: 2px; outline: none;
}
.seq-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
}
.seq-bar-toggle {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  padding: 2px 8px; border: 1px solid var(--border-faint);
  border-radius: var(--radius); background: transparent;
  color: var(--text-disabled); cursor: pointer; transition: all 0.15s;
}
.seq-bar-toggle.active {
  border-color: var(--accent); color: var(--accent); background: var(--accent-dim);
}
.seq-metro-mute {
  font-size: 12px; padding: 2px 6px; line-height: 1;
}
.seq-metro-mute.muted { opacity: 0.3; }

/* --- Visual metronome beat indicator --- */
.seq-metronome-bar {
  display: flex; justify-content: center; gap: 16px;
  padding: 8px 0; margin-bottom: 8px;
}
.seq-metronome-bar.hidden { display: none; }
.seq-beat-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--border-light); background: transparent;
  transition: background 0.08s, box-shadow 0.08s;
}
.seq-beat-dot.active {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255,107,43,0.5);
}
.seq-beat-dot.downbeat.active {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(255,107,43,0.7);
  transform: scale(1.2);
}

/* --- Key indicators during recording --- */
.seq-key-indicators {
  display: flex; justify-content: center; gap: 12px;
  padding: 8px 0; margin-bottom: 8px;
}
.seq-key-indicators.hidden { display: none; }
.seq-key-ind {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--mono); font-size: 16px; font-weight: 500;
  color: var(--text-faint); width: 44px; height: 44px;
  border: 1px solid var(--border-faint); border-radius: var(--radius);
  justify-content: center; transition: all 0.08s;
}
.seq-key-ind span {
  font-size: 7px; font-weight: 300; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint);
}
.seq-key-ind.active {
  border-color: var(--key-color);
  color: var(--key-color);
  background: color-mix(in srgb, var(--key-color) 15%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--key-color) 30%, transparent);
}

/* --- Recording results --- */
.seq-rec-results.hidden { display: none; }
.seq-rec-results-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 12px;
}
.seq-results-heading {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  color: var(--text-disabled); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 8px;
}

/* === Compare Grooves (section 08) ======================================= */
.cmp-select-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
.cmp-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  color: var(--text-disabled); letter-spacing: 0.12em; text-transform: uppercase;
}
.cmp-chips {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; min-height: 28px;
}
.cmp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius);
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  cursor: default; transition: all 0.15s;
}
.cmp-chip .cmp-chip-x {
  cursor: pointer; opacity: 0.5; font-size: 12px;
}
.cmp-chip .cmp-chip-x:hover { opacity: 1; }
.cmp-wheels {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px;
}
.cmp-wheel-card {
  background: var(--nested); border: 1px solid var(--border-faint);
  border-radius: var(--radius); padding: 12px; text-align: center; min-width: 200px;
}
.cmp-wheel-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px;
}
.cmp-chart-wrap { margin-bottom: 16px; }
.cmp-chart-wrap.hidden { display: none; }
.cmp-metrics.hidden { display: none; }
.cmp-metrics {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.cmp-metric-card {
  background: var(--nested); border: 1px solid var(--border-faint);
  border-radius: var(--radius); padding: 12px 16px; flex: 1; min-width: 180px;
}
.cmp-metric-title {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  color: var(--text-disabled); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 8px;
}
.cmp-metric-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-secondary); padding: 2px 0;
}
.cmp-metric-val {
  font-family: var(--mono); font-weight: 500; font-size: 13px;
}
.cmp-metric-bar {
  height: 3px; border-radius: 2px; background: var(--border-faint); margin-top: 4px;
}
.cmp-metric-bar-fill {
  height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.4s;
}
.cmp-hot-step {
  display: inline-block; padding: 1px 4px; border-radius: 2px; font-family: var(--mono);
  font-size: 9px; background: rgba(239,68,68,0.15); color: rgba(239,68,68,0.8);
  margin: 1px;
}
.cmp-actions.hidden { display: none; }
.cmp-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.cmp-play-btn {
  padding: 4px 12px; border-radius: var(--radius);
  border: 1px solid var(--border-light); background: transparent;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  cursor: pointer; transition: all 0.15s; color: var(--text-primary);
}
.cmp-play-btn:hover { border-color: var(--accent); color: var(--accent); }
.cmp-play-btn.playing { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.cmp-blend-btn {
  padding: 4px 12px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: transparent;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--accent); cursor: pointer; transition: all 0.15s;
}
.cmp-blend-btn:hover { background: var(--accent-dim); }

/* === Batch Process (section 09) ========================================= */
.batch-controls {
  margin-bottom: 16px;
}
.batch-ctrl-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.batch-progress.hidden { display: none; }
.batch-progress {
  margin-bottom: 16px;
}
.batch-progress-text {
  font-family: var(--mono); font-size: 11px; color: var(--text-secondary);
  margin-bottom: 4px;
}
.batch-results.hidden { display: none; }
.batch-results-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.batch-results-header span {
  font-family: var(--mono); font-size: 11px; color: var(--text-secondary);
}
.batch-results-list {
  display: flex; flex-direction: column; gap: 4px;
}
.batch-result-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; background: var(--nested);
  border: 1px solid var(--border-faint); border-radius: var(--radius);
  font-size: 11px;
}
.batch-result-name {
  font-family: var(--mono); font-weight: 400; color: var(--text-primary);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.batch-result-status {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.batch-result-status.success { color: var(--hihat); }
.batch-result-status.failed { color: var(--error); }
.batch-result-info {
  font-family: var(--mono); font-size: 9px; color: var(--text-disabled);
}
.batch-result-dl {
  font-family: var(--mono); font-size: 9px; color: var(--accent);
  text-decoration: none; cursor: pointer;
}
.batch-result-dl:hover { text-decoration: underline; }

/* === Spinner ============================================================ */
.spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 1px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-right: 8px; vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Your Kit — user-uploaded drum samples (section 03) ================= */
.kit-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  margin-bottom: 16px;
}
.kit-panel-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.kit-icon { color: var(--text-disabled); flex-shrink: 0; }
.kit-panel-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  color: var(--text-disabled); letter-spacing: 0.15em; text-transform: uppercase;
}
.kit-reset-btn {
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 9px; color: var(--text-disabled);
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 2px;
  padding: 0;
}
.kit-reset-btn:hover { color: var(--accent); }
.kit-reset-btn:disabled {
  opacity: 0.3; cursor: default; text-decoration: none;
}

.kit-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.kit-slot {
  display: flex; flex-direction: column;
  background: var(--nested);
  border: 1px dashed var(--border-faint);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 100px;
  position: relative;
}
.kit-slot:hover {
  border-color: var(--slot-color, var(--accent));
}
.kit-slot.dragging {
  border-style: solid;
  border-color: var(--slot-color, var(--accent));
  background: var(--header-bar);
}
.kit-slot.loaded {
  border-style: solid;
  border-color: var(--slot-color, var(--accent));
}
.kit-slot-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.kit-slot-label {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.15em; color: var(--slot-color, var(--text-secondary));
}
.kit-slot-state {
  font-family: var(--mono); font-size: 8px; color: var(--text-faint);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.kit-slot.loaded .kit-slot-state {
  color: var(--slot-color, var(--accent));
}
/* ▶ preview button — auditions the slot's sample via <audio>.play().
   Sits inside the <label>, so we must stop the click from bubbling up to
   the hidden <input type="file"> (that would open the OS file picker). */
.kit-slot-preview {
  appearance: none; background: transparent; border: none; cursor: pointer;
  width: 16px; height: 16px; padding: 0; margin: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--slot-color, var(--text-secondary));
  font-size: 9px; line-height: 1;
  border-radius: 2px;
  transition: opacity 0.1s, background 0.1s;
  opacity: 0.6;
}
.kit-slot-preview:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.kit-slot-preview.playing { opacity: 1; }
.kit-slot-waveform {
  display: block;
  width: 100%; height: 32px;
  background: var(--recessed);
  border-radius: 2px;
  margin-bottom: 6px;
}
.kit-slot-filename {
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  color: var(--text-disabled); letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kit-slot.loaded .kit-slot-filename {
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .kit-slots { grid-template-columns: 1fr; }
  .kit-slot { min-height: 80px; }
}

/* === Bundled MIDI picker chips ========================================== */
.demo-midi-selector {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: -8px 0 16px;
}
.demo-midi-selector.hidden { display: none; }
.demo-midi-chip {
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  padding: 4px 10px; border-radius: var(--radius);
  background: var(--nested); border: 1px solid var(--border-faint);
  color: var(--text-disabled); cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.demo-midi-chip:hover {
  border-color: var(--border-light);
  color: var(--text-secondary);
}
.demo-midi-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* === Auth pages (login / signup) ======================================== */
.auth-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-logo {
  font-family: var(--sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.06em; text-transform: none;
  color: var(--text-disabled); text-decoration: none;
  margin-bottom: 24px;
}
.auth-logo:hover { color: var(--accent); }
.auth-card {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius); padding: 20px;
  width: 100%; max-width: 360px;
}
.auth-form { display: flex; flex-direction: column; }
.auth-error {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  color: var(--error); padding: 8px 12px; border-radius: var(--radius);
  font-size: 11px; margin-bottom: 14px; letter-spacing: 0.02em;
}
.auth-notice {
  background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.25);
  color: rgba(255,255,255,0.7); padding: 10px 12px; border-radius: var(--radius);
  font-size: 11px; margin-bottom: 14px; line-height: 1.5;
}
.auth-reset-link {
  background: var(--recessed); border: 1px solid var(--border-faint);
  border-radius: var(--radius); padding: 10px; margin-bottom: 14px;
  word-break: break-all; overflow-wrap: anywhere;
}
.auth-reset-link code {
  font-family: var(--mono); font-size: 10px; color: var(--accent);
}
.auth-link-small {
  font-size: 10px; color: var(--text-disabled);
  text-decoration: none; letter-spacing: 0.05em;
}
.auth-link-small:hover { color: var(--accent); }
.auth-hint {
  margin-top: 12px; padding: 8px 10px;
  background: var(--recessed); border: 1px solid var(--border-faint);
  border-radius: var(--radius); font-size: 10px; color: var(--text-disabled);
  letter-spacing: 0.02em; line-height: 1.4;
}
.auth-footer {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-faint);
  text-align: center; font-size: 10px; color: var(--text-disabled);
  letter-spacing: 0.06em;
}
.auth-footer a { color: var(--accent); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* === Nav user indicator ================================================== */
.nav-user {
  margin-left: 12px; display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9px; font-weight: 400;
  color: var(--text-secondary); letter-spacing: 0.08em;
}
.nav-user-email { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-logout {
  color: var(--text-disabled); text-decoration: none;
  padding: 3px 8px; border-radius: var(--radius);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--border-faint);
}
.nav-logout:hover { color: var(--accent); border-color: var(--accent); }

/* === Footer ============================================================= */
.site-footer {
  margin-top: 40px; padding-top: 16px;
  border-top: 1px solid var(--border-faint);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px; font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0.15em; text-transform: uppercase;
}
.session-indicator {
  font-family: var(--mono); font-size: 8px; color: var(--hihat);
  letter-spacing: 0.1em;
}
.session-clear-btn {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--text-faint);
  letter-spacing: inherit; text-transform: inherit;
  padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.session-clear-btn:hover { color: var(--accent); }

/* === Toast notifications ================================================ */
.toast-container {
  position: fixed; top: 48px; right: 20px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 12px; font-weight: 300;
  color: var(--text-primary); letter-spacing: 0.02em;
  max-width: 360px; pointer-events: auto;
  cursor: pointer;
  transform: translateX(120%);
  transition: transform 0.3s ease;
  border-left: 3px solid var(--border);
}
.toast.show { transform: translateX(0); }
.toast.error { border-left-color: var(--error); }
.toast.success { border-left-color: var(--hihat); }

/* === Keyboard shortcuts tooltip ========================================= */
.shortcuts-hint {
  position: relative; font-size: 10px;
  font-weight: 300; color: var(--text-faint);
  letter-spacing: 0.08em; cursor: default;
}
.shortcuts-hint:hover { color: var(--text-disabled); }
.shortcuts-detail {
  display: none; position: absolute;
  bottom: 100%; right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 10px; font-weight: 300;
  color: var(--text-secondary);
  white-space: nowrap; line-height: 2;
  z-index: 10; margin-bottom: 6px;
}
.shortcuts-hint:hover .shortcuts-detail { display: block; }
.shortcuts-detail kbd {
  display: inline-block;
  background: var(--nested);
  border: 1px solid var(--border);
  border-radius: 2px; padding: 1px 5px;
  font-family: var(--mono); font-size: 9px;
  color: var(--text-secondary); margin-right: 4px;
}

/* === Version undo/redo bar ============================================== */
.version-bar {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px; padding: 8px 12px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  background: var(--nested);
}
.version-nav-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px; cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.version-nav-btn:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent);
}
.version-nav-btn:active:not(:disabled) { transform: scale(0.95); }
.version-nav-btn:disabled {
  opacity: 0.2; cursor: not-allowed;
}
.version-indicator {
  font-family: var(--mono); font-size: 11px;
  font-weight: 400; color: var(--text-disabled);
  letter-spacing: 0.05em; white-space: nowrap;
  min-width: 60px; text-align: center;
}
.version-history-wrap {
  position: relative; margin-left: auto;
}
.version-history-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-disabled);
  font-family: var(--sans); font-size: 10px;
  font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px; cursor: pointer;
  transition: all 0.15s;
}
.version-history-btn:hover {
  border-color: var(--accent); color: var(--accent);
}
.version-history-dropdown {
  display: none; position: absolute;
  bottom: 100%; right: 0;
  min-width: 280px; max-height: 240px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 20; margin-bottom: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.version-history-dropdown.open { display: block; }
.version-history-list { padding: 4px 0; }
.version-item {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 8px 14px; cursor: pointer;
  transition: background 0.15s;
}
.version-item:hover { background: var(--header-bar); }
.version-item.active {
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
}
.version-label {
  font-size: 11px; font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 180px;
}
.version-meta {
  font-family: var(--mono); font-size: 10px;
  font-weight: 300; color: var(--text-disabled);
  letter-spacing: 0; white-space: nowrap;
  margin-left: 8px;
}

/* === Chart containers =================================================== */
.chart-wrap {
  position: relative; margin: 16px 0;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  padding: 16px; background: var(--recessed);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.chart-wrap canvas { width: 100% !important; }

/* === Loop toggle button ================================================= */
.loop-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-disabled);
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
}
.loop-btn:hover { border-color: var(--accent); color: var(--accent); }
.loop-btn.active {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-dim);
}

/* === Waveform (recessed panel) ========================================== */
#waveform-wrap {
  background: var(--recessed);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
}

/* === Groove wheel ======================================================== */
#groove-wheel-wrap {
  background: var(--recessed);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 0;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
}
#groove-wheel-nav {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-disabled);
}
#groove-wheel-nav button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-disabled);
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
  margin: 0 4px;
}
#groove-wheel-nav button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
#groove-wheel-nav button.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.wheel-dot {
  animation: dot-pulse 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Swing readout sits below the groove wheel. Mirrors the BPM display
   inside the wheel: small-caps amber label, large numeric value.
   Laid out as a centered horizontal row so the label, number, and
   kind read together at a glance. */
.swing-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--mono);
}
.swing-readout-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
}
.swing-readout-value {
  font-size: 22px;
  color: rgba(255,255,255,0.87);
  font-weight: 300;
}
.swing-readout-kind {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 400;
}
.swing-readout-conf {
  font-size: 9px;
  color: var(--text-faint);
  margin-left: 6px;
}

/* Bar-pattern readout — same typography family as the swing line, with
   a row of colored blocks (one per bar) that scan left-to-right. */
.bar-pattern-readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--mono);
}
.bar-blocks {
  display: inline-flex;
  gap: 3px;
}
.bar-block {
  display: inline-block;
  width: 14px;
  height: 8px;
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.bar-pattern-text {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: lowercase;
}

/* Playback sweep line — transform-origin lets it rotate in place */
.wheel-sweep {
  pointer-events: none;
  transition: opacity 0.15s;
  /* SVG rotate is applied via `transform` attribute from JS, not CSS */
}

/* Hit pulse — when the source-audio playhead crosses an onset dot,
   it punches up to 2× size with a bright radial halo in the instrument's
   color, holds for ~200ms, then fades back over ~300ms (500ms total).
   Per-instrument @keyframes so each voice gets its tuned halo color;
   SVG <circle> doesn't honor box-shadow, so we approximate the
   "spread" of box-shadow by stacking two drop-shadows: a bright core
   (4px blur) layered over a wider halo (12px blur). */
.wheel-dot.hit-pulse {
  animation: wheel-hit-pulse 500ms ease-out;
}
.wheel-dot.wheel-dot-kick.hit-pulse {
  animation: wheel-hit-pulse-kick 500ms ease-out;
}
.wheel-dot.wheel-dot-snare.hit-pulse {
  animation: wheel-hit-pulse-snare 500ms ease-out;
}
.wheel-dot.wheel-dot-hihat.hit-pulse {
  animation: wheel-hit-pulse-hihat 500ms ease-out;
}
/* Generic fallback (e.g. "combined" hits when template lacks per-instrument) */
@keyframes wheel-hit-pulse {
  0%   { transform: scale(1);   opacity: 0.85; filter: none; }
  10%  { transform: scale(2);   opacity: 1;
         filter: drop-shadow(0 0 4px var(--dot-color, #fff))
                 drop-shadow(0 0 12px var(--dot-color, #fff)); }
  40%  { transform: scale(2);   opacity: 1;
         filter: drop-shadow(0 0 4px var(--dot-color, #fff))
                 drop-shadow(0 0 12px var(--dot-color, #fff)); }
  100% { transform: scale(1);   opacity: 0.85; filter: none; }
}
@keyframes wheel-hit-pulse-kick {
  0%   { transform: scale(1); opacity: 0.85; filter: none; }
  10%  { transform: scale(2); opacity: 1;
         filter: drop-shadow(0 0 4px rgba(224,108,69,0.9))
                 drop-shadow(0 0 12px rgba(224,108,69,0.8)); }
  40%  { transform: scale(2); opacity: 1;
         filter: drop-shadow(0 0 4px rgba(224,108,69,0.9))
                 drop-shadow(0 0 12px rgba(224,108,69,0.8)); }
  100% { transform: scale(1); opacity: 0.85; filter: none; }
}
@keyframes wheel-hit-pulse-snare {
  0%   { transform: scale(1); opacity: 0.85; filter: none; }
  10%  { transform: scale(2); opacity: 1;
         filter: drop-shadow(0 0 4px rgba(96,165,250,0.9))
                 drop-shadow(0 0 12px rgba(96,165,250,0.8)); }
  40%  { transform: scale(2); opacity: 1;
         filter: drop-shadow(0 0 4px rgba(96,165,250,0.9))
                 drop-shadow(0 0 12px rgba(96,165,250,0.8)); }
  100% { transform: scale(1); opacity: 0.85; filter: none; }
}
@keyframes wheel-hit-pulse-hihat {
  0%   { transform: scale(1); opacity: 0.85; filter: none; }
  10%  { transform: scale(2); opacity: 1;
         filter: drop-shadow(0 0 4px rgba(52,211,153,0.9))
                 drop-shadow(0 0 12px rgba(52,211,153,0.8)); }
  40%  { transform: scale(2); opacity: 1;
         filter: drop-shadow(0 0 4px rgba(52,211,153,0.9))
                 drop-shadow(0 0 12px rgba(52,211,153,0.8)); }
  100% { transform: scale(1); opacity: 0.85; filter: none; }
}

/* === Preset tags and filter pills ======================================= */
.tag-pill {
  display: inline-block;
  font-size: 8px; font-weight: 400;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 2px;
  cursor: default;
  white-space: nowrap;
}
.tag-genre {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(255,107,43,0.2);
}
.tag-era {
  background: transparent;
  color: var(--text-disabled);
  border: 1px solid var(--border);
}
.tag-vibe {
  background: transparent;
  color: var(--text-faint);
  border: 1px solid var(--border-faint);
  font-size: 7px; padding: 1px 5px;
}
/* Vibe selector pills (in save form and filter bar) */
.vibe-pill {
  display: inline-block;
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-disabled);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.vibe-pill:hover {
  border-color: var(--border-light);
  color: var(--text-secondary);
}
.vibe-pill.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.preset-tags {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 6px;
}

/* === DAW export dropdown ================================================ */
.daw-export-wrap {
  position: relative; display: inline-block;
}
.daw-export-dropdown {
  display: none; position: absolute;
  top: 100%; left: 0; z-index: 20;
  min-width: 180px; margin-top: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  overflow: hidden;
}
.daw-export-dropdown.open { display: block; }
.daw-export-item {
  padding: 8px 14px;
  font-size: 11px; font-weight: 300;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.02em;
}
.daw-export-item:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

/* === Record collection (Discogs) ======================================== */
.record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px; background: var(--border-faint);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius); overflow: hidden;
  max-height: 420px; overflow-y: auto;
}
.record-card {
  background: var(--nested);
  cursor: pointer; position: relative;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.record-card:hover {
  background: var(--header-bar);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.record-thumb {
  width: 100%; aspect-ratio: 1;
  background-size: cover; background-position: center;
  background-color: var(--recessed);
  position: relative;
}
.record-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7) 100%);
}
.record-thumb-empty::before {
  content: '\266B'; position: absolute;
  inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--text-faint);
}
.record-info {
  padding: 8px 10px 10px;
}
.record-artist {
  font-size: 10px; font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; letter-spacing: 0.02em;
}
.record-title {
  font-size: 11px; font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-bottom: 2px;
}

/* Tracklist */
.track-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: 11px;
}
.track-row:last-child { border-bottom: none; }
.track-pos {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-disabled); min-width: 24px;
  letter-spacing: 0.05em;
}
.track-name {
  flex: 1; color: var(--text-primary);
  font-weight: 300; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.track-dur {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-disabled); white-space: nowrap;
}
.track-extract-btn {
  flex-shrink: 0; opacity: 0;
  transition: opacity 0.15s;
}
.track-row:hover .track-extract-btn { opacity: 1; }

/* === Mobile drum pads ==================================================== */
.mobile-pads {
  display: none;  /* shown only on mobile during recording */
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  gap: 4px; padding: 8px; background: var(--nested);
  border-top: 1px solid var(--border);
}
.mobile-pads.hidden { display: none !important; }
.mobile-pads.visible {
  display: flex !important;
}
.mobile-pad {
  flex: 1; min-height: 72px;
  border: 2px solid var(--pad-color);
  border-radius: 8px; background: transparent;
  color: var(--pad-color);
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.06s, transform 0.06s;
  touch-action: manipulation;
  user-select: none;
}
.mobile-pad:active, .mobile-pad.active {
  background: color-mix(in srgb, var(--pad-color) 25%, transparent);
  transform: scale(0.97);
}

/* === Responsive ========================================================= */

/* --- Tablet (768px) --- */
@media (max-width: 768px) {
  .container { padding: 48px 12px 80px; }
  .section { padding: 14px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .preset-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .player-controls { flex-wrap: wrap; }
  .ab-group { margin-left: 0; }
  .cmp-wheels { flex-direction: column; align-items: center; }
  .cmp-rec-results-grid,
  .seq-rec-results-grid { grid-template-columns: 1fr; }
  .cmp-metrics { flex-direction: column; }
  .cmp-select-row { flex-direction: column; align-items: stretch; }
  .batch-ctrl-row { flex-direction: column; align-items: stretch; }
  .seq-rec-options { flex-wrap: wrap; }

  /* Sequencer grid: horizontally scrollable */
  .seq-grid {
    grid-template-columns: 36px repeat(16, minmax(28px, 1fr));
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .seq-cell { min-height: 28px; scroll-snap-align: start; }
  .seq-controls { flex-wrap: wrap; gap: 6px; }
}

/* --- Phone (480px) --- */
@media (max-width: 480px) {
  .container { padding: 44px 8px 100px; }
  .section { padding: 10px; margin-bottom: 10px; }
  .section-num { font-size: 10px; padding: 6px 10px; }

  /* Nav: horizontal scroll instead of wrapping */
  .top-nav { padding: 0 8px; height: 36px; }
  .top-nav .nav-logo { font-size: 8px; letter-spacing: 0.2em; }
  .top-nav .nav-links { overflow-x: auto; gap: 1px; -webkit-overflow-scrolling: touch; }
  .top-nav .nav-dot { width: 24px; height: 24px; font-size: 8px; flex-shrink: 0; }
  .top-nav .nav-status { margin-left: 6px; width: 5px; height: 5px; }

  /* Forms */
  .form-grid { grid-template-columns: 1fr; gap: 8px; }
  .form-input { font-size: 14px; padding: 8px; min-height: 44px; }
  .form-label { font-size: 9px; }

  /* Stats */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 8px 6px; }
  .stat-value { font-size: 14px; }
  .stat-label { font-size: 7px; }

  /* Player */
  .player-controls { flex-direction: column; align-items: stretch; gap: 6px; }
  .ab-group { margin-left: 0; justify-content: center; }
  .play-circle { width: 44px; height: 44px; }
  .player-btn { min-height: 36px; }

  /* Presets: single column */
  .preset-grid { grid-template-columns: 1fr; }
  .preset-card { padding: 10px; }

  /* File drop zones: taller for touch */
  .file-drop { padding: 20px 12px; min-height: 60px; }
  .file-drop-label { font-size: 11px; }

  /* Sequencer grid: smaller cells */
  .seq-grid {
    grid-template-columns: 30px repeat(16, minmax(22px, 1fr));
    gap: 1px;
  }
  .seq-cell { min-height: 22px; }
  .seq-label { font-size: 7px; padding: 0 4px; }
  .seq-header-cell { font-size: 7px; padding: 2px 0; }
  .seq-controls { gap: 4px; }
  .rec-circle { width: 32px; height: 32px; font-size: 7px; }
  .play-circle { font-size: 12px; }
  .seq-bpm { font-size: 10px; }

  /* Recording options */
  .seq-rec-options { gap: 6px; }
  .seq-slider { width: 80px; }
  .seq-opt-val { font-size: 10px; }

  /* Groove wheel: scale down */
  .cmp-wheel-card { min-width: auto; padding: 8px; }

  /* Charts: fluid height */
  .chart-wrap canvas { max-height: 160px; }

  /* Compare section */
  .cmp-wheels { gap: 8px; }
  .cmp-chip { font-size: 9px; padding: 3px 6px; }
  .cmp-actions { flex-direction: column; }
  .cmp-play-btn, .cmp-blend-btn { width: 100%; text-align: center; min-height: 36px; }

  /* Batch process */
  .batch-result-row { flex-wrap: wrap; gap: 4px; padding: 8px; }
  .batch-result-name { min-width: 100%; }

  /* Footer */
  .site-footer { flex-wrap: wrap; gap: 4px; justify-content: center; text-align: center; }

  /* Keyboard indicators: hide on phone, show pads instead */
  .seq-key-indicators { display: none !important; }

  /* Ghost buttons: larger tap targets */
  .ghost-btn, .ghost-btn-sm { min-height: 36px; padding: 6px 12px; }

  /* Sliders: larger thumb for touch */
  .seq-slider::-webkit-slider-thumb { width: 18px; height: 18px; }

  /* Waveform: reduce height */
  #waveform-wrap { max-height: 100px; }
}

/* --- Small phone (375px) --- */
@media (max-width: 375px) {
  .container { padding: 40px 6px 100px; }
  .section { padding: 8px; }
  .seq-grid { grid-template-columns: 24px repeat(16, minmax(18px, 1fr)); }
  .seq-cell { min-height: 18px; }
  .preset-card .preset-meta { font-size: 9px; }
  .top-nav .nav-logo { display: none; }
}

/* ===========================================================================
   Section 10 — AI Groove Tools (v2 VAE)
   =========================================================================== */
.vae-status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  color: var(--text-secondary); letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.vae-status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint);
}
.vae-status-ok   { background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,0.5); }
.vae-status-off  { background: var(--text-faint); }
.vae-status-err  { background: #E06C45; }
.vae-status-check { background: var(--accent); animation: vae-pulse 1.2s infinite; }
@keyframes vae-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1.0; }
}

.vae-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.vae-panel {
  background: var(--nested);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
}
.vae-panel-head {
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 12px;
}
.vae-form {
  display: flex; flex-direction: column; gap: 10px;
}
.vae-label {
  display: grid; grid-template-columns: 64px 1fr auto;
  align-items: center; gap: 10px;
  font-size: 11px; font-weight: 300;
  color: var(--text-secondary); letter-spacing: 0.04em;
}
.vae-label-wide { grid-template-columns: 64px 1fr auto; }
.vae-input { height: 28px; padding: 4px 8px; font-size: 11px; }
.vae-slider {
  -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--recessed);
  border-radius: 2px; outline: none;
}
.vae-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  box-shadow: 0 0 4px rgba(255,107,43,0.4);
}
.vae-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: none; cursor: pointer;
}
.vae-slider-val {
  font-family: var(--mono); font-size: 10px;
  color: var(--accent); min-width: 72px; text-align: right;
}

.vae-btn {
  margin-top: 4px; height: 32px;
  background: var(--accent); color: #000;
  border: none; border-radius: var(--radius);
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; transition: all 0.15s;
}
.vae-btn:hover { background: #ff7e47; box-shadow: 0 0 12px rgba(255,107,43,0.35); }
.vae-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.vae-interp-status {
  font-family: var(--mono); font-size: 10px; font-weight: 300;
  color: var(--text-secondary); min-height: 14px;
  letter-spacing: 0.05em;
}

.vae-player {
  background: var(--recessed);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.vae-player-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.vae-play-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #000;
  border: none; cursor: pointer;
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.vae-play-btn.playing { background: #ff7e47; box-shadow: 0 0 10px rgba(255,107,43,0.5); }
.vae-ab-group { display: flex; gap: 4px; }
.vae-ab {
  padding: 6px 12px; font-family: var(--mono); font-size: 10px;
  font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; color: var(--text-disabled);
  border: 1px solid var(--border-faint); border-radius: var(--radius);
  cursor: pointer; transition: all 0.15s;
}
.vae-ab.active {
  background: var(--accent); color: #000; border-color: var(--accent);
}
.vae-ab:not(.active):hover { color: var(--text-secondary); }
.vae-player-label {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  color: var(--text-faint); letter-spacing: 0.05em;
}
.vae-wave { width: 100%; height: 60px; }

@media (max-width: 768px) {
  .vae-panels { grid-template-columns: 1fr; }
  .vae-label { grid-template-columns: 56px 1fr auto; }
}

/* Groove Library pagination — keeps the 647-preset gm_ corpus from
   rendering as one 32k-px tall wall that reads as blank space on
   the way to Section 06. */
.preset-showmore-bar {
  display: flex; justify-content: center;
  padding: 20px 0 8px;
}

/* Similarity method badge (Section 04 "Find Similar" results).
   Tiny pill next to the query name telling the user whether the
   ranking came from VAE latent similarity ("AI") or the original
   handcrafted fingerprint. Low-key styling — meant to inform, not
   distract. */
.similar-method {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid var(--border-faint);
  color: var(--text-disabled);
  vertical-align: middle;
}
.similar-method-latent {
  color: var(--accent);
  border-color: rgba(255, 107, 43, 0.35);
  background: rgba(255, 107, 43, 0.06);
}

/* Fine-class breakdown (Section 02). Populated by extract.js
   whenever the template carries 20-class classifier data. */
.fine-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 300;
}
.fine-breakdown:empty { display: none; }
.fine-row {
  display: grid;
  grid-template-columns: 8px 60px 1fr;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.fine-dot {
  width: 8px; height: 8px; border-radius: 50%;
  opacity: 0.9;
}
.fine-label {
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.fine-detail {
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* =====================================================================
   SIGNAL-FLOW REDESIGN — STEP 1 LAYOUT ONLY
   Adds the new top bar, three-column workspace, DETAILS toggle, and
   mobile fallback. Existing styles above are untouched so every
   interactive widget (kit panel, player, charts, etc.) keeps its look.
   ===================================================================== */

/* --- Top bar (replaces the old .top-nav visually; old .top-nav tag
       is gone from the HTML in this step but kept here in case any
       other view imports the stylesheet). -------------------------- */
.top-bar {
  position: sticky; top: 0; z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 10px 24px;
  height: 52px;
  background: rgba(26, 26, 26, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.top-bar-left {
  display: flex; align-items: center; gap: 10px;
  justify-self: start;
}
.top-bar-mark {
  color: var(--accent);
  font-size: 20px; line-height: 1;
}
.top-bar-brand {
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.35em;
  color: var(--text-primary);
}
.top-bar-tabs {
  display: flex; align-items: center; gap: 2px;
  justify-self: center;
}
.top-bar-tab {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.22em;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: var(--radius);
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  border-bottom: 2px solid transparent;
}
.top-bar-tab:hover:not(.is-disabled):not(:disabled) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.top-bar-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.top-bar-tab.is-disabled,
.top-bar-tab:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
}
.top-bar-right {
  display: flex; align-items: center; gap: 14px;
  justify-self: end;
}
.top-bar-status {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-disabled);
  opacity: 0.6;
}
.top-bar-status-live { background: #34D399; box-shadow: 0 0 8px rgba(52,211,153,0.55); }

.top-export-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--accent);
  color: #1A1A1A;
  border: none; border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.top-export-btn:hover { background: #FF854D; }
.top-export-btn:active { transform: translateY(1px); }
.top-export-icon { font-size: 10px; }

/* --- Legacy nav anchors: kept in DOM, hidden visually. ----------- */
.legacy-nav-anchors { display: none !important; }

/* --- Container tweak for the signal-flow layout. The original
       .container capped at 920px; the new layout needs more breathing
       room for three columns. -------------------------------------- */
.container.container-signal-flow {
  max-width: 1440px;
  padding: 20px 28px 80px;
}

/* --- Workspace: 35 / 25 / 40 three-column grid. ------------------ */
.workspace {
  display: grid;
  grid-template-columns: 35% 25% 40%;
  gap: 20px;
  margin-top: 8px;
  align-items: start;
}
.workspace .col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 22px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  min-height: 560px;
}
.workspace .col-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-faint);
}
.col-head-label {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--accent);
  text-transform: uppercase;
}
.col-head-hint {
  font-family: var(--mono);
  font-size: 9px; font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--text-disabled);
  text-transform: uppercase;
}

/* Remove the default `.section` padding/border on elements that are
   now the workspace columns (they already supply their own chrome). */
.workspace .col.section,
.workspace .col[id] { background: var(--panel); }

/* --- Compact file-drop for the column context. ------------------- */
.file-drop-compact {
  padding: 18px 20px;
  margin-bottom: 0;
}
.file-drop-compact .file-drop-label { font-size: 11px; }
.file-drop-compact small { font-size: 9px; }

/* --- A/B toggle standalone (outside the player). ----------------- */
.ab-standalone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--recessed);
  border-radius: var(--radius);
  border: 1px solid var(--border-faint);
}
.ab-standalone .ab-btn {
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 10px;
  letter-spacing: 0.22em;
}

/* --- Piano roll placeholder. ------------------------------------- */
.piano-roll-placeholder {
  position: relative;
  height: 160px;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.04) 0 1px,
      transparent 1px calc(100% / 16)
    ),
    linear-gradient(180deg, var(--recessed) 0%, #131313 100%);
  border: 1px solid var(--border-faint);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.piano-roll-placeholder-grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 107, 43, 0.04) 0 1px,
      transparent 1px 20px
    );
  opacity: 0.6;
  pointer-events: none;
}
.piano-roll-placeholder-text {
  font-family: var(--mono);
  font-size: 10px; font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  text-transform: uppercase;
  z-index: 1;
}

/* Player variant for the narrow left column. ---------------------- */
.player-compact { padding: 12px 14px; }
.player-compact .player-waveform { height: 42px; }

/* --- Change MIDI button — styled label that opens the file dialog. */
.change-midi-btn {
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  margin-top: auto;
}
.change-midi-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255,107,43,0.05);
}

/* --- Auto-apply indicator. --------------------------------------- */
.auto-apply-indicator {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  margin-top: 4px;
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.20);
  border-radius: var(--radius);
}
.auto-apply-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 6px rgba(52,211,153,0.6);
  animation: auto-apply-pulse 2s ease-in-out infinite;
}
@keyframes auto-apply-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.auto-apply-text {
  font-family: var(--mono);
  font-size: 10px; font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--hihat);
  text-transform: uppercase;
}

/* --- Compact form grid for the GROOVE column. -------------------- */
.form-grid-compact {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
}

/* --- Stats strip: horizontal row of small stat cards. ------------ */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.stats-strip .stat {
  flex: 1 1 auto;
  min-width: 72px;
  padding: 8px 10px;
  background: var(--recessed);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
}

/* --- Browse Library button inline with waveform controls. -------- */
.browse-library-btn {
  margin-left: auto;
  letter-spacing: 0.18em !important;
}

/* --- DETAILS collapsible. ---------------------------------------- */
.details-section {
  margin-top: 22px;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  background: var(--nested);
}
.details-section > summary.details-toggle {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  user-select: none;
  transition: background 0.15s;
}
.details-section > summary.details-toggle::-webkit-details-marker { display: none; }
.details-section > summary.details-toggle:hover { background: rgba(255,255,255,0.02); }
.details-arrow {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-disabled);
  transition: transform 0.15s;
  display: inline-block;
}
.details-section[open] .details-arrow { transform: rotate(90deg); }
.details-label {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--text-primary);
  text-transform: uppercase;
}
.details-hint {
  font-family: var(--mono);
  font-size: 9px; font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--text-disabled);
  margin-left: auto;
}
.details-content {
  padding: 18px 20px 22px;
  border-top: 1px solid var(--border-faint);
  display: flex; flex-direction: column; gap: 14px;
}

/* --- Hide the step-1 parked-away chunks. ------------------------- */
.hidden-step1 { display: none !important; }

/* --- Mobile breakpoint: stack the three columns vertically. ------ */
@media (max-width: 768px) {
  .top-bar {
    grid-template-columns: auto 1fr auto;
    padding: 8px 14px;
    gap: 12px;
  }
  .top-bar-brand { font-size: 11px; letter-spacing: 0.25em; }
  .top-bar-tabs { gap: 0; overflow-x: auto; }
  .top-bar-tab { padding: 6px 10px; font-size: 10px; letter-spacing: 0.15em; }
  .top-export-btn {
    padding: 6px 10px;
    font-size: 10px; letter-spacing: 0.12em;
  }
  .container.container-signal-flow { padding: 12px 14px 60px; }
  .workspace {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .workspace .col { min-height: 0; padding: 14px 16px 18px; }
  .piano-roll-placeholder { height: 120px; }
}

/* =====================================================================
   MPC HOME — STEP 1 LAYOUT (supersedes signal-flow CSS appended earlier)
   Everything above this marker is left intact so other views that still
   import this stylesheet (e.g. diagnostics, shared components) keep
   their looks. The rules below replace the active /app layout.
   ===================================================================== */

/* Body wrapper class so we can scope overrides without fighting
   cascade with earlier .container-signal-flow rules. */
body.body-mpc { background: #080808; }

/* Reset earlier signal-flow workspace (we're no longer rendering it). */
body.body-mpc .workspace,
body.body-mpc .container-signal-flow { display: revert; }

.container.container-mpc {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 20px 80px;
  position: relative;
  z-index: 1;
}

/* ---- Top bar MPC variant ------------------------------------------- */
.top-bar.top-bar-mpc {
  position: sticky; top: 0; z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
  height: 56px;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.top-bar-mpc .top-bar-left {
  display: flex; align-items: center; gap: 10px;
  justify-self: start;
}
.top-bar-mpc .brand-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFAA7A, #FF8C50 45%, #8A3911 100%);
  box-shadow: 0 0 10px rgba(255, 140, 80, 0.4);
}
.top-bar-mpc .brand-name {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em;
  color: #F5F0E8;
  white-space: nowrap;
}

.top-bar-mpc .top-bar-transport {
  display: flex; align-items: center; gap: 14px;
  justify-self: center;
}
.transport-play {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, #1F1E1C 0%, #141312 100%);
  color: #F5F0E8;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.transport-play:hover { border-color: rgba(255,140,80,0.55); color: #FF8C50; }
.transport-play:active { transform: translateY(1px); }
.transport-play-glyph { font-size: 13px; margin-left: 2px; }

.transport-meta {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--mono);
}
.transport-bpm {
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.12em;
  color: #F5F0E8;
}
.transport-time {
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(245,240,232,0.55);
}
.transport-bars {
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.32);
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
}

.top-bar-mpc .top-bar-right {
  display: flex; align-items: center; gap: 10px;
  justify-self: end;
}
.top-bar-mpc .top-bar-status {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  margin-right: 4px;
}
.top-bar-mpc .top-bar-status-live {
  background: #34D399;
  box-shadow: 0 0 7px rgba(52,211,153,0.55);
}
.top-save-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(245,240,232,0.72);
  padding: 7px 14px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.top-save-btn:hover { color: #FF8C50; border-color: rgba(255,140,80,0.4); }

.top-bar-mpc .top-export-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #FF9C5F 0%, #FF7A3C 100%);
  color: #1A0A03;
  border: none; border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 140, 80, 0.22), inset 0 1px 0 rgba(255,255,255,0.24);
  transition: filter 0.15s, transform 0.1s;
}
.top-bar-mpc .top-export-btn:hover { filter: brightness(1.06); }
.top-bar-mpc .top-export-btn:active { transform: translateY(1px); }
.top-bar-mpc .top-export-icon { font-size: 11px; }

/* ---- Workspace: two columns --------------------------------------- */
.workspace-mpc {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  margin-top: 16px;
  align-items: stretch;
}

/* Shared card chrome. Explicit solid backgrounds + stronger border so
   the two panels read as distinct cards on the page body, and min-width
   prevents narrow viewports collapsing the sequencer cells to zero. */
.mpc-card, .apply-card {
  background: #141416;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 6px;
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.mpc-card { min-width: 640px; }
.apply-card { min-width: 300px; }

/* ---- MPC card ----------------------------------------------------- */
.mpc-card {
  gap: 14px;
  min-height: 460px;
}
.mpc-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
}
.mpc-header-left {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.mpc-kicker {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(245,240,232,0.52);
  text-transform: uppercase;
}
.mpc-filename {
  font-family: var(--mono);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.02em;
  color: #F5F0E8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* A/B pill */
.mpc-ab-pill {
  display: inline-flex;
  padding: 3px;
  background: #0C0C0D;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 40px;
  gap: 2px;
}
.mpc-ab-btn {
  background: transparent;
  border: none;
  color: rgba(245,240,232,0.5);
  padding: 7px 18px;
  border-radius: 40px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.mpc-ab-btn:hover { color: rgba(245,240,232,0.85); }
.mpc-ab-btn.is-active {
  color: #1A0A03;
  background: linear-gradient(180deg, #FF9C5F 0%, #FF7A3C 100%);
  box-shadow: 0 2px 8px rgba(255,140,80,0.25);
}

/* View toggle (GRID / PIANO ROLL) */
.mpc-view-toggle {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.mpc-view-btn {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.06);
  color: rgba(245,240,232,0.5);
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.mpc-view-btn:first-child { border-left: none; }
.mpc-view-btn:hover:not(:disabled) { color: #F5F0E8; background: rgba(255,255,255,0.03); }
.mpc-view-btn.is-active {
  color: #FF8C50;
  background: rgba(255,140,80,0.06);
}
.mpc-view-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* MPC body: pads + sequencer rows side-by-side. */
.mpc-body {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 12px;
  align-items: start;
}

/* Piano-roll view — canvas-backed horizontal timeline. Lives in the
   same grid cell as .mpc-seq (column 2); the view-toggle flips which
   one is visible. Dimensions mirror the sequencer's 4-lane × N-bar
   footprint so the A/B view-toggle feels like a sibling, not a modal. */
.mpc-piano-roll {
  display: none;
  grid-column: 2;
  width: 100%;
  /* Height covers 4 lanes × 44px + 22px for the beat-label strip at
     the bottom. mpc.js sets the canvas's own width/height to match
     so drawing stays pixel-accurate. */
  height: 198px;
  background: #1B1B1D;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 3px;
  overflow: hidden;
}
.mpc-piano-roll canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* When the MPC card is in piano-roll mode: show the canvas, hide the
   16-cell grid + its bar-pill strip. Pads column stays visible — the
   instrument labels inside the canvas align to the same rows anyway. */
.mpc-card.view-roll .mpc-seq { display: none; }
.mpc-card.view-roll .mpc-piano-roll { display: block; }
.mpc-pads {
  display: grid;
  /* Row count is dynamic — mpc.js paints one pad per visible lane.
     The card exposes --seq-row-h so pads stay the same height as the
     sequencer rows they live beside. */
  grid-auto-rows: var(--seq-row-h, 42px);
  gap: 6px;
}
.mpc-pad {
  position: relative;
  height: var(--seq-row-h, 42px);
  width: 100px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  /* Stronger gradient + brighter highlight so the pad shape reads as a
     chunky drum pad even when it's not the active (orange) one. */
  background: linear-gradient(180deg, #2F2D2A 0%, #1A1917 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 4px rgba(0,0,0,0.55),
    0 2px 4px rgba(0,0,0,0.5);
  color: #E8E2D6;
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em;
  cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 6px;
  transition: transform 0.08s, box-shadow 0.15s, border-color 0.15s;
}
.mpc-pad:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -2px 4px rgba(0,0,0,0.55),
    0 3px 8px rgba(0,0,0,0.55);
}
.mpc-pad:active { transform: translateY(1px); }
.mpc-pad-dot {
  position: absolute;
  top: 6px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(52,211,153,0.85);
  box-shadow: 0 0 6px rgba(52,211,153,0.45);
}
.mpc-pad-empty .mpc-pad-dot {
  background: rgba(255,255,255,0.10);
  box-shadow: none;
}
.mpc-pad.is-active {
  background: linear-gradient(180deg, #FF9C5F 0%, #D96B30 100%);
  color: #1A0A03;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    0 2px 10px rgba(255, 140, 80, 0.35);
}
.mpc-pad.is-active .mpc-pad-dot {
  background: #1A0A03;
  box-shadow: none;
}
/* Brief flash when a pad is clicked — mpc.js adds .is-playing for 150ms
   so the click reads visually even if the sample is quiet. */
.mpc-pad.is-playing {
  background: linear-gradient(180deg, #FFB98A 0%, #FF8242 100%);
  color: #1A0A03;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    0 0 16px rgba(255,140,80,0.55);
}
.mpc-pad.is-playing .mpc-pad-dot { background: #1A0A03; box-shadow: none; }

/* Sequencer rows — 16 step cells per row.
   Row count is dynamic (mpc.js paints one row per instrument the
   loaded MIDI uses) so we use grid-auto-rows plus an explicit row for
   the beat-labels / bar-pills strip at the end. --seq-row-h is set on
   .mpc-seq by mpc.js: 42px for ≤6 rows, shrinks proportionally when
   the MIDI uses more lanes so the grid stays in one viewport without
   scrolling. */
.mpc-seq {
  display: grid;
  grid-auto-rows: auto;
  gap: 6px;
}
.mpc-seq-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  height: var(--seq-row-h, 42px);
}
/* Kit has no sample for this lane — the row still shows so the user
   sees which instruments are in the MIDI, but dims to signal silent. */
.mpc-seq-row.is-muted,
.mpc-pad.is-muted {
  opacity: 0.3;
}
.mpc-cell {
  display: block;
  width: 100%; height: 100%;
  border-radius: 2px;
  /* Empty-cell base: dark recessed tile with a clear border so every
     one of the 16 positions reads as a cell even when unhit. The prior
     0.04 opacity blended into the panel and made the CLAP row + the
     empty positions on kick / snare rows look missing. */
  background: #1B1B1D;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s, border-color 0.12s, transform 0.08s;
}
.mpc-cell:hover {
  background: #26262A;
  border-color: rgba(255, 255, 255, 0.18);
}
.mpc-cell:active { transform: scale(0.95); }
/* Emphasize each beat (every 4th cell) with a brighter left edge */
.mpc-seq-row .mpc-cell:nth-child(4n + 1) {
  border-left: 2px solid rgba(255, 140, 80, 0.32);
}
.mpc-seq-kick .mpc-cell.is-hit {
  background: linear-gradient(180deg, #FF9C5F 0%, #E07A3E 100%);
  box-shadow: 0 0 12px rgba(255, 140, 80, 0.35);
  border-color: rgba(255, 140, 80, 0.55);
}
.mpc-seq-snare .mpc-cell.is-hit {
  background: linear-gradient(180deg, #7DB6F0 0%, #4F86C6 100%);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.35);
  border-color: rgba(96, 165, 250, 0.55);
}
.mpc-seq-hihat .mpc-cell.is-hit,
.mpc-seq-closed_hihat .mpc-cell.is-hit {
  background: linear-gradient(180deg, #5FDBA1 0%, #2BA374 100%);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.28);
  border-color: rgba(52, 211, 153, 0.45);
}
.mpc-seq-hihat .mpc-cell.is-hit-dim,
.mpc-seq-closed_hihat .mpc-cell.is-hit-dim {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.20);
}
.mpc-seq-cymbal .mpc-cell.is-hit {
  background: linear-gradient(180deg, #FCD34D 0%, #E0A92A 100%);
  border-color: rgba(252, 211, 77, 0.45);
}
.mpc-seq-clap .mpc-cell.is-hit {
  background: linear-gradient(180deg, #9E9E9E 0%, #6E6E6E 100%);
  border-color: rgba(180, 180, 180, 0.45);
}
/* New lanes — non-mono fallback colors. In body-mono the unified
   white+--vel selector below overrides these; these matter only if
   non-mono is ever re-enabled. */
.mpc-seq-open_hihat .mpc-cell.is-hit {
  background: linear-gradient(180deg, #87EFC4 0%, #34D399 100%);
  border-color: rgba(134, 239, 196, 0.45);
}
.mpc-seq-perc .mpc-cell.is-hit {
  background: linear-gradient(180deg, #F472B6 0%, #BE4F8C 100%);
  border-color: rgba(244, 114, 182, 0.45);
}
.mpc-seq-tom .mpc-cell.is-hit {
  background: linear-gradient(180deg, #A78BFA 0%, #7760D4 100%);
  border-color: rgba(167, 139, 250, 0.45);
}
.mpc-seq-ride .mpc-cell.is-hit {
  background: linear-gradient(180deg, #FBBF24 0%, #C48B08 100%);
  border-color: rgba(251, 191, 36, 0.45);
}
.mpc-seq-crash .mpc-cell.is-hit {
  background: linear-gradient(180deg, #FCD34D 0%, #E0A92A 100%);
  border-color: rgba(252, 211, 77, 0.45);
}
.mpc-seq-rim .mpc-cell.is-hit {
  background: linear-gradient(180deg, #E5D3B3 0%, #B89A6E 100%);
  border-color: rgba(229, 211, 179, 0.45);
}

/* Humanized mode — hits carry a --shift-x offset (set by mpc.js) so the
   timing deviation reads visually inside the 16-cell grid. The cell
   itself keeps its grid slot; we slide a ::before fill inside it so
   neighbor cells don't have to move. */
.mpc-cell.is-shifted {
  position: relative;
  overflow: hidden;
}
.mpc-cell.is-shifted::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: inherit;
  border-radius: inherit;
  transform: translateX(var(--shift-x, 0px));
  pointer-events: none;
}
/* The ::before inherits the gradient; we also hint the shift direction
   with a tiny accent border on the leading edge. */
.mpc-cell.is-shifted[style*="--shift-x: -"]::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.mpc-cell.is-shifted:not([style*="--shift-x: -"])::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* A/B pill — B is disabled until an Apply has produced a humanized MIDI. */
.mpc-ab-btn.is-disabled,
.mpc-ab-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Step-1 hide helper — surgically removes Section 06 (Pattern Editor) now
   that the MPC grid replaces it. Kept as a class (not a deletion) so the
   old section can be re-enabled for debugging without a git revert. */
.hidden-step1 { display: none !important; }

/* Beat labels row (under the 16 step cells, aligned with them). */
.mpc-beat-labels {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  padding-top: 4px;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9px; font-weight: 400;
  color: rgba(245,240,232,0.25);
  letter-spacing: 0;
}
.mpc-beat-labels span {
  text-align: center;
}
.mpc-beat-labels span.mpc-beat-label-main {
  color: #FF8C50;
  font-weight: 600;
}

/* Bar navigator — one pill per bar in the loaded MIDI, below the
   beat labels. Hidden when there's only 1 bar. mpc.js populates. */
.mpc-bar-pills {
  display: none;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 0 2px;
}
.mpc-bar-pills.is-active { display: flex; }
.mpc-bar-pill {
  min-width: 28px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 3px;
  color: rgba(245,240,232,0.55);
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.mpc-bar-pill:hover {
  color: #FF8C50;
  border-color: rgba(255,140,80,0.3);
}
.mpc-bar-pill.is-active {
  color: #FF8C50;
  border-color: rgba(255,140,80,0.65);
  background: rgba(255,140,80,0.08);
  box-shadow: 0 0 8px rgba(255,140,80,0.18);
}

/* Kit dropdown — a native <select> styled to match .mpc-foot-btn so
   the footer stays visually uniform. The wrapping label keeps the
   caret indicator next to the select without changing its click
   target. */
.mpc-kit-select-wrap {
  position: relative;
  padding-right: 8px;
}
.mpc-kit-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 2px;
  outline: none;
  min-width: 68px;
}
.mpc-kit-select option {
  background: #1A1A1A;
  color: rgba(245,240,232,0.87);
  font-family: var(--mono);
}
.mpc-kit-select-wrap:hover .mpc-caret { color: #FF8C50; }

/* MPC footer */
.mpc-footer {
  display: flex; align-items: center; gap: 12px;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.mpc-footer-left { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.mpc-foot-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(245,240,232,0.72);
  padding: 6px 12px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-decoration: none;
}
.mpc-foot-btn:hover {
  color: #FF8C50;
  border-color: rgba(255,140,80,0.4);
}
.mpc-caret { font-size: 9px; opacity: 0.7; }
.mpc-footer-right {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px; font-weight: 300;
  color: rgba(245,240,232,0.38);
  letter-spacing: 0.12em;
}
.mpc-footer-sep { margin: 0 6px; color: rgba(245,240,232,0.20); }

/* ---- Apply card --------------------------------------------------- */
.apply-card {
  gap: 12px;
  min-height: 460px;
}
.apply-card-head {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.apply-card-title {
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em;
  color: #F5F0E8;
  margin: 0;
}
.apply-card-sub {
  font-family: var(--sans);
  font-size: 11px; font-weight: 300;
  color: rgba(245,240,232,0.48);
  line-height: 1.45;
  margin: 0;
}

/* SOURCE sub-card */
.source-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: #0D0D0E;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 4px;
}
.source-top-row {
  display: flex; align-items: center; justify-content: space-between;
}
.source-label {
  font-family: var(--mono);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(245,240,232,0.55);
}
.source-badge {
  font-family: var(--mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #FF8C50;
  padding: 2px 6px;
  border: 1px solid rgba(255,140,80,0.38);
  border-radius: 2px;
  background: rgba(255,140,80,0.06);
}
.source-similar-pill {
  font-family: var(--mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(245,240,232,0.7);
  padding: 2px 8px;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  text-transform: uppercase;
}
.source-similar-pill:hover {
  color: #FF8C50;
  border-color: rgba(255,140,80,0.5);
  background: rgba(255,140,80,0.08);
}
.source-similar-pill:disabled {
  opacity: 0.4; cursor: wait;
}
.source-filename {
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  color: #F5F0E8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.source-stats {
  display: flex; gap: 14px; padding-top: 2px;
}
.source-stat { display: inline-flex; gap: 6px; font-family: var(--mono); }
.source-stat-key {
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(245,240,232,0.40);
}
.source-stat-val {
  font-size: 10px; font-weight: 500;
  color: #F5F0E8;
}
.source-actions {
  display: flex; gap: 6px; padding-top: 6px;
}
.source-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(245,240,232,0.72);
  padding: 7px 10px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
}
.source-btn:hover { color: #FF8C50; border-color: rgba(255,140,80,0.42); }

/* Slider blocks in the apply card. */
.apply-slider-block {
  display: flex; flex-direction: column; gap: 4px;
}
.apply-slider-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.apply-slider-key {
  font-family: var(--mono);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.28em;
  color: rgba(245,240,232,0.55);
  text-transform: uppercase;
}
.apply-slider-val {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  color: #F5F0E8;
}
.apply-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  outline: none;
  accent-color: #FF8C50;
}
.apply-slider::-webkit-slider-runnable-track { background: rgba(255,255,255,0.06); height: 3px; border-radius:2px; }
.apply-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #FF8C50;
  border: 2px solid #1A1917;
  box-shadow: 0 0 6px rgba(255,140,80,0.35);
  cursor: pointer;
  margin-top: -6px;
}
.apply-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #FF8C50;
  border: 2px solid #1A1917;
  box-shadow: 0 0 6px rgba(255,140,80,0.35);
  cursor: pointer;
}
.apply-slider.inst-kick::-webkit-slider-thumb { background: #E06C45; }
.apply-slider.inst-snare::-webkit-slider-thumb { background: #60A5FA; }
.apply-slider.inst-hihat::-webkit-slider-thumb { background: #34D399; }
.apply-slider.inst-kick::-moz-range-thumb { background: #E06C45; }
.apply-slider.inst-snare::-moz-range-thumb { background: #60A5FA; }
.apply-slider.inst-hihat::-moz-range-thumb { background: #34D399; }

.apply-slider-foot {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.apply-slider-hint {
  font-family: var(--mono);
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(245,240,232,0.35);
}

.apply-velocity-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.apply-velocity-select {
  background: #0D0D0E !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #F5F0E8 !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  padding: 5px 22px 5px 10px !important;
  letter-spacing: 0.14em !important;
}

/* Big orange APPLY GROOVE button */
.apply-big-btn {
  margin-top: 4px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #FF9C5F 0%, #FF7A3C 100%);
  color: #1A0A03;
  border: none; border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.28em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 140, 80, 0.24), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: filter 0.15s, transform 0.1s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.apply-big-btn:hover { filter: brightness(1.06); }
.apply-big-btn:active { transform: translateY(1px); }
.apply-check {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(26,10,3,0.22);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}

.apply-fine-print {
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px; font-weight: 300;
  color: rgba(245,240,232,0.35);
  letter-spacing: 0.14em;
}

/* Tint the velocity blend slider when visible */
.apply-velocity-blend { margin-top: 6px; }

/* ---- DETAILS (reuse earlier styles but ensure MPC spacing) -------- */
body.body-mpc .details-section { margin-top: 18px; }

/* Sub-group cards inside DETAILS */
.details-group {
  background: #0F0F10;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 4px;
  padding: 14px 16px 16px;
  margin-bottom: 12px;
}
.details-group:last-child { margin-bottom: 0; }
.details-group-head {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em;
  color: rgba(245,240,232,0.45);
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Static remnants that might bleed in from earlier layouts. */
body.body-mpc .site-header { display: none; }
body.body-mpc .container > .section:first-of-type { background: transparent; }

/* ---- Tablet breakpoint (768px) ----------------------------------- */
@media (max-width: 768px) {
  .top-bar.top-bar-mpc {
    grid-template-columns: auto 1fr auto;
    padding: 8px 12px;
    gap: 10px;
    height: 50px;
  }
  .top-bar-mpc .brand-name { font-size: 10px; letter-spacing: 0.06em; }
  .transport-meta { gap: 8px; }
  .transport-bpm { font-size: 12px; }
  .transport-time { font-size: 10px; }
  .transport-bars { display: none; }
  .top-bar-mpc .top-export-btn { padding: 6px 10px; font-size: 10px; letter-spacing: 0.12em; }
  .top-save-btn { padding: 6px 10px; }

  .container.container-mpc { padding: 10px 12px 60px; }
  .workspace-mpc { grid-template-columns: 1fr; gap: 12px; }
  .mpc-card, .apply-card { min-width: 0; min-height: 0; padding: 12px 14px; }

  .mpc-header { grid-template-columns: 1fr; gap: 8px; }
  .mpc-ab-pill, .mpc-view-toggle { justify-self: start; }

  .mpc-body { grid-template-columns: 80px 1fr; gap: 8px; }
  .mpc-pad { width: 80px; font-size: 9px; }
  .mpc-seq-row { height: var(--seq-row-h, 36px); }
  .mpc-beat-labels { font-size: 8px; }

  /* Sequencer: horizontal scroll when grid overflows */
  .mpc-seq {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .mpc-seq-row { min-width: 400px; scroll-snap-align: start; }

  /* Apply panel: full-width elements */
  .apply-big-btn { width: 100%; }
  .source-card { width: 100%; }
  .source-actions { flex-wrap: wrap; }

  /* Piano roll resizes to container */
  .mpc-piano-roll { height: 160px; }
}

/* ---- Phone breakpoint (480px) ------------------------------------ */
@media (max-width: 480px) {
  .top-bar.top-bar-mpc {
    grid-template-columns: auto 1fr;
    padding: 6px 10px;
    gap: 6px;
    height: 44px;
  }
  /* Collapse SAVE + EXPORT into smaller icons */
  .top-bar-mpc .top-bar-right { gap: 4px; }
  .top-bar-mpc .top-export-btn { padding: 5px 8px; font-size: 9px; letter-spacing: 0.08em; }
  .top-bar-mpc .top-export-btn .top-export-label { display: none; }
  .top-save-btn .top-save-label { display: none; }
  /* Phone: shrink aggressively and allow 2-line wrap if needed */
  .top-bar-mpc .brand-name {
    font-size: 9px; letter-spacing: 0.04em;
    white-space: normal; line-height: 1.1;
    max-width: 110px;
  }
  .transport-bpm { font-size: 11px; }
  .transport-time { display: none; }

  .container.container-mpc { padding: 8px 8px 60px; }

  /* Pads: larger touch targets, hide labels */
  .mpc-body { grid-template-columns: 56px 1fr; gap: 6px; }
  .mpc-pads { grid-auto-rows: var(--seq-row-h, 48px); gap: 4px; }
  .mpc-pad {
    width: 56px;
    height: var(--seq-row-h, 48px);
    min-width: 44px;
    font-size: 8px;
    padding: 0 0 4px;
  }

  /* Sequencer cells — ensure minimum tap size */
  .mpc-seq-row { height: var(--seq-row-h, 40px); min-width: 360px; }
  .mpc-cell { min-width: 18px; }

  /* Beat labels tighter */
  .mpc-beat-labels { font-size: 7px; min-width: 360px; }

  /* Apply card: tighter spacing */
  .apply-card { padding: 10px 10px 12px; }
  .apply-card-title { font-size: 12px; letter-spacing: 0.18em; }
  .apply-card-sub { font-size: 10px; }
  .source-filename { font-size: 10px; }
  .source-stat-val { font-size: 10px; }
  .source-stat-key { font-size: 8px; }

  /* Intensity sliders: single column on phone */
  .per-instrument-sliders { grid-template-columns: 1fr !important; }

  /* Piano roll shorter */
  .mpc-piano-roll { height: 140px; }

  /* Details section */
  .details-content { padding: 10px; }
}

/* ---- Small phone breakpoint (375px) ------------------------------ */
@media (max-width: 375px) {
  .mpc-body { grid-template-columns: 48px 1fr; gap: 4px; }
  .mpc-pads { grid-auto-rows: var(--seq-row-h, 44px); gap: 3px; }
  .mpc-pad { width: 48px; height: var(--seq-row-h, 44px); font-size: 0; } /* icon-only pads */
  .mpc-pad::after {
    content: attr(data-instrument);
    font-size: 7px;
    letter-spacing: 0.1em;
  }

  .mpc-seq-row { min-width: 320px; height: var(--seq-row-h, 38px); }
  .mpc-cell { min-width: 16px; }
  .mpc-beat-labels { min-width: 320px; font-size: 7px; }

  .container.container-mpc { padding: 6px 6px 60px; }
  .mpc-card { padding: 8px 8px 10px; }
}


/* =========================================================================
   VISUAL POLISH PASS — Tesla/retro premium audio-tool aesthetic.
   Pure CSS overrides appended at the end of the stylesheet so the
   original cascade stays intact. No new selectors, only surface /
   shadow / typography tweaks.
   ========================================================================= */

/* --- 1. MPC + Apply cards: warm-black gradient, no hard border --- */
.mpc-card,
.apply-card {
  background: linear-gradient(180deg, #1A1917 0%, #141412 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 12px 32px rgba(0, 0, 0, 0.55);
}

/* --- 2. Pads: deeper inset shadow, physical-rubber feel --- */
.mpc-pad {
  background: linear-gradient(180deg, #302E2B 0%, #181715 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -3px 5px rgba(0, 0, 0, 0.55),
    0 2px 5px rgba(0, 0, 0, 0.55);
}
.mpc-pad.is-active {
  background: linear-gradient(180deg, #FFA16A 0%, #D66729 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.22),
    0 0 15px rgba(255, 140, 80, 0.30);
}
.mpc-pad.is-playing {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.22),
    0 0 22px rgba(255, 140, 80, 0.55);
}

/* --- Sequencer cells: slight glow on hit, rounded corners --- */
.mpc-cell { border-radius: 2px; }
.mpc-seq-kick  .mpc-cell.is-hit { box-shadow: 0 0 10px rgba(255, 140, 80, 0.28); }
.mpc-seq-snare .mpc-cell.is-hit { box-shadow: 0 0 10px rgba(107, 168, 229, 0.28); }
.mpc-seq-hihat .mpc-cell.is-hit,
.mpc-seq-closed_hihat .mpc-cell.is-hit { box-shadow: 0 0 8px  rgba(52, 211, 153, 0.28); }
.mpc-seq-open_hihat .mpc-cell.is-hit { box-shadow: 0 0 8px  rgba(16, 185, 129, 0.28); }
.mpc-seq-tom    .mpc-cell.is-hit { box-shadow: 0 0 8px  rgba(167, 139, 250, 0.28); }
.mpc-seq-cymbal .mpc-cell.is-hit { box-shadow: 0 0 8px  rgba(251, 191, 36, 0.28); }
.mpc-seq-clap  .mpc-cell.is-hit { box-shadow: 0 0 8px  rgba(200, 154, 110, 0.28); }

/* --- Beat labels: bright orange main beats, dim subdivisions --- */
.mpc-beat-labels { font-size: 10px; }
.mpc-beat-labels span.mpc-beat-label-main {
  font-size: 11px;
  color: #FF8C50;
  font-weight: 600;
}

/* --- 3. APPLY A GROOVE header --- */
.apply-card-title {
  font-weight: 300;
  letter-spacing: 0.25em;
}
/* Recessed SOURCE sub-card --- */
.source-card {
  background: linear-gradient(180deg, #0F0F10 0%, #18181A 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
/* Pill-shaped FUNK badge with subtle glow --- */
.source-badge {
  border-radius: 999px;
  padding: 2px 10px;
  background: rgba(255, 140, 80, 0.12);
  border: 1px solid rgba(255, 140, 80, 0.38);
  box-shadow: 0 0 10px rgba(255, 140, 80, 0.18);
  color: #FFB289;
}

/* Thinner slider track + glow-y thumb --- */
.apply-slider::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.05);
  height: 2px;
  border-radius: 1px;
}
.apply-slider::-webkit-slider-thumb {
  width: 12px; height: 12px;
  margin-top: -5px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 140, 80, 0.55);
}
.apply-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 140, 80, 0.55);
}

/* APPLY GROOVE button: gradient + drop shadow --- */
.apply-big-btn {
  background: linear-gradient(180deg, #FF9F66 0%, #E96B1E 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(233, 107, 30, 0.35);
}
.apply-big-btn:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(233, 107, 30, 0.45);
}

/* --- 4. Top bar refinement --- */
@keyframes brand-dot-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1.0; }
}
.top-bar-mpc .brand-dot {
  animation: brand-dot-pulse 3s ease-in-out infinite;
}
.transport-bpm {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.14em;
}
.top-bar-mpc .top-bar-transport { gap: 10px; }
.transport-meta { gap: 10px; }
.top-export-btn {
  transition: box-shadow 0.18s, filter 0.15s, background 0.15s;
}
.top-export-btn:hover {
  box-shadow: 0 0 14px rgba(255, 140, 80, 0.45);
  filter: brightness(1.06);
}

/* --- 5. Consistent label + value typography across the MPC surface --- */
.mpc-kicker,
.apply-slider-key,
.apply-slider-hint,
.mpc-note-count,
.mpc-edit-hint,
.mpc-footer-sep,
.source-stat-key {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #5A5148;
}
.apply-slider-val,
.source-stat-val,
.source-filename,
.transport-time {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 300;
  color: #F5F0E8;
  letter-spacing: 0.06em;
}

/* --- Workspace gap: 24px between MPC and DETAILS --- */
.workspace-mpc { margin-bottom: 24px; }
.details-section { margin-top: 0; }

/* --- 6. Piano roll: recessed backdrop with inner shadow --- */
.mpc-piano-roll {
  background: linear-gradient(180deg, #141314 0%, #0F0E0F 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* --- 7. Hide sections 07/08 (future features) --- */
#discogs-section,
#compare-section {
  display: none !important;
}
/* Also hide the dividers that bracket them so the spacing doesn't
   leave a double-gap. The divider preceding #discogs-section is the
   one right after #seq-section (itself already hidden); the divider
   between #compare-section and #batch-apply-section stays since
   #batch-apply-section is still visible. */
#discogs-section + .divider,
#compare-section + .divider { display: none !important; }

/* ===== LED-bar intensity sliders ====================================
   Segmented bars that replace range inputs for master + per-instrument
   intensity. The actual <input type="range"> stays in the DOM (hidden)
   so existing event listeners in intensity.js / apply.js keep firing.
   mpc.js renders the segment divs + wires click/drag → hidden-input
   syncing on page load.
   ==================================================================== */

/* Hide the native range input when its sibling LED bar is present.
   pointer-events: none so it can't intercept clicks. */
.apply-slider.led-hidden {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  height: 0;
  margin: 0;
}

/* Recessed container for the segment row */
.led-bar {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: #0A0A0C;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative; /* for drag overlay */
}

/* Individual segment */
.led-seg {
  flex: 1;
  border-radius: 1px;
  transition: background 0.08s, box-shadow 0.08s;
}

/* Default unfilled state — overridden per-instrument via data-color */
.led-seg { background: rgba(255, 140, 80, 0.15); }
.led-seg.is-on { background: #FF8C50; box-shadow: 0 0 5px rgba(255,140,80,0.20); }

/* Master bar: taller, 3-tier color ramp */
.led-bar.led-master .led-seg { height: 12px; }
.led-bar.led-master .led-seg.is-on { background: #FF8C50; }
.led-bar.led-master .led-seg.is-on.led-warm { background: #E87A40; box-shadow: 0 0 5px rgba(232,122,64,0.25); }
.led-bar.led-master .led-seg.is-on.led-hot  { background: #D06830; box-shadow: 0 0 6px rgba(208,104,48,0.30); }

/* Per-instrument bars */
.led-bar.led-inst .led-seg { height: 8px; }

/* Kick */
.led-bar.led-kick .led-seg          { background: rgba(255,140,80,0.15); }
.led-bar.led-kick .led-seg.is-on    { background: #FF8C50; box-shadow: 0 0 5px rgba(255,140,80,0.20); }
/* Snare */
.led-bar.led-snare .led-seg         { background: rgba(107,168,229,0.15); }
.led-bar.led-snare .led-seg.is-on   { background: #6BA8E5; box-shadow: 0 0 5px rgba(107,168,229,0.20); }
/* Hihat */
.led-bar.led-hihat .led-seg         { background: rgba(127,216,159,0.15); }
.led-bar.led-hihat .led-seg.is-on   { background: #7FD89F; box-shadow: 0 0 5px rgba(127,216,159,0.20); }

/* Master row sits above per-instrument with a subtle top border on
   the per-instrument section to visually separate them. */
.per-instrument-sliders { border-top: 1px solid rgba(255,255,255,0.04); padding-top: 8px; margin-top: 4px; }


/* =========================================================================
   MONO REDESIGN — Phase 1 (latent space)
   Body.body-mono scopes every override so the earlier cascade is
   untouched; the only orange is the logo dot, drag-over border, and
   status-live pip.
   ========================================================================= */

body.body-mono { background: #111111; color: rgba(255,255,255,0.75); }
body.body-mono .container.container-mpc { padding: 18px 20px 80px; }

/* --- Drop hero empty state ---------------------------------------------- */
.drop-hero { display: none; }
body.body-mono.is-empty .workspace-mpc,
body.body-mono.is-empty .details-section,
body.body-mono.is-empty .hidden-step1,
body.body-mono.is-empty #seq-section,
body.body-mono.is-empty #discogs-section,
body.body-mono.is-empty #compare-section,
body.body-mono.is-empty #batch-apply-section,
body.body-mono.is-empty .site-footer,
body.body-mono.is-empty .divider { display: none !important; }
body.body-mono.is-empty .drop-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 60px 20px 40px;
  position: relative;
}
.drop-hero-body {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
}
.drop-hero-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.drop-hero-mark { display: block; line-height: 0; }
.drop-hero-wordmark {
  font-family: var(--sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(255,255,255,0.82);
}
.drop-hero-tagline {
  max-width: 280px; margin: 0;
  font-size: 13px; font-weight: 300; line-height: 1.5;
  color: rgba(255,255,255,0.5);
}
.drop-hero-foot {
  margin-top: 40px; padding-top: 18px;
  width: 100%; max-width: 540px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
}
.drop-hero-over { display: none; }

/* Drag-over state (empty): swap body for the + circle */
body.body-mono.is-empty #app-container.is-drag-over {
  border: 2px solid #FF6B2B;
  border-radius: 12px;
}
body.body-mono.is-empty #app-container.is-drag-over .drop-hero-body,
body.body-mono.is-empty #app-container.is-drag-over .drop-hero-foot {
  opacity: 0.08;
}
body.body-mono.is-empty #app-container.is-drag-over .drop-hero-over {
  display: flex;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
}
.drop-hero-over-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.drop-hero-over-text {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #FF6B2B;
}
/* Drag-over state (after MIDI loaded): orange outline on container */
body.body-mono:not(.is-empty) #app-container.is-drag-over {
  outline: 2px solid #FF6B2B;
  outline-offset: -2px;
  border-radius: 0;
}

/* --- Top bar ------------------------------------------------------------ */
body.body-mono .top-bar.top-bar-mpc {
  background: rgba(17,17,17,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.body-mono .top-bar-mpc .brand-mark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
/* Hide the legacy pulsing orange dot if a stale template still renders
   it — new markup uses .brand-mark with the inline SVG. */
body.body-mono .top-bar-mpc .brand-dot { display: none; }
body.body-mono .top-bar-mpc .brand-name {
  font-family: var(--sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: rgba(255,255,255,0.78);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 400;
  text-transform: none;
}

body.body-mono .transport-play {
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
body.body-mono .transport-play:hover {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.95);
}
body.body-mono .transport-play-glyph { font-size: 10px; margin-left: 1px; }

body.body-mono .transport-bpm,
body.body-mono .transport-time { color: rgba(255,255,255,0.65); font-weight: 400; }
body.body-mono .transport-bpm { font-size: 12px; letter-spacing: 0.12em; }
body.body-mono .transport-bars {
  color: rgba(255,255,255,0.45);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 3px 10px;
}

body.body-mono .top-bar-mpc .top-bar-status { background: rgba(255,255,255,0.25); }
body.body-mono .top-bar-mpc .top-bar-status-live {
  background: #FF6B2B;
  box-shadow: none;
}

/* SAVE pill */
body.body-mono .top-save-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: rgba(255,255,255,0.75);
  font-size: 10px; letter-spacing: 0.18em;
  padding: 5px 14px;
}
body.body-mono .top-save-btn:hover {
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.25);
}

/* Export MIDI = primary white pill */
body.body-mono .top-bar-mpc .top-export-btn {
  background: #FFFFFF;
  color: #111111;
  border: none;
  border-radius: 20px;
  box-shadow: none;
  padding: 6px 14px;
  font-size: 10px; letter-spacing: 0.16em;
}
body.body-mono .top-bar-mpc .top-export-btn:hover {
  filter: brightness(0.95);
  box-shadow: none;
}
body.body-mono .top-bar-mpc .top-export-icon { color: #111111; }

/* --- Cards -------------------------------------------------------------- */
body.body-mono .mpc-card,
body.body-mono .apply-card {
  background: #161616;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: none;
}

/* Hide PIANO ROLL toggle for Phase 1 (grid-only view) */
body.body-mono .mpc-view-toggle { display: none; }

/* A/B pill */
body.body-mono .mpc-ab-pill {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 2px;
}
body.body-mono .mpc-ab-btn {
  color: rgba(255,255,255,0.45);
  padding: 5px 14px;
  font-size: 9px; letter-spacing: 0.2em;
  border-radius: 20px;
}
body.body-mono .mpc-ab-btn:hover { color: rgba(255,255,255,0.85); }
body.body-mono .mpc-ab-btn.is-active {
  background: #FFFFFF;
  color: #111111;
  box-shadow: none;
}

/* Filename pill with orange dot prefix */
body.body-mono .mpc-header-left { flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
body.body-mono .mpc-kicker { display: none; }
body.body-mono .mpc-filename {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.02em;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.body-mono .mpc-filename::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF6B2B;
  flex: 0 0 6px;
}

/* --- MPC body: pads column gone, inline row labels --------------------- */
body.body-mono .mpc-body {
  grid-template-columns: 1fr;
  gap: 10px;
}
body.body-mono .mpc-pads { display: none; }
body.body-mono .mpc-piano-roll { display: none !important; }

body.body-mono .mpc-seq {
  /* All rows are auto-sized; each lane row already sets its own
     explicit height via --seq-row-h, so implicit grid-auto-rows would
     just inflate beat-labels + bar-pills to full lane height. */
  grid-auto-rows: auto;
  gap: 4px;
}
body.body-mono .mpc-seq-row {
  display: grid;
  grid-template-columns: 56px repeat(16, 1fr);
  gap: 4px;
  height: var(--seq-row-h, 44px);
  align-items: stretch;
}
.mpc-row-label {
  font-family: var(--mono);
  font-size: 8px; font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 2px;
}

/* --- Heat cells: brightness = velocity, white only -------------------- */
body.body-mono .mpc-cell {
  background: rgba(255,255,255, 0.04);
  border: none;
  border-radius: 6px;
  box-shadow: none;
  transition: background 0.12s, transform 0.08s;
}
body.body-mono .mpc-cell:hover { background: rgba(255,255,255, 0.12); }
body.body-mono .mpc-cell:active { transform: scale(0.94); }

body.body-mono .mpc-cell.is-hit,
body.body-mono .mpc-cell.is-hit-dim,
body.body-mono .mpc-seq-kick .mpc-cell.is-hit,
body.body-mono .mpc-seq-snare .mpc-cell.is-hit,
body.body-mono .mpc-seq-hihat .mpc-cell.is-hit,
body.body-mono .mpc-seq-hihat .mpc-cell.is-hit-dim,
body.body-mono .mpc-seq-closed_hihat .mpc-cell.is-hit,
body.body-mono .mpc-seq-closed_hihat .mpc-cell.is-hit-dim,
body.body-mono .mpc-seq-open_hihat .mpc-cell.is-hit,
body.body-mono .mpc-seq-tom .mpc-cell.is-hit,
body.body-mono .mpc-seq-cymbal .mpc-cell.is-hit,
body.body-mono .mpc-seq-clap .mpc-cell.is-hit {
  background: rgba(255,255,255, var(--vel, 0.5));
  border: none;
  box-shadow: none;
}
/* Remove the orange beat-1 edge */
body.body-mono .mpc-seq-row .mpc-cell:nth-child(4n + 1) { border-left: none; }

/* Shift indicator edges: keep subtle white */
body.body-mono .mpc-cell.is-shifted[style*="--shift-x: -"]::after,
body.body-mono .mpc-cell.is-shifted:not([style*="--shift-x: -"])::after {
  background: rgba(255,255,255, 0.55);
}

/* Beat labels align under the 16 cell columns (offset past the label col) */
body.body-mono .mpc-beat-labels {
  grid-template-columns: repeat(16, 1fr);
  padding-left: 60px;
  color: rgba(255,255,255,0.25);
  font-size: 9px;
}
body.body-mono .mpc-beat-labels span.mpc-beat-label-main {
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}

/* Bar pills mono */
body.body-mono .mpc-bar-pills { padding-left: 60px; }
body.body-mono .mpc-bar-pill {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: rgba(255,255,255,0.5);
  padding: 3px 12px;
}
body.body-mono .mpc-bar-pill:hover {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}
body.body-mono .mpc-bar-pill.is-active {
  background: #FFFFFF;
  color: #111111;
  border-color: #FFFFFF;
  box-shadow: none;
}

/* --- Shared pill utility classes --------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255, 0.05);
  border: 1px solid rgba(255,255,255, 0.1);
  border-radius: 20px;
  color: rgba(255,255,255, 0.75);
  font-family: var(--mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em;
  padding: 5px 14px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s, filter 0.12s;
  text-decoration: none;
}
.pill:hover { color: rgba(255,255,255, 0.95); border-color: rgba(255,255,255, 0.25); }
.pill-outline {
  background: transparent;
  border-color: rgba(255,255,255, 0.2);
  padding: 8px 18px;
  font-size: 11px; letter-spacing: 0.14em;
}
.pill-primary { background: #FFFFFF; color: #111111; border: none; }
.pill-primary:hover { filter: brightness(0.96); color: #111111; }

/* --- Footer (MPC card) -> pill buttons -------------------------------- */
body.body-mono .mpc-foot-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 10px; letter-spacing: 0.18em;
}
body.body-mono .mpc-foot-btn:hover {
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.25);
}
body.body-mono .mpc-footer { border-top: 1px solid rgba(255,255,255,0.05); }
body.body-mono .mpc-footer-right { color: rgba(255,255,255,0.35); }
body.body-mono .mpc-caret { color: rgba(255,255,255,0.45); }

/* --- Apply card (Phase 1: restyle to mono; Phase 2 will rebuild) ------- */
body.body-mono .apply-card-title { color: rgba(255,255,255,0.85); }
body.body-mono .apply-card-sub   { color: rgba(255,255,255,0.5); }
body.body-mono .apply-card-head  { border-bottom: 1px solid rgba(255,255,255,0.06); }

body.body-mono .source-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: none;
}
body.body-mono .source-label { color: rgba(255,255,255,0.5); }
body.body-mono .source-badge {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  box-shadow: none;
  border-radius: 20px;
  padding: 2px 10px;
}
body.body-mono .source-filename,
body.body-mono .source-stat-val { color: rgba(255,255,255,0.85); }
body.body-mono .source-stat-key { color: rgba(255,255,255,0.45); }
body.body-mono .source-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  border-radius: 20px;
  letter-spacing: 0.14em;
}
body.body-mono .source-btn:hover {
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.25);
}

/* Sliders -> all-white, no per-instrument tint */
body.body-mono .apply-slider { accent-color: #FFFFFF; }
body.body-mono .apply-slider::-webkit-slider-thumb,
body.body-mono .apply-slider.inst-kick::-webkit-slider-thumb,
body.body-mono .apply-slider.inst-snare::-webkit-slider-thumb,
body.body-mono .apply-slider.inst-hihat::-webkit-slider-thumb {
  background: #FFFFFF;
  border: 2px solid #161616;
  box-shadow: none;
}
body.body-mono .apply-slider::-moz-range-thumb,
body.body-mono .apply-slider.inst-kick::-moz-range-thumb,
body.body-mono .apply-slider.inst-snare::-moz-range-thumb,
body.body-mono .apply-slider.inst-hihat::-moz-range-thumb {
  background: #FFFFFF;
  border: 2px solid #161616;
  box-shadow: none;
}

/* LED intensity bars -> mono (white on dark recess) */
body.body-mono .led-bar,
body.body-mono .led-bar.led-master,
body.body-mono .led-bar.led-kick,
body.body-mono .led-bar.led-snare,
body.body-mono .led-bar.led-hihat { background: rgba(0,0,0,0.35); }
body.body-mono .led-seg,
body.body-mono .led-bar.led-master .led-seg,
body.body-mono .led-bar.led-kick   .led-seg,
body.body-mono .led-bar.led-snare  .led-seg,
body.body-mono .led-bar.led-hihat  .led-seg {
  background: rgba(255,255,255,0.08);
  box-shadow: none;
}
body.body-mono .led-seg.is-on,
body.body-mono .led-bar.led-master .led-seg.is-on,
body.body-mono .led-bar.led-master .led-seg.is-on.led-warm,
body.body-mono .led-bar.led-master .led-seg.is-on.led-hot,
body.body-mono .led-bar.led-kick   .led-seg.is-on,
body.body-mono .led-bar.led-snare  .led-seg.is-on,
body.body-mono .led-bar.led-hihat  .led-seg.is-on {
  background: rgba(255,255,255,0.85);
  box-shadow: none;
}

/* APPLY GROOVE -> white primary pill */
body.body-mono .apply-big-btn {
  background: #FFFFFF;
  color: #111111;
  border: none;
  border-radius: 20px;
  box-shadow: none;
  padding: 12px 18px;
  letter-spacing: 0.22em;
}
body.body-mono .apply-big-btn:hover { filter: brightness(0.96); box-shadow: none; }
body.body-mono .apply-check { background: rgba(0,0,0,0.12); color: #111111; }
body.body-mono .apply-fine-print { color: rgba(255,255,255,0.35); }

/* Form inputs / selects -> mono */
body.body-mono .apply-velocity-select,
body.body-mono .form-input,
body.body-mono .form-select {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Genre / vibe tags and any pill-like chips -> mono pill */
body.body-mono .demo-midi-chip,
body.body-mono .vibe-tag,
body.body-mono .preset-tag,
body.body-mono .cmp-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 10px; letter-spacing: 0.08em;
}
body.body-mono .demo-midi-chip.active,
body.body-mono .vibe-tag.active {
  background: #FFFFFF;
  color: #111111;
  border-color: #FFFFFF;
}

/* Site footer mono */
body.body-mono .site-footer {
  color: rgba(255,255,255,0.35);
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 40px;
}

/* --- Primary-view hide of the old DETAILS + BATCH sections ------------ */
body.body-mono .details-section,
body.body-mono #seq-section,
body.body-mono #batch-apply-section { display: none; }
body.body-mono .divider { display: none; }

/* Mobile: keep the same mono behavior; the inline label column stays
   narrow so 16 cells remain readable. */
@media (max-width: 768px) {
  body.body-mono .mpc-seq-row { grid-template-columns: 44px repeat(16, 1fr); }
  body.body-mono .mpc-beat-labels,
  body.body-mono .mpc-bar-pills { padding-left: 48px; }
  .drop-hero-wordmark { font-size: 14px; }
  .drop-hero-tagline { font-size: 12px; }
}


/* =========================================================================
   MONO REDESIGN — Phase 2 (XY pad sidebar)
   Narrow the apply sidebar to house the 154px pad + readout. Repaint the
   readout bars so only the dominant corner is orange. Hide the old
   intensity + velocity controls behind an <details> Advanced drawer,
   disabled + one-way-bound from the pad.
   ========================================================================= */

/* --- Sidebar geometry -------------------------------------------------- */
body.body-mono .workspace-mpc {
  grid-template-columns: 1fr 190px;
  gap: 14px;
  align-items: start;
}
body.body-mono .apply-card {
  min-width: 0;
  min-height: 0;
  padding: 14px 18px;
  gap: 10px;
}
body.body-mono .apply-card-head { padding-bottom: 6px; }
body.body-mono .apply-card-title { font-size: 11px; letter-spacing: 0.24em; }
body.body-mono .apply-card-sub { font-size: 10px; line-height: 1.4; }

/* Source card tighter at 154px inner width */
body.body-mono .apply-card .source-card { padding: 10px 12px; gap: 5px; }
body.body-mono .apply-card .source-actions { flex-wrap: wrap; gap: 4px; }
body.body-mono .apply-card .source-btn { padding: 5px 8px; font-size: 9px; letter-spacing: 0.1em; }

/* --- XY pad container -------------------------------------------------- */
.xy-pad-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.xy-pad-container {
  width: 154px;
  max-width: 100%;
}
body.body-mono .xy-pad-container { color: rgba(255,255,255,0.75); }

/* Override XY pad surface + puck for the mono spec — orange is preserved
   on the puck and crosshair because that's the spec's "orange puck" rule. */
body.body-mono .xy-pad-surface {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
body.body-mono .xy-pad-surface:focus-visible {
  border-color: rgba(255,107,43,0.45);
  box-shadow: 0 0 0 2px rgba(255,107,43,0.12);
}
body.body-mono .xy-corner-label {
  color: rgba(255,255,255,0.4);
  font-size: 8px;
  letter-spacing: 0.18em;
}
body.body-mono .xy-corner-label:hover {
  color: #FF6B2B;
  background: rgba(255,107,43,0.06);
}
body.body-mono .xy-corner.is-active .xy-corner-label { color: #FF6B2B; }
body.body-mono .xy-corner-dot {
  border-color: #FF6B2B;
  width: 6px; height: 6px;
}
body.body-mono .xy-puck {
  background: #FF6B2B;
  outline: 1.5px solid #FF6B2B;
  border-color: #161616;
  box-shadow:
    0 0 0 3px rgba(255,107,43,0.10),
    0 0 14px rgba(255,107,43,0.30);
}

/* --- Blend readout: only the dominant bar is orange ------------------- */
body.body-mono .xy-pad-readout { gap: 5px; margin-top: 4px; }
body.body-mono .xy-readout-row {
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5);
}
body.body-mono .xy-readout-label { flex: 0 0 44px; }
body.body-mono .xy-readout-pct { flex: 0 0 28px; }
body.body-mono .xy-readout-bar-track {
  background: rgba(255,255,255,0.06);
  height: 3px;
  border-radius: 2px;
}
/* Default: non-dominant rows get a muted white fill (spec: rgba(1,1,1,0.3)) */
body.body-mono .xy-readout-bar-fill {
  background: rgba(255,255,255,0.3);
}
/* Dominant (top blend) row: orange fill, orange label + percent */
body.body-mono .xy-readout-row.is-dominant {
  color: #FF6B2B;
}
body.body-mono .xy-readout-row.is-dominant .xy-readout-bar-fill {
  background: #FF6B2B;
}

/* --- Advanced drawer --------------------------------------------------- */
.advanced-drawer {
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 8px;
}
.advanced-drawer-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 4px 0;
  transition: color 0.12s;
  user-select: none;
}
.advanced-drawer-toggle::-webkit-details-marker { display: none; }
.advanced-drawer-toggle::before {
  content: "+";
  display: inline-block;
  width: 10px; height: 10px;
  line-height: 9px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  transition: transform 0.15s, color 0.12s;
  font-size: 12px;
}
.advanced-drawer[open] .advanced-drawer-toggle::before {
  content: "–";
}
.advanced-drawer-toggle:hover { color: rgba(255,255,255,0.8); }
.advanced-drawer-body {
  margin-top: 8px;
  padding: 10px 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Disabled read-only inputs: greyed, no cursor */
.advanced-drawer input[disabled],
.advanced-drawer select[disabled],
.advanced-drawer button[disabled] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.advanced-drawer .apply-slider-key { letter-spacing: 0.18em; }

/* Slider in drawer: filled portion uses a linear-gradient from the
   value so the read-only display still communicates intensity visually
   even though it's disabled. The XY pad is the source of truth. */
body.body-mono .advanced-drawer .apply-slider {
  height: 3px;
  background: rgba(255,255,255,0.08);
}
body.body-mono .advanced-drawer .apply-slider::-webkit-slider-thumb,
body.body-mono .advanced-drawer .apply-slider::-moz-range-thumb {
  background: rgba(255,255,255,0.85);
  border: 2px solid #161616;
  box-shadow: none;
}

/* --- Apply button: force white pill, drop old gradient + glow --------- */
body.body-mono .apply-big-btn.pill-primary,
body.body-mono .apply-big-btn {
  background: #FFFFFF;
  color: #111111;
  border: none;
  border-radius: 20px;
  box-shadow: none;
  padding: 11px 16px;
  letter-spacing: 0.2em;
  font-size: 11px;
  width: 100%;
}
body.body-mono .apply-big-btn:hover { filter: brightness(0.96); box-shadow: none; }
body.body-mono .apply-big-btn .apply-check {
  background: rgba(0,0,0,0.1);
  color: #111111;
  width: 14px; height: 14px;
  font-size: 9px;
}

/* --- Narrow-sidebar source text hygiene -------------------------------- */
body.body-mono .apply-card .source-filename { font-size: 10px; }
body.body-mono .apply-card .source-stats { gap: 10px; }
body.body-mono .apply-card .source-stat-key { font-size: 8px; letter-spacing: 0.18em; }
body.body-mono .apply-card .source-stat-val { font-size: 10px; }

@media (max-width: 768px) {
  body.body-mono .workspace-mpc { grid-template-columns: 1fr; }
  body.body-mono .apply-card { padding: 12px 14px; }
  .xy-pad-container { width: 100%; max-width: 240px; }
}


/* =========================================================================
   MONO REDESIGN — Phase 3 (ghost preview + groove DNA + A/B viz)
   ========================================================================= */

/* --- Preview label above the grid ------------------------------------- */
body.body-mono .preview-label {
  min-height: 14px;
  margin: 2px 0 6px 60px;  /* align with first cell (label col 56 + gap 4) */
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #FF6B2B;
  text-transform: lowercase;
}

/* --- Cells need position: relative for ghost overlay + tick -------- */
body.body-mono .mpc-cell { position: relative; }

/* --- Post-apply (humanized mode) grid tick mark ----------------------- */
/* A faint 1px vertical line at dead center of each hit cell. The cell
   itself stays put; the fill slides via ::before (below). Tick sits
   above the empty background but is visually behind the shifted fill. */
body.body-mono .mpc-seq.mode-humanized .mpc-cell.is-hit,
body.body-mono .mpc-seq.mode-humanized .mpc-cell.is-hit-dim {
  background-color: transparent;
  background-image: linear-gradient(
    90deg,
    transparent calc(50% - 0.5px),
    rgba(255,255,255, 0.06) calc(50% - 0.5px),
    rgba(255,255,255, 0.06) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  overflow: hidden;
}

/* Humanized-mode fill via ::before so we can translateX without moving
   the cell (which would break grid alignment + the tick mark). */
body.body-mono .mpc-seq.mode-humanized .mpc-cell.is-hit::before,
body.body-mono .mpc-seq.mode-humanized .mpc-cell.is-hit-dim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255, var(--vel, 0.5));
  border-radius: inherit;
  transform: translateX(var(--shift-x, 0px));
  pointer-events: none;
  transition: transform 120ms ease, background 120ms ease;
}

/* Hide the legacy leading-edge ::after indicator in mono mode — spec
   does not include it, the tick line already marks the grid anchor. */
body.body-mono .mpc-cell.is-shifted[style*="--shift-x: -"]::after,
body.body-mono .mpc-cell.is-shifted:not([style*="--shift-x: -"])::after {
  display: none;
}

/* --- Ghost preview overlay ------------------------------------------- */
/* Injected by ghost-preview.js as a child <span> inside each hit cell
   during XY-pad drag. Outline dashed, faint velocity-tinted fill, and
   translateX driven by --preview-shift-x on the parent cell. */
.mpc-cell-ghost {
  position: absolute;
  inset: 2px;
  border-radius: 5px;
  border: 1.5px dashed rgba(255,255,255, 0.25);
  background: rgba(255,255,255, calc(var(--preview-vel, 0.5) * 0.18));
  transform: translateX(var(--preview-shift-x, 0px));
  transition: transform 70ms ease, background 70ms ease;
  pointer-events: none;
  z-index: 2;
}

/* --- Playhead scrub bar ---------------------------------------------- */
/* --- Groove DNA panel ------------------------------------------------- */
.groove-dna {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding: 0;
  background: #111;
  color: #fff;
  font-family: var(--mono);
}

.gdna-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255, 0.25);
  text-transform: uppercase;
}

/* Compact strip — always visible. Default layout target is ~50px tall:
   a label + EKG + stats row, plus a small expand affordance below it. */
.gdna-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 8px 10px 0;
}
.gdna-compact-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255, 0.25);
  text-transform: uppercase;
  flex: 0 0 auto;
}
.gdna-compact-ekg-wrap {
  flex: 1;
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
}
.gdna-compact-ekg {
  display: block;
  width: 100%;
  height: 28px;
}
.gdna-compact-ekg polyline {
  transition: points 0.25s ease;
}
.gdna-compact-stats {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.gdna-compact-stats .gdna-stat-pri {
  color: #FF6B2B;
}
.gdna-compact-stats .gdna-stat-sec {
  color: rgba(255,255,255, 0.3);
}
.gdna-compact-stats .gdna-stat-sep {
  color: rgba(255,255,255, 0.15);
}

/* Expand / collapse affordance */
.gdna-expand-btn {
  align-self: flex-start;
  margin: 2px 0 6px 10px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255, 0.15);
  text-transform: lowercase;
  cursor: pointer;
  transition: color 0.15s ease;
}
.gdna-expand-btn:hover {
  color: rgba(255,255,255, 0.45);
}

/* Collapsible detail wrapper */
.gdna-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
.groove-dna.gdna-expanded .gdna-detail {
  max-height: 560px;
  opacity: 1;
  pointer-events: auto;
}

/* Section 1 — map + fingerprint */
.gdna-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 2px 10px 12px;
}
.gdna-top > .gdna-div-v {
  align-self: stretch;
}
.gdna-map {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gdna-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gdna-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gdna-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255, 0.35);
  text-transform: lowercase;
}
.gdna-legend-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.gdna-map-plot {
  position: relative;
  flex: 0 0 120px;
  min-height: 120px;
  max-height: 120px;
}
.gdna-map-svg {
  display: block;
  width: 100%;
  height: 120px;
  max-height: 120px;
}
.gdna-map-svg circle {
  transition: cx 0.18s ease, cy 0.18s ease, r 0.18s ease;
}
.gdna-axis-y {
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: 8px;
  color: rgba(255,255,255, 0.2);
  pointer-events: none;
}
.gdna-axis-y-top { top: 2px; }
.gdna-axis-y-bot { bottom: 18px; }
.gdna-axis-x {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 8px;
  color: rgba(255,255,255, 0.2);
  pointer-events: none;
}

/* Vertical divider between map + fingerprint */
.gdna-div-v {
  width: 1px;
  background: rgba(255,255,255, 0.06);
  align-self: stretch;
}

/* Fingerprint */
.gdna-fp {
  width: 140px;
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.gdna-radar {
  display: block;
  width: 100px;
  height: 100px;
  align-self: center;
}
.gdna-radar-human {
  transition: points 0.35s ease;
}
.gdna-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gdna-bar {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 6px;
}
.gdna-bar-lbl {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255, 0.25);
  text-transform: uppercase;
}
.gdna-bar-track {
  position: relative;
  height: 2px;
  background: rgba(255,255,255, 0.06);
  border-radius: 1px;
  overflow: hidden;
}
.gdna-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: #FF6B2B;
  transition: width 0.25s ease;
}
.gdna-bar-val {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.03em;
  color: rgba(255,107,43, 0.7);
  text-align: right;
}

/* Horizontal divider between sections */
.gdna-div-h {
  height: 1px;
  margin: 0 10px;
  background: rgba(255,255,255, 0.06);
}

/* Section 2 — metric cards */
.gdna-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px 10px 8px;
}
.gdna-metric {
  background: rgba(255,255,255, 0.03);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gdna-metric-lbl {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255, 0.25);
  text-transform: uppercase;
}
.gdna-metric-num {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: #FF6B2B;
  line-height: 1.1;
}
.gdna-metric-unit {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255, 0.2);
  text-transform: lowercase;
}

/* Offscreen legacy label (kept for back-compat with stray callers). */
.groove-dna-label-right {
  position: absolute;
  left: -9999px;
  top: -9999px;
}




/* =========================================================================
   MONO REDESIGN — Phase 2 (drum kit registry)
   ========================================================================= */

/* Kit selector + rescan button — both sit inside .mpc-footer-left as
   pill-styled siblings. The rescan glyph is the unicode U+21BB (↻). */
body.body-mono .kit-rescan-btn {
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 0;
  color: rgba(255,255,255, 0.65);
}
body.body-mono .kit-rescan-btn:hover { color: rgba(255,255,255, 0.9); }
body.body-mono .kit-rescan-btn:disabled { opacity: 0.4; cursor: wait; }

/* Grouped dropdown. Native <optgroup> styling is limited; we restyle
   what the browser exposes. Category labels appear dimmer + bolder. */
body.body-mono .mpc-kit-select optgroup {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255,255,255, 0.55);
  background: #161616;
}
body.body-mono .mpc-kit-select option {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255, 0.85);
  background: #161616;
  padding: 2px 8px;
}
body.body-mono .mpc-kit-select option:disabled {
  color: rgba(255,255,255, 0.30);
}

/* Vibe chips below the MPC footer — small mono pills. */
.kit-vibe-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  min-height: 18px;
}
body.body-mono .kit-vibe-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: rgba(255,255,255, 0.05);
  border: 1px solid rgba(255,255,255, 0.1);
  border-radius: 20px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255, 0.55);
  text-transform: uppercase;
}