@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/kb-ground.css

@@ -1,14 +1,15 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — kb-ground.css（证据域：kb-citation / kb-sources / kb-passage / kb-conflict）
- * 共享原语在 kb.css（.kb-row/.kb-quote/.kb-badge/.kb-num…），本文件只做本域专属结构。
+ * 共享原语在 kb.css（.icen-kb-row/.icen-kb-quote/.icen-kb-badge/.icen-kb-num…），本文件只做本域专属结构。
  * DOM 契约见 docs/spec/kb-family.md §5.1–5.4；behaviors/kb-citation.ts 等。
  *
  * 视觉音调（spec §2 硬约束）：
- *   - 字号：标题 13px/600 · 正文 13px · 元信息 11.5px · 徽标 10.5px；数字一律 .kb-num
- *   - 节奏：行 28px（data-density="compact" 收 24px）· 区块 16px · 组内 8px
- *   - 圆角：容器 --radius-md · 行内（角标/chip）--radius-sm 或全圆
+ *   - 字号：标题 13px/600 · 正文 13px · 元信息 11px · 徽标 11px；数字一律 .icen-kb-num
+ *   - 节奏：行 28px（data-icen-density="compact" 收 24px）· 区块 16px · 组内 8px
+ *   - 圆角：容器 --icen-radius-md · 行内（角标/chip）--icen-radius-sm 或全圆
  *   - 色彩：证据域主角是 accent，但角标默认 faint 弱化、hover/激活才点亮；
- *     阴影只用 --token-shadow-overlay（不自造阴影层），z 尺只借 --z-* 标尺
+ *     阴影只用 --icen-token-shadow-overlay（不自造阴影层），z 尺只借 --icen-z-* 标尺
  *   - 动效：滑入 200ms / hover 反馈 --icen-tx-fast / 折叠 160ms；reduced-motion 全退化为瞬时
  */
 
@@ -16,21 +17,22 @@
    §5.1 kb-citation 行内引用角标
    ══════════════════════════════════════════════ */
 
-.kb-citation {
+.icen-kb-citation {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  margin: 0 1px;
-  padding: 0 3px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
+  min-inline-size: 18px;
+  min-block-size: 18px;
+  margin-block: 0;
+  margin-inline: 1px;
+  padding: 0 4px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
   background: transparent;
-  color: var(--token-text-faint);
-  font-family: var(--font-mono, ui-monospace, monospace);
+  color: var(--icen-token-text-faint);
+  font-family: var(--icen-font-mono);
   font-variant-numeric: tabular-nums;
-  font-size: 10px;
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1;
   vertical-align: 2px; /* 上标视感，与正文基线对齐 */
   cursor: pointer;
@@ -38,17 +40,28 @@
     background-color var(--icen-tx-fast);
 }
 /* hover 点亮 accent：引用是证据域主角，但默认弱化、悬停才给注意力 */
-.kb-citation:hover {
-  color: var(--token-accent);
-  border-color: color-mix(in srgb, var(--token-accent) 45%, transparent);
-  background: color-mix(in srgb, var(--token-accent) 8%, transparent);
+.icen-kb-citation:hover {
+  color: var(--icen-token-accent-text); /* 可读变体：裸 accent 叠 8% accent 底浅色仅 ~3.4:1，11px 字更需 AA */
+  border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
+  background: color-mix(in srgb, var(--icen-token-accent) 8%, transparent);
+}
+.icen-kb-citation:active {
+  border-color: color-mix(in srgb, var(--icen-token-accent) 62%, transparent);
+  background: color-mix(in srgb, var(--icen-token-accent) 14%, transparent);
 }
-.kb-citation:focus-visible {
+.icen-kb-citation:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
+/* 触屏抬触达面（角标是证据域主交互，18px 打不中） */
+@media (pointer: coarse) {
+  .icen-kb-citation {
+    min-inline-size: 24px;
+    min-block-size: 24px;
+  }
+}
 /* 无效编号：灰显不可点（不信任模型生成编号的降级态） */
-.kb-citation.is-dead {
+.icen-kb-citation.is-dead {
   pointer-events: none;
   cursor: default;
   opacity: 0.5;
@@ -58,63 +71,65 @@
 
 /* ── hover 引用卡（openPopover portal 挂 body；left/top/width 由 popover 布局引擎内联） ── */
 
-.kb-citation-card {
+.icen-kb-citation-card {
   position: fixed;
-  z-index: var(--z-popover);
+  z-index: var(--icen-z-popover);
   display: flex;
   flex-direction: column;
   gap: 8px;
   max-width: 340px;
-  padding: 10px 12px;
-  background: var(--token-surface);
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md);
-  box-shadow: var(--token-shadow-overlay);
+  padding: 12px;
+  background: var(--icen-token-surface-raised);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  box-shadow: var(--icen-token-shadow-elevated);
   animation: kb-ground-card-in var(--icen-tx-fast);
 }
 @keyframes kb-ground-card-in {
   from { opacity: 0; transform: translateY(2px); }
   to { opacity: 1; transform: none; }
 }
-.kb-citation-card-head {
+.icen-kb-citation-card-head {
   display: flex;
   align-items: center;
   gap: 6px;
   min-width: 0;
 }
-.kb-citation-card-icon {
+.icen-kb-citation-card-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   width: 14px;
   height: 14px;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
 }
-.kb-citation-card-icon > svg { width: 14px; height: 14px; }
-.kb-citation-card-title {
+.icen-kb-citation-card-icon > svg { width: 14px; height: 14px; }
+.icen-kb-citation-card-title {
   min-width: 0;
-  font-size: 13px;
+  font-size: var(--icen-density-font-size-md);
   font-weight: 600;
-  color: var(--token-text);
+  line-height: 1.35;
+  color: var(--icen-token-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kb-citation-card-domain {
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: 11px;
-  color: var(--token-text-faint);
+.icen-kb-citation-card-domain {
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-density-font-size-xs);
+  letter-spacing: 0.3px;
+  color: var(--icen-token-text-faint);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 /* 受限来源：citedText 视觉打码（原文未下发，blur 只是提示层） */
-.kb-citation-card-quote.kb-citation-card-masked {
+.icen-kb-citation-card-quote.icen-kb-citation-card-masked {
   filter: blur(4px);
   user-select: none;
 }
-.kb-citation-card-badges {
+.icen-kb-citation-card-badges {
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -125,27 +140,27 @@
    §5.2 kb-sources 来源列表（--row 横排 / --rail 纵列）
    ══════════════════════════════════════════════ */
 
-.kb-sources {
+.icen-kb-sources {
   display: flex;
   gap: 8px;
   min-width: 0;
 }
 /* 答案上方横排：内容宽、可换行 */
-.kb-sources--row {
+.icen-kb-sources--row {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: stretch;
 }
 /* 侧栏纵列：整行宽。side 收进 main（kb-sources.ts rail DOM）——标题独占两行、
    meta 行与徽章行各自换行，绝不把标题挤成一行省略号再压徽章 */
-.kb-sources--rail {
+.icen-kb-sources--rail {
   flex-direction: column;
 }
-.kb-sources--rail .kb-source {
+.icen-kb-sources--rail .icen-kb-source {
   grid-template-columns: auto minmax(0, 1fr);
   align-items: flex-start;
 }
-.kb-sources--rail .kb-source-title {
+.icen-kb-sources--rail .icen-kb-source-title {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -153,200 +168,206 @@
   white-space: normal;
   overflow: hidden;
 }
-.kb-sources--rail .kb-source-sub {
+.icen-kb-sources--rail .icen-kb-source-sub {
   white-space: normal;
   word-break: break-word;
   overflow: visible;
   text-overflow: unset;
 }
-.kb-sources--rail .kb-source-main .kb-source-side {
+.icen-kb-sources--rail .icen-kb-source-main .icen-kb-source-side {
   flex-wrap: wrap;
   align-items: center;
   margin-top: 3px;
 }
 
-.kb-source {
-  --kb-source-tint: var(--token-accent);
-  position: relative;
+.icen-kb-source {
+  --kb-source-tint: var(--icen-token-accent);
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 10px;
-  min-height: 28px;
-  padding: 4px 8px 4px 10px;
+  min-height: var(--icen-density-item-height);
+  padding-block: 3px;
+  padding-inline: 8px;
   border: 1px solid transparent;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--icen-radius-sm);
   background: transparent;
   font: inherit;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast),
-    transform var(--icen-tx-fast);
+    color var(--icen-tx-fast);
+}
+.icen-kb-sources--row .icen-kb-source { inline-size: auto; }
+.icen-kb-sources--rail .icen-kb-source { inline-size: 100%; }
+/* hover 只抬底色与边框，不做位移（位移会把行从阅读节奏里抖出去）；仅可悬停设备生效 */
+@media (hover: hover) and (pointer: fine) {
+  .icen-kb-source:hover {
+    background: var(--icen-token-fill-hover);
+    border-color: var(--icen-token-line-soft);
+  }
 }
-.kb-sources--row .kb-source { width: auto; }
-.kb-sources--rail .kb-source { width: 100%; }
-/* hover 浮起（1px 上移 = 轻量层级暗示，不进阴影层） */
-.kb-source:hover {
-  background: var(--token-bg-soft);
-  border-color: var(--token-line-soft);
-  transform: translateY(-1px);
+.icen-kb-source:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-source:focus-visible {
+.icen-kb-source:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-/* 当前阅读位：左侧 2px accent 证据线（宿主或 kb-passage 锚定驱动） */
-.kb-source.is-active {
-  background: var(--token-bg-soft);
-  border-color: color-mix(in srgb, var(--kb-source-tint) 30%, transparent);
+/* 当前阅读位：持续选中底色 + 辅助信息提升（不画左侧竖条） */
+.icen-kb-source.is-active {
+  background: var(--icen-token-fill-selected);
+  border-color: color-mix(in srgb, var(--kb-source-tint) 32%, transparent);
 }
-.kb-source.is-active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 5px;
-  bottom: 5px;
-  width: 2px;
-  border-radius: 1px;
-  background: var(--kb-source-tint);
+.icen-kb-source.is-active .icen-kb-source-sub {
+  color: var(--icen-token-text-muted);
 }
 
-.kb-source-icon {
+.icen-kb-source-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   width: 16px;
   height: 16px;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
 }
-.kb-source-icon > svg { width: 14px; height: 14px; }
-.kb-source-main {
+.icen-kb-source-icon > svg { width: 14px; height: 14px; }
+.icen-kb-source-main {
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 1px;
 }
-.kb-source-title {
-  font-size: 13px;
+.icen-kb-source-title {
+  font-size: var(--icen-density-font-size-md);
   line-height: 1.4;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kb-source-sub {
-  font-size: 11.5px;
+.icen-kb-source-sub {
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1.4;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kb-source-side {
+.icen-kb-source-side {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   flex: 0 0 auto;
 }
-.kb-source-badges {
+.icen-kb-source-badges {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
 }
-.kb-source-badges .kb-dot { width: 6px; height: 6px; }
+.icen-kb-source-badges .icen-kb-dot { width: 6px; height: 6px; }
 
 /* 受限行内的申请访问按钮（行壳已降级为 role=button，嵌套合法） */
-.kb-source-request {
+.icen-kb-source-request {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex: 0 0 auto;
-  padding: 2.5px 7px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: 999px;
+  min-block-size: var(--icen-density-item-height);
+  padding-block: 0;
+  padding-inline: 12px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-full);
   background: transparent;
-  color: var(--token-text-muted);
-  font-size: 10.5px;
+  color: var(--icen-token-text-muted);
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1;
   letter-spacing: 0.3px;
+  white-space: nowrap;
   cursor: pointer;
-  transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+  transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.icen-kb-source-request:hover {
+  color: var(--icen-token-accent-text);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
+  background: var(--icen-token-fill-hover);
 }
-.kb-source-request:hover {
-  color: var(--token-accent);
-  border-color: color-mix(in srgb, var(--token-accent) 45%, transparent);
+.icen-kb-source-request:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-source-request:focus-visible {
+.icen-kb-source-request:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
 
-/* 密度 compact：行高 28 → 24 */
-[data-density='compact'] .kb-source { min-height: 24px; gap: 8px; }
-
 /* ══════════════════════════════════════════════
-   §5.3 kb-passage 原文定位抽屉（右侧 340px）
+   §5.3 kb-passage 原文定位抽屉（行内末端侧 340px，RTL 镜像到左侧）
    ══════════════════════════════════════════════ */
 
-.kb-passage {
-  --kb-passage-duration: 200ms;
+.icen-kb-passage {
+  --kb-passage-duration: var(--icen-tx-normal);
   position: fixed;
-  inset: 0 0 0 auto;
-  width: min(340px, 92vw);
-  z-index: var(--z-panel, var(--z-chrome));
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: min(340px, 92vw);
+  z-index: var(--icen-z-chrome);
   display: flex;
   flex-direction: column;
-  background: var(--token-surface);
-  border-left: 1px solid var(--token-line-soft);
-  box-shadow: var(--token-shadow-overlay);
-  transform: translateX(100%);
-  transition: transform var(--kb-passage-duration) var(--ease-out);
-}
-.kb-passage[hidden] { display: none; }
-.kb-passage.is-open { transform: translateX(0); }
+  background: var(--icen-token-surface);
+  border-inline-start: 1px solid var(--icen-token-line-soft);
+  box-shadow: var(--icen-token-shadow-overlay);
+  transform: translateX(100%); /* guard:allow-physical 隐藏位沿物理右缘滑出（LTR 抽屉侧），RTL 镜像规则翻为 translateX(-100%) */
+  transition: transform var(--kb-passage-duration);
+}
+.icen-kb-passage[hidden] { display: none; }
+.icen-kb-passage.is-open { transform: translateX(0); }
 
-.kb-passage-head {
+.icen-kb-passage-head {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--token-line-soft);
+  padding: 12px;
+  border-bottom: 1px solid var(--icen-token-line-soft);
 }
-.kb-passage-icon {
+.icen-kb-passage-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   width: 16px;
   height: 16px;
-  color: var(--token-text-muted);
+  color: var(--icen-token-text-muted);
 }
-.kb-passage-icon > svg { width: 16px; height: 16px; }
-.kb-passage-titlewrap {
+.icen-kb-passage-icon > svg { width: 16px; height: 16px; }
+.icen-kb-passage-titlewrap {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
-.kb-passage-title {
-  font-size: 13px;
+.icen-kb-passage-title {
+  font-size: var(--icen-density-font-size-md);
   font-weight: 600;
-  line-height: 1.4;
-  color: var(--token-text);
+  line-height: 1.35;
+  color: var(--icen-token-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kb-passage-loc {
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-size: 11px;
+.icen-kb-passage-loc {
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-density-font-size-xs);
   letter-spacing: 0.3px;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kb-passage-close {
+.icen-kb-passage-close {
   flex: 0 0 auto;
   width: 24px;
   height: 24px;
@@ -354,213 +375,296 @@
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--icen-radius-sm);
   background: transparent;
-  color: var(--token-text-faint);
-  font-size: 14px;
+  color: var(--icen-token-text-faint);
+  font-size: var(--icen-density-font-size-lg);
   line-height: 1;
   cursor: pointer;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.kb-passage-close:hover { color: var(--token-text); background: var(--token-bg-soft); }
-.kb-passage-close:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.icen-kb-passage-close:hover { color: var(--icen-token-text); background: var(--icen-token-fill-hover); }
+.icen-kb-passage-close:active { background: var(--icen-token-fill-pressed); }
+.icen-kb-passage-close:focus-visible { outline: none; box-shadow: var(--icen-ring); }
 
-.kb-passage-body {
+.icen-kb-passage-body {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
   padding: 12px;
-  font-size: 13px;
+  font-size: var(--icen-density-font-size-md);
   line-height: 1.7;
-  color: var(--token-text);
+  color: var(--icen-token-text);
 }
-.kb-passage-text { min-width: 0; word-break: break-word; white-space: pre-wrap; }
+.icen-kb-passage-text { min-inline-size: 0; word-break: break-word; white-space: pre-wrap; }
 /* 多命中分色 mark（.kb-passage-hit）与基础 mark 底色均由 kb.css 统一供给 */
 
-/* 上下文（默认隐藏，expand 展开；弱化为 faint 引导体） */
-.kb-passage-context {
+/* 上下文（默认隐藏，expand 展开；弱化为 faint 引导体；引导线沿 inline-start，RTL 镜像） */
+.icen-kb-passage-context {
   position: relative;
-  padding: 2px 0 2px 12px;
-  font-size: 12.5px;
+  padding-block: 2px;
+  padding-inline-start: 12px;
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1.7;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
   white-space: pre-wrap;
   word-break: break-word;
 }
-.kb-passage-context::before {
+.icen-kb-passage-context::before {
   content: '';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 4px;
   bottom: 4px;
   width: 2px;
-  border-radius: 1px;
-  background: var(--token-line-soft);
+  border-radius: 1px; /* guard:allow-radius 微构件（bar/dot/track/指示器等图形级，不属容器圆角面）  */
+  background: var(--icen-token-line-soft);
 }
-.kb-passage-context[hidden] { display: none; }
-.kb-passage.is-expanded .kb-passage-context { animation: kb-ground-card-in var(--icen-tx-fast); }
+.icen-kb-passage-context[hidden] { display: none; }
+.icen-kb-passage.is-expanded .icen-kb-passage-context { animation: kb-ground-card-in var(--icen-tx-fast); }
 
-.kb-passage-expand {
+.icen-kb-passage-expand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   align-self: flex-start;
-  padding: 2px 8px;
+  min-block-size: var(--icen-density-item-height);
+  padding-block: 2px;
+  padding-inline: 8px;
   border: none;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--icen-radius-sm);
   background: transparent;
-  color: var(--token-text-muted);
-  font-size: 11.5px;
+  color: var(--icen-token-text-muted);
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.4;
   cursor: pointer;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.kb-passage-expand:hover { color: var(--token-text); background: var(--token-bg-soft); }
-.kb-passage-expand:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.icen-kb-passage-expand:hover { color: var(--icen-token-text); background: var(--icen-token-fill-hover); }
+.icen-kb-passage-expand:active { background: var(--icen-token-fill-pressed); }
+.icen-kb-passage-expand:focus-visible { outline: none; box-shadow: var(--icen-ring); }
 
 /* 受限正文：citedText 打码 + 申请访问 */
-.kb-passage-masked {
+.icen-kb-passage-masked {
   filter: blur(4px);
   user-select: none;
-  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;
 }
-.kb-passage-request {
+.icen-kb-passage-request {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  justify-content: center;
+  gap: 6px;
   align-self: flex-start;
+  min-block-size: var(--icen-density-item-height);
   margin-top: 4px;
-  padding: 4px 10px;
-  border: 1px solid color-mix(in srgb, var(--token-accent) 45%, transparent);
-  border-radius: 999px;
-  background: var(--token-accent-subtle, transparent);
-  color: var(--token-accent);
-  font-size: 11.5px;
+  padding-block: 3px;
+  padding-inline: 12px;
+  border: 1px solid color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-accent-text);
+  font-size: var(--icen-density-font-size-xs);
+  font-weight: 500;
+  line-height: 1.35;
   cursor: pointer;
   transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
-.kb-passage-request > svg { width: 12px; height: 12px; }
-.kb-passage-request:hover {
-  border-color: var(--token-accent);
+.icen-kb-passage-request > svg { width: 14px; height: 14px; }
+.icen-kb-passage-request:hover {
+  border-color: var(--icen-token-accent);
+  background: color-mix(in srgb, var(--icen-token-accent) 14%, transparent);
 }
-.kb-passage-request:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.icen-kb-passage-request:active {
+  background: color-mix(in srgb, var(--icen-token-accent) 18%, transparent);
+}
+.icen-kb-passage-request:focus-visible { outline: none; box-shadow: var(--icen-ring); }
 
-/* 跳转锚定宿主（[data-kb-loc]）：命中项 .is-current 高亮 */
-[data-kb-loc].is-current {
-  background: color-mix(in srgb, var(--token-accent) 10%, transparent);
-  box-shadow: inset 2px 0 0 var(--token-accent);
-  border-radius: var(--radius-sm, 6px);
+/* 跳转锚定宿主（[data-icen-kb-loc]）：命中项 .is-current 高亮 */
+[data-icen-kb-loc].is-current {
+  background: var(--icen-token-fill-selected);
+  border-radius: var(--icen-radius-sm);
 }
 
 /* ══════════════════════════════════════════════
    §5.4 kb-conflict 来源冲突组
    ══════════════════════════════════════════════ */
 
-.kb-conflict {
+.icen-kb-conflict {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 10px 12px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md);
-  background: var(--token-bg-soft);
+  padding: 12px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-bg-soft);
 }
-.kb-conflict + .kb-conflict { margin-top: 16px; } /* 区块间距纪律 */
-.kb-conflict-claim {
+.icen-kb-conflict + .icen-kb-conflict { margin-top: 16px; } /* 区块间距纪律 */
+.icen-kb-conflict-claim {
   display: flex;
   align-items: baseline;
   gap: 8px;
-  font-size: 13px;
+  font-size: var(--icen-density-font-size-md);
   font-weight: 600;
-  color: var(--token-text);
+  line-height: 1.4;
+  color: var(--icen-token-text);
 }
-.kb-conflict-claim .kb-dot { align-self: center; }
-.kb-conflict-versions {
+.icen-kb-conflict-claim .icen-kb-dot { align-self: center; }
+.icen-kb-conflict-versions {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 8px;
 }
 
-.kb-conflict-ver {
+.icen-kb-conflict-ver {
   flex: 1 1 160px;
-  min-width: 0;
+  min-inline-size: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 8px 10px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md);
-  background: var(--token-surface);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-surface-raised);
+  box-shadow: var(--icen-token-shadow-card);
   font: inherit;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition: border-color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
 /* is-current：最新/官方版本，accent 高亮（唯一主角） */
-.kb-conflict-ver.is-current {
-  border-color: color-mix(in srgb, var(--token-accent) 45%, transparent);
-  background: color-mix(in srgb, var(--token-accent) 6%, var(--token-surface));
+.icen-kb-conflict-ver.is-current {
+  border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
+  background: var(--icen-token-fill-selected);
 }
 /* 其余版本：faded 退后 */
-.kb-conflict-ver.is-older { opacity: 0.62; }
-.kb-conflict-ver:hover {
-  border-color: color-mix(in srgb, var(--token-accent) 45%, transparent);
+.icen-kb-conflict-ver.is-older { /* 不降透明：透明会折进文字对比度；旧版语义由 muted 文案承担 */ }
+.icen-kb-conflict-ver:hover {
+  border-color: var(--icen-token-line-strong);
+  background: var(--icen-token-fill-hover);
+}
+/* 选中版本悬停时仍保持 accent 底色，不退化成普通 hover */
+.icen-kb-conflict-ver.is-current:hover {
+  border-color: color-mix(in srgb, var(--icen-token-accent) 62%, transparent);
+  background: color-mix(in srgb, var(--icen-token-accent) 16%, transparent);
+}
+.icen-kb-conflict-ver.is-older:hover { /* hover 反馈由底色承担 */ }
+.icen-kb-conflict-ver:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-conflict-ver.is-older:hover { opacity: 1; }
-.kb-conflict-ver:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.icen-kb-conflict-ver:focus-visible { outline: none; box-shadow: var(--icen-ring); }
 
-.kb-conflict-ver-head {
+.icen-kb-conflict-ver-head {
   display: flex;
   align-items: center;
   gap: 8px;
-  min-width: 0;
+  min-inline-size: 0;
 }
-.kb-conflict-ver-date { font-size: 11px; }
-.kb-conflict-ver-badges {
+.icen-kb-conflict-ver-date { font-size: var(--icen-density-font-size-xs); color: var(--icen-token-text); }
+.icen-kb-conflict-ver-badges {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
-.kb-conflict-ver-badges .kb-dot { width: 6px; height: 6px; }
-.kb-conflict-ver-title {
-  font-size: 12.5px;
+.icen-kb-conflict-ver-badges .icen-kb-dot { width: 6px; height: 6px; }
+.icen-kb-conflict-ver-title {
+  font-size: var(--icen-density-font-size-md);
   line-height: 1.4;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kb-conflict-ver-sub {
-  font-size: 11.5px;
+.icen-kb-conflict-ver-sub {
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1.4;
-  color: var(--token-text-faint);
+  /* 卡片底色是 raised（比页面暗一档），muted 在 11–12px 下会擦到 AA 边界；
+     用正文色保证可读，层级交给 13/12 字号与标题字重。 */
+  color: var(--icen-token-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* ══════════════════════════════════════════════
+   密度：compact 档统一收紧内距，不缩可读字号
+   ══════════════════════════════════════════════ */
+
+[data-icen-density='compact'] .icen-kb-source {
+  min-block-size: 24px;
+  gap: 8px;
+  padding-block: 2px;
+}
+[data-icen-density='compact'] .icen-kb-citation-card {
+  gap: 6px;
+  padding: 10px;
+}
+[data-icen-density='compact'] .icen-kb-passage-head { padding-block: 8px; }
+[data-icen-density='compact'] .icen-kb-passage-body { gap: 8px; padding: 10px; }
+[data-icen-density='compact'] .icen-kb-conflict { gap: 6px; padding: 8px 10px; }
+[data-icen-density='compact'] .icen-kb-conflict-ver { gap: 3px; padding: 6px 8px; }
+
 /* ══════════════════════════════════════════════
    动效守卫（reduced-motion：全退化为瞬时）
    ══════════════════════════════════════════════ */
 
 @media (prefers-reduced-motion: reduce) {
-  .kb-citation,
-  .kb-source,
-  .kb-source-request,
-  .kb-passage,
-  .kb-passage-close,
-  .kb-passage-expand,
-  .kb-passage-request,
-  .kb-conflict-ver {
+  .icen-kb-citation,
+  .icen-kb-source,
+  .icen-kb-source-request,
+  .icen-kb-passage,
+  .icen-kb-passage-close,
+  .icen-kb-passage-expand,
+  .icen-kb-passage-request,
+  .icen-kb-conflict-ver {
     transition: none;
   }
-  .kb-citation-card,
-  .kb-passage.is-expanded .kb-passage-context {
+  .icen-kb-citation-card,
+  .icen-kb-passage.is-expanded .icen-kb-passage-context {
     animation: none;
   }
 }
+
+/* ── RTL：kb-passage 抽屉隐藏位镜像（抽屉改贴行内末端左侧，滑出方向同步翻转） ── */
+:is([dir='rtl']) .icen-kb-passage { transform: translateX(-100%); }
+:is([dir='rtl']) .icen-kb-passage.is-open { transform: translateX(0); }
+
+/* ── 高对比模式：证据边界与选中态不能只靠底色差 ── */
+@media (forced-colors: active) {
+  .icen-kb-citation,
+  .icen-kb-source,
+  .icen-kb-source-request,
+  .icen-kb-conflict-ver { border-color: CanvasText; }
+  .icen-kb-citation-card,
+  .icen-kb-passage { border-color: CanvasText; background: Canvas; }
+  .icen-kb-source.is-active,
+  [data-icen-kb-loc].is-current { background: Highlight; color: HighlightText; }
+  .icen-kb-source.is-active .icen-kb-source-title,
+  .icen-kb-source.is-active .icen-kb-source-sub { color: HighlightText; }
+  .icen-kb-conflict-ver.is-current { border-color: Highlight; background: Canvas; }
+  .icen-kb-passage-request { border-color: Highlight; background: Canvas; }
+  .icen-kb-source-badges .icen-kb-dot,
+  .icen-kb-conflict-ver-badges .icen-kb-dot { forced-color-adjust: none; } /* 状态点保留语义色 */
+  .icen-kb-citation:focus-visible,
+  .icen-kb-source:focus-visible,
+  .icen-kb-source-request:focus-visible,
+  .icen-kb-passage-close:focus-visible,
+  .icen-kb-passage-expand:focus-visible,
+  .icen-kb-passage-request:focus-visible,
+  .icen-kb-conflict-ver:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+    box-shadow: none;
+  }
+}
+
+}