:root{
  /* Showline (dark) */
  --bg:#1c1c1c; --work:#121212; --panel:#242424; --panel2:#2c2c2c; --line:#3a3a3a; --line2:#4c4c4c;
  --tx:#f2f2f2; --mute:#b3b3b3; --dim:#8a8a8a;
  --acc:#f0f0f0; --acc-ink:#1a1a1a; --warn:#fb7185; --ok:#34d399; --input:#2a2a2a; --hover:#333333;
  --r:10px; --font:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Monaco,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font:12px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.spacer{flex:1}

/* top */
.top{height:52px;display:flex;align-items:center;gap:18px;padding:0 18px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;letter-spacing:.22em;font-size:13px;text-transform:uppercase}
.brand .mark{display:none}
.brand .by{letter-spacing:.14em;color:var(--dim);font-size:9px}
.proj{display:flex;gap:6px;align-items:center}
.proj select{background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 10px;max-width:280px}
.engine{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:12px}
.engine i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.engine.on i{background:var(--ok)}
.engine.off i{background:var(--warn)}

/* layout */
.app{display:grid;grid-template-columns:340px 1fr 310px;height:calc(100% - 52px)}
.col{min-width:0;min-height:0;display:flex;flex-direction:column}
.list{border-right:1px solid var(--line)}
.insp{border-left:1px solid var(--line);overflow:auto;padding:6px 0 80px}
.colhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.h{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.h em{font-style:normal;color:var(--tx);margin-left:6px}

/* buttons */
.ghost{background:transparent;border:1px solid var(--line2);border-radius:8px;padding:7px 11px;color:var(--tx)}
.ghost:hover{border-color:var(--mute);background:var(--hover)}
.ghost.sm{padding:4px 9px;font-size:12px}
.primary{background:var(--acc);color:var(--acc-ink);border:0;border-radius:999px;padding:9px 14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.primary:hover{background:#fff}
.primary:disabled{opacity:.35;cursor:default}
.icon{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:transparent;display:grid;place-items:center;padding:0}
.icon svg{width:16px;height:16px;fill:var(--tx)}
.icon:hover{border-color:var(--acc)}

/* template menu */
.newwrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:6px;min-width:250px;display:none;z-index:20;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.menu.open{display:block}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:8px 10px}
.menu button:hover{background:#222227}
.menu small{display:block;color:var(--mute);font-size:11px;margin-top:2px}
.menu .soon{color:var(--dim);cursor:default}
.menu .soon:hover{background:none}

/* cards */
.cards{flex:1;overflow:auto;padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);padding:8px;display:grid;grid-template-columns:22px 112px 1fr;gap:8px;align-items:start;position:relative}
.card.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.card .num{font-size:11px;color:var(--mute);padding-top:3px;text-align:center}
.card input[type=checkbox]{accent-color:var(--acc);margin:6px 0 0 3px}
.card canvas{width:112px;height:63px;border-radius:5px;background:#000;display:block}
.card .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.card .txt input{width:100%;background:transparent;border:1px solid transparent;border-radius:6px;padding:3px 6px;outline:none}
.card .txt input:hover{border-color:var(--line2)}
.card .txt input:focus{border-color:var(--acc);background:#0d0d0f}
.card .l1{font-weight:600;letter-spacing:.02em}
.card .l2{color:var(--mute);font-size:12px;letter-spacing:.05em}
.card .acts{grid-column:2 / 4;display:flex;gap:4px;align-items:center}
.card .acts button{background:transparent;border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:11px;color:var(--mute)}
.card .acts button:hover{color:var(--tx);border-color:#4a4a52}
.card .acts .dup{color:var(--tx)}
.card .chips{display:flex;gap:4px;margin-left:auto}
.chip{font-size:10px;letter-spacing:.06em;padding:2px 6px;border-radius:20px;border:1px solid var(--line2);color:var(--mute)}
.chip.ok{border-color:var(--ok);color:var(--ok)}
.chip.run{border-color:#666;color:var(--tx)}
.chip.err{border-color:var(--warn);color:var(--warn)}

/* render bar */
.renderbar{border-top:1px solid var(--line);padding:10px 12px;display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
.renderbar select{grid-column:2;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:7px 8px;min-width:0}
.renderbar .folder{grid-column:1 / 3;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.renderbar .primary{grid-column:1 / 3}
.selall{color:var(--mute);font-size:12px;display:flex;gap:5px;align-items:center}
.selall input{accent-color:var(--acc)}

/* stage */
.stage{padding:16px 18px 12px;gap:10px;background:var(--work)}
.viewer{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.viewer canvas{max-width:100%;max-height:100%;aspect-ratio:16/9;background:#000;border-radius:6px;outline:1px solid var(--line)}
.vmsg{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(10,10,12,.82);border:1px solid var(--line2);padding:6px 12px;border-radius:20px;font-size:12px;color:var(--mute);display:none;backdrop-filter:blur(6px)}
.vmsg.show{display:block}
.transport{display:flex;align-items:center;gap:12px}
.tc{font-variant-numeric:tabular-nums;font-size:14px}
.tc span{color:var(--mute);margin-left:6px;font-size:12px}
.meta{color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{font-size:10px;letter-spacing:.1em;border:1px solid var(--line2);color:var(--mute);padding:3px 8px;border-radius:20px}

/* timeline */
.timeline{position:relative;padding:0 0 4px 62px;user-select:none}
.phases{position:relative;height:36px}
.phase{position:absolute;top:0;height:32px;border-left:1px solid var(--line2);padding:3px 6px;overflow:hidden;white-space:nowrap}
.phase b{display:block;font-size:10px;letter-spacing:.1em}
.phase span{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
.ruler{position:relative;height:20px;border-bottom:1px solid var(--line);cursor:ew-resize}
.ruler i{position:absolute;bottom:0;width:1px;background:var(--line2);height:6px}
.ruler i.s{height:10px;background:#3a3a42}
.ruler i span{position:absolute;bottom:9px;left:3px;font-size:10px;color:var(--dim);font-style:normal;font-variant-numeric:tabular-nums}
.track{position:relative;height:34px;margin-top:6px}
.track .tl{position:absolute;left:-62px;top:10px;font-size:10px;letter-spacing:.12em;color:var(--dim)}
.lane{position:absolute;inset:0;border-radius:6px;background:var(--panel)}
.seg{position:absolute;top:4px;bottom:4px;border-radius:4px}
.seg.black{background:#000;outline:1px solid var(--line2)}
.seg.vin{background:linear-gradient(90deg,#000,#5a5a5a)}
.seg.vplay{background:#5a5a5a}
.seg.vout{background:linear-gradient(90deg,#5a5a5a,#000)}
.seg.tin{background:linear-gradient(90deg,rgba(240,240,240,0),rgba(240,240,240,.85))}
.seg.thold{background:rgba(240,240,240,.85)}
.seg.tout{background:linear-gradient(90deg,rgba(240,240,240,.85),rgba(240,240,240,0))}
.handle{position:absolute;top:0;bottom:0;width:12px;margin-left:-6px;cursor:ew-resize;z-index:3}
.handle::after{content:"";position:absolute;left:5px;top:3px;bottom:3px;width:2px;border-radius:2px;background:#fff;opacity:.55}
.handle:hover::after,.handle.drag::after{opacity:1;background:var(--acc)}
.handle .tip{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10px;background:#000;border:1px solid var(--line2);padding:1px 5px;border-radius:4px;display:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.handle:hover .tip,.handle.drag .tip{display:block}
.playhead{position:absolute;top:36px;bottom:0;width:1px;background:var(--acc);pointer-events:none;z-index:4}
.playhead::before{content:"";position:absolute;top:0;left:-5px;border:5px solid transparent;border-top-color:var(--acc)}

/* inspector */
.sec{padding:12px 16px;border-bottom:1px solid var(--line)}
.sec>.h{margin-bottom:10px;display:block}
.row{display:grid;grid-template-columns:92px 1fr;gap:8px;align-items:center;margin:7px 0}
.row label{color:var(--mute);font-size:12px}
.row input[type=text],.row input[type=number],.row select{width:100%;background:var(--input);border:1px solid var(--line2);border-radius:7px;padding:6px 8px;outline:none;min-width:0}
.row input:focus,.row select:focus{border-color:var(--acc)}
.rng{display:grid;grid-template-columns:1fr 54px;gap:6px;align-items:center}
.rng input[type=range]{width:100%;accent-color:var(--acc)}
.rng input[type=number]{padding:4px 5px;font-size:12px;text-align:right}
.tg{display:flex;gap:6px;align-items:center}
.tg input{accent-color:var(--acc)}
.pathbox{display:flex;gap:6px}
.pathbox .p{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line2);border-radius:7px;padding:6px 8px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.pathbox .p.set{color:var(--tx)}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.tgrid .f label{display:block;color:var(--mute);font-size:11px;margin-bottom:3px}
.tgrid input{width:100%;background:var(--input);border:1px solid var(--line2);border-radius:7px;padding:6px 8px;outline:none;font-variant-numeric:tabular-nums}
.tgrid input:focus{border-color:var(--acc)}
.total{margin-top:10px;color:var(--mute);font-size:12px;display:flex;justify-content:space-between}
.total b{color:var(--tx);font-variant-numeric:tabular-nums}
.applyall{width:100%;margin-top:4px}
.info{font-size:11px;color:var(--mute);margin-top:6px}
.info.warn{color:#ffb35b}

/* queue */
.qtoggle{position:fixed;right:316px;bottom:14px;background:var(--panel2);border:1px solid var(--line2);border-radius:20px;padding:7px 14px;z-index:30}
.qtoggle span{background:var(--acc);color:var(--acc-ink);border-radius:10px;padding:0 6px;margin-left:4px;font-weight:600;font-size:11px}
.queue{position:fixed;right:316px;bottom:56px;width:460px;max-height:60vh;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.6);display:none;flex-direction:column;z-index:30}
.queue.open{display:flex}
.qhead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.qhead #qSum{color:var(--mute);font-size:12px}
.qlist{overflow:auto;padding:6px 10px 10px}
.job{padding:9px 6px;border-bottom:1px solid var(--line)}
.job:last-child{border-bottom:0}
.job .jt{display:flex;gap:8px;align-items:center}
.job .jt b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job .jt small{color:var(--mute);margin-left:auto;white-space:nowrap}
.job .bar{height:3px;background:#26262b;border-radius:3px;margin:7px 0 5px;overflow:hidden}
.job .bar i{display:block;height:100%;background:var(--acc);width:0}
.job .jm{display:flex;gap:8px;color:var(--mute);font-size:11px;align-items:center}
.job .jm button{background:none;border:0;color:var(--mute);text-decoration:underline;padding:0;font-size:11px}
.job .jm button:hover{color:var(--tx)}
.job.error .jm{color:var(--warn)}
.job pre{white-space:pre-wrap;font-size:10px;color:#c98;max-height:120px;overflow:auto;margin:6px 0 0}

.toast{position:fixed;left:50%;top:64px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:8px 14px;border-radius:20px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}
.toast.show{opacity:1}
.empty{color:var(--dim);text-align:center;padding:30px 10px;font-size:12px}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#26262b;border-radius:8px}

/* online edition */
.bggrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bgitem{position:relative;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:0;overflow:hidden;text-align:left}
.bgitem img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.bgitem span{display:block;font-size:11px;padding:5px 7px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgitem.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.bgitem.on span{color:var(--tx)}
.bgst em{position:absolute;top:5px;right:5px;font-style:normal;font-size:10px;background:rgba(0,0,0,.7);border:1px solid var(--line2);border-radius:10px;padding:1px 6px;color:var(--tx)}
.bgst em.ok{color:var(--ok);border-color:var(--ok)}
.bgst em.err{color:var(--warn);border-color:var(--warn)}
.qnote{display:none;margin:8px 14px 0;font-size:11px;color:#ffb35b}
.card .acts{flex-wrap:wrap;row-gap:4px}
.card .acts button{white-space:nowrap}
.chip{white-space:nowrap}

/* upload modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;place-items:center;z-index:60;backdrop-filter:blur(4px)}
.modal.open{display:grid}
.mbox{width:min(560px,94vw);max-height:90vh;overflow:auto;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:16px 18px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.mhead{display:flex;align-items:center;margin-bottom:12px}
.mfoot{display:flex;align-items:center;gap:10px;margin-top:14px}
.drop.up{border:1px dashed var(--line2);border-radius:10px;padding:22px;text-align:center;color:var(--mute);cursor:pointer}
.drop.up.over{border-color:var(--acc);color:var(--tx)}
.spec{width:100%;border-collapse:collapse;margin-top:12px;font-size:12px}
.spec td{padding:5px 0;border-bottom:1px solid var(--line)}
.spec td:first-child{color:var(--mute);width:40%}
.spec td:last-child{font-variant-numeric:tabular-nums}
.verdict{margin-top:10px;padding:9px 11px;border-radius:8px;font-size:12px;border:1px solid var(--line2)}
.verdict.ok{border-color:var(--ok);color:var(--ok)}
.verdict.conv{border-color:var(--line2);color:var(--tx)}
.verdict.bad{border-color:var(--warn);color:var(--warn)}
.ustep{margin-top:10px;font-size:12px}
.ustep .bar{height:3px;background:#26262b;border-radius:3px;margin-top:5px;overflow:hidden}
.ustep .bar i{display:block;height:100%;width:0;background:var(--acc)}
.ustep.done{color:var(--ok)}
.bgitem.add{display:grid;place-items:center;min-height:96px;color:var(--mute);border-style:dashed;font-size:12px}
.bgitem.add:hover{color:var(--tx);border-color:var(--acc)}
.bgitem .bgdel{position:absolute;top:5px;left:5px;display:none;background:rgba(0,0,0,.7);border:1px solid var(--line2);border-radius:10px;padding:0 6px;font-size:11px;color:var(--mute);font-style:normal}
.bgitem:hover .bgdel{display:block}

/* viewport text editor */
.ovl{position:absolute;pointer-events:none}
.tbox{position:absolute;pointer-events:auto;cursor:move;border:1px dashed transparent;border-radius:4px}
.ovl:hover .tbox,.tbox.sel{border-color:rgba(240,240,240,.55)}
.tbox.sel{border-style:solid;border-color:rgba(240,240,240,.85)}
.tbox .hd{position:absolute;width:9px;height:9px;background:var(--acc);border-radius:2px;display:none}
.tbox.sel .hd{display:block}
.tbox .nw{left:-5px;top:-5px;cursor:nwse-resize}.tbox .ne{right:-5px;top:-5px;cursor:nesw-resize}
.tbox .sw{left:-5px;bottom:-5px;cursor:nesw-resize}.tbox .se{right:-5px;bottom:-5px;cursor:nwse-resize}
.tedit{position:absolute;display:none;transform:translateY(-50%);background:rgba(18,18,18,.82);border:1px solid var(--acc);border-radius:6px;color:#fff;padding:4px 10px;outline:none;pointer-events:auto;text-align:center}
.row input[type=color]{width:100%;height:30px;padding:2px;background:var(--input);border:1px solid var(--line2);border-radius:7px;cursor:pointer}
.viewer{position:relative}

/* grids */
.viewer canvas.gridcv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;background:transparent;outline:none;border-radius:0;aspect-ratio:auto;max-width:none;max-height:none}
.mini{background:var(--input);border:1px solid var(--line2);border-radius:8px;padding:4px 8px;font-size:11px}
#snapBtn.on{border-color:var(--acc);color:var(--acc)}

/* slide name + render dialog */
.card .sub{font-size:11px;color:var(--dim);padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
.rdrows{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.rdrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:8px;align-items:center}
.rdname{color:var(--mute);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdfile{background:var(--input);border:1px solid var(--line2);border-radius:7px;padding:6px 8px;outline:none;min-width:0}
.rdfile:focus{border-color:var(--acc)}
.rdsuf{color:var(--dim);font-size:11px}
#insp input.ar,#tedit[dir=rtl]{font-family:"GESSLight",sans-serif;font-size:15px;text-align:right}