@icen.ai/ui 0.5.0 → 0.8.0

package/dist/ui.css

@@ -507,6 +507,8 @@
   --token-accent-glow:    color-mix(in srgb, var(--token-accent) 8%, transparent);
   --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 60%, transparent);
   --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 92%, transparent);
+  /* 睡莲粉 accent 上的文字色：深绿灰（白字在 #d59ab1 上对比度不达标） */
+  --token-on-accent:      #26302b;
 
   --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.24);
   --token-shadow-overlay:  0 2px 5px rgba(0,0,0,.24), 0 14px 36px rgba(0,0,0,.32);
@@ -844,7 +846,8 @@
   --token-accent-glow:    color-mix(in srgb, var(--token-accent) 6%, transparent);
   --token-line-dashed:    color-mix(in srgb, var(--token-line-soft) 60%, transparent);
   --token-overlay-bg:     color-mix(in srgb, var(--token-bg) 94%, transparent);
-  --token-on-accent:      #ffffff;
+  /* 松烟绿 accent 上的文字色：深墨（白字在 #7AA87E 上对比度不达标） */
+  --token-on-accent:      #1a2018;
 
   --token-shadow-elevated: 0 1px 2px rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.22);
   --token-shadow-overlay:  0 2px 4px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.34);
@@ -1312,13 +1315,20 @@
   --density-space-sm: 0.5rem;
   --density-space-md: 0.75rem;
   --density-space-lg: 1rem;
+  --density-space-xl: 1.5rem;
+  --density-space-2xl: 2rem;
+  --density-space-3xl: 3rem;
+  --density-space-4xl: 4rem;
   --density-input-height-sm: 28px;
   --density-input-height-md: 36px;
   --density-input-height-lg: 44px;
+  --density-font-size-2xs: 10px;
   --density-font-size-xs: 11px;
   --density-font-size-sm: 12px;
   --density-font-size-md: 13px;
   --density-font-size-lg: 14px;
+  --density-font-size-xl: 18px;
+  --density-font-size-2xl: 22px;
 
   /* ── Motion 动效 ── */
   --duration-instant: 0ms;
@@ -1350,13 +1360,20 @@
   --density-space-sm: 0.5rem;
   --density-space-md: 0.75rem;
   --density-space-lg: 1rem;
+  --density-space-xl: 1.5rem;
+  --density-space-2xl: 2rem;
+  --density-space-3xl: 3rem;
+  --density-space-4xl: 4rem;
   --density-input-height-sm: 28px;
   --density-input-height-md: 36px;
   --density-input-height-lg: 44px;
+  --density-font-size-2xs: 10px;
   --density-font-size-xs: 11px;
   --density-font-size-sm: 12px;
   --density-font-size-md: 13px;
   --density-font-size-lg: 14px;
+  --density-font-size-xl: 18px;
+  --density-font-size-2xl: 22px;
 
   /* ── Motion ── */
   --duration-fast: 150ms;
@@ -1385,13 +1402,20 @@
   --density-space-sm: 0.25rem;
   --density-space-md: 0.5rem;
   --density-space-lg: 0.75rem;
+  --density-space-xl: 1rem;
+  --density-space-2xl: 1.5rem;
+  --density-space-3xl: 2rem;
+  --density-space-4xl: 3rem;
   --density-input-height-sm: 24px;
   --density-input-height-md: 32px;
   --density-input-height-lg: 40px;
+  --density-font-size-2xs: 9px;
   --density-font-size-xs: 9px;
   --density-font-size-sm: 10px;
   --density-font-size-md: 11px;
   --density-font-size-lg: 12px;
+  --density-font-size-xl: 14px;
+  --density-font-size-2xl: 16px;
 
   /* ── Motion：像素风瞬间切换 ── */
   --duration-fast: 0ms;
@@ -1854,10 +1878,11 @@ h1, h2, h3, h4, h5, h6 {
  * ════════════════════════════════════════════════════════════════════════
  * icen 组件契约（统一抽象）
  * ════════════════════════════════════════════════════════════════════════
- * 所有 31 个组件遵循同一套抽象，由两层共同支撑：
+ * 所有 51 个组件遵循同一套抽象，由两层共同支撑：
  *
  * ── 层 1：--icen-* 原语 token（所有组件自洽消费）
- *    --icen-ring / --icen-ring-soft / --icen-ring-error   ← 聚焦环
+ *    --icen-ring / --icen-ring-soft / --icen-ring-error /
+ *    --icen-ring-warning / --icen-ring-inset          ← 聚焦环
  *    --icen-hover-border                                  ← 悬停边框过渡
  *    --icen-disabled-opacity                              ← 禁用透明度
  *    --icen-press                                         ← 按下形变
@@ -1903,6 +1928,7 @@ h1, h2, h3, h4, h5, h6 {
  *   - 滚动条：贴 --token-scrollbar-*（retro profile 另有硬覆盖）
  *   - 工具类：.mono / .dim / .faint / .sr-only / .skip-link
  *   - z-index 标尺：--z-* （浮层一律 portal 到 body）
+ *   - 共享 keyframes：icen-pop-in（弹层进场）/ icen-spin（旋转）/ icen-skeleton-pulse（骨架脉冲）
  *   - 交互基元 class：.pressable / .control / .field / .lift / .surface-elevated / .focus-ring / .motion
  *   - 状态约定：[aria-disabled] / [aria-busy] / [data-loading] / [data-disabled] / [data-invalid]
  */
@@ -1912,7 +1938,7 @@ h1, h2, h3, h4, h5, h6 {
    ───────────────────────────────────────────────────────────────
    所有组件消费的"原语级"变量：聚焦环、悬停、按下、禁用、过渡。
    风格 profile（如 .style-retro）只需覆盖这里的少数变量，
-   即可让 31 个组件整体换肤；组件自身无需感知风格切换。
+   即可让 51 个组件整体换肤；组件自身无需感知风格切换。
    ══════════════════════════════════════════════════════════════ */
 :root {
   /* ── 聚焦环（focus-visible） ── */
@@ -1920,6 +1946,9 @@ h1, h2, h3, h4, h5, h6 {
   --icen-ring-soft: 0 0 0 3px color-mix(in srgb, var(--token-accent) 16%, transparent);
   --icen-ring-error: 0 0 0 2px var(--token-bg), 0 0 0 4px color-mix(in srgb, var(--token-error) 50%, transparent);
   --icen-ring-success: 0 0 0 2px var(--token-bg), 0 0 0 4px color-mix(in srgb, var(--token-success) 50%, transparent);
+  --icen-ring-warning: 0 0 0 2px var(--token-bg), 0 0 0 4px color-mix(in srgb, var(--token-warning) 50%, transparent);
+  /* inset 聚焦环：空间受限的网格/表头单元格用内阴影聚焦（2px 内描边 + 3px 内光晕） */
+  --icen-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--token-accent) 50%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--token-accent) 14%, transparent);
 
   /* ── 悬停 / 按下 / 禁用 ── */
   --icen-hover-border: color-mix(in srgb, var(--token-accent) 30%, var(--token-line));
@@ -2098,7 +2127,8 @@ html {
      banner    → 全屏横幅（紧急公告，高于 toast）
      dialog    → 模态对话框 + backdrop
      popover   → 弹出层/下拉菜单（高于 dialog 因为常常 portal 出去）
-     tooltip   → 工具提示（永远在最上）
+     tooltip   → 工具提示
+     fx        → 效果层（retro 扫描线/噪点等，永远在最上）
    ══════════════════════════════════════════════════════════════ */
 :root {
   --z-base: 0;
@@ -2110,6 +2140,27 @@ html {
   --z-dialog: 500;
   --z-popover: 620;
   --z-tooltip: 700;
+  --z-fx: 1000;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   共享 keyframes（组件统一引用，不再各自重复定义）
+     icen-pop-in         → 弹层进场（scale .96 + translateY -4px）
+     icen-spin           → 旋转（spinner / 加载态）
+     icen-skeleton-pulse → 骨架脉冲
+   注：menu.css / popover.css 保留自己的 scale(.95)±8px 四方向版
+       （方向语义不同：按 data-side 反向位移），不并入 icen-pop-in。
+   ══════════════════════════════════════════════════════════════ */
+@keyframes icen-pop-in {
+  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+@keyframes icen-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes icen-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -2260,58 +2311,2632 @@ html {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-
-/* ── .motion — 显式动画工具类（仅在 prefers-reduced-motion: no-preference 时生效） */
-@media (prefers-reduced-motion: no-preference) {
-  .motion { transition: all var(--icen-tx-normal); }
+
+/* ── .motion — 显式动画工具类（仅在 prefers-reduced-motion: no-preference 时生效） */
+@media (prefers-reduced-motion: no-preference) {
+  .motion { transition: all var(--icen-tx-normal); }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   动效与无障碍兜底
+   ══════════════════════════════════════════════════════════════ */
+
+/* reduced-motion：所有动画/过渡压缩到 ~0ms（保留可访问性最小可视信号） */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* 触屏设备（无精细指针）：关闭 hover 抬升、压低 pressable scale */
+@media (pointer: coarse) {
+  .lift:hover { transform: none; }
+  .pressable:active { transform: translateY(0) scale(0.99); }
+}
+
+/* 高对比度模式（Windows High Contrast / 强制 colors） */
+@media (forced-colors: active) {
+  .pressable, .control, .lift, .surface-elevated, .focus-ring:focus-visible {
+    forced-color-adjust: none;
+  }
+  .focus-ring:focus-visible,
+  .pressable:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+/* 打印：去掉阴影/背景/动效，节约墨水并避免打印截断 */
+@media print {
+  *, *::before, *::after {
+    background: transparent !important;
+    color: #000 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  body { font-size: 12pt; line-height: 1.4; }
+  a, a:visited { text-decoration: underline; }
+  a[href]::after { content: ' (' attr(href) ')'; font-size: 90%; }
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  h1, h2, h3 { page-break-after: avoid; }
+  .pressable, .lift, .surface-elevated { box-shadow: none !important; transform: none !important; }
+}
+
+
+/* ── components/ai-chat.css ── */
+/*
+ * @icen.ai/ui — Component: ai-chat（AI 原生组件族：ai-chat / ai-message / ai-reasoning / ai-composer）
+ *
+ * 完整契约：
+ *   <div class="ai-chat" data-density="normal">                  ← verbose|normal|summary 三档
+ *     <div class="ai-chat-scroll">
+ *       <div class="ai-msg ai-msg--user|ai-msg--assistant|ai-msg--system|ai-msg--tool">
+ *         <span class="ai-msg-avatar"></span>
+ *         <div class="ai-msg-body">…消费方自行渲染 markdown…</div>
+ *         <div class="ai-msg-actions"><button data-ai-msg-action="copy|retry">…</button></div>
+ *         <div class="ai-msg-meta">12:04 · 1.2k tok</div>
+ *       </div>
+ *     </div>
+ *     <button class="ai-chat-jump" hidden>回到底部 · N 条新消息</button>
+ *   </div>
+ *
+ *   <div class="ai-reasoning [.is-streaming|.is-done]">
+ *     <button class="ai-reasoning-head" aria-expanded="false">
+ *       <span class="ai-reasoning-label">思考过程</span><span class="ai-reasoning-time">3s</span>
+ *     </button>
+ *     <div class="ai-reasoning-body" hidden>…</div>
+ *   </div>
+ *
+ *   <div class="ai-composer" data-ai-composer [.is-running]>
+ *     <div class="ai-composer-queue" hidden><span class="ai-composer-chip">
+ *       <span class="ai-composer-chip-text">…</span>
+ *       <button class="ai-composer-chip-remove" aria-label="移除">×</button>
+ *     </span></div>
+ *     <div class="ai-composer-refs" hidden><!-- @ 引用 chips，结构同上（v2 setComposerRefs） --></div>
+ *     <div class="ai-composer-attach" hidden><!-- 附件 chips，结构同上 --></div>
+ *     <div class="ai-composer-box control">
+ *       <textarea class="ai-composer-input" rows="1" placeholder="…"></textarea>
+ *       <div class="ai-composer-actions"><!-- v1 旧结构（无 toolbar 配置时保留）： -->
+ *         <button class="ai-composer-btn" data-ai-attach aria-label="附件"></button>
+ *         <button class="ai-composer-send" data-ai-send aria-label="发送"></button>  ← 运行态 .is-stop
+ *       </div>
+ *       <div class="ai-composer-toolbar"><!-- v2 工具条（setComposerModels/Usage 配置时 JS 装配）：
+ *         <button class="ai-composer-model" data-ai-model-open>provider 图标/首字母章 + 模型名 + chevron</button>
+ *         <span class="ai-composer-spacer"></span>
+ *         <span class="ai-composer-usage" data-ai-usage></span>   ← 用量环挂载点（renderAiUsageRing）
+ *         <button class="ai-composer-btn" data-ai-attach></button>
+ *         <button class="ai-composer-send" data-ai-send></button>  ← 运行态 .is-stop
+ *       </div>
+ *     </div>
+ *   </div>
+ *   弹层 .ai-composer-popup（portal body，JS 动态创建）：模型切换 / 斜杠命令 / @ 引用
+ *     三模式共用基座——.ai-composer-popup-search 搜索框、.ai-composer-popup-list(listbox)
+ *     > .ai-composer-popup-group > .ai-composer-popup-group-label + .ai-composer-popup-option(role=option)，
+ *     .ai-composer-popup-empty 空态、.ai-composer-popup-foot 底部提示。
+ *
+ * 配套 behaviors：behaviors/ai-chat.ts（initAiChat / createAiStream）
+ *               + behaviors/ai-composer.ts（initAiComposer / setComposerRunning
+ *                 + v2：setComposerModels / setComposerCommands / setComposerRefs / setComposerUsage）。
+ * 状态机 7 态 .is-* 中的 streaming/done 在本文件消费；running 脉冲点等条目态见 ai-tool.css（.ai-item 基元）。
+ * data-density：summary 档隐藏 meta、默认折叠 reasoning（纯 CSS）；
+ *               tool/system 类次要消息在 summary 档压淡。verbose 与 normal 目前同视觉（透明度两档生效）。
+ * 流式光标复用 tokens 的 blink keyframes（.animate-blink 同款）；reasoning shimmer 时长走
+ * --ai-shimmer-duration 局部变量（默认值 1.6s）。
+ */
+
+/* ══════════════ ai-chat（滚动容器 + 钉底） ══════════════ */
+
+/* 输出容器宽度自稳定契约：即使宿主是 flex/grid 居中上下文（shrink-wrap 陷阱），
+   也不随内容多少改变宽度——流式内容只允许纵向生长。
+   （用 align-self 而非 width:100%——width 在 shrink-wrap 父级下会塌成 min-content） */
+.ai-chat,
+.ai-reasoning,
+.ai-composer {
+  align-self: stretch;
+}
+
+.ai-chat {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  gap: var(--density-space-sm);
+}
+
+.ai-chat-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-md);
+  padding: var(--density-space-xs) var(--density-space-2xs, 2px);
+  scroll-behavior: smooth;
+}
+
+/* 「回到底部 · N 条新消息」浮动钮（用户上滚暂停跟随时出现，initAiChat 驱动） */
+.ai-chat-jump {
+  position: absolute;
+  left: 50%;
+  bottom: var(--density-space-md);
+  transform: translateX(-50%);
+  z-index: var(--z-raised);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  padding: var(--density-space-xs) var(--density-space-md);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-full);
+  background: var(--token-surface);
+  box-shadow: var(--token-shadow-card);
+  color: var(--token-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  cursor: pointer;
+  animation: icen-pop-in var(--ai-jump-enter-duration, var(--duration-normal)) var(--ease-out);
+  transition:
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    box-shadow var(--icen-tx-fast);
+}
+.ai-chat-jump:hover {
+  color: var(--token-accent);
+  border-color: var(--icen-hover-border);
+}
+.ai-chat-jump:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-chat-jump[hidden] {
+  display: none;
+}
+
+/* ══════════════ ai-message ══════════════ */
+
+.ai-msg {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm) var(--density-space-md);
+  border-radius: var(--radius-md);
+  animation: icen-pop-in var(--ai-msg-enter-duration, var(--duration-normal)) var(--ease-out);
+}
+
+.ai-msg-avatar {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  background: var(--token-fill-2);
+  color: var(--token-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  letter-spacing: 0.04em;
+  user-select: none;
+}
+.ai-msg--user .ai-msg-avatar {
+  background: color-mix(in srgb, var(--token-accent) 14%, transparent);
+  color: var(--token-accent);
+}
+.ai-msg--assistant .ai-msg-avatar {
+  background: color-mix(in srgb, var(--token-success) 12%, transparent);
+  color: var(--token-success);
+}
+.ai-msg--system .ai-msg-avatar {
+  background: color-mix(in srgb, var(--token-warning) 12%, transparent);
+  color: var(--token-warning);
+}
+.ai-msg--tool .ai-msg-avatar {
+  background: color-mix(in srgb, var(--token-info) 12%, transparent);
+  color: var(--token-info);
+}
+
+.ai-msg-body {
+  min-width: 0;
+  min-height: 1.6em; /* 流式从空开始时占住一行高度，不塌 */
+  font-size: var(--density-font-size-md);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 流式光标（▍闪烁，复用 tokens 的 blink keyframes，同 .animate-blink） */
+.ai-msg-body.is-streaming::after,
+.ai-reasoning-body.is-streaming::after {
+  content: '▍';
+  margin-left: 1px;
+  color: var(--token-accent);
+  animation: blink 1s step-end infinite;
+}
+
+/* 消息操作：hover / focus-within 才出现（键盘可达等价） */
+.ai-msg-actions {
+  position: absolute;
+  top: var(--density-space-xs);
+  right: var(--density-space-xs);
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  background: var(--token-surface);
+  border: 1px solid var(--token-line-soft);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-2px);
+  transition:
+    opacity var(--icen-tx-fast),
+    transform var(--icen-tx-fast),
+    visibility var(--icen-tx-fast);
+}
+.ai-msg:hover .ai-msg-actions,
+.ai-msg:focus-within .ai-msg-actions {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.ai-msg-actions [data-ai-msg-action] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--token-text-muted);
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-msg-actions [data-ai-msg-action]:hover {
+  color: var(--token-accent);
+  background: var(--token-fill-2);
+}
+.ai-msg-actions [data-ai-msg-action]:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-msg-actions [data-ai-msg-action] svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* meta：时间 · token 数（summary 档隐藏） */
+.ai-msg-meta {
+  margin-top: 2px;
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── 多模态消息部件（renderAiMessage，spec §10）── */
+
+.ai-msg-text {
+  display: block;
+}
+
+/* 图片 / 音频 / 视频：宽度自稳定（不超正文列），纵向生长 */
+.ai-msg-media {
+  display: block;
+  max-width: min(100%, 360px);
+  margin: var(--density-space-xs) 0;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+}
+.ai-msg-media--image {
+  max-height: 320px;
+  object-fit: contain;
+}
+.ai-msg-media--audio {
+  width: min(100%, 300px);
+  height: 40px;
+}
+.ai-msg-media--video {
+  max-width: min(100%, 480px);
+  max-height: 300px;
+}
+
+/* 文件 chip（含可选下载链接） */
+.ai-msg-file {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  margin: 2px var(--density-space-xs) 2px 0;
+  padding: 2px var(--density-space-sm);
+  border: 1px solid var(--token-line);
+  border-radius: var(--radius-sm);
+  background: var(--token-surface);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text);
+}
+.ai-msg-file-link {
+  color: var(--token-accent);
+  text-decoration: none;
+}
+.ai-msg-file-link:hover {
+  text-decoration: underline;
+}
+
+/* MCP ResourceLink 等资源引用 */
+.ai-msg-link {
+  color: var(--token-accent);
+}
+
+/* assistant 消息的模型名标签 */
+.ai-msg-model {
+  display: inline-block;
+  margin-left: var(--density-space-xs);
+  padding: 0 6px;
+  border-radius: var(--radius-xs);
+  background: var(--token-fill-1);
+  color: var(--token-text-faint);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  vertical-align: middle;
+}
+
+/* ── 错误变体（renderAiMessage.setError / createAiStream.fail）── */
+
+.ai-msg--error .ai-msg-body {
+  border-left: 2px solid var(--token-error);
+  padding-left: var(--density-space-sm);
+}
+.ai-msg-error-text {
+  display: block;
+  margin-top: var(--density-space-xs);
+  color: var(--token-error);
+  font-size: var(--density-font-size-xs);
+}
+
+/* ══════════════ ai-reasoning ══════════════ */
+
+.ai-reasoning {
+  margin: var(--density-space-xs) 0;
+  padding-left: var(--density-space-md);
+  border-left: 2px solid var(--token-line-soft);
+}
+
+.ai-reasoning-head {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  width: 100%;
+  padding: var(--density-space-xs) 0;
+  border: 0;
+  background: none;
+  color: var(--token-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-sm);
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  text-align: left;
+}
+.ai-reasoning-head:hover {
+  color: var(--token-text);
+}
+.ai-reasoning-head:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+  border-radius: var(--radius-xs);
+}
+
+/* 折叠指示 chevron（CSS 三角，展开时旋转） */
+.ai-reasoning-head::before {
+  content: '';
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform var(--icen-tx-fast);
+}
+.ai-reasoning:has(.ai-reasoning-head[aria-expanded='true']) .ai-reasoning-head::before {
+  transform: rotate(45deg);
+}
+
+.ai-reasoning-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ai-reasoning-time {
+  margin-left: auto;
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 流式中：耗时位换成 shimmer「正在思考…」（时长走局部变量） */
+.ai-reasoning.is-streaming .ai-reasoning-time {
+  display: none;
+}
+.ai-reasoning.is-streaming .ai-reasoning-head::after {
+  content: '正在思考…';
+  margin-left: auto;
+  font-size: var(--density-font-size-2xs);
+  background: linear-gradient(
+    90deg,
+    var(--token-text-faint) 25%,
+    var(--token-text) 50%,
+    var(--token-text-faint) 75%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: ai-shimmer var(--ai-shimmer-duration, 1.6s) linear infinite;
+}
+
+.ai-reasoning-body {
+  padding: var(--density-space-xs) 0 var(--density-space-sm);
+  color: var(--token-text-muted);
+  font-size: var(--density-font-size-sm);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.ai-reasoning-body[hidden] {
+  display: none;
+}
+
+/* ══════════════ ai-composer ══════════════ */
+
+.ai-composer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  padding: var(--density-space-sm);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-lg);
+  background: var(--token-surface);
+  box-shadow: var(--token-shadow-card);
+}
+.ai-composer:focus-within {
+  border-color: var(--icen-hover-border);
+}
+
+/* 排队 / 引用 / 附件 chips 行 */
+.ai-composer-queue,
+.ai-composer-refs,
+.ai-composer-attach {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--density-space-xs);
+}
+.ai-composer-queue[hidden],
+.ai-composer-refs[hidden],
+.ai-composer-attach[hidden] {
+  display: none;
+}
+
+.ai-composer-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 240px;
+  padding: 2px var(--density-space-xs);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-full);
+  background: var(--token-surface-strong);
+  color: var(--token-text-muted);
+  font-size: var(--density-font-size-xs);
+  line-height: 1.4;
+}
+.ai-composer-chip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-composer-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--token-text-faint);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-composer-chip-remove:hover {
+  color: var(--token-error);
+  background: var(--token-error-muted);
+}
+.ai-composer-chip-remove:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+/* 输入框（.control 基元提供 hover/focus 边框与光晕）；flex-wrap 让工具条独占下一行 */
+.ai-composer-box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-xs) var(--density-space-sm);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-panel);
+  box-shadow: var(--token-shadow-inset);
+}
+
+.ai-composer-input {
+  flex: 1;
+  min-width: 0;
+  padding: var(--density-space-xs) 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  resize: none;
+  font-family: inherit;
+  font-size: var(--density-font-size-md);
+  line-height: 1.5;
+  max-height: 12em;
+  overflow-y: auto;
+}
+
+/* v1 旧结构按钮行（无 toolbar 配置时保留）；v2 中按钮被移入工具条后此容器由 JS 移除 */
+.ai-composer-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  flex-shrink: 0;
+}
+
+/* ── v2 工具条（composer-box 内底部，业界主流形态）── */
+
+.ai-composer-toolbar {
+  flex: 0 0 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  padding-top: var(--density-space-xs);
+  border-top: 1px solid var(--token-line-soft);
+}
+.ai-composer-toolbar[hidden] {
+  display: none;
+}
+
+.ai-composer-spacer {
+  flex: 1;
+}
+
+/* 模型切换钮：provider 图标/首字母章 + 模型名 + chevron */
+.ai-composer-model {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 180px;
+  height: 28px;
+  padding: 0 var(--density-space-xs);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--token-text-muted);
+  font-size: var(--density-font-size-xs);
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-composer-model:hover {
+  color: var(--token-text);
+  background: var(--token-fill-2);
+}
+.ai-composer-model:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-composer-model-icon,
+.ai-composer-model-provider-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ai-composer-model-provider-icon svg {
+  width: 14px;
+  height: 14px;
+}
+.ai-composer-model-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-composer-model-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--token-text-faint);
+  transition: transform var(--icen-tx-fast);
+}
+.ai-composer-model-chevron svg {
+  width: 12px;
+  height: 12px;
+}
+.ai-composer-model[aria-expanded='true'] .ai-composer-model-chevron {
+  transform: rotate(180deg);
+}
+
+/* provider 图标缺失时的首字母圆形章（token 色） */
+.ai-composer-model-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, var(--token-accent) 15%, transparent);
+  color: var(--token-accent);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+}
+.ai-composer-model-icon .ai-composer-model-badge {
+  width: 14px;
+  height: 14px;
+  font-size: 9px;
+}
+
+/* 用量环挂载点（环本体 .ai-usage-ring 在 ai-panel.css） */
+.ai-composer-usage {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.ai-composer-usage:empty {
+  display: none;
+}
+
+/* ── v2 弹层（portal body，模型/命令/引用三模式共用基座；定位 inline 由 behavior 写入）── */
+
+.ai-composer-popup {
+  position: fixed;
+  z-index: var(--z-popover);
+  display: flex;
+  flex-direction: column;
+  padding: var(--density-space-2xs);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-card-strong);
+  box-shadow: var(--token-shadow-popover, var(--token-shadow-card));
+  overflow: hidden;
+  animation: icen-pop-in var(--ai-composer-popup-enter-duration, var(--duration-normal)) var(--ease-out);
+}
+
+/* 搜索框（模型/引用过滤） */
+.ai-composer-popup-search {
+  flex-shrink: 0;
+  padding: var(--density-space-2xs);
+  border-bottom: 1px solid var(--token-line-soft);
+}
+.ai-composer-popup-search-input {
+  width: 100%;
+  padding: var(--density-space-2xs) var(--density-space-xs);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-sm);
+  background: var(--token-panel);
+  color: var(--token-text);
+  font-size: var(--density-font-size-sm);
+  outline: none;
+  transition: border-color var(--icen-tx-fast);
+}
+.ai-composer-popup-search-input:focus {
+  border-color: var(--token-accent);
+}
+.ai-composer-popup-search-input::placeholder {
+  color: var(--token-text-faint);
+}
+
+/* 列表（max-height inline 由 behavior 按 computePopoverLayout 写入） */
+.ai-composer-popup-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--density-space-2xs);
+}
+
+/* 分组（provider / ref kind） */
+.ai-composer-popup-group[hidden] {
+  display: none;
+}
+.ai-composer-popup-group-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--density-space-xs) var(--density-space-xs) var(--density-space-2xs);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  letter-spacing: 0.02em;
+}
+.ai-composer-popup-group-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--token-text-muted);
+}
+.ai-composer-popup-group-icon svg {
+  width: 12px;
+  height: 12px;
+}
+.ai-composer-popup-group-icon .ai-composer-model-badge {
+  width: 12px;
+  height: 12px;
+  font-size: 8px;
+}
+
+/* 选项行（label + meta + check） */
+.ai-composer-popup-option {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  width: 100%;
+  padding: var(--density-space-xs);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--token-text);
+  font-size: var(--density-font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--icen-tx-fast);
+}
+.ai-composer-popup-option:hover {
+  background: var(--token-fill-2);
+}
+.ai-composer-popup-option.is-focused {
+  background: var(--token-fill-2);
+}
+.ai-composer-popup-option:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-composer-popup-option-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--token-text-muted);
+}
+.ai-composer-popup-option-icon svg {
+  width: 14px;
+  height: 14px;
+}
+.ai-composer-popup-option-icon .ai-composer-model-badge {
+  width: 14px;
+  height: 14px;
+  font-size: 9px;
+}
+.ai-composer-popup-option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-composer-popup-option-sub {
+  margin-left: 6px;
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+}
+.ai-composer-popup-option-meta {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+.ai-composer-popup-option-check {
+  display: none;
+  flex-shrink: 0;
+  color: var(--token-accent);
+}
+.ai-composer-popup-option-check svg {
+  width: 12px;
+  height: 12px;
+}
+.ai-composer-popup-option[aria-selected='true'] .ai-composer-popup-option-check {
+  display: inline-flex;
+}
+
+/* 命令行：/name <argsHint> + 描述 */
+.ai-composer-popup-cmd {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+}
+.ai-composer-popup-cmd-line {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  max-width: 100%;
+}
+.ai-composer-popup-cmd-name {
+  font-family: var(--font-mono);
+  color: var(--token-accent);
+}
+.ai-composer-popup-cmd-args {
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+}
+.ai-composer-popup-cmd-desc {
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-muted);
+}
+
+/* 空态 */
+.ai-composer-popup-empty {
+  flex-shrink: 0;
+  padding: var(--density-space-md);
+  text-align: center;
+  font-size: var(--density-font-size-sm);
+  color: var(--token-text-faint);
+}
+.ai-composer-popup-empty[hidden] {
+  display: none;
+}
+
+/* 底部提示（模型弹层：切换模型会使 prompt 缓存失效；cacheRead 占比高时 warning 色） */
+.ai-composer-popup-foot {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--density-space-xs);
+  border-top: 1px solid var(--token-line-soft);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+}
+.ai-composer-popup-foot svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+.ai-composer-popup-foot.is-warn {
+  color: var(--token-warning);
+}
+
+/* ── 工具条按钮统一 28px 方形、svg 14px 居中（v1 旧结构按钮同样收敛）── */
+
+.ai-composer-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--token-text-muted);
+  cursor: pointer;
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-composer-btn:hover {
+  color: var(--token-text);
+  background: var(--token-fill-2);
+}
+.ai-composer-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-composer-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* 发送钮：accent 实底；运行态 .is-stop 变停止钮（中性底 + error 色方标，停语气但不整钮铺红） */
+.ai-composer-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: var(--token-accent);
+  color: var(--token-on-accent);
+  cursor: pointer;
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast);
+}
+.ai-composer-send:hover {
+  background: var(--token-accent-deep, var(--token-accent));
+}
+.ai-composer-send:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-composer-send svg {
+  width: 14px;
+  height: 14px;
+}
+.ai-composer-send .ai-composer-send-icon[hidden] {
+  display: none;
+}
+.ai-composer-send.is-stop {
+  background: var(--token-surface-strong);
+  color: var(--token-error);
+  border-color: color-mix(in srgb, var(--token-error) 35%, transparent);
+}
+.ai-composer-send.is-stop:hover {
+  background: var(--token-error-muted);
+}
+
+/* 运行态：输入台整体 busy 标记（aria-busy 等价，状态机语言） */
+.ai-composer.is-running .ai-composer-box {
+  border-color: color-mix(in srgb, var(--token-accent) 30%, var(--token-line-soft));
+}
+
+/* 拖放文件高亮（粘贴/拖放附件入口，spec §11） */
+.ai-composer-box.is-dragover {
+  border-color: var(--token-accent);
+  box-shadow: var(--icen-ring);
+}
+
+/* ══════════════ data-density 三档（summary 纯 CSS 降噪） ══════════════ */
+
+/* summary：隐藏 meta、默认折叠 reasoning（head 展开仍可看）、次要消息压淡 */
+.ai-chat[data-density='summary'] .ai-msg-meta {
+  display: none;
+}
+.ai-chat[data-density='summary'] .ai-reasoning-body {
+  display: none;
+}
+.ai-chat[data-density='summary'] .ai-reasoning:has(.ai-reasoning-head[aria-expanded='true']) .ai-reasoning-body {
+  display: block;
+}
+.ai-chat[data-density='summary'] .ai-msg--tool,
+.ai-chat[data-density='summary'] .ai-msg--system {
+  opacity: 0.72;
+}
+
+/* verbose：当前与 normal 同视觉（透明度三档中两档生效；verbose 预留全显档位） */
+
+/* ══════════════ keyframes（本文件局部） ══════════════ */
+
+@keyframes ai-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+/* ══════════════ 动效守卫 ══════════════ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-msg,
+  .ai-chat-jump,
+  .ai-composer-popup {
+    animation: none;
+  }
+  .ai-chat-jump,
+  .ai-msg-actions,
+  .ai-composer-chip-remove,
+  .ai-composer-btn,
+  .ai-composer-send,
+  .ai-composer-model,
+  .ai-composer-model-chevron,
+  .ai-composer-popup-option,
+  .ai-composer-popup-search-input,
+  .ai-reasoning-head,
+  .ai-reasoning-head::before {
+    transition: none;
+  }
+  .ai-reasoning.is-streaming .ai-reasoning-head::after {
+    animation: none;
+    background: none;
+    -webkit-text-fill-color: currentColor;
+    color: var(--token-text-faint);
+  }
+  .ai-msg-body.is-streaming::after,
+  .ai-reasoning-body.is-streaming::after {
+    animation: none;
+  }
+}
+
+/* 触屏无 hover：消息操作常显（否则不可达） */
+@media (pointer: coarse) {
+  .ai-msg-actions {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+}
+
+/* 实时待办 chip（setComposerTodo：业界模式——plan 状态挂输入区，不进对话流） */
+.ai-composer-todo {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-full);
+  background: var(--token-surface);
+  color: var(--token-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), border-color var(--icen-tx-fast);
+}
+.ai-composer-todo svg { width: 13px; height: 13px; color: var(--token-accent); }
+.ai-composer-todo:hover { border-color: var(--icen-hover-border, var(--token-line)); color: var(--token-text); }
+.ai-composer-todo:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.ai-composer-todo.is-done svg { color: var(--token-success); }
+.ai-composer-todo.is-error svg { color: var(--token-warning); }
+.ai-composer-todo-pop { min-width: 240px; max-width: 320px; }
+.ai-composer-todo-pop .ai-todo { padding: 0; }
+
+
+/* ── components/ai-diff.css ── */
+/*
+ * @icen.ai/ui — Component: ai-diff（AI 差异审阅 + 文件 chips，与 behaviors/ai-diff.ts 配套）
+ *
+ * 完整 DOM 契约（类名与规格 §4.6/§4.7 一致）：
+ *   <div class="ai-diff">
+ *     <div class="ai-diff-file is-added|is-modified|is-deleted|is-renamed
+ *          [.is-accepted|.is-rejected]" data-path="src/foo.ts">
+ *       <div class="ai-diff-head" role="button" tabindex="0" aria-expanded="false">
+ *         <span class="ai-diff-path">src/foo.ts</span>            <!-- renamed：旧路径 → 新路径 -->
+ *         <span class="ai-diff-stat"><b class="ai-diff-add">+12</b> <b class="ai-diff-del">−4</b></span>
+ *         <span class="ai-diff-actions">
+ *           <button type="button" data-ai-diff-accept>接受</button>
+ *           <button type="button" data-ai-diff-reject>拒绝</button>
+ *         </span>
+ *         <span class="ai-diff-verdict" hidden>已接受|已拒绝</span>   <!-- 状态章（JS 决策后显示） -->
+ *       </div>
+ *       <div class="ai-diff-body" hidden>
+ *         <table class="ai-diff-table">
+ *           <tr class="ai-diff-line--hunk"><td colspan="3">@@ -10,6 +10,8 @@ …</td></tr>
+ *           <tr class="ai-diff-line--ctx|ai-diff-line--add|ai-diff-line--del">
+ *             <td class="ai-diff-ln" aria-hidden="true">10</td>
+ *             <td class="ai-diff-ln" aria-hidden="true">10</td>
+ *             <td class="ai-diff-code">内容（行首符号由 ::before 提供）</td>
+ *           </tr>
+ *         </table>
+ *       </div>
+ *     </div>
+ *   </div>
+ *
+ *   文件 chips（纯 CSS 族，无 behavior；文件图标由消费方/ai-panel.ts 注入 svg）：
+ *   <div class="ai-files">
+ *     <span class="ai-file-chip is-added|is-modified|is-deleted
+ *                 ai-file-chip--ts|js|css|json|md|img|other">
+ *       <span class="ai-file-icon">…svg…</span>src/foo.ts
+ *     </span>
+ *   </div>
+ *
+ * 状态视觉：
+ *   add 行 = success 底 / del 行 = error 底 / hunk 行 = info 文字（bg-soft 底）
+ *   文件头状态色边（inset 左色条）：added=success / modified=accent / deleted=error / renamed=info
+ *   .is-accepted / .is-rejected = 整体淡化 + .ai-diff-verdict 状态章，actions 由 JS hidden
+ *
+ * 依赖：base.css（--icen-tx-* / --icen-ring / keyframes icen-pop-in）。
+ * 只消费 --token-* / --density-* / --radius-*；动画时长全部走组件局部变量。
+ */
+
+/* ══════════════ ai-diff · 差异审阅 ══════════════ */
+
+.ai-diff {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+  font-size: var(--density-font-size-sm);
+  min-width: 0;
+  align-self: stretch;  /* 输出容器宽度自稳定：宿主 flex/grid 居中时不 shrink-wrap */
+}
+
+.ai-diff-file {
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+  overflow: hidden;
+  min-width: 0;
+  animation: icen-pop-in var(--ai-diff-pop-duration, var(--icen-tx-fast));
+}
+
+/* 文件头状态色边（inset 色条避免 border 宽差导致布局抖动） */
+.ai-diff-file.is-added    { box-shadow: inset 3px 0 0 var(--token-success); }
+.ai-diff-file.is-modified { box-shadow: inset 3px 0 0 var(--token-accent); }
+.ai-diff-file.is-deleted  { box-shadow: inset 3px 0 0 var(--token-error); }
+.ai-diff-file.is-renamed  { box-shadow: inset 3px 0 0 var(--token-info); }
+
+/* 决策后淡化（状态章配色见 .ai-diff-verdict） */
+.ai-diff-file.is-accepted,
+.ai-diff-file.is-rejected {
+  opacity: 0.66;
+  transition: opacity var(--ai-diff-fade-duration, var(--icen-tx-normal));
+}
+
+/* ── head ── */
+
+.ai-diff-head {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-xs) var(--density-space-sm);
+  min-width: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--icen-tx-fast);
+}
+.ai-diff-head:hover {
+  background: var(--token-fill-1);
+}
+.ai-diff-head:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+.ai-diff-path {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text);
+}
+
+.ai-diff-stat {
+  flex-shrink: 0;
+  display: inline-flex;
+  gap: var(--density-space-xs);
+  font-size: var(--density-font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+.ai-diff-add { color: var(--token-success); font-weight: 600; }
+.ai-diff-del { color: var(--token-error); font-weight: 600; }
+
+/* accept / reject 行内小钮（DOM 无固定类，按 data 属性定位） */
+.ai-diff-actions {
+  flex-shrink: 0;
+  display: inline-flex;
+  gap: var(--density-space-xs);
+}
+.ai-diff-actions button {
+  padding: 3px 10px;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-full);
+  background: var(--token-surface);
+  color: var(--token-text-muted);
+  font-size: var(--density-font-size-xs);
+  line-height: 1.4;
+  cursor: pointer;
+  transition:
+    background-color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.ai-diff-actions button:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.ai-diff-actions [data-ai-diff-accept]:hover {
+  color: var(--token-success);
+  border-color: color-mix(in srgb, var(--token-success) 45%, transparent);
+  background: var(--token-success-muted);
+}
+.ai-diff-actions [data-ai-diff-reject]:hover {
+  color: var(--token-error);
+  border-color: color-mix(in srgb, var(--token-error) 45%, transparent);
+  background: var(--token-error-muted);
+}
+
+/* 状态章：决策后 JS 置 text + 去 hidden */
+.ai-diff-verdict {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border: 1px solid currentColor;
+  border-radius: var(--radius-full);
+  font-size: var(--density-font-size-xs);
+  font-weight: 500;
+  line-height: 1.4;
+}
+.ai-diff-file.is-accepted .ai-diff-verdict { color: var(--token-success); background: var(--token-success-muted); }
+.ai-diff-file.is-rejected .ai-diff-verdict { color: var(--token-error); background: var(--token-error-muted); }
+
+/* ── body / 表格 ── */
+
+.ai-diff-body {
+  border-top: 1px solid var(--token-line-soft);
+  overflow-x: auto;
+}
+
+.ai-diff-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  line-height: 1.6;
+}
+.ai-diff-table td {
+  padding: 0 var(--density-space-xs);
+  vertical-align: top;
+}
+
+/* hunk 头：info 文字 */
+.ai-diff-line--hunk td {
+  padding: 2px var(--density-space-sm);
+  background: var(--token-bg-soft);
+  color: var(--token-info);
+  user-select: none;
+  white-space: nowrap;
+}
+
+.ai-diff-ln {
+  width: 1%;
+  min-width: 3.5ch;
+  text-align: right;
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+/* 行号区与代码区的分隔线画在第二列右侧 */
+.ai-diff-ln + .ai-diff-ln {
+  border-right: 1px solid var(--token-line-soft);
+}
+
+/* add = success 底 / del = error 底 */
+.ai-diff-line--add { background: var(--token-success-muted); }
+.ai-diff-line--del { background: var(--token-error-muted); }
+
+.ai-diff-code {
+  white-space: pre-wrap;
+  word-break: break-all;
+  padding-left: var(--density-space-sm);
+}
+/* 行首符号（选择 diff 内容时不带符号） */
+.ai-diff-code::before {
+  user-select: none;
+}
+.ai-diff-line--add .ai-diff-code::before {
+  content: '+ ';
+  color: var(--token-success);
+}
+.ai-diff-line--del .ai-diff-code::before {
+  content: '− ';
+  color: var(--token-error);
+}
+.ai-diff-line--ctx .ai-diff-code::before {
+  content: '  ';
+}
+
+/* ══════════════ ai-files · 文件 chips（纯 CSS 族） ══════════════ */
+
+.ai-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--density-space-xs);
+  align-self: stretch;  /* 容器自稳定；chip 自身保持内容宽 */
+}
+
+.ai-file-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 100%;
+  padding: 2px 8px;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-full);
+  background: var(--token-surface);
+  color: var(--token-text-muted);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  line-height: 1.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition:
+    background-color var(--icen-tx-fast),
+    border-color var(--icen-tx-fast);
+}
+.ai-file-chip:hover {
+  background: var(--token-fill-1);
+  border-color: var(--token-line);
+}
+
+/* 状态色点（尾点，纯 CSS） */
+.ai-file-chip::after {
+  content: '';
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--token-text-faint);
+}
+.ai-file-chip.is-added::after    { background: var(--token-success); }
+.ai-file-chip.is-modified::after { background: var(--token-accent); }
+.ai-file-chip.is-deleted::after  { background: var(--token-error); }
+
+.ai-file-chip.is-deleted {
+  text-decoration: line-through;
+  opacity: 0.75;
+}
+
+.ai-file-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  color: var(--token-text-faint);
+}
+.ai-file-icon svg {
+  width: 13px;
+  height: 13px;
+}
+
+/* 文件类型色（语义 token）：ts/js=冷调 accent-cold，css=accent，json=warning，md=info，img=success */
+.ai-file-chip--ts .ai-file-icon,
+.ai-file-chip--js .ai-file-icon { color: var(--token-accent-cold); }
+.ai-file-chip--css .ai-file-icon { color: var(--token-accent); }
+.ai-file-chip--json .ai-file-icon { color: var(--token-warning); }
+.ai-file-chip--md .ai-file-icon { color: var(--token-info); }
+.ai-file-chip--img .ai-file-icon { color: var(--token-success); }
+
+/* ── 动效守卫 ── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-diff-file { animation: none; }
+  .ai-diff-file.is-accepted,
+  .ai-diff-file.is-rejected { transition: none; }
+}
+
+
+/* ── components/ai-panel.css ── */
+/*
+ * @icen.ai/ui — Component: ai-panel（AI 任务面板族：todo / context / usage，与 behaviors/ai-panel.ts 配套）
+ *
+ * 完整 DOM 契约（类名与规格 §4.8/§4.9/§4.10 一致）：
+ *   <div class="ai-todo" [.is-complete] [data-ai-todo-interactive]>
+ *     <div class="ai-todo-head">
+ *       <span class="ai-todo-progress">2/5</span>
+ *       <div class="ai-todo-bar" role="progressbar" …><i style="width:40%"></i></div>
+ *     </div>
+ *     <div class="ai-todo-item is-pending|running|streaming|approval|done|error|cancelled
+ *          [role="button" tabindex="0"]" data-index="0">
+ *       <span class="ai-item-status"></span>                     <!-- 状态点，纯 CSS 由 .is-* 驱动 -->
+ *       <span class="ai-todo-text">实现登录页</span>
+ *       <span class="ai-todo-active">正在实现登录页…</span>     <!-- is-running 时替换 text（CSS 驱动） -->
+ *     </div>
+ *   </div>
+ *
+ *   <div class="ai-usage">
+ *     <div class="ai-usage-bar" role="img" aria-label="…">
+ *       <i class="ai-usage-seg ai-usage-seg--input|output|cache-read|cache-write|reasoning" style="width:35%"></i>…
+ *     </div>
+ *     <div class="ai-usage-legend">
+ *       <span class="ai-usage-legend-item">
+ *         <i class="ai-usage-dot ai-usage-seg--input"></i>
+ *         <span class="ai-usage-legend-label">输入</span> <span class="ai-usage-legend-value">35k</span>
+ *       </span>…
+ *     </div>
+ *     <div class="ai-usage-total">82k / 200k · 41%</div>
+ *   </div>
+ *
+ *   <aside class="ai-context [.ai-context--inline]" hidden role="dialog" aria-label="上下文">
+ *     <div class="ai-context-head"><span>上下文</span>
+ *       <button type="button" data-ai-context-close aria-label="关闭">×</button></div>
+ *     <section class="ai-context-section"><h3>…</h3>
+ *       <div class="ai-context-section-body">…renderAiContext 产物…</div>   <!-- 可选包裹，亦可直接放内容 -->
+ *     </section>…
+ *   </aside>
+ *
+ *   .ai-item 行（MCP / Skills，规格 §2 基元）：
+ *   <div class="ai-item is-done|is-error" style="--ai-item-tint: var(--token-accent)">
+ *     <span class="ai-item-icon">…svg…</span>
+ *     <span class="ai-item-main">
+ *       <span class="ai-item-title">github</span><span class="ai-item-sub">…</span>
+ *     </span>
+ *     <span class="ai-item-side"><span class="ai-item-status"></span><span class="ai-item-meta">12 工具</span></span>
+ *   </div>
+ *
+ * 依赖说明：
+ *   - .ai-item 完整版在 ai-tool.css（S2）。此处按任务约定重新声明最小骨架（含 --ai-item-tint
+ *     局部变量与状态点），保证 ai-panel.css 单独引入时 todo/context 可用；两边类名/语义一致，
+ *     同页面共存时后加载者覆盖同款属性，视觉不冲突。
+ *   - keyframes ai-status-pulse 为组件局部定义（等同 pill.css 的 pill-pulse），
+ *     时长走 var(--pill-pulse-duration, 1.5s)：pill.css 在场时与其同步，否则自洽。
+ *   - blink keyframes 来自 tokens/colors.css（.animate-blink 同款，共享复用）。
+ *   - base.css：--z-chrome / --icen-tx-* / --icen-ring。只消费 --token-* / --density-* / --radius-*。
+ */
+
+/* ══════════════ .ai-item 最小基元（自包含，兼容 ai-tool.css 完整版） ══════════════ */
+
+.ai-item {
+  --ai-item-tint: var(--token-accent);
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-xs) var(--density-space-sm);
+  border-radius: var(--radius-sm);
+  font-size: var(--density-font-size-sm);
+  min-width: 0;
+  align-self: stretch;  /* 宽度自稳定：宿主 flex/grid 居中时不 shrink-wrap */
+}
+
+.ai-item-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  color: var(--ai-item-tint);
+}
+.ai-item-icon svg {
+  width: 15px;
+  height: 15px;
+}
+
+.ai-item-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.ai-item-title {
+  color: var(--token-text);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-item-sub {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ai-item-side {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+}
+.ai-item-meta {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── 状态点 .ai-item-status：纯 CSS 圆点，由 .is-* 驱动（ai-item 与 ai-todo-item 共用） ── */
+
+.ai-item-status {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  border: 1.5px solid var(--token-text-faint);
+  background: transparent;
+}
+
+/* pending：faint 空心点（默认态即空心） */
+.ai-item.is-pending > .ai-item-status,
+.ai-todo-item.is-pending > .ai-item-status { }
+
+/* running / streaming：accent 脉冲点 */
+.ai-item.is-running > .ai-item-status,
+.ai-todo-item.is-running > .ai-item-status,
+.ai-item.is-streaming > .ai-item-status,
+.ai-todo-item.is-streaming > .ai-item-status {
+  border-color: var(--token-accent);
+  background: var(--token-accent);
+  animation: ai-status-pulse var(--pill-pulse-duration, 1.5s) ease-in-out infinite;
+}
+
+/* approval：warning 点 */
+.ai-item.is-approval > .ai-item-status,
+.ai-todo-item.is-approval > .ai-item-status {
+  border-color: var(--token-warning);
+  background: var(--token-warning);
+}
+
+/* done：success 点 */
+.ai-item.is-done > .ai-item-status,
+.ai-todo-item.is-done > .ai-item-status {
+  border-color: var(--token-success);
+  background: var(--token-success);
+}
+
+/* error：error 点 */
+.ai-item.is-error > .ai-item-status,
+.ai-todo-item.is-error > .ai-item-status {
+  border-color: var(--token-error);
+  background: var(--token-error);
+}
+
+/* cancelled：faint 实心点 + 标题删除线（规格 §1） */
+.ai-item.is-cancelled > .ai-item-status,
+.ai-todo-item.is-cancelled > .ai-item-status {
+  border-color: var(--token-text-faint);
+  background: var(--token-text-faint);
+}
+.ai-item.is-cancelled .ai-item-title,
+.ai-todo-item.is-cancelled .ai-todo-text {
+  text-decoration: line-through;
+}
+
+/* 组件局部 keyframes（等同 pill-pulse，避免硬依赖 pill.css） */
+@keyframes ai-status-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.7); }
+}
+
+/* ══════════════ ai-todo · 任务清单（§4.8） ══════════════ */
+
+.ai-todo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  font-size: var(--density-font-size-sm);
+  min-width: 0;
+  align-self: stretch;  /* 输出容器宽度自稳定 */
+}
+
+.ai-todo-head {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  min-width: 0;
+}
+
+.ai-todo-progress {
+  flex-shrink: 0;
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 进度条：feedback progress 视觉（token 消费） */
+.ai-todo-bar {
+  flex: 1;
+  height: 4px;
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  background: color-mix(in srgb, var(--token-line-soft) 40%, transparent);
+}
+.ai-todo-bar > i {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-full);
+  background: var(--token-accent);
+  transition: width var(--icen-tx-slow);
+}
+.ai-todo.is-complete .ai-todo-bar > i {
+  background: var(--token-success);
+}
+
+.ai-todo-item {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding: 3px var(--density-space-xs);
+  border-radius: var(--radius-xs);
+  min-width: 0;
+}
+
+/* 交互模式（initAiTodo 升级 role=button） */
+.ai-todo-item[role='button'] {
+  cursor: pointer;
+  transition: background-color var(--icen-tx-fast);
+}
+.ai-todo-item[role='button']:hover {
+  background: var(--token-fill-1);
+}
+.ai-todo-item:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+.ai-todo-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* activeForm：运行中替换式强调（Claude Code 模式） */
+.ai-todo-active {
+  display: none;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--token-accent-deep);
+}
+.ai-todo-item.is-running .ai-todo-text { display: none; }
+.ai-todo-item.is-running .ai-todo-active { display: inline; }
+
+/* done/cancelled：淡化 + 删除线 */
+.ai-todo-item.is-done .ai-todo-text,
+.ai-todo-item.is-cancelled .ai-todo-text {
+  color: var(--token-text-faint);
+  text-decoration: line-through;
+}
+
+/* ══════════════ ai-usage · 用量条（§4.9） ══════════════ */
+
+.ai-usage {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-muted);
+  min-width: 0;
+  align-self: stretch;  /* 输出容器宽度自稳定 */
+}
+
+.ai-usage-bar {
+  display: flex;
+  height: 6px;
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  background: color-mix(in srgb, var(--token-line-soft) 40%, transparent);
+}
+
+.ai-usage-seg {
+  display: block;
+  height: 100%;
+  min-width: 0;
+  transition: width var(--icen-tx-slow);
+}
+
+/* 配色契约：input=accent / output=success / cacheRead=info / cacheWrite=warning / reasoning=faint */
+.ai-usage-seg--input       { background: var(--token-accent); }
+.ai-usage-seg--output      { background: var(--token-success); }
+.ai-usage-seg--cache-read  { background: var(--token-info); }
+.ai-usage-seg--cache-write { background: var(--token-warning); }
+.ai-usage-seg--reasoning   { background: var(--token-text-faint); }
+
+/* 图例：色点 + 标签 + 数值（缓存分列，计费诚实） */
+.ai-usage-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--density-space-xs) var(--density-space-sm);
+}
+.ai-usage-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-variant-numeric: tabular-nums;
+}
+.ai-usage-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+}
+.ai-usage-legend-label { color: var(--token-text-muted); }
+.ai-usage-legend-value { color: var(--token-text); font-weight: 500; }
+
+.ai-usage-total {
+  font-variant-numeric: tabular-nums;
+  color: var(--token-text-muted);
+}
+
+/* ══════════════ ai-usage-ring · 上下文窗口环形指示器（点击弹出完整分解） ══════════════ */
+
+.ai-usage-ring {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: var(--radius-full);
+  color: var(--token-text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    color var(--icen-tx-fast),
+    background-color var(--icen-tx-fast);
+}
+.ai-usage-ring:hover {
+  background: var(--token-fill-1);
+  color: var(--token-text);
+}
+.ai-usage-ring:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+.ai-usage-ring > svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg); /* 12 点起笔 */
+}
+.ai-usage-ring-track {
+  fill: none;
+  stroke: var(--token-fill-2);
+  stroke-width: 3;
+}
+.ai-usage-ring-fill {
+  fill: none;
+  stroke: var(--token-accent);
+  stroke-width: 3;
+  stroke-linecap: round;
+  transition:
+    stroke-dasharray var(--icen-tx-slow),
+    stroke var(--icen-tx-fast);
+}
+/* 状态档：<60% ok（accent）/ 60–85% warn / >85% hot */
+.ai-usage-ring.is-warn .ai-usage-ring-fill { stroke: var(--token-warning); }
+.ai-usage-ring.is-hot .ai-usage-ring-fill { stroke: var(--token-error); }
+.ai-usage-ring.is-hot {
+  animation: ai-usage-ring-pulse var(--ai-usage-ring-pulse-duration, 1.6s) ease-in-out infinite;
+}
+@keyframes ai-usage-ring-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+.ai-usage-ring-pct {
+  position: relative;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+
+/* 大号变体（常驻工具栏/头部用） */
+.ai-usage-ring--lg {
+  width: 44px;
+  height: 44px;
+}
+.ai-usage-ring--lg .ai-usage-ring-pct { font-size: 10px; }
+
+/* 弹层（复用 .popover 基座，内容区只补间距） */
+.ai-usage-popover {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-md);
+}
+.ai-usage-popover-title {
+  font-size: var(--density-font-size-sm);
+  font-weight: 600;
+  color: var(--token-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-usage-ring.is-hot { animation: none; }
+  .ai-usage-ring-fill { transition: none; }
+}
+
+/* ══════════════ ai-context · 上下文抽屉（§4.10） ══════════════ */
+
+.ai-context {
+  position: fixed;
+  inset: 0 0 0 auto;
+  width: min(360px, 92vw);
+  z-index: var(--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(--ai-context-duration, var(--duration-normal)) var(--ease-out);
+  overflow-y: auto;
+}
+.ai-context[hidden] {
+  display: none;
+}
+.ai-context.is-open {
+  transform: translateX(0);
+}
+
+/* 页面流内嵌变体：不做 fixed、不滑入 */
+.ai-context--inline {
+  position: static;
+  inset: auto;
+  width: auto;
+  z-index: auto;
+  transform: none;
+  transition: none;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  box-shadow: var(--token-shadow-elevated);
+  overflow-y: visible;
+}
+
+.ai-context-head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm) var(--density-space-md);
+  background: var(--token-surface);
+  border-bottom: 1px solid var(--token-line-soft);
+  font-size: var(--density-font-size-sm);
+  font-weight: 600;
+  color: var(--token-text);
+}
+
+.ai-context-head [data-ai-context-close] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: var(--token-text-faint);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color var(--icen-tx-fast),
+    color var(--icen-tx-fast);
+}
+.ai-context-head [data-ai-context-close]:hover {
+  color: var(--token-text);
+  background: var(--token-fill-1);
+}
+.ai-context-head [data-ai-context-close]:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+.ai-context-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  padding: var(--density-space-sm) var(--density-space-md);
+  min-width: 0;
+}
+.ai-context-section ~ .ai-context-section {
+  border-top: 1px solid var(--token-line-soft);
+}
+.ai-context-section h3 {
+  margin: 0;
+  font-size: var(--density-font-size-xs);
+  font-weight: 600;
+  color: var(--token-text-muted);
+}
+.ai-context-section-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  min-width: 0;
+}
+
+/* ══════════════ ai-audit（renderAiAudit，规格 §12.2） ══════════════ */
+
+/*
+ *   <div class="ai-audit">
+ *     <div class="ai-audit-totals"><span class="ai-audit-totals-text">12 次请求 · 1 失败 · 1.2M tok · $0.42 · TTFT 240ms</span></div>
+ *     <div class="ai-audit-models">
+ *       <div class="ai-audit-model-row"><span class="ai-audit-model-name">kimi/kimi-k3</span>
+ *         <span class="ai-audit-model-meta">8 次 · 900k tok · $0.31</span></div>…
+ *     </div>
+ *     <div class="ai-audit-list">
+ *       <div class="ai-audit-item is-done|is-error">
+ *         <span class="ai-audit-dot"></span>
+ *         <span class="ai-audit-item-main"><span class="ai-audit-item-model">kimi · kimi-k3</span>
+ *           <span class="ai-audit-item-meta">14:03 · 1.2s · TTFT 240ms · 12.3k tok</span></span>
+ *         <span class="ai-audit-item-error">网络请求失败：…</span>   <!-- 仅 is-error -->
+ *       </div>…
+ *     </div>
+ *     <button class="btn btn-sm ai-audit-clear">清除审计</button>
+ *   </div>
+ */
+
+.ai-audit {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+  align-self: stretch;
+  min-width: 0;
+  font-size: var(--density-font-size-sm);
+}
+.ai-audit-empty {
+  padding: var(--density-space-md);
+  text-align: center;
+  color: var(--token-text-faint);
+  font-size: var(--density-font-size-xs);
+}
+
+/* totals 行：等宽数字，faint 汇总 */
+.ai-audit-totals-text {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* byModel 分组行 */
+.ai-audit-models {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ai-audit-model-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  min-width: 0;
+}
+.ai-audit-model-name {
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-audit-model-meta {
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 最近条目（最新在前） */
+.ai-audit-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+.ai-audit-item {
+  display: flex;
+  align-items: baseline;
+  gap: var(--density-space-xs);
+  padding: 2px var(--density-space-xs);
+  border-radius: var(--radius-xs);
+  min-width: 0;
+}
+.ai-audit-item:hover {
+  background: var(--token-fill-1);
+}
+.ai-audit-dot {
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--token-text-faint);
+}
+.ai-audit-item.is-done .ai-audit-dot {
+  background: var(--token-success);
+}
+.ai-audit-item.is-error .ai-audit-dot {
+  background: var(--token-error);
+}
+.ai-audit-item-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+.ai-audit-item-model {
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-audit-item-meta {
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+.ai-audit-item-error {
+  flex-shrink: 0;
+  max-width: 45%;
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-error);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-audit-item.is-error .ai-audit-item-model {
+  color: var(--token-error);
+}
+
+/* 清除钮（右对齐；视觉复用 .btn .btn-sm） */
+.ai-audit-clear {
+  align-self: flex-end;
+}
+
+/* ── 动效守卫 ── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-todo-bar > i,
+  .ai-usage-seg { transition: none; }
+  .ai-context { transition: none; }
+  .ai-item-status { animation: none; }
+}
+
+
+/* ── components/ai-tool.css ── */
+/*
+ * @icen.ai/ui — Component: ai-tool（AI 工具调用卡 + 子智能体卡；含 .ai-item 条目基元完整定义）
+ *
+ * 完整契约：
+ *   ── 条目基元 .ai-item（规格 §2 骨架：所有行式 AI 条目的"基类"，todo/panel 亦复用）──
+ *   <div class="ai-item is-running" style="--ai-item-tint: var(--token-accent)">
+ *     <span class="ai-item-icon"><!-- svg --></span>
+ *     <div class="ai-item-main">
+ *       <div class="ai-item-title">一行摘要</div>
+ *       <div class="ai-item-sub">次要信息（路径/参数）</div>
+ *     </div>
+ *     <div class="ai-item-side">
+ *       <span class="ai-item-status"></span>   ← 状态点，纯 CSS 由 .is-* 驱动
+ *       <span class="ai-item-meta">1.2s</span>
+ *     </div>
+ *     <div class="ai-item-detail" hidden>展开详情</div>
+ *   </div>
+ *
+ *   ── 工具调用卡（.ai-tool-head 复用 .ai-item-* 零件，不带 .ai-item 壳）──
+ *   <div class="ai-tool ai-tool--shell is-done" data-ai-id="…" data-ai-kind="shell">
+ *     <button class="ai-tool-head" type="button" aria-expanded="false">
+ *       <span class="ai-item-icon" aria-hidden="true">…svg…</span>
+ *       <span class="ai-item-main">
+ *         <span class="ai-item-title">Read</span>
+ *         <span class="ai-item-sub">src/foo.ts:1-50</span>
+ *       </span>
+ *       <span class="ai-item-status" role="img" aria-label="完成"></span>
+ *       <span class="ai-item-meta">0.4s</span>
+ *     </button>
+ *     <div class="ai-tool-body" hidden>
+ *       <div class="ai-tool-io"><div class="ai-tool-io-label">输入</div><pre class="ai-tool-io-content">…</pre></div>
+ *       <div class="ai-tool-io"><div class="ai-tool-io-label">输出</div><pre class="ai-tool-io-content">…</pre></div>
+ *       <div class="ai-tool-approval">            ← 仅 .is-approval 显示（纯 CSS 驱动）
+ *         <div class="ai-tool-approval-reason" hidden>审批原因</div>  ← 可选（model.approval.reason）
+ *         <button class="btn btn-sm btn-primary" data-ai-approve type="button">允许</button>
+ *         <button class="btn btn-sm" data-ai-reject type="button">拒绝</button>
+ *       </div>
+ *     </div>
+ *   </div>
+ *
+ *   ── 子智能体卡 ──
+ *   <div class="ai-subagent is-running" data-ai-id="…" data-ai-kind="subagent">
+ *     <button class="ai-subagent-head" type="button" aria-expanded="false">…head 结构同上…</button>
+ *     <div class="ai-subagent-body" hidden>
+ *       <div class="ai-subagent-stream">          ← 嵌套 .ai-tool / .ai-subagent；
+ *         …                                    行间 style="--ai-activity-index:i" 驱动渐入 stagger
+ *       </div>
+ *       <div class="ai-subagent-result">完成回执摘要</div>
+ *     </div>
+ *   </div>
+ *
+ * 状态机 7 态（全条目共享，规格 §1）：
+ *   .is-pending   faint 空心点
+ *   .is-running   tint 脉冲点（--ai-item-pulse-duration 变量化时长）
+ *   .is-streaming ▍流式光标（colors.css blink keyframes，--ai-item-blink-duration 变量化）
+ *   .is-approval  warning 点 + 外环；卡片边框 warning；显示审批按钮
+ *   .is-done      success 纯 CSS 对勾
+ *   .is-error     error 点 + 外环；失败条目由 behavior 首次渲染自动展开
+ *   .is-cancelled faint 点 + 标题删除线
+ *
+ * kind 修饰类 ai-tool--<kind> 只覆盖 --ai-item-tint（继承 = 变量级联，不改结构）：
+ *   read/search/grep/glob=info · edit/write=accent · rm=error · shell=muted · mcp/skill=success
+ *   browser/fetch/todo/plan/subagent/note = 默认 accent（不写规则）
+ * 第三方 registerAiKind 的 tint 由 behavior 内联 --ai-item-tint 兜底。
+ */
+
+/* ══════════════════════════════════════════════════════════════
+   条目基元 .ai-item（行式条目"基类"）
+   ══════════════════════════════════════════════════════════════ */
+
+.ai-item {
+  /* 局部变量槽：kind/变体只覆盖这些变量（--btn-* 同款继承模式） */
+  --ai-item-tint: var(--token-accent);
+  --ai-item-pulse-duration: 1.5s;  /* running 脉冲（pill --pill-pulse-duration 同款变量化） */
+  --ai-item-blink-duration: 1s;    /* streaming 光标闪烁 */
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--density-space-sm);
+  min-width: 0;
+  align-self: stretch;  /* 宽度自稳定：宿主 flex/grid 居中时不 shrink-wrap（width:100% 会塌成 min-content，禁用） */
+}
+
+.ai-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--ai-item-tint);
+  transition: color var(--icen-tx-fast);
+}
+.ai-item-icon > svg {
+  width: 16px;
+  height: 16px;
+}
+
+.ai-item-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.ai-item-title {
+  font-size: var(--density-font-size-md);
+  line-height: 1.4;
+  color: var(--token-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-item-sub {
+  font-size: var(--density-font-size-xs);
+  line-height: 1.4;
+  color: var(--token-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ai-item-side {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--density-space-xs);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+/* head 直排结构（无 .ai-item-side 包裹）时，状态点顶到右侧 */
+.ai-tool-head > .ai-item-status,
+.ai-subagent-head > .ai-item-status {
+  margin-left: auto;
+}
+
+.ai-item-meta {
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.ai-item-detail {
+  flex-basis: 100%;
+  min-width: 100%;
+}
+
+/* ── 状态点 .ai-item-status（纯 CSS 圆点，由 .is-* 决定颜色与动效） ── */
+.ai-item-status {
+  position: relative;
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+/* 等待：faint 空心点（.ai-subagent 与 .ai-item 共享同一状态语言） */
+:is(.ai-item, .ai-tool, .ai-subagent).is-pending .ai-item-status {
+  border: 1.5px solid var(--token-text-faint);
+}
+
+/* 执行中：tint 脉冲点 */
+:is(.ai-item, .ai-tool, .ai-subagent).is-running .ai-item-status {
+  background: var(--ai-item-tint);
+  animation: ai-item-pulse var(--ai-item-pulse-duration) ease-in-out infinite;
+}
+@keyframes ai-item-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.7); }
+}
+
+/* 流式中：▍光标闪烁（复用 colors.css 的 blink keyframes，animate-blink 同款） */
+:is(.ai-item, .ai-tool, .ai-subagent).is-streaming .ai-item-status {
+  width: 3px;
+  height: 12px;
+  border-radius: 1px;
+  background: var(--ai-item-tint);
+  animation: blink var(--ai-item-blink-duration) step-end infinite;
+}
+
+/* 待人确认：warning 点 + 外环 */
+:is(.ai-item, .ai-tool, .ai-subagent).is-approval .ai-item-status {
+  background: var(--token-warning);
+  box-shadow: 0 0 0 3px var(--token-warning-muted);
+}
+
+/* 完成：success 对勾（纯 CSS，无 SVG） */
+:is(.ai-item, .ai-tool, .ai-subagent).is-done .ai-item-status::after {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: -1px;
+  width: 5px;
+  height: 9px;
+  border-right: 1.5px solid var(--token-success);
+  border-bottom: 1.5px solid var(--token-success);
+  transform: rotate(45deg);
+}
+
+/* 失败：error 点 + 外环 */
+:is(.ai-item, .ai-tool, .ai-subagent).is-error .ai-item-status {
+  background: var(--token-error);
+  box-shadow: 0 0 0 3px var(--token-error-muted);
+}
+
+/* 已取消：faint 点 + 标题删除线 */
+:is(.ai-item, .ai-tool, .ai-subagent).is-cancelled .ai-item-status {
+  background: var(--token-text-faint);
+  opacity: 0.6;
+}
+:is(.ai-item, .ai-tool, .ai-subagent).is-cancelled .ai-item-title {
+  color: var(--token-text-faint);
+  text-decoration: line-through;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   工具调用卡 .ai-tool
+   ══════════════════════════════════════════════════════════════ */
+
+.ai-tool {
+  --ai-item-tint: var(--token-accent);
+  align-self: stretch;  /* 宽度自稳定：宿主 flex/grid 居中时不 shrink-wrap */
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+}
+
+/* ── kind 修饰类：只覆盖 --ai-item-tint ──
+   browser/fetch/todo/plan/subagent/note 用默认 accent，不写规则 */
+.ai-tool--read,
+.ai-tool--search,
+.ai-tool--grep,
+.ai-tool--glob {
+  --ai-item-tint: var(--token-info);
+}
+.ai-tool--edit,
+.ai-tool--write {
+  --ai-item-tint: var(--token-accent);
+}
+.ai-tool--rm {
+  --ai-item-tint: var(--token-error);
+}
+.ai-tool--shell {
+  --ai-item-tint: var(--token-text-muted);
+}
+.ai-tool--mcp,
+.ai-tool--skill {
+  --ai-item-tint: var(--token-success);
+}
+
+/* ── head ── */
+.ai-tool-head,
+.ai-subagent-head {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  width: 100%;
+  padding: var(--density-space-xs) var(--density-space-sm);
+  border: none;
+  border-radius: inherit; /* hover 底色不戳破卡片圆角 */
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--icen-tx-fast);
+}
+.ai-tool-head:hover,
+.ai-subagent-head:hover {
+  background: var(--token-fill-1);
+}
+.ai-tool-head:focus-visible,
+.ai-subagent-head:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+
+/* ── body ── */
+.ai-tool-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm);
+  border-top: 1px solid var(--token-line-soft);
+  animation: icen-pop-in var(--icen-tx-fast);
+}
+.ai-tool-body[hidden],
+.ai-subagent-body[hidden],
+.ai-tool-io[hidden],
+.ai-subagent-result[hidden] {
+  display: none;
+}
+
+/* ── 输入/输出区块（pre 等宽、可滚、max-height 收敛） ── */
+.ai-tool-io {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.ai-tool-io-label {
+  font-size: var(--density-font-size-2xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--token-text-faint);
+}
+.ai-tool-io-content {
+  --ai-tool-io-max: 12rem; /* 收敛上限（组件局部变量） */
+  margin: 0;
+  padding: var(--density-space-xs) var(--density-space-sm);
+  max-height: var(--ai-tool-io-max);
+  overflow: auto;
+  background: var(--token-bg-soft);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-sm);
+  line-height: 1.5;
+  color: var(--token-text);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 多模态回执（MCP content 数组 → 媒体/链接，spec §10.3）：
+   容器纵向排布；媒体本体复用 ai-chat.css 的 .ai-msg-media 全局样式 */
+.ai-tool-io-media {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  min-width: 0;
+}
+
+/* ── 审批区（仅 .is-approval 显示，纯 CSS 驱动） ── */
+.ai-tool-approval {
+  display: none;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding-top: var(--density-space-xs);
+  border-top: 1px dashed var(--token-line-soft);
+}
+.ai-tool.is-approval .ai-tool-approval {
+  display: flex;
+}
+.ai-tool-approval-reason {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--density-font-size-xs);
+  line-height: 1.5;
+  color: var(--token-text-muted);
+}
+.ai-tool.is-approval {
+  border-color: color-mix(in srgb, var(--token-warning) 40%, transparent);
+}
+.ai-tool.is-error {
+  border-color: color-mix(in srgb, var(--token-error) 40%, transparent);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   子智能体卡 .ai-subagent（嵌套活动流 = 缩进 + 左侧引导线，可递归）
+   ══════════════════════════════════════════════════════════════ */
+
+.ai-subagent {
+  --ai-item-tint: var(--token-accent);
+  align-self: stretch;  /* 宽度自稳定：宿主 flex/grid 居中时不 shrink-wrap */
+  border: 1px solid var(--token-line-soft);
+  border-left: 3px solid var(--ai-item-tint); /* 代理卡身份：tint 左边条 */
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+}
+.ai-subagent.is-error {
+  border-left-color: var(--token-error);
+}
+.ai-subagent.is-done {
+  border-left-color: var(--token-success);
+}
+
+.ai-subagent-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-sm);
+  border-top: 1px solid var(--token-line-soft);
+}
+
+/* 嵌套流：缩进 + 引导线；行间渐入 stagger 由 --ai-activity-index（render 写入）驱动 */
+.ai-subagent-stream {
+  --ai-stagger-step: 40ms; /* 活动项渐入步长（组件局部变量） */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-space-xs);
+  padding-left: var(--density-space-md);
+}
+.ai-subagent-stream::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: var(--density-space-xs);
+  bottom: var(--density-space-xs);
+  width: 1px;
+  background: var(--token-line-soft);
+}
+/* 展开（body 从 hidden 解除）时，活动项逐条 icen-pop-in 渐入 */
+.ai-subagent-stream > * {
+  animation: icen-pop-in var(--icen-tx-fast) backwards;
+  animation-delay: calc(var(--ai-activity-index, 0) * var(--ai-stagger-step));
+}
+
+/* 完成回执 */
+.ai-subagent-result {
+  padding: var(--density-space-xs) var(--density-space-sm);
+  background: var(--token-bg-soft);
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-sm);
+  font-size: var(--density-font-size-sm);
+  line-height: 1.5;
+  color: var(--token-text-muted);
+}
+.ai-subagent.is-done .ai-subagent-result {
+  color: var(--token-text);
+  border-color: color-mix(in srgb, var(--token-success) 30%, transparent);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   动效守卫
+   ══════════════════════════════════════════════════════════════ */
+@media (prefers-reduced-motion: reduce) {
+  :is(.ai-item, .ai-tool, .ai-subagent).is-running .ai-item-status,
+  :is(.ai-item, .ai-tool, .ai-subagent).is-streaming .ai-item-status {
+    animation: none;
+  }
+  .ai-tool-body,
+  .ai-subagent-stream > * {
+    animation: none;
+  }
+  .ai-tool-head,
+  .ai-subagent-head {
+    transition: none;
+  }
+}
+
+/* ═══ 工具卡内嵌图表（回执 = ChartSpec 时 setIo 走 renderChart，§13）═══ */
+.ai-tool-io-chart {
+  width: 100%;
+  min-width: 0;
+}
+
+/* ═══ AI 工具挂载区（ai-tools.ts 的 createAiToolArea，§13）═══
+ *   .ai-tools-mount > .ai-tools-item > head（名/时间/×）+ body（工具自渲染） */
+.ai-tools-mount {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--density-space-md);
+  align-items: start;
+}
+.ai-tools-item {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--token-line-soft);
+  border-radius: var(--radius-md);
+  background: var(--token-surface);
+  animation: icen-pop-in var(--duration-normal) var(--ease-out);
+}
+.ai-tools-item-head {
+  display: flex;
+  align-items: center;
+  gap: var(--density-space-sm);
+  padding: var(--density-space-xs) var(--density-space-sm);
+  border-bottom: 1px solid var(--token-line-soft);
+}
+.ai-tools-item-name {
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-xs);
+  color: var(--token-text);
+}
+.ai-tools-item-meta {
+  flex: 1;
+  font-family: var(--font-mono);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  font-variant-numeric: tabular-nums;
+}
+.ai-tools-item-remove {
+  border: 0;
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  font-size: var(--density-font-size-sm);
+  line-height: 1;
+  padding: 2px 6px;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.ai-tools-item-remove:hover { color: var(--token-error); background: var(--token-fill-1); }
+.ai-tools-item-remove:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.ai-tools-item-body {
+  padding: var(--density-space-sm);
+  min-width: 0;
 }
 
-/* ══════════════════════════════════════════════════════════════
-   动效与无障碍兜底
-   ══════════════════════════════════════════════════════════════ */
-
-/* reduced-motion：所有动画/过渡压缩到 ~0ms（保留可访问性最小可视信号） */
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
+  .ai-tools-item { animation: none; }
 }
 
-/* 触屏设备（无精细指针）：关闭 hover 抬升、压低 pressable scale */
-@media (pointer: coarse) {
-  .lift:hover { transform: none; }
-  .pressable:active { transform: translateY(0) scale(0.99); }
+/* 挂载项折叠态：head 为 button（chevron + 名/时间 + ×） */
+.ai-tools-item-head {
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  width: 100%;
+  font: inherit;
 }
-
-/* 高对比度模式（Windows High Contrast / 强制 colors） */
-@media (forced-colors: active) {
-  .pressable, .control, .lift, .surface-elevated, .focus-ring:focus-visible {
-    forced-color-adjust: none;
-  }
-  .focus-ring:focus-visible,
-  .pressable:focus-visible {
-    outline: 2px solid Highlight;
-    outline-offset: 2px;
-  }
+.ai-tools-item-chevron {
+  flex-shrink: 0;
+  color: var(--token-text-faint);
+  font-size: var(--density-font-size-xs);
+  transition: transform var(--icen-tx-fast);
 }
-
-/* 打印：去掉阴影/背景/动效，节约墨水并避免打印截断 */
-@media print {
-  *, *::before, *::after {
-    background: transparent !important;
-    color: #000 !important;
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-  body { font-size: 12pt; line-height: 1.4; }
-  a, a:visited { text-decoration: underline; }
-  a[href]::after { content: ' (' attr(href) ')'; font-size: 90%; }
-  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
-  h1, h2, h3 { page-break-after: avoid; }
-  .pressable, .lift, .surface-elevated { box-shadow: none !important; transform: none !important; }
+.ai-tools-item-head[aria-expanded='false'] .ai-tools-item-chevron {
+  transform: rotate(-90deg);
+}
+.ai-tools-item.is-collapsed .ai-tools-item-body {
+  display: none;
+}
+.ai-tools-item-head:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
 }
 
 
@@ -2454,11 +5079,11 @@ html {
   height: 16px;
   padding: 0 4px;
   font: inherit;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 600;
   line-height: 1;
   font-variant-numeric: tabular-nums;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: var(--token-error);
   border: 2px solid var(--token-surface);
   border-radius: var(--radius-full);
@@ -2481,7 +5106,7 @@ html {
 .badge--sm {
   min-width: 14px;
   height: 14px;
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   padding: 0 3px;
 }
 .badge--sm.badge--dot {
@@ -2526,7 +5151,7 @@ html {
 /* 挂在实底色按钮上时用更浅的边框 */
 .btn-primary .badge,
 .btn-danger .badge {
-  border-color: var(--token-on-accent, #fff);
+  border-color: var(--token-on-accent);
 }
 
 /* 数字超过 99 显示 99+（消费方决定是否使用，这里只保证宽度容纳） */
@@ -2535,10 +5160,6 @@ html {
   padding: 0 5px;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .badge { transition: none; }
-}
-
 
 /* ── components/breadcrumb.css ── */
 /*
@@ -2663,7 +5284,7 @@ html {
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-overlay);
   z-index: var(--z-popover);
-  animation: breadcrumb-drop-in var(--icen-tx-fast);
+  animation: icen-pop-in var(--icen-tx-fast);
 }
 .breadcrumb-dropdown-menu[hidden] { display: none; }
 .breadcrumb-dropdown-menu a {
@@ -2679,10 +5300,6 @@ html {
   background: var(--token-fill-1);
   color: var(--token-text);
 }
-@keyframes breadcrumb-drop-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
-}
 
 /* ── 面包屑分隔符变体 ── */
 .breadcrumb--slash .breadcrumb-sep::after { content: '/'; }
@@ -2782,7 +5399,7 @@ html {
 /* ── 变体 ── */
 .btn-primary {
   --btn-bg: var(--token-accent);
-  --btn-fg: var(--token-on-accent, #fff);
+  --btn-fg: var(--token-on-accent);
   --btn-border: var(--token-accent);
   --btn-bg-hover: var(--token-accent-deep, color-mix(in srgb, var(--token-accent) 85%, black));
   --btn-border-hover: var(--token-accent-deep, var(--token-accent));
@@ -2798,7 +5415,7 @@ html {
   --btn-bg-hover: var(--token-error);
   --btn-border-hover: var(--token-error);
 }
-.btn-danger:hover { color: var(--token-on-accent, #fff); }
+.btn-danger:hover { color: var(--token-on-accent); }
 
 .btn-ghost {
   --btn-bg: transparent;
@@ -2869,14 +5486,11 @@ html {
   border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
   border-top-color: currentColor;
   border-radius: 50%;
-  animation: btn-spin var(--duration-slow) linear infinite;
+  animation: icen-spin var(--btn-spin-duration, var(--duration-slow)) linear infinite;
   opacity: 1; /* 覆盖 .pressable::after 渐变（若与 .pressable 同用） */
   background: none;
   pointer-events: none;
 }
-@keyframes btn-spin {
-  to { transform: rotate(360deg); }
-}
 
 /* 图标按钮内部 svg 默认尺寸对齐字号 */
 .btn-icon-start, .btn-icon-end {
@@ -2886,7 +5500,7 @@ html {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .btn.is-loading::after { animation-duration: 1.2s; }
+  .btn.is-loading::after { --btn-spin-duration: 1.2s; }
 }
 
 
@@ -2918,6 +5532,7 @@ html {
  */
 
 .card {
+  position: relative;
   background: var(--token-card);
   border: 1px solid var(--token-outline-soft);
   box-shadow: var(--token-shadow-inset);
@@ -2984,14 +5599,11 @@ html {
   transform: scale(1.04);
 }
 .card-media > img,
-.card-media > video {
-  transition: transform var(--icen-tx-slow) var(--ease-out);
-}
-.card-media > img,
 .card-media > video {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transition: transform var(--icen-tx-slow) var(--ease-out);
 }
 .card-tag {
   position: absolute;
@@ -3000,7 +5612,7 @@ html {
   padding: 2px var(--density-space-xs);
   font-size: var(--density-font-size-xs);
   font-weight: 600;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: color-mix(in srgb, var(--token-text) 70%, transparent);
   border-radius: var(--radius-xs);
   backdrop-filter: blur(8px);
@@ -3114,7 +5726,6 @@ html {
   right: var(--density-space-sm);
   z-index: 1;
 }
-.card { position: relative; }
 
 
 /* ── components/chart-area.css ── */
@@ -3216,6 +5827,16 @@ html {
   .chart-vbar-bar, .chart-hbar-bar { transition: none; }
 }
 
+/* ── 多系列：分组（簇内并排）与堆叠（列内向上叠）── */
+.chart-vbar-track--multi { gap: 2px; }
+.chart-vbar-track--multi > .chart-vbar-bar { flex: 1; min-width: 0; width: auto; }
+.chart-vbar-track--multi.chart-vbar-track--stacked {
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 0;
+}
+.chart-vbar-track--multi.chart-vbar-track--stacked > .chart-vbar-bar { flex: none; width: 100%; }
+
 
 /* ── components/chart-gauge.css ── */
 /*
@@ -3247,7 +5868,7 @@ html {
   gap: 1px;
 }
 .chart-gauge-value {
-  font-size: 20px;
+  font-size: var(--density-font-size-2xl);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: var(--token-text);
@@ -3312,6 +5933,46 @@ html {
 .chart-heatmap-legend > span:first-child { margin-right: 2px; }
 .chart-heatmap-legend > span:last-child { margin-left: 2px; }
 
+/* ── 贡献日历（renderCalendar）：月份标签 + 星期列 + 周格 ──
+ * 布局 grid：左列星期标签（一/三/五/日），右列自上而下 月份行 / 周格 / 图例。
+ * 月份标签按周列定位：left = col / columns * 100%。 */
+.chart-calendar {
+  display: grid;
+  grid-template-columns: 14px 1fr;
+  grid-template-rows: 14px auto auto;
+  column-gap: 4px;
+  row-gap: 3px;
+}
+.chart-calendar-months {
+  grid-column: 2;
+  position: relative;
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+}
+.chart-calendar-month {
+  position: absolute;
+  top: 0;
+  left: calc(var(--col, 0) / var(--columns, 1) * 100%);
+  white-space: nowrap;
+}
+.chart-calendar-weekdays {
+  grid-column: 1;
+  grid-row: 2;
+  display: grid;
+  grid-template-rows: repeat(7, 1fr);
+  font-size: var(--density-font-size-2xs);
+  color: var(--token-text-faint);
+  line-height: 1;
+}
+.chart-calendar .chart-heatmap-grid {
+  grid-column: 2;
+  grid-row: 2;
+}
+.chart-calendar .chart-heatmap-legend {
+  grid-column: 2;
+  grid-row: 3;
+}
+
 
 /* ── components/chart-line.css ── */
 /*
@@ -3382,6 +6043,33 @@ html {
 .chart-radar { gap: var(--density-space-md); }
 
 
+/* ── components/chart-scatter.css ── */
+/*
+ * @icen.ai/ui — Component: chart-scatter（散点/气泡图专属样式）
+ * 依赖：charts.css（基座 .chart / tooltip / [data-chart-mark] 交互态）
+ *
+ * DOM 由 behaviors/charts.ts 的 renderScatter 构建：
+ *   .chart-scatter > svg（360×220 viewBox，网格 + 刻度 + circle[data-chart-mark]）
+ * 气泡第三维：points[].size 映射半径 3–10；hover/点击/右键走通用层委托。
+ */
+
+.chart-scatter svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.chart-scatter circle[data-chart-mark] {
+  transition: fill-opacity var(--icen-tx-fast);
+}
+.chart-scatter circle[data-chart-mark]:hover {
+  fill-opacity: 0.85;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chart-scatter circle[data-chart-mark] { transition: none; }
+}
+
+
 /* ── components/chart-sparkline.css ── */
 /*
  * @icen.ai/ui — Component: chart-sparkline（迷你趋势线专属样式）
@@ -3505,7 +6193,7 @@ html {
   flex: 1;
   min-width: 0;
   text-align: center;
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   color: var(--token-text-faint);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3521,6 +6209,91 @@ html {
 .chart-tone-5 { --chart-tone: var(--token-info); }
 .chart-tone-6 { --chart-tone: color-mix(in srgb, var(--token-text) 50%, transparent); }
 
+/* ═══ 通用层（renderChart）：标题 / 内置 tooltip / 标记交互 / 图例切换 ═══ */
+
+/* 标题（spec.title 有值时渲染） */
+.chart-title {
+  font-size: var(--density-font-size-sm);
+  font-weight: 600;
+  color: var(--token-text);
+}
+
+/* 头部行（renderChart 渲染）：标题 + 图例可见性小眼睛 */
+.chart-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--density-space-sm);
+  min-height: 24px;
+}
+.chart-legend-eye {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--token-text-faint);
+  cursor: pointer;
+  transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
+}
+.chart-legend-eye:hover { color: var(--token-text); background: var(--token-fill-1); }
+.chart-legend-eye:focus-visible { outline: none; box-shadow: var(--icen-ring); }
+.chart-legend-eye svg { width: 13px; height: 13px; }
+
+/* 图例统一隐藏：容器级继承——data-legend-hidden 一条选择器覆盖全部图型的图例 */
+[data-legend-hidden='true'] .chart-legend,
+[data-legend-hidden='true'] .chart-legend--toggle,
+[data-legend-hidden='true'] .chart-heatmap-legend {
+  display: none;
+}
+
+/* 内置 tooltip：portal 到 body 的单例，position: fixed 跟随指针 */
+.chart-tooltip {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  max-width: 280px;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--token-card-strong);
+  border: 1px solid var(--token-line);
+  box-shadow: var(--token-shadow-elevated);
+  font-size: var(--density-font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--token-text);
+  pointer-events: none;
+}
+.chart-tooltip[hidden] { display: none; }
+
+/* 数据标记（各图型的条/点/段/格）：交互态由委托层挂 .is-hover，图例切换挂 .is-off */
+[data-chart-mark] { cursor: pointer; }
+[data-chart-mark].is-hover { filter: brightness(1.12); }
+[data-chart-mark].is-off { opacity: 0.16; pointer-events: none; }
+svg circle[data-chart-mark].is-hover { stroke-width: 3; }
+
+/* 可切换图例：行可点（Enter/Space 等价），.is-off 划线淡化 */
+.chart-legend--toggle .chart-legend-toggle-item {
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  padding: 2px 4px;
+  margin: -2px -4px;
+  transition: background-color var(--icen-tx-fast);
+}
+.chart-legend--toggle .chart-legend-toggle-item:hover { background: var(--token-fill-1); }
+.chart-legend--toggle .chart-legend-toggle-item:focus-visible {
+  outline: none;
+  box-shadow: var(--icen-ring);
+}
+.chart-legend--toggle .is-off .chart-legend-label,
+.chart-legend--toggle .is-off .chart-legend-value {
+  color: var(--token-text-faint);
+  text-decoration: line-through;
+}
+.chart-legend--toggle .is-off .chart-legend-dot { opacity: 0.3; }
+
 
 /* ── components/command-palette.css ── */
 /*
@@ -3713,7 +6486,7 @@ html {
 
 .command-palette-item-kbd {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   color: var(--token-text-faint);
   padding: 1px 5px;
   border: 1px solid var(--token-line-soft);
@@ -3744,7 +6517,7 @@ html {
 }
 .command-palette-foot-hint kbd {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   padding: 1px 4px;
   border: 1px solid var(--token-line-soft);
   border-radius: var(--radius-xs);
@@ -3802,7 +6575,7 @@ html {
   height: 16px;
   min-width: 16px;
   padding: 0 4px;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
 }
 .kbd-group {
   display: inline-flex;
@@ -3966,11 +6739,11 @@ html {
   z-index: 1;
 }
 .timeline-dot svg { width: 13px; height: 13px; }
-.timeline-dot--accent  { background: var(--token-accent);  color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--success { background: var(--token-success); color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--warning { background: var(--token-warning); color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--error   { background: var(--token-error);   color: var(--token-on-accent, #fff); border-color: transparent; }
-.timeline-dot--info    { background: var(--token-info);    color: var(--token-on-accent, #fff); border-color: transparent; }
+.timeline-dot--accent  { background: var(--token-accent);  color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--success { background: var(--token-success); color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--warning { background: var(--token-warning); color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--error   { background: var(--token-error);   color: var(--token-on-accent); border-color: transparent; }
+.timeline-dot--info    { background: var(--token-info);    color: var(--token-on-accent); border-color: transparent; }
 
 .timeline-body { flex: 1; min-width: 0; }
 .timeline-head {
@@ -4136,9 +6909,9 @@ html {
   min-width: 16px;
   height: 16px;
   padding: 0 4px;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 600;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: var(--token-accent);
   border-radius: var(--radius-full);
   flex-shrink: 0;
@@ -4228,7 +7001,6 @@ html {
 /* 自定义 dot 尺寸 */
 .timeline-dot--sm { width: 20px; height: 20px; }
 .timeline-dot--sm svg { width: 10px; height: 10px; }
-.timeline-dot--sm ~ .timeline-item:not(:last-child)::after,
 .timeline--sm .timeline-item:not(:last-child)::after { left: 10px; top: 24px; }
 
 /* 时间线自定义内容槽（放标签、卡片等） */
@@ -4374,17 +7146,17 @@ html {
  *   <button class="copy-btn" data-copy="复制的文本">复制</button>
  *   <button class="copy-btn copy-btn--ghost" data-copy="…">复制链接</button>
  *
- *   图标变体（带 data-copy-icon，仅加 .done 类；由 CSS 显隐子 svg）：
+ *   图标变体（带 data-copy-icon，仅加 .is-done 类；由 CSS 显隐子 svg）：
  *   <button class="copy-btn copy-btn--icon" data-copy="…" data-copy-icon aria-label="复制">
  *     <svg class="copy-icon-clipboard">…</svg>
  *     <svg class="copy-icon-check" hidden>…</svg>
  *   </button>
  *
  * behavior 自动处理：
- *   - 文本变体：成功后 textContent = '已复制' + 加 .done 类，1.4s 后还原
- *   - 图标变体（带 data-copy-icon）：仅加 .done 类（不改文本），由 CSS 切换 svg 显隐
+ *   - 文本变体：成功后 textContent = '已复制' + 加 .is-done 类，1.4s 后还原
+ *   - 图标变体（带 data-copy-icon）：仅加 .is-done 类（不改文本），由 CSS 切换 svg 显隐
  *
- * 与 toast.ok 区别：copy 是"原地反馈"（按钮自身闪烁），toast 是"全局通知"。
+ * 与 toast.toast--success 区别：copy 是"原地反馈"（按钮自身闪烁），toast 是"全局通知"。
  */
 
 .copy-btn {
@@ -4433,7 +7205,7 @@ html {
 }
 
 /* ── 成功闪烁态（behavior 1.4s 后移除）── */
-.copy-btn.done {
+.copy-btn.is-done {
   color: var(--token-success);
   border-color: color-mix(in srgb, var(--token-success) 40%, transparent);
   background: color-mix(in srgb, var(--token-success) 10%, transparent);
@@ -4451,10 +7223,10 @@ html {
   flex-shrink: 0;
 }
 
-/* .done 时显隐切换：剪贴板 → 对勾 */
+/* .is-done 时显隐切换：剪贴板 → 对勾 */
 .copy-btn[data-copy-icon] .copy-icon-check { display: none; }
-.copy-btn[data-copy-icon].done .copy-icon-clipboard { display: none; }
-.copy-btn[data-copy-icon].done .copy-icon-check { display: inline-block; }
+.copy-btn[data-copy-icon].is-done .copy-icon-clipboard { display: none; }
+.copy-btn[data-copy-icon].is-done .copy-icon-check { display: inline-block; }
 
 @media (prefers-reduced-motion: reduce) {
   .copy-btn { transition: none; }
@@ -4589,11 +7361,11 @@ html {
 .dt-cell--head.is-sortable:hover { color: var(--token-text); }
 .dt-cell--head:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--token-accent) 50%, transparent);
+  box-shadow: var(--icen-ring-inset);
 }
 .dt-head-title { overflow: hidden; text-overflow: ellipsis; }
 .dt-sort {
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   color: var(--token-text-faint);
   flex-shrink: 0;
 }
@@ -4629,11 +7401,7 @@ html {
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-overlay);
   font-weight: 400;
-  animation: dt-panel-in var(--icen-tx-fast);
-}
-@keyframes dt-panel-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
+  animation: icen-pop-in var(--icen-tx-fast);
 }
 .dt-filter-list {
   max-height: 220px;
@@ -4864,7 +7632,7 @@ html {
 .dt-resize:active::after {
   background: var(--token-accent);
 }
-.dt-cell--head { /* 确保相对定位供 resize 绝对定位 */ }
+/* .dt-cell--head 已在主规则 position: relative，供 resize 手柄绝对定位 */
 
 /* ── 冻结列（左固定 sticky） ── */
 .datatable--frozen .dt-cell--frozen {
@@ -4997,11 +7765,7 @@ html {
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-overlay);
   font-size: var(--density-font-size-sm);
-  animation: icen-dp-in var(--icen-tx-fast);
-}
-@keyframes icen-dp-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
+  animation: icen-pop-in var(--icen-tx-fast);
 }
 
 .date-picker-head {
@@ -5085,10 +7849,10 @@ html {
 }
 .date-picker-cell.is-selected {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   font-weight: 600;
 }
-.date-picker-cell.is-selected.is-today { border-color: var(--token-on-accent, #fff); }
+.date-picker-cell.is-selected.is-today { border-color: var(--token-on-accent); }
 .date-picker-cell.is-outside {
   color: var(--token-text-faint);
   opacity: 0.55;
@@ -5273,10 +8037,6 @@ html {
   .empty--404 .empty-title { font-size: 56px; }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .empty { animation: none; }
-}
-
 
 /* ── components/feedback.css ── */
 /*
@@ -5430,7 +8190,7 @@ html {
 /* 不定进度（spinner 替代品）：bar 来回扫动 */
 .progress--indeterminate .progress-bar {
   width: 35% !important;
-  animation: progress-sweep 1.4s var(--ease-in-out, var(--ease-out)) infinite;
+  animation: progress-sweep var(--progress-sweep-duration, 1.4s) var(--ease-in-out, var(--ease-out)) infinite;
 }
 @keyframes progress-sweep {
   0%   { transform: translateX(-100%); }
@@ -5454,7 +8214,7 @@ html {
   border: 2px solid color-mix(in srgb, var(--token-accent) 30%, transparent);
   border-top-color: var(--token-accent);
   border-radius: var(--radius-full);
-  animation: icen-spin 0.8s linear infinite;
+  animation: icen-spin var(--spinner-duration, 0.8s) linear infinite;
 }
 .spinner--sm { width: 14px; height: 14px; border-width: 2px; }
 .spinner--lg { width: 32px; height: 32px; border-width: 3px; }
@@ -5462,8 +8222,6 @@ html {
 .spinner--error   { border-color: color-mix(in srgb, var(--token-error) 30%, transparent); border-top-color: var(--token-error); }
 .spinner--muted   { border-color: color-mix(in srgb, var(--token-text-faint) 30%, transparent); border-top-color: var(--token-text-faint); }
 
-@keyframes icen-spin { to { transform: rotate(360deg); } }
-
 /* 文字+spinner 组合 */
 .spinner-wrap {
   display: inline-flex;
@@ -5478,7 +8236,7 @@ html {
   display: block;
   background: color-mix(in srgb, var(--token-text) 8%, transparent);
   border-radius: var(--radius-sm);
-  animation: icen-skeleton-pulse 2s ease-in-out infinite;
+  animation: icen-skeleton-pulse var(--skeleton-duration, 2s) ease-in-out infinite;
 }
 .skeleton--circle { border-radius: var(--radius-full); }
 .skeleton--text {
@@ -5487,11 +8245,6 @@ html {
 }
 .skeleton--text:last-child { width: 60%; }
 
-@keyframes icen-skeleton-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
 /* ── alert 增强 ── */
 
 /* 可操作横幅（含按钮） */
@@ -5585,7 +8338,7 @@ html {
     transparent
   );
   background-size: 20px 20px;
-  animation: progress-stripe 1s linear infinite;
+  animation: progress-stripe var(--progress-stripe-duration, 1s) linear infinite;
 }
 @keyframes progress-stripe {
   from { background-position: 0 0; }
@@ -5617,7 +8370,7 @@ html {
   height: 6px;
   border-radius: var(--radius-full);
   background: var(--token-accent);
-  animation: spinner-dot 1.4s ease-in-out infinite;
+  animation: spinner-dot var(--spinner-dots-duration, 1.4s) ease-in-out infinite;
 }
 .spinner--dots span:nth-child(2) { animation-delay: 0.2s; }
 .spinner--dots span:nth-child(3) { animation-delay: 0.4s; }
@@ -5643,7 +8396,7 @@ html {
   height: 100%;
   background: var(--token-accent);
   border-radius: 1px;
-  animation: spinner-bar 1s ease-in-out infinite;
+  animation: spinner-bar var(--spinner-bars-duration, 1s) ease-in-out infinite;
 }
 .spinner--bars span:nth-child(2) { animation-delay: 0.1s; }
 .spinner--bars span:nth-child(3) { animation-delay: 0.2s; }
@@ -5657,7 +8410,7 @@ html {
 .spinner-overlay {
   position: fixed;
   inset: 0;
-  z-index: var(--z-overlay, 9999);
+  z-index: var(--z-dialog);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5703,7 +8456,7 @@ html {
   height: 12px;
   border-radius: var(--radius-xs);
   background: color-mix(in srgb, var(--token-text) 8%, transparent);
-  animation: icen-skeleton-pulse 2s ease-in-out infinite;
+  animation: icen-skeleton-pulse var(--skeleton-duration, 2s) ease-in-out infinite;
 }
 
 /* 骨架波纹变体（shimmer，区别于 pulse） */
@@ -5715,7 +8468,7 @@ html {
     color-mix(in srgb, var(--token-text) 6%, transparent) 100%
   );
   background-size: 200% 100%;
-  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  animation: skeleton-shimmer var(--skeleton-shimmer-duration, 1.5s) ease-in-out infinite;
 }
 @keyframes skeleton-shimmer {
   from { background-position: 200% 0; }
@@ -5727,7 +8480,7 @@ html {
   .progress--indeterminate .progress-bar { animation: none; width: 100% !important; }
   .progress--striped .progress-bar { animation: none; }
   .progress-ring-fill { transition: none; }
-  .spinner { animation-duration: 2s; }
+  .spinner { --spinner-duration: 2s; }
   .spinner--dots span,
   .spinner--bars span { animation: none; }
   .skeleton,
@@ -5887,7 +8640,7 @@ html {
 
 /* label 带可选标记 */
 .form-label-optional {
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 400;
   color: var(--token-text-faint);
   margin-left: 4px;
@@ -5968,11 +8721,11 @@ html {
   border: 2px solid color-mix(in srgb, var(--token-accent) 30%, transparent);
   border-top-color: var(--token-accent);
   border-radius: 50%;
-  animation: form-loading-spin 0.8s linear infinite;
+  animation: icen-spin var(--form-loading-duration, 0.8s) linear infinite;
 }
-@keyframes form-loading-spin { to { transform: rotate(360deg); } }
 
-/* ── 页面级横幅：操作结果 / 引导提示 ── */
+/* ── 页面级横幅：操作结果 / 引导提示 ──
+   与 feedback.css 的 alert 共享同一套视觉 token（--banner-* 仅在底色/文字/描边上分流） */
 .banner-ok,
 .banner-err {
   display: flex;
@@ -5984,16 +8737,19 @@ html {
   font-size: var(--density-font-size-sm);
   line-height: 1.5;
   border: 1px solid transparent;
+  background: var(--banner-bg);
+  color: var(--banner-fg);
+  border-color: var(--banner-border);
 }
 .banner-ok {
-  background: var(--token-success-muted);
-  color: var(--token-success);
-  border-color: color-mix(in srgb, var(--token-success) 25%, transparent);
+  --banner-bg: var(--token-success-muted);
+  --banner-fg: var(--token-success);
+  --banner-border: color-mix(in srgb, var(--token-success) 25%, transparent);
 }
 .banner-err {
-  background: var(--token-error-muted);
-  color: var(--token-error);
-  border-color: color-mix(in srgb, var(--token-error) 25%, transparent);
+  --banner-bg: var(--token-error-muted);
+  --banner-fg: var(--token-error);
+  --banner-border: color-mix(in srgb, var(--token-error) 25%, transparent);
 }
 /* block 模式：横向占满，带图标位 */
 .banner-block {
@@ -6001,10 +8757,6 @@ html {
   padding: var(--density-space-md);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .banner-ok, .banner-err { transition: none; }
-}
-
 
 /* ── components/input.css ── */
 /*
@@ -6028,6 +8780,7 @@ html {
 
 /* ── 单行 ── */
 .input-wrap {
+  position: relative;
   display: flex;
   align-items: center;
   gap: var(--density-space-xs);
@@ -6149,6 +8902,7 @@ html {
 
 /* ── 多行：同一 wrapper 视觉，内部 textarea 裸奔 ── */
 .textarea-wrap {
+  position: relative;
   display: flex;
   width: 100%;
   background: var(--token-control);
@@ -6198,7 +8952,6 @@ html {
 }
 
 /* 字符计数（behavior 可挂到 .input-wrap 或 .textarea-wrap 内尾部） */
-.input-wrap { position: relative; }
 .input-wrap--has-counter { padding-right: calc(var(--density-space-sm) + 48px); }
 .input-wrap--has-counter .input-counter {
   position: absolute;
@@ -6223,7 +8976,6 @@ html {
 .input-counter.is-warn { color: var(--token-warning); }
 .input-counter.is-error { color: var(--token-error); font-weight: 600; }
 
-.textarea-wrap { position: relative; }
 .textarea-wrap .textarea { padding-bottom: 24px; }
 
 /* 有计数器时的 textarea 底部留空 */
@@ -6238,23 +8990,23 @@ html {
 /*
  * @icen.ai/ui — Component: layout（布局原语，全部是工具类，无 JS）
  * stack / divider / surface / text / grid / center / container / aspect / visually-hidden
- * 全部消费 --token-*；档位类名与 opengal primitives/layout(-containers) 一一对应。
+ * 全部消费 --token-* 与 --density-*；档位类名与 opengal primitives/layout(-containers) 一一对应。
  */
 
-/* ── Stack：flex 堆叠（默认列向，gap 8px） ── */
-.stack { display: flex; flex-direction: column; gap: 8px; }
+/* ── Stack：flex 堆叠（默认列向，gap = density-space-sm） ── */
+.stack { display: flex; flex-direction: column; gap: var(--density-space-sm); }
 .stack--row { flex-direction: row; }
 .stack--inline { display: inline-flex; }
 .stack--wrap { flex-wrap: wrap; }
 .stack--gap-0 { gap: 0; }
-.stack--gap-1 { gap: 4px; }
-.stack--gap-2 { gap: 8px; }
-.stack--gap-3 { gap: 12px; }
-.stack--gap-4 { gap: 16px; }
-.stack--gap-6 { gap: 24px; }
-.stack--gap-8 { gap: 32px; }
-.stack--gap-12 { gap: 48px; }
-.stack--gap-16 { gap: 64px; }
+.stack--gap-1 { gap: var(--density-space-xs); }
+.stack--gap-2 { gap: var(--density-space-sm); }
+.stack--gap-3 { gap: var(--density-space-md); }
+.stack--gap-4 { gap: var(--density-space-lg); }
+.stack--gap-6 { gap: var(--density-space-xl); }
+.stack--gap-8 { gap: var(--density-space-2xl); }
+.stack--gap-12 { gap: var(--density-space-3xl); }
+.stack--gap-16 { gap: var(--density-space-4xl); }
 .stack--items-start { align-items: flex-start; }
 .stack--items-center { align-items: center; }
 .stack--items-end { align-items: flex-end; }
@@ -6271,13 +9023,13 @@ html {
 .divider { background: var(--token-outline-soft); height: 1px; width: 100%; }
 .divider--vertical { width: 1px; height: 100%; align-self: stretch; }
 
-/* ── Surface：卡片容器（默认 inset 阴影 + 16px padding） ── */
+/* ── Surface：卡片容器（默认 inset 阴影 + density-space-lg padding） ── */
 .surface {
   border-radius: var(--radius-lg);
   background: var(--token-card);
   border: 1px solid var(--token-outline-soft);
   box-shadow: var(--token-shadow-inset);
-  padding: 16px;
+  padding: var(--density-space-lg);
 }
 .surface--elevated { box-shadow: var(--token-shadow-card); }
 .surface--overlay {
@@ -6286,18 +9038,18 @@ html {
   box-shadow: var(--token-shadow-overlay);
 }
 .surface--p-none { padding: 0; }
-.surface--p-sm { padding: 12px; }
-.surface--p-md { padding: 16px; }
-.surface--p-lg { padding: 20px; }
+.surface--p-sm { padding: var(--density-space-md); }
+.surface--p-md { padding: var(--density-space-lg); }
+.surface--p-lg { padding: calc(var(--density-space-lg) + var(--density-space-xs)); }
 
 /* ── Text：字号 / 语义色 / 截断 ── */
-.text--xs { font-size: 11px; }
-.text--sm { font-size: 12px; }
-.text--base { font-size: 13px; }
-.text--md { font-size: 14px; }
-.text--lg { font-size: 15px; }
-.text--xl { font-size: 18px; }
-.text--2xl { font-size: 22px; }
+.text--xs { font-size: var(--density-font-size-xs); }
+.text--sm { font-size: var(--density-font-size-sm); }
+.text--base { font-size: var(--density-font-size-md); }
+.text--md { font-size: var(--density-font-size-lg); }
+.text--lg { font-size: var(--density-font-size-lg); }
+.text--xl { font-size: var(--density-font-size-xl); }
+.text--2xl { font-size: var(--density-font-size-2xl); }
 .text--muted { color: var(--token-text-muted); }
 .text--faint { color: var(--token-text-faint); }
 .text--accent { color: var(--token-accent); }
@@ -6306,8 +9058,8 @@ html {
 .text--error { color: var(--token-error); }
 .text--truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-/* ── Grid：栅格（默认 gap 12px） ── */
-.grid { display: grid; gap: 12px; }
+/* ── Grid：栅格（默认 gap = density-space-md） ── */
+.grid { display: grid; gap: var(--density-space-md); }
 .grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@@ -6315,28 +9067,28 @@ html {
 .grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 .grid--cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
 .grid--gap-0 { gap: 0; }
-.grid--gap-4 { gap: 4px; }
-.grid--gap-8 { gap: 8px; }
-.grid--gap-12 { gap: 12px; }
-.grid--gap-16 { gap: 16px; }
-.grid--gap-24 { gap: 24px; }
+.grid--gap-4 { gap: var(--density-space-xs); }
+.grid--gap-8 { gap: var(--density-space-sm); }
+.grid--gap-12 { gap: var(--density-space-md); }
+.grid--gap-16 { gap: var(--density-space-lg); }
+.grid--gap-24 { gap: var(--density-space-xl); }
 
 /* ── Center：flex 居中盒 ── */
 .center { display: flex; align-items: center; justify-content: center; }
 
 /* ── Container：限宽容器（默认 960px） ── */
-.container { width: 100%; margin-inline: auto; padding-inline: 16px; max-width: 960px; }
+.container { width: 100%; margin-inline: auto; padding-inline: var(--density-space-lg); max-width: 960px; }
 .container--sm { max-width: 480px; }
 .container--md { max-width: 720px; }
 .container--lg { max-width: 960px; }
 .container--xl { max-width: 1200px; }
 .container--full { max-width: none; }
 
-/* ── Aspect：固定比例盒（padding-bottom hack，内容 absolute inset:0） ── */
-.aspect { position: relative; width: 100%; overflow: hidden; padding-bottom: 56.25%; }
-.aspect--square { padding-bottom: 100%; }
-.aspect--4-3 { padding-bottom: 75%; }
-.aspect--2-3 { padding-bottom: 150%; }
+/* ── Aspect：固定比例盒（aspect-ratio，内容 absolute inset:0 铺满） ── */
+.aspect { position: relative; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; }
+.aspect--square { aspect-ratio: 1 / 1; }
+.aspect--4-3 { aspect-ratio: 4 / 3; }
+.aspect--2-3 { aspect-ratio: 2 / 3; }
 .aspect > * { position: absolute; inset: 0; }
 
 /* ── VisuallyHidden：屏幕阅读器专用文本（sr-only 等价） ── */
@@ -6353,6 +9105,10 @@ html {
  * 包含：avatar（头像）/ media-card（封面卡，滑出 overlay）/ rating（星级评分）/ carousel（轮播，与 behaviors/carousel 配套）
  * 规格源自 opengal data/display.tsx 的 Avatar、data/cartridge-card.tsx 的 hover overlay、
  * data/exhibit.tsx 的 Carousel 与 Rating。
+ *
+ * 例外声明（deliberate exception）：carousel-thumbs 隐藏滚动条是有意设计
+ * （缩略图条视觉纯净，滚动仍可用）。违反「组件不写滚动条样式」纪律仅此处，
+ * 先例参照 scroll-area.css 的尺寸变体。
  */
 
 /* ══════════════ avatar · 头像 ══════════════ */
@@ -6372,8 +9128,8 @@ html {
   flex-shrink: 0;
   user-select: none;
 }
-.avatar--xs { width: 20px; height: 20px; font-size: 9px; }
-.avatar--sm { width: 28px; height: 28px; font-size: 10px; }
+.avatar--xs { width: 20px; height: 20px; font-size: var(--density-font-size-2xs); }
+.avatar--sm { width: 28px; height: 28px; font-size: var(--density-font-size-2xs); }
 .avatar--lg { width: 48px; height: 48px; font-size: var(--density-font-size-md); }
 .avatar--xl { width: 80px; height: 80px; font-size: var(--density-font-size-lg); }
 .avatar img {
@@ -6417,7 +9173,7 @@ html {
 /* 渐变底头像 */
 .avatar--gradient {
   background: linear-gradient(135deg, var(--token-accent), var(--token-accent-deep, var(--token-accent)));
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 
 /* 方形头像 */
@@ -6435,7 +9191,7 @@ html {
   justify-content: center;
   width: 28px;
   height: 28px;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 600;
   color: var(--token-text-muted);
   background: var(--token-fill-2);
@@ -6457,7 +9213,7 @@ html {
 .media-card:hover {
   transform: translateY(-6px);
   box-shadow:
-    0 8px 32px color-mix(in srgb, var(--token-text) 18%, transparent),
+    var(--token-shadow-overlay),
     0 0 20px var(--token-accent-glow);
 }
 .media-card-cover {
@@ -6485,7 +9241,7 @@ html {
 }
 .media-card:hover .media-card-overlay {
   transform: translateY(0);
-  transition-delay: 80ms;
+  transition-delay: var(--media-overlay-delay, 80ms);
 }
 .media-card-overlay-title {
   font-size: var(--density-font-size-md);
@@ -6690,7 +9446,7 @@ html {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.carousel-dot.active,
+.carousel-dot.is-active,
 .carousel-dot[aria-current='true'] {
   width: 20px;
   background: var(--token-accent);
@@ -6706,7 +9462,7 @@ html {
   transition: width var(--icen-tx-slow);
 }
 
-/* 缩略图导航条 */
+/* 缩略图导航条（deliberate exception：隐藏滚动条是设计意图，见文件头注释） */
 .carousel-thumbs {
   display: flex;
   gap: var(--density-space-xs);
@@ -6816,7 +9572,7 @@ html {
   border: 1px solid var(--token-outline);
   box-shadow: var(--token-shadow-overlay);
   border-radius: var(--radius-lg);
-  animation: icen-menu-in var(--icen-tx-fast);
+  animation: icen-menu-in var(--menu-in-duration, var(--icen-tx-fast));
 }
 .menu[data-side='top'] { animation-name: icen-menu-in-top; }
 .menu[data-side='left'] { animation-name: icen-menu-in-left; }
@@ -6827,7 +9583,7 @@ html {
   min-width: 218px;
   max-width: 286px;
   z-index: var(--z-tooltip); /* 上下文菜单高于普通 popover，与 tooltip 平齐 */
-  animation-duration: 100ms;
+  --menu-in-duration: 100ms;
 }
 
 /* ── 分组标签 / 头（context-menu 的 header 项） ── */
@@ -7092,7 +9848,7 @@ html {
   border: 0;
   cursor: pointer;
   color: var(--token-text-faint);
-  font-size: 16px;
+  font-size: var(--density-font-size-lg);
   line-height: 1;
   border-radius: var(--radius-sm);
   transition:
@@ -7231,7 +9987,12 @@ html {
   backdrop-filter: blur(12px) saturate(1.1);
   -webkit-backdrop-filter: blur(12px) saturate(1.1);
   border-bottom: 1px solid var(--token-outline-soft);
-  transition: all var(--icen-tx-slow);
+  transition:
+    background-color var(--icen-tx-slow),
+    border-color var(--icen-tx-slow),
+    box-shadow var(--icen-tx-slow),
+    transform var(--icen-tx-slow),
+    backdrop-filter var(--icen-tx-slow);
 }
 .nav:has(.nav-bottom) {
   height: auto;
@@ -7288,6 +10049,7 @@ html {
 .nav-bottom { width: 100%; padding-top: var(--density-space-xs); }
 
 .nav-btn {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--density-space-xs);
@@ -7319,7 +10081,7 @@ html {
 .nav-btn.is-active,
 .nav-btn[aria-current='page'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   font-weight: 500;
   box-shadow: var(--token-shadow-elevated);
 }
@@ -7389,7 +10151,7 @@ html {
 .nav-search-kbd {
   margin-left: auto;
   padding: 1px 5px;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-family: var(--font-mono);
   color: var(--token-text-faint);
   background: var(--token-fill-2);
@@ -7409,14 +10171,13 @@ html {
   border-radius: var(--radius-full);
   pointer-events: none;
 }
-.nav-btn { position: relative; }
 .nav-btn-badge--count {
   min-width: 16px;
   height: 16px;
   padding: 0 4px;
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7478,7 +10239,7 @@ html {
  *
  * 完整契约（由 behavior 渲染）：
  *   <div class="notification-container" role="region" aria-label="通知" data-position="top-right">
- *     <div class="notification [notif--success|warning|error|info]
+ *     <div class="notification [notification--success|warning|error|info]
  *          [.is-priority] [.is-unread] [.is-progress] [.is-clickable] [.is-paused]
  *          [.has-avatar]" role="alert|button">
  *       <span class="notification-icon">…svg 或 img.notification-avatar…</span>
@@ -7547,19 +10308,19 @@ html {
   overflow: hidden; /* 倒计时进度条贴底 */
   animation: icen-notif-in var(--icen-tx-normal);
 }
-.notification.notif--success { border-left-color: var(--token-success); }
-.notification.notif--warning { border-left-color: var(--token-warning); }
-.notification.notif--error   { border-left-color: var(--token-error); }
-.notification.notif--info    { border-left-color: var(--token-info); }
+.notification.notification--success { border-left-color: var(--token-success); }
+.notification.notification--warning { border-left-color: var(--token-warning); }
+.notification.notification--error   { border-left-color: var(--token-error); }
+.notification.notification--info    { border-left-color: var(--token-info); }
 
 /* ── 优先级：高优先级强调（左侧加粗 + 更强阴影）── */
 .notification.is-priority {
   border-left-width: 4px;
   box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-accent) 24%, transparent);
 }
-.notification.is-priority.notif--success { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-success) 28%, transparent); }
-.notification.is-priority.notif--warning { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-warning) 28%, transparent); }
-.notification.is-priority.notif--error   { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-error) 28%, transparent); }
+.notification.is-priority.notification--success { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-success) 28%, transparent); }
+.notification.is-priority.notification--warning { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-warning) 28%, transparent); }
+.notification.is-priority.notification--error   { box-shadow: var(--token-shadow-overlay), 0 0 0 1px color-mix(in srgb, var(--token-error) 28%, transparent); }
 
 /* ── 未读：标题左侧 4px 强调点 + 加粗 ── */
 .notification.is-unread .notification-title::before {
@@ -7574,9 +10335,9 @@ html {
   background: var(--token-accent);
   flex-shrink: 0;
 }
-.notification.is-unread.notif--success .notification-title::before { background: var(--token-success); }
-.notification.is-unread.notif--warning .notification-title::before { background: var(--token-warning); }
-.notification.is-unread.notif--error   .notification-title::before { background: var(--token-error); }
+.notification.is-unread.notification--success .notification-title::before { background: var(--token-success); }
+.notification.is-unread.notification--warning .notification-title::before { background: var(--token-warning); }
+.notification.is-unread.notification--error   .notification-title::before { background: var(--token-error); }
 
 /* ── 可点击：整条 hover 抬升 ── */
 .notification.is-clickable {
@@ -7604,10 +10365,10 @@ html {
   color: var(--token-text-faint);
 }
 .notification-icon svg { width: 16px; height: 16px; }
-.notif--success .notification-icon { color: var(--token-success); }
-.notif--warning .notification-icon { color: var(--token-warning); }
-.notif--error   .notification-icon { color: var(--token-error); }
-.notif--info    .notification-icon { color: var(--token-info); }
+.notification--success .notification-icon { color: var(--token-success); }
+.notification--warning .notification-icon { color: var(--token-warning); }
+.notification--error   .notification-icon { color: var(--token-error); }
+.notification--info    .notification-icon { color: var(--token-info); }
 
 /* 头像（圆形图） */
 .notification-avatar {
@@ -7624,7 +10385,7 @@ html {
 }
 
 /* 进度通知的图标默认走品牌色 */
-.notification.is-progress:not(.notif--success):not(.notif--warning):not(.notif--error) .notification-icon {
+.notification.is-progress:not(.notification--success):not(.notification--warning):not(.notification--error) .notification-icon {
   color: var(--token-accent);
 }
 
@@ -7690,23 +10451,23 @@ html {
 /* primary：实底 accent */
 .notification-action--primary {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-accent);
 }
 .notification-action--primary:hover {
   background: var(--token-accent-deep, var(--token-accent));
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-accent-deep, var(--token-accent));
 }
 /* danger：实底 error */
 .notification-action--danger {
   background: var(--token-error);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-error);
 }
 .notification-action--danger:hover {
   filter: brightness(0.92);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-error);
 }
 
@@ -7751,9 +10512,9 @@ html {
   border-radius: var(--radius-full);
   transition: width var(--icen-tx-normal) var(--ease-out);
 }
-.notification.notif--success .notification-progress-bar { background: var(--token-success); }
-.notification.notif--warning .notification-progress-bar { background: var(--token-warning); }
-.notification.notif--error   .notification-progress-bar { background: var(--token-error); }
+.notification.notification--success .notification-progress-bar { background: var(--token-success); }
+.notification.notification--warning .notification-progress-bar { background: var(--token-warning); }
+.notification.notification--error   .notification-progress-bar { background: var(--token-error); }
 .notification-progress-label {
   flex: 0 0 auto;
   font-size: var(--density-font-size-xs);
@@ -7809,9 +10570,9 @@ html {
   animation-fill-mode: forwards;
   animation-play-state: running;
 }
-.notification.notif--success .notification-countdown-fill { background: var(--token-success); opacity: 0.6; }
-.notification.notif--warning .notification-countdown-fill { background: var(--token-warning); opacity: 0.6; }
-.notification.notif--error   .notification-countdown-fill { background: var(--token-error); opacity: 0.6; }
+.notification.notification--success .notification-countdown-fill { background: var(--token-success); opacity: 0.6; }
+.notification.notification--warning .notification-countdown-fill { background: var(--token-warning); opacity: 0.6; }
+.notification.notification--error   .notification-countdown-fill { background: var(--token-error); opacity: 0.6; }
 .notification.is-paused .notification-countdown-fill {
   animation-play-state: paused;
 }
@@ -7826,7 +10587,7 @@ html {
 }
 
 /* ── 退场动画 ── */
-.notification.leaving {
+.notification.is-leaving {
   opacity: 0;
   transform: translateX(20px);
   transition:
@@ -7850,7 +10611,7 @@ html {
 
 @media (prefers-reduced-motion: reduce) {
   .notification { animation: none; }
-  .notification.leaving { transform: none; }
+  .notification.is-leaving { transform: none; }
   .notification-countdown-fill { animation: none; transform-origin: left; }
   .notification-progress-bar { transition: none; }
 }
@@ -7907,7 +10668,7 @@ html {
 .page-btn.is-active,
 .page-btn[aria-current='page'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   font-weight: 500;
   box-shadow: var(--token-shadow-elevated);
 }
@@ -7982,8 +10743,8 @@ html {
  * @icen.ai/ui — Component: panel（白卡片容器 + 标题栏 + 可选 footer）
  *
  * 完整契约：
- *   <div class="panel-block [panel-block--flush] [panel-block--accent]
- *        [panel-block--collapsible] [.is-collapsed]">
+ *   <div class="panel [panel--flush] [panel--accent]
+ *        [panel--collapsible] [.is-collapsed]">
  *     <div class="panel-title">
  *       <div class="panel-title-text">
  *         <span>标题</span>
@@ -8004,10 +10765,10 @@ html {
  * --collapsible：标题栏出现展开/折叠钮（behavior 可选，也可靠纯 CSS details/summary）。
  * --accent：强调色标题边。
  * .panel-subtitle：标题下方的副标题/描述文字。
- * .panel-block.is-collapsed：折叠态——隐藏 body + foot。
+ * .panel.is-collapsed：折叠态——隐藏 body + foot。
  */
 
-.panel-block {
+.panel {
   background: var(--token-surface);
   border: 1px solid var(--token-line-soft);
   border-radius: var(--radius-lg);
@@ -8043,7 +10804,7 @@ html {
   white-space: nowrap;
 }
 .panel-subtitle {
-  font-size: 11px;
+  font-size: var(--density-font-size-xs);
   font-weight: 400;
   letter-spacing: 0;
   text-transform: none;
@@ -8087,19 +10848,19 @@ html {
   height: 14px;
   transition: transform var(--icen-tx-fast);
 }
-.panel-block.is-collapsed .panel-toggle-icon {
+.panel.is-collapsed .panel-toggle-icon {
   transform: rotate(-90deg);
 }
 
 /* ── 折叠态：隐藏 body + foot，去掉标题栏底边 ── */
-.panel-block.is-collapsed .panel-body,
-.panel-block.is-collapsed .panel-foot {
+.panel.is-collapsed .panel-body,
+.panel.is-collapsed .panel-foot {
   display: none;
 }
-.panel-block.is-collapsed .panel-title {
+.panel.is-collapsed .panel-title {
   border-bottom-color: transparent;
 }
-.panel-block--collapsible .panel-body {
+.panel--collapsible .panel-body {
   animation: panel-expand var(--icen-tx-normal) var(--ease-out);
 }
 @keyframes panel-expand {
@@ -8113,7 +10874,7 @@ html {
   font-size: var(--density-font-size-md);
   line-height: 1.6;
 }
-.panel-block--flush .panel-body { padding: 0; }
+.panel--flush .panel-body { padding: 0; }
 
 .panel-foot {
   display: flex;
@@ -8126,26 +10887,26 @@ html {
 }
 
 /* ── 强调变体 ── */
-.panel-block--accent { border-color: color-mix(in srgb, var(--token-accent) 30%, transparent); }
-.panel-block--accent .panel-title {
+.panel--accent { border-color: color-mix(in srgb, var(--token-accent) 30%, transparent); }
+.panel--accent .panel-title {
   color: var(--token-accent);
   background: var(--token-accent-subtle);
 }
 
 /* ── 平面变体（无阴影，嵌套时用） ── */
-.panel-block--flat {
+.panel--flat {
   box-shadow: none;
   background: var(--token-bg-soft);
 }
 
 /* ── 可折叠模式：标题栏可点（纯 CSS 方案用 details/summary） ── */
-.panel-block--collapsible .panel-title {
+.panel--collapsible .panel-title {
   cursor: pointer;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .panel-toggle-icon { transition: none; }
-  .panel-block--collapsible .panel-body { animation: none; }
+  .panel--collapsible .panel-body { animation: none; }
 }
 
 
@@ -8154,7 +10915,7 @@ html {
  * @icen.ai/ui — Component: pill（状态徽章 / tag）
  *
  * 完整契约：
- *   <span class="pill [ok|warn|bad|accent|info] [.pill--dot|pill--outline|pill--sm]">文本</span>
+ *   <span class="pill [pill--success|pill--warning|pill--error|pill--info|pill--accent] [.pill--dot|pill--outline|pill--sm]">文本</span>
  *
  * 语义色纪律：仅绿/黄/红/信息 + 品牌 accent。
  * --dot：左侧加状态色圆点；--outline：透明底、纯描边；--sm：紧凑尺寸。
@@ -8176,27 +10937,27 @@ html {
   vertical-align: middle;
 }
 
-.pill.ok {
+.pill--success {
   color: var(--token-success);
   border-color: color-mix(in srgb, var(--token-success) 35%, transparent);
   background: color-mix(in srgb, var(--token-success) 9%, transparent);
 }
-.pill.warn {
+.pill--warning {
   color: var(--token-warning);
   border-color: color-mix(in srgb, var(--token-warning) 35%, transparent);
   background: color-mix(in srgb, var(--token-warning) 9%, transparent);
 }
-.pill.bad {
+.pill--error {
   color: var(--token-error);
   border-color: color-mix(in srgb, var(--token-error) 35%, transparent);
   background: color-mix(in srgb, var(--token-error) 9%, transparent);
 }
-.pill.accent {
+.pill--accent {
   color: var(--token-accent-deep, var(--token-accent));
   border-color: color-mix(in srgb, var(--token-accent) 40%, transparent);
   background: color-mix(in srgb, var(--token-accent) 9%, transparent);
 }
-.pill.info {
+.pill--info {
   color: var(--token-info);
   border-color: color-mix(in srgb, var(--token-info) 35%, transparent);
   background: color-mix(in srgb, var(--token-info) 9%, transparent);
@@ -8221,7 +10982,7 @@ html {
 /* 尺寸变体 */
 .pill--sm {
   padding: 1px var(--density-space-xs);
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
 }
 .pill--lg {
   padding: 4px calc(var(--density-space-sm) + 2px);
@@ -8231,13 +10992,13 @@ html {
 /* 实色变体：accent 实底（用于 count、活跃状态等强调场景） */
 .pill--solid {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-accent);
 }
-.pill--solid.ok   { background: var(--token-success); border-color: var(--token-success); color: var(--token-on-accent, #fff); }
-.pill--solid.warn { background: var(--token-warning); border-color: var(--token-warning); color: var(--token-on-accent, #fff); }
-.pill--solid.bad  { background: var(--token-error);   border-color: var(--token-error);   color: var(--token-on-accent, #fff); }
-.pill--solid.info { background: var(--token-info);    border-color: var(--token-info);    color: var(--token-on-accent, #fff); }
+.pill--solid.pill--success { background: var(--token-success); border-color: var(--token-success); }
+.pill--solid.pill--warning { background: var(--token-warning); border-color: var(--token-warning); }
+.pill--solid.pill--error   { background: var(--token-error);   border-color: var(--token-error); }
+.pill--solid.pill--info    { background: var(--token-info);    border-color: var(--token-info); }
 
 /* ── 增强 ── */
 
@@ -8278,7 +11039,7 @@ html {
   border-radius: var(--radius-full);
   background: currentColor;
   margin-right: 2px;
-  animation: pill-pulse 1.5s ease-in-out infinite;
+  animation: pill-pulse var(--pill-pulse-duration, 1.5s) ease-in-out infinite;
 }
 @keyframes pill-pulse {
   0%, 100% { opacity: 1; transform: scale(1); }
@@ -8291,7 +11052,7 @@ html {
   height: 18px;
   padding: 0 5px;
   justify-content: center;
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   line-height: 1;
@@ -8300,7 +11061,7 @@ html {
 /* 渐变变体 */
 .pill--gradient {
   background: linear-gradient(135deg, var(--token-accent), var(--token-accent-deep, var(--token-accent)));
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: transparent;
 }
 
@@ -8630,7 +11391,7 @@ html {
 .segmented-item.is-active,
 .segmented-item[aria-checked='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   box-shadow: var(--token-shadow-elevated);
 }
 .segmented-item:disabled,
@@ -8688,7 +11449,7 @@ html {
 .toggle-item.is-active,
 .toggle-item[aria-checked='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   box-shadow: var(--token-shadow-card);
 }
 .toggle-item:disabled,
@@ -8739,7 +11500,7 @@ html {
 }
 .stepper-btn:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--token-accent) 50%, transparent);
+  box-shadow: var(--icen-ring-inset);
 }
 .stepper-btn:disabled,
 .stepper-btn[aria-disabled='true'] {
@@ -8783,7 +11544,7 @@ html {
   height: 48px;
   padding: 0;
   text-align: center;
-  font-size: 18px;
+  font-size: var(--density-font-size-xl);
   font-weight: 600;
   font-family: var(--font-mono);
   color: var(--token-text);
@@ -8812,7 +11573,7 @@ html {
   cursor: not-allowed;
 }
 .otp--sm .otp-cell { width: 32px; height: 40px; font-size: var(--density-font-size-lg); }
-.otp--lg .otp-cell { width: 48px; height: 56px; font-size: 22px; }
+.otp--lg .otp-cell { width: 48px; height: 56px; font-size: var(--density-font-size-2xl); }
 
 @media (prefers-reduced-motion: reduce) {
   .segmented-item, .toggle-item, .stepper-btn, .stepper, .otp-cell { transition: none; }
@@ -8923,7 +11684,8 @@ html {
  *   </div>
  *
  * behavior 维护：
- *   - .select.is-open ↔ aria-expanded；panel [hidden] 切换；ESC/外部点击关闭
+ *   - .select.is-open ↔ aria-expanded；panel portal 到 body（inline left/top/width/max-height，
+ *     带 data-side="top|bottom"；多选时带 data-select-multiple）；ESC/外部点击关闭
  *   - 选项 .is-focused 跟随键盘箭头；Enter 选中 → 写回 .select-value / .is-selected
  *   - data-select-search：面板顶部自动插入搜索框，实时过滤（含 data-keywords），空分组自动隐藏
  *   - data-select-multiple：点击切选不关面板，trigger 显示计数，hidden input 同步逗号分隔值
@@ -8932,7 +11694,6 @@ html {
 .select {
   position: relative;
   width: 100%;
-  isolation: isolate; /* panel 不被后面兄弟节点的层叠遮挡 */
 }
 
 .select-trigger {
@@ -9002,12 +11763,11 @@ html {
 }
 .select.is-open .select-chevron { transform: rotate(180deg); }
 
+/* 面板由 behavior portal 到 body：left/top/width/max-height 由 JS 按 trigger rect inline 写入；
+   data-side="top|bottom" 标记翻侧方向；多选时 panel 带 data-select-multiple 属性。 */
 .select-panel {
   position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  min-width: 100%;
-  max-height: 240px;
+  z-index: var(--z-popover);
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 4px;
@@ -9015,17 +11775,10 @@ html {
   border: 1px solid var(--token-outline);
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-overlay);
-  z-index: var(--z-popover);
   transform-origin: top center;
-  animation: select-panel-in var(--icen-tx-fast);
-}
-@keyframes select-panel-in {
-  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .select-panel { animation: none; }
+  animation: icen-pop-in var(--icen-tx-fast);
 }
+.select-panel[data-side='top'] { transform-origin: bottom center; }
 
 /* 选项 */
 .select-option {
@@ -9127,7 +11880,7 @@ html {
   border-radius: var(--radius-xs);
   background: transparent;
   color: var(--token-text-faint);
-  font-size: 15px;
+  font-size: var(--density-font-size-lg);
   line-height: 1;
   cursor: pointer;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
@@ -9146,8 +11899,8 @@ html {
   flex-wrap: wrap;
 }
 
-/* 多选项 checkbox 指示器（选项左侧） */
-.select[data-select-multiple] .select-option::before {
+/* 多选项 checkbox 指示器（选项左侧；panel portal 到 body，属性在 panel 上） */
+.select-panel[data-select-multiple] .select-option::before {
   content: '';
   width: 14px;
   height: 14px;
@@ -9156,11 +11909,11 @@ html {
   border-radius: var(--radius-xs);
   transition: background-color var(--icen-tx-fast), border-color var(--icen-tx-fast);
 }
-.select[data-select-multiple] .select-option.is-selected::before {
+.select-panel[data-select-multiple] .select-option.is-selected::before {
   background: var(--token-accent);
   border-color: var(--token-accent);
 }
-.select[data-select-multiple] .select-option.is-selected::after {
+.select-panel[data-select-multiple] .select-option.is-selected::after {
   content: '✓';
   margin-left: auto;
 }
@@ -9345,7 +12098,7 @@ html {
   padding: 0 5px;
   font-size: var(--density-font-size-xs);
   font-weight: 600;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   background: var(--token-accent);
   border-radius: var(--radius-full);
   font-variant-numeric: tabular-nums;
@@ -9883,7 +12636,6 @@ html {
 }
 .split-pane--vertical .split-pane-first {
   flex: 0 0 var(--split, 50%);
-  flex-basis: var(--split, 50%);
   min-height: 0;
 }
 .split-pane--vertical .split-pane-second {
@@ -9922,10 +12674,10 @@ html {
  *     <div class="stat-card [.stat-card--interactive] [.stat-card--horizontal]">
  *       <div class="stat-head">
  *         <span class="stat-label">用户总数</span>
- *         <span class="stat-icon [.icon--ok|.icon--warn|.icon--bad|.icon--info]>…svg…</span>
+ *         <span class="stat-icon [.icon--success|.icon--warning|.icon--error|.icon--info]>…svg…</span>
  *       </div>
  *       <div class="stat-body">
- *         <div class="stat-num [.accent|.warn|.bad|.info]">0</div>
+ *         <div class="stat-num [--accent|--warning|--error|--info]">0</div>
  *         <div class="stat-delta [.up|.down|.flat]">          ← 可选趋势
  *           <svg>…arrow…</svg> +12.4%
  *           <span class="stat-period">比上周</span>
@@ -10001,10 +12753,10 @@ html {
   background: var(--token-accent-subtle);
   color: var(--token-accent);
 }
-.stat-icon.icon--ok   { background: color-mix(in srgb, var(--token-success) 14%, transparent); color: var(--token-success); }
-.stat-icon.icon--warn { background: color-mix(in srgb, var(--token-warning) 14%, transparent); color: var(--token-warning); }
-.stat-icon.icon--bad  { background: color-mix(in srgb, var(--token-error) 14%, transparent); color: var(--token-error); }
-.stat-icon.icon--info { background: color-mix(in srgb, var(--token-info) 14%, transparent); color: var(--token-info); }
+.stat-icon.icon--success { background: color-mix(in srgb, var(--token-success) 14%, transparent); color: var(--token-success); }
+.stat-icon.icon--warning { background: color-mix(in srgb, var(--token-warning) 14%, transparent); color: var(--token-warning); }
+.stat-icon.icon--error   { background: color-mix(in srgb, var(--token-error) 14%, transparent); color: var(--token-error); }
+.stat-icon.icon--info    { background: color-mix(in srgb, var(--token-info) 14%, transparent); color: var(--token-info); }
 .stat-icon svg { width: 14px; height: 14px; }
 
 /* ── 内容体（数字 + 趋势） ── */
@@ -10015,17 +12767,17 @@ html {
 }
 
 .stat-num {
-  font-size: 24px;
+  font-size: var(--density-font-size-2xl);
   font-weight: 700;
   line-height: 1.2;
   font-variant-numeric: tabular-nums lining-nums;
   color: var(--token-text);
   word-break: break-all;
 }
-.stat-num.accent { color: var(--token-accent); }
-.stat-num.warn   { color: var(--token-warning); }
-.stat-num.bad    { color: var(--token-error); }
-.stat-num.info   { color: var(--token-info); }
+.stat-num--accent  { color: var(--token-accent); }
+.stat-num--warning { color: var(--token-warning); }
+.stat-num--error   { color: var(--token-error); }
+.stat-num--info    { color: var(--token-info); }
 
 .stat-delta {
   display: inline-flex;
@@ -10050,7 +12802,7 @@ html {
   gap: 2px;
 }
 .stat-card--sm .stat-num { font-size: var(--density-font-size-lg); }
-.stat-card--sm .stat-label { font-size: 10px; }
+.stat-card--sm .stat-label { font-size: var(--density-font-size-2xs); }
 
 /* ── 横向布局（dashboard 顶栏：标签左 + 数字右） ── */
 .stat-card--horizontal {
@@ -10131,20 +12883,16 @@ html {
   margin: 0 1px;
 }
 
-/* ── 加载态骨架 ── */
+/* ── 加载态骨架（脉冲 keyframes 见 base.css 的 icen-skeleton-pulse） ── */
 .stat-card.is-loading .stat-num,
 .stat-card.is-loading .stat-delta {
   color: transparent;
   background: var(--token-fill-2);
   border-radius: var(--radius-xs);
-  animation: stat-skeleton 1.5s ease-in-out infinite;
+  animation: icen-skeleton-pulse var(--stat-skeleton-duration, 1.5s) ease-in-out infinite;
 }
 .stat-card.is-loading .stat-num { height: 28px; }
 .stat-card.is-loading .stat-delta { height: 14px; width: 60%; }
-@keyframes stat-skeleton {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
 @media (prefers-reduced-motion: reduce) {
   .stat-card.is-loading .stat-num,
   .stat-card.is-loading .stat-delta { animation: none; }
@@ -10216,7 +12964,7 @@ html {
 }
 .step--finish .step-dot {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 .step--process .step-dot {
   background: var(--token-accent-subtle);
@@ -10307,7 +13055,7 @@ html {
   width: 16px;
   height: 16px;
 }
-.step--finish .step-dot-icon { color: var(--token-on-accent, #fff); }
+.step--finish .step-dot-icon { color: var(--token-on-accent); }
 .step--process .step-dot-icon { color: var(--token-accent); }
 .step--wait .step-dot-icon { color: var(--token-text-faint); }
 .step--error .step-dot-icon { color: var(--token-error); }
@@ -10449,8 +13197,8 @@ html {
   width: var(--switch-thumb);
   height: var(--switch-thumb);
   border-radius: var(--radius-full);
-  background: var(--token-on-accent, #fff);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  background: var(--token-on-accent);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--token-text) 15%, transparent);
   transition: transform var(--icen-tx-bounce);
 }
 .switch[aria-checked='true'] .switch-thumb {
@@ -10461,10 +13209,6 @@ html {
 .switch--sm { --switch-w: 36px; --switch-h: 20px; --switch-thumb: 16px; }
 .switch--lg { --switch-w: 56px; --switch-h: 28px; --switch-thumb: 24px; }
 
-@media (prefers-reduced-motion: reduce) {
-  .switch-thumb { transition: none; }
-}
-
 /* ── 勾选框（✓ 与半选横条均 ::before 自绘） ── */
 .checkbox {
   --checkbox-size: 16px;
@@ -10494,7 +13238,7 @@ html {
 .checkbox[aria-checked='mixed'] {
   background: var(--token-accent);
   border-color: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 .checkbox::before {
   content: '';
@@ -10614,7 +13358,7 @@ html {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
   color: transparent;
 }
@@ -10624,9 +13368,9 @@ html {
   left: 6px;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 .switch--text[aria-checked='false']::before {
   content: 'OFF';
@@ -10634,7 +13378,7 @@ html {
   right: 6px;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 9px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 700;
   color: var(--token-text-faint);
 }
@@ -10694,7 +13438,7 @@ html {
     background-color var(--icen-tx-fast);
 }
 .radio-card:hover {
-  border-color: var(--token-hover-border, color-mix(in srgb, var(--token-accent) 30%, transparent));
+  border-color: var(--icen-hover-border);
 }
 .radio-card-head {
   display: flex;
@@ -10750,7 +13494,7 @@ html {
  *
  * 完整契约：
  *   <div class="table-wrap [table-wrap--bordered]">
- *     <table class="admin-table [--zebra|--compact|--dense] [--sticky-col]">
+ *     <table class="table [--zebra|--compact|--dense] [--sticky-col]">
  *       <caption class="table-caption">标题说明</caption>     ← 可选
  *       <thead>
  *         <tr><th [colspan=rowspan] [data-sort]>列名</th>…</tr>
@@ -10770,9 +13514,9 @@ html {
  *   </div>
  *
  * .table-wrap：窄屏横向滚动（滚动条样式见 base.css）；--bordered 加外边框。
- * .admin-table--zebra：斑马纹（奇数行底色）。
- * .admin-table--compact：紧凑（cell padding 缩小）；--dense：极紧凑（行高更紧）。
- * .admin-table--sticky-col：首列水平粘滞（配合 td/th .col-fixed，长表横向滚动时保持可见）。
+ * .table--zebra：斑马纹（奇数行底色）。
+ * .table--compact：紧凑（cell padding 缩小）；--dense：极紧凑（行高更紧）。
+ * .table--sticky-col：首列水平粘滞（配合 td/th .col-fixed，长表横向滚动时保持可见）。
  * .row-expand[hidden]：配合 .row-link.is-expanded 控制展开行显隐。
  */
 
@@ -10785,18 +13529,18 @@ html {
   border: 1px solid var(--token-line-soft);
 }
 
-.admin-table {
+.table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--density-font-size-md);
   font-variant-numeric: tabular-nums;
 }
-.admin-table th,
-.admin-table td {
+.table th,
+.table td {
   padding: var(--density-space-sm) calc(var(--density-space-md) + 2px);
   text-align: left;
 }
-.admin-table th {
+.table th {
   font-weight: 600;
   font-size: var(--density-font-size-xs);
   letter-spacing: 0.05em;
@@ -10807,27 +13551,27 @@ html {
   background: var(--token-bg-soft);
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: var(--z-raised);
 }
-.admin-table td {
+.table td {
   border-bottom: 1px solid var(--token-line-soft);
   vertical-align: middle;
   color: var(--token-text);
 }
-.admin-table tbody tr:last-child td { border-bottom: 0; }
-.admin-table tbody tr {
+.table tbody tr:last-child td { border-bottom: 0; }
+.table tbody tr {
   transition: background-color var(--icen-tx-fast);
 }
-.admin-table tbody tr:hover {
+.table tbody tr:hover {
   background: var(--token-surface-strong);
 }
-.admin-table tbody tr.row-link {
+.table tbody tr.row-link {
   cursor: pointer;
 }
-.admin-table tbody tr.is-selected {
+.table tbody tr.is-selected {
   background: var(--token-accent-subtle);
 }
-.admin-table tfoot td {
+.table tfoot td {
   border-top: 1px solid var(--token-line);
   border-bottom: 0;
   font-weight: 500;
@@ -10835,51 +13579,50 @@ html {
 }
 
 /* 紧凑变体 */
-.admin-table--compact th,
-.admin-table--compact td {
+.table--compact th,
+.table--compact td {
   padding: var(--density-space-xs) var(--density-space-sm);
 }
-.admin-table--dense th,
-.admin-table--dense td {
+.table--dense th,
+.table--dense td {
   padding: 4px var(--density-space-xs);
   font-size: var(--density-font-size-sm);
 }
 
 /* 右对齐数字列 */
-.admin-table td.num {
+.table td.num {
   text-align: right;
   font-variant-numeric: tabular-nums lining-nums;
 }
 
-/* 操作列 */
-.admin-table .ops {
+/* 操作列（.btn-sm 必伴 .btn，无需单独列） */
+.table .ops {
   white-space: nowrap;
   text-align: right;
 }
-.admin-table .ops .btn,
-.admin-table .ops .btn-sm {
+.table .ops .btn {
   margin-left: var(--density-space-xs);
 }
 
 /* 可排序表头（使用方 data-sort 指示） */
-.admin-table th[data-sort] {
+.table th[data-sort] {
   cursor: pointer;
   user-select: none;
 }
-.admin-table th[data-sort]::after {
+.table th[data-sort]::after {
   content: '↕';
   margin-left: var(--density-space-xs);
   color: var(--token-text-faint);
   opacity: 0.6;
 }
-.admin-table th[data-sort='asc']::after { content: '↑'; opacity: 1; color: var(--token-accent); }
-.admin-table th[data-sort='desc']::after { content: '↓'; opacity: 1; color: var(--token-accent); }
+.table th[data-sort='asc']::after { content: '↑'; opacity: 1; color: var(--token-accent); }
+.table th[data-sort='desc']::after { content: '↓'; opacity: 1; color: var(--token-accent); }
 
 /* ── 斑马纹 ── */
-.admin-table--zebra tbody tr:nth-child(odd) {
+.table--zebra tbody tr:nth-child(odd) {
   background: color-mix(in srgb, var(--token-bg-soft) 50%, transparent);
 }
-.admin-table--zebra tbody tr:hover {
+.table--zebra tbody tr:hover {
   background: var(--token-surface-strong);
 }
 
@@ -10894,30 +13637,30 @@ html {
 }
 
 /* ── 首列粘滞（长表横向滚动时保持可见） ── */
-.admin-table--sticky-col th:first-child,
-.admin-table--sticky-col .col-fixed {
+.table--sticky-col th:first-child,
+.table--sticky-col .col-fixed {
   position: sticky;
   left: 0;
-  z-index: 2;
+  z-index: calc(var(--z-raised) + 1);
   background: var(--token-bg-soft);
-  box-shadow: 2px 0 4px color-mix(in srgb, var(--token-shadow-card-base, rgba(0,0,0,0.06)) 40%, transparent);
+  box-shadow: 2px 0 4px color-mix(in srgb, var(--token-text) 5%, transparent);
 }
-.admin-table--sticky-col tbody td.col-fixed {
+.table--sticky-col tbody td.col-fixed {
   background: var(--token-surface);
 }
-.admin-table--sticky-col tbody tr:hover td.col-fixed {
+.table--sticky-col tbody tr:hover td.col-fixed {
   background: var(--token-surface-strong);
 }
 
 /* ── 展开行 ── */
-.admin-table .row-expand > td {
+.table .row-expand > td {
   padding: 0 var(--density-space-md);
   background: var(--token-bg-soft);
   border-bottom: 1px solid var(--token-line-soft);
   font-size: var(--density-font-size-sm);
   color: var(--token-text-muted);
 }
-.admin-table .row-expand[hidden] { display: none; }
+.table .row-expand[hidden] { display: none; }
 /* 展开行的内容容器（使用方可加 padding/动画） */
 .row-expand-content {
   padding: var(--density-space-sm) 0;
@@ -10929,22 +13672,22 @@ html {
 }
 
 /* ── 列宽工具类 ── */
-.admin-table .col-narrow { width: 80px; }
-.admin-table .col-wide { width: 240px; }
-.admin-table .col-action { width: 1%; white-space: nowrap; }
+.table .col-narrow { width: 80px; }
+.table .col-wide { width: 240px; }
+.table .col-action { width: 1%; white-space: nowrap; }
 
 /* ── 行状态色 ── */
-.admin-table tbody tr.row-success { background: color-mix(in srgb, var(--token-success) 6%, transparent); }
-.admin-table tbody tr.row-warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent); }
-.admin-table tbody tr.row-error   { background: color-mix(in srgb, var(--token-error) 6%, transparent); }
+.table tbody tr.row-success { background: color-mix(in srgb, var(--token-success) 6%, transparent); }
+.table tbody tr.row-warning { background: color-mix(in srgb, var(--token-warning) 6%, transparent); }
+.table tbody tr.row-error   { background: color-mix(in srgb, var(--token-error) 6%, transparent); }
 
 /* ── 粘滞表头阴影提示 ── */
-.admin-table thead th {
+.table thead th {
   box-shadow: 0 1px 0 var(--token-line);
 }
 
 /* ── 表头分组（rowspan/colspan 样式） ── */
-.admin-table th[rowspan] { vertical-align: bottom; }
+.table th[rowspan] { vertical-align: bottom; }
 
 @media (prefers-reduced-motion: reduce) {
   .row-expand-content { animation: none; }
@@ -10956,20 +13699,19 @@ html {
  * @icen.ai/ui — Component: tabs（分区导航 / 子导航）
  *
  * 完整契约：
- *   <div class="page-tabs" role="tablist">                       ← 页面内分区
- *     <button class="page-tab [.active]" role="tab" [aria-selected="true"]>…</button>
+ *   <div class="tabs" role="tablist">                            ← 页面内分区
+ *     <button class="page-tab [.is-active]" role="tab" [aria-selected="true"]>…</button>
  *   </div>
  *
- *   <nav class="admin-tabs" role="navigation">                   ← 顶部子导航（a 链接）
- *     <a class="[.active]" [aria-current="page"] href="…">…</a>
+ *   <nav class="tabs" role="navigation">                         ← 顶部子导航（a 链接）
+ *     <a class="[.is-active]" [aria-current="page"] href="…">…</a>
  *   </nav>
  *
  * 与 behaviors/tabs 配套：[data-tabs] > [data-tab] + [data-tab-panel]，行为层维护 aria。
- * 窄屏换行不滚动（CLAUDE.md 纪律：tab 条永不出现滚动条）。
+ * 窄屏换行不滚动（纪律：tab 条永不出现滚动条，一律 flex-wrap: wrap）。
  */
 
-.page-tabs,
-.admin-tabs {
+.tabs {
   display: flex;
   gap: 2px;
   flex-wrap: wrap;
@@ -11001,14 +13743,14 @@ html {
   border-radius: var(--radius-sm);
   box-shadow: var(--icen-ring);
 }
-.page-tab.active,
+.page-tab.is-active,
 .page-tab[aria-selected='true'] {
   color: var(--token-accent);
   border-bottom-color: var(--token-accent);
   font-weight: 700;
 }
 
-.admin-tabs a {
+.tabs a {
   padding: var(--density-space-sm) var(--density-space-md);
   font-size: var(--density-font-size-md);
   color: var(--token-text-muted);
@@ -11020,44 +13762,44 @@ html {
     color var(--icen-tx-fast),
     border-color var(--icen-tx-fast);
 }
-.admin-tabs a:hover {
+.tabs a:hover {
   color: var(--token-accent);
   text-decoration: none;
 }
-.admin-tabs a:focus-visible {
+.tabs a:focus-visible {
   outline: none;
   border-radius: var(--radius-sm);
   box-shadow: var(--icen-ring);
 }
-.admin-tabs a.active,
-.admin-tabs a[aria-current='page'] {
+.tabs a.is-active,
+.tabs a[aria-current='page'] {
   color: var(--token-accent);
   border-bottom-color: var(--token-accent);
 }
 
-/* 卡片变体（可选 .page-tabs--cards）：tab 变成 pill，没有底边线 */
-.page-tabs--cards {
+/* 卡片变体（可选 .tabs--cards）：tab 变成 pill，没有底边线 */
+.tabs--cards {
   border-bottom: 0;
   gap: var(--density-space-xs);
   margin-bottom: var(--density-space-md);
 }
-.page-tabs--cards .page-tab {
+.tabs--cards .page-tab {
   padding: var(--density-space-xs) var(--density-space-md);
   border: 1px solid var(--token-outline-soft);
   border-radius: var(--radius-full);
   margin-bottom: 0;
 }
-.page-tabs--cards .page-tab.active,
-.page-tabs--cards .page-tab[aria-selected='true'] {
+.tabs--cards .page-tab.is-active,
+.tabs--cards .page-tab[aria-selected='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-color: var(--token-accent);
   font-weight: 500;
 }
 
 /* 等宽变体：tab 平均占满容器 */
-.page-tabs--equal .page-tab,
-.admin-tabs--equal a {
+.tabs--equal .page-tab,
+.tabs--equal a {
   flex: 1;
   text-align: center;
 }
@@ -11065,11 +13807,11 @@ html {
 /* ── 增强 ── */
 
 /* 尺寸变体 */
-.page-tabs--sm .page-tab {
+.tabs--sm .page-tab {
   padding: var(--density-space-xs) var(--density-space-sm);
   font-size: var(--density-font-size-sm);
 }
-.page-tabs--lg .page-tab {
+.tabs--lg .page-tab {
   padding: var(--density-space-md) calc(var(--density-space-md) + 4px);
   font-size: var(--density-font-size-lg);
 }
@@ -11091,7 +13833,7 @@ html {
   height: 18px;
   padding: 0 5px;
   margin-left: var(--density-space-xs);
-  font-size: 10px;
+  font-size: var(--density-font-size-2xs);
   font-weight: 600;
   color: var(--token-text-faint);
   background: var(--token-fill-2);
@@ -11099,10 +13841,10 @@ html {
   font-variant-numeric: tabular-nums;
   line-height: 1;
 }
-.page-tab.active .page-tab-badge,
+.page-tab.is-active .page-tab-badge,
 .page-tab[aria-selected='true'] .page-tab-badge {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 
 /* 可关闭 tab */
@@ -11129,7 +13871,7 @@ html {
 .page-tab-close svg { width: 10px; height: 10px; }
 
 /* 分段式 tab（替代底边线，用 segmented 视觉） */
-.page-tabs--segment {
+.tabs--segment {
   display: inline-flex;
   border-bottom: none;
   gap: 2px;
@@ -11139,52 +13881,42 @@ html {
   border-radius: var(--radius-md);
   box-shadow: var(--token-shadow-inset);
 }
-.page-tabs--segment .page-tab {
+.tabs--segment .page-tab {
   border-bottom: none;
   margin-bottom: 0;
   padding: var(--density-space-xs) var(--density-space-md);
   border-radius: var(--radius-sm);
 }
-.page-tabs--segment .page-tab.active,
-.page-tabs--segment .page-tab[aria-selected='true'] {
+.tabs--segment .page-tab.is-active,
+.tabs--segment .page-tab[aria-selected='true'] {
   background: var(--token-accent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
   border-bottom-color: transparent;
   font-weight: 500;
 }
 
 /* 垂直 tab（侧栏式） */
-.page-tabs--vertical {
+.tabs--vertical {
   flex-direction: column;
   border-bottom: none;
   border-right: 1px solid var(--token-line-soft);
   margin-bottom: 0;
   min-width: 160px;
 }
-.page-tabs--vertical .page-tab {
+.tabs--vertical .page-tab {
   border-bottom: none;
   border-right: 2px solid transparent;
   margin-bottom: 0;
   margin-right: -1px;
 }
-.page-tabs--vertical .page-tab.active,
-.page-tabs--vertical .page-tab[aria-selected='true'] {
+.tabs--vertical .page-tab.is-active,
+.tabs--vertical .page-tab[aria-selected='true'] {
   border-right-color: var(--token-accent);
   border-bottom-color: transparent;
 }
 
-/* tab 溢出渐变提示（窄屏溢出时右侧渐变遮罩——纯视觉提示，不违反"不滚动"纪律，仍 flex-wrap） */
-.page-tabs--scroll {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.page-tabs--scroll::-webkit-scrollbar { display: none; }
-
 @media (prefers-reduced-motion: reduce) {
-  .page-tab, .admin-tabs a, .page-tab-close { transition: none; }
+  .page-tab, .tabs a, .page-tab-close { transition: none; }
 }
 
 
@@ -11231,7 +13963,7 @@ html {
 .tag-input.is-max,
 .tag-input.is-max:focus-within {
   border-color: color-mix(in srgb, var(--token-warning) 60%, transparent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--token-warning) 14%, transparent);
+  box-shadow: var(--icen-ring-warning);
 }
 .tag-input.is-disabled,
 .tag-input[aria-disabled='true'],
@@ -11289,7 +14021,7 @@ html {
   cursor: pointer;
   border-radius: var(--radius-full);
   color: inherit;
-  font-size: 11px;
+  font-size: var(--density-font-size-xs);
   line-height: 1;
   opacity: 0.7;
   transition:
@@ -11300,7 +14032,7 @@ html {
 .tag-chip-x:hover {
   opacity: 1;
   background: color-mix(in srgb, currentColor 18%, transparent);
-  color: var(--token-on-accent, #fff);
+  color: var(--token-on-accent);
 }
 .tag-chip-x:focus-visible {
   outline: none;
@@ -11326,7 +14058,7 @@ html {
 
 /* 重复值抖动反馈（behavior 短暂挂 is-shake） */
 .tag-input.is-shake {
-  animation: tag-shake 0.32s var(--ease-out);
+  animation: tag-shake var(--tag-shake-duration, 0.32s) var(--ease-out);
 }
 @keyframes tag-shake {
   0%, 100% { transform: translateX(0); }
@@ -11510,7 +14242,7 @@ button.tag,
  *
  * 完整契约：
  *   <div class="toast-container" role="status" aria-live="polite">
- *     <div class="toast [ok|err|warn]" role="status|alert">
+ *     <div class="toast [toast--success|toast--error|toast--warning|toast--info]" role="status|alert">
  *       <span class="toast-msg">文本</span>
  *       <button class="toast-action">撤销</button>       ← 可选 action
  *     </div>
@@ -11533,6 +14265,8 @@ button.tag,
 
 .toast {
   pointer-events: auto;
+  position: relative;
+  overflow: hidden;
   display: inline-flex;
   align-items: center;
   gap: var(--density-space-sm);
@@ -11550,9 +14284,10 @@ button.tag,
 }
 
 /* 语义色：左缘 3px 强调 */
-.toast.ok   { border-left-color: var(--token-success); }
-.toast.err  { border-left-color: var(--token-error); }
-.toast.warn { border-left-color: var(--token-warning); }
+.toast--success { border-left-color: var(--token-success); }
+.toast--error   { border-left-color: var(--token-error); }
+.toast--warning { border-left-color: var(--token-warning); }
+.toast--info    { border-left-color: var(--token-info); }
 
 .toast-msg {
   flex: 1;
@@ -11593,9 +14328,10 @@ button.tag,
   color: var(--token-text-faint);
 }
 .toast-icon svg { width: 16px; height: 16px; }
-.toast.ok .toast-icon { color: var(--token-success); }
-.toast.err .toast-icon { color: var(--token-error); }
-.toast.warn .toast-icon { color: var(--token-warning); }
+.toast--success .toast-icon { color: var(--token-success); }
+.toast--error   .toast-icon { color: var(--token-error); }
+.toast--warning .toast-icon { color: var(--token-warning); }
+.toast--info    .toast-icon { color: var(--token-info); }
 
 /* 关闭按钮 */
 .toast-close {
@@ -11654,16 +14390,15 @@ button.tag,
   transform-origin: left;
   animation: toast-countdown linear forwards;
 }
-.toast.ok .toast-progress-fill { background: var(--token-success); }
-.toast.err .toast-progress-fill { background: var(--token-error); }
-.toast.warn .toast-progress-fill { background: var(--token-warning); }
+.toast--success .toast-progress-fill { background: var(--token-success); }
+.toast--error   .toast-progress-fill { background: var(--token-error); }
+.toast--warning .toast-progress-fill { background: var(--token-warning); }
+.toast--info    .toast-progress-fill { background: var(--token-info); }
 @keyframes toast-countdown {
   from { transform: scaleX(1); }
   to   { transform: scaleX(0); }
 }
 
-.toast { position: relative; overflow: hidden; }
-
 /* 容器定位变体 */
 .toast-container[data-position='top-left'] {
   right: auto;
@@ -11696,7 +14431,7 @@ button.tag,
   align-items: center;
 }
 
-.toast.leaving {
+.toast.is-leaving {
   opacity: 0;
   transform: translateY(8px);
   transition:
@@ -11833,7 +14568,7 @@ button.tag,
  *   无障碍：键盘 :focus-visible 立即出现（无延迟），鼠标 hover 延迟 400ms。
  */
 
-[data-tooltip] { position: relative; }
+[data-tooltip] { position: relative; --tooltip-delay: 400ms; }
 
 [data-tooltip]::after {
   content: attr(data-tooltip);
@@ -11858,7 +14593,7 @@ button.tag,
   transition:
     opacity var(--icen-tx-fast),
     transform var(--icen-tx-fast);
-  transition-delay: 400ms;
+  transition-delay: var(--tooltip-delay);
 
   /* 默认：上方、水平居中 */
   bottom: calc(100% + 6px);