/* Text Removal follows the 28-Aug Enhance card contract rather than a custom
   one-off palette. The route uses the reference's Short Drama accent so active
   source tabs, card borders and sample labels share one coherent magenta tone. */
html[data-tool="text_removal"] .generatorReferencePage[data-cat]{
  --cat-a:oklch(54% .23 322);
  --cat-b:oklch(62% .22 344);
}
.enhstack{ display:grid; gap:.6rem; }
.enhpick{ display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); color:var(--ink); width:100%; }
.enhpick.on{ border-color:var(--cat-a); box-shadow:0 0 0 1px var(--cat-a) inset; }
.enhpick__ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--bg-3); border:1px solid var(--line-soft); color:var(--cat-a); flex-shrink:0; }
.enhpick.on .enhpick__ic{ background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); color:#fff; border-color:transparent; }
.enhpick__ic svg{ width:20px; height:20px; }
.enhpick__tx{ flex:1; min-width:0; text-align:left; }
.enhpick__tx b{ display:block; font-family:"Bricolage Grotesque"; font-weight:700; font-size:.95rem; color:var(--ink); }
.enhpick__tx small{ display:block; color:var(--ink-3); font-size:.78rem; }
.enhbody{ margin:-.1rem 0 .3rem 3rem; }
.enhnote{ margin:.2rem 0 .3rem; font-size:.86rem; color:var(--ink-2); line-height:1.5; max-width:520px; }
.enhsam{ margin-top:.75rem; padding:.8rem .9rem; border:1px solid var(--line-soft); border-radius:12px; background:var(--bg-3); }
.enhsam__t{ font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:.55rem; }
.enhsam__ba{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.enhsam__ba--tight{ gap:.12rem; max-width:720px; margin-inline:auto; }
.enhsam__ba--tight .enhsam__pane{ border-radius:8px; }
.enhsam__ba--tight .enhsam__pane.before{ border-top-right-radius:0; border-bottom-right-radius:0; }
.enhsam__ba--tight .enhsam__pane.after{ border-top-left-radius:0; border-bottom-left-radius:0; }
.enhsam__pane{ position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(120deg,oklch(30% .05 280),oklch(20% .04 280)); }
.enhsam__ba[data-ar="9:16"] .enhsam__pane{ aspect-ratio:9/16; }
.enhsam__ba[data-ar="9:16"]{ max-width:420px; margin-inline:auto; }
.enhsam__lab{ position:absolute; top:6px; left:6px; z-index:2; font-size:.6rem; font-weight:700; letter-spacing:.04em; padding:.12rem .4rem; border-radius:6px; background:rgba(0,0,0,.6); color:#fff; }
.enhsam__pane.before .enhsam__burn{ position:absolute; bottom:12%; left:50%; transform:translateX(-50%); font-family:"Bricolage Grotesque"; font-weight:800; font-size:.72rem; color:#fff; background:rgba(0,0,0,.4); padding:.1rem .35rem; border-radius:4px; text-shadow:0 1px 3px #000; white-space:nowrap; }
.enhsam__pane.after .enhsam__clean{ position:absolute; bottom:12%; left:50%; transform:translateX(-50%); font-family:"Bricolage Grotesque"; font-weight:800; font-size:.72rem; color:var(--cat-a); animation:enhClean 2.6s ease-in-out infinite; white-space:nowrap; }
@keyframes enhClean{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.text-removal-enhance{ margin-top:1.6rem; }
.text-removal-enhance [data-rm-preview-compare]{ max-width:820px; }
.text-removal-enhance [data-rm-preview-compare] .enhsam__pane{ aspect-ratio:var(--rm-source-aspect,16/9); background:#11131b; }
.text-removal-enhance [data-rm-preview-before],.text-removal-enhance [data-rm-preview-after]{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#11131b; }
.rm-preview__status{ margin:.55rem 0 0; color:var(--ink-3); font-size:.72rem; line-height:1.4; text-align:center; }
.ai-vod-notice{ display:flex; align-items:center; gap:.75rem; margin:.75rem 0; padding:.8rem .9rem; border:1px solid; border-radius:12px; }
.ai-vod-notice > span{ display:grid; width:26px; height:26px; flex:0 0 26px; place-items:center; border-radius:50%; font-weight:900; }
.ai-vod-notice > div{ display:grid; gap:.18rem; flex:1; }
.ai-vod-notice strong{ font-size:.84rem; }
.ai-vod-notice small{ color:var(--ink-3); line-height:1.4; }
.ai-vod-notice.is-required{ border-color:rgba(245,158,11,.48); background:rgba(245,158,11,.09); }
.ai-vod-notice.is-required > span{ color:#1a1202; background:#f7b83d; }
@media(max-width:620px){
  .enhbody{ margin-left:0; }
  .ai-vod-notice{ align-items:flex-start; flex-wrap:wrap; }
  .ai-vod-notice .btn{ width:100%; }
}

.upscale-card {
  margin-top: 1.6rem;
  padding: 1.35rem;
  border: 1px solid rgba(211, 43, 201, .6);
  border-radius: 20px;
  background: rgba(4, 3, 31, .82);
  box-shadow: inset 0 0 0 1px rgba(77, 99, 255, .12);
}
.upscale-card__head { display: flex; align-items: center; gap: .9rem; }
.upscale-card__head h3, .upscale-card__head p { margin: 0; }
.upscale-card__head p { margin-top: .25rem; color: var(--ink-3); }
.upscale-card__icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  color: white;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #8a39e8, #e12aa7);
}
.upscale-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}
.upscale-options label { display: grid; gap: .55rem; color: var(--ink-2); font-weight: 700; }
.upscale-sample {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(102, 87, 204, .25);
  border-radius: 14px;
  background: rgba(18, 8, 61, .5);
}
.upscale-sample > small { color: var(--ink-3); font-weight: 800; letter-spacing: .08em; }
.upscale-sample__frame {
  position: relative;
  width: min(280px, 80%);
  aspect-ratio: 9 / 16;
  margin: .8rem auto 0;
  overflow: hidden;
  border-radius: 16px;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}
.upscale-sample__frame.has-frame { width:min(620px,94%); max-height:520px; background:#090b17; }
.upscale-sample__before, .upscale-sample__after {
  position: absolute;
  inset: 0;
  overflow:hidden;
}
.upscale-sample__before { background: linear-gradient(145deg, #3e3d49, #21222a); }
.upscale-sample__after { background: linear-gradient(145deg, #aa2997, #e534bc); }
.upscale-sample__before img,.upscale-sample__after img{ display:block; width:100%; height:100%; object-fit:contain; background:#090b17; pointer-events:none; }
.upscale-sample__after img{ filter:contrast(1.08) saturate(1.1) brightness(1.025); }
.upscale-sample__status{ max-width:640px; margin:.65rem auto 0; color:var(--ink-3); font-size:.72rem; line-height:1.4; text-align:center; }
.upscale-sample__labels {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}
.upscale-sample__label {
  position: absolute;
  top: .6rem;
  padding: .3rem .5rem;
  white-space: nowrap;
  border-radius: 6px;
  color: white;
  background: rgba(10, 8, 29, .8);
  font-size: .68rem;
  font-weight: 800;
}
.upscale-sample__label--before { left: .5rem; }
.upscale-sample__label--after { right: .5rem; }
.upscale-sample__handle {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, .55);
  cursor: ew-resize;
  transform: translateX(-50%);
  pointer-events: none;
}
.upscale-sample__handle::before {
  content: "";
  position: absolute;
  inset: 0 -18px;
}
.upscale-sample__handle::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #181525;
  background: white;
  box-shadow: 0 0 0 8px rgba(255,255,255,.16);
  transform: translate(-50%, -50%);
}
.upscale-sample__control {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.upscale-sample__control:focus-visible {
  opacity: .001;
  outline: 3px solid #91a7ff;
  outline-offset: -4px;
}
.jobpreview--upscale { align-items: flex-start; }
.upscale-result { min-width: 0; }
.upscale-result > small {
  display: block;
  margin-top: .55rem;
  color: var(--ink-3);
  font-size: .76rem;
  text-align: center;
}
.upscale-result__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: #05050b;
  box-shadow: 0 14px 36px rgba(0,0,0,.24);
}
.upscale-result__video,
.upscale-result__after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.upscale-result__video {
  display: block;
  object-fit: contain;
  background: #05050b;
}
.upscale-result__after {
  z-index: 1;
  overflow: hidden;
  clip-path: inset(0 0 0 50%);
  pointer-events: none;
}
.upscale-result__after .upscale-result__video {
  max-width: none;
}
.upscale-result__label {
  position: absolute;
  z-index: 4;
  top: .7rem;
  padding: .3rem .55rem;
  border-radius: 7px;
  color: #fff;
  background: rgba(10,8,29,.82);
  font-size: .67rem;
  font-weight: 800;
  pointer-events: none;
}
.upscale-result__label--before { left: .7rem; }
.upscale-result__label--after { right: .7rem; }
.upscale-result__buffering {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 1rem;
  display: none;
  padding: .32rem .65rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(10,8,29,.88);
  font-size: .7rem;
  font-weight: 700;
  pointer-events: none;
  transform: translateX(-50%);
}
.upscale-result__frame.is-buffering .upscale-result__buffering {
  display: block;
}
.upscale-result__divider {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.6);
  transform: translateX(-50%);
  pointer-events: none;
}
.upscale-result__handle {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  color: #181525;
  background: #fff;
  box-shadow: 0 0 0 8px rgba(255,255,255,.16);
  transform: translate(-50%,-50%);
  cursor: ew-resize;
  touch-action: none;
}
.upscale-result__slider {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.upscale-result__slider:focus-visible {
  opacity: .001;
  outline: 3px solid #91a7ff;
  outline-offset: -4px;
}
.upscale-result__controls {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 58px;
  align-items: flex-end;
  gap: .55rem;
  padding: 0 16px 17px;
  color: #fff;
  background: linear-gradient(to top, rgba(3,3,10,.92), rgba(3,3,10,.48) 58%, transparent);
}
.upscale-result__play {
  display: grid;
  width: 28px;
  height: 26px;
  flex: 0 0 28px;
  padding: 0;
  place-items: center;
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.upscale-result__play:focus-visible,
.upscale-result__seek:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.upscale-result__time {
  margin-bottom: 4px;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.upscale-result__seek {
  --seek-progress: 0%;
  position: absolute;
  right: 16px;
  bottom: 6px;
  left: 16px;
  width: calc(100% - 32px);
  height: 10px;
  margin: 0;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.upscale-result__seek::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right, #fff 0 var(--seek-progress), rgba(255,255,255,.38) var(--seek-progress) 100%);
}
.upscale-result__seek::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16);
}
.upscale-result__seek::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
}
.upscale-result__seek::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: #fff;
}
.upscale-result__seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16);
}
@media (max-width: 760px) {
  .upscale-options { grid-template-columns: 1fr; }
}
/* ============================================================
   POPPER — "PULSE" redesign
   Bold, high-energy dark theme tinted blue/indigo → dark-purple.
   Display: Bricolage Grotesque / Anton  | Body: Space Grotesk
   ============================================================ */

:root {
  /* base — NEBULA: deep cosmic blue ↔ purple blend, richest & most dramatic */
  --bg:        oklch(9% 0.05 274);
  --bg-2:      oklch(12% 0.06 276);
  --bg-3:      oklch(15.5% 0.07 280);
  --panel:     oklch(13.5% 0.062 278 / 0.8);
  --line:      oklch(44% 0.09 278 / 0.5);
  --line-soft: oklch(52% 0.07 280 / 0.22);

  /* text — luminous cool white → cosmic grey */
  --ink:       oklch(97% 0.012 282);
  --ink-2:     oklch(82% 0.035 282);
  --ink-3:     oklch(62% 0.055 280);

  /* accents — vivid cosmic blue → violet → magenta */
  --violet:    oklch(52% 0.21 284);
  --violet-hi: oklch(66% 0.18 282);
  --magenta:   oklch(56% 0.22 308);
  --magenta-hi:oklch(70% 0.17 310);
  --accent:    var(--violet);
  --accent-2:  var(--magenta);

  /* dual status shades */
  --review:    oklch(56% 0.21 294);    /* needs your attention */
  --review-hi: oklch(70% 0.17 294);
  --running:   oklch(50% 0.22 264);    /* in progress */
  --running-hi:oklch(66% 0.18 262);

  /* cosmic blue → violet → magenta → luminous white gradient */
  --grad: linear-gradient(105deg, oklch(44% 0.22 254) 0%, oklch(50% 0.23 282) 40%, oklch(58% 0.23 308) 72%, oklch(84% 0.10 304) 100%);
  --grad-soft: linear-gradient(105deg, oklch(48% 0.21 262 / .24), oklch(58% 0.21 304 / .24));
  --sheen: linear-gradient(120deg, transparent 0%, oklch(90% 0.04 290 / .2) 46%, transparent 58%);

  --radius:   18px;
  --radius-lg:26px;
  --radius-sm:11px;

  --shadow:   0 30px 80px -40px oklch(3% 0.06 278 / 0.98);
  --glow:     0 0 0 1px oklch(54% 0.21 288 / .52), 0 18px 54px -18px oklch(54% 0.23 292 / .62);

  /* signature arc + aurora */
  --arc:      radial-gradient(closest-side, transparent 66%, oklch(93% 0.045 288 / .92) 69%, oklch(64% 0.20 268 / .55) 72%, oklch(54% 0.23 302 / .26) 76%, transparent 80%);
  --arc-blur: 6px;
  --aurora:
    radial-gradient(66% 44% at 50% -10%, oklch(56% 0.21 268 / .52), transparent 64%),
    radial-gradient(50% 44% at 84% 2%, oklch(52% 0.21 306 / .34), transparent 66%),
    radial-gradient(58% 54% at 50% 116%, oklch(44% 0.19 286 / .26), transparent 62%);
  --text-grad: linear-gradient(96deg, var(--ink) 0%, oklch(80% 0.10 290) 55%, oklch(72% 0.14 300) 100%);

  --maxw: 1240px;
  --ease: cubic-bezier(.16,.84,.32,1);
  --ease-out: cubic-bezier(.22,1,.36,1);

  /* category accent overrides (set via JS on [data-cat]) */
  --cat-a: var(--violet);
  --cat-b: var(--magenta);
}

[data-cat="football"]{ --cat-a: oklch(52% 0.21 262); --cat-b: oklch(58% 0.21 296); }
[data-cat="drama"]   { --cat-a: oklch(54% 0.22 292); --cat-b: oklch(60% 0.22 314); }
[data-cat="variety"] { --cat-a: oklch(54% 0.21 274); --cat-b: oklch(60% 0.21 302); }
/* Extended category palette (Pulse 4-Aug design). These hues are consumed the
   moment a category alias resolves onto one of the three real pipelines, so the
   accent still shifts per user-facing label (e.g. "Short Drama" vs "Movies"). */
[data-cat="shortdrama"]{ --cat-a: oklch(54% 0.23 322); --cat-b: oklch(62% 0.22 344); }
[data-cat="podcast"]        { --cat-a: oklch(56% 0.20 286); --cat-b: oklch(62% 0.20 320); }
[data-cat="vlog"]           { --cat-a: oklch(56% 0.21 258); --cat-b: oklch(62% 0.21 300); }
[data-cat="basketball"]     { --cat-a: oklch(52% 0.21 268); --cat-b: oklch(58% 0.21 300); }
[data-cat="americanfootball"]{ --cat-a: oklch(50% 0.21 258); --cat-b: oklch(56% 0.21 288); }
[data-cat="rugby"]          { --cat-a: oklch(52% 0.20 250); --cat-b: oklch(58% 0.21 284); }
[data-cat="volleyball"]     { --cat-a: oklch(54% 0.20 256); --cat-b: oklch(60% 0.21 292); }
[data-cat="tennis"]         { --cat-a: oklch(54% 0.20 262); --cat-b: oklch(60% 0.21 296); }
[data-cat="badminton"]      { --cat-a: oklch(52% 0.21 272); --cat-b: oklch(58% 0.21 304); }
[data-cat="tabletennis"]    { --cat-a: oklch(52% 0.20 260); --cat-b: oklch(58% 0.21 292); }
[data-cat="golf"]           { --cat-a: oklch(54% 0.19 252); --cat-b: oklch(60% 0.20 286); }
[data-cat="combat"]         { --cat-a: oklch(54% 0.23 300); --cat-b: oklch(60% 0.23 330); }
[data-cat="muaythai"]       { --cat-a: oklch(54% 0.23 312); --cat-b: oklch(62% 0.22 342); }
[data-cat="mma"]            { --cat-a: oklch(52% 0.23 308); --cat-b: oklch(60% 0.23 336); }
[data-cat="f1"]             { --cat-a: oklch(54% 0.22 320); --cat-b: oklch(62% 0.22 348); }
[data-cat="motogp"]         { --cat-a: oklch(54% 0.22 316); --cat-b: oklch(62% 0.22 346); }
[data-cat="esports"]        { --cat-a: oklch(54% 0.21 278); --cat-b: oklch(60% 0.21 312); }
[data-cat="news"]           { --cat-a: oklch(56% 0.19 284); --cat-b: oklch(62% 0.20 316); }

/* per-tool theme — Highlights / Auto Stitch / Vertical Rotator all live
   in the same blue→violet brand family, but each gets a distinctly
   different hue so the whole UI (buttons, gradients, glows, focus,
   extended features) shifts top-to-bottom when a tool is selected.
   These override the CORE tokens because they're set on <html>. */

/* Auto Stitch — deep azure / cobalt blue end of the family */
[data-tool="stitch"]{
  --violet:    oklch(48% 0.20 252);
  --violet-hi: oklch(66% 0.17 254);
  --magenta:   oklch(55% 0.20 270);
  --magenta-hi:oklch(70% 0.16 272);
  --grad: linear-gradient(105deg, oklch(42% 0.20 238) 0%, oklch(48% 0.21 256) 42%, oklch(55% 0.21 276) 74%, oklch(84% 0.09 268) 100%);
  --glow: 0 0 0 1px oklch(54% 0.20 258 / .52), 0 18px 54px -18px oklch(52% 0.22 262 / .62);
  --cat-a: oklch(48% 0.20 252); --cat-b: oklch(56% 0.20 278);
}

/* Vertical Rotator — vivid violet / magenta end of the family */
[data-tool="vertical"]{
  --violet:    oklch(52% 0.23 312);
  --violet-hi: oklch(68% 0.18 312);
  --magenta:   oklch(58% 0.23 332);
  --magenta-hi:oklch(72% 0.17 334);
  --grad: linear-gradient(105deg, oklch(46% 0.22 298) 0%, oklch(52% 0.24 314) 44%, oklch(60% 0.23 332) 75%, oklch(86% 0.10 322) 100%);
  --glow: 0 0 0 1px oklch(56% 0.22 314 / .52), 0 18px 54px -18px oklch(56% 0.24 320 / .62);
  --cat-a: oklch(52% 0.23 312); --cat-b: oklch(60% 0.23 332);
}

/* Content Moderation — teal → emerald "trust & safety" hue, distinct from
   the blue→violet creator family so the moderation surface reads as a
   protective, system-level tool. */
[data-tool="moderation"]{
  --violet:    oklch(54% 0.13 192);
  --violet-hi: oklch(70% 0.12 188);
  --magenta:   oklch(58% 0.15 168);
  --magenta-hi:oklch(72% 0.13 164);
  --grad: linear-gradient(105deg, oklch(48% 0.12 200) 0%, oklch(54% 0.13 188) 42%, oklch(60% 0.15 166) 74%, oklch(86% 0.09 180) 100%);
  --glow: 0 0 0 1px oklch(56% 0.13 186 / .52), 0 18px 54px -18px oklch(54% 0.15 182 / .62);
  --cat-a: oklch(54% 0.13 192); --cat-b: oklch(60% 0.15 166);
}

/* AI Subtitles follows the reference Enhance violet → magenta treatment. */
[data-tool="subtitle"]{
  --violet:    oklch(52% 0.23 312);
  --violet-hi: oklch(68% 0.18 314);
  --magenta:   oklch(60% 0.23 332);
  --magenta-hi:oklch(74% 0.17 334);
  --grad: linear-gradient(105deg, oklch(46% 0.22 298) 0%, oklch(52% 0.24 314) 44%, oklch(60% 0.23 332) 75%, oklch(86% 0.10 322) 100%);
  --glow: 0 0 0 1px oklch(56% 0.22 314 / .52), 0 18px 54px -18px oklch(56% 0.24 320 / .62);
  --cat-a: oklch(52% 0.23 312); --cat-b: oklch(60% 0.23 332);
}



* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* aurora wash behind everything — premium navy with a bright electric-blue glow up top */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: var(--aurora);
  opacity: 1;
}
body > * { position: relative; z-index: 1; }

/* The landing page mounts the shared React header into `#site-header`, a direct
   child of <body>, so the rule above gives it `z-index:1` — and gives <main> the
   same 1. Equal z-index means DOM order decides, and <main> comes later, so it
   painted over the ENTIRE header subtree: `.nav`'s z-index:80 and the AI menu's
   z-index:40 are sealed inside this one layer and never compete with page
   content. The nav bar itself hid the bug (72px tall, opaque background), but the
   AI dropdown hangs ~640px down into the hero and got covered by the headline.
   A sticky header must outrank the page it floats over, so lift the host; the
   values inside it (.nav 80, .drawer 90, .acctmenu__pop 60) then only order
   themselves against each other, which is what they were written for. */
#site-header { z-index: 90; }

/* ============================================================
   FLUID BACKGROUND — animated aurora blobs, drifting grid,
   pointer-follow spotlight. Injected by app.js as first body child.
   ============================================================ */
.fluidbg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  contain: strict;
}
/* slow rotating conic shimmer (Finance/Agency-style sheen) */
.fluidbg__conic{
  position: absolute; left: 50%; top: -28vh;
  width: 130vw; height: 130vw; transform: translateX(-50%);
  background: conic-gradient(from 0deg,
    transparent 0deg,
    oklch(58% 0.21 268 / .10) 60deg,
    transparent 130deg,
    oklch(58% 0.22 308 / .12) 220deg,
    transparent 300deg,
    oklch(70% 0.10 296 / .08) 350deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
          mask-image: radial-gradient(closest-side, #000 30%, transparent 72%);
  opacity: .7; mix-blend-mode: screen; will-change: transform;
  animation: conicSpin 80s linear infinite;
}
.fluidbg__blob{
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  mix-blend-mode: screen; will-change: transform;
}
.fluidbg__blob--a{
  width: 52vw; height: 52vw; left: -8vw; top: -12vw;
  background: radial-gradient(circle at 30% 30%, var(--violet), transparent 68%);
  animation: blobA 26s var(--ease-out) infinite alternate;
}
.fluidbg__blob--b{
  width: 46vw; height: 46vw; right: -10vw; top: -6vw;
  background: radial-gradient(circle at 60% 40%, var(--magenta), transparent 68%);
  animation: blobB 32s var(--ease-out) infinite alternate;
}
.fluidbg__blob--c{
  width: 60vw; height: 60vw; left: 18vw; bottom: -34vw;
  background: radial-gradient(circle at 50% 50%, var(--running), transparent 70%);
  opacity: .42;
  animation: blobC 38s var(--ease-out) infinite alternate;
}
.fluidbg__blob--d{
  width: 40vw; height: 40vw; right: 6vw; bottom: -18vw;
  background: radial-gradient(circle at 45% 55%, var(--review), transparent 68%);
  opacity: .38;
  animation: blobD 30s var(--ease-out) infinite alternate;
}
/* floating particle field (Agency-style) */
.fluidbg__dots{ position: absolute; inset: 0; }
.fluidbg__dot{
  position: absolute; bottom: -6%; border-radius: 50%;
  background: radial-gradient(circle, oklch(92% 0.05 290 / .9), oklch(64% 0.18 292 / .35) 70%, transparent 75%);
  opacity: var(--op, .3); will-change: transform;
  animation: floatUp var(--dur, 24s) var(--delay, 0s) linear infinite;
}
/* subtle grain overlay */
.fluidbg__grain{
  position: absolute; inset: 0; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
/* faint drifting tech grid (Dimension.dev-style) */
.fluidbg__grid{
  position: absolute; inset: -2px; opacity: .5;
  background-image:
    linear-gradient(to right, oklch(70% 0.06 282 / .06) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(70% 0.06 282 / .06) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  animation: gridDrift 40s linear infinite;
}
/* pointer-follow spotlight glow */
.fluidbg__spot{
  --mx: 50%; --my: 32%;
  position: absolute; inset: 0;
  background: radial-gradient(36vw 36vw at var(--mx) var(--my),
    oklch(72% 0.16 296 / .20), transparent 60%);
  transition: background-position .2s linear;
}
.fluidbg.is-still .fluidbg__blob,
.fluidbg.is-still .fluidbg__conic,
.fluidbg.is-still .fluidbg__grid{ animation: none; }
.fluidbg.is-still .fluidbg__dots{ display: none; }
.fluidbg.is-still .fluidbg__spot{ display: none; }

@keyframes blobA{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(8vw,6vh,0) scale(1.12); }
  100% { transform: translate3d(-4vw,10vh,0) scale(.96); }
}
@keyframes blobB{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-9vw,8vh,0) scale(1.1); }
  100% { transform: translate3d(5vw,-4vh,0) scale(1.05); }
}
@keyframes blobC{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(6vw,-8vh,0) scale(.92); }
  100% { transform: translate3d(-8vw,-4vh,0) scale(1.1); }
}
@keyframes blobD{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-6vw,-6vh,0) scale(1.08); }
  100% { transform: translate3d(4vw,-10vh,0) scale(.94); }
}
@keyframes conicSpin{
  0%   { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}
@keyframes floatUp{
  0%   { transform: translate3d(0,0,0); opacity: 0; }
  10%  { opacity: var(--op, .3); }
  90%  { opacity: var(--op, .3); }
  100% { transform: translate3d(var(--drift, 0px), -112vh, 0); opacity: 0; }
}
@keyframes gridDrift{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 54px 54px, 54px 54px; }
}
@media (prefers-reduced-motion: reduce){
  .fluidbg__blob, .fluidbg__conic, .fluidbg__grid{ animation: none !important; }
  .fluidbg__dots{ display: none; }
  .fluidbg__spot{ display: none; }
}


h1,h2,h3,h4 { font-family: "Bricolage Grotesque", sans-serif; line-height: 1.02; margin: 0; letter-spacing: -.02em; font-weight: 800; }
.anton { font-family: "Anton", sans-serif; font-weight: 400; letter-spacing: .005em; text-transform: uppercase; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
.eyebrow {
  font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--grad); border-radius: 2px; }
.text-grad { background: var(--grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradShift 9s var(--ease-out) infinite alternate; }
@keyframes gradShift{ 0%{ background-position: 0% 50%; } 100%{ background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce){ .text-grad{ animation: none; } }
.mark { color: var(--magenta-hi); }

/* ---------- buttons ---------- */
.btn {
  --b: var(--grad);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .96rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
  color: #fff; background: var(--b); position: relative; isolation: isolate;
  min-height: 48px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
  box-shadow: 0 14px 34px -16px oklch(62% 0.22 280 / .8);
  white-space: nowrap;
}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background: linear-gradient(100deg, var(--magenta), var(--violet)); opacity:0; transition: opacity .3s;
}
.btn:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 22px 48px -16px oklch(70% 0.16 282 / .7); }
.btn:hover::after{ opacity:1; }
.btn:active { transform: translateY(-1px) scale(.99); }
/* metallic sheen sweep on hover */
.btn > *{ position:relative; z-index:1; }
.btn .sheen{ display:none; }
.btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background: var(--sheen); background-size: 220% 100%; background-position: 140% 0;
  opacity:0; transition: opacity .3s, background-position .7s var(--ease);
}
.btn:hover::before{ opacity:1; background-position: -40% 0; }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}
.btn:disabled::after,
.btn:disabled::before,
.btn[aria-disabled="true"]::after,
.btn[aria-disabled="true"]::before { opacity: 0; }
.btn--ghost {
  background: transparent; color: var(--ink); box-shadow: none;
  border: 1px solid var(--line);
}
.btn--ghost::after{ background: var(--grad-soft); }
.btn--ghost:hover{ border-color: transparent; box-shadow: none; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; min-height: 56px; }
.btn--sm { padding: .5rem 1rem; font-size: .85rem; min-height: 40px; }
.btn--block{ width:100%; }

/* big premium upload button (homepage hero) */
.btn--xl{ padding: 1.05rem 1.5rem; min-height: 76px; border-radius: 22px; font-size:1.05rem; }
.btn--upload{ gap:1rem; }
.btn--upload__ic{ width:46px;height:46px;border-radius:14px; display:grid; place-items:center; background: oklch(100% 0 0 / .16); flex-shrink:0; }
.btn--upload__ic svg{ width:24px;height:24px; color:#fff; }
.btn--upload__tx{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; text-align:left; }
.btn--upload__tx b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.25rem; }
.btn--upload__tx small{ font-weight:500; font-size:.82rem; opacity:.9; }
.btn--upload__arr{ display:grid; place-items:center; transition: transform .3s var(--ease); }
.btn--upload:hover .btn--upload__arr{ transform: translateX(4px); }
.hero__sub-cta{ margin-top:1rem; }
.hero__sub-cta a{ color:var(--ink-3); font-size:.92rem; transition: color .2s; }
.hero__sub-cta a:hover{ color:var(--ink); }
@media (max-width:560px){ .btn--upload__tx small{ display:none; } .btn--xl{ min-height:64px; } }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 80;
  backdrop-filter: blur(14px);
  background: color-mix(in oklch, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.nav__in { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.nav .logo, .drawer__head .logo {
  display: inline-flex; align-items: center; gap: .6rem;
  width: auto; height: auto; border-radius: 0; background: transparent; box-shadow: none;
  font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 1.4rem; letter-spacing: -.03em; color: var(--ink);
}
.nav .logo__dot, .drawer__head .logo__dot{ width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display:grid; place-items:center; box-shadow: var(--glow); }
.nav .logo__dot svg, .drawer__head .logo__dot svg{ width:17px; height:17px; }

/* Base logo mark — every OTHER place the lockup appears (the landing footer is
   the live one). The rules above are scoped to .nav / .drawer__head because the
   React <ReferenceHeader> owns those and needs its own overrides; without an
   unscoped rule the footer's badge had no size at all, so its <svg> stretched
   to fill the grid cell and rendered as a giant white play triangle. */
.logo{
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 1.4rem;
  letter-spacing: -.03em; color: var(--ink);
}
.logo__dot{ width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--grad); display: grid; place-items: center; box-shadow: var(--glow); }
.logo__dot svg{ width: 17px; height: 17px; }
.nav__links { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav__links a { padding: .55rem .85rem; border-radius: 10px; font-weight: 500; color: var(--ink-2); font-size: .95rem; transition: color .2s, background .2s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); background: color-mix(in oklch, var(--ink) 9%, transparent); }
.nav__cta { margin-left: .5rem; }
.nav__burger {
  display: none; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line);
  background: transparent; cursor: pointer; margin-left: auto; align-items: center; justify-content: center;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content:""; display:block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease);
}
.nav__burger span::before{ position: absolute; transform: translateY(-7px); }
.nav__burger span::after { position: absolute; transform: translateY(7px); }
.nav__burger span{ position: relative; }
body.nav-open .nav__burger span{ background: transparent; }
body.nav-open .nav__burger span::before{ transform: rotate(45deg); }
body.nav-open .nav__burger span::after{ transform: rotate(-45deg); }

/* drawer */
.drawer {
  position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none;
}
.drawer__scrim{ position:absolute; inset:0; background: oklch(10% 0.05 280 / .6); opacity:0; transition: opacity .35s; }
.drawer__panel{
  position: absolute; right: 0; top: 0; height: 100%; width: min(82vw, 340px);
  background: var(--bg-2); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .4s var(--ease-out);
  padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .3rem; overflow-y:auto;
}
body.nav-open .drawer{ visibility: visible; pointer-events: auto; }
body.nav-open .drawer__scrim{ opacity: 1; }
body.nav-open .drawer__panel{ transform: translateX(0); }
.drawer a { padding: .95rem 1rem; border-radius: 12px; font-size: 1.1rem; font-weight: 600; min-height: 48px; display:flex; align-items:center; }
.drawer a:hover{ background: oklch(30% 0.07 280 / .5); }
.drawer__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: .8rem; }
.drawer__close{ width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:1.4rem;cursor:pointer; }
.drawer__sub{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); padding: .8rem 1rem .3rem; }

/* ============================================================
   OVERVIEW TRACKER
   ============================================================ */
.tracker {
  display: block; margin-block: 1.2rem; border-radius: var(--radius);
  border: 1px solid var(--line); background:
    linear-gradient(120deg, color-mix(in oklch, var(--bg-2) 90%, transparent), color-mix(in oklch, var(--bg-3) 85%, transparent));
  position: relative; overflow: hidden; box-shadow: var(--shadow);
  transition: transform .3s var(--ease), border-color .3s;
}
.tracker:hover{ transform: translateY(-2px); border-color: oklch(62% 0.22 280 / .55); }
.tracker::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width: 5px; background: var(--grad);
}
.tracker__row { display: grid; grid-template-columns: repeat(5, 1fr); }
.tstat { padding: 1rem 1.25rem; border-right: 1px solid var(--line-soft); position: relative; }
.tstat:last-child{ border-right: 0; }
.tstat__label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); display:flex; align-items:center; gap:.4rem; }
.tstat__val { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-top: .25rem; letter-spacing: -.02em; }
.tstat--hot { background: color-mix(in oklch, var(--review) 12%, transparent); }
.tstat--hot .tstat__val { color: var(--review-hi); }
.tstat--hot .tstat__label{ color: var(--review-hi); }
.tstat--hot .tstat__label::before{ content:""; width:7px;height:7px;border-radius:50%;background:var(--review);box-shadow:0 0 0 0 oklch(66% 0.22 282 / .6); animation: ping 2s infinite; }
.tstat--warn { background: color-mix(in oklch, var(--running) 12%, transparent); }
.tstat--warn .tstat__val{ color: var(--running-hi); }
.tstat--warn .tstat__label{ color: var(--running-hi); }
.tstat--warn .tstat__label::before{ content:""; width:7px;height:7px;border-radius:50%;background:var(--running);box-shadow:0 0 0 0 oklch(68% 0.2 282 / .6); animation: ping 2s .5s infinite; }
@keyframes ping{ 0%{box-shadow:0 0 0 0 oklch(66% 0.22 282 / .55);} 70%{box-shadow:0 0 0 9px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
.tracker__cta{ position:absolute; right:1.1rem; top:50%; transform:translateY(-50%); font-size:.8rem; color:var(--ink-3); display:flex;align-items:center;gap:.3rem; opacity:0; transition:opacity .3s, transform .3s; }
.tracker:hover .tracker__cta{ opacity:1; transform:translateY(-50%) translateX(-2px); }

@media (max-width: 860px){
  .tracker__row{ grid-template-columns: repeat(5, minmax(140px,1fr)); overflow-x:auto; scroll-snap-type:x mandatory; }
  .tstat{ scroll-snap-align:start; }
  .tracker__cta{ display:none; }
}
@media (max-width: 560px){
  .tracker__row{ grid-template-columns: repeat(2, 1fr); overflow-x:visible; scroll-snap-type:none; }
  .tstat{ border-right:1px solid var(--line-soft); border-top:1px solid var(--line-soft); }
  .tstat:nth-child(2n){ border-right:0; }
  .tstat:nth-child(-n+2){ border-top:0; }
  .tstat:last-child{ grid-column:1 / -1; }
  .tstat__val{ font-size:1.45rem; }
}

/* ============================================================
   HERO (index)
   ============================================================ */
.hero { position: relative; overflow: hidden; padding-top: clamp(0.6rem, 1.6vw, 1.3rem); padding-bottom: clamp(0.6rem,1.6vw,1.3rem); }
/* signature halo — fully stretched semicircle horizon, like sunlight cresting an earth curve */
.hero::before{
  content:""; position:absolute; left:50%; top:38%; transform:translateX(-50%);
  width:min(220%, 2400px); aspect-ratio: 2.6 / 1; border-radius:50%;
  background: var(--arc);
  filter: blur(var(--arc-blur)); pointer-events:none; z-index:0;
}
.hero > *{ position:relative; z-index:1; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,4vw,4rem); align-items: center; }
/* centered single-column hero (live preview now lives in the showcase below) */
.hero__grid--center{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero__grid--center .hero__col{ display:flex; flex-direction:column; align-items:center; max-width: min(1180px, 100%); }
.hero__grid--center .hero__lead{ max-width: 58ch; }
.hero__grid--center .hero__cta{ justify-content:center; }
.hero__grid--center .hero__trust{ justify-content:center; }
.hero h1 { font-size: clamp(2.8rem, 7.5vw, 6rem); line-height: .94; }
/* web view: two short tagline lines, tightly stacked */
.hero__grid--center h1{ font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: .9; letter-spacing: -.01em; max-width: none; white-space: nowrap; }
.hero__br{ display:none; }
.hero__break{ display:block; height:0; line-height:0; }
.hero h1 .anton{ display:block; }
.hero__grid--center h1 .anton{ display:inline; }
.hero__lead { color: var(--ink-2); font-size: clamp(1.05rem,1.6vw,1.3rem); max-width: 36ch; margin: .45rem 0 .9rem; }
.hero__grid--center .hero__lead{ font-size: clamp(1.02rem,1.4vw,1.18rem); }
.hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero__grid--center .btn--xl{ min-height:78px; padding:1rem 1.9rem; }
.hero__grid--center .btn--upload__tx b{ font-size:1.3rem; }
.hero__trust{ margin-top: 2.2rem; display:flex; gap:1.6rem; flex-wrap:wrap; color:var(--ink-3); font-size:.85rem; }
.hero__trust b{ color: var(--ink); font-family:"Bricolage Grotesque"; }

/* hero visual — kinetic preview card */
.previewcard{
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  padding: 1rem; box-shadow: var(--shadow); position: relative; overflow:hidden;
}
.previewcard::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; padding:1px;
  background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.5; pointer-events:none;
}
.previewcard__top{ display:flex; justify-content:space-between; align-items:center; padding:.4rem .5rem .9rem; }
.previewcard__chips{ display:flex; gap:.4rem; }
.chip{ font-size:.7rem; padding:.3rem .6rem; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); }
.chip--on{ background: var(--grad); border-color:transparent; color:#fff; }

/* Drama highlight-event chips. Each bucket gets a semantic hue keyed to
   its narrative feel — red for action, pink for romance, sky for tears/
   grief, amber for comedy, violet for confrontation. The chip is bordered
   + tinted rather than solid-filled so it reads as a "label" and doesn't
   fight the primary tag placed next to it. */
.chip--action  { background: oklch(30% 0.15 25 / .35);  border-color: oklch(66% 0.20 25 / .70);  color: oklch(90% 0.12 30);  }
.chip--romance { background: oklch(30% 0.15 350 / .35); border-color: oklch(70% 0.22 350 / .70); color: oklch(92% 0.10 350); }
.chip--emo     { background: oklch(30% 0.15 230 / .35); border-color: oklch(68% 0.18 230 / .70); color: oklch(90% 0.10 235); }
.chip--comedy  { background: oklch(30% 0.15 78 / .35);  border-color: oklch(72% 0.18 82 / .70);  color: oklch(92% 0.14 82);  }
.chip--drama   { background: oklch(30% 0.15 300 / .35); border-color: oklch(70% 0.20 300 / .70); color: oklch(92% 0.12 300); }
.chip--muted   { background: oklch(24% 0.02 260 / .5);  border-color: var(--line); color: var(--ink-2); }

/* When a chip is rendered inline on the review card title row, tighten
   the vertical rhythm so it sits flush with the surrounding metadata. */
.reviewCard__event{ display:inline-flex; align-items:center; line-height:1; font-weight:600; letter-spacing:.02em; margin-left:.55rem; }

/* Drama event colour key. Only rendered when the batch actually carries
   event chips, so it doubles as a discoverability hint: it appears exactly
   when the user needs it. */
.reviewLegend{
  margin: .5rem 0 .25rem; padding: .6rem .75rem;
  background: oklch(22% 0.02 260 / .55);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid; gap: .35rem;
}
.reviewLegend__row{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; }
.reviewLegend__label{ font-size:.78rem; font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em; }
.reviewLegend__chips{ display:inline-flex; flex-wrap:wrap; gap:.35rem; }
.reviewLegend__chip{ font-size:.72rem; padding:.15rem .5rem; }
.reviewLegend__note{ margin:0; font-size:.78rem; line-height:1.4; color:var(--ink-2); }
.reviewLegend__note b{ color:var(--ink); font-weight:600; }
.reviewLegend__note i{ font-style:normal; color:var(--ink); }

.previewcard__screen{
  aspect-ratio: 16/9; border-radius: 14px; position: relative; overflow:hidden;
  background:
    radial-gradient(circle at 70% 30%, oklch(40% 0.13 282 / .5), transparent 50%),
    radial-gradient(circle at 20% 80%, oklch(40% 0.13 262 / .5), transparent 50%),
    oklch(13% 0.04 280);
  display:grid; place-items:center;
}
.playbtn{ width:64px;height:64px;border-radius:50%; background:var(--grad); display:grid;place-items:center; box-shadow: var(--glow); }
.playbtn svg{ width:24px;height:24px;color:#fff;margin-left:3px; }
.waveform{ position:absolute; left:0; right:0; bottom:0; height:46px; display:flex; align-items:flex-end; gap:3px; padding:0 14px 10px; }
.waveform i{ flex:1; background: var(--grad); border-radius:3px 3px 0 0; opacity:.85; animation: wav 1.3s ease-in-out infinite; }
@keyframes wav{ 0%,100%{height:18%;} 50%{height:90%;} }
.previewcard__strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:.55rem; margin-top:.7rem; }
.miniclip{ aspect-ratio:16/10; border-radius:9px; border:1px solid var(--line); position:relative; overflow:hidden;
  background: linear-gradient(135deg, oklch(26% 0.08 280), oklch(24% 0.07 282)); }
.miniclip span{ position:absolute; left:6px; bottom:5px; font-size:.62rem; background:oklch(12% .05 280 / .7); padding:.1rem .35rem; border-radius:5px; }
.float-badge{
  position:absolute; padding:.55rem .8rem; border-radius:12px; background:var(--bg-2); border:1px solid var(--line);
  box-shadow:var(--shadow); font-size:.78rem; display:flex; align-items:center; gap:.5rem; font-weight:600;
}
.float-badge b{ font-family:"Bricolage Grotesque"; }
.float-badge--a{ top:-14px; right:18px; animation: floaty 5s ease-in-out infinite; }
.float-badge--b{ bottom:-16px; left:-12px; animation: floaty 6s ease-in-out infinite reverse; }
@keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
.float-badge .dotg{ width:8px;height:8px;border-radius:50%;background:var(--grad); }

/* marquee */
.marquee{ border-block: 1px solid var(--line-soft); overflow:hidden; padding: .9rem 0; margin-top: clamp(2rem,4vw,3rem); background: oklch(18% 0.04 280 / .5); }
.marquee__track{ display:flex; gap:3rem; width:max-content; animation: scrollx 28s linear infinite; }
.marquee__track span{ font-family:"Anton"; text-transform:uppercase; font-size:1.5rem; color:var(--ink-3); display:flex; align-items:center; gap:3rem; letter-spacing:.02em; }
.marquee__track span::after{ content:"✦"; color:var(--magenta); font-size:1rem; }
@keyframes scrollx{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } .waveform i{animation:none;height:50%;} .float-badge{animation:none;} }

/* CUSTOMER LOGO BAR — sliding reference logos */
.logobar{ padding: clamp(1.8rem,4vw,2.8rem) 0 clamp(1rem,2vw,1.6rem); }
.logobar__lead{ text-align:center; color:var(--ink-3); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1.3rem; }
.logobar__viewport{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logobar__track{ display:flex; align-items:center; gap:clamp(2.2rem,5vw,4rem); width:max-content; animation: scrollx 34s linear infinite; }
.logobar__track:hover{ animation-play-state:paused; }
.logoref{ display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap; font-weight:700; font-size:clamp(1rem,1.6vw,1.22rem); letter-spacing:-.01em; color:var(--ink-3); opacity:.72; transition:opacity .25s var(--ease), color .25s var(--ease); }
.logoref:hover{ opacity:1; color:var(--ink); }
.logoref svg{ width:26px; height:26px; color:var(--cat-b); flex:none; }
@media (prefers-reduced-motion: reduce){ .logobar__track{ animation:none; } }

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.sec-head{ max-width: 60ch; margin-bottom: clamp(2rem,4vw,3.2rem); }
.sec-head h2{ font-size: clamp(2rem, 4.5vw, 3.6rem); margin-top: .8rem; }
.sec-head p{ color: var(--ink-2); font-size: 1.1rem; margin-top: 1rem; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }

/* features — asymmetric bento */
.bento{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.feat{
  border:1px solid var(--line); border-radius: var(--radius); padding: 1.6rem;
  background: linear-gradient(160deg, oklch(21% 0.05 280 / .7), oklch(19% 0.045 280 / .55));
  position: relative; overflow:hidden; transition: transform .35s var(--ease), border-color .35s;
}
.feat:hover{ transform: translateY(-5px); border-color: oklch(62% 0.22 280 / .55); }
.feat:hover .feat__num{ color: var(--magenta-hi); }
.feat--wide{ grid-column: span 2; }
.feat--tall{ grid-row: span 2; }
.feat__num{ font-family:"Anton"; font-size: 2.4rem; color: oklch(45% 0.1 280); transition: color .3s; line-height:1; }
.feat h3{ font-size: 1.35rem; margin: .8rem 0 .5rem; }
.feat p{ color: var(--ink-2); font-size: .98rem; }
.feat__big{ margin-top: 1.4rem; }
.feat__big .anton{ font-size: clamp(2.4rem,6vw,4rem); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tag-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.tag{ font-size:.78rem; padding:.35rem .7rem; border-radius:999px; background: oklch(30% 0.07 280 / .55); color:var(--ink-2); border:1px solid var(--line-soft); }

/* process */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; counter-reset: s; }
.step{ position:relative; padding: 1.8rem 1.5rem; border-radius: var(--radius); border:1px solid var(--line); background: var(--bg-2); }
.step__n{ font-family:"Anton"; font-size:1rem; width:42px;height:42px; border-radius:12px; display:grid;place-items:center; background:var(--grad); color:#fff; }
.step h3{ font-size:1.25rem; margin:1rem 0 .5rem; }
.step p{ color:var(--ink-2); font-size:.96rem; }
.step__line{ position:absolute; top: 2.6rem; right:-1.4rem; width:1.4rem; height:2px; background:var(--grad); }

/* platforms */
.platforms{ display:flex; gap:.8rem; flex-wrap:wrap; }
.plat{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1.2rem; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); font-weight:600; transition: .3s var(--ease); }
.plat:hover{ transform: translateY(-3px); border-color: var(--magenta); }
.plat svg{ width:20px;height:20px; }

/* pricing */
.prices{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; align-items:start; }
.prices--4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:1080px){ .prices--4{ grid-template-columns: repeat(2,1fr); } }
.price{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; background:var(--bg-2);
  position:relative; transition:transform .35s var(--ease), border-color .35s;
}
.price:hover{ transform: translateY(-5px); }
.price--feat{ background: linear-gradient(165deg, oklch(26% 0.09 280), oklch(22% 0.08 282)); border-color: transparent; box-shadow: var(--glow); }
.price--feat::before{ content:"Most popular"; position:absolute; top:-12px; left:1.8rem; background:var(--grad); color:#fff; font-size:.72rem; font-weight:700; padding:.3rem .8rem; border-radius:999px; letter-spacing:.05em; }
.price h3{ font-size:1.2rem; }
.price__amt{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:3rem; margin:.6rem 0 0; letter-spacing:-.03em; }
.price__amt small{ font-size:1rem; font-weight:500; color:var(--ink-3); }
.price ul{ list-style:none; padding:0; margin:1.4rem 0; display:grid; gap:.7rem; }
.price li{ display:flex; gap:.6rem; color:var(--ink-2); font-size:.95rem; }
.price li svg{ width:18px;height:18px;color:var(--magenta-hi); flex-shrink:0; margin-top:2px; }

/* CTA band */
.ctaband{
  border-radius: var(--radius-lg); padding: clamp(2.5rem,5vw,4.5rem); text-align:center; position:relative; overflow:hidden;
  background: linear-gradient(120deg, oklch(30% 0.12 280), oklch(28% 0.13 282));
  border:1px solid var(--line);
}
.ctaband::before{ content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 50% -20%, oklch(64% .19 282 / .28), transparent 60%); }
.ctaband h2{ font-size: clamp(2.2rem,5vw,4rem); position:relative; }
.ctaband p{ color:var(--ink-2); max-width:48ch; margin:1rem auto 2rem; position:relative; }

/* footer */
.footer{ border-top:1px solid var(--line-soft); padding-block: 3rem 2rem; margin-top: 2rem; }
.footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2rem; }
.footer h4{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem; font-family:"Space Grotesk"; font-weight:600; }
.footer a{ display:block; color:var(--ink-2); padding:.3rem 0; font-size:.95rem; }
.footer a:hover{ color:var(--ink); }
.footer__bot{ display:flex; justify-content:space-between; align-items:center; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line-soft); color:var(--ink-3); font-size:.85rem; flex-wrap:wrap; gap:1rem; }

/* ============================================================
   GENERATOR
   ============================================================ */
.gen-head{ padding-top: clamp(2rem,4vw,3rem); }
.gen-head h1{ font-size: clamp(2.2rem,5vw,3.6rem); }
.gen-head p{ color:var(--ink-2); max-width:54ch; margin-top:.8rem; font-size:1.05rem; }

/* TOOL SWITCHER — Highlights / Auto Stitch / Vertical Rotator */
.tooltabs{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:.35rem;
  margin: 1.6rem 0 .4rem; padding:.4rem;
  border:1px solid var(--line); border-radius:18px;
  background: var(--panel); backdrop-filter: blur(14px);
}
.tooltab{
  display:flex; align-items:center; justify-content:center; gap:.55rem; text-align:center; cursor:pointer;
  padding:.7rem .6rem; border-radius:11px; border:1px solid transparent;
  background:transparent; color:var(--ink-2); transition:.25s var(--ease);
}
.tooltab:hover{ background: var(--bg-2); color:var(--ink); }
.tooltab__ic{
  width:26px; height:26px; flex-shrink:0; display:grid; place-items:center;
  background:transparent; border:0; color:inherit; transition:.25s var(--ease);
}
.tooltab__ic svg{ width:18px; height:18px; }
/* minimalist: show only the short label, drop the descriptive sub-line */
.tooltab__tx{ display:block; line-height:1; min-width:0; }
.tooltab__tx b{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:.92rem; white-space:nowrap; }
.tooltab__tx small{ display:none; }
.tooltab[aria-selected="true"]{
  border-color: color-mix(in oklch, var(--cat-a) 45%, transparent);
  background: color-mix(in oklch, var(--cat-a) 12%, transparent);
  color:var(--ink);
}
.tooltab[aria-selected="true"] .tooltab__ic{ color: var(--cat-a); }
@media (max-width:760px){
  .tooltabs{ grid-template-columns:repeat(2,1fr); }
  .tooltab__tx b{ font-size:.86rem; }
}
@media (max-width:420px){
  .tooltabs{ grid-template-columns:1fr; }
}

.catbar{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin: 1.4rem 0; }
.catdrop{ position:relative; }
.catdrop__btn{
  display:flex; align-items:center; gap:.8rem; min-height:56px; padding:.7rem 1.1rem;
  border-radius:16px; border:1px solid var(--line); background:var(--bg-2); cursor:pointer; color:var(--ink);
  font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.15rem; transition:.25s var(--ease); min-width:280px;
}
.catdrop__btn:hover{ border-color: var(--cat-a); }
.catdrop__btn .swatch{ width:30px;height:30px;border-radius:9px; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); flex-shrink:0; }
.catdrop__btn .meta{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.catdrop__btn .meta small{ font-family:"Space Grotesk"; font-weight:500; font-size:.72rem; color:var(--ink-3); letter-spacing:.04em; }
.catdrop__btn .caret{ margin-left:auto; transition: transform .3s; }
.catdrop.open .catdrop__btn .caret{ transform: rotate(180deg); }
.catdrop__menu{
  position:absolute; top: calc(100% + .5rem); left:0; right:0; z-index:30;
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:.5rem; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform: translateY(-8px); transition:.28s var(--ease);
}
.catdrop.open .catdrop__menu{ opacity:1; visibility:visible; transform:none; }
.catopt{ display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; padding:.8rem; border-radius:11px; border:0; background:transparent; cursor:pointer; color:var(--ink); min-height:52px; }
.catopt:hover, .catopt[aria-selected="true"]{ background: oklch(30% 0.07 280 / .55); }
.catopt .swatch{ width:30px;height:30px;border-radius:9px; flex-shrink:0; }
.catopt strong{ font-family:"Bricolage Grotesque"; font-size:1rem; display:block; }
.catopt small{ color:var(--ink-3); font-size:.8rem; }
.s-drama{ background: linear-gradient(120deg, oklch(52% 0.21 292), oklch(58% 0.22 312)); }
.s-variety{ background: linear-gradient(120deg, oklch(54% 0.21 274), oklch(50% 0.22 262)); }
.s-football{ background: linear-gradient(120deg, oklch(50% 0.21 262), oklch(56% 0.21 284)); }
/* category icon glyph inside the swatch chips */
.catopt .swatch, .catdrop__btn .swatch{ display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; }

.catbar__links{ margin-left:auto; display:flex; gap:.4rem; }
.catbar__links a{ padding:.5rem .8rem; border-radius:10px; font-size:.88rem; color:var(--ink-2); border:1px solid var(--line-soft); }
.catbar__links a:hover{ color:var(--ink); border-color:var(--cat-a); }

/* generator layout */
.gen-layout{ display:grid; grid-template-columns: 1.5fr .85fr; gap:1.4rem; align-items:start; margin-bottom: 4rem; }

/* minimal single-column generator flow */
.gen-narrow{ max-width: 760px; margin-inline:auto; }
.gen-flow{ display:flex; flex-direction:column; gap:1.2rem; margin-bottom: 4rem; }
.gen-flow[hidden]{ display:none; }
[data-tool-only][hidden]{ display:none; }

/* highlight-style mode selector (required choice, Relaxed default) */
.gen-mode{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); padding:1.3rem; }
.gen-mode__head{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem; }
.gen-mode__head h4{ font-size:1.1rem; }
.gen-mode__head span{ color:var(--ink-3); font-size:.86rem; }
.gen-mode__seg{ display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem; }
.gen-mode__opt{
  display:flex; flex-direction:column; gap:.25rem; text-align:left; cursor:pointer;
  padding:.9rem 1rem; border-radius:13px; border:1px solid var(--line); background:var(--bg);
  color:var(--ink); font-family:inherit; transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.gen-mode__opt:hover{ border-color: var(--cat-a); transform: translateY(-2px); }
.gen-mode__opt b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1rem; }
.gen-mode__opt small{ color:var(--ink-3); font-size:.78rem; }
.gen-mode__opt[aria-pressed="true"]{
  border-color: var(--cat-a);
  background: color-mix(in oklch, var(--cat-a) 14%, var(--bg));
  box-shadow: 0 0 0 1px var(--cat-a) inset;
}
.gen-mode__opt[aria-pressed="true"] small{ color:var(--ink-2); }
.gen-mode__custom{ margin-top:1rem; }
.gen-mode__custom label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink-2); margin-bottom:.5rem; }
.gen-mode__custom textarea{
  width:100%; padding:.85rem 1rem; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); font-family:inherit; resize:vertical; min-height:90px; line-height:1.5;
}
.gen-mode__custom textarea:focus{ outline:2px solid var(--cat-a); outline-offset:1px; }
.adv__meta{ font-family:"Space Grotesk"; font-weight:500; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-left:.4rem; }

/* Full-width warning banner shown inside the Live block when the current category
   doesn't support live (e.g. Drama). Prominent enough to catch the eye the moment
   the user switches to Live, so they never have to click Generate to find out. */
.liveBanner{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:.95rem 1.1rem; margin-bottom:1rem;
  border-radius:14px;
  border:1px solid oklch(78% .16 85 / .45);
  background: linear-gradient(180deg, oklch(78% .16 85 / .14), oklch(78% .16 85 / .06));
  color:var(--ink);
}
.liveBanner__ic{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background: oklch(78% .16 85 / .22); color: oklch(70% .18 75);
}
.liveBanner__ic svg{ width:20px; height:20px; }
.liveBanner__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.15rem; font-size:.9rem; line-height:1.4; }
.liveBanner__body b{ font-weight:700; }
.liveBanner__body span{ color:var(--ink-2); }
.liveBanner .btn{ flex:0 0 auto; align-self:center; }
.liveBanner--warn{
  border-color: oklch(70% .19 55 / .5);
  background: linear-gradient(180deg, oklch(70% .19 55 / .16), oklch(70% .19 55 / .06));
}
.liveBanner--warn .liveBanner__ic{ background: oklch(70% .19 55 / .24); color: oklch(66% .21 42); }

.dropzone{
  border:2px dashed var(--line); border-radius: var(--radius-lg); padding: clamp(2rem,5vw,4rem); text-align:center;
  background: linear-gradient(165deg, oklch(20% 0.05 280 / .6), oklch(18% 0.045 280 / .4));
  transition:.3s var(--ease); position:relative;
}
.dropzone.drag, .dropzone.is-over, .dropzone:hover{ border-color: var(--cat-a); background: linear-gradient(165deg, oklch(24% 0.07 280 / .7), oklch(22% 0.06 282 / .5)); }
.dropzone__icon{ width:72px;height:72px;border-radius:20px; margin:0 auto 1.2rem; display:grid;place-items:center; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); box-shadow:var(--glow); }
.dropzone__icon svg{ width:32px;height:32px;color:#fff; }
.dropzone h3{ font-size: clamp(1.3rem,2.5vw,1.8rem); }
.dropzone p{ color:var(--ink-2); margin:.6rem 0 1.4rem; }
.dropzone__or{ color:var(--ink-3); font-size:.85rem; margin:1rem 0; }
.dropzone__url{ display:flex; gap:.5rem; max-width:480px; margin:0 auto; }
.dropzone__url input{ flex:1; min-height:48px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:0 1rem; font-family:inherit; }
.dropzone__url input:focus{ outline:2px solid var(--cat-a); outline-offset:1px; }

.gen-side{ display:grid; gap:1.2rem; position:sticky; top:88px; }
.panel{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); padding:1.4rem; }
.panel h4{ font-size:1.05rem; display:flex; align-items:center; gap:.5rem; }
.panel__hint{ color:var(--ink-3); font-size:.85rem; margin:.4rem 0 1rem; }
.filemeta{ display:flex; align-items:center; gap:.8rem; padding:.8rem; border-radius:12px; background: oklch(28% .07 280 / .4); border:1px solid var(--line-soft); margin-bottom:1rem; text-align:left; }
.filemeta__thumb{ width:48px;height:36px;border-radius:7px; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); background-size:cover; background-position:center; background-repeat:no-repeat; flex-shrink:0; }
/* When a real first-frame poster has been painted (data-poster-ready
   toggled by the file-picked handlers), enlarge the thumb so the user
   can actually see the frame — matching the poster tiles in Library. */
.filemeta__thumb[data-poster-ready]{ width:96px; height:60px; }
/* Text column MUST have min-width:0 or the long filename below refuses to
   wrap inside a flex parent (default `min-width:auto` = content width),
   which is what caused the subtitle dropzone to burst its container when a
   long torrent-style filename landed. Together with `overflow-wrap:anywhere`
   on the filename this makes filemeta robust to any length. */
.filemeta > div:not(.filemeta__thumb){ min-width:0; flex:1 1 auto; }
.filemeta b{ font-size:.92rem; display:block; overflow-wrap:anywhere; line-height:1.3; }
.filemeta small{ color:var(--ink-3); font-size:.8rem; display:block; margin-top:.15rem; }
/* When rendered inside a dropzone's centered stack, keep the filemeta
   left-aligned but let it span up to the dropzone's usable width so long
   filenames don't force horizontal scroll. */
.dropzone .filemeta{ margin:1.2rem auto 0; max-width:min(560px, 100%); }
/* Picked source video: left-aligned list item with a real poster thumbnail + Replace/Remove */
.fileitem{ display:flex; align-items:center; gap:.85rem; padding:.7rem .8rem; border-radius:12px; background: oklch(28% .07 280 / .4); border:1px solid var(--line-soft); text-align:left; }
.fileitem__thumb{ flex:0 0 auto; width:72px; height:44px; border-radius:8px; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden; }
.fileitem__meta{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:.2rem; }
.fileitem__meta b{ font-size:.9rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fileitem__meta small{ color:var(--ink-3); font-size:.78rem; }
.fileitem__actions{ flex:0 0 auto; display:flex; gap:.4rem; }
@media (max-width:560px){ .fileitem{ flex-wrap:wrap; } .fileitem__actions{ width:100%; justify-content:flex-end; } }

/* advanced settings disclosure */
.adv{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); overflow:hidden; }
.adv__btn{ width:100%; display:flex; align-items:center; gap:.7rem; padding:1.1rem 1.3rem; background:transparent; border:0; color:var(--ink); cursor:pointer; font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.05rem; min-height:56px; }
.adv__btn .caret{ margin-left:auto; transition:transform .3s; }
.adv.open .adv__btn .caret{ transform: rotate(180deg); }
.adv__body{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.adv.open .adv__body{ grid-template-rows: 1fr; }
.adv__inner{ overflow:hidden; }
.adv__pad{ padding: 0 1.3rem 1.4rem; display:grid; gap:1.3rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--ink-2); display:block; margin-bottom:.5rem; }
.segmented{ display:flex; gap:.4rem; flex-wrap:wrap; }
.segmented button{ flex:1; min-width:60px; min-height:44px; padding:.5rem .8rem; border-radius:11px; border:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; font-family:inherit; font-weight:600; transition:.2s; }
.segmented button[aria-pressed="true"]{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); border-color:transparent; color:#fff; }
.range-row{ display:flex; align-items:center; gap:1rem; }
input[type=range]{ flex:1; accent-color: var(--cat-a); height:6px; }
.range-val{ font-family:"Bricolage Grotesque"; font-weight:800; min-width:54px; text-align:right; }
.toggle{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.switch{ position:relative; width:52px; height:30px; flex-shrink:0; }
.switch input{ opacity:0; width:0;height:0; }
.switch span{ position:absolute; inset:0; border-radius:999px; background: oklch(35% .05 280); cursor:pointer; transition:.3s; }
.switch span::before{ content:""; position:absolute; left:3px; top:3px; width:24px;height:24px; border-radius:50%; background:#fff; transition:.3s var(--ease); }
.switch input:checked + span{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); }
.switch input:checked + span::before{ transform: translateX(22px); }
.selectish{ width:100%; min-height:48px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:0 1rem; font-family:inherit; }

/* ============================================================
   REFERENCE UPLOADER — image + audio side by side, one seamless box
   ============================================================ */
.refbox{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  border:1px dashed var(--line); border-radius:16px; overflow:hidden;
  background: linear-gradient(165deg, var(--bg-2), color-mix(in oklch, var(--bg-2) 70%, transparent));
  transition:.25s var(--ease);
}
.refbox:hover{ border-color: var(--cat-a); }
.refhalf{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:.5rem; padding:1.4rem 1.2rem; cursor:pointer; position:relative; background:transparent;
  border:0; color:inherit; font-family:inherit; transition:.2s var(--ease);
}
.refhalf:hover{ background: color-mix(in oklch, var(--cat-a) 8%, transparent); }
.refhalf[aria-pressed="true"]{ background: color-mix(in oklch, var(--cat-a) 14%, transparent); }
.refhalf[aria-pressed="true"] .refhalf__ic{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); color:#fff; border-color:transparent; }
.refhalf + .refhalf{ border-left:1px dashed var(--line); }
.refhalf__ic{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background: var(--bg-3); border:1px solid var(--line-soft); color:var(--cat-a);
}
.refhalf__ic svg{ width:24px; height:24px; }
.refhalf b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:.98rem; color:var(--ink); }
.refhalf small{ font-family:"Space Grotesk"; font-size:.76rem; color:var(--ink-3); line-height:1.35; }
.refhalf .reftag{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cat-a); font-weight:600; }
/* Uploaded reference file: little thumbnail + name so the user sees what was added */
.refthumb{ display:inline-flex; align-items:center; gap:.45rem; max-width:100%; padding:.28rem .5rem .28rem .28rem; border:1px solid var(--line-soft); border-radius:10px; background:var(--bg-3); }
.refthumb__img{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:var(--line-soft); display:grid; place-items:center; color:var(--cat-a); overflow:hidden; }
.refthumb__img--audio svg{ width:16px; height:16px; }
.refthumb__name{ font-family:"Space Grotesk"; font-size:.74rem; color:var(--ink-2); max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Task-detail "Inputs used" block: which video/source + reference image/audio a run used */
.inputsused{ margin-top:1rem; border:1px solid var(--line-soft); border-radius:12px; background:var(--bg-2); overflow:hidden; }
.inputsused>summary{ cursor:pointer; list-style:none; padding:.7rem .9rem; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.85rem; color:var(--ink); }
.inputsused>summary::-webkit-details-marker{ display:none; }
.inputsused>summary::after{ content:"▾"; float:right; color:var(--ink-3); }
.inputsused__body{ padding:.2rem .9rem .9rem; display:flex; flex-direction:column; gap:.8rem; }
.inputgrp{ display:flex; flex-direction:column; gap:.4rem; }
.inputgrp__label{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.inputrow{ display:flex; align-items:center; gap:.55rem; }
.inputrow__ic{ flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; color:var(--cat-a); }
.inputrow__ic svg{ width:18px; height:18px; }
.inputrow__name{ font-size:.85rem; color:var(--ink); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inputrow__src{ flex:0 0 auto; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:.18rem .5rem; border-radius:999px; }
.inputrow__src.is-lib{ background:oklch(62% .14 265 / .16); color:oklch(52% .16 265); }
.inputrow__src.is-up{ background:oklch(70% .13 150 / .18); color:oklch(46% .14 150); }
.inputrow__src.is-url{ background:var(--line-soft); color:var(--ink-2); }
.refthumbs{ display:flex; flex-wrap:wrap; gap:6px; }
@media (max-width:560px){ .refbox{ grid-template-columns:1fr; } .refhalf + .refhalf{ border-left:0; border-top:1px dashed var(--line); } }

/* CHIP SELECTORS — genres / intents */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-family:inherit; font-weight:600;
  font-size:.88rem; padding:.5rem .9rem; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--ink-2); transition:.2s var(--ease);
}
.chip:hover{ border-color: var(--cat-a); color:var(--ink); }
.chip[aria-pressed="true"]{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); border-color:transparent; color:#fff; }
.chip .star{ font-size:.8em; }

/* requirement badge — Optional (neutral) / Required (accent) / Necessary error tone */
.reqbadge{
  display:inline-flex; align-items:center; vertical-align:middle; margin-left:.55rem;
  font-family:"Space Grotesk"; font-weight:700; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.28em .6em; border-radius:999px; border:1px solid var(--line-soft);
  color:var(--ink-3); background:var(--bg-2);
}
.reqbadge.is-required{ color:#fff; border-color:transparent; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); }

/* ============================================================
   FIXED 9:16 CROP EDITOR — live preview + zoom + text overlay + colour
   ============================================================ */
.cropper{ display:grid; grid-template-columns: 300px 1fr; gap:1.6rem; margin-top:1.4rem; align-items:start; }
.cropper--preview-only{ grid-template-columns:300px; justify-content:center; }
@media (max-width:760px){ .cropper{ grid-template-columns:1fr; } }

/* --- preview stage (9:16) --- */
.cropstage{ justify-self:center; width:300px; max-width:100%; }
.cropframe{
  position:relative; width:100%; aspect-ratio:9/16; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:#000; box-shadow:var(--glow);
}
.cropframe__img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(125deg, oklch(38% 0.13 var(--cat-h, 300) / .9), oklch(20% 0.08 var(--cat-h, 300) / .9)),
    repeating-linear-gradient(90deg, oklch(100% 0 0 / .05) 0 2px, transparent 2px 60px);
  transition: background-size .12s linear;
}
/* When a real video frame has been painted in, drive the crop with background-size so
   0% = source fully visible (letterbox) and 100% = height-fill cover, mirroring the
   backend _center_zoom_blur_frame formula. --crop-fg-width is set by
   applyVerticalZoomToPreview in verticalPreview.ts. */
.cropframe__img[data-preview-ready="true"]{
  background-size: var(--crop-fg-width, 100%) auto;
}
/* Brightly mark the real source-video boundary. Some uploaded videos contain
   baked-in black bars, which otherwise look like empty preview space and make
   height-fill at 100% appear incorrect. */
.cropframe__img[data-preview-ready="true"]::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:var(--crop-fg-width, 100%);
  aspect-ratio:var(--crop-source-ar, 1.777778);
  transform:translate(-50%, -50%);
  box-sizing:border-box;
  border:2px solid oklch(82% .18 190 / .95);
  box-shadow:
    0 0 0 1px oklch(10% 0 0 / .65),
    0 0 10px oklch(82% .18 190 / .7);
  pointer-events:none;
  z-index:1;
}
/* AI-tracking background layer: user backdrop behind the subject (scale/x/y controlled via inline styles) */
.cropframe__bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
/* When a custom background is set, keep the video above it while still honouring
   the main Zoom slider's --crop-fg-width value. At 0% the 100%-wide foreground
   naturally leaves the custom backdrop visible in the letterbox area. */
.cropframe__img--overlay{ background-size:var(--crop-fg-width, 100%) auto !important; background-repeat:no-repeat !important; background-position:center !important; transform:none !important; }
.cropframe__safe{ position:absolute; inset:7% 6%; border:1px dashed oklch(100% 0 0 / .28); border-radius:8px; pointer-events:none; }
/* Brand-logo overlay on the crop preview. Position/width/opacity are set
   inline by applyVerticalLogoPreview; this only supplies the base layout. */
.cropframe__logo{ position:absolute; height:auto; object-fit:contain; pointer-events:none; z-index:4; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.cropcap{
  position:absolute; left:0; right:0; padding:0 8%; text-align:center; pointer-events:none;
  font-family:"Bricolage Grotesque"; font-weight:800; line-height:1.1; word-break:break-word;
  text-shadow:0 2px 14px oklch(0% 0 0 / .55);
}
.cropcap--top{ top:6%; }
.cropcap--bottom{ bottom:6%; }
.cropcap[data-align="left"]{ text-align:left; }
.cropcap[data-align="right"]{ text-align:right; }
.cropstage__meta{ margin-top:.7rem; text-align:center; font-family:"Space Grotesk"; font-size:.78rem; color:var(--ink-3); }

/* --- phone chrome around the 9:16 preview (Pulse "4 Aug" design) ---
   Purely presentational: the live preview stays in `.cropframe`, so every data
   hook on it (first-frame poster, zoom, background layer, logo overlay, caption
   overlays, safe-area guide) keeps working untouched. The bezel just makes it
   read as "this is what it looks like on a phone".
   Unlike the design mockup we do NOT pin a 150px width — the preview has to stay
   big enough to actually judge the crop, so it fills the stage column instead. */
.phone{
  width:100%; border:8px solid oklch(28% 0.03 280); border-radius:26px;
  background:#000; overflow:hidden; box-shadow:var(--shadow);
}
.phone__notch{ height:16px; background:oklch(28% 0.03 280); position:relative; }
.phone__notch::after{
  content:""; position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:44px; height:5px; border-radius:99px; background:#000;
}
/* The phone always stays 9:16. Square, 4:5 and landscape exports are centred
   inside that screen so the selected ratio changes the frame, not the device. */
.phone__screen{
  position:relative; width:100%; aspect-ratio:9/16; overflow:hidden;
  background:#000; display:grid; place-items:center;
}
/* Inside the bezel the preview is the bare export frame. */
.phone .cropframe{ border:0; border-radius:0; box-shadow:none; }

/* --- controls column --- */
.cropctl{ display:grid; gap:1.25rem; }
.cropctl__grp{ border:1px solid var(--line-soft); border-radius:14px; padding:1rem 1.1rem; background:var(--bg-2); }
.cropctl__grp > h5{
  margin:0 0 .8rem; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.95rem; color:var(--ink);
  display:flex; align-items:center; gap:.5rem;
}
.cropctl__grp > h5 .tnum{ margin-left:auto; font-family:"Space Grotesk"; font-weight:600; font-size:.8rem; color:var(--cat-a); }

/* zoom + size sliders reuse range styles; show % value */
.cropctl .range-row{ display:flex; align-items:center; gap:.9rem; }
.cropctl .range-row input[type="range"]{ flex:1; }
.cropctl .range-val{ min-width:48px; text-align:right; font-family:"Space Grotesk"; font-weight:600; color:var(--ink-2); }

/* collapsible customisation box (text overlay) — minimalist */
.cropfold{ border:1px solid var(--line-soft); border-radius:14px; background:var(--bg-2); overflow:hidden; }
.cropfold > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6rem;
  padding:.95rem 1.1rem; user-select:none;
}
.cropfold > summary::-webkit-details-marker{ display:none; }
.cropfold__title{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:.95rem; color:var(--ink); }
.cropfold__hint{ font-family:"Space Grotesk"; font-size:.76rem; color:var(--ink-3); margin-left:.1rem; }
.cropfold__chev{ width:18px; height:18px; color:var(--ink-3); margin-left:auto; transition:transform .2s var(--ease); }
.cropfold[open] .cropfold__chev{ transform:rotate(180deg); }
.cropfold__body{ padding:0 1.1rem 1.1rem; }

/* per-caption text rows */
.caprow{ display:grid; gap:.7rem; }
.caprow + .caprow{ margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--line-soft); }
.caprow__head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.caprow__head label{ font-family:"Space Grotesk"; font-weight:600; font-size:.82rem; color:var(--ink-2); }
.caprow__tools{ display:inline-flex; align-items:center; gap:.5rem; }
.caprow input[type="text"]{
  width:100%; min-height:44px; border-radius:11px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); padding:0 .9rem; font-family:inherit;
}
.caprow input[type="text"]:focus{ outline:2px solid var(--cat-a); outline-offset:1px; }
.caprow__opts{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.caprow select.selectish{ min-height:42px; }

/* alignment segmented control */
.alignseg{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.alignseg button{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  background:transparent; border:0; color:var(--ink-3); cursor:pointer;
}
.alignseg button + button{ border-left:1px solid var(--line); }
.alignseg button[aria-pressed="true"]{ background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); color:#fff; }
.alignseg svg{ width:18px; height:18px; }

/* per-side colour popover (palette icon → dropdown) */
.popcolor{ position:relative; display:inline-flex; }
.popcolor__btn{
  display:inline-flex; align-items:center; gap:.35rem; height:38px; padding:0 .5rem 0 .4rem;
  border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--ink-2); cursor:pointer;
  transition:.15s var(--ease);
}
.popcolor__btn:hover{ border-color:var(--cat-a); color:var(--ink); }
.popcolor__btn[aria-expanded="true"]{ border-color:var(--cat-a); color:var(--ink); }
.popcolor__chip{ width:18px; height:18px; border-radius:5px; border:1px solid var(--line); flex-shrink:0; }
.popcolor__btn svg{ width:17px; height:17px; }
.popcolor__menu{
  position:absolute; top:calc(100% + .45rem); right:0; z-index:30; width:max-content; min-width:178px;
  padding:.75rem; border:1px solid var(--line); border-radius:13px; background:var(--panel);
  box-shadow:0 18px 44px oklch(0% 0 0 / .4); display:grid; gap:.65rem;
}
.popcolor__menu[hidden]{ display:none; }

/* colour palette + hex */
.swatches{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; max-width:172px; }
.swatchdot{
  width:26px; height:26px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid var(--line); transition:.15s var(--ease);
}
.swatchdot:hover{ transform:scale(1.08); }
.swatchdot[aria-pressed="true"]{ border-color:var(--ink); box-shadow:0 0 0 2px var(--panel); }
.hexwrap{ display:flex; align-items:center; gap:.4rem; padding-top:.6rem; border-top:1px dashed var(--line-soft); }
.hexwrap .hexpreview{ width:28px; height:28px; border-radius:7px; border:1px solid var(--line); flex-shrink:0; }
.hexwrap input{
  flex:1; min-width:0; width:84px; min-height:38px; border-radius:9px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); padding:0 .65rem; font-family:"Space Grotesk"; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
}
.hexwrap input:focus{ outline:2px solid var(--cat-a); outline-offset:1px; }
.hexwrap input.is-bad{ border-color:oklch(64% 0.24 322); }
.hexenter{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0;
  border:0; border-radius:9px; cursor:pointer; color:#fff; background:linear-gradient(120deg,var(--cat-a),var(--cat-b));
}
.hexenter svg{ width:16px; height:16px; }

/* gating note shown under category fields */
.gate-note{
  display:flex; align-items:flex-start; gap:.5rem; margin-top:.7rem; padding:.6rem .85rem;
  border-radius:11px; border:1px solid var(--line-soft);
  background: color-mix(in oklch, var(--cat-a) 7%, var(--bg-2)); color:var(--ink-2);
  font-size:.82rem; line-height:1.45;
}
.gate-note svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--cat-a); }
.gate-note.is-bad{ border-color: color-mix(in oklch, oklch(64% 0.24 322) 50%, var(--line)); background: color-mix(in oklch, oklch(64% 0.24 322) 10%, var(--bg-2)); }
.gate-note.is-bad svg{ color: oklch(72% 0.20 320); }

/* player fields grid (football → player highlights) */
.player-fields{ display:grid; grid-template-columns: repeat(3,1fr); gap:.8rem; margin-top:.9rem; }
.player-fields input{ width:100%; min-height:46px; border-radius:11px; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:0 .9rem; font-family:inherit; }
.player-fields input:focus{ outline:2px solid var(--cat-a); outline-offset:1px; }
@media (max-width:560px){ .player-fields{ grid-template-columns:1fr; } }
[hidden]{ display:none !important; }

/* progress / results */
.stage{ margin-bottom: 4rem; }
.processing{ border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(2rem,5vw,3.5rem); background:var(--bg-2); text-align:center; }
.processing h3{ font-size: clamp(1.4rem,3vw,2rem); }
.processing p{ color:var(--ink-2); margin:.5rem 0 1.8rem; }
.progress{ height:12px; border-radius:999px; background: oklch(30% .05 280); overflow:hidden; max-width:560px; margin:0 auto; }
.progress > i{ display:block; height:100%; width:0%; border-radius:999px; background:var(--grad); transition: width .3s linear; }
.progress__bar{ height:100%; width:0%; border-radius:999px; background:var(--grad); transition: width .3s linear; }
.proglog{ margin: 1.6rem auto 0; max-width:560px; text-align:left; display:grid; gap:.5rem; }
.proglog li{ display:flex; align-items:center; gap:.6rem; color:var(--ink-3); font-size:.9rem; transition:color .3s; }
.proglog li.done{ color:var(--ink); }
.proglog li .dotc{ width:18px;height:18px;border-radius:50%; border:2px solid var(--line); flex-shrink:0; display:grid;place-items:center; }
.proglog li.done .dotc{ background:var(--grad); border-color:transparent; }
.proglog li.done .dotc svg{ width:11px;height:11px;color:#fff; }

.results-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom:1.4rem; }
.results-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
.clipcard{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-2); transition: transform .35s var(--ease), border-color .35s; }
.clipcard:hover{ transform: translateY(-5px); border-color: var(--cat-a); }
.clipcard__media{ aspect-ratio:16/9; position:relative; display:grid; place-items:center;
  background: radial-gradient(circle at 60% 35%, oklch(40% .13 282 / .55), transparent 55%), linear-gradient(135deg, oklch(24% .07 280), oklch(22% .07 282)); }
.clipcard__media .play{ width:52px;height:52px;border-radius:50%; background: oklch(14% .05 280 / .65); backdrop-filter: blur(4px); display:grid;place-items:center; border:1px solid var(--line); }
.clipcard__media .play svg{ width:20px;height:20px;color:#fff;margin-left:2px; }
.clipcard__dur{ position:absolute; right:8px; bottom:8px; font-size:.72rem; background:oklch(12% .05 280 / .8); padding:.15rem .45rem; border-radius:6px; }
.clipcard__score{ position:absolute; left:8px; top:8px; font-size:.74rem; font-weight:700; background:var(--grad); padding:.25rem .55rem; border-radius:999px; color:#fff; }
.clipcard__body{ padding:1rem 1.1rem 1.2rem; }
.clipcard__body h4{ font-size:1.05rem; }
.clipcard__body p{ color:var(--ink-3); font-size:.85rem; margin:.3rem 0 1rem; }
.clipcard__acts{ display:flex; gap:.5rem; }
.clipcard__acts .btn{ flex:1; padding:.6rem; font-size:.85rem; min-height:44px; }

/* ============================================================
   GENERATOR PIPELINE — run panel, review/swipe, final stitch
   ============================================================ */
/* ---- run panel (stepped progress + force stop) ---- */
.runpanel{ border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(1.4rem,3.5vw,2.4rem); background: linear-gradient(160deg, color-mix(in oklch, var(--bg-2) 92%, transparent), color-mix(in oklch, var(--bg-3) 86%, transparent)); }
.runpanel__top{ display:flex; justify-content:space-between; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.runpanel__topMain{ flex:1 1 240px; min-width:0; }
.runpanel__topMain .eyebrow{ display:block; }
.runpanel__topMain strong{ display:block; margin-top:.35rem; line-height:1.35; }
.runpanel__topActions{ flex:0 0 auto; align-self:center; }
.gen-force-row{ display:flex; gap:.85rem; align-items:center; flex-wrap:wrap; }
.runpanel__sub{ color:var(--ink-2); margin:.4rem 0 0; font-size:.95rem; }
.runstats{ display:flex; gap: clamp(1rem,3vw,2.2rem); flex-wrap:wrap; }
.runstat b{ font-family:"Bricolage Grotesque"; font-size: clamp(1.3rem,2.6vw,1.8rem); display:block; letter-spacing:-.02em; }
.runstat small{ color:var(--ink-3); font-size:.7rem; letter-spacing:.12em; }
.runpanel__bar{ max-width:none; margin: 0 0 1.4rem; }
.runpanel.is-stopped .progress__bar{ background: var(--ink-3); }
.pipe{ display:flex; align-items:stretch; gap:.4rem; flex-wrap:wrap; }
.pipe__step{ flex:1 1 110px; min-width:104px; display:flex; flex-direction:column; gap:.25rem; align-items:flex-start; border:1px solid var(--line-soft); border-radius:14px; padding:.8rem .85rem; background: color-mix(in oklch, var(--bg) 40%, transparent); transition: border-color .3s, background .3s, opacity .3s; opacity:.62; }
.pipe__step.is-done{ opacity:1; border-color: color-mix(in oklch, var(--violet) 40%, transparent); }
.pipe__step.is-active{ opacity:1; border-color: var(--violet-hi); box-shadow: 0 0 0 1px color-mix(in oklch, var(--violet) 40%, transparent), 0 12px 30px -16px color-mix(in oklch, var(--violet) 60%, transparent); background: color-mix(in oklch, var(--violet) 12%, transparent); }
.pipe__ic{ width:24px;height:24px;border-radius:8px; display:grid;place-items:center; background: color-mix(in oklch, var(--bg) 60%, transparent); border:1px solid var(--line-soft); margin-bottom:.15rem; }
.pipe__ic svg{ width:14px;height:14px; }
.pipe__step.is-done .pipe__ic{ background:var(--grad); border-color:transparent; color:#fff; }
.pipe__step.is-active .pipe__ic{ background: var(--violet); border-color:transparent; color:#fff; }
.pipe__step.is-active .pipe__ic svg{ animation: spin 1.4s linear infinite; }
.pipe__n{ font-size:.78rem; font-weight:700; }
.pipe__t{ font-size:.74rem; font-weight:800; letter-spacing:.06em; }
.pipe__d{ font-size:.72rem; color:var(--ink-3); }
.pipe__sep{ display:none; }
.runpanel__foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.3rem; }
.runpanel__hint{ color:var(--ink-3); font-size:.85rem; }
.runpanel__hint b{ color:var(--ink-2); }
.runpanel__liveRunway{ max-width:none; margin:0 0 1.2rem; text-align:left; }
.runpanel__liveHead{ display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-bottom:.75rem; }
.runpanel__liveMeta{ display:flex; flex-wrap:wrap; gap:.55rem 1rem; margin-top:.75rem; font-size:.82rem; color:var(--ink-3); font-family:var(--mono, ui-monospace, monospace); }
.runpanel__liveMeta strong{ color:var(--ink-2); font-weight:600; }
.runpanel__liveWarn{ margin:.75rem 0 0; color:var(--warn, #f59e0b); font-size:.85rem; }
.progress--live{ max-width:none; margin:0; background: color-mix(in oklch, var(--warn, #f59e0b) 18%, oklch(30% .05 280)); }
.progress--live > i{ background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.liveBadge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; color:#fcd34d; background: color-mix(in oklch, #f59e0b 16%, transparent); border:1px solid color-mix(in oklch, #f59e0b 35%, transparent); }
.btn--stop{ --b: linear-gradient(120deg, oklch(56% 0.21 300), oklch(52% 0.22 322)); padding:.6rem 1.1rem; min-height:42px; font-size:.85rem; }

/* ---- review / swipe (overhauled, no-scroll layout) ---- */
.review__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.review__lead{ color:var(--ink-2); margin:.4rem 0 0; font-size:.92rem; max-width:52ch; }
.review__headr{ display:flex; align-items:center; gap:.8rem; }
.review__count{ color:var(--ink-3); font-size:.9rem; white-space:nowrap; }
.review__count b{ color:var(--ink); font-size:1.1rem; }
.chipbtn{ border:1px solid var(--line); background: color-mix(in oklch, var(--bg-2) 80%, transparent); color:var(--ink-2); border-radius:999px; padding:.5rem .95rem; font: inherit; font-size:.82rem; cursor:pointer; transition: border-color .25s, color .25s, background .25s; min-height:40px; }
.chipbtn:hover{ border-color: var(--violet-hi); color:var(--ink); }

/* options as a side dropdown popover */
.review__opts{ position:relative; }
.iconbtn{ display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--line); background: color-mix(in oklch, var(--bg-2) 80%, transparent); color:var(--ink-2); border-radius:11px; padding:.5rem .8rem; font:inherit; font-size:.82rem; min-height:40px; cursor:pointer; transition:border-color .25s,color .25s; }
.iconbtn svg{ width:18px;height:18px; }
.iconbtn:hover{ border-color:var(--violet-hi); color:var(--ink); }
.optsmenu{ position:absolute; right:0; top:calc(100% + .5rem); z-index:30; width:min(280px,84vw); padding:1rem; border:1px solid var(--line); border-radius:16px; background: color-mix(in oklch, var(--bg-2) 96%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow); }
.optsmenu__lab{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem; }
.optsmenu__row{ display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--ink-2); font:inherit; font-size:.9rem; padding:.55rem .6rem; border-radius:9px; cursor:pointer; transition:background .2s,color .2s; }
.optsmenu__row:hover{ background: color-mix(in oklch, var(--violet) 14%, transparent); color:var(--ink); }
.optsmenu__sep{ height:1px; background:var(--line-soft); margin:.7rem 0; }
.optsmenu__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:.7rem; }
.optsmenu__apply{ width:100%; border:1px solid var(--line); background: color-mix(in oklch, var(--violet) 16%, transparent); color:var(--ink); border-radius:10px; padding:.55rem; font:inherit; font-size:.85rem; cursor:pointer; transition:background .2s; }
.optsmenu__apply:hover{ background: color-mix(in oklch, var(--violet) 26%, transparent); }
.minif{ display:flex; flex-direction:column; gap:.3rem; font-size:.78rem; color:var(--ink-3); }
.minif input{ width:100%; min-height:40px; border-radius:10px; border:1px solid var(--line); background: oklch(16% .04 280); color:var(--ink); padding:.5rem .7rem; font: inherit; }

.swipe{ position:relative; display:grid; place-items:stretch; }
.cliprev{ border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(1rem,2.5vw,1.5rem); background: linear-gradient(165deg, color-mix(in oklch, var(--bg-2) 90%, transparent), color-mix(in oklch, var(--bg-3) 82%, transparent)); touch-action: pan-y; user-select:none; will-change: transform; }
.cliprev.is-grab{ cursor:grabbing; }
.cliprev.is-keep{ border-color: color-mix(in oklch, var(--violet) 42%, transparent); }
/* two-column: media left, controls right — no vertical scrolling needed */
.cliprev__main{ display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(1rem,2.5vw,1.6rem); align-items:start; }
.cliprev.is-vert .cliprev__main{ grid-template-columns: minmax(0,.62fr) minmax(0,1fr); }
.cliprev__stage{ position:relative; aspect-ratio:16/9; width:100%; max-height:min(56vh,460px); margin:0 auto; border-radius:16px; overflow:hidden; display:grid; place-items:center;
  background: radial-gradient(circle at 60% 35%, oklch(40% .13 280 / .55), transparent 55%), linear-gradient(135deg, oklch(20% .06 280), oklch(16% .05 282)); border:1px solid var(--line-soft); }
.cliprev.is-vert .cliprev__stage{ justify-self:center; }
.cliprev__badge{ position:absolute; left:10px; top:10px; font-size:.74rem; font-weight:700; background:var(--grad); color:#fff; padding:.25rem .6rem; border-radius:999px; }
.cliprev__ar{ position:absolute; right:10px; top:10px; font-size:.68rem; font-weight:700; letter-spacing:.06em; color:var(--ink-2); background: oklch(12% .05 280 / .7); border:1px solid var(--line-soft); padding:.22rem .5rem; border-radius:7px; }
.cliprev__play{ width:60px;height:60px;border-radius:50%; background: oklch(14% .05 280 / .6); backdrop-filter: blur(5px); border:1px solid var(--line); display:grid;place-items:center; z-index:2; }
.cliprev__play svg{ width:24px;height:24px;color:#fff;margin-left:3px; }
.cliprev__scan{ position:absolute; left:0; right:0; top:0; height:34%; background: linear-gradient(180deg, oklch(70% .16 290 / .22), transparent); animation: clipScan 3.4s var(--ease-out) infinite; pointer-events:none; }
@keyframes clipScan{ 0%{ transform: translateY(-10%); opacity:.2; } 50%{ transform: translateY(210%); opacity:.9; } 100%{ transform: translateY(-10%); opacity:.2; } }
.cliprev__hintL,.cliprev__hintR{ position:absolute; top:12px; font-weight:800; font-size:.85rem; letter-spacing:.08em; padding:.3rem .6rem; border-radius:8px; opacity:0; transition:opacity .15s; z-index:3; }
.cliprev__hintL{ right:12px; color: oklch(72% 0.20 320); border:2px solid oklch(64% 0.22 320); }
.cliprev__hintR{ left:12px; color: var(--violet-hi); border:2px solid var(--violet-hi); }
.cliprev.hint-skip .cliprev__hintL{ opacity:1; }
.cliprev.hint-keep .cliprev__hintR{ opacity:1; }
.cliprev__info{ display:flex; flex-direction:column; gap:.7rem; }
.cliprev__bar{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; font-size:.92rem; }
.cliprev__no{ font-weight:800; }
.cliprev__file{ color:var(--ink-3); font-size:.82rem; }
/* BIG prominent Keep toggle */
.keepbig{ display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:15px; background: color-mix(in oklch, var(--bg) 40%, transparent); cursor:pointer; transition:border-color .25s, background .25s; }
.keepbig input{ position:absolute; opacity:0; width:0; height:0; }
.keepbig__box{ flex-shrink:0; width:34px; height:34px; border-radius:10px; border:2px solid var(--line); display:grid; place-items:center; transition:background .2s, border-color .2s, transform .15s; }
.keepbig__box svg{ width:20px; height:20px; color:#fff; opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s; }
.keepbig__tx b{ display:block; font-size:.98rem; }
.keepbig__tx small{ color:var(--ink-3); font-size:.78rem; }
.keepbig.is-on{ border-color: color-mix(in oklch, var(--violet) 55%, transparent); background: color-mix(in oklch, var(--violet) 13%, transparent); }
.keepbig.is-on .keepbig__box{ background: var(--grad); border-color:transparent; }
.keepbig.is-on .keepbig__box svg{ opacity:1; transform:scale(1); }
.cliprev__desc{ color:var(--ink-2); font-size:.9rem; margin:0; }
.trim{ position:relative; height:14px; border-radius:999px; background: oklch(28% .05 280); margin:.6rem 0 .5rem; }
.trim__fill{ position:absolute; top:0; bottom:0; background:var(--grad); border-radius:999px; }
.trim__h{ position:absolute; top:50%; width:18px; height:30px; transform: translate(-50%,-50%); border-radius:7px; background: var(--ink); border:2px solid var(--violet); cursor:ew-resize; touch-action:none; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.trim__lab{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-3); font-family: ui-monospace, monospace; }
.trim__sel{ color:var(--violet-hi); font-weight:600; }
/* manual min:sec time inputs */
.timefields{ display:flex; align-items:flex-end; gap:.5rem; flex-wrap:wrap; }
.timef{ display:flex; flex-direction:column; gap:.25rem; font-size:.72rem; letter-spacing:.04em; color:var(--ink-3); }
.timef input{ width:84px; min-height:42px; border-radius:10px; border:1px solid var(--line); background: oklch(16% .04 280); color:var(--ink); padding:.5rem .65rem; font: inherit; font-family: ui-monospace, monospace; text-align:center; }
.timef input:focus{ outline:none; border-color:var(--violet-hi); }
.timef__arr{ color:var(--ink-3); padding-bottom:.7rem; }
.timef__set{ min-height:42px; border:1px solid var(--line); background: color-mix(in oklch, var(--violet) 16%, transparent); color:var(--ink); border-radius:10px; padding:0 1rem; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; transition:background .2s; }
.timef__set:hover{ background: color-mix(in oklch, var(--violet) 28%, transparent); }

/* per-clip buffer row */
.clipbuf{ display:flex; align-items:flex-end; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; padding-top:.7rem; border-top:1px dashed var(--line-soft); }
.clipbuf__lab{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); flex-basis:100%; }
.clipbuf__f{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.03em; color:var(--ink-3); }
.clipbuf__f input{ width:62px; min-height:40px; border-radius:10px; border:1px solid var(--line); background: oklch(16% .04 280); color:var(--ink); padding:.45rem .55rem; font:inherit; font-family: ui-monospace, monospace; text-align:center; }
.clipbuf__f input:focus{ outline:none; border-color:var(--violet-hi); }
.clipbuf__set{ min-height:40px; margin-left:auto; border:1px solid var(--line); background: color-mix(in oklch, var(--violet) 14%, transparent); color:var(--ink); border-radius:10px; padding:0 .9rem; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; transition:background .2s; }
.clipbuf__set:hover{ background: color-mix(in oklch, var(--violet) 26%, transparent); }

/* freshly-generated run badge + empty state */
.prevrun__fresh{ display:inline-block; margin-top:.25rem; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--grad); border-radius:999px; padding:.1rem .5rem; }
.runs-empty{ color:var(--ink-3); font-size:.9rem; text-align:center; padding:1.2rem 0; }

/* single minimalistic bottom bar */
.reviewbar{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-top:1.1rem; padding:.7rem; border:1px solid var(--line-soft); border-radius:16px; background: color-mix(in oklch, var(--bg-2) 60%, transparent); }
.reviewbar__nav, .reviewbar__act, .reviewbar__go{ display:flex; align-items:center; gap:.5rem; }
.navbtn{ border:1px solid var(--line); background: color-mix(in oklch, var(--bg-2) 80%, transparent); color:var(--ink); border-radius:12px; min-height:46px; min-width:46px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer; padding:0 .9rem; font:inherit; font-weight:700; font-size:.88rem; transition: border-color .25s, background .25s; }
.navbtn svg{ width:18px;height:18px; }
.navbtn:hover{ border-color: var(--violet-hi); }
.navbtn--keep{ background: var(--violet); border-color:transparent; color:#fff; }
.navbtn--keep:hover{ background: var(--violet-hi); }
.navbtn--skip{ color: oklch(80% 0.14 320); border-color: color-mix(in oklch, oklch(64% 0.22 320) 50%, transparent); }
.review__pos{ color:var(--ink-3); font-size:.85rem; min-width:60px; text-align:center; font-family: ui-monospace, monospace; }

/* ---- final stitch + downloads ---- */
.final__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.final__h{ font-size: clamp(1.7rem,4vw,2.6rem); margin-top:.45rem; }
.final__sub{ color:var(--ink-2); margin:.4rem 0 0; }
.final__grid{ display:grid; grid-template-columns: 1.5fr .9fr; gap:1.2rem; }
.final__preview{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; display:grid; place-items:center;
  background: radial-gradient(circle at 50% 35%, oklch(42% .14 288 / .5), transparent 58%), linear-gradient(135deg, oklch(18% .06 280), oklch(13% .05 282)); border:1px solid var(--line); }
.final__badge{ position:absolute; left:14px; top:12px; font-size:.72rem; letter-spacing:.14em; color:var(--ink-3); }
.final__play{ width:74px;height:74px;border-radius:50%; background: oklch(16% .05 280 / .6); backdrop-filter: blur(6px); border:1px solid var(--line); display:grid;place-items:center; }
.final__play svg{ width:28px;height:28px;color:#fff;margin-left:3px; }
.final__cap{ position:absolute; bottom:12px; left:14px; color:var(--ink-2); font-size:.85rem; font-family: ui-monospace, monospace; }
.final__side{ border:1px solid var(--line); border-radius:var(--radius-lg); background: color-mix(in oklch, var(--bg-2) 80%, transparent); padding:.6rem; overflow:hidden; }
.finlist{ display:grid; gap:.25rem; max-height: 100%; overflow:auto; }
.finrow{ display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:10px; font-size:.86rem; }
.finrow:hover{ background: color-mix(in oklch, var(--violet) 8%, transparent); }
.finrow__n{ width:22px;height:22px;border-radius:6px; background:var(--grad); color:#fff; display:grid;place-items:center; font-size:.74rem; font-weight:700; flex-shrink:0; }
.finrow__t{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.finrow__d{ color:var(--ink-3); font-family: ui-monospace, monospace; font-size:.78rem; }
.finrow__s{ color:var(--violet-hi); font-weight:700; font-size:.82rem; }
.final__dl{ display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-top:1.4rem; }
.final__more{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line-soft); }

@keyframes spin{ to{ transform: rotate(360deg); } }
/* inline button spinner (e.g. Upload to library) */
.btnspin{ display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-right:.45rem; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
/* library upload overlay — covers the whole "Pick from My Library" pane while uploading */
.libupload-overlay{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; border-radius:inherit; background:color-mix(in oklch, var(--bg-2) 78%, transparent); backdrop-filter:blur(2px); }
.libupload-overlay__box{ display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; color:var(--ink); }
.libupload-overlay__box .btnspin{ width:26px; height:26px; border-width:3px; margin:0 0 .2rem; color:var(--cat-a); }
.libupload-overlay__box small{ color:var(--ink-3); }
@media (prefers-reduced-motion: reduce){ .pipe__step.is-active .pipe__ic svg{ animation:none; } .btnspin{ animation:none; } }

/* ---- mobile fluidity for the whole flow ---- */
@media (max-width:760px){
  .runpanel__top{ flex-direction:column; gap:.9rem; }
  .runstats{ width:100%; justify-content:space-between; gap:1rem; }
  .pipe{ gap:.5rem; }
  .pipe__step{ flex:1 1 calc(50% - .5rem); min-width:0; }
  .final__grid{ grid-template-columns:1fr; }
  .final__side{ max-height:240px; }
  /* review collapses to single column, controls below the media */
  .cliprev__main{ grid-template-columns:1fr; }
  .cliprev.is-vert .cliprev__main{ grid-template-columns:1fr; }
  .cliprev__stage{ max-height:min(48vh,420px); width:auto; }
  .cliprev.is-vert .cliprev__stage{ max-width:62vw; }
  .reviewbar{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .reviewbar__nav, .reviewbar__act, .reviewbar__go{ justify-content:center; }
  .reviewbar__act .navbtn, .reviewbar__go .btn{ flex:1; }
  .review__pos{ flex:1; }
}
@media (max-width:460px){
  .final__dl .btn, .final__dl .chipbtn{ flex:1 1 100%; }
  .timefields{ justify-content:space-between; }
}

/* ============================================================
   INDEX SHOWCASE — looping category video previews + rotator
   ============================================================ */
/* showcase stacked blocks */
.showblock{ margin-top:3.4rem; }
.showblock:first-of-type{ margin-top:2.2rem; }
.showblock__h{ display:flex; align-items:baseline; gap:.7rem; }
.showblock__n{ font-family:"Anton", sans-serif; font-size:1.15rem; color:var(--violet-hi); letter-spacing:.04em; }
.showblock__h h3{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.35rem; letter-spacing:-.02em; }
.showblock__p{ color:var(--ink-2); margin:.35rem 0 1.25rem; max-width:74ch; }

/* shared mini video-frame */
.vf{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:linear-gradient(135deg,var(--cat-a),var(--cat-b)); display:grid; place-items:center; }
.vf__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.vf::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 30% 20%, oklch(100% 0 0 / .16), transparent 60%); }
.vf__scan{ position:absolute; left:0; right:0; top:0; height:32%; background:linear-gradient(180deg, oklch(90% .1 300 / .22), transparent); animation:showScan 4.2s var(--ease-out) infinite; }
.vf__play{ position:relative; z-index:2; width:52px;height:52px;border-radius:50%; background:oklch(100% 0 0 / .18); border:1.5px solid oklch(100% 0 0 / .55); display:grid;place-items:center; color:#fff; }
.vf__play svg{ width:20px;height:20px;margin-left:2px; }
.vf__lab{ position:absolute; left:12px; bottom:12px; z-index:3; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.9rem; color:#fff; text-shadow:0 1px 8px oklch(0% 0 0 / .5); }
.vf__badge{ position:absolute; left:12px; top:12px; z-index:3; font-size:.72rem; font-weight:700; background:oklch(10% .05 280 / .6); border:1px solid var(--line-soft); color:#fff; padding:.26rem .6rem; border-radius:999px; }
.vf__ar{ position:absolute; right:12px; top:12px; z-index:3; font-size:.66rem; font-weight:700; letter-spacing:.05em; color:var(--ink-2); background:oklch(12% .05 280 / .7); border:1px solid var(--line-soft); padding:.24rem .5rem; border-radius:8px; }
@keyframes showScan{ 0%{ transform: translateY(-15%); opacity:.2; } 50%{ transform: translateY(260%); opacity:.85; } 100%{ transform: translateY(-15%); opacity:.2; } }

/* 1 · combined roulette / coverflow deck (landscape 16:9 + vertical 9:16) */
.rcar{ position:relative; height:342px; perspective:1500px; perspective-origin:50% 46%; margin-top:.4rem; overflow:hidden; }
.rcar__stage{ position:absolute; inset:0; transform-style:preserve-3d; }
/* every deck card shares the same coverflow base positioning + transition */
.rcar__stage > *{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transform-origin:center center; transition:transform .62s var(--ease-out), opacity .62s var(--ease-out), filter .62s var(--ease-out); will-change:transform,opacity; cursor:pointer; }
.rcard{ height:270px; aspect-ratio:16/9; }
.rcard.is-vert{ aspect-ratio:9/16; height:270px; }
.rcard .vf{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.rcar__stage > .is-active{ cursor:default; }
.rcar__stage > .is-active .vf{ box-shadow:var(--shadow), 0 0 0 1px oklch(100% 0 0 / .12), var(--glow); }
/* nav arrows */
.rcar__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:30; width:46px;height:46px;border-radius:50%; border:1px solid var(--line); background:oklch(15% .04 280 / .68); backdrop-filter:blur(8px); color:var(--ink); display:grid;place-items:center; cursor:pointer; transition:background .22s, border-color .22s, color .22s; }
.rcar__nav:hover{ background:var(--grad); border-color:transparent; color:#fff; }
.rcar__nav svg{ width:22px;height:22px; }
.rcar__nav.prev{ left:6px; } .rcar__nav.next{ right:6px; }
@media(max-width:560px){ .rcar__nav.prev{ left:2px; } .rcar__nav.next{ right:2px; } }
/* dots */
.rcar__dots{ display:flex; gap:.42rem; justify-content:center; margin-top:1.15rem; flex-wrap:wrap; }
.rcar__dots i{ width:7px;height:7px;border-radius:50%; background:var(--line); cursor:pointer; transition:width .3s, background .3s; }
.rcar__dots i.on{ width:22px; border-radius:99px; background:var(--grad); }
@media(max-width:640px){ .rcar{ height:288px; perspective:1100px; } .rcard,.rcard.is-vert{ height:214px; } }

/* --- score deck variant (Viral & Hook): bigger 9:16 + 16:9 clips, overlaid ring + caption --- */
.rcar--score{ height:472px; }
.rcar--score .scard{ border:0; background:transparent; box-shadow:none; overflow:visible; }
.rcar--score .scard.is-v{ height:452px; aspect-ratio:9/16; }
.rcar--score .scard.is-h{ height:300px; aspect-ratio:16/9; }
.rcar--score .scard .vf{ position:absolute; inset:0; width:100%; height:100%; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow); }
.rcar--score .scard .vf__play{ width:54px;height:54px; }
.rcar--score .scard .dualring{ position:absolute; top:12px; right:12px; bottom:auto; z-index:5; width:76px;height:76px; }
.rcar--score .scard .dualring svg{ width:76px;height:76px; transform:rotate(-90deg); }
.rcar--score .scard .dualring::before{ content:""; position:absolute; inset:-6px; border-radius:50%; background:oklch(12% .05 280 / .55); backdrop-filter:blur(4px); }
/* caption overlay pinned to the bottom of the clip */
.scard__ov{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:1.4rem .9rem .9rem; background:linear-gradient(180deg,transparent, oklch(8% .04 280 / .55) 32%, oklch(6% .03 280 / .9)); border-radius:0 0 var(--radius-lg) var(--radius-lg); display:flex; flex-direction:column; gap:.5rem; }
.scard__ov .ringkey{ color:oklch(100% 0 0 / .82); }
.scard__ov .ringkey b{ color:#fff; }
.scard__ov .smcap{ border-top:1px solid oklch(100% 0 0 / .16); padding-top:.5rem; }
.scard__ov .smcap__lab{ color:oklch(100% 0 0 / .62); }
.scard__ov .smcap__tx{ color:#fff; }
.scard__ov .smtags{ color:oklch(82% .12 300); }
@media(max-width:640px){ .rcar--score{ height:400px; } .rcar--score .scard.is-v{ height:380px; } .rcar--score .scard.is-h{ height:250px; } }
.zoombox{ position:absolute; z-index:3; border:2px solid #fff; border-radius:6px; box-shadow:0 0 0 999px oklch(0% 0 0 / .34); }
.zlab{ position:absolute; z-index:4; left:8px; top:8px; font-size:.62rem; font-weight:700; background:oklch(10% .05 280 / .7); color:#fff; border:1px solid var(--line-soft); padding:.16rem .42rem; border-radius:6px; }
.trackbox{ position:absolute; z-index:3; border:2px solid var(--cat-a); border-radius:8px; box-shadow:0 0 0 2px oklch(100% 0 0 / .25), 0 0 18px var(--cat-a); transition:left .9s var(--ease-out), top .9s var(--ease-out); }
.trackbox::before{ content:""; position:absolute; inset:-6px; border:1px dashed oklch(100% 0 0 / .5); border-radius:10px; }
.trackcorner{ position:absolute; width:9px;height:9px; border:2px solid var(--cat-a); }
.vf--stack{ display:grid; grid-template-rows:1fr 1fr; place-items:stretch; }
.vf--stack .stk{ position:relative; display:grid;place-items:center; overflow:hidden; }
.vf--stack .stk.top{ background:linear-gradient(120deg,oklch(52% .21 262),oklch(58% .21 296)); border-bottom:2px solid oklch(100% 0 0 / .5); }
.vf--stack .stk.bot{ background:linear-gradient(120deg,oklch(54% .22 292),oklch(60% .22 314)); }
.stk__tag{ position:absolute; top:6px; left:6px; font-size:.58rem; font-weight:700; color:#fff; background:oklch(10% .05 280 / .55); padding:.14rem .4rem; border-radius:5px; }

/* 3 · before/after slider (upscaler) */
.bawrap{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); user-select:none; touch-action:none; }
.balayer{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; }
.balayer.before{ background:linear-gradient(120deg,oklch(30% .04 280),oklch(22% .03 280)); filter:blur(1.4px) saturate(.7); }
.balayer.after{ background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); clip-path:inset(0 0 0 52%); }
.bahandle{ position:absolute; top:0; bottom:0; left:52%; width:2px; background:#fff; z-index:4; cursor:ew-resize; }
.bahandle::after{ content:"⟷"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px;height:34px;border-radius:50%; background:#fff; color:#111; display:grid;place-items:center; font-size:14px; box-shadow:var(--shadow); }
.batag{ position:absolute; top:10px; z-index:5; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:.24rem .6rem; border-radius:6px; background:oklch(10% .05 280 / .6); color:#fff; }
.batag.l{ left:10px; } .batag.r{ right:10px; }
.baqual{ position:absolute; bottom:10px; z-index:5; font-size:.66rem; font-weight:700; padding:.2rem .5rem; border-radius:6px; color:#fff; }
.baqual.l{ left:10px; background:oklch(45% .02 280 / .8); } .baqual.r{ right:10px; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); }

/* 4 · subtitle removal side-by-side vertical */
.srow{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.scol{ text-align:center; }
.scol h5{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:.5rem; }
.scol.after h5{ color:var(--cat-a); }
.scol .vf{ width:190px; aspect-ratio:9/16; }
.subline{ position:absolute; z-index:3; left:8px; right:8px; bottom:34px; text-align:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.8rem; color:#fff; text-shadow:0 1px 6px #000; }
.subline.burn{ background:oklch(0% 0 0 / .28); border-radius:6px; padding:.2rem; }
.subgone{ position:absolute; z-index:3; left:8px; right:8px; bottom:34px; height:22px; border-radius:6px; border:1.5px dashed oklch(100% 0 0 / .5); display:grid;place-items:center; font-size:.6rem; color:oklch(100% 0 0 / .8); font-weight:700; letter-spacing:.06em; }

/* moderation before/after — the flagged region, then the same region blurred */
.modbox{ position:absolute; z-index:3; left:20%; right:20%; top:14%; height:20%; border-radius:8px; display:grid; place-items:center; font-size:.56rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.modbox--raw{ border:1.5px dashed oklch(78% .19 30 / .9); color:oklch(88% .14 30); background:oklch(60% .2 30 / .12); }
.modbox--blur{ border:1.5px solid oklch(100% 0 0 / .45); color:oklch(100% 0 0 / .9); background:oklch(100% 0 0 / .18); backdrop-filter:blur(7px); }

/* 5 · AI subtitles 3 styles */
.sub3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
/* We ship two caption styles (Normal + Karaoke), so the landing uses a 2-up grid. */
.sub3--2{ grid-template-columns:repeat(2,1fr); max-width:520px; margin:0 auto; }
@media(max-width:720px){ .sub3{ grid-template-columns:1fr; } }
.sub3 .vf{ aspect-ratio:9/16; max-width:200px; margin:0 auto; width:100%; }
.substyle-lab{ text-align:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.92rem; margin-top:.5rem; }
.substyle-sub{ text-align:center; color:var(--ink-3); font-size:.74rem; }
.cap-normal{ position:absolute; z-index:3; bottom:40px; left:10px; right:10px; text-align:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.85rem; color:#fff; text-shadow:0 2px 6px #000; }
.cap-karaoke{ position:absolute; z-index:3; bottom:40px; left:10px; right:10px; text-align:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.85rem; }
.cap-karaoke .lit{ color:oklch(88% .16 100); } .cap-karaoke .dim{ color:oklch(100% 0 0 / .55); }
.cap-glow{ position:absolute; z-index:3; bottom:40px; left:10px; right:10px; text-align:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.85rem; color:#fff; text-shadow:0 0 8px var(--cat-b),0 0 16px var(--cat-a); }

/* 5 · viral/hook scoring + captions — shared ring + key + caption styles (deck layout lives in .rcar--score above) */
.dualring{ position:relative; }
.dualring svg{ width:72px;height:72px; }
.dualring .trk{ fill:none; stroke:oklch(100% 0 0 / .18); }
.dualring .arc{ fill:none; stroke-linecap:round; }
.dualring .arc.viral{ stroke:url(#gv); } .dualring .arc.hook{ stroke:url(#gh); }
.dualring__ctr{ position:absolute; inset:0; z-index:2; display:grid; place-content:center; text-align:center; }
.dualring__ctr b{ font-family:"Anton"; font-size:1.3rem; line-height:1; color:#fff; }
.dualring__ctr small{ font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; color:oklch(100% 0 0 / .8); }
.ringkey{ display:flex; gap:1rem; font-size:.72rem; color:var(--ink-2); }
.ringkey .k{ display:flex; align-items:center; gap:.4rem; }
.ringkey .dot{ width:9px;height:9px;border-radius:50%; }
.ringkey .dot.viral{ background:var(--cat-a); } .ringkey .dot.hook{ background:oklch(66% .18 300); }
.ringkey b{ margin-left:.15rem; font-family:"Bricolage Grotesque"; color:var(--ink); }
.smcap{ border-top:1px solid var(--line-soft); padding-top:.6rem; }
.smcap__lab{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:.3rem; }
.smcap__tx{ font-size:.8rem; color:var(--ink); line-height:1.4; }
.smtags{ margin-top:.4rem; color:var(--cat-a); font-weight:700; font-size:.76rem; }

/* 7 · auto-stitch merge (static) */
.stitch{ display:grid; grid-template-columns:auto 60px 1fr; gap:1.1rem; align-items:center; }
@media(max-width:640px){ .stitch{ grid-template-columns:1fr; } .stitch__arrow{ transform:rotate(90deg); } }
.stitch__in{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.stitch__clip{ position:relative; aspect-ratio:16/9; border-radius:9px; overflow:hidden; border:1px solid var(--line); display:grid;place-items:center; }
.stitch__clip small{ position:absolute; bottom:3px; left:5px; font-size:.56rem; color:#fff; font-weight:700; text-shadow:0 1px 3px #000; }
.stitch__clip .sc{ position:absolute; top:3px; right:4px; font-size:.54rem; font-weight:700; background:oklch(10% .05 280 / .6); color:#fff; padding:.06rem .3rem; border-radius:4px; }
.stitch__arrow{ display:grid; place-items:center; color:var(--cat-a); }
.stitch__arrow svg{ width:40px;height:40px; }
.stitch__flow{ position:relative; }
.stitch__flow .vf{ aspect-ratio:16/9; }
.stitch__seg{ position:absolute; bottom:10px; left:12px; right:12px; z-index:3; height:8px; border-radius:99px; overflow:hidden; display:flex; gap:2px; }
.stitch__seg i{ flex:1; background:oklch(100% 0 0 / .35); border-radius:2px; }
.stitch__seg i:nth-child(1){ background:oklch(52% .21 262); } .stitch__seg i:nth-child(2){ background:oklch(54% .22 292); } .stitch__seg i:nth-child(3){ background:oklch(58% .21 296); } .stitch__seg i:nth-child(4){ background:oklch(60% .22 314); }
.stitch__cap{ position:absolute; top:10px; left:12px; z-index:3; font-size:.66rem; font-weight:700; background:oklch(10% .05 280 / .6); color:#fff; padding:.24rem .55rem; border-radius:999px; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
@media (prefers-reduced-motion: reduce){
  .vf__scan{ animation:none; }
  .trackbox{ transition:none; }
  .rcard{ transition:none; }
}


/* ============================================================
   WEB / MOBILE PREVIEW TOGGLE
   ============================================================ */
.devtoggle{ position:fixed; right:18px; bottom:18px; z-index:200; display:inline-flex; gap:.25rem; padding:.3rem; border:1px solid var(--line); border-radius:999px; background: color-mix(in oklch, var(--bg-2) 88%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow); }
.devtoggle__btn{ display:inline-flex; align-items:center; gap:.4rem; border:0; background:transparent; color:var(--ink-2); border-radius:999px; padding:.5rem .85rem; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; min-height:40px; transition:background .2s,color .2s; }
.devtoggle__btn svg{ width:18px;height:18px; }
.devtoggle__btn.is-on{ background:var(--grad); color:#fff; }

/* mobile-preview: a real 390px-viewport iframe rendered inside a phone shell.
   Using an iframe means the genuine mobile @media breakpoints fire. */
.devframe{ position:fixed; inset:0; z-index:300; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2.2rem 1rem; }
.devframe__back{ position:absolute; inset:0; background: color-mix(in oklch, oklch(4% .03 278) 78%, transparent); backdrop-filter: blur(8px); }
.devframe__phone{ position:relative; width:390px; max-width:92vw; height:min(844px, 86vh); border-radius:44px; padding:12px; background: linear-gradient(160deg, oklch(28% .03 278), oklch(12% .02 278)); box-shadow: 0 40px 90px -20px rgba(0,0,0,.7), 0 0 0 1px color-mix(in oklch, var(--line) 60%, transparent), inset 0 0 0 2px oklch(40% .02 278); }
.devframe__notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:120px; height:26px; border-radius:0 0 16px 16px; background: oklch(8% .02 278); z-index:2; }
.devframe__screen{ width:100%; height:100%; border:0; border-radius:32px; background: var(--bg); display:block; }
.devframe__cap{ position:relative; color:var(--ink-2); font-size:.78rem; font-weight:600; letter-spacing:.02em; }
body.devframe-open{ overflow:hidden; }
/* hide the floating toggle + decorative bg inside the framed page */
html.in-devframe .devtoggle,
html.in-devframe .fluidbg{ display:none !important; }

@media (max-width:560px){
  .devtoggle__btn span{ display:none; }
  .devtoggle{ right:12px; bottom:12px; }
}

/* category landing hero */
.cat-hero{ padding-top: clamp(2rem,4vw,3.5rem); padding-bottom: clamp(2.5rem,5vw,4rem); }
.cat-hero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,3.5rem); align-items:center; }
.cat-hero h1{ font-size: clamp(2.6rem,6.5vw,5rem); line-height:.96; }
.cat-hero__lead{ color:var(--ink-2); font-size:1.15rem; max-width:42ch; margin:1.3rem 0 2rem; }
.cat-badge{ display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); font-weight:600; font-size:.85rem; margin-bottom:1.4rem; }
.cat-badge .swatch{ width:18px;height:18px;border-radius:6px; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; }
.cat-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:2.4rem; }
.cat-stat{ border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; background:var(--bg-2); }
.cat-stat b{ font-family:"Bricolage Grotesque"; font-size:1.9rem; display:block; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cat-stat span{ color:var(--ink-3); font-size:.85rem; }
.cat-visual{ border-radius:var(--radius-lg); border:1px solid var(--line); overflow:hidden; background:var(--bg-2); box-shadow:var(--shadow); }
.cat-visual__top{ aspect-ratio:16/10; position:relative; display:grid;place-items:center;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklch, var(--cat-a) 45%, transparent), transparent 55%), radial-gradient(circle at 75% 75%, color-mix(in oklch, var(--cat-b) 40%, transparent), transparent 55%), oklch(13% .04 280); }
.cat-visual__rows{ padding:1rem; display:grid; gap:.6rem; }
.cvrow{ display:flex; align-items:center; gap:.8rem; padding:.7rem; border-radius:11px; background: oklch(26% .06 280 / .45); border:1px solid var(--line-soft); }
.cvrow .num{ font-family:"Anton"; color:var(--cat-a); width:26px; }
.cvrow .bar{ flex:1; height:8px; border-radius:999px; background: oklch(34% .05 280); overflow:hidden; }
.cvrow .bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); }
.cvrow .sc{ font-weight:700; font-size:.85rem; color:var(--cat-a); }

.cat-feats{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
.cat-feat{ border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; background:var(--bg-2); transition: transform .35s var(--ease); }
.cat-feat:hover{ transform: translateY(-4px); border-color:var(--cat-a); }
.cat-feat .ic{ width:46px;height:46px;border-radius:13px; display:grid;place-items:center; background: color-mix(in oklch, var(--cat-a) 22%, transparent); margin-bottom:1rem; }
.cat-feat .ic svg{ width:22px;height:22px; color:var(--cat-a); }
.cat-feat h3{ font-size:1.2rem; }
.cat-feat p{ color:var(--ink-2); font-size:.95rem; margin-top:.5rem; }

/* ============================================================
   REPORTING — sleek, minimal, two-shade (purple review / blue running)
   ============================================================ */
.rep-head{ padding-top: clamp(2rem,4vw,3rem); }
.rep-head h1{ font-size: clamp(2.2rem,5vw,3.4rem); }
.rep-head p{ color:var(--ink-2); margin-top:.6rem; }

/* summary stat cards — 5 across, tinted */
.rep-summary{ display:grid; grid-template-columns: repeat(5,1fr); gap:.8rem; margin: 2rem 0 1.6rem; }
.rep-card{ border:1px solid var(--line-soft); border-radius:var(--radius); padding:1.1rem 1.2rem;
  background: color-mix(in oklch, var(--bg-2) 70%, transparent); position:relative; color:inherit; text-decoration:none; transition: border-color .25s, transform .25s var(--ease); }
.rep-card:hover{ transform: translateY(-2px); }
.rep-card .rc-lab{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.rep-card .rc-val{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:clamp(1.5rem,2.4vw,2rem); margin-top:.3rem; line-height:1; letter-spacing:-.02em; }
.rep-card.review{ border-color: color-mix(in oklch, var(--review) 38%, transparent); }
.rep-card.review .rc-val{ color: var(--review-hi); }
.rep-card.running{ border-color: color-mix(in oklch, var(--running) 38%, transparent); }
.rep-card.running .rc-val{ color: var(--running-hi); }
.rep-card.review::after, .rep-card.running::after{ content:""; position:absolute; top:1.1rem; right:1.1rem; width:7px;height:7px;border-radius:50%; }
.rep-card.review::after{ background: var(--review); box-shadow:0 0 10px color-mix(in oklch, var(--review) 60%, transparent); }
.rep-card.running::after{ background: var(--running); box-shadow:0 0 10px color-mix(in oklch, var(--running) 60%, transparent); animation: ping 2s infinite; }

.rep-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:1.4rem; margin: 0 0 2rem; }
.rep-panel{ border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  background: color-mix(in oklch, var(--bg-2) 62%, transparent); overflow:hidden; }
.rep-panel__head{ display:flex; align-items:center; gap:.7rem; padding:1.15rem 1.4rem; }
.rep-panel__head h2{ font-size:1.3rem; }
.rep-panel__count{ margin-left:auto; font-size:.78rem; font-weight:600; padding:.25rem .7rem; border-radius:999px; border:1px solid var(--line-soft); color:var(--ink-2); }
.rep-panel--review{ border-top: 2px solid color-mix(in oklch, var(--review) 60%, transparent); }
.rep-panel--review .rep-panel__count{ color: var(--review-hi); border-color: color-mix(in oklch, var(--review) 40%, transparent); }
.rep-panel--run{ border-top: 2px solid color-mix(in oklch, var(--running) 60%, transparent); }
.rep-panel--run .rep-panel__count{ color: var(--running-hi); border-color: color-mix(in oklch, var(--running) 40%, transparent); }
.dotled{ width:9px;height:9px;border-radius:50%; }
.dotled--m{ background:var(--review); box-shadow:0 0 0 0 color-mix(in oklch, var(--review) 60%, transparent); animation:ping 2s infinite; }
.dotled--v{ background:var(--running); box-shadow:0 0 0 0 color-mix(in oklch, var(--running) 60%, transparent); animation:ping 2s .6s infinite; }

.tasklist{ display:flex; flex-direction:column; padding:.4rem .5rem .5rem; }
.task{ display:flex; align-items:center; gap:1rem; padding:.8rem .9rem; border-radius:14px; transition: background .2s; }
.task:hover{ background: color-mix(in oklch, var(--bg-3) 55%, transparent); }
.task__thumb{ width:50px;height:38px; border-radius:10px; flex-shrink:0; position:relative; overflow:hidden;
  background: linear-gradient(120deg, oklch(28% .08 280), oklch(26% .08 282)); }
.task__thumb.f{ background: linear-gradient(120deg, oklch(48% .20 262), oklch(52% .21 284)); }
.task__thumb.d{ background: linear-gradient(120deg, oklch(50% .21 292), oklch(56% .22 312)); }
.task__thumb.v{ background: linear-gradient(120deg, oklch(48% .20 274), oklch(52% .21 262)); }
.task__info{ flex:1; min-width:0; }
.task__info b{ font-size:.96rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task__info small{ color:var(--ink-3); font-size:.82rem; }
.task__meta{ text-align:right; flex-shrink:0; }
.badge{ font-size:.72rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; display:inline-block; }
.badge--review{ background: color-mix(in oklch, var(--review) 18%, transparent); color: var(--review-hi); }
.badge--run{ background: color-mix(in oklch, var(--running) 18%, transparent); color: var(--running-hi); }
.badge--done{ background: var(--bg-3); color: var(--ink-2); }
.miniprog{ width:90px; height:5px; border-radius:999px; background: var(--bg-3); overflow:hidden; margin-top:.4rem; margin-left:auto; }
.miniprog i{ display:block; height:100%; background: linear-gradient(90deg, var(--running), var(--running-hi)); border-radius:999px; }

.rep-table-wrap{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-2); }
.rep-table-wrap > h2{ padding:1.2rem 1.4rem; font-size:1.3rem; border-bottom:1px solid var(--line-soft); }
.tbl-scroll{ overflow-x:auto; }
table.rep{ width:100%; border-collapse:collapse; min-width:680px; }
table.rep th{ text-align:left; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:.9rem 1.4rem; border-bottom:1px solid var(--line-soft); font-weight:600; }
table.rep td{ padding:1rem 1.4rem; border-bottom:1px solid var(--line-soft); font-size:.92rem; }
table.rep tr:last-child td{ border-bottom:0; }
table.rep tr:hover td{ background: oklch(28% .07 280 / .35); }
table.rep a.tlink{ font-weight:600; color:var(--ink); }
table.rep a.tlink:hover{ color:var(--magenta-hi); }
.catpill{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; }
.catpill .sw{ width:12px;height:12px;border-radius:4px; }
/* Mode tag next to the task category pill (VOD / Live / Fixed 9:16 / AI tracking) */
.modetag{ display:inline-flex; align-items:center; margin-left:.4rem; padding:.1rem .45rem; border-radius:999px; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ink-2); background:var(--line-soft); vertical-align:middle; }

/* reveal animation */
.reveal{ opacity:0; transform: translateY(22px); }
.revealed{ opacity:1; transform:none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .hero__grid{ grid-template-columns:1fr; }
  .gen-layout{ grid-template-columns:1fr; }
  .gen-side{ position:static; }
  .cat-hero__grid{ grid-template-columns:1fr; }
  .bento{ grid-template-columns: repeat(2,1fr); }
  .feat--tall{ grid-row: auto; }
  .rep-summary{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 860px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .steps{ grid-template-columns:1fr; }
  .step__line{ display:none; }
  .prices{ grid-template-columns:1fr; }
  .cat-feats{ grid-template-columns:1fr; }
  .cat-stats{ grid-template-columns:1fr; }
  .results-grid{ grid-template-columns:1fr; }
  .rep-cols{ grid-template-columns:1fr; }
  .rep-summary{ grid-template-columns: repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .catbar__links{ display:none; }
}
@media (max-width:560px){
  .bento{ grid-template-columns:1fr; }
  .feat--wide{ grid-column:auto; }
  .footer__grid{ grid-template-columns:1fr; }
  .catdrop, .catdrop__btn{ width:100%; min-width:0; }
  .hero__cta .btn{ flex:1; }
  .rep-summary{ grid-template-columns: 1fr 1fr; }
  .gen-mode__seg{ grid-template-columns:1fr; }
  .hero__grid--center h1{ font-size: clamp(2.4rem, 11vw, 3.4rem); line-height:1.02; white-space:normal; }
  .hero__br{ display:block; }
  .hero__break{ display:block; }
  .hero__grid--center .hero__col{ max-width:100%; }
}

/* ============================================================
   NAV DROPDOWN (AI menu) + new nav bits
   ============================================================ */
.nav__links .has-drop{ position:relative; }
.navdrop__btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .85rem; border-radius:10px;
  font-family:inherit; font-weight:500; color:var(--ink-2); font-size:.95rem; background:transparent; border:0; cursor:pointer;
  transition: color .2s, background .2s;
}
.navdrop__btn:hover, .has-drop.open .navdrop__btn{ color:var(--ink); background: color-mix(in oklch, var(--ink) 8%, transparent); }
.navdrop__btn .star{ color: var(--magenta-hi); }
.navdrop__btn .caret{ transition: transform .3s; display:inline-flex; }
.has-drop.open .navdrop__btn .caret{ transform: rotate(180deg); }
.navdrop__menu{
  position:absolute; top:calc(100% + .55rem); left:50%; transform: translateX(-50%) translateY(-8px);
  width: 320px; max-height:calc(100dvh - 84px); overflow-y:auto; overscroll-behavior:contain;
  background: var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:.6rem;
  box-shadow: var(--shadow); opacity:0; visibility:hidden; transition:.26s var(--ease); z-index:40;
}
.has-drop.open .navdrop__menu{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.navdrop__menu a{
  display:flex; align-items:flex-start; gap:.8rem; padding:.7rem .8rem; border-radius:12px; margin:0;
  color:var(--ink); background:transparent;
}
.navdrop__menu a:hover{ background: color-mix(in oklch, var(--ink) 9%, transparent); }
.navdrop__ic{ width:38px;height:38px;border-radius:11px; flex-shrink:0; display:grid; place-items:center; background: color-mix(in oklch, var(--violet) 22%, transparent); }
.navdrop__ic svg{ width:19px;height:19px; color:var(--violet-hi); }
.navdrop__tx b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:.96rem; display:block; }
.navdrop__tx small{ color:var(--ink-3); font-size:.8rem; }
.navdrop__sep{ height:1px; background:var(--line-soft); margin:.45rem .4rem; }
.navdrop__lab{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); padding:.3rem .8rem .35rem; }

/* badge pill used inline in headings / cards */
.pill-credits{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; padding:.25rem .6rem; border-radius:999px;
  background: color-mix(in oklch, var(--magenta) 18%, transparent); color: var(--magenta-hi); }
.star{ color: var(--magenta-hi); }

/* ============================================================
   AUTH GATE (overview / reporting for logged-in only)
   ============================================================ */
.authgate{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(2rem,5vw,3.5rem); text-align:center;
  background: linear-gradient(160deg, oklch(22% 0.06 280 / .7), oklch(19% 0.05 280 / .5)); position:relative; overflow:hidden;
  margin: 1.4rem 0;
}
.authgate::before{ content:""; position:absolute; inset:0; background: radial-gradient(520px 280px at 50% -10%, oklch(70% .16 280 / .22), transparent 60%); pointer-events:none; }
.authgate__lock{ width:64px;height:64px;border-radius:18px; margin:0 auto 1.2rem; display:grid; place-items:center; background: var(--grad); box-shadow:var(--glow); position:relative; }
.authgate__lock svg{ width:28px;height:28px; color:#fff; }
.authgate h3{ font-size: clamp(1.4rem,3vw,2rem); position:relative; }
.authgate p{ color:var(--ink-2); max-width:46ch; margin:.7rem auto 1.6rem; position:relative; }
.authgate__cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; position:relative; }

/* ============================================================
   GENERATOR — Live vs VOD main mode switch
   ============================================================ */
.mainmode{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
/* Drama has no Live pipeline — hide Live and let VOD span the whole row. */
.mainmode[data-mainmode-solo="true"]{ grid-template-columns: 1fr; }
.mainmode__opt{
  position:relative; text-align:left; cursor:pointer; padding:1.3rem 1.4rem; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink); font-family:inherit;
  transition: border-color .25s, background .25s, transform .25s var(--ease); overflow:hidden;
}
.mainmode__opt:hover{ transform: translateY(-3px); border-color: var(--cat-a); }
.mainmode__opt[aria-pressed="true"]{ border-color: var(--cat-a); background: color-mix(in oklch, var(--cat-a) 12%, var(--bg-2)); box-shadow: 0 0 0 1px var(--cat-a) inset; }
.mainmode__top{ display:flex; align-items:center; gap:.7rem; }
.mainmode__ic{ width:42px;height:42px;border-radius:12px; display:grid; place-items:center; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); flex-shrink:0; }
.mainmode__ic svg{ width:21px;height:21px;color:#fff; }
.mainmode__opt.live .mainmode__ic{ background: linear-gradient(120deg, oklch(58% 0.22 308), oklch(66% 0.20 322)); }
.mainmode__opt.live[aria-pressed="true"]{ border-color: oklch(64% 0.21 314); box-shadow:0 0 0 1px oklch(64% 0.21 314) inset; background: color-mix(in oklch, oklch(60% 0.22 312) 12%, var(--bg-2)); }
.mainmode__opt h4{ font-size:1.15rem; }
.mainmode__live-dot{ width:8px;height:8px;border-radius:50%; background: oklch(64% 0.24 316); box-shadow:0 0 0 0 oklch(64% .24 316 / .6); animation:ping 2s infinite; margin-left:auto; }
.mainmode__opt p{ color:var(--ink-2); font-size:.92rem; margin:.7rem 0 0; }
.mainmode__credits{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-size:.74rem; font-weight:700; padding:.28rem .65rem; border-radius:999px; }
.mainmode__credits.low{ background: color-mix(in oklch, var(--running) 16%, transparent); color: var(--running-hi); }
.mainmode__credits.high{ background: color-mix(in oklch, oklch(60% 0.22 312) 18%, transparent); color: oklch(80% 0.15 312); }

/* upload source tabs (VOD) */
.srctabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.srctab{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .95rem; border-radius:12px; border:1px solid var(--line);
  background:var(--bg-2); color:var(--ink-2); cursor:pointer; font-family:inherit; font-weight:600; font-size:.88rem;
  transition:.2s var(--ease);
}
.srctab svg{ width:17px;height:17px; }
.srctab:hover{ color:var(--ink); border-color: var(--cat-a); }
.srctab[aria-selected="true"]{ color:#fff; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); border-color:transparent; }
.srcpane{ display:none; }
.srcpane.active{ display:block; }

/* previous-run picker */
.prevlist{ display:grid; gap:.6rem; }
.prevrun{ display:flex; align-items:center; gap:.9rem; padding:.8rem .9rem; border-radius:13px; border:1px solid var(--line-soft); background:var(--bg-2); cursor:pointer; text-align:left; color:var(--ink); font-family:inherit; transition:.2s; width:100%; }
.prevrun:hover{ border-color: var(--cat-a); background: color-mix(in oklch, var(--cat-a) 8%, var(--bg-2)); }
.prevrun__thumb{ width:52px;height:38px;border-radius:9px;flex-shrink:0; background: linear-gradient(120deg, oklch(40% .1 262), oklch(44% .12 282)); }
.prevrun__thumb.f{ background: linear-gradient(120deg, oklch(48% .20 262), oklch(52% .21 284)); }
.prevrun__thumb.d{ background: linear-gradient(120deg, oklch(50% .21 292), oklch(56% .22 312)); }
.prevrun__thumb.v{ background: linear-gradient(120deg, oklch(48% .20 274), oklch(52% .21 262)); }
.prevrun__info{ flex:1; min-width:0; }
.prevrun__info{ min-width:0; flex:1; }
.prevrun__info b{ font-size:.94rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prevrun__info small{ color:var(--ink-3); font-size:.8rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Status tag on a Previous Runs row (running / review / done / failed) */
.prevrun__tag{ flex:0 0 auto; margin-left:auto; align-self:center; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:.2rem .5rem; border-radius:999px; white-space:nowrap; }
.prevrun__tag.is-done{ background:oklch(70% .13 150 / .18); color:oklch(60% .14 150); }
.prevrun__tag.is-run{ background:oklch(70% .14 250 / .18); color:oklch(66% .15 255); }
.prevrun__tag.is-review{ background:oklch(75% .15 85 / .2); color:oklch(64% .15 75); }
.prevrun__tag.is-error{ background:oklch(65% .2 25 / .18); color:oklch(62% .2 25); }
/* Constrain the two "Previous Runs" panes (VOD source tab + Live-block mirror,
   both list marked data-runs-open="detail") to a comfortable centered width.
   CSS-based so it applies reliably even when the large GeneratorReferencePage's
   React Fast Refresh skips a JSX inline-style edit. Does not affect the
   stitch (data-runs-mode="select") or reframe (data-runs-mode="pick") lists. */
.dropzone:has(.prevlist[data-runs-open="detail"]){ max-width:720px; margin-left:auto; margin-right:auto; }
/* Each previous-run row is width:100% by default. For the DRAMA category only,
   narrow the "Previous Runs" rows and centre them (football / variety keep the
   full-width rows they already look fine with). Scoped to data-runs-open="detail"
   so the stitch / reframe rows are never affected. */
[data-cat="drama"] .prevlist[data-runs-open="detail"] .prevrun{ width:90% !important; margin-left:5%; margin-right:auto; overflow-x: hidden;}
/* Cap the "Previous Runs" lists (VOD source tab + Live-block mirrors) to about
   three rows tall and scroll the rest, so a long history never pushes the page
   down. ~13.5rem ≈ 3 rows (row ≈ 4.1rem) + 2 × .6rem gaps. Same
   data-runs-open="detail" scope as the width rules above. */
.prevlist[data-runs-open="detail"]{ max-height:15.5rem; overflow-y:auto; overscroll-behavior:contain; }

/* stitch on-page tool */
.stitch-tool{ display:grid; grid-template-columns: 1.4fr .9fr; gap:1.4rem; align-items:start; }
.stitch-tool__list{ display:grid; gap:.7rem; }
.stitch-tool--enhance-history{
  grid-template-columns:minmax(0, 1fr);
  width:100%;
  max-width:620px;
}
.stitch-tool--enhance-history > .stitch-tool__list,
.stitch-tool--enhance-history > h4{
  width:min(560px, 100%);
  margin-inline:auto;
  box-sizing:border-box;
}
.stitch-tool--enhance-history > h4{
  margin-top:.25rem;
  margin-bottom:-.55rem;
}
.stitch-tool--enhance-history .prevrun{
  width: inherit;
  margin-inline:0;
  box-sizing:border-box;
}
.prevrun__check{ width:24px;height:24px;border-radius:7px;flex-shrink:0; border:1.5px solid var(--line); display:grid; place-items:center; color:transparent; transition:.2s; }
.prevrun__check svg{ width:15px;height:15px; }
.prevrun.is-on{ border-color: var(--cat-a); background: color-mix(in oklch, var(--cat-a) 12%, var(--bg-2)); }
.prevrun.is-on .prevrun__check{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); border-color:transparent; color:#fff; }
.stitch-tool__panel{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); padding:1.4rem; position:sticky; top:88px; }
.stitch-tool__panel h4{ font-size:1.05rem; margin-bottom:1rem; }
.stitch-sum{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--line-soft); }
.stitch-sum:last-of-type{ border-bottom:0; }
.stitch-sum span{ color:var(--ink-3); font-size:.9rem; }
.stitch-sum b{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.05rem; }
.stitch-tool__panel .field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem; }
@media (max-width:860px){ .stitch-tool{ grid-template-columns:1fr; } .stitch-tool__panel{ position:static; } }

/* stitch upload queue + reorderable list */
.stitch-queue{ margin-top:1.4rem; }
.stitch-queue__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.stitch-queue__head h4{ font-size:1.05rem; display:flex; align-items:center; gap:.6rem; }
.stitch-queue__head h4 span{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:.78rem; color:#fff; padding:.18rem .6rem; border-radius:999px; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); }
.stitch-queue__head>span{ color:var(--ink-3); font-size:.85rem; }
.stitch-queue__actions{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.orderlist{ list-style:none; display:grid; gap:.7rem; margin:0; padding:0; }
.orderitem{ display:flex; align-items:center; gap:.85rem; padding:.7rem .8rem; border-radius:13px; border:1px solid var(--line-soft); background:var(--bg-2); transition:.2s; }
.orderitem.is-dragging{ opacity:.5; border-style:dashed; border-color:var(--cat-a); }
.orderitem.drop-target{ border-color:var(--cat-a); background: color-mix(in oklch, var(--cat-a) 10%, var(--bg-2)); }
.orderitem__pos{ width:26px; height:26px; flex-shrink:0; border-radius:8px; display:grid; place-items:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.85rem; color:#fff; background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); }
.orderitem__grip{ flex-shrink:0; color:var(--ink-3); cursor:grab; display:grid; place-items:center; }
.orderitem__grip svg{ width:16px; height:16px; }
.orderitem:active .orderitem__grip{ cursor:grabbing; }
.orderitem__thumb{ width:52px; height:38px; border-radius:9px; flex-shrink:0; background: linear-gradient(120deg, var(--cat-a), var(--cat-b)); }
.orderitem__info{ flex:1; min-width:0; }
.orderitem__info b{ font-size:.92rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.orderitem__info small{ color:var(--ink-3); font-size:.78rem; }
.orderitem__moves{ display:flex; flex-direction:column; gap:.2rem; flex-shrink:0; }
.orderitem__moves button, .orderitem__del{ border:1px solid var(--line); background:var(--bg-1); color:var(--ink-2); border-radius:7px; cursor:pointer; display:grid; place-items:center; transition:.15s; }
.orderitem__moves button{ width:26px; height:20px; }
.orderitem__moves button svg{ width:13px; height:13px; }
.orderitem__moves button:hover:not(:disabled){ border-color:var(--cat-a); color:var(--cat-a); }
.orderitem__moves button:disabled{ opacity:.3; cursor:not-allowed; }
.orderitem__del{ width:30px; height:30px; flex-shrink:0; }
.orderitem__del svg{ width:15px; height:15px; }
.orderitem__del:hover{ border-color: oklch(60% 0.2 18); color: oklch(70% 0.2 18); }

/* additional customisation (highlight style hidden here) */
.addcust{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2); overflow:hidden; }
.addcust__btn{ width:100%; display:flex; align-items:center; gap:.7rem; padding:1.1rem 1.3rem; background:transparent; border:0; color:var(--ink); cursor:pointer; font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.05rem; min-height:56px; }
.addcust__btn .caret{ margin-left:auto; transition:transform .3s; }
.addcust.open .addcust__btn .caret{ transform: rotate(180deg); }
.addcust__body{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .4s var(--ease-out); }
.addcust.open .addcust__body{ grid-template-rows:1fr; }
.addcust__inner{ overflow:hidden; }
.addcust__pad{ padding:0 1.3rem 1.4rem; display:grid; gap:1.4rem; }

/* aspect ratio toggle (9:16 / 1:1 / 4:5 / 16:9) —
   4-up grid so the tiles never overflow the crop control column.
   `.aspect-toggle--sm` (logo position row) keeps the older 1-line flex look. */
.aspect-toggle{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; }
.aspect-toggle--sm{ display:flex; gap:.5rem; }
.aspect-toggle button{ min-height:48px; padding:.55rem .35rem; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; font-family:inherit; font-weight:700; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; transition:.2s; text-align:center; font-size:.95rem; line-height:1.1; }
.aspect-toggle--sm button{ flex:1; padding:.6rem 1rem; flex-direction:row; gap:.5rem; font-size:1rem; }
.aspect-toggle button svg{ width:18px;height:18px; }
.aspect-toggle button small{ font-size:.62rem; font-weight:500; color:var(--ink-3); letter-spacing:.02em; line-height:1.15; display:block; white-space:normal; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.aspect-toggle--sm button small{ font-size:.72rem; font-weight:500; color:var(--ink-3); line-height:1.15; }
.aspect-toggle button[aria-pressed="true"]{ background: linear-gradient(120deg,var(--cat-a),var(--cat-b)); border-color:transparent; color:#fff; }
.aspect-toggle button[aria-pressed="true"] small{ color:rgba(255,255,255,.85); }

/* 5-mode source tabs */
.srctabs--5{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.5rem; }
.srctabs--5 .srctab{ justify-content:center; padding:.7rem .6rem; }
.srctabs--5 .srctab[hidden]{ display:none; }
@media (max-width:680px){ .srctabs--5{ grid-template-columns: repeat(2, 1fr); } }

/* My Library grid */
.libgrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.7rem; }
@media (max-width:680px){ .libgrid{ grid-template-columns: repeat(2, 1fr); } }
.libitem{ display:flex; flex-direction:column; gap:.55rem; padding:.7rem; border-radius:13px; border:1px solid var(--line-soft); background:var(--bg-2); cursor:pointer; text-align:left; color:var(--ink); font-family:inherit; transition:.2s; min-width:0; }
.libitem:hover{ border-color: var(--cat-a); background: color-mix(in oklch, var(--cat-a) 8%, var(--bg-2)); transform: translateY(-2px); }
.libitem.is-on,.libitem[aria-pressed="true"]{ border-color:var(--cat-a); background:color-mix(in oklch, var(--cat-a) 14%, var(--bg-2)); box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--cat-a) 42%, transparent); }
.libitem__thumb{ width:100%; aspect-ratio:16/10; border-radius:9px; overflow:hidden; background: linear-gradient(120deg, oklch(40% .1 262), oklch(44% .12 282)); }
.libitem__thumb.f{ background: linear-gradient(120deg, oklch(48% .20 262), oklch(52% .21 284)); }
.libitem__thumb.d{ background: linear-gradient(120deg, oklch(50% .21 292), oklch(56% .22 312)); }
.libitem__thumb.v{ background: linear-gradient(120deg, oklch(48% .20 274), oklch(52% .21 262)); }
.libitem__info{ min-width:0; }
.libitem__info b{ font-size:.88rem; display:block; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.libitem__info small{ color:var(--ink-3); font-size:.76rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.libempty{ grid-column:1/-1; color:var(--ink-3); text-align:center; margin:.4rem 0; font-size:.9rem; }

/* source caveat note */
.srcnote{ display:flex; align-items:flex-start; gap:.55rem; margin-top:1.1rem; padding:.7rem .9rem; border-radius:11px; border:1px solid var(--line-soft); background: color-mix(in oklch, var(--cat-a) 6%, var(--bg-2)); color:var(--ink-2); font-size:.84rem; line-height:1.45; text-align:left; max-width:560px; margin-left:auto; margin-right:auto; }
.srcnote svg{ width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--cat-a); }
.srcnote strong{ color:var(--ink); }

/* vertical rotator — AI Subject Tracking mode recolours the tool (electric blue-violet = AI active) */
#rotate-tool[data-vmode="track"]{ --cat-a: oklch(64% 0.20 266); --cat-b: oklch(68% 0.19 290); }
#rotate-tool[data-vmode="track"] .eyebrow{ color: var(--cat-a); }


/* ============================================================
   EDITOR TOOLS (homepage) + AI page feature cards
   ============================================================ */
.tools{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.2rem; }
.tools--3{ grid-template-columns: repeat(3,1fr); }
.tools--4{ grid-template-columns: repeat(4,1fr); }
.toolcard{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; overflow:hidden;
  background: linear-gradient(160deg, oklch(21% 0.05 280 / .8), oklch(18% 0.045 280 / .55));
  transition: transform .35s var(--ease), border-color .35s; display:flex; flex-direction:column;
}
.toolcard:hover{ transform: translateY(-5px); border-color: var(--violet); }
.toolcard::before{ content:""; position:absolute; inset:0; background: var(--sheen); background-size:220% 100%; background-position:140% 0; opacity:0; transition: opacity .4s, background-position .9s var(--ease); pointer-events:none; }
.toolcard:hover::before{ opacity:1; background-position:-40% 0; }
.toolcard__ic{ width:54px;height:54px;border-radius:15px; display:grid; place-items:center; background: var(--grad); box-shadow:var(--glow); margin-bottom:1.1rem; }
.toolcard__ic svg{ width:26px;height:26px; color:#fff; }
.toolcard__tag{ display:inline-block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem; }
.toolcard h3{ font-size:1.45rem; }
.toolcard p{ color:var(--ink-2); font-size:.98rem; margin:.6rem 0 1.2rem; }
.toolcard__link{ margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--violet-hi); font-size:.92rem; }
.toolcard__link svg{ width:16px;height:16px; transition: transform .25s; }
.toolcard:hover .toolcard__link svg{ transform: translateX(3px); }
.toolcard--soon{ opacity:.92; }
.toolcard--soon .toolcard__link{ color:var(--ink-3); }
.toolcard__soon{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.2rem .55rem; border-radius:999px; background: color-mix(in oklch, var(--violet) 18%, transparent); color:var(--violet-hi); }
.comingsoon{ margin:1.6rem 0 .4rem; }
.comingsoon__pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); font-weight:600; font-size:.9rem; }
.comingsoon__pill .dotg{ width:8px;height:8px;border-radius:50%;background:var(--grad); box-shadow:0 0 12px 2px oklch(60% 0.22 282 / .6); }

@media (max-width:1040px){ .tools--4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:860px){ .tools, .tools--3, .tools--4{ grid-template-columns:1fr; } }

/* ============================================================
   TOOL DETAIL PAGE (stitch / vertical / travel)
   ============================================================ */
.tool-hero{ padding-top: clamp(2rem,4vw,3.5rem); padding-bottom: clamp(2rem,4vw,3rem); }
.tool-hero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,3.5rem); align-items:center; }
.tool-hero h1{ font-size: clamp(2.4rem,6vw,4.6rem); line-height:.98; }
.tool-hero__lead{ color:var(--ink-2); font-size:1.12rem; max-width:44ch; margin:1.3rem 0 2rem; }
.tool-badge{ display:inline-flex; align-items:center; gap:.55rem; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); font-weight:600; font-size:.84rem; margin-bottom:1.3rem; }
.tool-badge .swatch{ width:18px;height:18px;border-radius:6px; background:var(--grad); }
.tool-visual{ border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--bg-2); box-shadow:var(--shadow); overflow:hidden; }
.tool-visual__screen{ aspect-ratio:16/11; position:relative; display:grid; place-items:center;
  background: radial-gradient(circle at 70% 25%, oklch(45% .15 280 / .5), transparent 55%), radial-gradient(circle at 20% 80%, oklch(45% .15 282 / .45), transparent 55%), oklch(13% .04 280); }
.tool-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
@media (max-width:860px){ .tool-hero__grid{ grid-template-columns:1fr; } .tool-steps{ grid-template-columns:1fr; } }

/* stitch demo strip */
.stitch-strip{ display:flex; align-items:center; gap:.5rem; padding:1.2rem; flex-wrap:wrap; justify-content:center; }
.stitch-clip{ width:84px;height:60px;border-radius:9px; border:1px solid var(--line); background: linear-gradient(120deg, oklch(30% .08 280), oklch(28% .08 282)); position:relative; }
.stitch-plus{ color:var(--violet-hi); font-weight:800; font-size:1.2rem; }
.stitch-eq{ color:var(--ink-3); font-weight:800; }
.stitch-out{ width:120px;height:60px;border-radius:9px; border:1px solid transparent; background: var(--grad); display:grid; place-items:center; color:#fff; font-weight:700; font-size:.8rem; }

/* vertical rotator demo */
.rot-demo{ display:flex; align-items:center; justify-content:center; gap:1.4rem; padding:1.4rem; }
.rot-land{ width:150px;height:84px;border-radius:10px; border:1px solid var(--line); background: linear-gradient(120deg, oklch(30% .08 280), oklch(28% .08 282)); }
.rot-arrow{ color:var(--violet-hi); }
.rot-port{ width:64px;height:114px;border-radius:10px; border:1px solid transparent; background: var(--grad); box-shadow:var(--glow); }

/* travel cards */
.travel-itin{ display:grid; gap:.7rem; padding:1.2rem; }
.titem{ display:flex; gap:.8rem; align-items:flex-start; padding:.8rem; border-radius:12px; background: oklch(26% .06 280 / .45); border:1px solid var(--line-soft); }
.titem .tday{ font-family:"Anton"; color:var(--violet-hi); width:46px; flex-shrink:0; }
.titem b{ font-size:.94rem; display:block; }
.titem small{ color:var(--ink-3); font-size:.82rem; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-head{ padding-top: clamp(2rem,4vw,3rem); }
.blog-head h1{ font-size: clamp(2.4rem,5.5vw,4rem); }
.blog-head p{ color:var(--ink-2); margin-top:.8rem; max-width:54ch; font-size:1.08rem; }
.blog-feat{ display:grid; grid-template-columns: 1.1fr .9fr; gap:1.6rem; align-items:stretch; margin:2rem 0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-2); }
.blog-feat__media{ min-height:280px; position:relative; background: radial-gradient(circle at 65% 30%, oklch(45% .15 280 / .55), transparent 55%), radial-gradient(circle at 25% 80%, oklch(45% .15 282 / .45), transparent 55%), oklch(15% .04 280); }
.blog-feat__media .tag{ position:absolute; top:1.1rem; left:1.1rem; }
.blog-feat__body{ padding: clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; justify-content:center; }
.blog-feat__body h2{ font-size: clamp(1.6rem,3vw,2.4rem); margin:.6rem 0 .8rem; }
.blog-feat__body p{ color:var(--ink-2); }
.blog-meta{ display:flex; gap:.8rem; align-items:center; color:var(--ink-3); font-size:.85rem; margin-top:1.2rem; }
.blog-filter{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.blog-filter button{ padding:.5rem .95rem; border-radius:999px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink-2); cursor:pointer; font-family:inherit; font-weight:600; font-size:.85rem; transition:.2s; }
.blog-filter button:hover{ color:var(--ink); border-color:var(--violet); }
.blog-filter button[aria-pressed="true"]{ background: linear-gradient(120deg,var(--violet),var(--magenta)); border-color:transparent; color:#fff; }
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
.post{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-2); transition: transform .35s var(--ease), border-color .35s; display:flex; flex-direction:column; }
.post:hover{ transform: translateY(-5px); border-color: var(--violet); }
.post__media{ aspect-ratio:16/9; position:relative; background: radial-gradient(circle at 60% 35%, oklch(42% .13 280 / .5), transparent 55%), linear-gradient(135deg, oklch(24% .07 280), oklch(22% .07 282)); }
.post__media .tag{ position:absolute; top:.8rem; left:.8rem; }
.post__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.post__body h3{ font-size:1.15rem; margin-bottom:.5rem; }
.post__body p{ color:var(--ink-3); font-size:.9rem; flex:1; }
.post__meta{ display:flex; gap:.7rem; align-items:center; color:var(--ink-3); font-size:.8rem; margin-top:1rem; }
.newsletter{ border:1px solid var(--line); border-radius:var(--radius-lg); padding: clamp(2rem,4vw,3rem); text-align:center; margin-top:2.5rem;
  background: linear-gradient(120deg, oklch(28% 0.1 280), oklch(26% 0.11 282)); position:relative; overflow:hidden; }
.newsletter h2{ font-size: clamp(1.6rem,3.5vw,2.6rem); position:relative; }
.newsletter p{ color:var(--ink-2); max-width:46ch; margin:.8rem auto 1.6rem; position:relative; }
.newsletter__form{ display:flex; gap:.6rem; max-width:460px; margin:0 auto; position:relative; }
.newsletter__form input{ flex:1; min-height:50px; border-radius:13px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); color:var(--ink); padding:0 1rem; font-family:inherit; }
.newsletter__form input:focus{ outline:2px solid var(--violet); outline-offset:1px; }
.blog-article{ padding-bottom:2rem; }
.blog-breadcrumb{ display:flex; gap:.55rem; align-items:center; color:var(--ink-3); font-size:.88rem; margin: clamp(1.5rem,3vw,2.2rem) 0 1rem; }
.blog-breadcrumb a{ color:var(--ink-2); text-decoration:none; }
.blog-breadcrumb a:hover{ color:var(--violet-hi); }
.blog-article__hero{ max-width:760px; margin:0 auto 1.6rem; }
.blog-article__hero .tag{ margin-bottom:1rem; display:inline-flex; }
.blog-article__hero h1{ font-size: clamp(2rem,4.5vw,3.4rem); margin:.2rem 0 .8rem; }
.blog-article__dek{ color:var(--ink-2); font-size:1.08rem; max-width:62ch; }
.blog-article__media{ min-height:280px; border-radius:var(--radius-lg); border:1px solid var(--line); margin:0 auto 2rem; max-width:960px;
  background: radial-gradient(circle at 65% 30%, oklch(45% .15 280 / .55), transparent 55%), radial-gradient(circle at 25% 80%, oklch(45% .15 282 / .45), transparent 55%), oklch(15% .04 280); }
.blog-article__body{ max-width:680px; margin:0 auto; color:var(--ink-2); font-size:1.02rem; line-height:1.75; }
.blog-article__body h2{ color:var(--ink); font-size:1.35rem; margin:2rem 0 .75rem; }
.blog-article__body p{ margin:0 0 1rem; }
.blog-article__body blockquote{ margin:1.4rem 0; padding:1rem 1.2rem; border-left:3px solid var(--violet); background: oklch(60% .18 290 / .08); border-radius:0 12px 12px 0; color:var(--ink); font-style:italic; }
.blog-article__body ul{ margin:0 0 1.2rem 1.1rem; }
.blog-article__body li{ margin:.35rem 0; }
.blog-article__actions{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin:2.4rem auto 1rem; max-width:680px; }
.blog-article__related{ margin-top:2.5rem; }
.blog-article__related h2{ font-size:1.5rem; margin-bottom:1rem; }
.blog-grid--related{ grid-template-columns: repeat(3,1fr); }
@media (max-width:860px){ .blog-grid{ grid-template-columns:1fr 1fr; } .blog-feat{ grid-template-columns:1fr; } .blog-grid--related{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .blog-grid{ grid-template-columns:1fr; } .mainmode{ grid-template-columns:1fr; } .newsletter__form{ flex-direction:column; } .aspect-toggle{ grid-template-columns:repeat(2,minmax(0,1fr)); } .aspect-toggle--sm{ flex-direction:column; } }

/* small helper: hide drawer AI sub-links group nicely */
.drawer .navdrop__lab{ padding:.8rem 1rem .3rem; }


/* ============================================================
   ACCOUNT CHIP (nav) — signed-in avatar / signed-out link
   ============================================================ */
.nav__acct{ display:inline-flex; align-items:center; }
.acctchip{ display:inline-flex; align-items:center; gap:.55rem; padding:.35rem .55rem .35rem .4rem; border-radius:999px;
  border:1px solid var(--line); background: oklch(18% .04 280 / .5); text-decoration:none; transition:.25s; }
.acctchip:hover{ border-color: var(--violet); transform: translateY(-1px); }
.acctchip__av{ width:34px;height:34px;border-radius:50%; display:grid;place-items:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.85rem; color:#fff; background:var(--grad); }
.acctchip__tx{ display:flex; flex-direction:column; line-height:1.05; padding-right:.35rem; }
.acctchip__tx b{ font-size:.85rem; color:var(--ink); }
.acctchip__tx small{ font-size:.7rem; color:var(--ink-3); }
.acctchip--out{ padding:.55rem 1rem; font-weight:600; color:var(--ink); }
.acctchip{ cursor:pointer; }
.acctchip__car{ display:grid; place-items:center; color:var(--ink-3); margin-left:-.1rem; transition: transform .25s; }
/* account dropdown menu */
.acctmenu{ position:relative; }
.acctmenu.is-open .acctchip__car{ transform: rotate(180deg); }
.acctmenu__pop{ position:absolute; top:calc(100% + .55rem); right:0; min-width:248px; z-index:60;
  background: var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:.5rem;
  box-shadow: var(--shadow); opacity:0; visibility:hidden; transform: translateY(-6px); transition:.2s; }
.acctmenu.is-open .acctmenu__pop{ opacity:1; visibility:visible; transform:none; }
.acctmenu__head{ display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem .7rem; border-bottom:1px solid var(--line-soft); margin-bottom:.4rem; }
.acctmenu__id{ display:flex; flex-direction:column; line-height:1.2; overflow:hidden; }
.acctmenu__id b{ font-size:.9rem; color:var(--ink); }
.acctmenu__id small{ font-size:.74rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acctmenu__pop a{ display:flex; align-items:center; gap:.65rem; padding:.6rem .6rem; border-radius:10px;
  color:var(--ink-2); font-size:.9rem; text-decoration:none; transition:.18s; }
.acctmenu__pop a svg{ width:17px; height:17px; flex-shrink:0; color:var(--ink-3); }
.acctmenu__pop a:hover{ background: oklch(60% .18 290 / .14); color:var(--ink); }
.acctmenu__pop a:hover svg{ color:var(--violet); }
.acctmenu__sep{ height:1px; background:var(--line-soft); margin:.4rem .3rem; }
.acctmenu__out{ color: oklch(70% .17 18) !important; }
.acctmenu__out:hover{ background: oklch(55% .2 18 / .14) !important; }
.acctmenu__out svg{ color: oklch(70% .17 18) !important; }
@media (max-width:860px){ .nav__acct{ display:none; } }

/* ============================================================
   AUTH PAGE (login / sign in)
   ============================================================ */
.auth{ min-height: calc(100vh - 200px); display:grid; place-items:center; padding: clamp(2rem,5vw,4rem) 0; position:relative; }
.auth::before{ content:""; position:absolute; left:50%; top:-10%; transform:translateX(-50%); width:min(120%,900px); aspect-ratio:1/1; border-radius:50%; background:var(--arc); filter:blur(var(--arc-blur)); pointer-events:none; z-index:0; }
.authcard{ position:relative; z-index:1; width:min(440px,100%); border:1px solid var(--line); border-radius:var(--radius-lg); background: linear-gradient(165deg, var(--bg-3), var(--bg-2)); box-shadow: var(--shadow); padding: clamp(1.6rem,3vw,2.4rem); }
.authcard__head{ text-align:center; margin-bottom:1.4rem; }
.authcard__head h1{ font-size: clamp(1.7rem,3.5vw,2.3rem); }
.authcard__head p{ color:var(--ink-3); margin-top:.4rem; font-size:.92rem; }
.authtabs{ display:flex; gap:.35rem; padding:.3rem; border:1px solid var(--line); border-radius:14px; background: oklch(16% .04 280 / .5); margin-bottom:1.4rem; }
.authtabs button{ flex:1; min-height:44px; border:0; border-radius:11px; background:transparent; color:var(--ink-2); font-family:inherit; font-weight:600; cursor:pointer; transition:.25s; }
.authtabs button[aria-selected="true"]{ background:var(--grad); color:#fff; }
.authfield{ margin-bottom:1rem; }
.authfield label{ font-size:.82rem; font-weight:600; color:var(--ink-2); display:block; margin-bottom:.45rem; }
.authfield input{ width:100%; min-height:50px; border-radius:12px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); color:var(--ink); padding:0 1rem; font-family:inherit; }
.authfield input:focus{ outline:2px solid var(--violet); outline-offset:1px; }
.authcard .btn{ margin-top:.4rem; }
.auth__alt{ text-align:center; color:var(--ink-3); font-size:.85rem; margin-top:1.2rem; }
.auth__alt a{ color:var(--ink-2); }
.auth__legal{ text-align:center; color:var(--ink-3); font-size:.75rem; margin-top:1rem; max-width:34ch; margin-inline:auto; }
.auth__sso{ display:grid; gap:.6rem; margin-bottom:1.2rem; }
.ssobtn{ display:flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px; border-radius:12px; border:1px solid var(--line); background: oklch(18% .04 280 / .4); color:var(--ink); font-family:inherit; font-weight:600; cursor:pointer; transition:.25s; text-decoration:none; }
.ssobtn:hover{ border-color:var(--violet); }
.ssobtn:disabled{ opacity:.5; cursor:not-allowed; }
.ssobtn:disabled:hover{ border-color:var(--line); }
.auth__or{ display:flex; align-items:center; gap:.8rem; color:var(--ink-3); font-size:.78rem; margin:0 0 1.2rem; }
.auth__or::before, .auth__or::after{ content:""; height:1px; flex:1; background:var(--line); }

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile{ padding: clamp(1.5rem,3vw,2.5rem) 0 4rem; }
.pf-head{ display:flex; align-items:center; gap:1.1rem; margin-bottom:1.8rem; }
.pf-head__av{ width:70px;height:70px;border-radius:20px; display:grid;place-items:center; font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.7rem; color:#fff; background:var(--grad); box-shadow:var(--glow); flex-shrink:0; }
.pf-head__tx h1{ font-size: clamp(1.5rem,3vw,2.1rem); }
.pf-head__tx p{ color:var(--ink-3); margin-top:.2rem; }
.pf-head__plan{ margin-left:auto; }
.planpill{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:999px; background:var(--grad-soft); border:1px solid var(--line); font-weight:600; font-size:.85rem; }
.pf-layout{ display:grid; grid-template-columns: 230px 1fr; gap: clamp(1.2rem,3vw,2rem); align-items:start; }
.pf-tabs{ display:flex; flex-direction:column; gap:.3rem; position:sticky; top:90px; }
.pf-tab{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--ink-2); font-family:inherit; font-weight:600; cursor:pointer; text-align:left; transition:.25s; }
.pf-tab svg{ width:18px;height:18px; flex-shrink:0; }
.pf-tab:hover{ background: oklch(18% .04 280 / .5); }
.pf-tab.is-on{ background:var(--grad-soft); border-color:var(--line); color:var(--ink); }
.pf-tab--danger{ color: var(--ink-3); margin-top:.5rem; }
.pf-tab--danger:hover{ color:#fff; background: oklch(40% .14 20 / .4); }
.pf-panel{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-2); padding: clamp(1.3rem,3vw,2rem); }
.pf-panel + .pf-panel{ margin-top:1.2rem; }
.pf-report{ scroll-margin-top: 90px; }
.pf-panel h2{ font-size: clamp(1.3rem,2.5vw,1.7rem); margin-bottom:.3rem; }
.pf-panel__sub{ color:var(--ink-3); margin-bottom:1.6rem; font-size:.92rem; }
.pf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.pf-field{ display:flex; flex-direction:column; }
.pf-field--full{ grid-column:1 / -1; }
.pf-field label{ font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:.45rem; }
.pf-field input{ min-height:48px; border-radius:12px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); color:var(--ink); padding:0 1rem; font-family:inherit; }
.pf-field input:focus{ outline:2px solid var(--violet); outline-offset:1px; }
.pf-field small{ color:var(--ink-3); font-size:.74rem; margin-top:.35rem; }
.pf-actions{ margin-top:1.6rem; display:flex; gap:.7rem; flex-wrap:wrap; }
.pf-credential-actions{ display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-top:.9rem; }
.pf-credential-actions .pf-reset-btn{ color:oklch(72% .17 24); border-color:oklch(55% .16 24 / .45); }
.pf-test-status,.pf-save-hint{ color:var(--ink-3); font-size:.76rem; }
.pf-test-status.is-passed{ color:oklch(78% .15 150); }
.pf-test-status.is-failed{ color:oklch(72% .17 24); flex-basis:100%; line-height:1.45; }
.pf-save-hint{ align-self:center; }
.pf-provider-notice{ margin-top:.9rem; padding:.65rem .8rem; border:1px solid oklch(70% .13 75 / .45); background:oklch(96% .05 85 / .35); border-radius:.55rem; color:var(--ink-2); font-size:.82rem; line-height:1.5; }
.pf-provider-notice strong{ color:oklch(58% .14 65); font-weight:600; }
.pf-sec{ border-top:1px solid var(--line-soft); margin-top:1.6rem; padding-top:1.4rem; }
.pf-sec:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.pf-sec h3{ font-size:1.05rem; margin-bottom:.3rem; }
.pf-sec p{ color:var(--ink-3); font-size:.85rem; margin-bottom:1rem; }

[data-librarypage] .library-head{
  display:flex; align-items:stretch; justify-content:space-between; gap:1.2rem;
  margin-bottom:1.8rem; padding:clamp(1.2rem,3vw,1.7rem);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(135deg, oklch(18% .05 280 / .78), oklch(13% .04 280 / .72));
}
[data-librarypage] .library-head__copy{ min-width:0; max-width:680px; }
[data-librarypage] .library-head__copy h1{ font-size:clamp(1.7rem,3.5vw,2.4rem); margin:.45rem 0 .35rem; }
[data-librarypage] .library-head__copy p{ color:var(--ink-3); font-size:.94rem; line-height:1.55; }
[data-librarypage] .library-head__stats{ display:grid; grid-template-columns:repeat(3,minmax(92px,1fr)); gap:.65rem; min-width:min(100%,360px); }
[data-librarypage] .library-head__stat{
  display:flex; flex-direction:column; justify-content:center; gap:.18rem;
  padding:.85rem .9rem; border:1px solid var(--line-soft); border-radius:14px;
  background:oklch(12% .04 280 / .58);
}
[data-librarypage] .library-head__stat b{ font-family:"Bricolage Grotesque"; font-size:1.45rem; line-height:1; }
[data-librarypage] .library-head__stat span{ color:var(--ink-3); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
@media (max-width:820px){
  [data-librarypage] .library-head{ flex-direction:column; }
  [data-librarypage] .library-head__stats{ min-width:0; }
}
@media (max-width:560px){
  [data-librarypage] .library-head__stats{ grid-template-columns:1fr; }
}

/* live preview */
.livemon{ margin-top:1rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:oklch(13% .04 280 / .78); }
/* Side-by-side input (left) / moderated output (right) live monitors. */
.livemonPair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.livemonPair .livemon{ margin-top:1rem; min-width:0; }
.livemonPair .livemon-out-scope{ min-width:0; }
/* Distinguish the moderated-output monitor with a subtle green accent. */
.livemon__live--out i{ background:oklch(72% .19 150); box-shadow:0 0 12px oklch(72% .19 150 / .7); }
.livemon--out{ border-color:oklch(50% .12 150 / .55); }
@media (max-width:860px){ .livemonPair{ grid-template-columns:1fr; } }
.livemon__screen{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; min-height:220px; background:#05050a; overflow:hidden; }
.livemon__screen video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center center; background:#05050a; z-index:2; pointer-events:none; }
.livemon__screen .mockfeed{ position:absolute; inset:0; display:grid; place-items:center; z-index:1; }
.mockfeed__bars{ position:absolute; left:0; right:0; bottom:0; height:48px; display:flex; align-items:flex-end; gap:4px; padding:0 18px 12px; opacity:.32; }
.mockfeed__bars::before{ content:""; width:100%; height:100%; border-radius:10px 10px 0 0; background:
  linear-gradient(90deg,
    oklch(68% .20 282 / .85) 0 3%, transparent 3% 6%,
    oklch(72% .18 322 / .9) 6% 10%, transparent 10% 14%,
    oklch(66% .20 282 / .7) 14% 17%, transparent 17% 21%,
    oklch(72% .18 322 / .9) 21% 26%, transparent 26% 31%,
    oklch(68% .20 282 / .8) 31% 34%, transparent 34% 39%,
    oklch(72% .18 322 / .75) 39% 43%, transparent 43% 48%,
    oklch(66% .20 282 / .9) 48% 52%, transparent 52% 57%,
    oklch(72% .18 322 / .7) 57% 60%, transparent 60% 65%,
    oklch(68% .20 282 / .88) 65% 69%, transparent 69% 74%,
    oklch(72% .18 322 / .78) 74% 77%, transparent 77% 82%,
    oklch(66% .20 282 / .9) 82% 87%, transparent 87% 92%,
    oklch(72% .18 322 / .82) 92% 96%, transparent 96% 100%);
  transform-origin:bottom; }
.livemon__live{ position:absolute; top:.8rem; left:.8rem; z-index:3; }
.livemon__loading{ position:absolute; inset:0; z-index:4; display:none; place-items:center; align-content:center; gap:.75rem; background:radial-gradient(circle at 50% 45%, oklch(18% .06 285 / .74), oklch(5% .02 280 / .82)); color:var(--ink); font-family:"Space Grotesk"; font-size:.84rem; letter-spacing:.03em; text-transform:uppercase; }
.livemon.is-loading .livemon__loading{ display:grid; }
.livemon__loading span{ width:52px; height:52px; border-radius:50%; border:3px solid oklch(78% .03 280 / .18); border-top-color:var(--cat-a); border-right-color:var(--cat-b); animation:liveVideoLoading .85s linear infinite; box-shadow:0 0 28px color-mix(in oklch,var(--cat-a) 30%,transparent); }
.livemon__loading b{ font-size:.78rem; color:var(--ink-2); font-weight:700; }
.livemon__wave{ height:46px; display:none; align-items:flex-end; justify-content:center; gap:5px; padding:.55rem .75rem; border-radius:14px; border:1px solid var(--line-soft); background:oklch(10% .035 280 / .52); pointer-events:none; }
.livemon.is-running:not(.is-loading) .livemon__wave{ display:flex; }
.livemon__wave i{ display:block; width:7px; min-height:8px; border-radius:999px; background:linear-gradient(180deg,var(--cat-a),var(--cat-b)); opacity:.78; box-shadow:0 0 16px color-mix(in oklch,var(--cat-a) 40%,transparent); transform-origin:bottom; animation:liveWaveColumn 1.05s ease-in-out infinite; }
.livemon__wave i:nth-child(2){ height:18px; animation-delay:-.18s; }
.livemon__wave i:nth-child(3){ height:30px; animation-delay:-.34s; }
.livemon__wave i:nth-child(4){ height:22px; animation-delay:-.08s; }
.livemon__wave i:nth-child(5){ height:36px; animation-delay:-.26s; }
.livemon__wave i:nth-child(6){ height:16px; animation-delay:-.42s; }
.livemon__wave i:nth-child(7){ height:28px; animation-delay:-.12s; }
.livemon__wave i:nth-child(8){ height:20px; animation-delay:-.31s; }
.livemon__wave i:nth-child(9){ height:34px; animation-delay:-.2s; }
.livemon__wave i:nth-child(10){ height:18px; animation-delay:-.38s; }
.livemon__wave i:nth-child(11){ height:26px; animation-delay:-.15s; }
.livemon__wave i:nth-child(12){ height:14px; animation-delay:-.45s; }
.livemon__mute{ position:absolute; right:.8rem; bottom:.8rem; z-index:3; }
.livemon__body{ padding:1rem; display:grid; gap:.55rem; align-items:center; }
.livemon__row{ display:flex; justify-content:space-between; gap:1rem; align-items:center; min-width:0; }
.livemon__stat{ display:flex; gap:.75rem; color:var(--ink-3); font-size:.82rem; }
.livemon__hint{ grid-column:1/-1; }
@keyframes liveVideoLoading{ to{ transform:rotate(360deg); } }
@keyframes liveWaveColumn{ 0%,100%{ transform:scaleY(.45); opacity:.52; } 45%{ transform:scaleY(1.08); opacity:.95; } }
@media (max-width:720px){ .livemon__body{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .mockfeed__bars::before,.livemon__loading span,.livemon__wave i{ animation:none; } }

/* Compact Highlights ingest monitor: source preview + live audio spectrum. */
.livemon--spectrum{ display:grid; grid-template-columns:168px minmax(0,1fr); gap:.8rem; align-items:stretch; padding:.65rem; border-radius:14px; background:oklch(10% .045 280 / .82); }
.livemon--spectrum .livemon__screen{ width:168px; min-height:0; aspect-ratio:16/9; border:1px solid var(--line-soft); border-radius:10px; }
.livemon--spectrum .livemon__screen video{ object-fit:cover; }
.livemon--spectrum .livemon__live{ top:.4rem; left:.45rem; display:inline-flex; align-items:center; gap:.3rem; padding:.16rem .4rem; border-radius:5px; background:oklch(13% .035 280 / .7); color:#fff; font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; backdrop-filter:blur(4px); }
.livemon--spectrum .livemon__live i{ width:6px; height:6px; border-radius:50%; background:oklch(67% .2 25); box-shadow:0 0 9px oklch(67% .2 25 / .75); animation:liveSpectrumPulse 1.35s ease-in-out infinite; }
.livemon--spectrum .livemon__body{ min-width:0; padding:0; display:flex; flex-direction:column; justify-content:center; gap:.4rem; }
.livemon--spectrum .livemon__row{ min-height:20px; }
.livemon--spectrum .livemon__label{ color:var(--ink-2); font-size:.76rem; font-weight:650; }
.livemon--spectrum .livemon__stat{ font-size:.68rem; }
.livemon--spectrum .livemon__stat b{ color:var(--cat-a); }
.livemon--spectrum .livemon__wave{ flex:1 1 auto; width:100%; height:58px; min-height:58px; align-items:flex-end; justify-content:stretch; gap:3px; padding:.45rem .5rem; border-radius:9px; background:oklch(14% .035 280 / .72); overflow:hidden; }
.livemon--spectrum .livemon__wave i{ flex:1 1 0; width:auto; height:100%!important; min-height:0; border-radius:2px 2px 0 0; opacity:.88; animation-name:liveSpectrumBar; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-duration:1.08s; }
.livemon--spectrum .livemon__wave i:nth-child(4n+1){ animation-delay:-.17s; animation-duration:.88s; }
.livemon--spectrum .livemon__wave i:nth-child(4n+2){ animation-delay:-.54s; animation-duration:1.26s; }
.livemon--spectrum .livemon__wave i:nth-child(4n+3){ animation-delay:-.32s; animation-duration:1.48s; }
.livemon--spectrum .livemon__wave i:nth-child(7n){ animation-delay:-.76s; animation-duration:1.7s; }
.livemon--spectrum .livemon__hint{ font-size:.66rem; line-height:1.35; }
@keyframes liveSpectrumBar{ 0%,100%{ transform:scaleY(.18); opacity:.58; } 35%{ transform:scaleY(.88); opacity:.95; } 62%{ transform:scaleY(.42); opacity:.72; } 82%{ transform:scaleY(1); opacity:1; } }
@keyframes liveSpectrumPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.38; transform:scale(.72); } }
@media (max-width:640px){
  .livemon--spectrum{ grid-template-columns:120px minmax(0,1fr); gap:.6rem; }
  .livemon--spectrum .livemon__screen{ width:120px; }
  .livemon--spectrum .livemon__wave{ height:46px; min-height:46px; gap:2px; }
  .livemon--spectrum .livemon__hint{ display:none; }
}
@media (max-width:460px){
  .livemon--spectrum{ grid-template-columns:1fr; }
  .livemon--spectrum .livemon__screen{ width:100%; max-height:180px; }
}
@media (prefers-reduced-motion:reduce){
  .livemon--spectrum .livemon__live i,.livemon--spectrum .livemon__wave i{ animation:none; transform:scaleY(.55); }
}
.liveReviewPanel{ margin-top:1rem; padding:1rem; border:1px solid var(--line-soft); border-radius:16px; background:oklch(11% .04 280 / .58); }
.liveReviewHead{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.9rem; flex-wrap:wrap; }
.liveReviewHead__actions{ display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.liveReviewHead b{ display:block; }
.liveReviewHead span,.liveReviewEmpty,.liveReviewRow small{ color:var(--ink-3); font-size:.82rem; }
.liveInputWarning{ display:flex; align-items:flex-start; gap:.55rem; margin:0 0 .9rem; padding:.6rem .8rem; border:1px solid oklch(70% .17 70 / .55); border-radius:12px; background:oklch(60% .17 70 / .14); color:oklch(88% .12 78); font-size:.82rem; line-height:1.4; }
.liveInputWarning[hidden]{ display:none; }
.liveInputWarning__icon{ flex:0 0 auto; font-size:.95rem; line-height:1.3; }
.liveReviewCandidatesSection{ margin-bottom:1rem; }
.liveReviewCandidatesSection h4{ margin:0 0 .55rem; font-size:.9rem; color:var(--ink-2); }
.liveReviewCandidatesSection .reviewPanel__list{ max-height:none; }
.liveReviewPanel--focus .liveReviewCandidatesSection > h4 + .liveReviewPager{ display:none; }
.liveReviewPanel--focus .liveReviewCandidatesSection > .reviewPanel__list + .liveReviewPager{ width:calc(46% - 1.2rem); margin:.8rem 1.2rem .9rem auto; justify-content:flex-start; }
.liveReviewPanel--focus .liveReviewCandidatesSection > .reviewPanel__list + .liveReviewPager .liveReviewPager__range,
.liveReviewPanel--focus .liveReviewCandidatesSection > .reviewPanel__list + .liveReviewPager .liveReviewPager__pageSize{ display:none; }
.liveReviewPanel--focus .liveReviewCandidatesSection > .reviewPanel__list + .liveReviewPager .btn:not(.is-active){ min-width:64px; }
.liveReviewGo{ display:flex; align-items:center; gap:.9rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line-soft); }
.liveReviewGo__confirm{ min-width:280px; min-height:52px; padding:.75rem 1.35rem; border:0; border-radius:999px; background:linear-gradient(105deg,var(--cat-a),var(--cat-b)); color:#fff; font-size:.95rem; box-shadow:0 10px 30px color-mix(in oklch,var(--cat-a) 28%,transparent); }
.liveReviewGo__confirm:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 14px 34px color-mix(in oklch,var(--cat-a) 36%,transparent); }
.liveReviewGo__confirm b{ margin:0 .2rem; font-family:"Bricolage Grotesque"; font-size:1.05em; }
.liveReviewGo__hint{ color:var(--ink-3); font-size:.76rem; line-height:1.45; }
@media (max-width:920px){
  .liveReviewPanel--focus .liveReviewCandidatesSection > .reviewPanel__list + .liveReviewPager{ width:auto; margin:.8rem 0; }
}
@media (max-width:640px){
  .liveReviewGo{ align-items:stretch; flex-direction:column; }
  .liveReviewGo__confirm{ width:100%; min-width:0; }
}
/* Live review category picker (Overall vs Speaker) sitting at the top of the
   review panel. Mirrors the chunky look of .liveCategoryTabs used on the
   Variety page — larger hit area, bold type, and a strong "pressed" state so
   the current view is obvious at a glance. */
.liveReviewTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:.9rem;
  padding:6px;
  border:1px solid var(--line-soft);
  border-radius:14px;
  background:oklch(11% .05 278 / .72);
  box-shadow:inset 0 1px 0 oklch(100% 0 0 / 0.05);
}
.liveReviewTab{
  flex:1 1 0;
  min-height:40px;
  padding:8px 18px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--ink-2);
  font:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.liveReviewTab:hover{
  color:var(--ink);
  border-color:oklch(75% 0.12 292 / .35);
  background:oklch(100% 0 0 / .05);
}
.liveReviewTab.is-active{
  color:#fff;
  border-color:oklch(85% 0.12 292 / .55);
  background:var(--grad);
  box-shadow:var(--glow), 0 4px 14px oklch(0% 0 0 / .24);
}
.liveReviewTab.is-active:hover{
  background:var(--grad);
}
@media (max-width:640px){
  .liveReviewTab{ min-height:36px; padding:6px 14px; font-size:12.5px; }
}
.liveReviewSpeakerTabsHost{ margin:.15rem 0 .85rem; }
.liveReviewSpeakerTabsHost[hidden]{ display:none; }
.liveReviewSpeakerTabsWrap{ display:flex; flex-direction:column; gap:.45rem; }
.liveReviewSpeakerTabsLabel{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.liveReviewSpeakerTabs{ display:flex; gap:.4rem; flex-wrap:wrap; padding:.15rem 0; }
.liveReviewSpeakerTab{ border:1px solid var(--line-soft); border-radius:999px; background:oklch(12% .04 280 / .62); color:var(--ink-3); padding:.32rem .72rem; font:inherit; font-size:.78rem; cursor:pointer; transition:.2s; }
.liveReviewSpeakerTab:hover{ border-color:oklch(62% .14 290 / .45); color:var(--ink-2); }
/* Two active-state hooks on purpose: the live panel's speaker tabs re-render
   themselves and mark the current one with `.is-active`, while the VOD review
   filter bar reuses this same visual language but is a toggle-button group whose
   state lives in `aria-pressed` (updated in place by `wireReviewPager`). Styling
   both keeps the two panels pixel-identical without touching either's logic. */
.liveReviewSpeakerTab.is-active,
.liveReviewSpeakerTab[aria-pressed="true"]{ border-color:oklch(62% .14 290 / .55); background:oklch(18% .06 290 / .72); color:var(--ink); box-shadow:inset 0 0 0 1px oklch(62% .14 290 / .35); }
.liveReviewPager{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin:.55rem 0; color:var(--ink-3); font-size:.82rem; }
.liveReviewPager__controls{ display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.liveReviewPager__controls .btn.is-active{ border-color:transparent; background:var(--grad-soft); box-shadow:inset 0 0 0 1.5px var(--violet); }
.liveReviewPager__ellipsis{ color:var(--ink-3); padding:0 .15rem; }
.liveReviewPager__pageSize{ display:flex; align-items:center; gap:.35rem; margin-left:.25rem; color:var(--ink-3); font-size:.78rem; }
.liveReviewPager__pageSize select{ border:1px solid var(--line-soft); border-radius:999px; background:oklch(12% .04 280 / .72); color:var(--ink-2); padding:.32rem .55rem; font:inherit; }
.reviewCard__markers{ position:absolute; inset:0; pointer-events:none; }
.reviewCard__marker{ position:absolute; top:50%; height:8px; transform:translateY(-50%); border-radius:3px; background:oklch(62% .03 280 / .35); z-index:1; }
.reviewCard__marker.is-active{ background:linear-gradient(180deg,oklch(68% .16 290),oklch(52% .14 280)); z-index:3; }
.reviewCard__markerLabel{ position:absolute; top:calc(100% + 2px); left:50%; transform:translateX(-50%); font-size:10px; color:var(--ink-3); white-space:nowrap; }
.reviewCard__marker.is-active .reviewCard__markerLabel{ color:oklch(72% .16 290); }
.reviewCard__clip{ z-index:4; }
.reviewCard__playhead{ z-index:5; }
.liveReviewGrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.liveReviewGrid h4{ margin:0 0 .55rem; font-size:.9rem; color:var(--ink-2); }
.liveReviewBatchSection{ grid-column:1 / -1; }
[data-live-batches-list]{ max-height:min(62vh,560px); overflow-y:auto; overscroll-behavior:contain; }
[data-live-clips-list]{ max-height:min(42vh,320px); overflow-y:auto; overscroll-behavior:contain; }
.liveReviewRow,.liveBatchMini{ display:flex; gap:.65rem; align-items:flex-start; padding:.65rem; border:1px solid var(--line-soft); border-radius:12px; background:oklch(14% .04 280 / .55); margin-bottom:.55rem; }
.liveBatchCard{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr); gap:1rem; align-items:start; padding:.85rem; border-radius:14px; }
.liveBatchCard__info{ min-width:0; display:flex; flex-direction:column; justify-content:center; gap:.65rem; }
.liveBatchCard__preview{ aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--line-soft); background:#000; }
.liveBatchCard__video{ display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.liveBatchCard__select{ align-items:center; border-color:oklch(62% .14 290 / .45); background:oklch(18% .06 290 / .35); }
.liveBatchCard__select input{ width:18px; height:18px; accent-color:oklch(68% .16 290); }
.liveBatchName label{ display:flex; flex-direction:column; gap:.3rem; color:var(--ink-3); font-size:.78rem; }
.liveBatchName input{ width:100%; min-width:0; border:1px solid var(--line); border-radius:10px; background:oklch(10% .035 280 / .7); color:var(--ink); padding:.5rem .6rem; }
.liveFinalPreview{ border:1px solid var(--line-soft); border-radius:12px; background:oklch(14% .04 280 / .55); padding:.75rem; }
.liveClipCard{ border:1px solid var(--line-soft); border-radius:12px; background:oklch(14% .04 280 / .55); margin-bottom:.55rem; overflow:hidden; padding:.85rem; }
.liveClipCard .liveReviewRow{ border:0; background:transparent; padding:0; margin:0; }
@media (max-width:920px){
  .reviewCard__layout{ grid-template-columns:1fr; }
}
.liveReviewRow span{ min-width:0; }
.liveReviewRow b,.liveBatchPick b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.liveReviewRow small,.liveBatchPick small{ display:block; margin-top:.15rem; }
.liveBatchMini:not(.liveBatchCard){ display:block; }
.liveBatchPick{ display:flex; gap:.55rem; align-items:flex-start; }
.liveBatchRename{ display:flex; gap:.45rem; flex-wrap:wrap; }
.liveBatchRename input{ min-width:0; flex:1; border:1px solid var(--line); border-radius:10px; background:oklch(10% .035 280 / .7); color:var(--ink); padding:.45rem .6rem; }
.liveReviewActions{ display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.7rem; }
@media (max-width:920px){ .liveReviewGrid{ grid-template-columns:1fr; } .liveBatchCard{ grid-template-columns:1fr; } .liveReviewHead{ align-items:flex-start; flex-direction:column; } }
/* task detail: pipeline steps */
.jobsteps{ display:grid; grid-template-columns:repeat(var(--step-count,5),minmax(0,1fr)); gap:.5rem; margin-top:.9rem; }
.jobstep{ border:1px solid var(--line-soft); border-radius:12px; background:oklch(14% .04 280 / .5); padding:.55rem .5rem; text-align:center; }
.jobstep b{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.jobstep small{ display:block; margin-top:.15rem; color:var(--ink-3); font-size:.68rem; }
.jobstep.is-active{ border-color:var(--violet); background:oklch(30% .12 290 / .35); }
.jobstep.is-done{ border-color:oklch(72% .17 160 / .45); background:oklch(40% .12 160 / .14); }
@media (max-width:720px){ .jobsteps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* task detail: review candidate selection */
.reviewPanel{ margin-top:1rem; padding:1rem; border:1px solid var(--line-soft); border-radius:16px; background:oklch(11% .04 280 / .58); }
.reviewPanel__head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.9rem; flex-wrap:wrap; }
.reviewPanel__head b{ display:block; }
.reviewPanel__head span{ color:var(--ink-3); font-size:.82rem; }
.reviewPanel__list{ display:grid; gap:.85rem; }
.reviewPager{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin:.55rem 0; color:var(--ink-3); font-size:.82rem; }
.reviewPager__controls{ display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.reviewPager__page{ color:var(--ink-2); font-weight:600; padding:0 .2rem; }
.reviewPager__pageSize{ display:inline-flex; align-items:center; gap:.4rem; }
.reviewPager__pageSize select{ border:1px solid var(--line); border-radius:8px; background:oklch(10% .035 280 / .7); color:var(--ink); padding:.3rem .45rem; font:inherit; font-size:.8rem; }
.reviewPanel__buffers{ display:flex; gap:.65rem; flex-wrap:wrap; align-items:end; margin-bottom:.85rem; padding:.75rem; border:1px solid var(--line-soft); border-radius:12px; background:oklch(13% .04 280 / .45); }
.reviewPanel__buffers label{ display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:var(--ink-3); }
.reviewPanel__buffers input{ width:96px; border:1px solid var(--line); border-radius:10px; background:oklch(10% .035 280 / .7); color:var(--ink); padding:.45rem .55rem; }
.reviewPanel__bufferNote{ color:var(--ink-3); font-size:.82rem; margin-bottom:.2rem; }
.reviewCard{ border:1px solid var(--line-soft); border-radius:14px; background:oklch(14% .04 280 / .55); padding:.85rem; }
.reviewCard__layout{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr); gap:1rem; align-items:start; }
.reviewCard__media{ min-width:0; }
.reviewCard__side{ min-width:0; display:flex; flex-direction:column; justify-content:center; }
.reviewCard__pick{ display:flex; gap:.65rem; align-items:flex-start; margin:0; }
.reviewCard__pick span.reviewCard__copy{ min-width:0; flex:1; }
.reviewCard__pick b{ display:block; font-size:.95rem; line-height:1.35; }
.reviewCard__titleRow{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.reviewCard__titleRow > b{ display:inline; }
.reviewCard__duration{ display:inline-flex; align-items:center; padding:.14rem .4rem; border-radius:999px; background:oklch(100% 0 0 / .07); color:var(--ink-3); font-size:.68rem; font-weight:700; line-height:1.25; font-variant-numeric:tabular-nums; }
.reviewCard__batchTags{ display:inline-flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.reviewCard__batchTag{ display:inline-flex; align-items:center; max-width:100%; padding:.16rem .45rem; border:1px solid color-mix(in oklch,var(--cat-a) 42%,var(--line)); border-radius:999px; background:color-mix(in oklch,var(--cat-a) 13%,transparent); color:var(--ink-2); font-size:.67rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.reviewCard__meta{ display:block; margin-top:.35rem; color:var(--ink-3); font-size:.78rem; line-height:1.45; }
.reviewCard__desc{ margin:.65rem 0 0; color:var(--ink-2); font-size:.86rem; line-height:1.55; }
.reviewCard__videoWrap{ position:relative; aspect-ratio:16/9; margin-bottom:.65rem; border-radius:12px; overflow:hidden; border:1px solid var(--line-soft); background:#000; }
.reviewCard__video{ display:block; width:100%; height:100%; object-fit:contain; background:#000; }
/* Tag badge overlaid on the candidate clip (Goal / Near miss / Player / …) */
.reviewCard__tag{ position:absolute; top:.5rem; left:.5rem; z-index:2; padding:.22rem .55rem; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; backdrop-filter:blur(4px); background:oklch(45% .12 285 / .85); pointer-events:none; }
.reviewCard__tag.is-goal{ background:oklch(58% .17 150 / .9); }
.reviewCard__tag.is-nearmiss{ background:oklch(68% .16 80 / .92); color:oklch(25% .06 80); }
.reviewCard__tag.is-player{ background:oklch(58% .17 255 / .9); }
/* Variety speaker badge (Speaker 1 / Speaker 2 / …) */
.reviewCard__tag.is-speaker{ background:oklch(54% .2 292 / .9); }
/* Tag filter bar */
.reviewFilter{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:.35rem 0 .7rem; }
.reviewFilter__label{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.reviewFilter__opts{ display:flex; gap:.4rem; flex-wrap:wrap; }
.reviewFilter__opt{ display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .65rem; border-radius:999px; border:1px solid var(--line-soft); background:var(--bg-2); color:var(--ink-2); font:inherit; font-size:.78rem; font-weight:600; cursor:pointer; transition:.15s; }
.reviewFilter__opt:hover{ border-color:var(--cat-a); }
.reviewFilter__opt[aria-pressed="true"]{ border-color:var(--cat-a); background:color-mix(in oklch, var(--cat-a) 16%, var(--bg-2)); color:var(--ink); }
.reviewFilter__count{ font-size:.68rem; color:var(--ink-3); font-weight:700; }
.reviewFilter__opt[aria-pressed="true"] .reviewFilter__count{ color:var(--ink-2); }
.reviewCard__timeline{ position:relative; height:44px; margin-bottom:.45rem; }
.reviewCard__track{ position:absolute; inset:0; top:50%; height:8px; transform:translateY(-50%); border-radius:999px; background:oklch(28% .05 280 / .55); border:1px solid var(--line-soft); }
.reviewCard__clip{ position:absolute; top:50%; height:18px; transform:translateY(-50%); border-radius:999px; background:linear-gradient(180deg,oklch(68% .16 290),oklch(52% .14 280)); box-shadow:0 0 0 1px oklch(72% .16 290 / .35); }
.reviewCard__handle{ position:absolute; top:50%; width:10px; height:22px; transform:translate(-50%,-50%); border:0; border-radius:6px; background:oklch(92% .02 280); box-shadow:0 0 0 1px oklch(20% .04 280 / .45); cursor:ew-resize; padding:0; }
.reviewCard__handle--start{ left:0; }
.reviewCard__handle--end{ left:100%; }
.reviewCard__playhead{ position:absolute; top:50%; width:2px; height:28px; transform:translate(-50%,-50%); background:oklch(92% .02 280); border-radius:999px; box-shadow:0 0 0 2px oklch(15% .04 280 / .55); pointer-events:none; }
.reviewCard__times{ display:flex; justify-content:space-between; gap:.65rem; color:var(--ink-3); font-size:.78rem; font-family:var(--mono, monospace); }

/* Focused one-at-a-time VOD review — mirrors the Pulse short-drama reference
   while retaining the existing player, trim, paging and confirmation hooks. */
.srOnly{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.reviewPanel--focus{ padding:1.35rem; border-color:color-mix(in oklch,var(--cat-a) 22%,var(--line-soft)); background:linear-gradient(145deg,oklch(12% .055 285 / .8),oklch(8% .035 275 / .9)); box-shadow:0 28px 80px oklch(8% .08 285 / .3); }
.reviewPanel--focus .reviewPanel__head{ align-items:flex-start; margin-bottom:.75rem; }
.reviewPanel--focus .reviewPanel__head > div{ max-width:680px; }
.reviewPanel--focus .reviewPanel__eyebrow{ display:block; margin-bottom:.35rem; color:var(--ink-2); font-size:.7rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.reviewPanel--focus .reviewPanel__head > div > span:last-child{ display:block; max-width:62ch; line-height:1.55; }
.reviewPanel--focus .reviewPanel__kept{ display:flex; align-items:baseline; gap:.08rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.reviewPanel--focus .reviewPanel__kept b{ color:var(--ink); font-family:"Bricolage Grotesque"; font-size:1.05rem; }
.reviewPanel--focus .reviewPanel__buffers{ padding:.6rem .75rem; margin:.75rem 0; border-radius:11px; background:oklch(13% .04 280 / .3); }
.reviewPanel--focus .reviewLegend{ margin:.6rem 0; }
.reviewPanel--focus .liveReviewSpeakerTabsWrap{ margin:.6rem 0; }
.reviewPanel--focus .reviewPanel__list{ display:block; }
.reviewPanel--focus .reviewCard{ padding:0; overflow:hidden; border-radius:17px; border-color:color-mix(in oklch,var(--cat-a) 18%,var(--line-soft)); background:transparent; box-shadow:0 18px 48px oklch(5% .05 280 / .25); }
.reviewPanel--focus .reviewCard__layout{ grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr); gap:0; min-height:610px; align-items:stretch; }
.reviewPanel--focus .reviewCard__media{ display:flex; flex-direction:column; min-height:0; padding:0 1rem 1rem; background:#06060d; }
.reviewPanel--focus .reviewCard__videoWrap{ flex:1 1 auto; display:grid; place-items:center; min-height:490px; margin:0 -1rem .7rem; border:0; border-radius:0; background:#030309; aspect-ratio:auto; }
.reviewPanel--focus .reviewCard__video{ width:100%; height:100%; max-height:560px; object-fit:contain; background:#030309; }
.reviewPanel--focus .reviewCard__tag{ top:.65rem; left:.65rem; }
.reviewPanel--focus .reviewCard__trimLabel{ margin:0 0 .2rem; color:var(--ink-3); font-size:.7rem; font-weight:700; }
.reviewPanel--focus .reviewCard__timeline{ height:40px; margin:0; }
.reviewPanel--focus .reviewCard__track{ height:10px; background:oklch(22% .05 280 / .8); }
.reviewPanel--focus .reviewCard__clip{ height:24px; border-radius:4px; background:linear-gradient(90deg,var(--cat-a),var(--cat-b)); box-shadow:0 0 20px color-mix(in oklch,var(--cat-a) 32%,transparent); }
.reviewPanel--focus .reviewCard__handle{ width:8px; height:28px; border-radius:3px; background:#fff; box-shadow:0 0 0 1px oklch(15% .04 280 / .5); }
.reviewPanel--focus .reviewCard__times{ font-family:inherit; font-size:.7rem; font-weight:700; }
.reviewPanel--focus .reviewCard__side{ min-height:100%; padding:1.15rem 1.2rem; justify-content:flex-start; background:oklch(8% .04 280 / .88); }
.reviewPanel--focus .reviewCard__sideHead{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.8rem; color:var(--ink-3); font-size:.72rem; font-weight:700; }
.reviewPanel--focus .reviewCard__hookBadge{ display:inline-flex; align-items:center; min-height:24px; padding:.18rem .55rem; border-radius:999px; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.reviewPanel--focus .reviewCard__hookBadge .reviewCard__event{ margin:0; color:inherit; }
.reviewPanel--focus .reviewCard__copy{ min-width:0; }
.reviewPanel--focus .reviewCard__titleRow > b{ font-family:"Bricolage Grotesque"; font-size:1.05rem; }
.reviewPanel--focus .reviewCard__duration{ margin-left:auto; }
.reviewPanel--focus .reviewCard__meta{ margin-top:.2rem; }
.reviewPanel--focus .reviewCard__scoreWrap{ display:flex; align-items:center; gap:1.1rem; margin:1rem 0; }
.reviewPanel--focus .reviewCard__dualRing{ position:relative; width:126px; height:126px; flex:0 0 126px; }
.reviewPanel--focus .reviewCard__dualRing svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.reviewPanel--focus .reviewCard__scoreTrack,.reviewPanel--focus .reviewCard__scoreArc{ fill:none; stroke-width:10; }
.reviewPanel--focus .reviewCard__scoreTrack{ stroke:oklch(28% .06 285 / .65); }
.reviewPanel--focus .reviewCard__scoreArc{ stroke-linecap:round; filter:drop-shadow(0 0 5px color-mix(in oklch,var(--cat-a) 45%,transparent)); }
.reviewPanel--focus .reviewCard__scoreArc--viral{ stroke:var(--cat-a); }
.reviewPanel--focus .reviewCard__scoreArc--hook{ stroke:var(--cat-b); }
.reviewPanel--focus .reviewCard__scoreCenter{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.reviewPanel--focus .reviewCard__scoreCenter b{ font-family:"Bricolage Grotesque"; font-size:1.65rem; line-height:1; color:var(--cat-a); }
.reviewPanel--focus .reviewCard__scoreCenter small{ margin-top:.15rem; color:var(--ink-3); font-size:.52rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.reviewPanel--focus .reviewCard__scoreKey{ display:grid; gap:.55rem; min-width:100px; }
.reviewPanel--focus .reviewCard__scoreKey span{ display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:.45rem; color:var(--ink-2); font-size:.78rem; }
.reviewPanel--focus .reviewCard__scoreKey i{ width:10px; height:10px; border-radius:3px; }
.reviewPanel--focus .reviewCard__scoreKey i.is-viral{ background:var(--cat-a); }
.reviewPanel--focus .reviewCard__scoreKey i.is-hook{ background:var(--cat-b); }
.reviewPanel--focus .reviewCard__scoreKey b{ color:var(--ink); }
.reviewPanel--focus .reviewCard__reasons{ display:grid; gap:.75rem; }
.reviewPanel--focus .reviewCard__reasons p{ display:flex; align-items:flex-start; gap:.55rem; margin:0; color:var(--ink-2); font-size:.78rem; line-height:1.5; }
.reviewPanel--focus .reviewCard__reasons p > span:first-child{ flex:0 0 16px; color:var(--cat-a); font-size:1rem; font-weight:900; text-align:center; }
.reviewPanel--focus .reviewCard__reasons p.is-hook > span:first-child{ color:var(--cat-b); }
.reviewPanel--focus .reviewCard__reasons b{ color:var(--ink); }
.reviewPanel--focus .reviewCard__sideFoot{ display:flex; justify-content:flex-end; margin-top:auto; padding-top:1rem; }
.reviewPanel--focus .reviewCard__pick{ display:inline-flex; align-items:center; gap:.4rem; min-width:96px; justify-content:center; padding:.62rem .95rem; border:1px solid var(--line); border-radius:11px; background:var(--bg); color:var(--ink-2); font:inherit; cursor:pointer; user-select:none; transition:.2s; }
.reviewPanel--focus .reviewCard__pick > span{ opacity:0; }
.reviewPanel--focus .reviewCard__pick:hover{ border-color:color-mix(in oklch,var(--cat-a) 65%,var(--line)); color:var(--ink); }
.reviewPanel--focus .reviewCard__pick:focus-within{ outline:2px solid var(--cat-a); outline-offset:3px; }
.reviewPanel--focus .reviewCard__pick.is-kept{ border-color:transparent; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); color:#fff; box-shadow:0 0 22px color-mix(in oklch,var(--cat-a) 28%,transparent); }
.reviewPanel--focus .reviewCard__pick.is-kept > span{ opacity:1; }
.reviewPanel--focus > .reviewPager{ position:relative; z-index:2; width:calc(46% - 1.2rem); margin:.8rem 1.2rem .9rem auto; justify-content:flex-start; }
.reviewPanel--focus > .reviewPager .reviewPager__range,.reviewPanel--focus > .reviewPager .reviewPager__pageSize{ display:none; }
.reviewPanel--focus > .reviewPager .btn{ min-height:38px; border-radius:10px; }
.reviewPanel--focus .reviewGo{ position:relative; clear:both; display:flex; align-items:center; gap:.9rem; margin-top:1rem; padding-top:1rem; border:0; border-top:1px solid var(--line-soft); background:transparent; box-shadow:none; }
.reviewPanel--focus .reviewGo .satisfy__btns{ flex:0 0 auto; }
.reviewPanel--focus .reviewGo .btn{ min-width:auto; }
.reviewPanel--focus .reviewGo__confirm{ min-width:230px!important; min-height:48px; }
.reviewPanel--focus .reviewGo__confirm b{ font-family:"Bricolage Grotesque"; }
.reviewPanel--focus .reviewGo .satisfy__sub{ margin:0; }
@media (max-width:920px){
  .reviewPanel--focus .reviewCard__layout{ grid-template-columns:1fr; min-height:0; }
  .reviewPanel--focus .reviewCard__videoWrap{ min-height:420px; }
  .reviewPanel--focus > .reviewPager{ width:auto; margin:.75rem 0; padding:0; }
}
@media (max-width:640px){
  .reviewPanel--focus{ padding:.85rem; }
  .reviewPanel--focus .reviewPanel__buffers{ align-items:stretch; }
  .reviewPanel--focus .reviewPanel__buffers label{ flex:1 1 100px; }
  .reviewPanel--focus .reviewPanel__buffers input{ width:100%; }
  .reviewPanel--focus .reviewCard__videoWrap{ min-height:360px; }
  .reviewPanel--focus .reviewCard__side{ padding:1rem; }
  .reviewPanel--focus .reviewCard__scoreWrap{ gap:.8rem; }
  .reviewPanel--focus .reviewCard__dualRing{ width:112px; height:112px; flex-basis:112px; }
  .reviewPanel--focus .reviewGo{ align-items:stretch; flex-direction:column; }
  .reviewPanel--focus .reviewGo .satisfy__btns{ display:grid; grid-template-columns:auto 1fr; }
}
.reviewPick{ display:flex; gap:.65rem; align-items:center; padding:.6rem .7rem; border:1px solid var(--line-soft); border-radius:12px; background:oklch(14% .04 280 / .55); }
.reviewPick span{ min-width:0; flex:1; }
.reviewPick b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reviewPick small{ display:block; margin-top:.12rem; color:var(--ink-3); font-size:.8rem; }
/* task detail: generated video preview */
.jobpreview{ margin-top:.9rem; }
.jobpreview__video{ width:100%; max-height:440px; border-radius:14px; border:1px solid var(--line-soft); background:#000; }
.jobpreview__clips{ display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; margin-top:.6rem; }
.jobpreview__clips span{ color:var(--ink-3); font-size:.82rem; margin-right:.3rem; }
/* Vertical (9:16) output: video left, name + download right */
.jobpreview--vertical{ display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; }
.jobpreview__video--portrait{ width:auto; height:min(460px, 70vh); aspect-ratio:9/16; max-height:460px; object-fit:contain; flex:0 0 auto; }
/* Subtitle "soft mode" uses jobpreview--vertical but with a landscape
   video (source input, not a burned portrait output). Cap the video
   width so the side panel keeps a sensible column instead of collapsing
   to nothing when the source is very wide. */
.jobpreview--vertical > .jobpreview__video:not(.jobpreview__video--portrait){ flex:1 1 420px; max-width:min(640px, 100%); max-height:400px; }
/* Style the browser's default <track> rendering — bump the font a hair
   and give it a subtle text-shadow so soft captions read cleanly
   against arbitrary footage. */
.jobpreview__video::cue{ font-family: inherit; font-size: 1.05rem; text-shadow: 0 1px 2px rgba(0,0,0,.9); background: rgba(0,0,0,.35); }
.jobpreview__side{ flex:1 1 240px; min-width:220px; display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; padding-top:.4rem; }
.jobpreview__title{ font-size:1.05rem; line-height:1.3; }
.jobpreview__desc{ color:var(--ink-3); font-size:.9rem; margin:0 0 .3rem; }
@media (max-width:640px){ .jobpreview--vertical{ flex-direction:column; align-items:center; } .jobpreview__side{ align-items:center; text-align:center; width:100%; } }
/* Sidecar-only variant (Subtitle "soft mode" — no burned mp4 to preview,
   just downloadable srt/vtt/txt files). Same visual weight as the
   video-preview variant so users don't feel the job "failed" when it
   really succeeded with sidecar output. */
.jobpreview--sidecar{ padding:1.2rem 1.3rem; border-radius:14px; background: oklch(28% .07 280 / .35); border:1px solid var(--line-soft); }
.jobpreview--sidecar .jobpreview__side{ flex:1 1 auto; }
.jobpreview__downloads{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
/* credits */
.pf-credits__big{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:clamp(2.4rem,5vw,3.4rem); letter-spacing:-.02em; }
.pf-credits__big small{ font-size:1rem; color:var(--ink-3); font-weight:500; }
.pf-meter{ height:12px; border-radius:999px; background: oklch(30% .05 280); overflow:hidden; margin:1rem 0 .5rem; }
.pf-meter i{ display:block; height:100%; background:var(--grad); border-radius:999px; transition:width .6s var(--ease); }
.pf-credits__row{ display:flex; justify-content:space-between; color:var(--ink-3); font-size:.85rem; }
.pf-topup{ display:grid; grid-template-columns: repeat(3,1fr); gap:.7rem; margin:1.3rem 0; }
.topup{ border:1px solid var(--line); border-radius:14px; background: oklch(18% .04 280 / .5); padding:1rem; text-align:center; text-decoration:none; transition:.25s; }
.topup:hover{ border-color:var(--violet); transform:translateY(-3px); }
.topup b{ display:block; font-family:"Bricolage Grotesque"; font-size:1.4rem; }
.topup small{ color:var(--ink-3); font-size:.8rem; }
@media (max-width:860px){
  .pf-layout{ grid-template-columns:1fr; }
  .pf-tabs{ position:static; flex-direction:row; flex-wrap:wrap; }
  .pf-tab{ flex:1; justify-content:center; min-width:120px; }
  .pf-grid{ grid-template-columns:1fr; }
  .pf-head__plan{ display:none; }
  .pf-topup{ grid-template-columns:1fr; }
}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
.checkout{ padding: clamp(1.5rem,3vw,2.5rem) 0 4rem; }
.co-grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap: clamp(1.4rem,3vw,2.2rem); align-items:start; }
.co-main{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-2); padding: clamp(1.4rem,3vw,2rem); }
.co-main h2{ font-size:1.3rem; margin-bottom:1rem; }
.co-plans{ display:grid; gap:.6rem; margin-bottom:1.8rem; }
.co-plan{ display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem; border-radius:14px; border:1px solid var(--line); background: oklch(18% .04 280 / .4); cursor:pointer; font-family:inherit; text-align:left; color:var(--ink); transition:.25s; width:100%; }
.co-plan:hover{ border-color:var(--violet); }
.co-plan.is-on{ border-color:transparent; background:var(--grad-soft); box-shadow: inset 0 0 0 1.5px var(--violet); }
.co-plan__radio{ width:20px;height:20px;border-radius:50%; border:2px solid var(--line); flex-shrink:0; position:relative; }
.co-plan.is-on .co-plan__radio{ border-color:var(--violet); }
.co-plan.is-on .co-plan__radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--grad); }
.co-plan__tx{ flex:1; }
.co-plan__tx b{ font-size:1rem; }
.co-plan__tx small{ display:block; color:var(--ink-3); font-size:.8rem; }
.co-plan__price{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.2rem; }
.co-fields{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.co-field{ display:flex; flex-direction:column; }
.co-field--full{ grid-column:1/-1; }
.co-field label{ font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:.45rem; }
.co-field input{ min-height:48px; border-radius:12px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); color:var(--ink); padding:0 1rem; font-family:inherit; }
.co-field input:focus{ outline:2px solid var(--violet); outline-offset:1px; }
.co-side{ border:1px solid var(--line); border-radius:var(--radius-lg); background: linear-gradient(165deg, var(--bg-3), var(--bg-2)); padding: clamp(1.4rem,3vw,1.8rem); position:sticky; top:90px; }
.co-side h3{ font-size:1.1rem; margin-bottom:1rem; }
.co-sum{ display:flex; justify-content:space-between; padding:.6rem 0; color:var(--ink-2); font-size:.92rem; border-bottom:1px solid var(--line-soft); }
.co-sum--disc{ color: var(--magenta-hi); }
.co-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:1rem; margin-top:.4rem; }
.co-total b{ font-family:"Bricolage Grotesque"; font-size:1.8rem; }
.co-promo{ margin:1.2rem 0; }
.co-promo__form{ display:flex; gap:.5rem; }
.co-promo__form input{ flex:1; min-height:46px; border-radius:11px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); color:var(--ink); padding:0 .9rem; font-family:inherit; text-transform:uppercase; }
.co-promo__form input:focus{ outline:2px solid var(--violet); outline-offset:1px; }
.co-promo__msg{ font-size:.8rem; margin-top:.5rem; min-height:1em; }
.co-promo__msg.ok{ color: var(--magenta-hi); }
.co-promo__msg.err{ color: oklch(70% .17 25); }
.co-promo__hint{ color:var(--ink-3); font-size:.74rem; margin-top:.4rem; }
.co-custom{ margin-bottom:1.8rem; }
.co-custom__input{ display:flex; align-items:center; gap:.5rem; min-height:48px; border-radius:12px; border:1px solid var(--line); background: oklch(16% .04 280 / .6); padding:0 1rem; }
.co-custom__input:focus-within{ outline:2px solid var(--violet); outline-offset:1px; }
.co-custom__prefix{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.1rem; color:var(--ink-2); }
.co-custom__input input{ flex:1; min-height:46px; border:0; background:transparent; color:var(--ink); font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.15rem; padding:0; }
.co-custom__input input:focus{ outline:none; }
.co-custom__hint{ color:var(--ink-3); font-size:.76rem; margin-top:.45rem; }
.co-secure{ display:flex; align-items:center; gap:.45rem; color:var(--ink-3); font-size:.78rem; justify-content:center; margin-top:1rem; }
.co-secure svg{ width:14px;height:14px; }
.co-done{ text-align:center; padding: clamp(2rem,5vw,3.5rem); }
.co-done__tick{ width:72px;height:72px;border-radius:50%; margin:0 auto 1.2rem; display:grid;place-items:center; background:var(--grad); box-shadow:var(--glow); }
.co-done__tick svg{ width:34px;height:34px;color:#fff; }
.co-done h2{ font-size: clamp(1.6rem,3.5vw,2.4rem); }
.co-done p{ color:var(--ink-2); max-width:42ch; margin:.7rem auto 1.6rem; }
.co-done__cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
@media (max-width:860px){
  .co-grid{ grid-template-columns:1fr; }
  .co-side{ position:static; }
  .co-fields{ grid-template-columns:1fr; }
}

/* ============================================================
   PULSE (4 Aug) GENERATOR HEAD REDESIGN
   1. .flowbanner — the whole journey stated big at the top
   2. .toolswitch — Create tools as a segmented pill (primary) over an
      Enhance chip strip (secondary, additive tools)
   3. .catsearch / .catselected — chat-style category autofill replacing
      the old .catdrop select
   ============================================================ */

/* --- 1 · big top instruction banner --- */
.flowbanner{
  display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap;
  padding:1.05rem 1.3rem; border:1px solid var(--line); border-radius:18px;
  background:var(--panel); backdrop-filter:blur(12px); box-shadow:var(--glow);
  margin:.4rem 0 1.6rem;
}
.flowbanner .fstep{ display:flex; align-items:center; gap:.55rem; font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.1rem; color:var(--ink); }
.flowbanner .fnum{ width:27px; height:27px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-size:.82rem; }
.flowbanner .farr{ color:var(--violet-hi); font-size:1.25rem; font-weight:700; }
@media (max-width:640px){ .flowbanner .fstep{ font-size:.92rem; } }

/* --- 2 · Create (primary) / Enhance (secondary) tool switcher --- */
.toolswitch{ display:flex; flex-direction:column; gap:.9rem; margin:1.6rem 0 .4rem; }

/* CREATE — segmented pill switcher with a sliding indicator */
.seg{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:.25rem; padding:.35rem; border-radius:16px; border:1px solid var(--line);
  background:var(--bg-2);
}
.seg__ind{
  position:absolute; z-index:0; top:.35rem; bottom:.35rem; left:.35rem;
  width:calc((100% - .7rem - .75rem)/4); border-radius:12px;
  background:linear-gradient(120deg,var(--cat-a),var(--cat-b));
  box-shadow:0 8px 22px color-mix(in oklch,var(--cat-a) 45%,transparent);
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.seg__btn{
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.28rem; padding:.75rem .5rem;
  border:0; background:transparent; color:var(--ink-2); cursor:pointer;
  border-radius:12px; transition:color .2s var(--ease); text-align:center;
  font-family:inherit; min-width:0;
}
.seg__btn svg{ width:20px; height:20px; }
.seg__btn b{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:.9rem; }
.seg__btn small{ font-size:.68rem; color:var(--ink-3); }
.seg__btn[aria-selected="true"]{ color:#fff; }
.seg__btn[aria-selected="true"] small{ color:rgba(255,255,255,.82); }
.seg__btn:not([aria-selected="true"]):hover{ color:var(--ink); }
@media (max-width:640px){
  .seg__btn small{ display:none; }
  .seg__btn b{ font-size:.8rem; }
}

/* ENHANCE — quiet additive chip strip */
.toolswitch__enhance{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  padding:.6rem .7rem; border-radius:13px; border:1px dashed var(--line-soft);
  background:oklch(15% 0.05 284/ .25);
}
.toolswitch__lead{
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800;
  color:var(--magenta-hi); margin-right:.3rem;
}
.etool{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:9px;
  border:1px solid var(--line-soft); background:var(--bg-2); color:var(--ink-2);
  font-family:"Space Grotesk"; font-weight:600; font-size:.78rem; cursor:pointer;
  transition:.15s var(--ease);
}
.etool:hover{ border-color:var(--magenta-hi); color:var(--ink); }
.etool[aria-selected="true"]{
  border-color:var(--magenta-hi); color:var(--ink);
  background:color-mix(in oklch,var(--magenta-hi) 16%,var(--bg-2));
  box-shadow:0 0 0 1px var(--magenta-hi) inset;
}
.etool__ic{ width:16px; height:16px; display:grid; place-items:center; color:var(--magenta-hi); flex:none; }
.etool__ic svg{ width:15px; height:15px; }
/* Enhance tools that aren't wired to a pipeline yet stay visible but inert, so
   the roadmap is discoverable without promising a broken click. */
.etool[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.etool[aria-disabled="true"]:hover{ border-color:var(--line-soft); color:var(--ink-2); }
.etool__soon{ font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; font-weight:800; color:var(--ink-3); }

/* Editor Source clip — full-width reference composition, not the compact rail.
   Tabs use the same generic source-picker contract as every generator tool. */
.editor-source-shell{ margin:1.6rem 0; }
.editor-source-head{ margin-bottom:1.15rem; }
.editor-source-head h3{ font-family:"Bricolage Grotesque"; font-size:1.35rem; letter-spacing:-.02em; }
.editor-source-head p{ margin:.55rem 0 0; color:var(--ink-3); font-size:.94rem; }
.editor-source-tabs{ margin-bottom:1.15rem; }
.editor-source-drop{
  min-height:368px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-color:color-mix(in oklch,var(--magenta-hi) 72%,var(--line));
  background:radial-gradient(circle at 50% 42%,oklch(28% .08 286 / .32),transparent 42%),linear-gradient(165deg,oklch(20% .05 280 / .66),oklch(15% .04 280 / .52));
}
.editor-source-drop.is-dragging{ border-color:var(--magenta-hi); background:color-mix(in oklch,var(--magenta-hi) 11%,var(--bg-2)); }
.editor-source-drop .btn{ min-width:162px; justify-content:center; }
.editor-source__warning{ display:block; margin-top:1rem; color:var(--danger-hi); font-weight:700; }
.editor-source-picker{ min-height:300px; padding:1.6rem; text-align:left; }
.editor-source-picker > h3,.editor-source-picker > p{ text-align:center; }
.editor-source-picker .libgrid,.editor-source-picker .prevlist{ margin-top:1.2rem; }
.editor-source-cloud{ min-height:300px; display:flex; flex-direction:column; justify-content:center; }
.editor-cloud-status{ display:block; min-height:1.2em; margin-top:.8rem; color:var(--running-hi); font-size:.78rem; }
@media(max-width:680px){
  .editor-source-drop{ min-height:310px; padding:2.2rem 1.2rem; }
  .editor-source-head h3{ font-size:1.18rem; }
}

/* --- review decision block ("Happy with these picks?") --- */
.satisfy{ margin-top:1.2rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:var(--glow); }
.satisfy__q{ display:flex; align-items:center; gap:.6rem; font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.15rem; letter-spacing:-.02em; color:var(--ink); margin-bottom:.25rem; }
.satisfy__q svg{ width:22px; height:22px; color:var(--cat-a); flex:none; }
.satisfy__sub{ color:var(--ink-3); font-size:.86rem; margin:0 0 .9rem; max-width:70ch; }
.satisfy__sub b{ color:var(--ink); font-family:"Bricolage Grotesque"; }
.satisfy__btns{ display:flex; gap:.7rem; flex-wrap:wrap; }
.satisfy__btns .btn{ flex:1 1 auto; min-width:200px; }

/* --- post-run "What's next" routing cards --- */
.nextcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.nextcards__head{ margin:1.6rem 0 .8rem; border-top:1px dashed var(--line-soft); padding-top:1.2rem; }
.nextcards__head .review__lead{ margin:.3rem 0 0; }
.nextcards .mainmode__opt{ text-align:left; }
/* The download card is a container, not a choice — it holds the real <a download>. */
.nextcards__dl{ cursor:default; }
.nextcards__dl .btn{ margin-top:.7rem; align-self:flex-start; }
@media (max-width:860px){ .nextcards{ grid-template-columns:1fr; } }

/* --- 3 · chat-style category autofill --- */
/* The picker is a flex child of .catbar, so it has to claim the full row itself —
   otherwise it shrinks to its content width. */
.catpicker{ flex:1 1 100%; width:100%; }
.catsearch, .catselected{ flex:1 1 100%; width:100%; }
.catsearch{ margin:.4rem 0 1rem; }
.catsearch__head{ margin-bottom:.7rem; }
.catsearch__head h4{ font-size:1.05rem; }
.catsearch__head span{ color:var(--ink-3); font-size:.86rem; }
.searchbox{
  position:relative; display:flex; align-items:center; gap:.7rem;
  border:1.5px solid var(--line); border-radius:15px; background:var(--bg-2);
  padding:.85rem 1rem; box-shadow:var(--glow);
}
.searchbox:focus-within{ border-color:var(--cat-a); }
.searchbox > svg{ width:20px; height:20px; color:var(--cat-a); flex-shrink:0; }
.searchbox input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--ink); font-family:inherit; font-size:1rem; }
.searchbox input::placeholder{ color:var(--ink-3); }
.searchbox .btn{ padding:.5rem 1rem; min-height:auto; }
.acdrop{ margin-top:.55rem; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--bg-2); box-shadow:var(--shadow); }
.acdrop:empty{ display:none; }
.acdrop .acrow{
  display:flex; align-items:center; gap:.75rem; width:100%; padding:.7rem .9rem;
  border:0; border-bottom:1px solid var(--line-soft); background:transparent;
  color:var(--ink); font-family:inherit; text-align:left; cursor:pointer;
}
.acdrop .acrow:last-child{ border-bottom:0; }
.acdrop .acrow.on, .acdrop .acrow:hover{ background:color-mix(in oklch,var(--cat-a) 12%,transparent); }
.acdrop .sw{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:16px; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); flex-shrink:0; }
.acdrop b{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:.92rem; display:block; }
.acdrop small{ color:var(--ink-3); font-size:.78rem; }
.acdrop .acrow--empty{ cursor:default; }
.acdrop .acrow--empty:hover{ background:transparent; }

.catselected{
  display:flex; align-items:center; gap:.75rem; border:1.5px solid var(--cat-a);
  border-radius:15px; background:color-mix(in oklch,var(--cat-a) 12%,var(--bg-2));
  padding:.8rem 1rem; box-shadow:var(--glow);
}
.catselected .sw{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:18px; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); flex-shrink:0; }
.catselected b{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:1rem; display:block; }
.catselected small{ color:var(--ink-3); font-size:.8rem; }
.catselected .ok{ margin-left:auto; display:inline-flex; align-items:center; gap:.35rem; color:var(--cat-a); font-weight:700; font-size:.8rem; }
.catselected .chg{ color:var(--ink-3); font-size:.8rem; text-decoration:underline; cursor:pointer; background:none; border:0; font-family:inherit; }
@media (max-width:560px){
  .catselected{ flex-wrap:wrap; }
  .catselected .ok{ margin-left:0; }
}

/* --- AI subtitles · reference Enhance hierarchy --- */
.subtitle-style-editor{
  margin-top:1.6rem; padding:1.3rem; border:1px solid var(--line); border-radius:var(--radius);
  background:color-mix(in oklch,var(--bg-2) 94%,black 6%);
}
.subtitle-style-editor__head{
  display:flex; align-items:center; gap:.8rem; padding:.9rem 1rem;
  border:1.5px solid var(--cat-a); border-radius:15px;
  background:linear-gradient(110deg,color-mix(in oklch,var(--cat-a) 9%,transparent),transparent 45%);
  box-shadow:0 0 0 1px color-mix(in oklch,var(--cat-a) 18%,transparent) inset;
}
.subtitle-style-editor__icon{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:11px; color:#fff; background:linear-gradient(120deg,var(--cat-a),var(--cat-b));
  box-shadow:0 8px 22px color-mix(in oklch,var(--cat-a) 28%,transparent);
}
.subtitle-style-editor__icon svg{ width:20px; height:20px; }
.subtitle-style-editor__head > span:nth-child(2){ flex:1; min-width:0; }
.subtitle-style-editor__head b{
  display:block; color:var(--ink); font-family:"Bricolage Grotesque"; font-size:1rem; font-weight:800;
}
.subtitle-style-editor__head small{ display:block; margin-top:.15rem; color:var(--ink-3); font-size:.78rem; line-height:1.45; }
.subtitle-style-editor__step{
  flex:none; padding:.28rem .55rem; border:1px solid color-mix(in oklch,var(--cat-a) 42%,transparent);
  border-radius:999px; color:var(--cat-a); background:color-mix(in oklch,var(--cat-a) 12%,transparent);
  font-size:.65rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
}
.subtitle-style-editor__body{ margin:.1rem 0 .1rem 3rem; }
.subtitle-style-editor__fields{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 1rem;
  max-width:520px; margin-top:1rem;
}
.subtitle-style-editor__fields.subtitle-style-editor__fields--style{
  grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; max-width:520px;
}
.subtitle-style-editor__note{ max-width:520px; margin:.55rem 0 0; color:var(--ink-2); font-size:.86rem; line-height:1.5; }
.subtitle-style-editor__fields .selectish:focus{
  outline:none; border-color:var(--cat-a);
  box-shadow:0 0 0 3px color-mix(in oklch,var(--cat-a) 18%,transparent);
}
.subtitle-style-editor__palette{ display:flex; flex-wrap:wrap; gap:1rem 1.8rem; margin-top:1rem; }
.subtitle-style-editor__colour{ display:flex; flex-direction:column; gap:.38rem; }
.subtitle-style-editor__colour > label{
  color:var(--ink-3); font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.subtitle-style-editor__swatches{ display:flex; align-items:center; gap:.45rem; }
.subtitle-style-editor__swatches button,
.subtitle-style-editor__swatches input[type="color"]{
  width:24px; height:24px; margin:0; padding:0; border:1px solid var(--line);
  border-radius:50%; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.subtitle-style-editor__swatches button{ appearance:none; }
.subtitle-style-editor__swatches button:hover{ transform:scale(1.1); }
.subtitle-style-editor__swatches button[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--bg-2),0 0 0 4px var(--cat-a);
}
.subtitle-style-editor__swatches input[type="color"]{
  overflow:hidden; background:conic-gradient(#f44,#ff0,#0f6,#2cf,#65f,#f4c,#f44);
}
.subtitle-style-editor__swatches input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
.subtitle-style-editor__swatches input[type="color"]::-webkit-color-swatch{ border:0; border-radius:50%; }
.subtitle-style-editor__controls{ display:grid; gap:.15rem; max-width:520px; margin-top:.75rem; }
.subtitle-style-editor__range{ display:flex; flex-direction:column; gap:.42rem; margin-top:1rem; }
.subtitle-style-editor__range label{
  display:flex; justify-content:space-between; color:var(--ink-3);
  font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.subtitle-style-editor__range label span{ color:var(--cat-a); letter-spacing:0; }
.subtitle-style-editor__range input{ width:100%; accent-color:var(--cat-a); cursor:pointer; }
.subtitle-style-editor__preview{
  margin-top:1rem; padding:.85rem .95rem 1rem; border:1px solid var(--line-soft);
  border-radius:13px; background:color-mix(in oklch,var(--bg) 76%,black 24%);
}
.subtitle-style-editor__preview-title{
  margin-bottom:.65rem; color:var(--ink-3); font-size:.67rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
}
.subtitle-style-editor__preview-title em{ font-style:italic; }
.subtitle-style-editor__video{
  position:relative; width:auto; height:min(62vh,460px); max-width:96%; aspect-ratio:9/16; margin:0 auto;
  overflow:hidden; border-radius:14px; user-select:none;
  background:
    radial-gradient(120% 80% at 30% 20%,oklch(42% .11 300 / .55),transparent 60%),
    radial-gradient(120% 90% at 75% 85%,oklch(38% .13 330 / .5),transparent 60%),
    linear-gradient(160deg,oklch(26% .06 285),oklch(15% .04 288));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 12px 34px rgba(0,0,0,.4);
  transition:width .28s var(--ease),aspect-ratio .28s var(--ease);
}
.subtitle-style-editor__video::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.18)); }
.subtitle-style-editor__video[data-has-frame="true"] .subtitle-style-editor__play{ display:none; }
.subtitle-style-editor__video > img[data-sub-preview-frame]{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#050509; }
.subtitle-style-editor__badge{
  position:absolute; z-index:3; top:8px; left:8px; padding:.14rem .45rem; border-radius:6px;
  color:#fff; background:rgba(0,0,0,.62); font-size:.58rem; font-weight:700;
}
.subtitle-style-editor__play{
  position:absolute; z-index:2; top:50%; left:50%; width:44px; height:44px; display:grid; place-items:center;
  transform:translate(-50%,-50%); border-radius:50%; color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.14); backdrop-filter:blur(3px); font-size:.8rem;
}
.subtitle-style-editor__sample{
  --subtitle-preview-scale:1;
  --subtitle-preview-y:80%;
  --subtitle-preview-colour:#fff;
  --subtitle-highlight-colour:#00e676;
  --subtitle-preview-font:"Bricolage Grotesque",sans-serif;
  position:absolute; z-index:2; left:50%; top:var(--subtitle-preview-y); width:90%; display:flex; flex-wrap:wrap;
  justify-content:center; gap:.2rem .32rem; transform:translate(-50%,-50%) scale(var(--subtitle-preview-scale));
  transform-origin:center; color:var(--subtitle-preview-colour); text-align:center;
}
.subtitle-style-editor__sample span{
  font-family:var(--subtitle-preview-font); font-size:.92rem; font-weight:900; line-height:1.15;
  paint-order:stroke fill; -webkit-text-stroke:.4px rgba(0,0,0,.6); text-shadow:0 1px 3px rgba(0,0,0,.75);
}
.subtitle-style-editor__sample[data-sub-preview-style="karaoke"] span{
  animation:subtitlePreviewKaraoke 2.5s cubic-bezier(.2,.8,.2,1) infinite;
}
.subtitle-style-editor__sample[data-sub-preview-style="karaoke"] span:nth-child(2){ animation-delay:.5s; }
.subtitle-style-editor__sample[data-sub-preview-style="karaoke"] span:nth-child(3){ animation-delay:1s; }
.subtitle-style-editor__sample[data-sub-preview-style="karaoke"] span:nth-child(4){ animation-delay:1.5s; }
.subtitle-style-editor__sample[data-sub-preview-style="karaoke"] span:nth-child(5){ animation-delay:2s; }
.subtitle-style-editor__sample[data-sub-preview-style="glow"] span{
  color:var(--subtitle-preview-colour);
  text-shadow:
    0 0 5px var(--subtitle-highlight-colour),
    0 0 12px var(--subtitle-highlight-colour),
    0 0 22px color-mix(in srgb,var(--subtitle-highlight-colour) 76%,transparent);
}
@keyframes subtitlePreviewKaraoke{
  0%,18%{ color:var(--subtitle-highlight-colour); transform:scale(1.18); }
  28%,100%{ color:var(--subtitle-preview-colour); transform:scale(1); }
}
.subtitle-style-editor.is-sidecar-only::after{
  content:"Style saved — switch back to “Burn into video” to apply it.";
  display:block; margin-top:.8rem; color:var(--ink-3); font-size:.76rem;
}
@media(max-width:560px){
  .subtitle-style-editor{ padding:1rem; }
  .subtitle-style-editor__head{ align-items:flex-start; flex-wrap:wrap; }
  .subtitle-style-editor__body{ margin-left:0; }
  .subtitle-style-editor__step{ margin-left:48px; }
  .subtitle-style-editor__fields{ grid-template-columns:1fr; }
  .subtitle-style-editor__video{ max-width:100%; max-height:420px; }
}

/* ==========================================================================
   OVERLAY STUDIO (.ov*) + AI DIRECTOR (.dir-*)
   Ported verbatim from the 28-Aug "popper-pulse" mockup (styles.css).

   These selectors did NOT exist in this stylesheet before, so the whole block
   is additive and cannot override any live styling. Extracted by selector (not
   by line range) because the mockup interleaves them with unrelated rules.

   Only three of the twelve overlay tools have a backend today
   (subtitles / subtitle-removal / upscale); the rest render inert. The styling
   for the not-yet-wired tools is kept here on purpose so wiring them later is a
   markup change only, with no second CSS port.
   ========================================================================== */
/* #170 — ratio-adaptive overlays stage (no phone chrome) for landscape / square
   / 4:5 clips, mirroring the subtitle & before/after adaptive previews. */
.ovlstage--adapt{ position:relative; margin:0 auto; border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg,oklch(26% .06 285),oklch(15% .04 288));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 12px 34px rgba(0,0,0,.4); }
.ovlstage--adapt[data-ar="16:9"]{ aspect-ratio:16/9; width:100%; max-width:100%; }
.ovlstage--adapt[data-ar="1:1"]{ aspect-ratio:1/1; width:auto; height:min(56vh,420px); max-width:100%; }
.ovlstage--adapt[data-ar="4:5"]{ aspect-ratio:4/5; width:auto; height:min(58vh,440px); max-width:100%; }
.ovlstage--adapt[data-ar="9:16"]{ aspect-ratio:9/16; width:auto; height:min(62vh,460px); max-width:100%; }
/* --- AI Studio Polish — single Enhance & Stylise button --- */
.studio{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.studio__go{ padding:.9rem 1.5rem; font-size:1rem; font-weight:700; }
/* ---- subtitle_studio router + address/gender (per-language ASR, smart numbers) ---- */
.selectish--sm{ min-height:42px; font-size:.9rem; }
.field .opt, .subgender .opt{ font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--violet-hi); background:oklch(52% 0.21 284 / .16); border:1px solid var(--line-soft);
  padding:.1rem .45rem; border-radius:999px; margin-left:.45rem; vertical-align:middle; }
.subgender{ margin-top:.9rem; border:1px solid var(--line-soft); border-radius:12px;
  background:color-mix(in oklch, var(--bg-2) 60%, transparent); max-width:520px; overflow:hidden; }
.subgender > summary{ cursor:pointer; list-style:none; padding:.7rem .9rem; font-family:"Bricolage Grotesque";
  font-weight:700; font-size:.9rem; color:var(--ink); display:flex; align-items:center; gap:.15rem;
  transition:background .15s; }
.subgender > summary::-webkit-details-marker{ display:none; }
.subgender > summary::before{ content:"▸"; color:var(--violet-hi); font-size:.8rem; margin-right:.5rem; transition:transform .2s; }
.subgender[open] > summary::before{ transform:rotate(90deg); }
.subgender > summary:hover{ background:color-mix(in oklch, var(--violet) 8%, transparent); }
.subgender > div, .subgender > p{ padding:0 .9rem; }
.subgender > div{ padding-top:0; }
.subgender > p{ padding-bottom:.9rem; }
.subgender__names{ width:100%; min-height:42px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); padding:0 1rem; font-family:inherit; font-size:.9rem; }
.subgender__names::placeholder{ color:var(--ink-3); }
/* --- NEW · enhance overlays / watermark editor --- */
.ovlgroup{ border:1px solid var(--line); border-radius:14px; background:var(--bg-2); padding:1.15rem 1.15rem 1.05rem; margin-bottom:1rem; }
.ovlgroup:last-child{ margin-bottom:0; }
.ovlgroup__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.ovlgroup__head .ic{ width:34px;height:34px;border-radius:10px; display:grid;place-items:center; background:var(--bg-3); border:1px solid var(--line-soft); color:var(--cat-a); }
.ovlgroup__head .ic svg{ width:18px;height:18px; }
.ovlgroup__head b{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:.95rem; }
.ovlgroup__head small{ display:block; color:var(--ink-3); font-size:.76rem; }
.ovlgroup__head .cap{ margin-left:auto; font-size:.68rem; font-weight:700; color:var(--ink-3); background:var(--bg-3); border:1px solid var(--line-soft); padding:2px 8px; border-radius:99px; }
.ovlitem{ display:grid; grid-template-columns:auto 1fr; gap:.85rem 1rem; align-items:center; padding:.95rem 1rem; border:1px solid var(--line-soft); border-radius:11px; background:var(--bg); margin-bottom:.7rem; }
.ovlitem:last-child{ margin-bottom:0; }
.ovlitem__tag{ width:30px;height:30px;border-radius:8px; display:grid;place-items:center; font-size:14px; background:linear-gradient(120deg,var(--cat-a),var(--cat-b)); color:#fff; }
.ovlitem__name{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:.86rem; }
.ovlitem__name small{ display:block; font-weight:400; color:var(--ink-3); font-size:.74rem; }
/* #159 — each text overlay carries its own editable text box; typing updates the
   matching draggable chip on the phone preview live. */
.ovlitem__name input.ovinput{ width:100%; margin-bottom:.3rem; padding:.4rem .55rem; border-radius:8px; border:1px solid var(--line-soft); background:var(--bg-3); color:var(--ink); font-size:.82rem; font-family:"Space Grotesk"; font-weight:600; }
.ovlitem__name input.ovinput:focus{ outline:2px solid var(--cat-a); outline-offset:1px; }
.ovlitem__del{ grid-row:1; justify-self:end; width:24px; height:24px; border-radius:7px; border:1px solid var(--line-soft); background:var(--bg-3); color:var(--ink-3); font-size:1rem; line-height:1; cursor:pointer; transition:color .12s,border-color .12s; }
.ovlitem__del:hover{ color:var(--magenta); border-color:var(--magenta); }
.ovlctl{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1.6rem; margin-top:.2rem; }
@media(max-width:560px){
  .ovlctl{ grid-template-columns:1fr; gap:1rem; }
}
.ovlslider label{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-3); font-weight:700; margin-bottom:.5rem; }
.ovlslider label span{ color:var(--cat-a); }
.ovlslider .rng{ position:relative; height:6px; border-radius:99px; background:oklch(30% .05 280 / .6); margin-bottom:.15rem; }
.ovlslider .rng i{ position:absolute; top:0; bottom:0; left:0; border-radius:99px; background:linear-gradient(90deg,var(--cat-a),var(--cat-b)); }
.ovlslider .rng i::after{ content:""; position:absolute; right:-7px; top:50%; transform:translateY(-50%); width:14px;height:14px;border-radius:50%; background:#fff; box-shadow:var(--shadow); }
.ovladd{ display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; padding:.75rem; margin-top:.85rem; border:1px dashed var(--line); border-radius:11px; background:transparent; color:var(--ink-2); font-family:"Bricolage Grotesque"; font-weight:700; font-size:.82rem; cursor:pointer; }
.ovladd:disabled{ opacity:.4; }
.ovladd svg{ width:15px;height:15px; }
/* ============================================================
   OVERLAY STUDIO — CapCut-style library (filters/emoji/stickers/
   sound/music/voice) + multi-track timeline preview
   ============================================================ */
.ovstudio{ margin-top:1.6rem; }
.ovstudio .opt{ font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--violet-hi); background:oklch(52% 0.21 284 / .16); border:1px solid var(--line-soft);
  padding:.12rem .5rem; border-radius:999px; margin-left:.45rem; vertical-align:middle; }
/* canvas / aspect row */
.ovcanvas{ display:flex; flex-wrap:wrap; gap:1.1rem 1.6rem; align-items:flex-end; margin:.4rem 0 1.2rem; }
.ovcanvas .field{ margin:0; }
.ovseg{ display:inline-flex; gap:.25rem; padding:.25rem; background:var(--bg); border:1px solid var(--line-soft); border-radius:11px; }
.ovseg button{ appearance:none; border:0; background:transparent; color:var(--ink-2); font-family:"Bricolage Grotesque"; font-weight:700; font-size:.8rem; padding:.4rem .7rem; border-radius:8px; cursor:pointer; transition:background .15s,color .15s; }
.ovseg button:hover{ color:var(--ink); }
.ovseg button.on{ background:var(--grad); color:#fff; box-shadow:0 2px 8px oklch(52% 0.21 284 / .35); }
/* ---- preview-mode toggle (Phone mockup vs Fit-to-screen) ---- */
.ovpvbar{ display:flex; justify-content:center; padding:.2rem 0 .1rem; }
.ovpvseg{ display:inline-flex; gap:.3rem; background:var(--bg); border:1px solid var(--line-soft); border-radius:999px; padding:.25rem; }
.ovpvseg button{ appearance:none; border:0; background:transparent; color:var(--ink-3); font-family:"Bricolage Grotesque"; font-weight:700; font-size:.8rem; padding:.4rem .95rem; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:.35rem; transition:background .15s,color .15s; }
.ovpvseg button:hover{ color:var(--ink); }
.ovpvseg button.on{ background:var(--accent); color:#fff; box-shadow:0 2px 8px oklch(52% 0.21 284 / .4); }
/* ---- adaptive stage — layoutStage() sizes .ovphone / .ovstg live ---- */
.ovstagewrap{ height:clamp(460px, calc(100vh - 220px), 900px); display:flex; align-items:center; justify-content:center; padding:2.4rem .5rem 1.6rem; position:relative; margin:.4rem 0 .2rem; }
/* Phone-screen fit toggle — floats in the top-right corner of the stage so it
   never overlaps the phone / player in the centre. */
.ovfit{ position:absolute; top:.35rem; right:.5rem; z-index:8; display:inline-flex; align-items:center; gap:.3rem;
  padding:.28rem .32rem; background:oklch(16% 0.03 274 / .82); backdrop-filter:blur(8px);
  border:1px solid var(--line-soft); border-radius:11px; box-shadow:0 6px 18px rgba(0,0,0,.4); }
.ovfit__lab{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:0 .18rem 0 .28rem; }
.ovfit button{ appearance:none; border:0; background:transparent; color:var(--ink-2); font-family:"Bricolage Grotesque"; font-weight:700; font-size:.76rem; padding:.32rem .6rem; border-radius:8px; cursor:pointer; transition:background .15s,color .15s; }
.ovfit button:hover{ color:var(--ink); }
.ovfit button.on{ background:var(--grad); color:#fff; box-shadow:0 2px 8px oklch(52% 0.21 284 / .35); }
/* phone mockup: the ELEMENT itself is the 19.5:9 screen (iPhone 17 Pro Max
   ratio, 2622x1206); the bezel is a uniform titanium border with large
   rounded display corners, as on the real device. */
.ovphone{ display:flex; align-items:center; justify-content:center; position:relative; }
.ovphone.on{ box-sizing:content-box; background:#15171d;
  border:var(--bezel,8px) solid #05060a; border-radius:var(--frad,44px);
  box-shadow:0 18px 52px rgba(0,0,0,.62), 0 0 0 1.5px #2b2f38, 0 0 0 3px #40454f, 0 0 0 4.5px #16181e; }
.ovphone.on .ovstg{ border-radius:var(--srad,36px); }
/* Dynamic Island — proportional pill floating below the top bezel */
.ovphone.on::before{ content:""; position:absolute; top:var(--isl-top,12px); left:50%; transform:translateX(-50%);
  width:var(--isl-w,96px); height:var(--isl-h,27px); background:#000; border-radius:999px; z-index:6;
  box-shadow:0 0 0 1px rgba(255,255,255,.04); }
/* titanium side buttons */
.ovpbtn{ display:none; }
.ovphone.on .ovpbtn{ display:block; position:absolute; background:linear-gradient(90deg,#3a3f4a,#23262e);
  border-radius:2px; z-index:5; box-shadow:0 1px 2px rgba(0,0,0,.5); }
.ovphone.on .ovpbtn-action{ left:calc(-1 * var(--bezel,8px) - 2px); top:17%; width:3px; height:5%; }
.ovphone.on .ovpbtn-volup{ left:calc(-1 * var(--bezel,8px) - 2px); top:27%; width:3px; height:9%; }
.ovphone.on .ovpbtn-voldn{ left:calc(-1 * var(--bezel,8px) - 2px); top:39%; width:3px; height:9%; }
.ovphone.on .ovpbtn-power{ right:calc(-1 * var(--bezel,8px) - 2px); top:30%; width:3px; height:14%; }
/* the full phone screen behind the fitted ratio — a LIGHTER black so the
   letterbox area reads with contrast against the near-black phone frame */
.ovphone.on .ovstgfull{ background:#191b22; }
.ovstg{ position:relative; background:#191b22; overflow:hidden; border-radius:0; max-width:100%; max-height:100%; }
/* FIT mode — no phone frame: a plain adaptive player at the SOURCE ratio, SHARP edges */
.ovphone:not(.on) .ovstg{ border-radius:0; border:1px solid var(--line); box-shadow:0 18px 52px rgba(0,0,0,.5); }
.ovstg .ovvid{ position:absolute; inset:0; width:100%; height:100%; background:#191b22; }
.ovlayers{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.ovlayers > .ov{ pointer-events:auto; }
/* Upload button — the ONLY in-phone control (picks a video source). Small pill,
   centred in the screen; disappears once a source is loaded. */
.ovaddmini{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:9;
  border:0; border-radius:999px; background:var(--grad); color:#fff; line-height:1; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; gap:.28rem; padding:.4rem .68rem;
  font-size:.72rem; box-shadow:0 4px 14px oklch(52% 0.21 284 / .55); transition:transform .12s, box-shadow .12s; }
.ovaddmini .ic{ font-size:.95rem; line-height:1; font-weight:600; }
.ovaddmini:hover{ transform:translate(-50%,-50%) scale(1.06); box-shadow:0 6px 18px oklch(52% 0.21 284 / .7); }
/* overlays are CENTER-anchored: l.x/l.y is the CENTRE point (default .5,.5).
   max-width is clamped to the frame so text & overlays always fit the 9:16
   phone screen and never overfill — the bound follows the fitted stage width
   (i.e. the video's resolution box), not the viewport. */
.ovstg .ov{ position:absolute; cursor:grab; user-select:none; touch-action:none; transform:translate(-50%,-50%); max-width:94%; box-sizing:border-box;
  /* height MUST stay content-driven so the selection outline tracks the media
     while resizing — this also defeats the global `.video{height:100%}` rule. */
  height:auto; }
.ovstg .ov.sel{ outline:2px solid #fff; outline-offset:2px; border-radius:4px; }
.ovstg .ov.ov--text{ font-weight:800; line-height:1.12; max-width:94%;
  white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word; }
.ovstg .ov img,.ovstg .ov video{ width:100%; height:auto; display:block; pointer-events:none; border-radius:4px; }
/* Windows-explorer style resize affordance: eight INVISIBLE hit bands inside the
   layer box (so `.ovstg{overflow:hidden}` can never clip them). The cursor is
   the affordance — no grip chrome is drawn over the artwork. Only the selected
   layer exposes them. */
.ovstg .ov .rz{ position:absolute; display:none; padding:0; border:0; background:transparent; box-shadow:none; touch-action:none; }
.ovstg .ov.sel .rz{ display:block; }
.ovstg .ov .rz--corner{ z-index:4; width:14px; height:14px; }
.ovstg .ov .rz--edge{ z-index:3; }
.ovstg .ov .rz--nw{ left:0; top:0; cursor:nwse-resize; }
.ovstg .ov .rz--ne{ right:0; top:0; cursor:nesw-resize; }
.ovstg .ov .rz--sw{ left:0; bottom:0; cursor:nesw-resize; }
.ovstg .ov .rz--se{ right:0; bottom:0; cursor:nwse-resize; }
.ovstg .ov .rz--n{ left:0; right:0; top:0; height:9px; cursor:ns-resize; }
.ovstg .ov .rz--s{ left:0; right:0; bottom:0; height:9px; cursor:ns-resize; }
.ovstg .ov .rz--w{ top:0; bottom:0; left:0; width:9px; cursor:ew-resize; }
.ovstg .ov .rz--e{ top:0; bottom:0; right:0; width:9px; cursor:ew-resize; }
.ovstg .ov.resizing{ cursor:grabbing; }
/* Sits BELOW the 9px top resize band (and above every band) so the N handle is
   grabbable while delete stays clickable. */
.ovstg .ov .rm{ position:absolute; z-index:7; left:50%; top:12px; transform:translateX(-50%); width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--magenta); color:var(--magenta); display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1; cursor:pointer; }
@media (pointer:coarse){
  .ovstg .ov .rz--corner{ width:20px; height:20px; }
  .ovstg .ov .rz--n,.ovstg .ov .rz--s{ height:14px; }
  .ovstg .ov .rz--w,.ovstg .ov .rz--e{ width:14px; }
}
/* ---- transport + trim (all BELOW the preview) ---- */
.ovctrls{ padding:0; }
.ovscrub{ display:flex; align-items:center; gap:.7rem; padding:.5rem 0; }
.ovpp{ width:40px; height:40px; flex:0 0 auto; border-radius:50%; background:var(--bg-3); border:1px solid var(--line-soft);
  color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; }
.ovpp:hover{ background:var(--bg-2); }
.ovbarline{ flex:1; height:6px; background:var(--bg-3); border-radius:999px; position:relative; cursor:pointer; }
.ovbarline i{ position:absolute; left:0; top:0; height:100%; background:var(--grad); border-radius:999px; width:0; }
.ovbarline .kn{ position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(0,0,0,.5); }
.ovtm{ font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:.75rem; min-width:78px; text-align:right; }
/* audio track chips (re-select an audio layer) */
.ovtracks{ display:none; gap:.5rem; overflow-x:auto; padding:.15rem 0 .4rem; }
.ovtracks::-webkit-scrollbar{ display:none; }
.ovtracks .track-chip{ flex:0 0 auto; display:flex; align-items:center; gap:.4rem; background:var(--bg-3);
  border:1px solid var(--line-soft); border-radius:999px; padding:.4rem .8rem; font-size:.72rem; color:var(--ink-3); cursor:pointer; }
.ovtracks .track-chip.on{ border-color:var(--violet-hi); color:var(--ink); }
.ovtracks .track-chip .cn{ max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovtrim{ background:var(--panel); border:1px solid var(--line-soft); border-radius:12px; padding:.65rem .8rem; margin:.15rem 0 .3rem; display:none; }
.ovtrim.on{ display:block; }
.ovtrim__lab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.ovtrim__lab .nm{ font-weight:700; font-size:.82rem; color:var(--ink); }
.ovtrim__lab .tt{ color:var(--ink-3); font-size:.75rem; font-variant-numeric:tabular-nums; }
.ovtrim__track{ position:relative; height:34px; background:var(--bg); border:1px solid var(--line-soft); border-radius:8px; overflow:hidden; }
.ovseg2{ position:absolute; top:0; height:100%; background:oklch(52% 0.21 284 / .28);
  border:1px solid var(--violet-hi); border-radius:8px; cursor:grab; }
.ovseg2 .h{ position:absolute; top:0; width:16px; height:100%; display:flex; align-items:center; justify-content:center; color:oklch(88% 0.06 284); cursor:ew-resize; }
.ovseg2 .h.l{ left:0; }
.ovseg2 .h.r{ right:0; }
.ovseg2 .h::before{ content:"‖"; font-size:.7rem; }
.ovtrim__actions{ display:flex; gap:.5rem; margin-top:.65rem; }
/* per-element timing: start / end / duration in seconds */
.ovtrim__time{ display:flex; gap:.5rem; margin-top:.6rem; }
.ovtnum{ flex:1; display:flex; flex-direction:column; gap:.24rem; font-size:.66rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); }
.ovtnum input{ width:100%; background:var(--bg); border:1px solid var(--line-soft); border-radius:9px; padding:.42rem .5rem;
  color:var(--ink); font:inherit; font-size:.82rem; font-variant-numeric:tabular-nums; text-align:left; }
.ovtnum input:focus{ outline:none; border-color:oklch(60% 0.18 284 / .7); }
.ovtnum input[readonly]{ cursor:default; color:var(--ink-2); background:color-mix(in oklch,var(--bg) 82%,var(--panel)); }
.ovtnum span{ display:none; }
.ovtrim__actions button{ flex:1; background:var(--bg-3); border:1px solid var(--line-soft); border-radius:10px; padding:.55rem; color:var(--ink-2); font:inherit; font-size:.78rem; cursor:pointer; }
.ovtrim__actions button:hover{ color:var(--ink); }
.ovtrim__actions .danger{ color:oklch(72% 0.16 20); border-color:oklch(48% 0.14 20 / .6); background:oklch(30% 0.12 18 / .35); }
/* ---- filter quick bar (between scrubber & mini-timeline) ---- */
.ovfbar{ display:none; align-items:center; gap:.55rem; background:var(--panel); border:1px solid var(--line-soft);
  border-radius:12px; padding:.45rem .55rem; margin:.15rem 0 .4rem; }
.ovfbar.on{ display:flex; }
.ovfbar .fic{ width:28px; height:28px; border-radius:9px; background:var(--bg-3); border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto; }
.ovfbar .fnm{ flex:1; font-size:.8rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovfbar .fnm small{ color:var(--ink-3); font-weight:400; }
.ovfbar button{ flex:0 0 auto; border-radius:9px; padding:.45rem .8rem; font-size:.76rem; font-weight:700; border:1px solid var(--line-soft); background:var(--bg-3); color:var(--ink-2); font-family:inherit; cursor:pointer; }
.ovfbar button.fchg{ color:var(--violet-hi); border-color:oklch(44% 0.12 284 / .6); background:oklch(30% 0.12 284 / .3); }
.ovfbar button.fdel{ color:oklch(72% 0.16 20); border-color:oklch(48% 0.14 20 / .6); background:oklch(30% 0.12 18 / .35); }
/* ---- mini timeline (every layer at a glance, auto-resizes) ---- */
.ovmtl{ display:none; flex-direction:column; gap:.45rem; background:var(--panel); border:1px solid var(--line-soft);
  border-radius:12px; padding:.6rem .7rem; margin:.15rem 0 .4rem; overflow:hidden; }
.ovmtl.on{ display:flex; }
.ovmtl .mtl-tools{ display:flex; align-items:center; gap:.5rem; }
.ovmtl .mtl-zoom{ display:flex; align-items:center; gap:.2rem; }
.ovmtl .mtl-zoom button{ width:23px; height:23px; border-radius:7px; background:var(--bg-3); border:1px solid var(--line-soft);
  font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; }
.ovmtl .mtl-zoom button:disabled{ color:var(--ink-3); opacity:.5; cursor:default; }
.ovmtl .mtl-zoom .zl{ min-width:34px; text-align:center; font-size:.66rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ovmtl .mtl-scroll{ overflow-x:auto; overflow-y:auto; max-height:190px; }
.ovmtl .mtl-scroll::-webkit-scrollbar{ height:7px; width:6px; }
.ovmtl .mtl-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.ovmtl .mtl-canvas{ display:flex; flex-direction:column; gap:.3rem; width:100%; min-width:100%; }
.ovmtl .mtl-ruler{ position:relative; flex:1; height:15px; }
.ovmtl .mtl-tick{ position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.ovmtl .mtl-tick b{ position:absolute; top:0; left:3px; font-weight:400; font-size:.6rem; color:var(--ink-3);
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.ovmtl .mtl-tick.end b{ left:auto; right:3px; }
.ovmtl .mtl-head{ display:flex; align-items:center; justify-content:space-between; color:var(--ink-3); font-size:.66rem; }
.ovmtl .mtl-tip{ color:var(--ink-3); font-size:.66rem; margin:-1px 0 1px; display:flex; align-items:center; gap:.3rem; opacity:.85; }
.ovmtl .mtl-lane{ display:flex; align-items:center; gap:.5rem; transition:transform .04s linear; }
.ovmtl .mtl-rlane{ display:flex; align-items:center; gap:.5rem; }
.ovmtl .mtl-ic{ flex:0 0 auto; width:20px; text-align:center; font-size:.82rem; }
.ovmtl .mtl-track{ position:relative; flex:1; height:26px; background:var(--bg); border:1px solid var(--line-soft); border-radius:6px; overflow:hidden; touch-action:none; }
.ovmtl .mtl-clip{ position:absolute; top:2px; height:22px; border-radius:5px; display:flex; align-items:center;
  padding:0 12px; font-size:.65rem; color:#fff; white-space:nowrap; overflow:hidden;
  cursor:grab; border:1px solid rgba(255,255,255,.18); box-sizing:border-box; touch-action:none; user-select:none; }
.ovmtl .mtl-clip:active{ cursor:grabbing; }
.ovmtl .mtl-clip .clab{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.ovmtl .mtl-clip .mh{ position:absolute; top:0; height:100%; width:11px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85); font-size:.62rem; cursor:ew-resize; background:rgba(0,0,0,.18); }
.ovmtl .mtl-clip .mh.l{ left:0; border-radius:5px 0 0 5px; }
.ovmtl .mtl-clip .mh.r{ right:0; border-radius:0 5px 5px 0; }
.ovmtl .mtl-clip.sel{ border-color:#fff; box-shadow:0 0 0 1px #fff; }
.ovmtl .mtl-clip.dragging{ opacity:.92; box-shadow:0 6px 18px rgba(0,0,0,.55); z-index:9; }
.ovmtl .mtl-lane.reordering{ z-index:9; position:relative; }
.ovmtl .mtl-ph{ position:absolute; top:0; bottom:0; width:2px; background:var(--magenta); pointer-events:none; z-index:5; }
/* ---- feature toolbar: ALL 12 icons locked to ONE row; click to drop its panel.
   The 12 tools share the width evenly (repeat(12,1fr)); on narrow screens the row
   scrolls horizontally instead of wrapping, so the icons always stay in a single
   line. Icon + label scale down to keep every tool visible. ---- */
.ovtoolbar{ display:grid; grid-template-columns:repeat(12,minmax(50px,1fr)); gap:.3rem;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:14px; padding:.55rem .5rem; margin-top:.4rem;
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.ovtoolbar::-webkit-scrollbar{ height:5px; }
.ovtoolbar::-webkit-scrollbar-thumb{ background:var(--line-soft); border-radius:99px; }
.ovtitem{ display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.4rem .05rem; border-radius:11px;
  border:1px solid transparent; background:none; cursor:pointer; transition:border-color .12s,background .12s; min-width:0; }
.ovtitem:hover{ background:var(--bg-3); }
.ovtitem .ic{ width:100%; max-width:40px; aspect-ratio:1/1; border-radius:11px; background:var(--bg-3); border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; font-size:17px; transition:background .12s,border-color .12s; }
.ovtitem .tl{ font-size:.58rem; color:var(--ink-3); font-family:"Bricolage Grotesque"; font-weight:700;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ovtitem.on{ border-color:var(--violet-hi); background:var(--bg-3); }
.ovtitem.on .ic{ background:oklch(30% 0.12 284 / .4); border-color:oklch(44% 0.12 284 / .7); }
.ovtitem.on .tl{ color:var(--ink); }
/* ---- drop-down feature panel ---- */
.ovpanel{ display:none; background:var(--panel); border:1px solid var(--violet-hi); border-radius:14px; overflow:hidden; margin-top:.7rem; animation:ovDrawer .24s var(--ease-out); }
.ovpanel.on{ display:block; }
@keyframes ovDrawer{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.ovpanel__hd{ display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  padding:.75rem .9rem; border-bottom:1px solid var(--line-soft); background:var(--bg-3); }
.ovpanel__hd [data-ovpaneltitle]{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:.95rem; color:var(--ink); }
.ovpanel__hd .px{ width:28px; height:28px; border-radius:50%; background:var(--bg); border:1px solid var(--line-soft); color:var(--ink-2); font-size:15px; cursor:pointer; }
.ovpanel__hd .px:hover{ color:var(--ink); }
.ovpanel__body{ padding:.8rem .9rem 1rem; }
/* ---- sheet interior widgets (built by the panel JS) ---- */
.ovpanel .emoji{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:.5rem; max-height:280px; overflow-y:auto; padding-right:.2rem; }
.ovpanel .emoji-btn{ height:58px; display:flex; align-items:center; justify-content:center; background:var(--bg-3);
  border:1px solid var(--line-soft); border-radius:10px; overflow:hidden; cursor:pointer; transition:background .12s,transform .12s; }
.ovpanel .emoji-btn:hover{ background:var(--bg-2); transform:scale(1.04); }
.ovpanel .emoji-btn img{ width:76%; height:76%; object-fit:contain; }
.ovpanel .filmstrip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:.5rem; padding-bottom:.15rem; max-height:280px; overflow-y:auto; }
.ovpanel .filt{ width:100%; cursor:pointer; }
.ovpanel .filt .sw{ height:58px; width:100%; border-radius:10px; background-size:cover; background-position:center; border:2px solid transparent; }
.ovpanel .filt.sel .sw{ border-color:var(--violet-hi); }
.ovpanel .filt .lbl{ text-align:center; font-size:.62rem; color:var(--ink-3); margin-top:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ovpanel .filt.sel .lbl{ color:var(--ink); font-weight:700; }
/* sound / music icon-tile grid (v20) — square tiles; hover/play → black overlay
   with an animated speaker (increasing sound waves) + "tap to play" */
.ovpanel .sndgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:.55rem; max-height:320px; overflow-y:auto; padding-bottom:.15rem; }
.ovpanel .snd{ width:100%; cursor:pointer; position:relative; }
.ovpanel .snd .ico{ height:58px; width:100%; border-radius:10px; background:var(--bg-3); border:2px solid transparent; display:flex; align-items:center; justify-content:center; font-size:1.5rem; position:relative; overflow:hidden; }
.ovpanel .snd:hover .ico{ border-color:var(--line); }
.ovpanel .snd.playing .ico{ border-color:var(--violet-hi); }
/* full label — wraps to a second line rather than truncating */
.ovpanel .snd .lbl{ text-align:center; font-size:.62rem; line-height:1.15; color:var(--ink-3); margin-top:.25rem; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; word-break:break-word; }
.ovpanel .snd.playing .lbl{ color:var(--ink); font-weight:700; }
/* hover/play speaker overlay */
.ovpanel .snd .vol{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:oklch(12% 0.045 274 / .74); border-radius:8px; }
.ovpanel .snd:hover .vol, .ovpanel .snd.playing .vol{ display:flex; }
.ovpanel .snd .vol .spk{ width:26px; height:26px; color:var(--violet-hi); }
.ovpanel .snd .vol .spk .w{ opacity:0; }
.ovpanel .snd:hover .vol .spk .w1, .ovpanel .snd.playing .vol .spk .w1{ animation:ov-wave 1.3s ease-in-out infinite; }
.ovpanel .snd:hover .vol .spk .w2, .ovpanel .snd.playing .vol .spk .w2{ animation:ov-wave 1.3s ease-in-out .22s infinite; }
.ovpanel .snd:hover .vol .spk .w3, .ovpanel .snd.playing .vol .spk .w3{ animation:ov-wave 1.3s ease-in-out .44s infinite; }
@keyframes ov-wave{ 0%,100%{ opacity:.15; } 50%{ opacity:1; } }
.ovpanel .snd .vol .pp{ font-size:.5rem; color:var(--ink-2); pointer-events:none; letter-spacing:.02em; }
.ovpanel .snd .add{ position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:var(--grad); color:#fff; font-size:.72rem; line-height:1; font-weight:800; display:flex; align-items:center; justify-content:center; border:none; opacity:0; transition:opacity .15s; padding:0; cursor:pointer; z-index:2; }
.ovpanel .snd:hover .add, .ovpanel .snd.playing .add{ opacity:1; }
/* voice-over preview: animated speaker button (matches the tile speaker) */
.ovpanel .spkbtn{ width:44px; height:38px; flex:0 0 auto; border-radius:10px; background:var(--bg-3); border:1px solid var(--line-soft); color:var(--ink-2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s,color .15s; }
.ovpanel .spkbtn:hover{ border-color:var(--line); color:var(--ink); }
.ovpanel .spkbtn.playing{ border-color:var(--violet-hi); color:var(--violet-hi); }
.ovpanel .spkbtn .spk{ width:22px; height:22px; }
.ovpanel .spkbtn .spk .w{ opacity:.15; }
.ovpanel .spkbtn:hover .spk .w1, .ovpanel .spkbtn.playing .spk .w1{ animation:ov-wave 1.3s ease-in-out infinite; }
.ovpanel .spkbtn:hover .spk .w2, .ovpanel .spkbtn.playing .spk .w2{ animation:ov-wave 1.3s ease-in-out .22s infinite; }
.ovpanel .spkbtn:hover .spk .w3, .ovpanel .spkbtn.playing .spk .w3{ animation:ov-wave 1.3s ease-in-out .44s infinite; }
.ovpanel .drop{ border:1.5px dashed var(--line-soft); border-radius:14px; padding:1.6rem 1.1rem; text-align:center; color:var(--ink-3); cursor:pointer; }
.ovpanel .drop:hover{ border-color:var(--violet-hi); color:var(--ink-2); }
.ovpanel .big-choice{ display:block; width:100%; text-align:left; background:var(--bg-3); border:1px solid var(--line-soft);
  border-radius:14px; padding:1rem; margin-bottom:.65rem; font-size:.95rem; font-weight:700; color:var(--ink); cursor:pointer; }
.ovpanel .big-choice:hover{ background:var(--bg-2); }
.ovpanel .frow{ margin-bottom:.9rem; }
.ovpanel .frow label{ display:block; color:var(--ink-3); font-size:.75rem; margin-bottom:.35rem; }
.ovpanel .frow input[type=text],.ovpanel .frow textarea,.ovpanel .frow select{ width:100%; }
.ovpanel .frow textarea{ min-height:56px; resize:none; }
.ovpanel input,.ovpanel select,.ovpanel textarea{ font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line-soft); border-radius:10px; padding:.55rem .7rem; outline:none; }
.ovpanel input:focus,.ovpanel select:focus,.ovpanel textarea:focus{ border-color:var(--violet-hi); }
.ovpanel input[type=color]{ padding:0; width:40px; height:34px; border-radius:8px; cursor:pointer; }
.ovpanel input[type=range]{ -webkit-appearance:none; appearance:none; height:4px; background:var(--line); border:none; border-radius:999px; padding:0; }
.ovpanel input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.ovpanel .inline{ display:flex; align-items:center; gap:.7rem; }
.ovpanel .inline .grow{ flex:1; }
.ovpanel .seg2{ display:flex; gap:.4rem; }
.ovpanel .seg2 button{ flex:1; background:var(--bg-3); border:1px solid var(--line-soft); border-radius:10px; padding:.55rem; font-size:.8rem; color:var(--ink-3); font-family:inherit; cursor:pointer; }
.ovpanel .seg2 button.on{ background:var(--accent); border-color:transparent; color:#fff; font-weight:700; }
.ovpanel .tabs{ display:flex; gap:.4rem; margin-bottom:.8rem; }
.ovpanel .tabs .tab{ flex:1; background:var(--bg-3); border:1px solid var(--line-soft); border-radius:10px; padding:.5rem; font-size:.8rem; color:var(--ink-3); font-family:inherit; cursor:pointer; }
.ovpanel .tabs .tab.on{ background:var(--grad); border-color:transparent; color:#fff; font-weight:700; }
.ovpanel .fontrow{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; }
.ovpanel .fontrow::-webkit-scrollbar{ display:none; }
.ovpanel .font-cell{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.35rem;
  border:2px solid transparent; border-radius:12px; cursor:pointer; }
.ovpanel .font-cell.on{ border-color:var(--violet-hi); }
.ovpanel .font-cell .font-btn{ width:56px; height:44px; border-radius:10px; background:var(--bg-3); border:1px solid var(--line-soft);
  font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; color:var(--ink); }
.ovpanel .font-cell .fl{ font-size:.68rem; color:var(--ink-3); }
.ovpanel .tglrow{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; background:var(--bg-3);
  border:1px solid var(--line-soft); border-radius:12px; padding:.7rem .8rem; margin-bottom:.8rem; }
.ovpanel .tglrow .hint{ color:var(--ink-3); font-size:.68rem; text-align:right; }
.ovpanel button.primary{ width:100%; background:var(--grad); color:#fff; font-weight:800; border:0; border-radius:12px; padding:.8rem; margin-top:.25rem; cursor:pointer; }
.ovpanel button.primary:disabled{ opacity:.6; cursor:default; }
.ovpanel button.done{ width:100%; background:var(--grad); color:#fff; font-weight:800; border:0; border-radius:12px; padding:.85rem; margin-top:.6rem; cursor:pointer; box-shadow:0 4px 16px oklch(52% 0.21 284 / .38); }
.ovpanel button.done:hover{ filter:brightness(1.06); }
/* ---- Subtitles / Remove / Upscale sheets (offline ports) ---- */
/* soft card that groups a single control (position / band / resolution …) */
.ovpanel .upk-card{ background:var(--bg-3); border:1px solid var(--line-soft); border-radius:12px; padding:.7rem .8rem; margin-bottom:.7rem; }
.ovpanel .upk-label{ font-size:.72rem; font-weight:700; color:var(--ink-3); margin-bottom:.5rem; font-family:"Bricolage Grotesque"; }
.ovpanel .upk-bigsel{ width:100%; background:var(--bg); border:1px solid var(--line-soft); color:var(--ink);
  border-radius:10px; padding:.6rem .7rem; font-size:.85rem; font-family:inherit; }
.ovpanel .upk-adv-toggle{ width:100%; text-align:left; background:var(--bg-3); border:1px solid var(--line-soft);
  color:var(--ink-2); border-radius:11px; padding:.65rem .8rem; font-size:.8rem; font-weight:700; cursor:pointer; margin-top:.3rem; font-family:inherit; }
.ovpanel .upk-adv-toggle:hover{ background:var(--bg-2); }
/* full-width green Enable / Close button (removal + upscale) */
.ovpanel button.enable{ width:100%; border:0; border-radius:12px; padding:.85rem; margin-top:.7rem; cursor:pointer;
  font-weight:800; font-size:.95rem; color:#fff; background:var(--running); box-shadow:0 4px 16px oklch(62% 0.17 150 / .32); }
.ovpanel button.enable.is-on{ background:var(--bg-3); color:var(--ink); box-shadow:none; border:1px solid var(--line-soft); }
.ovpanel button.enable:hover{ filter:brightness(1.05); }
/* subtitle cue table */
.ovpanel .cue-wrap{ overflow-x:auto; max-height:300px; overflow-y:auto; border:1px solid var(--line-soft); border-radius:10px; }
.ovpanel .cue-table{ width:100%; border-collapse:collapse; font-size:.72rem; }
.ovpanel .cue-table th{ position:sticky; top:0; background:var(--bg-2); color:var(--ink-3); font-weight:700;
  text-align:left; padding:.45rem .5rem; font-size:.66rem; border-bottom:1px solid var(--line-soft); }
.ovpanel .cue-table td{ padding:.4rem .5rem; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.ovpanel .cue-table input,.ovpanel .cue-table textarea{ background:var(--bg); border:1px solid var(--line-soft); color:var(--ink);
  border-radius:6px; padding:.3rem .4rem; font-size:.72rem; font-family:inherit; }
.ovpanel .cue-dur{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ovpanel .cue-del{ background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:.9rem; padding:.2rem .3rem; border-radius:6px; }
.ovpanel .cue-del:hover{ background:var(--bg-3); color:var(--magenta-hi); }
.ovpanel .cue-exp{ flex:1; background:var(--bg-3); border:1px solid var(--line-soft); color:var(--ink-2);
  border-radius:9px; padding:.5rem; font-size:.75rem; cursor:pointer; font-family:inherit; }
.ovpanel .cue-exp:hover{ background:var(--bg-2); }
/* live erase overlay drawn on the phone stage */
.ovstg .erasebox{ position:absolute; border:2px dashed var(--magenta-hi); background:oklch(62% 0.24 12 / .16);
  z-index:6; box-sizing:border-box; border-radius:4px; }
.ovstg .erasebox .ebtag{ position:absolute; top:-18px; left:0; font-size:10px; color:var(--magenta-hi); font-weight:700; white-space:nowrap; }
.ovstg .erasebox .ebrz{ position:absolute; right:-11px; bottom:-11px; width:24px; height:24px; border-radius:50%;
  background:#fff; border:2px solid var(--magenta-hi); display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--magenta-hi); cursor:se-resize; }
/* while a clean-video tool is active, hide creative overlays so the erase/subtitle work is clear */
.ovstg.clean-hide .ov{ display:none !important; }
/* ---- floating toast (appended to <body>) ---- */
.ovtoast{ position:fixed; left:50%; bottom:110px; transform:translateX(-50%); background:oklch(12% 0.05 278 / .92);
  border:1px solid var(--line); color:var(--ink); padding:.55rem 1rem; border-radius:999px; font-size:.8rem;
  opacity:0; transition:opacity .2s; z-index:9000; pointer-events:none; backdrop-filter:blur(8px); }
.ovtoast.on{ opacity:1; }
@media(max-width:640px){
  .ovstagewrap{ height:clamp(380px, calc(100vh - 240px), 640px); }
  .ovcanvas{ gap:.8rem 1rem; }
  .ovtoolbar{ gap:.25rem; grid-template-columns:repeat(12,64px); }
  .ovtitem .ic{ max-width:34px; font-size:15px; }
  .ovtitem .tl{ font-size:.52rem; }
}
.ovlrows{ display:grid; gap:.55rem; }
.zrow__mid .ovinput{ width:100%; padding:.4rem .55rem; border-radius:8px; border:1px solid var(--line-soft); background:var(--bg-3); color:var(--ink); font-size:.78rem; font-family:"Space Grotesk"; }
.zrow__mid .ovinput:focus{ outline:2px solid var(--cat-a); outline-offset:1px; }
.ovupload{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border-radius:8px; border:1px dashed var(--line-soft); background:var(--bg-3); color:var(--ink-2); font-size:.76rem; font-weight:600; font-family:"Space Grotesk"; cursor:pointer; }
.ovupload:hover{ border-color:var(--cat-a); color:var(--ink); }
.ovupload svg{ color:var(--cat-a); flex:none; }
/* =====================================================================
   AI DIRECTOR AGENT — one-tap CTA, finalised caption bar + slide-in chat
   Re-themed to the Pulse nebula palette (violet → magenta, ink glass).
   Minimalist, sleek; drives the same overlay-studio tools conversationally.
   ===================================================================== */
.dir-cta{ display:flex; align-items:center; gap:.7rem; width:100%;
  margin:0 0 1rem; padding:.85rem 1.1rem; border:1px solid oklch(100% 0 0 / .14);
  border-radius:var(--radius); cursor:pointer; text-align:left; color:#fff;
  background:var(--grad); box-shadow:0 12px 34px -14px oklch(54% .22 292 / .7);
  transition:transform .16s var(--ease), box-shadow .2s var(--ease); }
.dir-cta:hover{ box-shadow:0 16px 44px -14px oklch(56% .23 300 / .82); transform:translateY(-1px); }
.dir-cta:active{ transform:scale(.995); }
.dir-cta__spark{ font-size:1.25rem; flex:none; filter:drop-shadow(0 2px 6px oklch(0% 0 0 / .3)); }
.dir-cta__tx{ flex:1 1 auto; font-family:"Bricolage Grotesque"; font-weight:800; font-size:1rem; letter-spacing:.01em; line-height:1.15; }
.dir-cta__tx small{ display:block; font-family:"Space Grotesk"; font-weight:600; font-size:.76rem; opacity:.88; margin-top:.15rem; }
.dir-cta__go{ flex:none; font-size:1.1rem; font-weight:700; opacity:.9; transition:transform .18s var(--ease); }
.dir-cta:hover .dir-cta__go{ transform:translateX(3px); }
/* finalised social-caption bar (pins above the CTA once approved in chat) */
.dir-cap{ display:flex; align-items:center; gap:.65rem; width:100%; text-align:left;
  margin:0 0 .7rem; padding:.7rem .9rem; border-radius:var(--radius); cursor:pointer;
  color:var(--ink); border:1px solid oklch(64% .12 300 / .4);
  background:linear-gradient(100deg, oklch(24% .08 288 / .7), oklch(22% .10 320 / .6));
  box-shadow:0 10px 28px -16px oklch(54% .22 300 / .7); }
.dir-cap:active{ transform:scale(.995); }
.dir-cap__ic{ font-size:1rem; flex:none; }
.dir-cap__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.dir-cap__lead{ font-family:"Space Grotesk"; font-weight:700; font-size:.82rem; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.dir-cap__tags{ font-weight:600; font-size:.72rem; color:var(--magenta-hi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dir-cap__copy{ font-size:.95rem; opacity:.75; flex:none; }
/* dim scrim (mobile / narrow only — desktop reflows) */
.dir-scrim{ position:fixed; inset:0; background:oklch(6% .04 278 / .55); z-index:115;
  opacity:0; pointer-events:none; transition:opacity .28s var(--ease); }
.dir-scrim.on{ opacity:1; pointer-events:auto; }
@media(min-width:900px){
  .dir-scrim{ display:none; }
}
/* slide-in messenger */
.dir-chat{ position:fixed; top:0; right:0; height:100dvh; width:392px; max-width:93vw; z-index:120;
  display:flex; flex-direction:column; transform:translateX(106%);
  background:oklch(12% .055 278 / .93); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-left:1px solid var(--line); box-shadow:-16px 0 54px oklch(3% .06 278 / .8);
  transition:transform .3s var(--ease-out), width .26s var(--ease-out); }
.dir-chat.on{ transform:none; }
/* collapsed rail */
.dir-chat.rail{ width:64px; }
.dir-chat.rail .dir-chat__tt, .dir-chat.rail .dir-chat__msgs,
.dir-chat.rail .dir-chat__sugg, .dir-chat.rail .dir-chat__in,
.dir-chat.rail .dir-chat__x{ display:none !important; }
.dir-chat.rail .dir-chat__hd{ flex-direction:column; padding:.85rem 0; gap:.6rem; justify-content:flex-start; }
.dir-chat.rail .dir-chat__min{ transform:rotate(180deg); }
.dir-chat__hd{ display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem;
  border-bottom:1px solid var(--line-soft); background:var(--grad-soft); }
.dir-chat__av{ width:36px; height:36px; border-radius:11px; flex:none; display:grid; place-items:center;
  font-size:1.15rem; background:var(--grad); box-shadow:0 6px 18px -8px oklch(54% .22 300 / .8); }
.dir-chat__dot{ display:none; width:9px; height:9px; border-radius:50%; background:var(--ink-3); }
.dir-chat.rail .dir-chat__dot{ display:block; margin:0 auto; }
.dir-chat.working .dir-chat__dot{ background:var(--violet-hi); animation:dirBounce 1s infinite; }
.dir-chat__tt{ flex:1 1 auto; min-width:0; }
.dir-chat__tt b{ display:block; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.9rem; line-height:1.15; }
.dir-chat__tt small{ display:block; font-size:.7rem; color:var(--ink-3); }
.dir-chat__tt small[data-dir-planner="modelark"]{ color:var(--running-hi); }
.dir-chat__tt small[data-dir-planner="local"]{ color:oklch(78% .14 75); }
.dir-chat__min, .dir-chat__x{ flex:none; width:32px; height:32px; border-radius:9px; border:0; cursor:pointer;
  background:transparent; color:var(--ink-3); font-size:1rem; display:grid; place-items:center; transition:background .16s; }
.dir-chat__min:hover, .dir-chat__x:hover{ background:oklch(100% 0 0 / .06); color:var(--ink); }
.dir-chat__x{ font-size:1.2rem; }
.dir-chat__msgs{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.7rem; }
.dir-chat__msgs::-webkit-scrollbar{ width:7px; }
.dir-chat__msgs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.dir-msg{ max-width:88%; padding:.6rem .8rem; border-radius:15px; font-family:"Space Grotesk";
  font-size:.85rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
.dir-msg.bot{ align-self:flex-start; background:var(--bg-3); border:1px solid var(--line-soft); border-bottom-left-radius:5px; }
.dir-msg.me{ align-self:flex-end; color:#fff; border-bottom-right-radius:5px;
  background:linear-gradient(135deg, var(--violet), var(--violet-hi)); }
.dir-msg .did{ margin-top:.45rem; padding-top:.4rem; font-size:.72rem; color:var(--magenta-hi); border-top:1px solid oklch(100% 0 0 / .1); }
.dir-msg b{ font-weight:800; }
/* ChatGPT-style attachment chip inside a sent bubble: thumbnail + filename, so
   the transcript records WHICH clip each plan was based on. */
.dir-msg__tx{ display:block; }
.dir-msg__att{ display:flex; align-items:center; gap:.45rem; min-width:0; margin-bottom:.4rem; padding:.3rem .45rem;
  border-radius:10px; background:oklch(100% 0 0 / .16); border:1px solid oklch(100% 0 0 / .22); }
.dir-msg.bot .dir-msg__att{ background:oklch(100% 0 0 / .05); border-color:var(--line-soft); }
.dir-msg__att-thumb{ flex:none; width:26px; height:26px; border-radius:6px; display:grid; place-items:center;
  font-size:.78rem; background:oklch(18% .04 280) center/cover no-repeat; }
.dir-msg__att-name{ min-width:0; overflow:hidden; font-size:.72rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
/* "Open the task" affordance on a running step — without it the only way to
   watch a step was to leave the dock and hunt through Previous Runs. */
.dir-msg__open{ display:inline-flex; align-items:center; margin-top:.5rem; padding:.34rem .6rem; cursor:pointer;
  border-radius:9px; border:1px solid color-mix(in oklch,var(--violet) 55%,transparent);
  background:color-mix(in oklch,var(--violet) 16%,transparent); color:var(--ink);
  font-family:"Space Grotesk"; font-size:.75rem; font-weight:700; transition:background .16s,border-color .16s; }
.dir-msg__open:hover{ background:color-mix(in oklch,var(--violet) 30%,transparent); border-color:var(--violet-hi); }
.dir-card-lab{ font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem; }
.dir-card-row{ margin-bottom:.5rem; padding-bottom:.5rem; }
.dir-card-row.brd{ border-bottom:1px solid oklch(100% 0 0 / .08); }
.dir-card-row b{ display:block; line-height:1.3; }
.dir-card-row small{ display:block; color:var(--ink-3); font-size:.74rem; line-height:1.35; margin-top:.1rem; }
.dir-aistyle{ display:inline-flex; align-items:center; gap:.45rem; margin-top:.5rem; padding:.55rem .95rem;
  border:0; border-radius:12px; cursor:pointer; color:#fff; font-family:"Bricolage Grotesque"; font-weight:800; font-size:.82rem;
  background:var(--grad); box-shadow:0 8px 22px -10px oklch(56% .23 300 / .8); animation:dirGlow 2.8s ease-in-out infinite; }
.dir-aistyle:active{ transform:scale(.98); }
@keyframes dirGlow{ 0%,100%{ box-shadow:0 8px 22px -10px oklch(56% .23 300 / .7); } 50%{ box-shadow:0 10px 28px -8px oklch(60% .22 320 / .9); } }
.dir-typing{ align-self:flex-start; display:flex; gap:.28rem; padding:.7rem .85rem; border-radius:15px;
  border-bottom-left-radius:5px; background:var(--bg-3); border:1px solid var(--line-soft); }
.dir-typing i{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); animation:dirBounce 1s infinite; }
.dir-typing i:nth-child(2){ animation-delay:.15s; }
.dir-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes dirBounce{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-4px); } }
.dir-chat__sugg{ padding:0 1rem .7rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.dir-sugg{ font-family:"Space Grotesk"; font-size:.75rem; font-weight:600; cursor:pointer; text-align:left;
  color:var(--violet-hi); background:oklch(52% .21 284 / .12); border:1px solid oklch(52% .21 284 / .28);
  border-radius:99px; padding:.4rem .75rem; transition:background .16s, color .16s; }
.dir-sugg:hover{ background:oklch(52% .21 284 / .22); }
.dir-sugg.on{ background:var(--violet); color:#fff; border-color:var(--violet); font-weight:700; }
.dir-chat__in{ border-top:1px solid var(--line-soft); padding:.7rem .75rem .85rem; display:flex; flex-direction:column; gap:.5rem; }
.dir-source{ display:flex; align-items:center; gap:.6rem; min-width:0; padding:.45rem .5rem; border:1px solid var(--line-soft); border-radius:12px; background:color-mix(in oklch,var(--bg-3) 82%,transparent); }
.dir-source.on{ border-color:color-mix(in oklch,var(--violet) 55%,transparent); background:color-mix(in oklch,var(--violet) 10%,var(--bg-3)); }
/* Handed over to the sent message — stays quiet but still names the source. */
.dir-source.sent{ background:transparent; }
.dir-source__thumb{ flex:none; width:34px; height:34px; border-radius:8px; display:grid; place-items:center;
  font-size:.9rem; background:oklch(18% .04 280) center/cover no-repeat; border:1px solid var(--line-soft); }
.dir-source__copy{ min-width:0; display:flex; flex:1; flex-direction:column; gap:.08rem; }
.dir-source__copy b{ overflow:hidden; color:var(--ink); font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.dir-source__copy small{ color:var(--ink-3); font-size:.64rem; line-height:1.25; }
.dir-source__clear{ flex:none; width:26px; height:26px; border-radius:8px; border:1px solid var(--line-soft); cursor:pointer;
  background:transparent; color:var(--ink-3); font-size:.78rem; display:grid; place-items:center; transition:background .16s,color .16s; }
.dir-source__clear:hover{ background:oklch(100% 0 0 / .08); color:var(--ink); }
.dir-build{ font-size:.72rem; color:var(--running-hi); padding:0 .15rem; display:none; }
.dir-build.on{ display:block; }
.dir-chat__row{ display:flex; gap:.5rem; align-items:flex-end; }
.dir-chat__row textarea{ flex:1; min-height:44px; max-height:130px; resize:none; border-radius:12px;
  padding:.6rem .75rem; background:var(--bg-3); border:1px solid var(--line-soft); color:var(--ink);
  font-family:"Space Grotesk"; font-size:.85rem; line-height:1.4; }
.dir-chat__row textarea:focus{ outline:2px solid var(--violet); outline-offset:1px; }
.dir-clip, .dir-send{ flex:none; width:44px; height:44px; border-radius:12px; border:0; cursor:pointer;
  display:grid; place-items:center; font-size:1.05rem; }
.dir-clip{ background:var(--bg-3); border:1px solid var(--line-soft); color:var(--ink-2); }
.dir-clip:hover{ color:var(--ink); }
.dir-send{ background:var(--violet); color:#fff; transition:background .16s; }
.dir-send:hover{ background:var(--violet-hi); }
.dir-send.stop{ background:oklch(58% .2 20); }

/* --- Overlay toolbar: local adjustments on top of the ported mockup ---------
   1. The mockup drew each tile's icon as an emoji glyph (`font-size:17px`).
      This project renders icons as inline SVG, so the glyph size is replaced by
      an explicit SVG box.
   2. The mockup had no "not built yet" state because every tool was faked in
      the demo. Nine of the twelve have no backend here, so they render inert:
      visible (the roadmap stays legible) but genuinely unclickable, matching
      the `.etool__soon` language already used by the Enhance chips. */
.ovtitem .ic svg{ width:18px; height:18px; }
.ovtitem[aria-disabled="true"]{ cursor:default; opacity:.5; }
.ovtitem[aria-disabled="true"]:hover{ background:none; }
.ovtitem[aria-disabled="true"] .ic{ background:var(--bg-2); }
.ovtitem__soon{ font-size:.5rem; letter-spacing:.06em; text-transform:uppercase; font-weight:800; color:var(--ink-3); line-height:1; }

/* Complete reference-order workspace: Director → aspect → preview → transport
   / timeline → 12-tool bar → drop-down panel → export status. */
.ovworkspace{ margin-top:1rem; }
.ovphone{ width:min(100%,340px); aspect-ratio:1206/2622; transition:width .28s var(--ease-out),height .28s var(--ease-out); }
.ovstg{ width:100%; height:100%; }
.ovstagewrap[data-ovstagewrap]{ height:clamp(460px,calc(100vh - 220px),900px); padding:2.4rem .5rem 1.6rem; }
[data-ov-stage-ready]{ display:none; }
[data-ovstage][data-ov-state="ready"] .ovaddmini{ display:none; }
.ovtracks.on{ display:flex; }
.ovseg2--full{ left:0; width:100%; cursor:default; }
.ovtimeline__source{ background:linear-gradient(90deg,var(--violet),var(--magenta)); }
.ovtimeline__playhead{ position:absolute; top:-4px; bottom:-4px; width:2px; z-index:5; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 10px var(--violet-hi); pointer-events:none; }
.ovpanel__status{ display:inline-flex; padding:.22rem .55rem; border-radius:999px; font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.ovpanel__status.ready{ color:var(--running-hi); background:color-mix(in oklch,var(--running-hi) 14%,transparent); }
.ovpanel__status.preview{ color:var(--violet-hi); background:color-mix(in oklch,var(--violet-hi) 14%,transparent); }
.ovpanel__status.soon{ color:var(--magenta-hi); background:color-mix(in oklch,var(--magenta-hi) 14%,transparent); }
.ovpanel__intro{ margin:.65rem 0 .8rem; color:var(--ink); font-family:"Bricolage Grotesque"; font-size:1rem; font-weight:700; }
.ovpanel__roadmap{ padding:.75rem .85rem; border:1px dashed var(--line); border-radius:11px; color:var(--ink-3); font-size:.8rem; line-height:1.5; background:var(--bg-3); }
.ovpanel__mediahint{ margin:.1rem 0 .75rem; color:var(--ink-3); font-size:.74rem; line-height:1.55; }
.ovpanel__advanced{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin:.55rem 0 0; padding:.65rem .75rem; border-radius:10px; border:1px solid var(--line-soft); background:var(--bg-3); color:var(--ink-2); font:inherit; font-size:.75rem; cursor:pointer; }
.ovpanel__advanced:hover{ border-color:var(--line); color:var(--ink); }
.ovpanel__advanced[aria-expanded="true"] span:last-child{ transform:rotate(90deg); }
.ovpanel__advanced-body{ padding:.6rem .75rem; border:1px solid var(--line-soft); border-top:0; border-radius:0 0 10px 10px; color:var(--ink-3); font-size:.74rem; line-height:1.5; }
.ov-preview-layer{ border:2px solid #fff; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.ovtimeline__append{ background:linear-gradient(90deg,oklch(55% .16 220),oklch(65% .17 185)); }
.editor-export{ display:flex; align-items:center; gap:.9rem; margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line-soft); }
.editor-export span{ color:var(--ink-3); font-size:.82rem; line-height:1.4; }
.ovpanel__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin:.7rem 0; }
.ovpanel__grid label{ display:flex; flex-direction:column; gap:.3rem; color:var(--ink-3); font-size:.72rem; font-weight:700; }
.ovpanel__grid input,.ovpanel select,.ovpanel textarea{ width:100%; border:1px solid var(--line-soft); border-radius:9px; padding:.55rem .65rem; background:var(--bg); color:var(--ink); font:inherit; }
.ovpanel textarea{ resize:vertical; }
.ovpanel .primary,.ovpanel .done{ margin-top:.65rem; }
.socialcap-drop{ display:flex; flex-direction:column; align-items:center; gap:.55rem; cursor:pointer; transition:border-color .18s var(--ease),background .18s var(--ease); }
.socialcap-drop.is-over{ border-color:var(--magenta-hi); background:color-mix(in oklch,var(--magenta-hi) 10%,var(--bg-2)); }
.socialcap-drop > b{ color:var(--ink); font-family:"Bricolage Grotesque"; font-size:1rem; }
.socialcap-drop > small{ color:var(--ink-3); }
.socialcap-file{ color:var(--running-hi); font-size:.78rem; font-weight:700; }
.socialcap-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem; max-width:680px; }
.socialcap-grid .field{ display:flex; flex-direction:column; gap:.4rem; color:var(--ink-2); font-size:.78rem; font-weight:700; }
.socialcap-note{ margin-top:1rem; }
.socialcap-sample{ margin-top:1rem; max-width:680px; }
.socialcap-cta{ display:flex; align-items:center; gap:.9rem; margin-top:1.4rem; }
.socialcap-cta .btn:disabled{ opacity:.55; cursor:not-allowed; }
.socialcap-cta span{ color:var(--ink-3); font-size:.84rem; }
@media(max-width:640px){
  .ovstagewrap[data-ovstagewrap]{ min-height:0; height:clamp(380px,calc(100svh - 240px),640px); padding:1.8rem .5rem 1.2rem; }
  .ovcanvas{ overflow-x:auto; flex-wrap:nowrap; }
  .ovseg{ min-width:max-content; }
  .editor-export,.socialcap-cta{ align-items:flex-start; flex-direction:column; }
  .socialcap-grid{ grid-template-columns:1fr; }
}

/* --- Overlay stage: states the mockup never needed ------------------------
   The mockup always had a clip loaded, so it drew no empty state and no
   disabled transport. Here the stage is visible before a file is picked, so it
   has to say what it is waiting for, and the transport must not look clickable
   while there is nothing to play. */
.ovstg__empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  margin:0; padding:5rem 1.2rem 1.2rem; text-align:center; font-size:.8rem; line-height:1.5; color:var(--ink-3); }
[data-ovstage][data-ov-state="ready"] .ovstg__empty{ display:none; }
[data-ovstage][data-ov-state="empty"] .ovvid{ opacity:0; }
.ovstg__name{ margin:.5rem 0 0; font-size:.76rem; color:var(--ink-3); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
[data-ovidle]{ pointer-events:none; }

/* --- AI Director: confirm row ---------------------------------------------
   The mockup's Director applied edits immediately. This one proposes a plan and
   waits for a yes, so it needs an affordance the mockup never had. */
.dir-cta__row{ display:flex; gap:.5rem; margin-top:.6rem; }
.dir-cta__row .btn{ flex:1 1 0; min-width:0; font-size:.82rem; padding:.5rem .7rem; }