/* stream-autocut editor — dark NLE surface, amber accent, monospaced time */
:root{
  --bg:#0c0e11; --panel:#13171c; --panel2:#181d23; --line:#242c35;
  --ink:#e2e8ef; --dim:#7f8b98; --faint:#4d5866;
  --accent:#ff8a3d; --accent-ink:#1a1005;
  --split:#4dd4ac; --full:#7aa2ff; --mixed:#c58bff;
  --danger:#ff5f56;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif;
  --r:7px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:13px;line-height:1.45;display:flex;flex-direction:column;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
.grow{flex:1}
.dim{color:var(--dim)}
button,input,textarea{font:inherit;color:inherit}

/* ---------- header ---------- */
.bar{
  display:flex;align-items:center;gap:14px;padding:9px 14px;
  background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto;
}
.brand{font-weight:650;letter-spacing:.2px}
.brand .mark{color:var(--accent);margin-right:3px}
.src{
  font-family:var(--mono);font-size:11.5px;color:var(--dim);
  max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.conn{display:flex;align-items:center;gap:6px}
.conn input{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:5px 8px;font-family:var(--mono);font-size:11.5px;width:190px;
}
.conn input[type=password]{width:120px}
.conn input:focus{outline:none;border-color:var(--accent)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.dot.on{background:var(--split);box-shadow:0 0 0 3px rgba(77,212,172,.16)}
.dot.err{background:var(--danger);box-shadow:0 0 0 3px rgba(255,95,86,.16)}

/* ---------- buttons ---------- */
.btn{
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 12px;cursor:pointer;transition:background .12s,border-color .12s;
  white-space:nowrap;
}
.btn:hover{background:#20262e;border-color:#313b47}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:#3a2529}
.btn.danger:hover{background:#2a1a1c}
.btn.sm{padding:3px 9px;font-size:12px}

/* ---------- main ---------- */
main{
  flex:1;display:grid;overflow:hidden;
  grid-template-rows:minmax(190px,1fr) auto auto minmax(96px,.55fr);
}
.stage{display:grid;grid-template-columns:1fr 328px;gap:1px;background:var(--line);overflow:hidden}
.players{display:grid;grid-template-columns:1fr auto;gap:1px;background:var(--line);overflow:hidden}
.pane{background:var(--panel);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.paneHead{
  padding:6px 10px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:8px;flex:0 0 auto;
}
#video{flex:1;min-height:0;width:100%;background:#000;object-fit:contain}
.pane.vert{width:230px}
.vertBox{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:#000;padding:6px;
}
.vertBox img{max-height:100%;max-width:100%;object-fit:contain;border-radius:3px}
.vertEmpty{
  margin:0;padding:0 16px;text-align:center;color:var(--faint);
  font-size:11.5px;line-height:1.6;
}
.transport{
  display:flex;align-items:center;gap:6px;padding:6px 8px;
  border-top:1px solid var(--line);flex:0 0 auto;
}
.tc{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-left:auto}
.chk{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--dim);cursor:pointer}
.badge{
  font-family:var(--mono);font-size:10px;padding:1px 6px;border-radius:20px;
  border:1px solid var(--line);color:var(--dim);text-transform:none;letter-spacing:0;
}
.badge.split{color:var(--split);border-color:#1f4d42}
.badge.full{color:var(--full);border-color:#25375e}
.badge.mixed{color:var(--mixed);border-color:#43305e}

/* ---------- inspector ---------- */
.inspector{background:var(--panel);overflow-y:auto;padding:10px}
.empty{color:var(--faint);text-align:center;padding:30px 12px;font-size:12px}
.fld{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;flex:1;min-width:0}
.fld>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim)}
.fld input,.fld textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:5px 8px;width:100%;resize:vertical;
}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.fld input[readonly]{color:var(--dim);background:#0f1216}
#fStart,#fEnd,#fDur,#fScore{font-family:var(--mono)}
.row{display:flex;gap:8px}
.row.btns{margin-top:4px}
#renderedBox{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
#rendered{width:100%;max-height:260px;background:#000;border-radius:var(--r)}

/* ---------- toolbar ---------- */
.tools{
  display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap;
  background:var(--panel2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);flex:0 0 auto;
}
.sep{width:1px;height:20px;background:var(--line)}
.mini{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--dim)}
.mini input{
  background:var(--bg);border:1px solid var(--line);border-radius:5px;
  padding:4px 6px;width:56px;font-family:var(--mono);font-size:11.5px;
}
.mini.wide input{width:150px}
.zoom{display:flex;gap:4px}

/* ---------- timeline ---------- */
.timelineWrap{background:var(--panel);flex:0 0 auto;user-select:none}
.ruler{
  height:19px;position:relative;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;color:var(--faint);overflow:hidden;
}
.ruler i{position:absolute;top:0;bottom:0;border-left:1px solid #1c232b;padding-left:4px;font-style:normal;line-height:19px}
.timeline{position:relative;height:132px;overflow:hidden;cursor:grab}
.timeline.panning{cursor:grabbing}
#wave{position:absolute;inset:0;width:100%;height:100%;display:block}
.clips{position:absolute;inset:0}
.clip{
  position:absolute;top:9px;bottom:9px;border-radius:5px;
  background:linear-gradient(180deg,rgba(255,138,61,.30),rgba(255,138,61,.14));
  border:1px solid rgba(255,138,61,.55);cursor:grab;overflow:hidden;
  transition:box-shadow .12s,border-color .12s;
}
.clip:hover{border-color:var(--accent)}
.clip.sel{
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 6px 18px rgba(0,0,0,.5);
  background:linear-gradient(180deg,rgba(255,138,61,.46),rgba(255,138,61,.20));z-index:3;
}
.clip.dragging{cursor:grabbing;z-index:4}
.clip .lab{
  position:absolute;left:7px;right:7px;top:5px;font-size:10.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.clip .sub{
  position:absolute;left:7px;bottom:4px;font-family:var(--mono);font-size:9.5px;
  color:rgba(255,255,255,.72);pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.clip .h{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:2}
.clip .h::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  left:3px;width:3px;height:24px;border-radius:2px;background:rgba(255,255,255,.45);
}
.clip .h.l{left:0} .clip .h.r{right:0}
.clip .h.r::after{left:auto;right:3px}
.clip.tooSmall .lab,.clip.tooSmall .sub{display:none}
.playhead{position:absolute;top:0;bottom:0;width:1px;background:#fff;pointer-events:none;z-index:5}
.playhead::before{
  content:"";position:absolute;top:0;left:-4px;border-left:4.5px solid transparent;
  border-right:4.5px solid transparent;border-top:6px solid #fff;
}
.hint{
  position:absolute;left:10px;bottom:6px;font-size:10.5px;color:var(--faint);
  pointer-events:none;transition:opacity .25s;
}
.hint.gone{opacity:0}
.miniMap{position:relative;height:16px;background:#0a0c0f;border-top:1px solid var(--line);cursor:pointer}
.mmView{position:absolute;top:2px;bottom:2px;background:rgba(255,138,61,.22);border:1px solid rgba(255,138,61,.6);border-radius:3px}

/* ---------- list ---------- */
.listWrap{background:var(--panel);border-top:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.listHead{
  display:flex;align-items:center;gap:10px;padding:6px 12px;font-size:11.5px;
  color:var(--dim);border-bottom:1px solid var(--line);flex:0 0 auto;
}
.jobline{font-family:var(--mono);font-size:11px;color:var(--accent);cursor:pointer}
.list{flex:1;overflow-y:auto;display:flex;gap:8px;padding:9px 12px;flex-wrap:wrap;align-content:flex-start}
.card{
  width:186px;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r);padding:7px 8px;cursor:pointer;
}
.card:hover{border-color:#39434f}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card .t{font-size:11.5px;font-weight:600;line-height:1.3;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .m{display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--dim)}
.card .sc{color:var(--accent);font-weight:700}

/* ---------- log ---------- */
.logPanel{
  position:fixed;right:12px;bottom:12px;width:440px;max-height:44vh;z-index:50;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  display:flex;flex-direction:column;box-shadow:0 14px 44px rgba(0,0,0,.65);
}
.logHead{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line)}
#logBody{
  margin:0;padding:8px 10px;overflow:auto;font-family:var(--mono);font-size:11px;
  line-height:1.55;color:var(--dim);white-space:pre-wrap;word-break:break-word;
}
@media (max-width:1080px){
  .stage{grid-template-columns:1fr}
  .inspector{display:none}
  .pane.vert{width:170px}
}