/* Studio presentation. Workflow geometry and state styles live in index.html. */
:root {
  color-scheme: dark;
  --bg: var(--sr-bg); --panel: var(--sr-surface); --panel-2: var(--sr-raised); --panel-3: var(--sr-overlay);
  --field: var(--sr-field); --stage: var(--sr-bg); --line: var(--sr-line); --line-2: var(--sr-line-strong);
  --ink: var(--sr-ink); --dim: var(--sr-ink-2); --faint: var(--sr-ink-3);
  --accent: var(--sr-accent); --accent-2: var(--sr-accent-hover); --accent-ink: var(--sr-accent-ink);
  --accent-dim: var(--sr-accent-soft); --accent-line: var(--sr-accent-line);
  --radius: var(--sr-radius-lg); --radius-sm: var(--sr-radius);
  --video: var(--sr-accent); --playhead: var(--sr-accent);
}
body { font-size: 13.5px; letter-spacing: .005em; height: 100dvh; }
button { min-height: 32px; font-weight: 550; }
button.small { min-height: 28px; }
button.primary { background: var(--accent); border-color: transparent; box-shadow: none; }
button.primary:hover:not(:disabled) { background: var(--sr-accent-hover); }
button:disabled { opacity: 1; color: var(--sr-ink-3); }
input, select, textarea { background: var(--field); }
/* Native popup menus need explicit colors; transparent controls can otherwise
   produce light text on the host browser's light menu surface. */
select option, select optgroup { color: var(--ink); background-color: var(--panel); }
select option:disabled { color: var(--faint); }
label { font-size: 12px; }
body > header { min-height: 68px; gap: 10px; padding: 12px 22px; border-color: var(--line); }
.brand { gap: 11px; margin-right: 16px; }
.brand .mark { width: 34px; height: 36px; border-radius: 9px; background: var(--accent); }
.brand .mark .ico { width: 20px; height: 20px; }
.brand h1 { font-size: 15px; letter-spacing: -.025em; font-weight: 650; }
.brand-sub { display: block; margin-top: 2px; color: var(--faint); font-size: 10px; letter-spacing: .14em; }
.engine-label { margin: 0 0 0 10px; font-size: 11.5px; white-space: nowrap; }
#profile-picker { max-width: 200px; font-size: 12px; }
#profile-coverage:empty { display: none; }
.project-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; min-height: 51px;
  padding: 7px 22px; border-bottom: 1px solid var(--line); background: var(--panel); }
.eyebrow { font-size: 11px; font-weight: 650; letter-spacing: .12em; color: var(--dim); }
.project-bar > .eyebrow { margin-right: 9px; }
#project-picker { width: 240px; max-width: 40vw; background: var(--panel); border-color: transparent; font-weight: 600; }
#project-picker:hover { border-color: var(--line-2); }
.project-bar button { background: transparent; color: var(--dim); }
.workspace-mode { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--dim); }
.workspace-mode > span, .track-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.workspace { grid-template-columns: 332px minmax(0, 1fr); gap: 0; }
.shotlist { border-color: var(--line); }
.library-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 16px; }
.library-heading h2 { font-size: 18px; letter-spacing: -.025em; font-weight: 600; margin: 3px 0 0; }
.library-heading button { width: 30px; }
.library-search { margin: 0 16px 15px; position: relative; }
.library-search > .ico { position: absolute; top: 12px; left: 11px; color: var(--faint); }
.library-search input { padding: 8px 10px 8px 33px; font-size: 12.5px; }
.shotlist-head { padding: 0 16px 12px; gap: 13px; }
.binswitch { width: 100%; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.binswitch button { flex: 1; min-height: 31px; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 550; }
.binswitch button.active { border-color: var(--line-2); background: var(--panel-3); color: var(--ink); box-shadow: 0 1px 3px #0003; }
.binswitch .count { background: var(--panel-2); color: var(--dim); font-size: 11px; padding: 1px 6px; }
.shotlist-head > .spacer { display: none; }
.shotlist-sub { gap: 5px; }
.shotlist-body { padding: 12px; gap: 8px; }
.bin-row { flex-shrink: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 5px 11px; padding: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
.bin-row:hover { background: var(--panel-3); border-color: var(--line-2); }
.bin-row.selected { background: var(--accent-dim); border-color: var(--accent-line); box-shadow: none; }
.bin-row::before { top: 10px; bottom: 10px; width: 3px; }
.bin-row .idx { position: absolute; top: 12px; left: 12px; z-index: 1; background: rgba(7, 7, 8, .88); color: var(--ink);
  padding: 1px 5px; border-radius: 3px; font-size: 10.5px; font-weight: 600; pointer-events: none; }
.bin-row .thumbwrap, .bin-row .thumb { width: 76px; height: 48px; }
.bin-row .thumbwrap { grid-row: 1 / span 2; align-self: center; }
.bin-row .thumb { object-fit: cover; border-radius: 4px; }
.bin-row .who { min-width: 0; grid-column: 2; grid-row: 1; align-self: start; padding-top: 1px; }
.bin-row .who .nm { font-size: 12.5px; font-weight: 600; padding-right: 0; }
.bin-row .who .sub { font-size: 11px; margin-top: 4px; color: var(--dim); }
/* Actions get their own row so neither the title nor the metadata is covered. */
.bin-row .bin-actions { position: static; transform: none; grid-column: 2 / -1; justify-self: end;
  padding: 0; background: transparent; border: 0; box-shadow: none; opacity: 1; gap: 6px; }
.bin-row .bin-action-btn { min-height: 24px; min-width: 25px; color: var(--dim); }
.bin-row.disabled .bin-actions .bin-action-btn { display: inline-flex; }
.bin-row:focus-visible { outline-offset: 2px; }
.bin-row .flags { grid-column: 3; grid-row: 1; }
.add-source-tile { flex-shrink: 0; margin-top: 4px; min-height: 38px; border-radius: 6px; }
.list-hint { padding: 8px 5px; line-height: 1.5; font-size: 11px; color: var(--dim); }
.library-empty { text-align: center; padding: 28px 16px; color: var(--dim); }
.library-empty > .ico { width: 28px; height: 28px; color: var(--accent); margin-bottom: 8px; }
.library-empty h3 { color: var(--ink); font-size: 14px; font-weight: 550; margin: 8px 0; }
.library-empty p { margin: 0; font-size: 12px; line-height: 1.7; }
.bin-images { gap: 10px; }
.bin-still { border-radius: 8px; }
.monitor { padding: 0 24px; }
.monitor-heading { display: flex; align-items: center; gap: 12px; min-height: 44px; flex-shrink: 0; }
.monitor-hint { font-size: 11.5px; color: var(--dim); }
.monitor > .stage { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: none; }
.monitor > .monitor-bar { min-height: 40px; padding: 8px 0; border: 0; background: transparent; }
#player-position { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: inherit; font-size: 12px; }
#player-stat { white-space: nowrap; font-size: 11px; }
.stage:fullscreen { border: 0; border-radius: 0; }
.timeline { padding: 10px 22px 0; border-color: var(--line); }
.timeline-bar { gap: 5px; margin-bottom: 10px; }
.timeline-title { font-weight: 600; font-size: 13px; margin-right: 14px; }
.timeline-bar > .sep:first-of-type { margin-right: 12px; }
#tl-play { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
#tl-time { padding-left: 9px; font-size: 12px; }
.timeline-bar button:not(#tl-play) { background: transparent; border-color: transparent; }
.timeline-bar button:hover:not(:disabled) { background: var(--panel-3); border-color: var(--line-2); }
#tl-scroll { background: var(--field); border-radius: 6px; }
#ruler { height: 22px; }
#ruler span { top: 3px; font-size: 10.5px; color: var(--dim); }
#ruler .tick { top: 16px; }
.clip { border-radius: 6px; }
.clip.selected { box-shadow: none; }
.timeline-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; color: var(--dim); font-size: 11px; }
.track-dot { margin-right: 7px; width: 5px; height: 5px; }
kbd { font: 10.5px var(--mono); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 5px; margin-right: 3px; }
.shortcut-gap { margin-left: 14px; }
#editor .sheet { background: var(--panel); border-radius: 8px; border-color: var(--line-2); box-shadow: var(--sr-shadow-pop); }
#editor .head { padding: 12px 18px; background: var(--panel-2); }
#editor .head h2 { font-size: 17px; letter-spacing: -.02em; }
#editor .author { background: var(--panel); }
#editor .author-body { padding: 18px; background: var(--panel); }
.tabbar { padding: 6px 12px 0; background: var(--panel-2); }
.tabbar button { padding: 10px 11px; font-size: 12.5px; }
.group { background: var(--panel-2); margin-bottom: 16px; border-radius: 6px; border: 1px solid var(--line); }
.group > .block-title { background: var(--panel-3); padding: 11px 14px; font-size: 12px; color: var(--ink); }
.group-body { padding: 14px; }
.group input, .group textarea { line-height: 1.6; }
.writer-bar { border-radius: 6px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); }
.queue-sheet, .ask-sheet, .studio-sheet, .projects-sheet { border-radius: 8px; background: var(--panel); }
#settings-panel { max-height: min(760px, 80vh); overflow-y: auto; max-width: calc(100vw - 32px); background: var(--panel-2); }
@media (max-width: 1180px) {
  .engine-label, .brand-sub { display: none; }
  body > header { padding: 10px 16px; min-height: 58px; }
  .workspace { grid-template-columns: 292px minmax(0, 1fr); }
  .monitor { padding: 0 16px; }
  .timeline { padding-left: 16px; padding-right: 16px; }
  .bin-row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 5px 8px; padding: 10px; }
  .bin-row .thumbwrap, .bin-row .thumb { width: 60px; height: 42px; }
}
@media (max-width: 900px) {
  body > header { flex-wrap: wrap; gap: 7px; }
  #profile-picker { max-width: 160px; }
  .brand { margin-right: 0; }
  .workspace { grid-template-columns: 250px minmax(0, 1fr); }
  .library-heading { padding: 16px; }
  .library-heading h2 { font-size: 16px; }
  .monitor-hint, .workspace-mode, .timeline-title, .timeline-bar > .sep:first-of-type { display: none; }
  .monitor-bar { flex-wrap: wrap; gap: 4px; }
  #player-stat { flex-basis: 100%; }
  .timeline-bar { flex-wrap: wrap; }
  .timeline-foot > span:last-child { display: none; }
  #editor .head { flex-wrap: wrap; }
  .writer-bar { flex-wrap: wrap; }
  .writer-bar textarea { flex: 1 0 100%; width: 100%; }
  .author-foot, .gen-actions { flex-wrap: wrap; }
  .queue-head, .queue-head .title-group, .queue-tabbar { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  body { overflow-y: auto; height: auto; min-height: 100dvh; }
  body > header { padding: 10px 12px; }
  .brand h1 { font-size: 13px; }
  .brand .mark { width: 28px; height: 30px; }
  #profile-picker { max-width: 130px; }
  .project-bar { padding: 7px 12px; flex-wrap: wrap; }
  .project-bar > .eyebrow { display: none; }
  #project-picker { max-width: none; flex: 1; min-width: 0; width: 130px; }
  .workspace { display: flex; flex-direction: column-reverse; flex: none; }
  .monitor { height: 330px; flex: none; padding: 0 12px; }
  .monitor-heading { min-height: 42px; }
  .shotlist { max-height: 420px; border-top: 1px solid var(--line); border-right: 0; }
  .shotlist-body { min-height: 100px; }
  .timeline { padding: 12px 12px 0; }
  #editor { padding: 0; }
  #editor .sheet { width: 100vw; height: 100dvh; border-radius: 0; }
  #editor .panes { overflow-y: auto; display: flex; flex-direction: column; }
  #editor .author, #editor .takes-pane { min-height: 380px; flex: none; }
  #editor .author-body { overflow: visible; }
  #editor .takes-pane > .takes-toolbar { flex-wrap: wrap; }
  #settings-panel { position: fixed; top: 108px; left: 12px; right: 12px; width: auto; max-width: none; max-height: calc(100dvh - 124px); }
  #queue-modal { padding: 0; }
  .queue-sheet { width: 100vw; height: 100dvh; border-radius: 0; }
  .queue-head h2 { font-size: 13px; }
  .queue-tabbar { padding: 8px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Obsidian workspace: a persistent author, full-width review and retained edit. */
body > header { min-height: 54px; padding: 8px 16px; gap: 8px; }
.brand { gap: 9px; margin-right: 12px; }
.brand-sub, .engine-label { display: none; }
.brand .mark { width: 28px; height: 28px; background: var(--panel-3); color: var(--accent); border-radius: 5px; }
.brand h1 { font-size: 14px; font-weight: 600; }
#project-picker { width: 195px; background: var(--panel-2); border-color: var(--line); font-size: 12.5px; }
#profile-picker { max-width: 165px; }
header #new-project { font-size: 0; gap: 0; padding: 7px; }
header #new-project .ico { width: 15px; }
header #export { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); font-weight: 600; }
.workspace { grid-template-columns: 268px minmax(240px, 1fr); }
.library-heading { padding: 12px 14px 8px; }
.library-heading .eyebrow { display: none; }
.library-heading h2 { margin: 0; font-size: 14px; }
.library-heading button { background: var(--panel-2); color: var(--ink); border-color: var(--line-2); }
.library-search { margin: 0 12px 8px; }
.shotlist-head { padding: 0 12px 8px; gap: 7px; }
.binswitch { border: 0; padding: 0; background: transparent; border-radius: 0; gap: 12px; }
.binswitch button { border-radius: 0; min-height: 28px; border: 0; border-bottom: 2px solid transparent; padding: 4px 2px; font-size: 12px; }
.binswitch button.active { background: transparent; border-color: var(--accent); box-shadow: none; }
.shotlist-body { gap: 6px; padding: 8px 10px 14px; }
.bin-row { grid-template-columns: 72px minmax(0, 1fr) auto; padding: 8px 9px; gap: 3px 9px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line); }
.bin-row:hover { background: var(--panel-3); border-color: var(--line-2); }
.bin-row .thumbwrap, .bin-row .thumb { width: 72px; height: 44px; }
.bin-row .thumbwrap { align-self: start; }
.bin-row .idx { top: 10px; left: 11px; font-size: 10.5px; }
.bin-row .who .nm { font-size: 12px; }
.bin-row .bin-actions { gap: 3px; }
.bin-row .bin-action-btn { min-width: 24px; min-height: 24px; color: var(--dim); }
.bin-row.selected { border-color: var(--accent-line); background: var(--accent-dim); }
.bin-row.has-new:not(.selected) { border-color: rgba(138, 180, 255, .45); background: linear-gradient(90deg, rgba(138, 180, 255, .14), transparent 75%), var(--panel-2); }
.bin-row.has-new .new-dot { width: 6px; height: 6px; }
.monitor { padding: 0 16px; }
.monitor-heading { min-height: 36px; gap: 6px; }
.monitor-heading > .eyebrow { font-size: 10.5px; letter-spacing: .09em; color: var(--dim); }
.monitor > .stage { border-radius: 4px; box-shadow: none; border-color: var(--line); }
.monitor > .monitor-bar { min-height: 34px; gap: 5px; padding: 5px 0; }
#player-position { font-size: 11.5px; }
#player-stat { display: none; }
#monitor-return { color: var(--accent); font-size: 11px; }
#monitor-return[hidden] { display: none; }
.group { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
.group > .block-title { background: var(--panel-3); color: var(--ink); }
.candidate.picked { box-shadow: inset 0 0 0 1px var(--accent); }
.candidate { border-radius: 6px; background: var(--panel-2); }
.candidate.is-new:not(.picked):not(.chosen) { border-color: var(--line-2); }
.candidate .new-flag { background: var(--panel-3); color: var(--ink); }
.pick.in-edit, .candidate:hover .pick.in-edit { background: var(--accent); box-shadow: none; }
.candidate .tier-bar { height: 2px; opacity: .85; }
.candidate .meta-pill.tier { background: transparent; }
.candidate .info.actions { background: var(--panel); }
.candidate video[role="button"]:focus-visible { outline-offset: -3px; }

#editor.docked:not(.open) { position: relative; inset: auto; display: flex; min-width: 0; min-height: 0;
  padding: 0; background: var(--panel); backdrop-filter: none; z-index: auto; border-left: 1px solid var(--line); }
#editor.docked:not(.open) .sheet { width: 100%; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--panel); }
#editor.docked:not(.open) .head { gap: 6px; flex-wrap: nowrap; padding: 6px 12px; background: var(--panel-2); min-height: 40px; }
#editor.docked:not(.open) .head h2 { font-size: 14px; min-width: 0; max-width: calc(100% - 50px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#editor.docked:not(.open) #editor-stat,
#editor.docked:not(.open) #editor-toggle-clip,
#editor.docked:not(.open) #duplicate-source,
#editor.docked:not(.open) #editor-delete-source,
#editor.docked:not(.open) #editor-prev,
#editor.docked:not(.open) #editor-next,
#editor.docked:not(.open) #editor-close,
#editor.docked:not(.open) .head > .sep { display: none; }
#editor-expand, #editor.open #editor-expand { display: none; }
#editor.docked:not(.open) .seg-tabs { order: 3; flex: 1 0 100%; max-width: 100%; }
#editor.docked:not(.open) .panes { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
#editor.docked:not(.open) .author { flex: 1; min-height: 0; border: 0; background: var(--panel); }
#editor.docked:not(.open) .author-body { padding: 10px 12px; flex: 1; min-height: 0; overflow-y: auto; }
#editor.docked:not(.open) .tabbar { padding: 0 10px; gap: 2px; flex-wrap: nowrap; overflow-x: auto; flex-shrink: 0; background: var(--panel-2); }
#editor.docked:not(.open) .tabbar button { padding: 6px 8px; min-height: 32px; font-size: 12px; flex-shrink: 0; }
#editor.docked:not(.open) .tabbar button .ico { display: none; }
#editor.docked:not(.open) #help-all { display: none; }
#editor.docked:not(.open) .group { margin-bottom: 10px; }
#editor.docked:not(.open) .group > .block-title { padding: 8px 12px; text-transform: none; letter-spacing: 0; font-size: 12px; min-height: 34px; }
#editor.docked:not(.open) .muted-tag { display: none; }
#editor.docked:not(.open) .group-body { padding: 10px 12px; }
#editor.docked:not(.open) .writer-bar { flex-wrap: wrap; padding: 8px 10px; gap: 6px; margin-bottom: 8px; }
#editor.docked:not(.open) .writer-bar textarea { flex: 1 0 100%; width: 100%; min-height: 34px; padding: 5px 8px; font-size: 12.5px; }
#editor.docked:not(.open) .writer-bar .then-render { font-size: 11px; }
#editor .author { min-width: 0; overflow: hidden; }
#editor .author-foot { flex-wrap: wrap; padding: 8px 14px 10px; gap: 6px; }
#editor .author-foot #stats { font-size: 11.5px; flex: 1 1 100%; }
#editor .author-foot > .spacer { display: none; }
#editor .gen-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#editor .gen-actions > .render-tier { flex: 1 1 150px; min-width: 130px; }
#editor.docked:not(.open) .author-foot { padding: 6px 12px 8px; gap: 5px; }
#editor.docked:not(.open) .author-foot #stats { font-size: 11px; flex-basis: 100%; }
#editor.docked:not(.open) .gen-actions { width: 100%; gap: 6px; display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(80px, .9fr) auto; }
#editor.docked:not(.open) .gen-actions button { font-size: 11.5px; }
#editor.docked:not(.open) .gen-actions > input,
#editor.docked:not(.open) .gen-actions > select { width: 100%; min-width: 0; font-size: 11.5px; height: 28px; padding: 3px 6px; }
#editor.docked:not(.open) .gen-actions > .render-tier { grid-column: 1 / 3; }
#editor.docked:not(.open) .gen-actions > .primary { grid-column: 3; }
#editor.docked:not(.open) .seg-tabs:not(:has(.seg-tab.active)) { order: 0; flex: 0 0 auto; }
.review-open #editor.docked:not(.open) .author-foot #stats { display: none; }
.inspector-empty { padding: 28px 20px; line-height: 1.8; color: var(--dim); font-size: 12.5px; }
#editor.has-source .inspector-empty { display: none; }
#editor:not(.has-source) .panes { display: none; }

.review-dock { flex: 0 0 auto; min-height: 0; border-top: 1px solid var(--line); background: var(--panel); }
.review-bar { display: flex; align-items: center; gap: 16px; height: 38px; padding: 0 16px; }
.review-switch { display: flex; gap: 18px; height: 100%; }
.review-switch button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0 2px; color: var(--dim); font-size: 12.5px; }
.review-switch button.active { border-bottom-color: var(--accent); color: var(--ink); }
.review-switch .count { font: 11px var(--mono); padding: 1px 6px; background: var(--panel-3); border-radius: 3px; color: var(--ink); }
.review-source { font-size: 11.5px; color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-hint { color: var(--dim); font-size: 11px; display: none; }
.review-open .review-hint { display: inline; }
#review-content { display: flex; min-height: 0; height: 360px; background: var(--bg); }
#review-content[hidden], #review-close[hidden], #review-resize[hidden] { display: none; }
#review-content > .takes-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#review-content .takes-toolbar { padding: 7px 16px; background: var(--panel); gap: 10px; }
#review-content .takes-scroll { padding: 12px 16px; }
#review-content .grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
#review-content .empty { padding: 30px 16px; text-align: center; }
#review-content .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#review-content .compare video { max-height: 290px; object-fit: contain; }
#review-resize { height: 8px; cursor: ns-resize; touch-action: none; display: grid; place-items: center; background: var(--bg); }
#review-resize > span { width: 44px; height: 2px; background: var(--line-2); border-radius: 2px; }
#review-resize:hover > span, #review-resize:focus-visible > span { background: var(--accent); }
.timeline { padding: 6px 16px 0; border-top: 1px solid var(--line); }
.timeline-title { display: none; }
.timeline-bar > .sep:first-of-type { display: none; }
.timeline-bar { margin-bottom: 6px; }
.review-open .timeline { padding-top: 5px; padding-bottom: 6px; }
.review-open .timeline-bar { margin-bottom: 5px; }
.review-open .timeline-bar button { min-height: 27px; padding: 4px 6px; }
.review-open .timeline .track { height: 49px; }
.review-open .timeline .clip { padding: 5px 8px; gap: 1px; border-radius: 3px; }
.review-open .timeline .clip .poster { display: none; }
.review-open .timeline .clip .name { font-size: 11px; }
.review-open .timeline .clip .len { font-size: 10.5px; }
.review-open .timeline-foot { display: none; }
.review-open .timeline .audio-lane { max-height: 30px; }
@media (max-width: 1250px) {
  .workspace { grid-template-columns: 228px minmax(180px, 1fr); }
  .brand h1 { font-size: 12.5px; }
  #project-picker { width: 165px; }
  #profile-picker { max-width: 135px; }
  .bin-row { grid-template-columns: 55px minmax(0, 1fr) auto; }
  .bin-row .thumbwrap, .bin-row .thumb { width: 55px; height: 39px; }
  .monitor { padding: 0 10px; }
  .monitor-hint { display: none; }
}
@media (max-width: 1000px) {
  body > header { flex-wrap: wrap; }
  .workspace { grid-template-columns: 190px minmax(140px, 1fr); }
  .brand { margin-right: 0; }
  .bin-row { grid-template-columns: 1fr auto; }
  .bin-row .thumbwrap, .bin-row .idx { display: none; }
  .bin-row .who { grid-column: 1; }
  .bin-row .flags { grid-column: 2; }
  .bin-row .bin-actions { grid-column: 1 / -1; }
  .monitor-heading > .eyebrow { letter-spacing: 0; }
  #review-content .takes-toolbar { flex-wrap: wrap; gap: 6px; }
  .review-hint { display: none !important; }
}
@media (max-width: 760px) {
  body { height: auto; min-height: 100dvh; overflow-y: auto; }
  .workspace { display: grid; grid-template-columns: minmax(0, 1fr); flex: none; }
  header #project-picker { flex: 0 0 160px; width: 160px; max-width: 160px; }
  .monitor { grid-row: 1; height: 310px; }
  .shotlist { grid-row: 2; max-height: 280px; border-bottom: 1px solid var(--line); }
  .shotlist-body { min-height: 80px; }
  .bin-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .bin-row .thumbwrap, .bin-row .thumb { display: block; width: 64px; height: 42px; }
  .bin-row .who { grid-column: 2; }
  .bin-row .bin-actions { grid-column: 2 / -1; }
  .bin-row .flags { grid-column: 3; }
  #editor.docked:not(.open) { grid-row: 3; height: 460px; border-left: 0; }
  #editor.docked:not(.open) .author { min-height: 0; flex: 1; }
  #editor.docked:not(.open) .author-body { overflow-y: auto; }
  #review-content .grid { grid-template-columns: minmax(0, 1fr); }
  .review-bar { gap: 10px; padding: 0 12px; }
  .review-source { font-size: 11px; }
  .review-switch { gap: 12px; }
  .review-open .timeline { overflow: hidden; }
  .timeline-bar { flex-wrap: wrap; }
  #review-content .compare { grid-template-columns: minmax(0, 1fr); }
}

/* Scene writing: an outline you can scan, with detail opened on demand. */
.scene-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px 10px; }
.scene-heading h3 { margin: 2px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.scene-heading .eyebrow { font-size: 10.5px; color: var(--dim); }
.scene-heading button { border: 1px solid var(--line); }
.scene-navigator { display: flex; gap: 6px; flex-wrap: wrap; position: sticky; top: -18px; z-index: 4;
  background: var(--panel); border-bottom: 1px solid var(--line); padding: 10px 0 10px; margin-bottom: 14px; }
.scene-jump { padding: 4px 9px; min-height: 28px; background: var(--panel-2); border-color: var(--line); font-size: 11.5px; color: var(--dim); }
.scene-jump.shot { border-color: var(--line-2); }
.scene-jump[aria-expanded="true"] { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-line); }
.scene-editor .group { scroll-margin-top: 110px; }
.scene-editor .group > .block-title { font-size: 13px; letter-spacing: 0; text-transform: none; padding: 11px 14px; }
.scene-editor .group > .block-title > .ico:first-child { background: transparent; padding: 0; width: 16px; height: 16px; box-sizing: content-box; }
.scene-editor .group-body { padding: 14px; }
.scene-overview .field { margin-bottom: 14px; }
.scene-overview .field > label { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; font-size: 12px; color: var(--dim); font-weight: 550; }
.scene-overview .field > label > [data-preset] { margin-left: auto; max-width: 150px; }
.scene-overview .field > label select { width: 100%; min-width: 0; }
.scene-overview textarea { padding: 8px 11px; font-size: 13px; line-height: 1.6; }
.scene-overview .opt-row { padding: 6px 0 0; font-size: 12px; color: var(--dim); }
.scene-storyboard > .block-title { flex-wrap: wrap; gap: 7px; }
.scene-storyboard > .group-body { padding: 0 !important; }
.scene-storyboard > .group-body > .note { margin: 14px; }
.scene-storyboard .cards { gap: 0; }
.scene-beat.card { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; scroll-margin-top: 110px; }
.scene-beat.card + .scene-beat.card { border-top: 1px solid var(--line); }
.scene-beat.card.expanded { background: var(--panel); }
.scene-beat.beat-held { margin-left: 18px; border-left: 2px solid var(--line-2); }
.beat-heading { display: flex; gap: 3px; align-items: center; padding: 4px 10px; }
.beat-heading > .card-grip { color: var(--faint); cursor: grab; padding: 4px; }
.beat-heading > .card-grip:hover { color: var(--ink); }
.beat-toggle { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto 14px; gap: 6px 10px;
  padding: 10px 4px; border: 0; border-radius: 3px; background: transparent; text-align: left; white-space: normal; }
.beat-toggle:hover:not(:disabled) { background: transparent; }
.beat-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.beat-time { font: 11px var(--mono); color: var(--dim); }
.beat-summary { grid-column: 1 / 3; font-size: 12px; font-weight: 400; color: var(--dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.beat-chevron { grid-column: 3; grid-row: 1 / 3; color: var(--dim); align-self: center; }
.scene-beat.expanded .beat-chevron { transform: rotate(180deg); color: var(--accent); }
.scene-beat.expanded .beat-name { color: var(--accent); }
.beat-content { padding: 0 16px 16px; }
.beat-content[hidden] { display: none; }
.beat-content > .card-head { padding: 8px 0 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); gap: 6px; flex-wrap: wrap; }
.beat-content > .card-head > .card-n { display: none; }
.beat-content > .card-head .tiny, .beat-content > .card-head .pinned { width: 56px; font-size: 11.5px; }
.beat-content > .card-head .len { display: none; }
.beat-content .card-field { margin-bottom: 14px; }
.beat-content .card-field > label { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--dim); margin-bottom: 6px; }
.beat-content .card-field textarea { padding: 8px 10px; line-height: 1.65; font-size: 13px; min-height: 54px; background: var(--field); border-color: var(--line-2); }
.beat-content .card-field select { padding: 7px 8px; }
.beat-content .line-add { padding: 0; margin: 2px 0 14px; }
.beat-content .line-add button { color: var(--dim); font-size: 11.5px; padding: 4px 6px; }
.beat-content .line-add button:hover { color: var(--accent); }
.camera-tools { margin-top: 4px; }
.camera-tools > summary, .line-delivery > summary { cursor: pointer; font-size: 11.5px; color: var(--dim); padding: 6px 0; font-weight: 500; }
.camera-tools > summary:hover, .line-delivery > summary:hover { color: var(--accent); }
.camera-tools .camera-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 6px; gap: 7px; }
.camera-tools .camera-picker select { min-width: 0; width: 100%; font-size: 12px; }
.camera-tools .camera-picker select:first-child { grid-column: 1 / -1; }
.line-block { background: var(--panel-2); border: 1px solid var(--line); border-left: 2px solid var(--accent-line); border-radius: 5px; padding: 12px; margin: 4px 0 16px; }
.line-block > .card-head { gap: 6px; flex-wrap: wrap; padding-bottom: 8px; }
.line-block > .card-head .card-n { background: transparent; padding-left: 0; color: var(--accent); }
.line-block > .card-head select { max-width: 100%; }
.line-delivery { border-top: 1px solid var(--line); }
.line-delivery .card-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; }
.line-delivery .card-row > .card-field { margin: 0; }
.line-delivery .card-row > .card-field:first-child { grid-column: 1 / -1; }
.line-delivery .card-field textarea { min-height: 42px; }
.scene-output { background: var(--panel-2); }
.scene-output .field > label { font-size: 12px; }
#editor.docked:not(.open) .scene-heading { padding: 2px 0 6px; }
#editor.docked:not(.open) .scene-heading .eyebrow { display: none; }
#editor.docked:not(.open) .scene-heading h3 { font-size: 14px; margin: 0; }
#editor.docked:not(.open) .scene-navigator { top: -10px; gap: 4px; padding: 8px 0 8px; margin-bottom: 10px; }
#editor.docked:not(.open) .scene-jump { padding: 3px 8px; min-height: 26px; font-size: 11px; }
#editor.docked:not(.open) .scene-overview .field > label { font-size: 11.5px; }
#editor.docked:not(.open) .beat-content { padding: 0 10px 14px; }
#editor.docked:not(.open) .beat-toggle { grid-template-columns: 1fr 14px; gap: 5px; }
#editor.docked:not(.open) .beat-time { grid-column: 1; grid-row: 2; }
#editor.docked:not(.open) .beat-summary { grid-column: 1; grid-row: 3; }
#editor.docked:not(.open) .beat-chevron { grid-column: 2; grid-row: 1 / 4; }
#editor.open.scene-focus .sheet { max-width: 1360px; }
#editor.open.scene-focus .panes { grid-template-columns: minmax(0, 1fr); }
#editor.open.scene-focus .takes-pane { display: none; }
#editor.open.scene-focus .author { border-right: 0; border-bottom: 0; }
#editor.open.scene-focus .author-body { padding: 22px 28px; }
#editor.open.scene-focus .scene-editor.active { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(400px, 1.4fr); gap: 0 24px; align-items: start; }
#editor.open.scene-focus .scene-heading, #editor.open.scene-focus .scene-navigator { grid-column: 1 / -1; }
#editor.open.scene-focus .scene-navigator { top: -22px; }
#editor.open.scene-focus .scene-overview { grid-column: 1; grid-row: 3; }
#editor.open.scene-focus .scene-storyboard { grid-column: 2; grid-row: 3 / 5; }
#editor.open.scene-focus .scene-output { grid-column: 1; grid-row: 4; }
#editor.open.scene-focus .author-foot { padding: 12px 28px; }
@media (max-width: 900px) {
  #editor.open.scene-focus .scene-editor.active { display: block; }
  #editor.open.scene-focus .panes { grid-auto-rows: 1fr; }
  #editor.open.scene-focus .author-body { padding: 14px; }
  .scene-heading h3 { font-size: 18px; }
}

/* Script surface: paragraphs carry the scene; controls sit at its edges. */
.scene-storyboard.group { border: 1px solid var(--line); background: var(--panel-2); }
.scene-storyboard > .block-title { padding-left: 14px; padding-right: 14px; }
.scene-beat.card { background: transparent; padding: 0 12px; }
.scene-beat.card.expanded { background: var(--panel); }
.scene-beat.beat-held { margin-left: 0; border-left: 0; }
.scene-beat.card + .scene-beat.card { margin-top: 0; }
.scene-beat.card.beat-held { margin-top: 0; border-top-style: dashed; }
.beat-heading { padding: 8px 0 4px; gap: 8px; }
.beat-toggle { padding: 6px 0; }
.scene-beat.expanded .beat-summary { display: none; }
.scene-beat.expanded .beat-chevron { grid-row: 1; }
.scene-beat.beat-held .beat-name { font-size: 12px; color: var(--dim); font-weight: 550; }
.beat-settings-toggle { font-size: 11px; color: var(--dim); padding: 3px 8px; }
.beat-content, #editor.docked:not(.open) .beat-content { padding: 4px 6px 14px 20px; }
.beat-content > .card-field { margin-bottom: 12px; }
.beat-content .card-field > label { font-size: 11.5px; font-weight: 550; color: var(--dim); margin-bottom: 4px; }
.beat-content .card-field textarea { min-height: 44px; padding: 7px 9px; background: var(--field);
  border: 1px solid var(--line); border-radius: 4px; font-size: 13.5px; line-height: 1.65; }
.beat-content .card-field textarea:hover { background: var(--field); border-color: var(--line-2); }
.beat-content .card-field textarea:focus { background: var(--field); border-color: var(--accent); box-shadow: var(--sr-focus); outline: none; }
.beat-content .card-field[hidden], .beat-settings[hidden], .scene-additions button[hidden] { display: none; }
.beat-settings { padding: 12px; margin: 4px 0 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; }
.beat-settings > .card-head { flex-wrap: wrap; gap: 6px; padding: 0 0 10px; }
.beat-settings > .card-head > .card-n, .beat-settings > .card-head > .len { display: none; }
.beat-settings > .card-head .tiny, .beat-settings > .card-head .pinned { width: 56px; }
.beat-settings .card-field { margin: 0; }
.beat-content .line-block { background: var(--panel-2); border: 1px solid var(--line); border-left: 2px solid var(--accent-line);
  border-radius: 4px; padding: 8px 10px 8px 12px; margin: 8px 0 14px; }
.beat-content .line-block > .card-field { margin-bottom: 4px; }
.beat-content .line-delivery { border: 0; }
.line-delivery > .card-head { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.line-delivery > .card-head > .card-n { display: none; }
.line-delivery > .card-head > select { max-width: 100%; }
.beat-content .line-delivery .card-field textarea { min-height: 38px; }
.scene-additions { margin-top: 6px; color: var(--dim); }
.scene-additions > summary { cursor: pointer; list-style: none; font-size: 11.5px; padding: 6px 0; width: fit-content; font-weight: 500; }
.scene-additions > summary:hover, .scene-additions[open] > summary { color: var(--accent); }
.scene-additions > button, .scene-additions .line-add button { color: var(--dim); padding: 4px 8px; font-size: 11.5px; }
.scene-additions > .line-add { display: inline-block; margin: 0; }
.camera-tools > summary, .line-delivery > summary { color: var(--dim); font-size: 11.5px; }
#editor.docked:not(.open) .scene-beat.expanded .beat-chevron { grid-row: 1 / 3; }
#editor.docked:not(.open) .beat-content .card-field textarea { font-size: 13px; }
@media (max-width: 760px) {
  .beat-content { padding-left: 12px; }
  .beat-toggle { grid-template-columns: 1fr 14px; }
  .beat-time { grid-column: 1; grid-row: 2; }
  .beat-summary { grid-column: 1; grid-row: 3; }
  .beat-chevron, .scene-beat.expanded .beat-chevron { grid-column: 2; grid-row: 1 / 3; }
}

/* -- Full-Screen Take Compare -------------------------------------------- */

#compare-modal {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.96);
  backdrop-filter: blur(12px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  user-select: none;
}
#compare-modal[hidden] {
  display: none;
}

.compare-sheet {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.compare-head {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.compare-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.compare-title-group h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.compare-source-badge {
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--mono);
}
.compare-count-badge {
  font-size: 11px;
  color: var(--dim);
  background: var(--panel-3);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--mono);
}

.compare-mode-switch {
  display: flex;
  background: var(--panel-2);
  border-radius: 5px;
  padding: 2px;
  gap: 2px;
}
.compare-mode-switch button {
  background: transparent;
  border: 0;
  color: var(--dim);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.1s, color 0.1s;
}
.compare-mode-switch button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}
.compare-mode-switch button.active {
  background: var(--panel-3);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.compare-ab-selectors {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmp-take-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
}
.cmp-take-label.label-a { color: var(--accent); }
.cmp-take-label.label-b { color: var(--sr-warn); }
.cmp-take-label select {
  font-size: 11px;
  padding: 3px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: 4px;
  max-width: 140px;
}

.compare-roi-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
#cmp-roi-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

.compare-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Stage Area */
.compare-stage-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stage);
  overflow: hidden;
  padding: 10px;
}

.compare-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
}

/* Swiper */
.compare-swiper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmp-video-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 0.12s ease-out;
}

.cmp-video-layer video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.cmp-layer-b {
  clip-path: inset(0 0 0 50%);
}

.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  left: 50%;
  z-index: 15;
  cursor: ew-resize;
  box-shadow: 0 0 10px var(--accent-line);
  touch-action: none;
}
.compare-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  right: -8px;
}
.compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.8);
  cursor: ew-resize;
  user-select: none;
}

/* Floating take badges */
.cmp-badge {
  position: absolute;
  top: 14px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(14, 16, 21, 0.82);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  font-size: 11.5px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.cmp-badge-a { left: 14px; border-left: 3px solid var(--accent); }
.cmp-badge-b { right: 14px; border-right: 3px solid var(--sr-warn); }
.cmp-tag {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cmp-badge-a .cmp-tag { color: var(--accent); }
.cmp-badge-b .cmp-tag { color: var(--sr-warn); }
.cmp-name {
  font-family: var(--mono);
  color: var(--ink);
}
.cmp-use-btn {
  padding: 3px 8px;
  font-size: 11px;
}
.cmp-use-btn.in-edit {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

/* Side-by-Side Grid */
.compare-grid {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 12px;
  padding: 8px;
  box-sizing: border-box;
}
.compare-grid[hidden] { display: none; }
.compare-grid.n2 { grid-template-columns: 1fr 1fr; }
.compare-grid.n3 { grid-template-columns: 1fr 1fr 1fr; }
.compare-grid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.cmp-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cmp-card-video-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 0.12s ease-out;
}
.cmp-card-video-wrap video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cmp-card-foot {
  flex: 0 0 auto;
  padding: 6px 10px;
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--mono);
}

/* Difference / Blend */
.compare-diff {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.compare-diff[hidden] { display: none; }
.cmp-diff-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 0.12s ease-out;
}
.cmp-diff-stage video {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#cmp-diff-vid-b {
  mix-blend-mode: difference;
}
.cmp-diff-controls {
  flex: 0 0 auto;
  padding: 8px 16px;
  background: rgba(18, 20, 26, 0.9);
  border-radius: 6px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cmp-diff-hint {
  font-size: 11px;
  color: var(--dim);
}

/* ROI / Detail Box Layer */
.compare-roi-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  cursor: crosshair;
  background: rgba(0, 0, 0, 0.25);
}
.compare-roi-layer[hidden] { display: none; }
.compare-roi-marquee {
  position: absolute;
  border: 2px dashed var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  border-radius: 2px;
}
.compare-roi-marquee[hidden] { display: none; }
.compare-roi-prompt {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 16, 21, 0.9);
  border: 1px solid var(--accent);
  color: var(--ink);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
}

/* Mini-Map / Picture-in-Picture Navigator */
.compare-minimap {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 25;
  background: rgba(14, 16, 22, 0.9);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compare-minimap[hidden] { display: none; }
.cmp-minimap-thumb-wrap {
  position: relative;
  width: 160px;
  height: 90px;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}
#cmp-minimap-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.cmp-minimap-roi {
  position: absolute;
  border: 1.5px solid var(--accent);
  background: var(--accent-dim);
  cursor: grab;
  border-radius: 2px;
  box-sizing: border-box;
}
.cmp-minimap-roi:active {
  cursor: grabbing;
}
.cmp-minimap-hint {
  font-size: 9.5px;
  color: var(--faint);
  text-align: center;
}

/* Transport Bar */
.compare-foot {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 16px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
}

.compare-transport-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmp-time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  min-width: 110px;
}
.cmp-frame {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
}

.compare-scrub-wrap {
  flex: 1 1 auto;
  min-width: 100px;
  position: relative;
  display: flex;
  align-items: center;
}
#cmp-scrub {
  width: 100%;
  cursor: pointer;
  accent-color: var(--accent);
  height: 6px;
}
.cmp-trim-track {
  position: absolute;
  height: 3px;
  background: var(--accent);
  opacity: 0.35;
  pointer-events: none;
  border-radius: 2px;
}

.compare-transport-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmp-speed-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--dim);
}
.cmp-speed-label select {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: 3px;
}

[hidden] {
  display: none !important;
}