:root {
  /* 原生控件配色基线：亮色主题下 <input type="date"> / <select> 的原生弹层需跟随亮色系统样式。
     dark 分支在下方单独声明 color-scheme: dark；notion / regular 由本行继承。 */
  color-scheme: light;
  --app-bg: #f7f7f5;
  --app-surface: #ffffff;
  --app-surface-subtle: #f1f1ef;
  --app-surface-hover: #ececea;
  --app-border: #e3e3df;
  --app-border-strong: #d2d2cd;
  --app-text: #2f3437;
  /* 二级/三级文字以 AA(4.5) 为底线：原二级 #6b6f76 在次级面仅 4.46，
     原三级 #82868d 在纸底仅 3.38，均不足以承载 10–12px 小字。
     现二级 #5f646b（白 5.96 / 纸 5.56 / 浅灰底 5.27）、
     三级 #696e75（白 5.14 / 纸 4.79 / 浅灰底 4.54），仍保留可辨的两级层次。 */
  --app-text-secondary: #5f646b;
  --app-text-muted: #696e75;
  --app-primary: #1d6fc0;
  --app-primary-rgb: 29, 111, 192;
  --app-primary-hover: #185ca6;
  --app-primary-soft: rgba(29, 111, 192, 0.1);
  /* 强调色上的前景（主按钮/危险按钮/标签文字）：亮色主题用白字 */
  --app-on-primary: #ffffff;

  /* ── 主题动作色与身份强调色 ─────────────────────────────────────────────
     分工：--app-primary = 主题动作色（主按钮 / FAB / 链接 / 焦点环 / 文本选中底），
     随主题表达身份 —— notion=墨、regular=蓝、dark=亮蓝；**焦点、选中、链接、
     强调文字一律随它**（不再跨主题钉死为同一支蓝）。--app-accent 服务「非 CTA
     强调面」——开关开态、复选框/单选勾选、导航与列表激活态。notion(静谧) 下二者
     同值 ⇒ 可交互只剩一种色；蓝仅留存于 --app-type-* 与 success/warning/danger/info。 */
  --app-accent: #2f3437;
  --app-accent-soft: rgba(47, 52, 55, 0.10);
  --app-on-accent: #ffffff;
  /* 成功 / 警告同样会作为 12px 角标文字压在同色 -soft 底上（见 .ws-badge 等）。
     原值在近白底上 success 4.25、warning 3.64，未过 AA(4.5)，下沉一档后均 ≥5.0。 */
  --app-success: #1a7a56;
  --app-success-soft: rgba(26, 122, 86, 0.1);
  --app-warning: #926119;
  --app-warning-soft: rgba(146, 97, 25, 0.12);
  --app-danger: #bf3d3d;
  --app-danger-soft: rgba(191, 61, 61, 0.1);
  /* Windows 自绘窗口按钮（最小化/最大化/关闭，见 index.html .tb-win-controls）：
     关闭键的红对齐 Win11 原生（悬停 / 按下各一档）。这是系统语义色，
     三个主题共用同一支红，不随主题身份色变化。 */
  --app-window-close-bg: #c42b1c;
  --app-window-close-bg-active: #b02618;
  --app-window-close-fg: #ffffff;
  /* 信息色（提示类语义）：此前缺档，"提示"只能借 primary，语义与可交互强调色混淆 */
  --app-info: #0e7490;
  --app-info-soft: rgba(14, 116, 144, 0.1);
  /* 开发概览阶段色：保留五段语义，但整体降饱和以贴合纸墨世界；
     亮色档在白底 ≥4.8:1，可直接承载图例文字。 */
  --app-phase-analysis: #3d6f9e;
  --app-phase-design: #756a9a;
  --app-phase-implementation: #9a6b2f;
  --app-phase-testing: #a14f4c;
  --app-phase-completed: #477a63;
  --app-scrim: rgba(15, 23, 42, 0.5);
  /* 桌面级图片预览：成熟看图工具统一用深色底，不随主题反色，避免亮色主题下刺眼 */
  --app-viewer-backdrop: #0b0d10;
  --app-viewer-surface: rgba(255, 255, 255, 0.08);
  --app-viewer-border: rgba(255, 255, 255, 0.14);
  --app-viewer-text: rgba(255, 255, 255, 0.92);
  --app-viewer-text-muted: rgba(255, 255, 255, 0.62);
  --app-reminder-accent: #e8871e;

  /* 番茄钟标识色：番茄红（专注态）+ 叶绿，随主题切换 */
  /* 番茄红：原 #e5484d 在近白底上仅 3.91:1，下沉到 4.76:1；hover 同步加深一级，
     维持「hover 比常态更深」的关系；-soft 按新色相重算。 */
  --app-tomato: #c5383c;
  --app-tomato-hover: #c0282d;
  --app-tomato-soft: rgba(197, 56, 60, 0.1);
  --app-tomato-leaf: #3fae5a;

  /* 搜索结果五类实体标识色（组头色点 / 行内徽章；随主题切换）。
     这些色同时作为 12px 角标「文字」压在同色 -soft 底上（见 clip.css .anno-badge 等），
     原值在近白底上对比不足（vault 2.15 / plan 2.54 / clip 3.28 / todo 3.53 / knowledge 4.23），
     故亮色系整体下沉到同色相更深一档，均 ≥4.5:1；-soft 底同步按新色相重算（保持 12% 淡染）。
     暗色系（下方 data-theme="dark"）取更亮变体，不受影响。 */
  --app-type-clip: #2460e4;
  --app-type-clip-soft: rgba(36, 96, 228, 0.12);
  --app-type-knowledge: #7c3aed;
  --app-type-knowledge-soft: rgba(124, 58, 237, 0.12);
  --app-type-plan: #047857;
  --app-type-plan-soft: rgba(4, 120, 87, 0.12);
  --app-type-vault: #ac4f09;
  --app-type-vault-soft: rgba(172, 79, 9, 0.12);
  --app-type-todo: #c5236b;
  --app-type-todo-soft: rgba(197, 35, 107, 0.12);

  /* 标注高亮色族（知识模块「标注透视」的颜色筛选与卡片左边框）。
     属「内容语义色」——与 --app-type-* 并列，不随主题身份色切换，只按明暗给两档。
     消费者：frontend/knowledge-annotations.html / .js。 */
  --app-hl-yellow: #d9a800;
  --app-hl-yellow-soft: rgba(217, 168, 0, 0.14);
  --app-hl-green: #1e9e56;
  --app-hl-green-soft: rgba(30, 158, 86, 0.14);
  --app-hl-blue: #2f6fe0;
  --app-hl-blue-soft: rgba(47, 111, 224, 0.14);
  --app-hl-purple: #8b5cf6;
  --app-hl-purple-soft: rgba(139, 92, 246, 0.14);
  --app-radius-sm: 6px;
  --app-radius: 9px;
  --app-radius-lg: 12px;
  --app-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.06);

  /* 新增阴影层级 */
  --app-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --app-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --app-shadow-md: 0 4px 6px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --app-shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04);
  --app-shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.10), 0 8px 10px rgba(15, 23, 42, 0.06);
  --app-shadow-panel: 0 0 0 1px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
  --app-shadow-panel-right: -4px 0 8px rgba(15, 23, 42, 0.04), -8px 0 24px rgba(15, 23, 42, 0.08);
  --app-shadow-panel-left: 4px 0 8px rgba(15, 23, 42, 0.04), 8px 0 24px rgba(15, 23, 42, 0.08);

  /* ── 透明悬浮窗「出血」令牌族（bleed）────────────────────────────────
     Electron 透明窗（transparent:true + backgroundColor:'#00000000' + hasShadow:false）
     里，窗口边界就是光栅化边界：卡片自身的 box-shadow 一旦超出窗口，多出来的部分
     不是柔和淡出而是被一刀切掉 —— 裁口是硬边，在白底上读作「底层黑影」、在圆角处读作「黑角」。
     契约（三条必须同时成立，缺一条黑边就会回来）：
       1) 窗口尺寸 = 内容尺寸 + 2 × --app-float-gutter
       2) 该窗口内 CSS 用同一个 --app-float-gutter 作 padding（这圈就是出血区）
       3) 该窗口内卡片阴影只用 --app-float-shadow（其最大外扩 = offset-y + blur ≤ gutter）
     消费者：桌面暂存条 / 关闭确认弹窗 / 剪贴板气泡 / 剪贴板历史面板 / 通知气泡（全仓 5 个透明窗），
     以及 iframe 内贴边的 .float-bar（同一「外扩 ≤ 到边界距离」约束）。
     几何真源见 electron/float-window-metrics.js，两者由单测断言一致。 */
  --app-float-gutter: 12px;
  --app-float-shadow: 0 2px 8px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);

  /* 新增动画曲线 */
  --app-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --app-ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --app-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --app-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --app-ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);

  /* 动画时长 */
  --app-duration-fast: 120ms;
  --app-duration-normal: 200ms;
  --app-duration-slow: 300ms;
  --app-duration-panel: 250ms;

  /* ── 耗时操作（busy）视觉令牌 ─────────────────────────────
     只描述「正在处理」的视觉参数；色值一律派生自既有语义色，随主题自动切换。
     消费者：ui-common.css 的 .ui-op* 组件类 + js/ui-common.js 的 UI.busy 运行时。 */
  --app-busy-accent: var(--app-primary);          /* 指示/旋转主色 */
  --app-busy-track: var(--app-primary-soft);      /* 轨道底色 */
  --app-busy-spin-duration: 800ms;                /* 收敛散落的 0.8s（ui-spinner） */
  --app-busy-pulse-duration: 1500ms;              /* 收敛散落的 pulse 1.5s（原 clip-shared 内联动画） */
  --app-busy-pulse-soft: 0.55;                    /* 呼吸态最低不透明度 */
  --app-busy-enter-duration: var(--app-duration-normal);
  --app-busy-enter-ease: var(--app-ease-smooth);

  /* ── 可拖拽分隔条（所有侧边栏/抽屉/分栏共用）─────────────────────────────
     语义色引用，随主题自动切换，故 dark / regular 无需重复声明色值。 */
  --app-resizer-thickness: 6px;         /* 常态条宽/高，亦作 flex-basis */
  --app-resizer-hit: 12px;              /* 命中热区宽/高（≥ thickness），用负 margin 居中 */
  --app-resizer-radius: 2px;            /* 指示条圆角 */
  --app-resizer-idle-bg: transparent;   /* 常态底色（隐形） */
  --app-resizer-hover-bg: var(--app-primary-soft);         /* 保留：flow 条已改「指示线」表达，不再整条铺色 */
  --app-resizer-active-bg: var(--app-primary-soft);        /* 保留：同上 */
  --app-resizer-indicator: var(--app-border-strong);       /* 覆盖式分隔条：中线常态色 */
  --app-resizer-indicator-active: var(--app-primary);      /* 中线指示条 hover/拖拽色 */
  --app-resizer-indicator-width: 1px;                      /* 指示线粗细（flow 条 hover/拖拽时亮起） */
  --app-resizer-indicator-opacity: 0.6;                    /* 覆盖式中线常态不透明度 */
  --app-resizer-transition: background var(--app-duration-fast) var(--app-ease-smooth);
  --app-resizer-z: 120;
  --app-resizer-focus-ring: 0 0 0 2px var(--app-primary-soft);
  --app-resizer-step: 16px;             /* 键盘方向键步进量 */
  --app-resizer-cursor-x: col-resize;
  --app-resizer-cursor-y: row-resize;

  /* ── 面板尺寸夹取「全局缺省」───────────────────────────────────────────
     单面板可在自身元素上定义同名局部变量（--panel-min/--panel-max/…）覆盖。 */
  --app-panel-min: 180px;
  --app-panel-max: 480px;
  --app-panel-default: 240px;
  --app-panel-keep: 280px;              /* 对侧保底最小宽/高 */
  --app-panel-max-ratio: 0.6;           /* 相对容器上限比例 */

  /* ── 工作台版心宽度（概览 / 详情 / 产品概览共用一条规格）──────────────
     大厂仪表盘只有一条版心；宽屏靠 max-width 收敛，窄屏 100% 自适应。
     1920 窗口下左右留白约 120px，1440 及以下铺满。 */
  --ws-content-max-w: min(1440px, 100%);

  /* ── 侧栏形态（主题无关，仅 :root 定义）────────────────────────────────
     展开态宽度由用户拖拽 / `sidebar_width` 决定（149–340，默认 208），
     精简态（仅图标）与折叠态（width 0）为固定值。
     下限 149 与动作条的 15px 留白都由顶部动作条反推（见 index.html `SIDEBAR_MIN_W` 的算式注释），
     保证拖到最窄时「搜索」左距与「精简」右距仍各 15px（不被 overflow:hidden 从左侧裁掉），
     且展开态与精简态首尾按钮同基准、切换形态时不横移。 */
  --app-sidebar-compact-w: 56px;         /* 精简 / 仅图标态宽度：15px 图标 + 两侧 14px 留白 + 角标外溢 4px + 滚动条 6px */

  /* ── 视口高度基准（常驻侧栏 / 抽屉 / 贴视口面板共用）──────────────────
     语义：面板高度 = 视口高度，超出的内容由「面板自身」的滚动条承担。
     为什么不用 100%：100% 会随父级被内容撑高 → 面板被拉长，页面滚动时露出底边断口。
     为什么 100vh 可靠：本页运行在 Electron 固定尺寸 iframe 内，无移动端地址栏收缩问题。
     消费方：workspace.css 的 .sidebar（常驻轨道 / ≤820px 抽屉）。 */
  --app-viewport-h: 100vh;
  --app-rail-min-h: 360px;              /* 常驻轨道最小可用高度（矮窗兜底，头部/底部动作优先保留） */

  /* ── 浮层自适应（小窗口 / 矮屏兜底）─────────────────────────────────
     遮罩加安全内边距、内容卡夹取最大高度并自身滚动（唯一滚动所有者），
     保证任何窗口高度下弹窗底部「保存 / 取消 / 添加」都可达。
     用法：遮罩加 .app-overlay，内容卡加 .app-overlay-card（见 ui-common.css）。 */
  --app-overlay-gap: 24px;              /* 遮罩四周安全内边距 */
  --app-modal-max-h: calc(100vh - var(--app-overlay-gap) * 2); /* 内容卡最大高度 */

  /* ── 浮动控件（模块返回胶囊 / 回到顶部 / 强制刷新 共用底座）──────────────
     毛玻璃 + 自动淡出；全部引用语义色，dark / regular 无需重复声明色值。 */
  --app-fab-z: 900;                       /* 层级见下方「层级阶梯」：低于命令面板 / 通知栏 / 启动遮罩，高于内容 */
  --app-fab-size: 38px;                   /* 图标按钮边长 */
  --app-fab-radius: 11px;                 /* 图标按钮圆角 */
  --app-fab-gap: 8px;                     /* 堆叠间距 */
  --app-fab-offset: 22px;                 /* 距内容区右 / 下边缘 */
  --app-fab-bg: color-mix(in srgb, var(--app-surface) 72%, transparent);
  --app-fab-bg-hover: color-mix(in srgb, var(--app-surface) 94%, transparent);
  --app-fab-border: var(--app-border);
  --app-fab-border-hover: var(--app-border-strong);
  --app-fab-text: var(--app-text-secondary);
  --app-fab-text-hover: var(--app-primary);
  --app-fab-shadow: var(--app-shadow-sm);
  --app-fab-shadow-hover: var(--app-shadow-md);
  --app-fab-blur: var(--app-material-blur-sm);   /* 毛玻璃模糊半径（归并材质令牌，值不变） */
  --app-fab-opacity-idle: 0.55;           /* 静止（停止交互后）不透明度 */
  --app-fab-idle-delay: 1600ms;           /* 停止交互 → 进入 idle 的延时 */
  --app-fab-safe-gutter: calc(var(--app-fab-size) + var(--app-fab-offset) + 12px);
  /* 内容底部安全带：滚动到底时，最后一行/按钮不会被浮控件压住（Material：FAB 下留 80px 呼吸区） */
  /* 只保留合成属性：background / border-color / color / box-shadow 的 hover 变化改瞬时，
     否则悬浮按钮 hover 时会逐帧走非合成重绘 */
  --app-fab-transition: opacity var(--app-duration-panel) var(--app-ease-smooth),
                        transform var(--app-duration-panel) var(--app-ease-out-expo);

  /* ── 材质令牌（M2 分层 · 毛玻璃）──────────────────────────────────────
     只描述「玻璃面」的物理参数，不管颜色语义；既有颜色令牌（--app-*）一律不动。
     配方与三主题取值：`.trae/documents/磨砂玻璃设计语言调研与原型方案.md` §5；
     可交互原型：design-prototype/glass-material-review.html。
     M2 覆盖范围：浮层（Toast / 弹窗 / 命令面板）+ chrome 面（标题栏 / 侧栏 / AI 面板）；
     内容区（列表 / 卡片 / 正文）永远实底 —— 这是与「AI 味」的分水岭。 */
  --app-material-blur-sm: 12px;      /* chrome / 菜单 / Toast / FAB */
  --app-material-blur-md: 16px;      /* 侧栏 / 面板 / 弹窗 / 抽屉 */
  --app-material-blur-lg: 24px;      /* 命令面板（M3 预留，M2 未使用） */
  --app-material-saturate: 1.4;      /* 与 FAB 现状一致；上限 1.5 */
  /* 浅色系 chrome 霜白基色：近白 + 主题色相，让标题栏/侧栏读作「属于本主题的霜面」。
     notion 走暖纸、regular 走冷蓝，分主题在下方 html[data-theme=...] 覆盖；
     dark 自有一档（见 html[data-theme="dark"] 的材质覆盖）。
     注意：:root 下只喂 --app-material-tint（常驻 chrome 面），浮层仍用 --app-surface；
     但两个浅色主题的 --app-surface 同值（纯白），浮层因此无法区分 ——
     notion / regular 各自在下方显式把 --app-material-tint-strong 也从本主题霜白派生。 */
  --app-material-chrome-base: #fbfaf7;
  --app-material-tint: color-mix(in srgb, var(--app-material-chrome-base) 90%, transparent); /* 常驻 chrome 面（霜白，近实底） */
  --app-material-tint-strong: color-mix(in srgb, var(--app-surface) 86%, transparent); /* 承载文字的浮层 */
  --app-material-hairline: rgba(15, 23, 42, .09);   /* 玻璃边界（dark 主题覆盖） */
  --app-material-fallback: var(--app-surface);      /* @supports 退化实底 */
  /* 面级配方：组件只引用这几个变量，调档 / 换档不碰组件样式 */
  --app-material-chrome-bg: var(--app-material-tint);
  /* chrome 面的「不透材质等价实色」：把 tint 按其 alpha 预合成到 --app-bg。
     标题栏 / 侧栏共用。此处写「取整后的整数 hex」而非 color-mix 表达式：
     浮点值经「页面光栅取整 → getComputedStyle 序列化」往返会有半场差（暗色 0.85×#282828
     + 0.15×#1e1e1e = 38.5 会因取整方向不同差 1/255），同一块 chrome 面上下拼接时
     可能出现「细看可见」的色带。整数 hex 保证各处渲染色逐位相同。
     （历史上 Windows 系统按钮覆盖层只吃实色，曾要求两边逐位同色；现已改自绘按钮，
      该约束不再必要，但整数 hex 仍保留以免引入新的 1/255 色带。）
     改 --app-material-chrome-base / --app-bg 时按 mix(base A%, --app-bg) 重算（A 见本主题
     --app-material-tint：notion/regular 90%，dark 85%）。 */
  --app-material-chrome-solid: #fbfaf7;   /* notion：mix(#fbfaf7 90%, #f7f7f5) 取整 */
  --app-material-chrome-filter: blur(var(--app-material-blur-sm)) saturate(var(--app-material-saturate));
  --app-material-panel-filter: blur(var(--app-material-blur-md)) saturate(var(--app-material-saturate));
  --app-material-overlay-bg: var(--app-material-tint-strong);
  --app-material-overlay-filter: blur(var(--app-material-blur-md)) saturate(var(--app-material-saturate));
  /* M3 表现：镜面高光边（1px，只放"窗顶 / 浮层顶部"这类物理合理的位置）+
     弹窗/命令面板升最高档模糊；hover 材质响应由各浮层用伪元素透洗实现（不直接过渡背景） */
  --app-material-specular: inset 0 1px 0 rgba(255, 255, 255, .55);
  --app-material-overlay-filter-lg: blur(var(--app-material-blur-lg)) saturate(var(--app-material-saturate));

  /* ── 模块返回胶囊（几何与图标按钮不同，单独一组）────────────────────── */
  --app-back-rail: 14px;                  /* 距内容区左 / 上边缘 */
  --app-back-gap: 6px;                    /* 图标与文字间距 */
  --app-back-pad-y: 6px;
  --app-back-pad-x: 13px;
  --app-back-radius: 999px;               /* 胶囊 */
  --app-back-font-size: 0.78rem;
  --app-back-offset-agent: 28px;          /* 牛马视图头部(34px)额外下移量 */

  /* ── 全局通知 Toast（js/ui-common.js 的 UI.toast 是全应用唯一实现）────────
     锚点恒定「整窗顶部居中」；多 toast 自上而下堆叠、收起后自动重排。
     iframe 内的调用由 UI.toast 委派给顶层窗口统一绘制，故位置相对整个应用窗口而非单个分栏。
     全部引用语义色，dark / regular 无需重复声明色值。 */
  --app-toast-top: 16px;                       /* 距视口顶部 */
  --app-toast-stack-step: 64px;                /* 相邻 toast 纵向步进（含自身高度 + 间距） */
  --app-toast-max-width: min(70vw, 460px);
  --app-toast-pad-y: 10px;
  --app-toast-pad-x: 16px;
  --app-toast-gap: 8px;                        /* 图标 / 文字 / 关闭按钮 / 动作按钮 间距 */
  --app-toast-font-size: 13px;
  --app-toast-line-height: 1.6;
  --app-toast-icon-size: 15px;
  --app-toast-radius: var(--app-radius, 10px);
  --app-toast-shadow: var(--app-shadow-lg, 0 8px 28px rgba(0, 0, 0, 0.18));

  /* ── 层级阶梯（z-index）──────────────────────────────────────────────
     全站浮层叠放秩序的唯一来源；新浮层一律引用令牌，禁止 z-index 字面量。
     阶梯自下而上，命名即语义。
     详见 `.trae/documents/统一浮层（弹窗与浮出面板）设计令牌.md`。 */
  --app-z-content: 1;                     /* 常规内容（正文、卡片） */
  --app-z-sticky: 100;                    /* 粘性表头 / 工具条 */
  --app-z-resizer: var(--app-resizer-z);  /* 拖拽分隔条（=120，向后兼容） */
  --app-z-panel: 300;                     /* 侧边抽屉 / 分栏面板 */
  --app-z-fab: var(--app-fab-z);          /* 浮动胶囊（=900，向后兼容） */
  --app-z-dropdown: 1000;                 /* 下拉菜单 / 右键菜单 */
  --app-z-context-menu: var(--app-z-dropdown); /* 右键菜单（与下拉同级，语义别名） */
  --app-z-tooltip: 1100;                  /* 悬浮提示：高于下拉、低于命令面板 */
  --app-z-command: 1200;                  /* 命令面板（⌘K）与其遮罩 */
  --app-z-popover-scrim: 1290;            /* 浮出面板的透明外点遮罩 */
  --app-z-popover: 1300;                  /* 浮出面板（定时任务等） */
  --app-z-popover-nested-scrim: 1490;     /* 面板内二级浮层的遮罩 */
  --app-z-popover-nested: 1500;           /* 面板内二级浮层（选择器/日历） */
  --app-z-float-base: 1600;               /* 动态浮层带起点：同一窗口内后打开的非模态浮层依次 +1（止于 lightbox 之前） */
  --app-z-lightbox: 1750;                 /* 图片灯箱：高于二级浮层、低于模块模态 */
  --app-z-modal: 2000;                    /* 模块内模态弹窗（写作模块等） */
  --app-z-notification: 9998;             /* 全局通知栏 */
  --app-z-startup: 9999;                  /* 启动遮罩 */
  --app-z-root: 2147483000;               /* UI 常驻层与全局模态（UI.confirm/alert/toast） */

  /* ── 浮出面板 / 弹窗共用外观（引用语义色，dark/regular 无需重复声明色值）── */
  --app-popover-bg: var(--app-surface);
  --app-popover-border: var(--app-border);
  --app-popover-radius: var(--app-radius-lg);
  --app-popover-shadow: var(--app-shadow-panel);
  --app-popover-scrim: transparent;               /* 默认透明：纯外点承接层，不改变视觉 */
  --app-popover-scrim-dim: var(--app-scrim);      /* 需要视觉遮罩（模态弹窗）时使用 */
  --app-popover-enter-duration: var(--app-duration-normal);
  --app-popover-enter-ease: var(--app-ease-out-expo);

  --app-font: "IBM Plex Sans", "Noto Sans SC", sans-serif;
  --app-font-mono: "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  /* 编辑区字体：ACE 的位置全部按「列 × characterWidth」计算，只有「半宽西文 + 全宽中文」
     的双宽等宽字体才能与文本层自洽（2 × 西文宽 = 中文宽），故此处只允许等宽族。
     默认与字体模块的 sarasa 选项一致，避免加载 JS 前闪一帧错位。 */
  --app-editor-font: "Sarasa Mono SC", var(--app-font-mono), monospace;
  /* 预览区字体栈（仅 .markdown-body），由字体模块通过 JS 下发覆盖 */
  --app-writing-font: var(--app-font);
  /* 写作区（CM6）编辑字体栈：浏览器原生排版，无列网格约束，可用比例字体；
     由字体模块通过 JS 下发覆盖；缺省值镜像 EditorFonts.CATALOG.serif，
     保证 js/editor-fonts.js 就位前首帧不闪烁。 */
  --app-writing-editor-font: "Noto Serif SC", Georgia, "Songti SC", "SimSun", "Noto Serif CJK SC", serif;

  /* ── 阅读排版（Markdown 阅读区 .markdown-body）─────────────────────────────
     由「阅读排版」开关（js/reading-prefs.js）在 documentElement 上以内联变量 /
     data-reading-bg 属性覆盖；默认值与既有视觉完全一致（14px / 1.7 / 跟随 --app-writing-font /
     无底色），未调整时零视觉变化。护眼底色按主题取色（深色主题用暗色，不刺眼）。 */
  --app-reading-size: 14px;
  --app-reading-line-height: 1.7;
  --app-reading-font: var(--app-writing-font);
  --app-reading-bg: transparent;

  /* ── 站点共享展示令牌（官网 index / demo / anniversary 与产品共用）─────────────
     官网三页此前各自内联这套令牌且值已漂移（旧色 #2383e2 等），现统一收敛到本真源：
     官网只引用 website/styles/design-tokens.css（本文件镜像），不再各自维护副本。
     --app-primary-strong：CTA 之外的强调底（导航/列表激活底、选中态），
     由 --app-primary-rgb 派生 → 随主题自动换色，避免硬编码 rgba。 */
  --app-primary-strong: rgba(var(--app-primary-rgb), 0.16);
  --font-sans: "IBM Plex Sans", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  /* 记录方式「类型徽章」色（官网条目图标 / 类型点使用；与产品 --app-type-* 语义族并列） */
  --type-text: #8b5cf6;
  --type-image: #10b981;
  --type-screenshot: #4a9e9e;
  --type-paste: #8b5cf6;
  --type-ocr: #10b981;
  --type-link: #3f8cff;
  --type-file: #f97316;
  --type-todo: #eab308;
}

/* 护眼底色：按 data-reading-bg 属性切换，浅色主题用暖色系，深色主题用同色系暗色 */
html[data-reading-bg="warm"] { --app-reading-bg: #fbf7ec; }
html[data-reading-bg="green"] { --app-reading-bg: #eaf3ea; }
html[data-reading-bg="gray"] { --app-reading-bg: #f0f1f2; }
html[data-theme="dark"][data-reading-bg="warm"] { --app-reading-bg: #2b281f; }
html[data-theme="dark"][data-reading-bg="green"] { --app-reading-bg: #222b24; }
html[data-theme="dark"][data-reading-bg="gray"] { --app-reading-bg: #242628; }

/* notion：纸感明亮（与 :root 同源，显式声明便于主题枚举与覆盖） */
html[data-theme="notion"] {
  --app-bg: #f7f7f5;
  --app-surface: #ffffff;
  --app-surface-subtle: #f1f1ef;
  --app-surface-hover: #ececea;
  --app-border: #e3e3df;
  --app-border-strong: #d2d2cd;
  --app-text: #2f3437;
  /* 与 :root 同源：二级/三级文字均需在纸底与次级面上过 AA(4.5) */
  --app-text-secondary: #5f646b;
  --app-text-muted: #696e75;
  /* 「静谧」动作色 = 墨：与 --app-accent 同值，消除「同一种主按钮在部分模块近黑、
     在另一些模块亮蓝」的分裂（亮蓝仅存于 --app-type-* 与状态色）。焦点边框/光环、
     文本选中、链接与强调文字一并随动作色转墨（墨于白底 12.6:1），属有意设计，勿改回蓝。 */
  --app-primary: #2f3437;
  --app-primary-rgb: 47, 52, 55;
  --app-primary-hover: #1f2429;
  --app-primary-soft: rgba(47, 52, 55, 0.10);
  /* 主题身份强调色：notion 走墨色（非 CTA 强调面跟随文字墨色） */
  --app-accent: #2f3437;
  --app-accent-soft: rgba(47, 52, 55, 0.10);
  --app-on-accent: #ffffff;
  --app-success: #1a7a56;
  --app-warning: #926119;
  --app-danger: #bf3d3d;
  --app-danger-soft: rgba(191, 61, 61, 0.1);
  /* 番茄红：原 #e5484d 在近白底上仅 3.91:1，下沉到 4.76:1；hover 同步加深一级，
     维持「hover 比常态更深」的关系；-soft 按新色相重算。 */
  --app-tomato: #c5383c;
  --app-tomato-hover: #c0282d;
  --app-tomato-soft: rgba(197, 56, 60, 0.1);
  --app-tomato-leaf: #3fae5a;

  /* 材质令牌：暖白霜面（与 #f7f7f5 纸感同相；与 :root 同源，显式声明便于主题枚举与覆盖）
     浮层基色（tint-strong → overlay-bg）也由暖白霜面派生：本主题的 --app-surface 是纯白
     #ffffff，与 regular 同值 → 浅色系浮层（命令面板 / Toast / 弹窗 / AI 面板）此前无法区分；
     改由 chrome-base 派生后各主题自带色相（不改任何既有颜色令牌，只在材质层分叉）。 */
  --app-material-chrome-base: #fbfaf7;
  --app-material-tint-strong: color-mix(in srgb, var(--app-material-chrome-base) 86%, transparent);
}

html[data-theme="regular"] {
  --app-bg: #edf5ff;
  --app-surface-subtle: #e2efff;
  --app-surface-hover: #d7e8fd;
  --app-border: #c9dcf5;
  --app-border-strong: #adc8eb;
  /* 主题身份强调色：regular 走蓝（沿用品牌蓝，与 primary 同值，保持「冷调清爽」定位） */
  --app-accent: #2383e2;
  --app-accent-soft: rgba(35, 131, 226, 0.10);
  --app-on-accent: #ffffff;

  /* 材质令牌：冷白霜面（与 #edf5ff 冷蓝同相，杜绝「中性灰 chrome 比内容还暗」）
     浮层基色同上：本主题未覆盖 --app-surface（仍沿用 :root 的纯白 #ffffff），
     若不显式派生，浮层就会与 notion 完全同色。 */
  --app-material-chrome-base: #f2f8ff;
  --app-material-tint-strong: color-mix(in srgb, var(--app-material-chrome-base) 86%, transparent);
  /* chrome 实色 = mix(#f2f8ff 90%, #edf5ff) 取整；须为整数 hex，见 :root 同名令牌注释 */
  --app-material-chrome-solid: #f2f8ff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #1e1e1e;
  --app-surface: #282828;
  --app-surface-subtle: #323232;
  --app-surface-hover: #3b3b3b;
  --app-border: #414141;
  --app-border-strong: #525252;
  --app-text: #dedede;
  --app-text-secondary: #aaaaaa;
  /* 暗色最弱档：原 #777777 在次级面 #323232 上仅 2.86:1、卡片 #282828 上 3.29:1。
     提到 #9a9a9a → 卡片 5.24 / 次级面 4.56 / 页面底 5.92，三面均过 AA(4.5)，
     且仍浅于 --app-text-secondary(#aaaaaa, 6.35) 保留层次。 */
  --app-text-muted: #9a9a9a;
  --app-primary: #61a6ff;
  --app-primary-rgb: 97, 166, 255;
  --app-primary-hover: #7bb5ff;
  --app-primary-soft: rgba(97, 166, 255, 0.14);
  /* 暗色主题 --app-primary (#61a6ff) 偏亮，改用深字保证对比度 */
  --app-on-primary: #0f1115;
  /* 主题身份强调色：dark 走亮蓝（与占位符同色相，非 CTA 强调面跟随） */
  --app-accent: #61a6ff;
  --app-accent-soft: rgba(97, 166, 255, 0.14);
  --app-on-accent: #0f1115;
  --app-success: #56c997;
  --app-success-soft: rgba(86, 201, 151, 0.14);
  --app-warning: #e6b35c;
  --app-warning-soft: rgba(230, 179, 92, 0.14);
  --app-danger: #f37979;
  --app-danger-soft: rgba(243, 121, 121, 0.12);
  --app-info: #4db8d4;
  --app-info-soft: rgba(77, 184, 212, 0.14);
  /* 开发概览阶段色（暗色提亮档）：与亮色同色相，保证深色主题下 ≥3:1 */
  --app-phase-analysis: #82afd6;
  --app-phase-design: #b3a8d3;
  --app-phase-implementation: #d6ab72;
  --app-phase-testing: #d98f8b;
  --app-phase-completed: #8bc0a6;
  --app-scrim: rgba(0, 0, 0, 0.55);
  --app-reminder-accent: #ff6b3a;
  --app-tomato: #ff7378;
  --app-tomato-hover: #f78b8e;
  --app-tomato-soft: rgba(255, 115, 120, 0.12);
  --app-tomato-leaf: #56c997;

  /* 材质令牌暗色覆盖：只改 tint / hairline（blur 阶梯与亮色共用）。
     与浅色同理：chrome 提到 85%，消除「亮壁纸 + 暗色主题」下 60% 透明被洗成中灰亮带的边界问题
     （60% 叠 #dcdcda → #70706f，比内容 #1e1e1e 亮一大截）；浮层 tint-strong 维持真玻璃。 */
  --app-material-tint: color-mix(in srgb, var(--app-surface) 85%, transparent);
  --app-material-chrome-solid: #272727;   /* mix(#282828 85%, #1e1e1e) = 38.5 取整；整数 hex 见 :root 注释 */
  --app-material-tint-strong: color-mix(in srgb, var(--app-surface) 84%, transparent);
  --app-material-hairline: rgba(255, 255, 255, .07);
  --app-material-specular: inset 0 1px 0 rgba(255, 255, 255, .10);
  --app-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  --app-shadow-panel: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.4);
  --app-shadow-panel-right: -4px 0 12px rgba(0, 0, 0, 0.3);
  --app-shadow-panel-left: 4px 0 12px rgba(0, 0, 0, 0.3);
  --app-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.3);
  --app-shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.4);
  /* 透明悬浮窗出血阴影（深色档）：外扩仍 = 2 + 8 = 10px ≤ --app-float-gutter(12px)，与亮色同口径 */
  --app-float-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);

  /* 五类标识色暗色变体：提高亮度、压低底色不透明度 */
  --app-type-clip: #6ea8ff;
  --app-type-clip-soft: rgba(110, 168, 255, 0.16);
  --app-type-knowledge: #b194ff;
  --app-type-knowledge-soft: rgba(177, 148, 255, 0.16);
  --app-type-plan: #34d399;
  --app-type-plan-soft: rgba(52, 211, 153, 0.16);
  --app-type-vault: #fbbf24;
  --app-type-vault-soft: rgba(251, 191, 36, 0.16);
  --app-type-todo: #fb75bc;
  --app-type-todo-soft: rgba(251, 117, 188, 0.16);

  /* 标注高亮色族（暗色提亮变体，与 --app-type-*-soft 同思路） */
  --app-hl-yellow: #e6c34c;
  --app-hl-yellow-soft: rgba(230, 195, 76, 0.18);
  --app-hl-green: #4ade80;
  --app-hl-green-soft: rgba(74, 222, 128, 0.18);
  --app-hl-blue: #6aa8ff;
  --app-hl-blue-soft: rgba(106, 168, 255, 0.18);
  --app-hl-purple: #c084fc;
  --app-hl-purple-soft: rgba(192, 132, 252, 0.18);

  /* 站点共享展示令牌（深色档）：--app-primary-strong 随暗色 --app-primary-rgb 派生；
     类型徽章色提亮、压底色，与产品 --app-type-*-soft 同一思路。 */
  --app-primary-strong: rgba(var(--app-primary-rgb), 0.20);
  --type-screenshot: #5cc3c3;
  --type-paste: #a88bff;
  --type-ocr: #3dd5a0;
  --type-link: #6aa8ff;
  --type-file: #ff9d5c;
  --type-todo: #f5d24c;
}

/* ============================================================================
   组件语义令牌 —— 共享组件一律消费 --app-*，禁止读取主题专属色值。
   这些令牌大多以 :root 值作为别名，随主题自动切换。
   ============================================================================ */
:root {
  --app-control-bg: var(--app-surface);
  --app-control-border: var(--app-border);
  --app-control-focus-ring: var(--app-primary-soft);

  /* ── 内容区控件统一规格（区块内次要按钮共用）──
     只描述几何与字号，色值仍走 --app-control-bg / --app-surface-* ，
     故 dark / regular 无需重复声明。 */
  --app-control-h: 30px;
  --app-control-radius: var(--app-radius-sm);
  --app-control-pad-x: 12px;
  --app-control-font-size: 0.8rem;

  /* ── 按钮弹性尺寸族（i18n 弹性兜底）────────────────────────────────────
     同一颗文字按钮在 zh-CN / en-US 下标签长度可差 1.5–2.5×（如 canvas 的
     「＋便签」→「+ Note」），故此处只描述「必须可伸缩的几何」；高度 / 圆角 / 字号
     复用上面的 --app-control-*，超长文字由 ui-common.css 的 .text-truncate 兜底。
     消费方：canvas 绘图工具条、editor 状态栏、knowledge / learning-plan 头部动作条。 */
  --app-btn-gap: var(--app-space-xs);          /* 同组按钮间距（原散落 5/6px） */
  --app-btn-pad-x: var(--app-control-pad-x);   /* 常规按钮横向内边距 */
  --app-btn-pad-x-compact: var(--app-space-sm);/* 密集工具条按钮（原散落 9/10px） */
  --app-btn-icon-only-w: var(--app-control-h); /* 窄屏退化纯图标态：正方形热区 */

  --app-card-bg: var(--app-surface);
  --app-card-border: var(--app-border);
  --app-card-hover-bg: var(--app-surface-hover);

  --app-nav-bg: var(--app-surface-subtle);
  --app-nav-active-bg: var(--app-accent-soft);
  --app-nav-active-text: var(--app-accent);

  --app-modal-bg: var(--app-surface);
  --app-modal-backdrop: rgba(15, 23, 42, 0.4);
  --app-drawer-bg: var(--app-surface);

  --app-editor-bg: var(--app-bg);
  --app-editor-gutter-bg: var(--app-surface-subtle);
  --app-editor-selection-bg: var(--app-primary-soft);

  --app-ai-bg: var(--app-surface-subtle);
  --app-ai-accent: var(--app-primary);
  --app-ai-thinking-ring: var(--app-primary);
}

/* ============================================================================
   刻度族 + 控件族 + 状态族令牌 —— 纯新增，只做「命名」，不改任何消费方。
   消费方收口见后续切片（S2 控件族 / S3 状态族 / S5 刻度族等值抽出）。

   取值口径（全站实际值分布，统计范围为 frontend/** 的 padding/gap/margin 与 font-size）：
     间距 top：8px:602 / 10px:500 / 6px:448 / 12px:420 / 4px:286 / 14px:258 / 16px:225
     字号 top：12px:211 / 13px:152 / 11px:139 / 10px:65 / 14px:34 / 16px:21 / 18px:12
   刻度族一律「等值抽出」——引用的都是当前已经在用的数值，本身不产生任何像素变化。
   刻意未纳入刻度的「网格外」值（间距 2/10/14/20px）留待 S6 调性修正归位，
   以免刻度退化成「任意偶数」而失去一致性约束力。
   ============================================================================ */
:root {
  /* ── 间距刻度 ── */
  --app-space-2xs: 4px;
  --app-space-xs: 6px;
  --app-space-sm: 8px;
  --app-space-md: 12px;
  --app-space-lg: 16px;
  --app-space-xl: 24px;
  --app-space-2xl: 32px;

  /* ── 字号阶梯（px 口径，与既有 --app-toast-font-size / --app-reading-size 一致）── */
  --app-font-size-2xs: 10px;
  --app-font-size-xs: 11px;
  --app-font-size-sm: 12px;
  --app-font-size-base: 13px;
  --app-font-size-md: 14px;
  --app-font-size-lg: 15px;
  --app-font-size-xl: 16px;
  --app-font-size-2xl: 18px;

  /* ── 字重 ── */
  --app-font-weight-normal: 400;
  --app-font-weight-medium: 500;
  --app-font-weight-semibold: 600;
  --app-font-weight-bold: 700;

  /* ── 行高（无单位，随字号缩放）── */
  --app-line-height-tight: 1.3;
  --app-line-height-base: 1.5;
  --app-line-height-relaxed: 1.6;

  /* ── 边框宽度 ── */
  --app-border-width: 1px;
  --app-border-width-strong: 2px;

  /* ── 图标尺寸 ── */
  --app-icon-size-sm: 14px;
  --app-icon-size-md: 16px;
  --app-icon-size-lg: 20px;

  /* ── 胶囊圆角（等值于 --app-back-radius 与滚动条 thumb 的 999px）── */
  --app-radius-pill: 999px;

  /* ── 焦点环（此前四处各写 outline: 2px solid var(--app-primary)，偏移 1~2px 不一）──
     焦点环跨主题恒定走 --app-primary（不跟随 --app-accent）：键盘可达性是功能语义而非主题身份，
     三主题保持同一支蓝，避免 notion 下墨色焦点环在深色内容上不可见。 */
  --app-focus-ring-color: var(--app-primary);
  --app-focus-ring-width: 2px;
  --app-focus-ring-offset: 2px;
  --app-focus-ring: 0 0 0 var(--app-focus-ring-width) var(--app-primary-soft);

  /* ── 禁用态 ── */
  --app-disabled-opacity: 0.7;

  /* ── 复选框（基准规格 = clip.css 的 .clip-checkbox + .check-visual：22px 圆形）──
     S2 用它收敛 .ai-tags-checkbox / .dispatch-target 等第二套实现。 */
  --app-checkbox-size: 22px;
  --app-checkbox-size-sm: 14px;                 /* 紧凑场合（分派目标列表等） */
  --app-checkbox-radius: 50%;
  --app-checkbox-border-w: var(--app-border-width-strong);
  --app-checkbox-border: var(--app-border);
  --app-checkbox-bg: transparent;
  --app-checkbox-hover-bg: color-mix(in srgb, var(--app-accent) 8%, transparent);
  --app-checkbox-checked-bg: var(--app-accent);
  --app-checkbox-checked-border: var(--app-accent);
  /* 勾形前景色：语义别名——亮色主题为白，暗色主题 --app-on-accent 已是深色，对比度自洽 */
  --app-checkbox-check-color: var(--app-on-accent);
  --app-checkbox-opacity-idle: 0.3;
  --app-checkbox-opacity-hover: 0.8;

  /* ── 单选（pdf.html 走原生 radio + accent-color，几何为约定值）── */
  --app-radio-size: 16px;
  --app-radio-radius: 50%;
  --app-radio-checked-bg: var(--app-accent);

  /* ── 开关（等值抽出 settings.html 的 .toggle-switch：44×24 轨道 + 18px 滑块）── */
  --app-switch-w: 44px;
  --app-switch-h: 24px;
  --app-switch-thumb-size: 18px;
  --app-switch-thumb-inset: 3px;
  --app-switch-thumb-travel: 20px;              /* 滑块行程 = 轨道宽 - 滑块 - 两侧内缩 */
  --app-switch-track-bg: var(--app-border-strong);
  --app-switch-track-off-border: transparent;
  --app-switch-track-on-bg: var(--app-accent);
  /* 滑块恒为浅色（不随主题反转）：与轨道形成稳定对比。
     注意：dark 主题 on 轨道 #61a6ff 与白滑块仅 2.50:1（<3:1，既有问题），
     由 --app-switch-thumb-shadow 提供视觉边界；彻底解需改 dark 的 thumb-bg，列为后续项。 */
  --app-switch-thumb-bg: #ffffff;
  --app-switch-thumb-shadow: var(--app-shadow-sm);

  /* ── 表单域 ── */
  --app-field-h: var(--app-control-h);
  --app-field-pad-x: var(--app-space-md);
  --app-field-placeholder-color: var(--app-text-muted);
  --app-field-invalid-border: var(--app-danger);
  --app-field-disabled-bg: var(--app-surface-subtle);

  /* ── 滚动条（等值于 clip.css 全局 ::-webkit-scrollbar：6px / 胶囊 / border-light）
     观感对标 Obsidian：常态「半透明淡入背景」，不抢内容；悬停才略微加深。
     注意：thumb 必须是半透明色，不能再用 border/border-strong 实色（会像一条实线贴边）。 */
  --app-scrollbar-size: 6px;
  --app-scrollbar-size-thin: 4px;
  --app-scrollbar-radius: var(--app-radius-pill);
  --app-scrollbar-thumb: color-mix(in srgb, var(--app-text-muted) 22%, transparent);
  --app-scrollbar-thumb-hover: color-mix(in srgb, var(--app-text-muted) 42%, transparent);
  --app-scrollbar-track: transparent;

  /* ── 骨架屏（基准实现 = ui-common.css 的 .ui-skeleton；shimmer 周期 1.4s）── */
  --app-skeleton-bg: var(--app-surface-subtle);
  --app-skeleton-highlight: var(--app-surface-hover);
  --app-skeleton-duration: 1400ms;

  /* ── 文本选中 ── */
  --app-selection-bg: color-mix(in srgb, var(--app-primary) 22%, transparent);
  --app-selection-text: var(--app-text);

  /* ── 表格（当前无统一表格实现，几何为约定值，供新建表格复用）── */
  --app-table-row-h: 36px;
  --app-table-header-bg: var(--app-surface-subtle);
  --app-table-zebra-bg: var(--app-surface-subtle);

  /* ── 悬浮提示 / 徽章 / 空态（空态尺寸等值于 ui-common.css 的 .ui-empty*）── */
  --app-tooltip-bg: var(--app-text);
  --app-tooltip-text: var(--app-surface);
  --app-tooltip-radius: var(--app-radius-sm);
  --app-tooltip-pad-y: var(--app-space-2xs);
  --app-tooltip-pad-x: var(--app-space-sm);
  --app-tooltip-font-size: var(--app-font-size-xs);
  --app-badge-radius: var(--app-radius-pill);
  --app-badge-pad-y: 1px;
  --app-badge-pad-x: var(--app-space-xs);
  --app-badge-font-size: var(--app-font-size-xs);
  --app-empty-icon-size: 40px;
  --app-empty-title-size: var(--app-font-size-lg);
  --app-empty-desc-size: var(--app-font-size-base);
  --app-empty-line-height: var(--app-line-height-relaxed);
}

/* ============================================================================
   对话台面令牌（知了抽屉栏）—— 纯新增，不改动任何既有令牌值。
   只有这里的 :root 给默认（与 notion 亮色同源），dark 覆盖差异项；
   regular 主题刻意不覆盖：其 --app-surface / --app-primary 沿用 :root，
   白气泡落在淡蓝台面上层次依然成立，无需额外分支。
   ============================================================================ */
:root {
  /* 台面（凹）与顶部光源：光源用单层渐变实现，不用纹理图 */
  --chat-stage-bg: var(--app-ai-bg);
  --chat-stage-glow: radial-gradient(120% 70% at 50% -10%, rgba(var(--app-primary-rgb), 0.08), transparent 72%);
  /* 气泡（凸）：assistant 白、user 主色淡染（用 color-mix 得到实色，对比度可算） */
  --chat-bubble-assistant-bg: var(--app-surface);
  --chat-bubble-user-bg: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface));
  --chat-bubble-user-text: var(--app-text);
  --chat-bubble-shadow: var(--app-shadow-sm);
  --chat-bubble-shadow-hover: var(--app-shadow-md);
  --chat-bubble-radius: var(--app-radius-lg);
  /* 左缘强调线 / 分隔线 */
  --chat-accent-line: color-mix(in srgb, var(--app-primary) 26%, var(--app-border-strong));
  --chat-divider: var(--app-border);
  /* 本面板专用的开关动效节奏 */
  --chat-duration-in: var(--app-duration-panel);
  --chat-ease-in: var(--app-ease-smooth);
}

html[data-theme="dark"] {
  --chat-stage-glow: radial-gradient(120% 70% at 50% -10%, rgba(var(--app-primary-rgb), 0.12), transparent 72%);
  --chat-bubble-user-bg: color-mix(in srgb, var(--app-primary) 20%, var(--app-surface));
  /* 亮色阴影在暗底上近乎不可见，暗色单独给一组 */
  --chat-bubble-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --chat-bubble-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.45);
  --chat-accent-line: color-mix(in srgb, var(--app-primary) 30%, var(--app-border));
}

html[data-theme="dark"] {
  --app-modal-backdrop: rgba(0, 0, 0, 0.6);
}

/* ============================================================================
   旧版别名（迁移期兼容）—— 把历史硬编码变量名映射到 --app-*。
   页面内联 :root 仍可能覆盖这些别名，随页面迁移逐步清理。
   ============================================================================ */
:root {
  --background: var(--app-bg);
  --surface: var(--app-surface);
  --text: var(--app-text);
  --text-secondary: var(--app-text-secondary);
  --text-muted: var(--app-text-muted);
  --border: var(--app-border);
  --border-light: var(--app-border-strong);
  --primary: var(--app-primary);
  --primary-dark: var(--app-primary-hover);
  --primary-light: var(--app-primary-soft);
  --success: var(--app-success);
  --danger: var(--app-danger);
  --radius: var(--app-radius);
  --radius-sm: var(--app-radius-sm);
  --radius-lg: var(--app-radius-lg);
  --shadow: var(--app-shadow);
  --transition: var(--app-duration-normal) var(--app-ease-smooth);
}

/* ============================================================================
   根滚动条轨道兜底色（各页面共用 · 随本文件一起生效）
   「窗口通透」（Windows 11 Mica，index.html 的 html[data-native-material="on"]）下
   外壳 body 透明，根滚动条若沿用 transparent 轨道，滚动条槽会直接透出窗口材质——
   深色壁纸时就是窗口右缘一条深色窄带，与主题观感脱节。
   这里把「根滚动条」轨道补齐成页面底色令牌：普通窗口下轨道与页面底色同色、观感零变化，
   通透下也不会再露出裸材质。元素级滚动条（弹窗 / 卡片内的）不在管辖范围，
   仍由各页自身的 `*` / `::-webkit-scrollbar` 规则决定（保持既有透明轨道观感）。
   ============================================================================ */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-bg);
}
/* 只锁根元素：把上面这条复位成「不向子元素扩散」，否则子元素会继承非 auto 的
   scrollbar-color 而丢掉各自的 ::-webkit-scrollbar 细化样式。
   :where() 零特异性 → 任何页面自身规则都优先，只在页面没写规则时才回到浏览器默认。 */
:where(html) :where(*) {
  scrollbar-color: revert;
}

/* ============================================================================
   切换主题时禁用过渡 —— theme-bridge.js 在写 data-theme 前挂上 data-theme-switching，
   两帧后移除。否则所有带 transition 的元素会在两套色值间做一次补间，
   整屏出现「变色闪动」（尤其开关 / 卡片 / 侧栏底色）。本规则跨主题恒定，放在全局文件。
   ============================================================================ */
[data-theme-switching] *,
[data-theme-switching] *::before,
[data-theme-switching] *::after {
  transition: none !important;
  animation-duration: 0ms !important;
}