/* ============================================================
   v6.x Composer modal — professional DAW-grade design
   ============================================================
   Targets the Ableton / Bitwig / Logic Pro aesthetic:
   - Generous whitespace, clear visual hierarchy
   - Card-based option grids with proper depth + hover lift
   - Slider sections share a consistent caption-pill pattern
   - Genre groups are colour-coded by family
   - Footer has clear primary/secondary/ghost button hierarchy

   Loaded inside @layer v6-components so v6-polish.css can still
   apply late-stage overrides.
*/

@layer v6-components {

  /* ============================================================
     Modal shell — glass frame, generous breathing room
     ============================================================ */
  .v6-composer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 900);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base, 180ms) var(--ease-out-quart);
  }
  .v6-composer--visible { opacity: 1; pointer-events: auto; }
  .v6-composer__backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
      rgba(20, 20, 30, 0.65) 0%,
      rgba(0, 0, 0, 0.85) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .v6-composer__card {
    position: relative;
    width: min(940px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,
      var(--surface-300, #18181b) 0%,
      var(--surface-200, #111113) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow:
      0 32px 80px rgba(0, 0, 0, 0.75),
      0 0 0 1px rgba(139, 92, 246, 0.12) inset,
      0 0 60px rgba(139, 92, 246, 0.08) inset;
    overflow: hidden;
    transform: scale(0.96) translateY(8px);
    transition: transform var(--duration-base, 180ms) var(--ease-out-quart);
  }
  .v6-composer--visible .v6-composer__card {
    transform: scale(1) translateY(0);
  }

  /* ============================================================
     Header — bigger title, glass surface
     ============================================================ */
  .v6-composer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(135deg,
      rgba(139, 92, 246, 0.14) 0%,
      rgba(236, 72, 153, 0.06) 60%,
      rgba(0, 0, 0, 0) 100%);
  }
  .v6-composer__title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .v6-composer__title .v6-icon {
    width: 22px;
    height: 22px;
    color: var(--accent-primary, #8b5cf6);
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.40));
  }
  .v6-composer__title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #fafafa);
    letter-spacing: -0.02em;
  }
  .v6-composer__subtitle {
    margin-left: 4px;
    color: var(--text-muted, #71717a);
    font-size: 12px;
    font-weight: 500;
    font-style: italic;
  }
  .v6-composer__close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: var(--text-muted, #71717a);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      background var(--duration-fast, 120ms),
      color var(--duration-fast, 120ms),
      border-color var(--duration-fast, 120ms);
  }
  .v6-composer__close:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.50);
    color: #fff;
  }

  /* ============================================================
     Body — generous padding, scrollable
     ============================================================ */
  .v6-composer__body {
    padding: 12px 28px 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  }
  .v6-composer__body::-webkit-scrollbar { width: 10px; }
  .v6-composer__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .v6-composer__body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.20);
    background-clip: padding-box;
  }

  /* ============================================================
     Section — strong header with left accent bar.
     Content and header share a `padding-left` so options line up
     under the header text, not at the modal edge.
     ============================================================ */
  .v6-composer__section {
    padding: 18px 0 14px;
    position: relative;
  }
  .v6-composer__section + .v6-composer__section {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .v6-composer__section h3 {
    margin: 0 0 14px;
    padding-left: 14px;
    font-family: var(--font-sans, system-ui);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-secondary, #a1a1aa);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    min-height: 24px;
  }
  .v6-composer__section h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 3px;
    background: linear-gradient(180deg,
      var(--accent-primary, #8b5cf6),
      var(--accent-secondary, #ec4899));
    border-radius: 2px;
  }

  /* Section CONTENT — indent to match the header so the layout reads as
     a clean column instead of "content at edge, header indented". The
     .v6-composer__opts and the sliders + scale picker all benefit. */
  .v6-composer__section > *:not(h3) {
    margin-left: 14px;
    margin-right: 6px;
  }

  /* ============================================================
     Caption pill — used in every slider section
     ============================================================ */
  .v6-composer__caption {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg,
      rgba(139, 92, 246, 0.20),
      rgba(139, 92, 246, 0.10));
    border: 1px solid rgba(139, 92, 246, 0.40);
    color: var(--text-primary, #fafafa);
    font-family: var(--font-sans, system-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    cursor: help;
    white-space: nowrap;
  }

  /* ?-help + dice buttons */
  .v6-composer__section-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted, #71717a);
    font-size: 10px;
    font-weight: 800;
    cursor: help;
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: all var(--duration-fast, 120ms);
  }
  .v6-composer__section-help:hover {
    background: rgba(139, 92, 246, 0.25);
    color: #fff;
    border-color: rgba(139, 92, 246, 0.50);
  }

  .v6-composer__dice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(236, 72, 153, 0.10);
    border: 1px solid rgba(236, 72, 153, 0.35);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition:
      background var(--duration-fast, 120ms),
      border-color var(--duration-fast, 120ms),
      transform var(--duration-fast, 120ms);
  }
  .v6-composer__dice-btn:hover {
    background: rgba(236, 72, 153, 0.30);
    border-color: var(--accent-secondary, #ec4899);
    transform: rotate(-12deg);
  }
  .v6-composer__dice-btn:active {
    transform: scale(0.92) rotate(8deg);
  }

  /* ============================================================
     Option grid — card-based for Mood, button-based for Genre/Length
     ============================================================ */
  .v6-composer__opts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }
  .v6-composer__opts--wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
  }

  /* Default option — used for Mood cards */
  .v6-composer__opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    min-height: 64px;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--text-primary, #fafafa);
    text-align: left;
    cursor: pointer;
    transition:
      background var(--duration-fast, 120ms),
      border-color var(--duration-fast, 120ms),
      transform var(--duration-fast, 120ms);
  }
  .v6-composer__opt:hover {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03));
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
  }
  .v6-composer__opt:active {
    transform: translateY(0);
  }
  .v6-composer__opt--active {
    background: linear-gradient(180deg,
      rgba(139, 92, 246, 0.35),
      rgba(139, 92, 246, 0.18));
    border-color: var(--accent-primary, #8b5cf6);
    box-shadow:
      0 0 0 1px rgba(139, 92, 246, 0.40) inset,
      0 4px 16px rgba(139, 92, 246, 0.25);
  }
  .v6-composer__opt--active .v6-composer__opt-label {
    color: #ffffff;
  }
  .v6-composer__opt-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #fafafa);
    line-height: 1.2;
  }
  .v6-composer__opt-hint {
    font-size: 10px;
    color: var(--text-muted, #71717a);
    line-height: 1.35;
  }

  /* ============================================================
     Genre groups — colour-coded pills
     ============================================================ */
  .v6-composer__genre-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 14px;
    background: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 4px;
  }
  .v6-composer__genre-group[data-group="auto"]        { border-left: 3px solid #71717a; }
  .v6-composer__genre-group[data-group="electronic"]  { border-left: 3px solid #06b6d4; }
  .v6-composer__genre-group[data-group="beats"]       { border-left: 3px solid #f59e0b; }
  .v6-composer__genre-group[data-group="loud"]        { border-left: 3px solid #ef4444; }
  .v6-composer__genre-group[data-group="atmospheric"] { border-left: 3px solid #6366f1; }
  .v6-composer__genre-group[data-group="other"]       { border-left: 3px solid #a855f7; }

  .v6-composer__genre-header {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: var(--text-muted, #a1a1aa);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 2px 8px 2px 4px;
    margin-right: 4px;
    font-weight: 700;
    line-height: 1;
  }
  .v6-composer__opt--genre {
    padding: 5px 12px;
    min-height: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 12px;
  }
  .v6-composer__opt--genre:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    transform: none;
  }
  .v6-composer__opt--genre.v6-composer__opt--active {
    background: linear-gradient(180deg,
      rgba(139, 92, 246, 0.50),
      rgba(139, 92, 246, 0.30));
    border-color: var(--accent-primary, #8b5cf6);
  }
  /* Loud group active = use red accent (rock/metal) */
  .v6-composer__genre-group[data-group="loud"] .v6-composer__opt--active {
    background: linear-gradient(180deg,
      rgba(239, 68, 68, 0.55),
      rgba(239, 68, 68, 0.30));
    border-color: #ef4444;
    box-shadow:
      0 0 0 1px rgba(239, 68, 68, 0.40) inset,
      0 4px 16px rgba(239, 68, 68, 0.30);
  }

  /* ============================================================
     Slider sections — subtle background band so they visually read
     as "interactive control" zones distinct from card sections.
     ============================================================ */
  .v6-composer__section--slider {
    background: linear-gradient(180deg,
      rgba(139, 92, 246, 0.03),
      rgba(0, 0, 0, 0.10));
  }
  .v6-composer__section--slider h3 {
    align-items: baseline;
  }
  /* Slider + scale row inside slider sections should NOT take the
     full extra-indent because they already look spacious; tighten. */
  .v6-composer__section--slider > .v6-composer__slider,
  .v6-composer__section--slider > .v6-composer__slider-scale,
  .v6-composer__section--slider > .v6-composer__slider-scale--abs {
    margin-right: 14px;
  }

  .v6-composer__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    /* Track must be visible at BOTH ends — the old gradient started near-
       transparent on the left which made the thumb look like it floated. */
    background:
      linear-gradient(90deg,
        rgba(139, 92, 246, 0.55) 0%,
        rgba(236, 72, 153, 0.65) 100%),
      rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    margin: 12px 0 6px;
    cursor: pointer;
    outline: none;
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.45) inset,
      0 0 12px rgba(139, 92, 246, 0.15);
  }
  .v6-composer__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 30% 30%,
      #ffffff 0%, #e5e7eb 70%);
    border: 2px solid var(--accent-primary, #8b5cf6);
    border-radius: 50%;
    cursor: pointer;
    box-shadow:
      0 0 0 4px rgba(139, 92, 246, 0.22),
      0 4px 12px rgba(0, 0, 0, 0.50);
    transition: transform var(--duration-fast, 120ms);
  }
  .v6-composer__slider::-webkit-slider-thumb:hover {
    transform: scale(1.10);
  }
  .v6-composer__slider::-webkit-slider-thumb:active {
    transform: scale(1.05);
  }
  .v6-composer__slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e5e7eb 70%);
    border: 2px solid var(--accent-primary, #8b5cf6);
    border-radius: 50%;
    cursor: pointer;
  }
  .v6-composer__slider:focus-visible::-webkit-slider-thumb {
    box-shadow:
      0 0 0 6px rgba(139, 92, 246, 0.35),
      0 4px 12px rgba(0, 0, 0, 0.50);
  }

  /* Default (Energy / Density / Complexity) — flex-distributed stops */
  .v6-composer__slider-scale {
    display: flex;
    justify-content: space-between;
    margin: 2px 4px 4px;
  }
  .v6-composer__slider-tick {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: var(--text-muted, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    user-select: none;
    cursor: default;
    flex: 1;
  }
  .v6-composer__slider-tick:first-child { text-align: left; }
  .v6-composer__slider-tick:last-child { text-align: right; }

  /* Length + Tempo sliders carry .--abs on their scale container — ticks
     are positioned ABSOLUTELY by their own --tick-pos var, so the
     numbers line up with the actual slider thumb positions (1/4/7/12
     and 70/90/110/128/140/170 aren't evenly spaced). */
  .v6-composer__slider-scale--abs {
    display: block;
    position: relative;
    height: 18px;
    padding: 0 4px;
  }
  .v6-composer__slider-scale--abs .v6-composer__slider-tick {
    position: absolute;
    transform: translateX(-50%);
    left: var(--tick-pos);
    flex: none;
    text-align: center;
    white-space: nowrap;
    max-width: 110px;
  }
  /* First tick anchors at left edge (no overflow off the left side). */
  .v6-composer__slider-scale--abs .v6-composer__slider-tick:first-child {
    transform: none;
    left: 0;
    text-align: left;
  }
  /* Last tick anchors at right edge (no overflow off the right side). */
  .v6-composer__slider-scale--abs .v6-composer__slider-tick:last-child {
    transform: none;
    left: auto;
    right: 0;
    text-align: right;
  }

  /* ============================================================
     Length: the structure that was drawn, and the dice that re-rolls it
     ============================================================
     Item 3.4 — Length picks a SIZE and the app draws a form for it, so the
     panel has to show which one. The row sits under the size ticks because it
     is the consequence of them, and the dice sits with it because that is the
     thing it re-rolls (the section 🎲 buttons live in their own h3 rows).
  */
  .v6-composer__structure {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 14px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    /* A token, not a literal white wash: a hardcoded rgba(255,255,255,…) is
       invisible on a light ground, which is the exact class of rule item 7.1
       is scheduled to strip out of polish.css. */
    background: var(--v6-panel-raised, var(--surface-400, #1f1f23));
  }
  .v6-composer__structure-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary, #a1a1aa);
    /* A 13-section epic must wrap, not stretch the card. */
    overflow-wrap: anywhere;
  }
  .v6-composer__structure .v6-composer__dice-btn {
    flex: 0 0 auto;
  }

  /* ============================================================
     Length-specific slider: gradient + five size ticks
     (Loop / Short / Standard / Long / Epic)
     ============================================================ */
  .v6-composer__section--length .v6-composer__slider {
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(139, 92, 246, 0.35) 30%,
      rgba(236, 72, 153, 0.50) 70%,
      rgba(239, 68, 68, 0.55) 100%);
  }

  /* ============================================================
     Scale section — dropdown + descriptor
     ============================================================ */
  .v6-composer__section--scale .v6-composer__scale-select,
  #composerProvider {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
      var(--surface-400, #1f1f23);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-primary, #fafafa);
    font-family: var(--font-sans, system-ui);
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
    cursor: pointer;
    transition: border-color var(--duration-fast, 120ms);
  }
  .v6-composer__section--scale .v6-composer__scale-select:focus,
  #composerProvider:focus-visible {
    outline: none;
    border-color: var(--accent-primary, #8b5cf6);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.20);
  }
  #hybridBandPanel > p {
    color: var(--text-secondary, #a1a1aa);
    font-size: 13px;
    line-height: 1.55;
    margin: 10px 0;
  }
  #hybridBandPanel > [role="status"]:empty { display: none; }
  .v6-hybrid-advanced { margin-top: 14px; font-size: 12px; }
  .v6-hybrid-advanced > summary {
    color: var(--text-secondary, #a1a1aa);
    cursor: pointer;
    padding: 8px 0;
  }
  .v6-hybrid-advanced > div {
    padding: 12px;
    background: var(--surface-300, #18181b);
    border: 1px solid var(--border-default, rgba(255,255,255,.1));
    border-radius: 8px;
    line-height: 1.6;
  }
  .v6-hybrid-advanced select, .v6-hybrid-advanced input[type="number"] {
    max-width: 100%;
    padding: 6px 8px;
    color: var(--text-primary, #fafafa);
    background: var(--surface-400, #1f1f23);
    border: 1px solid var(--border-default, rgba(255,255,255,.1));
    border-radius: 6px;
  }
  .v6-hybrid-advanced button { margin: 6px 6px 6px 0; }
  /* item 3.7 — Scale is Root × Mode. Both selects want 100% of the section, so
     inside the row they size to content: a narrow fixed column for the twelve
     root names and the rest for the mode. `min-width: 0` because a <select>
     will not shrink below its widest option without it. */
  .v6-composer__scale-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .v6-composer__section--scale .v6-composer__scale-row .v6-composer__scale-select {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .v6-composer__section--scale .v6-composer__scale-select--root {
    flex: 0 0 72px;
  }
  .v6-composer__section--scale .v6-composer__scale-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .v6-composer__scale-desc {
    margin: 8px 2px 0;
    color: var(--text-muted, #71717a);
    font-size: 11px;
    font-style: italic;
    line-height: 1.45;
  }

  /* ============================================================
     Tempo input chip — number input keeps its size
     ============================================================ */
  .v6-composer__tempo-input-wrap {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .v6-composer__tempo-input {
    width: 70px;
    padding: 5px 8px;
    background: var(--surface-400, #1f1f23);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--text-primary, #fafafa);
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
  }
  .v6-composer__tempo-input:focus {
    outline: none;
    border-color: var(--accent-primary, #8b5cf6);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.30);
  }
  .v6-composer__tempo-unit {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--text-muted, #71717a);
    text-transform: uppercase;
  }

  /* ============================================================
     Footer — 3-zone layout, clear hierarchy
     ============================================================ */
  .v6-composer__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 26px;
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.30),
      rgba(0, 0, 0, 0.50));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .v6-composer__footer > [data-action="close"] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted, #71717a);
    height: 36px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast, 120ms);
    /* Defensive — defeat any inherited text-transform or icon pseudo */
    text-transform: none;
    letter-spacing: 0;
  }
  .v6-composer__footer > [data-action="close"]::before,
  .v6-composer__footer > [data-action="close"]::after {
    content: none !important;
  }
  .v6-composer__footer > [data-action="close"]:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.20);
    color: #fff;
  }
  /* "Surprise me" — accent ghost, sits between Cancel and Compose */
  .v6-composer__footer > [data-action="random-all"] {
    margin-left: auto;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 18px;
    background: rgba(236, 72, 153, 0.12);
    border: 1px solid rgba(236, 72, 153, 0.50);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: all var(--duration-fast, 120ms);
    white-space: nowrap;
    min-width: auto;
  }
  .v6-composer__footer > [data-action="random-all"] > * {
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  .v6-composer__footer > [data-action="random-all"]:hover {
    background: rgba(236, 72, 153, 0.25);
    border-color: var(--accent-secondary, #ec4899);
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.30);
  }
  .v6-composer__footer > [data-action="random-all"] .v6-composer__dice {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-size: 15px;
  }
  .v6-composer__footer > [data-action="random-all"]:hover .v6-composer__dice {
    transform: rotate(360deg);
  }

  /* Compose hero — gradient + glow */
  .v6-composer__footer > .v6-composer__go,
  .v6-composer__footer > [data-action="compose"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 24px;
    background: linear-gradient(135deg,
      var(--accent-primary, #8b5cf6) 0%,
      var(--accent-secondary, #ec4899) 100%);
    border: 1px solid rgba(236, 72, 153, 0.60);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow:
      0 6px 20px rgba(139, 92, 246, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    transition: all var(--duration-fast, 120ms);
    min-width: 160px;
    justify-content: center;
  }
  .v6-composer__footer > .v6-composer__go:hover {
    filter: brightness(1.10);
    transform: translateY(-1px);
    box-shadow:
      0 8px 24px rgba(139, 92, 246, 0.45),
      0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  }
  .v6-composer__footer > .v6-composer__go:active {
    transform: translateY(0);
  }
  .v6-composer__footer > .v6-composer__go .v6-icon {
    width: 16px;
    height: 16px;
  }

  /* ============================================================
     Responsive — gracefully degrade at narrower widths
     ============================================================ */
  @media (max-width: 720px) {
    .v6-composer__card {
      width: calc(100vw - 16px);
      max-height: calc(100vh - 16px);
      border-radius: 10px;
    }
    .v6-composer__body { padding: 4px 16px 12px; }
    .v6-composer__head, .v6-composer__footer { padding: 14px 18px; }
    .v6-composer__opts {
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }
  }
}

/* ============================================================
   v8 Compose redesign — live summary + Advanced collapsible.
   Unlayered (these selectors are unique to the composer).
   ============================================================ */
.v6-composer__summary {
  margin: 4px 0 6px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.16), rgba(236, 72, 153, 0.11));
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
  color: var(--text-primary, #fafafa);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.v6-composer__advanced {
  margin-top: 10px;
  border-top: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
}
.v6-composer__advanced-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--text-secondary, #a1a1aa);
  font-size: 13px;
  font-weight: 600;
}
.v6-composer__advanced-summary::-webkit-details-marker { display: none; }
.v6-composer__advanced-summary:hover { color: var(--text-primary, #fafafa); }
.v6-composer__advanced-chevron { margin-left: auto; transition: transform .15s ease; }
.v6-composer__advanced[open] .v6-composer__advanced-chevron { transform: rotate(180deg); }
.v6-composer__advanced-body { padding-top: 2px; }

/* ============================================================
   item 3.1 — "Describe it (optional)": the free-text brief.
   Unlayered, like the summary above it (selectors unique to the composer).
   ============================================================ */
.v6-composer__brief {
  width: 100%;
  min-height: 56px;
  max-height: 140px;
  padding: 9px 12px;
  margin-top: 4px;
  box-sizing: border-box;
  resize: vertical;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--surface-400, #1f1f23);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text-primary, #fafafa);
  font-family: var(--font-sans, system-ui);
  font-size: 13px;
  line-height: 1.45;
}
.v6-composer__brief::placeholder {
  color: var(--text-muted, #71717a);
  font-style: italic;
}
.v6-composer__brief:focus {
  outline: none;
  border-color: var(--accent-primary, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.20);
}
.v6-composer__brief-foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
/* The hint takes the slack so the counter stays pinned to the right edge. */
.v6-composer__brief-foot .v6-composer__scale-desc {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.v6-composer__brief-count {
  flex: none;
  color: var(--text-muted, #71717a);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* Reviewed MIDI choices use the same compact dark form controls as Compose. */
#hybridBandPanel:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
#hybridBandPanel > p, #hybridBandPanel > .v6-composer__check { flex-basis: 100%; margin: 0; }
#hybridBandPanel p, .v6-hybrid-band-card p { color: var(--text-secondary, #a1a1aa); font-size: 12px; line-height: 1.5; }
#hybridBandPanel label, .v6-hybrid-band-card label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
#hybridBandPanel select, #hybridBandPanel input[type="number"], .v6-hybrid-band-card select {
  min-width: 0; max-width: 100%; padding: 7px; border-radius: 6px;
  background: var(--surface-300, #18181b); color: var(--text-primary, #fafafa);
  border: 1px solid var(--border-default, rgba(255,255,255,.1));
}
#hybridBandPanel input[type="number"] { width: 72px; }
.v6-hybrid-band-card { max-height: calc(100vh - 100px); overflow-y: auto; }
.v6-hybrid-band-card h3 { margin: 0; font-size: 14px; }