/* BODHI Dashboard · dynboard.css · 动态分镜（切分预览器 + 视频格 + 资产页 tab）
   配色沿用 --sb-* 调色板（scene-board.css 里声明的同一套 ink/gold），--dyn- 只加自己的量。 */
:root {
  --dyn-gold: rgb(var(--gold-500));
  --dyn-cut: #e0553f;        /* 切点=红，与金色的段落条明确区分 */
  --dyn-play: #3b82f6;       /* 播放头=蓝 */
}

/* ── 切分预览器壳 ─────────────────────────────────────────── */
.dyn-card {
  width: min(1400px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow: auto;
}
.dyn-meta {
  font-weight: 400;
  font-size: .68rem;
  color: rgb(var(--ink-400));
  margin-left: .55rem;
}
.dyn-note {
  font-size: .7rem;
  padding: .35rem .6rem;
  border-radius: .4rem;
  background: rgb(234 179 8 / .12);
  color: #92610a;
}
.dark .dyn-note { color: #e3b341; }

.dyn-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .dyn-main { grid-template-columns: minmax(0, 1fr); }
}
.dyn-left, .dyn-right { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }

.dyn-video {
  width: 100%;
  max-height: 42vh;
  background: #000;
  border-radius: .5rem;
  display: block;
}

/* ── 工具行 ───────────────────────────────────────────────── */
.dyn-tools { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.dyn-btn {
  font-size: .72rem;
  font-weight: 500;
  padding: .3rem .6rem;
  border-radius: .4rem;
  border: 1px solid transparent;
  background: rgb(var(--ink-100));
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.dyn-btn:hover { background: rgb(var(--ink-200)); }
.dark .dyn-btn { background: rgb(var(--ink-800)); }
.dark .dyn-btn:hover { background: rgb(var(--ink-700)); }
.dyn-btn:disabled { opacity: .45; cursor: not-allowed; }
.dyn-btn-go { background: var(--dyn-gold); color: #fff; font-weight: 600; }
.dyn-btn-go:hover { background: #96712f; }
.dark .dyn-btn-go { background: var(--dyn-gold); color: #fff; }
.dyn-btn-add { background: rgb(16 185 129 / .16); color: #047857; font-weight: 600; }
.dark .dyn-btn-add { color: #6ee7b7; }
.dyn-btn-danger { color: #b4402c; }
.dark .dyn-btn-danger { color: #f0836f; }
/* 挑源视频弹窗的筛选下拉（来源：动态分镜 / 正式镜头 / 全部 · 场次） */
.dyn-select {
  font-size: .72rem;
  padding: .28rem .5rem;
  border-radius: .4rem;
  border: 1px solid rgb(var(--ink-200));
  background: rgb(var(--ink-100));
  color: inherit;
  cursor: pointer;
}
.dark .dyn-select { background: rgb(var(--ink-800)); border-color: rgb(var(--ink-700)); }
.dyn-frame-label {
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--ink-500));
  padding: 0 .35rem;
}
.dyn-status { font-size: .7rem; color: rgb(var(--ink-500)); }
.dyn-count { font-size: .7rem; color: rgb(var(--ink-400)); font-variant-numeric: tabular-nums; }

/* ── 轨道 ─────────────────────────────────────────────────── */
.dyn-track-wrap { position: relative; padding: .15rem 0 1.1rem; }
.dyn-track {
  position: relative;
  height: 34px;
  border-radius: .35rem;
  overflow: hidden;
  background: rgb(var(--ink-200));
}
.dark .dyn-track { background: rgb(var(--ink-800)); }
.dyn-seg {
  position: absolute;
  top: 0; bottom: 0;
  background: rgb(var(--gold-500) / .38);
  border-right: 1px solid rgba(255, 255, 255, .5);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dyn-seg-alt { background: rgb(var(--gold-500) / .22); }
.dyn-seg:hover { background: rgb(var(--gold-500) / .55); }
.dyn-seg-n {
  font-size: .6rem;
  font-weight: 700;
  color: rgb(var(--ink-700));
  pointer-events: none;
}
.dark .dyn-seg-n { color: rgb(var(--ink-100)); }
/* 手柄层：盖在轨道上，自身透明；只有手柄本体吃事件 */
.dyn-track-body { position: absolute; inset: .15rem 0 1.1rem; }
.dyn-cut {
  position: absolute;
  top: -4px; bottom: -12px;
  width: 13px;
  transform: translateX(-50%);
  cursor: col-resize;
  display: flex; flex-direction: column; align-items: center;
}
.dyn-cut::before {
  content: '';
  position: absolute;
  top: 0; bottom: 14px;
  left: 50%; transform: translateX(-50%);
  width: 2px;
  background: var(--dyn-cut);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
}
.dyn-cut.is-sel::before { width: 4px; box-shadow: 0 0 0 1px #fff, 0 0 6px var(--dyn-cut); }
.dyn-cut-n {
  position: absolute;
  bottom: 0;
  font-size: .58rem;
  font-weight: 700;
  color: var(--dyn-cut);
  font-variant-numeric: tabular-nums;
}
.dyn-cut.is-sel .dyn-cut-n { background: var(--dyn-cut); color: #fff; border-radius: .2rem; padding: 0 .2rem; }
.dyn-playhead {
  position: absolute;
  top: -4px; bottom: 12px;
  width: 2px;
  background: var(--dyn-play);
  pointer-events: none;
  box-shadow: 0 0 4px var(--dyn-play);
}

/* ── 帧对照（本功能的精度担保）───────────────────────────── */
.dyn-cmp {
  border: 1px solid rgb(var(--ink-200));
  border-radius: .5rem;
  padding: .55rem;
  min-height: 200px;
}
.dark .dyn-cmp { border-color: rgb(var(--ink-700)); }
.dyn-cmp-empty { font-size: .72rem; color: rgb(var(--ink-500)); line-height: 1.6; }
.dyn-cmp-empty-sub { font-size: .66rem; color: rgb(var(--ink-400)); margin-top: .3rem; }
.dyn-cmp-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .45rem; }
.dyn-cmp-title { font-size: .75rem; font-weight: 600; }
.dyn-cmp-sub { font-size: .66rem; color: rgb(var(--ink-400)); }
.dyn-cmp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.dyn-cmp-pane { min-width: 0; }
.dyn-cmp-tag {
  display: flex; align-items: baseline; gap: .3rem;
  font-size: .64rem;
  font-weight: 600;
  margin-bottom: .2rem;
}
.dyn-cmp-before .dyn-cmp-tag { color: rgb(var(--ink-500)); }
.dyn-cmp-after .dyn-cmp-tag { color: var(--dyn-cut); }
.dyn-cmp-fno { font-weight: 400; font-variant-numeric: tabular-nums; color: rgb(var(--ink-400)); }
.dyn-cmp-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border-radius: .35rem;
}
.dyn-cmp-after .dyn-cmp-img { outline: 2px solid var(--dyn-cut); outline-offset: -2px; }
.dyn-cmp-err {
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem;
  color: rgb(var(--ink-400));
  background: rgb(var(--ink-100));
  border-radius: .35rem;
}
.dyn-cmp-hint { font-size: .65rem; color: rgb(var(--ink-400)); margin-top: .4rem; line-height: 1.5; }

/* ── 结果段卡片带 ─────────────────────────────────────────── */
.dyn-striphead {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 600;
  color: rgb(var(--ink-600));
}
.dark .dyn-striphead { color: rgb(var(--ink-300)); }
.dyn-strip {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: .2rem .1rem .45rem;
}
.dyn-scard {
  position: relative;
  flex: 0 0 auto;
  width: 148px;
  border-radius: .4rem;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: rgb(var(--ink-100));
}
.dark .dyn-scard { background: rgb(var(--ink-800)); }
.dyn-scard.is-sel { border-color: var(--dyn-cut); }
.dyn-scard:hover { border-color: var(--dyn-gold); }
.dyn-scard-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.dyn-scard-n {
  position: absolute; top: 0; left: 0;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: .62rem; font-weight: 700;
  padding: .05rem .3rem;
}
.dyn-scard-meta {
  display: flex; justify-content: space-between; gap: .3rem;
  font-size: .6rem;
  padding: .18rem .3rem;
  color: rgb(var(--ink-500));
  font-variant-numeric: tabular-nums;
}
.dyn-scard-fr { color: rgb(var(--ink-400)); }

.dyn-foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dyn-name {
  font-size: .72rem;
  padding: .25rem .45rem;
  border-radius: .35rem;
  border: 1px solid rgb(var(--ink-300));
  background: #fff;
  min-width: 200px;
}
.dark .dyn-name { background: rgb(var(--ink-900)); border-color: rgb(var(--ink-700)); }

.dyn-spin {
  width: 22px; height: 22px;
  margin: 0 auto .5rem;
  border: 2px solid rgb(var(--ink-300));
  border-top-color: var(--dyn-gold);
  border-radius: 50%;
  animation: dyn-spin .8s linear infinite;
}
@keyframes dyn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dyn-spin { animation-duration: 3s; } }

/* ── 视频格 / 视频参考的悬停播放 ─────────────────────────── */
.dyn-vthumb {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.dyn-vthumb video { max-width: 100%; max-height: 100%; display: block; }
.dyn-vbadge {
  position: absolute; left: .25rem; bottom: .25rem;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: .58rem;
  font-weight: 600;
  padding: .05rem .28rem;
  border-radius: .22rem;
  pointer-events: none;
  letter-spacing: .02em;
}
.dyn-vbadge-r { left: auto; right: .25rem; }
.dyn-vthumb:hover .dyn-vbadge { opacity: .35; }

/* ── 资产页「动态分镜」tab ───────────────────────────────── */
.dyn-group {
  border: 1px solid rgb(var(--ink-200));
  border-radius: .55rem;
  padding: .7rem .8rem;
}
.dark .dyn-group { border-color: rgb(var(--ink-700)); }
.dyn-group-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.dyn-group-title { font-size: .85rem; font-weight: 600; }
.dyn-group-sub { font-size: .68rem; color: rgb(var(--ink-400)); }
.dyn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .55rem;
}
.dyn-tile {
  border-radius: .45rem;
  overflow: hidden;
  background: rgb(var(--ink-100));
  border: 1px solid rgb(var(--ink-200));
}
.dark .dyn-tile { background: rgb(var(--ink-800)); border-color: rgb(var(--ink-700)); }
.dyn-tile-media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.dyn-tile-media video, .dyn-tile-media img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.dyn-tile-foot {
  display: flex; align-items: center; gap: .35rem;
  padding: .28rem .4rem;
  font-size: .64rem;
  color: rgb(var(--ink-500));
  font-variant-numeric: tabular-nums;
}
.dyn-tile-n { font-weight: 700; color: rgb(var(--ink-700)); }
.dark .dyn-tile-n { color: rgb(var(--ink-200)); }

/* ── 动态分镜栏「从分镜新建」（2026-09-07）────────────────────────────
   勾几个分镜 → 建一条硬切数＝分镜数-1 的导演工作镜。行是 label，整行可点。 */
.dyn-plan-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
/* 拍行列表现在铺在「新建导演镜」modal 里（features/plan-coverage.js），
   栏里只剩一颗按钮——列表最高 46vh，长场次靠自身滚动，不撑破弹窗。 */
.dyn-plan-list { max-height: 46vh; overflow-y: auto; }
.dyn-plan-tools {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .4rem .5rem; margin-bottom: .4rem;
  border: 1px solid var(--b-line); border-radius: .5rem; background: var(--b-surface-2);
}
.dyn-plan-row {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .18rem .5rem; border-radius: .35rem;
  font-size: .8rem; line-height: 1.5; cursor: pointer;
}
.dyn-plan-row:hover { background: var(--b-surface-2); }
.dyn-plan-row.is-picked { background: color-mix(in srgb, var(--b-gold) 14%, transparent); }
.dyn-plan-row input[type=checkbox] { align-self: center; flex: 0 0 auto; }
.dyn-plan-id {
  flex: 0 0 auto; min-width: 2.4em; font-variant-numeric: tabular-nums;
  color: var(--b-text-2); font-weight: 600;
}
.dyn-plan-meta { flex: 0 0 auto; min-width: 7em; color: var(--b-text-dim); font-size: .74rem; }
.dyn-plan-act { flex: 1 1 auto; min-width: 0; color: var(--b-text); }
.dyn-plan-cov, .dyn-plan-dx { flex: 0 0 auto; font-size: .72rem; color: var(--b-text-dim); }