/* Styles for learn-viz.js; every selector is scoped to a .vz<group>- class. */
/* Group A toys (c1-3, c1-5, c1-6, c1-7, c2-1..c2-8) */
.vza-svg { display: block; width: 100%; height: auto; margin: 4px 0 8px; overflow: visible; }
.vza-dot { fill: var(--ink-mute); transition: fill 0.2s; }
.vza-dot.on { fill: var(--accent); }
.vza-stage rect { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; transition: fill 0.2s, stroke 0.2s; }
.vza-stage text { fill: var(--ink-mute); }
.vza-stage.on rect { fill: var(--accent-soft); stroke: var(--accent); }
.vza-stage.on text { fill: var(--ink); font-weight: 700; }
.vza-fit { transition: d 0.3s; }

.vza-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-mute); margin-bottom: 10px; }
.vza-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.vza-sw { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--line); box-sizing: border-box; flex: none; }
.vza-sw-dot { border-radius: 50%; border: none; }

.vza-out { background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; font-size: 14px; line-height: 1.5; margin-bottom: 12px; overflow-wrap: anywhere; }
.vza-out code, .vza-list code, .vza-qp code { font-family: var(--mono); font-size: 0.88em; }
.vza-who { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent); margin-right: 4px; }
.vza-pre { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; background: var(--bg); border: 1px solid var(--line); padding: 8px 10px; margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft); }

.toy-bar-fill.vza-fill-bad { background: var(--wrong); }
.vza-ok { color: var(--correct); }
.vza-bad { color: var(--wrong); }
.vza-dim { color: var(--ink-mute); font-size: 12.5px; }

/* c1-7 token strip */
.vza-strip { display: flex; flex-wrap: wrap; gap: 3px; min-height: 14px; margin-bottom: 8px; }
.vza-strip i { width: 11px; height: 11px; display: block; }
.vza-strip i.t { background: var(--line); }
.vza-strip i.a { background: var(--accent); }
.vza-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 12px; margin-bottom: 10px; }
.vza-stats .vza-ok, .vza-stats .vza-bad { font-weight: 700; }

/* c2-1 grid */
.vza-grid { display: grid; grid-template-columns: repeat(25, 1fr); gap: 2px; margin-bottom: 8px; }
.vza-grid i { display: block; aspect-ratio: 1; background: var(--correct-soft); border: 1px solid var(--correct); box-sizing: border-box; position: relative; }
.vza-grid i.bad { background: var(--wrong); border-color: var(--wrong); }
.vza-grid i.cut::before { content: ''; position: absolute; left: -3px; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }

/* lists (c2-2, c2-3, c2-6) */
.vza-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.vza-li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; min-width: 0; }
.vza-li > span:last-child { min-width: 0; }
.vza-li.vza-off { color: var(--ink-mute); }
.vza-mark { font-family: var(--mono); font-weight: 700; width: 16px; flex: none; text-align: center; }

/* c2-3 meter */
.vza-col { flex-direction: column; align-items: stretch; }
.vza-col .toy-chip-btn { text-align: left; }
.vza-meter { margin-bottom: 10px; }
.vza-meter-track { position: relative; height: 10px; background: linear-gradient(90deg, var(--wrong-soft), var(--bg), var(--correct-soft)); border: 1px solid var(--line); margin: 0 7px; }
.vza-meter-track i { position: absolute; top: -5px; width: 14px; height: 18px; margin-left: -7px; background: var(--ink); transition: left 0.3s; }
.vza-meter-lab { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; }

/* c2-4 weeks */
.vza-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.vza-week { border: 1px solid var(--line); background: var(--bg); padding: 5px; min-height: 92px; }
.vza-week-h { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vza-sec { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.vza-sec i { display: block; height: 5px; width: 60%; }
.vza-sec b { display: block; height: 3px; background: var(--line); }
.vza-s-f { background: var(--accent); }
.vza-s-x { background: var(--correct); }
.vza-s-n { background: var(--ink-mute); }
.vza-s-b { background: var(--wrong); }
.vza-s-t { background: var(--ink); }
i.vza-sw.vza-s-f, i.vza-sw.vza-s-x, i.vza-sw.vza-s-n, i.vza-sw.vza-s-b, i.vza-sw.vza-s-t { border: none; }

/* c2-5 jobs */
.vza-jobs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.vza-job .toy-bar { margin-bottom: 2px; }
.vza-job-s { font-size: 12.5px; line-height: 1.4; }

/* c2-6 confidence */
.vza-ans { display: flex; flex-direction: column; gap: 3px; }
.vza-conf { display: block; height: 6px; width: 100%; max-width: 160px; background: var(--bg); border: 1px solid var(--line); }
.vza-conf i { display: block; height: 100%; background: var(--accent); }

/* c2-7 claims */
.vza-claims { font-family: var(--serif); font-size: 15px; line-height: 1.7; margin-bottom: 12px; }
.vza-claim { font: inherit; color: var(--ink); background: none; border: none; padding: 0 1px; margin: 0; cursor: pointer; text-align: left; display: inline; border-bottom: 1px dotted var(--line-strong); }
.vza-claim:hover:not(:disabled) { background: var(--accent-soft); }
.vza-claim:disabled { cursor: default; }
.vza-claim.vza-risk { border-bottom: 2px solid var(--accent); }
.vza-claim.vza-c-ok { background: var(--correct-soft); }
.vza-claim.vza-c-bad { background: var(--wrong-soft); color: var(--wrong); text-decoration: line-through; }
.vza-claim.vza-c-ok::after { content: ' ✓'; color: var(--correct); font-weight: 700; }
.vza-claim.vza-c-bad::after { content: ' ✕'; color: var(--wrong); font-weight: 700; display: inline-block; text-decoration: none; }

/* c2-8 parts */
.vza-parts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.vza-part { font-size: 12.5px; padding: 2px 8px; border: 1px solid var(--line); }
.vza-part.vza-c-ok { background: var(--correct-soft); border-color: var(--correct); color: var(--correct); }
.vza-part.vza-c-bad { background: var(--wrong-soft); border-color: var(--wrong); color: var(--wrong); }

.toy-chip-btn.vza-ask:disabled { opacity: 0.45; cursor: default; }

/* viz group B toys (c3-1..c3-4, c4-1..c4-8) */
.vzb-box { border: 1px solid var(--line); background: var(--bg); padding: 8px 10px; font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; min-width: 0; overflow-wrap: anywhere; }
.vzb-trace { min-height: 52px; }
.vzb-line { margin: 2px 0; }
.vzb-mono { font-family: var(--mono); font-size: 12px; }
.vzb-small { font-size: 12.5px; }
.vzb-dim { color: var(--ink-mute); }
.vzb-ok { color: var(--correct); }
.vzb-bad { color: var(--wrong); }
.vzb-tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border: 1px solid currentColor; white-space: normal; max-width: 100%; vertical-align: 1px; }
.vzb-tag.vzb-ok { background: var(--correct-soft); }
.vzb-tag.vzb-bad { background: var(--wrong-soft); }
.vzb-tag.vzb-warn { color: var(--accent); background: var(--accent-soft); }

/* c3-2 chunks */
.vzb-chunks { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.vzb-chunk { display: grid; grid-template-columns: 26px minmax(0, 1fr) 36px; gap: 6px; align-items: center; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); background: var(--bg); }
.vzb-chunk.vzb-hit { border-color: var(--accent); background: var(--accent-soft); }
.vzb-chunk.vzb-off { color: var(--ink-mute); }
.vzb-score { text-align: right; }

/* c3-3 columns */
.vzb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vzb-colhead { font-weight: 700; color: var(--ink); }

/* c3-4 chain + eval cells */
.vzb-chain { display: flex; align-items: stretch; gap: 4px; margin-bottom: 12px; }
.vzb-node { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); background: var(--bg); padding: 6px; font-size: 12.5px; text-align: center; overflow-wrap: anywhere; }
.vzb-node.vzb-ok { border-color: var(--correct); background: var(--correct-soft); color: var(--ink); }
.vzb-node.vzb-bad { border-color: var(--wrong); background: var(--wrong-soft); color: var(--ink); }
.vzb-node.vzb-skip { border-style: dashed; color: var(--ink-soft); }
.vzb-node.vzb-idle { color: var(--ink-mute); }
.vzb-arrow { align-self: center; color: var(--ink-mute); font-size: 13px; }
.vzb-cells { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin-bottom: 12px; }
.vzb-cell { font-family: var(--mono); font-size: 10px; text-align: center; padding: 4px 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink-mute); }
.vzb-cell.vzb-cell-ok { background: var(--correct-soft); border-color: var(--correct); color: var(--correct); }
.vzb-cell.vzb-cell-bad { background: var(--wrong-soft); border-color: var(--wrong); color: var(--wrong); }

/* c4-2 mails */
.vzb-mails { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.vzb-mail { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; padding: 5px 8px; border: 1px solid var(--line); background: var(--bg); }
.vzb-mail.vzb-mail-bad { border-color: var(--wrong); background: var(--wrong-soft); }
.vzb-mail-act { display: flex; gap: 4px; margin-left: auto; }

/* c4-3 tool rows */
.vzb-tools { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.vzb-toolrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); background: var(--bg); }

/* c4-4 code */
.vzb-code { font-family: var(--mono); font-size: 12px; background: var(--bg); border: 1px solid var(--line); padding: 8px 10px; margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.vzb-codebox { margin-bottom: 12px; }
.vzb-codebox .toy-row { margin-bottom: 6px; }
.vzb-bug code { font-family: var(--mono); font-size: 11.5px; }

/* c4-6 groups */
.vzb-group { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin-bottom: 4px; }
.vzb-fill-ok { background: var(--correct); }
.vzb-fill-bad { background: var(--wrong); }

/* c4-7 module bar */
.vzb-module { display: flex; height: 22px; border: 1px solid var(--line-strong); margin-bottom: 6px; }
.vzb-seg-human { background: var(--ink-soft); transition: width 0.2s; }
.vzb-seg-ai { background: repeating-linear-gradient(45deg, var(--accent-soft), var(--accent-soft) 5px, var(--bg) 5px, var(--bg) 10px); color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: width 0.2s; }
.vzb-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px; color: var(--ink-soft); }
.vzb-sw { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--line-strong); }
.vzb-sw-human { background: var(--ink-soft); }
.vzb-sw-ai { background: var(--accent-soft); }

/* c4-8 table */
.vzb-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; margin-bottom: 12px; }
.vzb-table th, .vzb-table td { border: 1px solid var(--line); padding: 4px 5px; text-align: left; overflow-wrap: anywhere; vertical-align: top; }
.vzb-table th { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-soft); background: var(--bg); }
.vzb-table td .vzb-mono { font-size: 11px; }
.vzb-table tr.vzb-row-hit td { background: var(--wrong-soft); border-color: var(--wrong); }

/* R1 toys (group c) */
.vzc-code { font-family: var(--mono); font-size: 12px; line-height: 1.55; background: var(--bg); border: 1px solid var(--line); padding: 8px 10px; margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); max-width: 100%; box-sizing: border-box; }
.vzc-term { border-left: 3px solid var(--ink); min-height: 40px; }
.vzc-code .vzc-line { display: block; }
.vzc-code .vzc-add { display: block; background: var(--correct-soft); }
.vzc-code .vzc-del { display: block; background: var(--wrong-soft); text-decoration: line-through; }
.vzc-code .vzc-cm { color: var(--ink-mute); }
.vzc-code .vzc-hl { display: block; background: var(--accent-soft); }
.vzc-ok { color: var(--correct); }
.vzc-bad { color: var(--wrong); }
.vzc-mute { color: var(--ink-mute); }
.vzc-box { border: 1px solid var(--line); background: var(--bg); padding: 8px 10px; margin-bottom: 10px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.vzc-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px; }
.vzc-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.vzc-step { font-family: var(--mono); font-size: 10.5px; padding: 3px 6px; border: 1px solid var(--line); color: var(--ink-mute); background: var(--bg); }
.vzc-step.done { color: var(--ink); border-color: var(--ink-soft); }
.vzc-step.cur { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.vzc-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--mono); font-size: 11.5px; margin-bottom: 10px; color: var(--ink); }
.vzc-tbl th, .vzc-tbl td { border-bottom: 1px solid var(--line); padding: 4px 4px; text-align: left; overflow-wrap: anywhere; vertical-align: top; }
.vzc-tbl th { font-weight: normal; color: var(--ink-mute); font-size: 10.5px; }
.vzc-tbl tr.vzc-row-bad td { background: var(--wrong-soft); }
.vzc-tbl tr.vzc-row-ok td { background: var(--correct-soft); }
.vzc-badge { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 2px 7px; border: 1px solid currentColor; margin: 0 6px 6px 0; }
.vzc-files { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; min-height: 24px; }
.vzc-file { font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.vzc-file.vzc-new { border-color: var(--accent); background: var(--accent-soft); }
.vzc-legend { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); margin: -4px 0 10px; }
.vzc-svg { display: block; width: 100%; height: auto; margin-bottom: 8px; }
.vzc-callers { display: grid; gap: 6px; margin-bottom: 10px; }
.vzc-caller { white-space: pre-wrap; border: 1px solid var(--line); background: var(--bg); padding: 6px 8px; font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; color: var(--ink); }
.vzc-caller.vzc-broken { border-color: var(--wrong); background: var(--wrong-soft); }
.vzc-caller.vzc-hidden { border-style: dashed; color: var(--ink-mute); }
.vzc-checks { display: grid; gap: 4px; margin-bottom: 10px; }
.vzc-check { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.vzc-check > span:first-child { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
@media (max-width: 420px) {
  .vzc-check { grid-template-columns: 84px 1fr; }
  .vzc-code { font-size: 11px; padding: 6px 8px; }
  .vzc-tbl { font-size: 10.5px; }
}

/* group D toys (mixed-1..6, c5-1..5) */
.vzd-svg { display: block; width: 100%; height: auto; margin: 4px 0 12px; overflow: visible; }
.vzd-svgwrap { min-width: 0; }
.vzd-out { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.vzd-promptbox { font-family: var(--mono); font-size: 12px; line-height: 1.5; padding: 10px 12px; margin-bottom: 12px; border-left: 3px solid var(--ink); background: var(--bg); color: var(--ink); overflow-wrap: anywhere; }
.vzd-promptbox code { font-family: var(--mono); color: var(--wrong); }
.vzd-added { margin-top: 4px; color: var(--accent); }
.vzd-result .vzd-good { color: var(--correct); }
.vzd-result .vzd-weak { color: var(--ink-mute); }
.vzd-step { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); margin-bottom: 8px; }
.vzd-ok-text { color: var(--correct); font-weight: 700; }
.vzd-bad-text { color: var(--wrong); font-weight: 700; }

/* mixed-1 concept check states */
.vzd-pick .toy-chip-btn.vzd-ok { background: var(--correct-soft); border-color: var(--correct); color: var(--ink); }
.vzd-pick .toy-chip-btn.vzd-bad { background: var(--wrong-soft); border-color: var(--wrong); color: var(--ink); text-decoration: line-through; }
.vzd-pick .toy-chip-btn.vzd-miss { border: 1px dashed var(--correct); color: var(--correct); }

/* mixed-3 classification scale */
.vzd-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-bottom: 14px; }
.vzd-cell { font-size: 11.5px; text-align: center; padding: 6px 2px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-mute); line-height: 1.25; }
.vzd-cell.on { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 700; }
.vzd-toolrow .toy-chip-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* mixed-4 quote rows */
.vzd-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.vzd-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; text-align: left; font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.vzd-row strong { font-family: var(--mono); font-size: 13px; text-align: right; }
.vzd-row .vzd-row-st { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.vzd-row:hover { border-color: var(--ink); }
.vzd-row.vzd-row-ok { border-color: var(--correct); }
.vzd-row.vzd-row-ok .vzd-row-st { color: var(--correct); }
.vzd-row.vzd-row-bad { border-color: var(--wrong); background: var(--wrong-soft); }
.vzd-row.vzd-row-bad .vzd-row-st { color: var(--wrong); font-weight: 700; }

/* mixed-5 holes list */
.vzd-holes { margin: 0 0 12px; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }

/* stacked bars (c5-2, c5-5) */
.vzd-stackwrap { position: relative; margin: 6px 0 8px; }
.vzd-stack { display: flex; height: 22px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.vzd-seg { height: 100%; transition: width 0.2s; }
.vzd-seg-model { background: var(--ink-soft); }
.vzd-seg-kv { background: var(--accent); }
.vzd-seg-kv.vzd-over { background: var(--wrong); }
.vzd-seg-prefix { background: var(--ink-soft); }
.vzd-seg-q { background: var(--ink-mute); }
.vzd-seg-out { background: var(--accent); }
.vzd-limit { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--wrong); transition: left 0.2s; }
.vzd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-bottom: 12px; }
.vzd-legend span { display: inline-flex; align-items: center; gap: 5px; }
.vzd-sw { display: inline-block; width: 10px; height: 10px; }
.vzd-sw.vzd-sw-limit { width: 0; height: 12px; border-left: 2px dashed var(--wrong); }

/* c5-3 bad quality bar */
.vzd-barbad.toy-bar .toy-bar-fill { background: var(--wrong); }

/* Group E toys (c6-1..c6-4, c7-1..c7-6) */
.vze-ok { color: var(--correct); }
.vze-bad { color: var(--wrong); }
.vze-mid { color: var(--accent); }
.vze-muted { color: var(--ink-mute); }
.vze-out { font-family: var(--mono); font-size: 12px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); margin-bottom: 10px; overflow-wrap: anywhere; }
.vze-metric-k { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }

/* c6-1 */
.vze-curve { display: block; width: 100%; height: auto; margin-bottom: 2px; }
.vze-curve .vze-curve-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.vze-curve .vze-axisline { stroke: var(--line); stroke-width: 1; }
.vze-curve .vze-guide { stroke: var(--ink-mute); stroke-width: 1; stroke-dasharray: 2 2; }
.vze-curve .vze-dot { fill: var(--ink); }
.vze-slots { display: flex; gap: 3px; margin-bottom: 4px; }
.vze-slot { flex: 1; min-width: 0; text-align: center; font-family: var(--mono); font-size: 10px; padding: 6px 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink-mute); }
.vze-slot.vze-key { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.vze-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-mute); margin-bottom: 10px; }

/* c6-2 */
.vze-chunks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vze-chunk { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; max-width: 100%; padding: 4px; border: 1px dashed var(--line-strong); background: var(--bg); }
.vze-chunk-id { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); padding-right: 2px; }
.vze-seg { font-size: 11.5px; padding: 2px 5px; border: 1px solid var(--line); background: var(--bg-card); color: var(--ink); }
.vze-seg.vze-s1 { background: var(--accent-soft); }
.vze-seg.vze-s2 { background: var(--correct-soft); }
.vze-seg.vze-s3 { background: color-mix(in srgb, var(--ink) 9%, var(--bg)); }
.vze-seg.vze-cut { border-color: var(--wrong); box-shadow: inset 0 -2px 0 var(--wrong); }
.vze-status { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 12px; margin-bottom: 10px; }
.vze-status-q { flex-basis: 100%; color: var(--ink-soft); }

/* c6-3, c6-4 */
.vze-docs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.vze-doc { padding: 5px 8px; border: 1px solid var(--line); background: var(--bg); font-size: 12.5px; color: var(--ink); }
.vze-doc.vze-top { border-color: var(--ink); }
.vze-doc.vze-dim { color: var(--ink-mute); }
.vze-doc-head { display: flex; justify-content: space-between; gap: 8px; }
.vze-score { font-family: var(--mono); font-size: 11px; flex-shrink: 0; }
.vze-mini { height: 4px; margin-top: 4px; background: var(--line); }
.vze-mini span { display: block; height: 100%; background: var(--accent); transition: width 0.2s; }
.vze-doc.vze-dim .vze-mini span { background: var(--ink-mute); }
.vze-tag { font-family: var(--mono); font-size: 10px; padding: 0 4px; border: 1px solid var(--correct); color: var(--correct); white-space: nowrap; }
.vze-metrics { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; margin-bottom: 10px; }

/* c7-1 */
.vze-stack { position: relative; display: flex; height: 22px; border: 1px solid var(--ink); background: var(--bg); overflow: hidden; }
.vze-stack > span:not(.vze-limit) { height: 100%; transition: width 0.2s; }
.vze-limit { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--wrong); }
.vze-p-sys { background: var(--ink-mute); }
.vze-p-schema { background: var(--accent); }
.vze-p-user { background: var(--correct); }
.vze-p-call { background: var(--ink); }
.vze-p-result { background: color-mix(in srgb, var(--accent) 40%, var(--bg)); }
.vze-stack .vze-evicted { background: repeating-linear-gradient(45deg, var(--correct) 0 3px, var(--bg) 3px 6px); }
.vze-stack-cap { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); margin: 4px 0 8px; }
.vze-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--ink-soft); margin-bottom: 10px; }
.vze-legend b { font-family: var(--mono); font-weight: normal; color: var(--ink); }
.vze-sw { display: inline-block; width: 9px; height: 9px; margin-right: 4px; vertical-align: -1px; }

/* c7-2 */
.vze-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; font-size: 12.5px; }
.vze-node { padding: 4px 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.vze-node.vze-gate { border-color: var(--correct); color: var(--correct); }
.vze-node.vze-gate-on { border: 2px solid var(--wrong); color: var(--wrong); font-weight: 600; }
.vze-arrow { color: var(--ink-mute); }

/* c7-3, c7-6 */
.vze-issue { font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); margin-bottom: 10px; }
.vze-hidden { font-family: var(--mono); font-size: 11.5px; color: var(--wrong); margin-top: 4px; overflow-wrap: anywhere; }
.vze-defense { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; }

/* c7-4 */
.vze-log { display: flex; flex-direction: column; gap: 2px; min-height: 8.2em; padding: 8px 10px; border: 1px solid var(--line); background: var(--bg); font-family: var(--mono); font-size: 11.5px; line-height: 1.45; color: var(--ink); margin-bottom: 10px; }
.vze-log .vze-ok { color: var(--correct); }
.vze-log .vze-bad { color: var(--wrong); }
.vze-ctrl .toy-chip-btn:disabled { opacity: 0.4; cursor: default; }
.vze-cost { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-left: auto; }

/* c7-5 */
.vze-chart { display: block; width: 100%; height: auto; margin-bottom: 8px; }
.vze-chart .vze-th { stroke: var(--wrong); stroke-width: 1; stroke-dasharray: 4 3; }
.vze-chart .vze-upd { stroke: var(--ink-mute); stroke-width: 1; stroke-dasharray: 2 3; }
.vze-chart .vze-ax { font-family: var(--mono); font-size: 8px; fill: var(--ink-mute); }
.vze-chart .vze-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.vze-chart .vze-pt { fill: var(--accent); }
.vze-chart .vze-pt-bad { fill: var(--wrong); }
.vze-chart .vze-q { font-family: var(--mono); font-size: 11px; fill: var(--ink-mute); }

/* c7-6 */
.vze-heat .vze-ht { font-size: 13.5px; padding: 3px 7px; color: var(--ink); background: color-mix(in srgb, var(--accent) var(--h, 0%), var(--bg)); }