:root {
  --bg: #16171b; --panel: #1f2126; --panel2: #26282e; --brd: #33363e; --fg: #e8e9ee; --dim: #9aa0ad;
  --acc: #4f8ff7; --acc2: #3f74d0; --sel: #ffd23f; --danger: #f26d6d;
  --clip: #3b5f9e; --music: #2f8a5a; --title: #8a5fb8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
.btn { background: var(--panel2); border: 1px solid var(--brd); color: var(--fg); border-radius: 7px;
  padding: 6px 11px; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.btn:hover { border-color: var(--acc); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--acc2); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.big { font-size: 18px; min-width: 52px; justify-content: center; }
.dim { color: var(--dim); } .small { font-size: 12px; }
.spacer { flex: 1; }
input[type=text], input.pname, input:not([type]), textarea, select {
  background: var(--bg); border: 1px solid var(--brd); border-radius: 6px; padding: 6px 8px; color: var(--fg); }
input[type=range] { accent-color: var(--acc); }

/* top bar */
.top { display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--brd); }
.brand { font-size: 16px; }
.proj { display: flex; align-items: center; gap: 8px; flex: 1; }
.pname { font-size: 14px; font-weight: 600; min-width: 220px; }
.right { display: flex; align-items: center; gap: 8px; }

/* main */
.main { flex: 1; display: grid; grid-template-columns: var(--lib-w, 300px) 1fr var(--insp-w, 280px); min-height: 0; }
.library, .inspector { background: var(--panel); border-right: 1px solid var(--brd); display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; }
.inspector { border-right: 0; border-left: 1px solid var(--brd); overflow: auto; }

/* resize handles */
.resize-handle { position: absolute; top: 0; bottom: 0; width: 5px; cursor: col-resize; z-index: 10; background: transparent; }
.resize-handle:hover, .resize-handle.dragging { background: var(--acc); }
.library .resize-handle { right: -3px; }
.inspector .resize-handle { left: -3px; }
.timeline { position: relative; }
.timeline > .resize-handle { position: absolute; top: -3px; left: 0; right: 0; width: auto; height: 5px; cursor: row-resize; }
.timeline > .resize-handle:hover, .timeline > .resize-handle.dragging { background: var(--acc); }
.tabs { display: flex; border-bottom: 1px solid var(--brd); }
.tab { flex: 1; background: none; border: 0; padding: 9px 0; cursor: pointer; color: var(--dim); border-bottom: 2px solid transparent; }
.tab.active { color: var(--fg); border-bottom-color: var(--acc); }
.pane { flex: 1; overflow: auto; display: flex; flex-direction: column; min-height: 0; }
.lib-tools { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 0 10px 10px; }
.tile { background: var(--panel2); border: 1px solid var(--brd); border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; user-select: none; }
.tile:hover { border-color: var(--acc); }
.tile .thumb { height: 68px; background: #000 center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.tile .name { font-size: 11px; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .meta { font-size: 10px; color: var(--dim); padding: 0 6px 5px; display: flex; justify-content: space-between; }
.tile .x { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.6); border: 0; color: #fff; border-radius: 4px; cursor: pointer; font-size: 11px; padding: 1px 5px; display: none; }
.tile:hover .x { display: block; }
.tile.processing .thumb::after { content: 'processing…'; font-size: 11px; color: var(--dim); }
.tile.error .thumb::after { content: 'failed'; font-size: 11px; color: var(--danger); }
.tile .proc { padding: 0 6px 5px; }
.tile .proc-label { font-size: 10px; color: var(--dim); }
.tile .proc-label.err { color: var(--danger); }
.tile .proc-pct { font-size: 11px; font-weight: 600; color: var(--fg); }
.tile .proc .pbar { height: 4px; background: var(--brd); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.tile .proc .pbar i { display: block; height: 100%; background: var(--acc); }
.proc-big { display: flex; align-items: baseline; gap: 10px; }
.proc-status { font-size: 15px; font-weight: 600; }
.proc-pct-big { font-size: 28px; font-weight: 700; color: var(--acc); }
.proc-log { background: var(--bg); border: 1px solid var(--brd); border-radius: 8px; padding: 10px; font-size: 12px; font-family: ui-monospace, monospace; max-height: 240px; overflow: auto; white-space: pre-wrap; }
.tile.gal .thumb { font-size: 22px; height: 54px; background: linear-gradient(90deg, #2c3e66, #3f74d0); }
#drop-hint { padding: 12px; font-size: 12px; }
.library.drag { outline: 2px dashed var(--acc); outline-offset: -6px; }
.upl { margin: 0 10px 8px; font-size: 11px; }
.upl .bar { height: 4px; background: var(--brd); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.upl .bar i { display: block; height: 100%; background: var(--acc); width: 0; }

/* stage */
.stage { display: flex; flex-direction: column; min-height: 0; background: #0d0e11; }
.preview-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 10px; position: relative; }
#preview { max-width: 100%; max-height: 100%; background: #000; box-shadow: 0 0 0 1px var(--brd); position: relative; z-index: 2; }
#preview.direct { background: transparent; }
#preview.glhidden { display: none; }
#overlay { position: absolute; z-index: 3; pointer-events: none; max-width: 100%; max-height: 100%; }
#glcanvas { position: absolute; z-index: 2; max-width: 100%; max-height: 100%; background: #000; }
/* direct mode: the browser presents the <video> element itself (native vsync,
   zero compositing); the canvas above it stays transparent except for titles */
#direct { position: absolute; z-index: 1; background: #000; overflow: hidden; }
#direct video { width: 100%; height: 100%; object-fit: contain; display: block; }
.transport { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; background: var(--panel); border-top: 1px solid var(--brd); }
.tc { font-variant-numeric: tabular-nums; margin-left: 10px; min-width: 150px; }
.vol { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.vol input { width: 80px; }

/* inspector */
.insp { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.insp h3 { margin: 0 0 4px; font-size: 14px; }
.insp label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--dim); }
.insp label.row { flex-direction: row; align-items: center; justify-content: space-between; color: var(--fg); }
.insp input[type=range] { width: 100%; }
.insp .val { color: var(--fg); font-variant-numeric: tabular-nums; }
.insp select, .insp input[type=text], .insp textarea { width: 100%; }
.insp .actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* timeline */
.timeline { height: var(--tl-h, 300px); display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--brd); }
.tl-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--brd); }
.tl-scroll { flex: 1; overflow: auto; position: relative; }
.tl-inner { position: relative; min-width: 100%; height: 100%; }
.ruler { display: block; height: 22px; cursor: pointer; background: var(--panel2); position: sticky; top: 0; z-index: 3; }
.track { position: relative; height: 70px; border-bottom: 1px solid var(--brd); background:
  repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.03) 39px 40px); }
.track.music, .track.titles { height: 50px; }
.tlabel { position: absolute; left: 6px; top: 3px; font-size: 10px; color: var(--dim); pointer-events: none; z-index: 1; }
.clip { position: absolute; top: 6px; bottom: 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18);
  background: var(--clip) center/auto 100% repeat-x; overflow: hidden; cursor: grab; user-select: none; }
.clip.music { background: var(--music); } .clip.title { background: var(--title); }
.clip.sel { outline: 2px solid var(--sel); outline-offset: -1px; z-index: 2; }
.clip.dragging { opacity: .75; z-index: 5; cursor: grabbing; }
.clip .lbl { position: absolute; left: 8px; right: 8px; top: 3px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.clip .sub { position: absolute; left: 8px; bottom: 3px; font-size: 10px; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px #000; pointer-events: none; }
.clip .h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: rgba(255,255,255,.25); }
.clip .h.l { left: 0; border-radius: 6px 0 0 6px; } .clip .h.r { right: 0; border-radius: 0 6px 6px 0; }
.clip:hover .h { background: rgba(255,255,255,.5); }
.clip canvas.wave { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.clip .muted { position: absolute; right: 12px; top: 3px; font-size: 11px; pointer-events: none; }
.clip .badges { position: absolute; right: 6px; bottom: 3px; display: flex; gap: 3px; pointer-events: none; }
.clip .badge { font-size: 10px; background: rgba(0,0,0,.55); color: #fff; border-radius: 4px; padding: 0 4px; line-height: 14px; }
.clip .badge.trans { background: rgba(255,210,63,.85); color: #222; }
.clip .badge.filter { background: rgba(138,95,184,.85); }
.clip .badge.speed { background: rgba(47,138,90,.85); }
.clip.drop-target { outline: 2px dashed var(--acc); outline-offset: -2px; }
.clip .marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
.trans { position: absolute; top: 1px; width: 18px; height: 16px; margin-left: -9px; border-radius: 6px; background: #fff; color: #222;
  display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; z-index: 3; box-shadow: 0 1px 3px #000; }
.trans.none { background: rgba(255,255,255,.35); color: #fff; }
.playhead { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--danger); z-index: 4; pointer-events: none; will-change: transform; }
.ph-cap { position: absolute; top: 0; left: -6px; width: 14px; height: 14px; background: var(--danger); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: auto; cursor: ew-resize; }

/* gate / modal / toast */
.gate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.card { background: var(--panel); border: 1px solid var(--brd); border-radius: 12px; padding: 30px; max-width: 420px; text-align: center; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-card { background: var(--panel); border: 1px solid var(--brd); border-radius: 12px; padding: 18px; width: min(680px, 92vw); max-height: 86vh; overflow: auto; }
.modal-card h2 { margin: 0 0 12px; font-size: 17px; }
.list { display: flex; flex-direction: column; gap: 6px; }
.list .item { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--brd); border-radius: 8px; padding: 8px 10px; }
.list .item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar { height: 6px; background: var(--brd); border-radius: 3px; overflow: hidden; flex: 1; }
.pbar i { display: block; height: 100%; background: var(--acc); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #2b2e36; border: 1px solid var(--brd);
  padding: 9px 14px; border-radius: 8px; z-index: 60; box-shadow: 0 4px 16px #000; }
.toast.err { border-color: var(--danger); }

/* context menu */
.ctx-menu { position: fixed; z-index: 70; background: var(--panel2); border: 1px solid var(--brd); border-radius: 8px;
  padding: 4px; min-width: 180px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.ctx-menu .mi { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.ctx-menu .mi:hover { background: var(--acc); color: #fff; }
.ctx-menu .mi.danger:hover { background: var(--danger); }
.ctx-menu .sep { height: 1px; background: var(--brd); margin: 4px 6px; }

/* AI chat pane */
.ai-chat { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ai-chat .msg { max-width: 92%; padding: 8px 10px; border-radius: 10px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.ai-chat .msg.user { align-self: flex-end; background: var(--acc); color: #fff; }
.ai-chat .msg.assistant { align-self: flex-start; background: var(--panel2); border: 1px solid var(--brd); }
.ai-chat .msg.system { align-self: center; color: var(--dim); font-size: 12px; }
.ai-chat .msg .tool { display: block; font-size: 11px; color: var(--dim); margin-top: 4px; }
.ai-input { border-top: 1px solid var(--brd); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ai-input textarea { width: 100%; resize: vertical; min-height: 40px; background: var(--bg); border: 1px solid var(--brd); border-radius: 6px; padding: 6px 8px; color: var(--fg); }
.ai-actions { display: flex; gap: 6px; }
.ai-actions .btn { flex: 1; justify-content: center; }

/* image editor */
.img-editor { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column; }
.ie-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--brd); }
.ie-title { font-size: 15px; font-weight: 600; }
.ie-body { flex: 1; display: flex; min-height: 0; }
.ie-tools { width: 240px; background: var(--panel); border-right: 1px solid var(--brd); overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.ie-group { display: flex; flex-direction: column; gap: 6px; }
.ie-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
.ie-tool { width: 34px; height: 34px; background: var(--panel2); border: 1px solid var(--brd); border-radius: 6px; cursor: pointer; font-size: 16px; color: var(--fg); }
.ie-tool.active { border-color: var(--acc); background: var(--acc); color: #fff; }
.ie-tools .btn { justify-content: flex-start; }
.ie-canvas-wrap { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; background: #0d0e11; padding: 20px; }
#ie-canvas { background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.6); max-width: 100%; max-height: 100%; cursor: crosshair; }
.ie-ai-chat { flex: 1; min-height: 80px; max-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ie-ai-chat .m { padding: 4px 6px; border-radius: 6px; white-space: pre-wrap; word-break: break-word; }
.ie-ai-chat .m.user { background: var(--acc); color: #fff; align-self: flex-end; }
.ie-ai-chat .m.assistant { background: var(--panel2); align-self: flex-start; }
.ie-ai-input { display: flex; flex-direction: column; gap: 6px; }
.ie-ai-input textarea { width: 100%; resize: vertical; min-height: 40px; background: var(--bg); border: 1px solid var(--brd); border-radius: 6px; padding: 6px 8px; color: var(--fg); }
@media (max-width: 1100px) { .main { grid-template-columns: 240px 1fr 240px; } }

/* ── inline sign-in gate ─────────────────────────────────────────────────── */
.card.login-card { text-align: center; }
#login-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; text-align: left; }
#login-form input { background: var(--panel2); border: 1px solid var(--brd); color: var(--fg);
  border-radius: 7px; padding: 9px 11px; min-height: 36px; width: 100%; }
#login-form input:focus { outline: none; border-color: var(--acc); }
#login-form .btn.primary { justify-content: center; min-height: 38px; margin-top: 2px; }
.login-err { background: rgba(242,109,109,.12); border: 1px solid var(--danger); color: var(--danger);
  border-radius: 7px; padding: 9px 11px; font-size: 12px; }

/* range selection + transition band */
:root { --in: #35c26a; --out: #a05de8; }
.range-sel { position: absolute; top: 0; bottom: 0; background: rgba(160,93,232,.10); border-left: 2px solid var(--in); border-right: 2px solid var(--out); z-index: 4; pointer-events: none; }
.range-sel .rh { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; pointer-events: auto; }
.range-sel .rh.l { left: -7px; } .range-sel .rh.r { right: -7px; }
.range-sel .rh .cap { position: absolute; top: 0; left: -1px; font-size: 14px; line-height: 14px; }
.range-sel .rh.l .cap { color: var(--in); } .range-sel .rh.r .cap { color: var(--out); }
.range-sel .rlbl { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #1a1400; background: var(--sel); border-radius: 4px; padding: 0 5px; pointer-events: auto; }
.range-tools { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--brd); }
.range-tools .btn { min-height: 28px; padding: 3px 8px; font-size: 12px; }
.tband { position: absolute; top: 6px; bottom: 6px; z-index: 2; border-radius: 4px; cursor: pointer; pointer-events: auto;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 4px, rgba(255,255,255,.15) 4px 8px); border: 1px solid #fff; }
.tband:hover { background: repeating-linear-gradient(135deg, rgba(255,210,63,.8) 0 4px, rgba(255,210,63,.3) 4px 8px); }