@icen.ai/ui 0.9.0 → 0.10.0

package/dist/components/kb-ingest.css

@@ -1,28 +1,29 @@
+@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);
+  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;
@@ -33,509 +34,489 @@
     border-color 0.16s ease-out,
     background-color 0.16s ease-out;
 }
-.kb-btn:hover {
-  color: var(--token-text);
-  border-color: var(--token-line);
+.icen-kb-btn:hover {
+  color: var(--icen-token-text);
+  border-color: var(--icen-token-line);
 }
-.kb-btn:focus-visible {
-  outline: 2px solid var(--token-accent);
+.icen-kb-btn:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
   outline-offset: 1px;
 }
-.kb-btn:disabled,
-.kb-btn[aria-disabled='true'] {
+.icen-kb-btn:disabled,
+.icen-kb-btn[aria-disabled='true'] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.kb-btn svg {
+.icen-kb-btn svg {
   width: 13px;
   height: 13px;
   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);
+/* Input surface/geometry comes from the shared input recipe in tokens.css. */
+.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-density-font-size-sm);
 }
 
-.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 {
+.icen-kb-seg-item {
   border: none;
   background: none;
   padding: 2px 10px;
-  border-radius: calc(var(--radius-sm, 6px) - 2px);
+  border-radius: calc(var(--icen-radius-sm) - 2px);
   font: inherit;
   font-size: 12px;
   line-height: 1.5;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
   cursor: pointer;
   transition:
     color 0.16s ease-out,
     background-color 0.16s ease-out;
 }
-.kb-seg-item:hover {
-  color: var(--token-text);
+.icen-kb-seg-item:hover {
+  color: var(--icen-token-text);
 }
-.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.is-active {
+  background: var(--icen-token-bg);
+  color: var(--icen-token-text);
+  box-shadow: 0 0 0 1px var(--icen-token-line-soft);
 }
-.kb-seg-item:focus-visible {
-  outline: 2px solid var(--token-accent);
+.icen-kb-seg-item:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
   outline-offset: -2px;
 }
-.kb-seg-item:disabled {
+.icen-kb-seg-item:disabled {
   opacity: 0.45;
   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);
+.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;
 }
-.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;
   flex: 0 0 auto;
   font-size: 11.5px;
-  color: var(--token-text-faint);
+  color: var(--icen-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); }
+.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);
+  color: var(--icen-token-text);
   font-size: 13px;
   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;
 }
 
-/* 步骤时间线：纵向连线（层级色，不给状态色） */
-.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);
+  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: 6.5px;
   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 {
+.icen-kb-pipeline-step-label {
   font-size: 12.5px;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   white-space: nowrap;
 }
-.kb-step-detail {
+.icen-kb-step-detail {
   font-size: 11.5px;
-  color: var(--token-text-faint);
+  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-radius: var(--icen-radius-sm);
+  background: color-mix(in srgb, var(--icen-token-error) 7%, transparent);
 }
-.kb-pipeline-error > svg {
+.icen-kb-pipeline-error > svg {
   width: 13px;
   height: 13px;
   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-family: var(--icen-font-mono);
   font-size: 11.5px;
   font-weight: 600;
-  color: var(--token-danger, var(--token-error));
+  color: var(--icen-token-error);
 }
-.kb-pipeline-error-msg {
+.icen-kb-pipeline-error-msg {
   flex: 1 1 auto;
   min-width: 0;
   font-size: 12px;
   line-height: 1.6;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
 }
 
 /* ══════════════ 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);
+  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：不删除但排除出检索 → 整体降透明度 */
-.kb-chunk.is-off {
-  opacity: 0.55;
+.icen-kb-chunk.is-off {
+  color: var(--icen-token-text-muted); /* 停用态落在文字色而非整卡透明（透明度会被 axe 算进对比度） */
 }
 
 /* 启用开关（kb 域自持，无 switch.css 依赖） */
-.kb-chunk-switch {
+.icen-kb-chunk-switch {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 2px;
   font-size: 11.5px;
-  color: var(--token-text-faint);
+  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);
+  border-radius: var(--icen-radius-full);
+  background: var(--icen-token-line-soft);
   transition: background-color 0.16s ease-out;
 }
-.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-radius: 50%;
-  background: var(--token-bg);
-  box-shadow: 0 0 0 1px var(--token-line-soft);
+  background: var(--icen-token-bg);
+  box-shadow: 0 0 0 1px var(--icen-token-line-soft);
   transition: transform 0.16s ease-out;
 }
-.kb-chunk-switch input:checked + .kb-chunk-switch-track {
-  background: var(--token-success);
+.icen-kb-chunk-switch input:checked + .icen-kb-chunk-switch-track {
+  background: var(--icen-token-success);
 }
-.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 > .icen-kb-chunk-switch-thumb {
+  transform: translateX(11px); /* guard:allow-physical translateX 位移属物理动画语义（开关不随 RTL 镜像） */
 }
-.kb-chunk-switch input:focus-visible + .kb-chunk-switch-track {
-  outline: 2px solid var(--token-accent);
+.icen-kb-chunk-switch input:focus-visible + .icen-kb-chunk-switch-track {
+  outline: 2px solid var(--icen-token-accent);
   outline-offset: 1px;
 }
 
-.kb-chunk-main {
+.icen-kb-chunk-main {
   display: flex;
   flex-direction: column;
   gap: 5px;
-  min-width: 0;
+  min-inline-size: 0;
 }
 /* 行内编辑：静默无边，编辑态（focus）边框 accent */
-.kb-chunk-content {
+.icen-kb-chunk-content {
   padding: 2px 6px;
   margin: 0 -6px;
   border: 1px solid transparent;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--icen-radius-sm);
   font-size: 12.5px;
   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;
 }
-.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-bg);
 }
 
-.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;
   font: inherit;
   font-size: 12px;
   line-height: 1;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   cursor: pointer;
 }
-.kb-chunk-keyword-x:hover {
-  color: var(--token-danger, var(--token-error));
+.icen-kb-chunk-keyword-x:hover {
+  color: var(--icen-token-error);
 }
-.kb-chunk-keyword-x:focus-visible {
-  outline: 2px solid var(--token-accent);
+.icen-kb-chunk-keyword-x:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
   outline-offset: 1px;
 }
-.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-family: var(--icen-font-mono);
   font-size: 11px;
-  color: var(--token-text);
+  color: var(--icen-token-text);
 }
-.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 {
+.icen-kb-field > .icen-kb-field-label {
   font-size: 11.5px;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
-.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));
+  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);
+  color: var(--icen-token-text-muted);
   cursor: pointer;
   user-select: none;
 }
-.kb-segment-clean-item input {
-  accent-color: var(--token-accent);
-  margin: 0;
-}
+.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);
+  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 {
+.icen-kb-segment-stat {
   font-size: 12.5px;
-  color: var(--token-text);
+  color: var(--icen-token-text);
 }
-.kb-segment-blocks {
+.icen-kb-segment-blocks {
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -544,355 +525,358 @@
   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;
   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;
 }
-.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);
+.icen-kb-segment-block-text:focus-visible {
+  outline: 2px solid var(--icen-token-accent);
   outline-offset: 1px;
 }
 
 /* ══════════════ 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); }
-
-.kb-connector-head {
+  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-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 {
+.icen-kb-connector-name {
   font-size: 13px;
   font-weight: 600;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.kb-connector-sub {
+.icen-kb-connector-sub {
   font-size: 11.5px;
-  color: var(--token-text-faint);
+  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);
   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);
+  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;
+  min-inline-size: 0;
+  margin-inline-start: auto;
   font-size: 12px;
-  color: var(--token-text);
-  text-align: right;
+  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 {
+.icen-kb-connector-actions .icen-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;
 }
-.kb-metadata-th {
+.icen-kb-metadata-th {
   padding: 4px 8px;
-  border-bottom: 1px solid var(--token-line-soft);
+  border-bottom: 1px solid var(--icen-token-line-soft);
   font-size: 11.5px;
   font-weight: 500;
-  color: var(--token-text-faint);
-  text-align: left;
+  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 {
+.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(--token-line-soft);
+  border-bottom: 1px solid var(--icen-token-line-soft);
   font-size: 12.5px;
   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:hover > td {
+  background: var(--icen-token-bg-soft);
 }
-.kb-metadata-key {
-  font-family: var(--font-mono, ui-monospace, monospace);
+.icen-kb-metadata-key {
+  font-family: var(--icen-font-mono);
   font-size: 12px;
-  color: var(--token-text);
+  color: var(--icen-token-text);
 }
-.kb-metadata-key-label {
+.icen-kb-metadata-key-label {
   font-size: 11px;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
-.kb-metadata-builtin-flag {
-  margin-left: 6px;
+.icen-kb-metadata-builtin-flag {
+  margin-inline-start: 6px;
   font-size: 10.5px;
-  color: var(--token-text-faint);
-  border: 1px solid var(--token-line-soft);
-  border-radius: 999px;
+  color: var(--icen-token-text-faint);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-full);
   padding: 1px 6px;
 }
-.kb-metadata-type {
-  font-family: var(--font-mono, ui-monospace, monospace);
+.icen-kb-metadata-type {
+  font-family: var(--icen-font-mono);
 }
-.kb-metadata-readonly {
-  color: var(--token-text-muted);
+.icen-kb-metadata-readonly {
+  color: var(--icen-token-text-muted);
 }
-.kb-metadata-value .kb-input {
-  width: 100%;
+.icen-kb-metadata-value .icen-kb-input {
+  inline-size: 100%;
 }
-.kb-metadata-ops {
-  text-align: right;
+.icen-kb-metadata-ops {
+  text-align: end;
 }
-.kb-metadata-ops .kb-btn {
+.icen-kb-metadata-ops .icen-kb-btn {
   padding: 1px 8px;
   font-size: 11.5px;
 }
-.kb-metadata-empty {
-  padding: 18px 8px !important;
+.icen-kb-metadata-empty {
+  padding: 18px 8px !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */
   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;
 }
-.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;
 }
-.kb-qa-th {
+.icen-kb-qa-th {
   padding: 4px 8px;
-  border-bottom: 1px solid var(--token-line-soft);
+  border-bottom: 1px solid var(--icen-token-line-soft);
   font-size: 11.5px;
   font-weight: 500;
-  color: var(--token-text-faint);
-  text-align: left;
+  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 {
+.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(--token-line-soft);
+  border-bottom: 1px solid var(--icen-token-line-soft);
   font-size: 12.5px;
   vertical-align: top;
 }
-.kb-qa-row:hover > td {
-  background: var(--token-bg-soft);
+.icen-kb-qa-row:hover > td {
+  background: var(--icen-token-bg-soft);
 }
 /* 行内编辑格：静默，focus 内描边 accent */
-.kb-qa-q,
-.kb-qa-a {
+.icen-kb-qa-q,
+.icen-kb-qa-a {
   outline: none;
-  border-radius: var(--radius-sm, 6px);
+  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;
 }
-.kb-qa-q:focus,
-.kb-qa-a:focus {
-  box-shadow: inset 0 0 0 1px var(--token-accent);
+.icen-kb-qa-q:focus,
+.icen-kb-qa-a:focus {
+  box-shadow: inset 0 0 0 1px var(--icen-token-accent);
 }
-.kb-qa-q:empty::before,
-.kb-qa-a:empty::before {
+.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 {
+.icen-kb-qa-ops .icen-kb-btn {
   padding: 1px 8px;
   font-size: 11.5px;
 }
-.kb-qa-empty {
-  padding: 18px 8px !important;
+.icen-kb-qa-empty {
+  padding: 18px 8px !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */
   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: 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) {
-  .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;
   }
 }
+
+}