/* ============================================================
   TURN — Story architecture for AI filmmakers
   Dark cinematic editing-suite. Teal/orange = value charge.
   ============================================================ */

:root {
  /* surfaces — warm charcoal */
  --bg-0:#08090b;
  --bg-1:#0e0f12;
  --bg-2:#15161a;
  --bg-3:#1c1d22;
  --bg-4:#24262c;
  --bg-5:#2d2f37;

  /* lines */
  --line:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.1);
  --line-3:rgba(255,255,255,.16);

  /* text — warm whites */
  --txt-0:#f3f1ec;
  --txt-1:#b6b3ab;
  --txt-2:#7d7a73;
  --txt-3:#56544e;

  /* value charge — the cinematic grade */
  --pos:oklch(0.76 0.145 62);      /* warm amber = positive */
  --pos-soft:oklch(0.76 0.145 62 / .16);
  --pos-line:oklch(0.76 0.145 62 / .5);
  --neg:oklch(0.72 0.10 232);      /* cool teal = negative */
  --neg-soft:oklch(0.72 0.10 232 / .16);
  --neg-line:oklch(0.72 0.10 232 / .5);

  --accent:var(--pos);             /* primary accent = the warm amber grade (no stray blue) */
  --accent-soft:var(--pos-soft);
  --accent-line:var(--pos-line);
  --accent2:var(--neg);            /* secondary button = cool teal (vs amber primary) */
  --accent2-ink:#06141d;           /* dark ink on the secondary fill */
  --ink-on-accent:#2c2722;         /* ink on the amber primary — a warm dark grey, softer than black, still high-contrast */

  --brand:oklch(0.78 0.15 62);     /* amber brand */
  --alert:oklch(0.64 0.17 27);     /* red = cut / doesn't turn */
  --alert-soft:oklch(0.64 0.17 27 / .15);

  /* type */
  --f-display:"Space Grotesk",sans-serif;
  --f-ui:"Hanken Grotesk",sans-serif;
  --f-mono:"Space Mono",monospace;

  --r-s:6px; --r-m:9px; --r-l:14px; --r-xl:20px;
  --shadow-pop:0 18px 50px -12px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5);

  /* density (driven by tweak) */
  --pad:16px;
  --rail-w:268px;
  --insp-w:380px;

  color-scheme:dark;
}

/* ============================================================
   LIGHT THEME — "Paper & Ink", matched to the marketing homepage:
   cool neutral surfaces, near-black ink, hairline structure. Charge
   colors (--pos/--neg) stay as the cinematic grade (warm amber harmonises
   with the homepage's Reel orange). This block flips the WHOLE app light.
   ============================================================ */
html[data-theme="light"]{
  color-scheme:light;

  --bg-0:#EBEBE8;   /* canvas / letterbox — the darkest neutral, panels float on it */
  --bg-1:#F1F1EE;   /* panels: topbar, rail, inspector */
  --bg-2:#FCFCFB;   /* cards — Paper */
  --bg-3:#F6F6F4;   /* raised controls / segmented container — Bone */
  --bg-4:#FFFFFF;   /* higher */
  --bg-5:#FFFFFF;   /* highest — active segment */

  --line:rgba(15,16,18,.07);    /* Hairline */
  --line-2:rgba(15,16,18,.12);
  --line-3:rgba(15,16,18,.20);

  --txt-0:#24262B;  /* Ink — soft charcoal, not pure black */
  --txt-1:#51555B;  /* Ink, soft */
  --txt-2:#74787E;  /* Slate */
  --txt-3:#9A9DA3;  /* muted */

  --alert:oklch(0.55 0.19 27);
  --alert-soft:oklch(0.55 0.19 27 / .12);

  --shadow-pop:0 16px 44px -14px rgba(15,16,18,.20),0 2px 8px rgba(15,16,18,.10);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#dededa}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#cfcabe;background-clip:padding-box}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg-0);
  color:var(--txt-0);
  font-family:var(--f-ui);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
#root{height:100vh}
::selection{background:var(--pos-soft);color:var(--txt-0)}

/* scrollbars */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#3b3e47;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

.mono{font-family:var(--f-mono)}
.eyebrow{
  font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-2);
}
.display{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:flex;flex-direction:column;height:100vh;background:var(--bg-1)}

/* top bar */
.topbar{
  height:52px;flex:0 0 52px;display:flex;align-items:center;gap:14px;
  padding:0 16px;background:var(--bg-1);
  border-bottom:1px solid var(--line);
  position:relative;z-index:30;
}
.brand{display:flex;align-items:center;gap:10px;cursor:default}
.brand-mark{
  width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center;position:relative;
  background:linear-gradient(150deg,var(--neg) 0%,var(--bg-3) 42%,var(--pos) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.brand-mark svg{position:relative}
.brand-name{
  font-family:var(--f-display);font-weight:700;font-size:15px;
  letter-spacing:.03em;color:var(--txt-0);white-space:nowrap;
}
.brand-name b{color:var(--pos);font-weight:700}

.topbar-divider{width:1px;height:22px;background:var(--line-2)}

.proj{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.proj-name{font-family:var(--f-display);font-weight:600;font-size:13.5px;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Badges were flex:0 0 auto inside a chip that CAN shrink, so once the film title +
   SHARED + format + framework stopped fitting, the last badge was hard-clipped mid-word
   ("STORY CI"). Now the chip shrinks cleanly, the NAME yields first, and if a badge still
   has to give it ellipsizes instead of being cut with no indication. */
.proj-format{flex:0 1 auto;min-width:0;max-width:104px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-family:var(--f-mono);font-size:8.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:20px;padding:2px 8px}
/* SHARED is the one badge that changes what you're allowed to do — it never shrinks away */
.proj-format.shared{flex:0 0 auto}
/* framework badge — shown only for non-default frameworks (e.g. Kishōtenketsu) */
.proj-format.fw{color:var(--accent);border-color:var(--accent)}

/* New Story — Step 0 format cards ("What are we making?") */
.ns-formats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 6px}
.ns-format{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 14px 12px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;text-align:left;transition:.12s}
.ns-format:hover{border-color:var(--line-3)}
.ns-format.on{border-color:var(--txt-0);box-shadow:0 0 0 1px var(--txt-0) inset}
.ns-format svg{color:var(--txt-2)}
.ns-format.on svg{color:var(--txt-0)}
.ns-format-name{font-family:var(--f-display);font-weight:600;font-size:13.5px;color:var(--txt-0)}
.ns-format-blurb{font-size:11px;line-height:1.45;color:var(--txt-2)}
.ns-formats.fw{grid-template-columns:1fr 1fr}
@media (max-width:640px){ .ns-formats{grid-template-columns:1fr 1fr} .ns-formats.fw{grid-template-columns:1fr} }
.proj-meta{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);letter-spacing:.04em}

/* export menu */
.export-wrap{position:relative}
.tb-btn.on{background:var(--bg-4);color:var(--txt-0);border-color:var(--line-3)}
.export-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:266px;opacity:1;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-m);
  box-shadow:var(--shadow-pop);padding:6px;animation:menupop .16s ease}
@keyframes menupop{from{transform:translateY(-5px)}to{transform:none}}
.export-head{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-1);padding:7px 8px 8px}
.export-subhead{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);padding:9px 8px 6px;margin-top:4px;border-top:1px solid var(--line)}
.export-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:transparent;
  border-radius:7px;padding:9px 8px;cursor:pointer;transition:.1s}
.export-item:hover{background:var(--bg-4)}
.export-item-ic{width:30px;height:30px;flex:0 0 30px;border-radius:7px;display:grid;place-items:center;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--pos)}
.export-item-t{display:flex;flex-direction:column;min-width:0}
.export-item-t .t{font-size:12.5px;font-weight:500;color:var(--txt-0)}
.export-item-t .s{font-size:10.5px;color:var(--txt-2)}
.export-foot{border-top:1px solid var(--line);margin-top:5px;padding-top:5px}
.export-item.reset .export-item-ic{color:var(--alert);border-color:var(--alert)}
.export-item.reset:hover{background:var(--alert-soft)}
.export-item.reset .t{color:var(--alert)}

.topbar-spacer{flex:1}

/* three-zone layout — center group stays horizontally centered */
.tb-left{flex:1;min-width:0;display:flex;align-items:center;gap:14px}
.tb-center{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.tb-right{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:14px}

.segmented{display:flex;background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg{
  display:flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:6px;border:0;background:transparent;cursor:pointer;
  color:var(--txt-2);font-family:var(--f-ui);font-size:12.5px;font-weight:500;
  transition:.13s;
}
.seg:hover{color:var(--txt-1)}
.seg.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.seg svg{opacity:.85}

/* view sub-nav — the room's view tabs, moved out of the top bar to a full-width
   bar directly beneath it (frees top-bar space at every screen size). */
.viewnav{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 16px;background:var(--bg-1);border-bottom:1px solid var(--line);
  position:relative;z-index:20;overflow-x:auto;scrollbar-width:none;
}
.viewnav::-webkit-scrollbar{display:none}
.viewnav .segmented{flex:0 0 auto}
/* the bar has the full width now — keep text labels (the top bar hid them ≤1360px
   only because space was tight there). Higher specificity re-shows them here. */
.viewnav .seg{gap:6px;padding:5px 11px}
.viewnav .seg .seg-lab{display:inline}
/* Lookbook — the north-star visual statement block above the reference grid */
.lb-statement{margin:0 0 18px;padding:14px 16px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}

/* three balanced zones: equal-width flex sides keep the CENTER group (tab strip +
   the room's agent CTA) horizontally centered. The side panel-toggles only render
   usefully in drawer modes — on desktop the panels collapse/expand from inside. */
.viewnav .vn-side{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px}
.viewnav .vn-left{justify-content:flex-start}
.viewnav .vn-right{justify-content:flex-end}
.viewnav .vn-center{flex:0 0 auto;display:flex;align-items:center;gap:10px}
.viewnav .vn-cta{flex:0 0 auto}
/* the view-nav panel toggles are only needed on mobile, where the rail/inspector
   are full overlay drawers with no in-flow strip. On tablet + desktop both panels
   dock and carry their own collapse/expand strip, so these would be duplicates. */
@media (min-width:700px){ .viewnav .vn-paneltoggle{display:none} }
/* Lookbook staleness — amber dot on an out-of-date Art Room tab + the in-tab "re-draft" banner */
.seg-stale-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:oklch(0.74 0.15 60);margin-left:1px;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.lb-stale-notice{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 0 16px;padding:9px 12px;border-radius:9px;
  background:oklch(0.72 0.13 60 / .13);border:1px solid oklch(0.72 0.13 60 / .34);font-size:12px;line-height:1.45;color:oklch(0.86 0.1 72)}
.lb-stale-notice > svg{flex:0 0 auto;color:oklch(0.78 0.15 64)}
.lb-stale-notice > span{flex:1 1 200px}
.lb-stale-notice b{color:var(--txt-0)}
.lb-stale-affect{display:block;margin-top:2px;font-size:11px;opacity:.82}
.lb-stale-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:7px;cursor:pointer;
  border:1px solid oklch(0.72 0.13 60 / .5);background:oklch(0.72 0.13 60 / .2);color:oklch(0.9 0.08 75);font-family:var(--f-ui);font-size:11.5px;font-weight:600;transition:.12s}
.lb-stale-btn:hover{background:oklch(0.72 0.13 60 / .34)}
/* "Re-draft only" — the quieter sibling: specs update now, images stay until regenerated */
.lb-stale-btn.ghost{background:transparent}
.lb-stale-btn.ghost:hover{background:oklch(0.72 0.13 60 / .18)}
/* light theme: the amber notice needs DARK amber ink, not the dark-theme cream */
html[data-theme="light"] .lb-stale-notice{background:oklch(0.78 0.12 70 / .16);border-color:oklch(0.6 0.13 62 / .38);color:oklch(0.42 0.1 58)}
html[data-theme="light"] .lb-stale-notice > svg{color:oklch(0.55 0.14 60)}
html[data-theme="light"] .lb-stale-notice b{color:oklch(0.32 0.09 58)}
html[data-theme="light"] .lb-stale-btn{border-color:oklch(0.55 0.13 60 / .45);background:oklch(0.72 0.13 60 / .16);color:oklch(0.36 0.1 58)}
html[data-theme="light"] .lb-stale-btn:hover{background:oklch(0.72 0.13 60 / .28)}
html[data-theme="light"] .lb-stale-btn.ghost{background:transparent}
html[data-theme="light"] .lb-stale-btn.ghost:hover{background:oklch(0.72 0.13 60 / .14)}
html[data-theme="light"] .seg-stale-dot{box-shadow:0 0 0 2px var(--bg-3)}
/* truly narrow screens: icon-only tabs, centered ("safe" falls back to
   start-alignment when the strip overflows, so nothing clips off-screen) */
@media (max-width:640px){
  .viewnav{justify-content:center;justify-content:safe center;padding:6px 12px}
  .viewnav .vn-side{flex:0 0 auto}
  .viewnav .seg{gap:0;padding:6px 9px}
  .viewnav .seg .seg-lab{display:none}
  .viewnav .vn-cta-lab{display:none}
}

.tb-btn{
  display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;
  color:var(--txt-1);font-family:var(--f-ui);font-size:12.5px;font-weight:500;cursor:pointer;
  transition:.13s;
}
.tb-btn:hover{background:var(--bg-4);color:var(--txt-0);border-color:var(--line-3)}
.tb-btn.accent{background:var(--pos);border-color:transparent;color:var(--ink-on-accent);font-weight:600}
.tb-btn.accent:hover{filter:brightness(1.07)}
/* secondary action buttons — cool teal, a step below the amber primary. Use the
   `.secondary` modifier on a .tb-btn, or the standalone `.btn-secondary` anywhere. */
.tb-btn.secondary{background:var(--accent2);border-color:transparent;color:var(--accent2-ink);font-weight:600}
.tb-btn.secondary:hover{filter:brightness(1.07);color:var(--accent2-ink)}
.btn-secondary{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:8px;
  border:1px solid transparent;background:var(--accent2);color:var(--accent2-ink);
  font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.13s}
.btn-secondary:hover{filter:brightness(1.07)}
.btn-secondary:disabled{opacity:.55;cursor:default}

/* theme switch (Light / System / Dark) */
.theme-seg{display:flex;align-items:center;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
.theme-opt{width:28px;height:26px;display:grid;place-items:center;border:0;background:transparent;border-radius:6px;
  color:var(--txt-2);cursor:pointer;transition:.13s}
.theme-opt:hover{color:var(--txt-1)}
.theme-opt.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.22)}

.avatar{
  width:30px;height:30px;border-radius:50%;flex:0 0 30px;
  background:linear-gradient(135deg,#3a4a5a,#1f262e);
  display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:12px;
  color:var(--txt-0);border:1px solid var(--line-2);cursor:pointer;
}

/* body columns */
.body{flex:1;display:flex;min-height:0}

/* ============================================================
   LEFT RAIL
   ============================================================ */
.rail{
  width:var(--rail-w);flex:0 0 var(--rail-w);
  background:var(--bg-1);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;position:relative;
}

/* collapse button shared */
.panel-collapse{
  width:24px;height:24px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-2);
  color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.12s;flex:0 0 auto;
}
.panel-collapse:hover{background:var(--bg-4);color:var(--txt-0);border-color:var(--line-3)}

/* collapsed strips */
.strip{
  width:48px;flex:0 0 48px;background:var(--bg-1);
  display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:16px;
}
.strip.left{border-right:1px solid var(--line)}
.strip.right{border-left:1px solid var(--line)}
/* buttonless strip (inspector): the whole rail is the click target to reopen */
.strip.strip-clickable{cursor:pointer;border:0;border-left:1px solid var(--line);margin:0;font:inherit;text-align:inherit;background:var(--bg-1)}
.strip.strip-clickable:hover{background:var(--bg-2)}
.strip-btn{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-3);
  color:var(--txt-1);cursor:pointer;display:grid;place-items:center;transition:.12s;
}
.strip-btn:hover{background:var(--bg-4);color:var(--txt-0)}
.strip-label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3);
  margin-top:4px;user-select:none;
}
.strip-flag{
  margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--f-mono);font-size:9px;color:var(--alert);
}
.strip-flag .dot{width:20px;height:20px;border-radius:50%;background:var(--alert-soft);display:grid;place-items:center}

/* topbar panel toggles */
.tb-icon{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--bg-3);
  color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.12s;
}
.tb-icon:hover{background:var(--bg-4);color:var(--txt-1)}
.tb-icon.on{color:var(--pos);border-color:var(--line-2)}
.rail-scroll{flex:1;overflow-y:auto;padding:14px 12px 24px}
.rail-sec{margin-bottom:20px}
.rail-sec.folded{margin-bottom:8px}
.rail-sec-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6px 8px;
}
.rail-sec-head.clickable{cursor:pointer;border-radius:7px;padding:7px 6px;margin-bottom:0;
  transition:background .12s}
.rail-sec-head.clickable:hover{background:var(--bg-2)}
.rail-fold-ic{display:flex;color:var(--txt-3);transition:.12s}
.rail-sec-head.clickable:hover .rail-fold-ic{color:var(--txt-1)}
.rail-sec-head .eyebrow{display:flex;align-items:center;gap:7px}
.rail-sec-toggle{display:flex;align-items:center;flex:1;min-width:0;padding:7px 6px;border:0;border-radius:7px;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rail-sec-toggle:hover{background:var(--bg-2)}
.rail-sec-toggle:hover .rail-fold-ic{color:var(--txt-1)}
.rail-add{
  width:20px;height:20px;border-radius:5px;border:0;background:transparent;
  color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.12s;
}
.rail-add:hover{background:var(--bg-3);color:var(--txt-0)}

/* premise / controlling idea cards */
.idea-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:12px;margin:0 2px;
}
.idea-card .eyebrow{margin-bottom:7px}
.idea-card .premise{font-size:13px;color:var(--txt-1);line-height:1.5;font-style:italic}
.ctrl-idea{
  margin-top:9px;padding-top:10px;border-top:1px dashed var(--line-2);
  font-size:12.5px;line-height:1.5;color:var(--txt-1);
}
.ctrl-idea .val{color:var(--pos);font-weight:600}
.ctrl-idea .cause{color:var(--txt-0)}
.tag-ironic{
  display:inline-block;margin-top:8px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--neg);
  border:1px solid var(--neg-line);border-radius:20px;padding:2px 8px;
}

/* hierarchy tree */
.tree-act{margin-bottom:4px}
.tree-act-head{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:0;border-radius:7px;cursor:pointer;
  background:transparent;color:inherit;font:inherit;text-align:left;
  transition:.12s;
}
.tree-act-head:hover{background:var(--bg-2)}
.tree-act-no{
  font-family:var(--f-mono);font-size:10px;color:var(--bg-0);
  background:var(--txt-2);border-radius:4px;padding:1px 5px;font-weight:700;letter-spacing:.05em;
}
.tree-act-title{font-family:var(--f-display);font-size:12.5px;font-weight:500;color:var(--txt-0);flex:1}
.tree-act-count{font-family:var(--f-mono);font-size:10px;color:var(--txt-3)}
.tree-scenes{padding-left:6px;margin:2px 0 6px;border-left:1px solid var(--line-2);margin-left:12px}
.tree-scene{
  display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;border:0;border-radius:6px;cursor:pointer;
  background:transparent;color:inherit;font:inherit;text-align:left;
  position:relative;transition:.1s;
}
.tree-scene:hover{background:var(--bg-2)}
.tree-scene.sel{background:var(--bg-3)}
.tree-scene.sel::before{
  content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  width:2px;height:16px;background:var(--pos);border-radius:2px;
}
.tree-scene-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.tree-scene-no{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);width:18px;flex:0 0 18px}
.tree-scene-title{font-size:12px;color:var(--txt-1);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-scene.sel .tree-scene-title{color:var(--txt-0)}
.tree-flag{color:var(--alert);flex:0 0 auto;display:flex}

/* characters mini */
.char-row{display:flex;align-items:center;gap:9px;width:100%;padding:7px 6px;border:0;border-radius:7px;cursor:pointer;transition:.1s;background:transparent;color:inherit;font:inherit;text-align:left}
.char-row:hover{background:var(--bg-2)}
.char-av{
  width:26px;height:26px;border-radius:7px;flex:0 0 26px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:11px;color:#fff;
  border:1px solid var(--line-2);
}
.char-info{flex:1;min-width:0}
.char-name{font-size:12.5px;color:var(--txt-0);font-weight:500}
.char-role{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-2);letter-spacing:.04em;text-transform:uppercase}
.char-row.sel{background:var(--bg-3)}
.char-row.sel::before{content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:2px;height:18px;background:var(--pos);border-radius:2px}
.char-row{position:relative}
.char-drives{flex:0 0 auto;font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bg-3);display:grid;place-items:center}
.char-row:hover .char-drives,.char-row.sel .char-drives{color:var(--txt-1)}

/* ---- Character panel (inspector) ---- */
.char-head{display:flex;align-items:flex-start;gap:13px}
.char-head-av{width:48px;height:48px;flex:0 0 48px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:17px;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.char-head-name.edit-in{font-family:var(--f-display);font-size:18px;font-weight:600;color:var(--txt-0);padding:2px 6px}
.char-head-role.edit-in{font-family:var(--f-mono);font-size:10.5px;color:var(--txt-2);letter-spacing:.04em;text-transform:uppercase;padding:2px 6px}
.char-draft-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:7px;
  border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1);font-family:var(--f-ui);font-size:11px;font-weight:600;cursor:pointer;transition:.12s}
.char-draft-btn:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.char-draft-btn:disabled{opacity:.55;cursor:default}
.char-draft-btn svg{color:var(--pos)}
.sheet-head-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;flex:0 0 auto;align-items:center}
.char-draft-btn.ghost{background:transparent;border-color:var(--line-2);color:var(--txt-2)}
.char-draft-btn.ghost svg{color:var(--txt-3)}
.char-draft-btn.ghost:hover:not(:disabled){background:var(--bg-3);color:var(--txt-1)}
/* PRIMARY — the scene's main render action (accent fill) */
.char-draft-btn.primary{background:var(--accent,#d8a657);border-color:var(--accent,#d8a657);color:#1b1206}
.char-draft-btn.primary svg{color:#1b1206}
.char-draft-btn.primary:hover:not(:disabled){background:var(--accent,#d8a657);filter:brightness(1.06);color:#1b1206}
/* WORKING state — must stay obvious (don't fade to a dim disabled look). Accent fill,
   spinning icon, soft glow pulse. Overrides .ghost + :disabled (later + same specificity). */
.char-draft-btn.busy, .char-draft-btn.busy:disabled, .char-draft-btn.ghost.busy{
  opacity:1; background:var(--pos); border-color:var(--pos); color:var(--bg-0); cursor:progress;
  animation:draft-busy 1.15s ease-in-out infinite}
.char-draft-btn.busy svg, .char-draft-btn.ghost.busy svg{ color:var(--bg-0); animation:draft-busy-spin .9s linear infinite }
@keyframes draft-busy{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pos) 55%,transparent)}70%,100%{box-shadow:0 0 0 6px transparent}}
@keyframes draft-busy-spin{to{transform:rotate(360deg)}}
.char-field{margin-bottom:11px}
.char-field .obj-lab{margin-bottom:4px}

.char-arc-card{display:flex;align-items:center;gap:14px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-m);padding:12px 14px;overflow-x:auto}
.arc-spark{flex:0 0 auto}
.char-arc-meta{display:flex;flex-direction:column;gap:7px;min-width:0}
.char-arc-summary{font-family:var(--f-display);font-size:13px;font-weight:500;color:var(--txt-0);line-height:1.3}
.char-arc-verdict{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:6px;width:max-content}
.char-arc-verdict.ok{background:var(--pos-soft);color:var(--pos)}
.char-arc-verdict.no{background:var(--alert-soft);color:var(--alert)}
.char-arc-note{font-size:11.5px;line-height:1.5;color:var(--txt-2);margin-top:9px}
.char-arc-note b{color:var(--txt-1);font-weight:600}
.char-empty-arc{display:flex;gap:10px;align-items:flex-start;background:var(--alert-soft);border:1px solid var(--alert);
  border-radius:var(--r-m);padding:11px 13px;font-size:12px;line-height:1.5;color:var(--txt-1)}
.char-empty-arc svg{flex:0 0 auto;color:var(--alert);margin-top:1px}

.char-scene-list{display:flex;flex-direction:column;gap:3px}
.char-scene-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;transition:.1s}
.char-scene-row:hover{background:var(--bg-3);border-color:var(--line-3)}
.char-scene-no{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);flex:0 0 auto}
.char-scene-title{flex:1;min-width:0;font-size:12px;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.char-scene-flag{color:var(--alert);flex:0 0 auto;display:flex}
.char-scene-go{color:var(--txt-3);flex:0 0 auto;display:flex}
.char-scene-row:hover .char-scene-go{color:var(--txt-1)}

/* ============================================================
   CENTER — SPINE CANVAS
   ============================================================ */
.canvas{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-0);position:relative}
/* clean-canvas onboarding (empty/new project) */
.empty-canvas{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:6;padding:24px}
.empty-canvas-card{pointer-events:auto;max-width:440px;text-align:center;padding:30px 28px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 18px 56px rgba(0,0,0,.4)}
.empty-canvas-title{font-family:"Spectral",Georgia,serif;font-size:27px;font-weight:600;letter-spacing:-.01em;color:var(--txt-0);margin-bottom:9px}
.empty-canvas-sub{font-size:13px;line-height:1.55;color:var(--txt-2);margin-bottom:20px}
.empty-canvas-btn{font:600 13px var(--f-ui);color:var(--ink-on-accent);background:var(--accent);
  border:0;border-radius:999px;padding:11px 22px;cursor:pointer}
.empty-canvas-btn:hover{filter:brightness(1.08)}
.scroll-fade{
  position:absolute;top:96px;bottom:0;right:0;width:54px;pointer-events:none;z-index:5;
  background:linear-gradient(90deg,transparent,var(--bg-0));
}
.canvas-head{
  display:flex;align-items:center;gap:14px;padding:14px 22px 0;flex:0 0 auto;
}
.canvas-head-copy{min-width:0;max-width:100%}
.canvas-title{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0)}
.canvas-sub{font-family:var(--f-mono);font-size:11px;line-height:1.35;color:var(--txt-2);letter-spacing:.03em}
.legend{display:flex;align-items:center;gap:16px;margin-left:auto}
.legend-item{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;color:var(--txt-2);text-transform:uppercase}
.legend-swatch{width:12px;height:12px;border-radius:3px}

.canvas-scroll{flex:1;overflow-x:auto;overflow-y:auto;padding:8px 22px 26px;-webkit-overflow-scrolling:touch}
.spine-wrap{min-width:max-content}
/* grab-to-pan on desktop; cards/controls keep their own cursors */
.canvas-scroll.spine-pan{cursor:grab}
.canvas-scroll.spine-pan.grabbing{cursor:grabbing}
.canvas-scroll.spine-pan.grabbing *{cursor:grabbing !important}
.canvas-scroll.spine-pan .scard,
.canvas-scroll.spine-pan .scard *,
.canvas-scroll.spine-pan .spine-add,
.canvas-scroll.spine-pan select,
.canvas-scroll.spine-pan button{cursor:auto}
.canvas-scroll.spine-pan .scard-grip{cursor:grab}
/* board grab-to-pan */
.canvas-scroll.board-pan{cursor:grab}
.canvas-scroll.board-pan.grabbing{cursor:grabbing}
.canvas-scroll.board-pan.grabbing *{cursor:grabbing !important}
.canvas-scroll.board-pan .scard,.canvas-scroll.board-pan .scard *,
.canvas-scroll.board-pan button,.canvas-scroll.board-pan select{cursor:auto}

/* act ruler */
.act-ruler{display:flex;gap:6px;margin-bottom:6px;height:30px}
.act-band{
  border-radius:7px 7px 0 0;display:flex;align-items:center;gap:9px;padding:0 14px;
  background:var(--bg-2);border:1px solid var(--line);border-bottom:0;position:relative;overflow:hidden;
  color:inherit;font:inherit;text-align:left;
}
.act-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.act-band .no{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-0);letter-spacing:.08em}
.act-band .nm{font-family:var(--f-display);font-size:11px;color:var(--txt-2);font-weight:500;white-space:nowrap}
.act-band .pct{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);margin-left:auto}
.act-band .act-fold-ic{display:flex;color:var(--txt-3);transition:color .12s}
.act-band:hover{background:var(--bg-3)}
.act-band:hover .act-fold-ic{color:var(--txt-1)}
.act-band.collapsed .no{color:var(--txt-2)}
.spine-act-strip:hover{background:var(--bg-3)}

/* graph */
.graph-box{
  background:
    linear-gradient(180deg,var(--pos-soft) 0%,transparent 48%,transparent 52%,var(--neg-soft) 100%);
  border:1px solid var(--line);border-radius:0;position:relative;
}
.graph-svg{display:block}
.spine-svg-target:focus{outline:none}
.spine-svg-target:focus-visible{stroke:var(--accent);stroke-width:3;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 65%,transparent))}
.graph-zero-label{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:9px;color:var(--txt-3);letter-spacing:.1em}
.graph-ylabel{position:absolute;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.graph-ylabel.top{top:7px;left:9px;color:var(--pos)}
.graph-ylabel.bot{bottom:7px;left:9px;color:var(--neg)}

/* filmstrip of scene cards */
.filmstrip{display:flex;gap:6px;margin-top:6px}
.scard{
  background:var(--bg-2);border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;
  padding:11px 12px 12px;cursor:pointer;transition:.13s;position:relative;
  display:flex;flex-direction:column;gap:9px;
  color:inherit;font:inherit;text-align:left;
}
.board-act-strip,.spine-act-strip{color:inherit;font:inherit}
.audit-row{width:100%;border:0;color:inherit;font:inherit;text-align:left}
.scard:hover{background:var(--bg-3)}
.scard.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--pos-line)}
.scard.sel::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--pos);
}
/* Board cards are fully rounded (inline border-radius), so the filmstrip's
   square-top accent bar would overshoot the corners. There the selection is a
   2px ring that follows the rounded corners (inset shadow tracks border-radius). */
.board-pan .scard.sel{box-shadow:inset 0 0 0 2px var(--pos)}
.board-pan .scard.sel::before{display:none}
.scard.climax::after{
  content:"CLIMAX";position:absolute;top:8px;left:0;right:0;text-align:center;font-family:var(--f-mono);
  font-size:8px;letter-spacing:.12em;color:var(--pos);pointer-events:none;
}
.scard-top{display:flex;align-items:center;gap:7px}
.scard-no{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);font-weight:700}
.scard-conf{margin-left:auto;display:flex;gap:3px}
.conf-pip{width:5px;height:5px;border-radius:50%;background:var(--bg-5)}
.conf-pip.on{background:var(--txt-2)}
.scard-title{font-family:var(--f-display);font-size:12.5px;font-weight:500;color:var(--txt-0);line-height:1.25}
.scard.sel .scard-title{color:var(--txt-0)}
.scard-charge{display:flex;align-items:center;gap:6px}
.scard-foot{display:flex;align-items:center;gap:8px;margin-top:1px}
.scard-dur{font-family:var(--f-mono);font-size:8px;color:var(--txt-3);white-space:nowrap;flex:0 0 auto;text-align:right}

/* charge chip */
.chip{
  display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:5px;
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
}
.chip.pos{background:var(--pos-soft);color:var(--pos)}
.chip.neg{background:var(--neg-soft);color:var(--neg)}
.chip.zero{background:var(--bg-4);color:var(--txt-2)}
.chip-arrow{color:var(--txt-3);display:flex;align-items:center}

/* turn badge */
.turn-badge{
  display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:5px;white-space:nowrap;
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.turn-badge.ok{background:rgba(255,255,255,.05);color:var(--txt-1)}
.turn-badge.no{background:var(--alert-soft);color:var(--alert)}

/* ============================================================
   RIGHT — INSPECTOR
   ============================================================ */
.inspector{
  width:var(--insp-w);flex:0 0 var(--insp-w);
  background:var(--bg-1);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.insp-tabs{display:flex;gap:2px;padding:10px 12px 0;flex:0 0 auto;border-bottom:1px solid var(--line)}
.insp-tab{
  padding:8px 12px 10px;border:0;background:transparent;cursor:pointer;position:relative;
  font-family:var(--f-ui);font-size:12.5px;font-weight:500;color:var(--txt-2);transition:.12s;
}
.insp-tab:hover{color:var(--txt-1)}
.insp-tab.on{color:var(--txt-0)}
.insp-tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--pos);border-radius:2px}
.insp-scroll{flex:1;overflow-y:auto;padding:16px}

.insp-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.insp-scene-no{font-family:var(--f-mono);font-size:10px;color:var(--bg-0);background:var(--pos);border-radius:4px;padding:1px 6px;font-weight:700}
.insp-title{font-family:var(--f-display);font-size:18px;font-weight:600;color:var(--txt-0);line-height:1.15;margin-bottom:5px}
.insp-loc{font-family:var(--f-mono);font-size:10.5px;color:var(--txt-2);letter-spacing:.04em;display:flex;align-items:center;gap:6px;margin-bottom:13px}
.insp-summary{font-size:13px;line-height:1.55;color:var(--txt-1);margin-bottom:16px}

.insp-block{margin-bottom:18px}
.insp-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.insp-block-head .eyebrow{display:flex;align-items:center;gap:7px}

/* charge stepper */
.charge-grid{display:flex;align-items:stretch;gap:8px}
.charge-cell{
  flex:1;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 11px;
}
.charge-cell .lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);margin-bottom:8px}
.stepper{display:flex;align-items:center;gap:8px}
.step-btn{
  width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2);background:var(--bg-3);
  color:var(--txt-1);cursor:pointer;display:grid;place-items:center;transition:.1s;font-size:15px;
}
.step-btn:hover{background:var(--bg-4);color:var(--txt-0)}
.step-val{flex:1;text-align:center;font-family:var(--f-mono);font-size:15px;font-weight:700}
.step-val.pos{color:var(--pos)}
.step-val.neg{color:var(--neg)}
.step-val.zero{color:var(--txt-2)}
.charge-arrow{display:flex;align-items:center;color:var(--txt-3);padding-top:18px}

/* Turn Audit table: keeps desktop column widths everywhere; on narrow screens
   the table scrolls sideways inside its own container instead of crushing */
.audit-tablewrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-radius:var(--r-l)}
.audit-tablewrap::-webkit-scrollbar{display:none}
.audit-mobile-list{display:none}

/* turn verdict */
.verdict{border-radius:var(--r-m);padding:13px 14px;display:flex;gap:11px;align-items:flex-start}
.verdict.ok{background:var(--pos-soft);border:1px solid var(--pos-line)}
.verdict.no{background:var(--alert-soft);border:1px solid var(--alert)}
.verdict-icn{flex:0 0 auto;margin-top:1px}
.verdict.ok .verdict-icn{color:var(--pos)}
.verdict.no .verdict-icn{color:var(--alert)}
.verdict-t{font-family:var(--f-display);font-size:13px;font-weight:600;margin-bottom:3px}
.verdict.ok .verdict-t{color:var(--pos)}
.verdict.no .verdict-t{color:var(--alert)}
.verdict-d{font-size:11.5px;line-height:1.5;color:var(--txt-1)}

/* beat grid */
.beatgrid{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.beat-head{display:grid;grid-template-columns:34px 1fr 1fr;background:var(--bg-2);border-bottom:1px solid var(--line)}
.beat-head>div{padding:8px 10px;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.beat-head>div+div{border-left:1px solid var(--line)}
.beat-row{display:grid;grid-template-columns:34px 1fr 1fr;border-bottom:1px solid var(--line);transition:.1s}
.beat-row:last-child{border-bottom:0}
.beat-row:hover{background:var(--bg-2)}
.beat-no{padding:10px;font-family:var(--f-mono);font-size:11px;color:var(--txt-3);display:flex;align-items:flex-start;justify-content:center;font-weight:700}
.beat-cell{padding:10px;font-size:11.5px;line-height:1.45;color:var(--txt-1)}
.beat-cell+.beat-cell,.beat-no+.beat-cell{border-left:1px solid var(--line)}
.beat-cell .who{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);display:block;margin-bottom:3px}
.beat-cell .act{color:var(--txt-0)}
.beat-row.turn{background:var(--neg-soft)}
.beat-row.turn .beat-no{color:var(--neg)}
.beat-turnflag{
  grid-column:1/-1;padding:7px 12px;background:var(--bg-2);border-top:1px solid var(--neg-line);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--neg);
  display:flex;align-items:center;gap:7px;
}

/* analysis steps */
.steps{display:flex;flex-direction:column;gap:1px}
.step-item{display:flex;gap:11px;padding:10px;background:var(--bg-2);border:1px solid var(--line)}
.step-item:first-child{border-radius:var(--r-m) var(--r-m) 0 0}
.step-item:last-child{border-radius:0 0 var(--r-m) var(--r-m)}
.step-item+.step-item{border-top:0}
.step-num{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-3);
  display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;color:var(--txt-1);font-weight:700;
}
.step-body{flex:1}
.step-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2);margin-bottom:3px}
.step-txt{font-size:12px;line-height:1.5;color:var(--txt-0)}
.step-txt em{color:var(--pos);font-style:normal;font-weight:600}

/* Scene X-Ray — the change record, read in the project's framework vocabulary */
.xr-move{
  flex:0 0 auto;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:4px;border:1px solid var(--line-2);color:var(--txt-2);background:var(--bg-2);
}
.xr-move.pos{color:var(--pos);border-color:var(--pos-line);background:var(--pos-soft)}
.xr-move.neg{color:var(--neg);border-color:var(--neg-line);background:var(--neg-soft)}
.xr-find{
  padding:9px 11px;background:var(--bg-2);border:1px solid var(--line);
  border-left:2px solid var(--line-3);border-radius:4px;margin-bottom:6px;
}
.xr-find.sev2{border-left-color:var(--neg)}
.xr-find.sev1{border-left-color:var(--pos)}
.xr-find-msg{font-size:12px;line-height:1.45;color:var(--txt-0);font-weight:500}
.xr-find-fix{font-size:11px;line-height:1.5;color:var(--txt-2);margin-top:4px}
.xr-q{font-size:11px;line-height:1.5;color:var(--txt-2);margin:-4px 0 11px}

/* Causality — the same change records, aggregated by authored cause */
.xr-cz-count{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}
.xr-cz-rows{display:flex;flex-direction:column;gap:6px}
.xr-cz-row{display:grid;grid-template-columns:132px 1fr 26px;align-items:center;gap:10px}
.xr-cz-lab{font-size:11.5px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xr-cz-bar{height:7px;border-radius:4px;background:var(--bg-3);overflow:hidden}
.xr-cz-fill{display:block;height:100%;border-radius:4px;background:var(--txt-3);min-width:2px}
.xr-cz-fill.willed{background:var(--accent)}
.xr-cz-fill.imposed{background:var(--txt-3)}
.xr-cz-fill.chance{background:var(--alert)}
.xr-cz-fill.revelation{background:var(--pos,var(--txt-2))}
.xr-cz-n{font-family:var(--f-mono);font-size:10.5px;font-weight:700;color:var(--txt-2);text-align:right}
@media (max-width:640px){ .xr-cz-row{grid-template-columns:104px 1fr 24px;gap:8px} }

/* Sequence Audit — the same change records, read a unit up */
.xr-seq-list{display:flex;flex-direction:column;gap:10px}
.xr-seq{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);padding:13px 15px}
.xr-seq-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.xr-seq-name{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--txt-0)}
.xr-seq-meta{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.xr-seq-head .xr-move{margin-left:auto}
.xr-seq-shift{font-size:11.5px;color:var(--txt-1);margin-top:5px}
.xr-seq-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.xr-seq-chip{
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:3px 7px;border-radius:4px;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-2);
}
.xr-seq-chip:hover{border-color:var(--line-3);color:var(--txt-0)}
.xr-seq-chip.flag{color:var(--neg);border-color:var(--neg-line);background:var(--neg-soft)}
.xr-seq-chip.sel{background:var(--accent);border-color:var(--accent);color:var(--ink-on-accent)}

/* objective rows */
.obj-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.obj-row:last-child{border-bottom:0}
.obj-icn{flex:0 0 auto;color:var(--txt-2);margin-top:1px}
.obj-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2);margin-bottom:2px}
.obj-val{font-size:12.5px;color:var(--txt-0);line-height:1.45}

/* ============================================================
   AI CO-WRITER  (overlay panel)
   ============================================================ */
.ai-fab{
  position:absolute;right:22px;bottom:22px;z-index:20;
  display:flex;align-items:center;gap:9px;height:42px;padding:0 16px 0 14px;
  background:var(--bg-3);border:1px solid var(--line-3);border-radius:24px;
  color:var(--txt-0);font-family:var(--f-ui);font-size:13px;font-weight:500;cursor:pointer;
  box-shadow:var(--shadow-pop);transition:.15s;
}
.ai-fab:hover{background:var(--bg-4);transform:translateY(-1px)}
.ai-orb{
  width:22px;height:22px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg));
  box-shadow:0 0 12px -2px var(--pos-line);animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-fab .badge{background:var(--alert);color:#fff;font-family:var(--f-mono);font-size:9px;font-weight:700;border-radius:10px;padding:1px 6px;margin-left:2px}

.ai-panel{
  position:absolute;right:22px;bottom:22px;z-index:25;
  width:388px;max-height:min(620px,calc(100vh - 120px));
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-l);
  box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden;
  animation:popup .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes popup{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ai-head{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line)}
.ai-head .ai-orb{width:24px;height:24px}
.ai-head-t{flex:1}
.ai-head-name{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--txt-0);display:flex;align-items:center;gap:6px}
.ai-head-sub{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-2);letter-spacing:.04em}
.ai-x{width:26px;height:26px;border-radius:7px;border:0;background:transparent;color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.1s}
/* writing-model picker in the MUSE header */
.muse-model-sel{flex:0 0 auto;font:500 11px var(--f-ui);color:var(--txt-1);background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:7px;padding:5px 8px;cursor:pointer;max-width:150px}
.muse-model-sel:hover{border-color:var(--line-1);color:var(--txt-0)}
.ai-x:hover{background:var(--bg-4);color:var(--txt-0)}

.ai-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.ai-msg{display:flex;gap:9px}
.ai-msg-orb{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg));margin-top:1px}
.ai-bubble{background:var(--bg-3);border:1px solid var(--line);border-radius:11px;border-top-left-radius:3px;padding:11px 13px;font-size:12.5px;line-height:1.55;color:var(--txt-1)}
.ai-bubble strong{color:var(--txt-0);font-weight:600}
.ai-bubble .hi-pos{color:var(--pos);font-weight:600}
.ai-bubble .hi-neg{color:var(--neg);font-weight:600}
.ai-msg.me{flex-direction:row-reverse}
.ai-msg.me .ai-bubble{background:var(--bg-4);border-top-left-radius:11px;border-top-right-radius:3px;color:var(--txt-0)}
.ai-msg.me .ai-msg-orb{background:linear-gradient(135deg,#3a4a5a,#1f262e)}

/* flag card inside ai */
.flag-card{border:1px solid var(--alert);background:var(--alert-soft);border-radius:10px;padding:11px 12px;margin-top:3px}
.flag-card.warn{border-color:var(--neg-line);background:var(--neg-soft)}
.flag-card-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.flag-card-top .sc{font-family:var(--f-mono);font-size:9px;color:var(--txt-2);letter-spacing:.06em}
.flag-card-t{font-family:var(--f-display);font-size:12px;font-weight:600;color:var(--alert)}
.flag-card.warn .flag-card-t{color:var(--neg)}
.flag-card-d{font-size:11.5px;line-height:1.5;color:var(--txt-1)}
.flag-act{display:flex;gap:7px;margin-top:9px}
.flag-btn{
  font-family:var(--f-ui);font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-0);transition:.1s;
}
.flag-btn:hover{background:var(--bg-4)}
.flag-btn.primary{background:var(--pos);border-color:transparent;color:var(--ink-on-accent)}

.ai-chips-wrap{padding:2px 14px 10px}
.ai-chips-label{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:7px;padding-left:1px}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px}
.ai-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-ui);font-size:11.5px;font-weight:500;color:var(--txt-1);cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:18px;padding:5px 11px;transition:.1s;
  text-align:left;
}
.ai-chip-q{color:var(--pos);font-weight:700}
.ai-chip:hover{background:var(--bg-4);color:var(--txt-0);border-color:var(--line-3)}
.ai-chip.skel{pointer-events:none;color:transparent;border-color:var(--line);
  width:120px;height:28px;background:linear-gradient(90deg,var(--bg-2),var(--bg-3),var(--bg-2));
  background-size:200% 100%;animation:chipskel 1.1s linear infinite}
.ai-chip.skel:nth-child(2){width:150px}
.ai-chip.skel:nth-child(3){width:104px}
@keyframes chipskel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ai-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.ai-input input{
  flex:1;height:36px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;
  padding:0 12px;color:var(--txt-0);font-family:var(--f-ui);font-size:12.5px;outline:none;
}
.ai-input input:focus{border-color:var(--line-3)}
.ai-input input::placeholder{color:var(--txt-3)}
.ai-send{width:36px;height:36px;flex:0 0 36px;border-radius:9px;border:0;background:var(--pos);color:var(--ink-on-accent);cursor:pointer;display:grid;place-items:center}
.ai-send:hover{filter:brightness(1.07)}

/* empty state */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--txt-2);text-align:center;padding:40px}
.empty svg{opacity:.4}
.empty-t{font-family:var(--f-display);font-size:14px;color:var(--txt-1)}
.empty-d{font-size:12.5px;max-width:240px;line-height:1.5}

/* generic divider label */
.divider{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.divider .eyebrow{flex:0 0 auto}
.divider .ln{flex:1;height:1px;background:var(--line)}

/* ============================================================
   SCRIPT VIEW — beats → screenplay bridge
   ============================================================ */
.script-scroll{flex:1;overflow-y:auto;padding:22px 26px 60px}
.script-head{max-width:1000px;margin:0 auto 18px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
/* HEADER RHYTHM — context (scene + slugline) → title → status, one weight each.
   The meta column was allowed to shrink to 220px while the toolbar kept its full width,
   so the scene title wrapped ("Bedtime / Check") even on a wide screen. Give the title
   column the larger basis and let the TOOLBAR wrap first when space runs out. */
.script-head>*:first-child{flex:1 1 460px;min-width:300px}
.script-head .meta{flex:1;min-width:0}
.script-slug{font-family:var(--f-mono);font-size:11px;color:var(--txt-2);letter-spacing:.04em;margin-bottom:5px}
/* the provenance badge shares the title's row but must never force the title to wrap:
   the ROW wraps, dropping the badge to its own line, before the title breaks */
.script-title-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
.script-title{font-family:var(--f-display);font-size:20px;font-weight:600;color:var(--txt-0);line-height:1.25}
.script-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}
.script-missing{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;color:#e2a24e;
  border:1px solid color-mix(in srgb,#e2a24e 45%,transparent);background:color-mix(in srgb,#e2a24e 10%,transparent);
  border-radius:20px;padding:3px 10px;
}
.story-sync{display:inline-flex;align-items:center;gap:6px;font:700 10px var(--f-mono);letter-spacing:.02em;
  border:1px solid var(--line-2);border-radius:20px;padding:3px 9px;color:var(--txt-2);background:var(--bg-2)}
.story-sync.current{color:var(--pos);border-color:var(--pos-line)}
.story-sync.stale,.story-sync.missing{color:var(--neg);border-color:var(--neg-line);background:var(--neg-soft)}
.story-sync.unverified{color:var(--warn,#c69242);border-color:color-mix(in srgb,var(--warn,#c69242) 50%,transparent)}
.story-sync-panel,.story-sync-downstream{display:flex;align-items:flex-start;gap:9px;margin:0 0 12px;padding:9px 11px;
  border:1px solid var(--line-2);border-radius:8px;background:var(--bg-2);font-size:11.5px;line-height:1.4;color:var(--txt-2)}
.story-sync-panel>svg,.story-sync-downstream>svg{flex:0 0 auto;margin-top:1px}
.story-sync-panel>div,.story-sync-downstream>div{display:flex;flex-direction:column;gap:2px}
.story-sync-panel b,.story-sync-downstream b{color:var(--txt-0)}
.story-sync-panel.current{border-color:var(--pos-line);background:var(--pos-soft)}
.story-sync-panel.stale,.story-sync-panel.missing,.story-sync-downstream{border-color:var(--neg-line);background:var(--neg-soft)}
.story-sync-panel.unverified{border-color:color-mix(in srgb,var(--warn,#c69242) 45%,transparent)}
.story-sync-downstream{margin:10px 18px}.story-sync-downstream.stage{margin:10px 14px 0}
.script-structure-error{display:flex;gap:9px;align-items:flex-start;margin:10px 20px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--alert) 45%,transparent);border-radius:9px;background:color-mix(in srgb,var(--alert) 9%,var(--panel));color:var(--text);font-size:12px;line-height:1.45}
.script-structure-error svg{flex:0 0 auto;color:var(--alert);margin-top:1px}
.script-ai-fallback{display:flex;gap:10px;align-items:flex-start;margin:10px 20px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--alert) 50%,transparent);border-radius:9px;background:color-mix(in srgb,var(--alert) 10%,var(--panel));font-size:12px;line-height:1.4}
.script-ai-fallback>svg{flex:0 0 auto;color:var(--alert);margin-top:2px}
.script-ai-fallback-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.script-ai-fallback-copy small{color:var(--txt-2);overflow-wrap:anywhere}
.script-ai-fallback .draft-btn{flex:0 0 auto}
.script-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.script-scenestep{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;color:var(--txt-2)}

.script-body{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:188px 1fr}
.sp-seg{display:contents}
.sp-gut{
  width:100%;padding:18px 18px 6px 0;text-align:right;border:0;border-right:1px solid var(--line-2);
  background:transparent;color:inherit;font:inherit;
  position:relative;cursor:pointer;transition:.12s;
  /* the gutter is a TAP TARGET (focus the beat), not content — without this, touch
     devices pop the text-selection UI (blue handles + highlight) on accidental presses */
  user-select:none;-webkit-user-select:none;
}
.sp-gut:hover{background:rgba(255,255,255,.02)}
.sp-gut .bnum{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--bg-4);color:var(--txt-1);font-family:var(--f-mono);font-size:10px;font-weight:700;margin-bottom:6px;
}
.sp-gut .blab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-1);line-height:1.4}
.sp-gut .bsub{font-size:10.5px;color:var(--txt-3);line-height:1.4;margin-top:3px}
.sp-gut.on .bnum{background:var(--pos);color:var(--ink-on-accent)}
.sp-gut.on .blab{color:var(--pos)}
.sp-seg.missing-script .sp-gut .bnum{background:var(--neg-soft,rgba(224,105,138,.14));color:var(--neg,#e0698a)}
.sp-seg.missing-script .sp-gut .bsub{color:var(--neg,#e0698a)}
.sp-gut::after{content:"";position:absolute;right:-1px;top:18px;bottom:0;width:2px;background:transparent}
.sp-gut.on::after{background:var(--pos)}
.scard:focus-visible,.board-act-strip:focus-visible,.spine-act-strip:focus-visible,
.act-band:focus-visible,.tree-act-head:focus-visible,.tree-scene:focus-visible,
.char-row:focus-visible,.sp-gut:focus-visible,.audit-row:focus-visible,.audit-mobile-card:focus-visible,
.rail-sec-toggle:focus-visible,.strip-clickable:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.audit-mobile-card{color:inherit;font:inherit;text-align:left}

.sp-page{
  background:#f4f1e9;color:#1b1a16;padding:16px 60px 22px;
  font-family:var(--f-mono);font-size:12.5px;line-height:1.55;
  box-shadow:inset 0 0 0 0 var(--pos);transition:box-shadow .12s;
}
/* active beat (hover or click in the gutter) — accent the screenplay block's left edge */
.sp-seg:first-child .sp-page{padding-top:40px;border-radius:0 6px 0 0}
.sp-seg:last-child .sp-page{padding-bottom:48px;border-radius:0 0 6px 0}
.sp-seg:first-child .sp-gut{border-radius:6px 0 0 0;background:rgba(255,255,255,.015)}
.sp-page-inner{max-width:600px}

.spb-scene{font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:4px 0 12px;color:#111}
.spb-action{margin:0 0 11px;color:#26241e}
.spb-missing{color:#8d7f63;font-style:italic}
/* the one-click fix under a "no screenplay text" gap — writes just that beat's prose */
.spb-missing-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.spb-write-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:8px;background:var(--bg-2);color:var(--txt-1);
  font-size:11.5px;font-weight:600;transition:border-color .12s ease,color .12s ease,background .12s ease}
.spb-write-btn:hover:not(:disabled){border-color:var(--accent,#d8a657);color:var(--txt-0)}
.spb-write-btn:disabled{opacity:.55;cursor:default}
.spb-write-btn .ns-spin{width:11px;height:11px}
.spb-char{margin:10px 0 0;padding-left:42%;text-transform:uppercase;color:#111;font-weight:700;letter-spacing:.02em}
.spb-paren{padding-left:34%;color:#6b6657;margin:0}
.spb-dia{padding-left:24%;padding-right:8%;margin:0 0 2px;color:#1b1a16}
.spb-trans{text-align:right;text-transform:uppercase;font-weight:700;letter-spacing:.02em;color:#111;margin:12px 0}

/* EDIT MODE — each screenplay block becomes a directly-editable line (the page stays
   on its paper colours, so these are dark-on-light regardless of the app theme) */
/* longhand padding so each block type's INDUSTRY indent (char 42% / paren 34% /
   dia 24%) survives in edit mode — the old shorthand clobbered padding-left and
   every element rendered flush-left while editing */
.sp-editable{outline:0;border-radius:5px;padding-top:2px;padding-bottom:2px;padding-right:6px;cursor:text;white-space:pre-wrap;min-height:1.25em;transition:background .12s,box-shadow .12s}
.spb-action.sp-editable,.spb-scene.sp-editable{padding-left:6px;margin-left:-6px}
.spb-sctext.sp-editable{display:inline-block;min-width:60px;padding-left:4px}
.sp-addrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.sp-add-btn,.sp-add-chip{border:1px dashed var(--line-3,#c9c2b4);border-radius:7px;background:transparent;
  color:#8a8371;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;padding:3px 9px;cursor:pointer}
.sp-add-btn:hover,.sp-add-chip:hover{border-style:solid;color:#111;border-color:#111}
.sp-add-chip.ghost{border-style:solid;padding:3px 7px}
.sp-editable:hover{background:rgba(0,0,0,.04)}
.sp-editable:focus{background:#fff;box-shadow:0 0 0 2px var(--brand)}
.sp-editable:empty::before{content:attr(data-ph);color:#b9b2a3;pointer-events:none}
.script-body.editing{position:relative}
.script-body.editing .sp-gut{opacity:.45}
.script-body.editing .sp-page{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);border-radius:6px}

.script-empty{
  max-width:560px;margin:40px auto;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-l);padding:30px;text-align:center;
}
.script-empty .ico{width:56px;height:56px;border-radius:14px;background:var(--bg-3);display:grid;place-items:center;margin:0 auto 16px;color:var(--txt-2)}
.script-empty h3{font-family:var(--f-display);font-size:16px;color:var(--txt-0);margin-bottom:8px;font-weight:600}
.script-empty p{font-size:13px;color:var(--txt-1);line-height:1.55;margin-bottom:18px;max-width:420px;margin-left:auto;margin-right:auto}
.script-empty .beats-pre{display:flex;flex-direction:column;gap:6px;text-align:left;margin-bottom:20px}
.sp-pre-row{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;color:var(--txt-2);background:var(--bg-1);border:1px solid var(--line);border-radius:7px;padding:7px 10px}
.sp-pre-row .n{color:var(--txt-3);font-weight:700}
.sp-pre-row .arrow{margin-left:auto;color:var(--txt-3)}
.draft-btn{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:10px;border:0;
  background:var(--pos);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:13px;font-weight:600;cursor:pointer;
}
.draft-btn:hover{filter:brightness(1.07)}
.draft-btn.sm{height:32px;padding:0 13px;font-size:12px}
.draft-btn.ghost{background:var(--bg-3);color:var(--txt-0);border:1px solid var(--line-2)}
.draft-btn.ghost:hover{background:var(--bg-4);filter:none}

/* transition hinge bars */
.sp-trans{
  max-width:1000px;margin:0 auto 12px;display:flex;align-items:center;gap:11px;
  padding:9px 14px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
}
.sp-trans.out{margin:14px auto 0}
.sp-trans .ttype{
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--pos);border:1px solid var(--pos-line);border-radius:5px;padding:3px 8px;white-space:nowrap;
}
.sp-trans .ttype.contrast{color:var(--neg);border-color:var(--neg-line)}
.sp-trans .ttype.act{color:var(--txt-0);border-color:var(--line-3);background:var(--bg-4)}
.sp-trans .tgloss{font-size:11.5px;color:var(--txt-1);line-height:1.4}
.sp-trans .tdir{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-3);margin-left:auto;white-space:nowrap;display:flex;align-items:center;gap:6px}

/* continuity ledger */
.sp-carry{max-width:1000px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:7px}
.sp-carry .clab2{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);width:100%;margin-bottom:1px;display:flex;align-items:center;gap:6px}
.sp-carry .cell{display:flex;flex-direction:column;gap:2px;background:var(--bg-1);border:1px solid var(--line);border-radius:7px;padding:7px 11px;min-width:90px}
.sp-carry .cell .clab{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.sp-carry .cell .cval{font-size:11.5px;color:var(--txt-1)}
.sp-carry .cell .cval em{font-style:normal;color:var(--pos);font-weight:600}
.sp-carry .cell .cval em.neg{color:var(--neg)}

/* draft badges + progress */
.sp-badge{
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  border-radius:5px;padding:3px 7px;white-space:nowrap;
}
.sp-badge.polished{color:var(--pos);background:var(--pos-soft)}
.sp-badge.structural{color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line-2)}
/* engine provenance rides the version badge ("MUSE draft · Kimi K3") — muted, same chip */
.sp-badge .sp-badge-model{opacity:.72;font-weight:500;white-space:nowrap}
/* when the version was written — quieter still than the engine name */
.sp-badge .sp-badge-when{opacity:.55;font-weight:500;white-space:nowrap}
/* beat-map provenance line in the Inspector's Beats tab */
.beat-by-line{display:flex;align-items:center;gap:5px;margin:0 0 10px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.03em;color:var(--txt-2)}
.draft-prog{display:flex;align-items:center;gap:11px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:8px 13px}
.draft-prog .lbl{font-family:var(--f-mono);font-size:11px;color:var(--txt-1)}
.draft-prog .bar{width:150px;height:6px;border-radius:4px;background:var(--bg-4);overflow:hidden}
.draft-prog .bar i{display:block;height:100%;background:var(--pos);transition:width .18s linear}
.draft-prog .orb{width:16px;height:16px;border-radius:50%;background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg));animation:spin 1.2s linear infinite}

/* ============================================================
   CONTINUITY + POLISH (Script view additions)
   ============================================================ */
.tier-seg{display:flex;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
.tier-seg button{border:0;background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:6px;cursor:pointer;transition:.12s}
.tier-seg button.on{background:var(--bg-5);color:var(--txt-0)}
.tier-seg button:disabled{opacity:.5;cursor:default}

/* version history control */
.ver-ctl{display:flex;align-items:center;gap:6px;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:3px 4px}
.ver-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--txt-1);font-family:var(--f-ui);font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:6px;cursor:pointer;transition:.12s}
.ver-btn:hover:not(:disabled){background:var(--bg-5);color:var(--txt-0)}
.ver-btn:disabled{opacity:.32;cursor:default}
.ver-btn.icon{padding:4px 7px}
.ver-now{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;color:var(--txt-2);padding:0 4px;white-space:nowrap}

.cont-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:8px;cursor:pointer;font-family:var(--f-ui);font-size:12px;font-weight:600;transition:.12s}
.cont-btn.ok{background:var(--pos-soft);color:var(--pos);border:1px solid var(--pos-line)}
.cont-btn.warn{background:var(--alert-soft);color:var(--alert);border:1px solid var(--alert)}
.cont-btn:hover{filter:brightness(1.08)}

/* the Script toolbar = two groups, so mobile can stack them as two lines with the
   SAME desktop look. Group A is a glued strip inside a housing container (border +
   radius on the container, 32px cells, hairline dividers); group B is the accent
   Redraft button beside the housed scene pager. */
.st-group{display:flex;align-items:stretch;flex:0 0 auto}
.st-group.a{border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.st-group.a::-webkit-scrollbar{display:none}
.st-group.a>*{height:32px;border:0;border-radius:0;flex:0 0 auto}
.st-group.a>*+*{border-left:1px solid var(--line-2)}
.st-group.a>.cont-btn.ok,.st-group.a>.cont-btn.warn{border:0;border-radius:0}
.st-group.a>.ver-ctl{border:0;border-radius:0;background:transparent;padding:0 3px}
.st-group.a>.ver-ctl+*{border-left:1px solid var(--line-2)}
.st-group.b{gap:8px;align-items:center}
.st-group.b .draft-btn.sm{height:32px}
.st-group.b .script-scenestep{height:32px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);padding:0 8px}

/* Redraft button drops its middle word on very narrow screens: "Redraft from beats" */
@media (max-width:400px){ .draft-btn .redraft-long{display:none} }

/* EDIT MODE: per-element remove control — deleting commits a version (Undo restores) */
.sp-editwrap{position:relative}
.sp-del-btn{position:absolute;right:0;top:1px;width:20px;height:20px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:6px;background:var(--bg-2);color:var(--txt-3);
  font-size:13px;line-height:1;cursor:pointer;opacity:.35;transition:.12s}
.sp-editwrap:hover .sp-del-btn,.sp-editwrap:focus-within .sp-del-btn{opacity:1}
.sp-del-btn:hover{color:var(--neg);border-color:var(--neg)}

.cont-report{max-width:1000px;margin:0 auto 14px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden}
.cont-report-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.cont-report-head .t{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--txt-0);display:flex;align-items:center;gap:8px}
.cont-report-head .sub{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);margin-left:auto;letter-spacing:.04em}
.cont-explain{padding:11px 16px;font-size:11.5px;line-height:1.5;color:var(--txt-2);border-bottom:1px solid var(--line);background:var(--bg-1)}
.cont-explain b{color:var(--txt-1);font-weight:600}
.cont-row{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:.1s;align-items:center}
.cont-row:last-child{border-bottom:0}
.cont-row:hover{background:var(--bg-3)}
.cont-row .ic{flex:0 0 auto;align-self:flex-start;margin-top:1px}
.cont-row.error .ic{color:var(--alert)}
.cont-row.warn .ic{color:var(--neg)}
.cont-row .body{flex:1}
.cont-row .kind{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;display:flex;gap:8px;align-items:center}
.cont-row.error .kind{color:var(--alert)}
.cont-row.warn .kind{color:var(--neg)}
.cont-row .kind .sc{color:var(--txt-3)}
.cont-row .msg{font-size:12.5px;color:var(--txt-1);line-height:1.45}
.cont-row .fix{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;color:var(--txt-2);font-style:italic}
.cont-row .fix svg{color:var(--pos);flex:0 0 auto}
.cont-jump{flex:0 0 auto;display:flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line-2);border-radius:20px;padding:5px 11px;transition:.1s;white-space:nowrap}
.cont-row:hover .cont-jump{color:var(--txt-0);border-color:var(--line-3);background:var(--bg-4)}
.cont-clean{padding:20px 16px;display:flex;align-items:center;gap:11px;color:var(--txt-1);font-size:13px}
.cont-clean .ic{color:var(--pos)}

.cont-inline{max-width:1000px;margin:0 auto 12px;display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:9px;background:var(--alert-soft);border:1px solid var(--alert)}
.cont-inline.warn{background:var(--neg-soft);border-color:var(--neg-line)}
.cont-inline .ic{flex:0 0 auto;color:var(--alert);margin-top:1px}
.cont-inline.warn .ic{color:var(--neg)}
.cont-inline .tx{font-size:12px;color:var(--txt-1);line-height:1.45}
.cont-inline .tx b{color:var(--txt-0)}

.sp-seg.polishing .sp-page{animation:polishpulse .55s ease}@keyframes polishpulse{0%{background:#fff5e2}100%{background:#f4f1e9}}
.script-body.just-polished .sp-page{animation:polishpulse 1s ease}
.polish-note{display:flex;align-items:center;gap:8px;max-width:1000px;margin:0 auto 12px;
  font-family:var(--f-mono);font-size:10.5px;color:var(--pos);letter-spacing:.03em}

/* MUSE typing indicator */
.ai-typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.ai-typing i{width:6px;height:6px;border-radius:50%;background:var(--txt-2);display:inline-block;animation:aitype 1s infinite ease-in-out}
.ai-typing i:nth-child(2){animation-delay:.16s}
.ai-typing i:nth-child(3){animation-delay:.32s}
@keyframes aitype{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ============================================================
   EDITING (inspector + spine)
   ============================================================ */
.edit-in{display:block;width:100%;background:transparent;border:1px solid transparent;border-radius:6px;color:inherit;font:inherit;padding:3px 6px;transition:.1s;resize:vertical}
.edit-in:hover{background:var(--bg-2)}
.edit-in:focus{outline:none;background:var(--bg-1);border-color:var(--line-3)}
.edit-in::placeholder{color:var(--txt-3)}
textarea.edit-in{line-height:1.5;min-height:36px;font-family:var(--f-ui);box-sizing:border-box;overflow:hidden;resize:none}
/* EditableItemList — individually editable bullet rows (worn/carried) */
.eil{display:flex;flex-direction:column;gap:2px}
.eil-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px}
.eil-row{display:flex;align-items:flex-start;gap:4px}
.eil-dot{flex:0 0 auto;width:4px;height:4px;border-radius:50%;background:var(--txt-3);margin:11px 3px 0 3px}
.eil-row .edit-in{flex:1;min-width:0;min-height:28px}
.eil-del{flex:0 0 auto;opacity:0;background:transparent;border:none;color:var(--txt-3);cursor:pointer;
  padding:4px;border-radius:5px;display:inline-flex;align-items:center;margin-top:4px;transition:.1s}
.eil-row:hover .eil-del{opacity:1}
.eil-del:hover{background:var(--bg-3);color:var(--alert)}
.eil-add{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:3px;
  background:transparent;border:1px dashed var(--line-3);color:var(--txt-2);font-family:var(--f-ui);font-size:11px;
  padding:4px 9px;border-radius:6px;cursor:pointer;transition:.1s}
.eil-add:hover{background:var(--bg-2);color:var(--txt-0);border-color:var(--line-2)}
.insp-title.edit-in{font-family:var(--f-display);font-size:18px;font-weight:600;color:var(--txt-0);margin-bottom:3px}
.loc.edit-in{font-family:var(--f-mono);font-size:11px;color:var(--txt-2);letter-spacing:.03em}
.summary.edit-in{font-size:13px;color:var(--txt-1);line-height:1.5}
.charge-name.edit-in{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0);text-align:center;margin-bottom:6px}

.insp-select{background:var(--bg-3);border:1px solid var(--line-2);border-radius:7px;color:var(--txt-0);font-family:var(--f-ui);font-size:12px;padding:5px 8px;cursor:pointer}
.insp-select:focus{outline:none;border-color:var(--line-3)}

.conf-edit{display:flex;gap:5px}
.conf-edit .pip{width:24px;height:10px;border:0;padding:0;border-radius:4px;background:var(--bg-4);cursor:pointer;transition:.1s}
.conf-edit .pip.on{background:var(--txt-1)}
.conf-edit .pip:hover{background:var(--txt-2)}

.insp-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.ia-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:7px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1);font-family:var(--f-ui);font-size:12px;font-weight:500;cursor:pointer;transition:.1s}
.ia-btn:hover{background:var(--bg-4);color:var(--txt-0)}
.ia-btn:disabled{opacity:.4;cursor:default}
.ia-btn.danger{margin-left:auto;border-color:transparent}
.ia-btn.danger:hover{background:var(--alert-soft);color:var(--alert)}

/* beat editor */
.beat-labels{display:flex;gap:8px;margin-bottom:10px}
.beat-labels .cell{flex:1}
.beat-edit{border:1px solid var(--line);border-radius:var(--r-m);padding:9px 10px;margin-bottom:8px;background:var(--bg-2);transition:box-shadow .15s,background .15s}
.beat-edit.turn{border-color:var(--neg-line)}
/* beat opened from the Script gutter — ring it so the link reads at a glance */
.beat-edit.focus{box-shadow:0 0 0 2px var(--pos-line);background:var(--bg-3)}
.beat-edit-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.beat-edit-head .bn{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;font-weight:700;background:var(--bg-4);color:var(--txt-1);flex:0 0 auto}
.beat-edit.turn .bn{background:var(--neg);color:#08272e}
.beat-turn-btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);background:transparent;border:1px solid var(--line-2);border-radius:5px;padding:3px 7px;cursor:pointer;transition:.1s}

.beat-turn-btn:hover{color:var(--txt-1)}
.beat-edit.turn .beat-turn-btn{color:var(--neg);border-color:var(--neg-line)}
.beat-edit-tools{margin-left:auto;display:flex;gap:2px}
.bx{width:24px;height:24px;border-radius:6px;border:0;background:transparent;color:var(--txt-3);cursor:pointer;display:grid;place-items:center;transition:.1s}
.bx:hover{background:var(--bg-4);color:var(--txt-0)}
.bx:disabled{opacity:.3;cursor:default}
.beat-edit-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.beat-edit-col .clab{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin-bottom:3px}
/* Action = compact, mono, bright-grey caps · Behaviour = larger, dim prose */
.edit-in.bt-act{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--txt-0);margin-bottom:3px}
.edit-in.bt-beh{font-size:12.5px;color:var(--txt-2);line-height:1.5;font-family:var(--f-ui)}
.add-beat{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;height:34px;border-radius:8px;border:1px dashed var(--line-3);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:12px;font-weight:500;cursor:pointer;transition:.1s;margin-top:2px}
.add-beat:hover{background:var(--bg-2);color:var(--txt-0)}

/* spine: drag-reorder + add scene */
.scard{user-select:none}
.scard.dragging{opacity:.35}
.scard.dragover{box-shadow:inset 0 0 0 2px var(--pos)}
.scard-grip{position:absolute;top:7px;right:8px;color:var(--txt-3);cursor:grab;opacity:0;transition:.12s}
.scard:hover .scard-grip{opacity:.7}
.scard-grip:active{cursor:grabbing}
.scard.climax .scard-grip{top:22px}
.spine-add{flex:0 0 auto;width:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1px dashed var(--line-3);border-top:0;border-radius:0 0 8px 8px;background:transparent;color:var(--txt-2);
  cursor:pointer;font-family:var(--f-ui);font-size:12px;font-weight:500;transition:.12s}
.spine-add:hover{background:var(--bg-2);color:var(--txt-0)}
.tree-scene[draggable]{cursor:grab}
.tree-scene.dragover{box-shadow:inset 2px 0 0 var(--pos)}

/* ============================================================
   NEW STORY intake (modal overlay)
   ============================================================ */
.ns-overlay{position:fixed;inset:0;z-index:82;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:24px;opacity:1}
.ns-panel{width:min(600px,96vw);max-height:min(88vh,820px);background:var(--bg-1);border:1px solid var(--line-3);
  border-radius:var(--r-l);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden}
.ns-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ns-head-t{display:flex;align-items:center;gap:11px;flex:1}
.ns-orb{width:30px;height:30px;border-radius:9px;flex:0 0 30px;background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg));
  box-shadow:0 0 16px -3px var(--pos-line);animation:spin 9s linear infinite}
.ns-title{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0)}
.ns-sub{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);letter-spacing:.03em}
/* progress stepper — the four intake screens */
.ns-steps{display:flex;align-items:center;gap:7px;padding:10px 18px;border-bottom:1px solid var(--line)}
.ns-step{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.ns-step::after{content:"";width:14px;height:1px;background:var(--line-2);margin-left:1px}
.ns-step:last-child::after{display:none}
.ns-step-dot{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:0 0 18px;
  font-family:var(--f-mono);font-size:9px;font-weight:700;background:var(--bg-3);color:var(--txt-3);
  border:1px solid var(--line-2);transition:.15s}
.ns-step-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);transition:.15s}
.ns-step.on .ns-step-dot{background:var(--pos);border-color:transparent;color:var(--ink-on-accent)}
.ns-step.on .ns-step-lab{color:var(--txt-0)}
.ns-step.done .ns-step-dot{background:var(--pos-soft);border-color:var(--pos-line);color:var(--pos)}
.ns-step.done .ns-step-lab{color:var(--txt-2)}
@media (max-width:560px){ .ns-step-lab{display:none} .ns-step::after{width:10px} }
.ns-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:13px}
.ns-seclab{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.ns-chips{display:flex;flex-wrap:wrap;gap:8px}
.ns-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);color:var(--txt-1);font-family:var(--f-ui);font-size:12.5px;font-weight:500;transition:.12s}
.ns-chip:hover{background:var(--bg-3);color:var(--txt-0)}
.ns-chip.on{background:var(--pos);border-color:transparent;color:var(--ink-on-accent)}
.ns-chip svg{opacity:.85}
.ns-hint{font-size:12px;color:var(--txt-2);font-style:italic}
.ns-field{display:flex;flex-direction:column;gap:6px}
.ns-input-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.ns-input{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:11px 13px;
  color:var(--txt-0);font-family:var(--f-ui);font-size:13.5px;line-height:1.5;outline:none;resize:vertical}
.ns-input:focus{border-color:var(--line-3)}
.ns-input::placeholder{color:var(--txt-3)}
.ns-surprise{display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:9px;background:var(--bg-2);
  border:1px dashed var(--line-3);font-size:12.5px;color:var(--txt-1)}
.ns-surprise svg{color:var(--pos);flex:0 0 auto}
.ns-err{font-size:12px;color:var(--alert)}

/* ---- Talk it through (voice interview) ---- */
.ns-talk{gap:11px}
.ns-talk-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ns-talk-status{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--txt-2)}
.ns-talk-orb{width:11px;height:11px;border-radius:50%;flex:0 0 11px;background:var(--txt-3)}
.ns-talk-orb.live{background:var(--neg);box-shadow:0 0 0 0 var(--neg);animation:talkpulse 1.3s ease-out infinite}
.ns-talk-orb.think{background:var(--pos);animation:talkpulse 1s ease-out infinite}
@keyframes talkpulse{0%{box-shadow:0 0 0 0 color-mix(in oklch,currentColor 40%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ns-talk-mute{display:inline-flex;align-items:center;gap:5px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:8px;padding:5px 9px;cursor:pointer;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-2);transition:.12s}
.ns-talk-mute:hover{background:var(--bg-4);color:var(--txt-0)}
.ns-talk-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:9px;
  background:var(--bg-2);border:1px dashed var(--line-3);font-size:12px;line-height:1.45;color:var(--txt-1)}
.ns-talk-note svg{color:var(--pos);flex:0 0 auto;margin-top:1px}
.ns-talk-note b{color:var(--txt-0);font-weight:600}

.ns-talk-thread{display:flex;flex-direction:column;gap:9px;min-height:200px;max-height:46vh;overflow-y:auto;
  padding:14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.ns-talk-msg{display:flex}
.ns-talk-msg.assistant{justify-content:flex-start}
.ns-talk-msg.user{justify-content:flex-end}
.ns-talk-bubble{max-width:82%;padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.5}
.ns-talk-msg.assistant .ns-talk-bubble{background:var(--bg-4);color:var(--txt-0);border-bottom-left-radius:4px}
.ns-talk-msg.user .ns-talk-bubble{background:var(--pos);color:var(--ink-on-accent);border-bottom-right-radius:4px}
.ns-talk-msg.pending .ns-talk-bubble{opacity:.6;font-style:italic}
.ns-talk-dots{display:inline-flex;gap:4px;align-items:center;height:8px}
.ns-talk-dots i{width:6px;height:6px;border-radius:50%;background:var(--txt-3);animation:talkdot 1.1s infinite ease-in-out}
.ns-talk-dots i:nth-child(2){animation-delay:.18s}
.ns-talk-dots i:nth-child(3){animation-delay:.36s}
@keyframes talkdot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.ns-talk-input{display:flex;align-items:center;gap:9px}
.ns-talk-type{flex:1;min-width:0}
.ns-mic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);transition:.14s}
.ns-mic:hover{background:var(--bg-4);color:var(--txt-0)}
.ns-mic.on{background:var(--neg);border-color:transparent;color:#fff;box-shadow:0 0 0 0 var(--neg);animation:talkpulse 1.3s ease-out infinite}
.ns-mic:disabled{opacity:.5;cursor:default}
.ns-foot{display:flex;gap:9px;justify-content:flex-end;align-items:center;margin-top:2px}
.ns-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:9px;cursor:pointer;
  font-family:var(--f-ui);font-size:13px;font-weight:600;border:1px solid var(--line-2);transition:.12s}
.ns-btn.ghost{background:var(--bg-3);color:var(--txt-1)}
.ns-btn.ghost:hover{background:var(--bg-4);color:var(--txt-0)}
.ns-btn.link{background:transparent;border-color:transparent;color:var(--txt-2);margin-right:auto}
.ns-btn.link:hover{color:var(--txt-0)}
.ns-btn.primary{background:var(--pos);border-color:transparent;color:var(--ink-on-accent)}
.ns-btn.primary:hover{filter:brightness(1.08)}
.ns-btn:disabled{opacity:.55;cursor:default}
.ns-spin,.ns-spin::after{width:14px;height:14px;border-radius:50%}
.ns-spin{border:2px solid rgba(26,18,5,.3);border-top-color:var(--ink-on-accent);animation:spin .7s linear infinite;display:inline-block}
.ns-cands{display:flex;flex-direction:column;gap:8px}
.ns-cand{display:flex;gap:10px;align-items:flex-start;text-align:left;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 13px;cursor:pointer;transition:.12s}
.ns-cand:hover{background:var(--bg-3)}
.ns-cand.on{border-color:var(--pos-line);box-shadow:inset 0 0 0 1px var(--pos-line)}
.ns-cand-dot{width:14px;height:14px;border-radius:50%;flex:0 0 14px;margin-top:2px;border:2px solid var(--line-3)}
.ns-cand.on .ns-cand-dot{border-color:var(--pos);background:radial-gradient(var(--pos) 40%,transparent 45%)}
.ns-cand-tx{font-size:13px;line-height:1.5;color:var(--txt-0)}

/* ---- synopsis / research stage ---- */
.syn-titlerow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.syn-worktitle{font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:.01em;color:var(--txt-0);text-transform:uppercase}
/* editable working title — reads like the heading, behaves like a field */
.syn-title-input{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:8px;
  padding:5px 8px;margin:-5px -8px;outline:none;transition:.12s}
.syn-title-input::placeholder{color:var(--txt-3)}
.syn-title-input:hover{border-color:var(--line-2)}
.syn-title-input:focus{border-color:var(--line-3);background:var(--bg-2)}
.syn-research-toggle{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:8px;padding:6px 10px;cursor:pointer;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--txt-2);transition:.12s}
.syn-research-toggle:hover{background:var(--bg-4);color:var(--txt-0)}
.syn-research{display:flex;flex-direction:column;gap:11px;padding:14px;border-radius:11px;
  background:var(--bg-2);border:1px solid var(--line)}
.syn-research-head{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--pos)}
.syn-pillar{display:flex;flex-direction:column;gap:5px}
.syn-pillar-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.syn-pillar-tx{font-size:12.5px;line-height:1.55;color:var(--txt-1)}
.syn-fact-line{font-size:12.5px;line-height:1.5;color:var(--txt-1);margin-bottom:3px}
.syn-fact-k{display:inline-block;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-3);margin-right:7px}
.syn-lens-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:5px}
.syn-lens{background:var(--bg-1);border:1px solid var(--line);border-radius:8px;padding:9px 10px;display:flex;flex-direction:column;gap:3px}
.syn-lens-k{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pos)}
.syn-lens-v{font-size:11.5px;line-height:1.45;color:var(--txt-1)}
.syn-seclab{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-top:2px}
.syn-para{display:flex;flex-direction:column;gap:6px}
.syn-para-lab{font-family:var(--f-display);font-size:12.5px;font-weight:600;color:var(--txt-1)}
.syn-input{font-size:13px;line-height:1.6}
@media (max-width:640px){ .syn-lens-grid{grid-template-columns:1fr} }

.tb-btn.newstory{color:var(--pos)}
.tb-btn.newstory:hover{background:var(--pos-soft);border-color:var(--pos-line)}
@media (max-width:640px){
  .ns-overlay{padding:0}
  .ns-panel{width:100vw;max-height:100vh;height:100vh;border-radius:0}
}

/* ============================================================
   AGENTS — Writers' Room (modal overlay)
   ============================================================ */
.ag-overlay{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:grid;place-items:center;
  padding:24px;opacity:1}
.ag-panel{width:min(620px,96vw);max-height:min(86vh,860px);background:var(--bg-1);border:1px solid var(--line-3);
  border-radius:var(--r-l);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden;opacity:1}

.ag-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ag-head-t{display:flex;align-items:center;gap:11px;flex:1}
.ag-orb{width:30px;height:30px;border-radius:9px;flex:0 0 30px;
  background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg));box-shadow:0 0 16px -3px var(--pos-line);animation:spin 9s linear infinite}
.ag-title{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0)}
.ag-sub{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);letter-spacing:.03em}
/* shared modal/popup CLOSE button — a visible rounded chip (matches the cameo-x style) */
.ag-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.12s;flex:0 0 auto}
.ag-x:hover{background:var(--bg-3);color:var(--txt-0)}

.ag-warn{display:flex;align-items:flex-start;gap:8px;margin:12px 18px 0;padding:9px 11px;border-radius:8px;
  background:var(--neg-soft);border:1px solid var(--neg-line);font-size:11.5px;line-height:1.45;color:var(--txt-1)}
.ag-warn svg{flex:0 0 auto;color:var(--neg);margin-top:1px}

/* agent picker grid */
.ag-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;overflow-y:auto}
.ag-card{text-align:left;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:15px;cursor:pointer;transition:.13s;display:flex;flex-direction:column;gap:9px;font-family:var(--f-ui)}
.ag-card:hover{background:var(--bg-3);border-color:var(--line-3);transform:translateY(-2px)}
.ag-card-top{display:flex;align-items:center;justify-content:space-between}
.ag-card-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--bg-4);color:var(--pos);border:1px solid var(--line-2)}
.ag-card-kind{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:20px;border:1px solid var(--line-2);color:var(--txt-2)}
.ag-card-kind.k-fix{color:var(--pos);border-color:var(--pos-line)}
.ag-card-kind.k-build{color:var(--neg);border-color:var(--neg-line)}
.ag-card-kind.k-report{color:var(--txt-1)}
.ag-card-name{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--txt-0)}
.ag-card-blurb{font-size:11.5px;line-height:1.5;color:var(--txt-2);flex:1}
.ag-card-go{display:flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt-2)}
.ag-card:hover .ag-card-go{color:var(--pos)}

/* MUSE — floating help-assistant dock (bottom-right, every room) + shared chat bits */
.muse-dock-wrap{position:fixed;right:22px;bottom:22px;z-index:75;display:flex;flex-direction:column;
  align-items:flex-end;gap:12px;font-family:var(--f-ui)}
/* no resting disc — the button is just the orb itself (the pulse provides the
   presence); voice states (listening/speaking) still paint their own circle */
.muse-bubble{width:54px;height:54px;border-radius:50%;border:1px solid transparent;cursor:pointer;
  position:relative;background:transparent;display:grid;place-items:center;color:var(--txt-0);
  box-shadow:none;transition:.15s}
.muse-bubble:hover{transform:translateY(-2px);border-color:transparent;box-shadow:none}
.muse-bubble.open{background:transparent}
.muse-bubble .ai-orb{width:40px;height:40px;position:relative;z-index:2}   /* orb stays crisp above the pulse */

/* attention pulse — the SAME expanding soft ring the Art Room's Re-draft buttons
   use while working (the draft-busy keyframes), running on the orb's circle. The
   orb's own slow conic spin is kept. */
.muse-bubble .ai-orb{animation:spin 8s linear infinite, draft-busy 1.15s ease-in-out infinite}
.muse-bubble.open .ai-orb,
.muse-bubble:hover .ai-orb{animation:spin 8s linear infinite}   /* calm once opened or hovered */
@media (prefers-reduced-motion: reduce){ .muse-bubble .ai-orb{animation:none} }

/* ── MUSE voice ORB (no modal): a wave ripples around the button by state ── */
.muse-orb-wrap{position:fixed;right:24px;bottom:24px;z-index:75;
  display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--f-ui)}
.muse-orb-stage{position:relative;width:56px;height:56px;display:grid;place-items:center}
.muse-orb-wrap .muse-bubble{position:relative;z-index:2;width:56px;height:56px}
.muse-orb-wrap .muse-bubble.listening{background:var(--pos);color:var(--bg-0);border-color:var(--pos)}
.muse-orb-wrap .muse-bubble.speaking{background:var(--bg-4);color:#e2a24e;border-color:#e2a24e}
.muse-orb-wrap .muse-bubble.thinking{color:var(--pos)}
/* wave rings — expand outward from the orb and fade */
.muse-ring{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;border:2px solid var(--pos-line);opacity:0;pointer-events:none;z-index:1}
@keyframes muse-wave{0%{transform:scale(.92);opacity:.5}100%{transform:scale(2.1);opacity:0}}
/* the wave ONLY ripples while MUSE is active — which only happens after a tap.
   Idle = no animation (rings stay invisible). */
.muse-orb-wrap.listening .muse-ring{animation:muse-wave 1.5s ease-out infinite;border-color:var(--pos)}
.muse-orb-wrap.listening .muse-ring.r2{animation-delay:.5s}
.muse-orb-wrap.listening .muse-ring.r3{animation-delay:1s}
.muse-orb-wrap.speaking .muse-ring{animation:muse-wave 1.9s ease-out infinite;border-color:#e2a24e}
.muse-orb-wrap.speaking .muse-ring.r2{animation-delay:.63s}
.muse-orb-wrap.speaking .muse-ring.r3{animation-delay:1.26s}
.muse-orb-wrap.thinking .muse-ring{animation:muse-wave 1.1s ease-out infinite;border-color:var(--pos-line)}
.muse-orb-wrap.thinking .muse-ring.r2{animation-delay:.37s}
.muse-orb-wrap.thinking .muse-ring.r3{animation-delay:.74s}
@media (prefers-reduced-motion: reduce){ .muse-orb-wrap .muse-ring{animation:none;opacity:0} }
.muse-caption{max-width:210px;text-align:center;font-size:11.5px;line-height:1.45;
  color:var(--txt-1);background:var(--bg-2);border:1px solid var(--line-2);border-radius:13px;
  padding:7px 12px;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.muse-caption.err{color:var(--neg);border-color:var(--neg-line);max-width:250px}
.muse-dock{width:352px;max-width:calc(100vw - 44px);max-height:min(70vh,560px);
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.muse-dock-head{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line);
  background:var(--bg-2)}
.muse-dock-head .ai-orb{width:26px;height:26px;flex:none}
.muse-dock-ht{flex:1;min-width:0}
.muse-dock-t{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--txt-0);letter-spacing:.02em}
.muse-dock-status{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--txt-2)}
.muse-dot{width:6px;height:6px;border-radius:50%;background:var(--txt-3,#777)}
.muse-dot.on{background:var(--pos)}
.muse-dock-x{background:none;border:none;color:var(--txt-2);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center}
.muse-dock-x:hover{color:var(--txt-0);background:var(--bg-4)}
.muse-dock-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.muse-greet{padding:6px 2px 4px}
.muse-greet-t{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0);margin-bottom:4px}
.muse-greet-d{font-size:12px;color:var(--txt-2);line-height:1.5}
.muse-dock .muse-chips{padding:0 14px 4px}
.muse-dock .muse-chips.followup{padding-top:6px;margin-top:2px}
.muse-chips-lab{width:100%;font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:5px}
.muse-dock .muse-ask-bar{padding:12px 14px;border-top:1px solid var(--line);background:var(--bg-2)}
.muse-dock .muse-ask-off{padding:0 14px 12px}

/* MUSE signed-out teaser (visitor mode) */
.muse-visitor-foot{display:flex;flex-direction:column;gap:9px;padding:12px 14px;border-top:1px solid var(--line);background:var(--bg-2)}
.muse-visitor-foot .muse-ask-bar{padding:0}
.muse-signup{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;cursor:pointer;
  font-family:var(--f-ui);font-size:11.5px;font-weight:600;color:var(--pos);
  background:transparent;border:1px dashed var(--pos-line);border-radius:var(--r-m);padding:8px 12px;transition:.12s}
.muse-signup:hover{background:var(--bg-3);border-style:solid}
.muse-signup.big{font-size:13px;color:var(--bg-0);background:var(--pos);border:none;padding:11px 14px}
.muse-signup.big:hover{filter:brightness(1.06);background:var(--pos)}
.muse-cap-note{font-size:11.5px;line-height:1.45;color:var(--txt-1);text-align:center}
.muse-a.gate{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.muse-inline-signup{align-self:flex-start;cursor:pointer;font-family:var(--f-ui);font-size:11px;font-weight:600;
  color:var(--pos);background:transparent;border:none;padding:0;text-decoration:underline;text-underline-offset:2px}
.muse-inline-signup:hover{color:var(--txt-0)}
@media (max-width:520px){ .muse-dock{width:calc(100vw - 44px)} }

/* MUSE voice controls */
.muse-dot.live{background:var(--pos);animation:muse-blink .9s steps(2,start) infinite}
@keyframes muse-blink{50%{opacity:.25}}
.muse-dock-x.on{color:var(--pos)}
.ai-orb.pulse{animation:muse-orbpulse 1.1s ease-in-out infinite}
@keyframes muse-orbpulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
.muse-mic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);transition:.13s}
.muse-mic:hover:not(:disabled){border-color:var(--pos-line);color:var(--pos)}
.muse-mic:disabled{opacity:.4;cursor:default}
.muse-mic.on{background:var(--pos);border-color:var(--pos);color:var(--bg-0);
  box-shadow:0 0 0 0 var(--pos-line);animation:muse-mic-ring 1.4s ease-out infinite}
@keyframes muse-mic-ring{0%{box-shadow:0 0 0 0 rgba(120,200,160,.5)}100%{box-shadow:0 0 0 12px rgba(120,200,160,0)}}
.muse-a.speaking{border-color:var(--pos-line);box-shadow:0 0 0 1px var(--pos-line) inset}

/* MUSE voice-only surface */
.muse-voice{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 14px 18px;
  border-top:1px solid var(--line);background:var(--bg-2)}
.muse-talk{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--pos);border:none;color:var(--bg-0);transition:.14s;
  box-shadow:0 6px 22px rgba(0,0,0,.4)}
.muse-talk:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.5)}
.muse-talk:disabled{opacity:.5;cursor:default;background:var(--bg-4);color:var(--txt-2)}
.muse-talk.listening{background:var(--pos);animation:muse-talk-ring 1.3s ease-out infinite}
.muse-talk.speaking{background:var(--bg-4);color:var(--pos);border:1px solid var(--pos-line)}
@keyframes muse-talk-ring{0%{box-shadow:0 0 0 0 rgba(120,200,160,.55)}100%{box-shadow:0 0 0 16px rgba(120,200,160,0)}}
.muse-talk-label{font-size:11.5px;color:var(--txt-2);letter-spacing:.01em}
.muse-q.pending{opacity:.7;font-style:italic;background:var(--bg-3);border-style:dashed}
.muse-trysay{margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.muse-trysay-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3,var(--txt-2));margin-bottom:7px}
.muse-trysay .muse-chip{font-style:italic}
.muse-voice-err{display:flex;align-items:flex-start;gap:6px;max-width:280px;text-align:left;
  font-size:11px;line-height:1.45;color:var(--neg);margin-top:2px}
.muse-voice-err svg{flex:none;margin-top:1px}
.muse-voice-fallback{display:flex;flex-direction:column;gap:9px;padding:14px;border-top:1px solid var(--line);background:var(--bg-2)}
.muse-voice-fallback .muse-voice-err{margin:0 auto}
.muse-voice-fallback .muse-ask-bar{padding:0}

/* MUSE Q&A — pinned below the agent grid (legacy in-panel variant) */
.muse-ask{border-top:1px solid var(--line);background:var(--bg-1);padding:14px 18px 16px;
  display:flex;flex-direction:column;gap:10px}
.muse-ask-head{display:flex;align-items:center;gap:10px}
.muse-ask-head .ai-orb{width:22px;height:22px;flex:none}
.muse-ask-t{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--txt-0)}
.muse-ask-sub{font-size:11px;color:var(--txt-2);line-height:1.4}
.muse-thread{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow-y:auto;
  padding:4px 2px;margin:0 -2px}
.muse-q{align-self:flex-end;max-width:85%;background:var(--bg-4);border:1px solid var(--line-2);
  border-radius:12px 12px 3px 12px;padding:7px 11px;font-size:12px;color:var(--txt-0);line-height:1.45}
.muse-a{align-self:flex-start;max-width:90%;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px 12px 12px 3px;padding:8px 12px;font-size:12.5px;color:var(--txt-1);line-height:1.55}
.muse-a.err{color:var(--neg);border-color:var(--neg-line)}
.muse-a.typing{padding:10px 12px}
.muse-chips{display:flex;flex-wrap:wrap;gap:6px}
.muse-chip{font-family:var(--f-ui);font-size:11px;color:var(--txt-1);background:var(--bg-2);
  border:1px solid var(--line-2);border-radius:20px;padding:5px 11px;cursor:pointer;transition:.12s}
.muse-chip:hover:not(:disabled){background:var(--bg-3);border-color:var(--pos-line);color:var(--pos)}
.muse-chip:disabled{opacity:.5;cursor:default}
.muse-ask-bar{display:flex;gap:8px;align-items:center}
.muse-ask-in{flex:1;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:9px 12px;font-family:var(--f-ui);font-size:12.5px;color:var(--txt-0);outline:none}
.muse-ask-in:focus{border-color:var(--pos-line)}
.muse-ask-send{display:flex;align-items:center;gap:6px;font-family:var(--f-ui);font-size:12px;font-weight:600;
  color:var(--bg-0);background:var(--pos);border:none;border-radius:var(--r-m);padding:9px 15px;cursor:pointer;transition:.12s}
.muse-ask-send:disabled{opacity:.45;cursor:default}
.muse-ask-off{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--txt-2)}

/* runner */
.ag-runner{display:flex;flex-direction:column;min-height:0;flex:1}
.ag-runner-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ag-runner-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--bg-3);color:var(--pos);border:1px solid var(--line-2);flex:0 0 auto}
.ag-runner-t{flex:1;min-width:0}
.ag-runner-name{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--txt-0)}
.ag-runner-sub{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);letter-spacing:.03em}

.ag-input-wrap{padding:14px 16px 0}
.ag-input-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);margin-bottom:6px}
.ag-input{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;
  color:var(--txt-0);font-family:var(--f-ui);font-size:13px;line-height:1.5;outline:none;resize:vertical}
.ag-input:focus{border-color:var(--line-3)}
.ag-input::placeholder{color:var(--txt-3)}

/* idea helper (logline starters) */
.idea-helper{margin-top:10px}
.idea-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.idea-hint{font-size:11.5px;color:var(--txt-2)}
.idea-spark{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--pos-line);background:var(--pos-soft);
  color:var(--pos);font-family:var(--f-ui);font-size:11px;font-weight:600;padding:4px 10px;border-radius:7px;cursor:pointer;transition:.12s}
.idea-spark:hover:not(:disabled){filter:brightness(1.08)}
.idea-spark:disabled{opacity:.6;cursor:default}
.idea-toggle{border:0;background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11px;font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:4px 2px;margin-left:auto}
.idea-toggle:hover{color:var(--txt-0)}
.idea-list{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.idea-ex{position:relative;text-align:left;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;
  padding:8px 11px 8px 26px;font-size:11.5px;line-height:1.45;color:var(--txt-1);cursor:pointer;transition:.1s;font-family:var(--f-ui)}
.idea-ex:hover{background:var(--bg-4);color:var(--txt-0);border-color:var(--line-3)}
.idea-ex-q{position:absolute;left:9px;top:6px;font-family:var(--f-display);font-size:16px;color:var(--txt-3)}
.idea-tip{display:flex;align-items:flex-start;gap:7px;margin-top:10px;font-size:11px;line-height:1.5;color:var(--txt-3)}
.idea-tip svg{flex:0 0 auto;color:var(--txt-2);margin-top:2px}
.idea-tip b{color:var(--txt-1);font-weight:600}

.ag-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.ag-intro{color:var(--txt-1)}
.ag-intro p{font-size:13px;line-height:1.6;margin-bottom:12px}
.ag-intro-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:8px;background:var(--bg-2);
  border:1px solid var(--line);font-size:11.5px;line-height:1.45;color:var(--txt-2)}
.ag-intro-note svg{flex:0 0 auto;color:var(--pos);margin-top:1px}

/* reasoning trace */
.ag-step{display:flex;gap:10px;align-items:flex-start;opacity:1;animation:agslide .18s ease}
.ag-step-ic{width:22px;height:22px;border-radius:50%;flex:0 0 22px;display:grid;place-items:center;
  background:var(--bg-3);color:var(--txt-2);border:1px solid var(--line-2);margin-top:1px}
.ag-step-t{font-size:12.5px;line-height:1.5;color:var(--txt-1);padding-top:2px}
.ag-step.k-plan .ag-step-ic{color:var(--neg);border-color:var(--neg-line)}
.ag-step.k-observe .ag-step-ic{color:var(--txt-0)}
.ag-step.k-ok .ag-step-ic,.ag-step.k-done .ag-step-ic{color:var(--pos);border-color:var(--pos-line)}
.ag-step.k-flag .ag-step-ic{color:var(--alert);border-color:var(--alert)}
.ag-step.k-done .ag-step-t{color:var(--txt-0);font-weight:500}

.ag-thinking{padding:4px 0 4px 32px}

/* proposal card */
.ag-prop{border:1px solid var(--pos-line);background:var(--bg-2);border-radius:var(--r-m);padding:13px;
  opacity:1;animation:agslide .2s ease;box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.ag-prop.danger{border-color:var(--alert)}
.ag-prop-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.ag-prop-h svg{color:var(--pos)}
.ag-prop.danger .ag-prop-h svg{color:var(--alert)}
.ag-prop-title{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--txt-0);flex:1}
.ag-prop-tag{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pos);
  border:1px solid var(--pos-line);border-radius:20px;padding:2px 7px}
.ag-prop.danger .ag-prop-tag{color:var(--alert);border-color:var(--alert)}
.ag-prop-reason{font-size:11.5px;line-height:1.5;color:var(--txt-2);margin-bottom:10px}
.ag-diff{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.ag-diff-row{display:flex;gap:9px;align-items:baseline;padding:7px 10px;border-radius:7px;font-size:12px}
.ag-diff-row.before{background:var(--bg-3);text-decoration:line-through;color:var(--txt-2)}
.ag-diff-row.after{background:var(--pos-soft);color:var(--txt-0)}
.ag-diff-lab{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);flex:0 0 56px}
.ag-diff-row.after .ag-diff-lab{color:var(--pos)}
.ag-diff-v{flex:1;line-height:1.45}
.ag-prop-list{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;max-height:200px;overflow-y:auto;
  border:1px solid var(--line);border-radius:8px;padding:8px}
.ag-prop-li{font-family:var(--f-mono);font-size:11px;color:var(--txt-1);padding:3px 4px;line-height:1.4}
.ag-prop-rat{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.5;color:var(--txt-1);
  background:var(--bg-3);border-radius:7px;padding:8px 10px;margin-bottom:11px}
.ag-prop-rat svg{flex:0 0 auto;color:var(--pos);margin-top:2px}
.ag-prop-act{display:flex;gap:8px;justify-content:flex-end}

/* Colorist proposal — palette swatches + per-scene colour script */
.ag-color{display:flex;flex-direction:column;gap:10px;margin-bottom:11px}
.ag-color-presets{display:flex;flex-direction:column;gap:7px}
.ag-color-preset{display:flex;flex-direction:column;gap:4px}
.ag-color-pname{font-size:11.5px;font-weight:600;color:var(--txt-1)}
.ag-color-bar{display:flex;height:14px;border-radius:4px;overflow:hidden;border:1px solid var(--line-2)}
.ag-color-bar span{display:block;height:100%}
.ag-color-grade{font-size:10.5px;line-height:1.4;color:var(--txt-3)}
.ag-color-stock{font-size:11px;color:var(--txt-2)}
.ag-color-stock b{color:var(--txt-3);font-weight:600}
.ag-color-strip{display:flex;flex-wrap:wrap;gap:3px}
.ag-color-cell{width:24px;height:20px;border-radius:3px;display:grid;place-items:center;font-family:var(--f-mono);
  font-size:8.5px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);cursor:default}
.ag-color-cell.none{background:repeating-linear-gradient(135deg,var(--bg-3),var(--bg-3) 4px,var(--bg-2) 4px,var(--bg-2) 8px);color:var(--txt-3);text-shadow:none}
.ag-color-whys{display:flex;flex-direction:column;gap:3px;max-height:170px;overflow-y:auto;
  background:var(--bg-3);border-radius:7px;padding:8px 10px}
.ag-color-why{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.45}
.ag-color-why-sw{flex:0 0 auto;width:11px;height:11px;border-radius:3px;margin-top:2px;border:1px solid rgba(255,255,255,.15)}
.ag-color-why-no{flex:0 0 auto;font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);margin-top:1px}
.ag-color-why-tx{flex:1;min-width:0;color:var(--txt-2)}

/* references shown on the Colorist's launch screen */
.ag-coloref{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border-radius:8px;background:var(--bg-3);margin-bottom:10px}
.ag-coloref.empty{flex-direction:row;align-items:center;gap:8px;font-size:11.5px;color:var(--txt-3)}
.ag-coloref.empty svg{flex:0 0 auto;color:var(--txt-3)}
.ag-coloref-lab{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3)}
.ag-coloref-lab svg{color:var(--pos)}
.ag-coloref-txt{font-size:12px;color:var(--txt-1);line-height:1.4}
.ag-coloref-imgs{display:flex;flex-wrap:wrap;gap:8px}
.ag-coloref-img{display:flex;flex-direction:column;gap:3px}
.ag-coloref-img img{width:64px;height:40px;object-fit:cover;border-radius:4px;border:1px solid var(--line-2);display:block}
.ag-coloref-sw{display:flex;height:6px;border-radius:2px;overflow:hidden}
.ag-coloref-sw span{flex:1;display:block}
.ag-btn{font-family:var(--f-ui);font-size:12px;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;transition:.12s;border:1px solid var(--line-2)}
.ag-btn.ghost{background:var(--bg-3);color:var(--txt-1)}
.ag-btn.ghost:hover{background:var(--bg-4);color:var(--txt-0)}
.ag-btn.primary{background:var(--pos);border-color:transparent;color:var(--ink-on-accent)}
.ag-btn.primary:hover{filter:brightness(1.08)}
.ag-prop.danger .ag-btn.primary{background:var(--alert);color:#fff}

/* table-read report */
.tr-report{margin-top:8px;display:flex;flex-direction:column;gap:9px}
.tr-block{background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.tr-lab{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);margin-bottom:4px}
.tr-txt{font-size:12px;line-height:1.5;color:var(--txt-1)}
.tr-notes{background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.tr-note{display:flex;gap:9px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);cursor:pointer}
.tr-note:last-child{border-bottom:0}
.tr-note:hover .tr-note-tx{color:var(--txt-0)}
.tr-note-sc{font-family:var(--f-mono);font-size:9.5px;font-weight:700;color:var(--pos);flex:0 0 auto}
.tr-note-tx{font-size:12px;line-height:1.45;color:var(--txt-1)}

/* runner footer */
/* in-modal error bar — provider/AI errors land here while the panel is open,
   with any URLs clickable (billing consoles etc.) */
.ag-errbar{display:flex;align-items:flex-start;gap:9px;margin:0 16px 0;padding:10px 12px;border-radius:10px;background:oklch(0.42 0.12 30 / .14);border:1px solid oklch(0.55 0.15 30 / .4);color:var(--alert);font-size:12.5px;line-height:1.45}
html[data-theme="light"] .ag-errbar{background:oklch(0.62 0.16 30 / .1);border-color:oklch(0.55 0.17 30 / .35)}
.ag-errbar-ic{flex:0 0 auto;opacity:.9}
.ag-errbar-msgs{flex:1;min-width:0}
.ag-errbar-msg{word-break:break-word}
.ag-errbar-msg + .ag-errbar-msg{margin-top:5px;padding-top:5px;border-top:1px dashed oklch(0.55 0.15 30 / .3)}
.ag-errbar-x{flex:0 0 auto;appearance:none;border:0;background:transparent;color:inherit;opacity:.6;cursor:pointer;font-size:12px;padding:0 2px}
.ag-errbar-x:hover{opacity:1}
.ag-errbar a,.ns-err a,.ag-step-t a,.turn-toast-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.ag-errbar a:hover,.ns-err a:hover,.ag-step-t a:hover,.turn-toast-msg a:hover{opacity:.85}
.ag-runner-foot{display:flex;gap:10px;padding:13px 16px;border-top:1px solid var(--line);justify-content:flex-end}
.ag-run{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:9px;border:0;
  background:var(--pos);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:13px;font-weight:600;cursor:pointer;transition:.12s}
.ag-run:hover{filter:brightness(1.08)}
.ag-run.ghost{background:var(--bg-3);color:var(--txt-1)}
.ag-run.ghost:hover{background:var(--bg-4);color:var(--txt-0)}
.ag-run.stop{background:var(--bg-3);color:var(--alert);border:1px solid var(--alert)}

@media (max-width:640px){
  .ag-grid{grid-template-columns:1fr}
  .ag-overlay{padding:0}
  .ag-panel{width:100vw;max-height:100vh;height:100vh;border-radius:0}
}

/* in-panel undo row */
.ag-undo-row{display:flex;align-items:center;gap:9px;margin:12px 18px 0;padding:9px 12px;border-radius:9px;
  background:var(--bg-3);border:1px solid var(--line-2)}
.ag-undo-row svg{color:var(--txt-1);flex:0 0 auto}

/* in-panel story-health explainer (decodes the badge number) */
.ag-issues-row{display:flex;align-items:flex-start;gap:10px;margin:12px 18px 0;padding:10px 12px;border-radius:9px;
  background:var(--alert-soft);border:1px solid var(--alert)}
.ag-issues-row.clean{background:var(--pos-soft);border-color:var(--pos-line)}
.ag-issues-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:11px;display:grid;place-items:center;
  background:var(--alert);color:#fff;font-family:var(--f-mono);font-size:11px;font-weight:700;margin-top:1px}
.ag-issues-badge.ok{background:var(--pos);color:var(--ink-on-accent)}
.ag-issues-tx{flex:1;font-size:11.5px;line-height:1.5;color:var(--txt-1)}
.ag-issues-tx b{color:var(--txt-0);font-weight:600}
.ag-card-tags{display:flex;align-items:center;gap:6px}
.ag-card-count{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:3px 7px;border-radius:20px;background:var(--alert);color:#fff}
.ag-undo-tx{flex:1;font-size:11.5px;color:var(--txt-1);line-height:1.4}
.ag-undo-btn{font-family:var(--f-ui);font-size:11.5px;font-weight:600;color:var(--txt-0);cursor:pointer;
  background:var(--bg-5);border:1px solid var(--line-3);border-radius:7px;padding:5px 11px;transition:.12s;flex:0 0 auto}
.ag-undo-btn:hover{background:var(--bg-4)}

/* floating undo toast (works whether the Writers' Room is open or not) */
.agent-undo{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;opacity:1;
  display:flex;align-items:center;gap:12px;padding:11px 12px 11px 15px;border-radius:14px;
  background:var(--bg-3);border:1px solid var(--line-3);box-shadow:var(--shadow-pop);
  animation:undoIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes undoIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.agent-undo .au-ic{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:grid;place-items:center;
  background:var(--neg-soft);color:var(--neg);border:1px solid var(--neg-line)}
.agent-undo .au-text{display:flex;flex-direction:column;line-height:1.25;padding-right:4px}
.agent-undo .au-t{font-family:var(--f-display);font-size:12.5px;font-weight:500;color:var(--txt-0)}
.agent-undo .au-s{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;color:var(--txt-2)}
.agent-undo .au-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:9px;
  background:var(--pos);border:0;color:var(--ink-on-accent);font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.agent-undo .au-btn:hover{filter:brightness(1.08)}
.agent-undo .au-x{width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--txt-2);
  cursor:pointer;display:grid;place-items:center;transition:.1s;flex:0 0 auto}
.agent-undo .au-x:hover{background:var(--bg-4);color:var(--txt-0)}
@media (max-width:640px){
  .agent-undo{left:12px;right:12px;bottom:12px;transform:none}
  @keyframes undoIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ============================================================
   THE ART ROOM (pre-production) + room switcher
   ============================================================ */
.room-switch{position:relative}
.room-btn{display:flex;align-items:center;gap:9px;height:36px;padding:0 10px 0 9px;border-radius:9px;
  background:var(--bg-2);border:1px solid var(--line);cursor:pointer;transition:.12s;color:var(--txt-0)}
.room-btn:hover{background:var(--bg-3);border-color:var(--line-2)}
.room-btn-ic{width:24px;height:24px;flex:0 0 24px;border-radius:6px;display:grid;place-items:center;
  background:var(--bg-4);color:var(--pos)}
.room-btn-t{display:flex;flex-direction:column;line-height:1.15;text-align:left;min-width:0}
.room-btn-name{font-family:var(--f-display);font-size:12.5px;font-weight:600;color:var(--txt-0);white-space:nowrap}
.room-btn-phase{font-family:var(--f-mono);font-size:9px;letter-spacing:.04em;color:var(--txt-2);text-transform:uppercase;white-space:nowrap}
.room-btn svg:last-child{color:var(--txt-2)}

.room-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:268px;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;
  animation:popup .16s ease}
.room-menu-h{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);padding:7px 9px 6px}
.room-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px;border:0;background:transparent;
  border-radius:8px;cursor:pointer;transition:.1s}
.room-item:hover{background:var(--bg-3)}
.room-item.on{background:var(--bg-3)}
.room-item.soon{cursor:default;opacity:.6}
.room-item.soon:hover{background:transparent}
.room-item-no{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);width:16px;flex:0 0 16px;text-align:center}
.room-item-ic{width:30px;height:30px;flex:0 0 30px;border-radius:8px;display:grid;place-items:center;
  background:var(--bg-4);color:var(--txt-1);border:1px solid var(--line-2)}
.room-item.on .room-item-ic{color:var(--pos);border-color:var(--pos-line)}
.room-item-t{flex:1;display:flex;flex-direction:column;line-height:1.2;min-width:0}
.room-item-name{font-family:var(--f-display);font-size:13px;font-weight:500;color:var(--txt-0)}
.room-item-phase{font-family:var(--f-mono);font-size:9px;letter-spacing:.04em;color:var(--txt-2);text-transform:uppercase}
.room-item-dot{width:7px;height:7px;border-radius:50%;background:var(--pos);flex:0 0 auto}
.room-item-soon{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);
  border:1px solid var(--line-2);border-radius:20px;padding:2px 7px;flex:0 0 auto}

.artroom{flex:1;min-width:0;background:var(--bg-0);overflow-y:auto}

/* ── Pre-production readiness strip (#1) — top of every Art Room tab ───────── */
.pp-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  width:max-content;max-width:calc(100% - 40px);margin:16px auto 4px;
  padding:8px 12px;background:var(--bg-1);border:1px solid var(--line);border-radius:11px}
.pp-status-lead{display:flex;align-items:center;gap:8px;flex:0 0 auto;background:transparent;border:0;cursor:pointer;padding:2px 4px;margin:-2px -4px;border-radius:7px;font:inherit;color:inherit;transition:.12s}
.pp-status-lead:hover{background:var(--bg-2)}
.pp-status-lead svg{color:var(--txt-3)}
.pp-status.collapsed{gap:0}
.pp-status-eyebrow{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.pp-status-pct{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--txt-0)}
.pp-status-pct.done{color:var(--pos)}
.pp-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:center}
.pp-chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;padding:5px 9px;border-radius:8px;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line);transition:.12s;font-family:var(--f-ui)}
.pp-chip:hover{background:var(--bg-3);border-color:var(--line-2);transform:translateY(-1px)}
.pp-chip-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px;background:var(--txt-3)}
.pp-chip.pp-complete .pp-chip-dot{background:var(--pos)}
.pp-chip.pp-partial .pp-chip-dot{background:oklch(0.74 0.15 60)}
.pp-chip-lab{font-size:11.5px;color:var(--txt-1);font-weight:500}
.pp-chip-ct{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3)}
.pp-chip.pp-complete{border-color:var(--pos-line)}
.pp-chip.pp-complete .pp-chip-ct{color:var(--pos)}
.pp-chip.pp-partial .pp-chip-ct{color:var(--txt-0)}

/* ── shared scene pager (Stage / Shots / Storyboards) ─────────────────────── */
.scene-pager{display:flex;align-items:center;gap:14px;justify-content:center;max-width:760px;margin:0 auto 18px;
  padding:9px 14px;background:var(--bg-1);border:1px solid var(--line);border-radius:11px}
.scene-pager-arrow{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);transition:.12s}
.scene-pager-arrow:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0);transform:translateY(-1px)}
.scene-pager-arrow:disabled{opacity:.35;cursor:default}
.scene-pager-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.scene-pager-no{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.scene-pager-title{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.scene-pager-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--txt-2)}
.scene-pager-mid.jump{cursor:pointer;border-radius:8px;padding:4px 10px;margin:-4px 0;transition:.12s;position:relative}
.scene-pager-mid.jump:hover{background:var(--bg-2)}
.scene-pager-no svg{vertical-align:middle;margin-left:4px;color:var(--txt-3)}
.scene-pager-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:40;
  width:min(300px,80vw);max-height:300px;overflow-y:auto;background:var(--bg-1);border:1px solid var(--line-2);
  border-radius:11px;box-shadow:var(--shadow-pop);padding:6px;text-align:left}
.scene-pager-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;background:transparent;
  border-radius:7px;cursor:pointer;font-family:var(--f-ui);font-size:12.5px;color:var(--txt-1);transition:.1s}
.scene-pager-menu-item:hover{background:var(--bg-3);color:var(--txt-0)}
.scene-pager-menu-item.on{background:var(--bg-2);color:var(--txt-0)}
.scene-pager-menu-item.on svg{margin-left:auto;color:var(--pos)}
.scene-pager-menu-no{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);flex:0 0 auto}
.scene-pager-menu-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}

/* ── Voices tab (Art Room) ────────────────────────────────────────────────── */
.vc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.vc-card{background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:13px;display:flex;flex-direction:column;gap:11px}
.vc-card.locked{border-color:var(--pos-line)}
.vc-card.silent{opacity:.72}
.vc-head{display:flex;align-items:center;gap:10px}
.vc-av{width:34px;height:34px;border-radius:9px;flex:0 0 34px;display:grid;place-items:center;color:#fff;font-family:var(--f-mono);font-size:11px;font-weight:700}
.vc-id{flex:1;min-width:0}
.vc-name{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--txt-0);line-height:1.2}
.vc-role{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-tag{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);padding:2px 7px;border-radius:999px;background:var(--bg-3);flex:0 0 auto}
.vc-tag.speaks{color:var(--pos);background:var(--pos-soft)}
.vc-note{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.4;color:var(--txt-2);background:var(--bg-2);border:1px dashed var(--line-3);border-radius:8px;padding:8px 10px}
.vc-note svg{color:oklch(0.74 0.15 60);flex:0 0 auto;margin-top:1px}
.vc-body{display:flex;flex-direction:column;gap:9px}
.vc-modes{display:flex;gap:5px}
.vc-mode{flex:1;padding:5px 0;border-radius:7px;border:1px solid var(--line);background:var(--bg-2);cursor:pointer;font-family:var(--f-ui);font-size:11.5px;color:var(--txt-2);transition:.12s}
.vc-mode:hover{background:var(--bg-3);color:var(--txt-0)}
.vc-mode.on{background:var(--pos);border-color:transparent;color:var(--ink-on-accent);font-weight:500}
.vc-field{display:flex;flex-direction:column;gap:5px}
.vc-lab{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.vc-rebuild{border:1px solid var(--line-2);border-radius:5px;background:var(--bg-2);color:var(--txt-2);font:700 9px var(--f-mono);letter-spacing:.04em;padding:3px 6px;cursor:pointer;text-transform:none}
.vc-rebuild:hover{border-color:var(--brand);color:var(--txt-0)}
.vc-accent-note{border-style:solid;border-color:var(--accent-line,rgba(214,126,0,.4));background:var(--accent-soft,rgba(214,126,0,.08));color:var(--txt-1)}
.vc-accent-note svg{color:var(--brand,#d67e00)}
.vc-spec{font-size:12px;min-height:42px}
.vc-delivery{width:100%;border:1px solid var(--line-2);border-radius:7px;background:var(--bg-2);color:var(--txt-0);
  font:600 11.5px var(--f-ui);padding:7px 26px 7px 9px;outline:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-delivery:focus{border-color:var(--brand)}
.vc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;border-radius:8px;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);font-family:var(--f-ui);font-size:12px;font-weight:500;transition:.12s}
.vc-btn:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.vc-btn.primary{background:var(--pos);border-color:transparent;color:var(--ink-on-accent)}
.vc-btn.primary:hover:not(:disabled){filter:brightness(1.07)}
.vc-btn.ghost{background:transparent;border-color:transparent;color:var(--txt-2)}
.vc-btn:disabled{opacity:.5;cursor:default}
.vc-previews{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.vc-preview{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line)}
.vc-preview-lab{flex:1;min-width:0;font-size:12px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-play{width:26px;height:26px;border-radius:50%;flex:0 0 26px;display:grid;place-items:center;cursor:pointer;background:var(--bg-4);border:1px solid var(--line-2);color:var(--txt-1)}
.vc-play:hover{color:var(--pos)}
.vc-upload{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:8px;cursor:pointer;border:1px dashed var(--line-3);background:var(--bg-2);font-size:12px;color:var(--txt-1)}
.vc-upload:hover{background:var(--bg-3);color:var(--txt-0)}
.vc-consent{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.4;color:var(--txt-2);cursor:pointer}
.vc-consent input{margin-top:2px;flex:0 0 auto}
.vc-locked{display:flex;flex-direction:column;gap:9px}
.vc-locked-row{display:flex;align-items:center;gap:8px}
.vc-locked-row svg{color:var(--pos);flex:0 0 auto}
.vc-locked-name{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-src{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2);padding:2px 7px;border-radius:999px;background:var(--bg-3)}
.vc-actions{display:flex;gap:7px}
.vc-err{font-size:11.5px;color:var(--alert);line-height:1.4}

/* ── Coordinator cost/scope preview (#2) ──────────────────────────────────── */
.cc-modal{width:min(440px,92vw);background:var(--bg-1);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:14px;padding:18px}
.cc-head{display:flex;align-items:flex-start;gap:11px}
.cc-orb{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:grid;place-items:center;
  background:var(--pos-soft);color:var(--pos);border:1px solid var(--pos-line)}
.cc-title{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0)}
.cc-sub{font-size:11.5px;line-height:1.45;color:var(--txt-2);margin-top:2px}
.cc-est{display:flex;align-items:baseline;gap:8px;padding:11px 13px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.cc-est-n{font-family:var(--f-display);font-size:24px;font-weight:700;color:var(--txt-0);line-height:1}
.cc-est-l{font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2)}
.cc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.cc-list li{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--txt-1);
  padding:5px 2px;border-bottom:1px solid var(--line)}
.cc-list li:last-child{border-bottom:0}
.cc-list-lab{font-weight:500}
.cc-list-n{font-family:var(--f-mono);font-size:10.5px;color:var(--txt-2)}
.cc-note{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.45;color:var(--txt-2)}
.cc-note svg{color:oklch(0.74 0.15 60);flex:0 0 auto;margin-top:1px}
.cc-note.ok svg{color:var(--pos)}
.cc-foot{display:flex;gap:9px;justify-content:flex-end;align-items:center;margin-top:2px}
.art-scroll{padding:24px 28px 60px;max-width:1280px;margin:0 auto}

.art-intro{margin-bottom:22px}
.art-intro-row{display:flex;align-items:flex-start;gap:16px}
.art-intro-row > div:first-child{flex:1;min-width:0}
.art-intro-actions{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.art-intro-t{font-family:"Spectral",Georgia,serif;font-size:25px;font-weight:600;letter-spacing:-.01em;color:var(--txt-0);margin-bottom:6px}
.art-intro-d{font-size:13px;line-height:1.6;color:var(--txt-2);max-width:680px}
/* mobile: stack the header so the title/intro get full width and the action
   buttons drop to their own full-width row instead of crushing the text column */
@media (max-width:700px){
  .art-intro-row{flex-direction:column;gap:14px}
  .art-intro-d{max-width:none}
  .art-intro-actions{width:100%;justify-content:flex-start}
  .art-intro-actions > button{flex:1 1 140px;justify-content:center;height:38px}
}

.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.sheet-card{display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  /* perf: skip render/layout/paint for offscreen cards. The whole grid used to
     keep every card's full-res base64 image decoded and laid out at once, so the
     app got slower with each sheet. content-visibility virtualizes that; the
     intrinsic size keeps the scrollbar stable for un-rendered cards. */
  content-visibility:auto;contain-intrinsic-size:auto 420px}
.sheet-frame{flex:0 0 auto;display:flex;flex-direction:column;background:var(--bg-2);border-bottom:1px solid var(--line);padding:12px;position:relative}
/* generated image + generate button */
.sheet-genwrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:11px;overflow:hidden;border:1px solid var(--line-2);background:#000}
.sheet-genimg{display:block;width:100%;height:100%;object-fit:contain;cursor:zoom-in}
/* full-view lightbox */
/* Film Bible viewer (admin) — read-only continuity JSON */
.bible-overlay{position:fixed;inset:0;z-index:122;background:rgba(0,0,0,.74);display:grid;place-items:center;padding:24px}
.bible-modal{width:min(900px,96vw);max-height:90vh;display:flex;flex-direction:column;background:var(--bg-1);
  border:1px solid var(--line-3);border-radius:14px;box-shadow:var(--shadow-pop);overflow:hidden}
.bible-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.bible-title{display:flex;align-items:center;gap:8px;font-family:var(--f-display,inherit);font-size:15px;font-weight:600;color:var(--txt-0)}
.bible-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);font-weight:400}
.bible-head-acts{display:flex;align-items:center;gap:8px}
.bible-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line-3);background:var(--bg-4);color:var(--txt-1);font:600 12px var(--f-ui);transition:.12s}
.bible-btn:hover{background:var(--bg-5);color:var(--txt-0)}
.bible-btn.on{color:var(--pos);border-color:var(--pos)}
.bible-x{width:30px;height:30px;display:grid;place-items:center;border:0;background:transparent;color:var(--txt-2);cursor:pointer;border-radius:7px}
.bible-x:hover{background:var(--bg-4);color:var(--txt-0)}
.bible-pre{margin:0;overflow:auto;padding:16px;font-family:var(--f-mono);font-size:11.5px;line-height:1.55;color:var(--txt-1);white-space:pre;tab-size:2}
/* admin "Render styles" manager (RenderStylesModal) */
.styles-mgr{width:min(560px,96vw)}
.styles-body{overflow:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.styles-sec-h{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:600;color:var(--txt-1);margin:12px 0 4px;font-family:var(--f-ui)}
.styles-sec-h:first-child{margin-top:0}
.styles-sec-h-sub{margin-top:10px}
.styles-sec-sub{font-size:10.5px;font-weight:400;color:var(--txt-3);letter-spacing:.02em}
.styles-sec-sub.warn{color:oklch(0.62 0.21 25)}
.styles-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3)}
.styles-row-name{font-size:12.5px;color:var(--txt-1);font-family:var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.styles-row-acts{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.styles-mini{font-size:11px;font-family:var(--f-ui);color:var(--txt-1);background:var(--bg-2);border:1px solid var(--line-2);border-radius:7px;padding:4px 9px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:4px}
.styles-mini-square{width:26px;justify-content:center;padding-left:0;padding-right:0;font-family:var(--f-mono)}
.styles-mini:hover:not(:disabled){border-color:var(--accent2,oklch(0.62 0.18 295));color:var(--accent2,oklch(0.62 0.18 295))}
.styles-mini:disabled{opacity:.5;cursor:default}
.styles-mini.danger:hover:not(:disabled){border-color:oklch(0.6 0.2 25);color:oklch(0.62 0.21 25)}
.styles-empty{font-size:12px;color:var(--txt-3);padding:8px 2px;font-family:var(--f-ui)}
.styles-empty-sm{padding:4px 2px;margin-bottom:2px}
.styles-global-list{display:flex;flex-direction:column;gap:5px;margin-bottom:4px}
.styles-row-builtin{opacity:.72}
.styles-row-hidden{opacity:.62;border-style:dashed}
.styles-row-badge{font-size:9.5px;font-family:var(--f-mono);color:var(--txt-3);background:var(--bg-2);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;letter-spacing:.04em;flex:0 0 auto;white-space:nowrap}
.styles-row-badge-curated{color:var(--accent2,oklch(0.62 0.18 295));border-color:var(--accent2,oklch(0.62 0.18 295)/.35)}
.api-keys-mgr{width:min(680px,96vw)}
.api-keys-body{overflow:auto;padding:15px 16px 18px;display:flex;flex-direction:column;gap:10px}
.api-keys-note{font-size:12px;line-height:1.55;color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px}
.api-key-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,1.1fr);gap:12px;align-items:center;border:1px solid var(--line-2);border-radius:11px;background:var(--bg-3);padding:11px}
.api-key-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;color:var(--txt-0)}
.api-key-status{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line-2);background:var(--bg-2);border-radius:999px;padding:2px 6px}
.api-key-status.on{color:var(--pos);border-color:color-mix(in oklab,var(--pos) 42%,transparent)}
.api-key-hint{margin-top:4px;font-size:11.5px;line-height:1.4;color:var(--txt-2)}
.api-key-edit{display:flex;align-items:center;gap:7px;min-width:0}
.api-key-input{flex:1;min-width:0;height:31px;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;color:var(--txt-1);font:12px var(--f-ui);padding:0 10px;outline:none}
.api-key-input:focus{border-color:var(--line-3)}
.api-key-input::placeholder{color:var(--txt-3)}
@media (max-width:720px){
  .api-key-row{grid-template-columns:1fr}
  .api-key-edit{align-items:stretch}
  .api-key-input{height:34px}
}
/* IMMERSIVE lightbox — the image fills the screen; minimal floating chrome (centred title
   top, close top-right, a floating download bar bottom-centre) over a near-black backdrop. */
.lb-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,8,10,.94);display:block;padding:0;opacity:1}
.lb-panel{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;gap:0;
  background:transparent;border:0;border-radius:0;overflow:hidden;box-shadow:none}
.lb-head{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:center;
  padding:14px 16px;border:0;pointer-events:none}
.lb-head .ag-x{position:absolute;right:14px;top:11px;pointer-events:auto}
.lb-title{font-family:var(--f-display);font-size:14px;font-weight:600;color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.4);border-radius:999px;padding:4px 14px}
.lb-imgwrap{flex:1;min-height:0;display:grid;place-items:center;background:transparent;padding:60px 24px 78px;overflow:auto}
.lb-img{max-width:96vw;max-height:90vh;object-fit:contain;display:block;border-radius:6px;box-shadow:0 12px 50px -12px rgba(0,0,0,.7)}
.lb-foot{position:absolute;bottom:18px;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  width:fit-content;margin:0 auto;background:var(--bg-1);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:0;border:0;pointer-events:none}
.lb-foot > *{pointer-events:auto}
.lb-foot .nb-seg{background:var(--bg-3)}
.lb-foot-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2)}
/* the pill has no horizontal padding (end BUTTONS sit glued to its rounded corners),
   so when Remaster is hidden and the DOWNLOAD label leads the row, give the label
   its own clearance from the curved left edge */
.lb-foot-lab:first-child{margin-left:14px}
.lb-dl{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:999px;border:0;
  background:var(--pos);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px -6px rgba(0,0,0,.6)}
.lb-dl:hover:not(:disabled){filter:brightness(1.08)}
.lb-dl:disabled{opacity:.7;cursor:default}
.sheet-gen-tools{position:absolute;top:20px;right:20px;display:flex;gap:6px;z-index:20}
.sheet-gen-tool{width:28px;height:28px;border-radius:7px;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.1s}
.sheet-gen-tool:hover{background:rgba(0,0,0,.85)}
.sheet-gen-tool:disabled{opacity:.5;cursor:default}
/* on an EMPTY card the tools button sits over the light slot / drop zone, not a dark image —
   use a neutral, theme-aware chip so it doesn't read as a heavy dark blob */
.sheet-frame:not(:has(.sheet-genwrap)) .sheet-gen-tool{background:var(--bg-3);color:var(--txt-2);border:1px solid var(--line-2)}
.sheet-frame:not(:has(.sheet-genwrap)) .sheet-gen-tool:hover{background:var(--bg-4);color:var(--txt-1);border-color:var(--line-3)}
.sheet-gen-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;height:36px;margin-top:10px;
  border-radius:9px;border:0;background:var(--pos);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.sheet-gen-btn:hover:not(:disabled){filter:brightness(1.08)}
.sheet-gen-btn:disabled{opacity:.7;cursor:default}
.sheet-gen-btn.waiting,
.sheet-gen-btn.waiting:disabled{background:var(--bg-3);color:var(--txt-3);border:1px solid var(--line-2);
  opacity:.58;cursor:not-allowed;box-shadow:none;filter:grayscale(.15)}
.sheet-gen-btn.waiting svg{opacity:.75}
/* generate + stop share one row: full-width generate when idle, 50/50 while generating */
.sheet-gen-row{display:flex;gap:8px;margin-top:10px}
.sheet-gen-row .sheet-gen-btn{flex:1;margin-top:0}
/* Stop an in-flight generation — sits inline with the "Generating…" button, equal width */
.sheet-gen-stop{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;
  border-radius:9px;border:1px solid var(--neg,#c0413b);background:transparent;color:var(--neg,#c0413b);
  font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.sheet-gen-stop:hover{background:var(--neg,#c0413b);color:#fff}
.sheet-gen-stop svg{flex:0 0 auto}
/* dropToImport: the empty slot doubles as a full-res upload target (drop or click-to-browse) */
.sheet-dropzone{width:100%;aspect-ratio:16/9;box-sizing:border-box;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px;cursor:pointer;
  color:var(--txt-2);background:var(--bg-2);border:1.5px dashed var(--line-3);border-radius:11px;
  transition:border-color .12s,background .12s}
.sheet-dropzone:hover{border-color:var(--pos-line)}
.sheet-dropzone.over{border-color:var(--pos);background:oklch(0.78 0.15 62 / .08)}
.sheet-dropzone.busy{opacity:.7;cursor:default}
.sheet-dropzone svg{opacity:.5}
.sheet-dropzone-cap{font-size:13px;font-weight:500;color:var(--txt-1);letter-spacing:.01em}
.sheet-dropzone-sub{font-size:11px;color:var(--txt-3)}
.sheet-upload-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;height:30px;margin-top:7px;
  border-radius:8px;border:1px solid var(--line-3);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:500;cursor:pointer;transition:.12s}
.sheet-upload-btn:hover:not(:disabled){background:var(--bg-3);color:var(--txt-1);border-color:var(--line-3)}
.sheet-upload-btn:disabled{opacity:.5;cursor:default}
.sheet-gen-err{margin-top:8px;font-size:11px;line-height:1.4;color:var(--alert);background:var(--alert-soft);
  border:1px solid var(--alert);border-radius:7px;padding:7px 9px;display:flex;flex-direction:column;gap:7px}
.sheet-gen-err-msg{line-height:1.4}
.sheet-gen-err-acts{display:flex;gap:6px;flex-wrap:wrap}
.sheet-gen-err-btn{font:500 10px/1 var(--f-ui);letter-spacing:.04em;color:var(--txt-1);background:var(--bg-4);
  border:1px solid var(--line-3);border-radius:5px;padding:4px 8px;cursor:pointer;white-space:nowrap}
.sheet-gen-err-btn:hover{background:var(--bg-5);color:var(--txt-0)}
.sheet-gen-err-btn.primary{color:var(--ink-on-accent);background:var(--pos);border-color:transparent;font-weight:600}
.sheet-gen-err-btn.primary:hover{filter:brightness(1.08);color:var(--ink-on-accent);background:var(--pos)}

.sheet-frame-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2)}
.sheet-meta-item{display:inline-flex;align-items:center;gap:4px}
.sheet-meta-item svg{flex:0 0 auto;color:var(--txt-3);opacity:.85}
.sheet-meta-dot{color:var(--txt-3)}
.sheet-frame-cap-label{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2)}
.sheet-gen-tool.on{background:oklch(0.78 0.15 62 / .25);color:var(--pos)}
.sheet-gen-tool.on:hover{background:oklch(0.78 0.15 62 / .35)}

/* reference art indicator */
.sheet-ref-pill{display:flex;align-items:center;gap:5px;margin-top:7px;padding:5px 9px;
  background:oklch(0.78 0.15 62 / .08);border:1px solid oklch(0.78 0.15 62 / .25);
  border-radius:6px;font-size:10.5px;color:var(--pos);letter-spacing:.02em}
.sheet-ref-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;
  background:oklch(0.78 0.15 62 / .12);border:1px solid oklch(0.78 0.15 62 / .3);
  border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--pos);
  text-transform:uppercase;flex:0 0 auto}
.sheet-tier-warn{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  background:oklch(0.72 0.17 45 / .12);border:1px solid oklch(0.72 0.17 45 / .35);
  border-radius:4px;font-size:9px;font-weight:600;letter-spacing:.04em;
  color:oklch(0.82 0.14 55);text-transform:uppercase;flex:0 0 auto;cursor:default}
.sheet-ground-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  background:oklch(0.6 0.13 230 / .14);border:1px solid oklch(0.6 0.13 230 / .38);
  border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.05em;
  color:oklch(0.78 0.11 230);text-transform:uppercase;flex:0 0 auto;cursor:default}
.sheet-prop-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  background:oklch(0.62 0.16 35 / .14);border:1px solid oklch(0.62 0.16 35 / .36);
  border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.05em;
  color:oklch(0.74 0.14 38);text-transform:uppercase;flex:0 0 auto;cursor:default}
.sheet-cameo-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  background:oklch(0.62 0.18 295 / .16);border:1px solid oklch(0.62 0.18 295 / .42);
  border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.05em;
  color:oklch(0.8 0.13 296);text-transform:uppercase;flex:0 0 auto;cursor:default}

/* ── Cameo: "Cast yourself" likeness capture ───────────────────────────── */
.sheet-head-acts{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.char-cameo-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:7px;
  border:1px solid oklch(0.62 0.18 295 / .4);background:oklch(0.62 0.18 295 / .1);color:oklch(0.82 0.12 296);
  font-family:var(--f-ui);font-size:11px;font-weight:600;cursor:pointer;transition:.12s;white-space:nowrap}
.char-cameo-btn:hover:not(:disabled){background:oklch(0.62 0.18 295 / .2);color:oklch(0.88 0.1 296)}
.char-cameo-btn:disabled{opacity:.5;cursor:default}
.char-cameo-btn.on{background:oklch(0.62 0.18 295 / .22);border-color:oklch(0.62 0.18 295 / .6)}
html[data-theme="light"] .char-cameo-btn{border-color:oklch(0.55 0.17 295 / .45);background:oklch(0.6 0.18 295 / .1);color:oklch(0.42 0.16 295)}
html[data-theme="light"] .char-cameo-btn:hover:not(:disabled){background:oklch(0.6 0.18 295 / .18);color:oklch(0.34 0.16 295)}
html[data-theme="light"] .char-cameo-btn.on{background:oklch(0.6 0.18 295 / .16);border-color:oklch(0.55 0.17 295 / .55);color:oklch(0.36 0.16 295)}

.sheet-cameo-status{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:8px 11px;border-radius:9px;
  background:oklch(0.62 0.18 295 / .09);border:1px solid oklch(0.62 0.18 295 / .28);font-family:var(--f-ui)}
.sheet-cameo-status>svg{color:oklch(0.78 0.13 296);flex:0 0 auto}
.sheet-cameo-status .scs-t{font-size:11.5px;font-weight:700;color:oklch(0.86 0.1 296);letter-spacing:.01em}
.sheet-cameo-status .scs-meta{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--txt-3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-cameo-status .scs-act{flex:0 0 auto;background:none;border:0;cursor:pointer;font-family:var(--f-ui);font-size:11px;
  font-weight:600;color:var(--txt-2);padding:2px 4px;border-radius:5px;transition:.12s}
.sheet-cameo-status .scs-act:hover{color:var(--txt-0);background:var(--bg-4)}
.sheet-cameo-status .scs-act.danger:hover{color:var(--neg);background:oklch(0.6 0.2 18 / .12)}

.cameo-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:safe center;justify-content:center;padding:24px;
  overflow-y:auto;background:oklch(0.16 0.02 280 / .72);backdrop-filter:blur(6px);animation:cameo-in .16s ease}
@keyframes cameo-in{from{opacity:0}to{opacity:1}}
.cameo-modal{width:min(460px,100%);max-height:calc(100vh - 48px);overflow:auto;display:flex;flex-direction:column;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 24px 70px -20px rgba(0,0,0,.7)}
.cameo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 14px}
.cameo-title{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:17px;font-weight:600;color:var(--txt-0)}
.cameo-title svg{color:oklch(0.78 0.13 296)}
.cameo-sub{margin-top:3px;font-family:var(--f-ui);font-size:12px;color:var(--txt-2)}
.cameo-x{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--txt-2);cursor:pointer;transition:.12s}
.cameo-x:hover{background:var(--bg-3);color:var(--txt-0)}
.cameo-stage{position:relative;margin:0 18px;aspect-ratio:1;border-radius:13px;overflow:hidden;background:#0c0d12;
  display:grid;place-items:center;border:1px solid var(--line-2)}
.cameo-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cameo-shot{width:100%;height:100%;object-fit:cover}
.cameo-guide{position:absolute;inset:0;pointer-events:none}
/* faint pencil pose-guide ghosted into the ring (mirrored to match the selfie video) */
.cameo-guide-ghost{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) scaleX(-1);
  width:60%;height:74%;object-fit:contain;opacity:.55;pointer-events:none;mix-blend-mode:multiply;z-index:1}
.cameo-guide-loading{color:var(--txt-3);font-style:italic}
.cameo-guide::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:54%;height:70%;border:2px dashed oklch(0.85 0.08 296 / .6);border-radius:50%}
.cameo-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.04em;text-transform:uppercase;color:oklch(0.92 0.02 280 / .82);text-shadow:0 1px 4px rgba(0,0,0,.8)}
.cameo-msg{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:24px;color:var(--txt-2)}
.cameo-msg>svg{color:oklch(0.72 0.16 45)}
.cameo-msg-t{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--txt-0)}
.cameo-msg-s{font-family:var(--f-ui);font-size:12px;color:var(--txt-2);max-width:30ch}
.cameo-msg-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.cameo-consent{margin:14px 18px 0;display:flex;flex-direction:column;gap:9px}
.cameo-check{display:flex;align-items:flex-start;gap:9px;font-family:var(--f-ui);font-size:12px;line-height:1.45;color:var(--txt-1);cursor:pointer}
.cameo-check input{margin-top:2px;width:15px;height:15px;flex:0 0 auto;accent-color:oklch(0.62 0.18 295)}
.cameo-check.sync{color:var(--txt-2);font-size:11.5px}
.cameo-check b{color:var(--txt-0);font-weight:600}
.cameo-err{font-family:var(--f-ui);font-size:11.5px;color:var(--neg)}
/* wraps on narrow widths: Lock likeness takes its own full row instead of clipping */
.cameo-acts{display:flex;flex-wrap:wrap;gap:9px;padding:16px 18px 18px;margin-top:4px}
.cameo-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border-radius:9px;
  font-family:var(--f-ui);font-size:13px;font-weight:600;cursor:pointer;transition:.12s;border:1px solid transparent;white-space:nowrap}
.cameo-btn.ghost{background:var(--bg-2);border-color:var(--line-2);color:var(--txt-1)}
.cameo-btn.ghost:hover{background:var(--bg-3);color:var(--txt-0)}
.cameo-btn.primary{flex:1 1 auto;min-width:190px;background:oklch(0.62 0.18 295);color:#fff}
.cameo-btn.primary:hover:not(:disabled){background:oklch(0.66 0.18 295)}
.cameo-btn.primary:disabled{opacity:.45;cursor:default}
.cameo-btn.cap{flex:1}

/* B: multi-angle strip */
/* left-anchored so it can never collide with the "Capture now" button top-right;
   long labels ellipsize instead of running underneath it */
.cameo-anglebadge{position:absolute;top:10px;left:10px;font-family:var(--f-mono);
  font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:oklch(0.4 0.05 290 / .7);
  padding:3px 9px;border-radius:20px;white-space:nowrap;max-width:calc(100% - 128px);overflow:hidden;text-overflow:ellipsis}
.cameo-anglebadge b{color:oklch(0.86 0.1 296)}
/* auto-capture: readiness ring, cue, progress, flash, manual + toggle */
.cameo-guide.go::before{border-color:oklch(0.78 0.16 150 / .9);border-style:solid;
  box-shadow:0 0 0 3px oklch(0.78 0.16 150 / .25),0 0 24px oklch(0.78 0.16 150 / .35)}
.cameo-cue{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:oklch(0.2 0.02 280 / .68);padding:5px 12px;border-radius:14px;text-shadow:0 1px 3px rgba(0,0,0,.6);
  max-width:calc(100% - 24px);white-space:normal;text-align:center;line-height:1.45}
.cameo-cue-dot{width:7px;height:7px;border-radius:50%;background:oklch(0.72 0.16 45);flex:0 0 auto}
/* GO state — unmistakable: the pill itself turns green while the countdown runs */
.cameo-cue.go{background:oklch(0.36 0.1 150 / .88);box-shadow:0 0 0 1px oklch(0.78 0.16 150 / .5)}
.cameo-cue.go .cameo-cue-dot{background:oklch(0.82 0.17 150);animation:cameo-pulse .8s ease-in-out infinite}
.cameo-cue.done .cameo-cue-dot{background:oklch(0.78 0.16 150)}
.cameo-cue.off .cameo-cue-dot{background:var(--txt-3)}
@keyframes cameo-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.cameo-prog{position:absolute;left:14px;right:14px;bottom:14px;height:6px;border-radius:4px;background:oklch(0.3 0.02 280 / .6);overflow:hidden}
.cameo-prog-fill{height:100%;border-radius:4px;background:oklch(0.78 0.16 150);transition:width .14s linear}
.cameo-capnow{position:absolute;top:10px;right:10px;background:oklch(0.2 0.02 280 / .66);color:#fff;border:1px solid rgba(255,255,255,.2);
  font-family:var(--f-ui);font-size:11px;font-weight:600;padding:4px 10px;border-radius:7px;cursor:pointer;transition:.12s}
.cameo-capnow:hover{background:oklch(0.62 0.18 295)}
.cameo-flash{position:absolute;inset:0;background:#fff;animation:cameo-flash .28s ease-out;pointer-events:none;z-index:3}
@keyframes cameo-flash{0%{opacity:.9}100%{opacity:0}}
.cameo-autopill{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:9px;cursor:pointer;
  font-family:var(--f-ui);font-size:12px;font-weight:600;transition:.12s;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-2)}
.cameo-autopill svg{opacity:.6}
.cameo-autopill.on{border-color:oklch(0.78 0.16 150 / .5);background:oklch(0.78 0.16 150 / .12);color:oklch(0.82 0.13 152)}
.cameo-autopill.on svg{opacity:1}
.cameo-strip{display:flex;gap:9px;padding:14px 18px 0}
.cameo-slot{position:relative;flex:1;aspect-ratio:1;border-radius:10px;border:1.5px dashed var(--line-3);
  background:var(--bg-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;transition:.12s;overflow:hidden;padding:0}
.cameo-slot:hover{border-color:oklch(0.62 0.18 295 / .5)}
.cameo-slot.active{border-style:solid;border-color:oklch(0.62 0.18 295);box-shadow:0 0 0 3px oklch(0.62 0.18 295 / .16)}
.cameo-slot.filled{border-style:solid;border-color:var(--line-2)}
.cameo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cameo-slot-empty{color:var(--txt-3);display:grid;place-items:center}
.cameo-slot-guide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(1) contrast(1.05)}
.cameo-slot-lab{position:absolute;bottom:0;left:0;right:0;font-family:var(--f-mono);font-size:8.5px;
  letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:3px 2px;color:var(--txt-2);
  background:linear-gradient(transparent,var(--bg-1) 60%);z-index:1}
.cameo-slot.filled .cameo-slot-lab{color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6) 70%)}
.cameo-slot-lab i{color:oklch(0.78 0.13 296);font-style:normal}
.cameo-slot-x{position:absolute;top:4px;right:4px;z-index:2;width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.12s}
.cameo-slot-x:hover{background:var(--neg)}
.cameo-subject{width:100%;height:34px;padding:0 11px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--txt-0);font-family:var(--f-ui);font-size:12.5px;outline:none}
.cameo-subject:focus{border-color:oklch(0.62 0.18 295 / .6)}
.cameo-check.sync.disabled{opacity:.6}

/* B: cameo manager */
.cameo-modal.mgr{width:min(540px,100%)}
.cameo-mgr-body{padding:6px 18px 18px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.cameo-mgr-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:30px 20px;
  color:var(--txt-2);font-family:var(--f-ui);font-size:13px}
.cameo-mgr-empty svg{color:var(--txt-3)}
.cameo-mgr-row{display:flex;align-items:center;gap:13px;padding:11px;border-radius:11px;
  background:var(--bg-2);border:1px solid var(--line-2)}
.cameo-mgr-thumbs{display:flex;gap:4px;flex:0 0 auto}
.cameo-mgr-thumbs img{width:42px;height:42px;border-radius:7px;object-fit:cover;border:1px solid var(--line-2)}
.cameo-mgr-noimg{width:42px;height:42px;border-radius:7px;display:grid;place-items:center;
  background:var(--bg-3);color:var(--txt-3)}
.cameo-mgr-meta{flex:1;min-width:0}
.cameo-mgr-name{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--txt-0)}
.cameo-mgr-prov{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;color:var(--txt-3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cameo-mgr-store{margin-top:6px}
.cameo-store-pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-ui);font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:5px}
.cameo-store-pill.local{background:var(--bg-4);color:var(--txt-2)}
.cameo-store-pill.cloud{background:oklch(0.6 0.13 230 / .16);color:oklch(0.78 0.11 230)}
.cameo-mgr-acts{display:flex;gap:6px;flex:0 0 auto}
.cameo-mgr-btn{height:28px;padding:0 11px;border-radius:7px;border:1px solid var(--line-2);background:var(--bg-3);
  color:var(--txt-1);font-family:var(--f-ui);font-size:11.5px;font-weight:600;cursor:pointer;transition:.12s}
.cameo-mgr-btn:hover{background:var(--bg-4);color:var(--txt-0)}
.cameo-mgr-btn.danger{color:oklch(0.7 0.16 25)}
.cameo-mgr-btn.danger:hover{background:oklch(0.6 0.2 18 / .14);color:var(--neg)}
.art-cameo-mgr{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:9px;
  border:1px solid oklch(0.62 0.18 295 / .4);background:oklch(0.62 0.18 295 / .1);color:oklch(0.82 0.12 296);
  font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s;white-space:nowrap}
.art-cameo-mgr:hover{background:oklch(0.62 0.18 295 / .2);color:oklch(0.88 0.1 296)}

/* linked prop sheets (character card) */
.linked-props{margin-top:10px}
.linked-props-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.linked-props-head .obj-lab{flex:1;min-width:0}
.linked-props-clean{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  padding:3px 8px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:.02em;
  color:oklch(0.7 0.17 25);background:oklch(0.7 0.17 25 / .1);border:1px solid oklch(0.7 0.17 25 / .32)}
.linked-props-clean:hover{background:oklch(0.7 0.17 25 / .18)}
.linked-props-clean svg{flex:0 0 auto}
.linked-prop-list{display:flex;flex-direction:column;gap:6px}
.linked-prop{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;
  background:var(--bg-3);border:1px solid var(--line-2);font-size:11.5px;color:var(--txt-2)}
.linked-prop svg{flex:0 0 auto;color:var(--txt-3)}
.linked-prop-name{flex:1;min-width:0;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linked-prop-status{flex:0 0 auto;font-size:9.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--txt-3)}
/* has a generated sheet -> green */
.linked-prop.ready{border-color:oklch(0.6 0.13 150 / .38);background:oklch(0.6 0.13 150 / .08)}
.linked-prop.ready svg{color:oklch(0.7 0.14 150)}
.linked-prop.ready .linked-prop-status{color:oklch(0.72 0.14 150)}
/* no sheet yet -> red */
.linked-prop.missing{border-color:oklch(0.62 0.2 25 / .34);background:oklch(0.62 0.2 25 / .07)}
.linked-prop.missing svg{color:oklch(0.66 0.19 25)}
.linked-prop.missing .linked-prop-status{color:oklch(0.68 0.19 25)}
/* carried prop: deferred to the shot level, not attached to the character sheet — neutral, not an error */
.linked-prop.shot .linked-prop-status{color:var(--txt-3)}
/* carried prop WITH a generated sheet: keep the neutral row, but green the tick + icon
   so "generated" reads the same everywhere and an ungenerated carried prop is distinguishable */
.linked-prop.shot.genned svg{color:oklch(0.7 0.14 150)}
.linked-prop.shot.genned .linked-prop-status{color:oklch(0.72 0.14 150)}
/* orphaned owned-prop: owned by the character but absent from the worn/carried lists */
.linked-prop.orphan{border-color:oklch(0.7 0.17 25 / .45);background:oklch(0.7 0.17 25 / .1);opacity:.95}
.linked-prop.orphan svg{color:oklch(0.7 0.17 25)}
.linked-prop-orphan-tag{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:oklch(0.72 0.17 25);background:oklch(0.7 0.17 25 / .14);padding:2px 6px;border-radius:5px}

/* in-app confirm dialog (replaces window.confirm) */
.appconfirm-scrim{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);animation:appconfirm-fade .12s ease}
@keyframes appconfirm-fade{from{opacity:0}to{opacity:1}}
.appconfirm{width:min(440px,94vw);background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-l,14px);box-shadow:0 24px 80px rgba(0,0,0,.6);padding:22px 22px 18px;
  animation:appconfirm-pop .14s cubic-bezier(.2,.8,.3,1)}
@keyframes appconfirm-pop{from{transform:translateY(8px) scale(.985);opacity:.4}to{transform:none;opacity:1}}
.appconfirm-title{font-size:16px;font-weight:650;color:var(--txt-0);line-height:1.3;margin-bottom:8px}
.appconfirm-body{font-size:13px;color:var(--txt-1);line-height:1.5}
.appconfirm-items{margin:10px 0 0;padding:10px 12px;list-style:none;display:flex;flex-direction:column;gap:5px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;
  font-size:12.5px;color:var(--txt-1);max-height:180px;overflow:auto}
.appconfirm-items li{display:flex;gap:7px;align-items:baseline;line-height:1.4}
.appconfirm-items li::before{content:"\2022";color:var(--txt-3);flex:0 0 auto}
.appconfirm-note{margin-top:12px;font-size:11.5px;color:var(--txt-3);line-height:1.45}
.appconfirm-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px}
.appconfirm-btn{font-family:var(--f-ui);font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:8px;
  cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s}
.appconfirm-btn.ghost{background:transparent;border-color:var(--line);color:var(--txt-1)}
.appconfirm-btn.ghost:hover{background:var(--bg-3);border-color:var(--line-2)}
.appconfirm-btn.primary{background:var(--accent);color:var(--ink-on-accent)}
.appconfirm-btn.primary:hover{filter:brightness(1.08)}
.appconfirm-btn.danger{background:oklch(0.62 0.2 25);color:#fff}
.appconfirm-btn.danger:hover{filter:brightness(1.08)}
.appconfirm-btn.alt{background:var(--bg-4);border-color:var(--line-2);color:var(--txt-0)}
.appconfirm-btn.alt:hover{background:var(--bg-5);border-color:var(--line-1)}

/* image details modal */
/* the details modal is a CENTERED card (not the full-screen image viewer), so its
   overlay must center the panel + use a softer scrim than .lb-overlay's near-opaque one */
.dt-overlay{display:grid;place-items:center;padding:24px;background:rgba(8,8,10,.72)}
.dt-panel{width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.6)}
/* version preview — sits ON TOP of the details modal (not behind it) */
.dt-preview{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.dt-preview-img{max-width:96vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 70px rgba(0,0,0,.6)}
.dt-preview-x{position:fixed;top:18px;right:20px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:rgba(20,20,22,.85);border:1px solid var(--line-2);color:#fff;cursor:pointer}
.dt-preview-x:hover{background:rgba(40,40,44,.95)}
.dt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.dt-title{font-size:15px;font-weight:650;color:var(--txt-0);line-height:1.25;word-break:break-word}
.dt-head>div:first-child{min-width:0}
.ag-x{flex:0 0 auto}
.dt-sub{font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.dt-scroll{overflow-y:auto;padding:16px 18px 22px;display:flex;flex-direction:column;gap:16px}
.dt-hero{width:100%;border-radius:10px;border:1px solid var(--line-2);background:#000;cursor:zoom-in;display:block}
.dt-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px}
/* phones: the details modal gets the full width (less a thin margin) and the
   metadata grid stacks to one column so long mono values don't get cramped. */
@media (max-width:480px){
  .lb-overlay{padding:14px}
  .dt-grid{grid-template-columns:1fr}
}
.dt-field{min-width:0}
.dt-flab{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3);margin-bottom:3px}
.dt-fval{font-size:12.5px;color:var(--txt-1);line-height:1.35;word-break:break-word;font-family:var(--f-mono)}
.dt-section{display:flex;flex-direction:column;gap:9px}
.dt-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dt-sec-lab{display:flex;align-items:center;gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-2);font-weight:600}
.dt-copy{display:inline-flex;align-items:center;gap:5px;font:500 10px/1 var(--f-ui);color:var(--txt-2);
  background:var(--bg-4);border:1px solid var(--line-2);border-radius:5px;padding:4px 8px;cursor:pointer}
.dt-copy:hover{background:var(--bg-5);color:var(--txt-0)}
.dt-prompt{font-size:11.5px;line-height:1.55;color:var(--txt-1);background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:8px;padding:11px 12px;max-height:180px;overflow-y:auto;white-space:pre-wrap;
  font-family:var(--f-mono);word-break:break-word}
.dt-camera-box{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:8px;padding:10px 12px}
.dt-camera-row{display:flex;flex-direction:column;gap:2px;min-width:0}
.dt-camera-k{font:600 9.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.dt-camera-v{font:600 11.5px/1.35 var(--f-ui);color:var(--txt-1);word-break:break-word}
.dt-camera-note{grid-column:1/-1;font:11px/1.45 var(--f-mono);color:var(--txt-2);border-top:1px solid var(--line);
  margin-top:2px;padding-top:8px;white-space:pre-wrap}
@media (max-width:480px){ .dt-camera-box{grid-template-columns:1fr} }
.dt-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.dt-thumb{width:88px;cursor:zoom-in}
.dt-thumb img{width:88px;height:66px;object-fit:cover;border-radius:7px;border:1px solid var(--line-2);background:#000;display:block}
.dt-thumb-ph{width:88px;height:66px;border-radius:7px;border:1px dashed var(--line-2);background:var(--bg-2);
  place-items:center;color:var(--txt-3)}
.dt-thumb-lab{display:block;font-size:9.5px;color:var(--txt-3);margin-top:4px;line-height:1.25;text-wrap:pretty}
.dt-noref{font-size:11.5px;color:var(--txt-3);font-style:italic}
.dt-hist{display:flex;flex-direction:column;gap:8px}
.dt-hist-row{display:flex;align-items:center;gap:11px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:9px;padding:8px 10px}
.dt-hist-thumb{width:54px;height:40px;object-fit:cover;border-radius:5px;border:1px solid var(--line-2);
  background:#000;cursor:zoom-in;flex:0 0 auto}
.dt-hist-info{flex:1;min-width:0}
.dt-hist-layer{display:flex;align-items:center;gap:5px;font-size:11.5px;line-height:1.3;margin-bottom:2px}
.dt-hist-layer-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-hist-layer.edit{color:oklch(0.82 0.11 295)}
.dt-hist-layer.edit svg{color:oklch(0.72 0.14 295)}
.dt-hist-layer.base{color:var(--txt-1)}
.dt-hist-layer.base svg{color:var(--txt-3)}
.dt-hist-meta{font-size:11.5px;color:var(--txt-1);line-height:1.3}
.dt-hist-mode{font-size:10px;color:var(--txt-3);font-family:var(--f-mono)}
.dt-hist-acts{display:flex;gap:6px;flex:0 0 auto}
.dt-hist-item{display:flex;flex-direction:column}
.dt-hist-item.active{outline:2px solid oklch(0.62 0.14 295 / .6);outline-offset:2px;border-radius:9px}
/* "viewing an earlier version" banner */
.dt-viewing{display:flex;align-items:center;gap:8px;margin:10px 0 4px;padding:8px 11px;border-radius:8px;
  background:oklch(0.92 0.055 296);border:1px solid oklch(0.68 0.13 296 / .55);
  color:oklch(0.36 0.13 296);font-size:12px;font-weight:600}
.dt-viewing svg{flex:0 0 auto;color:oklch(0.48 0.15 296)}
.dt-viewing-t{flex:1;min-width:0}
.dt-viewing-back{flex:0 0 auto;font:600 11px var(--f-ui);color:var(--txt-0);background:var(--bg-3,#2a2a2a);
  border:1px solid var(--line-2);border-radius:6px;padding:4px 10px;cursor:pointer}
.dt-viewing-back:hover{border-color:var(--line-1)}
html[data-theme="dark"] .dt-viewing{background:oklch(0.33 0.08 296 / .72);border-color:oklch(0.65 0.13 296 / .5);color:oklch(0.9 0.055 296)}
html[data-theme="dark"] .dt-viewing svg{color:oklch(0.82 0.09 296)}
.dt-current-actions{display:flex;justify-content:flex-end;margin-top:-4px}
.dt-current-delete{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--f-ui);
  color:oklch(0.72 0.18 25);background:oklch(0.55 0.18 25 / .08);
  border:1px solid oklch(0.55 0.18 25 / .28);border-radius:7px;padding:7px 10px;cursor:pointer}
.dt-current-delete:hover:not(:disabled){background:oklch(0.55 0.18 25 / .16);border-color:oklch(0.55 0.18 25 / .45);color:oklch(0.82 0.16 25)}
.dt-current-delete:disabled{opacity:.55;cursor:default}
.dt-hist-btn.del{padding:4px 7px;color:var(--txt-2)}
.dt-hist-btn.del:hover:not(:disabled){background:oklch(0.55 0.18 25 / .18);border-color:oklch(0.55 0.18 25 / .5);color:oklch(0.82 0.16 25)}
.dt-hist-btn.on{border-color:var(--line-1);color:var(--txt-0)}
.dt-hist-prompt{margin:2px 0 8px;padding:9px 11px;background:var(--bg-2);border:1px solid var(--line-3);border-radius:8px}
.dt-hist-prompt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.dt-hist-prompt-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-hist-btn{font:500 10.5px/1 var(--f-ui);color:var(--txt-1);background:var(--bg-4);border:1px solid var(--line-2);
  border-radius:6px;padding:6px 10px;cursor:pointer}
.dt-hist-btn:hover{background:var(--bg-5);color:var(--txt-0)}
.dt-hist-btn.restore{color:var(--pos);border-color:oklch(0.78 0.15 62 / .35)}
.dt-hist-btn.restore:hover{background:oklch(0.78 0.15 62 / .14);color:var(--pos)}
.dt-hist-btn:disabled{opacity:.5;cursor:default}
/* clickable version row: thumb + info select the version (its image + all props) */
.dt-hist-main{flex:1;min-width:0;display:flex;align-items:center;gap:11px;
  background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.dt-hist-main:hover .dt-hist-layer-t{color:var(--txt-0)}
.dt-hist-main:hover .dt-hist-thumb,.dt-hist-main:hover .dt-hist-thumb-ph{border-color:var(--line-1)}
.dt-hist-thumb-wrap{position:relative;width:54px;height:40px;flex:0 0 auto}
.dt-hist-thumb-ph{width:54px;height:40px;border-radius:5px;border:1px dashed var(--line-2);
  background:var(--bg-3);place-items:center;color:var(--txt-3)}
/* current/version image missing from storage (dangling path) */
.dt-hero-missing{align-items:center;gap:9px;padding:16px 14px;border:1px dashed var(--line-2);
  border-radius:10px;background:var(--bg-2);color:var(--txt-3);font-size:12px;line-height:1.4}
.dt-hero-missing svg{flex:0 0 auto;color:var(--txt-3)}

/* auth modal + account chip */
/* auth modal has its OWN overlay (not the immersive image lightbox's .lb-overlay,
   which is display:block / top-aligned) so the panel stays centered in the viewport */
.auth-overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,8,10,.6)}
.auth-panel{position:relative;width:min(400px,94vw);background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.auth-head{padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.auth-mark{font-family:var(--f-ui);font-weight:800;letter-spacing:.04em;font-size:12px;color:var(--pos);margin-bottom:12px}
.auth-title{font-size:19px;font-weight:680;color:var(--txt-0);line-height:1.2}
.auth-sub{font-size:12.5px;color:var(--txt-2);margin-top:5px;line-height:1.45;text-wrap:pretty}
.auth-body{padding:18px 24px 22px;display:flex;flex-direction:column;gap:13px}
.auth-field{display:flex;flex-direction:column;gap:5px}
.auth-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3);font-weight:600}
.auth-input{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line-3);
  border-radius:8px;color:var(--txt-0);font:14px var(--f-ui);padding:10px 12px;outline:none;transition:border-color .12s}
.auth-input:focus{border-color:var(--pos)}
.auth-input::placeholder{color:var(--txt-3)}
/* password field — show/hide toggle + a "forgot" link on the label row */
.auth-lab-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.auth-forgot{background:0;border:0;cursor:pointer;padding:0;color:var(--txt-2);
  font:600 11px var(--f-ui);transition:.12s}
.auth-forgot:hover{color:var(--pos)}
.auth-pw{position:relative}
.auth-pw .auth-input{padding-right:40px}
.auth-pw-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:inline-flex;
  align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:7px;
  background:transparent;color:var(--txt-3);cursor:pointer;transition:.12s}
.auth-pw-toggle:hover{color:var(--txt-0);background:var(--bg-4)}
.auth-submit{margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;
  background:var(--pos);color:var(--ink-on-accent);font:650 13.5px var(--f-ui);border:0;border-radius:9px;cursor:pointer;transition:.12s}
.auth-submit:hover:not(:disabled){filter:brightness(1.08)}
.auth-submit:disabled{opacity:.7;cursor:default}
.auth-err{font-size:12px;line-height:1.4;color:var(--alert);background:var(--alert-soft);
  border:1px solid var(--alert);border-radius:7px;padding:8px 10px}
.auth-notice{font-size:12px;line-height:1.4;color:var(--pos);background:oklch(0.78 0.15 62 / .1);
  border:1px solid oklch(0.78 0.15 62 / .3);border-radius:7px;padding:8px 10px}
.auth-switch{font-size:12px;color:var(--txt-2);text-align:center;margin-top:2px}
.auth-link{background:none;border:0;color:var(--pos);font:600 12px var(--f-ui);cursor:pointer;padding:0}
.auth-link:hover{text-decoration:underline}
.auth-close{position:absolute;top:14px;right:14px;display:inline-flex;background:transparent;border:0;
  color:var(--txt-3);cursor:pointer;padding:4px;border-radius:6px}
.auth-close:hover{color:var(--txt-0);background:var(--bg-4)}

/* ---- light "Paper & Ink" auth variant — over the marketing landing page ----
   Mirrors the homepage system: Paper panel, hairlines, mono labels, Carbon pill,
   Rise/Fall tints for notice/error. The in-app (dark) modal is untouched. */
.auth-overlay.auth-light{background:rgba(15,16,18,.38);backdrop-filter:blur(6px)}
.auth-panel.light{--pos:#13955E;--neg:#D2493E;
  background:#FCFCFB;border-color:#E8E8E5;border-radius:18px;box-shadow:0 24px 64px rgba(15,16,18,.16)}
.auth-panel.light .auth-head{border-bottom-color:#E8E8E5;padding:24px 26px 18px}
.auth-panel.light .auth-mark{font-family:var(--f-display);font-weight:700;letter-spacing:.04em;color:#0F1012}
.auth-panel.light .auth-act{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:#5D6066;margin-bottom:8px}
.auth-panel.light .auth-title{font-family:var(--f-display);font-weight:600;font-size:22px;
  letter-spacing:-.01em;color:#0F1012}
.auth-panel.light .auth-sub{color:#5D6066;font-size:13px}
.auth-panel.light .auth-body{padding:20px 26px 24px}
.auth-panel.light .auth-lab{font-family:var(--f-mono);font-weight:500;font-size:10px;
  letter-spacing:.14em;color:#5D6066}
.auth-panel.light .auth-input{background:#fff;border-color:#E1E1DD;color:#0F1012;
  border-radius:10px;padding:11px 13px}
.auth-panel.light .auth-input:focus{border-color:#0F1012}
.auth-panel.light .auth-input::placeholder{color:#9a9da3}
.auth-panel.light .auth-submit{background:#0D0D0E;color:#fff;border-radius:999px;font:600 14px var(--f-ui)}
.auth-panel.light .auth-submit:hover:not(:disabled){background:#26262a;filter:none}
.auth-panel.light .auth-err{color:#B23E33;background:rgba(210,73,62,.07);border-color:rgba(210,73,62,.35)}
.auth-panel.light .auth-notice{color:#0E7A4D;background:rgba(19,149,94,.07);border-color:rgba(19,149,94,.3)}
.auth-panel.light .auth-forgot{color:#5D6066}
.auth-panel.light .auth-forgot:hover{color:#0F1012}
.auth-panel.light .auth-pw-toggle{color:#9a9da3}
.auth-panel.light .auth-pw-toggle:hover{color:#0F1012;background:#F1F1EE}
.auth-panel.light .auth-switch{color:#5D6066}
.auth-panel.light .auth-link{color:#0F1012;text-decoration:underline;text-underline-offset:2px}
.auth-panel.light .auth-close{color:#5D6066}
.auth-panel.light .auth-close:hover{color:#0F1012;background:#F1F1EE}
.auth-panel.light .auth-plan{color:#0E7A4D;background:rgba(19,149,94,.08);border-color:rgba(19,149,94,.3)}
.auth-panel.light .auth-plan-note{color:#5D6066}

.acct-signin{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;
  background:var(--bg-4);border:1px solid var(--line-2);color:var(--txt-1);font:600 12px var(--f-ui);cursor:pointer}
.acct-signin:hover{background:var(--bg-5);color:var(--txt-0)}
.acct-wrap{position:relative}
.acct-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:3px 9px 3px 3px;border-radius:20px;
  background:var(--bg-4);border:1px solid var(--line-2);cursor:pointer;transition:.12s}
.acct-chip:hover,.acct-chip.open{background:var(--bg-5)}
.acct-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--pos);color:var(--ink-on-accent);font:700 12px var(--f-ui);flex:0 0 auto}
.acct-cloud{display:inline-flex;align-items:center;gap:3px;font:600 10px var(--f-ui);letter-spacing:.04em;
  text-transform:uppercase;color:var(--pos)}
.acct-cloud.warn{color:oklch(0.82 0.14 55)}
/* save actually failed — uses the themed --neg token (a raw oklch here washes out in
   light mode), and pulses so a silent data-loss risk isn't easy to miss */
.acct-cloud.bad{color:var(--neg);animation:acctBad 1.6s ease-in-out infinite}
@keyframes acctBad{0%,100%{opacity:1}50%{opacity:.45}}
.acct-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;background:var(--bg-4);
  border:1px solid var(--line-2);border-radius:10px;padding:12px;z-index:60;box-shadow:0 12px 36px rgba(0,0,0,.6)}
.acct-email{font-size:12.5px;color:var(--txt-0);font-weight:600;word-break:break-all;line-height:1.3}
.acct-status{font-size:10.5px;color:var(--txt-3);margin-top:3px;margin-bottom:11px}
.acct-signout{width:100%;height:34px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:7px;
  color:var(--txt-1);font:600 12px var(--f-ui);cursor:pointer}
.acct-signout:hover{background:var(--bg-3);color:var(--txt-0)}
.acct-upgrade{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;margin:8px 0 2px;
  background:var(--pos-soft);border:1px solid var(--pos-line);border-radius:7px;color:var(--pos);
  font:700 12px var(--f-ui);cursor:pointer;transition:.12s}
.acct-upgrade:hover{background:var(--pos);color:var(--ink-on-accent)}

/* ---- Cinema Machine plans / paywall modal ---- */
.plans-modal{position:relative;width:min(880px,94vw);max-height:88vh;overflow:auto;background:var(--bg-1);
  border:1px solid var(--line-2);border-radius:16px;padding:26px 26px 20px;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.plans-x{position:absolute;top:14px;right:14px}
.plans-head{text-align:center;margin-bottom:20px}
.plans-title{font-family:var(--f-display);font-size:22px;font-weight:700;color:var(--txt-0)}
.plans-sub{font-size:12.5px;color:var(--txt-2);margin-top:5px}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:720px){.plans-grid{grid-template-columns:1fr}}
.plan-card{position:relative;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:13px;padding:18px 16px}
.plan-card.popular{border-color:var(--pos-line);box-shadow:0 0 0 1px var(--pos-line)}
.plan-card.active{border-color:var(--pos)}
.plan-flag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--pos);color:var(--ink-on-accent);font:700 9px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px}
.plan-name{font-family:var(--f-display);font-size:16px;font-weight:700;color:var(--txt-0)}
.plan-price{font-family:var(--f-display);font-size:30px;font-weight:700;color:var(--txt-0);margin:6px 0 2px}
.plan-per{font-size:13px;font-weight:600;color:var(--txt-2);margin-left:2px}
.plan-blurb{font-size:12px;color:var(--txt-1);min-height:32px;line-height:1.4}
.plan-feats{list-style:none;margin:10px 0 14px;padding:0;display:flex;flex-direction:column;gap:7px;flex:1}
.plan-feats li{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--txt-1);line-height:1.4}
.plan-feats li svg{color:var(--pos);flex-shrink:0;margin-top:2px}
.plan-cta{height:38px;border:1px solid var(--line-3);border-radius:8px;background:var(--bg-3);color:var(--txt-0);
  font:700 12.5px var(--f-ui);cursor:pointer;transition:.12s}
.plan-cta:hover:not(:disabled){border-color:var(--pos-line);color:var(--pos)}
.plan-cta.primary{background:var(--pos);border-color:var(--pos);color:var(--ink-on-accent)}
.plan-cta.primary:hover:not(:disabled){filter:brightness(1.06)}
.plan-cta.is-active{background:var(--bg-2);color:var(--txt-2);cursor:default}
.credit-packs{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.credit-packs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.credit-packs-title{font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--txt-0)}
.credit-packs-sub{font-size:11.5px;color:var(--txt-2);margin-top:2px}
.credit-packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:720px){.credit-packs-grid{grid-template-columns:1fr}}
.credit-pack{position:relative;display:flex;flex-direction:column;gap:7px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:10px;padding:13px}
.credit-pack.popular{border-color:var(--pos-line)}
.credit-pack-flag{position:absolute;top:-8px;right:10px;background:var(--pos);color:var(--ink-on-accent);
  font:700 8px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
.credit-pack-name{font:700 12.5px var(--f-display);color:var(--txt-0)}
.credit-pack-price{font:800 20px var(--f-display);color:var(--txt-0)}
.credit-pack-blurb{min-height:33px;font-size:11.5px;line-height:1.4;color:var(--txt-2)}
.credit-pack .plan-cta{height:32px;margin-top:2px}
.plans-foot{text-align:center;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;color:var(--txt-2);margin-top:16px}

/* project switcher */
.proj-wrap{position:relative}
.proj-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:9px;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);font:600 12px var(--f-ui);cursor:pointer;
  /* 200px predates the SHARED badge: a title plus format + framework + shared could not
     fit, and the overflow hard-clipped the last badge mid-word ("STORY CI"). The cap is
     now generous enough for the full set; under real pressure the name ellipsizes, then
     badges shed by viewport (below), so nothing is ever cut without indication. */
  max-width:420px}
.proj-btn:hover,.proj-btn.open{background:var(--bg-4);color:var(--txt-0)}
.proj-btn{min-width:0;overflow:hidden}
.proj-btn .proj-name{flex:0 1 auto;min-width:0;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* tight widths: shed the framework badge first (it's also on the Brief), then the format —
   shedding beats squeezing three badges into a space that fits one */
.vp-tablet .proj-btn .proj-format.fw{display:none}
.vp-mobile .proj-btn .proj-format.fw,
.vp-mobile .proj-btn .proj-format:not(.shared){display:none}
.proj-btn>svg:first-child{color:var(--pos);flex:0 0 auto}
.proj-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:var(--bg-4);
  border:1px solid var(--line-2);border-radius:11px;padding:8px;z-index:60;box-shadow:0 12px 36px rgba(0,0,0,.6)}
.proj-menu-lab{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3);padding:4px 8px 7px}
.proj-list{display:flex;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto}
.proj-row{display:flex;align-items:center;gap:2px;border-radius:7px}
.proj-row.on{background:var(--bg-5)}
.proj-row-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  padding:8px 9px;color:var(--txt-1);font:500 12.5px var(--f-ui);text-align:left}
.proj-row-main:hover{color:var(--txt-0)}
.proj-dot{width:6px;height:6px;border-radius:50%;background:var(--line-3);flex:0 0 auto}
.proj-row.on .proj-dot{background:var(--pos)}
.proj-row-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-format.shared{background:var(--pos-soft);border-color:var(--pos-line);color:var(--pos)}
.proj-row-share{flex:0 0 auto;font-family:var(--f-mono);font-size:8.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--pos);border:1px solid var(--pos-line);background:var(--pos-soft);
  border-radius:20px;padding:1px 6px;white-space:nowrap}
.proj-row-act{flex:0 0 auto;display:inline-flex;background:none;border:0;color:var(--txt-3);cursor:pointer;
  padding:6px;border-radius:5px;opacity:0;transition:opacity .12s}
.proj-row:hover .proj-row-act{opacity:1}
.proj-row-act:hover{color:var(--txt-0);background:var(--bg-3)}
.proj-row-act.danger:hover{color:var(--alert)}
.proj-rename{display:flex;align-items:center;gap:5px;padding:4px 6px}
.proj-rename-input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--pos);border-radius:6px;
  color:var(--txt-0);font:500 12.5px var(--f-ui);padding:6px 8px;outline:none}
.proj-rename-ok{display:inline-flex;background:var(--pos);color:var(--ink-on-accent);border:0;border-radius:6px;padding:6px;cursor:pointer}
.proj-new{display:flex;align-items:center;gap:7px;width:100%;margin-top:6px;padding:9px 9px;border-radius:7px;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--txt-1);font:600 12px var(--f-ui);cursor:pointer}
.proj-new:hover{background:var(--bg-3);color:var(--txt-0)}
.proj-new svg{color:var(--pos)}
.proj-new.ghosted{background:transparent;border-style:dashed}

/* shows (series) — a group header with its episodes nested beneath */
.proj-show{margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.proj-show-head{display:flex;align-items:center;gap:7px;padding:4px 9px 6px;color:var(--txt-2)}
.proj-show-head svg{color:var(--txt-3)}
.proj-show-name{flex:1;min-width:0;font:600 12px var(--f-display);color:var(--txt-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-show-tag{font-family:var(--f-mono);font-size:8.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line-2);border-radius:20px;padding:1px 7px}
.proj-row.ep{margin-left:14px}
.proj-newep{display:flex;align-items:center;gap:6px;width:calc(100% - 14px);margin:2px 0 4px 14px;
  padding:6px 9px;border-radius:7px;background:transparent;border:1px dashed var(--line-2);
  color:var(--txt-2);font:600 11px var(--f-ui);cursor:pointer}
.proj-newep:hover{color:var(--txt-0);background:var(--bg-3)}

/* edit sheet panel */
.sheet-edit-panel{margin-top:8px;display:flex;flex-direction:column;gap:7px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;padding:10px}
.sheet-edit-input{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line-3);
  border-radius:6px;color:var(--txt-0);font:13px var(--f-ui);padding:7px 10px;outline:none;
  transition:border-color .12s}
.sheet-edit-input:focus{border-color:var(--pos)}
.sheet-edit-input::placeholder{color:var(--txt-3)}
/* one-click edit suggestions (e.g. a location's set-dressing fixtures) — chips
   that fill the edit input with a ready instruction built from the prop's spec */
.sheet-edit-suggests{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.sheet-edit-suggests-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-2);margin-right:2px}
.sheet-edit-suggest{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--txt-1);font:600 11px var(--f-ui);cursor:pointer;transition:.12s}
.sheet-edit-suggest:hover{border-color:var(--pos-line);color:var(--txt-0)}
/* the chip's attach half: text + the fixture's sheet as an edit reference image */
.sheet-edit-suggest-group{display:inline-flex;align-items:center}
/* "Interior of" shell link on the location card head */

/* MULTI-SHOT editor (Stage composer) — Kling-style per-shot rows */
.stage2-ms{display:flex;flex-direction:column;gap:8px;margin:2px 0 8px}
.stage2-ms-row{background:#fff;border:1px solid #e2dbd0;border-radius:9px;padding:8px 10px}
/* the selected shot's row — picking a micro-beat in the Scenes rail scrolls here */
.stage2-ms-row.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
/* a COLLAPSED row keeps its header; only the text box is hidden */
.stage2-ms-row.folded .stage2-ms-head{margin-bottom:0}
/* an EXCLUDED shot is dimmed but stays fully in the list */
.stage2-ms-row.off{opacity:.62;background:#faf8f4}
.stage2-ms-row.off .stage2-ms-dur{pointer-events:none;opacity:.6}
.stage2-ms-offlab{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2)}
.stage2-ms-fold{width:18px;height:18px;flex-shrink:0;border:0;background:transparent;color:var(--txt-2);
  font:700 10px/1 var(--f-ui);cursor:pointer;border-radius:5px;padding:0}
.stage2-ms-fold:hover{background:#f3efe8;color:var(--txt-0)}
.stage2-ms-check{width:20px;height:20px;flex-shrink:0;border:1.5px solid #cdc4b4;border-radius:6px;background:#fff;
  color:#fff;font:800 12px/1 var(--f-ui);cursor:pointer;display:grid;place-items:center;padding:0}
.stage2-ms-check.on{background:var(--brand,#d67e00);border-color:var(--brand,#d67e00)}
.stage2-ms-check:hover{border-color:#b3a58f}
.stage2-ms-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.stage2-ms-tag{font:700 11px var(--f-ui);color:var(--txt-0);background:#f3efe8;border:1px solid #e2dbd0;border-radius:6px;padding:2px 8px}
.stage2-ms-beat{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2)}
.stage2-ms-dur{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid #e2dbd0;border-radius:7px;padding:1px 4px;background:#fff}
.stage2-ms-dur b{font:650 11px var(--f-ui);color:var(--txt-0);min-width:26px;text-align:center}
.stage2-ms-durpick{border:0;background:transparent;font:650 11px var(--f-ui);color:var(--txt-0);
  min-width:34px;text-align:center;cursor:pointer;outline:0;-webkit-appearance:none;appearance:none;padding:0 2px}
.stage2-ms-durpick:hover{color:var(--brand,#d67e00)}
.stage2-ms-dur button{width:20px;height:20px;border:0;background:transparent;color:var(--txt-2);font:700 13px var(--f-ui);cursor:pointer;border-radius:5px}
.stage2-ms-dur button:hover:not(:disabled){background:#f3efe8;color:var(--txt-0)}
.stage2-ms-dur button:disabled{opacity:.35;cursor:default}
.stage2-ms-text{width:100%;box-sizing:border-box;border:1px solid #eae4da;border-radius:7px;background:#fbfaf7;
  color:var(--txt-0);font:12.5px/1.5 var(--f-ui);padding:7px 9px;outline:0;resize:vertical;min-height:44px}
.stage2-ms-text:focus{border-color:var(--pos)}
.stage2-ms-text::placeholder{color:#a9a294;font-style:italic}
.stage2-ms-hint{font-size:10.5px;color:var(--txt-2);padding:0 2px}
.stage2-ms-caphead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border:1px solid #e2dbd0;border-radius:8px;background:#fbfaf7;padding:6px 10px}
.stage2-ms-caphead-model{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--f-ui);color:var(--txt-1)}
.stage2-ms-caphead-model svg{color:var(--brand,#d67e00)}
.stage2-ms-caphead-total{font:650 11px var(--f-mono);color:var(--txt-1)}
.stage2-ms-caphead.at{border-color:#e4c98f;background:#fdf6e7}
.stage2-ms-caphead.at .stage2-ms-caphead-total{color:#8a6a14}
.stage2-ms-caphead.over{border-color:#e3b7a8;background:#fdf0ec}
.stage2-ms-caphead.over .stage2-ms-caphead-total{color:#a33b16}
.stage2-ms-check.blocked{border-style:dashed;opacity:.45}
.stage2-ms-reset{border:1px solid #e2dbd0;border-radius:6px;background:#fff;color:var(--txt-2);
  font:600 10px var(--f-ui);padding:2px 7px;cursor:pointer}
.stage2-ms-reset:hover{color:var(--txt-0);border-color:#cbc2b4}
.stage2-ms-text.edited{background:#fff;border-color:#d8cfc0}
.stage2-ms-over{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 11px var(--f-ui);color:#8a5a00;
  background:#fdf3e2;border:1px solid #ecd9b4;border-radius:8px;padding:7px 10px}
.stage2-ms-over-text{flex:1;min-width:200px}
.stage2-ms-over-act{border:1px solid #ecd9b4;border-radius:7px;background:#fff;color:#8a5a00;
  font:700 11px var(--f-ui);padding:4px 11px;cursor:pointer;white-space:nowrap}
.stage2-ms-over-act:hover{border-color:#d9be8c}
.stage2-ms-over-act.primary{background:var(--brand,#d67e00);border-color:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722)}
.stage2-ms-over-act.primary:hover{filter:brightness(1.06)}
.stage2-gen-box.ms-mode{padding-top:6px}
/* Multi-shot: the pills box and Generate sit SIDE BY SIDE — the button lives
   outside the box, inline to its right */
.stage2-gen-row{display:flex;align-items:stretch;gap:10px}
.stage2-gen-row .stage2-gen-box{flex:1;min-width:0}
.stage2-gen-submit-neon.standalone{position:static;width:122px;flex-shrink:0;height:auto;min-height:56px}

/* the SCRIPT BEAT a shot covers — quoted source text on the shot card */
.shot-beat-script{display:flex;align-items:flex-start;gap:7px;margin:2px 0 4px;padding:7px 10px;
  background:var(--bg-2);border:1px solid var(--line-2);border-left:3px solid var(--line-3);border-radius:7px}
.shot-beat-script-lab{flex-shrink:0;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-2);margin-top:2px}
.shot-beat-script-body{font-size:11.5px;line-height:1.45;color:var(--txt-1);font-style:italic}
.sheet-edit-suggest-group .sheet-edit-suggest{border-top-right-radius:0;border-bottom-right-radius:0}
.sheet-edit-suggest.refclip{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;padding:0 7px}
.sheet-edit-acts{display:flex;align-items:center;gap:7px}
.sheet-edit-apply{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 13px;
  background:var(--pos);color:var(--ink-on-accent);font:600 11.5px var(--f-ui);border:0;border-radius:6px;cursor:pointer;transition:.12s}
.sheet-edit-apply:hover:not(:disabled){filter:brightness(1.08)}
.sheet-edit-apply:disabled{opacity:.55;cursor:default}
.sheet-edit-cancel{display:inline-flex;align-items:center;height:30px;padding:0 10px;font:500 11.5px var(--f-ui);color:var(--txt-2);background:transparent;
  border:0;cursor:pointer}
.sheet-edit-cancel:hover{color:var(--txt-0)}
.sheet-edit-undo{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;font:500 11.5px var(--f-ui);
  color:var(--txt-1);background:var(--bg-4);border:1px solid var(--line-2);border-radius:6px;cursor:pointer;transition:.12s}
.sheet-edit-undo:hover:not(:disabled){border-color:var(--line-1);color:var(--txt-0)}
.sheet-edit-undo:disabled{opacity:.5;cursor:default}
.sheet-edit-layers{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:10.5px;color:var(--txt-3)}
.sheet-edit-layers svg{flex:0 0 auto}

/* grounding tooltip */
.nb-ctl-note{font-size:10px;color:var(--txt-3);letter-spacing:.02em}
.nb-ctl-row{display:flex;align-items:center;gap:8px}
.nb-ground-wrap{position:relative}
.nb-ground-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:6px;
  color:var(--txt-2);font:600 10px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:.12s;white-space:nowrap}
.nb-ground-btn:hover,.nb-ground-btn.open{background:var(--bg-4);color:var(--txt-1);border-color:var(--line-3)}
.nb-ground-btn.on{background:oklch(0.78 0.15 62 / .12);border-color:oklch(0.78 0.15 62 / .4);color:var(--pos)}
.nb-ground-btn.on:hover{background:oklch(0.78 0.15 62 / .2)}
.nb-ground-tip{width:260px;z-index:1000;
  background:var(--bg-4);border:1px solid var(--line-2);border-radius:10px;
  padding:12px 14px;z-index:50;box-shadow:0 10px 32px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:10px}
.nb-ground-tip-head{display:flex;align-items:center;gap:6px;font:600 11.5px/1 var(--f-ui);color:var(--txt-0)}
.nb-ground-tip-badge{margin-left:2px;padding:2px 6px;background:oklch(0.78 0.15 62 / .12);
  border:1px solid oklch(0.78 0.15 62 / .3);border-radius:4px;font-size:9px;
  font-weight:700;letter-spacing:.06em;color:var(--pos);text-transform:uppercase}
.nb-ground-tip-sub{margin-left:auto;font:400 10px/1 var(--f-ui);color:var(--txt-3);letter-spacing:.02em;text-transform:none}
.nb-ground-tip-body{font:400 11px/1.5 var(--f-ui);color:var(--txt-2)}
.nb-ground-seg{margin-top:2px}
.ns-spin.dark{border-color:rgba(26,18,5,.35);border-top-color:var(--ink-on-accent)}

/* Nano Banana key bar */
.nb-keybar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--bg-2);border:1px solid var(--neg-line);
  border-radius:10px;padding:10px 13px;margin-bottom:16px}
.nb-keybar svg{color:var(--neg);flex:0 0 auto}
.nb-keybar.set{border-color:var(--pos-line)}
.nb-keybar.set svg{color:var(--pos)}
.nb-key-lab{font-size:12px;color:var(--txt-1)}
.nb-key-help{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-width:0}
.nb-key-note{font-size:10.5px;color:var(--txt-2);line-height:1.3}
.nb-keybar.set .nb-key-note{font-size:11px;color:var(--txt-2)}
.nb-keybar.warn{border-color:var(--neg)}
.nb-keybar.warn .nb-key-note{color:var(--neg)}
.nb-key-input{flex:1;min-width:160px;height:32px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:7px;
  padding:0 11px;color:var(--txt-0);font-family:var(--f-mono);font-size:12px;outline:none}
.nb-key-input:focus{border-color:var(--line-3)}
.nb-key-save{height:32px;padding:0 14px;border-radius:7px;border:0;background:var(--pos);color:var(--ink-on-accent);
  font-family:var(--f-ui);font-size:12px;font-weight:600;cursor:pointer}
.nb-key-save:disabled{opacity:.5;cursor:default}
.nb-key-link{margin-left:auto;background:transparent;border:0;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;
  font-weight:600;cursor:pointer;text-decoration:underline}
.nb-key-link:hover{color:var(--txt-0)}
/* Nano Banana model + aspect controls */
.nb-controls{display:flex;flex-wrap:wrap;gap:18px;margin:-6px 0 16px;padding:0 2px}
/* ---- fixed ENGINE DOCK — Model / Aspect / Resolution always in reach.
   A slim 54px column (the MUSE bubble's width), right edge, vertically centered,
   floating ABOVE the layout (high z-index, no content clearance). Collapsed it
   shows three summary chips; clicking opens a flyout panel to the left, styled
   to the homepage system (Paper surface, hairlines, mono slate labels, ink-pill
   active states). The dock stays floating at every viewport; its flyout narrows
   on small screens instead of becoming a large in-flow panel. */
.art-scroll .nb-controls{display:none}
.nb-dock{display:block;position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:120}
/* the writing-engine dock sits ABOVE the image dock on the same edge */
.write-dock{top:50%;transform:translateY(calc(-50% - 118px))}
.write-dock-panel{width:min(280px,calc(100vw - 92px));padding:10px}
.write-dock-title{font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin:0 0 8px}
.write-dock-panel .nb-ctl{margin:0 0 9px}
.write-dock-panel .nb-seg{flex-wrap:wrap;gap:4px}
/* engine buttons pair up two-per-row; a provider with one model spans the row. Before
   this the layout depended purely on label width, so "Claude Opus 5"/"Claude Fable 5"
   wrapped onto separate rows while the shorter Kimi pair sat side by side. */
.write-dock-panel .nb-seg-btn{flex:1 1 calc(50% - 4px);min-width:0;text-align:center;
  overflow:hidden;text-overflow:ellipsis}
.write-seg-rec{margin-left:4px;color:var(--pos);font-size:9px;vertical-align:top}
.write-dock-note{display:block;font-size:10.5px;color:var(--txt-3);margin-top:4px;line-height:1.35}
.write-dock-note.sel{border-top:1px solid var(--line);padding-top:6px;color:var(--txt-2)}
.write-dock-foot{font-size:9.5px;color:var(--txt-3);margin-top:4px;line-height:1.4}
.nb-dock-toggle{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:54px;
  padding:7px 6px;cursor:pointer;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:999px;box-shadow:0 8px 28px rgba(15,16,18,.14);transition:.15s}
.nb-dock-toggle:hover{border-color:var(--line-3);transform:translateY(-1px)}
/* open (selected) keeps the HOVER look — same 1px border weight/colour and the soft
   raised pill — instead of the heavier near-black ring it used to switch to */
.nb-dock.open .nb-dock-toggle{border-color:var(--line-3);transform:translateY(-1px)}
.nb-dock-chip{display:block;font-family:var(--f-mono);font-size:8.5px;font-weight:600;
  letter-spacing:.03em;text-align:center;color:var(--txt-2);background:var(--bg-3);
  border:1px solid var(--line);border-radius:999px;padding:5px 0;white-space:nowrap}
.nb-dock-chip.model{background:var(--txt-0);color:var(--bg-2);border-color:var(--txt-0)}
.nb-dock-panel{position:absolute;right:64px;top:50%;transform:translateY(-50%);width:min(236px,calc(100vw - 92px));
  max-height:calc(100vh - 24px);overflow:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;
  padding:14px 14px 16px;box-shadow:var(--shadow-pop)}
.nb-dock .nb-controls{display:block;margin:0;padding:0}
.nb-dock .nb-ctl-mtoggle{display:none}
.nb-dock .nb-ctl-body{display:flex;position:static;flex-direction:column;align-items:stretch;gap:14px;
  padding:0;border:0;box-shadow:none;background:transparent}
.nb-dock .nb-ctl{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.nb-dock .nb-ctl-row{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.nb-dock .nb-ctl:first-child .nb-seg{flex-direction:column;align-items:stretch}
.nb-dock .nb-seg{flex-wrap:wrap}
.nb-dock .nb-seg-btn{flex:1 1 auto;text-align:center;padding:6px 8px}
.nb-dock .nb-ctl-lab{color:var(--txt-2)}
.nb-dock .nb-seg-btn.on{background:var(--txt-0);color:var(--bg-1);box-shadow:none}
@media (max-width:640px){
  .nb-dock{right:12px}
  .nb-dock-panel{right:60px}
}
.nb-ctl-body{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
/* mobile: collapse Model/Aspect/Resolution into a dropdown */
.nb-ctl-mtoggle{display:none}
@media (max-width:640px){
  .nb-controls{position:relative;display:block}
  .nb-ctl-mtoggle{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
    background:var(--bg-3);border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer;color:var(--txt-1)}
  .nb-ctl-mtoggle .nb-ctl-msum{flex:1;min-width:0;text-align:left;font:600 12px var(--f-ui);color:var(--txt-0);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nb-ctl-mtoggle svg:last-child{flex:0 0 auto;color:var(--txt-3)}
  .nb-ctl-body{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
    flex-direction:column;align-items:stretch;gap:14px;background:var(--bg-1);border:1px solid var(--line-2);
    border-radius:11px;padding:14px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
  .nb-controls.mopen .nb-ctl-body{display:flex}
  .nb-ctl{flex-direction:column;align-items:flex-start;gap:6px}
}
.nb-ctl{display:flex;align-items:center;gap:9px}
.nb-ctl-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.nb-seg{display:flex;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
.nb-seg-btn:disabled{opacity:.35;cursor:not-allowed}
.nb-seg-btn{border:0;background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:600;
  padding:4px 11px;border-radius:6px;cursor:pointer;transition:.12s;white-space:nowrap}
.nb-seg-btn:hover{color:var(--txt-1)}
.nb-seg-btn.on{background:var(--bg-5);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.nb-aspect-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:62px;padding:5px 8px}
.nb-aspect-btn .sdbar-ratio-ico{margin:0;color:currentColor;flex:0 0 auto}
.nb-aspect-btn span:last-child{font-size:11px;line-height:1}
.nb-dock .nb-aspect-btn{min-width:0}
image-slot[id^="charref-"], image-slot[id^="propref-"], image-slot[id^="locref-"], image-slot[id^="locvar-"], image-slot[id^="shot-"], image-slot[id^="lookref-"]{width:100%;aspect-ratio:16/9;height:auto;display:block;color:var(--txt-1);
  border:1.5px dashed var(--line-3);border-radius:11px;background:var(--bg-2);transition:border-color .12s}
image-slot[id^="charref-"]:hover, image-slot[id^="propref-"]:hover, image-slot[id^="locref-"]:hover, image-slot[id^="locvar-"]:hover, image-slot[id^="shot-"]:hover, image-slot[id^="lookref-"]:hover{border-color:var(--pos-line)}
image-slot[id^="charref-"][data-filled], image-slot[id^="propref-"][data-filled], image-slot[id^="locref-"][data-filled], image-slot[id^="locvar-"][data-filled], image-slot[id^="shot-"][data-filled], image-slot[id^="lookref-"][data-filled]{border:1px solid var(--line)}
image-slot[id^="charref-"]::part(frame), image-slot[id^="propref-"]::part(frame), image-slot[id^="locref-"]::part(frame), image-slot[id^="locvar-"]::part(frame), image-slot[id^="shot-"]::part(frame), image-slot[id^="lookref-"]::part(frame){background:transparent}
.sheet-frame-cap{display:flex;align-items:center;gap:7px;margin-top:10px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3)}
/* lock caption colours — parent hover states must not override */
.sheet-frame-cap,.sheet-frame:hover .sheet-frame-cap,
.sheet-genwrap:hover~.sheet-frame-cap{ color:var(--txt-3) }
.sheet-frame-meta,.sheet-frame:hover .sheet-frame-meta{ color:var(--txt-2) }
.sheet-meta-dot,.sheet-frame:hover .sheet-meta-dot{ color:var(--txt-3) }
.sheet-frame-cap-label,.sheet-frame:hover .sheet-frame-cap-label{ color:var(--txt-2) }

/* 3-dot options menu */
.sheet-tools-menu{position:relative}
.sheet-tools-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:130px;
  background:var(--bg-4);border:1px solid var(--line-2);border-radius:9px;padding:4px;
  z-index:40;box-shadow:0 8px 28px rgba(0,0,0,.6)}
.sheet-tools-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;
  border:0;background:transparent;color:var(--txt-1);font:500 12px/1 var(--f-ui);
  cursor:pointer;border-radius:6px;text-align:left;white-space:nowrap}
.sheet-tools-item:hover:not(:disabled){background:var(--bg-5);color:var(--txt-0)}
.sheet-tools-item:disabled{opacity:.45;cursor:default}
.sheet-tools-item.on{color:var(--pos)}
.sheet-tools-item.danger{color:var(--alert)}
.sheet-tools-item.danger:hover{background:var(--alert-soft);color:var(--alert)}
.sheet-tools-divider{border:0;border-top:1px solid var(--line);margin:3px 4px}
.sheet-av{width:20px;height:20px;border-radius:5px;flex:0 0 20px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:9px;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sheet-body{flex:1;min-width:0;padding:14px 15px;display:flex;flex-direction:column;gap:11px}
/* quiet inline status while the cast is auto-drafted from the script */
.char-drafting-strip{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--txt-1);
  font:500 11px/1 var(--f-ui);letter-spacing:.01em}
.char-drafting-strip .ns-spin{width:12px;height:12px;border-width:2px;
  border-color:var(--line-3);border-top-color:var(--pos)}
.sheet-head{display:flex;flex-direction:column;gap:11px}
/* name on its own line, the Cast/Voice/Draft actions stacked BELOW it — long names
   (e.g. hyphenated surnames) no longer squeeze the buttons into a wrapping column */
.sheet-head-top{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.sheet-head-top .sheet-name{flex:0 0 auto;min-width:0}
.sheet-head-top .sheet-head-acts{flex-wrap:wrap}
.sheet-role-block{display:flex;flex-direction:column;width:100%}
/* collapsible role summary: compact one-liner when closed, full fields when open */
.role-toggle{display:flex;align-items:center;gap:6px;width:100%;background:transparent;border:none;
  padding:3px 0;cursor:pointer;color:var(--txt-3);text-align:left;min-width:0}
.role-toggle:hover{color:var(--txt-1)}
.role-toggle svg{flex:0 0 auto}
.role-toggle-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.role-summary{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--f-ui);font-size:12px;color:var(--txt-1)}
.role-fields{display:flex;flex-direction:column}
.sheet-name{font-family:var(--f-display);font-size:16px;font-weight:600;color:var(--txt-0)}
.sheet-role{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-1);margin-top:2px}
/* labelled role lines: Role / Archetype / Identity, each with a small caps label */
.role-line{display:grid;grid-template-columns:64px 1fr;align-items:baseline;gap:8px;margin-top:5px}
.role-lab{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);padding-top:3px}
.role-line .sheet-role{margin-top:0}
.role-line .sheet-role-desc{margin-top:0}
/* empty role fields stay quiet — placeholder hint only appears once you click in */
.role-line .edit-in:not(:focus)::placeholder{color:transparent}
.role-add-row{display:flex;gap:6px;margin-top:6px;padding-left:72px}
.role-add{display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px dashed var(--line-3);
  color:var(--txt-3);font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;cursor:pointer;transition:.1s}
.role-add:hover{background:var(--bg-2);color:var(--txt-1);border-color:var(--line-2)}
/* driven-scene chips under the character role */
.sheet-scenes{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:7px}
.sheet-scenes-lab{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);margin-right:1px;width:64px}
.sheet-scene-chip{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:19px;padding:0 6px;
  font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.02em;
  background:var(--bg-2);color:var(--txt-1);border:1px solid var(--line-3);border-radius:5px}
.sheet-scenes-none{font-size:10.5px;color:var(--txt-3);font-style:italic}
.sheet-role .edit-in{min-height:0;padding:2px 5px;line-height:1.45;text-transform:uppercase}
.sheet-role textarea.edit-in{min-height:0;text-transform:uppercase}
/* second role line — the "who they are" description, readable sentence case */
.sheet-role-desc{margin-top:3px;font-family:var(--f-ui);font-size:12px;color:var(--txt-1);line-height:1.45}
.sheet-role-desc .edit-in{min-height:0;padding:2px 5px;line-height:1.45}
.sheet-field .obj-lab{margin-bottom:3px}
.sheet-sec{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--pos);
  margin-top:6px;padding-top:9px;border-top:1px solid var(--line)}
/* collapsible card sections */
.sheet-fold{border-top:1px solid var(--line)}
.sheet-fold-head{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:0;cursor:pointer;
  padding:10px 6px;margin:0 -6px;border-radius:7px;text-align:left;transition:background .12s}
.sheet-fold-head:hover{background:var(--bg-2)}
.sheet-fold-ic{display:flex;color:var(--txt-3)}
.sheet-fold-count{margin-left:auto;font-family:var(--f-mono);font-size:9px;color:var(--txt-3)}
.sheet-fold-body{display:flex;flex-direction:column;gap:11px;padding:0 0 12px}
.sheet-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pal-row{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}
.pal-chip{display:flex;align-items:center;gap:6px;background:var(--bg-3);border:1px solid var(--line);
  border-radius:20px;padding:3px 9px 3px 3px}
.pal-sw{width:16px;height:16px;border-radius:50%;flex:0 0 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.pal-name{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;color:var(--txt-1)}
.art-draftall{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:9px;
  border:0;background:var(--pos);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.art-draftall:hover:not(:disabled){filter:brightness(1.08)}
.art-draftall:disabled{opacity:.6;cursor:default}
.art-draftall.ghost{background:var(--bg-4);color:var(--txt-1);border:1px solid var(--line-2)}
.art-draftall.ghost:hover:not(:disabled){background:var(--bg-5);color:var(--txt-0);filter:none}

/* props */
.prop-kind-badge{display:inline-block;padding:1px 7px;border-radius:4px;font-family:var(--f-mono);
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.prop-kind-badge.worn{background:oklch(0.62 0.12 285 / .18);color:oklch(0.78 0.1 285);border:1px solid oklch(0.62 0.12 285 / .35)}
.prop-kind-badge.carried{background:oklch(0.62 0.16 35 / .16);color:oklch(0.74 0.14 38);border:1px solid oklch(0.62 0.16 35 / .35)}
.prop-kind-badge.dressing{background:oklch(0.6 0.11 150 / .16);color:oklch(0.72 0.1 150);border:1px solid oklch(0.6 0.11 150 / .35)}
[data-theme="light"] .prop-kind-badge.dressing{color:oklch(0.45 0.1 150)}
/* locations */
.loc-intext-badge{display:inline-block;padding:1px 7px;border-radius:4px;font-family:var(--f-mono);
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.loc-name-row{display:flex;align-items:center;gap:8px}
/* resolved world-scale badge (Auto derivation made visible; hidden at human scale) */
.loc-scale-badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:4px;
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.05em;
  border:1px solid var(--pos-line);background:var(--pos-soft);color:var(--pos);cursor:help}
.loc-name-row .loc-intext-badge{flex:0 0 auto}
.loc-name-row .edit-in{flex:1;min-width:0}
.loc-intext-badge.int{background:oklch(0.6 0.08 250 / .18);color:oklch(0.8 0.08 250);border:1px solid oklch(0.6 0.08 250 / .35)}
.loc-intext-badge.ext{background:oklch(0.6 0.12 150 / .16);color:oklch(0.78 0.12 150);border:1px solid oklch(0.6 0.12 150 / .35)}
[data-theme="light"] .loc-intext-badge.int{color:oklch(0.42 0.08 250)}
[data-theme="light"] .loc-intext-badge.ext{color:oklch(0.4 0.12 150)}
[data-theme="light"] .prop-kind-badge.worn{color:oklch(0.44 0.12 285)}
[data-theme="light"] .prop-kind-badge.carried{color:oklch(0.46 0.15 38)}
/* the kind/INT-EXT badges double as filter buttons */
.prop-kind-badge.clickable,.loc-intext-badge.clickable{cursor:pointer;transition:filter .12s,transform .12s}
.prop-kind-badge.clickable:hover,.loc-intext-badge.clickable:hover{filter:brightness(1.18)}
.prop-kind-badge.clickable:active,.loc-intext-badge.clickable:active{transform:scale(.96)}
/* kind / INT-EXT filter bar — boxed like its toolbar siblings (the Style picker
   and the scene-focus bar), chips echo the badge palettes */
.kind-filterbar{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;
  border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);white-space:nowrap}
.kind-chip{appearance:none;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  background:transparent;color:var(--ink-3);border:1px solid var(--line);transition:filter .12s}
.kind-chip i{font-style:normal;opacity:.65;font-weight:600}
.kind-chip.empty{opacity:.4}
.kind-chip.empty.on{opacity:1}
.kind-chip:hover{filter:brightness(1.15);border-color:var(--ink-4)}
.kind-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.kind-chip.worn.on{background:oklch(0.62 0.12 285 / .22);color:oklch(0.8 0.1 285);border-color:oklch(0.62 0.12 285 / .55)}
.kind-chip.carried.on{background:oklch(0.62 0.16 35 / .2);color:oklch(0.76 0.14 38);border-color:oklch(0.62 0.16 35 / .55)}
.kind-chip.dressing.on{background:oklch(0.6 0.11 150 / .2);color:oklch(0.74 0.1 150);border-color:oklch(0.6 0.11 150 / .55)}
.kind-chip.int.on{background:oklch(0.6 0.08 250 / .22);color:oklch(0.82 0.08 250);border-color:oklch(0.6 0.08 250 / .55)}
.kind-chip.ext.on{background:oklch(0.6 0.12 150 / .2);color:oklch(0.8 0.12 150);border-color:oklch(0.6 0.12 150 / .55)}
.kind-chip.intext.on{background:oklch(0.6 0.1 200 / .2);color:oklch(0.8 0.1 200);border-color:oklch(0.6 0.1 200 / .55)}
[data-theme="light"] .kind-chip.worn.on{color:oklch(0.42 0.12 285)}
[data-theme="light"] .kind-chip.carried.on{color:oklch(0.44 0.15 38)}
[data-theme="light"] .kind-chip.dressing.on{color:oklch(0.42 0.1 150)}
[data-theme="light"] .kind-chip.int.on{color:oklch(0.4 0.08 250)}
[data-theme="light"] .kind-chip.ext.on{color:oklch(0.38 0.12 150)}
[data-theme="light"] .kind-chip.intext.on{color:oklch(0.38 0.1 200)}
.loc-style-chip{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:1px 8px 1px 6px;border-radius:20px;
  background:var(--bg-2);border:1px solid var(--line-2);font-size:10.5px;color:var(--txt-2);vertical-align:middle}
.loc-style-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.loc-style-chip.lead{margin-left:0}
.loc-areas{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:5px}
.loc-areas-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.loc-area-chip{padding:1px 7px;border-radius:4px;background:var(--bg-2);border:1px solid var(--line-3);font-size:10.5px;color:var(--txt-2)}
.loc-style-note{display:flex;align-items:flex-start;gap:7px;margin-bottom:9px;padding:8px 10px;border-radius:7px;
  background:var(--bg-2);border:1px solid var(--line-2);font-size:11.5px;color:var(--txt-2);line-height:1.45}
.loc-style-note svg{flex:0 0 auto;margin-top:2px;color:var(--txt-3)}
/* time-of-day variants */
.loc-variants{display:flex;flex-direction:column;gap:10px}
.loc-variants-empty{font-size:12px;color:var(--txt-3);font-style:italic}
.loc-variant{border:1px solid var(--line-2);border-radius:9px;padding:9px;background:var(--bg-1)}
.loc-variant-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.loc-variant-head .edit-in{flex:1;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.loc-coverage-sheet{background:color-mix(in oklab,var(--bg-1),var(--accent) 4%)}
.loc-coverage-sheet .loc-variant-head{justify-content:space-between;align-items:flex-start;gap:10px}
.loc-coverage-title{display:flex;align-items:center;gap:8px;min-width:0}
.loc-coverage-title b{font-size:12.5px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-coverage-source{flex:0 0 auto;font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3)}
.loc-coverage-summary{margin:-2px 0 9px;line-height:1.45}
.loc-variant-x{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border:none;border-radius:6px;
  background:transparent;color:var(--txt-3);cursor:pointer}
.loc-variant-x:hover{background:oklch(0.55 0.18 25 / .18);color:oklch(0.8 0.16 25)}
.loc-variant-add{align-self:flex-start}

/* ============ STYLE BIBLE VIEWER ============ */
.sb-panel{position:relative;width:min(1180px,94vw);max-height:92vh;display:flex;flex-direction:column;
  background:var(--bg-0);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.sb-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line-2)}
.sb-panel-title{font-family:var(--f-ui);font-size:18px;font-weight:600;color:var(--txt-0)}
.sb-panel-sub{font-size:11.5px;color:var(--txt-3);margin-top:3px}
.sb-panel-body{overflow:auto;padding:18px 20px 24px}
/* film strip */
.sb-strip-wrap{margin-bottom:22px}
.sb-strip-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.sb-strip-title{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.sb-strip-warn{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:oklch(0.78 0.13 70)}
.sb-strip{display:flex;gap:3px;align-items:stretch}
.sb-strip-cell{flex:1 1 0;min-width:0;height:34px;border-radius:4px;display:grid;place-items:center;position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset;transition:transform .1s}
.sb-strip-cell:hover{transform:translateY(-2px)}
.sb-strip-cell.none{background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 4px,var(--bg-1) 4px,var(--bg-1) 8px)}
.sb-strip-no{font-family:var(--f-mono);font-size:9px;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.sb-strip-cell.none .sb-strip-no{color:var(--txt-3);text-shadow:none}
/* legend — colour key mapping each preset to its scenes */
.sb-strip-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:11px}
.sb-legend-item{display:inline-flex;align-items:center;gap:7px}
.sb-legend-sw{width:22px;height:12px;border-radius:3px;border:1px solid var(--line-2);flex:0 0 auto}
.sb-legend-nm{font-size:12px;color:var(--txt-1)}
.sb-legend-ct{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);background:var(--bg-3);border-radius:10px;padding:1px 7px}
.sb-strip-hint{font-size:10.5px;color:var(--txt-3);font-style:italic;text-transform:none;letter-spacing:0}
.sb-strip-count{color:var(--txt-2);text-transform:none;letter-spacing:.02em}
/* uploaded reference images (palette sampled client-side) */
.sb-refimgs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.sb-refimg{position:relative;width:56px;border-radius:8px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-3)}
.sb-refimg img{display:block;width:56px;height:42px;object-fit:cover}
.sb-refimg-sw{display:flex;height:8px}
.sb-refimg-sw span{flex:1}
.sb-refimg-x{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;border:0;
  background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;opacity:0;transition:opacity .12s}
.sb-refimg:hover .sb-refimg-x{opacity:1}
.sb-refimg-add{display:inline-flex;align-items:center;gap:7px;height:50px;padding:0 13px;border-radius:8px;
  border:1px dashed var(--line-3);background:transparent;color:var(--txt-2);cursor:pointer;
  font-size:12px;font-family:var(--f-ui);transition:.12s}
.sb-refimg-add:hover{color:var(--txt-0);border-color:var(--txt-3);background:var(--bg-3)}
/* unified reference bar: one bordered shell wrapping the input + Image / Save / Assign */
.sb-refbar{display:flex;align-items:stretch;border:1px solid var(--line-2);
  border-radius:11px;background:var(--bg-1);overflow:hidden;transition:border-color .12s}
.sb-refbar:focus-within{border-color:var(--line-3)}
.sb-refbar > input{flex:1;min-width:0;border:0;background:transparent;outline:none;
  color:var(--txt-1, #ececec);font-size:13px;font-family:var(--f-body, inherit);padding:10px 13px}
.sb-refbar > textarea{flex:1;min-width:0;border:0;background:transparent;outline:none;resize:vertical;
  color:var(--txt-1, #ececec);font-size:13px;line-height:1.55;font-family:var(--f-body, inherit);
  padding:10px 13px;min-height:64px}
.sb-refbar-btn{flex:0 0 auto;display:flex;align-items:center;gap:7px;border:0;border-left:1px solid var(--line);
  background:transparent;color:var(--txt-1);font-family:var(--f-ui);font-size:12.5px;font-weight:500;
  padding:0 14px;cursor:pointer;transition:.12s;white-space:nowrap}
.sb-refbar-btn:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.sb-refbar-btn:disabled{opacity:.5;cursor:default}
.sb-refbar-btn.on{color:var(--pos)}
.sb-refbar-btn.secondary{background:var(--accent2);color:var(--accent2-ink);font-weight:600;border-left-color:transparent}
.sb-refbar-btn.secondary:hover:not(:disabled){background:var(--accent2);filter:brightness(1.07);color:var(--accent2-ink)}
.sb-refbar-btn.secondary.on{color:var(--accent2-ink)}
.sb-refbar-btn.assign{background:var(--pos);color:var(--ink-on-accent);font-weight:600;border-left-color:transparent}
.sb-refbar-btn.assign:hover:not(:disabled){background:var(--pos);filter:brightness(1.07);color:var(--ink-on-accent)}
.sb-refbar-btn.assign:disabled{opacity:.55}
.sb-strip-cell.editable{cursor:pointer}
.sb-strip-cell.picking{box-shadow:0 0 0 2px var(--pos) inset, 0 0 0 1px rgba(255,255,255,.07) inset;z-index:61}
/* per-scene preset picker popover */
.sb-pick{position:absolute;top:calc(100% + 5px);left:0;z-index:62;width:212px;max-width:62vw;cursor:default;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-m);box-shadow:var(--shadow-pop);
  padding:5px;animation:menupop .14s ease;text-align:left}
.sb-pick.right{left:auto;right:0}
.sb-pick-h{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2);
  padding:6px 7px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-pick-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;
  border-radius:7px;padding:7px 8px;cursor:pointer;color:var(--txt-1);font-size:12.5px;transition:.1s}
.sb-pick-item:hover{background:var(--bg-4)}
.sb-pick-item.on{background:var(--bg-3)}
.sb-pick-item .sb-pick-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-pick-item svg{color:var(--pos);flex:0 0 auto}
.sb-pick-sw{width:22px;height:14px;border-radius:3px;border:1px solid var(--line-2);flex:0 0 auto}
.sb-pick-sw.none{background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 3px,var(--bg-1) 3px,var(--bg-1) 6px)}
/* info tooltip — "i" icon that reveals help text on hover / tap */
.infotip{position:relative;display:inline-flex;vertical-align:middle}
.infotip-btn{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;padding:0;
  border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-3);cursor:pointer;transition:.12s}
.infotip-btn:hover,.infotip-btn.on{color:var(--txt-0);border-color:var(--line-3);background:var(--bg-4)}
.infotip-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:70;width:330px;max-width:78vw;
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r-m);box-shadow:var(--shadow-pop);
  padding:11px 13px;animation:menupop .14s ease;white-space:pre-line;
  font-family:var(--f-ui);font-size:12.5px;font-weight:400;line-height:1.55;letter-spacing:0;
  text-transform:none;color:var(--txt-1)}
/* preset grid */
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.sb-card{border:1px solid var(--line-2);border-radius:11px;background:var(--bg-1);padding:13px;display:flex;flex-direction:column;gap:11px}
.sb-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sb-card-title{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--txt-0)}
.sb-card-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset}
.sb-card-count{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2);
  padding:2px 8px;border-radius:20px;background:var(--bg-2);border:1px solid var(--line-3)}
.sb-card-count.zero{color:var(--txt-3);opacity:.7}
/* before/after stills */
.sb-beforeafter{display:flex;align-items:center;gap:8px}
.sb-arrow{flex:0 0 auto;color:var(--txt-3)}
.sb-still{position:relative;flex:1 1 0;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#15171b;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.sb-still-base{position:absolute;inset:0}
/* neutral cinematic reference comp (grayscale, depth) */
.sb-sky{position:absolute;inset:0;background:linear-gradient(180deg,#d7d7d7 0%,#9a9a9a 38%,#5c5c5c 64%,#343434 100%)}
.sb-glow{position:absolute;left:62%;top:10%;width:46%;height:46%;border-radius:50%;
  background:radial-gradient(circle,#f3f3f3 0%,rgba(243,243,243,.5) 36%,transparent 70%)}
.sb-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#4a4a4a,#2a2a2a)}
.sb-window{position:absolute;left:8%;top:16%;width:26%;height:40%;background:linear-gradient(160deg,#ededed,#b4b4b4);
  box-shadow:0 0 0 3px #3a3a3a, 0 0 22px 4px rgba(255,255,255,.35)}
.sb-figure{position:absolute;left:52%;bottom:18%;width:11%;height:46%;border-radius:42% 42% 8% 8%;
  background:linear-gradient(180deg,#2c2c2c,#161616)}
.sb-furn{position:absolute;left:22%;bottom:16%;width:20%;height:18%;border-radius:4px;background:linear-gradient(180deg,#3a3a3a,#222)}
.sb-vig{position:absolute;inset:0;box-shadow:inset 0 0 70px 18px rgba(0,0,0,.55);pointer-events:none}
.sb-grade{position:absolute;inset:0;mix-blend-mode:color;pointer-events:none}
.sb-grade-mult{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.32;pointer-events:none}
.sb-still-tag{position:absolute;left:6px;bottom:5px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.04em;
  color:rgba(255,255,255,.92);background:rgba(0,0,0,.5);padding:1px 6px;border-radius:4px;text-shadow:0 1px 2px rgba(0,0,0,.7);
  max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* palette 60/30/10 */
.sb-pal{display:flex;flex-direction:column;gap:7px}
.sb-pal-bar{display:flex;height:14px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.sb-pal-seg{height:100%}
.sb-pal-keys{display:flex;flex-direction:column;gap:3px}
.sb-pal-key{display:flex;align-items:center;gap:7px;font-size:11px}
.sb-pal-sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.sb-pal-pct{font-family:var(--f-mono);font-size:10px;color:var(--txt-1);width:30px}
.sb-pal-lab{color:var(--txt-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-pal-hex{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-3)}
/* under the hood */
.sb-meta{display:flex;flex-direction:column;gap:4px;padding-top:3px;border-top:1px solid var(--line-3)}
.sb-meta-row{display:flex;gap:8px;font-size:11px;line-height:1.4}
.sb-meta-k{flex:0 0 58px;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);padding-top:1px}
.sb-meta-v{flex:1;color:var(--txt-1)}
.sb-scenes{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding-top:3px}
.sb-scenes-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.sb-scene-chip{font-family:var(--f-mono);font-size:10px;padding:1px 6px;border-radius:4px;background:var(--bg-2);
  border:1px solid var(--line-3);color:var(--txt-2)}

/* ============ DEPTH-GRID STAGING ============ */
.stage-wrap{display:flex;flex-direction:column;gap:9px}
.stage-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stage-meta-fields{display:flex;gap:10px;flex:1;flex-wrap:wrap}
.stage-meta-field{display:flex;flex-direction:column;gap:3px;flex:1;min-width:130px}
.stage-meta-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3)}
.stage-meta-field .edit-in{min-height:0;padding:5px 7px;font-size:12px}
.stage-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.stage-cell{display:flex;flex-direction:column;gap:4px;min-height:74px;padding:7px 8px;border-radius:7px;
  background:var(--bg-1);border:1px solid var(--line-3);transition:border-color .12s,background .12s}
.stage-cell.filled{background:var(--bg-2);border-color:var(--line-2)}
.stage-cell-lab{display:flex;align-items:center;justify-content:space-between;gap:6px}
.stage-cell-zone{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.stage-cell-sub{margin-left:5px;padding:0 4px;border-radius:3px;background:var(--bg-3,#2a2a2a);color:var(--txt-3);font-size:8px;letter-spacing:.02em}
.stage-legend{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.45;color:var(--txt-3);
  padding:7px 9px;border-radius:7px;background:var(--bg-1);border:1px solid var(--line-3)}
.stage-legend svg{flex:0 0 auto;margin-top:1px}
.stage-cell-role{font-family:var(--f-mono);font-size:8px;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 5px;border-radius:3px;background:var(--bg-3,#2a2a2a);color:var(--txt-2)}
.stage-cell .edit-in{min-height:0;padding:3px 5px;font-size:11.5px;line-height:1.35}
/* role accents */
.stage-cell.wallA{border-color:oklch(0.6 0.12 40 / .5)}
.stage-cell.wallA .stage-cell-role{background:oklch(0.6 0.14 40 / .25);color:oklch(0.82 0.12 45)}
.stage-cell.wallB .stage-cell-role,.stage-cell.wallC .stage-cell-role{background:oklch(0.55 0.1 250 / .25);color:oklch(0.82 0.09 250)}
.stage-cell.subject{border-style:dashed;border-color:var(--line-2)}
.stage-cell.subject .stage-cell-role{background:oklch(0.6 0.13 150 / .22);color:oklch(0.82 0.12 150)}
.stage-cell.camera{align-items:center;justify-content:flex-start;background:transparent;border-style:dashed}
.stage-camera-mark{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--txt-3);font-family:var(--f-mono);font-size:9px;text-align:center}
.stage-cell.wide{min-height:0}
.prop-select{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line-3);
  border-radius:6px;color:var(--txt-0);font:13px var(--f-ui);padding:7px 9px;outline:none;cursor:pointer}
.prop-select:focus{border-color:var(--pos)}
/* scene chips on a prop card */
.prop-scenes{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:7px}
.prop-scenes-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2);margin-right:1px}
.prop-scene-chip{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 6px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;
  background:var(--bg-2);color:var(--txt-1);border:1px solid var(--line-3);border-radius:5px;cursor:pointer;transition:.1s}
.prop-scene-chip:hover{background:var(--bg-3);color:var(--txt-0);border-color:var(--pos)}
.prop-scenes-none{font-size:10.5px;color:var(--txt-3);font-style:italic}
/* scene focus bar */
/* search + scene-focus share one row, sitting side by side */
.prop-toolbar{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:0 0 18px}
.prop-toolbar > .prop-searchbar{flex:1 1 260px;margin:0}
.prop-toolbar > .prop-scenebar{flex:0 1 auto;margin:0;height:42px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
/* in a toolbar row, the "Style · all" / "World scale" controls match the 42px search & scene-focus height */
.prop-toolbar > .char-style-all{height:42px}
.prop-toolbar > .kind-filterbar{height:42px}

/* free-text prop search */
.prop-searchbar{display:flex;align-items:center;gap:9px;margin:0 0 14px;padding:0 13px;height:42px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:10px;color:var(--txt-3)}
.prop-searchbar:focus-within{border-color:var(--line-3);color:var(--txt-2)}
.prop-searchbar > svg{flex:0 0 auto}
.prop-search-input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;
  font-family:var(--f-ui);font-size:13.5px;color:var(--txt-0)}
.prop-search-input::placeholder{color:var(--txt-3)}
.prop-search-count{flex:0 0 auto;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt-3)}
.prop-search-clear{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:6px;
  cursor:pointer;border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-2);transition:.12s}
.prop-search-clear:hover{background:var(--bg-4);color:var(--txt-0)}
/* COLLAPSIBLE search — icon-only until clicked, then a compact (not full-width) input */
.prop-toolbar > .prop-searchbar.collapsible{flex:0 0 auto}
.prop-searchbar.collapsible{width:42px;justify-content:center;gap:0;padding:0;cursor:pointer;overflow:hidden;
  transition:width .18s ease,padding .18s ease}
.prop-searchbar.collapsible:hover{border-color:var(--line-3);color:var(--txt-1)}
.prop-searchbar.collapsible .prop-search-input{width:0;flex:0 0 0;padding:0;opacity:0}
.prop-searchbar.collapsible.open{width:230px;justify-content:flex-start;gap:9px;padding:0 13px;cursor:text}
.prop-searchbar.collapsible.open .prop-search-input{width:auto;flex:1;opacity:1}

.prop-scenebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:11px 13px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:10px}
.prop-scenebar-lab{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2);flex:0 0 auto}
.prop-scenebar-select{width:auto;min-width:260px;flex:0 1 auto}
.prop-scenebar-msg{font-size:12px;color:var(--txt-2)}
/* tab-wide batch status / choice strip (under the toolbar) */
.art-batchbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:11px 13px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:10px}
.art-batchbar.flash{animation:batchbar-flash 1.1s ease-out}
@keyframes batchbar-flash{
  0%{box-shadow:0 0 0 0 oklch(0.62 0.16 45 / .55);border-color:oklch(0.62 0.16 45 / .8)}
  60%{box-shadow:0 0 0 6px oklch(0.62 0.16 45 / 0);border-color:oklch(0.62 0.16 45 / .8)}
  100%{box-shadow:0 0 0 0 oklch(0.62 0.16 45 / 0)}}

/* ── Storyboard (3×3 scene pages) ──────────────────────────────────────── */
.sb-scene{margin:0 0 26px}
.sb-scene.collapsed{margin:0 0 12px}
.sb-scene:not(.collapsed) .shot-scene-fold svg{transform:rotate(90deg)}
.sb-scene-head{display:flex;align-items:center;gap:11px;margin:0 0 12px;padding:9px 13px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:10px}
.sb-scene-no{font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--txt-0);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:7px;padding:2px 9px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.sb-scene-title{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--txt-0);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-scene-loc{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:10px;color:var(--txt-3);flex:0 0 auto}
.sb-scene-count{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);flex:0 0 auto}

/* ---- storyboard SHEET: header bar + 4-column grid of per-panel frames ---- */
.sb-sheet{margin:0 0 26px;background:#000;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;padding:16px 18px 18px}
.sb-sheet-head{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline;font-family:"Caveat",var(--f-ui);font-size:20px;
  color:#fff;padding:2px 2px 12px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:14px}
.sb-sheet-hi{white-space:nowrap}
.sb-sheet-hi b{color:rgba(255,255,255,.5);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-family:var(--f-mono);margin-right:5px}
.sb-sheet-hi.page{margin-left:auto}
.sb-sheet-hi.clip-over{color:oklch(0.7 0.19 25);cursor:help}
/* Storyboard board-mode toggle (Scenes / Clips) */
.sb-mode{display:inline-flex;align-items:center;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:2px;gap:2px;flex:0 0 auto}
.sb-mode-btn{cursor:pointer;border:0;background:transparent;color:var(--txt-3);border-radius:7px;
  padding:5px 11px;font-family:var(--f-ui);font-size:11px;font-weight:600;transition:.12s}
.sb-mode-btn:hover{color:var(--txt-1)}
.sb-mode-btn.on{background:var(--bg-4);color:var(--txt-0);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sb-sheet-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 18px}
.sb-tpanel{display:flex;flex-direction:column;min-width:0}
.sb-tpanel-frame{position:relative;aspect-ratio:16/9;background:#0b0b0c;border:1px solid rgba(255,255,255,.14);border-radius:4px;overflow:hidden}
.sb-tpanel-img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.sb-tpanel-no{position:absolute;top:5px;left:5px;z-index:2;font-family:var(--f-mono);font-size:10px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:1px 6px}
.sb-tpanel-empty{position:absolute;inset:0;width:100%;height:100%;border:0;display:grid;place-items:center;cursor:pointer;color:var(--txt-3);
  background:repeating-linear-gradient(135deg,#0b0b0c,#0b0b0c 8px,rgba(255,255,255,.018) 8px,rgba(255,255,255,.018) 16px);transition:.12s}
.sb-tpanel-empty:hover:not(:disabled){color:var(--pos);background:#151517}
.sb-tpanel-spin{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45)}
.sb-tpanel-err{position:absolute;bottom:5px;right:5px;color:var(--alert);background:rgba(0,0,0,.6);border-radius:50%;width:21px;height:21px;display:grid;place-items:center}
/* sheet-level generation/compose failure: the real error message + recovery actions,
   laid over the bottom of the dark sheet (replaces the old hover-only alert icon) */
.sb-sheet-err{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 12px;border-radius:8px;background:rgba(24,9,9,.94);border:1px solid oklch(0.5 0.17 27 / .6);
  color:oklch(0.84 0.1 25);font:500 11.5px/1.45 var(--f-ui)}
.sb-sheet-err > svg{flex:0 0 auto;color:oklch(0.68 0.18 27)}
.sb-sheet-err-msg{flex:1 1 260px;min-width:0}
.sb-sheet-err-acts{display:flex;gap:6px;flex-wrap:wrap}
.sb-sheet-err-btn{font:500 10.5px/1 var(--f-ui);letter-spacing:.04em;color:#eee;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:6px 10px;cursor:pointer;transition:.12s;white-space:nowrap}
.sb-sheet-err-btn:hover{background:rgba(255,255,255,.16);color:#fff}
.sb-sheet-err-btn.primary{color:var(--ink-on-accent);background:var(--pos);border-color:transparent;font-weight:600}
.sb-sheet-err-btn.primary:hover{filter:brightness(1.08)}
/* "Built from" ingredients strip — the reference images recorded for the sheet */
.sb-ingredients{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 10px 8px;padding:0 2px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3)}
.sb-ingredients-lab{flex:0 0 auto}
.sb-ingredient-chip{padding:3px 8px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.04);
  color:var(--txt-2);text-transform:none;letter-spacing:0;font-size:10.5px;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
/* edit-panel reference picker chips (characters in the scene + the location plate) */
.sb-editrefs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0 2px}
.sb-editrefs-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.sb-editref-chip{padding:4px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;
  color:var(--txt-2);font:500 11px var(--f-ui);cursor:pointer;transition:.12s;white-space:nowrap}
.sb-editref-chip:hover{color:var(--txt-0);background:rgba(255,255,255,.08)}
.sb-editref-chip.on{color:var(--ink-on-accent);background:var(--pos);border-color:transparent;font-weight:600}

/* saved sheet HALVES — the Stage's video-gen hand-off, managed under the sheet */
.sb-halves{margin:0 10px 10px;padding:4px 11px 9px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.03)}
.sb-halves-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;width:100%;border:0;background:transparent;cursor:pointer;
  padding:6px 0;text-align:left;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);transition:color .12s}
.sb-halves-head:hover{color:var(--txt-1)}
.sb-halves-chev{display:inline-flex;transition:transform .15s}
.sb-halves-chev.open{transform:rotate(90deg)}
.sb-halves-stale{color:oklch(0.78 0.13 64)}
.sb-halves-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:5px}
.sb-half{flex:0 1 400px;min-width:220px;max-width:460px}
.sb-half img{width:100%;display:block;border-radius:5px;border:1px solid rgba(255,255,255,.14);cursor:zoom-in}
.sb-half-meta{display:flex;align-items:center;gap:8px;margin-top:5px;font-family:var(--f-mono);font-size:10px;color:var(--txt-3)}
.sb-half-tag{color:var(--txt-1);font-weight:700;letter-spacing:.06em}
.sb-half-meta .sb-half-btn:first-of-type{margin-left:auto}
.sb-half-btn{font:500 10px/1 var(--f-ui);letter-spacing:.03em;color:var(--txt-2);background:transparent;
  border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:4px 9px;cursor:pointer;transition:.12s}
.sb-half-btn:hover{color:var(--txt-0);background:rgba(255,255,255,.08)}
.sb-half-btn.danger{color:oklch(0.74 0.12 25);border-color:oklch(0.6 0.14 25 / .4)}
.sb-half-btn.danger:hover{background:oklch(0.6 0.14 25 / .14);color:oklch(0.8 0.12 25)}
.sb-halves-err{display:flex;gap:7px;align-items:center;margin-top:8px;font:500 11px/1.4 var(--f-ui);color:oklch(0.78 0.12 25)}
.sb-tpanel-menu{position:absolute;top:4px;right:4px;z-index:3}
.sb-tpanel-opts{width:24px;height:24px;border-radius:5px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.5);color:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;opacity:0;transition:.12s}
.sb-tpanel-frame:hover .sb-tpanel-opts,.sb-comp-frame:hover .sb-tpanel-opts,.sb-tpanel-opts.on{opacity:1}
/* on the big composite sheet the menu is easy to miss — keep it visible at rest so users know it's there */
.sb-comp-frame .sb-tpanel-opts{opacity:.92;background:rgba(0,0,0,.6)}
.sb-tpanel-opts:hover{background:rgba(0,0,0,.78)}
.sb-tpanel-cap{display:flex;align-items:flex-start;gap:8px;margin-top:7px;min-height:38px}
.sb-tpanel-captext{flex:1;min-width:0;font-family:"Caveat",var(--f-ui);font-size:16px;line-height:1.18;color:#e9e9e9;text-transform:uppercase;letter-spacing:.005em}
.sb-tpanel-arrow{flex:0 0 auto;color:rgba(255,255,255,.45);margin-top:2px}

/* Panels ⇄ Single-sheet toggle */
.sb-sheet-bar{display:flex;align-items:center;margin:-4px 0 14px}
.sb-modeseg{display:inline-flex;gap:2px;padding:2px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.03)}
.sb-modeseg-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:5px 11px;border-radius:6px;transition:.12s}
.sb-modeseg-btn:hover{color:#fff}
.sb-modeseg-btn.on{background:rgba(255,255,255,.12);color:#fff}

/* the whole sheet as ONE composite image */
.sb-comp{display:flex;flex-direction:column}
.sb-comp-frame{position:relative;aspect-ratio:16/9;background:#0b0b0c;border:1px solid rgba(255,255,255,.14);border-radius:6px;overflow:hidden}
.sb-comp-img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in;background:#000}
.sb-comp-empty{position:absolute;inset:0;width:100%;height:100%;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--txt-3);
  background:repeating-linear-gradient(135deg,#0b0b0c,#0b0b0c 10px,rgba(255,255,255,.018) 10px,rgba(255,255,255,.018) 20px);transition:.12s}
.sb-comp-empty:hover:not(:disabled){color:var(--pos);background:#151517}
.sb-comp-empty span{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.sb-comp-empty-sub{font-size:10.5px!important;font-weight:500!important;color:var(--txt-3);text-transform:none!important;letter-spacing:0!important}
.sb-tpanel.batch-on .sb-tpanel-frame{border-color:var(--pos);box-shadow:0 0 0 1px var(--pos) inset}
.sb-tpanel .sheet-edit-panel{margin-top:8px}

/* one scene page = one composite 3×3 image (or its labelled-guide placeholder) */
.sb-page{width:100%;margin:0 0 16px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.sb-page.batch-on{border-color:var(--accent,#d8a657);box-shadow:0 0 0 1px var(--accent,#d8a657) inset}
.sb-page-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-2)}
.sb-page-lab{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--txt-1)}
.sb-page-range{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3)}
.sb-page-acts{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.sb-mini{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:1px solid var(--line-2);background:var(--bg-3);
  color:var(--txt-2);border-radius:7px;padding:4px 9px;font-family:var(--f-ui);font-size:10.5px;font-weight:600;transition:.12s}
.sb-mini:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.sb-mini:disabled{opacity:.55;cursor:default}
.sb-mini.accent{background:var(--accent-soft,rgba(216,166,87,.15));border-color:var(--accent,#d8a657);color:var(--accent,#d8a657)}
.sb-mini.accent:hover:not(:disabled){filter:brightness(1.1)}
.sb-mini.danger:hover{color:oklch(0.68 0.19 25);border-color:oklch(0.62 0.2 25 / .4)}
.sb-page-err{display:flex;align-items:center;gap:7px;padding:7px 12px;font-size:11.5px;color:oklch(0.7 0.19 25);
  background:oklch(0.62 0.2 25 / .07);border-bottom:1px solid oklch(0.62 0.2 25 / .2)}
.sb-page-frame{position:relative;background:var(--bg-1);overflow:hidden}
.sb-page-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:zoom-in;display:block}
/* clean reserved canvas shown until the scene storyboard is generated */
.sb-page-empty{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:24px;text-align:center;
  background:repeating-linear-gradient(135deg,var(--bg-1),var(--bg-1) 10px,rgba(255,255,255,.012) 10px,rgba(255,255,255,.012) 20px);
  color:var(--txt-3);transition:.14s}
.sb-page-empty:hover:not(:disabled){color:var(--txt-1);background:var(--bg-2)}
.sb-page-empty:disabled{cursor:default}
.sb-page-empty-t{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.sb-page-empty-d{font-size:12px;color:var(--txt-3);max-width:420px;line-height:1.5}
.sb-panels{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;padding:8px}
.sb-panel{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;overflow:hidden;
  width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box;
  border:1px solid var(--line-2);border-radius:7px;background:var(--bg-3);padding:8px 9px 7px;transition:.12s;font-family:inherit}
.sb-panel:hover{background:var(--bg-4);border-color:var(--line-3)}
.sb-panel.empty{cursor:default;background:repeating-linear-gradient(135deg,var(--bg-2),var(--bg-2) 7px,var(--bg-3) 7px,var(--bg-3) 14px);
  border-style:dashed;opacity:.5}
.sb-panel-no{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0);font-variant-numeric:tabular-nums}
.sb-panel-no.dim{color:var(--txt-3)}
.sb-panel-gram{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.02em;color:var(--txt-2);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-panel-who{font-family:var(--f-mono);font-size:8px;letter-spacing:.02em;color:var(--accent,#d8a657);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-panel-act{font-size:10.5px;line-height:1.3;color:var(--txt-1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-panel-comp{font-size:9.5px;line-height:1.28;color:var(--txt-3);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sb-panel-dlg{font-size:10px;line-height:1.3;color:var(--pos);font-style:italic;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* per-page "Beat & shot briefs" — full Shot List + Writers' Room detail */
.sb-page .sheet-fold{margin:0;border-top:1px solid var(--line-2)}
.sb-page .sheet-fold-head{padding:9px 12px}
.sb-page .sheet-fold-body{padding:2px 12px 12px}
.sb-brief-scene{padding:4px 2px 10px;border-bottom:1px dashed var(--line-2);margin-bottom:10px}
.sb-brief-pair{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:4px}
.sb-brief-line{font-size:11.5px;line-height:1.45;color:var(--txt-1);margin:2px 0}
.sb-brief-line b,.sb-brief-pair b{color:var(--txt-3);font-weight:600;font-size:10px;letter-spacing:.03em;text-transform:uppercase}
.sb-brief-line.dlg{color:var(--pos);font-style:italic}
.sb-brief{padding:9px 0;border-top:1px solid var(--line-2)}
.sb-brief:first-of-type{border-top:0}
.sb-brief-head{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.sb-brief-no{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0);font-variant-numeric:tabular-nums}
.sb-brief-gram{flex:1;min-width:0;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.03em;color:var(--txt-2);font-weight:600}
.sb-brief-jump{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--txt-2);border-radius:6px;padding:3px 7px;font-family:var(--f-ui);font-size:10px;font-weight:600}
.sb-brief-jump:hover{background:var(--bg-4);color:var(--txt-0)}
.sb-page-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgba(0,0,0,.5);color:#fff;font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;backdrop-filter:blur(2px)}
/* flash a shot card when jumped to from the storyboard */
.sb-flash{animation:sbFlash 1.2s ease}
@keyframes sbFlash{0%,100%{box-shadow:0 0 0 0 transparent}25%{box-shadow:0 0 0 2px var(--pos)}}

/* ── Shot List ─────────────────────────────────────────────────────────── */
.shot-scene-group{margin:0 0 28px}
.shot-scene-head{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:10px 14px;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:10px}
.shot-scene-group.collapsed .shot-scene-head{margin-bottom:0}
/* MERGED scene card (2026-07-19): navigator + head + context share ONE box */
.shot-scene-card{border:1px solid var(--line-2);border-radius:12px;background:var(--bg-1);margin:0 0 16px;overflow:visible}
.shot-scene-card .shot-scene-head{margin:0;border:0;background:transparent;border-bottom:1px solid var(--line);border-radius:0}
.shot-scene-card .shot-scene-ctx{margin:0;border:0;background:transparent;border-radius:0}
.shot-scene-head .scene-pager-arrow{flex:0 0 auto}
.shot-scene-meta .scene-pager-no{position:relative;display:inline-flex;align-items:center;gap:4px;cursor:pointer;margin-bottom:2px}
.shot-scene-meta .scene-pager-no:hover{color:var(--txt-1)}
.shot-scene-fold{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-2);transition:.12s}
.shot-scene-fold:hover{color:var(--txt-0);background:var(--bg-4)}
.shot-scene-group:not(.collapsed) .shot-scene-fold svg{transform:rotate(90deg)}
.shot-scene-no{font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--txt-0);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:8px;padding:4px 11px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.shot-scene-meta{flex:1;min-width:0}
.shot-scene-title{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--txt-0);line-height:1.2}
.shot-scene-style-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.shot-style-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:23px;border-radius:999px;
  border:1px solid var(--accent-line,rgba(216,126,0,.35));background:var(--accent-soft,rgba(216,126,0,.10));
  color:var(--accent,#d67e00);font:700 10.5px var(--f-ui);padding:0 8px;cursor:help}
.shot-style-chip.empty{border-color:var(--line-2);background:var(--bg-3);color:var(--txt-3)}
.shot-style-chip svg{flex:0 0 auto}
.shot-style-chip-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-style-swatches{display:inline-flex;gap:2px;flex:0 0 auto}
.shot-style-swatch{width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.shot-scene-sub{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;color:var(--txt-3);margin-top:3px}
.shot-scene-acts{display:flex;gap:7px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
/* scene-level context block under a Shot List scene header */
.shot-scene-ctx{margin:-6px 0 16px;padding:12px 14px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:10px}
.ssx-desc{font-size:12.5px;line-height:1.5;color:var(--txt-1);margin-bottom:11px}
.ssx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px}
.ssx-item{min-width:0}
.ssx-k{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);margin-bottom:2px}
.ssx-v{font-size:12px;line-height:1.4;color:var(--txt-1)}
.ssx-conf{display:flex;align-items:center;gap:8px}
.ssx-conf-lab{font-size:12px;color:var(--txt-1)}
.ssx-pips{display:flex;gap:3px}
.ssx-pip{width:14px;height:5px;border-radius:3px;background:var(--bg-4);border:1px solid var(--line-2)}
.ssx-pip.on{background:var(--accent,#d8a657);border-color:var(--accent,#d8a657)}

/* clip-sequence strip: a scene's shots grouped into ≤15s clips (the Stage's render unit) */
.clip-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-6px 0 16px;
  padding:9px 12px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:10px}
.clip-bar-lab{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3);flex:0 0 auto;cursor:help}
.clip-bar-lab svg{color:var(--txt-3)}
.clip-bar-sub{font-weight:500;text-transform:none;letter-spacing:.02em;color:var(--txt-3)}
.clip-bar-strip{display:flex;align-items:center;gap:2px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.clip-seg{display:inline-flex;align-items:center;gap:2px;padding:3px 7px;border-radius:8px;
  background:var(--bg-3);border:1px solid var(--line-2)}
.clip-seg.over{border-color:oklch(0.62 0.2 25 / .55);background:oklch(0.62 0.2 25 / .08)}
.clip-seg-lab{font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.05em;color:var(--txt-2);
  margin-right:5px;cursor:help;white-space:nowrap}
.clip-seg.over .clip-seg-lab{color:oklch(0.7 0.19 25)}
.clip-cell{font-family:var(--f-mono);font-size:10px;color:var(--txt-1);font-variant-numeric:tabular-nums;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-4);border-radius:5px;padding:0 3px;cursor:default}
.clip-joint{display:inline-flex;align-items:center;justify-content:center;width:14px;height:18px;cursor:pointer;
  border:0;background:transparent;color:var(--txt-3);font-family:var(--f-mono);font-size:11px;line-height:1;
  border-radius:5px;transition:.1s;padding:0}
.clip-joint:hover{color:var(--accent,#d8a657);background:var(--accent-soft,rgba(216,166,87,.14))}
.clip-joint.break{color:var(--accent,#d8a657);font-size:9px}
.clip-auto{flex:0 0 auto;cursor:pointer;border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-2);
  border-radius:7px;padding:4px 9px;font-family:var(--f-ui);font-size:10.5px;font-weight:600;transition:.12s}
.clip-auto:hover{background:var(--bg-4);color:var(--txt-0)}
.shot-beat-tag.clip{color:var(--accent,#d8a657);border-color:var(--accent-line,rgba(216,166,87,.4));cursor:help}

.shot-card .shot-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shot-head-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.shot-anchor-btn{display:inline-flex;align-items:center;gap:4px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--txt-3);border-radius:20px;padding:3px 8px;font-family:var(--f-mono);
  font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;transition:.12s}
.shot-anchor-btn:hover{color:var(--txt-1);background:var(--bg-4)}
.shot-anchor-btn.on{color:var(--accent,#d8a657);border-color:var(--accent,#d8a657);background:var(--accent-soft,rgba(216,166,87,.12))}
.shot-anchor-btn svg{flex:0 0 auto}
.shot-grammar-line{font-family:var(--f-mono);font-size:11px;letter-spacing:.03em;color:var(--txt-1);font-weight:600}
.shot-beat-tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:20px;padding:2px 9px;flex:0 0 auto}
.shot-grammar-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shot-gsel{display:flex;flex-direction:column;gap:4px}
.shot-gsel-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3)}
.shot-camera-panel{display:flex;flex-direction:column;gap:10px}
.shot-camera-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shot-camera-note{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.4;color:var(--txt-2)}
.shot-camera-note svg{color:var(--txt-3);flex:0 0 auto}
.shot-camera-reset{flex:0 0 auto;border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-2);
  border-radius:7px;padding:4px 9px;font:700 10.5px var(--f-ui);cursor:pointer}
.shot-camera-reset:hover{background:var(--bg-4);color:var(--txt-0)}
.shot-camera-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shot-camera-preview{font:11px/1.45 var(--f-mono);color:var(--txt-2);background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:8px;padding:8px 10px}
.shot-frame-row{display:flex;flex-direction:column;gap:6px;margin-bottom:9px}
.shot-frame-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3)}
/* read-only "in frame" — auto-derived from the action text (no manual toggles) */
.shot-inframe-auto{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.shot-inframe-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.shot-inframe-row .shot-frame-lab{flex:0 0 64px}
.shot-inframe-chip{padding:2px 9px;border-radius:999px;background:var(--bg-4);border:1px solid var(--line);
  color:var(--txt-1);font:500 11px var(--f-ui)}
.shot-inframe-chip.prop{background:transparent;color:var(--txt-2)}
.shot-inframe-none{font:italic 11px var(--f-ui);color:var(--txt-3)}
.shot-inframe-hint{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--txt-3);opacity:.85;margin-top:1px}
.shot-chips{display:flex;flex-wrap:wrap;gap:6px}
.shot-chip{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 10px;border-radius:20px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-2);font-family:var(--f-ui);font-size:11px;transition:.1s}
.shot-chip:hover{color:var(--txt-0);border-color:var(--line)}
.shot-chip.on{background:var(--pos);border-color:transparent;color:var(--ink-on-accent);font-weight:600}
.shot-chip.on svg{color:var(--ink-on-accent)}
.shot-frame-empty{font-size:11px;color:var(--txt-3);font-style:italic;padding:2px 0}
.shot-loc-note{display:flex;gap:7px;align-items:flex-start;margin-top:9px;padding:7px 10px;border-radius:8px;
  background:var(--bg-3);border:1px solid var(--line-2);font-size:11px;line-height:1.4;color:var(--txt-2)}
.shot-loc-note svg{flex:0 0 auto;color:var(--txt-3);margin-top:1px}
@media (max-width:560px){ .shot-grammar-grid,.shot-camera-grid{grid-template-columns:1fr} }
/* 9-up sheet pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin:22px 0 4px}
.pager-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-1);border-radius:999px;transition:.12s}
.pager-btn:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.pager-btn:disabled{opacity:.4;cursor:default}
.pager-num{min-width:30px;height:30px;padding:0 6px;cursor:pointer;border:1px solid transparent;background:transparent;
  color:var(--txt-2);border-radius:999px;font:600 12px var(--f-ui);font-variant-numeric:tabular-nums;transition:.12s}
.pager-num:hover{color:var(--txt-0);background:var(--bg-3)}
.pager-num.on{background:var(--txt-0);color:var(--bg-1);border-color:var(--txt-0)}
.pager-count{font-family:var(--f-mono);font-size:11px;color:var(--txt-2);padding:0 4px;font-variant-numeric:tabular-nums}
.pager-note{margin-left:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;color:var(--txt-3)}

/* batch confirm choice bar */
.batch-choice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 100%;
  margin-top:2px;padding:9px 11px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px}
.batch-choice-q{font-size:12.5px;color:var(--txt-1);flex:1 1 auto;min-width:200px;line-height:1.4}
/* a card currently in the batch-generate queue */
.sheet-card.batch-on{outline:2px solid var(--pos);outline-offset:2px;border-radius:12px}
.prop-delete{display:inline-flex;align-items:center;gap:6px;margin-top:4px;align-self:flex-start;
  background:transparent;border:0;color:var(--txt-3);font:500 11px var(--f-ui);cursor:pointer;padding:4px 2px}
.prop-delete:hover{color:var(--alert)}
.prop-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:54px 24px;color:var(--txt-2)}
.prop-empty .art-soon-ic{margin-bottom:6px}

/* appearance states (continuity) */
.state-actions{display:flex;gap:8px;margin:2px 0 10px}
.state-suggest-btn,.state-add-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;
  border-radius:7px;font:600 11.5px var(--f-ui);cursor:pointer;transition:.12s}
.state-suggest-btn{background:var(--pos);color:var(--ink-on-accent);border:0}
.state-suggest-btn:hover:not(:disabled){filter:brightness(1.08)}
.state-suggest-btn:disabled{opacity:.65;cursor:default}
.state-add-btn{background:var(--bg-4);color:var(--txt-1);border:1px solid var(--line-2)}
.state-add-btn:hover{background:var(--bg-5);color:var(--txt-0)}
.state-list{display:flex;flex-direction:column;gap:10px}
.state-row{display:flex;flex-direction:column;gap:8px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:9px;padding:10px 11px}
.state-row.state-base{flex-direction:row;align-items:center;gap:9px;background:transparent;
  border-style:dashed;padding:8px 11px}
.state-base-lab{font-size:11.5px;color:var(--txt-2)}
.state-row-head{display:flex;align-items:center;gap:8px}
.state-vtag{flex:0 0 auto;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--pos);background:oklch(0.78 0.15 62 / .14);border:1px solid oklch(0.78 0.15 62 / .32);
  border-radius:4px;padding:2px 6px}
.state-vtag.base{color:var(--txt-2);background:var(--bg-4);border-color:var(--line-2)}
.state-label{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--txt-0)}
.state-ai-chip{flex:0 0 auto;font-family:var(--f-mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;
  color:oklch(0.78 0.11 230);background:oklch(0.6 0.13 230 / .14);border:1px solid oklch(0.6 0.13 230 / .35);
  border-radius:3px;padding:2px 5px}
.state-del{flex:0 0 auto;display:inline-flex;background:transparent;border:0;color:var(--txt-3);cursor:pointer;padding:3px}
.state-del:hover{color:var(--alert)}
.state-empty{font-size:11.5px;line-height:1.5;color:var(--txt-3);padding:2px 2px 4px;text-wrap:pretty}
.state-hint{display:flex;gap:6px;align-items:flex-start;font-size:10.5px;line-height:1.4;color:var(--txt-3);
  padding:1px 2px;text-wrap:pretty}
.state-hint svg{flex:0 0 auto;color:var(--neg);margin-top:1px}

/* scene continuity panel (inspector) */
.cont-list{display:flex;flex-direction:column;gap:7px}
.cont-row{display:flex;align-items:center;gap:9px}
.cont-av{flex:0 0 auto;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;color:#fff;letter-spacing:.02em}
.cont-info{flex:1;min-width:0}
.cont-name{font-size:11.5px;font-weight:600;color:var(--txt-0);line-height:1.2}
.cont-state{font-size:10.5px;color:var(--txt-2);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont-vtag{flex:0 0 auto;font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;
  color:var(--pos);background:oklch(0.78 0.15 62 / .14);border:1px solid oklch(0.78 0.15 62 / .32);
  border-radius:4px;padding:2px 6px}
.cont-vtag.base{color:var(--txt-3);background:var(--bg-4);border-color:var(--line-2)}
.cont-warn{flex:0 0 auto;display:inline-flex;color:oklch(0.82 0.14 55);cursor:default}
.sheet-undrafted{display:flex;gap:8px;align-items:flex-start;background:var(--neg-soft);border:1px solid var(--neg-line);
  border-radius:9px;padding:9px 11px;font-size:11.5px;line-height:1.45;color:var(--txt-1);margin-top:2px}
.sheet-undrafted svg{flex:0 0 auto;color:var(--neg);margin-top:1px}
.sheet-undrafted b{color:var(--txt-0)}
.sheet-gen-gate{display:flex;gap:7px;align-items:flex-start;margin-top:7px;padding:7px 10px;border-radius:8px;
  background:var(--bg-3);border:1px solid var(--line-2);font-size:11px;line-height:1.4;color:var(--txt-2)}
.sheet-gen-gate svg{flex:0 0 auto;color:var(--txt-3);margin-top:1px}
/* duplicate-prop warning bar */
/* duplicate-prop notice — neutral surface + a small amber accent (theme-aware, premium),
   the saturated-orange fill it used to have washed out in light mode */
.prop-dup-warn{display:flex;flex-direction:column;gap:9px;margin-top:8px;padding:11px 12px;border-radius:10px;
  background:var(--bg-3);border:1px solid var(--line-2);border-left:2px solid var(--pos)}
.prop-dup-head{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:var(--txt-1)}
.prop-dup-head > svg{flex:0 0 auto;margin-top:1px;color:var(--pos)}
.prop-dup-head b{color:var(--txt-0);font-weight:600}
.prop-dup-cards{display:flex;gap:8px;flex-wrap:wrap}
.prop-dup-card{display:flex;flex-direction:column;gap:4px;width:88px}
.prop-dup-card img{width:88px;height:50px;object-fit:cover;border-radius:6px;border:1px solid var(--line-2);cursor:zoom-in;background:var(--bg-2)}
.prop-dup-noimg{width:88px;height:50px;border-radius:6px;border:1px dashed var(--line-3);display:grid;place-items:center;color:var(--txt-3);background:var(--bg-2)}
.prop-dup-name{font-size:10px;line-height:1.25;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prop-dup-acts{display:flex;gap:8px;flex-wrap:wrap}
.prop-dup-merge{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:7px;cursor:pointer;
  border:1px solid transparent;background:var(--pos);color:var(--ink-on-accent);font-family:var(--f-ui);font-size:11.5px;font-weight:600;transition:.12s}
.prop-dup-merge:hover{filter:brightness(1.06)}
.prop-dup-merge svg{color:inherit}
.char-style-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 12px;padding:8px 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3)}
.char-style-lab{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.char-style-lab svg{color:var(--pos)}
/* render-style + pronoun dropdowns: a subtle bordered control like .prop-select,
   not the browser's default near-black select border */
.char-style-select,.char-pronoun-sel{box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line-3);
  border-radius:6px;color:var(--txt-0);font:13px var(--f-ui);padding:0 9px;outline:none;cursor:pointer}
.char-style-select:focus,.char-pronoun-sel:focus{border-color:var(--pos)}
.char-style-select{flex:0 1 200px;height:30px;min-width:0}
/* keep the render-style dropdown + counter on the SAME line */
.char-style-pick{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* custom render-style dropdown (RenderStylePicker) — fixed-width trigger so the row never reflows;
   menu is portaled (position:fixed, set inline) to escape the card's overflow:hidden */
.rs-picker{position:relative;display:inline-flex;flex:0 0 auto}
.rs-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:200px;height:30px;padding:0 11px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-1);color:var(--txt-1);font-family:var(--f-ui);font-size:12.5px;cursor:pointer}
.rs-trigger:hover:not(:disabled){border-color:var(--line-3)}
.rs-picker.open .rs-trigger{border-color:var(--accent2,oklch(0.62 0.18 295))}
.rs-trigger:disabled{opacity:.6;cursor:default}
.rs-trigger-lab{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-caret{flex:0 0 auto;font-size:9px;color:var(--txt-3)}
/* Shrink-wraps to content (no empty space); the group ACCORDION keeps the height
   near-constant, and content past the cap scrolls on a thin scrollbar */
.rs-menu{min-width:220px;max-width:340px;max-height:min(380px,62vh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--bg-1);border:1px solid var(--line-2);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.22);padding:5px;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.rs-menu::-webkit-scrollbar{width:6px}
.rs-menu::-webkit-scrollbar-track{background:transparent}
.rs-menu::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:3px}
.rs-menu::-webkit-scrollbar-thumb:hover{background:var(--txt-3)}
.rs-group{border-radius:7px}
.rs-group+.rs-group{margin-top:2px}
.rs-group-head{width:100%;display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--txt-3);
  border-radius:7px;padding:7px 8px;cursor:pointer;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;text-align:left}
.rs-group-head:hover{background:var(--bg-3);color:var(--txt-1)}
.rs-group.has-sel>.rs-group-head{color:var(--pos)}
.rs-group-caret{width:10px;flex:0 0 auto;font-size:10px;line-height:1}
.rs-group-lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-group-count{flex:0 0 auto;font-size:9px;color:var(--txt-3);border:1px solid var(--line-2);border-radius:999px;padding:1px 5px;letter-spacing:0}
.rs-group-body{display:flex;flex-direction:column;gap:1px;margin:0 0 4px 0}
.rs-opt{display:flex;align-items:center;gap:8px;padding:5px 9px 5px 22px;border-radius:6px;cursor:pointer;font-size:11.5px;color:var(--txt-1);font-family:var(--f-ui)}
.rs-opt:hover{background:var(--bg-3)}
.rs-opt.sel{background:var(--bg-3);font-weight:600}
.rs-opt-lab{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-opt-del{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;color:var(--txt-3);border-radius:6px;cursor:pointer}
.rs-opt-del:hover{background:oklch(0.62 0.21 25 / .14);color:oklch(0.62 0.21 25)}
.camera-profile-picker{width:100%;display:flex}
.camera-profile-picker .rs-trigger{width:100%;height:34px;background:var(--bg-2);border-color:var(--line-3);border-radius:7px;font-size:12px}
.camera-profile-picker .rs-trigger-lab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camera-profile-menu{max-height:min(420px,66vh)}
.camera-profile-menu .rs-opt{padding-left:12px;font-size:11.25px}
/* inline delete button — appears next to the trigger when a deletable style is selected */
.rs-sel-del{display:inline-flex;align-items:center;justify-content:center;width:26px;height:30px;border:1px solid var(--line-2);background:transparent;color:var(--txt-3);border-radius:7px;cursor:pointer;flex:0 0 auto}
.rs-sel-del:hover{background:oklch(0.62 0.21 25 / .12);border-color:oklch(0.62 0.21 25 / .5);color:oklch(0.62 0.21 25)}
.char-pronoun-sel{height:28px;flex:0 1 140px;font-family:var(--f-body);font-size:12.5px}
.char-style-busy{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--txt-2)}
.char-style-name{font-size:11px;color:var(--accent2,oklch(0.62 0.18 295));cursor:pointer;font-family:var(--f-ui)}
.char-style-name:hover{filter:brightness(1.1);text-decoration:underline}
/* lock a liked "Surprise me" style as a reusable named style */
.char-style-lock{font-size:11px;font-family:var(--f-ui);color:var(--txt-1);background:var(--bg-2);border:1px solid var(--line-2);border-radius:7px;padding:3px 8px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:4px}
.char-style-lock:hover{border-color:var(--accent2,oklch(0.62 0.18 295));color:var(--accent2,oklch(0.62 0.18 295))}
.char-style-locked{color:var(--txt-2)}
/* per-card global render-style counter (N/global cap) next to the render-style dropdown */
.char-style-count{font-size:10.5px;font-family:var(--f-mono);color:var(--txt-3);letter-spacing:.02em;padding:2px 0;white-space:nowrap;cursor:default}
/* "full" stays quiet grey — the count is information, not an alarm */
.char-style-count.full{color:var(--txt-3)}
.char-style-all{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3)}
.char-style-all-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}
.char-style-all .char-style-select{flex:0 0 auto;width:172px;height:28px}
/* global toast — surfaces AI/provider errors (depleted credits, missing key, transport) */
#turn-toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:min(560px,92vw)}
.turn-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:9px;padding:11px 12px 11px 13px;border-radius:11px;background:#2a2622;color:#f4efe9;box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.08);font-size:13px;line-height:1.4;animation:turn-toast-in .18s ease-out}
.turn-toast.err{background:#3a2420;color:#ffd9cf;box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 1px rgba(220,90,60,.4)}
.turn-toast.ok{background:#1f2e24;color:#cfeede}
.turn-toast.out{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.turn-toast-ic{flex:0 0 auto;opacity:.9}
.turn-toast-msg{flex:1;min-width:0;word-break:break-word}
.turn-toast-x{flex:0 0 auto;appearance:none;border:0;background:transparent;color:inherit;opacity:.6;cursor:pointer;font-size:12px;padding:0 2px}
.turn-toast-x:hover{opacity:1}
@keyframes turn-toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* model badges — the agent panel header + the New Story window (Writers' Room = Claude) */
.ag-runner-name{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ag-runner-model,.ns-model-badge{font-family:var(--f-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-on-accent,#2c2722);background:var(--pos);padding:2px 7px;border-radius:5px;white-space:nowrap}
.ns-model-badge{display:inline-flex;align-items:center;gap:4px}
.beat-build-btn{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:6px 11px;border-radius:8px;
  border:1px solid var(--line-3);background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:500;cursor:pointer;transition:.12s}
.beat-build-btn:hover:not(:disabled){background:var(--bg-3);color:var(--txt-1)}
.beat-build-btn:disabled{opacity:.55;cursor:default}
/* the tab's PRIMARY action ("Rebuild from script") — same chip language as the
   inspector's other action buttons (char-draft-btn), no more camouflage */
.beat-build-btn.primary{border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1);font-weight:600}
.beat-build-btn.primary svg{color:var(--pos)}
.beat-build-btn.primary:hover:not(:disabled){background:var(--bg-4);color:var(--txt-0)}
.brief-modal{max-width:760px}
.brief-pre{white-space:pre-wrap;word-break:break-word;font-family:var(--f-body);font-size:13.5px;line-height:1.6;color:var(--txt-1)}
.brief-empty{padding:18px 20px;color:var(--txt-2);font-size:13.5px;line-height:1.6}
.brief-empty-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);margin-bottom:4px}
.brief-empty-log{color:var(--txt-1);font-size:15px;line-height:1.5;margin:0 0 14px}
.brief-empty-note{color:var(--txt-3);font-size:12.5px}
.char-phys{display:flex;flex-direction:column;margin:0 0 4px}
.phys-row{display:flex;align-items:flex-start;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.phys-row:last-child{border-bottom:0}
.phys-lab{flex:0 0 116px;padding-top:4px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.phys-row .edit-in{flex:1;min-width:0;font-size:12.5px;color:var(--txt-1);line-height:1.45;
  background:transparent;border:1px solid transparent;border-radius:6px;padding:3px 6px;margin:-3px -6px;font-family:var(--f-body);transition:.12s}
.phys-row textarea.edit-in{resize:none;overflow:hidden;display:block}
.phys-row .edit-in:hover{background:var(--bg-3)}
.phys-row .edit-in:focus{background:var(--bg-4);border-color:var(--line-3);outline:none}
.sheet-rationale{display:flex;gap:7px;align-items:flex-start;font-size:11px;line-height:1.45;color:var(--txt-2);
  font-style:italic;padding:2px 2px 0}
.sheet-rationale svg{flex:0 0 auto;color:var(--pos);margin-top:2px}
.sheet-props-note{display:flex;gap:7px;align-items:flex-start;font-size:11px;line-height:1.45;
  color:var(--txt-3);padding:0 2px 4px}
.sheet-props-note svg{flex:0 0 auto;color:var(--txt-3);margin-top:2px}

.copybox{border:1px solid var(--line);border-radius:9px;background:var(--bg-2);overflow:hidden;margin-top:2px}
.copybox-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid var(--line)}
.copybox-lab{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.copybox-btn{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--pos);
  font-family:var(--f-ui);font-size:11px;font-weight:600;cursor:pointer;padding:2px 4px;border-radius:5px}
.copybox-btn:hover{background:var(--pos-soft)}
.copybox-actions{display:inline-flex;align-items:center;gap:2px}
.copybox-text{padding:9px 11px;font-family:var(--f-mono);font-size:11px;line-height:1.55;color:var(--txt-1);
  white-space:pre-wrap;max-height:130px;overflow-y:auto;cursor:zoom-in}
/* full-prompt preview modal (opens from the copybox Preview button or clicking the text) */
.copybox-modal{width:min(760px,94vw);max-height:86vh;display:flex;flex-direction:column;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.copybox-modal-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.copybox-modal-lab{font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2);flex:1;min-width:0}
.copybox-modal-count{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);white-space:nowrap}
.copybox-modal-x{display:inline-flex;border:0;background:transparent;color:var(--txt-3);cursor:pointer;padding:3px;border-radius:6px}
.copybox-modal-x:hover{background:var(--bg-3);color:var(--txt-1)}
.copybox-modal-body{padding:16px 18px;overflow-y:auto;white-space:pre-wrap;
  font-family:var(--f-mono);font-size:12.5px;line-height:1.62;color:var(--txt-1)}

.art-soon{flex:1;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:40px}
.art-soon-ic{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:var(--bg-2);
  border:1px solid var(--line);color:var(--txt-2)}
.art-soon-t{font-family:"Spectral",Georgia,serif;font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--txt-0)}
.art-soon-d{font-size:13px;line-height:1.6;color:var(--txt-2);max-width:440px}
.art-soon-tag{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--pos);
  border:1px solid var(--pos-line);border-radius:20px;padding:4px 11px;margin-top:4px}

@media (max-width:640px){
  .room-btn-t{display:none}
  .sheet-grid{grid-template-columns:1fr}
  .sheet-card{flex-direction:column}
  /* The compact ROW layout is ONLY for the empty REFERENCE state (a 120px slot
     with the Generate button beside it). Once a sheet is GENERATED the frame
     MUST stay a column — otherwise the 16:9 image, the Regenerate button and the
     caption are flexed into horizontal slivers and Regenerate becomes untappable
     (this is the "can't regenerate props on mobile" bug). Gate on :has(genwrap). */
  .sheet-frame{border-right:0;border-bottom:1px solid var(--line)}
  /* …and ONLY for small image-slot refs — a wide .sheet-dropzone (shot frames,
     scale sheet) must stay a COLUMN or the zone + Generate + caption crush into
     one unreadable row (the mobile shot-card bug). */
  .sheet-frame:not(:has(.sheet-genwrap)):not(:has(.sheet-dropzone)){flex:0 0 auto;flex-direction:row;align-items:center}
  image-slot[id^="charref-"], image-slot[id^="propref-"]{height:120px;width:120px;flex:0 0 120px;aspect-ratio:auto}
  .sheet-frame:not(:has(.sheet-genwrap)):not(:has(.sheet-dropzone)) .sheet-frame-cap{margin-top:0;margin-left:12px}
  .beat-card-grid{grid-template-columns:1fr}
  /* Shots tab scene header: title/meta keep the full first row, the action
     buttons wrap onto their own full-width row (they were crushing the meta) */
  .shot-scene-head{flex-wrap:wrap;gap:10px}
  .shot-scene-meta{flex:1 1 0;min-width:0}
  /* order keeps the merged navigator's ‹ › arrows flanking the meta on row 1;
     the action buttons drop to their own full-width row below */
  .shot-scene-acts{flex:1 1 100%;order:3}
  .shot-scene-acts>*{flex:1 1 auto;justify-content:center}
  .art-scroll{padding:18px 14px 50px}
}

/* density variants */
.dens-compact{--pad:11px;--rail-w:240px;--insp-w:348px}
.dens-comfy{--pad:20px;--rail-w:292px;--insp-w:410px}

/* ============================================================
   RESPONSIVE — tablet & mobile
   rail (and on mobile, inspector) become slide-in overlay drawers.
   ============================================================ */
.scrim{position:fixed;inset:52px 0 0 0;background:rgba(0,0,0,.55);z-index:55;animation:scrimIn .2s ease}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes agslide{from{transform:translateY(6px)}to{transform:none}}
@keyframes drawerL{from{transform:translateX(-100%)}to{transform:none}}
@keyframes drawerR{from{transform:translateX(100%)}to{transform:none}}

/* rail as a drawer on mobile only — on tablet it docks in-flow (pushes the
   canvas, sits below the view-nav) exactly like the inspector, so it never
   overlays the hero nav. */
.app.vp-mobile .rail{
  position:fixed;top:52px;left:0;bottom:0;z-index:60;width:min(86vw,318px);
  box-shadow:var(--shadow-pop);animation:drawerL .22s cubic-bezier(.2,.8,.2,1);
}
/* inspector as a drawer on mobile only */
.app.vp-mobile .inspector{
  position:fixed;top:52px;right:0;bottom:0;z-index:60;width:min(92vw,400px);
  box-shadow:var(--shadow-pop);animation:drawerR .22s cubic-bezier(.2,.8,.2,1);
}

/* ---- bottom nav + overflow + context: defaults (desktop, hidden/idle) ---- */
.overflow-wrap{position:relative;display:none}
.bottom-nav{display:none}
.context-group{display:flex;align-items:center;gap:14px;min-width:0}
/* zones must never let their CHILDREN spill into the centred nav, but their
   dropdown menus (room/project switchers) MUST be able to escape downward —
   so clip the inner text, never the zone itself (overflow:hidden on tb-left
   would clip the absolutely-positioned menus and make the switchers look dead). */
.tb-left{overflow:visible;min-width:0}
.tb-right{overflow:visible}
.room-btn,.proj-btn{min-width:0}
.room-btn-name,.room-btn-phase{overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   MEDIUM / LAPTOP (1100–1360px) — the bar is too tight for full
   labels but panels are still docked, so we compact the bar
   IN PLACE (icons, no subtitle) rather than dropping a bottom
   bar. This is the band that was overlapping before.
   ============================================================ */
@media (max-width:1360px){
  .topbar{gap:10px}
  .tb-left{gap:10px}
  .tb-right{gap:10px}
  .room-btn-phase{display:none}                 /* drop the DEVELOPMENT subtitle */
  .room-btn{height:32px}
  .seg{gap:0;padding:6px 9px}                    /* view nav → icons only */
  .seg .seg-lab{display:none}
  .seg svg{opacity:.9}
  .tb-btn:not(.accent){font-size:0;gap:0;padding:0 11px}   /* Export → icon */
  .tb-btn:not(.accent) svg{opacity:1}
  .proj-btn .proj-name{max-width:128px}
}

/* tighter still (1100–1220px) — accent CTA sheds its label too */
@media (max-width:1220px){
  .tb-btn.accent{font-size:0;gap:0;padding:0 12px}
  .tb-btn.accent svg{opacity:1}
  .proj-btn .proj-name{max-width:104px}
}

/* ============================================================
   COMPACT MODE (<=1100px) — panels are drawers, the view-nav
   moves to a fixed bottom bar, actions shed their labels. This
   is the band that was crowded before; now the bar truly fits.
   ============================================================ */
@media (max-width:1100px){
  .proj-meta{display:none}
  .legend{gap:10px}
  .legend-item{font-size:9.5px}

  .topbar{gap:10px;padding:0 14px}
  .tb-left{gap:10px;min-width:0}
  .tb-right{gap:10px}
  .room-btn-phase{display:none}                  /* trim context to one line */
  .room-btn{height:32px}
  .proj-btn .proj-name{max-width:104px}
  .tb-btn{font-size:0;gap:0;padding:0 11px}       /* New Story / Export / Writers' Room: icons only */
  .tb-btn svg{opacity:1}

  /* view nav now rides in a top bar (.viewnav) — no fixed bottom bar to clear */
  .canvas-scroll,.rail-scroll,.script-scroll,.sheet-scroll{padding-bottom:24px}
}

/* ---- condensed chrome (<=900px) ---- */
@media (max-width:900px){
  .topbar{gap:8px;padding:0 12px}
  .topbar-divider{display:none}
  .canvas-head{padding:12px 16px 0}
  .legend{display:none}
  .canvas-scroll{padding:8px 14px 24px}
}

/* ---- mobile (<=700px, matches the vp hook) — true phone compaction ---- */
@media (max-width:700px){
  .topbar{height:50px;flex:0 0 50px;padding:0 8px;gap:6px}
  .scrim{inset:50px 0 0 0}
  .app.vp-mobile .rail{top:50px}
  .app.vp-mobile .inspector{top:50px}
  .brand-name{display:none}                       /* glyph only */
  .tb-btn:not(.accent){display:none}              /* New Story + Export → overflow kebab */
  .overflow-wrap{display:block}
  .avatar{display:none}

  /* merged context control: room + film read as one pill.
     NOTE: overflow MUST stay visible — the room switcher's dropdown is an
     absolutely-positioned child and overflow:hidden here clips it off-screen,
     making "switch screens" look broken on mobile. Round the children instead. */
  .room-btn-t{display:none}                        /* room: icon only */
  .context-group{gap:0;background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px;overflow:visible}
  .context-group .room-switch{display:flex;border-left:1px solid var(--line-2)}
  .context-group .room-btn{border:0;border-radius:0 9px 9px 0;background:none;height:30px;padding:0 8px}
  .context-group .proj-wrap{min-width:0;flex:0 0 auto}
  /* film switcher: icon only on mobile (match the room switcher) — hide the
     film NAME to stay compact, but KEEP the chevron. Without it the switcher
     was a bare glyph with no dropdown affordance and users couldn't tell it
     was the project switcher at all. */
  .context-group .proj-btn{border:0;border-radius:9px 0 0 9px;background:none;height:30px;padding:0 7px;gap:3px;max-width:none;min-width:0}
  .context-group .proj-btn .proj-name{display:none}
  .context-group .proj-btn>svg:last-child{display:block;opacity:.65}
  /* keep the dropdown on-screen: anchor near the left edge, cap to viewport width */
  .context-group .room-menu{left:-8px;width:auto;min-width:220px;max-width:calc(100vw - 24px)}
  /* the film switcher's menu had min-width:250 and NO width cap, so it ran off
     the right edge and the user couldn't see it. The switcher sits mid-bar, so
     a 250–280px menu can't fit a phone if anchored to it — pin the menu to the
     viewport (fixed, just under the topbar) and cap it to the screen. */
  .context-group .proj-menu{position:fixed;top:54px;left:8px;right:auto;
    min-width:0;width:min(300px,calc(100vw - 16px));max-width:calc(100vw - 16px)}
}

/* ---- mobile content reflow (<=640px) ---- */
@media (max-width:640px){
  /* SCRIPT: the page grid really stacks — the old rule set flex-direction on
     .sp-seg, but .sp-seg is display:contents (the columns live on .script-body's
     grid), so the script column stayed squeezed to half a phone. One column now:
     each beat's gutter renders as a header strip above its script text. */
  .script-body{grid-template-columns:1fr}

  /* ART ROOM toolbars: rows wrap, selects never run off the right edge */
  .art-intro-row{flex-wrap:wrap;gap:10px}
  .art-intro-actions{flex-wrap:wrap;justify-content:flex-start}
  .prop-toolbar{flex-wrap:wrap}
  .prop-scenebar{flex-wrap:wrap}
  .prop-scenebar-select{flex:1 1 100%;min-width:0;max-width:100%}
  .kind-filterbar{height:auto;min-height:42px;flex-wrap:wrap;white-space:normal;padding:6px 11px;row-gap:6px}
  .prop-toolbar > .kind-filterbar{height:auto}
  .char-style-all{max-width:100%;flex-wrap:wrap;height:auto;min-height:36px;padding:6px 11px}

  /* the floating model dock (GPT · 16:9 · 2K) sat mid-screen over card
     actions on a phone — drop it to the lower right, clear of the MUSE fab */
  .nb-dock{top:auto;bottom:150px;transform:none;right:10px}
  .write-dock{top:auto;bottom:252px;transform:none;right:10px}

  .canvas-head{padding:12px 14px 0}
  .canvas-head-copy{flex:1 1 auto}
  .canvas-title{font-size:14px}
  .canvas-sub{font-size:10px;white-space:normal;overflow-wrap:anywhere}
  .canvas-scroll{padding:8px 12px 80px}

  .audit-tablewrap{display:none}
  .audit-mobile-list{display:grid;gap:8px}
  .audit-mobile-card{
    width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--r-m);
    background:var(--bg-2);padding:12px;display:grid;gap:8px;cursor:pointer;
  }
  .audit-mobile-card.sel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--pos-line)}
  .audit-mobile-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .audit-mobile-no{
    font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--txt-3)
  }
  .audit-mobile-title{
    font-family:var(--f-display);font-size:14px;font-weight:600;line-height:1.2;color:var(--txt-0)
  }
  .audit-mobile-meta{
    font-family:var(--f-mono);font-size:9.5px;line-height:1.35;letter-spacing:.04em;color:var(--txt-3)
  }
  .audit-mobile-charge{display:flex;align-items:center;gap:6px}
  .audit-mobile-arrow{display:flex;color:var(--txt-3)}
  .audit-mobile-shift{font-size:12px;line-height:1.35;color:var(--txt-1)}

  /* WRITERS' ROOM editors reflow: the Beats tab's drive/react two-column grid
     stacks on a phone. The opening/closing charge boxes stay SIDE BY SIDE like
     desktop (user ruling 2026-07-19) — the cells flex-shrink instead. */
  .beat-edit-cols{grid-template-columns:1fr}
  .beat-labels{grid-template-columns:1fr}

  /* MUSE + tweaks as bottom sheets */
  .ai-fab{right:12px}
  .ai-panel{right:8px;left:8px;width:auto;bottom:8px;max-height:74vh}

  /* script view fluid */
  .script-head{flex-direction:column;align-items:stretch;gap:10px;padding:14px 14px 0}
  /* toolbar groups stack as TWO centered lines on phones, each keeping the exact
     desktop look (housed strip / Redraft + pager); group A scrolls if ever wider */
  .script-tools{flex-direction:column;align-items:center;gap:8px}
  .st-group{max-width:100%}
  /* on phones the Redraft button GLUES to the pager in one housed strip, and the
     pager arrows stay smaller than their 32px container (user ruling 2026-07-19) */
  .st-group.b{gap:0;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);overflow:hidden;align-items:stretch}
  .st-group.b>*{height:32px;border:0;border-radius:0}
  .st-group.b>*+*{border-left:1px solid var(--line-2)}
  .st-group.b .script-scenestep{border:0;border-radius:0;background:transparent}
  .st-group.b .script-scenestep .panel-collapse{width:22px;height:22px;min-width:22px;min-height:22px;align-self:center}
  .script-scroll{padding:0 12px 30px}
  /* story-state ledger: label centered on its own row, cells share ONE line */
  .sp-carry{justify-content:center}
  .sp-carry .clab2{justify-content:center}
  .sp-carry .cell{flex:1 1 0;min-width:0}
  .sp-seg{flex-direction:column}
  .sp-gut{width:auto;flex:0 0 auto;flex-direction:row;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);border-right:0}
  .sp-gut .bsub{margin-left:auto}
  .sp-page{padding:16px 14px}
  .cont-report,.cont-inline,.polish-note,.tier-seg{max-width:100%}
  .script-body{margin:0}

  /* board: columns stack-scroll comfortably */
  .scard{user-select:none}
}

/* coarse-pointer niceties (touch) */
@media (pointer:coarse){
  .step-btn,.bx,.ver-btn,.ai-x,.panel-collapse{min-width:32px;min-height:32px}
  .seg{min-height:34px}
}

/* ============================================================
   PREMIUM POLISH  (gated on .app.premium — toggleable tweak)
   Depth & light · motion · refined surfaces. Additive only.
   ============================================================ */
.app.premium{
  --spring:cubic-bezier(.34,1.3,.5,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* deeper, atmospheric canvas — a faint center-vignette + dot wash */
.app.premium .canvas,
.app.premium .artroom{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.025), transparent 60%),
    radial-gradient(100% 100% at 50% 120%, oklch(0.72 0.10 232 / .05), transparent 55%),
    var(--bg-0);
}
.app.premium .canvas::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px);
  background-size:26px 26px;opacity:.025;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 40%, #000 30%, transparent 75%);
          mask-image:radial-gradient(110% 80% at 50% 40%, #000 30%, transparent 75%);
}

/* raised surfaces get a top rim-light + softer, longer shadow */
.app.premium .topbar{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -16px rgba(0,0,0,.8);
}
.app.premium .rail,
.app.premium .inspector{
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg-1), #fff 1.5%), var(--bg-1));
}
.app.premium .rail{box-shadow:1px 0 0 rgba(255,255,255,.03) inset}
.app.premium .inspector{box-shadow:-1px 0 0 rgba(255,255,255,.03) inset}

/* card surfaces — rim light up top, gradient hairline border, soft float */
.app.premium .scard,
.app.premium .idea-card,
.app.premium .sheet-card,
.app.premium .ag-card,
.app.premium .char-arc-card,
.app.premium .copybox,
.app.premium .beatgrid,
.app.premium .verdict{
  background-image:linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 10px 30px -18px rgba(0,0,0,.7);
}

/* floating menus / modals — richer elevation + crisp top rim */
.app.premium .export-menu,
.app.premium .room-menu,
.app.premium .ag-panel,
.app.premium .ai-panel,
.app.premium .agent-undo{
  background-image:linear-gradient(180deg, rgba(255,255,255,.045), transparent 30%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 24px 60px -20px rgba(0,0,0,.82),
    0 2px 10px rgba(0,0,0,.5);
}

/* spring-y, lifting interactions */
.app.premium .scard,
.app.premium .ag-card,
.app.premium .char-scene-row,
.app.premium .tb-btn,
.app.premium .ia-btn,
.app.premium .room-item,
.app.premium .export-item{
  transition:transform .22s var(--spring), background .15s var(--ease),
             border-color .15s var(--ease), box-shadow .22s var(--ease);
}
.app.premium .ag-card:hover,
.app.premium .room-item:hover:not(.soon){transform:translateY(-2px)}
.app.premium .tb-btn:hover,
.app.premium .ia-btn:hover:not(:disabled){transform:translateY(-1px)}

/* primary accent button — subtle gloss + glow so it reads as the one hero action */
.app.premium .tb-btn.accent,
.app.premium .ag-run:not(.ghost):not(.stop),
.app.premium .ag-btn.primary,
.app.premium .draft-btn:not(.ghost){
  background-image:linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  box-shadow:0 2px 12px -2px var(--pos-line), 0 1px 0 rgba(255,255,255,.25) inset;
}
.app.premium .tb-btn.accent:hover{box-shadow:0 4px 18px -2px var(--pos-line), 0 1px 0 rgba(255,255,255,.3) inset}

/* selected scene card — luminous edge instead of flat ring */
.app.premium .scard.sel{
  box-shadow:
    0 0 0 1px var(--pos-line) inset,
    0 0 22px -6px var(--pos-line),
    0 10px 30px -18px rgba(0,0,0,.7);
}
/* Board cards are fully rounded with no square top to cap, so the selection is a
   solid 2px ring that hugs every corner (keeping the premium glow + lift). */
.app.premium .board-pan .scard.sel{
  box-shadow:
    0 0 0 2px var(--pos) inset,
    0 0 22px -6px var(--pos-line),
    0 10px 30px -18px rgba(0,0,0,.7);
}

/* the hero value-charge graph — soft bloom on the spine line + nodes */
.app.premium .graph-svg .spine-line{ filter:url(#spineGlow); }
.app.premium .graph-svg .spine-node{ filter:drop-shadow(0 0 5px var(--pos-line)); }

/* refined focus ring */
.app.premium .edit-in:focus,
.app.premium .insp-select:focus,
.app.premium .ai-input input:focus,
.app.premium .ag-input:focus{
  box-shadow:0 0 0 3px oklch(0.78 0.15 62 / .14);
  border-color:var(--pos-line);
}

/* segmented control — inset well + glossy active pill */
.app.premium .segmented,
.app.premium .theme-seg,
.app.premium .tier-seg{
  box-shadow:0 1px 2px rgba(0,0,0,.35) inset;
}
.app.premium .seg.on{
  background-image:linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.08) inset;
}

/* gentle settle-in for the score graph + cards on first paint */
@media (prefers-reduced-motion: no-preference){
  .app.premium .filmstrip .scard{ animation:premiumRise .5s var(--spring) both; }
  .app.premium .filmstrip .scard:nth-child(2){animation-delay:.03s}
  .app.premium .filmstrip .scard:nth-child(3){animation-delay:.06s}
  .app.premium .filmstrip .scard:nth-child(4){animation-delay:.09s}
}
@keyframes premiumRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===================== Commercial landing page (signed-out) =====================
   Self-contained LIGHT editorial design: white page, near-black ink, a hairline-
   framed content column, pill buttons (black primary), light-gray rounded cards.
   Scoped to .landing — the app's dark theme is untouched. The value-charge
   palette (--pos/--neg) is re-tuned here for a light background. */
.landing{position:fixed;inset:0;overflow-y:auto;z-index:40;scroll-behavior:smooth;
  /* ---- WEBSITE PALETTE — "Paper & Ink" ----------------------------------
     Neutral paper layers + near-black ink, with the story's two charges as
     the only colour. Every landing style reads from these tokens. */
  --lpw-bg:#FCFCFB;            /* Paper — the page */
  --lpw-glass:rgba(252,252,251,.86);  /* Paper, frosted — sticky nav */
  --lpw-card:#F6F6F4;          /* Bone — card fill */
  --lpw-card-2:#F1F1EE;        /* Bone, pressed — hovers & faint chart grid */
  --lpw-line:#E8E8E5;          /* Hairline — page grid & rules */
  --lpw-line-2:#E1E1DD;        /* Hairline, firm — control borders */
  --lpw-ink:#0F1012;           /* Ink — headlines & primary text */
  --lpw-ink-2:#3C3F44;         /* Ink, soft — list/body text on white */
  --lpw-sub:#5D6066;           /* Slate — secondary text */
  --lpw-black:#0D0D0E;         /* Carbon — primary buttons, featured plan */
  --pos:#13955E;               /* Rise — the story turning up */
  --pos-bright:#5AD398;        /* Rise, lit — green on Carbon */
  --neg:#D2493E;               /* Fall — the story turning down */
  --neg-bright:#E2685C;        /* Fall, lit — red on Carbon (hero spine nodes) */
  --pos-line:rgba(19,149,94,.35);
  --lpw-accent:#E0742B;        /* Reel — warm cinematic orange, the hero accent */
  background:var(--lpw-bg);color:var(--lpw-ink);font-family:var(--f-ui)}
.landing{overflow-x:hidden}
.landing::-webkit-scrollbar{width:10px}
.landing::-webkit-scrollbar-thumb{background:#dededa;border-radius:8px}

/* full-height grid rails at the column edges — run through hero, sections and
   footer; every full-width horizontal rule crosses them in a "+" intersection */
.lp-page{position:relative}
.lp-rails{position:absolute;inset:0;pointer-events:none}
.lp-rails::before,.lp-rails::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--lpw-line)}
.lp-rails::before{left:max(0px,calc((100% - 1280px)/2))}
.lp-rails::after{right:max(0px,calc((100% - 1280px)/2))}

.lp-nav{position:sticky;top:0;z-index:5;background:var(--lpw-glass);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--lpw-line)}
/* rail segments INSIDE the sticky nav, at the same x as .lp-rails — so the
   vertical lines visibly cross the header and meet its bottom rule in a "+" */
.lp-nav::before,.lp-nav::after{content:"";position:absolute;top:0;bottom:0;width:1px;
  background:var(--lpw-line);z-index:-1}
.lp-nav::before{left:max(0px,calc((100% - 1280px)/2))}
.lp-nav::after{right:max(0px,calc((100% - 1280px)/2))}
/* nav content aligns with the page column — SAME max-width AND inner padding as the
   hero, so the logo sits exactly on the headline's left edge */
.lp-nav-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:13px clamp(20px,4vw,48px)}
.lp-brand{display:flex;align-items:baseline;gap:12px;line-height:1.1}
.lp-logo{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:.03em;color:var(--lpw-ink)}
.lp-logo.sm{font-size:15px}
.lp-nav-cta{display:flex;align-items:center;gap:10px}
/* hamburger — hidden on desktop, shown below 560px */
.lp-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;
  padding:0 9px;border:1px solid var(--lpw-line-2);border-radius:10px;background:#fff;cursor:pointer}
.lp-burger span{display:block;height:1.5px;width:100%;background:var(--lpw-ink);border-radius:2px;transition:.2s}
.lp-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.lp-burger.open span:nth-child(2){opacity:0}
.lp-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.lp-menu{display:none}

/* pill buttons — black primary, white outlined ghost */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--f-ui);font-size:13.5px;font-weight:600;border-radius:999px;padding:10px 20px;
  border:1px solid var(--lpw-line-2);background:#fff;color:var(--lpw-ink);transition:.14s;white-space:nowrap}
.lp-btn.ghost:hover{background:var(--lpw-card-2);border-color:#d6d6d1}
.lp-btn.primary{background:var(--lpw-black);border-color:var(--lpw-black);color:#fff}
.lp-btn.primary:hover{background:#26262a;transform:translateY(-1px)}
.lp-btn.big{font-size:15px;padding:13px 26px}

/* the content column (features onward) — verticals come from the full-height
   .lp-rails; horizontal dividers span the full viewport via section ::after */
.lp-frame{max-width:1280px;margin:0 auto}

.lp-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,72px);align-items:end;
  max-width:1280px;margin:0 auto;
  padding:clamp(48px,7vw,104px) clamp(20px,4vw,48px) clamp(28px,3.5vw,48px)}
/* hero title in Spectral — the same serif as the section headings, so the
   logo (Space Grotesk) + headlines (Spectral) read as one paired system */
.lp-h1{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:clamp(34px,5.4vw,72px);line-height:1.04;
  letter-spacing:-.01em;color:var(--lpw-ink);margin:0 0 30px}
/* the rotating hero word — re-mounted each tick, so the entrance replays.
   Reel orange + Spectral italic: a serif title-card word inside the headline,
   the page's one warm accent. */
.lp-rotate{display:inline-block;white-space:nowrap;color:var(--lpw-accent);
  font-style:italic;font-weight:600;letter-spacing:-.01em;
  animation:lp-word-in .38s cubic-bezier(.2,.7,.3,1)}
@keyframes lp-word-in{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .lp-rotate{animation:none} }
.lp-lede{font-size:clamp(16px,1.5vw,18px);line-height:1.65;color:var(--lpw-sub);max-width:30em;margin:0}
.lp-hero-aside{padding-bottom:8px}
.lp-hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* hero media — the 21:9 short-film placeholder, a full-width rule closes the hero */
.lp-hero-media{position:relative;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px) clamp(40px,5vw,72px)}
.lp-hero-media::after,.lp-section::after{content:"";position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);width:100vw;height:1px;background:var(--lpw-line)}
/* a cinema frame on Carbon: centered play, film tag bottom-left, ratio badge top-right.
   When the film exists, drop a <video> in here (same frame, object-fit:cover). */
.lp-video{position:relative;aspect-ratio:21/9;border-radius:16px;overflow:hidden;
  background:var(--lpw-black);border:1px solid var(--lpw-line);
  display:flex;align-items:center;justify-content:center}
.lp-video-play{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--lpw-black);border:0;transition:.16s}
.lp-video-play svg{margin-left:3px}
.lp-video-play:hover{transform:scale(1.06)}
.lp-video-badge{position:absolute;right:18px;top:14px;color:rgba(255,255,255,.6);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em}
/* viewfinder dressing: corner brackets + a live 24fps timecode */
.lp-video-corners{position:absolute;inset:14px;pointer-events:none}
.lp-video-corners::before,.lp-video-corners::after{content:"";position:absolute;width:16px;height:16px;
  border:0 solid rgba(255,255,255,.4)}
.lp-video-corners::before{left:0;top:0;border-top-width:1.5px;border-left-width:1.5px}
.lp-video-corners::after{right:0;bottom:0;border-bottom-width:1.5px;border-right-width:1.5px}
.lp-video-corners.b::before{left:auto;right:0;border-left-width:0;border-right-width:1.5px}
.lp-video-corners.b::after{right:auto;left:0;border-right-width:0;border-left-width:1.5px}
.lp-video-tc{position:absolute;left:18px;top:14px;color:rgba(255,255,255,.6);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;font-variant-numeric:tabular-nums}

.lp-section{position:relative;padding:clamp(48px,6vw,88px) clamp(20px,4vw,48px)}
.lp-sec-head{text-align:center;margin-bottom:clamp(30px,4vw,52px)}
/* act labels — the page reads like a screenplay's structure */
.lp-act{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lpw-sub);margin-bottom:14px}
/* section titles use Spectral — the serif that complements the Space Grotesk
   logo (geometric grotesk + editorial serif, the classic display pairing) */
.lp-h2{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:clamp(28px,3.5vw,46px);
  letter-spacing:-.01em;color:var(--lpw-ink);margin:0 0 12px}
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lp-card{background:var(--lpw-card);border:1px solid transparent;border-radius:16px;padding:26px 24px;
  display:flex;flex-direction:column;gap:12px;transition:.15s}
.lp-card:hover{background:var(--lpw-card-2)}
.lp-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.lp-card-no{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:#b9b7ae}
.lp-card-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:#fff;color:var(--lpw-ink);border:1px solid var(--lpw-line)}
.lp-card-t{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--lpw-ink)}
.lp-card-b{font-size:14.5px;line-height:1.6;color:var(--lpw-sub)}
.lp-room-card{gap:12px}
.lp-room-status{align-self:flex-start;margin-top:-8px;margin-bottom:1px;padding:4px 9px;border-radius:999px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#1d6b45;
  background:rgba(19,149,94,.09);border:1px solid rgba(19,149,94,.24)}
.lp-room-card:nth-child(3) .lp-room-status{color:#8a5a06;background:rgba(213,126,0,.10);border-color:rgba(213,126,0,.24)}
.lp-room-cta{margin-top:auto}

.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.lp-step{padding:6px 28px 6px;border-left:1px solid var(--lpw-line)}
.lp-step:first-child{padding-left:0;border-left:0}
.lp-step-n{font-family:var(--f-mono);font-size:12.5px;color:var(--lpw-sub);margin-bottom:12px}
.lp-step-t{font-family:var(--f-display);font-weight:600;font-size:19px;color:var(--lpw-ink);margin-bottom:8px}
.lp-step-d{font-size:14.5px;line-height:1.6;color:var(--lpw-sub)}

/* closing band — heading left, actions right */
.lp-final{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(40px,5vw,64px) clamp(20px,4vw,48px)}
.lp-final .lp-h2{margin:0}
.lp-final-cta{display:flex;gap:12px;flex-wrap:wrap}

.lp-foot{border-top:1px solid var(--lpw-line);color:var(--lpw-sub)}
/* fixed band height (not padding) so the MUSE bubble's vertical centering below is exact */
.lp-foot-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;height:76px;padding:0 clamp(20px,4vw,48px)}
.lp-foot-links{display:flex;align-items:center;gap:26px}
.lp-foot-link{font-size:12.5px;color:var(--lpw-sub);text-decoration:none;transition:.12s}
.lp-foot-link:hover{color:var(--lpw-ink)}

/* MUSE bubble on the landing — center it inside the bottom-right grid CELL (the
   square the right rail and the footer rule carve out), so it belongs to the grid.
   Math: the right gutter is (100vw − scrollbar − 1280px)/2 wide (the .landing
   scrollbar is styled at 10px, so it takes real space); the bubble is 54px, the
   footer band 76px. Center: right = 10px + gutter/2 − 27px, bottom = (76−54)/2.
   Applied only when the gutter is wide enough to hold the bubble with breathing
   room (≥1430px viewports) — below that it keeps its default floating spot. */
@media (min-width:1430px){
  .landing ~ .muse-dock-wrap{right:calc((100vw - 1290px)/4 - 17px);bottom:11px}
}

@media (max-width:880px){
  .lp-rails,.lp-nav::before,.lp-nav::after{display:none}
  .lp-hero{grid-template-columns:1fr;align-items:start;gap:24px}
  .lp-hero-aside{padding-bottom:0}
  .lp-grid{grid-template-columns:1fr 1fr;gap:12px}
  .lp-steps{grid-template-columns:1fr;gap:22px}
  .lp-step{border-left:0;padding:0}
  .lp-final{flex-direction:column;align-items:flex-start;gap:20px}
}
@media (max-width:560px){
  .lp-grid{grid-template-columns:1fr}
  /* nav: logo + hamburger; the inline CTAs move into the dropdown menu */
  .lp-nav-in{padding:11px 18px}
  .lp-nav-cta .lp-btn{display:none}
  .lp-burger{display:flex}
  .lp-menu{display:flex;flex-direction:column;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--lpw-line);
    background:var(--lpw-glass);backdrop-filter:blur(10px);animation:lp-word-in .22s ease}
  .lp-menu-item{width:100%;text-align:center;cursor:pointer;border:1px solid var(--lpw-line-2);background:#fff;
    color:var(--lpw-ink);border-radius:999px;padding:12px 18px;font:600 14.5px var(--f-ui)}
  .lp-menu-item.primary{background:var(--lpw-black);border-color:var(--lpw-black);color:#fff}
  .lp-btn{padding:9px 15px;font-size:13px}
  .lp-btn.big{padding:13px 20px;font-size:14.5px}
  /* a touch smaller play button on phones */
  .lp-video-play{width:54px;height:54px}
  .lp-video-play svg{width:18px;height:18px}
  /* hero: tighter top; CTAs stay SIDE BY SIDE (inline) even on phones */
  .lp-hero{padding-top:36px;padding-bottom:22px}
  .lp-hero-cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .lp-hero-cta .lp-btn{width:auto;flex:1 1 0;white-space:nowrap}
  .lp-lede{font-size:15.5px}
  /* sections: a touch less air, comfortable card padding */
  .lp-section{padding:44px 20px}
  .lp-act{margin-bottom:11px}
  .lp-card{padding:22px 20px}
  /* pricing + footer stack cleanly */
  .lp-tier{padding:24px 20px}
  .lp-foot-in{flex-direction:column;align-items:flex-start;gap:14px;padding:24px 20px}
  .lp-foot-links{gap:22px}
}

.lp-splash{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:#fcfcfb;color:#0f1012}
.lp-splash .lp-logo{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.05em;opacity:.9;color:#0f1012}
.lp-splash-dot{width:8px;height:8px;border-radius:50%;background:#13955e;animation:muse-orbpulse 1s ease-in-out infinite}

/* Landing — pricing tiers (white hairline cards; the featured plan inverts to black) */
.lp-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;max-width:1020px;margin:0 auto}
.lp-tier{position:relative;background:#fff;border:1px solid var(--lpw-line);border-radius:18px;
  padding:28px 24px;display:flex;flex-direction:column;gap:14px}
.lp-tier.featured{background:var(--lpw-black);border-color:var(--lpw-black);color:#fff;box-shadow:0 18px 44px rgba(15,16,18,.18)}
.lp-tier-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#0d0d0e;
  background:#fff;border:1px solid #d9d9d4;padding:4px 12px;border-radius:20px}
.lp-tier-name{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--lpw-ink)}
.lp-tier-price{display:flex;align-items:baseline;gap:6px}
.lp-tier-amt{font-family:var(--f-display);font-weight:600;font-size:36px;letter-spacing:-.02em;color:var(--lpw-ink)}
.lp-tier-per{font-size:12px;color:var(--lpw-sub)}
.lp-tier-blurb{font-size:14.5px;color:var(--lpw-sub)}
.lp-tier-feats{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.lp-tier-feats li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.5;color:var(--lpw-ink-2)}
.lp-tier-feats li svg{flex:none;margin-top:2px;color:var(--pos)}
.lp-tier.featured .lp-tier-name,.lp-tier.featured .lp-tier-amt{color:#fff}
.lp-tier.featured .lp-tier-per,.lp-tier.featured .lp-tier-blurb{color:rgba(255,255,255,.62)}
.lp-tier.featured .lp-tier-feats li{color:rgba(255,255,255,.84)}
.lp-tier.featured .lp-tier-feats li svg{color:var(--pos-bright)}
.lp-tier.featured .lp-btn.primary{background:#fff;border-color:#fff;color:var(--lpw-black)}
.lp-tier.featured .lp-btn.primary:hover{background:#ececea}
.lp-btn.full{width:100%;justify-content:center;margin-top:4px}
@media (max-width:880px){ .lp-tiers{grid-template-columns:1fr;max-width:420px} }

/* auth modal — chosen-plan badge (from landing pricing CTA) */
.auth-plan{display:inline-flex;align-items:center;gap:6px;margin:8px 0 2px;padding:5px 11px;border-radius:20px;
  font-family:var(--f-ui);font-size:11.5px;font-weight:600;color:var(--pos);
  background:color-mix(in srgb,var(--pos) 12%,transparent);border:1px solid var(--pos-line)}
.auth-plan-note{font-weight:400;color:var(--txt-2);font-size:10.5px}

/* Screenplay preview modal (in-app, before download) */
.sp-prev-overlay{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.66);backdrop-filter:blur(3px)}
.sp-prev-panel{display:flex;flex-direction:column;width:min(920px,100%);height:min(92vh,1100px);
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.sp-prev-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.sp-prev-titlewrap{flex:1;min-width:0}
.sp-prev-t{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--txt-0)}
.sp-prev-sub{font-size:11.5px;color:var(--txt-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-prev-x{flex:none;width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:var(--txt-2);
  font-size:16px;cursor:pointer;display:grid;place-items:center;transition:.12s}
.sp-prev-x:hover{background:var(--bg-4);color:var(--txt-0)}
.sp-prev-frame{flex:1;width:100%;border:none;background:#fff}
.sp-prev-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--bg-2)}
.sp-prev-hint{flex:1;font-size:11.5px;color:var(--txt-2)}
.sp-prev-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--f-ui);font-size:12.5px;
  font-weight:600;border-radius:8px;padding:9px 16px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-0);transition:.12s}
.sp-prev-btn.ghost:hover{background:var(--bg-4)}
.sp-prev-btn.primary{background:var(--pos);border-color:var(--pos);color:var(--bg-0)}
.sp-prev-btn.primary:hover{filter:brightness(1.07)}
@media (max-width:560px){ .sp-prev-foot{flex-wrap:wrap} .sp-prev-hint{flex-basis:100%} }

/* ---- character follow lens (Spine view) ---- */
.follow-strip{padding:10px 22px 0;flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.follow-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.follow-chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--f-ui);
  font-size:12px;font-weight:500;color:var(--txt-1);background:var(--bg-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px 4px 5px;transition:.13s}
.follow-chip:hover{background:var(--bg-3);color:var(--txt-0)}
.follow-chip.on{background:var(--bg-3);color:var(--txt-0);font-weight:600}
.follow-av{width:18px;height:18px;border-radius:50%;flex:none}
.follow-n{font-family:var(--f-mono);font-size:10px;color:var(--txt-3)}
.follow-chip.on .follow-n{color:var(--txt-2)}
.follow-insight{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-1);
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:7px 12px}
.follow-insight.warn{color:var(--txt-0);border-color:color-mix(in oklab, var(--alert) 45%, var(--line))}
.follow-insight.warn svg{color:var(--alert)}
.follow-insight:not(.warn) svg{color:var(--pos)}
.follow-key{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);
  font-size:10px;letter-spacing:.05em;color:var(--txt-3);text-transform:uppercase;white-space:nowrap}
.follow-key-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid;flex:none;margin-left:6px}
.follow-key-dot.dash{border-style:dashed}
.scard.dim{opacity:.32;filter:saturate(.35)}
.scard.dim:hover{opacity:.75;filter:none}
@media (max-width:560px){ .follow-strip{padding:10px 14px 0} .follow-key{display:none} }

/* ---- "argues" segmented control (controlling-idea audit, Inspector) ---- */
.argues-auto{margin-left:auto;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.argues-seg{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.argues-btn{flex:1;cursor:pointer;font-family:var(--f-ui);font-size:12px;font-weight:500;color:var(--txt-2);
  background:var(--bg-2);border:none;padding:7px 4px;transition:.13s}
.argues-btn+.argues-btn{border-left:1px solid var(--line)}
.argues-btn:hover{background:var(--bg-3);color:var(--txt-0)}
.argues-btn.on{background:var(--bg-3);color:var(--txt-0);font-weight:600;box-shadow:inset 0 -2px 0 var(--pos)}
.argues-btn.on:nth-child(2){box-shadow:inset 0 -2px 0 var(--neg)}
.argues-btn.on:nth-child(3){box-shadow:inset 0 -2px 0 var(--txt-3)}
.argues-hint{margin-top:7px;font-size:11px;line-height:1.45;color:var(--txt-3)}

/* ---- runtime / pacing readout (Spine view) ---- */
.act-min{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--txt-2);
  margin-left:auto;white-space:nowrap}
.act-band .act-min + .pct{margin-left:8px}
.scard-rt{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);white-space:nowrap}
.scard-rt.hot{color:var(--alert);font-weight:600}
.scard-rt + .scard-dur{margin-left:6px}

/* ---- voice check report (Table-Read) ---- */
.vc-fp{display:flex;align-items:baseline;gap:9px;padding:4px 0}
.vc-fp-name{flex:none;font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--txt-1)}
.vc-fp-voice{font-size:12px;line-height:1.45;color:var(--txt-2)}
.vc-could{color:var(--alert);font-style:normal;font-weight:600}

/* ---- shooting-script scene numbers flanking the slugline ---- */
.spb-scene.numbered{display:flex;align-items:baseline;gap:14px}
.spb-scene.numbered .spb-scnum{flex:none;font-weight:700;color:#6b675c;font-size:11.5px}
.spb-scene.numbered .spb-sctext{flex:1;min-width:0}

/* ---- storyboard: compose-from-frames choices (empty sheet) ---- */
.sb-comp-choices{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#101013}
.sb-comp-choice{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--txt-3);
  background:#16161a;border:1px solid var(--line-2);border-radius:10px;padding:14px 26px;min-width:300px;transition:.13s}
.sb-comp-choice span{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.sb-comp-choice:hover:not(:disabled){color:var(--pos);border-color:var(--pos-line);background:#191920}
.sb-comp-choice.primary{color:var(--txt-1);border-color:var(--line-2)}
.sb-comp-choice:disabled{opacity:.45;cursor:default}
@media (max-width:700px){ .sb-comp-choice{min-width:0;padding:10px 16px} }

/* ---- storyboard: per-panel edit ---- */
.sb-panel-edit{flex-direction:column;align-items:stretch;gap:8px}
.sb-panel-chips{display:flex;gap:6px;flex-wrap:wrap}
.sb-panel-chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--f-mono);
  font-size:11px;font-weight:700;color:var(--txt-2);background:var(--bg-2);border:1px solid var(--line);
  border-radius:7px;padding:5px 10px;transition:.12s}
.sb-panel-chip:hover{color:var(--txt-0);background:var(--bg-3)}
.sb-panel-chip.on{color:var(--txt-0);background:var(--bg-3);border-color:var(--pos-line)}
.sb-panel-chip-sub{font-size:9.5px;font-weight:500;color:var(--txt-3);text-transform:uppercase;letter-spacing:.04em}
.sb-panel-err{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--alert)}

/* ---- storyboard: visible progress over dark sheets ---- */
.sb-tpanel-spin{flex-direction:column;display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(8,8,10,.72);backdrop-filter:blur(2px);z-index:3}
.sb-tpanel-spin .ns-spin,
.sb-comp-empty .ns-spin{width:22px;height:22px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.22);border-top-color:#fff}   /* light spinner — the default is dark-on-amber */
.sb-spin-lab{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;color:#eee;
  text-shadow:0 1px 6px rgba(0,0,0,.8);max-width:80%;text-align:center;line-height:1.5}

/* The TopBar brand mark is a button (app/chrome.jsx). */
.brand-btn{cursor:pointer}

/* ===================================================== RECENTLY DELETED (restore bin)
   Per-tab restore panel for soft-deleted characters / props / locations (app/artroom.jsx) */
.recently-deleted{margin:10px 0 4px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);overflow:hidden}
.rd-head{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;background:none;border:0;
  cursor:pointer;color:var(--txt-2);font-family:var(--f-ui);font-size:12.5px;font-weight:600;text-align:left}
.rd-head:hover{background:var(--bg-3);color:var(--txt-1)}
.rd-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--bg-4);color:var(--txt-1);font-family:var(--f-mono);font-size:11px}
.rd-chev{margin-left:auto;display:inline-flex;color:var(--txt-3)}
.rd-list{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.rd-row{display:flex;align-items:center;gap:10px;padding:8px 12px}
.rd-row+.rd-row{border-top:1px solid var(--line)}
.rd-name{flex:1;min-width:0;font-size:13px;color:var(--txt-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-when{font-family:var(--f-mono);font-size:11px;color:var(--txt-3);flex:0 0 auto}
.rd-restore{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:7px;border:1px solid var(--pos-line,var(--line-2));background:var(--bg-1);
  color:var(--pos);cursor:pointer}
.rd-restore:hover{background:var(--pos-soft,var(--bg-3))}
.rd-purge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;
  border-radius:7px;border:1px solid var(--line-2);background:var(--bg-1);color:var(--txt-3);cursor:pointer}
.rd-purge:hover{color:var(--neg);border-color:var(--neg);background:var(--bg-2)}

/* ============================ SHOT "BUILT FROM" reference thumbnails (app/shots-ui.jsx)
   The reference images locked into a shot's frame — scene key frame, location plate,
   in-frame character & prop sheets — as small thumbs; click opens the image lightbox. */
.shot-refs{margin:2px 0 4px}
.shot-refs-lab{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);margin-bottom:7px}
.shot-refs-row{display:flex;flex-wrap:wrap;gap:7px}
.shot-ref-thumb{position:relative;width:54px;height:40px;padding:0;border-radius:7px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--bg-3);cursor:zoom-in;flex:0 0 auto;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.shot-ref-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shot-ref-thumb:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.25);border-color:var(--txt-3)}
/* a thin kind-coded edge so it's clear what each reference is */
.shot-ref-thumb.anchor{border-color:var(--alert)}
.shot-ref-thumb.location{border-color:var(--pos)}
.shot-ref-thumb.script{border-color:var(--accent2)}
.shot-ref-thumb.character{border-color:#7a6cae}
.shot-ref-thumb.prop{border-color:#b08b4f}
.shot-ref-thumb.missing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  cursor:default;border-style:dashed;color:var(--txt-3);background:var(--bg-2);padding:3px}
.shot-ref-thumb.missing:hover{transform:none;box-shadow:none}
.coverage-refs{margin:9px 0 3px}
.coverage-refs-row{align-items:center}
.coverage-ref-req{position:absolute;left:2px;top:2px;border-radius:5px;padding:1px 3px;
  background:rgba(0,0,0,.58);color:#fff;font-family:var(--f-mono);font-size:7.5px;line-height:1;text-transform:uppercase}
.coverage-ref-missing{font-family:var(--f-mono);font-size:8px;text-transform:uppercase;color:var(--txt-2)}
.coverage-ref-cap{max-width:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:7.5px;line-height:1.05;text-align:center}
/* the rolling SEED (previous shot's frame) — a brighter edge, plus an approved/provisional dot */
.shot-ref-thumb.seed{border-color:var(--accent,#d8a657);box-shadow:0 0 0 1px var(--accent-soft,rgba(216,166,87,.18))}
.shot-ref-thumb.seed.provisional{border-style:dashed}
.shot-ref-seedtag{position:absolute;top:2px;right:2px;min-width:13px;height:13px;line-height:13px;padding:0 2px;
  border-radius:7px;font-size:9px;text-align:center;font-weight:700;color:#fff;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25)}
.shot-ref-seedtag.ok{background:var(--pos,#5aa469);border-color:transparent}
/* tickable sheet refs — the corner tick attaches/excludes the sheet for generation */
.shot-ref-tick{position:absolute;bottom:2px;right:2px;width:15px;height:15px;line-height:13px;padding:0;
  display:grid;place-items:center;border-radius:5px;font-size:9px;font-weight:700;cursor:pointer;
  color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3)}
.shot-ref-tick.on{background:var(--pos,#5aa469);border-color:transparent}
.shot-ref-tick:hover{filter:brightness(1.2)}
.shot-ref-thumb.off img{opacity:.32;filter:grayscale(.85)}
.shot-ref-thumb.off{border-style:dashed;border-color:var(--line-2)}

/* approve / lock a frame as the seed the next shot chains from */
.shot-lock-btn{display:inline-flex;align-items:center;gap:4px;cursor:pointer;border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--txt-2);font-size:10.5px;border-radius:7px;padding:3px 8px;
  transition:color .12s ease,background .12s ease,border-color .12s ease}
.shot-lock-btn:hover{color:var(--txt-1);background:var(--bg-4)}
.shot-lock-btn.on{color:var(--pos,#5aa469);border-color:var(--pos,#5aa469);background:rgba(90,164,105,.12)}
.shot-lock-btn svg{flex:0 0 auto}
.shot-source-badge{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;
  padding:3px 7px;font:700 8px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-2)}
.shot-source-badge.current{color:var(--pos);border-color:var(--pos)}
.shot-source-badge.stale{color:var(--neg,#d86b61);border-color:var(--neg,#d86b61);background:rgba(216,107,97,.1)}
.shot-source-badge.unverified{color:var(--warn,#c69242);border-color:var(--warn,#c69242)}

/* the chain status bar */
.shot-chain-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 16px;padding:11px 14px;border-radius:11px;border:1px solid var(--accent,#d8a657);
  background:var(--accent-soft,rgba(216,166,87,.1))}
.shot-chain-bar.running{border-color:var(--line-2);background:var(--bg-3)}
.shot-chain-msg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txt-1)}
.shot-chain-msg svg{flex:0 0 auto;color:var(--accent,#d8a657)}
.shot-chain-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* "Design all shots" progress bar */
.shot-design-bar{margin:0 0 16px;padding:11px 14px;border-radius:11px;border:1px solid var(--line-2);background:var(--bg-3)}
.shot-design-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txt-1);margin-bottom:9px}
.shot-design-lab{font-weight:600}
.shot-design-track{height:6px;border-radius:99px;background:var(--bg-1);border:1px solid var(--line-2);overflow:hidden}
.shot-design-fill{height:100%;border-radius:99px;background:var(--accent,#d8a657);transition:width .3s ease}

/* small centered popup — out-of-order "generate the earlier shot first" notice */
.shot-notice-scrim{position:fixed;inset:0;z-index:9991;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.32);backdrop-filter:blur(1.5px);animation:appconfirm-fade .12s ease}
.shot-notice{display:flex;align-items:center;gap:11px;width:min(360px,92vw);
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-l,14px);
  box-shadow:0 24px 80px rgba(0,0,0,.45);padding:16px 18px;
  animation:appconfirm-pop .14s cubic-bezier(.2,.8,.3,1)}
.shot-notice-ic{flex:0 0 auto;color:var(--accent,#d8a657);display:flex}
.shot-notice-msg{flex:1;min-width:0;font-size:13px;color:var(--txt-1);line-height:1.5}
.shot-notice-x{flex:0 0 auto;align-self:flex-start;width:25px;height:25px;margin:-5px -7px -5px 0;padding:0;
  display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--txt-3);
  font:500 20px/1 var(--f-ui);cursor:pointer;transition:background .12s,color .12s}
.shot-notice-x:hover{background:var(--bg-3);color:var(--txt-1)}
.shot-notice-x:focus-visible{outline:2px solid var(--accent,#d8a657);outline-offset:1px}

/* add-a-reference control + picker on a shot card (app/shots-ui.jsx) */
.shot-ref-thumb.added{border-color:#4ca596}
.shot-ref-thumb.wrap{position:relative;cursor:default}
.shot-ref-open{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.shot-ref-open img{width:100%;height:100%;object-fit:cover;display:block}
.shot-ref-rm{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;z-index:2;padding:0;
  display:grid;place-items:center;border:1px solid var(--line-2);background:var(--bg-1);color:var(--txt-2);
  cursor:pointer;opacity:0;transition:opacity .12s}
.shot-ref-thumb.wrap:hover .shot-ref-rm{opacity:1}
.shot-ref-rm:hover{background:var(--neg);border-color:var(--neg);color:#fff}
.shot-ref-add{width:54px;height:40px;border-radius:7px;border:1px dashed var(--line-3);flex:0 0 auto;
  background:var(--bg-2);color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.12s}
.shot-ref-add:hover{border-color:var(--pos);color:var(--pos);background:var(--bg-3)}
.shot-ref-picker{margin-top:9px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);
  padding:10px;display:flex;flex-direction:column;gap:8px}
.shot-ref-pick-up{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:12.5px;font-weight:600;
  padding:7px 12px;border-radius:7px;border:1px solid var(--line-2);background:var(--bg-1);color:var(--txt-0);cursor:pointer}
.shot-ref-pick-up:hover{border-color:var(--pos);color:var(--pos)}
.shot-ref-pick-lab{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3)}
.shot-ref-pick-list{display:flex;flex-direction:column;gap:3px;max-height:184px;overflow-y:auto}
.shot-ref-pick-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;
  padding:6px 8px;border-radius:6px;border:0;background:none;color:var(--txt-1);cursor:pointer}
.shot-ref-pick-item:hover{background:var(--bg-3);color:var(--txt-0)}
.shot-ref-pick-kind{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;flex:0 0 auto;border:1px solid var(--line-2);color:var(--txt-3)}
.shot-ref-pick-kind.character{color:#7a6cae;border-color:#7a6cae55}
.shot-ref-pick-kind.prop{color:#b08b4f;border-color:#b08b4f55}
.shot-ref-pick-kind.location{color:var(--pos)}
.shot-ref-pick-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-ref-pick-none{font-size:12px;color:var(--txt-3);padding:4px}
.shot-ref-thumb.added.missing{border-style:dashed;border-color:var(--line-3);background:var(--bg-2)}
.shot-ref-ph{display:grid;place-items:center;width:100%;height:100%;padding:2px 4px;font-size:8px;line-height:1.15;
  text-align:center;color:var(--txt-3);font-family:var(--f-mono);overflow:hidden}

/* per-panel edit picker on a location plate (app/locations-ui.jsx) */
.loc-panel-edit .loc-panel-pick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.loc-panel-btn{display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;padding:6px 9px;
  border-radius:7px;border:1px solid var(--line-2);background:var(--bg-1);cursor:pointer;font:inherit}
.loc-panel-btn:hover{border-color:var(--txt-3)}
.loc-panel-btn.on{border-color:var(--pos);background:var(--pos-soft,var(--bg-3))}
.loc-panel-btn-pos{font-size:12px;font-weight:600;color:var(--txt-0)}
.loc-panel-btn-hint{font-size:10px;color:var(--txt-3);font-family:var(--f-mono)}
.sb-mode-btn.ghost{opacity:.6;border-style:dashed}
.sb-mode-btn.ghost:hover{opacity:1}

/* worn-prop note — worn items render on the owner's character sheet, not a separate one */
.prop-worn-note{display:flex;align-items:center;gap:6px;margin-top:7px;padding:5px 8px;border-radius:7px;
  background:var(--pos-soft,var(--bg-2));border:1px solid var(--pos-line,var(--line-2));
  font-size:11px;color:var(--txt-2);line-height:1.3}
.prop-worn-note b{color:var(--txt-1);font-weight:600}

/* character card: driven scenes stand out from appears-only (Characters tab) */
.sheet-scene-chip.driven{background:var(--pos);color:var(--ink-on-accent);border-color:var(--pos)}
.sheet-scenes-lab{white-space:nowrap}

/* "Voice" control on the character card (teal — distinct from Cameo's purple). app/artroom.jsx */
.char-voice-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:7px;
  border:1px solid oklch(0.66 0.11 195 / .4);background:oklch(0.66 0.11 195 / .1);color:oklch(0.8 0.1 195);
  font-family:var(--f-ui);font-size:11px;font-weight:600;cursor:pointer;transition:.12s;white-space:nowrap}
.char-voice-btn:hover{background:oklch(0.66 0.11 195 / .2);color:oklch(0.86 0.09 195)}
.char-voice-btn.on{background:oklch(0.66 0.11 195 / .22);border-color:oklch(0.66 0.11 195 / .6)}
html[data-theme="light"] .char-voice-btn{border-color:oklch(0.52 0.1 195 / .5);background:oklch(0.56 0.11 195 / .1);color:oklch(0.4 0.09 195)}
html[data-theme="light"] .char-voice-btn:hover{background:oklch(0.56 0.11 195 / .18);color:oklch(0.32 0.09 195)}
html[data-theme="light"] .char-voice-btn.on{background:oklch(0.56 0.11 195 / .16);border-color:oklch(0.52 0.1 195 / .6);color:oklch(0.34 0.09 195)}

/* voice modal — host the existing VoiceCard inside the shared centered dt-panel */
.dt-panel.voice-modal{position:relative;width:min(480px,100%);max-height:88vh}
.voice-modal-x{position:absolute;top:10px;right:10px;z-index:2}
.voice-modal-scroll{padding:16px}
.voice-modal .vc-card{border:0;background:transparent;box-shadow:none;padding:0;margin:0}

/* ====================== THE STAGE — Seedance 2.0 director console ============== */
.stage2-root{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.stage2-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.stage2-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.stage2-head-left{min-width:0}
.stage2-head-title{font-family:var(--f-display);font-size:16px;font-weight:650;color:var(--txt-0)}
.stage2-head-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:3px;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3)}
.stage2-head-meta span{white-space:nowrap}
.stage2-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.stage2-nav{display:flex;justify-content:center;gap:4px;padding:3px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);flex:0 0 auto}
.stage2-navbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--txt-2);
  font-family:var(--f-ui);font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:7px;cursor:pointer;transition:.12s}
.stage2-navbtn:hover{background:var(--bg-3);color:var(--txt-0)}
.stage2-navbtn.on{background:var(--bg-3);color:var(--brand)}
.stage2-navbtn.on svg{color:var(--brand)}
.stage2-voiceall{display:flex;align-items:center;gap:8px}
.stage2-voiceprog{font-family:var(--f-mono);font-size:11px;color:var(--txt-2)}
/* 3-pane: rail | console(center+right) */
.stage2-body{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);overflow:hidden}
.stage2-rail{width:var(--rail-w);flex:0 0 var(--rail-w);border-right:1px solid var(--line);overflow:auto;padding:12px 10px}
.stage2-rail-head{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);padding:2px 6px 10px}
.stage2-rail-head .panel-collapse{margin-left:auto}
/* collapsed rail/settings strips inside the Stage's grid columns (shared .strip visuals) */
.stage2-body > .strip{height:100%}
.stage2-act-head{cursor:default}
.stage2-act-head:hover{background:transparent}
.stage2-act-scenes{padding-left:4px;margin-left:11px}
.stage2-scene-list{display:flex;flex-direction:column;gap:5px}
.stage2-scene-block{padding:2px 0 8px;border-bottom:1px solid var(--line)}
.stage2-scene-block:last-child{border-bottom:0}
.stage2-scene-headrow{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:inherit;cursor:pointer;
  padding:7px 8px 5px;border-radius:7px;text-align:left;transition:.1s}
.stage2-scene-headrow:hover,.stage2-scene-headrow.on{background:var(--bg-2)}
.stage2-scene-pick{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;cursor:pointer;
  padding:7px 8px;border-radius:7px;text-align:left;transition:.1s;position:relative;color:inherit}
.stage2-scene-pick:hover{background:var(--bg-2)}
.stage2-scene-pick.on{background:var(--bg-3)}
.stage2-scene-pick.on::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:2px;height:17px;background:var(--brand);border-radius:2px}
.stage2-scene-pick.on .stage2-scene-ttl{color:var(--txt-0)}
.stage2-scene-meta{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);flex:0 0 auto}
/* per-scene render rollup — rendered/total clips in the header + a thin fill bar
   beneath. Done state matches the chip ✓ styling (var(--pos)). */
.stage2-scene-prog{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-2);flex:0 0 auto;white-space:nowrap}
.stage2-scene-prog.done{color:var(--pos)}
.stage2-scene-bar{height:2px;margin:1px 8px 4px 32px;border-radius:2px;background:var(--bg-3);overflow:hidden}
.stage2-scene-bar-fill{height:100%;border-radius:2px;background:var(--brand);transition:width .25s ease}
.stage2-scene-bar.done .stage2-scene-bar-fill{background:var(--pos)}
/* per-clip chips under each scene row — label + visual-source glyph + readiness.
   Horizontal and compact (a checklist), not the old vertical per-beat list. */
.stage2-clip-chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 8px 4px 32px}
.stage2-clip-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--bg-2);color:var(--txt-2);font:700 9.5px var(--f-mono);padding:3px 6px;cursor:pointer}
.stage2-clip-chip:hover{border-color:var(--brand);color:var(--txt-0)}
.stage2-clip-chip.on{border-color:var(--brand);color:var(--brand);background:var(--bg-1)}
.stage2-clip-chip.missing{border-style:dashed}
.stage2-clip-chip-name{max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 9.5px var(--f-ui);color:var(--txt-1)}
.stage2-clip-chip.on .stage2-clip-chip-name{color:var(--brand)}
.stage2-clip-chip-glyph{font-size:8.5px;letter-spacing:-1px;opacity:.85}
.stage2-clip-chip-st{min-width:7px;text-align:center}
/* beats with micro-beats nested inside (replaces the flat clip chips) */
.stage2-beat-list{display:flex;flex-direction:column;gap:3px;padding:2px 8px 6px 26px}
.stage2-beat-row{display:flex;align-items:center;gap:6px;width:100%;padding:4px 7px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg-1);color:var(--txt-1);font:600 10px var(--f-ui);cursor:pointer;text-align:left}
.stage2-beat-row b{font:700 9.5px var(--f-mono);color:var(--txt-2)}
.stage2-beat-row:hover{border-color:var(--brand);color:var(--txt-0)}
.stage2-beat-row.missing{border-style:dashed}
.stage2-beat-row.done b{color:var(--pos)}
.stage2-beat.on .stage2-beat-row{border-color:var(--brand);color:var(--brand)}
.stage2-beat.on .stage2-beat-row b{color:var(--brand)}
.stage2-beat-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-gen-promptwrap.fill{width:100%}
.stage2-clip-chip.done .stage2-clip-chip-st{color:var(--pos)}
.stage2-clip-chip.missing .stage2-clip-chip-st{color:var(--brand)}
/* scene group within an act — slug header + its clips */
.stage2-scene-grp{margin:1px 0 5px}
.stage2-scene-row{display:flex;align-items:center;gap:8px;padding:5px 8px 3px}
.stage2-scene-ttl{font-size:12px;font-weight:500;color:var(--txt-0);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the clips of a scene — the selectable leaves, beat-named */
.stage2-cliplist{padding-left:8px;margin-left:9px;border-left:1px solid var(--line-2)}
.stage2-cliprow{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;cursor:pointer;
  padding:5px 8px;border-radius:6px;text-align:left;transition:.1s;position:relative}
.stage2-cliprow:hover{background:var(--bg-2)}
.stage2-cliprow.on{background:var(--bg-3)}
.stage2-cliprow.on::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);width:2px;height:15px;background:var(--brand);border-radius:2px}
.stage2-clip-lab{font-family:var(--f-mono);font-size:10px;font-weight:700;color:var(--txt-3);flex:0 0 22px}
.stage2-cliprow.on .stage2-clip-lab{color:var(--brand)}
.stage2-clip-beat{flex:1;min-width:0;font-size:12px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-cliprow.on .stage2-clip-beat{color:var(--txt-0)}
.stage2-clip-dur{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);flex:0 0 auto}
.stage2-clip-done{display:flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--brand);color:var(--ink-on-accent,#1a1206);flex:0 0 auto}

/* console = center (player/strip/prompt/assets) + the original right Seedance panel */
.stage2-console{display:grid;grid-template-columns:minmax(0,1fr) 332px;flex:1;min-height:0;overflow:hidden}
.stage2-center{overflow:auto;min-height:0;min-width:0;padding:20px 24px 40px}
.stage2-clip-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.stage2-clip-slug{font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--txt-0);letter-spacing:.03em;display:flex;align-items:baseline;gap:4px;min-width:0}
.stage2-clip-loc{color:var(--txt-1);font-weight:600}
.stage2-clip-name{color:var(--txt-2);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-ver{font-size:11px;color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line-2);border-radius:6px;padding:3px 9px;flex:0 0 auto}
.stage2-sourcebar{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:var(--bg-2);border-radius:8px;padding:9px 10px;margin:0 0 12px}
.stage2-source-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.stage2-source-k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.stage2-source-v{font-size:12px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-source-toggle{flex:0 0 auto;display:flex;background:var(--bg-3);border:1px solid var(--line-2);border-radius:7px;padding:2px}
.stage2-source-btn{border:0;background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:700;padding:6px 9px;border-radius:5px;cursor:pointer}
.stage2-source-btn.on{background:var(--brand);color:var(--ink-on-accent,#1a1206)}

.stage2-player{position:relative;width:100%;aspect-ratio:var(--stage-aspect,16 / 9);background:#05060a;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.stage2-player video{width:100%;height:100%;object-fit:contain;background:#05060a}
.stage2-player-poster{position:absolute;inset:0}
.stage2-player-poster img{width:100%;height:100%;object-fit:cover;opacity:.9}
.stage2-noframe{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--txt-2);font-size:12px;text-align:center;padding:20px}
.stage2-player-badge{position:absolute;left:14px;bottom:12px;font-size:11px;color:#e9e7e1;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);padding:4px 10px;border-radius:6px}
/* unrendered video-player placeholder — a clean player surface, never a still/sheet */
.stage2-player-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;
  background:radial-gradient(120% 120% at 50% 40%, #16181f 0%, #05060a 78%)}
.stage2-player-playring{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.22);color:rgba(255,255,255,.72);margin-bottom:4px}
.stage2-player-playring svg{margin-left:3px}
.stage2-player-playring.busy{animation:pulse 1.2s ease-in-out infinite;border-color:var(--brand);color:var(--brand)}
.stage2-player-msg{font-size:13px;font-weight:600;color:#e9e7e1;line-height:1.4}
.stage2-player-sub{font-size:11.5px;color:rgba(233,231,225,.5);line-height:1.4}
.stage2-player-bar{width:200px;max-width:60%;height:4px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin:3px 0}
.stage2-player-bar-fill{height:100%;border-radius:999px;background:var(--brand);transition:width .9s ease}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.92)}}
.stage2-ruler{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:8px;height:16px}
.stage2-ruler-track{position:relative;height:3px;border-radius:2px;background:var(--bg-4,var(--bg-3));overflow:hidden;min-width:0}
.stage2-ruler-fill{height:100%;border-radius:2px;background:var(--brand);width:0}
.stage2-ruler.empty .stage2-ruler-fill{width:0!important}
.stage2-ruler-dur{white-space:nowrap;font-family:var(--f-mono);font-size:11px;color:var(--txt-2);line-height:1}

.stage2-strip-cap{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--txt-3);margin:14px 0 6px;text-transform:uppercase}
.stage2-strip{display:flex;gap:8px;margin:0 0 16px;overflow-x:auto;padding-bottom:4px}
.stage2-strip-cell{flex:0 0 auto;width:128px;border:1px solid var(--line);background:var(--bg-2);border-radius:8px;overflow:hidden;cursor:pointer;padding:0;transition:.12s}
.stage2-strip-cell:hover{border-color:var(--line-2)}
.stage2-strip-cell.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stage2-strip-thumb{position:relative;width:100%;aspect-ratio:var(--stage-aspect,16 / 9);background:#0a0b0f}
.stage2-strip-thumb img{width:100%;height:100%;object-fit:cover}
.stage2-strip-blank{width:100%;height:100%}
.stage2-strip-no{position:absolute;left:5px;top:5px;min-width:16px;height:16px;padding:0 4px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font-family:var(--f-mono);font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.stage2-strip-cell.on .stage2-strip-no{background:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-strip-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px}
.stage2-strip-lab{font-size:10.5px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-strip-dur{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);flex:0 0 auto}
.stage2-take-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:0 0 16px}
.stage2-take-card{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--line);
  background:var(--bg-2);border-radius:9px;padding:7px;text-align:left;color:inherit;cursor:pointer;transition:.12s}
.stage2-take-card:hover{border-color:var(--line-2);background:var(--bg-3)}
.stage2-take-card.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stage2-take-thumb{position:relative;aspect-ratio:16 / 9;border-radius:6px;overflow:hidden;background:#05060a}
.stage2-take-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.stage2-take-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.58);color:#fff}
.stage2-take-play svg{margin-left:2px}
.stage2-take-meta{min-width:0;display:flex;flex-direction:column;gap:3px}
.stage2-take-title{font-size:12px;font-weight:700;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-take-sub{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-take-empty{display:flex;align-items:center;gap:9px;border:1px dashed var(--line-2);background:var(--bg-2);border-radius:9px;
  padding:14px 15px;margin:0 0 16px;color:var(--txt-2)}
.stage2-take-empty span{font-size:12px;font-weight:650;color:var(--txt-1)}
.stage2-take-empty small{margin-left:auto;font-size:11px;color:var(--txt-3)}

.stage2-chipbox{margin-top:11px;border-top:1px solid var(--line);padding-top:10px}
.stage2-chipbox-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:7px}
.stage2-chips{display:flex;flex-wrap:wrap;gap:6px}
.stage2-chip{display:inline-flex;align-items:flex-start;gap:5px;max-width:min(100%,420px);font-family:var(--f-ui);font-size:11px;color:var(--txt-2);background:var(--bg-3);border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer;text-align:left;transition:.12s;white-space:normal;line-height:1.25}
.stage2-chip:hover{border-color:var(--line-2);background:var(--bg-2);color:var(--txt-1)}
.stage2-chip b{color:var(--txt-1);font-weight:700;flex:0 0 auto}
.stage2-chip span{min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.stage2-chip.subject{border-color:color-mix(in oklab,var(--brand),transparent 62%)}
.stage2-chip.action{border-color:color-mix(in oklab,var(--pos),transparent 65%)}
.stage2-chip.camera{border-color:color-mix(in oklab,#8fb6ff,transparent 58%)}
.stage2-warn{display:flex;align-items:flex-start;gap:6px;margin-top:9px;font-size:11.5px;line-height:1.35;color:var(--neg,#e0698a)}

.stage2-assets-lab{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--txt-2);margin-bottom:9px}
.stage2-assets-lab span{font-size:9.5px;letter-spacing:.04em;color:var(--txt-3);text-align:right}
.stage2-assets-row{display:flex;gap:10px;flex-wrap:wrap}
.stage2-asset{width:96px;border:0;background:transparent;cursor:pointer;padding:0;text-align:left;opacity:.72;transition:.12s}
.stage2-asset.on{opacity:1}
.stage2-asset.excluded{opacity:.5}
.stage2-asset.missing{opacity:.38;cursor:not-allowed}
.stage2-asset.required{cursor:default}
.stage2-asset.add{cursor:default;opacity:.6}
.stage2-asset-vis{position:relative;width:96px;height:72px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-3);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--txt-2)}
.stage2-asset.on .stage2-asset-vis{border-color:var(--brand)}
.stage2-asset.required .stage2-asset-vis{border-color:color-mix(in oklab,var(--pos),transparent 58%)}
.stage2-asset.excluded .stage2-asset-vis{filter:saturate(.55) brightness(.72)}
.stage2-asset.missing .stage2-asset-vis{border-style:dashed}
.stage2-asset-vis img{width:100%;height:100%;object-fit:cover}
.stage2-asset.add .stage2-asset-vis{border-style:dashed}
.stage2-asset-T{font-family:var(--f-mono);font-size:22px;color:var(--txt-1)}
.stage2-asset-tick{position:absolute;left:5px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:var(--ink-on-accent,#1a1206);display:flex;align-items:center;justify-content:center}
.stage2-asset.required .stage2-asset-tick{background:var(--pos);color:#07130d}
.stage2-asset-vid{position:absolute;right:5px;bottom:5px;width:18px;height:18px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center}
/* maximise button on a reference tile — tap to open the lightbox */
.stage2-asset-max{position:absolute;right:5px;top:5px;width:20px;height:20px;border-radius:5px;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s;cursor:zoom-in;backdrop-filter:blur(2px)}
.stage2-asset-vis:hover .stage2-asset-max,.stage2-asset-max:focus{opacity:1}
.stage2-asset-max:hover{background:rgba(0,0,0,.78)}
@media (hover:none){ .stage2-asset-max{opacity:.9} }
/* the maximised reference viewer (lightbox) */
.stage2-lightbox{position:fixed;inset:0;z-index:9995;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(6,7,10,.86);backdrop-filter:blur(6px);padding:40px;cursor:zoom-out;animation:appconfirm-fade .14s ease}
.stage2-lightbox-media{max-width:min(1100px,92vw);max-height:82vh;object-fit:contain;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.5);background:#05060a}
.stage2-lightbox-cap{font-size:12.5px;color:#e9e7e1;background:rgba(0,0,0,.5);padding:5px 12px;border-radius:7px;max-width:80vw;text-align:center}
.stage2-lightbox-x{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s}
.stage2-lightbox-x:hover{background:rgba(0,0,0,.75)}
.stage2-asset-lab{font-size:10.5px;color:var(--txt-1);margin-top:5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-asset-foot{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:2px}
.stage2-asset-tag{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-2)}
.stage2-asset-state{font-family:var(--f-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-3)}
.stage2-asset.included .stage2-asset-state{color:var(--brand)}
.stage2-asset.required .stage2-asset-state{color:var(--pos)}
.stage2-asset.excluded .stage2-asset-state{color:var(--txt-3)}
.stage2-asset.missing .stage2-asset-state{color:var(--neg,#e0698a)}
.stage2-budget{margin-top:11px;border:1px solid var(--line);background:var(--bg-2);border-radius:8px;padding:9px 10px}
.stage2-budget-top{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;color:var(--txt-2)}
.stage2-budget-top span{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.08em}
.stage2-budget-top b{color:var(--txt-0);font-size:11px}
.stage2-budget-top em{font-style:normal;color:var(--txt-3);white-space:nowrap}
.stage2-budget-bar{height:5px;margin-top:7px;border-radius:999px;background:var(--bg-4,var(--bg-3));overflow:hidden}
.stage2-budget-bar i{display:block;height:100%;border-radius:999px;background:var(--brand);transition:width .16s ease,background .16s ease}
.stage2-budget.near .stage2-budget-bar i,.stage2-budget.full .stage2-budget-bar i{background:var(--accent,#d8a657)}
.stage2-budget.over{border-color:var(--neg-line,rgba(224,105,138,.3));background:var(--neg-soft,rgba(224,105,138,.1))}
.stage2-budget.over .stage2-budget-bar i{background:var(--neg,#e0698a)}
.stage2-budget.over .stage2-budget-top b,.stage2-budget.over .stage2-budget-top em{color:var(--neg,#e0698a)}
.stage2-budget-panel{margin-top:-4px}

/* right panel */
.stage2-panel{border-left:1px solid var(--line);overflow:auto;padding:16px 16px 26px;display:flex;flex-direction:column;gap:14px}
.stage2-panel-card{border:1px solid var(--line);background:var(--bg-2);border-radius:10px;padding:14px}
.stage2-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.stage2-panel-t{font-family:var(--f-display);font-size:16px;font-weight:600;color:var(--txt-0)}
.stage2-panel-v{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);border:1px solid var(--line-2);border-radius:4px;padding:2px 6px}
.stage2-context-list{display:flex;flex-direction:column;gap:8px}
.stage2-context-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px}
.stage2-context-row span{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3)}
.stage2-context-row b{font-weight:650;color:var(--txt-0);text-align:right;min-width:0}
.stage2-context-copy{display:flex;flex-direction:column;gap:6px}
.stage2-context-copy label{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--txt-3)}
.stage2-context-copy p{margin:0 0 6px;font-size:12.5px;line-height:1.45;color:var(--txt-1)}
.stage2-midcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.stage2-midcard{border:1px solid var(--line);background:var(--bg-2);border-radius:10px;padding:13px;min-width:0}
.stage2-midcard.wide{grid-column:1 / -1}
.stage2-midcard-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.stage2-midcard-head span{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.stage2-midcard-head b{font-family:var(--f-mono);font-size:10px;color:var(--txt-2);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;white-space:nowrap}
.stage2-context-list.compact{gap:6px}
.stage2-context-list.compact .stage2-context-row{font-size:11.5px}
.stage2-ref-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.stage2-ref-tag{font-size:11px;font-weight:650;color:var(--txt-1);background:var(--bg-3);border:1px solid var(--line);border-radius:6px;padding:4px 7px}
.stage2-ref-tag.cast{border-color:color-mix(in oklab,var(--brand),transparent 60%)}
.stage2-ref-tag.loc{border-color:color-mix(in oklab,#8fb6ff,transparent 58%)}
.stage2-ref-tag.prop{border-color:color-mix(in oklab,var(--pos),transparent 62%)}
.stage2-ref-empty{font-size:12px;color:var(--txt-3)}
.stage2-caps{display:flex;flex-direction:column;gap:9px}
.stage2-cap{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--txt-1)}
.stage2-cap-d{width:6px;height:6px;border-radius:1.5px;transform:rotate(45deg);background:var(--brand);flex:0 0 auto}
.stage2-modes{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.stage2-mode{border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-1);font-family:var(--f-ui);font-size:12px;font-weight:600;padding:9px 8px;border-radius:8px;cursor:pointer;transition:.12s;text-align:center}
.stage2-mode:hover{background:var(--bg-3)}
.stage2-mode.on{background:var(--brand);border-color:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-sec-lab{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--txt-2);margin-top:2px}
.stage2-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stage2-sum{border:1px solid var(--line);background:var(--bg-2);border-radius:8px;padding:10px 6px;text-align:center}
.stage2-sum-k{font-size:10.5px;color:var(--txt-2);margin-bottom:4px}
.stage2-sum-n{font-family:var(--f-mono);font-size:18px;font-weight:700;color:var(--brand)}
.stage2-ctrls{display:flex;flex-direction:column;gap:9px}
.stage2-ctrl{display:flex;align-items:center;gap:10px}
.stage2-ctrl-l{flex:0 0 96px;font-size:11.5px;color:var(--txt-2)}
.stage2-inp{flex:1;min-width:0;background:var(--bg-3);border:1px solid var(--line-2);border-radius:7px;color:var(--txt-0);font-family:var(--f-ui);font-size:12px;padding:7px 9px;outline:0}
.stage2-inp:focus{border-color:var(--brand)}
.stage2-lockval{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:7px;color:var(--txt-0);font-family:var(--f-mono);font-size:12px;padding:7px 9px}
.stage2-lockval span{font-family:var(--f-ui);font-size:11px;color:var(--pos)}
.stage2-lockval.warn{border-color:var(--neg-line,rgba(224,105,138,.3));background:var(--neg-soft,rgba(224,105,138,.1));color:var(--neg,#e0698a)}
.stage2-lockval.warn span{color:var(--neg,#e0698a)}
.stage2-toggle{flex:1;display:flex;background:var(--bg-3);border:1px solid var(--line-2);border-radius:7px;padding:2px}
.stage2-tg{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;color:var(--txt-2);font-family:var(--f-ui);font-size:11.5px;font-weight:600;padding:6px;border-radius:5px;cursor:pointer}
.stage2-tg.on{background:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-generate{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;background:var(--brand);color:var(--ink-on-accent,#1a1206);
  font-family:var(--f-ui);font-size:13.5px;font-weight:700;padding:13px;border-radius:9px;cursor:pointer;transition:.12s}
.stage2-generate:hover:not(:disabled){filter:brightness(1.06)}
.stage2-generate:disabled{opacity:.45;cursor:default}
.stage2-generate.small{width:auto;padding:9px 12px;border-radius:8px;font-size:12px;flex:0 0 auto}
.stage2-extend{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;border:1px solid var(--line-2);background:var(--bg-2);
  color:var(--txt-0);font-family:var(--f-ui);font-size:12.5px;font-weight:600;padding:11px;border-radius:9px;cursor:pointer;transition:.12s}
.stage2-extend:hover:not(:disabled){background:var(--bg-3)}
.stage2-extend:disabled{opacity:.4;cursor:default}
.stage2-credit{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--txt-2)}
.stage2-err{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--neg,#e0698a);background:var(--neg-soft,rgba(224,105,138,.1));border:1px solid var(--neg-line,rgba(224,105,138,.3));border-radius:8px;padding:9px 11px;line-height:1.45}
.stage2-gen-busy{display:flex;flex-direction:column;gap:9px}
.stage2-gen-prog{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--txt-1);font-family:var(--f-mono)}
.stage2-gen-prog .orb{width:14px;height:14px;border-radius:50%;background:var(--brand);animation:pulse 1.1s ease-in-out infinite}

/* Stage right panel — compact video-generator module */
.stage2-panel.video-gen{padding:0;border-left:1px solid var(--line);background:var(--bg-0);overflow:auto}
.sd-gen-panel{min-height:100%;padding:12px;display:flex;flex-direction:column;gap:14px;background:var(--bg-0);color:var(--txt-0)}
.sd-gen-hero{display:flex;align-items:stretch;justify-content:space-between;gap:10px;background:linear-gradient(135deg,var(--accent-soft,rgba(216,126,0,.16)),var(--bg-2));border:1px solid var(--accent,#d67e00);border-radius:12px;padding:10px 8px 10px 10px}
.sd-gen-titleblock{min-width:0;display:flex;flex-direction:column;gap:6px}
.sd-gen-tools{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;border:0;background:transparent;color:var(--txt-2);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;padding:0;cursor:pointer}
.sd-gen-tools:hover{color:var(--txt-0)}
.sd-gen-title{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--txt-0);line-height:1.15}
.sd-gen-info{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--line-3);background:var(--bg-1);color:var(--txt-2);padding:0;cursor:pointer}
.sd-gen-info:hover{color:var(--txt-0);border-color:var(--accent,#d67e00)}
.sd-gen-template{width:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-2);color:var(--txt-1);font-family:var(--f-mono);font-size:9.5px;font-weight:700;cursor:pointer}
.sd-gen-template:hover{border-color:var(--accent,#d67e00);background:var(--bg-3)}
.sd-gen-label{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:-6px}
.sd-gen-selectwrap{height:32px;display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:7px;background:var(--bg-2);color:var(--txt-0);padding:0 10px}
.sd-gen-select{flex:1;min-width:0;border:0;appearance:none;background:transparent;color:var(--txt-0);font:700 13px var(--f-ui);outline:0}
.sd-gen-select option{background:var(--bg-2);color:var(--txt-0)}
.sd-gen-refgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sd-gen-ref{position:relative;height:64px;border:1px dashed var(--line-3);border-radius:7px;background:var(--bg-2);color:var(--txt-0);overflow:hidden;text-align:left;padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;cursor:pointer}
.sd-gen-ref:hover{border-color:var(--accent,#d67e00);background:var(--bg-3)}
.sd-gen-ref img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.sd-gen-ref-ic,.sd-gen-ref span{position:relative;z-index:1}
.sd-gen-ref-ic{color:var(--txt-2)}
.sd-gen-ref span{font-size:12px;font-weight:650}
.sd-gen-addmedia{min-height:50px;border:1px dashed var(--line-3);border-radius:7px;background:var(--bg-2);color:var(--txt-1);display:flex;align-items:center;gap:13px;padding:9px 12px}
.sd-gen-media-icons{display:flex;align-items:center;gap:5px;color:var(--txt-2)}
.sd-gen-media-icons span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--bg-1)}
.sd-gen-media-icons .sd-gen-plus{border-style:dashed}
.sd-gen-addmedia b{font-size:12px;font-weight:650}
.sd-gen-shotrow{display:flex;align-items:center;gap:8px;margin-bottom:-4px}
.sd-gen-shotrow .sd-gen-label{margin:0}
.sd-gen-shot-plus{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-3);background:var(--bg-1);color:var(--txt-1);display:grid;place-items:center;cursor:pointer}
.sd-gen-shot-plus:hover{border-color:var(--accent,#d67e00);color:var(--accent,#d67e00)}
.sd-gen-promptbox{border:1px solid var(--accent,#d67e00);border-radius:10px;background:var(--bg-1);box-shadow:0 0 0 1px color-mix(in oklab,var(--accent,#d67e00),transparent 72%)}
.sd-gen-promptbox:focus-within{border-color:var(--accent,#d67e00);box-shadow:0 0 0 2px color-mix(in oklab,var(--accent,#d67e00),transparent 72%)}
.sd-gen-prompt{width:100%;min-height:112px;border:0;resize:vertical;background:transparent;color:var(--txt-0);font:500 14px/1.55 var(--f-ui);outline:0;padding:14px}
.sd-gen-prompt::placeholder{color:var(--txt-3)}
.sd-gen-prompt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px 10px}
.sd-gen-prompt-foot span{font-family:var(--f-mono);font-size:11px;color:var(--txt-3)}
.sd-gen-prompt-actions{display:flex;align-items:center;gap:8px}
.sd-gen-prompt-actions button{width:24px;height:24px;border:0;background:transparent;color:var(--txt-2);display:grid;place-items:center;border-radius:5px;cursor:pointer}
.sd-gen-prompt-actions button:hover{background:var(--bg-3);color:var(--accent,#d67e00)}
.sd-gen-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sd-gen-pills button,.sd-gen-quality button,.sd-gen-voice,.sd-gen-extend,.sd-gen-cancel{border:1px solid var(--line-2);border-radius:7px;background:var(--bg-2);color:var(--txt-0);font:800 12px var(--f-ui);display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px;cursor:pointer}
.sd-gen-pills button{min-height:32px}
.sd-gen-quality{display:flex;gap:8px;margin-top:-3px}
.sd-gen-quality button{flex:1;opacity:.72}
.sd-gen-quality button.on{opacity:1;background:var(--bg-1);border-color:var(--accent,#d67e00);color:var(--accent,#d67e00)}
.sd-gen-voice{width:100%;background:var(--accent-soft,rgba(216,126,0,.12));border-color:var(--accent,#d67e00);color:var(--accent,#d67e00)}
.sd-gen-submit{height:40px;border:0;border-radius:8px;background:var(--accent,#d67e00);color:var(--ink-on-accent,#1a1206);font:800 13px var(--f-ui);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;cursor:pointer;margin-top:2px}
.sd-gen-submit:hover:not(:disabled){filter:brightness(1.05)}
.sd-gen-submit:disabled{opacity:.48;cursor:default}
.sd-gen-extend{width:100%;background:var(--bg-2)}
.sd-gen-extend:disabled{display:none}
.sd-gen-cancel{width:100%;background:var(--neg-soft,rgba(224,105,138,.1));border-color:var(--neg-line,rgba(224,105,138,.3));color:var(--neg,#e0698a)}
.sd-gen-busy{border:1px solid var(--line-2);border-radius:8px;padding:10px;background:var(--bg-2)}
.sd-gen-err{background:var(--neg-soft,rgba(224,105,138,.1));border-color:var(--neg-line,rgba(224,105,138,.3));color:var(--neg,#e0698a)}
.sd-gen-credit{color:var(--txt-3)}
.sd-gen-credit.empty{color:var(--neg,#e0698a)}

/* model picker — data-driven from SEEDANCE_MODELS (app/stage.jsx); a disabled "soon"
   model reuses the same washed-out treatment as the room switcher's "Soon" rooms. */
.sd-gen-modelrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:-2px}
.sd-gen-model{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:7px;background:var(--bg-2);color:var(--txt-1);font:700 11.5px var(--f-ui);padding:7px 10px;cursor:pointer}
.sd-gen-model:hover:not(:disabled){border-color:var(--accent,#d67e00);color:var(--txt-0)}
.sd-gen-model.on{background:var(--bg-1);border-color:var(--accent,#d67e00);color:var(--accent,#d67e00)}
.sd-gen-model:disabled{opacity:.55;cursor:default}
.sd-gen-model-soon{font-family:var(--f-mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line-2);border-radius:4px;padding:1px 4px}
/* plan-locked model/resolution — visible + clickable (opens the plans modal), never hidden */
.sd-gen-model.plan-locked{opacity:.62}
.sd-gen-model-soon.plan{color:var(--pos);border-color:var(--pos-line)}
.stage2-respill.plan-locked{opacity:.62;border-style:dashed}
.stage2-respill.plan-locked:hover{opacity:1;border-color:var(--pos);color:var(--pos)}
.respill-lock{margin-left:3px;color:var(--pos);font-weight:800}

/* resolution pills — Standard tier unlocks 1080p; Fast caps at 720p (disabled, not hidden,
   so the ceiling is visible rather than silently missing). */
.stage2-respills{display:flex;gap:5px;width:100%}
.stage2-respill{flex:1;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--txt-1);font:650 10.5px var(--f-ui);padding:7px 4px;cursor:pointer}
.stage2-respill:hover:not(:disabled){border-color:var(--brand)}
.stage2-respill.on{background:var(--brand);border-color:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-respill:disabled{opacity:.4;cursor:default}

/* seed — optional manual value + reuse-last/clear, for reproducible re-renders */
.stage2-seedrow{display:flex;align-items:center;gap:6px;width:100%}
.stage2-seed-input{flex:1;min-width:0;height:32px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--txt-0);font:650 11.5px var(--f-mono);padding:0 9px;outline:0}
.stage2-seed-input:focus{border-color:var(--brand)}
.stage2-seed-btn{flex:0 0 auto;width:28px;height:28px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--txt-2);cursor:pointer;font-size:12px;line-height:1}
.stage2-seed-btn:hover{border-color:var(--brand);color:var(--brand)}

/* (the prompt recipe picker died with the tab row — one derived prompt, 2026-08-02) */

/* Render-settings panel — docked on the RIGHT like the Writers' Room inspector.
   Open: a fixed-width scrolling column with its own header + collapse button.
   Closed: the shared vertical CollapsedStrip (chrome.jsx) reopens it. */
.stage2-settings-drawer{width:var(--insp-w);flex:0 0 var(--insp-w);min-width:0;display:flex;flex-direction:column;min-height:0;
  border-left:1px solid var(--line);background:#fbfaf7;overflow:auto}
.stage2-settings-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 2px;flex:0 0 auto}
/* the panel's tabs — the Writers' Room INSPECTOR underline strip, reused verbatim */
.stage2-settings-tabs{flex:0 0 auto;padding-top:4px}
.stage2-settings-drawer .sd-gen-panel{padding:12px 14px 26px}

/* ---- unified RENDER card — every cost-bearing choice (model · tier · resolution ·
   duration) + the live credit cost + capability chips, in one glanceable card above
   the settings tabs. ---- */
.stage2-rc-wrap{flex:0 0 auto;padding:10px 14px 2px}
.stage2-rendercard{display:flex;flex-direction:column;gap:10px;padding:12px 13px;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(39,35,29,.05)}
.stage2-rc-head{display:flex;align-items:center;justify-content:space-between}
.stage2-rc-cost{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:11.5px;font-weight:700;
  color:var(--brand);background:var(--pos-soft);border:1px solid var(--pos-line);border-radius:20px;padding:3px 10px}
.stage2-rc-cost.empty{color:var(--alert);background:var(--alert-soft);border-color:var(--alert)}
.stage2-rc-math{font-family:var(--f-mono);font-size:10px;letter-spacing:.02em;color:var(--txt-2);
  padding:7px 9px;background:var(--bg-1);border:1px dashed var(--line-2);border-radius:7px}
.stage2-rc-caps{display:flex;flex-wrap:wrap;gap:5px}
.stage2-rc-cap{font-family:var(--f-mono);font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:var(--txt-2);
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:20px;padding:2px 8px;white-space:nowrap;cursor:default}
.stage2-rc-cap:hover{color:var(--txt-1);border-color:var(--line-3)}
/* batch-takes advanced row (settings tab) */
.stage2-batchrow{justify-content:flex-start}
.stage2-batchrow-n{font-family:var(--f-mono);font-size:11.5px;color:var(--txt-1);min-width:44px;text-align:center}
@media (max-width:900px){
  /* stacked fallback: panel rides below the console content, strip hidden */
  .stage2-console-composer > .strip{display:none}
  .stage2-settings-drawer{width:auto;border-left:0;border-top:1px solid var(--line)}
}

/* Stage v2.5 — light production desk matching the Seedance mockup */
.stage2-root{background:#f7f5ef}
.stage2-rail{background:#f8f7f3}
/* (the Stage's view tabs now reuse the shared .viewnav/.segmented chrome — chrome.jsx) */
.stage2-console{grid-template-columns:minmax(0,1fr) 306px;background:#f7f5ef}
.stage2-center{padding:18px 24px 42px}
.stage2-player{border-radius:8px;box-shadow:0 16px 40px rgba(39,35,29,.10)}
.stage2-take-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.stage2-take-card{grid-template-columns:1fr;padding:0;gap:0;border-radius:7px;background:#fff;overflow:hidden}
.stage2-take-thumb{border-radius:0}
.stage2-take-meta{padding:6px 7px}
/* overflow:visible (not hidden) so the @-mention dropdown can escape the box;
   the chips row carries the bottom rounding instead */
.stage2-director-prompt{margin:18px 0 16px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 12px 36px rgba(39,35,29,.06);overflow:visible}
.stage2-director-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 4px}
.stage2-director-title{display:flex;align-items:center;gap:8px;min-width:0}
.stage2-director-title b{font-size:14px;color:var(--txt-0)}
.stage2-director-badge{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;color:var(--txt-2);border:1px solid var(--line-2);border-radius:4px;padding:2px 5px;background:#faf9f5}
.stage2-prompt-library{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--brand);font:700 11px var(--f-ui);cursor:pointer}
.stage2-prompt-library:hover{text-decoration:underline}
.stage2-director-text{width:100%;min-height:94px;border:0;resize:vertical;background:transparent;color:var(--txt-0);font:500 13px/1.55 var(--f-ui);outline:0;padding:8px 14px 12px}
.stage2-director-text::placeholder{color:var(--txt-3)}
.stage2-director-chips{display:flex;flex-wrap:nowrap;gap:7px;padding:10px 14px 13px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;background:#faf9f6;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.stage2-director-chips::-webkit-scrollbar{height:5px}
.stage2-director-chips::-webkit-scrollbar-thumb{background:#d9d2c6;border-radius:999px}
.stage2-director-chips button{flex:0 0 auto}
.stage2-director-chips button{display:inline-flex;align-items:center;gap:5px;max-width:100%;border:1px solid var(--line);background:#fff;color:var(--txt-1);border-radius:6px;padding:5px 8px;font-size:10.5px;cursor:pointer}
.stage2-director-chips button:hover{border-color:var(--brand)}
.stage2-director-chips b{font-family:var(--f-mono);font-size:8.5px;text-transform:lowercase;color:var(--txt-3);font-weight:700}
.stage2-director-chips span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.stage2-assets-lab{margin:18px 0 8px}
.stage2-assets-lab span{text-align:left;letter-spacing:.12em}
.stage2-assets-lab b{font-family:var(--f-mono);font-size:10px;color:var(--txt-3);font-weight:600}
.stage2-assets-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:7px}
.stage2-asset{position:relative;width:88px;flex:0 0 88px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:6px;opacity:1}
.stage2-asset:hover{border-color:var(--line-2)}
.stage2-asset.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stage2-asset.required{border-color:color-mix(in oklab,var(--brand),transparent 28%)}
.stage2-asset.excluded{opacity:.5}
.stage2-asset.missing{opacity:.45;border-style:dashed}
.stage2-asset.add{background:transparent;border-style:dashed;display:flex;flex-direction:column;justify-content:center}
.stage2-asset-vis{width:100%;height:48px;border:0;border-radius:5px;background:#f4f2ec}
.stage2-asset.on .stage2-asset-vis,.stage2-asset.required .stage2-asset-vis{border:0}
.stage2-asset-check{position:absolute;left:5px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--brand);color:var(--ink-on-accent,#1a1206);display:grid;place-items:center;z-index:2}
.stage2-asset:not(.on) .stage2-asset-check{display:none}
.stage2-asset-textic{font-family:var(--f-mono);font-size:22px;color:var(--txt-1)}
.stage2-asset-name{display:block;margin-top:5px;font-size:10.5px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-asset small{display:block;margin-top:2px;font-family:var(--f-mono);font-size:8.5px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:lowercase}
.stage2-asset.on small,.stage2-asset.required small{color:var(--brand)}
.stage2-assets-warnings{display:grid;gap:7px;margin-top:8px}
.stage2-assets-warnings .stage2-warn{margin-top:0;border:1px solid var(--neg-line,rgba(224,105,138,.3));border-radius:8px;background:var(--neg-soft,rgba(224,105,138,.1));padding:6px 9px;align-items:center;font-size:11px}
.stage2-midcards{margin-top:18px}
.stage2-panel.video-gen{background:#f7f5ef;padding:14px;border-left:1px solid #e5ded3}
.sd-gen-panel{padding:0;background:transparent;gap:12px}
.sd-gen-hero,.sd-gen-capability{background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 30px rgba(39,35,29,.04)}
.sd-gen-hero{padding:12px}
.sd-gen-template{background:#faf9f5;border-color:var(--line);width:72px}
.sd-gen-capability{padding:13px 14px;display:flex;flex-direction:column;gap:8px}
.sd-gen-cap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.sd-gen-cap-head b{font-size:14px;color:var(--txt-0)}
.sd-gen-cap-head span{font-family:var(--f-mono);font-size:8.5px;border:1px solid var(--line);border-radius:4px;padding:2px 5px;color:var(--txt-2)}
.sd-gen-cap-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--txt-1)}
.sd-gen-cap-row svg{color:var(--brand)}
.sd-gen-modegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:5px}
.sd-gen-mode{min-height:38px;border:0;border-radius:6px;background:transparent;color:var(--txt-1);font:750 10.5px/1.15 var(--f-ui);cursor:pointer}
.sd-gen-mode:hover{background:#f6f2eb}
.sd-gen-mode.on{background:var(--brand);color:var(--ink-on-accent,#1a1206)}
.sd-gen-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.sd-gen-summary-card{display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:10px 4px}
.sd-gen-summary-card span{font-size:10px;color:var(--txt-2)}
.sd-gen-summary-card b{display:flex;align-items:center;gap:4px;color:var(--brand);font-family:var(--f-mono);font-size:16px}
/* labelled tray-openers in the Render settings panel (References / Elements) */
.sd-gen-refbtns{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sd-gen-refbtns button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:7px;
  background:#fff;color:var(--txt-1);font:700 11px var(--f-ui);padding:8px 6px;cursor:pointer;white-space:nowrap}
.sd-gen-refbtns button:hover{border-color:var(--brand);color:var(--txt-0)}
.sd-gen-refbtns button.on{border-color:var(--brand);color:var(--brand);background:var(--accent-soft,rgba(214,126,0,.08))}
.stage2-ctrl{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;align-items:center}
.stage2-ctrl-l{flex:initial;font-size:10.5px}
/* long option labels ellipsize instead of running under the native dropdown arrow */
.stage2-ctrl select{min-width:0;width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--txt-0);font:650 11.5px var(--f-ui);padding:8px 26px 8px 9px;outline:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-ctrl select:focus{border-color:var(--brand)}
.sd-gen-pills{display:none}
.sd-gen-quality{margin-top:0;background:#fff;border:1px solid var(--line);border-radius:7px;padding:4px}
.sd-gen-quality button{border:0;background:transparent}
.sd-gen-quality button.on{background:var(--brand);border-color:var(--brand);color:var(--ink-on-accent,#1a1206)}
.sd-gen-submit{height:44px;border-radius:7px;justify-content:center;background:var(--brand);font-size:13px;margin-top:6px}
.sd-gen-extend{background:#fff;border-color:var(--line);border-radius:7px}
.sd-gen-credit{font-size:10.5px}

/* Stage v3 — closer to the supplied production-console reference */
.stage2-root{background:#fbfaf7;color:var(--txt-0)}
.stage2-body{background:#fbfaf7}
.stage2-main{background:#fbfaf7}
.stage2-rail{padding:14px 12px;background:#fbfaf7;border-right:1px solid #ebe5db}
.stage2-rail-head{padding:1px 4px 12px;font-size:9.5px;color:#a6a29a}
.stage2-scene-list{gap:10px}
.stage2-scene-block{padding:0 0 10px;border-bottom:1px solid #eee8de}
.stage2-scene-headrow{padding:8px 8px;border-radius:7px}
.stage2-scene-headrow.on{background:#fff}
.stage2-console{grid-template-columns:minmax(0,1fr) 294px;background:#fbfaf7}
.stage2-center{padding:18px 24px 34px}
.stage2-center > .stage2-clip-head,
.stage2-center > .stage2-player,
.stage2-center > .stage2-ruler,
.stage2-center > .stage2-timeline,
.stage2-center > .stage2-director-prompt,
.stage2-center > .stage2-assets-lab,
.stage2-center > .stage2-assets-row,
.stage2-center > .stage2-assets-warnings{max-width:860px;margin-left:auto;margin-right:auto}
.stage2-clip-head{margin-bottom:12px}
.stage2-clip-slug{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#343536}
.stage2-clip-loc{font-weight:800;color:#343536}
.stage2-clip-name{font-weight:700;color:#343536}
/* clip-packing switcher on the player head: per-clip vs whole-scene shooting */
.stage2-iconbtn{width:30px;height:30px;display:grid;place-items:center;border:1px solid #e2dbd0;border-radius:7px;background:#fff;color:var(--txt-2);cursor:pointer}
.stage2-iconbtn:hover{border-color:#cbc2b4;color:var(--txt-0)}
.stage2-player{border-radius:8px;border:1px solid #dcd6cc;background:#05060a;box-shadow:0 14px 34px rgba(39,35,29,.12)}
.stage2-ruler{height:16px;margin-top:8px;margin-bottom:10px}
.stage2-ruler-track{background:#ddd6ca}
.stage2-ruler-dur{font-size:10.5px}
.stage2-timeline{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:8px;margin:12px auto 16px}
.stage2-time-arrow{width:30px;height:30px;border:1px solid #e2dbd0;border-radius:7px;background:#fff;color:var(--txt-2);display:grid;place-items:center;cursor:pointer}
.stage2-time-arrow:hover{border-color:#cfc6b8;color:var(--brand)}
.stage2-time-track{min-width:0}
.stage2-time-ruler{display:grid;grid-template-columns:repeat(5,1fr);font:700 9px var(--f-mono);color:#a8a49c;margin:0 2px 5px}
.stage2-time-ruler span{text-align:center}
.stage2-time-ruler span:first-child{text-align:left}
.stage2-time-ruler span:last-child{text-align:right}
.stage2-time-ruler span.on{color:var(--brand)}
.stage2-time-cards{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:7px;padding-bottom:4px}
.stage2-time-cards::-webkit-scrollbar{height:6px}
.stage2-time-cards::-webkit-scrollbar-thumb{background:#d9d2c6;border-radius:999px}
.stage2-time-card{flex:0 0 150px;min-width:0;border:1px solid #e2dbd0;background:#fff;border-radius:7px;padding:0;text-align:left;color:inherit;cursor:pointer;overflow:hidden}
.stage2-time-card.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stage2-time-card:hover{border-color:#cfc6b8}
.stage2-time-thumb{position:relative;height:58px;background:#111;overflow:hidden}
.stage2-time-thumb img,.stage2-time-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.stage2-time-play{position:absolute;right:5px;bottom:5px;width:20px;height:20px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;display:grid;place-items:center}
.stage2-time-merge{position:absolute;left:5px;top:5px;height:16px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font:800 9px var(--f-mono);display:grid;place-items:center}
.stage2-time-meta{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;padding:5px 6px 6px}
.stage2-time-meta b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;color:var(--txt-0)}
.stage2-time-meta span{flex:0 0 auto;font:700 9px var(--f-mono);color:var(--txt-2)}
.stage2-time-empty{flex:1 1 auto;border:1px dashed #e2dbd0;border-radius:7px;background:rgba(255,255,255,.55);color:#a8a49c;font-size:11px;display:flex;align-items:center;justify-content:center;min-height:86px;padding:0 14px;text-align:center}
.stage2-director-prompt{margin-top:18px;margin-bottom:16px;border-color:#eee7dc;border-radius:10px;box-shadow:0 12px 32px rgba(39,35,29,.06)}
.stage2-director-text{min-height:86px;font-size:12.5px;line-height:1.5}
.stage2-director-chips{background:#fbfaf7}
.stage2-assets-lab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;margin-bottom:8px}
.stage2-assets-row{gap:8px}
.stage2-asset{width:80px;flex-basis:80px;border-color:#e2dbd0;box-shadow:none}
.stage2-asset.on{border-color:#e2dbd0;box-shadow:none}
.stage2-asset.required{border-color:#e2dbd0}
.stage2-asset-check{background:#fff;color:var(--brand);border:1px solid #e2dbd0}
.stage2-asset.on .stage2-asset-check{background:var(--brand);color:#1d1408;border-color:var(--brand)}
.stage2-asset-vis{height:45px}
.stage2-panel.video-gen{padding:16px 15px 22px;background:#fbfaf7;border-left:1px solid #ebe5db}
.sd-gen-panel{gap:14px}
.sd-gen-capability{border-color:#e5ded3;border-radius:8px;box-shadow:0 10px 26px rgba(39,35,29,.04)}
.sd-gen-cap-head b{font-size:14px}
.sd-gen-cap-row{font-size:11px}
.sd-gen-modegrid{border-color:#e5ded3}
.sd-gen-summary-card{border-color:#e5ded3}
.stage2-ctrl{grid-template-columns:86px minmax(0,1fr)}
.stage2-ctrl-l{font-size:10px;color:#96928b}
.stage2-ctrl select{height:32px;border-color:#e2dbd0;background:#fff;font-size:10.5px;padding-right:26px}
.sd-gen-submit{height:42px;margin-top:8px}
.sd-gen-extend{height:36px}

/* secondary tabs */
.stage2-board-scroll{flex:1;min-height:0;overflow:auto;padding:18px 20px 36px}
.stage2-board-scene{margin-bottom:24px}
.stage2-board-scene-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.stage2-board-scene-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3)}
.stage2-board-scene-t{font-family:var(--f-display);font-size:15px;font-weight:650;color:var(--txt-0);margin-top:2px}
.stage2-board-progress{font-family:var(--f-mono);font-size:11px;color:var(--txt-2);white-space:nowrap}
.stage2-board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.stage2-sheets{flex:1;min-height:0;overflow:auto;padding:20px 24px 40px}
.stage2-sheets-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.stage2-sheets-title{font-family:var(--f-display);font-size:20px;font-weight:700;color:var(--txt-0);margin-top:3px}
.stage2-sheets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.stage2-sheet-card{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);background:var(--bg-2);border-radius:8px;
  overflow:hidden;cursor:pointer;text-align:left;padding:0;color:inherit;transition:.14s}
.stage2-sheet-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.stage2-sheet-card:disabled{cursor:default;transform:none;opacity:.92}
.stage2-sheet-card.missing{border-style:dashed;background:var(--bg)}
.stage2-sheet-thumb{position:relative;aspect-ratio:var(--stage-aspect,16 / 9);background:#08090d;overflow:hidden}
.stage2-sheet-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.stage2-sheet-missing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--txt-3);font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.stage2-sheet-meta{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 11px}
.stage2-sheet-label{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-sheet-clip{font-size:11px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stage2-card{border:1px solid var(--line);background:var(--bg-2);border-radius:8px;overflow:hidden;cursor:pointer;text-align:left;padding:0;transition:.14s;color:inherit}
.stage2-card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.stage2-card.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stage2-card.done{background:var(--bg-3)}
.stage2-card-thumb{position:relative;aspect-ratio:var(--stage-aspect,16 / 9);background:#08090d;overflow:hidden}
.stage2-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.stage2-card-blank{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--txt-3);font-family:var(--f-mono);font-size:10px}
.stage2-card-play{position:absolute;right:8px;bottom:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-card-body{padding:10px 11px 11px}
.stage2-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stage2-card-lab{font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--txt-0)}
.stage2-card-dur{font-family:var(--f-mono);font-size:10.5px;color:var(--txt-2)}
.stage2-card-beat{font-size:12.5px;color:var(--txt-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.stage2-card-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.stage2-status{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);border-radius:5px;padding:2px 5px;color:var(--txt-2);background:var(--bg)}
.stage2-status.ready{color:var(--pos);border-color:color-mix(in oklab,var(--pos),transparent 58%);background:color-mix(in oklab,var(--pos),transparent 90%)}
.stage2-status.partial{color:var(--brand);border-color:color-mix(in oklab,var(--brand),transparent 55%);background:color-mix(in oklab,var(--brand),transparent 90%)}
.stage2-status.missing{color:var(--txt-3)}
.stage2-status.silent{color:var(--txt-3);border-style:dashed}
.stage2-link{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--txt-0);font-family:var(--f-ui);font-size:12px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer}
.stage2-link:hover{background:var(--bg-3)}
.stage2-link.primary{background:var(--brand);border-color:var(--brand);color:var(--ink-on-accent,#1a1206)}
.stage2-link.primary:hover{filter:brightness(1.05)}
@media (max-width:1180px){
  .stage2-console{grid-template-columns:minmax(0,1fr) 300px}
  .stage2-center{padding:18px 18px 34px}
  .stage2-panel{padding:14px 14px 24px}
  .stage2-panel.video-gen{padding:14px}
  .stage2-midcards{grid-template-columns:1fr 1fr}
  .stage2-midcard.wide{grid-column:1 / -1}
  .stage2-board-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .stage2-summary{gap:6px}
}
@media (max-width:1040px){
  .stage2-console{display:block;overflow:auto}
  .stage2-center{overflow:visible;padding:18px 20px 18px}
  .stage2-panel{overflow:visible;border-left:0;border-top:1px solid var(--line);padding:16px 20px 28px}
  .stage2-panel.video-gen{border-left:0;border-top:1px solid var(--line);padding:16px 20px 24px;background:#f7f5ef}
  .sd-gen-panel{min-height:auto;padding:0}
  .stage2-panel-card{padding:12px}
  .stage2-modes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stage2-ctrls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
  .stage2-ctrl{align-items:stretch;flex-direction:column;gap:5px}
  .stage2-ctrl-l{flex:0 0 auto}
  .stage2-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stage2-budget-panel{margin-top:0}
}
@media (max-width:860px){
  .stage2-body{display:flex;flex-direction:column}
  .stage2-rail{width:auto;flex:0 0 auto;border-right:0;border-bottom:1px solid var(--line);max-height:154px;padding:10px 12px;overflow:auto}
  /* the rail's collapsed strip becomes a slim horizontal bar in the stacked layout */
  .stage2-body > .strip{width:100%;height:auto;flex:0 0 auto;flex-direction:row;justify-content:flex-start;
    padding:8px 12px;gap:10px;border-right:0;border-bottom:1px solid var(--line)}
  .stage2-body > .strip .strip-label{writing-mode:horizontal-tb;transform:none;margin-top:0}
  .stage2-head{align-items:flex-start;flex-direction:column}
  .stage2-head-actions{justify-content:flex-start;width:100%}
  .stage2-main{flex:1}
  .stage2-board-scroll{padding:14px 14px 28px}
  .stage2-board-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .stage2-scene-list{display:flex;flex-direction:column;gap:6px;overflow:visible;padding-bottom:3px}
  .stage2-scene-pick{width:auto;min-width:178px;flex:0 0 auto;border:1px solid var(--line);background:var(--bg-2)}
  .stage2-scene-pick.on::before{left:0;top:auto;bottom:-1px;transform:none;width:100%;height:2px}
  .stage2-cliplist{display:flex;gap:7px;margin-left:0;padding:4px 0 8px;border-left:0;overflow-x:auto}
  .stage2-cliprow{width:auto;min-width:156px;flex:0 0 auto;border:1px solid var(--line);background:var(--bg-2)}
  .stage2-cliprow.on::before{left:0;top:auto;bottom:-1px;transform:none;width:100%;height:2px}
  .stage2-scene-row{padding-left:2px}
  .stage2-scene-ttl{max-width:100%}
  .stage2-rail-head{padding-left:2px}
}
@media (max-width:640px){
  .stage2-root{overflow:auto}
  .stage2-body{min-height:auto;overflow:visible}
  .stage2-main{overflow:visible}
  .stage2-head{padding:11px 12px;gap:10px}
  .stage2-head-meta{gap:7px;font-size:9.5px}
  .stage2-head-actions{gap:8px}
  .stage2-nav{width:100%}
  .stage2-navbtn{flex:1;justify-content:center;padding:7px 10px}
  .stage2-voiceall,.stage2-voiceall .stage2-link{width:100%}
  .stage2-voiceall .stage2-link{justify-content:center}
  .stage2-rail{max-height:138px}
  .stage2-console{overflow:visible}
  .stage2-center{padding:14px 12px 16px}
  .stage2-panel{padding:14px 12px 24px}
  .stage2-panel.video-gen{padding:12px}
  .sd-gen-panel{padding:0}
  .stage2-midcards{grid-template-columns:1fr}
  .stage2-clip-head{align-items:flex-start;flex-direction:column;gap:7px}
  .stage2-clip-slug{width:100%;flex-wrap:wrap;line-height:1.35}
  .stage2-clip-name{white-space:normal}
  .stage2-player{border-radius:8px}
  .stage2-player-badge{left:9px;right:9px;bottom:9px;text-align:center}
  .stage2-strip-cell{width:112px}
  .sd-prompt{padding:12px}
  .stage2-assets-lab{align-items:flex-start;flex-direction:column;gap:4px}
  .stage2-assets-lab span{text-align:left}
  .stage2-assets-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .stage2-asset{width:100%;min-width:0}
  .stage2-asset-vis{width:100%;height:auto;aspect-ratio:4/3}
  .stage2-asset-lab{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em}
  .stage2-asset-foot{align-items:flex-start;flex-direction:column;gap:1px}
  .stage2-budget-top{align-items:flex-start;flex-wrap:wrap}
  .stage2-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage2-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage2-ctrls{grid-template-columns:1fr}
  .stage2-lockval{align-items:flex-start;flex-direction:column}
  .stage2-board-scroll{padding:12px}
  .stage2-board-scene-head{align-items:flex-start;flex-direction:column;gap:4px}
  .stage2-board-grid{grid-template-columns:1fr}
}

/* ---- Seedance director controls (the redesigned generation area) ---- */
.sd-prompt{margin:18px 0 12px;border:1px solid var(--line-2);background:var(--bg-2);border-radius:12px;padding:14px 16px 10px;transition:.12s}
.sd-prompt:focus-within{border-color:var(--brand)}
.stage2-prompt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.stage2-prompt-head>div{display:flex;align-items:center;gap:8px;min-width:0}
.sd-recipes{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sd-recipes-lab{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-right:2px}
.sd-recipe{border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1);font-family:var(--f-ui);font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;cursor:pointer;transition:.12s}
.sd-recipe:hover{color:var(--txt-0);border-color:var(--txt-3)}
.sd-recipe.on{background:var(--brand);border-color:var(--brand);color:var(--ink-on-accent,#1a1206)}
.sd-prompt-ta{width:100%;border:0;background:transparent;resize:vertical;color:var(--txt-0);font-family:var(--f-ui);font-size:14px;line-height:1.55;outline:0;min-height:62px}
.sd-prompt-ta::placeholder{color:var(--txt-3)}
.sd-prompt-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.sd-prompt-helper{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--txt-1);font-family:var(--f-ui);font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:6px}
.sd-prompt-helper:hover{background:var(--bg-3);color:var(--brand)}
.sd-prompt-count{font-family:var(--f-mono);font-size:11px;color:var(--txt-3)}

/* Stage v4 — compact Seedance composer, TURN's normal light "production desk" surface
   and brand (amber) accent — no bespoke dark/neon theme of its own. */
/* two columns: the production desk + the docked render-settings panel (or its
   collapsed strip) — mirroring the Writers' Room canvas + inspector split. */
.stage2-console.stage2-console-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;overflow:hidden;background:#fbfaf7}
/* the center column scrolls; its direct children are already width-capped + centered
   by the Stage v3 rules above, so the desk stays centered beside the docked panel */
.stage2-console.stage2-console-composer .stage2-center{overflow:auto;max-width:none;margin:0;padding-bottom:52px}
@media (max-width:900px){
  .stage2-console.stage2-console-composer{display:block;overflow:auto}
  .stage2-console.stage2-console-composer .stage2-center{overflow:visible}
}
.stage2-compose-mode>.stage2-director-prompt,
.stage2-compose-mode>.stage2-assets-lab,
.stage2-compose-mode>.stage2-assets-row,
.stage2-compose-mode>.stage2-assets-warnings{display:none!important}
.stage2-gen-composer{margin:18px auto 18px;max-width:860px;border-radius:16px;background:#fff;color:var(--txt-0);
  border:1px solid var(--line);box-shadow:0 12px 36px rgba(39,35,29,.06);padding:13px 14px 12px}
.stage2-gen-assets{min-height:38px;display:flex;align-items:center;gap:7px;margin:0 0 11px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.stage2-gen-assets::-webkit-scrollbar{height:6px}
.stage2-gen-assets::-webkit-scrollbar-thumb{background:#d9d2c6;border-radius:999px}
.stage2-gen-asset.off{opacity:.42}
.stage2-gen-asset.off:hover{opacity:.75}
.stage2-gen-asset.missing{opacity:.35;border-style:dashed;cursor:default}
.stage2-gen-asset{position:relative;width:72px;height:48px;flex:0 0 72px;border:1px solid var(--line-2);border-radius:9px;padding:0;
  background:var(--bg-2,#faf9f5);color:var(--txt-1);overflow:hidden;cursor:pointer}
.stage2-gen-asset:hover{border-color:var(--brand,#d67e00)}
.stage2-gen-asset img,.stage2-gen-asset video{width:100%;height:100%;object-fit:cover;display:block}
.stage2-gen-asset-text,.stage2-gen-asset-icon{position:absolute;inset:0;display:grid;place-items:center;font:800 21px var(--f-mono);color:var(--txt-2)}
.stage2-gen-asset-check{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.stage2-gen-asset-max{position:absolute;right:3px;bottom:3px;width:16px;height:16px;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s;cursor:zoom-in}
.stage2-gen-asset:hover .stage2-gen-asset-max,.stage2-gen-asset-max:focus{opacity:1}
.stage2-gen-asset-max:hover{background:rgba(0,0,0,.78)}
@media (hover:none){ .stage2-gen-asset-max{opacity:.85} }
/* the asset's @mention handle — connects each chip to the prompt grammar (@Img2 = @Image2) */
.stage2-gen-asset-tag{position:absolute;left:2px;bottom:2px;padding:1px 3px;border-radius:3px;background:rgba(0,0,0,.6);color:#fff;
  font:700 7.5px var(--f-mono);letter-spacing:.02em;pointer-events:none}
/* URL-less or failed-to-load ref tile: kind icon + the asset's own name, so a missing
   sheet reads as "wedding ring — nothing to send yet", never a broken-picture glyph */
.stage2-gen-asset-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--txt-3);padding:2px}
.stage2-gen-asset-ph small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;
  font:600 6.8px/1.25 var(--f-ui);letter-spacing:.01em;text-align:center;word-break:break-word;color:var(--txt-2)}
.stage2-gen-asset-ph.miss,.stage2-gen-asset-ph.miss small{color:var(--neg,#c0395f)}
/* "Reset to script" — appears on the prompt box only once the text diverges from
   the derived screenplay + Art Room assembly */
.stage2-prompt-reset{position:absolute;top:7px;right:7px;z-index:2;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--txt-2);font:650 9.5px var(--f-ui);padding:3px 9px;cursor:pointer;opacity:.9}
.stage2-prompt-reset:hover{color:var(--brand);border-color:var(--brand);opacity:1}
/* auto reference-role preview — appended to the prompt at render, shown read-only here */
.stage2-gen-refs{display:grid;gap:3px;margin-top:10px;border:1px dashed var(--line-2);border-radius:10px;padding:9px 11px;background:var(--bg-2,#faf9f5)}
.stage2-gen-refs b{font:700 9px var(--f-mono);letter-spacing:.1em;color:var(--txt-3)}
.stage2-gen-refs span{font:500 11px/1.45 var(--f-ui);color:var(--txt-1)}
/* soft guidance (not an error) — e.g. native audio on with no sound direction in the prompt */
.stage2-hint{display:flex;align-items:flex-start;gap:7px;border:1px solid var(--accent-line,rgba(214,126,0,.35));background:var(--accent-soft,rgba(214,126,0,.08));
  color:var(--txt-1);border-radius:10px;padding:8px 10px;font-size:11.5px;line-height:1.45}
.stage2-hint svg{flex:0 0 auto;margin-top:1px;color:var(--brand,#d67e00)}

/* the PRIMARY blocker — the one thing stopping Generate. Prominent + actionable in
   place (deliberately not a modal: persistent state, not an event). Clicking the
   blocked Generate button shakes it and scrolls it into view. */
.stage2-blocker{display:flex;align-items:center;gap:8px;border:1.5px solid var(--brand,#d67e00);background:var(--accent-soft,rgba(214,126,0,.1));
  color:var(--txt-0);border-radius:10px;padding:8px 11px;font:600 11.5px/1.4 var(--f-ui);box-shadow:0 4px 14px rgba(214,126,0,.12)}
.stage2-blocker svg{flex:0 0 auto;color:var(--brand,#d67e00)}
.stage2-blocker-text{flex:1;min-width:0}
.stage2-blocker-act{flex:0 0 auto;border:0;border-radius:7px;background:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722);
  font:800 11px var(--f-ui);padding:7px 11px;cursor:pointer;white-space:nowrap}
.stage2-blocker-act:hover:not(:disabled){filter:brightness(1.06)}
.stage2-blocker-act:disabled{opacity:.6;cursor:default}
.stage2-blocker.pulse{animation:stage2BlockerPulse .8s ease}
@keyframes stage2BlockerPulse{
  0%{transform:translateX(0);box-shadow:0 0 0 0 rgba(214,126,0,.5)}
  18%{transform:translateX(-5px)} 36%{transform:translateX(5px)} 54%{transform:translateX(-3px)} 72%{transform:translateX(3px)}
  100%{transform:translateX(0);box-shadow:0 0 0 16px rgba(214,126,0,0)}
}
/* Generate stays clickable while blocked (so it can explain itself) but looks disabled */
.stage2-gen-submit-neon.blocked,.sd-gen-submit.blocked{opacity:.45;filter:saturate(.55);cursor:not-allowed}
.stage2-gen-submit-neon.blocked:hover,.sd-gen-submit.blocked:hover{filter:saturate(.55)}
.stage2-gen-extra{height:30px;min-width:30px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-2,#faf9f5);color:var(--txt-2);font:800 11px var(--f-mono);border:1px solid var(--line-2)}
.stage2-gen-box{position:relative;border-radius:14px;background:var(--bg-2,#faf9f5);box-shadow:inset 0 0 0 1px var(--line-2);padding:14px 14px 12px}
.stage2-gen-promptwrap{position:relative;width:100%}
.stage2-gen-promptwrap .stage2-gen-prompt{width:100%}
.stage2-mention-box{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:6;overflow:hidden}
.stage2-mention-item{display:flex;align-items:center;gap:9px;width:100%;padding:6px 10px;border:0;background:transparent;color:var(--txt-1);font:600 11px var(--f-ui);cursor:pointer;text-align:left}
.stage2-mention-thumb{width:30px;height:30px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:#000;border:1px solid var(--line-2)}
.stage2-mention-thumb.tile{display:inline-flex;align-items:center;justify-content:center;color:var(--txt-2)}
.stage2-mention-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.stage2-mention-main b{font:700 11px var(--f-mono);color:var(--txt-0)}
.stage2-mention-label{font:600 10px var(--f-ui);color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-mention-kind{flex:0 0 auto;font:700 9px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2);border:1px solid var(--line-2);border-radius:99px;padding:2px 7px;background:var(--bg-2)}
.stage2-mention-item.hi,.stage2-mention-item:hover{background:var(--bg-2)}
.stage2-mention-warn{margin-top:6px;font:600 10.5px var(--f-ui);color:var(--brand);line-height:1.4}
.stage2-gen-prompt{width:100%;height:auto;min-height:150px;max-height:none;resize:none;border:0;outline:0;background:transparent;
  color:var(--txt-0);font:500 15px/1.45 var(--f-ui);padding:0 0 9px;overflow:visible}
.stage2-gen-prompt::placeholder{color:var(--txt-3)}
/* the Seedance-style chip editor — a contentEditable div wearing the textarea's clothes */
.stage2-gen-prompt-shell{position:relative;width:100%}
.stage2-gen-prompt-rich{width:100%;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;overflow:visible}
.stage2-gen-prompt-rich:empty::before{content:attr(data-placeholder);color:var(--txt-3);pointer-events:none}
.stage2-chip{display:inline-flex;align-items:center;gap:5px;vertical-align:-4px;margin:0 2px;padding:2px 5px 2px 3px;
  border:1px solid var(--line-2);border-radius:99px;background:var(--bg-3);
  font:700 11px/1.3 var(--f-mono);color:var(--txt-0);user-select:none;white-space:nowrap}
.stage2-chip img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2);background:#000;display:block}
.stage2-chip-tile{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-4);color:var(--txt-2);font-size:10px}
.stage2-chip-caret{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:5px;
  color:var(--txt-2);cursor:pointer;font-size:9px;transition:.1s}
.stage2-chip-caret:hover{background:var(--bg-5);color:var(--txt-0)}
.sdbar{position:relative;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;overflow:visible}
.sdbar-left{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;overflow:visible;padding-bottom:1px}
.sdbar-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sdbar-anchor{position:relative;flex:0 0 auto}
.sdbar-pill{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);
  border-radius:8px;background:#fff;color:var(--txt-0);font:750 12px var(--f-ui);padding:0 11px;white-space:nowrap;cursor:pointer}
.sdbar-pill svg{color:inherit}
.sdbar-pill.model svg:last-child,.sdbar-muted+svg,.sdbar-grid button svg{color:var(--brand,#d67e00)}
.sdbar-pill:hover,.sdbar-anchor.open .sdbar-pill{border-color:var(--brand,#d67e00);background:var(--bg-2);color:var(--txt-0)}
.sdbar-muted{color:var(--txt-2);font-weight:800}
.sdbar-chevron{color:var(--txt-3);font-size:11px;margin-left:1px}
.sdbar-pop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:9991;min-width:230px;padding:8px;border:1px solid var(--line-2);
  border-radius:12px;background:#fff;box-shadow:0 18px 48px rgba(39,35,29,.16);display:grid;gap:4px}
.sdbar-pop-narrow{min-width:190px}
.sdbar-pop-wide{min-width:292px}
.sdbar-pop-format{min-width:340px;gap:10px}
.sdbar-pop-duration{min-width:360px;left:auto;right:0;gap:10px}
.sdbar-pop-mention{min-width:292px;left:auto;right:0;gap:10px}
.sdbar-pop label{font:650 11px var(--f-ui);letter-spacing:0;color:var(--txt-3);padding:0 4px}
.sdbar-option{width:100%;border:0;border-radius:8px;background:transparent;color:var(--txt-1);text-align:left;padding:8px 9px;cursor:pointer}
.sdbar-option:hover:not(:disabled){background:var(--bg-3);color:var(--txt-0)}
.sdbar-option.on{background:var(--bg-2);color:var(--txt-0)}
.sdbar-option.disabled,.sdbar-option:disabled{opacity:.48;cursor:default}
.sdbar-option-main{display:flex;align-items:center;gap:8px}
.sdbar-option-main b{flex:1;min-width:0;font:750 12px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdbar-option-check{font:900 12px var(--f-ui);color:var(--txt-0)}
.sdbar-beta,.sdbar-option-note{display:inline-flex;align-items:center;border:1px solid var(--accent-line,rgba(214,126,0,.3));border-radius:5px;
  background:var(--accent-soft,rgba(214,126,0,.08));color:var(--brand,#d67e00);font:800 8px var(--f-ui);padding:1px 4px}
.sdbar-option-desc{display:block;margin-top:4px;font:500 10.5px/1.35 var(--f-ui);color:var(--txt-2)}
.sdbar-option-note{margin-top:5px;color:var(--txt-3);background:var(--bg-2);border-color:var(--line-2)}
.sdbar-grid{display:grid;gap:4px;background:var(--bg-2);border-radius:11px;padding:6px}
.sdbar-grid.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.sdbar-grid.three{grid-template-columns:repeat(4,minmax(0,1fr))}
.sdbar-grid button{height:40px;border:0;border-radius:9px;background:transparent;color:var(--txt-1);font:750 10.5px var(--f-ui);cursor:pointer}
.sdbar-grid button:hover:not(:disabled){background:#fff}
.sdbar-grid button.on{background:#fff;color:var(--txt-0);box-shadow:0 1px 4px rgba(39,35,29,.12)}
.sdbar-grid button:disabled{opacity:.45;cursor:default}
.sdbar-grid button.plan-locked{color:var(--brand,#d67e00)}
.sdbar-ratio-ico{display:block;width:18px;height:10px;border:1.8px solid currentColor;border-radius:3px;margin:0 auto 4px;box-sizing:border-box}
.sdbar-ratio-ico.ratio-21x9{width:21px;height:9px}
.sdbar-ratio-ico.ratio-16x9{width:18px;height:10px}
.sdbar-ratio-ico.ratio-4x3{width:16px;height:12px}
.sdbar-ratio-ico.ratio-1x1{width:14px;height:14px}
.sdbar-ratio-ico.ratio-3x4{width:12px;height:16px}
.sdbar-ratio-ico.ratio-9x16{width:10px;height:18px}
.sdbar-pop-duration input[type=range]{width:100%;accent-color:var(--brand,#d67e00)}
.sdbar-duration-row{display:flex;justify-content:space-between;color:var(--txt-3);font:700 10px var(--f-mono)}
.sdbar-pop-duration b{justify-self:end;font:800 12px var(--f-ui);color:var(--txt-0)}
.sdbar-at{font:900 15px var(--f-ui)}
.sdbar-mention-list{display:grid;gap:4px;max-height:none;overflow:visible}
.sdbar-mention-list button{display:flex;align-items:center;gap:8px;border:0;border-radius:9px;background:transparent;text-align:left;color:var(--txt-1);padding:6px;cursor:pointer}
.sdbar-mention-list button:hover{background:var(--bg-2);color:var(--txt-0)}
.sdbar-mention-list img,.sdbar-mention-list .tile{width:30px;height:30px;border-radius:7px;object-fit:cover;background:#0d0e12;color:#fff;display:grid;place-items:center;flex:0 0 auto}
.sdbar-mention-list span span{display:grid;gap:1px}
.sdbar-mention-list b{font:800 11px var(--f-mono)}
.sdbar-mention-list small{font:600 10px var(--f-ui);color:var(--txt-2);display:block;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdbar-empty{font:600 12px var(--f-ui);color:var(--txt-2);padding:18px 10px;text-align:center}
.sdbar-addbox{display:grid;gap:5px;padding:6px;border-radius:12px;background:var(--bg-2)}
.sdbar-addbox button{height:32px;border:0;border-radius:8px;background:#fff;color:var(--txt-0);font:650 12px var(--f-ui);cursor:pointer}
.sdbar-addbox button:hover{box-shadow:0 1px 5px rgba(39,35,29,.12)}
.sdbar-cost{display:inline-flex;align-items:center;gap:5px;color:var(--txt-1);font:850 12px var(--f-ui);white-space:nowrap}
.sdbar-cost svg{color:var(--txt-2)}
.sdbar-send{width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--brand,#d67e00);
  color:var(--ink-on-accent,#2c2722);font:900 18px/1 var(--f-ui);cursor:pointer;box-shadow:0 8px 20px rgba(214,126,0,.24)}
.sdbar-send:hover:not(:disabled){filter:brightness(1.05)}
.sdbar-send:disabled{opacity:.52;cursor:default;filter:saturate(.6)}
.sdbar-send.blocked{opacity:.48;cursor:not-allowed}
.sdbar-send.working{font-size:16px}
.stage2-swap-box{max-height:260px;overflow-y:auto}
.stage2-swap-head{font:700 9px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);padding:7px 10px 5px}
.stage2-gen-controls{display:flex;align-items:center;gap:6px;width:calc(100% - 150px);min-width:0;overflow-x:auto;scrollbar-width:thin}
/* pill dropdowns — position:fixed so the row's horizontal scroll can't clip them */
.stage2-gen-pill.open{border-color:var(--brand,#d67e00);color:var(--txt-0)}
.stage2-pill-menu{position:fixed;z-index:9990;min-width:170px;max-width:280px;padding:5px;border:1px solid var(--line-2);border-radius:10px;
  background:#fff;box-shadow:0 14px 38px rgba(39,35,29,.16);display:flex;flex-direction:column;gap:1px}
.stage2-pill-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;border-radius:7px;
  background:transparent;color:var(--txt-1);font:650 12px var(--f-ui);padding:7px 9px;cursor:pointer}
.stage2-pill-opt:hover:not(:disabled){background:var(--bg-3,#f6f2eb);color:var(--txt-0)}
.stage2-pill-opt.on{color:var(--brand,#d67e00);background:var(--accent-soft,rgba(214,126,0,.08))}
.stage2-pill-opt:disabled{opacity:.45;cursor:default}
.stage2-pill-opt small{font:700 8.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line-2);border-radius:4px;padding:1px 4px}
.stage2-pill-menu-h{font:700 9px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);padding:4px 9px 6px}
/* keyboard-highlighted option mirrors the hover style (after .on so it wins) */
.stage2-pill-opt.hi:not(:disabled){background:var(--bg-3,#f6f2eb);color:var(--txt-0)}
/* model menu footer — the selected model's prompt formula */
.stage2-pill-menu-foot{margin-top:4px;padding:7px 9px 6px;border-top:1px solid var(--line-2);font:500 9.5px var(--f-ui);line-height:1.45;color:var(--txt-2)}
.stage2-pill-menu-foot b{color:var(--txt-1)}
/* option internals: main label row + metadata badge chips + one-line description */
.stage2-pill-opt{flex-direction:column;align-items:stretch}
.stage2-pill-opt-main{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stage2-pill-opt-meta{display:flex;gap:5px;margin-top:4px}
.stage2-pill-opt-meta span{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg-2,#faf9f5);
  color:var(--txt-2);font:700 9px var(--f-mono);padding:2px 5px}
.stage2-pill-opt-meta svg{opacity:.75}
.stage2-pill-opt-desc{margin-top:3px;font:500 10.5px/1.4 var(--f-ui);color:var(--txt-2)}
.stage2-pill-opt.on .stage2-pill-opt-desc{color:var(--txt-1)}

/* References / Elements tray — full derived-asset management from the composer */
.stage2-asset-tray{position:fixed;z-index:9990;width:330px;max-height:min(430px,60vh);overflow:auto;padding:8px;border:1px solid var(--line-2);border-radius:12px;
  background:#fff;box-shadow:0 16px 44px rgba(39,35,29,.18);display:flex;flex-direction:column;gap:2px}
.stage2-tray-h{font:700 9px var(--f-mono);letter-spacing:.1em;color:var(--txt-3);padding:3px 5px 7px}
.stage2-tray-row{display:flex;align-items:center;gap:4px}
.stage2-tray-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--txt-1);text-align:left;padding:5px 6px;cursor:pointer}
.stage2-tray-main:hover{background:var(--bg-3,#f6f2eb)}
.stage2-tray-row.on .stage2-tray-main{color:var(--txt-0)}
.stage2-tray-row.missing .stage2-tray-main{opacity:.55;cursor:default}
.stage2-tray-thumb{flex:0 0 34px;width:34px;height:34px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-2,#faf9f5);overflow:hidden;
  display:grid;place-items:center;font:800 14px var(--f-mono);color:var(--txt-2)}
.stage2-tray-thumb img,.stage2-tray-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.stage2-tray-name{flex:1;min-width:0;font:600 11.5px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-tray-main small{flex:0 0 auto;font:700 8px var(--f-mono);color:var(--txt-3)}
.stage2-tray-state{flex:0 0 auto;font:700 8.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);
  border:1px solid var(--line-2);border-radius:4px;padding:1px 4px}
.stage2-tray-row.on .stage2-tray-state{color:var(--brand,#d67e00);border-color:var(--accent-line,rgba(214,126,0,.4))}
.stage2-tray-max{flex:0 0 auto;width:24px;height:24px;border:1px solid var(--line-2);border-radius:6px;background:#fff;color:var(--txt-2);
  display:grid;place-items:center;cursor:zoom-in}
.stage2-tray-max:hover{border-color:var(--brand,#d67e00);color:var(--brand,#d67e00)}
.stage2-tray-empty{padding:10px 8px;font:500 11.5px/1.45 var(--f-ui);color:var(--txt-2)}
.stage2-tray-foot{margin-top:5px;padding:6px 5px 2px;border-top:1px solid var(--line);font:700 9px var(--f-mono);letter-spacing:.06em;color:var(--txt-3)}
.stage2-gen-tool,.stage2-gen-pill,.stage2-gen-batch{height:30px;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  border:1px solid var(--line-2);border-radius:7px;background:#fff;color:var(--txt-1);font:800 12px var(--f-ui);padding:0 11px;white-space:nowrap}
.stage2-gen-tool{width:30px;padding:0;color:var(--txt-2)}
.stage2-gen-tool:hover,.stage2-gen-pill:hover{border-color:var(--brand,#d67e00);color:var(--txt-0)}
.stage2-gen-tool.on,.stage2-gen-pill.on{background:var(--brand,#d67e00);border-color:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722)}
.stage2-gen-pill svg,.stage2-gen-tool svg{color:inherit}
.stage2-gen-batch{padding:0 4px;gap:2px}
.stage2-gen-batch button{width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:inherit;font:900 15px var(--f-ui);cursor:pointer}
.stage2-gen-batch button:hover:not(:disabled){background:rgba(0,0,0,.08)}
.stage2-gen-batch button:disabled{opacity:.35;cursor:default}
.stage2-gen-batch span{min-width:34px;text-align:center}
.stage2-gen-submit-neon{position:absolute;right:13px;bottom:13px;width:122px;height:79px;border:0;border-radius:12px;
  background:var(--brand,#d67e00);color:var(--ink-on-accent,#2c2722);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:900 11px/1.1 var(--f-ui);letter-spacing:.02em;box-shadow:0 8px 22px rgba(214,126,0,.28);cursor:pointer;text-transform:uppercase}
.stage2-gen-submit-neon small{font:800 12px var(--f-mono);letter-spacing:0;text-transform:none;color:var(--ink-on-accent,#2c2722);opacity:.72;max-width:104px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-gen-submit-neon:hover:not(:disabled){filter:brightness(1.05)}
.stage2-gen-submit-neon:active:not(:disabled){filter:brightness(.96)}
.stage2-gen-submit-neon:disabled{opacity:.45;cursor:default;filter:saturate(.55)}
.stage2-gen-notices{display:grid;gap:7px;margin-top:10px}
.stage2-gen-notices .stage2-warn{margin:0;border:1px solid var(--neg-line,rgba(224,105,138,.35));background:var(--neg-soft,rgba(224,105,138,.1));color:var(--neg,#c0395f);border-radius:10px;padding:6px 9px;align-items:center;font-size:11px}
/* warning rows carry their own one-click fix (e.g. credits → plans/top-ups) */
.stage2-warn-text{flex:1;min-width:0}
.stage2-warn-act{flex:0 0 auto;margin-left:auto;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;
  font:750 10.5px var(--f-ui);padding:4px 9px;cursor:pointer;white-space:nowrap}
.stage2-warn-act:hover:not(:disabled){filter:brightness(.93)}
.stage2-warn-act:disabled{opacity:.6;cursor:default}
.stage2-gen-composer.no-credits .stage2-gen-box{box-shadow:inset 0 0 0 1px var(--neg-line,rgba(224,105,138,.35))}
@media (max-width:760px){
  .stage2-gen-promptwrap{width:100%}
  .stage2-gen-prompt{width:100%;padding-bottom:11px}
  .stage2-gen-controls{width:100%;padding-bottom:88px}
  .stage2-gen-submit-neon{left:14px;right:14px;bottom:13px;width:auto;height:68px}
}

/* ---- Stage: VERSIONS view (per-clip take browser) --------------------------- */
.stage2-versions{position:fixed;inset:0;z-index:9994;display:flex;align-items:center;justify-content:center;
  background:rgba(6,7,10,.6);backdrop-filter:blur(5px);padding:26px;animation:appconfirm-fade .14s ease}
.stage2-versions-panel{width:min(1240px,96vw);height:min(760px,90vh);display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.45);overflow:hidden}
.stage2-versions-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-1);flex:0 0 auto}
.stage2-versions-title{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--txt-0)}
.stage2-versions-sub{font-family:var(--f-ui);font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--txt-2);
  max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-versions-count{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--txt-2)}
.stage2-versions-body{flex:1;display:grid;grid-template-columns:290px 1fr 240px;min-height:0}
/* left — cards */
.stage2-versions-list{overflow-y:auto;border-right:1px solid var(--line-1);padding:10px;display:flex;flex-direction:column;gap:8px}
.stage2-vcard{display:flex;gap:9px;align-items:stretch;text-align:left;padding:8px;border-radius:10px;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-1);transition:border-color .12s, background .12s}
.stage2-vcard:hover{border-color:var(--line-2)}
.stage2-vcard.sel{border-color:var(--brand);background:var(--accent-soft, var(--bg-3))}
.stage2-vcard-thumb{width:86px;height:48px;flex:0 0 auto;border-radius:6px;object-fit:cover;background:#05060a;pointer-events:none}
.stage2-vcard-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.stage2-vcard-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stage2-vcard-vno{font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--txt-0)}
.stage2-vbadge{font-family:var(--f-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 6px;border-radius:5px;border:1px solid var(--line-2);color:var(--txt-2)}
.stage2-vbadge.current{color:var(--brand);border-color:var(--accent-line, var(--brand))}
.stage2-vbadge.approved{color:var(--pos);border-color:var(--pos-line, var(--pos))}
.stage2-vbadge.stale{color:var(--neg,#d86b61);border-color:var(--neg,#d86b61)}
.stage2-vbadge.unverified{color:var(--warn,#c69242);border-color:var(--warn,#c69242)}
.stage2-vbadge.override{color:var(--warn,#c69242);border-color:var(--warn,#c69242);background:rgba(198,146,66,.08)}
.stage2-source-warning{margin-bottom:10px;padding:9px 10px;border:1px solid var(--line-2);border-radius:7px;
  font-size:11px;line-height:1.45;color:var(--txt-2)}
.stage2-source-warning.stale{border-color:var(--neg,#d86b61);background:rgba(216,107,97,.08)}
.stage2-source-warning.unverified{border-color:var(--warn,#c69242);background:rgba(198,146,66,.08)}
.stage2-source-warning.override{border-color:var(--warn,#c69242);background:rgba(198,146,66,.08)}
.stage2-vchip{font-family:var(--f-mono);font-size:9px;color:var(--txt-2);background:var(--bg-2);
  border:1px solid var(--line-1);border-radius:5px;padding:1.5px 5px}
.stage2-vcard-chips{display:flex;gap:4px;flex-wrap:wrap}
.stage2-vcard-note{font-size:10.5px;color:var(--txt-1);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-vcard-time{font-family:var(--f-mono);font-size:9px;color:var(--txt-3)}
.stage2-versions-empty{font-size:12px;color:var(--txt-2);padding:18px 8px;text-align:center}
/* center — player + details */
.stage2-versions-viewer{min-width:0;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.stage2-versions-video{width:100%;aspect-ratio:16/9;border-radius:10px;background:#05060a;object-fit:contain}
.stage2-versions-details{display:flex;flex-direction:column;gap:0;border:1px solid var(--line-1);border-radius:10px;
  background:var(--bg-3);padding:10px 12px}
.stage2-versions-dhead{font-family:var(--f-mono);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--txt-2);margin-bottom:6px}
.stage2-versions-dhead.with-action{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.stage2-vcopy{height:24px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--bg-2);color:var(--txt-2);font:700 10px var(--f-ui);cursor:pointer;padding:0 8px;text-transform:none;letter-spacing:0}
.stage2-vcopy:hover{border-color:var(--brand);color:var(--txt-0)}
.stage2-versions-dhead.filters{margin-top:14px}
.stage2-vdetail{display:flex;align-items:baseline;gap:12px;padding:4.5px 0;border-top:1px solid var(--line-1)}
.stage2-vdetail:first-of-type{border-top:none}
.stage2-vdetail-k{flex:0 0 92px;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-2)}
.stage2-vdetail-v{font-size:12px;color:var(--txt-0);min-width:0;overflow-wrap:anywhere}
.stage2-vprompt{margin:0 0 10px;padding:10px 12px;max-height:260px;overflow:auto;white-space:pre-wrap;
  background:var(--bg-2);border:1px solid var(--line-1);border-radius:8px;color:var(--txt-0);
  font:500 11.5px/1.45 var(--f-mono)}
.stage2-vrefs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-bottom:2px}
.stage2-vref{min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:9px;
  border:1px solid var(--line-2);border-radius:9px;background:var(--bg-2);color:var(--txt-1);
  padding:6px;text-align:left;cursor:default}
.stage2-vref img,.stage2-vref video{width:42px;height:32px;border-radius:6px;object-fit:cover;background:#05060a;display:block}
.stage2-vref-tile{width:42px;height:32px;border-radius:6px;display:grid;place-items:center;background:var(--bg-3);
  color:var(--txt-2);font:800 13px var(--f-mono)}
.stage2-vref-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.stage2-vref-copy b{font:750 10.5px var(--f-ui);color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-vref-copy em{font:750 9px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-style:normal}
.stage2-vref-copy small{font:500 9.5px/1.3 var(--f-ui);color:var(--txt-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stage2-vrefs-empty{padding:10px 12px;border:1px solid var(--line-1);border-radius:8px;color:var(--txt-2);font:500 12px/1.45 var(--f-ui);background:var(--bg-2)}
.stage2-vnote-input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line-1);border-radius:7px;
  padding:5px 8px;font-size:12px;color:var(--txt-0);font-family:var(--f-ui)}
.stage2-vnote-input:focus{outline:none;border-color:var(--brand)}
/* right — tools + filters */
.stage2-versions-tools{overflow-y:auto;border-left:1px solid var(--line-1);padding:14px;display:flex;flex-direction:column;gap:7px}
.stage2-vtool{display:block;width:100%;text-align:center;padding:8px 10px;border-radius:9px;font-size:12px;font-weight:600;
  font-family:var(--f-ui);background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-0);cursor:pointer;
  transition:border-color .12s, background .12s;text-decoration:none}
.stage2-vtool:hover:not(:disabled){border-color:var(--brand)}
.stage2-vtool:disabled{opacity:.45;cursor:default}
.stage2-vtool.on{border-color:var(--pos-line, var(--pos));color:var(--pos)}
.stage2-vtool.danger{color:var(--err, #d06552);border-color:var(--line-2)}
.stage2-vtool.danger:hover:not(:disabled){border-color:var(--err, #d06552)}
.stage2-vtool.link{color:var(--txt-1)}
.stage2-vfilter{display:flex;flex-direction:column;gap:4px;font-family:var(--f-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--txt-2)}
.stage2-vfilter select{width:100%;background:var(--bg-3);border:1px solid var(--line-1);border-radius:8px;
  padding:6px 26px 6px 8px;font-size:12px;color:var(--txt-0);font-family:var(--f-ui)}
@media (max-width: 1100px){ .stage2-versions-body{grid-template-columns:240px 1fr 200px} }

/* ---- per-image cost chip on Generate/Re-generate buttons (credits, not deducted yet) ---- */
.nb-cost{display:inline-flex;align-items:center;margin-left:7px;padding:1px 6px;border-radius:6px;
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;letter-spacing:.02em;line-height:1.5;
  background:rgba(0,0,0,.16);color:inherit;opacity:.9;flex:0 0 auto}
.sheet-tools-item .nb-cost,.art-draftall.ghost .nb-cost{background:var(--bg-3);border:1px solid var(--line-1);opacity:.8}

/* the model badges are now PICKERS (New Story header + Art Room agent panels) —
   the select inherits the amber badge look; the badge label wraps it */
.ns-model-sel,.ag-runner-model-sel{appearance:none;-webkit-appearance:none;border:none;background:transparent;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0 12px 0 0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M1 1l3 3 3-3' stroke='%232c2722' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right center}
.ag-runner-model-sel{font-family:var(--f-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-on-accent,#2c2722);background-color:var(--pos);padding:2px 16px 2px 7px;border-radius:5px;white-space:nowrap;background-position:right 5px center}
.ns-model-sel:disabled,.ag-runner-model-sel:disabled{opacity:.7;cursor:default}

/* New Story: auto-picked shape note + the writer's own logline marker */
.ns-autoshape{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;border-radius:9px;
  background:var(--accent-soft, var(--bg-3));border:1px solid var(--accent-line, var(--line-2));
  font-size:12px;color:var(--txt-1);line-height:1.4}
.ns-autoshape b{color:var(--txt-0);font-weight:600}
.ns-autoshape .ns-btn.link{margin-left:auto;flex:0 0 auto}
.ns-cand-mine{flex:0 0 auto;margin-left:8px;font-family:var(--f-mono);font-size:8.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--pos);border:1px solid var(--pos-line, var(--pos));border-radius:5px;padding:1.5px 6px}

/* ---- Stage ▸ VERSIONS tab (the modal promoted to an in-room view) ---- */
.stage2-vers{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line-1);border-radius:12px;overflow:hidden}
.stage2-vers .stage2-versions-body{grid-template-columns:300px 1fr 260px}
/* the active-engine capability card (mockup's top-right) */
.stage2-vers-model{border:1px solid var(--line-1);border-radius:10px;background:var(--bg-3);
  padding:11px 12px;margin-bottom:12px}
.stage2-vers-model-t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;color:var(--txt-0);margin-bottom:8px}
.stage2-vers-model-badge{margin-left:auto;font-family:var(--f-mono);font-size:9px;color:var(--txt-2);
  border:1px solid var(--line-1);border-radius:5px;padding:1.5px 6px}
.stage2-vers-model-caps{display:flex;flex-direction:column;gap:5px}
.stage2-vers-cap{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--txt-1);line-height:1.35}
.stage2-vers-cap-dot{flex:0 0 auto;width:6px;height:6px;border-radius:2px;background:var(--brand);
  transform:rotate(45deg);margin-top:4px}
@media (max-width: 1200px){ .stage2-vers .stage2-versions-body{grid-template-columns:250px 1fr 220px} }

/* ---- Stage ▸ TIMELINE tab (film assembly) ---- */
.stage2-tl,.stage2-au{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:12px;
  background:var(--bg-2);border:1px solid var(--line-1);border-radius:12px;overflow:hidden auto;padding-bottom:12px}
.stage2-tl-player{margin:0 14px;border-radius:10px;overflow:hidden;background:#05060a;aspect-ratio:16/9;max-height:52vh;
  display:flex;align-items:center;justify-content:center}
.stage2-tl-player video{width:100%;height:100%;object-fit:contain;background:#05060a}
.stage2-tl-empty{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--txt-2);font-size:13px;padding:30px}
.stage2-tl-strip{display:flex;gap:14px;overflow-x:auto;padding:2px 14px 6px}
.stage2-tl-scene{flex:0 0 auto}
.stage2-tl-scene-lab{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-2);margin:0 0 6px 2px;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.stage2-tl-clips{display:flex;gap:8px}
.stage2-tl-clip{position:relative;flex:0 0 auto;width:132px;border-radius:9px;overflow:hidden;cursor:pointer;
  border:2px solid var(--line-1);background:var(--bg-3);padding:0;text-align:left;transition:border-color .12s}
.stage2-tl-clip img{display:block;width:100%;height:74px;object-fit:cover}
.stage2-tl-clip-blank{display:block;width:100%;height:74px;background:var(--bg-4,var(--bg-3))}
.stage2-tl-clip.on{border-color:var(--brand)}
.stage2-tl-clip.missing{opacity:.55}
.stage2-tl-clip-lab{display:block;font-family:var(--f-mono);font-size:9px;color:var(--txt-1);padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage2-tl-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--txt-3)}
.stage2-tl-dot.ok{background:var(--pos)}

/* ---- Stage ▸ AUDIO tab (post-mix preview) ---- */
.stage2-au-player{margin:0 14px;border-radius:10px;overflow:hidden;background:#05060a;aspect-ratio:16/9;max-height:44vh;
  display:flex;align-items:center;justify-content:center}
.stage2-au-player video{width:100%;height:100%;object-fit:contain;background:#05060a}
.stage2-au-scene{margin-left:auto;background:var(--bg-3);border:1px solid var(--line-1);border-radius:8px;
  padding:6px 26px 6px 9px;font-size:12px;color:var(--txt-0);max-width:280px}
.stage2-au-lanes{display:flex;flex-direction:column;gap:8px;margin:0 14px}
.stage2-au-lane{border:1px solid var(--line-1);border-radius:10px;background:var(--bg-3);padding:9px 12px}
.stage2-au-lane-h{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.stage2-au-lane-h b{font-size:12px;font-weight:650;color:var(--txt-0);flex:0 0 auto}
.stage2-au-lane-h input[type=range]{flex:0 0 130px;margin-left:auto;accent-color:var(--brand)}
.stage2-au-mute{border:1px solid var(--line-2);background:transparent;color:var(--txt-2);border-radius:6px;
  font-size:10px;padding:2px 7px;cursor:pointer}
.stage2-au-mute.on{color:var(--err,#d06552);border-color:var(--err,#d06552)}
.stage2-au-blocks{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.stage2-au-block{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-1);background:var(--bg-2);
  border:1px solid var(--line-1);border-radius:6px;padding:3px 8px;white-space:nowrap}
.stage2-au-block.on{border-color:var(--brand);color:var(--txt-0)}
.stage2-au-block.line{border-color:var(--accent-line,var(--line-2))}
.stage2-au-block.bed{border-color:var(--pos-line,var(--pos));color:var(--txt-0)}
.stage2-au-block.missing{opacity:.5}
.stage2-au-note{font-size:11px;color:var(--txt-2)}
.stage2-au-note.foot{margin:0 14px;padding:9px 12px;border:1px dashed var(--line-2);border-radius:9px;line-height:1.45}
.stage2-au-import{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--brand);border:1px solid var(--accent-line,var(--brand));border-radius:6px;padding:3px 9px;cursor:pointer}

/* ── Undo/Redo change flash — the blocks a version swap actually changed pulse
      briefly so the writer sees WHAT the undo did (and mobile scrolls to it).
      Accent-tinted and fading to transparent, so it reads in both themes. ── */
.spb-flash{ animation: spbFlash 2.5s ease-out both; border-radius:4px; }
@keyframes spbFlash{
  0%   { background: color-mix(in oklab, var(--accent) 26%, transparent);
         box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 16%, transparent); }
  55%  { background: color-mix(in oklab, var(--accent) 18%, transparent);
         box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 10%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 5px transparent; }
}

/* prop-reference chips on the character card (worn = auto, pinned = removable) */
.char-refprops{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:0}
.char-refprops .prop-scene-chip{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.char-refprops .prop-select{font-size:11px;padding:2px 6px}

/* "Update a prop" chips inside the sheet-edit panel */
.sheet-edit-props{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.sheet-edit-props-lab{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-2)}
.sheet-edit-props .prop-scene-chip{cursor:pointer}
.sheet-edit-props .prop-scene-chip:disabled{opacity:.5;cursor:default}

/* "Update a prop" chips inside the sheet-edit panel */
.sheet-edit-props{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.sheet-edit-props-lab{font-family:var(--f-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-2)}
.sheet-edit-props .prop-scene-chip{cursor:pointer}
.sheet-edit-props .prop-scene-chip:disabled{opacity:.5;cursor:default}

/* beat-deletion undo chip — accent-tinted so it reads as the recovery action */
.beat-undo-btn{background:var(--accent-soft);border-color:var(--accent-line,var(--accent));color:var(--txt-0)}
.beat-undo-btn:hover{background:var(--accent-soft);filter:brightness(1.06)}

/* ── fullscreen viewer VERSION STRIP — filmstrip of the sheet's earlier versions,
      horizontally centered on its own row between the image and the download bar;
      no arrow buttons (thumb clicks + ←/→ keys navigate) ── */
.lb-strip{position:absolute;bottom:66px;left:0;right:0;z-index:3;display:flex;justify-content:center;padding:0 24px;pointer-events:none}
.lb-strip-row{display:flex;gap:6px;overflow-x:auto;max-width:min(92vw,100%);padding:6px;margin:0 auto;pointer-events:auto;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lb-panel.has-strip .lb-imgwrap{padding-bottom:136px}
.lb-thumb{border:2px solid transparent;border-radius:8px;padding:0;background:var(--bg-4);cursor:pointer;
  width:64px;height:44px;flex-shrink:0;overflow:hidden;transition:.12s}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb:hover{border-color:var(--line-2)}
.lb-thumb.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent)}

/* edit-panel IMAGE INPUTS — removable thumbs attached to the next Apply edit;
   the square "+" beside Undo opens the input-source menu (upload / prop sheets) */
.sheet-edit-refs{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.sheet-edit-addwrap{position:relative;display:inline-flex}
.sheet-edit-addref{width:30px;height:30px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:8px;background:var(--bg-4);color:var(--txt-1);
  font-size:16px;line-height:1;cursor:pointer;padding:0;transition:.12s}
.sheet-edit-addref:hover:not(:disabled),.sheet-edit-addref.on{background:var(--bg-5);color:var(--txt-0);border-color:var(--accent-line,var(--accent))}
.sheet-edit-addref:disabled{opacity:.5;cursor:default}
.sheet-edit-addmenu{z-index:60;min-width:220px;max-width:280px;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:4px;display:flex;flex-direction:column}
.sheet-edit-addnote{font-size:11px;color:var(--txt-2);padding:7px 9px;line-height:1.4}
.sheet-edit-refthumb{position:relative;width:52px;height:36px;border-radius:6px;overflow:hidden;
  border:1px solid var(--line-2);flex-shrink:0;background:var(--bg-4)}
.sheet-edit-refthumb img{width:100%;height:100%;object-fit:cover;display:block}
.sheet-edit-refx{position:absolute;top:0;right:0;width:15px;height:15px;line-height:13px;text-align:center;
  border:0;border-radius:0 0 0 6px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;cursor:pointer;padding:0}

/* "Appears in" chips — single-line pager: ‹ › step 4 chips at a time */
.sheet-scenes{flex-wrap:nowrap;overflow:hidden}
.sheet-scenes-nav{border:1px solid var(--line-2);background:var(--bg-4);color:var(--txt-1);border-radius:6px;
  width:18px;height:18px;line-height:1;font-size:12px;padding:0;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;transition:.12s}
.sheet-scenes-nav:hover:not(:disabled){background:var(--bg-5);color:var(--txt-0)}
.sheet-scenes-nav:disabled{opacity:.3;cursor:default}
.sheet-scenes-count{font-family:var(--f-mono);font-size:9px;color:var(--txt-2);letter-spacing:.03em;white-space:nowrap;flex-shrink:0}

/* props/locations scene rows share the single-line pager behavior */
.prop-scenes{flex-wrap:nowrap;overflow:hidden}

/* the "+" input-source menu — PORTALED to <body> (the card's paint containment traps
   fixed children), centered over a light backdrop, above everything */
.sheet-edit-addoverlay{position:fixed;inset:0;z-index:1000;background:transparent}
.sheet-edit-addtitle{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-2);padding:6px 9px 4px}

/* localized selection editor — opened from a generated image's … menu.
   Fullscreen like the normal image preview: the controls float over the image
   instead of shrinking the edit target into a small modal. */
.region-edit-overlay{position:fixed;inset:0;z-index:1250;background:rgba(8,8,10,.94);display:block;padding:0}
.region-edit-panel{position:fixed;inset:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:hidden;display:block}
.region-edit-head{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:3;min-width:190px;max-width:min(620px,68vw);
  height:34px;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 44px 0 18px;border:1px solid rgba(255,255,255,.08);
  background:rgba(15,15,18,.86);border-radius:999px;box-shadow:0 10px 34px rgba(0,0,0,.42)}
.region-edit-head .ag-x{position:absolute;right:7px;top:5px;width:24px;height:24px;border-radius:50%;color:#d7d7dd;background:transparent;border:0}
.region-edit-head .ag-x:hover{background:rgba(255,255,255,.1);color:#fff}
.region-edit-title{font:750 12px/1.1 var(--f-ui);color:#fff;white-space:nowrap}
.region-edit-sub{display:inline;margin:0 0 0 6px;font:700 10px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:#aaa;max-width:32vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.region-edit-body{position:absolute;inset:0;display:block;min-height:0}
.region-edit-canvas{position:absolute;inset:58px 24px 24px;display:grid;place-items:center;overflow:hidden;background:transparent}
.region-edit-imagebox{position:relative;display:inline-block;max-width:96vw;max-height:calc(100vh - 96px);cursor:crosshair;touch-action:none}
.region-edit-imagebox img{max-width:96vw;max-height:calc(100vh - 96px);display:block;object-fit:contain;user-select:none;-webkit-user-drag:none;border-radius:8px;box-shadow:0 20px 70px rgba(0,0,0,.58)}
.region-edit-rect{position:absolute;border:2px solid var(--accent);background:color-mix(in oklab, var(--accent) 16%, transparent);
  box-shadow:0 0 0 9999px rgba(0,0,0,.36),0 0 0 1px rgba(255,255,255,.5) inset;border-radius:5px;pointer-events:none}
.region-edit-hint{position:absolute;left:14px;bottom:14px;padding:6px 9px;border-radius:8px;background:rgba(10,10,12,.74);color:#fff;
  font:650 11px/1 var(--f-ui);pointer-events:none}
.region-edit-side{position:fixed;z-index:4;right:26px;top:72px;width:330px;max-height:calc(100vh - 112px);
  border:1px solid var(--line-2);border-radius:14px;padding:14px;background:color-mix(in oklab, var(--bg-1) 92%, transparent);
  box-shadow:0 18px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px;overflow:auto}
.region-edit-dragbar{display:flex;align-items:center;gap:7px;margin:-3px -3px 0;padding:4px 3px 2px;color:var(--txt-2);
  font:700 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;cursor:grab;user-select:none;touch-action:none}
.region-edit-dragbar:active{cursor:grabbing;color:var(--txt-0)}
.region-edit-dragbar svg{opacity:.7}
.region-edit-field{display:flex;flex-direction:column;gap:7px}
.region-edit-field>span,.region-edit-refs-head{font:700 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2)}
.region-edit-field textarea{min-height:128px;resize:vertical;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-1);
  color:var(--txt-0);font:500 13px/1.45 var(--f-ui);padding:10px;outline:none}
.region-edit-field textarea:focus{border-color:var(--accent)}
.region-edit-coords{font:600 10.5px/1.4 var(--f-mono);color:var(--txt-2);padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg-1)}
.region-edit-ref-actions{display:flex;gap:8px}
.region-action{justify-content:center;border:1px solid var(--line-2);background:var(--bg-1)}
.region-props{display:grid;grid-template-columns:1fr;gap:6px;max-height:190px;overflow:auto;padding-right:2px}
.region-prop{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--bg-1);color:var(--txt-1);
  border-radius:8px;padding:6px 8px;font:650 11.5px/1.2 var(--f-ui);cursor:pointer;text-align:left;min-width:0}
.region-prop:hover{border-color:var(--accent-line,var(--accent));color:var(--txt-0);background:var(--bg-3)}
.region-prop img{width:34px;height:26px;object-fit:cover;border-radius:5px;border:1px solid var(--line);flex:0 0 auto}
.region-prop span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.region-ref-list{margin-top:0}
.region-edit-note{font:500 11px/1.45 var(--f-ui);color:var(--txt-2);border-top:1px solid var(--line);padding-top:10px}
.region-edit-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:auto}
.region-prop-select{width:100%;height:36px}
.region-text-input{width:100%;height:36px}
.prop-sheet-ref-panel .region-edit-body{display:grid;grid-template-columns:minmax(360px,1fr) 330px;gap:18px;padding:72px 26px 26px}
.prop-sheet-ref-panel .region-edit-canvas{position:relative;inset:auto;display:block;overflow:auto;background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:12px}
.prop-sheet-ref-panel .region-edit-side{position:relative;inset:auto;width:auto;max-height:none}
.prop-ref-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.prop-ref-pick{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);padding:7px;text-align:left;color:var(--txt-1);cursor:pointer;transition:.12s}
.prop-ref-pick:hover{border-color:var(--accent-line,var(--accent));background:var(--bg-3)}
.prop-ref-pick.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.prop-ref-pick img{width:58px;height:42px;border-radius:7px;object-fit:cover;background:var(--bg-4)}
.prop-ref-pick span{min-width:0;display:flex;flex-direction:column;gap:3px}
.prop-ref-pick b{font:700 12px/1.2 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt-0)}
.prop-ref-pick em{font:700 9px/1 var(--f-mono);font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3)}
.region-edit-empty{height:100%;min-height:260px;display:grid;place-items:center;text-align:center;color:var(--txt-3);font:600 12px/1.4 var(--f-ui)}
.region-edit-empty p{margin:8px 0 0}
@media (max-width:900px){
  .region-edit-head{max-width:78vw}
  .region-edit-canvas{inset:54px 10px 46vh}
  .region-edit-imagebox,.region-edit-imagebox img{max-width:96vw;max-height:calc(54vh - 64px)}
  .region-edit-side{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:42vh;border-radius:12px}
  .prop-sheet-ref-panel .region-edit-body{display:block;padding:56px 10px 10px}
  .prop-sheet-ref-panel .region-edit-canvas{height:42vh;margin-bottom:10px}
  .prop-sheet-ref-panel .region-edit-side{max-height:42vh;overflow:auto}
}

/* Render style row: label + dropdown INLINE on one line — the trigger flexes to the
   remaining width (smaller font, ellipsized label) instead of wrapping below */
.char-style-row{flex-wrap:nowrap}
.char-style-row .char-style-lab{flex-shrink:0}
.char-style-row .char-style-pick{flex:1;min-width:0}
.char-style-row .rs-picker{flex:1;min-width:0;display:flex}
.char-style-row .rs-trigger{width:100%;min-width:0;font-size:11.5px;height:28px}
.char-style-row .rs-trigger-lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.char-style-row .char-style-count{flex-shrink:0}

/* aspect picker on two rows (classics / new square+portrait+landscape) */
.nb-seg-rows{display:flex;flex-direction:column;gap:4px}
/* fullscreen viewer: Remaster button sits beside Download, accent-tinted */
.lb-remaster{background:var(--accent-soft);color:var(--txt-0);border:1px solid var(--accent-line,var(--accent))}
.lb-remaster:disabled{opacity:.5;cursor:default}

.prop-consistency-refs{margin:10px 0 12px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}
.prop-consistency-head{display:flex;align-items:center;gap:7px;margin-bottom:8px;font:700 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.prop-consistency-head svg{color:var(--accent)}
.prop-consistency-head em{margin-left:auto;font-style:normal;color:var(--accent)}
.prop-consistency-row{display:flex;gap:7px;overflow-x:auto;padding-bottom:1px}
.prop-consistency-thumb{position:relative;display:inline-flex;flex:0 0 auto;width:58px;height:42px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-1);overflow:hidden}
.prop-consistency-thumb img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.prop-consistency-thumb button{position:absolute;right:2px;top:2px;width:16px;height:16px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(10,10,12,.72);color:#fff;font:700 11px/1 var(--f-ui);cursor:pointer}
.prop-consistency-thumb button:hover{background:var(--neg);color:#fff}

/* per-card QA report modal (the card's "QA check" button) — neutral tokens
   only, so it holds up in both themes */
.qa-modal{width:min(600px,92vw);max-height:86vh;overflow:auto;background:var(--bg-1);border:1px solid var(--line-2);
  border-radius:18px;padding:0 0 16px;box-shadow:0 8px 24px rgba(0,0,0,.18), 0 32px 90px rgba(0,0,0,.5)}
.qa-modal>*:not(.qa-head){margin-left:20px;margin-right:20px}
/* header = its own soft band, verdict-tinted orb with a halo ring */
.qa-head{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:16px 20px;
  background:linear-gradient(180deg,var(--bg-2),transparent);border-bottom:1px solid var(--line-1,var(--line-2))}
.qa-head .ag-x{flex-shrink:0}
.qa-orb{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--txt-1);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--line-2) 26%, transparent)}
.qa-orb.pass{background:var(--pos-soft);border-color:var(--pos-line);color:var(--pos);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pos) 12%, transparent)}
.qa-orb.major{background:var(--neg-soft);border-color:var(--neg-line);color:var(--neg);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--neg) 12%, transparent)}
.qa-head-txt{flex:1;min-width:0}
.qa-title{font-family:var(--f-display);font-size:16px;font-weight:600;color:var(--txt-0);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-sub{font-size:11px;color:var(--txt-2);margin-top:2px}
.qa-badge{font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;flex-shrink:0;border:1px solid var(--line-2)}
.qa-badge.pass{background:var(--pos-soft);color:var(--pos);border-color:var(--pos-line)}
.qa-badge.minor{background:var(--bg-3);color:var(--txt-1)}
.qa-badge.major{background:var(--neg-soft);color:var(--neg);border-color:var(--neg-line)}
.qa-sec{margin:14px 0}
.qa-sec-lab{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-2);margin-bottom:8px}
/* each finding = its own soft row-card with a severity edge */
.qa-item{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--line-1,var(--line-2));border-left:3px solid var(--line-2)}
.qa-item + .qa-item{margin-top:6px}
.qa-item:has(.qa-dot.major){border-left-color:var(--neg)}
.qa-item:has(.qa-dot.minor){border-left-color:var(--pos)}
.qa-item:has(.qa-dot.invent){border-left-style:dashed}
.qa-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px;background:var(--txt-2)}
.qa-dot.major{background:var(--neg);box-shadow:0 0 0 3px color-mix(in srgb, var(--neg) 15%, transparent)}
.qa-dot.minor{background:var(--pos);opacity:.75;box-shadow:0 0 0 3px color-mix(in srgb, var(--pos) 12%, transparent)}
.qa-dot.invent{background:transparent;border:1.5px dashed var(--txt-2);width:8px;height:8px}
.qa-item-body{flex:1;min-width:0}
.qa-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
.qa-where{font-family:var(--f-mono);font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:5px;padding:2px 7px;color:var(--txt-1)}
.qa-what{font-size:12.5px;line-height:1.55;color:var(--txt-0)}
.qa-clean{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--pos);
  background:var(--pos-soft);border:1px solid var(--pos-line);border-radius:12px;padding:12px 14px;margin:12px 0}
/* recommendation = the verdict banner, tinted by outcome */
.qa-rec{display:flex;align-items:baseline;gap:10px;border-radius:12px;padding:11px 14px;margin:16px 0 4px;
  background:var(--bg-2);border:1px solid var(--line-2)}
.qa-rec.regenerate{background:var(--neg-soft);border-color:var(--neg-line)}
.qa-rec.regenerate .qa-rec-verb{color:var(--neg)}
.qa-rec.keep{background:var(--pos-soft);border-color:var(--pos-line)}
.qa-rec.keep .qa-rec-verb{color:var(--pos)}
.qa-rec-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);flex-shrink:0}
.qa-rec-verb{font-size:13px;font-weight:700;color:var(--txt-0)}
.qa-apply-btn{margin-top:8px;display:inline-flex;align-items:center;gap:6px}
.qa-apply-row .ns-btn{height:34px;padding:0 14px;border-radius:9px;margin-top:0}
/* beat lanes on the Shots tab — the beat is the dramatic unit, its shots are coverage */
.beat-lane{margin:0 0 18px;padding:10px 12px 2px;border:1px solid var(--line);border-radius:12px;background:var(--bg-1)}
.beat-lane.turn{border-color:oklch(0.62 0.16 45 / .5)}
.beat-lane-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 10px}
.beat-lane-no{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-1);
  padding:2px 8px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg-3)}
.beat-lane-verbs{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.beat-lane-turn{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:oklch(0.7 0.14 45);border:1px solid oklch(0.62 0.16 45 / .45);border-radius:999px;padding:1px 8px}
[data-theme="light"] .beat-lane-turn{color:oklch(0.5 0.15 45)}
.beat-lane-chg{font-family:var(--f-mono);font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:5px;border:1px solid var(--line-2);color:var(--txt-2)}
.beat-lane-chg.pos{color:oklch(0.62 0.13 150);border-color:oklch(0.62 0.13 150 / .4)}
.beat-lane-chg.neg{color:oklch(0.6 0.16 30);border-color:oklch(0.6 0.16 30 / .4)}
[data-theme="light"] .beat-lane-chg.pos{color:oklch(0.45 0.13 150)}
[data-theme="light"] .beat-lane-chg.neg{color:oklch(0.48 0.16 30)}
.beat-lane-count{font-family:var(--f-mono);font-size:9.5px;color:var(--txt-3)}
.beat-lane-acts{margin-left:auto;display:inline-flex;gap:6px}
.beat-lane-btn{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:7px;border:1px solid var(--line-2);
  background:var(--bg-3);color:var(--txt-1);font-family:var(--f-ui);font-size:11px;font-weight:600;cursor:pointer}
.beat-lane-btn:hover{border-color:var(--pos);color:var(--pos)}
.beat-lane-btn.ghost{background:transparent}
.beat-lane-btn:disabled{opacity:.5;cursor:default}
.beat-lane .sheet-grid{margin-bottom:8px}
/* the beat's shots as a horizontal strip — ‹ › arrows page one card at a time */
.beat-lane-strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.beat-shot-cell{flex:0 0 clamp(320px, 30vw, 430px);scroll-snap-align:start;min-width:0}
@media (max-width:700px){ .beat-shot-cell{flex-basis:86vw} }
.beat-lane{position:relative}
.beat-lane-side{position:absolute;top:calc(50% + 16px);transform:translateY(-50%);z-index:6;
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--bg-1);color:var(--txt-1);cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.10)}
.beat-lane-side:hover{border-color:var(--pos);color:var(--pos)}
.beat-lane-side.prev{left:-6px}
.beat-lane-side.next{right:-6px}
/* beat pager rides the scene-pager base styles; only sizing differs */
/* (beat-pager bar removed 2026-07-19 — the lane's side arrows step beats now) */
.beat-lane-side:disabled{opacity:.35;cursor:default}
.beat-lane-side:disabled:hover{border-color:var(--line-2);color:var(--txt-2)}

/* MICRO-BEAT LAYER — protect line + numbered rail of the beat's discrete actions */
.beat-protect{display:flex;align-items:center;gap:6px;margin:2px 0 8px;font-size:11.5px;color:var(--txt-1);line-height:1.4}
.beat-protect svg{color:var(--pos);flex:0 0 auto}
.beat-protect b{color:var(--pos);font-weight:700}
/* QA check while the card has no image yet (Lookbook) — locked with a reason, not missing */
.char-draft-btn.qa-empty{opacity:.45;cursor:not-allowed}

/* QA modal: Apply-to-spec + Edit-current-image side by side */
.qa-apply-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.qa-apply-row .qa-apply-btn{margin-top:0}

/* REDRAFT IN PROGRESS — the whole canvas says so, not just the button */
.beat-grid-wrap{position:relative}
.beat-grid-wrap.drafting .beat-card-grid{opacity:.32;filter:saturate(.5);pointer-events:none;transition:opacity .25s}
.beat-redraft-note{position:sticky;top:12px;z-index:8;display:flex;align-items:center;gap:12px;
  margin:0 auto 14px;width:min(560px,94%);padding:13px 16px;border-radius:14px;
  background:var(--bg-1);border:1px solid var(--pos-line);
  box-shadow:0 12px 42px rgba(0,0,0,.28)}
.beat-redraft-note .ns-spin{flex:0 0 auto}
.brn-t{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--txt-0)}
.brn-d{font-size:11.5px;line-height:1.5;color:var(--txt-2);margin-top:2px}
/* SHARED ART-ROOM PROGRESS CARD — the same spinner + bold title + reassuring subtitle
   as the shots re-design note, so every tab-level "MUSE is working" state reads alike. */
.art-progress-card{display:flex;align-items:center;gap:12px;width:min(560px,100%);
  margin:2px 0 6px;padding:13px 16px;border-radius:14px;background:var(--bg-1);
  border:1px solid var(--pos-line);box-shadow:0 12px 42px rgba(0,0,0,.28)}
.art-progress-card .ns-spin{flex:0 0 auto}
.apc-txt{min-width:0}
.apc-t{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--txt-0)}
.apc-d{font-size:11.5px;line-height:1.5;color:var(--txt-2);margin-top:2px}
.apc-cancel{margin-left:auto;flex:0 0 auto}

/* ONE CARD PER BEAT (2026-07-21): first-shot keyframe as the card image, Protect,
   micro-beat checklist, compact shot rows expanding into the full editor */
.beat-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:18px}
.beat-card{border:1px solid var(--line);border-radius:12px;background:var(--bg-1);overflow:hidden;
  display:flex;flex-direction:column;align-self:start}
.beat-card.turn{border-color:var(--pos-line)}
.beat-card-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--bg-3);cursor:zoom-in}
.beat-card-img.ph{display:grid;place-items:center;cursor:default;padding:0 34px;text-align:center;
  color:var(--txt-3);font-family:var(--f-mono);font-size:10.5px;line-height:1.6;border-bottom:1px dashed var(--line-2)}
.beat-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:11px}
.beat-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.beat-card-head .bc-add{margin-left:auto}
.bc-sec-lab{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:5px}
/* the beat itself: driver action | reactor reaction (from the Writers' Room map) */
.bc-beat{border:1px solid var(--line-1,var(--line-2));border-radius:10px;background:var(--bg-2);padding:9px 11px}
.bc-beat-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.bc-beat-name{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.bc-beat-verb{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-0);margin:2px 0 3px}
.bc-beat-d{font-size:11px;line-height:1.5;color:var(--txt-2)}
@media (max-width:420px){ .bc-beat-grid{grid-template-columns:1fr} }
.bc-micro-row{display:flex;align-items:baseline;gap:8px;padding:2.5px 0;font-size:11.5px;line-height:1.5;color:var(--txt-1)}
.bc-micro-t{flex:1;min-width:0}
.bc-micro-row.uncovered .bc-micro-t{color:var(--alert)}
.bc-micro-none{flex:0 0 auto;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--alert);border:1px solid var(--alert);border-radius:8px;padding:1px 7px;cursor:help}
/* coverage NOT MAPPED (pre-micro-beat draft) — neutral, claims neither way */
.bc-micro-nomap-note{font-size:10.5px;line-height:1.5;color:var(--txt-3);margin:0 0 5px;cursor:help}
.bc-micro-unknown{flex:0 0 auto;font-family:var(--f-mono);font-size:10px;color:var(--txt-3);padding:1px 7px;cursor:help}
.bc-micro-shots{flex:0 0 auto;display:inline-flex;gap:4px}
.bc-micro-shotlink{border:1px solid var(--line-2);background:var(--bg-3);color:var(--txt-1);
  font-family:var(--f-mono);font-size:9.5px;font-weight:700;border-radius:6px;padding:1px 7px;cursor:pointer;transition:.12s}
.bc-micro-shotlink:hover{border-color:var(--pos);color:var(--pos)}
/* story-covered but not described in any covering shot's action — frame would only imply it */
.bc-micro-implied{flex:0 0 auto;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warn,#c98a1b);border:1px dashed var(--warn,#c98a1b);
  border-radius:6px;padding:1px 6px;cursor:help;opacity:.85}
/* the side of a beat's verb pair that carries the beat's charge */
.beat-lane-verbs .bv.lead{font-weight:800;color:var(--txt-1)}
/* drift flag on the shot card: covered-micro-beat names missing from the action */
.shot-dropped{margin:2px 0 8px;padding:7px 10px;border:1px dashed var(--warn,#c98a1b);
  border-radius:9px;background:var(--warn-soft,rgba(201,138,27,.08));color:var(--txt-2);
  font-size:11.5px;line-height:1.5;cursor:help}
.shot-dropped b{color:var(--txt-1)}
/* scene header: shots-per-beat distribution strip */
.ssx-beat-strip{display:flex;gap:2px;margin-top:6px;max-width:340px}
.ssx-beat-seg{flex:1 1 0;min-width:10px;text-align:center;font-family:var(--f-mono);
  font-size:8.5px;line-height:1;padding:2px 0;color:var(--txt-3);background:var(--bg-3);
  border-radius:3px;cursor:help;overflow:hidden}
.ssx-beat-seg:hover{background:var(--pos-soft);color:var(--pos)}
.bc-shots{display:flex;flex-direction:column;gap:6px}
.bc-shot-row{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid var(--line-2);
  border-radius:9px;background:var(--bg-2);cursor:pointer;transition:.12s;min-width:0}
.bc-shot-row:hover{border-color:var(--line-3);background:var(--bg-3)}
/* open row: square off the bottom + drop the seam border so the expanded editor
   below reads as the SAME container (user ruling 2026-08-01).
   2px all around (user ruling 2026-08-07: full orange frame, not just the top);
   padding compensates the extra border px so content doesn't shift. */
.bc-shot-row.on{border-width:2px;border-color:var(--pos);border-bottom-color:transparent;
  border-radius:12px 12px 0 0;padding:5px 8px}
/* "start here" guidance: the next frame in the rolling chain */
.bc-shot-row.next{border-color:var(--line-2);background:var(--bg-2)}
/* rendering RIGHT NOW in the chain — static accent only */
.bc-shot-row.live{border-color:var(--line-2);background:var(--bg-2)}
/* open + live/next: selected always wins; only unselected rows stay grey */
.bc-shot-row.on.live,.bc-shot-row.on.next{border-color:var(--pos);border-bottom-color:transparent;background:var(--pos-soft)}
.bc-next-chip{flex:0 0 auto;display:inline-flex;align-items:center;font-family:var(--f-mono);
  font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--pos);border:1px solid var(--pos-line);border-radius:9px;padding:1px 7px;cursor:help;
  animation:bcNextPulse 2.4s ease-in-out infinite}
@keyframes bcNextPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .bc-next-chip{animation:none} }
/* the unrendered scene's first card = the primary call-to-action */
.beat-card-img.ph.cta{display:grid;place-items:center;gap:10px;align-content:center;padding:22px 30px}
.bc-cta-t{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.bc-cta-btn{height:36px;padding:0 16px;font-size:12.5px}
.bc-cta-d{font-size:11px;line-height:1.55;color:var(--txt-3);text-align:center;max-width:360px}
.bc-shot-thumb{width:53px;height:30px;border-radius:5px;object-fit:cover;flex:0 0 auto;background:var(--bg-4);display:block}
.bc-shot-thumb.ph{border:1px dashed var(--line-2)}
.bc-shot-letter{flex:0 0 auto;font-family:var(--f-mono);font-weight:700;font-size:10.5px;color:var(--txt-0)}
.bc-shot-pri{flex:0 0 auto;color:var(--pos);font-size:11px;cursor:help}
.bc-shot-gram{flex:0 0 auto;font-family:var(--f-mono);font-size:9.5px;color:var(--txt-3);white-space:nowrap}
.bc-shot-act{flex:1;min-width:0;font-size:11px;color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-shot-covers{flex:0 0 auto;font-family:var(--f-mono);font-size:9px;color:var(--txt-3);white-space:nowrap}
.bc-shot-chev{flex:0 0 auto;color:var(--txt-3);display:grid;place-items:center}
.bc-shot-chev svg{transition:.15s}
.bc-shot-chev.open svg{transform:rotate(90deg)}
/* open editor: continues the selected row's orange frame — 2px pos sides+bottom so the
   row+editor read as ONE bordered unit (user ruling 2026-08-07); radius matches the row */
.bc-shot-expand{border:2px solid var(--pos);border-top:none;border-radius:0 0 12px 12px;background:var(--bg-2);padding:10px 9px 9px;margin-top:-7px}
.bc-shot-expand .sheet-card{width:100%;border:none;border-radius:0;background:transparent;box-shadow:none}
.bc-shot-row.on:has(+ .bc-shot-expand .shot-card.gening){
  border-color:var(--pos);border-bottom-color:transparent;background:color-mix(in srgb,var(--pos) 12%,var(--bg-2))}
.bc-shot-expand:has(.shot-card.gening){
  border-color:var(--pos);border-top:none;background:color-mix(in srgb,var(--pos) 10%,var(--bg-1))}
.bc-shot-expand:has(.shot-card.gening) .sheet-frame,
.bc-shot-expand:has(.shot-card.gening) .sheet-body{
  background:transparent}
.bc-shot-expand:has(.shot-card.gening) .sheet-frame{
  border-bottom-color:color-mix(in srgb,var(--pos) 22%,var(--line))}
.bc-shot-expand .shot-card.gening,
.bc-shot-expand .shot-card.batch-on{
  outline:none;outline-offset:0;border:none;box-shadow:none;background:transparent}

/* why the shot exists + which micro-beats it covers */
.shot-purpose{display:flex;align-items:baseline;gap:8px;margin:8px 0 0;font-size:11px;line-height:1.45;color:var(--txt-2)}
.shot-covers-chip{flex:0 0 auto;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.03em;color:var(--txt-3);
  border:1px solid var(--line-2);border-radius:10px;padding:1px 7px;cursor:help}
.shot-purpose-t{font-style:italic}
.shot-priority-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;
  border:1px solid var(--pos-line);background:var(--pos-soft);color:var(--pos);
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:help}
.shot-beat-tag.sub{border-color:oklch(0.62 0.12 285 / .45);color:oklch(0.74 0.1 285)}
[data-theme="light"] .shot-beat-tag.sub{color:oklch(0.44 0.12 285)}
.char-argues-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.char-argues-row .insp-select{flex:0 0 auto;width:auto;min-width:150px}
.linked-prop-gen{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;margin-left:6px;
  padding:2px 8px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-2);
  color:var(--txt-1);font-family:var(--f-ui);font-size:10.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.linked-prop-gen:hover{border-color:var(--pos);color:var(--pos)}
.linked-prop-gen:disabled{opacity:.5;cursor:default}
.linked-prop-gen .ns-spin{width:10px;height:10px}
.card-qa-row{display:flex;justify-content:flex-start;margin:2px 0 6px}
.sb-qa-row{padding:0 2px;margin-top:6px}
.prompt-drift-note{margin-top:6px;padding:7px 10px;border-radius:8px;font-size:11px;line-height:1.45;
  background:oklch(0.62 0.13 60 / .12);border:1px solid oklch(0.6 0.13 60 / .35);color:oklch(0.72 0.11 60)}
[data-theme="light"] .prompt-drift-note{color:oklch(0.45 0.11 60)}
.qa-quote{font-size:12.5px;line-height:1.6;font-style:italic;background:var(--bg-2);border:1px solid var(--line-1,var(--line-2));
  border-left:3px solid var(--pos);border-radius:10px;padding:11px 13px;color:var(--txt-0)}
.qa-quote.edit{border-left-color:var(--pos)}
.qa-foot{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-1,var(--line-2))}
.qa-foot-note{font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-2);margin-right:auto}
.qa-foot .ns-btn{display:inline-flex;align-items:center;gap:6px}

/* ---- Unified popup/window close button — MUSE-dock ghost style. -------------
   One visual language for every modal/lightbox close: borderless, transparent,
   quiet text color, soft rounded hover fill (exactly .muse-dock-x). Positioning
   and size rules from each class's original block still apply — this only
   unifies the LOOK. (.plans-x/.voice-modal-x ride on .ag-x.) */
.ag-x,.bible-x,.cameo-x,.ai-x,.agent-undo .au-x,.sp-prev-x{
  background:none;border:none;color:var(--txt-2);border-radius:8px;
  display:grid;place-items:center;cursor:pointer;transition:.1s}
.ag-x:hover,.bible-x:hover,.cameo-x:hover,.ai-x:hover,.agent-undo .au-x:hover,.sp-prev-x:hover{
  color:var(--txt-0);background:var(--bg-4)}
/* Floating closes that sit ON TOP of fullscreen imagery keep a soft dark scrim
   (a fully transparent ghost disappears over a bright photo) but adopt the
   family's rounded-square shape and hover behavior. */
.dt-preview-x,.stage2-lightbox-x{
  border:none;border-radius:10px;background:rgba(15,15,18,.55);color:#fff;transition:.1s}
.dt-preview-x:hover,.stage2-lightbox-x:hover{background:rgba(15,15,18,.82);color:#fff}

/* ---- Hero spine — the value-charge wave inside the hero film frame. ---------
   The line (charge-gradient stroke + soft glow pass) draws itself on load
   (pathLength=1 trick), the tinted area fades up, nodes pop in staggered,
   captions fade last — then a playhead of light travels the spine on a loop.
   Reduced-motion users get it fully drawn and still. */
.lp-spine{position:absolute;inset:0;width:100%;height:100%;display:block}
.lp-spine-path{fill:none;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:lpSpineDraw 2.2s cubic-bezier(.55,0,.25,1) .25s forwards}
@keyframes lpSpineDraw{to{stroke-dashoffset:0}}
.lp-spine-area{opacity:0;animation:lpSpineFade 1.6s ease-out 1.5s forwards}
.lp-spine-node,.lp-spine-halo{opacity:0;animation:lpSpinePop .45s ease-out forwards}
.lp-spine-halo{animation-name:lpSpineHalo}
@keyframes lpSpinePop{from{opacity:0}to{opacity:1}}
@keyframes lpSpineHalo{from{opacity:0}to{opacity:.14}}
.lp-spine-lab{opacity:0;animation:lpSpineFade .9s ease-out forwards}
@keyframes lpSpineFade{from{opacity:0}to{opacity:1}}
/* the playhead: hidden unless the browser can run CSS motion paths */
.lp-spine-run{opacity:0}
@supports (offset-path: path("M0 0")){
  .lp-spine-run{animation:lpSpineRun 11s linear 3s infinite}
  @keyframes lpSpineRun{
    0%{offset-distance:0%;opacity:0}
    3%{opacity:1}
    97%{opacity:1}
    100%{offset-distance:100%;opacity:0}
  }
}
@media (prefers-reduced-motion:reduce){
  .lp-spine-path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .lp-spine-area{animation:none;opacity:1}
  .lp-spine-node,.lp-spine-lab{animation:none;opacity:1}
  .lp-spine-halo{animation:none;opacity:.14}
  .lp-spine-run{animation:none;opacity:0}
}
/* small screens: the wave and nodes stay; microtype would be unreadable */
@media (max-width:640px){ .lp-spine-lab, .lp-spine text{display:none} }

/* ---- Admin plan-copy editor (PlansModal, admin only) ----------------------- */
.plans-edit-btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:12px;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-2);
  color:var(--txt-1);cursor:pointer;transition:.12s}
.plans-edit-btn:hover{background:var(--bg-3);color:var(--txt-0)}
.plan-card.editing{gap:8px}
.plan-edit-pop{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--txt-2);cursor:pointer}
.plan-edit-name{font-size:17px;font-weight:600;padding:6px 8px;border:1px solid var(--line-2);
  border-radius:8px;background:var(--bg-1);color:var(--txt-0);width:100%}
.plan-edit-locked{opacity:.75}
.plan-edit-locked .plan-per{color:var(--txt-3)}
.plan-edit-locked-note{font-size:11px;color:var(--txt-3);margin:-4px 0 4px}
.plan-edit-blurb{font-size:12.5px;padding:6px 8px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--bg-1);color:var(--txt-1);width:100%;resize:vertical;font-family:inherit}
.plan-edit-feats{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.plan-edit-feat{display:flex;gap:5px;align-items:center}
.plan-edit-feat input{flex:1;font-size:12px;padding:5px 7px;border:1px solid var(--line-2);
  border-radius:7px;background:var(--bg-1);color:var(--txt-1)}
.plan-edit-featx{flex:0 0 auto;width:24px;height:24px;border:none;border-radius:6px;background:var(--bg-3);
  color:var(--txt-2);cursor:pointer;font-size:15px;line-height:1}
.plan-edit-featx:hover{background:var(--neg);color:#fff}
.plan-edit-featadd{align-self:flex-start;font-size:11.5px;padding:4px 9px;border:1px dashed var(--line-2);
  border-radius:7px;background:transparent;color:var(--txt-2);cursor:pointer}
.plan-edit-featadd:hover{color:var(--txt-0);border-color:var(--txt-3)}
.plan-edit-bar{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:6px}

/* ---- Post-checkout welcome card (/?welcome=1) ------------------------------- */
.welcome-card{width:min(430px,calc(100vw - 40px));background:var(--bg-1);border:1px solid var(--line-2);
  border-radius:18px;padding:34px 32px 26px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:10px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.welcome-eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3)}
.welcome-title{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:24px;color:var(--txt-0);line-height:1.2}
.welcome-sub{font-size:13px;color:var(--txt-2);line-height:1.55;max-width:34ch}
.welcome-cta{margin-top:10px;padding:10px 22px;border-radius:999px;border:none;background:var(--accent);
  color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;transition:.12s}
.welcome-cta:hover{filter:brightness(1.08)}
.welcome-cta:disabled{opacity:.55;cursor:default}
.welcome-later{border:none;background:none;color:var(--txt-3);font-size:12px;cursor:pointer;padding:4px 8px}
.welcome-later:hover{color:var(--txt-1)}

/* ============================================================================
   Home Dashboard (home-dashboard.jsx) — the landing "front door".
   Persistent left rail + hero + recent films + feature strip. Theme-aware via
   the same tokens as the rest of the app; --hd-accent is the punchy orange from
   the reference design.
   ========================================================================== */
.hd-root{ position:fixed; inset:0; z-index:120; display:flex;
  background:var(--lpw-bg); color:var(--lpw-ink); font-family:var(--f-ui);
  /* Continuity with the signed-out landing page (landing.jsx): the same paper
     palette, Spectral serif headlines, Space Grotesk wordmark, and Reel-orange
     as the single warm accent — so Home reads as the same world as the front door. */
  --lpw-bg:#FCFCFB; --lpw-card:#F6F6F4; --lpw-card-2:#F1F1EE;
  --lpw-line:#E8E8E5; --lpw-line-2:#E1E1DD;
  --lpw-ink:#0F1012; --lpw-ink-2:#3C3F44; --lpw-sub:#5D6066;
  --lpw-black:#0D0D0E; --lpw-accent:#E0742B; }

/* full-height vertical rails at the 1280px column edges — the landing page's
   structural signature (.lp-rails), so Home shares the same page grid. */
.hd-rails{ position:absolute; inset:0; pointer-events:none; }
.hd-rails::before,.hd-rails::after{ content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--lpw-line); }
.hd-rails::before{ left:max(0px,calc((100% - 1280px)/2)); }
.hd-rails::after{ right:max(0px,calc((100% - 1280px)/2)); }

/* brand + account in the top bar (no left rail). Wordmark matches the landing
   logo: Space Grotesk, tight tracking. */
.hd-brand{ display:flex; align-items:center; gap:10px; background:none; border:0;
  cursor:pointer; color:var(--lpw-ink); padding:0; }
.hd-brand svg{ width:24px; height:24px; }
.hd-brand-name{ font-family:var(--f-display); font-weight:400; letter-spacing:.03em; font-size:19px; color:var(--lpw-ink); }
.hd-brand-name b{ font-weight:700; }
.hd-topbar-l{ display:flex; align-items:center; gap:18px; min-width:0; }
.hd-acct{ display:flex; align-items:center; margin-left:6px; }

/* main column */
.hd-main{ position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
/* frosted full-width bar; content constrained to the SAME 1280px column as the
   rails, with rail segments crossing it (mirrors .lp-nav / .lp-nav-in). */
.hd-topbar{ position:relative; border-bottom:1px solid var(--lpw-line);
  background:rgba(252,252,251,.86); backdrop-filter:blur(10px); }
.hd-topbar::before,.hd-topbar::after{ content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--lpw-line); }
.hd-topbar::before{ left:max(0px,calc((100% - 1280px)/2)); }
.hd-topbar::after{ right:max(0px,calc((100% - 1280px)/2)); }
.hd-topbar-in{ max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:13px clamp(20px,4vw,48px); }
.hd-top-actions{ display:flex; align-items:center; gap:10px; }
/* pill buttons — mirror .lp-btn on the landing page (black primary, white ghost) */
/* top-bar buttons = the homepage nav's (.lp-btn spec): pills, black primary */
.hd-tbtn{ display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border-radius:999px;
  border:1px solid var(--lpw-line-2); background:#fff; color:var(--lpw-ink); font-size:13.5px;
  font-weight:600; cursor:pointer; transition:.14s; }
.hd-tbtn:hover{ background:var(--lpw-card-2); border-color:#d6d6d1; }
.hd-tbtn.hd-accent{ background:var(--lpw-black); border-color:var(--lpw-black); color:#fff; }
.hd-tbtn.hd-accent:hover{ background:#26262a; transform:translateY(-1px); }

/* scroll body (overflow-x hidden: the full-bleed 100vw section rules below;
   no bottom padding — the footer band sits flush like the landing's) */
.hd-scroll{ flex:1 1 auto; overflow:auto; overflow-x:hidden; padding:clamp(36px,5vw,64px) clamp(20px,4vw,48px) 0; }

/* hero */
.hd-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,64px);
  align-items:center; max-width:1200px; margin:0 auto; }
/* headline = the homepage's (.lp-h1 spec): Spectral serif, italic orange accent */
.hd-hero-title{ font-family:"Spectral",Georgia,serif; font-weight:600; line-height:1.04;
  font-size:clamp(34px,4.8vw,64px); letter-spacing:-.01em; margin:0 0 18px; color:var(--lpw-ink); }
.hd-accent-text{ color:var(--lpw-accent); font-style:italic; }
.hd-hero-sub{ font-size:clamp(15px,1.4vw,17px); line-height:1.6; color:var(--lpw-sub); max-width:34ch; margin:0 0 26px; }
.hd-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 26px; }
/* pipeline steps = the homepage's card language (.lp-card: bone fill, quiet borders) */
.hd-step{ display:flex; flex-direction:column; gap:3px; text-align:left; padding:12px 13px;
  border-radius:12px; cursor:pointer; background:var(--lpw-card); border:1px solid transparent;
  color:var(--lpw-ink); transition:.14s; }
.hd-step:hover:not(.soon){ background:var(--lpw-card-2); border-color:#d6d6d1; }
.hd-step-no{ font-family:var(--f-mono); font-size:11px; color:var(--lpw-sub); }
.hd-step-phase{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--lpw-sub); font-weight:600; }
.hd-step-name{ font-family:var(--f-display); font-size:13.5px; font-weight:600; }
.hd-step.on{ border-color:var(--lpw-accent); background:color-mix(in srgb,var(--lpw-accent) 7%,#fff); }
.hd-step.on .hd-step-no, .hd-step.on .hd-step-name{ color:var(--lpw-accent); }
.hd-step.soon{ opacity:.5; cursor:not-allowed; }
.hd-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
/* buttons = the homepage's (.lp-btn / .lp-btn.big spec): black primary pill, white ghost pill */
.hd-btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px;
  font-family:var(--f-ui); font-size:15px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:.14s; }
.hd-btn-accent{ background:var(--lpw-black); border-color:var(--lpw-black); color:#fff; }
.hd-btn-accent:hover{ background:#26262a; transform:translateY(-1px); }
.hd-btn-ghost{ background:#fff; color:var(--lpw-ink); border-color:var(--lpw-line-2); }
.hd-btn-ghost:hover{ background:var(--lpw-card-2); border-color:#d6d6d1; }
.hd-hero-right{ min-width:0; }
/* hero media = the PREMIERE SCREEN, styled like the homepage's media panel
   (.lp-video spec: 16px radius, hairline border) — a video placeholder for the
   assembled film, not a poster frame */
.hd-hero-media{ position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  background:var(--lpw-black); border:1px solid var(--lpw-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.hd-hero-media-fallback{ position:absolute; inset:0;
  background:radial-gradient(120% 120% at 30% 20%,#22242b 0%,#121319 60%,#0d0d0e 100%); }
.hd-hero-media-note{ position:relative; z-index:1; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.hd-play{ position:relative; z-index:1; width:68px; height:68px; border-radius:999px; cursor:pointer;
  border:0; background:#fff; color:var(--lpw-black); display:flex; align-items:center;
  justify-content:center; padding-left:4px; transition:transform .16s; }
.hd-play:hover{ transform:scale(1.06); }
.hd-hero-media-cap{ position:absolute; left:16px; bottom:14px; z-index:1; color:#fff; font-size:13px;
  font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.6); }

/* recent projects — a full-bleed hairline rule ABOVE the section crosses the
   rails in a "+", exactly like the landing's .lp-section dividers. */
.hd-recent{ position:relative; max-width:1200px; margin:clamp(44px,5vw,64px) auto 0; padding-top:clamp(44px,5vw,64px); }
.hd-recent::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:1px; background:var(--lpw-line); }
/* reference design: compact left-aligned section head */
.hd-sec-head{ display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; }
.hd-sec-title{ font-family:"Spectral",Georgia,serif; font-size:22px; font-weight:600; letter-spacing:-.01em; margin:0; color:var(--lpw-ink); }
/* ‹ › pager for the Recent Projects window (reference design's quiet round buttons) */
.hd-nav{ display:flex; align-items:center; gap:8px; }
.hd-navbtn{ display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:999px; background:#fff; border:1px solid var(--lpw-line-2); color:var(--lpw-ink);
  cursor:pointer; transition:.14s; }
.hd-navbtn:hover:not(:disabled){ background:var(--lpw-card-2); border-color:#d6d6d1; }
.hd-navbtn:disabled{ opacity:.35; cursor:default; }
.hd-viewall{ display:inline-flex; align-items:center; gap:6px; background:none; border:0;
  color:var(--lpw-sub); font-size:13px; font-weight:600; cursor:pointer; transition:.12s; }
.hd-viewall:hover{ color:var(--lpw-accent); }
.hd-recent-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.hd-card{ padding:0; border:0; background:none; cursor:pointer; text-align:left; }
.hd-card-art{ position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden;
  background:#14161c center/cover no-repeat; display:flex;
  align-items:center; justify-content:center; box-shadow:0 12px 26px -16px rgba(15,16,18,.35);
  transition:transform .14s,box-shadow .14s; }
.hd-card:hover .hd-card-art{ transform:translateY(-3px); box-shadow:0 18px 38px -20px rgba(15,16,18,.45); }
.hd-card.current .hd-card-art{ box-shadow:0 0 0 2px var(--lpw-accent); }
.hd-card-initials{ font-family:var(--f-display); font-size:30px; font-weight:700; color:rgba(255,255,255,.7); }
.hd-card-gen{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:rgba(13,13,14,.55); color:#fff; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.hd-card-gen-lab{ font-family:var(--f-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.9); }
.hd-card-spin{ width:24px; height:24px; border-radius:50%; border:2.5px solid rgba(255,255,255,.28); border-top-color:#fff; animation:hdcardspin .8s linear infinite; }
@keyframes hdcardspin{ to{ transform:rotate(360deg); } }
.hd-card-pill{ position:absolute; top:9px; left:9px; z-index:1; font-family:var(--f-mono); font-size:8.5px; font-weight:700;
  letter-spacing:.08em; padding:3px 8px; border-radius:999px; color:#fff; background:rgba(10,11,14,.66);
  backdrop-filter:blur(4px); }
/* poster actions — appear on hover, top-right (download / regenerate / restore) */
.hd-card-actions{ position:absolute; top:8px; right:8px; z-index:3; display:flex; gap:6px;
  opacity:0; transition:opacity .14s; }
.hd-card:hover .hd-card-actions, .hd-card:focus-within .hd-card-actions{ opacity:1; }
.hd-cact{ display:flex; align-items:center; justify-content:center; width:27px; height:27px;
  border-radius:9px; border:0; cursor:pointer; color:#fff; background:rgba(10,11,14,.66);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:.14s; }
.hd-cact:hover:not(:disabled){ background:var(--lpw-accent); }
.hd-cact:disabled{ opacity:.5; cursor:default; }
.hd-card-shade{ position:absolute; inset:auto 0 0 0; z-index:1; padding:24px 12px 12px;
  background:linear-gradient(to top,rgba(6,7,10,.92) 0%,rgba(6,7,10,.55) 55%,transparent 100%); }
.hd-card-name{ color:#fff; font-family:var(--f-display); font-size:14px; font-weight:600; line-height:1.2; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.hd-card-sub{ color:rgba(255,255,255,.72); font-size:11.5px; margin-top:2px; }
.hd-card-meta{ display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.6); font-family:var(--f-mono); font-size:10px; margin-top:5px; }
.hd-card-new-art{ background:var(--lpw-card); border:1px dashed var(--lpw-line-2); flex-direction:column; gap:9px; color:var(--lpw-sub); }
.hd-card:hover .hd-card-new-art{ color:var(--lpw-accent); border-color:var(--lpw-accent); }
.hd-card-new-lab{ font-family:var(--f-display); font-size:12.5px; font-weight:600; }

/* feature strip — the divider rule floats midway in the gap above it */
.hd-features{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:1200px;
  margin:clamp(64px,8vw,96px) auto 0; padding:26px; background:var(--lpw-card); border:1px solid transparent; border-radius:16px; }
.hd-features::before{ content:""; position:absolute; top:calc(clamp(64px,8vw,96px) / -2); left:50%; transform:translateX(-50%);
  width:100vw; height:1px; background:var(--lpw-line); }
.hd-feat{ display:flex; align-items:flex-start; gap:12px; }
.hd-feat-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; background:var(--lpw-bg); border:1px solid var(--lpw-line-2); color:var(--lpw-accent); }
.hd-feat-title{ font-family:var(--f-display); font-size:13.5px; font-weight:600; color:var(--lpw-ink); }
.hd-feat-body{ font-size:12px; color:var(--lpw-sub); margin-top:3px; line-height:1.4; }

/* footer — EXACTLY the landing footer: same band (full-viewport border-top rule,
   .lp-foot equivalent) and the same .lp-foot-in inner block (1280px column +
   its own inline padding), sitting flush at the bottom of the scroll. */
.hd-foot{ position:relative; left:50%; transform:translateX(-50%); width:100vw;
  margin-top:clamp(64px,8vw,96px); border-top:1px solid var(--lpw-line); color:var(--lpw-sub); }

/* responsive */
@media (max-width:1080px){ .hd-hero{ grid-template-columns:1fr; } .hd-recent-row{ grid-template-columns:repeat(3,1fr); } .hd-features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .hd-recent-row{ grid-template-columns:repeat(2,1fr); } .hd-features{ grid-template-columns:1fr; } }

/* centered progress overlay for long single-scene MUSE work (Redraft from beats) —
   fixed + portaled to <body>, so it's dead-centre on any screen or device */
.redraft-overlay{ position:fixed; inset:0; z-index:9996; display:grid; place-items:center;
  background:rgba(8,8,10,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.redraft-card{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  background:var(--bg-1); border:1px solid var(--line-2); border-radius:14px;
  padding:26px 30px; max-width:min(420px,86vw); box-shadow:0 24px 70px rgba(0,0,0,.45); }
.redraft-card .orb{ width:26px; height:26px; border-radius:50%;
  background:conic-gradient(from 0deg,var(--neg),var(--pos),var(--neg)); animation:spin 1.2s linear infinite; }
.redraft-t{ font-family:var(--f-display); font-size:15px; font-weight:600; color:var(--txt-0,var(--txt-1)); }
.redraft-d{ font-size:12.5px; color:var(--txt-2); line-height:1.5; }
.studio-progress-card{ min-width:min(420px,86vw); }
.studio-progress-bar{ width:100%; height:5px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb,var(--txt-1) 12%,transparent); margin-top:2px; }
.studio-progress-bar i{ display:block; height:100%; border-radius:inherit; background:var(--pos);
  transition:width .28s ease; }

/* Brief modal — the rebuild action sits in its own toolbar row between the
   header and the brief text, not floating over it */
.brief-rebuild-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.brief-rebuild-row .flag-btn{ flex:0 0 auto; }
.brief-rebuild-note{ font-size:12px; color:var(--txt-2); }
.brief-model-pick{ display:inline-flex; align-items:center; gap:7px; }

/* project switcher — small creation date beside the name (disambiguates
   same-named films, e.g. a rebuild next to its original) */
.proj-row-date{ margin-left:auto; padding-left:10px; flex:0 0 auto;
  font-family:var(--f-mono); font-size:9.5px; color:var(--txt-3); white-space:nowrap; }

/* Team collaboration */
.team-modal{width:min(620px,94vw)}
.team-body{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;overflow:auto}
.team-note{font-size:12.5px;line-height:1.45;color:var(--txt-2);background:var(--bg-3);
  border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.team-invite{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:8px;align-items:center}
.team-email,.team-role{height:36px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-2);
  color:var(--txt-0);font:500 12px var(--f-ui);padding:0 10px;outline:none}
.team-email:focus,.team-role:focus{border-color:var(--pos)}
.team-role.compact{height:30px;max-width:136px;font-size:11.5px}
.team-add{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;
  border-radius:8px;background:var(--pos);color:var(--ink-on-accent);font:700 12px var(--f-ui);padding:0 12px;cursor:pointer}
.team-add:disabled{opacity:.5;cursor:not-allowed}
.team-seats{display:flex;flex-direction:column;gap:7px}
.team-seat{display:flex;align-items:center;gap:10px;min-height:46px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg-1);padding:8px 10px}
.team-seat.owner{background:var(--bg-3)}
.team-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg-4);
  color:var(--pos);border:1px solid var(--line)}
.team-member-main{flex:1;min-width:0}
.team-member-email{font:650 12.5px var(--f-ui);color:var(--txt-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-member-role{font:500 10.5px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);margin-top:2px}
.team-member-actions{display:flex;align-items:center;gap:6px}
.team-remove{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-2);
  border-radius:8px;background:var(--bg-2);color:var(--txt-3);cursor:pointer}
.team-remove:hover{color:var(--alert);border-color:color-mix(in srgb,var(--alert) 45%,var(--line-2))}
.team-badge{font:700 9px var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--pos);
  border:1px solid var(--pos-line);background:var(--pos-soft);border-radius:20px;padding:3px 7px}
.team-empty{border:1px dashed var(--line-2);border-radius:9px;padding:16px;text-align:center;color:var(--txt-3);
  font:500 12px var(--f-ui)}
.team-foot{font-size:11.5px;color:var(--txt-3);line-height:1.4}
@media (max-width:640px){
  .team-invite{grid-template-columns:1fr}
  .team-member-actions{flex-direction:column;align-items:flex-end}
}

/* CRASH BOUNDARY — the recovery screen shown when a render exception escapes React.
   Deliberately dependency-free (no app tokens beyond the basics) so it can still paint
   when whatever broke is a theming/layout problem. */
.crash-wrap{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;
  background:var(--bg-0,#f4f2ee);overflow:auto}
.crash-card{width:min(560px,100%);background:var(--bg-1,#fff);border:1px solid var(--line-2,#e0dcd4);
  border-radius:16px;padding:26px 26px 22px;box-shadow:0 18px 60px rgba(0,0,0,.18)}
.crash-t{font-family:var(--f-display,inherit);font-size:19px;font-weight:600;color:var(--txt-0,#1a1a1a)}
.crash-d{font-size:13px;line-height:1.6;color:var(--txt-2,#6b675f);margin-top:8px}
.crash-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.crash-btn{font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line-2,#e0dcd4);background:var(--bg-2,#faf9f6);color:var(--txt-1,#3a3a3a)}
.crash-btn:hover{border-color:var(--txt-3,#98938a)}
.crash-btn.primary{background:var(--accent,#c8791b);border-color:var(--accent,#c8791b);color:#fff}
.crash-det{margin-top:16px;font-size:11.5px;color:var(--txt-3,#98938a)}
.crash-det summary{cursor:pointer}
.crash-pre{margin-top:8px;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-family:var(--f-mono,monospace);font-size:10.5px;line-height:1.5;color:var(--txt-2,#6b675f);
  background:var(--bg-3,#efece6);border-radius:8px;padding:10px}

/* VIEW-ONLY collaborator — a standing notice, because RLS silently rejects their writes */
.readonly-banner{position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:9px;
  padding:9px 16px;font-size:12px;line-height:1.5;color:var(--txt-0);
  background:var(--alert-soft,rgba(216,166,87,.16));border-bottom:1px solid var(--alert-line,rgba(216,166,87,.4))}
.readonly-banner b{font-weight:650}
.is-readonly .edit-in[readonly]{cursor:default;color:var(--txt-1);background:transparent}
.is-readonly button:disabled,.is-readonly select:disabled{cursor:not-allowed}
.is-readonly .scard:not(.sel),.is-readonly .tree-scene{cursor:pointer}

/* PRESENCE — collaborators currently in this film (top bar, beside Team) */
.presence-dots{display:inline-flex;align-items:center;cursor:help}
.presence-dot{display:grid;place-items:center;width:22px;height:22px;margin-left:-5px;
  border-radius:50%;font:700 9.5px var(--f-ui);letter-spacing:0;
  background:var(--pos);color:var(--ink-on-accent,#fff);border:2px solid var(--bg-1)}
.presence-dot:first-child{margin-left:0}
/* the same person in another window — distinct, because a second window of YOUR OWN is
   the case that used to cause save conflicts */
.presence-dot.self-other{background:var(--txt-3);color:var(--bg-1)}
.presence-dot.more{background:var(--bg-3);color:var(--txt-2);border-color:var(--bg-1)}

/* Slugline units (Location card) */
.loc-time-badge{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;border:1px solid var(--line);color:var(--txt-2);margin-left:6px}
.loc-unit-orphan{display:flex;align-items:center;gap:8px;font-size:12px;color:#b45309;background:rgba(180,83,9,.06);border:1px dashed var(--line);border-radius:8px;padding:7px 10px;margin:6px 0}
.loc-unit-orphan span{flex:1}
.loc-unit-remove{font-size:11px;background:none;border:1px solid var(--line);border-radius:6px;padding:2px 8px;cursor:pointer;color:var(--txt-2)}
.loc-unit-remove:hover{color:#b45309;border-color:#b45309}
.loc-unit-card.orphan{opacity:.85}

/* slugline unit set dressing */
.loc-dress{margin:6px 0}
.loc-dress-lab{font-size:11px;font-weight:600;color:var(--txt-3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.loc-dress-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.loc-dress-row.sugg{margin-top:5px}
.loc-dress-chip{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:2px 4px 2px 9px;border-radius:99px;background:var(--bg-4);color:var(--txt-1);border:1px solid var(--line)}
.loc-dress-chip button{background:none;border:none;cursor:pointer;color:var(--txt-3);font-size:12px;padding:0 4px;line-height:1}
.loc-dress-chip button:hover{color:#b45309}
.loc-dress-add{display:inline-flex;align-items:center;gap:4px}
.loc-dress-add input{font-size:11px;padding:2px 9px;border-radius:99px;border:1px dashed var(--line);background:none;color:var(--txt-1);width:120px;outline:none}
.loc-dress-add input:focus{border-color:var(--txt-3)}
.loc-dress-sugg{font-size:10.5px;padding:2px 9px;border-radius:99px;border:1px dashed var(--line);background:none;color:var(--txt-3);cursor:pointer}
.loc-dress-sugg:hover{color:var(--txt-1);border-color:var(--txt-3)}
.loc-dress-sugg-lab{font-size:10px;color:var(--txt-3);margin-right:2px}

/* ── fal.ai price-drift card (admin-only, mounted by app/pricing-watch.jsx) ── */
.pricing-watch-card{position:fixed;right:18px;bottom:18px;z-index:99998;width:min(420px,92vw);max-height:70vh;overflow:auto;background:#2a2622;color:#f4efe9;border-radius:13px;padding:14px 15px 12px;box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 1px rgba(220,170,60,.35);font-size:13px;line-height:1.45;animation:turn-toast-in .18s ease-out}
.pricing-watch-card .pw-title{font-weight:700;font-size:14px;color:#ffd98a;margin-bottom:3px}
.pricing-watch-card .pw-sub{color:#d9d2c8;font-size:12px;margin-bottom:9px}
.pricing-watch-card .pw-rows{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.pricing-watch-card .pw-row{display:flex;align-items:baseline;gap:7px;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.05);font-variant-numeric:tabular-nums}
.pricing-watch-card .pw-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.pricing-watch-card .pw-label em{font-style:normal;font-size:10.5px;color:#b8ac96;opacity:.9}
.pricing-watch-card .pw-old{color:#e8a795;text-decoration:line-through;font-size:12px}
.pricing-watch-card .pw-arrow{color:#8f857a;font-size:11px}
.pricing-watch-card .pw-new{color:#a8e6bf;font-weight:700;font-size:12.5px}
.pricing-watch-card .pw-fail{font-size:11px;color:#c9ab74;margin-bottom:7px}
.pricing-watch-card .pw-when{font-size:10.5px;color:#8f857a;margin-bottom:9px}
.pricing-watch-card .pw-actions{display:flex;gap:8px;justify-content:flex-end}
.pricing-watch-card .pw-btn{font-size:12.5px;padding:6px 13px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:none;color:#e8e2d8;cursor:pointer}
.pricing-watch-card .pw-btn:hover{background:rgba(255,255,255,.07)}
.pricing-watch-card .pw-btn.primary{background:#caa24a;border-color:#caa24a;color:#241d10;font-weight:700}
.pricing-watch-card .pw-btn.primary:hover{background:#dab35b}
.pricing-watch-card .pw-btn:disabled{opacity:.55;cursor:default}