/* Zyng Studio — implemented from the Claude Design bundle (zyng-work/project).
   Tokens verbatim from the design: deep near-black surfaces, matte-green app accent
   (#357a5b), copper for generated decks. The mock canvas/engine.js is replaced by the
   real self-playing deck (an <iframe>, driven via postMessage). */
:root{
  color-scheme:dark;
  --bg:#0B0C0E; --surface:#0F1113; --panel:#141619; --panel-2:#181A1E; --edge:#1C1F23; --inset:#0A0B0D;
  --line:rgba(255,255,255,.085); --line-soft:rgba(255,255,255,.055); --line-strong:rgba(255,255,255,.14);
  --ink:#ECECEA; --ink-2:#C4C6C9; --mut:#8A8D92; --faint:#5C6066; --ghost:#3A3E44;
  --accent:#357a5b; --accent-ink:#f2f8f4; --accent-deep:#2a6147; --accent-rgb:53 122 91;
  --copper:#e08a4f; --ok:#6aa888; --ok-rgb:106 168 136;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r-sm:7px; --r-md:11px;
  --shadow-2:0 24px 60px -28px rgba(0,0,0,.9),0 2px 0 rgba(255,255,255,.02) inset;
  --shadow-pop:0 20px 50px -16px rgba(0,0,0,.85);
  --topbar-bg:rgba(11,12,14,.86);
}
/* Light / beige UI theme (corporate). Toggled via data-ui-theme="light" on <html>. Only the
   app CHROME flips — the preview STAGE stays dark (cinematic, like light editors w/ a dark canvas). */
:root[data-ui-theme="light"]{
  color-scheme:light;
  --bg:#EDE8DF; --surface:#F6F2EA; --panel:#FCFAF5; --panel-2:#F1ECE2; --edge:#E0D9CC; --inset:#FBF8F1;
  --line:rgba(60,50,35,.13); --line-soft:rgba(60,50,35,.08); --line-strong:rgba(60,50,35,.22);
  --ink:#211D17; --ink-2:#4C463C; --mut:#796F61; --faint:#A99E8C; --ghost:#CFC5B4;
  --accent:#2f6b50; --accent-ink:#f4faf6; --accent-deep:#27583f; --accent-rgb:47 107 80;
  --copper:#b96a2f; --ok:#3f8a66; --ok-rgb:63 138 102;
  --shadow-2:0 16px 44px -22px rgba(40,30,15,.30),0 1px 0 rgba(255,255,255,.55) inset;
  --shadow-pop:0 18px 44px -16px rgba(40,30,15,.28);
  --topbar-bg:rgba(246,242,234,.88);
}
:root[data-ui-theme="light"] .avatar{background:linear-gradient(135deg,#e7decd,#d6cbb6)}
:root[data-ui-theme="light"] .seg button.on{box-shadow:0 1px 0 rgba(0,0,0,.05) inset}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg)}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid rgb(var(--accent-rgb)/.7);outline-offset:2px}
.mono{font-family:var(--mono)}
.muted{color:var(--mut)} .faint{color:var(--faint)}
.u-row{display:flex;align-items:center;gap:10px} .u-col{display:flex;flex-direction:column} .sp-grow{flex:1}
.ic{display:inline-block;vertical-align:middle}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mut);border:1px solid var(--line);border-radius:5px;padding:2px 7px;line-height:1;white-space:nowrap}
.tag-accent{color:var(--accent);border-color:rgb(var(--accent-rgb)/.4);background:rgb(var(--accent-rgb)/.07)}

/* crop marks */
.crop{position:relative}
.crop::before,.crop::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;border-color:var(--ghost);border-style:solid;z-index:3}
.crop::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.crop::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}

/* brand + buttons */
.brand{display:inline-flex;align-items:baseline;text-decoration:none;user-select:none}
.brand b{font-weight:800;letter-spacing:.15em;font-size:16px;color:var(--ink)}
.brand .tld{color:var(--accent);font-weight:700;font-size:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:12.5px;font-weight:500;padding:9px 14px;border-radius:var(--r-md);color:var(--ink);border:1px solid var(--line);background:var(--panel);white-space:nowrap;cursor:pointer;transition:background .16s,border-color .16s,transform .16s,color .16s}
.btn:hover{background:var(--panel-2);border-color:var(--line-strong)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:15px;height:15px}
.btn-ghost{background:transparent;border-color:transparent;color:var(--mut)}
.btn-ghost:hover{background:var(--panel);color:var(--ink)}
.btn-accent{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.btn-accent:hover{background:#3f8e6a;transform:translateY(-1px)}
.btn-line{background:transparent}
.btn-sq{padding:9px}
.btn:disabled{opacity:.5;cursor:default;transform:none}

/* topbar */
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;border-bottom:1px solid var(--line);position:relative;z-index:40;background:var(--topbar-bg);backdrop-filter:blur(14px)}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px}
.project-name{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mut);background:none;border:0;cursor:pointer}
.project-name b{color:var(--ink);font-weight:500}
.divider-v{width:1px;height:20px;background:var(--line)}
.avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-2);background:linear-gradient(135deg,#2a2d33,#16181c)}

/* meters */
.meters{display:flex;align-items:center;gap:8px}
.meter{position:relative}
.meter-pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);font-family:var(--mono);font-size:11.5px;color:var(--mut);cursor:pointer;transition:border-color .15s,color .15s}
.meter-pill:hover{border-color:var(--line-strong);color:var(--ink)}
.meter-pill .ic{width:14px;height:14px;color:var(--faint)}
.meter-pill b{color:var(--ink);font-weight:600}
.meter-mini{width:36px;height:5px;border-radius:3px;background:var(--edge);overflow:hidden}
.meter-mini i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .5s}
.meter[data-kind="chat"] .meter-mini i{background:var(--ok)}
.meter-pop{position:absolute;right:0;width:252px;z-index:60;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:14px;top:calc(100% + 9px);box-shadow:var(--shadow-pop);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .18s,transform .18s}
.meter:hover .meter-pop{opacity:1;transform:none;pointer-events:auto}
.meter-pop h5{margin:0 0 3px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.meter-pop .sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-bottom:12px}
.bar-lg{height:7px;border-radius:4px;background:var(--edge);overflow:hidden}
.bar-lg i{display:block;height:100%;border-radius:4px;background:var(--accent);transition:width .5s}
.meter[data-kind="chat"] .bar-lg i{background:var(--ok)}
.pop-row{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--mut);margin-top:9px}
.pop-row b{color:var(--ink)}

/* studio layout */
.studio-body{display:grid;grid-template-columns:384px 1fr;height:calc(100dvh - 56px)}
.work-panel{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--surface)}
.work-scroll{flex:1;overflow-y:auto;min-height:0;padding:16px;display:flex;flex-direction:column;gap:14px}
/* unified composer — one chat input (describe · attach · refine), Claude-style */
.chat-scroll{flex:1;overflow-y:auto;min-height:0;padding:16px}
.composer{border-top:1px solid var(--line);background:var(--surface);padding:11px 13px;display:flex;flex-direction:column;gap:9px}
.composer.drag .composer-row{border-color:rgb(var(--accent-rgb)/.7);background:rgb(var(--accent-rgb)/.06)}
.suggest{display:flex;gap:7px;flex-wrap:wrap}
.suggest-chip{font-family:var(--mono);font-size:11px;color:var(--mut);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.suggest-chip:hover{color:var(--ink);border-color:var(--line-strong)}
.staged{display:flex;gap:7px;flex-wrap:wrap}
.staged .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--inset);border:1px solid var(--line);border-radius:6px;padding:4px 8px;max-width:220px}
.staged .chip>:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staged .chip button{background:none;border:0;color:var(--faint);cursor:pointer;display:inline-flex;padding:0}
.staged .chip button:hover{color:var(--copper)}
.composer-row{display:flex;align-items:flex-end;gap:8px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-md);padding:7px 8px;transition:border-color .15s,background .15s}
.composer-row:focus-within{border-color:rgb(var(--accent-rgb)/.5)}
.composer-row textarea{flex:1;min-height:24px;max-height:140px;resize:none;background:none;border:0;outline:none;color:var(--ink);font-family:var(--font);font-size:13.5px;line-height:1.5;padding:3px 2px}
.composer-row textarea::placeholder{color:var(--faint)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--mut);cursor:pointer;flex:none;transition:background .14s,color .14s,border-color .14s}
.icon-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.icon-btn .ic{width:16px;height:16px}
.composer-hint{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--faint)}
.composer-hint kbd{font-family:var(--mono);font-size:9.5px;color:var(--mut);border:1px solid var(--line);border-radius:4px;padding:0 4px;background:var(--panel)}
.panel-label{display:flex;align-items:center;justify-content:space-between}

/* compose + dropzone */
.compose{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:12px;transition:border-color .2s,box-shadow .2s}
.compose:focus-within{border-color:rgb(var(--accent-rgb)/.5);box-shadow:0 0 0 3px rgb(var(--accent-rgb)/.1)}
.compose textarea{width:100%;resize:none;border:0;background:transparent;outline:none;color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;min-height:40px}
.compose textarea::placeholder{color:var(--faint)}
.compose-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.dropzone{border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:18px;text-align:center;cursor:pointer;background:repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 10px,transparent 10px 20px);transition:border-color .18s,background .18s}
.dropzone:hover,.dropzone.drag{border-color:rgb(var(--accent-rgb)/.55);background:rgb(var(--accent-rgb)/.05)}
.dropzone .dz-ic{width:22px;height:22px;color:var(--mut);margin:0 auto 8px;display:block}
.dropzone .dz-t{font-size:12.5px;color:var(--ink-2)}
.dropzone .dz-s{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:4px;letter-spacing:.04em}

/* chat */
.chat{display:flex;flex-direction:column;gap:12px}
.chat-day{text-align:center;font-family:var(--mono);font-size:10px;color:var(--ghost);letter-spacing:.1em}
.msg{max-width:92%}
.msg .who{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--faint);margin-bottom:5px;text-transform:uppercase}
.msg .bubble{font-size:13.5px;line-height:1.55;padding:10px 12px;border-radius:11px}
.msg.user{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end}
.msg.user .bubble{background:var(--panel-2);border:1px solid var(--line);border-bottom-right-radius:4px}
.msg.ai .bubble{background:transparent;border:1px solid var(--line-soft);color:var(--ink-2);border-bottom-left-radius:4px}
.msg.ai .bubble b{color:var(--ink);font-weight:600}
.msg .change{margin-top:8px;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;color:var(--accent);border:1px solid rgb(var(--accent-rgb)/.3);background:rgb(var(--accent-rgb)/.06);padding:4px 8px;border-radius:6px}
.msg .change .ic{width:12px;height:12px}
.thinking{display:inline-flex;gap:4px;padding:11px 12px}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:bob 1.2s ease-in-out infinite}
.thinking i:nth-child(2){animation-delay:.15s} .thinking i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* refine dock */
.refine-dock{border-top:1px solid var(--line);padding:12px 16px;background:var(--surface)}
.refine-chips{display:flex;gap:6px;margin-bottom:9px;flex-wrap:wrap}
.refine-chip{font-family:var(--mono);font-size:10.5px;color:var(--mut);border:1px solid var(--line);border-radius:20px;padding:4px 10px;background:none;cursor:pointer;transition:color .14s,border-color .14s,background .14s}
.refine-chip:hover{color:var(--ink);border-color:var(--line-strong);background:var(--panel)}
.refine-input{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:6px 6px 6px 13px;transition:border-color .18s}
.refine-input:focus-within{border-color:rgb(var(--accent-rgb)/.5)}
.refine-input input{flex:1;border:0;background:transparent;outline:none;color:var(--ink);font-family:var(--font);font-size:13.5px}
.refine-input input::placeholder{color:var(--faint)}

/* preview column */
.preview-col{display:flex;flex-direction:column;min-height:0;padding:16px;overflow:hidden}
.preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.ctl-cluster{display:flex;align-items:center;gap:8px}
.seg{display:inline-flex;padding:2px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset)}
.seg button{font-family:var(--mono);font-size:11px;color:var(--mut);padding:5px 9px;border:0;background:none;border-radius:5px;cursor:pointer;transition:background .14s,color .14s}
.seg button.on{background:var(--panel-2);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.seg button:hover:not(.on){color:var(--ink)}
.live-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--accent)}
.live-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgb(var(--accent-rgb)/.6);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--accent-rgb)/.5)}70%{box-shadow:0 0 0 7px rgb(var(--accent-rgb)/0)}100%{box-shadow:0 0 0 0 rgb(var(--accent-rgb)/0)}}

/* stage frame + canvas (the real preview iframe lives in .canvas) */
.preview-stack{flex:1;min-height:0;display:flex;flex-direction:column}
/* path rail — saved variations (preview a cut = a chat credit, export = a render credit) */
.path-rail{display:flex;align-items:center;gap:11px;margin-bottom:11px;min-height:30px}
/* an explicit display on .path-rail/.path-dirty beats the UA [hidden] rule — restore hiding */
.path-rail[hidden],.path-dirty[hidden]{display:none}
.path-chips{display:flex;align-items:center;gap:7px;flex:1;min-width:0;overflow-x:auto;padding-bottom:1px}
.path-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--mut);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer;white-space:nowrap;transition:background .14s,border-color .14s,color .14s}
.path-chip:hover{color:var(--ink);border-color:var(--line-strong)}
.path-chip.on{color:var(--accent);border-color:rgb(var(--accent-rgb)/.45);background:rgb(var(--accent-rgb)/.08)}
.path-chip .pc-n{font-size:10px;color:var(--faint);background:var(--inset);border-radius:4px;padding:1px 5px;line-height:1.4}
.pc-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:none}
.pc-dot.previewed{background:var(--ok)} .pc-dot.rendered{background:var(--accent)} .pc-dot.dirty{background:var(--copper)}
.path-dirty{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--copper);white-space:nowrap;flex:none}
.path-save{display:flex;align-items:center;gap:7px;flex:none}
.path-save input{font-family:var(--mono);font-size:11.5px;color:var(--ink);background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 9px;width:158px;outline:none}
.path-save input:focus{border-color:rgb(var(--accent-rgb)/.5)}
.btn-sm{padding:6px 10px;font-size:11.5px}
.stage-frame{position:relative;background:var(--inset);border:1px solid var(--line);box-shadow:var(--shadow-2);flex:1;min-height:0;display:flex;flex-direction:column}
.stage-chrome{display:flex;align-items:center;justify-content:space-between;gap:12px;height:38px;padding:0 13px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--faint);position:relative;z-index:4}
.stage-dots{display:flex;gap:6px}
.stage-dots i{width:8px;height:8px;border-radius:50%;background:var(--edge);display:block}
.stage-dots i:last-child{background:rgb(var(--accent-rgb)/.7)}
.chrome-right{display:flex;align-items:center;gap:12px}
.canvas-pad{position:relative;background:radial-gradient(120% 120% at 50% 0%,#101216 0%,#08090b 80%);display:grid;place-items:center;padding:18px;overflow:hidden;flex:1;min-height:0}
.canvas{position:relative;height:100%;aspect-ratio:16/9;max-width:100%;margin-inline:auto;background:#000;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04);transition:aspect-ratio .5s cubic-bezier(.5,0,.2,1)}
.canvas[data-aspect="1:1"]{aspect-ratio:1/1}
.canvas[data-aspect="9:16"]{aspect-ratio:9/16}
.canvas iframe{width:100%;height:100%;border:0;display:block;background:#000}
.canvas .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--faint);text-align:center;padding:24px}
.canvas.rerender::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgb(var(--accent-rgb)/.14) 50%,transparent 70%);background-size:240% 100%;animation:shimmer 1.05s linear;mix-blend-mode:screen}
@keyframes shimmer{from{background-position:130% 0}to{background-position:-130% 0}}

/* transport (drives the iframe via postMessage) */
.transport{border-top:1px solid var(--line);background:var(--surface)}
.caption-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-soft);min-height:46px}
.caption-bar .cc{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:2px 5px}
.caption-text{font-size:14px;color:var(--ink-2);line-height:1.4;flex:1;min-width:0}
.scrub-row{display:flex;align-items:center;gap:14px;padding:12px 16px}
.play{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);border:0;cursor:pointer;box-shadow:0 4px 14px -8px rgba(0,0,0,.55);transition:transform .15s,background .15s}
.play:hover{transform:scale(1.06);background:#3f8e6a} .play:active{transform:scale(.97)}
.play .ic{width:19px;height:19px}
.scrub{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.scrub-time{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--faint)}
.track{position:relative;height:6px;border-radius:3px;background:var(--edge);cursor:pointer}
.track .fill{position:absolute;inset:0 auto 0 0;width:0%;border-radius:3px;background:var(--accent)}
.track .head{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.wave{display:flex;align-items:center;gap:2px;height:22px}
.wave i{width:2px;border-radius:1px;background:var(--ghost)}
.wave i.on{background:var(--accent)}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;z-index:90;display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:10px 15px;font-size:13px;box-shadow:var(--shadow-pop);transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .ic{width:16px;height:16px;color:var(--accent)}

/* scrollbars */
.work-scroll::-webkit-scrollbar{width:9px}
.work-scroll::-webkit-scrollbar-thumb{background:var(--edge);border-radius:6px;border:2px solid var(--bg)}
@media (max-width:1080px){ .studio-body{grid-template-columns:1fr} .work-panel{display:none} }

/* ── export modal (the metered render result) ── */
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--ghost);border-top-color:var(--accent);animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.modal-scrim{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(6,7,9,.66);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s}
.modal-scrim.on{opacity:1;pointer-events:auto}
.modal{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-pop);transform:translateY(10px) scale(.985);transition:transform .2s}
.modal-scrim.on .modal{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 13px;border-bottom:1px solid var(--line)}
.modal-head h4{margin:0;font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:9px}
.modal-head h4 .ic{width:17px;height:17px}
.modal-body{padding:16px}
.render-anim{height:118px;border-radius:10px;border:1px solid var(--line);background:repeating-linear-gradient(115deg,var(--inset),var(--inset) 13px,var(--panel-2) 13px,var(--panel-2) 26px);background-size:200% 100%;animation:bgslide 1.1s linear infinite;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
@keyframes bgslide{to{background-position:-52px 0}}
.render-anim .ic{width:30px;height:30px;color:var(--accent);opacity:.9}
#exportVideo{width:100%;border-radius:10px;background:#000;border:1px solid var(--line);display:block;margin-bottom:13px;max-height:46vh}
.share-row{display:flex;gap:8px;margin-bottom:11px}
.share-row input{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--inset);border:1px solid var(--line);border-radius:var(--r-md);padding:0 11px}
.modal a.btn{text-decoration:none}
.modal-note{font-family:var(--mono);font-size:11px;color:var(--faint);margin:0;display:flex;align-items:center;gap:7px}
.modal-note .ic{width:13px;height:13px}
.modal-err{font-size:13px;color:var(--ink-2);background:rgba(224,138,79,.08);border:1px solid rgba(224,138,79,.32);border-radius:var(--r-md);padding:12px 13px;line-height:1.5}
.dropzone.drag{border-color:var(--accent);background:rgb(var(--accent-rgb)/.07)}
