/* ==========================================================================
   Coder CC · v1.0
   黑白灰为骨架、数据优先的个人组件库。零依赖。
   用法：
     <link rel="stylesheet" href="coder-cc/cc.css">
     <script src="coder-cc/cc.js" defer></script>
   命名：所有类名以 cc- 开头；状态类统一用 is-*（is-active / is-open / is-done …）
   ========================================================================== */

/* 目录（顺序有意义：同级选择器后面覆盖前面，例如 18 覆盖 16 的弹层内边距、23 压过组件文字色；
   新规则请放进对应分区，不要再追加到文件末尾）
    1. Tokens · 设计令牌（亮 / 暗主题、品牌图标反色）
    2. Base · 基础
    3. Typography · 字体
    4. Layout · 布局（行列 / 栅格 / 区块标题 / 页头 / 分栏）
    5. Card · 卡片
    6. Button · 按钮
    7. Form · 表单
    8. Navigation · 导航类（分段 / 标签页 / 筛选标签 / 步骤条 / 分页 / 快捷键 / 下拉菜单 / 右键与二级菜单 / Prompt）
    9. Feedback · 反馈（徽标 / 状态 / 提示 / 轻提示 / 空状态 / 骨架 / 加载 / 进度条 / 顶部进度条 / 环形进度 / 对话框 / 气泡 / 头像）
   10. Display · 展示（指标 / 图例 / 表格 / 列表 / 时间线 / 日程 / 动态 / 树 / 应用入口）
   11. Shell · 应用外框（侧边栏 / 导航 / 折叠分组 / 收起成图标栏 / 顶栏 / 窄屏抽屉）
   12. Brand graphics · 品牌辅助图形
   13. Charts · 图表（含雷达图 / 仪表盘）
   14. Motion · 动效
   15. Data table · 排序 / 筛选 / 分页
   16. More components · 弹层 / 表单 / 展示补充（另含点击改名 / 评分 / 快捷键录制 / 密码显隐 / 命令片段 / 滚动阴影 /
       图片灯箱 / HTML 预览 / 轮播 / 新手引导 / 取色器 / 裁剪 / 区间滑块 / 通知中心 / 数字滚动）
   17. AI · 对话与 Agent（另含 / 命令与 @ 提及、编辑已发送的消息）
   18. Data grid & Kanban · 表格进阶与看板
   19. Media · 图片 / 视频 / 音频
   20. AI creation · AI 创作（绘画 / 视频 / 编程 IDE / 配音 / 工作流画布）
   21. Mobile · 移动端（导航栏 / 标签栏 / 底部面板 / 分组列表 / 左滑 / 下拉刷新 / 滚轮 / iPhone 样机 / 双端）
   22. Page templates · 整页模板布局
   23. Theme scope · 主题作用域
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens · 设计令牌
   只改这里就能换掉整套视觉。组件里只引用令牌，不写死颜色。
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --cc-font: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --cc-font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace,
    Menlo, Consolas, monospace;

  /* 表面与文字 */
  --cc-bg: #f6f6f5;
  --cc-surface: #ffffff;
  --cc-surface-2: #fafafa;
  --cc-surface-3: #f1f1f0;
  --cc-border: #e7e7e5;
  --cc-border-strong: #d4d4d2;
  --cc-text: #0a0a0a;
  --cc-text-2: #4d4d4d;
  --cc-text-3: #737371; /* 白底 4.75:1，满足正文对比度 */
  --cc-text-4: #9a9a98; /* 只用于占位 / 禁用 / 装饰，不承载需要读的信息 */

  /* 强调色：就是黑（暗色下是白） */
  --cc-accent: #0a0a0a;
  --cc-accent-hover: #2b2b2b;
  --cc-on-accent: #ffffff;
  --cc-focus: rgba(10, 10, 10, 0.08);
  --cc-focus-ring: #0a0a0a; /* 键盘焦点环：浅色 --cc-focus 只做柔光，看得清的是这一圈 */
  --cc-overlay: rgba(10, 10, 10, 0.32);

  /* 状态色：只用于状态点、提示和涨跌，不用于大面积装饰 */
  --cc-success: #16a34a;
  --cc-success-bg: #effaf2;
  --cc-warning: #e07c0a;
  --cc-warning-bg: #fff6ea;
  --cc-danger: #dc2626;
  --cc-danger-bg: #fdf1f1;
  --cc-danger-solid: #dc2626; /* 白字实心底（危险按钮 / 左滑删除），暗色下压暗保证 4.5:1 */
  --cc-info: #2563eb;
  --cc-info-bg: #eff4ff;

  /* 数据可视化灰阶：1 最重（突出），6 最轻（底色） */
  --cc-viz-1: #0a0a0a;
  --cc-viz-2: #4a4a4a;
  --cc-viz-3: #8c8c8c;
  --cc-viz-4: #bcbcbc;
  --cc-viz-5: #dcdcdc;
  --cc-viz-6: #efefef;

  /* 圆角 / 阴影 / 字号 / 动效 */
  --cc-r-xs: 4px;
  --cc-r-sm: 6px;
  --cc-r-md: 8px;
  --cc-r-lg: 12px;
  --cc-r-xl: 16px;
  --cc-r-full: 999px;

  --cc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --cc-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --cc-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);

  --cc-fs-xs: 11px;
  --cc-fs-sm: 12px;
  --cc-fs-md: 13px;
  --cc-fs-base: 14px;
  --cc-fs-lg: 16px;
  --cc-fs-xl: 20px;
  --cc-fs-2xl: 24px;
  --cc-fs-3xl: 32px;
  --cc-fs-4xl: 44px;

  --cc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cc-dur: 0.18s;

  /* 品牌图标：压在"跟随文字色底块"上的白色细节，暗色下随底块反转（见 12. Brand graphics） */
  --cc-brand-knock: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --cc-bg: #0b0b0b;
  --cc-surface: #131313;
  --cc-surface-2: #181818;
  --cc-surface-3: #212121;
  --cc-border: #262626;
  --cc-border-strong: #363636;
  --cc-text: #f0f0ef;
  --cc-text-2: #b0b0ae;
  --cc-text-3: #8f8f8d;
  --cc-text-4: #626261;
  --cc-accent: #f5f5f4;
  --cc-accent-hover: #d9d9d7;
  --cc-on-accent: #0a0a0a;
  --cc-focus: rgba(255, 255, 255, 0.1);
  --cc-focus-ring: #f0f0ef;
  --cc-overlay: rgba(0, 0, 0, 0.6);
  --cc-success: #3ccf6e;
  --cc-success-bg: rgba(60, 207, 110, 0.12);
  --cc-warning: #f59e2b;
  --cc-warning-bg: rgba(245, 158, 43, 0.12);
  --cc-danger: #f25555;
  --cc-danger-bg: rgba(242, 85, 85, 0.12);
  --cc-danger-solid: #d93636;
  --cc-info: #5b8dff;
  --cc-info-bg: rgba(91, 141, 255, 0.12);
  --cc-viz-1: #f5f5f4;
  --cc-viz-2: #b4b4b2;
  --cc-viz-3: #7e7e7c;
  --cc-viz-4: #555554;
  --cc-viz-5: #363636;
  --cc-viz-6: #232323;
  --cc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cc-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --cc-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --cc-brand-knock: #0b0b0b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cc-bg: #0b0b0b;
    --cc-surface: #131313;
    --cc-surface-2: #181818;
    --cc-surface-3: #212121;
    --cc-border: #262626;
    --cc-border-strong: #363636;
    --cc-text: #f0f0ef;
    --cc-text-2: #b0b0ae;
    --cc-text-3: #8f8f8d;
    --cc-text-4: #626261;
    --cc-accent: #f5f5f4;
    --cc-accent-hover: #d9d9d7;
    --cc-on-accent: #0a0a0a;
    --cc-focus: rgba(255, 255, 255, 0.1);
    --cc-focus-ring: #f0f0ef;
    --cc-overlay: rgba(0, 0, 0, 0.6);
    --cc-success: #3ccf6e;
    --cc-success-bg: rgba(60, 207, 110, 0.12);
    --cc-warning: #f59e2b;
    --cc-warning-bg: rgba(245, 158, 43, 0.12);
    --cc-danger: #f25555;
    --cc-danger-bg: rgba(242, 85, 85, 0.12);
    --cc-danger-solid: #d93636;
    --cc-info: #5b8dff;
    --cc-info-bg: rgba(91, 141, 255, 0.12);
    --cc-viz-1: #f5f5f4;
    --cc-viz-2: #b4b4b2;
    --cc-viz-3: #7e7e7c;
    --cc-viz-4: #555554;
    --cc-viz-5: #363636;
    --cc-viz-6: #232323;
    --cc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cc-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --cc-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
    --cc-brand-knock: #0b0b0b;
  }
}

/* --------------------------------------------------------------------------
   2. Base · 基础
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--cc-font);
  font-size: var(--cc-fs-base);
  line-height: 1.55;
  color: var(--cc-text);
  background: var(--cc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote) {
  margin: 0;
}

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(a) {
  color: inherit;
}

svg {
  flex-shrink: 0;
}

/* 保证 hidden 属性总能隐藏元素（组件常给元素设 display） */
[hidden] {
  display: none !important;
}

::selection {
  background: var(--cc-accent);
  color: var(--cc-on-accent);
}

:focus-visible {
  outline: 2px solid var(--cc-focus-ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Typography · 字体
   -------------------------------------------------------------------------- */
.cc-display {
  font-size: var(--cc-fs-4xl);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cc-h1 { font-size: var(--cc-fs-3xl); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.cc-h2 { font-size: var(--cc-fs-2xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.cc-h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.cc-h4 { font-size: 15px; font-weight: 600; line-height: 1.4; }
.cc-body { font-size: var(--cc-fs-base); }
.cc-small { font-size: var(--cc-fs-md); }
.cc-caption { font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-muted { color: var(--cc-text-2); }
.cc-subtle { color: var(--cc-text-3); }
.cc-faint { color: var(--cc-text-4); }
.cc-mono { font-family: var(--cc-font-mono); }
.cc-num { font-variant-numeric: tabular-nums; }
.cc-strong { font-weight: 600; }
.cc-eyebrow {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-text-3);
}
.cc-unit {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--cc-text-3);
  margin-left: 0.15em;
  letter-spacing: 0;
}
.cc-index {
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  color: var(--cc-text-3);
  font-variant-numeric: tabular-nums;
}
.cc-link {
  color: var(--cc-text);
  text-decoration: underline;
  text-decoration-color: var(--cc-border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--cc-dur);
}
.cc-link:hover { text-decoration-color: var(--cc-text); }

.cc-code {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface-2);
  font-family: var(--cc-font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--cc-text-2);
  overflow-x: auto;
  white-space: pre;
}
.cc-code-inline {
  font-family: var(--cc-font-mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: var(--cc-r-xs);
  background: var(--cc-surface-3);
  color: var(--cc-text-2);
}

/* --------------------------------------------------------------------------
   4. Layout · 布局
   -------------------------------------------------------------------------- */
.cc-row { display: flex; align-items: center; gap: var(--gap, 8px); flex-wrap: wrap; }
.cc-row--nowrap { flex-wrap: nowrap; }
.cc-row--between { justify-content: space-between; }
.cc-row--top { align-items: flex-start; }
.cc-col { display: flex; flex-direction: column; gap: var(--gap, 8px); }
.cc-spacer { flex: 1; }
.cc-grow { flex: 1; min-width: 0; }

.cc-grid-2,
.cc-grid-3,
.cc-grid-4,
.cc-grid-auto {
  display: grid;
  gap: var(--gap, 16px);
}
.cc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-grid-auto { grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr)); }
.cc-span-2 { grid-column: span 2; }
.cc-span-3 { grid-column: span 3; }
.cc-span-all { grid-column: 1 / -1; }

@media (max-width: 960px) {
  .cc-grid-3,
  .cc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-span-3 { grid-column: span 2; }
}
@media (max-width: 640px) {
  .cc-grid-2,
  .cc-grid-3,
  .cc-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .cc-span-2,
  .cc-span-3 { grid-column: auto; }
}

.cc-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px; }
.cc-divider { height: 1px; border: 0; margin: 0; background: var(--cc-border); }
.cc-divider--v { width: 1px; height: 16px; align-self: center; }
.cc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cc-text-right { text-align: right; }
.cc-w-full { width: 100%; }
.cc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 区块标题：01 · 标题 · 说明 ······ 右侧操作 */
.cc-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  min-width: 0;
}
.cc-section-title { font-size: 15px; font-weight: 600; white-space: nowrap; }
.cc-section-desc { font-size: var(--cc-fs-sm); color: var(--cc-text-3); min-width: 0; }
.cc-section-extra { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 页头：标题 + 说明 + 操作 + 元信息 + 标签页 */
.cc-page-header { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--cc-border); }
.cc-page-header:has(> .cc-tabs) { padding-bottom: 0; }
.cc-page-header > .cc-tabs { margin-top: 2px; margin-bottom: -1px; border-bottom: 0; }
.cc-page-header-main { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.cc-page-header-text { flex: 1 1 320px; min-width: 0; }
.cc-page-header-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--cc-fs-2xl); font-weight: 650; line-height: 1.25; letter-spacing: -0.02em; }
.cc-page-header-desc { margin: 6px 0 0; font-size: var(--cc-fs-md); line-height: 1.6; color: var(--cc-text-3); }
.cc-page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-page-header-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-page-header-meta > * { display: inline-flex; align-items: center; gap: 6px; }

/* Splitter 可拖拽分栏（[data-cc-split] / CC.split）：容器要有确定的高度 */
.cc-split { --split: 50%; display: flex; min-width: 0; min-height: 0; }
.cc-split > .cc-split-pane { min-width: 0; min-height: 0; overflow: auto; }
.cc-split > .cc-split-pane:first-child { flex: 0 1 var(--split); }
.cc-split > .cc-split-pane:last-child { flex: 1 1 0; }
.cc-split-handle {
  position: relative;
  z-index: 2;
  flex: 0 0 1px;
  background: var(--cc-border);
  cursor: col-resize;
  touch-action: none;
  outline: none;
  transition: background var(--cc-dur);
}
.cc-split-handle::before { content: ""; position: absolute; inset: 0 -5px; } /* 加宽热区 */
.cc-split-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 28px;
  border-radius: var(--cc-r-full);
  background: var(--cc-border-strong);
  transform: translate(-50%, -50%);
  transition: background var(--cc-dur), width var(--cc-dur), height var(--cc-dur);
}
.cc-split-handle:hover,
.cc-split-handle:focus-visible,
.cc-split.is-dragging > .cc-split-handle { background: var(--cc-text-3); }
.cc-split-handle:hover::after,
.cc-split-handle:focus-visible::after,
.cc-split.is-dragging > .cc-split-handle::after { height: 40px; background: var(--cc-accent); }
.cc-split.is-dragging { cursor: col-resize; user-select: none; }
.cc-split.is-dragging > .cc-split-pane { pointer-events: none; } /* 拖过 iframe 时不丢事件 */
.cc-split--vertical,
.cc-split.is-stacked { flex-direction: column; }
.cc-split--vertical > .cc-split-handle,
.cc-split.is-stacked > .cc-split-handle,
.cc-split--vertical.is-dragging,
.cc-split.is-stacked.is-dragging { cursor: row-resize; }
.cc-split--vertical > .cc-split-handle::before,
.cc-split.is-stacked > .cc-split-handle::before { inset: -5px 0; }
.cc-split--vertical > .cc-split-handle::after,
.cc-split.is-stacked > .cc-split-handle::after { width: 28px; height: 4px; }
.cc-split--vertical > .cc-split-handle:hover::after,
.cc-split.is-stacked > .cc-split-handle:hover::after,
.cc-split--vertical > .cc-split-handle:focus-visible::after,
.cc-split.is-stacked > .cc-split-handle:focus-visible::after,
.cc-split--vertical.is-dragging > .cc-split-handle::after,
.cc-split.is-stacked.is-dragging > .cc-split-handle::after { width: 40px; height: 4px; }

/* --------------------------------------------------------------------------
   5. Card · 卡片
   -------------------------------------------------------------------------- */
.cc-card {
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  min-width: 0;
  position: relative;
}
.cc-card--sunken { background: var(--cc-surface-2); }
.cc-card--pad { padding: 16px; }
.cc-card--interactive {
  cursor: pointer;
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur), transform var(--cc-dur);
}
.cc-card--interactive:hover { border-color: var(--cc-border-strong); box-shadow: var(--cc-shadow-md); }
.cc-card--dark {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: var(--cc-on-accent);
}
.cc-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 0;
  min-width: 0;
}
.cc-card-head--bordered { padding-bottom: 14px; border-bottom: 1px solid var(--cc-border); }
.cc-card-title { font-size: var(--cc-fs-base); font-weight: 600; white-space: nowrap; }
.cc-card-desc { font-size: var(--cc-fs-sm); color: var(--cc-text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-card-extra { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cc-card-body { padding: 16px; }
.cc-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--cc-border);
  font-size: var(--cc-fs-sm);
  color: var(--cc-text-3);
}
/* 危险区卡片（设置页底部的删除 / 转移等不可逆操作） */
.cc-card--danger { border-color: color-mix(in srgb, var(--cc-danger) 38%, var(--cc-border)); }


/* --------------------------------------------------------------------------
   6. Button · 按钮
   -------------------------------------------------------------------------- */
.cc-btn {
  --h: 32px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--h);
  padding: 0 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface);
  color: var(--cc-text);
  font-size: var(--cc-fs-md);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background var(--cc-dur), border-color var(--cc-dur), color var(--cc-dur),
    box-shadow var(--cc-dur), transform 0.08s;
}
.cc-btn:hover { background: var(--cc-surface-2); border-color: var(--cc-border-strong); }
.cc-btn:active { transform: translateY(0.5px); }
.cc-btn:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--cc-surface), 0 0 0 3px var(--cc-focus-ring); }
.cc-btn svg { width: 15px; height: 15px; }

.cc-btn--primary { background: var(--cc-accent); border-color: var(--cc-accent); color: var(--cc-on-accent); }
.cc-btn--primary:hover { background: var(--cc-accent-hover); border-color: var(--cc-accent-hover); }
.cc-btn--ghost { background: transparent; border-color: transparent; color: var(--cc-text-2); }
.cc-btn--ghost:hover { background: var(--cc-surface-3); border-color: transparent; color: var(--cc-text); }
.cc-btn--danger { color: var(--cc-danger); }
.cc-btn--danger:hover { background: var(--cc-danger-bg); border-color: transparent; }
.cc-btn--danger-solid { background: var(--cc-danger-solid); border-color: var(--cc-danger-solid); color: #fff; }
.cc-btn--danger-solid:hover { filter: brightness(0.94); background: var(--cc-danger-solid); border-color: var(--cc-danger-solid); }
.cc-btn--link {
  height: auto; padding: 0; border: 0; background: none; border-radius: 0;
  color: var(--cc-text); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--cc-border-strong);
}
.cc-btn--link:hover { background: none; text-decoration-color: currentColor; }

.cc-btn--xs { --h: 24px; padding: 0 8px; font-size: var(--cc-fs-sm); border-radius: var(--cc-r-sm); gap: 4px; }
.cc-btn--xs svg { width: 13px; height: 13px; }
.cc-btn--sm { --h: 28px; padding: 0 10px; font-size: var(--cc-fs-sm); border-radius: 7px; }
.cc-btn--sm svg { width: 14px; height: 14px; }
.cc-btn--lg { --h: 40px; padding: 0 16px; font-size: var(--cc-fs-base); border-radius: 10px; }
.cc-btn--lg svg { width: 16px; height: 16px; }
.cc-btn--icon { width: var(--h); padding: 0; }
.cc-btn--pill { border-radius: var(--cc-r-full); }
.cc-btn--block { width: 100%; }

.cc-btn:disabled,
.cc-btn.is-disabled { opacity: 0.45; pointer-events: none; }
.cc-btn.is-loading { color: transparent !important; pointer-events: none; }
.cc-btn.is-loading svg { visibility: hidden; }
.cc-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.75px solid var(--cc-border-strong);
  border-top-color: var(--cc-text);
  animation: cc-spin 0.7s linear infinite;
}
.cc-btn--primary.is-loading::after { border-color: rgba(127, 127, 127, 0.45); border-top-color: var(--cc-on-accent); }

.cc-btn-group { display: inline-flex; }
.cc-btn-group > .cc-btn { border-radius: 0; }
.cc-btn-group > .cc-btn + .cc-btn { margin-left: -1px; }
.cc-btn-group > .cc-btn:first-child { border-radius: var(--cc-r-md) 0 0 var(--cc-r-md); }
.cc-btn-group > .cc-btn:last-child { border-radius: 0 var(--cc-r-md) var(--cc-r-md) 0; }
.cc-btn-group > .cc-btn:hover { z-index: 1; }

/* --------------------------------------------------------------------------
   7. Form · 表单
   -------------------------------------------------------------------------- */
.cc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-label { font-size: var(--cc-fs-sm); font-weight: 500; color: var(--cc-text-2); }
.cc-label .cc-req { color: var(--cc-danger); margin-left: 2px; }
.cc-help { font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-field.is-error .cc-help { color: var(--cc-danger); }

.cc-input,
.cc-select,
.cc-textarea {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface);
  color: var(--cc-text);
  font-size: var(--cc-fs-md);
  outline: none;
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur), background var(--cc-dur);
}
.cc-textarea { height: auto; min-height: 84px; padding: 8px 10px; line-height: 1.6; resize: vertical; }
.cc-input::placeholder,
.cc-textarea::placeholder { color: var(--cc-text-4); }
.cc-input:hover,
.cc-select:hover,
.cc-textarea:hover { border-color: var(--cc-border-strong); }
.cc-input:focus,
.cc-select:focus,
.cc-textarea:focus { border-color: var(--cc-text-3); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-input.is-error,
.cc-field.is-error .cc-input,
.cc-field.is-error .cc-textarea,
.cc-field.is-error .cc-select { border-color: var(--cc-danger); }
.cc-field.is-error .cc-input:focus { box-shadow: 0 0 0 3px var(--cc-danger-bg); }
.cc-field.is-error .cc-textarea:focus,
.cc-field.is-error .cc-select:focus { box-shadow: 0 0 0 3px var(--cc-danger-bg); }
.cc-field.is-error .cc-input-wrap .cc-input,
.cc-field.is-error .cc-combo { border-color: var(--cc-danger); }
/* 表单校验 form[data-cc-validate] 写进 .cc-help 的错误提示，前面加一个小圆点 */
.cc-field.is-error .cc-help.is-msg { display: flex; align-items: center; gap: 6px; }
.cc-field.is-error .cc-help.is-msg::before { content: ""; width: 4px; height: 4px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
/* 字数统计 [data-cc-count]：和 .cc-help 同一行时靠右 */
.cc-field-foot { display: flex; align-items: flex-start; gap: 12px; }
.cc-field-foot > .cc-help { flex: 1; min-width: 0; }
.cc-charcount { margin-left: auto; flex-shrink: 0; color: var(--cc-text-3); font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); font-variant-numeric: tabular-nums; line-height: 18px; }
.cc-charcount.is-near { color: var(--cc-text-2); }
.cc-charcount.is-over { color: var(--cc-danger); }
/* 自适应高度 textarea[data-cc-autosize]：随内容长高，到 --max 后出滚动条 */
.cc-textarea[data-cc-autosize] { min-height: 0; max-height: var(--max, 240px); resize: none; overflow-y: auto; }
.cc-input:disabled,
.cc-select:disabled,
.cc-textarea:disabled { background: var(--cc-surface-2); color: var(--cc-text-3); cursor: not-allowed; }
.cc-input--sm { height: 28px; font-size: var(--cc-fs-sm); }
.cc-input--lg { height: 40px; font-size: var(--cc-fs-base); padding: 0 12px; }

.cc-select {
  appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
/* 原生 select 的下拉列表：支持 appearance: base-select 的浏览器（Chrome / Edge 135+）画成和 .cc-menu 一致的面板，
   其余浏览器保持系统下拉。多选 / size 列表框不受影响。 */
@supports (appearance: base-select) {
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role):not([multiple]):not([size]),
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role):not([multiple]):not([size])::picker(select) { appearance: base-select; }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role):not([multiple]):not([size]) { display: inline-flex; align-items: center; gap: 6px; }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role)::picker-icon { display: none; }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role)::picker(select) {
    margin: 4px 0;
    padding: 5px;
    position-try-order: normal; /* 默认向下展开，放不下才翻到上方 */
    min-width: max(anchor-size(self-inline), 120px);
    max-height: min(320px, 60vh);
    border: 1px solid var(--cc-border);
    border-radius: 12px;
    background: var(--cc-surface);
    color: var(--cc-text);
    box-shadow: var(--cc-shadow-lg), 0 0 0 0.5px color-mix(in srgb, var(--cc-text) 6%, transparent);
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s var(--cc-ease), transform 0.12s var(--cc-ease), overlay 0.12s allow-discrete, display 0.12s allow-discrete;
  }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role):open::picker(select) { opacity: 1; transform: none; }
  @starting-style { :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role):open::picker(select) { opacity: 0; transform: translateY(-4px); } }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role) option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 8px;
    border-radius: 7px;
    background: none;
    color: var(--cc-text);
    font-size: var(--cc-fs-md);
    cursor: pointer;
    outline: none;
  }
  :is(.cc-select--sm, .cc-msglist-role) option { min-height: 28px; padding: 4px 8px; font-size: var(--cc-fs-sm); }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role) option:hover,
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role) option:focus-visible { background: var(--cc-surface-3); }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role) option:checked { font-weight: 500; }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role) option::checkmark { order: 1; margin-left: auto; color: var(--cc-text-2); }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role) option:disabled { color: var(--cc-text-4); background: none; cursor: not-allowed; }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role) optgroup { display: block; padding: 0; }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role) optgroup legend { padding: 6px 8px 4px; font-family: var(--cc-font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--cc-text-3); }
  :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role) hr { height: 1px; margin: 4px 0; border: 0; background: var(--cc-border); }
  @media (prefers-reduced-motion: reduce) { :is(.cc-select, .cc-toolbar select, .cc-lang select, .cc-msglist-role)::picker(select) { transition: none; } }
}

/* 带图标 / 快捷键的输入框 */
.cc-input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.cc-input-wrap > svg {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--cc-text-3);
  pointer-events: none;
}
.cc-input-wrap > svg ~ .cc-input { padding-left: 32px; }
.cc-input-wrap > .cc-kbd { position: absolute; right: 8px; pointer-events: none; }
.cc-input-wrap > .cc-kbd ~ .cc-input,
.cc-input-wrap > .cc-input:has(~ .cc-kbd) { padding-right: 52px; }

.cc-input-group { display: flex; min-width: 0; }
.cc-input-group > * + * { margin-left: -1px; }
.cc-input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cc-input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cc-input-group > .cc-input:focus { position: relative; z-index: 1; }
.cc-input-addon {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface-2);
  color: var(--cc-text-3);
  font-size: var(--cc-fs-md);
  white-space: nowrap;
}

/* Checkbox / Radio / Switch */
.cc-check,
.cc-radio,
.cc-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cc-fs-md);
  cursor: pointer;
  user-select: none;
}
.cc-check input,
.cc-radio input {
  appearance: none;
  margin: 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  border: 1px solid var(--cc-border-strong);
  background: var(--cc-surface);
  cursor: pointer;
  transition: background var(--cc-dur), border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-check input { border-radius: var(--cc-r-xs); }
.cc-check input::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 1.75px solid var(--cc-on-accent);
  border-bottom: 1.75px solid var(--cc-on-accent);
  transform: translate(0.5px, -1px) rotate(-45deg) scale(0);
  transition: transform 0.12s var(--cc-ease);
}
.cc-check input:checked,
.cc-check input:indeterminate { background: var(--cc-accent); border-color: var(--cc-accent); }
.cc-check input:checked::after { transform: translate(0.5px, -1px) rotate(-45deg) scale(1); }
.cc-check input:indeterminate::after {
  width: 8px; height: 0; border-left: 0; transform: none;
}
.cc-radio input { border-radius: 50%; }
.cc-radio input::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-on-accent);
  transform: scale(0);
  transition: transform 0.12s var(--cc-ease);
}
.cc-radio input:checked { background: var(--cc-accent); border-color: var(--cc-accent); }
.cc-radio input:checked::after { transform: scale(1); }
.cc-check input:focus-visible,
.cc-radio input:focus-visible,
.cc-switch input:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--cc-surface), 0 0 0 3px var(--cc-focus-ring); }

.cc-switch input {
  appearance: none;
  position: relative;
  margin: 0;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  border-radius: var(--cc-r-full);
  background: var(--cc-viz-5);
  cursor: pointer;
  transition: background var(--cc-dur);
}
.cc-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform var(--cc-dur) var(--cc-ease), background var(--cc-dur);
}
.cc-switch input:checked { background: var(--cc-accent); }
.cc-switch input:checked::after { transform: translateX(14px); background: var(--cc-on-accent); }

.cc-check:has(input:disabled),
.cc-radio:has(input:disabled),
.cc-switch:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* Slider：JS 会同步 --val */
.cc-slider {
  --val: 50%;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.cc-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--cc-r-full);
  background: linear-gradient(to right, var(--cc-accent) var(--val), var(--cc-viz-5) var(--val));
}
.cc-slider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 20px;
  margin-top: -8px;
  border-radius: 4px;
  border: 2px solid var(--cc-surface);
  background: var(--cc-accent);
  box-shadow: var(--cc-shadow-sm);
}
.cc-slider::-moz-range-track { height: 4px; border-radius: var(--cc-r-full); background: var(--cc-viz-5); }
.cc-slider::-moz-range-progress { height: 4px; border-radius: var(--cc-r-full); background: var(--cc-accent); }
.cc-slider::-moz-range-thumb {
  width: 8px; height: 16px; border-radius: 4px;
  border: 2px solid var(--cc-surface); background: var(--cc-accent);
}
.cc-slider:focus-visible { outline: none; }
/* 刻度：在 .cc-slider 后面放 <div class="cc-slider-marks"><span style="--at:0%">0</span>…</div>，包在 .cc-slider-wrap 里；
   竖排：.cc-slider-wrap--vertical（高度由 --h 控制，默认 160px） */
.cc-slider-wrap { position: relative; padding-bottom: 18px; }
.cc-slider-wrap:not(:has(.cc-slider-marks)) { padding-bottom: 0; }
.cc-slider-marks { position: absolute; left: 6px; right: 6px; bottom: 0; height: 16px; pointer-events: none; }
.cc-slider-marks > span { position: absolute; left: var(--at); top: 0; transform: translateX(-50%); font-size: var(--cc-fs-xs); color: var(--cc-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-slider-marks > span::before { content: ""; position: absolute; left: 50%; top: -12px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: var(--cc-border-strong); }
.cc-slider-marks > span.is-on { color: var(--cc-text); }
.cc-slider-marks > span:first-child { transform: none; left: -6px; }
.cc-slider-marks > span:first-child::before { left: 6px; }
.cc-slider-marks > span:last-child:not(:first-child) { transform: none; left: auto; right: -6px; }
.cc-slider-marks > span:last-child:not(:first-child)::before { left: auto; right: 5px; }
.cc-slider-wrap--vertical { --h: 160px; display: inline-flex; width: 28px; height: var(--h); padding: 0; }
.cc-slider-wrap--vertical > .cc-slider { position: absolute; left: 50%; top: 50%; width: var(--h); transform: translate(-50%, -50%) rotate(-90deg); }
.cc-slider-wrap--vertical:has(.cc-slider-marks) { width: 64px; }
.cc-slider-wrap--vertical:has(.cc-slider-marks) > .cc-slider { left: 14px; }
.cc-slider-wrap--vertical .cc-slider-marks { left: 32px; right: auto; top: 6px; bottom: 6px; width: 32px; height: auto; }
.cc-slider-wrap--vertical .cc-slider-marks > span,
.cc-slider-wrap--vertical .cc-slider-marks > span:first-child,
.cc-slider-wrap--vertical .cc-slider-marks > span:last-child:not(:first-child) { left: 0; right: auto; top: auto; bottom: var(--at); transform: translateY(50%); }
.cc-slider-wrap--vertical .cc-slider-marks > span::before,
.cc-slider-wrap--vertical .cc-slider-marks > span:first-child::before,
.cc-slider-wrap--vertical .cc-slider-marks > span:last-child:not(:first-child)::before { left: -12px; right: auto; top: 50%; width: 6px; height: 2px; margin: -1px 0 0; }
.cc-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1.5px var(--cc-surface), 0 0 0 3px var(--cc-focus-ring); }
.cc-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1.5px var(--cc-surface), 0 0 0 3px var(--cc-focus-ring); }

/* --------------------------------------------------------------------------
   8. Navigation · 导航类
   -------------------------------------------------------------------------- */
/* Segmented 分段控件 */
.cc-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--cc-r-md);
  background: var(--cc-surface-3);
}
.cc-segmented > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--cc-r-sm);
  background: transparent;
  color: var(--cc-text-2);
  font-size: var(--cc-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--cc-dur), color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-segmented > *:hover { color: var(--cc-text); }
.cc-segmented > .is-active {
  background: var(--cc-surface);
  color: var(--cc-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--cc-border);
}
.cc-segmented--sm > * { height: 24px; padding: 0 9px; font-size: var(--cc-fs-xs); }

/* Tabs 标签页 */
.cc-tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--cc-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.cc-tabs::-webkit-scrollbar { display: none; }
.cc-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--cc-text-3);
  font-size: var(--cc-fs-md);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--cc-dur);
}
.cc-tab:hover { color: var(--cc-text-2); }
.cc-tab.is-active { color: var(--cc-text); }
.cc-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--cc-accent);
}
.cc-tab .cc-count { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-tabs--pill { gap: 2px; border-bottom: 0; }
.cc-tabs--pill .cc-tab { padding: 5px 10px; border-radius: var(--cc-r-sm); font-size: var(--cc-fs-sm); }
.cc-tabs--pill .cc-tab.is-active { background: var(--cc-surface-3); }
.cc-tabs--pill .cc-tab.is-active::after { display: none; }
/* 变体：--vertical 竖排（左侧指示条）/ --bottom 指示条在上（标签在内容下方）/ --line 不画底边线 / --card 卡片式 / --sm --lg 尺寸 */
.cc-tabs--vertical { flex-direction: column; gap: 2px; border-bottom: 0; border-left: 1px solid var(--cc-border); overflow: visible; }
.cc-tabs--vertical .cc-tab { justify-content: flex-start; padding: 7px 12px; }
.cc-tabs--vertical .cc-tab.is-active::after { left: -1px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
.cc-tabs--vertical.cc-tabs--pill { border-left: 0; }
.cc-tabs--vertical.cc-tabs--pill .cc-tab { padding: 7px 10px; }
.cc-tabs--bottom { border-bottom: 0; border-top: 1px solid var(--cc-border); }
.cc-tabs--bottom .cc-tab.is-active::after { bottom: auto; top: -1px; }
.cc-tabs--line { border-bottom-color: transparent; }
.cc-tabs--card { gap: 0; }
.cc-tabs--card .cc-tab { padding: 8px 14px; margin-bottom: -1px; border: 1px solid transparent; border-radius: var(--cc-r-md) var(--cc-r-md) 0 0; }
.cc-tabs--card .cc-tab.is-active { border-color: var(--cc-border); border-bottom-color: var(--cc-surface); background: var(--cc-surface); }
.cc-tabs--card .cc-tab.is-active::after { display: none; }
.cc-tabs--sm .cc-tab { padding-top: 7px; padding-bottom: 7px; font-size: var(--cc-fs-sm); }
.cc-tabs--lg .cc-tab { padding-top: 12px; padding-bottom: 12px; font-size: var(--cc-fs-lg); }
.cc-tab:disabled, .cc-tab.is-disabled { color: var(--cc-text-4); cursor: not-allowed; }
.cc-tabs-layout { display: flex; gap: 20px; align-items: flex-start; }
.cc-tabs-layout > .cc-tabs--vertical { flex-shrink: 0; min-width: 140px; }
.cc-tabs-layout > :not(.cc-tabs) { flex: 1; min-width: 0; }

/* Chip 筛选标签 */
.cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-full);
  background: var(--cc-surface);
  color: var(--cc-text-2);
  font-size: var(--cc-fs-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--cc-dur), border-color var(--cc-dur), color var(--cc-dur);
}
.cc-chip:hover { border-color: var(--cc-border-strong); color: var(--cc-text); }
.cc-chip.is-active { background: var(--cc-accent); border-color: var(--cc-accent); color: var(--cc-on-accent); }
.cc-chip svg { width: 13px; height: 13px; }
.cc-chip .cc-count { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); opacity: 0.6; }

/* Steps 步骤条（横向） */
.cc-steps { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.cc-step { flex: 1; display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cc-step:last-child { flex: none; }
.cc-step:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: 16px;
  height: 1px;
  margin-top: 11px;
  background: var(--cc-border-strong);
}
.cc-step.is-done:not(:last-child)::after { background: var(--cc-accent); }
.cc-step-dot {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--cc-border-strong);
  border-radius: 50%;
  background: var(--cc-surface);
  color: var(--cc-text-3);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
}
.cc-step-dot svg { width: 12px; height: 12px; }
.cc-step.is-done .cc-step-dot { background: var(--cc-accent); border-color: var(--cc-accent); color: var(--cc-on-accent); }
.cc-step.is-current .cc-step-dot { border-color: var(--cc-accent); color: var(--cc-text); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-step-title { font-size: var(--cc-fs-md); font-weight: 500; white-space: nowrap; line-height: 22px; }
.cc-step-desc { font-size: var(--cc-fs-sm); color: var(--cc-text-3); white-space: nowrap; }
.cc-step:not(.is-done):not(.is-current) .cc-step-title { color: var(--cc-text-3); }

/* 窄屏步骤条：只展开当前步骤的文字，避免撑出横向滚动 */
@media (max-width: 640px) {
  .cc-steps { gap: 6px; }
  .cc-step { gap: 8px; }
  .cc-step:not(.is-current) .cc-step-title,
  .cc-step-desc { display: none; }
  .cc-step:not(:last-child)::after { min-width: 10px; }
}

/* SOP 流程（顶部进度条式） */
.cc-sop { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.cc-sop-item { min-width: 0; }
.cc-sop-item::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: 12px;
  border-radius: 1px;
  background: var(--cc-viz-5);
}
.cc-sop-item.is-done::before { background: var(--cc-accent); }
.cc-sop-item.is-current::before { background: linear-gradient(to right, var(--cc-accent) 50%, var(--cc-viz-5) 50%); }
.cc-sop-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cc-sop-head svg { width: 14px; height: 14px; color: var(--cc-text-3); }
.cc-sop-item.is-done .cc-sop-head svg { color: var(--cc-text); }
.cc-sop-title { font-size: var(--cc-fs-md); font-weight: 500; }
.cc-sop-meta { font-size: var(--cc-fs-sm); color: var(--cc-text-3); }

/* Pagination 分页 */
.cc-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cc-pagination-item {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--cc-r-sm);
  background: none;
  color: var(--cc-text-2);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-sm);
  cursor: pointer;
}
.cc-pagination-item:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-pagination-item.is-active { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-pagination-item svg { width: 14px; height: 14px; }

/* Kbd 快捷键 */
.cc-kbd {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--cc-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--cc-surface-2);
  color: var(--cc-text-3);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  line-height: 1;
  white-space: nowrap;
}

/* Dropdown 下拉菜单 */
.cc-dropdown { position: relative; display: inline-block; }
.cc-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 188px;
  padding: 5px;
  border: 1px solid var(--cc-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cc-surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
          backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: var(--cc-shadow-lg), 0 0 0 0.5px color-mix(in srgb, var(--cc-text) 6%, transparent);
  display: none; /* 关闭时不占位，避免在表格等滚动容器里撑出滚动条 */
  transform-origin: top left;
}
.cc-dropdown.is-open > .cc-menu { display: block; animation: cc-menu-in 0.14s var(--cc-ease); }
@keyframes cc-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
.cc-menu--right { left: auto; right: 0; transform-origin: top right; }
.cc-menu--up { top: auto; bottom: calc(100% + 4px); transform-origin: bottom left; }
.cc-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--cc-text);
  font-size: var(--cc-fs-md);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cc-menu-item:hover { background: var(--cc-surface-3); }
.cc-menu-item svg { width: 15px; height: 15px; color: var(--cc-text-2); }
.cc-menu-item .cc-kbd { margin-left: auto; }
.cc-menu-item--danger,
.cc-menu-item--danger svg { color: var(--cc-danger); }
.cc-menu-sep { height: 1px; margin: 4px 0; background: var(--cc-border); }
.cc-menu-label { padding: 6px 8px 4px; font-family: var(--cc-font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-text-3); }
.cc-menu--wide { min-width: 288px; }
.cc-menu-item--rich { align-items: flex-start; padding: 8px; }
.cc-menu-item--rich > svg { margin-top: 2px; }
.cc-menu-item-main { flex: 1; min-width: 0; }
.cc-menu-item-title { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.cc-menu-item-desc { display: block; margin-top: 1px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); white-space: normal; }
.cc-menu-check { margin-left: auto; display: inline-flex; visibility: hidden; }
.cc-menu-item.is-selected .cc-menu-check { visibility: visible; }

/* Context menu 右键菜单（[data-cc-contextmenu]，复用 .cc-menu） */
.cc-menu.cc-contextmenu { position: fixed; top: 0; left: 0; z-index: 950; outline: none; }
.cc-menu.cc-contextmenu.is-open { display: block; animation: cc-menu-in 0.12s var(--cc-ease); }
.cc-menu-item:disabled,
.cc-menu-item.is-disabled { background: none; color: var(--cc-text-4); cursor: not-allowed; }
.cc-menu-item:disabled svg,
.cc-menu-item.is-disabled svg { color: var(--cc-text-4); }
.cc-menu-sub { position: relative; }
.cc-menu-arrow { margin-left: auto; color: var(--cc-text-3); }
.cc-menu-item svg.cc-menu-arrow { width: 14px; height: 14px; color: var(--cc-text-3); }
.cc-menu-sub > .cc-menu { top: -5px; left: calc(100% + 4px); }
.cc-menu-sub > .cc-menu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; } /* 鼠标移向子菜单时不断开 */
.cc-menu-sub:hover > .cc-menu,
.cc-menu-sub:focus-within > .cc-menu { display: block; animation: cc-menu-in 0.12s var(--cc-ease); }
.cc-menu-sub:hover > .cc-menu-item,
.cc-menu-sub:focus-within > .cc-menu-item { background: var(--cc-surface-3); }
.cc-contextmenu.is-flip .cc-menu-sub > .cc-menu { left: auto; right: calc(100% + 4px); }
.cc-contextmenu.is-flip .cc-menu-sub > .cc-menu::before { left: auto; right: -10px; }
.cc-contextmenu.is-narrow .cc-menu-sub > .cc-menu { top: calc(100% - 2px); left: 24px; right: auto; }
.cc-contextmenu.is-narrow .cc-menu-sub > .cc-menu::before { display: none; }
/* 菜单细节：毛玻璃底、勾选项、悬停图标、带头像的菜单头 */
.cc-menu-item:focus-visible { outline: none; background: var(--cc-surface-3); }
.cc-menu-item:hover svg { color: var(--cc-text); }
.cc-menu-item--danger:hover { background: var(--cc-danger-bg); }
.cc-menu-item--danger:hover svg { color: var(--cc-danger); }
.cc-menu-item[aria-disabled="true"], .cc-menu-item:disabled { opacity: 0.45; pointer-events: none; }
.cc-menu-item.is-checked::after {
  content: ""; width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; background: var(--cc-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cc-menu-head { display: flex; align-items: center; gap: 10px; margin: -1px -1px 4px; padding: 10px 10px 12px; border-bottom: 1px solid var(--cc-border); }
.cc-menu-head b { display: block; font-size: var(--cc-fs-md); font-weight: 600; }
.cc-menu-head small { display: block; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }

/* Prompt 复制块（把一段指令交给 Agent） */
.cc-prompt {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface-2);
  overflow: hidden;
  min-width: 0;
}
.cc-prompt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 12px;
  border-bottom: 1px solid var(--cc-border);
}
.cc-prompt-head .cc-btn { margin-left: auto; }
.cc-prompt-body {
  margin: 0;
  padding: 12px;
  max-height: 220px;
  overflow: auto;
  font-family: var(--cc-font-mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--cc-text-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.cc-prompt--inline { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; }
.cc-prompt--inline .cc-prompt-body {
  flex: 1; padding: 0; max-height: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Anchor 锚点目录：.cc-anchor > a[href="#id"]（二级加 .is-sub）；data-cc-scrollspy 随滚动高亮，CC.toc() 从标题生成 */
.cc-anchor { position: relative; display: flex; flex-direction: column; padding-left: 1px; font-size: var(--cc-fs-md); }
.cc-anchor::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--cc-border); }
.cc-anchor-title { margin: 0 0 8px 12px; }
.cc-anchor a {
  position: relative;
  display: block;
  padding: 4px 0 4px 12px;
  overflow: hidden;
  color: var(--cc-text-3);
  line-height: 1.5;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--cc-dur);
}
.cc-anchor a.is-sub { padding-left: 24px; font-size: var(--cc-fs-sm); }
.cc-anchor a:hover { color: var(--cc-text); }
.cc-anchor a.is-active { color: var(--cc-text); font-weight: 500; }
.cc-anchor a.is-active::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: -1px; width: 2px; border-radius: 2px; background: var(--cc-accent); }
.cc-anchor--sticky { position: sticky; top: var(--top, 24px); align-self: start; }

/* Back to top 回到顶部：<button class="cc-backtop" data-cc-backtop></button>，滚过一屏后出现 */
.cc-backtop {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 800;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--cc-border);
  border-radius: 50%;
  background: var(--cc-surface);
  color: var(--cc-text-2);
  box-shadow: var(--cc-shadow-md);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--cc-dur), transform var(--cc-dur) var(--cc-ease), color var(--cc-dur), border-color var(--cc-dur);
}
.cc-backtop.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.cc-backtop:hover { border-color: var(--cc-border-strong); color: var(--cc-text); }
.cc-backtop:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--cc-surface), 0 0 0 3px var(--cc-focus-ring), var(--cc-shadow-md); }
.cc-backtop--inline { position: absolute; }
body:has(.cc-tabbar--fixed) .cc-backtop { bottom: 88px; }

/* --------------------------------------------------------------------------
   9. Feedback · 反馈
   -------------------------------------------------------------------------- */
/* Badge 徽标 */
.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: 5px;
  background: var(--cc-surface-3);
  color: var(--cc-text-2);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.cc-badge svg { width: 12px; height: 12px; }
.cc-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--cc-border-strong); }
.cc-badge--solid { background: var(--cc-accent); color: var(--cc-on-accent); }
/* 状态色当文字时和正文色混一点：亮色下压暗、暗色下提亮，浅底上也能到 4.5:1 */
.cc-badge--success { background: var(--cc-success-bg); color: color-mix(in srgb, var(--cc-success) 78%, var(--cc-text)); }
.cc-badge--warning { background: var(--cc-warning-bg); color: color-mix(in srgb, var(--cc-warning) 70%, var(--cc-text)); }
.cc-badge--danger { background: var(--cc-danger-bg); color: var(--cc-danger); }
.cc-badge--info { background: var(--cc-info-bg); color: var(--cc-info); }
.cc-badge--pill { border-radius: var(--cc-r-full); }
.cc-badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cc-badge--num { min-width: 18px; height: 18px; padding: 0 5px; justify-content: center; border-radius: var(--cc-r-full); font-family: var(--cc-font-mono); font-size: 10.5px; }

/* Status 状态（点 + 文字，最常用于表格） */
.cc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--cc-fs-sm);
  color: var(--cc-text-2);
  white-space: nowrap;
}
.cc-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot, var(--cc-text-4));
}
.cc-status--success { --dot: var(--cc-success); }
.cc-status--warning { --dot: var(--cc-warning); }
.cc-status--danger { --dot: var(--cc-danger); }
.cc-status--info { --dot: var(--cc-info); }
.cc-status--active { --dot: var(--cc-text); }
.cc-status--live::before { animation: cc-pulse 1.6s ease-out infinite; }

.cc-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--cc-text-4)); flex-shrink: 0; }
.cc-dot--success { --dot: var(--cc-success); }
.cc-dot--warning { --dot: var(--cc-warning); }
.cc-dot--danger { --dot: var(--cc-danger); }
.cc-dot--info { --dot: var(--cc-info); }
.cc-dot--active { --dot: var(--cc-text); }
.cc-dot--live { animation: cc-pulse 1.6s ease-out infinite; }

/* Alert 提示条 */
.cc-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface-2);
  color: var(--cc-text);
  font-size: var(--cc-fs-md);
}
.cc-alert > svg { width: 16px; height: 16px; margin-top: 2px; color: var(--cc-text-2); }
.cc-alert-content { flex: 1; min-width: 0; }
.cc-alert-title { font-weight: 500; }
.cc-alert-desc { margin-top: 2px; font-size: 12.5px; color: var(--cc-text-2); }
.cc-alert > .cc-btn { margin-left: auto; flex-shrink: 0; }
.cc-alert--info { background: var(--cc-info-bg); border-color: transparent; }
.cc-alert--info > svg { color: var(--cc-info); }
.cc-alert--success { background: var(--cc-success-bg); border-color: transparent; }
.cc-alert--success > svg { color: var(--cc-success); }
.cc-alert--warning { background: var(--cc-warning-bg); border-color: transparent; }
.cc-alert--warning > svg { color: var(--cc-warning); }
.cc-alert--danger { background: var(--cc-danger-bg); border-color: transparent; }
.cc-alert--danger > svg { color: var(--cc-danger); }
.cc-alert--dark { background: var(--cc-accent); border-color: var(--cc-accent); color: var(--cc-on-accent); }
.cc-alert--dark > svg,
.cc-alert--dark .cc-alert-desc { color: var(--cc-on-accent); opacity: 0.75; }

/* Toast 轻提示（CC.toast 生成）：data-placement = top / top-left / top-right / bottom / bottom-left / bottom-right */
.cc-toast-stack {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}
.cc-toast-stack[data-placement^="top"] { top: 24px; bottom: auto; flex-direction: column-reverse; }
.cc-toast-stack[data-placement$="-left"] { left: 24px; right: auto; align-items: flex-start; transform: none; }
.cc-toast-stack[data-placement$="-right"] { left: auto; right: 24px; align-items: flex-end; transform: none; }
.cc-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  padding: 9px 14px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  font-size: var(--cc-fs-md);
  box-shadow: var(--cc-shadow-lg);
  pointer-events: auto;
  animation: cc-toast-in 0.22s var(--cc-ease);
}
.cc-toast > svg { width: 15px; height: 15px; flex-shrink: 0; }
.cc-toast--success > svg { color: var(--cc-success); }
.cc-toast--warning > svg { color: var(--cc-warning); }
.cc-toast--danger > svg { color: var(--cc-danger); }
.cc-toast > .cc-spinner { border-color: color-mix(in srgb, var(--cc-on-accent) 25%, transparent); border-top-color: var(--cc-on-accent); }
.cc-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-toast--desc { align-items: flex-start; padding: 11px 14px; }
.cc-toast--desc > svg, .cc-toast--desc > .cc-spinner { margin-top: 2px; }
.cc-toast--desc .cc-toast-title { font-weight: 600; }
.cc-toast-desc { font-size: var(--cc-fs-sm); opacity: 0.7; line-height: 1.45; }
.cc-toast-action {
  flex-shrink: 0;
  margin-left: 6px;
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cc-on-accent) 14%, transparent);
  color: inherit;
  font: inherit;
  font-size: var(--cc-fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.cc-toast-action:hover { background: color-mix(in srgb, var(--cc-on-accent) 22%, transparent); }
.cc-toast-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: -2px -6px -2px 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}
.cc-toast-close:hover { opacity: 1; background: color-mix(in srgb, var(--cc-on-accent) 14%, transparent); }
.cc-toast-action:focus-visible, .cc-toast-close:focus-visible { outline: 2px solid var(--cc-on-accent); outline-offset: 1px; }
.cc-toast-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: left;
  animation: cc-toast-bar linear forwards;
}
.cc-toast:hover .cc-toast-bar { animation-play-state: paused; }
@keyframes cc-toast-bar { to { transform: scaleX(0); } }
.cc-toast-stack[data-placement^="top"] .cc-toast { animation-name: cc-toast-in-top; }
@keyframes cc-toast-in-top { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.cc-toast.is-leaving { animation: cc-toast-out 0.18s forwards; }

/* Empty 空状态 */
.cc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 16px;
  text-align: center;
}
.cc-empty-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cc-border);
  border-radius: 50%;
  background: var(--cc-surface-2);
  color: var(--cc-text-3);
}
.cc-empty-icon svg { width: 18px; height: 18px; }
.cc-empty-title { font-size: var(--cc-fs-base); font-weight: 500; }
.cc-empty-desc { max-width: 300px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-empty .cc-btn { margin-top: 10px; }

/* Skeleton 骨架屏 */
.cc-skeleton {
  display: block;
  height: 12px;
  border-radius: var(--cc-r-xs);
  background: linear-gradient(90deg, var(--cc-surface-3) 25%, var(--cc-surface-2) 37%, var(--cc-surface-3) 63%);
  background-size: 400% 100%;
  animation: cc-shimmer 1.4s ease infinite;
}
.cc-skeleton--circle { border-radius: 50%; }
.cc-skeleton--block { height: 64px; border-radius: var(--cc-r-md); }

/* Spinner 加载 */
.cc-spinner {
  --s: 16px;
  display: inline-block;
  width: var(--s);
  height: var(--s);
  flex-shrink: 0;
  border: 1.75px solid var(--cc-viz-5);
  border-top-color: var(--cc-text);
  border-radius: 50%;
  animation: cc-spin 0.7s linear infinite;
}
.cc-spinner--sm { --s: 12px; border-width: 1.5px; }
.cc-spinner--lg { --s: 28px; border-width: 2.5px; }
.cc-loading { display: inline-flex; align-items: center; gap: 8px; font-size: var(--cc-fs-md); color: var(--cc-text-2); }
.cc-loading-dots { display: inline-flex; gap: 4px; }
.cc-loading-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--cc-text);
  animation: cc-blink 1.2s infinite both;
}
.cc-loading-dots i:nth-child(2) { animation-delay: 0.15s; }
.cc-loading-dots i:nth-child(3) { animation-delay: 0.3s; }
/* 加载动画变体：.cc-loading-dots--wave 跳动 / .cc-loading-bars 竖条 / .cc-loading-pulse 呼吸圆点 / .cc-loading-ring 渐变圆环 */
.cc-loading-dots--wave i { animation: cc-dot-wave 1s infinite ease-in-out both; }
@keyframes cc-dot-wave { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.cc-loading-bars { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.cc-loading-bars i { width: 3px; height: 100%; border-radius: 2px; background: var(--cc-text); animation: cc-bars 0.9s infinite ease-in-out both; }
.cc-loading-bars i:nth-child(2) { animation-delay: 0.1s; }
.cc-loading-bars i:nth-child(3) { animation-delay: 0.2s; }
.cc-loading-bars i:nth-child(4) { animation-delay: 0.3s; }
@keyframes cc-bars { 0%, 70%, 100% { transform: scaleY(0.35); opacity: 0.45; } 35% { transform: scaleY(1); opacity: 1; } }
.cc-loading-pulse { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cc-text); }
.cc-loading-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: cc-pulse-ring 1.2s infinite var(--cc-ease); }
@keyframes cc-pulse-ring { to { transform: scale(2.4); opacity: 0; } }
.cc-loading-ring {
  --s: 16px;
  display: inline-block;
  width: var(--s);
  height: var(--s);
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 10%, var(--cc-text));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: cc-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cc-loading-dots--wave i, .cc-loading-bars i, .cc-loading-pulse::after { animation: none; }
}

/* Progress 进度条 */
.cc-progress {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--cc-r-full);
  background: var(--cc-surface-3);
}
.cc-progress > span {
  display: block;
  height: 100%;
  width: var(--val, 0%);
  border-radius: inherit;
  background: var(--c, var(--cc-accent));
  transition: width 0.5s var(--cc-ease);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.cc-progress--thin { height: 4px; }
.cc-progress--bar { height: 8px; border-radius: 2px; }
.cc-progress--striped > span {
  background: repeating-linear-gradient(-45deg, var(--cc-accent) 0 4px, var(--cc-viz-2) 4px 8px);
}
.cc-progress-row { display: flex; align-items: center; gap: 10px; font-size: var(--cc-fs-sm); min-width: 0; }
.cc-progress-row > .cc-progress { flex: 1; }
.cc-progress-row > .cc-num { min-width: 36px; text-align: right; color: var(--cc-text-2); }

/* 进度条变体
   尺寸：--thin 4px · 默认 6px · --lg 10px · --label 20px（数值写在条里）
   状态：--success / --warning / --danger（只在需要提醒时用）
   动态：--active 进行中扫光 · --indeterminate 不确定进度 · <i style="--buf:70%"> 缓冲
   形态：--steps（style="--steps:10" 分段）· --stack（多段构成） */
.cc-progress > i { position: absolute; inset: 0 auto 0 0; width: var(--buf, 0%); border-radius: inherit; background: color-mix(in srgb, var(--c, var(--cc-accent)) 18%, transparent); transition: width 0.5s var(--cc-ease); }
.cc-progress--lg { height: 10px; }
.cc-progress--label { height: 20px; border-radius: 6px; }
.cc-progress--label > span {
  display: flex; align-items: center; justify-content: flex-end; min-width: 36px; padding-right: 7px;
  font-family: var(--cc-font-mono); font-size: 11px; font-weight: 500; color: var(--cc-on-accent); white-space: nowrap;
}
.cc-progress--success { --c: var(--cc-success); }
.cc-progress--warning { --c: var(--cc-warning); }
.cc-progress--danger { --c: var(--cc-danger); }
.cc-progress--active > span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--cc-on-accent) 38%, transparent) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: cc-progress-sheen 1.8s var(--cc-ease) infinite;
}
@keyframes cc-progress-sheen { 60%, 100% { transform: translateX(100%); } }
.cc-progress--indeterminate > span { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; animation: cc-progress-indet 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes cc-progress-indet { from { transform: translateX(-105%); } to { transform: translateX(270%); } }
.cc-progress--steps {
  --steps: 10;
  border-radius: 2px;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--steps) - 3px), transparent 0 calc(100% / var(--steps)));
          mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--steps) - 3px), transparent 0 calc(100% / var(--steps)));
}
.cc-progress--steps > span { border-radius: 0; }
.cc-progress--stack { display: flex; gap: 2px; background: var(--cc-surface-3); }
.cc-progress--stack > span { flex: none; border-radius: 0; }
.cc-progress--stack > span:first-child { border-radius: var(--cc-r-full) 0 0 var(--cc-r-full); }
.cc-progress--stack > span:nth-child(2) { --c: var(--cc-viz-3); }
.cc-progress--stack > span:nth-child(3) { --c: var(--cc-viz-4); }
/* 进度卡头部：标题 ……… 数值 */
.cc-progress-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; font-size: var(--cc-fs-sm); color: var(--cc-text-2); }
.cc-progress-head > b { margin-left: auto; font-size: var(--cc-fs-md); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cc-text); }
.cc-progress-head > b small { margin-left: 1px; font-size: 0.8em; font-weight: 500; color: var(--cc-text-3); }
.cc-progress-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: var(--cc-fs-xs); color: var(--cc-text-3); font-variant-numeric: tabular-nums; }

/* 顶部进度条：CC.progress.start() / .done() */
.cc-route-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; height: 2.5px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.cc-route-progress.is-active { opacity: 1; }
.cc-route-progress i { position: relative; display: block; height: 100%; border-radius: 0 2px 2px 0; background: var(--cc-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s var(--cc-ease); }
/* 拖尾光，更像在"跑" */
.cc-route-progress i::after { content: ""; position: absolute; right: 0; top: 0; width: 90px; height: 100%; box-shadow: 0 0 10px 1px var(--cc-accent), 0 0 4px var(--cc-accent); opacity: 0.7; }

/* Bullet 子弹图：实际 vs 目标 */
.cc-bullet { position: relative; height: 8px; border-radius: 2px; background: var(--cc-surface-3); }
.cc-bullet-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--val, 0%);
  border-radius: 2px;
  background: var(--c, var(--cc-accent));
}
.cc-bullet-target {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--target, 100%);
  width: 2px;
  border-radius: 1px;
  background: var(--cc-text);
  transform: translateX(-1px);
}

/* Ring 环形进度（纯 CSS）：style="--val:72" */
.cc-ring {
  --val: 0;
  --s: 64px;
  --t: 6px;
  position: relative;
  width: var(--s);
  height: var(--s);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--c, var(--cc-accent)) calc(var(--val) * 1%), var(--cc-surface-3) 0);
}
.cc-ring::before {
  content: "";
  position: absolute;
  inset: var(--t);
  border-radius: 50%;
  background: var(--ring-bg, var(--cc-surface));
}
.cc-ring > * {
  position: relative;
  font-size: calc(var(--s) * 0.24);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cc-ring small { font-size: 0.5em; font-weight: 500; color: var(--cc-text-3); margin-left: 1px; }
.cc-ring--sm { --s: 36px; --t: 4px; }
.cc-ring--sm > * { font-size: 10px; }
.cc-ring--lg { --s: 112px; --t: 9px; }
/* 环形进度：状态色 + 不确定旋转 */
.cc-ring--success { --c: var(--cc-success); }
.cc-ring--warning { --c: var(--cc-warning); }
.cc-ring--danger { --c: var(--cc-danger); }
.cc-ring--spin { --val: 28; animation: cc-spin 1s linear infinite; }
.cc-ring--spin > * { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cc-progress--active > span::after, .cc-progress--indeterminate > span, .cc-ring--spin { animation-duration: 3s; }
}

/* Modal 对话框 */
.cc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--cc-overlay);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, visibility 0.18s;
}
.cc-modal-backdrop.is-open { opacity: 1; visibility: visible; }
.cc-modal {
  width: min(480px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-xl);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.22s var(--cc-ease);
}
.cc-modal-backdrop.is-open .cc-modal { transform: none; }
/* 尺寸：--sm 360 / 默认 480 / --lg 720 / --xl 960 / --full 铺满（留 16px 边距）；
   滚动：默认整个对话框滚动；--scroll-body 头尾固定、只滚内容区；遮罩加 .cc-modal-backdrop--scroll 时对话框随页面滚动（超长表单） */
.cc-modal--sm { width: min(360px, 100%); }
.cc-modal--lg { width: min(720px, 100%); }
.cc-modal--xl { width: min(960px, 100%); }
.cc-modal--full { width: 100%; height: calc(100vh - 32px); height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.cc-modal--full .cc-modal-body { flex: 1; min-height: 0; overflow: auto; }
.cc-modal--scroll-body { display: flex; flex-direction: column; overflow: hidden; }
.cc-modal--scroll-body .cc-modal-body { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
.cc-modal--scroll-body .cc-modal-head { padding-bottom: 14px; border-bottom: 1px solid var(--cc-border); }
.cc-modal--scroll-body .cc-modal-foot { padding-top: 14px; border-top: 1px solid var(--cc-border); }
.cc-modal-backdrop--scroll { overflow-y: auto; place-items: start center; padding: 48px 16px; }
.cc-modal-backdrop--scroll .cc-modal { max-height: none; overflow: visible; }
@media (max-width: 600px) {
  .cc-modal--full { height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
  .cc-modal-backdrop:has(> .cc-modal--full) { padding: 0; }
}
.cc-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 0; }
.cc-modal-head > .cc-btn { margin-left: auto; margin-top: -4px; margin-right: -6px; }
.cc-modal-title { font-size: var(--cc-fs-lg); font-weight: 600; }
.cc-modal-desc { margin-top: 4px; font-size: var(--cc-fs-md); color: var(--cc-text-2); }
.cc-modal-body { padding: 16px 20px; }
.cc-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; }

/* Tooltip：data-tooltip="说明"
   这里是没有 cc.js 时的纯 CSS 兜底；引入 cc.js 后由 .cc-tooltip 浮层显示（见下方） */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 50;
  padding: 5px 8px;
  border-radius: var(--cc-r-sm);
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  font-size: var(--cc-fs-sm);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: cc-tooltip-in 0.12s var(--cc-ease);
}
@keyframes cc-tooltip-in { from { opacity: 0; transform: translate(-50%, 2px); } }

/* 气泡提示放右侧：data-tooltip-pos="right"（收起的侧栏常用） */
[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::after { bottom: auto; top: 50%; left: calc(100% + 8px); transform: translate(0, -50%); animation: none; }
[data-tooltip][data-tooltip-pos^="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos^="bottom"]:focus-visible::after { bottom: auto; top: calc(100% + 6px); }
[data-tooltip][data-tooltip-pos^="left"]:hover::after,
[data-tooltip][data-tooltip-pos^="left"]:focus-visible::after { bottom: auto; top: 50%; left: auto; right: calc(100% + 8px); transform: translate(0, -50%); animation: none; }
/* 有 cc.js 时气泡改画在最上层（.cc-tooltip），不再用伪元素：伪元素挂在元素上，放在可滚动的列表 / 表格里会撑出滚动条 */
.cc-js-tooltip [data-tooltip]:hover::after,
.cc-js-tooltip [data-tooltip]:focus-visible::after { content: none; display: none; }
.cc-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  max-width: min(360px, calc(100vw - 16px));
  padding: 5px 8px;
  border-radius: var(--cc-r-sm);
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  font-size: var(--cc-fs-sm);
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s var(--cc-ease);
}
.cc-tooltip.is-on { opacity: 1; }
/* 箭头：data-tooltip-arrow（JS 写入 data-side 和 --cc-arrow-x / --cc-arrow-y，箭头始终指向元素中心） */
.cc-tooltip.has-arrow::before,
.cc-popover--arrow::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: rotate(45deg);
}
.cc-tooltip.has-arrow[data-side="top"]::before { bottom: -4px; left: calc(var(--cc-arrow-x, 50%) - 4px); }
.cc-tooltip.has-arrow[data-side="bottom"]::before { top: -4px; left: calc(var(--cc-arrow-x, 50%) - 4px); }
.cc-tooltip.has-arrow[data-side="left"]::before { right: -4px; top: calc(var(--cc-arrow-y, 50%) - 4px); }
.cc-tooltip.has-arrow[data-side="right"]::before { left: -4px; top: calc(var(--cc-arrow-y, 50%) - 4px); }
@media (prefers-reduced-motion: reduce) { .cc-tooltip { transition: none; } }

/* 图表悬浮提示（cc.js 自动生成） */
.cc-tip {
  position: fixed;
  z-index: 1000;
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-md);
  font-size: var(--cc-fs-sm);
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}
.cc-tip.is-on { opacity: 1; }
.cc-tip-title { margin-bottom: 4px; font-weight: 600; }
.cc-tip-row { display: flex; align-items: center; gap: 8px; color: var(--cc-text-2); }
.cc-tip-row b { margin-left: auto; padding-left: 12px; font-weight: 600; color: var(--cc-text); font-variant-numeric: tabular-nums; }

/* Avatar 头像 */
.cc-avatar {
  --s: 28px;
  width: var(--s);
  height: var(--s);
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--cc-border);
  border-radius: 50%;
  background: var(--cc-surface-3);
  color: var(--cc-text-2);
  font-size: calc(var(--s) * 0.4);
  font-weight: 600;
  line-height: 1;
}
.cc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-avatar--dark { background: var(--cc-accent); border-color: var(--cc-accent); color: var(--cc-on-accent); }
.cc-avatar--sm { --s: 22px; }
.cc-avatar--lg { --s: 40px; }
.cc-avatar--xl { --s: 56px; }
.cc-avatar--square { border-radius: var(--cc-r-md); }
.cc-avatar-group { display: inline-flex; }
.cc-avatar-group > .cc-avatar { box-shadow: 0 0 0 2px var(--cc-surface); }
.cc-avatar-group > * + * { margin-left: -8px; }
.cc-avatar-more { background: var(--cc-surface-3); color: var(--cc-text-2); font-size: calc(var(--s, 28px) * 0.36); font-weight: 600; font-variant-numeric: tabular-nums; cursor: default; }
.cc-avatar-group > [hidden] + * { margin-left: -8px; }

/* GroupAvatar · 群头像（2–4 宫格） */
.cc-group-avatar { --s: 40px; width: var(--s); height: var(--s); flex-shrink: 0; display: inline-grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; overflow: hidden; padding: 1px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface-2); }
.cc-group-avatar > span { display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; border-radius: 3px; background: var(--cc-surface-3); color: var(--cc-text-2); font-size: calc(var(--s) * 0.26); font-weight: 600; line-height: 1; }
.cc-group-avatar > span:nth-child(4n+2) { background: color-mix(in srgb, var(--cc-text) 10%, var(--cc-surface-3)); }
.cc-group-avatar > span:nth-child(4n+3) { background: color-mix(in srgb, var(--cc-text) 6%, var(--cc-surface-2)); }
.cc-group-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-group-avatar--1 > span { grid-column: 1 / -1; grid-row: 1 / -1; font-size: calc(var(--s) * 0.4); }
.cc-group-avatar--2 > span { grid-row: 1 / -1; }
.cc-group-avatar--3 > span:first-child { grid-column: 1 / -1; }
.cc-group-avatar--round { border-radius: 50%; }

/* --------------------------------------------------------------------------
   10. Display · 展示
   -------------------------------------------------------------------------- */
/* Stat 指标 */
.cc-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cc-stat-label { display: flex; align-items: center; gap: 6px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-stat-label svg { width: 14px; height: 14px; }
.cc-stat-value {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cc-stat-value small { margin-left: 2px; font-size: var(--cc-fs-md); font-weight: 500; color: var(--cc-text-3); letter-spacing: 0; }
.cc-stat-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-stat--lg .cc-stat-value { font-size: 40px; }
.cc-stat--sm .cc-stat-value { font-size: 20px; }

/* Delta 涨跌 */
.cc-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--cc-fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cc-delta--up { color: var(--cc-success); }
.cc-delta--down { color: var(--cc-danger); }
.cc-delta--flat { color: var(--cc-text-3); }
.cc-delta--up::before { content: "▲"; font-size: 0.7em; }
.cc-delta--down::before { content: "▼"; font-size: 0.7em; }
.cc-delta--flat::before { content: "—"; font-size: 0.8em; }
.cc-delta--mono { color: var(--cc-text); }

/* Legend 图例 */
.cc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--cc-fs-sm); color: var(--cc-text-2); }
.cc-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cc-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--c, var(--cc-viz-1));
}
.cc-swatch--circle { border-radius: 50%; }
.cc-swatch--line { width: 14px; height: 2px; border-radius: 1px; }
.cc-swatch--dashed { width: 14px; height: 0; border-top: 2px dashed var(--c, var(--cc-viz-3)); background: none; border-radius: 0; }
.cc-swatch--hatch {
  background: repeating-linear-gradient(-45deg, var(--cc-viz-3) 0 1.2px, transparent 1.2px 3.5px);
  box-shadow: inset 0 0 0 1px var(--cc-viz-3);
}

/* Segbar 构成条 */
.cc-segbar { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: 2px; }
.cc-segbar > span { height: 100%; min-width: 2px; background: var(--c, var(--cc-viz-1)); }
.cc-segbar--lg { height: 20px; }

.cc-hatch { background: repeating-linear-gradient(-45deg, var(--cc-viz-4) 0 1px, transparent 1px 5px); }

/* Table 表格 */
.cc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  background: var(--cc-surface);
}
.cc-table { width: 100%; border-collapse: collapse; font-size: var(--cc-fs-md); }
.cc-table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--cc-border);
  background: var(--cc-surface-2);
  color: var(--cc-text-3);
  font-size: var(--cc-fs-sm);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.cc-table td { padding: 12px 14px; border-bottom: 1px solid var(--cc-border); vertical-align: middle; white-space: nowrap; }
.cc-table .is-wrap { white-space: normal; min-width: 200px; }
.cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-table tbody tr { transition: background var(--cc-dur); }
.cc-table tbody tr:hover td,
.cc-table tr.is-selected td { background: var(--cc-surface-2); }
.cc-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-table .cc-col-check { width: 40px; padding-right: 0; }
.cc-table .cc-col-check input { vertical-align: middle; }
.cc-table--compact td { padding: 8px 14px; }
.cc-table--compact th { padding: 8px 14px; }
.cc-cell-main { font-weight: 500; }
.cc-cell-sub { margin-top: 1px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-table-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--cc-border); }

/* Description list 描述列表 */
.cc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; font-size: var(--cc-fs-md); }
.cc-dl dt { color: var(--cc-text-3); }
.cc-dl dd { margin: 0; min-width: 0; }

/* List 列表 */
.cc-list { margin: 0; padding: 0; list-style: none; }
.cc-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--cc-border);
  font-size: var(--cc-fs-md);
}
.cc-list-item:last-child { border-bottom: 0; }
.cc-list-item > svg { width: 15px; height: 15px; color: var(--cc-text-3); }
.cc-list-main { flex: 1; min-width: 0; }
.cc-list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-list-meta { font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-list-item.is-done .cc-list-title { color: var(--cc-text-3); text-decoration: line-through; }
.cc-list--padded .cc-list-item { padding: 10px 16px; }
.cc-list--hover .cc-list-item { cursor: pointer; transition: background var(--cc-dur); }
.cc-list--hover .cc-list-item:hover,
.cc-list--hover .cc-list-item.is-active { background: var(--cc-surface-2); }
.cc-list--hover .cc-list-item:focus-visible { outline: none; background: var(--cc-surface-2); box-shadow: inset 2px 0 0 var(--cc-accent); }

/* Timeline 时间线（竖向） */
.cc-timeline { margin: 0; padding: 0; list-style: none; }
.cc-tl-item { position: relative; padding: 0 0 18px 26px; }
.cc-tl-item::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 2px;
  left: 7px;
  width: 1px;
  background: var(--cc-border-strong);
}
.cc-tl-item:last-child { padding-bottom: 0; }
.cc-tl-item:last-child::before { display: none; }
.cc-tl-item.is-done::before { background: var(--cc-accent); }
.cc-tl-dot {
  position: absolute;
  top: 3px;
  left: 0;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--cc-border-strong);
  border-radius: 50%;
  background: var(--cc-surface);
  color: var(--cc-on-accent);
}
.cc-tl-dot svg { width: 9px; height: 9px; stroke-width: 3; }
.cc-tl-item.is-done .cc-tl-dot { background: var(--cc-accent); border-color: var(--cc-accent); }
.cc-tl-item.is-current .cc-tl-dot { border-color: var(--cc-accent); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-tl-item.is-current .cc-tl-dot::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cc-accent); }
.cc-tl-time { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-tl-title { font-size: var(--cc-fs-md); font-weight: 500; }
.cc-tl-desc { margin-top: 2px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-tl-body { margin-top: 8px; }
.cc-tl-item:not(.is-done):not(.is-current) .cc-tl-title { color: var(--cc-text-2); }

/* Agenda 日程 */
.cc-agenda-day { padding: 10px 0 4px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-agenda-day:first-child { padding-top: 0; }
.cc-agenda-item { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 6px 0; }
.cc-agenda-time { font-family: var(--cc-font-mono); font-size: var(--cc-fs-sm); color: var(--cc-text-2); text-align: right; line-height: 1.5; }
.cc-agenda-time small { display: block; font-size: var(--cc-fs-xs); color: var(--cc-text-4); }
.cc-agenda-body { min-width: 0; padding-left: 10px; border-left: 2px solid var(--cc-viz-5); }
.cc-agenda-item.is-now .cc-agenda-body { border-left-color: var(--cc-accent); }
.cc-agenda-title { font-size: var(--cc-fs-md); font-weight: 500; }
.cc-agenda-meta { font-size: var(--cc-fs-sm); color: var(--cc-text-3); }

/* Feed 动态 */
.cc-feed-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--cc-border); font-size: var(--cc-fs-md); }
.cc-feed-item:last-child { border-bottom: 0; }
.cc-feed-item .cc-avatar { --s: 24px; }
.cc-feed-text { flex: 1; min-width: 0; color: var(--cc-text-2); line-height: 1.5; }
.cc-feed-text b { font-weight: 500; color: var(--cc-text); }
.cc-feed-time { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); white-space: nowrap; line-height: 1.9; }

/* Countdown 倒计时 / 里程碑 */
.cc-countdown { display: flex; flex-direction: column; }
.cc-cd-item { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cc-border); }
.cc-cd-item:last-child { border-bottom: 0; }
.cc-cd-num { font-size: 22px; font-weight: 650; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cc-cd-num small { display: block; margin-top: 4px; font-size: 10px; font-weight: 500; color: var(--cc-text-3); letter-spacing: 0; }
.cc-cd-item.is-urgent .cc-cd-num { color: var(--cc-danger); }
.cc-cd-title { font-size: var(--cc-fs-md); font-weight: 500; }
.cc-cd-meta { font-size: var(--cc-fs-sm); color: var(--cc-text-3); }

/* Tree 树（OKR / 组织 / 目录） */
.cc-tree,
.cc-tree ul { margin: 0; padding: 0; list-style: none; }
.cc-tree { font-size: var(--cc-fs-md); }
.cc-tree ul { margin-left: 7px; padding-left: 16px; border-left: 1px solid var(--cc-border-strong); }
.cc-tree li { position: relative; }
.cc-tree ul > li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: -16px;
  width: 10px;
  border-top: 1px solid var(--cc-border-strong);
}
.cc-tree-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 0; }
.cc-tree-row > svg { width: 15px; height: 15px; color: var(--cc-text-3); }
.cc-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tree-row .cc-progress { width: 72px; flex: none; }
.cc-tree-val { min-width: 36px; font-size: var(--cc-fs-sm); color: var(--cc-text-2); text-align: right; font-variant-numeric: tabular-nums; }

/* App tile 应用入口 */
.cc-app {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  background: var(--cc-surface);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-app:hover { border-color: var(--cc-border-strong); box-shadow: var(--cc-shadow-md); }
.cc-app-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--cc-surface-3);
  color: var(--cc-text);
}
.cc-app-icon svg { width: 18px; height: 18px; }
.cc-app-icon--dark { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-app-icon--outline { background: var(--cc-surface); box-shadow: inset 0 0 0 1px var(--cc-border); }
.cc-app-text { min-width: 0; }
.cc-app-name { font-size: var(--cc-fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-app-desc { font-size: var(--cc-fs-sm); color: var(--cc-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-app--vertical { flex-direction: column; align-items: flex-start; gap: 14px; }

/* --------------------------------------------------------------------------
   11. Shell · 应用外框（侧边栏 + 顶栏）
   -------------------------------------------------------------------------- */
.cc-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.cc-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  overflow-y: auto;
  border-right: 1px solid var(--cc-border);
  background: var(--cc-surface);
  --cc-nav-inset: 10px;
}
.cc-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; padding: 4px 8px 10px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; color: inherit; }
.cc-nav { display: flex; flex-direction: column; gap: 1px; }
.cc-nav-label { display: flex; align-items: center; gap: 6px; padding: 16px 10px 6px; font-family: var(--cc-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-text-3); }
.cc-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--cc-r-md);
  background: none;
  color: var(--cc-text-2);
  font-size: var(--cc-fs-md);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--cc-dur), color var(--cc-dur), transform 0.12s var(--cc-ease);
}
.cc-nav-item svg { width: 16px; height: 16px; }
.cc-nav-item:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-nav-item.is-active { background: var(--cc-surface-3); color: var(--cc-text); font-weight: 500; }
.cc-nav-item .cc-badge,
.cc-nav-item .cc-kbd { margin-left: auto; }
.cc-sidebar-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cc-border); }
/* 侧栏底部的用户信息 */
.cc-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 4px 0; }
.cc-sidebar-user .cc-grow > :first-child { font-size: 13px; font-weight: 500; }

/* 侧栏导航细节
   选中项左侧有指示条，图标默认浅灰、悬停 / 选中变黑；支持计数、折叠分组、二级菜单、收起成图标栏 */
.cc-nav-item > svg { flex-shrink: 0; color: var(--cc-text-3); transition: color var(--cc-dur); }
.cc-nav-item:hover > svg, .cc-nav-item.is-active > svg { color: var(--cc-text); }
.cc-nav-item:active { transform: scale(0.985); }
.cc-nav-item:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--cc-text); }
.cc-nav-item.is-active::before {
  content: ""; position: absolute; left: calc(var(--cc-nav-inset, 10px) * -1); top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--cc-text);
  animation: cc-nav-in 0.2s var(--cc-ease);
}
@keyframes cc-nav-in { from { transform: scaleY(0.2); opacity: 0; } }
.cc-nav-count { margin-left: auto; padding: 0 6px; border-radius: var(--cc-r-full); font-family: var(--cc-font-mono); font-size: 11px; line-height: 18px; color: var(--cc-text-3); }
.cc-nav-item.is-active .cc-nav-count { background: var(--cc-surface); color: var(--cc-text-2); }
.cc-nav-label:first-child { padding-top: 6px; }
/* 折叠分组：<details class="cc-nav-group" open><summary class="cc-nav-item">…</summary><div class="cc-nav-sub">…</div></details> */
.cc-nav-group > summary { list-style: none; }
.cc-nav-group > summary::-webkit-details-marker { display: none; }
.cc-nav-group > summary::after {
  content: ""; width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; background: var(--cc-text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-90deg); transition: transform var(--cc-dur) var(--cc-ease);
}
.cc-nav-group[open] > summary::after { transform: none; }
.cc-nav-group > summary:has(.cc-nav-count, .cc-badge)::after { margin-left: 6px; }
.cc-nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 18px; padding-left: 10px; border-left: 1px solid var(--cc-border); }
.cc-nav-sub .cc-nav-item { height: 30px; font-size: var(--cc-fs-md); }
.cc-nav-sub .cc-nav-item.is-active::before { left: -11px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; }
@media (min-width: 901px) {
/* 收起成图标栏：.cc-shell.is-collapsed（或单独给 .cc-sidebar 加 .is-collapsed） */
.cc-shell { transition: grid-template-columns 0.25s var(--cc-ease); }
.cc-shell.is-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
.cc-shell.is-collapsed .cc-sidebar, .cc-sidebar.is-collapsed { align-items: center; padding-left: 8px; padding-right: 8px; }
.cc-shell.is-collapsed .cc-nav-item, .cc-sidebar.is-collapsed .cc-nav-item { justify-content: center; width: 40px; padding: 0; gap: 0; font-size: 0; }
.cc-shell.is-collapsed .cc-nav-item > :not(svg), .cc-sidebar.is-collapsed .cc-nav-item > :not(svg),
.cc-shell.is-collapsed .cc-nav-label, .cc-sidebar.is-collapsed .cc-nav-label,
.cc-shell.is-collapsed .cc-hide-collapsed, .cc-sidebar.is-collapsed .cc-hide-collapsed,
.cc-shell.is-collapsed .cc-nav-group > summary::after, .cc-sidebar.is-collapsed .cc-nav-group > summary::after { display: none; }
.cc-shell.is-collapsed .cc-nav-sub, .cc-sidebar.is-collapsed .cc-nav-sub { display: none; }
.cc-shell.is-collapsed .cc-nav-item.is-active::before, .cc-sidebar.is-collapsed .cc-nav-item.is-active::before { left: -8px; }
.cc-shell.is-collapsed .cc-brand, .cc-sidebar.is-collapsed .cc-brand { padding: 4px 0 10px; font-size: 0; gap: 0; }
}
/* 侧栏展开时导航项不显示气泡（收起成图标栏才需要） */
.cc-shell:not(.is-collapsed) .cc-sidebar:not(.is-collapsed) .cc-nav-item[data-tooltip]::after { display: none; }
.cc-main { min-width: 0; }
.cc-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid var(--cc-border);
  background: color-mix(in srgb, var(--cc-bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}
.cc-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--cc-fs-md); color: var(--cc-text-3); min-width: 0; }
.cc-breadcrumb svg { width: 14px; height: 14px; }
.cc-breadcrumb > :last-child { color: var(--cc-text); font-weight: 500; }
.cc-breadcrumb a { color: inherit; text-decoration: none; }
.cc-breadcrumb a:hover { color: var(--cc-text); }
.cc-breadcrumb-ellipsis { padding: 0 4px; border: 0; border-radius: var(--cc-r-sm); background: none; color: inherit; font: inherit; letter-spacing: 1px; cursor: pointer; }
.cc-breadcrumb-ellipsis:hover, .cc-breadcrumb-more.is-open .cc-breadcrumb-ellipsis { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-breadcrumb-more .cc-menu { min-width: 160px; font-weight: 400; }

/* 窄屏（≤ 900px）：侧栏变成左侧抽屉，顶栏左边自动出现菜单按钮（cc.js 注入 .cc-topbar-menu）；嵌在页面里的演示外框加 .cc-shell--inline 不变抽屉 */
.cc-topbar-menu { display: none; }
@media (max-width: 900px) {
  .cc-shell:not(.cc-shell--inline) { display: block; }
  .cc-shell:not(.cc-shell--inline) > .cc-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; width: min(300px, 84vw); height: auto;
    padding-top: max(14px, env(safe-area-inset-top), calc(var(--cc-safe-top, 0px) + 6px));
    padding-bottom: max(14px, env(safe-area-inset-bottom), var(--cc-safe-bottom, 0px));
    box-shadow: none; transform: translateX(-102%); transition: transform 0.28s var(--cc-ease), box-shadow 0.28s;
  }
  .cc-shell.is-nav-open:not(.cc-shell--inline) > .cc-sidebar { transform: none; box-shadow: var(--cc-shadow-lg); }
  .cc-shell:not(.cc-shell--inline)::after { content: ""; position: fixed; inset: 0; z-index: 79; background: var(--cc-overlay); opacity: 0; pointer-events: none; transition: opacity 0.28s; }
  .cc-shell.is-nav-open:not(.cc-shell--inline)::after { opacity: 1; pointer-events: auto; }
  .cc-topbar-menu { display: inline-grid; margin-left: -6px; }
  .cc-topbar { gap: 8px; height: auto; min-height: 52px; padding: 0 12px; padding-top: max(0px, env(safe-area-inset-top), var(--cc-safe-top, 0px)); }
  .cc-topbar .cc-breadcrumb > :not(:last-child) { display: none; }
  .cc-container { padding: 16px; }
}


/* --------------------------------------------------------------------------
   12. Brand graphics · 品牌辅助图形
   -------------------------------------------------------------------------- */
/* 第三方品牌图标（cc-brands.js）：<i data-brand="google"></i> 默认彩色，加 data-mono 变单色 */
.cc-brand-icon { flex-shrink: 0; vertical-align: -0.2em; }
/* 彩色品牌图标的明暗适配（配合 cc.js 的 brandAdapt）：
   --cc-brand-knock（定义在 1. Tokens）是"压在跟随文字色底块上的白色细节"，暗色下底块变白，它就变黑；
   data-brand-dark 是品牌色里有大块近黑色的图标，暗色下加一圈细光边，不糊进背景 */
:root[data-theme="dark"] .cc-brand-icon[data-brand-dark] { filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.5)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-brand-icon[data-brand-dark] { filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.5)); }
}
/* 品牌色太深（如 PayPal、DeepL、Azure 的深蓝）：暗色主题下换成同色相的提亮色，亮色主题保持原色；单色模式不处理 */
:root[data-theme="dark"] .cc-brand-icon:not(.is-mono) .ccb-df,
:root[data-theme="dark"] .cc-brand-icon.ccb-df:not(.is-mono) { fill: var(--df); }
:root[data-theme="dark"] .cc-brand-icon:not(.is-mono) .ccb-ds { stroke: var(--ds); }
:root[data-theme="dark"] .cc-brand-icon:not(.is-mono) .ccb-dc { stop-color: var(--dc); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-brand-icon:not(.is-mono) .ccb-df,
  :root:not([data-theme="light"]) .cc-brand-icon.ccb-df:not(.is-mono) { fill: var(--df); }
  :root:not([data-theme="light"]) .cc-brand-icon:not(.is-mono) .ccb-ds { stroke: var(--ds); }
  :root:not([data-theme="light"]) .cc-brand-icon:not(.is-mono) .ccb-dc { stop-color: var(--dc); }
}
.cc-app-icon .cc-brand-icon { width: 20px; height: 20px; }
.cc-app-icon--brand { background: var(--cc-surface); box-shadow: inset 0 0 0 1px var(--cc-border); }

.cc-texture {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--cc-text-3);
}
.cc-texture > canvas,
.cc-texture > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-logo { display: block; }

/* --------------------------------------------------------------------------
   13. Charts · 图表（CC.chart.* 生成的结构）
   -------------------------------------------------------------------------- */
.cc-chart { position: relative; width: 100%; min-width: 0; }
.cc-chart svg { display: block; overflow: visible; }
.cc-chart-empty { display: grid; place-items: center; color: var(--cc-text-3); font-size: var(--cc-fs-sm); border: 1px dashed var(--cc-border); border-radius: var(--cc-r-md); }
.cc-chart text { font-family: var(--cc-font); font-size: 11px; fill: var(--cc-text-3); font-variant-numeric: tabular-nums; }
.cc-chart .cc-axis { stroke: var(--cc-border-strong); stroke-width: 1; }
.cc-chart .cc-grid-line { stroke: var(--cc-border); stroke-width: 1; stroke-dasharray: 2 3; }
.cc-chart .cc-hit { fill: var(--cc-text); fill-opacity: 0; }
.cc-chart .cc-hit:hover { fill-opacity: 0.035; }
.cc-chart .cc-val { fill: var(--cc-text); font-weight: 600; }
.cc-chart .cc-legend { margin-bottom: 10px; }
.cc-chart [data-tip] { transition: opacity var(--cc-dur); }

.cc-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cc-donut-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 8px; font-size: var(--cc-fs-sm); }
.cc-donut-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; align-items: center; gap: 8px; }
.cc-donut-row span:nth-child(2) { color: var(--cc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-donut-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-donut-row em { font-style: normal; color: var(--cc-text-3); font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); text-align: right; }

.cc-rank { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; }
.cc-rank-row { display: grid; grid-template-columns: 18px minmax(56px, 112px) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cc-rank-idx { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-rank-row.is-top .cc-rank-idx { color: var(--cc-text); font-weight: 600; }
.cc-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cc-text-2); }
.cc-rank-track { height: 6px; overflow: hidden; border-radius: 1px; background: var(--cc-surface-3); }
.cc-rank-fill { height: 100%; background: var(--cc-viz-3); border-radius: 1px; }
.cc-rank-row.is-top .cc-rank-fill { background: var(--cc-viz-1); }
.cc-rank-val { min-width: 48px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

.cc-funnel { display: flex; flex-direction: column; gap: 4px; }
.cc-funnel-row { display: grid; grid-template-columns: minmax(36px, max-content) minmax(0, 1fr) minmax(52px, max-content); align-items: center; gap: 10px; font-size: var(--cc-fs-sm); }
.cc-funnel-name { color: var(--cc-text-2); white-space: nowrap; }
.cc-funnel-track { display: flex; justify-content: center; }
.cc-funnel-bar { display: block; height: 30px; border-radius: 3px; transition: width 0.5s var(--cc-ease); }
.cc-funnel-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-family: var(--cc-font-mono); font-size: 10px; color: var(--cc-text-3); font-variant-numeric: tabular-nums; }
.cc-funnel-meta b { font-family: var(--cc-font); font-size: var(--cc-fs-sm); font-weight: 600; color: var(--cc-text); }

.cc-waffle { display: grid; grid-template-columns: repeat(var(--cols, 10), 1fr); gap: 3px; width: 100%; max-width: var(--w, 200px); }
.cc-waffle > i { aspect-ratio: 1; border-radius: 2px; background: var(--c, var(--cc-viz-6)); }

.cc-heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 8px; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-heat-legend i { width: 10px; height: 10px; border-radius: 2px; }
.cc-heat-legend span { margin: 0 4px; }

.cc-gantt-scroll { overflow-x: auto; }
.cc-gantt { display: grid; grid-template-columns: var(--label-w, 140px) minmax(420px, 1fr); font-size: var(--cc-fs-sm); }
.cc-gantt-corner,
.cc-gantt-scale { height: 30px; border-bottom: 1px solid var(--cc-border); }
.cc-gantt-right { position: relative; overflow-x: clip; }
.cc-gantt-tick { position: absolute; top: 8px; padding-left: 4px; font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); white-space: nowrap; }
.cc-gantt-vline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--cc-border); }
.cc-gantt-label,
.cc-gantt-track { height: 44px; border-bottom: 1px solid var(--cc-border); }
.cc-gantt-label { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-right: 12px; }
.cc-gantt-label b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; }
.cc-gantt-label span { font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-gantt-track { position: relative; }
.cc-gantt-bar {
  position: absolute;
  top: 50%;
  height: 10px;
  border-radius: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(-45deg, var(--cc-viz-4) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 0 1px var(--cc-viz-4);
}
.cc-gantt-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 2px; background: var(--cc-accent); }
.cc-gantt-pct { position: absolute; top: 50%; padding-left: 6px; transform: translateY(-50%); font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); white-space: nowrap; }
.cc-gantt-today { position: absolute; top: 0; bottom: 0; z-index: 2; width: 0; border-left: 1px dashed var(--cc-text); pointer-events: none; }
.cc-gantt-today span {
  position: absolute;
  top: 6px;
  left: 0;
  padding: 1px 5px;
  border-radius: var(--cc-r-xs);
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  font-family: var(--cc-font-mono);
  font-size: 10px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.cc-cal { font-size: var(--cc-fs-sm); }
.cc-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); }
.cc-cal-wd { padding: 6px 8px; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); background: var(--cc-surface-2); color: var(--cc-text-3); font-size: var(--cc-fs-xs); }
.cc-cal-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 84px; padding: 6px; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
.cc-cal-cell.is-out { background: var(--cc-surface-2); }
.cc-cal-cell.is-out .cc-cal-day { color: var(--cc-text-4); }
.cc-cal-cell.is-weekend:not(.is-out) .cc-cal-day { color: var(--cc-text-3); }
.cc-cal-day { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-2); }
.cc-cal-cell.is-today .cc-cal-day { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-cal-ev { padding: 2px 5px; border-radius: var(--cc-r-xs); background: var(--cc-surface-3); color: var(--cc-text-2); font-size: var(--cc-fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-cal-ev.is-strong { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-cal-more { padding-left: 5px; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
/* 雷达图 / 仪表盘（CC.chart.radar / CC.chart.gauge） */
.cc-radar-grid { fill: none; stroke: var(--cc-border); }
.cc-radar-axis { stroke: var(--cc-border); }
.cc-gauge-value { font-size: 30px; font-weight: 650; fill: var(--cc-text); letter-spacing: -0.03em; }
@media (max-width: 640px) {
  .cc-cal-cell { min-height: 54px; padding: 4px; }
  .cc-cal-ev { font-size: 10px; padding: 1px 3px; }
}

/* --------------------------------------------------------------------------
   14. Motion · 动效
   -------------------------------------------------------------------------- */
@keyframes cc-spin { to { transform: rotate(360deg); } }
@keyframes cc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes cc-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot, currentColor) 55%, transparent); }
  100% { box-shadow: 0 0 0 6px transparent; }
}
@keyframes cc-blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
@keyframes cc-toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes cc-toast-out { to { opacity: 0; transform: translateY(4px); } }
@keyframes cc-fade-up { from { opacity: 0; transform: translateY(6px); } }
.cc-fade-up { animation: cc-fade-up 0.4s var(--cc-ease) both; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   15. Data table · 排序 / 筛选 / 分页（CC.table 或 table[data-cc-table]）
   ========================================================================== */
.cc-datatable { overflow: hidden; }
.cc-table-scroll { overflow-x: auto; }
.cc-th-inner { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.cc-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -3px -6px;
  padding: 3px 6px;
  border: 0;
  border-radius: var(--cc-r-xs);
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--cc-dur), color var(--cc-dur);
}
.cc-th-sort:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-sort-icon { width: 10px; height: 14px; flex-shrink: 0; }
.cc-sort-icon path { stroke: var(--cc-text-4); transition: stroke var(--cc-dur); }
th[aria-sort="ascending"],
th[aria-sort="descending"] { color: var(--cc-text); }
th[aria-sort="ascending"] .cc-sort-icon .up,
th[aria-sort="descending"] .cc-sort-icon .down { stroke: var(--cc-text); }
.cc-th-filter {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--cc-r-xs);
  background: none;
  color: var(--cc-text-4);
  cursor: pointer;
  transition: background var(--cc-dur), color var(--cc-dur);
}
.cc-th-filter svg { width: 12px; height: 12px; }
.cc-th-filter:hover { background: var(--cc-surface-3); color: var(--cc-text-2); }
.cc-th-filter.is-active { color: var(--cc-text); }
.cc-th-filter.is-active::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cc-text);
}
.cc-filter-panel { width: 220px; padding: 0; }
.cc-filter-search { padding: 8px 8px 2px; }
.cc-filter-options { max-height: 224px; overflow-y: auto; padding: 4px; }
.cc-filter-option { display: flex; width: 100%; padding: 6px 8px; border-radius: var(--cc-r-sm); }
.cc-filter-option:hover { background: var(--cc-surface-3); }
.cc-filter-option .cc-count { margin-left: auto; padding-left: 8px; font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-filter-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px; border-top: 1px solid var(--cc-border); }
.cc-table tr.cc-table-empty td { padding: 0; white-space: normal; }
.cc-table tbody tr.cc-table-empty:hover td { background: transparent; }
.cc-table-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--cc-border);
}
.cc-table-foot > .cc-pager { flex: 1; }
.cc-table-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  font-size: var(--cc-fs-md);
}
.cc-table-bulk .cc-btn {
  border-color: color-mix(in srgb, var(--cc-on-accent) 25%, transparent);
  background: transparent;
  color: var(--cc-on-accent);
}
.cc-table-bulk .cc-btn:hover { background: color-mix(in srgb, var(--cc-on-accent) 12%, transparent); }

/* Pager 分页器（CC.pagination） */
.cc-pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-pager-total { margin-right: auto; white-space: nowrap; }
.cc-pager .cc-pagination { flex-wrap: wrap; }
.cc-pagination-item:disabled { opacity: 0.35; pointer-events: none; }
.cc-pagination-item.is-ellipsis { color: var(--cc-text-3); letter-spacing: 1px; }
.cc-pager-jump { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cc-pager-jump .cc-input,
.cc-pager--simple .cc-input { width: 46px; padding: 0 4px; text-align: center; font-variant-numeric: tabular-nums; }
.cc-pager--simple { gap: 6px; font-size: var(--cc-fs-md); color: var(--cc-text-2); }
.cc-select--sm { width: auto; height: 28px; padding-left: 8px; padding-right: 26px; font-size: var(--cc-fs-sm); background-position: right 7px center; }
.cc-loadmore { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-dots { display: inline-flex; align-items: center; gap: 6px; }
.cc-dots > * {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--cc-r-full);
  background: var(--cc-viz-5);
  cursor: pointer;
  transition: width 0.24s var(--cc-ease), background var(--cc-dur);
}
.cc-dots > .is-active { width: 18px; background: var(--cc-accent); }

/* ==========================================================================
   16. More components · 弹层 / 表单 / 展示补充
   ========================================================================== */
/* 折叠指示：给 <summary> 加 .cc-summary */
.cc-summary { list-style: none; cursor: pointer; user-select: none; }
.cc-summary::-webkit-details-marker { display: none; }
.cc-summary::after {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.55;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--cc-ease);
}
details[open] > .cc-summary::after { transform: translateY(1px) rotate(-135deg); }
.cc-summary--inline::after { margin-left: 4px; }

/* Popover 气泡卡片 / Popconfirm 气泡确认（复用 data-cc-dropdown） */
.cc-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: none;
  min-width: 200px;
  padding: 12px;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
  color: var(--cc-text);
  font-size: var(--cc-fs-md);
  font-weight: 400;
  text-align: left;
  white-space: normal;
}
.cc-dropdown.is-open > .cc-popover { display: block; animation: cc-menu-in 0.14s var(--cc-ease); }
.cc-popover--right { left: auto; right: 0; }
.cc-popover--up { top: auto; bottom: calc(100% + 6px); }
/* 气泡卡片箭头：.cc-popover--arrow；带边框，所以箭头只画朝外的两条边 */
.cc-popover--arrow::before { border: 1px solid var(--cc-border); border-right: 0; border-bottom: 0; top: -5px; left: 16px; }
.cc-popover--right.cc-popover--arrow::before { left: auto; right: 16px; }
.cc-popover--up.cc-popover--arrow::before { top: auto; bottom: -5px; transform: rotate(225deg); }
.cc-popover--arrow[data-side]::before { top: auto; right: auto; bottom: auto; left: auto; }
.cc-popover--arrow[data-side="bottom"]::before { top: -5px; left: calc(var(--cc-arrow-x) - 4px); transform: rotate(45deg); }
.cc-popover--arrow[data-side="top"]::before { bottom: -5px; left: calc(var(--cc-arrow-x) - 4px); transform: rotate(225deg); }
.cc-popover--arrow[data-side="right"]::before { left: -5px; top: calc(var(--cc-arrow-y) - 4px); transform: rotate(-45deg); }
.cc-popover--arrow[data-side="left"]::before { right: -5px; top: calc(var(--cc-arrow-y) - 4px); transform: rotate(135deg); }
/* JS 定位后（data-side）按实际方向做入场动画 */
.cc-dropdown.is-open > [data-side="top"] { animation-name: cc-menu-in-up; }
.cc-dropdown.is-open > [data-side="left"] { animation-name: cc-menu-in-left; }
.cc-dropdown.is-open > [data-side="right"] { animation-name: cc-menu-in-right; }
@keyframes cc-menu-in-up { from { opacity: 0; transform: translateY(4px) scale(0.97); } }
@keyframes cc-menu-in-left { from { opacity: 0; transform: translateX(4px) scale(0.97); } }
@keyframes cc-menu-in-right { from { opacity: 0; transform: translateX(-4px) scale(0.97); } }
.cc-popover-title { margin-bottom: 4px; font-weight: 600; }
.cc-popover-desc { font-size: 12.5px; color: var(--cc-text-2); line-height: 1.6; }
.cc-popover-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.cc-popconfirm { display: flex; gap: 10px; width: 260px; }
.cc-popconfirm > svg { width: 16px; height: 16px; margin-top: 2px; color: var(--cc-warning); }

/* Drawer 抽屉（复用 .cc-modal-backdrop 与 data-cc-open） */
.cc-modal-backdrop--drawer { place-items: stretch end; padding: 0; overflow: hidden; }
.cc-modal-backdrop--drawer-left { place-items: stretch start; padding: 0; overflow: hidden; }
.cc-drawer {
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  height: 100%;
  border-left: 1px solid var(--cc-border);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
  transform: translateX(100%);
  transition: transform 0.28s var(--cc-ease);
}
.cc-modal-backdrop--drawer-left .cc-drawer { border-left: 0; border-right: 1px solid var(--cc-border); transform: translateX(-100%); }
.cc-modal-backdrop.is-open .cc-drawer { transform: none; }
.cc-drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--cc-border); }
.cc-drawer-title { font-size: var(--cc-fs-lg); font-weight: 600; }
.cc-drawer-head > .cc-btn { margin-left: auto; margin-right: -6px; }
.cc-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.cc-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--cc-border); }

/* Command 命令面板（⌘K） */
.cc-modal-backdrop--top { place-items: start center; padding-top: 12vh; }
.cc-command {
  width: min(580px, 100%);
  overflow: hidden;
  border: 1px solid var(--cc-border);
  border-radius: 14px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
  transform: translateY(-6px) scale(0.98);
  transition: transform 0.2s var(--cc-ease);
}
.cc-modal-backdrop.is-open .cc-command { transform: none; }
.cc-command-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--cc-border); }
.cc-command-input > svg { width: 17px; height: 17px; color: var(--cc-text-3); }
.cc-command-input input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  outline: none;
  background: none;
  color: var(--cc-text);
  font-size: 15px;
}
.cc-command-input input::placeholder { color: var(--cc-text-4); }
.cc-command-list { max-height: min(380px, 52vh); overflow-y: auto; padding: 6px; }
.cc-command-group[data-label]::before {
  content: attr(data-label);
  display: block;
  padding: 8px 10px 4px;
  font-size: var(--cc-fs-xs);
  color: var(--cc-text-3);
}
.cc-command-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--cc-r-md);
  background: none;
  color: var(--cc-text);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.cc-command-item > svg { width: 16px; height: 16px; color: var(--cc-text-2); }
.cc-command-item small { color: var(--cc-text-3); font-size: var(--cc-fs-sm); }
.cc-command-item .cc-kbd { margin-left: auto; }
.cc-command-item.is-active { background: var(--cc-surface-3); }
.cc-command-item--ai > svg { color: var(--cc-text); }
.cc-command-item--ai b { font-weight: 600; }
.cc-command-empty { padding: 28px 16px; text-align: center; font-size: var(--cc-fs-md); color: var(--cc-text-3); }
.cc-command-foot { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--cc-border); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-command-foot span { display: inline-flex; align-items: center; gap: 4px; }
.cc-command-foot .cc-kbd { height: 18px; }

/* Notification 通知（CC.notify） */
.cc-notify-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.cc-notify {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
  pointer-events: auto;
  animation: cc-notify-in 0.26s var(--cc-ease);
}
.cc-notify > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--cc-text-2); }
.cc-notify--success > svg { color: var(--cc-success); }
.cc-notify--warning > svg { color: var(--cc-warning); }
.cc-notify--danger > svg { color: var(--cc-danger); }
.cc-notify--info > svg { color: var(--cc-info); }
.cc-notify-content { flex: 1; min-width: 0; }
.cc-notify-title { font-size: 13.5px; font-weight: 600; }
.cc-notify-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--cc-text-2); }
.cc-notify-actions { display: flex; gap: 8px; margin-top: 10px; }
.cc-notify-close { margin: -4px 0 0; }
.cc-notify.is-leaving { animation: cc-notify-out 0.2s forwards; }

/* Accordion 折叠面板（原生 details） */
.cc-accordion { overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-accordion > details + details { border-top: 1px solid var(--cc-border); }
.cc-accordion summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-size: var(--cc-fs-base);
  font-weight: 500;
  transition: background var(--cc-dur);
}
.cc-accordion summary:hover { background: var(--cc-surface-2); }
.cc-accordion summary > svg { width: 16px; height: 16px; color: var(--cc-text-3); }
.cc-accordion-body { padding: 0 16px 16px; font-size: var(--cc-fs-md); line-height: 1.75; color: var(--cc-text-2); }
.cc-accordion--flush { border: 0; border-radius: 0; background: transparent; }
.cc-accordion--flush summary { padding-left: 0; padding-right: 0; }
.cc-accordion--flush summary:hover { background: transparent; }
.cc-accordion--flush .cc-accordion-body { padding-left: 0; padding-right: 0; }

/* Combobox 可搜索选择 / 多选 / 标签输入（CC.select） */
.cc-combo { position: relative; width: 100%; min-width: 0; }
.cc-combo-trigger {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 34px;
  padding: 3px 30px 3px 6px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
  cursor: text;
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-combo-trigger:hover { border-color: var(--cc-border-strong); }
.cc-combo.is-open .cc-combo-trigger,
.cc-combo-trigger:focus-within { border-color: var(--cc-text-3); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-combo-input {
  flex: 1;
  min-width: 64px;
  height: 26px;
  padding: 0 4px;
  border: 0;
  outline: none;
  background: none;
  color: var(--cc-text);
  font-size: var(--cc-fs-md);
}
.cc-combo-input::placeholder { color: var(--cc-text-4); }
.cc-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  height: 24px;
  padding: 0 3px 0 8px;
  border-radius: 5px;
  background: var(--cc-surface-3);
  color: var(--cc-text);
  font-size: var(--cc-fs-sm);
  white-space: nowrap;
}
.cc-tag button {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--cc-text-3);
  cursor: pointer;
}
.cc-tag button:hover { background: var(--cc-border); color: var(--cc-text); }
.cc-tag svg { width: 11px; height: 11px; }
.cc-combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  max-height: 264px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
}
.cc-combo.is-open .cc-combo-panel { display: block; animation: cc-menu-in 0.14s var(--cc-ease); }
.cc-combo-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--cc-r-sm);
  font-size: var(--cc-fs-md);
  cursor: pointer;
}
.cc-combo-option > svg { width: 15px; height: 15px; color: var(--cc-text-2); }
.cc-combo-option small { color: var(--cc-text-3); font-size: var(--cc-fs-sm); }
.cc-combo-option.is-active { background: var(--cc-surface-3); }
.cc-combo-check { margin-left: auto; display: inline-flex; visibility: hidden; }
.cc-combo-option.is-selected .cc-combo-check { visibility: visible; }
.cc-combo-create { color: var(--cc-text-2); }
.cc-combo-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; text-align: center; font-size: 12.5px; color: var(--cc-text-3); }
/* 分组标题 / 禁用项 / 清除按钮 / 虚拟列表 / 远程加载中 */
.cc-combo-group { display: flex; align-items: flex-end; height: 28px; padding: 0 8px 4px; font-size: var(--cc-fs-xs); font-weight: 500; color: var(--cc-text-3); letter-spacing: 0.02em; }
.cc-combo-option.is-disabled { color: var(--cc-text-4); cursor: not-allowed; }
.cc-combo-option.is-disabled > svg { color: var(--cc-text-4); }
.cc-combo-clear {
  display: none;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cc-surface-3);
  color: var(--cc-text-2);
  cursor: pointer;
}
.cc-combo.has-value .cc-combo-trigger:hover .cc-combo-clear,
.cc-combo.has-value.is-open .cc-combo-clear { display: grid; }
.cc-combo-clear:hover { color: var(--cc-text); }
.cc-combo.is-disabled { opacity: 0.55; pointer-events: none; }
.cc-combo-vlist { position: relative; }
.cc-combo-vlist > * { position: absolute; left: 0; right: 0; height: 32px; box-sizing: border-box; }
.cc-combo-vlist > .cc-combo-option { padding-top: 0; padding-bottom: 0; }
.cc-combo-panel.is-loading::after { content: ""; position: sticky; bottom: -4px; display: block; height: 2px; margin: 0 -4px -4px; background: linear-gradient(90deg, transparent, var(--cc-text-3), transparent) 0 0 / 40% 100% no-repeat; animation: cc-combo-load 1s linear infinite; }
@keyframes cc-combo-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* Number 数字输入 */
.cc-number {
  display: inline-flex;
  align-items: stretch;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface);
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-number:focus-within { border-color: var(--cc-text-3); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-number input {
  width: 64px;
  border: 0;
  outline: none;
  background: none;
  color: var(--cc-text);
  font-size: var(--cc-fs-md);
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cc-number input::-webkit-inner-spin-button,
.cc-number input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cc-number button {
  display: grid;
  place-items: center;
  width: 30px;
  padding: 0;
  border: 0;
  background: var(--cc-surface-2);
  color: var(--cc-text-2);
  cursor: pointer;
  transition: background var(--cc-dur), color var(--cc-dur);
}
.cc-number button:first-child { border-right: 1px solid var(--cc-border); }
.cc-number button:last-child { border-left: 1px solid var(--cc-border); }
.cc-number button:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-number button svg { width: 14px; height: 14px; }

/* OTP 验证码 */
.cc-otp { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.cc-otp input {
  flex: 0 1 40px;
  width: 40px;
  min-width: 0;
  height: 46px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  outline: none;
  background: var(--cc-surface);
  color: var(--cc-text);
  font-family: var(--cc-font-mono);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  caret-color: var(--cc-text);
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-otp input:focus { border-color: var(--cc-text-3); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-otp.is-complete input { border-color: var(--cc-text); }
.cc-otp-sep { width: 8px; height: 2px; border-radius: 1px; background: var(--cc-border-strong); }

/* Date 日期（原生控件 + 令牌） */
.cc-input[type="date"],
.cc-input[type="time"],
.cc-input[type="datetime-local"],
.cc-input[type="month"],
.cc-input[type="week"] { font-variant-numeric: tabular-nums; }
.cc-input::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
.cc-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.cc-range { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cc-range > span { color: var(--cc-text-3); flex-shrink: 0; }
.cc-range > .cc-input { flex: 1; width: auto; min-width: 0; padding: 0 6px; }

/* Date picker 日期 / 日期范围（CC.datepicker，自绘日历弹层） */
.cc-datepicker { position: relative; width: 100%; min-width: 0; }
.cc-datepicker-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface);
  color: var(--cc-text);
  font-size: var(--cc-fs-md);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  outline: none;
  user-select: none;
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-datepicker-trigger:hover { border-color: var(--cc-border-strong); }
.cc-datepicker.is-open .cc-datepicker-trigger,
.cc-datepicker-trigger:focus-visible { border-color: var(--cc-focus-ring); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-datepicker-trigger > svg { position: absolute; top: 50%; right: 9px; width: 15px; height: 15px; color: var(--cc-text-3); transform: translateY(-50%); transition: opacity var(--cc-dur); }
.cc-datepicker-field { flex: 1; min-width: 0; padding: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-datepicker-field.is-placeholder { color: var(--cc-text-4); }
.cc-datepicker-field.is-active { box-shadow: inset 0 -1.5px 0 var(--cc-accent); } /* 范围选择时标出正在选开始还是结束 */
.cc-datepicker-sep { display: inline-flex; color: var(--cc-text-3); }
.cc-datepicker-sep svg { width: 13px; height: 13px; }
.cc-datepicker-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: var(--cc-r-xs);
  background: none;
  color: var(--cc-text-3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity var(--cc-dur);
}
.cc-datepicker-clear:hover { background: var(--cc-surface-3); color: var(--cc-text); }
/* 有值时悬停：右侧日历图标换成清除按钮 */
.cc-datepicker.has-value .cc-datepicker-trigger:hover .cc-datepicker-clear,
.cc-datepicker.has-value .cc-datepicker-trigger:focus-visible .cc-datepicker-clear { opacity: 1; pointer-events: auto; }
.cc-datepicker.has-value .cc-datepicker-trigger:hover > svg,
.cc-datepicker.has-value .cc-datepicker-trigger:focus-visible > svg { opacity: 0; }
@media (hover: none) {
  .cc-datepicker.has-value .cc-datepicker-clear { opacity: 1; pointer-events: auto; }
  .cc-datepicker.has-value .cc-datepicker-trigger > svg { opacity: 0; }
}
.cc-datepicker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  display: none;
  width: max-content;
  max-width: calc(100vw - 16px);
  overflow: hidden;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
}
.cc-datepicker.is-open > .cc-datepicker-panel { display: flex; animation: cc-menu-in 0.14s var(--cc-ease); }
.cc-datepicker-panel.is-up,
.cc-combo-panel.is-up,
.cc-cascader-panel.is-up { top: auto; bottom: calc(100% + 4px); }
.cc-datepicker-presets {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 104px;
  flex-shrink: 0;
  padding: 8px 6px;
  overflow-y: auto;
  border-right: 1px solid var(--cc-border);
  background: var(--cc-surface-2);
}
.cc-datepicker-preset {
  flex-shrink: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--cc-r-sm);
  background: none;
  color: var(--cc-text-2);
  font-size: var(--cc-fs-md);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.cc-datepicker-preset:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-datepicker-preset.is-active { background: var(--cc-surface-3); color: var(--cc-text); font-weight: 500; }
.cc-datepicker-main { display: flex; flex-direction: column; min-width: 0; }
.cc-datepicker-cals { display: flex; gap: 20px; padding: 10px 14px 8px; }
.cc-datepicker-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 10px 6px 14px;
  border-top: 1px solid var(--cc-border);
  font-size: var(--cc-fs-sm);
  color: var(--cc-text-3);
  font-variant-numeric: tabular-nums;
}
.cc-datepicker-tip { margin-right: auto; }
.cc-datepicker-tip b { color: var(--cc-text); font-weight: 600; }

/* 日历（日期选择器内部） */
.cc-dp-cal { width: 238px; flex-shrink: 0; }
.cc-dp-head { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 4px; }
.cc-dp-title {
  padding: 4px 8px;
  border: 0;
  border-radius: var(--cc-r-sm);
  background: none;
  color: var(--cc-text);
  font-size: var(--cc-fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
button.cc-dp-title:hover { background: var(--cc-surface-3); }
.cc-dp-nav {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--cc-r-sm);
  background: none;
  color: var(--cc-text-2);
  cursor: pointer;
}
.cc-dp-nav:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-dp-nav[data-inner] { visibility: hidden; }
.cc-dp-week,
.cc-dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cc-dp-week span { display: grid; place-items: center; height: 28px; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-dp-grid { row-gap: 2px; }
.cc-dp-day {
  position: relative;
  z-index: 0;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cc-text);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  outline: none;
}
.cc-dp-day > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-radius: var(--cc-r-md);
  transition: background var(--cc-dur), color var(--cc-dur);
}
.cc-dp-day::before { content: ""; position: absolute; inset: 0; z-index: -1; display: none; background: var(--cc-surface-3); }
.cc-dp-day.is-in-range::before,
.cc-dp-day.is-span::before { display: block; }
.cc-dp-day.is-span.is-start::before { left: 50%; }
.cc-dp-day.is-span.is-end::before { right: 50%; }
.cc-dp-day:hover > span { background: var(--cc-surface-3); }
.cc-dp-day.is-in-range:hover > span { background: var(--cc-border); }
.cc-dp-day:focus-visible > span { box-shadow: 0 0 0 2px var(--cc-text-3); }
.cc-dp-day.is-today > span { font-weight: 600; box-shadow: inset 0 0 0 1px var(--cc-border-strong); }
.cc-dp-day.is-selected > span { background: var(--cc-accent); color: var(--cc-on-accent); box-shadow: none; }
.cc-dp-day.is-ghost > span { background: var(--cc-surface); color: var(--cc-text); box-shadow: inset 0 0 0 1.5px var(--cc-text); }
.cc-dp-day:disabled { color: var(--cc-text-4); cursor: not-allowed; }
.cc-dp-day:disabled > span { background: none; }
.cc-dp-cal--months { width: 100%; }
.cc-dp-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 4px; }
.cc-dp-month {
  height: 40px;
  border: 0;
  border-radius: var(--cc-r-md);
  background: none;
  color: var(--cc-text);
  font-size: var(--cc-fs-md);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cc-dp-month:hover { background: var(--cc-surface-3); }
.cc-dp-month.is-today { font-weight: 600; box-shadow: inset 0 0 0 1px var(--cc-border-strong); }
.cc-dp-month.is-selected { background: var(--cc-accent); color: var(--cc-on-accent); box-shadow: none; }
@media (max-width: 640px) {
  .cc-datepicker-panel { flex-direction: column; }
  .cc-datepicker-presets {
    flex-direction: row;
    width: auto;
    contain: inline-size; /* 不撑宽面板，横向滚动 */
    overflow-x: auto;
    padding: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--cc-border);
  }
  .cc-datepicker-cals > .cc-dp-cal + .cc-dp-cal { display: none; }
  .cc-datepicker-cals > .cc-dp-cal:first-child .cc-dp-nav { visibility: visible; }
}

/* Tree select 树选择（CC.treeSelect，外框复用 .cc-combo） */
.cc-treeselect-node {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 8px 0 calc(var(--depth, 0) * 18px + 2px);
  border-radius: var(--cc-r-sm);
  font-size: var(--cc-fs-md);
  cursor: pointer;
}
.cc-treeselect-node:hover,
.cc-treeselect-node.is-active { background: var(--cc-surface-3); }
.cc-treeselect-node.is-disabled { color: var(--cc-text-4); cursor: not-allowed; }
.cc-treeselect-node > svg { width: 15px; height: 15px; color: var(--cc-text-2); }
.cc-treeselect-node small { color: var(--cc-text-3); font-size: var(--cc-fs-sm); }
.cc-treeselect-node > .cc-check { pointer-events: none; } /* 整行点击切换，勾选框只做显示 */
.cc-treeselect-node.is-selected .cc-combo-check { visibility: visible; }
.cc-treeselect-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--cc-r-xs);
  color: var(--cc-text-3);
}
.cc-treeselect-toggle:not(.is-leaf):hover { background: var(--cc-border); color: var(--cc-text); }
.cc-treeselect-toggle svg { width: 14px; height: 14px; transition: transform var(--cc-dur) var(--cc-ease); }
.cc-treeselect-toggle.is-open svg { transform: rotate(90deg); }
.cc-treeselect-count { margin-left: auto; font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-tag--more { padding-right: 8px; color: var(--cc-text-3); }
.cc-treeselect mark,
.cc-cascader mark,
.cc-transfer mark { background: none; color: var(--cc-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Cascader 级联选择（CC.cascader，外框复用 .cc-combo） */
.cc-cascader-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  display: none;
  width: max-content;
  max-width: calc(100vw - 16px);
  overflow-x: auto;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
}
.cc-combo.is-open > .cc-cascader-panel { display: flex; animation: cc-menu-in 0.14s var(--cc-ease); }
.cc-cascader-col { flex-shrink: 0; width: 156px; max-height: 264px; overflow-y: auto; padding: 4px; }
.cc-cascader-col + .cc-cascader-col { border-left: 1px solid var(--cc-border); }
.cc-cascader-col--search { width: auto; min-width: 240px; max-width: min(440px, calc(100vw - 18px)); }
.cc-cascader-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--cc-r-sm);
  font-size: var(--cc-fs-md);
  cursor: pointer;
}
.cc-cascader-item:hover,
.cc-cascader-item.is-active { background: var(--cc-surface-3); }
.cc-cascader-item.is-selected { font-weight: 600; }
.cc-cascader-item > svg { width: 15px; height: 15px; color: var(--cc-text-2); }
.cc-cascader-item > .cc-truncate { flex: 1; }
.cc-cascader-item > svg:last-child:not(:first-child) { width: 14px; height: 14px; color: var(--cc-text-3); }
.cc-cascader-item.is-disabled { color: var(--cc-text-4); background: none; cursor: not-allowed; }
.cc-cascader-trail { color: var(--cc-text-3); }
@media (max-width: 640px) { .cc-cascader-col:not(.cc-cascader-col--search) { width: 128px; } }

/* Transfer 穿梭框（CC.transfer）：宽度不足时 JS 加 .is-stacked 改为上下排列 */
.cc-transfer { display: flex; align-items: stretch; gap: 12px; min-width: 0; }
.cc-transfer-list {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  background: var(--cc-surface);
}
.cc-transfer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--cc-border);
  background: var(--cc-surface-2);
  font-size: var(--cc-fs-md);
}
.cc-transfer-title { font-weight: 600; white-space: nowrap; }
.cc-transfer-count { margin-left: auto; font-size: var(--cc-fs-sm); color: var(--cc-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-transfer-search { padding: 8px 8px 0; }
.cc-transfer-body { height: 232px; overflow-y: auto; padding: 4px; }
.cc-transfer-item { display: flex; padding: 7px 8px; border-radius: var(--cc-r-sm); }
.cc-transfer-item:hover { background: var(--cc-surface-3); }
.cc-transfer-label { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; }
.cc-transfer-label small { flex-shrink: 1; margin-left: auto; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-transfer-empty { display: grid; place-items: center; height: 100%; padding: 16px; font-size: 12.5px; color: var(--cc-text-3); text-align: center; }
.cc-transfer-ops { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.cc-transfer.is-stacked { flex-direction: column; }
.cc-transfer.is-stacked > .cc-transfer-list { flex: none; }
.cc-transfer.is-stacked > .cc-transfer-ops { flex-direction: row; justify-content: center; }
.cc-transfer.is-stacked > .cc-transfer-ops svg { transform: rotate(90deg); }
.cc-transfer.is-stacked .cc-transfer-body { height: 180px; }

/* Upload 上传 + File 文件卡片 */
.cc-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  border: 1.5px dashed var(--cc-border-strong);
  border-radius: var(--cc-r-lg);
  background: var(--cc-surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--cc-dur), background var(--cc-dur);
}
.cc-upload:hover { border-color: var(--cc-text-3); background: var(--cc-surface-3); }
.cc-upload.is-dragover { border-style: solid; border-color: var(--cc-text); background: var(--cc-surface-3); }
.cc-upload input[type="file"] { display: none; }
.cc-upload-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: var(--cc-surface);
  color: var(--cc-text-2);
}
.cc-upload-icon svg { width: 18px; height: 18px; }
.cc-upload-title { font-size: 13.5px; font-weight: 500; }
.cc-upload-title u { text-underline-offset: 3px; }
.cc-upload-desc { font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-file-list { display: flex; flex-direction: column; gap: 8px; }
.cc-file-list--row { flex-direction: row; flex-wrap: wrap; }
.cc-file {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 8px 9px 10px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface);
}
.cc-file-icon {
  width: 32px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--cc-surface-3);
  color: var(--cc-text-2);
  font-family: var(--cc-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cc-file-icon--dark { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-file-main { flex: 1; min-width: 0; }
.cc-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cc-fs-md); font-weight: 500; }
.cc-file-meta { font-size: 11.5px; color: var(--cc-text-3); }
.cc-file .cc-progress { height: 3px; margin-top: 6px; }
.cc-file.is-error { border-color: color-mix(in srgb, var(--cc-danger) 40%, var(--cc-border)); }
.cc-file.is-error .cc-file-meta { color: var(--cc-danger); }
.cc-file--compact { max-width: 240px; padding: 5px 4px 5px 5px; gap: 8px; }
.cc-file--compact .cc-file-icon { width: 28px; height: 30px; font-size: 8px; }
.cc-file--compact .cc-file-name { font-size: var(--cc-fs-sm); }
.cc-file--compact .cc-file-meta { font-size: 10.5px; }
.cc-file-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface-3);
}

/* Result 结果页 */
.cc-result { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 20px; text-align: center; }
.cc-result-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cc-accent);
  color: var(--cc-on-accent);
}
.cc-result-icon svg { width: 26px; height: 26px; }
.cc-result--success .cc-result-icon { background: var(--cc-success-bg); color: var(--cc-success); }
.cc-result--danger .cc-result-icon { background: var(--cc-danger-bg); color: var(--cc-danger); }
.cc-result--warning .cc-result-icon { background: var(--cc-warning-bg); color: var(--cc-warning); }
.cc-result-code { margin-bottom: 6px; font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cc-result-title { font-size: 18px; font-weight: 600; }
.cc-result-desc { max-width: 380px; font-size: var(--cc-fs-md); color: var(--cc-text-2); }
.cc-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }

/* Banner 公告条 */
.cc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--cc-r-md);
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  font-size: var(--cc-fs-md);
}
.cc-banner > svg { width: 15px; height: 15px; opacity: 0.8; }
.cc-banner a { color: inherit; font-weight: 500; text-underline-offset: 3px; }
.cc-banner > .cc-btn { margin-left: auto; color: inherit; }
.cc-banner > .cc-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.cc-banner--subtle { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-banner--full { border-radius: 0; }

/* Code block 代码块（pre[data-lang] 自动高亮；加 --lines 显示行号） */
.cc-codeblock { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface-2); }
.cc-codeblock-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border-bottom: 1px solid var(--cc-border);
  font-size: var(--cc-fs-sm);
  color: var(--cc-text-3);
}
.cc-codeblock-lang { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); }
.cc-codeblock-head > .cc-btn:first-of-type { margin-left: auto; }
.cc-codeblock pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  color: var(--cc-text);
  font-family: var(--cc-font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  tab-size: 2;
}
.cc-codeblock .ln { display: block; min-height: 1.7em; }
.cc-codeblock--lines pre { counter-reset: cc-ln; padding-left: 8px; }
.cc-codeblock--lines .ln::before {
  counter-increment: cc-ln;
  content: counter(cc-ln);
  display: inline-block;
  width: 2.4em;
  margin-right: 1em;
  color: var(--cc-text-4);
  text-align: right;
  user-select: none;
}
/* 灰阶语法高亮：注释浅、字符串次、关键字粗 */
.tk-c { color: var(--cc-text-3); font-style: italic; }
.tk-s { color: var(--cc-text-2); }
.tk-n { color: var(--cc-text-2); }
.tk-k { font-weight: 600; }

/* Diff 代码变更 */
.cc-diff { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface); }
.cc-diff-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-bottom: 1px solid var(--cc-border);
  background: var(--cc-surface-2);
  font-size: 12.5px;
}
.cc-diff-head .cc-mono { font-size: var(--cc-fs-sm); }
.cc-diff-stat { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); }
.cc-diff-stat .add { color: var(--cc-success); }
.cc-diff-stat .del { color: var(--cc-danger); }
.cc-diff-head > .cc-btn:first-of-type { margin-left: auto; }
.cc-diff-body { overflow-x: auto; padding: 4px 0; font-family: var(--cc-font-mono); font-size: 12px; line-height: 1.75; }
.cc-diff-line { display: grid; grid-template-columns: 40px 18px minmax(max-content, 1fr); white-space: pre; }
.cc-diff-line .ln { padding-right: 8px; color: var(--cc-text-4); text-align: right; user-select: none; }
.cc-diff-line .mk { color: var(--cc-text-3); user-select: none; }
.cc-diff-line.is-add { background: var(--cc-success-bg); }
.cc-diff-line.is-add .mk { color: var(--cc-success); }
.cc-diff-line.is-del { background: var(--cc-danger-bg); }
.cc-diff-line.is-del .mk { color: var(--cc-danger); }
.cc-diff-line.is-del .code { color: var(--cc-text-2); }
.cc-diff-line.is-hunk { background: var(--cc-surface-2); color: var(--cc-text-3); }

/* 杂项 */
.cc-divider-text { display: flex; align-items: center; gap: 12px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-divider-text::before,
.cc-divider-text::after { content: ""; flex: 1; height: 1px; background: var(--cc-border); }
.cc-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.cc-avatar-wrap > .cc-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--cc-surface); }
.cc-chip--sm { height: 26px; padding: 0 9px; gap: 5px; }
.cc-ring--xs { --s: 18px; --t: 3px; }
.cc-ring--xs > * { display: none; }

/* Watermark 水印：CC.watermark(元素, { text })，铺满目标、不挡点击，被删掉会自动补回 */
.cc-watermark { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; background-repeat: repeat; user-select: none; }
.cc-watermark.is-page { position: fixed; z-index: 2147483000; }

/* Selection toolbar 划词工具条（CC.ai.selectionToolbar，外观复用 .cc-menu / .cc-menu-item） */
.cc-menu.cc-seltool { position: fixed; top: 0; left: 0; z-index: 950; min-width: 0; padding: 3px; border-radius: var(--cc-r-md); align-items: center; gap: 2px; }
.cc-menu.cc-seltool.is-open { display: flex; animation: cc-menu-in 0.12s var(--cc-ease); }
.cc-seltool .cc-menu-item { width: auto; padding: 5px 8px; font-size: var(--cc-fs-sm); white-space: nowrap; }

/* 点击改名：<span data-cc-editable>标题</span> */
.cc-editable { border-radius: 4px; cursor: text; outline: none; transition: background var(--cc-dur), box-shadow var(--cc-dur); }
.cc-editable:hover { background: var(--cc-surface-3); box-shadow: 0 0 0 3px var(--cc-surface-3); }
.cc-editable:focus-visible { box-shadow: 0 0 0 2px var(--cc-text); }
.cc-editable.is-editing { background: none; box-shadow: none; }
.cc-editable-input {
  max-width: 100%;
  height: 1.7em;
  margin: -3px -6px;
  padding: 0 5px;
  border: 1px solid var(--cc-border-strong);
  border-radius: 5px;
  background: var(--cc-surface);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  outline: none;
  box-shadow: 0 0 0 3px var(--cc-focus);
}

/* 评分：<div data-cc-rate data-value="4"></div> */
.cc-rate { display: inline-flex; gap: 2px; border-radius: 4px; color: var(--cc-border-strong); outline: none; }
.cc-rate:focus-visible { box-shadow: 0 0 0 2px var(--cc-text); }
.cc-rate-item { display: inline-flex; cursor: pointer; transition: transform 0.12s var(--cc-ease), color 0.12s; }
.cc-rate[role="img"] .cc-rate-item { cursor: default; }
.cc-rate:not([role="img"]) .cc-rate-item:hover { transform: scale(1.12); }
.cc-rate-item svg { fill: none; }
.cc-rate-item.is-on,
.cc-rate-item.is-half { color: var(--cc-text); }
.cc-rate-item.is-on svg { fill: currentColor; }
.cc-rate-item.is-half svg { fill: color-mix(in srgb, currentColor 40%, transparent); }

/* 快捷键录制：<div data-cc-hotkey data-value="Mod+K"></div> */
.cc-hotkey {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 168px;
  height: 34px;
  padding: 0 6px 0 8px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface);
  font-size: var(--cc-fs-md);
  cursor: pointer;
  outline: none;
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-hotkey:hover { border-color: var(--cc-border-strong); }
.cc-hotkey.is-recording { border-color: var(--cc-text); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-hotkey:focus-visible:not(.is-recording) { border-color: var(--cc-focus-ring); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-hotkey.is-invalid { animation: cc-shake 0.3s; }
.cc-hotkey-ph { color: var(--cc-text-4); }
.cc-hotkey.is-recording .cc-hotkey-ph { color: var(--cc-text-3); }
.cc-hotkey-clear { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 4px; color: var(--cc-text-3); }
.cc-hotkey-clear:hover { background: var(--cc-surface-3); color: var(--cc-text); }
@keyframes cc-shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

/* 密码显隐：<div class="cc-input-wrap" data-cc-password><input class="cc-input" type="password"></div> */
.cc-input-wrap > .cc-pass-toggle { position: absolute; right: 4px; color: var(--cc-text-3); }
.cc-input-wrap:has(> .cc-pass-toggle) > .cc-input { padding-right: 36px; }

/* 命令片段：<div class="cc-snippet"><code>npx coder-cc init</code></div> */
.cc-snippet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 36px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface-2);
  font-family: var(--cc-font-mono);
  font-size: 13px;
}
.cc-snippet code { min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--cc-text); font: inherit; scrollbar-width: none; }
.cc-snippet code::-webkit-scrollbar { display: none; }
.cc-snippet-prompt { flex-shrink: 0; color: var(--cc-text-4); user-select: none; }
.cc-snippet-copy { flex-shrink: 0; margin-left: auto; }
.cc-snippet--block { display: flex; }
.cc-snippet--dark { border-color: var(--cc-accent); background: var(--cc-accent); }
.cc-snippet--dark code, .cc-snippet--dark .cc-snippet-copy { color: var(--cc-on-accent); }
.cc-snippet--dark .cc-snippet-prompt { color: color-mix(in srgb, var(--cc-on-accent) 45%, transparent); }

/* 文件类型图标：CC.fileType('a.pdf') / <i data-filetype="pdf"></i> */
.cc-filetype { flex-shrink: 0; vertical-align: middle; }

/* 滚动阴影：内容超出时上下边缘出现淡阴影，滚到头自动消失；--sb 设成容器底色 */
.cc-scroll-shadow {
  --sb: var(--cc-surface);
  --sh: color-mix(in srgb, var(--cc-text) 14%, transparent);
  overflow: auto;
  background:
    linear-gradient(var(--sb) 30%, transparent) center top / 100% 36px no-repeat local,
    linear-gradient(transparent, var(--sb) 70%) center bottom / 100% 36px no-repeat local,
    linear-gradient(var(--sh), transparent) center top / 100% 10px no-repeat scroll,
    linear-gradient(transparent, var(--sh)) center bottom / 100% 10px no-repeat scroll,
    var(--sb);
}
.cc-scroll-shadow--x {
  background:
    linear-gradient(90deg, var(--sb) 30%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(90deg, transparent, var(--sb) 70%) right center / 36px 100% no-repeat local,
    linear-gradient(90deg, var(--sh), transparent) left center / 10px 100% no-repeat scroll,
    linear-gradient(90deg, transparent, var(--sh)) right center / 10px 100% no-repeat scroll,
    var(--sb);
}

/* 图片灯箱：<img data-cc-lightbox="组名"> */
img[data-cc-lightbox], [data-cc-lightbox] img { cursor: zoom-in; }
.cc-lightbox { position: fixed; inset: 0; z-index: 1100; display: none; flex-direction: column; background: rgba(10, 10, 10, 0.92); color: #fff; }
.cc-lightbox.is-open { display: flex; animation: cc-fade-up 0.18s var(--cc-ease); }
.cc-lightbox-bar { display: flex; flex-shrink: 0; align-items: center; gap: 10px; height: 52px; padding: 0 10px 0 18px; font-size: var(--cc-fs-md); }
.cc-lightbox-bar .cc-btn { color: #fff; }
.cc-lightbox-bar .cc-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.cc-lightbox-count { font-family: var(--cc-font-mono); font-size: var(--cc-fs-sm); opacity: 0.6; }
.cc-lightbox-cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
.cc-lightbox-stage { display: grid; flex: 1; min-height: 0; place-items: center; overflow: auto; padding: 4px 64px 32px; }
.cc-lightbox-stage img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); cursor: zoom-in; user-select: none; }
.cc-lightbox.is-zoomed .cc-lightbox-stage { place-items: start center; }
.cc-lightbox.is-zoomed .cc-lightbox-stage img { max-width: none; max-height: none; cursor: zoom-out; }
.cc-lightbox-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; }
.cc-lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); }
.cc-lightbox-nav.is-prev { left: 12px; }
.cc-lightbox-nav.is-next { right: 12px; }
.cc-lightbox.is-single .cc-lightbox-nav { display: none; }
@media (max-width: 640px) { .cc-lightbox-stage { padding: 4px 8px 24px; } .cc-lightbox-nav { top: auto; bottom: 16px; } }

/* HTML 实时预览：<div data-cc-html-preview><template>…</template></div> */
.cc-html-preview { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-html-preview-head { display: flex; flex-shrink: 0; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--cc-border); background: var(--cc-surface-2); }
.cc-html-preview-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--cc-fs-md); font-weight: 500; }
.cc-html-preview-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-html-preview-title svg { flex-shrink: 0; color: var(--cc-text-3); }
.cc-html-preview-body { position: relative; min-height: 120px; }
.cc-html-preview-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.cc-html-preview-code { height: 100%; margin: 0; overflow: auto; padding: 12px 14px; background: var(--cc-surface-2); font-family: var(--cc-font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre; }
.cc-html-preview.is-full { position: fixed; inset: 0; z-index: 1000; border-radius: 0; }
.cc-html-preview.is-full .cc-html-preview-body { flex: 1; height: auto !important; }

/* Carousel 轮播：<div class="cc-carousel" data-cc-carousel data-autoplay="4000"><div class="cc-carousel-track">…slide…</div></div> */
.cc-carousel { position: relative; overflow: hidden; border-radius: var(--cc-r-lg); }
.cc-carousel-track { display: flex; gap: var(--gap, 0px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.cc-carousel-track::-webkit-scrollbar { display: none; }
.cc-carousel-track > * { flex: 0 0 var(--slide, 100%); min-width: 0; scroll-snap-align: start; }
.cc-carousel-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--cc-surface) 90%, transparent); color: var(--cc-text); box-shadow: var(--cc-shadow-md); cursor: pointer; opacity: 0; transition: opacity var(--cc-dur); backdrop-filter: blur(6px); }
.cc-carousel:hover .cc-carousel-nav, .cc-carousel-nav:focus-visible { opacity: 1; }
@media (hover: none) { .cc-carousel-nav { display: none; } }
.cc-carousel-nav svg { width: 16px; height: 16px; }
.cc-carousel-nav.is-prev { left: 10px; }
.cc-carousel-nav.is-next { right: 10px; }
.cc-carousel-nav:disabled { opacity: 0 !important; pointer-events: none; }
.cc-carousel-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.cc-carousel-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.5); cursor: pointer; pointer-events: auto; transition: width 0.25s var(--cc-ease), background 0.25s; }
.cc-carousel-dots button.is-active { width: 18px; background: #fff; }
.cc-carousel--outside .cc-carousel-dots { position: static; margin-top: 10px; }
.cc-carousel--outside .cc-carousel-dots button { background: var(--cc-viz-5); }
.cc-carousel--outside .cc-carousel-dots button.is-active { background: var(--cc-text); }
/* 自动播放进度：当前圆点里有一条白线在走 */
.cc-carousel[data-autoplay] .cc-carousel-dots button.is-active { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.5); }
.cc-carousel[data-autoplay] .cc-carousel-dots button.is-active::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; animation: cc-dot-fill var(--autoplay, 4000ms) linear; }
.cc-carousel.is-paused .cc-carousel-dots button.is-active::after { animation-play-state: paused; }
@keyframes cc-dot-fill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .cc-carousel[data-autoplay] .cc-carousel-dots button.is-active::after { animation: none; }
}

/* Tour 新手引导：CC.tour([{ el, title, desc }]) */
.cc-tour { position: fixed; inset: 0; z-index: 1150; pointer-events: none; }
.cc-tour-hole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55), 0 0 0 2px #fff; transition: all 0.35s var(--cc-ease); pointer-events: none; }
.cc-tour-pop {
  position: fixed; width: 300px; max-width: calc(100vw - 24px); padding: 16px; border-radius: 14px; background: var(--cc-surface); color: var(--cc-text);
  box-shadow: var(--cc-shadow-lg); pointer-events: auto; transition: top 0.35s var(--cc-ease), left 0.35s var(--cc-ease); animation: cc-fade-up 0.25s var(--cc-ease);
}
.cc-tour-step { font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-text-3); }
.cc-tour-title { margin: 6px 0 4px; font-size: var(--cc-fs-lg); font-weight: 650; }
.cc-tour-desc { font-size: var(--cc-fs-md); line-height: 1.7; color: var(--cc-text-2); }
.cc-tour-foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.cc-tour-dots { display: flex; gap: 4px; margin-right: auto; }
.cc-tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--cc-viz-5); }
.cc-tour-dots i.is-on { width: 14px; background: var(--cc-text); }
.cc-tour-catch { position: fixed; inset: 0; pointer-events: auto; }

/* Color 取色器：<div data-cc-color data-value="#2563eb"></div> */
.cc-color { position: relative; display: inline-flex; }
.cc-color-trigger { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 5px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface); color: var(--cc-text); font: 500 12.5px var(--cc-font-mono); cursor: pointer; }
.cc-color-trigger:hover { border-color: var(--cc-border-strong); }
.cc-color-chip { width: 24px; height: 24px; border-radius: 6px; background: var(--c, #000); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.cc-color-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: none; width: 236px; padding: 10px; border: 1px solid var(--cc-border); border-radius: 12px; background: var(--cc-surface); box-shadow: var(--cc-shadow-lg); }
.cc-color.is-open .cc-color-panel { display: flex; flex-direction: column; gap: 10px; animation: cc-menu-in 0.14s var(--cc-ease); }
.cc-color-sv { position: relative; height: 140px; border-radius: 8px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--hue, 220) 100% 50%)); cursor: crosshair; touch-action: none; }
.cc-color-hue { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: pointer; touch-action: none; }
.cc-color-knob { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.3); pointer-events: none; }
.cc-color-hue .cc-color-knob { top: 50%; }
.cc-color-row { display: flex; gap: 6px; }
.cc-color-row .cc-input { flex: 1; height: 30px; font-family: var(--cc-font-mono); font-size: 12px; text-transform: uppercase; }
.cc-color-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.cc-color-swatches button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); cursor: pointer; }
.cc-color-swatches button:hover { transform: scale(1.12); }
.cc-color-swatches button.is-active { box-shadow: 0 0 0 2px var(--cc-surface), 0 0 0 3.5px var(--cc-text); }

/* Crop 裁剪：<div class="cc-crop" data-cc-crop data-ratio="1"><img src></div> */
.cc-crop { position: relative; overflow: hidden; border-radius: var(--cc-r-md); background: #000; user-select: none; touch-action: none; }
.cc-crop > img { display: block; width: 100%; height: auto; opacity: 0.45; pointer-events: none; }
.cc-crop-box { position: absolute; cursor: move; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9); background-repeat: no-repeat; }
.cc-crop-box::before, .cc-crop-box::after { content: ""; position: absolute; pointer-events: none; border: 0 solid rgba(255, 255, 255, 0.35); }
.cc-crop-box::before { left: 33.33%; right: 33.33%; top: 0; bottom: 0; border-left-width: 1px; border-right-width: 1px; }
.cc-crop-box::after { top: 33.33%; bottom: 33.33%; left: 0; right: 0; border-top-width: 1px; border-bottom-width: 1px; }
.cc-crop-box.is-round { border-radius: 50%; }
.cc-crop-handle { position: absolute; width: 14px; height: 14px; border: 3px solid #fff; }
.cc-crop-handle[data-h="nw"] { left: -3px; top: -3px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.cc-crop-handle[data-h="ne"] { right: -3px; top: -3px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.cc-crop-handle[data-h="sw"] { left: -3px; bottom: -3px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.cc-crop-handle[data-h="se"] { right: -3px; bottom: -3px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.cc-crop-size { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.7); color: #fff; font-family: var(--cc-font-mono); font-size: 10.5px; white-space: nowrap; pointer-events: none; }
.cc-crop-box.is-near-bottom .cc-crop-size { bottom: auto; top: 6px; }

/* 区间滑块：<div class="cc-range-slider" data-cc-range data-min="0" data-max="100" data-value="20,80"></div> */
.cc-range-slider { position: relative; height: 22px; touch-action: none; }
.cc-range-slider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--cc-surface-3); }
.cc-range-fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--cc-accent); left: var(--a, 20%); right: calc(100% - var(--b, 80%)); }
.cc-range-thumb { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; padding: 0; border: 0; border-radius: 50%; background: var(--cc-surface); box-shadow: 0 0 0 1.5px var(--cc-text), var(--cc-shadow-sm); cursor: grab; }
.cc-range-thumb:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--cc-text), 0 0 0 5px var(--cc-focus); }
.cc-range-thumb:active { cursor: grabbing; transform: scale(1.1); }
.cc-range-thumb::after { content: attr(data-label); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; background: var(--cc-accent); color: var(--cc-on-accent); font-family: var(--cc-font-mono); font-size: 10.5px; white-space: nowrap; opacity: 0; transition: opacity 0.12s; pointer-events: none; }
.cc-range-thumb:hover::after, .cc-range-thumb:focus-visible::after, .cc-range-slider.is-dragging .cc-range-thumb::after { opacity: 1; }

/* 通知中心（下拉）：.cc-inbox */
.cc-inbox { width: 380px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.cc-inbox-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0; }
.cc-inbox-head b { font-size: var(--cc-fs-base); }
.cc-inbox-head .cc-btn { margin-left: auto; }
.cc-inbox .cc-tabs { padding: 0 14px; gap: 16px; }
.cc-inbox-list { max-height: 360px; overflow-y: auto; }
.cc-inbox-item { position: relative; display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--cc-border); cursor: pointer; transition: background var(--cc-dur); }
.cc-inbox-item:hover { background: var(--cc-surface-2); }
.cc-inbox-item.is-unread::before { content: ""; position: absolute; left: 5px; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--cc-text); }
.cc-inbox-item-main { flex: 1; min-width: 0; font-size: var(--cc-fs-md); line-height: 1.55; }
.cc-inbox-item-main b { font-weight: 600; }
.cc-inbox-item-main small { display: block; margin-top: 2px; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-inbox-item-actions { display: flex; gap: 6px; margin-top: 8px; }
.cc-inbox-foot { display: flex; justify-content: center; padding: 8px; }

/* 数字滚动：<b data-cc-countup="4826" data-duration="1200">0</b> */
[data-cc-countup] { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   17. AI · 对话与 Agent
   ========================================================================== */
/* 流式输出 */
.cc-shimmer {
  background: linear-gradient(90deg, var(--cc-text-3) 0%, var(--cc-text-3) 38%, var(--cc-text) 50%, var(--cc-text-3) 62%, var(--cc-text-3) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cc-shimmer-text 1.8s linear infinite;
}
.cc-caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--cc-text);
  vertical-align: -0.16em;
  animation: cc-caret 1s steps(1) infinite;
}
.cc-stream-hide { display: none !important; }

/* Conversation & Message 对话与消息 */
.cc-conversation { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cc-msg { display: flex; gap: 12px; min-width: 0; }
.cc-msg--user { justify-content: flex-end; }
.cc-msg--user .cc-msg-body { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(80%, 600px); min-width: 0; }
.cc-msg-bubble {
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 18px 18px 4px 18px;
  background: var(--cc-surface-3);
  font-size: 14.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.cc-msg-avatar { flex-shrink: 0; padding-top: 1px; }
.cc-msg--ai .cc-msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cc-msg-meta { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-msg-meta b { font-size: var(--cc-fs-md); font-weight: 600; color: var(--cc-text); }
.cc-msg-actions { display: flex; align-items: center; gap: 2px; margin-left: -6px; opacity: 0; transition: opacity 0.15s; }
.cc-msg--user .cc-msg-actions { margin-left: 0; margin-right: -6px; }
.cc-msg:hover .cc-msg-actions,
.cc-msg.is-last .cc-msg-actions,
.cc-msg-actions:focus-within { opacity: 1; }
@media (hover: none) { .cc-msg-actions { opacity: 1; } }
.cc-msg-actions .cc-btn { --h: 28px; width: 28px; padding: 0; border-color: transparent; background: transparent; color: var(--cc-text-3); }
.cc-msg-actions .cc-btn:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-msg-actions .cc-btn.is-active { color: var(--cc-text); }
.cc-msg-actions .cc-btn svg { width: 15px; height: 15px; }
.cc-msg-vote { display: inline-flex; gap: 2px; }
/* 对话布局变体（加在 .cc-thread 或单条 .cc-msg 上）：
   .cc-thread--bubble  AI 回复也用气泡（左侧浅色气泡，用户在右）
   .cc-thread--docs    文档式：所有消息左对齐、无气泡，用户消息加粗标题样式（适合长回答 / 知识库） */
.cc-thread--bubble .cc-msg--ai .cc-msg-body > .cc-prose,
.cc-msg--ai.cc-msg--bubble .cc-msg-body > .cc-prose { align-self: flex-start; max-width: min(88%, 680px); padding: 10px 14px; border: 1px solid var(--cc-border); border-radius: 18px 18px 18px 4px; background: var(--cc-surface); }
.cc-thread--docs .cc-msg--user { justify-content: flex-start; }
.cc-thread--docs .cc-msg--user .cc-msg-body { align-items: flex-start; max-width: 100%; }
.cc-thread--docs .cc-msg--user .cc-msg-bubble { padding: 0; border-radius: 0; background: none; font-size: var(--cc-fs-lg); font-weight: 600; }
.cc-thread--docs .cc-msg--user .cc-msg-actions { margin-left: -6px; margin-right: 0; }
.cc-thread--docs .cc-msg + .cc-msg--user { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--cc-border); }

/* 消息出错：.cc-msg.is-error，正文下方放 .cc-msg-error（CC.ai.msgError 生成），带「重试」按钮 */
.cc-msg-error { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border: 1px solid color-mix(in srgb, var(--cc-danger) 30%, var(--cc-border)); border-radius: var(--cc-r-md); background: var(--cc-danger-bg); color: var(--cc-danger); font-size: var(--cc-fs-md); }
.cc-msg-error > svg { width: 15px; height: 15px; flex-shrink: 0; }
.cc-msg-error > span { flex: 1; min-width: 0; color: var(--cc-text); }
.cc-msg-error small { display: block; margin-top: 1px; color: var(--cc-text-3); font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); }
.cc-msg--user.is-error .cc-msg-bubble { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc-danger) 45%, transparent); }
.cc-msg--user .cc-msg-error { padding: 4px 6px 4px 8px; border: 0; background: none; font-size: var(--cc-fs-sm); }

/* TokenTag：<span class="cc-token-tag" data-cc-token="1200" data-max="8000">…</span> 或 CC.ai.tokenTag(el, { value, max })
   用量 < 70% 正常、70–90% --warn（低余量）、≥ 90% --over（快满 / 超出） */
.cc-token-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 6px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-full); background: var(--cc-surface); color: var(--cc-text-2); font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-token-ring { --p: 0; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(currentColor calc(var(--p) * 1%), var(--cc-surface-3) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); color: var(--cc-text); }
.cc-token-tag b { font-weight: 600; color: var(--cc-text); }
.cc-token-tag--warn { border-color: color-mix(in srgb, var(--cc-warning) 40%, var(--cc-border)); }
.cc-token-tag--warn .cc-token-ring { color: var(--cc-warning); }
.cc-token-tag--over { border-color: color-mix(in srgb, var(--cc-danger) 45%, var(--cc-border)); background: var(--cc-danger-bg); }
.cc-token-tag--over .cc-token-ring, .cc-token-tag--over b { color: var(--cc-danger); }
.cc-branch { display: inline-flex; align-items: center; gap: 0; margin-left: 4px; font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-typing { display: inline-flex; align-items: center; gap: 10px; min-height: 28px; font-size: var(--cc-fs-md); color: var(--cc-text-3); }
.cc-checkpoint { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--cc-text-3); }
.cc-checkpoint::before,
.cc-checkpoint::after { content: ""; flex: 1; border-top: 1px dashed var(--cc-border-strong); }
.cc-checkpoint svg { width: 13px; height: 13px; }
.cc-checkpoint .cc-btn { --h: 22px; padding: 0 6px; font-size: var(--cc-fs-xs); }
.cc-scroll-bottom {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  align-self: center;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cc-border);
  border-radius: 50%;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-md);
  color: var(--cc-text-2);
  cursor: pointer;
}
.cc-scroll-bottom svg { width: 16px; height: 16px; }

/* Prose 富文本（AI 回复 / Markdown 渲染结果） */
.cc-prose { min-width: 0; color: var(--cc-text); font-size: 14.5px; line-height: 1.75; overflow-wrap: break-word; }
.cc-prose > * + * { margin-top: 0.85em; }
.cc-prose > :first-child { margin-top: 0; }
.cc-prose h1 { margin-top: 1.4em; font-size: 1.6em; font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; }
.cc-prose h2 { margin-top: 1.4em; font-size: 1.3em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.cc-prose h3 { margin-top: 1.2em; font-size: 1.1em; font-weight: 600; }
.cc-prose h4 { margin-top: 1em; font-size: 1em; font-weight: 600; }
.cc-prose p { margin-bottom: 0; }
.cc-prose ul,
.cc-prose ol { margin-bottom: 0; padding-left: 1.4em; }
.cc-prose li + li { margin-top: 0.3em; }
.cc-prose li::marker { color: var(--cc-text-3); }
.cc-prose strong { font-weight: 600; }
.cc-prose a { color: var(--cc-text); text-decoration: underline; text-decoration-color: var(--cc-border-strong); text-underline-offset: 3px; }
.cc-prose a:hover { text-decoration-color: currentColor; }
.cc-prose :not(pre) > code { padding: 0.12em 0.4em; border-radius: 4px; background: var(--cc-surface-3); font-family: var(--cc-font-mono); font-size: 0.86em; }
.cc-prose > pre { margin-bottom: 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface-2); font-family: var(--cc-font-mono); font-size: 12.5px; line-height: 1.7; }
.cc-prose blockquote { margin-inline: 0; margin-bottom: 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--cc-border-strong); color: var(--cc-text-2); }
.cc-prose hr { height: 1px; margin: 1.6em 0; border: 0; background: var(--cc-border); }
.cc-prose table { width: 100%; border-collapse: collapse; font-size: var(--cc-fs-md); }
.cc-prose th { padding: 7px 10px; border-bottom: 1px solid var(--cc-border-strong); color: var(--cc-text-3); font-size: var(--cc-fs-sm); font-weight: 500; text-align: left; }
.cc-prose td { padding: 7px 10px; border-bottom: 1px solid var(--cc-border); }
.cc-prose img { max-width: 100%; border-radius: var(--cc-r-md); }
/* CC.md 渲染结果：h5 / h6、嵌套与松散列表、任务列表、删除线、表格横向滚动与对齐、代码块与来源汇总 */
.cc-prose h5,
.cc-prose h6 { margin-top: 1em; font-size: 1em; font-weight: 600; color: var(--cc-text-2); }
.cc-prose li > * + * { margin-top: 0.4em; }
.cc-prose li > ul,
.cc-prose li > ol { margin-top: 0.3em; }
.cc-prose blockquote > * + * { margin-top: 0.5em; }
.cc-prose del { color: var(--cc-text-3); }
.cc-prose li.is-task { margin-left: -1.4em; list-style: none; }
.cc-prose li.is-task > .cc-check { align-items: flex-start; font-size: inherit; line-height: inherit; cursor: default; user-select: text; }
.cc-prose li.is-task > .cc-check:has(input:disabled) { opacity: 1; cursor: default; }
.cc-prose li.is-task > .cc-check input { margin-top: 0.3em; pointer-events: none; }
.cc-prose li.is-task.is-done > .cc-check > span { color: var(--cc-text-3); text-decoration: line-through; text-decoration-color: var(--cc-border-strong); }
.cc-prose-scroll { max-width: 100%; overflow-x: auto; }
.cc-prose th.is-center,
.cc-prose td.is-center { text-align: center; }
.cc-prose th.is-right,
.cc-prose td.is-right { text-align: right; font-variant-numeric: tabular-nums; }
.cc-prose .cc-sources a { text-decoration: none; }

/* Composer 输入框（Prompt input / Sender） */
.cc-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 8px 12px;
  border: 1px solid var(--cc-border);
  border-radius: 20px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-md);
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-composer:focus-within { border-color: var(--cc-border-strong); }
.cc-composer-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-composer-attachments:empty { display: none; }
.cc-composer-input {
  width: 100%;
  min-height: 26px;
  max-height: 220px;
  padding: 3px 2px;
  border: 0;
  outline: none;
  resize: none;
  overflow-y: auto;
  background: none;
  color: var(--cc-text);
  font-size: 14.5px;
  line-height: 1.6;
}
.cc-composer-input::placeholder { color: var(--cc-text-4); }
.cc-composer-bar { display: flex; align-items: center; gap: 4px; margin-left: -4px; min-width: 0; }
.cc-composer-bar > .cc-btn--ghost { color: var(--cc-text-2); }
.cc-composer-send {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  cursor: pointer;
  transition: opacity var(--cc-dur), transform 0.08s;
}
.cc-composer-send:active { transform: scale(0.94); }
.cc-composer-send:disabled { opacity: 0.22; cursor: default; }
.cc-composer-send svg { width: 16px; height: 16px; stroke-width: 2.2; }
.cc-composer-send .i-stop { display: none; }
.cc-composer.is-generating .cc-composer-send .i-send { display: none; }
.cc-composer.is-generating .cc-composer-send .i-stop { display: block; }
.cc-composer-hint { margin-top: 8px; font-size: var(--cc-fs-xs); color: var(--cc-text-3); text-align: center; }
.cc-composer-queue {
  margin: 0 16px -1px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--cc-border);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--cc-surface-2);
  font-size: 12.5px;
}
.cc-queue-item { display: flex; align-items: center; gap: 8px; min-height: 26px; color: var(--cc-text-2); }
.cc-queue-item > svg { width: 13px; height: 13px; color: var(--cc-text-3); }
.cc-queue-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Welcome 欢迎页 / Prompt cards 提示卡 / Suggestions 快捷建议 */
.cc-welcome { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; text-align: center; }
.cc-welcome-title { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
.cc-welcome-desc { font-size: var(--cc-fs-base); color: var(--cc-text-3); }
.cc-prompt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; width: 100%; margin-top: 14px; }
.cc-prompt-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  background: var(--cc-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-prompt-card:hover { border-color: var(--cc-border-strong); box-shadow: var(--cc-shadow-md); }
.cc-prompt-card > svg { width: 16px; height: 16px; color: var(--cc-text-2); }
.cc-prompt-card b { font-size: var(--cc-fs-md); font-weight: 600; }
.cc-prompt-card span { font-size: var(--cc-fs-sm); color: var(--cc-text-3); line-height: 1.5; }
.cc-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-full);
  background: var(--cc-surface);
  color: var(--cc-text-2);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--cc-dur), color var(--cc-dur);
}
.cc-suggestion:hover { border-color: var(--cc-border-strong); color: var(--cc-text); }
.cc-suggestion svg { width: 13px; height: 13px; }

/* History 对话历史 */
.cc-history { display: flex; flex-direction: column; gap: 1px; }
.cc-history-label { padding: 14px 10px 4px; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 4px 0 10px;
  border: 0;
  border-radius: var(--cc-r-md);
  background: none;
  color: var(--cc-text-2);
  font-size: var(--cc-fs-md);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--cc-dur), color var(--cc-dur);
}
.cc-history-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-history-item:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-history-item.is-active { background: var(--cc-surface-3); color: var(--cc-text); font-weight: 500; }
.cc-history-item > .cc-btn { opacity: 0; }
.cc-history-item:hover > .cc-btn,
.cc-history-item.is-active > .cc-btn { opacity: 1; }

/* Context 上下文用量 */
.cc-context {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-full);
  background: var(--cc-surface);
  color: var(--cc-text-2);
  font-size: var(--cc-fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}
.cc-context:hover { border-color: var(--cc-border-strong); }
.cc-context-panel { width: 280px; }
.cc-context-panel > * + * { margin-top: 10px; }
.cc-context-row { display: flex; align-items: center; gap: 8px; font-size: var(--cc-fs-sm); color: var(--cc-text-2); }
.cc-context-row b { margin-left: auto; font-weight: 500; color: var(--cc-text); font-variant-numeric: tabular-nums; }

/* Reasoning 思考过程 */
.cc-reasoning { font-size: var(--cc-fs-md); color: var(--cc-text-3); }
.cc-reasoning > summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; transition: color var(--cc-dur); }
.cc-reasoning > summary:hover { color: var(--cc-text-2); }
.cc-reasoning > summary > svg { width: 14px; height: 14px; }
.cc-reasoning-body { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--cc-viz-5); line-height: 1.75; white-space: pre-wrap; }

/* Tool 工具调用 */
.cc-tool { overflow: hidden; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-surface); font-size: var(--cc-fs-md); }
.cc-tool > summary { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; transition: background var(--cc-dur); }
.cc-tool > summary:hover { background: var(--cc-surface-2); }
.cc-tool-icon { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 7px; background: var(--cc-surface-3); color: var(--cc-text-2); }
.cc-tool-icon svg { width: 13px; height: 13px; }
.cc-tool-name { font-family: var(--cc-font-mono); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.cc-tool-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--cc-text-3); }
.cc-tool-time { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-tool[data-status="error"] { border-color: color-mix(in srgb, var(--cc-danger) 35%, var(--cc-border)); }
.cc-tool[data-status="error"] .cc-tool-icon { background: var(--cc-danger-bg); color: var(--cc-danger); }
.cc-tool-body { display: grid; gap: 10px; padding: 10px 12px 12px; border-top: 1px solid var(--cc-border); background: var(--cc-surface-2); }
.cc-tool-body pre {
  max-height: 180px;
  margin: 4px 0 0;
  padding: 8px 10px;
  overflow: auto;
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  background: var(--cc-surface);
  color: var(--cc-text-2);
  font-family: var(--cc-font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre;
}

/* Plan / Task 任务计划（思维链） */
.cc-plan { overflow: hidden; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-surface); font-size: var(--cc-fs-md); }
.cc-plan > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 500; }
.cc-plan > summary > svg { width: 15px; height: 15px; color: var(--cc-text-2); }
.cc-plan-count { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); font-weight: 400; color: var(--cc-text-3); }
.cc-plan-list { display: flex; flex-direction: column; margin: 0; padding: 0 12px 12px; list-style: none; }
.cc-plan-item { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 5px 0; color: var(--cc-text-2); }
.cc-plan-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: -3px;
  left: 7.5px;
  width: 1px;
  background: var(--cc-border);
}
.cc-plan-mark {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--cc-border-strong);
  border-radius: 50%;
}
.cc-plan-item.is-done { color: var(--cc-text-3); }
.cc-plan-item.is-done .cc-plan-mark { border: 0; background: var(--cc-accent); }
.cc-plan-item.is-done .cc-plan-mark::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 1.5px solid var(--cc-on-accent);
  border-bottom: 1.5px solid var(--cc-on-accent);
  transform: translate(0.5px, -1px) rotate(-45deg);
}
.cc-plan-item.is-running { color: var(--cc-text); font-weight: 500; }
.cc-plan-item.is-running .cc-plan-mark { border: 1.75px solid var(--cc-viz-5); border-top-color: var(--cc-text); animation: cc-spin 0.8s linear infinite; }
.cc-plan-item.is-error { color: var(--cc-text); }
.cc-plan-item.is-error .cc-plan-mark { border: 0; background: var(--cc-danger); }
.cc-plan-item.is-error .cc-plan-mark::after { content: "!"; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.cc-plan-item small { display: block; margin-top: 1px; font-size: var(--cc-fs-sm); font-weight: 400; color: var(--cc-text-3); }

/* Confirmation 人工确认（Human in the loop） */
.cc-confirm { overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); font-size: var(--cc-fs-md); }
.cc-confirm-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cc-border); background: var(--cc-warning-bg); font-weight: 500; }
.cc-confirm-head > svg { width: 15px; height: 15px; color: var(--cc-warning); }
.cc-confirm-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.cc-confirm-body pre {
  margin: 0;
  padding: 9px 12px;
  overflow-x: auto;
  border-radius: 6px;
  background: #0a0a0a;
  color: #e8e8e6;
  font-family: var(--cc-font-mono);
  font-size: 12px;
}
.cc-confirm-meta { font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 0 12px 12px; }
.cc-confirm.is-approved .cc-confirm-head { background: var(--cc-success-bg); }
.cc-confirm.is-approved .cc-confirm-head > svg { color: var(--cc-success); }
.cc-confirm.is-denied .cc-confirm-head { background: var(--cc-surface-3); }
.cc-confirm.is-denied .cc-confirm-head > svg { color: var(--cc-text-3); }

/* Question Agent 提问 */
.cc-question { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); font-size: var(--cc-fs-md); }
.cc-question-title { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.cc-question-title > svg { width: 15px; height: 15px; color: var(--cc-text-2); }
.cc-question-options { display: grid; gap: 6px; }
.cc-option-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-md);
  cursor: pointer;
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-option-card:hover { border-color: var(--cc-border-strong); }
.cc-option-card:has(input:checked) { border-color: var(--cc-text); box-shadow: inset 0 0 0 1px var(--cc-text); }
.cc-option-card input { margin-top: 2px; }
.cc-option-card b { display: block; font-weight: 500; }
.cc-option-card small { display: block; margin-top: 1px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }

/* Sources & Citation 来源与引用 */
.cc-sources { font-size: var(--cc-fs-md); }
.cc-sources > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 4px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-full);
  color: var(--cc-text-2);
  font-size: 12.5px;
  transition: border-color var(--cc-dur);
}
.cc-sources > summary:hover { border-color: var(--cc-border-strong); }
.cc-favicons { display: inline-flex; }
.cc-favicons > span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid var(--cc-surface);
  border-radius: 50%;
  background: var(--cc-surface-3);
  color: var(--cc-text-2);
  font-size: 9px;
  font-weight: 700;
}
.cc-favicons > span:first-child { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-favicons > span + span { margin-left: -6px; }
.cc-source-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.cc-source {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: var(--cc-surface-2);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--cc-dur), background var(--cc-dur);
}
.cc-source:hover { border-color: var(--cc-border-strong); background: var(--cc-surface); }
.cc-source-title { display: -webkit-box; overflow: hidden; font-size: 12.5px; font-weight: 500; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-source-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--cc-text-3); }
.cc-source-icon { width: 16px; height: 16px; flex-shrink: 0; display: grid; place-items: center; border-radius: 4px; background: var(--cc-accent); color: var(--cc-on-accent); font-size: 9px; font-weight: 700; }
.cc-source-idx { margin-left: auto; font-family: var(--cc-font-mono); }
.cc-cite {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin: 0 1px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--cc-surface-3);
  color: var(--cc-text-2);
  font-family: var(--cc-font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  vertical-align: 2px;
  cursor: pointer;
  transition: background var(--cc-dur), color var(--cc-dur);
}
.cc-cite:hover { background: var(--cc-accent); color: var(--cc-on-accent); }

/* Artifact / Web preview 产物预览 */
.cc-artifact { overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-artifact-head { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--cc-border); }
.cc-artifact-title { font-size: var(--cc-fs-md); font-weight: 600; white-space: nowrap; }
.cc-artifact-sub { font-size: 11.5px; color: var(--cc-text-3); white-space: nowrap; }
.cc-artifact-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.cc-browserbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--cc-border); background: var(--cc-surface-2); }
.cc-browserbar > i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--cc-border-strong); }
.cc-browserbar-url {
  flex: 1;
  min-width: 0;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  background: var(--cc-surface);
  color: var(--cc-text-3);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  white-space: nowrap;
}
.cc-browserbar-url svg { width: 11px; height: 11px; }
.cc-artifact-body { position: relative; min-height: 200px; padding: 14px; background: var(--cc-bg); }

/* Terminal 终端输出（固定深色） */
.cc-terminal { overflow: hidden; border: 1px solid #262626; border-radius: 10px; background: #0a0a0a; color: #e6e6e4; font-family: var(--cc-font-mono); font-size: 12px; line-height: 1.75; }
.cc-terminal-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #262626; color: #8a8a88; font-size: var(--cc-fs-xs); }
.cc-terminal-head > i { width: 8px; height: 8px; border-radius: 50%; background: #363636; }
.cc-terminal-head > span { margin-left: 4px; }
.cc-terminal pre { max-height: 260px; margin: 0; padding: 10px 12px; overflow: auto; white-space: pre; }
.cc-terminal .t-dim { color: #7a7a78; }
.cc-terminal .t-ok { color: #3ccf6e; }
.cc-terminal .t-warn { color: #f59e2b; }
.cc-terminal .t-err { color: #f25555; }
.cc-terminal .t-cmd::before { content: "$ "; color: #7a7a78; }

/* JSON 查看器：CC.json(el, 数据) 或 <div data-cc-json>{…}</div>，对象 / 数组可折叠（工具调用的入参与返回常用） */
.cc-json { min-width: 0; overflow: auto; padding: 10px 12px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface-2); color: var(--cc-text); font-family: var(--cc-font-mono); font-size: 12px; line-height: 1.7; }
.cc-json--plain { padding: 0; border: 0; background: none; }
.cc-json details { margin: 0; }
.cc-json summary { display: block; width: max-content; list-style: none; cursor: pointer; border-radius: 3px; }
.cc-json summary::-webkit-details-marker { display: none; }
.cc-json summary:hover { background: var(--cc-surface-3); }
.cc-json summary::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 7px 2px 1px;
  border-right: 1.5px solid var(--cc-text-3);
  border-bottom: 1.5px solid var(--cc-text-3);
  transform: rotate(-45deg);
  transition: transform 0.15s var(--cc-ease);
}
.cc-json details[open] > summary::before { transform: rotate(45deg); }
.cc-json-kids { padding-left: 12px; border-left: 1px dashed var(--cc-border); margin-left: 3px; }
.cc-json-row { padding-left: 15px; white-space: pre-wrap; word-break: break-all; }
.cc-json-close { padding-left: 15px; }
.cc-json details:not([open]) > .cc-json-close { display: none; }
.cc-json-key { color: var(--cc-text-2); }
.cc-json-str { color: var(--cc-text-2); }
.cc-json-num { color: var(--cc-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-json-bool,
.cc-json-null { color: var(--cc-text-3); font-style: italic; }
.cc-json-p { color: var(--cc-text-4); }
.cc-json-more { margin-left: 4px; color: var(--cc-text-3); font-size: var(--cc-fs-xs); }
.cc-json details[open] > summary > .cc-json-fold { display: none; }
.cc-json details:not([open]) > summary > .cc-json-count { display: none; }

/* Log 运行日志：CC.log(el, { lines })，按级别筛选、搜索、自动跟随最新；跟随主题（固定深色用 .cc-terminal） */
.cc-log { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-log-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--cc-border); }
.cc-log-bar .cc-input-wrap { flex: 1 1 120px; min-width: 100px; max-width: 220px; }
.cc-log-bar [data-log="total"] { margin-left: auto; }
.cc-log-body { position: relative; height: var(--h, 260px); overflow: auto; padding: 6px 0; font-family: var(--cc-font-mono); font-size: 12px; line-height: 1.65; overscroll-behavior: contain; }
.cc-log-line { display: flex; gap: 10px; padding: 1px 12px; }
.cc-log-line:hover { background: var(--cc-surface-2); }
.cc-log-time { flex-shrink: 0; color: var(--cc-text-3); font-variant-numeric: tabular-nums; }
.cc-log-level { flex-shrink: 0; width: 40px; color: var(--cc-text-3); font-weight: 600; }
.cc-log-msg { flex: 1; min-width: 0; color: var(--cc-text-2); white-space: pre-wrap; word-break: break-word; }
.cc-log-line[data-level="debug"] .cc-log-msg { color: var(--cc-text-3); }
.cc-log-line[data-level="success"] .cc-log-level { color: color-mix(in srgb, var(--cc-success) 78%, var(--cc-text)); }
.cc-log-line[data-level="warn"] .cc-log-level { color: color-mix(in srgb, var(--cc-warning) 70%, var(--cc-text)); }
.cc-log-line[data-level="error"] { background: var(--cc-danger-bg); }
.cc-log-line[data-level="error"] .cc-log-level,
.cc-log-line[data-level="error"] .cc-log-msg { color: var(--cc-danger); }
.cc-log-line mark { border-radius: 2px; background: var(--cc-warning-bg); color: inherit; box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc-warning) 35%, transparent); }
.cc-log-empty { padding: 24px 12px; color: var(--cc-text-4); font-family: var(--cc-font); text-align: center; }
.cc-log-jump { position: sticky; bottom: 6px; left: 100%; display: none; margin: 0 10px 0 auto; width: max-content; }
.cc-log.is-paused .cc-log-jump { display: flex; }
@media (max-width: 600px) {
  .cc-log-line { gap: 8px; padding: 1px 10px; }
  .cc-log-level { width: auto; min-width: 32px; }
}

/* File tree 文件树（Agent 改动的文件） */
.cc-filetree { padding: 6px; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-surface); font-family: var(--cc-font-mono); font-size: 12.5px; }
.cc-filetree ul { margin: 0; padding-left: 16px; list-style: none; }
.cc-filetree > ul { padding-left: 0; }
.cc-ft-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 5px; color: var(--cc-text-2); }
.cc-ft-row:hover { background: var(--cc-surface-3); }
.cc-ft-row > svg { width: 13px; height: 13px; color: var(--cc-text-3); }
.cc-ft-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; }
.cc-ft-row.is-added .cc-ft-badge { color: var(--cc-success); }
.cc-ft-row.is-modified .cc-ft-badge { color: var(--cc-warning); }
.cc-ft-row.is-deleted { text-decoration: line-through; color: var(--cc-text-3); }
.cc-ft-row.is-deleted .cc-ft-badge { color: var(--cc-danger); }

/* Agent 卡片 */
.cc-agent { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-agent-main { flex: 1; min-width: 0; }
.cc-agent-name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.cc-agent-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }

/* Voice 语音输入 */
/* 外框 .cc-voice 与「声音卡」共用同一个类，样式只有一份，见 19. AI 创作 · 声音卡 */
.cc-voice-time { font-family: var(--cc-font-mono); font-size: var(--cc-fs-sm); color: var(--cc-text-2); font-variant-numeric: tabular-nums; }
.cc-wave { flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.cc-wave i { width: 2.5px; height: 30%; flex-shrink: 0; border-radius: 2px; background: var(--cc-text); animation: cc-wave 1s ease-in-out infinite; }

/* Image generation 图像生成 */
.cc-genimg { position: relative; overflow: hidden; aspect-ratio: 1; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-surface-3); }
.cc-genimg.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--cc-surface) 75%, transparent) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: cc-shimmer 1.6s linear infinite;
}
.cc-genimg-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--cc-surface);
  color: var(--cc-text-2);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
}

/* 输入框里的 / 命令与 @ 提及：CC.ai.mentions() 生成 */
.cc-mention-menu { position: fixed; top: 0; left: 0; z-index: 1000; width: 300px; max-height: 300px; overflow-y: auto; }
.cc-mention-menu.is-open { display: block; animation: cc-menu-in 0.12s var(--cc-ease); }
.cc-mention-menu .cc-menu-item.is-active { background: var(--cc-surface-3); }
.cc-mention-menu .cc-menu-item > svg:first-child { flex-shrink: 0; }

/* 编辑已发送的消息：CC.ai.editMessage() / <button data-cc-msg-edit> */
.cc-msg.is-editing .cc-msg-body { width: 100%; max-width: 100%; }
.cc-msg.is-editing .cc-msg-bubble { width: 100%; padding: 8px; border: 1px solid var(--cc-border-strong); background: var(--cc-surface); color: var(--cc-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-text) 8%, transparent); }
.cc-msg.is-editing .cc-msg-actions { display: none; }
.cc-msg-edit-input { display: block; width: 100%; min-height: 24px; padding: 4px 6px; border: 0; background: none; color: inherit; font: inherit; line-height: 1.6; outline: none; resize: none; }
.cc-msg-edit-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.cc-msg-edit-foot .cc-caption { margin-right: auto; }

@keyframes cc-shimmer-text { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@keyframes cc-caret { 50% { opacity: 0; } }
@keyframes cc-wave { 0%, 100% { height: 18%; } 50% { height: 100%; } }
@keyframes cc-notify-in { from { opacity: 0; transform: translateX(16px); } }
@keyframes cc-notify-out { to { opacity: 0; transform: translateX(16px); } }

/* ==========================================================================
   18. Data grid & Kanban · 表格进阶（工具栏 / 固定表头与列 / 列宽 / 展开 / 编辑 / 虚拟滚动 / 单元格交互 / 行操作）与看板
   排在 16 之后：列设置面板（.cc-popover.cc-col-panel）要覆盖弹层的内边距
   ========================================================================== */
.cc-table-title { margin-right: 4px; font-size: var(--cc-fs-base); font-weight: 600; white-space: nowrap; }
.cc-table-search { width: 240px; max-width: 100%; }
.cc-col-panel { width: 210px; max-height: 320px; overflow-y: auto; padding: 4px; }
.cc-table-count { font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-table--sticky thead th { position: sticky; top: 0; z-index: 2; border-bottom-color: transparent; box-shadow: inset 0 -1px 0 var(--cc-border); }
.cc-table--resizable th { position: relative; }
.cc-th-resize { position: absolute; top: 0; right: -3px; bottom: 0; z-index: 4; width: 7px; cursor: col-resize; touch-action: none; }
.cc-th-resize::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 3px;
  width: 1px;
  background: var(--cc-border-strong);
  opacity: 0;
  transition: opacity var(--cc-dur);
}
.cc-table th:hover .cc-th-resize::after { opacity: 1; }
/* 把手本身悬停 / 聚焦 / 拖动中：竖线加深加粗 */
.cc-th-resize:hover::after,
.cc-th-resize:focus-visible::after,
.cc-table th.is-resizing .cc-th-resize::after { top: 15%; bottom: 15%; left: 2px; width: 2px; border-radius: 1px; background: var(--cc-text-2); opacity: 1; }
.cc-th-resize:focus-visible { outline: none; }
.cc-table--resizable th:last-child > .cc-th-resize { right: 0; } /* 最后一列的把手不伸出表格，避免多出横向滚动 */
.cc-table.is-resizing { cursor: col-resize; user-select: none; }
.cc-table.is-resizing .cc-th-sort { pointer-events: none; }
/* 拖行（rowDrag）/ 拖列（colDrag）
   把手：行首点状把手 / 表头左侧点状把手，平时很浅，悬停才清晰；拖动中全局 grabbing 光标
   拖动中：浮起的副本（.cc-drag-ghost）跟着指针，原位置留半透明占位，其余行 / 列 FLIP 让位滑动，松手吸附回占位 */
.cc-table .cc-col-drag { width: 28px; padding-right: 0; padding-left: 8px; }
.cc-row-drag,
.cc-th-grip {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--cc-r-xs);
  background: none;
  color: var(--cc-text-3);
  opacity: 0.35;
  cursor: grab;
  touch-action: none;
  transition: opacity var(--cc-dur), background var(--cc-dur), color var(--cc-dur);
}
.cc-row-drag { width: 20px; height: 24px; }
.cc-table tr:hover .cc-row-drag,
.cc-table--coldrag th:hover .cc-th-grip { opacity: 1; }
.cc-row-drag:hover,
.cc-row-drag:focus-visible { outline: none; opacity: 1; background: var(--cc-surface-3); color: var(--cc-text); }
.cc-table--coldrag th { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cc-th-grip { position: absolute; top: 50%; left: 1px; width: 12px; height: 20px; transform: translateY(-50%); pointer-events: none; }
@media (hover: none) { .cc-row-drag { opacity: 0.7; } .cc-th-grip { display: none; } }
@media (pointer: coarse) { .cc-row-drag { width: 28px; height: 32px; } }
.cc-table.is-row-dragging,
.cc-table.is-col-dragging { user-select: none; }
.cc-table.is-col-dragging .cc-th-sort { pointer-events: none; }
html.cc-grabbing,
html.cc-grabbing * { cursor: grabbing !important; }
/* 占位：浅底 + 两侧（列）/ 上下（行）细线，内容淡出 */
.cc-table tr.is-dragging > td,
.cc-table .is-col-placeholder { background: var(--cc-surface-2) !important; color: var(--cc-text-4); }
.cc-table tr.is-dragging > td { box-shadow: inset 0 1px 0 var(--cc-border-strong), inset 0 -1px 0 var(--cc-border-strong); }
.cc-table .is-col-placeholder { box-shadow: inset 1px 0 0 var(--cc-border-strong), inset -1px 0 0 var(--cc-border-strong); }
.cc-table tr.is-dragging > td > *,
.cc-table .is-col-placeholder > * { opacity: 0.25; }
.cc-table tr.is-moved > td { animation: cc-cell-flash 0.9s var(--cc-ease); }
/* 浮起的副本 */
.cc-drag-ghost {
  position: fixed;
  z-index: 1001;
  overflow: hidden;
  border-radius: var(--cc-r-md);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-md), 0 0 0 1px var(--cc-border-strong);
  pointer-events: none;
  transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.16s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.cc-drag-ghost.is-lifted { transform: translateY(-2px) scale(1.01); box-shadow: var(--cc-shadow-lg), 0 0 0 1px var(--cc-border-strong); }
.cc-drag-ghost--col.is-lifted { transform: translateY(-3px) scale(1.02); }
.cc-drag-ghost.is-dropping { transition-property: top, left, transform, box-shadow; transition-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
.cc-drag-ghost table { table-layout: fixed; border-collapse: collapse; }
.cc-drag-ghost td { background: var(--cc-surface); }
.cc-drag-ghost tbody tr:last-child td { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .cc-drag-ghost,
  .cc-drag-ghost.is-lifted { transition: none; transform: none; }
  .cc-table tr.is-moved > td { animation: none; }
}
/* 拖动时整列一条细线（挂在 body 上，fixed） */
.cc-col-guide { position: fixed; z-index: 1000; width: 2px; background: var(--cc-text); opacity: 0.35; pointer-events: none; }
@media (pointer: coarse) { .cc-th-resize { width: 16px; right: -8px; } }
.cc-table .cc-col-expand { width: 36px; padding-right: 0; }
.cc-row-expand {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--cc-r-xs);
  background: none;
  color: var(--cc-text-3);
  cursor: pointer;
  transition: transform 0.2s var(--cc-ease), background var(--cc-dur), color var(--cc-dur);
}
.cc-row-expand:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-row-expand[aria-expanded="true"] { transform: rotate(90deg); color: var(--cc-text); }
.cc-table tr.is-expanded > td { border-bottom-color: transparent; }
.cc-table tr.cc-table-detail > td { padding: 0; background: var(--cc-surface-2); white-space: normal; }
.cc-table tbody tr.cc-table-detail:hover > td { background: var(--cc-surface-2); }
.cc-table-detail-body { padding: 14px 16px 16px 50px; font-size: var(--cc-fs-md); }
.cc-table tr.cc-table-spacer > td { padding: 0; border: 0; background: transparent; }
.cc-table tbody tr.cc-table-spacer:hover > td { background: transparent; }
.cc-table td.is-editable { cursor: text; }
.cc-table td.is-editable:hover { box-shadow: inset 0 0 0 1px var(--cc-border-strong); }
.cc-table td.is-editing { padding-top: 0; padding-bottom: 0; box-shadow: inset 0 0 0 1.5px var(--cc-text); }
.cc-table td.is-edited { animation: cc-cell-flash 0.9s var(--cc-ease); }
.cc-table .cc-cell-input { width: 100%; min-width: 80px; height: 30px; padding: 0 2px; border: 0; background: transparent; box-shadow: none; }
@keyframes cc-cell-flash { from { background: var(--cc-surface-3); } }
.cc-table td.is-saving { opacity: 0.55; transition: opacity var(--cc-dur); }

/* 单元格交互（CC.table 列配置 copy / secret / note / choices / edit:'click' / ellipsis）
   可点的部分悬停有浅底；负外边距让文字和其他列对齐 */
.cc-cell-copy,
.cc-cell-secret,
.cc-cell-note,
.cc-cell-pick,
.cc-cell-edit { border-radius: var(--cc-r-sm); outline: none; transition: background var(--cc-dur); }
.cc-cell-copy,
.cc-cell-secret { display: inline-block; max-width: 100%; margin: -2px -6px; padding: 2px 6px; vertical-align: middle; cursor: copy; }
.cc-cell-note,
.cc-cell-pick,
.cc-cell-edit { margin: -5px -8px; padding: 5px 8px; }
.cc-cell-pick { cursor: pointer; }
.cc-cell-edit,
.cc-cell-note { cursor: text; }
.cc-cell-copy:hover, .cc-cell-copy:focus-visible,
.cc-cell-secret:hover, .cc-cell-secret:focus-visible,
.cc-cell-note:hover, .cc-cell-note:focus-visible,
.cc-cell-pick:hover, .cc-cell-pick:focus-visible,
.cc-cell-edit:hover, .cc-cell-edit:focus-visible,
td.is-popped > :is(.cc-cell-note, .cc-cell-pick, .cc-cell-edit) { background: var(--cc-surface-3); }
:is(.cc-cell-copy, .cc-cell-secret, .cc-cell-note, .cc-cell-pick, .cc-cell-edit):focus-visible { box-shadow: 0 0 0 2px var(--cc-border-strong); }
.cc-cell-secret { font-family: var(--cc-font-mono); white-space: nowrap; letter-spacing: -0.05em; }
.cc-cell-secret.is-revealed { letter-spacing: 0; }
/* 空值：浅色占位（::before 画出来，不算进搜索） */
:is(.cc-cell-note, .cc-cell-pick, .cc-cell-edit).is-empty::before { content: attr(data-placeholder); color: var(--cc-text-4); }
/* 备注：保留换行，最多显示 2 行，悬停看全文 */
.cc-cell-note {
  display: -webkit-box;
  min-width: 140px;
  max-width: var(--cc-note-w, 280px);
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 超长省略：ellipsis: true | 像素（默认 240px），悬停看全文 */
.cc-cell-clip { max-width: var(--cc-clip, 240px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
span.cc-cell-clip { display: inline-block; vertical-align: bottom; }
.cc-cell-copy.cc-cell-clip { max-width: calc(var(--cc-clip, 240px) + 12px); }

/* 浮层：编辑框 / 备注框 / 选项列表都挂在 body 上（fixed），不改变表格行高列宽 */
.cc-cell-pop { position: fixed; z-index: 1000; box-sizing: border-box; }
.cc-cell-float,
.cc-cell-float:focus { height: 32px; border-color: var(--cc-text-3); box-shadow: var(--cc-shadow-md), 0 0 0 3px var(--cc-focus); }
.cc-cell-float--note { height: auto; min-height: 36px; max-height: 40vh; padding: 7px 10px; overflow-y: auto; resize: none; line-height: 1.5; }
.cc-cell-picker {
  display: flex;
  flex-direction: column;
  width: 220px;
  max-width: calc(100vw - 16px);
  overflow: hidden;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-r-md);
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
  outline: none;
  animation: cc-menu-in 0.12s var(--cc-ease);
}
.cc-cell-picker-search { padding: 8px 8px 4px; }
.cc-cell-picker-list { max-height: 280px; overflow-y: auto; padding: 4px; }
.cc-cell-picker-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--cc-r-sm);
  background: none;
  color: var(--cc-text);
  font: inherit;
  font-size: var(--cc-fs-md);
  text-align: left;
  cursor: pointer;
}
.cc-cell-picker-opt:hover,
.cc-cell-picker-opt.is-active { background: var(--cc-surface-3); }
.cc-cell-picker-check { display: inline-flex; margin-left: auto; color: var(--cc-text-2); }
.cc-cell-picker-empty { padding: 8px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-cell-picker-add {
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--cc-border);
  background: none;
  color: var(--cc-text-2);
  font: inherit;
  font-size: var(--cc-fs-md);
  text-align: left;
  cursor: pointer;
}
.cc-cell-picker-add:hover { background: var(--cc-surface-3); color: var(--cc-text); }
@media (prefers-reduced-motion: reduce) { .cc-cell-picker { animation: none; } }

/* 行操作列：按钮不换行靠右；--quiet 默认浅色，行悬停 / 聚焦 / 菜单打开时变清晰（触屏设备始终清晰） */
.cc-table .cc-col-actions { width: 1%; text-align: right; }
.cc-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex-wrap: nowrap; }
.cc-row-actions--quiet { opacity: 0.4; transition: opacity var(--cc-dur); }
tr:hover .cc-row-actions--quiet,
.cc-row-actions--quiet:focus-within,
.cc-row-actions--quiet:has(.is-open) { opacity: 1; }
@media (hover: none) { .cc-row-actions--quiet { opacity: 1; } }
/* 固定列里打开的菜单要压住下面几行的固定单元格 */
.cc-table td:has(.cc-dropdown.is-open) { z-index: 5 !important; }

/* 手机卡片模式（CC.table cards: true / data-cards）：容器 ≤ 600px 时每行一张卡片，表头收起，排序 / 筛选挪到上方的工具条；> 600px 完全不变 */
.cc-table--cards { container: cc-table / inline-size; }
.cc-table-cardbar { display: none; }
@container cc-table (max-width: 600px) {
  .cc-table-cardbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--cc-border); }
  .cc-table-cardbar-sort { display: inline-flex; flex: 1 1 160px; align-items: center; gap: 6px; min-width: 0; color: var(--cc-text-3); }
  .cc-table-cardbar-sort .cc-select { flex: 1; min-width: 0; height: 40px; }
  .cc-table-cardbar-filter { height: 40px; gap: 6px; }
  .cc-table-cardbar-filter.is-active { border-color: var(--cc-text); color: var(--cc-text); }
  .cc-table--cards .cc-table { display: block; width: 100% !important; min-width: 0 !important; }
  .cc-table--cards .cc-table thead { display: none; }
  .cc-table--cards .cc-table tbody { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
  .cc-table--cards .cc-table tbody > tr[data-special]:not([hidden]) { display: block; }
  .cc-table--cards .cc-table tbody > tr[data-special] > td { display: block; border: 0; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: center;
    padding: 4px 4px 6px 12px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-r-lg);
    background: var(--cc-surface);
  }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]).is-selected { border-color: var(--cc-border-strong); background: var(--cc-surface-2); }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td {
    display: block;
    min-width: 0;
    padding: 4px 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    position: static !important;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  /* 普通列：「列标题：值」两栏，行间细线 */
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td:not([data-card]):not(.cc-col-check):not(.cc-col-expand):not(.cc-col-actions):not(.cc-col-drag) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(72px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 2px 8px 2px 0;
    border-top: 1px solid var(--cc-border);
  }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td:not([data-card]):not(.cc-col-check):not(.cc-col-expand):not(.cc-col-actions):not(.cc-col-drag)::before { content: attr(data-label); color: var(--cc-text-3); font-size: var(--cc-fs-sm); }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td[data-card="title"] { grid-column: 2; grid-row: 1; display: flex; align-items: center; min-height: 44px; color: var(--cc-text); font-size: 15px; font-weight: 600; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td[data-card="meta"] { grid-column: 2 / -1; padding: 0 8px 6px 0; color: var(--cc-text-3); font-size: var(--cc-fs-sm); }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]):not(:has(> .cc-col-check)) > td[data-card="title"] { grid-column: 1 / 3; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]):not(:has(> .cc-col-check)) > td[data-card="meta"] { grid-column: 1 / -1; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td[data-card="hide"],
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td.cc-col-drag { display: none; }
  /* 勾选框左上角、操作右上角，点按区域 44px */
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td.cc-col-check { grid-column: 1; grid-row: 1; width: auto; padding: 0; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td.cc-col-check .cc-check { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; margin-right: -8px; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td.cc-col-actions { grid-column: 3; grid-row: 1; align-self: start; width: auto; padding: 0; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) .cc-row-actions { opacity: 1; gap: 0; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) .cc-row-actions .cc-btn--icon { width: 44px; height: 44px; }
  /* 展开详情：卡片底部一整行 */
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td.cc-col-expand { grid-column: 1 / -1; order: 99; width: auto; padding: 0; border-top: 1px solid var(--cc-border); }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) .cc-row-expand { width: 100%; height: 40px; transform: none !important; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) .cc-row-expand[aria-expanded="true"] svg { transform: rotate(90deg); }
  .cc-table--cards .cc-table tr.cc-table-detail:not([hidden]) { margin-top: -4px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); overflow: hidden; }
  .cc-table--cards .cc-table-detail-body { padding: 12px 14px; }
  /* 单元格交互在卡片里：整行可点，至少 44px 高，不再限宽 */
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) :is(.cc-cell-copy, .cc-cell-secret, .cc-cell-pick, .cc-cell-edit) { display: flex; align-items: center; min-height: 40px; margin: 0 0 0 -8px; padding: 4px 8px; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) .cc-cell-note { min-height: 40px; max-width: none; margin: 0 0 0 -8px; padding: 9px 8px; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) .cc-cell-clip { max-width: 100%; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td[data-card="meta"] :is(.cc-cell-copy, .cc-cell-secret, .cc-cell-pick, .cc-cell-edit, .cc-cell-note) { min-height: 32px; padding-top: 2px; padding-bottom: 2px; }
  .cc-table--cards .cc-table tbody > tr:not([data-special]):not([hidden]) > td[data-card="meta"]:has(:is(.cc-cell-copy, .cc-cell-pick, .cc-cell-edit, .cc-cell-note)) { margin-top: -8px; }
}

/* Kanban 看板 */
.cc-kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(264px, 1fr);
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.cc-kanban-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: var(--kanban-h, none);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-r-lg);
  background: var(--cc-surface-2);
}
.cc-kanban-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 6px 12px; }
.cc-kanban-title { font-size: var(--cc-fs-md); font-weight: 600; }
.cc-kanban-count { font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-kanban-col.is-over .cc-kanban-count { color: var(--cc-danger); }
.cc-kanban-head .cc-btn { margin-left: auto; }
.cc-kanban-list { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 64px; padding: 4px 8px 10px; overflow-y: auto; }
.cc-kanban-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-kanban-card:hover { border-color: var(--cc-border-strong); }
.cc-kanban-card:focus-visible { outline: none; border-color: var(--cc-focus-ring); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-kanban-card.is-dragging { display: none; }
.cc-kanban-card.is-dropped { animation: cc-fade-up 0.3s var(--cc-ease); }
.cc-kanban-pri { position: absolute; top: 10px; right: 10px; height: 18px; font-family: var(--cc-font-mono); font-size: 10px; }
.cc-kanban-card-title { padding-right: 30px; font-size: var(--cc-fs-md); font-weight: 500; line-height: 1.45; }
.cc-kanban-card-desc { display: -webkit-box; overflow: hidden; font-size: var(--cc-fs-sm); line-height: 1.5; color: var(--cc-text-3); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-kanban-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-kanban-meta { display: flex; align-items: center; gap: 10px; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-kanban-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.cc-kanban-due.is-soon { color: color-mix(in srgb, var(--cc-warning) 70%, var(--cc-text)); }
.cc-kanban-due.is-overdue { color: var(--cc-danger); }
.cc-kanban-placeholder { flex-shrink: 0; border: 1.5px dashed var(--cc-border-strong); border-radius: 10px; background: var(--cc-surface-3); }
.cc-kanban-empty {
  display: none;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: 1.5px dashed var(--cc-border);
  border-radius: 10px;
  font-size: var(--cc-fs-sm);
  color: var(--cc-text-4);
}
.cc-kanban-list:not(:has(.cc-kanban-card:not(.is-dragging), .cc-kanban-placeholder)) .cc-kanban-empty { display: flex; }
.cc-kanban-ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; transform: rotate(2deg); box-shadow: var(--cc-shadow-lg); }
.cc-kanban.is-dragging,
.cc-kanban.is-dragging * { cursor: grabbing; }

/* ==========================================================================
   19. Media · 图片 / 视频 / 音频
   ========================================================================== */

/* Image 图片
   <figure class="cc-image" style="--ratio:4/3"><img src loading="lazy"><figcaption class="cc-image-cap">…</figcaption></figure>
   加载中显示扫光占位，加载失败显示图标；.cc-image-actions 悬停出现；.cc-image-tag 左上角标签 */
.cc-image { position: relative; display: block; overflow: hidden; margin: 0; aspect-ratio: var(--ratio, auto); border-radius: var(--cc-r-md); background: var(--cc-surface-3); isolation: isolate; }
.cc-image > img, .cc-image > video { display: block; width: 100%; height: 100%; object-fit: var(--fit, cover); transition: opacity 0.35s var(--cc-ease), transform 0.5s var(--cc-ease); }
.cc-image.is-loading > img { opacity: 0; }
.cc-image.is-loading::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--cc-surface-3) 25%, var(--cc-surface-2) 37%, var(--cc-surface-3) 63%);
  background-size: 400% 100%; animation: cc-shimmer 1.4s ease infinite;
}
.cc-image.is-error::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; background: var(--cc-text-4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cc-image.is-error > img { opacity: 0; }
.cc-image--hover:hover > img { transform: scale(1.04); }
.cc-image-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62)); color: #fff; font-size: var(--cc-fs-sm); line-height: 1.5;
}
.cc-image-cap b { display: block; font-size: var(--cc-fs-md); font-weight: 600; }
.cc-image-cap small { opacity: 0.72; }
.cc-image-tag { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: rgba(10, 10, 10, 0.62); color: #fff; font-family: var(--cc-font-mono); font-size: 11px; backdrop-filter: blur(6px); }
.cc-image-tag svg { width: 12px; height: 12px; }
.cc-image-actions { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; gap: 4px; opacity: 0; transform: translateY(-2px); transition: opacity var(--cc-dur), transform var(--cc-dur) var(--cc-ease); }
.cc-image:hover .cc-image-actions, .cc-image:focus-within .cc-image-actions { opacity: 1; transform: none; }
@media (hover: none) { .cc-image-actions { opacity: 1; transform: none; } }
.cc-image-actions .cc-btn { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.9); color: #0a0a0a; backdrop-filter: blur(6px); }
.cc-image-actions .cc-btn:hover { background: #fff; color: #0a0a0a; }
.cc-image-actions .cc-btn svg { width: 14px; height: 14px; }
.cc-image.is-selected { box-shadow: 0 0 0 2px var(--cc-bg), 0 0 0 4px var(--cc-text); }
.cc-image-check { position: absolute; top: 8px; left: 8px; z-index: 3; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid rgba(255, 255, 255, 0.9); border-radius: 50%; background: rgba(0, 0, 0, 0.25); color: transparent; }
.cc-image.is-selected .cc-image-check { border-color: var(--cc-accent); background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-image-check svg { width: 13px; height: 13px; }
/* 图片网格 / 瀑布流 */
.cc-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min, 160px), 1fr)); gap: var(--gap, 10px); }
.cc-masonry { columns: var(--cols, 4) var(--min, 180px); column-gap: var(--gap, 10px); }
.cc-masonry > * { break-inside: avoid; margin-bottom: var(--gap, 10px); }
/* 缩略图条 */
.cc-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.cc-thumbs::-webkit-scrollbar { display: none; }
.cc-thumbs > button { flex: none; width: 64px; height: 48px; overflow: hidden; padding: 0; border: 0; border-radius: 6px; background: var(--cc-surface-3); cursor: pointer; opacity: 0.55; transition: opacity var(--cc-dur), box-shadow var(--cc-dur); }
.cc-thumbs > button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-thumbs > button:hover { opacity: 0.85; }
.cc-thumbs > button.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--cc-bg), 0 0 0 3.5px var(--cc-text); }
/* 前后对比：<div class="cc-compare" data-cc-compare><img 前><img 后></div> */
.cc-compare { --pos: 50%; position: relative; overflow: hidden; border-radius: var(--cc-r-md); background: var(--cc-surface-3); user-select: none; touch-action: pan-y; cursor: ew-resize; }
.cc-compare > img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cc-compare > img:nth-of-type(2) { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.cc-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); pointer-events: none; }
.cc-compare-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.cc-compare-label { position: absolute; bottom: 10px; z-index: 2; padding: 2px 8px; border-radius: 5px; background: rgba(10, 10, 10, 0.6); color: #fff; font-size: 11px; pointer-events: none; }
.cc-compare-label:first-of-type { left: 10px; }
.cc-compare-label:last-of-type { right: 10px; }
.cc-compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* Video 视频
   <div class="cc-video" data-cc-video><video src poster playsinline></video></div>
   JS 生成控制条：播放 / 进度（含缓冲、悬停时间）/ 时间 / 音量 / 倍速 / 画中画 / 全屏；空格、← →、M、F 快捷键 */
.cc-video { position: relative; overflow: hidden; border-radius: var(--cc-r-lg); background: #000; color: #fff; aspect-ratio: var(--ratio, 16 / 9); isolation: isolate; outline: none; }
.cc-video:focus-visible { box-shadow: 0 0 0 2px var(--cc-bg), 0 0 0 3.5px var(--cc-focus-ring); }
.cc-video > video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cc-video:fullscreen { border-radius: 0; }
.cc-video-big {
  position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #0a0a0a; cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); transition: transform 0.2s var(--cc-ease), opacity 0.2s;
}
.cc-video-big svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.cc-video-big:hover { transform: scale(1.06); }
.cc-video.is-playing .cc-video-big { opacity: 0; transform: scale(0.8); pointer-events: none; }
.cc-video-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 4px;
  padding: 26px 10px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  opacity: 1; transition: opacity 0.25s;
}
.cc-video.is-playing.is-idle .cc-video-bar { opacity: 0; }
.cc-video.is-playing.is-idle { cursor: none; }
.cc-video-bar button {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 7px;
  background: none; color: #fff; font: 500 12px/1 var(--cc-font-mono); cursor: pointer;
}
.cc-video-bar button:hover { background: rgba(255, 255, 255, 0.16); }
.cc-video-bar button svg { width: 17px; height: 17px; }
.cc-video-time { margin: 0 6px; font-family: var(--cc-font-mono); font-size: 11.5px; opacity: 0.85; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-video-track { position: absolute; left: 12px; right: 12px; top: 10px; height: 14px; display: flex; align-items: center; cursor: pointer; }
.cc-video-rail { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); transition: height 0.15s; }
.cc-video-track:hover .cc-video-rail { height: 5px; }
.cc-video-rail > i, .cc-video-rail > b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.cc-video-rail > i { width: var(--buf, 0%); background: rgba(255, 255, 255, 0.35); }
.cc-video-rail > b { width: var(--val, 0%); background: #fff; }
.cc-video-rail > b::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.15s; }
.cc-video-track:hover .cc-video-rail > b::after { transform: none; }
.cc-video-tip { position: absolute; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.8); font-family: var(--cc-font-mono); font-size: 11px; transform: translateX(-50%); opacity: 0; pointer-events: none; white-space: nowrap; }
.cc-video-tip:has(.cc-video-thumb) { padding: 3px 3px 4px; border-radius: 6px; }
.cc-video-thumb { width: 160px; min-height: 90px; border-radius: 4px; background: #000 center / cover no-repeat; overflow: hidden; }
.cc-video-thumb canvas { display: block; width: 100%; height: auto; }
.cc-video-tip-title { max-width: 160px; overflow: hidden; text-overflow: ellipsis; font-family: var(--cc-font); font-weight: 500; }
.cc-video-tip-title[hidden] { display: none; }
/* 章节：进度条按章节切段 */
.cc-video-chap { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, 0.7); z-index: 1; pointer-events: none; }
.cc-video-track:hover .cc-video-tip { opacity: 1; }
.cc-video-vol { display: flex; align-items: center; }
.cc-video-vol input { width: 0; opacity: 0; accent-color: #fff; transition: width 0.2s, opacity 0.2s; }
.cc-video-vol:hover input, .cc-video-vol:focus-within input { width: 68px; opacity: 1; margin-right: 4px; }
.cc-video-spacer { flex: 1; }
.cc-video-speed { position: relative; }
.cc-video-speed .cc-menu { top: auto; bottom: calc(100% + 6px); left: 50%; min-width: 92px; margin-left: -46px; background: rgba(24, 24, 24, 0.94); border-color: rgba(255, 255, 255, 0.1); color: #fff; }
.cc-video-speed .cc-menu-item { color: #fff; justify-content: center; font-family: var(--cc-font-mono); font-size: 12px; }
.cc-video-speed .cc-menu-item:hover { background: rgba(255, 255, 255, 0.12); }
.cc-video-speed .cc-menu-item.is-checked::after { display: none; }
.cc-video-speed .cc-menu-item.is-checked { font-weight: 700; background: rgba(255, 255, 255, 0.12); }
.cc-video-flash { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; }
.cc-video-flash.is-on { animation: cc-video-flash 0.5s ease-out; }
.cc-video-flash svg { width: 24px; height: 24px; }
@keyframes cc-video-flash { from { opacity: 1; transform: scale(0.8); } to { opacity: 0; transform: scale(1.3); } }
.cc-video--portrait { --ratio: 9 / 16; }
/* 视频卡片：封面 + 时长 + 已看进度 */
.cc-video-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: inherit; text-decoration: none; cursor: pointer; }
.cc-video-card .cc-image { aspect-ratio: var(--ratio, 16 / 9); }
.cc-video-card .cc-image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0); transition: background var(--cc-dur); }
.cc-video-card:hover .cc-image::after { background: rgba(0, 0, 0, 0.15); }
.cc-video-dur { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 1px 6px; border-radius: 5px; background: rgba(10, 10, 10, 0.75); color: #fff; font-family: var(--cc-font-mono); font-size: 11px; }
.cc-video-watched { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: rgba(255, 255, 255, 0.3); }
.cc-video-watched::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--val, 0%); background: #fff; }
.cc-video-card-play { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #0a0a0a; opacity: 0; transform: scale(0.85); transition: opacity var(--cc-dur), transform var(--cc-dur) var(--cc-ease); }
.cc-video-card-play svg { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }
.cc-video-card:hover .cc-video-card-play { opacity: 1; transform: none; }
.cc-video-card-title { display: -webkit-box; overflow: hidden; font-size: var(--cc-fs-md); font-weight: 600; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-video-card-meta { font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
/* 剪辑时间线：胶片帧 + 可拖动的入点 / 出点（data-cc-trim） */
.cc-trim { --in: 10%; --out: 75%; position: relative; height: 56px; border-radius: 8px; background: var(--cc-surface-3); user-select: none; touch-action: none; }
.cc-trim-frames { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: inherit; }
.cc-trim-frames > * { flex: 1; min-width: 0; height: 100%; object-fit: cover; border-right: 1px solid rgba(0, 0, 0, 0.25); }
.cc-trim::before, .cc-trim::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; background: color-mix(in srgb, var(--cc-bg) 70%, transparent); pointer-events: none; }
.cc-trim::before { left: 0; width: var(--in); border-radius: 8px 0 0 8px; }
.cc-trim::after { right: 0; width: calc(100% - var(--out)); border-radius: 0 8px 8px 0; }
.cc-trim-range { position: absolute; top: 0; bottom: 0; left: var(--in); right: calc(100% - var(--out)); z-index: 2; border: 2.5px solid var(--cc-accent); border-left-width: 12px; border-right-width: 12px; border-radius: 8px; cursor: grab; }
.cc-trim-range::before, .cc-trim-range::after { content: ""; position: absolute; top: 50%; width: 2px; height: 16px; margin-top: -8px; border-radius: 1px; background: var(--cc-on-accent); }
.cc-trim-range::before { left: -7px; }
.cc-trim-range::after { right: -7px; }
.cc-trim-head { position: absolute; top: -6px; bottom: -6px; left: var(--head, 30%); z-index: 3; width: 2px; margin-left: -1px; background: var(--cc-danger); border-radius: 1px; pointer-events: none; }
.cc-trim-head::before { content: ""; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border-radius: 2px 2px 50% 50%; background: var(--cc-danger); }
.cc-trim-meta { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--cc-font-mono); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }

/* Audio 音频播放器：<div class="cc-audio" data-cc-audio data-src="a.m4a" data-title="标题"></div> */
.cc-audio { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px 10px 10px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-audio-play {
  display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--cc-accent); color: var(--cc-on-accent); cursor: pointer; transition: transform 0.15s var(--cc-ease);
}
.cc-audio-play:active { transform: scale(0.94); }
.cc-audio-play svg { width: 16px; height: 16px; fill: currentColor; }
.cc-audio-play .i-pause { display: none; }
.cc-audio.is-playing .cc-audio-play .i-play { display: none; }
.cc-audio.is-playing .cc-audio-play .i-pause { display: block; }
.cc-audio-main { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.cc-audio-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--cc-fs-md); font-weight: 600; }
.cc-audio-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-audio-title small { margin-left: auto; flex-shrink: 0; font-family: var(--cc-font-mono); font-size: 11px; font-weight: 400; color: var(--cc-text-3); font-variant-numeric: tabular-nums; }
/* 波形：竖条，已播放部分涂黑；--val 是播放进度 */
.cc-wavebar { --val: 0%; position: relative; display: flex; align-items: center; gap: 2px; height: 32px; cursor: pointer; touch-action: none; }
.cc-wavebar > i { flex: 1; min-width: 1.5px; height: calc(var(--h, 0.5) * 100%); border-radius: 2px; background: var(--cc-viz-4); }
.cc-wavebar::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cc-wavebar > i.is-on { background: var(--cc-text); }
.cc-wavebar:hover > i.is-hover { background: var(--cc-viz-3); }
.cc-audio--compact { padding: 6px 12px 6px 6px; border-radius: var(--cc-r-full); }
.cc-audio--compact .cc-audio-play { width: 30px; height: 30px; }
.cc-audio--compact .cc-audio-play svg { width: 12px; height: 12px; }
.cc-audio--compact .cc-wavebar { flex: 1; height: 22px; }
.cc-audio--compact .cc-audio-title > span { display: none; }
.cc-audio--compact .cc-audio-title small { order: 2; margin-left: 0; }
.cc-audio--compact .cc-audio-main { flex-direction: row; align-items: center; gap: 10px; }
.cc-audio--compact .cc-audio-title { flex: none; order: 2; }
.cc-audio.is-generating .cc-wavebar > i { animation: cc-wave-gen 1.1s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -40ms); background: var(--cc-viz-4); }
@keyframes cc-wave-gen { 50% { transform: scaleY(0.35); } }

/* 音乐 / 音频作品卡：封面 + 标题 + 风格标签 + 时长 */
.cc-track { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border-radius: var(--cc-r-lg); cursor: pointer; transition: background var(--cc-dur); }
.cc-track:hover, .cc-track.is-current { background: var(--cc-surface-3); }
.cc-track-cover { position: relative; flex-shrink: 0; width: 52px; height: 52px; overflow: hidden; border-radius: 10px; background: var(--cc-surface-3); }
.cc-track-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-track-cover::after { content: ""; position: absolute; inset: 0; display: grid; background: rgba(0, 0, 0, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 18px no-repeat; opacity: 0; transition: opacity var(--cc-dur); }
.cc-track:hover .cc-track-cover::after { opacity: 1; }
.cc-track.is-playing .cc-track-cover::after { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E"); }
.cc-track-main { flex: 1; min-width: 0; }
.cc-track-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cc-fs-md); font-weight: 600; }
.cc-track-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-track-dur { flex-shrink: 0; font-family: var(--cc-font-mono); font-size: 11.5px; color: var(--cc-text-3); }
/* 正在播放的小均衡器 */
.cc-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.cc-eq i { width: 2.5px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: cc-eq 0.9s ease-in-out infinite; }
.cc-eq i:nth-child(2) { animation-delay: -0.3s; }
.cc-eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes cc-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .cc-audio.is-generating .cc-wavebar > i, .cc-eq i { animation: none; }
}

/* ==========================================================================
   20. AI creation · AI 创作：绘画 / 视频 / 编程 / 配音 / 工作流画布
   ========================================================================== */
/* 画幅比例选择：<div class="cc-ratio" data-cc-single><button style="--rw:16;--rh:9" data-value="16:9">16:9</button>…</div> */
.cc-ratio { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.cc-ratio > button {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 64px; padding: 8px 4px 7px;
  border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface); color: var(--cc-text-2);
  font: 500 11px/1 var(--cc-font-mono); cursor: pointer; transition: border-color var(--cc-dur), background var(--cc-dur), color var(--cc-dur);
}
.cc-ratio > button::before {
  content: ""; display: block; height: min(26px, calc(26px * var(--rh) / var(--rw))); aspect-ratio: var(--rw) / var(--rh); max-width: 34px;
  border: 1.5px solid currentColor; border-radius: 3px;
}
.cc-ratio > button:hover { border-color: var(--cc-border-strong); color: var(--cc-text); }
.cc-ratio > button.is-active { border-color: var(--cc-text); background: var(--cc-surface-3); color: var(--cc-text); box-shadow: inset 0 0 0 0.5px var(--cc-text); }
/* 风格预设：缩略图卡，可单选 */
.cc-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min, 84px), 1fr)); gap: 8px; }
.cc-style {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--cc-text-2);
  font-size: var(--cc-fs-sm); text-align: center; cursor: pointer;
}
.cc-style img, .cc-style .cc-style-ph { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--cc-r-md); background: var(--cc-surface-3); transition: box-shadow var(--cc-dur), transform var(--cc-dur) var(--cc-ease); }
.cc-style:hover img { transform: translateY(-1px); }
.cc-style.is-active { color: var(--cc-text); font-weight: 600; }
.cc-style.is-active img, .cc-style.is-active .cc-style-ph { box-shadow: 0 0 0 2px var(--cc-bg), 0 0 0 4px var(--cc-text); }
/* 生成任务的参数标签：模型 · 比例 · 步数 · 种子 */
.cc-gen-params { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-gen-params > span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--cc-surface-3); font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-text-2); white-space: nowrap; }
.cc-gen-params svg { width: 12px; height: 12px; }
/* 生成结果网格：每张卡有 等待 / 生成中 / 完成 / 失败 四种状态
   <div class="cc-gen-item is-running" style="--val:42%"><div class="cc-gen-stage">去噪 18/30</div></div> */
.cc-gen-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--gap, 8px); }
.cc-gen-item { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 1); border-radius: var(--cc-r-md); background: var(--cc-surface-3); isolation: isolate; }
.cc-gen-item > img, .cc-gen-item > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-gen-item.is-done > img, .cc-gen-item.is-done > video { animation: cc-gen-reveal 0.9s var(--cc-ease); }
@keyframes cc-gen-reveal { from { opacity: 0; filter: blur(18px) saturate(0.6); transform: scale(1.04); } }
.cc-gen-item.is-running::before, .cc-gen-item.is-queued::before {
  content: ""; position: absolute; inset: -20%; z-index: 0;
  background:
    radial-gradient(40% 40% at 30% 30%, color-mix(in srgb, var(--cc-text) 14%, transparent), transparent 70%),
    radial-gradient(35% 35% at 70% 65%, color-mix(in srgb, var(--cc-text) 10%, transparent), transparent 70%),
    radial-gradient(30% 30% at 60% 20%, color-mix(in srgb, var(--cc-text) 8%, transparent), transparent 70%);
  filter: blur(8px); animation: cc-gen-drift 6s ease-in-out infinite alternate;
}
.cc-gen-item.is-queued::before { animation: none; opacity: 0.5; }
@keyframes cc-gen-drift { to { transform: rotate(40deg) scale(1.15); } }
.cc-gen-item.is-running::after {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cc-gen-noise 0.6s steps(4) infinite;
}
@keyframes cc-gen-noise { 25% { background-position: 30px 10px; } 50% { background-position: -20px 40px; } 75% { background-position: 40px -30px; } }
.cc-gen-stage {
  position: absolute; inset: auto 10px 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px;
  font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-text-2);
}
.cc-gen-stage::before { content: ""; order: 2; height: 3px; border-radius: 3px; background: linear-gradient(var(--cc-text), var(--cc-text)) 0 0 / var(--val, 0%) 100% no-repeat, color-mix(in srgb, var(--cc-text) 14%, transparent); transition: background-size 0.4s var(--cc-ease); }
.cc-gen-item.is-queued .cc-gen-stage::before { background: color-mix(in srgb, var(--cc-text) 14%, transparent); }
.cc-gen-pct { position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); font-size: 26px; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--cc-text); }
.cc-gen-pct small { font-size: 0.5em; color: var(--cc-text-3); margin-left: 1px; }
.cc-gen-item.is-done .cc-gen-stage, .cc-gen-item.is-done .cc-gen-pct { display: none; }
.cc-gen-item.is-failed { display: grid; place-items: center; align-content: center; gap: 6px; padding: 12px; color: var(--cc-text-3); font-size: var(--cc-fs-sm); text-align: center; border: 1px dashed var(--cc-border-strong); background: var(--cc-surface-2); }
.cc-gen-item.is-failed svg { width: 22px; height: 22px; color: var(--cc-danger); }
.cc-gen-item .cc-image-actions { z-index: 4; }
.cc-gen-item:not(.is-done) .cc-image-actions { display: none; }
.cc-gen-item:hover .cc-image-actions, .cc-gen-item:focus-within .cc-image-actions { opacity: 1; transform: none; }
.cc-gen-item.is-done { cursor: zoom-in; }
.cc-gen-item.is-selected { box-shadow: 0 0 0 2px var(--cc-bg), 0 0 0 4px var(--cc-text); }
/* 生成结果下方的快捷操作：放大 · 变体 · 重绘 · 下载 */
.cc-gen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* 生成任务卡（视频 / 批量生成的队列）：缩略图 + 提示词 + 参数 + 进度 */
.cc-gen-task { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-gen-task-thumb { position: relative; width: 112px; overflow: hidden; aspect-ratio: var(--ratio, 16 / 9); border-radius: var(--cc-r-md); background: var(--cc-surface-3); }
.cc-gen-task-thumb > img, .cc-gen-task-thumb > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-gen-task-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-gen-task-prompt { display: -webkit-box; overflow: hidden; font-size: var(--cc-fs-md); line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-gen-task-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-gen-task-foot .cc-progress { flex: 1; }
.cc-gen-task-foot > span:first-child:not(.cc-status) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-gen-task-foot .cc-num { min-width: 34px; text-align: right; color: var(--cc-text-2); }
/* 多阶段生成步骤：理解提示词 → 分镜 → 生成关键帧 → 插帧 → 超分 */
.cc-gen-steps { display: flex; gap: 4px; }
.cc-gen-steps > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--cc-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-gen-steps > span::before { content: ""; height: 3px; border-radius: 3px; background: var(--cc-surface-3); }
.cc-gen-steps > span.is-done { color: var(--cc-text-2); }
.cc-gen-steps > span.is-done::before { background: var(--cc-accent); }
.cc-gen-steps > span.is-active { color: var(--cc-text); font-weight: 500; }
.cc-gen-steps > span.is-active::before { background: linear-gradient(90deg, var(--cc-accent) 40%, var(--cc-surface-3) 40%); background-size: 250% 100%; animation: cc-gen-step 1.4s linear infinite; }
@keyframes cc-gen-step { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* 提示词输入：大文本框 + 底部工具行 + 生成按钮（消耗点数） */
.cc-gen-prompt { display: flex; flex-direction: column; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); transition: border-color var(--cc-dur), box-shadow var(--cc-dur); }
.cc-gen-prompt:focus-within { border-color: var(--cc-border-strong); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-gen-prompt textarea { min-height: 88px; padding: 12px 14px 4px; border: 0; background: none; color: var(--cc-text); font: inherit; font-size: var(--cc-fs-base); line-height: 1.65; resize: none; outline: none; }
.cc-gen-prompt textarea::placeholder { color: var(--cc-text-4); }
.cc-gen-prompt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px 8px; }
.cc-gen-prompt-foot .cc-spacer { flex: 1; }
.cc-gen-cost { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--cc-on-accent) 25%, transparent); font-family: var(--cc-font-mono); font-size: 11px; opacity: 0.75; }
.cc-gen-cost svg { width: 12px; height: 12px; }
/* 参考图槽位 */
.cc-ref-slot { position: relative; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-r-md); background: var(--cc-surface-2); color: var(--cc-text-3); cursor: pointer; transition: border-color var(--cc-dur), color var(--cc-dur); }
.cc-ref-slot:hover { border-color: var(--cc-text-3); color: var(--cc-text); }
.cc-ref-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-ref-slot > .cc-ref-x { position: absolute; top: 3px; right: 3px; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; }
.cc-ref-slot > .cc-ref-x svg { width: 11px; height: 11px; }
.cc-ref-slot small { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 10px; text-align: center; }

/* AI 编程工作区（IDE）：活动栏 · 文件树 · 编辑器（标签 + 代码 + 行内建议）· AI 面板 · 终端 · 状态栏
   <div class="cc-ide"><nav class="cc-ide-activity">…</nav><aside class="cc-ide-side">…</aside><section class="cc-ide-editor">…</section><aside class="cc-ide-ai">…</aside><footer class="cc-ide-status">…</footer></div> */
.cc-ide {
  display: grid; grid-template-columns: 48px 220px minmax(0, 1fr) var(--ai-w, 340px); grid-template-rows: minmax(0, 1fr) 24px;
  height: var(--h, 560px); overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface);
  font-size: var(--cc-fs-md);
}
.cc-ide-activity { grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-right: 1px solid var(--cc-border); background: var(--cc-surface-2); }
.cc-ide-activity > button { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--cc-text-3); cursor: pointer; }
.cc-ide-activity > button:hover { color: var(--cc-text); background: var(--cc-surface-3); }
.cc-ide-activity > button.is-active { color: var(--cc-text); }
.cc-ide-activity > button.is-active::before { content: ""; position: absolute; left: -7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--cc-text); }
.cc-ide-activity > button svg { width: 18px; height: 18px; }
.cc-ide-side { grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--cc-border); background: var(--cc-surface-2); }
.cc-ide-side-head { display: flex; align-items: center; gap: 6px; height: 36px; flex-shrink: 0; padding: 0 8px 0 12px; font-family: var(--cc-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-text-3); }
.cc-ide-side-head .cc-btn { margin-left: auto; }
.cc-ide-tree { flex: 1; overflow: auto; padding: 0 6px 8px; font-size: 12.5px; }
.cc-ide-tree button { display: flex; align-items: center; gap: 6px; width: 100%; height: 26px; padding: 0 6px 0 calc(6px + var(--d, 0) * 14px); border: 0; border-radius: 5px; background: none; color: var(--cc-text-2); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.cc-ide-tree button:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-ide-tree button.is-active { background: var(--cc-surface-3); color: var(--cc-text); font-weight: 500; }
.cc-ide-tree button svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--cc-text-3); }
.cc-ide-tree button em { margin-left: auto; font-style: normal; font-family: var(--cc-font-mono); font-size: 10.5px; font-weight: 600; }
.cc-ide-tree em.is-m { color: var(--cc-warning); }
.cc-ide-tree em.is-a { color: var(--cc-success); }
.cc-ide-tree em.is-d { color: var(--cc-danger); }
.cc-ide-editor { grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cc-ide-tabs { display: flex; flex-shrink: 0; height: 36px; overflow-x: auto; border-bottom: 1px solid var(--cc-border); background: var(--cc-surface-2); scrollbar-width: none; }
.cc-ide-tabs > button { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-right: 1px solid var(--cc-border); background: none; color: var(--cc-text-3); font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.cc-ide-tabs > button.is-active { background: var(--cc-surface); color: var(--cc-text); }
.cc-ide-tabs > button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--cc-surface); }
.cc-ide-tabs > button.is-active::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--cc-text); }
.cc-ide-tabs > button svg { width: 13px; height: 13px; }
.cc-ide-tabs > button i { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-text-3); }
.cc-ide-crumb { display: flex; align-items: center; gap: 4px; height: 28px; flex-shrink: 0; padding: 0 14px; font-size: 11.5px; color: var(--cc-text-3); }
.cc-ide-crumb svg { width: 12px; height: 12px; }
.cc-ide-code { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 4px 0 24px; font-family: var(--cc-font-mono); font-size: 12.5px; line-height: 1.75; counter-reset: ln; }
.cc-ide-code > div { display: flex; min-width: max-content; padding-right: 16px; white-space: pre; }
.cc-ide-code > div::before { counter-increment: ln; content: counter(ln); flex: none; width: 44px; padding-right: 14px; text-align: right; color: var(--cc-text-4); user-select: none; }
.cc-ide-code > div.is-cur { background: var(--cc-surface-2); }
.cc-ide-code > div.is-cur::before { color: var(--cc-text-2); }
.cc-ide-code > div.is-add { background: var(--cc-success-bg); }
.cc-ide-code > div.is-add::before { content: "+"; color: var(--cc-success); }
.cc-ide-code > div.is-del { background: var(--cc-danger-bg); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cc-danger) 50%, transparent); color: var(--cc-text-3); }
.cc-ide-code > div.is-del::before { content: "−"; color: var(--cc-danger); }
.cc-ide-code .k { font-weight: 650; }
.cc-ide-code .s { color: var(--cc-text-2); }
.cc-ide-code .c { color: var(--cc-text-3); font-style: italic; }
.cc-ide-code .ghost { color: var(--cc-text-4); }
.cc-ide-cursor { display: inline-block; width: 2px; height: 1.2em; margin: 0 -1px; vertical-align: -0.2em; background: var(--cc-text); animation: cc-blink 1s step-end infinite; }
/* 行内 AI 建议的接受 / 拒绝条 */
.cc-inline-ai { display: inline-flex; align-items: center; gap: 2px; margin-left: 58px; padding: 3px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface); box-shadow: var(--cc-shadow-md); font-family: var(--cc-font); font-size: 11.5px; white-space: nowrap; }
.cc-inline-ai .cc-btn { height: 22px; padding: 0 7px; font-size: 11.5px; }
.cc-inline-ai .cc-kbd { font-size: 10px; height: 16px; min-width: 16px; margin-left: 3px; }
.cc-ide-panel { display: flex; flex-direction: column; flex-shrink: 0; height: var(--term-h, 150px); border-top: 1px solid var(--cc-border); }
.cc-ide-panel .cc-tabs { padding: 0 8px; }
.cc-ide-panel .cc-terminal { flex: 1; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.cc-ide-ai { grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--cc-border); }
.cc-ide-ai-head { display: flex; align-items: center; gap: 8px; height: 36px; flex-shrink: 0; padding: 0 8px 0 12px; border-bottom: 1px solid var(--cc-border); font-size: 12.5px; font-weight: 600; }
.cc-ide-ai-head .cc-segmented { margin-left: auto; }
.cc-ide-ai-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 12px; }
.cc-ide-ai-foot { flex-shrink: 0; padding: 8px; border-top: 1px solid var(--cc-border); }
.cc-ide-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 10px; border-top: 1px solid var(--cc-border); background: var(--cc-surface-2); font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-text-3); white-space: nowrap; overflow: hidden; }
.cc-ide-status > span { display: inline-flex; align-items: center; gap: 5px; }
.cc-ide-status svg { width: 12px; height: 12px; }
.cc-ide-status .cc-spacer { flex: 1; }
.cc-ide--no-ai { grid-template-columns: 48px 220px minmax(0, 1fr); }
.cc-ide--no-ai .cc-ide-ai { display: none; }
@media (max-width: 1100px) {
  .cc-ide { grid-template-columns: 48px 200px minmax(0, 1fr); }
  .cc-ide .cc-ide-ai { display: none; }
}
@media (max-width: 720px) {
  .cc-ide { grid-template-columns: minmax(0, 1fr); }
  .cc-ide .cc-ide-activity, .cc-ide .cc-ide-side { display: none; }
}

/* 减少动态：生成中的动画全部停掉 */
@media (prefers-reduced-motion: reduce) {
  .cc-gen-item.is-running::before, .cc-gen-item.is-running::after, .cc-gen-steps > span.is-active::before { animation: none; }
  .cc-gen-item.is-done > img { animation: none; }
}

/* AI 配音：声音卡 / 配音脚本 */
/* 声音卡：头像 / 名称 / 标签 / 试听 */
.cc-voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min, 200px), 1fr)); gap: 8px; }
.cc-voice {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg);
  background: var(--cc-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--cc-dur), box-shadow var(--cc-dur);
}
.cc-voice:hover { border-color: var(--cc-border-strong); }
.cc-voice.is-active { border-color: var(--cc-text); box-shadow: inset 0 0 0 0.5px var(--cc-text); }
.cc-voice-avatar { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--cc-surface-3); font-weight: 600; font-size: 14px; }
.cc-voice-main { flex: 1; min-width: 0; }
.cc-voice-main b { display: block; font-size: var(--cc-fs-md); font-weight: 600; }
.cc-voice-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-voice-play { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 1px solid var(--cc-border); border-radius: 50%; background: var(--cc-surface); color: var(--cc-text); cursor: pointer; }
.cc-voice-play svg { width: 11px; height: 11px; fill: currentColor; margin-left: 1px; }
.cc-voice.is-previewing .cc-voice-play { background: var(--cc-accent); border-color: var(--cc-accent); color: var(--cc-on-accent); }
.cc-voice.is-previewing .cc-voice-avatar::after { content: ""; position: absolute; inset: -3px; border: 1.5px solid var(--cc-text); border-radius: 50%; animation: cc-voice-pulse 1.2s ease-out infinite; }
@keyframes cc-voice-pulse { from { opacity: 1; transform: scale(0.95); } to { opacity: 0; transform: scale(1.25); } }

/* 配音脚本：一行一段，左侧说话人，右侧文字（可编辑） */
.cc-script { display: flex; flex-direction: column; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); overflow: hidden; }
.cc-script-line { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 12px; }
.cc-script-line + .cc-script-line { border-top: 1px solid var(--cc-border); }
.cc-script-line.is-current { background: var(--cc-surface-2); }
.cc-script-who { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 3px; border-radius: var(--cc-r-full); background: var(--cc-surface-3); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.cc-script-who i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cc-accent); color: var(--cc-on-accent); font-style: normal; font-size: 10px; }
.cc-script-text { min-height: 26px; padding: 3px 0; font-size: var(--cc-fs-base); line-height: 1.6; outline: none; }
.cc-script-text:focus { box-shadow: 0 1px 0 var(--cc-text); }
.cc-script-meta { padding-top: 4px; font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-text-3); white-space: nowrap; }
.cc-script-text .cc-pause { display: inline-flex; align-items: center; height: 18px; margin: 0 2px; padding: 0 5px; border-radius: 4px; background: var(--cc-surface-3); font-family: var(--cc-font-mono); font-size: 10.5px; color: var(--cc-text-3); vertical-align: 1px; }
@media (max-width: 640px) { .cc-script-line { grid-template-columns: minmax(0, 1fr); gap: 4px; } .cc-script-meta { display: none; } }

/* Flow 工作流画布：CC.flow(el, { nodes, edges }) */
.cc-flow {
  position: relative; overflow: hidden; height: var(--h, 460px); border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg);
  background-color: var(--cc-surface-2);
  background-image: radial-gradient(color-mix(in srgb, var(--cc-text) 14%, transparent) 1px, transparent 1px);
  background-size: calc(20px * var(--z, 1)) calc(20px * var(--z, 1)); background-position: var(--px, 0) var(--py, 0);
  cursor: grab; touch-action: none; user-select: none;
}
.cc-flow.is-panning { cursor: grabbing; }
.cc-flow-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: translate(var(--px, 0), var(--py, 0)) scale(var(--z, 1)); }
.cc-flow-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cc-flow-edges path { fill: none; stroke: var(--cc-border-strong); stroke-width: 1.6; }
.cc-flow-edges path.is-active { stroke: var(--cc-text); stroke-width: 1.8; stroke-dasharray: 6 5; animation: cc-flow-dash 0.8s linear infinite; }
.cc-flow-edges path.is-done { stroke: var(--cc-text); }
.cc-flow-edges path.is-draft { stroke: var(--cc-text); stroke-dasharray: 4 4; }
@keyframes cc-flow-dash { to { stroke-dashoffset: -22; } }
.cc-flow-node {
  position: absolute; width: var(--w, 220px); border: 1px solid var(--cc-border); border-radius: 12px; background: var(--cc-surface);
  box-shadow: var(--cc-shadow-sm); cursor: grab; transition: box-shadow var(--cc-dur), border-color var(--cc-dur);
}
.cc-flow-node:hover { border-color: var(--cc-border-strong); }
.cc-flow-node.is-selected { border-color: var(--cc-text); box-shadow: 0 0 0 1px var(--cc-text), var(--cc-shadow-md); }
.cc-flow-node.is-dragging { cursor: grabbing; box-shadow: var(--cc-shadow-lg); z-index: 2; }
.cc-flow-node-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--cc-border); font-size: 12.5px; font-weight: 600; }
.cc-flow-node-icon { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: var(--cc-surface-3); color: var(--cc-text); }
.cc-flow-node-icon svg { width: 13px; height: 13px; }
.cc-flow-node[data-kind="trigger"] .cc-flow-node-icon, .cc-flow-node[data-kind="output"] .cc-flow-node-icon { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-flow-node-head small { margin-left: auto; font-family: var(--cc-font-mono); font-size: 10.5px; font-weight: 400; color: var(--cc-text-3); }
.cc-flow-node-body { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; font-size: 12px; color: var(--cc-text-2); line-height: 1.5; }
.cc-flow-node-body .cc-flow-kv { display: flex; gap: 6px; }
.cc-flow-node-body .cc-flow-kv span { color: var(--cc-text-3); }
.cc-flow-node-body .cc-flow-kv b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--cc-text); font-family: var(--cc-font-mono); font-size: 11.5px; }
.cc-flow-port { position: absolute; top: 19px; width: 11px; height: 11px; margin-top: -5.5px; border: 1.5px solid var(--cc-border-strong); border-radius: 50%; background: var(--cc-surface); cursor: crosshair; transition: transform 0.12s, border-color 0.12s; }
.cc-flow-port.is-in { left: -6px; }
.cc-flow-port.is-out { right: -6px; }
.cc-flow-port:hover, .cc-flow.is-linking .cc-flow-port.is-in { border-color: var(--cc-text); transform: scale(1.25); }
/* 节点运行状态：右上角状态点 */
.cc-flow-node[data-status]::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border: 2px solid var(--cc-surface-2); border-radius: 50%; }
.cc-flow-node[data-status="running"]::after { background: var(--cc-info); animation: cc-voice-pulse 1.2s ease-out infinite; box-shadow: 0 0 0 2px var(--cc-info-bg); }
.cc-flow-node[data-status="running"] { border-color: var(--cc-text); }
.cc-flow-node[data-status="done"]::after { background: var(--cc-success); }
.cc-flow-node[data-status="error"]::after { background: var(--cc-danger); }
.cc-flow-node[data-status="error"] { border-color: var(--cc-danger); }
.cc-flow-tools { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-surface); box-shadow: var(--cc-shadow-sm); }
.cc-flow-tools button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--cc-text-2); cursor: pointer; font: 500 11px var(--cc-font-mono); }
.cc-flow-tools button:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-flow-tools button svg { width: 15px; height: 15px; }
.cc-flow-tools span { display: grid; place-items: center; min-width: 40px; font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-text-3); }
.cc-flow-mini { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 150px; height: 96px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface); overflow: hidden; }
.cc-flow-mini i { position: absolute; border-radius: 2px; background: var(--cc-viz-4); }
.cc-flow-mini b { position: absolute; border: 1.5px solid var(--cc-text); border-radius: 3px; }
/* 节点库（拖到画布上） */
.cc-flow-palette { display: flex; flex-direction: column; gap: 4px; }
.cc-flow-palette > button { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--cc-r-md); background: none; color: var(--cc-text-2); font: inherit; font-size: var(--cc-fs-md); text-align: left; cursor: grab; }
.cc-flow-palette > button:hover { border-color: var(--cc-border); background: var(--cc-surface); color: var(--cc-text); }
.cc-flow-palette > button .cc-flow-node-icon { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .cc-flow-edges path.is-active { animation: none; }
}

/* ==========================================================================
   21. Mobile · 移动端（导航栏 / 标签栏 / 底部面板 / 动作面板 / 分组列表 / 左滑操作 / 搜索栏 / 下拉刷新 / 滚轮 / iPhone 样机 / 双端）
   ========================================================================== */
.cc-navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 8px;
  padding-top: max(4px, env(safe-area-inset-top), var(--cc-safe-top, 0px));
  border-bottom: 1px solid var(--cc-border);
  background: color-mix(in srgb, var(--cc-bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
}
.cc-navbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; text-align: center; }
.cc-navbar-left,
.cc-navbar-right { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cc-navbar-right { justify-content: flex-end; }
.cc-navbar-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 6px 0 2px;
  border: 0;
  background: none;
  color: var(--cc-text);
  font-size: 15px;
  cursor: pointer;
}
.cc-navbar-back svg { width: 20px; height: 20px; }
.cc-navbar--large { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px 8px; padding-top: max(10px, env(safe-area-inset-top), calc(var(--cc-safe-top, 0px) + 4px)); border-bottom: 0; }
.cc-navbar--large .cc-navbar-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; text-align: left; }
.cc-navbar-eyebrow { display: block; margin-bottom: 2px; font-size: var(--cc-fs-sm); font-weight: 400; letter-spacing: 0; color: var(--cc-text-3); }

.cc-tabbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  padding: 6px 4px;
  padding-bottom: max(6px, env(safe-area-inset-bottom), var(--cc-safe-bottom, 0px));
  border-top: 1px solid var(--cc-border);
  background: color-mix(in srgb, var(--cc-surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
}
.cc-tabbar--fixed { position: fixed; left: 0; right: 0; bottom: 0; }
.cc-tabbar > * {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 4px 0 2px;
  border: 0;
  background: none;
  color: var(--cc-text-3);
  font-size: 10.5px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--cc-dur);
}
.cc-tabbar > * svg { width: 22px; height: 22px; stroke-width: 1.6; }
.cc-tabbar > .is-active { color: var(--cc-text); font-weight: 500; }
.cc-tabbar > .is-active svg { stroke-width: 2.1; }
.cc-tabbar .cc-badge--num { position: absolute; top: 0; left: calc(50% + 5px); height: 16px; min-width: 16px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--cc-surface); }
.cc-tabbar-dot { position: absolute; top: 3px; left: calc(50% + 7px); width: 7px; height: 7px; border-radius: 50%; background: var(--cc-danger); box-shadow: 0 0 0 2px var(--cc-surface); }
.cc-tabbar > .cc-tabbar-action { flex: 0 0 64px; justify-content: center; }
.cc-tabbar-action > span { width: 42px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-tabbar-action > span svg { width: 20px; height: 20px; stroke-width: 2.2; }
body:has(.cc-tabbar--fixed) .cc-toast-stack:not([data-placement^="top"]) { bottom: 88px; }

.cc-modal-backdrop--sheet { grid-template-rows: minmax(0, 1fr); place-items: end stretch; padding: 0; overflow: hidden; } /* 行高锁定在遮罩内，否则内容超高时 max-height 按撑高的行算，底栏被裁掉 */
.cc-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 88%;
  margin: 0 auto;
  padding-bottom: max(env(safe-area-inset-bottom), var(--cc-safe-bottom, 0px));
  border-radius: 18px 18px 0 0;
  background: var(--cc-surface);
  box-shadow: var(--cc-shadow-lg);
  transform: translateY(100%);
  transition: transform 0.32s var(--cc-ease);
}
.cc-modal-backdrop.is-open .cc-sheet { transform: none; }
.cc-sheet.is-dragging { transition: none; }
.cc-sheet-grabber { display: flex; flex-shrink: 0; justify-content: center; padding: 8px 0 4px; cursor: grab; touch-action: none; }
.cc-sheet-grabber::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--cc-border-strong); }
.cc-sheet-head { display: flex; align-items: center; gap: 8px; padding: 4px 16px 10px; touch-action: none; }
.cc-sheet-title { font-size: 16px; font-weight: 600; }
.cc-sheet-desc { font-size: 12.5px; color: var(--cc-text-3); }
.cc-sheet-head > .cc-btn { margin-left: auto; }
.cc-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; }
.cc-sheet-body.cc-col > * { flex-shrink: 0; } /* 内容超高时整块滚动，不把 overflow:hidden 的列表压扁 */
.cc-sheet-foot { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--cc-border); }
.cc-sheet-foot > .cc-btn { flex: 1; }
.cc-action-sheet { max-width: 480px; gap: 8px; padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom), var(--cc-safe-bottom, 0px)); background: transparent; box-shadow: none; }
.cc-action-group { overflow: hidden; border-radius: 14px; background: var(--cc-surface); box-shadow: var(--cc-shadow-md); }
.cc-action-head { padding: 14px 16px 12px; text-align: center; }
.cc-action-title { font-size: var(--cc-fs-md); font-weight: 600; color: var(--cc-text-2); }
.cc-action-desc { margin-top: 2px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-action-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid var(--cc-border);
  background: none;
  color: var(--cc-text);
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cc-action-group > .cc-action-item:first-child { border-top: 0; }
.cc-action-item:hover,
.cc-action-item:active { background: var(--cc-surface-2); }
.cc-action-item svg { width: 18px; height: 18px; }
.cc-action-item.is-danger { color: var(--cc-danger); }
.cc-action-cancel { font-weight: 600; }

/* 分组列表（设置页风格） */
.cc-ilist-label { padding: 18px 16px 6px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-ilist { margin: 0 12px; overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-ilist-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--cc-text);
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.cc-ilist-item + .cc-ilist-item::before { content: ""; position: absolute; top: 0; right: 0; left: 14px; height: 1px; background: var(--cc-border); }
.cc-ilist--icons .cc-ilist-item + .cc-ilist-item::before { left: 56px; }
a.cc-ilist-item,
button.cc-ilist-item { cursor: pointer; }
a.cc-ilist-item:active,
button.cc-ilist-item:active { background: var(--cc-surface-3); }
.cc-ilist-icon { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--cc-surface-3); color: var(--cc-text); }
.cc-ilist-icon svg { width: 16px; height: 16px; }
.cc-ilist-icon--dark { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-ilist-main { flex: 1; min-width: 0; }
.cc-ilist-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--cc-text-3); }
.cc-ilist-value { white-space: nowrap; font-size: 14px; color: var(--cc-text-3); }
.cc-ilist-item > .cc-icon:last-child { width: 16px; height: 16px; color: var(--cc-text-4); }
.cc-ilist-item.is-danger { justify-content: center; color: var(--cc-danger); }

/* 左滑操作 */
.cc-swipe { position: relative; overflow: hidden; }
.cc-swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; opacity: 0; transition: opacity 0s 0.25s; }
/* 收起时藏起按钮：行边缘落在小数像素上时，底下的红 / 黑按钮会从抗锯齿边缘透成彩线；等收回动画结束再藏 */
.cc-swipe.is-open .cc-swipe-actions,
.cc-swipe.is-dragging .cc-swipe-actions { opacity: 1; transition-delay: 0s; }
.cc-swipe-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 72px;
  padding: 0 12px;
  border: 0;
  background: var(--cc-viz-3);
  color: #fff;
  font-size: var(--cc-fs-sm);
  cursor: pointer;
}
.cc-swipe-btn svg { width: 18px; height: 18px; }
.cc-swipe-btn.is-dark { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-swipe-btn.is-danger { background: var(--cc-danger-solid); color: #fff; }
.cc-swipe-content { position: relative; z-index: 1; background: var(--cc-surface); touch-action: pan-y; transition: transform 0.25s var(--cc-ease); }
.cc-swipe.is-dragging .cc-swipe-content { transition: none; }

/* 搜索栏 / 横向滚动 / 启动台 / 悬浮按钮 */
.cc-searchbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
.cc-searchbar .cc-input-wrap { flex: 1; }
.cc-searchbar .cc-input { height: 36px; border-color: transparent; border-radius: 10px; background: var(--cc-surface-3); font-size: 15px; }
.cc-searchbar-cancel { display: none; padding: 0; border: 0; background: none; color: var(--cc-text); font-size: 15px; white-space: nowrap; cursor: pointer; }
.cc-searchbar:focus-within .cc-searchbar-cancel { display: inline-block; }
.cc-hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cc-hscroll::-webkit-scrollbar { display: none; }
.cc-hscroll > * { flex: 0 0 auto; scroll-snap-align: start; }
.cc-launcher { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; }
.cc-launcher-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cc-text-2);
  font-size: 11.5px;
  text-decoration: none;
  cursor: pointer;
}
.cc-launcher-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-launcher-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--cc-border); border-radius: 14px; background: var(--cc-surface); color: var(--cc-text); }
.cc-launcher-icon svg { width: 22px; height: 22px; }
.cc-launcher-icon--dark { border-color: var(--cc-accent); background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-fab {
  position: fixed;
  right: 16px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 25;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 16px;
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  box-shadow: var(--cc-shadow-lg);
  cursor: pointer;
}
.cc-fab svg { width: 22px; height: 22px; stroke-width: 2.2; }
.cc-segmented--block { display: flex; }
.cc-segmented--block > * { flex: 1; justify-content: center; }

/* 下拉刷新：<div class="app-scroll" data-cc-ptr>（派发 cc:refresh，detail.done() 结束） */
.cc-ptr { display: flex; align-items: flex-end; justify-content: center; height: 0; overflow: hidden; color: var(--cc-text-3); font-size: 12px; }
.cc-ptr-inner { display: flex; align-items: center; gap: 8px; height: 48px; }
.cc-ptr-inner svg { width: 18px; height: 18px; transition: transform 0.2s; transform: rotate(calc(var(--p, 0) * 180deg)); }
.cc-ptr.is-ready .cc-ptr-inner svg { transform: rotate(180deg); }
.cc-ptr.is-loading .cc-ptr-inner svg { display: none; }
.cc-ptr .cc-spinner { display: none; }
.cc-ptr.is-loading .cc-spinner { display: inline-block; }

/* 滚轮选择（iOS 风格）：CC.wheel({ title, columns:[[…],[…]], value }) */
.cc-wheel { position: relative; display: flex; height: 220px; padding: 0 12px; overflow: hidden; }
.cc-wheel::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 36px; margin-top: -18px; border-radius: 9px; background: var(--cc-surface-3); pointer-events: none; }
.cc-wheel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--cc-surface), transparent 38%, transparent 62%, var(--cc-surface)); pointer-events: none; }
.cc-wheel-col { position: relative; z-index: 1; flex: 1; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 92px 0; overscroll-behavior: contain; }
.cc-wheel-col::-webkit-scrollbar { display: none; }
.cc-wheel-col > div { display: grid; place-items: center; height: 36px; scroll-snap-align: center; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--cc-text-3); transition: color 0.15s; cursor: pointer; }
.cc-wheel-col > div.is-active { color: var(--cc-text); font-weight: 600; }

/* iPhone 样机（全面屏 · 灵动岛）
   <div class="cc-iphone" style="--w:320px">
     <div class="cc-iphone-screen">
       <div class="cc-iphone-status" data-cc-iphone-status></div>   ← 时间 / 信号 / Wi-Fi / 电量，JS 自动填
       <div class="cc-iphone-body">…页面内容…</div>                  ← 或者直接放一个 iframe
     </div>
   </div>
   按 iPhone 15 Pro 比例（393 × 852 pt）。安全区：--cc-safe-top 54pt、--cc-safe-bottom 34pt，按 --w 等比缩放 */
.cc-iphone {
  --w: 320px;
  --u: calc(var(--w) / 433);
  position: relative;
  flex-shrink: 0;
  width: var(--w);
  padding: calc(var(--u) * 20);
  border-radius: calc(var(--u) * 74);
  background: #0b0b0c;
  box-shadow:
    0 0 0 calc(var(--u) * 2.5) #3b3b3e,
    0 0 0 calc(var(--u) * 4) #1a1a1b,
    inset 0 0 0 calc(var(--u) * 1.5) #2b2b2d,
    var(--cc-shadow-lg);
}
/* 侧键：左边操作键 + 音量键，右边电源键 */
.cc-iphone::before, .cc-iphone::after {
  content: ""; position: absolute; width: calc(var(--u) * 4.5); border-radius: calc(var(--u) * 2); background: #2c2c2e;
}
.cc-iphone::before { left: calc(var(--u) * -5.5); top: calc(var(--u) * 190); height: calc(var(--u) * 34);
  box-shadow: 0 calc(var(--u) * 66) 0 0 #2c2c2e, 0 calc(var(--u) * 132) 0 0 #2c2c2e; }
.cc-iphone::after { right: calc(var(--u) * -5.5); top: calc(var(--u) * 260); height: calc(var(--u) * 100); }
.cc-iphone-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 393 / 852;
  border-radius: calc(var(--u) * 56);
  background: var(--cc-bg);
  color: var(--cc-text);
  isolation: isolate;
  --cc-safe-top: calc(var(--u) * 54);
  --cc-safe-bottom: calc(var(--u) * 34);
  transform: translateZ(0); /* 让里面的 fixed 元素以屏幕为容器 */
}
/* 灵动岛 */
.cc-iphone-screen::before {
  content: ""; position: absolute; z-index: 100; top: calc(var(--u) * 11); left: 50%;
  width: calc(var(--u) * 124); height: calc(var(--u) * 36); border-radius: 999px; background: #000;
  transform: translateX(-50%); pointer-events: none;
}
/* 主屏指示条 */
.cc-iphone-screen::after {
  content: ""; position: absolute; z-index: 100; bottom: calc(var(--u) * 8); left: 50%;
  width: calc(var(--u) * 138); height: calc(var(--u) * 5); border-radius: 999px; background: var(--cc-text);
  opacity: 0.85; transform: translateX(-50%); pointer-events: none;
}
.cc-iphone-status {
  position: absolute; z-index: 99; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--u) * 54); padding: calc(var(--u) * 4) calc(var(--u) * 30) 0 calc(var(--u) * 42);
  font-family: -apple-system, "SF Pro Text", var(--cc-font); font-size: calc(var(--u) * 16.5); font-weight: 600; letter-spacing: -0.01em;
  color: var(--cc-text); pointer-events: none;
}
.cc-iphone-status > span:last-child { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.cc-iphone-status svg { display: block; height: calc(var(--u) * 12.5); width: auto; }
.cc-iphone-status--light { color: #fff; }
.cc-iphone-body { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column; }
.cc-iphone-body::-webkit-scrollbar { display: none; }
.cc-iphone-screen > iframe { position: absolute; top: 0; left: 0; border: 0; background: var(--cc-bg); transform-origin: 0 0; }
.cc-iphone--flat { box-shadow: 0 0 0 calc(var(--u) * 2.5) #3b3b3e, 0 0 0 calc(var(--u) * 4) #1a1a1b, inset 0 0 0 calc(var(--u) * 1.5) #2b2b2d; }
.cc-iphone--silver { background: #0b0b0c; box-shadow: 0 0 0 calc(var(--u) * 2.5) #c9c9cc, 0 0 0 calc(var(--u) * 4) #a7a7aa, inset 0 0 0 calc(var(--u) * 1.5) #2b2b2d, var(--cc-shadow-lg); }
.cc-iphone--silver::before, .cc-iphone--silver::after { background: #b5b5b8; }
.cc-iphone--silver::before { box-shadow: 0 calc(var(--u) * 66) 0 0 #b5b5b8, 0 calc(var(--u) * 132) 0 0 #b5b5b8; }
/* 安全区工具类：真机上 env() 生效，样机里读 --cc-safe-*（导航栏 / 标签栏 / 底部面板已内置） */
.cc-safe-top { padding-top: max(env(safe-area-inset-top), var(--cc-safe-top, 0px)); }
.cc-safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), var(--cc-safe-bottom, 0px)); }

/* iPhone 样机自适应：桌面上显示成手机，真手机（≤ 520px）上样机消失、页面铺满屏幕
   <div class="cc-iphone cc-iphone--adaptive" style="--w:393px"><div class="cc-iphone-screen">…</div></div> */
@media (max-width: 520px) {
  .cc-iphone--adaptive { width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .cc-iphone--adaptive::before, .cc-iphone--adaptive::after { display: none; }
  .cc-iphone--adaptive > .cc-iphone-screen { aspect-ratio: auto; height: 100vh; height: 100dvh; border-radius: 0; --cc-safe-top: inherit; --cc-safe-bottom: inherit; }
  .cc-iphone--adaptive > .cc-iphone-screen::before, .cc-iphone--adaptive > .cc-iphone-screen::after, .cc-iphone--adaptive .cc-iphone-status { display: none; }
}

/* 双端：手机优先的页面在电脑上变成"侧栏 + 内容"的应用；底部面板在电脑上变成居中对话框
   结构：<div class="cc-appshell" id="app"><main class="cc-app-main">…</main><nav class="cc-tabbar"><a class="cc-app-brand">…</a>…</nav></div>
   */
.cc-appshell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: var(--cc-bg); } /* 收起的侧滑面板停在屏幕外，不撑出横向滚动 */
:is(.cc-appshell, .cc-app-contents) > .cc-app-main { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
:is(.cc-appshell, .cc-app-contents) > .cc-app-main::-webkit-scrollbar { display: none; }
.cc-app-brand, .cc-app-desktop { display: none !important; }
.cc-app-contents { display: contents; }
@media (min-width: 901px) {
  .cc-appshell { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); --cc-safe-top: 0px; --cc-safe-bottom: 0px; }
  :is(.cc-appshell, .cc-app-contents) > .cc-app-main { grid-column: 2; grid-row: 1; scrollbar-width: thin; }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar {
    grid-column: 1; grid-row: 1; position: relative; bottom: auto; align-self: stretch; justify-content: flex-start; height: auto; flex-direction: column; align-items: stretch; gap: 1px;
    padding: 14px 10px; border-top: 0; border-right: 1px solid var(--cc-border); background: var(--cc-surface);
    -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto;
  }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar > * {
    flex: none; order: 1; flex-direction: row; justify-content: flex-start; gap: 10px; height: 36px; padding: 0 10px;
    border-radius: var(--cc-r-md); font-size: var(--cc-fs-md); color: var(--cc-text-2); transition: background var(--cc-dur), color var(--cc-dur);
  }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar > *:hover { background: var(--cc-surface-3); color: var(--cc-text); }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar > .is-active { background: var(--cc-surface-3); color: var(--cc-text); font-weight: 500; }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar > .is-active::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cc-text); }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar svg { width: 17px; height: 17px; }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar .cc-badge { position: static; margin-left: auto; transform: none; }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar .cc-tabbar-dot { position: static; margin-left: auto; }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar > .cc-app-brand { order: -2; display: flex !important; height: auto; margin: 0 0 12px; padding: 2px 8px 6px; gap: 9px; font-size: 15px; font-weight: 650; color: var(--cc-text); background: none; }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar > .cc-app-brand:hover { background: none; }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar > .cc-tabbar-action { order: -1; height: 38px; margin: 0 0 10px; padding: 0; background: none; }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar > .cc-tabbar-action:hover { background: none; }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar > .cc-tabbar-action > span { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 38px; margin: 0; border-radius: var(--cc-r-md); box-shadow: none; }
  :is(.cc-appshell, .cc-app-contents) > .cc-tabbar > .cc-tabbar-action > span::after { content: attr(data-label); font-size: var(--cc-fs-md); font-weight: 500; }
  .cc-app-desktop { display: revert !important; }
  .cc-app-mobile { display: none !important; }
  /* 内容区：居中、限宽；大标题导航变成页头 */
  .cc-app-main > section, .cc-app-page { width: 100%; max-width: var(--cc-app-max, 1040px); margin: 0 auto; padding: 0 32px 56px; }
  .cc-appshell .cc-navbar { position: relative; padding-left: 0; padding-right: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cc-appshell .cc-navbar--large { padding-top: 28px !important; padding-bottom: 12px; }
  .cc-appshell .cc-navbar:not(.cc-navbar--large) { padding-top: 16px !important; border-bottom: 0; }
  .cc-appshell .cc-navbar--large .cc-navbar-title { font-size: 30px; }
  .cc-appshell .cc-searchbar, .cc-appshell .cc-ilist, .cc-appshell .cc-ilist-label { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .cc-appshell .cc-fab { position: fixed; right: 32px; bottom: 32px; }
  .cc-appshell .cc-toast-stack:not([data-placement^="top"]) { bottom: 24px !important; }
  .cc-appshell .cc-swipe-content { cursor: default; }
}
/* 底部面板 / 动作面板 / 滚轮：电脑上（鼠标设备、宽 ≥ 720）居中成对话框；手机样机里保持底部弹出 */
@media (min-width: 720px) and (hover: hover) {
  .cc-modal-backdrop--sheet:not(.cc-iphone-screen .cc-modal-backdrop--sheet) { place-items: center; padding: 24px; }
  .cc-modal-backdrop--sheet:not(.cc-iphone-screen .cc-modal-backdrop--sheet) > .cc-sheet {
    width: min(520px, 100%); max-height: min(80vh, 760px); padding-bottom: 0; border-radius: 16px;
    transform: translateY(10px) scale(0.98); opacity: 0; transition: transform 0.22s var(--cc-ease), opacity 0.22s;
  }
  .cc-modal-backdrop--sheet.is-open:not(.cc-iphone-screen .cc-modal-backdrop--sheet) > .cc-sheet { transform: none; opacity: 1; }
  .cc-modal-backdrop--sheet:not(.cc-iphone-screen .cc-modal-backdrop--sheet) .cc-sheet-grabber { display: none; }
  .cc-modal-backdrop--sheet:not(.cc-iphone-screen .cc-modal-backdrop--sheet) > .cc-action-sheet { width: min(380px, 100%); padding: 8px; }
}
/* --------------------------------------------------------------------------
   22. Page templates · 整页模板布局（examples/templates/*）
   只放"整页怎么摆"的布局，颜色全部来自令牌
   -------------------------------------------------------------------------- */
.cc-page { display: flex; flex-direction: column; gap: 28px; }
.cc-page--narrow { width: 100%; max-width: 760px; margin-inline: auto; }

/* 设置页：左侧分组导航 + 右侧表单分区 */
.cc-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.cc-settings-nav { position: sticky; top: 80px; }
.cc-settings-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cc-settings-body > section { scroll-margin-top: 80px; }

/* 登录页：左侧品牌区（同心弧）+ 右侧表单 */
.cc-auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.cc-auth-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 40px;
  background: var(--cc-accent);
  color: var(--cc-on-accent);
}
.cc-auth-aside .cc-texture {
  inset: 0 0 auto auto;
  width: min(50%, 440px);
  aspect-ratio: 1;
  color: var(--cc-on-accent);
  opacity: 0.9;
}
.cc-auth-aside > :not(.cc-texture) { position: relative; }
.cc-auth-main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; }
.cc-auth-box { width: 100%; max-width: 360px; }
.cc-auth-corner { position: absolute; top: 16px; right: 16px; }

/* 整页居中舞台：403 / 404 / 结果页 */
.cc-stage { position: relative; overflow: hidden; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.cc-stage > .cc-texture { color: var(--cc-border-strong); }
.cc-stage-inner { position: relative; width: 100%; max-width: 520px; }

@media (max-width: 900px) {
  .cc-settings { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cc-settings-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--cc-border); }
  .cc-settings-nav::-webkit-scrollbar { display: none; }
  .cc-settings-nav .cc-nav-item { width: auto; flex-shrink: 0; border-radius: var(--cc-r-md) var(--cc-r-md) 0 0; }
  .cc-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .cc-auth-aside { min-height: 148px; padding: 24px 20px; }
  .cc-auth-aside .cc-auth-lead { display: none; }
  .cc-auth-aside .cc-texture { inset: 0; width: auto; aspect-ratio: auto; }
  .cc-auth-main { justify-content: flex-start; padding-top: 28px; }
}

/* --------------------------------------------------------------------------
   23. Theme scope · 主题作用域：任意元素加 data-theme="dark|light"，里面的组件跟着换（样机、预览卡常用）
   放在最后：要压过组件自己写的文字色
   -------------------------------------------------------------------------- */
[data-theme="dark"]:not(:root) {
  color-scheme: dark;
  --cc-bg: #0b0b0b; --cc-surface: #131313; --cc-surface-2: #181818; --cc-surface-3: #212121;
  --cc-border: #262626; --cc-border-strong: #363636;
  --cc-text: #f0f0ef; --cc-text-2: #b0b0ae; --cc-text-3: #8f8f8d; --cc-text-4: #626261;
  --cc-accent: #f5f5f4; --cc-accent-hover: #d9d9d7; --cc-on-accent: #0a0a0a;
  --cc-focus: rgba(255, 255, 255, 0.1); --cc-focus-ring: #f0f0ef; --cc-overlay: rgba(0, 0, 0, 0.6);
  --cc-success: #3ccf6e; --cc-success-bg: rgba(60, 207, 110, 0.12); --cc-warning: #f59e2b; --cc-warning-bg: rgba(245, 158, 43, 0.12);
  --cc-danger: #f25555; --cc-danger-bg: rgba(242, 85, 85, 0.12); --cc-danger-solid: #d93636; --cc-info: #5b8dff; --cc-info-bg: rgba(91, 141, 255, 0.12);
  --cc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --cc-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --cc-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
  --cc-viz-1: #f5f5f4; --cc-viz-2: #b4b4b2; --cc-viz-3: #7e7e7c; --cc-viz-4: #555554; --cc-viz-5: #363636; --cc-viz-6: #232323;
  --cc-brand-knock: #0b0b0b;
  color: var(--cc-text);
}
[data-theme="light"]:not(:root) {
  color-scheme: light;
  --cc-bg: #f6f6f5; --cc-surface: #ffffff; --cc-surface-2: #fafafa; --cc-surface-3: #f1f1f0;
  --cc-border: #e7e7e5; --cc-border-strong: #d4d4d2;
  --cc-text: #0a0a0a; --cc-text-2: #4d4d4d; --cc-text-3: #737371; --cc-text-4: #9a9a98;
  --cc-accent: #0a0a0a; --cc-accent-hover: #2b2b2b; --cc-on-accent: #ffffff;
  --cc-focus: rgba(10, 10, 10, 0.08); --cc-focus-ring: #0a0a0a; --cc-overlay: rgba(10, 10, 10, 0.32);
  --cc-success: #16a34a; --cc-success-bg: #effaf2; --cc-warning: #e07c0a; --cc-warning-bg: #fff6ea;
  --cc-danger: #dc2626; --cc-danger-bg: #fdf1f1; --cc-danger-solid: #dc2626; --cc-info: #2563eb; --cc-info-bg: #eff4ff;
  --cc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --cc-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --cc-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  --cc-viz-1: #0a0a0a; --cc-viz-2: #4a4a4a; --cc-viz-3: #8c8c8c; --cc-viz-4: #bcbcbc; --cc-viz-5: #dcdcdc; --cc-viz-6: #efefef;
  --cc-brand-knock: #ffffff;
  color: var(--cc-text);
}

/* ==========================================================================
   24. v0.9 · 编辑器与输入（代码编辑器 / 富文本 / 拖拽排序 / 表情 / 二维码 / 分段日期 / 年月 / 切换按钮组 / 工具栏）
       展示补充（浮动面板 / 调宽 / 渐隐遮罩 / 引导卡片 / 用户名片 / 整页骨架 / Mermaid / 提示块）
       落地页（导航 / 首屏 / Logo 墙 / 功能宫格 / Bento / 代码展示 / 安装条 / 评价 / 数据带 / 行动号召 / 页脚）
       AI 补充（可编辑消息列表 / 消息编辑弹窗）· 多语言切换
   每个组件都同时适配电脑和手机（≤ 600px 的写法写在各自后面）
   ========================================================================== */

/* ---------- 工具栏 / 切换按钮组 ---------- */
.cc-toolbar { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface); overflow-x: auto; scrollbar-width: none; }
.cc-toolbar::-webkit-scrollbar { display: none; }
.cc-toolbar-group { display: flex; flex-shrink: 0; align-items: center; gap: 2px; }
.cc-toolbar-sep { flex-shrink: 0; width: 1px; height: 20px; margin: 0 4px; background: var(--cc-border); }
.cc-toolbar select { height: 30px; padding: 0 24px 0 8px; border: 0; border-radius: var(--cc-r-sm); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a88' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 6px center / 12px no-repeat; color: var(--cc-text); font: inherit; font-size: var(--cc-fs-md); appearance: none; cursor: pointer; }
.cc-toolbar select:hover { background-color: var(--cc-surface-3); }
.cc-toolbar--flat { padding: 0; border: 0; background: none; }
.cc-toggle {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 6px; min-width: 30px; height: 30px; padding: 0 7px;
  border: 0; border-radius: var(--cc-r-sm); background: none; color: var(--cc-text-2); font: inherit; font-size: var(--cc-fs-md); cursor: pointer;
  transition: background var(--cc-dur), color var(--cc-dur);
}
.cc-toggle svg { width: 15px; height: 15px; }
.cc-toggle:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-toggle[aria-pressed="true"] { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cc-bg), 0 0 0 3.5px var(--cc-text); }
.cc-toggle:disabled { opacity: 0.4; pointer-events: none; }
.cc-toggle-group { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface); }
.cc-toggle-group--sep { gap: 0; padding: 0; overflow: hidden; }
.cc-toggle-group--sep .cc-toggle { height: 34px; padding: 0 12px; border-radius: 0; }
.cc-toggle-group--sep .cc-toggle + .cc-toggle { border-left: 1px solid var(--cc-border); }
@media (pointer: coarse) { .cc-toggle { min-width: 38px; height: 38px; } .cc-toolbar select { height: 38px; } }

/* ---------- 滚动边缘渐隐 ---------- */
.cc-mask { --mask: 28px; }
.cc-mask--y { -webkit-mask-image: linear-gradient(transparent, #000 var(--mask), #000 calc(100% - var(--mask)), transparent); mask-image: linear-gradient(transparent, #000 var(--mask), #000 calc(100% - var(--mask)), transparent); }
.cc-mask--y.is-start { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--mask)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--mask)), transparent); }
.cc-mask--y.is-end { -webkit-mask-image: linear-gradient(transparent, #000 var(--mask)); mask-image: linear-gradient(transparent, #000 var(--mask)); }
.cc-mask--x { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--mask), #000 calc(100% - var(--mask)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--mask), #000 calc(100% - var(--mask)), transparent); }
.cc-mask--x.is-start { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--mask)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--mask)), transparent); }
.cc-mask--x.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--mask)); mask-image: linear-gradient(90deg, transparent, #000 var(--mask)); }
.cc-mask.is-start.is-end { -webkit-mask-image: none; mask-image: none; }

/* ---------- 代码编辑器 ---------- */
.cc-code-editor { --lh: 1.7; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); font-family: var(--cc-font-mono); font-size: 12.5px; }
.cc-code-editor:focus-within { border-color: var(--cc-border-strong); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-code-editor-head { display: flex; align-items: center; gap: 10px; height: 36px; flex-shrink: 0; padding: 0 6px 0 12px; border-bottom: 1px solid var(--cc-border); background: var(--cc-surface-2); font-family: var(--cc-font); font-size: var(--cc-fs-sm); }
.cc-code-editor-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cc-code-editor-title svg { width: 14px; height: 14px; color: var(--cc-text-3); flex-shrink: 0; }
.cc-code-editor-pos, .cc-code-editor-lang { font-family: var(--cc-font-mono); font-size: 11px; color: var(--cc-text-3); }
.cc-code-editor-body { position: relative; display: flex; min-height: var(--min-h, 160px); max-height: var(--max-h, 420px); }
.cc-code-editor-gutter { flex-shrink: 0; overflow: hidden; padding: 10px 0; border-right: 1px solid var(--cc-border); background: var(--cc-surface-2); color: var(--cc-text-4); text-align: right; user-select: none; }
.cc-code-editor-gutter span { display: block; min-width: 40px; padding: 0 10px 0 6px; line-height: var(--lh); }
.cc-code-editor-gutter span.is-cur { color: var(--cc-text); }
.cc-code-editor-area { position: relative; flex: 1; min-width: 0; }
.cc-code-editor-hl, .cc-code-editor-area textarea {
  position: absolute; inset: 0; margin: 0; padding: 10px 14px; overflow: auto; border: 0; background: none;
  font: inherit; line-height: var(--lh); white-space: pre; tab-size: 2; letter-spacing: 0; word-spacing: 0;
}
.cc-code-editor-hl { pointer-events: none; color: var(--cc-text); scrollbar-width: none; }
.cc-code-editor-hl::-webkit-scrollbar { display: none; }
.cc-code-editor-hl code { font: inherit; }
.cc-code-editor-area textarea { color: transparent; caret-color: var(--cc-text); resize: none; outline: none; -webkit-text-fill-color: transparent; }
.cc-code-editor-area textarea::selection { background: color-mix(in srgb, var(--cc-text) 18%, transparent); -webkit-text-fill-color: transparent; }
.cc-code-editor--auto .cc-code-editor-body { max-height: none; }
@media (max-width: 600px) { .cc-code-editor { font-size: 12px; } .cc-code-editor-gutter span { min-width: 30px; padding: 0 6px 0 4px; } .cc-code-editor-pos { display: none; } }

/* ---------- 富文本编辑器 ---------- */
.cc-editor { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-editor:focus-within { border-color: var(--cc-border-strong); }
.cc-editor-bar { position: sticky; top: 0; z-index: 2; border: 0; border-bottom: 1px solid var(--cc-border); border-radius: var(--cc-r-lg) var(--cc-r-lg) 0 0; background: color-mix(in srgb, var(--cc-surface) 94%, transparent); backdrop-filter: blur(8px); }
.cc-editor-body { min-height: var(--min-h, 220px); padding: 18px 22px 28px; outline: none; }
.cc-editor-body.is-empty::before { content: attr(data-placeholder); position: absolute; color: var(--cc-text-4); pointer-events: none; }
.cc-editor-body ul.is-todo { padding-left: 4px; list-style: none; }
.cc-editor-body li.is-task { position: relative; padding-left: 26px; }
.cc-editor-body li.is-task::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 15px; height: 15px; border: 1.5px solid var(--cc-border-strong); border-radius: 4px; cursor: pointer; }
.cc-editor-body li.is-task[data-done="true"] { color: var(--cc-text-3); text-decoration: line-through; }
.cc-editor-body li.is-task[data-done="true"]::before { border-color: var(--cc-accent); background: var(--cc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.cc-editor-body pre { padding: 12px 14px; border-radius: var(--cc-r-md); background: var(--cc-surface-2); border: 1px solid var(--cc-border); font-family: var(--cc-font-mono); font-size: 12.5px; }
.cc-editor-body table { width: 100%; border-collapse: collapse; }
.cc-editor-body th, .cc-editor-body td { min-width: 60px; padding: 6px 10px; border: 1px solid var(--cc-border); }
.cc-editor-slash { position: absolute; z-index: 30; display: block; width: 260px; max-height: 300px; overflow-y: auto; }
.cc-editor-slash[hidden] { display: none; }
.cc-editor-slash .cc-menu-item.is-active { background: var(--cc-surface-3); }
.cc-editor-slash-icon { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--cc-border); border-radius: 6px; background: var(--cc-surface); }
.cc-editor-slash-icon svg { width: 14px; height: 14px; }
.cc-editor-slash.is-sheet { position: fixed; left: 8px; right: 8px; top: auto; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-height: 46vh; }
@media (max-width: 600px) { .cc-editor-body { padding: 14px 14px 22px; } .cc-editor-bar { border-radius: var(--cc-r-lg) var(--cc-r-lg) 0 0; } }

/* ---------- 拖拽排序 ---------- */
.cc-sortable { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cc-sortable > * { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px 8px 6px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface); transition: box-shadow 0.2s, transform 0.2s var(--cc-ease); }
.cc-sortable--flush { gap: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); }
.cc-sortable--flush > * { border: 0; border-radius: 0; }
.cc-sortable--flush > * + * { border-top: 1px solid var(--cc-border); }
.cc-sort-handle { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 30px; border-radius: 6px; color: var(--cc-text-4); cursor: grab; touch-action: none; }
.cc-sort-handle svg { width: 15px; height: 15px; }
.cc-sort-handle:hover { background: var(--cc-surface-3); color: var(--cc-text-2); }

/* FormList · 动态字段组 */
.cc-form-list { display: grid; gap: 8px; }
.cc-form-list-rows { display: grid; gap: 8px; }
.cc-form-list-rows.cc-sortable { gap: 8px; }
.cc-form-list-rows.cc-sortable > .cc-form-list-row { min-height: 0; padding: 0; border: 0; background: none; }
.cc-form-list-row { display: flex; align-items: flex-start; gap: 8px; }
.cc-form-list-row > .cc-sort-handle { height: var(--cc-h, 34px); }
.cc-form-list-index { flex-shrink: 0; min-width: 18px; height: var(--cc-h, 34px); display: grid; place-items: center; color: var(--cc-text-3); font-size: var(--cc-fs-xs); font-variant-numeric: tabular-nums; }
.cc-form-list:not([data-index]) .cc-form-list-index { display: none; }
.cc-form-list-fields { flex: 1; min-width: 0; display: grid; gap: 8px; }
.cc-form-list-fields > .cc-row { flex-wrap: nowrap; }
.cc-form-list-fields > .cc-row > * { flex: 1; min-width: 0; }
.cc-form-list-row > [data-fl="del"] { margin-top: calc((var(--cc-h, 34px) - 28px) / 2); color: var(--cc-text-3); }
.cc-form-list-row > [data-fl="del"]:not(:disabled):hover { color: var(--cc-danger); background: var(--cc-danger-bg); }
.cc-form-list-add { justify-self: start; border-style: dashed; color: var(--cc-text-2); }
.cc-form-list--block .cc-form-list-add { justify-self: stretch; }
@media (max-width: 600px) { .cc-form-list-fields > .cc-row { flex-wrap: wrap; } .cc-form-list-fields > .cc-row > * { min-width: 120px; } }

/* ImageSelect · 图片选择 */
.cc-image-select { --cols: 4; --ratio: 4 / 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; }
.cc-image-option { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--cc-text); text-align: left; font: inherit; cursor: pointer; }
.cc-image-option:disabled { opacity: 0.45; cursor: not-allowed; }
.cc-image-option-media { position: relative; display: block; aspect-ratio: var(--ratio); overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface-2); transition: border-color var(--cc-dur), box-shadow var(--cc-dur); }
.cc-image-option-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-image-option:not(:disabled):hover .cc-image-option-media { border-color: var(--cc-border-strong, var(--cc-text-4)); }
.cc-image-option.is-selected .cc-image-option-media { border-color: var(--cc-accent); box-shadow: 0 0 0 1px var(--cc-accent); }
.cc-image-option:focus-visible { outline: none; }
.cc-image-option:focus-visible .cc-image-option-media { box-shadow: 0 0 0 2px var(--cc-surface), 0 0 0 4px var(--cc-focus-ring); }
.cc-image-option-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--cc-accent); color: var(--cc-on-accent); opacity: 0; transform: scale(0.6); transition: opacity var(--cc-dur), transform var(--cc-dur) var(--cc-ease); }
.cc-image-option.is-selected .cc-image-option-check { opacity: 1; transform: none; }
.cc-image-option-label { overflow: hidden; font-size: var(--cc-fs-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cc-image-option-desc { margin-top: -4px; color: var(--cc-text-3); font-size: var(--cc-fs-xs); }
@media (max-width: 600px) { .cc-image-select { --cols: 2 !important; } }
.cc-sort-handle:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--cc-text); }
.cc-sortable > .is-dragging { box-shadow: var(--cc-shadow-lg); transform: rotate(-0.6deg) scale(1.01); cursor: grabbing; }
.cc-sortable > .is-dragging .cc-sort-handle { cursor: grabbing; }
.cc-sortable > .is-grabbed { box-shadow: 0 0 0 2px var(--cc-text); }
.cc-sortable > .is-dropped { animation: cc-sort-drop 0.4s var(--cc-ease); }
@keyframes cc-sort-drop { from { background: var(--cc-surface-3); } }
.cc-sort-placeholder { min-height: 44px; border: 1.5px dashed var(--cc-border-strong) !important; border-radius: var(--cc-r-md); background: var(--cc-surface-2) !important; }
@media (pointer: coarse) { .cc-sort-handle { width: 36px; height: 40px; } }
/* 触屏：表格里的小图标按钮、日期清除、轮播圆点放大点击区（圆点用 ::before 扩热区，外观不变） */
@media (pointer: coarse) {
  .cc-th-filter, .cc-row-expand, .cc-datepicker-clear { width: 28px; height: 28px; }
  .cc-inline-ai .cc-btn { height: 28px; }
  .cc-carousel-dots button { position: relative; }
  .cc-carousel-dots button::before { content: ""; position: absolute; inset: -10px -5px; }
}

/* ---------- 表情选择器 ---------- */
.cc-emoji { position: fixed; z-index: 1100; display: none; flex-direction: column; width: 320px; height: 360px; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 14px; background: var(--cc-surface); box-shadow: var(--cc-shadow-lg); }
.cc-emoji.is-open { display: flex; animation: cc-menu-in 0.14s var(--cc-ease); }
.cc-emoji-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 4px; }
.cc-emoji-head .cc-input-wrap { flex: 1; }
.cc-emoji-close { display: none; }
.cc-emoji-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; scrollbar-width: thin; }
.cc-emoji-label { position: sticky; top: 0; z-index: 1; padding: 8px 4px 4px; background: var(--cc-surface); font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.cc-emoji-grid button { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; background: none; font-size: 22px; line-height: 1; cursor: pointer; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transition: transform 0.12s, background 0.12s; }
.cc-emoji-grid button:hover { background: var(--cc-surface-3); transform: scale(1.12); }
.cc-emoji-none { padding: 40px 0; text-align: center; color: var(--cc-text-3); font-size: var(--cc-fs-sm); }
.cc-emoji-tabs { display: flex; justify-content: space-between; padding: 4px 6px; border-top: 1px solid var(--cc-border); }
.cc-emoji-tabs button { display: grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--cc-text-3); cursor: pointer; }
.cc-emoji-tabs button:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-emoji-tabs svg { width: 16px; height: 16px; }
.cc-emoji.is-sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; height: min(60vh, 420px); border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: cc-sheet-up 0.25s var(--cc-ease); }
.cc-emoji.is-sheet .cc-emoji-close { display: inline-grid; }
.cc-emoji.is-sheet .cc-emoji-grid button { font-size: 26px; }
@keyframes cc-sheet-up { from { transform: translateY(100%); } }

/* ---------- 二维码 ---------- */
.cc-qr { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: #fff; }
.cc-qr-svg { display: block; max-width: 100%; height: auto; }
.cc-qr-cap { font-size: var(--cc-fs-xs); color: #6b6b69; }
.cc-qr-err { padding: 20px; font-size: var(--cc-fs-sm); color: var(--cc-danger); }
.cc-qr--flush { padding: 0; border: 0; background: none; }

/* ---------- 分段日期 / 时间输入 ---------- */
.cc-datefield { display: inline-flex; align-items: center; gap: 0; height: 36px; padding: 0 10px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface); font-variant-numeric: tabular-nums; cursor: text; transition: border-color var(--cc-dur), box-shadow var(--cc-dur); }
.cc-datefield:focus-within { border-color: var(--cc-border-strong); box-shadow: 0 0 0 3px var(--cc-focus); }
.cc-datefield.is-invalid { border-color: var(--cc-danger); }
.cc-datefield-icon { display: flex; margin-right: 8px; color: var(--cc-text-3); }
.cc-datefield-icon svg { width: 15px; height: 15px; }
.cc-datefield-seg { width: calc(var(--w) + 8px); height: 26px; padding: 0 3px; border: 0; border-radius: 5px; background: none; color: var(--cc-text); font: inherit; font-size: var(--cc-fs-base); font-family: var(--cc-font-mono); text-align: center; caret-color: transparent; outline: none; }
.cc-datefield-seg::placeholder { color: var(--cc-text-4); font-family: var(--cc-font); font-size: var(--cc-fs-sm); }
.cc-datefield-seg:focus { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-datefield-seg:focus::placeholder { color: var(--cc-on-accent); opacity: 0.7; }
.cc-datefield-sep { color: var(--cc-text-3); }
.cc-datefield-sep:empty { width: 6px; }
@media (pointer: coarse) { .cc-datefield { height: 44px; } .cc-datefield-seg { height: 34px; font-size: 16px; } }

/* ---------- 年 / 月选择 ---------- */
.cc-mp { position: relative; display: inline-block; }
.cc-mp-trigger { display: inline-flex; align-items: center; gap: 8px; min-width: 160px; text-align: left; cursor: pointer; }
.cc-mp-trigger svg { width: 15px; height: 15px; color: var(--cc-text-3); flex-shrink: 0; }
.cc-mp-trigger span { flex: 1; }
.cc-mp-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: none; width: 272px; padding: 10px; border: 1px solid var(--cc-border); border-radius: 12px; background: var(--cc-surface); box-shadow: var(--cc-shadow-lg); }
.cc-mp-panel.is-up { top: auto; bottom: calc(100% + 6px); }
.cc-mp.is-open > .cc-mp-panel { display: block; animation: cc-menu-in 0.14s var(--cc-ease); }
.cc-mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: var(--cc-fs-md); }
.cc-mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cc-mp-grid button { height: 38px; border: 0; border-radius: var(--cc-r-md); background: none; color: var(--cc-text); font: inherit; font-size: var(--cc-fs-md); font-variant-numeric: tabular-nums; cursor: pointer; }
.cc-mp-grid button:hover { background: var(--cc-surface-3); }
.cc-mp-grid button.is-now { box-shadow: inset 0 0 0 1px var(--cc-border-strong); }
.cc-mp-grid button.is-active { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-mp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--cc-border); }
.cc-mp.is-sheet > .cc-mp-panel { position: fixed; inset: auto 0 0 0; width: auto; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; animation: cc-sheet-up 0.25s var(--cc-ease); }
.cc-mp.is-sheet > .cc-mp-panel .cc-mp-grid button { height: 48px; font-size: 15px; }
/* TimePicker 时间选择（CC.timePicker，外框复用 .cc-mp） */
.cc-tp .cc-mp-trigger { min-width: 132px; }
.cc-tp-clear { display: none; place-items: center; width: 18px; height: 18px; margin-right: -4px; border-radius: 50%; background: var(--cc-surface-3); color: var(--cc-text-2); cursor: pointer; }
.cc-tp-clear svg { width: 12px !important; height: 12px !important; color: inherit !important; }
.cc-tp.has-value .cc-mp-trigger:hover .cc-tp-clear { display: grid; }
.cc-tp-panel { width: auto; min-width: 168px; padding: 6px; }
.cc-tp-cols { display: flex; gap: 2px; }
.cc-tp-col { position: relative; flex: 1; min-width: 56px; height: 224px; overflow-y: auto; padding: 0 2px 188px; scrollbar-width: none; }
.cc-tp-col::-webkit-scrollbar { display: none; }
.cc-tp-col + .cc-tp-col { border-left: 1px solid var(--cc-border); }
.cc-tp-col button { display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 32px; border: 0; border-radius: var(--cc-r-sm); background: none; color: var(--cc-text); font: inherit; font-size: var(--cc-fs-md); font-variant-numeric: tabular-nums; cursor: pointer; }
.cc-tp-col button small { font-size: 10px; color: var(--cc-text-3); }
.cc-tp-col button:hover { background: var(--cc-surface-3); }
.cc-tp-col button.is-active { background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-tp-col button.is-active small { color: inherit; opacity: 0.7; }
.cc-tp-col button:disabled { color: var(--cc-text-4); background: none; cursor: not-allowed; }
.cc-tp-panel .cc-mp-foot { align-items: center; margin-top: 6px; }
.cc-tp.is-sheet .cc-tp-col { height: 240px; padding-bottom: 204px; }
.cc-tp.is-sheet .cc-tp-col button { height: 40px; font-size: 15px; }

/* ---------- 输入框前后缀组（补充：文字前后缀 / 按钮 / 下拉） ---------- */
.cc-input-addon { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface-2); color: var(--cc-text-3); font-size: var(--cc-fs-md); white-space: nowrap; }
.cc-input-addon svg { width: 15px; height: 15px; }
.cc-input-group > .cc-select { width: auto; flex-shrink: 0; }
.cc-input-group > .cc-input { flex: 1; min-width: 0; }
.cc-input-group > .cc-btn { flex-shrink: 0; height: 36px; }
@media (max-width: 600px) { .cc-input-group--stack { flex-wrap: wrap; } .cc-input-group--stack > .cc-btn { width: 100%; margin: 8px 0 0 !important; border-radius: var(--cc-r-md) !important; } }

/* ---------- 浮动面板 ---------- */
.cc-float { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; width: var(--w, 360px); height: var(--h, 440px); max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: hidden; border: 1px solid var(--cc-border); border-radius: 14px; background: var(--cc-surface); box-shadow: var(--cc-shadow-lg); }
.cc-float[hidden] { display: none; }
.cc-float-head { display: flex; align-items: center; gap: 6px; height: 40px; flex-shrink: 0; padding: 0 6px 0 12px; border-bottom: 1px solid var(--cc-border); background: var(--cc-surface-2); font-size: var(--cc-fs-md); cursor: grab; user-select: none; touch-action: none; }
.cc-float.is-dragging .cc-float-head { cursor: grabbing; }
.cc-float-grab { display: none; }
.cc-float-body { flex: 1; min-height: 0; overflow-y: auto; }
.cc-float-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--cc-border-strong) 50%, var(--cc-border-strong) 58%, transparent 58%, transparent 70%, var(--cc-border-strong) 70%, var(--cc-border-strong) 78%, transparent 78%); }
.cc-float.is-min { height: 40px !important; }
.cc-float.is-min .cc-float-body, .cc-float.is-min .cc-float-resize { display: none; }
@media (max-width: 600px) {
  .cc-float { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; max-width: none; height: var(--sheet-h, 55vh); border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .cc-float-head { flex-direction: row; height: 46px; cursor: ns-resize; position: relative; }
  .cc-float-grab { display: block; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--cc-border-strong); }
  .cc-float-resize { display: none; }
  .cc-float.is-min { height: 46px !important; }
}

/* ---------- 拖边调宽 ---------- */
.cc-resizable:not(.cc-sidebar) { position: relative; } /* 侧栏本身是 sticky / fixed，已经能给把手定位 */
.cc-resize-handle { position: absolute; top: 0; right: -3px; bottom: 0; z-index: 5; width: 6px; cursor: col-resize; touch-action: none; }
.cc-resize-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: transparent; transition: background 0.15s; }
.cc-resize-handle:hover::after, .cc-resize-handle:focus-visible::after, .is-resizing .cc-resize-handle::after { background: var(--cc-text); }
.cc-resize-handle:focus-visible { outline: none; }
.is-resizing, .is-resizing * { cursor: col-resize !important; user-select: none !important; }
@media (min-width: 901px) {
  .cc-shell:has(> .cc-sidebar.cc-resizable):not(.is-collapsed) { grid-template-columns: var(--cc-sidebar-w, 232px) minmax(0, 1fr); }
  .cc-shell.is-collapsing > .cc-sidebar { opacity: 0.5; }
}
@media (max-width: 900px) { .cc-resize-handle { display: none; } }

/* ---------- 引导卡片 ---------- */
.cc-guide { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; overflow: hidden; padding: 20px 22px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); transition: opacity 0.22s, transform 0.22s var(--cc-ease); }
.cc-guide.is-leaving { opacity: 0; transform: translateY(-6px) scale(0.99); }
.cc-guide-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cc-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-text-3); }
.cc-guide-title { margin: 6px 0 4px; font-size: var(--cc-fs-lg); font-weight: 650; letter-spacing: -0.01em; }
.cc-guide-desc { font-size: var(--cc-fs-md); line-height: 1.7; color: var(--cc-text-2); }
.cc-guide-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cc-guide-media { width: 180px; overflow: hidden; border-radius: var(--cc-r-md); }
.cc-guide-media img, .cc-guide-media video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cc-guide-close { position: absolute; top: 8px; right: 8px; }
.cc-guide--dark { border-color: var(--cc-accent); background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-guide--dark .cc-guide-desc, .cc-guide--dark .cc-guide-eyebrow { color: color-mix(in srgb, var(--cc-on-accent) 70%, transparent); }
.cc-guide--dark .cc-guide-close { color: var(--cc-on-accent); }
.cc-guide--dark .cc-texture { color: var(--cc-on-accent); opacity: 0.4; }
.cc-guide--dark > :not(.cc-texture) { position: relative; }
.cc-guide--dark .cc-btn--primary { background: var(--cc-on-accent); border-color: var(--cc-on-accent); color: var(--cc-accent); }
.cc-guide--dark .cc-btn:not(.cc-btn--primary) { border-color: color-mix(in srgb, var(--cc-on-accent) 30%, transparent); background: transparent; color: var(--cc-on-accent); }
.cc-guide--vertical { grid-template-columns: minmax(0, 1fr); }
.cc-guide--vertical .cc-guide-media { order: -1; width: 100%; }
@media (max-width: 600px) { .cc-guide { grid-template-columns: minmax(0, 1fr); padding: 16px; } .cc-guide-media { order: -1; width: 100%; } }

/* ---------- 用户名片 / 悬浮名片 ---------- */
.cc-user { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.cc-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cc-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cc-fs-md); font-weight: 600; }
.cc-user-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-user--sm .cc-avatar { --s: 24px; }
.cc-user--lg .cc-user-name { font-size: var(--cc-fs-lg); }
[data-cc-hovercard] { cursor: pointer; }
[data-cc-hovercard] .cc-user-name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--cc-dur); }
[data-cc-hovercard]:hover .cc-user-name { text-decoration-color: var(--cc-border-strong); }
.cc-hovercard { position: fixed; z-index: 1050; display: none; width: 300px; max-width: calc(100vw - 16px); padding: 16px; border: 1px solid var(--cc-border); border-radius: 14px; background: var(--cc-surface); box-shadow: var(--cc-shadow-lg); font-size: var(--cc-fs-md); }
.cc-hovercard.is-open { display: block; animation: cc-menu-in 0.14s var(--cc-ease); }
.cc-hovercard-head { display: flex; align-items: center; gap: 12px; }
.cc-hovercard-head .cc-avatar { --s: 48px; font-size: 18px; }
.cc-hovercard-bio { margin: 12px 0; line-height: 1.65; color: var(--cc-text-2); }
.cc-hovercard-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--cc-fs-xs); color: var(--cc-text-3); }
.cc-hovercard-meta span { display: inline-flex; align-items: center; gap: 4px; }
.cc-hovercard-meta svg { width: 12px; height: 12px; }
.cc-hovercard-actions { display: flex; gap: 6px; margin-top: 14px; }
.cc-hovercard-actions .cc-btn { flex: 1; }

/* ---------- 整页骨架屏 ---------- */
.cc-page-skeleton { display: flex; flex-direction: column; gap: 16px; }
.cc-page-skeleton .cc-skeleton { display: block; }
.cc-psk-head, .cc-psk-lines { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.cc-psk-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-psk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cc-psk-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; }
.cc-psk-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.cc-psk-bar { display: flex; gap: 8px; }
.cc-psk-detail { display: flex; gap: 16px; align-items: center; }
.cc-psk-field { display: flex; flex-direction: column; gap: 8px; }
.cc-psk-chat { display: flex; flex-direction: column; gap: 16px; }
.cc-psk-msg { display: flex; }
.cc-psk-msg.is-me { justify-content: flex-end; }
@media (max-width: 600px) {
  .cc-psk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-psk-split { grid-template-columns: minmax(0, 1fr); }
  .cc-psk-bar > :first-child { flex: 1; }
}

/* ---------- Mermaid ---------- */
.cc-mermaid-out { display: flex; justify-content: center; overflow-x: auto; padding: 16px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-mermaid-out svg { max-width: 100%; height: auto; }
pre.cc-mermaid { padding: 14px; border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-r-md); background: var(--cc-surface-2); font-family: var(--cc-font-mono); font-size: 12px; color: var(--cc-text-3); white-space: pre-wrap; }
pre.cc-mermaid:not([hidden]):not(.is-offline) { min-height: 120px; animation: cc-shimmer 1.4s ease infinite; background: linear-gradient(90deg, var(--cc-surface-3) 25%, var(--cc-surface-2) 37%, var(--cc-surface-3) 63%) 0 0 / 400% 100%; color: transparent; }
pre.cc-mermaid.is-offline { color: var(--cc-text-3); animation: none; }

/* ---------- 提示块 Callout ---------- */
.cc-callout { --c: var(--cc-text-2); --bg: var(--cc-surface-2); display: flex; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--cc-border); border-left: 3px solid var(--c); border-radius: var(--cc-r-md); background: var(--bg); font-size: var(--cc-fs-md); line-height: 1.7; }
.cc-callout > svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--c); }
.cc-callout-body { flex: 1; min-width: 0; }
.cc-callout-body > :first-child { margin-top: 0; }
.cc-callout-body > :last-child { margin-bottom: 0; }
.cc-callout-title { display: block; margin-bottom: 2px; font-weight: 600; color: var(--cc-text); }
.cc-callout--note { --c: var(--cc-text); }
.cc-callout--tip { --c: var(--cc-success); --bg: var(--cc-success-bg); }
.cc-callout--important { --c: var(--cc-info); --bg: var(--cc-info-bg); }
.cc-callout--warning { --c: var(--cc-warning); --bg: var(--cc-warning-bg); }
.cc-callout--danger { --c: var(--cc-danger); --bg: var(--cc-danger-bg); }

/* ---------- 可编辑消息列表 ---------- */
.cc-msglist { display: flex; flex-direction: column; gap: 10px; }
.cc-msglist-list { gap: 8px; }
.cc-msglist-list > .cc-msglist-item { align-items: flex-start; padding: 8px 10px 10px 4px; }
.cc-msglist-item[data-role="system"] { background: var(--cc-surface-2); }
.cc-msglist-item[data-role="assistant"] { border-left: 3px solid var(--cc-text); }
.cc-msglist-main { flex: 1; min-width: 0; }
.cc-msglist-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cc-msglist-role { height: 26px; padding: 0 22px 0 8px; border: 1px solid var(--cc-border); border-radius: 6px; background: var(--cc-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a88' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 5px center / 11px no-repeat; color: var(--cc-text); font: inherit; font-size: var(--cc-fs-sm); font-weight: 600; appearance: none; cursor: pointer; }
.cc-msglist-tok { font-size: 11px; color: var(--cc-text-3); }
.cc-msglist-text { display: block; width: 100%; min-height: 26px; padding: 4px 2px; border: 0; background: none; color: var(--cc-text); font: inherit; font-size: var(--cc-fs-md); line-height: 1.65; resize: none; outline: none; }
.cc-msglist-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 600px) { .cc-msglist-foot .cc-caption { width: 100%; order: -1; } .cc-msglist-text { font-size: 16px; } }

/* ---------- 消息编辑弹窗 ---------- */
.cc-msgmodal { display: flex; flex-direction: column; width: min(820px, calc(100vw - 32px)); height: min(78vh, 760px); }
.cc-msgmodal .cc-modal-head { display: flex; align-items: center; gap: 10px; }
.cc-msgmodal .cc-modal-head .cc-modal-title { margin-right: auto; }
.cc-msgmodal-body { flex: 1; min-height: 0; display: flex; padding: 0 20px; }
.cc-msgmodal-text { flex: 1; width: 100%; padding: 12px 0; border: 0; background: none; color: var(--cc-text); font: inherit; font-family: var(--cc-font-mono); font-size: 13px; line-height: 1.75; resize: none; outline: none; }
.cc-msgmodal-preview { flex: 1; overflow-y: auto; padding: 12px 0; }
.cc-msgmodal .cc-modal-foot { display: flex; align-items: center; gap: 8px; }
@media (max-width: 600px) {
  .cc-msgmodal-backdrop { padding: 0; }
  .cc-msgmodal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .cc-msgmodal-text { font-size: 16px; }
  .cc-msgmodal .cc-kbd { display: none; }
}

/* ---------- 语言切换 ---------- */
.cc-lang { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-md); background: var(--cc-surface); color: var(--cc-text-2); font-size: var(--cc-fs-md); }
.cc-lang svg { width: 15px; height: 15px; flex-shrink: 0; }
.cc-lang select { height: 30px; padding: 0 18px 0 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a88' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0 center / 12px no-repeat; color: var(--cc-text); font: inherit; appearance: none; cursor: pointer; outline: none; }
.cc-lang select:focus-visible { outline: 2px solid var(--cc-focus-ring); outline-offset: 2px; border-radius: var(--cc-r-xs); }

/* ==========================================================================
   落地页：.cc-landing 里用（产品官网 / 活动页 / 下载页）
   ========================================================================== */
.cc-landing { --lw: 1120px; background: var(--cc-bg); }
.cc-landing-wrap { width: 100%; max-width: var(--lw); margin: 0 auto; padding: 0 24px; }
.cc-lnav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--cc-bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); transition: border-color 0.2s; }
.cc-lnav.is-scrolled { border-bottom-color: var(--cc-border); }
.cc-lnav-inner { display: flex; align-items: center; gap: 8px; height: 60px; padding-top: env(safe-area-inset-top); }
.cc-lnav .cc-brand { padding: 0; margin-right: 18px; }
.cc-lnav-links { display: flex; gap: 2px; }
.cc-lnav-links a { padding: 6px 12px; border-radius: var(--cc-r-md); color: var(--cc-text-2); font-size: var(--cc-fs-md); text-decoration: none; transition: background var(--cc-dur), color var(--cc-dur); }
.cc-lnav-links a:hover { background: var(--cc-surface-3); color: var(--cc-text); }
.cc-lnav-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cc-lnav-burger { display: none; }
.cc-lnav-menu { display: none; }
.cc-hero { position: relative; overflow: hidden; padding: 88px 0 72px; text-align: center; }
.cc-hero > .cc-texture { color: var(--cc-text); opacity: 0.07; }
.cc-hero-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 12px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-full); background: var(--cc-surface); font-size: var(--cc-fs-sm); color: var(--cc-text-2); text-decoration: none; }
.cc-hero-pill b { padding: 1px 7px; border-radius: var(--cc-r-full); background: var(--cc-accent); color: var(--cc-on-accent); font-size: 11px; font-weight: 600; }
.cc-hero-pill svg { width: 13px; height: 13px; }
.cc-hero-title { max-width: 900px; margin: 22px auto 0; font-size: clamp(38px, 6.4vw, 72px); font-weight: 700; line-height: 1.04; letter-spacing: -0.045em; }
.cc-hero-title em { font-style: normal; color: var(--cc-text-3); }
.cc-hero-sub { max-width: 640px; margin: 22px auto 0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.75; color: var(--cc-text-2); }
.cc-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.cc-hero-cta .cc-btn { height: 44px; padding: 0 20px; font-size: 15px; }
.cc-hero-note { margin-top: 14px; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-hero-visual { position: relative; margin: 56px auto 0; max-width: 1040px; padding: 8px; border: 1px solid var(--cc-border); border-radius: 18px; background: var(--cc-surface-2); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.35); }
.cc-hero-visual > img, .cc-hero-visual > iframe, .cc-hero-visual > video { display: block; width: 100%; border: 0; border-radius: 12px; background: var(--cc-bg); }
.cc-hero--split { text-align: left; }
.cc-hero--split .cc-landing-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.cc-hero--split .cc-hero-title, .cc-hero--split .cc-hero-sub { margin-left: 0; }
.cc-hero--split .cc-hero-cta { justify-content: flex-start; }
.cc-hero--split .cc-hero-visual { margin: 0; }
.cc-lsec { padding: 88px 0; }
.cc-lsec + .cc-lsec { border-top: 1px solid var(--cc-border); }
.cc-lsec-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.cc-lsec-head h2 { margin: 10px 0 0; font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; }
.cc-lsec-head p { margin: 14px 0 0; font-size: 16px; line-height: 1.75; color: var(--cc-text-2); }
.cc-lsec-head--left { margin-left: 0; text-align: left; }
/* Logo 墙 */
.cc-marquee { --gap: 48px; --speed: 36s; position: relative; display: flex; overflow: hidden; gap: var(--gap); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cc-marquee-track { display: flex; flex-shrink: 0; align-items: center; gap: var(--gap); min-width: 100%; justify-content: space-around; animation: cc-marquee var(--speed) linear infinite; }
.cc-marquee:hover .cc-marquee-track { animation-play-state: paused; }
.cc-marquee-track > * { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; color: var(--cc-text-3); font-size: 17px; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; transition: color var(--cc-dur); }
.cc-marquee-track > *:hover { color: var(--cc-text); }
.cc-marquee-track svg { width: 24px; height: 24px; }
@keyframes cc-marquee { to { transform: translateX(calc(-100% - var(--gap))); } }
@media (prefers-reduced-motion: reduce) { .cc-marquee-track { animation: none; } }
.cc-logos-label { margin-bottom: 18px; text-align: center; font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
/* 功能宫格 */
.cc-features { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-xl); background: var(--cc-surface); }
.cc-feature { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
.cc-features > .cc-feature:nth-child(3n) { border-right: 0; }
.cc-feature-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--cc-surface-3); color: var(--cc-text); }
.cc-feature-icon svg { width: 19px; height: 19px; }
.cc-feature h3 { margin: 6px 0 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.cc-feature p { margin: 0; font-size: var(--cc-fs-md); line-height: 1.75; color: var(--cc-text-2); }
/* Bento */
.cc-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 12px; }
.cc-bento-cell { position: relative; display: flex; flex-direction: column; overflow: hidden; grid-column: span var(--span, 2); grid-row: span var(--rows, 1); padding: 22px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-xl); background: var(--cc-surface); }
.cc-bento-cell h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }
.cc-bento-cell p { margin: 6px 0 0; font-size: var(--cc-fs-md); line-height: 1.7; color: var(--cc-text-2); }
.cc-bento-visual { flex: 1; min-height: 0; margin-top: 18px; }
.cc-bento-cell--dark { border-color: var(--cc-accent); background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-bento-cell--dark p { color: color-mix(in srgb, var(--cc-on-accent) 65%, transparent); }
.cc-bento-cell--dark .cc-texture { color: var(--cc-on-accent); opacity: 0.35; }
.cc-bento-cell--dark > :not(.cc-texture) { position: relative; }
.cc-bento-big { font-size: clamp(40px, 5vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-top: auto; font-variant-numeric: tabular-nums; }
/* 代码展示 */
.cc-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--cc-r-xl); background: var(--cc-surface); }
.cc-showcase-code { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--cc-border); background: #0a0a0a; color: #e6e6e4; }
.cc-showcase-code .cc-tabs { padding: 0 14px; border-bottom-color: #262626; }
.cc-showcase-code .cc-tab { color: #8a8a88; }
.cc-showcase-code .cc-tab.is-active { color: #fff; }
.cc-showcase-code .cc-tab.is-active::after { background: #fff; }
.cc-showcase-code pre { flex: 1; margin: 0; padding: 16px 18px; overflow: auto; font-family: var(--cc-font-mono); font-size: 12.5px; line-height: 1.75; color: #e6e6e4; background: none; }
.cc-showcase-code pre .k { color: #fff; font-weight: 650; }
.cc-showcase-code pre .s { color: #b4b4b2; }
.cc-showcase-code pre .c { color: #6f6f6d; font-style: italic; }
.cc-showcase-preview { display: grid; place-items: center; min-height: 320px; padding: 28px; background-color: var(--cc-surface-2); background-image: radial-gradient(var(--cc-border-strong) 1px, transparent 1px); background-size: 16px 16px; }
/* 安装条 */
.cc-install { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 14px 14px 20px; border-radius: var(--cc-r-lg); background: var(--cc-accent); color: var(--cc-on-accent); }
.cc-install-text { flex: 1 1 200px; min-width: 0; }
.cc-install-text b { display: block; font-size: 15px; }
.cc-install-text small { font-size: var(--cc-fs-sm); opacity: 0.6; }
.cc-install-cmd { display: flex; flex: 1 1 280px; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 6px 0 14px; border-radius: var(--cc-r-md); background: color-mix(in srgb, var(--cc-on-accent) 10%, transparent); font-family: var(--cc-font-mono); font-size: 13px; }
.cc-install-cmd span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-install-cmd .cc-btn { color: var(--cc-on-accent); }
.cc-install-cmd .cc-btn:hover { background: color-mix(in srgb, var(--cc-on-accent) 14%, transparent); color: var(--cc-on-accent); }
/* 评价墙 */
.cc-testimonials { columns: 3 280px; column-gap: 12px; }
.cc-quote { break-inside: avoid; margin: 0 0 12px; padding: 20px; border: 1px solid var(--cc-border); border-radius: var(--cc-r-lg); background: var(--cc-surface); }
.cc-quote p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.75; }
.cc-quote--big p { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
/* 数据带 */
.cc-statband { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 0; }
.cc-statband > div { padding: 8px 24px; border-left: 1px solid var(--cc-border); }
.cc-statband > div:first-child { border-left: 0; padding-left: 0; }
.cc-statband b { display: block; font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.cc-statband span { font-size: var(--cc-fs-md); color: var(--cc-text-3); }
/* 行动号召 */
.cc-cta { position: relative; overflow: hidden; padding: 64px 40px; border-radius: var(--cc-r-xl); background: var(--cc-accent); color: var(--cc-on-accent); text-align: center; }
.cc-cta .cc-texture { color: var(--cc-on-accent); opacity: 0.5; }
.cc-cta > :not(.cc-texture) { position: relative; }
.cc-cta h2 { margin: 0; font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -0.035em; }
.cc-cta p { margin: 14px auto 0; max-width: 520px; font-size: 16px; line-height: 1.7; opacity: 0.7; }
.cc-cta .cc-hero-cta .cc-btn--primary { background: var(--cc-on-accent); border-color: var(--cc-on-accent); color: var(--cc-accent); }
.cc-cta .cc-hero-cta .cc-btn:not(.cc-btn--primary) { border-color: color-mix(in srgb, var(--cc-on-accent) 30%, transparent); background: transparent; color: var(--cc-on-accent); }
/* 页脚 */
.cc-footer { padding: 56px 0 calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cc-border); font-size: var(--cc-fs-md); }
.cc-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.cc-footer-brand p { margin: 12px 0 16px; max-width: 280px; line-height: 1.7; color: var(--cc-text-3); }
.cc-footer h4 { margin: 0 0 12px; font-size: var(--cc-fs-sm); font-weight: 600; }
.cc-footer ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cc-footer a { color: var(--cc-text-2); text-decoration: none; }
.cc-footer a:hover { color: var(--cc-text); }
.cc-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--cc-border); font-size: var(--cc-fs-sm); color: var(--cc-text-3); }
.cc-footer-bottom .cc-spacer { flex: 1; }
.cc-footer details summary { display: none; }
@media (max-width: 900px) {
  .cc-lnav-links, .cc-lnav-right .cc-hide-sm { display: none; }
  .cc-lnav-burger { display: inline-grid; }
  .cc-lnav.is-open .cc-lnav-menu { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 16px; border-top: 1px solid var(--cc-border); }
  .cc-lnav-menu a { padding: 12px 4px; border-bottom: 1px solid var(--cc-border); color: var(--cc-text); font-size: 16px; text-decoration: none; }
  .cc-lnav-menu .cc-btn { margin-top: 12px; height: 44px; }
  .cc-hero--split .cc-landing-wrap { grid-template-columns: minmax(0, 1fr); }
  .cc-features { --cols: 2 !important; }
  .cc-features > .cc-feature:nth-child(3n) { border-right: 1px solid var(--cc-border); }
  .cc-features > .cc-feature:nth-child(2n) { border-right: 0; }
  .cc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-bento-cell { grid-column: span min(var(--span, 2), 2); grid-row: auto; }
  .cc-showcase { grid-template-columns: minmax(0, 1fr); }
  .cc-showcase-code { border-right: 0; }
  .cc-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cc-landing-wrap { padding: 0 16px; }
  .cc-hero { padding: 56px 0 44px; }
  .cc-hero-cta .cc-btn { flex: 1 1 100%; }
  .cc-hero-visual { margin-top: 36px; padding: 4px; border-radius: 12px; }
  .cc-lsec { padding: 56px 0; }
  .cc-lsec-head { margin-bottom: 28px; }
  .cc-features { --cols: 1 !important; }
  .cc-features > .cc-feature { border-right: 0 !important; padding: 22px; }
  .cc-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .cc-bento-cell { grid-column: auto; min-height: 160px; }
  .cc-install { display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .cc-statband { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .cc-statband > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cc-cta { padding: 44px 20px; border-radius: var(--cc-r-lg); }
  .cc-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cc-footer-grid > div:not(.cc-footer-brand) { border-top: 1px solid var(--cc-border); }
  .cc-footer details summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; font-weight: 600; cursor: pointer; list-style: none; }
  .cc-footer details summary::-webkit-details-marker { display: none; }
  .cc-footer details > h4 { display: none; }
  .cc-footer details ul { padding-bottom: 14px; }
}

/* --------------------------------------------------------------------------
   Sizes · 统一尺寸 sm / md / lg（高度 28 / 34 / 40，按钮默认 32）
   单个控件加 --sm / --md / --lg；整块表单加 .cc-size-sm / .cc-size-lg，里面的按钮、输入框、选择器一起变
   -------------------------------------------------------------------------- */
.cc-btn--md { --h: 34px; }
.cc-input--md { height: 34px; }
.cc-select--lg { height: 40px; font-size: var(--cc-fs-base); padding-left: 12px; }
.cc-combo--sm .cc-combo-trigger { min-height: 28px; padding-top: 1px; padding-bottom: 1px; font-size: var(--cc-fs-sm); }
.cc-combo--sm .cc-combo-input { height: 24px; }
.cc-combo--lg .cc-combo-trigger { min-height: 40px; padding-top: 5px; padding-bottom: 5px; font-size: var(--cc-fs-base); }
.cc-mp--sm .cc-mp-trigger { height: 28px; min-width: 132px; font-size: var(--cc-fs-sm); }
.cc-mp--lg .cc-mp-trigger { height: 40px; font-size: var(--cc-fs-base); }
.cc-datepicker--sm .cc-datepicker-trigger { height: 28px; font-size: var(--cc-fs-sm); }
.cc-datepicker--lg .cc-datepicker-trigger { height: 40px; font-size: var(--cc-fs-base); }
.cc-segmented--lg > * { height: 34px; padding: 0 14px; font-size: var(--cc-fs-md); }
.cc-chip--lg { height: 36px; padding: 0 14px; }
.cc-tag--sm { height: 20px; padding-left: 6px; font-size: var(--cc-fs-xs); }
.cc-tag--lg { height: 28px; padding-left: 10px; }
.cc-progress--sm { height: 4px; }
.cc-pagination--sm .cc-pagination-item { min-width: 24px; height: 24px; font-size: var(--cc-fs-xs); }
.cc-pagination--lg .cc-pagination-item { min-width: 34px; height: 34px; }
.cc-switch--sm input { width: 26px; height: 14px; }
.cc-switch--sm input::after { width: 10px; height: 10px; }
.cc-switch--sm input:checked::after { transform: translateX(12px); }
.cc-switch--lg input { width: 40px; height: 22px; }
.cc-switch--lg input::after { width: 18px; height: 18px; }
.cc-switch--lg input:checked::after { transform: translateX(18px); }
.cc-check--sm, .cc-radio--sm, .cc-switch--sm { gap: 6px; font-size: var(--cc-fs-sm); }
.cc-check--sm input, .cc-radio--sm input { width: 14px; height: 14px; }
.cc-check--lg, .cc-radio--lg, .cc-switch--lg { gap: 10px; font-size: var(--cc-fs-base); }
.cc-check--lg input, .cc-radio--lg input { width: 18px; height: 18px; }

.cc-size-sm .cc-btn:not([class*="cc-btn--x"]):not(.cc-btn--lg) { --h: 28px; padding: 0 10px; font-size: var(--cc-fs-sm); border-radius: 7px; }
.cc-size-sm .cc-btn.cc-btn--icon:not(.cc-btn--lg) { padding: 0; width: var(--h); }
.cc-size-sm .cc-input:not(.cc-textarea):not(.cc-input--lg),
.cc-size-sm .cc-select:not(.cc-select--lg) { height: 28px; font-size: var(--cc-fs-sm); }
.cc-size-sm .cc-combo-trigger { min-height: 28px; padding-top: 1px; padding-bottom: 1px; font-size: var(--cc-fs-sm); }
.cc-size-sm .cc-combo-input { height: 24px; }
.cc-size-sm .cc-mp-trigger { height: 28px; font-size: var(--cc-fs-sm); }
.cc-size-sm .cc-datepicker-trigger { height: 28px; font-size: var(--cc-fs-sm); }
.cc-size-sm .cc-segmented > * { height: 24px; padding: 0 9px; font-size: var(--cc-fs-xs); }
.cc-size-lg .cc-btn:not([class*="cc-btn--x"]):not(.cc-btn--sm) { --h: 40px; padding: 0 16px; font-size: var(--cc-fs-base); border-radius: 10px; }
.cc-size-lg .cc-btn.cc-btn--icon:not(.cc-btn--sm) { padding: 0; width: var(--h); }
.cc-size-lg .cc-input:not(.cc-textarea):not(.cc-input--sm),
.cc-size-lg .cc-select:not(.cc-select--sm) { height: 40px; font-size: var(--cc-fs-base); }
.cc-size-lg .cc-combo-trigger { min-height: 40px; padding-top: 5px; padding-bottom: 5px; font-size: var(--cc-fs-base); }
.cc-size-lg .cc-mp-trigger { height: 40px; font-size: var(--cc-fs-base); }
.cc-size-lg .cc-datepicker-trigger { height: 40px; font-size: var(--cc-fs-base); }
.cc-size-lg .cc-segmented > * { height: 34px; padding: 0 14px; font-size: var(--cc-fs-md); }