/* ============================================================================
   RaveClip design system — warm-dark + amber. Single source of truth.
   editor.css consumes these same tokens, so this block themes the whole app.
   ============================================================================ */
:root {
  color-scheme: dark;
  /* Surfaces — warm charcoal ramp */
  --bg: #0E0E12;
  --surface: #16161C;
  --surface2: #1E1E26;
  --surface3: #272730;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --field-bg: var(--surface2);        /* default fill for text inputs / selects */

  /* Text */
  --text: #F5F5F7;
  --text-2: #B5B5C0;
  --muted: #8A8A99;
  --faint: #7C7C8C;

  /* Accent — amber (reserved for score + primary CTA + active states) */
  --accent: #FFB020;
  --accent2: #FFCB5C;                 /* gold highlight (brand v2) */
  --accent-hover: #FFBE47;
  --accent-press: #E89A05;
  --accent-soft: rgba(255,176,32,.14);
  --accent-softer: rgba(255,176,32,.08);
  --on-accent: #17130A;
  --glow-accent: 0 0 24px rgba(255,176,32,.35);
  --grad-molten: linear-gradient(135deg, #FFCB5C 0%, #FFB020 48%, #F59E0B 100%);

  /* Semantic — warn kept distinct from the amber accent */
  --success: #34D399;
  --warn: #FB923C;
  --danger: #FB5D5D;
  --info: #6AA9FF;

  /* Timeline track colors (editor) */
  --track-captions: #3B82F6;
  --track-text: #A855F7;
  --track-stickers: #EC4899;
  --track-zoom: #22D3EE;
  --track-audio: #34D399;
  --track-video: #F97316;

  /* Type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px;
  --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 44px;
  --fs-hero: clamp(40px, 6vw, 68px); --fs-score: clamp(34px, 4vw, 52px);
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.55;

  /* Spacing (4/8 rhythm) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Radius */
  --r-xs: 6px; --r-sm: 8px; --r-10: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 4px 16px rgba(0,0,0,.4);
  --sh-lg: 0 12px 40px rgba(0,0,0,.5);
  --sh-xl: 0 24px 60px rgba(0,0,0,.55);

  /* Motion */
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);

  /* Glass (elevated surfaces only — cards, modals, top bar, palette, inspector) */
  --glass-bg: rgba(24,24,31,0.55);
  --glass-border: rgba(255,255,255,0.09);
  --glass-blur: 22px;
  --glass-hi: inset 0 1px 0 rgba(255,255,255,0.07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  overflow: hidden;
}
html { overflow-x: clip; }

/* Distinctive display face for headings + brand wordmark */
h1, h2, h3, h4, .logo, .clip-title-large {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Accessible focus ring — visible, never animated */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* Skip link — off-screen until it receives keyboard focus */
.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 1000;
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  padding: 8px 14px; border-radius: var(--r-sm); text-decoration: none;
}
.skip-link:focus { top: 12px; }
#main:focus { outline: none; }

/* Dark-theme scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--surface3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: var(--r-pill); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a3a46; }
::selection { background: var(--accent); color: var(--on-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Ambient amber glow — a lit backdrop for the glass surfaces to refract */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 46% at 14% 8%, rgba(255,176,32,.13), transparent 60%),
    radial-gradient(46% 42% at 88% 92%, rgba(255,176,32,.08), transparent 62%),
    radial-gradient(40% 38% at 92% 6%, rgba(255,176,32,.05), transparent 64%);
}

/* Signature motion */
@keyframes rc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rc-shimmer { to { background-position: 200% 0; } }

/* Custom select — unified across the app + editor (no raw OS chevron) */
select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--field-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A99' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  min-width: 0;
  padding: 9px 34px 9px 12px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out);
}
select:hover { border-color: var(--border-strong); }
select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); outline: none; }
option { background: var(--surface); color: var(--text); }

#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: rgba(14,14,18,0.62);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-6);
  z-index: 100;
}
/* Email-verify nudge — a slim amber bar just under the topbar. Dismissible;
   overlays content (doesn't reflow the fixed screens). */
#verify-banner {
  position: fixed;
  top: 52px; left: var(--rail-w, 0); right: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 20px;
  background: rgba(251,146,60,0.14);
  border-bottom: 1px solid rgba(251,146,60,0.4);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: #FDBA74; font-size: 13.5px; font-weight: 500;
  z-index: 95;
}
.verify-banner-msg { flex: 1; min-width: 0; }
.verify-banner-btn {
  border: 0; cursor: pointer; border-radius: var(--r-sm); padding: 6px 12px;
  font: inherit; font-weight: 700; font-size: var(--fs-sm);
  background: var(--grad-molten);
  color: var(--on-accent);
}
.verify-banner-btn:hover { filter: brightness(1.06); }
.verify-banner-x {
  border: 0; background: transparent; color: #FDBA74; cursor: pointer;
  font-size: var(--fs-base); line-height: 1; padding: 4px 6px; border-radius: var(--r-xs);
}
.verify-banner-x:hover { background: rgba(255,255,255,0.08); color: #fff; }
@media (max-width: 768px) { #verify-banner { left: 0; } }
.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;          /* it's a link back to the landing site */
  transition: opacity var(--dur) var(--ease-out);
}
a.logo:hover { opacity: .85; }
/* The status line and the Stop button are ONE unit in the middle of the topbar.
   #topbar is space-between with three children; Stop was inserted as a loose
   fourth, so the browser spread four items and left the status and the button
   stranded in two separate pockets of dead space, nowhere near each other. */
.topbar-mid {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
#topbar-status {
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: -0.005em;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }
.topbar-actions button { font-family: inherit; cursor: pointer; }

/* ⌘K search hint — every topbar control shares the avatar's 30px height */
.topbar-kbd {
  display: flex; align-items: center; gap: var(--sp-2); height: 30px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); border-radius: var(--r-sm);
  padding: 0 10px; font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.topbar-kbd:hover { border-color: var(--border-strong); color: var(--text-2); }
.topbar-kbd span { line-height: 1; }
.topbar-kbd kbd {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
  background: var(--surface3); border-radius: 4px; padding: 2px 5px; line-height: 1;
}

/* Plan / credits pill — reserved for the billing session */
.topbar-plan {
  display: flex; align-items: center; gap: 6px; height: 30px;
  background: var(--accent-softer); border: 1px solid var(--accent-soft);
  color: var(--accent2); border-radius: var(--r-pill);
  padding: 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 600;
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.topbar-plan:hover { box-shadow: var(--glow-accent); border-color: var(--accent); }

/* Account avatar — placeholder for the billing session's menu */
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-press));
  color: var(--on-accent); font-weight: 700; font-size: var(--fs-sm);
  display: grid; place-items: center; border: none;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.topbar-avatar:hover { transform: translateY(-1px); box-shadow: 0 2px 12px rgba(255,176,32,.4); }

#import-screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 50;
  padding: 52px 16px 16px;
}
#import-screen.visible { display: flex; }


.input-group { display: flex; gap: var(--sp-2); }
.input-group input {
  flex: 1;
  min-width: 0;
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  font-size: 14px;
}
.input-group input:focus { border-color: var(--accent); }

#yt-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 12px 22px;
  border-radius: var(--r-10);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
#yt-btn:hover { background: var(--accent2); }

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}
.divider span { padding: 0 var(--sp-3); }

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 2px dashed var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out);
}
/* Brief attention pull on the drop zone after "Upload the file instead", so the
   creator lands on the thing the error message told them to do. Reuses rc-pulse
   (the processing dot) rather than inventing a second attention animation. */
.upload-area.rc-attn { border-color: var(--accent); animation: rc-pulse 1.2s var(--ease-in-out) 3; }
@media (prefers-reduced-motion: reduce) { .upload-area.rc-attn { animation: none; } }

.upload-area:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-softer);
}

.options-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.options-row select {
  width: 100%;
  font-size: var(--fs-sm);
}
/* The one optional length control that replaced the clip length dropdown. It
   FILTERS (anything longer is left out), so it reads as a choice, not a target. */
/* Stop, offered only while a lineup is still arriving. Quiet on purpose: it is
   an escape hatch, not the main action, and the clips already on screen stay. */
/* Sits inside .topbar-mid, beside the status it belongs to (the gap there
   spaces it; it used to carry its own margin because it was a loose fourth
   child of the topbar). */
.btn-stop {
  padding: 4px 12px;
  font-size: var(--fs-xs, 12px);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim, inherit);
  cursor: pointer;
}
.btn-stop:hover { color: var(--text, inherit); border-color: var(--text-dim); }
.btn-stop[disabled] { opacity: .6; cursor: default; }

.opt-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-8, 8px);
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}
.opt-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent, #FFB020);
  cursor: pointer;
}
.opt-check span { line-height: 1.2; }

/* Mode tabs (Podcast / Product) */
.mode-tabs {
  display: flex;
  gap: 6px;
  padding: var(--sp-1);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-10);
}
.mode-tab {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.mode-tab:hover { color: var(--text); }
.mode-tab.active {
  background: var(--accent);
  color: var(--on-accent);
}

.mode-product, .mode-podcast {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.upload-hint {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* Picked files list */
.files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.files-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}
.file-idx {
  background: var(--accent);
  color: var(--on-accent);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.file-name {
  flex: 1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-size {
  color: var(--muted);
  font-size: 11px;
}

/* Caption mode panel */
.caption-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-10);
}
.panel-label {
  margin: 0 0 var(--sp-1) 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.radio-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
}
.radio-row input[type="radio"] {
  accent-color: var(--accent);
}

/* Product info fields */
.product-info-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-info-fields input,
.product-info-fields textarea {
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
}
.product-info-fields textarea { resize: vertical; min-height: 60px; }

.product-clip-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r-sm);
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 16px rgba(255,176,32,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.product-clip-btn:hover { background: var(--accent-hover); box-shadow: var(--glow-accent); transform: translateY(-1px); }
.product-clip-btn:active { transform: translateY(0); }

.error-msg {
  color: var(--danger);
  font-size: var(--fs-sm);
  text-align: center;
  display: none;
}
.error-msg.visible { display: block; }

/* Honest quota line — visible BEFORE submitting, never a surprise later */
.import-usage {
  text-align: center; font-size: var(--fs-xs); color: var(--muted);
  margin-top: -6px; /* TODO(layout): negative margin compensates for parent gap */
}

#processing-screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 50;
  padding-top: 52px;
}
#processing-screen.visible { display: flex; }

.process-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: 44px 40px;
  width: 440px;
  max-width: 92vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  --card-gap: 22px;
  gap: var(--card-gap);
  align-items: center;
  box-shadow: var(--sh-xl), var(--glass-hi);
  animation: rc-rise var(--dur-slow) var(--ease-out) both;
}
/* Short window (a resized browser, a laptop with devtools docked along the
   bottom): the card is ~338px tall under the 52px padding-top above, so a
   viewport under ~390px cannot show all of it, and align-items:center with no
   overflow-y puts the overflow half above and half below the fold with no way
   to scroll to either. flex-start + margin:auto is the same trick
   #layout-screen and the phone rule use — margin:auto still centers the card
   whenever it does fit. Gated on the HEIGHT that actually overflows rather
   than folded into the base rule: overflow-y turns the fixed parent into a
   scroll container at every size, which would clip anything the card ever
   draws outside its own box and can flash a scrollbar while rc-rise's 16px
   translate settles. The phone rule below does this under 768px wide; this is
   the short-and-wide window it never reached. */
@media (max-height: 420px) {
  #processing-screen { align-items: flex-start; overflow-y: auto; }
  .process-card { margin: auto; }
}
.spinner {
  width: 52px;
  height: 52px;
  border: 3px solid var(--surface3);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s var(--ease-in-out) infinite;
  box-shadow: var(--glow-accent);
}
@keyframes spin { to { transform: rotate(360deg); } }
#process-stage { font-size: var(--fs-lg); line-height: var(--lh-snug); text-wrap: balance; }
#process-detail { color: var(--muted); font-size: var(--fs-sm); margin-top: 6px; }

#process-bar {
  height: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
  width: 100%;
}
#process-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-press), var(--accent), var(--accent2));
  background-size: 200% 100%;
  border-radius: var(--r-pill);
  width: 0%;
  transition: width 0.5s var(--ease-out);
  box-shadow: 0 0 12px rgba(255,176,32,.5);
  animation: rc-shimmer 1.6s linear infinite;
}

/* Staged pipeline (Transcribe → Analyse → Detect → Captions → Render) */
.pipe-steps { display: flex; align-items: center; width: 100%; }
.pipe-step { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); white-space: nowrap; transition: color var(--dur) var(--ease-out); }
.pipe-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface3); border: 1px solid var(--border); flex: 0 0 auto; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.pipe-line { flex: 1 1 auto; height: 1px; background: var(--border); margin: 0 6px; }
.pipe-step.pipe-done { color: var(--text-2); }
.pipe-step.pipe-done .pipe-dot { background: var(--grad-molten); border-color: var(--accent2); }
.pipe-step.pipe-active { color: var(--accent2); }
.pipe-step.pipe-active .pipe-dot { background: var(--grad-molten); border-color: var(--accent2); animation: rc-pulse 1.2s var(--ease-in-out) infinite; }
@keyframes rc-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,176,32,.5); } 50% { box-shadow: 0 0 0 5px rgba(255,176,32,0); } }
/* Five nowrap labels outgrow the card's ~350px inner width well before the
   ≤560 phone rule — keep only the active/failed stage's label from 640 down. */
@media (max-width: 640px) {
  .pipe-step:not(.pipe-active):not(.pipe-failed) .pipe-lbl { display: none; }
}

#layout-screen {
  position: fixed;
  inset: 0;
  display: none;
  /* flex-start + margin:auto on the card, NOT align-items:center. A centered
     flex child that is taller than its container overflows in BOTH directions,
     and the part above the container cannot be scrolled to at all. With six
     layout options the card outgrows a laptop viewport, which put the heading
     off the top and "Continue" off the bottom with no way to reach either.
     margin:auto still centers it whenever it does fit. The phone rule below
     already did this; the bug was that it only did it below 768px. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  background: transparent;
  z-index: 50;
  padding: 52px 20px 24px;
}
#layout-screen.visible { display: flex; }

/* Reaction-reel review-before-render screen */
#reel-review-screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 50;
  padding: 60px 0 20px;
  overflow-y: auto;
}
#reel-review-screen.visible { display: flex; }
.reel-review-card { width: min(500px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow-y: auto; }
.reel-review-sub { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.reel-field-label { margin: 6px 0 0; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.reel-input { width: 100%; padding: 10px 12px; border-radius: var(--r-10);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 14px; box-sizing: border-box; }
.reel-cta-row { display: flex; gap: 10px; }
.reel-cta-row > div { flex: 1; }
.reel-field-hint { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.reel-event-list { list-style: none; margin: var(--sp-1) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.reel-event-row { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--r-10); background: var(--bg); }
.reel-event-toggle { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; }
.reel-event-time { display: flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-sm); color: var(--muted); }
.rr-time { width: 62px; padding: 5px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.reel-event-empty { list-style: none; font-size: var(--fs-sm); color: var(--muted); padding: var(--sp-1) 0; }
.reel-review-summary { margin: var(--sp-2) 0 0; font-size: 12.5px; color: var(--muted); }
.reel-review-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.reel-review-actions button:not(.ghost-btn) {
  background: var(--grad-molten); color: var(--on-accent); border: none;
  border-radius: var(--r-sm); padding: 11px 20px; font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(255,176,32,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.reel-review-actions button:not(.ghost-btn):hover { filter: brightness(1.05); box-shadow: var(--glow-accent); transform: translateY(-1px); }
.reel-story { font-size: var(--fs-sm); line-height: 1.4; padding: 10px 12px;
  border-radius: var(--r-10); background: rgba(52,211,153,0.10);
  border: 1px solid rgba(52,211,153,0.28); color: var(--text); }
.reel-variants { margin: 6px 0 4px; }
.reel-variants-label { font-size: var(--fs-xs); color: var(--muted); }
.reel-variants-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reel-variant-chip { font-size: 12.5px; padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.04); color: var(--text);
  cursor: pointer; text-align: left; }
.reel-variant-chip:hover { background: var(--accent-soft);
  border-color: var(--accent); }
.reel-warnings { margin: var(--sp-2) 0 0; padding: 10px 12px 10px 28px; list-style: none;
  border-radius: var(--r-10); font-size: 12.5px; line-height: 1.5;
  background: rgba(251,146,60,0.10); border: 1px solid rgba(251,146,60,0.28);
  color: var(--warn); }
.reel-warnings li { margin: 2px 0; }
.reel-mismatch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); padding: 10px 12px; border-radius: var(--r-10);
  background: rgba(251,146,60,0.12); border: 1px solid rgba(251,146,60,0.3);
  color: var(--warn); }
.reel-suggestion-btn { font-size: 12.5px; padding: 5px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--warn); background: transparent;
  color: var(--warn); cursor: pointer; }
.reel-suggestion-btn:hover { background: rgba(251,146,60,0.15); }

.layout-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  width: 460px;
  max-width: calc(100vw - 40px);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: var(--sh-xl), var(--glass-hi);
  animation: rc-rise var(--dur-slow) var(--ease-out) both;
}
.layout-card h2 {
  margin: 0;
  font-size: 22px;
}
.layout-detected {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.layout-capacity {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
/* Bad takes review, on the layout screen. Same row DNA as the reel review
   events so the two screens read as one product. */
.bad-takes {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-align: left;
}
.bad-takes-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.bad-takes-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.bad-takes-none { padding: 4px 10px; font-size: var(--fs-xs); }
.bad-takes-sub { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.bad-takes-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 232px; overflow-y: auto; }
.bad-take-row { display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--r-10); background: var(--bg); }
.bad-take-row input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px;
  accent-color: var(--accent); cursor: pointer; }
.bad-take-body { cursor: pointer; }
.bad-take-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bad-take-text { font-size: var(--fs-sm); color: var(--text); line-height: 1.35; }
.bad-take-meta { font-size: var(--fs-xs); color: var(--muted); }
.bad-take-row.is-off .bad-take-text { color: var(--muted); text-decoration: line-through; }

.layout-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.layout-option {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.layout-option:hover { border-color: var(--accent); }
.layout-option.recommended { border-color: var(--accent); background: var(--accent-softer); }
.layout-option input[type="radio"] {
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.layout-option-body { flex: 1; }
.layout-option-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 3px;
}
.layout-option-desc {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.4;
}
.badge-rec {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--grad-molten);
  color: var(--on-accent);
  margin-left: 6px;
  vertical-align: middle;
}
#layout-confirm-btn {
  margin-top: 8px;
  background: var(--grad-molten);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r-sm);
  padding: 13px;
  font-weight: 700;
  font-size: var(--fs-base);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255,176,32,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
#layout-confirm-btn:hover { filter: brightness(1.05); box-shadow: var(--glow-accent); transform: translateY(-1px); }
#layout-confirm-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; transform: none; }

#app-screen {
  position: fixed;
  inset: 0;
  display: none;
  padding-top: 52px;
}
#app-screen.visible { display: flex; }

#sidebar-clips {
  width: 300px;
  height: 100%;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#clips-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.clip-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-10);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.clip-card:hover { border-color: var(--accent); }
.clip-card.active {
  border-color: var(--accent);
  background: var(--accent-softer);
}
.clip-card .clip-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-xs);
  margin-bottom: 10px;
  background: var(--bg);
}
.clip-card .clip-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip-card .clip-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.score-badge {
  background: var(--accent-soft);
  color: var(--accent2);
  padding: 2px 8px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 11px;
}
#new-clip-btn {
  margin: var(--sp-3);
  padding: 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-sm);
}
#new-clip-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

#main-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--sp-10);
  gap: var(--sp-5);
  overflow-y: auto;
}
#video-container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
#clip-player {
  width: 100%;
  border-radius: 14px;
  background: #000;
  display: block;
}
/* Full-screen preview: the stage wrapper (video + transport bar) goes full
   screen, letterboxed on black, so the exit button stays on screen. */
.rv-stage { display: contents; }
#rv-stage:fullscreen, #rv-stage:-webkit-full-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100vw; height: 100vh; margin: 0; background: #000; gap: 10px;
}
#rv-stage:fullscreen #video-container, #rv-stage:-webkit-full-screen #video-container {
  flex: 1 1 auto; min-height: 0; max-width: none; max-height: none; width: 100%; height: auto;
  margin: 0; border-radius: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
}
#rv-stage:fullscreen #clip-player, #rv-stage:-webkit-full-screen #clip-player {
  width: 100%; height: 100%; border-radius: 0; object-fit: contain;
}
#rv-stage:fullscreen .rv-transport, #rv-stage:-webkit-full-screen .rv-transport {
  /* `max-width: none` matters: this rule only ever set `width`, so the 520px cap
     further down still applied and full screen never got the wider bar it asks
     for here. */
  flex: 0 0 auto; width: min(760px, 96vw); max-width: none; margin: 0 0 12px;
}
.rv-vol { width: 64px; accent-color: var(--accent); cursor: pointer; }
#clip-meta {
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.clip-score-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: 8px;
}
.clip-title-large {
  font-size: var(--fs-lg);
  font-weight: 700;
  /* Long AI titles clamp to two lines instead of pushing the ⋯ menu out of the column */
  flex: 1 1 auto; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clip-reason {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.clip-timestamps {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 6px;
}
#clip-actions {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
a#download-btn {
  flex: 1;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  text-align: center;
  padding: 11px;
  border-radius: var(--r-10);
  font-weight: 600;
  font-size: 14px;
}
a#download-btn:hover { background: var(--accent2); }
#copy-caption-btn {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px;
  border-radius: var(--r-10);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
#copy-caption-btn:hover { border-color: var(--accent); }

/* ===========================================================================
   Frontend completion (2026-07-17): SSE cancel, regenerate, count picker,
   speaker tabs, transcript editor, job history, ⌘K palette, toasts,
   responsive breakpoints.
   =========================================================================== */

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, transform .08s ease;
}
.ghost-btn:hover { border-color: var(--accent); color: var(--text); }
.ghost-btn:active { transform: scale(0.98); }
/* Action rows that pair a ghost button with a primary CTA: one shared height,
   so "Cancel" never sits 14px shorter than "Render Reel" beside it. */
.reel-review-actions > button,
.process-error-actions > button,
.sd-drawer-head-actions > button { min-height: 40px; }

#cancel-btn { margin-top: 18px; }

/* Clip-count picker on the confirm screen */
.count-picker {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 6px;
  color: var(--muted); font-size: 14px;
}
.count-picker select {
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 10px; font-size: 14px;
}

/* Speaker tabs */
.speaker-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.speaker-tab {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs); cursor: pointer;
}
.speaker-tab.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

/* Seed chip */
.seed-chip {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); border-radius: var(--r-xs); padding: 2px 8px;
  font-size: 11px; font-family: ui-monospace, 'SF Mono', monospace;
  cursor: pointer; white-space: nowrap;
}
.seed-chip:hover { color: var(--text); border-color: var(--accent); }

.clip-speaker { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }

/* Transcript editor */
.transcript-panel {
  margin-top: 16px; padding: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-10);
  max-height: 240px; overflow-y: auto;
}
.transcript-hint { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 10px; }
.transcript-words { line-height: 1.9; font-size: 14px; }
.tw { cursor: pointer; border-radius: 4px; padding: 0 1px; transition: background .1s ease; }
.tw:hover, .tw:focus-visible { background: var(--accent); color: var(--on-accent); }

/* Job history — collapsed by default so it stays out of the way */
.history-block { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.history-summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
  color: var(--muted); padding: 4px 2px; border-radius: var(--r-xs); user-select: none;
}
.history-summary:hover { color: var(--text); }
.history-summary::-webkit-details-marker { display: none; }
.history-summary::before {
  content: '›'; display: inline-block; transition: transform .15s ease;
  font-size: 14px; line-height: 1;
}
.history-block[open] .history-summary::before { transform: rotate(90deg); }
.jobs-count {
  margin-left: auto; font-weight: 500; font-size: 11px; color: var(--muted);
  background: var(--surface2); border-radius: var(--r-10); padding: 1px 7px; min-width: 18px;
  text-align: center;
}
.jobs-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 240px; overflow-y: auto; }
.job-row {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  background: transparent; border: none; color: var(--text);
  padding: 6px 8px; border-radius: var(--r-xs); cursor: pointer;
  font-size: var(--fs-xs); text-align: left; transition: background .1s ease;
}
.job-row:hover:not(:disabled) { background: var(--surface2); }
.job-row:disabled { cursor: default; opacity: .45; }
.job-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.job-done .job-status-dot { background: var(--success); }
.job-error .job-status-dot { background: var(--danger); }
.job-rendering .job-status-dot, .job-awaiting_layout .job-status-dot { background: var(--warn); }
.job-main { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-when { color: var(--muted); font-size: 11px; flex-shrink: 0; }

/* ⌘K command palette */
.palette-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8,8,10,.6); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  animation: rc-fade var(--dur) var(--ease-out) both;
}
.palette {
  width: min(560px, 92vw);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  box-shadow: var(--sh-xl), var(--glass-hi); overflow: hidden;
  animation: rc-rise var(--dur) var(--ease-out) both;
}
#palette-input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 16px; padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.palette-results { list-style: none; max-height: 320px; overflow-y: auto; }
#palette-input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }
.palette-item { padding: var(--sp-3) var(--sp-5); cursor: pointer; font-size: 14px; transition: background var(--dur-fast) var(--ease-out); }
.palette-item:hover { background: var(--surface2); }
.palette-item.active { background: var(--accent-softer); box-shadow: inset 3px 0 0 var(--accent); color: var(--text); }

/* Toasts */
.toast-host {
  position: fixed; bottom: 20px; right: 20px; z-index: 400;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.toast {
  background: rgba(24,24,31,0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  color: var(--text); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); max-width: 340px;
  box-shadow: var(--sh-lg), var(--glass-hi);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { border-color: var(--danger); }
.toast-info { border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   Responsive — collapse the split app view on narrow screens.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .topbar-kbd span, .topbar-plan span { display: none; }
}
/* Results stack only on phones; 769–1024 keeps two columns (tablet step below). */
@media (max-width: 768px) {
  body { overflow: auto; }
  #app-screen.visible { flex-direction: column; height: auto; }
  #sidebar-clips { border-right: none; border-bottom: 1px solid var(--border); }
  #main-viewer { width: 100%; flex-basis: auto; border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .options-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast-host { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
}

/* ---------------------------------------------------------------------------
   Post-generation reel editor
   --------------------------------------------------------------------------- */
#edit-reel-btn {
  background: var(--surface2);
  color: var(--accent2);
  border: 1px solid var(--accent);
}

.reel-editor {
  margin-top: 14px;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.reel-editor-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.reel-editor-head h4 { margin: 0; font-size: var(--fs-base); }
.reel-editor-hint { color: var(--muted); font-size: var(--fs-xs); }
.reel-tier-tag {
  font-size: 11px; color: var(--accent2);
  background: var(--accent-soft);
  border-radius: var(--r-xs); padding: 1px 6px; margin-left: 6px;
}

.reel-word-picker {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 150px; overflow-y: auto;
  padding: var(--sp-2); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.re-word {
  font-size: var(--fs-xs); padding: 3px 7px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-xs);
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.re-word:hover { border-color: var(--accent); }
.re-word.on {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  font-weight: 600;
}

.re-z-scale, .re-ev-t {
  width: 56px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-xs); padding: 2px 5px;
}

/* Revision bar */
.reel-revisions {
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.reel-rev-head { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; }
.reel-rev-row {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 4px;
}
.reel-rev-preview {
  flex: 1; text-align: left; font-size: var(--fs-sm);
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px;
  cursor: pointer;
}
.reel-rev-preview:hover:not(:disabled) { border-color: var(--accent); }
.reel-rev-preview:disabled { opacity: 0.45; cursor: default; }
.reel-rev-current {
  font-size: 10px; color: var(--success); margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.reel-rev-revert { font-size: var(--fs-xs); padding: 4px 10px; }

/* ============================================================================
   Phase 4 — Results gallery: grid of premium 9:16 clip cards.
   Gallery-scoped (#clips-list …) so it overrides the older compact-card rules.
   ============================================================================ */
#app-screen { gap: 0; }
#sidebar-clips {                 /* becomes the wide gallery column */
  flex: 1; width: auto;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

#clips-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-items: start;          /* don't stretch cards — let aspect-ratio set thumb height */
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  align-content: start;
}
#clips-list .clip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
#clips-list .clip-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--sh-lg);
}
#clips-list .clip-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--sh-md);
}
.clip-thumb-wrap {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--bg);
  overflow: hidden;
}
#clips-list .clip-thumb {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  margin: 0; border-radius: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
#clips-list .clip-card:hover .clip-thumb { transform: scale(1.04); }
.clip-score {                    /* the hero: big glowing amber virality score */
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  color: var(--on-accent); background: var(--accent);
  padding: 2px 10px; border-radius: var(--r-pill);
  box-shadow: var(--glow-accent);
  font-variant-numeric: tabular-nums;
}
.clip-dur {
  position: absolute; bottom: 8px; right: 8px;
  font-size: 11px; color: #fff; background: rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 2px 7px; border-radius: var(--r-xs);
  font-variant-numeric: tabular-nums;
}
.clip-play {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,176,32,.94); color: var(--on-accent);
  opacity: 0; transform: scale(.9);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  box-shadow: var(--glow-accent);
  pointer-events: none;
}
#clips-list .clip-card:hover .clip-play { opacity: 1; transform: scale(1); }
.clip-card-body { padding: 10px 12px 12px; }
#clips-list .clip-title {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  line-height: 1.35; margin: 0; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Gallery wide-column tweaks */
#sidebar-clips #speaker-tabs { padding: 0 var(--sp-5); margin: 6px 0 0; }
#sidebar-clips .history-block { margin: var(--sp-1) var(--sp-5) var(--sp-4); }
#sidebar-clips #new-clip-btn { margin: 4px 20px 14px; }

/* HTML hidden attribute must beat component display:flex rules above. */
[hidden] { display: none !important; }

/* ============================================================================
   AUTH + BILLING styled patterns (markup + CSS only, no logic).
   Handoff for the parallel billing session, aligned with the magic-link backend.
   The sample page these came from was deleted on 2026-09-16: Flask serves this
   whole folder, so a handoff mockup carrying invented prices was live on the
   public domain, contradicting the real pricing page beside it.
   ============================================================================ */

/* Reusable buttons */
.btn-primary {
  background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--r-sm);
  padding: 13px 20px; font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
  box-shadow: 0 2px 16px rgba(255,176,32,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--glow-accent); transform: translateY(-1px); }
.btn-ghost {
  background: transparent; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-5); font-weight: 600; font-size: var(--fs-sm); cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text); }

/* Auth (login / signup — magic link) */
.auth-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 52px 20px 20px; }
.auth-card {
  width: 400px; max-width: 94vw; background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  padding: 36px 34px; box-shadow: var(--sh-xl), var(--glass-hi);
  display: flex; flex-direction: column; gap: var(--sp-4);
  animation: rc-rise var(--dur-slow) var(--ease-out) both;
}
.auth-logo { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.auth-title { font-family: var(--font-display); font-size: var(--fs-2xl); text-align: center; letter-spacing: -0.02em; }
.auth-sub { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-top: -8px; /* TODO(layout): negative margin compensates for parent gap */ }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.auth-input {
  width: 100%; background: var(--field-bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 12px 14px; color: var(--text); font: inherit; font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease-out);
}
.auth-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.auth-alt { text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.auth-alt a { color: var(--accent2); text-decoration: none; cursor: pointer; }
.auth-note { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; font-size: var(--fs-xs); color: var(--faint); }

/* Account / billing settings */
.settings-wrap { max-width: 760px; margin: 0 auto; padding: 84px 24px 40px; display: flex; flex-direction: column; gap: var(--sp-6); }
.settings-h1 { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.settings-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3);
}
.settings-card h3 { font-family: var(--font-display); font-size: var(--fs-md); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.settings-row:first-of-type { border-top: none; }
.settings-label { font-size: var(--fs-sm); color: var(--text-2); }
.settings-value { font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
.usage-bar { height: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; }
.usage-fill { height: 100%; background: linear-gradient(90deg, var(--accent-press), var(--accent)); border-radius: var(--r-pill); box-shadow: 0 0 10px rgba(255,176,32,.4); }
.plan-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent2); border: 1px solid var(--accent-soft); border-radius: var(--r-pill); padding: 3px 10px; font-size: var(--fs-xs); font-weight: 700; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.pricing-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.pricing-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.pricing-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 12px 40px rgba(255,176,32,.14); }
.pricing-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 700; padding: 3px 12px; border-radius: var(--r-pill); box-shadow: var(--glow-accent); white-space: nowrap; }
.pricing-name { font-family: var(--font-display); font-size: var(--fs-md); }
.pricing-price { font-family: var(--font-display); font-size: var(--fs-3xl); letter-spacing: -0.02em; }
.pricing-price small { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); color: var(--text-2); }
.pricing-features li { display: flex; align-items: center; gap: var(--sp-2); }
.pricing-features svg { color: var(--accent); flex: 0 0 auto; }

/* Generic modal (upgrade / paywall) */
.rc-modal-overlay {
  position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  background: rgba(8,8,10,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: rc-fade var(--dur) var(--ease-out) both;
}
.rc-modal {
  width: 440px; max-width: 94vw; background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  padding: var(--sp-8); box-shadow: var(--sh-xl), var(--glass-hi);
  display: flex; flex-direction: column; gap: var(--sp-4);
  animation: rc-rise var(--dur) var(--ease-out) both;
}
.rc-modal-icon { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); box-shadow: var(--glow-accent); }
.rc-modal h2 { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: -0.02em; }
.rc-modal p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.rc-modal-text { margin: 0 0 var(--sp-4); color: var(--muted, #bbb); font-size: var(--fs-sm); line-height: 1.5; }
.rc-modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.rc-modal-actions .btn-primary { flex: 1; }

/* Top-bar account dropdown menu */
.account-menu {
  /* Fixed under the 52px topbar; right edge flush with the avatar (topbar padding 24px). */
  position: fixed; top: 56px; right: 24px; z-index: 250; min-width: 220px;
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border); border-radius: var(--r-md);
  box-shadow: var(--sh-xl), var(--glass-hi); padding: 6px;
  animation: rc-rise var(--dur-fast) var(--ease-out) both;
}
.account-menu-head { padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.account-menu-email { font-size: var(--fs-sm); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text-2); cursor: pointer;
  padding: 9px 12px; border-radius: var(--r-xs); font-size: var(--fs-sm);
}
.account-menu-item:hover { background: var(--surface2); color: var(--text); }
.account-menu-item.danger { color: var(--danger); }

/* ===========================================================================
   RaveClip brand v2 — Higgsfield cinematic hero + molten amber→gold identity
   =========================================================================== */
/* Tint every native checkbox/radio amber (kills the default browser blue). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Cinematic hero backdrop on the landing/import screen (generated in Higgsfield). */
.hero-bg {
  position: fixed; inset: 0; z-index: 0;
  background: var(--bg) url('assets/brand/hero.jpg') center / cover no-repeat;
  animation: rc-fade var(--dur-slow) var(--ease-out) both;
}
/* Looping hero video (drops in as assets/brand/hero.mp4). Until it exists the
   <video> stays transparent and the hero.jpg on .hero-bg shows through. */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 74% center;
  filter: brightness(.58) saturate(1.06) contrast(1.02);
  animation: rc-fade var(--dur-slow) var(--ease-out) both;
}
/* The dimming scrim lives with the import-screen studio shell
   (`#import-screen .hero-bg::after`) — .hero-bg only exists there. */
/* On phones and for reduced-motion, use the light still instead of the video. */
@media (max-width: 768px) {
  .hero-video { display: none; }
  .hero-bg { background-image: url('assets/brand/hero-mobile.jpg'); }
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Premium eyebrow pill + gradient headline word. */
.hero-eyebrow {
  align-self: center; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent2); background: var(--accent-softer);
  border: 1px solid var(--accent-soft); padding: 5px 13px; border-radius: var(--r-pill);
}
#import-screen h1 {
  font-size: clamp(30px, 5.4vw, 46px); line-height: 1.04; letter-spacing: -0.02em;
}
.grad {
  background: var(--grad-molten); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Molten primary CTAs. */
#yt-btn, .product-clip-btn {
  background: var(--grad-molten); color: var(--on-accent);
  box-shadow: 0 6px 20px rgba(255,176,32,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
#yt-btn:hover, .product-clip-btn:hover {
  background: var(--grad-molten); filter: brightness(1.05);
  transform: translateY(-1px); box-shadow: var(--glow-accent), 0 8px 24px rgba(255,176,32,.34);
}

/* Logo mark gets a soft molten glow. */
.logo-mark { filter: drop-shadow(0 2px 9px rgba(255,176,32,.4)); }

/* --- Results gallery v2 — molten score, staggered entrance, hover sheen --- */
#clips-list .clip-card {
  animation: rc-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.clip-score {
  background: var(--grad-molten); color: var(--on-accent);
  box-shadow: 0 0 0 1px rgba(255,203,92,.35), 0 4px 14px rgba(255,176,32,.42);
}
.clip-score.hot { animation: rc-pulse 1.9s var(--ease-in-out) infinite; }
#clips-list .clip-card:hover { box-shadow: var(--sh-lg), 0 0 0 1px var(--accent-soft); }
#clips-list .clip-card.active {
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(255,176,32,.22), var(--sh-md);
}
/* light sheen sweeping across the thumbnail on hover */
.clip-thumb-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,203,92,.16) 50%, transparent 58%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out);
}
#clips-list .clip-card:hover .clip-thumb-wrap::after { transform: translateX(120%); }

/* ============================================================================
   Studio shell (2026-07-31) — persistent left rail + home dashboard.
   The reel editor (z-index 200) deliberately covers the rail (z-index 90):
   editing is immersive, everything else lives inside the shell.
   ============================================================================ */
:root { --rail-w: 64px; }

#app-rail {
  position: fixed; top: 52px; left: 0; bottom: 0; width: var(--rail-w);
  z-index: 90;
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--surface2); border-right: 1px solid var(--border);
  padding: 10px 0;
}
.rail-spacer { flex: 1; }
.rail-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 10px; font-weight: 600;
  padding: 10px 2px; margin: 2px 6px; border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn:hover { color: var(--text-2); background: var(--surface3); }
.rail-btn:active { transform: scale(.94); }
.rail-btn.active { color: var(--accent2); background: var(--accent-softer); }
.rail-btn.active::before {
  content: ''; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--grad-molten);
  box-shadow: 0 0 10px rgba(255,176,32,.5);
}

/* Home — "Studio" dashboard */
#home-screen {
  position: fixed; inset: 0; display: none;
  background: transparent; z-index: 50;
  padding-top: 52px;
  overflow-y: auto;
}
#home-screen.visible { display: block; }
.home-wrap {
  max-width: 1060px; margin: 0 auto; padding: 36px 32px 60px;
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.home-head h1 {
  font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.02em; line-height: 1.1;
  animation: rc-rise var(--dur-slow) var(--ease-out) both;
}
.home-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 6px; }

/* Quick-drop — paste/drop and go; hands off to the existing import flow */
.home-quickdrop {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--sh-md), var(--glass-hi);
  animation: rc-rise var(--dur-slow) var(--ease-out) both; animation-delay: 40ms;
}
.home-qd-row { display: flex; gap: var(--sp-2); }
#home-url-input {
  flex: 1; min-width: 0; background: var(--field-bg);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); color: var(--text); font-size: 14px;
  transition: border-color var(--dur) var(--ease-out);
}
#home-url-input:focus { border-color: var(--accent); }
#home-url-btn {
  background: var(--grad-molten); color: var(--on-accent); border: none;
  border-radius: var(--r-sm); padding: 12px 22px; font-weight: 700; font-size: 14px;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(255,176,32,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
#home-url-btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--glow-accent); }
.home-drop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 2px dashed var(--border); border-radius: var(--r-md);
  padding: 14px; color: var(--muted); font-size: var(--fs-sm); cursor: pointer;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out);
}
.home-drop:hover, .home-drop.dragging { border-color: var(--accent); color: var(--text); background: var(--accent-softer); }
.home-qd-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--faint);
}
.home-all-options {
  background: none; border: none; cursor: pointer;
  color: var(--accent2); font-size: var(--fs-xs); font-weight: 600; padding: 0;
}
.home-all-options:hover { text-decoration: underline; }

/* Tool dock: every tool one tap away, grouped Create / Enhance / Publish.
   Tiles are rendered by renderHomeDock() from HOME_TOOLS (app.js). .home-tool-ic
   holds the inline SVG symbol #ic-<tool id> from the sprite in index.html. */
.home-dock {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4) var(--sp-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  overflow: visible;
  animation: rc-rise var(--dur-slow) var(--ease-out) both; animation-delay: 60ms;
}
.home-dock-group { min-width: 0; }
.home-dock-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 var(--sp-2);
}
/* Two tiles per row inside a group → every group is exactly two rows tall. */
.home-dock-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.home-tool {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
  min-height: 52px; padding: 5px 12px 5px 5px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text); font: inherit; cursor: pointer; text-align: left;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.home-tool:hover, .home-tool:focus-visible {
  transform: translateY(-2px); border-color: var(--accent-soft);
  box-shadow: var(--sh-md), 0 0 18px rgba(255,176,32,.08);
}
.home-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-tool-ic {
  position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--r-10);
  display: grid; place-items: center; overflow: hidden;
  background: var(--accent-softer); color: var(--accent2);
  transition: background var(--dur) var(--ease-out);
}
.home-tool:hover .home-tool-ic { background: var(--accent-soft); }
.home-tool-ic svg { width: 22px; height: 22px; }
.home-tool-name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; min-width: 0; }   /* wraps to 2 lines in narrow columns */
.home-tool.is-soon .home-tool-ic { background: rgba(255,255,255,.04); color: var(--muted); }
.home-tool.is-soon .home-tool-name { color: var(--text-2); }
.home-tool.needs-job .home-tool-ic { opacity: .5; }
.home-tool-badge {
  position: absolute; top: -7px; right: 8px; pointer-events: none;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
  color: var(--text-2); background: var(--surface3);
  border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--r-pill);
}
.home-tool-badge.new { background: var(--grad-molten); color: var(--on-accent); border-color: transparent; }
.home-tool-badge.noted {
  color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
/* Tooltip — hint + credits (+ the brand loop on the three make-modes). Sits
   above the tile; the quick-drop card is always above the dock so it never clips. */
.home-tool-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; width: 210px;
  transform: translate(-50%, 4px);
  padding: 10px 12px; border-radius: var(--r-md); text-align: left;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  box-shadow: var(--sh-md), var(--glass-hi);
  font-size: var(--fs-xs); line-height: 1.4; color: var(--text); white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.home-tool:hover .home-tool-tip, .home-tool:focus-visible .home-tool-tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.home-tool-tip b { display: block; font-weight: 600; }
.home-tool-tip-sub { display: block; color: var(--muted); margin-top: 2px; }
.home-tool-tip-vid {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-sm); margin-top: 8px; background: var(--surface3);
}
@media (prefers-reduced-motion: reduce) { .home-tool-tip-vid { display: none; } }
/* "Soon" explainer sheet — the "use this meanwhile" callout */
.rc-modal .home-soon-alt {
  padding: 10px 12px; border-radius: var(--r-sm); color: var(--text-2);
  background: var(--accent-softer); border: 1px solid var(--accent-soft);
}
.rc-modal .home-soon-alt:empty { display: none; }

/* Usage strip — honest quota, only when a limit exists */
.home-usage {
  display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto;
  font-size: var(--fs-xs); color: var(--muted);
}
/* WebKit sizes a flex box nested in another flex box to its narrowest word
   ("0 of / 7 / runs / today") — pin the label so it can never wrap. */
.home-usage > span:first-child { flex: 0 0 auto; white-space: nowrap; }
.home-usage-bar {
  flex: 0 0 120px; height: 6px; border-radius: var(--r-pill);
  background: var(--surface2); border: 1px solid var(--border); overflow: hidden;
}
.home-usage-fill { height: 100%; background: var(--grad-molten); border-radius: var(--r-pill); }

/* Resume card — pick up where you left off */
.home-resume {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--accent-soft);
  border-radius: var(--r-lg); padding: 14px 18px; cursor: pointer;
  box-shadow: 0 0 24px rgba(255,176,32,.08);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  animation: rc-rise var(--dur-slow) var(--ease-out) both; animation-delay: 80ms;
  text-align: left; width: 100%; color: var(--text); font-family: inherit;
}
.home-resume:hover { border-color: var(--accent); transform: translateY(-2px); }
.home-resume-icon {
  width: 40px; height: 40px; border-radius: var(--r-md); flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent2);
}
.home-resume-main { flex: 1; min-width: 0; }
.home-resume-title { display: block; font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-resume-sub { color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.home-resume-cta { color: var(--accent2); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }

/* Projects grid */
.home-projects-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);   /* center: the Posts variant holds a bordered button */
}
.home-projects-head h2 { font-size: var(--fs-lg); letter-spacing: -0.01em; }
.home-projects-count { color: var(--faint); font-size: var(--fs-xs); }
.home-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4); align-items: start;
}
.proj-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  padding: 0; text-align: left; color: var(--text); font-family: inherit;
  animation: rc-rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.proj-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--sh-lg), 0 0 0 1px var(--accent-soft); }
.proj-thumb-wrap {
  position: relative; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden;
}
.proj-thumb {
  position: absolute; inset: 0;    /* covers the poster frame beneath */
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.proj-card:hover .proj-thumb { transform: scale(1.04); }
/* Poster fallback v2 — a miniature video-player frame. Mode-specific art
   behind a scrim, a glass play button, and a per-job progress bar: reads as
   "a video lives here", and no two cards look copy-pasted. A real thumbnail
   <img> simply covers this layer when it exists. */
.proj-poster {
  position: absolute; inset: 0;
  background-color: #241a08;
  background-size: cover; background-repeat: no-repeat;
}
.pp-podcast { background-image: url('assets/marketing/poster-podcast.jpg'); }
.pp-product { background-image: url('assets/marketing/poster-product.jpg'); }
.pp-reel { background-image: url('assets/marketing/poster-reel.jpg'); }
.pp-voiceover { background-image: url('assets/marketing/poster-podcast.jpg'); }   /* the microphone art */
.proj-poster::before {           /* scrim + vignette so chrome + chips read */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(90% 90% at 50% 45%, rgba(10,8,4,.05), rgba(10,8,4,.5) 100%),
    linear-gradient(to top, rgba(10,8,4,.55), transparent 45%);
}
.pp-play {
  position: absolute; top: calc(50% - 6px); left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(10,8,4,.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.pp-play svg { width: 18px; height: 18px; margin-left: 2px; }
.proj-card:hover .pp-play {
  transform: translate(-50%, -50%) scale(1.1);
  border-color: var(--accent2);
  box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 18px rgba(255,176,32,.35);
}
.pp-bar {
  position: absolute; left: 12px; right: 12px; bottom: 10px; height: 3px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.22); overflow: hidden;
}
.pp-bar i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--grad-molten);
  box-shadow: 0 0 8px rgba(255,176,32,.5);
}
.proj-score {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--on-accent); background: var(--grad-molten);
  padding: 1px 9px; border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px rgba(255,203,92,.35), 0 4px 14px rgba(255,176,32,.42);
  font-variant-numeric: tabular-nums;
}
.proj-state {
  position: absolute; bottom: 8px; right: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.proj-card.expired { opacity: .55; }
.proj-card.expired:hover { transform: none; box-shadow: none; border-color: var(--border); }
.proj-state.expired { color: var(--text-2); }
.proj-state.failed { background: rgba(251,93,93,.85); }
.proj-state.processing { background: rgba(255,176,32,.9); color: var(--on-accent); }
.proj-state.expiring { background: rgba(0,0,0,.6); color: var(--accent2); border: 1px solid var(--accent-soft); }

/* "What's new" release notes list */
.whatsnew-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.whatsnew-list li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; position: relative; }
.whatsnew-list li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--grad-molten); box-shadow: 0 0 8px rgba(255,176,32,.5);
}
.whatsnew-list b { font-size: var(--fs-sm); }
.whatsnew-list span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.proj-body { padding: 10px 12px 12px; }
.proj-title {
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.proj-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px; font-size: var(--fs-xs); color: var(--muted);
}
.proj-kind {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  color: var(--accent2); background: var(--accent-softer);
  border: 1px solid var(--accent-soft);
  padding: 1px 7px; border-radius: var(--r-pill);
}
/* Reel editable-window countdown chip (per-reel "hours left to edit"). */
.proj-edit {
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-2); background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  padding: 1px 7px; border-radius: var(--r-pill); white-space: nowrap;
}
.proj-edit.warn {                 /* <6h left — amber nudge to edit soon */
  color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.proj-edit.gone { color: var(--muted); opacity: .8; }   /* window ended */
.proj-edit.kept {                 /* retention disabled — kept indefinitely */
  color: var(--accent2); border-color: var(--accent-soft);
  background: var(--accent-softer);
}

/* Empty state — first-run guidance (edge case: boot lands first-runs on import) */
.home-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: 44px 20px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--r-lg);
  color: var(--muted);
}
.home-empty-art {
  width: min(340px, 82%); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg), 0 0 40px rgba(255,176,32,.14);
}
.home-empty h3 { color: var(--text); font-size: var(--fs-md); }
.home-empty-steps {
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
  font-size: var(--fs-xs);
}
.home-empty-steps span { display: flex; align-items: center; gap: 7px; }
.home-empty-steps b {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent2); font-size: 11px;
}

/* ============================================================================
   Pre-processing workflow controls — moment hint, processing window,
   visual caption picker. (Parity with OpusClip's workflow page, our way.)
   ============================================================================ */
.moment-hint {
  width: 100%; background: var(--field-bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 11px 14px; color: var(--text);
  font-size: var(--fs-sm); font-family: inherit;
  transition: border-color var(--dur) var(--ease-out);
}
.moment-hint:focus { border-color: var(--accent); }
.moment-hint::placeholder { color: var(--faint); }

.headline-toggle {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer; user-select: none;
}
/* Same WebKit nested-flex quirk in reverse: the label text ran off the right
   edge on phones instead of wrapping — let it take the remaining width. */
.headline-toggle > span { flex: 1 1 auto; min-width: 0; }
.headline-toggle:hover { color: var(--text); }

.adv-panel {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface2); padding: 0 14px;
}
.adv-panel summary {
  cursor: pointer; list-style: none; padding: 10px 0;
  font-size: 12.5px; color: var(--muted); user-select: none;
  display: flex; align-items: center; gap: var(--sp-2);
}
.adv-panel summary::-webkit-details-marker { display: none; }
.adv-panel summary::before { content: '›'; transition: transform .15s ease; }
.adv-panel[open] summary::before { transform: rotate(90deg); }
.adv-panel summary:hover { color: var(--text); }
.adv-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--success); background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.3); border-radius: var(--r-pill); padding: 1px 8px;
}
.adv-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 2px 0 12px; }
.adv-row label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.adv-row input {
  width: 74px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 6px 9px; color: var(--text);
  font-size: var(--fs-sm); font-family: var(--font-mono); text-align: center;
}
.adv-row input:focus { border-color: var(--accent); }
.adv-hint { font-size: 10.5px; color: var(--faint); }

/* Caption picker — every chip animates its sample on hover */
.cap-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.cap-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 6px 8px; cursor: pointer;
  font-family: inherit; color: var(--muted);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cap-chip:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.cap-chip.active { border-color: var(--accent); background: var(--accent-softer); color: var(--text); box-shadow: 0 0 0 1px var(--accent-soft); }
.cap-name { font-size: 10px; font-weight: 600; line-height: 1.2; text-align: center; }
.cap-sample {
  height: 26px; display: grid; place-items: center; width: 100%;
  overflow: hidden; position: relative;
}
.cap-sample i {
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-base); letter-spacing: .04em; color: #fff; position: relative; z-index: 1;
}
@keyframes capPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.28); } }
@keyframes capSweep { from { transform: translateX(-110%); } to { transform: translateX(0); } }
@keyframes capFlash { 0%,100% { color: #fff; } 50% { color: var(--accent2); } }
.cp-viral_pop_v2 .cap-sample i { text-transform: uppercase; }
.cp-viral_pop_v2:hover .cap-sample i { animation: capPop .5s var(--ease-out), capFlash .5s var(--ease-out); }
.cp-viral_pop:hover .cap-sample i { animation: capPop .5s var(--ease-out); }
.cp-karaoke_box .cap-sample::before,
.cp-highlight .cap-sample::before {
  content: ''; position: absolute; left: 26%; right: 26%; top: 3px; bottom: 3px;
  background: var(--grad-molten); border-radius: 4px; opacity: .85;
}
.cp-karaoke_box .cap-sample i, .cp-highlight .cap-sample i { color: var(--on-accent); }
.cp-karaoke_box:hover .cap-sample::before,
.cp-highlight:hover .cap-sample::before { animation: capSweep .45s var(--ease-out); }
.cp-big_bold .cap-sample i { font-size: var(--fs-md); letter-spacing: .08em; }
.cp-big_bold:hover .cap-sample i { animation: capPop .5s var(--ease-out); }
.cp-white .cap-sample i { font-family: var(--font-ui); font-weight: 600; }
#caption-select.has-picker { display: none; }
.options-row:has(#caption-select.has-picker) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Live progress line on in-flight Studio cards */
.proj-prog {
  margin-top: 6px; font-size: 11px; color: var(--accent2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================================
   Layout picker — animated mini-diagrams (a 9:16 frame per layout) so the
   choice is visual, not a paragraph. Panels pulse / the face-dot wanders
   on hover and on the recommended card.
   ============================================================================ */
.lay-art {
  flex: 0 0 auto; width: 34px; height: 58px; border-radius: var(--r-xs); margin-top: 2px;
  background: var(--surface2); border: 1px solid var(--border-strong);
  position: relative; overflow: hidden;
}
.la-pane {
  position: absolute; border-radius: 3px;
  background: var(--accent-soft); border: 1px solid var(--accent-soft);
}
.la-top { inset: 3px 3px 51% 3px; }
.la-bottom { inset: 51% 3px 3px 3px; }
.la-left { inset: 3px 51% 3px 3px; }
.la-right { inset: 3px 3px 3px 51%; }
.la-full {
  position: absolute; inset: 3px; border-radius: 3px;
  background: var(--accent-softer); border: 1px solid var(--accent-soft);
  transition: transform var(--dur-slow) var(--ease-out);
}
.la-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--grad-molten); top: 12px; left: 12px;
  box-shadow: 0 0 8px rgba(255,176,32,.5);
}
.la-a1 { inset: 3px; }
.la-a2 { inset: 3px 3px 51% 3px; opacity: 0; background: rgba(255,176,32,.3); }
@keyframes la-track {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(11px, 7px); }
  65% { transform: translate(4px, 20px); }
}
@keyframes la-pulse {
  0%, 100% { background: var(--accent-soft); }
  50% { background: rgba(255,176,32,.34); }
}
@keyframes la-swap { 0%, 45% { opacity: 0; } 55%, 100% { opacity: 1; } }
.layout-option:hover .la-dot,
.layout-option.recommended .la-dot { animation: la-track 2.2s var(--ease-in-out) infinite; }
.layout-option:hover .la-top,
.layout-option:hover .la-left { animation: la-pulse 1.4s var(--ease-in-out) infinite; }
.layout-option:hover .la-bottom,
.layout-option:hover .la-right { animation: la-pulse 1.4s var(--ease-in-out) .7s infinite; }
.layout-option:hover .la-a2,
.layout-option.recommended .la-a2 { animation: la-swap 1.8s var(--ease-in-out) infinite alternate; }
.layout-option:hover .la-full { transform: scale(1.12); }

/* ============================================================================
   Clip detail extras — post-ready caption preview + honest expired player.
   ============================================================================ */
.caption-preview {
  margin-top: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
#caption-preview-text { font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.caption-hook { font-size: var(--fs-xs); color: var(--text-2); margin-top: 6px; }
.caption-hook b { color: var(--accent2); font-weight: 700; }
.caption-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cap-tag {
  font-size: 11px; color: var(--accent2); background: var(--accent-softer);
  border: 1px solid var(--accent-soft); border-radius: var(--r-pill); padding: 1px 8px;
}
.player-note {
  display: grid; place-items: center; text-align: center;
  min-height: 220px; padding: var(--sp-5);
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: 14px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5;
}

/* ============================================================================
   Social posting — Post panel (accounts, per-platform captions, schedule)
   + the Posts & analytics screen.
   ============================================================================ */
#post-btn {
  flex: 1; background: var(--surface2); border: 1px solid var(--accent);
  color: var(--accent2); padding: 11px; border-radius: var(--r-10);
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
#post-btn:hover { background: var(--accent-softer); box-shadow: 0 0 14px rgba(255,176,32,.15); }

.post-setup-note {
  font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2);
  background: var(--accent-softer); border: 1px solid var(--accent-soft);
  border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 10px;
}
.post-accounts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.post-acct {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-10);
  background: var(--bg); font-size: var(--fs-sm);
}
.post-acct.on { border-color: rgba(52,211,153,.4); }
.post-acct-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.plat-tiktok { background: linear-gradient(135deg, #25F4EE, #FE2C55); }
.plat-instagram { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
.plat-youtube { background: #FF0033; }
.plat-facebook { background: #1877F2; }
.post-acct-name { font-weight: 600; }
.post-acct-handle { flex: 1; color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-acct.on .post-acct-handle { color: var(--success); }
.post-acct-btn { font-size: var(--fs-xs); padding: 4px 10px; }
.post-acct-btn:disabled { opacity: .4; cursor: default; }

.post-loading { font-size: var(--fs-xs); color: var(--muted); }
.post-cap-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.post-cap-tab {
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
  border-radius: var(--r-pill); padding: 5px 14px; font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.post-cap-tab:hover { color: var(--text); border-color: var(--border-strong); }
.post-cap-tab.active { color: var(--accent2); border-color: var(--accent); background: var(--accent-softer); }
#post-cap-text {
  width: 100%; resize: vertical; min-height: 96px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-10);
  color: var(--text); font: inherit; font-size: var(--fs-sm); line-height: 1.5;
  padding: 10px 12px;
}
#post-cap-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.post-cap-actions { display: flex; gap: var(--sp-2); margin-top: 6px; }
.post-when-row { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-3) 0 var(--sp-1); flex-wrap: wrap; }
#post-when-at {
  background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font: inherit; font-size: var(--fs-sm); padding: 7px 10px;
  color-scheme: dark;
}
.post-status { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.post-status-row {
  font-size: 12.5px; line-height: 1.5; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); background: var(--surface2); border: 1px solid var(--border);
}
.post-status-row a { color: var(--accent2); }
.post-status-row.published { border-color: rgba(52,211,153,.4); }
.post-status-row.scheduled { border-color: var(--accent-soft); }
.post-status-row.failed { border-color: rgba(251,93,93,.4); color: var(--text-2); }

/* Account menu tweaks (patterns from the auth handoff, now live) */
.account-menu-plan { font-size: 11px; color: var(--muted); margin-top: 2px; }
.account-menu-item kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  background: var(--surface3); border-radius: 4px; padding: 1px 5px;
}

/* Keyboard shortcuts overlay */
.shortcuts-modal { width: min(380px, 94vw); }
.shortcut-rows { display: flex; flex-direction: column; }
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 9px 2px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-2);
}
.shortcut-row:first-child { border-top: none; }
.shortcut-row kbd {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
  background: var(--surface3); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 7px;
}

/* Posts & analytics screen */
.posts-section-head {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 8px;
}
#posts-upcoming .posts-section-head:first-child { margin-top: 0; }
#posts-screen {
  position: fixed; inset: 0; display: none;
  background: transparent; z-index: 50; padding-top: 52px; overflow-y: auto;
}
#posts-screen.visible { display: block; }
.posts-wrap {
  max-width: 860px; margin: 0 auto; padding: 36px 32px 60px;
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.posts-wrap h2 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
.posts-summary { display: flex; gap: 10px; flex-wrap: wrap; }
.posts-chip {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 6px 14px; font-size: var(--fs-xs); color: var(--muted);
}
.posts-chip b { color: var(--accent2); font-family: var(--font-display); font-size: 14px; margin-right: 4px; }
.posts-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.post-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px;
  animation: rc-rise var(--dur-slow) var(--ease-out) both;
}
.post-row-main { flex: 1; min-width: 0; }
.post-row-cap {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-row-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.post-row-status {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--surface2); color: var(--muted); white-space: nowrap;
}
.post-row.st-published .post-row-status { background: rgba(52,211,153,.14); color: var(--success); }
.post-row.st-scheduled .post-row-status { background: var(--accent-softer); color: var(--accent2); }
.post-row.st-failed .post-row-status { background: rgba(251,93,93,.12); color: var(--danger); }

/* ============================================================================
   Results triage — generate many, keep the winners. K/X keys, kept filter,
   zip download of survivors. Green = kept (amber stays the selection color).
   ============================================================================ */
.triage-bar {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-5) 0;
}
.tri-filter {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer; font-family: inherit;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.tri-filter:hover { color: var(--text); border-color: var(--border-strong); }
.tri-filter.active { border-color: var(--accent); color: var(--accent2); background: var(--accent-softer); }
#tri-kept-count {
  display: inline-block; min-width: 16px; text-align: center;
  background: var(--surface3); border-radius: var(--r-pill);
  font-size: 10px; padding: 0 5px; margin-left: 2px;
}
.tri-download {
  display: inline-block; text-decoration: none;
  background: var(--grad-molten); color: var(--on-accent);
  border-radius: var(--r-pill); padding: 5px 13px;
  font-size: var(--fs-xs); font-weight: 700;
  box-shadow: 0 3px 12px rgba(255,176,32,.25);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur) var(--ease-out);
}
.tri-download:hover { filter: brightness(1.05); transform: translateY(-1px); }
.tri-hint { margin-left: auto; font-size: 10px; color: var(--faint); white-space: nowrap; }


.clip-why {
  font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Hover-live preview — the clip plays (muted) right on its card */
.clip-hoverprev {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  animation: rc-fade var(--dur) var(--ease-out) both;
}
.clip-score, .clip-dur { z-index: 1; }
.clip-card.previewing .clip-play { opacity: 0 !important; }
.clip-triage { display: flex; gap: 6px; padding: 0 var(--sp-3) var(--sp-3); }
.clip-triage button {
  font-size: 11px; font-weight: 600; padding: 5px 10px;
  border-radius: var(--r-xs); cursor: pointer; font-family: inherit;
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.clip-triage .tri-keep { flex: 1; }
.clip-triage button:hover { color: var(--text); border-color: var(--border-strong); }
#clips-list .clip-card.kept { border-color: var(--success); box-shadow: 0 0 0 1px var(--success), 0 0 18px rgba(52,211,153,.15); }
.clip-card.kept .tri-keep { background: rgba(52,211,153,.16); border-color: var(--success); color: var(--success); }
#clips-list .clip-card.skipped { opacity: .38; filter: saturate(.55); }
#clips-list .clip-card.skipped:hover { opacity: .7; }
.clip-card.skipped .tri-skip { background: rgba(251,93,93,.14); border-color: var(--danger); color: var(--danger); }

/* ============================================================================
   Glass-box processing — honest scope, per-clip render ticks, elapsed timer,
   graceful failure. (Attacks the category's #1 complaint: opaque processing.)
   ============================================================================ */
/* Rows that hug the row above sit 6px under it instead of a full card gap.
   Expressed against --card-gap so they can never eat into wrapped text. */
.process-scope { color: var(--faint); font-size: var(--fs-xs); margin-top: calc(6px - var(--card-gap)); }
.process-scope:empty { display: none; }
.process-elapsed {
  color: var(--faint); font-size: var(--fs-xs); margin-top: calc(12px - var(--card-gap));
  font-variant-numeric: tabular-nums;
}
.process-elapsed:empty { display: none; }
/* The card is a centred column flexbox; give its text rows the full width so
   no engine has to shrink-to-fit them (WebKit can collapse such rows to their
   longest word). Text is centred by the card, so this is visually identical. */
.process-card > p, .process-card > div[aria-live] { width: 100%; }

/* Mini 9:16 skeleton tiles — one per clip, filling in as each renders */
.clip-ticks { display: flex; gap: 7px; justify-content: center; }
.clip-tick {
  width: 22px; height: 38px; border-radius: 5px;
  background: var(--surface2); border: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.clip-tick.done { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 8px rgba(255,176,32,.25); }
.clip-tick.rendering { border-color: var(--accent2); }
.clip-tick.rendering::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,203,92,.35) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: rc-shimmer 1.1s linear infinite;
}

/* Failure state — stay on the screen, explain, offer a way forward */
.process-error {
  width: 100%; text-align: left;
  background: rgba(251,93,93,.08); border: 1px solid rgba(251,93,93,.35);
  border-radius: var(--r-md); padding: 14px 16px;
  display: flex; flex-direction: column; gap: var(--sp-3);
  animation: rc-rise var(--dur) var(--ease-out) both;
}
#process-error-msg { color: var(--text); font-size: var(--fs-sm); line-height: 1.5; }
.process-error-actions { display: flex; gap: 10px; }
/* The molten "do this one" look is a CLASS, not an id rule, because which
   button deserves it changes: on a failed LINK fetch the primary action is
   "Upload the file instead", not "Try again". As `#process-retry-btn` it beat
   .ghost-btn on specificity, so demoting retry in JS changed the class list and
   nothing on screen (caught in the browser, 2026-09-23). */
.process-error-actions > button.primary {
  background: var(--grad-molten); color: var(--on-accent); border: none;
  border-radius: var(--r-sm); padding: 10px 18px; font-weight: 700; font-size: var(--fs-sm);
  cursor: pointer; box-shadow: 0 4px 16px rgba(255,176,32,.25);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur) var(--ease-out);
}
.process-error-actions > button.primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.process-card.failed .spinner,
.process-card.failed #process-bar,
.process-card.failed #process-elapsed,
.process-card.failed #process-detail,
.process-card.failed #cancel-btn { display: none; }
.pipe-step.pipe-failed { color: var(--danger); }
.pipe-step.pipe-failed .pipe-dot { background: var(--danger); border-color: var(--danger); animation: none; }

/* Make room for the rail. KEEP THIS RULE LAST-ISH: it must appear after
   every screen's own padding shorthand (e.g. #reel-review-screen) to win. */
#import-screen, #home-screen, #posts-screen, #processing-screen,
#layout-screen, #reel-review-screen, #app-screen, #styles-screen {
  padding-left: var(--rail-w);
}

/* Mobile: rail becomes a bottom tab bar; screens pad the bottom instead */
@media (max-width: 768px) {
  :root { --rail-w: 0px; }
  #app-rail {
    top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 58px;
    flex-direction: row; justify-content: space-around; align-items: center;
    border-right: none; border-top: 1px solid var(--border);
    padding: 0 6px calc(env(safe-area-inset-bottom, 0px));
    background: rgba(24,24,31,.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .rail-spacer { display: none; }
  .rail-btn { flex: 1; margin: 4px 2px; padding: 7px 2px; }
  .rail-btn.active::before {
    left: 12px; right: 12px; top: auto; bottom: -4px; width: auto; height: 3px;
    border-radius: 3px 3px 0 0;
  }
  #import-screen, #home-screen, #posts-screen, #processing-screen,
  #layout-screen, #reel-review-screen, #app-screen {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }
  .toast-host { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .home-wrap { padding: var(--sp-6) var(--sp-4) var(--sp-10); }
  .home-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }

  /* --- Phone-size pass (2026-08-01) — the shell existed on mobile but
     everything was desktop-sized. Order matters: these rules follow the rail
     rules above so their padding overrides win. --- */
  /* Topbar: logo + plan + avatar only (search lives in the bottom tab bar) */
  #topbar { padding: 0 14px; }
  .account-menu { right: 14px; }          /* stay flush with the avatar */
  #topbar-status, .topbar-kbd { display: none; }

  /* iOS zooms the whole page into any focused input under 16px — pin fields
     to 16px on touch so focusing never "blows up" the layout. */
  #import-screen input[type="text"], .reel-input, #home-url-input,
  .product-info-fields input, .product-info-fields textarea,
  #import-screen .vo-fields input[type="text"], #import-screen .vo-fields textarea,
  #palette-input, #post-cap-text { font-size: 16px; }

  /* Fixed centered-card screens: flex centering clips the top when the card
     is taller than a phone. margin:auto centers when it fits and top-aligns
     scrollably when it doesn't. */
  #import-screen, #processing-screen, #layout-screen {
    overflow-y: auto; align-items: flex-start;
    padding-left: 12px; padding-right: 12px;
  }
  .process-card, .layout-card { margin: auto; }

  .upload-area { padding: 22px 16px; }
  .process-card { padding: 30px 20px; --card-gap: 18px; }
  .layout-card { padding: 22px 18px; }

  /* Studio home */
  .home-wrap { gap: 18px; }
  .home-head h1 { font-size: 25px; }
  .home-quickdrop { padding: 14px; }
  /* Tool dock: one group per row; tiles scroll sideways with snap; no hover tooltips on touch */
  .home-dock { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-3); }
  .home-dock-row {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 8px 2px 4px; margin: -8px -2px 0; scrollbar-width: none;   /* room for the -7px badge */
  }
  .home-dock-row::-webkit-scrollbar { display: none; }
  .home-tool { flex: 0 0 auto; scroll-snap-align: start; min-height: 48px; }
  .home-tool-name { white-space: nowrap; }
  .home-tool:hover, .home-tool:focus-visible { transform: none; }
  .home-tool-tip { display: none; }

  /* Posts & analytics */
  .posts-wrap { padding: 24px 14px 48px; }

  /* Results: one natural scroll — gallery grid first, the selected clip's
     detail below it (selectClip auto-scrolls there on tap). Beats the
     two-pane split, which clipped cards and hid the action buttons. */
  #app-screen.visible { display: block; overflow-y: auto; }
  #sidebar-clips { height: auto; flex: none; overflow: visible; border-bottom: none; }
  #main-viewer { flex: none; overflow: visible; border-top: 1px solid var(--border); padding: 18px 16px 28px; }
  /* Nothing on the results screen may force horizontal overflow on a phone. */
  #app-screen #main-viewer, #app-screen #main-viewer > * { max-width: 100%; min-width: 0; }
  /* Player: don't let it eat half the phone (52vh felt oversized). A calmer
     height leaves room for the clip meta + actions below without a big scroll.
     `.visible` outweighs the ≤900 `#app-screen #video-container { height:52vh }`. */
  #video-container { max-width: min(300px, 70vw); }
  #app-screen.visible #video-container { height: 44vh; }
  /* A landscape or square output (the Voiceover tool keeps the source's shape)
     must not be boxed into the portrait player: full width, natural height. */
  #video-container.is-wide { max-width: 100%; }
  #app-screen.visible #video-container.is-wide { height: auto; }
  #app-screen #video-container.is-wide #clip-player { width: 100%; height: auto; }
  /* Transport: the control row never fit on a phone (it overflowed ~70px). Wrap it
     and float the scrubber onto its own full-width top row, buttons wrap beneath.
     Bump the buttons to comfortable touch sizes. */
  .rv-transport { gap: 8px 10px; padding: 10px 12px; }
  /* (the scrubber's own row is the base rule now, at every width) */
  .rv-transport .rv-time { min-width: 0; }
  .rv-transport .rv-play { width: 40px; height: 40px; }
  /* Every transport button gets a finger-sized hit area on touch. */
  .rv-transport > button:not(.rv-play), .rv-transport .rv-speeds {
    min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
  }
  .rv-transport .rv-loop, .rv-transport .rv-mute, .rv-transport .rv-fs { padding: var(--sp-2); }
  /* Actions STACK vertically (Edit full-width, then the 2x2 Download/Post/Share/
     Copy grid, then Transcript). A wrapping row stretched single buttons to match
     the tall grid beside them — that's why the Edit button ballooned. */
  #clip-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  #clip-actions > * { min-width: 0; box-sizing: border-box; }
  #edit-clip-btn, #edit-reel-btn { padding: 11px; font-size: 14px; }
  /* Triage keep/skip filters — finger-sized. */
  #tri-all, #tri-kept { min-height: 36px; }
  /* Remaining sub-40px taps found in the live pass: ghost buttons (Cancel,
     Regenerate, Back to Studio), the video-type tabs, the ⋯ menu, speed chips. */
  .ghost-btn, .mode-tab { min-height: 40px; }
  .rv-more { min-width: 40px; min-height: 40px; }
  .rv-rate { min-height: 30px; }
  #regenerate-btn { min-height: 36px; }
  #sidebar-clips #speaker-tabs { padding: 0 14px; }
  #sidebar-clips .history-block { margin: 4px 14px 14px; }
  #sidebar-clips #new-clip-btn { margin: 4px 14px 12px; }
  #clips-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 12px 14px; }
  .triage-bar { padding: 8px 14px 0; }
  .tri-hint { display: none; }             /* keyboard hints mean nothing on touch */

  /* Reel review + palette breathing room */
  #reel-review-screen { padding: 60px 12px 80px; }
  .palette-overlay { padding-top: 8vh; }
}

@media (max-width: 560px) {
  .home-grid, #clips-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-empty-steps { flex-direction: column; align-items: flex-start; gap: 10px; }
  .reel-cta-row { flex-direction: column; }
  .adv-hint { flex-basis: 100%; }
}

/* ============================================================================
   Generated-Clip Dashboard — results screen redesign (ideas/genrated clip).
   Center hero player + custom transport, right "Refine & Finalize" rail,
   bottom horizontal filmstrip. Scoped to #app-screen; preserves the JS↔DOM
   contract (all wired ids kept, .score-badge stays inside #main-viewer).
   ============================================================================ */
#app-screen.visible {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  grid-template-areas:
    "stage  refine"
    "strip  refine";
  grid-template-rows: minmax(0, 1fr) 184px;
  gap: 0;
  overflow: hidden;
}
#app-screen > #main-viewer  { grid-area: stage; }
#app-screen > #refine-panel { grid-area: refine; }
#app-screen > #sidebar-clips { grid-area: strip; }

/* --- Center stage ------------------------------------------------------- */
#app-screen #main-viewer {
  flex: unset; width: auto; max-width: none;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  overflow: hidden; min-height: 0;
}
.rv-stage-head {
  width: 100%; max-width: 520px;   /* match .rv-transport / #clip-meta below it */
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.rv-stage-head h3 {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: -0.01em; color: var(--text);
}
#app-screen #video-container {
  width: 100%; max-width: none; margin: 0;
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
#app-screen #clip-player {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  border-radius: var(--r-lg);
  background: #000; display: block;
  box-shadow: var(--sh-lg);
}
#app-screen #player-note {
  max-width: 460px; margin: 0 auto; padding: var(--sp-10) var(--sp-5); text-align: center;
  color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-body);
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-lg);
}

/* Custom transport — TWO rows inside the pill: the seek bar across the top,
   the controls underneath.
   It used to be one row, and every other child of it is a fixed width (play 34,
   three speed pills, loop, mute, a 64px volume slider, fullscreen and the time
   pair). Those alone fill the 520px the bar is capped at, so the only flexible
   child, the seek bar, was squeezed to nothing: it rendered as a small amber
   circle and the clip could not be scrubbed at all. Giving it a whole row of its
   own is what every real player does, and it cannot be crushed by what it sits
   above. The phone layout already did this under 600px; it is not a phone
   problem. */
.rv-transport {
  width: 100%; max-width: 460px;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  row-gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 8px 12px;
}
.rv-play {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: none; cursor: pointer; background: var(--grad-molten); color: var(--on-accent);
  display: grid; place-items: center; transition: transform var(--dur-fast) var(--ease-out);
}
.rv-play:hover { transform: scale(1.06); }
.rv-play::before {
  content: ''; width: 0; height: 0;
  border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  margin-left: 3px;
}
.rv-play.is-playing::before {
  border: none; width: 10px; height: 11px; margin: 0;
  background: currentColor;
  -webkit-mask: linear-gradient(#000 0 0) left/3px 100% no-repeat, linear-gradient(#000 0 0) right/3px 100% no-repeat;
          mask: linear-gradient(#000 0 0) left/3px 100% no-repeat, linear-gradient(#000 0 0) right/3px 100% no-repeat;
}
/* Full width, and FIRST, whatever order the markup puts it in. `accent-color`
   keeps the native filled track and thumb, so this stays a real input[type=range]:
   draggable, arrow and Home/End keys, announced as a slider. The height is the
   hit area, not the paint. */
.rv-scrub {
  flex: 1 1 100%; order: -1; min-width: 0; width: 100%; height: 22px; margin: 0;
  accent-color: var(--accent); cursor: pointer;
}
.rv-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
.rv-time { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 30px; }
.rv-tchip {
  flex: 0 0 auto; background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-2); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs);
  font-weight: 700; cursor: pointer; display: grid; place-items: center;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.rv-tchip:hover { color: var(--text); border-color: var(--accent); }
.rv-tchip[aria-pressed="true"] { color: var(--accent2); border-color: var(--accent); background: var(--accent-soft); }

#app-screen #clip-meta {
  width: 100%; max-width: 460px; margin: 0; text-align: left;
}
.clip-meta-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.clip-meta-sub .clip-speaker { margin-top: 0; }

/* --- Right rail: Refine & Finalize -------------------------------------- */
.rv-refine {
  background: var(--surface); border-left: 1px solid var(--border);
  overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5);
}
.rv-refine-head h3 { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: -0.01em; }
.rv-refine-hint { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

#app-screen #clip-actions {
  flex-direction: column; align-items: stretch; gap: var(--sp-3);
  max-width: none; margin: 0; width: 100%;
}
#edit-clip-btn, #edit-reel-btn {
  width: 100%; padding: var(--sp-3); border: none; border-radius: var(--r-md);
  background: var(--grad-molten); color: var(--on-accent);
  font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
  box-shadow: 0 2px 16px rgba(255,176,32,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
#edit-clip-btn:hover, #edit-reel-btn:hover { transform: translateY(-1px); box-shadow: var(--glow-accent); }
.rv-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.rv-action-grid > a, .rv-action-grid > button {
  padding: 10px; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm);
  text-align: center; text-decoration: none; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.rv-action-grid > a:hover, .rv-action-grid > button:hover { border-color: var(--accent); background: var(--surface3); }
/* 5th child when it un-hides for editable reels — full row, no orphan cell */
.rv-action-grid > #download-project-btn { grid-column: 1 / -1; }
#app-screen a#download-btn {
  flex: unset; background: var(--accent-soft); border-color: rgba(255,176,32,.35); color: var(--accent2);
}
#app-screen a#download-btn:hover { background: var(--accent-softer); }
#app-screen #copy-caption-btn { flex: unset; }
#app-screen #transcript-btn { align-self: flex-start; }

/* Refine cards (Playback, Metadata) + posting preview */
.rv-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.rv-card-h {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.rv-slider-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); }
.rv-slider-row input[type="range"] { flex: 1; max-width: 190px; accent-color: var(--accent); cursor: pointer; }
.rv-rate {
  background: var(--surface3); border: 1px solid var(--border); color: var(--text-2);
  border-radius: var(--r-xs); padding: 4px 9px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
.rv-rate.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent2); }
.rv-meta-rows { display: flex; flex-direction: column; gap: 7px; }
.rv-meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.rv-meta-row .rv-mk { color: var(--muted); }
.rv-meta-row .rv-mv { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
#app-screen #clip-caption-preview { margin: 0; }

/* --- Bottom filmstrip --------------------------------------------------- */
#app-screen #sidebar-clips {
  flex: unset; width: auto;
  border-right: none; border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column; overflow: hidden;
  padding: var(--sp-3) var(--sp-4);
  gap: var(--sp-2);
}
.rv-strip #triage-bar { margin: 0; }
.rv-strip #speaker-tabs { margin: 0; padding: 0; }
#app-screen #clips-list {
  display: flex; flex-direction: row; align-items: stretch; align-content: unset;
  grid-template-columns: none;
  gap: var(--sp-3); padding: 2px; margin: 0;
  overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-height: 0;
}
#app-screen #clips-list .clip-card {
  flex: 0 0 96px; width: 96px; height: 100%; scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.rv-strip .clip-thumb-wrap { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.rv-strip .clip-card-body { flex: 0 0 auto; padding: 6px 8px 7px; }
#app-screen #clips-list .clip-title { -webkit-line-clamp: 1; font-size: 11px; }
.rv-strip .clip-why { display: none; }         /* keep the strip compact; reason shows under the player */
.rv-strip #new-clip-btn { display: none; }     /* the left rail's "New clip" already covers this */
.rv-strip .history-block { display: none; }     /* jobs live in Studio now; keep the strip focused */
.rv-strip #triage-bar { flex: 0 0 auto; }
.rv-strip .clip-score { font-size: var(--fs-sm); padding: 1px 7px; top: 6px; left: 6px; }
.rv-strip .clip-dur { font-size: 10px; padding: 1px 5px; }
.rv-strip .clip-triage { padding: 4px 6px; }
/* 96px cards: "✓ Keep" + "✕" must fit 84px inner width without clipping. */
.rv-strip .clip-triage button { padding: 4px 6px; font-size: 10px; min-height: 24px; }

/* Empty + loading states so the strip is never a bare 184px band */
.clips-empty {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1); padding: 14px; text-align: center; color: var(--muted); font-size: var(--fs-sm);
  border: 1px dashed var(--border); border-radius: var(--r-lg);
}
.clips-empty b { color: var(--text-2); font-weight: 600; }
#clips-list .clip-card.is-loading .clip-thumb-wrap {
  background: linear-gradient(100deg, var(--surface2) 30%, var(--surface3) 50%, var(--surface2) 70%);
  background-size: 200% 100%;
  animation: rc-shimmer 1.2s linear infinite;
}
#clips-list .clip-card.is-loading .clip-thumb { visibility: hidden; }

/* --- Responsive --------------------------------------------------------- */
/* Tablet (769–1024): still two columns, just a slimmer refine rail and a
   capped player so the stage never squeezes to a sliver. */
@media (min-width: 769px) and (max-width: 1024px) {
  #app-screen.visible { grid-template-columns: minmax(0, 1fr) 300px; }
  #app-screen #main-viewer { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  #app-screen #video-container { max-height: min(52vh, 480px); }
  .rv-refine { padding: var(--sp-4); }
}
/* Phone: everything stacks. */
@media (max-width: 768px) {
  #app-screen.visible {
    display: flex; flex-direction: column;
    overflow-y: auto;
  }
  #app-screen > #main-viewer  { order: 1; }
  #app-screen > #sidebar-clips { order: 2; }
  #app-screen > #refine-panel { order: 3; }
  #app-screen > #main-viewer,
  #app-screen > #sidebar-clips,
  #app-screen > #refine-panel { flex: 0 0 auto; }
  .rv-refine { border-left: none; border-top: 1px solid var(--border); overflow: visible; }
  #app-screen #sidebar-clips { border-top: 1px solid var(--border); overflow: visible; height: 210px; }
  #app-screen #main-viewer { height: auto; overflow: visible; min-height: 0; }
  #app-screen #video-container { flex: 0 0 auto; height: 52vh; }
  #app-screen #clip-player { height: 100%; }
}

/* ============================================================================
   Create-Clip Dashboard — import screen redesign (ideas/new clip UI).
   Studio shell: left live source-preview stage + right config rail
   (Video type · Add source · animated caption grid · options · Generate).
   Reuses every wired input; only re-lays them out. Scoped to #import-screen.
   ============================================================================ */
#import-screen.visible {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: stretch;
  /* Full-bleed shell: the config rail is a true right column (no 16px gutter
     with the hero video peeking through on its right/bottom edges). */
  padding: 52px 0 0 var(--rail-w);
  overflow: hidden;
}
/* The hero video stays full-bleed behind, but dimmed so the studio reads. */
#import-screen .hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 30% 20%, rgba(14,14,18,.55), rgba(14,14,18,.9));
}

/* --- Left stage --------------------------------------------------------- */
.ic-stage {
  position: relative; z-index: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  justify-content: center;
}
.ic-stage-top { display: flex; align-items: center; justify-content: space-between; }
.ic-step {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  color: var(--accent2); letter-spacing: 0.01em;
  background: var(--accent-soft); border: 1px solid rgba(255,176,32,.3);
  padding: 5px 12px; border-radius: var(--r-pill);
}
.ic-stage-badge {
  font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700;
}
.ic-preview {
  position: relative; flex: 0 1 auto;
  aspect-ratio: 16 / 9; width: 100%; max-height: 60vh;
  background: rgba(0,0,0,.5); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
  display: grid; place-items: center;
  box-shadow: var(--sh-xl);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ic-preview video, .ic-preview iframe {
  width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000;
}
.ic-preview-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  color: var(--muted); text-align: center; padding: var(--sp-5);
}
.ic-preview-empty svg { color: var(--faint); }
.ic-preview-empty p { font-family: var(--font-display); font-size: var(--fs-md); color: var(--text-2); }
.ic-preview-empty span { font-size: var(--fs-sm); color: var(--muted); max-width: 280px; }
.ic-source-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 14px; font-size: var(--fs-sm); color: var(--text-2);
}
.ic-source-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); flex: 0 0 auto; }
#ic-source-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Right config rail -------------------------------------------------- */
.ic-config {
  position: relative; z-index: 1;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border-left: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi);
  overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
}
.ic-config-head h1 { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.02em; line-height: 1.05; margin-top: 4px; }
.ic-config-head .tagline { color: var(--text-2); font-size: var(--fs-sm); margin-top: 6px; line-height: var(--lh-body); }
.ic-config-head .hero-eyebrow { font-size: var(--fs-xs); }

.ic-field { display: flex; flex-direction: column; gap: var(--sp-3); }
.ic-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.ic-label-hint, .ic-status { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--faint); font-size: var(--fs-xs); }
.ic-status { margin-left: auto; }
.ic-status.ok { color: var(--success); }

/* Video type — reuse .mode-tabs as a full-width segmented control. Two by two:
   four tabs in one row of the 420px rail left "Reaction Reel" ellipsised. */
.ic-config .mode-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0; }

/* Add source — inline submit buttons are replaced by the single Generate CTA */
.ic-config #yt-btn, .ic-config .product-clip-btn { display: none; }
.ic-config .input-group { display: block; }
.ic-config .input-group #yt-input { width: 100%; }

.ic-search {
  width: 100%; background: var(--field-bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 12px; color: var(--text); font: inherit; font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease-out);
}
.ic-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.cap-chip.is-hidden { display: none; }

/* Options row stacks a touch tighter in the rail */
.ic-config .options-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
/* The global 3-col `.options-row:has(#caption-select.has-picker)` carries id-level
   specificity and won here — three ~118px selects clipped their long labels.
   Two columns in the rail; the clip-count select takes the whole second row. */
.ic-config .options-row:has(#caption-select.has-picker) { grid-template-columns: 1fr 1fr; }
.ic-config .options-row:has(#caption-select.has-picker) #layout-select { grid-column: 1 / -1; }

.ic-generate {
  margin-top: auto;
  width: 100%; padding: 15px; border: none; border-radius: var(--r-md);
  background: var(--grad-molten); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); cursor: pointer;
  box-shadow: 0 4px 24px rgba(255,176,32,.32);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ic-generate:hover { transform: translateY(-1px); box-shadow: var(--glow-accent); }
.ic-generate:active { transform: translateY(0); }
.ic-generate:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }
/* Retention, said before the run. .ic-generate keeps its margin-top:auto, so
   the button and this line travel to the bottom of the config rail together. */
.ic-retention {
  margin: 10px 0 0; text-align: center;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--muted);
}

/* --- Responsive --------------------------------------------------------- */
/* Tablet (901–1024): keep the two columns, slimmer config rail. */
@media (min-width: 901px) and (max-width: 1024px) {
  #import-screen.visible { grid-template-columns: minmax(0, 1fr) 340px; }
  /* ~146px selects would clip "9:16 (Reels/TikTok)" — stack them in the slim rail */
  .ic-config .options-row:has(#caption-select.has-picker) { grid-template-columns: 1fr; }
  .ic-config .mode-tab { padding: var(--sp-2) var(--sp-1); font-size: var(--fs-xs); }   /* "Reaction Reel" ellipsised at 12px pad */
}
@media (max-width: 900px) {
  #import-screen.visible {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }
  .ic-stage { padding: var(--sp-5) var(--sp-4) var(--sp-3); }
  .ic-preview { max-height: 40vh; }
  .ic-config { border-left: none; border-top: 1px solid var(--glass-border); }
}

/* ----- Generated-clip dashboard: mockup-fidelity pass ------------------- */
/* Bigger hero player + soft stage glow so vertical clips feel intentional. */
#app-screen #main-viewer { padding-top: var(--sp-4); }
#app-screen #video-container { position: relative; }
#app-screen #video-container::before {
  content: ''; position: absolute; inset: 4% 8%; z-index: 0;
  background: radial-gradient(60% 55% at 50% 45%, rgba(255,176,32,.12), transparent 70%);
  filter: blur(30px); pointer-events: none;
}
#app-screen #clip-player { position: relative; z-index: 1; }
.rv-transport, #app-screen #clip-meta { max-width: 520px; flex: 0 0 auto; }

/* Inline speed pills inside the transport bar */
.rv-speeds {
  flex: 0 0 auto; display: inline-flex; gap: 2px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 2px;
}
.rv-speeds .rv-rate {
  background: transparent; border: none; color: var(--muted);
  border-radius: var(--r-pill); padding: 3px 9px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.rv-speeds .rv-rate:hover { color: var(--text); }
.rv-speeds .rv-rate.is-on { background: var(--accent); color: var(--on-accent); }
.rv-time-pair { min-width: 78px; text-align: right; }
.rv-tchip.is-on { color: var(--accent2); border-color: var(--accent); background: var(--accent-soft); }

/* Title row: ⋯ menu + creator line */
.clip-score-row { position: relative; }
.rv-more {
  margin-left: auto; background: transparent; border: none; color: var(--muted);
  font-size: var(--fs-lg); line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: var(--r-sm);
}
.rv-more:hover { color: var(--text); background: var(--surface2); }
.clip-creator { color: var(--text-2); font-weight: 600; }

/* Card header with a trailing icon (Audio mixer / Metadata) */
.rv-card-h-ic { display: flex; align-items: center; justify-content: space-between; }
.rv-card-h-ic svg { color: var(--faint); }

/* Prepare-for-posting card */
#app-screen #clip-caption-preview.rv-card { gap: var(--sp-2); }
.rv-pfp-head { display: flex; align-items: center; justify-content: space-between; }
.rv-platforms { display: inline-flex; align-items: center; gap: var(--sp-2); }
.rv-plat {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface3); border: 1px solid var(--border); color: var(--text-2);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.rv-plat:hover { color: var(--accent2); border-color: var(--accent); background: var(--accent-soft); }
.rv-cap-sub { font-size: var(--fs-xs); color: var(--muted); margin: -2px 0 2px; /* TODO(layout): negative margin compensates for parent gap */ }
#app-screen #caption-preview-text { font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-snug); }

/* Slightly wider mixer sliders so the two rows read like the mockup */
.rv-slider-row input[type="range"] { max-width: 210px; }

/* ----- Create dashboard: mode-field layout fixes + source timeline ------ */
/* Reel/product inputs were unstyled → they overlapped in the narrow rail. */
.ic-config .reel-info-fields,
.ic-config .product-info-fields { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: 10px; }
.ic-config .reel-info-fields select,
.ic-config .reel-info-fields input,
.ic-config .product-info-fields input,
.ic-config .product-info-fields textarea,
.ic-config .moment-hint {
  width: 100%; background: var(--field-bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px; color: var(--text);
  font: inherit; font-size: var(--fs-sm); transition: border-color var(--dur) var(--ease-out);
}
.ic-config .reel-info-fields select:focus,
.ic-config .reel-info-fields input:focus,
.ic-config .product-info-fields input:focus,
.ic-config .product-info-fields textarea:focus,
.ic-config .moment-hint:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
/* "Add background music" opt-in checkbox (#9) — reset the full-width input rule. */
.ic-config .reel-info-fields .reel-check {
  display: flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  color: var(--text); font-size: var(--fs-sm); padding: 2px 0;
}
.ic-config .reel-info-fields .reel-check input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; padding: 0; flex: 0 0 auto;
  accent-color: var(--accent); cursor: pointer;
}
/* AI Voiceover panel (#16). */
.ic-config .reel-info-fields .reel-vo-panel {
  display: flex; flex-direction: column; gap: var(--sp-2); margin-top: 2px;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface2);
}
.ic-config .reel-info-fields .reel-vo-ai-panel { display: flex; gap: var(--sp-2); align-items: stretch; }
.ic-config .reel-info-fields .reel-vo-ai-panel input { flex: 1 1 auto; width: auto; }
.ic-config .reel-info-fields .reel-vo-gen {
  flex: 0 0 auto; padding: 0 var(--sp-4); border: none; border-radius: var(--r-sm);
  background: var(--accent); color: #1a1205; font: inherit; font-weight: 600;
  font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
  transition: filter var(--dur) var(--ease-out);
}
.ic-config .reel-info-fields .reel-vo-gen:hover { filter: brightness(1.08); }
.ic-config .reel-info-fields .reel-vo-gen:disabled { opacity: .6; cursor: default; }
.ic-config .reel-info-fields .reel-vo-script {
  width: 100%; min-height: 84px; resize: vertical; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px;
  color: var(--text); font: inherit; font-size: var(--fs-sm); line-height: 1.5;
}
.ic-config .reel-info-fields .reel-vo-script:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent);
}
.ic-config .reel-info-fields .reel-vo-note { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.ic-config .reel-info-fields .reel-vo-voicelab {
  display: block; margin: 4px 0 2px; font-size: var(--fs-xs); color: var(--muted);
}
.ic-config .reel-info-fields .reel-vo-sub { color: var(--muted); font-weight: 400; }

/* --- ElevenLabs-style voice picker (shared: setup screen + editor panel) --- */
.vo-voicelist {
  display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px;
  max-height: 232px; overflow-y: auto; padding-right: 2px;
}
.vo-voice-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.vo-voice-row:hover { border-color: var(--border-strong); }
.vo-voice-row.selected {
  border-color: var(--accent); background: var(--accent-softer);
}
.vo-play {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--accent); display: grid; place-items: center; cursor: pointer;
  padding: 0; transition: background .15s, transform .1s;
}
.vo-play:hover { background: var(--accent); color: #12100a; }
.vo-play:active { transform: scale(.92); }
.vo-play::before { content: '▶'; font-size: 11px; line-height: 1; margin-left: 1px; }
.vo-play.playing::before { content: '⏸'; margin-left: 0; }
.vo-play.vo-loading::before { content: '…'; margin-left: 0; }
.vo-play .vo-play-ic { display: none; }
.vo-voice-meta { flex: 1 1 auto; display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.vo-voice-name { font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
.vo-voice-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 0 6px; line-height: 15px;
}
.vo-voice-check { flex: 0 0 auto; width: 16px; text-align: center; color: var(--accent); opacity: 0; }
.vo-voice-check::before { content: '✓'; font-weight: 700; }
.vo-voice-row.selected .vo-voice-check { opacity: 1; }
.vo-voice-empty { font-size: var(--fs-sm); color: var(--muted); padding: 6px 2px; }

/* --- Voiceover tool (content_type voiceover): whole video + AI narration --- */
.mode-voiceover { display: flex; flex-direction: column; gap: var(--sp-4); }
.ic-config .vo-fields { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: 10px; }
.ic-config .vo-fields input[type="text"],
.ic-config .vo-fields .vo-script {
  width: 100%; background: var(--field-bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px; color: var(--text);
  font: inherit; font-size: var(--fs-sm); transition: border-color var(--dur) var(--ease-out);
}
.ic-config .vo-fields .vo-script { min-height: 96px; resize: vertical; line-height: 1.5; background: var(--surface); }
.ic-config .vo-fields input[type="text"]:focus,
.ic-config .vo-fields .vo-script:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
/* Checkbox rows wrap so the explainer line sits under the label, indented past the box. */
.ic-config .vo-fields .vo-check {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2);
  cursor: pointer; color: var(--text); font-size: var(--fs-sm); padding: 2px 0;
}
.ic-config .vo-fields .vo-check input[type="checkbox"] {
  width: 16px; height: 16px; margin: 2px 0 0; padding: 0; flex: 0 0 auto;
  accent-color: var(--accent); cursor: pointer;
}
.ic-config .vo-fields .vo-check input[type="checkbox"]:disabled { cursor: default; opacity: .5; }
.ic-config .vo-fields .vo-check-sub { flex-basis: 100%; padding-left: 24px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.ic-config .vo-fields .vo-ai-panel { display: flex; gap: var(--sp-2); align-items: stretch; }
.ic-config .vo-fields .vo-ai-panel input { flex: 1 1 auto; width: auto; min-width: 0; }
.ic-config .vo-fields .vo-gen {
  flex: 0 0 auto; padding: 0 var(--sp-4); border: none; border-radius: var(--r-sm);
  background: var(--accent); color: #1a1205; font: inherit; font-weight: 600;
  font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; transition: filter var(--dur) var(--ease-out);
}
.ic-config .vo-fields .vo-gen:hover { filter: brightness(1.08); }
.ic-config .vo-fields .vo-gen:disabled { opacity: .6; cursor: default; }
.ic-config .vo-fields .vo-note { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.ic-config .vo-fields .vo-estimate { margin: 0; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.4; }
.ic-config .vo-fields .vo-estimate.warn,
.ic-config .vo-fields .vo-note.warn { color: var(--accent2); }
.ic-config .vo-fields .vo-voicelab { display: block; margin: 4px 0 2px; font-size: var(--fs-xs); color: var(--muted); }
.ic-config .vo-fields .vo-sub { color: var(--muted); font-weight: 400; }
/* Only the ratio and caption selects are left in Options for this kind: one full
   width column. Same specificity as the :has() rule above; this one is later, so it wins. */
#import-screen.is-voiceover .ic-config .options-row { grid-template-columns: 1fr; }

.ic-config .files-list { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-2) 0 0; list-style: none; }
.ic-config .caption-mode-panel { margin-top: 10px; }

/* Bottom source timeline — real extracted frames from the uploaded file. */
.ic-stage { padding-bottom: var(--sp-4); }
.ic-timeline {
  margin-top: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 10px 12px; display: flex; flex-direction: column; gap: var(--sp-2);
}
.ic-tl-track { display: flex; align-items: center; gap: 10px; }
.ic-tl-label {
  flex: 0 0 74px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.ic-tl-frames {
  flex: 1; min-width: 0; display: flex; gap: 2px; height: 46px;
  border-radius: var(--r-sm); overflow: hidden; background: var(--surface2);
}
.ic-tl-frames img { height: 100%; flex: 1 1 0; min-width: 0; object-fit: cover; }
.ic-tl-frames.is-empty { align-items: center; justify-content: center; color: var(--faint); font-size: var(--fs-xs); }
.ic-tl-wave {
  flex: 1; min-width: 0; height: 30px; border-radius: var(--r-sm);
  background:
    repeating-linear-gradient(90deg, var(--track-audio) 0 2px, transparent 2px 5px);
  -webkit-mask: var(--wave-mask, none); mask: var(--wave-mask, none);
  opacity: .5;
}
.ic-tl-story { display: flex; gap: 6px; }
.ic-tl-chip {
  font-size: var(--fs-xs); color: var(--text-2); background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 10px;
}

/* ==========================================================================
   Style DNA — brand style library + editor drawer
   ========================================================================== */
#styles-screen {
  position: fixed; inset: 0; display: none; overflow-y: auto;
  padding-top: 52px; background: var(--bg);   /* left offset comes from the shared rail rule */
}
#styles-screen.visible { display: block; }
.sd-wrap { max-width: 1120px; margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-12); }
.sd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-8); flex-wrap: wrap; }
.sd-head-copy { min-width: 0; }
.sd-title { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.02em; line-height: 1.1; }
.sd-title .grad {
  background: var(--grad-molten); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sd-sub { color: var(--text-2); font-size: var(--fs-sm); margin-top: 8px; max-width: 640px; line-height: var(--lh-body); }
.sd-sub strong { color: var(--text); }

/* Why a style change does not repaint finished work. Stated on the library and
   again in the editor, because "my old clips did not change" is the first
   thing anyone asks. */
.sd-note {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 720px; margin: 0 0 var(--sp-6);
  padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-2); font-size: var(--fs-xs); line-height: var(--lh-body);
}
.sd-note strong { color: var(--text); font-weight: 700; }
.sd-note-ic {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 800; font-style: italic; line-height: 1;
}
.sd-note-inline { margin: 0 0 var(--sp-4); max-width: none; }

.sd-cta {
  background: var(--grad-molten); color: var(--on-accent); border: none; border-radius: var(--r-sm);
  padding: 13px 20px; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(255,176,32,.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.sd-cta:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--glow-accent), 0 8px 24px rgba(255,176,32,.34); }
.sd-cta:active { transform: scale(.98); }
.sd-cta-sm { padding: 9px 16px; }

/* Library grid */
.sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5); align-items: start; }
.sd-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  animation: rc-rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.sd-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--sh-lg); }
.sd-card.is-default { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft), var(--sh-md); }
.sd-card-prev { position: relative; }
.sd-card-prev .ed-sw { display: block; }
.sd-card-prev .ed-sw-prev { height: 108px; font-size: 30px; border-radius: 0; }
.sd-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .04em;
  color: var(--on-accent); background: var(--grad-molten); padding: 3px 10px; border-radius: var(--r-pill);
  box-shadow: 0 4px 14px rgba(255,176,32,.42);
}
.sd-card-body { padding: 14px 14px 12px; }
.sd-card-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.sd-tag {
  font-size: var(--fs-xs); color: var(--text-2); background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap;
}
.sd-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-card-actions .ghost-btn { padding: 6px 10px; font-size: var(--fs-xs); }
.sd-del { margin-left: auto; }
.sd-del:hover { border-color: var(--danger); color: var(--danger); }

/* Empty state */
.sd-empty { text-align: center; padding: var(--sp-16) var(--sp-6); max-width: 520px; margin: 0 auto; }
.sd-empty-art { font-size: 44px; color: var(--accent); filter: drop-shadow(var(--glow-accent)); margin-bottom: 10px; }
.sd-empty h2 { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: 8px; }
.sd-empty p { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-body); margin-bottom: var(--sp-6); }

/* ---- Editor drawer ---- */
.sd-drawer-overlay {
  position: fixed; inset: 0; z-index: 340; display: flex; justify-content: flex-end;
  background: rgba(8,8,10,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.sd-drawer-overlay.open { opacity: 1; }
.sd-drawer {
  width: min(560px, 100%); height: 100%; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border-strong);
  box-shadow: var(--sh-xl); transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.sd-drawer-overlay.open .sd-drawer { transform: translateX(0); }
.sd-drawer-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface2);
}
.sd-drawer-head-l { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }
.sd-name-input {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; padding: 9px 12px;
}
.sd-name-input:focus { border-color: var(--accent); }
.sd-seed-chip {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  background: var(--surface3); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 5px 9px; cursor: pointer; white-space: nowrap;
}
.sd-seed-chip:hover { color: var(--text-2); border-color: var(--border-strong); }
.sd-drawer-head-actions { display: flex; align-items: center; gap: var(--sp-2); }
.sd-x {
  background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer;
  width: 34px; height: 34px; border-radius: var(--r-sm); line-height: 1;
}
.sd-x:hover { background: var(--surface3); color: var(--text); }
.sd-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* Live preview (sticky top of drawer) */
.sd-live { position: sticky; top: 0; z-index: 3; padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.sd-live-prev .ed-sw { display: block; }
.sd-live-prev .ed-sw-prev { height: 118px; font-size: 34px; }
.sd-live-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sd-tag.is-off { opacity: 0.65; text-decoration: line-through; }

/* Live "reel frame" preview: a true 9:16 canvas; every element sits at its
   export position and size (container units: 1cqw = 10.8 export px). */
.sd-frame-916 { aspect-ratio: 9 / 16; width: min(240px, 100%); margin: 0 auto; padding: 0;
  container-type: inline-size; display: block; }
.sd-frame-916 .sd-frame-abs { position: absolute; left: 4%; right: 4%; transform: translateY(-50%); text-align: center; }
.sd-frame-916 .sd-tsw { display: inline-block; width: auto; }
.sd-frame-916 .sd-tsw-tile { background: transparent; height: auto; min-height: 0; padding: 0; }
.sd-frame-916 .sd-frame-cap .ed-sw-prev { background: transparent; height: auto; font-size: inherit; }
.sd-frame-916 .ed-sw { display: block; }
.sd-frame-916 .ed-sw-w { display: inline-block; }
.sd-frame-916 .sd-frame-badge { z-index: 2; }

.sd-frame { position: relative; border-radius: 14px; padding: 18px 12px 14px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,176,32,.12), transparent 62%), linear-gradient(180deg,#16161d,#0c0c10);
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-3); }
.sd-frame-badge { position: absolute; top: 7px; right: 10px; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); opacity: .7; }
.sd-frame-top { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 22px; }
.sd-frame-cap { display: block; }
.sd-frame-cap .ed-sw-prev { background: transparent; height: 62px; font-size: 26px; }
/* title/subtitle swatch — twin of the caption swatch */
.sd-tsw { display: block; }
.sd-tsw-txt { display: inline-block; font-weight: 800; max-width: 96%; word-break: break-word; }
/* in the frame the title/subtitle sit ON the frame (no tile bg) */
.sd-frame .sd-tsw { display: inline-block; width: auto; }
.sd-frame .sd-tsw-tile { background: transparent; height: auto; min-height: 0; padding: 0; }
.sd-frame .sd-tsw-title .sd-tsw-txt { font-size: 1.35em; }
.sd-frame .sd-tsw-sub .sd-tsw-txt { font-size: 1.05em; }

/* per-section inline preview (each control group shows its own look) */
.sd-prev-inline { margin-bottom: 6px; }
.sd-prev-inline .ed-sw-prev, .sd-prev-inline .sd-tsw-tile { height: 60px; }
.sd-prev-inline .ed-sw-prev { font-size: 22px; }

/* Essentials + Advanced */
.sd-inline-toggles { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.sd-musicwrap.is-off { opacity: 0.4; pointer-events: none; filter: grayscale(1); }
.sd-adv { border-top: 1px solid var(--border); }
.sd-adv > summary { cursor: pointer; list-style: none; padding: 14px 16px; font-family: var(--font-display);
  font-size: var(--fs-md); color: var(--muted); display: flex; align-items: center; gap: var(--sp-2); user-select: none; }
.sd-adv > summary::-webkit-details-marker { display: none; }
.sd-adv > summary::before { content: '▸'; transition: transform 0.15s; }
.sd-adv[open] > summary::before { transform: rotate(90deg); }
.sd-adv > summary:hover { color: var(--text); }
.sd-adv-body { border-top: 1px solid var(--border); }

/* Sections */
.sd-sect { border-bottom: 1px solid var(--border); padding: var(--sp-4); }
.sd-sect-h h3 { font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: -0.01em; }
.sd-sect-h p { color: var(--muted); font-size: var(--fs-xs); margin-top: 3px; line-height: 1.4; }
.sd-sect-b { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.sd-field { display: flex; flex-direction: column; gap: 6px; }
.sd-flabel { font-size: var(--fs-xs); color: var(--text-2); font-weight: 600; display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.sd-fhint { font-weight: 400; color: var(--muted); font-size: 11px; }
.sd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sd-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* Toggle switch */
.sd-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.sd-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sd-switch { flex: 0 0 auto; width: 40px; height: 23px; border-radius: var(--r-pill); background: var(--surface3); border: 1px solid var(--border); position: relative; transition: background var(--dur) var(--ease-out); }
.sd-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--text-2); transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.sd-toggle input:checked + .sd-switch { background: var(--accent); border-color: var(--accent); }
.sd-toggle input:checked + .sd-switch::after { transform: translateX(17px); background: var(--on-accent); }
.sd-toggle input:focus-visible + .sd-switch { box-shadow: 0 0 0 2px var(--accent); }
.sd-toggle-l { font-size: var(--fs-sm); color: var(--text); }

/* Sliders */
.sd-slider { display: flex; align-items: center; gap: 10px; }
.sd-slider input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; min-width: 0; }
.sd-slider-out { flex: 0 0 auto; min-width: 46px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Colour inputs */
.sd-color { display: flex; align-items: center; gap: 6px; }
.sd-color input[type="color"] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: none; cursor: pointer; }
.sd-color-hex { width: 82px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-2); text-transform: uppercase; }
.sd-color-hex:focus { border-color: var(--accent); }

/* Swatch pickers (reuse the .ed-sw engine — animate on hover) */
.sd-swrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
.sd-palrow { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.sd-pick {
  display: flex; flex-direction: column; gap: 5px; padding: 5px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; text-align: center;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.sd-pick:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.sd-pick.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.sd-pick .ed-sw { display: block; }
.sd-pick .ed-sw-prev { height: 52px; font-size: 16px; }
.sd-palrow .sd-pick .ed-sw-prev { height: 46px; font-size: var(--fs-base); }
.sd-pick-name { font-size: 11px; color: var(--text-2); }

/* Font chips */
.sd-fontchip {
  display: flex; flex-direction: column; gap: var(--sp-1); align-items: center; justify-content: center;
  padding: 8px 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.sd-fontchip:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.sd-fontchip.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.sd-fontsample { font-size: 26px; line-height: 1; color: var(--text); display: inline-block; }
.sd-fontchip:hover .sd-fontsample { animation: swPop .9s var(--ease-out) infinite; }

/* Chips + tag inputs */
.sd-chiprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 10px; }
.sd-chip-add { cursor: pointer; color: var(--text-2); }
.sd-chip-add:hover { border-color: var(--accent); color: var(--text); }
.sd-tag-chip { color: var(--text); }
.sd-tag-input { flex: 1; min-width: 120px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-sm); padding: 7px 10px; }
.sd-tag-input:focus { border-color: var(--accent); }

/* Pattern list (reorderable) */
.sd-patlist { display: flex; flex-direction: column; gap: 6px; }
.sd-pat { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; }
.sd-pat-n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sd-pat-l { flex: 1; font-size: var(--fs-sm); color: var(--text); }
.sd-pat-btns { display: flex; gap: var(--sp-1); }
.sd-icon { background: var(--surface3); border: 1px solid var(--border); color: var(--text-2); width: 26px; height: 26px; border-radius: var(--r-xs); cursor: pointer; font-size: var(--fs-xs); line-height: 1; }
.sd-icon:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.sd-icon:disabled { opacity: .35; cursor: default; }
.sd-empty-line { color: var(--muted); font-size: var(--fs-xs); font-style: italic; }
.sd-addrow { margin-top: 8px; }

/* Custom hook lines */
.sd-lines { display: flex; flex-direction: column; gap: 6px; }
.sd-line-row { display: flex; gap: 6px; align-items: center; }
.sd-line { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-sm); padding: 8px 10px; }
.sd-line:focus { border-color: var(--accent); }
.sd-add-btn { align-self: flex-start; margin-top: 8px; background: transparent; border: 1px dashed var(--border-strong); color: var(--text-2); border-radius: var(--r-sm); padding: 7px 12px; font-size: var(--fs-xs); cursor: pointer; }
.sd-add-btn:hover { border-color: var(--accent); color: var(--text); }

/* Music beds */
.sd-beds { display: flex; flex-direction: column; gap: 6px; }
.sd-beds.is-dim { opacity: .5; }
.sd-bedrow { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer; }
.sd-bedrow:hover { border-color: var(--border-strong); }
.sd-bedrow.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.sd-bed-play { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--surface3); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 11px; line-height: 1; }
.sd-bed-play:hover { border-color: var(--accent); color: var(--accent); }
.sd-bed-eq { flex: 0 0 auto; display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.sd-bed-eq i { width: 3px; height: 5px; background: var(--muted); border-radius: 1px; }
.sd-bedrow:hover .sd-bed-eq i, .sd-bedrow.playing .sd-bed-eq i { background: var(--accent); animation: sdEq .9s var(--ease-in-out) infinite; }
.sd-bed-eq i:nth-child(2) { animation-delay: .15s; }
.sd-bed-eq i:nth-child(3) { animation-delay: .3s; }
.sd-bed-eq i:nth-child(4) { animation-delay: .45s; }
@keyframes sdEq { 0%, 100% { height: 5px; } 50% { height: 16px; } }
.sd-bed-name { flex: 1; font-size: var(--fs-sm); color: var(--text); }
.sd-bed-check { flex: 0 0 auto; color: var(--accent); font-size: var(--fs-xs); }
.sd-own { margin-top: 4px; }
.sd-own.is-off { display: none; }
.sd-own-have { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--success); }
.sd-own-btn { font-size: var(--fs-xs); }

/* Emoji sets */
.sd-emojiset { display: inline-flex; gap: var(--sp-1); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer; font-size: 18px; line-height: 1; transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.sd-emojiset:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.sd-emojiset.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }

/* Mobile */
@media (max-width: 768px) {
  .sd-wrap { padding: var(--sp-5) var(--sp-4) calc(var(--sp-12) + 58px); }
  .sd-head { align-items: flex-start; }
  .sd-title { font-size: var(--fs-xl); }
  .sd-head-actions { width: 100%; }
  .sd-head-actions .sd-cta { width: 100%; }
  .sd-drawer { width: 100%; border-left: none; }
}
@media (max-width: 500px) {
  .sd-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .sd-card-prev .ed-sw-prev { height: 84px; font-size: 24px; }
  .sd-grid3 { grid-template-columns: 1fr; }
  .sd-grid2 { grid-template-columns: 1fr; }
  .sd-swrow { grid-template-columns: 1fr 1fr; }
  .sd-card-actions .ghost-btn { flex: 1; }
  .sd-seed-chip { display: none; }   /* free up the name field on phones */
  .sd-drawer-head { gap: 6px; padding: var(--sp-3); }
  .sd-drawer-head-actions { gap: 6px; }
  .sd-reroll, #sd-reroll { padding: 8px 10px; }
}

/* Let swatch cells shrink below their nowrap sample (grid items default to
   min-width:auto), so the caption line clips instead of forcing overflow. */
.sd-swrow > *, .sd-pick, .sd-fontchip, .sd-bedrow { min-width: 0; }
.sd-pick .ed-sw, .sd-card-prev .ed-sw, .sd-live-prev .ed-sw { display: block; width: 100%; min-width: 0; }
.sd-pick .ed-sw-prev, .sd-card-prev .ed-sw-prev, .sd-live-prev .ed-sw-prev { width: 100%; min-width: 0; }
.sd-bed-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================================
   Make-a-clip / reel SETUP on a phone — fit the flow on ONE screen (2026-08-27).
   The desktop layout stacks a 272px source-preview stage + a marketing header
   ("Create a clip.") ABOVE the actual controls, so on a phone you scrolled a
   long way to reach the options + the button. On phones we drop those two
   (space we don't have), slim the caption gallery to one swipeable row, and let
   the config own the whole screen. Last block in the file + phone-only, so it
   cleanly wins over the ≤900 two-column layout. Desktop/tablet untouched.
   Every wired input id is kept — this only re-lays them out.
   ============================================================================ */
@media (max-width: 600px) {
  /* Single column, config only. The big source-preview STAGE is desktop-only;
     the config still shows source status ("Add source · 1 required"). */
  #import-screen.visible {
    display: block; overflow-y: auto;
    padding: 52px 12px calc(58px + env(safe-area-inset-bottom, 0px));
  }
  #import-screen .ic-stage { display: none; }
  .ic-config {
    border-left: none; background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    overflow: visible; min-height: 0; padding: 6px 2px 6px; gap: 10px;
  }
  /* The marketing header eats a third of a phone screen — the mode tabs already
     say what this is. Drop it. */
  .ic-config-head { display: none; }
  /* Tighter field rhythm so the whole form breathes on one screen. */
  .ic-config .ic-field { gap: 6px; }
  .ic-config .reel-info-fields { gap: var(--sp-2); }
  .ic-config .vo-fields { gap: var(--sp-2); }
  .mode-voiceover { gap: 10px; }
  .mode-voiceover .vo-voicelist { max-height: 176px; }   /* shorter list so Generate stays close */
  /* Slimmer upload area: icon + one line (drop the secondary hint on a phone). */
  .upload-area { padding: 12px 14px; }
  .upload-area svg { width: 20px; height: 20px; }
  .upload-area .upload-hint { display: none; }
  .divider { margin: 2px 0; }
  /* Touch has no hover, and 6 presets don't need a search box. */
  .ic-label-hint { display: none; }
  #ic-style-search { display: none; }
  /* Only one reel template exists — no need to show the picker on a phone. */
  #reel-template { display: none; }

  /* Caption gallery: a 3-col grid (~235px tall) → one SWIPEABLE row so it's
     visual but compact. (#caption-select is hidden; cap-picker feeds it.) */
  #cap-picker.cap-picker {
    display: flex; grid-template-columns: none; gap: var(--sp-2);
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  #cap-picker.cap-picker::-webkit-scrollbar { display: none; }
  #cap-picker .cap-chip { flex: 0 0 47%; scroll-snap-align: start; }
  /* The generate button is the goal — keep it comfortably tappable + sticky-ish
     at the end of the short form. */
  #import-screen .ic-generate { min-height: 48px; margin-top: 2px; }

  /* --- Review-before-render: the reel's title/subtitle/CTA/memes form ------
     Two problems on a phone: (1) the card ran UNDER the bottom nav, so Render
     was partly hidden; (2) it was a long scroll to reach Render. Fix: keep the
     whole card above the nav + PIN the Cancel/Render bar to the card's bottom so
     Render is always one tap away, and tighten the spacing so it reads shorter. */
  #reel-review-screen { padding: 54px 10px 0; align-items: flex-start; }
  .reel-review-card {
    width: 100%;
    /* clear the topbar (~54) + the fixed bottom nav (~62) so nothing hides. */
    max-height: calc(100dvh - 116px);
  }
  .reel-review-card > h2 { font-size: 19px; margin: 0 0 2px; }
  .reel-review-sub { font-size: var(--fs-xs); margin-bottom: 2px; }
  .reel-story { padding: 8px 10px; font-size: var(--fs-xs); }
  .reel-field-label { margin-top: 4px; }
  .reel-variants { margin: 4px 0 2px; }
  .reel-review-summary { margin-top: 4px; }
  .reel-review-actions {
    position: sticky; bottom: 0; margin: var(--sp-2) 0 0;
    padding: 10px 0 6px; background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .reel-review-actions button { flex: 1; min-height: 46px; }
  .reel-review-actions button:not(.ghost-btn) { flex: 2; }   /* Render is primary */
}

/* Credit wall: the blocking dialog shown when a run can't start (out of credits
   or trial ended). Replaces a toast that a redirect used to kill mid-read. */
.credit-wall{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(0,0,0,.6);
  backdrop-filter:blur(2px)}
.credit-wall-box{width:100%;max-width:420px;background:var(--panel,#1a1714);
  border:1px solid var(--line,#332c26);border-radius:14px;padding:22px 22px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.credit-wall-box h3{margin:0 0 8px;font-size:18px;color:var(--text,#f3ece5)}
.credit-wall-box p{margin:0 0 10px;color:var(--muted,#b3a79c);line-height:1.5}
.credit-wall-nums{font-variant-numeric:tabular-nums;color:var(--text,#f3ece5)!important}
.credit-wall-actions{display:flex;gap:10px;align-items:center;margin-top:16px}
.credit-wall-buy{flex:1;text-align:center;padding:11px 16px;border-radius:10px;
  background:var(--accent,#FFB020);color:#241a08;font-weight:650;text-decoration:none}
.credit-wall-buy:hover{filter:brightness(1.06)}
.credit-wall-close{padding:11px 14px;border-radius:10px;background:transparent;
  border:1px solid var(--line,#332c26);color:var(--muted,#b3a79c);cursor:pointer}
.credit-wall-close:hover{color:var(--text,#f3ece5)}
.home-usage-top{margin-left:8px;color:var(--accent,#FFB020);font-weight:600}
@media (max-width:520px){.credit-wall-actions{flex-direction:column;align-items:stretch}}


/* Social media captions popup (was a side panel) */
.post-modal { width: 640px; max-height: 90vh; overflow: auto; text-align: left; position: relative; gap: 0; }
.post-modal .post-panel { margin: 0; }
.rc-modal-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface2); color: var(--muted); font-size: 20px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; }
.rc-modal-x:hover { color: var(--text); border-color: var(--border-strong); }
.post-regen-left { color: var(--muted); font-size: var(--fs-xs); align-self: center; margin-left: 4px; }


/* Share link popup */
.share-modal { width: 520px; position: relative; text-align: left; }
.share-link-row { display: flex; gap: 8px; }
.share-link-row input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface2); color: var(--text); font-size: var(--fs-sm); }
.share-expires { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn { text-decoration: none; display: inline-flex; align-items: center; }