:root{--bg:#0b0b10;--panel:#14141c;--panel2:#1b1b25;--panel3:#232330;--line:#262633;--text:#ececf3;--muted:#8d8ca0;--a1:#7c3aed;--a2:#ec4899;--ok:#22c55e;--bad:#ef4444;--clip:#3b3b8f;--txt:#b45309;--stk:#0e7490;--aud:#15803d}
*{box-sizing:border-box}
html,body{height:100%}
body.ed{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) 250px;height:100vh;height:100dvh;overflow:hidden;user-select:none;-webkit-user-select:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input,textarea,.ed-name{user-select:text;-webkit-user-select:text}
a{color:inherit;text-decoration:none}
.hide-sm{display:inline}

/* top bar */
.ed-top{min-width:0;overflow:hidden;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line);min-width:0}
.ed-back{font-size:1.6rem;line-height:1;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--muted)}
.ed-back:hover{background:var(--panel2);color:#fff}
.ed-logo{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ed-logo em{font-style:normal;color:var(--muted)}
.mark{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--a1),var(--a2));font-size:.7rem}
.ed-name{background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 10px;min-width:60px;width:260px;flex:0 1 260px;font-weight:600}
.ed-name:hover{border-color:var(--line)}.ed-name:focus{outline:0;border-color:var(--a1);background:var(--panel2)}
.ed-save{color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-save.err{color:#fca5a5}
.ed-top-r{margin-left:auto;display:flex;gap:6px;align-items:center}
.ic{background:var(--panel2);border:1px solid var(--line);border-radius:8px;width:34px;height:34px;display:inline-grid;place-items:center;font-size:1rem}
.ic:hover{border-color:#3a3a4c}
.ic:disabled{opacity:.4;cursor:default}
.ed-btn{border:1px solid var(--line);background:var(--panel2);border-radius:9px;padding:8px 14px;font-weight:700;white-space:nowrap}
.ed-btn:hover{border-color:#3a3a4c}
.ed-btn.grad{border:0;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;box-shadow:0 6px 20px -8px rgba(236,72,153,.7)}
.ed-btn.grad:disabled{opacity:.5}
.ed-btn.ghost{background:transparent}
.ed-btn.wide{width:100%;margin-top:10px}
.ed-btn.danger{color:#fca5a5}

/* main */
.ed-main{display:grid;grid-template-columns:300px minmax(0,1fr) 290px;min-height:0}
.ed-left,.ed-right{background:var(--panel);min-height:0;overflow:hidden;display:flex;flex-direction:column}
.ed-left{border-right:1px solid var(--line);display:grid;grid-template-columns:66px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.ed-right{border-left:1px solid var(--line);overflow-y:auto;padding:14px}
.ed-tabs{display:flex;flex-direction:column;gap:2px;padding:8px 4px;border-right:1px solid var(--line);grid-row:1/3}
.ed-tabs button{background:none;border:0;border-radius:10px;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.64rem;overflow:hidden;color:var(--muted);font-weight:600}
.ed-tabs button i{font-style:normal;font-size:1.1rem;font-weight:800}
.ed-tabs button:hover{color:#fff;background:var(--panel2)}
.ed-tabs button.on{color:#fff;background:linear-gradient(180deg,rgba(124,58,237,.35),rgba(124,58,237,.12))}
.ed-panes{flex:1;min-width:0;overflow-y:auto;padding:12px}
.ed-pane{display:none}.ed-pane.on{display:block}
.pane-h{margin:0 0 10px;color:var(--muted);font-size:.82rem}
.ed-ad{padding:8px;border-top:1px solid var(--line);display:flex;justify-content:center;overflow:hidden;max-height:280px}
.drop{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 10px;border:1.5px dashed #3a3a52;border-radius:12px;text-align:center;cursor:pointer;background:rgba(124,58,237,.06);margin-bottom:12px}
.drop:hover,.drop.over{border-color:var(--a1);background:rgba(124,58,237,.14)}
.drop input{display:none}
.drop small{color:var(--muted);font-size:.75rem}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mcard{position:relative;border-radius:10px;overflow:hidden;background:var(--panel2);border:1px solid var(--line);aspect-ratio:16/11;cursor:pointer}
.mcard img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.mcard .ph{width:100%;height:100%;display:grid;place-items:center;font-size:1.6rem;background:linear-gradient(135deg,#1e3a2b,#14532d)}
.mcard .meta{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 4px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:.7rem;display:flex;justify-content:space-between;gap:4px}
.mcard .meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard .add{position:absolute;right:5px;top:5px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.mcard:hover .add,.mcard:focus-within .add{opacity:1}
.mcard .add button,.mrow button{border:0;border-radius:7px;background:rgba(124,58,237,.95);color:#fff;font-size:.7rem;font-weight:700;padding:4px 7px}
.mcard .add button.x,.mrow button.x{background:rgba(0,0,0,.7)}
.mcard.up{display:grid;place-items:center;font-size:.75rem;color:var(--muted);cursor:default}
.mcard.up .bar{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--a1),var(--a2))}
.mlist{display:flex;flex-direction:column;gap:6px}
.mrow{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.mrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}
.mrow small{color:var(--muted)}
.tpresets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tpresets button{height:64px;border-radius:10px;border:1px solid var(--line);background:#101018;display:grid;place-items:center;padding:4px;overflow:hidden}
.tpresets button:hover{border-color:var(--a1)}
.trgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.trgrid button{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:8px 2px;font-size:.72rem;display:flex;flex-direction:column;align-items:center;gap:4px}
.trgrid button i{font-style:normal;font-size:1.1rem}
.trgrid button.on{border-color:var(--a2);background:rgba(236,72,153,.15)}
.trgrid button:disabled{opacity:.4}

/* stage */
.ed-stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:#07070b}
.stage{flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:14px;overflow:hidden}
#cv{background:#000;box-shadow:0 10px 40px rgba(0,0,0,.6);border-radius:4px;touch-action:none;max-width:100%;max-height:100%}
.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.empty div{display:flex;flex-direction:column;gap:4px;padding:20px;color:var(--muted)}
.empty b{color:#fff;font-size:1.05rem}
.stage.over::after{content:"";position:absolute;inset:8px;border:2px dashed var(--a1);border-radius:12px;pointer-events:none}
.transport{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line);background:var(--panel)}
.tc{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem;flex:1}
.tc b{color:#fff}
.tp-mid{display:flex;gap:8px;align-items:center}
.play{width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#000;font-size:1rem}
.tp-r{flex:1;display:flex;justify-content:flex-end;gap:6px}
select{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 8px}

/* inspector */
.ins-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:.95rem}
.ins-h small{color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f{display:block;margin-bottom:12px}
.f>span{display:flex;justify-content:space-between;color:var(--muted);font-size:.76rem;font-weight:600;margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.f>span em{font-style:normal;color:#fff;text-transform:none}
.f input[type=number],.f input[type=text],.f select,.f textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.f textarea{min-height:70px;resize:vertical;font-weight:600}
.f input[type=range]{width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--a1)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button{flex:1;border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:6px 4px;font-size:.78rem;font-weight:600}
.seg button.on{border-color:var(--a1);background:rgba(124,58,237,.25)}
.sw{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.sw button{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.2);padding:0}
.sw input[type=color]{width:30px;height:26px;border:0;background:none;padding:0}
.chk{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.88rem}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.acts .ed-btn{flex:1;padding:7px 8px;font-size:.82rem}
.tip{font-size:.78rem;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:14px}
.tip kbd{background:#2a2a38;border-radius:4px;padding:0 5px;font:inherit;font-size:.72rem;color:#fff}
.kv{display:flex;justify-content:space-between;font-size:.85rem;padding:5px 0;border-bottom:1px solid var(--line)}
.kv span{color:var(--muted)}

/* timeline */
.ed-tl{background:var(--panel);border-top:1px solid var(--line);display:flex;flex-direction:column;min-height:0;min-width:0}
.tl-tools{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--line)}
.tl-tools button{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:.8rem;font-weight:600}
.tl-tools button:hover{border-color:#3a3a4c}
.snap{font-size:.78rem;color:var(--muted);display:flex;gap:5px;align-items:center;margin-left:6px}
.grow{flex:1}
.zoom{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.85rem}
.zoom input{width:120px}
.tl-body{flex:1;min-height:0;display:flex;overflow-y:auto;overflow-x:hidden;position:relative}
.tl-labels{width:58px;flex:none;border-right:1px solid var(--line);background:var(--panel);position:sticky;left:0;z-index:3}
.tl-labels div{white-space:nowrap;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.03)}
.tl-labels .lh{height:24px;position:sticky;top:0;background:var(--panel);z-index:2}
.tl-scroll{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;position:relative}
.tl{position:relative;min-height:100%}
.ruler{height:24px;position:sticky;top:0;z-index:2;background:var(--panel);border-bottom:1px solid var(--line);cursor:ew-resize}
.ruler .tk{position:absolute;top:0;height:100%;border-left:1px solid #34344a;font-size:.65rem;color:var(--muted);padding:5px 0 0 4px;pointer-events:none;font-variant-numeric:tabular-nums}
.ruler .tk.s{height:6px;top:auto;bottom:0}
.lane{position:relative;border-bottom:1px solid rgba(255,255,255,.03)}
.lane.v{background:rgba(255,255,255,.015)}
.it{position:absolute;top:3px;bottom:3px;border-radius:7px;overflow:hidden;font-size:.72rem;font-weight:600;padding:0 10px;display:flex;align-items:center;white-space:nowrap;cursor:grab;border:1px solid rgba(255,255,255,.12);touch-action:none}
.it span{overflow:hidden;text-overflow:ellipsis;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.it.clip{background:var(--clip) repeat-x;background-size:auto 100%}
.it.text{background:linear-gradient(180deg,#d97706,#b45309)}
.it.overlay{background:linear-gradient(180deg,#0891b2,#0e7490)}
.it.audio{background:linear-gradient(180deg,#16a34a,#15803d)}
.it.audio::before{content:"";position:absolute;inset:40% 0 20%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 2px,transparent 2px 4px);-webkit-mask:linear-gradient(0deg,#000,transparent);pointer-events:none}
.it.sel{border:2px solid #fff;box-shadow:0 0 0 2px rgba(124,58,237,.6);z-index:2}
.it.missing{background:repeating-linear-gradient(45deg,#7f1d1d 0 8px,#991b1b 8px 16px)!important}
.it.drag{opacity:.85;z-index:5;cursor:grabbing}
.it .h{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:1}
.it .h.l{left:0}.it .h.r{right:0}
.it.sel .h{background:rgba(255,255,255,.85)}
.it.sel .h::after{content:"";position:absolute;left:3px;right:3px;top:35%;bottom:35%;background:#333;border-radius:2px}
.trx{position:absolute;top:2px;width:18px;height:18px;margin:0 0 0 -9px;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:#1b1b25;z-index:3;font-size:.7rem;display:grid;place-items:center;padding:0;transform:rotate(45deg)}
.trx b{transform:rotate(-45deg);font-weight:800}
.trx.on{background:linear-gradient(135deg,var(--a1),var(--a2));border-color:#fff}
.trx.sel{box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.ins-marker{position:absolute;top:0;bottom:0;width:3px;background:var(--a2);margin-left:-1px;z-index:6;border-radius:2px}
.snapline{position:absolute;top:0;bottom:0;width:1px;background:#facc15;z-index:6;pointer-events:none}
.after-end{position:absolute;top:24px;bottom:0;background:rgba(0,0,0,.35);pointer-events:none}
.playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;z-index:7;pointer-events:none}
.playhead::before{content:"";position:absolute;top:0;left:-6px;border:7px solid transparent;border-top:9px solid #fff}

/* modal & toast */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:grid;place-items:center;z-index:50;padding:16px}
.modal[hidden]{display:none}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:min(560px,100%);max-height:90vh;overflow:auto;padding:20px;user-select:text}
.mbox h2{margin:0 0 6px;font-size:1.2rem}
.mbox .sub{color:var(--muted);margin:0 0 16px;font-size:.88rem}
.mbox video{width:100%;max-height:50vh;background:#000;border-radius:10px;margin-bottom:12px}
.pbar{height:10px;border-radius:9px;background:#2a2a38;overflow:hidden;margin:14px 0 6px}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a1),var(--a2));transition:width .4s}
.mact{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.plist{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.prow img,.prow .ph{width:74px;height:48px;object-fit:cover;border-radius:8px;background:#000;flex:none}
.prow .nm{flex:1;min-width:0}
.prow .nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .nm small{color:var(--muted)}
.prow.cur{border-color:var(--a1)}
.err{color:#fca5a5}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#22222e;border:1px solid var(--line);padding:10px 16px;border-radius:10px;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:90vw}
.toast.bad{border-color:#7f1d1d;color:#fecaca}

/* responsive */
@media (max-width:1180px){.ed-main{grid-template-columns:270px minmax(0,1fr) 250px}}
@media (max-width:900px){
  body.ed{display:flex;flex-direction:column;height:auto;min-height:100dvh;overflow:auto}
  .ed-main{display:contents}
  .ed-top{position:sticky;top:0;z-index:20;height:52px}
  .ed-logo b,.ed-logo em,.hide-sm,.ed-save{display:none}
  .ed-name{flex:1;width:auto}
  .ed-stage{order:1}
  .stage{height:46vh;flex:none;padding:8px}
  .ed-left{order:4;display:flex;flex-direction:column;border:0;border-top:1px solid var(--line)}
  .ed-tabs{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .ed-tabs button{flex:1;min-width:58px}
  .ed-panes{max-height:none}
  .ed-right{order:3;border:0;border-top:1px solid var(--line);overflow:visible}
  .ed-top{order:0}
  .ed-tl{order:2;height:230px;flex:none}
  .mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mcard .add{opacity:1}
}

.sec{margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line);font-weight:700;font-size:.85rem}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.fgrid button{border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:3px;font-size:.62rem;display:flex;flex-direction:column;gap:3px;align-items:center;overflow:hidden}
.fgrid button span{display:block;width:100%;aspect-ratio:1;border-radius:5px;background:#333 center/cover}
.fgrid button.on{border-color:var(--a2);box-shadow:0 0 0 1px var(--a2)}
.ai-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px;display:flex;flex-direction:column;gap:4px}
.ai-card>b{font-size:.92rem}.ai-card>small{color:var(--muted);font-size:.75rem;margin-bottom:8px}
.ai-card .f{margin-bottom:8px}
.ai-card .f select{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.ai-card .f>span{display:block;color:var(--muted);font-size:.72rem;font-weight:600;margin-bottom:4px;text-transform:uppercase}
.capstyles{margin-bottom:10px}.capstyles button{height:46px}
.capstyles button.on,.tpresets button.on{border-color:var(--a2);box-shadow:0 0 0 1px var(--a2)}
.tab-ai i{background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-background-clip:text;background-clip:text}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.row3 .f select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 8px}
.row3 .f>span{display:block;color:var(--muted);font-size:.72rem;font-weight:600;margin-bottom:4px;text-transform:uppercase}
.pane-h.err{color:#fca5a5}
.rec-btn.on{background:#b91c1c;border-color:#ef4444;color:#fff;animation:recp 1.2s infinite}@keyframes recp{50%{box-shadow:0 0 0 6px rgba(239,68,68,.25)}}
.tplgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tpl{border:1px solid var(--line);background:var(--panel2);border-radius:12px;padding:6px;text-align:left;display:flex;flex-direction:column;gap:2px}
.tpl:hover{border-color:var(--a1)}
.tpl-art{position:relative;display:grid;place-items:center;height:64px;border-radius:8px;margin-bottom:4px}
.tpl-art i{font-style:normal;font-size:1.5rem}
.tpl-art em{position:absolute;right:5px;bottom:4px;font-style:normal;font-size:.6rem;background:rgba(0,0,0,.45);padding:1px 5px;border-radius:5px}
.tpl b{font-size:.78rem}.tpl small{font-size:.66rem;color:var(--muted);line-height:1.3}
.kfm{position:absolute;bottom:2px;width:9px;height:9px;margin-left:-4px;background:#fde047;transform:rotate(45deg);border:1px solid #000;pointer-events:none;z-index:2}
.kflist{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.kflist span{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.kflist span.on{border-color:#fde047}
.kflist button{background:var(--panel2);border:0;padding:4px 7px;font-size:.72rem}
.kflist button+button{border-left:1px solid var(--line);color:#fca5a5}
.ed-btn.on{border-color:#fde047;color:#fde047}
.ed-btn:disabled{opacity:.45;cursor:default}
.emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.emojis button{background:var(--panel2);border:1px solid var(--line);border-radius:8px;font-size:1.25rem;padding:4px 0;line-height:1.3}
.emojis button:hover{border-color:var(--a1);transform:scale(1.08)}
.mrow.sfx{padding:5px 8px}.mrow .pl{background:var(--panel)!important;border:1px solid var(--line)!important;width:28px;height:28px;border-radius:50%!important;padding:0!important}
.bgjob{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,16,.72);font-weight:700;font-size:.8rem;color:#fff;z-index:1}
.abadge{position:absolute;left:5px;top:5px;font-style:normal;font-size:.6rem;font-weight:700;background:rgba(124,58,237,.9);padding:1px 6px;border-radius:6px}
.mcard.alpha img{background:repeating-conic-gradient(#555 0 25%,#333 0 50%) 0 0/12px 12px}
.ai-hero{background:linear-gradient(135deg,rgba(124,58,237,.28),rgba(236,72,153,.18));border-color:rgba(236,72,153,.4)}
.ar-more{margin:-4px 0 12px;font-size:.85rem}.ar-more summary{cursor:pointer;color:#c4b5fd;margin-bottom:8px}
.mbox .f input[type=text],.mbox .f textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.mbox .f select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 8px}
.mbox .f>span{display:block;color:var(--muted);font-size:.72rem;font-weight:600;margin-bottom:4px;text-transform:uppercase}