/* ============ Aflik · global styles ============ */

:root {
  --bg:           #000;
  --bg-soft:      #0a0a0a;
  --bg-elev:      #141414;
  --bg-card:      #18181a;
  --line:         rgba(255,255,255,0.08);
  --line-strong:  rgba(255,255,255,0.16);
  --text:         #f5f5f7;
  --text-dim:     #a1a1a6;
  --text-mute:    #6e6e73;

  --accent:       #ff6a3d;
  --accent-2:     #b66bff;
  --accent-3:     #41d1ff;

  --grad-cinema:  linear-gradient(135deg, #ff6a3d 0%, #b66bff 55%, #41d1ff 100%);
  --grad-fade:    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 80%, #000 100%);

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 56px);

  --nav-h: 56px;
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-feature-settings: 'ss01','cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  scroll-behavior: smooth;
}

body { overflow-x: hidden; }

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

/* ================= typography ================= */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
}

.h-display {
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 800;
}

.h-1 {
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.h-2 {
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.h-3 {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.lede {
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 56ch;
}

.gradient-text {
  background: var(--grad-cinema);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.muted { color: var(--text-dim); }
.mute  { color: var(--text-mute); }

/* ================= layout ================= */
.container {
  max-width: none;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
/* Nav contents pin to the far edges on every page, matching studio. */
.nav > .container {
  max-width: none;
  padding-left: 22px;
  padding-right: 22px;
}

section { padding: clamp(80px, 10vw, 160px) 0; position: relative; }

.section-tight { padding: clamp(48px, 6vw, 80px) 0; }

.divider {
  border-top: 1px solid var(--line);
}

/* ================= nav ================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  /* Honor the iOS status-bar safe area so the nav content sits below
     the clock / notch when the WebView extends full-bleed. */
  padding-top: env(safe-area-inset-top, 0);
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0));
  z-index: 50;
  display: flex; align-items: center;
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
/* Push the first-section so it doesn't sit under the now-taller nav. */
body { --nav-h-effective: calc(var(--nav-h) + env(safe-area-inset-top, 0)); }

.nav.scrolled {
  background: rgba(0,0,0,0.78);
  border-bottom: 1px solid var(--line);
}

.nav .container {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}

.brand {
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 22px;
  display: inline-flex; align-items: center; gap: 8px;
}
.brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad-cinema);
  display: inline-block;
}

.nav-links {
  display: flex; align-items: center; gap: 28px;
  list-style: none;
}
.nav-links a {
  font-size: 13.5px;
  color: var(--text-dim);
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }

.nav-cta {
  display: flex; align-items: center; gap: 12px;
}

@media (max-width: 760px) {
  .nav-links { display: none; }
}

/* ================= buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--text);
  color: #000;
}
.btn-primary:hover { background: #fff; box-shadow: 0 8px 24px rgba(255,255,255,0.12); }

/* Ghost pill — dark frosted fill, hairline border, brand-gradient text.
   The pill chrome is painted by a `::before` underlay so we can use
   `background-clip: text` on the button itself for the gradient text
   without losing the fill. */
.btn { position: relative; z-index: 0; }
.btn-ghost {
  background-image: var(--grad-cinema);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border: 1px solid var(--line);
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.08);
  z-index: -1;
  transition: background .2s var(--ease);
}
.btn-ghost:hover::before { background: rgba(255,255,255,0.14); }

.btn-link {
  background-image: var(--grad-cinema);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0;
}
.btn-link:hover { transform: none; gap: 8px; }
.btn-link::after { content: '›'; font-size: 18px; transition: transform .2s var(--ease); }
.btn-link:hover::after { transform: translateX(2px); }

.btn-lg { padding: 16px 28px; font-size: 15px; }
.btn-sm { padding: 8px 14px; font-size: 12.5px; }

.btn-grad {
  background: var(--grad-cinema);
  color: #fff;
}
.btn-grad:hover { box-shadow: 0 12px 30px rgba(255,106,61,0.28); }

/* ================= hero ================= */
.hero {
  min-height: 100vh;
  /* Account for the iOS safe-area-inset-top so the hero starts below the
     status bar/notch, but the gradient itself extends to the top. */
  padding-top: calc(var(--nav-h) + 60px + env(safe-area-inset-top, 0));
  padding-bottom: 80px;
  margin-top: calc(-1 * env(safe-area-inset-top, 0));
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.hero-orb.a { width: 520px; height: 520px; background: #ff6a3d; top: -10%; left: -8%; }
.hero-orb.b { width: 620px; height: 620px; background: #b66bff; top: 30%; right: -12%; opacity: 0.45; }
.hero-orb.c { width: 420px; height: 420px; background: #41d1ff; bottom: -10%; left: 32%; opacity: 0.32; }

.grain {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 28px;
}

.hero h1 {
  font-size: clamp(56px, 13.5vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.055em;
  font-weight: 800;
}

.hero h1 .stroke {
  -webkit-text-stroke: 1px rgba(255,255,255,0.5);
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 500;
}

.hero-tagline {
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--text-dim);
  max-width: 36ch;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.012em;
}

.hero-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}

.hero-meta {
  position: absolute;
  bottom: 32px; left: var(--pad); right: var(--pad);
  z-index: 3;
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.hero-meta .scroll {
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-meta .scroll .line {
  width: 32px; height: 1px; background: var(--text-mute);
}

/* ================= film card / poster ================= */
.poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: #111;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring);
  cursor: pointer;
}
.poster:hover { transform: translateY(-6px); box-shadow: 0 18px 60px rgba(0,0,0,0.55); }
.poster .grain { opacity: 0.12; }

.poster-canvas {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px;
  color: #fff;
}

.poster-canvas .top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.poster-canvas .badge {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 10px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}

.poster-canvas .title {
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
}
.poster-canvas .meta {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-top: 8px;
}

/* poster gradient skins */
/* Photographic placeholders. Picsum returns stable images per seed, so each
   skin maps to a consistent cinematic photo across the app. Gradients
   underneath act as a fallback while images load. */
.skin-a { background: #2a0210 url("https://picsum.photos/seed/aflik-warm-window/1600/900") center/cover no-repeat; }
.skin-b { background: #060019 url("https://picsum.photos/seed/aflik-night-city/1600/900") center/cover no-repeat; }
.skin-c { background: #02101c url("https://picsum.photos/seed/aflik-ocean-horizon/1600/900") center/cover no-repeat; }
.skin-d { background: #0a0a0c url("https://picsum.photos/seed/aflik-architecture/1600/900") center/cover no-repeat; }
.skin-e { background: #1a0500 url("https://picsum.photos/seed/aflik-gold-field/1600/900") center/cover no-repeat; }
.skin-f { background: #15151a url("https://picsum.photos/seed/aflik-noir-blinds/1600/900") center/cover no-repeat; color: #f5f5f7; }
.skin-g { background: #021510 url("https://picsum.photos/seed/aflik-forest-mist/1600/900") center/cover no-repeat; }
.skin-h { background: #100007 url("https://picsum.photos/seed/aflik-rose-dual/1600/900") center/cover no-repeat; }

/* Cast portraits — real photographic placeholders from randomuser.me */
.cast-1 { background: #2a0e02 url("https://randomuser.me/api/portraits/women/44.jpg") center/cover no-repeat; }
.cast-2 { background: #03101c url("https://randomuser.me/api/portraits/men/32.jpg") center/cover no-repeat; }
.cast-3 { background: #15151a url("https://randomuser.me/api/portraits/men/77.jpg") center/cover no-repeat; }
.cast-4 { background: #1a0e02 url("https://randomuser.me/api/portraits/women/63.jpg") center/cover no-repeat; }
.cast-5 { background: #22050d url("https://randomuser.me/api/portraits/women/88.jpg") center/cover no-repeat; }
.cast-6 { background: #03150e url("https://randomuser.me/api/portraits/men/22.jpg") center/cover no-repeat; }

/* Audio library cards */
.audio-card { padding: 14px 16px; }
.audio-thumb {
  position: relative;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
}
.audio-thumb svg { width: 100%; height: 100%; display: block; }
.audio-row { display: flex; align-items: center; gap: 12px; }
.audio-play {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.audio-play:hover { background: rgba(255,255,255,0.16); transform: scale(1.05); }
.audio-play.playing { background: var(--accent); color: #fff; }
.audio-info { flex: 1; min-width: 0; }
.audio-title { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-meta { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }

/* Studio empty-state — spans the full row of any grid host */
.studio-empty {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  padding: 64px 36px;
  text-align: center;
  color: var(--text-mute);
  background: rgba(255,255,255,0.015);
}
.studio-empty .ic {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  font-size: 22px;
}
.studio-empty h4 { font-size: 16px; color: var(--text); font-weight: 600; }
.studio-empty p { font-size: 13.5px; max-width: 52ch; margin: 8px auto 0; line-height: 1.5; }

/* Outer wrapper so views without a grid host still get a full-bleed empty state */
.studio-empty-wrap { padding: 22px; }

/* Hide the right inspector on the Storyboard view — it's not relevant there */
/* The inspector (.sa-side) only makes sense on the single-shot composer
   views (Scenes, Cuts). Default to a 2-column layout everywhere else. */
.studio-app { grid-template-columns: 240px 1fr 0 !important; }
body[data-studio-view="scenes"] .studio-app,
body[data-studio-view="cuts"]   .studio-app,
body[data-studio-view="script"] .studio-app { grid-template-columns: 240px 1fr 320px !important; }
/* Collapsed inspector: canvas reclaims the inspector's column */
body.studio-side-collapsed .studio-app,
body[data-studio-view="scenes"] .studio-app.side-collapsed,
body[data-studio-view="cuts"]   .studio-app.side-collapsed,
body[data-studio-view="script"] .studio-app.side-collapsed { grid-template-columns: 240px 1fr 0 !important; }
@media (max-width: 1100px) {
  body.studio-side-collapsed .studio-app,
  body[data-studio-view="scenes"] .studio-app.side-collapsed,
  body[data-studio-view="cuts"]   .studio-app.side-collapsed,
  body[data-studio-view="script"] .studio-app.side-collapsed { grid-template-columns: 80px 1fr 0 !important; }
}
body.studio-side-collapsed .sa-side { display: none !important; }
.sa-canvas, .sa-canvas .view, .sa-canvas .script { width: 100%; }
body[data-studio-view="storyboard"] .studio-app { grid-template-columns: 240px 1fr 0 !important; }
@media (max-width: 1100px) {
  body[data-studio-view="storyboard"] .studio-app { grid-template-columns: 80px 1fr 0 !important; }
}
body[data-studio-view="storyboard"] .sa-side,
body[data-studio-view="storyboard"] .sa-side-toggle { display: none; }

/* Hide inspector + its toggle on every non-composer view */
.sa-side, .sa-side-toggle { display: none; }
body[data-studio-view="scenes"] .sa-side,
body[data-studio-view="cuts"]   .sa-side,
body[data-studio-view="script"] .sa-side { display: block; }
body[data-studio-view="scenes"] .sa-side-toggle,
body[data-studio-view="cuts"]   .sa-side-toggle,
body[data-studio-view="script"] .sa-side-toggle { display: inline-flex; }

/* Script view shows ONLY the script-assistant block in the inspector */
.sa-side [data-script-block] { display: none; }
body[data-studio-view="script"] .sa-side [data-script-block] { display: block; }
body[data-studio-view="script"] .sa-side > div:not([data-script-block]) { display: none; }

/* The "Prompt the shot" block is only meaningful on scenes + cuts (the
   single-shot composer views). Hide it everywhere else. */
body .sa-side [data-prompt-block] { display: none; }
body[data-studio-view="scenes"] .sa-side [data-prompt-block],
body[data-studio-view="cuts"]   .sa-side [data-prompt-block] { display: block; }

/* Inspector asset tiles — uploaded / generated content */
.asset-tile { position: relative; overflow: hidden; }
.asset-tile.asset-tile-real {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
}
.asset-tile-x {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff; font-size: 9px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  z-index: 4;
  transition: opacity .15s var(--ease), background .15s var(--ease);
}
.asset-tile:hover .asset-tile-x { opacity: 1; }
.asset-tile-x:hover { background: rgba(220, 38, 38, 0.85); }
.asset-tile-label {
  position: absolute; left: 4px; right: 4px; bottom: 4px;
  font-size: 9.5px;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  z-index: 3;
  opacity: 0; transition: opacity .15s var(--ease);
  pointer-events: none;
}
.asset-tile:hover .asset-tile-label { opacity: 1; }
.asset-tile-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 1;
}
.asset-tile-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 1;
}
.asset-tile-ic {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--text);
  letter-spacing: 0.06em;
  z-index: 2;
}
.asset-tile-ic.audio { background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(6,78,59,0.4)); color: #b9f6cd; }
.asset-tile-ic.pdf   { background: linear-gradient(135deg, rgba(220,38,38,0.18), rgba(76,5,25,0.4)); color: #ffb1b1; }
.asset-tile-ic.doc   { background: linear-gradient(135deg, rgba(65,209,255,0.18), rgba(13,79,122,0.4)); color: #c4ecff; }
.asset-tile-ic.text  { background: linear-gradient(135deg, rgba(247,201,72,0.18), rgba(176,74,0,0.4)); color: #ffe1a8; }
.asset-tile-ic.file  { background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(0,0,0,0.4)); color: var(--text-dim); }

.asset-row { position: relative; transition: outline-color .15s var(--ease); border-radius: 12px; }
.asset-row.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
  background: rgba(255, 106, 61, 0.04);
}

/* Asset chooser modal — Generate or Upload */
.asset-chooser .card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  padding: 22px;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.asset-chooser .card:hover {
  border-color: var(--accent);
  background: rgba(255, 106, 61, 0.05);
  transform: translateY(-1px);
}

/* Story card delete affordance */
.story-card { position: relative; }
.story-card-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  z-index: 3;
  transition: opacity .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.story-card:hover .story-card-x { opacity: 1; }
.story-card-x:hover { background: rgba(220, 38, 38, 0.85); transform: scale(1.05); }
.story-card-open {
  position: absolute;
  top: 8px; right: 42px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 0;
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  z-index: 3;
  font-family: inherit;
  transition: opacity .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.story-card:hover .story-card-open { opacity: 1; }
.story-card-open:hover { background: var(--grad-cinema); transform: scale(1.05); }

/* Model picker pill on scene cards — overlays the top-left of the cover */
.scene-card .scene-model-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
}
.scene-model-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.scene-model-trigger:hover { background: rgba(255,255,255,0.1); border-color: var(--line-strong); }
.scene-model-trigger .model-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad-cinema);
}
.scene-model-trigger .model-chev { font-size: 10px; color: var(--text-mute); }
.scene-model-menu {
  position: fixed;
  z-index: 200;
  min-width: 200px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.scene-model-menu[hidden] { display: none; }
.scene-model-menu .model-group-h {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 8px 10px 4px;
}
.scene-model-menu button {
  background: transparent;
  border: 0;
  color: var(--text);
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.scene-model-menu button:hover { background: rgba(255,255,255,0.06); }
.scene-model-menu button.on {
  background: rgba(255,106,61,0.12);
  color: var(--text);
}

/* While dragging a story-card over the Scenes rail item, fade the card so the
   rail item remains visible underneath and highlight the drop target. */
body.dragging-over-rail .story-card.dragging {
  opacity: 0.15 !important;
}
.sa-rail .item.drop-target {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  background: rgba(255,106,61,0.18);
  color: var(--text);
}

/* Library cards (Footage, Audio, Locations) are draggable into the storyboard.
   Show grab cursor and a subtle dragging affordance. */
.lib-card[draggable="true"] { cursor: grab; }
.lib-card[draggable="true"]:active { cursor: grabbing; }
.lib-card.dragging-lib { opacity: 0.4; }
body.dragging-library .story-grid { outline: 1px dashed rgba(255,106,61,0.35); outline-offset: -8px; border-radius: 16px; }
body.dragging-library .story-card.drag-merge { outline: none; box-shadow: 0 0 24px rgba(255,106,61,0.45); }
.scene-frame.drag-merge { box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(255,106,61,0.45); }

/* Audio "skin" used when an audio item is dropped into the storyboard — no
   real image, so render a stylised waveform on a deep gradient. */
.skin-audio {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.18) 0 2px,
      transparent 2px 6px
    ),
    radial-gradient(120% 80% at 50% 100%, rgba(255,106,61,0.35), transparent 60%),
    linear-gradient(135deg, #1a0a14, #050108);
  background-size: 100% 36%, 100% 100%, 100% 100%;
  background-position: center 60%, center, center;
  background-repeat: no-repeat;
}
.skin-audio::before {
  content: '♪';
  position: absolute; top: 10px; left: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Frame model picker chips inside the inline + Frame prompt */
.story-prompt-models {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px;
}
.story-prompt-models .chip {
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  cursor: pointer;
  background: transparent;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.story-prompt-models .chip.on {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(255, 106, 61, 0.12);
}
.story-card .badge-model {
  position: absolute;
  bottom: 8px; left: 8px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 2;
}
.story-card .img { position: relative; }

/* Drag-to-reorder affordance for storyboard frames */
.story-card { cursor: grab; transition: opacity .15s var(--ease), outline-color .15s var(--ease); }
.story-card:active { cursor: grabbing; }
.story-card.dragging { opacity: 0.35; }
.story-card.drag-over { outline: 2px solid var(--accent); outline-offset: -2px; }
.story-card.drag-merge { outline: none; box-shadow: 0 0 24px rgba(182, 107, 255, 0.35); }
.story-card.drag-merge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--grad-cinema);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}

/* Scene group card */
.scene-card .scene-img { display: flex; aspect-ratio: 16/9; position: relative; overflow: hidden; }
.scene-card .scene-strip {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  background-size: cover;
  background-position: center;
  cursor: grab;
  transition: flex 0.25s var(--ease), opacity 0.15s var(--ease);
}
.scene-card .scene-strip + .scene-strip {
  border-left: 1px solid rgba(0,0,0,0.4);
}
.scene-card .scene-img:hover .scene-strip { flex: 0.6 1 0; }
.scene-card .scene-img .scene-strip:hover { flex: 4 1 0; }
.scene-card .scene-strip.dragging-strip { opacity: 0.35; cursor: grabbing; }
.scene-card .num.scene-title {
  background: var(--grad-cinema);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 700;
}
.scene-card .body .head { color: var(--text); }
.scene-card .scene-frames { display: none; }
.scene-card.expanded {
  grid-column: 1 / -1;
  order: -1;
  cursor: default;
  overflow: visible !important;
  height: auto !important;
}
.scene-card.expanded > .scene-frames { overflow: visible; }
.scene-card.expanded .scene-frame { height: auto; overflow: hidden; }
.scene-card.expanded .scene-img { display: none; }
.scene-card.expanded > .body {
  padding: 16px 22px !important;
  padding-right: 200px !important;
  border-bottom: 1px solid var(--line);
  cursor: zoom-out;
}
/* When expanded, the scene-img is hidden so the absolute-positioned model
   pill (top:8 left:8) collides with the title. Move it to the top-right
   inside the body, clear of the ▣ and × buttons. */
.scene-card.expanded .scene-model-pill { top: 14px; left: auto; right: 80px; }
.scene-card.expanded > .body .scene-title { font-size: 12.5px; }
.scene-card.expanded > .body .head { font-size: 13.5px; }
.scene-card.expanded .scene-frames {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 18px 22px 22px;
  background: rgba(255,255,255,0.02);
}
.scene-card.expanded .scene-frame {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: grab;
}
.scene-card.expanded .scene-frame:active { cursor: grabbing; }
.scene-card.expanded .scene-frame.dragging-frame { opacity: 0.4; }
.scene-card.expanded .scene-frame .img {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  display: block;
}
.scene-card.expanded .scene-frame .body {
  padding: 12px 14px 14px !important;
  display: block !important;
}
.scene-card.expanded .scene-frame .num {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.scene-card.expanded .scene-frame .head {
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.45;
  color: var(--text);
}
.scene-card.expanded .scene-frame .num[contenteditable="true"],
.scene-card.expanded .scene-frame .head[contenteditable="true"] {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  border-radius: 4px;
  outline: none;
  cursor: text;
  padding: 2px 6px;
}
.story-prompt-form .img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  /* Inherits aspect-ratio: 16/9 from .story-card .img — but its single
     child input has no intrinsic height so flex centering needs help.
     Use grid place-items so the input lands true-center vertically. */
  display: grid;
  place-items: center;
  min-height: 130px;
  box-sizing: border-box;
}
.story-prompt-form .img input {
  width: 100%; background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 14px;
  text-align: center;
  align-self: center;
  line-height: 1.4;
}
.story-prompt-form .body { display: flex; flex-direction: column; gap: 10px; }
.story-prompt-form .actions { display: flex; gap: 8px; }

/* Cast card delete affordance — appears on hover, top-right of the card */
.cast-card { position: relative; }
.cast-card-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  transition: opacity .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.cast-card:hover .cast-card-x { opacity: 1; }
.cast-card-x:hover { background: rgba(220, 38, 38, 0.85); transform: scale(1.05); }

/* Location reference plates */
.loc-office   { background: #1a0e08 url("https://picsum.photos/seed/aflik-loc-office/800/450") center/cover no-repeat; }
.loc-stairwell{ background: #0e0e12 url("https://picsum.photos/seed/aflik-loc-stairwell/800/450") center/cover no-repeat; }
.loc-bakery   { background: #28100a url("https://picsum.photos/seed/aflik-loc-bakery/800/450") center/cover no-repeat; }
.loc-street   { background: #08090c url("https://picsum.photos/seed/aflik-loc-street/800/450") center/cover no-repeat; }

/* ================= section: pillars ================= */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pillar {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  min-height: 380px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.pillar:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.pillar .num {
  font-size: 12px; letter-spacing: 0.2em; color: var(--text-mute);
}
.pillar h3 {
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: 16px;
}
.pillar p {
  color: var(--text-dim);
  margin-top: 20px;
  max-width: 38ch;
  font-size: 15px;
}
.pillar .glyph {
  font-size: 60px;
  align-self: end;
  background: var(--grad-cinema);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 0; }
}

/* ================= studio showcase (device frame) ================= */
.studio-frame {
  margin-top: 64px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #1a1a1c 0%, #0a0a0c 100%);
  border: 1px solid var(--line);
  padding: 14px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
}
.studio-frame::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: calc(var(--radius-xl) + 2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
  z-index: -1;
}

.studio-screen {
  background: #0d0d10;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  min-height: 560px;
}

.ss-rail {
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(255,255,255,0.015);
}
.ss-rail .group {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute);
  margin: 16px 8px 6px;
}
.ss-rail .item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ss-rail .item .ic {
  width: 18px; height: 18px; border-radius: 5px;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.ss-rail .item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.ss-rail .item.active { background: rgba(255,106,61,0.12); color: var(--text); }
.ss-rail .item.active .ic { background: var(--grad-cinema); color: #fff; }

.ss-canvas {
  position: relative;
  display: flex; flex-direction: column;
}
.ss-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-dim);
}
.ss-toolbar .seg {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.ss-toolbar .seg button {
  padding: 6px 12px; font-size: 12px; color: var(--text-dim);
}
.ss-toolbar .seg button.on { background: rgba(255,255,255,0.08); color: var(--text); }
.ss-toolbar .spacer { flex: 1; }

.ss-stage {
  flex: 1;
  position: relative;
  background: #07070a;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ss-stage::before {
  content: '';
  position: absolute; inset: 24px;
  border-radius: 14px;
  background: radial-gradient(80% 60% at 50% 30%, #2a1a48 0%, #0a0218 60%, #03000a 100%);
}
.ss-stage .scene-text {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 70%;
}
.ss-stage .scene-text .label {
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-mute);
}
.ss-stage .scene-text .head {
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 700; letter-spacing: -.02em; margin-top: 8px;
  text-wrap: balance;
}
.ss-stage .play {
  position: absolute; z-index: 3;
  bottom: 40px; left: 40px;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px; color: var(--text);
}
.ss-stage .play .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff453a;
  animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(0.8); }
}

.ss-timeline {
  border-top: 1px solid var(--line);
  padding: 10px 14px 14px;
  background: #0a0a0d;
}
.ss-track {
  display: grid; grid-template-columns: 90px 1fr; align-items: center;
  gap: 10px;
  height: 28px;
  font-size: 11px; color: var(--text-dim);
}
.ss-track .name { letter-spacing: .14em; text-transform: uppercase; font-size: 9.5px; color: var(--text-mute); }
.ss-track .lane {
  height: 18px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
}
.ss-track .clip {
  position: absolute; top: 0; bottom: 0;
  border-radius: 6px;
  display: flex; align-items: center;
  padding: 0 8px;
  font-size: 10px; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden;
  color: rgba(255,255,255,0.92);
}
.clip.v1 { left: 2%; width: 38%;  background: linear-gradient(90deg,#ff6a3d,#c8163a); }
.clip.v2 { left: 44%; width: 26%; background: linear-gradient(90deg,#41d1ff,#1a5e85); }
.clip.v3 { left: 72%; width: 24%; background: linear-gradient(90deg,#b66bff,#3a127a); }
.clip.a1 { left: 2%; width: 96%;  background: linear-gradient(90deg,rgba(74,222,128,.55),rgba(74,222,128,.18)); color: #d8ffe6; }
.clip.s1 { left: 12%; width: 18%; background: linear-gradient(90deg,#f7c948,#b04a00); }
.clip.s2 { left: 56%; width: 16%; background: linear-gradient(90deg,#f7c948,#b04a00); }

.ss-side {
  border-left: 1px solid var(--line);
  padding: 18px;
  background: rgba(255,255,255,0.015);
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
}
.ss-side h4 {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}
.prompt-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
}
.prompt-box .input {
  font-size: 13px; color: var(--text);
  line-height: 1.45;
  min-height: 64px;
}
.prompt-box .input .cursor {
  display: inline-block; width: 7px; height: 14px; vertical-align: -2px;
  background: var(--accent); margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.prompt-tools {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;
}
.chip {
  font-size: 11px; padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.chip.on {
  background: rgba(255,106,61,0.14);
  border-color: rgba(255,106,61,0.5);
  color: #ffd1bd;
}

.assets-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.asset-tile {
  aspect-ratio: 1;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.asset-tile.a { background: linear-gradient(135deg,#ff6a3d,#b66bff); }
.asset-tile.b { background: linear-gradient(135deg,#41d1ff,#0a3a55); }
.asset-tile.c { background: linear-gradient(135deg,#1a1a1d,#444); }
.asset-tile.d { background: linear-gradient(135deg,#f7c948,#b04a00); }
.asset-tile.e { background: linear-gradient(135deg,#4ade80,#064e3b); }
.asset-tile.f { background: linear-gradient(135deg,#fb7185,#4c0519); }
.asset-tile.dashed {
  background: transparent;
  border: 1px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute); font-size: 18px;
}

@media (max-width: 1100px) {
  .studio-screen { grid-template-columns: 80px 1fr 240px; }
  .ss-rail .item span { display: none; }
}
@media (max-width: 800px) {
  .studio-screen { grid-template-columns: 1fr; min-height: 0; }
  .ss-rail, .ss-side { display: none; }
}
/* Hide the editing-interface marketing demo on phones — it's a desktop-
   only mockup that compresses badly and doesn't communicate the product
   on a small screen. */
@media (max-width: 720px) {
  .studio-frame { display: none; }

  /* Onboarding: stack the grids that were 2- or 3-column on desktop. */
  [data-step-pane] .dash-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  /* Step strip: wrap, lose the arrows that look broken on a narrow screen. */
  .steps {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 24px !important;
  }
  .steps .arrow { display: none; }
  .steps .step {
    font-size: 11.5px;
    padding: 4px 10px;
  }
  /* Onboarding tag rows: tighter, full-width chips. */
  [data-step-pane] .tagrow {
    gap: 6px;
  }
  [data-step-pane] .tagrow .chip {
    font-size: 12.5px !important;
    padding: 7px 11px !important;
  }
  /* Footer step buttons: stack and full width. */
  .onboarding-foot {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .onboarding-foot .btn { width: 100%; }
  /* Hide creator-intent cards on phones — Studio is desktop-only. */
  .desktop-only-intent { display: none !important; }

  /* Mobile top-bar slimming — hide the username text in the profile pill
     (the avatar circle remains as the dropdown trigger). The brand logo
     is kept; just the in-pill text is removed. */
  .profile-pill .nm { display: none; }
  /* Hide editor-only menu items on phones since Studio is desktop-only. */
  .profile-pill .profile-menu a[href="dashboard.html"] { display: none; }

  /* Top-bar layout breathing room. */
  .nav .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 10px !important;
  }
  .nav .brand { font-size: 17px; }
  .profile-pill {
    padding: 4px 4px !important;
    gap: 0 !important;
  }
  .nav-cta { gap: 8px !important; flex-wrap: nowrap; min-width: 0; }
  /* Slim the search "button" to a circle icon on mobile so the row
     can fit Aflik | Search-icon | Done | profile-pill without overflow. */
  .nav-search {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .nav-search > span:nth-child(2),
  .nav-search > .kbd { display: none !important; }
  /* On pages that show a "Done" action AND a profile pill, hide Done on
     mobile — the pill's dropdown already provides navigation, so the two
     fight for the same end of the bar. */
  .nav-cta a[href="dashboard.html"].btn-ghost { display: none !important; }

  /* Site-wide horizontal padding — the desktop .container uses
     clamp(20px, 4vw, 56px); on phones we want a guaranteed 18px so
     headlines and body text don't kiss the screen edge. */
  .container { padding-left: 18px !important; padding-right: 18px !important; }

  /* Tighter title sizing so big H1s don't wrap awkwardly. */
  h1, .h-1 { font-size: clamp(34px, 9vw, 48px) !important; line-height: 1.05 !important; }

  /* Action button rows: ensure they don't crowd the edge. */
  .actions, .cta-buttons { gap: 10px; }

  /* "See all" link in row headers shouldn't wrap to two lines on phones —
     when the title is long, keep the link on a single line and let it
     sit alongside instead. */
  .row-head .btn-link, .row-head a { white-space: nowrap; flex-shrink: 0; }
  .row-head { gap: 12px; align-items: end; }

  /* Channel page (single channel): a shorter banner whose orange-to-black
     gradient still extends past where the avatar sits. The avatar overlaps
     the bottom of the banner so the gradient and the page read as one
     continuous fade. */
  .channel-banner { aspect-ratio: auto; min-height: 0 !important; height: 200px !important; overflow: visible !important; }
  .channel-banner .bg { inset: 0 0 -80px 0 !important; }
  .channel-banner .bg::after {
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.95) 92%, #000 100%) !important;
  }
  .channel-back { display: none !important; }
  /* Avatar overlaps banner so there's no empty band above the name. */
  .channel-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: -100px !important;
    padding-top: 0 !important;
    padding-bottom: 14px !important;
    position: relative;
    z-index: 2;
  }
  [data-tabs] { margin-top: 18px !important; }
  /* The section wrapping the head adds its own padding — squash it. */
  .section-tight:has(.channel-head) { padding-top: 0 !important; padding-bottom: 0 !important; }
  /* Channel film tabs: single-column posters so the FEATURED + runtime
     badges have room and don't clip on the right edge of the card. */
  [data-pane="ch-films"] .film-grid,
  [data-pane="ch-progress"] .film-grid,
  [data-pane="ch-cuts"] .film-grid { grid-template-columns: 1fr !important; }
  [data-pane] .poster { aspect-ratio: 16/10; max-height: 360px; }

  /* My list: same fix — single column so the genre + runtime badges and
     the title aren't crushed inside a 45% half-card. */
  [data-mylist-grid] { grid-template-columns: 1fr !important; }
  [data-mylist-grid] .poster { aspect-ratio: 16/10; max-height: 360px; }
  [data-mylist-grid] .swipe-row { width: 100%; }
  .channel-avatar {
    width: 88px !important;
    height: 88px !important;
    font-size: 28px !important;
  }
  .channel-info h1 { font-size: 30px !important; line-height: 1.05 !important; }
  /* Action buttons (Follow / Share / Donate) — full width row at bottom. */
  .channel-head > div:last-child {
    width: 100%;
    align-self: stretch !important;
    padding-bottom: 0 !important;
    flex-wrap: wrap;
  }
  /* Tabs row: scroll horizontally so all 4 fit on a phone. */
  .view[data-name] .tabs, [data-tabs] {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -18px;
    padding: 0 18px;
  }
  [data-tabs]::-webkit-scrollbar { display: none; }
  [data-tabs] button { flex: 0 0 auto; white-space: nowrap; }

  /* Awards page toggle row: place the view toggle (Leaderboard / Ballot)
     and the track toggle (Films / Series) on the same row with a clear
     gap between them, and tighten typography so they fit on a phone. */
  .aw-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px 14px !important;
    align-items: center;
    margin-top: 18px !important;
  }
  .aw-toolbar .spacer { display: none !important; }
  .aw-toolbar [data-aw-view-tabs],
  .aw-toolbar [data-aw-track-tabs] {
    flex: 0 0 auto;
    margin: 0 !important;
  }
  .aw-toolbar [data-aw-view-tabs] button,
  .aw-toolbar [data-aw-track-tabs] button {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
  /* Awards: drop the explanatory paragraph below the toolbar on mobile —
     the toggles are self-explanatory and the paragraph eats real estate. */
  [data-aw-track-note] { display: none !important; }

  /* Pricing page: hide the desktop comparison table on mobile and replace
     it with a tab-driven plan compare (rendered by bindPricingCompareMobile).
     The mobile widget reuses the site's pill-tab pattern (Films/Series,
     Leaderboard/Ballot) for visual continuity. */
  .compare-wrap { display: none !important; }
  .compare-mobile { display: block !important; }

  /* Pricing FAQ: 2-column grid is too cramped on a phone — let each Q&A
     card take the full row so the long answers don't wrap one word per
     line. Bigger card padding makes the section feel intentional. */
  main.page > section .dash-grid + div .card,
  section .card { /* no-op fallback */ }
  /* Specifically target the FAQ grid (inline grid-template-columns: repeat(2, 1fr)). */
  main.page section [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  main.page section [style*="grid-template-columns: repeat(2, 1fr)"] .card {
    padding: 20px !important;
  }
  main.page section [style*="grid-template-columns: repeat(2, 1fr)"] .card .h-3 {
    font-size: 17px;
    line-height: 1.25;
  }

  /* Awards leaderboard rows: on a phone there isn't enough horizontal
     room for [rank | thumb | title | votes | heart] in one line — the
     title column collapses to a single word per line and the vote count
     visually crashes into it. Restack with grid-template-areas so the
     vote count drops below the title, while the rank, thumb, and heart
     button stay aligned vertically across both rows. */
  .aw-row {
    grid-template-columns: 28px 52px 1fr auto !important;
    grid-template-areas:
      "rank thumb meta button"
      "rank thumb votes button" !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    padding: 12px 14px !important;
  }
  .aw-row > .aw-rank   { grid-area: rank; align-self: center; font-size: 16px !important; }
  .aw-row > .aw-thumb  { grid-area: thumb; align-self: center; width: 52px !important; }
  .aw-row > .aw-actor-avatar { grid-area: thumb; align-self: center; }
  .aw-row > .aw-meta   { grid-area: meta; align-self: end; }
  .aw-row > .aw-votes  { grid-area: votes; text-align: left !important; min-width: 0 !important; align-self: start; font-size: 12px !important; color: var(--text-mute) !important; font-weight: 500 !important; }
  .aw-row > .aw-votes::after { content: ' votes'; color: var(--text-mute); font-weight: 400; }
  .aw-row > .aw-vote-btn { grid-area: button; align-self: center; }
  .aw-title { font-size: 14px; line-height: 1.25; }
  .aw-by { font-size: 11.5px; line-height: 1.3; }

  /* Festivals page: the inline `grid-template-columns: 1fr 1fr` and
     `repeat(4, 1fr)` on the cards aren't responsive, so they overflow on
     phones. Force every grid on this page to a single column. */
  .page-head .lede { font-size: 15px !important; }
  .page-head h1 { font-size: clamp(34px, 9vw, 48px) !important; line-height: 1.05 !important; }
  main.page > section .film-grid[style*="1fr 1fr"],
  main.page > section .dash-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  main.page > section .card { padding: 18px !important; }
  main.page > section article.card .thumb { aspect-ratio: 16/9 !important; }
  main.page > section article.card > div:last-child { padding: 18px !important; }
  /* Festivals "Coming up" calendar cards: condense. */
  main.page > section .dash-grid .card .h-3 { font-size: 18px; }
  /* Festivals winners-history: ensure list rows wrap rather than overflowing. */
  .fest-history li { flex-wrap: wrap; }

  /* Channels list page: collapse the 3-column grid to a single column
     so each card has room for the creator's name + bio. */
  [data-channels-grid] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  [data-channels-grid] .pillar {
    min-height: 0 !important;
    padding: 18px !important;
  }

  /* Channels strip: convert from 4-column grid to a horizontal swipe rail
     so each pillar card has room for its text on a phone. */
  [data-channels-strip] {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: visible;
    gap: 12px;
    margin: 0 -18px;
    padding: 4px 18px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-channels-strip]::-webkit-scrollbar { display: none; }
  [data-channels-strip] > .pillar,
  [data-channels-strip] > a {
    flex: 0 0 78vw;
    max-width: 320px;
    min-height: auto !important;
    scroll-snap-align: start;
  }
}

/* ================= tool strip ================= */
.tool-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 4px 0 14px;
}
.tool {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.tool:hover { background: rgba(255,255,255,0.06); border-color: var(--line-strong); transform: translateY(-1px); }
.tool .badge {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--grad-cinema);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 12px;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.tool-body { flex: 1 1 auto; min-width: 0; }
.tool-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tool .name { font-weight: 600; font-size: 13.5px; }
.tool .role { color: var(--text-mute); font-size: 11.5px; }
.tool .role::before { content: '· '; }
.tool-note { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; margin-top: 6px; }

/* ================= film grids ================= */
.film-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .film-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .film-grid { grid-template-columns: repeat(2, 1fr); } }

.row-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}

/* horizontal rail */
.rail {
  display: flex; gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad);
  padding: 4px 0 18px;
  /* Anchor the rail to the .container left/right padding so the first
     poster always starts flush with the section header above. */
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 999px; }
.rail .poster {
  flex: 0 0 240px;
  scroll-snap-align: start;
}
@media (min-width: 900px) { .rail .poster { flex: 0 0 280px; } }

/* ================= testimonial ================= */
.quote-card {
  background: linear-gradient(180deg,#161618 0%, #0a0a0c 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(36px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.quote-card::before {
  content: '“';
  position: absolute;
  top: -60px; left: 24px;
  font-size: 280px;
  font-family: Georgia, 'Times New Roman', serif;
  color: rgba(255,255,255,0.05);
  line-height: 1;
}
.quote-card blockquote {
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 28ch;
  position: relative;
  text-wrap: balance;
}
.quote-card .who {
  margin-top: 28px;
  display: flex; align-items: center; gap: 14px;
  /* When the .who block is rendered as a link to the creator's channel,
     keep the visual identical but make the whole row hoverable. */
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  padding: 6px 10px;
  margin-left: -10px;
  transition: background .15s ease;
}
a.quote-card .who, a.who {
  text-decoration: none;
  color: inherit;
}
.quote-card a.who:hover, a.who:hover { background: rgba(255,255,255,0.04); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-cinema);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}
.avatar.has-photo {
  background-color: #1a1a1d;
  color: transparent;
  text-shadow: none;
}
.who-name { font-weight: 600; font-size: 15px; }
.who-role { color: var(--text-mute); font-size: 13px; }

/* ================= big CTA ================= */
.cta {
  text-align: center;
  padding: clamp(80px, 14vw, 180px) 0;
  position: relative;
  overflow: hidden;
}
.cta h2 {
  font-size: clamp(48px, 9vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 800;
  text-wrap: balance;
}
.cta .lede { margin: 28px auto 0; }
.cta-buttons { margin-top: 40px; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ================= footer ================= */
footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  font-size: 13px;
  color: var(--text-mute);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
}
.footer-grid h5 {
  color: var(--text); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 14px;
}
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-grid a:hover { color: var(--text); }
.footer-fine {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap; gap: 12px;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Compact mobile footer: brand block on top, link sections in a 2-column
   grid below it with tighter spacing. Keeps every link visible without the
   wide vertical sprawl. */
@media (max-width: 720px) {
  footer { padding: 32px 0 24px; font-size: 12.5px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .footer-grid > div:first-child .brand { font-size: 18px; }
  .footer-grid > div:first-child p { font-size: 13px; margin-top: 8px !important; }
  .footer-grid h5 { font-size: 10.5px; margin-bottom: 10px; }
  .footer-grid ul { gap: 6px; }
  .footer-grid ul a { font-size: 13px; }
  .footer-fine {
    margin-top: 24px;
    padding-top: 16px;
    font-size: 11.5px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ================= reveal on scroll ================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease-spring), transform .9s var(--ease-spring);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ================= watch (browse) page ================= */
.watch-hero {
  position: relative;
  min-height: 78vh;
  padding-top: calc(var(--nav-h) + 40px);
  display: flex; align-items: end;
  overflow: hidden;
}
.watch-hero .bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 70% 30%, #5b1a82 0%, #1a0228 60%, #04000a 100%);
}
.watch-hero .bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.85) 75%, #000 100%);
}
.watch-hero .copy {
  position: relative; z-index: 2; padding: 60px 0;
  max-width: 720px;
}
.watch-hero .tag { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: #ffd1bd; }
.watch-hero h1 {
  font-size: clamp(48px, 8vw, 112px);
  font-weight: 800; letter-spacing: -.04em; line-height: .92;
  margin-top: 14px;
}
.watch-hero p { font-size: 17px; color: var(--text-dim); max-width: 50ch; margin-top: 18px; line-height: 1.5; }
.watch-hero .meta {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 13px; color: var(--text-dim); margin-top: 18px;
}
.watch-hero .meta .pill {
  border: 1px solid var(--line-strong);
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.watch-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.filter {
  font-size: 13px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  padding: 8px 14px; border-radius: 999px;
  color: var(--text-dim);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filter:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.filter.on {
  background: var(--text); color: #000; border-color: var(--text);
}

/* ================= film detail page ================= */
.film-hero {
  position: relative;
  min-height: 92vh;
  padding-top: calc(var(--nav-h) + 40px);
  display: flex; align-items: end;
  overflow: hidden;
}
.film-hero .bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(140% 100% at 30% 30%, #c8163a 0%, #2a0210 50%, #06000a 100%);
}
.film-hero .bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.9) 80%, #000 100%);
}
.film-hero .container { position: relative; z-index: 2; padding-bottom: 80px; }

.film-meta {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 18px;
}
.film-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-mute); }

.film-title {
  font-size: clamp(56px, 11vw, 168px);
  font-weight: 800; letter-spacing: -.05em; line-height: .88;
  text-wrap: balance;
}
.film-tag {
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--text-dim); margin-top: 18px; max-width: 56ch; line-height: 1.45;
}

.film-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

.film-grid-2 {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px;
  margin-top: 80px;
}
@media (max-width: 1000px) { .film-grid-2 { grid-template-columns: 1fr; gap: 32px; } }

.spec {
  display: grid; grid-template-columns: 140px 1fr;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.spec .k { color: var(--text-mute); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.spec .v { color: var(--text); }

.tools-used {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.tool-pill {
  font-size: 12px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.02);
}

.scene-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 40px;
}
.scene-strip .frame {
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.scene-strip .frame .grain { opacity: 0.1; }
.frame.f1 { background: radial-gradient(120% 80% at 30% 20%, #ff6a3d 0%, #4a0e1f 70%); }
.frame.f2 { background: radial-gradient(120% 80% at 70% 30%, #b66bff 0%, #1f0844 70%); }
.frame.f3 { background: radial-gradient(120% 80% at 50% 80%, #41d1ff 0%, #0a3a55 70%); }
.frame.f4 { background: radial-gradient(120% 80% at 70% 70%, #f7c948 0%, #6c2d00 70%); }
@media (max-width: 800px) { .scene-strip { grid-template-columns: repeat(2, 1fr); } }

/* small play button */
.play-btn {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.play-btn:hover { transform: scale(1.06); background: rgba(255,255,255,0.14); }
.play-btn::before {
  content: ''; display: block;
  border-style: solid; border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}

/* page-side spacing helper */
.row-gap > * + * { margin-top: clamp(80px, 10vw, 140px); }

/* ============ shared utilities ============ */
.page { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0)); }
.page-narrow { max-width: 880px; margin: 0 auto; }
.page-head {
  padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 48px);
}
.page-head-center { text-align: center; }
.page-head-center .eyebrow,
.page-head-center .lede { display: block; }
.page-head-center .lede { margin-left: auto; margin-right: auto; }
.page-head h1 {
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.96; letter-spacing: -.04em; font-weight: 800;
  margin-top: 14px; text-wrap: balance;
}
.page-head p { margin-top: 18px; }

.input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit; font-size: 15px;
  padding: 14px 16px; border-radius: 12px;
  outline: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.input:focus { border-color: var(--line-strong); background: rgba(255,255,255,0.05); }
.input::placeholder { color: var(--text-mute); }

label.field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-dim); }
label.field .lab { letter-spacing: .04em; }

/* card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
}

/* checkbox/toggle */
.toggle { position: relative; width: 36px; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.1); cursor: pointer; transition: background .2s var(--ease); }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s var(--ease); }
.toggle.on { background: var(--accent); }
.toggle.on::after { left: 18px; }

/* tag chips */
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 12px; padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text-dim);
}

/* tabs */
.tabs {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}
.tabs button {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 9px;
  color: var(--text-dim);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.tabs button.on { background: rgba(255,255,255,0.08); color: var(--text); }
.tabs button:hover { color: var(--text); }

/* small text */
.small { font-size: 12.5px; color: var(--text-mute); }

/* ============ command palette / search ============ */
.search-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.search-overlay.open { display: flex; opacity: 1; }
.search-panel {
  width: min(720px, 92vw);
  background: rgba(20,20,22,0.92);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.search-input {
  width: 100%;
  padding: 22px 26px;
  font-size: 19px; color: var(--text);
  background: transparent; border: 0; outline: 0;
  border-bottom: 1px solid var(--line);
}
.search-input::placeholder { color: var(--text-mute); }
.search-results { max-height: 50vh; overflow-y: auto; padding: 8px; }
.search-section { padding: 10px 16px 4px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); }
.search-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 10px;
  cursor: pointer;
}
.search-item:hover, .search-item.on { background: rgba(255,255,255,0.06); }
.search-item .ic {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.search-item .t { font-size: 14px; }
.search-item .s { font-size: 12px; color: var(--text-mute); }
.search-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  display: flex; gap: 18px;
  font-size: 11px; color: var(--text-mute);
  letter-spacing: .04em;
}
.kbd {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; color: var(--text-dim);
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
}

/* nav search trigger */
.nav-search {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  border-radius: 999px;
  font-size: 12.5px; color: var(--text-mute);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), min-width .25s var(--ease);
  min-width: 180px;
  justify-content: space-between;
}
.nav-search > span:nth-child(2) { flex: 1; text-align: left; }
.nav-search:hover { background: rgba(255,255,255,0.06); border-color: var(--line-strong); color: var(--text-dim); }
.nav-search .kbd { background: rgba(255,255,255,0.04); }

/* When signed in, the guest CTAs are hidden — let the search breathe */
.nav-cta.authed .nav-search { min-width: 240px; }

/* ============ modal ============ */
.modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal.open { display: flex; }
.modal-panel {
  width: min(640px, 100%);
  background: linear-gradient(180deg, #1a1a1c 0%, #0d0d10 100%);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 36px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.modal-head h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.modal-x {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 14px;
}
.modal-x:hover { background: rgba(255,255,255,0.06); color: var(--text); }

/* ============ dashboard ============ */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1000px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .dash-grid { grid-template-columns: 1fr; } }

/* Season header inside a series folder — spans the full grid row. */
.dash-season {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line);
}
.dash-season:first-child { border-top: 0; padding-top: 6px; }
.dash-season .dash-season-count {
  font-size: 12px;
  color: var(--text-mute);
}

.proj {
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.proj:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.proj .thumb {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
}
.proj .thumb .grain { opacity: 0.12; }
.proj .body { padding: 16px 18px 18px; }
.proj h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.proj .row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--text-mute); margin-top: 6px;
}
.proj-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.proj-status .d { width: 6px; height: 6px; border-radius: 50%; }
.proj-status.draft .d { background: #f7c948; }
.proj-status.rendering .d { background: #41d1ff; animation: pulse 1.6s infinite; }
.proj-status.published .d { background: #4ade80; }
.proj-status.published { color: var(--text); }
.proj-status.draft     { color: var(--text); }
.proj-status.series    { color: var(--text); }
.proj-status.series .d { background: #b66bff; }

/* Awards: leaderboard + ballot. */
.aw-leaderboard {
  list-style: none; padding: 0; margin: 28px 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.aw-row {
  display: grid;
  grid-template-columns: 36px 64px 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.aw-row:last-child { border-bottom: 0; }
.aw-rank {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.aw-row.top1 .aw-rank { color: #f5c84b; text-shadow: 0 0 12px rgba(245,200,75,0.35); }
.aw-row.top2 .aw-rank { color: #cfd2d7; text-shadow: 0 0 12px rgba(207,210,215,0.25); }
.aw-row.top3 .aw-rank { color: #d08a4a; text-shadow: 0 0 12px rgba(208,138,74,0.30); }
.aw-thumb {
  width: 64px; aspect-ratio: 16/10;
  border-radius: 8px; overflow: hidden;
  position: relative;
}
.aw-thumb .grain { opacity: .14; }
.aw-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw-title { font-weight: 600; letter-spacing: -.005em; }
.aw-by { font-size: 12px; color: var(--text-mute); }
.aw-votes {
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--text);
  min-width: 60px; text-align: right;
}
.aw-vote-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  font-size: 14px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.aw-vote-btn:hover { color: var(--text); border-color: var(--line-strong); }
.aw-vote-btn.on {
  background: linear-gradient(135deg, #ff6a3d 0%, #b66bff 100%);
  border-color: transparent;
  color: #fff;
}

.aw-ballot {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.aw-ballot-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.aw-ballot-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.aw-ballot-card.on {
  border-color: rgba(255,106,61,0.6);
  background: linear-gradient(180deg, rgba(255,106,61,0.06) 0%, rgba(0,0,0,0) 100%);
}
.aw-ballot-thumb {
  aspect-ratio: 16/10; position: relative;
}
.aw-ballot-thumb .grain { opacity: .14; }
.aw-ballot-thumb .check {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  color: transparent;
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
  font-size: 14px;
}
.aw-ballot-card.on .aw-ballot-thumb .check {
  background: linear-gradient(135deg, #ff6a3d 0%, #b66bff 100%);
  border-color: transparent;
  color: #fff;
}
.aw-ballot-body { padding: 14px 16px; }
.aw-ballot-title { font-weight: 600; font-size: 14px; }
.aw-ballot-meta  { font-size: 12px; color: var(--text-mute); margin-top: 4px; }

/* Awards categorical voting — section per category. */
.aw-cat-section {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px 26px;
  background: var(--bg-card);
  margin-bottom: 18px;
}
.aw-cat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.aw-cat-head-text { flex: 1 1 auto; min-width: 0; }
.aw-cat-title {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
}
.aw-cat-blurb {
  font-size: 13px; color: var(--text-mute);
  margin-top: 6px; max-width: 60ch;
}

.aw-cat-search {
  position: relative;
  margin: 14px 0 4px;
}
/* Pinned variant — sits on the right side of the category header. */
.aw-cat-search.aw-cat-search-pinned {
  flex: 0 0 auto;
  width: clamp(220px, 28vw, 300px);
  margin: 0;
}
@media (max-width: 720px) {
  .aw-cat-head { flex-direction: column; align-items: stretch; }
  .aw-cat-search.aw-cat-search-pinned { width: 100%; }
}
.aw-cat-search-ic {
  position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-mute);
  pointer-events: none;
}
.aw-cat-search-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px 10px 40px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.aw-cat-search-input::placeholder { color: var(--text-mute); }
.aw-cat-search-input:focus {
  outline: 0;
  border-color: var(--line-strong);
  background: rgba(255,255,255,0.05);
}
.aw-cat-more { margin-top: 10px; }

/* Pagination — hidden cards keep their slot until removed from layout. */
.aw-paged-out { display: none !important; }
.aw-cat-pager {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px;
  gap: 14px;
}
/* `display: flex` was overriding the [hidden] attribute, leaving the
   pager clickable on views that don't paginate. Force-hide explicitly. */
.aw-cat-pager[hidden] { display: none !important; }
.aw-pager-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.aw-pager-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--line-strong);
  color: var(--text);
}
.aw-pager-hidden { visibility: hidden; }
.aw-pager-meta {
  font-size: 12px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.aw-divider {
  margin: 26px 0 22px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.aw-divider .eyebrow { display: inline-block; }

/* Actor card variant inside the ballot grid. */
.aw-actor-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.aw-actor-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
}
.aw-actor-card .aw-ballot-body { padding: 0; }
.aw-actor-card .check {
  position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  color: transparent;
  display: grid; place-items: center;
  font-size: 12px;
}
.aw-actor-card.on .check {
  background: linear-gradient(135deg, #ff6a3d 0%, #b66bff 100%);
  border-color: transparent;
  color: #fff;
}
.aw-actor-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad-cinema);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 18px;
  flex: 0 0 auto;
}
.aw-actor-avatar.small {
  width: 40px; height: 40px;
  font-size: 14px;
}

/* Submit-flow pick cards — highlight the selected film/series. */
.submit-pick { transition: border-color .15s var(--ease), background .15s var(--ease); }
.submit-pick:hover { border-color: var(--line-strong); }
.submit-pick.on {
  border-color: rgba(255,106,61,0.6);
  background: linear-gradient(180deg, rgba(255,106,61,0.06) 0%, rgba(0,0,0,0) 100%);
}

/* Collaborator list inside the Share modal. */
.share-list {
  list-style: none;
  margin: 0; padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.share-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.share-row:last-child { border-bottom: 0; }
.share-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
  color: var(--text);
}
.share-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-name { font-weight: 600; font-size: 13.5px; }
.share-meta .small { font-size: 11px; }

/* Settings → Trash & archives row layout. */
.trash-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.trash-row:last-child { border-bottom: 0; }
.trash-row .thumb {
  width: 64px; aspect-ratio: 16/10;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.trash-row .thumb .grain { opacity: .12; }
.trash-title { font-weight: 600; font-size: 14px; }
.trash-actions { display: flex; gap: 8px; }
.trash-actions .btn.danger { color: #ff3b30; border-color: rgba(255,59,48,0.35); }
.trash-actions .btn.danger:hover { background: rgba(255,59,48,0.1); }

/* Back link floats over the banner so it doesn't get overlapped by the
   avatar (which uses margin-top: -80px to lift onto the banner). */
.channel-back {
  position: absolute;
  top: 76px;
  left: clamp(20px, 4vw, 56px);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  background: rgba(0,0,0,0.4);
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.channel-back:hover { color: #fff; background: rgba(0,0,0,0.6); }

/* Studio-style breadcrumb in the dashboard nav, used in series/season view. */
.nav .crumbs {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-dim);
  font-size: 13px;
}
.nav .crumbs > span:not([class]) { color: var(--text-mute); }
.nav .crumbs strong { color: var(--text); font-weight: 600; }
.nav .crumbs a {
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  transition: color .15s var(--ease);
}
.nav .crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Three-dot menu wrap (used for series operations; placed in toolbar). */
.series-menu-wrap {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}
.toolbar-series-menu .series-menu {
  right: 0;
  left: auto;
  transform: none;
}
.series-menu-trigger {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.series-menu-trigger:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--line-strong);
  color: var(--text);
}
.series-menu {
  /* Re-uses the .proj-menu look, but anchored from the title row. */
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  top: calc(100% + 8px);
}

/* Back-to-projects link shown in the page header when scoped to a series. */
.series-back {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  text-decoration: none;
}
.series-back:hover { color: var(--text); }

/* Series card — visual cue that it's a folder of episodes. */
.proj.is-series .thumb { position: relative; }
.proj.is-series .series-stack {
  position: absolute; right: 14px; top: 14px;
  display: flex; flex-direction: column; gap: 3px;
  pointer-events: none;
}
.proj.is-series .series-stack span {
  display: block;
  width: 28px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.65);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.proj.is-series .series-stack span:nth-child(1) { width: 28px; opacity: .9; }
.proj.is-series .series-stack span:nth-child(2) { width: 22px; opacity: .65; }
.proj.is-series .series-stack span:nth-child(3) { width: 16px; opacity: .4; }
.proj-insights-empty {
  border-top: 1px solid var(--line);
  padding: 22px 28px 24px;
}
.proj-insights-empty p { margin-top: 6px; }

/* Three-dot menu in the top-right of every project card. */
.proj { position: relative; }
.proj-menu-wrap {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
}
.proj-menu-trigger {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s var(--ease);
}
.proj-menu-trigger:hover { background: rgba(0,0,0,0.85); }
.proj-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: #15151a;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.55);
  z-index: 10;
}
.proj-menu[hidden] { display: none; }
.proj-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text-dim);
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.proj-menu button:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.proj-menu button.danger { color: #ff3b30; }
.proj-menu button.danger:hover { background: rgba(255,59,48,0.12); color: #ff3b30; }
.proj-menu button.warn   { color: #f7c948; }
.proj-menu button.warn:hover   { background: rgba(247,201,72,0.1);  color: #f7c948; }
.proj-menu button.archive { color: #ff6a3d; }
.proj-menu button.archive:hover { background: rgba(255,106,61,0.1); color: #ff6a3d; }

/* Published-card actions + insights */
.proj.is-published [data-proj-open] { cursor: pointer; }
.proj-actions { display: flex; gap: 8px; margin-top: 14px; }
.proj-actions .btn { font-size: 12px; padding: 6px 10px; }

.proj-insights {
  border-top: 1px solid var(--line);
  padding: 28px 32px 30px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,106,61,0.06) 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(65,209,255,0.05) 0%, transparent 55%);
}
/* Draft cards — progress to finish (rendered / rendering / unrendered). */
.proj-progress {
  border-top: 1px solid var(--line);
  padding: 22px 28px 24px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,106,61,0.05) 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(65,209,255,0.04) 0%, transparent 55%);
}
.proj-progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.proj-progress-pct {
  font-size: 28px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.proj-progress-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.proj-progress-fill {
  height: 100%;
  background: var(--grad-cinema);
  border-radius: 999px;
  transition: width .3s var(--ease);
}
.proj-progress-detail {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--text-mute);
}
.proj-progress-detail li {
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.proj-progress-detail .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-mute);
}
.proj-progress-detail .dot.rendered   { background: #4ade80; }
.proj-progress-detail .dot.rendering  { background: #41d1ff; animation: pulse 1.6s infinite; }
.proj-progress-detail .dot.unrendered { background: #f7c948; }
.proj-progress-empty p { margin-top: 6px; }

/* Per-stage rows (Script / Storyboard / Scenes) inside a draft card. */
.proj-stages {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 14px;
}
.proj-stage { display: flex; flex-direction: column; gap: 6px; }
.proj-stage-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.proj-stage-head .eyebrow .mute { letter-spacing: 0; text-transform: none; font-size: 11px; margin-left: 4px; }
.proj-stage-pct {
  font-size: 13px; font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.proj-stage-pct.rendering { color: #41d1ff; }
.proj-stage-bar {
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.proj-stage-fill {
  height: 100%;
  background: var(--grad-cinema);
  transition: width .3s var(--ease);
}
.proj-stage-fill.rendering {
  background: linear-gradient(90deg, #41d1ff 0%, #b66bff 100%);
  animation: pulse-bar 1.8s ease-in-out infinite;
}
@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* New-project modal — pick film vs series. */
.newproj-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 8px;
}
.newproj-kinds[hidden] { display: none; }
.newproj-kind {
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: 14px;
  display: flex; gap: 14px; align-items: flex-start;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.newproj-kind:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.newproj-kind.on {
  border-color: rgba(255,106,61,0.6);
  background: linear-gradient(180deg, rgba(255,106,61,0.06) 0%, rgba(0,0,0,0) 100%);
}
.newproj-kind-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center;
  font-size: 18px; flex: 0 0 auto;
}
.newproj-kind-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.newproj-kind-desc { font-size: 12.5px; color: var(--text-mute); margin-top: 4px; line-height: 1.4; }
.newproj-detail { margin-top: 14px; }
.newproj-detail[hidden] { display: none; }
.newproj-actions {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 16px;
}
@media (max-width: 520px) {
  .newproj-kinds { grid-template-columns: 1fr; }
}

/* "Now rendering" callout shown when a draft has a scene mid-render. */
.proj-rendering-now {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(65,209,255,0.25);
  border-radius: 12px;
  background: rgba(65,209,255,0.045);
}
.proj-rendering-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.proj-rendering-scene {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  margin-bottom: 8px;
}

@media (max-width: 720px) {
  .proj-progress { padding: 18px 22px 20px; }
}

.ins-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.ins-head .proj-status { font-size: 11px; }

/* Clickable performance time-window — cycles through windows on click. */
.ins-window-picker { position: relative; }
.ins-window-trigger {
  display: inline-flex; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit;
}
.ins-window-trigger:hover .eyebrow { color: var(--text); }

.ins-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}
.ins-hero-left .eyebrow { display: block; margin-bottom: 8px; }
.ins-hero-num {
  font-size: 52px; font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
}
.ins-hero .ins-delta { padding-bottom: 8px; white-space: nowrap; }

.ins-chart { margin-top: 18px; margin-bottom: 4px; }
.ins-chart svg { width: 100%; height: 76px; display: block; }
.ins-line {
  fill: none;
  stroke: #ff6a3d;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ins-area { stroke: none; }

.ins-stats {
  list-style: none;
  margin: 16px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--line);
}
.ins-stat {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ins-stat:last-child { border-bottom: 0; }
.ins-stat .eyebrow { color: var(--text-mute); }
.ins-stat-num {
  font-size: 22px; font-weight: 700;
  letter-spacing: -.015em; line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ins-delta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.ins-delta.up   { color: #4ade80; }
.ins-delta.down { color: #f7768e; }

@media (max-width: 720px) {
  .proj-insights { padding: 24px 22px 26px; }
  .ins-hero-num  { font-size: 44px; }
}

/* Publish-precheck dialog */
.precheck-list {
  list-style: none;
  margin: 18px 0 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.precheck-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.precheck-row:last-child { border-bottom: 0; }
.precheck-dot { width: 8px; height: 8px; border-radius: 50%; }
.precheck-dot.rendered   { background: #4ade80; }
.precheck-dot.rendering  { background: #41d1ff; animation: pulse 1.6s infinite; }
.precheck-dot.unrendered { background: #f7c948; }
.precheck-name { color: var(--text); }
.precheck-status { font-size: 11px; color: var(--text-mute); }
.precheck-status.rendered   { color: #4ade80; }
.precheck-status.rendering  { color: #41d1ff; }
.precheck-status.unrendered { color: #f7c948; }
.precheck-empty { grid-template-columns: 1fr; color: var(--text-mute); }
.precheck-actions {
  display: flex; gap: 10px;
  flex-wrap: wrap; justify-content: flex-end;
}
.precheck-actions .btn { font-size: 13px; padding: 9px 14px; }
@media (max-width: 520px) {
  .precheck-actions { flex-direction: column-reverse; }
  .precheck-actions .btn { width: 100%; }
}

.dash-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 28px;
  flex-wrap: wrap;
}
.dash-toolbar .spacer { flex: 1; }

/* Toolbar dropdown pickers (Filter / Sort). */
.dash-picker { position: relative; }
.dash-picker .dash-caret { font-size: 10px; color: var(--text-mute); margin-left: 4px; }
.dash-picker [data-filter-trigger][aria-expanded="true"] .dash-caret,
.dash-picker [data-sort-trigger][aria-expanded="true"] .dash-caret {
  color: var(--text);
}
.dash-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 12;
  list-style: none;
  margin: 0; padding: 6px;
  min-width: 200px;
  background: #15151a;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.dash-menu[hidden] { display: none; }
.dash-menu li { list-style: none; }
.dash-menu button {
  display: block; width: 100%;
  text-align: left;
  background: none; border: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-dim);
  border-radius: 8px;
  cursor: pointer;
}
.dash-menu button:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.dash-menu button.on {
  color: var(--text);
  background: rgba(255,106,61,0.08);
}

.new-proj-card {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.015);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 40px;
  min-height: 280px;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.new-proj-card:hover { background: rgba(255,255,255,0.04); border-color: var(--text-mute); }
.new-proj-card .plus {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-cinema);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 300;
  margin-bottom: 16px;
}

/* ============ pricing ============ */
.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.plans.plans-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1380px) { .plans.plans-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1180px) { .plans, .plans.plans-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .plans, .plans.plans-5 { grid-template-columns: 1fr; } }
.plans.plans-5 .plan { padding: 28px 22px; }
.plans.plans-5 .plan h3 { font-size: 19px; }

.plan {
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex; flex-direction: column;
  gap: 20px;
  position: relative;
}
.plan.featured {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--grad-cinema) border-box;
  border: 1px solid transparent;
}
.plan .ribbon {
  position: absolute; top: -10px; right: 24px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  background: var(--grad-cinema);
  color: #fff;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 700;
}
.plan h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.plan .price { font-size: 56px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.plan .price .mo { font-size: 14px; font-weight: 500; color: var(--text-mute); margin-left: 4px; letter-spacing: 0; }
.plan .desc { color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
.plan ul.feats {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px;
  margin-top: 4px;
}
.plan ul.feats li { display: flex; align-items: start; gap: 10px; color: var(--text); }
.plan ul.feats li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  flex: 0 0 14px; line-height: 1.4;
}
.plan ul.feats li.off { color: var(--text-mute); }
.plan ul.feats li.off::before { content: '—'; color: var(--text-mute); }
.plan .btn { margin-top: auto; }

/* pricing toggle */
.bill-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.bill-toggle button {
  padding: 8px 18px; font-size: 13px;
  border-radius: 999px;
  color: var(--text-dim);
}
.bill-toggle button.on { background: var(--text); color: #000; }

/* feature comparison */
.compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 56px;
  font-size: 14px;
}
.compare th, .compare td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.compare th { color: var(--text-mute); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.compare td.center { text-align: center; }
.compare .check { color: var(--accent); font-weight: 700; }
.compare .miss { color: var(--text-mute); }

/* ============ auth ============ */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .auth-page { grid-template-columns: 1fr; } }

.auth-aside {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column;
  justify-content: space-between;
  background: #04000a;
}
.auth-aside .grain { opacity: 0.08; z-index: 1; }

/* Two stacked gradient layers — we crossfade between them so the
   color flows like water from one palette to the next. */
.auth-bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 1.6s var(--ease);
  background-size: 220% 220%;
  animation: aflik-drift 36s ease-in-out infinite alternate;
}
.auth-bg-create {
  background-image:
    radial-gradient(60% 80% at 28% 22%, #7a2bb8 0%, transparent 60%),
    radial-gradient(70% 60% at 78% 70%, #2a0e6b 0%, transparent 60%),
    radial-gradient(80% 70% at 18% 90%, #4a0e7a 0%, transparent 60%);
  opacity: 1;
}
.auth-bg-watch {
  background-image:
    radial-gradient(60% 80% at 22% 24%, #1f6bd0 0%, transparent 60%),
    radial-gradient(80% 60% at 80% 60%, #0a3a6a 0%, transparent 60%),
    radial-gradient(70% 80% at 50% 100%, #0c2842 0%, transparent 60%);
  opacity: 0;
}
.auth-aside.theme-watch .auth-bg-create { opacity: 0; }
.auth-aside.theme-watch .auth-bg-watch  { opacity: 1; }

@keyframes aflik-drift {
  0%   { background-position:   0%   0%; }
  50%  { background-position:  60% 100%; }
  100% { background-position: 100%  40%; }
}

.auth-aside .brand,
.auth-aside h2,
.auth-aside .sub,
.auth-aside .footer-quote { position: relative; z-index: 2; }
.auth-aside h2 {
  position: relative; z-index: 2;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800; letter-spacing: -.04em;
  line-height: 0.95;
  text-wrap: balance;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  min-height: 2.4em;
}
.auth-aside h2.swap {
  opacity: 0;
  transform: translateY(10px);
}
.auth-aside .sub {
  position: relative; z-index: 2;
  color: var(--text-dim);
  margin-top: 20px;
  max-width: 36ch;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  min-height: 3em;
}
.auth-aside .sub.swap { opacity: 0; transform: translateY(8px); }
.auth-aside .footer-quote {
  position: relative; z-index: 2;
  font-size: 14px; color: var(--text-dim);
}
@media (max-width: 900px) { .auth-aside { display: none; } }

.auth-side {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 4vw, 56px);
}
.auth-card {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 18px;
}
.auth-card h1 {
  font-size: 32px; font-weight: 700; letter-spacing: -.025em;
}
.auth-card p.muted { font-size: 14px; }
.auth-card .row { display: flex; gap: 12px; }
.auth-card .row > * { flex: 1; }
.divider-or {
  display: flex; align-items: center; gap: 14px;
  color: var(--text-mute); font-size: 12px;
}
.divider-or::before, .divider-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn-oauth {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 16px; border-radius: 12px;
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .2s var(--ease);
}
.btn-oauth:hover { background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.btn-oauth .icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}

/* ============ player ============ */
.player {
  position: fixed; inset: 0;
  background: #000;
  z-index: 70;
  display: flex; flex-direction: column;
}
.player .stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: radial-gradient(140% 100% at 50% 40%, #2a0e6b 0%, #06000c 70%);
}
.player .stage .grain { opacity: 0.1; }
.player .stage .center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
}
.player .stage .center .frame-title {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 700; letter-spacing: -.02em;
  text-wrap: balance;
}
.player .stage .center .play-btn { width: 84px; height: 84px; }
.player .stage .center .play-btn::before { border-width: 12px 0 12px 20px; }

.player-bar-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.player-bar-top .left { display: flex; align-items: center; gap: 14px; }
.player-bar-top .ttl { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.player-bar-top .by { font-size: 12px; color: var(--text-dim); }

.player-controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  padding: 18px 28px 24px;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
}
.player-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.18); position: relative; cursor: pointer; }
.player-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 32%; background: var(--accent); border-radius: inherit; }
.player-bar .head { position: absolute; left: 32%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.player-bar .buf { position: absolute; left: 0; top: 0; bottom: 0; width: 48%; background: rgba(255,255,255,0.12); border-radius: inherit; }
.player-row {
  display: flex; align-items: center; gap: 16px;
  margin-top: 14px;
  font-size: 13px; color: var(--text-dim);
}
.player-row .icobtn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  transition: background .2s var(--ease);
}
.player-row .icobtn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.player-row .pp {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.player-row .spacer { flex: 1; }
.player-row .time { font-variant-numeric: tabular-nums; font-size: 12px; }

/* film info card under player when collapsed */
.player-meta {
  padding: 28px;
  display: flex; gap: 28px;
  border-top: 1px solid var(--line);
  background: #0a0a0c;
}
.player-meta .desc { flex: 1; }
.player-meta h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.player-meta p { color: var(--text-dim); font-size: 14px; margin-top: 8px; max-width: 70ch; line-height: 1.5; }

/* ============ channel ============ */
.channel-banner {
  position: relative;
  height: clamp(220px, 32vh, 360px);
  overflow: hidden;
}
.channel-banner .bg {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 70% 30%, #ff6a3d 0%, #4a0e1f 50%, #100007 100%);
}
.channel-banner .bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 90%, #000 100%);
}
.channel-banner .grain { opacity: 0.1; }

.channel-head {
  display: flex; align-items: end; gap: 24px;
  margin-top: -80px; position: relative; z-index: 2;
  padding-bottom: 32px;
}
.channel-avatar {
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--grad-cinema);
  border: 3px solid #000;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 800; color: #fff;
  flex: 0 0 auto;
}
.channel-info { flex: 1; }
.channel-info h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.channel-info .stats { display: flex; gap: 18px; margin-top: 10px; color: var(--text-dim); font-size: 14px; flex-wrap: wrap; }
.channel-info .stats strong { color: var(--text); font-weight: 600; }

/* ============ submit (multi-step) ============ */
.steps {
  display: flex; gap: 12px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.step {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-mute);
}
.step .num {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
  color: var(--text-dim);
}
.step.on { color: var(--text); }
.step.on .num { background: var(--grad-cinema); border: 0; color: #fff; }
.step.done .num { background: var(--accent); color: #fff; border: 0; }
.step .arrow { color: var(--text-mute); }

/* dropzone */
.dropzone {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(36px, 6vw, 80px);
  text-align: center;
  background: rgba(255,255,255,0.015);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.dropzone:hover { background: rgba(255,255,255,0.04); border-color: var(--text-mute); }
.dropzone .ic {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255,255,255,0.06);
  margin: 0 auto 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
}

/* ============ settings ============ */
.settings-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
}
@media (max-width: 800px) { .settings-grid { grid-template-columns: 1fr; gap: 32px; } }
.set-nav {
  display: flex; flex-direction: column; gap: 2px;
}
.set-nav a {
  padding: 10px 14px; border-radius: 10px;
  font-size: 14px;
  color: var(--text-dim);
}
.set-nav a:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.set-nav a.on { background: rgba(255,255,255,0.06); color: var(--text); }

.set-row {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}
.set-row:last-child { border-bottom: 0; }
.set-row .k { font-weight: 600; font-size: 15px; }
.set-row .desc { color: var(--text-dim); font-size: 13.5px; margin-top: 4px; line-height: 1.5; }
@media (max-width: 700px) { .set-row { grid-template-columns: 1fr; gap: 12px; } }

/* ============ studio: extra views ============ */
.view { display: none; flex: 1; min-height: 0; flex-direction: column; justify-content: flex-start; }
.view.on { display: flex; }
.view > .sa-toolbar { flex-shrink: 0; }

/* script panes — only one of Final Draft / Outline / Beats is on at a time */
.script.script-pane { display: none; }
.script.script-pane.on { display: block; }

/* outline list */
.outline-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 28px;
  text-align: left;
}
.outline-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 26px;
}
.outline-item .outline-num {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.outline-item h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--text);
}
.outline-item ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.outline-item li {
  color: var(--text-dim);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
  font-size: 13.5px;
}
.outline-item li::before {
  content: '';
  position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.outline-item li strong { color: var(--text); font-weight: 600; }
.outline-item { cursor: grab; transition: border-color .15s var(--ease), transform .15s var(--ease), opacity .15s var(--ease); }
.outline-item:hover { border-color: var(--line-strong); }
.outline-item.dragging { opacity: 0.4; cursor: grabbing; border-color: var(--accent); }
.outline-item li[draggable="true"] { cursor: grab; }
.outline-item li.dragging-li { opacity: 0.4; cursor: grabbing; color: var(--accent); }

/* Collaborators panel at the top of the rail */
.rail-collabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 4px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.proj-collabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.proj-collab-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad-cinema);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  cursor: default;
  text-transform: uppercase;
}
.proj-collab-avatar[title]:hover { filter: brightness(1.1); }
.proj-add-collab {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--line);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.proj-add-collab:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--line-strong);
  transform: scale(1.05);
}

/* View-scoped nav buttons */
.cuts-nav-btn,
.script-nav-btn,
.storyboard-nav-btn,
.footage-nav-btn,
.audio-nav-btn,
.casting-nav-btn,
.locations-nav-btn,
.models-nav-btn,
.agents-nav-btn,
.renders-nav-btn,
.publish-nav-btn { display: none; }
body[data-studio-view="cuts"] .cuts-nav-btn { display: inline-flex; }
body[data-studio-view="cuts"] .cuts-nav-btn[hidden] { display: none; }
body[data-studio-view="script"] .script-nav-btn { display: inline-flex; }
body[data-studio-view="storyboard"] .storyboard-nav-btn { display: inline-flex; }
body[data-studio-view="footage"] .footage-nav-btn { display: inline-flex; }
body[data-studio-view="audio"] .audio-nav-btn { display: inline-flex; }
body[data-studio-view="casting"] .casting-nav-btn { display: inline-flex; }
body[data-studio-view="locations"] .locations-nav-btn { display: inline-flex; }
body[data-studio-view="models"] .models-nav-btn { display: inline-flex; }
body[data-studio-view="agents"] .agents-nav-btn { display: inline-flex; }
body[data-studio-view="renders"] .renders-nav-btn { display: inline-flex; }
body[data-studio-view="publish"] .publish-nav-btn { display: inline-flex; }

/* Undo / Redo nav buttons — visible on script, scenes, cuts, storyboard */
.history-nav-btn { display: none; padding-left: 10px; padding-right: 10px; font-size: 16px; }
body[data-studio-view="script"] .history-nav-btn,
body[data-studio-view="scenes"] .history-nav-btn,
body[data-studio-view="cuts"] .history-nav-btn,
body[data-studio-view="storyboard"] .history-nav-btn { display: inline-flex; }
.history-nav-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Storyboard view: enforce scroll on the inner grid using the canonical
   `height:0; flex:1` pattern so it never overflows its parent. */
.view[data-name="storyboard"].on {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
.view[data-name="storyboard"].on > .sa-toolbar {
  flex: 0 0 auto !important;
}
.view[data-name="storyboard"].on > .story-grid {
  flex: 1 1 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
/* Make sure every grid row fits the tallest card's full content height */
html body[data-studio-view="storyboard"] .story-grid {
  grid-auto-rows: max-content !important;
}
/* Force every story-card body to render visibly */
html body[data-studio-view="storyboard"] .story-card > .body {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Regular (non-scene) cards: stack img + body in a flex column inside the card,
   so the card box grows to include the body and the grid row sizes correctly. */
html body[data-studio-view="storyboard"] .story-grid > .story-card {
  align-self: start;
}
html body[data-studio-view="storyboard"] .story-grid > .story-card:not(.scene-card) {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
html body[data-studio-view="storyboard"] .story-grid > .story-card:not(.scene-card) > .img {
  flex: 0 0 auto !important;
  display: block !important;
  height: auto !important;
}
html body[data-studio-view="storyboard"] .story-grid > .story-card:not(.scene-card) > .body {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: static !important;
  background: var(--bg-card) !important;
  padding: 12px 14px 14px !important;
}
html body[data-studio-view="storyboard"] .story-grid > .story-card:not(.scene-card) > .body .num,
html body[data-studio-view="storyboard"] .story-grid > .story-card:not(.scene-card) > .body .head {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Collapsed scene cards keep cover at top + body below, sized to content */
html body[data-studio-view="storyboard"] .story-grid > .scene-card:not(.expanded) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html body[data-studio-view="storyboard"] .story-grid > .scene-card:not(.expanded) > .scene-img,
html body[data-studio-view="storyboard"] .story-grid > .scene-card:not(.expanded) > .body {
  flex: 0 0 auto;
}


.cut-card { position: relative; }
.cut-card[draggable="true"] { cursor: grab; }
.cut-card.dragging { opacity: 0.4; cursor: grabbing; border-color: var(--accent); }
.cut-card-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 0;
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  z-index: 3;
  font-family: inherit;
  transition: opacity .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.cut-card:hover .cut-card-x { opacity: 1; }
.cut-card-x:hover { background: rgba(220, 38, 38, 0.85); transform: scale(1.05); }

.cut-card-dup {
  position: absolute;
  top: 8px; right: 40px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 0;
  font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  z-index: 3;
  font-family: inherit;
  transition: opacity .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.cut-card:hover .cut-card-dup { opacity: 1; }
.cut-card-dup:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); }
.cut-card [data-cut-edit] { cursor: pointer; }
.cut-card .cut-sub {
  padding: 0 14px 12px;
  font-size: 11.5px;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cut-card .cut-version {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
}

/* ── Studio · Publish view · cycle buttons ───────────────────────── */
.param-cycle {
  background: none;
  border: 1px solid transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.param-cycle:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.publish-cover {
  transition: filter .15s ease;
}
.publish-cover:hover { filter: brightness(1.08); }

/* ── Studio · Footage card remove button ─────────────────────────── */
.foot-card { position: relative; }
.foot-card-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 0;
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  z-index: 3;
  transition: opacity .15s ease, background .15s ease, transform .15s ease;
}
.foot-card:hover .foot-card-x { opacity: 1; }
.foot-card-x:hover { background: rgba(220, 38, 38, 0.85); transform: scale(1.05); }

/* ── Studio · Casting / Locations forms ─────────────────────────── */
.cast-form {
  margin: 18px 24px 0;
  padding: 18px 22px 22px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 480px;
}
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
}
.cast-card { position: relative; }
.cast-card-edit {
  position: absolute;
  top: 8px;
  right: 40px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 0;
  font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  z-index: 3;
  transition: opacity .15s ease, background .15s ease;
}
.cast-card:hover .cast-card-edit,
.loc-card:hover  .cast-card-edit { opacity: 1; }
.cast-card-edit:hover { background: rgba(255,255,255,0.18); }
.cast-actor-link { color: var(--text-dim); text-decoration: none; }
.cast-actor-link:hover { color: var(--text); text-decoration: underline; }
.loc-card { position: relative; }
.loc-card .foot-card-x { opacity: 0; }
.loc-card:hover .foot-card-x { opacity: 1; }

/* ── Studio · Models ─────────────────────────────────────────────── */
.model-card { display: flex; flex-direction: column; }
.model-primary-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(120, 110, 255, 0.18);
  border: 1px solid rgba(140, 130, 255, 0.32);
  color: #cbc4ff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  width: fit-content;
}
.model-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.model-actions .btn {
  font-size: 11.5px;
  padding: 5px 10px;
}

/* ════════════════════════════════════════════════════════════════════
   STUDIO · SCENES EDITOR (NLE-style timeline)
   Scoped to `.view.on` so we don't override the base `.view { display: none }`
   that hides inactive subpages.
   ════════════════════════════════════════════════════════════════════ */
.view.on[data-editor] {
  background: #0c0c0e;
  color: var(--text);
}

/* ── Top monitor row ── */
.ed-top {
  display: flex;
  gap: 1px;
  background: #000;
  padding: 0;
  flex: 0 0 auto;
}
.ed-monitor {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  background: #0a0a0c;
  min-width: 0;
}
.ed-monitor-program {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ed-monitor-canvas {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 380px;
  width: 100%;
  background: #000;
  overflow: hidden;
}
.ed-program-frame {
  position: absolute;
  inset: 0;
  background: var(--grad-cinema);
}
.ed-monitor-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 14px 18px;
  pointer-events: none;
  background: linear-gradient(transparent 60%, rgba(0,0,0,0.8));
}
.ed-monitor-meta {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.ed-monitor-clip {
  font-size: 14px;
  font-weight: 600;
}
.ed-monitor-tag {
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}
.ed-monitor-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #0e0e10;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}
.ed-transport {
  display: flex;
  gap: 4px;
}
.ed-trans-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  width: 32px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease;
}
.ed-trans-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.ed-trans-btn.ed-play { background: linear-gradient(135deg,#ff6a3d,#c8163a); border-color: transparent; color: #fff; width: 40px; }
.ed-trans-btn.ed-play:hover { filter: brightness(1.08); }
.ed-tc, .ed-tc-dur {
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #fff;
}
.ed-tc-dur { color: rgba(255,255,255,0.5); font-size: 12px; }

/* ── Tools strip ── */
.ed-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #131317;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex: 0 0 auto;
}
.ed-scene-title {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px;
  padding: 4px 10px !important;
  color: var(--text);
  font-weight: 500;
  font-size: 13.5px !important;
  width: 260px;
  transition: background .15s ease, border-color .15s ease;
}
.ed-scene-title:hover { border-color: rgba(255,255,255,0.08) !important; }
.ed-scene-title:focus { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.16) !important; }
.ed-tools-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.08); }
.ed-tool-group {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 2px;
}
.ed-tool-group button {
  background: transparent;
  border: 0;
  color: var(--text-mute);
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.ed-tool-group button:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.ed-tool-group button.on { background: rgba(255,255,255,0.1); color: var(--text); }
.ed-tool-help {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--text-mute);
  font-size: 13px;
  cursor: pointer;
}
.ed-tool-help:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }

/* ── Timeline ── */
.ed-timeline {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 160px 1fr;
  background: #0a0a0c;
  border-top: 1px solid rgba(255,255,255,0.04);
  min-height: 220px;
  overflow: hidden;
}
.ed-track-headers {
  background: #0e0e10;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding-top: 28px; /* matches ruler height */
  overflow-y: auto;
  overflow-x: hidden;
}
.ed-track-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: #0a0a0c;
}
.ed-track-name {
  flex: 1;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-track-controls {
  display: flex;
  gap: 2px;
}
.ed-track-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mute);
  width: 22px; height: 22px;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.ed-track-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.ed-track-btn.on   { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.16); }
.ed-track-body {
  position: relative;
  overflow: auto;
  background:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px) 0 0 / 100% 24px,
    #0a0a0c;
}
.ed-track-body.cursor-blade { cursor: crosshair; }
.ed-ruler {
  position: sticky;
  top: 0;
  height: 28px;
  z-index: 4;
  background: #0e0e10;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ed-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.06);
}
.ed-tick.major {
  background: rgba(255,255,255,0.18);
}
.ed-tick span {
  position: absolute;
  top: 5px;
  left: 4px;
  font-family: 'SF Mono','Monaco','Menlo',monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.ed-tracks {
  position: relative;
  z-index: 1;
}
.ed-track {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ed-track[data-ed-track-kind="audio"] {
  background: rgba(74, 222, 128, 0.02);
}
.ed-lane {
  position: relative;
  height: 100%;
}
.ed-clip {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 5px;
  cursor: grab;
  user-select: none;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 1px 2px rgba(0,0,0,0.3);
  transition: box-shadow .12s ease, transform .08s ease;
}
.ed-clip.skin-a { background: linear-gradient(135deg,#ff6a3d,#c8163a); }
.ed-clip.skin-b { background: linear-gradient(135deg,#41d1ff,#1a5e85); }
.ed-clip.skin-c { background: linear-gradient(135deg,#b66bff,#3a127a); }
.ed-clip.skin-d { background: linear-gradient(135deg,#fb7185,#4c0519); }
.ed-clip.skin-e { background: linear-gradient(135deg,#f7c948,#b04a00); }
.ed-clip.skin-f { background: linear-gradient(135deg,#a78bfa,#312e81); }
.ed-clip.skin-g { background: linear-gradient(135deg,#4ade80,#064e3b); }
.ed-clip.skin-h { background: linear-gradient(135deg,#94a3b8,#0f172a); }
.ed-clip-audio { opacity: 0.85; }
.ed-clip:active { cursor: grabbing; }
.ed-clip:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 2px 6px rgba(0,0,0,0.4); }
.ed-clip.selected {
  box-shadow: 0 0 0 2px #fff inset, 0 2px 8px rgba(0,0,0,0.5);
}
.ed-clip-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
}
.ed-clip-label { overflow: hidden; text-overflow: ellipsis; }
.ed-clip-dur { font-family: 'SF Mono','Monaco','Menlo',monospace; font-size: 10px; color: rgba(255,255,255,0.7); }
.ed-clip-trim {
  width: 6px;
  cursor: ew-resize;
  background: transparent;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.ed-clip-trim:hover { background: rgba(255,255,255,0.18); }
.ed-clip-trim-l { border-radius: 5px 0 0 5px; }
.ed-clip-trim-r { border-radius: 0 5px 5px 0; }

/* Playhead */
.ed-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff4d4d;
  box-shadow: 0 0 8px rgba(255,77,77,0.5);
  pointer-events: none;
  z-index: 6;
}
.ed-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 12px;
  height: 14px;
  background: #ff4d4d;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}

/* Mark in/out region */
.ed-mark-region {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 200, 60, 0.06);
  border-left: 2px solid rgba(255, 200, 60, 0.6);
  border-right: 2px solid rgba(255, 200, 60, 0.6);
  pointer-events: none;
  z-index: 3;
}

/* Markers */
.ed-marker-strip {
  position: absolute;
  left: 0;
  top: 28px;
  height: 14px;
  pointer-events: none;
  z-index: 5;
}
.ed-marker {
  position: absolute;
  top: 0;
  pointer-events: auto;
}
.ed-marker-flag {
  width: 12px;
  height: 14px;
  background: #ff8a4c;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  cursor: pointer;
}

/* ── Status bar ── */
.ed-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  background: #0e0e10;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-family: 'SF Mono','Monaco','Menlo',monospace;
  font-size: 11px;
  color: var(--text-mute);
  flex: 0 0 auto;
}
.ed-status-sep { color: rgba(255,255,255,0.18); }

/* ── Help overlay ── */
.ed-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ed-help-overlay[hidden] { display: none; }
.ed-help-panel {
  background: #1a1a1d;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 600px;
  width: 90%;
}
.ed-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.ed-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  font-size: 13px;
  color: var(--text-dim);
}
.ed-help-grid .kbd {
  display: inline-block;
  margin-right: 4px;
  padding: 2px 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  font-family: 'SF Mono','Monaco','Menlo',monospace;
  font-size: 11px;
  color: var(--text);
}

/* ── Source monitor + program monitor side-by-side ── */
.ed-monitor-source { border-right: 1px solid rgba(255,255,255,0.06); }
.ed-monitor-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 6px;
  background: #0a0a0c;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ed-monitor-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.ed-mini-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-mute);
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.ed-mini-btn:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.ed-scene-name {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 5px;
  font-family: inherit;
  outline: none;
  min-width: 100px;
}
.ed-scene-name:hover { border-color: rgba(255,255,255,0.08); }
.ed-scene-name:focus { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }

/* Make sure the duration TC doesn't collide with the right-side panel toggle. */
.ed-monitor-foot { padding-right: 36px; }
.ed-monitor-foot-source { padding-right: 14px; }

/* ── Timeline grid: headers · body · bin sidebar ── */
.ed-timeline {
  grid-template-columns: 160px 1fr 220px;
}
.ed-track-add-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ed-track-add {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.12);
  color: var(--text-mute);
  font: inherit;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ed-track-add:hover { background: rgba(255,255,255,0.06); color: var(--text); border-color: rgba(255,255,255,0.18); }
.ed-track-add-plus {
  font-size: 16px;
  font-weight: 600;
  padding: 4px 8px;
}
.ed-track-add-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 8px; right: 8px;
  background: #1a1a1d;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.ed-track-add-menu[hidden] { display: none; }
.ed-track-add-menu button {
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}
.ed-track-add-menu button:hover { background: rgba(255,255,255,0.08); }
.ed-track-x { color: rgba(255,77,77,0.7); }
.ed-track-x:hover { background: rgba(220, 38, 38, 0.6); color: #fff; border-color: rgba(220, 38, 38, 0.7); }
.ed-track-name[contenteditable="true"], .ed-track-name.editing {
  background: rgba(255,255,255,0.06);
  outline: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  padding: 2px 5px;
  cursor: text;
}

/* ── Audio waveform inside clips ── */
.ed-clip-wave {
  position: absolute;
  inset: 4px 6px 16px 6px;
  pointer-events: none;
  z-index: 1;
}
.ed-clip-wave svg { width: 100%; height: 100%; display: block; }

/* ── Audio clip · volume rubber band (keyframes) ──
   Container ignores pointer events so empty space passes through to the
   clip-body drag. Only the curve path (with a transparent hit-area) and
   the keyframe dots intercept. */
.ed-clip-vol {
  position: absolute;
  inset: 4px 6px 16px 6px;
  z-index: 3;
  pointer-events: none;
}
.ed-clip-vol svg { display: block; overflow: visible; pointer-events: none; }
.ed-vol-line {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
  pointer-events: none;
}
.ed-vol-hit {
  pointer-events: stroke;
  cursor: copy;
}
.ed-clip-vol circle[data-vol-kf] {
  fill: #ffd166;
  stroke: rgba(0,0,0,0.55);
  stroke-width: 1;
  cursor: ns-resize;
  pointer-events: auto;
  transition: r .12s ease, fill .12s ease;
}
.ed-clip-vol circle[data-vol-kf]:hover { r: 5; fill: #fff; }
.ed-clip-vol circle[data-vol-kf]:active { r: 5.5; }
.ed-clip-audio .ed-clip-body {
  position: relative;
  z-index: 2;
}

/* ── Cross-dissolve overlay ── */
.ed-clip-xfade {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.18), rgba(255,255,255,0.18) 4px, rgba(255,255,255,0.05) 4px, rgba(255,255,255,0.05) 8px);
  z-index: 0;
  pointer-events: none;
}

/* ── Color label tag bar on a clip ── */
.ed-clip-label-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 3;
  pointer-events: none;
}

/* Inline-rename clip label ── */
.ed-clip-label[contenteditable="true"], .ed-clip-label.editing {
  background: rgba(0,0,0,0.5);
  outline: 1px solid rgba(255,255,255,0.4);
  border-radius: 3px;
  padding: 1px 4px;
  cursor: text;
}

/* ── Bin sidebar ── */
.ed-bin {
  background: #0a0a0c;
  border-left: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ed-bin-head {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ed-bin-head .eyebrow { font-size: 10.5px; }
.ed-bin-search {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 5px;
  outline: none;
}
.ed-bin-search:focus { border-color: rgba(255,255,255,0.18); }
.ed-bin-list {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ed-bin-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 6px;
  cursor: grab;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  transition: background .1s ease, border-color .1s ease;
}
.ed-bin-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.ed-bin-item:active { cursor: grabbing; }
.ed-bin-thumb {
  width: 40px;
  height: 28px;
  border-radius: 4px;
  flex: 0 0 auto;
  background: var(--grad-cinema);
}
.ed-bin-thumb.skin-a { background: linear-gradient(135deg,#ff6a3d,#7a1f1f); }
.ed-bin-thumb.skin-b { background: linear-gradient(135deg,#b66bff,#1d0d3a); }
.ed-bin-thumb.skin-c { background: linear-gradient(135deg,#41d1ff,#0a3a55); }
.ed-bin-thumb.skin-d { background: linear-gradient(135deg,#3b82f6,#0a1f44); }
.ed-bin-thumb.skin-e { background: linear-gradient(135deg,#f7c948,#b04a00); }
.ed-bin-thumb.skin-f { background: linear-gradient(135deg,#a78bfa,#312e81); }
.ed-bin-thumb.skin-g { background: linear-gradient(135deg,#4ade80,#064e3b); }
.ed-bin-thumb.skin-h { background: linear-gradient(135deg,#94a3b8,#0f172a); }
.ed-bin-meta { min-width: 0; flex: 1; }
.ed-bin-name { font-size: 11.5px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-bin-tail { font-size: 10.5px; color: var(--text-mute); }

/* ── Marker editor popover ── */
.ed-marker-pop {
  position: absolute;
  z-index: 50;
  background: #1a1a1d;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.ed-marker-pop[hidden] { display: none; }
.ed-marker-pop input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  outline: none;
  font-family: inherit;
}
.ed-marker-pop input:focus { border-color: rgba(255,255,255,0.22); }
.ed-marker-colors { display: flex; gap: 4px; }
.ed-marker-colors button {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  cursor: pointer;
}
.ed-marker-colors button:hover { border-color: #fff; transform: scale(1.1); }
.ed-marker-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Storyboard frame rename inline editing */
.story-card .num.editing,
.story-card .head.editing {
  background: rgba(255,255,255,0.06);
  outline: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 1px 5px;
  cursor: text;
}

/* ── Studio rail resize handle (sibling of .sa-rail inside .studio-app).
   `.sa-rail` has overflow-y:auto which the browser silently promotes
   overflow-x to auto for, clipping any inner handle. Mounting as a
   sibling sidesteps that. */
.studio-app { position: relative; }
.ed-rail-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  /* sit at the rail's right edge using the same CSS variable. */
  left: var(--studio-rail-width, 240px);
  transform: translateX(-3px);
  width: 6px;
  cursor: ew-resize;
  z-index: 35;
  transition: background .15s ease;
}
.ed-rail-resize:hover, body.ed-resizing .ed-rail-resize { background: rgba(255,106,61,0.5); }
body.ed-resizing { cursor: ew-resize !important; user-select: none; }
body.ed-resizing-v { cursor: ns-resize !important; user-select: none; }
@media (max-width: 800px) { .ed-rail-resize { display: none; } }

/* ── Studio rail compression modes.
   compress-sections  → hide item labels (icons + section headers visible)
   compress-icons     → hide everything except icons.
   The icon stays in its original left-aligned slot — we don't switch to
   centered alignment so it doesn't visually jump when text disappears. */
.sa-rail.compress-sections .item span:not(.ic),
.sa-rail.compress-icons    .item span:not(.ic) {
  display: none;
}
.sa-rail.compress-icons .group { display: none; }
.sa-rail.compress-sections .item .ic,
.sa-rail.compress-icons    .item .ic {
  flex: 0 0 auto;
}

/* Rail icon chips — keep glyphs (text characters AND inline SVGs) at a
   uniform brightness so the rail doesn't read as half-grey, half-white. */
.sa-rail .item .ic {
  color: var(--text) !important;
  font-size: 12px;
  line-height: 1;
}
.sa-rail .item .ic svg {
  width: 14px;
  height: 14px;
  display: block;
  color: var(--text);
}

/* ── Track-headers resize handle (right edge of V1/V2 column) ── */
.ed-track-headers { position: relative; overflow-x: visible !important; }
.ed-th-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 8;
  transition: background .15s ease;
}
.ed-th-resize:hover, body.ed-resizing .ed-th-resize { background: rgba(255,106,61,0.5); }

/* ── Generate overlay (covers timeline area when active).
   When generating: status bar collapses; the timeline element is JS-
   moved into the trackview slot so don't hide it. The source monitor
   needs an explicit `[hidden]` rule because its base `display: flex`
   would otherwise override the HTML hidden attribute. */
[data-editor].generating .ed-status { display: none; }
.ed-monitor[hidden] { display: none !important; }
[data-editor]:not(.generating) [data-ed-trackview] { display: none; }

/* Track-view monitor (replaces the source monitor while generating).
   Houses the relocated full timeline (.ed-timeline) so every track / clip
   interaction stays available; the bottom timeline area is replaced by
   the prompt panel. */
.ed-monitor-trackview .ed-monitor-canvas {
  background: linear-gradient(180deg, #0e0e10, #08080a);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  aspect-ratio: auto;
  max-height: none;
  overflow: hidden;
}
.ed-trackview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ed-trackview-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
/* When .ed-timeline is moved into here it should fill the body. */
.ed-trackview-body > .ed-timeline {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}
.ed-gen-overlay {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: linear-gradient(to bottom, #0a0a0c, #0e0e10);
  overflow: auto;
}
.ed-gen-overlay[hidden] { display: none; }
.ed-gen-panel {
  width: 100%;
  max-width: 760px;
  margin: 24px auto;
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ed-gen-head .eyebrow { font-size: 12px; letter-spacing: 0.16em; color: var(--accent); }
.ed-gen-thread {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 38vh;
}
.ed-gen-msg {
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 82%;
  white-space: pre-wrap;
}
.ed-gen-msg-user { align-self: flex-end; background: var(--grad-cinema); color: #fff; }
.ed-gen-msg-agent { align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--text); }
.ed-gen-attached {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ed-gen-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 12px;
}
.ed-gen-pill button {
  background: transparent; border: 0; color: var(--text-mute);
  cursor: pointer; padding: 0; font-size: 12px;
}
.ed-gen-input-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ed-gen-textbox {
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  outline: none;
  width: 100%;
  min-height: 80px;
}
.ed-gen-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ed-gen-select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.ed-gen-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(120, 110, 255, 0.06);
  border: 1px solid rgba(140, 130, 255, 0.2);
  border-radius: 10px;
}
.ed-gen-result-actions { display: flex; gap: 10px; }

/* Highlight Generate / Inspector / Bin toolbar buttons when active */
.ed-tool-group button[data-ed-toggle="generate"].on,
.ed-tool-group button[data-ed-toggle="inspector"].on {
  background: var(--grad-cinema);
  color: #fff;
}

/* ── Cut card · Publish button — neutral by default, accent on hover/click.
   No border (the previous transparent-border state caused subpixel edge
   glitches when the gradient took over the background). Pill-rounded. */
.cut-card { padding-bottom: 0; }
.cut-card-publish {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 20px);
  margin: 4px 10px 10px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  background-clip: padding-box;
  color: var(--text-mute);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.cut-card-publish:hover,
.cut-card-publish:focus-visible,
.cut-card-publish:active {
  background: var(--grad-cinema);
  color: #fff;
}

/* ── Publish · cut label / back button row ── */
[data-publish] .lib-toolbar { padding: 12px 22px; border-bottom: 1px solid rgba(255,255,255,0.04); }

/* ── Script · Notes mode + Assistant toggle button ── */
.script-tools button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.script-tools button:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.script-tools button.on {
  background: var(--grad-cinema);
  color: #fff;
  border-color: transparent;
}

/* Script note text — grey + subtle italic to distinguish from dialogue. */
.script-editable span[style*="color: rgb(155"], .script-editable .script-note {
  color: #9ba0aa !important;
  font-style: italic;
}

/* Notes toggle is only useful on the Final Draft pane; hide on Outline/Beats. */
[data-script-view] [data-script-mode-btn].on[data-script-mode-btn="beats"] ~ .script-tools [data-script-notes-toggle],
[data-script-view] [data-script-mode-btn].on[data-script-mode-btn="outline"] ~ .script-tools [data-script-notes-toggle] {
  display: none;
}
/* Defensive: also hide via a body data-attr the script JS can set. */
[data-script-view][data-script-pane-active="beats"]   [data-script-notes-toggle],
[data-script-view][data-script-pane-active="outline"] [data-script-notes-toggle] {
  display: none;
}

/* When the assistant pop-out is open, hide the toolbar toggle button —
   user closes via the side panel's minimize handle. */
body.script-assistant-open [data-script-assistant-toggle] {
  display: none;
}

/* ── Monitor row height resize handle ── */
.ed-top-resize {
  height: 6px;
  cursor: ns-resize;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .15s ease;
  flex: 0 0 auto;
}
.ed-top-resize:hover { background: rgba(255,106,61,0.4); }
.ed-top { flex: 0 0 auto; min-height: 140px; }

/* ── Fullscreen button on monitors ── */
.ed-monitor-canvas { position: relative; }
.ed-fs-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.ed-monitor-canvas:hover .ed-fs-btn { opacity: 1; }
.ed-fs-btn:hover { background: rgba(0,0,0,0.8); }
/* Source-monitor floating insert/overwrite buttons inside the canvas */
.ed-source-actions {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 4;
  opacity: 0;
  transition: opacity .15s ease;
}
.ed-monitor-source .ed-monitor-canvas:hover .ed-source-actions { opacity: 1; }
/* Fallback fullscreen overlay (when browser FS API unavailable) */
.ed-fs-fallback {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: #000 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}
.ed-fs-fallback .ed-fs-btn { position: fixed; top: 16px; right: 16px; }

/* ── Bin: tabs, minimize, hide ── */
.ed-bin {
  position: relative;
  transition: width .18s ease;
}
.ed-bin.hidden { display: none; }
.ed-bin.mini .ed-bin-list,
.ed-bin.mini .ed-bin-search,
.ed-bin.mini [data-ed-bin-empty] { display: none; }
.ed-bin.mini .ed-bin-tabs button[data-ed-bin-tab] { display: none; }
.ed-bin.mini { padding: 6px 0; align-items: center; }
.ed-bin-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.ed-bin-tabs button[data-ed-bin-tab] {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.ed-bin-tabs button[data-ed-bin-tab]:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.ed-bin-tabs button[data-ed-bin-tab].on { background: rgba(255,255,255,0.1); color: var(--text); border-color: rgba(255,255,255,0.12); }
.ed-bin-mini {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-mute);
  border-radius: 4px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  cursor: pointer;
}
.ed-bin-mini:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* ── In-app confirm modal ── */
.aflik-confirm .modal-panel {
  max-width: 460px;
}
.btn-danger {
  background: linear-gradient(135deg, #ef4444, #991b1b);
  color: #fff;
  border: 0;
}
.btn-danger:hover { filter: brightness(1.08); }

/* ── Scenes editor right-side Inspector ── */
.scenes-inspector {
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 13px;
}
.scenes-inspector h4 { margin: 0; font-size: 14px; }
.ins-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ins-section-head .eyebrow { font-size: 10.5px; }
.ins-section + .ins-section { padding-top: 18px; border-top: 1px solid var(--line); }
.ins-empty p { font-size: 12.5px; line-height: 1.5; }
.ins-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ins-field .lab {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 500;
}
.ins-field .input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 6px;
  font-family: inherit;
  outline: none;
  width: 100%;
}
.ins-field .input:focus { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); }
.ins-field textarea.input { resize: vertical; min-height: 60px; }
.ins-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.ins-row-2 .ins-field { margin-bottom: 0; }
.ins-color-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ins-color-row button {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  cursor: pointer;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-mute);
  transition: transform .12s ease, border-color .12s ease;
}
.ins-color-row button:hover { transform: scale(1.12); border-color: #fff; }
.ins-color-row button.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.2); }
.ins-color-row .ins-color-clear { background: rgba(255,255,255,0.06); }
.ins-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ins-actions .btn {
  padding: 5px 10px;
  font-size: 11.5px;
}
.ins-info-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-dim);
}
.ins-info-row span:last-child {
  color: var(--text);
  font-family: 'SF Mono','Monaco','Menlo',monospace;
  font-size: 11.5px;
}

/* ──────────────────────────────────────────────────────────────────
   Studio · Agents view
   Editorial header, tab strip, marketplace grid, connectors grid,
   pipelines, guardrails. The visual language mirrors the rest of the
   site (eyebrow + masthead-rule + italic-serif subtitles available
   via the editorial classes; here we lean on the existing
   `.h-3` / sans titles since the studio is more utilitarian).
   ──────────────────────────────────────────────────────────────────*/
[data-agents] .agents-hero {
  padding: 36px 28px 16px;
}
[data-agents] .agents-hero .eyebrow {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1.5px solid;
  border-image: linear-gradient(135deg, #ff6a3d 0%, #b66bff 50%, #41d1ff 100%) 1;
}
[data-agents] .agents-title {
  font-family: 'New York', 'Times New Roman', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 10px 0 8px;
  color: var(--text);
}
[data-agents] .agents-lede {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 70ch;
}

[data-agents] .agents-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow-x: auto;
  scrollbar-width: none;
}
[data-agents] .agents-tabs::-webkit-scrollbar { display: none; }
[data-agents] .agents-tabs button {
  background: transparent;
  border: 0;
  color: var(--text-mute);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .15s ease, border-color .15s ease;
}
[data-agents] .agents-tabs button:hover { color: var(--text); }
[data-agents] .agents-tabs button.on {
  color: var(--text);
  border-bottom-color: #b66bff;
}
[data-agents] .agents-tabs button .num {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(182,107,255,0.18);
  color: #d8c4ff;
}

[data-agents] .agents-pane { padding: 24px 28px 40px; }
[data-agents] .agents-pane[hidden] { display: none; }

[data-agents] .agents-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
[data-agents] .agents-pane-head h3 {
  font-family: 'New York', 'Times New Roman', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  margin: 6px 0 4px;
  color: var(--text);
  letter-spacing: -0.01em;
}
[data-agents] .agents-pane-head .eyebrow {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1.5px solid;
  border-image: linear-gradient(135deg, #ff6a3d, #b66bff, #41d1ff) 1;
}
[data-agents] .agents-pane-lede {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 72ch;
}

/* Marketplace grid */
[data-agents] .agents-marketplace {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.agent-mkt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.agent-mkt-card:hover {
  border-color: rgba(182,107,255,0.35);
  transform: translateY(-2px);
}
.agent-mkt-card .agent-mkt-glow {
  position: absolute; top: -50%; right: -30%;
  width: 240px; height: 240px;
  background: var(--agent-tint, linear-gradient(135deg, #ff6a3d, #b66bff));
  filter: blur(72px); opacity: 0.16; pointer-events: none;
}
.agent-mkt-head {
  display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 1;
}
.agent-mkt-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 16px;
  background: var(--agent-tint, linear-gradient(135deg, #ff6a3d, #b66bff));
  color: #fff;
}
.agent-mkt-name {
  font-size: 14.5px; font-weight: 600;
  color: var(--text);
}
.agent-mkt-cat {
  font-size: 11px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.agent-mkt-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  position: relative; z-index: 1;
  flex: 1;
}
.agent-mkt-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-mute);
  position: relative; z-index: 1;
}
.agent-mkt-meta strong { color: var(--text); font-weight: 600; }
.agent-mkt-actions {
  display: flex; gap: 8px;
  position: relative; z-index: 1;
}

/* Connectors */
[data-agents] .connectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.connector-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.connector-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.connector-card.on {
  background: rgba(74,222,128,0.06);
  border-color: rgba(74,222,128,0.28);
}
.connector-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700; color: #fff;
  background: var(--conn-tint, #444);
  flex: 0 0 auto;
  font-size: 12px;
}
.connector-body { flex: 1; min-width: 0; }
.connector-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.connector-sub { font-size: 11px; color: var(--text-mute); }
.connector-status {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.connector-status.connected {
  background: rgba(74,222,128,0.16); color: #5be089;
}
.connector-status.available {
  background: rgba(255,255,255,0.06); color: var(--text-mute);
}

/* Pipelines */
[data-agents] .pipelines-list {
  display: flex; flex-direction: column; gap: 14px;
}
.pipeline-card {
  padding: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
}
.pipeline-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.pipeline-card-title { font-size: 15px; font-weight: 600; color: var(--text); }
.pipeline-flow {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.pipeline-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
}
.pipeline-step.trigger {
  background: linear-gradient(135deg, rgba(255,106,61,0.20), rgba(182,107,255,0.20));
  border-color: rgba(182,107,255,0.30);
}
.pipeline-step.terminal {
  background: rgba(74,222,128,0.12);
  border-color: rgba(74,222,128,0.32);
  color: #b5f0c5;
}
.pipeline-arrow { color: var(--text-mute); font-size: 11px; }

/* Guardrails grid */
[data-agents] .guardrails-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.guardrail-card {
  padding: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
.guardrail-card .eyebrow {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1.5px solid;
  border-image: linear-gradient(135deg, #ff6a3d, #b66bff, #41d1ff) 1;
}
.guardrail-card .param {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.guardrail-card .param:last-child { border-bottom: 0; }

/* On the desktop / Tauri shell the studio window is narrower than a
   full browser. Make sure the marketplace + guardrails grid don't
   over-stretch their cards. */
@media (max-width: 1100px) {
  [data-agents] .agents-pane { padding: 18px 18px 32px; }
  [data-agents] .agents-tabs { padding: 8px 14px 0; }
}

[data-agents] .agents-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 22px;
}
.agent-row {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: background .15s ease, border-color .15s ease;
}
.agent-row.on { background: rgba(120, 110, 255, 0.05); border-color: rgba(140, 130, 255, 0.2); }
.agent-row.dragging { opacity: 0.5; }
.agent-grip {
  cursor: grab;
  color: var(--text-mute);
  font-size: 13px;
  letter-spacing: -3px;
}
.agent-grip:active { cursor: grabbing; }
.agent-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.agent-info { min-width: 0; }
.agent-name { font-size: 13.5px; font-weight: 600; }
.agent-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.agent-x {
  background: transparent;
  border: 0;
  color: var(--text-mute);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.agent-x:hover { background: rgba(220, 38, 38, 0.2); color: #fff; }

/* ── Studio · Stage (actor tasks) ── */
[data-stage] { background: #0a0a0c; min-height: 100%; }
.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 22px;
}
.stage-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stage-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stage-card-kind {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.stage-card-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.stage-status-open      { background: rgba(120, 110, 255, 0.18); color: #cbc4ff; }
.stage-status-pending   { background: rgba(247, 201, 72, 0.18);  color: #f7c948; }
.stage-status-approved  { background: rgba(74, 222, 128, 0.18);  color: #4ade80; }
.stage-status-revise    { background: rgba(251, 113, 133, 0.18); color: #fb7185; }
.stage-status-scrap     { background: rgba(255, 255, 255, 0.04); color: var(--text-mute); }
.stage-card-title { margin: 0; font-size: 15px; font-weight: 600; }
.stage-card-instr { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.stage-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-mute);
}
.stage-card-meta span + span::before { content: '·'; margin-right: 8px; color: rgba(255,255,255,0.2); }
.stage-card-routed {
  color: #4ade80 !important;
  font-weight: 600;
}
.stage-card-noroute { color: var(--text-mute) !important; font-style: italic; }
.stage-card-actions { display: flex; gap: 6px; margin-top: 4px; }

/* Detail panel — takes over the entire Stage canvas like a project drill-in,
   replacing the toolbar + grid + empty state until the user clicks Back. */
[data-stage].viewing-detail .lib-toolbar,
[data-stage].viewing-detail .stage-grid,
[data-stage].viewing-detail [data-stage-empty] { display: none !important; }
.stage-detail {
  display: flex;
  flex-direction: column;
  padding: 22px 32px 32px;
  overflow-y: auto;
  height: 100%;
}
.stage-detail[hidden] { display: none; }
.stage-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.stage-detail h2 { margin: 0 0 8px; font-size: 20px; }
.stage-takes { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.stage-take {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px;
}
.stage-take-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; margin-bottom: 8px; }
.stage-take-media { width: 100%; max-height: 280px; background: #000; border-radius: 6px; }
.stage-take-rev,
.stage-take-actor {
  margin-top: 8px;
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--accent);
}
.stage-take-actor { border-left-color: rgba(74, 222, 128, 0.6); }
.stage-record,
.stage-review {
  margin-top: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.stage-record-row { display: flex; align-items: center; gap: 10px; }
.stage-preview { width: 100%; max-height: 280px; background: #000; border-radius: 6px; margin-top: 10px; }

/* ── Canvas-scoped task form overlay.
   Pops up over the active studio view (Scenes / Storyboard / Stage) without
   covering the rail or top nav. The backdrop fills only .sa-canvas. */
.task-form-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-form-overlay[hidden] { display: none; }
.task-form-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.task-form-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 92%);
  max-height: 86vh;
  overflow-y: auto;
  margin: 0 !important;
  background: #1a1a1d;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px 26px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.task-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
/* Toggle row inside the task form — matches the site's settings rows. */
.task-form-panel .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.task-form-panel .toggle-row .k {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.task-form-panel .toggle-row .desc {
  color: var(--text-mute);
  font-size: 12px;
  margin-top: 3px;
  line-height: 1.4;
}
.task-form-panel .toggle-row .toggle { flex: 0 0 auto; cursor: pointer; }
/* The studio canvas already creates a stacking context via overflow:hidden,
   so absolute children land relative to it. Just ensure position:relative. */
.sa-canvas { position: relative; }

/* Storyboard · "+ Task" button on each frame */
.story-card { position: relative; }
.story-card-task {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 4;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease;
}
.story-card:hover .story-card-task { opacity: 1; }
.story-card-task:hover { background: var(--grad-cinema); border-color: transparent; }

/* Storyboard frame task strip (always visible at bottom when tasks exist). */
.story-card-task-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.story-task-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-task-chip span:not(.dot) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.story-task-chip:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.story-task-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.story-task-chip.stage-status-open    .dot { background: #cbc4ff; }
.story-task-chip.stage-status-pending .dot { background: #f7c948; }
.story-task-chip.stage-status-approved .dot { background: #4ade80; }
.story-task-chip.stage-status-revise   .dot { background: #fb7185; }
.story-task-chip.stage-status-scrap    .dot { background: rgba(255,255,255,0.3); }

/* ── Rail · Stage notification badge ── */
.sa-rail .item { position: relative; }
.rail-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg,#ff6a3d,#c8163a);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.sa-rail.compress-icons .rail-badge { top: 2px; right: 2px; }

/* ── View-as-Actor mode (test toggle in nav).
   Hides Scenes / Cuts and the Pipeline section. Library section stays
   visible for the actor (their Footage + Audio); Casting / Locations
   inside Library are hidden. */
body.viewas-actor .sa-rail [data-view="scenes"],
body.viewas-actor .sa-rail [data-view="cuts"],
body.viewas-actor .sa-rail [data-view="casting"],
body.viewas-actor .sa-rail [data-view="locations"],
body.viewas-actor .sa-rail [data-section="pipeline"] { display: none; }
/* Read-only feel on Script + Storyboard for actors. */
body.viewas-actor [data-script-view] [data-script-action],
body.viewas-actor [data-script-view] [data-add-beat],
body.viewas-actor [data-script-view] [data-add-act],
body.viewas-actor [data-script-view] [data-empty-action],
body.viewas-actor [data-script-view] [data-script-notes-toggle],
body.viewas-actor [data-script-view] [data-script-assistant-toggle],
body.viewas-actor .view[data-name="storyboard"] [data-add-frame],
body.viewas-actor .story-card-x,
body.viewas-actor .story-card-task,
body.viewas-actor [data-stage] [data-stage-add],
body.viewas-actor [data-footage] [data-foot-generate] { display: none !important; }
body.viewas-actor .script-editable { pointer-events: none; }

/* ── Center subpage segmented button clusters (Footage / Audio / Stage /
   Storyboard / Script / etc.) regardless of view-as state. The .seg sits
   absolute-centered so siblings (description text on the left, action
   buttons on the right) keep their natural flex-flow positions. */
.sa-toolbar { position: relative; }
/* The center-absolute trick applies only when the toolbar holds a
   single `.seg` — used by the Scenes / Storyboard / Stage views. The
   Script toolbar has TWO segs (mode tabs + tools row) and uses normal
   flex flow instead, so the segs don't stack on top of each other. */
.sa-toolbar:not(.script-toolbar) > .seg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.script-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .sa-toolbar > .seg { position: static; transform: none; }
}

/* ── Studio top-bar "view as" picker. */
.studio-viewas {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
}
.studio-viewas:focus { border-color: rgba(255,255,255,0.18); }

/* Scenes · timeline placeholder clip (open task) */
.ed-clip[data-task-placeholder="true"], .ed-clip.ed-clip-task {
  background: repeating-linear-gradient(45deg, rgba(120, 110, 255, 0.45), rgba(120, 110, 255, 0.45) 6px, rgba(120, 110, 255, 0.25) 6px, rgba(120, 110, 255, 0.25) 12px) !important;
  border: 1px dashed rgba(140, 130, 255, 0.6);
}

/* ── Script empty-state drop zones + starter editor ── */
.studio-empty-drop {
  border: 1.5px dashed rgba(255,255,255,0.12);
  border-radius: 12px;
  transition: background .15s ease, border-color .15s ease;
}
.studio-empty-drop.drop-target,
[data-script-pane].drop-target {
  background: rgba(255,106,61,0.05);
  border-color: rgba(255,106,61,0.4);
}
.script-editable {
  outline: none;
  cursor: text;
  min-height: 320px;
  padding: 14px 0;
}
.script-editable:focus { outline: none; }

/* ── Footage · generate inline form. Fills the library area width. ── */
.foot-gen-form {
  margin: 18px 24px 0;
  padding: 18px 22px 22px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.foot-gen-prompt {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  outline: none;
  resize: vertical;
  min-height: 70px;
}
.foot-gen-prompt:focus { border-color: rgba(255,255,255,0.2); }
.foot-gen-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.foot-gen-field { display: flex; flex-direction: column; gap: 4px; }
.foot-gen-field .lab {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.foot-gen-field .input {
  font-size: 13px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: var(--text);
  outline: none;
}

/* Footage drop target */
.view[data-name="footage"] .lib-grid.drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
}
.lib-card[hidden] { display: none !important; }
.cut-card .cut-title[contenteditable="true"] {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  border-radius: 4px;
  outline: none;
  cursor: text;
  padding: 1px 6px;
}

/* All studio views — keep canvas content flush to the top, no inherited spacing */
section.sa-canvas {
  align-items: stretch !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  padding: 0 !important;
}
section.sa-canvas > .view.on {
  flex: 1 1 0 !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Cuts-specific overrides (kept for ordering parity) */
body[data-studio-view="cuts"] section.sa-canvas {
  align-items: stretch !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  padding: 0 !important;
}
body[data-studio-view="cuts"] section.sa-canvas > .view.on {
  flex: 1 1 0 !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.view[data-name="cuts"].on {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
}
.view[data-name="cuts"] > .cut-strip,
.view[data-name="cuts"] > .sa-toolbar {
  flex-shrink: 0;
  margin: 0;
}
.cuts-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 22px 28px;
  margin: 0;
}
.cuts-content[hidden] { display: none !important; }

/* Cut scene-picker (inline) — uses .lib-card grid styling */
.cut-picker-inline[hidden] { display: none; }
.cut-picker-inline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.cut-scene-card {
  position: relative;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0;
  transition: border-color .15s var(--ease), transform .15s var(--ease), opacity .15s var(--ease);
}
.cut-scene-card:hover { transform: translateY(-1px); }
.cut-scene-card .cut-scene-name {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 4px;
  line-height: 1.35;
  white-space: normal;
  padding: 0 2px 2px;
}
.cut-scene-card[hidden] { display: none; }
.cut-picker-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-cinema);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  z-index: 2;
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Selected-scenes strip above the Cuts toolbar */
.cut-strip[hidden] { display: none !important; }
.cut-strip {
  order: -2;
  border-bottom: 1px solid var(--line);
  padding: 8px 22px;
  flex-shrink: 0;
  margin: 0;
}
.view[data-name="cuts"] > .sa-toolbar { order: -1; }
.cuts-content { order: 0; }
.cuts-empty[hidden],
[data-cuts-list][hidden],
.cut-picker-inline[hidden] { display: none !important; }
.cut-strip-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  align-items: flex-start;
}
.cut-strip-rail::-webkit-scrollbar { height: 6px; }
.cut-strip-rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.cut-strip-empty {
  font-size: 12.5px;
  color: var(--text-mute);
}
.cut-strip-tile {
  flex: 0 0 auto;
  width: 150px;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: transform .15s var(--ease);
}
.cut-strip-tile:hover { transform: translateY(-1px); }
.cut-strip-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.cut-strip-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 6px;
}
.cut-strip-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--grad-cinema);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  z-index: 2;
}

/* Cuts empty state */
.cuts-empty {
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 60px 24px;
  text-align: center;
  margin-top: 16px;
}
.cuts-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  font-size: 18px;
}
.cuts-empty-h { font-size: 15px; font-weight: 600; color: var(--text); }
.cuts-empty-sub { font-size: 13px; color: var(--text-mute); max-width: 460px; margin: 6px auto 0; line-height: 1.55; }
.outline-num-label, .outline-num-sep, .bullet-num, .bullet-sep {
  user-select: none;
  -webkit-user-select: none;
}
.bullet-num, .bullet-sep, .bullet-text { display: inline; }
.outline-num-name[contenteditable="true"],
.bullet-text[contenteditable="true"] {
  display: inline-block;
}
.outline-item li .bullet-num { color: var(--text); font-weight: 600; }
.outline-item li .bullet-text strong { color: var(--text); font-weight: 600; }
.outline-num-name[contenteditable="true"],
.outline-item h3[contenteditable="true"],
.bullet-text[contenteditable="true"] {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  border-radius: 4px;
  outline: none;
  cursor: text;
  padding: 2px 6px;
}

/* beats board (Save the Cat-style columns) */
.beats-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  min-width: 0;
}
body.studio-side-collapsed .beats-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1100px;
}
@media (max-width: 600px) {
  .beats-board { grid-template-columns: 1fr; }
}
.beats-col {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.beats-col-h {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-mute);
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.beats-col-h-label { flex: 1; min-width: 0; outline: none; }
.col-del {
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
  font-family: inherit;
}
.beats-col:hover .col-del { opacity: 1; }
.col-del:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.beat-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  transition: border-color .15s var(--ease), transform .15s var(--ease);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.beat-del {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
  font-family: inherit;
}
.beat-card:hover .beat-del { opacity: 1; }
.beat-del:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.beat-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.beat-card[draggable="true"] { cursor: grab; }
.beat-card.dragging {
  opacity: 0.4;
  cursor: grabbing;
  border-color: var(--accent);
}
.beats-col-add.drag-over {
  border-color: var(--accent);
  background: rgba(255,255,255,0.04);
  color: var(--text);
}
.beat-card .beat-tag {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  font-weight: 600;
  outline: none;
  border-radius: 4px;
}
.beat-card .beat-body {
  outline: none;
  border-radius: 4px;
  min-height: 1.5em;
}
.beat-card .beat-tag[contenteditable="true"],
.beat-card .beat-body[contenteditable="true"],
.beats-col-h-label[contenteditable="true"] {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: text;
  border-radius: 4px;
  outline: none;
  padding: 2px 6px;
}
[data-proj-title][contenteditable="true"],
[data-proj-title-input]:not([readonly]) {
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
  border-image: var(--grad-cinema) 1;
  cursor: text;
  outline: none;
  padding: 1px 6px;
}
[data-proj-title][contenteditable="true"] {
  display: inline-block;
}
[data-proj-title-input]:not([readonly]) {
  field-sizing: content;
  width: auto;
  min-width: 4ch;
  max-width: 100%;
}
[data-proj-title-input][readonly] { cursor: default; }
.beat-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--text-mute);
  cursor: pointer;
  font-family: inherit;
  min-height: 64px;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.beat-add:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(255,255,255,0.025);
  transform: translateY(-1px);
}
.beat-add-plus {
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
}
.beats-col-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 18px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--text-mute);
  cursor: pointer;
  font-family: inherit;
  min-height: 140px;
  align-self: stretch;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
body.studio-side-collapsed .beats-col-add {
  grid-column: 1 / -1;
  min-height: 96px;
  flex-direction: row;
}
.beats-col-add:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(255,255,255,0.025);
  transform: translateY(-1px);
}
.beats-col-add .beat-add-plus { font-size: 20px; }

/* script editor */
.script {
  flex: 1; overflow-y: auto;
  min-height: 0;
  padding: 32px clamp(40px, 8vw, 120px);
  background: #0a0a0c;
  font-size: 14.5px; line-height: 1.7;
  text-align: center;
}
.script .scene-h {
  text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; font-size: 14px;
  margin: 32px auto 14px;
  padding-bottom: 6px;
  max-width: 70ch;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-align: center;
}
.script .action {
  color: var(--text);
  margin: 12px auto;
  max-width: 70ch;
  text-align: center;
}
.script .character {
  text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; margin: 18px auto 0;
  width: 24ch; max-width: 24ch;
  text-align: center;
}
.script .paren {
  color: var(--text-mute); font-style: italic;
  width: 20ch; max-width: 20ch; margin: 2px auto; font-size: 13px;
  text-align: center;
}
.script .dialog {
  width: 36ch; max-width: 36ch; margin: 2px auto 6px;
  color: var(--text);
  text-align: center;
}

/* storyboard grid */
.story-grid {
  flex: 1; overflow-y: auto;
  min-height: 0;
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  background: #0a0a0c;
  align-content: start;
}
.story-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.story-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
/* When a model-picker menu is open, the card must NOT be transformed — a
   transformed ancestor becomes the containing block for position:fixed
   descendants and the menu jumps off-screen. */
.story-card:has([data-model-menu]:not([hidden])):hover { transform: none; }
.story-card:has([data-model-menu]:not([hidden])) { transform: none !important; }
.story-card .img { aspect-ratio: 16/9; position: relative; overflow: hidden; }
.story-card .img .grain { opacity: 0.12; }
.story-card .body {
  padding: 12px 14px 14px !important;
  display: block !important;
  background: var(--bg-card);
}
.story-card .num {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.story-card .head {
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.4;
  color: var(--text);
}

/* casting */
.cast-grid {
  flex: 1; overflow-y: auto;
  min-height: 0;
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  background: #0a0a0c;
  align-content: start;
}
.cast-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.cast-card .face {
  aspect-ratio: 1;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

/* footage library */
.lib-grid {
  flex: 1; overflow-y: auto;
  min-height: 0;
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  background: #0a0a0c;
  align-content: start;
}
.lib-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-card);
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.lib-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.lib-card .img { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.lib-card .meta-row {
  padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--text-dim);
}

/* publish */
.publish-wrap {
  flex: 1; overflow-y: auto;
  padding: 36px clamp(28px, 5vw, 64px);
  background: #0a0a0c;
}
.publish-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
}
@media (max-width: 980px) { .publish-grid { grid-template-columns: 1fr; } }

/* ============ hero parallax helpers ============ */
.float { transition: transform .4s var(--ease-spring); }

/* hidden util */
.hidden { display: none !important; }

/* ============ profile pill ============ */
.profile-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  font-size: 13px; color: var(--text);
  transition: background .2s var(--ease), border-color .2s var(--ease);
  position: relative;
  cursor: pointer;
}
.profile-pill:hover { background: rgba(255,255,255,0.08); border-color: var(--line-strong); }
.profile-pill .avatar { width: 26px; height: 26px; font-size: 10px; flex: 0 0 auto; }
.profile-pill .nm { font-weight: 500; }

.profile-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: rgba(20,20,22,0.96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  padding: 6px;
  display: none;
  z-index: 60;
}
.profile-menu.open { display: block; }
.profile-menu a, .profile-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--text-dim);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.profile-menu a:hover, .profile-menu button:hover {
  background: rgba(255,255,255,0.06); color: var(--text);
}
.profile-menu .sep {
  height: 1px; background: var(--line);
  margin: 6px 4px;
}

/* ============ toast ============ */
/* Toasts disabled site-wide — they were popping up too often
   (Added / Removed / Saved) and adding noise. */
.toast-stack { display: none !important; }
.toast-stack--enabled {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px 20px;
  background: rgba(20,20,22,0.96);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-size: 13.5px; color: var(--text);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  max-width: 420px;
  display: flex; align-items: center; gap: 10px;
}
.toast.in { opacity: 1; transform: none; }
.toast .ic { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: 0 0 auto; }

/* ============ pulse on selected role tile ============ */
.tile-on { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) inset; }

/* generated asset tiles get a quick pop */
@keyframes popIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.pop-in { animation: popIn .35s var(--ease-spring); }

/* spinner */
.spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* keyboard shortcut display in player */
.player-row .icobtn.active { color: var(--accent); }

/* ============ OAuth dialogs (Apple / Google mock) ============ */
.oauth-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.oauth-overlay.in { opacity: 1; }

/* shared scale-in */
.oauth-overlay > * {
  transform: translateY(8px) scale(0.97);
  transition: transform .28s var(--ease-spring);
}
.oauth-overlay.in > * { transform: none; }

/* ===== Google card (light) ===== */
.oauth-google {
  background: #fff;
  color: #1f1f1f;
  width: 400px; max-width: 100%;
  border-radius: 28px;
  padding: 40px 28px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  font-family: 'Roboto', 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  position: relative;
  letter-spacing: 0;
}
.oauth-g-close {
  position: absolute; top: 16px; right: 16px;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #5f6368; font-size: 14px;
  background: transparent; border: 0; cursor: pointer;
}
.oauth-g-close:hover { background: #f1f3f4; }

.oauth-g-brand { display: flex; align-items: center; gap: 10px; }
.oauth-g-brand span { color: #5f6368; font-size: 13.5px; font-weight: 500; }

.oauth-g-title { font-size: 24px; font-weight: 400; margin-top: 22px; line-height: 1.25; color: #202124; letter-spacing: 0; }
.oauth-g-sub { color: #5f6368; font-size: 14px; margin-top: 4px; }
.oauth-g-sub a { color: #1a73e8; text-decoration: none; }

.oauth-g-list { margin-top: 22px; border-top: 1px solid #dadce0; }
.oauth-g-acct {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 6px;
  cursor: pointer;
  transition: background .15s ease;
  border-bottom: 1px solid #dadce0;
}
.oauth-g-acct:hover { background: #f8f9fa; }
.oauth-g-avt {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg,#1a73e8,#34a853);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 14px;
  flex: 0 0 auto;
}
.oauth-g-info { flex: 1; min-width: 0; }
.oauth-g-info .nm { font-weight: 500; color: #202124; font-size: 14px; }
.oauth-g-info .em { color: #5f6368; font-size: 12.5px; margin-top: 2px; }
.oauth-g-acct.use-other .oauth-g-avt { background: #f1f3f4; color: #5f6368; font-weight: 300; font-size: 22px; }

.oauth-g-foot {
  margin-top: 18px;
  font-size: 11.5px; color: #5f6368;
  line-height: 1.45;
}
.oauth-g-foot a { color: #1a73e8; text-decoration: none; }

.oauth-g-input {
  width: 100%;
  padding: 14px 14px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 16px;
  margin-top: 24px;
  outline: none;
  font: inherit;
  color: #202124;
  background: #fff;
}
.oauth-g-input:focus { border-color: #1a73e8; box-shadow: inset 0 0 0 1px #1a73e8; }

.oauth-g-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px;
}
.oauth-g-link {
  color: #1a73e8; font-size: 14px; font-weight: 500;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 4px;
}
.oauth-g-link:hover { background: #e8f0fe; }
.oauth-g-next {
  background: #1a73e8; color: #fff;
  padding: 10px 24px; border-radius: 6px;
  font-size: 14px; font-weight: 500;
  border: 0; cursor: pointer;
  font-family: inherit;
}
.oauth-g-next:hover { background: #1565c0; }
.oauth-g-next:disabled { background: #c2c2c2; cursor: not-allowed; }

/* ===== Apple sheet (dark) ===== */
.oauth-apple {
  width: 380px; max-width: 100%;
  background: rgba(40,40,42,0.94);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 30px 26px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  color: #fff;
  text-align: center;
  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  letter-spacing: 0;
}
.oauth-a-logo { display: inline-flex; line-height: 1; margin-bottom: 14px; }
.oauth-a-title { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.oauth-a-sub  { color: rgba(255,255,255,0.62); font-size: 13.5px; margin-top: 6px; line-height: 1.45; }

.oauth-a-card {
  margin-top: 22px;
  background: rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
  text-align: left;
}
.oauth-a-avt {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #6e6e72, #2c2c2e);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; color: #fff;
  flex: 0 0 auto;
}
.oauth-a-id { flex: 1; min-width: 0; }
.oauth-a-id .nm { font-weight: 600; font-size: 14px; }
.oauth-a-id .em { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 2px; }

.oauth-a-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px;
  padding: 12px 4px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 0;
  color: rgba(255,255,255,0.92);
}
.oauth-a-row:first-of-type { margin-top: 12px; }
.oauth-a-row .v { color: rgba(255,255,255,0.5); font-size: 12.5px; }

.oauth-a-row .toggle { background: rgba(255,255,255,0.16); }
.oauth-a-row .toggle.on { background: #34c759; }

.oauth-a-btn {
  margin-top: 18px;
  width: 100%;
  background: #fff;
  color: #000;
  font-weight: 600;
  padding: 13px;
  border-radius: 12px;
  font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  transition: background .15s ease;
}
.oauth-a-btn:hover { background: #f5f5f7; }
.oauth-a-btn .touchid {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.oauth-a-cancel {
  margin-top: 10px;
  background: transparent;
  color: #0a84ff;
  font-size: 14.5px;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  border-radius: 8px;
}
.oauth-a-cancel:hover { background: rgba(255,255,255,0.05); }

.oauth-a-progress {
  margin-top: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  height: 56px;
  justify-content: center;
}

/* ============ models & keys ============ */
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.model-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.model-card.on { border-color: rgba(255,106,61,0.35); }
.model-card.off-state { opacity: 0.85; }
.model-card .top {
  display: flex; align-items: center; gap: 12px;
}
.model-card .badge {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--grad-cinema);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px;
  letter-spacing: -.02em;
  flex: 0 0 auto;
}
.model-card .name { font-weight: 600; font-size: 15px; }
.model-card .role { color: var(--text-mute); font-size: 12.5px; margin-top: 1px; }

.model-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.model-status .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-mute);
}
.model-status.byo { color: #d8ffe6; border-color: rgba(74,222,128,0.35); }
.model-status.byo .d { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.6); }
.model-status.managed { color: #ffd1bd; border-color: rgba(255,106,61,0.35); }
.model-status.managed .d { background: var(--accent); box-shadow: 0 0 8px rgba(255,106,61,0.5); }

.model-card .meta {
  font-size: 12.5px; color: var(--text-dim);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: auto;
}
.model-card .key-display {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--text-dim);
}
.model-card .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.markup {
  font-size: 11px;
  color: var(--text-mute);
  display: inline-flex; align-items: center; gap: 6px;
}
.markup b { color: var(--text); font-weight: 600; }

/* connect-model modal */
.connect-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}
.connect-opt {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
  border-radius: 14px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  display: flex; flex-direction: column; gap: 8px;
}
.connect-opt:hover { background: rgba(255,255,255,0.05); }
.connect-opt.on {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--grad-cinema) border-box;
  border: 1px solid transparent;
}
.connect-opt h4 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.connect-opt p { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.connect-opt .price-line {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 4px;
}
.connect-opt .price-line strong { color: var(--text); font-weight: 600; }

.key-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--text);
  outline: none;
  letter-spacing: 0;
}
.key-input:focus { border-color: var(--line-strong); }

.fine-print {
  font-size: 11.5px;
  color: var(--text-mute);
  line-height: 1.55;
  margin-top: 8px;
}

/* tighter mobile pads */
@media (max-width: 600px) {
  .quote-card { padding: 28px; }
}

/* onboarding intent cards */
.intent-card { transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.intent-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.intent-card.tile-on {
  border-color: rgba(255,106,61,0.55);
  background: linear-gradient(180deg, rgba(255,106,61,0.08), rgba(182,107,255,0.06));
}

/* bio "/" → AI draft */
.bio-hint {
  font-size: 11.5px;
  color: var(--text-mute);
  font-weight: 400;
  letter-spacing: 0;
}
.bio-hint code {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
}
.bio-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,106,61,0.06), rgba(182,107,255,0.06));
  border: 1px solid rgba(182,107,255,0.25);
}
.bio-prompt-tag {
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #ffd1bd;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,106,61,0.15);
  flex: 0 0 auto;
}
.bio-prompt-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bio-prompt[data-loading="1"] {
  opacity: 0.7;
  pointer-events: none;
}

/* Signed-out film preview modal */
.preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.preview-modal.open { display: flex; opacity: 1; }
.preview-panel {
  width: min(900px, 96vw);
  max-height: 90vh;
  overflow: hidden;
  border-radius: 18px;
  background: #14141a;
  border: 1px solid var(--line);
  box-shadow: 0 60px 140px rgba(0,0,0,0.6);
  position: relative;
  display: flex;
  flex-direction: column;
  transform: translateY(8px) scale(0.99);
  transition: transform .3s var(--ease);
}
.preview-modal.open .preview-panel { transform: none; }
.preview-x {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: 1.5px solid rgba(255,255,255,0.85);
  color: #fff;
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.preview-x:hover { background: rgba(0,0,0,0.7); transform: scale(1.05); }
.preview-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.preview-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(20,20,26,0.6) 70%, #14141a 100%);
  pointer-events: none;
}
.preview-title-overlay {
  position: absolute;
  left: 36px;
  bottom: 28px;
  z-index: 2;
  font-size: clamp(40px, 6.4vw, 78px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
  text-transform: uppercase;
  max-width: 80%;
  text-wrap: balance;
}
.preview-body {
  padding: 22px 36px 32px;
}
.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.preview-tag {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.10);
  padding: 5px 10px;
  border-radius: 6px;
}
.preview-synopsis {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 24px;
  max-width: 65ch;
}
.preview-cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.preview-cta { background: var(--accent) !important; color: #fff !important; }
@media (max-width: 700px) {
  .preview-title-overlay { left: 22px; bottom: 18px; }
  .preview-body { padding: 18px 22px 26px; }
  .preview-synopsis { font-size: 14.5px; }
}

/* Actor likeness uploader (onboarding + settings) */
.actor-uploader { margin-top: 8px; }
.actor-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.actor-photos:empty { display: none; }
.actor-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
}
.actor-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.actor-photo .x {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; transition: opacity .15s var(--ease);
}
.actor-photo:hover .x { opacity: 1; }
.actor-pick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px dashed var(--line-strong);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13.5px;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.actor-pick:hover { border-color: var(--text); color: var(--text); background: rgba(255,255,255,0.03); }
.actor-pick-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  font-size: 13px;
}

/* circular 10s skip icons in the player row */
.player-row .icobtn.skip-icon {
  position: relative;
  font-size: 0;
}
.player-row .icobtn.skip-icon svg { display: block; }
.player-row .icobtn .skip-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  color: currentColor;
  padding-top: 2px;
  pointer-events: none;
}

/* CC button: when on, match the top-bar pill highlight */
.player-row .icobtn[data-cc].active,
.btn-sm.btn-ghost.cc-on {
  color: var(--accent);
  background: rgba(255,106,61,0.16);
  border-color: rgba(255,106,61,0.45);
}

/* volume button + hover slider popover */
.vol-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.vol-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(20,18,30,0.96);
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 12;
  white-space: nowrap;
}
.vol-wrap:hover .vol-pop,
.vol-wrap:focus-within .vol-pop,
.vol-pop.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.vol-pop input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--vol, 80%), rgba(255,255,255,0.18) var(--vol, 80%), rgba(255,255,255,0.18) 100%);
  outline: none;
  cursor: pointer;
}
.vol-pop input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: pointer;
}
.vol-pop input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  cursor: pointer;
}
.vol-val {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  text-align: right;
}

/* PiP active highlight */
.player-row .icobtn[data-pip].active {
  color: var(--accent);
  background: rgba(255,106,61,0.16);
}

.toast .toast-cta {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s var(--ease);
}
.toast .toast-cta:hover { background: rgba(255,255,255,0.16); }

.empty-state {
  text-align: center;
  padding: 80px 32px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  max-width: 560px;
  margin: 32px auto;
}
.empty-state .small { color: var(--text-mute); margin-top: 4px; line-height: 1.5; }

.poster { position: relative; }
.poster-remove {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s var(--ease), background .15s var(--ease);
  z-index: 4;
}
.poster:hover .poster-remove { opacity: 1; }
.poster-remove:hover { background: rgba(0,0,0,0.85); }

/* Pricing — mobile plan compare widget (hidden on desktop; the desktop
   uses the full table). Lives inside the pricing.html page alongside the
   comparison table, but only the active one is shown at a given width. */
.compare-mobile { display: none; margin-top: 8px; }
.cmpm-eyebrow { display: block; margin-bottom: 14px; }
.cmpm-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cmpm-tabs::-webkit-scrollbar { display: none; }
.cmpm-tab {
  flex: 1 1 auto;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--text-mute);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.cmpm-tab:hover { color: var(--text); }
.cmpm-tab.on {
  background: var(--text);
  color: #0a0a0c;
}
.cmpm-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%);
}
.cmpm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 14px;
}
.cmpm-row:last-child { border-bottom: 0; }
.cmpm-label { color: var(--text-dim); flex: 1 1 auto; }
.cmpm-value { color: var(--text); font-weight: 500; flex: 0 0 auto; text-align: right; }
.cmpm-check {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6a3d 0%, #b66bff 100%);
  color: #fff;
  font-size: 11px; font-weight: 700;
}
.cmpm-miss {
  color: var(--text-mute);
  font-weight: 400;
  letter-spacing: 0.05em;
}
.cmpm-text { color: var(--text); font-weight: 500; }
/* Subtle accent border on the active plan's feature list to reinforce
   which tier the user is currently looking at. */
.cmpm-list.cmpm-watch  { border-color: rgba(65,209,255,0.25); }
.cmpm-list.cmpm-studio { border-color: rgba(182,107,255,0.30); }
.cmpm-list.cmpm-auteur {
  border-color: transparent;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%) padding-box,
    linear-gradient(135deg, rgba(255,106,61,0.55) 0%, rgba(182,107,255,0.55) 100%) border-box;
}

/* Channels directory card — refined layout: avatar + name/loc + Follow
   sit on the header row; bio underneath; a single-line stats row below
   that. A soft accent glow tinted by the creator's avatar gradient
   reinforces the visual identity of each card. */
.ch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid var(--line);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.ch-card:hover { border-color: var(--line-strong); transform: translateY(-2px); background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); }
.ch-card-glow {
  position: absolute;
  top: -40%; right: -20%;
  width: 240px; height: 240px;
  background: var(--ch-accent);
  filter: blur(80px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.ch-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.ch-card-avatar {
  width: 48px !important;
  height: 48px !important;
  font-size: 16px !important;
  flex: 0 0 auto;
}
.ch-card-id {
  flex: 1 1 auto;
  min-width: 0;
}
.ch-card-name {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-card-loc {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-card-follow {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.ch-card-follow:hover { background: rgba(255,255,255,0.08); border-color: var(--line-strong); }
.ch-card-follow.on {
  background: rgba(255,255,255,0.95);
  color: #0a0a0c;
  border-color: rgba(255,255,255,0.95);
}
.ch-card-bio {
  position: relative; z-index: 1;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ch-card-stats {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-mute);
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.ch-card-stats strong { color: var(--text); font-weight: 600; }
.ch-card-dot { opacity: 0.5; }

/* My list swipe-to-delete row. The card slides over a Remove action
   button that sits behind it; partial swipe reveals the action, full
   swipe deletes the item. */
.swipe-row {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: pan-y;
}
.swipe-row > .poster { display: block; will-change: transform; }
.swipe-action {
  position: absolute;
  top: 4px; right: 0; bottom: 4px;
  width: 86px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f7768e 0%, #b04a00 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  transition: opacity .15s var(--ease);
}
.swipe-row.swipe-removing { transition: max-height .22s ease, opacity .22s ease; max-height: 0 !important; opacity: 0; }

.hero-fineprint {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-mute);
  letter-spacing: 0.1px;
}

.faq-section {
  padding: 96px 0;
  border-top: 1px solid var(--line);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 880px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.faq-item[open] {
  background: rgba(255,255,255,0.04);
  border-color: var(--line-strong);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus {
  font-size: 22px;
  font-weight: 300;
  color: var(--text-dim);
  transition: transform .25s var(--ease), color .2s var(--ease);
  flex: 0 0 auto;
}
.faq-item[open] .plus {
  transform: rotate(45deg);
  color: var(--accent);
}
.faq-item .faq-body {
  padding: 0 24px 24px 24px;
  color: var(--text-dim);
  line-height: 1.6;
  font-size: 15px;
  max-width: 70ch;
}

/* festivals + leaderboard on landing */
.festival-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
}
@media (max-width: 980px) { .festival-row { grid-template-columns: 1fr; } }

.festival-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
}
.festival-card.current {
  background: linear-gradient(160deg, rgba(255,106,61,0.10), rgba(182,107,255,0.06) 60%, rgba(255,255,255,0.02));
  border-color: rgba(255,106,61,0.35);
}
.festival-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.festival-pill {
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ffd1bd;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,106,61,0.16);
  border: 1px solid rgba(255,106,61,0.4);
}
.festival-pill.alt {
  color: #d4c2ff;
  background: rgba(182,107,255,0.14);
  border-color: rgba(182,107,255,0.4);
}
.festival-meta { font-size: 12.5px; color: var(--text-mute); }
.festival-title { margin-top: 8px; line-height: 1.05; }
.festival-desc {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 14px;
  max-width: 42ch;
}
.festival-stats {
  display: flex;
  gap: 28px;
  margin-top: auto;
  padding-top: 32px;
}
.festival-stats > div { display: flex; flex-direction: column; gap: 2px; }
.festival-stats .stat-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.festival-stats .stat-lbl { font-size: 11.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.4px; }

.leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
}
.leaderboard-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.leaderboard-list li:last-child { border-bottom: 0; }
.leaderboard-list .rank {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.leaderboard-list .leader {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.leaderboard-list .leader-skin {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--grad-cinema);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.leaderboard-list .leader-skin.skin-a { background: linear-gradient(135deg,#ff6a3d,#7a1f1f); }
.leaderboard-list .leader-skin.skin-b { background: linear-gradient(135deg,#b66bff,#1d0d3a); }
.leaderboard-list .leader-skin.skin-c { background: linear-gradient(135deg,#41d1ff,#0a3a55); }
.leaderboard-list .leader-skin.skin-e { background: linear-gradient(135deg,#f7c948,#b04a00); }
.leaderboard-list .leader-skin.skin-g { background: linear-gradient(135deg,#4ade80,#064e3b); }
.leaderboard-list .leader-title { font-size: 14.5px; font-weight: 600; }
.leaderboard-list .leader-by { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.leaderboard-list .leader-votes {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
  color: #ffd1bd;
}
.festival-footnote {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 16px;
  line-height: 1.55;
}

/* ── Channel links (Instagram, LinkedIn, website…) ─────────────── */
.channel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.channel-links[hidden] { display: none; }
.channel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.channel-link:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.channel-link .ic {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: #fff;
  flex: 0 0 auto;
}
.channel-link .lbl {
  font-weight: 500;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-link.k-instagram .ic { background: linear-gradient(135deg,#f09433 0%,#dc2743 50%,#bc1888 100%); }
.channel-link.k-linkedin  .ic { background: #0a66c2; font-style: italic; }
.channel-link.k-x         .ic { background: #000; border: 1px solid rgba(255,255,255,0.25); font-size: 13px; }
.channel-link.k-tiktok    .ic { background: linear-gradient(135deg,#69c9d0 0%,#000 50%,#ee1d52 100%); }
.channel-link.k-youtube   .ic { background: #ff0033; }
.channel-link.k-website   .ic { background: rgba(255,255,255,0.12); font-size: 14px; }
.channel-link.k-email     .ic { background: rgba(255,255,255,0.12); font-size: 13px; }

/* ── Settings · channel link editor ─────────────────────────────── */
.set-row.set-row-stacked {
  grid-template-columns: 1fr minmax(420px, 520px);
  align-items: start;
}
@media (max-width: 900px) {
  .set-row.set-row-stacked { grid-template-columns: 1fr; }
}
.set-links-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.set-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.set-link-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 10px;
  align-items: center;
}
.set-link-row .input { font-size: 14px; }
.set-link-row .x {
  background: none;
  border: 1px solid transparent;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 16px;
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1;
}
.set-link-row .x:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: rgba(255,255,255,0.1);
}
.set-links-add { align-self: flex-start; }
.set-links-empty { margin: 4px 0 0; font-style: italic; }
@media (max-width: 720px) {
  .set-link-row { grid-template-columns: 1fr auto; }
  .set-link-row select.input { grid-column: 1 / 2; }
  .set-link-row input.input { grid-column: 1 / -1; }
  .set-link-row .x { grid-column: 2 / 3; grid-row: 1; }
}

/* ── Winners page ────────────────────────────────────────────────── */
.wn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.wn-grid-actor {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 14px;
}
.wn-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1, #141416);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease;
}
a.wn-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.14);
}
.wn-thumb {
  aspect-ratio: 16/10;
  position: relative;
  background: var(--grad-cinema);
}
.wn-thumb.skin-a { background: linear-gradient(135deg,#ff6a3d,#7a1f1f); }
.wn-thumb.skin-b { background: linear-gradient(135deg,#b66bff,#1d0d3a); }
.wn-thumb.skin-c { background: linear-gradient(135deg,#41d1ff,#0a3a55); }
.wn-thumb.skin-d { background: linear-gradient(135deg,#3b82f6,#0a1f44); }
.wn-thumb.skin-e { background: linear-gradient(135deg,#f7c948,#b04a00); }
.wn-thumb.skin-g { background: linear-gradient(135deg,#4ade80,#064e3b); }
.wn-thumb.skin-h { background: linear-gradient(135deg,#ec4899,#831843); }
.wn-thumb.wn-empty {
  background: linear-gradient(135deg, #1a1a1d, #0e0e10);
  border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.wn-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wn-title {
  font-size: 16px;
  font-weight: 700;
  margin-top: 4px;
  line-height: 1.25;
}
.wn-title.mute { color: var(--text-mute); font-weight: 500; }
.wn-meta {
  font-size: 12.5px;
  color: var(--text-mute);
  margin: 0;
}
.wn-card-actor {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.wn-card-actor .wn-body { padding: 0; }
.wn-actor-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--grad-cinema);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.5px;
}
.wn-actor-avatar.wn-empty {
  background: rgba(255,255,255,0.04);
  color: var(--text-mute);
  font-weight: 400;
}

/* ── Festivals · winners history list ────────────────────────────── */
.fest-history {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fest-history-row {
  display: grid;
  grid-template-columns: 1.2fr 1.1fr 1.1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  background: var(--surface-1, #141416);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.fest-history-meta { min-width: 0; }
.fest-history-title {
  font-size: 15px;
  font-weight: 600;
}
.fest-history-pick { min-width: 0; }
.fest-history-pick .eyebrow {
  display: block;
  margin-bottom: 4px;
}
.fest-history-pick > div {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 880px) {
  .fest-history-row {
    grid-template-columns: 1fr 1fr;
  }
  .fest-history-row > a.btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@media (max-width: 720px) {
  .fest-history-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
    align-items: stretch;
  }
  .fest-history-meta {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .fest-history-pick > div {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .fest-history-row > a.btn { width: max-content; }
}