:root {
  --bg: #0e0f11;
  --panel: #16181b;
  --line: #2a2d32;
  --text: #e7e9ec;
  --dim: #8b919a;
  --blue: #3e8cff;
  --done: #3fae6a;
  --warn: #e8a13a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
#app { display: flex; height: 100vh; }
#left { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#right { width: 360px; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
@media (max-width: 900px) { #app { flex-direction: column; height: auto; } #right { width: auto; border-left: 0; border-top: 1px solid var(--line); } }

#stageWrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; min-height: 240px; }
#stage { position: relative; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
#stage canvas, #stage iframe { position: absolute; left: 0; top: 0; border: 0; background: transparent; }
#stage iframe { width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; }
#stage canvas { width: 100%; height: 100%; }
#pins { position: absolute; inset: 0; }
#stage.pinmode { cursor: crosshair; }
#pinHint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(14,15,17,0.85); color: #fff; padding: 6px 10px; border-radius: 4px; display: none; pointer-events: none; }
#stage.pinmode #pinHint { display: block; }
.pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; cursor: pointer; }
.pin.done { background: var(--done); }
.pin.draft { background: var(--warn); }

#transport { padding: 8px 12px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; }
.dim { color: var(--dim); }
button { background: #23262b; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; font: inherit; cursor: pointer; }
button:hover { border-color: #444a52; }
button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
button.on { background: var(--warn); border-color: var(--warn); color: #111; }
select { background: #23262b; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 3px; }
#tc { font: 600 15px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; min-width: 86px; }
#fr { font-family: ui-monospace, Consolas, monospace; color: var(--dim); }
#shot { color: var(--blue); }

#timeline { position: relative; height: 46px; margin: 8px 0; background: #1d2024; border-radius: 4px; cursor: pointer; user-select: none; }
#shots { position: absolute; inset: 4px 0 14px 0; display: flex; }
.seg { height: 100%; border-right: 1px solid #0e0f11; overflow: hidden; white-space: nowrap; font-size: 10px; color: var(--dim); padding: 3px 4px; }
.seg:nth-child(odd) { background: #22262b; }
#marks { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; }
.mark { position: absolute; bottom: 2px; width: 3px; height: 10px; margin-left: -1px; background: var(--blue); border-radius: 1px; }
.mark.done { background: var(--done); }
#head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.layers label { color: var(--text); }

#cHead { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
#cHead h2 { margin: 0; font-size: 15px; }
#cList { flex: 1; overflow: auto; padding: 8px; }
.cm { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; background: #1b1d21; }
.cm.cur { border-color: var(--blue); }
.cm.done { opacity: 0.55; }
.cm .meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--dim); }
.cm .meta .tcode { color: var(--blue); cursor: pointer; font-family: ui-monospace, Consolas, monospace; }
.cm .txt { margin: 6px 0; white-space: pre-wrap; }
.cm .acts { display: flex; gap: 6px; justify-content: flex-end; }
.cm .acts button { padding: 2px 8px; font-size: 12px; }
.reply { border-left: 2px solid var(--blue); margin: 6px 0 2px; padding: 2px 8px; color: #cfd6e4; white-space: pre-wrap; }
.reply b { color: var(--blue); font-weight: 600; }
#composer { border-top: 1px solid var(--line); padding: 10px; }
#cText { width: 100%; min-height: 70px; resize: vertical; background: #0f1113; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 8px; font: inherit; margin-bottom: 8px; }
.keys { margin-top: 8px; font-size: 11px; }
#vid { position: fixed; width: 2px; height: 2px; left: -10px; top: -10px; opacity: 0; }
#toast { position: absolute; right: 12px; top: 12px; background: #0f1319; color: #fff; padding: 6px 12px; border-radius: 4px; font-weight: 600; opacity: 0; transform: translateY(-6px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
#toast.on { opacity: 1; transform: none; }
#agent { padding: 8px 14px; border-bottom: 1px solid var(--line); color: #cfd6e4; background: #14243d; font-size: 12px; }
#agent::before { content: "Claude: "; color: var(--blue); font-weight: 600; }
#cover { position: absolute; left: 0; right: 0; top: 0; height: 4px; }
#cover .run { position: absolute; top: 0; bottom: 0; }
.run.src-final, #src.src-final { background: var(--done); }
.run.src-playblast { background: #5a6069; }
#src { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px; color: #0e0f11; background: #5a6069; }
#src:empty { display: none; }
#src.src-playblast { background: #5a6069; color: #e7e9ec; }

/* tabs, reviewer name, script view */
#tabs { display: flex; border-bottom: 1px solid var(--line); }
#tabs button { flex: 1; border: 0; border-radius: 0; background: transparent; padding: 10px; color: var(--dim); font-weight: 600; }
#tabs button.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--blue); }
.pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pane[hidden] { display: none; }
#cName { width: 100%; background: #0f1113; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font: inherit; margin-bottom: 6px; }
.cm .meta .who { color: var(--text); font-weight: 600; }
#scriptBar { padding: 8px 10px; border-bottom: 1px solid var(--line); gap: 6px; }
#scriptBar button { padding: 3px 10px; }
#scriptBar button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
#scriptBody { flex: 1; overflow: auto; padding: 10px 16px 24px; font: 16px/1.65 Georgia, "Times New Roman", serif; color: #d7dbe1; }
#scriptBody p { margin: 0 0 14px; }
#scriptBody span[data-t] { cursor: pointer; border-radius: 3px; }
#scriptBody span[data-t]:hover { background: #262a31; }
#scriptBody .now { background: var(--blue); color: #fff; }
#scriptBody .del { color: #ff6b6b; text-decoration: line-through; text-decoration-thickness: 2px; }
#scriptBody .ins { color: #3fd07a; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#scriptEditBox { flex: 1; display: flex; flex-direction: column; padding: 10px; gap: 8px; min-height: 0; }
#scriptEditBox[hidden] { display: none; }
#scriptText { flex: 1; min-height: 240px; resize: none; background: #0f1113; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 10px; font: 15px/1.6 Georgia, "Times New Roman", serif; }
#paneScript > .keys { padding: 6px 12px 10px; }
.mark.red { background: #ff6b6b; height: 6px; bottom: 6px; }