:root{
  --bg:#17171d; --bg2:#1d1d26; --panel:#1c1c25; --line:#2a2a36; --line2:#363646;
  --tx:#ecebf2; --mut:#8c8ba0; --pink:#e5528c; --pink2:#f06ba0; --pinkd:#5c2c45; --mint:#4fd1a5; --violet:#8b72d6; --red:#d94a7a;
  --r:12px;
  --ui:'Noto Sans Thai','Prompt','Sarabun',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#4a4a5e;background-clip:padding-box}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);font:14px/1.45 var(--ui);display:grid;grid-template-rows:62px minmax(0,1fr) clamp(415px,47vh,515px);overflow:hidden}
.mono{font-family:var(--mono);letter-spacing:.14em;font-weight:600}
.muted{color:var(--mut)} .small{font-size:12px} .tiny{font-size:11px} .pink{color:var(--pink)}
button,select,input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line);background:#16161c}
.brand{display:flex;align-items:center;gap:12px}
.exp-note{font-size:11px;color:var(--mut);border:1px solid var(--line2);border-radius:99px;padding:2px 9px;white-space:nowrap;cursor:help}
.exp-note.soon{color:#f0b442;border-color:#f0b44266}
.brand b{font-size:13px;letter-spacing:.16em}
.logo{width:32px;height:32px;border-radius:8px;flex:none;filter:drop-shadow(0 0 8px rgba(229,82,140,.45))}
.dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink)}
.top-r{display:flex;align-items:center;gap:10px}
.import{white-space:nowrap;display:flex;align-items:center;gap:10px;padding:9px 18px;border-radius:12px;cursor:pointer;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#7a3d5a,#c2457d);box-shadow:0 0 0 1px #ffffff22 inset,0 6px 22px #e5528c44;transition:.15s}
.import:hover{filter:brightness(1.12);transform:translateY(-1px)}
#projectSel{max-width:240px;padding:8px 10px;background:var(--bg2);border:1px solid var(--line);border-radius:10px}

/* main */
main{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:0;border-bottom:1px solid var(--line)}
.left{padding:20px 26px 14px;display:flex;flex-direction:column;min-height:0;min-width:0}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.lbl{font-size:11px;color:var(--mut);letter-spacing:.18em}
.ghost{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:8px 14px;cursor:pointer;transition:.15s}
.ghost:hover{border-color:var(--pink);color:#fff}
.ghost.sm{padding:5px 10px;font-size:12px} .ghost:disabled{opacity:.4;cursor:default;border-color:var(--line2);color:inherit} .danger:hover{border-color:#ff6b6b;color:#ff9a9a}
.monitor{flex:1;min-height:0;border:1px solid var(--line);border-radius:22px;background:#0f0f14;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.monitor:fullscreen{border-radius:0;background:#000}
/* เต็มหน้าต่างแบบสำรอง เมื่อเบราว์เซอร์ไม่อนุญาต Fullscreen API (เช่นเบราว์เซอร์ฝังในแอป) */
.monitor.fs{position:fixed;inset:0;z-index:80;border:0;border-radius:0;background:#000}
.fs-exit{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:5;background:#000a;border:1px solid #fff4;color:#fff;border-radius:10px;padding:7px 12px;font-size:13px;cursor:pointer}
.fs-exit:hover{border-color:var(--pink)} .fs-exit small{opacity:.6}
.stage{position:relative;background:#000}
.stage video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.stage video.standby{opacity:0;pointer-events:none}
.empty{text-align:center;color:var(--mut);padding:30px}
.drop-ico{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:22px;color:var(--pink);border:1px dashed var(--pink)}
.empty p{color:var(--tx);margin-bottom:6px}
body.drag .monitor{outline:2px dashed var(--pink);outline-offset:-10px}
.up{margin:18px auto 0;width:280px;height:8px;border-radius:5px;background:var(--line);position:relative}
.up i{position:absolute;inset:0 auto 0 0;width:0;background:var(--pink);border-radius:5px}
.up span{position:absolute;top:14px;left:0;right:0;font-size:12px}

/* subtitle overlay (ขนาดอิงด้านสั้นของวิดีโอ / 540) */
#subOverlay{position:absolute;left:0;right:0;display:flex;justify-content:center;pointer-events:none;padding:0 5%;text-align:center}
.sub-line{display:inline-block;line-height:1.28;max-width:100%;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
/* แอนิเมชันซับในพรีวิว — ต้องให้ตรงกับแท็ก ASS ใน buildASS (server.js) */
.sub-line{transform-origin:50% 100%}
/* popup เด้งกลางจอ: ตำแหน่ง/ฟอนต์ตั้งใน applyPopStyle (app.js) · จุดอ้างอิงกึ่งกลางเหมือน \an5 ใน ASS */
#popOverlay{position:absolute;left:0;right:0;display:flex;justify-content:center;pointer-events:none;padding:0 5%;text-align:center;transform:translateY(-50%)}
.pop-line{display:inline-block;line-height:1.2;max-width:100%;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;transform-origin:50% 50%}
.a-pop{animation:pop .16s ease-out}
.a-fade{animation:fadein .16s ease-out}
.a-bounce{animation:bounce .26s ease-out}
.a-zoomout{animation:zoomout .2s ease-out}
.a-stretch{animation:stretch .2s ease-out}
.a-spin{animation:spin-in .22s ease-out}
.a-blur{animation:blur-in .24s ease-out}
.a-slideup{animation:slideup .2s ease-out}
.a-slidedown{animation:slidedown .2s ease-out}
.a-slideleft{animation:slideleft .22s ease-out}
.a-karaoke,.a-karaokepop{animation:fadein .06s ease-out}
.a-karaokepop span,.a-wordpop span{display:inline-block;transition:transform .1s ease-out}
.a-karaokepop span.big{transform:scale(1.18)}
.a-wordpop span{transform:scale(.7)} .a-wordpop span.in{transform:scale(1)}
@keyframes pop{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes bounce{0%{transform:scale(.6);opacity:0}54%{transform:scale(1.14);opacity:1}100%{transform:scale(1)}}
@keyframes zoomout{from{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes stretch{from{transform:scaleX(.3);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes spin-in{from{transform:rotate(-10deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes blur-in{from{filter:blur(10px);opacity:0}to{filter:blur(0);opacity:1}}
@keyframes slideup{from{transform:translateY(.7em);opacity:0}to{transform:none;opacity:1}}
@keyframes slidedown{from{transform:translateY(-.7em);opacity:0}to{transform:none;opacity:1}}
@keyframes slideleft{from{transform:translateX(12vw);opacity:0}to{transform:none;opacity:1}}

.ctrls{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:16px;flex-wrap:wrap}
.icon{width:44px;height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);cursor:pointer;font-size:18px}
.icon:hover{border-color:var(--pink)}
.play{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:var(--pink);color:#fff;display:grid;place-items:center;box-shadow:0 6px 24px #e5528c66;transition:.15s}
.play:hover{transform:scale(1.06)}
.time{font:500 14px var(--mono);letter-spacing:.04em;color:#d8d7e4;min-width:150px;text-align:center}
.chip{font-size:11px;padding:6px 11px;border-radius:9px;background:var(--bg2);border:1px solid var(--line);color:#b7b6c8}

/* panel */
.panel{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tab{flex:1;padding:16px 8px;background:none;border:0;border-bottom:2px solid transparent;color:var(--mut);cursor:pointer;font-size:12px}
.tab.on{color:#fff;border-bottom-color:var(--pink)} .tab em{color:var(--pink);font-style:normal}
.tab b{background:var(--pinkd);color:#ffd0e2;border-radius:8px;padding:0 7px;font-size:11px;margin-left:4px}
.tabpane{display:none;flex:1;min-height:0;overflow:auto;padding:0 24px}
.tabpane.on{display:block}
.blk{padding:20px 0;border-bottom:1px solid var(--line)}
h3{font-size:16px;font-weight:700}
.hint{color:var(--mut);font-size:12px;margin-top:6px}
.hint.warn{color:#f0b463} .pad{padding:8px 4px}
.row{display:flex;align-items:center} .between{justify-content:space-between} .gap{gap:10px}
.mt{margin-top:14px} .mt-s{margin-top:8px}
.fl{font-size:13px;color:#d6d5e2;margin-bottom:6px}
.val{font-size:13px;font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
select,input[type=text],input[type=password],textarea,input[type=number]{width:100%;padding:10px 12px;border-radius:11px;background:#16161d;border:1px solid var(--line2);outline:0;transition:.15s}
select:focus,input:focus,textarea:focus{border-color:var(--pink)}
select.inl{display:inline-block;width:auto;padding:3px 8px;margin:0 6px;border-radius:8px}
textarea{resize:vertical}
.stat{margin-top:12px;font-size:12px;color:var(--mint)}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:5px;outline:0;cursor:pointer;margin:6px 0;--p:50%;
  background:linear-gradient(90deg,var(--pink) var(--p),#ffffff 0)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--pink2);border:3px solid #fff3;box-shadow:0 0 0 2px #0004}
.rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--pink2);border:3px solid #fff3}
.rng.big{height:10px}
.chk{position:relative;display:inline-block;width:26px;height:26px}
.chk input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.chk i{position:absolute;inset:0;border-radius:7px;border:2px solid var(--line2);background:#16161d;transition:.15s}
.chk input:checked+i{background:var(--pink);border-color:var(--pink)}
.chk input:checked+i::after{content:'';position:absolute;left:8px;top:3px;width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.chk-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px}
.chk-row input{accent-color:var(--pink);width:17px;height:17px}
.color{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#c9c8d8}
input[type=color]{width:100%;height:36px;padding:2px;border-radius:10px;background:#16161d;border:1px solid var(--line2);cursor:pointer}
button.primary{border:0;border-radius:12px;padding:12px 16px;cursor:pointer;font-weight:700;color:#fff;background:linear-gradient(135deg,#d6457f,#a93a8c);box-shadow:0 6px 22px #e5528c44;transition:.15s}
button.primary:hover{filter:brightness(1.1)} button.primary:disabled{opacity:.5;cursor:wait}
.wide{width:100%}
.prog{height:6px;border-radius:4px;background:var(--line);margin-top:12px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--violet));transition:width .3s}
.msg{font-size:12px;color:var(--mut);margin-top:8px;min-height:16px}
.msg.err{color:#ff8fa8} .msg.ok{color:var(--mint)}
.msg a{color:var(--mint);font-weight:600}
.lnk{color:var(--pink);font-size:11px;margin-left:8px}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pre{padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:#16161d;cursor:pointer;font-size:12px;transition:.15s}
.pre:hover{border-color:var(--pink)}
.pre.on{border-color:#fff;box-shadow:0 0 0 2px #e5528c88}
.pre-g{flex-basis:100%;font-size:11px;color:var(--mut);letter-spacing:.06em;margin-top:6px} .pre-g:first-child{margin-top:0}
.spacer{height:20px}
/* หมวดหมู่ในแท็บ AI: แถบเลือกหมวดติดด้านบน แสดงทีละหมวด */
.cats{position:sticky;top:0;z-index:4;background:var(--panel);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 0 14px;border-bottom:1px solid var(--line)}
.cat{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:9px 11px;border-radius:12px;border:1px solid var(--line2);background:#16161d;cursor:pointer;text-align:left;transition:.15s}
.cat:hover{border-color:#e5528c88}
.cat i{font:700 13px var(--mono);font-style:normal;color:var(--pink2);height:18px}
.cat b{font-size:13px;font-weight:600}
.cat small{font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cat small.ok{color:var(--mint)}
.cat.on{border-color:var(--pink);background:#2a1824;box-shadow:inset 0 0 0 1px #e5528c55}
.blk.cat-hide{display:none}
/* ลายน้ำ */
.wm-ov{position:absolute;z-index:1;pointer-events:none;height:auto}
.wm-thumb{overflow:hidden;background:repeating-conic-gradient(#2a2a36 0 25%,#1c1c25 0 50%) 0 0/10px 10px}
.wm-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:150px;aspect-ratio:16/10;padding:6px;border-radius:10px;border:1px solid var(--line2);background:#16161d}
.pos-grid button{border:1px solid var(--line2);border-radius:6px;background:#1f1f29;cursor:pointer;padding:0}
.pos-grid button:hover{border-color:var(--pink)} .pos-grid button.on{background:var(--pink);border-color:var(--pink)}
.export{padding:14px 24px 18px;border-top:1px solid var(--line);background:#191921;display:flex;flex-direction:column;gap:10px}

/* subtitle list */
.sub-tools{padding:14px 0 4px;flex-wrap:wrap}
#subList{display:flex;flex-direction:column;gap:8px;padding-bottom:20px}
.srow{border:1px solid var(--line);border-radius:12px;padding:10px;background:#16161d;cursor:pointer}
.srow.on{border-color:var(--pink);background:#241824}
.srow .tt{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--mut);margin-bottom:6px}
.srow .tt input{width:78px;padding:4px 6px;font:12px var(--mono);border-radius:7px}
.srow .tt b{margin-left:auto;cursor:pointer;color:var(--mut);padding:0 6px} .srow .tt b:hover{color:#ff8fa8}
.srow textarea{padding:7px 9px;border-radius:8px;min-height:36px;font-family:var(--ui)}
.empty-list{padding:40px 10px;text-align:center;color:var(--mut)}

/* timeline */
.timeline{padding:18px 26px 10px;display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)}
.tl-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tl-t{font-size:15px;letter-spacing:.18em}
.tl-head select{width:auto;padding:6px 10px;border-radius:10px}
.tl-body{display:flex;min-height:0;flex:1;overflow-y:auto;overflow-x:hidden}
.tl-labels{width:150px;flex:none}
.lb{font:600 11px var(--mono);letter-spacing:.12em;color:#b9b8cb;display:flex;align-items:center;gap:8px;min-width:0}
.lb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb.off span{color:#5d5c6e;text-decoration:line-through}
/* ปุ่มเปิด/ปิด track: ไอคอนตา (ภาพ/ซับ) ลำโพง (เสียง/เพลง) กรรไกร (ตัดเงียบ) · ปิด = ขีดทับ + จาง */
.tg{position:relative;flex:none;width:26px;height:26px;border-radius:7px;border:1px solid var(--line2);background:#1d1d26 center/16px no-repeat;cursor:pointer;padding:0;transition:.15s}
.tg:hover{border-color:var(--pink)} .tg:disabled{opacity:.3;cursor:default;border-color:var(--line2)}
.tg.eye{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecebf2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.tg.spk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecebf2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E")}
.tg.cut{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ecebf2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.1 15.9M14.5 14.5 20 20M8.1 8.1 12 12'/%3E%3C/svg%3E")}
.tg.off{opacity:.55;background-color:#14141a}
.tg.off::after{content:'';position:absolute;left:4px;right:4px;top:50%;height:2px;background:var(--red);transform:rotate(-45deg);border-radius:2px}
.track.track-off{opacity:.28;filter:grayscale(.7)}
.stage.novideo video{visibility:hidden}
.ruler-l{height:42px} .h-v,.t-video{height:46px} .h-a,.t-audio{height:64px} .h-s,.t-sub{height:46px} .h-c,.t-cut{height:42px}
.lb.h-v,.lb.h-a,.lb.h-s,.lb.h-c{margin-bottom:9px}
.tl-scroll{flex:1;overflow-x:auto;overflow-y:hidden;min-width:0;padding-bottom:4px}
.tl-inner{position:relative;user-select:none;touch-action:pan-x}
.ruler{height:30px;position:relative;border-bottom:1px solid var(--line);margin-bottom:12px;cursor:pointer}
.tick{position:absolute;top:0;font:12px var(--mono);color:#b3b2c6;padding-left:0;white-space:nowrap;transform:translateX(0)}
.tick.last{transform:translateX(-100%)}
.tick::after{content:'';position:absolute;left:0;top:20px;height:6px;border-left:1px solid #555568}
.track{position:relative;border-radius:10px;margin-bottom:9px;overflow:hidden;cursor:pointer}
.t-video{background:repeating-linear-gradient(115deg,#7a3a5c 0 14px,#823f63 14px 28px);border:1px solid #a85580}
.t-video .vname{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:13px;color:#fff;pointer-events:none;white-space:nowrap;text-shadow:0 1px 2px #0008}
.t-video .vcut{position:absolute;top:0;bottom:0;min-width:3px;background:repeating-linear-gradient(135deg,#150d12cc 0 6px,#2a1620cc 6px 12px);border-left:2px solid #ff7ab0;border-right:2px solid #ff7ab0}
.t-video .vsc{position:absolute;top:3px;font-size:11px;color:#fff;transform:translateX(-30%);pointer-events:none;text-shadow:0 0 3px #000}
.t-audio{background:#1d3a33;border:1px solid #2c6a58}
.t-audio canvas{position:absolute;inset:0;width:100%;height:100%}
.h-p,.t-pop{height:34px} .lb.h-p{margin-bottom:9px}
.t-pop{background:#2a2230;border:1px solid #473653}
.pb{position:absolute;top:4px;bottom:4px;min-width:18px;border-radius:7px;background:#b4568a;border:1px solid #e58cbb;padding:0 8px;display:flex;align-items:center;font-size:12px;overflow:hidden;white-space:nowrap;cursor:pointer;color:#fff0f7}
.pb{cursor:grab;touch-action:none;user-select:none} .pb:active{cursor:grabbing} .pb span{overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.pb .h{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:2} .pb .hl{left:0} .pb .hr{right:0} .pb .h:hover{background:#ffffff55}
.pb.on{background:#d1639f;border-color:#fff;box-shadow:0 0 0 2px #ffb3d866}
.pop-head{padding-top:14px} .pop-style{padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.h-m,.t-music{height:52px} .lb.h-m{margin-bottom:9px}
.t-music{background:#2a2140;border:1px solid #4d3d78}
.t-music canvas{position:absolute;inset:0;width:100%;height:100%}
.t-music .note{position:absolute;right:12px;bottom:4px;font-size:11px;color:#c6b6ff;pointer-events:none;white-space:nowrap}
.m-empty{position:sticky;left:8px;top:0;margin:11px 8px;background:#3a2e5c;border:1px dashed #8b72d6;color:#ddd3ff;border-radius:8px;padding:5px 12px;font-size:12px;cursor:pointer;z-index:2}
.m-empty:hover{background:#4b3b78}
.music-file{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px;border:1px solid var(--line2);border-radius:12px;background:#16161d}
.music-file>div{flex:1;min-width:0} .music-file b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .music-file small{font-size:11px}
.music-file .mi{width:34px;height:34px;border-radius:9px;background:#3a2e5c;color:#c6b6ff;display:grid;place-items:center;font-size:16px;flex-shrink:0}
.t-audio .note{position:absolute;right:12px;bottom:4px;font-size:11px;color:#8fd9bd;pointer-events:none}
.t-sub{background:#232034;border:1px solid #2d2a45}
.sb{position:absolute;top:5px;bottom:5px;border-radius:7px;background:#5d4d90;border:1px solid #8b79c9;padding:0 9px;display:flex;align-items:center;font-size:12px;overflow:hidden;white-space:nowrap;cursor:pointer;color:#f3efff}
.sb span{overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.sb.on{background:#7a63c0;border-color:#fff;box-shadow:0 0 0 2px #b9a8ff66}
.sb .h{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:2} .sb .hl{left:0} .sb .hr{right:0}
.sb .h:hover{background:#ffffff55}
.t-cut{background:#2a1c26;border:1px solid #4b2a3f}
.cb{position:absolute;top:5px;bottom:5px;border-radius:7px;background:#a7406c;border:1px solid #e4719f;display:grid;place-items:center;font-size:13px;min-width:14px;color:#fff;overflow:hidden;cursor:pointer}
.cb:hover{background:#d24f86}
.cb{cursor:grab;touch-action:none;user-select:none} .cb:active{cursor:grabbing}
.cb span{pointer-events:none}
.cb.on{background:#d24f86;border-color:#fff;box-shadow:0 0 0 2px #e5528c66;z-index:3}
.cb .h{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:2} .cb .hl{left:0} .cb .hr{right:0}
.cb .h:hover{background:#ffffff55}
.cb .x{position:absolute;top:2px;right:9px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:#0008;color:#fff;font-size:13px;line-height:18px;cursor:pointer;display:none;z-index:3}
.cb:hover .x,.cb.on .x{display:block} .cb .x:hover{background:var(--red)}
.linkbtn{background:none;border:0;padding:0;color:var(--pink2);cursor:pointer;text-decoration:underline;font-size:inherit}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #fff9;pointer-events:none;z-index:5;left:0}
.playhead::before{content:'';position:absolute;top:0;left:-6px;border:7px solid transparent;border-top:9px solid #fff}
.tl-slider{padding:2px 0 0 0;margin-left:150px}
.tl-foot{display:flex;justify-content:space-between;color:#a4a3b8;font-size:12px;padding:6px 0 0}

.dlg{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:#000a}
.dlg-box{width:min(400px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:22px;box-shadow:0 30px 80px #000a;display:flex;flex-direction:column;gap:10px}
.dlg.danger .dlg-box{border-color:var(--red)} .dlg h3{font-size:16px} .dlg p{color:var(--mut);white-space:pre-line}
.dlg-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:8px} .dlg-acts .primary{padding:8px 18px} .dlg.danger #dlgYes{background:var(--red)}
.busy{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;background:#0c0c11cc;backdrop-filter:blur(3px)}
.busy-box{width:min(420px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:28px 26px;text-align:center;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 80px #000a}
.busy h3{font-size:17px} .busy p{color:var(--mut);min-height:21px} .busy small{color:var(--mut);font-size:11px;margin-top:4px}
.spin{width:44px;height:44px;margin:0 auto 6px;border-radius:50%;border:4px solid var(--line2);border-top-color:var(--pink);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.busy-prog{margin-top:6px} .busy-meta{display:flex;justify-content:space-between;font:600 12px var(--mono);color:var(--mut)}
/* ยังไม่รู้ความคืบหน้า = แถบวิ่งไปมา */
.busy-prog.ind i{width:35%!important;animation:ind 1.2s ease-in-out infinite}
@keyframes ind{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#2a2a38;border:1px solid var(--pink);padding:10px 18px;border-radius:12px;z-index:50;box-shadow:0 10px 40px #0008}

@media (max-width:1000px){
  body{grid-template-rows:62px auto auto;overflow:auto}
  main{grid-template-columns:1fr} .monitor{height:60vh;flex:none}
  .panel{border-left:0;border-top:1px solid var(--line)} .tabpane{max-height:none}
  .tl-labels{width:90px} .tl-slider{margin-left:90px}
}

/* มือถือ/แท็บเล็ตแนวตั้ง: ปุ่มและที่จับลากใหญ่พอสำหรับนิ้ว · ไม่พึ่ง hover */
@media (max-width:700px){
  html,body{height:auto} body{display:flex;flex-direction:column;overflow:auto;padding-bottom:env(safe-area-inset-bottom)}
  /* ลำดับบนมือถือ: พรีวิว → timeline → แผงตั้งค่า (timeline อยู่ใกล้พรีวิวที่สุด) */
  main{display:contents} .left{order:1} .timeline{order:2} .panel{order:3;border-top:1px solid var(--line)}
  main,.left,.panel,.timeline{min-height:auto} .tabpane{overflow:visible}
  .top{flex-wrap:wrap;gap:8px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
  .brand{min-width:0;gap:8px} .brand #fname{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .exp-note{display:none}
  .top-r{flex-wrap:wrap;gap:8px;width:100%}
  .top-r #projectSel{flex:1;min-width:0;max-width:none}
  .import{padding:10px 14px} #importLbl{font-size:13px}
  .left{padding:12px 14px 10px} .monitor{height:42vh;border-radius:16px}
  .sec-head{margin-bottom:10px} #fsBtn{padding:6px 10px;font-size:12px}
  .tabs{overflow-x:auto;flex-wrap:nowrap} .tab{flex:none;padding-left:16px;padding-right:16px}
  .tabpane{padding:0 14px}
  .grid2,.grid3{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(3,1fr);gap:6px}
  button,.ghost,.pre,.cat{min-height:40px}
  button.sm,.ghost.sm{min-height:34px}
  select,input[type=text],input[type=password],input[type=number],textarea{font-size:16px;min-height:42px}
  .srow .tt input{font-size:13px;min-height:34px;width:84px}
  .export{padding:12px 14px calc(14px + env(safe-area-inset-bottom))}
  .timeline{padding:14px 14px 10px}
  .tl-head{flex-wrap:wrap;gap:8px} .tl-head>.row{flex-wrap:wrap} .tl-head small{display:none} .tl-head select{min-height:36px;font-size:14px}
  .tl-foot{flex-direction:column;gap:2px}
  .tl-labels{width:56px} .tl-slider{margin-left:56px}
  .lb span{display:none} .lb{justify-content:center}
  .tl-body{overflow-y:visible}
  .sb .h,.cb .h,.pb .h{width:16px}
  .dlg-box,.busy-box{width:calc(100vw - 32px)}
  .member-pop{width:min(300px,calc(100vw - 28px))}
  .toast{max-width:calc(100vw - 28px);bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media (hover:none){
  .sb,.pb,.cb{touch-action:none}
}

/* lock screen + member bar */
.member{display:flex;align-items:center;gap:10px;font-size:13px;flex-shrink:0}
.member>*{white-space:nowrap;flex-shrink:0}
.member{position:relative}
.member-name{background:none;border:0;padding:4px 8px;margin:0 -4px;border-radius:8px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.member-name::after{content:'';width:6px;height:6px;border:solid var(--mut);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:.15s}
.member-name:hover,.member-name[aria-expanded="true"]{background:var(--bg2);color:#fff}
.member-name[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.member-pop{position:absolute;top:calc(100% + 10px);left:0;z-index:60;width:300px;white-space:normal;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:16px;box-shadow:0 20px 50px #000a;display:flex;flex-direction:column;gap:14px;font-size:13px}
.mp-head{display:flex;align-items:center;gap:10px}
.mp-av{width:36px;height:36px;border-radius:50%;background:var(--pinkd);color:#fff;display:grid;place-items:center;font-weight:700;flex-shrink:0}
.mp-head b{display:block;font-size:14px} .mp-head small{color:var(--mut)}
.mp-badge{margin-left:auto;font-size:11px;padding:2px 8px;border-radius:99px;background:#4fd1a522;color:var(--mint)}
.mp-badge.warn{background:#f0b44222;color:#f0b442} .mp-badge.bad{background:#d94a7a22;color:var(--red)}
.mp-sec{display:flex;flex-direction:column;gap:6px}
.mp-row{display:flex;justify-content:space-between;gap:12px} .mp-row span{color:var(--mut)} .mp-row b{font-weight:600;text-align:right}
.mp-big{font-size:22px;font-weight:700;line-height:1.1} .mp-big small{font-size:12px;font-weight:400;color:var(--mut)}
.mp-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.mp-bar i{display:block;height:100%;background:var(--pink);border-radius:inherit}
.mp-bar i.warn{background:#f0b442} .mp-bar i.bad{background:var(--red)}
.mp-sep{border-top:1px solid var(--line)}
.member small{color:var(--mut)} .member b{font-weight:600}
.lock{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#2a1626,#0e0e13 70%)}
.lock form{width:min(440px,92vw);background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:34px 30px;text-align:center;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px #000a}
.lock-ico{font-size:34px;width:68px;height:68px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:var(--pinkd)}
.lock-logo{display:block;width:84px;height:84px;margin:0 auto;border-radius:20px;filter:drop-shadow(0 6px 18px rgba(229,82,140,.4))}
.lock h2{font-size:22px} .lock p{color:var(--mut)}
.lock input{text-align:center;font:600 15px var(--mono);letter-spacing:.06em;padding:14px}