niceeval 0.9.0 → 0.10.0

package/src/view/styles.css

@@ -34,13 +34,6 @@
   /* send/回复行的强调色,对齐 landing page setup-card 的 --blue(#6ea8fe)。 */
   --blue: light-dark(#1d63d8, #6ea8fe);
   --focus: light-dark(#111113, #ededed);
-  /* 分类色板(cost/score 散点图按实验区分系列),六色顺序按 CVD 校验过,不要重排。 */
-  --series-1: light-dark(#2a78d6, #3987e5);
-  --series-2: light-dark(#1baf7a, #199e70);
-  --series-3: light-dark(#eda100, #c98500);
-  --series-4: light-dark(#008300, #008300);
-  --series-5: light-dark(#e34948, #e66767);
-  --series-6: light-dark(#eb6834, #d95926);
   font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
 }
 
@@ -73,7 +66,24 @@ a { color: inherit; }
   z-index: 10;
   backdrop-filter: blur(10px);
 }
-/* 页头无品牌位:品牌是页内组件(PoweredBy / Hero 的品牌行,nre-powered-by),宿主不渲染。 */
+/* 页头左端的恒定品牌位:NiceEval 字标 + 45° 方块 mark,外链官网(App.tsx 的 .brand)。
+   与 hero 下 nre-powered-by 品牌行同族,由宿主渲染、报告定义不能覆盖或移除。 */
+.brand {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  font-weight: 690;
+  font-size: 20px;
+  flex: 0 0 auto;
+  text-decoration: none;
+}
+.mark {
+  width: 18px;
+  height: 18px;
+  border: 1.25px solid var(--text);
+  transform: rotate(45deg);
+  display: inline-block;
+}
 /* 顶部导航 .nav / .nav-tab → components/ui/tabs.tsx(Radix Tabs + Tailwind utilities)。 */
 .lang-switch {
   display: inline-flex;
@@ -114,810 +124,12 @@ main {
 .report-slot {
   margin: 0 auto 36px;
 }
-.name { font-weight: 610; }
-.num {
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  font-feature-settings: "tnum";
-}
-.good { color: var(--good); }
-.bad { color: var(--bad); }
-.warn { color: var(--warn); }
-.infra-err { color: var(--warn); }
-.copy-all-errors {
-  height: 36px;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 12px;
-  border: 1px solid var(--line);
-  border-radius: 7px;
-  background: var(--panel);
-  color: var(--muted);
-  font-family: inherit;
-  font-size: 13px;
-  cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
-  transition: color 0.12s, border-color 0.12s, background 0.12s;
-}
-.copy-all-errors svg {
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.copy-all-errors:hover {
-  color: var(--text);
-  border-color: var(--line-strong);
-}
-.copy-all-errors.is-copied {
-  color: var(--good);
-  border-color: color-mix(in oklch, var(--good), var(--line) 40%);
-  background: color-mix(in oklch, var(--good), transparent 88%);
-}
-.raw-details {
-  margin-top: 16px;
-  border-top: 1px solid color-mix(in oklch, var(--line), transparent 15%);
-  padding-top: 14px;
-  color: color-mix(in oklch, var(--muted), var(--text) 6%);
-}
-.raw-details summary {
-  cursor: pointer;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 560;
-  user-select: none;
-}
-.raw-details pre { margin-top: 12px; }
-.raw-note {
-  margin-left: 8px;
-  color: var(--soft);
-  font-weight: 400;
-}
-.reason-empty { color: var(--soft); }
-.ran-at { display: block; margin-top: 2px; color: var(--soft); font-size: 11px; font-variant-numeric: tabular-nums; }
-
-.attempt-status {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-}
-
-
-.eval-item-clickable {
-  cursor: pointer;
-  user-select: none;
-}
-.eval-item-clickable:hover {
-  background: color-mix(in oklch, var(--panel-2), var(--panel) 30%);
-}
-/* eval 折叠行:Run 列的 通过/总 轮次比 */
-.run-ratio { color: var(--soft); }
-/* 展开后的各轮 attempt:左侧加描边 + 轻微缩进,标识它们从属于上面的 eval 行 */
-.eval-attempts {
-  display: grid;
-  margin-left: 8px;
-  border-left: 2px solid color-mix(in oklch, var(--accent, var(--line)), transparent 55%);
-  background: color-mix(in oklch, var(--panel-2), transparent 55%);
-}
-.eval-attempts .eval-item {
-  padding-left: 12px;
-}
-.eval-attempts .eval-item:last-child {
-  border-bottom: none;
-}
-/* Modal */
-/* modal chrome(backdrop / panel / header / title / close / body / verdict chip)→
-   迁到 components/ui/dialog.tsx + components/ui/badge.tsx + AttemptModal 的 Tailwind utilities。 */
-
-/* No-source modal body: same visual language as the code view (checks + transcript). */
-.nosource { display: flex; flex-direction: column; gap: 14px; }
-.nosource-note {
-  font-size: 12.5px;
-  line-height: 1.55;
-  color: var(--muted);
-  padding: 9px 12px;
-  border: 1px dashed color-mix(in oklch, var(--line-strong), transparent 25%);
-  border-radius: 8px;
-  background: color-mix(in oklch, var(--panel), var(--line) 20%);
-}
-.nosource-block {
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  overflow: hidden;
-  background: var(--panel-2);
-}
-.nosource-head {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  color: var(--muted);
-  padding: 7px 12px;
-  background: color-mix(in oklch, var(--panel-2), var(--line) 35%);
-  border-bottom: 1px solid var(--line);
-}
-.nosource-block > .assert-detail,
-.nosource-block > .transcript { padding: 10px 14px; }
-.conv-loading { color: var(--soft); font-size: 12px; padding: 8px 0; }
-.trace-details {
-  border-bottom: 1px solid color-mix(in oklch, var(--line), transparent 35%);
-  padding: 4px 0 10px;
-}
-.trace-details summary {
-  cursor: pointer;
-  color: var(--muted);
-  font-size: 12px;
-  user-select: none;
-  padding: 4px 0;
-}
-.trace-details summary:hover { color: var(--text); }
-.trace {
-  margin: 8px 0 4px;
-  padding: 10px 12px;
-  border: 1px solid color-mix(in oklch, var(--line), transparent 20%);
-  border-radius: 7px;
-  background: color-mix(in oklch, var(--panel), black 6%);
-}
-.trace-span-meta {
-  color: var(--soft);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 8px;
-}
-.span-d { border-radius: 4px; }
-.span-d > .trace-row { cursor: default; }
-details.span-d > summary.trace-row { cursor: pointer; list-style: none; }
-details.span-d > summary.trace-row::-webkit-details-marker { display: none; }
-details.span-d[open] > summary.trace-row { background: color-mix(in oklch, var(--panel-2), var(--panel) 10%); }
-details.span-d > summary.trace-row:hover { background: color-mix(in oklch, var(--panel-2), var(--panel) 20%); }
-.trace-row {
-  display: grid;
-  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 2fr) 56px;
-  column-gap: 12px;
-  align-items: center;
-  height: 22px;
-  font-size: 12px;
-}
-.span-attrs {
-  padding: 6px 8px 10px 16px;
-  margin: 2px 0 6px;
-  border-left: 2px solid color-mix(in oklch, var(--line-strong), transparent 30%);
-  font-size: 12px;
-}
-.attr-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; column-gap: 12px; padding: 2px 0; }
-.attr-k { color: var(--soft); overflow-wrap: anywhere; }
-.attr-v { color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
-.attr-io { margin: 4px 0; }
-.attr-io .attr-k { display: block; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
-.attr-pre {
-  margin: 0;
-  padding: 8px 10px;
-  max-height: 220px;
-  overflow: auto;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  background: color-mix(in oklch, var(--panel), black 8%);
-  color: var(--muted);
-  font-size: 11px;
-  line-height: 1.45;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-.trace-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: color-mix(in oklch, var(--muted), var(--text) 12%);
-}
-.trace-track {
-  position: relative;
-  height: 12px;
-  border-radius: 3px;
-  background: color-mix(in oklch, var(--panel-2), var(--panel) 20%);
-}
-.trace-bar {
-  position: absolute;
-  top: 0;
-  height: 12px;
-  min-width: 2px;
-  border-radius: 3px;
-  background: var(--good);
-}
-.trace-bar.bad { background: var(--bad); }
-/* canonical SpanKind 配色:跨 agent 同义同色(model/tool/agent/turn);raw 名不参与着色。 */
-.trace-bar.k-model { background: oklch(0.72 0.13 250); }   /* 模型调用 — 蓝 */
-.trace-bar.k-tool  { background: oklch(0.74 0.14 150); }   /* 工具执行 — 绿 */
-.trace-bar.k-agent { background: oklch(0.74 0.15 300); }   /* 子 agent — 紫 */
-.trace-bar.k-turn  { background: oklch(0.78 0.13 90); }    /* 回合骨架 — 黄 */
-.trace-bar.k-other { background: color-mix(in oklch, var(--soft), var(--panel) 30%); } /* plumbing — 灰 */
-.trace-dur { color: var(--soft); text-align: right; }
-/* kind 小标:span label 前的语义角色徽标,和 bar 同色系。 */
-.kind-chip {
-  display: inline-block;
-  margin-right: 6px;
-  padding: 0 5px;
-  border-radius: 3px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--panel);
-  vertical-align: middle;
-}
-.kind-chip.k-model { background: oklch(0.72 0.13 250); }
-.kind-chip.k-tool  { background: oklch(0.74 0.14 150); }
-.kind-chip.k-agent { background: oklch(0.74 0.15 300); }
-.kind-chip.k-turn  { background: oklch(0.78 0.13 90); }
 
-/* ── Claude-Code 风格 transcript:按事件顺序读「LLM 说了什么 / 调了什么工具」,不强调时间 ── */
-.transcript { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 6px; }
-.ts-msg {
-  padding: 8px 11px;
-  border-radius: 7px;
-  border: 1px solid color-mix(in oklch, var(--line), transparent 30%);
-  background: color-mix(in oklch, var(--panel), black 4%);
-}
-.ts-assistant { border-left: 2px solid var(--good); }
-.ts-user { border-left: 2px solid var(--line-strong); }
-.ts-input { border-left: 2px solid var(--warn); }
-.ts-role {
-  display: block;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
-  color: var(--soft);
-  margin-bottom: 4px;
-}
-.ts-text {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  font-size: 13px;
-  line-height: 1.55;
-  color: var(--text);
-  max-height: 360px;
-  overflow: auto;
-}
-.ts-think { font-size: 12px; }
-.ts-think > summary {
-  cursor: pointer;
-  color: var(--soft);
-  font-style: italic;
-  list-style: none;
-  padding: 2px 0;
-}
-.ts-think > summary::-webkit-details-marker { display: none; }
-.ts-think > summary::before { content: "\2726  "; }
-.ts-think-text {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  color: var(--muted);
-  font-style: italic;
-  padding: 4px 0 6px 16px;
-  max-height: 280px;
-  overflow: auto;
-}
-.ts-tool-d {
-  border: 1px solid color-mix(in oklch, var(--line), transparent 30%);
-  border-radius: 7px;
-  background: color-mix(in oklch, var(--panel), black 6%);
-}
-.ts-tool-d > summary.ts-row {
-  list-style: none;
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: 8px minmax(110px, max-content) 1fr;
-  align-items: center;
-  column-gap: 9px;
-  padding: 7px 11px;
-}
-.ts-tool-d > summary.ts-row::-webkit-details-marker { display: none; }
-.ts-tool-d[open] > summary.ts-row { border-bottom: 1px solid color-mix(in oklch, var(--line), transparent 40%); }
-.ts-tool-d > summary.ts-row:hover { background: color-mix(in oklch, var(--panel-2), var(--panel) 20%); }
-.ts-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
-.ts-dot.bad { background: var(--bad); }
-.ts-dot.warn { background: var(--warn); }
-.ts-dot.pending { background: var(--soft); }
-.ts-tool {
-  font-weight: 600;
-  font-size: 12.5px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: var(--text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ts-preview { font-size: 12px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ts-body { padding: 8px 11px 10px; display: flex; flex-direction: column; gap: 8px; }
-.ts-field .ts-k {
-  display: block;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--soft);
-  margin-bottom: 3px;
-}
-.ts-error {
-  padding: 8px 11px;
-  border-radius: 7px;
-  border: 1px solid color-mix(in oklch, var(--bad), transparent 55%);
-  color: var(--bad);
-  font-size: 12.5px;
-}
-.ts-skill {
-  font-size: 12px;
-}
-.ts-raw .ts-tool { color: var(--soft); }
-.ts-skill .ts-text {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: var(--muted);
-}
-.ts-compaction {
-  text-align: center;
-  font-size: 11px;
-  color: var(--soft);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: 2px 0;
-}
-pre {
-  margin: 0;
-  padding: 12px;
-  border: 1px solid var(--line);
-  border-radius: 7px;
-  background: color-mix(in oklch, var(--panel), black 8%);
-  color: var(--muted);
-  overflow-wrap: anywhere;
-  overflow: auto;
-  max-height: 360px;
-  font-size: 12px;
-  line-height: 1.5;
-}
 @media (max-width: 760px) {
   .topbar { padding: 0 20px; }
   .lang-switch button { min-width: 40px; }
   main { width: min(100vw - 28px, 1120px); padding-top: 42px; }
-  .detail { padding: 18px 16px 20px; }
-  .config-strip { gap: 6px; }
-  .detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
-  .eval-grid-head,
-  .eval-item { grid-template-columns: 72px minmax(180px, 1fr) minmax(220px, 1fr) 76px 78px 72px 50px; }
-}
-
-/* ───────────────────────── Modal: error + code view (verdict chip → components/ui/badge.tsx) ───────────────────────── */
-.modal-error {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  color: var(--bad);
-  background: color-mix(in oklch, var(--bad), transparent 92%);
-  border: 1px solid color-mix(in oklch, var(--bad), var(--line) 50%);
-  border-radius: 8px;
-  padding: 8px 10px;
-  margin-bottom: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.codeview { display: flex; flex-direction: column; gap: 14px; }
-
-.code-file {
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  overflow: hidden;
-  /* review 是独立阅读面；源码区必须完全不透底，不能让报告纹理穿进来。 */
-  background: var(--panel);
-}
-.code-file-head {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  color: var(--muted);
-  padding: 7px 12px;
-  background: color-mix(in oklch, var(--panel-2), var(--line) 35%);
-  border-bottom: 1px solid var(--line);
-}
-.code-lines {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12.5px;
-  line-height: 1.7;
-  /* 整块横向滚动(github-diff 式),不是逐行各滚各的——见下面 .code-line 的
-     width: max-content:一行的真实宽度撑开这个滚动容器,滚动条对齐着整个代码块,
-     而不是消失在每行自己那条不可见的 scrollbar 里(旧写法读长 prompt 行直接读丢)。 */
-  overflow-x: auto;
-}
-.code-lines::-webkit-scrollbar { height: 8px; }
-.code-lines::-webkit-scrollbar-track { background: transparent; }
-.code-lines::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
-.code-lines::-webkit-scrollbar-thumb:hover { background: var(--soft); }
-
-.code-line {
-  display: grid;
-  grid-template-columns: 46px 22px minmax(0, 1fr) auto;
-  align-items: center;
-  border-left: 3px solid transparent;
-  /* 行宽跟着内容走(短行仍撑满可见区域,长行把 .code-lines 撑宽触发横向滚动),
-     配合 .code-lines 的 overflow-x 实现整块同步滚动。 */
-  width: max-content;
-  min-width: 100%;
-}
-.code-line.line-clickable { cursor: pointer; }
-.code-line.line-clickable:hover { background: color-mix(in oklch, var(--panel), var(--line) 45%); }
-/* send 行学 landing setup-card 的 reply 行:蓝底 + 蓝左缘 + 蓝行号,和断言行的绿/红/黄一眼区分。 */
-.code-line.line-send {
-  background: color-mix(in oklch, var(--blue), var(--panel) 88%);
-  border-left-color: var(--blue);
-}
-.code-line.line-send .ln {
-  background: color-mix(in oklch, var(--blue), var(--panel) 74%);
-  color: color-mix(in oklch, var(--blue), var(--text) 45%);
-}
-.code-line.line-send.line-clickable:hover { background: color-mix(in oklch, var(--blue), var(--panel) 82%); }
-.code-line.is-open { background: color-mix(in oklch, var(--panel), var(--line) 34%); }
-
-/* github-diff 式整行红绿:明确色块 + 更深 gutter + 实色左缘。
-   状态色占比必须足够高，暗色模式不能退化成只有一个很淡的图标。 */
-.code-line.line-pass {
-  background: color-mix(in oklch, var(--good), var(--panel) 58%);
-  border-left-color: var(--good);
-}
-.code-line.line-pass .ln {
-  background: color-mix(in oklch, var(--good), var(--panel) 34%);
-  color: var(--text);
-}
-.code-line.line-fail {
-  background: color-mix(in oklch, var(--bad), var(--panel) 58%);
-  border-left-color: var(--bad);
-}
-.code-line.line-fail .ln {
-  background: color-mix(in oklch, var(--bad), var(--panel) 34%);
-  color: var(--text);
-}
-/* soft 断言没过阈值:不影响 verdict,视觉上跟真正的 gate 失败(红)区分开,用 warn(黄)。 */
-.code-line.line-warn {
-  background: color-mix(in oklch, var(--warn), var(--panel) 58%);
-  border-left-color: var(--warn);
-}
-.code-line.line-warn .ln {
-  background: color-mix(in oklch, var(--warn), var(--panel) 34%);
-  color: var(--text);
-}
-.code-line.line-pass.line-clickable:hover { background: color-mix(in oklch, var(--good), var(--panel) 64%); }
-.code-line.line-fail.line-clickable:hover { background: color-mix(in oklch, var(--bad), var(--panel) 64%); }
-.code-line.line-warn.line-clickable:hover { background: color-mix(in oklch, var(--warn), var(--panel) 64%); }
-
-.ln {
-  text-align: right;
-  font-size: 11px;
-  color: var(--soft);
-  user-select: none;
-  padding: 1px 8px 1px 0;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-.gmark { display: inline-flex; align-items: center; justify-content: center; }
-/* gutter 用 lucide 图标(对齐 landing:CheckCircle2/MessageCircle),不再用 ✓/✗ 文本字形。 */
-.gstat { width: 13px; height: 13px; flex-shrink: 0; }
-.gstat.good { color: var(--good); }
-.gstat.bad { color: var(--bad); }
-.gstat.warn { color: var(--warn); }
-.gstat.na { color: var(--muted, #8a8f98); }
-.gsend { width: 13px; height: 13px; flex-shrink: 0; color: var(--blue); }
-
-.ctext { white-space: pre; color: var(--text); padding-left: 8px; }
-.lbadges { padding-right: 12px; }
-
-.lbadges { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; justify-self: end; }
-.abadge {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  font-weight: 650;
-  padding: 0 6px;
-  border-radius: 5px;
-  border: 1px solid transparent;
-}
-.abadge.good { color: var(--good); border-color: color-mix(in oklch, var(--good), var(--line) 55%); background: color-mix(in oklch, var(--good), transparent 90%); }
-.abadge.bad { color: var(--bad); border-color: color-mix(in oklch, var(--bad), var(--line) 55%); background: color-mix(in oklch, var(--bad), transparent 90%); }
-.abadge.warn { color: var(--warn); border-color: color-mix(in oklch, var(--warn), var(--line) 55%); background: color-mix(in oklch, var(--warn), transparent 90%); }
-/* unavailable:独立第三态(非红非绿),证据评不了 ≠ 失败 */
-.abadge.na { color: var(--muted, #8a8f98); border-color: var(--line); background: color-mix(in oklch, var(--muted, #8a8f98), transparent 92%); }
-.abadge-th { opacity: 0.55; font-weight: 400; }
-
-/* 可点击行的显式提示:send 行一个 "reply" 药丸,断言行一个右侧展开箭头;hover 时变亮。 */
-.reply-hint {
-  font-size: 10px;
-  font-weight: 650;
-  letter-spacing: 0.02em;
-  color: var(--muted);
-  border: 1px solid color-mix(in oklch, var(--line-strong), transparent 12%);
-  border-radius: 5px;
-  padding: 1px 7px;
-  background: color-mix(in oklch, var(--panel), var(--line) 28%);
-  transition: color 0.12s, border-color 0.12s, background 0.12s;
-}
-.code-line.line-send .reply-hint {
-  color: color-mix(in oklch, var(--blue), var(--text) 30%);
-  border-color: color-mix(in oklch, var(--blue), var(--line) 55%);
-  background: color-mix(in oklch, var(--blue), transparent 88%);
-}
-.code-line.line-clickable:hover .reply-hint {
-  color: var(--text);
-  border-color: color-mix(in oklch, var(--blue), var(--line) 30%);
-  background: color-mix(in oklch, var(--blue), transparent 80%);
-}
-.line-chev {
-  width: 14px;
-  height: 14px;
-  color: var(--soft);
-  transition: transform 0.12s, color 0.12s;
-}
-.line-chev.is-open { transform: rotate(90deg); }
-.code-line.line-clickable:hover .line-chev { color: var(--text); }
-
-.line-detail {
-  font-family: var(--sans, -apple-system, system-ui, "Segoe UI", sans-serif);
-  white-space: normal;
-  padding: 10px 16px 12px 60px;
-  background: color-mix(in oklch, var(--panel), var(--line) 22%);
-  border-left: 3px solid var(--line-strong);
-  font-size: 12.5px;
-}
-.reply-panel { display: flex; flex-direction: column; gap: 9px; border-left-color: color-mix(in oklch, var(--blue), var(--line) 40%); }
-/* assistant 角色标签用蓝色,对齐 landing 的 code-note-role;绿色留给断言通过。 */
-.reply-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); display: block; margin-bottom: 2px; }
-.reply-text { color: var(--text); white-space: pre-wrap; word-break: break-word; }
-.reply-think { font-size: 12px; color: var(--muted); }
-.reply-think summary { cursor: pointer; user-select: none; }
-.reply-think-text { white-space: pre-wrap; color: var(--soft); margin-top: 4px; padding-left: 4px; }
-.reply-tool { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); display: flex; gap: 8px; flex-wrap: wrap; }
-.reply-tool-name { color: var(--warn); }
-.reply-tool-out { color: var(--muted); }
-.reply-err { color: var(--bad); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-.reply-skill { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); }
-.reply-user .reply-text { color: var(--muted); white-space: pre-wrap; word-break: break-word; }
-.reply-empty { color: var(--soft); }
-
-.assert-detail { display: flex; flex-direction: column; gap: 9px; }
-.assert-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
-.assert-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
-.assert-sev { font-size: 10px; color: var(--soft); text-transform: uppercase; letter-spacing: 0.04em; }
-.assert-score { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
-.assert-reason { grid-column: 1 / -1; color: var(--muted); white-space: pre-wrap; font-size: 12px; }
-
-/* 可观测性:裁判看到的材料(默认折叠,展开排查「为什么是这个分」)。 */
-.assert-evidence { grid-column: 1 / -1; margin-top: 2px; }
-.assert-evidence > summary {
-  cursor: pointer;
-  user-select: none;
-  font-size: 11px;
-  color: var(--soft);
-  letter-spacing: 0.02em;
 }
-.assert-evidence > summary:hover { color: var(--text); }
-.assert-evidence-pre {
-  margin: 6px 0 0;
-  padding: 8px 10px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11.5px;
-  line-height: 1.5;
-  color: var(--text);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  background: color-mix(in oklch, var(--panel), var(--line) 24%);
-  border: 1px solid var(--line);
-  border-radius: 7px;
-  max-height: 260px;
-  overflow-y: auto;
-}
-
-.code-orphans { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
-.code-orphans-head { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
-
-/* ── Attempt 详情(契约:docs/feature/reports/view.md「Attempt 详情」) ── */
-.modal-sect {
-  font-size: 11px;
-  font-weight: 660;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--muted);
-  margin-bottom: 6px;
-}
-/* 断言区:仅源码不可用时出现的 fallback 呈现面。 */
-.attempt-asserts { margin-bottom: 14px; }
-.attempt-asserts-open {
-  margin-top: 6px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--panel);
-  overflow: hidden;
-}
-/* 复用 CodeView 的 .assert-detail 排版,但脱离代码行上下文:去掉行内缩进与左缘。 */
-.attempt-asserts .assert-detail { padding: 10px 12px; border-left: 0; background: transparent; }
-/* 长 expected/received(整文件 dump)一律有界滚动:断言明细无论住在失败索引 fallback、
-   源码行展开还是 NoSourceBody,都不把页面其余区块挤出视口。 */
-.assert-reason { max-height: 180px; overflow-y: auto; }
-/* 失败索引行:summary 一行是标题(徽章/名字/matcher/锚),明细收在行内一次展开。 */
-.fail-row { border-bottom: 1px solid var(--line); }
-.fail-row:last-child { border-bottom: 0; }
-.fail-sum {
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  padding: 8px 12px;
-  cursor: pointer;
-  user-select: none;
-  list-style: none;
-  min-width: 0;
-}
-.fail-sum::-webkit-details-marker { display: none; }
-.fail-sum::before {
-  content: "";
-  width: 0;
-  height: 0;
-  border-left: 4px solid var(--soft);
-  border-top: 3.5px solid transparent;
-  border-bottom: 3.5px solid transparent;
-  flex-shrink: 0;
-  align-self: center;
-  transition: transform 0.12s;
-}
-.fail-row[open] > .fail-sum::before { transform: rotate(90deg); }
-.fail-sum:hover { background: color-mix(in oklch, var(--panel), var(--line) 30%); }
-.fail-name {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  color: var(--text);
-  overflow-wrap: anywhere;
-}
-.fail-matcher {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11.5px;
-  color: var(--muted);
-  overflow-wrap: anywhere;
-}
-.fail-body {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 2px 12px 10px 24px;
-}
-.assert-loc {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  color: var(--soft);
-  margin-left: 8px;
-  white-space: nowrap;
-}
-.asserts-passed { margin-top: 8px; }
-.asserts-passed > summary,
-.asserts-passed-group > summary {
-  cursor: pointer;
-  user-select: none;
-  font-size: 12px;
-  color: var(--muted);
-}
-.asserts-passed > summary:hover,
-.asserts-passed-group > summary:hover { color: var(--text); }
-.asserts-passed-group { margin: 6px 0 0 14px; }
-.asserts-passed-group > .assert-detail { margin-top: 4px; }
-
-/* ── Attempt 详情:统一时间树(整区默认收合;展开后主链分解条 + 默认收合的 children) ── */
-.attempt-timing { margin: 14px 0; }
-summary.timing-sum {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-  list-style: none;
-}
-summary.timing-sum::-webkit-details-marker { display: none; }
-summary.timing-sum::before {
-  content: "";
-  width: 0;
-  height: 0;
-  border-left: 4px solid var(--soft);
-  border-top: 3.5px solid transparent;
-  border-bottom: 3.5px solid transparent;
-  flex-shrink: 0;
-  transition: transform 0.12s;
-}
-details[open] > summary.timing-sum::before { transform: rotate(90deg); }
-summary.timing-sum:hover .modal-sect { color: var(--text); }
-.timing-sum .modal-sect { margin-bottom: 0; }
-.phase-bar {
-  display: flex;
-  height: 8px;
-  border-radius: 4px;
-  overflow: hidden;
-  gap: 1px;
-  margin: 7px 0 8px;
-}
-.phase-seg { min-width: 2px; flex-basis: 0; }
-.phase-seg-1 { background: var(--series-1); }
-.phase-seg-2 { background: var(--series-2); }
-.phase-seg-3 { background: var(--series-3); }
-.phase-seg-4 { background: var(--series-4); }
-.phase-seg-5 { background: var(--series-5); }
-.phase-seg-6 { background: var(--series-6); }
-.phase-seg-bad { background: var(--bad); }
-.phase-list,
-.timing-kids { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
-.timing-kids { padding-left: 18px; margin-top: 2px; }
-.phase-row,
-.tnode-row { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.7; min-width: 0; }
-summary.phase-row,
-summary.tnode-row { cursor: pointer; user-select: none; list-style: none; }
-summary.phase-row::-webkit-details-marker,
-summary.tnode-row::-webkit-details-marker { display: none; }
-summary.phase-row::before,
-summary.tnode-row::before {
-  content: "";
-  width: 0;
-  height: 0;
-  border-left: 4px solid var(--soft);
-  border-top: 3.5px solid transparent;
-  border-bottom: 3.5px solid transparent;
-  flex-shrink: 0;
-  transition: transform 0.12s;
-}
-details[open] > summary.phase-row::before,
-details[open] > summary.tnode-row::before { transform: rotate(90deg); }
-/* 无 children 的行:占位对齐有箭头的行。 */
-li.phase-row::before,
-li.tnode-row::before { content: ""; width: 4px; flex-shrink: 0; }
-.phase-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
-.phase-dot-none { background: transparent; }
-/* 名称列定宽:各行的耗时起始对齐成一列(最长 phase 名 telemetry.configure 也在宽度内)。 */
-.phase-name { color: var(--text); white-space: nowrap; width: 168px; flex-shrink: 0; }
-.phase-dur { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
-.phase-fail { color: var(--bad); font-weight: 650; }
-.phase-kids {
-  font-size: 10px;
-  color: var(--soft);
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: 0 6px;
-  line-height: 1.5;
-}
-.tnode-label {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11.5px;
-  color: var(--muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-.tnode-meta { font-size: 11px; color: var(--soft); padding: 3px 0 3px 18px; }
-.tnode-trace { margin: 4px 0 6px 18px; }
-.phase-closing { margin-top: 8px; }
-.phase-closing-head { font-size: 11px; color: var(--soft); margin-bottom: 2px; }
-
-/* usage / sandbox 元信息 chips。 */
-.meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
-.meta-chip {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  color: var(--muted);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  padding: 3px 9px;
-  background: var(--panel);
-}
-.meta-chip b { color: var(--text); font-weight: 640; }
-
-/* lightweight TS syntax tokens */
-.tok-comment { color: var(--soft); font-style: italic; }
-.tok-str { color: light-dark(#0a7d3c, #7ee787); }
-.tok-kw { color: light-dark(#9333ea, #c792ea); }
-.tok-num { color: light-dark(#b25000, #f0a36b); }
-.tok-fn { color: light-dark(#0b62d6, #82aaff); }
 
 /* ── 外壳:导航右侧外部链接与页脚(docs/feature/reports/library/shell.md) ── */
 .shell-links { display: flex; gap: 8px; align-items: center; margin-left: auto; }