/* ═══════════════════════════════════════════════════════════════════════════
   YTCut Studio — premium browser video editor.
   Ported from the approved prototype (studio.html): 3 user-switchable dark
   themes via :root[data-studio-theme], centred preview stage, aspect presets,
   live karaoke captions, draggable text layer, bottom-centre watermark, and the
   "Remove watermark — Go Pro" upgrade hook. Desktop = left rail + right props
   panel; Mobile = full-bleed preview + thumb bottom-dock opening slide-up sheets.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* brand */
  --brand-1: #8b7dff;
  --brand-2: #5ad1ff;
  --grad: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  /* base tokens (overridden per studio-theme) — default = Midnight */
  --bg:        #0a0b12;
  --bg-2:      #0e1018;
  --panel:     rgba(255,255,255,0.045);
  --panel-2:   rgba(255,255,255,0.07);
  --stroke:    rgba(255,255,255,0.09);
  --stroke-2:  rgba(255,255,255,0.16);
  --ink:       #eef0f7;
  --ink-2:     #a7abbd;
  --ink-3:     #6b6f83;
  --accent:    #8b7dff;
  --accent-2:  #5ad1ff;
  --accent-dim:rgba(139,125,255,0.14);
  --good:      #34d399;
  --warn:      #fbbf24;
  --blur:      22px;
  --radius:    18px;
  --dock-blur: 26px;
  --glow:      0 0 0 rgba(0,0,0,0);
  --stage-vignette: radial-gradient(120% 90% at 50% 0%, rgba(139,125,255,0.10), transparent 60%);
  --font: -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --dur: .28s;
}

/* ── Theme: Neon (Bold / CapCut-energy) ── */
:root[data-studio-theme="neon"] {
  --bg:        #0c0a1a;
  --bg-2:      #120c26;
  --panel:     rgba(150,110,255,0.08);
  --panel-2:   rgba(150,110,255,0.14);
  --stroke:    rgba(160,130,255,0.18);
  --stroke-2:  rgba(160,130,255,0.34);
  --ink:       #f4f1ff;
  --ink-2:     #b9aef0;
  --ink-3:     #7d76b8;
  --accent:    #a855f7;
  --accent-2:  #22d3ee;
  --accent-dim:rgba(168,85,247,0.20);
  --radius:    20px;
  --stage-vignette: radial-gradient(120% 100% at 50% 0%, rgba(168,85,247,0.22), transparent 55%), radial-gradient(90% 80% at 90% 110%, rgba(34,211,238,0.16), transparent 60%);
  --spring: cubic-bezier(.34,1.7,.5,1);
  --dur: .34s;
}

/* ── Theme: Studio Pro (dense / technical) ── */
:root[data-studio-theme="pro"] {
  --bg:        #14161c;
  --bg-2:      #191c24;
  --panel:     rgba(255,255,255,0.03);
  --panel-2:   rgba(255,255,255,0.06);
  --stroke:    rgba(255,255,255,0.08);
  --stroke-2:  rgba(255,255,255,0.14);
  --ink:       #e7e9ef;
  --ink-2:     #9aa0b0;
  --ink-3:     #626878;
  --accent:    #6aa0ff;
  --accent-2:  #f5a524;   /* amber playhead */
  --accent-dim:rgba(106,160,255,0.14);
  --radius:    12px;
  --blur:      14px;
  --dock-blur: 16px;
  --stage-vignette: radial-gradient(120% 90% at 50% 0%, rgba(106,160,255,0.06), transparent 55%);
  --dur: .2s;
  --spring: cubic-bezier(.3,.9,.3,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
.app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    var(--stage-vignette),
    radial-gradient(140% 120% at 100% 0%, var(--bg-2), var(--bg) 55%);
  transition: background var(--dur) var(--ease);
}

/* ══ Top bar ══ */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px clamp(12px, 3vw, 22px);
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  z-index: 40;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-glyph {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad);
  display: grid; place-items: center;
  color: #0a0b12; font-size: 15px;
  box-shadow: 0 6px 20px -6px var(--accent);
  flex: none;
}
.brand-name {
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-sub {
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-top: -1px;
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.spacer { flex: 1; }

/* theme switcher */
.themes { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--stroke); }
.theme-dot {
  display: flex; align-items: center; gap: 7px;
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); background: transparent; transition: all var(--dur) var(--ease);
}
.theme-dot .swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.theme-dot[data-t="midnight"] .swatch { background: linear-gradient(135deg,#8b7dff,#4b5bd6); }
.theme-dot[data-t="neon"] .swatch { background: linear-gradient(135deg,#a855f7,#22d3ee); }
.theme-dot[data-t="pro"] .swatch { background: linear-gradient(135deg,#6aa0ff,#f5a524); }
.theme-dot.active { color: var(--ink); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.theme-dot .lbl { display: none; }
@media (min-width: 900px){ .theme-dot .lbl { display: inline; } }

.btn {
  font: inherit; font-weight: 650; font-size: 13.5px; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--stroke-2);
  padding: 9px 15px; color: var(--ink); background: var(--panel);
  display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--dur) var(--ease); text-decoration: none;
}
.btn:hover { background: var(--panel-2); border-color: var(--stroke-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
/* Disabled buttons still match :hover — pin their resting look so they never
   light up or lift under the cursor. */
.btn[disabled]:hover { background: var(--panel); border-color: var(--stroke-2); transform: none; }
.btn-primary {
  border: 0; color: #0a0b12; background: var(--grad);
  box-shadow: 0 8px 22px -8px var(--accent);
}
/* MUST re-assert the gradient: `.btn:hover` has equal specificity and would
   otherwise swap it for the grey panel background (washed-out hover bug). */
.btn-primary:hover {
  background: var(--grad); color: #0a0b12;
  filter: brightness(1.1);
  box-shadow: 0 14px 32px -10px var(--accent);
  transform: translateY(-1px);
}
.btn:focus-visible, .theme-dot:focus-visible, .tool:focus-visible, .seg-btn:focus-visible, .swatch-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ══ Workspace ══ */
.work {
  display: grid;
  grid-template-columns: 76px 1fr 340px;
  min-height: 0;
}
@media (max-width: 1040px){ .work { grid-template-columns: 68px 1fr 300px; } }
@media (max-width: 860px){
  .work { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .rail { display: none; }
  .props { display: none; }
}

/* left tool rail (desktop) */
.rail {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-right: 1px solid var(--stroke);
  overflow-y: auto;
}
.tool {
  width: 100%; max-width: 60px; aspect-ratio: 1/.92;
  border: 1px solid transparent; border-radius: 14px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  transition: all var(--dur) var(--ease);
}
.tool svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool:hover { color: var(--ink); background: var(--panel); }
.tool.active { color: var(--ink); background: var(--accent-dim); border-color: var(--stroke-2); }
.tool.active svg { stroke: var(--accent); }

/* ══ Stage ══ */
.stage {
  position: relative; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  /* NOT justify-content:center. Centring a flex column that also scrolls puts
     the overflow on BOTH sides, and the top half is then unreachable — the
     scroll range starts below it, so the frame appears cut off under the
     topbar with no way to scroll up to it. Auto margins centre the same way
     but collapse to 0 once the content is taller than the box, which keeps the
     whole thing reachable. The 860px override below was someone hitting this
     on mobile and pinning it to flex-start; desktop kept the bug. */
  justify-content: flex-start;
  padding: clamp(14px, 3vh, 30px) 14px;
  gap: 14px;
  overflow-y: auto;   /* the premium timeline is tall — never clip it */
}
.stage > :first-child { margin-top: auto; }
.stage > :last-child { margin-bottom: auto; }
@media (max-width: 860px) {
  .stage { gap: 10px; }
  /* Phones start at the top by design — the timeline below matters more than
     vertical centring when there is no room for either. */
  .stage > :first-child, .stage > :last-child { margin-block: 0; }
}
.canvas-frame {
  position: relative;
  height: min(100%, 56vh);
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px var(--stroke);
  transition: aspect-ratio var(--dur) var(--spring), height var(--dur) var(--ease);
  max-width: 92vw;
  /* WYSIWYG: caption/text/watermark size to the FRAME (cqw = 1% of frame width),
     not the viewport — so the preview matches the 1080-wide render at every
     aspect. (Fixes captions overflowing the narrow 9:16 frame.) */
  container-type: inline-size;
}
.canvas-frame.a-11 { aspect-ratio: 1/1; }
.canvas-frame.a-169 { aspect-ratio: 16/9; height: auto; width: min(92vw, 78vh * 16/9); }
.canvas-frame.a-orig { height: auto; width: min(92vw, 64vh * var(--orig-ar, 0.5625)); }
#previewVideo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.canvas-frame.fit #previewVideo { object-fit: contain; }
.canvas-frame.fill #previewVideo { object-fit: cover; }

/* preview loading / empty overlay inside the frame */
.frame-veil {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(6,7,12,.72); backdrop-filter: blur(4px);
  color: var(--ink-2); font-size: 13px; text-align: center; padding: 22px;
}
.frame-veil.hidden { display: none; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--stroke-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.frame-veil .veil-title { color: var(--ink); font-weight: 700; font-size: 15px; }
.frame-veil .btn { margin-top: 4px; }

/* ══ Theater / expand ══ */
.frame-expand {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(8,10,16,.55); border: 1px solid var(--stroke-2); color: var(--ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.frame-expand svg { width: 17px; height: 17px; }
.frame-expand .ic-collapse { display: none; }
.canvas-frame:hover .frame-expand, .frame-expand:focus-visible { opacity: 1; }
@media (hover: none) { .frame-expand { opacity: .82; } }
.frame-expand:hover { background: rgba(8,10,16,.8); }

/* sound toggle (mirrors the expand button, top-left) */
.frame-mute {
  position: absolute; top: 10px; left: 10px; z-index: 6;
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(8,10,16,.55); border: 1px solid var(--stroke-2); color: var(--ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.frame-mute svg { width: 17px; height: 17px; }
.frame-mute .ic-sound { display: none; }
.frame-mute:not(.muted) .ic-sound { display: block; }
.frame-mute:not(.muted) .ic-muted { display: none; }
.frame-mute.muted { color: var(--ink-2); }
.canvas-frame:hover .frame-mute, .frame-mute:focus-visible { opacity: 1; }
@media (hover: none) { .frame-mute { opacity: .82; } }
.frame-mute:hover { background: rgba(8,10,16,.8); }

/* ══ Rail: Advanced reveal ══ */
.rail-grow { flex: 1 1 auto; }
.tool-export { color: var(--accent); }
.rail-adv {
  width: 100%; max-width: 60px; margin: 2px 0; padding: 7px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px dashed var(--stroke-2); border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--ink-3, #6b7488);
  font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.rail-adv:hover { color: var(--ink-2); border-color: var(--stroke); }
.rail-adv .chev { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.app.show-adv .rail-adv { color: var(--accent-2); border-color: transparent; }
.app.show-adv .rail-adv .chev { transform: rotate(180deg); }
/* advanced tools hidden until revealed */
.rail .tool.adv, .dock .dtool.adv { display: none; }
.app.show-adv .rail .tool.adv { display: flex; }
.app.show-adv .dock .dtool.adv { display: flex; }

/* ══ Slim transport (always visible; full timeline is Advanced) ══ */
.mini-tl {
  display: flex; align-items: center; gap: 12px; width: min(92vw, 720px);
  padding: 8px 12px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--stroke);
}
.mini-play {
  flex: none; width: 38px; height: 38px; border-radius: 11px; cursor: pointer; border: 0;
  display: grid; place-items: center; color: #0a0b12;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  transition: filter var(--dur) var(--ease);
}
.mini-play:hover { filter: brightness(1.08); }
.mini-play svg { width: 18px; height: 18px; fill: currentColor; }
.mini-scrub { position: relative; flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--stroke-2); cursor: pointer; }
.mini-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.mini-head { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); left: 0; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.mini-time { flex: none; font-family: var(--mono, monospace); font-size: 12px; color: var(--ink-2); display: flex; gap: 5px; align-items: baseline; }
.mini-time b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mini-time span { color: var(--ink-3, #6b7488); }
.mini-adv {
  flex: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border: 0; background: transparent;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-3, #6b7488); padding: 6px 8px; border-radius: 8px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mini-adv:hover { color: var(--ink); background: var(--panel-2, rgba(255,255,255,.04)); }
.mini-adv svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.app.show-adv .mini-adv svg { transform: rotate(180deg); }

/* Full timeline only appears in Advanced */
.studio-tl { display: none; }
.app.show-adv .studio-tl { display: block; }
.app.show-adv .mini-tl { display: none; }  /* the full timeline has its own transport */

/* ══ Music picker ══ */
.music-list { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; margin: 2px 0 6px; padding-right: 2px; }
.music-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 10px; border-radius: 11px; border: 1px solid var(--stroke);
  background: var(--panel); transition: border var(--dur) var(--ease), background var(--dur) var(--ease);
}
.music-row:hover { border-color: var(--stroke-2); }
.music-row.sel { border-color: var(--accent-2); background: var(--accent-dim); }
.music-play {
  flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; border: 1px solid var(--stroke-2);
  background: transparent; color: var(--ink-2); transition: all var(--dur) var(--ease);
}
.music-play:hover { color: var(--ink); border-color: var(--accent-2); }
.music-play svg { width: 13px; height: 13px; fill: currentColor; }
.music-play.playing { color: #0a0b12; background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent; }
.music-play.none { border-style: dashed; cursor: default; }
.music-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.music-meta b { font-size: 13px; color: var(--ink); font-weight: 600; }
.music-meta span { font-size: 11px; color: var(--ink-3, #6b7488); }
.music-check { flex: none; color: var(--accent-2); font-weight: 800; width: 14px; text-align: center; }

.app.theater .rail, .app.theater .props { display: none; }
.app.theater .work { grid-template-columns: 1fr; }
.app.theater .studio-tl, .app.theater .aspect-quick { display: none; }
.app.theater .stage { padding: 12px; }
.app.theater .canvas-frame { height: min(100%, 86vh); }
.app.theater .canvas-frame.a-169 { width: min(96vw, 86vh * 16/9); }
.app.theater .canvas-frame.a-orig { width: min(96vw, 86vh * var(--orig-ar, 0.5625)); }
.app.theater .frame-expand .ic-expand { display: none; }
.app.theater .frame-expand .ic-collapse { display: block; }

/* ══ Empty state (no clip loaded) ══ */
.studio-empty { display: none; width: 100%; max-width: 640px; padding: 8px 14px; }
.app.no-clip .canvas-frame,
.app.no-clip .aspect-quick,
.app.no-clip .studio-tl { display: none !important; }
.app.no-clip .studio-empty { display: flex; justify-content: center; }
.se-card {
  width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: clamp(22px,4vh,40px) clamp(18px,4vw,34px);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--stroke); border-radius: 22px;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.8);
}
.se-icon {
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 34px -12px var(--accent);
}
.se-icon svg { width: 30px; height: 30px; }
.se-title { color: var(--ink); font-size: clamp(20px,3.4vw,26px); font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.se-sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; max-width: 44ch; margin: 0; }
.se-urlrow { display: flex; gap: 8px; width: 100%; max-width: 440px; margin-top: 4px; }
.se-urlrow input {
  flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--stroke-2); color: var(--ink);
  font: inherit; font-size: 14px; outline: none; transition: border var(--dur) var(--ease);
}
.se-urlrow input:focus { border-color: var(--accent-2); }
.se-urlrow input::placeholder { color: var(--ink-3, #6b7488); }
.se-urlrow .btn { height: 42px; white-space: nowrap; }
.se-recent { width: 100%; margin-top: 6px; }
.se-recent-h { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3, #6b7488); text-align: left; margin-bottom: 10px; }
.se-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.se-clip {
  text-align: left; cursor: pointer; border: 1px solid var(--stroke); border-radius: 12px; overflow: hidden;
  background: var(--panel); color: var(--ink); font: inherit; padding: 0;
  transition: border var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.se-clip:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.se-clip-thumb { position: relative; aspect-ratio: 16/9; background: #000 center/cover no-repeat; }
.se-clip-dur { position: absolute; right: 6px; bottom: 6px; font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,.7); padding: 2px 6px; border-radius: 6px; }
.se-clip-meta { padding: 8px 10px 10px; }
.se-clip-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.se-clip-sub { font-size: 10.5px; color: var(--ink-3, #6b7488); margin-top: 3px; }
.se-cut { margin-top: 4px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: 10px; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.se-cut:hover { color: var(--ink); background: var(--panel); }
@media (max-width: 860px) { .app.no-clip .studio-empty { display: flex; margin: auto; } }

/* caption band — sized to the frame (matches the ~64px/1080 render ≈ 6cqw),
   wraps and stays inside the frame at every aspect. */
.cap {
  position: absolute; left: 50%; bottom: 18%;
  transform: translateX(-50%) scale(1);
  display: none; gap: .1em .32em; align-items: baseline; flex-wrap: wrap; justify-content: center;
  background: rgba(10,10,16,.68); backdrop-filter: blur(3px);
  padding: .3em .52em; border-radius: .42em;
  font-weight: 800; font-size: 6cqw; line-height: 1.16; letter-spacing: -.01em;
  white-space: normal; max-width: 86%; text-align: center; pointer-events: none;
  animation: capPop .34s var(--spring);
}
.cap.on { display: inline-flex; }
/* Full opacity, because that is what gets BURNED: the renderer only dims with
   `ctx.globalAlpha = (style.dimAhead && !spoken) ? 0.5 : 1`, and dimAhead is
   true for karaoke alone. pop and beast already overrode this to 1, so `clean`
   was the single style left inheriting a .82 that the export never applies —
   its preview looked washed out next to the real thing. karaoke overrides to
   .5 below, matching the renderer exactly. */
.cap .w { color: #fff; opacity: 1; transition: color .2s, opacity .2s; }
.cap .w.hot { opacity: 1; color: var(--cap-accent, #8b7dff); }
@keyframes capPop { from { transform: translateX(-50%) scale(.9); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* Per-style live preview — approximates the burned-in render (which uses the
   display font + luminance-picked ink). clean = the default pill above. */
.cap.cap--pop, .cap.cap--beast, .cap.cap--karaoke { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: .12em 0; }
.cap.cap--pop .w, .cap.cap--beast .w { text-transform: uppercase; }
.cap.cap--pop .w { color: #fff; opacity: 1; text-shadow: 0 2px 6px rgba(0,0,0,.55); }
.cap.cap--pop .w.hot { color: #111; background: var(--cap-accent,#8b7dff); border-radius: .16em; padding: 0 .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; text-shadow: none; }
.cap.cap--beast .w { color: #fff; opacity: 1; -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.cap.cap--beast .w.hot { color: #fff; background: var(--cap-accent,#8b7dff); border-radius: .16em; padding: 0 .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cap.cap--karaoke .w { color: #fff; opacity: .5; -webkit-text-stroke: 1.4px #000; paint-order: stroke fill; }
.cap.cap--karaoke .w.hot { opacity: 1; color: var(--cap-accent,#8b7dff); -webkit-text-stroke: 1.4px #000; }

/* draggable text layer */
.txt-layer {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%,-50%);
  color: #fff; font-weight: 800; font-size: 8cqw; /* JS overrides precisely from sizePx */
  text-shadow: 0 2px 14px rgba(0,0,0,.5); letter-spacing: -.02em;
  cursor: grab; padding: 6px 10px; border-radius: 10px;
  display: none; user-select: none; touch-action: none;
  border: 1.5px dashed transparent; text-align: center; max-width: 84%;
}
.txt-layer.on { display: block; }
.txt-layer.sel { border-color: var(--accent-2); }
.txt-layer:active { cursor: grabbing; }

/* watermark — scaled to the frame to match the render (logo ≈ 12% of width,
   ~5.7% up from the bottom edge). */
.wm {
  position: absolute; left: 50%; bottom: 5.5%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5cqw;
  pointer-events: none; opacity: .92; transition: opacity var(--dur) var(--ease);
}
.wm.off { opacity: 0; }
.wm .wm-mark { width: 11cqw; height: 11cqw; border-radius: 2.2cqw; background: var(--grad); display: grid; place-items: center; color: #0a0b12; font-size: 5.6cqw; }
.wm .wm-url { font-size: 2.8cqw; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); letter-spacing: .02em; }

/* aspect quick-switch under stage */
.aspect-quick { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.seg-btn {
  font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
  border: 1px solid var(--stroke); background: var(--panel); color: var(--ink-2);
  padding: 7px 13px; border-radius: 10px; transition: all var(--dur) var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
}
.seg-btn .ico { width: 13px; border-radius: 2px; border: 1.5px solid currentColor; }
.seg-btn.active { color: var(--ink); background: var(--accent-dim); border-color: var(--stroke-2); }
.seg-btn.active .ico { border-color: var(--accent); }

/* ══ Right properties panel ══ */
.props {
  border-left: 1px solid var(--stroke);
  padding: 18px 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  backdrop-filter: blur(var(--blur));
}
.prop-h { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.card { background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row-lbl { font-size: 13.5px; font-weight: 600; }
.row-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* toggle switch */
.sw { position: relative; width: 44px; height: 26px; flex: none; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw .track { position: absolute; inset: 0; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--stroke-2); transition: all var(--dur) var(--ease); }
.sw .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-2); transition: all var(--dur) var(--spring); }
.sw input:checked + .track { background: var(--grad); border-color: transparent; }
.sw input:checked + .track + .knob { left: 23px; background: #fff; }
.sw input:disabled { cursor: not-allowed; }

/* swatches */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch-btn { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform var(--dur) var(--spring); }
.swatch-btn:hover { transform: scale(1.12); }
.swatch-btn.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent-2); }

/* pro lock chip */
.pro-chip { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border-radius: 6px; background: var(--accent-dim); color: var(--accent); border: 1px solid var(--stroke-2); display: inline-flex; align-items: center; gap: 4px; }

.hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.kbd { font: 11px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--stroke); color: var(--ink-2); }

/* segmented control (aspect in panel) */
.seg { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }

/* text input */
.field { width: 100%; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 10px; padding: 9px 11px; transition: border var(--dur); }
.field:focus { outline: none; border-color: var(--accent); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: var(--panel-2); outline: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 2px 8px -2px var(--accent); }
.slider::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }

/* ══ Mobile bottom dock + sheets ══ */
.dock {
  display: none;
  position: relative; z-index: 30;
  border-top: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(var(--dock-blur));
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}
.dock-tools { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.dtool {
  border: 0; background: transparent; cursor: pointer; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px; border-radius: 12px; font: inherit; font-size: 10px; font-weight: 600;
  transition: all var(--dur) var(--ease); position: relative;
}
.dtool svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dtool.active { color: var(--accent); background: var(--accent-dim); }
@media (max-width: 860px){ .dock { display: block; } }

/* slide-up sheet (mobile) */
.sheet-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease); z-index: 45; }
.sheet-scrim.open { opacity: 1; visibility: visible; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
  background: var(--bg-2); border-top-left-radius: 24px; border-top-right-radius: 24px;
  border-top: 1px solid var(--stroke-2);
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(101%); transition: transform var(--dur) var(--spring);
  max-height: 74vh; overflow-y: auto;
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,.7);
}
.sheet.open { transform: translateY(0); }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--stroke-2); margin: 8px auto 14px; }
.sheet-h { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
@media (min-width: 861px){ .sheet, .sheet-scrim { display: none; } }

/* ══ Premium editing timeline (replaces the old dummy strip) ══
   All in-flow parts are scoped under .studio-tl so generic class names
   (.track, .handle, .sel …) can't collide with .sw .track etc. The context
   menu + cue editor are position:fixed and live at body level. */
.studio-tl { width: min(96vw, 760px); display: flex; flex-direction: column; gap: 12px; }
.studio-tl .stl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.studio-tl .stl-transport { display: flex; align-items: center; gap: 8px; }
.studio-tl .stl-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--stroke); background: var(--panel); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: all var(--dur) var(--ease); }
.studio-tl .stl-btn:hover { background: var(--panel-2); border-color: var(--stroke-2); }
.studio-tl .stl-btn.stl-play { width: 48px; height: 48px; border: 0; background: var(--grad); color: #0a0b12; box-shadow: 0 8px 22px -8px var(--accent); }
.studio-tl .stl-btn svg { width: 18px; height: 18px; fill: currentColor; }
.studio-tl .stl-btn.stl-play svg { width: 21px; height: 21px; }
.studio-tl .stl-readout { display: flex; align-items: center; gap: 10px; padding: 7px 13px; border-radius: 12px; background: var(--panel); border: 1px solid var(--stroke); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.studio-tl .stl-tc { font-size: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.studio-tl .stl-tc .ms { color: var(--accent-2); }
.studio-tl .stl-sep { width: 1px; height: 20px; background: var(--stroke-2); }
.studio-tl .stl-frame { font-size: 12px; color: var(--ink-3); }
.studio-tl .stl-frame b { color: var(--ink-2); font-weight: 600; }
.studio-tl .stl-fps { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--good); background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3); padding: 3px 7px; border-radius: 6px; font-family: var(--font); white-space: nowrap; }
.studio-tl .stl-addcue { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 11px; border: 1px dashed var(--stroke-2); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; transition: all var(--dur) var(--ease); }
.studio-tl .stl-addcue:hover { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
.studio-tl .stl-addcue .plus { width: 20px; height: 20px; border-radius: 6px; background: var(--grad); color: #0a0b12; display: grid; place-items: center; font-size: 15px; font-weight: 800; line-height: 1; }
.studio-tl .stl-zoom { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
.studio-tl .stl-zoom input { width: 100px; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: var(--panel-2); outline: none; }
.studio-tl .stl-zoom input::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.studio-tl .stl-zoom input::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }
.studio-tl .stl-selinfo { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.studio-tl .stl-selinfo b { color: var(--accent-2); font-weight: 600; }

.studio-tl .stl-tl { position: relative; background: var(--panel); border: 1px solid var(--stroke); border-radius: 14px; overflow: hidden; }
.studio-tl .stl-ruler { position: relative; height: 24px; border-bottom: 1px solid var(--stroke); cursor: text; }
.studio-tl .stl-ruler canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio-tl .stl-track { position: relative; height: 100px; cursor: crosshair; touch-action: none; outline: none; }
.studio-tl .stl-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio-tl .stl-dim { position: absolute; top: 0; bottom: 0; background: rgba(6,7,12,.62); pointer-events: none; z-index: 2; }
.studio-tl .stl-sel { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--brand-1); border-right: 2px solid var(--brand-2); background: linear-gradient(90deg, rgba(139,125,255,.10), rgba(90,209,255,.10)); z-index: 2; pointer-events: none; }
.studio-tl .stl-handle { position: absolute; top: 0; bottom: 0; width: 16px; z-index: 6; cursor: ew-resize; display: flex; align-items: center; justify-content: center; touch-action: none; }
.studio-tl .stl-handle::before { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--grip); box-shadow: 0 0 10px var(--grip); }
.studio-tl .stl-grip { width: 9px; height: 34px; border-radius: 5px; background: var(--grip); display: flex; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 12px -3px #000; z-index: 1; }
.studio-tl .stl-grip i { width: 1.5px; height: 12px; background: rgba(10,11,18,.6); border-radius: 2px; }
.studio-tl .stl-handle.in { --grip: var(--brand-1); }
.studio-tl .stl-handle.out { --grip: var(--brand-2); }
.studio-tl .stl-tag { position: absolute; top: -22px; font: 10px/1 var(--mono); font-weight: 600; color: var(--ink); background: var(--bg-2); border: 1px solid var(--stroke-2); padding: 3px 6px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.studio-tl .stl-handle:hover .stl-tag, .studio-tl .stl-handle.drag .stl-tag { opacity: 1; }
.studio-tl .stl-playhead { position: absolute; top: -24px; bottom: 0; width: 2px; background: linear-gradient(var(--warn), rgba(251,191,36,.5)); z-index: 8; pointer-events: none; box-shadow: 0 0 8px var(--warn); }
.studio-tl .stl-playhead::before { content: ""; position: absolute; top: -4px; left: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 10px var(--warn); border: 2px solid var(--bg); }
.studio-tl .stl-playgrab { position: absolute; top: -24px; bottom: 0; width: 16px; transform: translateX(-8px); z-index: 9; cursor: ew-resize; touch-action: none; }
.studio-tl .stl-mk { position: absolute; top: -24px; z-index: 7; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; cursor: grab; touch-action: none; }
.studio-tl .stl-mk .flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 5px; background: var(--bg-2); border: 1px solid var(--mkc, var(--brand-1)); color: var(--mkc, var(--brand-1)); white-space: nowrap; box-shadow: 0 3px 10px -3px #000; max-width: 130px; }
.studio-tl .stl-mk .flag .lbl { overflow: hidden; text-overflow: ellipsis; max-width: 84px; color: var(--ink-2); font-weight: 600; }
.studio-tl .stl-mk .flag .del { cursor: pointer; opacity: .65; font-weight: 800; padding: 0 1px; }
.studio-tl .stl-mk .flag .del:hover { opacity: 1; color: #fb7185; }
.studio-tl .stl-mk .stem { width: 1.5px; flex: 1; background: var(--mkc, var(--brand-1)); opacity: .55; height: 108px; }
.studio-tl .stl-mk[data-type=text] { --mkc: #22d3ee; }
.studio-tl .stl-mk[data-type=zoom] { --mkc: #fbbf24; }
.studio-tl .stl-mk[data-type=caption] { --mkc: #34d399; }
.studio-tl.pulse { border-radius: 14px; animation: tlPulse .9s var(--ease); }
@keyframes tlPulse { 0% { box-shadow: 0 0 0 0 var(--accent-dim); } 45% { box-shadow: 0 0 0 6px var(--accent-dim); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }

/* trim tool panel value chips */
.stl-val { font: 12px var(--mono); color: var(--accent-2); font-weight: 600; }

/* cue context menu (fixed — opens upward) */
.stl-ctx { position: fixed; z-index: 80; min-width: 220px; background: var(--bg-2); border: 1px solid var(--stroke-2); border-radius: 14px; padding: 6px; box-shadow: 0 -24px 60px -18px #000; opacity: 0; visibility: hidden; transform: scale(.96) translateY(6px); transform-origin: bottom left; transition: all .14s var(--spring); }
.stl-ctx.open { opacity: 1; visibility: visible; transform: none; }
.stl-ctx-head { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 6px; }
.stl-ctx-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; font-weight: 550; transition: background .12s; }
.stl-ctx-item:hover { background: var(--panel-2); }
.stl-ctx-item .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; flex: none; }
.stl-ctx-item .ic.text { background: rgba(34,211,238,.14); color: #22d3ee; }
.stl-ctx-item .ic.zoom { background: rgba(251,191,36,.14); color: #fbbf24; }
.stl-ctx-item .ic.caption { background: rgba(52,211,153,.14); color: #34d399; }
.stl-ctx-item .ic.split { background: rgba(248,113,113,.14); color: #fb7185; }
.stl-ctx-item .k { margin-left: auto; font: 10px var(--mono); color: var(--ink-3); }
.stl-ctx-item small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; margin-top: 1px; }

/* inline text-cue editor */
.stl-cue-input { position: fixed; z-index: 85; width: 200px; font: inherit; font-size: 13px; color: var(--ink); background: var(--bg-2); border: 1px solid var(--accent); border-radius: 9px; padding: 8px 10px; box-shadow: 0 12px 34px -12px #000; display: none; }
.stl-cue-input.show { display: block; }

@media (max-width: 860px) {
  .studio-tl { width: 96vw; gap: 9px; }
  .studio-tl .stl-track { height: 74px; }
  .studio-tl .stl-mk .stem { height: 82px; }
  .studio-tl .stl-readout { padding: 6px 10px; gap: 8px; }
  .studio-tl .stl-tc { font-size: 14px; }
  .studio-tl .stl-zoom input { width: 78px; }
  .studio-tl .stl-selinfo { gap: 10px; font-size: 10.5px; }
}

/* export summary line */
.exp-line { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--stroke); }
.exp-line:last-child { border-bottom: 0; }
.exp-line .v { color: var(--ink); font-weight: 650; }
.exp-line .v.muted { color: var(--ink-3); }

/* export progress */
.exp-progress { display: none; flex-direction: column; gap: 8px; }
.exp-progress.on { display: flex; }
.progress-track { height: 8px; border-radius: 6px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--stroke); }
.progress-fill { height: 100%; width: 0%; background: var(--grad); border-radius: 6px; transition: width .4s var(--ease); }
.progress-label { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: var(--bg-2); border: 1px solid var(--stroke-2); color: var(--ink); padding: 11px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; box-shadow: 0 16px 40px -12px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: all var(--dur) var(--spring); z-index: 60; display: flex; align-items: center; gap: 9px; max-width: min(92vw, 420px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 861px){ .toast { bottom: 28px; } }

@media (prefers-reduced-motion: reduce){ * { animation: none !important; transition-duration: .01ms !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Make-a-Short wizard (Easy mode) — pre-screen, step chrome, phone-frame
   preview and the mobile step panel. Manual (Studio) mode is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* [hidden] must always win over the display classes below. */
.wiz-choice[hidden], .safe-overlay[hidden], .frame-safe[hidden] { display: none !important; }

/* ── Top-bar mode switcher ── */
.mode-switch {
  display: inline-flex; gap: 3px; padding: 3px; margin-right: 10px;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: 12px;
}
.ms-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-weight: 650; font-size: 12.5px; cursor: pointer;
  padding: 6px 12px; border: none; border-radius: 9px;
  background: transparent; color: var(--ink-2);
  transition: all var(--dur) var(--ease);
  min-height: 30px;
}
.ms-btn:hover { color: var(--ink); }
.ms-btn.active { background: var(--accent-dim); color: var(--ink); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.ms-btn.active svg { color: var(--accent); }
@media (max-width: 520px) { .ms-btn { padding: 6px 9px; } .ms-btn svg { display: none; } }

/* ── Pre-screen: Easy vs Studio ── */
.wiz-choice {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  padding: 20px calc(16px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow-y: auto;
}
.wiz-choice-inner { width: min(680px, 100%); text-align: center; margin: auto; }
.wiz-choice-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 8px;
}
.wiz-choice-title { font-size: clamp(21px, 4.5vw, 30px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 22px; }
.wiz-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
@media (max-width: 620px) { .wiz-cards { grid-template-columns: 1fr; } }
.wiz-card {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  padding: 20px 18px 16px; border-radius: 20px; cursor: pointer;
  font: inherit; color: var(--ink); text-align: left;
  background: var(--panel); border: 1px solid var(--stroke-2);
  transition: transform var(--dur) var(--spring), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  min-height: 44px;
}
.wiz-card:hover, .wiz-card:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 50px -18px rgba(139,125,255,.45); background: var(--panel-2); }
.wiz-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wiz-card.is-easy { border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke-2)); background: linear-gradient(160deg, var(--accent-dim), transparent 55%), var(--panel); }
.wiz-card-badge {
  position: absolute; top: -10px; right: 14px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--grad); color: #0a0b12;
  box-shadow: 0 6px 18px -6px rgba(139,125,255,.6);
}
.wiz-card-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--panel-2); border: 1px solid var(--stroke); color: var(--accent);
}
.wiz-card.is-studio .wiz-card-ic { color: var(--accent-2); }
.wiz-card > b { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.wiz-card-desc { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.wiz-card-cta { margin-top: auto; font-size: 12.5px; font-weight: 750; color: var(--accent); }
.wiz-card.is-studio .wiz-card-cta { color: var(--accent-2); }
.wiz-remember {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.wiz-remember input { accent-color: var(--accent); width: 15px; height: 15px; }
.wiz-choice-note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* ── Wizard layout state ── */
body.wiz-on .rail,
body.wiz-on .dock,
body.wiz-on .aspect-quick,
body.wiz-on .studio-tl,
body.wiz-on .mini-adv,
body.wiz-on #exportBtn { display: none !important; }
body.wiz-on .work { grid-template-columns: 1fr 360px; }
@media (max-width: 1040px) { body.wiz-on .work { grid-template-columns: 1fr 320px; } }

/* Step chrome inside the props panel */
.wiz-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 2px; }
.wiz-moment {
  font-size: 10.5px; font-weight: 750; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px;
  color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent);
}
.wiz-dots { display: flex; gap: 6px; margin-left: auto; }
.wiz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--stroke-2); transition: all var(--dur) var(--ease); }
.wiz-dot.done { background: var(--accent); border-color: transparent; opacity: .55; }
.wiz-dot.cur { background: var(--grad); border-color: transparent; box-shadow: 0 0 10px rgba(139,125,255,.65); transform: scale(1.25); }
.wiz-head-lbl { flex-basis: 100%; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* Back / Next — sticky at the panel's bottom so it lives in the thumb zone */
.wiz-nav {
  position: sticky; bottom: -18px; margin: 4px -16px -18px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--stroke);
}
.wiz-back { flex: none; }
.wiz-nextbtn { flex: 1; justify-content: center; min-height: 46px; font-size: 14px; }

/* ── Phone-frame preview (9:16 only) + safe zones ── */
body.wiz-on .canvas-frame:not(.a-11):not(.a-169):not(.a-orig) {
  border-radius: 34px;
  box-shadow:
    0 0 0 7px #14151d,
    0 0 0 8.5px var(--stroke-2),
    0 34px 90px -28px rgba(0,0,0,.85);
}
body.wiz-on .canvas-frame:not(.a-11):not(.a-169):not(.a-orig)::after {
  /* device notch — pure chrome, sits above the video, below the controls */
  content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 15px; border-radius: 999px; background: #14151d;
  z-index: 5; pointer-events: none;
}
.frame-safe {
  position: absolute; top: 52px; right: 10px; z-index: 6;
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(8,10,16,.55); border: 1px solid var(--stroke-2); color: var(--ink);
  opacity: 0; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.canvas-frame:hover .frame-safe, .frame-safe.on { opacity: 1; }
@media (hover: none) { .frame-safe { opacity: .82; } }
.frame-safe.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.safe-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.so-band {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: repeating-linear-gradient(-45deg, rgba(255,80,120,.14) 0 8px, rgba(255,80,120,.05) 8px 16px);
}
.so-top { top: 0; left: 0; right: 0; height: 11%; border-bottom: 1px dashed rgba(255,80,120,.55); }
.so-bottom { bottom: 0; left: 0; right: 0; height: 17%; border-top: 1px dashed rgba(255,80,120,.55); }
.so-right { top: 30%; bottom: 22%; right: 0; width: 13%; border-left: 1px dashed rgba(255,80,120,.45); }

/* Success actions inside the veil */
.wiz-success-acts { display: flex; flex-direction: column; gap: 9px; width: min(280px, 78vw); margin: 0 auto; }
.wiz-success-acts .btn { justify-content: center; min-height: 44px; }

/* ── Mobile wizard: preview on top, step panel docked to the bottom ── */
@media (max-width: 860px) {
  body.wiz-on .stage { padding-bottom: 47vh; justify-content: flex-start; }
  body.wiz-on .canvas-frame { height: min(100%, 38vh); }
  body.wiz-on .props {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    max-height: 45vh; overflow-y: auto;
    border-left: none; border-top: 1px solid var(--stroke-2);
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    background: color-mix(in srgb, var(--bg-2) 94%, transparent);
    box-shadow: 0 -18px 50px -20px rgba(0,0,0,.8);
    padding: 14px 16px 0;
  }
  body.wiz-on .wiz-nav { bottom: 0; margin: 4px -16px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wiz-card, .wiz-card:hover { transform: none; }
  .wiz-dot.cur { transform: none; }
}

/* ── Wizard Step 1: Moment picker (source player + window) ── */
.moment-stage[hidden] { display: none !important; }
.moment-stage {
  display: flex; flex-direction: column; gap: 12px;
  width: min(92vw, 680px);
}
body.moment-on .canvas-frame,
body.moment-on .mini-tl { display: none !important; }
.ms-player-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background: #000;
  box-shadow: 0 24px 70px -28px rgba(0,0,0,.8), 0 0 0 1px var(--stroke);
}
.ms-player-wrap iframe, .ms-player-wrap > div { position: absolute; inset: 0; width: 100%; height: 100%; }
.ms-tl { display: flex; flex-direction: column; gap: 6px; }
.ms-track {
  position: relative; height: 52px; border-radius: 12px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--stroke-2);
  cursor: pointer; touch-action: none; overflow: hidden;
}
.ms-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--accent-2); opacity: .9; pointer-events: none; z-index: 2;
  box-shadow: 0 0 8px var(--accent-2);
}
.ms-win {
  position: absolute; top: -1px; bottom: -1px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(139,125,255,.38), rgba(90,209,255,.22));
  border: 2px solid var(--accent);
  border-radius: 10px; cursor: grab;
  box-shadow: 0 0 22px rgba(139,125,255,.4), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: left .1s var(--ease), width .1s var(--ease);
}
.ms-win.dragging { cursor: grabbing; transition: none; }
.ms-grip {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 14px; height: 30px; border-radius: 7px;
  background: var(--accent); cursor: ew-resize; touch-action: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.ms-grip::after {
  content: ''; position: absolute; inset: 8px 5px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 1.5px, transparent 1.5px 4px);
  border-radius: 1px;
}
.ms-grip.l { left: -7px; }
.ms-grip.r { right: -7px; }
.ms-len {
  font-size: 12px; font-weight: 800; color: #fff; pointer-events: none;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.ms-len.at-cap { color: var(--warn); }
.ms-times {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.ms-hint { font-size: 11px; color: var(--ink-3); }
.ms-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ms-chip { justify-content: center; padding: 10px 6px; font-weight: 750; }
.ms-chip.locked { opacity: .6; }
.ms-crown { color: var(--warn); font-size: 10px; }
@media (max-width: 860px) {
  .moment-stage { width: 100%; }
  body.moment-on .stage { padding-bottom: 47vh; }
  .ms-track { height: 58px; }
  .ms-grip { width: 18px; height: 36px; }
}

/* ── Live cue FX preview (mirrors the ffmpeg burn-in) ── */
.canvas-frame #previewVideo {
  transform-origin: center center;
  will-change: transform, filter;
}
.fx-flash {
  position: absolute; inset: 0; z-index: 3;
  background: #fff; opacity: 0; pointer-events: none;
  mix-blend-mode: screen;
}
/* Caption beat scales the whole caption line (JS sets --cap-beat). */
.cap { transform: translateX(-50%) scale(var(--cap-beat, 1)); }
@media (prefers-reduced-motion: reduce) {
  .canvas-frame #previewVideo { transition: none; }
}

/* Cue context-menu icons for the new effect types */
.stl-ctx-item .ic.shake { background: rgba(251,191,36,.16); color: #fbbf24; }
.stl-ctx-item .ic.flash { background: rgba(255,255,255,.16); color: #fff; }
.stl-ctx-item .ic.blur  { background: rgba(90,209,255,.16); color: #5ad1ff; }
.stl-ctx-item .ic.glitch{ background: rgba(255,0,90,.16); color: #ff3b6b; }

/* Effects panel — cue library with try-it previews */
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fx-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 12px; border-radius: 13px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--stroke);
  transition: all var(--dur) var(--ease);
  min-height: 44px;
}
.fx-card:hover { border-color: var(--accent); background: var(--panel-2); transform: translateY(-1px); }
.fx-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fx-card b { font-size: 12.5px; font-weight: 750; display: flex; align-items: center; gap: 6px; }
.fx-card .fx-key {
  margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 5px;
  background: var(--panel-2); border: 1px solid var(--stroke); color: var(--ink-3);
}
.fx-card span { font-size: 10.5px; color: var(--ink-3); line-height: 1.4; }
.fx-cuelist { display: flex; flex-direction: column; gap: 6px; }
.fx-cuerow {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: 10px; background: var(--panel); border: 1px solid var(--stroke);
  font-size: 12px;
}
.fx-cuerow b { font-weight: 700; }
.fx-cuerow .fx-t { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 11px; }
.fx-cuerow button {
  font: inherit; font-size: 11px; cursor: pointer; padding: 3px 8px; border-radius: 7px;
  background: transparent; border: 1px solid var(--stroke-2); color: var(--ink-2);
  min-height: 26px;
}
.fx-cuerow button:hover { color: var(--ink); border-color: var(--accent); }
.fx-cuerow button.fx-del:hover { color: #ff6b8a; border-color: #ff6b8a; }

/* ── Moment picker v2: readout + nudges + ticks + min-width window ── */
.ms-readout {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.ms-range {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
  padding: 7px 12px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--stroke);
}
.ms-range-in, .ms-range-out { font-size: 15px; font-weight: 800; color: var(--ink); }
.ms-range-arrow { color: var(--ink-3); font-size: 13px; }
.ms-range-len {
  font-size: 11px; font-weight: 700; color: var(--accent);
  padding: 2px 7px; border-radius: 999px;
  background: var(--accent-dim); margin-left: 2px;
}
.ms-nudge { display: inline-flex; gap: 5px; }
.ms-nudge button {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  min-width: 46px; min-height: 38px; padding: 0 10px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--stroke); color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.ms-nudge button:hover { color: var(--ink); border-color: var(--accent); background: var(--panel-2); }
.ms-nudge button:active { transform: scale(.96); }

/* Tick marks + minute labels */
.ms-ticks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ms-ticks i { position: absolute; top: 0; bottom: 40%; width: 1px; background: var(--stroke-2); }
.ms-ticks b {
  position: absolute; bottom: 2px; transform: translateX(-50%);
  font-size: 9px; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* When the true window is thinner than the drawn minimum, mark it so the user
   knows the block is a handle, not a literal duration. */
.ms-win.is-min { box-shadow: 0 0 22px rgba(139,125,255,.55), inset 0 0 0 1px rgba(255,255,255,.18); }
.ms-win.is-min .ms-len { font-size: 10px; }

@media (max-width: 860px) {
  .ms-readout { justify-content: center; }
  .ms-nudge { width: 100%; justify-content: space-between; }
  .ms-nudge button { flex: 1; min-height: 44px; }
  .ms-range { width: 100%; justify-content: center; }
  .ms-ticks b { font-size: 8px; }
}

/* ══ FX TIMELINE ══════════════════════════════════════════════════════════
   Fixed-centre playhead, scrolling lanes, DOM blocks over a canvas ruler. */
.fxtl[hidden] { display: none !important; }
.fxtl {
  width: min(96vw, 900px); display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 8px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--stroke);
  backdrop-filter: blur(var(--blur));
}
.fxtl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fxtl-btn {
  display: inline-grid; place-items: center; cursor: pointer;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--stroke-2); color: var(--ink);
  transition: all var(--dur) var(--ease);
}
.fxtl-btn:hover { border-color: var(--accent); color: var(--accent); }
.fxtl-btn.sm { width: 28px; height: 28px; font-size: 15px; line-height: 1; }
.fxtl-time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-3); display: flex; gap: 5px; }
.fxtl-time b { color: var(--ink); font-weight: 800; }
.fxtl-sel {
  display: flex; align-items: center; gap: 6px; margin-left: auto;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--accent-dim); border: 1px solid var(--stroke-2);
}
.fxtl-sel[hidden] { display: none !important; }
.fxtl-sel-name { font-size: 11.5px; font-weight: 750; color: var(--ink); }
.fxtl-sel-dur { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 38px; text-align: center; }
.fxtl-sel-btn {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 14px; line-height: 1;
  background: transparent; border: 1px solid var(--stroke-2); color: var(--ink-2);
}
.fxtl-sel-btn:hover { color: var(--ink); border-color: var(--accent); }
.fxtl-sel-btn.fxtl-del:hover { color: #ff6b8a; border-color: #ff6b8a; }
.fxtl-zoom { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.fxtl-view {
  position: relative; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  border-radius: 12px; background: rgba(0,0,0,.25);
  padding-bottom: 2px;
}
.fxtl-scroll { position: relative; }
.fxtl-ruler { display: block; height: 22px; }
.fxtl-lane {
  position: relative; height: 40px; margin-top: 4px;
  border-radius: 9px; background: rgba(255,255,255,.03);
  border: 1px solid var(--stroke);
}
.fxtl-lane-tag {
  position: sticky; left: 6px; z-index: 3; float: left;
  margin: 5px 0 0 6px; padding: 2px 7px; border-radius: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); background: color-mix(in srgb, var(--bg) 78%, transparent);
  pointer-events: none;
}
.fxtl-blocks { position: absolute; inset: 0; }

/* Effect block */
.fxb {
  position: absolute; top: 5px; bottom: 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: grab; touch-action: none; user-select: none;
  background: color-mix(in srgb, var(--fxc) 26%, transparent);
  border: 1.5px solid var(--fxc);
  box-shadow: 0 2px 10px -4px var(--fxc);
  transition: box-shadow var(--dur) var(--ease), transform .08s var(--ease);
  overflow: hidden;
}
.fxb:hover { box-shadow: 0 4px 16px -4px var(--fxc); }
.fxb.sel { box-shadow: 0 0 0 2px var(--fxc), 0 6px 20px -6px var(--fxc); z-index: 2; }
.fxb.drag { cursor: grabbing; transform: scale(1.02); z-index: 3; }
.fxb:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.fxb-t {
  font-size: 10px; font-weight: 750; color: #fff; white-space: nowrap;
  padding: 0 10px; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  overflow: hidden; text-overflow: ellipsis;
}
/* Slim visually, oversized hit zone — a finger is not a mouse. */
.fxb-h {
  position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize;
  touch-action: none; background: rgba(255,255,255,.55);
}
.fxb-h::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: -7px; right: -7px; }
.fxb-h.l { left: 0; border-radius: 7px 0 0 7px; }
.fxb-h.r { right: 0; border-radius: 0 7px 7px 0; }

/* Stationary centre playhead */
/* left:0 — the head is positioned purely by translateX(time * pxPerSec) from
   the content's left edge. It was left:50% under the old fixed-centre model,
   so after the switch to a moving playhead every position was offset by half
   the viewport: the marker sat ~25s ahead of the real time, which read as
   "the playhead doesn't follow the mouse" AND "cues get added at the start". */
.fxtl-head {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 4;
  pointer-events: none;
}
.fxtl-head i {
  position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2);
}
.fxtl-head::before {
  content: ''; position: absolute; top: -1px; left: -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 7px solid var(--accent-2);
}
.fxtl-hint { margin: 0; font-size: 10.5px; color: var(--ink-3); text-align: center; }
.fxtl-hint kbd {
  font: inherit; font-size: 9.5px; padding: 1px 4px; border-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--stroke-2);
}

@media (max-width: 860px) {
  .fxtl { width: 100%; border-radius: 14px; padding: 8px 8px 6px; }
  .fxtl-lane { height: 46px; }
  .fxb-h { width: 12px; }
  .fxtl-sel { margin-left: 0; width: 100%; justify-content: space-between; }
  .fxtl-hint { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .fxb, .fxb.drag { transition: none; transform: none; } }

/* The FX timeline replaces the older transport + cue strip: three stacked
   timelines was noise, not power. When it is open, it is the only one. */
body.fxtl-on .mini-tl,
body.fxtl-on .studio-tl { display: none !important; }

/* Centred flex content taller than its scroll container gets its TOP clipped
   and unreachable (the empty-state card lost its icon + heading). `safe`
   centring falls back to flex-start instead of overflowing both ways. */
@supports (justify-content: safe center) {
  .stage { justify-content: safe center; }
}

/* Undo / redo */
.hist-group {
  display: inline-flex; gap: 2px; margin-right: 8px; padding: 2px;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: 11px;
}
.hist-btn {
  display: grid; place-items: center; cursor: pointer;
  width: 32px; height: 30px; border-radius: 9px;
  background: transparent; border: none; color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.hist-btn:hover:not(:disabled) { color: var(--ink); background: var(--panel-2); }
.hist-btn:active:not(:disabled) { transform: scale(.94); }
.hist-btn:disabled { opacity: .32; cursor: default; }
@media (max-width: 520px) { .hist-group { margin-right: 4px; } .hist-btn { width: 30px; } }

/* Watermark preview must match the RENDER, which draws a constant 132px mark
   regardless of frame width. As a share of output width that is ~12.2% on a
   1080-wide 9:16/1:1 frame but only ~6.9% on a 1920-wide 16:9 frame — the
   preview used one value for all and looked oversized on 16:9. */
.wm { --wmw: 12.2cqw; }
.canvas-frame.a-169 .wm, .canvas-frame.a-orig .wm { --wmw: 6.9cqw; }
.wm .wm-mark {
  width: var(--wmw); height: var(--wmw);
  border-radius: calc(var(--wmw) * .2);
  font-size: calc(var(--wmw) * .51);
}
.wm .wm-url { font-size: calc(var(--wmw) * .255); }

/* Block context menu (right-click / long-press) */
.fxb-menu {
  position: fixed; z-index: 70; width: 190px; padding: 6px;
  border-radius: 13px; background: var(--bg-2);
  border: 1px solid var(--stroke-2);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.85);
  display: flex; flex-direction: column; gap: 2px;
  animation: fxbMenuIn .13s var(--ease);
}
@keyframes fxbMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fxb-menu-h {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 6px 9px 5px;
}
.fxb-menu button {
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  padding: 9px 10px; min-height: 38px; border-radius: 9px;
  background: transparent; border: none; color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fxb-menu button:hover { background: var(--panel-2); }
.fxb-menu button.danger { color: #ff6b8a; }
.fxb-menu button.danger:hover { background: rgba(255,107,138,.12); }
@media (max-width: 860px) { .fxb-menu { width: 210px; } .fxb-menu button { min-height: 44px; font-size: 13.5px; } }

/* Two timelines were never visible at once — but the old rule hid the trim
   strip ALWAYS, which quietly removed drag-to-trim from manual mode while it
   kept downloading and decoding the whole clip for a surface nobody could see.
   Now they are mutually exclusive and each owns one job:
     · FX timeline  — effects, playhead, scrubbing (the default surface)
     · Trim strip   — frame-accurate in/out over a real waveform (Trim tool)
   The mini transport stays retired: the FX timeline replaced it outright. */
/* The mini transport is fully retired: the FX timeline owns scrubbing in the
   editor and the focus bar owns it in fullscreen. It was still rendering on
   the empty state (no clip, so no `has-clip`), leaving a dead 0:00/0:00
   player stuck to the bottom of the "Open a clip" screen. */
.mini-tl { display: none !important; }
body.has-clip .studio-tl { display: none; }
/* flex, NOT block: .studio-tl is a flex column (bar / readout / track) and
   forcing block collapsed its internal layout. !important so it beats the
   older `.app.show-adv .studio-tl` / `.studio-tl` display rules regardless of
   whether the advanced surface happens to be open. */
body.has-clip.trim-on .studio-tl { display: flex !important; }
body.has-clip.trim-on .fxtl { display: none !important; }

/* ── Client debug console (public/debug.js) ── */
.ycdbg {
  position: fixed; right: 10px; bottom: 10px; z-index: 90;
  width: min(560px, calc(100vw - 20px)); max-height: min(50vh, 420px);
  display: none; flex-direction: column;
  background: rgba(8,10,16,.97); border: 1px solid var(--stroke-2);
  border-radius: 14px; box-shadow: 0 24px 70px -20px rgba(0,0,0,.9);
  backdrop-filter: blur(10px);
  font-family: var(--mono, ui-monospace, monospace);
}
.ycdbg.open { display: flex; }
.ycdbg-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--stroke); font-size: 11.5px; color: var(--ink);
}
.ycdbg-bar b { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: 10px; }
.ycdbg-sp { flex: 1; }
.ycdbg-badge { font-size: 10px; color: var(--ink-3); }
.ycdbg-badge.bad { color: #ff6b8a; font-weight: 700; }
.ycdbg-bar button {
  font: inherit; font-size: 11px; cursor: pointer; padding: 4px 9px; min-height: 28px;
  border-radius: 7px; background: var(--panel); border: 1px solid var(--stroke-2); color: var(--ink-2);
}
.ycdbg-bar button:hover { color: var(--ink); border-color: var(--accent); }
.ycdbg-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ycdbg-row {
  display: flex; gap: 8px; padding: 4px 6px; border-radius: 6px;
  font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  color: var(--ink-2);
}
.ycdbg-row i { color: var(--ink-3); font-style: normal; flex: none; }
.ycdbg-row.k-error { color: #ff8fa6; background: rgba(255,107,138,.08); }
.ycdbg-row.k-warn { color: var(--warn); }
.ycdbg-row.k-net { color: var(--accent-2); }
@media (max-width: 860px) { .ycdbg { left: 10px; right: 10px; width: auto; max-height: 44vh; } }

/* ── Caption fonts (same files the server burns in, so preview == export) ── */
@font-face { font-family: "YTCut Luckiest"; src: url("/fonts/LuckiestGuy-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "YTCut Anton";    src: url("/fonts/Anton-Regular.ttf")       format("truetype"); font-display: swap; }
@font-face { font-family: "YTCut Bebas";    src: url("/fonts/BebasNeue-Regular.ttf")   format("truetype"); font-display: swap; }
@font-face { font-family: "YTCut Poppins";  src: url("/fonts/Poppins-Bold.ttf")        format("truetype"); font-display: swap; }
@font-face { font-family: "YTCut Cairo";    src: url("/fonts/Cairo-Bold.ttf")          format("truetype"); font-display: swap; }

/* Caption band honours the picker: face, size, outline, glow, drag position. */
.cap {
  font-family: var(--cap-font, "YTCut Luckiest", system-ui, sans-serif);
  bottom: var(--cap-y, 18%);
  cursor: grab; pointer-events: auto; touch-action: none;
  transform: translateX(-50%) scale(calc(var(--cap-beat, 1) * var(--cap-scale, 1)));
  transition: bottom .06s linear;
}
.cap.dragging { cursor: grabbing; transition: none; }
.cap:not(.on) { pointer-events: none; }
.cap .w {
  -webkit-text-stroke: var(--cap-outline, 0px) #000;
  paint-order: stroke fill;
  text-shadow: 0 0 var(--cap-glow, 0px) currentColor, 0 0 var(--cap-glow, 0px) currentColor;
}
/* Grab affordance — only while captions are on and the pointer is near. */
.cap.on:hover::after {
  content: ''; position: absolute; inset: -10px -14px; border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.35); pointer-events: none;
}

/* Font chips render in their own typeface */
.capfonts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.capfont {
  font-size: 15px; cursor: pointer; padding: 10px 8px; min-height: 44px;
  border-radius: 11px; background: var(--panel); border: 1px solid var(--stroke);
  color: var(--ink); transition: all var(--dur) var(--ease);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.capfont:hover { border-color: var(--accent); background: var(--panel-2); }
.capfont.active {
  border-color: var(--accent); background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.capfont:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@media (max-width: 860px) { .capfont { min-height: 48px; font-size: 16px; } }

/* Manual-mode export result — the finished Short, in the panel */
.exp-done { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.exp-done-badge {
  align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent);
  padding: 4px 10px; border-radius: 999px;
}
.exp-done-vid {
  width: 100%; max-height: 300px; border-radius: 14px; background: #000;
  border: 1px solid var(--stroke-2); display: block;
}

/* ── Reframing (fill mode): drag the video inside the frame ── */
.canvas-frame.reframable #previewVideo { cursor: grab; touch-action: none; }
.canvas-frame.reframing #previewVideo { cursor: grabbing; }
/* A one-time nudge that the preview is draggable — rule-of-thirds guides that
   fade in while reframing, so the crop feels deliberate rather than accidental. */
.canvas-frame.reframable::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity var(--dur) var(--ease);
  background:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,.22) 33.33%, rgba(255,255,255,.22) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to right, transparent 66.66%, rgba(255,255,255,.22) 66.66%, rgba(255,255,255,.22) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,.22) 33.33%, rgba(255,255,255,.22) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to bottom, transparent 66.66%, rgba(255,255,255,.22) 66.66%, rgba(255,255,255,.22) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}
.canvas-frame.reframable:hover::after,
.canvas-frame.reframing::after { opacity: 1; }
@media (hover: none) { .canvas-frame.reframable::after { opacity: .5; } }

/* ── Wizard success: the payoff screen ── */
.wiz-done-host[hidden] { display: none !important; }
body.wiz-done .canvas-frame,
body.wiz-done .aspect-quick,
body.wiz-done .fxtl,
body.wiz-done .mini-tl,
body.wiz-done .studio-tl { display: none !important; }
.wiz-done-host { display: flex; align-items: center; justify-content: center; width: 100%; }
.wd-card {
  display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 26px; align-items: center;
  width: min(820px, 100%); padding: 26px;
  background: linear-gradient(160deg, var(--accent-dim), transparent 45%), var(--panel);
  border: 1px solid var(--stroke-2); border-radius: 24px;
  box-shadow: 0 40px 90px -35px rgba(0,0,0,.85);
  animation: wdIn .34s cubic-bezier(.34,1.4,.5,1);
}
@keyframes wdIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.wd-media {
  aspect-ratio: 9/16; max-height: 56vh; border-radius: 20px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 6px #14151d, 0 0 0 7px var(--stroke-2), 0 24px 60px -22px rgba(0,0,0,.9);
  margin: 0 auto; width: 100%;
}
.wd-media video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.wd-side { min-width: 0; }
.wd-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 34%, transparent);
  padding: 5px 11px; border-radius: 999px;
}
.wd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.wd-title { font-size: clamp(21px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.02em; margin: 13px 0 5px; color: var(--ink); }
.wd-sub { font-size: 13px; color: var(--ink-2); margin: 0; }
.wd-note { font-size: 12.5px; color: var(--warn); margin: 8px 0 0; line-height: 1.5; }
.wd-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.wd-acts .btn { justify-content: center; min-height: 48px; font-size: 14px; }
.wd-dl { font-weight: 750; }
.wd-hint { font-size: 11.5px; color: var(--ink-3); margin: 14px 0 0; text-align: center; }
.wd-hint a { color: var(--accent-2); font-weight: 600; text-decoration: none; }
.wd-hint a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .wd-card { grid-template-columns: 1fr; gap: 16px; padding: 18px; width: 100%; }
  .wd-media { max-height: 40vh; width: auto; }
  .wd-acts .btn { min-height: 50px; }
  body.wiz-done .props { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .wd-card { animation: none; } }

/* ── Transcript: the caption as editable words ── */
.tw-wrap {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 40vh; overflow-y: auto; padding: 2px;
}
.tw {
  position: relative; font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 9px; min-height: 34px; border-radius: 9px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--stroke); color: var(--ink);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tw:hover { background: var(--panel-2); border-color: var(--stroke-2); }
/* The word being spoken right now — the transcript follows playback. */
.tw.live { border-color: var(--accent); background: var(--accent-dim); color: #fff; }
/* An emphasised word carries its badge permanently. */
.tw.beat { border-color: var(--warn); color: var(--warn); }
.tw.beat .tw-b { opacity: 1; color: var(--warn); }
.tw-b {
  position: absolute; top: -6px; right: -5px;
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; font-style: normal;
  background: var(--bg-2); border: 1px solid var(--stroke-2); color: var(--ink-3);
  opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tw:hover .tw-b { opacity: .85; }
.tw-b:hover { transform: scale(1.18); color: var(--warn); border-color: var(--warn); }
/* Touch has no hover: keep the badges permanently visible and bigger. */
@media (hover: none) {
  .tw-b { opacity: .7; width: 21px; height: 21px; font-size: 11px; }
  .tw { font-size: 14px; min-height: 40px; padding: 9px 11px; }
  .tw-wrap { max-height: 34vh; gap: 7px; }
}

/* ── Focus mode: give the preview the room it deserves ──────────────────────
   The default layout spends most of the screen on chrome while the thing the
   user is actually judging — the Short — sits small in the middle. In focus
   mode the frame takes the height, the tools that still apply float over it,
   and everything else gets out of the way. */
.app.theater .topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(8,10,16,.92), rgba(8,10,16,0));
  border-bottom: 0; padding-bottom: 22px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Chrome appears when the pointer is near the top, or on any keyboard focus.

   The selector used to be `.app.theater:hover .topbar`, and `.app` is
   `position: fixed; inset: 0` — the whole viewport. So "pointer near the top"
   was really "pointer anywhere on screen", and the bar that is supposed to get
   out of the way sat over the preview the entire time you were using it.

   The hot zone is a fixed strip the topbar owns, so hovering it counts as
   hovering the bar. It is the only part that takes the pointer while hidden —
   56px, small enough not to swallow clicks meant for the frame. */
.app.theater .topbar::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  pointer-events: auto;
}
.app.theater .topbar:hover,
.app.theater .topbar:focus-within { opacity: 1; transform: none; pointer-events: auto; }

/* Touch has no hover, so a hover-reveal would make the bar — and Export with
   it — permanently unreachable. Keep it visible there. */
@media (hover: none) {
  .app.theater .topbar { opacity: 1; transform: none; pointer-events: auto; }
  .app.theater .topbar::before { display: none; }
}
/* These must beat `body.wiz-on .work` (0,2,1) and the wizard's fixed-width
   props column — otherwise theater kept a 360px track for a hidden panel and
   the frame's `height: 100%` resolved against a collapsed row, blacking the
   preview out entirely. Explicit vh sizing avoids depending on the parent
   resolving a height at all. */
.app.theater .work { grid-template-columns: 1fr !important; }
.app.theater .rail, .app.theater .props { display: none !important; }
.app.theater .stage { padding: 0; justify-content: center; overflow: hidden; }
.app.theater .canvas-frame { height: 94vh !important; max-height: 94vh; border-radius: 18px; }
.app.theater .canvas-frame.a-169 { width: min(98vw, 94vh * 16/9); height: auto !important; }
.app.theater .canvas-frame.a-orig { width: min(98vw, 94vh * var(--orig-ar, .5625)); height: auto !important; }
.app.theater .fxtl,
.app.theater .wiz-done-host { display: none !important; }
/* The Moment step has no canvas-frame to enlarge — its stage IS the content.
   Hiding it in theater left an empty black screen, so instead give it the
   room: wider player, deck and controls still reachable. */
.app.theater .moment-stage { width: min(96vw, 1100px); }
.app.theater.no-clip .canvas-frame { display: none; }
body.moment-on .app.theater .canvas-frame { display: none; }

/* Real fullscreen: no browser chrome to leave room for, so go edge to edge. */
body.is-fs .app.theater .canvas-frame { height: 98vh !important; max-height: 98vh; }
body.is-fs .app.theater .canvas-frame.a-169 { width: min(100vw, 98vh * 16/9); height: auto !important; }
body.is-fs .app.theater .canvas-frame.a-orig { width: min(100vw, 98vh * var(--orig-ar, .5625)); height: auto !important; }
body.is-fs { background: #000; }
body.is-fs .app.theater .stage { background: #000; }

/* Floating transport — the only controls that still make sense over a frame. */
.focus-bar {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px); z-index: 62;
  display: none; align-items: center; gap: 10px;
  padding: 9px 13px; border-radius: 15px;
  background: rgba(10,12,20,.82); backdrop-filter: blur(14px);
  border: 1px solid var(--stroke-2);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.9);
  opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.app.theater .focus-bar { display: flex; }
.app.theater:hover .focus-bar,
.focus-bar:focus-within { opacity: 1; transform: translateX(-50%); }
.focus-bar button {
  font: inherit; cursor: pointer; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--stroke); color: var(--ink);
  transition: all var(--dur) var(--ease);
}
.focus-bar button:hover { background: var(--panel-2); border-color: var(--accent); }
.focus-bar .fb-play { width: 44px; height: 44px; background: var(--grad); border: 0; color: #0a0b12; }
.focus-bar .fb-time {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px;
  color: var(--ink-2); font-variant-numeric: tabular-nums; padding: 0 4px; min-width: 92px; text-align: center;
}
.focus-bar .fb-scrub {
  width: min(38vw, 320px); height: 5px; border-radius: 3px; cursor: pointer;
  background: var(--panel-2); position: relative; overflow: hidden;
}
.focus-bar .fb-fill { position: absolute; inset: 0 auto 0 0; background: var(--grad); width: 0; }
@media (hover: none) {
  /* No hover on touch: chrome stays visible rather than unreachable. */
  .app.theater .topbar, .app.theater .focus-bar { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
  .app.theater .topbar { transform: none; }
  .focus-bar .fb-scrub { width: 44vw; }
}
@media (max-width: 860px) {
  .app.theater .canvas-frame { height: min(100%, 78vh); }
  .focus-bar { gap: 7px; padding: 8px 10px; }
  .focus-bar .fb-time { min-width: 78px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .app.theater .topbar, .focus-bar { transition: none; }
}

/* ── Emphasis style picker (Words panel) ── */
.wfx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px; }
.wfx {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 9px 8px; min-height: 40px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--stroke); color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.wfx:hover { color: var(--ink); border-color: var(--stroke-2); background: var(--panel-2); }
.wfx.active { color: #fff; border-color: var(--accent); background: var(--accent-dim); }
@media (max-width: 860px) { .wfx { min-height: 46px; font-size: 13px; } }

/* Preview of the word-level emphases — mirrors WORD_FX in lib/shorts.js so the
   editor shows what the burn-in will do. --wfx-k is the 0..1 beat envelope. */
.cap[data-wfx="pop"] .w.hot { transform: scale(calc(1 + .42 * var(--wfx-k, 0))); }
.cap[data-wfx="shake"] .w.hot { transform: translateX(calc(var(--wfx-k, 0) * 6px)); }
.cap[data-wfx="drop"] .w.hot { transform: translateY(calc((1 - var(--wfx-k, 0)) * -18px)); }
.cap[data-wfx="flare"] .w.hot { color: var(--cap-accent); transform: scale(calc(1 + .12 * var(--wfx-k, 0))); }
.cap .w.hot { display: inline-block; will-change: transform; }

/* ── Entry paths: name the AI, keep manual equal ── */
.se-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; text-align: left; }
.se-path {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  padding: 15px 14px 13px; border-radius: 15px; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--stroke-2);
  transition: transform var(--dur) var(--spring), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.se-path:hover, .se-path:focus-visible { transform: translateY(-2px); border-color: var(--accent); background: var(--panel-2); }
.se-path:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.se-path.is-ai { border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke-2)); background: linear-gradient(160deg, var(--accent-dim), transparent 60%), var(--panel); }
.se-path-badge {
  position: absolute; top: -9px; right: 12px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--grad); color: #0a0b12;
}
.se-path-ic { color: var(--accent); }
.se-path.is-ai .se-path-ic { color: var(--accent); }
.se-path > b { font-size: 14.5px; font-weight: 800; }
.se-path-sub { font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.se-path-meta { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 620px) { .se-paths { grid-template-columns: 1fr; } }

/* ── AI moment strip, above the picker ── */
.ai-deck[hidden] { display: none !important; }
.ai-deck {
  width: 100%; display: flex; flex-direction: column; gap: 9px;
  padding: 12px; border-radius: 16px;
  background: linear-gradient(160deg, var(--accent-dim), transparent 55%), var(--panel);
  border: 1px solid var(--stroke-2);
  animation: aiIn .3s var(--ease);
}
@keyframes aiIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ai-deck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-deck-title { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.ai-deck-title b { color: var(--ink); font-weight: 700; }
.ai-spin {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid var(--stroke-2); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
.ai-deck-x {
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  padding: 6px 11px; min-height: 32px; border-radius: 9px;
  background: transparent; border: 1px solid var(--stroke-2); color: var(--ink-2);
}
.ai-deck-x:hover { color: var(--ink); border-color: var(--accent); }
.ai-deck-row { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 3px; scroll-snap-type: x mandatory; }
.aim {
  flex: 0 0 auto; width: 132px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 5px; padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
}
.aim-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  border-radius: 10px; background: #000 center/cover no-repeat;
  border: 1px solid var(--stroke-2);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.aim:hover .aim-thumb { border-color: var(--accent); transform: translateY(-2px); }
.aim:focus-visible .aim-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.aim-score {
  position: absolute; top: 5px; left: 5px;
  font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 7px;
  background: rgba(8,10,16,.8); color: #fff;
}
.aim.t-elite .aim-score { color: #34d399; }
.aim.t-strong .aim-score { color: #5ad1ff; }
.aim.t-solid .aim-score { color: #fbbf24; }
.aim-len {
  position: absolute; bottom: 5px; right: 5px;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px;
  background: rgba(8,10,16,.8); color: var(--ink-2);
}
.aim-title {
  font-size: 11.5px; line-height: 1.35; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 860px) {
  .ai-deck { padding: 10px; border-radius: 14px; }
  .aim { width: 118px; }
  .ai-deck-row { gap: 8px; }
  .ai-deck-x { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .ai-deck, .se-path { animation: none; transition: none; } }

/* ── Caption line editor: retype what was misheard ── */
.tl-list { display: flex; flex-direction: column; gap: 5px; max-height: 34vh; overflow-y: auto; padding: 2px; }
.tl-row { display: flex; align-items: center; gap: 7px; }
.tl-go {
  flex: none; font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
  min-width: 42px; min-height: 34px; padding: 0 6px; border-radius: 8px;
  font-variant-numeric: tabular-nums;
  background: var(--panel); border: 1px solid var(--stroke); color: var(--ink-3);
  transition: all var(--dur) var(--ease);
}
.tl-go:hover { color: var(--accent); border-color: var(--accent); }
.tl-in {
  flex: 1; min-width: 0; font: inherit; font-size: 12.5px;
  min-height: 34px; padding: 7px 10px; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--stroke); color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tl-in:hover { border-color: var(--stroke-2); }
.tl-in:focus { outline: none; border-color: var(--accent); background: var(--panel-2); }
@media (max-width: 860px) {
  .tl-in, .tl-go { min-height: 42px; font-size: 13.5px; }
  .tl-list { max-height: 30vh; }
}

/* Theater/fullscreen: the decorative phone bezel and notch eat vertical space
   and were being clipped by the viewport, so the frame appeared cut off top
   and bottom. Focus mode drops the ornament and sizes the frame to fit BOTH
   dimensions — height capped by the viewport, width derived from the aspect. */
.app.theater .canvas-frame {
  box-shadow: 0 0 0 1px var(--stroke-2), 0 30px 80px -30px rgba(0,0,0,.85) !important;
  border-radius: 14px !important;
}
body.wiz-on .app.theater .canvas-frame::after { content: none !important; }  /* notch */
.app.theater .canvas-frame:not(.a-11):not(.a-169):not(.a-orig) {
  height: min(94vh, calc((100vw - 32px) * 16 / 9)) !important;
}
body.is-fs .app.theater .canvas-frame:not(.a-11):not(.a-169):not(.a-orig) {
  height: min(98vh, calc(100vw * 16 / 9)) !important;
}
.app.theater .canvas-frame.a-11 { height: min(94vh, calc(100vw - 32px)) !important; }

/* ══ Visualizer panel ═══════════════════════════════════════════════════════
   Preset tiles. The images are rendered by the export renderer itself
   (scripts/build-viz-thumbs.js), so what a tile shows is what the video gets.
   Two columns everywhere — on the desktop rail the panel is narrow, and on a
   375px phone two columns still give ~163px tiles, comfortably above the 44px
   touch target while staying big enough to judge a look by. */
.vz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 2px; }
.vz-tile {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--stroke);
  background: var(--panel); color: inherit; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.vz-tile img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.vz-tile:hover { border-color: var(--stroke-2); }
.vz-tile:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.vz-tile.sel { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2); }
/* The name sits ON the artwork under a gradient rather than below it, so the
   tile stays one object and the grid keeps an even rhythm. */
.vz-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px;
  font-size: 11.5px; font-weight: 700; text-align: center; color: #fff;
  background: linear-gradient(to top, rgba(4,6,12,.92), rgba(4,6,12,0));
}
.vz-check {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #04060c;
  background: var(--accent-2); opacity: 0; transform: scale(.6);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--spring);
}
.vz-tile.sel .vz-check { opacity: 1; transform: scale(1); }
/* Hover lift is an enhancement only — it must never be how selection reads,
   because a phone has no hover. */
@media (hover: hover) and (pointer: fine) {
  .vz-tile:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .vz-tile, .vz-check { transition: none; }
  .vz-tile:hover { transform: none; }
}

/* Trimmed-away head/tail. The selection is the clip now — playback starts at
   In and stops at Out — so the excluded regions have to LOOK excluded rather
   than like ordinary empty track. */
.fxtl-veil {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    rgba(6, 8, 16, 0.66) 0 6px,
    rgba(6, 8, 16, 0.52) 6px 12px
  );
  border-left: 1px solid rgba(168, 85, 247, 0.35);
  border-right: 1px solid rgba(168, 85, 247, 0.35);
}
.fxtl-veil[hidden] { display: none; }
/* When a trim is active the clock counts the SELECTION, so mark it — otherwise
   a shorter number with no explanation reads as a bug. */
.fxtl.is-trimmed .fxtl-time b { color: var(--accent-2, #a855f7); }
.fxtl.is-trimmed .fxtl-time::after {
  content: "trimmed";
  margin-left: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-2, #a855f7);
  opacity: .85;
}

/* ══ Beat-reactive emblem — live preview ════════════════════════════════════
   Drawn by the same module the export uses. It sits above the video and below
   captions/text/watermark, exactly as the filtergraph composites it, so the
   preview's stacking order is the export's stacking order. */
.viz-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
  /* Inert unless the Visualizer tool is open — otherwise it would swallow
     every click meant for the video, the caption drag or the watermark. */
  pointer-events: none;
}
.viz-canvas.is-armed { pointer-events: auto; cursor: grab; }
.viz-canvas.is-armed.is-dragging { cursor: grabbing; }
.viz-canvas[hidden] { display: none; }

/* Logo upload row */
.vz-up { display: flex; gap: 10px; align-items: center; }
.vz-up-thumb {
  flex: none; width: 58px; height: 58px; border-radius: 12px; object-fit: cover;
  background: rgba(255,255,255,.05); border: 1px solid var(--stroke);
}
.vz-up-thumb.is-empty {
  display: grid; place-items: center; color: var(--ink-3);
  border-style: dashed; font-size: 18px;
}
.vz-up-side { flex: 1; min-width: 0; }

/* Fix-captions row. Two explicit choices beat one blind "retry", because a
   wrong transcript is usually a wrong SOURCE rather than bad luck. */
.cap-fix { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.cap-fix .btn { width: 100%; justify-content: center; font-size: 12px; padding: 9px 8px; }
@media (max-width: 420px) { .cap-fix { grid-template-columns: 1fr; } }

/* ══ Paste the real words ═══════════════════════════════════════════════════
   Seeded with the current caption text so the user CORRECTS rather than
   retypes — the difference between a feature people use and one they bounce
   off. */
.pw-scrim {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(4,6,12,.66);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.pw {
  width: min(560px, 100%);
  max-height: min(86vh, 640px);
  display: flex; flex-direction: column;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, #141b2d, #0e1320);
  border: 1px solid var(--stroke-2, rgba(255,255,255,.14));
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.pw-h { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.pw-sub { font-size: 12.5px; line-height: 1.5; color: var(--ink-3, #94a3b8); margin-bottom: 12px; }
.pw-ta {
  flex: 1; min-height: 140px; resize: vertical;
  padding: 12px; border-radius: 12px;
  font: inherit; font-size: 14px; line-height: 1.6;
  color: var(--ink, #f8fafc);
  background: rgba(0,0,0,.28);
  border: 1px solid var(--stroke, rgba(255,255,255,.1));
}
.pw-ta:focus { outline: none; border-color: var(--accent-2, #a855f7); }
.pw-row { display: flex; gap: 8px; margin-top: 12px; }
.pw-row .btn { flex: 1; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .pw-scrim { backdrop-filter: none; } }