@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/kb-ingest.css

@@ -1,541 +1,628 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — kb-ingest.css（摄取域：kb-pipeline / kb-chunks / kb-segment / kb-connector / kb-metadata / kb-qa）
  *
- * 共享原语在 kb.css（.kb-row/.kb-dot/.kb-fold-head/.kb-chip/.kb-num/.kb-meta/.kb-badge/.kb-empty/.kb-notice…），
+ * 共享原语在 kb.css（.icen-kb-row/.icen-kb-dot/.icen-kb-fold-head/.icen-kb-chip/.icen-kb-num/.icen-kb-meta/.icen-kb-badge/.icen-kb-empty/.icen-kb-notice…），
  * 本文件只做本域专属结构。DOM 契约见 docs/spec/kb-family.md §5.5–5.10 与各 behavior 头注释。
  *
  * 域内纪律（spec §2）：
  *   - 摄取域＝中性行 + 状态色只给状态点与徽标（连线/边框一律层级色）
- *   - 数字 .kb-num；元信息 .kb-meta；材料 bg → bg-soft 两档；圆角 --radius-md（容器）/ --radius-sm（行内）
- *   - 动效 ≤240ms ease-out；运行脉冲交给 kb.css .kb-dot.is-live；reduced-motion 全退化为瞬时
- *   - 域自持控件基元：.kb-btn（钮）/ .kb-input（输入）/ .kb-seg（mini segmented），不依赖库内其他 css
- *   - 只消费 --token-* / --radius-* / --font-mono，附缺省回退，可独立安装
+ *   - 数字 .icen-kb-num；元信息 .icen-kb-meta；材料 bg → bg-soft 两档；圆角 --icen-radius-md（容器）/ --icen-radius-sm（行内）
+ *   - 动效 ≤240ms ease-out；运行脉冲交给 kb.css .icen-kb-dot.is-live；reduced-motion 全退化为瞬时
+ *   - 域控件布局（输入视觉复用基础组件）：.icen-kb-btn（钮）/ .icen-kb-input（输入）/ .icen-kb-seg（mini segmented），输入原语随 tokens.css 提供
+ *   - 只消费 --icen-token-* / --icen-radius-* / --icen-font-mono，附缺省回退，可独立安装
  */
 
-/* ══════════════ 域自持控件基元（.kb-btn / .kb-input / .kb-seg） ══════════════ */
+/* ══════════════ 域控件布局（输入视觉复用基础组件）（.icen-kb-btn / .icen-kb-input / .icen-kb-seg） ══════════════ */
 
-.kb-btn {
+.icen-kb-btn {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  padding: 3px 10px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
-  background: var(--token-bg-soft);
-  color: var(--token-text-muted);
+  justify-content: center;
+  gap: 6px;
+  min-block-size: var(--icen-density-item-height);
+  padding-block: 3px;
+  padding-inline: var(--icen-control-padding-inline);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-bg-soft);
+  color: var(--icen-token-text-muted);
   font: inherit;
-  font-size: 12px;
-  line-height: 1.5;
+  font-size: var(--icen-font-size-control);
+  font-weight: var(--icen-font-weight-control);
+  line-height: 1.35;
   white-space: nowrap;
   cursor: pointer;
   transition:
-    color 0.16s ease-out,
-    border-color 0.16s ease-out,
-    background-color 0.16s ease-out;
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.icen-kb-btn:hover {
+  color: var(--icen-token-text);
+  border-color: var(--icen-token-line);
+  background: var(--icen-token-fill-hover);
 }
-.kb-btn:hover {
-  color: var(--token-text);
-  border-color: var(--token-line);
+.icen-kb-btn:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-btn:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: 1px;
+.icen-kb-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.kb-btn:disabled,
-.kb-btn[aria-disabled='true'] {
-  opacity: 0.5;
+.icen-kb-btn:disabled,
+.icen-kb-btn[aria-disabled='true'] {
+  opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
 }
-.kb-btn svg {
-  width: 13px;
-  height: 13px;
+/* 主行动（新增/定义）：与 kb-search 运行钮、kb-ops 提交钮同一 accent-strong 口径 */
+[data-icen-kb-chunk-add],
+[data-icen-kb-metadata-define],
+[data-icen-kb-qa-add] {
+  color: var(--icen-token-on-accent);
+  background: var(--icen-token-accent-strong);
+  border-color: var(--icen-token-accent-strong);
+  font-weight: 600;
+}
+[data-icen-kb-chunk-add]:hover,
+[data-icen-kb-metadata-define]:hover,
+[data-icen-kb-qa-add]:hover {
+  color: var(--icen-token-on-accent);
+  background: color-mix(in srgb, var(--icen-token-accent-strong) 92%, var(--icen-token-text));
+  border-color: color-mix(in srgb, var(--icen-token-accent-strong) 92%, var(--icen-token-text));
+}
+[data-icen-kb-chunk-add]:active,
+[data-icen-kb-metadata-define]:active,
+[data-icen-kb-qa-add]:active {
+  background: color-mix(in srgb, var(--icen-token-accent-strong) 84%, var(--icen-token-text));
+}
+/* 危险行动（删除/移除）：线框 danger，不抢主行动的 accent */
+[data-icen-kb-chunk-remove],
+[data-icen-kb-metadata-remove],
+[data-icen-kb-qa-remove] {
+  color: var(--icen-token-error);
+  border-color: color-mix(in srgb, var(--icen-token-error) 45%, transparent);
+  background: transparent;
+}
+[data-icen-kb-chunk-remove]:hover,
+[data-icen-kb-metadata-remove]:hover,
+[data-icen-kb-qa-remove]:hover {
+  color: var(--icen-token-error);
+  border-color: var(--icen-token-error);
+  background: var(--icen-token-error-muted);
+}
+[data-icen-kb-chunk-remove]:active,
+[data-icen-kb-metadata-remove]:active,
+[data-icen-kb-qa-remove]:active {
+  background: color-mix(in srgb, var(--icen-token-error) 18%, transparent);
+}
+.icen-kb-btn svg {
+  width: 14px;
+  height: 14px;
   flex: 0 0 auto;
 }
 
-.kb-input {
-  box-sizing: border-box;
-  min-width: 0;
-  padding: 3px 8px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
-  background: var(--token-bg);
-  color: var(--token-text);
-  font: inherit;
-  font-size: 12.5px;
-  line-height: 1.5;
-  transition: border-color 0.16s ease-out;
-}
-.kb-input::placeholder {
-  color: var(--token-text-faint);
-}
-.kb-input:focus {
-  outline: none;
-  border-color: var(--token-accent);
+/* 输入表面与几何沿用 tokens.css 的共享输入配方（高度 28 / 圆角 6 / 内距 8）。 */
+.icen-kb-input[aria-invalid='true'] {
+  border-color: var(--icen-token-error);
 }
-.kb-input[aria-invalid='true'] {
-  border-color: var(--token-danger, var(--token-error));
-}
-.kb-input--mono {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: 12px;
+.icen-kb-input--mono {
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-font-size-caption);
 }
 
-.kb-seg {
+.icen-kb-seg {
   display: inline-flex;
   gap: 2px;
   padding: 2px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
-  background: var(--token-bg-soft);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-bg-soft);
 }
-.kb-seg-item {
-  border: none;
+.icen-kb-seg-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 22px;
+  border: 1px solid transparent;
   background: none;
-  padding: 2px 10px;
-  border-radius: calc(var(--radius-sm, 6px) - 2px);
+  padding-block: 0;
+  padding-inline: 9px;
+  border-radius: calc(var(--icen-radius-sm) - 2px);
   font: inherit;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--token-text-muted);
+  font-size: var(--icen-font-size-caption);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--icen-token-text-muted);
   cursor: pointer;
   transition:
-    color 0.16s ease-out,
-    background-color 0.16s ease-out;
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
 }
-.kb-seg-item:hover {
-  color: var(--token-text);
+.icen-kb-seg-item:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-hover);
 }
-.kb-seg-item.is-active {
-  background: var(--token-bg);
-  color: var(--token-text);
-  box-shadow: 0 0 0 1px var(--token-line-soft);
+.icen-kb-seg-item:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-seg-item:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
+.icen-kb-seg-item.is-active {
+  background: var(--icen-token-surface);
+  color: var(--icen-token-text);
+  box-shadow: 0 0 0 1px var(--icen-token-line-soft);
 }
-.kb-seg-item:disabled {
-  opacity: 0.45;
+.icen-kb-seg-item:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.icen-kb-seg-item:disabled {
+  opacity: var(--icen-disabled-opacity);
   cursor: not-allowed;
 }
 
 /* ══════════════ kb-pipeline · 解析管线时间线（§5.5） ══════════════ */
 
-.kb-pipeline {
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md, 10px);
-  background: var(--token-bg-soft);
-  padding: 6px 8px;
+.icen-kb-pipeline {
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-bg-soft);
+  padding: 8px;
   min-width: 0;
 }
-.kb-pipeline-list {
+.icen-kb-pipeline-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-width: 0;
 }
 
-.kb-pipeline-head {
+.icen-kb-pipeline-head {
   display: flex;
   align-items: center;
   gap: 6px;
   min-width: 0;
 }
-.kb-pipeline-head > .kb-pipeline-toggle {
+.icen-kb-pipeline-head > .icen-kb-pipeline-toggle {
   flex: 1 1 auto;
   min-width: 0;
 }
-.kb-pipeline-head > .kb-pipeline-rerun {
+.icen-kb-pipeline-head > .icen-kb-pipeline-rerun {
   flex: 0 0 auto;
 }
 
-/* 头部状态徽章：状态色只落在徽章（点由 .kb-dot 承担） */
-.kb-pipeline-state {
+/* 头部状态徽章：状态色只落在徽章（点由 .icen-kb-dot 承担） */
+.icen-kb-pipeline-state {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: 6px;
   flex: 0 0 auto;
-  font-size: 11.5px;
-  color: var(--token-text-faint);
-}
-.kb-pipeline-state.is-running .kb-pipeline-state-label { color: var(--token-accent); }
-.kb-pipeline-state.is-done .kb-pipeline-state-label { color: var(--token-success); }
-.kb-pipeline-state.is-fail .kb-pipeline-state-label { color: var(--token-danger, var(--token-error)); }
-.kb-pipeline-state.is-cancel .kb-pipeline-state-label { color: var(--token-text-muted); }
+  font-size: var(--icen-density-font-size-xs);
+  letter-spacing: 0.3px;
+  color: var(--icen-token-text-faint);
+}
+.icen-kb-pipeline-state.is-running .icen-kb-pipeline-state-label { color: var(--icen-token-accent-text); }
+.icen-kb-pipeline-state.is-done .icen-kb-pipeline-state-label { color: var(--icen-token-success); }
+.icen-kb-pipeline-state.is-fail .icen-kb-pipeline-state-label { color: var(--icen-token-error); }
+.icen-kb-pipeline-state.is-cancel .icen-kb-pipeline-state-label { color: var(--icen-token-text-muted); }
 
-.kb-pipeline-title {
+.icen-kb-pipeline-title {
   flex: 1 1 auto;
   min-width: 0;
-  color: var(--token-text);
-  font-size: 13px;
+  color: var(--icen-token-text);
+  font-size: var(--icen-density-font-size-md);
+  font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* 可选细粒度进度条（run.progress 定义时出现）：3px 细线，与上下内容各留 8px */
-.kb-pipeline-progress {
+/* 可选细粒度进度条（run.icen-progress 定义时出现）：3px 细线，与上下内容各留 8px */
+.icen-kb-pipeline-progress {
   height: 3px;
   margin: 8px;
-  border-radius: 2px;
-  background: var(--token-line-soft);
+  border-radius: 2px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面）  */
+  background: var(--icen-token-line-soft);
   overflow: hidden;
 }
-.kb-pipeline-progress > i {
+.icen-kb-pipeline-progress > i {
   display: block;
   height: 100%;
-  border-radius: 2px;
-  background: var(--token-accent);
+  border-radius: 2px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面）  */
+  background: var(--icen-token-accent);
   opacity: 0.7;
-  transition: width 0.24s ease-out;
+  transition: width var(--icen-tx-slow);
 }
 
-/* 步骤时间线：纵向连线（层级色，不给状态色） */
-.kb-pipeline-steps {
+/* 步骤时间线：纵向连线（层级色，不给状态色；沿 inline-start，RTL 镜像） */
+.icen-kb-pipeline-steps {
   list-style: none;
   margin: 4px 0 0;
-  padding: 0 0 0 6px;
+  padding: 0;
+  padding-inline-start: 6px;
   display: flex;
   flex-direction: column;
   gap: 2px;
-  min-width: 0;
+  min-inline-size: 0;
 }
-.kb-pipeline-step {
+.icen-kb-pipeline-step {
   position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
-  min-height: 26px;
-  padding: 1px 2px;
-  border-radius: var(--radius-sm, 6px);
+  min-height: var(--icen-density-item-height);
+  padding: 2px;
+  border-radius: var(--icen-radius-sm);
 }
-.kb-pipeline-step:not(:last-child)::before {
+.icen-kb-pipeline-step:not(:last-child)::before {
   content: '';
   position: absolute;
-  left: 6.5px;
+  inset-inline-start: 5px; /* 对齐全族 6px 状态点的圆心 */
   top: 15px;
   bottom: -5px;
   width: 1px;
-  background: var(--token-line-soft);
+  background: var(--icen-token-line-soft);
 }
-.kb-pipeline-step > .kb-dot {
+.icen-kb-pipeline-step > .icen-kb-dot {
   position: relative;
   z-index: 1;
   flex: 0 0 auto;
 }
-.kb-pipeline-step-label {
-  font-size: 12.5px;
-  color: var(--token-text);
+.icen-kb-pipeline-step-label {
+  font-size: var(--icen-density-font-size-md);
+  color: var(--icen-token-text);
   white-space: nowrap;
 }
-.kb-step-detail {
-  font-size: 11.5px;
-  color: var(--token-text-faint);
+.icen-kb-step-detail {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
 }
 /* 状态映射：未开始/排队/取消 中性弱化；进行中 accent；完成 muted；失败 danger */
-.kb-pipeline-step.is-unstart .kb-pipeline-step-label,
-.kb-pipeline-step.is-queued .kb-pipeline-step-label { color: var(--token-text-faint); }
-.kb-pipeline-step.is-running .kb-pipeline-step-label { color: var(--token-accent); }
-.kb-pipeline-step.is-done .kb-pipeline-step-label { color: var(--token-text-muted); }
-.kb-pipeline-step.is-cancel .kb-pipeline-step-label {
-  color: var(--token-text-faint);
+.icen-kb-pipeline-step.is-unstart .icen-kb-pipeline-step-label,
+.icen-kb-pipeline-step.is-queued .icen-kb-pipeline-step-label { color: var(--icen-token-text-faint); }
+.icen-kb-pipeline-step.is-running .icen-kb-pipeline-step-label { color: var(--icen-token-accent-text); }
+.icen-kb-pipeline-step.is-done .icen-kb-pipeline-step-label { color: var(--icen-token-text-muted); }
+.icen-kb-pipeline-step.is-cancel .icen-kb-pipeline-step-label {
+  color: var(--icen-token-text-faint);
   text-decoration: line-through;
 }
-.kb-pipeline-step.is-fail .kb-pipeline-step-label { color: var(--token-danger, var(--token-error)); }
-.kb-pipeline-step-elapsed {
-  margin-left: auto;
+.icen-kb-pipeline-step.is-fail .icen-kb-pipeline-step-label { color: var(--icen-token-error); }
+.icen-kb-pipeline-step-elapsed {
+  margin-inline-start: auto;
   flex: 0 0 auto;
 }
 
 /* 失败错误区：阶段定位 + 原因（fail 时随 body 展开） */
-.kb-pipeline-error {
+.icen-kb-pipeline-error {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   margin-top: 8px;
   padding: 8px 10px;
-  border-radius: var(--radius-sm, 6px);
-  background: color-mix(in srgb, var(--token-danger, var(--token-error)) 7%, transparent);
+  border: 1px solid color-mix(in srgb, var(--icen-token-error) 24%, transparent);
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-error-muted);
 }
-.kb-pipeline-error > svg {
-  width: 13px;
-  height: 13px;
+.icen-kb-pipeline-error > svg {
+  width: 14px;
+  height: 14px;
   flex: 0 0 auto;
-  color: var(--token-danger, var(--token-error));
+  color: var(--icen-token-error);
   margin-top: 2px;
 }
-.kb-pipeline-error-stage {
+.icen-kb-pipeline-error-stage {
   flex: 0 0 auto;
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: 11.5px;
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-density-font-size-xs);
   font-weight: 600;
-  color: var(--token-danger, var(--token-error));
+  letter-spacing: 0.3px;
+  color: var(--icen-token-error);
 }
-.kb-pipeline-error-msg {
+.icen-kb-pipeline-error-msg {
   flex: 1 1 auto;
   min-width: 0;
-  font-size: 12px;
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1.6;
-  color: var(--token-text-muted);
+  /* 错误原因正文是实质内容，不用 muted 弱化（浅红底上 muted 过不了对比度门） */
+  color: var(--icen-token-text);
 }
 
 /* ══════════════ kb-chunks · chunk 编辑器（§5.6） ══════════════ */
 
-.kb-chunks {
+.icen-kb-chunks {
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-width: 0;
 }
-.kb-chunks-bar {
+.icen-kb-chunks-bar {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
-.kb-chunks-bar .kb-chunks-mode {
+.icen-kb-chunks-bar .icen-kb-chunks-mode {
   flex: 0 0 auto;
 }
-.kb-chunks-bar .kb-chunks-search {
+.icen-kb-chunks-bar .icen-kb-chunks-search {
   flex: 1 1 auto;
   min-width: 140px;
 }
-.kb-chunks-bar .kb-chunks-add {
+.icen-kb-chunks-bar .icen-kb-chunks-add {
   flex: 0 0 auto;
 }
 
-.kb-chunk-list {
+.icen-kb-chunk-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0;
 }
 
-.kb-chunk {
+.icen-kb-chunk {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
   gap: 10px;
   padding: 8px 10px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md, 10px);
-  background: var(--token-bg-soft);
-  transition: opacity 0.16s ease-out;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-bg-soft);
+  transition:
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+/* available=false：不删除但排除出检索 → 文字降级（不整卡透明：透明度会被 axe 算进对比度） */
+.icen-kb-chunk.is-off {
+  color: var(--icen-token-text-muted);
 }
-/* available=false：不删除但排除出检索 → 整体降透明度 */
-.kb-chunk.is-off {
-  opacity: 0.55;
+.icen-kb-chunk.is-off .icen-kb-chunk-content {
+  color: var(--icen-token-text-muted);
 }
 
 /* 启用开关（kb 域自持，无 switch.css 依赖） */
-.kb-chunk-switch {
+.icen-kb-chunk-switch {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  min-block-size: var(--icen-density-item-height);
   margin-top: 2px;
-  font-size: 11.5px;
-  color: var(--token-text-faint);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
   cursor: pointer;
   user-select: none;
 }
-.kb-chunk-switch input {
+.icen-kb-chunk-switch input {
   position: absolute;
   width: 0;
   height: 0;
   opacity: 0;
 }
-.kb-chunk-switch-track {
+.icen-kb-chunk-switch-track {
   position: relative;
   flex: 0 0 auto;
-  width: 26px;
-  height: 15px;
-  border-radius: 999px;
-  background: var(--token-line-soft);
-  transition: background-color 0.16s ease-out;
+  width: 28px;
+  height: 17px;
+  border: 1px solid transparent;
+  border-radius: var(--icen-radius-full);
+  background: var(--icen-token-line-soft);
+  transition: background-color var(--icen-tx-fast);
 }
-.kb-chunk-switch-thumb {
+.icen-kb-chunk-switch-thumb {
   position: absolute;
   top: 2px;
-  left: 2px;
+  left: 2px; /* guard:allow-physical 开关是物理隐喻控件（Material 惯例：RTL 下方向保持物理，不镜像） */
   width: 11px;
   height: 11px;
+  border: 1px solid transparent;
   border-radius: 50%;
-  background: var(--token-bg);
-  box-shadow: 0 0 0 1px var(--token-line-soft);
-  transition: transform 0.16s ease-out;
+  background: var(--icen-token-bg);
+  box-shadow: 0 0 0 1px var(--icen-token-line-soft);
+  transition: transform var(--icen-tx-fast);
+}
+/* hover 只提示可切换，不预先染成成功色 */
+.icen-kb-chunk-switch:hover input:not(:checked) + .icen-kb-chunk-switch-track {
+  background: var(--icen-token-line);
 }
-.kb-chunk-switch input:checked + .kb-chunk-switch-track {
-  background: var(--token-success);
+.icen-kb-chunk-switch:active input:not(:checked) + .icen-kb-chunk-switch-track {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-chunk-switch input:checked + .kb-chunk-switch-track > .kb-chunk-switch-thumb {
-  transform: translateX(11px);
+.icen-kb-chunk-switch input:checked + .icen-kb-chunk-switch-track {
+  background: var(--icen-token-success);
 }
-.kb-chunk-switch input:focus-visible + .kb-chunk-switch-track {
-  outline: 2px solid var(--token-accent);
-  outline-offset: 1px;
+.icen-kb-chunk-switch input:checked + .icen-kb-chunk-switch-track > .icen-kb-chunk-switch-thumb {
+  transform: translateX(11px); /* guard:allow-physical translateX 位移属物理动画语义（开关不随 RTL 镜像） */
+}
+.icen-kb-chunk-switch input:focus-visible + .icen-kb-chunk-switch-track {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 
-.kb-chunk-main {
+.icen-kb-chunk-main {
   display: flex;
   flex-direction: column;
-  gap: 5px;
-  min-width: 0;
+  gap: 6px;
+  min-inline-size: 0;
 }
-/* 行内编辑：静默无边，编辑态（focus）边框 accent */
-.kb-chunk-content {
-  padding: 2px 6px;
+/* 行内编辑：静默无边，编辑态（focus）边框 accent + 焦点环 */
+.icen-kb-chunk-content {
+  padding: 3px 6px;
   margin: 0 -6px;
   border: 1px solid transparent;
-  border-radius: var(--radius-sm, 6px);
-  font-size: 12.5px;
+  border-radius: var(--icen-radius-sm);
+  font-size: var(--icen-density-font-size-md);
   line-height: 1.7;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   white-space: pre-wrap;
   word-break: break-word;
-  transition: border-color 0.16s ease-out, background-color 0.16s ease-out;
+  transition: border-color var(--icen-tx-fast), background-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
+}
+.icen-kb-chunk-content:hover:not(:focus) {
+  background: var(--icen-token-fill-hover);
 }
-.kb-chunk-content:focus {
+.icen-kb-chunk-content:focus {
   outline: none;
-  border-color: var(--token-accent);
-  background: var(--token-bg);
+  border-color: var(--icen-token-accent);
+  background: var(--icen-token-surface);
+  box-shadow: var(--icen-ring);
 }
 
-.kb-chunk-keywords {
+.icen-kb-chunk-keywords {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 4px;
-  min-width: 0;
+  min-inline-size: 0;
 }
-.kb-chunk-keyword-x {
+.icen-kb-chunk-keyword-x {
   border: none;
   background: none;
-  padding: 0 0 0 3px;
+  padding: 0;
+  padding-inline-start: 3px;
+  border-radius: var(--icen-radius-xs);
   font: inherit;
-  font-size: 12px;
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.icen-kb-chunk-keyword-x:hover {
+  color: var(--icen-token-error);
+  background: var(--icen-token-fill-hover);
 }
-.kb-chunk-keyword-x:hover {
-  color: var(--token-danger, var(--token-error));
+.icen-kb-chunk-keyword-x:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-chunk-keyword-x:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: 1px;
+.icen-kb-chunk-keyword-x:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.kb-chunk-keyword-input {
+.icen-kb-chunk-keyword-input {
   border: none;
   background: none;
   outline: none;
   padding: 2px 4px;
   width: 96px;
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: 11px;
-  color: var(--token-text);
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text);
+}
+/* 裸 input 清掉了边框/背景/outline：必须自给焦点可见性，否则键盘焦点零反馈 */
+.icen-kb-chunk-keyword-input:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+  border-radius: var(--icen-radius-xs);
 }
-.kb-chunk-keyword-input::placeholder {
-  color: var(--token-text-faint);
+.icen-kb-chunk-keyword-input::placeholder {
+  color: var(--icen-token-text-faint);
 }
 
-.kb-chunk-meta {
-  color: var(--token-text-faint);
+.icen-kb-chunk-meta {
+  color: var(--icen-token-text-muted);
 }
-.kb-chunk-edited-flag {
-  color: var(--token-warning);
+.icen-kb-chunk-edited-flag {
+  color: var(--icen-token-warning);
 }
 
 /* ══════════════ kb-segment · 分段策略 + 实时预览（§5.7） ══════════════ */
 
-.kb-segment-host {
+.icen-kb-segment-host {
   min-width: 0;
 }
-.kb-segment {
+.icen-kb-segment {
   display: grid;
   grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr);
   gap: 16px;
   min-width: 0;
 }
 @media (max-width: 720px) {
-  .kb-segment {
+  .icen-kb-segment {
     grid-template-columns: minmax(0, 1fr);
   }
 }
 
-.kb-segment-form {
+.icen-kb-segment-form {
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-width: 0;
 }
-.kb-segment-locked {
-  color: var(--token-warning);
+.icen-kb-segment-locked {
+  color: var(--icen-token-warning);
 }
-.kb-segment-locked svg {
-  color: var(--token-warning);
+.icen-kb-segment-locked svg {
+  color: var(--icen-token-warning);
 }
-.kb-field {
+.icen-kb-field {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0;
 }
-.kb-field > .kb-field-label {
-  font-size: 11.5px;
-  color: var(--token-text-faint);
+.icen-kb-field > .icen-kb-field-label {
+  font-size: var(--icen-density-font-size-xs);
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  color: var(--icen-token-text-muted);
 }
-.kb-field > .kb-input {
+.icen-kb-field > .icen-kb-input {
   width: 100%;
 }
-.kb-segment-overlap-error {
+.icen-kb-segment-overlap-error {
   margin-top: -4px;
-  color: var(--token-danger, var(--token-error));
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-error);
 }
-.kb-segment-clean {
+.icen-kb-segment-clean {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 14px;
 }
-.kb-segment-clean-item {
+.icen-kb-segment-clean-item {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  font-size: 12px;
-  color: var(--token-text-muted);
+  gap: 6px;
+  min-block-size: 24px;
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-muted);
   cursor: pointer;
   user-select: none;
+  transition: color var(--icen-tx-fast);
 }
-.kb-segment-clean-item input {
-  accent-color: var(--token-accent);
-  margin: 0;
+.icen-kb-segment-clean-item:hover {
+  color: var(--icen-token-text);
 }
+.icen-kb-segment-clean-item .icen-checkbox { flex: 0 0 auto; }
 
-.kb-segment-preview {
+.icen-kb-segment-preview {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 10px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md, 10px);
-  background: var(--token-bg);
+  padding: 12px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-bg);
   min-width: 0;
   min-height: 0;
 }
-.kb-segment-stats {
+.icen-kb-segment-stats {
   display: flex;
   align-items: baseline;
   gap: 12px;
   flex-wrap: wrap;
 }
-.kb-segment-stat {
-  font-size: 12.5px;
-  color: var(--token-text);
+.icen-kb-segment-stat {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text);
 }
-.kb-segment-blocks {
+.icen-kb-segment-blocks {
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -544,355 +631,447 @@
   max-height: 480px;
   overflow-y: auto;
 }
-.kb-segment-block {
+.icen-kb-segment-block {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   gap: 8px;
   padding: 6px 8px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
-  background: var(--token-bg-soft);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-bg-soft);
 }
-.kb-segment-block-no {
-  color: var(--token-text-faint);
+.icen-kb-segment-block-no {
+  color: var(--icen-token-text-faint);
 }
 /* 内容截断 200px，点击展开（渐进披露） */
-.kb-segment-block-text {
+.icen-kb-segment-block-text {
   max-height: 200px;
   overflow: hidden;
-  font-size: 12.5px;
+  font-size: var(--icen-density-font-size-md);
   line-height: 1.7;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
   white-space: pre-wrap;
   word-break: break-word;
   cursor: pointer;
-  transition: max-height 0.16s ease-out;
+  transition: max-height var(--icen-tx-normal), color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.icen-kb-segment-block-text:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-hover);
+}
+.icen-kb-segment-block-text:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-segment-block-text.is-open {
+.icen-kb-segment-block-text.is-open {
   max-height: none;
 }
-.kb-segment-block-text:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: 1px;
+.icen-kb-segment-block-text:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 
 /* ══════════════ kb-connector · 连接器卡（§5.8） ══════════════ */
 
-.kb-connector-grid {
+.icen-kb-connector-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 12px;
   min-width: 0;
 }
 
-.kb-connector {
+.icen-kb-connector {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 10px 12px 10px 14px;
-  border: 1px solid var(--token-line-soft);
-  border-left: 2px solid var(--token-line-soft);
-  border-radius: var(--radius-md, 10px);
-  background: var(--token-bg-soft);
-  min-width: 0;
-}
-/* 健康左缘 2px 色条（connectorHealth 判定；色只在此与状态点上） */
-.kb-connector.is-healthy { border-left-color: var(--token-success); }
-.kb-connector.is-stale { border-left-color: var(--token-warning); }
-.kb-connector.is-failing { border-left-color: var(--token-danger, var(--token-error)); }
-.kb-connector.is-off { border-left-color: var(--token-line); }
+  padding-block: 10px;
+  padding-inline: 12px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-inline-start: 2px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-bg-soft);
+  min-inline-size: 0;
+}
+/* 健康起始缘 2px 色条（connectorHealth 判定；色只在此与状态点上；RTL 镜像） */
+.icen-kb-connector.is-healthy { border-inline-start-color: var(--icen-token-success); }
+.icen-kb-connector.is-stale { border-inline-start-color: var(--icen-token-warning); }
+.icen-kb-connector.is-failing { border-inline-start-color: var(--icen-token-error); }
+.icen-kb-connector.is-off { border-inline-start-color: var(--icen-token-line); }
 
-.kb-connector-head {
+.icen-kb-connector-head {
   display: flex;
   align-items: center;
   gap: 8px;
-  min-width: 0;
+  min-inline-size: 0;
 }
-/* .kb-source-icon 基元归 kb-ground.css；本域兜底一份最小骨架（同名同义，共存不冲突） */
-.kb-connector-head .kb-source-icon {
+/* .icen-kb-source-icon 基元归 kb-ground.css；本域兜底一份最小骨架（同名同义，共存不冲突） */
+.icen-kb-connector-head .icen-kb-source-icon {
   flex: 0 0 auto;
   display: inline-flex;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
 }
-.kb-connector-head .kb-source-icon svg {
+.icen-kb-connector-head .icen-kb-source-icon svg {
   width: 16px;
   height: 16px;
 }
-.kb-connector-main {
+.icen-kb-connector-main {
   flex: 1 1 auto;
-  min-width: 0;
+  min-inline-size: 0;
   display: flex;
   flex-direction: column;
   gap: 1px;
 }
-.kb-connector-name {
-  font-size: 13px;
+.icen-kb-connector-name {
+  font-size: var(--icen-density-font-size-md);
   font-weight: 600;
-  color: var(--token-text);
+  line-height: 1.35;
+  color: var(--icen-token-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.kb-connector-sub {
-  font-size: 11.5px;
-  color: var(--token-text-faint);
+.icen-kb-connector-sub {
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.4;
+  color: var(--icen-token-text-faint);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* 同步计划：mono 不换行（cron 原值包 .kb-chip；人类可读文本 .kb-meta）——绝不散点裸渲 */
-.kb-connector-schedule {
+/* 同步计划：mono 不换行（cron 原值包 .icen-kb-chip；人类可读文本 .icen-kb-meta）——绝不散点裸渲 */
+.icen-kb-connector-schedule {
   flex: 0 0 auto;
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-density-font-size-xs);
+  letter-spacing: 0.3px;
   white-space: nowrap;
 }
 
-/* 指标区：CSS grid 两列对齐（label 11px faint 左、value .kb-num 右，同列基线） */
-.kb-connector-metrics {
+/* 指标区：CSS grid 两列对齐（label 11px faint 起始缘、value .icen-kb-num 行内末端，同列基线） */
+.icen-kb-connector-metrics {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 6px 12px;
 }
-.kb-connector-signal {
+.icen-kb-connector-signal {
   display: flex;
   align-items: baseline;
   gap: 6px;
-  min-width: 0;
+  min-inline-size: 0;
   min-height: 22px;
 }
 /* 健康状态点与文字基线并排时垂直居中，避免点悬浮 */
-.kb-connector-signal .kb-dot {
+.icen-kb-connector-signal .icen-kb-dot {
   align-self: center;
 }
-.kb-connector-signal-label {
+.icen-kb-connector-signal-label {
   flex: 0 0 auto;
-  font-size: 11px;
-  color: var(--token-text-faint);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
 }
-.kb-connector-signal-value {
+.icen-kb-connector-signal-value {
   flex: 1 1 auto;
-  min-width: 0;
-  margin-left: auto;
-  font-size: 12px;
-  color: var(--token-text);
-  text-align: right;
+  min-inline-size: 0;
+  margin-inline-start: auto;
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text);
+  text-align: end;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* 凭证与指标同排版（文字值右对齐同列），仅以颜色区分：过期 = error 红与 failing 一致，未配置 warning，正常 muted */
-.kb-connector-cred.is-expired {
-  color: var(--token-danger, var(--token-error));
+/* 凭证与指标同排版（文字值行内末端对齐同列），仅以颜色区分：过期 = error 红与 failing 一致，未配置 warning，正常 muted */
+.icen-kb-connector-cred.is-expired {
+  color: var(--icen-token-error);
   font-weight: 500;
 }
-.kb-connector-cred.is-none {
-  color: var(--token-warning);
+.icen-kb-connector-cred.is-none {
+  color: var(--icen-token-warning);
 }
-.kb-connector-cred.is-ok {
-  color: var(--token-text-muted);
+.icen-kb-connector-cred.is-ok {
+  color: var(--icen-token-text-muted);
 }
 
-.kb-connector-foot {
+.icen-kb-connector-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding-top: 8px;
-  border-top: 1px solid var(--token-line-soft);
+  border-top: 1px solid var(--icen-token-line-soft);
   flex-wrap: wrap;
 }
-.kb-connector-actions {
+.icen-kb-connector-actions {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
 }
-.kb-connector-actions .kb-btn {
-  padding: 2px 8px;
-  font-size: 11.5px;
-}
 
 /* ══════════════ kb-metadata · 元数据管理（§5.9） ══════════════ */
 
-.kb-metadata {
+.icen-kb-metadata {
   min-width: 0;
 }
-.kb-metadata-table {
+.icen-kb-metadata-table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
+  font-variant-numeric: tabular-nums;
 }
-.kb-metadata-th {
-  padding: 4px 8px;
-  border-bottom: 1px solid var(--token-line-soft);
-  font-size: 11.5px;
+.icen-kb-metadata-th {
+  height: var(--icen-density-item-height);
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--icen-token-line-soft);
+  font-size: var(--icen-density-font-size-xs);
   font-weight: 500;
-  color: var(--token-text-faint);
-  text-align: left;
+  letter-spacing: 0.3px;
+  color: var(--icen-token-text-faint);
+  text-align: start;
   white-space: nowrap;
 }
-.kb-metadata-th:nth-child(1) { width: 32%; }
-.kb-metadata-th:nth-child(2) { width: 84px; }
-.kb-metadata-th:nth-child(4) { width: 60px; }
-.kb-metadata-row > td {
-  padding: 4px 8px;
-  border-bottom: 1px solid var(--token-line-soft);
-  font-size: 12.5px;
+.icen-kb-metadata-th:nth-child(1) { width: 32%; }
+.icen-kb-metadata-th:nth-child(2) { width: 84px; }
+.icen-kb-metadata-th:nth-child(4) { width: 96px; } /* 28px 操作钮（含中英文按钮文本）不截断 */
+.icen-kb-metadata-row > td {
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--icen-token-line-soft);
+  font-size: var(--icen-density-font-size-md);
   vertical-align: middle;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.kb-metadata-row:hover > td {
-  background: var(--token-bg-soft);
+.icen-kb-metadata-row:last-child > td {
+  border-bottom: 0; /* 列表最后一行去分隔线 */
 }
-.kb-metadata-key {
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: 12px;
-  color: var(--token-text);
+.icen-kb-metadata-row:hover > td {
+  background: var(--icen-token-fill-hover);
 }
-.kb-metadata-key-label {
-  font-size: 11px;
-  color: var(--token-text-faint);
+.icen-kb-metadata-key {
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text);
 }
-.kb-metadata-builtin-flag {
-  margin-left: 6px;
-  font-size: 10.5px;
-  color: var(--token-text-faint);
-  border: 1px solid var(--token-line-soft);
-  border-radius: 999px;
-  padding: 1px 6px;
+.icen-kb-metadata-key-label {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
 }
-.kb-metadata-type {
-  font-family: var(--font-mono, ui-monospace, monospace);
+.icen-kb-metadata-builtin-flag {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 22px;
+  margin-inline-start: 6px;
+  padding: 0 7px;
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1;
+  color: var(--icen-token-text-faint);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-full);
+  vertical-align: middle;
 }
-.kb-metadata-readonly {
-  color: var(--token-text-muted);
+.icen-kb-metadata-type {
+  font-family: var(--icen-font-mono);
 }
-.kb-metadata-value .kb-input {
-  width: 100%;
+.icen-kb-metadata-readonly {
+  color: var(--icen-token-text-muted);
 }
-.kb-metadata-ops {
-  text-align: right;
+.icen-kb-metadata-value .icen-kb-input {
+  inline-size: 100%;
 }
-.kb-metadata-ops .kb-btn {
-  padding: 1px 8px;
-  font-size: 11.5px;
+.icen-kb-metadata-ops {
+  text-align: end;
 }
-.kb-metadata-empty {
-  padding: 18px 8px !important;
+.icen-kb-metadata-empty {
+  padding: 20px 8px !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */
+  font-size: var(--icen-font-size-caption);
   text-align: center;
-  color: var(--token-text-faint);
-  white-space: normal !important;
+  color: var(--icen-token-text-faint);
+  white-space: normal !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */
 }
-.kb-metadata-new {
+.icen-kb-metadata-new {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-  margin-top: 10px;
+  margin-top: 12px;
 }
-.kb-metadata-new .kb-metadata-new-key {
+.icen-kb-metadata-new .icen-kb-metadata-new-key {
   width: 220px;
 }
 
 /* ══════════════ kb-qa · 认证问答对编辑器（§5.10） ══════════════ */
 
-.kb-qa {
-  min-width: 0;
+.icen-kb-qa {
+  min-inline-size: 0;
 }
-.kb-qa-bar {
+.icen-kb-qa-bar {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 8px;
 }
-.kb-qa-bar .kb-qa-hint {
+.icen-kb-qa-bar .icen-kb-qa-hint {
   flex: 1 1 auto;
-  min-width: 0;
+  min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kb-qa-table {
-  width: 100%;
+.icen-kb-qa-table {
+  inline-size: 100%;
   border-collapse: collapse;
   table-layout: fixed;
+  font-variant-numeric: tabular-nums;
 }
-.kb-qa-th {
-  padding: 4px 8px;
-  border-bottom: 1px solid var(--token-line-soft);
-  font-size: 11.5px;
+.icen-kb-qa-th {
+  height: var(--icen-density-item-height);
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--icen-token-line-soft);
+  font-size: var(--icen-density-font-size-xs);
   font-weight: 500;
-  color: var(--token-text-faint);
-  text-align: left;
+  letter-spacing: 0.3px;
+  color: var(--icen-token-text-faint);
+  text-align: start;
   white-space: nowrap;
 }
-.kb-qa-th:nth-child(1) { width: 44%; }
-.kb-qa-th:nth-child(2) { width: 44%; }
-.kb-qa-th:nth-child(3) { width: 52px; }
-.kb-qa-row > td {
-  padding: 4px 8px;
-  border-bottom: 1px solid var(--token-line-soft);
-  font-size: 12.5px;
+.icen-kb-qa-th:nth-child(1) { width: 44%; }
+.icen-kb-qa-th:nth-child(2) { width: 44%; }
+.icen-kb-qa-th:nth-child(3) { width: 88px; } /* 28px 操作钮（含中英文按钮文本）不截断 */
+.icen-kb-qa-row > td {
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--icen-token-line-soft);
+  font-size: var(--icen-density-font-size-md);
   vertical-align: top;
 }
-.kb-qa-row:hover > td {
-  background: var(--token-bg-soft);
+.icen-kb-qa-row:last-child > td {
+  border-bottom: 0; /* 列表最后一行去分隔线 */
+}
+.icen-kb-qa-row:hover > td {
+  background: var(--icen-token-fill-hover);
 }
-/* 行内编辑格：静默，focus 内描边 accent */
-.kb-qa-q,
-.kb-qa-a {
+/* 行内编辑格：静默，hover 提示可编辑，focus 给焦点环 */
+.icen-kb-qa-q,
+.icen-kb-qa-a {
   outline: none;
-  border-radius: var(--radius-sm, 6px);
-  padding: 2px 4px;
-  margin: -2px -4px;
+  border-radius: var(--icen-radius-sm);
+  padding: 3px 4px;
+  margin: -3px -4px;
   line-height: 1.7;
   word-break: break-word;
-  transition: box-shadow 0.16s ease-out;
+  transition: box-shadow var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.kb-qa-q:focus,
-.kb-qa-a:focus {
-  box-shadow: inset 0 0 0 1px var(--token-accent);
+.icen-kb-qa-q:hover,
+.icen-kb-qa-a:hover {
+  background: var(--icen-token-fill-hover);
 }
-.kb-qa-q:empty::before,
-.kb-qa-a:empty::before {
+.icen-kb-qa-q:focus,
+.icen-kb-qa-a:focus {
+  box-shadow: var(--icen-ring);
+}
+.icen-kb-qa-q:empty::before,
+.icen-kb-qa-a:empty::before {
   content: '…';
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
-.kb-qa-ops {
-  text-align: right;
+.icen-kb-qa-ops {
+  text-align: end;
   vertical-align: middle;
 }
-.kb-qa-ops .kb-btn {
-  padding: 1px 8px;
-  font-size: 11.5px;
-}
-.kb-qa-empty {
-  padding: 18px 8px !important;
+.icen-kb-qa-empty {
+  padding: 20px 8px !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */
+  font-size: var(--icen-font-size-caption);
   text-align: center;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
 
 /* ══════════════ 密度 / 动效守卫 ══════════════ */
 
-[data-density='compact'] .kb-pipeline-step { min-height: 22px; }
-[data-density='compact'] .kb-chunk { padding: 5px 8px; gap: 8px; }
-[data-density='compact'] .kb-metadata-row > td,
-[data-density='compact'] .kb-qa-row > td { padding-top: 2px; padding-bottom: 2px; }
+[data-icen-density='compact'] .icen-kb-pipeline-step { min-height: var(--icen-density-item-height); }
+[data-icen-density='compact'] .icen-kb-pipeline-step:not(:last-child)::before { top: 13px; bottom: -4px; }
+[data-icen-density='compact'] .icen-kb-chunk { padding: 6px 8px; gap: 8px; }
+[data-icen-density='compact'] .icen-kb-segment-preview { padding: 8px; }
+[data-icen-density='compact'] .icen-kb-connector { padding-block: 8px; }
+[data-icen-density='compact'] .icen-kb-metadata-th,
+[data-icen-density='compact'] .icen-kb-qa-th { padding-block: 3px; }
+[data-icen-density='compact'] .icen-kb-metadata-row > td,
+[data-icen-density='compact'] .icen-kb-qa-row > td { padding-top: 2px; padding-bottom: 2px; }
 
 @media (prefers-reduced-motion: reduce) {
-  .kb-btn,
-  .kb-input,
-  .kb-seg-item,
-  .kb-chunk,
-  .kb-chunk-content,
-  .kb-chunk-switch-track,
-  .kb-chunk-switch-thumb,
-  .kb-pipeline-progress > i,
-  .kb-segment-block-text,
-  .kb-qa-q,
-  .kb-qa-a {
+  .icen-kb-btn,
+  .icen-kb-input,
+  .icen-kb-seg-item,
+  .icen-kb-chunk,
+  .icen-kb-chunk-content,
+  .icen-kb-chunk-switch-track,
+  .icen-kb-chunk-switch-thumb,
+  .icen-kb-pipeline-progress > i,
+  .icen-kb-segment-block-text,
+  .icen-kb-qa-q,
+  .icen-kb-qa-a {
     transition: none;
   }
 }
+
+/* ══════════════ 高对比模式：控件边界与状态不能只靠底色差 ══════════════ */
+
+@media (forced-colors: active) {
+  .icen-kb-btn,
+  .icen-kb-seg,
+  .icen-kb-seg-item,
+  .icen-kb-chunk,
+  .icen-kb-chunk-content,
+  .icen-kb-chunk-switch-track,
+  .icen-kb-chunk-switch-thumb,
+  .icen-kb-segment-preview,
+  .icen-kb-segment-block,
+  .icen-kb-connector,
+  .icen-kb-metadata-th,
+  .icen-kb-metadata-row > td,
+  .icen-kb-qa-th,
+  .icen-kb-qa-row > td {
+    border-color: CanvasText;
+  }
+  .icen-kb-pipeline,
+  .icen-kb-pipeline-error {
+    border: 1px solid CanvasText;
+    background: Canvas;
+  }
+  .icen-kb-pipeline-progress {
+    border: 1px solid CanvasText;
+  }
+  .icen-kb-pipeline-progress > i {
+    background: Highlight;
+  }
+  .icen-kb-seg-item.is-active {
+    background: Highlight;
+    color: HighlightText;
+  }
+  .icen-kb-chunk.is-off,
+  .icen-kb-chunk.is-off .icen-kb-chunk-content {
+    color: GrayText;
+  }
+  .icen-kb-chunk-switch input:checked + .icen-kb-chunk-switch-track {
+    background: Highlight;
+  }
+  .icen-kb-chunk-switch input:checked + .icen-kb-chunk-switch-track > .icen-kb-chunk-switch-thumb {
+    background: HighlightText;
+  }
+  .icen-kb-pipeline-step > .icen-kb-dot,
+  .icen-kb-connector-signal .icen-kb-dot { forced-color-adjust: none; } /* 状态点保留语义色 */
+  .icen-kb-btn:focus-visible,
+  .icen-kb-seg-item:focus-visible,
+  .icen-kb-chunk-content:focus,
+  .icen-kb-chunk-switch input:focus-visible + .icen-kb-chunk-switch-track,
+  .icen-kb-chunk-keyword-x:focus-visible,
+  .icen-kb-chunk-keyword-input:focus-visible,
+  .icen-kb-segment-block-text:focus-visible,
+  .icen-kb-qa-q:focus,
+  .icen-kb-qa-a:focus {
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+    box-shadow: none;
+  }
+}
+
+}