niceeval 0.9.1 → 0.10.2

package/src/report/assets/styles.css

@@ -0,0 +1,1785 @@
+/*
+ * niceeval/report/react/styles.css —— 随包发布的默认样式。
+ * 契约(docs/feature/reports/architecture.md「静态网页」):
+ *   - 所有节点都有稳定的 nre-* 类名;这份 CSS + 类名 = 静态页零依赖成立;
+ *   - 要定制,在本文件之后加载自己的覆盖即可,不需要构建工具;
+ *   - 令牌体系与 view 同观感:.nre 作用域下自带 light-dark() 令牌(值抄
+ *     src/view/styles.css 的 :root),不倚赖宿主壳的变量,深浅色自动跟随;
+ *   - 调色板 --nre-c0..c5 是 view 六色 CVD 色板(--series-1..6,顺序按 CVD 校验过,
+ *     不要重排),与 src/report/react/colors.ts 的 NRE_PALETTE 逐个对应
+ *     (NRE_PALETTE 存浅色值;深色值只住在这里),改色时两边一起改;
+ *   - SVG 面零内联 hex:图形挂 nre-series-cN 类,由下面的 --nre-series 上色。
+ */
+
+.nre {
+  /* ---- 设计令牌:与 view 同一族(src/view/styles.css :root),报告样式零依赖成立 ---- */
+  color-scheme: light dark;
+  --panel: light-dark(#ffffff, #0b0b0b);
+  --panel-2: light-dark(#f4f4f5, #111111);
+  --line: light-dark(#dedee2, #262626);
+  --line-strong: light-dark(#c9c9cf, #343434);
+  --text: light-dark(#111113, #ededed);
+  --muted: light-dark(#62636a, #a1a1aa);
+  --soft: light-dark(#8b8d98, #74747b);
+  --good: light-dark(#087f5b, #3ddc97);
+  --bad: light-dark(#b42318, #ff6b6b);
+  --warn: light-dark(#9a6700, #e8b84a);
+
+  /* ---- 六色 CVD 分类色板(= view --series-1..6;colors.ts 的散列下标指到这里)---- */
+  --nre-c0: light-dark(#2a78d6, #3987e5);
+  --nre-c1: light-dark(#1baf7a, #199e70);
+  --nre-c2: light-dark(#eda100, #c98500);
+  --nre-c3: light-dark(#008300, #008300);
+  --nre-c4: light-dark(#e34948, #e66767);
+  --nre-c5: light-dark(#eb6834, #d95926);
+  /* 系列色的缺省(无系列的点/柱):中性,不冒充身份 */
+  --nre-series: var(--muted);
+
+  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text);
+  margin: 1rem 0;
+}
+
+/* ---- locator 与判定符:AttemptList / EvalList / ExperimentList 共用的最小单元 ---- */
+.nre .nre-locator { display:inline-flex; align-items:center; gap:4px; color:var(--nre-c0); font-variant-numeric:tabular-nums; text-decoration:none; white-space:nowrap; }
+.nre .nre-locator:hover { text-decoration:underline; }
+.nre .nre-locator-mark { font-weight:700; }
+.nre .nre-locator.nre-verdict-passed .nre-locator-mark { color:var(--good); }
+.nre .nre-locator.nre-verdict-failed .nre-locator-mark,
+.nre .nre-locator.nre-verdict-errored .nre-locator-mark { color:var(--bad); }
+.nre .nre-locator.nre-verdict-skipped .nre-locator-mark { color:var(--soft); }
+
+/* ---- AttemptList:实体列表的叶子层,一条卡片一个 Attempt ---- */
+.nre-attempt-list .nre-attempts { list-style:none; margin:0; padding:0; }
+.nre-attempt-list .nre-attempt { border:1px solid var(--line); border-left:3px solid var(--line-strong); border-radius:8px; padding:10px 14px; margin-bottom:8px; background:var(--panel); }
+.nre-attempt-list .nre-attempt-failed,
+.nre-attempt-list .nre-attempt-errored { border-left-color: var(--bad); }
+.nre-attempt-list .nre-attempt-head { display:flex; flex-wrap:wrap; gap:.75em; align-items:baseline; }
+.nre-attempt-list .nre-attempt-eval { font-weight:620; }
+.nre-attempt-list .nre-attempt-experiment,
+.nre-attempt-list .nre-attempt-duration,
+.nre-attempt-list .nre-attempt-cost { color:var(--muted); font-size:.9em; font-variant-numeric:tabular-nums; }
+.nre-attempt-list .nre-attempt-result { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:.4rem 0 0; color:color-mix(in oklch,var(--muted),var(--text) 12%); overflow-wrap:anywhere; }
+.nre-attempt-list .nre-truncated { color:var(--warn); font-size:.9em; }
+.nre-attempt-list .nre-attempt-list-empty { border:1px dashed var(--line-strong); border-radius:8px; padding:18px; color:var(--muted); text-align:center; background:var(--panel); }
+
+/* ---- EvalList:实体列表的第二级,一条 <details> 一个 experimentId × evalId ---- */
+.nre-eval-list .nre-evals { list-style:none; margin:0; padding:0; }
+.nre-eval-list .nre-eval { border-bottom:1px solid var(--line); }
+.nre-eval-list .nre-eval:last-child { border-bottom:0; }
+.nre-eval-list .nre-eval-summary { display:flex; flex-wrap:wrap; gap:.75em; align-items:baseline; padding:11px 4px; cursor:pointer; list-style:none; }
+.nre-eval-list .nre-eval-summary::-webkit-details-marker { display:none; }
+.nre-eval-list .nre-eval-summary:hover { background:color-mix(in oklch,var(--panel-2),var(--panel) 25%); }
+.nre-eval-list .nre-eval-id { font-weight:560; overflow-wrap:anywhere; }
+.nre-eval-list .nre-eval-experiment,
+.nre-eval-list .nre-eval-score,
+.nre-eval-list .nre-eval-attempts-count,
+.nre-eval-list .nre-eval-duration,
+.nre-eval-list .nre-eval-cost { color:var(--muted); font-size:.9em; font-variant-numeric:tabular-nums; }
+.nre-eval-list .nre-attempts { list-style:none; margin:0 0 12px; padding:0 0 0 20px; border-left:2px solid color-mix(in oklch,var(--nre-c0),transparent 55%); }
+.nre-eval-list .nre-eval-list-empty { border:1px dashed var(--line-strong); border-radius:8px; padding:18px; color:var(--muted); text-align:center; background:var(--panel); }
+
+/* ---- ExperimentList:web 面固定八列比较表,一条 <details> 一个 experiment ---- */
+.nre-experiment-table { border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--panel); }
+.nre-experiment-head,
+.nre-experiment-summary { display:grid; grid-template-columns:minmax(240px,1.35fr) minmax(115px,.72fr) minmax(95px,.58fr) minmax(108px,.62fr) minmax(105px,.58fr) minmax(112px,.66fr) minmax(92px,.52fr) minmax(160px,.86fr); column-gap:14px; align-items:center; }
+.nre-experiment-head { padding:13px 20px; color:var(--muted); font-size:12px; line-height:1.2; font-weight:620; border-bottom:1px solid var(--line); }
+.nre-experiment-head button { appearance:none; display:inline-flex; width:max-content; max-width:100%; align-items:center; gap:5px; border:0; padding:0; background:transparent; color:inherit; font:inherit; line-height:inherit; text-align:left; white-space:nowrap; cursor:pointer; }
+.nre-experiment-head button:hover,
+.nre-experiment-head button:focus-visible { color:var(--text); }
+.nre-experiment-head .nre-num-head { justify-self:end; text-align:right; }
+.nre-experiment-head .nre-sort-icon { display:inline-block; flex:0 0 11px; width:11px; color:var(--soft); font-size:11px; text-align:center; }
+.nre-experiment-head .nre-sort-icon::before { content:"↕"; opacity:0; transition:opacity .12s; }
+.nre-experiment-head button:hover .nre-sort-icon::before,
+.nre-experiment-head button:focus-visible .nre-sort-icon::before { opacity:1; }
+.nre-experiment-head button.nre-sort-asc .nre-sort-icon::before { content:"↑"; opacity:1; color:var(--text); }
+.nre-experiment-head button.nre-sort-desc .nre-sort-icon::before { content:"↓"; opacity:1; color:var(--text); }
+.nre-experiment-table-wrap > .nre-filter { display:block; width:min(100%,280px); height:34px; min-width:0; margin:0 0 12px auto; border:1px solid var(--line); border-radius:7px; padding:0 11px; background:var(--panel); color:var(--text); font:inherit; }
+.nre-experiment-list .nre-experiment-entry { border-bottom:1px solid var(--line); }
+.nre-experiment-list .nre-experiment-entry:last-child { border-bottom:0; }
+.nre-experiment-list .nre-experiment-summary { padding:13px 20px; cursor:pointer; list-style:none; transition:background .12s; }
+.nre-experiment-list .nre-experiment-summary::-webkit-details-marker { display:none; }
+.nre-experiment-list .nre-experiment-summary:hover { background:color-mix(in oklch,var(--panel-2),var(--panel) 25%); }
+.nre-experiment-list .nre-experiment-summary > span { min-width:0; }
+.nre-experiment-list .nre-experiment-name { position:relative; padding-left:30px; }
+.nre-experiment-list .nre-experiment-name::before { content:""; position:absolute; left:5px; top:6px; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(-45deg); transition:transform .15s; }
+.nre-experiment-list .nre-experiment-entry[open] .nre-experiment-name::before { transform:rotate(45deg); }
+.nre-experiment-list .nre-experiment-id { display:block; overflow-wrap:anywhere; font-weight:650; }
+.nre-experiment-list .nre-experiment-name small { display:block; margin-top:3px; color:var(--muted); font-size:12px; font-weight:400; }
+.nre-experiment-list .nre-num { text-align:right; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; white-space:nowrap; }
+.nre-experiment-list .nre-good { color:var(--good); }
+.nre-experiment-list .nre-warn { color:var(--warn); }
+.nre-experiment-list .nre-bad { color:var(--bad); }
+.nre-experiment-list .nre-experiment-pill { display:inline-flex; min-height:22px; align-items:center; color:var(--muted); font-size:12px; white-space:nowrap; }
+.nre-experiment-list .nre-experiment-detail { padding:18px 30px 22px; background:color-mix(in oklch,var(--panel-2),var(--panel) 24%); border-top:1px solid var(--line); }
+.nre-experiment-list .nre-experiment-flags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; color:var(--soft); font-size:12px; }
+.nre-experiment-list .nre-experiment-flags b { border:1px solid color-mix(in oklch,var(--line),transparent 16%); border-radius:999px; padding:3px 8px; color:var(--text); font-weight:560; }
+.nre-experiment-list .nre-experiment-evals { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
+.nre-experiment-list .nre-experiment-eval,
+.nre-experiment-list .nre-experiment-attempts { list-style:none; margin:0; padding:0; }
+.nre-experiment-list .nre-experiment-eval { padding:4px 0 9px; border-bottom:1px solid color-mix(in oklch,var(--line),transparent 28%); }
+.nre-experiment-list .nre-experiment-eval:last-child { border-bottom:0; }
+.nre-experiment-list .nre-experiment-eval-header,
+.nre-experiment-list .nre-experiment-attempt-row { display:grid; grid-template-columns:20px minmax(220px,1fr) minmax(150px,.7fr) minmax(260px,1fr); column-gap:12px; align-items:baseline; font-size:13px; }
+.nre-experiment-list .nre-experiment-eval-header { padding:7px 0 5px; }
+.nre-experiment-list .nre-experiment-attempt-row { padding:5px 0 5px 20px; color:var(--muted); }
+.nre-experiment-list .nre-eval-id { font-weight:560; overflow-wrap:anywhere; }
+.nre-experiment-list .nre-eval-attempt-count { color:var(--soft); font-size:12px; }
+.nre-experiment-list .nre-eval-rollup { color:var(--muted); font-size:.92em; overflow-wrap:anywhere; }
+.nre-experiment-list .nre-attempt-branch { color:var(--line-strong); font-variant-numeric:tabular-nums; }
+.nre-experiment-list .nre-eval-attempt-badges { display:inline-flex; flex-wrap:wrap; gap:.6em; }
+.nre-experiment-list .nre-eval-attempt-metrics,
+.nre-experiment-list .nre-eval-reason { color:var(--muted); font-size:.92em; }
+.nre-experiment-list .nre-experiment-list-empty { border:1px dashed var(--line-strong); border-radius:8px; padding:18px; color:var(--muted); text-align:center; background:var(--panel); }
+@media(max-width:1160px){.nre-experiment-table{overflow-x:auto}.nre-experiment-head,.nre-experiment-summary{min-width:1120px}.nre-experiment-detail{min-width:1120px}}
+
+/* ---- verdict 判定色(EvalList/ExperimentList 的判定符;errored 在这里按 bad 收敛) ---- */
+.nre .nre-eval-verdict.nre-verdict-passed { color:var(--good); }
+.nre .nre-eval-verdict.nre-verdict-failed,
+.nre .nre-eval-verdict.nre-verdict-errored { color:var(--bad); }
+.nre .nre-eval-verdict.nre-verdict-skipped { color:var(--soft); }
+
+/* ---- 维度键上色:同一个 key 在任何块里同色(文字) ---- */
+.nre .nre-c0 { color: var(--nre-c0); }
+.nre .nre-c1 { color: var(--nre-c1); }
+.nre .nre-c2 { color: var(--nre-c2); }
+.nre .nre-c3 { color: var(--nre-c3); }
+.nre .nre-c4 { color: var(--nre-c4); }
+.nre .nre-c5 { color: var(--nre-c5); }
+.nre .nre-key { font-weight: 620; }
+
+/* ---- 系列上色(SVG 图形):nre-series-cN 设 --nre-series,fill/stroke 走 var ---- */
+.nre .nre-series-c0 { --nre-series: var(--nre-c0); }
+.nre .nre-series-c1 { --nre-series: var(--nre-c1); }
+.nre .nre-series-c2 { --nre-series: var(--nre-c2); }
+.nre .nre-series-c3 { --nre-series: var(--nre-c3); }
+.nre .nre-series-c4 { --nre-series: var(--nre-c4); }
+.nre .nre-series-c5 { --nre-series: var(--nre-c5); }
+.nre .nre-series-none { --nre-series: var(--muted); }
+
+/* ---- 表格通用:圆角 panel、细分隔线、tabular-nums 数字、uppercase 小标签 ---- */
+table.nre,
+.nre table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--panel);
+}
+.nre th,
+.nre td {
+  border-bottom: 1px solid var(--line);
+  padding: 9px 14px;
+  text-align: left;
+  vertical-align: top;
+  font-size: 13.5px;
+}
+.nre thead th {
+  color: var(--muted);
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--panel);
+  white-space: nowrap;
+}
+.nre tbody tr:last-child th,
+.nre tbody tr:last-child td {
+  border-bottom: 0;
+}
+.nre tbody th[scope="row"] {
+  font-weight: 610;
+}
+.nre td {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+.nre .nre-dimension {
+  color: var(--muted);
+  font-weight: 500;
+}
+.nre .nre-unit {
+  color: var(--soft);
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  margin-left: 0.25em;
+}
+.nre .nre-better {
+  color: var(--soft);
+  margin-left: 0.25em;
+}
+
+/* ---- <Table> 原语:作者自定义列;右对齐是 class,不是内联样式 ---- */
+.nre th.nre-align-right,
+.nre td.nre-align-right {
+  text-align: right;
+}
+
+/* ---- 渐进增强:排序指示(enhance.js 点表头时切类)与行过滤 ---- */
+.nre th[data-nre-sort] {
+  cursor: pointer;
+  user-select: none;
+}
+.nre th[data-nre-sort]:hover { color: var(--text); }
+.nre th[data-nre-sort]::after {
+  content: "↕";
+  margin-left: 6px;
+  color: var(--soft);
+  font-size: 11px;
+}
+.nre th[data-nre-sort].nre-sort-asc::after { content: "↑"; color: var(--text); }
+.nre th[data-nre-sort].nre-sort-desc::after { content: "↓"; color: var(--text); }
+.nre .nre-row-hidden { display: none; }
+.nre-metric-table-wrap .nre-filter {
+  height: 34px;
+  min-width: 260px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  padding: 0 12px;
+  margin-bottom: 10px;
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+}
+.nre-metric-table-wrap .nre-filter:focus { border-color: var(--line-strong); }
+.nre-metric-table-wrap .nre-filter::placeholder { color: var(--soft); }
+
+/* ---- MetricCell:缺数据 / 覆盖率角标 / 证据链接 ---- */
+.nre .nre-value { white-space: nowrap; }
+.nre .nre-missing {
+  color: var(--soft);
+  font-style: italic;
+}
+.nre .nre-coverage {
+  color: var(--warn);
+  font-size: 0.72em;
+  margin-left: 0.3em;
+}
+.nre .nre-refs {
+  margin-left: 0.4em;
+}
+.nre .nre-ref {
+  color: var(--nre-c0);
+  font-size: 0.85em;
+  text-decoration: none;
+  margin-right: 0.25em;
+}
+.nre .nre-ref:hover {
+  text-decoration: underline;
+}
+.nre .nre-td-empty {
+  background: var(--panel-2);
+}
+/* 数据侧没给的格子:呈现层画软色缺失符,不进 textContent、不参与排序取值 */
+.nre .nre-empty::before {
+  content: "—";
+  color: var(--soft);
+}
+
+/* ---- verdict 语义色与计票 pill ---- */
+.nre .nre-verdict-passed { color: var(--good); }
+.nre .nre-verdict-failed { color: var(--bad); }
+.nre .nre-verdict-errored { color: var(--warn); }
+.nre .nre-verdict-skipped { color: var(--soft); }
+.nre .nre-verdict-tally {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.nre .nre-verdict-pill {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 0 8px;
+  font-size: 12px;
+  white-space: nowrap;
+  background: var(--panel);
+}
+.nre .nre-verdict-pill.nre-verdict-passed { border-color: color-mix(in oklch, var(--good), var(--line) 55%); }
+.nre .nre-verdict-pill.nre-verdict-failed { border-color: color-mix(in oklch, var(--bad), var(--line) 55%); }
+.nre .nre-verdict-pill.nre-verdict-errored { border-color: color-mix(in oklch, var(--warn), var(--line) 55%); }
+
+/* ---- ScopeSummary:范围摘要卡,满宽 KPI 条(对齐 view 的 .summary/.metric 密度);
+        嵌进 ExperimentComparison 组卡时降为紧凑行(规则在上面的比较块里) ---- */
+.nre-scope-summary .nre-scope-kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 0 0 10px;
+  background: var(--panel);
+}
+.nre-scope-summary .nre-scope-kpi {
+  padding: 12px 16px 13px;
+  border-right: 1px solid var(--line);
+  min-width: 0;
+}
+.nre-scope-summary .nre-scope-kpi:last-child { border-right: 0; }
+.nre-scope-summary .nre-scope-kpi dt {
+  color: var(--soft);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.nre-scope-summary .nre-scope-kpi dd {
+  margin: 6px 0 0;
+  font-size: 20px;
+  line-height: 1;
+  font-weight: 680;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.nre-scope-summary .nre-scope-kpi-note {
+  display:block;
+  margin-top:5px;
+  color:var(--soft);
+  font-size:11px;
+  font-weight:450;
+  line-height:1.25;
+  white-space:nowrap;
+}
+/* 计票格装的是 pill 组:允许换行,行高回到常规 */
+.nre-scope-summary .nre-scope-kpi-verdicts dd {
+  white-space: normal;
+  line-height: 1.4;
+}
+.nre .nre-scope-summary-range {
+  color: var(--soft);
+  font-size: 0.85em;
+  margin: 0.25rem 0 0;
+}
+
+/* ---- 宿主警告块:.nre-warnings 是默认折叠的 <details>,<summary> 汇总行恒可见。
+   不占框:无边框、无底色、不缩进,警示色只落在汇总行文字与徽标上。 ---- */
+.nre .nre-warnings {
+  margin: 0;
+  color: var(--text);
+  font-size: 13px;
+}
+/* 外层 <details> 的 <summary>:分类计数汇总行,原生无 JS 可展开。 */
+.nre .nre-warnings > .nre-warnings-summary {
+  font-weight: 650;
+  color: var(--warn);
+  cursor: pointer;
+}
+.nre .nre-warning-groups {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+}
+.nre .nre-warning-group + .nre-warning-group {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
+}
+.nre .nre-warning-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+}
+.nre .nre-warning-title { font-weight: 650; }
+.nre .nre-warning-badge {
+  padding: 1px 8px;
+  border: 1px solid color-mix(in oklch, var(--warn), var(--line) 35%);
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--warn), var(--panel) 84%);
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+/* freshness 组(数字对但可能过期)视觉降一档,integrity 保持警示底色。 */
+.nre .nre-warning-group[data-category="freshness"] .nre-warning-badge {
+  border-color: var(--line);
+  background: var(--panel);
+  color: var(--soft);
+}
+.nre .nre-warning-details { margin: 4px 0 0; }
+/* <details> 原生无 JS 可展开,cursor 不经 .nre-js 门控。 */
+.nre .nre-warning-details > summary {
+  color: var(--soft);
+  font-size: 0.9em;
+  cursor: pointer;
+}
+.nre .nre-warning-details > ul {
+  list-style: none;
+  margin: 4px 0 0;
+  padding: 0 0 0 12px;
+  border-left: 2px solid var(--line);
+}
+.nre .nre-warning + .nre-warning { margin-top: 8px; }
+/* 警告携带的下一步命令:等宽块,无 JS 时点击即全选;enhance.js 在场时点击复制 */
+.nre .nre-warning-command {
+  display: block;
+  margin-top: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--panel);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+  overflow-wrap: anywhere;
+  user-select: all;
+}
+:root.nre-js .nre .nre-warning-command { cursor: copy; }
+:root.nre-js .nre .nre-warning-command:hover { border-color: var(--line-strong); }
+.nre .nre-warning-command[data-nre-copied]::after {
+  content: "✓";
+  margin-left: 0.6em;
+  color: var(--good);
+}
+
+/* ---- Hero / PoweredBy(站点标题区与品牌行) ---- */
+/* 居中大标题:hero 是页首的门面块,整块占满内容列宽、文本水平居中,标题随视口 clamp 放大,
+   meta 与品牌行居中跟随。不设 max-width——窄框居中在宽内容列里会读成左偏,占满列宽才真居中。 */
+.nre-hero {
+  text-align: center;
+  margin: 0 0 clamp(28px, 5vw, 44px);
+}
+.nre-hero .nre-hero-title {
+  margin: 0;
+  font-size: clamp(38px, 5vw, 60px);
+  line-height: 0.98;
+  font-weight: 760;
+  letter-spacing: -0.01em;
+}
+.nre-hero .nre-hero-meta {
+  margin: 14px 0 0;
+  color: var(--muted);
+  font-size: 14px;
+}
+.nre-powered-by {
+  margin: 10px 0 0;
+  font-size: 12px;
+}
+.nre-powered-by a {
+  color: var(--soft);
+  text-decoration: none;
+}
+.nre-powered-by a:hover { color: var(--text); text-decoration: underline; }
+
+/* ---- CopyFixPrompt(批量修复 prompt:折叠块 + 增强层复制) ---- */
+.nre-copy-fix-prompt {
+  margin: 0 0 16px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  padding: 8px 12px;
+}
+.nre-copy-fix-prompt > summary {
+  cursor: pointer;
+  font-weight: 620;
+  font-size: 13px;
+}
+.nre-copy-fix-prompt .nre-copy-fix-prompt-copy {
+  margin: 8px 0 0;
+  padding: 4px 10px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+}
+:root.nre-js .nre-copy-fix-prompt .nre-copy-fix-prompt-copy { cursor: copy; }
+.nre-copy-fix-prompt .nre-copy-fix-prompt-copy[data-nre-copied]::after {
+  content: "✓";
+  margin-left: 0.6em;
+  color: var(--good);
+}
+.nre-copy-fix-prompt .nre-copy-fix-prompt-text {
+  margin: 8px 0 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--bg, transparent);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ---- TraceWaterfall(每 attempt 一行的静态时间瀑布) ---- */
+.nre-trace-waterfall .nre-waterfall {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.nre-trace-waterfall .nre-waterfall-row {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 10px 14px;
+  margin-bottom: 8px;
+  background: var(--panel);
+}
+.nre-trace-waterfall .nre-waterfall-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75em;
+  align-items: baseline;
+}
+.nre-trace-waterfall .nre-waterfall-eval { font-weight: 620; }
+.nre-trace-waterfall .nre-waterfall-experiment,
+.nre-trace-waterfall .nre-waterfall-duration,
+.nre-trace-waterfall .nre-waterfall-count {
+  color: var(--muted);
+  font-size: 0.9em;
+  font-variant-numeric: tabular-nums;
+}
+.nre-trace-waterfall .nre-waterfall-failed { color: var(--bad); font-size: 0.9em; }
+/* 分解条:span 按 startOffsetMs / durationMs 百分比静态定位,失败 span 换警示色 */
+.nre-trace-waterfall .nre-waterfall-track {
+  position: relative;
+  height: 14px;
+  margin-top: 8px;
+  border-radius: 4px;
+  background: color-mix(in oklch, var(--line), var(--panel) 60%);
+  overflow: hidden;
+}
+.nre-trace-waterfall .nre-waterfall-span {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  border-radius: 2px;
+  background: var(--line-strong);
+}
+.nre-trace-waterfall .nre-span-agent { background: color-mix(in oklch, var(--good), var(--line-strong) 40%); }
+.nre-trace-waterfall .nre-span-model { background: color-mix(in oklch, var(--warn), var(--line-strong) 40%); }
+.nre-trace-waterfall .nre-span-tool { background: color-mix(in oklch, var(--line-strong), var(--text) 25%); }
+.nre-trace-waterfall .nre-span-failed { background: var(--bad); }
+.nre-trace-waterfall .nre-waterfall-empty {
+  border: 1px dashed var(--line-strong);
+  border-radius: 8px;
+  padding: 18px;
+  color: var(--muted);
+  text-align: center;
+  background: var(--panel);
+}
+
+/* ---- AttemptList 的过滤框(<AttemptList filter />,渐进增强) ---- */
+.nre-attempt-list > .nre-filter {
+  height: 34px;
+  min-width: 260px;
+  margin-bottom: 12px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  padding: 0 11px;
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+}
+
+/* ---- MetricMatrix ---- */
+.nre-metric-matrix .nre-matrix-caption {
+  caption-side: top;
+  text-align: left;
+  font-weight: 650;
+  padding-bottom: 0.4rem;
+}
+.nre-metric-matrix .nre-matrix-axes {
+  color: var(--soft);
+  font-weight: 400;
+  margin-left: 0.75em;
+}
+
+/* ---- Scoreboard ---- */
+.nre-scoreboard .nre-total {
+  font-weight: 700;
+}
+.nre-scoreboard .nre-full-marks {
+  color: var(--soft);
+  font-weight: 400;
+  margin-left: 0.25em;
+}
+/* 两种 0 分的注脚分开着色:没去考(notRun)偏警示,考了判不了(unscorable)偏软 */
+.nre-scoreboard .nre-total-not-run,
+.nre-scoreboard .nre-total-unscorable,
+.nre-scoreboard .nre-subject-not-run,
+.nre-scoreboard .nre-subject-unscorable {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 400;
+}
+.nre-scoreboard .nre-total-not-run,
+.nre-scoreboard .nre-subject-not-run { color: var(--warn); }
+.nre-scoreboard .nre-total-unscorable,
+.nre-scoreboard .nre-subject-unscorable { color: var(--soft); }
+.nre-scoreboard .nre-scoreboard-ignored {
+  color: var(--muted);
+  font-size: 0.85em;
+  margin: 0.25rem 0 0;
+}
+.nre-scoreboard .nre-weights {
+  color: var(--muted);
+  font-size: 0.85em;
+  margin: 0.4rem 0 0;
+}
+.nre-scoreboard .nre-weight,
+.nre-scoreboard .nre-weight-rest {
+  margin-left: 0.5em;
+}
+
+/* ---- 图表通用:panel 卡片、轴/网格/tooltip ---- */
+.nre-metric-scatter,
+.nre-metric-line,
+.nre-metric-bars {
+  position: relative; /* tooltip 的定位根 */
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 14px 16px 8px;
+  margin: 1rem 0;
+  background: var(--panel);
+}
+.nre-metric-scatter .nre-scatter-svg,
+.nre-metric-line .nre-line-svg,
+.nre-metric-bars .nre-bars-svg {
+  max-width: 880px;
+  width: 100%;
+  height: auto;
+  margin-inline: auto;
+  display: block;
+  overflow: visible;
+}
+.nre .nre-scatter-grid line { stroke: var(--line); stroke-width: 1; }
+.nre .nre-scatter-tick,
+.nre .nre-line-tick { fill: var(--muted); font-size: 10px; }
+.nre .nre-scatter-xlabel,
+.nre .nre-scatter-ylabel,
+.nre .nre-line-xlabel,
+.nre .nre-line-ylabel,
+.nre .nre-bars-group-label { fill: var(--muted); font-size: 12px; }
+.nre .nre-scatter-better-hint { fill: var(--soft); font-size: 11px; }
+.nre .nre-line-plot { stroke: var(--line); }
+.nre .nre-bars-baseline { stroke: var(--line-strong); }
+.nre .nre-leader { stroke: var(--line-strong); stroke-width: 1; }
+
+.nre .nre-scatter-line,
+.nre .nre-line-path {
+  stroke: var(--nre-series);
+  stroke-width: 1.5;
+  fill: none;
+}
+.nre .nre-scatter-point { cursor: default; }
+.nre .nre-scatter-hit { fill: transparent; }
+.nre .nre-scatter-dot {
+  fill: var(--nre-series);
+  stroke: var(--panel);
+  stroke-width: 2;
+}
+.nre .nre-scatter-point:hover .nre-scatter-dot { r: 6.5; }
+.nre .nre-scatter-point-label { fill: var(--text); font-size: 11px; }
+.nre .nre-line-point { fill: var(--nre-series); }
+.nre .nre-line-series-label { fill: var(--nre-series); font-size: 12px; }
+.nre .nre-bar { fill: var(--nre-series); }
+.nre .nre-bar-value { fill: var(--muted); font-size: 10px; }
+.nre .nre-scatter-point-link .nre-scatter-dot:hover,
+.nre .nre-line-point-link circle:hover {
+  stroke: var(--text);
+  stroke-width: 1.5;
+}
+.nre-metric-scatter .nre-scatter-legend,
+.nre-metric-bars .nre-bars-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;
+}
+.nre .nre-legend-key { display:inline-flex; align-items:center; gap:0.4em; }
+.nre .nre-legend-key::before { content:""; width:0.55em; height:0.55em; border-radius:50%; background:currentColor; }
+.nre-metric-bars .nre-bars-metric {
+  margin-right: 1em;
+  font-weight: 600;
+  color: var(--text);
+}
+.nre-metric-scatter .nre-scatter-missing,
+.nre-metric-line .nre-line-missing {
+  max-width: 880px;
+  color: var(--warn);
+  font-size: 0.85em;
+  margin: 0.35rem auto 0;
+}
+/* 散点空态(0 可画点)/ 不足以成图(1 可画点):明说缺什么,不画空坐标系 */
+.nre-metric-scatter .nre-scatter-empty {
+  color: var(--muted);
+  padding: 1.5rem 0.5rem;
+  text-align: center;
+}
+
+/* enhance.js 的样式化 tooltip(无 JS 时退化为 SVG <title>) */
+.nre .nre-tooltip {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  margin-top: -12px;
+  background: var(--panel);
+  border: 1px solid var(--line-strong);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 12px;
+  white-space: pre;
+  pointer-events: none;
+  box-shadow: 0 4px 16px color-mix(in oklch, var(--text), transparent 88%);
+  z-index: 5;
+}
+.nre .nre-tooltip b { font-size: 13px; display: block; }
+.nre .nre-tooltip .nre-tooltip-meta { color: var(--muted); margin-top: 2px; }
+
+/* ---- DeltaTable ---- */
+.nre-delta-table .nre-pair-ids {
+  display: block;
+  color: var(--soft);
+  font-size: 0.8em;
+  font-weight: 400;
+}
+.nre-delta-table .nre-delta-side {
+  display: block;
+  white-space: nowrap;
+}
+.nre-delta-table .nre-delta-tag {
+  display: inline-block;
+  width: 1.2em;
+  color: var(--soft);
+  font-size: 0.8em;
+}
+/* Δ 行按数据侧算好的 outcome 着色:涨跌好坏不由正负号决定 */
+.nre .nre-delta-d[data-outcome="improved"] { color: var(--good); }
+.nre .nre-delta-d[data-outcome="regressed"] { color: var(--bad); }
+.nre .nre-delta-d[data-outcome="unchanged"] { color: var(--muted); }
+.nre .nre-delta-d[data-outcome="unavailable"] { color: var(--soft); }
+/* 0 对不是错误:明确空态,与各列表 empty 同一姿势 */
+.nre-delta-table-empty {
+  border: 1px dashed var(--line-strong);
+  border-radius: 8px;
+  padding: 18px;
+  color: var(--muted);
+  text-align: center;
+  background: var(--panel);
+}
+.nre-delta-table-empty .nre-missing { margin: 0; }
+
+/* ---- Attempt 详情组件族 ---------------------------------------------------
+   这些规则属于 report web face，不属于 view dialog chrome：同一份 AttemptDetail
+   无论直接打开独立文档、塞进 view dialog，还是嵌入用户自己的 React 页面，都必须
+   只靠 niceeval/report/react/styles.css 得到完整可读的结构化布局。 ---- */
+
+/* Summary:判定与 locator 是标题行，身份/时间/成本是自适应 KPI 网格。 */
+.nre-attempt-summary {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
+}
+.nre-attempt-summary .nre-attempt-summary-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+}
+.nre-attempt-summary .nre-attempt-summary-locator {
+  min-width: 0;
+  color: var(--text);
+  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-size: 13px;
+  font-weight: 650;
+  overflow-wrap: anywhere;
+}
+.nre-attempt-summary .nre-attempt-summary-kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
+  margin: 0;
+}
+.nre-attempt-summary .nre-attempt-summary-kpis > div {
+  min-width: 0;
+  padding: 13px 16px 14px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+.nre-attempt-summary .nre-attempt-summary-kpis dt,
+.nre-attempt-usage dt {
+  color: var(--soft);
+  font-size: 11px;
+  font-weight: 560;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.nre-attempt-summary .nre-attempt-summary-kpis dd,
+.nre-attempt-usage dd {
+  margin: 5px 0 0;
+  color: var(--text);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.nre-attempt-summary .nre-attempt-summary-caps {
+  margin: -1px 0 0;
+  padding: 9px 16px 10px;
+  border-top: 1px solid var(--line);
+  color: var(--soft);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}
+
+/* Error 与断言:同一套左侧语义边和可展开明细。 */
+.nre-attempt-error {
+  overflow: hidden;
+  border: 1px solid color-mix(in oklch, var(--bad), var(--line) 64%);
+  border-left: 3px solid var(--bad);
+  border-radius: 9px;
+  background: color-mix(in oklch, var(--bad), var(--panel) 95%);
+}
+.nre-attempt-error .nre-attempt-error-fields {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 7px 14px;
+  margin: 0;
+  padding: 13px 15px;
+}
+.nre-attempt-error .nre-attempt-error-fields dt {
+  color: var(--soft);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.nre-attempt-error .nre-attempt-error-fields dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.nre-attempt-error .nre-attempt-error-stack {
+  max-height: 22rem;
+  overflow: auto;
+  margin: 0;
+  padding: 12px 15px;
+  border-top: 1px solid color-mix(in oklch, var(--bad), var(--line) 70%);
+  background: color-mix(in oklch, var(--bad), var(--panel-2) 96%);
+  color: var(--muted);
+  font: 12px/1.55 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.nre-attempt-assertions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.nre-attempt-assertions .nre-assertion-row,
+.nre-attempt-source .nre-source-line-detail .nre-assertion-row {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-left: 3px solid var(--line-strong);
+  border-radius: 8px;
+  background: var(--panel);
+}
+.nre-attempt-assertions .nre-assertion-row > summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 10px;
+  padding: 10px 12px;
+  cursor: pointer;
+  list-style: none;
+}
+.nre-attempt-assertions .nre-assertion-row > summary::-webkit-details-marker,
+.nre-attempt-assertions .nre-assertions-passed > summary::-webkit-details-marker,
+.nre-attempt-assertions .nre-assertions-passed-group > summary::-webkit-details-marker {
+  display: none;
+}
+.nre .nre-assertion-badge {
+  flex: 0 0 auto;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  padding: 1px 7px;
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.nre .nre-assertion-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
+.nre .nre-assertion-detail { flex: 1 1 100%; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
+.nre .nre-assertion-body {
+  display: grid;
+  gap: 5px;
+  padding: 10px 12px 12px;
+  border-top: 1px solid var(--line);
+  background: var(--panel-2);
+  color: var(--muted);
+  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.nre .nre-tone-good { color: var(--good); }
+.nre .nre-tone-warn { color: var(--warn); }
+.nre .nre-tone-bad { color: var(--bad); }
+.nre .nre-tone-na { color: var(--soft); }
+.nre-attempt-assertions .nre-assertions-passed {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+}
+.nre-attempt-assertions .nre-assertions-passed > summary,
+.nre-attempt-assertions .nre-assertions-passed-group > summary {
+  padding: 9px 12px;
+  color: var(--muted);
+  font-size: 12px;
+  cursor: pointer;
+  list-style: none;
+}
+.nre-attempt-assertions .nre-assertions-passed-group {
+  margin: 0 12px 9px;
+  border-left: 2px solid var(--line-strong);
+}
+
+/* Source:GitHub diff 式整块横向滚动;与产品站示例卡同一套视觉语言(整行 8% 浅染 + 2px 左缘 +
+   行号位图标,规范见 docs/feature/reports/library/attempt-detail.md)。普通行只是 div,
+   只有有证据的行才是可点击 details。 */
+.nre-attempt-source {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
+  /* 给 .nre-source-line-detail 提供 cqw:展开区按面板可视宽度换行,不跟代码横滚。 */
+  container-type: inline-size;
+}
+.nre-attempt-source .nre-attempt-source-head,
+.nre-attempt-source .nre-attempt-source-unmapped-head {
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+  background: color-mix(in oklch, var(--panel-2), var(--line) 35%);
+}
+.nre-attempt-source .nre-attempt-source-lines {
+  overflow-x: auto;
+  padding: 6px 0;
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 48%);
+  font: 12.5px/1.65 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  /* 横滚时行盒要撑到最长行宽度,底色/左缘才能盖满整行,展开区的 sticky 才有位移空间
+     (与示例卡 .eval-code 的 display:grid 同法)。 */
+  display: grid;
+}
+.nre-attempt-source .nre-source-line {
+  color: var(--text);
+}
+.nre-attempt-source .nre-source-line > summary {
+  cursor: pointer;
+  list-style: none;
+}
+.nre-attempt-source .nre-source-line > summary::-webkit-details-marker { display: none; }
+.nre-attempt-source .nre-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;
+}
+/* hover 用 background-image 叠加,不覆盖状态行 summary 上的浅染 background-color。 */
+.nre-attempt-source details.nre-source-line > summary:hover {
+  background-image: linear-gradient(
+    color-mix(in oklch, var(--text), transparent 95%),
+    color-mix(in oklch, var(--text), transparent 95%)
+  );
+}
+.nre-attempt-source .nre-source-ln {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 12px;
+  color: var(--soft);
+  font-size: 11px;
+  user-select: none;
+}
+.nre-attempt-source .nre-source-ln-mark svg {
+  width: 13px;
+  height: 13px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.nre-attempt-source .nre-source-text {
+  color: var(--text);
+  font: inherit;
+  white-space: pre;
+}
+/* 钉在滚动视口右缘:行盒跟随最长行,横滚时分数与 chevron 始终可见(与示例卡 .code-line-actions 同法)。 */
+.nre-attempt-source .nre-source-line-meta {
+  position: sticky;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px 0 16px;
+  font: 11px/1.65 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  white-space: nowrap;
+}
+.nre-attempt-source .nre-source-score-badge {
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: color-mix(in oklch, currentColor, transparent 86%);
+  font-weight: 650;
+}
+.nre-attempt-source .nre-source-chevron {
+  color: var(--soft);
+  font-size: 16px;
+  line-height: 1;
+  transition: transform 0.14s ease;
+}
+.nre-attempt-source details[open] > summary .nre-source-chevron {
+  color: var(--text);
+  transform: rotate(90deg);
+}
+
+/* 状态行 = 8% 浅染 + 2px 左缘(所有状态行都是 details,染在 summary 上,展开区不跟着染)。 */
+.nre-attempt-source .nre-source-line-send > summary {
+  background-color: color-mix(in oklch, var(--nre-c0), transparent 92%);
+  box-shadow: inset 2px 0 0 var(--nre-c0);
+}
+.nre-attempt-source .nre-source-line-send .nre-source-ln { color: var(--nre-c0); }
+.nre-attempt-source .nre-source-line.nre-tone-good > summary {
+  background-color: color-mix(in oklch, var(--good), transparent 92%);
+  box-shadow: inset 2px 0 0 var(--good);
+}
+.nre-attempt-source .nre-source-line.nre-tone-good .nre-source-ln { color: var(--good); }
+.nre-attempt-source .nre-source-line.nre-tone-good .nre-source-score-badge { color: var(--good); }
+.nre-attempt-source .nre-source-line.nre-tone-bad > summary {
+  background-color: color-mix(in oklch, var(--bad), transparent 92%);
+  box-shadow: inset 2px 0 0 var(--bad);
+}
+.nre-attempt-source .nre-source-line.nre-tone-bad .nre-source-ln { color: var(--bad); }
+.nre-attempt-source .nre-source-line.nre-tone-bad .nre-source-score-badge { color: var(--bad); }
+.nre-attempt-source .nre-source-line.nre-tone-warn > summary,
+.nre-attempt-source .nre-source-line.nre-tone-na > summary {
+  background-color: color-mix(in oklch, var(--warn), transparent 92%);
+  box-shadow: inset 2px 0 0 var(--warn);
+}
+.nre-attempt-source .nre-source-line.nre-tone-warn .nre-source-ln,
+.nre-attempt-source .nre-source-line.nre-tone-na .nre-source-ln { color: var(--warn); }
+.nre-attempt-source .nre-source-line.nre-tone-warn .nre-source-score-badge,
+.nre-attempt-source .nre-source-line.nre-tone-na .nre-source-score-badge { color: var(--warn); }
+
+/* 展开区直接接在源码行下:按面板可视宽度(cqw)换行并钉在滚动视口左缘,不跟代码横滚。 */
+.nre-attempt-source .nre-source-line-detail {
+  position: sticky;
+  left: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  width: calc(100cqw - 2px);
+  padding: 8px 14px 12px 44px;
+  border-top: 1px dashed var(--line);
+  box-shadow: inset 2px 0 0 color-mix(in oklch, var(--nre-c0), var(--line) 40%);
+  color: var(--text);
+  font: 12.5px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
+  white-space: normal;
+}
+.nre-attempt-source .nre-source-line.nre-tone-good > .nre-source-line-detail { box-shadow: inset 2px 0 0 var(--good); }
+.nre-attempt-source .nre-source-line.nre-tone-bad > .nre-source-line-detail { box-shadow: inset 2px 0 0 var(--bad); }
+.nre-attempt-source .nre-source-line.nre-tone-warn > .nre-source-line-detail,
+.nre-attempt-source .nre-source-line.nre-tone-na > .nre-source-line-detail { box-shadow: inset 2px 0 0 var(--warn); }
+.nre-attempt-source .nre-source-line-detail .nre-assertion-row {
+  display: grid;
+  font-size: 12px;
+}
+.nre-attempt-source .nre-source-assertion-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 8px 10px;
+}
+.nre-attempt-source .nre-source-assertion-score { margin-left: auto; font-variant-numeric: tabular-nums; }
+.nre-attempt-source .nre-source-line-detail .nre-assertion-detail { padding: 0 10px 8px; }
+.nre-attempt-source .nre-source-turn {
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text);
+}
+.nre-attempt-source .nre-source-turn-head {
+  display: flex;
+  gap: 10px;
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font: 11px/1.4 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+.nre-attempt-source .nre-source-turn-head > :first-child { color: var(--text); font-weight: 650; }
+.nre-attempt-source .nre-source-line-detail .nre-source-turn-head,
+.nre-attempt-source .nre-source-line-detail .nre-source-turn > .nre-conv-sent { display: none; }
+.nre-attempt-source .nre-source-line-detail .nre-conv-replies {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  margin: 0;
+  padding: 0;
+}
+.nre-attempt-source .nre-source-line-detail .nre-conv-assistant,
+.nre-attempt-source .nre-source-line-detail .nre-conv-user,
+.nre-attempt-source .nre-source-line-detail .nre-conv-skill,
+.nre-attempt-source .nre-source-line-detail .nre-conv-error,
+.nre-attempt-source .nre-source-line-detail .nre-conv-input,
+.nre-attempt-source .nre-source-line-detail .nre-conv-compaction,
+.nre-attempt-source .nre-source-line-detail .nre-conv-thinking,
+.nre-attempt-source .nre-source-line-detail .nre-conv-tool,
+.nre-attempt-source .nre-source-line-detail .nre-conv-subagent,
+.nre-attempt-source .nre-source-line-detail .nre-conv-raw {
+  min-width: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+}
+.nre-attempt-source .nre-source-line-detail .nre-conv-role {
+  display: block;
+  margin-bottom: 2px;
+  color: var(--blue, var(--nre-c0));
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.nre-attempt-source .nre-source-line-detail .nre-conv-text {
+  color: var(--text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.nre-attempt-source .nre-source-line-detail .nre-conv-user .nre-conv-text { color: var(--muted); }
+.nre-attempt-source .nre-source-line-detail .nre-conv-thinking > summary,
+.nre-attempt-source .nre-source-line-detail .nre-conv-subagent > summary,
+.nre-attempt-source .nre-source-line-detail .nre-conv-raw > summary {
+  cursor: pointer;
+  list-style: none;
+  color: var(--muted);
+}
+.nre-attempt-source .nre-source-line-detail .nre-conv-thinking > summary::-webkit-details-marker,
+.nre-attempt-source .nre-source-line-detail .nre-conv-subagent > summary::-webkit-details-marker,
+.nre-attempt-source .nre-source-line-detail .nre-conv-raw > summary::-webkit-details-marker { display: none; }
+.nre-attempt-source .nre-source-line-detail .nre-conv-subagent > summary::before,
+.nre-attempt-source .nre-source-line-detail .nre-conv-raw > summary::before { content: "▸ "; }
+.nre-attempt-source .nre-source-line-detail .nre-conv-thinking > summary::before { content: "▸ "; }
+.nre-attempt-source .nre-source-line-detail .nre-conv-subagent[open] > summary::before,
+.nre-attempt-source .nre-source-line-detail .nre-conv-raw[open] > summary::before,
+.nre-attempt-source .nre-source-line-detail .nre-conv-thinking[open] > summary::before { content: "▾ "; }
+.nre-attempt-source .nre-source-line-detail .nre-conv-tool > summary {
+  display: grid;
+  grid-template-columns: 8px minmax(110px, max-content) minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  cursor: pointer;
+  list-style: none;
+}
+.nre-attempt-source .nre-source-line-detail .nre-conv-tool > summary::-webkit-details-marker { display: none; }
+.nre-attempt-source .nre-source-line-detail .nre-conv-tool-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--good);
+}
+.nre-attempt-source .nre-source-line-detail .nre-conv-tool-failed { background: var(--bad); }
+.nre-attempt-source .nre-source-line-detail .nre-conv-tool-rejected { background: var(--warn); }
+.nre-attempt-source .nre-source-line-detail .nre-conv-tool-pending { background: var(--soft); }
+.nre-attempt-source .nre-source-line-detail .nre-conv-tool-name {
+  overflow: hidden;
+  color: var(--text);
+  font: 600 12px/1.5 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nre-attempt-source .nre-source-line-detail .nre-conv-tool-preview {
+  overflow: hidden;
+  color: var(--soft);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nre-attempt-source .nre-source-line-detail .nre-conv-tool-io {
+  max-height: 220px;
+  overflow: auto;
+  margin: 6px 0 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: color-mix(in oklch, var(--panel), black 8%);
+  color: var(--muted);
+  font: 11px/1.45 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.nre-attempt-source .nre-attempt-source-unmapped,
+.nre-attempt-source .nre-attempt-source-unlocated { border-top: 1px solid var(--line); }
+.nre-attempt-source .nre-attempt-source-unmapped > .nre-assertion-row {
+  display: flex;
+  gap: 10px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--line);
+  font-size: 12px;
+}
+.nre-attempt-source .nre-attempt-source-unlocated > .nre-source-turn { margin: 10px 14px; }
+.nre-attempt-source .nre-attempt-source-unlocated > .nre-source-turn {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-left: 3px solid var(--blue, var(--nre-c0));
+  border-radius: 8px;
+  background: var(--panel-2);
+}
+.nre-attempt-source .nre-attempt-source-unlocated > .nre-source-turn-failed { border-left-color: var(--bad); }
+.nre-attempt-source .nre-attempt-source-unlocated > .nre-source-turn-waiting { border-left-color: var(--warn); }
+
+/* 逐行轻量 TypeScript token;暗色取 VS Code Dark+ 系(与产品站示例卡的 prism vsDark 同源),
+   浅色为等价可读色。 */
+.nre-attempt-source .tok-comment { color: light-dark(#6e7781, #6a9955); font-style: italic; }
+.nre-attempt-source .tok-str { color: light-dark(#953800, #ce9178); }
+.nre-attempt-source .tok-kw { color: light-dark(#0b62d6, #569cd6); }
+.nre-attempt-source .tok-num { color: light-dark(#116329, #b5cea8); }
+.nre-attempt-source .tok-fn { color: light-dark(#755f00, #dcdcaa); }
+
+/* Fix prompt 与时间树:顶层 details 是完整 panel，嵌套 details 只负责层级。 */
+.nre-attempt-fix-prompt,
+.nre-attempt-timeline {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+}
+.nre-attempt-fix-prompt > summary,
+.nre-attempt-timeline > summary {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 11px 14px;
+  color: var(--text);
+  font-weight: 650;
+  cursor: pointer;
+  list-style: none;
+}
+.nre-attempt-fix-prompt > summary::-webkit-details-marker,
+.nre-attempt-timeline > summary::-webkit-details-marker,
+.nre-attempt-timeline summary::-webkit-details-marker,
+.nre-attempt-trace summary::-webkit-details-marker,
+.nre-attempt-conversation summary::-webkit-details-marker {
+  display: none;
+}
+.nre-attempt-fix-prompt[open] > summary,
+.nre-attempt-timeline[open] > summary { border-bottom: 1px solid var(--line); }
+.nre-attempt-fix-prompt .nre-attempt-fix-prompt-copy {
+  margin: 12px 14px 0;
+  border: 1px solid var(--line-strong);
+  border-radius: 6px;
+  padding: 5px 9px;
+  background: var(--panel-2);
+  color: var(--text);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.nre-attempt-fix-prompt .nre-attempt-fix-prompt-copy:hover { border-color: var(--soft); }
+.nre-attempt-fix-prompt .nre-attempt-fix-prompt-text {
+  max-height: 28rem;
+  overflow: auto;
+  margin: 10px 14px 14px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--panel-2);
+  color: var(--muted);
+  font: 12px/1.55 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.nre-attempt-timeline .nre-timeline-phases,
+.nre-attempt-timeline .nre-timeline-children,
+.nre-attempt-timeline .nre-timeline-spans {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.nre-attempt-timeline > .nre-timeline-phases { padding: 7px 14px 10px; }
+.nre-attempt-timeline .nre-timeline-phase,
+.nre-attempt-timeline .nre-timeline-node,
+.nre-attempt-timeline .nre-timeline-spans > li {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 8px;
+  border-radius: 5px;
+  color: var(--muted);
+  font-size: 12px;
+  list-style: none;
+}
+.nre-attempt-timeline summary.nre-timeline-phase,
+.nre-attempt-timeline summary.nre-timeline-node { cursor: pointer; }
+.nre-attempt-timeline summary.nre-timeline-phase:hover,
+.nre-attempt-timeline summary.nre-timeline-node:hover { background: var(--panel-2); }
+.nre-attempt-timeline .nre-timeline-dur,
+.nre-attempt-trace .nre-span-dur {
+  flex: 0 0 auto;
+  margin-left: auto;
+  color: var(--soft);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.nre-attempt-timeline .nre-timeline-children,
+.nre-attempt-timeline .nre-timeline-spans {
+  margin-left: 15px;
+  padding-left: 11px;
+  border-left: 1px solid var(--line);
+}
+.nre-attempt-timeline .nre-timeline-failed { color: var(--bad); }
+.nre-attempt-timeline .nre-timeline-closing {
+  padding: 8px 14px 11px;
+  border-top: 1px solid var(--line);
+  background: var(--panel-2);
+}
+.nre-attempt-timeline .nre-timeline-closing-head {
+  margin-bottom: 3px;
+  color: var(--soft);
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+/* Diagnostics 与 usage:技术信息保持紧凑，但不再落成裸 ul/dl。 */
+.nre-attempt-diagnostics {
+  display: grid;
+  gap: 9px;
+}
+.nre-attempt-diagnostics .nre-diagnostics-group {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+}
+.nre-attempt-diagnostics .nre-diagnostics-phase {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--line);
+  color: var(--soft);
+  font-size: 11px;
+  font-weight: 650;
+}
+.nre-attempt-diagnostics .nre-diagnostics-group ul { list-style: none; margin: 0; padding: 0; }
+.nre-attempt-diagnostics .nre-diagnostics-item {
+  display: grid;
+  gap: 3px;
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+}
+.nre-attempt-diagnostics .nre-diagnostics-item:last-child { border-bottom: 0; }
+.nre-attempt-diagnostics .nre-diagnostics-meta {
+  color: currentColor;
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.nre-attempt-usage {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
+  overflow: hidden;
+  margin: 0;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+}
+.nre-attempt-usage .nre-attempt-usage-row {
+  min-width: 0;
+  padding: 11px 13px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+/* Conversation:每轮一张卡，sent 与 replies 分层；长输出在自己的 pre 内滚动。 */
+.nre-attempt-conversation {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.nre-attempt-conversation .nre-conv-round {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+}
+.nre-attempt-conversation .nre-conv-round-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 6px 12px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--line);
+  color: var(--soft);
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+}
+.nre-attempt-conversation .nre-conv-round-loc {
+  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-weight: 450;
+}
+.nre-attempt-conversation .nre-conv-sent {
+  padding: 11px 13px;
+  border-bottom: 1px solid var(--line);
+  background: color-mix(in oklch, var(--blue, var(--nre-c0)), var(--panel) 94%);
+  color: var(--text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.nre-attempt-conversation .nre-conv-replies {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+}
+.nre-attempt-conversation .nre-conv-assistant,
+.nre-attempt-conversation .nre-conv-user,
+.nre-attempt-conversation .nre-conv-skill,
+.nre-attempt-conversation .nre-conv-error,
+.nre-attempt-conversation .nre-conv-input,
+.nre-attempt-conversation .nre-conv-compaction,
+.nre-attempt-conversation .nre-conv-thinking,
+.nre-attempt-conversation .nre-conv-tool,
+.nre-attempt-conversation .nre-conv-subagent,
+.nre-attempt-conversation .nre-conv-raw {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  padding: 8px 10px;
+  background: var(--panel-2);
+  color: var(--muted);
+  font-size: 12px;
+}
+.nre-attempt-conversation .nre-conv-role {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--soft);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.nre-attempt-conversation .nre-conv-text { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
+.nre-attempt-conversation .nre-conv-error { border-color: color-mix(in oklch, var(--bad), var(--line) 62%); color: var(--bad); }
+.nre-attempt-conversation .nre-conv-input { border-color: color-mix(in oklch, var(--warn), var(--line) 62%); color: var(--warn); }
+.nre-attempt-conversation .nre-conv-thinking > summary,
+.nre-attempt-conversation .nre-conv-tool > summary,
+.nre-attempt-conversation .nre-conv-subagent > summary,
+.nre-attempt-conversation .nre-conv-raw > summary {
+  cursor: pointer;
+  list-style: none;
+  font-weight: 600;
+}
+.nre-attempt-conversation .nre-conv-thinking > .nre-conv-text { margin-top: 7px; }
+.nre-attempt-conversation .nre-conv-tool-io {
+  max-height: 24rem;
+  overflow: auto;
+  margin: 8px 0 0;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  background: var(--panel);
+  color: var(--muted);
+  font: 11px/1.5 ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* 原始 trace 与 diff 摘要。 */
+.nre-attempt-trace,
+.nre-attempt-trace .nre-trace-children,
+.nre-attempt-diff {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.nre-attempt-trace {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+}
+.nre-attempt-trace .nre-trace-span {
+  display: grid;
+  grid-template-columns: minmax(64px, max-content) minmax(0, 1fr) max-content auto;
+  align-items: baseline;
+  gap: 10px;
+  padding: 8px 11px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+  list-style: none;
+}
+.nre-attempt-trace summary.nre-trace-span { cursor: pointer; }
+.nre-attempt-trace summary.nre-trace-span:hover { background: var(--panel-2); }
+.nre-attempt-trace .nre-trace-children {
+  margin-left: 15px;
+  border-left: 1px solid var(--line);
+}
+.nre-attempt-trace .nre-span-kind {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 1px 6px;
+  color: var(--soft);
+  font-size: 10px;
+  text-align: center;
+}
+.nre-attempt-diff {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+}
+.nre-attempt-diff .nre-diff-file {
+  display: grid;
+  grid-template-columns: 74px minmax(0, 1fr) max-content;
+  align-items: baseline;
+  gap: 10px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--line);
+  font-size: 12px;
+}
+.nre-attempt-diff .nre-diff-file:last-child { border-bottom: 0; }
+.nre-attempt-diff .nre-diff-net {
+  color: var(--soft);
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.nre-attempt-diff .nre-diff-path { min-width: 0; font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; }
+.nre-attempt-diff .nre-diff-lines { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.nre-attempt-diff .nre-diff-added .nre-diff-net { color: var(--good); }
+.nre-attempt-diff .nre-diff-modified .nre-diff-net { color: var(--warn); }
+.nre-attempt-diff .nre-diff-deleted .nre-diff-net { color: var(--bad); }
+
+@media (max-width: 640px) {
+  .nre-attempt-summary .nre-attempt-summary-kpis { grid-template-columns: 1fr; }
+  .nre-attempt-summary .nre-attempt-summary-kpis > div { border-right: 0; }
+  .nre-attempt-error .nre-attempt-error-fields { grid-template-columns: 1fr; gap: 2px; }
+  .nre-attempt-usage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .nre-attempt-trace .nre-trace-span { grid-template-columns: max-content minmax(0, 1fr) max-content; }
+  .nre-attempt-diff .nre-diff-file { grid-template-columns: 1fr max-content; }
+  .nre-attempt-diff .nre-diff-net { grid-column: 1 / -1; }
+}
+
+/* ---- 排版原语 Row / Col / Section / Text ---- */
+.nre-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.nre-col > .nre { margin: 0; }
+.nre-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+.nre-row > * {
+  flex: 1 1 20rem;
+  min-width: 0;
+}
+.nre-section .nre-section-title {
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0 0 10px;
+}
+.nre-section > .nre { margin: 0 0 1rem; }
+.nre-text {
+  color: var(--muted);
+  margin: 0.25rem 0;
+}
+
+/* ---- Section header:标题行右侧短元信息(meta),同一行右对齐,空间不足自动换行
+        (docs/feature/reports/library/layout.md「Grid 与 Stat」)。省略 meta 时 Section
+        渲染的是裸 <h2>(既有结构),不套这层 header——旧行为逐字节不变。 ---- */
+.nre-section-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 4px 16px;
+  margin: 0 0 10px;
+}
+.nre-section-header .nre-section-title { margin: 0; }
+.nre-section-header .nre-section-meta {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+/* ---- Grid:自由摘要面板的格子容器(docs/feature/reports/architecture.md「排版原语的语义层
+        与面内布局」)。max-width 钳在「声明列数 × 最小格宽 + 格间距」——auto-fit 因此永远
+        摆不出比声明列数更多的列;容器比这个宽度窄时,minmax 的下限让列数按最小 inline size
+        自动减少,窄到个位数视口也不会产生页面级横向滚动。响应式换列全靠这几行 CSS,
+        不需要测量脚本或 hydration。 ---- */
+.nre-grid {
+  --nre-grid-cell-min: 220px;
+  --nre-grid-gap: 20px;
+  --nre-grid-cell-padding: 16px;
+  --nre-stat-value-size: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--nre-grid-cell-min), 100%), 1fr));
+  gap: var(--nre-grid-gap);
+  max-width: calc(
+    var(--nre-grid-max-columns) * var(--nre-grid-cell-min) + (var(--nre-grid-max-columns) - 1) * var(--nre-grid-gap)
+  );
+  margin: 1rem 0;
+}
+.nre-grid--compact {
+  --nre-grid-cell-min: 160px;
+  --nre-grid-gap: 10px;
+  --nre-grid-cell-padding: 10px;
+  --nre-stat-value-size: 16px;
+}
+.nre-grid-cell { min-width: 0; }
+/* boxed:每个 cell 独立完整四边框,靠 grid gap 分开——不是靠相邻项拼半边框,换行后
+   不会缺左边、缺底边或出现双线。 */
+.nre-grid--boxed .nre-grid-cell {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: var(--nre-grid-cell-padding);
+  background: var(--panel);
+}
+.nre-grid--plain .nre-grid-cell { padding: 0; }
+/* 一个 cell 里嵌套多个 Stat(Col 归拢):只有纵向留白,没有内部分隔线。 */
+.nre-grid-cell > .nre-col { gap: calc(var(--nre-grid-gap) * 0.6); }
+
+/* ---- Stat:label / 主值 / detail 三段;label 与 detail 弱化层级,value 用 tabular
+        numerals;tone 是主值的语义色,只染 value——positive 不会把 label 和 detail
+        一并染色。 ---- */
+.nre-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.nre-stat .nre-stat-label {
+  color: var(--soft);
+  font-size: 12px;
+  font-weight: 560;
+  overflow-wrap: anywhere;
+}
+.nre-stat .nre-stat-value {
+  font-size: var(--nre-stat-value-size);
+  font-weight: 700;
+  line-height: 1.15;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+  overflow-wrap: anywhere;
+}
+.nre-stat .nre-stat-detail {
+  color: var(--muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.nre-stat--positive .nre-stat-value { color: var(--good); }
+.nre-stat--negative .nre-stat-value { color: var(--bad); }
+.nre-stat--warning .nre-stat-value { color: var(--warn); }
+
+/* ---- Tabs:静态 HTML 每 tab 一个 <details> 且仅首个 open(无 JS = 手风琴卡片,内容完整);
+        enhance.js 在 <html> 上打 nre-js 后升级为单选 tab 条:收起的 tab 缩成一枚标题排在首行,
+        唯一展开的 tab 以 100% 宽 + order:1 换行到下方,活动标题带高亮下划线、贴着面板顶部。
+        不能用 display:contents 把 summary/body 直接投影进 flex 容器——Chrome 里 <details> 的
+        UA shadow slot 会成为 flex item,子元素的 order 失效、收起面板还留 0 宽盒 ---- */
+.nre-tabs > .nre-tab {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  margin-bottom: 8px;
+}
+.nre-tabs > .nre-tab > .nre-tab-title {
+  padding: 10px 14px;
+  cursor: pointer;
+  user-select: none;
+  font-weight: 620;
+  list-style: none;
+}
+.nre-tabs > .nre-tab > .nre-tab-title::-webkit-details-marker { display: none; }
+.nre-tabs > .nre-tab > .nre-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;
+}
+.nre-tabs > .nre-tab[open] > .nre-tab-title::before { transform: rotate(45deg); }
+.nre-tabs > .nre-tab > .nre-tab-body { padding: 2px 14px 12px; }
+.nre-tabs .nre-tab-body > .nre:first-child { margin-top: 0; }
+.nre-tabs .nre-tab-body > .nre:last-child { margin-bottom: 0; }
+
+:root.nre-js .nre-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  column-gap: 2px;
+}
+:root.nre-js .nre-tabs > .nre-tab {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+:root.nre-js .nre-tabs > .nre-tab[open] {
+  flex: 1 1 100%;
+  order: 1;
+}
+:root.nre-js .nre-tabs > .nre-tab > .nre-tab-title {
+  padding: 8px 14px 9px;
+  border-radius: 7px 7px 0 0;
+  color: var(--muted);
+  font-weight: 560;
+  box-shadow: inset 0 -1px 0 var(--line);
+}
+:root.nre-js .nre-tabs > .nre-tab > .nre-tab-title::before { content: none; }
+:root.nre-js .nre-tabs > .nre-tab > .nre-tab-title:hover {
+  color: var(--text);
+  background: color-mix(in oklch, var(--panel-2), var(--panel) 35%);
+}
+:root.nre-js .nre-tabs > .nre-tab[open] > .nre-tab-title {
+  width: max-content;
+  max-width: 100%;
+  color: var(--text);
+  font-weight: 650;
+  box-shadow: inset 0 -2px 0 var(--nre-c0);
+  cursor: default;
+}
+:root.nre-js .nre-tabs > .nre-tab > .nre-tab-body { padding: 14px 0 0; }