/* ============================================================
   v8.7 — INSTRUMENT PANEL — full visual rewrite
   ============================================================
   Goals:
     - Compact: every param-group is one tight row instead of three.
     - Beautiful: dark-DAW aesthetic with subtle gradient accents,
       section pills, glassmorphism, monospace numeric values.
     - Logical: visual hierarchy — header pill → grouped controls →
       sub-actions (Reset / Preview / Done).
     - Reuses existing markup; everything is selector-driven so we
       don't have to touch the 400-line index.html block.

   Spec for each section:
     - Header pill (.param-group h4): purple/pink gradient stripe,
       uppercase tracking-tight label, small icon.
     - Slider row (.param-group): label + value on one line, slider
       below, ~26 px tall total. No descriptive paragraph below.
     - Dropdowns (.panel-select): glass card with chevron.
     - Reset buttons: subtle outlined links instead of full-width buttons.
     - Distortion + LFO + Oscillator sections inherit the same pill.

   All overrides scope to body .instrument-panel for cascade safety.
*/

@layer v6-components {

  /* The advanced editor is a focused, dark studio surface in both themes.
     Light mode previously supplied dark text tokens to this intentionally
     dark glass drawer, making most labels and presets unreadable. Keep its
     local contrast contract independent from the workspace theme. */
  body[data-theme="light"] .instrument-panel {
    color-scheme: dark;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-default: rgba(255, 255, 255, 0.14);
    --surface-200: #111118;
    --surface-300: #181821;
    --surface-400: #20202b;
    --surface-500: #292936;
    --surface-600: #343443;
  }

  /* ============================================================
     Container — slim outer panel, glassmorphism inner
     ============================================================ */
  /* The panel is position:fixed (ignores the body's 3-row grid), so a raw
     100vh runs UNDER the bottom status-bar row and clips the pinned
     Preview/Done footer. Stop the panel where the status bar starts —
     same --statusbar-h var shell.css sizes the row with, so they can't drift. */
  body .instrument-panel {
    top: var(--v6-app-bar-h, 44px) !important;
    width: min(420px, calc(100vw - 16px)) !important;
    height: calc(100vh - var(--v6-app-bar-h, 44px) - var(--statusbar-h, 26px)) !important;
  }

  body .instrument-panel .panel-container {
    background: linear-gradient(180deg,
      rgba(30, 28, 38, 0.97) 0%,
      rgba(18, 17, 24, 0.97) 100%) !important;
    border-left: 1px solid rgba(139, 92, 246, 0.18) !important;
    box-shadow: -32px 0 64px rgba(0, 0, 0, 0.55) !important;
    color: var(--text-primary, #fafafa);
  }

  body .instrument-panel .panel-header {
    padding: 14px 18px 12px !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.18) !important;
    background: linear-gradient(180deg,
      rgba(139, 92, 246, 0.10) 0%,
      rgba(139, 92, 246, 0.0) 100%) !important;
  }
  body .instrument-panel .panel-header h3 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    color: var(--text-primary, #fafafa);
  }

  body .instrument-panel .panel-body {
    padding: 14px 18px 20px !important;
    background: transparent !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* ============================================================
     v9.6 — Engine tabs. A pinned strip between the scope bar and
     the scrolling body; splits each engine's controls into short
     focused pages so no single view is a long crowded scroll.
     Buttons are injected per track type by InstrumentPanel.js.
     ============================================================ */
  body .instrument-panel .panel-tabs {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
    padding: 10px 14px 0;
    background: transparent;
  }
  body .instrument-panel .panel-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 6px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    color: var(--text-secondary, #a1a1aa);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  body .instrument-panel .panel-tab:hover {
    background: rgba(139, 92, 246, 0.10);
    color: var(--text-primary, #fafafa);
  }
  body .instrument-panel .panel-tab--active {
    background: linear-gradient(180deg,
      rgba(139, 92, 246, 0.24) 0%,
      rgba(139, 92, 246, 0.06) 100%);
    border-color: rgba(139, 92, 246, 0.45);
    color: var(--text-primary, #fafafa);
  }
  /* Tab content panels. The first .param-group inside a freshly shown
     section shouldn't carry the big top margin its h4 normally adds. */
  body .instrument-panel .panel-section > .param-group:first-child h4 {
    margin-top: 4px !important;
  }

  /* ============================================================
     v9.6 — Simple / Advanced mode bar.
     ============================================================ */
  body .instrument-panel .panel-mode-bar {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
    padding: 10px 14px 0;
  }
  body .instrument-panel .panel-mode-bar__opt {
    flex: 1 1 0;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 7px;
    color: var(--text-secondary, #a1a1aa);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  body .instrument-panel .panel-mode-bar__opt:hover { color: var(--text-primary, #fafafa); }
  body .instrument-panel .panel-mode-bar__opt--active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(236, 72, 153, 0.15));
    border-color: rgba(139, 92, 246, 0.50);
    color: var(--text-primary, #fafafa);
  }
  body .instrument-panel .panel-simple { margin-top: 4px; }

  /* ============================================================
     v9.8 — Modulation-FX cards. One card per effect: an enable
     toggle + label header, and a body of param rows shown only
     when the effect is on (keeps the tab clean for beginners).
     ============================================================ */
  body .instrument-panel .fx-cards { margin-top: 10px; }
  body .instrument-panel .fx-card {
    margin-bottom: 10px;
    padding: 9px 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
  }
  body .instrument-panel .fx-card--on {
    background: rgba(139, 92, 246, 0.07);
    border-color: rgba(139, 92, 246, 0.28);
  }
  body .instrument-panel .fx-card__head {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0 !important;
    min-height: 20px; /* keep the toggle pill fully inside the card row */
    text-transform: none !important;
    letter-spacing: 0;
  }
  body .instrument-panel .fx-card__title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary, #fafafa);
  }
  body .instrument-panel .fx-card__body { margin-top: 8px; }
  body .instrument-panel .fx-card__body .param-group { margin-bottom: 8px !important; }
  body .instrument-panel .fx-card__body .param-group:last-child { margin-bottom: 0 !important; }

  /* ============================================================
     v9.11 — Sampler slot cards (Slots tab).
     ============================================================ */
  body .instrument-panel .sample-slot {
    margin-bottom: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
  }
  body .instrument-panel .sample-slot--filled {
    background: rgba(139, 92, 246, 0.07);
    border-color: rgba(139, 92, 246, 0.28);
  }
  body .instrument-panel .sample-slot__head {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0;
  }
  body .instrument-panel .sample-slot__row {
    flex: 0 0 auto;
    min-width: 44px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #a1a1aa);
  }
  body .instrument-panel .sample-slot__head .panel-select { flex: 1 1 auto; }
  body .instrument-panel .sample-slot__body { margin-top: 8px; }
  body .instrument-panel .sample-slot__body .param-group { margin-bottom: 8px !important; }
  body .instrument-panel .sample-slot__audition {
    margin-bottom: 8px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(139, 92, 246, 0.18);
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 7px;
    color: var(--text-primary, #fafafa);
    cursor: pointer;
  }
  /* v9.12 — preview playing: button reads as a "stop" affordance */
  body .instrument-panel .sample-slot__audition.is-playing {
    background: rgba(236, 72, 153, 0.30);
    border-color: var(--accent-secondary, #ec4899);
  }

  /* v9.13 — Kit | Pitched segmented toggle */
  body .instrument-panel .sample-mode-seg {
    display: inline-flex;
    gap: 0;
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 8px;
    overflow: hidden;
  }
  body .instrument-panel .sample-mode-opt {
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    border: none;
    color: var(--text-secondary, #a1a1aa);
    cursor: pointer;
    transition: background var(--duration-fast, 120ms), color var(--duration-fast, 120ms);
  }
  body .instrument-panel .sample-mode-opt + .sample-mode-opt {
    border-left: 1px solid rgba(139, 92, 246, 0.45);
  }
  body .instrument-panel .sample-mode-opt.is-active {
    background: var(--accent-primary, #8b5cf6);
    color: #fff;
  }
  body .instrument-panel .pitched-root .panel-select {
    width: 100%;
  }

  /* ============================================================
     v9.6 — Vibe cards. A tap-a-vibe grid at the top of each source
     tab: built-in presets/kits/snapshots, the user's saved vibes,
     and Save / Import action cards.
     ============================================================ */
  body .instrument-panel .vibe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
  }
  body .instrument-panel .vibe-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    text-align: left;
    padding: 8px 10px;
    min-height: 46px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    color: var(--text-primary, #fafafa);
    cursor: pointer;
    transition: background .14s, border-color .14s, transform .1s;
  }
  body .instrument-panel .vibe-card:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.40);
  }
  body .instrument-panel .vibe-card:active { transform: translateY(1px); }
  body .instrument-panel .vibe-card--active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(236, 72, 153, 0.18));
    border-color: rgba(139, 92, 246, 0.65);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.30) inset;
  }
  body .instrument-panel .vibe-card__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
  }
  body .instrument-panel .vibe-card__sub {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 9.5px;
    color: var(--text-secondary, #a1a1aa);
    letter-spacing: 0;
  }
  body .instrument-panel .vibe-card--ghost {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-secondary, #a1a1aa);
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  body .instrument-panel .vibe-card--ghost .vibe-card__label { font-weight: 600; }

  /* User-saved cards carry tiny Share / delete actions. */
  body .instrument-panel .vibe-card--user { position: relative; }
  body .instrument-panel .vibe-card__acts {
    display: flex;
    gap: 6px;
    margin-top: 4px;
  }
  body .instrument-panel .vibe-card__act {
    font-size: 9.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary, #a1a1aa);
    cursor: pointer;
  }
  body .instrument-panel .vibe-card__act:hover {
    background: rgba(139, 92, 246, 0.20);
    color: var(--text-primary, #fafafa);
  }
  body .instrument-panel .vibe-card__act--del:hover {
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.45);
  }

  /* Inline import field (replaces the Import card while active). */
  body .instrument-panel .vibe-import {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
  }
  body .instrument-panel .vibe-import__input {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    padding: 6px 8px;
    color: var(--text-primary, #fafafa);
    font-size: 11px;
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  }
  body .instrument-panel .vibe-import__input--err {
    border-color: rgba(239, 68, 68, 0.6);
  }
  body .instrument-panel .vibe-import__go {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.18);
    color: var(--text-primary, #fafafa);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
  }

  /* ============================================================
     Param groups — the tight 26-30 px row
     ============================================================ */
  body .instrument-panel .param-group {
    margin-bottom: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: block !important;
  }

  body .instrument-panel .param-group > label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #a1a1aa) !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
  }

  body .instrument-panel .param-group > label > span:first-child {
    color: var(--text-secondary, #a1a1aa);
  }

  body .instrument-panel .param-value {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--accent-primary, #c4b5fd) !important;
    background: rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 5px;
    padding: 1px 6px !important;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Help paragraph (the <small> under some sliders) — make it visible
     but secondary so it doesn't add bulk. */
  body .instrument-panel .param-group small {
    display: block;
    margin-top: 4px;
    font-size: 10.5px !important;
    color: rgba(161, 161, 170, 0.75) !important;
    line-height: 1.35;
  }

  /* ============================================================
     Sliders — slim, glowing on hover
     ============================================================ */
  body .instrument-panel .param-slider,
  body .instrument-panel .param-slider-compact {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 6px !important;
    background: linear-gradient(90deg,
      rgba(139, 92, 246, 0.50) 0%,
      rgba(236, 72, 153, 0.50) 100%),
      rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px !important;
    outline: none;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    transition: filter .15s, box-shadow .15s;
  }
  body .instrument-panel .param-slider:hover,
  body .instrument-panel .param-slider-compact:hover {
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.18);
  }
  body .instrument-panel .param-slider::-webkit-slider-thumb,
  body .instrument-panel .param-slider-compact::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff, #e7d7ff);
    border: 2px solid #8b5cf6;
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.40),
      0 0 0 1px rgba(139, 92, 246, 0.30);
    cursor: pointer;
    transition: transform .12s, box-shadow .15s;
  }
  body .instrument-panel .param-slider:active::-webkit-slider-thumb,
  body .instrument-panel .param-slider-compact:active::-webkit-slider-thumb {
    transform: scale(1.10);
    box-shadow:
      0 2px 6px rgba(139, 92, 246, 0.55),
      0 0 0 4px rgba(139, 92, 246, 0.18);
  }
  body .instrument-panel .param-slider::-moz-range-thumb,
  body .instrument-panel .param-slider-compact::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff, #e7d7ff);
    border: 2px solid #8b5cf6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
    cursor: pointer;
  }

  /* ============================================================
     Selects — glass cards with chevron
     ============================================================ */
  body .instrument-panel .panel-select,
  body .instrument-panel .panel-select-compact {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-primary, #fafafa) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    padding: 7px 32px 7px 10px !important;
    font-size: 13px !important;
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    background-image:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23a1a1aa" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    transition: border-color .15s, background-color .15s;
  }
  body .instrument-panel .panel-select:hover,
  body .instrument-panel .panel-select-compact:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
  }
  body .instrument-panel .panel-select:focus,
  body .instrument-panel .panel-select-compact:focus {
    outline: none;
    border-color: var(--accent-primary, #8b5cf6) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.22);
  }
  body .instrument-panel .panel-select optgroup {
    background: var(--surface-300, #18181b);
    color: var(--text-secondary, #a1a1aa);
    font-style: normal;
    font-weight: 600;
  }
  body .instrument-panel .panel-select option {
    background: var(--surface-300, #18181b);
    color: var(--text-primary, #fafafa);
  }

  /* ============================================================
     Preset row — wraps preset dropdown + inline tag
     ============================================================ */
  body .instrument-panel .param-group--preset {
    margin-bottom: 14px !important;
  }
  body .instrument-panel .panel-preset-tag {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    font-size: 10.5px !important;
    font-weight: 600;
    color: var(--text-secondary, #a1a1aa);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: none !important;
    letter-spacing: 0;
  }

  /* Legacy Waveform standalone row — hidden in favor of the new tag */
  body .instrument-panel #panelWaveformRow,
  body .instrument-panel .waveform-display {
    display: none !important;
  }

  /* ============================================================
     Section headers — gradient pill
     ============================================================ */
  body .instrument-panel .param-group h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 12px !important;
    padding: 6px 12px !important;
    background: linear-gradient(90deg,
      rgba(139, 92, 246, 0.18) 0%,
      rgba(139, 92, 246, 0.02) 100%);
    border-left: 3px solid var(--accent-primary, #8b5cf6);
    border-radius: 6px;
    color: var(--text-primary, #fafafa) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.10em;
  }
  body .instrument-panel .param-group h4 .v6-icon {
    width: 14px;
    height: 14px;
    color: var(--accent-primary, #c4b5fd);
  }
  /* v9.5 — the light-theme inline `border-top: 2px solid #e5e7eb` separators
     were removed from the section-header markup in index.html, so the old
     `.param-group[style*="border-top"]` neutralizing shim is gone with them. */

  /* ============================================================
     ADSR canvas — smaller, glassmorphic, glowing curve
     ============================================================ */
  body .instrument-panel .envelope-canvas {
    width: 100% !important;
    height: 72px !important;
    background: linear-gradient(180deg,
      rgba(139, 92, 246, 0.06) 0%,
      rgba(0, 0, 0, 0.30) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.18) !important;
    border-radius: 8px !important;
    display: block;
  }

  /* ============================================================
     Reset buttons — subtle outline, not full-width primary
     ============================================================ */
  body .instrument-panel .btn-secondary.btn-block,
  body .instrument-panel #resetEnvelopeBtn,
  body .instrument-panel #resetFilterBtn {
    width: 100% !important;
    padding: 7px 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-secondary, #a1a1aa) !important;
    border: 1px dashed rgba(255, 255, 255, 0.18) !important;
    border-radius: 7px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  body .instrument-panel .btn-secondary.btn-block:hover,
  body .instrument-panel #resetEnvelopeBtn:hover,
  body .instrument-panel #resetFilterBtn:hover {
    background: rgba(139, 92, 246, 0.10) !important;
    border-color: rgba(139, 92, 246, 0.45) !important;
    color: var(--text-primary, #fafafa) !important;
  }

  body .instrument-panel #previewBtn {
    width: 100% !important;
    margin-top: 14px !important;
    padding: 9px 12px !important;
    background: linear-gradient(135deg,
      rgba(139, 92, 246, 0.25),
      rgba(236, 72, 153, 0.25)) !important;
    border: 1px solid rgba(139, 92, 246, 0.50) !important;
    color: var(--text-primary, #fafafa) !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: filter .15s, transform .12s;
  }
  body .instrument-panel #previewBtn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
  }
  body .instrument-panel #previewBtn .v6-icon {
    width: 14px;
    height: 14px;
  }

  /* ============================================================
     Oscillator section (synth track + multi-osc melodic) — voice cards
     ============================================================ */
  body .instrument-panel .synth-osc-group {
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 9px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 6px 10px !important;
  }
  body .instrument-panel .synth-osc-label {
    grid-column: 1 / -1;
    margin: 0 0 4px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-primary, #c4b5fd) !important;
    padding: 0 !important;
  }
  body .instrument-panel .synth-osc-group .param-group-compact {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 3px;
  }
  body .instrument-panel .synth-osc-group .param-group-compact > label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 9.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #a1a1aa) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
  }
  body .instrument-panel .synth-osc-group .param-value {
    font-size: 10px !important;
    padding: 0 4px !important;
  }
  body .instrument-panel .synth-osc-group select.panel-select-compact {
    font-size: 11px !important;
    padding: 4px 22px 4px 7px !important;
  }
  body .instrument-panel .synth-osc-group input[type="range"] {
    height: 4px !important;
  }

  /* ============================================================
     LFO toggle row
     ============================================================ */
  body .instrument-panel .toggle-label {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    cursor: pointer;
    font-size: 12.5px !important;
    color: var(--text-primary, #fafafa) !important;
    text-transform: none !important;
    letter-spacing: 0;
    font-weight: 500 !important;
  }
  body .instrument-panel .toggle-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 18px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background .18s, border-color .18s;
    flex: 0 0 auto;
  }
  body .instrument-panel .toggle-checkbox::after {
    content: '';
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fafafa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
    transition: transform .18s;
  }
  body .instrument-panel .toggle-checkbox:checked {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    border-color: rgba(255, 255, 255, 0.10);
  }
  body .instrument-panel .toggle-checkbox:checked::after {
    transform: translateX(14px);
  }

  /* ============================================================
     Close button — keep the existing red-hover treatment
     ============================================================ */
  body .instrument-panel .panel-close {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    color: var(--text-secondary, #a1a1aa) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
  }
  body .instrument-panel .panel-close:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.50) !important;
    color: #fff !important;
  }
  body .instrument-panel .panel-close .v6-icon {
    width: 14px;
    height: 14px;
  }

  /* ============================================================
     Sticky footer — the big "Done" button
     ============================================================ */
  body .instrument-panel .panel-footer {
    flex: 0 0 auto;
    padding: 12px 18px !important;
    background: linear-gradient(180deg,
      rgba(18, 17, 24, 0.0) 0%,
      rgba(18, 17, 24, 0.95) 25%) !important;
    border-top: 1px solid rgba(139, 92, 246, 0.18) !important;
  }
  body .instrument-panel .panel-footer .btn-block {
    width: 100%;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    border-radius: 9px;
    cursor: pointer;
    transition: filter .12s, transform .12s, box-shadow .18s;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.18) inset,
      0 8px 22px -6px rgba(139, 92, 246, 0.55);
  }
  body .instrument-panel .panel-footer .btn-block:hover {
    filter: brightness(1.10);
    transform: translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.22) inset,
      0 12px 28px -6px rgba(139, 92, 246, 0.70);
  }
  body .instrument-panel .panel-footer .v6-icon {
    width: 14px;
    height: 14px;
  }

  /* ============================================================
     v9.5 — Two-button footer (Preview · Done) side by side.
     Done keeps the solid gradient primary look from .btn-block above;
     Preview keeps its translucent #previewBtn treatment so it reads as
     the secondary action. We just override the width/margin those rules
     set for the old full-width, in-body layout.
     ============================================================ */
  body .instrument-panel .panel-footer--actions {
    display: flex !important;
    gap: 10px;
    align-items: stretch;
  }
  body .instrument-panel .panel-footer--actions .btn-block {
    flex: 1 1 0;
    width: auto !important;
    margin: 0 !important;
  }
  body .instrument-panel .panel-footer--actions #previewBtn {
    width: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
}