@icen.ai/ui 0.8.1 → 0.10.0

package/dist/components/kb-ingest.css

@@ -0,0 +1,882 @@
+@layer icen.components {
+/*
+ * @icen.ai/ui — kb-ingest.css（摄取域：kb-pipeline / kb-chunks / kb-segment / kb-connector / kb-metadata / kb-qa）
+ *
+ * 共享原语在 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）：
+ *   - 摄取域＝中性行 + 状态色只给状态点与徽标（连线/边框一律层级色）
+ *   - 数字 .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，附缺省回退，可独立安装
+ */
+
+/* ══════════════ 域控件布局（输入视觉复用基础组件）（.icen-kb-btn / .icen-kb-input / .icen-kb-seg） ══════════════ */
+
+.icen-kb-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  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;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color 0.16s ease-out,
+    border-color 0.16s ease-out,
+    background-color 0.16s ease-out;
+}
+.icen-kb-btn:hover {
+  color: var(--icen-token-text);
+  border-color: var(--icen-token-line);
+}
+.icen-kb-btn:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: 1px;
+}
+.icen-kb-btn:disabled,
+.icen-kb-btn[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.icen-kb-btn svg {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+}
+
+/* Input surface/geometry comes from the shared input recipe in tokens.css. */
+.icen-kb-input[aria-invalid='true'] {
+  border-color: var(--icen-token-error);
+}
+.icen-kb-input--mono {
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-density-font-size-sm);
+}
+
+.icen-kb-seg {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-bg-soft);
+}
+.icen-kb-seg-item {
+  border: none;
+  background: none;
+  padding: 2px 10px;
+  border-radius: calc(var(--icen-radius-sm) - 2px);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--icen-token-text-muted);
+  cursor: pointer;
+  transition:
+    color 0.16s ease-out,
+    background-color 0.16s ease-out;
+}
+.icen-kb-seg-item:hover {
+  color: var(--icen-token-text);
+}
+.icen-kb-seg-item.is-active {
+  background: var(--icen-token-bg);
+  color: var(--icen-token-text);
+  box-shadow: 0 0 0 1px var(--icen-token-line-soft);
+}
+.icen-kb-seg-item:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: -2px;
+}
+.icen-kb-seg-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* ══════════════ kb-pipeline · 解析管线时间线（§5.5） ══════════════ */
+
+.icen-kb-pipeline {
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-bg-soft);
+  padding: 6px 8px;
+  min-width: 0;
+}
+.icen-kb-pipeline-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+.icen-kb-pipeline-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.icen-kb-pipeline-head > .icen-kb-pipeline-toggle {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.icen-kb-pipeline-head > .icen-kb-pipeline-rerun {
+  flex: 0 0 auto;
+}
+
+/* 头部状态徽章：状态色只落在徽章（点由 .icen-kb-dot 承担） */
+.icen-kb-pipeline-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: 0 0 auto;
+  font-size: 11.5px;
+  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); }
+
+.icen-kb-pipeline-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--icen-token-text);
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 可选细粒度进度条（run.icen-progress 定义时出现）：3px 细线，与上下内容各留 8px */
+.icen-kb-pipeline-progress {
+  height: 3px;
+  margin: 8px;
+  border-radius: 2px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面）  */
+  background: var(--icen-token-line-soft);
+  overflow: hidden;
+}
+.icen-kb-pipeline-progress > i {
+  display: block;
+  height: 100%;
+  border-radius: 2px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面）  */
+  background: var(--icen-token-accent);
+  opacity: 0.7;
+  transition: width 0.24s ease-out;
+}
+
+/* 步骤时间线：纵向连线（层级色，不给状态色；沿 inline-start，RTL 镜像） */
+.icen-kb-pipeline-steps {
+  list-style: none;
+  margin: 4px 0 0;
+  padding: 0;
+  padding-inline-start: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-inline-size: 0;
+}
+.icen-kb-pipeline-step {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 26px;
+  padding: 1px 2px;
+  border-radius: var(--icen-radius-sm);
+}
+.icen-kb-pipeline-step:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 6.5px;
+  top: 15px;
+  bottom: -5px;
+  width: 1px;
+  background: var(--icen-token-line-soft);
+}
+.icen-kb-pipeline-step > .icen-kb-dot {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+}
+.icen-kb-pipeline-step-label {
+  font-size: 12.5px;
+  color: var(--icen-token-text);
+  white-space: nowrap;
+}
+.icen-kb-step-detail {
+  font-size: 11.5px;
+  color: var(--icen-token-text-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+/* 状态映射：未开始/排队/取消 中性弱化；进行中 accent；完成 muted；失败 danger */
+.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;
+}
+.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 展开） */
+.icen-kb-pipeline-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 8px 10px;
+  border-radius: var(--icen-radius-sm);
+  background: color-mix(in srgb, var(--icen-token-error) 7%, transparent);
+}
+.icen-kb-pipeline-error > svg {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+  color: var(--icen-token-error);
+  margin-top: 2px;
+}
+.icen-kb-pipeline-error-stage {
+  flex: 0 0 auto;
+  font-family: var(--icen-font-mono);
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--icen-token-error);
+}
+.icen-kb-pipeline-error-msg {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--icen-token-text-muted);
+}
+
+/* ══════════════ kb-chunks · chunk 编辑器（§5.6） ══════════════ */
+
+.icen-kb-chunks {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+.icen-kb-chunks-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.icen-kb-chunks-bar .icen-kb-chunks-mode {
+  flex: 0 0 auto;
+}
+.icen-kb-chunks-bar .icen-kb-chunks-search {
+  flex: 1 1 auto;
+  min-width: 140px;
+}
+.icen-kb-chunks-bar .icen-kb-chunks-add {
+  flex: 0 0 auto;
+}
+
+.icen-kb-chunk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.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(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-bg-soft);
+  transition: opacity 0.16s ease-out;
+}
+/* available=false：不删除但排除出检索 → 整体降透明度 */
+.icen-kb-chunk.is-off {
+  color: var(--icen-token-text-muted); /* 停用态落在文字色而非整卡透明（透明度会被 axe 算进对比度） */
+}
+
+/* 启用开关（kb 域自持，无 switch.css 依赖） */
+.icen-kb-chunk-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 2px;
+  font-size: 11.5px;
+  color: var(--icen-token-text-faint);
+  cursor: pointer;
+  user-select: none;
+}
+.icen-kb-chunk-switch input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.icen-kb-chunk-switch-track {
+  position: relative;
+  flex: 0 0 auto;
+  width: 26px;
+  height: 15px;
+  border-radius: var(--icen-radius-full);
+  background: var(--icen-token-line-soft);
+  transition: background-color 0.16s ease-out;
+}
+.icen-kb-chunk-switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px; /* guard:allow-physical 开关是物理隐喻控件（Material 惯例：RTL 下方向保持物理，不镜像） */
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: var(--icen-token-bg);
+  box-shadow: 0 0 0 1px var(--icen-token-line-soft);
+  transition: transform 0.16s ease-out;
+}
+.icen-kb-chunk-switch input:checked + .icen-kb-chunk-switch-track {
+  background: var(--icen-token-success);
+}
+.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: 2px solid var(--icen-token-accent);
+  outline-offset: 1px;
+}
+
+.icen-kb-chunk-main {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-inline-size: 0;
+}
+/* 行内编辑：静默无边，编辑态（focus）边框 accent */
+.icen-kb-chunk-content {
+  padding: 2px 6px;
+  margin: 0 -6px;
+  border: 1px solid transparent;
+  border-radius: var(--icen-radius-sm);
+  font-size: 12.5px;
+  line-height: 1.7;
+  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;
+}
+.icen-kb-chunk-content:focus {
+  outline: none;
+  border-color: var(--icen-token-accent);
+  background: var(--icen-token-bg);
+}
+
+.icen-kb-chunk-keywords {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-inline-size: 0;
+}
+.icen-kb-chunk-keyword-x {
+  border: none;
+  background: none;
+  padding: 0;
+  padding-inline-start: 3px;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--icen-token-text-faint);
+  cursor: pointer;
+}
+.icen-kb-chunk-keyword-x:hover {
+  color: var(--icen-token-error);
+}
+.icen-kb-chunk-keyword-x:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: 1px;
+}
+.icen-kb-chunk-keyword-input {
+  border: none;
+  background: none;
+  outline: none;
+  padding: 2px 4px;
+  width: 96px;
+  font-family: var(--icen-font-mono);
+  font-size: 11px;
+  color: var(--icen-token-text);
+}
+.icen-kb-chunk-keyword-input::placeholder {
+  color: var(--icen-token-text-faint);
+}
+
+.icen-kb-chunk-meta {
+  color: var(--icen-token-text-muted);
+}
+.icen-kb-chunk-edited-flag {
+  color: var(--icen-token-warning);
+}
+
+/* ══════════════ kb-segment · 分段策略 + 实时预览（§5.7） ══════════════ */
+
+.icen-kb-segment-host {
+  min-width: 0;
+}
+.icen-kb-segment {
+  display: grid;
+  grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr);
+  gap: 16px;
+  min-width: 0;
+}
+@media (max-width: 720px) {
+  .icen-kb-segment {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.icen-kb-segment-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+.icen-kb-segment-locked {
+  color: var(--icen-token-warning);
+}
+.icen-kb-segment-locked svg {
+  color: var(--icen-token-warning);
+}
+.icen-kb-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.icen-kb-field > .icen-kb-field-label {
+  font-size: 11.5px;
+  color: var(--icen-token-text-faint);
+}
+.icen-kb-field > .icen-kb-input {
+  width: 100%;
+}
+.icen-kb-segment-overlap-error {
+  margin-top: -4px;
+  color: var(--icen-token-error);
+}
+.icen-kb-segment-clean {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+}
+.icen-kb-segment-clean-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: var(--icen-token-text-muted);
+  cursor: pointer;
+  user-select: none;
+}
+.icen-kb-segment-clean-item .icen-checkbox { flex: 0 0 auto; }
+
+.icen-kb-segment-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  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;
+}
+.icen-kb-segment-stats {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.icen-kb-segment-stat {
+  font-size: 12.5px;
+  color: var(--icen-token-text);
+}
+.icen-kb-segment-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  min-height: 0;
+  max-height: 480px;
+  overflow-y: auto;
+}
+.icen-kb-segment-block {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 8px;
+  padding: 6px 8px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-bg-soft);
+}
+.icen-kb-segment-block-no {
+  color: var(--icen-token-text-faint);
+}
+/* 内容截断 200px，点击展开（渐进披露） */
+.icen-kb-segment-block-text {
+  max-height: 200px;
+  overflow: hidden;
+  font-size: 12.5px;
+  line-height: 1.7;
+  color: var(--icen-token-text-muted);
+  white-space: pre-wrap;
+  word-break: break-word;
+  cursor: pointer;
+  transition: max-height 0.16s ease-out;
+}
+.icen-kb-segment-block-text.is-open {
+  max-height: none;
+}
+.icen-kb-segment-block-text:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
+  outline-offset: 1px;
+}
+
+/* ══════════════ kb-connector · 连接器卡（§5.8） ══════════════ */
+
+.icen-kb-connector-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 12px;
+  min-width: 0;
+}
+
+.icen-kb-connector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-block: 10px;
+  padding-inline: 14px 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); }
+
+.icen-kb-connector-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-inline-size: 0;
+}
+/* .icen-kb-source-icon 基元归 kb-ground.css；本域兜底一份最小骨架（同名同义，共存不冲突） */
+.icen-kb-connector-head .icen-kb-source-icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  color: var(--icen-token-text-muted);
+}
+.icen-kb-connector-head .icen-kb-source-icon svg {
+  width: 16px;
+  height: 16px;
+}
+.icen-kb-connector-main {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.icen-kb-connector-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--icen-token-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.icen-kb-connector-sub {
+  font-size: 11.5px;
+  color: var(--icen-token-text-faint);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 同步计划：mono 不换行（cron 原值包 .icen-kb-chip；人类可读文本 .icen-kb-meta）——绝不散点裸渲 */
+.icen-kb-connector-schedule {
+  flex: 0 0 auto;
+  font-family: var(--icen-font-mono);
+  white-space: nowrap;
+}
+
+/* 指标区：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;
+}
+.icen-kb-connector-signal {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-inline-size: 0;
+  min-height: 22px;
+}
+/* 健康状态点与文字基线并排时垂直居中，避免点悬浮 */
+.icen-kb-connector-signal .icen-kb-dot {
+  align-self: center;
+}
+.icen-kb-connector-signal-label {
+  flex: 0 0 auto;
+  font-size: 11px;
+  color: var(--icen-token-text-faint);
+}
+.icen-kb-connector-signal-value {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  margin-inline-start: auto;
+  font-size: 12px;
+  color: var(--icen-token-text);
+  text-align: end;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 凭证与指标同排版（文字值行内末端对齐同列），仅以颜色区分：过期 = error 红与 failing 一致，未配置 warning，正常 muted */
+.icen-kb-connector-cred.is-expired {
+  color: var(--icen-token-error);
+  font-weight: 500;
+}
+.icen-kb-connector-cred.is-none {
+  color: var(--icen-token-warning);
+}
+.icen-kb-connector-cred.is-ok {
+  color: var(--icen-token-text-muted);
+}
+
+.icen-kb-connector-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--icen-token-line-soft);
+  flex-wrap: wrap;
+}
+.icen-kb-connector-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.icen-kb-connector-actions .icen-kb-btn {
+  padding: 2px 8px;
+  font-size: 11.5px;
+}
+
+/* ══════════════ kb-metadata · 元数据管理（§5.9） ══════════════ */
+
+.icen-kb-metadata {
+  min-width: 0;
+}
+.icen-kb-metadata-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.icen-kb-metadata-th {
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--icen-token-line-soft);
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--icen-token-text-faint);
+  text-align: start;
+  white-space: nowrap;
+}
+.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: 60px; }
+.icen-kb-metadata-row > td {
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--icen-token-line-soft);
+  font-size: 12.5px;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.icen-kb-metadata-row:hover > td {
+  background: var(--icen-token-bg-soft);
+}
+.icen-kb-metadata-key {
+  font-family: var(--icen-font-mono);
+  font-size: 12px;
+  color: var(--icen-token-text);
+}
+.icen-kb-metadata-key-label {
+  font-size: 11px;
+  color: var(--icen-token-text-faint);
+}
+.icen-kb-metadata-builtin-flag {
+  margin-inline-start: 6px;
+  font-size: 10.5px;
+  color: var(--icen-token-text-faint);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-full);
+  padding: 1px 6px;
+}
+.icen-kb-metadata-type {
+  font-family: var(--icen-font-mono);
+}
+.icen-kb-metadata-readonly {
+  color: var(--icen-token-text-muted);
+}
+.icen-kb-metadata-value .icen-kb-input {
+  inline-size: 100%;
+}
+.icen-kb-metadata-ops {
+  text-align: end;
+}
+.icen-kb-metadata-ops .icen-kb-btn {
+  padding: 1px 8px;
+  font-size: 11.5px;
+}
+.icen-kb-metadata-empty {
+  padding: 18px 8px !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */
+  text-align: center;
+  color: var(--icen-token-text-faint);
+  white-space: normal !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */
+}
+.icen-kb-metadata-new {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+.icen-kb-metadata-new .icen-kb-metadata-new-key {
+  width: 220px;
+}
+
+/* ══════════════ kb-qa · 认证问答对编辑器（§5.10） ══════════════ */
+
+.icen-kb-qa {
+  min-inline-size: 0;
+}
+.icen-kb-qa-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+.icen-kb-qa-bar .icen-kb-qa-hint {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.icen-kb-qa-table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.icen-kb-qa-th {
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--icen-token-line-soft);
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--icen-token-text-faint);
+  text-align: start;
+  white-space: nowrap;
+}
+.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: 52px; }
+.icen-kb-qa-row > td {
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--icen-token-line-soft);
+  font-size: 12.5px;
+  vertical-align: top;
+}
+.icen-kb-qa-row:hover > td {
+  background: var(--icen-token-bg-soft);
+}
+/* 行内编辑格：静默，focus 内描边 accent */
+.icen-kb-qa-q,
+.icen-kb-qa-a {
+  outline: none;
+  border-radius: var(--icen-radius-sm);
+  padding: 2px 4px;
+  margin: -2px -4px;
+  line-height: 1.7;
+  word-break: break-word;
+  transition: box-shadow 0.16s ease-out;
+}
+.icen-kb-qa-q:focus,
+.icen-kb-qa-a:focus {
+  box-shadow: inset 0 0 0 1px var(--icen-token-accent);
+}
+.icen-kb-qa-q:empty::before,
+.icen-kb-qa-a:empty::before {
+  content: '…';
+  color: var(--icen-token-text-faint);
+}
+.icen-kb-qa-ops {
+  text-align: end;
+  vertical-align: middle;
+}
+.icen-kb-qa-ops .icen-kb-btn {
+  padding: 1px 8px;
+  font-size: 11.5px;
+}
+.icen-kb-qa-empty {
+  padding: 18px 8px !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */
+  text-align: center;
+  color: var(--icen-token-text-faint);
+}
+
+/* ══════════════ 密度 / 动效守卫 ══════════════ */
+
+[data-icen-density='compact'] .icen-kb-pipeline-step { min-height: 22px; }
+[data-icen-density='compact'] .icen-kb-chunk { padding: 5px 8px; gap: 8px; }
+[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) {
+  .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;
+  }
+}
+
+}