/* finesse · register=product · sub=ai-console · A=graphite-neutral+single-amber(场记胶带)
 * B=system-sans 600/400 + system-mono tabular · C=narrow-nav+resident-topbar+per-screen-body(工作台三栏)
 * D=feedback-only(one breathing dot · band fill-in · in-place swap) · E=调色室与场记胶带
 * SOUL=6 SPECTACLE=2 DENSITY=7 */

/* 各屏布局。token 全部来自 app.css 的 :root */

.needs { color: var(--needs); }
.sm { font-size: 12px; }
.lnk { color: var(--ink-1); text-decoration: underline; text-decoration-color: var(--border-3); text-underline-offset: 3px; }
.lnk:hover { text-decoration-color: var(--ink-2); }
.ic.flip { transform: scaleX(-1); }
.banner.auto { background: var(--auto-soft); color: var(--auto); border-color: var(--auto-line); }
.help.err { color: var(--down); }
.in[aria-invalid="true"] { border-color: var(--down); }
.pick { display: grid; gap: 6px; }
.pick-r { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); cursor: pointer; font-size: 13px; }
.pick-r:hover { border-color: var(--border-3); }
.pick-r:has(input:checked) { border-color: var(--ink-3); background: var(--panel-2); }
.pick-r input { accent-color: var(--ink-2); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.chk input { accent-color: var(--ink-2); }
.swc { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.swc.pass { background: var(--ok); } .swc.fix { background: var(--needs); } .swc.drop { background: var(--ink-4); } .swc.none { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--border-3); }

/* ── 01 总览 ───────────────────────────────── */
.ov > .card { margin-bottom: 16px; }
.ov .card-h .band-legend { margin-right: 2px; }
.ov-dims { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.ov .tl { margin-left: 74px; }
.ov .tl-band::before, .ov .tl-strip::before { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ov .tl-band::before { content: "综合"; }
.ov .tl-strip::before { content: "镜头"; }
.ov-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); align-items: stretch; }
/* 三栏等高撑满首屏：待你看 8 条定高度，另两栏跟着拉齐 */
.ov-cols > .card { display: flex; flex-direction: column; }
.ov-cols > .card > .card-b { flex: 1; display: flex; flex-direction: column; }
/* 短屏：待你看列表在卡片内滚动；标题不折行 */
.ov-cols > .card:first-child > [data-ov-issues] { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ov-cols > .card:first-child > .card-h h2 { flex: none; white-space: nowrap; }
.ov-cols > .card:first-child > .card-h .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-cols > .card:last-child > .card-b,
.ov-cols > .card:nth-child(2) > .card-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ov-iss .row { padding: 4px 16px; min-height: 0; }
.ov-iss .row .m p { line-height: 1.4; }
.ov-iss .row.near .m b { font-weight: 500; color: var(--ink-2); }
.ov-run { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ov-run b { font-weight: 600; }
.ov-run .num { margin-left: auto; }
.ov-log { margin-top: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font-size: 12px; line-height: 1.75; color: var(--ink-2); height: 140px; overflow: hidden; }
.ov-log div, .log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-log span, .log span { color: var(--ink-4); margin-right: 10px; }
.ov-log .warn, .log .warn, .ov-log .needs, .log .needs { color: var(--needs); }
.ov-log .down, .log .down { color: var(--down); }
.ov-log .ok, .log .ok { color: var(--auto); }
.ov-q { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--ink-3); }
.ov-q .btn { margin-left: auto; }
.ov-q b.needs { font-weight: 600; }
.stack, .rv-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--panel-2); }
.stack i, .rv-stack i { display: block; min-width: 0; }
.stack .pass, .rv-stack .pass { background: var(--ok); }
.stack .fix, .rv-stack .fix { background: var(--needs); }
.stack .drop, .rv-stack .drop { background: var(--ink-4); }
.stack .none, .rv-stack .none { background: var(--panel-3); }
.acc-l { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.acc-l dt { font-size: 12px; color: var(--ink-3); }
.acc-l dd { font-size: 18px; font-weight: 600; }
.ov-cost { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.ov-cost-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--ink-3); }
.ov-cost-h b { font-size: 16px; color: var(--ink-1); font-weight: 600; }
.ov-cost-h b.big { font-size: 22px; }
.ov-cost .hint { margin-top: 8px; }

/* ── 02 镜头工作台 ─────────────────────────── */
.sw { display: grid; grid-template-columns: 196px minmax(0, 1fr); height: 100%; min-height: 0; }
.sl { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.sl-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 8px; font-size: 13px; }
.sl-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; }
.sl-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 6px; border-radius: var(--r-sm); }
.sl-row:hover { background: var(--panel); }
.sl-row.on { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--border-2); }
.sl-th { border-radius: 2px; }
.sl-m { min-width: 0; display: grid; gap: 4px; }
.sl-m b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-m b .num { color: var(--ink-3); font-weight: 400; margin-right: 2px; }
.sl-bar { display: flex; align-items: center; gap: 6px; }
.sl-bar i { display: block; width: 32px; height: 4px; border-radius: 1px; background: rgba(var(--needs-rgb), var(--a)); box-shadow: inset 0 0 0 1px var(--border); flex: none; }
.sl-bar i.r { background: var(--auto-soft); } .sl-bar i.p { background: var(--hatch), var(--panel-2); }
.sl-bar i.o { box-shadow: inset 0 2px 0 var(--needs); }
.sl-bar em { font-style: normal; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.sw-main { min-width: 0; overflow-y: auto; padding: 16px 20px 28px; }
.sw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.sw-title h1 { font-size: 18px; font-weight: 600; }
.sw-title h1 .num { color: var(--ink-3); font-weight: 500; margin-right: 4px; }
.sw-title p { display: flex; gap: 12px; font-size: 12px; color: var(--ink-3); margin-top: 2px; flex-wrap: wrap; }
.sw-title p b { color: var(--ink-2); font-weight: 500; }
.sw-tools { display: flex; align-items: center; gap: 6px; }
.cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cmp figure { min-width: 0; }
.cmp figcaption, .vd-pair figcaption { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; white-space: nowrap; min-width: 0; }
.cmp figcaption .cap-r { margin-left: auto; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; }
.fbox { position: relative; border-radius: 3px; overflow: hidden; background: var(--panel-2); aspect-ratio: 2048 / 858; }
.fbox canvas.frame { position: absolute; inset: 0; width: 100%; height: 100%; animation: swapin .16s ease-out; }
@keyframes swapin { from { opacity: .4; } to { opacity: 1; } }
.fbox .diffc, .fbox .wipe { display: none; }
.wipe { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); border-right: 1.5px solid var(--ink-1); }
.wipe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wipe-r { position: absolute; left: 0; right: 0; bottom: 6px; width: 96%; margin: 0 2%; display: none; z-index: 3; }
/* 并排之外的三种方式：右边那格换内容，左边不动，布局不跳 */
.cmp.mode-diff .fb .diffc { display: block; }
.cmp.mode-diff .fb .ov-svg .bx-ref { opacity: .4; }
.cmp.mode-blend .fb .wipe { display: block; clip-path: none; opacity: .5; border: 0; }
.cmp.mode-wipe .fb .wipe { display: block; }
.cmp.mode-wipe .fb .wipe-r { display: block; }
.ov-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.ov-svg .bx-ref { fill: none; stroke: var(--ink-1); stroke-opacity: .7; stroke-width: 1.4; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ov-svg .bx-cur { fill: rgba(var(--needs-rgb), .08); stroke: var(--needs); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ov-svg .bx-arrow { stroke: var(--needs); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ov-svg .bx-lab, .ov-svg .bx-tag { fill: var(--needs); font: 600 25px var(--mono); text-anchor: middle; paint-order: stroke; stroke: var(--page); stroke-width: 6px; }
.ov-svg .bx-tag { text-anchor: start; font-size: 22px; }
.ov-svg .pin { pointer-events: auto; cursor: pointer; }
.ov-svg .pin circle { fill: var(--page); stroke: var(--needs); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ov-svg .pin text { fill: var(--needs); font: 600 22px var(--mono); text-anchor: middle; }
.ov-svg .pin.on circle, .ov-svg .pin:hover circle { fill: var(--needs); }
.ov-svg .pin.on text, .ov-svg .pin:hover text { fill: var(--on-needs); }
.scrub { display: flex; align-items: center; gap: 12px; margin: 10px 0 16px; }
.scrub input { flex: 1; }
.scrub .num { font-size: 13px; color: var(--ink-1); min-width: 72px; text-align: right; }
.sw-low { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.meas .tb td { height: 36px; }
.meas tr.over td:first-child { box-shadow: inset 2px 0 0 var(--needs); }
.thr { position: relative; display: block; height: 6px; background: var(--panel-3); border-radius: 3px; }
.thr i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-3); border-radius: 3px; }
tr.over .thr i { background: var(--needs); }
.thr b { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1.5px; background: var(--ink-2); }
.thr.two i { height: 3px; } .thr.two i.a { background: var(--ink-4); top: 0; bottom: auto; } .thr.two i:not(.a) { top: auto; bottom: 0; background: var(--ink-1); }
.meas-n { padding: 8px 16px 12px; }
.sw-side { display: grid; gap: 12px; }
.row.iss { align-items: flex-start; }
.pin-n { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--mono); color: var(--needs); box-shadow: inset 0 0 0 1.5px var(--needs); }
.row.iss.sel .pin-n { background: var(--needs); color: var(--on-needs); }
.row.iss .m p { white-space: normal; }
.row.cons .t { width: 44px; }
.row.cons.hit .m b { color: var(--needs); }
.sw-act { display: flex; align-items: center; gap: 10px; padding: 10px 12px; justify-content: space-between; }
.sw-tl { margin-bottom: 16px; }

/* ── 03 上下文 ─────────────────────────────── */
.ctx > .card { margin-top: 16px; }
.ctx-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.stackbar { display: flex; height: 12px; gap: 2px; border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.stackbar i { min-width: 2px; }
.stackbar .full { background: var(--auto); }
.stackbar .partial { background: var(--auto-mid); }
.stackbar .summary { background: var(--auto-faint); }
.stackbar .crit { background: var(--hatch-needs), var(--needs-soft); box-shadow: inset 0 0 0 1px var(--needs); }
.stackbar .free { background: var(--panel-2); }
.ctx .tb td { height: 40px; }
.tb tr.crit td { background: var(--needs-soft); }
.ctx-claim { font-size: 14px; line-height: 1.65; margin-bottom: 12px; text-wrap: pretty; }
.ctx-claim b { color: var(--needs); }
.ctx-why .kv dd .ic { vertical-align: -2px; color: var(--ink-3); }
.branch-tree { margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); font-size: 12px; color: var(--ink-2); }
.bt-main { display: flex; align-items: center; gap: 8px; }
.bt-main i { flex: 1; height: 1px; background: var(--border-3); }
.bt-main b { font-family: var(--mono); font-weight: 500; padding: 1px 6px; border-radius: 4px; background: var(--panel-3); }
.bt-br { display: flex; align-items: center; gap: 8px; margin: 2px 0 0 calc(50% - 30px); }
.bt-elbow { width: 18px; height: 16px; border-left: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); border-radius: 0 0 0 6px; margin-top: -10px; }
.ctx-svg { width: 100%; height: auto; display: block; }
.ctx-svg .g { stroke: var(--border); }
.ctx-svg .ax { fill: var(--ink-4); font: 11px var(--mono); }
.ctx-svg .ax.cap { fill: var(--ink-3); }
.ctx-svg .brz { fill: rgba(var(--needs-rgb), .05); }
.ctx-svg .cap75 { stroke: var(--ink-3); stroke-dasharray: 4 4; }
.ctx-svg .raw { fill: none; stroke: var(--ink-4); stroke-dasharray: 2 4; stroke-width: 1.4; }
.ctx-svg .ar { fill: var(--auto-soft); }
.ctx-svg .ln { fill: none; stroke: var(--auto); stroke-width: 1.8; }
.ctx-svg .ev line { stroke: var(--border-3); }
.ctx-svg .ev circle { fill: var(--bg); stroke: var(--auto); stroke-width: 1.5; }
.ctx-svg .ev.crit line { stroke: var(--needs); stroke-dasharray: 3 3; }
.ctx-svg .ev.crit circle { stroke: var(--needs); fill: var(--needs); }
.ctx-svg .now { stroke: var(--ink-1); stroke-width: 1.2; }
.ctx-svg .now-t { fill: var(--ink-1); }
.ctx-band { display: flex; gap: 1px; height: 12px; margin: 4px 1.2% 0 3.8%; }
.ctx-band i { flex: 1; background: rgba(var(--needs-rgb), var(--a)); border-radius: 1px; }
.ctx-band i.r { background: var(--auto-soft); } .ctx-band i.p { background: var(--hatch), var(--panel-2); } .ctx-band i.o { box-shadow: inset 0 2px 0 var(--needs); }
.ctx-leg { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.ctx-leg i { display: inline-block; width: 14px; height: 8px; margin-right: 6px; vertical-align: 0; border-radius: 1px; }
.k-ln { background: var(--auto); height: 2px !important; vertical-align: 3px !important; }
.k-raw { border-top: 1.5px dashed var(--ink-4); height: 0 !important; vertical-align: 3px !important; }
.k-ev { width: 8px !important; border-radius: 50% !important; box-shadow: inset 0 0 0 1.5px var(--auto); }
.k-crit { width: 8px !important; border-radius: 50% !important; background: var(--needs); }
.k-band { background: linear-gradient(90deg, rgba(var(--needs-rgb), .1), rgba(var(--needs-rgb), .8)); }

/* ── 04 约束库 ─────────────────────────────── */
.cs-grid { grid-template-columns: 380px minmax(0, 1fr); align-items: start; }
.cs-detail { padding: 16px 20px 20px; }
.cs-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.cs-head h2 { font-size: 16px; font-weight: 600; }
.cs-head h2 .num { color: var(--ink-3); font-weight: 500; }
.cs-head p { margin-top: 8px; }
.cs-head .act { display: flex; gap: 8px; flex: none; }
.cs-cur { margin-top: 10px; padding: 16px 16px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--border); }
.cs-cur p { font-size: 16px; line-height: 1.7; margin-top: 8px; text-wrap: pretty; }
.cs-edit { margin-top: 12px; }
.cs-diff { margin-top: 16px; }
.cs-diff-h { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.cs-diff-h h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-right: 4px; }
.cs-diff-h select { height: 28px; }
.cs-key { margin-left: auto; display: flex; gap: 10px; }
.cs-d { margin-top: 8px; font-size: 14px; line-height: 1.8; padding: 12px 16px; border-radius: var(--r-sm); border: 1px dashed var(--border-2); }
ins { text-decoration: none; background: var(--veil-1); color: var(--ink-1); box-shadow: inset 0 -1.5px 0 var(--ink-2); border-radius: 2px; }
del { color: var(--ink-4); text-decoration: line-through; text-decoration-color: var(--down); }
.cs-t { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 20px 0 8px; }
.cs-hist { list-style: none; display: grid; gap: 1px; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--border); }
.cs-hist li { display: grid; grid-template-columns: 34px 48px 1fr; gap: 10px; padding: 8px 12px; background: var(--panel); font-size: 13px; color: var(--ink-3); }
.cs-hist li.cur { color: var(--ink-1); background: var(--panel-2); }
.cs-two { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; }
.cs-two .rows { border: 1px solid var(--border); border-radius: var(--r-sm); }
.tagline { display: flex; flex-wrap: wrap; }

/* ── 05 渲染队列 ───────────────────────────── */
.qx { display: grid; grid-template-columns: 284px minmax(0, 1fr) 312px; height: 100%; min-height: 0; }
.q-rail { border-right: 1px solid var(--border); overflow-y: auto; padding: 6px 10px 16px; min-height: 0; }
.q-grp { font-size: 12px; color: var(--ink-4); padding: 12px 8px 6px; display: flex; justify-content: space-between; }
.qrow { position: relative; display: grid; gap: 4px; width: 100%; text-align: left; padding: 8px 10px 10px 24px; border-radius: var(--r-sm); }
.qrow:hover { background: var(--panel); }
.qrow.on { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--border-2); }
.qrow .qd { position: absolute; left: 10px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.qrow.st-tool .qd, .qrow.st-thinking .qd, .qrow.st-streaming .qd { background: var(--auto); }
.qrow.st-awaiting-input .qd { background: var(--needs); }
.qrow.st-failed .qd { background: var(--down); }
.qrow.st-partial .qd { background: var(--hatch-needs); box-shadow: inset 0 0 0 1px var(--needs); }
.qrow.st-stopped .qd { background: transparent; box-shadow: inset 0 0 0 1.2px var(--ink-3); }
.qrow.st-queued { opacity: .85; }
.qrow .qt { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .qt .num { color: var(--ink-3); font-weight: 400; }
.qrow.hist .qt { font-weight: 400; color: var(--ink-2); }
.qrow .qm { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.q-stream { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; padding: 16px 24px 0; }
.qs-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.qs-head h2 { font-size: 16px; font-weight: 600; }
.qs-head h2 .num { color: var(--ink-3); font-weight: 500; }
.qs-head p { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-top: 4px; flex-wrap: wrap; }
.approve { border: 1px solid var(--needs-line); background: var(--needs-soft); border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px; display: grid; gap: 8px; }
.ap-r { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font-size: 13px; }
.ap-r > span { color: var(--needs); font-weight: 600; }
.ap-r a { color: var(--ink-1); display: inline-flex; gap: 4px; align-items: center; text-decoration: underline; text-decoration-color: var(--border-3); text-underline-offset: 3px; }
.ap-big { font-size: 18px; color: var(--ink-1); font-weight: 600; }
.ap-act { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-left: 74px; }
.ap-act .hint { margin-left: 6px; }
.steps { list-style: none; }
.step { position: relative; padding-left: 32px; }
.step::before { content: ""; position: absolute; left: 11.5px; top: 26px; bottom: -4px; width: 1px; background: var(--border-2); }
.step:last-child::before { display: none; }
.step summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 8px 4px 0; cursor: pointer; border-radius: var(--r-xs); }
.step summary::-webkit-details-marker { display: none; }
.step summary:hover { background: var(--panel); }
.step .si { position: absolute; left: 0; top: 5px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border-2); }
.step .stl { font-size: 13px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.step .sd { margin-left: auto; font-size: 12px; color: var(--ink-3); flex: none; }
.step .cv { color: var(--ink-4); transition: transform .2s var(--ease); }
.step details[open] .cv { transform: rotate(180deg); }
.step.ok .si { background: var(--auto-soft); color: var(--auto); box-shadow: none; }
.step.live .si { background: var(--auto); color: var(--page); box-shadow: none; }
.step.stopped .si { color: var(--ink-1); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.step.failed .si { background: var(--down-soft); color: var(--down); box-shadow: none; }
.step.failed .stl, .step.failed .sd { color: var(--down); }
.step.partial .si { background: var(--hatch-needs), var(--panel-2); color: var(--needs); box-shadow: inset 0 0 0 1px var(--needs-line); }
.step.partial .sd { color: var(--needs); }
.step.queued .stl { color: var(--ink-4); font-weight: 400; }
.step.queued .si { opacity: .6; }
.evi { margin: 2px 0 8px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xs); font-size: 12px; display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.evi div { display: grid; grid-template-columns: 34px 1fr; gap: 8px; }
.evi span { color: var(--ink-4); }
.evi code { color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.logbox { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); flex: 1 1 0; min-height: 240px; display: flex; flex-direction: column; }
.log-h { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.log-h .btn { margin-left: auto; }
.log-h [data-logn] { color: var(--ink-1); }
.log { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 8px 12px; font-size: 12px; line-height: 1.75; color: var(--ink-2); }
.receipt { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 0 16px; background: var(--bg); border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-3); }
.receipt .btn { margin-left: auto; }
.receipt span { color: var(--ink-1); }
.q-aside { border-left: 1px solid var(--border); overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start; min-height: 0; }
.qa-shots { display: grid; gap: 8px; }
.qa-s { display: grid; grid-template-columns: 82px 1fr auto; gap: 10px; align-items: center; font-size: 12px; padding: 4px; border-radius: var(--r-xs); }
.qa-s:hover { background: var(--panel-2); }
.qa-b { margin-top: 12px; }
.qa-b .hint { margin-top: 8px; }

/* ── 06 失败与重试 ─────────────────────────── */
.fx-grid { grid-template-columns: 400px minmax(0, 1fr); align-items: start; }
.fx-grid .row { align-items: flex-start; }
.fx-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--border); align-items: center; }
.fx-legend b { font-size: 12px; color: var(--ink-3); font-weight: 500; width: 100%; }
.fx-detail { padding: 16px 20px 20px; }
.fx-h h2 { font-size: 16px; font-weight: 600; }
.fx-h h2 .num { color: var(--ink-3); font-weight: 500; }
.fx-h p { display: flex; gap: 10px; align-items: center; font-size: 12px; margin-top: 4px; }
.fx-err { margin: 16px 0; border: 1px solid var(--down-line); border-radius: var(--r-sm); background: var(--down-soft); }
.fx-err-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 12px; font-size: 12px; color: var(--down); }
.fx-err pre { padding: 10px 12px 12px; font-size: 12px; line-height: 1.7; color: var(--ink-1); white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid var(--down-hair); }
.fx-part, .fx-stop { margin: 16px 0; padding: 12px 16px; border-radius: var(--r-sm); font-size: 13px; }
.fx-part { background: var(--needs-soft); border: 1px solid var(--needs-line); box-shadow: inset 4px 0 0 rgba(var(--needs-rgb), .5); }
.fx-part b { color: var(--needs); margin-right: 10px; }
.fx-part p, .fx-stop p { color: var(--ink-2); margin-top: 6px; }
.fx-stop { background: var(--panel-2); border: 1px solid var(--border-2); }
.fx-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.fx-act .hint { width: 100%; }

/* ── 07 版本对比 ───────────────────────────── */
.vrail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.vcol { padding: 12px 16px; display: grid; gap: 8px; align-content: start; }
.vcol.is-a { box-shadow: inset 0 2px 0 var(--ink-3); }
.vcol.is-b { box-shadow: inset 0 2px 0 var(--ink-1); }
.vc-h { display: flex; align-items: center; gap: 8px; }
.vc-h b { font-size: 16px; font-weight: 600; }
.vc-ab { margin-left: auto; display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--r-xs); overflow: hidden; }
.vc-ab button { height: 20px; padding: 0 8px; font-size: 12px; color: var(--ink-3); }
.vc-ab button + button { border-left: 1px solid var(--border-2); }
.vc-ab button[aria-pressed="true"] { background: var(--panel-3); color: var(--ink-1); }
.vc-n { font-size: 12px; color: var(--ink-2); min-height: 18px; }
.vband { position: relative; height: 12px; background: var(--panel-2); border-radius: 2px; }
.vband i { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--panel); background: rgba(var(--needs-rgb), var(--a)); }
.vband i.r { background: var(--auto-soft); } .vband i.p { background: var(--hatch); } .vband i.o { box-shadow: inset 0 2px 0 var(--needs); }
.vc-k { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; font-size: 12px; }
.vc-k dt { color: var(--ink-4); } .vc-k dd { color: var(--ink-1); }
.vcol .btn { justify-self: start; }
.vbody { padding: 16px 16px 16px; }
.rb-state { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-2); }
.rb-state b { color: var(--needs); font-weight: 600; }
.rb-state .sep { color: var(--border-3); }
.rb-state .muted { margin-left: auto; font-size: 11.5px; }
.vd-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.vd-bar select { width: 180px; }
.vd-bar .hint { margin-left: auto; }
.vd-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.vd-pair .fbox .diffc { display: none; }
.vd-pair .fbox .diffc.show { display: block; }
.vd-tb { margin-top: 16px; }
.vd-tb td { height: 36px; }
.aes-bar { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 16px; }
.aes { display: grid; gap: 12px; }
.aes-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: stretch; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.aes-r:last-child { border-bottom: 0; padding-bottom: 0; }
.aes-r blockquote { display: flex; flex-direction: column; justify-content: center; padding: 8px 4px 8px 16px; position: relative; }
.aes-r blockquote::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--border-3); }
.aes-r blockquote p { font-size: 18px; line-height: 1.6; color: var(--ink-1); text-wrap: balance; }
.aes-r blockquote footer { font-size: 12px; color: var(--ink-4); margin-top: 8px; }
.aes-r figure { min-width: 0; }
.aes-r canvas.crop { display: block; width: 100%; height: 188px; border-radius: 3px; background: var(--panel-2); }
.aes-r figcaption { font-size: 11px; color: var(--ink-4); margin-top: 4px; }

/* ── 08 验收 ───────────────────────────────── */
.rv-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.rv-tablecard { overflow: hidden; }
.rv-tb td { height: 48px; }
.rv-tb .th-c { padding-right: 0; }
.rv-th { width: 84px; border-radius: 2px; }
.rv-tb tr.rv-drop td { color: var(--ink-4); }
.rv-tb tr.rv-drop .rv-th { opacity: .35; }
.rv-tb tr.rv-drop a b { text-decoration: line-through; }
.in.note { width: 100%; height: 28px; }
.rv-sum { position: sticky; top: 18px; }
.rv-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.rv-counts dt { font-size: 12px; color: var(--ink-3); }
.rv-counts dd { font-size: 12px; color: var(--ink-3); }
.rv-counts dd b { font-size: 18px; color: var(--ink-1); font-weight: 600; margin-right: 2px; }
.dl-list, .dl-fix { list-style: none; display: grid; gap: 4px; font-size: 13px; }
.dl-list li, .dl-fix li { display: flex; gap: 10px; justify-content: space-between; padding: 4px 8px; border-radius: var(--r-xs); background: var(--bg); }
.dl-fix li span { color: var(--ink-3); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rv-sum .hint { margin-top: 8px; }

/* ── 09 成本 ───────────────────────────────── */
.cost-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-bottom: 16px; }
.meter.tall { height: 10px; border-radius: 5px; }
.cost-kv { margin-top: 12px; }
.alert-form { display: grid; gap: 16px; }
.in-unit { display: flex; align-items: center; gap: 6px; color: var(--ink-3); }
.in-unit .in { width: 108px; }
.cost-main { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: start; }
.hb { display: grid; gap: 8px; }
.hb.shots { gap: 4px; }
.hb-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) 64px 92px; gap: 10px; align-items: center; font-size: 12px; }
.hb.shots .hb-r { grid-template-columns: 34px minmax(0, 1fr) 60px 92px; }
.hb-l { color: var(--ink-2); }
.hb-t { position: relative; display: flex; height: 14px; background: var(--panel-2); border-radius: 2px; }
.hb.shots .hb-t { height: 10px; }
.hb-t i { display: block; height: 100%; border-right: 1px solid var(--panel); }
.hb-t i:first-child { border-radius: 2px 0 0 2px; }
.c1 { background: var(--veil-1); }
.c2 { background: var(--veil-2); }
.c3 { background: var(--veil-3); }
.c4 { background: var(--ink-1); }
.thr-line { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--needs); }
.hb-v { text-align: right; color: var(--ink-1); }
.hb-n { font-size: 12px; }
.hb-r.over .hb-l { color: var(--needs); }
.ver-key { display: flex; gap: 16px; margin-top: 16px; font-size: 12px; color: var(--ink-3); }
.ver-key i { display: inline-block; width: 12px; height: 8px; margin-right: 6px; border-radius: 1px; }

/* ── 10 素材库 ─────────────────────────────── */
.as .ph .act input { width: 180px; }
.as-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.as-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.as-tile { display: grid; gap: 8px; padding: 6px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--border); text-align: left; min-width: 0; }
.as-tile:hover { border-color: var(--border-3); }
.as-tile.on { border-color: var(--ink-2); background: var(--panel-2); }
.as-cap { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 2px 2px; }
.as-n { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-words { aspect-ratio: 2048 / 858; display: flex; align-items: center; padding: 10px 12px; background: var(--bg); border-radius: 3px; }
.as-words p { font-size: 13px; line-height: 1.55; color: var(--ink-1); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.as-sw { aspect-ratio: 2048 / 858; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 3px; overflow: hidden; background: var(--hatch), var(--panel-2); }
.as-detail { position: sticky; top: 18px; }
.as-big { margin-bottom: 12px; }
.as-big-w { padding: 16px; background: var(--bg); border-radius: var(--r-sm); margin-bottom: 12px; }
.as-big-w p { font-size: 18px; line-height: 1.6; }
.as-swl { display: grid; gap: 6px; margin-bottom: 12px; }
.as-swl div { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; font-size: 12px; }
.as-swl i { height: 24px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--border-2); }
.as-swl code { color: var(--ink-2); }
.as-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.as-detail code { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ── 11 设置 ───────────────────────────────── */
.st-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.st-side { display: grid; gap: 16px; }
.thr-form { display: grid; gap: 12px; }
.thr-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 84px 64px; gap: 16px; align-items: center; font-size: 13px; }
.thr-row output { text-align: right; color: var(--ink-1); }
.st-prev { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.st-prev-h { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }

/* ── 12 空态 ───────────────────────────────── */
.em > .card { margin-bottom: 16px; }
.em-steps.fit-fill > .card { overflow: auto; }
.em-tl .tl-cell { cursor: default; }
.em-tl .em-ref { background: var(--hatch), var(--auto-soft); box-shadow: inset 0 0 0 1px var(--auto-line); }
.em-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.em-s { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.em-s h2 { font-size: 14px; font-weight: 600; }
.em-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border-3); }
.dropzone { flex: 1; margin-top: 6px; display: grid; place-items: center; min-height: 92px; border: 1.5px dashed var(--border-3); border-radius: var(--r-sm); color: var(--ink-3); font-size: 13px; cursor: pointer; text-align: center; padding: 10px; }
.dropzone:hover, .dropzone.over { border-color: var(--ink-3); color: var(--ink-1); background: var(--panel-2); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:focus-within { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.em-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.em-go { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.em-kv { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; }

.cost-alerts .rows { max-height: 236px; overflow-y: auto; }

@media (prefers-reduced-motion: reduce) {
  /* 换画面不闪：直接是终态 */
  .fbox canvas.frame { animation: none; }
}

/* ── 一屏放下：长内容在自己的卡片里滚动，不在窗口边缘被切一半 ── */
.page.fit { height: 100%; min-height: 640px; display: flex; flex-direction: column; padding-bottom: 20px; }
.page.fit > * { flex: none; }
.page.fit > .fit-fill { flex: 1; min-height: 0; }
.fit-fill.grid { align-items: stretch; }
.fit-fill.grid > * { min-height: 0; }
/* 08 验收：表格在卡片里滚，表头吸顶；右侧清单超出时自己滚 */
.rv-grid.fit-fill > .rv-tablecard { overflow: auto; }
.rv-grid.fit-fill > .rv-sum { position: static; align-self: start; max-height: 100%; overflow: auto; }
/* 10 素材库 */
.as-grid.fit-fill > .as-tiles { overflow: auto; align-content: start; padding-right: 4px; }
.as-grid.fit-fill > .as-detail { position: static; align-self: start; max-height: 100%; overflow: auto; }
/* 09 成本：按镜头那张卡的列表在卡里滚 */
.cost-main.fit-fill > .card { display: flex; flex-direction: column; }
.cost-main.fit-fill > .card > .card-b { flex: 1; min-height: 0; overflow: auto; }
.cost-main.fit-fill > .card:first-child { align-self: start; }
/* 07 版本对比 */
.vbody.fit-fill { overflow: auto; }
/* 03 上下文：曲线和压缩记录并排 */
.ctx > .card { margin-top: 0; }
.ctx-top { margin-bottom: 16px; }
.ctx-low { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ctx-low > .card { display: flex; flex-direction: column; overflow: hidden; }
.ctx-low > .card > .card-b, .ctx-low > .card > .tb { flex: 1; min-height: 0; }
.ctx-chart > .card-b { overflow: auto; }
.ctx-comp { overflow: auto !important; }

/* ── 第 2 轮：纵向撑满 ── */
/* 06 失败与重试：左栏图例贴底；右栏镜头条 + 操作栏贴底 */
.fx-list { display: flex; flex-direction: column; overflow: auto; }
.fx-list .fx-legend { margin-top: auto; }
.fx-detail { display: flex; flex-direction: column; overflow: auto; }
.fx-detail .fx-act { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.fx-shots { margin: 0 0 12px; }
.fx-sg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fx-s { display: grid; gap: 4px; padding: 8px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--border); min-width: 0; }
.fx-s:hover { border-color: var(--border-3); }
.fx-s-c { font-size: 12px; color: var(--ink-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-s-c b { color: var(--ink-1); }
.fx-s-m { font-size: 12px; color: var(--ink-3); }
.fx-s-m.down { color: var(--down); }
/* 04 约束库：左栏下方是维度覆盖；右栏内容超出时自己滚 */
.cs-list { display: flex; flex-direction: column; overflow: auto; }
.cs-list > [data-cover] { margin-top: auto; }
.cs-cover { padding: 4px 16px 16px; border-top: 1px solid var(--border); }
.cs-cover .cs-t { margin-top: 12px; }
.cs-cv { display: grid; gap: 2px; }
.cs-cv-r { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; height: 32px; padding: 0 8px; border-radius: var(--r-xs); font-size: 12px; text-align: left; }
.cs-cv-r:hover:not(:disabled) { background: var(--panel-2); }
.cs-cv-r.on { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--ink-2); }
.cs-cv-r:disabled { cursor: default; }
.cs-detail { overflow: auto; }
/* 11 设置：阈值卡里加当前最大偏离和分维度预览；右栏三张卡分掉高度 */
.st-thr { display: flex; flex-direction: column; overflow: auto; }
.st-thr > .card-b { flex: 1; display: flex; flex-direction: column; }
.st-thr .thr-form { gap: 16px; }
.thr-row label { display: grid; gap: 2px; }
.thr-max { font-size: 12px; color: var(--ink-3); }
.st-thr .st-prev { margin-top: auto; }
.st-dims { margin-top: 12px; }
.st-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: auto; }
.st-side > .card:last-child { flex: 1; }
.st-local { margin-top: 12px; }
/* 列表还没到底：底部 40px 渐隐，提示可以继续往下滚 */
[data-fade] { transition: none; }
[data-fade].more-below { -webkit-mask-image: linear-gradient(to bottom, var(--mask) calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, var(--mask) calc(100% - 40px), transparent); }
/* 01 总览：渲染卡的「接下来」，验收与成本卡的「按版本」 */
.ov-sub { font-size: 12px; font-weight: 500; color: var(--ink-3); margin: 16px 0 4px; }
.ov-next { display: grid; }
.ov-nx { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 32px; padding: 0 8px; margin: 0 -8px; border-radius: var(--r-xs); font-size: 12px; }
.ov-nx:hover { background: var(--panel-2); }
.ov-nx-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.ov-ver { padding-top: 0; }
.ov-vr { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px; gap: 8px; align-items: center; height: 24px; font-size: 12px; color: var(--ink-3); }
.ov-vr .num:last-child { text-align: right; }
.ov-vb { height: 4px; background: var(--panel-3); border-radius: 2px; overflow: hidden; }
.ov-vb i { display: block; height: 100%; background: var(--veil-3); }
.ov-vr.cur { color: var(--ink-1); }
.ov-vr.cur .ov-vb i { background: var(--ink-1); }