/* ============================================================
   STORYANIMATOR — MODERN DESIGN LAYER
   Layered AFTER styles.css to restyle the app to the 'Modern v2'
   design: warm cream/terracotta palette, Instrument Sans + JetBrains
   Mono, top-bar stepper + mobile bottom-nav (sidebar removed).
   Sources (verbatim): modern-shell.css + modern-skin.css + modern-arch.css,
   followed by an ADAPTER section reconciling this app's markup.
   ============================================================ */

/* ============================================================
   STORYANIMATOR — MODERN SHELL
   Replaces the retro inline style block: tokens, app shell,
   panels, storyboard, editor, publish, credits, history, hero.
   ============================================================ */

/* ---------- tokens ---------- */
.v2v{
  --bg:#F3EDE3;
  --panel:#FDFBF7;
  --panel-2:#F6F0E6;
  --panel-3:#ECE3D4;
  --ink:#2B221A;
  --txt:#2B221A;
  --txt-2:#63563F;
  --txt-3:#786853;
  --line-soft:rgba(63,48,32,.10);
  --line:rgba(63,48,32,.10);
  --accent:#AD5620;
  --accent-2:#8F4517;
  --accent-ink:#FFFFFF;
  --accent-soft:#F7E6D2;
  --good:#3F7A38;
  --good-soft:#E7F0DD;
  --warn:#96621A;
  --gold:#D9A62E;
  --shadow-col:rgba(66,46,24,.07);
  --dot:none;
  --sh-1:0 1px 2px rgba(66,46,24,.06);
  --sh-2:0 1px 2px rgba(66,46,24,.06),0 8px 24px -12px rgba(66,46,24,.16);
  --sh-3:0 2px 6px rgba(66,46,24,.07),0 24px 56px -16px rgba(66,46,24,.24);
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  background-color:var(--bg);
  background-image:none;
  color:var(--txt);
  letter-spacing:0;
}
.v2v[data-theme="dark"]{
  --bg:#12100E;
  --panel:#1A1714;
  --panel-2:#211D19;
  --panel-3:#2B2620;
  --ink:#EFEAE3;
  --txt:#EFEAE3;
  --txt-2:#B0A697;
  --txt-3:#8D8272;
  --line-soft:rgba(239,234,227,.09);
  --line:rgba(239,234,227,.09);
  --accent:#BE6524;
  --accent-2:#D07B3C;
  --accent-ink:#FFFFFF;
  --accent-soft:#33261A;
  --good:#7FB86A;
  --good-soft:#20291A;
  --warn:#D8AB4E;
  --gold:#E3B84E;
  --shadow-col:rgba(0,0,0,.35);
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 1px 2px rgba(0,0,0,.3),0 10px 28px -12px rgba(0,0,0,.5);
  --sh-3:0 2px 6px rgba(0,0,0,.35),0 28px 64px -16px rgba(0,0,0,.6);
}
html,body{margin:0;height:100%;overflow:hidden}
.v2v .pix{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:0;font-weight:500}
.v2v .tnum{font-variant-numeric:tabular-nums}
.v2v ::selection{background:var(--accent);color:#fff}

/* ---------- app shell ---------- */
.app{display:flex;flex-direction:column;height:100vh}
.shell{display:flex;flex:1;min-height:0}
.sidebar{width:252px;flex:none;display:flex;flex-direction:column;background:transparent;
  border-right:1px solid var(--line);overflow:auto}
.sidebar .sb-cap{font-size:11px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.09em;
  font-weight:600;padding:16px 18px 8px}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.main-head{display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:14px 28px;border-bottom:1px solid var(--line);background:var(--panel)}
.main-body{flex:1;overflow:auto;padding:28px 28px 72px}
.main-body::-webkit-scrollbar,.sidebar::-webkit-scrollbar{width:10px}
.main-body::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track{background:transparent}
.main-body::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{background:var(--panel-3);border-radius:99px;border:2px solid var(--bg)}
.panel{display:none;max-width:1100px}
.panel.on{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.main-body .panel.on + .panel.on{margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
.panel-tag{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--txt-3);
  text-transform:uppercase;letter-spacing:.09em;margin:0 0 16px}
.panel-tag::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--accent);flex:none}

.twocol{display:grid;gap:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1080px){.grid2{grid-template-columns:1fr}}

/* ---------- dropzone large + file row ---------- */
.dz-lg{padding:40px}
.dz-lg .ico{width:52px;height:52px}.dz-lg .ico svg{width:24px;height:24px}
.dz-lg h4{font-size:15px;font-weight:600}
.mini-wave{height:48px;width:100%;display:block;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2)}
/* The badge + Play/Re-transcribe/Edit controls used to squeeze .file-meta down to a few
   pixels ("m…" over a 3-line "34.6 MB"). Give the name/size a real minimum width, keep
   the controls unshrinkable, and let them wrap to a second line when width runs out. */
/* justify-content only bites on the WRAPPED line — .file-meta grows and eats the free
   space on the first one — so buttons that drop to a second line sit right-aligned
   under the controls they belong to, not orphaned on the left. */
.file-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap;justify-content:flex-end}
.file-ico{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}
.file-ico svg{width:20px;height:20px}
.file-meta{flex:1 1 150px;min-width:150px}
.file-meta .name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta .sub{font-size:12px;color:var(--txt-3);margin-top:2px;white-space:nowrap}
.file-row .badge-ok,.file-row .badge-wait,.file-row .edit-audio-btn{flex:0 0 auto;white-space:nowrap}

/* ---------- transcript ---------- */
.full-transcript{font-size:14px;line-height:1.85;color:var(--txt-2);max-height:440px;overflow:auto;padding:18px 20px}
.full-transcript .s{padding:1px 3px;cursor:pointer;border-radius:4px}
.full-transcript .s:hover{background:var(--panel-2)}
.full-transcript .s.active{background:var(--accent);color:#fff}
.sent-list{display:flex;flex-direction:column;max-height:480px;overflow:auto}
.sent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 18px;
  border-bottom:1px solid var(--line-soft);cursor:pointer}
.sent:hover{background:var(--panel-2)}
.sent.active{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.sent .ts{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);font-weight:600;white-space:nowrap;padding-top:2px}
.sent .ts .dur{display:block;color:var(--txt-3);margin-top:2px;font-weight:500}
.sent .idx{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt-3);margin-bottom:4px}
.sent .txt{font-size:13px;color:var(--txt);line-height:1.55}

/* ---------- prompt fields ---------- */
.assist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.assist-grid{grid-template-columns:1fr}}
.assist-grid textarea{min-height:180px;resize:vertical}
.loadblock{background:var(--panel-2)!important;color:transparent!important;border-radius:var(--r-sm);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.pulse{animation:pulse 1s ease-in-out infinite}

/* ---------- generate layout ---------- */
.gen-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start}
.gen-grid>.win{position:sticky;top:0;align-self:start}
@media(max-width:980px){.gen-grid{grid-template-columns:1fr}.gen-grid>.win{position:static}}
.cast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px}
@media(max-width:1080px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}
.tile{cursor:pointer;transition:transform .12s,box-shadow .12s}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.tile .img .tag{position:absolute;bottom:6px;right:6px;font-size:9px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;background:rgba(255,255,255,.9);color:var(--ink);padding:2px 6px;border-radius:5px}

/* ---------- editor / preview ---------- */
.preview{position:relative;aspect-ratio:16/9;width:min(100%, calc(52vh * 16 / 9));margin-inline:auto;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-md);background:#0a0d10;box-shadow:var(--sh-2)}
.preview canvas{position:absolute;inset:0;width:100%;height:100%}
.scanlines{display:none}
.pv-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;z-index:4;background:linear-gradient(transparent,rgba(6,8,12,.82));
  font-size:13.5px;line-height:1.45;color:#fff}
.pv-idx{position:absolute;top:12px;left:12px;z-index:4;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.05em;background:rgba(6,8,12,.6);color:#fff;padding:5px 9px;border-radius:99px;backdrop-filter:blur(6px)}
.pv-live{position:absolute;top:12px;right:12px;z-index:4;display:flex;align-items:center;gap:6px;font-size:9.5px;
  font-weight:600;letter-spacing:.08em;background:rgba(6,8,12,.6);color:#fff;padding:5px 10px;border-radius:99px;backdrop-filter:blur(6px)}
.pv-live .d{width:6px;height:6px;border-radius:99px;background:var(--good);animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.tbtn{width:40px;height:40px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--txt);
  display:grid;place-items:center;box-shadow:var(--sh-1);transition:background .12s,transform .1s;cursor:pointer}
.tbtn:hover{background:var(--panel-2)}
.tbtn:active{transform:scale(.94)}
.tbtn svg{width:17px;height:17px}
.tbtn.play{width:52px;height:52px;background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 16px -6px var(--accent)}
.tbtn.play:hover{background:var(--accent-2)}
.tbtn.play svg{width:22px;height:22px}
.time-read{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--txt-3)}
.time-read b{color:var(--txt);font-weight:600}
.vol{display:flex;align-items:center;gap:9px;margin-left:auto}
.vol svg{width:18px;height:18px;color:var(--txt-2)}
.vol input[type=range]{width:92px}
.tl-labels{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--txt-3);margin:14px 0 6px}
.timeline{position:relative;display:flex;gap:3px;height:64px;border-radius:var(--r-sm);background:var(--panel-3);cursor:pointer;overflow:hidden;padding:3px}
.clip{position:relative;height:100%;overflow:hidden;min-width:8px;border-radius:6px}
.clip svg{position:absolute;inset:0;width:100%;height:100%}
.clip .clip-num{position:absolute;top:4px;left:6px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);z-index:2}
.clip .clip-dur{position:absolute;bottom:3px;left:6px;font-size:9px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);z-index:2}
.clip::after{content:"";position:absolute;inset:0;background:rgba(8,10,14,.45);z-index:1;transition:background .15s}
.clip.active::after{background:transparent}
.clip.active .clip-ring{position:absolute;inset:0;border:2px solid var(--accent);border-radius:6px;z-index:3}
.wave-wrap{position:relative;margin-top:8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);cursor:pointer;height:78px;overflow:hidden}
.wave-wrap canvas{display:block;width:100%;height:100%}
.seg-dividers{position:absolute;inset:0;pointer-events:none}
.seg-dividers i{position:absolute;top:0;bottom:0;width:1px;background:var(--line-soft)}
.playhead{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--accent);z-index:6;pointer-events:none}
.playhead::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:99px;background:var(--accent);box-shadow:0 0 0 2px var(--panel)}
.export-bar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:16px}
.render-label{font-size:11.5px;color:var(--txt-3);font-weight:600}
.render-track{flex:1;min-width:180px;height:8px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.render-track i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width .18s ease}
.render-track.idle{opacity:.5}
.render-pct{font-family:'JetBrains Mono',monospace;font-size:12px;min-width:44px;text-align:right}
.transport .render-pct{min-width:44px;text-align:right;color:var(--accent)}

/* ---------- editor tabs ---------- */
.etabs{display:inline-flex;gap:2px;border:none;background:var(--panel-2);border-radius:10px;padding:3px;box-shadow:none;overflow-x:auto;scrollbar-width:none}
.etabs::-webkit-scrollbar{display:none}
.etab-btn{flex:1;white-space:nowrap;border:none;border-radius:8px;background:transparent;
  font-family:inherit;font-weight:600;font-size:12.5px;text-transform:none;letter-spacing:0;padding:8px 15px;color:var(--txt-2);cursor:pointer;transition:background .12s,color .12s}
.etab-btn:hover{color:var(--txt)}
.etab-btn.on{background:var(--panel);color:var(--txt);box-shadow:var(--sh-1)}
.epane{border:1px solid var(--line);background:var(--panel);border-radius:var(--r-md);padding:18px}
.epane.hide{display:none}
.epane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.epane-title{font-size:13.5px;font-weight:600}
.epane-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:680px){.epane-grid2{grid-template-columns:1fr}}
.vol-big{display:flex;align-items:center;gap:10px;color:var(--txt-2)}
.vol-big input{flex:1;accent-color:var(--accent)}

/* ---------- youtube details ---------- */
.yt-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.yt-layout{grid-template-columns:1fr}}
.yt-title-row{display:flex;gap:14px;flex-wrap:wrap}
.yt-field{display:grid;gap:6px}
.yt-label{font-size:12px;font-weight:600;color:var(--txt-2)}
.yt-count{color:var(--txt-3);font-weight:500}
.yt-irow{display:flex;gap:8px;align-items:center}
.yt-irow input,.yt-irow textarea{flex:1;min-width:0}
.yt-irow textarea{min-height:120px;resize:vertical}
.yt-copy-ico{width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--txt-3);display:grid;place-items:center;cursor:pointer;flex:none;transition:background .12s,color .12s}
.yt-copy-ico:hover{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.yt-copy-ico svg{width:13px;height:13px}
.yt-tips{display:grid;gap:8px}
.yt-tip-card{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;background:var(--panel-2);border-radius:var(--r-sm);font-size:12px;color:var(--txt-2);line-height:1.55}
.yt-tip-ico{flex:none;font-size:13px;line-height:1.6}
.yt-canvas-wrap{position:relative;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#0a0d10}
.yt-canvas-wrap canvas{display:block;width:100%;height:auto}
.yt-canvas-ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;color:var(--txt-3);font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;pointer-events:none}
.yt-canvas-ph svg{width:30px;height:30px;opacity:.3}
.yt-canvas-ph.hide{display:none}

/* ---------- cost / credits ---------- */
.cost-line{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--line-soft)}
.cost-line:last-child{border-bottom:none}
.cost-line .ci{width:34px;height:34px;border:none;border-radius:var(--r-sm);background:var(--accent-soft);display:grid;place-items:center;color:var(--accent);flex:none}
.cost-line .ci svg{width:15px;height:15px}
.cost-line .cl-main{flex:1;min-width:0}
.cost-line .cl-main .t{font-size:13px;font-weight:600}
.cost-line .cl-main .s{font-size:11.5px;color:var(--txt-3);margin-top:1px}
.cost-line .amt{font-family:'JetBrains Mono',monospace;font-size:12.5px}
.cost-line .amt.free{color:var(--good)}
.cost-line .amt.accent{color:var(--accent)}
.cost-line.cl-tot{border-top:1px solid var(--line);border-bottom:none;background:var(--panel-2)}
.cd-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:980px){.cd-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cd-stats{grid-template-columns:1fr}}
.cd-stat{border:1px solid var(--line);background:var(--panel);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:16px}
.cd-stat.big{background:var(--accent-soft);border-color:transparent}
.cd-stat .cd-k{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3)}
.cd-stat .cd-v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;margin-top:9px}
.cd-stat.big .cd-v{color:var(--accent);font-size:26px}
.cd-stat .cd-h{font-size:11px;color:var(--txt-3);margin-top:7px;line-height:1.4}
.cd-activity{max-height:430px;overflow:auto}
.cd-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.cd-row:last-child{border-bottom:none}
.cd-badge{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;padding:4px 7px;border:1px solid var(--line);border-radius:99px;background:var(--panel-2);flex:none;min-width:52px;text-align:center;text-transform:uppercase;letter-spacing:.03em}
.cd-badge.purchase{background:var(--good-soft);color:var(--good);border-color:transparent}
.cd-badge.trial_grant{background:#FBF3DC;color:#8A6512;border-color:transparent}
.v2v[data-theme="dark"] .cd-badge.trial_grant{background:#2E2712;color:var(--gold)}
.cd-badge.reserve{color:var(--accent)}
.cd-row-main{flex:1;min-width:0}
.cd-row-t{font-size:12.5px;font-weight:600}
.cd-row-s{font-size:11px;color:var(--txt-3);margin-top:2px}
.cd-row-amt{font-family:'JetBrains Mono',monospace;font-size:12px;white-space:nowrap}
.cd-row-amt.pos{color:var(--good)}
.cd-row-amt.neg{color:var(--accent)}
.cost-summary{padding:22px;display:flex;flex-direction:column;gap:14px;background:var(--accent-soft)}
.cost-summary .row{display:flex;align-items:center;justify-content:space-between}
.cost-summary .row .k{font-size:12px;color:var(--txt-2)}
.cost-summary .row .v{font-family:'JetBrains Mono',monospace;font-size:12px}
.cost-total{padding-top:14px;border-top:1px solid var(--line)}
.cost-total .k{font-size:11px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.cost-total .big{font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:600;color:var(--accent);margin-top:7px}

/* ---------- theme toggle + toast ---------- */
.theme-tog{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);overflow:hidden}
.theme-tog button{flex:1;height:32px;display:grid;place-items:center;border:none;background:transparent;color:var(--txt-2);cursor:pointer}
.theme-tog button.on{background:var(--panel);color:var(--txt)}
.theme-tog button svg{width:15px;height:15px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(18px);z-index:100;
  background:var(--ink);color:var(--bg);border:none;border-radius:99px;padding:12px 20px;font-size:13px;font-weight:600;
  box-shadow:var(--sh-3);opacity:0;transition:.22s;pointer-events:none;display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .d{width:8px;height:8px;border-radius:99px;background:var(--good)}

/* ---------- shot control ---------- */
.shot-granularity{display:flex;align-items:center;gap:11px;padding:13px 15px 9px}
.shot-granularity .sg-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3)}
.shot-granularity input[type=range]{flex:1}
.sg-note{font-size:12px;color:var(--txt-3);padding:0 15px 12px;border-bottom:1px solid var(--line-soft);line-height:1.4}
.sg-note b{color:var(--accent);font-weight:600}
.shotctl{padding:16px 18px 14px;border-bottom:1px solid var(--line-soft)}
.shotctl-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.shotctl-q{font-size:14.5px;font-weight:600;color:var(--txt);display:flex;flex-direction:column;gap:3px}
.shotctl-sub{font-size:11.5px;font-weight:400;color:var(--txt-3)}
.shotctl-stepper{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.sc-step{width:36px;height:36px;border:none;background:var(--panel);color:var(--txt);font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center}
.sc-step:hover{background:var(--panel-2)}
.sc-step:disabled{opacity:.35;pointer-events:none}
.sc-val{min-width:48px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.shotctl .shot-granularity{padding:10px 0 4px}
.shotframes{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 10px}
.shotframes i{width:22px;height:14px;border-radius:4px;background:var(--accent-soft);border:1px solid var(--accent);opacity:.75;flex:none}
.shotctl .sg-note{padding:0;border-bottom:none}

/* ---------- cast ---------- */
.cast-head{display:flex;flex-direction:column;gap:11px}
.cast-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.cast-controls .fld{flex:1;min-width:220px}
.cast-controls .btn{height:42px}
.cast-card{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--panel);box-shadow:var(--sh-1);transition:transform .12s,box-shadow .12s}
.cast-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.cast-card .cc-img{position:relative;aspect-ratio:1/1;overflow:hidden;border-bottom:1px solid var(--line-soft);background:#0a0d10;display:grid;place-items:center}
.cast-card .cc-img svg,.cast-card .cc-img img{width:100%;height:100%;object-fit:cover;display:block}
.cast-card .cc-loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,10,14,.74);color:#fff;letter-spacing:.06em}
.cast-card .cc-ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;padding:10px;font-size:10px;color:var(--txt-3);background:var(--panel-2);gap:6px;text-transform:uppercase;letter-spacing:.05em}
.cast-card .cc-ph svg{width:30px;height:30px}
.cast-card .cc-refresh{position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;display:grid;place-items:center;border:none;border-radius:99px;background:rgba(255,255,255,.92);color:#17191F;box-shadow:var(--sh-1);cursor:pointer}
.cast-card .cc-refresh:hover{background:var(--accent);color:#fff}
.cast-card .cc-refresh:disabled{opacity:.6;pointer-events:none}
.cast-card .cc-refresh svg{width:13px;height:13px}
.cast-card .cc-refresh.spinning svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cast-card .cc-refresh-cost{position:absolute;top:-8px;right:-8px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:9px;border-radius:99px;background:var(--accent);color:#fff}
.cast-card .cc-meta{padding:11px 12px}
.cast-card .cc-name{font-size:12px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.cast-card .cc-name .cc-tag{margin-left:auto;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:99px;background:var(--good-soft);color:var(--good);border:none}
.cast-card .cc-name .cc-tag.draft{background:var(--panel-2);color:var(--txt-3)}
.cast-card .cc-prompt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;font-size:10px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.cast-card .cc-edit{border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--txt-2);width:24px;height:22px;display:grid;place-items:center;font-size:12px;line-height:1;cursor:pointer}
.cast-card .cc-edit:hover{background:var(--accent-soft);color:var(--accent)}
.cast-card .cc-prompt-edit{width:100%;min-height:84px;margin-top:6px;font-size:11px;line-height:1.5;padding:8px;resize:vertical;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--txt);font-family:'JetBrains Mono',monospace}
.cast-card .cc-desc{font-size:11.5px;color:var(--txt-2);margin-top:4px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- sidebar collapse ---------- */
.nav-toggle{width:38px;height:36px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--txt);cursor:pointer;display:grid;place-items:center;flex:none;margin-right:2px}
.nav-toggle:hover{background:var(--panel-2)}
.nav-toggle svg{width:18px;height:18px}
.sidebar{transition:width .18s ease}
.sidebar.collapsed{width:64px}
.sidebar.collapsed .sb-cap{font-size:0;padding:14px 0 6px;text-align:center}
.sidebar.collapsed .rail-v .rv{justify-content:center;padding:12px 0}
.sidebar.collapsed .rail-v .rv .lab,.sidebar.collapsed .rail-v .rv .chk{display:none}
.sidebar.collapsed .sb-foot{display:none}
.sb-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.sb-head .sb-cap{padding:0}
.sb-collapse{width:26px;height:26px;border:none;border-radius:7px;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--txt-3);flex:none}
.sb-collapse:hover{background:var(--panel-3);color:var(--txt)}
.sb-collapse svg{width:14px;height:14px;transition:transform .18s}
.sidebar.collapsed .sb-head{justify-content:center;padding:12px 0 6px}
.sidebar.collapsed .sb-head .sb-cap{display:none}
.sidebar.collapsed .sb-collapse svg{transform:rotate(180deg)}

/* ---------- history ---------- */
.hist-list{display:flex;flex-direction:column}
.hist-row{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--line-soft)}
.hist-row:last-child{border-bottom:none}
.hist-thumb{width:66px;height:38px;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex:none;background:#0a0d10;position:relative}
.hist-thumb svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hist-thumb .hb{position:absolute;inset:0;display:grid;place-items:center;color:var(--txt-3);background:var(--panel-2)}
.hist-main{flex:1;min-width:0}
.hist-t{font-size:13px;font-weight:600;color:var(--txt)}
.hist-s{font-size:11px;color:var(--txt-3);margin-top:3px;font-family:'JetBrains Mono',monospace}
.hist-restore{flex:none}
.rail-util{border-top:1px solid var(--line)}
.hist-row.active{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.hist-current{flex:none;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--good);background:var(--good-soft);border-radius:99px;padding:6px 12px}
.hist-current .d{width:7px;height:7px;border-radius:99px;background:var(--good)}
.hist-empty{padding:34px 16px;text-align:center;color:var(--txt-3);font-size:12.5px;line-height:1.6}

/* ---------- storyboard ---------- */
.sb-win .win-bar .btn.sm svg{width:13px;height:13px}
.sb-intro{padding:12px 18px;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--txt-2);line-height:1.5}
.sb-intro b{color:var(--accent);font-weight:600}
.sb-list{display:flex;flex-direction:column}
.sb-card{display:grid;grid-template-columns:172px 1fr;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.sb-card:last-child{border-bottom:none}
.sb-thumb{position:relative;aspect-ratio:var(--frame-ar, 16/9);border:1px solid var(--line);border-radius:var(--r-sm);background:#0a0d10;overflow:hidden}
.sb-thumb svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sb-ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--panel-2);color:var(--txt-3);font-family:'JetBrains Mono',monospace;font-size:8.5px;text-transform:uppercase;letter-spacing:.1em}
.sb-ix{position:absolute;top:6px;left:6px;z-index:2;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;background:rgba(6,8,12,.65);color:#fff;padding:2px 6px;border-radius:5px}
.sb-reroll{position:absolute;top:6px;right:6px;z-index:3;width:25px;height:25px;border:none;border-radius:99px;background:rgba(255,255,255,.92);color:#17191F;cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-1);font-size:13px;line-height:1}
.sb-reroll:hover{background:var(--accent);color:#fff}
.sb-reroll.spinning{animation:spin .8s linear infinite}
.sb-card.done .sb-thumb{cursor:pointer}
.sb-body{min-width:0;display:flex;flex-direction:column;gap:7px}
.sb-meta{display:flex;align-items:center;gap:9px}
.sb-ts{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--accent)}
.sb-tag{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:99px;background:var(--good-soft);color:var(--good);border:none}
.sb-tag.draft{background:var(--panel-2);color:var(--txt-3)}
.sb-line{font-size:13px;color:var(--txt-2);line-height:1.5}
.sb-prompt-head,.sb-sub-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:2px}
.sb-prompt{width:100%;min-height:46px;font-size:11.5px;line-height:1.5;padding:9px 10px;resize:vertical;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--txt);font-family:'JetBrains Mono',monospace}
.sb-sub-head span:first-child{display:flex;align-items:center;gap:5px;color:var(--accent)}
.sb-sub{width:100%;min-height:40px;font-size:13px;line-height:1.5;padding:8px 10px;resize:vertical;background:transparent;border:1px dashed var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);color:var(--txt);font-style:italic}
.sb-sub:focus{outline:none;border-style:solid;border-left-style:solid;background:var(--panel)}
@media(max-width:560px){.sb-card{grid-template-columns:1fr}.sb-thumb{max-width:240px}}

/* ---------- estimate + motion ---------- */
.est-rows{display:flex;flex-direction:column;gap:8px;background:var(--panel-2);border:none;border-radius:var(--r-md);padding:14px 15px;box-shadow:none}
.est-rows .er{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;color:var(--txt-2)}
.est-rows .er-k{display:flex;align-items:baseline;gap:7px}
.est-rows .er-k em{font-style:normal;font-size:10px;color:var(--txt-3);font-family:'JetBrains Mono',monospace}
.est-rows .er-v{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--txt)}
.est-rows .er-tot{padding-top:10px;border-top:1px solid var(--line);margin-top:2px}
.est-rows .er-tot .er-k{font-weight:600;color:var(--txt);text-transform:none;letter-spacing:0;font-size:12.5px}
.est-rows .er-tot .er-v{font-size:18px;font-weight:600;color:var(--accent)}
.est-rows .er-usd{font-size:11px;color:var(--txt-3);text-align:right}
.motion-allrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2)}
.motion-allrow .ma-lab{font-size:11.5px;font-weight:600;color:var(--txt-2)}
.sel.sm{min-width:128px}
.sel.sm select{padding:7px 26px 7px 9px;font-size:12px}
.sb-ctl{display:flex;align-items:center;gap:10px;margin-top:4px}
.sb-motion-ctl{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3)}
.sb-motion-ctl .sel{min-width:122px}
.sb-mbadge{position:absolute;left:6px;bottom:6px;z-index:2;display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:rgba(6,8,12,.65);color:#fff;padding:3px 7px;border-radius:99px}
.sb-thumb svg{transform-origin:center center}
@keyframes kbZoomIn{from{transform:scale(1)}to{transform:scale(1.14)}}
@keyframes kbZoomOut{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes kbPanL{from{transform:scale(1.12) translateX(4%)}to{transform:scale(1.12) translateX(-4%)}}
@keyframes kbPanR{from{transform:scale(1.12) translateX(-4%)}to{transform:scale(1.12) translateX(4%)}}
@keyframes kbPush{from{transform:scale(1.03)}to{transform:scale(1.11)}}
.sb-thumb.m-zoomin svg{animation:kbZoomIn 5s ease-in-out infinite alternate}
.sb-thumb.m-zoomout svg{animation:kbZoomOut 5s ease-in-out infinite alternate}
.sb-thumb.m-panleft svg{animation:kbPanL 6s ease-in-out infinite alternate}
.sb-thumb.m-panright svg{animation:kbPanR 6s ease-in-out infinite alternate}
.sb-thumb.m-pushin svg{animation:kbPush 5s ease-in-out infinite alternate}
.sb-thumb .sb-ph{display:flex;flex-direction:column;gap:6px}
.sb-ph svg{opacity:.5}
.sb-mbadge.still{background:rgba(6,8,12,.45);color:rgba(255,255,255,.75)}
.sb-anim-cost{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--accent);white-space:nowrap}
.sb-anim-cost.still,.sb-anim-cost.off{color:var(--txt-3)}
.animate-all{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);cursor:pointer;transition:border-color .12s}
.animate-all:hover{border-color:var(--accent)}
.animate-all .ma-lab{font-size:12.5px;font-weight:600;color:var(--txt)}
.animate-all input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.aa-right{display:flex;align-items:center;gap:10px}
.aa-cost{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--accent);white-space:nowrap}
.sb-refresh{position:absolute;top:6px;right:6px;z-index:3;width:26px;height:26px;border:none;border-radius:99px;background:rgba(255,255,255,.92);color:#17191F;display:grid;place-items:center;box-shadow:var(--sh-1);cursor:pointer}
.sb-refresh:hover{background:var(--accent);color:#fff}
.sb-refresh:disabled{opacity:.6;pointer-events:none}
.sb-refresh svg{width:13px;height:13px}
.sb-refresh.spinning svg{animation:spin .8s linear infinite}
.sb-refresh-cost{position:absolute;top:-8px;right:-8px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:9px;border-radius:99px;background:var(--accent);color:#fff}
.sb-anim-toggle{display:flex;align-items:center;gap:9px;margin-top:6px;cursor:pointer;font-size:12px;color:var(--txt-2);user-select:none}
.sb-anim-toggle input{position:absolute;opacity:0;pointer-events:none}
.sb-anim-box{width:34px;height:20px;border:none;border-radius:99px;background:var(--panel-3);position:relative;flex:none;transition:background .15s}
.sb-anim-box::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:99px;background:#fff;box-shadow:var(--sh-1);transition:transform .15s}
.sb-anim-toggle.on .sb-anim-box{background:var(--accent)}
.sb-anim-toggle.on .sb-anim-box::after{transform:translateX(14px)}
.sb-anim-txt{font-weight:600}
@keyframes animPush{from{transform:scale(1)}to{transform:scale(1.05)}}
.sb-thumb.anim svg{animation:animPush 6s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.sb-thumb svg{animation:none!important}}

.hide{display:none!important}

/* ---------- brand assets ---------- */
.brand .mark.logo{background:var(--accent);padding:0;overflow:hidden}
.brand .mark.logo img{width:100%;height:100%;object-fit:cover;display:block}
.credit-pill img.coin{width:20px;height:20px;border:none;background:none;border-radius:0;object-fit:contain;filter:none}

/* ---------- overlay + recorder stage ---------- */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(10,12,18,.5);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px}
.overlay-card{width:min(660px,95vw);max-height:92vh;overflow:auto}
.ov-close{margin-left:auto;width:28px;height:28px;border:none;border-radius:7px;background:transparent;color:var(--txt-3);
  font-size:17px;line-height:1;display:grid;place-items:center;cursor:pointer}
.ov-close:hover{background:var(--panel-3);color:var(--txt)}
.rec-stage{position:relative;height:150px;border:1px solid var(--line);border-radius:var(--r-md);background:#0a0d10;overflow:hidden}
.rec-stage canvas{display:block;width:100%;height:100%}
.rec-time{position:absolute;bottom:9px;right:12px;font-size:14px;color:#fff}
.rec-badge{position:absolute;top:10px;left:12px;display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:600;
  letter-spacing:.08em;color:#fff;background:rgba(6,8,12,.6);padding:4px 9px;border-radius:99px}
.rec-badge .d{width:7px;height:7px;border-radius:99px;background:#E5484D;animation:blink 1s steps(1) infinite}
.rec-toggle{width:54px;height:54px}
.rec-toggle .rec-dot{width:18px;height:18px;border-radius:99px;background:#E5484D;display:block;transition:.12s}
.rec-toggle.on .rec-dot{width:14px;height:14px;border-radius:4px}
.rec-toggle.on{background:var(--accent-soft)}

/* ---------- hero ---------- */
.hero{padding:52px 0 56px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;background:var(--panel);padding:7px 14px;color:var(--txt-2);margin-bottom:30px;box-shadow:var(--sh-1)}
.eyebrow .dot{width:7px;height:7px;border-radius:99px;background:var(--good);flex:none}
.hero-title{font-family:'Instrument Sans',sans-serif;font-weight:700;letter-spacing:-.03em;font-size:clamp(32px,4.6vw,64px);line-height:1.06;margin:0;color:var(--txt)}
.hero-title .hl{color:var(--accent)}
.hero-sub{margin:24px 0 0;font-size:15.5px;color:var(--txt-2);max-width:62ch;line-height:1.75}
.hero-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-stats{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.hero-stat{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:14px 20px;box-shadow:var(--sh-1);min-width:118px}
.hero-stat .n{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600}
.hero-stat .l{font-size:11px;color:var(--txt-3);margin-top:6px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* ---------- guide modal ---------- */
.guide-steps{display:grid;gap:18px;margin-top:6px}
.guide-step{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
.guide-num{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--accent);width:28px;height:28px;border-radius:99px;display:grid;place-items:center;flex:none;margin-top:2px}
.guide-step-body .gt{font-size:14px;font-weight:600;color:var(--txt)}
.guide-step-body .gs{font-size:13px;color:var(--txt-2);margin-top:4px;line-height:1.6}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .sidebar{width:64px}
  .sidebar .sb-cap{font-size:0;padding:14px 0 6px;text-align:center}
  .sidebar .rail-v .rv{justify-content:center;padding:12px 0}
  .sidebar .rail-v .rv .lab,.sidebar .rail-v .rv .chk{display:none}
  .sidebar .sb-foot{display:none}
  .sidebar.expanded{width:232px;position:absolute;top:0;bottom:0;left:0;z-index:50;background:var(--panel);box-shadow:var(--sh-3)}
  .sidebar.expanded .sb-cap{font-size:11px;padding:16px 18px 8px;text-align:left}
  .sidebar.expanded .rail-v .rv{justify-content:flex-start;padding:10px 12px}
  .sidebar.expanded .rail-v .rv .lab,.sidebar.expanded .rail-v .rv .chk{display:block}
  .sidebar.expanded .sb-foot{display:block}
  .sidebar .sb-head{justify-content:center;padding:12px 0 6px}
  .sidebar .sb-head .sb-cap{display:none}
  .sidebar .sb-collapse svg{transform:rotate(180deg)}
  .sidebar.expanded .sb-head{justify-content:space-between;padding:14px 16px 6px}
  .sidebar.expanded .sb-head .sb-cap{display:inline}
  .sidebar.expanded .sb-collapse svg{transform:none}
}
@media(max-width:720px){
  .main-head{flex-wrap:wrap;padding:12px 16px}
  .main-head #mhAction{width:100%}
  .main-head #mhAction .btn{width:100%;justify-content:center}
  .main-body{padding:16px 14px 60px}
  .brand .bs{display:none}
  .cast-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){.cast-grid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}.transport{gap:9px}}

/* ============================================================
   STORYANIMATOR — MODERN SKIN
   Overrides the shared retro stylesheets (studio-system.css,
   studio-ui.css, recorder.css) with the modern control language.
   Loaded LAST.
   ============================================================ */

/* ---------- base ---------- */
.v2v{font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;background-image:none}
.v2v .hard,.v2v .hard-sm{box-shadow:var(--sh-1)}
.v2v .bd{border:1px solid var(--line)}

/* ---------- topbar / brand ---------- */
.v2v .topbar{height:58px;padding:0 20px;background:var(--panel);border-bottom:1px solid var(--line)}
.v2v .brand .mark{width:34px;height:34px;border:none;border-radius:9px;box-shadow:var(--sh-1)}
.v2v .brand .mark.logo{border-radius:9px}
.v2v .brand .bt{font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.01em}
.v2v .brand .bs{font-size:10.5px;color:var(--txt-3);margin-top:2px;letter-spacing:.02em}

.v2v .credit-pill{border:1px solid var(--line);border-radius:99px;background:var(--panel);box-shadow:var(--sh-1);padding:5px 6px 5px 12px;gap:7px}
.v2v .credit-pill .ct{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600}
.v2v .credit-pill .add{width:24px;height:24px;border:none;border-radius:99px;background:var(--accent);color:#fff;font-size:15px;cursor:pointer}
.v2v .credit-pill .add:hover{background:var(--accent-2)}

/* ---------- buttons ---------- */
.v2v .btn{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--txt);
  font-family:inherit;font-weight:600;font-size:13px;text-transform:none;letter-spacing:0;
  padding:10px 16px;box-shadow:var(--sh-1);transition:background .12s,border-color .12s,transform .1s}
.v2v .btn:hover{transform:none;box-shadow:var(--sh-1);background:var(--panel-2)}
.v2v .btn:active{transform:scale(.98);box-shadow:var(--sh-1)}
.v2v .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.1),0 6px 16px -8px var(--accent)}
.v2v .btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.v2v .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.v2v .btn.ghost:hover{background:var(--panel-2)}
.v2v .btn svg{width:15px;height:15px}
.v2v .btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px;box-shadow:var(--sh-1)}
.v2v .btn.lg{padding:13px 22px;font-size:14px;border-radius:12px}
.v2v .btn:disabled{opacity:.45;pointer-events:none}
.v2v .btn.primary svg [stroke="#fff"]{stroke:#fff}

/* ---------- window chrome ---------- */
.v2v .win{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--sh-1);overflow:hidden}
.v2v .win-bar{padding:11px 18px;border-bottom:1px solid var(--line-soft);background:var(--panel);color:var(--txt)}
.v2v .win-bar .lights{display:none}
.v2v .win-bar .wt{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;color:var(--txt)}
.v2v .win-bar .wmeta{font-size:11px;color:var(--txt-3);font-weight:600;letter-spacing:.05em}
.v2v[data-theme="dark"] .win-bar .wmeta{color:var(--txt-3)}
/* The modern win-bar is light, so the base white-on-ink close (×) is invisible. Make it
   dark-on-light for every modal that uses it (e.g. the research modal's guide-card, which
   otherwise leaves users with no visible way back). Matches the .audio-card treatment. */
.v2v .win-bar .auth-close{border:none;border-radius:8px;background:transparent;color:var(--txt-3);width:36px;height:36px;font-size:26px;line-height:1}
.v2v .win-bar .auth-close:hover{background:var(--panel-3);color:var(--txt)}
.v2v .win-body{padding:18px}
.v2v .win.accent .win-bar{background:var(--panel);color:var(--txt)}
.v2v .win.accent .win-bar .wmeta{color:var(--txt-3);opacity:1}

/* ---------- fields / inputs ---------- */
.v2v .fld-label{font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0}
.v2v .fld-label .li{width:24px;height:24px;border:none;border-radius:7px;background:var(--accent-soft);color:var(--accent)}
.v2v .fld-label .li svg{width:13px;height:13px}
.v2v .fld-help{font-size:11.5px;color:var(--txt-3)}
.v2v select,.v2v input[type=number],.v2v input[type=text],.v2v input:not([type]),.v2v input[type=email],.v2v input[type=password],.v2v input[type=search],.v2v input[type=url],.v2v textarea{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--txt);
  font-family:inherit;font-size:13.5px;font-weight:500;transition:border-color .12s,box-shadow .12s}
.v2v textarea{font-weight:400;line-height:1.6;font-size:13px}
.v2v select:focus,.v2v input:focus,.v2v textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent);background:var(--panel)}
.v2v .sel svg{width:13px;height:13px;color:var(--txt-3)}

/* range → native accent */
.v2v input[type=range]{-webkit-appearance:auto;appearance:auto;height:auto;background:transparent;border:none;padding:0;accent-color:var(--accent)}
.v2v input[type=range]::-webkit-slider-thumb{-webkit-appearance:auto}
.v2v .range-val{font-family:'JetBrains Mono',monospace;font-size:12px}

/* segmented */
.v2v .seg{border:none;border-radius:10px;background:var(--panel-2);padding:3px;gap:2px;box-shadow:none;overflow:hidden}
.v2v .seg button{border:none;border-radius:8px;background:transparent;font-family:inherit;font-weight:600;font-size:12.5px;text-transform:none;letter-spacing:0;padding:8px;color:var(--txt-2)}
.v2v .seg button.on{background:var(--panel);color:var(--txt);box-shadow:var(--sh-1)}

/* dropzone */
.v2v .dropzone{border:1.5px dashed color-mix(in oklab,var(--txt-3) 55%,transparent);border-radius:var(--r-md);background:var(--panel);transition:border-color .15s,background .15s}
.v2v .dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}
.v2v .dropzone .ico{border:none;border-radius:99px;background:var(--accent);box-shadow:0 6px 16px -6px var(--accent)}
.v2v .dropzone h4{font-weight:600}
.v2v .dropzone p{font-size:12px}

/* badges */
.v2v .badge{font-size:10.5px;font-weight:600;text-transform:none;letter-spacing:.02em;border:none;border-radius:99px;padding:5px 11px;background:var(--panel-2);color:var(--txt-2)}
.v2v .badge .d{width:6px;height:6px;border-radius:99px}
.v2v .badge.ok{color:var(--good);background:var(--good-soft);border:none}
.v2v .badge.wait{color:var(--warn);background:#FBF3DC;border:none}
.v2v[data-theme="dark"] .badge.wait{background:#2E2712}
.v2v .badge.todo{color:var(--txt-3)}

/* meters */
.v2v .meter-row .k{font-size:11px;letter-spacing:.05em;font-weight:600}
.v2v .meter-row .v{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600}
.v2v .qbar{height:8px;border:none;border-radius:99px;background:var(--panel-3);padding:0;overflow:hidden}
.v2v .qbar i{border-radius:99px}
.v2v .quality-hint{font-size:12px;border:none;border-radius:var(--r-sm);background:var(--panel-2);padding:12px}
.v2v .est-box{background:var(--accent-soft);border:none;border-radius:var(--r-md);box-shadow:none}
.v2v .est-box .big{font-family:'JetBrains Mono',monospace;font-weight:600}

/* step header */
.v2v .step-badge{width:38px;height:38px;border:none;border-radius:11px;font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;background:var(--accent-soft);color:var(--accent);box-shadow:none}
.v2v .step-head h2{font-family:inherit;font-weight:650;font-size:18px;letter-spacing:-.01em;margin:0}
.v2v .step-head p{margin:3px 0 0;font-size:12.5px;color:var(--txt-3)}
.v2v .step-head{align-items:center}

/* ---------- sidebar rail ---------- */
.v2v .rail-v{background:transparent;border-right:none;padding:4px 10px 10px;gap:2px}
.v2v .rail-v .rv{padding:9px 10px;border-bottom:none;border-radius:10px;gap:11px;transition:background .12s}
.v2v .rail-v .rv:hover{background:var(--panel-3)}
.v2v .rail-v .rv .n{width:26px;height:26px;border:none;border-radius:99px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;background:var(--panel-3);color:var(--txt-2)}
.v2v .rail-v .rv .lab .t{font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0}
.v2v .rail-v .rv .lab .s{font-size:10.5px;color:var(--txt-3)}
.v2v .rail-v .rv.done .n{background:var(--good-soft);color:var(--good);border:none}
.v2v .rail-v .rv.active{background:var(--accent-soft);border-left:none;padding-left:10px;box-shadow:none}
.v2v .rail-v .rv.active .lab .t{color:var(--accent)}
.v2v .rail-v .rv.active .n{background:var(--accent);color:#fff}
.v2v .rail-v .rv.todo{opacity:.55}
.sidebar.collapsed .rail-v .rv{border-left:none!important}
.sidebar.collapsed .rail-v .rv.active{box-shadow:none}
.v2v .rail-util{border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.v2v .sb-foot{padding:14px 18px;border-top:1px solid var(--line)!important}

/* stepper + prail (if used) */
.v2v .stepper,.v2v .prail{border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden}
.v2v .stepper .st,.v2v .prail .pr{border-right:1px solid var(--line-soft)}
.v2v .stepper .st .n,.v2v .prail .pr .dot{border:none;border-radius:99px;font-family:'JetBrains Mono',monospace;background:var(--panel-3);color:var(--txt-2)}

/* tiles */
.v2v .tile{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1)}
.v2v .tile .img{border-bottom:1px solid var(--line-soft)}
.v2v .tile .img .ix{font-family:'JetBrains Mono',monospace;font-size:9px;background:rgba(6,8,12,.65);color:#fff;border-radius:5px;padding:2px 6px}
.v2v .scene{border:1px solid var(--line);border-radius:var(--r-sm)}
.v2v .hr{height:1px;background:var(--line-soft)}
.v2v .note{font-size:12px}

/* ---------- dots (account) menu ---------- */
.v2v .dots-btn{width:38px;height:36px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--txt);font-size:17px;letter-spacing:.05em;box-shadow:var(--sh-1);transition:background .12s}
.v2v .dots-btn:hover{transform:none;box-shadow:var(--sh-1);background:var(--panel-2)}
.v2v .dots-dropdown{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--sh-3);min-width:190px;overflow:hidden}
.v2v .dd-user-info{border-bottom:1px solid var(--line-soft);padding:11px 13px}
.v2v .dd-username{font-size:12px;font-weight:600}
.v2v .dd-tier{font-size:9px;border:none;border-radius:99px;background:var(--accent-soft);color:var(--accent);padding:3px 8px}
.v2v .dd-theme{border-bottom:1px solid var(--line-soft);padding:6px;gap:4px}
.v2v .dd-theme button{border-radius:7px;font-size:11px;text-transform:none;letter-spacing:0;padding:8px 6px}
.v2v .dd-theme button.on{background:var(--panel-3);color:var(--txt)}
.v2v .dd-item{border-top:none;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;padding:11px 14px;color:var(--txt)}
.v2v .dd-item:hover{background:var(--panel-2)}
.v2v .dd-item.dd-danger{color:#a02222}
.v2v .dd-item.dd-danger:hover{background:#f3e0e0;color:#8a1c1c}

/* ---------- modal shells ---------- */
.sa-modal{background:rgba(10,12,18,.5);backdrop-filter:blur(3px)}
.v2v .sa-card,.sa-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--sh-3)}
.sa-card .win-bar{padding:12px 18px;border-bottom:1px solid var(--line-soft);background:var(--panel);color:var(--txt)}
.sa-card .win-bar .lights{display:none}
.sa-card .win-bar .wt{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0}
.sa-close{border:none;border-radius:8px;background:transparent;color:var(--txt-3);font-weight:500}
.sa-close:hover{background:var(--panel-3);color:var(--txt)}
.sa-body{padding:26px}
.sa-eyebrow{border:none;border-radius:99px;background:var(--accent-soft);color:var(--accent);box-shadow:none;font-size:10.5px;letter-spacing:.06em}
.sa-eyebrow .d{width:7px;height:7px;border-radius:99px;background:var(--accent)}
.sa-body h2{font-family:inherit;font-weight:650;letter-spacing:-.02em}
.sa-body .lead{font-size:13.5px}

/* auth */
.auth-tabs{border:none;border-radius:10px;background:var(--panel-2);padding:3px;gap:2px;box-shadow:none;overflow:hidden}
.auth-tabs button{border:none;border-radius:8px;background:transparent;color:var(--txt-2);text-transform:none;letter-spacing:0;font-size:12.5px;padding:9px 6px}
.auth-tabs button.on{background:var(--panel);color:var(--txt);box-shadow:var(--sh-1)}
.auth-form label{font-size:12px;text-transform:none;letter-spacing:0;color:var(--txt-2)}
.auth-form input{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:11px 12px;font-size:13.5px}
.auth-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent)}
.auth-feat{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);box-shadow:none}
.auth-feat .ttl{font-family:inherit;font-weight:650;font-size:13.5px}
.auth-feat li .ck{border:none;border-radius:99px;background:var(--good-soft);color:var(--good);width:20px;height:20px}
.v2v .btn.google{background:var(--panel);border:1px solid var(--line)}

/* pricing / top-up */
.payg-badge{border:none;border-radius:99px;background:var(--good-soft);color:var(--good);box-shadow:none;text-transform:none;letter-spacing:0;font-size:11.5px}
.topup-preset{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--sh-1);transition:border-color .12s,background .12s}
.topup-preset:hover{transform:none;box-shadow:var(--sh-1);background:var(--accent-soft);border-color:var(--accent)}
.topup-preset.on{background:var(--accent);border-color:var(--accent);color:#fff}
.topup-preset .tp-usd{font-family:'JetBrains Mono',monospace;font-weight:600}
.topup-preset .tp-cr{text-transform:none;letter-spacing:0;font-weight:500}
.topup-field{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:none}
.topup-lab{text-transform:none;letter-spacing:0;font-size:12px}
.amt-row{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.amt-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent)}
.amt-cur{font-family:'JetBrains Mono',monospace;font-size:16px}
.amt-row input{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:600}
.topup-quote{border:none;border-radius:var(--r-md);background:var(--accent-soft);box-shadow:none}
.topup-quote .tq-total{font-family:'JetBrains Mono',monospace;font-weight:600}
.topup-tier{border:1px solid var(--line-soft);border-radius:var(--r-sm);font-weight:500}
.topup-tier.on{border-color:var(--accent)}
.topup-tier .tt-pct{font-family:'JetBrains Mono',monospace}

/* tts / song / music modals */
.tts textarea{border:1px solid var(--line);border-radius:10px;background:var(--panel);font-family:inherit;font-size:13.5px}
.tts textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent)}
.tts-meta #ttsCostEst{font-family:'JetBrains Mono',monospace}
.tts-clone{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2)}
.tts-clone summary{text-transform:none;letter-spacing:0;font-size:12.5px}
.tts-result{border:none;border-radius:var(--r-md);background:var(--accent-soft);box-shadow:none}
.tts-result-wave{border:none;border-radius:var(--r-sm)}
.tts-result-tag{border:none;border-radius:99px;background:rgba(6,8,12,.6)}
.tts-result-meta,.tts-rec-time{font-family:'JetBrains Mono',monospace}
.tts-rec-btn .rec-dot{border:none;border-radius:99px;background:#E5484D}
.tts-rec-btn.recording{border-radius:9px}
.tts-rec-feedback canvas{border:1px solid var(--line);border-radius:6px}
.tts-sample{border:1px solid var(--line);border-radius:99px;font-weight:500;padding:3px 5px 3px 10px}
.tts-sample-x{border-radius:99px;background:var(--panel-3);color:var(--txt-2)}
.music-len-readout{font-family:'JetBrains Mono',monospace}

/* script chat */
.script-fab{border:none;border-radius:99px;box-shadow:0 8px 24px -8px var(--accent),var(--sh-2)}
.script-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px var(--accent),var(--sh-2)}
.script-panel{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.script-panel-head{background:var(--panel);color:var(--txt);border-bottom:1px solid var(--line-soft);text-transform:none;letter-spacing:0;font-size:13px;padding:12px 14px}
.script-panel-head button{color:var(--txt-3)}
.script-panel-head .sc-total{color:var(--accent)}
.script-msg{border:none;border-radius:14px;padding:10px 13px}
.script-msg.user{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.script-msg.ai{background:var(--panel-2);color:var(--txt);border-bottom-left-radius:4px}
.script-input-row{border-top:1px solid var(--line-soft)}
.script-input-row textarea{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.script-input-row button{border:none;border-radius:10px;background:var(--accent);color:#fff}
.script-use-btn{border:none;border-radius:10px;background:var(--accent);color:#fff;text-transform:none;letter-spacing:0;font-size:12.5px}

/* step 6 export bits */
.export-controls{border-top:1px solid var(--line)}
.export-controls h3{font-family:inherit;font-weight:650}
.export-col{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);box-shadow:none}
.quality-est b{font-family:'JetBrains Mono',monospace}
.checkline{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--txt)}
.checkline input{accent-color:var(--accent)}
.music-vol{text-transform:none;letter-spacing:0}
.card-cfg{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2)}
.card-text{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:9px 10px;font-size:12.5px}
.card-text:focus{outline:none;border-color:var(--accent)}
.card-mini{text-transform:none;letter-spacing:0}
.card-mini input[type=number]{border:1px solid var(--line);border-radius:7px}
.card-mini input[type=color]{border:1px solid var(--line);border-radius:7px}
.transport-trans{text-transform:none;letter-spacing:0;font-size:12px}
.transport-trans select{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:7px 10px;font-weight:500}

/* combobox */
.combo-toggle{color:var(--txt-3)}
.combo-list{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--sh-3);padding:5px}
.combo-list li{border-bottom:none;border-radius:8px;font-family:inherit;font-weight:500;font-size:13px;padding:9px 11px}
.combo-list li:hover,.combo-list li.active{background:var(--panel-2)}
.combo-list li[aria-selected="true"]{border-left:none;padding-left:11px;background:var(--accent-soft);color:var(--accent)}

/* ---------- recorder modal ---------- */
.audio-modal{background:rgba(10,12,18,.55);backdrop-filter:blur(3px)}
.audio-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--sh-3);font-family:inherit}
.audio-card .win-bar{padding:12px 18px;border-bottom:1px solid var(--line-soft);background:var(--panel);color:var(--txt)}
.audio-card .win-bar .lights{display:none}
.audio-card .win-bar .wt{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0}
.audio-card .auth-close{border:none;border-radius:8px;background:transparent;color:var(--txt-3)}
.audio-card .auth-close:hover{background:var(--panel-3);color:var(--txt)}
.audio-hero h2{font-family:inherit;font-weight:650;letter-spacing:-.02em}
.track-sidebar-space{border-right:1px solid var(--line);background:var(--panel-2)}
.timeline-ruler{background:var(--panel-2);border-bottom:1px solid var(--line)}
.track-row{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.track-row.active{border-color:var(--accent)}
.track-sidebar{border-right:1px solid var(--line);background:var(--panel-2)}
.track-name{text-transform:none;letter-spacing:0;font-size:10px}
.track-import,.track-mute,.track-del{border:1px solid var(--line);border-radius:5px;background:var(--panel)}
.track-mute.muted{background:var(--accent);color:#fff}
.track-del:hover{background:#E5484D;color:#fff}
.track-resize-bar{background:var(--panel-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.track-resize-bar:hover{background:var(--accent-soft);border-color:var(--accent-soft)}
.track-resize-bar:hover::after{color:var(--accent)}
.track-add-btn{border:1.5px dashed color-mix(in oklab,var(--txt-3) 55%,transparent);border-radius:var(--r-sm);text-transform:none;letter-spacing:0;font-size:12px;padding:8px}
.track-add-btn:hover{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.track-ctx-menu{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--sh-3);overflow:hidden;padding:5px}
.ctx-item{border-bottom:none;border-radius:8px;text-transform:none;letter-spacing:0;font-size:12.5px}
.ctx-item:hover{background:var(--panel-2);color:var(--txt)}
.ctx-item.ctx-danger:hover{background:#FDE8E8;color:#C81E1E}
.v2v[data-theme="dark"] .ctx-item.ctx-danger:hover{background:#3A1414;color:#F98080}
.wave-hint{text-transform:none;letter-spacing:0;font-weight:500;font-size:11px}
.zoom-level{font-family:'JetBrains Mono',monospace}
.zoom-btn{border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--sh-1)}
.zoom-btn:hover{background:var(--panel-2)}
.audio-range label{text-transform:none;letter-spacing:0;font-size:11.5px}
.transport-bar{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);box-shadow:none;padding:10px}
.tbtn-group .tbtn{border-right:none}
.tbtn-group .tbtn:last-child{border-right:1px solid var(--line)}
.audio-card .tbtn{border:1px solid var(--line);background:var(--panel);color:var(--txt);box-shadow:none;border-radius:0}
.audio-card .tbtn-group .tbtn:first-child{border-radius:8px 0 0 8px}
.audio-card .tbtn-group .tbtn:last-child{border-radius:0 8px 8px 0}
.audio-card .tbtn-group .tbtn:only-child{border-radius:8px}
.audio-card .tbtn:hover:not(:disabled){background:var(--panel-2)}
.audio-card .tbtn:active:not(:disabled){background:var(--panel-3);color:var(--txt)}
.audio-card .tbtn.on{background:var(--accent-soft);color:var(--accent)}
.tbtn-rec .rec-dot{border-radius:99px}
.tbtn-save{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)}
.audio-card [data-tip]:hover::after{background:var(--ink);color:var(--bg);border-radius:7px;text-transform:none;letter-spacing:0;box-shadow:var(--sh-2);font-weight:600}
.tbtn-sep-v{background:var(--line);opacity:1;width:1px}
.transport-time,.boost-group #boostReadout{font-family:'JetBrains Mono',monospace}
.boost-mini-label{letter-spacing:.05em}
.speed-btn{text-transform:none}
.audio-note{text-transform:none;letter-spacing:0;font-size:11.5px}
.audio-foot{border-top:1px solid var(--line-soft)}
.script-teleprompter{border:1px solid var(--line);border-radius:var(--r-md)}
.script-tp-bar{background:var(--panel-2);color:var(--txt);text-transform:none;letter-spacing:0;font-size:12px;border-bottom:1px solid var(--line-soft)}
.script-tp-actions button{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:6px}
.script-show-btn{border:1.5px dashed color-mix(in oklab,var(--txt-3) 55%,transparent);border-radius:var(--r-md);background:var(--panel);color:var(--txt-2)}
.script-show-btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

/* ============================================================
   STORYANIMATOR — MODERN ARCHITECTURE (v2)
   Sidebar removed → top-bar stepper. Credits + History become
   top-bar utilities. Home gets a clickable workflow strip.
   ============================================================ */

/* remove the sidebar; the whole viewport is workspace */
.sidebar{display:none!important}
.main-head #mhBadge{display:none}

/* topbar becomes the navigation spine */
.v2v .topbar{position:relative;height:60px;gap:12px}
.v2v .brand .bs{display:none}

/* ---------- horizontal stepper ---------- */
.top-stepper{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:2px;background:var(--panel-2);border-radius:99px;padding:4px}
.ts-item{display:flex;align-items:center;gap:8px;border:none;border-radius:99px;background:transparent;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--txt-2);padding:6px 14px 6px 7px;
  cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}
.ts-item:hover{color:var(--txt)}
.ts-item .ts-n{width:22px;height:22px;border-radius:99px;display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  background:var(--panel-3);color:var(--txt-2);transition:background .12s,color .12s}
.ts-item .ts-n svg{width:12px;height:12px}
.ts-item.active{background:var(--panel);color:var(--txt);box-shadow:var(--sh-1)}
.ts-item.active .ts-n{background:var(--accent);color:#fff}
.ts-item.done .ts-n{background:var(--good-soft);color:var(--good)}
.ts-sep{width:14px;height:1px;background:var(--line);flex:none;margin:0 2px}

/* ---------- topbar utilities ---------- */
.top-icon-btn{width:38px;height:36px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);color:var(--txt-2);display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--sh-1);transition:background .12s,color .12s}
.top-icon-btn:hover{background:var(--panel-2);color:var(--txt)}
.top-icon-btn.active{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.top-icon-btn svg{width:17px;height:17px}
.v2v .credit-pill{cursor:pointer;transition:border-color .12s}
.v2v .credit-pill:hover{border-color:var(--accent)}
.v2v .credit-pill.active{border-color:var(--accent);background:var(--accent-soft)}

/* ---------- home workflow strip ---------- */
.hero-flow{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:980px}
.hf-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:16px;
  font-family:inherit;cursor:pointer;box-shadow:var(--sh-1);transition:transform .12s,box-shadow .12s,border-color .12s}
.hf-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--accent)}
.hf-card .hf-n{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--accent)}
.hf-card .hf-t{font-size:14px;font-weight:600;color:var(--txt)}
.hf-card .hf-s{font-size:12px;color:var(--txt-3);line-height:1.5;margin-top:3px}
.hf-card .hf-go{margin-top:auto;font-size:12px;font-weight:600;color:var(--accent);opacity:0;transition:opacity .12s}
.hf-card:hover .hf-go{opacity:1}
@media(max-width:980px){.hero-flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hero-flow{grid-template-columns:1fr}}

/* ---------- responsive: compact stepper on tight screens ---------- */
@media(max-width:1180px){
  .ts-item{padding:6px 10px 6px 7px}
  .ts-item:not(.active) .ts-lab{display:none}
  .ts-sep{width:8px}
}
/* ---------- mobile: bottom tab navigation ---------- */
.app{height:100vh;height:100dvh}
.bottom-nav{display:none}
@media(max-width:720px){
  .top-stepper{display:none}
  .v2v .topbar{height:56px;padding:0 12px;gap:8px}

  .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:stretch;
    justify-content:space-around;gap:2px;background:var(--panel);border-top:1px solid var(--line);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(16,24,40,.06)}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:48px;border:none;border-radius:10px;background:transparent;cursor:pointer;
    font-family:inherit;font-size:10px;font-weight:600;color:var(--txt-3);padding:5px 2px;position:relative;
    transition:color .12s,background .12s}
  .bn-item svg{width:20px;height:20px}
  .bn-item.active{color:var(--accent);background:var(--accent-soft)}
  .bn-item.done::after{content:"";position:absolute;top:6px;right:calc(50% - 16px);width:7px;height:7px;
    border-radius:99px;background:var(--good);box-shadow:0 0 0 2px var(--panel)}

  /* clear the bottom nav */
  .main-body{padding-bottom:104px!important}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom))}
  .script-fab{bottom:calc(74px + env(safe-area-inset-bottom))}
  .script-panel{bottom:calc(134px + env(safe-area-inset-bottom));height:min(480px,calc(100dvh - 210px))}

  /* comfortable touch inputs; 16px prevents iOS focus zoom */
  .v2v select,.v2v input[type=text],.v2v input[type=number],.v2v input:not([type]),
  .v2v input[type=email],.v2v input[type=password],.v2v textarea{font-size:16px}
  .v2v .btn{min-height:44px}
  .v2v .btn.sm{min-height:38px}
  .tbtn{width:44px;height:44px}

  /* editor: preview uses full width, transport wraps cleanly */
  .preview{width:100%}
  .vol{margin-left:0}
  .epane{padding:14px}
  .gen-grid>.win{position:static}

  /* hero */
  .hero{padding:28px 0 40px}
  .hero-sub{font-size:14.5px}
}
@media(max-width:480px){
  .v2v .brand .bt{display:none}
  .v2v .topbar{gap:6px}
  .v2v .btn#authBtn{padding:7px 10px}
  .main-head h2{font-size:16px}
}

/* ============================================================
   ADAPTER — reconcile this app's markup with the modern design.
   The app's topbar is <header class="nav"><div class="nav-in">…
   (not the mockup's .topbar), the credit pill uses different child
   class names, and a handful of bespoke controls keep the old retro
   geometry (2px ink borders, hard offset shadows, Silkscreen). These
   rules map them onto the modern language. Scoped under .v2v so they
   only apply once the modern layer is active.
   ============================================================ */

/* ---- topbar (maps modern .topbar look onto .nav / .nav-in) ---- */
.v2v .nav{background:var(--panel);border-bottom:1px solid var(--line);box-shadow:none}
.v2v .nav-in{position:relative;height:58px;gap:12px}
.v2v .nav-steps{display:none}          /* legacy text links — nav now lives in the stepper/bottom-nav */
.v2v .top-stepper{margin:0}            /* centered via its own absolute rule, relative to .nav-in */

/* ---- credit pill children (app: .credit-coin/.credit-count/.credit-add) ---- */
.v2v .credit-pill .credit-coin{width:20px;height:20px;border:none;background:none;border-radius:0;object-fit:contain;filter:none}
.v2v .credit-pill .credit-count{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;color:var(--txt)}
.v2v .credit-pill .credit-add{width:24px;height:24px;border:none;border-radius:99px;background:var(--accent);color:#fff;font-size:15px;display:grid;place-items:center;padding:0;box-shadow:none}
.v2v .credit-pill .credit-add:hover{background:var(--accent-2)}
/* Circular loader shown in the credits pill while the account resolves (instead of "—").
   Sized to the 12.5px credit-count text so the pill doesn't change width when the real
   balance replaces it. */
.credit-spin{display:inline-block;width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:99px;opacity:.5;vertical-align:-2px;animation:spin .8s linear infinite}
/* Pre-paint signed-out hint: boot-auth.js sets html.sa-anon when no Supabase token
   persists, so auth-gated CTAs parsed AFTER that script (hero "Create Free Account")
   show in the first frame without waiting for app.js. Wins over .hidden's
   display:none!important by specificity. renderAccountBox removes the class once
   real auth resolves. */
html.sa-anon #heroSignupBtn.hidden{display:inline-flex!important}

/* ---- main body: drop the retro dotted background ---- */
.v2v .main-body{background-image:none}

/* ---- tile per-shot upload / refresh buttons ---- */
.v2v .tile .img .tile-upload,.v2v .tile .img .tile-refresh{border:none;border-radius:99px;background:rgba(255,255,255,.92);color:#17191F;box-shadow:var(--sh-1)}
.v2v .tile .img .tile-upload:hover,.v2v .tile .img .tile-refresh:hover{transform:none;background:var(--accent);color:#fff;box-shadow:var(--sh-1)}
.v2v .tile .img .tile-refresh:active{transform:scale(.94);box-shadow:var(--sh-1)}
.v2v .tile .img .ph-idx{font-family:'JetBrains Mono',monospace;background:rgba(6,8,12,.65);color:#fff;border-radius:5px;padding:2px 6px}
.v2v .tile .img .ph-tag{border-radius:5px}

/* ---- export-zip progress overlay ---- */
.v2v .zip-progress-overlay{background:rgba(10,12,18,.5);backdrop-filter:blur(3px)}
.v2v .zip-progress-card{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.v2v .zip-progress-label{font-weight:600;color:var(--txt)}
.v2v .zip-progress-pct{font-family:'JetBrains Mono',monospace;color:var(--accent)}

/* ---- history right-click context menu ---- */
.v2v .hist-ctx{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--sh-3);padding:5px}
.v2v .hist-ctx button{border-radius:8px;font-weight:600;color:var(--txt)}
.v2v .hist-ctx button:hover{background:var(--panel-2)}
.v2v .hist-ctx button.danger:hover{background:#E5484D;color:#fff}

/* ---- misc Silkscreen remnants on hidden/edge surfaces ---- */
.v2v .pi-name{font-family:'JetBrains Mono',monospace}

/* ---- history-open storage popup ---- */
.v2v .storage-pop-overlay{background:rgba(10,12,18,.5);backdrop-filter:blur(3px)}

/* ============================================================
   NAV ELEMENTS — top stepper container lives inside .nav-in; the
   bottom-nav is appended to .app. modern-arch.css already styles
   .top-stepper / .ts-item / .top-icon-btn / .bottom-nav / .bn-item.
   ============================================================ */

/* ============================================================
   FONT + WIDTH FIXES
   ============================================================ */
/* The app sets body{font-family:'Space Mono'} directly on <body>, which beats the
   Instrument Sans inherited from html.v2v — and makes every modern
   `font-family:inherit` rule (brand, step titles, window titles) resolve to mono.
   Force the modern sans on the body subtree; JetBrains Mono is restored per-component. */
.v2v body{font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif}
/* hero title: beat h1.hero-title (Silkscreen) + recolor the highlight to the accent */
.v2v h1.hero-title{font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;letter-spacing:-.03em}
.v2v h1.hero-title .hl{color:var(--accent)}
/* current-only mono/code fields the modern layer doesn't reach */
.v2v .sb-prompt-rest,.v2v .shot-count-display,.v2v .cast-card .cc-style b{font-family:'JetBrains Mono',ui-monospace,monospace}
.v2v .sb-prompt-scene{font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif}
/* "Pay as you go" pill → modern soft badge */
.v2v .payg-pill{border:none;border-radius:99px;background:var(--good-soft);color:var(--good);box-shadow:none;font-family:'JetBrains Mono',ui-monospace,monospace}

/* Let the step screens fill the available width (the mockup capped .panel at 1100px,
   which left dead space on wide monitors). Hero/flow keep their own inner max-widths. */
.v2v .main-body .panel{max-width:none}

/* Storyboard scroll fix: `.gen-grid>.win{position:sticky}` pinned BOTH columns and,
   with `.win{overflow:hidden}`, clipped the tall shot list (left .sb-win) so shots
   past the fold were hidden and the page had nothing to scroll. Let the left list flow
   normally; keep only the right estimate/animate panel sticky (with its own scroll). */
.v2v .gen-grid > .sb-win{position:static;align-self:stretch;max-height:none;overflow:visible}
/* Right estimate/animate panel: sticky, but its max-height MUST fit inside the visible
   viewport (below the ~58px nav + ~2-line main-head + padding) so tall content scrolls
   INSIDE the panel. Too large a value pushed its bottom (the Generate button) below the
   fold where sticky pinning made it unreachable. */
.v2v .gen-grid > .win:not(.sb-win){position:sticky;top:16px;align-self:start;max-height:calc(100dvh - 200px);overflow:auto;overscroll-behavior:contain}

/* ============================================================
   LOOK & CAST — card layout (Story style / Generation setup / cast)
   ============================================================ */
.v2v #step3 .ls-head,.v2v #step4 .panel-tag{margin-bottom:14px}
.v2v .ls-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:8px}
.v2v .ls-intro{margin:0;font-size:13.5px;color:var(--txt-2);line-height:1.6;max-width:64ch}
.v2v .ls-head-row .btn{flex:none}

/* generic card */
.v2v .ls-card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--sh-1);padding:18px}
.v2v .ls-card-title{font-size:15px;font-weight:650;color:var(--txt)}
.v2v .ls-card-help{font-size:12px;color:var(--txt-3);line-height:1.5;margin-top:3px}

/* Art style card: label block + full-width combo */
.v2v .ls-artstyle{margin-bottom:20px;display:flex;flex-direction:column;gap:12px}
.v2v .ls-artstyle .ls-card-meta{margin-bottom:2px}
.v2v .ls-artstyle .combo{position:relative;width:100%}
.v2v .ls-artstyle #styleTpl{width:100%;font-size:15px;font-weight:600;padding:14px 40px 14px 16px}

/* field label with icon chip + block sub-help aligned under the title text */
.v2v .fld-top{display:flex;flex-direction:column;gap:3px;margin-bottom:2px}
.v2v .fld-label{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:650;color:var(--txt)}
.v2v .fld-label .li{width:24px;height:24px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.v2v .fld-label .li svg{width:13px;height:13px}
.v2v .fld-help.block{display:block;margin-left:33px}

/* three guardrails + generation setup grids: each item is a card */
/* four guardrails together: 4-across → 2x2 → 1 (mobile) */
.v2v .assist-grid{grid-template-columns:repeat(4,1fr);gap:16px}
.v2v .assist-grid .fld.ls-card,.v2v .setup-grid .fld.ls-card{display:flex;flex-direction:column;gap:11px}
.v2v .assist-grid .fld.ls-card .ta-wrap{flex:1;display:flex}
.v2v .assist-grid .fld.ls-card textarea{width:100%;min-height:180px;resize:vertical}
@media(max-width:1200px){.v2v .assist-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.v2v .assist-grid{grid-template-columns:1fr}}

.v2v .setup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
@media(max-width:980px){.v2v .setup-grid{grid-template-columns:1fr}}

/* select wrapper (.sel) — chevron overlay */
.v2v .sel{position:relative;display:block}
.v2v .sel select{width:100%;padding-right:34px;-webkit-appearance:none;appearance:none}
.v2v .sel svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none}

/* reference dropzone embedded in its card */
.v2v #refZone.refzone{display:flex;align-items:center;gap:12px;border:1.5px dashed color-mix(in oklab,var(--txt-3) 55%,transparent);border-radius:var(--r-sm);background:var(--panel-2);padding:12px 13px;cursor:pointer;position:relative;transition:border-color .12s,background .12s}
.v2v #refZone.refzone:hover:not(.disabled){border-color:var(--accent);background:var(--accent-soft)}
.v2v #refZone.refzone.disabled{opacity:.55;cursor:not-allowed}
.v2v #refZone .rico{width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none;overflow:hidden}
.v2v #refZone .rico svg{width:19px;height:19px}
.v2v #refZone .rico img{width:100%;height:100%;object-fit:cover}
.v2v #refZone .rt{font-size:12.5px;font-weight:650;color:var(--txt)}
.v2v #refZone .rh{font-size:11px;color:var(--txt-3);margin-top:2px;line-height:1.4}
.v2v #refZone .ref-clear{margin-left:auto;width:26px;height:26px;border:none;border-radius:99px;background:var(--panel-3);color:var(--txt-2);font-size:15px;line-height:1;cursor:pointer;flex:none;display:grid;place-items:center}
.v2v #refZone .ref-clear:hover{background:#E5484D;color:#fff}

/* character cast panel */
.v2v .cast-panel{padding:20px}
.v2v .cast-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.v2v .cast-panel-head>div{min-width:0}
.v2v .cast-panel-title{font-size:16px}
.v2v .cast-panel-head .btn{flex:none}
.v2v .cast-panel .cast-grid{margin-top:2px}

/* Animate toggle: the ON knob must stay WHITE. styles.css forced the knob (::after) to
   the accent colour when on, so the whole pill read as one solid orange. A white knob on
   the accent track works in both light and dark. */
.v2v .sb-anim-box::after,.v2v .sb-anim-toggle.on .sb-anim-box::after{background:#fff}

/* ===================== MOBILE FIT =====================
   These carry the .v2v prefix and live at the END of the LAST stylesheet on
   purpose: the rules they correct are re-declared in this file (.hist-main
   above, and the sticky estimate panel), so an equal-specificity rule in
   styles.css silently loses the cascade — which is exactly what happened to the
   first attempt at the history-row fix.

   Grid and flex items default to min-width:auto, so one non-wrapping row — a
   window title bar, a history row's four action buttons — sets a min-content
   width its column can never shrink below. That floor widened the whole step on
   a phone and pushed the storyboard's image + prompt past the right edge. */
.v2v .gen-grid > *,
.v2v .tile.sb-card > *,
.v2v .hist-row > * { min-width: 0; }
.v2v .win-bar { flex-wrap: wrap; row-gap: 6px; }
.v2v .win-bar .wmeta { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 980px) {
  /* The estimate panel is sticky with its own scroller AND
     overscroll-behavior:contain. On a touch screen that is a scroll trap: a drag
     starting inside the panel is swallowed by it and never chains to the page,
     so you can only scroll past it by starting the gesture on the margin beside
     it. Stacked into a single column it has no reason to be sticky at all — let
     it flow with the page.
     order:-1 puts it above the frames so the video model and cost are visible
     without scrolling the whole storyboard first. */
  .v2v .gen-grid > .win:not(.sb-win) {
    position: static;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    order: -1;
  }
}

@media (max-width: 720px) {
  /* Storyboard title bar: meta on its own line, buttons share the next one.
     Scoped to .sb-win — that's where the crowded bar and the inline
     margin-left:auto on FILL GAPS are; other win-bars just need the wrap. */
  .v2v .sb-win .win-bar .wmeta { margin-left: 0; flex: 1 1 100%; }
  .v2v .sb-win .win-bar .btn.sm { flex: 1 1 auto; justify-content: center; margin-left: 0 !important; }

  /* History rows: thumb + name on one line, the four actions wrapping
     underneath instead of running off-screen. .hist-actions was flex:none and
     .hist-main{flex:1} squeezed the project name to literally 0px wide. */
  .v2v .hist-row { flex-wrap: wrap; row-gap: 10px; }
  .v2v .hist-main { flex: 1 1 55%; }
  .v2v .hist-actions { flex: 1 1 100%; flex-wrap: wrap; }
  .v2v .hist-actions .btn { flex: 1 1 auto; justify-content: center; }
  .v2v .hist-actions .hist-del { flex: 0 0 46px; }
}