/* Video Studio — 素材包查看器（内嵌于 index.html「素材整理 · 素材包」）。Requires tokens.css + components.css.
   规则限定在 .dv-root 内，不影响流水线页面。 */
.dv-root button, .dv-root select, .dv-root input { font-family: inherit; }
.dv-root code, .dv-mono { font-family: var(--font-mono); font-size: .92em; }
.dv-root .muted { color: var(--ink-400); }
.dv-good { color: var(--st-done); font-weight: var(--fw-medium); }
.dv-bad { color: var(--st-redo); font-weight: var(--fw-medium); }
.dv-missing { color: var(--st-redo); font-style: italic; }
.dv-root a:not(.btn) { color: var(--orange-600); }

/* ---------- in-page host ---------- */
.dv-root { position: relative; margin-top: var(--sp-4); border-top: var(--line); padding-top: var(--sp-4); }
.dv-root[hidden] { display: none; }
.dv-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-bottom: var(--sp-3); }
.dv-source { flex: 1; min-width: 160px; font-size: var(--fs-sm); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-source b { color: var(--ink-900); font-family: var(--font-mono); }
.dv-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dv-actions label.btn { cursor: pointer; }

/* ---------- empty / drop ---------- */
.dv-drop { margin: 0 auto; max-width: 720px; text-align: center; border: 2px dashed var(--ink-200); border-radius: var(--r-lg); background: var(--surface); padding: 36px 32px; }
.dv-drop__icon { font-size: 40px; }
.dv-drop h3 { font: var(--fw-bold) 20px/1.3 var(--font-serif); margin: 10px 0 8px; }
.dv-drop p { color: var(--ink-500); margin: 0; }
.dv-dragmask { position: absolute; inset: 0; z-index: 20; background: rgba(22, 21, 20, .55); display: none; align-items: center; justify-content: center; pointer-events: none; border-radius: var(--r-lg); }
.dv-dragmask div { border: 3px dashed var(--orange-300); color: #fff; font-size: 20px; padding: 32px 48px; border-radius: var(--r-lg); background: rgba(22, 21, 20, .6); }
.dv-dragmask--on { display: flex; }

/* ---------- layout ---------- */
.dv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); align-items: start; }
.dv-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dv-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: var(--sp-4); max-height: calc(100vh - 92px); min-width: 0; }
.dv-h3 { font-size: var(--fs-sm); color: var(--ink-500); font-weight: var(--fw-bold); letter-spacing: .04em; margin: var(--sp-3) 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.dv-h3:first-child { margin-top: 0; }
.dv-h4 { font-size: var(--fs-sm); color: var(--ink-500); font-weight: var(--fw-bold); margin: var(--sp-3) 0 6px; letter-spacing: .03em; }
.dv-h4:first-child { margin-top: 0; }
.dv-para { margin: 0; }

/* key-value rows */
.dv-kv { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-2); padding: 3px 4px; border-radius: var(--r-sm); font-size: var(--fs-md); }
.dv-kv__k { color: var(--ink-400); font-size: var(--fs-sm); padding-top: 1px; }
.dv-kv__v { min-width: 0; overflow-wrap: anywhere; }
.dv-kv--warn .dv-kv__v { color: var(--orange-600); }
.dv-grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }

/* ---------- hero ---------- */
.dv-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: var(--sp-5); }
.dv-hero__eyebrow { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-500); }
.dv-hero__eyebrow code { color: var(--orange-600); font-weight: var(--fw-bold); }
.dv-hero__title { font: var(--fw-bold) var(--fs-2xl)/1.25 var(--font-serif); margin: 6px 0 4px; letter-spacing: .02em; }
.dv-hero__logline { margin: 0 0 var(--sp-3); color: var(--ink-700); }
.dv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.dv-stat { background: var(--surface-2); border-radius: var(--r-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv-stat span:first-child { font-size: var(--fs-xs); color: var(--ink-400); }
.dv-stat b { font-size: var(--fs-base); white-space: nowrap; letter-spacing: -.01em; }
.dv-stat { padding: 8px 8px; }
.dv-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }
.dv-meta .dv-kv { grid-template-columns: 40px minmax(0, 1fr); }
.dv-meta .dv-kv__v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); }
.dv-note { margin-top: var(--sp-2); background: var(--orange-100); border-radius: var(--r-md); padding: 8px 12px; font-size: var(--fs-md); }
.dv-note b { margin-right: 8px; color: var(--orange-600); }
.dv-note--quiet { background: var(--surface-2); }
.dv-note--quiet b { color: var(--ink-500); }
.dv-hero__side { border-left: var(--line); padding-left: var(--sp-5); min-width: 0; }
.dv-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dv-part { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding: 3px 4px; border-radius: var(--r-sm); }
.dv-part__who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dv-part__name { font-weight: var(--fw-bold); white-space: nowrap; }
.dv-part__none { color: var(--orange-600); font-size: var(--fs-sm); }
.dv-part__files { font-size: var(--fs-xs); color: var(--ink-400); white-space: nowrap; }
.dv-ava { width: 26px; height: 26px; border-radius: 50%; background: var(--ink-300); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-bold); }

/* ---------- timeline ---------- */
.dv-legend { font-size: var(--fs-xs); color: var(--ink-500); gap: var(--sp-3); }
.dv-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.dv-sw--done { background: var(--st-done); } .dv-sw--queued { background: var(--st-queued); } .dv-sw--needs_info { background: var(--st-redo); }
.dv-tl { display: flex; gap: 3px; }
.dv-tl__seg { position: relative; min-width: 0; text-align: left; border: 0; cursor: pointer; border-radius: var(--r-md); padding: 8px 10px 22px; color: #fff; display: flex; flex-direction: column; gap: 1px; font: inherit; background: var(--st-queued); transition: transform .12s var(--ease), box-shadow .12s; }
.dv-tl__seg:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.dv-tl__seg--done { background: linear-gradient(135deg, #2F8A5B, #3E9B7A); }
.dv-tl__seg--needs_info { background: linear-gradient(135deg, #C23B3B, #D9634F); }
.dv-tl__seg--queued { background: linear-gradient(135deg, #6B7A90, #8494AA); }
.dv-tl__id { font: var(--fw-bold) var(--fs-md) var(--font-mono); display: flex; gap: 4px; align-items: center; }
.dv-tl__title { font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-tl__dur { font-size: var(--fs-xs); opacity: .85; font-family: var(--font-mono); }
.dv-tl__lines { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 6px; background: rgba(255, 255, 255, .18); border-radius: 3px; }
.dv-tl__line { position: absolute; top: 0; bottom: 0; background: #fff; border-radius: 3px; opacity: .9; }
.dv-tl__line--caption { background: var(--gold-100); opacity: .7; }
.dv-tl__line--narration { background: var(--orange-100); }
.dv-tl__axis { position: relative; height: 18px; margin-top: 4px; font: var(--fs-xs) var(--font-mono); color: var(--ink-400); }
.dv-tl__axis span { position: absolute; transform: translateX(-50%); }
.dv-tl__axis span:first-child { transform: none; }
.dv-tl__sum { font-size: var(--fs-sm); color: var(--ink-500); margin-top: 4px; }

/* ---------- style + bgm ---------- */
.dv-style__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } /* 内嵌于主列（较窄），始终单列 */
.dv-palette { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.dv-swatch { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 4px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.dv-swatch i { grid-row: span 3; width: 28px; height: 28px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.dv-swatch code { color: var(--ink-500); font-size: var(--fs-xs); }
.dv-swatch small { color: var(--ink-400); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-srefs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.dv-chars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
.dv-char { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-2); padding: 6px; border: var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); }
.dv-char p { margin: 2px 0 0; color: var(--ink-700); }
.dv-char .dv-mono { color: var(--ink-400); font-size: var(--fs-xs); }
.dv-char__head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.dv-char__head code { font-size: var(--fs-xs); color: var(--ink-400); }
.dv-char .dv-thumb figcaption { display: none; }
.dv-bgm { display: flex; flex-direction: column; }
.dv-moodwrap { margin-top: 6px; padding: 3px 4px; border-radius: var(--r-sm); }
.dv-mood { width: 100%; height: auto; display: block; margin-top: 4px; }
.dv-mood__axis { stroke: var(--ink-200); }
.dv-mood__area { fill: rgba(232, 118, 43, .12); }
.dv-mood__line { fill: none; stroke: var(--orange-500); stroke-width: 2; }
.dv-mood circle { fill: #fff; stroke: var(--orange-500); stroke-width: 2; }
.dv-mood text { font-size: 11px; fill: var(--ink-700); }
.dv-mood .dv-mood__t { fill: var(--ink-400); font-family: var(--font-mono); font-size: 10px; }

/* thumbs */
.dv-thumb { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); border: var(--line); min-width: 0; }
.dv-thumb img { display: block; width: 100%; height: 100%; max-height: 220px; object-fit: contain; background: var(--ink-100); }
.dv-thumb a { display: block; }
.dv-thumb figcaption { padding: 4px 8px; font-size: var(--fs-xs); display: flex; flex-direction: column; gap: 1px; }
.dv-thumb figcaption code { color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-thumb__missing { height: 120px; display: flex; align-items: center; justify-content: center; color: var(--st-redo); background: var(--st-redo-bg); font-size: var(--fs-sm); }

/* ---------- segments ---------- */
.dv-segs { display: flex; flex-direction: column; gap: var(--sp-3); }
.dv-seg { border: var(--line); border-radius: var(--r-lg); background: var(--surface); border-left: 4px solid var(--st-queued); }
.dv-seg--done { border-left-color: var(--st-done); }
.dv-seg--needs_info { border-left-color: var(--st-redo); }
.dv-seg__sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: 10px 14px; user-select: none; }
.dv-seg__sum::-webkit-details-marker { display: none; }
.dv-seg__id { font: var(--fw-bold) var(--fs-lg) var(--font-mono); color: var(--orange-600); padding: 0 3px; border-radius: 4px; }
.dv-seg__title { font: var(--fw-bold) var(--fs-lg) var(--font-serif); padding: 0 3px; border-radius: 4px; }
.dv-seg__time { font: var(--fs-sm) var(--font-mono); color: var(--ink-500); }
.dv-seg__time > span { padding: 0 2px; border-radius: 4px; }
.dv-seg__idx, .dv-seg__att { font-size: var(--fs-xs); }
.dv-seg__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.dv-seg__chev { color: var(--ink-400); transition: transform .15s; }
.dv-seg:not([open]) .dv-seg__chev { transform: rotate(-90deg); }
.dv-seg__body { padding: 0 14px 14px; border-top: var(--line); }
.dv-seg__cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, .8fr); gap: var(--sp-4); padding-top: var(--sp-3); }
.dv-seg__col { min-width: 0; }
.dv-seg__lines { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px dashed var(--ink-100); }
.dv-enum { font-size: 10px; color: var(--ink-400); }
.dv-needs { margin-top: var(--sp-3); background: var(--st-redo-bg); color: var(--st-redo); border-radius: var(--r-md); padding: 8px 12px; font-size: var(--fs-md); }
.dv-needs ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-800); }
.dv-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dv-tbl th, .dv-tbl td { text-align: left; padding: 5px 6px; border-bottom: var(--line); vertical-align: top; }
.dv-tbl th { font-size: var(--fs-xs); color: var(--ink-400); font-weight: var(--fw-medium); white-space: nowrap; }
.dv-tbl td code { font-size: var(--fs-xs); }
.dv-num { font-family: var(--font-mono); white-space: nowrap; text-align: right !important; }
.dv-line-text { min-width: 120px; }
.dv-kind { font-size: var(--fs-xs); padding: 1px 6px; border-radius: var(--r-pill); background: var(--ink-100); white-space: nowrap; }
.dv-kind--narration { background: var(--orange-100); color: var(--orange-600); }
.dv-kind--caption { background: var(--gold-100); color: #8A6A2B; }
.dv-pblock { border: var(--line); border-radius: var(--r-md); padding: 8px 10px; margin-bottom: var(--sp-2); background: var(--surface); }
.dv-pblock__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 4px; font-size: var(--fs-sm); }
.dv-prompt { margin: 0; padding: 6px 8px; background: var(--surface-2); border-radius: var(--r-sm); font-size: var(--fs-md); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.dv-prompt--neg { background: #F7F0EE; color: #7A4B45; }
.dv-inherit { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--ink-400); }
.dv-params { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-500); align-items: center; }
.dv-params > span { padding: 0 2px; border-radius: 4px; }
.dv-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-ref { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink-100); color: var(--ink-700); text-decoration: none; white-space: nowrap; }
.dv-ref:hover { background: var(--orange-100); color: var(--orange-600); }
.dv-kv__v .dv-ref { margin-right: 4px; }
.dv-sfx { margin: 0; padding: 0; list-style: none; }
.dv-sfx li { padding: 0 2px; border-radius: 4px; }
.dv-imgs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
.dv-imgs .dv-thumb img { aspect-ratio: 9 / 16; max-height: 240px; }
.dv-segfiles, .dv-prov { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); display: flex; flex-direction: column; gap: 3px; }
.dv-segfiles li, .dv-prov li { padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.dv-fok { display: inline-block; width: 1.2em; font-weight: var(--fw-bold); }
.dv-fok--ok { color: var(--st-done); } .dv-fok--bad { color: var(--st-redo); }
.dv-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: var(--fw-bold) 11px/1 var(--font-sans); color: #fff; }
.dv-count--err { background: var(--st-redo); }
.dv-count--warn { background: #C9A227; }
.dv-tl__seg .dv-count { box-shadow: 0 0 0 1.5px #fff; }

/* files + raw */
.dv-tblwrap { overflow-x: auto; }
.dv-files td:first-child code { font-size: var(--fs-sm); }
.dv-hash { color: var(--ink-400); }
.dv-unlisted { background: var(--st-redo-bg); }
.dv-raw summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); }
.dv-raw summary::-webkit-details-marker { display: none; }
.dv-raw summary .btn { margin-left: auto; }
.dv-pre { margin: var(--sp-3) 0 0; background: var(--ink-900); color: var(--ink-100); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font: var(--fs-sm)/1.55 var(--font-mono); max-height: 560px; overflow: auto; white-space: pre; }

/* ---------- side: issues + nav ---------- */
.dv-issues { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dv-verdict { border-radius: var(--r-md); padding: 10px 12px; font-weight: var(--fw-bold); font-size: var(--fs-lg); display: flex; align-items: baseline; gap: var(--sp-2); }
.dv-verdict small { font-weight: var(--fw-regular); font-size: var(--fs-sm); }
.dv-verdict--ok { background: var(--st-done-bg); color: var(--st-done); }
.dv-verdict--bad { background: var(--st-redo-bg); color: var(--st-redo); }
.dv-issue-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; }
.dv-issue { width: 100%; text-align: left; border: 1px solid var(--ink-100); background: var(--surface); border-left: 3px solid var(--st-redo); border-radius: var(--r-sm); padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; font: inherit; }
.dv-issue:hover { background: var(--surface-2); }
.dv-issue--warning { border-left-color: #C9A227; }
.dv-issue__code { font: var(--fw-bold) var(--fs-xs) var(--font-mono); color: var(--st-redo); }
.dv-issue--warning .dv-issue__code { color: #9A7A12; }
.dv-issue__path { font: var(--fs-xs) var(--font-mono); color: var(--ink-400); overflow-wrap: anywhere; }
.dv-issue__msg { font-size: var(--fs-sm); color: var(--ink-800); }
.dv-hint, .dv-allgood { font-size: var(--fs-xs); color: var(--ink-400); margin: var(--sp-2) 0 0; }
.dv-nav { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); flex: none; }
.dv-nav a { color: var(--ink-700); text-decoration: none; padding: 3px 8px; border-radius: var(--r-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-nav a:hover { background: var(--orange-100); color: var(--orange-600); }

/* ---------- validation highlight ---------- */
.is-error { outline: 2px solid var(--st-redo) !important; outline-offset: 1px; background-color: var(--st-redo-bg) !important; border-radius: 4px; }
.is-warn { outline: 2px dashed #C9A227; outline-offset: 1px; background-color: #FBF4DC; border-radius: 4px; }
.dv-tl__seg.is-error, .dv-tl__seg.is-warn { background-color: inherit !important; }
details.dv-seg.is-error, details.dv-seg.is-warn { background-color: var(--surface) !important; }
.is-flash { animation: dv-flash 2s var(--ease); }
@keyframes dv-flash { 0%, 40% { box-shadow: 0 0 0 6px rgba(232, 118, 43, .45); } 100% { box-shadow: 0 0 0 0 rgba(232, 118, 43, 0); } }

/* dialog + toast */
.dv-dialog { position: fixed; inset: 0; z-index: 90; background: rgba(22, 21, 20, .5); display: none; align-items: center; justify-content: center; padding: 40px; }
.dv-dialog--open { display: flex; }
.dv-dialog__box { background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-4); width: min(900px, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-2); }
.dv-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.dv-dialog .dv-pre { white-space: pre-wrap; flex: 1; max-height: none; }

/* ---------- responsive ---------- */
@media (max-width: 1400px) {
  .dv-seg__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dv-seg__col--media { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--sp-4); }
  .dv-seg__col--media .dv-h4 { grid-row: 1; margin-top: var(--sp-2); }
  .dv-seg__col--media .dv-imgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  .dv-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .dv-hero { grid-template-columns: 1fr; }
  .dv-hero__side { border-left: 0; padding-left: 0; border-top: var(--line); padding-top: var(--sp-3); }
  .dv-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--sp-3); }
  .dv-style__grid { grid-template-columns: 1fr; }
  .dv-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dv-seg__cols { grid-template-columns: 1fr; }
  .dv-seg__col--media { grid-template-columns: 1fr; }
  .dv-seg__col--media .dv-h4 { grid-row: auto; }
  .dv-parts { grid-template-columns: 1fr; }
  .dv-chars { grid-template-columns: 1fr; }
}

/* 1.1.0 待生成清单（每段下面） */
.dv-seg__gen { margin-top: var(--sp-3); }
.dv-gens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.dv-gen { border: var(--line); border-radius: var(--r-md); padding: 8px 10px; background: var(--surface); }