dsh-data-domain-knowledge 0.1.0-alpha.1

package/src/client/styles.css

@@ -0,0 +1,940 @@
+/* ---------------------------------------------------------------- tokens
+ *
+ * **本文件不再声明任何 `--tita-*` 名字。** 读法因此只有一条：`--tita-*` 一律指
+ * `packages/ui/src/theme.css` 的共享令牌（声明在 `:root, body` 上，跟着宿主的
+ * `data-ds-dark-theme` 一起翻），插件自己派生的颜色一律挂 `--ddk-` 前缀。
+ *
+ * 旧版在这里重定义了 `--tita-blue` / `--tita-violet` / `--tita-green` / `--tita-amber`
+ * 四个同名不同义的槽位（amber 指向的其实是主色，`--tita-green` 是一个不参与主题的
+ * 固定值），名字与共享词表撞车；同时 `--tita-ink` 这类又反过来指向 `--color-tita-ink`，
+ * 而后者又指回 `--tita-ink` —— 在 `:root` 上构成一个自定义属性环。现在两件事都消失了：
+ * 共享令牌直接读，插件派生色只有一个来源。
+ *
+ * 共享词表里没有「红色底 / 红色边」这两档（danger 只是一个对比度达标的墨色），所以按
+ * 共享 tone 的同一套比例派生：10% 作底、32% 作边。混的是 surface 而不是 transparent
+ * —— 透明混色在深色底上等于看不见，而 surface 会跟着主题走。声明在 `:root, body`
+ * 而不是只在 `:root`：自定义属性的 `var()` 是在**声明它的那个元素**上求值的，只写在
+ * `:root` 会把浅色值冻在 <html> 上再分发给所有子节点（见 theme.css 文件头）。
+ */
+:root,
+body {
+  --ddk-danger-tint: color-mix(in srgb, var(--tita-danger) 10%, var(--tita-surface));
+  --ddk-danger-line: color-mix(in srgb, var(--tita-danger) 32%, var(--tita-surface));
+}
+
+.tita-panel {
+  box-sizing: border-box;
+  display: flex;
+  container-type: inline-size;
+  width: 100%;
+  min-width: 0;
+  /* `position: relative` 是这条「只允许一个滚动条」规则的一半：插件根节点必须同时
+     是定位上下文。否则插件内 position:absolute 的装饰/无障碍节点（.tita-srOnly、
+     视觉隐藏的节点列表）会向上找到宿主的 pane body 作为包含块，它们的静态位置
+     ——也就是长内容的末尾——会把宿主面板撑出第二条空滚动条。 */
+  position: relative;
+  /* One scroller only: the panel is capped at the host pane height and
+     `.tita-content` owns the vertical scroll, so the host pane never grows a
+     second scrollbar beside it. */
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--tita-canvas);
+  color: var(--tita-ink);
+  /* 之前这里写的是 `Inter, ui-sans-serif, …`：Inter 从来没有被加载过（没有 @font-face、
+     没有 font link），所以它一直只是「声明了一个不存在的字体」，实际渲染落到 ui-sans-serif。
+     现在直接读共享的字体 token，并且把中文也点名——中文文案不该交给浏览器的兜底去决定。 */
+  font-family: var(--font-tita);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.tita-panel *, .tita-panel *::before, .tita-panel *::after { box-sizing: border-box; }
+/* 面板分两层：.tita-tabBar 是外壳（永远可见），.tita-content 是唯一的滚动区。
+   Tab 放在外壳里而不是靠 position: sticky —— 置顶就该是结构，不是补丁。
+   0029：撤掉 tab 栏底边那条分隔线。分段控件自己就有边框和底板，横线是第二道
+   区隔；两条挨着画，读起来像「两个工具条叠在一起」。 */
+.tita-panelTabs { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
+/* 底边只留 4px：tab 自己的下边框就是内容的分界，下面再垫 7px 只是把两者推开
+   （GUI 反馈 2026-09-21「每个 tab 下的内容距离 tab 太远」）。8px 的内容上边距
+   由 `TabsContent` 给，两者相加才是从分界线到第一块内容的距离。 */
+.tita-tabBar { display: flex; flex: 0 0 auto; align-items: center; background: var(--tita-surface); padding: 7px 12px 4px; }
+/* 视图级状态行：只在真的读取失败 / 读取中时才出现。标题行撤掉之后，
+   这是内容顶部唯一允许出现的一行「关于这一页本身」的文字。 */
+.tita-viewStatus { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--tita-ink-muted); font-size: 11.5px; }
+.tita-viewStatus > svg { flex: 0 0 auto; color: var(--tita-warning); }
+
+.tita-content { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; min-height: 0; margin: 0; padding: 0 12px 28px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
+.tita-hiddenInput { display: none; }
+
+/* ------------------------------------------------- 画布优先的视图（智能归因） */
+/* 为什么要有这一档：`.tita-content` 的默认契约是「唯一的纵向滚动区」，它给所有
+   视图都留了四周内边距。而智能归因的主内容是一块画布 —— 画布既不该跟着页面滚，
+   也不该被内边距削掉一圈。所以这里给它一个显式的**第二档契约**：内容区本身变成
+   不滚动的纵向 flex 容器，滚动权下放给块内各自需要的区域（案例/排查正文）。
+   这不是给一个视图开后门：它是「主内容是画布」这一类视图的通用形态，将来再有
+   画布型视图（比如血缘图）直接复用这一档，而不是各自写一套负边距。 */
+.tita-contentStage { display: flex; flex-direction: column; overflow: hidden; padding: 0 12px 12px; }
+.tita-contentStage .tita-pageHeader { flex: 0 0 auto; padding-bottom: 6px; }
+.tita-stageContent { display: flex; min-width: 0; min-height: 0; flex: 1 1 auto; flex-direction: column; padding-top: 0; }
+
+/* ------------------------------------------------------------------ tabs */
+/* 分段控件（segmented）落在白色工具条上：轨道是一块浅灰圆角底板，选中项是浮起的
+   白色胶囊 + 主色文字。不用下划线 —— 下划线会和下方卡片边框在视觉上打架。
+   0035：预览抽屉里「内容」那一行的 Markdown / 文本切换是**同一套控件**，所以选择器
+   带上 `.tita-kbViewTabs`。抽屉走 Portal、不在 `.tita-panel` 里，这条容器规则必须显式
+   点名它；触发器那几条规则没有 `.tita-panel` 前缀，所以自动生效 —— 两处一份定义，
+   不各造一套。 */
+.tita-panel .tita-tabsList,
+.tita-kbViewTabs {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 2px;
+  overflow-x: auto;
+  border: 1px solid var(--tita-line);
+  border-radius: 9px;
+  background: var(--tita-surface-muted);
+  padding: 2px;
+  scrollbar-width: none;
+}
+.tita-tabsList::-webkit-scrollbar { display: none; }
+.tita-tabsList .tita-uiTabsTrigger {
+  display: inline-flex;
+  min-height: 28px;
+  align-items: center;
+  gap: 5px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  padding: 0 11px;
+  color: var(--tita-ink-muted);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: -.01em;
+}
+.tita-tabsList .tita-uiTabsTrigger svg { flex: 0 0 auto; opacity: .85; }
+.tita-tabsList .tita-uiTabsTrigger:hover { background: color-mix(in srgb, var(--tita-surface) 70%, transparent); color: var(--tita-ink); }
+.tita-tabsList .tita-uiTabsTrigger[data-state='active'] {
+  border-bottom-color: transparent;
+  background: var(--tita-surface);
+  color: var(--tita-primary);
+  font-weight: 680;
+  box-shadow: 0 1px 2px rgb(15 23 42 / .12), inset 0 0 0 1px var(--tita-primary-shadow);
+}
+.tita-tabsList .tita-uiTabsTrigger[data-state='active'] svg { opacity: 1; }
+/* 抽屉里那一枚是**行内次级控件**：它站在「内容」这个小节标题旁边，所以比顶栏那枚小
+   一号（顶栏是面板级导航，这里是同一个分块里的两种读法）。放在基础规则之后覆盖 ——
+   选择器权重相同，靠顺序取胜。 */
+.tita-kbViewTabs { min-height: 24px; }
+.tita-kbViewTabs .tita-uiTabsTrigger { min-height: 20px; padding: 0 8px; font-size: 11px; }
+
+/* ---------------------------------------------------------------- header */
+/* 标题行只占一行：图标 + 标题 + 一句说明。状态徽标与 ⋯ 菜单已撤（0022）。 */
+.tita-pageHeader { display: flex; align-items: center; padding: 8px 2px 10px; }
+.tita-headingGroup { display: flex; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+.tita-headingGroup h1 { margin: 0; color: var(--tita-ink); font-size: 15px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
+.tita-headingGroup > p { min-width: 0; margin: 0; overflow: hidden; color: var(--tita-ink-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.tita-brandMark { display: inline-flex; width: 24px; height: 24px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--tita-primary-line); border-radius: 8px; background: var(--tita-primary-soft); color: var(--tita-primary); }
+.tita-brandMarkBlue { border-color: var(--tita-primary-line); background: var(--tita-primary-soft); color: var(--tita-primary); }
+.tita-brandMarkViolet { border-color: var(--tita-tone-violet-line); background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
+.tita-brandMarkAmber { border-color: var(--tita-tone-amber-line); background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); }
+.tita-brandMarkGreen { border-color: var(--tita-tone-green-line); background: var(--tita-tone-green-tint); color: var(--tita-tone-green); }
+
+.tita-notice { display: flex; min-height: 42px; align-items: center; gap: 9px; margin: 0 0 14px; padding: 8px 8px 8px 13px; box-shadow: none; }
+.tita-notice > span { flex: 1; min-width: 0; }
+.tita-noticeError { border-color: var(--ddk-danger-line); background: var(--ddk-danger-tint); color: var(--tita-danger); }
+.tita-noticeSuccess { border-color: var(--tita-tone-green-line); background: var(--tita-tone-green-tint); color: var(--tita-success); }
+
+/* ------------------------------------------------------------- overview */
+/* 概览是单列堆叠：问题域 → 回字形架构图。右侧栏（自进化状态/图例）随 0022 一并撤掉，
+   248px 的第二列留着只会让回字形被挤窄。 */
+.tita-architecture { display: grid; gap: 10px; min-width: 0; }
+
+/* 车道身份靠「彩色标题条 + 底色」，不再靠左侧那条 3px 竖线（0022：竖线不承载信息，
+   三条车道却各自都有一条，反而显得是同一套装饰）。 */
+
+
+
+/* B 车道的四段：上传 → 编译 → 召回 → 重排。 */
+.tita-stageStack { display: grid; flex: 1 1 100%; min-width: 0; gap: 8px; }
+.tita-stageRow { display: grid; min-width: 0; gap: 6px; }
+.tita-stageLabel { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
+.tita-stageLabel b { display: inline-flex; width: 17px; height: 17px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 6px; font-size: 10px; font-weight: 800; }
+.tita-stageLabelViolet { color: var(--tita-tone-violet); }
+.tita-stageLabelViolet b { background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
+.tita-stageLabelGreen { color: var(--tita-tone-green); }
+.tita-stageLabelGreen b { background: var(--tita-tone-green-tint); color: var(--tita-tone-green); }
+.tita-stageTrack { display: flex; min-width: 0; flex-wrap: wrap; align-items: stretch; gap: 8px; }
+.tita-stageConnector { display: flex; padding-left: 4px; }
+.tita-flowFork { display: grid; min-width: 158px; flex: 1 1 176px; gap: 8px; align-content: stretch; }
+
+.tita-flowNode { display: flex; min-width: 152px; max-width: 268px; flex: 1 1 176px; align-items: flex-start; gap: 9px; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); padding: 10px 11px; color: var(--tita-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
+.tita-flowNode:hover { transform: translateY(-1px); border-color: var(--tita-line-strong); box-shadow: 0 7px 16px rgba(30, 43, 67, .08); }
+.tita-flowNode:focus-visible { outline: 3px solid var(--tita-focus-ring); outline-offset: 2px; }
+.tita-flowNodeCompact { min-width: 146px; padding: 8px 10px; }
+.tita-flowNodeSelected { border-color: currentColor; box-shadow: 0 0 0 3px var(--tita-primary-wash); }
+.tita-flowNodeIcon { display: inline-flex; width: 30px; height: 30px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 9px; }
+.tita-flowNodeCompact .tita-flowNodeIcon { width: 26px; height: 26px; border-radius: 8px; }
+.tita-flowNodeCopy { display: grid; min-width: 0; gap: 3px; }
+.tita-flowNodeCopy strong { color: var(--tita-ink); font-size: 12px; font-weight: 700; line-height: 1.35; }
+.tita-flowNodeCompact .tita-flowNodeCopy strong { font-size: 11.5px; }
+.tita-flowNodeCopy small { color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.45; }
+.tita-flowNodeBadges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
+.tita-flowNodeBadges .tita-uiBadge { min-height: 19px; padding: 0 6px; font-size: 10px; }
+
+.tita-flowNodeBlue { color: var(--tita-primary); }
+.tita-flowNodeBlue .tita-flowNodeIcon { background: var(--tita-primary-soft); color: var(--tita-primary); }
+.tita-flowNodeViolet { color: var(--tita-tone-violet); }
+.tita-flowNodeViolet .tita-flowNodeIcon { background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
+.tita-flowNodeGreen { color: var(--tita-tone-green); }
+.tita-flowNodeGreen .tita-flowNodeIcon { background: var(--tita-tone-green-tint); color: var(--tita-tone-green); }
+.tita-flowNodeAmber { color: var(--tita-tone-amber); }
+.tita-flowNodeAmber .tita-flowNodeIcon { background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); }
+.tita-flowNodeNeutral { color: var(--tita-ink-muted); }
+.tita-flowNodeNeutral .tita-flowNodeIcon { background: var(--tita-surface-muted); color: var(--tita-ink-muted); }
+
+.tita-flowArrow { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--tita-ink-faint); }
+.tita-flowArrowBlue { color: var(--tita-primary); }
+.tita-flowArrowViolet { color: var(--tita-tone-violet); }
+.tita-flowArrowGreen { color: var(--tita-success); }
+.tita-flowArrowAmber { color: var(--tita-warning); }
+
+.tita-archBridge { display: flex; align-items: center; gap: 9px; padding: 0 6px; color: var(--tita-success); }
+.tita-archBridgeUp { display: inline-flex; flex: 0 0 auto; color: currentColor; }
+.tita-archBridgeLine { height: 1px; min-width: 12px; flex: 1 1 auto; background: currentColor; opacity: .45; }
+.tita-archBridgeLabel { flex: 0 0 auto; color: var(--tita-tone-green); font-size: 11px; font-weight: 650; }
+
+/* ------------------------------------------------------------ right rail */
+.tita-rail { display: grid; min-width: 0; align-content: start; gap: 12px; }
+.tita-railCard { min-width: 0; padding: 14px; }
+.tita-railCardHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.tita-railCardHeader h3 { margin: 0; color: var(--tita-ink); font-size: 13px; font-weight: 750; }
+.tita-donut { position: relative; width: 132px; height: 132px; margin: 14px auto 12px; }
+.tita-donut svg { display: block; width: 100%; height: 100%; }
+.tita-donut strong { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tita-ink); font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
+.tita-railRows { display: grid; margin: 0; padding: 0; list-style: none; }
+.tita-railRows li { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--tita-surface-muted); padding: 8px 2px; color: var(--tita-ink-muted); font-size: 11.5px; }
+.tita-railRows li:first-child { border-top: 0; }
+.tita-railRowIcon { display: inline-flex; flex: 0 0 auto; color: var(--tita-ink-faint); }
+.tita-railRowLabel { flex: 1 1 auto; min-width: 0; }
+.tita-railRows strong { color: var(--tita-ink); font-size: 11.5px; white-space: nowrap; }
+.tita-railRowDanger strong { color: var(--tita-danger); }
+.tita-railRowDanger .tita-railRowIcon { color: var(--tita-danger); }
+.tita-railActions { display: grid; gap: 7px; margin-top: 12px; }
+.tita-railCta { width: 100%; }
+.tita-legendList { display: grid; margin: 12px 0 0; padding: 0; list-style: none; gap: 12px; }
+.tita-legendList li { display: flex; align-items: center; gap: 11px; }
+.tita-legendList strong { display: block; color: var(--tita-ink); font-size: 11.5px; }
+.tita-legendList small { display: block; color: var(--tita-ink-faint); font-size: 10.5px; }
+.tita-legendArrow { position: relative; width: 34px; height: 0; flex: 0 0 auto; border-top: 2px solid currentColor; }
+.tita-legendArrow::after { content: ''; position: absolute; top: -4px; right: -2px; border-left: 7px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
+.tita-legendArrowBlue { color: var(--tita-primary); }
+.tita-legendArrowViolet { color: var(--tita-tone-violet); }
+.tita-legendArrowGreen { color: var(--tita-tone-green); }
+.tita-railQuote { margin: 2px 2px 0; color: var(--tita-ink-faint); font-size: 11px; line-height: 1.65; text-align: center; }
+.tita-railQuote small { display: block; margin-top: 6px; color: var(--tita-ink-faint); }
+
+/* -------------------------------------------------------- shared metrics */
+.tita-viewStack { display: grid; gap: 14px; }
+.tita-statsRow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+.tita-metricCard { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 13px 14px; }
+.tita-metricIcon { display: inline-flex; width: 34px; height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 9px; background: var(--tita-surface-muted); color: var(--tita-ink-muted); }
+.tita-metricToneViolet .tita-metricIcon { background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
+.tita-metricToneBlue .tita-metricIcon { background: var(--tita-primary-soft); color: var(--tita-primary); }
+.tita-metricToneGreen .tita-metricIcon { background: var(--tita-tone-green-tint); color: var(--tita-tone-green); }
+.tita-metricToneAmber .tita-metricIcon { background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); }
+.tita-metricCopy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
+.tita-metricCopy small { color: var(--tita-ink-muted); font-size: 11px; }
+.tita-metricCopy strong { overflow: hidden; color: var(--tita-ink); font-size: 18px; font-weight: 750; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
+.tita-metricCopy em { overflow: hidden; color: var(--tita-ink-faint); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
+
+.tita-workspaceCard { min-width: 0; padding: 16px; }
+.tita-cardHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
+/* 卡头右侧那一组：状态徽标 + 「参数」chip（0034）。它们是一组，所以 gap 比外层小。 */
+.tita-cardHeaderActions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
+.tita-workspaceCard h3, .tita-memoryCard h3, .tita-skillCard h3, .tita-skillHero h3, .tita-evalRunner h3, .tita-evalPlan h3 { margin: 4px 0 0; color: var(--tita-ink); font-size: 15px; font-weight: 750; }
+.tita-sectionEyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--tita-ink-faint); font-size: 10px; font-weight: 750; letter-spacing: .1em; }
+.tita-headerMetaText { padding-top: 16px; color: var(--tita-ink-faint); font-size: 11px; }
+.tita-cardDescription { margin: 5px 0 13px; color: var(--tita-ink-muted); font-size: 12px; line-height: 1.6; }
+.tita-actionRow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+.tita-resultBadge { margin-top: 10px; }
+.tita-inputRow { display: flex; align-items: center; gap: 8px; }
+.tita-inputRow .tita-uiInput { flex: 1; min-width: 0; }
+.tita-infoList { display: grid; gap: 8px; margin-top: 14px; }
+.tita-infoList > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--tita-line); padding: 7px 0; }
+.tita-infoList span { color: var(--tita-ink-muted); font-size: 11px; }
+.tita-infoList strong { color: var(--tita-ink); font-size: 11px; text-align: right; }
+
+.tita-buildTrace { display: flex; min-width: 0; align-items: stretch; flex-wrap: wrap; gap: 9px; margin: 4px 0 2px; }
+.tita-buildTraceItem { display: flex; min-width: 0; flex: 1 1 190px; align-items: center; gap: 9px; }
+.tita-buildTraceNode { display: flex; width: 100%; min-width: 0; min-height: 58px; flex: 1 1 0; align-items: center; gap: 9px; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); padding: 9px 10px; color: var(--tita-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
+.tita-buildTraceNode:hover { transform: translateY(-1px); border-color: var(--tita-line-strong); box-shadow: 0 6px 14px rgba(30, 43, 67, .06); }
+.tita-buildTraceNode:focus-visible { outline: 3px solid var(--tita-focus-ring); outline-offset: 2px; }
+.tita-buildTraceNodeSelected { border-color: currentColor; }
+.tita-buildTraceIcon { display: inline-flex; width: 29px; height: 29px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 8px; }
+.tita-buildTraceNode > span:last-child { display: grid; min-width: 0; gap: 2px; }
+.tita-buildTraceNode strong, .tita-buildTraceNode small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tita-buildTraceNode strong { color: var(--tita-ink); font-size: 12px; line-height: 1.3; }
+.tita-buildTraceNode small { color: var(--tita-ink-muted); font-size: 10px; }
+.tita-buildTraceBlue .tita-buildTraceIcon { background: var(--tita-primary-soft); color: var(--tita-primary); }
+.tita-buildTraceViolet .tita-buildTraceIcon { background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
+.tita-buildTraceGreen .tita-buildTraceIcon { background: var(--tita-tone-green-tint); color: var(--tita-tone-green); }
+.tita-buildTraceAmber .tita-buildTraceIcon { background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); }
+
+.tita-memoryGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+.tita-memoryCard { min-width: 0; padding: 16px; }
+.tita-memoryCardWide { grid-column: 1 / -1; }
+.tita-memoryCard p { min-height: 42px; margin: 10px 0 15px; color: var(--tita-ink-muted); font-size: 12px; line-height: 1.7; }
+.tita-timeline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0; color: var(--tita-ink-muted); font-size: 12px; }
+.tita-timeline span { border: 1px solid var(--tita-line); border-radius: 7px; background: var(--tita-surface-muted); padding: 6px 9px; }
+.tita-timeline i { color: var(--tita-ink-faint); font-style: normal; }
+
+.tita-skillHero { display: flex; align-items: center; gap: 12px; padding: 15px 16px; }
+.tita-skillHero > div:nth-child(2) { flex: 1; min-width: 0; }
+.tita-skillHero p { margin: 5px 0 0; color: var(--tita-ink-muted); font-size: 12px; }
+.tita-skillHeroIcon, .tita-skillIcon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 10px; background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); }
+.tita-skillHeroIcon { width: 40px; height: 40px; }
+.tita-skillGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
+.tita-skillCard { min-width: 0; padding: 14px; }
+.tita-skillCardTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.tita-skillIcon { width: 30px; height: 30px; background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
+.tita-skillCard p { min-height: 36px; margin: 8px 0 16px; color: var(--tita-ink-muted); font-size: 12px; line-height: 1.6; }
+.tita-skillMeta { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--tita-line); padding-top: 9px; color: var(--tita-ink-faint); font-size: 10px; }
+
+.tita-evalGrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 14px; }
+.tita-evalRunner, .tita-evalPlan { min-width: 0; padding: 16px; }
+.tita-evalInput { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
+.tita-evalInput .tita-uiInput { flex: 1; min-width: 0; }
+.tita-evalResult { display: flex; align-items: center; gap: 7px; margin-top: 12px; border: 1px solid var(--tita-tone-green-line); border-radius: 9px; background: var(--tita-tone-green-tint); color: var(--tita-success); padding: 9px 10px; font-size: 11px; }
+.tita-evalResult span { margin-left: auto; color: var(--tita-success); }
+.tita-emptyState { display: flex; align-items: center; gap: 7px; margin-top: 14px; border: 1px dashed var(--tita-line); border-radius: 9px; color: var(--tita-ink-faint); padding: 10px; font-size: 11px; }
+.tita-evalRows { display: grid; margin: 8px 0 14px; }
+.tita-evalRows > div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--tita-line); padding: 9px 0; color: var(--tita-ink-muted); font-size: 11px; }
+.tita-evalRows strong { color: var(--tita-ink-faint); font-weight: 600; }
+
+/* --------------------------------------------------------------- drawer */
+/*
+ * 抽屉宽度。内边距由 UI 包的 `.tita-uiDrawerBody`（左右 18px、上下 15px）提供。
+ *
+ * 这里原来还有一整套 `tita-drawerHeader` / `drawerBody` / `drawerDescription` /
+ * `drawerIcon` / `drawerActions` / `drawerSubtitle`，是平台抽屉换成共享组件之前留下的：
+ * 现在一个引用都没有（`styles.drawerHeader` 之类在客户端源码里 0 命中），留着只会让人
+ * 以为抽屉的间距由它们决定，改错地方。已删。
+ *
+ * 留下的是**真正决定预览抽屉版式**的三条：
+ */
+.tita-drawer { width: min(440px, 100vw); }
+/*
+ * 正文分块：块与块之间 14px。
+ *
+ * 它必须挂在抽屉正文上、而**分块容器**挂在每一块上 —— 因为一块（比如「元信息」）是
+ * 「小标题 + 它自己的表」两个同级节点，只在外层给统一 gap 会把标题和它自己的内容也
+ * 拉开 14px，读起来标题就不再管着下面那块了。
+ */
+.tita-drawerStack { display: grid; gap: 14px; align-content: start; }
+/* 一块内部：标题与自己的内容贴紧。 */
+.tita-drawerSection { display: grid; gap: 6px; align-content: start; }
+/* 分块之后，标题的上边距交给块间距 —— 否则 14 + 16 会在两处叠出一个空洞。 */
+.tita-drawerSection > .tita-kbSubHead { margin: 0; }
+.tita-toneBlue { background: var(--tita-primary-soft); color: var(--tita-primary); }
+.tita-toneViolet { background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
+.tita-toneGreen { background: var(--tita-tone-green-tint); color: var(--tita-tone-green); }
+.tita-toneAmber { background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); }
+.tita-toneNeutral { background: var(--tita-surface-muted); color: var(--tita-ink-muted); }
+.tita-actionPanel { border: 1px solid var(--tita-line); border-radius: 12px; background: var(--tita-surface); padding: 14px; }
+.tita-actionPanel h3 { margin: 0; color: var(--tita-ink); font-size: 13px; }
+.tita-actionPanel p { margin: 6px 0 12px; color: var(--tita-ink-muted); font-size: 12px; line-height: 1.6; }
+.tita-actionPanel > .tita-uiBadge { margin-top: 10px; }
+.tita-inlineHint { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--tita-ink-faint); font-size: 11px; }
+.tita-evolutionDetail > div:first-child { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
+.tita-evolutionDetail > p { margin: 0 0 14px; color: var(--tita-ink-muted); font-size: 12px; line-height: 1.7; }
+
+/* ---------------------------------------------------- settings drawer UI */
+/* 抽屉要比版本抽屉宽：这里每一块都是**两列字段 + 字段说明**，而且存储那一块还要
+   显示三条完整路径。400px 下两列会挤成一列，路径会被截成读不出。 */
+.tita-settingsDrawer { width: min(560px, 100vw); }
+.tita-settingsError { border: 1px solid var(--ddk-danger-line); border-radius: 9px; background: var(--ddk-danger-tint); color: var(--tita-danger); padding: 9px 11px; font-size: 12px; }
+.tita-settingsSection { border: 1px solid var(--tita-line); border-radius: 12px; background: var(--tita-surface); padding: 15px; }
+/* 卡片头的「参数」chip 定位过来的那一块：**一次性**强调，1.6 秒后自己回到常态。
+   它不是「选中态」（抽屉里没有选中这一回事），所以不复用 `.tita-kbStepOn` 的描边：
+   边框与底色从强调蓝淡回默认，动画的 `both` 让终态就是默认值 —— 不需要 JS 计时器
+   去清这个类。`scroll-margin-block-start` 给 `scrollIntoView` 留一口气，别让边框贴顶。 */
+.tita-settingsSection { scroll-margin-block-start: 10px; }
+.tita-settingsSection:focus-visible { outline: 2px solid var(--tita-primary); outline-offset: 2px; }
+@keyframes tita-settings-settle {
+  from { border-color: var(--tita-primary); background: var(--tita-primary-soft); }
+  to { border-color: var(--tita-line); background: var(--tita-surface); }
+}
+.tita-settingsSectionOn { animation: tita-settings-settle 1.6s ease-out both; }
+@media (prefers-reduced-motion: reduce) { .tita-settingsSectionOn { animation: none; } }
+.tita-settingsSectionHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
+.tita-settingsSectionHeader h3 { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--tita-ink); font-size: 14px; }
+/*
+ * tooltip 面板：这里的说明是整句，要左对齐、可换行、限宽。
+ *
+ * 选择器**双写同名类**是为了拿到 (0,2,0) 的特异性。UI 包的 tooltip 自带 `max-w-xs`
+ * 和 `inline-flex`（320px 宽、不换行），而插件**没有自己的 Tailwind 构建** —— 用工具类
+ * 覆盖这条路是走不通的：`max-w-[260px]` 在插件里没有对应规则，而 `cn` 的 twMerge 会先
+ * 把 `max-w-xs` 删掉，限宽于是彻底失效（实测宽度从 320px 变成 996px）。双写是这里唯一
+ * 与样式表顺序无关的写法。
+ *
+ * 限宽**不往窄了压**（这里 320px，和 UI 包默认同值）：说明要出现在图标**上方**，而第一
+ * 小节的标题离视口顶部只有 80 多像素 —— 压到 260px 会多出一行，整块高度超过那段空间，
+ * 顶部就被视口裁掉（实测裁了 21px）。让它宽一点、少一行，才既在上方又不被裁。
+ */
+.tita-infoHintPanel.tita-infoHintPanel { display: block; max-width: 320px; padding: 8px 12px; line-height: 1.65; text-align: left; white-space: normal; }
+/* 小节标题旁的说明入口：图标常驻、说明悬停才出现（见 `InfoHint`）。 */
+.tita-infoHint { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tita-subtle); cursor: help; }
+.tita-infoHint:hover { background: var(--tita-surface-muted); color: var(--tita-ink-muted); }
+.tita-infoHint:focus-visible { outline: 2px solid var(--tita-blue); outline-offset: 1px; }
+.tita-settingsSectionHeader p { margin: 4px 0 0; color: var(--tita-ink-muted); font-size: 11px; }
+.tita-settingMeta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; color: var(--tita-ink-faint); font-size: 10px; text-align: right; }
+/* 写失败时那一行不是「状态」，是**待处理的事**，所以给它警示色而不是灰。 */
+.tita-settingMetaBad { color: var(--tita-warning); font-weight: 600; }
+/*
+ * 设置项**一列**排。
+ *
+ * 原来是两列网格，但抽屉只有 380–440px 宽，两列意味着每个控件约 200px；而标签和说明
+ * 都是整句中文，换行行数不一致，于是同一行的两个字段高度不同、提示文字错位，「构建设置」
+ * 和「知识库召回设置」里还混着占两列的字段（模型路径、Python），最后一列经常空半格 ——
+ * 看起来就是没对齐。
+ *
+ * 一列之后每项的宽度、标签基线、控件左边缘都一致，占两列那个变体也就没有意义了。
+ */
+.tita-settingsGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
+.tita-settingField { display: grid; min-width: 0; gap: 5px; }
+.tita-settingField > span { color: var(--tita-ink-muted); font-size: 11px; font-weight: 600; }
+.tita-settingField input { width: 100%; min-height: 34px; border: 1px solid var(--tita-line-strong); border-radius: 8px; background: var(--tita-surface); color: var(--tita-ink); padding: 0 9px; font: inherit; font-size: 12px; }
+.tita-settingField input:disabled { background: var(--tita-surface-muted); color: var(--tita-ink-faint); cursor: not-allowed; }
+/* 只读的路径框：它读起来必须像「值」，不像「待填的空」—— 所以底色是沉的，
+   边框是浅的，光标是文本光标（能选中复制）。 */
+.tita-settingField input[readonly] { border-color: var(--tita-line); background: var(--tita-surface-muted); color: var(--tita-ink); cursor: text; }
+/* 开关不该被网格拉伸成整行宽：它是控件本身，不是「一整行」。 */
+.tita-settingField > button[role='switch'] { justify-self: start; }
+/* 字段说明：贴在字段下面，一行小字。 */
+.tita-settingHint { color: var(--tita-ink-faint); font-size: 10px; line-height: 1.5; }
+
+/* --------------------------------------------------- 根路径：选择 + 预览 */
+.tita-pickerRow { display: flex; min-width: 0; align-items: center; gap: 8px; }
+.tita-pickerRow input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
+.tita-pickerRow button { flex: 0 0 auto; white-space: nowrap; }
+.tita-spin { animation: tita-spin 900ms linear infinite; }
+@keyframes tita-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .tita-spin { animation-duration: 3s; } }
+
+.tita-layoutPreview { margin-top: 13px; border-top: 1px dashed var(--tita-line); padding-top: 12px; }
+.tita-layoutSegments { display: grid; margin: 0; padding: 0; gap: 8px; list-style: none; }
+.tita-layoutSegments > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
+.tita-layoutSegments code { color: var(--tita-ink); font-size: 11.5px; font-weight: 650; }
+.tita-layoutSegments > li > span { grid-column: 1; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.5; }
+.tita-layoutSegments em { grid-column: 2; grid-row: 1; color: var(--tita-ink-faint); font-size: 10px; font-style: normal; white-space: nowrap; }
+.tita-layoutSegments small { grid-column: 1 / -1; overflow: hidden; color: var(--tita-ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.tita-layoutMigration { margin: 11px 0 0; border-left: 2px solid var(--tita-success); background: var(--tita-surface-muted); padding: 7px 9px; color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.6; }
+.tita-layoutMigrationBad { border-left-color: var(--tita-warning); }
+.tita-layoutMigration code { color: var(--tita-ink); overflow-wrap: anywhere; }
+/* 家当不在 resource/ 下：一条**可操作**的告警，不是状态装饰 —— 所以每条都写清
+   「在哪」与「要做什么」，而不是只报一个数。 */
+.tita-layoutAssets { display: grid; margin: 11px 0 0; gap: 6px; }
+.tita-layoutAssets > p { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tita-warning); font-size: 11px; }
+.tita-layoutAssets ul { display: grid; margin: 0; padding: 0; gap: 5px; list-style: none; }
+.tita-layoutAssets li { color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.65; }
+.tita-layoutAssets li b { color: var(--tita-ink); font-weight: 650; }
+.tita-layoutAssets code { color: var(--tita-ink); overflow-wrap: anywhere; }
+.tita-layoutError { display: flex; align-items: center; gap: 6px; margin: 11px 0 0; color: var(--tita-warning); font-size: 11px; }
+
+/* --------------------------------------------------- Agent 提示词（只读预览） */
+/* 这一块刻意没有输入框：提示词的真源是 preset 的组合文件，这里给的是**视图**。
+   所以正文用等宽块 + 可选中复制，而不是一个看起来能编辑的 textarea。
+   主操作是「打开真源目录」—— 改提示词那件事发生在文件管理器里，不在这里。 */
+.tita-presetFacts { display: grid; margin: 0; gap: 7px; }
+.tita-presetFacts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--tita-line); padding-bottom: 6px; }
+.tita-presetFacts > div:last-child { border-bottom: 0; padding-bottom: 0; }
+.tita-presetFacts dt { color: var(--tita-ink-muted); font-size: 11px; }
+.tita-presetFacts dd { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; color: var(--tita-ink); font-size: 11.5px; font-weight: 650; text-align: right; }
+.tita-presetTrust { border: 1px solid var(--tita-line); border-radius: 5px; background: var(--tita-surface-muted); padding: 1px 5px; color: var(--tita-ink-muted); font-size: 9.5px; font-weight: 500; }
+.tita-presetMissing { color: var(--tita-warning); }
+.tita-presetNote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 11px 0 0; color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.65; }
+.tita-presetNote code { border-radius: 4px; background: var(--tita-surface-muted); padding: 1px 4px; color: var(--tita-ink); font-size: 10px; overflow-wrap: anywhere; }
+.tita-presetNoteBad { color: var(--tita-warning); }
+.tita-presetNote > svg { flex: 0 0 auto; align-self: center; color: var(--tita-success); }
+.tita-promptPreview { margin-top: 13px; border: 1px solid var(--tita-line); border-radius: 10px; overflow: hidden; }
+.tita-promptPreviewHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--tita-line); background: var(--tita-surface-muted); padding: 7px 10px; }
+.tita-promptPreviewHead > span { color: var(--tita-ink); font-size: 11px; font-weight: 650; }
+.tita-promptPreviewHead small { color: var(--tita-ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
+/* 正文很长，所以给它自己的滚动区而不是把抽屉撑到几屏高；等宽 + 保留换行让
+   提示词里的编号与缩进读得出来。 */
+.tita-promptBody { max-height: 260px; margin: 0; overflow: auto; background: var(--tita-surface); padding: 10px 11px; color: var(--tita-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
+.tita-promptBody:focus-visible { outline: 2px solid var(--tita-primary); outline-offset: -2px; }
+.tita-presetActions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
+/* 路径本身是**可选中复制**的兜底：宿主拒绝打开这个路径时（`verifyDesktopPath` 不过），
+   用户仍然要能把它拿走自己开。所以它不截断成不可读的省略号 —— 一行放不下就换行，
+   并把完整值放在 `title` 里。 */
+.tita-presetPath { flex: 1 1 220px; min-width: 0; border: 1px solid var(--tita-line); border-radius: 6px; background: var(--tita-surface-muted); padding: 4px 7px; color: var(--tita-ink-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
+/* `small` 默认是行内盒，直接当段落用会让 `margin-top` 不生效 —— 而它确实是一个段落。 */
+.tita-presetHint { display: block; margin-top: 7px; }
+.tita-presetHint code { border-radius: 4px; background: var(--tita-surface-muted); padding: 1px 4px; color: var(--tita-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; overflow-wrap: anywhere; }
+
+/* --------------------------------------------------- 页面内目录浏览（兜底） */
+.tita-browseDialog { display: flex; width: min(680px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 64px)); flex-direction: column; gap: 10px; }
+.tita-browseCrumbs { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 1px; }
+.tita-browseCrumbWrap { display: inline-flex; align-items: center; gap: 1px; color: var(--tita-ink-faint); }
+.tita-browseCrumb { max-width: 160px; overflow: hidden; border: 0; border-radius: 6px; background: transparent; padding: 3px 6px; color: var(--tita-ink-muted); font: inherit; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
+.tita-browseCrumb:hover { background: var(--tita-surface-muted); color: var(--tita-ink); }
+.tita-browseCrumbOn { color: var(--tita-ink); font-weight: 650; }
+.tita-browsePath { overflow: hidden; border: 1px solid var(--tita-line); border-radius: 7px; background: var(--tita-surface-muted); padding: 6px 9px; color: var(--tita-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.tita-browseError { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tita-warning); font-size: 11px; }
+.tita-browseList { flex: 1 1 auto; min-height: 180px; margin: 0; overflow-y: auto; border: 1px solid var(--tita-line); border-radius: 9px; padding: 4px; list-style: none; }
+.tita-browseRow { display: flex; width: 100%; align-items: center; gap: 7px; border: 0; border-radius: 7px; background: transparent; padding: 6px 8px; color: var(--tita-ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
+.tita-browseRow:hover { background: var(--tita-surface-muted); }
+.tita-browseRow > svg { flex: 0 0 auto; color: var(--tita-ink-faint); }
+.tita-browseEmpty { padding: 16px 10px; color: var(--tita-ink-faint); font-size: 11.5px; text-align: center; }
+.tita-browseNote { margin: 0; color: var(--tita-ink-faint); font-size: 10.5px; }
+.tita-browseCreate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.tita-browseCreate input { flex: 1 1 160px; min-width: 0; }
+.tita-browseHidden { display: inline-flex; align-items: center; gap: 5px; color: var(--tita-ink-muted); font-size: 11px; }
+
+/* Visually hidden, still focusable: the non-pointer entry point (PRD §12.3). */
+.tita-srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+.tita-srOnly:focus-within { position: static; width: auto; height: auto; clip: auto; clip-path: none; white-space: normal; }
+.tita-srOnly ul { margin: 0; padding: 0; list-style: none; }
+
+/* ------------------------------- responsive: react to the host pane width */
+@container (max-width: 1080px) {
+  .tita-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .tita-railQuote { grid-column: 1 / -1; }
+  .tita-statsRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .tita-evalGrid, .tita-memoryGrid { grid-template-columns: minmax(0, 1fr); }
+  .tita-skillGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .tita-memoryCardWide { grid-column: auto; }
+}
+
+@container (max-width: 700px) {
+  .tita-rail { grid-template-columns: minmax(0, 1fr); }
+  .tita-statsRow { grid-template-columns: minmax(0, 1fr); }
+  .tita-skillGrid { grid-template-columns: minmax(0, 1fr); }
+  .tita-skillHero { align-items: flex-start; flex-wrap: wrap; }
+  .tita-skillHero > .tita-uiButton { width: 100%; }
+  .tita-settingFieldWide { grid-column: auto; }
+  .tita-inputRow { align-items: stretch; flex-direction: column; }
+  .tita-inputRow .tita-uiButton { width: 100%; }
+}
+
+/* Vertical flow once a single lane can no longer hold two nodes per row. */
+@container (max-width: 560px) {
+  .tita-laneTrack, .tita-stageTrack { flex-direction: column; align-items: stretch; }
+  .tita-flowNode, .tita-flowFork { width: 100%; max-width: none; flex: 0 0 auto; }
+  .tita-flowArrow { align-self: center; transform: rotate(90deg); }
+  .tita-archBridge { padding: 0; }
+}
+
+/* ------------------------------------------- knowledge bases (issue 0019) */
+/* 知识库 Tab：多知识库 + 文件类型 + 文件列表 + 文档详情与版本。 */
+.tita-kbLayout { display: grid; gap: 12px; min-width: 0; }
+.tita-kbToolbar { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
+.tita-kbToolbar > :first-child { flex: 0 1 auto; min-width: 0; }
+/* 动作跟着选择器往左排（0035）：这一行只有一个主语（当前知识库）和它的动作。把动作推到
+   最右边，中间会留一段**没有意义的空白**，而在窄栏里那段空白本来能放下第三个按钮。
+   0035 也把计数撤出了这一行 —— 它们没有丢，步骤轨每一步第二行写的就是同一批数字。 */
+.tita-kbToolbarActions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
+/* 三个动作同形（图标 + 文字的 outline 按钮）。内核控制台是一个**链接**，靠 `Button asChild`
+   拿到与按钮同一套外观，所以这里只补锚点自己带进来的下划线。 */
+.tita-kbToolbarActions a.tita-uiButton { text-decoration: none; }
+
+.tita-kbNotice { display: flex; align-items: center; gap: 8px; margin: 0; border: 1px solid var(--tita-tone-green-line); border-radius: 9px; background: var(--tita-tone-green-tint); color: var(--tita-success); padding: 8px 10px; font-size: 11.5px; }
+.tita-kbNotice > span { flex: 1; min-width: 0; }
+.tita-kbNoticeError { border-color: var(--ddk-danger-line); background: var(--ddk-danger-tint); color: var(--tita-danger); }
+.tita-kbNoticeClose { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: inherit; padding: 3px; cursor: pointer; opacity: .7; }
+.tita-kbNoticeClose:hover { opacity: 1; }
+
+.tita-kbRoot { overflow: hidden; max-width: 100%; color: var(--tita-ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+
+.tita-kbCard { min-width: 0; padding: 15px; }
+.tita-kbCardHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
+.tita-kbCardActions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
+.tita-kbEyebrow { display: inline-flex; align-items: center; gap: 5px; color: var(--tita-ink-faint); font-size: 9.5px; font-weight: 700; letter-spacing: .09em; }
+.tita-kbCardHead h3 { margin: 3px 0 0; color: var(--tita-ink); font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
+.tita-kbCount { flex: 0 0 auto; color: var(--tita-ink-faint); font-size: 11px; }
+.tita-kbHint { margin: 8px 0 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.65; }
+.tita-kbHint b { color: var(--tita-ink-muted); }
+.tita-kbEmpty { margin: 12px 0 0; border: 1px dashed var(--tita-line); border-radius: 9px; color: var(--tita-ink-faint); padding: 12px; font-size: 11.5px; text-align: center; }
+.tita-kbSubHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 6px; }
+.tita-kbSubHead h4 { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--tita-ink); font-size: 12px; font-weight: 700; }
+.tita-kbSubHead > span { color: var(--tita-ink-faint); font-size: 10.5px; }
+
+
+/* 来源业务分类注册表（issue 0013）：与「文件类型」同构，额外带一段内置只读判定规则。 */
+.tita-kbSourceList { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 6px; }
+.tita-kbSourceRow { display: grid; grid-template-columns: minmax(0, 1fr) 66px auto auto auto; align-items: center; gap: 8px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); padding: 6px 8px; }
+.tita-kbSourceName { display: flex; min-width: 0; align-items: baseline; gap: 6px; overflow: hidden; }
+.tita-kbSourceLabel { overflow: hidden; color: var(--tita-ink); font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
+.tita-kbSourceId { flex: 0 0 auto; color: var(--tita-ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
+.tita-kbSourceTag { flex: 0 0 auto; border-radius: 4px; background: var(--tita-primary-soft); color: var(--tita-primary); padding: 1px 5px; font-size: 9.5px; }
+.tita-kbSourceTagLock { background: var(--tita-surface-muted); color: var(--tita-ink-faint); }
+.tita-kbPrompt { margin-top: 10px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface-muted); padding: 10px 12px; }
+.tita-kbPrompt > summary { cursor: pointer; color: var(--tita-ink-muted); font-size: 11.5px; font-weight: 650; }
+.tita-kbPromptNote { margin: 8px 0 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.7; }
+.tita-kbPromptSteps { margin: 8px 0 0; padding-left: 18px; color: var(--tita-ink); font-size: 11px; line-height: 1.85; }
+.tita-kbPromptSteps code { border-radius: 4px; background: var(--tita-surface-muted); padding: 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
+.tita-kbPromptOff { color: var(--tita-danger); text-decoration: line-through; }
+.tita-kbTextarea { width: 100%; min-height: 58px; resize: vertical; border: 1px solid var(--tita-line); border-radius: 8px; background: var(--tita-surface); color: var(--tita-ink); padding: 7px 9px; font-family: inherit; font-size: 11.5px; line-height: 1.6; }
+.tita-kbTextarea:focus { border-color: var(--tita-primary-line); outline: 2px solid var(--tita-focus-ring); }
+.tita-kbSourcePick { display: inline-flex; align-items: center; gap: 6px; color: var(--tita-ink-muted); font-size: 11px; }
+.tita-kbSourcePick select { min-width: 150px; }
+.tita-kbSourceAdd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
+.tita-kbSourceAdd .tita-kbHint { margin: 0; }
+
+/* 筛选行：搜索 · 来源分类 · 文件类型 · 刷新 · 添加文件。
+   0027 之前这里是两行（上传行 + 筛选行），而「来源分类」在两个地方各有一个控件；
+   现在只有一行、一个控件 —— 它同时决定筛什么和按什么收录。 */
+.tita-kbFilterRow { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
+/* 搜索框给上限：它会 grow，不设上限就会把两个下拉和刷新挤到第二行去。
+   两个下拉自己的宽度（`w-auto max-w-[220px]`）在调用处给 —— 盒子归共享组件，
+   这里不再用元素选择器改 `select` 的长相。 */
+.tita-kbFilterRow .tita-kbFilterSearch { flex: 1 1 180px; min-width: 0; max-width: 340px; }
+/* 筛选行下面那行说明：它必须跟着筛选结果走，所以不能写成卡片底部的静态提示。 */
+.tita-kbFilterHint { margin: 8px 0 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.6; }
+.tita-kbFilterHint b { color: var(--tita-ink-muted); font-weight: 650; }
+
+.tita-kbDocList { display: grid; margin: 10px 0 0; padding: 0; list-style: none; gap: 4px; }
+.tita-kbDocRow { display: flex; min-width: 0; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 9px; padding: 2px 4px 2px 0; }
+.tita-kbDocRow:hover { border-color: var(--tita-line); background: var(--tita-surface-muted); }
+.tita-kbDocMain { display: grid; flex: 1 1 auto; min-width: 0; gap: 3px; border: 0; background: transparent; padding: 7px 8px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.tita-kbDocTitle { display: flex; min-width: 0; align-items: center; gap: 6px; overflow: hidden; color: var(--tita-ink); font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
+.tita-kbDocMeta { overflow: hidden; color: var(--tita-ink-faint); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
+.tita-kbDocActions { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
+
+.tita-kbForm { display: grid; gap: 10px; }
+.tita-kbField { display: grid; gap: 5px; }
+.tita-kbKv { display: grid; margin: 0; gap: 4px; }
+.tita-kbKv > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
+.tita-kbKv dt { color: var(--tita-ink-faint); font-size: 11px; }
+.tita-kbKv dd { margin: 0; overflow-wrap: anywhere; color: var(--tita-ink); font-size: 11.5px; }
+.tita-kbCode { border-radius: 4px; background: var(--tita-surface-muted); padding: 1px 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; overflow-wrap: anywhere; }
+.tita-kbAssets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; }
+.tita-kbAsset { margin: 0; border: 1px solid var(--tita-line); border-radius: 8px; padding: 4px; }
+.tita-kbAsset img { display: block; width: 100%; height: 62px; object-fit: contain; }
+.tita-kbAsset figcaption { margin-top: 3px; color: var(--tita-ink-faint); font-size: 10px; text-align: center; }
+/* 原文与卡片正文的阅读态容器（0030）：内容由平台 Markdown 原子渲染，所以这里只
+   交代「它在一个窄栏里也要能读」——行高、可断行、首尾外边距归零（上下都有自己的
+   小节标题，留着那段空白只会让抽屉看起来像漏了一格）。内部排版交给渲染器，不在
+   插件里另立一套 Markdown 样式，否则同一个原子在两处会长得不一样。 */
+.tita-kbMarkdown { margin-top: 2px; color: var(--tita-ink); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
+.tita-kbMarkdown > :first-child { margin-top: 0; }
+.tita-kbMarkdown > :last-child { margin-bottom: 0; }
+.tita-kbMarkdown img { max-width: 100%; border-radius: 6px; }
+.tita-kbPre { max-height: 320px; margin: 0; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); color: var(--tita-ink); padding: 10px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
+
+/* ------------------------------------------------------ intent (issue 0019) */
+.tita-intentHead { display: flex; align-items: center; gap: 8px; }
+.tita-intentHead > :first-child { flex: 1 1 auto; min-width: 0; }
+
+/* 意图页的两段式（issue 0023）：记录（只读审计流）与配置（预置分类）分成两个 tab，
+   不上下堆叠——配置项不该把记录挤到折叠以下。 */
+.tita-intentSections { display: grid; gap: 12px; }
+.tita-intentSectionBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
+.tita-intentSectionBar .tita-intentHead { flex: 0 1 auto; }
+
+/* 「意图的逻辑」tab：说明性内容，读的是排版而不是控件。 */
+.tita-intentDocList { display: grid; margin: 3px 0 0; padding-left: 18px; gap: 5px; color: var(--tita-ink); font-size: 11.5px; line-height: 1.75; }
+.tita-intentDocList b { color: var(--tita-ink); }
+.tita-intentDocList code, .tita-kbHint code { border-radius: 4px; background: var(--tita-surface-muted); padding: 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
+.tita-intentDocGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 10px; }
+.tita-intentDocGrid > div { display: grid; gap: 3px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); padding: 9px 11px; }
+.tita-intentDocGrid strong { color: var(--tita-ink); font-size: 11.5px; }
+.tita-intentDocGrid span { color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.6; }
+.tita-intentDocTableWrap { overflow-x: auto; margin-top: 8px; }
+.tita-intentDocTable { width: 100%; border-collapse: collapse; font-size: 11px; }
+.tita-intentDocTable th { border-bottom: 1px solid var(--tita-line); color: var(--tita-ink-muted); padding: 6px 8px; font-weight: 700; text-align: left; white-space: nowrap; }
+.tita-intentDocTable td { border-bottom: 1px solid var(--tita-surface-muted); color: var(--tita-ink); padding: 6px 8px; line-height: 1.65; vertical-align: top; }
+.tita-intentDocTable td:first-child code { border-radius: 4px; background: var(--tita-surface-muted); padding: 1px 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
+.tita-intentDocTable td:nth-child(2) { color: var(--tita-tone-green); text-align: center; }
+.tita-intentPaperList { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 10px; }
+.tita-intentPaperList > li { border: 1px solid var(--tita-line); border-radius: 8px; background: var(--tita-surface); padding: 9px 11px; }
+.tita-intentPaperList a { color: var(--tita-primary); font-size: 12px; font-weight: 640; text-decoration: none; }
+.tita-intentPaperList a:hover { text-decoration: underline; }
+.tita-intentPaperMeta { display: block; margin-top: 2px; color: var(--tita-ink-faint); font-size: 10px; }
+.tita-intentPaperList p { margin: 6px 0 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.75; }
+.tita-intentPaperNote { color: var(--tita-ink-faint) !important; font-size: 10.5px !important; }
+.tita-intentMetric { display: grid; min-width: 0; gap: 2px; padding: 12px 13px; }
+.tita-intentMetric small { color: var(--tita-ink-faint); font-size: 10.5px; }
+.tita-intentMetric strong { overflow: hidden; color: var(--tita-ink); font-size: 17px; font-weight: 750; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
+.tita-intentMetric em { overflow: hidden; color: var(--tita-ink-faint); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
+.tita-intentTaskList { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 6px; }
+.tita-intentTaskList li { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); padding: 7px 9px; }
+.tita-intentTaskId { display: inline-flex; align-items: center; gap: 5px; color: var(--tita-ink-muted); font-size: 11.5px; font-weight: 600; }
+.tita-intentList { display: grid; margin: 10px 0 0; padding: 0; list-style: none; gap: 8px; }
+.tita-intentRow { display: grid; min-width: 0; gap: 5px; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); padding: 9px 10px; }
+.tita-intentRowHead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.tita-intentRelation { color: var(--tita-ink-muted); font-size: 10.5px; }
+.tita-intentTime { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--tita-ink-faint); font-size: 10px; }
+.tita-intentInput { margin: 0; color: var(--tita-ink-muted); font-size: 11.5px; line-height: 1.6; overflow-wrap: anywhere; }
+.tita-intentRowFoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--tita-ink-faint); font-size: 10px; }
+.tita-intentRegistry { display: grid; gap: 12px; margin-top: 10px; }
+.tita-intentRegistry h4 { margin: 0 0 6px; color: var(--tita-ink-muted); font-size: 11px; font-weight: 700; }
+.tita-intentChips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
+.tita-intentPredicate { background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
+
+/* Wiki 抽取流程（issue 0024）：竖向四段，状态徽标按代码现状标注。 */
+.tita-wikiFlow { display: grid; gap: 0; margin-top: 12px; }
+.tita-wikiFlowSource, .tita-wikiFlowSink { display: flex; align-items: center; gap: 9px; border: 1px dashed var(--tita-line); border-radius: 10px; background: var(--tita-surface-muted); padding: 9px 11px; color: var(--tita-ink-muted); }
+.tita-wikiFlowSink { border-style: solid; border-color: var(--tita-tone-green-line); background: var(--tita-tone-green-tint); color: var(--tita-success); }
+.tita-wikiFlowSource strong, .tita-wikiFlowSink strong { display: block; color: var(--tita-ink); font-size: 11.5px; }
+.tita-wikiFlowSource small, .tita-wikiFlowSink small { display: block; color: var(--tita-ink-faint); font-size: 10px; }
+.tita-wikiFlowStageWrap { display: grid; }
+.tita-wikiFlowArrow { display: flex; align-items: center; justify-content: center; color: var(--tita-ink-faint); padding: 3px 0; }
+/* 阶段卡：整圈发丝线，不用左侧粗色条。阶段身份由卡片自己的状态点与标题承担；
+   左色条既不比一圈细边多给信息，又是 AI 生成界面的典型指纹。 */
+.tita-wikiFlowStage { border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); padding: 10px 12px; }
+.tita-wikiFlowStageHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
+.tita-wikiFlowStageHead strong { color: var(--tita-ink); font-size: 12px; font-weight: 700; }
+.tita-wikiFlowPass { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: var(--tita-surface-muted); padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
+.tita-wikiFlowLlm { margin-left: auto; color: var(--tita-ink-faint); font-size: 10px; }
+.tita-wikiFlowIo { margin: 6px 0 0; color: var(--tita-ink-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
+.tita-wikiFlowBody { display: grid; margin: 6px 0 0; padding-left: 16px; gap: 3px; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.7; }
+.tita-wikiFlowBody code { border-radius: 4px; background: var(--tita-surface-muted); padding: 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
+.tita-wikiFlowNote { margin: 6px 0 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.6; }
+.tita-wikiFlowBlue { border-left-color: var(--tita-primary); }
+.tita-wikiFlowBlue .tita-wikiFlowPass { background: var(--tita-primary-soft); color: var(--tita-primary); }
+.tita-wikiFlowViolet { border-left-color: var(--tita-tone-violet); }
+.tita-wikiFlowViolet .tita-wikiFlowPass { background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
+.tita-wikiFlowGreen { border-left-color: var(--tita-success); }
+.tita-wikiFlowGreen .tita-wikiFlowPass { background: var(--tita-tone-green-tint); color: var(--tita-success); }
+.tita-wikiFlowAmber { border-left-color: var(--tita-warning); }
+.tita-wikiFlowAmber .tita-wikiFlowPass { background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); }
+.tita-wikiFlowRules { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 7px; }
+.tita-wikiFlowRules > li { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); padding: 8px 10px; }
+.tita-wikiFlowRules > li > span:last-child { display: grid; gap: 2px; }
+.tita-wikiFlowRules strong { color: var(--tita-ink); font-size: 11.5px; }
+.tita-wikiFlowRules small { color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.65; }
+.tita-wikiFlowRuleOrder { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; border-radius: 999px; background: var(--tita-primary-soft); color: var(--tita-primary); padding: 2px 7px; font-size: 10px; font-weight: 700; }
+.tita-wikiFlowDiff { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; border: 1px dashed var(--tita-line); border-radius: 9px; background: var(--tita-surface); color: var(--tita-ink-muted); padding: 9px 11px; font-size: 10.5px; line-height: 1.7; }
+.tita-wikiFlowDiff b { color: var(--tita-ink-muted); }
+
+/* Wiki 类型注册表（issue 0024）：这张界面就是"SourceRaw → Wiki"的约束入口。 */
+.tita-wikiTypeBar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
+.tita-wikiTypeMode { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
+.tita-wikiTypeMode > span { display: grid; gap: 1px; }
+.tita-wikiTypeMode strong { color: var(--tita-ink); font-size: 11.5px; }
+.tita-wikiTypeMode small { color: var(--tita-ink-faint); font-size: 10px; }
+.tita-wikiTypeIssueCount { border: 1px solid var(--tita-tone-amber-line); border-radius: 999px; background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); padding: 2px 9px; font-size: 10.5px; }
+.tita-wikiTypeList { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 6px; }
+/*
+ * 一行一个类型。**窄栏优先**：这里是 380–420px 的宿主侧边栏，不是宽屏表格。
+ *
+ * 原来这一行是 6 列 grid，首列 `minmax(200px, auto)`、第三列固定 56px、后面还有
+ * 三个 auto 列（开关 + 两个图标按钮）：光最小宽度就是
+ * 200 + 0 + 56 + 3×28 + 5×8(gap) + 18(padding) ≈ 398px，正好卡满整个面板 ——
+ * 于是中间那列说明文字被压成 0 宽，描述和「必填小节」直接看不见，整块看起来就是
+ * 「间距异常」。
+ *
+ * 现在改成 flex：第 1 行是身份 + 操作，说明用 `order: 1` 换到第 2 行占满整宽。
+ * 视觉顺序变成「名字 → 操作 → 说明」，而 DOM 顺序仍是「名字 → 说明 → 操作」，
+ * 读屏照旧先听到描述。最长的文本拿到整宽才读得下去，第一行也不再有 200px 硬下限。
+ */
+.tita-wikiTypeRow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); padding: 8px 10px; }
+.tita-wikiTypeName { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 6px; }
+.tita-wikiTypeLabel { color: var(--tita-ink); font-size: 12px; font-weight: 620; }
+.tita-wikiTypeTag { flex: 0 0 auto; border-radius: 4px; background: var(--tita-primary-soft); color: var(--tita-primary); padding: 1px 5px; font-size: 9.5px; }
+/* 说明排到最后一行、占满整宽：它是最长的文本，只有整宽才读得下去。 */
+.tita-wikiTypeMeta { order: 1; flex: 1 1 100%; min-width: 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.6; }
+.tita-wikiTypeIssues { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 5px; }
+.tita-wikiTypeIssues li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.6; }
+.tita-wikiTypeIssues code { border-radius: 4px; background: var(--tita-surface-muted); padding: 1px 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
+.tita-wikiTypeIssueLevel { border-radius: 4px; background: var(--tita-surface-muted); color: var(--tita-ink-muted); padding: 0 5px; font-size: 9.5px; }
+
+/* 意图分类注册表（issue 0023）：预置项是模型的匹配依据，所以定义与"例如"要露在行上。 */
+.tita-intentCategoryList { display: grid; margin: 10px 0 0; padding: 0; list-style: none; gap: 6px; }
+.tita-intentCategoryRow { display: grid; grid-template-columns: minmax(210px, auto) minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); padding: 7px 9px; }
+.tita-intentCategoryName { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 6px; }
+.tita-intentCategoryLabel { color: var(--tita-ink); font-size: 12px; font-weight: 620; }
+.tita-intentCategoryExample { overflow: hidden; min-width: 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
+
+/* --------------------------------------------------- recall routes (3-way) */
+.tita-routeRow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
+.tita-routeChip { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--tita-line); border-radius: 999px; background: var(--tita-surface); color: var(--tita-ink-faint); padding: 3px 9px; font-size: 10.5px; }
+.tita-routeChipOn { border-style: solid; border-color: var(--tita-tone-green-line); background: var(--tita-tone-green-tint); color: var(--tita-tone-green); font-weight: 620; }
+/* 降级不是「没跑」，也不是「跑了」：它要能被看见，并且带上原因（芯片的 title）。 */
+.tita-routeChipOff { border-style: solid; border-color: var(--tita-tone-amber-line); background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); font-weight: 620; }
+.tita-routeBackend { margin-left: auto; color: var(--tita-ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
+
+
+/* 节点指标：顶部链路计数条下沉到节点后的落点（0022）。数字跟着它描述的那个节点走。 */
+.tita-nodeMetrics { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
+.tita-nodeMetric { display: inline-flex; min-width: 0; align-items: baseline; gap: 4px; border: 1px solid var(--tita-line); border-radius: 6px; background: var(--tita-surface); padding: 1px 6px; }
+.tita-nodeMetric small { color: var(--tita-ink-faint); font-size: 9.5px; }
+.tita-nodeMetric b { color: var(--tita-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.tita-flowNodeBadges + .tita-nodeMetrics { margin-top: 1px; }
+
+/* 召回测试：作用范围 + 路线/参数 + 命中列表。 */
+.tita-recallTop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
+.tita-recallScope { display: inline-flex; align-items: center; gap: 6px; color: var(--tita-ink-muted); font-size: 11px; }
+.tita-recallScope b { color: var(--tita-ink); font-weight: 650; }
+.tita-recallControls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
+.tita-recallControls > label, .tita-recallControls > .tita-recallControl { display: inline-flex; align-items: center; gap: 6px; color: var(--tita-ink-muted); font-size: 11px; white-space: nowrap; }
+/* 盒子归共享组件：Input 与 SelectMenu 都按 34px 的字段尺度渲染，所以这里只约束数字框的
+   宽度，不再各写一套边框 / 圆角 / 字号 —— 那正是「同一个控件两种长相」的来源。 */
+.tita-recallControls input { width: 68px; }
+.tita-hitList { display: grid; margin: 12px 0 0; padding: 0; list-style: none; gap: 8px; }
+.tita-hitRow { display: grid; min-width: 0; gap: 5px; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); padding: 9px 10px; }
+.tita-hitRow:hover { border-color: var(--tita-line); background: var(--tita-surface); }
+.tita-hitHead { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
+.tita-hitTitle { min-width: 0; overflow: hidden; color: var(--tita-ink); font-size: 11.5px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
+.tita-hitRoute { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; border-radius: 999px; padding: 1px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
+.tita-hitRouteFts { background: var(--tita-primary-soft); color: var(--tita-primary); }
+.tita-hitRouteVector { background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
+.tita-hitRouteGraph { background: var(--tita-tone-green-tint); color: var(--tita-tone-green); }
+.tita-hitRouteHybrid { background: var(--tita-tone-amber-tint); color: var(--tita-warning); }
+.tita-hitScore { margin-left: auto; color: var(--tita-ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
+.tita-hitSnippet { margin: 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
+.tita-hitFoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--tita-ink-faint); font-size: 10px; }
+
+/* 意图：从最近记录里归纳出的分布（act / 分类 / 低置信度）。 */
+.tita-distList { display: grid; gap: 7px; margin: 10px 0 0; }
+.tita-distRow { display: grid; grid-template-columns: minmax(56px, 96px) minmax(0, 1fr) 34px; align-items: center; gap: 8px; }
+.tita-distRow > span { overflow: hidden; color: var(--tita-ink-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.tita-distBar { height: 7px; overflow: hidden; border-radius: 999px; background: var(--tita-surface-muted); }
+.tita-distBar > i { display: block; height: 100%; border-radius: 999px; background: var(--tita-tone-violet); }
+.tita-distBarFts > i { background: var(--tita-primary); }
+.tita-distBarGraph > i { background: var(--tita-tone-green); }
+.tita-distCount { color: var(--tita-ink-faint); font-size: 10.5px; text-align: right; }
+
+/* 记忆：真实落盘计数（04_memory）与「示意」卡片分开摆，避免把占位数字读成真实数据。 */
+.tita-memoryReal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
+
+/* 知识库文档详情：该文档编译出的 wiki 卡片（对应 WeKnora 的「分块」列表）。 */
+.tita-cardList { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 6px; }
+.tita-cardRow { display: grid; min-width: 0; gap: 4px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); padding: 8px 9px; }
+.tita-cardRowHead { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
+.tita-cardRowTitle { min-width: 0; overflow: hidden; color: var(--tita-ink); font-size: 11.5px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
+.tita-cardRowText { margin: 0; color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.6; overflow-wrap: anywhere; }
+/* 0025：卡片行变成可点入口（点开看内容与版本）。按钮要抹掉浏览器默认外观，
+   同时保留 `.tita-cardRow` 的网格排版 —— 否则文字会掉到按钮默认的居中样式里。 */
+.tita-cardRowMain { display: grid; width: 100%; gap: 4px; border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.tita-cardRow:hover { border-color: var(--tita-line); background: var(--tita-surface); }
+
+/* 知识库的步骤轨：**一条流水线，不是一排并列的 tab**。
+   收录 → 编译 → 关联 → 检索 → 精排，步与步之间用箭头连起来 —— 方向本身就是信息
+   （写入侧在左、读取侧在右），而一排等宽按钮把它抹掉了。
+   窄栏下换行而不是横向滚动：藏起来的那两步等于不存在。 */
+.tita-kbSteps { display: flex; min-width: 0; flex-wrap: wrap; align-items: stretch; gap: 4px; }
+.tita-kbStepArrow { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--tita-line-strong); }
+.tita-kbStep {
+  display: grid;
+  /* `box-sizing` 显式写死：这一步的基准宽是 132px，而 padding + border 有 20px。
+     content-box 下外层变成 152px，五步就是 844px > 816px 可用宽 —— 于是第五步被挤到
+     第二行，行尾还留一个指向空处的箭头（实测就是这个问题，不是基准宽不够）。 */
+  box-sizing: border-box;
+  min-width: 0;
+  /* 132px 的基准让五步在宿主侧栏（约 810px 可用）里排成**一行**：
+     5×132 + 4 个箭头 + 间距 ≈ 744 < 810。换行会在行尾留一个指向空处的箭头，
+     而 150px 的基准就会换行。窄到排不下时才换 —— 那时名字仍然完整（两行版式）。 */
+  flex: 1 1 132px;
+  gap: 2px;
+  border: 1px solid var(--tita-line);
+  border-radius: 9px;
+  background: var(--tita-surface);
+  padding: 7px 9px;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 140ms ease, background 140ms ease;
+}
+.tita-kbStep:hover { border-color: var(--tita-line-strong); background: var(--tita-surface-muted); }
+.tita-kbStep:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 1px; }
+/* 当前步：不是「已选中」的高亮，而是「你现在站在这一段的哪一格」。
+   用左侧 3px 强调条之外的整圈描边 + 浅底来表达，避免和卡片套卡片混在一起。 */
+.tita-kbStepOn { border-color: var(--tita-primary); background: var(--tita-primary-soft); box-shadow: inset 0 0 0 1px var(--tita-primary); }
+.tita-kbStepTop { display: flex; min-width: 0; align-items: center; gap: 5px; color: var(--tita-ink); }
+.tita-kbStepTop svg { flex: 0 0 auto; color: var(--tita-ink-faint); }
+.tita-kbStepOn .tita-kbStepTop svg { color: var(--tita-primary); }
+.tita-kbStepTop b { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
+.tita-kbStepVerb { flex: 0 0 auto; border-radius: 4px; background: var(--tita-surface-muted); color: var(--tita-ink-muted); padding: 0 4px; font-size: 9.5px; font-style: normal; font-weight: 650; }
+.tita-kbStepOn .tita-kbStepVerb { background: var(--tita-primary-soft); color: var(--tita-primary); }
+/* 第二行：这一段的真实计数（醒目）+ 它做什么（次要，放不下就省略）。 */
+.tita-kbStepFacts { display: flex; min-width: 0; align-items: baseline; gap: 5px; }
+.tita-kbStepValue { flex: 0 0 auto; color: var(--tita-ink); font-size: 10px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
+/* 说明前面加一枚分隔点：`topK 10` 和 `hybrid 三路融合` 直接相邻会读成 `10hybrid`。 */
+.tita-kbStepNote { min-width: 0; overflow: hidden; color: var(--tita-ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.tita-kbStepNote::before { content: '·'; margin-right: 5px; color: var(--tita-line-strong); }
+
+/* 设置抽屉里两组设置之间留一口气：它们是两块独立的面板，不该贴在一起。 */
+.tita-settingsStack { display: grid; gap: 14px; }
+
+/* 知识图谱分栏：列的是可核对的节点 / 边清单，不在这里再画一张图。 */
+.tita-graphList { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
+.tita-graphRow { display: flex; min-width: 0; align-items: center; gap: 8px; border: 1px solid var(--tita-line); border-radius: 8px; background: var(--tita-surface); padding: 6px 9px; }
+.tita-graphTitle { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--tita-ink); font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+.tita-graphArrow { color: var(--tita-ink-faint); font-size: 11px; }
+
+/* 重排分栏：进入上下文包的 topN。序号是它的阅读顺序，所以用等宽数字列。 */
+.tita-contextList { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
+.tita-contextRow { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); padding: 9px 10px; }
+.tita-contextRank { display: inline-flex; height: 20px; align-items: center; justify-content: center; border-radius: 6px; background: var(--tita-primary-soft); color: var(--tita-primary); font-size: 10.5px; font-weight: 700; }
+.tita-contextCopy { display: grid; min-width: 0; gap: 4px; }
+.tita-contextHead { display: flex; min-width: 0; align-items: center; gap: 6px; }
+
+/* ======================================================================
+   台账世界的基线（issues/0026）
+   ----------------------------------------------------------------------
+   这一段管的是「我们没有画、但它照样在交付设计」的那些部分：选区、光标、
+   滚动条、焦点环、下划线偏移、数字的字形。它们全部来自浏览器默认值，属于任何
+   设计系统之外——也正因如此，它们是「这个界面被建造过」最便宜的证据。
+   ====================================================================== */
+
+/* 标题与正文同一个无衬线族，层级只靠字重与字号 —— 专业工具界面里没有第二种字体。
+   （0026 曾经在这里上宋体，那是把「台账」做成了「文学」。） */
+.tita-panel h1,
+.tita-panel h2,
+.tita-panel h3,
+.tita-panel h4 { font-family: var(--font-tita); font-weight: 700; letter-spacing: 0; }
+
+/* 标题里的图标：icon 直接进标题，不再在标题上方另起一个英文小标签。
+   kicker 不增加信息，只增加一层要读的东西 —— 一个中文标题上面顶一行
+   「SOURCE RAW」「INGEST SETTINGS」，读者得先跳过它才知道自己在看什么。 */
+.tita-panel h2 > svg,
+.tita-panel h3 > svg { margin-right: 6px; vertical-align: -2px; color: var(--tita-ink-faint); }
+
+/* 数字、id、版本号：等宽 + tabular。它们是**测量值**，不是"技术感"的装饰，
+   所以列与列之间的数字必须对齐。 */
+.tita-kbCode,
+.tita-panel code,
+.tita-hitScore,
+.tita-archPanelRecords dd,
+.tita-infoList strong,
+.tita-metricCopy strong,
+.tita-archPanelMetric b,
+.tita-archBarCounts { font-variant-numeric: tabular-nums; }
+.tita-panel code, .tita-kbCode { font-family: var(--font-tita-mono); }
+
+/* 选区：纸上的墨。默认的浏览器蓝会把台账的暖底打穿。 */
+.tita-panel ::selection { background: var(--tita-primary-soft); color: var(--tita-ink); }
+
+/* 光标用墨色，不用朱红——朱红在这个世界里只有一个含义（改动 / 异常 / 待实现），
+   光标不是"改动"。 */
+.tita-panel input,
+.tita-panel textarea { caret-color: var(--tita-ink); }
+
+/* 焦点环：墨色实线 + 偏移，像在纸上框出这一栏。不靠色相，也就不和朱红的语义打架。
+   0035：抽屉走 Portal，**不在 `.tita-panel` 里** —— 只写 `.tita-panel :focus-visible`
+   会让浮层退回浏览器默认的焦点环（一条不属于这套配色的蓝色 `auto` 描边），而它恰好
+   是打开预览抽屉时第一个被自动聚焦的地方（schema 待补的 `<summary>`）。所以浮层
+   显式共用同一条规则。 */
+.tita-panel :focus-visible,
+.tita-drawer :focus-visible,
+.tita-settingsDrawer :focus-visible { outline: 2px solid var(--tita-ink); outline-offset: 2px; border-radius: 4px; }
+
+/* 链接：下划线偏移与粗细也属于设计系统的一部分。 */
+.tita-panel a { text-underline-offset: 2px; text-decoration-thickness: 1px; }
+
+/* 滚动条：插件自己拥有滚动区（`.tita-content` 是唯一纵向滚动条），
+   所以它必须从调色板上色，否则整块纸底会贴着一根系统灰条。 */
+.tita-panel * { scrollbar-width: thin; scrollbar-color: var(--tita-line-strong) transparent; }
+.tita-panel ::-webkit-scrollbar { width: 10px; height: 10px; }
+.tita-panel ::-webkit-scrollbar-track { background: transparent; }
+.tita-panel ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: content-box; background-color: var(--tita-line-strong); }
+.tita-panel ::-webkit-scrollbar-thumb:hover { background-color: var(--tita-ink-faint); }
+.tita-panel ::-webkit-scrollbar-corner { background: transparent; }