/* LYRC design-token skin for beat timeline.
 * Revert: remove `lyrc-tokens` from <body class> OR delete the <link> in beat-timeline.html.
 * Source of truth: C:\Users\dagcr\Downloads\lyrc-design-system.json
 * Visual layer only — no layout, geometry, or behavior changes. */

body.sb-bt-page.lyrc-tokens {
  /* Redefine the existing --sb-* variables so all downstream rules pick up LYRC tokens */
  --sb-bg: #0A0A0D;              /* app background */
  --sb-panel: #0D0E13;           /* left/right panels */
  --sb-panel-2: #15161C;         /* surface base */
  --sb-border: #2A2C36;          /* default border */
  --sb-text: rgba(255,255,255,1); /* text.primary_100 */
  --sb-dim: rgba(255,255,255,0.70); /* text.secondary_70 */
  --sb-accent: #3B82F6;          /* single interactive accent */
  --sb-accent-2: #3B82F6;        /* collapse to single accent (rule: one interactive color) */
  --sb-warn: #F5A623;            /* status only */
  --sb-ok: #34D399;              /* status only */
  --sb-pink: #EC4899;            /* credits/notification only — not interactive */
  --sb-blue: #3B82F6;
  --sb-yellow: #F5A623;
  --sb-mono: 'JetBrains Mono', monospace;

  /* LYRC-only tokens (namespaced so they don't collide) */
  --lyrc-canvas: #000000;
  --lyrc-timeline: #0B0C10;
  --lyrc-surface-card: #1A1B22;
  --lyrc-surface-raised: #1C1E26;
  --lyrc-surface-hover: #22242E;
  --lyrc-surface-input: #17181F;
  --lyrc-border-subtle: #1F2128;
  --lyrc-border-strong: #3A3D4A;
  --lyrc-text-tertiary: rgba(255,255,255,0.50);
  --lyrc-text-disabled: rgba(255,255,255,0.30);
  --lyrc-focus-ring: 0 0 0 2px rgba(59,130,246,0.5);
  --lyrc-shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --lyrc-shadow-md: 0 4px 12px rgba(0,0,0,0.40);
  --lyrc-shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
  --lyrc-waveform-bar: #3B6FE0;

  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* --- Body backdrop: flat, no radial glow (rule: no shadows/gradients on static bg) --- */
body.sb-bt-page.lyrc-tokens {
  background: var(--sb-bg);
}

/* --- Banner (info card) --- */
body.sb-bt-page.lyrc-tokens .sb-banner {
  border-radius: 12px; /* lg */
  border: 1px solid var(--sb-border);
  background: var(--lyrc-surface-card);
  color: var(--sb-text);
  font-size: 13px;
  line-height: 1.4;
}
body.sb-bt-page.lyrc-tokens .sb-banner strong {
  color: var(--sb-accent);
}

/* --- Buttons: flat, no gradient (rule: no gradients on interactive controls) --- */
body.sb-bt-page.lyrc-tokens .sb-btn {
  border-radius: 6px; /* sm — component_radius_map.buttons */
  background: var(--sb-accent);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
}
body.sb-bt-page.lyrc-tokens .sb-btn:hover:not(:disabled) {
  background: #5B9BFF; /* accent.primary_blue_hover */
}
body.sb-bt-page.lyrc-tokens .sb-btn:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}
body.sb-bt-page.lyrc-tokens .sb-btn.secondary {
  background: var(--lyrc-surface-raised);
  border: 1px solid var(--sb-border);
  color: var(--sb-text);
}
body.sb-bt-page.lyrc-tokens .sb-btn.secondary:hover:not(:disabled) {
  background: var(--lyrc-surface-hover);
}
body.sb-bt-page.lyrc-tokens .sb-btn:disabled {
  opacity: 0.30; /* text.disabled_30 step */
}

/* --- Log / mono readout --- */
body.sb-bt-page.lyrc-tokens .sb-log {
  border-radius: 8px; /* md */
  background: var(--lyrc-surface-input);
  border: 1px solid var(--lyrc-border-subtle);
  font-family: var(--sb-mono);
  font-size: 12px;
  color: var(--sb-dim);
}

/* --- Headings & subheads --- */
body.sb-bt-page.lyrc-tokens h1 {
  font-size: 28px; /* display */
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.sb-bt-page.lyrc-tokens .sb-sub {
  color: var(--lyrc-text-tertiary);
  font-size: 14px;
  line-height: 1.4;
}

/* --- Field labels --- */
body.sb-bt-page.lyrc-tokens .sb-bt-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--sb-dim);
  letter-spacing: 0.04em;
  text-transform: none;
}

/* --- Progress bar --- */
body.sb-bt-page.lyrc-tokens .sb-bt-progress {
  height: 4px;
  border-radius: 9999px; /* pill */
  background: var(--lyrc-border-subtle);
}

/* --- Timeline track region background --- */
body.sb-bt-page.lyrc-tokens .sb-bt-tracks {
  background: var(--lyrc-timeline);
}

/* --- Track rows --- */
body.sb-bt-page.lyrc-tokens .sb-bt-track {
  border-top: 1px solid var(--lyrc-border-subtle);
}
body.sb-bt-page.lyrc-tokens .sb-bt-track-head {
  background: var(--sb-panel);
  border-right: 1px solid var(--lyrc-border-subtle);
  color: var(--sb-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
body.sb-bt-page.lyrc-tokens .sb-bt-track-icon {
  color: var(--sb-dim);
}
/* Icon color per track — reserved status colors for identity, NOT interactive */
body.sb-bt-page.lyrc-tokens .sb-bt-track--beat .sb-bt-track-icon        { color: var(--sb-pink); }
body.sb-bt-page.lyrc-tokens .sb-bt-track--transitions .sb-bt-track-icon { color: var(--sb-accent); }
body.sb-bt-page.lyrc-tokens .sb-bt-track--captionwords .sb-bt-track-icon{ color: var(--sb-warn); font-size: 13px; font-weight: 700; }
body.sb-bt-page.lyrc-tokens .sb-bt-track--edit .sb-bt-track-icon        { color: var(--sb-ok); }

/* --- Track toggles: single interactive accent = blue --- */
body.sb-bt-page.lyrc-tokens .sb-bt-track-toggle {
  background: var(--lyrc-border-subtle);
  border-radius: 9999px;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sb-bt-page.lyrc-tokens .sb-bt-track-toggle::after {
  background: #FFFFFF;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sb-bt-page.lyrc-tokens .sb-bt-track-toggle:checked,
body.sb-bt-page.lyrc-tokens .sb-bt-track--bass .sb-bt-track-toggle:checked,
body.sb-bt-page.lyrc-tokens .sb-bt-track--snare .sb-bt-track-toggle:checked,
body.sb-bt-page.lyrc-tokens .sb-bt-track--clap .sb-bt-track-toggle:checked {
  background: var(--sb-accent);
}
body.sb-bt-page.lyrc-tokens .sb-bt-track-toggle:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}

/* --- Playhead: gold → blue (single interactive color) --- */
body.sb-bt-page.lyrc-tokens .sb-bt-playhead {
  background: var(--sb-accent);
  box-shadow: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-playhead::after {
  background: var(--sb-accent);
  box-shadow: none;
  border-radius: 4px 4px 50% 50%; /* xs top corners, cap keeps its pill bottom */
}

/* --- Waveform: tokened bar color, no gradient tint --- */
body.sb-bt-page.lyrc-tokens .sb-bt-waveform {
  background:
    repeating-linear-gradient(
      90deg,
      var(--lyrc-waveform-bar) 0,
      var(--lyrc-waveform-bar) 2px,
      transparent 2px,
      transparent 14px
    );
  opacity: 1;
}

/* --- Panels that use --sb-panel already get the new value from the redefined var.
       Just make sure any residual hard-coded panel colors get overridden here. --- */
body.sb-bt-page.lyrc-tokens .sb-bt-music-crop-playhead,
body.sb-bt-page.lyrc-tokens .sb-bt-music-crop-playhead-cap {
  background: var(--sb-accent);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════
   STYLING PANES — Captions studio (Preset / Text & Color / Effects /
   Animation), caption + layout tiles, and the Effects/Transitions pages.
   LYRC rules: one accent blue, text at 100/70/50/30 only, one radius per
   component type, shadows only on hover, section headers as label_section,
   real selected + empty states, no gradients on controls.
   ══════════════════════════════════════════════════════════════════════ */

body.sb-bt-page.lyrc-tokens {
  --lyrc-r-sm: 6px;    /* buttons, inputs */
  --lyrc-r-md: 8px;    /* tiles / thumbnail cards */
  --lyrc-r-lg: 12px;   /* panels */
  --lyrc-t-fast: 120ms ease-out;
}

/* ── Section headers: one treatment everywhere ─────────────────────── */
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-heading,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-presets-label,
body.sb-bt-page.lyrc-tokens .sb-bt-sidebar-count--inline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lyrc-text-tertiary);
}
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-hint {
  color: var(--sb-dim);
  font-size: 12px;
  line-height: 1.4;
}
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-hint b {
  color: var(--sb-text);
  font-weight: 600;
}

/* ── Tabs (studio + Effects/Transitions): underline only, single accent ── */
body.sb-bt-page.lyrc-tokens .sb-bt-fx-subtabs {
  background: transparent;
  border-bottom: 1px solid var(--lyrc-border-subtle);
  gap: 4px;
}
/* One row across the ~339px rail: the four tabs share the width and are sized
   down so "Text & Color" still fits without clipping. */
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-tabs {
  display: flex;
  gap: 2px;
  background: transparent;
  border-bottom: 1px solid var(--lyrc-border-subtle);
}
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-tab,
body.sb-bt-page.lyrc-tokens .sb-bt-fx-subtab {
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--lyrc-text-tertiary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--lyrc-t-fast), border-color var(--lyrc-t-fast), background var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-subtab {
  min-width: 88px;
}
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-tab:hover,
body.sb-bt-page.lyrc-tokens .sb-bt-fx-subtab:hover {
  color: var(--sb-text);
  background: var(--lyrc-surface-hover);
}
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-tab.is-active,
body.sb-bt-page.lyrc-tokens .sb-bt-fx-subtab.is-active {
  color: var(--sb-accent);
  border-bottom-color: var(--sb-accent);
  background: transparent;
}
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-tab:focus-visible,
body.sb-bt-page.lyrc-tokens .sb-bt-fx-subtab:focus-visible {
  outline: none;
  border-radius: var(--lyrc-r-sm);
  box-shadow: var(--lyrc-focus-ring);
}

/* ── Text & Color controls ─────────────────────────────────────────── */
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--v2 label,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--studio label {
  border-radius: var(--lyrc-r-md);
  border: 1px solid var(--lyrc-border-subtle);
  background: var(--lyrc-surface-card);
  color: var(--lyrc-text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background var(--lyrc-t-fast), border-color var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--v2 label:hover {
  background: var(--lyrc-surface-hover);
  border-color: var(--sb-border);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--v2 label:focus-within {
  border-color: var(--sb-accent);
  background: rgba(59, 130, 246, 0.08);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--v2 select,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--v2 input[type="color"],
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid select,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid input[type="color"] {
  border-radius: var(--lyrc-r-sm);
  border: 1px solid var(--sb-border);
  background-color: var(--lyrc-surface-input);
  background-image: none;
  color: var(--sb-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color var(--lyrc-t-fast), box-shadow var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--v2 select:hover,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--v2 input[type="color"]:hover {
  border-color: var(--lyrc-border-strong);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--v2 select:focus,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--v2 input[type="color"]:focus,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid select:focus,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid input[type="color"]:focus {
  outline: none;
  border-color: var(--sb-accent);
  box-shadow: var(--lyrc-focus-ring);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-grid--v2 select option {
  background: var(--lyrc-surface-raised);
  color: var(--sb-text);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-toggle {
  border-radius: var(--lyrc-r-md);
  border: 1px solid var(--lyrc-border-subtle);
  background: var(--lyrc-surface-card);
  color: var(--sb-dim);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-toggle:hover {
  background: var(--lyrc-surface-hover);
  border-color: var(--sb-border);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-toggle input[type="checkbox"] {
  accent-color: var(--sb-accent);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-custom-toggle small {
  color: var(--lyrc-text-tertiary);
}

/* ── Buttons in the styling panes: flat, single accent, no gradient ─── */
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-jump {
  border-radius: var(--lyrc-r-sm);
  border: 1px solid transparent;
  background: var(--sb-accent);
  background-image: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  transition: background var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-jump:hover {
  background: #5B9BFF;
  border-color: transparent;
}
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-jump:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}

/* ── Empty state: dashed frame, muted mark, one line of tertiary copy ── */
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border: 1px dashed var(--lyrc-border-subtle);
  border-radius: var(--lyrc-r-lg);
  background: var(--sb-panel-2);
  color: var(--lyrc-text-tertiary);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-soon::before {
  content: "";
  width: 24px;
  height: 24px;
  border: 1.5px solid currentColor;
  border-radius: var(--lyrc-r-sm);
  opacity: 0.5;
}

/* ── Tiles (caption styles, layouts, modes, FX): flat at rest ───────── */
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile,
body.sb-bt-page.lyrc-tokens .sb-bt-layout-tile,
body.sb-bt-page.lyrc-tokens .sb-bt-mode-tile,
body.sb-bt-page.lyrc-tokens .sb-bt-fx-tile-btn {
  /* !important: beat the liquid-glass layer in beat-timeline.css, which forces
     a gradient background + its own radius/border on these tiles. */
  border-radius: var(--lyrc-r-md) !important;
  border: 1px solid var(--lyrc-border-subtle) !important;
  background: var(--lyrc-surface-card) !important;
  background-image: none !important;
  box-shadow: none;
  transition: background var(--lyrc-t-fast), border-color var(--lyrc-t-fast), box-shadow var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile:hover,
body.sb-bt-page.lyrc-tokens .sb-bt-layout-tile:hover,
body.sb-bt-page.lyrc-tokens .sb-bt-mode-tile:hover,
body.sb-bt-page.lyrc-tokens .sb-bt-fx-tile-btn:hover {
  background: var(--lyrc-surface-hover) !important;
  border-color: var(--sb-border) !important;
  box-shadow: var(--lyrc-shadow-sm);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile:focus-visible,
body.sb-bt-page.lyrc-tokens .sb-bt-layout-tile:focus-visible,
body.sb-bt-page.lyrc-tokens .sb-bt-mode-tile:focus-visible,
body.sb-bt-page.lyrc-tokens .sb-bt-fx-tile-btn:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}
/* Selected = 2px accent border + accent tint, never an underline alone.
   These tiles are <label>s wrapping a radio, so selection is :has(input:checked). */
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile:has(input:checked),
body.sb-bt-page.lyrc-tokens .sb-bt-layout-tile:has(input:checked),
body.sb-bt-page.lyrc-tokens .sb-bt-mode-tile:has(input:checked),
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile.is-active,
body.sb-bt-page.lyrc-tokens .sb-bt-layout-tile.is-active,
body.sb-bt-page.lyrc-tokens .sb-bt-mode-tile.is-active,
body.sb-bt-page.lyrc-tokens .sb-bt-fx-tile-btn.is-on {
  border: 2px solid var(--sb-accent) !important;
  background: rgba(59, 130, 246, 0.08) !important;
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-tile-btn.is-on .sb-bt-fx-thumb {
  box-shadow: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-thumb,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile-bg,
body.sb-bt-page.lyrc-tokens .sb-bt-layout-tile-mini {
  border-radius: var(--lyrc-r-md);
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile-name,
body.sb-bt-page.lyrc-tokens .sb-bt-layout-tile-name,
body.sb-bt-page.lyrc-tokens .sb-bt-mode-tile-name {
  color: var(--sb-text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile-meta,
body.sb-bt-page.lyrc-tokens .sb-bt-layout-tile-meta,
body.sb-bt-page.lyrc-tokens .sb-bt-mode-tile-desc,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-style-count {
  color: var(--lyrc-text-tertiary);
}

/* ── Badges: one pill shape, colour is the only variable ────────────── */
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile-new,
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile-lock {
  border-radius: 9999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
body.sb-bt-page.lyrc-tokens .sb-bt-caption-tile-lock {
  border: 1px solid rgba(245, 166, 35, 0.35);
  background: rgba(245, 166, 35, 0.16);
  color: var(--sb-warn);
}

/* Studio tabs sit in one row across a ~339px rail, so they are sized down here.
   Must come after the shared tab rule above, which sets 12px/uppercase. */
body.sb-bt-page.lyrc-tokens .sb-bt-cap-studio-tab {
  flex: 1 1 0;
  padding: 9px 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;  /* uppercase is ~25% wider and would clip "Text & Color" */
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   BOTTOM TIMELINE — toolbar, Beats/Clips toggle, clip cells, beat marks,
   caption word pills. Track heads, toggles, playhead and waveform are
   already tokenized above. Visual only: sizes/layout of cells untouched so
   thumbnails + hover preview (CORE_BASICS) keep working.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Panel + toolbar ── (beat-timeline.css forces #07080c with !important) */
body.sb-bt-page.lyrc-tokens .sb-bt-timeline-panel,
body.sb-bt-page.lyrc-tokens .sb-bt-studio > .sb-bt-timeline-panel {
  background: var(--lyrc-timeline) !important;
  border-top: 1px solid var(--lyrc-border-subtle) !important;
  box-shadow: none !important;
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-tools {
  gap: 8px;
  padding: 8px 12px;
  background: var(--sb-panel);
  border-bottom: 1px solid var(--lyrc-border-subtle);
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-tools-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lyrc-text-tertiary);
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-tool-btn,
body.sb-bt-page.lyrc-tokens .sb-bt-tl-zoom-btn {
  height: 28px;
  border-radius: var(--lyrc-r-sm);
  border: 1px solid var(--sb-border);
  background: var(--lyrc-surface-card);
  background-image: none;
  color: var(--sb-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  transition: background var(--lyrc-t-fast), border-color var(--lyrc-t-fast), color var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-tool-btn:hover:not(:disabled),
body.sb-bt-page.lyrc-tokens .sb-bt-tl-zoom-btn:hover:not(:disabled) {
  background: var(--lyrc-surface-hover);
  border-color: var(--lyrc-border-strong);
  color: var(--sb-text);
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-tool-btn:focus-visible,
body.sb-bt-page.lyrc-tokens .sb-bt-tl-zoom-btn:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-tool-btn:disabled {
  opacity: 1;
  color: var(--lyrc-text-disabled);
  border-color: var(--lyrc-border-subtle);
  background: transparent;
}

/* Add Mark / Add Clip: one secondary style (no green / blue tints) — the icon carries the accent */
body.sb-bt-page.lyrc-tokens .sb-bt-tl-add-cut,
body.sb-bt-page.lyrc-tokens .sb-bt-tl-add-clip {
  padding: 0 12px;
  background: var(--lyrc-surface-card);
  border-color: var(--sb-border);
  color: var(--sb-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-add-cut:hover:not(:disabled),
body.sb-bt-page.lyrc-tokens .sb-bt-tl-add-clip:hover:not(:disabled) {
  background: var(--lyrc-surface-hover);
  border-color: var(--lyrc-border-strong);
  color: var(--sb-text);
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-add-cut-ico {
  color: var(--sb-accent);
  opacity: 1;
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-add-cut:disabled .sb-bt-tl-add-cut-ico,
body.sb-bt-page.lyrc-tokens .sb-bt-tl-add-clip:disabled .sb-bt-tl-add-cut-ico {
  color: inherit;
}

/* Zoom + readouts */
body.sb-bt-page.lyrc-tokens .sb-bt-tl-zoom-range {
  accent-color: var(--sb-accent);
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-zoom-pct,
body.sb-bt-page.lyrc-tokens .sb-bt-tl-bpm {
  font-family: var(--sb-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--sb-dim);
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-bpm-unit {
  opacity: 1;
  color: var(--lyrc-text-tertiary);
}

/* Beats / Clips segmented toggle: selected = accent tint + accent text */
body.sb-bt-page.lyrc-tokens .sb-bt-tl-view {
  padding: 2px;
  border-radius: var(--lyrc-r-sm);
  border: 1px solid var(--lyrc-border-subtle);
  background: var(--lyrc-surface-input);
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-view-btn {
  height: 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--lyrc-text-tertiary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-view-btn:hover:not(.is-active):not([aria-pressed="true"]) {
  background: var(--lyrc-surface-hover);
  color: var(--sb-text);
}
body.sb-bt-page.lyrc-tokens .sb-bt-tl-view-btn.is-active,
body.sb-bt-page.lyrc-tokens .sb-bt-tl-view-btn[aria-pressed="true"] {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--sb-accent);
}

/* ── Clip cells (Edit row) — flat at rest, lift on hover ── */
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-slot,
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-plan-slot {
  background: var(--lyrc-surface-card);
  border: 1px solid var(--lyrc-border-subtle);
  border-radius: var(--lyrc-r-md);
  box-shadow: none;
  transition: border-color var(--lyrc-t-fast), box-shadow var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-slot:hover,
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-plan-slot:hover {
  border-color: var(--lyrc-border-strong);
  box-shadow: var(--lyrc-shadow-sm);
}
/* Selected cell: accent border + 1px outer ring = 2px of accent, without resizing the cell */
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-slot.is-mark-selected,
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-plan-slot.is-mark-selected {
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 1px var(--sb-accent);
}
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-slot .slot-thumb,
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-plan-slot .slot-thumb {
  background: var(--lyrc-surface-raised);
}
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-slot .sb-bt-cell-fill {
  background: var(--lyrc-surface-raised) !important;
}
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-slot .slot-thumb-ph {
  color: var(--lyrc-text-tertiary);
  font-weight: 600;
}
/* Empty drop cell = LYRC empty state */
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-slot .slot-thumb--empty {
  border: 1px dashed var(--lyrc-border-strong);
  border-radius: var(--lyrc-r-sm);
  background: var(--sb-panel-2);
}
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane .slot-drop-hint {
  color: var(--lyrc-text-tertiary);
  font-weight: 600;
}
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-slot > .slot-foot,
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-plan-slot > .slot-foot {
  background: var(--lyrc-surface-raised);
  border-top: 1px solid var(--lyrc-border-subtle);
}
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-slot > .slot-clip-name,
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-plan-slot > .slot-clip-name,
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane .slot-foot .slot-clip-name {
  /* The base 8px rule only targets a direct child of the slot, but the name lives
     inside .slot-foot, so it was falling back to 16px and clipping in 80px cells. */
  display: block;
  font-size: 10px;
  line-height: 1.3;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Beat number on a cell: the one pill badge shape */
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane > .sb-bt-slot .slot-beat-badge {
  border-radius: 9999px;
  background: rgba(10, 10, 13, 0.82);
  border: 1px solid var(--lyrc-border-strong);
  color: var(--sb-text);
  font-family: var(--sb-mono);
  font-weight: 600;
}

/* ── Beat marks view — flat segments (no gradients), accent selection ── */
body.sb-bt-page.lyrc-tokens .sb-bt-montage-lane--marks {
  background: var(--lyrc-timeline);
  border: 1px solid var(--lyrc-border-subtle);
  border-radius: var(--lyrc-r-md);
}
body.sb-bt-page.lyrc-tokens .sb-bt-beat-mark {
  background: var(--lyrc-surface-card);
  background-image: none;
  border-right: 1px solid var(--lyrc-border-subtle);
  color: var(--sb-text);
  transition: background var(--lyrc-t-fast), box-shadow var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-beat-mark:hover {
  background: var(--lyrc-surface-hover);
}
body.sb-bt-page.lyrc-tokens .sb-bt-beat-mark.is-selected {
  background: rgba(59, 130, 246, 0.08);
  box-shadow: inset 0 0 0 2px var(--sb-accent);
}
/* Custom (hand-placed) marks keep a warning-orange status tint, flat; selection is still accent */
body.sb-bt-page.lyrc-tokens .sb-bt-beat-mark.is-custom {
  background: rgba(245, 166, 35, 0.08);
  background-image: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-beat-mark.is-custom.is-selected {
  background: rgba(245, 166, 35, 0.12);
  box-shadow: inset 0 0 0 2px var(--sb-accent);
}
body.sb-bt-page.lyrc-tokens .sb-bt-beat-mark-thumb {
  border-radius: var(--lyrc-r-sm);
  border: 1px solid var(--lyrc-border-subtle);
  background: var(--lyrc-surface-raised);
}
body.sb-bt-page.lyrc-tokens .sb-bt-beat-mark-time,
body.sb-bt-page.lyrc-tokens .sb-bt-beat-mark-label {
  color: var(--lyrc-text-tertiary);
}
body.sb-bt-page.lyrc-tokens .sb-bt-beat-mark-clip {
  color: var(--sb-dim);
}

/* ── Caption word pills (lyrics lane) ── */
body.sb-bt-page.lyrc-tokens .sb-bt-word-pill {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.32);
  border-radius: 4px;
  color: var(--sb-text);
  font-weight: 500;
}
body.sb-bt-page.lyrc-tokens .sb-bt-word-pill--active {
  background: rgba(59, 130, 246, 0.42);
  border-color: var(--sb-accent);
}

/* ── Hint line under the timeline ── */
body.sb-bt-page.lyrc-tokens .sb-bt-timeline-hint {
  color: var(--lyrc-text-tertiary);
  border-top: 1px solid var(--lyrc-border-subtle);
}

/* ══════════════════════════════════════════════════════════════════════
   ACTION BUTTONS — Export (primary), Upscale, Workflow rows, upscale
   pills and the preview-sharpener toggle.
   beat-timeline.css ships all of these with 135deg gradients (and a
   purple one on Upscale). LYRC: one accent #3B82F6, flat fills, real
   hover / focus-visible / disabled / active states.
   Sizing, padding, font and icon alignment come from beat-timeline.css
   and are deliberately NOT restated here — only the paint changes.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Primary / Export: the one filled accent control on the page ──────
   !important is required here: beat-timeline.css:6650 (the liquid-glass
   layer) redeclares .sb-bt-btn--primary background + border-color with
   !important, which outranks plain declarations at any specificity. */
body.sb-bt-page.lyrc-tokens .sb-bt-btn--primary {
  border-radius: var(--lyrc-r-sm);
  background: var(--sb-accent) !important;
  background-image: none !important;
  border: 1px solid var(--sb-accent) !important;
  color: #FFFFFF;
  box-shadow: none;
  transition: background var(--lyrc-t-fast), border-color var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--primary:hover:not(:disabled) {
  background: #5B9BFF !important;
  background-image: none !important;
  border-color: #5B9BFF !important;
  box-shadow: none;
  transform: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--primary:active:not(:disabled) {
  background: #2F6FD8 !important;
  border-color: #2F6FD8 !important;
  transform: none;
}
/* Re-assert the global focus ring (beat-timeline.css:6757): the box-shadow:none
   above would otherwise swallow it on these buttons. */
body.sb-bt-page.lyrc-tokens .sb-bt-btn--primary:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}
/* Disabled Export is the default state on page load, so it must still read as
   a real control, not a ghost: flat raised surface + text at the 30% step. */
body.sb-bt-page.lyrc-tokens .sb-bt-btn--primary:disabled {
  opacity: 1;
  background: var(--lyrc-surface-raised) !important;
  background-image: none !important;
  border-color: var(--lyrc-border-subtle) !important;
  color: var(--lyrc-text-disabled);
  box-shadow: none;
}

/* ── Upscale: SECONDARY, not a second primary ─────────────────────────
   Decision: flat raised surface + strong border + full-strength label,
   no purple and no accent fill. Export is the single filled accent on
   the page; a second filled button in the same toolbar would give the
   user two equal-weight "go" controls. */
body.sb-bt-page.lyrc-tokens .sb-bt-btn--upscale {
  border-radius: var(--lyrc-r-sm);
  background: var(--lyrc-surface-raised);
  background-image: none;
  border: 1px solid var(--lyrc-border-strong);
  color: var(--sb-text);
  box-shadow: none;
  transition: background var(--lyrc-t-fast), border-color var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--upscale:hover:not(:disabled) {
  background: var(--lyrc-surface-hover);
  background-image: none;
  border-color: var(--sb-accent);
  color: var(--sb-text);
  box-shadow: none;
  transform: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--upscale:active:not(:disabled) {
  background: var(--lyrc-surface-card);
  transform: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--upscale:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--upscale:disabled {
  opacity: 1;
  background: transparent;
  border-color: var(--lyrc-border-subtle);
  color: var(--lyrc-text-disabled);
  box-shadow: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--upscale .sb-bt-btn-icon {
  color: var(--sb-accent);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--upscale:disabled .sb-bt-btn-icon {
  color: inherit;
}

/* ── Workflow rows (Analyze / Generate / Transcribe): flat cards ────── */
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow {
  border-radius: var(--lyrc-r-lg);
  background: var(--lyrc-surface-card);
  background-image: none;
  border: 1px solid var(--lyrc-border-subtle);
  color: var(--sb-text);
  box-shadow: none;
  transition: background var(--lyrc-t-fast), border-color var(--lyrc-t-fast);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow:hover:not(:disabled) {
  background: var(--lyrc-surface-hover);
  background-image: none;
  border-color: var(--lyrc-border-strong);
  box-shadow: var(--lyrc-shadow-sm);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow:focus-visible,
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow-primary:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow:disabled {
  opacity: 1;
  background: transparent;
  background-image: none;
  border-color: var(--lyrc-border-subtle);
  color: var(--lyrc-text-disabled);
  box-shadow: none;
}
/* Workflow PRIMARY = recommended next step: accent-tinted surface and accent
   border, one step below the solid Export fill. */
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow-primary {
  background: rgba(59, 130, 246, 0.14);
  background-image: none;
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--sb-text);
  box-shadow: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow-primary:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.22);
  background-image: none;
  border-color: var(--sb-accent);
  box-shadow: var(--lyrc-shadow-sm);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow-primary:disabled {
  background: transparent;
  border-color: var(--lyrc-border-subtle);
  color: var(--lyrc-text-disabled);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow-secondary {
  background: var(--lyrc-surface-card);
  background-image: none;
  border-color: var(--lyrc-border-subtle);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow .sb-bt-workflow-step,
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow-primary .sb-bt-workflow-step {
  background: rgba(59, 130, 246, 0.20);
  color: var(--sb-accent);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--workflow:disabled .sb-bt-workflow-step {
  background: var(--lyrc-border-subtle);
  color: inherit;
}
/* Rail "Analyze": beat-timeline.css:2405 rings it in cyan and animates the
   same cyan. Cyan is a second interactive colour — collapse it to accent. */
body.sb-bt-page.lyrc-tokens .sb-bt-rail-analyze .sb-bt-btn--workflow-primary {
  box-shadow: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-rail-analyze .sb-bt-btn--workflow-primary.is-ready {
  animation: none;
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.45);
}
body.sb-bt-page.lyrc-tokens .sb-bt-rail-analyze .sb-bt-btn--workflow-primary:focus-visible {
  box-shadow: var(--lyrc-focus-ring);
}
/* Media-import modal paints a diagonal white sheen sweep over the control
   (beat-timeline-features.css:1454). Remove the paint, keep the element. */
body.sb-bt-page.lyrc-tokens #mediaImportModal .sb-bt-btn--workflow::after {
  background: none;
}

/* ── Upscale mode / colour pills: accent tint, no gradient ──────────── */
body.sb-bt-page.lyrc-tokens .sb-bt-upscale-pill {
  border-radius: var(--lyrc-r-sm);
  background: var(--lyrc-surface-card);
  background-image: none;
  border: 1px solid var(--lyrc-border-subtle);
  color: var(--lyrc-text-tertiary);
}
body.sb-bt-page.lyrc-tokens .sb-bt-upscale-pill:hover {
  background: var(--lyrc-surface-hover);
  border-color: var(--lyrc-border-strong);
  color: var(--sb-text);
}
body.sb-bt-page.lyrc-tokens .sb-bt-upscale-pill--active {
  background: rgba(59, 130, 246, 0.14);
  background-image: none;
  border: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: var(--lyrc-r-sm);
  color: var(--sb-accent);
  box-shadow: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-upscale-pill:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}
body.sb-bt-page.lyrc-tokens .sb-bt-upscale-select {
  border-radius: var(--lyrc-r-sm);
  background: var(--lyrc-surface-input);
  background-image: none;
  border: 1px solid var(--sb-border);
  color: var(--sb-text);
}
body.sb-bt-page.lyrc-tokens .sb-bt-upscale-select:focus-visible {
  outline: none;
  border-color: var(--sb-accent);
  box-shadow: var(--lyrc-focus-ring);
}

/* ── Preview sharpener toggle block ─────────────────────────────────── */
body.sb-bt-page.lyrc-tokens .cf-upscale-toggle {
  border-radius: var(--lyrc-r-md);
  background: var(--lyrc-surface-card);
  background-image: none;
  border: 1px solid var(--lyrc-border-subtle);
}
body.sb-bt-page.lyrc-tokens .cf-upscale-toggle-row input[type="checkbox"] {
  accent-color: var(--sb-accent);
}
body.sb-bt-page.lyrc-tokens .cf-upscale-toggle-copy strong {
  color: var(--sb-text);
}
body.sb-bt-page.lyrc-tokens .cf-upscale-toggle-copy span {
  color: var(--lyrc-text-tertiary);
}
body.sb-bt-page.lyrc-tokens .cf-upscale-toggle-status {
  border-radius: var(--lyrc-r-sm);
  background: rgba(59, 130, 246, 0.12);
  color: var(--sb-accent);
}

/* ---------------------------------------------------------------------------
   "Every beat" toggle — the last gradient control left in the timeline rail.
   Base rule: beat-timeline.css:3204 (dashed blue gradient) and :3227 (active
   gradient). Paint only; the dashed-to-solid border is what signals state, so
   that stays. --------------------------------------------------------------*/
body.sb-bt-page.lyrc-tokens .sb-bt-btn--every-beat {
  background: var(--lyrc-surface-raised);
  background-image: none;
  border-color: var(--lyrc-border-strong);
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--every-beat:hover:not(:disabled) {
  background: var(--lyrc-surface-hover);
  border-color: #3B82F6;
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--every-beat.is-active {
  background: rgba(59, 130, 246, 0.16);
  background-image: none;
  border-color: #3B82F6;
}
body.sb-bt-page.lyrc-tokens .sb-bt-btn--every-beat:focus-visible {
  box-shadow: var(--lyrc-focus-ring);
}

/* ---------------------------------------------------------------------------
   Preview size. The stage was height-starved while width went unused, so the
   video sat small with black bars either side.

   1. beat-timeline-features.css reserves 82px at the bottom of .sb-bt-main for
      the fixed #nowPlayingBar. On this desktop layout the bar floats over the
      TIMELINE panel, which sits below .sb-bt-main, so those 82px protected
      nothing and simply shortened the preview. Reclaimed here for desktop only;
      the mobile rule (max-width 640px) is left exactly as it was, and the bar
      itself is untouched.
   2. Trim the stage padding so the recovered height reaches the video.
   --------------------------------------------------------------------------*/
@media (min-width: 901px) {
  body.sb-bt-page .sb-bt-main { padding-bottom: 0; }
  body.sb-bt-page .sb-bt-player-visual { padding: 10px 12px 8px; }
  body.sb-bt-page .sb-bt-preview-column { gap: 7px; }
}

/* The Fill/Fit control reads as a word, like the orientation toggle beside it. */
.sb-bt-preview-chrome-btn--fill { min-width: 46px; }
.sb-bt-preview-chrome-btn--fill[aria-pressed="true"] {
  border-color: #3B82F6;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Rail sub-tabs + Effect settings (2026-09-19). LYRC tokens only: one accent,
   flat surfaces, no gradients on controls, visible focus.
   --------------------------------------------------------------------------*/
body.sb-bt-page.lyrc-tokens .sb-bt-rail-subtabs { margin: 0 0 10px; }

/* Intensity slider */
body.sb-bt-page.lyrc-tokens .sb-bt-fx-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 10px 0 2px;
  border-radius: 999px; background: var(--lyrc-surface-hover); outline: none;
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #3B82F6; border: 2px solid #0B0C10; cursor: pointer;
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #3B82F6; border: 2px solid #0B0C10; cursor: pointer;
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-range:focus-visible { box-shadow: var(--lyrc-focus-ring); }

/* Colour swatches */
body.sb-bt-page.lyrc-tokens .sb-bt-fx-swatches {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px;
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-swatch {
  width: 24px; height: 24px; padding: 0;
  border-radius: var(--lyrc-r-sm);
  border: 1px solid var(--lyrc-border-strong);
  background: var(--sw, var(--lyrc-surface-raised));
  cursor: pointer; position: relative;
  transition: border-color .18s ease, transform .18s ease;
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-swatch:hover { transform: translateY(-1px); border-color: #3B82F6; }
body.sb-bt-page.lyrc-tokens .sb-bt-fx-swatch:focus-visible { box-shadow: var(--lyrc-focus-ring); }
body.sb-bt-page.lyrc-tokens .sb-bt-fx-swatch.is-active {
  border-color: #3B82F6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.35);
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-swatch--auto {
  width: auto; padding: 0 9px; font-size: 11px; font-weight: 600;
  color: #fff; background: var(--lyrc-surface-raised);
}
/* Custom colour: the native picker sits invisibly over the tile. */
body.sb-bt-page.lyrc-tokens .sb-bt-fx-swatch--custom {
  display: grid; place-items: center; overflow: hidden;
  background: conic-gradient(#FF4D6D, #FFB020, #34D399, #3B82F6, #A855F7, #FF4D6D);
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-swatch--custom input[type="color"] {
  opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer;
}
body.sb-bt-page.lyrc-tokens .sb-bt-fx-target { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

/* ── Look tab: colour-grade presets, strength + glow ───────────────────────
   Uses the LYRC tokens only: one blue accent, flat surfaces, no gradients. */
.lyrc-tokens .sb-bt-look {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lyrc-tokens .sb-bt-look-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lyrc-tokens .sb-bt-look-chip {
  appearance: none;
  border: 1px solid var(--lyrc-border-subtle);
  background: var(--lyrc-surface-input);
  color: var(--sb-text-dim);
  font: 600 12px/1 'Inter', -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: .01em;
  padding: 8px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lyrc-tokens .sb-bt-look-chip:hover {
  background: var(--lyrc-surface-hover);
  color: var(--sb-text);
}
.lyrc-tokens .sb-bt-look-chip:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}
/* The selected chip keeps the editor's house pill treatment
   (body.sb-bt-page.lyrc-tokens .sb-bt-upscale-pill--active above): a translucent
   blue fill. Only the border and text colour are set here so it reads clearly. */
.lyrc-tokens .sb-bt-look-chip.is-active,
.lyrc-tokens .sb-bt-look-chip.sb-bt-upscale-pill--active {
  border-color: var(--sb-accent);
  color: var(--sb-text);
}
.lyrc-tokens .sb-bt-look-slider {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lyrc-tokens .sb-bt-look-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 600 12px/1 'Inter', -apple-system, 'Segoe UI', sans-serif;
  color: var(--sb-text-dim);
}
.lyrc-tokens .sb-bt-look-slider-val {
  font-family: var(--sb-mono);
  font-size: 11px;
  color: var(--lyrc-text-tertiary);
}
.lyrc-tokens .sb-bt-look-slider input[type="range"] {
  width: 100%;
  accent-color: var(--sb-accent);
}

/* Glow preview layer — screens a blurred, brightened copy of the frame over
   the picture, approximating the export's bloom. Opacity is set from JS. */
.sb-bt-preview .sb-bt-glow-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  backdrop-filter: blur(14px) brightness(1.5) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) brightness(1.5) saturate(1.1);
  transition: opacity .18s ease;
}

/* ── Caption style browser (Style rail ▸ Preset) ────────────────────────────
   Category tabs + a grid of preset tiles, each tile a static HTML/CSS
   miniature of the style. LYRC only: one blue accent for the chrome, flat
   surfaces, no gradients on controls. The caption accent colours live inside
   the miniature (content preview, same as a clip thumbnail) — never on a
   control. The section is hidden by default and only shown by JS once
   window.BeatTimelineCaptions.listStyles() exists. */
.lyrc-tokens .sb-bt-capbrowse {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lyrc-border-subtle);
}
.lyrc-tokens .sb-bt-capbrowse[hidden] { display: none; }

.lyrc-tokens .sb-bt-capbrowse-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.lyrc-tokens .sb-bt-capbrowse-count {
  font-family: var(--sb-mono);
  font-size: 10px;
  color: var(--lyrc-text-disabled);
  white-space: nowrap;
}

/* Category tabs: chips that wrap onto a second row rather than scrolling out
   of sight, so every family is visible on a 1280-wide window's rail too. */
.lyrc-tokens .sb-bt-capbrowse-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lyrc-tokens .sb-bt-capbrowse-tab {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid var(--lyrc-border-subtle);
  background: var(--lyrc-surface-input);
  background-image: none;
  color: var(--lyrc-text-tertiary);
  font: 600 11px/1 'Inter', -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: .02em;
  padding: 7px 10px;
  border-radius: var(--lyrc-r-md);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: background var(--lyrc-t-fast), border-color var(--lyrc-t-fast), color var(--lyrc-t-fast);
}
.lyrc-tokens .sb-bt-capbrowse-tab:hover {
  background: var(--lyrc-surface-hover);
  color: var(--sb-text);
}
.lyrc-tokens .sb-bt-capbrowse-tab:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}
/* House active-pill treatment: translucent blue fill + accent border. */
.lyrc-tokens .sb-bt-capbrowse-tab.is-active {
  border-color: var(--sb-accent);
  background: rgba(59, 130, 246, 0.14);
  color: var(--sb-text);
}

/* 2 columns on the default ~340px rail, 4 once the rail is dragged wide.
   The grid scrolls inside itself so the rail never grows. */
.lyrc-tokens .sb-bt-capbrowse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 8px;
  max-height: min(44vh, 400px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

/* Anatomy matches the caption preset tiles (.sb-bt-caption-tile): the sample
   sits directly on the card surface and the name is a muted footer strip —
   not an inner black box with a bright label under it. */
.lyrc-tokens .sb-bt-capbrowse-tile {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--lyrc-border-subtle);
  border-radius: var(--lyrc-r-md);
  background: var(--lyrc-surface-card);
  background-image: none;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--lyrc-t-fast), border-color var(--lyrc-t-fast), box-shadow var(--lyrc-t-fast);
}
.lyrc-tokens .sb-bt-capbrowse-tile:hover {
  background: var(--lyrc-surface-hover);
  border-color: var(--sb-border);
  box-shadow: var(--lyrc-shadow-sm);
}
.lyrc-tokens .sb-bt-capbrowse-tile:focus-visible {
  outline: none;
  box-shadow: var(--lyrc-focus-ring);
}
/* Selected tile: the same 2px accent border + blue tint every other tile in
   the editor uses. Padding drops 1px so the tile does not jump. */
.lyrc-tokens .sb-bt-capbrowse-tile.is-active {
  border: 2px solid var(--sb-accent);
  padding: 0;
  background: rgba(59, 130, 246, 0.08);
}

.lyrc-tokens .sb-bt-capbrowse-name {
  display: block;
  padding: 7px 10px 8px;
  font: 600 11px/1.2 'Inter', -apple-system, 'Segoe UI', sans-serif;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── The miniature: "THE QUICK BROWN FOX" laid out the way the style lays
   words out. Static HTML/CSS, no canvas, no animation. ──────────────────── */
.lyrc-tokens .sb-bt-capbrowse-mini {
  position: relative;
  /* flex: none — inside the tile's flex column the aspect-ratio alone collapsed
     to the text height (20px), so the whole tile shrank to 39px. */
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  display: flex;
  padding: 9px 10px;
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  color: #fff;
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.05;
  white-space: pre-wrap;
  user-select: none;
}
.lyrc-tokens .sb-bt-capbrowse-mini-row { display: block; }
.lyrc-tokens .sb-bt-capbrowse-w { color: inherit; }
.lyrc-tokens .sb-bt-capbrowse-w.is-accent { color: var(--capmini-accent, #F5D90A); }

/* Multiline — staircase stack, each line stepped down and indented. */
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="multiline"] {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  font-size: 9px;
}
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="multiline"] .sb-bt-capbrowse-mini-row:nth-child(2) { margin-left: 9px; }
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="multiline"] .sb-bt-capbrowse-mini-row:nth-child(3) { margin-left: 18px; }

/* Word-by-word — one big word, the rest implied by two dim ghosts. */
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="word"] {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 15px;
  font-weight: 900;
}
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="word"] .sb-bt-capbrowse-ghost {
  font-size: 7px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: .12em;
}

/* Highlight — whole phrase held, the active word carries the accent. */
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="highlight"] {
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 2px 3px;
  font-size: 9px;
  text-align: center;
}
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="highlight"] .sb-bt-capbrowse-w.is-accent {
  color: #0A0A0D;
  background: var(--capmini-accent, #F5D90A);
  border-radius: 3px;
  padding: 1px 3px;
  margin: -1px;
}

/* Minimal — sentence case, lighter weight, no stroke. */
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="minimal"] {
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  text-align: center;
  color: rgba(255, 255, 255, 0.94);
}
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="minimal"] .sb-bt-capbrowse-w.is-accent {
  color: var(--capmini-accent, #3B82F6);
  font-weight: 700;
}

/* Bold — heavy caps, two tight lines, black stroke. */
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="bold"] {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.01em;
  text-align: center;
  -webkit-text-stroke: .7px #000;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

/* Scatter — words at their own x/y, the kinetic-typography look. */
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="scatter"] { display: block; font-size: 8px; }
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="scatter"] .sb-bt-capbrowse-mini-row {
  position: absolute;
  white-space: nowrap;
}
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="scatter"] .sb-bt-capbrowse-mini-row:nth-child(1) { left: 8%;  top: 12%; }
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="scatter"] .sb-bt-capbrowse-mini-row:nth-child(2) { left: 48%; top: 34%; }
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="scatter"] .sb-bt-capbrowse-mini-row:nth-child(3) { left: 6%;  top: 56%; font-size: 10px; }
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="scatter"] .sb-bt-capbrowse-mini-row:nth-child(4) { left: 40%; top: 78%; }

/* Fallback for a family the browser does not know: a plain centred phrase. */
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="phrase"] {
  align-items: center;
  justify-content: center;
  font-size: 9px;
  text-align: center;
}

.lyrc-tokens .sb-bt-capbrowse-empty {
  margin: 0;
  padding: 18px 12px;
  border: 1px dashed var(--lyrc-border-subtle);
  border-radius: var(--lyrc-r-lg);
  background: var(--sb-panel-2);
  color: var(--lyrc-text-tertiary);
  font-size: 12px;
  text-align: center;
}

/* Shorter viewports (1280x720 / 1366x768): keep the grid from eating the
   template presets and sliders underneath it. */
@media (max-height: 800px) {
  .lyrc-tokens .sb-bt-capbrowse-grid { max-height: 232px; }
}

/* Caption style browser — additions for the engine's previewText conventions:
   `[word]` marks the highlighted word, and a lowercase word inside an
   otherwise-uppercase phrase marks the "not yet spoken" dim state. */
.lyrc-tokens .sb-bt-capbrowse-w.is-dim { color: rgba(255, 255, 255, 0.38); }
.lyrc-tokens .sb-bt-capbrowse-w.is-pill {
  color: #0A0A0D;
  background: var(--capmini-accent, #F5D90A);
  border-radius: 3px;
  padding: 1px 3px;
}

/* Split — two lines, the second pushed to the opposite edge. */
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="split"] {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
}
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="split"] .sb-bt-capbrowse-mini-row:nth-child(1) { text-align: left; }
.lyrc-tokens .sb-bt-capbrowse-mini[data-mini="split"] .sb-bt-capbrowse-mini-row:nth-child(2) { text-align: right; }

/* ---------------------------------------------------------------------------
   Caption tiles: a height floor, so the mini cannot collapse to a text strip.

   Dagim sees ~40px tiles on prod with no style name and only the first line of
   the sample. I could not reproduce it at any viewport - mine measure 124px
   with the name at 28px from the first frame - but the mechanism is already
   written down a few rules up:

     "aspect-ratio alone collapsed to the text height (20px), so the whole
      tile shrank to 39px"

   That is his screenshot exactly. `flex: 0 0 auto` stopped it here, but the
   height still comes from `aspect-ratio: 16/10` resolving against the column
   width, and when it does not resolve the tile falls back to content height:
   the mini becomes a ~20px text strip, `overflow: hidden` on the tile eats
   the remaining sample lines, and the name - `white-space: nowrap` - is
   clipped out of the box entirely. One failure, all three symptoms.

   So the height stops depending on aspect-ratio alone. The rail is locked at
   340px, which gives two columns and a 99px mini, so this floor is inert
   wherever things already work and a rescue wherever they do not.

   Deliberately NOT scoped to .lyrc-tokens: the most likely way to end up in
   the broken state is this stylesheet arriving stale or not at all, and a
   rule that needs the skin to work cannot rescue the skin failing.
   --------------------------------------------------------------------------- */
.sb-bt-capbrowse-mini {
  min-height: 72px;
}
.sb-bt-capbrowse-tile {
  min-height: 104px;
}
/* The name is the thing you read to tell two tiles apart, so it must never be
   the part that gets clipped. */
.sb-bt-capbrowse-name {
  flex: 0 0 auto;
}