/* AI Studio v6 — broadcast control-room look: slate-blue workspace, amber time code, red tally light. */
:root{
  --ink-0:#111827; --ink-0b:#0d1424; --ink-1:#172036; --ink-2:#1f2a44; --ink-3:#28365a;
  --line:#2b3959; --line-2:#3a4b74;
  --text:#e8edf7; --muted:#93a0bb; --dim:#64718d;
  --amber:#ffb547; --tally:#ff4d5e; --blue:#5b8cff; --blue-2:#3f6fe6; --ok:#3ecf8e; --warn:#f5b84b;
  --v1:#3b5bdb; --v2:#c2410c; --a1:#0e7490; --a2:#6d28d9; --t1:#0f766e;
  --r-s:6px; --r-m:10px; --r-l:14px;
  --ui:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --tc:"Bebas Neue","Anton","Inter",sans-serif;
  --ur:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ink-0b);color:var(--text);font:14px/1.45 var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
[hidden]{display:none!important}
.rtl,[dir=rtl] textarea{font-family:var(--ur)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- app frame ---------- */
.app{display:grid;grid-template-rows:52px minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:100vh;height:100dvh}
.app>*{min-width:0}
.top{display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--ink-0);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--tally);box-shadow:0 0 0 3px rgba(255,77,94,.18)}
.brand small{font-weight:600;color:var(--muted)}
.modes{display:inline-flex;background:var(--ink-1);border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:8px}
.modes button{border:0;background:none;padding:5px 14px;border-radius:999px;color:var(--muted);font-weight:600;cursor:pointer}
.modes button[aria-pressed=true]{background:var(--ink-3);color:var(--text)}
.top .sp{flex:1}
.proj{display:flex;align-items:center;gap:6px;min-width:0}
.proj input{background:transparent;border:1px solid transparent;border-radius:var(--r-s);padding:5px 8px;max-width:240px;font-weight:600}
.proj input:hover,.proj input:focus{border-color:var(--line);background:var(--ink-1)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-2);background:var(--ink-2);color:var(--text);
  padding:7px 12px;border-radius:var(--r-s);cursor:pointer;font-weight:600;white-space:nowrap;line-height:1.2}
.btn:hover{background:var(--ink-3)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-2)}
.btn.rec{background:var(--tally);border-color:var(--tally);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);background:var(--ink-2)}
.btn.sm{padding:4px 9px;font-size:12.5px}
.btn.icon{padding:6px 9px}
.btn.big{padding:12px 18px;font-size:15px;border-radius:var(--r-m)}

/* ---------- main area ---------- */
.main{display:grid;min-height:0;grid-template-columns:var(--leftq,460px) 6px minmax(0,1fr)}
.main>*{min-width:0}
.app[data-mode=studio] .main{grid-template-columns:var(--leftw,max(430px,27vw)) 6px minmax(0,1fr) 300px}   /* left bar (resizable), right 300px */
.app[data-mode=easy] .main{grid-template-columns:var(--lefte,400px) 6px minmax(0,1fr) 340px}   /* Easy: steps, preview, the picture changer */
.panel{background:var(--ink-1);border-right:1px solid var(--line);overflow:auto;min-height:0}
.panel.right{border-right:0;border-left:1px solid var(--line)}
.stage{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--ink-0b)}

/* ---------- monitor: the one bold element ---------- */
.monitor{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;gap:10px}
.screen{position:relative;background:#000;border-radius:4px;box-shadow:0 0 0 1px #000,0 0 0 7px #1a2236,0 18px 50px rgba(0,0,0,.55);
  max-width:100%;max-height:100%;display:flex}
.screen canvas{display:block;width:100%;height:100%;border-radius:4px}
.screen .tally{position:absolute;top:-18px;left:0;display:flex;align-items:center;gap:7px;font:600 11px/1 var(--ui);color:var(--dim);letter-spacing:.04em}
.screen .tally i{width:8px;height:8px;border-radius:50%;background:#3a2328;transition:background .15s}
.screen.live .tally i{background:var(--tally);box-shadow:0 0 10px var(--tally)}
.screen.live .tally{color:#ffd0d5}
.screen .empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);text-align:center;padding:24px}
.screen .empty b{color:var(--text);font-size:16px}
.transport{display:flex;align-items:center;gap:12px;width:min(100%,640px)}
.tc{font:400 30px/1 var(--tc);color:var(--amber);letter-spacing:.06em;min-width:150px;font-variant-numeric:tabular-nums}
.tc small{font-size:16px;color:var(--dim);margin-left:6px}
.scrub{flex:1;-webkit-appearance:none;appearance:none;height:6px;background:var(--ink-3);border-radius:4px}
.scrub::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--amber);border:0}
.scrub::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--amber);border:0}
.play{width:42px;height:42px;border-radius:50%;border:0;background:var(--text);color:#0b1220;font-size:16px;cursor:pointer;flex:0 0 auto}
.play[aria-pressed=true]{background:var(--tally);color:#fff}

/* ---------- panel content ---------- */
.sec{padding:16px 18px;border-bottom:1px solid var(--line)}
.sec h2{margin:0 0 4px;font-size:15px;display:flex;align-items:center;gap:10px}
.sec h2 .n{font:400 22px/1 var(--tc);color:var(--amber);width:22px}
.sec p.hint,.hint{color:var(--muted);font-size:12.5px;margin:4px 0 10px}
.sec.done h2 .n{color:var(--ok)}
.field{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.field>span{font-size:12.5px;color:var(--muted);font-weight:600}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row>.field{flex:1;min-width:120px}
input[type=text],input[type=url],input[type=number],input[type=tel],select,textarea{width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{resize:vertical;min-height:84px;line-height:1.6}
input[type=range]{width:100%;accent-color:var(--amber)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;user-select:none}
.chk input{accent-color:var(--blue);width:16px;height:16px}
.seg{display:flex;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-s);padding:2px;gap:2px}
.seg button{flex:1;border:0;background:none;padding:6px 8px;border-radius:5px;color:var(--muted);font-weight:600;cursor:pointer;font-size:13px}
.seg button[aria-pressed=true]{background:var(--ink-3);color:var(--text)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 -18px 12px;padding:0 18px}
.tabs button{border:0;background:none;padding:8px 10px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;cursor:pointer}
.app[data-mode=studio] .panel>.tabs button{padding:7px 7px;font-size:12.5px}
.tabs button[aria-pressed=true]{color:var(--text);border-bottom-color:var(--amber)}
.steps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.steps li{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}
.steps li i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 auto}
.steps li.run{color:var(--text)} .steps li.run i{border-color:var(--amber);border-top-color:transparent;animation:spin .8s linear infinite}
.steps li.ok{color:var(--text)} .steps li.ok i{background:var(--ok);border-color:var(--ok)}
.steps li.bad{color:#ffb4bb} .steps li.bad i{background:var(--tally);border-color:var(--tally)}
@keyframes spin{to{transform:rotate(360deg)}}
.msg{font-size:13px;padding:9px 11px;border-radius:var(--r-s);background:var(--ink-2);border:1px solid var(--line);margin-top:10px}
.msg.bad{border-color:#6b2a33;background:#2a1520;color:#ffc9cf}
.msg.ok{border-color:#1f5a44;background:#122a24;color:#bff3dc}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:430px;overflow:auto;padding:2px 4px 2px 0}
.styles button{display:grid;gap:4px;border:2px solid var(--line);border-radius:8px;background:var(--ink-2);cursor:pointer;padding:4px;color:var(--text,#e6edf6);font:600 11px/1.2 Inter,sans-serif;text-align:center}
.styles button canvas{width:100%;aspect-ratio:9/16;border-radius:5px;display:block;background:#000}
.styles button[aria-pressed=true]{border-color:var(--amber);background:var(--ink-3)}
.styles button small{display:block;font-weight:500;opacity:.65;font-size:10px}
.bgtabs{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 6px}
.bgtabs button{padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:var(--ink-2);color:inherit;cursor:pointer;font:600 11px/1.3 Inter,sans-serif}
.bgtabs button[aria-pressed=true]{background:var(--ink-3);border-color:var(--amber);color:var(--text)}
.anims{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-height:330px;overflow:auto;padding-right:3px}
.anims button{display:grid;gap:3px;padding:3px;border:2px solid var(--line);border-radius:7px;background:var(--ink-2);color:inherit;cursor:pointer;font:600 9.5px/1.15 Inter,sans-serif;text-align:center;min-width:0}
.anims button i{display:grid;place-items:center;aspect-ratio:9/16;border-radius:4px;background:var(--ink-3) center/cover;font-style:normal;font-size:16px}
.anims button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anims button[aria-pressed=true],.csets button[aria-pressed=true]{border-color:var(--amber);background:var(--ink-3)}
.csets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.csets button{display:grid;gap:3px;padding:4px;border:2px solid var(--line);border-radius:7px;background:var(--ink-2);color:inherit;cursor:pointer;font:600 10px/1.1 Inter,sans-serif;min-width:0}
.csets button b{display:flex;gap:3px;padding:4px;border-radius:5px}.csets button b i{flex:1;height:12px;border-radius:3px}
.csets button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:980px){.anims{grid-template-columns:repeat(5,1fr)}.csets{grid-template-columns:repeat(3,1fr)}}
.fold{border:1px solid var(--line);border-radius:10px;background:var(--ink-2);margin:8px 0;overflow:hidden}
.fold>summary{cursor:pointer;list-style:none;padding:10px 12px;font:700 13px/1.2 Inter,sans-serif;display:flex;align-items:center;gap:8px;user-select:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:'▸';margin-left:auto;opacity:.6;transition:transform .15s}
.fold[open]>summary::after{transform:rotate(90deg)}
.fold>summary .ic{width:24px;height:24px;border-radius:7px;background:var(--ink-3);display:grid;place-items:center;font-size:13px}
.foldin{padding:4px 12px 12px;display:grid;gap:4px}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:4px 0 6px}
.swatches button{display:flex;height:26px;padding:0;border:2px solid var(--line);border-radius:7px;overflow:hidden;cursor:pointer;background:none}
.swatches button i{flex:1}.swatches button i:first-child{flex:2}
.swatches button:hover{border-color:var(--amber)}
.texted{display:grid;gap:6px}
.trow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab cs" "font font" "size size";gap:7px 8px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--ink-1,rgba(0,0,0,.15))}
.trow[hidden]{display:none}
.tlab{grid-area:lab;display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px}
.tlab b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.trow>.seg{grid-area:cs}
.tsample{width:32px;height:28px;flex:none;display:grid;place-items:center;border-radius:6px;background:var(--ink-3);font-size:16px;line-height:1}
.tfont{grid-area:font;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:6px;font-size:11.5px;opacity:.95}
.tfont select{min-width:0;width:100%;font-size:12.5px;padding:5px 6px}
.tsz{grid-area:size;display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px}
.tsz>span:first-child{width:32px;flex:none}
.tsz input[type=range]{flex:1;min-width:60px}
.tstep{width:26px;height:26px;flex:none;border:1px solid var(--line);border-radius:6px;background:var(--ink-3);color:inherit;font:700 14px/1 Inter,sans-serif;cursor:pointer;padding:0}
.tstep:hover{border-color:var(--amber)}
.tstep.reset{font-size:12px;opacity:.8}
.tpct{display:flex;align-items:center;gap:2px;flex:none;font-weight:700}
.tnum{width:52px;padding:4px 4px;font:700 12px Inter,sans-serif;text-align:right}
.seg.mini button{padding:3px 6px;font-size:10.5px}
@media (max-width:980px){.swatches{grid-template-columns:repeat(6,1fr)}}
.fonts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:300px;overflow:auto;padding-right:4px}
.fonts button{display:grid;gap:2px;padding:8px 6px;border:2px solid var(--line);border-radius:8px;background:var(--ink-2);color:var(--text,#e6edf6);cursor:pointer;text-align:center;min-width:0}
.fonts button b{font-size:17px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fonts button small{font-size:10.5px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fonts button[aria-pressed=true]{border-color:var(--amber);background:var(--ink-3)}
.swatch{display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px}.swatch i{width:10px;height:10px;border-radius:50%;display:inline-block}
.cards button{aspect-ratio:9/16;border:2px solid var(--line);border-radius:6px;background:#000 center/cover;cursor:pointer;padding:0}
.cards button[aria-pressed=true]{border-color:var(--amber)}
.bar{height:6px;background:var(--ink-3);border-radius:4px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--amber);width:0;transition:width .2s}

@media (max-width:980px){.styles{grid-template-columns:repeat(3,1fr)}}
/* scene list (studio) */
.slist{display:grid;gap:8px}
.sitem{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:8px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--ink-2);cursor:pointer}
.sitem[aria-current=true]{border-color:var(--amber)}
.sitem .th{width:64px;height:64px;border-radius:6px;background:#0b1220 center/cover;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:11px}
.sitem b{font-size:12.5px}
.sitem p{margin:2px 0 0;font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bin{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bin .bi{aspect-ratio:1;border-radius:6px;background:#0b1220 center/cover;border:1px solid var(--line);position:relative;cursor:grab}
.bin .bi span{position:absolute;left:4px;bottom:4px;font-size:10px;background:rgba(0,0,0,.65);padding:1px 5px;border-radius:4px}
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r-m);padding:14px;text-align:center;color:var(--muted);font-size:12.5px}
.drop.over{border-color:var(--amber);color:var(--text)}

/* ---------- timeline ---------- */
.tl{background:var(--ink-0);border-top:1px solid var(--line);display:flex;flex-direction:column;height:352px;min-height:180px;position:relative}
.tl-resize{position:absolute;top:-4px;left:0;right:0;height:8px;cursor:ns-resize;z-index:5}
.tl-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tl-bar .tc{font-size:20px;min-width:110px}
.tl-bar .sp{flex:1}
.tl-bar .zoom{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.tl-bar .zoom input{width:110px}
.tl-body{flex:1;display:flex;min-height:0;min-width:0}
.tl-heads{width:132px;flex:0 0 auto;border-right:1px solid var(--line);background:var(--ink-0);overflow:hidden}
.tl-scroll{flex:1;overflow:auto;position:relative;scrollbar-gutter:stable;min-width:0}
.tl-inner{position:relative;min-height:100%}
.tl-head,.tl-lane{height:var(--h,56px);border-bottom:1px solid #1d2741}
.tl-head{display:flex;flex-direction:column;justify-content:center;padding:0 10px;gap:2px}
.tl-head b{font-size:12px} .tl-head span{font-size:11px;color:var(--dim)}
.tl-head .tg{display:flex;gap:4px;margin-top:2px}
.tl-head .tg button{border:1px solid var(--line);background:var(--ink-1);color:var(--muted);font-size:10.5px;border-radius:4px;padding:1px 6px;cursor:pointer}
.tl-head .tg button[aria-pressed=true]{color:var(--text);border-color:var(--line-2)}
.tl-ruler{height:26px;border-bottom:1px solid var(--line);position:relative;cursor:pointer;background:var(--ink-0)}
.tl-ruler span{position:absolute;top:6px;font-size:10.5px;color:var(--dim);transform:translateX(3px);border-left:1px solid var(--line-2);padding-left:3px;height:20px;top:6px}
.tl-heads .tl-rh{height:26px;border-bottom:1px solid var(--line)}
.tl-lane{position:relative}
.clip{position:absolute;top:5px;bottom:5px;border-radius:5px;overflow:hidden;cursor:pointer;border:1.5px solid rgba(255,255,255,.14);background:#1a2440;user-select:none;touch-action:none}
.clip .film{position:absolute;inset:0;display:flex;opacity:.92}
.clip .film i{flex:0 0 auto;height:100%;background:center/cover;border-right:1px solid rgba(0,0,0,.35)}
.clip .lab{position:absolute;left:5px;top:3px;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.6);padding:1px 6px;border-radius:4px;max-width:calc(100% - 10px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.clip .dur{position:absolute;right:5px;bottom:3px;font-size:10px;background:rgba(0,0,0,.6);padding:1px 5px;border-radius:4px}
.clip.sel{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.clip .ed{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:2}
.clip .ed.l{left:0} .clip .ed.r{right:0}
.clip .ed:hover,.clip.sel .ed{background:rgba(255,181,71,.35)}
.clip.v1{background:linear-gradient(180deg,#22336a,#1b2a57)}
.clip.v1.slide{background:repeating-linear-gradient(135deg,#1c2850 0 10px,#1a2447 10px 20px)}
.clip.v1.ins{box-shadow:inset 0 0 0 2px #f5a623;background:#3a2a10}
.clip.v1.ins .lab{background:#f5a623;color:#1a1204}
.clip.v2{background:#3b1d0e;border-color:rgba(251,146,60,.45)}
.clip.sub{background:#0f3a3a;border-color:rgba(45,212,191,.3);padding:4px 7px;font-size:11.5px;line-height:1.35;color:#d7fbf5;cursor:text}
.clip.sub.rtl{font-family:var(--ur);font-size:12px;line-height:1.9;padding-top:0}
.clip.mus{background:#2a1b4d;border-color:rgba(167,139,250,.35)}
.clip.voice{background:#0b2b36;border-color:rgba(56,189,248,.3)}
.clip canvas{position:absolute;inset:0;width:100%;height:100%}
.clip .sub-edit{position:absolute;inset:0;width:100%;height:100%;border:0;background:#082526;color:#fff;font-size:12px;padding:4px 7px;resize:none;border-radius:5px}
.lane-hint{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--dim);pointer-events:none;white-space:nowrap}
.tl-lane.over{background:rgba(255,181,71,.08)}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);pointer-events:none;z-index:4}
.playhead::before{content:"";position:absolute;top:0;left:-6px;border:7px solid transparent;border-top:9px solid var(--amber)}
.snapline{position:absolute;top:0;bottom:0;width:1px;background:#fff;opacity:.6;pointer-events:none;z-index:4}

/* toasts */
.toasts{position:fixed;left:50%;top:auto;bottom:calc(var(--tlh,352px) + 14px);transform:translateX(-50%);display:grid;gap:6px;z-index:50;pointer-events:none;justify-items:center}
.toast{background:var(--ink-3);border:1px solid var(--line-2);padding:8px 14px;border-radius:999px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:90vw}
.toast.bad{background:#4a1d27;border-color:#7a2f3c}

/* menu */
.menu{position:absolute;top:46px;right:10px;background:var(--ink-1);border:1px solid var(--line-2);border-radius:var(--r-m);min-width:260px;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:40;padding:6px;max-height:70vh;overflow:auto}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:6px;cursor:pointer}
.menu button:hover{background:var(--ink-2)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.menu small{color:var(--dim);display:block;font-size:11px}

/* ---------- small screens ---------- */
@media (max-width:980px){
  body{overflow:auto}
  .app{height:auto;min-height:100vh;grid-template-rows:auto auto auto}
  .top{flex-wrap:wrap;padding:8px 12px;gap:8px}
  .main,.app[data-mode=studio] .main,.app[data-mode=easy] .main{grid-template-columns:1fr}
  .colresize{display:none}
  .studio-left{display:block!important}.rail{position:sticky;top:0;z-index:3;flex-direction:row!important;overflow-x:auto;height:auto!important;border-right:0!important;border-bottom:1px solid var(--line)}.rail .rb{min-width:62px}.sscroll{overflow:visible!important}
  .stage{order:-1}
  .panel{border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .monitor{padding:24px 12px 10px}
  .proj input{max-width:150px}
  .toast{font-size:12.5px}
  .transport{gap:8px}
  .tc{font-size:24px;min-width:120px}
  .screen{max-height:62vh}
  .tl{height:auto}
  .tl-body{max-height:360px}
  .tl-heads{width:96px}
}

.emprev{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.emprev img{width:34px;height:34px;object-fit:contain;background:var(--ink-2);border-radius:8px;padding:3px}.emprev small{color:var(--muted);font-size:11px}
.empick{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;max-height:260px;overflow:auto;padding:4px;background:var(--ink-0b);border:1px solid var(--line);border-radius:8px;margin-top:6px}
.empick button{border:2px solid transparent;border-radius:8px;background:var(--ink-2);padding:3px;cursor:pointer;aspect-ratio:1}.empick button img{width:100%;height:100%;object-fit:contain}.empick button[aria-pressed=true]{border-color:var(--amber);background:var(--ink-3)}
.emrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.emrow img{width:38px;height:38px;object-fit:contain;background:var(--ink-2);border-radius:8px;padding:3px}

.review{margin-top:12px;padding:14px;border:1px solid var(--amber);border-radius:var(--r-l);background:linear-gradient(180deg,rgba(255,181,71,.07),transparent 60%)}
.review h3{margin:0 0 4px;font-size:15px}
.review textarea{min-height:200px;line-height:1.6}
.review .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.revad{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}

.stockgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px;max-height:330px;overflow:auto}
.stockgrid button{position:relative;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--ink-2);cursor:pointer;aspect-ratio:3/4}
.stockgrid button:hover{border-color:var(--amber)}
.stockgrid button.busy{opacity:.5;pointer-events:none}
.stockgrid img{width:100%;height:100%;object-fit:cover;display:block}
.stockgrid i{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:10px;font-weight:700;background:rgba(0,0,0,.65);color:#fff;padding:1px 5px;border-radius:5px}

/* thumbnail maker */
.thumbprev { margin-top: 10px; border-radius: 10px; overflow: hidden; background: #0b1220; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.thumbprev:empty { display: none; }
.thumbprev img { display: block; width: 100%; height: 100%; object-fit: contain; }
.thumbstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.thumbstrip:empty { display: none; }
.thumbstrip button { position: relative; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #111827; cursor: pointer; aspect-ratio: 16 / 9; }
.thumbstrip button[aria-pressed="true"] { border-color: var(--accent, #f59e0b); }
.thumbstrip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumbstrip i { position: absolute; top: 2px; left: 4px; font-style: normal; font-size: 12px; color: #facc15; text-shadow: 0 1px 2px #000; }

/* story / documentary options */
.storybox { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(232,194,122,.08); border: 1px solid rgba(232,194,122,.25); }
.storybox[hidden] { display: none; }

/* ---------- activity (work in progress) ---------- */
.spin{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid var(--amber);border-top-color:transparent;animation:spin .8s linear infinite;flex:0 0 auto}
.activity{display:inline-flex;align-items:center;gap:8px;max-width:min(46vw,420px);background:rgba(255,181,71,.1);border:1px solid rgba(255,181,71,.45);color:var(--text);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer}
.activity span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.activity b{font-weight:600;color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap}
.actpop{position:absolute;top:50px;right:120px;z-index:60;min-width:280px;max-width:min(92vw,460px);background:var(--ink-1);border:1px solid var(--line-2);border-radius:var(--r-m);padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.actpop .job{display:flex;align-items:center;gap:9px;padding:8px 9px;font-size:13px;border-radius:8px}
.actpop .job+.job{border-top:1px solid var(--line)}
.actpop .job span{flex:1;min-width:0}
.actpop .job b{color:var(--amber);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.busy{display:flex;align-items:center;gap:9px;background:rgba(255,181,71,.08);border:1px solid rgba(255,181,71,.35);border-radius:var(--r-s);padding:8px 10px;margin:8px 0;font-size:13px}
.busy span{flex:1;min-width:0}
.busy b{color:var(--amber);font-weight:600;font-variant-numeric:tabular-nums}
.thbusy:not(.clip){position:relative}
.thbusy::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(11,18,32,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23ffb547' stroke-width='2.5' stroke-dasharray='40 20' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center/22px no-repeat}
.btn.working{position:relative;padding-left:30px}
.btn.working::before{content:"";position:absolute;left:10px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .8s linear infinite}
@media (max-width:700px){.activity span{display:none}.actpop{right:8px}}

/* ---------- characters ---------- */
.castlist{display:grid;gap:10px;margin-top:8px}
.castcard{background:var(--ink-0b);border:1px solid var(--line);border-radius:var(--r-m);padding:10px}
.castmain,.castage{display:flex;gap:10px;align-items:flex-start}
.castage{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);margin-left:18px}
.castface{flex:0 0 auto;width:78px;height:104px;border-radius:8px;background:#0b1220 center/cover no-repeat;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;text-align:center;position:relative}
.castage .castface{width:58px;height:78px}
.castface span{font-size:11px;color:var(--dim);padding:4px}
.castfields{flex:1;min-width:0;display:grid;gap:6px}
.castfields textarea{resize:vertical}
.whochips{display:flex;flex-wrap:wrap;gap:6px}
.whochips button{display:inline-flex;align-items:center;gap:6px;background:var(--ink-1);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px 3px 3px;font-size:12.5px;cursor:pointer}
.whochips button i{width:22px;height:22px;border-radius:50%;background:#0b1220 center/cover;flex:0 0 auto}
.whochips button[aria-pressed=true]{background:rgba(255,181,71,.14);border-color:var(--amber)}
.anims.sm{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));max-height:280px}
.bgtarget button:disabled{opacity:.5;cursor:not-allowed}
.clip.fx{background:#4a1d1d;border-color:rgba(248,113,113,.45);color:#fee2e2;font-size:11px;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;display:flex;align-items:center}
.clip.fx.sel{outline:2px solid #fca5a5}
.clip.sub.sel{outline:2px solid #2dd4bf;outline-offset:-1px;background:#115050}
.clip.sub.fast{border-color:rgba(251,146,60,.85);box-shadow:inset 0 -3px 0 rgba(251,146,60,.85)}
.clip.sub .ed{opacity:0}.clip.sub:hover .ed,.clip.sub.sel .ed{opacity:1}
.capwords{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.capwords button{border:1px solid var(--line);background:var(--ink-2);color:inherit;border-radius:7px;padding:3px 8px;font-size:13px;cursor:pointer}
.capwords button[aria-pressed=true]{background:#5c4a07;border-color:#ffd84d;color:#ffe9a3}
.capwords .cut{padding:3px 5px;opacity:.55}.capwords .cut[aria-pressed=true]{opacity:1;background:#0f3a3a;border-color:#2dd4bf;color:#9ff}

/* ---------- left bar: icon rail, folding sections, chips, search, resize (v6.40) ---------- */
.colresize{cursor:col-resize;background:transparent;position:relative;z-index:4;touch-action:none}
.colresize::after{content:"";position:absolute;inset:0 2px;background:var(--line);transition:background .15s}
.colresize:hover::after,.colresize.on::after{background:var(--amber)}
.studio-left{display:grid;grid-template-columns:74px minmax(0,1fr);overflow:hidden}
.rail{display:flex;flex-direction:column;gap:1px;padding:6px 6px;border-right:1px solid var(--line);overflow-y:auto;background:var(--ink-0b);height:100%;min-height:0}
.rail .rb{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:var(--muted);padding:6px 2px 5px;flex:none;border-radius:10px;cursor:pointer;font:600 11px var(--ui, inherit)}
.rail .rb:hover{background:var(--ink-2);color:var(--text)}
.rail .rb[aria-pressed=true]{background:var(--ink-2);color:var(--text);box-shadow:inset 3px 0 0 var(--amber)}
.rail .ri{font-size:17px;line-height:1;filter:saturate(.85)}
.rail .rb[aria-pressed=true] .ri{filter:none}
.rail .rbadge{position:absolute;top:4px;right:6px;min-width:15px;height:15px;border-radius:8px;font:700 9.5px/15px var(--ui, inherit);text-align:center;padding:0 3px}
.rail .rbadge:empty{display:none}
.rail .rbadge.ok{background:#14532d;color:#86efac}
.rail .rbadge.n{background:#1e3a8a;color:#bfdbfe}
.rail .rbadge.busy{display:block;width:13px;height:13px;min-width:0;padding:0;border:2px solid rgba(255,181,71,.25);border-top-color:var(--amber);background:none;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sscroll{overflow:auto;min-height:0}
.shead{position:sticky;top:0;z-index:3;background:var(--ink-1);padding:10px 14px 8px;border-bottom:1px solid var(--line)}
.sfind{width:100%;font-size:13.5px;padding:8px 11px;border-radius:9px}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;padding-bottom:3px}
.chip{border:1px solid var(--line);background:var(--ink-2);color:var(--muted);border-radius:20px;padding:3px 10px;font-size:12px;cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--text);border-color:var(--amber)}
.sec.fold>h2.fold-h{cursor:pointer;user-select:none;margin-bottom:0;flex-wrap:wrap;row-gap:2px}
.sec.fold:not(.closed)>h2.fold-h{margin-bottom:8px}
.sec.fold.closed{padding-top:12px;padding-bottom:12px}
.sec.fold.closed>:not(h2){display:none!important}
.fold-chev{font-style:normal;display:inline-block;width:12px;color:var(--muted);transition:transform .15s;transform:rotate(90deg);font-size:17px;line-height:1}
.sec.fold.closed .fold-chev{transform:rotate(0)}
.fold-sum{font:400 12px var(--ui, inherit);color:var(--muted);margin-left:auto;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.sec.fold:not(.closed) .fold-sum{opacity:.7}
.shit{border-bottom:1px solid var(--line)}
.sfrom{display:block;border:0;background:none;color:var(--amber);font-size:11.5px;font-weight:700;padding:10px 18px 0;cursor:pointer}
.shit>.sec{border-bottom:0}
/* trim editor (inspector) */
.trimed{display:grid;gap:8px}
.trimscreen{cursor:pointer}
.trimbar{display:flex;gap:6px;align-items:center}
.trimbar .sp{flex:1}
.trimnow{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.trimstrip{position:relative;height:46px;border-radius:6px;overflow:hidden;background:#0b1220;touch-action:none;cursor:pointer;user-select:none}
.trimframes{position:absolute;inset:0;display:flex}
.trimframes i{flex:1;background:#141c33 center/cover;border-right:1px solid rgba(0,0,0,.35)}
.trimshade{position:absolute;top:0;bottom:0;background:rgba(5,8,18,.72);pointer-events:none}
.trimshade.l{left:0}
.trimwin{position:absolute;top:0;bottom:0;border-top:3px solid #f5a623;border-bottom:3px solid #f5a623;box-sizing:border-box;cursor:grab}
.trimh{position:absolute;top:0;bottom:0;width:12px;margin-left:-6px;background:#f5a623;border-radius:4px;cursor:ew-resize;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.trimh::after{content:'';position:absolute;left:5px;top:35%;bottom:35%;width:2px;background:rgba(0,0,0,.45);border-radius:1px}
.trimh:focus-visible{outline:2px solid #fff}
.trimph{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 4px rgba(0,0,0,.6)}
.trimrows{display:grid;gap:6px}
.trimrow{display:flex;gap:6px;align-items:center}
.trimrow>span{flex:1;font-size:12.5px;color:var(--dim)}
.trimrow>span b{color:var(--text,#fff);font-variant-numeric:tabular-nums}
.seg2{display:grid;gap:4px;margin-bottom:6px}
.inscue{position:absolute;top:0;bottom:0;width:3px;margin-left:-1px;background:#f5a623;z-index:6;pointer-events:none;box-shadow:0 0 8px #f5a623}
.inscue span{position:absolute;top:26px;left:6px;white-space:nowrap;background:#f5a623;color:#1a1204;font-size:11px;font-weight:800;padding:2px 7px;border-radius:5px}
/* timeline: hover line, transitions, popovers */
.hoverline{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);pointer-events:none;z-index:5}
.hoverline span{position:absolute;top:1px;left:4px;font-size:10px;font-weight:700;background:rgba(15,23,42,.9);color:#fff;padding:0 4px;border-radius:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.trband{position:absolute;top:4px;height:6px;background:linear-gradient(90deg,rgba(245,166,35,.95),rgba(245,166,35,.15));border-radius:3px;pointer-events:none;z-index:3}
.trn{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;padding:0;border-radius:50%;border:2px solid #f5a623;background:#1a1204;color:#f5a623;font:700 11px/16px system-ui,sans-serif;cursor:ew-resize;z-index:4;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.trn.cut{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.7);background:rgba(10,14,28,.85);width:16px;height:16px;margin:-8px 0 0 -8px;line-height:12px;opacity:.75}
.trn.t3{background:#f5a623;color:#1a1204}
.trn:hover,.trn.on{transform:scale(1.18);opacity:1}
.trpop{position:absolute;z-index:30;width:240px;display:grid;gap:8px;padding:10px 12px;background:#141c33;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.trpop-h{display:flex;align-items:center;justify-content:space-between}
.trpop select{width:100%}
.trpop-l{display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.trpop.keys{width:330px}
.krow{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.krow kbd{flex:0 0 118px;font:600 11.5px ui-monospace,monospace;color:#fff;background:#0b1220;border:1px solid var(--line);border-radius:5px;padding:2px 6px;text-align:center}
.clip.mus canvas{opacity:.95}
/* timeline: markers, mute/solo, overview, clip sound */
.tl-ruler .mk{position:absolute;top:0;bottom:-1px;width:0;border-left:2px solid var(--c,#fbbf24);z-index:5;cursor:grab}
.tl-ruler .mk::before{content:'';position:absolute;left:-2px;top:2px;width:11px;height:9px;background:var(--c,#fbbf24);clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%)}
.tl-ruler .mk b{position:absolute;left:12px;top:1px;font-size:10px;font-weight:700;white-space:nowrap;color:#0b1020;background:var(--c,#fbbf24);padding:0 5px;border-radius:3px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.tl-ruler .mk.sel{box-shadow:0 0 0 1px #fff}
.tl-head .tl-sub{display:flex;align-items:center;gap:4px;min-width:0}
.tl-head .tl-sub>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tl-head .ms{display:inline-flex;gap:3px;margin-left:auto;flex:0 0 auto}
.tl-head .ms button{width:18px;height:16px;padding:0;border-radius:4px;border:1px solid var(--line);background:transparent;color:var(--dim);font:700 9.5px/14px system-ui,sans-serif;cursor:pointer}
.tl-head .ms button[data-ms^="m"][aria-pressed="true"]{background:#ef4444;border-color:#ef4444;color:#fff}
.tl-head .ms button[data-ms^="s"][aria-pressed="true"]{background:#fbbf24;border-color:#fbbf24;color:#1a1204}
.tl-ovw{position:relative;height:18px;margin:0 8px 4px 133px;border-radius:4px;background:#0b1220;cursor:pointer;touch-action:none}
.tl-ovw canvas{position:absolute;inset:0;width:100%;height:100%}
.tl-ovw .vp{position:absolute;top:0;bottom:0;border:2px solid #fff;border-radius:4px;background:rgba(255,255,255,.12);pointer-events:none;box-sizing:border-box}
.clip canvas[data-cw]{position:absolute;left:0;right:auto;top:auto;bottom:2px;height:22px;inset:auto auto 2px 0;width:100%;pointer-events:none}
.clip .lab em{font-style:normal;font-weight:500;opacity:.8;margin-left:4px}
.mkc{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.mkc[aria-pressed="true"]{border-color:#fff}
/* graphics track, keyframes, music points */
.clip.gx{background:#1f3b2d;border-color:rgba(74,222,128,.45)}
.clip.gx .lab b{display:inline-block;min-width:14px;text-align:center;color:#4ade80}
.clip .kd{position:absolute;bottom:3px;width:9px;height:9px;margin-left:-4px;background:#fbbf24;transform:rotate(45deg);border:1px solid #1a1204;z-index:3;cursor:pointer}
.clip.mus .mpt{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fbbf24;border:2px solid #1a1204;z-index:3;cursor:move}
.clip.mus{cursor:crosshair}
.gfxmenu{width:260px}
.gfxgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gfxgrid .btn{justify-content:flex-start;text-align:left}
.gfxgrid .btn b{display:inline-block;width:16px;text-align:center;color:#4ade80}
.gsw{width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,.15);cursor:pointer;padding:0}
.gsw[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px #f5a623}
.gsw.none{background:transparent;color:var(--dim);font-size:12px}
input[type=color][data-gcc],input[type=color][data-gbc]{width:30px;height:24px;padding:0;border:0;background:none}
.klist{display:grid;gap:4px;margin-bottom:8px}
.krow2{display:flex;gap:6px;align-items:center}
.krow2 .hint{flex:1;font-size:11px}
.krow2.on button:first-child{color:#fbbf24}
.krow2 select{width:auto}
.clip.gx .lab{top:1px;font-size:10px;padding:0 5px;background:transparent}
/* dialogs: microphone take, translate, versions, templates */
.recbox{position:fixed;inset:0;z-index:100;background:rgba(3,6,15,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.recpanel{width:min(560px,100%);max-height:90vh;overflow:auto;display:grid;gap:10px;padding:16px 18px;background:#141c33;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.recpanel.wide{width:min(720px,100%)}
.prompter{font-size:20px;line-height:1.6;padding:12px 14px;background:#0b1220;border-radius:10px;max-height:38vh;overflow:auto;color:#fff}
.prompter[dir=rtl]{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;font-size:22px;line-height:2.1}
.recmeter{height:8px;border-radius:4px;background:#0b1220;overflow:hidden}
.recmeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#facc15,#ef4444);transition:width .06s}
.recrow{display:flex;gap:10px;align-items:center}
.recrow b{font:700 18px ui-monospace,monospace;min-width:48px}
.vlist{display:grid;gap:6px;max-height:55vh;overflow:auto}
.vrow{display:flex;gap:6px;align-items:center;padding:7px 9px;border:1px solid var(--line);border-radius:9px}
.vrow small{color:var(--dim)}
/* your account */
.cloudst{font-size:12px;font-weight:700;color:var(--dim);padding:4px 8px;border-radius:7px;cursor:pointer;white-space:nowrap}
.cloudst.saved{color:#4ade80}
.cloudst.saving,.cloudst.loading{color:#93c5fd}
.cloudst.offline,.cloudst.error,.cloudst.conflict{color:#fbbf24;background:rgba(251,191,36,.12)}
.cloudline{display:flex;flex-direction:column;gap:2px;padding:8px 12px;margin:-4px -4px 4px;border-bottom:1px solid var(--line);font-size:12.5px}
.cloudline small{color:var(--dim)}
.menulist{max-height:46vh;overflow:auto;display:grid}
.cloudline .usage.warn{color:#fbbf24;font-weight:700}
/* my account */
.mebtn{display:inline-flex;align-items:center;gap:6px}
.mebtn .pav,.pavatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#f5a623;color:#1a1204;font-weight:800;font-size:12px}
.pavatar{width:44px;height:44px;font-size:20px;flex:0 0 auto}
.mebtn .mename{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.mebtn .mename{display:none}}
.profile{display:grid;gap:12px}
.pcard{display:flex;gap:12px;align-items:center}
.psec{display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:10px}
.prow{display:flex;gap:10px;align-items:baseline}
.prow>span:first-child,.prow>b:first-child{flex:1}
.prow small{color:var(--dim)}
.pkinds{display:grid;gap:4px;margin-top:4px}
.pmeter{height:10px;border-radius:5px;background:#0b1220;overflow:hidden}
.pmeter i{display:block;height:100%;background:#22c55e;border-radius:5px}
.pmeter.warn i{background:#fbbf24}.pmeter.full i{background:#ef4444}
.pbars{display:flex;gap:10px;align-items:flex-end;height:84px;padding-top:6px}
.pbar{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.pbar i{display:block;width:70%;max-width:34px;background:#60a5fa;border-radius:4px 4px 0 0}
.pbar small{color:var(--dim);font-size:11px}
.pwbox{display:grid;gap:6px}.pwbox[hidden]{display:none}
.pwbox input{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#0b1220;color:var(--text)}
/* brand kits */
.blogo{flex:0 0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:16px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.bcols{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
.bcols i{width:14px;height:14px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.bprev{display:flex;gap:12px;align-items:center;padding:14px;border-radius:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.bprev b{display:block;font-size:17px}.bprev small{opacity:.9}
.grid2>.field input[type=color]{width:100%;height:36px;padding:2px}
/* Fix a word: the scene's words as buttons */
.wchips { line-height: 2.1; max-height: 34vh; overflow: auto; }
.wchip { font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 0 4px; cursor: pointer; }
.wchip:hover { background: rgba(127,127,127,.18); }
.wchip.on { background: var(--accent, #6d5efc); color: #fff; border-color: transparent; }
/* Sound library */
.slib{width:min(860px,100%);max-height:88vh;grid-template-rows:auto auto auto minmax(0,1fr) auto}
.slib input[type=search]{width:100%}
.slib-cats{display:flex;flex-wrap:wrap;gap:6px}
.slib-cats .chip small{opacity:.65}
.slib-cats .chip.on{color:#111;background:var(--amber);border-color:var(--amber)}
.slib-list{overflow:auto;min-height:200px;max-height:58vh;display:grid;gap:2px;padding-right:4px}
.slib-row{display:grid;gap:4px;padding:8px 6px;border-bottom:1px solid var(--line)}
.slib-name{min-width:0}
.slib-takes{display:flex;flex-wrap:wrap;gap:6px}
.slib-take{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 2px;border:1px solid var(--line);border-radius:8px;background:var(--ink-2)}
.slib-take small{color:var(--muted);font-variant-numeric:tabular-nums}
.slib-take.cur{border-color:var(--amber)}
.slib-take .btn.on{border-color:var(--amber);color:var(--amber)}
@media (max-width:600px){.tl-bar .btn{white-space:nowrap}}
/* voice check */
.vcbox{display:grid;gap:4px;margin-top:6px}
.vcitem{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px;border:1px solid rgba(248,113,113,.45);background:rgba(248,113,113,.08);border-radius:8px;font-size:13px}
.vcitem bdi b{font-size:16px}
.clip.voice .vbad{position:absolute;top:0;bottom:0;width:3px;margin-left:-1px;background:#f87171;box-shadow:0 0 0 1px rgba(0,0,0,.35);cursor:pointer;z-index:3}
.clip.voice .vbad::after{content:'!';position:absolute;top:-1px;left:3px;font:700 10px/12px system-ui;color:#fff;background:#ef4444;border-radius:3px;padding:0 3px}
.vcprog{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:6px}.vcprog i{display:block;height:100%;background:var(--amber);transition:width .3s}
.vcitem.col{display:grid;justify-content:stretch;gap:4px;margin-top:6px}
.vcline{margin:0;font-size:15px;line-height:1.8}
.vcline[dir=auto]:lang(ur),.vcline{unicode-bidi:plaintext}
mark.vcw{background:#ef4444;color:#fff;border-radius:4px;padding:0 3px}
/* Sound library: favourites, levels, my sounds */
.slib-take .fav{color:var(--muted);min-width:26px;padding:2px 4px}
.slib-take .fav.on{color:#fbbf24}
.slib-take.bad{opacity:.55}
.slib-take .lvl{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.lvl-loud{background:#f97316}.lvl-normal{background:#22c55e}.lvl-quiet{background:#60a5fa}.lvl-bad{background:#6b7280}
.slib-row.mine{background:rgba(251,191,36,.05)}
.slib-form{display:grid;gap:6px;padding:10px;border:1px solid var(--amber);border-radius:10px;background:var(--ink-2)}
.slib-name .btn.ghost{margin-left:4px}
.slib-list{align-content:start}.slib-takes{align-items:center}.slib-take{align-self:center}
/* who speaks */
.spklist{display:grid;gap:6px}
.spkrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--ink-2)}
.spkname{display:grid;min-width:120px;flex:0 1 160px}
.spkname small{color:var(--muted);font-size:11px}
.spkrow select{flex:1;min-width:0}
.wedit{display:grid;gap:6px;margin-top:6px;padding:8px;border:1px solid var(--amber);border-radius:8px;background:var(--ink-2)}.wedit textarea{width:100%;font-size:16px;line-height:1.8}
/* film atmosphere editor */
.atmos{display:grid;gap:8px;margin-top:6px}
.atmos-row{display:grid;gap:4px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--ink-2)}
.atmos-row select{flex:1;min-width:0}
.atmos-n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--amber);color:#111;font-size:11px;font-weight:700;flex:none}
.atmos-sl{display:grid;gap:2px;font-size:12px}
.atmos-sl input[type=range]{flex:1;min-width:0}
.atmos-sl small{color:var(--muted);font-size:10px;width:30px;text-align:center}
.atmos-scene select{flex:1;min-width:0}
/* AI score brief (Music → AI score made for this video) */
.score-brief { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); font-size: 12.5px; line-height: 1.45; }
.score-brief ol { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 3px; }
.score-brief .t { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 11.5px; }
/* key objects: the reference picture is square, shown whole */
.castface.propface { background-size: contain; background-repeat: no-repeat; background-color: #d9d9d9; }
/* ---------- Easy mode: only scenes, overlays, voice and music on the timeline; the simple picture changer ---------- */
[data-mode="easy"] .tl-head[data-tr="g1"], [data-mode="easy"] .tl-head[data-tr="fx"], [data-mode="easy"] .tl-head[data-tr="t1"],
[data-mode="easy"] .tl-lane[data-lane="g1"], [data-mode="easy"] .tl-lane[data-lane="fx"], [data-mode="easy"] .tl-lane[data-lane="t1"],
[data-mode="easy"] .tl-adv { display: none !important; }
.easy-edit h2 { font-size: 16px; }
.easy-thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; background: #0b1020 center / contain no-repeat; border: 1px solid rgba(255,255,255,0.08); display: grid; place-items: center; color: var(--muted, #8a94b0); font-size: 13px; text-align: center; padding: 8px; }
.easy-badge { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11.5px; padding: 2px 8px; border-radius: 99px; }
.easy-words { margin: 8px 0 0; font-size: 13px; line-height: 1.5; opacity: 0.85; }
.easy-btns { display: grid; gap: 8px; margin-top: 12px; }
.easy-btns .btn { justify-content: center; }
.easy-h3 { font-size: 13px; margin: 16px 0 6px; opacity: 0.85; }
.easy-more { margin: 14px 4px 4px; }
/* AI score: the listening player and clickable parts */
.score-player { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; }
.score-play { min-width: 86px; justify-content: center; }
.score-bar { flex: 1; min-width: 60px; accent-color: var(--accent, #ffb547); }
.score-time { font-variant-numeric: tabular-nums; font-size: 11.5px; opacity: 0.75; white-space: nowrap; }
.score-secs li { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin-inline-start: -4px; transition: background 0.15s; }
.score-secs li:hover { background: rgba(255,255,255,0.06); }
.score-secs li.on { background: rgba(255,181,71,0.16); }
.score-secs li.on b { color: var(--accent, #ffb547); }
/* shorts from a long video */
.shortlist { display: grid; gap: 8px; margin-top: 10px; }
.shortcard { padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); display: grid; gap: 6px; }
.shortcard.off { opacity: 0.55; }
.shortcard .field { margin: 0; }
.shortmade { display: grid; gap: 6px; margin-top: 10px; padding: 10px; border-radius: 10px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); }
/* the activity chip: a clearer view of everything running */
.activity{position:relative;overflow:hidden;padding:6px 14px;font-size:13px;font-weight:600;box-shadow:0 0 0 0 rgba(255,181,71,.4);animation:actpulse 2.4s ease-in-out infinite}
@keyframes actpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,181,71,.35)}50%{box-shadow:0 0 0 4px rgba(255,181,71,.08)}}
.activity .actn{font-style:normal;background:var(--amber);color:#1a1205;border-radius:999px;font-size:11px;font-weight:800;padding:1px 7px;min-width:18px;text-align:center}
.activity .actbar{position:absolute;left:0;bottom:0;height:2px;background:var(--amber);transition:width .4s}
.activity .actbar.indef{width:35%;animation:actslide 1.4s ease-in-out infinite}
@keyframes actslide{0%{left:-35%}100%{left:100%}}
.actpop .acth{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.6;padding:8px 9px 2px}
.actpop .jobm{flex:1;min-width:0;display:grid;gap:5px}
.actpop .jobbar{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.actpop .jobbar i{display:block;height:100%;background:var(--amber);border-radius:4px;transition:width .4s}
/* preview zoom */
.pview{position:relative;max-width:100%;display:flex;align-items:center;justify-content:center}
.pview.zoomed{display:block;overflow:auto;padding:22px 6px 6px;border-radius:6px;background:rgba(0,0,0,.25);cursor:grab;overscroll-behavior:contain}
.pview.zoomed .screen{margin:0 auto;max-width:none;max-height:none}
.pview.zoomed.panning{cursor:grabbing}
.pzoom{display:flex;align-items:center;gap:4px;margin-left:auto;flex:0 0 auto}
.pzoom .pzsel{width:auto;padding:4px 6px;font-size:12px;height:28px}
.monitor:fullscreen{background:#05070d;padding:24px}
@media (max-width:700px){.pzoom .pzsel,.pzoom button:not(.icon){display:none}}
/* end card layouts */
.endlays{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.endlays button{display:flex;flex-direction:column;gap:3px;align-items:stretch;padding:4px;border-radius:8px;border:1px solid var(--line);background:var(--ink-0b);color:var(--text);cursor:pointer;font-size:10.5px;line-height:1.2;text-align:center}
.endlays button[aria-pressed=true]{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,181,71,.35)}
.endlays canvas{border-radius:5px;display:block}
.endlays .endauto{display:grid;place-items:center;aspect-ratio:9/16;font-size:26px;background:linear-gradient(135deg,#1e293b,#334155);border-radius:5px}

/* ---------- interface update: timeline, preview, header ---------- */
.tl-sep{width:1px;align-self:stretch;margin:4px 4px;background:var(--line-2,#2b3959);flex:0 0 1px}
.tl.collapsed .tl-body,.tl.collapsed .tl-ovw{display:none}
.tl.collapsed .tl-bar>*:not(.tc):not(.tl-col):not(.sp){display:none}
.tl-col{flex:0 0 auto;min-width:32px}
.tl-head b{display:flex;align-items:center;gap:6px;white-space:nowrap}
.tl-head .tl-ic{font-style:normal;font-size:13px;width:16px;text-align:center}
.tl-head .tl-tag{font-weight:600;font-size:9.5px;opacity:.5;letter-spacing:.04em;padding:1px 4px;border:1px solid var(--line-2,#2b3959);border-radius:4px}
.monitor{padding-top:26px}
.screen .tally{top:-20px}
.topgear{font-size:16px;padding:6px 10px}
.toast{pointer-events:auto}
/* side panels: secondary actions look like buttons (not plain text), sections read clearly */
.panel .btn.ghost:not(.icon),#insp .btn.ghost:not(.icon){background:var(--ink-2);border-color:var(--line-2);color:var(--text)}
.panel .btn.ghost:not(.icon):hover,#insp .btn.ghost:not(.icon):hover{border-color:var(--amber);color:var(--text)}
.sec h2{font-size:15px;font-weight:700;letter-spacing:.01em;margin-bottom:6px}
.sec{padding:16px 18px 18px}
.sec .row{gap:8px}
.chips .chip{white-space:nowrap}
.undogrp{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.undogrp .btn{border:0;border-radius:0}.undogrp .btn+.btn{border-left:1px solid var(--line-2)}
.topgear{display:inline-flex;align-items:center;gap:4px}
@media (max-width:1100px){.topgear .setlbl{display:none}}
a.topgear{text-decoration:none}
[data-mode="easy"] .tl-head .ms,[data-mode="easy"] .tl-head .tl-tag{display:none}
.tl.collapsed{min-height:0}
.tl-bar .btn.sm{padding:4px 7px}
.tl-bar{column-gap:5px}
.tl-bar .zoom input[type=number]{width:58px!important}

/* ---------- Easy mode on phones and tablets: preview on top, one step at a time, a tab bar at the bottom ---------- */
.etabs,.estrip{display:none}
.app[data-mode="easy"][data-mob="1"]{display:block;height:auto;min-height:100dvh}
.app[data-mode="easy"][data-mob="1"] .main{display:block;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
.app[data-mode="easy"][data-mob="1"] .colresize,.app[data-mode="easy"][data-mob="1"] .tl,.app[data-mode="easy"][data-mob="1"] .easy-more{display:none!important}
.app[data-mode="easy"][data-mob="1"] .stage{position:sticky;top:0;z-index:20;background:var(--ink-0b,#0b1020);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.app[data-mode="easy"][data-mob="1"] .monitor{padding:20px 10px 8px;gap:6px}
.app[data-mode="easy"][data-mob="1"] .panel{border:0;overflow:visible;min-height:0}
.app[data-mode="easy"][data-mob="1"] .estep{display:none}
.app[data-mode="easy"][data-mob="1"][data-estep="make"] .estep[data-step="make"],.app[data-mode="easy"][data-mob="1"][data-estep="export"] .estep[data-step="export"],.app[data-mode="easy"][data-mob="1"][data-estep="scenes"] .estep[data-step="scenes"]{display:block}
.app[data-mode="easy"][data-mob="1"] .etabs{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink-1,#111827);border-top:1px solid var(--line-2,#2b3959);padding:6px 8px calc(6px + env(safe-area-inset-bottom));gap:6px}
.etabs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;border-radius:12px;border:0;background:transparent;color:var(--muted);font:600 12.5px/1.1 var(--ui,inherit);cursor:pointer}
.etabs button b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink-3,#1f2937);color:var(--text);font-size:12px}
.etabs button[aria-pressed="true"]{background:rgba(255,181,71,.12);color:var(--text)}
.etabs button[aria-pressed="true"] b{background:var(--amber);color:#1a1205}
.app[data-mode="easy"][data-mob="1"] .estrip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 14px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.estrip::-webkit-scrollbar{display:none}
.estrip-it{position:relative;flex:0 0 auto;width:68px;height:96px;border-radius:10px;border:2px solid transparent;background:#0b1220 center/cover;scroll-snap-align:center;cursor:pointer;color:#fff;padding:0}
.estrip-it.on{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,181,71,.25)}
.estrip-it b{position:absolute;left:5px;top:4px;font-size:11px;background:rgba(0,0,0,.6);border-radius:6px;padding:1px 5px}
.estrip-it small{position:absolute;right:4px;bottom:3px;font-size:10px;background:rgba(0,0,0,.6);border-radius:5px;padding:0 4px}
.estrip-it i{position:absolute;right:4px;top:4px;font-style:normal;font-size:11px}
.app[data-mode="easy"][data-mob="1"] .easy-edit{padding-top:8px}
.app[data-mode="easy"][data-mob="1"] .easy-btns .btn{padding:11px 12px;font-size:14px}
.app[data-mode="easy"][data-mob="1"] ~ .toasts,.app[data-mode="easy"][data-mob="1"] .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
/* a compact header on phones and tablets (every mode) */
@media (max-width:900px){
  .top{flex-wrap:nowrap;gap:6px;padding:6px 8px;overflow-x:auto;scrollbar-width:none}
  .top::-webkit-scrollbar{display:none}
  .top .brand small,.top .mename,.top .cloudst{display:none}
  .top .proj input{width:118px;font-size:13px;padding:6px 8px}
  .top .modes button{padding:5px 9px;font-size:12.5px}
  .top .btn{padding:5px 8px}
}
@media (max-width:980px){.toasts{bottom:calc(90px + env(safe-area-inset-bottom))}}
.app[data-mode="easy"][data-mob="1"] .main{display:flex;flex-direction:column}
.app[data-mode="easy"][data-mob="1"] .stage{order:-1}

/* v6.68 — text graphics: emoji picker, quick looks, style toggles */
.gemo{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:3px;max-height:180px;overflow:auto;padding:6px;margin:0 0 8px;border:1px solid var(--line,#334155);border-radius:10px;background:var(--ink-2,rgba(255,255,255,.03))}
.gemo[hidden]{display:none}
.gemo button{font-size:20px;line-height:1;padding:6px 0;border:0;border-radius:7px;background:transparent;cursor:pointer;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.gemo button:hover,.gemo button:focus-visible{background:rgba(148,163,184,.22);transform:scale(1.15)}
.glooks{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.glooks button{font:800 12px/1 Montserrat,sans-serif;padding:9px 2px;border-radius:8px;border:1px solid rgba(148,163,184,.3);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glooks button:hover{outline:2px solid var(--amber,#f59e0b);outline-offset:1px}
.gtog{min-width:34px}
.gtog[aria-pressed="true"]{background:var(--amber,#f59e0b);border-color:var(--amber,#f59e0b);color:#111}

/* v6.69 — the end card as its own piece at the end of V1 */
.clip.v1.endc{background:repeating-linear-gradient(135deg,#3b1d5e 0 9px,#33184f 9px 18px);box-shadow:inset 0 0 0 1.5px #a78bfa;display:flex;align-items:center}
.clip.v1.endc .lab{background:#a78bfa;color:#1b0f2e;font-weight:700}
.clip.v1.endc .lab em{color:#2e1a4f;font-style:normal;font-weight:500;margin-left:4px}
.clip.v1.endc.sel{box-shadow:inset 0 0 0 2px #fff,0 0 0 2px #a78bfa}
.endlook{margin:4px 0 10px;padding:10px;border:1px solid var(--line,#334155);border-radius:12px;background:rgba(245,158,11,.05)}
.endlook .btn.on{background:var(--amber,#f59e0b);border-color:var(--amber,#f59e0b);color:#111}

/* v6.72 — edge & border effects picker */
.edgefx{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin-bottom:8px}
.edgefx button{display:flex;flex-direction:column;gap:3px;align-items:stretch;padding:4px;border-radius:8px;border:1px solid var(--line);background:var(--ink-0b);color:var(--text);cursor:pointer;font-size:10.5px;line-height:1.2;text-align:center}
.edgefx button[aria-pressed=true]{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,181,71,.35)}
.edgefx canvas{border-radius:5px;display:block}

/* v6.73 — ad style picker: real end cards, colour strip, kit line */
.styles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));max-height:560px}
.styles.wide{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.styles button.style2{display:flex;flex-direction:column;gap:3px;padding:5px;border-radius:10px;text-align:left;transition:transform .15s,border-color .15s}
.styles button.style2:hover{transform:translateY(-2px);border-color:rgba(255,181,71,.6)}
.styles .st-pic{position:relative;border-radius:7px;overflow:hidden;background:#000}
.styles .st-pic canvas{width:100%;height:auto;aspect-ratio:auto;display:block;border-radius:0}
.styles .st-pic canvas[hidden]{display:none}
.styles .st-on{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:var(--amber);color:#111;font:800 12px/20px Inter,sans-serif;text-align:center;font-style:normal;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.styles .st-sw{display:flex;height:5px;border-radius:3px;overflow:hidden;margin-top:2px}
.styles .st-sw i{flex:1}
.styles button.style2 b{font-size:11.5px;line-height:1.2;margin-top:2px}
.styles button.style2 small{font-size:10px;opacity:.65;font-weight:500}
.styles button.style2 em{font-style:normal;font-size:9.5px;line-height:1.25;opacity:.55;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- installed app (PWA) ---------- */
.installbtn{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border-color:transparent;white-space:nowrap}
.installbtn:hover{filter:brightness(1.1)}
@media (max-width:900px){.instlbl{display:none}}
.instbox{display:flex;flex-direction:column;gap:10px;max-width:520px}
.inststep{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 12px;line-height:1.45}
.inststep>b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f5a623;color:#1a1204;font-weight:800}
.shareic{display:inline-block;padding:0 5px;border-radius:5px;background:rgba(255,255,255,.12);font-weight:700}
/* in its own window: room for the phone's status bar and the home bar */
html.pwa header.top{padding-top:max(env(safe-area-inset-top),var(--top-pad,0px))}
html.pwa body{overscroll-behavior:none}
@media (display-mode:standalone){header.top{padding-top:env(safe-area-inset-top)}}
.instbar{position:fixed;left:10px;right:10px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:9000;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:14px;background:#141c33;isolation:isolate;transform:translateZ(0);border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 40px rgba(0,0,0,.5);max-width:520px;margin:0 auto}
.instbar[hidden]{display:none}
.instbar img{border-radius:10px;flex:none}
.instt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.instt span{color:var(--muted);font-size:12.5px}
.app[data-mode="easy"][data-mob="1"] ~ .instbar{bottom:calc(84px + env(safe-area-inset-bottom))}