/* LYRC design-token skin for the phone beat editor (beat-editor.html).
 * Revert: remove `lyrc-be` from <body class> OR delete the <link> in beat-editor.html.
 * Tokens: cutflux-tokens.css (--cf-*). Rules: Downloads/lyrc-design-system.json.
 *
 * Visual layer only: colour, type, radius, shadow, transition. No layout or
 * geometry changes - the CapCut phone layout (beat-editor-capcut.css) is
 * owner-approved and stays exactly as it is.
 * Performance: nothing here animates a video, a filter or a backdrop-filter on
 * the stage. The drifting blurred background glow is switched off (it was a
 * full-screen 110px blur animating behind the editor).
 *
 * Selector prefix `html body.lyrc-be` (0,1,2) so these beat the page's inline
 * styles, beat-editor-capcut.css and the shared beat-editor-polish.css
 * (`html[data-portal="beat"] .x` + !important) without editing those files. */

html body.lyrc-be {
  --lb-text: var(--cf-text);
  --lb-text-2: var(--cf-text-2);
  --lb-text-3: var(--cf-text-3);
  --lb-text-4: var(--cf-text-4);
  background: var(--cf-canvas);
  color: var(--cf-text);
  font-family: var(--cf-font);
}
html body.lyrc-be input[type=range] { accent-color: var(--cf-accent); }
html body.lyrc-be :is(button, a, input, [tabindex]):focus-visible { outline: none; box-shadow: var(--cf-focus); }

/* No radial glows on static backgrounds (and it was an animated full-screen blur). */
html body.lyrc-be .bg-glow { display: none !important; }

/* ── App frame ── */
html body.lyrc-be .app { background: var(--cf-bg); }
html body.lyrc-be .hdr { background: var(--cf-bg); }
html body.lyrc-be .hdr-close {
  background: var(--cf-surface); color: var(--cf-text);
  transition: background var(--cf-t-fast);
}
html body.lyrc-be .hdr-close:active { background: var(--cf-hover); }

/* Primary button: flat accent, no gradient, no shadow. */
html body.lyrc-be .hdr-export {
  background: var(--cf-accent) !important; box-shadow: none !important;
  border-radius: var(--cf-r-button); color: #fff; font-weight: 600; letter-spacing: 0;
  transition: background var(--cf-t-fast), opacity var(--cf-t-base);
}
html body.lyrc-be .hdr-export:not([disabled]):hover { background: var(--cf-accent-hover) !important; }
html body.lyrc-be .hdr-export[disabled] {
  background: var(--cf-surface) !important; color: var(--cf-text-4); opacity: 1;
}

/* Coach marks are tooltips: flat accent, floating shadow, white text. */
html body.lyrc-be .save-coach,
html body.lyrc-be .play-coach {
  background: var(--cf-accent) !important; color: #fff;
  box-shadow: var(--cf-shadow-md) !important; font-weight: 600; border-radius: var(--cf-r-button);
}
html body.lyrc-be .save-coach::before,
html body.lyrc-be .play-coach::after { background: var(--cf-accent) !important; }
html body.lyrc-be .save-coach .sc-x,
html body.lyrc-be .play-coach .pc-x { background: rgba(0, 0, 0, .2); font-weight: 700; }

/* ── Stage (canvas stays pure black) ── */
html body.lyrc-be .stage { background: var(--cf-canvas); }
html body.lyrc-be .stage-empty {
  background: transparent; border-color: var(--cf-border-strong); border-radius: var(--cf-r-panel);
}
html body.lyrc-be .stage-empty-icon {
  background: var(--cf-accent-soft); color: var(--cf-accent); border-radius: var(--cf-r-card);
}
html body.lyrc-be .stage-empty-h { color: var(--cf-text); font-weight: 700; letter-spacing: -.01em; }
/* One font: the serif accent word becomes Inter in the accent colour. */
html body.lyrc-be .stage-empty-h em {
  font-family: var(--cf-font); font-weight: 700; color: var(--cf-accent) !important;
}
html body.lyrc-be .stage-empty-sub { color: var(--cf-text-3); }
html body.lyrc-be .stage-empty-step {
  background: var(--cf-surface); border-color: var(--cf-border-subtle); border-radius: var(--cf-r-card);
  transition: background var(--cf-t-base), border-color var(--cf-t-base), opacity var(--cf-t-base);
}
html body.lyrc-be .stage-empty-step .num {
  background: var(--cf-accent); color: #fff; font-family: var(--cf-font); font-weight: 700;
  font-variant-numeric: tabular-nums; border-radius: var(--cf-r-button);
}
html body.lyrc-be .stage-empty-step .txt { color: var(--cf-text-2); font-weight: 500; }
html body.lyrc-be .stage-empty-step .txt b { color: var(--cf-text); font-weight: 600; }
html body.lyrc-be .stage-empty-step .ck { color: var(--cf-ok); transition: opacity var(--cf-t-base); }
html body.lyrc-be .stage-empty-step.done .num { background: rgba(52, 211, 153, .16); color: var(--cf-ok); }
html body.lyrc-be .stage-empty-step.done .txt { color: var(--cf-text-3); }
html body.lyrc-be .stage-empty-arrow { color: var(--cf-accent) !important; opacity: .7; }

/* ── Analyzing loader: deliberate and calm ──
   fades in when shown, flat accent fill (was a blue-to-purple gradient), no
   purple glow pulse (box-shadow animation repaints every frame) - the box now
   breathes with a transform-only scale, which stays on the compositor. */
@keyframes lyrcBeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lyrcBeBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
html body.lyrc-be .stage-load { background: var(--cf-bg); animation: lyrcBeFadeIn var(--cf-t-slow) both; }
html body.lyrc-be .load-box,
html body.lyrc-be .export-load {
  border: 1.5px solid var(--cf-accent); border-radius: var(--cf-r-panel); background: var(--cf-surface);
  box-shadow: none; animation: lyrcBeBreathe 1s ease-in-out infinite;
}
html body.lyrc-be .load-fill { background: var(--cf-accent); transition: height var(--cf-t-base); }
html body.lyrc-be .load-eq { background: rgba(255, 255, 255, .85); }
html body.lyrc-be .load-scan { background: rgba(255, 255, 255, .7); box-shadow: none; }
html body.lyrc-be .load-ticks span { background: var(--cf-text); }
html body.lyrc-be .load-pct,
html body.lyrc-be .export-pct {
  font-family: var(--cf-font); font-weight: 700; color: var(--cf-text); font-variant-numeric: tabular-nums;
}
html body.lyrc-be .load-pct b,
html body.lyrc-be .export-pct b { color: var(--cf-text-3); font-weight: 500; }
/* Wording unchanged; just sentence case in Inter instead of uppercase mono. */
html body.lyrc-be .load-lbl {
  font-family: var(--cf-font); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--cf-text-2) !important; transition: opacity var(--cf-t-slow);
}
@media (prefers-reduced-motion: reduce) {
  html body.lyrc-be .load-box, html body.lyrc-be .export-load, html body.lyrc-be .stage-load { animation: none; }
}

/* ── Media chips (empty-state call to action) ── */
html body.lyrc-be .add-chip {
  background: var(--cf-surface); border-color: var(--cf-border); color: var(--cf-text-2); font-weight: 600;
  transition: transform var(--cf-t-fast), border-color var(--cf-t-base), background var(--cf-t-base), box-shadow var(--cf-t-base);
}
html body.lyrc-be .add-chip:active { background: var(--cf-hover); }
html body.lyrc-be .add-chip.stock-chip,
html body.lyrc-be .add-chip.clips-chip { border-color: var(--cf-border); }
html body.lyrc-be .add-chip.filled,
html body.lyrc-be .add-chip.stock-chip.filled,
html body.lyrc-be .add-chip.clips-chip.filled {
  background: var(--cf-surface); border-color: var(--cf-border-strong); color: var(--cf-text);
}
html body.lyrc-be .add-chip.needs {
  background: var(--cf-accent-soft); border-color: var(--cf-accent); color: var(--cf-text);
}
html body.lyrc-be .add-chip .check { stroke: var(--cf-ok); }

/* ── Transport ── */
html body.lyrc-be .transport .t-time,
html body.lyrc-be .t-time {
  font-family: var(--cf-font); font-weight: 600; color: var(--cf-text-2); font-variant-numeric: tabular-nums;
}
html body.lyrc-be .t-btn { background: var(--cf-surface); color: var(--cf-text-2); transition: background var(--cf-t-fast); }
html body.lyrc-be .t-btn:active { background: var(--cf-hover); }
html body.lyrc-be .t-primary {
  background: var(--cf-accent) !important; box-shadow: none !important; color: #fff;
  transition: background var(--cf-t-fast);
}
html body.lyrc-be .t-primary:active { background: var(--cf-accent-active) !important; }
html body.lyrc-be .t-primary[data-state=disabled] {
  background: var(--cf-surface) !important; color: var(--cf-text-4);
}

/* ── Timeline ── */
html body.lyrc-be .tl-ticks { border-bottom-color: var(--cf-border); }
html body.lyrc-be .tl-ticks .tick { background: var(--cf-text-4); }
html body.lyrc-be .tl-ticks .tick.sec { background: var(--cf-text-3); }
html body.lyrc-be .tl-ticks .tick.sec b {
  font-family: var(--cf-font); font-weight: 500; color: var(--cf-text-3); font-variant-numeric: tabular-nums;
}
/* Cells show a flat surface while their thumbnail is still drawing (was a
   blue-purple gradient block). Static on purpose: no per-cell animation runs
   under playback. */
html body.lyrc-be .tl-clip { background: var(--cf-surface) !important; }
html body.lyrc-be .tl-clip.selected { outline-color: var(--cf-accent); }
html body.lyrc-be .tl-clip .dur { font-family: var(--cf-font); font-weight: 600; font-variant-numeric: tabular-nums; }
html body.lyrc-be .tl-clip .tl-swap { background: rgba(10, 10, 13, .8); color: var(--cf-text); transition: opacity var(--cf-t-fast); }
html body.lyrc-be .tl-add {
  border-color: var(--cf-border-strong); background: var(--cf-surface); color: var(--cf-text-3); border-radius: var(--cf-r-card);
}
html body.lyrc-be .tl-tx-gap {
  border-color: var(--cf-border-strong); background: var(--cf-surface); color: var(--cf-text-2); font-weight: 700;
}
html body.lyrc-be .tl-tx-gap .tx-dot { box-shadow: none; }
html body.lyrc-be .tl-tx-gap.active { outline-color: var(--cf-accent); background: var(--cf-accent-soft); color: #fff; }
html body.lyrc-be .tl-playhead { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
html body.lyrc-be .tl-playhead-cap { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
/* Sound lane: neutral track (was green, which is status-only). */
html body.lyrc-be .tl-audio {
  background: var(--cf-surface); border-color: var(--cf-border); color: var(--cf-text-2); font-weight: 600;
}
html body.lyrc-be .tl-audio svg { color: var(--cf-accent); stroke: var(--cf-accent); }

/* ── Tool bar ── */
html body.lyrc-be .dock {
  background: var(--cf-panel) !important; border-top: 1px solid var(--cf-border-subtle) !important;
}
html body.lyrc-be .dock .dk { color: var(--cf-text-2); font-weight: 500 !important; letter-spacing: 0; text-shadow: none; }
html body.lyrc-be .dock .dk-box { color: var(--cf-text); border-radius: var(--cf-r-card); transition: background var(--cf-t-base), color var(--cf-t-base), transform var(--cf-t-fast); }
html body.lyrc-be .dock .dk.active { color: var(--cf-text) !important; font-weight: 600 !important; }
html body.lyrc-be .dock .dk.active .dk-box {
  background: var(--cf-accent-soft) !important; color: var(--cf-accent-hover) !important; box-shadow: none !important;
}

/* ── Sheets (floating: shadow allowed) ── */
html body.lyrc-be .scrim { transition: opacity var(--cf-t-base); }
html body.lyrc-be .sheet {
  background: var(--cf-panel); border-color: var(--cf-border-subtle);
  border-radius: var(--cf-r-panel) var(--cf-r-panel) 0 0 !important; box-shadow: var(--cf-shadow-lg);
}
@media (max-width: 899px) {
  html body.lyrc-be .sheet:not(.open) { transition: transform 180ms cubic-bezier(.2,.8,.25,1), visibility 0s linear 180ms; }
  html body.lyrc-be .sheet.open { transition: transform 180ms cubic-bezier(.2,.8,.25,1), visibility 0s; }
}
html body.lyrc-be .sheet-handle { background: var(--cf-text-4); }
html body.lyrc-be .sheet-title { font-size: 14px; font-weight: 600; color: var(--cf-text); letter-spacing: -.005em; }
html body.lyrc-be .sheet-x { background: var(--cf-surface); color: var(--cf-text-2); transition: background var(--cf-t-fast); }
html body.lyrc-be .sheet-x:active { background: var(--cf-hover); }
html body.lyrc-be .hint { color: var(--cf-text-3); }
html body.lyrc-be .hint b,
html body.lyrc-be .hint b[style] { color: var(--cf-text) !important; font-weight: 600; }
html body.lyrc-be .sec-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--cf-text-3); }
html body.lyrc-be .sec-lbl .val { font-family: var(--cf-font); font-weight: 600; color: var(--cf-text); font-variant-numeric: tabular-nums; }
html body.lyrc-be #sheetFx .fx-sec { font-weight: 600; letter-spacing: .06em; color: var(--cf-text-3); }

/* Option cards (transitions / effects). The colour swatches are previews of
   each effect, so they keep their colours. */
html body.lyrc-be .chip {
  background: var(--cf-surface); border-color: var(--cf-border-subtle); color: var(--cf-text-2);
  font-weight: 600; border-radius: var(--cf-r-card);
  transition: background var(--cf-t-fast), border-color var(--cf-t-fast), color var(--cf-t-fast);
}
html body.lyrc-be .chip:active { background: var(--cf-hover); }
html body.lyrc-be .chip.selected { background: var(--cf-accent-soft); border-color: var(--cf-accent); color: var(--cf-text); }
html body.lyrc-be #sheetFx .chip .sw { border-radius: var(--cf-r-button); }
html body.lyrc-be .chip-full {
  background: var(--cf-raised); border-color: var(--cf-border); color: var(--cf-text); font-weight: 600;
  border-radius: var(--cf-r-button); transition: background var(--cf-t-fast);
}
html body.lyrc-be .chip-full:active { background: var(--cf-hover); }

/* Length / pace pills */
html body.lyrc-be .len-chip {
  font-family: var(--cf-font); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--cf-surface); border-color: var(--cf-border-subtle); color: var(--cf-text-2);
  transition: background var(--cf-t-fast), border-color var(--cf-t-fast);
}
html body.lyrc-be .len-chip.selected { background: var(--cf-accent-soft); border-color: var(--cf-accent); color: var(--cf-text); }
html body.lyrc-be .len-chip .pro { background: var(--cf-warn); }
html body.lyrc-be .fmt-tile {
  background: var(--cf-surface); border-color: var(--cf-border-subtle); color: var(--cf-text-2);
  font-weight: 500; border-radius: var(--cf-r-card); transition: background var(--cf-t-fast), border-color var(--cf-t-fast);
}
html body.lyrc-be .fmt-tile.selected { background: var(--cf-accent-soft); border-color: var(--cf-accent); color: var(--cf-text); }
html body.lyrc-be .fmt-glyph .inner { background: var(--cf-accent) !important; }

/* Clips grid + replace sheet */
html body.lyrc-be .clip-tile {
  background: var(--cf-surface) !important; border-color: var(--cf-border-subtle); border-radius: var(--cf-r-card);
  transition: border-color var(--cf-t-fast), opacity var(--cf-t-fast), transform var(--cf-t-fast);
}
html body.lyrc-be .clip-tile canvas,
html body.lyrc-be .clip-tile img { background: var(--cf-surface); }
html body.lyrc-be .clip-tile.thumb-pending::after {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .07) 48%, transparent 66%);
}
html body.lyrc-be .clip-tile .dur { font-family: var(--cf-font); font-weight: 600; font-variant-numeric: tabular-nums; }
html body.lyrc-be .clip-tile .clip-src { font-weight: 600; }
html body.lyrc-be .clip-check { background: var(--cf-accent) !important; box-shadow: none !important; border-color: #fff; }
html body.lyrc-be .clip-tile.st-out .clip-check { background: rgba(10, 10, 13, .8) !important; border-color: var(--cf-text-3); }
html body.lyrc-be .clip-tile.st-in { border-color: var(--cf-accent); box-shadow: none; }
html body.lyrc-be .clip-tile.st-key { border-color: var(--cf-warn); box-shadow: none; }
html body.lyrc-be .clip-tile.st-key .clip-check { background: var(--cf-warn) !important; }
html body.lyrc-be .clip-star {
  background: rgba(10, 10, 13, .82); border-color: var(--cf-border-strong); color: var(--cf-text-2);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body.lyrc-be .clip-star.on { background: var(--cf-warn); color: var(--cf-text-inverse); box-shadow: none; }
html body.lyrc-be .clip-hint { color: var(--cf-text-3); }
html body.lyrc-be .clip-hint i.k { background: var(--cf-warn); }
html body.lyrc-be .clip-hint i.c { background: var(--cf-accent) !important; }
html body.lyrc-be .clips-bar { background: var(--cf-panel); }
html body.lyrc-be .clips-bar button {
  background: var(--cf-raised); border-color: var(--cf-border); color: var(--cf-text); font-weight: 600;
  border-radius: var(--cf-r-button); transition: background var(--cf-t-fast);
}
html body.lyrc-be .clips-bar button:active { background: var(--cf-hover); }
html body.lyrc-be .replace-tile.current { outline-color: var(--cf-accent); }
html body.lyrc-be .replace-tile .use-badge { background: var(--cf-accent); font-weight: 700; }
html body.lyrc-be .clip-act-scrim { background: rgba(0, 0, 0, .55); }
html body.lyrc-be .clip-act-panel {
  background: var(--cf-raised); border-color: var(--cf-border); border-radius: var(--cf-r-panel); box-shadow: var(--cf-shadow-lg);
}
html body.lyrc-be .clip-act-lbl { color: var(--cf-text-3); font-weight: 600; }
html body.lyrc-be .clip-act-panel button { border-radius: var(--cf-r-button); font-weight: 600; }
html body.lyrc-be .clip-act-panel #btnChangeClip { background: var(--cf-accent); color: #fff; }
html body.lyrc-be .clip-act-panel .clip-act-cancel { background: var(--cf-surface); border: 1px solid var(--cf-border); color: var(--cf-text); }

/* Stock sheet */
html body.lyrc-be .stock-cat {
  background: var(--cf-surface); border-color: var(--cf-border-subtle); color: var(--cf-text-2); font-weight: 600;
  transition: background var(--cf-t-fast), border-color var(--cf-t-fast);
}
html body.lyrc-be .stock-cat.active { background: var(--cf-accent-soft); border-color: var(--cf-accent); color: var(--cf-text); box-shadow: none; }
html body.lyrc-be .stock-status { color: var(--cf-text-3); }
html body.lyrc-be .stock-tile { background: var(--cf-surface); border-color: var(--cf-border-subtle); border-radius: var(--cf-r-card); }
html body.lyrc-be .stock-tile:hover,
html body.lyrc-be .stock-tile:focus { border-color: var(--cf-accent); }
html body.lyrc-be .stock-tile .dur { font-family: var(--cf-font); font-weight: 600; font-variant-numeric: tabular-nums; }
html body.lyrc-be .stock-load { color: var(--cf-text-3); }
html body.lyrc-be .stock-load .t-spin,
html body.lyrc-be .t-spin { border-color: rgba(255, 255, 255, .18); border-top-color: var(--cf-accent); }
html body.lyrc-be .stock-foot { border-top-color: var(--cf-border-subtle); }
html body.lyrc-be .stock-foot button {
  background: var(--cf-accent); color: #fff; font-weight: 600; border-radius: var(--cf-r-button);
  transition: background var(--cf-t-fast), opacity var(--cf-t-base);
}
html body.lyrc-be .stock-foot button:disabled { background: var(--cf-surface); color: var(--cf-text-4); opacity: 1; }
/* While a category's clips are being fetched the grid is empty: reserve two
   rows of tile-shaped shimmer placeholders so the clips don't pop in with a jump. */
@keyframes lyrcBeShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
html body.lyrc-be #sheetStock .stock-cats:has(.stock-cat.active) ~ .stock-grid:empty::before {
  content: ""; grid-column: 1 / -1; aspect-ratio: 0.966;
  background: linear-gradient(90deg, var(--cf-surface) 0%, var(--cf-hover) 50%, var(--cf-surface) 100%);
  background-size: 200% 100%; animation: lyrcBeShimmer 1.4s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 8px), transparent 0), linear-gradient(#000 calc(100% - 8px), transparent 0);
  mask-image: linear-gradient(90deg, #000 calc(100% - 8px), transparent 0), linear-gradient(#000 calc(100% - 8px), transparent 0);
  -webkit-mask-size: calc((100% + 8px) / 3) 100%, 100% 50%; mask-size: calc((100% + 8px) / 3) 100%, 100% 50%;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (prefers-reduced-motion: reduce) {
  html body.lyrc-be #sheetStock .stock-grid:empty::before { animation: none; }
}

/* Captions sheet. The preset and font-family chips render in the caption's own
   font on purpose (they are previews) - only their frames are restyled. */
html body.lyrc-be .cap-toggle,
html body.lyrc-be .cap-row {
  background: var(--cf-surface); border-color: var(--cf-border-subtle); color: var(--cf-text);
  font-weight: 600; border-radius: var(--cf-r-card); transition: background var(--cf-t-fast);
}
html body.lyrc-be .cap-toggle strong,
html body.lyrc-be .cap-row strong { font-weight: 600; }
html body.lyrc-be .cap-toggle .lbl .sub,
html body.lyrc-be .cap-row .l .sub { color: var(--cf-text-3); font-weight: 400; }
html body.lyrc-be .cap-row .r { color: var(--cf-text-3); }
html body.lyrc-be .cap-row .r .fn { font-family: var(--cf-font); font-weight: 600; color: var(--cf-accent); }
html body.lyrc-be .cap-switch { background: var(--cf-hover); transition: background var(--cf-t-base); }
html body.lyrc-be .cap-switch::after { transition: transform var(--cf-t-base); }
html body.lyrc-be .cap-toggle.on .cap-switch { background: var(--cf-accent) !important; box-shadow: none !important; }
html body.lyrc-be .font-chip,
html body.lyrc-be .ft-chip {
  background: var(--cf-surface); border-color: var(--cf-border-subtle); border-radius: var(--cf-r-card);
  transition: background var(--cf-t-fast), border-color var(--cf-t-fast);
}
html body.lyrc-be .font-chip { color: var(--cf-text-2); }
html body.lyrc-be .ft-chip { color: var(--cf-text); }
html body.lyrc-be .font-chip.selected,
html body.lyrc-be .ft-chip.selected { background: var(--cf-accent-soft); border-color: var(--cf-accent); box-shadow: none; }
html body.lyrc-be .font-chip[disabled] .cs-need { color: var(--cf-text-3); }
html body.lyrc-be .font-chip .pro-dot { background: var(--cf-warn); box-shadow: none; }
html body.lyrc-be .ft-chip.default { font-family: var(--cf-font); font-weight: 600; letter-spacing: .04em; color: var(--cf-text-2); }
html body.lyrc-be .wt-chip {
  background: var(--cf-surface); border-color: var(--cf-border-subtle); color: var(--cf-text-2); font-family: var(--cf-font);
  transition: background var(--cf-t-fast), border-color var(--cf-t-fast);
}
html body.lyrc-be .wt-chip.selected { background: var(--cf-accent-soft); border-color: var(--cf-accent); color: var(--cf-text); box-shadow: none; }
html body.lyrc-be .wt-chip.it-chip i { font-weight: 700; }
html body.lyrc-be .slider-row label { color: var(--cf-text-2); font-weight: 600; }
html body.lyrc-be #capSizeVal { font-family: var(--cf-font) !important; font-weight: 600; color: var(--cf-accent) !important; font-variant-numeric: tabular-nums; }
html body.lyrc-be .font-picker::-webkit-scrollbar-thumb { background: var(--cf-border-strong); }
html body.lyrc-be .cf-tracker-swatch { border-color: var(--cf-border-strong); }
html body.lyrc-be .cf-tracker-swatch.selected { border-color: var(--cf-accent); box-shadow: none; }

/* ── Export overlay ── */
html body.lyrc-be .export-overlay { background: rgba(10, 10, 13, .94); }
html body.lyrc-be .export-h { color: var(--cf-text); font-weight: 600; }
html body.lyrc-be .export-sub {
  font-family: var(--cf-font); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--cf-text-2);
}
html body.lyrc-be .dn-check { background: var(--cf-ok); box-shadow: none; }
html body.lyrc-be .dn-h { font-weight: 700; color: var(--cf-text); }
html body.lyrc-be .dn-sub { color: var(--cf-text-2); }
html body.lyrc-be .dn-sub b { color: var(--cf-text) !important; font-weight: 600; }
html body.lyrc-be .dn-meta { font-family: var(--cf-font); color: var(--cf-text-3); font-variant-numeric: tabular-nums; }
html body.lyrc-be .dn-share {
  background: var(--cf-accent) !important; box-shadow: none !important; border-radius: var(--cf-r-button); font-weight: 600;
}
html body.lyrc-be .dn-done {
  background: var(--cf-raised); border-color: var(--cf-border); color: var(--cf-text); border-radius: var(--cf-r-button); font-weight: 600;
}

/* ── Toast (floating) ── */
html body.lyrc-be .toast-inner {
  background: var(--cf-raised); border-color: var(--cf-border); border-radius: var(--cf-r-panel);
  box-shadow: var(--cf-shadow-md); color: var(--cf-text); font-weight: 500;
}
html body.lyrc-be .toast-inner .dot { background: var(--cf-ok); box-shadow: none; }
@media (max-width: 899px) {
  html body.lyrc-be .toast:not(.show) { transition: transform var(--cf-t-slow), opacity var(--cf-t-base), visibility 0s linear 300ms; }
  html body.lyrc-be .toast.show { transition: transform var(--cf-t-slow), opacity var(--cf-t-base), visibility 0s; }
}
html body.lyrc-be .focus-exit { background: rgba(10, 10, 13, .75); border-color: var(--cf-border-strong); }

/* ── Song-start popup (markup shared with the desktop music crop) ──
   The draggable start line stays yellow because the copy says "Drag the yellow
   line"; it is now flat (no gradient, no glow). */
html body.lyrc-be .sb-bt-music-crop-panel {
  background: var(--cf-panel); border-color: var(--cf-border-subtle); border-radius: var(--cf-r-panel);
  box-shadow: var(--cf-shadow-lg); color: var(--cf-text);
}
html body.lyrc-be .sb-bt-music-crop-head h2 { font-weight: 700; }
html body.lyrc-be .sb-bt-music-crop-sub { color: var(--cf-text-2); }
html body.lyrc-be .sb-bt-music-crop-file { color: var(--cf-text-2); font-weight: 600; }
html body.lyrc-be .sb-bt-music-crop-track { background: var(--cf-input); border-color: var(--cf-border); border-radius: var(--cf-r-card); }
html body.lyrc-be .sb-bt-music-crop-window {
  background: rgba(59, 130, 246, .16); border-left-color: var(--cf-accent); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .3);
}
html body.lyrc-be .sb-bt-music-crop-playhead-cap { background: var(--cf-warn); box-shadow: none; }
html body.lyrc-be .sb-bt-music-crop-playhead-cap::before { background: var(--cf-warn); border-color: #fff; box-shadow: var(--cf-shadow-sm); }
html body.lyrc-be .sb-bt-music-crop-times { font-family: var(--cf-font); font-variant-numeric: tabular-nums; }
html body.lyrc-be .sb-bt-music-crop-start { color: var(--cf-warn); }
html body.lyrc-be .sb-bt-music-crop-sep,
html body.lyrc-be .sb-bt-music-crop-total { color: var(--cf-text-3); }
html body.lyrc-be .sb-bt-btn {
  border-radius: var(--cf-r-button); font-weight: 600; color: var(--cf-text);
  background: var(--cf-raised); border-color: var(--cf-border); box-shadow: none;
  transition: background var(--cf-t-fast);
}
html body.lyrc-be .sb-bt-btn:active { background: var(--cf-hover); }
html body.lyrc-be .sb-bt-btn--primary { background: var(--cf-accent); border-color: var(--cf-accent); color: #fff; }
html body.lyrc-be .sb-bt-btn--primary:hover { background: var(--cf-accent-hover); }
html body.lyrc-be .sb-bt-btn--primary:active { background: var(--cf-accent-active); }

/* Empty-stage "Tap to add your video" (2026-10-16): portal-themes.css still
   paints .stage-empty-cta with a gradient on the beat portal; flat blue here. */
html[data-portal] body.lyrc-be .stage-empty-cta {
  background: var(--cf-accent) !important; background-image: none !important;
  box-shadow: none !important; color: #fff !important; border: 0 !important;
}

/* Narrow Android phones (<=370px): the three add buttons are too tight for
   their icons; keep the labels, drop the leading icons (2026-10-16). */
@media (max-width: 370px) {
  body.lyrc-be .add-chip > svg:first-child { display: none; }
  body.lyrc-be .add-chip { gap: 4px; padding-left: 8px; padding-right: 8px; }
}

/* Transition buttons on each cut, CapCut style (2026-10-17): small, centred on
   the cut, always visible. Was a full-height box that covered short clips. */
html body.lyrc-be .tl-strip .tl-tx-gap {
  top: 50% !important; height: 18px !important; width: 18px !important; margin: 0 !important; padding: 0 !important;
  transform: translate(-50%, -50%); border-radius: 5px !important; border: 1px solid rgba(255,255,255,.55) !important;
  background: rgba(10,10,13,.88) !important; color: rgba(255,255,255,.85) !important; gap: 0 !important;
  display: grid; place-items: center; z-index: 4; box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
html body.lyrc-be .tl-strip .tl-tx-gap::after { content: ""; position: absolute; inset: -10px -4px; }
html body.lyrc-be .tl-strip .tl-tx-gap.has-tx { background: var(--tx-c, var(--cf-accent)) !important; border-color: #fff !important; color: #0A0A0D !important; }
html body.lyrc-be .tl-strip .tl-tx-gap.active { outline: 2px solid var(--cf-accent) !important; outline-offset: 1px; }
html body.lyrc-be .tl-strip .tl-tx-gap .tx-dot, html body.lyrc-be .tl-strip .tl-tx-gap .tx-lbl { display: none; }
.cf-txpop {
  position: fixed; left: 8px; right: 8px; z-index: 2000; padding: 10px 0 12px;
  background: #15161C; border: 1px solid #2A2C36; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.55);
  font-family: 'Inter', -apple-system, sans-serif; color: #fff; animation: cfTxPopIn 200ms cubic-bezier(0,0,.2,1);
}
.cf-txpop-h { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; }
.cf-txpop-h b { font-size: 14px; font-weight: 600; }
.cf-txpop-h span { font-size: 12px; color: rgba(255,255,255,.5); flex: 1; }
.cf-txpop-all { border: 1px solid #2A2C36; background: #1C1E26; color: #fff; border-radius: 6px; padding: 6px 10px; font: 600 12px Inter, sans-serif; }
.cf-txpop-x { border: 0; background: transparent; color: rgba(255,255,255,.6); font-size: 22px; line-height: 1; width: 32px; height: 32px; }
.cf-txpop-row { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cf-txpop-row::-webkit-scrollbar { display: none; }
.cf-txpop-opt {
  flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 8px;
  border: 1px solid #2A2C36; background: #1C1E26; color: #fff; font: 500 13px Inter, sans-serif; scroll-snap-align: center;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.cf-txpop-opt.on { border-color: #3B82F6; background: rgba(59,130,246,.16); }
.cf-txpop-dot { width: 10px; height: 10px; border-radius: 50%; }
.cf-txpop-lock { font-size: 9px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 1px 4px; }
@keyframes cfTxPopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cf-txpop { animation: none; } }