/* ============================================================
   Sound Designer — founder handoff port (see the integration
   handoff README). All color resolves from the screen-scoped
   token re-cut in tokens.css; this file composes tokens and
   channel alphas only.

   Three defects from the handoff are repaired here, each marked
   with a FIX comment at the rule it lands on:
   1. Era panel blow-out — the 8-across era strip could not fit a
      phone, and tab-centering scrolled every scrollable ancestor
      sideways. The strip wraps 4-across under 1100px, and the
      category rail is the only thing the rail scroll ever moves
      (SoundDesigner.tsx scrolls rail.scrollLeft directly).
   2. Sticky-scroll overlap — the nav row and mode tabs were two
      independent sticky elements with no backdrop, so page
      content slid through them. They now ride one sticky
      `.sd-topbar` group masked by the canvas fade the handoff
      already specified for desktop.
   3. Desktop rail bounce — the handoff animated `padding-right`
      on the canvas (a layout property; the whole canvas
      re-wrapped mid-flight). Per the handoff README's prescribed
      approach: the rail is a SIBLING of the canvas, both animate
      transform only, and the canvas content width is pinned to
      calc(100vw - var(--sd-rail-w) - 48px) so chips can never
      rewrap. No padding, width, margin or grid property animates.
   ============================================================ */

.sd-screen {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-rail: cubic-bezier(0.22, 1, 0.32, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  min-height: 100vh;
  background: var(--canvas-app);
  color: var(--t1);
  font-family: var(--body);
  font-weight: 300;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
.sd-screen * { -webkit-tap-highlight-color: transparent; }
.sd-screen button,
.sd-screen input,
.sd-screen textarea { font-family: inherit; }
.sd-screen ::selection { background: rgba(var(--accent-rgb), 0.25); color: var(--t1); }

/* ── Aurora — grainy candlelit atmosphere, subtle ──
   Fixed, but deliberately OUTSIZING the viewport on both ends, and never
   bottom-anchored: an inset-sized fixed layer resizes on every iOS
   URL-bar collapse (resetting the shader canvas mid-scroll), and iOS
   also lags fixed layers during the collapse and rubber-band overscroll
   — an exactly-viewport-sized field then shows its bottom edge mid-page
   (the founder's "shadow in the middle"). Constant lvh height plus 80px
   overshoot each way keeps the edges permanently off screen. */
.sd-aurora {
  position: fixed;
  top: -80px;
  left: 0;
  right: 0;
  height: calc(100vh + 160px);
  height: calc(100lvh + 160px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: var(--sd-aurora-field);
  /* Pin the field to its own compositor layer — iOS re-rasterizes
     un-promoted fixed layers under scrolling content, which flickers. */
  transform: translateZ(0);
}
.sd-aurora::before {
  content: '';
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}
.sd-aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sd-aurora-vignette);
}
:root[data-theme='light'] .sd-aurora { opacity: 0.5; }
:root[data-theme='light'] .sd-aurora::before { opacity: 0.04; mix-blend-mode: multiply; }
/* Shader live: it owns the grain, so drop the CSS noise tile */
.sd-aurora.has-shader::before { display: none; }
.sd-aurora canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── Canvas — the scrolling builder column ──
   Promoted to its own compositor layer: scrolling content painted
   directly over a fixed WebGL canvas is iOS Safari's classic
   background-flicker recipe. (Desktop's transform rule below already
   promotes it there; sticky children are unaffected, and the fixed
   overlays are siblings by design, so nothing re-anchors.) */
.sd-canvas {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: 40px;
  transform: translateZ(0);
}
@media (min-width: 960px) { .sd-canvas { max-width: 720px; } }

/* ── Top nav ──
   Nothing on this screen anchors (founder call): the nav row and the
   mode tabs live at the top of the page in normal flow and scroll away
   with it. Static bars also sidestep iOS Safari's sticky jitter and the
   masked-band seams the anchored version needed. */
.topnav {
  display: flex;
  align-items: center;
  padding: 18px 20px 10px;
  gap: 12px;
}
.backbtn {
  background: var(--surface-chip);
  border: 1px solid var(--border-struct);
  color: var(--t2);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.backbtn:hover { background: var(--surface-chip-hover); color: var(--t1); border-color: var(--border-struct-strong); }
.navtitle { font-family: var(--body); font-size: 17px; font-weight: 500; color: var(--t1); letter-spacing: -0.01em; flex: 1; }
.nav-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
  padding: 6px 10px;
  background: var(--surface-slab);
  border: 1px solid var(--border-struct);
  border-radius: var(--radius-full);
}
.nav-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t5); transition: all 0.3s; }
.nav-live.on .nav-live-dot { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8); }
.nav-live.on { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }

/* ── Theme toggle ── */
.themebtn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-slab);
  border: 1px solid var(--border-struct);
  color: var(--t3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s var(--ease);
}
.themebtn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.35); background: var(--surface-chip); }
.themebtn svg { width: 16px; height: 16px; }
.themebtn .ic-sun { display: none; }
:root[data-theme='light'] .themebtn .ic-sun { display: block; }
:root[data-theme='light'] .themebtn .ic-moon { display: none; }

/* ── Mode tabs — refined pill set, in normal flow ──
   No backdrop blur: the slab is already opaque, and iOS Safari drops
   backdrop-filter layers mid-scroll (the founder's recording shows the
   compositing blink), so the blur bought nothing but the glitch. */
.sd-modes {
  margin: 6px 20px 0;
  padding: 4px;
  background: var(--surface-slab);
  border: 1px solid var(--border-struct);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.styler-tab {
  padding: 11px 4px;
  border-radius: 10px;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--t3);
  cursor: pointer;
  text-align: center;
  transition: color 0.2s, background 0.2s;
  border: none;
  background: transparent;
  white-space: nowrap;
}
.styler-tab:hover { color: var(--t1); }
.styler-tab.active {
  background: var(--action-nav);
  color: var(--sd-cta-ink);
  font-weight: 500;
  box-shadow: var(--sd-modes-active-shadow);
}

/* ── Live prompt stage — the centerpiece ── */
.sd-stage {
  margin: 18px 20px 22px;
  padding: 28px 24px 22px;
  border-radius: 22px;
  background: var(--surface-slab);
  border: 1px solid var(--border-struct);
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sd-stage.active { border-color: rgba(var(--accent-rgb), 0.28); background: var(--sd-stage-active-bg); }
.sd-stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sd-stage-line);
  opacity: 0;
  transition: opacity 0.4s;
}
.sd-stage.active::before { opacity: 1; }

.sd-stage-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sd-stage-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sd-stage-kicker::before { content: ''; width: 14px; height: 1px; background: currentColor; }
.sd-stage.active .sd-stage-kicker { color: var(--accent); }

.sd-stage-ring { width: 32px; height: 32px; position: relative; }
.sd-stage-ring svg { transform: rotate(-90deg); display: block; }
.sd-stage-ring circle { fill: none; stroke-width: 2.5; }
.sd-stage-ring .bg { stroke: rgba(var(--ivory-rgb), 0.08); }
.sd-stage-ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 0.5s var(--ease), stroke 0.3s; }
.sd-stage-ring.warn .fg { stroke: var(--copper); }
.sd-stage-ring.over .fg { stroke: var(--rose); }
.sd-stage-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--t3);
  letter-spacing: 0.04em;
}

.sd-stage-prompt {
  font-family: var(--display);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.4;
  color: var(--t1);
  min-height: 56px;
  letter-spacing: -0.005em;
  transition: color 0.3s;
  text-wrap: pretty;
}
.sd-stage-prompt em { font-style: normal; color: var(--accent); font-weight: 600; }
.sd-stage-prompt .sep { color: var(--label-ink); margin: 0 4px; font-style: normal; }
.sd-stage-empty { font-family: var(--display); color: var(--t3); font-size: 22px; line-height: 1.35; font-weight: 400; }

.sd-stage-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-struct);
}
/* Shuffle + Clear only matter once there's something to act on */
.sd-stage-actions .sd-stage-shuffle,
.sd-stage-actions .sd-stage-clear { display: none; }
.sd-stage-actions.on .sd-stage-shuffle,
.sd-stage-actions.on .sd-stage-clear { display: flex; }
.cta:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
.cta:disabled:hover { filter: none; transform: none; }
/* Generate spans the full width, beneath Shuffle + Clear */
.sd-stage-actions .cta { grid-column: 1 / -1; margin-top: 2px; }
.sd-stage-clear,
.sd-stage-shuffle {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-struct-strong);
  color: var(--t3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sd-stage-clear:hover { color: var(--rose); border-color: rgba(var(--rose-rgb), 0.4); }
.sd-stage-shuffle:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }

/* ── Hero ── */
.sd-hero { padding: 6px 24px 2px; }
.sd-hero-title { font-family: var(--display); font-weight: 300; font-size: 36px; line-height: 1.05; letter-spacing: -0.015em; color: var(--t1); }
.sd-hero-title em { font-style: normal; color: var(--accent); font-weight: 600; }
.sd-hero-sub { font-size: 13.5px; color: var(--t3); line-height: 1.6; margin-top: 10px; max-width: 44ch; }

/* ── Vibes — editorial preset discs ── */
.sd-vibes { margin: 14px 0 22px; position: relative; }
.sd-vibes-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 24px 14px; }
.sd-vibes-title { font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--t1); }
.sd-vibes-title::before { content: '— '; color: var(--accent); font-style: normal; }
.sd-vibes-more {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-ink);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.sd-vibes-more:hover { color: var(--accent); }
.sd-vibes-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 24px 10px;
  scroll-snap-type: x mandatory;
}
.sd-vibes-row::-webkit-scrollbar { display: none; }
.sd-vibe {
  flex-shrink: 0;
  width: 170px;
  scroll-snap-align: start;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: var(--sd-vibe-bg);
  border: 1px solid var(--border-struct-strong);
  cursor: pointer;
  box-shadow: var(--sd-vibe-shadow);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
  text-align: left;
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}
.sd-vibe::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--sd-vibe-halo);
  filter: blur(12px);
  opacity: 0.6;
  transition: opacity 0.3s, transform 0.4s;
}
.sd-vibe:hover::before { opacity: 1; transform: scale(1.2); }
.sd-vibe:hover { border-color: rgba(var(--accent-rgb), 0.3); transform: translateY(-2px); }
.sd-vibe:active { transform: translateY(0) scale(0.985); }
.sd-vibe.active {
  border-color: var(--chip-selected-edge);
  box-shadow: inset 0 0 0 0.5px rgba(var(--accent-rgb), 0.3), 0 0 20px -4px rgba(var(--accent-rgb), 0.3);
}
.sd-vibe-glyph {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-ink);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.sd-vibe-title { font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--t1); line-height: 1.1; margin-bottom: 6px; position: relative; z-index: 1; }
.sd-vibe-desc { font-size: 12px; color: var(--t3); line-height: 1.45; position: relative; z-index: 1; font-family: var(--body); font-weight: 300; min-height: 34px; }

/* ── Category rail + panel — master/detail ──
   Opaque, no backdrop blur: iOS Safari drops backdrop-filter layers
   while the rail scrolls (the founder's recording shows the whole rail
   strip blink out), so the translucent-blur treatment trades away. */
.sd-workspace {
  margin: 0 20px;
  padding: 0;
  background: var(--dt-raised);
  border: 1px solid var(--border-struct);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
/* Reference / Fix panes keep the Build pane's breathing room below the
   mode tabs — their card was riding flush against the tab pill (the
   founder's "overlapping on the tab bar"). */
#styler-ref .sd-workspace,
#styler-fix .sd-workspace { margin-top: 18px; }

.sd-catrail {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  /* Horizontal ONLY — founder call: zero vertical movement. Without
     this, overflow-y computes to auto beside overflow-x: auto, and any
     sub-pixel of vertical overflow lets iOS elastic-drag the whole rail
     up and down. The active underline sits at bottom: 0 (not -1px) so
     nothing overflows this axis to begin with. */
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 8px 8px 0;
  background: var(--dt-well);
  border-bottom: 1px solid var(--border-struct);
}
.sd-catrail::-webkit-scrollbar { display: none; }
.sd-catbtn {
  padding: 12px 14px 13px;
  border-radius: 12px 12px 0 0;
  background: transparent;
  border: none;
  color: var(--t3);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.sd-catbtn-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t5); transition: all 0.3s; }
.sd-catbtn.has .sd-catbtn-dot { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.7); }
.sd-catbtn:hover { color: var(--t1); }
.sd-catbtn.on { color: var(--accent-hi); background: var(--dt-float); }
.sd-catbtn.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1px; background: var(--accent); }
.sd-catbtn-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--label-ink); transition: color 0.2s; }
.sd-catbtn.has .sd-catbtn-n { color: var(--accent); }

.sd-panel { padding: 22px 20px 18px; min-height: 240px; display: none; animation: sdFade 0.25s var(--ease); }
.sd-panel.on { display: block; }
@keyframes sdFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.sd-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sd-panel-title { font-family: var(--display); font-weight: 500; font-size: 27px; line-height: 1.1; color: var(--t1); letter-spacing: -0.01em; }
.sd-panel-count { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-ink); }
.sd-panel-count b { color: var(--accent); font-weight: 400; }
.sd-panel-hint { color: var(--t3); margin-bottom: 18px; font-family: var(--body); font-weight: 300; font-size: var(--fs-meta); }

/* ── Chips ── */
.styler-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.stchip {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-slab);
  border: 1px solid var(--border-struct);
  font-size: 12.5px;
  color: var(--t2);
  font-weight: 300;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 70ms var(--ease);
  letter-spacing: 0.005em;
}
.stchip:hover { background: var(--surface-chip); border-color: var(--border-struct-strong); color: var(--t1); }
.stchip:active { transform: scale(0.96); }
.stchip:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.4); }
/* Selected — the Library-blue treatment (the approved chip re-skin) */
.stchip.on {
  background: var(--chip-selected);
  border-color: var(--chip-selected-edge);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--lib-rgb), 0.22), inset 0 1px 0 var(--sd-chip-on-inset-hi);
}
.stchip.on:hover { background: var(--chip-selected-hover); border-color: rgba(var(--accent-rgb), 0.6); }

/* Instruments keep the hand-rolled three-state chip (include / exclude) */
#sb-instruments .stchip.on {
  background: var(--sd-chip-on-bg);
  border-color: rgba(var(--accent-rgb), 0.42);
  color: var(--accent-hi);
  box-shadow: inset 0 1px 0 rgba(var(--ivory-rgb), 0.08), inset 0 0 0 0.5px rgba(var(--accent-rgb), 0.22);
}
.stchip.exclude {
  background: rgba(var(--rose-rgb), 0.06);
  border-color: rgba(var(--rose-rgb), 0.28);
  color: var(--rose);
  text-decoration: line-through;
  text-decoration-thickness: 0.5px;
  text-decoration-color: rgba(var(--rose-rgb), 0.6);
}
.stchip.exclude:hover { background: rgba(var(--rose-rgb), 0.11); }

/* Instrument-specific prefix glyph */
#sb-instruments .stchip { padding-left: 27px; }
#sb-instruments .stchip::after {
  content: '+';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--label-ink);
  font-weight: 300;
  transition: color 0.2s;
  line-height: 1;
}
#sb-instruments .stchip.on::after { content: '✓'; color: var(--accent); }
#sb-instruments .stchip.exclude::after { content: '−'; color: var(--rose); }
#sb-instruments .stchip:hover::after { color: var(--t2); }

/* ── Search field inside panels ── */
.sd-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--control-inset);
  border: 1px solid var(--border-struct);
  margin-bottom: 14px;
}
.sd-search:focus-within { border-color: rgba(var(--accent-rgb), 0.4); }
.sd-search svg { color: var(--label-ink); flex-shrink: 0; }
/* 16px for the same iOS focus-zoom reason as .styler-input */
.sd-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--t1); font-size: 16px; font-family: var(--body); font-weight: 300; }
.sd-search input::placeholder { color: var(--label-ink); }
.stchip.sd-hidden { display: none; }

/* ── Inputs ── */
.styler-input,
.styler-textarea {
  width: 100%;
  background: var(--control-inset);
  border: 1px solid var(--border-struct);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  color: var(--t1);
  /* 16px floor on every editable field: iOS Safari auto-zooms the whole
     page on focusing anything smaller, leaving it sideways-pannable
     (founder report). Desktop already specified 16px. */
  font-size: 16px;
  font-family: var(--body);
  font-weight: 300;
  outline: none;
  -webkit-appearance: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  margin-top: 14px;
}
.styler-textarea { resize: none; min-height: 120px; line-height: 1.65; font-family: var(--display); }
.styler-input:focus,
.styler-textarea:focus { border-color: rgba(var(--accent-rgb), 0.55); background: var(--control-inset-hover); box-shadow: var(--auth-focus-ring); }
.styler-input::placeholder,
.styler-textarea::placeholder { color: var(--label-ink); }

/* ── Vocals panel — split matrix with segmented controls ── */
.sd-vocal-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.sd-vocal-box { background: var(--control-inset); border: 1px solid var(--border-struct); border-radius: var(--radius-md); padding: 12px; transition: border-color 0.2s; }
.sd-vocal-box.has-selection { border-color: rgba(var(--accent-rgb), 0.28); }
.sd-vocal-box-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label-ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sd-vocal-box-label svg { opacity: 0.7; }
.sd-seg { display: flex; gap: 2px; background: var(--dt-void); border: 1px solid var(--border-struct); border-radius: var(--radius-sm); padding: 2px; }
.sd-seg-btn {
  flex: 1 1 auto;
  padding: 7px 6px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--t3);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
  min-width: 40px;
}
.sd-seg-btn:hover { color: var(--t1); background: var(--surface-chip); }
.sd-seg-btn.on {
  background: var(--sd-seg-on-bg);
  color: var(--accent-hi);
  box-shadow: inset 0 1px 0 rgba(var(--ivory-rgb), 0.08), inset 0 0 0 0.5px rgba(var(--accent-rgb), 0.35);
}
.sd-subhead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label-ink);
}
.sd-subhead::after { content: ''; flex: 1; height: 1px; background: var(--border-struct); }

/* ── Era strip — timeline-style selector ──
   FIX 1: 8 mono buttons can never fit 4-across-less than ~410px of
   panel; under 1100px the strip wraps to a 4×2 grid instead of
   blowing the panel out sideways. Desktop keeps the full 8-across
   timeline the handoff drew. */
.sd-era-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px;
  background: var(--dt-void);
  border: 1px solid var(--border-struct);
  border-radius: var(--radius-md);
}
.sd-era-btn {
  padding: 12px 4px 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--t3);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.02em;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  position: relative;
}
.sd-era-btn::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--t5);
  transition: all 0.25s;
}
.sd-era-btn:hover { color: var(--t1); }
.sd-era-btn.on {
  color: var(--accent-hi);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: inset 0 1px 0 rgba(var(--ivory-rgb), 0.08), inset 0 0 0 0.5px rgba(var(--accent-rgb), 0.22);
}
.sd-era-btn.on::after { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.8); }

/* ── CTA dock (Reference / Fix panes) — in normal flow. Nothing anchors
   on this screen (founder call), and the retired sticky fade painted a
   flat canvas-colored slab over the aurora glow (the founder's "weird
   darkness behind the generate button"). The button scrolls with its
   form; no backdrop, nothing to mismatch. ── */
.sd-dock {
  margin: 24px 20px 40px;
}
.sd-dock-inner { display: flex; gap: 10px; align-items: center; }
.cta {
  flex: 1;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: var(--action-primary);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  color: var(--sd-cta-ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.22s var(--ease);
  box-shadow: var(--shadow-orb);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cta:hover { filter: brightness(1.12); border-color: rgba(var(--accent-rgb), 0.65); transform: translateY(-1px); }
.cta:active { transform: translateY(0) scale(0.99); }

/* ── Result ── */
.sd-result-wrap {
  margin: 28px 20px 0;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--sd-stage-active-bg);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  position: relative;
  animation: sdReveal 0.6s var(--ease);
}
@keyframes sdReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.sd-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}
.sd-result-label { font-family: var(--display); font-size: 20px; color: var(--t1); font-weight: 500; }
.sd-result-body { font-family: var(--display); font-weight: 300; color: var(--t1); font-size: 15px; line-height: 1.8; padding-right: 70px; min-height: 60px; }
.pbox { position: relative; }
.copybtn {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--surface-chip);
  border: 1px solid var(--border-struct-strong);
  color: var(--t2);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 10.5px;
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s;
}
.copybtn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.06); }
.sd-diagnosis {
  padding: 16px 18px;
  background: rgba(var(--copper-rgb), 0.08);
  border: 1px solid rgba(var(--copper-rgb), 0.25);
  border-radius: 12px;
  font-family: var(--display);
  color: var(--t1);
  line-height: 1.7;
  margin-bottom: 14px;
  font-size: 14px;
}

/* ── Lifted exclusions — Suno takes these in its own exclude field, so
   they ride under the prompt as their own rose-tinted panel (the app's
   exclusion color, the excluded chips' dress) with their own copy of the
   raw list; the items render as chips (founder call; his label wording). ── */
.sd-exclude {
  margin-top: 16px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(var(--rose-rgb), 0.22);
  background: rgba(var(--rose-rgb), 0.05);
  border-radius: var(--radius-md);
}
.sd-exclude-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sd-exclude-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
}
.sd-exclude-copy {
  margin-left: auto;
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-chip);
  border: 1px solid var(--border-struct-strong);
  color: var(--t2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.18s var(--ease);
}
.sd-exclude-copy:hover {
  color: var(--rose);
  border-color: rgba(var(--rose-rgb), 0.4);
  background: rgba(var(--rose-rgb), 0.06);
}
.sd-exclude-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-exclude-chip {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(var(--rose-rgb), 0.08);
  border: 1px solid rgba(var(--rose-rgb), 0.3);
  color: var(--rose);
  font-family: var(--body);
  font-size: 12.5px;
}

/* ── Mobile result sheet — phones get the prompt in a sheet ── */
.sd-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sd-sheet-scrim.on { opacity: 1; pointer-events: auto; }
.sd-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  background: var(--dt-raised);
  border-top: 1px solid var(--border-struct-strong);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--sd-sheet-shadow);
  transform: translateY(102%);
  transition: transform 0.42s var(--ease-rail);
  max-height: 82vh;
  overflow-y: auto;
}
.sd-sheet.on { transform: translateY(0); }
.sd-sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--border-struct-heavy); margin: 0 auto 14px; }
.sd-sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* While thinking the copy button is absent; the close still sits right */
.sd-sheet-head.thinking .sd-sheet-x { margin-left: auto; }
.sd-sheet-title { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--t1); }
.sd-sheet-copy {
  margin-left: auto;
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  background: var(--surface-chip);
  border: 1px solid var(--border-struct-strong);
  color: var(--t2);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.18s var(--ease);
}
.sd-sheet-copy:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.06); }
.sd-sheet-x {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-chip);
  border: 1px solid var(--border-struct);
  color: var(--t3);
  font-size: 13px;
  cursor: pointer;
}
.sd-sheet-body {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.7;
  color: var(--t1);
  background: var(--control-inset);
  border: 1px solid var(--border-struct);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
/* The generating state — the sheet is up and thinking; the prompt's slot
   holds the founder's 64px planning orb (ThinkingOrb, the stanza-chips
   64-art-scale design) until the result lands in place. */
.sd-sheet-think {
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--control-inset);
  border: 1px solid var(--border-struct);
  border-radius: var(--radius-md);
}
/* The landing handoff: the orb bows out (shrink + fade + soft blur), then
   the result mounts in its place with the entrance ramp below. */
.sd-sheet-think canvas {
  width: 64px;
  height: 64px;
  display: block;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), filter 0.24s var(--ease);
}
.sd-sheet-think.out canvas { opacity: 0; transform: scale(0.8); filter: blur(3px); }
/* The result's entrance — the founder's ramp: rise 30→0 and fade 0→100%
   over 650ms on cubic-bezier(0.2, 0, 0, 1), with a very slight blur
   ramping off as it settles. */
.sd-sheet-result { animation: sdPromptIn 650ms cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes sdPromptIn {
  from { opacity: 0; transform: translateY(30px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.sd-sheet-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.sd-sheet-btn {
  padding: 15px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 500;
  background: var(--surface-chip);
  border: 1px solid var(--border-struct-strong);
  color: var(--t1);
  transition: all 0.18s var(--ease);
}
.sd-sheet-btn:hover { background: var(--surface-chip-hover); }
.sd-sheet-btn.cta { flex: none; }

/* ── Add-to-page destination picker — the drawer's graduate flow in this
   screen's chrome: an existing song's Sound notes, or a fresh page born
   with the prompt. Layers over the result sheet; under the toast. ── */
.sd-pick-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sd-pick-backdrop { position: absolute; inset: 0; background: var(--scrim); }
.sd-pick {
  position: relative;
  width: min(420px, 100%);
  background: var(--dt-raised);
  border: 1px solid var(--border-struct-strong);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--sd-sheet-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-pick-title { font-family: var(--display); font-size: 21px; font-weight: 500; color: var(--t1); }
.sd-pick-quote {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--t2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.sd-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.sd-pick-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-chip);
  border: 1px solid var(--border-struct-strong);
  cursor: pointer;
  text-align: left;
}
.sd-pick-row:hover { background: var(--surface-chip-hover); }
.sd-pick-row--new {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 13px;
  color: var(--accent);
}
/* The recent-5 cap's expander — the rest of the library unfolds in place */
.sd-pick-row--all {
  flex-direction: row;
  justify-content: center;
  font-family: var(--body);
  font-weight: 500;
  font-size: 13px;
  color: var(--t2);
}
.sd-pick-row-title { font-family: var(--body); font-weight: 500; font-size: 14px; color: var(--t1); }
.sd-pick-row-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
}
.sd-pick-actions { display: flex; justify-content: flex-end; }
.sd-pick-cancel {
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-chip);
  border: 1px solid var(--border-struct-strong);
  color: var(--t2);
  font-family: var(--body);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.sd-pick-cancel:hover { background: var(--surface-chip-hover); color: var(--t1); }

/* Desktop: prompt is inline in the rail, so the sheet never appears */
@media (min-width: 1100px) {
  .sd-sheet,
  .sd-sheet-scrim { display: none; }
}

/* ── Mobile: stable page height ── */
@media (max-width: 1099px) {
  /* The panel summarises; it scrolls inside itself instead of growing */
  .sd-stage { max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; }
  .sd-stage::-webkit-scrollbar { width: 3px; }
  .sd-stage::-webkit-scrollbar-thumb { background: var(--border-struct-heavy); border-radius: 3px; }
  /* Actions stay put at the foot of the panel while it scrolls */
  .sd-stage-actions {
    position: sticky;
    bottom: 0;
    background: var(--sd-actions-fade);
    margin-top: 16px;
  }
}

.sd-toast {
  position: fixed;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  background: var(--dt-overlay);
  border: 1px solid var(--border-struct-heavy);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--t1);
  z-index: 100;
  pointer-events: none;
  transition: all 0.22s var(--ease);
  box-shadow: 0 10px 30px rgba(var(--ink-rgb), 0.5);
}
.sd-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── The handoff's explicit light-mode pins ── */
:root[data-theme='light'] .sd-catbtn.on { color: var(--sd-lm-chip-on-ink); }
:root[data-theme='light'] .sd-catbtn { color: var(--sd-lm-catbtn-ink); }
:root[data-theme='light'] .sd-catbtn:hover { color: var(--sd-lm-ink-strong); }
:root[data-theme='light'] .sd-vibes-more,
:root[data-theme='light'] .sd-subhead,
:root[data-theme='light'] .sd-panel-count,
:root[data-theme='light'] .sd-vibe-glyph,
:root[data-theme='light'] .sd-catbtn-n,
:root[data-theme='light'] .sd-stage-kicker,
:root[data-theme='light'] .sd-stage-ring-num { color: var(--sd-lm-meta-ink); }
:root[data-theme='light'] .stchip { color: var(--sd-lm-chip-ink); }
:root[data-theme='light'] .stchip:hover { color: var(--sd-lm-chip-ink-hover); }
:root[data-theme='light'] .stchip.on {
  background: var(--chip-selected);
  border-color: var(--chip-selected-edge);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--lib-rgb), 0.22), inset 0 1px 0 var(--sd-chip-on-inset-hi);
}
/* Standard picker chips take the deeper slate ink; the instrument
   chips keep the accent (the handoff's exact light-mode split) */
:root[data-theme='light'] .styler-chips .stchip.on { color: var(--sd-lm-chip-on-ink); }
:root[data-theme='light'] #sb-instruments .stchip.on { color: var(--accent); }
:root[data-theme='light'] .styler-input:focus,
:root[data-theme='light'] .styler-textarea:focus { background: var(--dt-surface); }
:root[data-theme='light'] .sd-stage { background: var(--dt-surface); }

/* ── Desktop (≥1100px) — builder canvas + fixed Selections rail ── */
@media (min-width: 1100px) {
  .sd-screen { --sd-rail-w: clamp(300px, 25vw, 420px); }

  /* FIX 3 — approach 3 from the handoff README. The canvas content
     column is pinned to the width it has beside an open rail, and
     centred; opening shifts it by half the rail on transform alone,
     so both states sit balanced and nothing relayouts mid-flight. */
  .sd-canvas {
    max-width: none;
    padding-bottom: 0;
    min-height: 100vh;
    transform: translateX(0);
    will-change: transform;
    transition: transform 0.42s var(--ease-rail);
  }
  .sd-screen.rail-open .sd-canvas { transform: translateX(calc(var(--sd-rail-w) / -2)); }
  .sd-canvas-inner { width: calc(100vw - var(--sd-rail-w) - 48px); margin: 0 auto; }

  .topnav { padding: 22px 32px 12px; }
  .navtitle { font-size: 19px; }

  .sd-hero { padding: 14px 32px 8px; }
  .sd-hero-title { font-size: 48px; line-height: 1.02; letter-spacing: -0.02em; max-width: 16ch; }
  .sd-hero-sub { font-size: var(--fs-body); max-width: 56ch; margin-top: 12px; }

  .sd-modes { margin: 10px 32px 0; max-width: 480px; }

  .sd-vibes { margin: 20px 0 26px; }
  .sd-vibes-head { margin: 0 32px 16px; }
  .sd-vibes-title { font-size: 24px; }
  .sd-vibes-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    padding: 4px 32px 12px;
    overflow: visible;
  }
  .sd-vibe { width: auto; padding: 18px 18px 16px; border-radius: var(--radius-lg); }
  .sd-vibe-glyph { font-size: 10.5px; margin-bottom: 10px; }
  .sd-vibe-title { font-size: 23px; margin-bottom: 8px; }
  .sd-vibe-desc { font-size: 13px; min-height: 38px; }

  .sd-workspace { margin: 0 32px; border-radius: var(--radius-xl); }
  .sd-catrail { padding: 12px 12px 0; overflow: visible; flex-wrap: wrap; gap: 4px; }
  .sd-catbtn { padding: 16px 18px 17px; font-size: 15px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .sd-catbtn-dot { width: 6px; height: 6px; }
  .sd-catbtn-n { font-size: 11px; }
  .sd-panel { padding: 36px 36px 32px; min-height: 440px; }
  .sd-panel-head { margin-bottom: 6px; }
  .sd-panel-title { font-size: 38px; }
  .sd-panel-count { font-size: 11px; }
  .sd-panel-hint { font-size: var(--fs-body); margin-bottom: 26px; }

  /* Chips at a real desktop scale — generous targets, roomy gaps */
  .styler-chips { gap: 10px; max-width: none; }
  .stchip { font-size: 15px; padding: 13px 20px; border-radius: var(--radius-md); letter-spacing: 0; }
  #sb-instruments .stchip { padding-left: 38px; }
  #sb-instruments .stchip::after { left: 16px; font-size: 14px; }

  /* Vocals + era controls scale with them */
  .sd-vocal-matrix { gap: 16px; margin-bottom: 26px; }
  .sd-vocal-box { padding: 18px; }
  .sd-vocal-box-label { font-size: 11px; margin-bottom: 14px; }
  .sd-seg { padding: 4px; border-radius: var(--radius-md); }
  .sd-seg-btn { padding: 12px 10px; font-size: 14px; border-radius: var(--radius-sm); }
  .sd-subhead { font-size: 11px; margin-bottom: 18px; }
  .sd-era-strip { padding: 8px; gap: 6px; grid-template-columns: repeat(8, 1fr); }
  .sd-era-btn { padding: 18px 6px 16px; font-size: 13.5px; border-radius: var(--radius-sm); }

  .sd-search { padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 20px; }
  .sd-search input { font-size: var(--fs-body); }
  .sd-search svg { width: 16px; height: 16px; }
  .styler-input,
  .styler-textarea { font-size: 16px; padding: 16px 18px; margin-top: 20px; border-radius: var(--radius-md); }
  .styler-textarea { min-height: 150px; }

  /* Reference / Fix keep an inline submit in the canvas */
  #styler-ref .sd-dock,
  #styler-fix .sd-dock {
    max-width: 520px;
    margin: 24px 32px 40px;
    padding: 0;
    background: none;
    border: 0;
  }
  .cta { padding: 18px 22px; font-size: 16px; }

  /* Results flow in the main canvas (Reference / Fix) */
  .sd-result-wrap { margin: 26px 32px 40px; padding: 26px; }

  /* ── The Selections rail — a fixed sibling of the canvas (FIX 3):
     it slides on transform only, never reserving or animating layout
     on the canvas. */
  .sd-stage {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--sd-rail-w);
    margin: 0;
    border-radius: 0;
    border: 0;
    border-left: 1px solid var(--border-struct);
    background: var(--dt-surface);
    box-shadow: var(--sd-rail-shadow);
    padding: 26px 26px 40px;
    overflow-y: auto;
    z-index: 40;
    transform: translateX(100%);
    will-change: transform;
    transition: transform 0.42s var(--ease-rail), border-color 0.3s var(--ease);
  }
  .sd-screen.rail-open .sd-stage { transform: translateX(0); }
  .sd-stage.active { border-left-color: rgba(var(--accent-rgb), 0.22); }
  .sd-stage::before { display: none; }
  .sd-stage::-webkit-scrollbar { width: 4px; }
  .sd-stage::-webkit-scrollbar-thumb { background: var(--border-struct-heavy); border-radius: 4px; }

  .sd-stage-kicker { font-size: 11px; }
  .sd-stage-prompt { font-size: 21px; line-height: 1.5; min-height: 160px; }
  .sd-stage-empty { font-size: 23px; }
  .sd-stage-actions { gap: 10px; margin-top: 24px; padding-top: 20px; }
  .sd-stage-clear,
  .sd-stage-shuffle { padding: 12px 16px; font-size: 11px; border-radius: var(--radius-sm); }

  /* The prompt renders inside the rail, under Generate */
  .sd-stage .sd-result-wrap { margin: 18px 0 4px; padding: 18px; border-radius: var(--radius-md); }
  .sd-stage .sd-result-body { font-size: 15px; line-height: 1.75; padding-right: 0; }
  .sd-stage .sd-result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; }
  .sd-stage .sd-result-label { font-size: 17px; }
  /* Copy gets its own row above the prompt — never inline with the text */
  .sd-stage .sd-result-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .sd-stage .copybtn { position: static; margin: 0; order: -1; flex: 0 0 auto; align-self: flex-start; font-size: 10.5px; }
  .sd-stage .sd-result-adds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.15);
  }
  .sd-stage .sd-result-adds button {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--body);
    font-size: 13px;
    font-weight: 500;
    background: var(--surface-chip);
    border: 1px solid var(--border-struct-strong);
    color: var(--t1);
    transition: all 0.18s var(--ease);
  }
  .sd-stage .sd-result-adds button:hover { background: var(--surface-chip-hover); }
  .sd-stage .sd-result-adds .primary { background: var(--action-nav); border-color: rgba(var(--accent-rgb), 0.45); color: var(--sd-cta-ink); }
}

/* Mobile result actions render in the sheet, never inline */
@media (max-width: 1099px) {
  .sd-result-adds { display: none; }
}

@media (min-width: 1280px) {
  .topnav { padding: 24px 48px 12px; }
  .sd-hero { padding: 16px 48px 8px; }
  .sd-hero-title { font-size: 56px; }
  .sd-modes { margin: 12px 48px 0; }
  .sd-vibes-head { margin: 0 48px 14px; }
  .sd-vibes-row { padding: 4px 48px 10px; }
  .sd-workspace { margin: 0 48px; }
  .sd-result-wrap { margin: 26px 48px 44px; }
  #styler-ref .sd-dock,
  #styler-fix .sd-dock { margin: 24px 48px 40px; }
}

/* ── Reduced motion — declared last so it wins without escalation ── */
@media (prefers-reduced-motion: reduce) {
  .sd-canvas,
  .sd-stage,
  .sd-sheet,
  .sd-sheet-scrim { transition-duration: 1ms; }
  .sd-sheet-think canvas { transition: none; }
  .sd-sheet-result { animation: none; }
}