@icen.ai/ui 0.9.0 → 0.11.0

package/dist/components/kb-data.css

@@ -1,45 +1,48 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — kb-data.css（问数域：kb-sql / kb-answer / kb-clarify / kb-explain）
- * 共享原语在 kb.css（.kb-row/.kb-num/.kb-chip/.kb-badge/.kb-fold-head/.kb-notice…），
+ * 共享原语在 kb.css（.icen-kb-row/.icen-kb-num/.icen-kb-chip/.icen-kb-badge/.icen-kb-fold-head/.icen-kb-notice…），
  * 本文件只做本域专属结构。DOM 契约见 docs/spec/kb-family.md §5.15–5.18 与各 behavior 头注释。
  *
  * 域内色彩纪律（spec §2 数字域）：
- *   - 数字本身永远中性色（.kb-num / 结果表右对齐列），success 只表达「可信资产」（认证徽章）；
+ *   - 数字本身永远中性色（.icen-kb-num / 结果表右对齐列），success 只表达「可信资产」（认证徽章）；
  *   - SQL 着色是语法层级信号不是装饰：全部 color-mix 半透明降饱和（kw=accent /
  *     str=success / num=warning / fn=info / cmt=faint）；
  *   - 修正卡 = warning 边框（告警语义）；权限提示不可关闭（诚实呈现，无 dismiss 样式钩子）。
- * 只消费 --token-* / --radius-* / --density-* / --font-mono；明暗自适应走 token 与 .dark 档。
+ * 只消费 --icen-token-* / --icen-radius-* / --icen-density-* / --icen-font-mono；明暗自适应走 token 与 [data-icen-theme="dark"] 档。
  */
 
 /* ═══════════════════ kb-sql · 生成 SQL 卡片 ═══════════════════ */
 
-.kb-sql {
+.icen-kb-sql {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0;
   padding: 10px 12px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-md, 10px);
-  background: var(--token-surface);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-surface);
 }
 
-.kb-sql-head {
+.icen-kb-sql-head {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-  min-height: 24px;
+  min-height: var(--icen-density-item-height);
 }
 
-.kb-sql-title {
-  font-size: 13px;
+.icen-kb-sql-title {
+  font-size: var(--icen-density-font-size-md);
   font-weight: 600;
-  color: var(--token-text);
+  line-height: 1.4;
+  letter-spacing: var(--icen-letter-spacing-heading);
+  color: var(--icen-token-text);
   white-space: nowrap;
 }
 
-.kb-sql-tables {
+.icen-kb-sql-tables {
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -47,603 +50,716 @@
   min-width: 0;
 }
 
-.kb-sql-actions {
+.icen-kb-sql-actions {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  margin-left: auto;
+  margin-inline-start: auto;
   flex: 0 0 auto;
 }
 
 /* ghost 图标钮（复制/编辑/应用/确认共用底座） */
-.kb-sql-btn {
+.icen-kb-sql-btn {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  min-height: 22px;
-  padding: 2px 8px;
+  gap: 6px;
+  height: var(--icen-density-item-height);
+  padding: 0 12px;
   font: inherit;
-  font-size: 11.5px;
-  color: var(--token-text-muted);
+  font-size: var(--icen-density-font-size-md);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--icen-token-text-muted);
   background: transparent;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
   cursor: pointer;
   white-space: nowrap;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
-.kb-sql-btn:hover:not(:disabled) {
-  color: var(--token-text);
-  border-color: var(--token-line);
-  background: var(--token-bg-soft);
+.icen-kb-sql-btn:hover:not(:disabled) {
+  color: var(--icen-token-text);
+  border-color: var(--icen-token-line);
+  background: var(--icen-token-fill-hover);
 }
-.kb-sql-btn:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: 1px;
+.icen-kb-sql-btn:active:not(:disabled) {
+  background: var(--icen-token-fill-pressed);
+  border-color: var(--icen-token-line-strong);
 }
-.kb-sql-btn:disabled {
-  opacity: 0.55;
-  cursor: default;
+.icen-kb-sql-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.kb-sql-btn-icon,
-.kb-sql-btn-icon svg {
-  width: 12px;
-  height: 12px;
+.icen-kb-sql-btn:disabled {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
+}
+.icen-kb-sql-btn-icon,
+.icen-kb-sql-btn-icon svg {
+  width: 14px;
+  height: 14px;
   flex: 0 0 auto;
 }
-.kb-sql-btn--run {
-  color: var(--token-accent);
-  border-color: color-mix(in srgb, var(--token-accent) 45%, transparent);
+.icen-kb-sql-btn--run {
+  color: var(--icen-token-accent);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
+}
+.icen-kb-sql-btn--run:hover:not(:disabled) {
+  color: var(--icen-token-accent);
+  border-color: var(--icen-token-accent);
+  background: var(--icen-token-accent-subtle);
 }
-.kb-sql-btn--run:hover:not(:disabled) {
-  color: var(--token-accent);
-  border-color: var(--token-accent);
-  background: var(--token-accent-subtle, transparent);
+.icen-kb-sql-btn--run:active:not(:disabled) {
+  background: color-mix(in srgb, var(--icen-token-accent) 16%, transparent);
 }
 /* 修正卡内的主行动（一屏一个 accent 级操作：此处告警色承载） */
-.kb-sql-btn--apply {
-  color: var(--token-warning);
-  border-color: color-mix(in srgb, var(--token-warning) 45%, transparent);
-  background: var(--token-warning-muted, transparent);
+.icen-kb-sql-btn--apply {
+  color: var(--icen-token-warning);
+  border-color: color-mix(in srgb, var(--icen-token-warning) 45%, transparent);
+  background: var(--icen-token-warning-muted);
+}
+.icen-kb-sql-btn--apply:hover:not(:disabled) {
+  color: var(--icen-token-warning);
+  border-color: var(--icen-token-warning);
+  background: color-mix(in srgb, var(--icen-token-warning) 12%, transparent);
 }
-.kb-sql-btn--apply:hover:not(:disabled) {
-  color: var(--token-warning);
-  border-color: var(--token-warning);
+.icen-kb-sql-btn--apply:active:not(:disabled) {
+  background: color-mix(in srgb, var(--icen-token-warning) 18%, transparent);
 }
 
-/* SQL 码块：浅色 bg-soft / 深色更深一档（.dark 类，与 tokens 同机制） */
-.kb-sql-code {
+/* SQL 码块：浅色 bg-soft / 深色降到画布层（[data-icen-theme="dark"] 类，与 tokens 同机制） */
+.icen-kb-sql-code {
   margin: 0;
   padding: 10px 12px;
-  background: var(--token-bg-soft);
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: 12px;
-  line-height: 1.65;
-  color: var(--token-text);
+  background: var(--icen-token-bg-soft);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.7;
+  color: var(--icen-token-text);
   white-space: pre;
   overflow: auto;
+  overscroll-behavior: contain;
   max-height: 320px;
   tab-size: 2;
 }
-.dark .kb-sql-code {
-  background: color-mix(in srgb, var(--token-bg) 85%, black);
-  border-color: color-mix(in srgb, var(--token-line-soft) 70%, transparent);
+[data-icen-theme="dark"] .icen-kb-sql-code {
+  background: var(--icen-token-bg);
+  border-color: color-mix(in srgb, var(--icen-token-line-soft) 70%, transparent);
 }
 
 /* 语法 token：color-mix 半透明降饱和（语法层级，非装饰） */
-.kb-sql-tok--kw  { color: color-mix(in srgb, var(--token-accent) 85%, transparent); }
-.kb-sql-tok--str { color: color-mix(in srgb, var(--token-success) 82%, transparent); }
-.kb-sql-tok--num { color: color-mix(in srgb, var(--token-warning) 85%, transparent); }
-.kb-sql-tok--fn  { color: color-mix(in srgb, var(--token-info) 88%, transparent); }
-.kb-sql-tok--cmt { color: color-mix(in srgb, var(--token-text-faint) 72%, transparent); font-style: italic; }
+.icen-kb-sql-tok--kw  { color: var(--icen-token-accent-text); }
+.icen-kb-sql-tok--str { color: color-mix(in srgb, var(--icen-token-success) 82%, transparent); }
+.icen-kb-sql-tok--num { color: color-mix(in srgb, var(--icen-token-warning) 50%, var(--icen-token-text)); }
+.icen-kb-sql-tok--fn  { color: var(--icen-token-info); }
+.icen-kb-sql-tok--cmt { color: var(--icen-token-text-muted); font-style: italic; }
 
 /* 修正卡（warning 边框：「修复已就绪」心智） */
-.kb-sql-fix {
+.icen-kb-sql-fix {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 8px 10px;
-  border: 1px solid color-mix(in srgb, var(--token-warning) 45%, transparent);
-  border-radius: var(--radius-sm, 6px);
-  background: color-mix(in srgb, var(--token-warning) 5%, transparent);
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--icen-token-warning) 45%, transparent);
+  border-radius: var(--icen-radius-sm);
+  background: color-mix(in srgb, var(--icen-token-warning) 5%, transparent);
 }
-.kb-sql-fix-head {
+.icen-kb-sql-fix-head {
   display: flex;
   align-items: center;
   gap: 8px;
+  min-height: var(--icen-density-item-height);
   flex-wrap: wrap;
 }
-.kb-sql-fix-title {
+.icen-kb-sql-fix-title {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: 12px;
-  color: var(--token-warning);
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.5;
+  color: var(--icen-token-warning);
 }
-.kb-sql-fix-title svg {
-  width: 13px;
-  height: 13px;
+.icen-kb-sql-fix-title svg {
+  width: 14px;
+  height: 14px;
   flex: 0 0 auto;
 }
-.kb-sql-fix-title + .kb-sql-btn,
-.kb-sql-fix-head .kb-sql-btn {
-  margin-left: auto;
+.icen-kb-sql-fix-title + .icen-kb-sql-btn,
+.icen-kb-sql-fix-head .icen-kb-sql-btn {
+  margin-inline-start: auto;
 }
-.kb-sql-fix-diff {
-  min-width: 0;
-  border-radius: var(--radius-sm, 6px);
+.icen-kb-sql-fix-diff {
+  min-inline-size: 0;
+  border-radius: var(--icen-radius-sm);
   overflow: hidden;
 }
-.kb-sql-fix-diff .ai-diff-file {
-  border: 1px solid var(--token-line-soft);
+.icen-kb-sql-fix-diff .icen-ai-diff-file {
+  border: 1px solid var(--icen-token-line-soft);
 }
 
 /* 编辑态：pre ↔ textarea 同尺寸心智（mono） */
-.kb-sql-editor {
+.icen-kb-sql-editor {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-.kb-sql-editor[hidden] {
+.icen-kb-sql-editor[hidden] {
   display: none;
 }
-.kb-sql-textarea {
+.icen-kb-sql-textarea {
   width: 100%;
   min-height: 132px;
   padding: 10px 12px;
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: 12px;
-  line-height: 1.65;
-  color: var(--token-text);
-  background: var(--token-bg-soft);
-  border: 1px solid var(--token-line);
-  border-radius: var(--radius-sm, 6px);
+  font-family: var(--icen-font-mono);
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.7;
+  color: var(--icen-token-text);
+  background: var(--icen-token-bg-soft);
+  border: 1px solid var(--icen-token-line);
+  border-radius: var(--icen-radius-sm);
   resize: vertical;
   tab-size: 2;
 }
-.kb-sql-textarea:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -1px;
+.icen-kb-sql-textarea:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.kb-sql-editor-actions {
+.icen-kb-sql-editor-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
 }
-.kb-sql.is-editing .kb-sql-fix {
+.icen-kb-sql.is-editing .icen-kb-sql-fix {
   display: none; /* 编辑当前 SQL 时隐藏旧版修复对比，避免双修离心 */
 }
 
 /* ═══════════════════ kb-clarify · 澄清反问卡 ═══════════════════ */
 
-.kb-clarify {
+.icen-kb-clarify {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 10px 12px;
-  border: 1px dashed var(--token-line-dashed, var(--token-line-soft));
-  border-radius: var(--radius-sm, 6px);
-  background: var(--token-bg-soft);
+  border: 1px dashed var(--icen-token-line-dashed);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-bg-soft);
 }
-.kb-clarify.is-answered {
+.icen-kb-clarify.is-answered {
   border-style: solid;
-  border-color: color-mix(in srgb, var(--token-accent) 30%, transparent);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
 }
-.kb-clarify-q {
+.icen-kb-clarify-q {
   display: flex;
   align-items: flex-start;
   gap: 6px;
-  font-size: 13px;
-  color: var(--token-text);
-  line-height: 1.6;
+  font-size: var(--icen-density-font-size-md);
+  line-height: 1.65;
+  color: var(--icen-token-text);
 }
-.kb-clarify-qicon,
-.kb-clarify-qicon svg {
+.icen-kb-clarify-qicon,
+.icen-kb-clarify-qicon svg {
   width: 14px;
   height: 14px;
   flex: 0 0 auto;
   margin-top: 2px;
-  color: var(--token-accent);
+  color: var(--icen-token-accent);
 }
-.kb-clarify-qtext {
+.icen-kb-clarify-qtext {
   min-width: 0;
 }
-.kb-clarify-opts {
+.icen-kb-clarify-opts {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }
-.kb-clarify-opt {
+.icen-kb-clarify-opt {
   font: inherit;
-  font-size: 12px;
-  min-height: 24px;
-  padding: 3px 12px;
-  color: var(--token-text-muted);
-  background: var(--token-surface);
-  border: 1px solid var(--token-line-soft);
-  border-radius: 999px;
+  font-size: var(--icen-density-font-size-md);
+  font-weight: 500;
+  min-height: var(--icen-density-item-height);
+  padding: 0 12px;
+  color: var(--icen-token-text-muted);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-full);
   cursor: pointer;
-  transition: color 0.16s ease-out, border-color 0.16s ease-out, background 0.16s ease-out;
+  transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.kb-clarify-opt:hover:not(:disabled) {
-  color: var(--token-text);
-  border-color: color-mix(in srgb, var(--token-accent) 45%, transparent);
+.icen-kb-clarify-opt:hover:not(:disabled) {
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-hover);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
 }
-.kb-clarify-opt:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: 1px;
+.icen-kb-clarify-opt:active:not(:disabled):not(.is-picked) {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-clarify-opt.is-picked {
-  color: var(--token-accent);
-  border-color: color-mix(in srgb, var(--token-accent) 55%, transparent);
-  background: var(--token-accent-subtle, transparent);
+.icen-kb-clarify-opt:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.kb-clarify-opt:disabled {
-  opacity: 0.55;
-  cursor: default;
+.icen-kb-clarify-opt.is-picked {
+  color: var(--icen-token-accent);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 55%, transparent);
+  background: var(--icen-token-accent-subtle);
 }
-.kb-clarify-resolved {
-  font-size: 12px;
-  color: var(--token-text-muted);
+.icen-kb-clarify-opt:disabled {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
 }
-.kb-clarify-picked {
+.icen-kb-clarify-resolved {
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.5;
+  color: var(--icen-token-text-muted);
+}
+.icen-kb-clarify-picked {
   font-weight: 600;
-  color: var(--token-text);
+  color: var(--icen-token-text);
 }
-.kb-clarify-reason {
-  font-size: 11.5px;
-  color: var(--token-text-faint);
+.icen-kb-clarify-reason {
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.5;
+  color: var(--icen-token-text-faint);
 }
 
 /* ═══════════════════ kb-explain · 口径解释折叠 ═══════════════════ */
 
-.kb-explain {
+.icen-kb-explain {
   min-width: 0;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
-  background: var(--token-bg-soft);
-  overflow: hidden;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-bg-soft);
 }
-.kb-explain-head {
+.icen-kb-explain-head {
   border-radius: 0;
 }
-.kb-explain-head:hover {
-  border-radius: var(--radius-sm, 6px);
+.icen-kb-explain-head:hover {
+  border-radius: calc(var(--icen-radius-md) - 1px);
 }
-.kb-explain-title {
+.icen-kb-explain-title {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kb-explain-body {
+.icen-kb-explain-body {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 4px 10px 10px 28px;
+  padding-block: 6px 12px;
+  padding-inline: 12px 28px;
 }
-.kb-explain-group {
+.icen-kb-explain-group {
   display: flex;
   align-items: baseline;
   gap: 6px;
   flex-wrap: wrap;
 }
-.kb-explain-group-label {
+.icen-kb-explain-group-label {
   flex: 0 0 auto;
-  min-width: 2.5em;
-  font-size: 11px;
-  color: var(--token-text-faint);
+  min-inline-size: 2.5em;
+  font-size: var(--icen-density-font-size-xs);
+  letter-spacing: .3px;
+  color: var(--icen-token-text-faint);
 }
-.kb-explain-metrics {
+.icen-kb-explain-metrics {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding-top: 8px;
-  border-top: 1px dashed var(--token-line-dashed, var(--token-line-soft));
+  border-top: 1px dashed var(--icen-token-line-dashed);
 }
-.kb-explain-metric {
+.icen-kb-explain-metric {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
-  font-size: 12.5px;
+  font-size: var(--icen-density-font-size-md);
+  line-height: 1.5;
 }
-.kb-explain-metric-name {
-  color: var(--token-text);
+.icen-kb-explain-metric-name {
+  color: var(--icen-token-text);
   font-weight: 500;
 }
-.kb-explain-metric-ref {
-  font-size: 11.5px;
-  color: var(--token-accent);
+.icen-kb-explain-metric-ref {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-accent);
   text-decoration: none;
-  border-bottom: 1px solid color-mix(in srgb, var(--token-accent) 35%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--icen-token-accent) 35%, transparent);
+  border-radius: var(--icen-radius-xs);
+  transition: border-color var(--icen-tx-fast), color var(--icen-tx-fast);
 }
-.kb-explain-metric-ref:hover {
-  border-bottom-color: var(--token-accent);
+.icen-kb-explain-metric-ref:hover {
+  border-bottom-color: var(--icen-token-accent);
 }
-.kb-explain-count {
+.icen-kb-explain-metric-ref:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.icen-kb-explain-count {
   flex: 0 0 auto;
 }
 
 /* ═══════════════════ kb-answer · 答案组合容器 ═══════════════════ */
 
-.kb-answer {
+.icen-kb-answer {
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 0;
-  font-size: 13px;
+  font-size: var(--icen-density-font-size-md);
 }
 
 /* 徽章区 */
-.kb-answer-badges {
+.icen-kb-answer-badges {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
-.kb-verified {
+.icen-kb-verified {
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  min-height: var(--icen-density-item-height);
   flex-wrap: wrap;
   padding: 0;
   font: inherit;
   background: none;
   border: none;
+  border-radius: var(--icen-radius-sm);
   cursor: pointer;
-  text-align: left;
+  text-align: start;
 }
-.kb-verified:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: 3px;
-  border-radius: var(--radius-sm, 6px);
+.icen-kb-verified:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.kb-verified-via {
-  font-size: 11.5px;
-  color: var(--token-text-muted);
+.icen-kb-verified-via {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-muted);
 }
-.kb-verified-note {
-  font-size: 11.5px;
-  color: var(--token-text-faint);
+.icen-kb-verified-note {
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
 }
-.kb-verified-hint {
-  font-size: 11px;
-  color: var(--token-text-faint);
-  border-left: 2px solid var(--token-line-soft);
-  padding-left: 8px;
+.icen-kb-verified-hint {
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.5;
+  color: var(--icen-token-text-faint);
+  border-inline-start: 2px solid var(--icen-token-line-soft);
+  padding-inline-start: 8px;
 }
-.kb-verified:hover .kb-verified-via {
-  color: var(--token-text);
+.icen-kb-verified:hover .icen-kb-verified-via {
+  color: var(--icen-token-text);
 }
 
 /* 权限提示（行级过滤 + 脱敏列；不可关闭） */
-.kb-perm {
+.icen-kb-perm {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   width: 100%;
-  padding: 4px 8px;
-  border-radius: var(--radius-sm, 6px);
-  background: var(--token-bg-soft);
-  font-size: 11.5px;
-  color: var(--token-text-muted);
-}
-.kb-perm-icon,
-.kb-perm-icon svg {
+  padding: 6px 8px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-bg-soft);
+  font-size: var(--icen-density-font-size-xs);
+  line-height: 1.5;
+  color: var(--icen-token-text-muted);
+}
+.icen-kb-perm-icon,
+.icen-kb-perm-icon svg {
   width: 12px;
   height: 12px;
   flex: 0 0 auto;
-  color: var(--token-text-faint);
+  color: var(--icen-token-text-faint);
 }
-.kb-perm-mask {
+.icen-kb-perm-mask {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
 }
-.kb-perm-mask-label {
-  color: var(--token-text-faint);
+.icen-kb-perm-mask-label {
+  color: var(--icen-token-text-faint);
 }
-.kb-perm-mask .kb-chip {
-  border-color: color-mix(in srgb, var(--token-warning) 35%, transparent);
+.icen-kb-perm-mask .icen-kb-chip {
+  border-color: color-mix(in srgb, var(--icen-token-warning) 35%, transparent);
 }
 
-/* 正文与简化引用角标（与 kb-ground 域 .kb-citation 类名一致；默认弱化，hover 点亮） */
-.kb-answer-body {
-  font-size: 13px;
+/* 正文与简化引用角标（与 kb-ground 域 .icen-kb-citation 类名一致；默认弱化，hover 点亮） */
+.icen-kb-answer-body {
+  font-size: var(--icen-density-font-size-md);
   line-height: 1.75;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
-.kb-answer-body .kb-citation {
-  font-size: 10.5px;
+.icen-kb-answer-body .icen-kb-citation {
+  font-size: var(--icen-density-font-size-xs);
   line-height: 1;
   margin: 0 1px;
   padding: 1px 5px;
-  color: var(--token-text-faint);
-  background: var(--token-bg-soft);
-  border: 1px solid var(--token-line-soft);
-  border-radius: 999px;
+  color: var(--icen-token-text-faint);
+  background: var(--icen-token-bg-soft);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-full);
   cursor: default;
-  transition: color 0.16s ease-out, border-color 0.16s ease-out;
+  transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
-.kb-answer-body .kb-citation:hover {
-  color: var(--token-accent);
-  border-color: color-mix(in srgb, var(--token-accent) 45%, transparent);
+.icen-kb-answer-body .icen-kb-citation:hover {
+  color: var(--icen-token-accent);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
 }
 
 /* 槽位 */
-.kb-answer-clarify,
-.kb-answer-explain {
+.icen-kb-answer-clarify,
+.icen-kb-answer-explain {
   min-width: 0;
 }
 
 /* 结果表：滚动容器 + sticky 表头 + 数字列右对齐（数字永远中性色） */
-.kb-answer-results {
+.icen-kb-answer-results {
   display: flex;
   flex-direction: column;
   gap: 6px;
   min-width: 0;
 }
-.kb-result-meta {
+.icen-kb-result-meta {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
 }
-.kb-result-export {
+.icen-kb-result-export {
   display: inline-flex;
   gap: 6px;
-  margin-left: auto;
+  flex-wrap: wrap;
+  margin-inline-start: auto;
 }
-.kb-result-export-btn {
+.icen-kb-result-export-btn {
   font: inherit;
-  font-size: 11.5px;
-  min-height: 22px;
-  padding: 2px 8px;
-  color: var(--token-text-muted);
+  font-size: var(--icen-density-font-size-xs);
+  font-weight: 500;
+  min-height: var(--icen-density-item-height);
+  padding: 0 12px;
+  color: var(--icen-token-text-muted);
   background: transparent;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-sm);
   cursor: pointer;
+  transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.kb-result-export-btn:hover:not(:disabled) {
-  color: var(--token-text);
-  border-color: var(--token-line);
-  background: var(--token-bg-soft);
+.icen-kb-result-export-btn:hover:not(:disabled) {
+  color: var(--icen-token-text);
+  border-color: var(--icen-token-line);
+  background: var(--icen-token-fill-hover);
 }
-.kb-result-export-btn:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: 1px;
+.icen-kb-result-export-btn:active:not(:disabled) {
+  background: var(--icen-token-fill-pressed);
+  border-color: var(--icen-token-line-strong);
 }
-.kb-result-export-btn:disabled {
-  opacity: 0.55;
-  cursor: default;
+.icen-kb-result-export-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.icen-kb-result-export-btn:disabled {
+  opacity: var(--icen-disabled-opacity);
+  cursor: not-allowed;
 }
-.kb-result-scroll {
+.icen-kb-result-scroll {
   overflow: auto;
+  overscroll-behavior: contain;
   max-height: 360px;
-  border: 1px solid var(--token-line-soft);
-  border-radius: var(--radius-sm, 6px);
-  background: var(--token-surface);
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-md);
+  background: var(--icen-token-surface);
 }
-.kb-result-table {
+.icen-kb-result-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  font-size: 12.5px;
+  font-size: var(--icen-density-font-size-md);
 }
-.kb-result-table th {
+.icen-kb-result-table th {
   position: sticky;
   top: 0;
   z-index: 1;
   padding: 6px 10px;
-  background: var(--token-bg-soft);
-  border-bottom: 1px solid var(--token-line-soft);
-  font-size: 11.5px;
+  background: var(--icen-token-bg-soft);
+  border-bottom: 1px solid var(--icen-token-line-soft);
+  font-size: var(--icen-density-font-size-xs);
   font-weight: 600;
-  color: var(--token-text-muted);
-  text-align: left;
+  letter-spacing: .3px;
+  color: var(--icen-token-text-muted);
+  text-align: start;
   white-space: nowrap;
 }
-.kb-result-table td {
+.icen-kb-result-table td {
   padding: 5px 10px;
-  border-bottom: 1px solid color-mix(in srgb, var(--token-line-soft) 50%, transparent);
-  color: var(--token-text);
+  line-height: 1.5;
+  border-bottom: 1px solid color-mix(in srgb, var(--icen-token-line-soft) 50%, transparent);
+  color: var(--icen-token-text);
   white-space: nowrap;
+  transition: background-color var(--icen-tx-fast);
 }
-.kb-result-table tbody tr:last-child td {
+.icen-kb-result-table tbody tr:last-child td {
   border-bottom: none;
 }
-.kb-result-table tbody tr:hover td {
-  background: var(--token-bg-soft);
+.icen-kb-result-table tbody tr:hover td {
+  background: var(--icen-token-fill-hover);
 }
-/* 数字列：等宽 + tabular-nums + 右对齐（值本身中性色） */
-.kb-result-table th.kb-num,
-.kb-result-table td.kb-num {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+/* 数字列：等宽 + tabular-nums + 右对齐（数字是 LTR 文种，物理右对齐惯例，RTL 不镜像） */
+.icen-kb-result-table th.icen-kb-num,
+.icen-kb-result-table td.icen-kb-num {
+  font-family: var(--icen-font-mono);
   font-variant-numeric: tabular-nums;
-  text-align: right;
+  text-align: right; /* guard:allow-physical 数字列物理右对齐惯例，RTL 不镜像 */
 }
-.kb-result-null {
-  color: var(--token-text-faint);
+.icen-kb-result-null {
+  color: var(--icen-token-text-faint);
 }
-.kb-result-truncated {
+.icen-kb-result-truncated {
   padding: 2px 8px;
 }
 
 /* 图表区（renderChart 复用；类型切换 chips） */
-.kb-answer-chart {
+.icen-kb-answer-chart {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0;
 }
-.kb-chart-switch {
+.icen-kb-chart-switch {
   display: flex;
   align-items: center;
   gap: 6px;
 }
-.kb-chart-chip {
+.icen-kb-chart-chip {
   font: inherit;
-  font-size: 11.5px;
-  min-height: 22px;
-  padding: 2px 10px;
-  color: var(--token-text-muted);
+  font-size: var(--icen-density-font-size-xs);
+  font-weight: 500;
+  min-height: var(--icen-density-item-height);
+  padding: 0 12px;
+  color: var(--icen-token-text-muted);
   background: transparent;
-  border: 1px solid var(--token-line-soft);
-  border-radius: 999px;
+  border: 1px solid var(--icen-token-line-soft);
+  border-radius: var(--icen-radius-full);
   cursor: pointer;
-  transition: color 0.16s ease-out, border-color 0.16s ease-out, background 0.16s ease-out;
+  transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.kb-chart-chip:hover {
-  color: var(--token-text);
-  border-color: var(--token-line);
+.icen-kb-chart-chip:hover {
+  color: var(--icen-token-text);
+  background: var(--icen-token-fill-hover);
+  border-color: var(--icen-token-line);
 }
-.kb-chart-chip:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: 1px;
+.icen-kb-chart-chip:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-chart-chip.is-active {
-  color: var(--token-accent);
-  border-color: color-mix(in srgb, var(--token-accent) 55%, transparent);
-  background: var(--token-accent-subtle, transparent);
+.icen-kb-chart-chip:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
-.kb-chart-mount {
+.icen-kb-chart-chip.is-active {
+  color: var(--icen-token-accent-text);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 55%, transparent);
+  background: var(--icen-token-accent-subtle);
+}
+.icen-kb-chart-mount {
   min-height: 0;
 }
 
 /* 追问建议 */
-.kb-answer-followups {
+.icen-kb-answer-followups {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
 }
-.kb-followups-label {
-  font-size: 11.5px;
-  color: var(--token-text-faint);
+.icen-kb-followups-label {
+  font-size: var(--icen-density-font-size-xs);
+  letter-spacing: .3px;
+  color: var(--icen-token-text-faint);
 }
-.kb-followup {
+.icen-kb-followup {
   cursor: pointer;
-  transition: border-color 0.16s ease-out, color 0.16s ease-out;
+  transition: border-color var(--icen-tx-fast), color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.icen-kb-followup:hover {
+  color: var(--icen-token-text);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 45%, transparent);
 }
-.kb-followup:hover {
-  color: var(--token-text);
-  border-color: color-mix(in srgb, var(--token-accent) 45%, transparent);
+.icen-kb-followup:active {
+  background: var(--icen-token-fill-pressed);
 }
-.kb-followup:focus-visible {
-  outline: 2px solid var(--token-accent);
-  outline-offset: 1px;
+.icen-kb-followup:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 
 /* ═══════════════════ 密度档 ═══════════════════ */
 
-[data-density='compact'] .kb-sql { padding: 8px 10px; gap: 6px; }
-[data-density='compact'] .kb-result-table th { padding: 4px 8px; }
-[data-density='compact'] .kb-result-table td { padding: 3px 8px; }
-[data-density='compact'] .kb-answer { gap: 8px; }
-[data-density='compact'] .kb-clarify { padding: 8px 10px; }
+[data-icen-density='compact'] .icen-kb-sql { padding: 8px 10px; gap: 6px; }
+[data-icen-density='compact'] .icen-kb-sql-code { padding: 8px 10px; }
+[data-icen-density='compact'] .icen-kb-sql-fix { padding: 8px 10px; }
+[data-icen-density='compact'] .icen-kb-result-table { font-size: var(--icen-density-font-size-xs); }
+[data-icen-density='compact'] .icen-kb-result-table th { padding: 4px 8px; }
+[data-icen-density='compact'] .icen-kb-result-table td { padding: 3px 8px; }
+[data-icen-density='compact'] .icen-kb-answer { gap: 8px; }
+[data-icen-density='compact'] .icen-kb-clarify { padding: 8px 10px; }
+[data-icen-density='compact'] .icen-kb-clarify-opt { min-height: var(--icen-density-item-height); }
+[data-icen-density='compact'] .icen-kb-explain-body { padding-block: 4px 10px; }
+
+/* ═══════════════════ 高对比模式（forced-colors） ═══════════════════
+   表面与焦点回落到系统色；选中/激活态改用 Highlight，语义不依赖单一底色。 */
+@media (forced-colors: active) {
+  .icen-kb-sql-btn,
+  .icen-kb-clarify-opt,
+  .icen-kb-result-export-btn,
+  .icen-kb-chart-chip,
+  .icen-kb-followup {
+    border-color: CanvasText;
+  }
+  .icen-kb-sql-btn:disabled,
+  .icen-kb-clarify-opt:disabled,
+  .icen-kb-result-export-btn:disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+  .icen-kb-sql-fix {
+    border-color: CanvasText;
+    background: Canvas;
+  }
+  .icen-kb-perm,
+  .icen-kb-sql-textarea {
+    border-color: CanvasText;
+  }
+  .icen-kb-explain-metric-ref {
+    border-bottom-color: CanvasText;
+  }
+  .icen-kb-result-table th,
+  .icen-kb-result-table td {
+    border-bottom-color: CanvasText;
+  }
+  .icen-kb-clarify-opt.is-picked,
+  .icen-kb-chart-chip.is-active {
+    forced-color-adjust: none;
+    background: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+  }
+  .icen-kb-followup:hover {
+    border-color: Highlight;
+  }
+  :is(.icen-kb-sql-btn, .icen-kb-sql-textarea, .icen-kb-clarify-opt, .icen-kb-verified,
+    .icen-kb-result-export-btn, .icen-kb-chart-chip, .icen-kb-followup,
+    .icen-kb-explain-metric-ref):focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+}
+
+}