/* אולפן הצבי 2.0 · עיצוב (ווינק 1.10.2026). אולפן כהה, זהב המותג, תפריט בצד. בטלפון: לשוניות למטה. */
:root{--bg:#0A0E16;--bg2:#0c111c;--panel:#121826;--panel2:#171F31;--line:rgba(255,255,255,.07);--text:#E8ECF3;--muted:#8A94A8;
  --gold:#D4A017;--gold2:#f0c44f;--goldt:#f3cf5c;--red:#E5484D;--green:#2FB67A;--greent:#5fe0a1;--warn:#f3cf5c}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;scrollbar-width:thin;scrollbar-color:#2a3346 transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2a3346;border-radius:8px}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:'Heebo',system-ui,sans-serif;font-size:15px}
button{font-family:inherit;cursor:pointer}
svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg .fill{fill:currentColor;stroke:none}

/* כניסה */
#gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at 30% 20%,#1B3A6B,#0A0E16 65%)}
body:not(.locked) #gate{display:none}
body.locked #app{display:none}
.gbox{width:100%;max-width:360px;text-align:center}
.glogo{width:64px;height:64px;border-radius:18px;margin:0 auto 14px;background:url(/camera/icon-192.png?v=2) center/cover;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.gbox h1{margin:0 0 4px;font-size:1.6rem}
.gbox p{margin:0 0 18px;color:var(--muted)}
.gbox input{width:100%;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit;text-align:center;direction:ltr}
.gbox button{width:100%;margin-top:10px;padding:14px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1200;font-weight:900;font-size:1.05rem}
.gerr{color:#ff8a8a;min-height:1.3em;margin-top:8px}

/* מבנה */
#app{display:grid;height:100dvh;grid-template-columns:84px minmax(0,1fr) 300px;grid-template-rows:56px 1fr;grid-template-areas:"top top top" "rail main side"}
.top{grid-area:top;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0f1522,#0b1019)}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;white-space:nowrap}
.brand i{width:26px;height:26px;border-radius:8px;background:url(/camera/icon-192.png?v=2) center/cover}
.proj{display:flex;align-items:baseline;gap:8px;margin-inline-start:10px;padding:7px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--text);max-width:46vw;overflow:hidden;white-space:nowrap}
.proj b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.proj small{color:var(--muted)}
.sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:100px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:.82rem;color:var(--text);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:#59627a}
.dot.ok{background:var(--green);box-shadow:0 0 0 3px rgba(47,182,122,.18)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(243,207,92,.18)}
.dot.rec{background:var(--red);box-shadow:0 0 0 3px rgba(229,72,77,.22);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.35}}
.rec-chip{display:none}
html.recording .rec-chip{display:inline-flex}

.rail{grid-area:rail;background:var(--bg2);border-inline-end:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:6px}
.rail button,.rail a{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:12px;color:var(--muted);font-size:.72rem;font-weight:700;text-decoration:none;background:none;border:0}
.rail svg{width:22px;height:22px}
.rail button:hover,.rail a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.rail button.on{background:linear-gradient(180deg,rgba(212,160,23,.18),rgba(212,160,23,.06));color:var(--goldt);box-shadow:inset 0 0 0 1px rgba(212,160,23,.35)}
.rail .grow{flex:1}
.rail .old{opacity:.75}
.badge{position:absolute;top:6px;left:14px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--gold);color:#1a1200;font-style:normal;font-size:.62rem;font-weight:900;line-height:16px;display:none}
.badge.on{display:block}

.main{grid-area:main;position:relative;overflow:auto;background:radial-gradient(ellipse at 50% 25%,#141c2c,var(--bg) 70%)}
.view{display:none;min-height:100%}
.view.on{display:block}

/* במה */
#v-record.on{display:flex}
.stage-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;--xh:0px}
html.camon .stage-wrap{--xh:80px}   /* 2.10: שורת הציור */
html.camon.scn-on .stage-wrap{--xh:152px}
html.camon.scn-media .stage-wrap{--xh:232px}
.stage{position:relative;border-radius:16px;overflow:hidden;background:#05070b;box-shadow:0 18px 50px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08)}
.stage.f916{height:min(calc(100dvh - 285px - var(--xh)),760px);aspect-ratio:9/16}
.stage.f169{width:min(100%,calc((100dvh - 285px - var(--xh))*16/9));aspect-ratio:16/9}
.stage.f45{height:min(calc(100dvh - 285px - var(--xh)),720px);aspect-ratio:4/5}
#out{width:100%;height:100%;display:block}
.mirbtn{position:absolute;top:10px;left:10px;z-index:3;display:none;align-items:center;gap:6px;padding:7px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.18);background:rgba(10,14,22,.72);color:#fff;font-weight:800;font-size:.82rem;backdrop-filter:blur(6px)}
.mirbtn.straight{background:rgba(212,160,23,.92);color:#1a1200;border-color:transparent}
html.camon .mirbtn{display:inline-flex}
html.recording .mirbtn{pointer-events:none;opacity:.75}
.guides{position:absolute;inset:0;pointer-events:none;display:none;background:
  linear-gradient(90deg,transparent 33.2%,rgba(255,255,255,.13) 33.2%,rgba(255,255,255,.13) 33.4%,transparent 33.4%,transparent 66.6%,rgba(255,255,255,.13) 66.6%,rgba(255,255,255,.13) 66.8%,transparent 66.8%),
  linear-gradient(0deg,transparent 33.2%,rgba(255,255,255,.13) 33.2%,rgba(255,255,255,.13) 33.4%,transparent 33.4%,transparent 66.6%,rgba(255,255,255,.13) 66.6%,rgba(255,255,255,.13) 66.8%,transparent 66.8%)}
html.camon.guides-on:not(.recording) .guides{display:block}
.guides .eye{position:absolute;top:33.3%;left:14%;right:14%;border-top:1.5px dashed rgba(243,207,92,.8)}
.guides .eye span{position:absolute;top:-22px;right:0;font-size:.7rem;color:var(--goldt);font-weight:700;background:rgba(10,14,22,.6);padding:1px 7px;border-radius:6px;font-style:normal}
.tp{position:absolute;top:0;left:0;right:0;height:42%;overflow:hidden;padding:0 18px;background:linear-gradient(180deg,rgba(10,14,22,.86) 60%,rgba(10,14,22,0));display:none;-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent)}
html.camon .tp{display:block}
.tp-in{font-weight:800;line-height:1.45;padding-top:14px;white-space:pre-wrap;will-change:transform}
/* 5.10: רק לפי id. ה-class tp-paused נמצא גם על <html> כמצב (tpSetPaused), ו-".tp-paused{display:none}" הסתיר את כל הדף במסך לבן בלחיצה על השהיה */
#tpPaused{position:absolute;top:44%;left:50%;transform:translateX(-50%);background:rgba(10,14,22,.8);border:1px solid var(--line);padding:5px 12px;border-radius:100px;font-size:.8rem;font-weight:700;display:none}
html.tp-paused #tpPaused{display:block}
.count{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(5,7,11,.45);font-size:120px;font-weight:900;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.count small{font-size:17px;font-weight:700;margin-top:6px}
.count.on{display:flex}
.empty-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:radial-gradient(ellipse at 50% 40%,#162036,#05070b)}
html.camon .empty-stage{display:none}
.es-in{display:flex;flex-direction:column;gap:8px;align-items:center}
.es-in b{font-size:1.2rem}
.es-in span{color:var(--muted);font-size:.9rem;max-width:240px}
.review{position:absolute;inset:0;background:#05070b;display:none;flex-direction:column}
.review.on{display:flex}
.review video{flex:1;min-height:0;width:100%;background:#000}
.ed-vw .ink-input{z-index:5}
.ed{position:fixed;inset:0;z-index:60;background:rgba(3,6,12,.82);display:none;align-items:center;justify-content:center;padding:16px}
.ed.on{display:flex}
.ed-box{width:min(980px,96vw);max-height:96vh;overflow:auto;background:var(--panel,#121a2a);border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ed-top{display:flex;align-items:center;justify-content:space-between}.ed-top b{font-size:1.05rem}
.ed-vw{position:relative;flex:none}
#edV{width:100%;max-height:48vh;background:#000;border-radius:12px;display:block}
.ov{position:absolute;pointer-events:none}
#edOv.live{pointer-events:auto;cursor:crosshair;touch-action:none}
.rv-vw{position:relative;flex:1;min-height:0;display:flex}.rv-vw video{flex:1;min-height:0;width:100%;background:#000}
.ed-ink{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}.ed-ink .lbl{font-size:.8rem;color:var(--muted,#9aa6b8);font-weight:700}
.ed-ink button{border:1px solid var(--line);background:var(--panel2,#1a2234);color:var(--text,#fff);font:inherit;font-weight:700;font-size:.78rem;padding:6px 11px;border-radius:100px;cursor:pointer}
.ed-ink button.on{background:#D4A017;color:#1a1200;border-color:#D4A017}
.ed-notes{position:absolute;left:0;right:0;bottom:0;height:8px;pointer-events:none}.ed-notes i{position:absolute;top:0;bottom:0;background:#2ecc71;border-radius:4px;opacity:.9}
.ed-tl{position:relative;height:84px;flex:none;border-radius:10px;background:rgba(255,255,255,.06);cursor:pointer;touch-action:none;user-select:none}
#edWave{position:absolute;inset:0;width:100%;height:100%}
.ed-gone{position:absolute;inset:0;pointer-events:none}
.ed-gone i{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(231,76,60,.55) 0 6px,rgba(231,76,60,.3) 6px 12px)}
/* 2.10: בזמן הצפייה בטייק אין ציור (הוא נכנס רק להקלטה עצמה) */
.stage-wrap:has(#review.on) .inkbar{display:none}
.ed-sel{position:absolute;top:0;bottom:0;background:rgba(212,160,23,.22);pointer-events:none}
.ed-h{position:absolute;top:-6px;bottom:-6px;width:14px;margin-left:-7px;background:#D4A017;border-radius:6px;cursor:ew-resize;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.ed-h::after{content:"";position:absolute;left:5px;top:30%;bottom:30%;width:4px;border-left:2px solid rgba(0,0,0,.45);border-right:2px solid rgba(0,0,0,.45)}
.ed-h.last{outline:2px solid #fff}
.ed-ph{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.ed-times{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted,#9aa6b8);font-weight:700}
.ed-row{display:flex;gap:8px;flex-wrap:wrap}.ed-row .btn{flex:1;min-width:120px}
.ed-hint b{color:#fff}
@media (max-width:899px){ #edV{max-height:34vh} .ed-ink .lbl{display:none} .ed-ink button{padding:5px 9px;font-size:.72rem} .ed-tl{height:96px} .ed-h{width:22px;margin-left:-11px} .ed-box{padding:10px 12px;gap:8px} .ed-row .btn{min-width:0;flex:1 1 45%} }
.ed-hint{margin:0;font-size:.8rem;color:var(--muted,#9aa6b8);line-height:1.6}
.rv-bar{display:flex;align-items:center;gap:8px;padding:10px;background:var(--panel);border-top:1px solid var(--line);flex-wrap:wrap}
.rv-t{flex:1;min-width:120px;display:flex;flex-direction:column}
.rv-t small{color:var(--muted);font-size:.75rem}

.transport{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:8px 14px}
.tbtn{width:42px;height:42px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text)}
.tbtn svg{width:18px;height:18px;stroke-width:2}
.tbtn:disabled{opacity:.35;cursor:default}
.recbtn{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7a7e,var(--red));box-shadow:0 0 0 5px rgba(229,72,77,.18),0 10px 26px rgba(229,72,77,.45);border:3px solid var(--bg);outline:2px solid rgba(255,255,255,.18);transition:border-radius .2s,transform .1s}
.recbtn:active{transform:scale(.96)}
html.recording .recbtn{border-radius:18px;transform:scale(.86)}
.timer{font-variant-numeric:tabular-nums;font-weight:800;min-width:58px;text-align:center}
.scenes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.scene{width:96px;border-radius:12px;background:var(--panel);border:1px solid var(--line);padding:6px;font-size:.72rem;font-weight:700;color:var(--muted);text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center}
.scene .th{width:100%;height:50px;border-radius:8px;margin-bottom:5px;background:#1c2536 center/cover}
.scene .th.web{background:linear-gradient(135deg,#f7f3ea,#dfe6f3)}
.scene .th.cards{background:linear-gradient(135deg,#1B3A6B,#0d1f3c)}
.scene .th.scr{background:linear-gradient(135deg,#2a3346,#161d2b)}
.scene.on{border-color:rgba(212,160,23,.6);color:var(--goldt);box-shadow:0 0 0 3px rgba(212,160,23,.12)}
.scene.soon{opacity:.55}
.scene small{font-size:.62rem;color:var(--muted);font-weight:500}
.scene kbd{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:0 5px;margin-top:2px;color:var(--muted);font-size:.62rem}

.scene{cursor:pointer;font-family:inherit}
.scene.off{opacity:.45}
.inkbar{display:none;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
html.camon .inkbar{display:flex}
.inkbar button{width:auto;height:auto;border:1px solid var(--line);background:var(--panel);color:var(--text,#fff);font:inherit;font-weight:700;font-size:.74rem;padding:5px 10px;border-radius:100px;cursor:pointer}
.inkbar button.on{background:#D4A017;color:#1a1200;border-color:#D4A017}
.ink-c{display:inline-flex;gap:5px;margin:0 4px}
.ink-c i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer}
.ink-c i.on{border-color:#fff;box-shadow:0 0 0 2px #D4A017}
html.inking #out{cursor:crosshair !important}
html.inking #stage,html.camon.scn-on #stage{touch-action:none;-webkit-user-select:none;user-select:none}
.logchip{margin-inline-start:auto}
.mode-badge{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:4;background:#2ecc71;color:#04210f;font-weight:800;font-size:.78rem;padding:5px 12px;border-radius:100px;white-space:nowrap;pointer-events:none}
.mode-badge[hidden]{display:none}
.ink-input{position:absolute;z-index:20;transform:translate(50%,-50%);background:rgba(10,14,22,.85);color:#fff;border:2px solid #D4A017;border-radius:8px;font:800 16px Heebo,Arial;padding:4px 8px;direction:rtl;min-width:140px;outline:none}
.scn-hint{display:none;text-align:center;color:var(--muted,#9aa6b8);font-size:.74rem;margin:2px 0 6px}
html.camon.scn-on .scn-hint{display:block}
html.camon.scn-on #out{cursor:grab}
html.camon.scn-on #out.onface{cursor:move}
html.camon.scn-on #out.dragging{cursor:grabbing}
.scn-tools{display:none;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
html.camon.scn-on .scn-tools{display:flex}
.scn-tools button{width:auto;height:auto;border:1px solid var(--line);background:var(--panel);color:var(--text,#fff);font:inherit;font-weight:700;font-size:.76rem;padding:6px 12px;border-radius:100px;cursor:pointer}
.scn-tools button:hover{border-color:rgba(212,160,23,.5)}
.mcnt{font-size:.74rem;font-weight:800;color:var(--goldt)}
.mcnt:empty{display:none}
.mnav button{border:1px solid rgba(255,255,255,.18);background:rgba(10,14,22,.75);color:#fff;font-weight:800;backdrop-filter:blur(6px)}
.mnav{position:absolute;inset:0;z-index:3;display:none;justify-content:space-between;align-items:center;padding:0 8px;pointer-events:none}
.mnav button{pointer-events:auto;width:44px;height:44px;border-radius:50%;font-size:1.5rem;padding:0;line-height:1}
html.camon.scn-media .mnav{display:flex}
.mstrip{display:none;align-items:center;gap:8px;max-width:min(100%,640px);overflow-x:auto;padding:4px 2px}
html.scn-media .mstrip{display:flex}
.madd{flex:0 0 auto;width:62px;height:62px;border-radius:12px;border:1.5px dashed rgba(212,160,23,.55);background:rgba(212,160,23,.08);color:var(--goldt);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.madd b{font-size:1.4rem}.madd small{font-size:.62rem;font-weight:700}
.mlist{display:flex;gap:8px}
.mthumb{position:relative;flex:0 0 auto;width:62px;height:62px;border-radius:12px;background:#1c2536 center/cover;border:2px solid transparent;cursor:pointer}
.mthumb.on{border-color:var(--gold)}
.mthumb i{position:absolute;bottom:2px;left:4px;font-style:normal;font-size:.7rem}
.mthumb .x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#000;color:#fff;border:1px solid var(--line);font-size:.7rem;line-height:18px;text-align:center;display:none}
.mthumb:hover .x,.mthumb.on .x{display:block}
/* פאנל צד */
.side{grid-area:side;border-inline-start:1px solid var(--line);background:#0e1420;padding:14px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.panel h4{margin:0 0 8px;font-size:.78rem;color:var(--muted);font-weight:800}
.seg-it{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;font-size:.84rem;cursor:pointer;border:0;background:none;color:var(--text);width:100%;text-align:right}
.seg-it:hover{background:rgba(255,255,255,.03)}
.seg-it.on{background:rgba(212,160,23,.1);box-shadow:inset 0 0 0 1px rgba(212,160,23,.3)}
.seg-it b{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st{font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:100px;white-space:nowrap}
.st-ok{background:rgba(47,182,122,.15);color:var(--greent)}
.st-do{background:rgba(212,160,23,.14);color:var(--goldt)}
.st-wait{background:rgba(255,255,255,.06);color:var(--muted)}
.st-bad{background:rgba(229,72,77,.14);color:#ff9a9d}
.muted{color:var(--muted);font-size:.85rem}
.meter{height:8px;border-radius:8px;background:#1c2536;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2FB67A,#9be15d 70%,#f3cf5c 88%,#E5484D);transition:width .08s}
.kv{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--muted);margin-top:7px}
.kv b{color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.kv2{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:.8rem;color:var(--muted)}
.kv2 label{min-width:52px}
.kv2 input{flex:1;accent-color:var(--gold)}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:100px;padding:3px;margin-top:6px}
.seg button{flex:1;border:0;background:none;color:var(--muted);font-weight:700;font-size:.78rem;padding:6px;border-radius:100px}
.seg button.on{background:var(--panel2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.send{margin-top:auto}

/* כפתורים */
.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:800;font-size:.92rem;color:var(--text);background:var(--panel2);border:1px solid var(--line)}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1200;border:0}
.btn.good{background:linear-gradient(135deg,#2FB67A,#46d494);color:#04210f;border:0}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn:disabled{opacity:.4;cursor:default}

/* מסכי תוכן */
.pane{max-width:860px;margin:0 auto;padding:22px 18px 40px}
.pane.narrow{max-width:520px}
.pane h2{margin:0 0 6px;font-size:1.4rem}
.hint{color:var(--muted);margin:0 0 16px;font-size:.9rem;line-height:1.6}
.cats{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.cats button{border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:800;padding:9px 14px;border-radius:100px;font-size:.88rem}
.cats button.on{background:rgba(212,160,23,.14);color:var(--goldt);border-color:rgba(212,160,23,.45)}
.slist{display:flex;flex-direction:column;gap:8px}
.sc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:right;color:var(--text);width:100%}
.sc:hover{border-color:rgba(212,160,23,.35)}
.sc.on{border-color:rgba(212,160,23,.6);box-shadow:0 0 0 3px rgba(212,160,23,.1)}
.sc .n{width:30px;height:30px;border-radius:9px;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--goldt);flex:0 0 auto}
.sc .t{flex:1;min-width:0}
.sc .t b{display:block;font-weight:800}
.sc .t small{color:var(--muted);font-size:.8rem}
.sc .d{color:var(--muted);font-size:.78rem;white-space:nowrap}
.free{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.free label{color:var(--muted);font-weight:700;font-size:.85rem}
textarea,select{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--text);font:inherit;padding:10px 12px}
.field{margin:12px 0;display:flex;flex-direction:column;gap:6px}
.field label{color:var(--muted);font-weight:700;font-size:.85rem}
.field label b{color:var(--text)}
.field input[type=range]{accent-color:var(--gold)}
.chk{display:flex!important;align-items:center;gap:8px;color:var(--text)!important;font-weight:600!important;cursor:pointer}
.chk input{accent-color:var(--gold);width:18px;height:18px}
.say{background:var(--panel);border:1px dashed rgba(212,160,23,.4);border-radius:12px;padding:10px 12px;margin:12px 0;color:var(--muted)}
.say b{color:var(--text)}
.wave{height:64px;border-radius:12px;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;gap:2px;padding:0 10px;overflow:hidden;direction:ltr}
.wave i{flex:1;min-width:2px;background:linear-gradient(180deg,#5fe0a1,#2FB67A);border-radius:2px;height:4%}
.wave.rec i{background:linear-gradient(180deg,#ff9a9d,#E5484D)}
.sc-row{display:flex;gap:8px;margin:10px 0}
.sc-row .btn{flex:1}
.checks{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.check{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px}
.check .ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}
.ic.ok{background:rgba(47,182,122,.18);color:var(--greent)}
.ic.w{background:rgba(243,207,92,.18);color:var(--warn)}
.ic.x{background:rgba(229,72,77,.18);color:#ff9a9d}
.check b{display:block;font-size:.88rem}
.check small{color:var(--muted);font-size:.78rem}
.tlist{display:flex;flex-direction:column;gap:18px}
.tgroup h3{margin:0 0 8px;font-size:1rem}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.tcard .pv{aspect-ratio:9/12;background:#05070b center/cover;position:relative;cursor:pointer}
.tcard .pv span{position:absolute;bottom:6px;left:6px;background:rgba(10,14,22,.8);border-radius:8px;padding:1px 7px;font-size:.72rem;font-weight:700}
.tcard .tb{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.tcard .tb b{font-size:.84rem}
.tcard .row{display:flex;gap:6px;flex-wrap:wrap}
.tcard .row button{flex:1;font-size:.74rem;padding:6px 4px;border-radius:9px}

.toast{pointer-events:none;position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#fff;color:#111;font-weight:700;padding:10px 18px;border-radius:100px;z-index:90;display:none;max-width:90vw;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.busy{position:fixed;inset:0;z-index:95;background:rgba(5,7,11,.7);display:none;align-items:center;justify-content:center}
.busy.on{display:flex}
.bbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px;width:min(360px,86vw);display:flex;flex-direction:column;gap:10px}
.bar{height:8px;border-radius:8px;background:#1c2536;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2))}

/* טלפון: לשוניות למטה, בלי פאנל צד */
@media (max-width:899px){
  #app{grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) 64px;grid-template-areas:"top" "main" "rail"}
  .top{overflow:hidden;gap:6px;padding:0 10px}
  .main,.top,.rail{min-width:0}
  #soundTxt{max-width:92px;overflow:hidden;text-overflow:ellipsis;display:inline-block}
  .chip{padding:6px 10px}
  .logchip .lt{display:none}
  .tgrid{grid-template-columns:1fr}
  .tcard{flex-direction:row;align-items:stretch}
  .tcard .pv{width:84px;flex:none;aspect-ratio:auto;min-height:110px}
  .tcard .tb{flex:1;justify-content:center}
  .proj{max-width:none;flex:1;min-width:0}
  .rec-chip{display:none!important}
  .transport{gap:10px;padding:6px 10px}
  .side{display:none}
  .brand span{display:none}
  .proj{max-width:52vw;margin-inline-start:0}
  #fmtChip{display:none}
  .rail{flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-inline-end:0;border-top:1px solid var(--line);justify-content:space-around}
  .rail .grow{display:none}
  .rail button,.rail a{padding:6px 10px;flex:1}
  .stage-wrap{padding:8px 8px 10px;gap:10px}
  .stage.f916{height:auto;width:min(100%,calc((100dvh - 262px - var(--xh))*9/16))}
  html.camon .stage-wrap{--xh:100px}
  html.camon.scn-on .stage-wrap{--xh:190px}
  html.camon.scn-media .stage-wrap{--xh:282px}
  .scene .th{display:none}
  .scene{flex-direction:row;justify-content:center;padding:8px 6px}
  .scn-tools button{padding:5px 10px;font-size:.72rem}
  .scenes{gap:6px}
  .scene{width:auto;flex:1;padding:5px}
  .scene kbd{display:none}
  .badge{left:calc(50% - 22px)}
}