niceeval 0.12.2-canary.31 → 0.13.0

package/dist/report/assets/styles.css

@@ -0,0 +1,2678 @@
+/*
+ * niceeval/report/react/styles.css —— 随包发布的默认样式。
+ * 契约(docs/feature/reports/library.md):
+ *   - 所有节点都有稳定的 niceeval-* 类名;这份 CSS + 类名 = 静态页零依赖成立;
+ *   - 外观全部经公开令牌进来:每个用点读 var(--niceeval-*, <兜底>),本文件不声明
+ *     任何 --niceeval-* 变量,主题/宿主的令牌块因此直接生效;
+ *   - 兜底值 = 内建主题 basalt(src/report/theme.ts 单源),由
+ *     test/unit/report-theme-tokens.test.ts 守护逐项相等:不装主题 = 装 basalt;
+ *   - SVG 图形零内联 hex:挂 niceeval-series-cN 类,由 --series 上色。
+ */
+
+.niceeval-report {
+  /* 公开令牌折成私有短名,用点只读短名。改观感改主题,不改这里的兜底。 */
+  color-scheme: dark; /* basalt 锁暗;主题令牌块在级联后位以同名规则覆盖 */
+  --page: var(--niceeval-color-page, #050505);
+  --panel: var(--niceeval-color-surface, #0b0b0b);
+  --panel-2: var(--niceeval-color-surface-subtle, #111111);
+  --line: var(--niceeval-color-border, #262626);
+  --line-strong: var(--niceeval-color-border-strong, #343434);
+  --text: var(--niceeval-color-text, #ededed);
+  --muted: var(--niceeval-color-text-secondary, #a1a1aa);
+  --soft: var(--niceeval-color-text-tertiary, #74747b);
+  --accent: var(--niceeval-color-accent, #cbd6dc);
+  --focus: var(--niceeval-color-focus, #cbd6dc);
+  --good: var(--niceeval-color-positive, #3ddc97);
+  --bad: var(--niceeval-color-negative, #ff6b6b);
+  --warn: var(--niceeval-color-warning, #e8b84a);
+
+  /* 六色 CVD 分类色板;colors.ts 的散列下标指到这里,顺序不重排 */
+  --c0: var(--niceeval-color-series-1, #3987e5);
+  --c1: var(--niceeval-color-series-2, #199e70);
+  --c2: var(--niceeval-color-series-3, #c98500);
+  --c3: var(--niceeval-color-series-4, #008300);
+  --c4: var(--niceeval-color-series-5, #e66767);
+  --c5: var(--niceeval-color-series-6, #d95926);
+  /* 系列色的缺省(无系列的点/柱):中性,不冒充身份 */
+  --series: var(--muted);
+
+  --radius: var(--niceeval-radius, 0);
+  --font-sans: var(--niceeval-font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "PingFang SC", sans-serif);
+  --font-mono: var(--niceeval-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+
+  font-family: var(--font-sans);
+  font-size: var(--niceeval-font-size, 13px);
+  line-height: 1.5;
+  color: var(--text);
+  margin: 1rem 0;
+}
+/* 键盘 focus 环:1px 实线,贴边不外扩 */
+.niceeval-report :focus-visible { outline: 1px solid var(--focus); outline-offset: 0; }
+
+/* ---- locator 与判定符:实体行共用的最小单元 ---- */
+.niceeval-report .niceeval-locator { display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-variant-numeric:tabular-nums; text-decoration:none; white-space:nowrap; }
+.niceeval-report .niceeval-locator:hover { text-decoration:underline; }
+/* attempt 行的判定长在 locator 上:判定符与语义色同场,不靠颜色单独表意
+   (docs/feature/reports/library.md) */
+.niceeval-report .niceeval-locator.niceeval-verdict-passed { color: var(--good); }
+.niceeval-report .niceeval-locator.niceeval-verdict-failed { color: var(--bad); }
+.niceeval-report .niceeval-locator.niceeval-verdict-errored { color: var(--warn); }
+.niceeval-report .niceeval-locator.niceeval-verdict-unreadable,
+.niceeval-report .niceeval-locator.niceeval-verdict-skipped { color: var(--soft); }
+.niceeval-report .niceeval-locator-mark { font-weight: 650; }
+
+.niceeval-report .niceeval-missing-reason { color: var(--muted); }
+
+/* ---- 维度键上色:同一个 key 在任何块里同色(文字) ---- */
+.niceeval-report .niceeval-c0 { color: var(--c0); }
+.niceeval-report .niceeval-c1 { color: var(--c1); }
+.niceeval-report .niceeval-c2 { color: var(--c2); }
+.niceeval-report .niceeval-c3 { color: var(--c3); }
+.niceeval-report .niceeval-c4 { color: var(--c4); }
+.niceeval-report .niceeval-c5 { color: var(--c5); }
+
+/* ---- 系列上色(SVG 图形):niceeval-series-cN 设 --series,fill/stroke 走 var ---- */
+.niceeval-report .niceeval-series-c0 { --series: var(--c0); }
+.niceeval-report .niceeval-series-c1 { --series: var(--c1); }
+.niceeval-report .niceeval-series-c2 { --series: var(--c2); }
+.niceeval-report .niceeval-series-c3 { --series: var(--c3); }
+.niceeval-report .niceeval-series-c4 { --series: var(--c4); }
+.niceeval-report .niceeval-series-c5 { --series: var(--c5); }
+.niceeval-report .niceeval-series-none { --series: var(--muted); }
+
+/*
+ * HTML 横向柱的 variant 填充图案(CSS 等效 SVG <pattern>)。
+ * variant 1 = 实心(默认 .niceeval-chart-bar-fill);2 对角斜线 / 3 水平条纹 / 4 点阵。
+ * 颜色始终读 --series,换主题令牌自动换色,不写死 hex。
+ */
+.niceeval-report .niceeval-series-fill-v2 {
+  background-color: transparent;
+  background-image: repeating-linear-gradient(
+    -45deg,
+    color-mix(in srgb, var(--series) 78%, var(--panel)),
+    color-mix(in srgb, var(--series) 78%, var(--panel)) 2px,
+    color-mix(in srgb, var(--series) 28%, var(--panel)) 2px,
+    color-mix(in srgb, var(--series) 28%, var(--panel)) 5px
+  );
+}
+.niceeval-report .niceeval-series-fill-v3 {
+  background-color: transparent;
+  background-image: repeating-linear-gradient(
+    0deg,
+    color-mix(in srgb, var(--series) 78%, var(--panel)),
+    color-mix(in srgb, var(--series) 78%, var(--panel)) 2px,
+    color-mix(in srgb, var(--series) 28%, var(--panel)) 2px,
+    color-mix(in srgb, var(--series) 28%, var(--panel)) 5px
+  );
+}
+.niceeval-report .niceeval-series-fill-v4 {
+  background-color: color-mix(in srgb, var(--series) 28%, var(--panel));
+  background-image: radial-gradient(
+    circle at 25% 25%,
+    color-mix(in srgb, var(--series) 88%, var(--panel)) 1.2px,
+    transparent 1.3px
+  );
+  background-size: 6px 6px;
+}
+
+/* ---- 表格通用:圆角 panel、细分隔线、tabular-nums 数字、uppercase 小标签 ---- */
+table.niceeval-report,
+.niceeval-report table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--panel);
+}
+.niceeval-report th,
+.niceeval-report td {
+  border-bottom: 1px solid var(--line);
+  padding: 9px 14px;
+  text-align: left;
+  vertical-align: top;
+  font-size: 13.5px;
+}
+.niceeval-report thead th {
+  color: var(--muted);
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--panel);
+  white-space: nowrap;
+}
+.niceeval-report tbody tr:last-child th,
+.niceeval-report tbody tr:last-child td {
+  border-bottom: 0;
+}
+.niceeval-report tbody th[sample="row"] {
+  font-weight: 610;
+}
+.niceeval-report td {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+/* ---- <Table> 原语:作者自定义列;右对齐是 class,不是内联样式 ---- */
+.niceeval-report th.niceeval-align-right,
+.niceeval-report td.niceeval-align-right {
+  text-align: right;
+}
+
+/* ---- 渐进增强:排序指示(enhance.js 点表头时切类)与行过滤 ---- */
+.niceeval-report th[data-niceeval-sort] {
+  cursor: pointer;
+  user-select: none;
+}
+.niceeval-report th[data-niceeval-sort]:hover { color: var(--text); }
+.niceeval-report th[data-niceeval-sort]::after {
+  content: "↕";
+  margin-left: 6px;
+  color: var(--soft);
+  font-size: 11px;
+  opacity: 0;
+}
+.niceeval-report th[data-niceeval-sort]:hover::after,
+.niceeval-report th[data-niceeval-sort]:focus-visible::after { opacity: 1; }
+.niceeval-report th[data-niceeval-sort].niceeval-sort-asc::after { content: "↑"; color: var(--text); opacity: 1; }
+.niceeval-report th[data-niceeval-sort].niceeval-sort-desc::after { content: "↓"; color: var(--text); opacity: 1; }
+.niceeval-report .niceeval-row-hidden { display: none; }
+/* Hierarchy rows later establish `display: grid`; this more specific rule
+   preserves the filter's hidden state against that layout declaration. */
+.niceeval-report.niceeval-table--hierarchical .niceeval-table-hierarchy-row.niceeval-row-hidden { display: none; }
+
+/* ---- 通用 Table 的过滤外壳与层级行 ---- */
+.niceeval-table-wrap > .niceeval-filter {
+  display: block;
+  width: min(100%, 280px);
+  height: 34px;
+  min-width: 0;
+  margin: 0 0 12px auto;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 0 11px;
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+  outline: none;
+}
+.niceeval-table-wrap > .niceeval-filter:focus { border-color: var(--line-strong); }
+.niceeval-table-wrap > .niceeval-filter::placeholder { color: var(--soft); }
+
+.niceeval-report .niceeval-cell-text { display: block; min-width: 0; }
+.niceeval-report .niceeval-cell-detail {
+  display: block;
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 400;
+}
+/* 层级表:整表只有一个 grid,表头与每一层行都用 subgrid 挂在它的列上。列宽因此由全表内容
+   一次算出(--table-grid 只声明"身份列吃余量、读数列贴内容"这条规则,不写每列宽度),
+   跨层对齐由 subgrid 保证,不靠各行复读同一份列模板。 */
+.niceeval-table--hierarchical {
+  display: grid;
+  grid-template-columns: var(--table-grid);
+  column-gap: 14px;
+  overflow-x: auto;
+}
+.niceeval-table--hierarchical thead,
+.niceeval-table--hierarchical tbody,
+.niceeval-table--hierarchical tbody > tr,
+.niceeval-table--hierarchical .niceeval-table-hierarchy-body,
+.niceeval-table--hierarchical .niceeval-table-hierarchy-children,
+.niceeval-table--hierarchical .niceeval-table-hierarchy-group,
+.niceeval-table--hierarchical thead tr,
+.niceeval-table--hierarchical .niceeval-table-hierarchy-summary,
+.niceeval-table--hierarchical .niceeval-table-hierarchy-row:not(details) {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+}
+/* Chrome 把 <details> 的非 summary 内容包进 ::details-content 匿名盒,subgrid 链要穿过它;
+   没有这个伪元素的浏览器里子行容器本身就是 details 的直接 grid item,两种情形都成立。 */
+.niceeval-table--hierarchical .niceeval-table-hierarchy-group::details-content {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+}
+.niceeval-table--hierarchical thead tr,
+.niceeval-table--hierarchical .niceeval-table-hierarchy-summary,
+.niceeval-table--hierarchical .niceeval-table-hierarchy-row:not(details) {
+  align-items: center;
+}
+.niceeval-table--hierarchical thead tr { padding: 0 20px; }
+.niceeval-table--hierarchical thead th {
+  display: block;
+  border: 0;
+  padding: 12px 0;
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-body {
+  border: 0;
+  padding: 0;
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-row {
+  border-bottom: 1px solid var(--line);
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-body > .niceeval-table-hierarchy-row:last-child {
+  border-bottom: 0;
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-summary,
+.niceeval-table--hierarchical .niceeval-table-hierarchy-row:not(details) {
+  box-sizing: border-box;
+  padding: 12px 20px;
+  list-style: none;
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-summary {
+  position: relative;
+  cursor: pointer;
+  transition: background .12s;
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-summary::-webkit-details-marker { display: none; }
+.niceeval-table--hierarchical .niceeval-table-hierarchy-summary:hover {
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 25%);
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-summary .niceeval-table-hierarchy-cell:first-child {
+  position: relative;
+  padding-left: 28px;
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-summary .niceeval-table-hierarchy-cell:first-child::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: .45em;
+  width: 7px;
+  height: 7px;
+  border-right: 1.5px solid var(--muted);
+  border-bottom: 1.5px solid var(--muted);
+  transform: rotate(-45deg);
+  transition: transform .15s;
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-group[open] > .niceeval-table-hierarchy-summary
+  .niceeval-table-hierarchy-cell:first-child::before {
+  transform: rotate(45deg);
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-children {
+  border-top: 1px solid var(--line);
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 24%);
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-children .niceeval-table-hierarchy-row {
+  border-color: color-mix(in oklch, var(--line), transparent 28%);
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-cell {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+/* 读数列的可读下限:窄到这里就整表横向滚动,不把 "gpt-5.6-luna" 拆成三行。身份列自己的
+   下限写在列轨里(见 hierarchyGrid)。 */
+.niceeval-table--hierarchical thead th:not(:first-child),
+.niceeval-table--hierarchical .niceeval-table-hierarchy-cell:not(:first-child) {
+  min-width: 5rem;
+}
+.niceeval-table--hierarchical .niceeval-table-hierarchy-cell.niceeval-align-right {
+  text-align: right;
+  white-space: nowrap;
+}
+.niceeval-table--hierarchical .niceeval-row-placeholder { color: var(--soft); }
+.niceeval-table--hierarchical .niceeval-row-group > .niceeval-table-hierarchy-summary,
+.niceeval-table--hierarchical .niceeval-row-group.niceeval-table-hierarchy-row {
+  font-weight: 600;
+  color: var(--fg);
+}
+.niceeval-table--hierarchical tr.niceeval-row-group {
+  font-weight: 600;
+}
+.niceeval-report .niceeval-verdict-tally {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+/* ---- MetricValue:缺数据 / 覆盖率角标 / 证据链接 ---- */
+.niceeval-report .niceeval-value { white-space: nowrap; }
+.niceeval-report .niceeval-missing {
+  color: var(--soft);
+  font-style: italic;
+}
+.niceeval-report .niceeval-coverage {
+  color: var(--warn);
+  font-size: 0.72em;
+  margin-left: 0.3em;
+}
+.niceeval-report .niceeval-refs {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.4em;
+}
+.niceeval-report .niceeval-refs-summary {
+  color: var(--c0);
+  cursor: pointer;
+  font-size: 0.8em;
+  list-style: none;
+  white-space: nowrap;
+}
+.niceeval-report .niceeval-refs-summary::-webkit-details-marker { display: none; }
+.niceeval-report .niceeval-refs-summary::after { content: " ▸"; }
+.niceeval-report .niceeval-refs[open] > .niceeval-refs-summary::after { content: " ▾"; }
+.niceeval-report .niceeval-refs-summary:hover { text-decoration: underline; }
+.niceeval-report .niceeval-refs-list {
+  position: absolute;
+  z-index: 5;
+  right: 0;
+  bottom: calc(100% + 4px);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: max-content;
+  max-width: min(24rem, calc(100vw - 2rem));
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  box-shadow: 0 8px 24px color-mix(in oklch, black, transparent 78%);
+}
+.niceeval-report .niceeval-ref {
+  color: var(--c0);
+  font-size: 0.85em;
+  text-decoration: none;
+  margin-right: 0.25em;
+}
+.niceeval-report .niceeval-ref:hover {
+  text-decoration: underline;
+}
+/* 数据侧没给的格子:呈现层画软色缺失符,不进 textContent、不参与排序取值 */
+
+/* ---- verdict 语义色与计票 pill ---- */
+.niceeval-report .niceeval-verdict-passed { color: var(--good); }
+.niceeval-report .niceeval-verdict-failed { color: var(--bad); }
+.niceeval-report .niceeval-verdict-errored { color: var(--warn); }
+.niceeval-report .niceeval-verdict-unreadable { color: var(--soft); }
+.niceeval-report .niceeval-verdict-tally {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.niceeval-report .niceeval-verdict-pill {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 0 8px;
+  font-size: 12px;
+  white-space: nowrap;
+  background: var(--panel);
+}
+.niceeval-report .niceeval-verdict-pill.niceeval-verdict-passed { border-color: color-mix(in oklch, var(--good), var(--line) 55%); }
+.niceeval-report .niceeval-verdict-pill.niceeval-verdict-failed { border-color: color-mix(in oklch, var(--bad), var(--line) 55%); }
+.niceeval-report .niceeval-verdict-pill.niceeval-verdict-errored { border-color: color-mix(in oklch, var(--warn), var(--line) 55%); }
+
+/* ---- SampleSummary:范围摘要卡的范围行 ---- */
+.niceeval-report .niceeval-sample-summary-range {
+  color: var(--soft);
+  font-size: 0.85em;
+  margin: 0.25rem 0 0;
+}
+
+/* ---- Hero / PoweredBy(站点标题区与品牌行) ---- */
+/* 居中大标题:hero 是页首的门面块,整块占满内容列宽、文本水平居中,标题随视口 clamp 放大,
+   meta 与品牌行居中跟随。不设 max-width——窄框居中在宽内容列里会读成左偏,占满列宽才真居中。 */
+.niceeval-hero {
+  text-align: center;
+  margin: 0 0 clamp(28px, 5vw, 44px);
+}
+.niceeval-hero .niceeval-hero-logo {
+  display: block;
+  width: clamp(64px, 8vw, 80px);
+  height: clamp(64px, 8vw, 80px);
+  object-fit: contain;
+  margin: 0 auto 22px;
+}
+.niceeval-hero .niceeval-hero-title {
+  margin: 0;
+  font-size: clamp(38px, 5vw, 60px);
+  line-height: 0.98;
+  font-weight: 760;
+  letter-spacing: -0.01em;
+}
+.niceeval-hero .niceeval-hero-description {
+  max-width: 720px;
+  margin: 18px auto 0;
+  color: var(--muted);
+  font-size: clamp(15px, 1.7vw, 17px);
+  line-height: 1.65;
+}
+.niceeval-hero .niceeval-hero-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  margin: 22px 0 0;
+}
+.niceeval-hero .niceeval-hero-link {
+  display: inline-flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 16px;
+  border: 1px solid color-mix(in oklch, var(--accent), var(--line) 55%);
+  border-radius: var(--radius);
+  background: color-mix(in oklch, var(--accent), transparent 90%);
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 650;
+  text-decoration: none;
+}
+.niceeval-hero .niceeval-hero-link:hover {
+  border-color: var(--accent);
+  background: color-mix(in oklch, var(--accent), transparent 84%);
+}
+.niceeval-hero .niceeval-hero-meta {
+  margin: 14px 0 0;
+  color: var(--muted);
+  font-size: 14px;
+}
+.niceeval-powered-by {
+  margin: 10px 0 0;
+  font-size: 12px;
+}
+.niceeval-powered-by a {
+  color: var(--soft);
+  text-decoration: none;
+}
+.niceeval-powered-by a:hover { color: var(--text); text-decoration: underline; }
+
+/* ---- Callouts(分级提示区:双层 details,不占框) ---- */
+.niceeval-callouts {
+  margin: 0;
+  font-size: 13px;
+}
+.niceeval-callouts-root > .niceeval-callouts-summary {
+  font-weight: 650;
+  cursor: pointer;
+}
+.niceeval-callouts-summary--error { color: var(--bad); }
+.niceeval-callouts-summary--warning { color: var(--warn); }
+.niceeval-callouts-summary--info { color: var(--soft); }
+.niceeval-callout-groups {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+}
+.niceeval-callout-group + .niceeval-callout-group {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
+}
+.niceeval-callout-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+}
+.niceeval-callout-head--error .niceeval-callout-title { color: var(--bad); }
+.niceeval-callout-head--warning .niceeval-callout-title { color: var(--warn); }
+.niceeval-callout-title { font-weight: 650; }
+.niceeval-callout-badge {
+  padding: 1px 8px;
+  border: 1px solid color-mix(in oklch, var(--warn), var(--line) 35%);
+  border-radius: var(--radius);
+  background: color-mix(in oklch, var(--warn), var(--panel) 84%);
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+.niceeval-callout-details { margin: 4px 0 0; }
+.niceeval-callout-details > summary {
+  color: var(--soft);
+  font-size: 0.9em;
+  cursor: pointer;
+}
+.niceeval-callout-items {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 0;
+}
+.niceeval-callout-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+}
+.niceeval-callout-item + .niceeval-callout-item { margin-top: 8px; }
+.niceeval-callout-item--error .niceeval-callout-message { color: var(--bad); }
+.niceeval-callout-item--warning .niceeval-callout-message { color: var(--warn); }
+.niceeval-callout-nested {
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 0 0 0 12px;
+}
+.niceeval-callout-command {
+  display: inline-block;
+  padding: 1px 6px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  font-size: 0.92em;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  user-select: all;
+}
+:root.niceeval-js .niceeval-callout-command { cursor: copy; }
+
+/* ---- CopyBlock(可折叠复制块:text 面零输出) ---- */
+.niceeval-copy-block {
+  margin: 0 0 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  padding: 8px 12px;
+}
+.niceeval-copy-block > summary {
+  cursor: pointer;
+  font-weight: 620;
+  font-size: 13px;
+}
+.niceeval-copy-block .niceeval-copy-block-copy {
+  margin: 8px 0 0;
+  padding: 4px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+}
+:root.niceeval-js .niceeval-copy-block .niceeval-copy-block-copy { cursor: copy; }
+.niceeval-copy-block .niceeval-copy-block-text {
+  margin: 8px 0 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--page);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ---- CopyFixPrompt(批量修复 prompt:折叠块 + 增强层复制) ---- */
+.niceeval-copy-fix-prompt {
+  margin: 0 0 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  padding: 8px 12px;
+}
+.niceeval-copy-fix-prompt > summary {
+  cursor: pointer;
+  font-weight: 620;
+  font-size: 13px;
+}
+.niceeval-copy-fix-prompt .niceeval-copy-fix-prompt-copy {
+  margin: 8px 0 0;
+  padding: 4px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+}
+:root.niceeval-js .niceeval-copy-fix-prompt .niceeval-copy-fix-prompt-copy { cursor: copy; }
+.niceeval-copy-fix-prompt .niceeval-copy-fix-prompt-copy[data-niceeval-copied]::after {
+  content: "✓";
+  margin-left: 0.6em;
+  color: var(--good);
+}
+.niceeval-copy-fix-prompt .niceeval-copy-fix-prompt-text {
+  margin: 8px 0 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--page);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ---- Waterfall 原语(时间树与瀑布) ---- */
+.niceeval-waterfall .niceeval-waterfall-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.niceeval-waterfall .niceeval-waterfall-row {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 10px 14px;
+  margin-bottom: 8px;
+  background: var(--panel);
+}
+.niceeval-waterfall .niceeval-waterfall-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75em;
+  align-items: baseline;
+}
+.niceeval-waterfall .niceeval-waterfall-label { font-weight: 620; }
+.niceeval-waterfall .niceeval-waterfall-duration,
+.niceeval-waterfall .niceeval-waterfall-count {
+  color: var(--muted);
+  font-size: 0.9em;
+  font-variant-numeric: tabular-nums;
+}
+.niceeval-waterfall .niceeval-waterfall-failed { color: var(--bad); font-size: 0.9em; }
+.niceeval-waterfall .niceeval-waterfall-track {
+  position: relative;
+  height: 14px;
+  margin-top: 8px;
+  border-radius: var(--radius);
+  background: color-mix(in oklch, var(--line), var(--panel) 60%);
+  overflow: hidden;
+}
+/* 条上的类别着色:kind 稳定散列到分类色槽,原语不认词表
+   (docs/feature/reports/library.md「类别与着色」)。
+   五槽跳过 --c4:它离 --bad 太近,失败段就分不出来了。失败规则在后位覆盖分类色。
+   分类色按整段面积铺,兑进面色收一档:色板是给线和点定的,原样铺满整条会盖过页面。 */
+.niceeval-waterfall .niceeval-waterfall-bar {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  border-radius: var(--radius);
+  background: color-mix(in oklch, var(--series), var(--panel) 32%);
+}
+.niceeval-waterfall .niceeval-span-kind-0 { --series: var(--c0); }
+.niceeval-waterfall .niceeval-span-kind-1 { --series: var(--c1); }
+.niceeval-waterfall .niceeval-span-kind-2 { --series: var(--c2); }
+.niceeval-waterfall .niceeval-span-kind-3 { --series: var(--c3); }
+.niceeval-waterfall .niceeval-span-kind-4 { --series: var(--c5); }
+.niceeval-waterfall .niceeval-span-failed { background: var(--bad); }
+.niceeval-waterfall .niceeval-waterfall-nodes {
+  list-style: none;
+  margin: 10px 0 0;
+  padding: 0;
+}
+/* 清单是三列:类别、名字、时长,外加一列展开指示符。定宽列让同层各行的数字对齐。 */
+.niceeval-waterfall .niceeval-waterfall-node {
+  display: flex;
+  gap: 0.5em;
+  align-items: baseline;
+  font-size: 0.92em;
+  line-height: 1.6;
+  white-space: nowrap;
+}
+/* 指示符列:原语自绘,不靠浏览器给 <summary> 的默认标记——flex 行里它不出现。
+   叶子行留空占位,三列仍然对齐。 */
+.niceeval-waterfall .niceeval-waterfall-node::before {
+  content: "";
+  flex: none;
+  width: 0.9em;
+  color: var(--soft);
+}
+.niceeval-waterfall details > summary.niceeval-waterfall-node::before { content: "\25B8"; }
+.niceeval-waterfall details[open] > summary.niceeval-waterfall-node::before { content: "\25BE"; }
+.niceeval-waterfall summary.niceeval-waterfall-node {
+  cursor: pointer;
+  list-style: none;
+}
+.niceeval-waterfall summary.niceeval-waterfall-node::-webkit-details-marker { display: none; }
+.niceeval-waterfall .niceeval-waterfall-node--failed { color: var(--bad); }
+.niceeval-waterfall .niceeval-waterfall-node-failed { flex: none; }
+.niceeval-waterfall .niceeval-waterfall-node-kind {
+  flex: none;
+  width: 5em;
+  color: var(--soft);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.niceeval-waterfall .niceeval-waterfall-node-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.niceeval-waterfall .niceeval-waterfall-node-dur {
+  flex: none;
+  min-width: 5.5em;
+  text-align: right;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+.niceeval-waterfall .niceeval-waterfall-node-children {
+  list-style: none;
+  margin: 0 0 0 0.45em;
+  padding: 0 0 0 0.6em;
+  border-left: 1px solid var(--line);
+}
+.niceeval-waterfall .niceeval-waterfall-title {
+  font-weight: 620;
+  margin-bottom: 8px;
+}
+.niceeval-waterfall .niceeval-waterfall-fold-summary { color: var(--muted); }
+.niceeval-waterfall .niceeval-waterfall-fold[open] > .niceeval-waterfall-fold-summary { margin-bottom: 2px; }
+
+/* ---- DiffView 原语(路径树与逐窗口 patch) ---- */
+.niceeval-diff-view {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.niceeval-diff-view .niceeval-diff-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+}
+/* 子树只留缩进与一条竖线:层级靠位置表达,不给每层再套一个面板。 */
+.niceeval-diff-view .niceeval-diff-tree .niceeval-diff-tree {
+  margin: 0 0 0 0.75em;
+  border: 0;
+  border-left: 1px solid var(--line);
+  border-radius: 0;
+  background: transparent;
+  overflow: visible;
+}
+.niceeval-diff-view .niceeval-diff-dir { border-bottom: 1px solid var(--line); }
+.niceeval-diff-view .niceeval-diff-dir:last-child { border-bottom: 0; }
+.niceeval-diff-view .niceeval-diff-dir-summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) max-content max-content;
+  align-items: baseline;
+  gap: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  list-style: none;
+  font-size: 12px;
+}
+.niceeval-diff-view .niceeval-diff-dir-summary::-webkit-details-marker { display: none; }
+.niceeval-diff-view .niceeval-diff-dir-name {
+  min-width: 0;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.niceeval-diff-view .niceeval-diff-dir-count {
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.niceeval-diff-view .niceeval-diff-file {
+  border-bottom: 1px solid var(--line);
+  font-size: 12px;
+}
+.niceeval-diff-view .niceeval-diff-file:last-child { border-bottom: 0; }
+.niceeval-diff-view .niceeval-diff-file-summary {
+  display: grid;
+  grid-template-columns: 1.25em minmax(0, 1fr) max-content;
+  align-items: baseline;
+  gap: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  list-style: none;
+}
+.niceeval-diff-view .niceeval-diff-file-summary::-webkit-details-marker { display: none; }
+.niceeval-diff-view .niceeval-diff-change {
+  color: var(--soft);
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.niceeval-diff-view .niceeval-diff-added .niceeval-diff-change { color: var(--good); }
+.niceeval-diff-view .niceeval-diff-modified .niceeval-diff-change { color: var(--warn); }
+.niceeval-diff-view .niceeval-diff-deleted .niceeval-diff-change { color: var(--bad); }
+.niceeval-diff-view .niceeval-diff-path {
+  min-width: 0;
+  font-family: var(--font-mono);
+  overflow-wrap: anywhere;
+}
+.niceeval-diff-view .niceeval-diff-lines {
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.niceeval-diff-view .niceeval-diff-lines-added { color: var(--good); }
+.niceeval-diff-view .niceeval-diff-lines-removed { color: var(--bad); }
+.niceeval-diff-view .niceeval-diff-patch {
+  margin: 0;
+  padding: 8px 0;
+  border-top: 1px solid var(--line);
+  background: color-mix(in oklch, var(--panel), black 4%);
+  font: 11px/1.45 var(--font-mono);
+  overflow-x: auto;
+}
+.niceeval-diff-view .niceeval-diff-patch-line {
+  display: grid;
+  grid-template-columns: 3.5em 3.5em minmax(0, 1fr);
+  gap: 0 8px;
+  padding: 0 12px;
+  white-space: pre;
+}
+.niceeval-diff-view .niceeval-diff-patch-ln {
+  color: var(--soft);
+  text-align: right;
+  user-select: none;
+}
+.niceeval-diff-view .niceeval-diff-patch-line--add { background: color-mix(in oklch, var(--good), transparent 88%); }
+.niceeval-diff-view .niceeval-diff-patch-line--add .niceeval-diff-patch-text { color: var(--good); }
+.niceeval-diff-view .niceeval-diff-patch-line--remove { background: color-mix(in oklch, var(--bad), transparent 88%); }
+.niceeval-diff-view .niceeval-diff-patch-line--remove .niceeval-diff-patch-text { color: var(--bad); }
+.niceeval-diff-view .niceeval-diff-patch-line--meta .niceeval-diff-patch-text { color: var(--muted); }
+.niceeval-diff-view .niceeval-diff-patch-missing,
+.niceeval-diff-view .niceeval-diff-patch-omitted {
+  margin: 0;
+  padding: 10px 12px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+}
+.niceeval-diff-view .niceeval-diff-patch-omitted code {
+  font-family: var(--font-mono);
+  overflow-wrap: anywhere;
+}
+.niceeval-diff-view .niceeval-diff-bytes {
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+/* 窗口分段:段头点明轮次,patch 正文保持逐行可复制。 */
+.niceeval-diff-view .niceeval-diff-window-title {
+  margin: 0;
+  padding: 6px 12px;
+  border-top: 1px solid var(--line);
+  color: var(--soft);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+}
+.niceeval-diff-view .niceeval-diff-window .niceeval-diff-patch { border-top: 0; }
+
+/* ---- Conversation 原语(分轮事件流) ---- */
+.niceeval-conversation {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: color-mix(in oklch, var(--panel), black 4%);
+}
+.niceeval-conversation .niceeval-conversation-session-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  min-height: 42px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--line);
+  background: color-mix(in oklch, var(--panel), white 2%);
+}
+.niceeval-conversation .niceeval-conversation-session-title {
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 680;
+}
+.niceeval-conversation .niceeval-conversation-session-stats {
+  display: flex;
+  gap: 16px;
+  margin: 0;
+}
+.niceeval-conversation .niceeval-conversation-session-stats > div {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: 5px;
+  align-items: baseline;
+}
+.niceeval-conversation .niceeval-conversation-session-stats dt {
+  color: var(--soft);
+  font-size: 10px;
+}
+.niceeval-conversation .niceeval-conversation-session-stats dd {
+  margin: 0;
+  color: var(--muted);
+  font: 11px/1.2 var(--font-mono);
+}
+.niceeval-conversation .niceeval-conversation-turn {
+  position: relative;
+  border: 0;
+  border-left: 3px solid transparent;
+  border-bottom: 1px solid var(--line);
+  border-radius: 0;
+  background: transparent;
+  padding: 12px 14px 12px 16px;
+}
+.niceeval-conversation .niceeval-conversation-turn:last-child { border-bottom: 0; }
+.niceeval-conversation .niceeval-conversation-turn--passed { border-left-color: var(--good); }
+.niceeval-conversation .niceeval-conversation-turn--failed { border-left-color: var(--bad); }
+.niceeval-conversation .niceeval-conversation-turn--errored { border-left-color: var(--bad); }
+.niceeval-conversation .niceeval-conversation-turn--skipped { border-left-color: var(--warn); }
+.niceeval-conversation .niceeval-conversation-turn-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em 0.75em;
+  align-items: baseline;
+  margin-bottom: 8px;
+}
+.niceeval-conversation .niceeval-conversation-turn-label {
+  font-weight: 650;
+  font-size: 13px;
+}
+.niceeval-conversation .niceeval-conversation-turn-duration {
+  color: var(--muted);
+  font: 11px/1.2 var(--font-mono);
+}
+.niceeval-conversation .niceeval-conversation-turn-verdict {
+  color: var(--muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.niceeval-conversation .niceeval-conversation-entries {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-left: 5px;
+  padding-left: 16px;
+}
+.niceeval-conversation .niceeval-conversation-entries::before {
+  content: "";
+  position: absolute;
+  inset: 8px auto 8px 4px;
+  width: 1px;
+  background: var(--line);
+}
+.niceeval-conversation .niceeval-conversation-entry,
+.niceeval-conversation .niceeval-conversation-entry > summary {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  align-items: baseline;
+  font-size: 12px;
+  line-height: 1.45;
+}
+.niceeval-conversation .niceeval-conversation-entry {
+  min-height: 30px;
+  padding: 6px 0;
+}
+.niceeval-conversation .niceeval-conversation-entry::before {
+  content: "";
+  position: absolute;
+  top: 13px;
+  left: -16px;
+  width: 7px;
+  height: 7px;
+  border: 2px solid color-mix(in oklch, var(--panel), white 8%);
+  border-radius: 50%;
+  background: var(--soft);
+  box-sizing: border-box;
+}
+.niceeval-conversation .niceeval-conversation-entry--failed::before { background: var(--bad); }
+.niceeval-conversation .niceeval-conversation-entry--expandable > summary {
+  cursor: pointer;
+  list-style: none;
+}
+.niceeval-conversation .niceeval-conversation-entry--expandable > summary::-webkit-details-marker { display: none; }
+.niceeval-conversation .niceeval-conversation-entry-kind {
+  color: var(--soft);
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.niceeval-conversation .niceeval-conversation-entry-preview {
+  min-width: 0;
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+.niceeval-conversation .niceeval-conversation-entry--failed .niceeval-conversation-entry-preview { color: var(--bad); }
+.niceeval-conversation .niceeval-conversation-entry-detail {
+  width: 100%;
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px dashed var(--line);
+}
+@media (max-width: 640px) {
+  .niceeval-conversation .niceeval-conversation-session-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .niceeval-conversation .niceeval-conversation-session-stats {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+.niceeval-conversation .niceeval-conversation-failed-command { border-left-color: var(--bad); }
+.niceeval-conversation .niceeval-conversation-failed-display {
+  margin-bottom: 8px;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.niceeval-conversation .niceeval-conversation-io {
+  max-height: 220px;
+  overflow: auto;
+  margin: 6px 0 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: color-mix(in oklch, var(--panel), black 8%);
+  color: var(--muted);
+  font: 11px/1.45 var(--font-mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ---- TurnTrace:紧凑 trajectory ledger + inline evidence accordion ----
+   版式借鉴 ui-trajectory 的 toolbar / 50px 三 lane overview / 30px ledger
+   rhythm；颜色只消费 Report token。静态页保持完整 ledger 和每条 evidence，
+   .niceeval-js 下的 selector 只打开原位细节、过滤和折叠。 */
+.niceeval-turn-trace {
+  --trace-toolbar-height: 32px;
+  overflow: clip;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  color: var(--text);
+}
+.niceeval-turn-trace button,
+.niceeval-turn-trace input { font: inherit; }
+.niceeval-turn-trace button:disabled { cursor: not-allowed; opacity: .42; }
+.niceeval-turn-trace .niceeval-trace-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* 参考实现的低矮 toolbar：标题、三个内联动作和右对齐搜索框。 */
+.niceeval-turn-trace .niceeval-trace-toolbar {
+  position: sticky;
+  z-index: 5;
+  top: 0;
+  display: flex;
+  align-items: center;
+  min-height: var(--trace-toolbar-height);
+  gap: 8px;
+  padding: 0 6px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+}
+.niceeval-turn-trace .niceeval-trace-toolbar-main,
+.niceeval-turn-trace .niceeval-trace-toolbar-actions {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+}
+.niceeval-turn-trace .niceeval-trace-toolbar-main { gap: 8px; }
+.niceeval-turn-trace .niceeval-trace-toolbar-actions { gap: 2px; }
+.niceeval-turn-trace .niceeval-trace-toolbar-title {
+  flex: none;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: .01em;
+  white-space: nowrap;
+}
+.niceeval-turn-trace .niceeval-trace-toolbar-button {
+  display: inline-flex;
+  flex: none;
+  height: 21px;
+  align-items: center;
+  gap: 4px;
+  border: 0;
+  border-radius: 3px;
+  padding: 0 5px;
+  background: transparent;
+  color: var(--soft);
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.niceeval-turn-trace .niceeval-trace-toolbar-button:hover,
+.niceeval-turn-trace .niceeval-trace-toolbar-button[aria-pressed="true"] {
+  background: color-mix(in oklch, var(--accent), transparent 91%);
+  color: var(--text);
+}
+.niceeval-turn-trace .niceeval-trace-toolbar-button:focus-visible {
+  outline: 1px solid var(--focus);
+  outline-offset: 1px;
+}
+.niceeval-turn-trace .niceeval-trace-toolbar-button svg,
+.niceeval-turn-trace .niceeval-trace-search svg {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.25;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.niceeval-turn-trace .niceeval-trace-toolbar-glyph {
+  color: currentColor;
+  font: 14px/12px var(--font-mono);
+}
+.niceeval-turn-trace .niceeval-trace-toolbar-button b {
+  color: var(--muted);
+  font: 10px/1.1 var(--font-mono);
+  font-weight: 500;
+}
+.niceeval-turn-trace .niceeval-trace-search {
+  display: flex;
+  flex: 0 1 176px;
+  min-width: 82px;
+  height: 22px;
+  align-items: center;
+  margin-left: auto;
+  gap: 4px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 0 6px;
+  color: var(--soft);
+  background: var(--panel-2);
+}
+.niceeval-turn-trace .niceeval-trace-search:hover { border-color: var(--line-strong); }
+.niceeval-turn-trace .niceeval-trace-search:focus-within {
+  border-color: var(--accent);
+  background: var(--panel);
+}
+.niceeval-turn-trace .niceeval-trace-search input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  color: var(--text);
+  background: transparent;
+  font-size: 11px;
+}
+.niceeval-turn-trace .niceeval-trace-search input::placeholder { color: var(--soft); }
+
+/* 50px overview:横轴是 event sequence 或完整轮次时长投影，纵轴固定三个语义 lane。 */
+.niceeval-turn-trace .niceeval-trace-timeline {
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-2);
+}
+.niceeval-turn-trace .niceeval-trace-timeline-plot {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  height: 50px;
+}
+.niceeval-turn-trace .niceeval-trace-timeline-labels {
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  border-right: 1px solid var(--line);
+  padding: 4px 5px;
+  color: var(--soft);
+  font: 9px/1 var(--font-mono);
+  text-align: right;
+}
+.niceeval-turn-trace .niceeval-trace-timeline-labels span {
+  align-self: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.niceeval-turn-trace .niceeval-trace-timeline-track {
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  background-image: linear-gradient(
+    to bottom,
+    transparent 32%,
+    color-mix(in oklch, var(--line), transparent 12%) 33%,
+    transparent 34%,
+    transparent 65%,
+    color-mix(in oklch, var(--line), transparent 12%) 66%,
+    transparent 67%
+  );
+}
+.niceeval-turn-trace .niceeval-trace-timeline-empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: var(--soft);
+  font-size: 11px;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+}
+.niceeval-turn-trace .niceeval-trace-timeline-boundary {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  left: var(--niceeval-trace-sequence-left);
+  width: 1px;
+  background: color-mix(in oklch, var(--line-strong), transparent 14%);
+  pointer-events: none;
+}
+.niceeval-turn-trace[data-niceeval-duration-mode="duration"] .niceeval-trace-timeline-boundary {
+  left: var(--niceeval-trace-duration-left);
+}
+.niceeval-turn-trace .niceeval-trace-timeline-span {
+  position: absolute;
+  z-index: 2;
+  top: calc(7px + var(--niceeval-trace-lane) * 14px);
+  left: calc(var(--niceeval-trace-sequence-left) + 1px);
+  width: max(2px, calc(var(--niceeval-trace-sequence-width) - 2px));
+  height: 8px;
+  min-width: 2px;
+  border: 0;
+  border-radius: 1px;
+  padding: 0;
+  background: var(--muted);
+  box-shadow: none;
+  cursor: pointer;
+  opacity: .8;
+}
+.niceeval-turn-trace[data-niceeval-duration-mode="duration"] .niceeval-trace-timeline-span {
+  left: calc(var(--niceeval-trace-duration-left) + 1px);
+  width: max(2px, calc(var(--niceeval-trace-duration-width) - 2px));
+}
+.niceeval-turn-trace .niceeval-trace-timeline-span[data-lane="input"] { background: var(--c0); }
+.niceeval-turn-trace .niceeval-trace-timeline-span[data-lane="model"] {
+  background: color-mix(in oklch, var(--accent), var(--bad) 36%);
+  opacity: 1;
+}
+.niceeval-turn-trace .niceeval-trace-timeline-span[data-lane="tools"] {
+  background: var(--warn);
+  opacity: 1;
+}
+.niceeval-turn-trace .niceeval-trace-timeline-span[data-failed="true"] { background: var(--bad); }
+.niceeval-turn-trace .niceeval-trace-timeline-span:hover,
+.niceeval-turn-trace .niceeval-trace-timeline-span:focus-visible,
+.niceeval-turn-trace .niceeval-trace-timeline-span[aria-pressed="true"] {
+  z-index: 3;
+  outline: 0;
+  opacity: 1;
+  box-shadow: 0 0 0 1px var(--panel-2), 0 0 0 2px var(--focus);
+}
+.niceeval-turn-trace .niceeval-trace-timeline-span[data-search-match="false"] { opacity: .14; }
+.niceeval-turn-trace .niceeval-trace-timeline-note {
+  margin: 0;
+  padding: 3px 8px 4px 72px;
+  border-top: 1px solid color-mix(in oklch, var(--line), transparent 40%);
+  color: var(--soft);
+  font-size: 10px;
+  line-height: 1.35;
+}
+
+/* Ledger:turn rail + compact kind tag + one-line summary。evidence 默认在行内
+   <details>，所以关 JavaScript 时页面仍是完整的可读正文。 */
+.niceeval-turn-trace .niceeval-trace-ledger { min-width: 0; }
+.niceeval-turn-trace .niceeval-trace-turn {
+  position: relative;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel);
+}
+.niceeval-turn-trace .niceeval-trace-turn:last-child { border-bottom: 0; }
+.niceeval-turn-trace .niceeval-trace-turn-head {
+  min-height: 29px;
+  border-bottom: 1px solid color-mix(in oklch, var(--line), transparent 24%);
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 32%);
+}
+.niceeval-turn-trace .niceeval-trace-turn-toggle {
+  display: grid;
+  grid-template-columns: 13px max-content minmax(0, 1fr) max-content;
+  width: 100%;
+  min-height: 29px;
+  align-items: center;
+  gap: 5px;
+  border: 0;
+  padding: 0 9px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  text-align: left;
+}
+.niceeval-turn-trace .niceeval-trace-turn-toggle:hover,
+.niceeval-turn-trace .niceeval-trace-turn-toggle:focus-visible {
+  outline: 0;
+  background: color-mix(in oklch, var(--accent), transparent 93%);
+}
+.niceeval-turn-trace .niceeval-trace-turn-chevron {
+  color: var(--soft);
+  font: 14px/1 var(--font-mono);
+  text-align: center;
+  transition: transform .12s ease;
+}
+.niceeval-turn-trace .niceeval-trace-turn-toggle[aria-expanded="false"] .niceeval-trace-turn-chevron { transform: rotate(-90deg); }
+.niceeval-turn-trace .niceeval-trace-turn-label { font-size: 11px; font-weight: 650; white-space: nowrap; }
+.niceeval-turn-trace .niceeval-trace-turn-facts {
+  display: flex;
+  min-width: 0;
+  gap: 8px;
+  overflow: hidden;
+  color: var(--soft);
+  font: 10px/1 var(--font-mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.niceeval-turn-trace .niceeval-trace-turn-verdict {
+  color: var(--muted);
+  font: 9px/1 var(--font-mono);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+.niceeval-turn-trace .niceeval-trace-turn--failed .niceeval-trace-turn-label,
+.niceeval-turn-trace .niceeval-trace-turn--failed-events .niceeval-trace-turn-label { color: var(--bad); }
+.niceeval-turn-trace .niceeval-trace-turn--passed .niceeval-trace-turn-label { color: var(--good); }
+.niceeval-turn-trace .niceeval-trace-empty-turn {
+  margin: 0;
+  padding: 8px 14px 9px 30px;
+  color: var(--soft);
+  font-size: 11px;
+}
+.niceeval-turn-trace .niceeval-trace-event-row {
+  --trace-rail: var(--line-strong);
+  position: relative;
+  min-width: 0;
+  border-bottom: 1px solid color-mix(in oklch, var(--line), transparent 34%);
+}
+.niceeval-turn-trace .niceeval-trace-event-row:last-child { border-bottom: 0; }
+.niceeval-turn-trace .niceeval-trace-event-row--failed { --trace-rail: var(--bad); }
+.niceeval-turn-trace .niceeval-trace-turn--passed .niceeval-trace-event-row { --trace-rail: var(--good); }
+.niceeval-turn-trace .niceeval-trace-event-turn-rail {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  left: 12px;
+  width: 1px;
+  background: color-mix(in oklch, var(--trace-rail), transparent 36%);
+  pointer-events: none;
+}
+.niceeval-turn-trace .niceeval-trace-event-row--tool .niceeval-trace-event-turn-rail {
+  left: 31px;
+  background: color-mix(in oklch, var(--warn), transparent 36%);
+}
+.niceeval-turn-trace .niceeval-trace-event-select {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: 74px minmax(0, 1fr) 70px 68px;
+  width: 100%;
+  min-height: 30px;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-left: 2px solid transparent;
+  padding: 0 9px 0 23px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  text-align: left;
+}
+.niceeval-turn-trace .niceeval-trace-event-row--tool .niceeval-trace-event-select { padding-left: 42px; }
+.niceeval-turn-trace .niceeval-trace-event-select:hover,
+.niceeval-turn-trace .niceeval-trace-event-select:focus-visible,
+.niceeval-turn-trace .niceeval-trace-event-select[aria-pressed="true"] {
+  outline: 0;
+  border-left-color: var(--focus);
+  background: color-mix(in oklch, var(--accent), transparent 92%);
+}
+.niceeval-turn-trace .niceeval-trace-event-kind {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--soft);
+  font: 10px/1 var(--font-mono);
+  font-weight: 650;
+  letter-spacing: .035em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.niceeval-turn-trace .niceeval-trace-event-kind[data-lane="input"] { color: var(--c0); }
+.niceeval-turn-trace .niceeval-trace-event-kind[data-lane="model"] { color: var(--accent); }
+.niceeval-turn-trace .niceeval-trace-event-kind[data-lane="tools"] { color: var(--warn); }
+.niceeval-turn-trace .niceeval-trace-event-summary {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.niceeval-turn-trace .niceeval-trace-event-row--failed .niceeval-trace-event-summary { color: var(--bad); }
+.niceeval-turn-trace .niceeval-trace-event-meta,
+.niceeval-turn-trace .niceeval-trace-event-status {
+  overflow: hidden;
+  color: var(--soft);
+  font: 10px/1 var(--font-mono);
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.niceeval-turn-trace .niceeval-trace-event-row--failed .niceeval-trace-event-status { color: var(--bad); }
+.niceeval-turn-trace .niceeval-trace-evidence {
+  position: relative;
+  z-index: 2;
+  margin: 0 9px 0 23px;
+  border-top: 1px dashed color-mix(in oklch, var(--line), transparent 25%);
+}
+.niceeval-turn-trace .niceeval-trace-event-row--tool .niceeval-trace-evidence { margin-left: 42px; }
+.niceeval-turn-trace .niceeval-trace-evidence > summary {
+  min-height: 24px;
+  padding: 6px 0;
+  color: var(--soft);
+  cursor: pointer;
+  font: 10px/1.2 var(--font-mono);
+  list-style: none;
+}
+.niceeval-turn-trace .niceeval-trace-evidence > summary::-webkit-details-marker { display: none; }
+.niceeval-turn-trace .niceeval-trace-evidence > summary::before { content: "›"; display: inline-block; margin-right: 5px; font-size: 13px; transition: transform .12s ease; }
+.niceeval-turn-trace .niceeval-trace-evidence[open] > summary::before { transform: rotate(90deg); }
+.niceeval-turn-trace .niceeval-trace-evidence-body {
+  display: grid;
+  gap: 8px;
+  padding: 0 0 10px;
+}
+.niceeval-turn-trace .niceeval-trace-evidence-raw {
+  max-width: 100%;
+  margin: 0;
+  overflow: auto;
+  padding: 8px 9px;
+  border: 1px solid var(--line);
+  background: color-mix(in oklch, var(--panel), black 7%);
+  color: var(--muted);
+  font: 11px/1.45 var(--font-mono);
+  tab-size: 2;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.niceeval-turn-trace .niceeval-trace-evidence-detail {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.niceeval-turn-trace .niceeval-trace-evidence-meta {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 4px 18px;
+  margin: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 38%);
+  font-size: 10px;
+}
+.niceeval-turn-trace .niceeval-trace-evidence-meta > div { display: flex; min-width: 0; gap: 6px; }
+.niceeval-turn-trace .niceeval-trace-evidence-meta dt { color: var(--soft); }
+.niceeval-turn-trace .niceeval-trace-evidence-meta dd { min-width: 0; margin: 0; color: var(--text); }
+.niceeval-turn-trace .niceeval-trace-evidence-tabs { display: none; }
+.niceeval-turn-trace .niceeval-trace-evidence-panel {
+  min-width: 0;
+  padding: 9px 10px 10px;
+  border: 1px solid var(--line);
+  background: color-mix(in oklch, var(--panel), black 5%);
+}
+.niceeval-turn-trace .niceeval-trace-evidence-panel + .niceeval-trace-evidence-panel { margin-top: 8px; }
+.niceeval-turn-trace .niceeval-trace-evidence-panel > h4 {
+  margin: 0 0 7px;
+  color: var(--soft);
+  font: 10px/1.2 var(--font-mono);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+.niceeval-turn-trace .niceeval-trace-evidence-panel .niceeval-text {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.niceeval-tool-evidence {
+  display: grid;
+  min-width: 0;
+  gap: 9px;
+}
+.niceeval-tool-evidence-context {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 5px 18px;
+  color: var(--soft);
+  font: 10px/1.35 var(--font-mono);
+}
+.niceeval-tool-evidence-context code,
+.niceeval-tool-evidence-context strong {
+  color: var(--text);
+  font: inherit;
+  font-weight: 650;
+}
+.niceeval-tool-evidence-context strong[data-failed="true"] { color: var(--bad); }
+.niceeval-tool-evidence-section { min-width: 0; }
+.niceeval-tool-evidence-section > h5 {
+  margin: 0 0 5px;
+  color: var(--soft);
+  font: 9px/1.2 var(--font-mono);
+  font-weight: 650;
+  letter-spacing: .055em;
+  text-transform: uppercase;
+}
+.niceeval-tool-evidence-code {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  max-height: 36rem;
+  margin: 0;
+  overflow: auto;
+  padding: 10px 11px;
+  border: 1px solid var(--line);
+  background: color-mix(in oklch, var(--panel), black 8%);
+  color: var(--muted);
+  font: 11px/1.5 var(--font-mono);
+  tab-size: 2;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.niceeval-tool-evidence-code--error {
+  border-color: color-mix(in oklch, var(--bad), transparent 58%);
+  color: color-mix(in oklch, var(--bad), var(--text) 38%);
+}
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence > summary { display: none; }
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence[open] { padding-bottom: 8px; }
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence-tabs {
+  display: flex;
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  border-top: 0;
+  padding: 0 6px;
+  background: var(--panel);
+}
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence-tabs button {
+  position: relative;
+  height: 30px;
+  flex: none;
+  border: 0;
+  padding: 0 8px;
+  background: transparent;
+  color: var(--soft);
+  cursor: pointer;
+  font-size: 11px;
+}
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence-tabs button:hover,
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence-tabs button[aria-selected="true"] { color: var(--text); }
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence-tabs button[aria-selected="true"]::after {
+  position: absolute;
+  right: 8px;
+  bottom: -1px;
+  left: 8px;
+  height: 1px;
+  background: var(--accent);
+  content: "";
+}
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence-tabs button:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence-panel { margin-top: 0; border-top: 0; }
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence-panel[data-active="false"] { display: none; }
+.niceeval-js .niceeval-turn-trace .niceeval-trace-evidence-panel > h4 { display: none; }
+
+/* Toolbar-driven collapse/search remains additive to static HTML. */
+.niceeval-js .niceeval-turn-trace .niceeval-trace-turn[data-collapsed="true"] .niceeval-trace-turn-events { display: none; }
+.niceeval-js .niceeval-turn-trace .niceeval-trace-turn[data-collapsed="true"][data-search-active="true"] .niceeval-trace-turn-events { display: block; }
+.niceeval-js .niceeval-turn-trace[data-calls-collapsed="true"] .niceeval-trace-event-row[data-tool-row="true"] { display: none; }
+.niceeval-js .niceeval-turn-trace[data-calls-collapsed="true"] .niceeval-trace-event-row[data-tool-row="true"][data-search-match="true"] { display: block; }
+.niceeval-js .niceeval-turn-trace .niceeval-trace-event-row.niceeval-row-hidden { display: none; }
+.niceeval-js .niceeval-turn-trace .niceeval-trace-turn[data-search-empty="true"] { display: none; }
+
+@media (max-width: 600px) {
+  .niceeval-turn-trace .niceeval-trace-toolbar { align-items: stretch; flex-wrap: wrap; padding: 5px 6px; }
+  .niceeval-turn-trace .niceeval-trace-toolbar-main { width: 100%; overflow-x: auto; }
+  .niceeval-turn-trace .niceeval-trace-search { flex-basis: 100%; margin-left: 0; }
+  .niceeval-turn-trace .niceeval-trace-timeline-plot { grid-template-columns: 54px minmax(0, 1fr); }
+  .niceeval-turn-trace .niceeval-trace-timeline-note { padding-left: 54px; }
+  .niceeval-turn-trace .niceeval-trace-timeline-labels { font-size: 8px; }
+  .niceeval-turn-trace .niceeval-trace-event-select { grid-template-columns: 58px minmax(0, 1fr) 48px; gap: 6px; }
+  .niceeval-turn-trace .niceeval-trace-event-status { display: none; }
+  .niceeval-turn-trace .niceeval-trace-turn-facts span:not(:first-child) { display: none; }
+}
+.niceeval-command-evidence {
+  display: block;
+}
+.niceeval-command-evidence-region {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+}
+.niceeval-command-evidence-summary {
+  cursor: pointer;
+  list-style: none;
+  padding: 10px 12px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 650;
+}
+.niceeval-command-evidence-summary::-webkit-details-marker { display: none; }
+.niceeval-command-evidence-summary::after {
+  content: "›";
+  float: right;
+  color: var(--soft);
+  font-size: 16px;
+  line-height: 1;
+  transition: transform 0.14s ease;
+}
+.niceeval-command-evidence-region[open] > .niceeval-command-evidence-summary::after {
+  transform: rotate(90deg);
+}
+.niceeval-command-evidence-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 10px 10px;
+}
+.niceeval-command-evidence-card {
+  border: 1px solid var(--line);
+  border-left: 3px solid var(--muted);
+  border-radius: var(--radius);
+  background: var(--panel);
+  padding: 10px 12px;
+}
+.niceeval-command-evidence--failed { border-left-color: var(--bad); }
+.niceeval-command-evidence--observed { border-left-color: var(--muted); }
+.niceeval-command-evidence--succeeded { border-left-color: var(--good); }
+.niceeval-command-evidence-card .niceeval-conversation-turn-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em 0.75em;
+  align-items: baseline;
+  margin-bottom: 8px;
+}
+.niceeval-command-evidence-card .niceeval-conversation-turn-label {
+  font-weight: 650;
+  font-size: 13px;
+}
+.niceeval-command-evidence-display {
+  margin-bottom: 8px;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.niceeval-command-evidence-card .niceeval-conversation-entry,
+.niceeval-command-evidence-card .niceeval-conversation-entry > summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  align-items: baseline;
+  font-size: 12px;
+  line-height: 1.45;
+}
+.niceeval-command-evidence-card .niceeval-conversation-entry > summary {
+  cursor: pointer;
+  list-style: none;
+}
+.niceeval-command-evidence-card .niceeval-conversation-entry > summary::-webkit-details-marker { display: none; }
+.niceeval-command-evidence-card .niceeval-conversation-io {
+  max-height: 220px;
+  overflow: auto;
+  margin: 6px 0 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: color-mix(in oklch, var(--panel), black 8%);
+  color: var(--muted);
+  font: 11px/1.45 var(--font-mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ---- 图表通用:panel 卡片、轴/网格/tooltip ---- */
+.niceeval-chart {
+  position: relative; /* tooltip 的定位根 */
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 14px 16px 8px;
+  margin: 1rem 0;
+  background: var(--panel);
+}
+.niceeval-chart .niceeval-chart-svg {
+  max-width: 880px;
+  width: 100%;
+  height: auto;
+  margin-inline: auto;
+  display: block;
+  overflow: visible;
+}
+.niceeval-report .niceeval-chart-grid line { stroke: var(--line); stroke-width: 1; }
+.niceeval-report .niceeval-chart-tick { fill: var(--muted); font-size: 10px; }
+.niceeval-report .niceeval-chart-xlabel,
+.niceeval-report .niceeval-chart-ylabel { fill: var(--muted); font-size: 12px; }
+.niceeval-report .niceeval-chart-better-hint { fill: var(--soft); font-size: 11px; }
+.niceeval-report .niceeval-chart-line {
+  stroke: var(--series);
+  stroke-width: 1.5;
+  fill: none;
+}
+.niceeval-report .niceeval-chart-area {
+  fill: color-mix(in srgb, var(--series) 28%, transparent);
+  stroke: none;
+}
+.niceeval-report .niceeval-chart-bar {
+  fill: var(--series);
+}
+.niceeval-report .niceeval-chart-dot {
+  fill: var(--series);
+  stroke: var(--panel);
+  stroke-width: 2;
+}
+.niceeval-report .niceeval-chart-point-label { fill: var(--text); font-size: 11px; }
+.niceeval-chart--bars-horizontal {
+  padding: 14px 16px;
+}
+.niceeval-chart .niceeval-chart-bars-heading {
+  margin-bottom: 10px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.niceeval-chart .niceeval-chart-bars {
+  display: grid;
+  grid-template-columns: max-content minmax(80px, 1fr) max-content;
+  align-items: center;
+  gap: 7px 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.niceeval-chart .niceeval-chart-bar-row {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: center;
+}
+.niceeval-chart .niceeval-chart-bar-label {
+  min-width: 0;
+  max-width: 24ch;
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.niceeval-chart .niceeval-chart-bar-track {
+  height: 24px;
+  overflow: hidden;
+  background: var(--panel-2);
+}
+.niceeval-chart .niceeval-chart-bar-fill {
+  display: block;
+  height: 100%;
+  min-width: 2px;
+}
+.niceeval-chart
+  .niceeval-chart-bar-fill:not(.niceeval-series-fill-v2):not(.niceeval-series-fill-v3):not(.niceeval-series-fill-v4) {
+  background: color-mix(in srgb, var(--series) 74%, var(--panel));
+}
+.niceeval-chart .niceeval-chart-bar-value {
+  display: inline-flex;
+  gap: 3px;
+  justify-content: flex-end;
+  min-width: 5ch;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+  text-align: right;
+}
+.niceeval-chart .niceeval-chart-bar-value sup {
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 400;
+}
+@media (max-width: 560px) {
+  .niceeval-chart .niceeval-chart-bars {
+    grid-template-columns: minmax(7ch, max-content) minmax(48px, 1fr) max-content;
+    gap: 6px 8px;
+  }
+  .niceeval-chart .niceeval-chart-bar-track { height: 20px; }
+}
+.niceeval-chart .niceeval-chart-legend {
+  display: flex;
+  max-width: 880px;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.9rem;
+  color: var(--muted);
+  font-size: 0.85em;
+  margin: 0.5rem auto 0;
+  padding: 0;
+  list-style: none;
+}
+.niceeval-chart .niceeval-chart-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+/* 图例色块由 renderer 显式输出(含 variant 图案 / 线型 / marker),不再用 ::before 单色方块。 */
+.niceeval-chart .niceeval-chart-legend-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  flex: 0 0 auto;
+  border-radius: var(--radius);
+}
+.niceeval-chart
+  .niceeval-chart-legend-swatch:not(.niceeval-series-fill-v2):not(.niceeval-series-fill-v3):not(.niceeval-series-fill-v4) {
+  background: color-mix(in srgb, var(--series) 74%, var(--panel));
+}
+.niceeval-chart .niceeval-chart-legend-swatch-svg {
+  display: block;
+  flex: 0 0 auto;
+  overflow: visible;
+}
+.niceeval-chart .niceeval-chart-missing {
+  max-width: 880px;
+  color: var(--warn);
+  font-size: 0.85em;
+  margin: 0.35rem auto 0;
+}
+.niceeval-chart .niceeval-chart-empty {
+  color: var(--muted);
+  padding: 1.5rem 0.5rem;
+  text-align: center;
+}
+
+.niceeval-report .niceeval-scatter-point { cursor: default; }
+.niceeval-report .niceeval-line-point { fill: var(--series); }
+
+/* enhance.js 的样式化 tooltip(无 JS 时退化为 SVG <title>) */
+.niceeval-report .niceeval-tooltip {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  margin-top: -12px;
+  background: var(--panel);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius);
+  padding: 8px 10px;
+  font-size: 12px;
+  white-space: pre;
+  pointer-events: none;
+  z-index: 5;
+}
+.niceeval-report .niceeval-tooltip b { font-size: 13px; display: block; }
+.niceeval-report .niceeval-tooltip .niceeval-tooltip-meta { color: var(--muted); margin-top: 2px; }
+
+/* ---- Attempt 详情组件族 ---------------------------------------------------
+   这些规则属于 report web face，不属于 view dialog chrome：同一份 AttemptDetails
+   无论直接打开独立文档、塞进 view dialog，还是嵌入用户自己的 React 页面，都必须
+   只靠 niceeval/report/react/styles.css 得到完整可读的结构化布局。 ---- */
+
+/* Summary:判定与 locator 是标题行，身份/时间/成本是一片 Grid。标题行与能力行在面板外
+   ——面板那一圈框由 Grid 自己画,这里再套一层就是贴着的双线。 */
+.niceeval-attempt-summary {
+  display: grid;
+  gap: 10px;
+}
+.niceeval-attempt-summary .niceeval-attempt-summary-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.niceeval-attempt-summary .niceeval-attempt-summary-locator {
+  min-width: 0;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 650;
+  overflow-wrap: anywhere;
+}
+/* 格内容:紧凑身份表,不是读数卡——所以用自己的 label/value 排版,不复用 Stat 的字号。
+   一行几格、什么宽度换列、格内多密仍由 Grid 算,这里一个像素都不写。 */
+.niceeval-kpi {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+.niceeval-kpi-label {
+  color: var(--soft);
+  font-size: 11px;
+  font-weight: 560;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.niceeval-kpi-value {
+  color: var(--text);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.niceeval-attempt-summary .niceeval-attempt-summary-caps {
+  margin: 0;
+  color: var(--soft);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}
+
+/* Error 与断言:中性底 + 失败左边条;可展开明细。 */
+/* 只有 gate failed(tone-bad)留左边色条;soft/passed/na 用 hairline */
+.niceeval-report .niceeval-tone-good { color: var(--good); }
+.niceeval-report .niceeval-tone-warn { color: var(--warn); }
+.niceeval-report .niceeval-tone-bad { color: var(--bad); }
+.niceeval-report .niceeval-tone-na { color: var(--soft); }
+
+/* SourceView 原语:GitHub diff 式带标注源码。整行浅染 + 2px 左缘 + 行号位标记,整块统一横向
+   滚动;视觉规范单源见 docs/feature/reports/library.md
+   「web 面视觉规范」,DOM 骨架见同目录 presentation.md「SourceView 的 DOM 骨架」。
+   普通行是 div,带证据的行是可点击 details;展开区钉在可视左缘,不跟代码横滚。 */
+.niceeval-source-view {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  /* 给 .niceeval-source-line-detail 提供 cqw:展开区按面板可视宽度换行,不跟代码横滚。 */
+  container-type: inline-size;
+}
+.niceeval-source-view .niceeval-source-block + .niceeval-source-block,
+.niceeval-source-view .niceeval-source-block + .niceeval-source-unmapped {
+  border-top: 1px solid var(--line);
+}
+.niceeval-source-view .niceeval-source-block-path {
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+  background: color-mix(in oklch, var(--panel-2), var(--line) 35%);
+}
+.niceeval-source-view .niceeval-source-block--nested > .niceeval-source-block-path {
+  font-size: 11px;
+  font-weight: 550;
+}
+.niceeval-source-view .niceeval-source-lines {
+  overflow-x: auto;
+  padding: 6px 0;
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 48%);
+  font: 12.5px/1.65 var(--font-mono);
+  /* 横滚时行盒要撑到最长行宽度,底色/左缘才能盖满整行,展开区的 sticky 才有位移空间。 */
+  display: grid;
+}
+.niceeval-source-view .niceeval-source-line { color: var(--text); }
+.niceeval-source-view .niceeval-source-line > summary {
+  cursor: pointer;
+  list-style: none;
+}
+.niceeval-source-view .niceeval-source-line > summary::-webkit-details-marker { display: none; }
+/* 行盒:行号位 / 代码 / 右缘 meta 三列。div 行与 details 行共用同一个内层 span,
+   状态底色与左缘因此对两种行一致生效。 */
+.niceeval-source-view .niceeval-source-line-summary {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) auto;
+  align-items: center;
+  min-width: 100%;
+  width: max-content;
+  padding: 1px 0;
+}
+.niceeval-source-view details.niceeval-source-line > summary:hover .niceeval-source-line-summary {
+  background-image: linear-gradient(
+    color-mix(in oklch, var(--text), transparent 95%),
+    color-mix(in oklch, var(--text), transparent 95%)
+  );
+}
+.niceeval-source-view .niceeval-source-gutter {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 12px;
+  color: var(--soft);
+  font-size: 11px;
+  user-select: none;
+}
+.niceeval-source-view .niceeval-source-gutter-mark svg {
+  width: 13px;
+  height: 13px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.niceeval-source-view .niceeval-source-code {
+  color: var(--text);
+  font: inherit;
+  white-space: pre;
+}
+/* 右缘 meta 钉在滚动视口右缘,横滚时始终可见。它盖在代码上,所以自带与所在行同色的
+   不透明底:基色是源码块底色,叠一层该行的 tone 浅染,视觉上与行底连成一片。 */
+.niceeval-source-view .niceeval-source-meta {
+  position: sticky;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px 0 16px;
+  font: 11px/1.65 var(--font-mono);
+  white-space: nowrap;
+  background-color: color-mix(in oklch, var(--panel-2), var(--panel) 48%);
+  background-image: linear-gradient(
+    color-mix(in oklch, var(--line-tone, transparent), transparent 92%),
+    color-mix(in oklch, var(--line-tone, transparent), transparent 92%)
+  );
+}
+.niceeval-source-view .niceeval-source-pill {
+  padding: 1px 8px;
+  border-radius: var(--radius);
+  background: color-mix(in oklch, var(--text), transparent 90%);
+  font-weight: 650;
+}
+.niceeval-source-view .niceeval-source-abort-mark {
+  color: var(--bad);
+  font-weight: 700;
+}
+/* 展开 chevron 是可点击行的纯呈现记号,由 CSS 提供,组件不为它发一个节点。 */
+.niceeval-source-view details.niceeval-source-line > summary .niceeval-source-meta::after {
+  content: "›";
+  color: var(--soft);
+  font-size: 16px;
+  line-height: 1;
+  transition: transform 0.14s ease;
+}
+.niceeval-source-view details.niceeval-source-line[open] > summary .niceeval-source-meta::after {
+  color: var(--text);
+  transform: rotate(90deg);
+}
+/* 行状态:每档只声明一个 tone 色,染色 / 左缘 / 行号位取同一个变量。 */
+.niceeval-source-view .niceeval-source-line--send { --line-tone: var(--c0); }
+.niceeval-source-view .niceeval-source-line--passed { --line-tone: var(--good); }
+.niceeval-source-view .niceeval-source-line--gate-fail { --line-tone: var(--bad); }
+.niceeval-source-view .niceeval-source-line--soft-fail,
+.niceeval-source-view .niceeval-source-line--unavailable { --line-tone: var(--warn); }
+.niceeval-source-view .niceeval-source-line--send > summary > .niceeval-source-line-summary,
+.niceeval-source-view .niceeval-source-line--passed > summary > .niceeval-source-line-summary,
+.niceeval-source-view .niceeval-source-line--gate-fail > summary > .niceeval-source-line-summary,
+.niceeval-source-view .niceeval-source-line--soft-fail > summary > .niceeval-source-line-summary,
+.niceeval-source-view .niceeval-source-line--unavailable > summary > .niceeval-source-line-summary,
+.niceeval-source-view .niceeval-source-line--send > .niceeval-source-line-summary,
+.niceeval-source-view .niceeval-source-line--passed > .niceeval-source-line-summary,
+.niceeval-source-view .niceeval-source-line--gate-fail > .niceeval-source-line-summary,
+.niceeval-source-view .niceeval-source-line--soft-fail > .niceeval-source-line-summary,
+.niceeval-source-view .niceeval-source-line--unavailable > .niceeval-source-line-summary {
+  background-color: color-mix(in oklch, var(--line-tone), transparent 92%);
+  box-shadow: inset 2px 0 0 var(--line-tone);
+}
+.niceeval-source-view .niceeval-source-line--send .niceeval-source-gutter,
+.niceeval-source-view .niceeval-source-line--passed .niceeval-source-gutter,
+.niceeval-source-view .niceeval-source-line--gate-fail .niceeval-source-gutter,
+.niceeval-source-view .niceeval-source-line--soft-fail .niceeval-source-gutter,
+.niceeval-source-view .niceeval-source-line--unavailable .niceeval-source-gutter {
+  color: var(--line-tone);
+}
+/* 中止行之后的源码行没跑到:整体降灰,行号照常。 */
+.niceeval-source-view .niceeval-source-line-unreached { opacity: 0.45; }
+.niceeval-source-view .niceeval-source-line-detail {
+  border-top: 1px dashed var(--line);
+  padding: 8px 12px 10px 44px;
+  background: var(--panel);
+  position: sticky;
+  left: 0;
+  width: 100cqw;
+  max-width: 100cqw;
+  box-sizing: border-box;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  box-shadow: inset 2px 0 0 var(--line-tone, transparent);
+}
+/* 展开区内容:判定摘要一行、细节正文等宽、给分记录一行。同行重复 send
+   复用 Conversation 的完整轮卡；轮头必须保留，才能区分 outcome 与 duration。 */
+.niceeval-source-view .niceeval-source-line-detail .niceeval-conversation-turn { border-left: 0; padding-left: 0; }
+.niceeval-source-view .niceeval-source-line-detail > * + * { margin-top: 6px; }
+.niceeval-source-view .niceeval-source-assertion {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 650;
+}
+.niceeval-source-view .niceeval-source-assertion-body {
+  margin: 0;
+  padding: 6px 10px;
+  border-radius: var(--radius);
+  background: var(--panel-2);
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.niceeval-source-view .niceeval-source-score-entry {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.niceeval-source-view .niceeval-source-unmapped .niceeval-source-assertion,
+.niceeval-source-view .niceeval-source-unmapped .niceeval-source-score-entry { margin-bottom: 4px; }
+
+/* 调用片段:每层一条左缘层级线,summary 自己就是计票 / 挣分摘要。展开区已经缩到代码列,
+   这里只加一层缩进,不再叠加行号列宽度。 */
+.niceeval-source-view .niceeval-source-calls {
+  padding-left: 10px;
+  border-left: 2px solid var(--line-strong);
+}
+/* opaque 帧下继续挂调用树时,层级线接着往里缩一层。 */
+.niceeval-source-view .niceeval-source-opaque > .niceeval-source-calls { margin-top: 2px; }
+.niceeval-source-view .niceeval-source-call > summary {
+  cursor: pointer;
+  list-style: none;
+  padding: 4px 12px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 650;
+}
+.niceeval-source-view .niceeval-source-call > summary::-webkit-details-marker { display: none; }
+.niceeval-source-view .niceeval-source-call--passed > summary { color: var(--good); }
+.niceeval-source-view .niceeval-source-call--gate-fail > summary { color: var(--bad); }
+.niceeval-source-view .niceeval-source-call--soft-fail > summary,
+.niceeval-source-view .niceeval-source-call--unavailable > summary { color: var(--warn); }
+.niceeval-source-view .niceeval-source-call .niceeval-source-block { border-top: 1px solid var(--line); }
+/* package 帧与缺正文的帧:不可展开的中间 label,更深的项目源码继续显示。 */
+.niceeval-source-view .niceeval-source-opaque-label {
+  padding: 4px 12px;
+  color: var(--muted);
+  font-size: 11px;
+  font-style: italic;
+}
+/* 兜底区:源码块之后、与源码块同宽。 */
+.niceeval-source-view .niceeval-source-unmapped {
+  padding: 8px 12px 10px;
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 48%);
+}
+.niceeval-source-view .tok-comment { color: light-dark(#6e7781, #6a9955); font-style: italic; }
+.niceeval-source-view .tok-str { color: light-dark(#953800, #ce9178); }
+.niceeval-source-view .tok-kw { color: light-dark(#0b62d6, #569cd6); }
+.niceeval-source-view .tok-num { color: light-dark(#116329, #b5cea8); }
+.niceeval-source-view .tok-fn { color: light-dark(#755f00, #dcdcaa); }
+
+/* Diagnostics 与 usage:技术信息保持紧凑。usage 就是一片 Grid,自己不写几何,也不按视口
+   换形态——视口 media query 量的是窗口,不是这块内容实际拿到多宽;attempt 详情塞进 view
+   的 dialog 时,窄面板配宽窗口会照着窗口排版。 */
+.niceeval-usage-table .niceeval-kpi-value { font-family: var(--font-mono); }
+
+/* ---- 排版原语 Row / Col / Section / Text ---- */
+.niceeval-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.niceeval-col > .niceeval-report { margin: 0; }
+.niceeval-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+.niceeval-row > * {
+  flex: 1 1 20rem;
+  min-width: 0;
+}
+.niceeval-section .niceeval-section-title {
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0 0 10px;
+}
+.niceeval-section > .niceeval-report { margin: 0 0 1rem; }
+.niceeval-text {
+  color: var(--muted);
+  margin: 0.25rem 0;
+}
+
+/* ---- Section header:标题行右侧短元信息(meta),同一行右对齐,空间不足自动换行
+        (docs/feature/reports/library.md「Grid 与 Stat」)。省略 meta 时 Section
+        渲染的是裸 <h2>(既有结构),不套这层 header——旧行为逐字节不变。 ---- */
+.niceeval-section-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 4px 16px;
+  margin: 0 0 10px;
+}
+.niceeval-section-header .niceeval-section-title { margin: 0; }
+.niceeval-section-header .niceeval-section-meta {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+/* ---- Grid:自由摘要面板的格子容器(docs/feature/reports/architecture.md「排版原语的语义层
+        与面内布局」、library/layout.md「换列规则」「体裁与体量」)。外层 .niceeval-grid-fit
+        是具名 inline-size 容器——容器查询查的是祖先,Grid 自己声明 container-type 查不到
+        自己。基线一列;≥2 列的断点由每个 Grid 随身的 @container 规则写出(格数的纯函数,
+        几何常量在 grid-layout.ts)。stylesheet 不为某个格数写死断点,随身规则也不写留白和
+        字号——它只声明 --grid-columns,体量在这里按算出来的实际格宽插值。末行恰一格时同行
+        规则附带 grid-column:1/-1 铺满;短于一行但不止一格时按上面各行格宽左对齐,不拉伸。
+        容器查询未生效时仍是一列,节点与文本完整。 ---- */
+.niceeval-grid-fit {
+  container-type: inline-size;
+  container-name: niceeval-grid;
+}
+.niceeval-grid {
+  --grid-columns: 1;
+  /* 实际格宽:容器宽扣掉格线后除以列数。体量是它的函数,不是作者选的档—— 160px(最小
+     格宽)取下限,涨到 220px 到上限,中间线性过渡。 */
+  --grid-cell-width: calc((100cqi - (var(--grid-columns) - 1) * 1px) / var(--grid-columns));
+  --grid-cell-padding: clamp(10px, calc(10px + (var(--grid-cell-width) - 160px) * 0.1), 16px);
+  --stat-value-size: clamp(16px, calc(16px + (var(--grid-cell-width) - 160px) * 0.0667), 20px);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0;
+  overflow: hidden;
+  margin: 1rem 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+}
+/* 一片格子读成一个面板:每格只向右、向下各投一条线,落到面板边界外的那几条被
+   overflow 裁掉——不靠每格自画四边框,也不靠相邻项拼半边框,所以换行、末行变短、
+   末行只剩一格都不会缺边或双线。末格右边没有邻居,只留下面那条。 */
+.niceeval-grid-cell {
+  min-width: 0;
+  padding: var(--grid-cell-padding);
+  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
+}
+.niceeval-grid > .niceeval-grid-cell:last-child { box-shadow: 0 1px 0 var(--line); }
+/* 格内留白由 Grid 给:直接放进格子的区块不再自带块间距,否则每格都比内容高出一圈,
+   矮格底部那片空白会读成「这张卡没填满」。 */
+.niceeval-grid-cell > .niceeval-report { margin: 0; }
+/* 一个 cell 里嵌套多个 Stat(Col 归拢):只有纵向留白,没有内部分隔线。 */
+.niceeval-grid-cell > .niceeval-col { gap: calc(var(--grid-cell-padding) * 0.75); }
+
+/* ---- Stat:label / 主值 / detail 三段;label 与 detail 弱化层级,value 用 tabular
+        numerals;tone 是主值的语义色,只染 value——positive 不会把 label 和 detail
+        一并染色。 ---- */
+.niceeval-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.niceeval-stat .niceeval-stat-label {
+  color: var(--soft);
+  font-size: 12px;
+  font-weight: 560;
+  overflow-wrap: anywhere;
+}
+.niceeval-stat .niceeval-stat-value {
+  font-size: var(--stat-value-size);
+  font-weight: 700;
+  line-height: 1.15;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+  overflow-wrap: anywhere;
+}
+/* Generic table values stay on one line, but a Stat can carry an auditable
+   cost projection summary. Let that value wrap inside its Grid cell instead
+   of being clipped by the panel's border-overflow mask. */
+.niceeval-stat .niceeval-value { white-space: normal; }
+.niceeval-stat .niceeval-stat-detail {
+  color: var(--muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.niceeval-stat--positive .niceeval-stat-value { color: var(--good); }
+.niceeval-stat--negative .niceeval-stat-value { color: var(--bad); }
+.niceeval-stat--warning .niceeval-stat-value { color: var(--warn); }
+
+/* SampleOverview 把通用 Grid / Stat 组合成官方摘要条；数据与 Cell 仍走原语。摘要条上没有
+   第二层皮肤:一行摆几格、什么宽度换列、格内多密、边框长什么样全归 Grid 自己算,这里只剩
+   摘要条自己那行时间范围文案(docs/feature/reports/library.md
+   「摘要条的外观」)。 */
+.niceeval-sample-summary .niceeval-grid { margin: 0; }
+.niceeval-sample-summary .niceeval-sample-summary-range {
+  margin: -0.35rem 0 0;
+  color: var(--soft);
+  font-size: 13px;
+}
+
+/* ---- Tabs:静态 HTML 每 tab 一个 <details> 且仅首个 open(无 JS = 手风琴卡片,内容完整);
+        enhance.js 在 <html> 上打 niceeval-js 后升级为单选 tab 条:收起的 tab 缩成一枚标题排在首行,
+        唯一展开的 tab 以 100% 宽 + order:1 换行到下方,活动标题带高亮下划线、贴着面板顶部。
+        不能用 display:contents 把 summary/body 直接投影进 flex 容器——Chrome 里 <details> 的
+        UA shadow slot 会成为 flex item,子元素的 order 失效、收起面板还留 0 宽盒 ---- */
+.niceeval-tabs > .niceeval-tab {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  margin-bottom: 8px;
+}
+.niceeval-tabs > .niceeval-tab > .niceeval-tab-title {
+  padding: 10px 14px;
+  cursor: pointer;
+  user-select: none;
+  font-weight: 620;
+  list-style: none;
+}
+.niceeval-tabs > .niceeval-tab > .niceeval-tab-title::-webkit-details-marker { display: none; }
+.niceeval-tabs > .niceeval-tab > .niceeval-tab-title::before {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-right: 10px;
+  border-right: 1.5px solid var(--muted);
+  border-bottom: 1.5px solid var(--muted);
+  transform: rotate(-45deg);
+  transition: transform 0.15s;
+  vertical-align: 1px;
+}
+.niceeval-tabs > .niceeval-tab[open] > .niceeval-tab-title::before { transform: rotate(45deg); }
+.niceeval-tabs > .niceeval-tab > .niceeval-tab-body { padding: 2px 14px 12px; }
+.niceeval-tabs .niceeval-tab-body > .niceeval-report:first-child { margin-top: 0; }
+.niceeval-tabs .niceeval-tab-body > .niceeval-report:last-child { margin-bottom: 0; }
+
+:root.niceeval-js .niceeval-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  column-gap: 2px;
+}
+:root.niceeval-js .niceeval-tabs > .niceeval-tab {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+:root.niceeval-js .niceeval-tabs > .niceeval-tab[open] {
+  flex: 1 1 100%;
+  order: 1;
+}
+:root.niceeval-js .niceeval-tabs > .niceeval-tab > .niceeval-tab-title {
+  padding: 8px 14px 9px;
+  border-radius: var(--radius) var(--radius) 0 0;
+  color: var(--muted);
+  font-weight: 560;
+  box-shadow: inset 0 -1px 0 var(--line);
+}
+:root.niceeval-js .niceeval-tabs > .niceeval-tab > .niceeval-tab-title::before { content: none; }
+:root.niceeval-js .niceeval-tabs > .niceeval-tab > .niceeval-tab-title:hover {
+  color: var(--text);
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 35%);
+}
+:root.niceeval-js .niceeval-tabs > .niceeval-tab[open] > .niceeval-tab-title {
+  width: max-content;
+  max-width: 100%;
+  color: var(--text);
+  font-weight: 650;
+  box-shadow: inset 0 -2px 0 var(--c0);
+  cursor: default;
+}
+:root.niceeval-js .niceeval-tabs > .niceeval-tab > .niceeval-tab-body { padding: 14px 0 0; }
+
+/* ---- View document + Host shell -------------------------------------------------
+ * This is intentionally the only shell stylesheet. The HTML Host emits structure
+ * and theme variables, but owns no competing reset or Report-content rules.
+ */
+html.niceeval-view-document {
+  box-sizing: border-box;
+  min-width: 320px;
+  color-scheme: dark;
+  background: var(--niceeval-color-page, #050505);
+  color: var(--niceeval-color-text, #ededed);
+  font-family: var(--niceeval-font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "PingFang SC", sans-serif);
+  font-size: 16px;
+  line-height: 1.5;
+  text-size-adjust: 100%;
+}
+
+html.niceeval-view-document *,
+html.niceeval-view-document *::before,
+html.niceeval-view-document *::after { box-sizing: inherit; }
+
+html.niceeval-view-document body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--niceeval-color-page, #050505);
+  color: var(--niceeval-color-text, #ededed);
+  letter-spacing: 0;
+}
+
+.niceeval-view-shell {
+  min-height: 64px;
+  padding: 0 clamp(20px, 5vw, 80px);
+  border-bottom: 1px solid var(--niceeval-color-border, #262626);
+  background: var(--niceeval-color-page, #050505);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 28px;
+}
+
+.niceeval-view-brand,
+.niceeval-view-nav a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.niceeval-view-brand {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: baseline;
+  gap: 12px;
+  font-size: 20px;
+  font-weight: 690;
+}
+
+.niceeval-view-mark {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 1.25px solid currentColor;
+  transform: rotate(45deg);
+}
+
+.niceeval-view-nav {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 22px;
+  color: var(--niceeval-color-text-secondary, #a1a1aa);
+  font-size: 14px;
+}
+
+.niceeval-view-nav ul {
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  gap: 22px;
+  list-style: none;
+}
+
+.niceeval-view-nav a {
+  font: inherit;
+  white-space: nowrap;
+  transition: color 120ms ease;
+}
+
+.niceeval-view-nav a:hover,
+.niceeval-view-nav a[aria-current="page"] {
+  color: var(--niceeval-color-text, #ededed);
+}
+
+.niceeval-view-nav a[aria-current="page"] { font-weight: 560; }
+
+.niceeval-view-locale {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  overflow: hidden;
+  border: 1px solid var(--niceeval-color-border, #262626);
+  border-radius: var(--niceeval-radius, 0);
+  background: var(--niceeval-color-surface, #0b0b0b);
+}
+
+.niceeval-view-locale button {
+  height: 30px;
+  min-width: 44px;
+  border: 0;
+  border-right: 1px solid var(--niceeval-color-border, #262626);
+  padding: 0;
+  color: var(--niceeval-color-text-secondary, #a1a1aa);
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.niceeval-view-locale button:last-child { border-right: 0; }
+.niceeval-view-locale button:hover { color: var(--niceeval-color-text, #ededed); }
+.niceeval-view-locale button.is-active {
+  color: var(--niceeval-color-text, #ededed);
+  background: var(--niceeval-color-surface-subtle, #111111);
+  font-weight: 620;
+}
+
+.niceeval-view-nav a:focus-visible,
+.niceeval-view-locale button:focus-visible,
+.niceeval-view-brand:focus-visible {
+  outline: 1px solid var(--niceeval-color-focus, #cbd6dc);
+  outline-offset: 2px;
+}
+
+.niceeval-view-main {
+  width: min(1120px, calc(100vw - 40px));
+  margin: 0 auto;
+  padding: clamp(52px, 7vw, 82px) 0 72px;
+}
+
+.niceeval-view-report-slot { margin: 0 auto 36px; }
+
+/* View shell owns only the modal chrome. The report body inside the dialog
+   keeps the same closed product markup and the same stylesheet as its direct
+   route; the runtime injects no second CSS owner. */
+.niceeval-view-dialog {
+  /* Matches the old Radix DialogContent utility contract:
+     `flex ... flex-col overflow-hidden`. Without this, a long closed detail
+     document is laid out at its full height and then clipped by max-height,
+     instead of giving its body the old independently-scrollable viewport. */
+  display: flex;
+  flex-direction: column;
+  width: min(1120px, calc(100vw - 48px));
+  max-width: none;
+  max-height: min(86vh, 820px);
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--niceeval-color-border-strong, #343434);
+  border-radius: var(--niceeval-radius, 0);
+  color: var(--niceeval-color-text, #ededed);
+  background: var(--niceeval-color-surface, #0b0b0b);
+  box-shadow: 0 20px 60px rgb(0 0 0 / 45%);
+}
+
+/* An author display declaration overrides the browser's default
+   `dialog:not([open]) { display: none }` rule. Preserve the legacy Radix
+   unmount result when native dialog.close() removes [open]. */
+.niceeval-view-dialog:not([open]) { display: none; }
+
+.niceeval-view-dialog::backdrop { background: rgb(0 0 0 / 90%); }
+
+.niceeval-view-dialog-head {
+  flex: 0 0 auto;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 16px 28px 12px;
+  border-bottom: 1px solid var(--niceeval-color-border, #262626);
+  background: var(--niceeval-color-surface, #0b0b0b);
+}
+
+.niceeval-view-dialog-title {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.niceeval-view-dialog-close {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--niceeval-radius, 0);
+  color: var(--niceeval-color-text-secondary, #a1a1aa);
+  background: none;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.niceeval-view-dialog-close:hover {
+  border-color: var(--niceeval-color-border, #262626);
+  color: var(--niceeval-color-text, #ededed);
+  background: var(--niceeval-color-surface-subtle, #111);
+}
+.niceeval-view-dialog-close:focus-visible {
+  outline: 1px solid var(--niceeval-color-focus, #cbd6dc);
+  outline-offset: 2px;
+}
+
+.niceeval-view-dialog-body {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 8px 28px 28px;
+  overflow-y: auto;
+}
+
+.niceeval-view-problems {
+  margin: 24px 0 0;
+  padding: 10px;
+  border: 1px solid var(--niceeval-color-warning, #e8b84a);
+  color: var(--niceeval-color-warning, #e8b84a);
+  background: var(--niceeval-color-surface, #0b0b0b);
+}
+
+.niceeval-view-problems h2 { margin: 0 0 8px; font-size: 14px; }
+.niceeval-view-problems ul { margin: 0; padding-left: 20px; }
+.niceeval-view-noscript { margin: 0; color: var(--niceeval-color-text-secondary, #a1a1aa); }
+
+[data-niceeval-locale][hidden] { display: none !important; }
+
+@media (max-width: 760px) {
+  .niceeval-view-shell { padding: 0 20px; }
+  .niceeval-view-nav { display: none; }
+  .niceeval-view-locale button { min-width: 40px; }
+  .niceeval-view-main { width: min(calc(100vw - 28px), 1120px); padding-top: 42px; }
+}
+
+@media print {
+  .niceeval-view-shell { position: static; }
+  .niceeval-view-locale { display: none; }
+  .niceeval-view-main { width: auto; padding: 0; }
+}