From 2dd5f41a3b39d35a3a516188fd1e4ce0ddd3e148 Mon Sep 17 00:00:00 2001
From: zhoulinf <2507241354@qq.com>
Date: Wed, 5 Aug 2026 18:43:21 +0800
Subject: [PATCH] =?UTF-8?q?CRM=5F26-08-05#story#9126,=E8=BD=A6=E8=BE=86?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E3=80=81=E6=9C=8D=E5=8A=A1=E5=95=86=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=B3=BB=E7=BB=9F=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .kaifa/调度App H5行驶证拍摄取景引导框.md      |  501 +++
 .../调度App-H5行驶证拍摄取景引导原型 (2).html | 3791 +++++++++++++++++
 src/store/modules/camera.js                   |   22 +
 src/views/index/cameraGuide.vue               |   47 +
 4 files changed, 4361 insertions(+)
 create mode 100644 .kaifa/调度App H5行驶证拍摄取景引导框.md
 create mode 100644 .kaifa/调度App-H5行驶证拍摄取景引导原型 (2).html
 create mode 100644 src/store/modules/camera.js
 create mode 100644 src/views/index/cameraGuide.vue

diff --git a/.kaifa/调度App H5行驶证拍摄取景引导框.md b/.kaifa/调度App H5行驶证拍摄取景引导框.md
new file mode 100644
index 00000000..c4911c1a
--- /dev/null
+++ b/.kaifa/调度App H5行驶证拍摄取景引导框.md	
@@ -0,0 +1,501 @@
+# 调度App H5行驶证拍摄取景引导框 — 需求文档
+---
+
+## 需求文档摘要
+**一句话概括**：在调度App H5车辆管理页（`vehicleAdd.vue`）的行驶证上传流程中，拦截现有 `van-uploader` 的点击事件，先进入自定义拍摄引导页（WebRTC取景+浅色背景+灰色边框引导框+蓝色角标+Hero提示卡+取景要点卡+预览确认），拍摄确认后将照片传回现有的压缩→上传→OCR流程，实现拍摄环节的引导增强。
+
+**核心要点**：
+
+| 维度 | 内容 |
+| --- | --- |
+| **背景** | 调度App H5车辆管理页行驶证上传使用 `van-uploader` 直接调起系统选择器，无拍摄规范提示，导致卡套反光、证件歪斜、文字模糊等问题频发 |
+| **目标** | 拦截行驶证槽位点击，进入拍摄引导页（浅色背景+相机预览+引导框+Hero提示卡+取景要点卡），拍摄后预览确认，确认后回到现有压缩→上传→OCR流程 |
+| **现有流程** | `van-uploader` 点击 → 系统选择器 → `after-read` 回调 → `compressFileItem` 压缩 → `uploadImage` 上传 → `ocrHandler` OCR识别 |
+| **改造方案** | 行驶证槽位点击 → **拍摄引导页（新增）** → 预览确认（新增）→ `compressFileItem` 压缩 → `uploadImage` 上传 → `ocrHandler` OCR识别 |
+| **界面改动** | 新增拍摄引导页组件 + 预览确认页组件；改造 `vehicleAdd.vue` 中行驶证三个槽位的点击逻辑 |
+| **数据规则** | 无新增字段；引导框样式与文案为前端静态资源；后端接口完全不变 |
+| **原型** | [调度App-H5行驶证拍摄取景引导原型.html](https://sinoassist.yuque.com/attachments/yuque/0/2026/html/34748803/1785205633529-2dd10b98-a855-4a6b-b2a1-894fc14e3ca3.html) |
+
+
+**技术要点**：
+
++ 后端：无需变更，复用现有 `POST /order/uploadImage` 和 `POST /agg-api/tencent-ocr/unifiedOCR`
++ 前端：`supplier-dispatch-h5` 项目 `vehicleAdd.vue` 改造 + 新增拍摄引导组件
++ 数据库：无需变更
+
+---
+
+## 一、基本信息
+| 项目 | 内容 |
+| --- | --- |
+| **需求名称** | 调度App H5行驶证拍摄取景引导框 |
+| **提出人** |  |
+| **产品负责人** | 宋志领 |
+| **所属模块** | 调度App H5 - 车辆管理（`vehicleAdd.vue`）- 行驶证上传 |
+| **需求类型** | 优化 |
+| **目标版本** |  |
+| **紧急程度** | 中 |
+
+
+## 二、需求背景
+### 2.1 现有流程
+调度App H5车辆管理页面（`https://crm1.sino-assist.com/h5/supplier/dispatch/vehicleManage`）中，用户在录入或修改车辆信息时，需要上传行驶证主页、副页、车辆照片页。
+
+当前上传流程基于 Vant `van-uploader` 组件实现：
+
+```plain
+用户点击 van-uploader 上传槽位
+    │
+    ▼
+系统调起相册/相机选择器（accept="image/*"）
+    │
+    ▼
+after-read 回调触发（vehicleLicenseFrontHandler / vehicleLicenseBackHandler / vehicleLicenseCarHandler）
+    │
+    ▼
+compressFileItem() 前端压缩（目标 < 5MB，JPEG 格式）
+    │
+    ▼
+uploadImage() 上传 → POST /order/uploadImage（multipart/form-data）
+    │
+    ▼
+ocrHandler() OCR 识别 → POST /agg-api/tencent-ocr/unifiedOCR
+    │
+    ▼
+回填识别结果到表单字段（车牌号、车架号、所有人等）
+```
+
+**现有代码位置**：
+
+| 文件 | 关键方法/组件 |
+| --- | --- |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | `van-uploader` 组件（行驶证三个槽位） |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | `vehicleLicenseFrontHandler()` — 行驶证主页上传 |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | `vehicleLicenseBackHandler()` — 行驶证副页上传 |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | `vehicleLicenseCarHandler()` — 行驶证车辆照片上传 |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | `compressFileItem()` — 图片压缩 |
+| `supplier-dispatch-h5/src/api/mine.js` | `uploadImage()` — 上传接口 |
+| `supplier-dispatch-h5/src/api/mine.js` | `ocrHandler()` — OCR 识别接口 |
+
+
+### 2.2 问题分析
+当前流程中，用户点击上传槽位后直接调起系统相册/相机选择器，**没有任何拍摄规范提示**。实际采集到的照片普遍存在以下问题：
+
+1. **卡套/保护膜未取出**：证件装在透明卡套或覆膜中拍摄，塑料/玻璃表面反光，遮盖号牌、车架号等关键字段，导致OCR无法识别。
+2. **摆放不规整**：歪斜、弯曲、四角缺角、未对准画面中央，导致自动识别定位失败或字段错位。
+3. **反光与阴影**：在强光或灯光直射下拍摄，出现高光斑、阴影遮挡文字，造成文字模糊。
+
+上述问题直接造成行驶证OCR识别失败、审核驳回率升高，服务商需反复重传，拉长车辆录入周期。
+
+### 2.3 改造方向
+参考业界成熟的证件拍摄方案（如银行卡、身份证识别），在拍摄预览界面上叠加半透明取景引导框，配合文字提示，能从源头规范用户拍摄行为，显著提升照片合格率。
+
+**改造原则**：仅改造拍摄环节（系统选择器 → 自定义拍摄引导页），后续的压缩→上传→OCR流程完全保持不变。
+
+---
+
+## 三、需求目标
+1. 用户点击行驶证任一上传槽位时，**不再直接调起系统选择器**，而是进入自定义拍摄引导页。
+2. 拍摄引导页在相机预览画面上**自动叠加半透明取景引导框**，框的形状和比例匹配行驶证实际尺寸。
+3. 引导框区域显示明确的文字提示：「请将行驶证从卡套内取出后拍摄，避免反光」「请将证件对准框内，确保边缘完整、文字清晰」。
+4. 引导框**适配不同手机屏幕尺寸**，在主流移动端设备上显示正常。
+5. 用户点击拍摄后，引导框消失，进入**照片预览确认步骤**，支持重拍或确认使用。
+6. 用户确认使用后，照片**传回现有的 **`compressFileItem`** → **`uploadImage`** → **`ocrHandler`** 流程**，后续逻辑完全不变。
+7. 车头照、保单等非行驶证槽位**保持现有 **`van-uploader`** 直接调起选择器的逻辑**，不受影响。
+
+---
+
+## 四、功能说明
+### 功能点 1：拦截行驶证槽位点击，进入拍摄引导页
+**功能概述**：
+
+| 项目 | 内容 |
+| --- | --- |
+| **功能名称** | 行驶证槽位点击拦截 |
+| **涉及页面** | `vehicleAdd.vue` — 行驶证主页、副页、车辆照片页的 `van-uploader` 组件 |
+| **触发条件** | 用户在车辆管理页点击行驶证任一上传槽位（首次上传或重新上传）时触发 |
+| **处理逻辑** | 拦截 `van-uploader` 的默认点击行为（调起系统选择器），改为打开拍摄引导页组件 |
+| **输出结果** | 进入拍摄引导页，展示相机预览 + 引导框 |
+
+
+**改造前后对比**：
+
+| 步骤 | 改造前（现有流程） | 改造后 |
+| --- | --- | --- |
+| 1 | 点击 `van-uploader` 槽位 | 点击 `van-uploader` 槽位 |
+| 2 | 系统调起相册/相机选择器 | **拦截点击 → 进入拍摄引导页（新增）** |
+| 3 | 选择/拍摄照片 | 相机预览 + 引导框 + 文字提示 |
+| 4 | `after-read` 回调 | 点击拍摄 → **预览确认页（新增）** |
+| 5 | `compressFileItem` 压缩 | 确认使用 → **构造 file 对象，触发 **`after-read`** 回调** |
+| 6 | `uploadImage` 上传 | `compressFileItem` 压缩（**不变**） |
+| 7 | `ocrHandler` OCR 识别 | `uploadImage` 上传（**不变**） |
+| 8 | 回填表单 | `ocrHandler` OCR 识别（**不变**）→ 回填表单 |
+
+
+**关键改造点**：拍摄引导页确认使用后，需将 Canvas 捕获的图片 Blob 构造为 `van-uploader` 的 `after-read` 回调所期望的 `{ file: File, content: dataURL }` 格式，从而无缝衔接现有的压缩→上传→OCR流程。
+
+---
+
+### 功能点 2：拍摄引导页 — 相机预览 + 引导框
+**功能概述**：
+
+| 项目 | 内容 |
+| --- | --- |
+| **功能名称** | 拍摄取景引导框 |
+| **涉及页面** | 新增拍摄引导页组件 |
+| **触发条件** | 从行驶证槽位点击进入 |
+| **处理逻辑** | 使用 WebRTC `getUserMedia` 获取摄像头视频流，在 `video` 元素上全屏展示；叠加浅色背景层（`#F5F5F5`）+ 中央镂空引导框（灰色实线边框 `#C2C8D2` + 蓝色 L 形角标 `#354D93` + 入场渐显动画）+ 顶部 Hero 提示卡（白底+蓝色图标）+ 取景要点图标卡（do/don't）+ 底部白色拍摄栏 |
+| **输出结果** | 用户在规范引导下完成拍摄 |
+
+
+**界面设计**（拍摄引导页示意）：
+
+```plain
+┌─────────────────────────────────────────┐
+│  ←  拍摄行驶证主页                       │  ← 顶部导航栏（深蓝 #2C395F）
+├─────────────────────────────────────────┤
+│                                         │
+│  ┌───────────────────────────────────┐  │  ← Hero 提示卡（白底+蓝色图标）
+│  │ [📁] 请将行驶证从卡套内取出后拍摄  │  │
+│  │       避免反光，确保文字清晰        │  │
+│  └───────────────────────────────────┘  │
+│                                         │
+│  ┌───────────────────────────────────┐  │
+│  │└──                            ──┘ │  │  ← 蓝色 L 形角标（#354D93）
+│  │  中华人民共和国机动车行驶证         │  │  ← 证件标题轮廓（半透明蓝色）
+│  │                                    │  │
+│  │                                    │  │  ← 页面其余区域空白
+│  │                                    │  │
+│  │  ▢ 印章                            │  │  ← 印章位置轮廓（红色方形）
+│  │└──                            ──┘ │  │
+│  └───────────────────────────────────┘  │  ← 灰色实线边框（#C2C8D2）
+│                                         │
+│  ┌─────────┐  ┌─────────┐  ┌─────────┐ │  ← 取景要点图标卡（白底）
+│  │  [✓]    │  │  [✓]    │  │  [✗]    │ │
+│  │ 边缘完整 │  │ 文字清晰 │  │ 避免反光 │ │
+│  └─────────┘  └─────────┘  └─────────┘ │
+│                                         │
+├─────────────────────────────────────────┤
+│              ┌──────────┐              │
+│              │  ◉ 拍摄  │              │  ← 拍摄按钮（蓝色 #354D93）
+│              └──────────┘              │  ← 底部白色拍摄栏
+└─────────────────────────────────────────┘
+```
+
+> 说明：全屏相机预览（`video` 元素）作为底层背景，整体页面背景为浅色（`#F5F5F5`），营造明亮的拍摄环境。屏幕中央为镂空透明区域（匹配行驶证宽高比约 1.43:1），镂空区域外围为浅色背景（区别于镂空区域的相机预览画面）。镂空区域外圈增加灰色实线边框（`#C2C8D2`，3px，带入场渐显动画），四角显示蓝色 L 形角标（`#354D93`，带入场渐显动画），辅助用户对齐证件边缘。**引导框上方设置 Hero 提示卡**（白底圆角卡片+蓝色图标+主标题"请将行驶证从卡套内取出后拍摄"+副标题"避免反光，确保文字清晰"），**引导框下方设置取景要点图标卡**（3 个白底小卡片，分别用 ✓/✗ 图标标注"边缘完整""文字清晰""避免反光"）。**引导框内叠加极简证件模板轮廓**（半透明蓝色，透明度约 20%-35%）：主页仅展示顶部一行标题"中华人民共和国机动车行驶证"和左下角红色方形印章，其余区域空白；副页仅展示右下角条形码图案（长度与真实条形码一致）及数字编号，其余区域空白。底部为白色拍摄栏，居中放置蓝色圆形拍摄按钮。
+>
+
+**操作按钮**：
+
+| 按钮 | 触发条件 | 操作结果 |
+| --- | --- | --- |
+| 拍摄 | 点击 | 通过 Canvas 捕获当前 `video` 帧，生成图片 Blob，进入预览确认页 |
+| 返回（左上角） | 点击 | 关闭相机流，退出拍摄引导页，返回车辆管理页，不上传照片 |
+| 点击背景区（非引导框内） | 点击 | 无响应，保持拍摄引导页（防止误触） |
+
+
+---
+
+### 功能点 3：三页差异化引导
+**功能概述**：
+
+| 项目 | 内容 |
+| --- | --- |
+| **功能名称** | 分页面差异化引导 |
+| **涉及页面** | 行驶证主页、副页、车辆照片页拍摄引导页 |
+| **触发条件** | 按用户点击的具体槽位进入对应拍摄引导页 |
+| **处理逻辑** | 三页共用相同的引导框比例和通用提示文案；差异体现在页面标题和**引导框内的证件模板轮廓** |
+| **输出结果** | 用户明确知道当前拍摄的是行驶证的哪一页，并能按模板轮廓对齐证件内容 |
+
+
+**各页引导差异**：
+
+| 页面 | 对应槽位 | 对应 Handler | 页面标题 | 模板轮廓内容 |
+| --- | --- | --- | --- | --- |
+| 行驶证主页 | `vehicleLicenseFrontList` | `vehicleLicenseFrontHandler` | 拍摄行驶证主页 | 仅展示：顶部一行标题"中华人民共和国机动车行驶证" + 左下红色方形印章 |
+| 行驶证副页 | `vehicleLicenseBackList` | `vehicleLicenseBackHandler` | 拍摄行驶证副页 | 仅展示：右下角条形码图案（长度与真实条形码一致）+ 条形码数字编号 |
+| 行驶证车辆照片 | `vehicleLicenseCarPhotoList` | `vehicleLicenseCarHandler` | 拍摄行驶证车辆照片 | "车辆照片"标题 + 车辆SVG轮廓（车身/车窗/车轮），引导居中拍摄 |
+
+
+> **说明**：引导框内的证件模板轮廓为半透明叠层（透明度约 20%-35%），仅作视觉对齐辅助，不遮挡相机预览画面。模板轮廓使用 CSS/SVG 静态实现，不依赖后端数据。三种模板通过 `renderLicenseTemplate(type)` 函数根据槽位类型动态切换。
+>
+
+---
+
+### 功能点 4：照片预览确认
+**功能概述**：
+
+| 项目 | 内容 |
+| --- | --- |
+| **功能名称** | 照片预览确认 |
+| **涉及页面** | 拍摄完成后进入的预览确认页 |
+| **触发条件** | 用户在拍摄引导页点击"拍摄"按钮后触发 |
+| **处理逻辑** | 展示刚拍摄的照片，提供"重拍"和"确认使用"两个操作 |
+| **输出结果** | 确认使用 → 照片传回 `van-uploader` 的 `after-read` 回调，走现有压缩→上传→OCR流程；重拍则返回拍摄引导页 |
+
+
+**界面设计**（预览确认页示意）：
+
+```plain
+┌─────────────────────────────────────────┐
+│  ←  返回                                │
+├─────────────────────────────────────────┤
+│                                         │
+│     ┌─────────────────────────────┐     │
+│     │                             │     │
+│     │      刚拍摄的照片预览        │     │
+│     │      （全宽自适应展示）       │     │
+│     │                             │     │
+│     └─────────────────────────────┘     │
+│                                         │
+│                                         │
+│        ┌──────────┐ ┌──────────┐       │
+│        │  重拍    │ │ 确认使用 │       │
+│        └──────────┘ └──────────┘       │
+│                                         │
+└─────────────────────────────────────────┘
+```
+
+**操作按钮**：
+
+| 按钮 | 触发条件 | 操作结果 |
+| --- | --- | --- |
+| 重拍 | 点击 | 返回拍摄引导页，重新进入相机预览 |
+| 确认使用 | 点击 | 将照片 Blob 构造为 `{ file: File, content: dataURL }` 格式，调用对应槽位的 `after-read` Handler（如 `vehicleLicenseFrontHandler`），进入现有压缩→上传→OCR流程 |
+| 返回 | 点击 | 关闭相机流，返回车辆管理页，不保存照片 |
+
+
+**数据衔接说明**：
+
+确认使用后，需构造以下对象传给现有的 Handler 方法：
+
+```plain
+{
+  file: new File([blob], `vehicle_license_${type}_${Date.now()}.jpg`, { type: 'image/jpeg' }),
+  content: dataURL  // base64 格式，供 van-uploader 预览使用
+}
+```
+
+传入后，现有的 `compressFileItem()` → `uploadImage()` → `ocrHandler()` 链路完全不变。
+
+---
+
+## 五、业务规则
+### 规则 1：触发范围
+引导框仅对 `vehicleAdd.vue` 中标题含"行驶证"的三个 `van-uploader` 槽位生效（主页、副页、车辆照片）；**车头照**（`vehicleFrontPhotoList`）、**保单**（`insurancePictureFiles`）等其他槽位不进入拍摄引导页，保持现有 `van-uploader` 直接调起选择器的交互。
+
+### 规则 2：引导框比例
+引导框的宽高比固定为行驶证实物比例（约 1.43:1，横向），在不同屏幕尺寸下按屏幕宽度自适应缩放（宽度约为屏幕宽度的 80%），左右留白均匀，确保用户无需过度调整手机位置即可将证件放入框内。
+
+### 规则 3：后续流程不变
+引导框仅做"拍摄环节的视觉辅助"，**不改变原上传与OCR识别流程**。用户确认使用后，照片传入现有的 `compressFileItem` → `uploadImage` → `ocrHandler` 链路，识别失败仍按现有方式提示重传。
+
+### 规则 4：屏幕适配
+引导框在竖屏模式下以横向矩形展示（行驶证为横向证件）。若用户将手机横置，引导框应自适应旋转为纵向矩形以匹配证件方向。优先保证竖屏体验，横屏为可选适配。
+
+### 规则 5：降级策略
+若设备不支持 WebRTC `getUserMedia`（部分低版本 Android WebView 或非 HTTPS 环境），**降级为现有的 **`van-uploader`** 直接调起系统选择器**，不阻断用户上传流程。降级时引导框不展示，用户走原有流程。
+
+---
+
+## 六、边界与异常场景
+| 场景编号 | 场景描述 | 预期处理 |
+| --- | --- | --- |
+| 1 | 用户未对准引导框就点击拍摄 | 系统不拦截，正常拍摄并进入预览；用户在预览页可点击"重拍"重新对准 |
+| 2 | 相机权限未授权 | 拍摄引导页加载前检测权限；未授权时提示"请允许使用相机权限"，并提供"从相册选择"降级入口 |
+| 3 | 弱光/暗光环境拍摄 | 引导框正常展示；若设备支持，可自动开启屏幕补光（或提示用户到光线充足处拍摄） |
+| 4 | 用户旋转手机（横竖屏切换） | 引导框自适应旋转，保持与行驶证方向一致；拍摄按钮和提示文字跟随屏幕方向调整位置 |
+| 5 | 小屏幕手机（如 iPhone SE） | 引导框按比例缩小，提示文字自动换行，确保所有元素在可视区域内完整展示 |
+| 6 | 大屏幕手机（如 iPhone Pro Max） | 引导框按比例放大，不超过屏幕安全区域，保持舒适的单手操作距离 |
+| 7 | 设备不支持 getUserMedia | 自动降级为 `van-uploader` 直接调起系统选择器，不展示引导框 |
+| 8 | iOS 微信内置浏览器权限受限 | 检测到微信环境且 getUserMedia 不可用时，降级为系统选择器 |
+| 9 | 拍摄后未进入预览（相机被中断） | 检测到相机关闭/中断事件，自动返回车辆管理页，不上传照片 |
+| 10 | 非行驶证槽位（如车头照）点击 | 不进入拍摄引导页，维持现有 `van-uploader` 直接调起选择器的交互 |
+| 11 | 修改车辆时重新上传行驶证 | 同样进入拍摄引导页，拍摄确认后替换原照片，走现有压缩→上传→OCR流程 |
+
+
+---
+
+## 七、影响范围
+### 前端
+| 文件 | 变更类型 | 变更内容 |
+| --- | --- | --- |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | **改造** | 行驶证三个 `van-uploader` 槽位（`vehicleLicenseFrontList`/`vehicleLicenseBackList`/`vehicleLicenseCarPhotoList`）增加点击拦截逻辑：点击时打开拍摄引导页组件，而非直接调起系统选择器；拍摄确认后将照片传回现有的 `vehicleLicenseFrontHandler`/`vehicleLicenseBackHandler`/`vehicleLicenseCarHandler` |
+| `supplier-dispatch-h5/src/views/index/vehicleAdd.vue` | **改造** | 车头照（`vehicleFrontPhotoList`）、保单（`insurancePictureFiles`）槽位**不变**，保持现有 `van-uploader` 直接调起选择器的逻辑 |
+| `supplier-dispatch-h5/src/components/CameraGuide.vue` | **新增** | 拍摄引导页组件：WebRTC 相机预览 + 浅色背景层（`#F5F5F5`）+ 镂空引导框 + 灰色实线边框（`#C2C8D2`，入场渐显动画） + 四角蓝色 L 形角标（`#354D93`，入场渐显动画） + Hero 提示卡（白底+蓝色图标） + 取景要点图标卡（do/don't） + **证件模板轮廓叠层**（主页/副页/车辆照片三种模板动态切换） + 底部白色拍摄栏（蓝色圆形拍摄按钮） |
+| `supplier-dispatch-h5/src/components/CameraGuide.vue` | **新增** | 预览确认页：照片展示 + 重拍按钮 + 确认使用按钮 |
+| `supplier-dispatch-h5/src/api/mine.js` | **不变** | `uploadImage()` 和 `ocrHandler()` 完全复用 |
+| `supplier-dispatch-h5/src/utils/` | **不变** | `compressFileItem()` 等工具方法完全复用 |
+
+
+### 后端
+| 文件 | 变更内容 |
+| --- | --- |
+| 无 | 无需变更，复用现有 `POST /order/uploadImage` 和 `POST /agg-api/tencent-ocr/unifiedOCR` |
+
+
+### 数据库
+| 表名 | 变更内容 |
+| --- | --- |
+| 无 | 无需变更 |
+
+
+---
+
+## 八、验收标准
+### 8.1 拍摄引导页展示
+- [ ] 点击行驶证主页/副页/车辆照片任一上传槽位，进入拍摄引导页（非直接调起系统选择器）
+- [ ] 拍摄引导页展示全屏相机预览背景（`video` 元素实时画面）
+- [ ] 屏幕中央显示镂空引导框，框的宽高比约 1.43:1（横向）
+- [ ] 引导框外围为浅色背景（`#F5F5F5`），与镂空区域的相机预览画面形成对比
+- [ ] 引导框外圈显示灰色实线边框（`#C2C8D2`，3px，带入场渐显动画）
+- [ ] 引导框四角显示蓝色 L 形定位角标（`#354D93`，带入场渐显动画）
+- [ ] 引导框上方显示 Hero 提示卡（白底圆角卡片+蓝色图标），主标题"请将行驶证从卡套内取出后拍摄"，副标题"避免反光，确保文字清晰"
+- [ ] 引导框下方显示取景要点图标卡（3 个白底小卡片）：边缘完整（✓ 蓝色）、文字清晰（✓ 蓝色）、避免反光（✗ 红色）
+- [ ] 页面底部显示白色拍摄栏，居中放置蓝色圆形拍摄按钮（`#354D93`），按钮样式醒目、易于点击
+- [ ] 页面标题根据槽位类型显示对应文字（"拍摄行驶证主页"/"拍摄行驶证副页"/"拍摄行驶证车辆照片"）
+- [ ] 引导框内显示证件模板轮廓（半透明，不遮挡相机预览）
+- [ ] 主页模板包含：顶部一行标题"中华人民共和国机动车行驶证" + 左下红色方形印章，其余区域空白
+- [ ] 副页模板包含：右下角条形码图案（长度与真实条形码一致）+ 条形码数字编号，其余区域空白
+- [ ] 车辆照片模板包含：车辆SVG轮廓（车身/车窗/车轮）
+- [ ] 切换不同槽位时，模板轮廓自动切换为对应内容
+
+### 8.2 预览确认页展示
+- [ ] 点击"拍摄"后进入预览确认页，展示刚拍摄的照片
+- [ ] 预览页提供"重拍"按钮，点击后返回拍摄引导页
+- [ ] 预览页提供"确认使用"按钮，点击后照片传入现有的 `after-read` Handler
+- [ ] 预览页左上角提供"返回"按钮，点击后放弃当前照片，返回车辆管理页
+
+### 8.3 现有流程衔接
+- [ ] 确认使用后，照片经 `compressFileItem()` 压缩（目标 < 5MB）
+- [ ] 压缩后经 `uploadImage()` 上传到服务器（`POST /order/uploadImage`）
+- [ ] 上传后经 `ocrHandler()` 进行 OCR 识别（`POST /agg-api/tencent-ocr/unifiedOCR`）
+- [ ] OCR 识别结果正确回填到表单字段（车牌号、车架号、所有人等）
+- [ ] 上传槽位显示拍摄的照片缩略图
+
+### 8.4 非行驶证槽位不受影响
+- [ ] 点击车头照上传槽位，保持现有 `van-uploader` 直接调起系统选择器的逻辑
+- [ ] 点击保单上传槽位，保持现有 `van-uploader` 直接调起系统选择器的逻辑
+- [ ] 车头照上传后的 `ocrCarFrontHandler()` OCR 识别正常
+
+### 8.5 屏幕适配
+- [ ] 在 iPhone 各型号（SE/标准版/Plus/Pro Max）上引导框比例正确、文字完整显示
+- [ ] 在 Android 主流机型（华为/小米/OPPO/vivo 等）上引导框比例正确、文字完整显示
+- [ ] 竖屏模式下引导框为横向矩形，横屏模式下自适应为纵向矩形
+
+### 8.6 降级场景
+- [ ] 设备不支持 `getUserMedia` 时，降级为 `van-uploader` 直接调起系统选择器
+- [ ] 降级后压缩→上传→OCR流程正常
+- [ ] iOS 微信内置浏览器权限受限时，降级为系统选择器
+
+---
+
+## 九、非功能要求
++ **性能**：拍摄引导页从点击槽位到展示引导框的耗时 < 500ms；拍摄按钮响应 < 200ms；Canvas 捕获帧 < 100ms。
++ **兼容性**：支持 iOS Safari 12+、Android Chrome 80+、微信/企业微信内置浏览器；需兼容 WebView 环境。
++ **适配性**：支持屏幕宽度 320px - 430px 的主流手机；引导框和文字在不同尺寸下自适应，不出现截断或重叠。
++ **安全性**：引导内容为纯前端静态展示，不涉及用户照片上传前的任何数据采集与存储；相机流在页面关闭时立即释放。
++ **降级方案**：若设备不支持 WebRTC/getUserMedia，降级为现有的 `van-uploader` 直接调起系统选择器，不阻断用户上传流程。
+
+---
+
+
+
+## 流程图
+### 改造后完整流程
+```plain
+用户在 vehicleAdd.vue 点击上传槽位
+        │
+        ▼
+┌─────────────────────┐
+│ 是否为行驶证三个    │
+│ 槽位之一？          │
+│ (主页/副页/车辆照片)│
+└─────────────────────┘
+   │              │
+   否             是
+   │              ▼
+   │    ┌─────────────────────┐
+   │    │ 检测设备是否支持    │
+   │    │ getUserMedia？      │
+   │    └─────────────────────┘
+   │       │           │
+   │      否          是
+   │       │           │
+   │       ▼           ▼
+   │    降级：      进入拍摄引导页
+   │    van-uploader  （WebRTC相机预览 +
+   │    直接调起      浅色背景 + 引导框 +
+   │    系统选择器    Hero卡 + 要点卡 + 角标）
+   │       │           │
+   │       │    ┌──────┼──────┐
+   │       │    ▼      ▼      ▼
+   │       │   返回   拍摄   点击
+   │       │   车辆   按钮   背景
+   │       │   管理页  │    （无响应）
+   │       │          ▼
+   │       │   ┌──────────────┐
+   │       │   │ 照片预览确认  │
+   │       │   │ 页面          │
+   │       │   └──────────────┘
+   │       │          │
+   │       │    ┌─────┼─────┐
+   │       │    ▼     ▼     ▼
+   │       │   重拍  确认  返回
+   │       │    │     使用  车辆
+   │       │    │     │     管理页
+   │       │    │     ▼
+   │       │    │  构造 { file, content }
+   │       │    │  传入 after-read Handler
+   │       │    │     │
+   ▼       ▼    ▼     ▼
+┌─────────────────────────┐
+│ 现有流程（完全不变）     │
+│ compressFileItem() 压缩  │
+│       │                 │
+│       ▼                 │
+│ uploadImage() 上传       │
+│ POST /order/uploadImage  │
+│       │                 │
+│       ▼                 │
+│ ocrHandler() OCR识别     │
+│ POST /agg-api/           │
+│   tencent-ocr/unifiedOCR │
+│       │                 │
+│       ▼                 │
+│ 回填表单字段             │
+│ (车牌号/车架号/所有人等) │
+└─────────────────────────┘
+```
+
+---
+
+## 影响范围说明
+| 维度 | 影响说明 |
+| --- | --- |
+| **功能** | 仅新增行驶证拍摄前的取景引导层，不改变车辆管理页其他功能和OCR识别流程 |
+| **数据** | 无新增业务数据；不修改现有上传接口的入参和出参 |
+| **接口** | 无接口变更，复用现有 `POST /order/uploadImage` 和 `POST /agg-api/tencent-ocr/unifiedOCR` |
+| **配置** | 无变更 |
+| **用户习惯** | 用户上传行驶证时多了一步引导页+预览确认，但流程轻量，拍摄确认后无缝衔接现有压缩→上传→OCR流程，整体体验提升 |
+
+
+
+
+## 测试关注点
+| 测试类型 | 关注点 |
+| --- | --- |
+| **功能测试** | 三页槽位均正确进入拍摄引导页；引导框比例正确；提示文字完整显示；拍摄后进入预览确认；确认后正确回填到 `van-uploader` 并触发现有 Handler |
+| **流程衔接测试** | 确认使用后 `compressFileItem` 压缩正常；`uploadImage` 上传成功；`ocrHandler` OCR 识别结果正确回填表单；行驶证主页 OCR 回填车牌号/车架号/所有人等；行驶证副页 OCR 回填档案编号/核载人数等 |
+| **兼容测试** | iPhone SE/标准版/Plus/Pro Max；华为/小米/OPPO/vivo 主流机型；微信/企业微信内置浏览器；Safari/Chrome |
+| **回归测试** | 车头照等非行驶证槽位保持原有直接调选择器逻辑；车辆管理页其他功能不受影响；OCR 识别与审核流程正常；修改车辆时重新上传行驶证正常 |
+| **降级测试** | 不支持 `getUserMedia` 的设备降级为 `van-uploader` 系统选择器；降级后压缩→上传→OCR 流程正常 |
+| **适配测试** | 竖屏/横屏切换；320px 窄屏与 430px 宽屏的显示效果；文字不截断、按钮可点击 |
+
+
+
+
+
+
+
+
diff --git a/.kaifa/调度App-H5行驶证拍摄取景引导原型 (2).html b/.kaifa/调度App-H5行驶证拍摄取景引导原型 (2).html
new file mode 100644
index 00000000..4b1bd761
--- /dev/null
+++ b/.kaifa/调度App-H5行驶证拍摄取景引导原型 (2).html	
@@ -0,0 +1,3791 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="dark" data-trae-theme="dark"><head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>调度App H5 - 行驶证拍摄取景引导原型（基于现有流程改造）</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+    background: linear-gradient(180deg, #eef1f6 0%, #e4e8f0 100%);
+    color: #323643;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 100vh;
+    padding: 20px;
+    gap: 24px;
+  }
+
+  /* ===== 手机外框 ===== */
+  .phone-frame {
+    width: 375px;
+    height: 812px;
+    background: #000;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 12px 48px rgba(0,0,0,.22);
+    border-radius: 40px;
+    border: 3px solid #1a1a1a;
+    flex-shrink: 0;
+  }
+  .phone-notch {
+    width: 150px; height: 28px;
+    background: #1a1a1a;
+    border-radius: 0 0 18px 18px;
+    position: absolute; top: 0; left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
+  }
+  .phone-home-bar {
+    width: 134px; height: 5px;
+    background: rgba(255,255,255,.35);
+    border-radius: 3px;
+    position: absolute; bottom: 8px; left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
+  }
+
+  /* ===== 页面内容区 ===== */
+  .page-content {
+    height: 100%; width: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* ===== 车辆管理页（现有页面） ===== */
+  .vehicle-page {
+    position: absolute; inset: 0;
+    background: #F7F8FA;
+    display: flex; flex-direction: column;
+    z-index: 1;
+  }
+  .vehicle-page.hide { display: none; }
+
+  .vehicle-nav {
+    display: flex; align-items: center;
+    height: 48px; padding: 0 12px;
+    padding-top: 28px;
+    background: #2C395F; color: #fff;
+  }
+  .vehicle-nav .back-btn {
+    font-size: 22px; width: 36px; cursor: pointer; line-height: 1; opacity: .7;
+  }
+  .vehicle-nav .title {
+    flex: 1; text-align: center;
+    font-size: 18px; font-weight: bolder; opacity: .7;
+  }
+  .vehicle-nav .spacer { width: 36px; }
+
+  .vehicle-body {
+    flex: 1; overflow-y: auto;
+    padding: 0;
+  }
+  .vehicle-body::-webkit-scrollbar { display: none; }
+
+  .vehicle-card {
+    background: #FFFFFF;
+    box-shadow: 0px 2px 10px 0px rgba(216,216,216,0.5);
+    border-radius: 6px;
+    margin: 10px 13px;
+    padding: 0 15px;
+  }
+
+  .upload-item {
+    display: flex; align-items: center;
+    padding: 14px 0;
+    border-bottom: 1px solid #E9E9EA;
+    gap: 12px;
+  }
+  .upload-item:last-child { border-bottom: none; }
+  .upload-label {
+    font-size: 14px; color: #323643;
+    white-space: nowrap; line-height: 1;
+    flex-shrink: 0; width: 100px;
+    font-weight: bold;
+  }
+  .upload-label .required { color: #e74c3c; margin-right: 2px; }
+  .upload-slot {
+    width: 80px; height: 54px;
+    border: 1.5px dashed #bbb;
+    border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer; transition: all .2s;
+    background: #fafafa;
+    position: relative;
+  }
+  .upload-slot:hover { border-color: #354D93; background: #f0f4ff; }
+  .upload-slot.has-image {
+    border: none; background: none;
+  }
+  .upload-slot .plus-icon {
+    font-size: 24px; color: #ccc; line-height: 1;
+  }
+  .upload-slot .slot-img {
+    width: 100%; height: 100%;
+    object-fit: cover; border-radius: 6px;
+  }
+  .upload-slot .guide-badge {
+    position: absolute; top: -6px; right: -6px;
+    background: #354D93; color: #fff;
+    font-size: 9px; padding: 2px 5px;
+    border-radius: 8px; white-space: nowrap;
+  }
+
+  .form-field {
+    display: flex; align-items: center;
+    padding: 14px 0;
+    border-bottom: 1px solid #E9E9EA;
+  }
+  .form-field:last-child { border-bottom: none; }
+  .form-field .field-label {
+    font-size: 14px; width: 100px; flex-shrink: 0;
+    font-weight: bold; color: #323643;
+  }
+  .form-field .field-value {
+    flex: 1; font-size: 14px; color: #323643; opacity: .5;
+    text-align: right;
+  }
+
+  .vehicle-footer {
+    padding: 12px 16px;
+    padding-bottom: calc(20px + env(safe-area-inset-bottom));
+  }
+  .submit-btn {
+    width: 100%; height: 46px;
+    background: #354D93; color: #fff;
+    border: none; border-radius: 23px;
+    font-size: 16px; font-weight: 600;
+    cursor: pointer;
+  }
+
+  /* ===== 拍摄引导页 ===== */
+  .camera-page {
+    --accent: #354D93;
+    --accent-soft: rgba(53,77,147,.42);
+    position: absolute; inset: 0;
+    background: #F5F5F5;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    z-index: 10;
+  }
+  .camera-page.show { display: flex; }
+
+  .camera-bg {
+    position: absolute; inset: 0;
+    background: linear-gradient(160deg, #F7F9FC 0%, #EEF1F6 50%, #E6EAF1 100%);
+    z-index: 1;
+  }
+  .camera-bg::after {
+    content: '相机预览画面';
+    position: absolute;
+    left: 50%; bottom: 120px;
+    transform: translateX(-50%);
+    color: rgba(53,77,147,.25);
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  .camera-nav {
+    position: relative; z-index: 10;
+    display: flex; align-items: center;
+    height: 52px; padding: 0 0 0 14px;
+    padding-top: 28px;
+    background: #2C395F;
+    color: #fff;
+  }
+  .camera-nav .back-btn {
+    font-size: 22px; width: 36px; cursor: pointer;
+    line-height: 1; color: #fff;
+    flex-shrink: 0; text-align: left;
+  }
+  .camera-nav .title {
+    flex: 1; text-align: left;
+    font-size: 18px; font-weight: bolder;
+    letter-spacing: .5px; color: #fff;
+    padding-left: 4px;
+  }
+  .camera-nav .spacer { display: none; }
+
+  .guide-layer {
+    position: absolute; inset: 0;
+    z-index: 5;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    padding-top: 80px; padding-bottom: 100px;
+  }
+
+  /* ===== 顶部主指令 Hero ===== */
+  .guide-hero {
+    display: flex; align-items: center; gap: 12px;
+    background: #FFFFFF;
+    border: 1px solid #E9E9EA;
+    border-radius: 6px;
+    padding: 12px 15px;
+    margin-bottom: 24px;
+    max-width: 322px; width: calc(100% - 48px);
+    box-shadow: 0 2px 10px rgba(20,30,50,.08);
+  }
+  .guide-hero-icon {
+    width: 42px; height: 42px; flex-shrink: 0;
+    border-radius: 6px;
+    background: rgba(53,77,147,.10);
+    display: flex; align-items: center; justify-content: center;
+    color: #354D93;
+  }
+  .guide-hero-icon svg { width: 23px; height: 23px; }
+  .guide-hero-text { text-align: left; }
+  .guide-hero-title {
+    color: #222; font-size: 16px; font-weight: 700; line-height: 1.3;
+    letter-spacing: .3px;
+  }
+  .guide-hero-sub {
+    color: #5B606E; font-size: 12.5px; margin-top: 4px; line-height: 1.4;
+  }
+
+  /* ===== 取景要点（do / don't 图标卡） ===== */
+  .guide-tips {
+    display: flex; gap: 10px; margin-top: 22px;
+    padding: 0 14px; max-width: 340px; width: 100%;
+  }
+  .tip-item {
+    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
+    background: #FFFFFF;
+    border-radius: 6px; padding: 11px 4px 9px;
+    border: 1px solid #E9E9EA;
+    box-shadow: 0 2px 8px rgba(20,30,50,.06);
+  }
+  .tip-ico {
+    width: 28px; height: 28px; border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .tip-ico svg { width: 17px; height: 17px; }
+  .tip-item.ok .tip-ico { background: rgba(53,77,147,.10); color: #354D93; }
+  .tip-item.warn .tip-ico { background: rgba(255,85,59,.12); color: #FF553B; }
+  .tip-label { color: #5B606E; font-size: 11.5px; line-height: 1.3; text-align: center; }
+
+  .guide-frame-outer {
+    position: relative;
+    width: 300px; height: 210px;
+    flex-shrink: 0;
+    filter: drop-shadow(0 4px 16px rgba(20,30,50,.12));
+  }
+  .corner {
+    position: absolute;
+    width: 30px; height: 30px;
+    border-color: var(--accent);
+    border-style: solid; z-index: 10;
+  }
+  .corner.tl { top: -4px; left: -4px; border-width: 4px 0 0 4px; border-radius: 4px 0 0 0; }
+  .corner.tr { top: -4px; right: -4px; border-width: 4px 4px 0 0; border-radius: 0 4px 0 0; }
+  .corner.bl { bottom: -4px; left: -4px; border-width: 0 0 4px 4px; border-radius: 0 0 0 4px; }
+  .corner.br { bottom: -4px; right: -4px; border-width: 0 4px 4px 0; border-radius: 0 0 4px 0; }
+
+  .guide-hole {
+    position: absolute; inset: 0;
+    border-radius: 8px; overflow: hidden;
+  }
+  .guide-mask {
+    position: absolute; inset: 0;
+    border-radius: 8px;
+    background: #FFFFFF;
+    pointer-events: none;
+  }
+  .guide-frame-border {
+    position: absolute; inset: 0;
+    border: 3px solid #C2C8D2;
+    border-radius: 8px;
+    pointer-events: none;
+    z-index: 9;
+  }
+
+  /* ===== 证件模板叠层（引导对齐） ===== */
+  .license-template {
+    position: absolute; inset: 0;
+    z-index: 6;
+    border: 1.5px solid rgba(53,77,147,.55);
+    border-radius: 4px;
+    overflow: hidden;
+    pointer-events: none;
+    background: rgba(53,77,147,.06);
+  }
+  .lt-inner {
+    position: absolute; inset: 5px;
+    display: flex; flex-direction: column;
+  }
+  .lt-title { text-align: center; margin-bottom: 4px; }
+  .lt-title-line {
+    font-size: 10px; color: rgba(53,77,147,.9);
+    font-weight: bold;
+    letter-spacing: 1px;
+    white-space: nowrap;
+  }
+  .lt-seal {
+    position: absolute; left: 10px; bottom: 10px;
+    width: 34px; height: 34px;
+    border: 1.5px dashed rgba(255,85,59,.85);
+    border-radius: 2px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 5.5px; color: rgba(255,85,59,.85);
+  }
+
+  /* 通用字段行（副页使用） */
+  .lt-row { display: flex; align-items: center; gap: 2px; line-height: 1.3; }
+  .lt-label {
+    font-size: 6.5px; color: rgba(255,255,255,.22);
+    white-space: nowrap;
+  }
+  .lt-line { flex: 1; height: 1px; background: rgba(255,255,255,.1); }
+
+  /* 主页：仅保留标题+印章 */
+  .lt-front-page .lt-inner {
+    justify-content: flex-start;
+  }
+
+  /* 副页：仅保留底部条形码 */
+  .lt-back-page .lt-inner {
+    justify-content: flex-end;
+  }
+  .lt-barcode-area {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+    padding-bottom: 6px;
+    padding-right: 8px;
+  }
+  .lt-barcode-strip {
+    display: flex;
+    align-items: flex-end;
+    height: 28px;
+    gap: 1px;
+  }
+  .lt-barcode-strip .lt-bar {
+    background: rgba(53,77,147,.6);
+    width: 1.5px;
+    border-radius: 0.5px;
+  }
+  .lt-barcode-strip .lt-bar.wide { width: 2.8px; }
+  .lt-barcode-strip .lt-bar.short { height: 50%; }
+  .lt-barcode-strip .lt-bar.medium { height: 70%; }
+  .lt-barcode-strip .lt-bar.tall { height: 100%; }
+  .lt-barcode-num {
+    font-size: 8px;
+    color: rgba(53,77,147,.9);
+    letter-spacing: 2px;
+    font-family: 'Courier New', monospace;
+  }
+
+  /* 车辆照片模板 */
+  .lt-car-page .lt-car-outline {
+    flex: 1; display: flex; align-items: center; justify-content: center;
+  }
+  .lt-car-page .lt-car-outline svg { width: 140px; height: 70px; opacity: .6; color: #354D93; }
+
+  /* 原 .tip-text-bottom 已重构为 .guide-tips（见上方取景要点） */
+
+  .shoot-bar {
+    position: absolute; bottom: 0; left: 0; right: 0;
+    z-index: 10;
+    display: flex; flex-direction: column; align-items: center;
+    padding-bottom: 32px;
+    padding-bottom: calc(32px + env(safe-area-inset-bottom));
+    background: #FFFFFF;
+    border-top: 1px solid #E9E9EA;
+  }
+  .shoot-btn {
+    width: 72px; height: 72px;
+    border-radius: 50%;
+    border: 4px solid #354D93;
+    background: #FFFFFF;
+    cursor: pointer; position: relative;
+    transition: transform .15s;
+    box-shadow: 0 0 0 2px rgba(53,77,147,.22), 0 6px 16px rgba(20,30,50,.18);
+  }
+  .shoot-btn:active { transform: scale(.92); }
+  .shoot-btn::after {
+    content: '';
+    position: absolute;
+    left: 50%; top: 50%;
+    transform: translate(-50%, -50%);
+    width: 58px; height: 58px;
+    border-radius: 50%; background: #354D93;
+  }
+  .shoot-label {
+    color: #5B606E;
+    font-size: 12px; margin-top: 10px;
+    letter-spacing: 1px;
+  }
+
+  /* ===== 预览确认页 ===== */
+  .preview-page {
+    position: absolute; inset: 0;
+    background: #F5F5F5;
+    display: none;
+    flex-direction: column;
+    z-index: 20;
+  }
+  .preview-page.show { display: flex; }
+
+  .preview-img-wrap {
+    flex: 1;
+    display: flex; align-items: center; justify-content: center;
+    padding: 20px;
+  }
+  .preview-img {
+    max-width: 100%; max-height: 100%;
+    border-radius: 8px; object-fit: contain;
+  }
+
+  .preview-btns {
+    display: flex; gap: 16px;
+    padding: 0 20px 32px;
+    padding-bottom: calc(32px + env(safe-area-inset-bottom));
+  }
+  .preview-btn {
+    flex: 1; height: 48px;
+    border-radius: 24px; border: none;
+    font-size: 16px; font-weight: 600;
+    cursor: pointer; transition: opacity .15s;
+  }
+  .preview-btn:active { opacity: .8; }
+  .btn-retake {
+    background: rgba(255,255,255,.15);
+    color: #fff;
+    border: 1px solid rgba(255,255,255,.3);
+  }
+  .btn-confirm { background: #354D93; color: #fff; }
+
+  /* ===== 流程提示条 ===== */
+  .flow-indicator {
+    position: absolute;
+    top: -14px; left: 50%;
+    transform: translateX(-50%);
+    z-index: 50;
+    background: rgba(44,57,95,.92);
+    color: #fff;
+    font-size: 11px;
+    padding: 6px 16px;
+    border-radius: 16px;
+    backdrop-filter: blur(8px);
+    display: flex; align-items: center; gap: 8px;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0,0,0,.2);
+    pointer-events: none;
+  }
+  .flow-step {
+    display: flex; align-items: center; gap: 4px;
+  }
+  .flow-step-num {
+    width: 18px; height: 18px;
+    border-radius: 50%;
+    background: rgba(255,255,255,.2);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 10px; font-weight: 700;
+  }
+  .flow-step.active .flow-step-num {
+    background: #354D93;
+  }
+  .flow-step.active { color: #354D93; }
+  .flow-arrow { color: rgba(255,255,255,.3); font-size: 10px; }
+
+  /* ===== 右侧说明面板 ===== */
+  .side-panel {
+    width: 440px;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 2px 16px rgba(0,0,0,.08);
+    overflow: hidden;
+    align-self: flex-start;
+    flex-shrink: 0;
+  }
+  .panel-header {
+    background: #2C395F; color: #fff;
+    padding: 14px 20px; font-size: 15px; font-weight: 600;
+  }
+  .panel-body { padding: 16px 20px 20px; }
+  .panel-body h4 {
+    font-size: 14px; color: #323643; margin-bottom: 8px;
+    padding-bottom: 6px; border-bottom: 1px solid #E9E9EA;
+  }
+  .panel-body p { font-size: 13px; color: #323643; opacity: .7; line-height: 1.75; margin-bottom: 10px; }
+  .panel-body ul { padding-left: 18px; }
+  .panel-body li { font-size: 13px; color: #323643; opacity: .7; line-height: 1.8; margin-bottom: 2px; }
+  .panel-body code {
+    background: #f0f4ff; color: #354D93;
+    padding: 1px 5px; border-radius: 3px;
+    font-size: 12px;
+  }
+
+  .tab-bar {
+    display: flex; border-bottom: 1px solid #eee;
+    margin-bottom: 14px;
+  }
+  .tab-btn {
+    flex: 1; padding: 10px 0; text-align: center;
+    font-size: 13.5px; color: #888; cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all .2s;
+  }
+  .tab-btn.active {
+    color: #2c7be5; font-weight: 600;
+    border-bottom-color: #2c7be5;
+  }
+  .tab-btn:hover { color: #2c7be5; }
+
+  .highlight-box {
+    background: #eef6ff; border: 1px solid #cce0ff;
+    border-radius: 8px; padding: 12px 14px;
+    margin: 10px 0;
+  }
+  .highlight-box p { margin: 0; color: #2c5aa0; font-size: 13px; line-height: 1.7; }
+  .highlight-box strong { color: #1a4a9c; }
+
+  .warn-box {
+    background: #fff7e6; border: 1px solid #ffe0a3;
+    border-radius: 8px; padding: 12px 14px;
+    margin: 10px 0;
+  }
+  .warn-box p { margin: 0; color: #8a6d3b; font-size: 13px; line-height: 1.7; }
+
+  .spec-table {
+    width: 100%; font-size: 12.5px;
+    border-collapse: collapse; margin-top: 6px;
+  }
+  .spec-table th, .spec-table td {
+    padding: 8px 6px; border: 1px solid #e4e7eb;
+    text-align: left;
+  }
+  .spec-table th {
+    background: #f5f7fa; font-weight: 600; color: #333;
+  }
+  .spec-table td { color: #555; }
+
+  .action-hint {
+    background: #fff7e6;
+    border-left: 3px solid #f39c12;
+    border-radius: 6px;
+    padding: 10px 12px;
+    margin: 10px 0;
+    font-size: 12.5px;
+    color: #8a6d3b;
+    line-height: 1.6;
+  }
+
+  .flow-diagram {
+    background: #f8f9fb; border: 1px solid #e4e7eb;
+    border-radius: 8px; padding: 14px;
+    margin: 10px 0;
+    font-size: 12px; line-height: 1.8;
+    color: #555;
+    font-family: 'Courier New', monospace;
+    white-space: pre;
+    overflow-x: auto;
+  }
+
+  @media (max-width: 860px) {
+    body { flex-direction: column; align-items: center; }
+    .side-panel { width: 375px; margin-top: 20px; }
+  }
+</style>
+<style>.trae-browser-inspect-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999997;pointer-events:auto;background:rgba(0,0,0,0)}.trae-browser-inspect-highlight-box{position:absolute;top:0;left:0;z-index:999998;display:none}.trae-browser-inspect-highlight-tag{position:absolute;left:0px;top:0px;height:18px;padding:0 6px;box-sizing:border-box;border-radius:4px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:12px;font-weight:400;display:none;align-items:center;z-index:999999}.trae-browser-inspect-highlight-box-show{display:flex}.trae-browser-inspect-select-button.trae-browser-inspect-highlight-box-show{display:flex !important}.trae-browser-inspect-select-button{position:absolute;top:0;left:0;background-color:var(--vscode-icube--bg-bg-base-secondary, "#222427");color:var(--vscode-icube--text-text-default-active, "#F5F9FE");font-size:11px;font-weight:500;border:1px solid var(--vscode-icube--border-neutral-l1, "#E0E2F217");border-radius:6px;padding:0 8px;height:32px;display:none;align-items:center;cursor:pointer;z-index:999999;gap:4px}.trae-browser-inspect-select-button svg,.trae-browser-inspect-select-button span{z-index:1}.trae-browser-inspect-select-highlight-box{background:rgba(0,0,0,0) !important}.trae-browser-inspect-select-highlight-box .trae-browser-inspect-highlight-tag{background-color:var(--vscode-icube--status-success-active, "#1E8B56")}.trae-browser-inspect-comment-card-container{position:fixed;top:0;left:0;z-index:9999999;pointer-events:auto}.trae-browser-inspect-comment-card-container .trae-browser-inspect-comment-card{display:flex;padding-top:0px !important;align-items:center;z-index:9999999 !important;background-color:var(--vscode-icube--bg-bg-menu)}*[contenteditable]{outline:none}.trae-browser-inspect-click-effect{position:fixed;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border-radius:50%;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);pointer-events:none;animation:trae-browser-inspect-ripple 500ms ease-out forwards;z-index:999999}@keyframes trae-browser-inspect-ripple{0%{transform:scale(0.3);opacity:.8}100%{transform:scale(2);opacity:0}}.trae-browser-inspect-ref-box{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");pointer-events:none;z-index:999998;animation:trae-browser-inspect-fadeInOut 2s ease-in-out forwards}.trae-browser-inspect-ref-label{position:absolute;top:-14px;left:0;height:14px;padding:0 4px;box-sizing:border-box;border-radius:2px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:9px;font-weight:500;display:flex;align-items:center;white-space:nowrap;z-index:999999}@keyframes trae-browser-inspect-fadeInOut{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}.trae-browser-inspect-input-highlight{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");border-radius:4px;pointer-events:none;z-index:999998;box-shadow:0 0 8px var(--vscode-icube-colorSuccessHover, "#2FB287");animation:trae-browser-inspect-input-pulse 600ms ease-out forwards}@keyframes trae-browser-inspect-input-pulse{0%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}30%{opacity:1;box-shadow:0 0 12px var(--vscode-icube-colorSuccessHover, "#2FB287")}100%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}}.trae-browser-inspect-virtual-cursor{position:fixed;width:20px;height:20px;pointer-events:none;z-index:9999999;opacity:0;transition:opacity .2s ease}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-visible{opacity:1}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-idle{animation:trae-browser-inspect-cursor-breathe 2s ease-in-out infinite}.trae-browser-inspect-virtual-cursor svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}@keyframes trae-browser-inspect-cursor-breathe{0%,100%{opacity:.7}50%{opacity:1}}.trae-browser-inspect-scroll-indicator{position:fixed;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:8px;background-color:rgba(0,0,0,.7);color:#fff;font-size:13px;font-weight:500;pointer-events:none;z-index:999999;animation:trae-browser-inspect-indicator-fade 800ms ease-out forwards;backdrop-filter:blur(4px)}.trae-browser-inspect-scroll-indicator svg{width:16px;height:16px;fill:#fff}.trae-browser-inspect-scroll-indicator.trae-scroll-up{top:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-down{bottom:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-left{left:12px;top:50%;transform:translateY(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-right{right:12px;top:50%;transform:translateY(-50%)}@keyframes trae-browser-inspect-indicator-fade{0%{opacity:0;transform:translateX(-50%) scale(0.9)}15%{opacity:1;transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-scroll-indicator.trae-scroll-left,.trae-browser-inspect-scroll-indicator.trae-scroll-right{animation-name:trae-browser-inspect-indicator-fade-y}@keyframes trae-browser-inspect-indicator-fade-y{0%{opacity:0;transform:translateY(-50%) scale(0.9)}15%{opacity:1;transform:translateY(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-key-badge{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);padding:8px 20px;border-radius:8px;background-color:rgba(0,0,0,.8);color:#fff;font-size:18px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,monospace;pointer-events:none;z-index:999999;animation:trae-browser-inspect-key-pop 500ms ease-out forwards;backdrop-filter:blur(4px);border:1px solid hsla(0,0%,100%,.15);box-shadow:0 4px 12px rgba(0,0,0,.3);letter-spacing:1px}@keyframes trae-browser-inspect-key-pop{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(0.9)}20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}.trae-browser-inspect-step-badge{position:fixed;top:12px;left:12px;padding:6px 12px;border-radius:6px;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);color:#fff;font-size:12px;font-weight:600;pointer-events:none;z-index:999999;animation:trae-browser-inspect-step-slide 600ms ease-out forwards;box-shadow:0 2px 8px rgba(47,178,135,.3);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trae-browser-inspect-step-badge.trae-step-old{opacity:.4;transform:translateY(0)}@keyframes trae-browser-inspect-step-slide{0%{opacity:0;transform:translateX(-20px)}20%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(0)}}.trae-browser-inspect-drag-trail{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999998}.trae-browser-inspect-drag-trail svg{width:100%;height:100%}.trae-browser-inspect-drag-trail .trae-drag-path{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;stroke-dasharray:8 4;opacity:.6;animation:trae-browser-inspect-dash 600ms linear forwards}.trae-browser-inspect-drag-trail .trae-drag-dot{fill:var(--vscode-icube-colorSuccessHover, #2FB287);filter:drop-shadow(0 0 4px rgba(47, 178, 135, 0.6))}.trae-browser-inspect-drag-trail .trae-drag-endpoint{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;opacity:.5}@keyframes trae-browser-inspect-dash{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}.trae-browser-inspect-drag-trail.trae-drag-fade{animation:trae-browser-inspect-trail-fade 400ms ease-out forwards}@keyframes trae-browser-inspect-trail-fade{0%{opacity:1}100%{opacity:0}}</style><script type="module">(async () => {
+  try {
+    const client = await import('/@vite/client');
+    const hmr = client.createHotContext('hmr-handler/fake.js');
+    hmr.on('vite:afterUpdate', window['__ICUBE_WEBVIEW_HMR_CALLBACK_1785203968911']);
+  } catch {}
+})();</script><style>.buttonsCard-bTXa5j {
+  padding: var(--spacer-4);
+  background: none;
+  align-items: center;
+  gap: 0;
+  display: inline-flex;
+}
+
+.actionButton-opZL8g {
+  align-items: center;
+  gap: var(--spacer-4);
+  padding: var(--spacer-4) var(--spacer-8);
+  border-radius: var(--radius-4);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+  background: none;
+  border: none;
+  display: inline-flex;
+}
+
+.actionButton-opZL8g:hover {
+  background: var(--bg-bg-overlay-l2);
+}
+
+.actionButton-opZL8g:active {
+  background: var(--bg-bg-overlay-l3);
+}
+
+.actionButton-opZL8g:focus-visible {
+  outline: 2px solid var(--status-primary-default);
+  outline-offset: 1px;
+}
+
+.icon-ObJEMt {
+  width: 16px;
+  height: 16px;
+  color: var(--icon-icon-default);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.title-GptGAg {
+  font-family: var(--font-family-default);
+  color: var(--text-text-default);
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.shortcut-nbwTG4 {
+  color: var(--icon-icon-secondary);
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+  display: flex;
+}
+
+.shortcutKey-EE6xrE {
+  font-family: var(--font-family-default);
+  color: var(--icon-icon-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 12px;
+}
+
+.divider-cFGVKQ {
+  box-sizing: content-box;
+  background-clip: content-box;
+  background-color: var(--border-border-neutral-l2);
+  flex-shrink: 0;
+  width: 1px;
+  height: 12px;
+  padding: 0 6px;
+}
+
+</style><style>.commentEditorCard-Un4Xaa {
+  width: 320px;
+  padding: var(--spacing-sm);
+  background: none;
+  flex-direction: column;
+  display: flex;
+}
+
+.textContainer-ZISwbW {
+  padding: var(--spacing-sm);
+  background: var(--bg-bg-overlay-l1);
+  border: 1px solid var(--border-border-neutral-l3);
+  border-radius: var(--radius-sm);
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding-right: 0;
+  display: flex;
+}
+
+.textarea-ggj4j6 {
+  padding: 0 var(--spacing-sm) 0 2px;
+  font-family: var(--font-family-default);
+  color: var(--text-text-default);
+  resize: none;
+  scrollbar-width: thin;
+  scrollbar-color: #56637726 transparent;
+  background: none;
+  border: none;
+  outline: none;
+  flex: 1;
+  max-height: 140px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+  overflow-y: auto;
+}
+
+.textarea-ggj4j6::-webkit-scrollbar {
+  width: 6px;
+}
+
+.textarea-ggj4j6::-webkit-scrollbar-track {
+  background: none;
+}
+
+.textarea-ggj4j6::-webkit-scrollbar-thumb {
+  background: #56637726;
+  border-radius: 3px;
+}
+
+.textarea-ggj4j6::placeholder {
+  color: var(--text-text-tertiary);
+}
+
+.actionBar-u_t8vc {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-xs);
+  opacity: 0;
+  max-height: 0;
+  transition: max-height .2s ease-out, opacity .2s ease-out, margin-top .2s ease-out;
+  display: flex;
+  overflow: hidden;
+}
+
+.actionBarVisible-PxXsje {
+  opacity: 1;
+  max-height: 32px;
+  margin-top: var(--spacing-sm);
+}
+
+.actionBarNoExpandAnimation-FCra2J {
+  transition: opacity .2s ease-out;
+}
+
+.actionBarNoExpandAnimation-FCra2J.actionBarVisible-PxXsje {
+  max-height: 32px;
+  margin-top: var(--spacing-sm);
+}
+
+.cancelButton-Lu0me9 {
+  height: 24px;
+  padding: 0 var(--spacing-xs);
+  background: var(--bg-bg-overlay-l2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+  border: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.cancelButton-Lu0me9:hover, .cancelButton-Lu0me9:active {
+  background: var(--bg-bg-overlay-l3);
+}
+
+.cancelButton-Lu0me9:focus-visible {
+  outline: 2px solid var(--status-primary-default);
+  outline-offset: 1px;
+}
+
+.cancelText-j1RS1q {
+  font-family: var(--font-family-default);
+  color: var(--text-text-default);
+  white-space: nowrap;
+  padding: 0 var(--spacing-xs);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.submitButton-BqyEd7 {
+  height: 24px;
+  padding: 0 var(--spacing-sm);
+  background: var(--bg-bg-invert);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+  border: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.submitButton-BqyEd7:hover:not(:disabled) {
+  background: var(--bg-bg-invert-hover);
+}
+
+.submitButton-BqyEd7:active:not(:disabled) {
+  background: var(--bg-bg-invert-active);
+}
+
+.submitButton-BqyEd7:disabled {
+  background: var(--bg-bg-invert-disabled);
+  color: var(--text-text-disabled);
+  cursor: not-allowed;
+}
+
+.submitButton-BqyEd7:focus-visible {
+  outline: 2px solid var(--status-primary-default);
+  outline-offset: 1px;
+}
+
+.submitText-N58QRq {
+  font-family: var(--font-family-default);
+  color: var(--text-text-onaccent);
+  white-space: nowrap;
+  padding: 0 var(--spacing-xs);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.submitButton-BqyEd7:disabled .submitText-N58QRq {
+  color: var(--text-text-disabled);
+}
+
+.submitIcon-vyKSKQ {
+  width: 12px;
+  height: 12px;
+  color: var(--icon-icon-onaccent);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.submitButton-BqyEd7:disabled .submitIcon-vyKSKQ {
+  color: var(--text-text-disabled);
+}
+
+.limitWarning-Hocj0v {
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--status-warning-default);
+  user-select: none;
+  flex: 1;
+  display: flex;
+}
+
+.limitText-hBXEaq {
+  font-family: var(--font-family-default);
+  color: var(--status-warning-default);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+</style><style>.previewCommentCardContainer-HEkpU8 {
+  border-radius: var(--radius-8);
+  background: var(--bg-bg-menu);
+  border: 1px solid var(--border-border-neutral-l1);
+  transition: width .25s cubic-bezier(.4, 0, .2, 1), height .25s cubic-bezier(.4, 0, .2, 1);
+  display: inline-block;
+  overflow: hidden;
+  box-shadow: 0 2px 6px #0003, 0 .5px #ffffff0f, inset 0 .5px #ffffff0f;
+}
+
+.previewCommentCardContent-ELaLah {
+  width: max-content;
+  position: relative;
+}
+
+.previewCommentCardFadeEnter-OMhMD9 {
+  opacity: 0;
+}
+
+.previewCommentCardFadeEnterActive-Eacuvn {
+  opacity: 1;
+  transition: opacity .2s ease-in;
+}
+
+.previewCommentCardFadeExit-ms9vgc {
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.previewCommentCardFadeExitActive-vyQTsd {
+  opacity: 0;
+  transition: opacity .15s ease-out;
+}
+
+.previewCommentCardSuccessCard-PWnm2o {
+  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  display: flex;
+}
+
+.previewCommentCardSuccessIcon-Oht9Ir {
+  width: 16px;
+  height: 16px;
+  color: var(--status-success-default);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.previewCommentCardSuccessText-s40BWG {
+  font-family: var(--font-family-default);
+  color: var(--text-text-default);
+  user-select: none;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+</style><style id="trae-browser-inspect-drag-styles">
+            .trae-browser-inspect-draggable {
+                cursor: grab !important;
+            }
+            .trae-browser-inspect-dragging-active {
+                cursor: grabbing !important;
+            }
+            .trae-browser-inspect-drag-ghost {
+                opacity: 0.7;
+                pointer-events: none;
+                position: fixed;
+                z-index: 999998;
+                transform: scale(0.95);
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+                transition: none;
+            }
+            .trae-browser-inspect-element-placeholder {
+                opacity: 0.3;
+            }
+        </style><style>.trae-browser-inspect-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999997;pointer-events:auto;background:rgba(0,0,0,0)}.trae-browser-inspect-highlight-box{position:absolute;top:0;left:0;z-index:999998;display:none}.trae-browser-inspect-highlight-tag{position:absolute;left:0px;top:0px;height:18px;padding:0 6px;box-sizing:border-box;border-radius:4px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:12px;font-weight:400;display:none;align-items:center;z-index:999999}.trae-browser-inspect-highlight-box-show{display:flex}.trae-browser-inspect-select-button.trae-browser-inspect-highlight-box-show{display:flex !important}.trae-browser-inspect-select-button{position:absolute;top:0;left:0;background-color:var(--vscode-icube--bg-bg-base-secondary, "#222427");color:var(--vscode-icube--text-text-default-active, "#F5F9FE");font-size:11px;font-weight:500;border:1px solid var(--vscode-icube--border-neutral-l1, "#E0E2F217");border-radius:6px;padding:0 8px;height:32px;display:none;align-items:center;cursor:pointer;z-index:999999;gap:4px}.trae-browser-inspect-select-button svg,.trae-browser-inspect-select-button span{z-index:1}.trae-browser-inspect-select-highlight-box{background:rgba(0,0,0,0) !important}.trae-browser-inspect-select-highlight-box .trae-browser-inspect-highlight-tag{background-color:var(--vscode-icube--status-success-active, "#1E8B56")}.trae-browser-inspect-comment-card-container{position:fixed;top:0;left:0;z-index:9999999;pointer-events:auto}.trae-browser-inspect-comment-card-container .trae-browser-inspect-comment-card{display:flex;padding-top:0px !important;align-items:center;z-index:9999999 !important;background-color:var(--vscode-icube--bg-bg-menu)}*[contenteditable]{outline:none}.trae-browser-inspect-click-effect{position:fixed;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border-radius:50%;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);pointer-events:none;animation:trae-browser-inspect-ripple 500ms ease-out forwards;z-index:999999}@keyframes trae-browser-inspect-ripple{0%{transform:scale(0.3);opacity:.8}100%{transform:scale(2);opacity:0}}.trae-browser-inspect-ref-box{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");pointer-events:none;z-index:999998;animation:trae-browser-inspect-fadeInOut 2s ease-in-out forwards}.trae-browser-inspect-ref-label{position:absolute;top:-14px;left:0;height:14px;padding:0 4px;box-sizing:border-box;border-radius:2px;background-color:var(--vscode-icube-colorSuccessHover, "#2FB287");color:var(--vscode-icube-colorSnow, "#fff");font-size:9px;font-weight:500;display:flex;align-items:center;white-space:nowrap;z-index:999999}@keyframes trae-browser-inspect-fadeInOut{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}.trae-browser-inspect-input-highlight{position:absolute;border:2px solid var(--vscode-icube-colorSuccessHover, "#2FB287");border-radius:4px;pointer-events:none;z-index:999998;box-shadow:0 0 8px var(--vscode-icube-colorSuccessHover, "#2FB287");animation:trae-browser-inspect-input-pulse 600ms ease-out forwards}@keyframes trae-browser-inspect-input-pulse{0%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}30%{opacity:1;box-shadow:0 0 12px var(--vscode-icube-colorSuccessHover, "#2FB287")}100%{opacity:0;box-shadow:0 0 0 var(--vscode-icube-colorSuccessHover, "#2FB287")}}.trae-browser-inspect-virtual-cursor{position:fixed;width:20px;height:20px;pointer-events:none;z-index:9999999;opacity:0;transition:opacity .2s ease}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-visible{opacity:1}.trae-browser-inspect-virtual-cursor.trae-browser-inspect-cursor-idle{animation:trae-browser-inspect-cursor-breathe 2s ease-in-out infinite}.trae-browser-inspect-virtual-cursor svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}@keyframes trae-browser-inspect-cursor-breathe{0%,100%{opacity:.7}50%{opacity:1}}.trae-browser-inspect-scroll-indicator{position:fixed;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:8px;background-color:rgba(0,0,0,.7);color:#fff;font-size:13px;font-weight:500;pointer-events:none;z-index:999999;animation:trae-browser-inspect-indicator-fade 800ms ease-out forwards;backdrop-filter:blur(4px)}.trae-browser-inspect-scroll-indicator svg{width:16px;height:16px;fill:#fff}.trae-browser-inspect-scroll-indicator.trae-scroll-up{top:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-down{bottom:12px;left:50%;transform:translateX(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-left{left:12px;top:50%;transform:translateY(-50%)}.trae-browser-inspect-scroll-indicator.trae-scroll-right{right:12px;top:50%;transform:translateY(-50%)}@keyframes trae-browser-inspect-indicator-fade{0%{opacity:0;transform:translateX(-50%) scale(0.9)}15%{opacity:1;transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-scroll-indicator.trae-scroll-left,.trae-browser-inspect-scroll-indicator.trae-scroll-right{animation-name:trae-browser-inspect-indicator-fade-y}@keyframes trae-browser-inspect-indicator-fade-y{0%{opacity:0;transform:translateY(-50%) scale(0.9)}15%{opacity:1;transform:translateY(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}.trae-browser-inspect-key-badge{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);padding:8px 20px;border-radius:8px;background-color:rgba(0,0,0,.8);color:#fff;font-size:18px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,monospace;pointer-events:none;z-index:999999;animation:trae-browser-inspect-key-pop 500ms ease-out forwards;backdrop-filter:blur(4px);border:1px solid hsla(0,0%,100%,.15);box-shadow:0 4px 12px rgba(0,0,0,.3);letter-spacing:1px}@keyframes trae-browser-inspect-key-pop{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(0.9)}20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}.trae-browser-inspect-step-badge{position:fixed;top:12px;left:12px;padding:6px 12px;border-radius:6px;background-color:var(--vscode-icube-colorSuccessHover, #2FB287);color:#fff;font-size:12px;font-weight:600;pointer-events:none;z-index:999999;animation:trae-browser-inspect-step-slide 600ms ease-out forwards;box-shadow:0 2px 8px rgba(47,178,135,.3);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trae-browser-inspect-step-badge.trae-step-old{opacity:.4;transform:translateY(0)}@keyframes trae-browser-inspect-step-slide{0%{opacity:0;transform:translateX(-20px)}20%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(0)}}.trae-browser-inspect-drag-trail{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999998}.trae-browser-inspect-drag-trail svg{width:100%;height:100%}.trae-browser-inspect-drag-trail .trae-drag-path{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;stroke-dasharray:8 4;opacity:.6;animation:trae-browser-inspect-dash 600ms linear forwards}.trae-browser-inspect-drag-trail .trae-drag-dot{fill:var(--vscode-icube-colorSuccessHover, #2FB287);filter:drop-shadow(0 0 4px rgba(47, 178, 135, 0.6))}.trae-browser-inspect-drag-trail .trae-drag-endpoint{fill:none;stroke:var(--vscode-icube-colorSuccessHover, #2FB287);stroke-width:2;opacity:.5}@keyframes trae-browser-inspect-dash{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}.trae-browser-inspect-drag-trail.trae-drag-fade{animation:trae-browser-inspect-trail-fade 400ms ease-out forwards}@keyframes trae-browser-inspect-trail-fade{0%{opacity:1}100%{opacity:0}}</style><script type="module">(async () => {
+  try {
+    const client = await import('/@vite/client');
+    const hmr = client.createHotContext('hmr-handler/fake.js');
+    hmr.on('vite:afterUpdate', window['__ICUBE_WEBVIEW_HMR_CALLBACK_1785203968922']);
+  } catch {}
+})();</script><style>.buttonsCard-bTXa5j {
+  padding: var(--spacer-4);
+  background: none;
+  align-items: center;
+  gap: 0;
+  display: inline-flex;
+}
+
+.actionButton-opZL8g {
+  align-items: center;
+  gap: var(--spacer-4);
+  padding: var(--spacer-4) var(--spacer-8);
+  border-radius: var(--radius-4);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+  background: none;
+  border: none;
+  display: inline-flex;
+}
+
+.actionButton-opZL8g:hover {
+  background: var(--bg-bg-overlay-l2);
+}
+
+.actionButton-opZL8g:active {
+  background: var(--bg-bg-overlay-l3);
+}
+
+.actionButton-opZL8g:focus-visible {
+  outline: 2px solid var(--status-primary-default);
+  outline-offset: 1px;
+}
+
+.icon-ObJEMt {
+  width: 16px;
+  height: 16px;
+  color: var(--icon-icon-default);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.title-GptGAg {
+  font-family: var(--font-family-default);
+  color: var(--text-text-default);
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.shortcut-nbwTG4 {
+  color: var(--icon-icon-secondary);
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+  display: flex;
+}
+
+.shortcutKey-EE6xrE {
+  font-family: var(--font-family-default);
+  color: var(--icon-icon-secondary);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 12px;
+}
+
+.divider-cFGVKQ {
+  box-sizing: content-box;
+  background-clip: content-box;
+  background-color: var(--border-border-neutral-l2);
+  flex-shrink: 0;
+  width: 1px;
+  height: 12px;
+  padding: 0 6px;
+}
+
+</style><style>.commentEditorCard-Un4Xaa {
+  width: 320px;
+  padding: var(--spacing-sm);
+  background: none;
+  flex-direction: column;
+  display: flex;
+}
+
+.textContainer-ZISwbW {
+  padding: var(--spacing-sm);
+  background: var(--bg-bg-overlay-l1);
+  border: 1px solid var(--border-border-neutral-l3);
+  border-radius: var(--radius-sm);
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding-right: 0;
+  display: flex;
+}
+
+.textarea-ggj4j6 {
+  padding: 0 var(--spacing-sm) 0 2px;
+  font-family: var(--font-family-default);
+  color: var(--text-text-default);
+  resize: none;
+  scrollbar-width: thin;
+  scrollbar-color: #56637726 transparent;
+  background: none;
+  border: none;
+  outline: none;
+  flex: 1;
+  max-height: 140px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+  overflow-y: auto;
+}
+
+.textarea-ggj4j6::-webkit-scrollbar {
+  width: 6px;
+}
+
+.textarea-ggj4j6::-webkit-scrollbar-track {
+  background: none;
+}
+
+.textarea-ggj4j6::-webkit-scrollbar-thumb {
+  background: #56637726;
+  border-radius: 3px;
+}
+
+.textarea-ggj4j6::placeholder {
+  color: var(--text-text-tertiary);
+}
+
+.actionBar-u_t8vc {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-xs);
+  opacity: 0;
+  max-height: 0;
+  transition: max-height .2s ease-out, opacity .2s ease-out, margin-top .2s ease-out;
+  display: flex;
+  overflow: hidden;
+}
+
+.actionBarVisible-PxXsje {
+  opacity: 1;
+  max-height: 32px;
+  margin-top: var(--spacing-sm);
+}
+
+.actionBarNoExpandAnimation-FCra2J {
+  transition: opacity .2s ease-out;
+}
+
+.actionBarNoExpandAnimation-FCra2J.actionBarVisible-PxXsje {
+  max-height: 32px;
+  margin-top: var(--spacing-sm);
+}
+
+.cancelButton-Lu0me9 {
+  height: 24px;
+  padding: 0 var(--spacing-xs);
+  background: var(--bg-bg-overlay-l2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+  border: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.cancelButton-Lu0me9:hover, .cancelButton-Lu0me9:active {
+  background: var(--bg-bg-overlay-l3);
+}
+
+.cancelButton-Lu0me9:focus-visible {
+  outline: 2px solid var(--status-primary-default);
+  outline-offset: 1px;
+}
+
+.cancelText-j1RS1q {
+  font-family: var(--font-family-default);
+  color: var(--text-text-default);
+  white-space: nowrap;
+  padding: 0 var(--spacing-xs);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.submitButton-BqyEd7 {
+  height: 24px;
+  padding: 0 var(--spacing-sm);
+  background: var(--bg-bg-invert);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+  border: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.submitButton-BqyEd7:hover:not(:disabled) {
+  background: var(--bg-bg-invert-hover);
+}
+
+.submitButton-BqyEd7:active:not(:disabled) {
+  background: var(--bg-bg-invert-active);
+}
+
+.submitButton-BqyEd7:disabled {
+  background: var(--bg-bg-invert-disabled);
+  color: var(--text-text-disabled);
+  cursor: not-allowed;
+}
+
+.submitButton-BqyEd7:focus-visible {
+  outline: 2px solid var(--status-primary-default);
+  outline-offset: 1px;
+}
+
+.submitText-N58QRq {
+  font-family: var(--font-family-default);
+  color: var(--text-text-onaccent);
+  white-space: nowrap;
+  padding: 0 var(--spacing-xs);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.submitButton-BqyEd7:disabled .submitText-N58QRq {
+  color: var(--text-text-disabled);
+}
+
+.submitIcon-vyKSKQ {
+  width: 12px;
+  height: 12px;
+  color: var(--icon-icon-onaccent);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.submitButton-BqyEd7:disabled .submitIcon-vyKSKQ {
+  color: var(--text-text-disabled);
+}
+
+.limitWarning-Hocj0v {
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--status-warning-default);
+  user-select: none;
+  flex: 1;
+  display: flex;
+}
+
+.limitText-hBXEaq {
+  font-family: var(--font-family-default);
+  color: var(--status-warning-default);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+</style><style>.previewCommentCardContainer-HEkpU8 {
+  border-radius: var(--radius-8);
+  background: var(--bg-bg-menu);
+  border: 1px solid var(--border-border-neutral-l1);
+  transition: width .25s cubic-bezier(.4, 0, .2, 1), height .25s cubic-bezier(.4, 0, .2, 1);
+  display: inline-block;
+  overflow: hidden;
+  box-shadow: 0 2px 6px #0003, 0 .5px #ffffff0f, inset 0 .5px #ffffff0f;
+}
+
+.previewCommentCardContent-ELaLah {
+  width: max-content;
+  position: relative;
+}
+
+.previewCommentCardFadeEnter-OMhMD9 {
+  opacity: 0;
+}
+
+.previewCommentCardFadeEnterActive-Eacuvn {
+  opacity: 1;
+  transition: opacity .2s ease-in;
+}
+
+.previewCommentCardFadeExit-ms9vgc {
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.previewCommentCardFadeExitActive-vyQTsd {
+  opacity: 0;
+  transition: opacity .15s ease-out;
+}
+
+.previewCommentCardSuccessCard-PWnm2o {
+  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  display: flex;
+}
+
+.previewCommentCardSuccessIcon-Oht9Ir {
+  width: 16px;
+  height: 16px;
+  color: var(--status-success-default);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.previewCommentCardSuccessText-s40BWG {
+  font-family: var(--font-family-default);
+  color: var(--text-text-default);
+  user-select: none;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+</style><style id="icube-theme-variables">:root {--vscode-foreground: #d1d3db;--vscode-disabledForeground: #666b75;--vscode-errorForeground: #cc4b53;--vscode-descriptionForeground: #9599a6;--vscode-icon-foreground: #9599a6;--vscode-focusBorder: rgba(0, 0, 0, 0);--vscode-textLink-foreground: #dadde5;--vscode-textLink-activeForeground: #979aa4;--vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);--vscode-textPreformat-foreground: #d7ba7d;--vscode-textPreformat-background: rgba(255, 255, 255, 0.1);--vscode-textBlockQuote-background: #222222;--vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);--vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);--vscode-sash-hoverBorder: #32f08c;--vscode-badge-background: #4d4d4d;--vscode-badge-foreground: #ffffff;--vscode-activityWarningBadge-foreground: #ffffff;--vscode-activityWarningBadge-background: #b27c00;--vscode-activityErrorBadge-foreground: #000000;--vscode-activityErrorBadge-background: #f14c4c;--vscode-scrollbar-shadow: #000000;--vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);--vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);--vscode-progressBar-background: #387bff;--vscode-chart-line: #236b8e;--vscode-chart-axis: rgba(191, 191, 191, 0.4);--vscode-chart-guide: rgba(191, 191, 191, 0.2);--vscode-editor-background: #1a1b1d;--vscode-editor-foreground: #d1d3db;--vscode-editorStickyScroll-background: #1a1b1d;--vscode-editorStickyScrollGutter-background: #1a1b1d;--vscode-editorStickyScrollHover-background: #292c34;--vscode-editorStickyScroll-shadow: #000000;--vscode-editorWidget-background: #252526;--vscode-editorWidget-foreground: #d1d3db;--vscode-editorWidget-border: #454545;--vscode-editorError-foreground: #f14c4c;--vscode-editorWarning-foreground: #cca700;--vscode-editorInfo-foreground: #59a4f9;--vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);--vscode-editorLink-activeForeground: #387bff;--vscode-editor-selectionBackground: rgba(53, 121, 255, 0.28);--vscode-editor-inactiveSelectionBackground: #3a3d41;--vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.15);--vscode-editor-compositionBorder: #ffffff;--vscode-editor-findMatchBackground: #515c6a;--vscode-editor-findMatchHighlightBackground: rgba(218, 221, 229, 0.32);--vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);--vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);--vscode-editorHoverWidget-background: #252526;--vscode-editorHoverWidget-foreground: #d1d3db;--vscode-editorHoverWidget-border: #454545;--vscode-editorHoverWidget-statusBarBackground: #2c2c2d;--vscode-editorInlayHint-foreground: #969696;--vscode-editorInlayHint-background: rgba(77, 77, 77, 0.1);--vscode-editorInlayHint-typeForeground: #969696;--vscode-editorInlayHint-typeBackground: rgba(77, 77, 77, 0.1);--vscode-editorInlayHint-parameterForeground: #969696;--vscode-editorInlayHint-parameterBackground: rgba(77, 77, 77, 0.1);--vscode-editorLightBulb-foreground: #ffcc00;--vscode-editorLightBulbAutoFix-foreground: #75beff;--vscode-editorLightBulbAi-foreground: #ffcc00;--vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);--vscode-editor-snippetFinalTabstopHighlightBorder: #525252;--vscode-diffEditor-insertedTextBackground: rgba(0, 165, 110, 0.28);--vscode-diffEditor-removedTextBackground: rgba(208, 42, 35, 0.28);--vscode-diffEditor-insertedLineBackground: rgba(0, 165, 110, 0.28);--vscode-diffEditor-removedLineBackground: rgba(208, 42, 35, 0.28);--vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);--vscode-diffEditor-unchangedRegionBackground: #1a1b1d;--vscode-diffEditor-unchangedRegionForeground: #d1d3db;--vscode-diffEditor-unchangedCodeBackground: rgba(116, 116, 116, 0.16);--vscode-widget-shadow: rgba(0, 0, 0, 0.16);--vscode-widget-border: #303031;--vscode-toolbar-hoverBackground: rgba(224, 226, 242, 0.05);--vscode-toolbar-activeBackground: rgba(224, 226, 242, 0.08);--vscode-breadcrumb-foreground: rgba(209, 211, 219, 0.8);--vscode-breadcrumb-background: #1a1b1d;--vscode-breadcrumb-focusForeground: #e9eaee;--vscode-breadcrumb-activeSelectionForeground: #e9eaee;--vscode-breadcrumbPicker-background: #2a2d31;--vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);--vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);--vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);--vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);--vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);--vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);--vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);--vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);--vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);--vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);--vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);--vscode-problemsErrorIcon-foreground: #f14c4c;--vscode-problemsWarningIcon-foreground: #cca700;--vscode-problemsInfoIcon-foreground: #59a4f9;--vscode-minimap-findMatchHighlight: #d18616;--vscode-minimap-selectionOccurrenceHighlight: #676767;--vscode-minimap-selectionHighlight: #264f78;--vscode-minimap-infoHighlight: #59a4f9;--vscode-minimap-warningHighlight: #cca700;--vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);--vscode-minimap-foregroundOpacity: #000000;--vscode-minimapSlider-background: rgba(121, 121, 121, 0.2);--vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);--vscode-minimapSlider-activeBackground: rgba(191, 191, 191, 0.2);--vscode-charts-foreground: #d1d3db;--vscode-charts-lines: rgba(209, 211, 219, 0.5);--vscode-charts-red: #f14c4c;--vscode-charts-blue: #59a4f9;--vscode-charts-yellow: #cca700;--vscode-charts-orange: #d18616;--vscode-charts-green: #89d185;--vscode-charts-purple: #b180d7;--vscode-input-background: rgba(224, 226, 242, 0.03);--vscode-input-foreground: #d1d3db;--vscode-inputOption-activeBorder: rgba(224, 226, 242, 0.18);--vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);--vscode-inputOption-activeBackground: rgba(0, 0, 0, 0);--vscode-inputOption-activeForeground: #ffffff;--vscode-input-placeholderForeground: #9599a6;--vscode-inputValidation-infoBackground: #063b49;--vscode-inputValidation-infoBorder: #007acc;--vscode-inputValidation-warningBackground: #352a05;--vscode-inputValidation-warningBorder: #dc8730;--vscode-inputValidation-errorBackground: #5a1d1d;--vscode-inputValidation-errorBorder: #f65a5a;--vscode-dropdown-background: #3c3c3c;--vscode-dropdown-foreground: #f0f0f0;--vscode-dropdown-border: #3c3c3c;--vscode-button-foreground: #000000;--vscode-button-separator: rgba(13, 14, 15, 0.18);--vscode-button-background: #d1d3db;--vscode-button-hoverBackground: #edeff2;--vscode-button-secondaryForeground: #ffffff;--vscode-button-secondaryBackground: #3a3d41;--vscode-button-secondaryHoverBackground: #45494e;--vscode-radio-activeForeground: #ffffff;--vscode-radio-activeBackground: rgba(0, 0, 0, 0);--vscode-radio-activeBorder: rgba(224, 226, 242, 0.18);--vscode-radio-inactiveBorder: rgba(255, 255, 255, 0.2);--vscode-radio-inactiveHoverBackground: rgba(90, 93, 94, 0.5);--vscode-checkbox-background: #3c3c3c;--vscode-checkbox-selectBackground: #252526;--vscode-checkbox-foreground: #f0f0f0;--vscode-checkbox-border: #6b6b6b;--vscode-checkbox-selectBorder: #9599a6;--vscode-checkbox-disabled.background: #777777;--vscode-checkbox-disabled.foreground: #b4b4b4;--vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17);--vscode-keybindingLabel-foreground: #cccccc;--vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6);--vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);--vscode-list-focusOutline: rgba(0, 0, 0, 0);--vscode-list-activeSelectionBackground: rgba(224, 226, 242, 0.08);--vscode-list-activeSelectionForeground: #f5f9fe;--vscode-list-activeSelectionIconForeground: #ffffff;--vscode-list-inactiveSelectionBackground: rgba(224, 226, 242, 0.05);--vscode-list-inactiveSelectionForeground: #f5f9fe;--vscode-list-hoverBackground: rgba(224, 226, 242, 0.05);--vscode-list-dropBackground: rgba(53, 121, 255, 0.2);--vscode-list-dropBetweenBackground: #9599a6;--vscode-list-highlightForeground: #dadde5;--vscode-list-focusHighlightForeground: #dadde5;--vscode-list-invalidItemForeground: #b89500;--vscode-list-errorForeground: #cc4b53;--vscode-list-warningForeground: #cca700;--vscode-listFilterWidget-background: #222427;--vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);--vscode-listFilterWidget-noMatchesOutline: #be1100;--vscode-listFilterWidget-shadow: rgba(0, 0, 0, 0.16);--vscode-list-filterMatchBackground: rgba(218, 221, 229, 0.32);--vscode-list-deemphasizedForeground: #8c8c8c;--vscode-tree-indentGuidesStroke: rgba(224, 226, 242, 0.09);--vscode-tree-inactiveIndentGuidesStroke: rgba(221, 226, 233, 0.08);--vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);--vscode-tree-tableOddRowsBackground: rgba(209, 211, 219, 0.04);--vscode-editorActionList-background: #252526;--vscode-editorActionList-foreground: #d1d3db;--vscode-editorActionList-focusForeground: #f5f9fe;--vscode-editorActionList-focusBackground: rgba(224, 226, 242, 0.08);--vscode-menu-border: rgba(224, 226, 242, 0.09);--vscode-menu-foreground: #d1d3db;--vscode-menu-background: #2a2d31;--vscode-menu-selectionForeground: #f5f9fe;--vscode-menu-selectionBackground: rgba(224, 226, 242, 0.08);--vscode-menu-separatorBackground: rgba(224, 226, 242, 0.09);--vscode-quickInput-background: #202123;--vscode-quickInput-foreground: #d1d3db;--vscode-quickInputTitle-background: #222427;--vscode-pickerGroup-foreground: #d1d3db;--vscode-pickerGroup-border: rgba(224, 226, 242, 0.09);--vscode-quickInputList-focusForeground: #f5f9fe;--vscode-quickInputList-focusIconForeground: #ffffff;--vscode-quickInputList-focusBackground: rgba(224, 226, 242, 0.08);--vscode-search-resultsInfoForeground: #9599a6;--vscode-searchEditor-findMatchBackground: rgba(218, 221, 229, 0.21);--vscode-tab-activeBackground: rgba(224, 226, 242, 0.05);--vscode-tab-unfocusedActiveBackground: rgba(224, 226, 242, 0.05);--vscode-tab-inactiveBackground: #17191a;--vscode-tab-unfocusedInactiveBackground: #17191a;--vscode-tab-activeForeground: #f5f9fe;--vscode-tab-inactiveForeground: #9599a6;--vscode-tab-unfocusedActiveForeground: #d1d3db;--vscode-tab-unfocusedInactiveForeground: rgba(149, 153, 166, 0.5);--vscode-tab-border: rgba(224, 226, 242, 0.09);--vscode-tab-lastPinnedBorder: rgba(204, 204, 204, 0.2);--vscode-tab-activeBorder: #1a1b1d;--vscode-tab-unfocusedActiveBorder: rgba(26, 27, 29, 0.5);--vscode-tab-activeBorderTop: #ffffff;--vscode-tab-unfocusedActiveBorderTop: rgba(255, 255, 255, 0.5);--vscode-tab-selectedBorderTop: #ffffff;--vscode-tab-selectedBackground: #222222;--vscode-tab-selectedForeground: rgba(255, 255, 255, 0.63);--vscode-tab-dragAndDropBorder: #f5f9fe;--vscode-tab-activeModifiedBorder: #3399cc;--vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);--vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);--vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);--vscode-editorPane-background: #1a1b1d;--vscode-editorGroupHeader-tabsBackground: #17191a;--vscode-editorGroupHeader-tabsBorder: rgba(224, 226, 242, 0.09);--vscode-editorGroupHeader-noTabsBackground: #1a1b1d;--vscode-editorGroup-border: #444444;--vscode-editorGroup-dropBackground: rgba(53, 121, 255, 0.2);--vscode-editorGroup-dropIntoPromptForeground: #d1d3db;--vscode-editorGroup-dropIntoPromptBackground: #252526;--vscode-sideBySideEditor-horizontalBorder: #444444;--vscode-sideBySideEditor-verticalBorder: #444444;--vscode-panel-background: #1a1b1d;--vscode-panel-border: rgba(128, 128, 128, 0.35);--vscode-panelTitle-activeForeground: #f5f9fe;--vscode-panelTitle-inactiveForeground: #9599a6;--vscode-panelTitle-activeBorder: #f5f9fe;--vscode-panel-dropBorder: #f5f9fe;--vscode-panelSection-dropBackground: rgba(53, 121, 255, 0.2);--vscode-panelSectionHeader-background: rgba(128, 128, 128, 0.2);--vscode-panelSectionHeader-foreground: #f5f9fe;--vscode-panelSectionHeader-border: rgba(224, 226, 242, 0.13);--vscode-panelSection-border: rgba(128, 128, 128, 0.35);--vscode-panelStickyScroll-background: #1a1b1d;--vscode-panelStickyScroll-shadow: #000000;--vscode-banner-background: rgba(224, 226, 242, 0.08);--vscode-banner-foreground: #f5f9fe;--vscode-banner-iconForeground: #59a4f9;--vscode-statusBar-foreground: #ffffff;--vscode-statusBar-noFolderForeground: #ffffff;--vscode-statusBar-background: rgba(0, 0, 0, 0);--vscode-statusBar-noFolderBackground: rgba(0, 0, 0, 0);--vscode-statusBar-focusBorder: #ffffff;--vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);--vscode-statusBarItem-focusBorder: #ffffff;--vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);--vscode-statusBarItem-hoverForeground: #ffffff;--vscode-statusBarItem-compactHoverBackground: rgba(255, 255, 255, 0.12);--vscode-statusBarItem-prominentForeground: #ffffff;--vscode-statusBarItem-prominentBackground: rgba(0, 0, 0, 0.5);--vscode-statusBarItem-prominentHoverForeground: #ffffff;--vscode-statusBarItem-prominentHoverBackground: rgba(255, 255, 255, 0.12);--vscode-statusBarItem-errorBackground: #82252b;--vscode-statusBarItem-errorForeground: #ffffff;--vscode-statusBarItem-errorHoverForeground: #ffffff;--vscode-statusBarItem-errorHoverBackground: rgba(255, 255, 255, 0.12);--vscode-statusBarItem-warningBackground: #7a6400;--vscode-statusBarItem-warningForeground: #ffffff;--vscode-statusBarItem-warningHoverForeground: #ffffff;--vscode-statusBarItem-warningHoverBackground: rgba(255, 255, 255, 0.12);--vscode-activityBar-background: #222427;--vscode-activityBar-foreground: #f5f9fe;--vscode-activityBar-inactiveForeground: #9599a6;--vscode-activityBar-activeBorder: #f5f9fe;--vscode-activityBar-dropBorder: #f5f9fe;--vscode-activityBarBadge-background: #387bff;--vscode-activityBarBadge-foreground: #ffffff;--vscode-activityBarTop-foreground: #e7e7e7;--vscode-activityBarTop-activeBorder: #e7e7e7;--vscode-activityBarTop-inactiveForeground: rgba(231, 231, 231, 0.6);--vscode-activityBarTop-dropBorder: #e7e7e7;--vscode-profileBadge-background: #4d4d4d;--vscode-profileBadge-foreground: #ffffff;--vscode-statusBarItem-remoteBackground: #16825d;--vscode-statusBarItem-remoteForeground: #ffffff;--vscode-statusBarItem-remoteHoverForeground: #ffffff;--vscode-statusBarItem-remoteHoverBackground: rgba(255, 255, 255, 0.12);--vscode-statusBarItem-offlineBackground: #6c1717;--vscode-statusBarItem-offlineForeground: #ffffff;--vscode-statusBarItem-offlineHoverForeground: #ffffff;--vscode-statusBarItem-offlineHoverBackground: rgba(255, 255, 255, 0.12);--vscode-extensionBadge-remoteBackground: #387bff;--vscode-extensionBadge-remoteForeground: #ffffff;--vscode-sideBar-background: #1a1b1d;--vscode-sideBarTitle-background: #1a1b1d;--vscode-sideBarTitle-foreground: #bbbbbb;--vscode-sideBar-dropBackground: rgba(53, 121, 255, 0.2);--vscode-sideBarSectionHeader-background: #1a1b1d;--vscode-sideBarSectionHeader-foreground: #d1d3db;--vscode-sideBarSectionHeader-border: rgba(224, 226, 242, 0.13);--vscode-sideBarActivityBarTop-border: rgba(224, 226, 242, 0.13);--vscode-sideBarStickyScroll-background: #1a1b1d;--vscode-sideBarStickyScroll-shadow: #000000;--vscode-titleBar-activeForeground: #9599a6;--vscode-titleBar-inactiveForeground: rgba(149, 153, 166, 0.6);--vscode-titleBar-activeBackground: #222427;--vscode-titleBar-inactiveBackground: #222427;--vscode-menubar-selectionForeground: #9599a6;--vscode-menubar-selectionBackground: rgba(224, 226, 242, 0.05);--vscode-commandCenter-foreground: #9599a6;--vscode-commandCenter-activeForeground: #9599a6;--vscode-commandCenter-inactiveForeground: rgba(149, 153, 166, 0.6);--vscode-commandCenter-background: rgba(255, 255, 255, 0.05);--vscode-commandCenter-activeBackground: rgba(255, 255, 255, 0.08);--vscode-commandCenter-border: rgba(149, 153, 166, 0.2);--vscode-commandCenter-activeBorder: rgba(149, 153, 166, 0.3);--vscode-commandCenter-inactiveBorder: rgba(149, 153, 166, 0.15);--vscode-notificationCenter-border: #303031;--vscode-notificationToast-border: #303031;--vscode-notifications-foreground: #d1d3db;--vscode-notifications-background: #2a2d31;--vscode-notificationLink-foreground: #dadde5;--vscode-notificationCenterHeader-background: #363a3f;--vscode-notifications-border: #363a3f;--vscode-notificationsErrorIcon-foreground: #f65a5a;--vscode-notificationsWarningIcon-foreground: #dc8730;--vscode-notificationsInfoIcon-foreground: #387bff;--vscode-icube-colorSnow: #ffffff;--vscode-icube-colorBlack: #000000;--vscode-icube-colorSnowDisable: rgba(255, 255, 255, 0.3);--vscode-icube-modalOverlay: rgba(0, 0, 0, 0.4);--vscode-icube-colorBg1: #1a1b1d;--vscode-icube-colorBg2: #222427;--vscode-icube-colorBg3: #2a2d31;--vscode-icube-colorBg4: #262626;--vscode-icube-diffColorBg3: rgba(40, 42, 46, 0.35);--vscode-icube-colorBgCode: #1a1b1d;--vscode-icube-colorBgTr0: rgba(224, 226, 242, 0.03);--vscode-icube-colorBtnHover: rgba(224, 226, 242, 0.05);--vscode-icube-colorBg5: rgba(194, 202, 242, 0.1);--vscode-icube-colorBtnHover2: rgba(224, 226, 242, 0.08);--vscode-icube-colorBtnTransparent3: rgba(224, 226, 242, 0.12);--vscode-icube-colorBlend: rgba(194, 202, 242, 0.15);--vscode-icube-colorTransparent: rgba(255, 255, 255, 0);--vscode-icube-colorWidgetShadow: rgba(0, 0, 0, 0.16);--vscode-icube-colorWidgetShadow2: rgba(0, 0, 0, 0.16);--vscode-icube-colorWidgetShadow3: rgba(0, 0, 0, 0.2);--vscode-icube-colorDefaultText: #d1d3db;--vscode-icube-colorHighlightText: #f5f9fe;--vscode-icube-colorGrayText: #9599a6;--vscode-icube-colorGrayText2: #737780;--vscode-icube-colorDisableText: #666b75;--vscode-icube-colorBlackText: #111314;--vscode-icube-colorBlackText1: #000000;--vscode-icube-colorBlackText2: #ffffff;--vscode-icube-colorDefaultAvatar: #dadde6;--vscode-icube-colorDefaultAvatarBackground: #24262b;--vscode-icube-modalLayoutBg: rgba(0, 0, 0, 0.4);--vscode-icube-colorIcon: #8d93a6;--vscode-icube-colorCodeCodeInstruction: #f0d8ff;--vscode-icube-colorLine1: rgba(224, 226, 242, 0.09);--vscode-icube-colorLine2: rgba(224, 226, 242, 0.13);--vscode-icube-colorLine3: rgba(224, 226, 242, 0.18);--vscode-icube-colorBrand: #dadde5;--vscode-icube-colorBrandHover: #edeff2;--vscode-icube-colorBrandActive: #979aa4;--vscode-icube-colorBrandTransparent: rgba(224, 226, 242, 0.05);--vscode-icube-colorBrandTransparent2: rgba(224, 226, 242, 0.08);--vscode-icube-colorBrandTransparent3: rgba(224, 226, 242, 0.12);--vscode-icube-colorStatusRegular: #387bff;--vscode-icube-colorStatusRegularHover: #4c88ff;--vscode-icube-colorStatusRegularActive: #1759dd;--vscode-icube-colorStatusRegularTransparent: rgba(53, 121, 255, 0.18);--vscode-icube-colorStatusRegularTransparent2: rgba(53, 121, 255, 0.28);--vscode-icube-colorStatusRegularTransparent3: rgba(53, 121, 255, 0.36);--vscode-icube-colorSuccess: #33c192;--vscode-icube-colorSuccessHover: #5ed4ad;--vscode-icube-colorSuccessActive: #27b082;--vscode-icube-colorSuccessTransparent: rgba(0, 165, 110, 0.18);--vscode-icube-colorSuccessTransparent2: rgba(0, 165, 110, 0.28);--vscode-icube-colorSuccessTransparent3: rgba(0, 165, 110, 0.36);--vscode-icube-colorError: #f65a5a;--vscode-icube-colorErrorHover: #f86262;--vscode-icube-colorErrorActive: #ad2020;--vscode-icube-colorErrorTransparent: rgba(208, 42, 35, 0.18);--vscode-icube-colorErrorTransparent2: rgba(208, 42, 35, 0.28);--vscode-icube-colorErrorTransparent3: rgba(208, 42, 35, 0.36);--vscode-icube-colorWarning: #dc8730;--vscode-icube-colorWarningHover: #f1a03f;--vscode-icube-colorWarningActive: #c0701d;--vscode-icube-colorWarningTransparent: rgba(220, 135, 48, 0.16);--vscode-icube-colorWarningTransparent2: rgba(220, 135, 48, 0.28);--vscode-icube-colorWarningTransparent3: rgba(220, 135, 48, 0.36);--vscode-icube-colorAlert: #c2a857;--vscode-icube-colorAlertHover: #deb245;--vscode-icube-colorAlertActive: #ab9220;--vscode-icube-colorAlertTransparent: rgba(194, 168, 87, 0.16);--vscode-icube-colorAlertTransparent2: rgba(194, 168, 87, 0.28);--vscode-icube-colorAlertTransparent3: rgba(194, 168, 87, 0.36);--vscode-icube-colorErrorTm1: rgba(204, 75, 83, 0.2);--vscode-icube-colorErrorTr1: rgba(208, 42, 35, 0.18);--vscode-icube-colorSpinLoading: #2f74ff;--vscode-icube-colorC1: #2dd288;--vscode-icube-colorC2: #ff9392;--vscode-icube-colorC3: #dcb364;--vscode-icube-colorC4: #8acb3a;--vscode-icube-colorC5: #04cbe5;--vscode-icube-colorC6: #7bb8ff;--vscode-icube-colorC7: #ec93ff;--vscode-icube-colorC8: #bfa5ff;--vscode-icube-colorC9: #afb9cf;--vscode-icube-colorDiffToggleBtnBg: #8d7aff;--vscode-icube-textPreformatBackground: #9d89eb;--vscode-icube-colorRed1: rgba(221, 55, 48, 0.5);--vscode-icube-colorRed2: rgba(221, 55, 48, 0.1);--vscode-icube-colorRed3: #dd3730;--vscode-icube-colorGreen1: #016a51;--vscode-icube-colorDiffBtn1: #ffffff;--vscode-icube-diffInsertedTextBackground: rgba(38, 165, 123, 0.32);--vscode-icube-colorChatError: rgba(221, 55, 48, 0.5);--vscode-icube-chatIconBg1: #ffffff;--vscode-icube-chatIconColor1: #ff4a36;--vscode-icube-emptyExplorerButtonBgColor: rgba(194, 202, 242, 0.1);--vscode-icube-emptyExplorerButtonTextColor: #dadde5;--vscode-icube-emptyExplorerSplitTextColor: #737780;--vscode-icube-emptyExplorerSplitColor: rgba(221, 226, 233, 0.16);--vscode-icube-lite.colorBg1: #25252d;--vscode-icube-lite.colorBg2: #1d1c23;--vscode-icube-lite.colorLine1: #2e2e38;--vscode-widget-shadow1: rgba(0, 0, 0, 0.16);--vscode-widget-shadow2: rgba(0, 0, 0, 0.1);--vscode-widget-light.shadow1: rgba(0, 0, 0, 0.04);--vscode-widget-light.shadow2: rgba(0, 0, 0, 0.08);--vscode-icube-tooltipsTextColor: #181a1f;--vscode-icube-ai.disableInputBorderColor: rgba(194, 202, 242, 0.24);--vscode-icube-scrollbarBgColor: rgba(221, 226, 233, 0.25);--vscode-icube-scrollbarHoverBgColor: rgba(221, 226, 233, 0.35);--vscode-icube-desktopEmptyWorkspaceIconBg: rgba(194, 202, 242, 0.1);--vscode-icube-desktopEmptyWorkspaceHoverBg: rgba(194, 202, 242, 0.15);--vscode-icube--code-code-text: #e0e3ee;--vscode-icube-primaryButtonBackground: #d1d3db;--vscode-icube-primaryButtonForeground: #000000;--vscode-icube-primaryButtonHoverBackground: #edeff2;--vscode-icube-primaryButtonHoverForeground: #000000;--vscode-icube-primaryButtonActivateBackground: #979aa4;--vscode-icube-primaryButtonActivateForeground: #000000;--vscode-icube-primaryButtonDisableBackground: #666b75;--vscode-icube-primaryButtonDisableForeground: #000000;--vscode-icube-defaultButtonBackground: rgba(224, 226, 242, 0.05);--vscode-icube-defaultButtonForeground: #d1d3db;--vscode-icube-defaultButtonHoverBackground: rgba(224, 226, 242, 0.08);--vscode-icube-defaultButtonHoverForeground: #d1d3db;--vscode-icube-defaultButtonActivateBackground: rgba(224, 226, 242, 0.12);--vscode-icube-defaultButtonActivateForeground: #d1d3db;--vscode-icube-defaultButtonDisableBackground: rgba(224, 226, 242, 0.08);--vscode-icube-defaultButtonDisableForeground: #666b75;--vscode-icube-checkboxBorder: #d1d3db;--vscode-icube-checkboxBackground: #d1d3db;--vscode-icube-checkboxDisabledBackground: #666b75;--vscode-icube-checkboxForeground: #000000;--vscode-icube-checkboxUncheckedBorder: rgba(224, 226, 242, 0.18);--vscode-icube-checkboxUncheckedBackground: #1a1b1d;--vscode-icube-badgeBackground: #387bff;--vscode-icube-badgeForeground: #ffffff;--vscode-icube-colorBgTr1: rgba(224, 226, 242, 0.05);--vscode-icube-colorBgTr2: rgba(224, 226, 242, 0.08);--vscode-icube-colorBgTr3: rgba(224, 226, 242, 0.12);--vscode-icube-colorTextDefault: #d1d3db;--vscode-icube-colorTextHighlight: #f5f9fe;--vscode-icube-colorTextGray: #9599a6;--vscode-icube-colorTextDisable: #666b75;--vscode-icube-colorBrandTr1: rgba(224, 226, 242, 0.05);--vscode-icube-colorBrandTr2: rgba(224, 226, 242, 0.08);--vscode-icube-colorBrandTr3: rgba(224, 226, 242, 0.12);--vscode-icube-colorSuccessTr1: rgba(0, 165, 110, 0.18);--vscode-icube-colorSuccessTr2: rgba(0, 165, 110, 0.28);--vscode-icube-colorSuccessTr3: rgba(0, 165, 110, 0.36);--vscode-icube-colorErrorTr2: rgba(208, 42, 35, 0.28);--vscode-icube-colorErrorTr3: rgba(208, 42, 35, 0.36);--vscode-icube-colorWarningTr1: rgba(220, 135, 48, 0.16);--vscode-icube-colorWarningTr2: rgba(220, 135, 48, 0.28);--vscode-icube-colorWarningTr3: rgba(220, 135, 48, 0.36);--vscode-icube-colorAlertTr1: rgba(194, 168, 87, 0.16);--vscode-icube-colorAlertTr2: rgba(194, 168, 87, 0.28);--vscode-icube-colorAlertTr3: rgba(194, 168, 87, 0.36);--vscode-icube-colorTextButtonHighlight: #f5f9fe;--vscode-icube--special-white: #ffffff;--vscode-icube--special-black: #000000;--vscode-icube--bg-bg-base-default: #1a1b1d;--vscode-icube--bg-bg-tooltip: #1a1b1d;--vscode-icube--bg-bg-base-secondary: #222427;--vscode-icube--bg-bg-base-tertiary: #2a2d31;--vscode-icube--bg-bg-overlay-l1: rgba(224, 226, 242, 0.03);--vscode-icube--bg-bg-overlay-l2: rgba(224, 226, 242, 0.05);--vscode-icube--bg-bg-overlay-l3: rgba(224, 226, 242, 0.08);--vscode-icube--bg-bg-overlay-l4: rgba(224, 226, 242, 0.12);--vscode-icube--border-border-neutral-l1: rgba(224, 226, 242, 0.09);--vscode-icube--border-border-neutral-l2: rgba(224, 226, 242, 0.13);--vscode-icube--border-border-neutral-l3: rgba(224, 226, 242, 0.18);--vscode-icube--text-text-default-hover: #f5f9fe;--vscode-icube--text-text-default-active: #f5f9fe;--vscode-icube--icon-icon-default-hover: #f5f9fe;--vscode-icube--icon-icon-default-active: #f5f9fe;--vscode-icube--text-text-default: #d1d3db;--vscode-icube--text-text-secondary-hover: #d1d3db;--vscode-icube--text-text-secondary-active: #d1d3db;--vscode-icube--icon-icon-default: #d1d3db;--vscode-icube--icon-icon-secondary-hover: #d1d3db;--vscode-icube--icon-icon-secondary-active: #d1d3db;--vscode-icube--text-text-secondary: #9599a6;--vscode-icube--icon-icon-secondary: #9599a6;--vscode-icube--text-text-tertiary: #666b75;--vscode-icube--text-text-disabled: #666b75;--vscode-icube--icon-icon-tertiary: #666b75;--vscode-icube--icon-icon-disabled: #666b75;--vscode-icube--status-primary-default: #387bff;--vscode-icube--status-primary-hover: #4c88ff;--vscode-icube--status-primary-active: #1759dd;--vscode-icube--status-primary-surface-l1: rgba(53, 121, 255, 0.18);--vscode-icube--status-primary-surface-l2: rgba(53, 121, 255, 0.28);--vscode-icube--status-primary-surface-l3: rgba(53, 121, 255, 0.36);--vscode-icube--status-success-default: #33c192;--vscode-icube--status-success-hover: #5ed4ad;--vscode-icube--status-success-active: #27b082;--vscode-icube--status-success-surface-l1: rgba(0, 165, 110, 0.18);--vscode-icube--status-success-surface-l2: rgba(0, 165, 110, 0.28);--vscode-icube--status-success-surface-l3: rgba(0, 165, 110, 0.36);--vscode-icube--status-alert-default: #c2a857;--vscode-icube--status-alert-hover: #deb245;--vscode-icube--status-alert-active: #ab9220;--vscode-icube--status-alert-surface-l1: rgba(194, 168, 87, 0.16);--vscode-icube--status-alert-surface-l2: rgba(194, 168, 87, 0.28);--vscode-icube--status-alert-surface-l3: rgba(194, 168, 87, 0.36);--vscode-icube--status-warning-default: #dc8730;--vscode-icube--status-warning-hover: #f1a03f;--vscode-icube--status-warning-active: #c0701d;--vscode-icube--status-warning-surface-l1: rgba(220, 135, 48, 0.16);--vscode-icube--status-warning-surface-l2: rgba(220, 135, 48, 0.28);--vscode-icube--status-warning-surface-l3: rgba(220, 135, 48, 0.36);--vscode-icube--status-error-default: #f65a5a;--vscode-icube--status-error-hover: #f86262;--vscode-icube--status-error-active: #ad2020;--vscode-icube--status-error-surface-l1: rgba(208, 42, 35, 0.18);--vscode-icube--status-error-surface-l2: rgba(208, 42, 35, 0.28);--vscode-icube--status-error-surface-l3: rgba(208, 42, 35, 0.36);--vscode-icube--bg-bg-invert: #dadde5;--vscode-icube--bg-bg-invert-hover: #edeff2;--vscode-icube--bg-bg-invert-active: #979aa4;--vscode-icube--bg-bg-invert-disabled: rgba(224, 226, 242, 0.12);--vscode-icube--accent-accent-teal: #2dd288;--vscode-icube--accent-accent-coral: #ff9392;--vscode-icube--accent-accent-amber: #dcb364;--vscode-icube--accent-accent-lime: #8acb3a;--vscode-icube--accent-accent-cyan: #04cbe5;--vscode-icube--accent-accent-blue: #7bb8ff;--vscode-icube--accent-accent-magenta: #ec93ff;--vscode-icube--accent-accent-violet: #bfa5ff;--vscode-icube--accent-accent-slate: #afb9cf;--vscode-icube--bg-bg-menu: #202123;--vscode-icube--bg-bg-menu-tr0: rgba(42, 45, 49, 0);--vscode-icube--bg-bg-brand: #32f08c;--vscode-icube--bg-bg-brand-hover: #0fdc78;--vscode-icube--bg-bg-brand-disabled: rgba(50, 240, 140, 0.2);--vscode-icube--border-border-contrast: #ffffff;--vscode-icube--border-border-brand: #32f08c;--vscode-icube--text-text-brand: #32f08c;--vscode-icube--icon-icon-brand: #32f08c;--vscode-icube--text-text-brand-hover: #0fdc78;--vscode-icube--icon-icon-brand-hover: #0fdc78;--vscode-icube--text-text-onbrand: #0c0c0d;--vscode-icube--icon-icon-onbrand: #0c0c0d;--vscode-icube--text-text-onaccent: #0c0c0d;--vscode-icube--icon-icon-onaccent: #0c0c0d;--vscode-icube--special-bgtabsoverlay: rgba(13, 14, 15, 0.18);--vscode-icube--code-code-tag: #f2858c;--vscode-icube--code-code-instruction: #f0d8ff;--vscode-icube--code-code-doc: #7f838c;--vscode-icube--code-code-parameter: #82d99f;--vscode-icube--cue: #0fdc78;--vscode-icube--cue-tr0: rgba(15, 220, 120, 0);--vscode-icube--cue-tr1: rgba(15, 220, 120, 0.16);--vscode-icube--cue-tr2: rgba(15, 220, 120, 0.32);--vscode-icube--cue-diff-add: #00a56e;--vscode-icube--cue-diff-add-inline: rgba(0, 165, 110, 0.12);--vscode-icube--cue-diff-add-popup: rgba(0, 165, 110, 0.18);--vscode-icube--cue-diff-remove: rgba(246, 70, 70, 0.14);--vscode-icube--cue-diff-line: rgba(255, 255, 255, 0.32);--vscode-solo-lite-root-background: #1a1b1d;--vscode-icube-memoryRiskBackground: #453121;--vscode-icube-memoryRiskBorder: #6b4d35;--vscode-icube-memoryRiskIcon: #d27e24;--vscode-icube-blendColor.btnHover.bg2: #33363e;--vscode-icube-blendColor.btnTransparent3.bg2: #434652;--vscode-editor-lineHighlightBackground: #292c34;--vscode-editor-inactiveLineHighlightBackground: #292c34;--vscode-editor-lineHighlightBorder: #282828;--vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);--vscode-editor-symbolHighlightBackground: rgba(218, 221, 229, 0.32);--vscode-editorCursor-foreground: #ffffff;--vscode-editorMultiCursor-primary.foreground: #ffffff;--vscode-editorMultiCursor-secondary.foreground: #ffffff;--vscode-editorWhitespace-foreground: rgba(227, 228, 226, 0.16);--vscode-editorLineNumber-foreground: #979aa4;--vscode-editorIndentGuide-background: rgba(227, 228, 226, 0.16);--vscode-editorIndentGuide-activeBackground: rgba(227, 228, 226, 0.16);--vscode-editorIndentGuide-background1: rgba(224, 226, 242, 0.09);--vscode-editorIndentGuide-background2: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background3: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background4: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background5: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-background6: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground1: rgba(224, 226, 242, 0.18);--vscode-editorIndentGuide-activeBackground2: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground3: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground4: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground5: rgba(0, 0, 0, 0);--vscode-editorIndentGuide-activeBackground6: rgba(0, 0, 0, 0);--vscode-editorActiveLineNumber-foreground: #c6c6c6;--vscode-editorLineNumber-activeForeground: #e0e3ee;--vscode-editorRuler-foreground: #5a5a5a;--vscode-editorCodeLens-foreground: #999999;--vscode-editorBracketMatch-background: rgba(213, 216, 224, 0.24);--vscode-editorBracketMatch-border: rgba(213, 216, 224, 0);--vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);--vscode-editorGutter-background: #1a1b1d;--vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.5);--vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);--vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);--vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);--vscode-editorOverviewRuler-warningForeground: #cca700;--vscode-editorOverviewRuler-infoForeground: #59a4f9;--vscode-editorBracketHighlight-foreground1: #ffd700;--vscode-editorBracketHighlight-foreground2: #da70d6;--vscode-editorBracketHighlight-foreground3: #179fff;--vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);--vscode-editorBracketHighlight-unexpectedBracket.foreground: rgba(255, 18, 18, 0.8);--vscode-editorBracketPairGuide-background1: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-background2: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-background3: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-background4: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-background5: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-background6: rgba(224, 226, 242, 0.09);--vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);--vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);--vscode-editorUnicodeHighlight-border: #cca700;--vscode-diffEditor-move.border: rgba(139, 139, 139, 0.61);--vscode-diffEditor-moveActive.border: #ffa500;--vscode-diffEditor-unchangedRegionShadow: #000000;--vscode-settings-headerForeground: #f5f9fe;--vscode-settings-settingsHeaderHoverForeground: rgba(245, 249, 254, 0.7);--vscode-settings-modifiedItemIndicator: #dadde5;--vscode-settings-headerBorder: rgba(224, 226, 242, 0.13);--vscode-settings-sashBorder: rgba(128, 128, 128, 0.35);--vscode-settings-dropdownBackground: #2a2d31;--vscode-settings-dropdownForeground: #f0f0f0;--vscode-settings-dropdownBorder: rgba(224, 226, 242, 0.09);--vscode-settings-dropdownListBorder: #454545;--vscode-settings-checkboxBackground: #3c3c3c;--vscode-settings-checkboxForeground: #f0f0f0;--vscode-settings-checkboxBorder: #6b6b6b;--vscode-settings-textInputBackground: rgba(224, 226, 242, 0.03);--vscode-settings-textInputForeground: #d1d3db;--vscode-settings-numberInputBackground: rgba(224, 226, 242, 0.03);--vscode-settings-numberInputForeground: #d1d3db;--vscode-settings-focusedRowBackground: rgba(224, 226, 242, 0.03);--vscode-settings-rowHoverBackground: rgba(224, 226, 242, 0.01);--vscode-settings-focusedRowBorder: rgba(0, 0, 0, 0);--vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;--vscode-actionBar-toggledBackground: #383a49;--vscode-symbolIcon-arrayForeground: #d1d3db;--vscode-symbolIcon-booleanForeground: #d1d3db;--vscode-symbolIcon-classForeground: #ee9d28;--vscode-symbolIcon-colorForeground: #d1d3db;--vscode-symbolIcon-constantForeground: #d1d3db;--vscode-symbolIcon-constructorForeground: #b180d7;--vscode-symbolIcon-enumeratorForeground: #ee9d28;--vscode-symbolIcon-enumeratorMemberForeground: #75beff;--vscode-symbolIcon-eventForeground: #ee9d28;--vscode-symbolIcon-fieldForeground: #75beff;--vscode-symbolIcon-fileForeground: #d1d3db;--vscode-symbolIcon-folderForeground: #d1d3db;--vscode-symbolIcon-functionForeground: #b180d7;--vscode-symbolIcon-interfaceForeground: #75beff;--vscode-symbolIcon-keyForeground: #d1d3db;--vscode-symbolIcon-keywordForeground: #d1d3db;--vscode-symbolIcon-methodForeground: #b180d7;--vscode-symbolIcon-moduleForeground: #d1d3db;--vscode-symbolIcon-namespaceForeground: #d1d3db;--vscode-symbolIcon-nullForeground: #d1d3db;--vscode-symbolIcon-numberForeground: #d1d3db;--vscode-symbolIcon-objectForeground: #d1d3db;--vscode-symbolIcon-operatorForeground: #d1d3db;--vscode-symbolIcon-packageForeground: #d1d3db;--vscode-symbolIcon-propertyForeground: #d1d3db;--vscode-symbolIcon-referenceForeground: #d1d3db;--vscode-symbolIcon-snippetForeground: #d1d3db;--vscode-symbolIcon-stringForeground: #d1d3db;--vscode-symbolIcon-structForeground: #d1d3db;--vscode-symbolIcon-textForeground: #d1d3db;--vscode-symbolIcon-typeParameterForeground: #d1d3db;--vscode-symbolIcon-unitForeground: #d1d3db;--vscode-symbolIcon-variableForeground: #75beff;--vscode-peekViewTitle-background: #252526;--vscode-peekViewTitleLabel-foreground: #ffffff;--vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);--vscode-peekView-border: #59a4f9;--vscode-peekViewResult-background: #252526;--vscode-peekViewResult-lineForeground: #bbbbbb;--vscode-peekViewResult-fileForeground: #ffffff;--vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);--vscode-peekViewResult-selectionForeground: #ffffff;--vscode-peekViewEditor-background: #001f33;--vscode-peekViewEditorGutter-background: #001f33;--vscode-peekViewEditorStickyScroll-background: #001f33;--vscode-peekViewEditorStickyScrollGutter-background: #001f33;--vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);--vscode-peekViewEditor-matchHighlightBackground: rgba(255, 143, 0, 0.6);--vscode-editorMarkerNavigationError-background: #f14c4c;--vscode-editorMarkerNavigationError-headerBackground: rgba(241, 76, 76, 0.1);--vscode-editorMarkerNavigationWarning-background: #cca700;--vscode-editorMarkerNavigationWarning-headerBackground: rgba(204, 167, 0, 0.1);--vscode-editorMarkerNavigationInfo-background: #59a4f9;--vscode-editorMarkerNavigationInfo-headerBackground: rgba(89, 164, 249, 0.1);--vscode-editorMarkerNavigation-background: #1a1b1d;--vscode-editor-foldBackground: rgba(53, 121, 255, 0.08);--vscode-editor-foldPlaceholderForeground: #808080;--vscode-editorGutter-foldingControlForeground: #9599a6;--vscode-editorSuggestWidget-background: #252526;--vscode-editorSuggestWidget-border: #454545;--vscode-editorSuggestWidget-foreground: #d1d3db;--vscode-editorSuggestWidget-selectedForeground: #f5f9fe;--vscode-editorSuggestWidget-selectedIconForeground: #ffffff;--vscode-editorSuggestWidget-selectedBackground: rgba(224, 226, 242, 0.08);--vscode-editorSuggestWidget-highlightForeground: #dadde5;--vscode-editorSuggestWidget-focusHighlightForeground: #dadde5;--vscode-editorSuggestWidgetStatus-foreground: rgba(209, 211, 219, 0.5);--vscode-inlineEdit-originalBackground: rgba(208, 42, 35, 0.06);--vscode-inlineEdit-modifiedBackground: rgba(0, 165, 110, 0.08);--vscode-inlineEdit-originalChangedLineBackground: rgba(208, 42, 35, 0.22);--vscode-inlineEdit-originalChangedTextBackground: rgba(208, 42, 35, 0.22);--vscode-inlineEdit-modifiedChangedLineBackground: rgba(0, 165, 110, 0.2);--vscode-inlineEdit-modifiedChangedTextBackground: rgba(0, 165, 110, 0.2);--vscode-inlineEdit-gutterIndicator.primaryForeground: #000000;--vscode-inlineEdit-gutterIndicator.primaryBorder: #d1d3db;--vscode-inlineEdit-gutterIndicator.primaryBackground: rgba(209, 211, 219, 0.4);--vscode-inlineEdit-gutterIndicator.secondaryForeground: #ffffff;--vscode-inlineEdit-gutterIndicator.secondaryBorder: #3a3d41;--vscode-inlineEdit-gutterIndicator.secondaryBackground: #3a3d41;--vscode-inlineEdit-gutterIndicator.successfulForeground: #000000;--vscode-inlineEdit-gutterIndicator.successfulBorder: #d1d3db;--vscode-inlineEdit-gutterIndicator.successfulBackground: #d1d3db;--vscode-inlineEdit-gutterIndicator.background: rgba(23, 25, 26, 0.5);--vscode-inlineEdit-originalBorder: rgba(208, 42, 35, 0.28);--vscode-inlineEdit-modifiedBorder: rgba(0, 165, 110, 0.28);--vscode-inlineEdit-tabWillAcceptModifiedBorder: rgba(0, 165, 110, 0.28);--vscode-inlineEdit-tabWillAcceptOriginalBorder: rgba(208, 41, 35, 0.28);--vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);--vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);--vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);--vscode-editor-wordHighlightTextBackground: rgba(87, 87, 87, 0.72);--vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);--vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);--vscode-editorOverviewRuler-wordHighlightTextForeground: rgba(160, 160, 160, 0.8);--vscode-editorHoverWidget-highlightForeground: #dadde5;--vscode-editor-placeholder.foreground: rgba(255, 255, 255, 0.34);--vscode-editorGutter-modifiedBackground: #1b81a8;--vscode-editorGutter-modifiedSecondaryBackground: #0d4054;--vscode-editorGutter-addedBackground: #487e02;--vscode-editorGutter-addedSecondaryBackground: #243f01;--vscode-editorGutter-deletedBackground: #f14c4c;--vscode-editorGutter-deletedSecondaryBackground: #b00e0e;--vscode-minimapGutter-modifiedBackground: #1b81a8;--vscode-minimapGutter-addedBackground: #487e02;--vscode-minimapGutter-deletedBackground: #f14c4c;--vscode-editorOverviewRuler-modifiedForeground: rgba(27, 129, 168, 0.6);--vscode-editorOverviewRuler-addedForeground: rgba(72, 126, 2, 0.6);--vscode-editorOverviewRuler-deletedForeground: rgba(241, 76, 76, 0.6);--vscode-editorGutter-itemGlyphForeground: #d1d3db;--vscode-editorGutter-itemBackground: #242527;--vscode-agentSessionReadIndicator-foreground: rgba(209, 211, 219, 0.15);--vscode-terminal-foreground: #cccccc;--vscode-terminal-selectionBackground: rgba(53, 121, 255, 0.28);--vscode-terminal-inactiveSelectionBackground: #3a3d41;--vscode-terminalCommandDecoration-defaultBackground: rgba(255, 255, 255, 0.25);--vscode-terminalCommandDecoration-successBackground: #1b81a8;--vscode-terminalCommandDecoration-errorBackground: #f14c4c;--vscode-terminalOverviewRuler-cursorForeground: rgba(160, 160, 160, 0.8);--vscode-terminal-border: rgba(128, 128, 128, 0.35);--vscode-terminalOverviewRuler-border: rgba(127, 127, 127, 0.3);--vscode-terminal-findMatchBackground: #515c6a;--vscode-terminal-hoverHighlightBackground: rgba(38, 79, 120, 0.13);--vscode-terminal-findMatchHighlightBackground: rgba(218, 221, 229, 0.32);--vscode-terminalOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);--vscode-terminal-dropBackground: rgba(53, 121, 255, 0.2);--vscode-terminal-tab.activeBorder: #1a1b1d;--vscode-terminal-initialHintForeground: rgba(255, 255, 255, 0.34);--vscode-scmGraph-historyItemRefColor: #59a4f9;--vscode-scmGraph-historyItemRemoteRefColor: #b180d7;--vscode-scmGraph-historyItemBaseRefColor: #ea5c00;--vscode-scmGraph-historyItemHoverDefaultLabelForeground: #d1d3db;--vscode-scmGraph-historyItemHoverDefaultLabelBackground: #4d4d4d;--vscode-scmGraph-historyItemHoverLabelForeground: #1a1b1d;--vscode-scmGraph-historyItemHoverAdditionsForeground: #81b88b;--vscode-scmGraph-historyItemHoverDeletionsForeground: #c74e39;--vscode-scmGraph-foreground1: #ffb000;--vscode-scmGraph-foreground2: #dc267f;--vscode-scmGraph-foreground3: #994f00;--vscode-scmGraph-foreground4: #40b0a6;--vscode-scmGraph-foreground5: #b66dff;--vscode-commentsView-resolvedIcon: #666b75;--vscode-commentsView-unresolvedIcon: rgba(0, 0, 0, 0);--vscode-editorCommentsWidget-replyInputBackground: #252526;--vscode-editorCommentsWidget-resolvedBorder: #666b75;--vscode-editorCommentsWidget-unresolvedBorder: rgba(0, 0, 0, 0);--vscode-editorCommentsWidget-rangeBackground: rgba(0, 0, 0, 0);--vscode-editorCommentsWidget-rangeActiveBackground: rgba(0, 0, 0, 0);--vscode-editorGutter-commentRangeForeground: #242527;--vscode-editorOverviewRuler-commentForeground: #242527;--vscode-editorOverviewRuler-commentUnresolvedForeground: #242527;--vscode-editorOverviewRuler-commentDraftForeground: #242527;--vscode-editorGutter-commentGlyphForeground: #d1d3db;--vscode-editorGutter-commentUnresolvedGlyphForeground: #d1d3db;--vscode-editorGutter-commentDraftGlyphForeground: #d1d3db;--vscode-ports-iconRunningProcessForeground: #369432;--vscode-welcomePage-tileBackground: #252526;--vscode-welcomePage-tileHoverBackground: #2c2c2d;--vscode-welcomePage-tileBorder: rgba(255, 255, 255, 0.1);--vscode-welcomePage-progress.background: rgba(224, 226, 242, 0.03);--vscode-welcomePage-progress.foreground: #dadde5;--vscode-walkthrough-stepTitle.foreground: #ffffff;--vscode-extensionIcon-verifiedForeground: #dadde5;--vscode-keybindingTable-headerBackground: rgba(209, 211, 219, 0.04);--vscode-keybindingTable-rowsBackground: rgba(209, 211, 219, 0.04);--vscode-extensionButton-background: #d1d3db;--vscode-extensionButton-foreground: #000000;--vscode-extensionButton-hoverBackground: #edeff2;--vscode-extensionButton-separator: rgba(13, 14, 15, 0.18);--vscode-extensionButton-prominentBackground: #d1d3db;--vscode-extensionButton-prominentForeground: #000000;--vscode-extensionButton-prominentHoverBackground: #edeff2;--vscode-debugToolBar-background: #222427;--vscode-debugIcon-startForeground: #89d185;--vscode-notebook-cellBorderColor: rgba(224, 226, 242, 0.05);--vscode-notebook-focusedEditorBorder: rgba(0, 0, 0, 0);--vscode-notebookStatusSuccessIcon-foreground: #89d185;--vscode-notebookEditorOverviewRuler-runningCellForeground: #89d185;--vscode-notebookStatusErrorIcon-foreground: #cc4b53;--vscode-notebookStatusRunningIcon-foreground: #d1d3db;--vscode-notebook-cellToolbarSeparator: rgba(128, 128, 128, 0.35);--vscode-notebook-selectedCellBackground: rgba(224, 226, 242, 0.05);--vscode-notebook-selectedCellBorder: rgba(224, 226, 242, 0.05);--vscode-notebook-focusedCellBorder: rgba(0, 0, 0, 0);--vscode-notebook-inactiveFocusedCellBorder: rgba(224, 226, 242, 0.05);--vscode-notebook-cellStatusBarItemHoverBackground: rgba(255, 255, 255, 0.15);--vscode-notebook-cellInsertionIndicator: rgba(0, 0, 0, 0);--vscode-notebookScrollbarSlider-background: rgba(121, 121, 121, 0.4);--vscode-notebookScrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);--vscode-notebookScrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);--vscode-notebook-symbolHighlightBackground: rgba(255, 255, 255, 0.04);--vscode-notebook-cellEditorBackground: #1a1b1d;--vscode-notebook-editorBackground: #1a1b1d;--vscode-inlineChat-foreground: #d1d3db;--vscode-inlineChat-background: #252526;--vscode-inlineChat-border: #454545;--vscode-inlineChat-shadow: rgba(0, 0, 0, 0.16);--vscode-inlineChatInput-border: #454545;--vscode-inlineChatInput-focusBorder: rgba(0, 0, 0, 0);--vscode-inlineChatInput-placeholderForeground: #9599a6;--vscode-inlineChatInput-background: rgba(224, 226, 242, 0.03);--vscode-inlineChatDiff-inserted: rgba(0, 165, 110, 0.14);--vscode-editorOverviewRuler-inlineChatInserted: rgba(0, 165, 110, 0.17);--vscode-editorMinimap-inlineChatInserted: rgba(0, 165, 110, 0.17);--vscode-inlineChatDiff-removed: rgba(208, 42, 35, 0.14);--vscode-editorOverviewRuler-inlineChatRemoved: rgba(208, 42, 35, 0.17);--vscode-chat-requestBorder: rgba(255, 255, 255, 0.1);--vscode-chat-requestBackground: rgba(26, 27, 29, 0.62);--vscode-chat-slashCommandBackground: rgba(38, 71, 120, 0.4);--vscode-chat-slashCommandForeground: #85b6ff;--vscode-chat-avatarBackground: #1f1f1f;--vscode-chat-avatarForeground: #d1d3db;--vscode-chat-editedFileForeground: #e2c08d;--vscode-chat-requestCodeBorder: rgba(0, 73, 114, 0.72);--vscode-chat-requestBubbleBackground: rgba(53, 121, 255, 0.08);--vscode-chat-requestBubbleHoverBackground: rgba(53, 121, 255, 0.17);--vscode-chat-checkpointSeparator: #585858;--vscode-chat-linesAddedForeground: #54b054;--vscode-chat-linesRemovedForeground: #fc6a6a;--vscode-extensionIcon-starForeground: #ff8e00;--vscode-extensionIcon-preReleaseForeground: #1d9271;--vscode-extensionIcon-sponsorForeground: #d758b3;--vscode-extensionIcon-privateForeground: rgba(255, 255, 255, 0.38);--vscode-debugExceptionWidget-border: #a31515;--vscode-debugExceptionWidget-background: #420b0d;--vscode-editor-inlineValuesForeground: rgba(255, 255, 255, 0.5);--vscode-editor-inlineValuesBackground: rgba(255, 200, 0, 0.2);--vscode-debugIcon-breakpointForeground: #f65a5a;--vscode-debugIcon-breakpointDisabledForeground: #848484;--vscode-debugIcon-breakpointUnverifiedForeground: #848484;--vscode-debugIcon-breakpointCurrentStackframeForeground: #ffcc00;--vscode-debugIcon-breakpointStackframeForeground: #89d185;--vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);--vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);--vscode-multiDiffEditor-headerBackground: #262626;--vscode-multiDiffEditor-background: #1a1b1d;--vscode-multiDiffEditor-border: rgba(224, 226, 242, 0.13);--vscode-minimap-chatEditHighlight: rgba(26, 27, 29, 0.6);--vscode-chatManagement-sashBorder: rgba(128, 128, 128, 0.35);--vscode-gauge-foreground: #007acc;--vscode-gauge-background: rgba(0, 122, 204, 0.3);--vscode-gauge-warningForeground: #dc8730;--vscode-gauge-warningBackground: rgba(220, 135, 48, 0.3);--vscode-gauge-errorForeground: #f65a5a;--vscode-gauge-errorBackground: rgba(246, 90, 90, 0.3);--vscode-interactive-activeCodeBorder: #007acc;--vscode-interactive-inactiveCodeBorder: rgba(224, 226, 242, 0.05);--vscode-testing-iconFailed: #f14c4c;--vscode-testing-iconErrored: #f14c4c;--vscode-testing-iconPassed: #73c991;--vscode-testing-runAction: #73c991;--vscode-testing-iconQueued: #cca700;--vscode-testing-iconUnset: #848484;--vscode-testing-iconSkipped: #848484;--vscode-testing-peekBorder: #f14c4c;--vscode-testing-messagePeekBorder: #59a4f9;--vscode-testing-peekHeaderBackground: rgba(241, 76, 76, 0.1);--vscode-testing-messagePeekHeaderBackground: rgba(89, 164, 249, 0.1);--vscode-testing-coveredBackground: rgba(0, 165, 110, 0.28);--vscode-testing-coveredBorder: rgba(0, 165, 110, 0.21);--vscode-testing-coveredGutterBackground: rgba(0, 165, 110, 0.17);--vscode-testing-uncoveredBranchBackground: #7f2320;--vscode-testing-uncoveredBackground: rgba(208, 42, 35, 0.28);--vscode-testing-uncoveredBorder: rgba(208, 42, 35, 0.21);--vscode-testing-uncoveredGutterBackground: rgba(208, 42, 35, 0.42);--vscode-testing-coverCountBadgeBackground: #4d4d4d;--vscode-testing-coverCountBadgeForeground: #ffffff;--vscode-testing-message.error.badgeBackground: #f14c4c;--vscode-testing-message.error.badgeBorder: #f14c4c;--vscode-testing-message.error.badgeForeground: #000000;--vscode-testing-message.info.decorationForeground: rgba(209, 211, 219, 0.5);--vscode-testing-iconErrored.retired: rgba(241, 76, 76, 0.7);--vscode-testing-iconFailed.retired: rgba(241, 76, 76, 0.7);--vscode-testing-iconPassed.retired: rgba(115, 201, 145, 0.7);--vscode-testing-iconQueued.retired: rgba(204, 167, 0, 0.7);--vscode-testing-iconUnset.retired: rgba(132, 132, 132, 0.7);--vscode-testing-iconSkipped.retired: rgba(132, 132, 132, 0.7);--vscode-statusBar-debuggingBackground: #cc6633;--vscode-statusBar-debuggingForeground: #ffffff;--vscode-commandCenter-debuggingBackground: rgba(204, 102, 51, 0.26);--vscode-debugTokenExpression-name: #c586c0;--vscode-debugTokenExpression-type: #4a90e2;--vscode-debugTokenExpression-value: rgba(204, 204, 204, 0.6);--vscode-debugTokenExpression-string: #ce9178;--vscode-debugTokenExpression-boolean: #4e94ce;--vscode-debugTokenExpression-number: #b5cea8;--vscode-debugTokenExpression-error: #f48771;--vscode-debugView-exceptionLabelForeground: #d1d3db;--vscode-debugView-exceptionLabelBackground: #6c2022;--vscode-debugView-stateLabelForeground: #d1d3db;--vscode-debugView-stateLabelBackground: rgba(136, 136, 136, 0.27);--vscode-debugView-valueChangedHighlight: #569cd6;--vscode-debugConsole-infoForeground: #59a4f9;--vscode-debugConsole-warningForeground: #cca700;--vscode-debugConsole-errorForeground: #cc4b53;--vscode-debugConsole-sourceForeground: #d1d3db;--vscode-debugConsoleInputIcon-foreground: #d1d3db;--vscode-debugIcon-pauseForeground: #75beff;--vscode-debugIcon-stopForeground: #f48771;--vscode-debugIcon-disconnectForeground: #f48771;--vscode-debugIcon-restartForeground: #89d185;--vscode-debugIcon-stepOverForeground: #75beff;--vscode-debugIcon-stepIntoForeground: #75beff;--vscode-debugIcon-stepOutForeground: #75beff;--vscode-debugIcon-continueForeground: #75beff;--vscode-debugIcon-stepBackForeground: #75beff;--vscode-mergeEditor-change.background: rgba(155, 185, 85, 0.2);--vscode-mergeEditor-change.word.background: rgba(156, 204, 44, 0.2);--vscode-mergeEditor-changeBase.background: #4b1818;--vscode-mergeEditor-changeBase.word.background: #6f1313;--vscode-mergeEditor-conflict.unhandledUnfocused.border: rgba(255, 166, 0, 0.48);--vscode-mergeEditor-conflict.unhandledFocused.border: #ffa600;--vscode-mergeEditor-conflict.handledUnfocused.border: rgba(134, 134, 134, 0.29);--vscode-mergeEditor-conflict.handledFocused.border: rgba(193, 193, 193, 0.8);--vscode-mergeEditor-conflict.handled.minimapOverViewRuler: rgba(173, 172, 168, 0.93);--vscode-mergeEditor-conflict.unhandled.minimapOverViewRuler: #fcba03;--vscode-mergeEditor-conflictingLines.background: rgba(255, 234, 0, 0.28);--vscode-mergeEditor-conflict.input1.background: rgba(64, 200, 174, 0.2);--vscode-mergeEditor-conflict.input2.background: rgba(64, 166, 255, 0.2);--vscode-terminal-ansiBlack: #000000;--vscode-terminal-ansiRed: #cd3131;--vscode-terminal-ansiGreen: #0dbc79;--vscode-terminal-ansiYellow: #e5e510;--vscode-terminal-ansiBlue: #2472c8;--vscode-terminal-ansiMagenta: #bc3fbc;--vscode-terminal-ansiCyan: #11a8cd;--vscode-terminal-ansiWhite: #e5e5e5;--vscode-terminal-ansiBrightBlack: #666666;--vscode-terminal-ansiBrightRed: #f14c4c;--vscode-terminal-ansiBrightGreen: #23d18b;--vscode-terminal-ansiBrightYellow: #f5f543;--vscode-terminal-ansiBrightBlue: #3b8eea;--vscode-terminal-ansiBrightMagenta: #d670d6;--vscode-terminal-ansiBrightCyan: #29b8db;--vscode-terminal-ansiBrightWhite: #e5e5e5;--vscode-simpleFindWidget-sashBorder: #454545;--vscode-terminalStickyScrollHover-background: #2a2d2e;--vscode-terminalCommandGuide-foreground: rgba(224, 226, 242, 0.05);--vscode-terminalSymbolIcon-flagForeground: #ee9d28;--vscode-terminalSymbolIcon-aliasForeground: #b180d7;--vscode-terminalSymbolIcon-optionValueForeground: #75beff;--vscode-terminalSymbolIcon-methodForeground: #b180d7;--vscode-terminalSymbolIcon-argumentForeground: #75beff;--vscode-terminalSymbolIcon-optionForeground: #ee9d28;--vscode-terminalSymbolIcon-fileForeground: #d1d3db;--vscode-terminalSymbolIcon-folderForeground: #d1d3db;--vscode-terminalSymbolIcon-commitForeground: #d1d3db;--vscode-terminalSymbolIcon-branchForeground: #d1d3db;--vscode-terminalSymbolIcon-tagForeground: #d1d3db;--vscode-terminalSymbolIcon-stashForeground: #d1d3db;--vscode-terminalSymbolIcon-remoteForeground: #d1d3db;--vscode-terminalSymbolIcon-pullRequestForeground: #d1d3db;--vscode-terminalSymbolIcon-pullRequestDoneForeground: #d1d3db;--vscode-terminalSymbolIcon-symbolicLinkFileForeground: #d1d3db;--vscode-terminalSymbolIcon-symbolicLinkFolderForeground: #d1d3db;--vscode-terminalSymbolIcon-symbolText: #d1d3db;--vscode-markdownAlert-note.foreground: #59a4f9;--vscode-markdownAlert-tip.foreground: #89d185;--vscode-markdownAlert-important.foreground: #b180d7;--vscode-markdownAlert-warning.foreground: #cca700;--vscode-markdownAlert-caution.foreground: #f14c4c;--vscode-walkThrough-embeddedEditorBackground: rgba(0, 0, 0, 0.4);--vscode-profiles-sashBorder: rgba(128, 128, 128, 0.35);--vscode-icube-inlineChat.regionHighlight: rgba(38, 38, 38, 0.2);--vscode-icube-inlineChatDiff.inserted: rgba(0, 165, 110, 0.14);--vscode-icube-inlineChatDiff.removed: rgba(208, 42, 35, 0.14);--vscode-icube-simpleInlineChat.regionHighlight: rgba(38, 38, 38, 0.2);--vscode-icube-simpleInlineChatDiff.inserted: rgba(0, 165, 110, 0.18);--vscode-icube-simpleInlineChatDiff.removed: rgba(208, 42, 35, 0.18);--vscode-gitDecoration-addedResourceForeground: #81b88b;--vscode-gitDecoration-modifiedResourceForeground: #e2c08d;--vscode-gitDecoration-deletedResourceForeground: #c74e39;--vscode-gitDecoration-renamedResourceForeground: #168a63;--vscode-gitDecoration-untrackedResourceForeground: #168a63;--vscode-gitDecoration-ignoredResourceForeground: #8c8c8c;--vscode-gitDecoration-stageModifiedResourceForeground: #e2c08d;--vscode-gitDecoration-stageDeletedResourceForeground: #c74e39;--vscode-gitDecoration-conflictingResourceForeground: #e4676b;--vscode-gitDecoration-submoduleResourceForeground: #8db9e2;--vscode-git-blame.editorDecorationForeground: #969696;}</style><style id="solo-lite-theme-variables">:root {
+  --workspace-gap-width: 4px;
+  --header-height: 48px;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-12: 12px;
+  --radius-16: 16px;
+  --radius-20: 20px;
+  --radius-24: 24px;
+  --radius-32: 32px;
+  --radius-radius-2xs-4: 4px;
+  --radius-radius-xs-6: 6px;
+  --radius-radius-sm-8: 8px;
+  --radius-radius-md-12: 12px;
+  --radius-radius-lg-16: 16px;
+  --radius-radius-xl-20: 20px;
+  --radius-radius-2xl-24: 24px;
+  --radius-radius-3xl-32: 32px;
+  --radius-radius-full: 9999px;
+
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-xxl: 32px;
+
+  --spacer-0: 0px;
+  --spacer-2: 2px;
+  --spacer-4: 4px;
+  --spacer-6: 6px;
+  --spacer-8: 8px;
+  --spacer-12: 12px;
+  --spacer-16: 16px;
+  --spacer-20: 20px;
+  --spacer-24: 24px;
+  --spacer-32: 32px;
+  --spacer-40: 40px;
+  --spacer-48: 48px;
+  --spacer-64: 64px;
+
+  --font-size-xs: 10px;
+  --font-size-sm: 11px;
+  --font-size-md: 12px;
+  --font-size-regular: 13px;
+  --font-size-base: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 20px;
+  --font-size-xxl: 24px;
+
+  --font-family-default:
+    'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'PingFang SC', 'Microsoft YaHei',
+    'Hiragino Sans GB', Roboto, sans-serif;
+  --font-family-heading:
+    'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'PingFang SC', 'Microsoft YaHei',
+    'Hiragino Sans GB', Roboto, sans-serif;
+  --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
+  --font-weight-default: 400;
+  --font-weight-code: 450;
+  --font-weight-medium: 500;
+  --font-weight-strong: 600;
+
+  --chat-body-md: 13px/20px var(--font-family-default);
+  --chat-body-md-strong: 500 13px/20px var(--font-family-default);
+  --chat-body-base: 14px/22px var(--font-family-default);
+  --chat-body-base-strong: 500 14px/22px var(--font-family-default);
+  --chat-spacer-2xs: 2px;
+  --chat-spacer-xs: 4px;
+  --chat-spacer-sm: 8px;
+  --chat-spacer-md: 12px;
+  --chat-spacer-lg: 16px;
+  --chat-spacer-xl: 20px;
+  --chat-radius-xs: 4px;
+  --chat-radius-sm: 8px;
+  --chat-radius-md: 12px;
+  --chat-radius-lg: 16px;
+  --chat-list-item-height: 28px;
+
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.2s ease;
+  --transition-slow: 0.3s ease;
+
+  /* ===== Z-Index Layer System ===== */
+  --z-base: 0;
+  --z-above: 1;
+  --z-above-2: 2;
+
+  --z-sticky: 10;
+  --z-local-overlay: 100;
+
+  --z-dropdown: 1000;
+  --z-popover: 1010;
+
+  --z-modal-backdrop: 1090;
+  --z-modal: 1100;
+  --z-drawer: 1120;
+  --z-confirm: 1150;
+
+  --z-notification: 1200;
+  --z-tooltip: 1300;
+
+  --z-fullscreen: 1400;
+
+  /* 仅限基础设施 / 调试工具，业务组件禁止直接使用 */
+  --z-max: 9999;
+}
+
+[data-theme='light'], .vs.solo-lite {
+  --shadow-elevation-50: 0 1px 2px -1px rgba(24, 24, 24, 0.08);
+  --shadow-elevation-100: 0 3px 9px 0 rgba(24, 24, 24, 0.06);
+  --shadow-elevation-100-float: 0 -3px 9px 0 rgba(24, 24, 24, 0.06);
+  --shadow-elevation-200: 0 6px 24px -1px rgba(24, 24, 24, 0.06);
+  --shadow-elevation-200-reverse: 0 -6px 24px -1px rgba(24, 24, 24, 0.06);
+  --shadow-elevation-300: 0 2px 8px -1px rgba(24, 24, 24, 0.02), 0 10px 24px -1px rgba(24, 24, 24, 0.06);
+
+  --shadow-elevation-100-tooltip: var(--shadow-elevation-100);
+  --shadow-elevation-200-menu-panel: var(--shadow-elevation-200);
+  --shadow-elevation-300-modal-panel: var(--shadow-elevation-300);
+
+  /* 输入框阴影颜色 */
+  --shadow-chat-input: 0 3px 8px 0 rgba(24, 24, 24, 0.04), 0 6px 24px -1px rgba(24, 24, 24, 0.06);
+  --shadow-chat-input-focused: 0 4px 12px 0 rgba(24, 24, 24, 0.04), 0 6px 32px -1px rgba(24, 24, 24, 0.06);
+
+  --bg-bg-base-default: #ffffff;
+  --bg-bg-base-secondary: #f5f5f5;
+  --bg-bg-base-tertiary: #e5e5e5;
+  --bg-bg-menu: #ffffff;
+  --bg-bg-tooltip: #fafafa;
+  --bg-bg-input: #ffffff;
+  --bg-bg-overlay-l1: rgba(115, 115, 115, 0.08);
+  --bg-bg-overlay-l2: rgba(115, 115, 115, 0.12);
+  --bg-bg-overlay-l3: rgba(115, 115, 115, 0.16);
+  --bg-bg-overlay-l4: rgba(115, 115, 115, 0.20);
+  --bg-bg-white: #ffffff;
+  --bg-bg-brand: #4b3fe3;
+  --bg-bg-brand-hover: #6a6fff;
+  --bg-bg-brand-active: #3f31c6;
+  --bg-bg-brand-disabled: rgba(75, 63, 227, 0.22);
+  --bg-bg-brand-popup: rgba(170, 183, 255, 0.36);
+  /* brand-sub 兼容（品牌色已统一，sub 映射为主品牌色） */
+  --bg-bg-brand-sub: var(--bg-bg-brand);
+  --bg-bg-brand-hover-sub: var(--bg-bg-brand-hover);
+  --bg-bg-brand-disabled-sub: var(--bg-bg-brand-disabled);
+  --bg-bg-brand-popup-sub: var(--bg-bg-brand-popup);
+  --bg-bg-invert: #262626;
+  --bg-bg-invert-hover: #404040;
+  --bg-bg-invert-active: #171717;
+  --bg-bg-invert-disabled: rgba(115, 115, 115, 0.20);
+  --bg-bg-card: #fafafa;
+  --bg-bg-card-hover: #ffffff;
+  --bg-bg-marketplace-banner-plugin-tag: #e5f3ff;
+  --chat-bg-card: var(--bg-bg-card);
+  --chat-bg-card-hover: var(--bg-bg-base-default);
+  --special-bgtabsoverlay: rgba(255, 255, 255, 0.12);
+  --special-tabsoverlay: rgba(193, 195, 205, 0.12);
+  --text-text-default: #171717;
+  --text-text-default-hover: #262626;
+  --text-text-default-active: #262626;
+  --text-text-secondary: #404040;
+  --text-text-secondary-hover: #171717;
+  --text-text-secondary-active: #171717;
+  --text-text-tertiary: #737373;
+  --text-text-disabled: #a1a1a1;
+  --text-text-brand: #4b3fe3;
+  --text-text-brand-hover: #6a6fff;
+  --text-text-brand-sub: var(--text-text-brand);
+  --text-text-brand-hover-sub: var(--text-text-brand-hover);
+  --text-text-onbrand: #171717;
+  --text-text-onaccent: #ffffff;
+  --text-text-marketplace-banner-plugin-tag: #054c8f;
+  --icon-icon-default: #262626;
+  --icon-icon-default-hover: #171717;
+  --icon-icon-default-active: #171717;
+  --icon-icon-secondary: #404040;
+  --icon-icon-secondary-hover: #262626;
+  --icon-icon-secondary-active: #262626;
+  --icon-icon-tertiary: #737373;
+  --icon-icon-disabled: #a1a1a1;
+  --icon-icon-brand: #4b3fe3;
+  --icon-icon-brand-hover: #6a6fff;
+  --icon-icon-brand-sub: var(--icon-icon-brand);
+  --icon-icon-brand-hover-sub: var(--icon-icon-brand-hover);
+  --icon-icon-onbrand: #0a0a0a;
+  --icon-icon-onaccent: #ffffff;
+  --icon-icon-white: #ffffff;
+  --border-border-neutral-l1: rgba(115, 115, 115, 0.12);
+  --border-border-neutral-l2: rgba(115, 115, 115, 0.18);
+  --border-border-neutral-l3: rgba(115, 115, 115, 0.36);
+  --border-border-brand: #4b3fe3;
+  --border-border-brand-sub: var(--border-border-brand);
+  --border-border-contrast: #000000;
+  --status-primary-default: #2f74ff;
+  --status-primary-hover: #4c88ff;
+  --status-primary-active: #1759dd;
+  --status-primary-surface-l1: rgba(47, 116, 255, 0.12);
+  --status-primary-surface-l2: rgba(47, 116, 255, 0.18);
+  --status-primary-surface-l3: rgba(47, 116, 255, 0.36);
+  --status-success-default: #15a877;
+  --status-success-hover: #2fb287;
+  --status-success-active: #1e8b56;
+  --status-success-surface-l1: rgba(64, 176, 139, 0.12);
+  --status-success-surface-l2: rgba(64, 176, 139, 0.18);
+  --status-success-surface-l3: rgba(64, 176, 139, 0.36);
+  --status-alert-default: #fea900;
+  --status-alert-hover: #ffb700;
+  --status-alert-active: #e59100;
+  --status-alert-surface-l1: rgba(254, 169, 0, 0.14);
+  --status-alert-surface-l2: rgba(254, 169, 0, 0.20);
+  --status-alert-surface-l3: rgba(254, 169, 0, 0.36);
+  --status-warning-default: #e27900;
+  --status-warning-hover: #f39a35;
+  --status-warning-active: #c46f11;
+  --status-warning-surface-l1: rgba(226, 121, 0, 0.12);
+  --status-warning-surface-l2: rgba(226, 121, 0, 0.16);
+  --status-warning-surface-l3: rgba(226, 121, 0, 0.36);
+  --status-error-default: #e8463a;
+  --status-error-hover: #ea574c;
+  --status-error-active: #c9382f;
+  --status-error-surface-l1: rgba(232, 70, 58, 0.12);
+  --status-error-surface-l2: rgba(232, 70, 58, 0.16);
+  --status-error-surface-l3: rgba(232, 70, 58, 0.36);
+  --accent-accent-teal: #00b983;
+  --accent-accent-coral: #ff6b45;
+  --accent-accent-amber: #f2a90c;
+  --accent-accent-lime: #5fc000;
+  --accent-accent-cyan: #00b6f5;
+  --accent-accent-blue: #3f85ff;
+  --accent-accent-magenta: #f53cff;
+  --accent-accent-violet: #9570ff;
+  --accent-accent-slate: #747e94;
+  --code-code-text: #17181a;
+  --code-code-doc: #8393a3;
+  --code-code-link: #2f74ff;
+  --code-code-number: #e54595;
+  --code-code-action: #5f36b2;
+  --code-code-instruction: #b15ef2;
+  --code-code-function: #ff5d4d;
+  --code-code-constant: #175ce6;
+  --code-code-parameter: #4da621;
+  --code-code-attribute: #c99100;
+  --code-code-tag: #e24864;
+  --code-code-terminal: #17181a;
+  --code-code-contrast: #17181a;
+  --code-code-editor: #17181a;
+  --special-white: #ffffff;
+  --special-black: #000000;
+  --viz-viz-series-amber: #edaa45;
+  --viz-viz-series-coral: #f87454;
+  --viz-viz-series-indigo: #b6a3ff;
+  --viz-viz-series-lime: #a6ea39;
+  --viz-viz-series-magenta: #fb9dd7;
+  --viz-viz-series-mint: #1dc981;
+  --viz-viz-series-sky: #22a5f7;
+  --viz-viz-series-slate: #859ead;
+  --viz-viz-series-teal: #59e8e8;
+  --viz-viz-series-violet: #b655fc;
+  --viz-viz-ui-bg-chart: #ffffff;
+  --viz-viz-ui-bg-tooltip: #fafafa;
+  --viz-viz-ui-chart-axis: rgba(115, 115, 115, 0.18);
+  --viz-viz-ui-chart-subtitle: #404040;
+  --viz-viz-ui-chart-tick: #404040;
+  --viz-viz-ui-chart-title: #171717;
+  --viz-viz-ui-legend-label: #404040;
+  --viz-viz-ui-legend-value: #171717;
+  --brand-blue-100: #e5f3ff;
+  --brand-blue-200: #cce6ff;
+  --brand-blue-300: #b2daff;
+  --brand-blue-400: #99ceff;
+  --brand-blue-500: #80c1ff;
+  --brand-blue-600: #64b4ff;
+  --brand-blue-700: #3792e6;
+  --brand-blue-800: #1071cb;
+  --brand-blue-900: #054c8f;
+  --brand-blue-1000: #00284d;
+  --brand-blue-grey-100: #f1eff4;
+  --brand-blue-grey-200: #e0e1e6;
+  --brand-blue-grey-300: #cfd3d8;
+  --brand-blue-grey-400: #bfc5ca;
+  --brand-blue-grey-500: #b0b5ba;
+  --brand-blue-grey-600: #a0a6ab;
+  --brand-blue-grey-700: #80898e;
+  --brand-blue-grey-800: #5e696e;
+  --brand-blue-grey-900: #404a4f;
+  --brand-blue-grey-1000: #21262b;
+  --brand-green-grey-100: #f1f4f4;
+  --brand-green-grey-200: #e0e6e6;
+  --brand-green-grey-300: #cfd8d8;
+  --brand-green-grey-400: #bfcaca;
+  --brand-green-grey-500: #b0baba;
+  --brand-green-grey-600: #a0abab;
+  --brand-green-grey-700: #808e8e;
+  --brand-green-grey-800: #5e6e6e;
+  --brand-green-grey-900: #404f4f;
+  --brand-green-grey-1000: #212b2b;
+  --brand-purple-100: #e8e5ff;
+  --brand-purple-200: #d2ccff;
+  --brand-purple-300: #bbb2ff;
+  --brand-purple-400: #a599ff;
+  --brand-purple-500: #8e80ff;
+  --brand-purple-600: #7864ff;
+  --brand-purple-700: #4c37e6;
+  --brand-purple-800: #2610cb;
+  --brand-purple-900: #15058f;
+  --brand-purple-1000: #09004d;
+  --brand-red-100: #ffe5e5;
+  --brand-red-200: #ffcccc;
+  --brand-red-300: #ffb2b2;
+  --brand-red-400: #ff9999;
+  --brand-red-500: #ff8080;
+  --brand-red-600: #ff6464;
+  --brand-red-700: #e63737;
+  --brand-red-800: #cb1010;
+  --brand-red-900: #8f0505;
+  --brand-red-1000: #4d0000;
+  --brand-yellow-100: #fff6e5;
+  --brand-yellow-200: #ffeccc;
+  --brand-yellow-300: #ffe3b2;
+  --brand-yellow-400: #ffda99;
+  --brand-yellow-500: #ffd080;
+  --brand-yellow-600: #ffc864;
+  --brand-yellow-700: #e6a637;
+  --brand-yellow-800: #cb8710;
+  --brand-yellow-900: #8f5c05;
+  --brand-yellow-1000: #4d3000;
+  --brand-blue-grey-100: #f1eff4;
+  --brand-blue-grey-200: #e0e1e6;
+  --brand-blue-grey-300: #cfd3d8;
+  --brand-blue-grey-400: #bfc5ca;
+  --brand-blue-grey-500: #b0b5ba;
+  --brand-blue-grey-600: #a0a6ab;
+  --brand-blue-grey-700: #80898e;
+  --brand-blue-grey-800: #5e696e;
+  --brand-blue-grey-900: #404a4f;
+  --brand-blue-grey-1000: #21262b;
+  --brand-green-grey-100: #f1f4f4;
+  --brand-green-grey-200: #e0e6e6;
+  --brand-green-grey-300: #cfd8d8;
+  --brand-green-grey-400: #bfcaca;
+  --brand-green-grey-500: #b0baba;
+  --brand-green-grey-600: #a0abab;
+  --brand-green-grey-700: #808e8e;
+  --brand-green-grey-800: #5e6e6e;
+  --brand-green-grey-900: #404f4f;
+  --brand-green-grey-1000: #212b2b;
+  --brand-neutral-grey-100: #f2f2f2;
+  --brand-neutral-grey-200: #e3e3e3;
+  --brand-neutral-grey-300: #d6d6d6;
+  --brand-neutral-grey-400: #c7c7c7;
+  --brand-neutral-grey-500: #bababa;
+  --brand-neutral-grey-600: #ababab;
+  --brand-neutral-grey-700: #8a8a8a;
+  --brand-neutral-grey-800: #686868;
+  --brand-neutral-grey-900: #474747;
+  --brand-neutral-grey-1000: #262626;
+  --brand-brand-50: #f2f7ff;
+  --brand-brand-100: #e5eaff;
+  --brand-brand-200: #cfd8ff;
+  --brand-brand-300: #aab7ff;
+  --brand-brand-400: #8894ff;
+  --brand-brand-500: #6a6fff;
+  --brand-brand-600: #4b3fe3;
+  --brand-brand-700: #3f31c6;
+  --brand-brand-800: #2c2290;
+  --brand-brand-900: #1a1759;
+  --brand-brand-950: #010109;
+  --brand-brand-grey-50: #fafafa;
+  --brand-brand-grey-100: #f5f5f5;
+  --brand-brand-grey-200: #e5e5e5;
+  --brand-brand-grey-300: #d4d4d4;
+  --brand-brand-grey-400: #a1a1a1;
+  --brand-brand-grey-500: #737373;
+  --brand-brand-grey-600: #525252;
+  --brand-brand-grey-700: #404040;
+  --brand-brand-grey-800: #262626;
+  --brand-brand-grey-900: #171717;
+  --brand-brand-grey-950: #0a0a0a;
+  --brand-brand-grey-50: #fafafa;
+  --brand-brand-grey-100: #f5f5f5;
+  --brand-brand-grey-200: #e5e5e5;
+  --brand-brand-grey-300: #d4d4d4;
+  --brand-brand-grey-400: #a1a1a1;
+  --brand-brand-grey-500: #737373;
+  --brand-brand-grey-600: #525252;
+  --brand-brand-grey-700: #404040;
+  --brand-brand-grey-800: #262626;
+  --brand-brand-grey-900: #171717;
+  --brand-brand-grey-950: #0a0a0a;
+
+  --body-body-xs: 10px/1.5 var(--font-family-default);
+  --body-body-sm: 11px/1.5 var(--font-family-default);
+  --body-body-sm-strong: 600 11px/1.5 var(--font-family-default);
+  --body-body-md: 12px/1.5 var(--font-family-default);
+  --body-body-md-strong: 600 12px/1.5 var(--font-family-default);
+  --body-body-base: 14px/1.5 var(--font-family-default);
+  --body-body-base-strong: 600 14px/1.5 var(--font-family-default);
+  --heading-heading-3xs: 600 10px/1.4 var(--font-family-heading);
+  --heading-heading-2xs: 600 11px/1.4 var(--font-family-heading);
+  --heading-heading-xs: 600 12px/1.4 var(--font-family-heading);
+  --heading-heading-sm: 600 13px/1.4 var(--font-family-heading);
+  --heading-heading-md: 600 14px/1.4 var(--font-family-heading);
+  --heading-heading-lg: 600 16px/1.4 var(--font-family-heading);
+  --heading-heading-xl: 600 20px/1.4 var(--font-family-heading);
+  --heading-heading-2xl: 600 24px/1.4 var(--font-family-heading);
+  --heading-heading-3xl: 600 32px/1.4 var(--font-family-heading);
+
+  --bg-bg-overlay-l0: rgba(86, 99, 119, 0.03);
+  --bg-primary-item: rgba(86, 99, 119, 0.15);
+  --bg-primary-item-hover: rgba(86, 99, 119, 0.22);
+  --border-primary-item: rgba(77, 107, 153, 0.09);
+  --border-primary-item-hover: rgba(77, 107, 153, 0.15);
+  --bg-bg-menu-old: #f8f9fa;
+  /* 首页输入框边框颜色（纯色，用于内凹圆弧等需要精确边框的场景） */
+  --homepage-input-border-color: #dfe3eb;
+
+  --welcome-logo-bg: var(--bg-bg-brand, #0fdc78);
+  --welcome-logo-color: #000000;
+
+  --user-message-bg-solid: #E3F8ED;
+  --user-message-bg-solid-transparent: rgba(227, 248, 237, 0);
+  --user-message-bg-solid-sub: #E9E6FF;
+  --user-message-bg-solid-sub-transparent: rgba(233, 230, 255, 0);
+  --sheet-text-color: #000000;
+  --slash-mention-bg: rgba(63, 133, 255, 0.15);
+  --builtin-slash-mention-bg: rgba(149, 112, 255, 0.15);
+
+  --gradient-golden: linear-gradient(180deg, #c0a115 0%, #dfbd27 100%);
+  --special-bggoldoverlay: rgba(210, 181, 19, 0.12);
+
+  --bg-bg-brand-old: #0fdc78;
+  --gradient-brand: linear-gradient(90deg, #0ac27b 0%, #0ecd70 36%, #06c179 72%, #63c5b1 100%);
+  --text-text-preformat-foreground: #a31515;
+}
+
+[data-theme='dark'], .vs-dark.solo-lite {
+  --shadow-elevation-50: 0 1px 2px -1px rgba(0, 0, 0, 0.45);
+  --shadow-elevation-100: 0 3px 9px 0 rgba(0, 0, 0, 0.25);
+  --shadow-elevation-100-float: 0 -3px 9px 0 rgba(0, 0, 0, 0.25);
+  --shadow-elevation-200: 0 6px 24px -1px rgba(0, 0, 0, 0.25);
+  --shadow-elevation-200-reverse: 0 -6px 24px -1px rgba(0, 0, 0, 0.25);
+  --shadow-elevation-300: 0 2px 8px -1px rgba(0, 0, 0, 0.18), 0 10px 24px -1px rgba(0, 0, 0, 0.30);
+  --shadow-elevation-100-tooltip: var(--shadow-elevation-100);
+  --shadow-elevation-200-menu-panel: var(--shadow-elevation-200);
+  --shadow-elevation-300-modal-panel: var(--shadow-elevation-300);
+
+  /* 输入框阴影颜色 */
+  --shadow-chat-input: 0 3px 8px 0 rgba(24, 24, 24, 0.08), 0 6px 24px -1px rgba(24, 24, 24, 0.12);
+  --shadow-chat-input-focused: 0 4px 12px 0 rgba(24, 24, 24, 0.08), 0 6px 32px -1px rgba(24, 24, 24, 0.12);
+
+  --bg-bg-base-default: #171717;
+  --bg-bg-base-secondary: #262626;
+  --bg-bg-base-tertiary: #404040;
+  --bg-bg-menu: #171717;
+  --bg-bg-tooltip: #171717;
+  --bg-bg-input: #171717;
+  --bg-bg-overlay-l1: rgba(212, 212, 212, 0.04);
+  --bg-bg-overlay-l2: rgba(212, 212, 212, 0.06);
+  --bg-bg-overlay-l3: rgba(212, 212, 212, 0.08);
+  --bg-bg-overlay-l4: rgba(212, 212, 212, 0.12);
+  --bg-bg-white: #ffffff;
+  --bg-bg-brand: #4b3fe3;
+  --bg-bg-brand-hover: #6a6fff;
+  --bg-bg-brand-active: #3f31c6;
+  --bg-bg-brand-disabled: rgba(75, 63, 227, 0.35);
+  --bg-bg-brand-popup: rgba(106, 111, 255, 0.15);
+  --bg-bg-brand-sub: var(--bg-bg-brand);
+  --bg-bg-brand-hover-sub: var(--bg-bg-brand-hover);
+  --bg-bg-brand-disabled-sub: var(--bg-bg-brand-disabled);
+  --bg-bg-brand-popup-sub: var(--bg-bg-brand-popup);
+  --bg-bg-invert: #e5e5e5;
+  --bg-bg-invert-hover: #f5f5f5;
+  --bg-bg-invert-active: #e5e5e5;
+  --bg-bg-invert-disabled: rgba(212, 212, 212, 0.06);
+  --bg-bg-card: #202020;
+  --bg-bg-card-hover: #171717;
+  --bg-bg-marketplace-banner-plugin-tag: #e5f3ff;
+  --chat-bg-card: #202020;
+  --chat-bg-card-hover: var(--bg-bg-base-default);
+  --special-bgtabsoverlay: rgba(0, 0, 0, 0.20);
+  --special-tabsoverlay: rgba(13, 14, 15, 0.18);
+  --text-text-default: #e5e5e5;
+  --text-text-default-hover: #fafafa;
+  --text-text-default-active: #fafafa;
+  --text-text-secondary: #a1a1a1;
+  --text-text-secondary-hover: #e5e5e5;
+  --text-text-secondary-active: #e5e5e5;
+  --text-text-tertiary: #737373;
+  --text-text-disabled: #525252;
+  --text-text-brand: #6a6fff;
+  --text-text-brand-hover: #4b3fe3;
+  --text-text-brand-sub: var(--text-text-brand);
+  --text-text-brand-hover-sub: var(--text-text-brand-hover);
+  --text-text-onbrand: #171717;
+  --text-text-onaccent: #171717;
+  --text-text-marketplace-banner-plugin-tag: #054c8f;
+  --icon-icon-default: #e5e5e5;
+  --icon-icon-default-hover: #fafafa;
+  --icon-icon-default-active: #fafafa;
+  --icon-icon-secondary: #a1a1a1;
+  --icon-icon-secondary-hover: #e5e5e5;
+  --icon-icon-secondary-active: #e5e5e5;
+  --icon-icon-tertiary: #737373;
+  --icon-icon-disabled: #525252;
+  --icon-icon-brand: #6a6fff;
+  --icon-icon-brand-hover: #4b3fe3;
+  --icon-icon-brand-sub: var(--icon-icon-brand);
+  --icon-icon-brand-hover-sub: var(--icon-icon-brand-hover);
+  --icon-icon-onbrand: #0a0a0a;
+  --icon-icon-onaccent: #0A0A0A;
+  --icon-icon-white: #ffffff;
+  --border-border-neutral-l1: rgba(229, 229, 229, 0.10);
+  --border-border-neutral-l2: rgba(229, 229, 229, 0.16);
+  --border-border-neutral-l3: rgba(229, 229, 229, 0.20);
+  --border-border-brand: #6a6fff;
+  --border-border-brand-sub: var(--border-border-brand);
+  --border-border-contrast: #ffffff;
+  --status-primary-default: #387bff;
+  --status-primary-hover: #4c88ff;
+  --status-primary-active: #1759dd;
+  --status-primary-surface-l1: rgba(53, 121, 255, 0.18);
+  --status-primary-surface-l2: rgba(53, 121, 255, 0.28);
+  --status-primary-surface-l3: rgba(53, 121, 255, 0.36);
+  --status-success-default: #33c192;
+  --status-success-hover: #5ed4ad;
+  --status-success-active: #27b082;
+  --status-success-surface-l1: rgba(0, 165, 110, 0.18);
+  --status-success-surface-l2: rgba(0, 165, 110, 0.28);
+  --status-success-surface-l3: rgba(0, 165, 110, 0.36);
+  --status-alert-default: #d29d00;
+  --status-alert-hover: #dfb949;
+  --status-alert-active: #ab8820;
+  --status-alert-surface-l1: rgba(210, 157, 0, 0.16);
+  --status-alert-surface-l2: rgba(210, 157, 0, 0.28);
+  --status-alert-surface-l3: rgba(210, 157, 0, 0.36);
+  --status-warning-default: #d27e24;
+  --status-warning-hover: #d78b28;
+  --status-warning-active: #b46510;
+  --status-warning-surface-l1: rgba(210, 126, 36, 0.16);
+  --status-warning-surface-l2: rgba(210, 126, 36, 0.28);
+  --status-warning-surface-l3: rgba(210, 126, 36, 0.36);
+  --status-error-default: #f65a5a;
+  --status-error-hover: #f86262;
+  --status-error-active: #b33636;
+  --status-error-surface-l1: rgba(246, 70, 70, 0.18);
+  --status-error-surface-l2: rgba(246, 70, 70, 0.28);
+  --status-error-surface-l3: rgba(246, 70, 70, 0.36);
+  --accent-accent-teal: #2dd288;
+  --accent-accent-coral: #ff9392;
+  --accent-accent-amber: #dcb364;
+  --accent-accent-lime: #8acb3a;
+  --accent-accent-cyan: #04cbe5;
+  --accent-accent-blue: #7bb8ff;
+  --accent-accent-magenta: #ec93ff;
+  --accent-accent-violet: #bfa5ff;
+  --accent-accent-slate: #afb9cf;
+  --code-code-text: #e0e3ee;
+  --code-code-doc: #7f838c;
+  --code-code-link: #3c7eff;
+  --code-code-number: #f48cca;
+  --code-code-action: #b38cff;
+  --code-code-instruction: #f0d8ff;
+  --code-code-function: #f29d79;
+  --code-code-constant: #80bbff;
+  --code-code-parameter: #82d99f;
+  --code-code-attribute: #ded47e;
+  --code-code-tag: #f2858c;
+  --code-code-terminal: #e0e3ee;
+  --code-code-contrast: #e0e3ee;
+  --code-code-editor: #e0e3ee;
+  --special-white: #ffffff;
+  --special-black: #000000;
+  --viz-viz-series-amber: #edaa45;
+  --viz-viz-series-coral: #f87454;
+  --viz-viz-series-indigo: #b6a3ff;
+  --viz-viz-series-lime: #a6ea39;
+  --viz-viz-series-magenta: #fb9dd7;
+  --viz-viz-series-mint: #1dc981;
+  --viz-viz-series-sky: #22a5f7;
+  --viz-viz-series-slate: #859ead;
+  --viz-viz-series-teal: #78f2f2;
+  --viz-viz-series-violet: #b655fc;
+  --viz-viz-ui-bg-chart: #171717;
+  --viz-viz-ui-bg-tooltip: #0a0a0a;
+  --viz-viz-ui-chart-axis: rgba(229, 229, 229, 0.16);
+  --viz-viz-ui-chart-subtitle: #737373;
+  --viz-viz-ui-chart-tick: #737373;
+  --viz-viz-ui-chart-title: #e5e5e5;
+  --viz-viz-ui-legend-label: #737373;
+  --viz-viz-ui-legend-value: #e5e5e5;
+  --brand-blue-100: #e5f3ff;
+  --brand-blue-200: #cce6ff;
+  --brand-blue-300: #b2daff;
+  --brand-blue-400: #99ceff;
+  --brand-blue-500: #80c1ff;
+  --brand-blue-600: #64b4ff;
+  --brand-blue-700: #3792e6;
+  --brand-blue-800: #1071cb;
+  --brand-blue-900: #054c8f;
+  --brand-blue-1000: #00284d;
+  --brand-blue-grey-100: #f1eff4;
+  --brand-blue-grey-200: #e0e1e6;
+  --brand-blue-grey-300: #cfd3d8;
+  --brand-blue-grey-400: #bfc5ca;
+  --brand-blue-grey-500: #b0b5ba;
+  --brand-blue-grey-600: #a0a6ab;
+  --brand-blue-grey-700: #80898e;
+  --brand-blue-grey-800: #5e696e;
+  --brand-blue-grey-900: #404a4f;
+  --brand-blue-grey-1000: #21262b;
+  --brand-green-grey-100: #f1f4f4;
+  --brand-green-grey-200: #e0e6e6;
+  --brand-green-grey-300: #cfd8d8;
+  --brand-green-grey-400: #bfcaca;
+  --brand-green-grey-500: #b0baba;
+  --brand-green-grey-600: #a0abab;
+  --brand-green-grey-700: #808e8e;
+  --brand-green-grey-800: #5e6e6e;
+  --brand-green-grey-900: #404f4f;
+  --brand-green-grey-1000: #212b2b;
+  --brand-purple-100: #e8e5ff;
+  --brand-purple-200: #d2ccff;
+  --brand-purple-300: #bbb2ff;
+  --brand-purple-400: #a599ff;
+  --brand-purple-500: #8e80ff;
+  --brand-purple-600: #7864ff;
+  --brand-purple-700: #4c37e6;
+  --brand-purple-800: #2610cb;
+  --brand-purple-900: #15058f;
+  --brand-purple-1000: #09004d;
+  --brand-red-100: #ffe5e5;
+  --brand-red-200: #ffcccc;
+  --brand-red-300: #ffb2b2;
+  --brand-red-400: #ff9999;
+  --brand-red-500: #ff8080;
+  --brand-red-600: #ff6464;
+  --brand-red-700: #e63737;
+  --brand-red-800: #cb1010;
+  --brand-red-900: #8f0505;
+  --brand-red-1000: #4d0000;
+  --brand-yellow-100: #fff6e5;
+  --brand-yellow-200: #ffeccc;
+  --brand-yellow-300: #ffe3b2;
+  --brand-yellow-400: #ffda99;
+  --brand-yellow-500: #ffd080;
+  --brand-yellow-600: #ffc864;
+  --brand-yellow-700: #e6a637;
+  --brand-yellow-800: #cb8710;
+  --brand-yellow-900: #8f5c05;
+  --brand-yellow-1000: #4d3000;
+  --brand-blue-grey-100: #f1eff4;
+  --brand-blue-grey-200: #e0e1e6;
+  --brand-blue-grey-300: #cfd3d8;
+  --brand-blue-grey-400: #bfc5ca;
+  --brand-blue-grey-500: #b0b5ba;
+  --brand-blue-grey-600: #a0a6ab;
+  --brand-blue-grey-700: #80898e;
+  --brand-blue-grey-800: #5e696e;
+  --brand-blue-grey-900: #404a4f;
+  --brand-blue-grey-1000: #21262b;
+  --brand-green-grey-100: #f1f4f4;
+  --brand-green-grey-200: #e0e6e6;
+  --brand-green-grey-300: #cfd8d8;
+  --brand-green-grey-400: #bfcaca;
+  --brand-green-grey-500: #b0baba;
+  --brand-green-grey-600: #a0abab;
+  --brand-green-grey-700: #808e8e;
+  --brand-green-grey-800: #5e6e6e;
+  --brand-green-grey-900: #404f4f;
+  --brand-green-grey-1000: #212b2b;
+  --brand-neutral-grey-100: #f2f2f2;
+  --brand-neutral-grey-200: #e3e3e3;
+  --brand-neutral-grey-300: #d6d6d6;
+  --brand-neutral-grey-400: #c7c7c7;
+  --brand-neutral-grey-500: #bababa;
+  --brand-neutral-grey-600: #ababab;
+  --brand-neutral-grey-700: #8a8a8a;
+  --brand-neutral-grey-800: #686868;
+  --brand-neutral-grey-900: #474747;
+  --brand-neutral-grey-1000: #262626;
+  --brand-brand-50: #f2f7ff;
+  --brand-brand-100: #e5eaff;
+  --brand-brand-200: #cfd8ff;
+  --brand-brand-300: #aab7ff;
+  --brand-brand-400: #8894ff;
+  --brand-brand-500: #6a6fff;
+  --brand-brand-600: #4b3fe3;
+  --brand-brand-700: #3f31c6;
+  --brand-brand-800: #2c2290;
+  --brand-brand-900: #1a1759;
+  --brand-brand-950: #010109;
+  --brand-brand-grey-50: #fafafa;
+  --brand-brand-grey-100: #f5f5f5;
+  --brand-brand-grey-200: #e5e5e5;
+  --brand-brand-grey-300: #d4d4d4;
+  --brand-brand-grey-400: #a1a1a1;
+  --brand-brand-grey-500: #737373;
+  --brand-brand-grey-600: #525252;
+  --brand-brand-grey-700: #404040;
+  --brand-brand-grey-800: #262626;
+  --brand-brand-grey-900: #171717;
+  --brand-brand-grey-950: #0a0a0a;
+  --brand-brand-grey-50: #fafafa;
+  --brand-brand-grey-100: #f5f5f5;
+  --brand-brand-grey-200: #e5e5e5;
+  --brand-brand-grey-300: #d4d4d4;
+  --brand-brand-grey-400: #a1a1a1;
+  --brand-brand-grey-500: #737373;
+  --brand-brand-grey-600: #525252;
+  --brand-brand-grey-700: #404040;
+  --brand-brand-grey-800: #262626;
+  --brand-brand-grey-900: #171717;
+  --brand-brand-grey-950: #0a0a0a;
+
+  --body-body-xs: 10px/1.5 var(--font-family-default);
+  --body-body-sm: 11px/1.5 var(--font-family-default);
+  --body-body-sm-strong: 600 11px/1.5 var(--font-family-default);
+  --body-body-md: 12px/1.5 var(--font-family-default);
+  --body-body-md-strong: 600 12px/1.5 var(--font-family-default);
+  --body-body-base: 14px/1.5 var(--font-family-default);
+  --body-body-base-strong: 600 14px/1.5 var(--font-family-default);
+  --heading-heading-3xs: 600 10px/1.4 var(--font-family-heading);
+  --heading-heading-2xs: 600 11px/1.4 var(--font-family-heading);
+  --heading-heading-xs: 600 12px/1.4 var(--font-family-heading);
+  --heading-heading-sm: 600 13px/1.4 var(--font-family-heading);
+  --heading-heading-md: 600 14px/1.4 var(--font-family-heading);
+  --heading-heading-lg: 600 16px/1.4 var(--font-family-heading);
+  --heading-heading-xl: 600 20px/1.4 var(--font-family-heading);
+  --heading-heading-2xl: 600 24px/1.4 var(--font-family-heading);
+  --heading-heading-3xl: 600 32px/1.4 var(--font-family-heading);
+
+  --bg-bg-overlay-l0: rgba(224, 226, 242, 0.03);
+  --bg-primary-item: rgba(224, 226, 242, 0.08);
+  --bg-primary-item-hover: rgba(224, 226, 242, 0.12);
+  --border-primary-item: rgba(224, 226, 242, 0.06);
+  --border-primary-item-hover: rgba(224, 226, 242, 0.1);
+  /* 首页输入框边框颜色（纯色，用于内凹圆弧等需要精确边框的场景） */
+  --homepage-input-border-color: #343538;
+
+  --welcome-logo-bg: #000000;
+  --welcome-logo-color: var(--bg-bg-brand, #0fdc78);
+
+  --user-message-bg-solid: #1D352A;
+  --user-message-bg-solid-transparent: rgba(29, 53, 42, 0);
+  --user-message-bg-solid-sub: #2B2A38;
+  --user-message-bg-solid-sub-transparent: rgba(43, 42, 56, 0);
+  --sheet-text-color: #ffffff;
+  --slash-mention-bg: rgba(63, 133, 255, 0.15);
+  --builtin-slash-mention-bg: rgba(149, 112, 255, 0.15);
+
+  --gradient-golden: linear-gradient(180deg, #DAB444 0%, #FFEA8E 100%);
+  --special-bggoldoverlay: rgba(139, 128, 65, 0.12);
+
+  --bg-bg-brand-old: #32f08c;
+  --gradient-brand: linear-gradient(90deg, #3ee1a3 0%, #32f08c 36%, #60f2bd 71.63%, #a0fde7 100%);
+  --text-text-preformat-foreground: #d7ba7d;
+}
+
+[data-theme='dark-blue'], .vs-dark.solo-lite {
+  --shadow-elevation-50: 0 1px 2px -1px rgba(0, 0, 0, 0.45);
+  --shadow-elevation-100: 0 3px 9px 0 rgba(0, 0, 0, 0.25);
+  --shadow-elevation-100-float: 0 -3px 9px 0 rgba(0, 0, 0, 0.25);
+  --shadow-elevation-200: 0 6px 24px -1px rgba(0, 0, 0, 0.25);
+  --shadow-elevation-200-reverse: 0 -6px 24px -1px rgba(0, 0, 0, 0.25);
+  --shadow-elevation-300: 0 2px 8px -1px rgba(0, 0, 0, 0.18), 0 10px 24px -1px rgba(0, 0, 0, 0.30);
+  --shadow-elevation-100-tooltip: var(--shadow-elevation-100);
+  --shadow-elevation-200-menu-panel: var(--shadow-elevation-200);
+  --shadow-elevation-300-modal-panel: var(--shadow-elevation-300);
+
+  /* 输入框阴影颜色 */
+  --shadow-chat-input: 0 3px 8px 0 rgba(24, 24, 24, 0.08), 0 6px 24px -1px rgba(24, 24, 24, 0.12);
+  --shadow-chat-input-focused: 0 4px 12px 0 rgba(24, 24, 24, 0.08), 0 6px 32px -1px rgba(24, 24, 24, 0.12);
+
+  --bg-bg-base-default: #171717;
+  --bg-bg-base-secondary: #262626;
+  --bg-bg-base-tertiary: #404040;
+  --bg-bg-menu: #171717;
+  --bg-bg-tooltip: #171717;
+  --bg-bg-input: #171717;
+  --bg-bg-overlay-l1: rgba(212, 212, 212, 0.04);
+  --bg-bg-overlay-l2: rgba(212, 212, 212, 0.06);
+  --bg-bg-overlay-l3: rgba(212, 212, 212, 0.08);
+  --bg-bg-overlay-l4: rgba(212, 212, 212, 0.12);
+  --bg-bg-white: #ffffff;
+  --bg-bg-brand: #4b3fe3;
+  --bg-bg-brand-hover: #6a6fff;
+  --bg-bg-brand-active: #3f31c6;
+  --bg-bg-brand-disabled: rgba(75, 63, 227, 0.35);
+  --bg-bg-brand-popup: rgba(106, 111, 255, 0.15);
+  --bg-bg-brand-sub: var(--bg-bg-brand);
+  --bg-bg-brand-hover-sub: var(--bg-bg-brand-hover);
+  --bg-bg-brand-disabled-sub: var(--bg-bg-brand-disabled);
+  --bg-bg-brand-popup-sub: var(--bg-bg-brand-popup);
+  --bg-bg-invert: #e5e5e5;
+  --bg-bg-invert-hover: #f5f5f5;
+  --bg-bg-invert-active: #e5e5e5;
+  --bg-bg-invert-disabled: rgba(212, 212, 212, 0.06);
+  --bg-bg-card: #202020;
+  --bg-bg-card-hover: #171717;
+  --bg-bg-marketplace-banner-plugin-tag: #e5f3ff;
+  --chat-bg-card: var(--bg-bg-card);
+  --chat-bg-card-hover: var(--bg-bg-base-default);
+  --special-bgtabsoverlay: rgba(0, 0, 0, 0.20);
+  --special-tabsoverlay: rgba(13, 14, 15, 0.18);
+  --text-text-default: #e5e5e5;
+  --text-text-default-hover: #fafafa;
+  --text-text-default-active: #fafafa;
+  --text-text-secondary: #a1a1a1;
+  --text-text-secondary-hover: #e5e5e5;
+  --text-text-secondary-active: #e5e5e5;
+  --text-text-tertiary: #737373;
+  --text-text-disabled: #525252;
+  --text-text-brand: #6a6fff;
+  --text-text-brand-hover: #4b3fe3;
+  --text-text-brand-sub: var(--text-text-brand);
+  --text-text-brand-hover-sub: var(--text-text-brand-hover);
+  --text-text-onbrand: #171717;
+  --text-text-onaccent: #171717;
+  --text-text-marketplace-banner-plugin-tag: #054c8f;
+  --icon-icon-default: #e5e5e5;
+  --icon-icon-default-hover: #fafafa;
+  --icon-icon-default-active: #fafafa;
+  --icon-icon-secondary: #a1a1a1;
+  --icon-icon-secondary-hover: #e5e5e5;
+  --icon-icon-secondary-active: #e5e5e5;
+  --icon-icon-tertiary: #737373;
+  --icon-icon-disabled: #525252;
+  --icon-icon-brand: #6a6fff;
+  --icon-icon-brand-hover: #4b3fe3;
+  --icon-icon-brand-sub: var(--icon-icon-brand);
+  --icon-icon-brand-hover-sub: var(--icon-icon-brand-hover);
+  --icon-icon-onbrand: #0a0a0a;
+  --icon-icon-onaccent: #0A0A0A;
+  --icon-icon-white: #ffffff;
+  --border-border-neutral-l1: rgba(229, 229, 229, 0.10);
+  --border-border-neutral-l2: rgba(229, 229, 229, 0.16);
+  --border-border-neutral-l3: rgba(229, 229, 229, 0.20);
+  --border-border-brand: #6a6fff;
+  --border-border-brand-sub: var(--border-border-brand);
+  --border-border-contrast: #ffffff;
+  --status-primary-default: #387bff;
+  --status-primary-hover: #4c88ff;
+  --status-primary-active: #1759dd;
+  --status-primary-surface-l1: rgba(53, 121, 255, 0.18);
+  --status-primary-surface-l2: rgba(53, 121, 255, 0.28);
+  --status-primary-surface-l3: rgba(53, 121, 255, 0.36);
+  --status-success-default: #33c192;
+  --status-success-hover: #5ed4ad;
+  --status-success-active: #27b082;
+  --status-success-surface-l1: rgba(0, 165, 110, 0.18);
+  --status-success-surface-l2: rgba(0, 165, 110, 0.28);
+  --status-success-surface-l3: rgba(0, 165, 110, 0.36);
+  --status-alert-default: #d29d00;
+  --status-alert-hover: #dfb949;
+  --status-alert-active: #ab8820;
+  --status-alert-surface-l1: rgba(210, 157, 0, 0.16);
+  --status-alert-surface-l2: rgba(210, 157, 0, 0.28);
+  --status-alert-surface-l3: rgba(210, 157, 0, 0.36);
+  --status-warning-default: #d27e24;
+  --status-warning-hover: #d78b28;
+  --status-warning-active: #b46510;
+  --status-warning-surface-l1: rgba(210, 126, 36, 0.16);
+  --status-warning-surface-l2: rgba(210, 126, 36, 0.28);
+  --status-warning-surface-l3: rgba(210, 126, 36, 0.36);
+  --status-error-default: #f65a5a;
+  --status-error-hover: #f86262;
+  --status-error-active: #b33636;
+  --status-error-surface-l1: rgba(246, 70, 70, 0.18);
+  --status-error-surface-l2: rgba(246, 70, 70, 0.28);
+  --status-error-surface-l3: rgba(246, 70, 70, 0.36);
+  --accent-accent-teal: #2dd288;
+  --accent-accent-coral: #ff9392;
+  --accent-accent-amber: #dcb364;
+  --accent-accent-lime: #8acb3a;
+  --accent-accent-cyan: #04cbe5;
+  --accent-accent-blue: #7bb8ff;
+  --accent-accent-magenta: #ec93ff;
+  --accent-accent-violet: #bfa5ff;
+  --accent-accent-slate: #afb9cf;
+  --code-code-text: #e0e3ee;
+  --code-code-doc: #7f838c;
+  --code-code-link: #3c7eff;
+  --code-code-number: #f48cca;
+  --code-code-action: #b38cff;
+  --code-code-instruction: #f0d8ff;
+  --code-code-function: #f29d79;
+  --code-code-constant: #80bbff;
+  --code-code-parameter: #82d99f;
+  --code-code-attribute: #ded47e;
+  --code-code-tag: #f2858c;
+  --code-code-terminal: #e0e3ee;
+  --code-code-contrast: #e0e3ee;
+  --code-code-editor: #e0e3ee;
+  --special-white: #ffffff;
+  --special-black: #000000;
+  --viz-viz-series-amber: #edaa45;
+  --viz-viz-series-coral: #f87454;
+  --viz-viz-series-indigo: #b6a3ff;
+  --viz-viz-series-lime: #a6ea39;
+  --viz-viz-series-magenta: #fb9dd7;
+  --viz-viz-series-mint: #1dc981;
+  --viz-viz-series-sky: #22a5f7;
+  --viz-viz-series-slate: #859ead;
+  --viz-viz-series-teal: #78f2f2;
+  --viz-viz-series-violet: #b655fc;
+  --viz-viz-ui-bg-chart: #171717;
+  --viz-viz-ui-bg-tooltip: #0a0a0a;
+  --viz-viz-ui-chart-axis: rgba(229, 229, 229, 0.16);
+  --viz-viz-ui-chart-subtitle: #737373;
+  --viz-viz-ui-chart-tick: #737373;
+  --viz-viz-ui-chart-title: #e5e5e5;
+  --viz-viz-ui-legend-label: #737373;
+  --viz-viz-ui-legend-value: #e5e5e5;
+  --brand-blue-100: #e5f3ff;
+  --brand-blue-200: #cce6ff;
+  --brand-blue-300: #b2daff;
+  --brand-blue-400: #99ceff;
+  --brand-blue-500: #80c1ff;
+  --brand-blue-600: #64b4ff;
+  --brand-blue-700: #3792e6;
+  --brand-blue-800: #1071cb;
+  --brand-blue-900: #054c8f;
+  --brand-blue-1000: #00284d;
+  --brand-blue-grey-100: #f1eff4;
+  --brand-blue-grey-200: #e0e1e6;
+  --brand-blue-grey-300: #cfd3d8;
+  --brand-blue-grey-400: #bfc5ca;
+  --brand-blue-grey-500: #b0b5ba;
+  --brand-blue-grey-600: #a0a6ab;
+  --brand-blue-grey-700: #80898e;
+  --brand-blue-grey-800: #5e696e;
+  --brand-blue-grey-900: #404a4f;
+  --brand-blue-grey-1000: #21262b;
+  --brand-green-grey-100: #f1f4f4;
+  --brand-green-grey-200: #e0e6e6;
+  --brand-green-grey-300: #cfd8d8;
+  --brand-green-grey-400: #bfcaca;
+  --brand-green-grey-500: #b0baba;
+  --brand-green-grey-600: #a0abab;
+  --brand-green-grey-700: #808e8e;
+  --brand-green-grey-800: #5e6e6e;
+  --brand-green-grey-900: #404f4f;
+  --brand-green-grey-1000: #212b2b;
+  --brand-purple-100: #e8e5ff;
+  --brand-purple-200: #d2ccff;
+  --brand-purple-300: #bbb2ff;
+  --brand-purple-400: #a599ff;
+  --brand-purple-500: #8e80ff;
+  --brand-purple-600: #7864ff;
+  --brand-purple-700: #4c37e6;
+  --brand-purple-800: #2610cb;
+  --brand-purple-900: #15058f;
+  --brand-purple-1000: #09004d;
+  --brand-red-100: #ffe5e5;
+  --brand-red-200: #ffcccc;
+  --brand-red-300: #ffb2b2;
+  --brand-red-400: #ff9999;
+  --brand-red-500: #ff8080;
+  --brand-red-600: #ff6464;
+  --brand-red-700: #e63737;
+  --brand-red-800: #cb1010;
+  --brand-red-900: #8f0505;
+  --brand-red-1000: #4d0000;
+  --brand-yellow-100: #fff6e5;
+  --brand-yellow-200: #ffeccc;
+  --brand-yellow-300: #ffe3b2;
+  --brand-yellow-400: #ffda99;
+  --brand-yellow-500: #ffd080;
+  --brand-yellow-600: #ffc864;
+  --brand-yellow-700: #e6a637;
+  --brand-yellow-800: #cb8710;
+  --brand-yellow-900: #8f5c05;
+  --brand-yellow-1000: #4d3000;
+  --brand-blue-grey-100: #f1eff4;
+  --brand-blue-grey-200: #e0e1e6;
+  --brand-blue-grey-300: #cfd3d8;
+  --brand-blue-grey-400: #bfc5ca;
+  --brand-blue-grey-500: #b0b5ba;
+  --brand-blue-grey-600: #a0a6ab;
+  --brand-blue-grey-700: #80898e;
+  --brand-blue-grey-800: #5e696e;
+  --brand-blue-grey-900: #404a4f;
+  --brand-blue-grey-1000: #21262b;
+  --brand-green-grey-100: #f1f4f4;
+  --brand-green-grey-200: #e0e6e6;
+  --brand-green-grey-300: #cfd8d8;
+  --brand-green-grey-400: #bfcaca;
+  --brand-green-grey-500: #b0baba;
+  --brand-green-grey-600: #a0abab;
+  --brand-green-grey-700: #808e8e;
+  --brand-green-grey-800: #5e6e6e;
+  --brand-green-grey-900: #404f4f;
+  --brand-green-grey-1000: #212b2b;
+  --brand-neutral-grey-100: #f2f2f2;
+  --brand-neutral-grey-200: #e3e3e3;
+  --brand-neutral-grey-300: #d6d6d6;
+  --brand-neutral-grey-400: #c7c7c7;
+  --brand-neutral-grey-500: #bababa;
+  --brand-neutral-grey-600: #ababab;
+  --brand-neutral-grey-700: #8a8a8a;
+  --brand-neutral-grey-800: #686868;
+  --brand-neutral-grey-900: #474747;
+  --brand-neutral-grey-1000: #262626;
+  --brand-brand-50: #f2f7ff;
+  --brand-brand-100: #e5eaff;
+  --brand-brand-200: #cfd8ff;
+  --brand-brand-300: #aab7ff;
+  --brand-brand-400: #8894ff;
+  --brand-brand-500: #6a6fff;
+  --brand-brand-600: #4b3fe3;
+  --brand-brand-700: #3f31c6;
+  --brand-brand-800: #2c2290;
+  --brand-brand-900: #1a1759;
+  --brand-brand-950: #010109;
+  --brand-brand-grey-50: #fafafa;
+  --brand-brand-grey-100: #f5f5f5;
+  --brand-brand-grey-200: #e5e5e5;
+  --brand-brand-grey-300: #d4d4d4;
+  --brand-brand-grey-400: #a1a1a1;
+  --brand-brand-grey-500: #737373;
+  --brand-brand-grey-600: #525252;
+  --brand-brand-grey-700: #404040;
+  --brand-brand-grey-800: #262626;
+  --brand-brand-grey-900: #171717;
+  --brand-brand-grey-950: #0a0a0a;
+  --brand-brand-grey-50: #fafafa;
+  --brand-brand-grey-100: #f5f5f5;
+  --brand-brand-grey-200: #e5e5e5;
+  --brand-brand-grey-300: #d4d4d4;
+  --brand-brand-grey-400: #a1a1a1;
+  --brand-brand-grey-500: #737373;
+  --brand-brand-grey-600: #525252;
+  --brand-brand-grey-700: #404040;
+  --brand-brand-grey-800: #262626;
+  --brand-brand-grey-900: #171717;
+  --brand-brand-grey-950: #0a0a0a;
+
+  --body-body-xs: 10px/1.5 var(--font-family-default);
+  --body-body-sm: 11px/1.5 var(--font-family-default);
+  --body-body-sm-strong: 600 11px/1.5 var(--font-family-default);
+  --body-body-md: 12px/1.5 var(--font-family-default);
+  --body-body-md-strong: 600 12px/1.5 var(--font-family-default);
+  --body-body-base: 14px/1.5 var(--font-family-default);
+  --body-body-base-strong: 600 14px/1.5 var(--font-family-default);
+  --heading-heading-3xs: 600 10px/1.4 var(--font-family-heading);
+  --heading-heading-2xs: 600 11px/1.4 var(--font-family-heading);
+  --heading-heading-xs: 600 12px/1.4 var(--font-family-heading);
+  --heading-heading-sm: 600 13px/1.4 var(--font-family-heading);
+  --heading-heading-md: 600 14px/1.4 var(--font-family-heading);
+  --heading-heading-lg: 600 16px/1.4 var(--font-family-heading);
+  --heading-heading-xl: 600 20px/1.4 var(--font-family-heading);
+  --heading-heading-2xl: 600 24px/1.4 var(--font-family-heading);
+  --heading-heading-3xl: 600 32px/1.4 var(--font-family-heading);
+
+  --bg-bg-overlay-l0: rgba(176, 192, 244, 0.03);
+  --bg-primary-item: rgba(176, 192, 244, 0.09);
+  --bg-primary-item-hover: rgba(176, 192, 244, 0.13);
+  --border-primary-item: rgba(176, 192, 244, 0.06);
+  --border-primary-item-hover: rgba(176, 192, 244, 0.1);
+  /* 首页输入框边框颜色（纯色，用于内凹圆弧等需要精确边框的场景） */
+  --homepage-input-border-color: #343538;
+
+  --user-message-bg-solid: #1D352A;
+  --user-message-bg-solid-transparent: rgba(29, 53, 42, 0);
+  --user-message-bg-solid-sub: #2B2A38;
+  --user-message-bg-solid-sub-transparent: rgba(43, 42, 56, 0);
+  --sheet-text-color: #ffffff;
+  --slash-mention-bg: rgba(63, 133, 255, 0.15);
+  --builtin-slash-mention-bg: rgba(149, 112, 255, 0.15);
+
+  --gradient-golden: linear-gradient(180deg, #DAB444 0%, #FFEA8E 100%);
+  --special-bggoldoverlay: rgba(139, 128, 65, 0.12);
+
+  --bg-bg-brand-old: #32f08c;
+  --gradient-brand: linear-gradient(90deg, #3ee1a3 0%, #32f08c 36%, #60f2bd 71.63%, #a0fde7 100%);
+}
+</style><style data-trae-edit-ui="true" id="trae-previewer-tools-styles">:root,
+[data-trae-theme='dark'] {
+  --trae-bg-base-default: #171717;
+  --trae-bg-menu: #222427;
+  --trae-bg-overlay-l1: rgba(255, 255, 255, 0.04);
+  --trae-bg-overlay-l2: rgba(255, 255, 255, 0.08);
+  --trae-bg-overlay-l3: rgba(255, 255, 255, 0.12);
+  --trae-bg-overlay-l4: rgba(255, 255, 255, 0.16);
+  --trae-bg-invert: #f5f9fe;
+  --trae-bg-invert-hover: #e8ecf0;
+  --trae-bg-invert-active: #dce0e4;
+  --trae-bg-invert-disabled: rgba(224, 226, 242, 0.12);
+  --trae-border-l1: #e0e2f217;
+  --trae-border-l2: rgba(255, 255, 255, 0.12);
+  --trae-border-l3: rgba(255, 255, 255, 0.08);
+  --trae-border-neutral-l3: rgba(229, 229, 229, 0.20);
+  --trae-border-brand: #6a6fff;
+  --trae-text-default: #f5f9fe;
+  --trae-text-default-hover: #f5f9fe;
+  --trae-text-default-active: #f5f9fe;
+  --trae-text-secondary: rgba(245, 249, 254, 0.5);
+  --trae-text-tertiary: rgba(245, 249, 254, 0.4);
+  --trae-text-disabled: #666b75;
+  --trae-text-onaccent: #222427;
+  --trae-icon-default: #f5f9fe;
+  --trae-icon-secondary: rgba(245, 249, 254, 0.5);
+  --trae-icon-brand: #6a6fff;
+  --trae-icon-onaccent: #222427;
+  --trae-status-success: #22c55e;
+  --trae-status-primary: #3b82f6;
+  --trae-status-primary-default: #387bff;
+  --trae-status-primary-surface-l1: rgba(53, 121, 255, 0.18);
+  --trae-status-success-default: #33c192;
+  --trae-status-success-surface-l1: rgba(0, 165, 110, 0.18);
+  --trae-status-error-default: #f65a5a;
+  --trae-status-error-surface-l1: rgba(246, 70, 70, 0.18);
+  --trae-annotation-marker-bg: #4b3fe3;
+  --trae-annotation-marker-text: #ffffff;
+  --trae-annotation-region-border: var(--trae-status-primary-default);
+  --trae-annotation-rect-border: var(--trae-status-error-default);
+  --trae-annotation-arrow-anchor-bg: var(--trae-status-primary-default);
+  --trae-panel-shadow: 0px 6px 24px -1px rgba(0, 0, 0, 0.16);
+  --trae-floating-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
+  --trae-shadow-elevation-50: 0 1px 2px -1px rgba(0, 0, 0, 0.45);
+  --trae-tab-active-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.16);
+}
+
+[data-trae-theme='light'] {
+  --trae-bg-base-default: #fafafa;
+  --trae-bg-menu: #ffffff;
+  --trae-bg-overlay-l1: rgba(0, 0, 0, 0.04);
+  --trae-bg-overlay-l2: rgba(0, 0, 0, 0.06);
+  --trae-bg-overlay-l3: rgba(0, 0, 0, 0.08);
+  --trae-bg-overlay-l4: rgba(0, 0, 0, 0.12);
+  --trae-bg-invert: #1f2328;
+  --trae-bg-invert-hover: #32383f;
+  --trae-bg-invert-active: #444d56;
+  --trae-bg-invert-disabled: rgba(115, 115, 115, 0.20);
+  --trae-border-l1: rgba(0, 0, 0, 0.1);
+  --trae-border-l2: rgba(0, 0, 0, 0.12);
+  --trae-border-l3: rgba(0, 0, 0, 0.08);
+  --trae-border-neutral-l3: rgba(115, 115, 115, 0.36);
+  --trae-border-brand: #4b3fe3;
+  --trae-text-default: #1f2328;
+  --trae-text-default-hover: #111214;
+  --trae-text-default-active: #111214;
+  --trae-text-secondary: rgba(31, 35, 40, 0.5);
+  --trae-text-tertiary: rgba(31, 35, 40, 0.4);
+  --trae-text-disabled: #a1a1a1;
+  --trae-text-onaccent: #ffffff;
+  --trae-icon-default: #1f2328;
+  --trae-icon-secondary: rgba(31, 35, 40, 0.5);
+  --trae-icon-brand: #4b3fe3;
+  --trae-icon-onaccent: #ffffff;
+  --trae-status-success: #22c55e;
+  --trae-status-primary: #3b82f6;
+  --trae-status-primary-default: #2f74ff;
+  --trae-status-primary-surface-l1: rgba(47, 116, 255, 0.12);
+  --trae-status-success-default: #15a877;
+  --trae-status-success-surface-l1: rgba(64, 176, 139, 0.12);
+  --trae-status-error-default: #e8463a;
+  --trae-status-error-surface-l1: rgba(232, 70, 58, 0.12);
+  --trae-annotation-marker-bg: #4b3fe3;
+  --trae-annotation-marker-text: #ffffff;
+  --trae-annotation-region-border: var(--trae-status-primary-default);
+  --trae-annotation-rect-border: var(--trae-status-error-default);
+  --trae-annotation-arrow-anchor-bg: var(--trae-status-primary-default);
+  --trae-panel-shadow: 0px 6px 24px -1px rgba(24, 24, 24, 0.06);
+  --trae-floating-shadow: 0px 2px 8px 0px rgba(24, 24, 24, 0.2);
+  --trae-shadow-elevation-50: 0 1px 2px -1px rgba(24, 24, 24, 0.08);
+  --trae-tab-active-shadow: 0px 1px 2px -1px rgba(24, 24, 24, 0.08);
+}
+
+@keyframes trae-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.trae-edit-mode-active body *:not([data-trae-edit-ui]):not([data-trae-edit-ui] *) {
+  transition: none !important;
+  animation-play-state: paused !important;
+}
+
+.trae-browser-inspect-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS，无法访问 :root 变量 */
+  z-index: 1400; /* z-layer: fullscreen (1400) */
+  pointer-events: auto;
+  background: transparent;
+}
+
+.trae-browser-inspect-highlight-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS，无法访问 :root 变量 */
+  z-index: 1401; /* above overlay */
+  display: none;
+}
+
+.trae-browser-inspect-highlight-tag {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 18px;
+  padding: 0 6px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  background-color: var(--trae-status-success-default);
+  color: var(--trae-text-onaccent);
+  font-size: 12px;
+  font-weight: 400;
+  display: none;
+  align-items: center;
+  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS，无法访问 :root 变量 */
+  z-index: 1402; /* above highlight-box */
+}
+
+.trae-browser-inspect-highlight-box-show {
+  display: flex;
+}
+
+.trae-browser-inspect-highlight-tag.trae-browser-inspect-highlight-box-show {
+  display: none;
+}
+
+.trae-browser-inspect-select-button.trae-browser-inspect-highlight-box-show {
+  display: block !important;
+}
+
+.trae-browser-inspect-select-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- 独立注入 CSS，无法访问 :root 变量 */
+  z-index: 1402; /* above overlay, must receive pointer events */
+}
+
+.trae-browser-inspect-select-highlight-box {
+  background: transparent !important;
+}
+
+.trae-browser-inspect-select-highlight-box .trae-browser-inspect-highlight-tag {
+  background-color: var(--trae-status-success-default);
+}
+
+.trae-add-to-chat-card {
+  display: block;
+  overflow: hidden;
+  background: var(--trae-bg-menu);
+  border: 1px solid var(--trae-border-l1);
+  border-radius: 8px;
+  box-shadow: var(--trae-floating-shadow);
+  transition:
+    width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.trae-add-to-chat-content {
+  position: relative;
+  width: max-content;
+}
+
+.trae-fade-exit {
+  opacity: 0;
+  transition: opacity 0.15s ease-out;
+}
+
+.trae-fade-enter {
+  opacity: 1;
+  transition: opacity 0.2s ease-in;
+}
+
+.trae-buttons-view {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 4px;
+  background: transparent;
+}
+
+.trae-action-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transform: none !important;
+  transition: none !important;
+  animation: none !important;
+}
+
+.trae-action-button:hover {
+  background: var(--trae-bg-overlay-l2);
+}
+
+.trae-action-button:active {
+  background: var(--trae-bg-overlay-l3);
+}
+
+.trae-action-button:focus-visible {
+  outline: 2px solid var(--trae-status-primary);
+  outline-offset: 1px;
+}
+
+.trae-action-button-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--trae-icon-default);
+  flex-shrink: 0;
+}
+
+.trae-action-button-title {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--trae-text-default);
+  white-space: nowrap;
+}
+
+.trae-edit-toolbar-button-active {
+  background: var(--trae-status-primary-surface-l1) !important;
+  color: var(--trae-status-primary-default) !important;
+}
+
+.trae-edit-toolbar button[data-action='alignment-dropdown']:hover,
+.trae-edit-toolbar button[data-action='text-align-dropdown']:hover,
+.trae-edit-toolbar button[data-action='font-decrease']:hover,
+.trae-edit-toolbar button[data-action='font-increase']:hover,
+.trae-edit-toolbar button[data-action^='align-']:hover {
+  border-radius: 8px;
+  background: var(--bg-bg-overlay-l1, rgba(115, 115, 115, 0.08)) !important;
+}
+
+.trae-edit-toolbar button[data-action='alignment-dropdown']:active,
+.trae-edit-toolbar button[data-action='text-align-dropdown']:active,
+.trae-edit-toolbar button[data-action='font-decrease']:active,
+.trae-edit-toolbar button[data-action='font-increase']:active,
+.trae-edit-toolbar button[data-action^='align-']:active {
+  border-radius: 8px;
+  background: var(--bg-bg-overlay-l2, rgba(115, 115, 115, 0.12)) !important;
+}
+
+.trae-comment-input {
+  background: transparent;
+  color: var(--trae-text-default);
+  caret-color: var(--trae-text-default);
+}
+
+.trae-comment-input::placeholder {
+  color: var(--trae-text-tertiary);
+}
+
+.trae-edit-panel [data-trae-tooltip] {
+  position: relative;
+}
+
+.trae-edit-panel [data-trae-tooltip]::after {
+  content: attr(data-trae-tooltip);
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  z-index: var(--z-max, 9999);
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: var(--bg-bg-invert, var(--trae-bg-invert));
+  color: var(--text-text-onaccent, var(--trae-text-onaccent));
+  box-shadow: var(--trae-floating-shadow);
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', sans-serif;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.039px;
+  white-space: nowrap;
+  pointer-events: none;
+  box-sizing: border-box;
+  opacity: 0;
+  transform: translateX(-50%);
+  visibility: hidden;
+}
+
+.trae-edit-panel [data-trae-tooltip]::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 5px);
+  z-index: var(--z-max, 9999);
+  width: 8px;
+  height: 4px;
+  background: var(--bg-bg-invert, var(--trae-bg-invert));
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  transform: translateX(-50%);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.trae-edit-panel [data-trae-tooltip]:hover::after,
+.trae-edit-panel [data-trae-tooltip]:focus-visible::after,
+.trae-edit-panel [data-trae-tooltip]:hover::before,
+.trae-edit-panel [data-trae-tooltip]:focus-visible::before {
+  opacity: 1;
+  visibility: visible;
+}
+
+.trae-comment-btn {
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.trae-comment-btn:disabled {
+  cursor: not-allowed;
+}
+
+.trae-comment-btn:focus-visible {
+  outline: 2px solid var(--trae-status-primary);
+  outline-offset: 1px;
+}
+
+.trae-comment-btn-primary {
+  background: var(--trae-bg-invert);
+  color: var(--trae-text-onaccent);
+}
+
+.trae-comment-btn-primary:hover:not(:disabled) {
+  background: var(--trae-bg-invert-hover);
+}
+
+.trae-comment-btn-primary:active:not(:disabled) {
+  background: var(--trae-bg-invert-active);
+}
+
+.trae-comment-btn-primary:disabled {
+  background: var(--trae-bg-invert-disabled);
+  color: var(--trae-text-disabled);
+}
+
+.trae-comment-btn-secondary {
+  background: var(--trae-bg-overlay-l2);
+  color: var(--trae-text-default);
+}
+
+.trae-comment-btn-secondary:hover:not(:disabled) {
+  background: var(--trae-bg-overlay-l3);
+}
+
+.trae-comment-btn-secondary:active:not(:disabled) {
+  background: var(--trae-bg-overlay-l4);
+}
+
+.trae-comment-btn-secondary:disabled {
+  background: var(--trae-bg-overlay-l2);
+  color: var(--trae-text-disabled);
+}
+
+.trae-comment-btn-text {
+  background: transparent;
+  color: var(--trae-text-default);
+}
+
+.trae-comment-btn-text:hover:not(:disabled) {
+  border-radius: 8px;
+  background: var(--bg-bg-overlay-l1, var(--trae-bg-overlay-l1));
+  color: var(--trae-text-default-hover);
+}
+
+.trae-comment-btn-text:active:not(:disabled) {
+  border-radius: 8px;
+  background: var(--trae-bg-overlay-l2);
+  color: var(--trae-text-default-active);
+}
+
+.trae-comment-btn-text:disabled {
+  background: transparent;
+  color: var(--trae-text-disabled);
+}
+
+.trae-marking-btn {
+  justify-content: center;
+}
+
+.trae-marking-btn:hover:not(:disabled) {
+  background: var(--trae-bg-overlay-l1) !important;
+}
+
+.trae-marking-btn:active:not(:disabled) {
+  background: var(--trae-bg-overlay-l2) !important;
+}
+
+.trae-marking-btn-active {
+  background: var(--trae-status-primary-surface-l1) !important;
+  color: var(--trae-status-primary-default) !important;
+}
+
+.trae-marking-btn:disabled {
+  color: var(--trae-text-disabled) !important;
+  cursor: not-allowed !important;
+}
+
+.trae-action-button-shortcut {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--trae-icon-secondary);
+  flex-shrink: 0;
+}
+
+.trae-shortcut-container {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.trae-shortcut-key {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 12px;
+  color: var(--trae-icon-secondary);
+}
+
+.trae-add-to-chat-divider {
+  width: 2px;
+  height: 12px;
+  padding: 0 6px;
+  box-sizing: content-box;
+  background-clip: content-box;
+  background-color: var(--trae-border-l2);
+  flex-shrink: 0;
+}
+
+.trae-editor-view {
+  display: flex;
+  flex-direction: column;
+  width: 320px;
+  padding: 8px;
+  background: transparent;
+}
+
+.trae-editor-text-container {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  background: var(--trae-bg-overlay-l1);
+  border: 1px solid var(--trae-border-l3);
+  border-radius: 4px;
+  gap: 8px;
+}
+
+.trae-editor-textarea {
+  flex: 1;
+  padding: 0 2px;
+  border: none;
+  background: transparent;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--trae-text-default);
+  resize: none;
+  outline: none;
+  overflow-y: auto;
+  max-height: 140px;
+}
+
+.trae-editor-textarea::placeholder {
+  color: var(--trae-text-tertiary);
+}
+
+.trae-editor-action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition:
+    max-height 0.2s ease-out,
+    opacity 0.2s ease-out,
+    margin-top 0.2s ease-out;
+}
+
+.trae-editor-action-bar-visible {
+  max-height: 32px;
+  opacity: 1;
+  margin-top: 8px;
+}
+
+.trae-editor-cancel-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 4px;
+  background: var(--trae-bg-overlay-l2);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.trae-editor-cancel-button:hover {
+  background: var(--trae-bg-overlay-l3);
+}
+
+.trae-editor-cancel-button:active {
+  background: var(--trae-bg-overlay-l3);
+}
+
+.trae-editor-cancel-button:focus-visible {
+  outline: 2px solid var(--trae-status-primary);
+  outline-offset: 1px;
+}
+
+.trae-editor-cancel-text {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--trae-text-default);
+  white-space: nowrap;
+  padding: 0 4px;
+}
+
+.trae-editor-submit-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 8px;
+  background: var(--trae-bg-invert);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.trae-editor-submit-button:hover {
+  background: var(--trae-bg-invert-hover);
+}
+
+.trae-editor-submit-button:active {
+  background: var(--trae-bg-invert-active);
+}
+
+.trae-editor-submit-button:focus-visible {
+  outline: 2px solid var(--trae-status-primary);
+  outline-offset: 1px;
+}
+
+.trae-editor-submit-text {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--trae-text-onaccent);
+  white-space: nowrap;
+  padding: 0 4px;
+}
+
+.trae-editor-submit-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  color: var(--trae-icon-onaccent);
+  flex-shrink: 0;
+}
+
+.trae-success-view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 12px;
+  height: 32px;
+  white-space: nowrap;
+}
+
+.trae-success-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--trae-status-success);
+  flex-shrink: 0;
+}
+
+.trae-success-text {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: var(--trae-text-default);
+  user-select: none;
+}
+</style></head>
+<body>
+
+<!-- ========== 左：手机模拟器 ========== -->
+<div class="phone-frame">
+  <div class="phone-notch"></div>
+  <div class="phone-home-bar"></div>
+
+  <!-- 流程提示条 -->
+  <div class="flow-indicator" id="flowIndicator">
+    <div class="flow-step active" id="step1">
+      <span class="flow-step-num">1</span>
+      <span>车辆管理页</span>
+    </div>
+    <span class="flow-arrow">▶</span>
+    <div class="flow-step active" id="step2">
+      <span class="flow-step-num">2</span>
+      <span>拍摄引导</span>
+    </div>
+    <span class="flow-arrow">▶</span>
+    <div class="flow-step" id="step3">
+      <span class="flow-step-num">3</span>
+      <span>预览确认</span>
+    </div>
+    <span class="flow-arrow">▶</span>
+    <div class="flow-step" id="step4">
+      <span class="flow-step-num">4</span>
+      <span>回填上传</span>
+    </div>
+  </div>
+
+  <div class="page-content">
+
+    <!-- ===== 第1页：车辆管理页（现有页面） ===== -->
+    <div class="vehicle-page hide" id="vehiclePage">
+      <div class="vehicle-nav">
+        <span class="back-btn">❮</span>
+        <span class="title">添加车辆</span>
+        <span class="spacer"></span>
+      </div>
+      <div class="vehicle-body">
+        <!-- 行驶证主页 -->
+        <div class="upload-item">
+          <div class="upload-label"><span class="required">*</span>行驶证主页</div>
+          <div class="upload-slot" id="slotFront" onclick="openCameraGuide('front')">
+            <span class="plus-icon">+</span>
+            <span class="guide-badge">引导拍摄</span>
+          </div>
+        </div>
+        <!-- 行驶证副页 -->
+        <div class="upload-item">
+          <div class="upload-label"><span class="required">*</span>行驶证副页</div>
+          <div class="upload-slot" id="slotBack" onclick="openCameraGuide('back')">
+            <span class="plus-icon">+</span>
+            <span class="guide-badge">引导拍摄</span>
+          </div>
+        </div>
+        <!-- 行驶证车辆照片 -->
+        <div class="upload-item">
+          <div class="upload-label"><span class="required">*</span>行驶证车辆照片</div>
+          <div class="upload-slot" id="slotCar" onclick="openCameraGuide('car')">
+            <span class="plus-icon">+</span>
+            <span class="guide-badge">引导拍摄</span>
+          </div>
+        </div>
+        <!-- 车头照（不进入引导） -->
+        <div class="upload-item">
+          <div class="upload-label"><span class="required">*</span>车头照</div>
+          <div class="upload-slot" onclick="alert('车头照：保持现有 van-uploader 直接调起系统选择器，不进入拍摄引导页')" style="border-style: dashed; border-color: #ddd;">
+            <span class="plus-icon" style="color:#ddd;">+</span>
+          </div>
+        </div>
+        <!-- 车牌号 -->
+        <div class="form-field">
+          <div class="field-label">车牌号</div>
+          <div class="field-value" id="carNumField">（OCR自动回填）</div>
+        </div>
+        <!-- 车辆类别 -->
+        <div class="form-field">
+          <div class="field-label">车辆类别</div>
+          <div class="field-value">请选择</div>
+        </div>
+      </div>
+      <div class="vehicle-footer">
+        <button class="submit-btn" onclick="alert('提交（现有逻辑不变）')">保存</button>
+      </div>
+    </div>
+
+    <!-- ===== 第2页：拍摄引导页（新增） ===== -->
+    <div class="camera-page show" id="cameraPage">
+      <div class="camera-bg"></div>
+
+      <div class="camera-nav">
+        <span class="back-btn" onclick="closeCameraGuide()">❮</span>
+        <span class="title" id="cameraTitle">拍摄行驶证车辆照片</span>
+        <span class="spacer"></span>
+      </div>
+
+      <div class="guide-layer">
+        <!-- 顶部主指令卡 -->
+        <div class="guide-hero">
+          <div class="guide-hero-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="5" width="18" height="14" rx="2"></rect>
+              <path d="M3 9h18"></path>
+              <circle cx="8" cy="13.5" r="1.6"></circle>
+              <path d="M11 12.5h7M11 15h5"></path>
+            </svg>
+          </div>
+          <div class="guide-hero-text">
+            <div class="guide-hero-title" id="cameraHeroTitle">请将车辆对准取景框</div>
+            <div class="guide-hero-sub" id="cameraHeroSub">从卡套内拿出，避免反光</div>
+          </div>
+        </div>
+
+        <!-- 取景框 -->
+        <div class="guide-frame-outer">
+          <span class="corner tl"></span>
+          <span class="corner tr"></span>
+          <span class="corner bl"></span>
+          <span class="corner br"></span>
+          <div class="guide-frame-border"></div>
+          <div class="guide-hole">
+            <div class="guide-mask"></div>
+            <div class="license-template lt-car-page" id="licenseTemplate"><div class="lt-inner"><div class="lt-title"><div class="lt-title-2">车辆照片</div></div></div></div>
+          </div>
+        </div>
+
+        <!-- 底部取景要点（图标化 do / don't） -->
+        <div class="guide-tips">
+          <div class="tip-item ok">
+            <span class="tip-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M4 8V4h4M16 4h4v4M20 16v4h-4M8 20H4v-4"></path>
+              </svg>
+            </span>
+            <span class="tip-label">四角入框</span>
+          </div>
+          <div class="tip-item ok">
+            <span class="tip-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M4 12h16M7 7h10M7 17h10"></path>
+              </svg>
+            </span>
+            <span class="tip-label">平放正向</span>
+          </div>
+          <div class="tip-item warn">
+            <span class="tip-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="4"></circle>
+                <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M5 19l2-2"></path>
+              </svg>
+            </span>
+            <span class="tip-label">避免反光</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="shoot-bar">
+        <div class="shoot-btn" onclick="takePhoto()"></div>
+        <div class="shoot-label">点击拍照</div>
+      </div>
+    </div>
+
+    <!-- ===== 第3页：预览确认页（新增） ===== -->
+    <div class="preview-page" id="previewPage">
+      <div class="camera-nav">
+        <span class="back-btn" onclick="cancelPreview()">❮</span>
+        <span class="title">照片预览</span>
+        <span class="spacer"></span>
+      </div>
+      <div class="preview-img-wrap">
+        <img class="preview-img" id="previewImg" src="" alt="预览">
+      </div>
+      <div class="preview-btns">
+        <button class="preview-btn btn-retake" onclick="retake()">重拍</button>
+        <button class="preview-btn btn-confirm" onclick="confirmPhoto()">确认使用</button>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+
+<!-- ========== 右：交互说明面板 ========== -->
+<div class="side-panel">
+  <div class="panel-header">原型说明 — 调度App H5行驶证拍摄取景引导（基于现有流程改造）</div>
+  <div class="panel-body">
+
+    <div class="tab-bar">
+      <div class="tab-btn active" onclick="switchTab(this,'intro')">交互流程</div>
+      <div class="tab-btn" onclick="switchTab(this,'spec')">设计规范</div>
+      <div class="tab-btn" onclick="switchTab(this,'flow')">流程对接</div>
+      <div class="tab-btn" onclick="switchTab(this,'rules')">业务规则</div>
+    </div>
+
+    <!-- Tab 1: 交互流程 -->
+    <div id="tab-intro">
+      <div class="action-hint">
+        <strong>点击左侧手机中"行驶证主页"上传槽位</strong>，即可体验完整流程：车辆管理页 → 拍摄引导页 → 预览确认 → 回填上传。
+      </div>
+
+      <h4>第1步：车辆管理页（现有页面）</h4>
+      <ul>
+        <li>页面为现有的 <code>vehicleAdd.vue</code>，展示行驶证三个上传槽位</li>
+        <li>行驶证槽位标注蓝色"引导拍摄"角标，表示点击后会进入拍摄引导</li>
+        <li><strong>车头照</strong>槽位无角标，点击后保持现有 <code>van-uploader</code> 直接调起系统选择器的逻辑</li>
+      </ul>
+
+      <h4>第2步：拍摄引导页（新增）</h4>
+      <ul>
+        <li>点击行驶证槽位 → 拦截 <code>van-uploader</code> 默认行为 → 进入拍摄引导页</li>
+        <li>底层为 WebRTC <code>getUserMedia</code> 相机预览（原型中为模拟背景）</li>
+        <li>叠加半透明遮罩 + 镂空引导框（约 1.43:1 横向比例）</li>
+        <li>四角 L 形青色角标辅助对齐证件边缘</li>
+        <li>引导框内叠加<strong>证件模板轮廓</strong>（半透明）：标题位置、照片区域、信息区域、印章位置，帮助用户确认证件方向和位置</li>
+        <li>三种页面展示不同模板：主页（标题+分隔线+照片位+信息区+底部日期区+左下印章）、副页（三栏字段+检验记录+条形码）、车辆照片（车辆轮廓）</li>
+        <li>上方提示："请将行驶证从卡套内取出后拍摄，避免反光"</li>
+        <li>下方提示："请将证件对准框内，确保边缘完整、文字清晰"</li>
+        <li>点击底部白色圆形"拍摄"按钮 → 捕获画面</li>
+      </ul>
+
+      <h4>第3步：预览确认页（新增）</h4>
+      <ul>
+        <li>展示刚拍摄的照片</li>
+        <li><strong>重拍</strong>：返回拍摄引导页重新拍摄</li>
+        <li><strong>确认使用</strong>：将照片传回现有流程</li>
+      </ul>
+
+      <h4>第4步：回填上传（现有流程，完全不变）</h4>
+      <ul>
+        <li>确认使用后，构造 <code>{ file: File, content: dataURL }</code> 对象</li>
+        <li>传入现有的 <code>after-read</code> Handler（如 <code>vehicleLicenseFrontHandler</code>）</li>
+        <li>→ <code>compressFileItem()</code> 压缩</li>
+        <li>→ <code>uploadImage()</code> 上传（<code>POST /order/uploadImage</code>）</li>
+        <li>→ <code>ocrHandler()</code> OCR 识别（<code>POST /agg-api/tencent-ocr/unifiedOCR</code>）</li>
+        <li>→ 回填表单字段（车牌号、车架号等）</li>
+        <li>槽位显示拍摄的照片缩略图</li>
+      </ul>
+
+      <h4>三页差异化（标题+模板不同）</h4>
+      <ul>
+        <li><strong>行驶证主页</strong>：标题"拍摄行驶证主页" → 极简模板：标题+分隔线+左侧照片位+右侧信息区+底部日期区+左下印章 → 对应 <code>vehicleLicenseFrontHandler</code></li>
+        <li><strong>行驶证副页</strong>：标题"拍摄行驶证副页" → 模板：三栏字段（号牌号码/核定载人数/整备质量 + 档案编号/总质量 + 检验记录）+条形码 → 对应 <code>vehicleLicenseBackHandler</code></li>
+        <li><strong>行驶证车辆照片</strong>：标题"拍摄行驶证车辆照片" → 模板：车辆SVG轮廓 → 对应 <code>vehicleLicenseCarHandler</code></li>
+      </ul>
+    </div>
+
+    <!-- Tab 2: 设计规范 -->
+    <div id="tab-spec" style="display:none;">
+      <h4>引导框规格</h4>
+      <table class="spec-table">
+        <tbody><tr><th>项目</th><th>规格</th></tr>
+        <tr><td>引导框宽高比</td><td>约 1.43:1（横向，匹配行驶证实物比例）</td></tr>
+        <tr><td>引导框宽度</td><td>占屏幕宽度的 80%（约 300px @375px屏）</td></tr>
+        <tr><td>遮罩透明度</td><td>rgba(0,0,0,0.55)（约55%黑色）</td></tr>
+        <tr><td>遮罩实现方式</td><td>box-shadow: 0 0 0 9999px rgba(0,0,0,0.55)</td></tr>
+        <tr><td>角标颜色</td><td>#4fc3f7（浅青色，高对比度）</td></tr>
+        <tr><td>角标粗细</td><td>3px solid</td></tr>
+        <tr><td>角标尺寸</td><td>22px × 22px</td></tr>
+        <tr><td>提示文字颜色</td><td>#fff（白色）</td></tr>
+        <tr><td>提示文字阴影</td><td>0 1px 4px rgba(0,0,0,0.6)</td></tr>
+        <tr><td>拍摄按钮</td><td>72px 圆环，4px白边，中心58px白点</td></tr>
+        <tr><td>证件模板叠层</td><td>引导框内叠加行驶证轮廓（标题/字段/印章），透明度约20%-35%</td></tr>
+        <tr><td>主页模板</td><td>极简：标题+分隔线+左侧照片位+右侧信息区+底部日期区+左下印章（不展示具体字段标签）</td></tr>
+        <tr><td>副页模板</td><td>标题+三栏字段（号牌/载人数/质量 + 档案编号/总质量 + 检验记录）+条形码</td></tr>
+        <tr><td>车辆照片模板</td><td>车辆SVG轮廓（车身/车窗/车轮），引导居中拍摄</td></tr>
+      </tbody></table>
+
+      <h4>屏幕适配</h4>
+      <ul>
+        <li>320px - 430px 宽度范围自适应缩放</li>
+        <li>竖屏：引导框为横向矩形（行驶证横向放置）</li>
+        <li>横屏：引导框自适应为纵向矩形（可选适配）</li>
+        <li>提示文字自动换行，不截断</li>
+        <li>底部拍摄按钮始终在安全区域内（避开 Home 指示条）</li>
+      </ul>
+
+      <h4>降级方案</h4>
+      <div class="warn-box">
+        <p>若设备不支持 <code>getUserMedia</code>（部分低版本 Android WebView 或非 HTTPS 环境）：<br>
+        → 降级为 <code>van-uploader</code> 直接调起系统选择器<br>
+        → 不展示引导框<br>
+        → 后续压缩→上传→OCR流程正常执行</p>
+      </div>
+    </div>
+
+    <!-- Tab 3: 流程对接 -->
+    <div id="tab-flow" style="display:none;">
+      <h4>现有代码流程（改造前）</h4>
+      <div class="flow-diagram">van-uploader 点击
+  │
+  ▼
+系统选择器（accept="image/*"）
+  │
+  ▼
+after-read 回调
+  │  vehicleLicenseFrontHandler()
+  │  vehicleLicenseBackHandler()
+  │  vehicleLicenseCarHandler()
+  ▼
+compressFileItem()  ← 前端压缩
+  │
+  ▼
+uploadImage()       ← POST /order/uploadImage
+  │
+  ▼
+ocrHandler()        ← POST /agg-api/.../unifiedOCR
+  │
+  ▼
+回填表单字段</div>
+
+      <h4>改造后流程</h4>
+      <div class="flow-diagram">van-uploader 点击（行驶证槽位）
+  │
+  ▼  ← 新增：拦截点击
+拍摄引导页（CameraGuide.vue）
+  │  · WebRTC getUserMedia 相机预览
+  │  · 半透明遮罩 + 引导框 + 角标
+  │  · 文字提示
+  ▼
+点击拍摄 → Canvas 捕获帧
+  │
+  ▼  ← 新增：预览确认
+预览确认页
+  │  · 重拍 → 返回拍摄引导页
+  │  · 确认使用 ↓
+  ▼
+构造 { file: File, content: dataURL }
+  │
+  ▼  ← 传入现有 Handler
+vehicleLicenseFrontHandler(file)
+  │
+  ▼  ── 以下流程完全不变 ──
+compressFileItem()  ← 前端压缩
+  │
+  ▼
+uploadImage()       ← POST /order/uploadImage
+  │
+  ▼
+ocrHandler()        ← POST /agg-api/.../unifiedOCR
+  │
+  ▼
+回填表单字段</div>
+
+      <div class="highlight-box">
+        <p><strong>核心改造点：</strong>拍摄确认后，将 Canvas 捕获的 Blob 构造为 <code>{ file: File, content: dataURL }</code> 格式，调用对应槽位的现有 Handler 方法。后续 <code>compressFileItem</code> → <code>uploadImage</code> → <code>ocrHandler</code> 链路完全复用，零改动。</p>
+      </div>
+
+      <h4>涉及文件</h4>
+      <table class="spec-table">
+        <tbody><tr><th>文件</th><th>变更</th></tr>
+        <tr><td><code>vehicleAdd.vue</code></td><td>改造：行驶证三个槽位增加点击拦截</td></tr>
+        <tr><td><code>CameraGuide.vue</code></td><td>新增：拍摄引导+预览确认组件</td></tr>
+        <tr><td><code>mine.js</code></td><td>不变：uploadImage / ocrHandler</td></tr>
+        <tr><td>后端</td><td>不变</td></tr>
+      </tbody></table>
+    </div>
+
+    <!-- Tab 4: 业务规则 -->
+    <div id="tab-rules" style="display:none;">
+      <h4>触发规则</h4>
+      <ul>
+        <li>仅<strong>行驶证三个槽位</strong>（主页/副页/车辆照片）进入拍摄引导页</li>
+        <li><strong>车头照、保单</strong>等其他槽位保持现有 <code>van-uploader</code> 直接调起选择器逻辑</li>
+        <li>首次上传和重新上传均触发引导页</li>
+        <li>修改车辆时重新上传行驶证同样进入引导页</li>
+      </ul>
+
+      <h4>拍摄规则</h4>
+      <ul>
+        <li>引导框仅做<strong>视觉辅助</strong>，不强制拦截拍摄</li>
+        <li>用户未对准引导框也可点击拍摄，进入预览后可重拍</li>
+        <li>拍摄后仍走原有<strong>压缩 → 上传 → OCR识别</strong>流程</li>
+      </ul>
+
+      <h4>降级规则</h4>
+      <ul>
+        <li>设备不支持 <code>getUserMedia</code> → 降级为 <code>van-uploader</code> 系统选择器</li>
+        <li>iOS 微信内置浏览器权限受限 → 降级为系统选择器</li>
+        <li>降级后引导框不展示，用户走原有流程</li>
+        <li>降级后压缩→上传→OCR流程正常</li>
+      </ul>
+
+      <h4>权限规则</h4>
+      <ul>
+        <li>进入拍摄引导页前检测相机权限</li>
+        <li>未授权时提示用户开启权限，并提供"从相册选择"降级入口</li>
+      </ul>
+
+      <div class="highlight-box">
+        <p><strong>核心原则：</strong>引导框是"辅助提示"而非"强制校验"，目标是提升照片质量，而非增加用户操作门槛。所有拦截和校验仍由后端OCR完成。后续的上传和OCR流程完全不变。</p>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+
+<script>
+/* ===== 状态管理 ===== */
+var currentSlot = '';  // 'front' | 'back' | 'car'
+var slotTitles = {
+  front: '拍摄行驶证主页',
+  back: '拍摄行驶证副页',
+  car: '拍摄行驶证车辆照片'
+};
+var slotElements = {
+  front: 'slotFront',
+  back: 'slotBack',
+  car: 'slotCar'
+};
+
+/* ===== 流程步骤更新 ===== */
+function updateFlowStep(step) {
+  var steps = ['step1', 'step2', 'step3', 'step4'];
+  for (var i = 0; i < steps.length; i++) {
+    var el = document.getElementById(steps[i]);
+    if (i < step) {
+      el.classList.add('active');
+    } else {
+      el.classList.remove('active');
+    }
+  }
+}
+
+/* ===== 打开拍摄引导页 ===== */
+var heroTitles = {
+  front: '请将主页对准取景框',
+  back:  '请将副页对准取景框',
+  car:   '请将车辆对准取景框'
+};
+var heroSubs = {
+  front: '从卡套内拿出，避免反光',
+  back:  '从卡套内拿出，避免反光',
+  car:   '从卡套内拿出，避免反光'
+};
+
+function openCameraGuide(type) {
+  currentSlot = type;
+  document.getElementById('cameraTitle').textContent = slotTitles[type];
+  document.getElementById('cameraHeroTitle').textContent = heroTitles[type];
+  document.getElementById('cameraHeroSub').textContent = heroSubs[type];
+  renderLicenseTemplate(type);
+  document.getElementById('vehiclePage').classList.add('hide');
+  document.getElementById('cameraPage').classList.add('show');
+  updateFlowStep(2);
+}
+
+/* ===== 渲染证件模板叠层 ===== */
+function renderLicenseTemplate(type) {
+  var el = document.getElementById('licenseTemplate');
+  el.className = 'license-template';
+  if (type === 'front') {
+    el.className += ' lt-front-page';
+    el.innerHTML =
+      '<div class="lt-inner">' +
+        '<div class="lt-title">' +
+          '<div class="lt-title-line">中华人民共和国机动车行驶证</div>' +
+        '</div>' +
+        '<div class="lt-seal">印章</div>' +
+      '</div>';
+  } else if (type === 'back') {
+    el.className += ' lt-back-page';
+    el.innerHTML =
+      '<div class="lt-inner">' +
+        '<div class="lt-barcode-area">' +
+          '<div class="lt-barcode-strip">' +
+            '<div class="lt-bar tall"></div><div class="lt-bar short"></div><div class="lt-bar medium wide"></div><div class="lt-bar tall"></div>' +
+            '<div class="lt-bar short"></div><div class="lt-bar medium"></div><div class="lt-bar tall wide"></div><div class="lt-bar short"></div>' +
+            '<div class="lt-bar medium"></div><div class="lt-bar tall"></div><div class="lt-bar short wide"></div><div class="lt-bar medium"></div>' +
+            '<div class="lt-bar tall"></div><div class="lt-bar short"></div><div class="lt-bar medium wide"></div><div class="lt-bar tall"></div>' +
+            '<div class="lt-bar short"></div><div class="lt-bar medium"></div><div class="lt-bar tall wide"></div><div class="lt-bar short"></div>' +
+            '<div class="lt-bar medium"></div><div class="lt-bar tall"></div><div class="lt-bar short wide"></div><div class="lt-bar medium"></div>' +
+            '<div class="lt-bar tall"></div><div class="lt-bar short"></div><div class="lt-bar medium wide"></div><div class="lt-bar tall"></div>' +
+            '<div class="lt-bar short"></div><div class="lt-bar medium"></div><div class="lt-bar tall wide"></div><div class="lt-bar short"></div>' +
+            '<div class="lt-bar medium"></div><div class="lt-bar tall"></div><div class="lt-bar short wide"></div><div class="lt-bar medium"></div>' +
+            '<div class="lt-bar tall"></div><div class="lt-bar short"></div><div class="lt-bar medium wide"></div><div class="lt-bar tall"></div>' +
+          '</div>' +
+          '<div class="lt-barcode-num">3701001234567</div>' +
+        '</div>' +
+      '</div>';
+  } else if (type === 'car') {
+    el.className += ' lt-car-page';
+    el.innerHTML =
+      '<div class="lt-inner">' +
+        '<div class="lt-title">' +
+          '<div class="lt-title-2">车辆照片</div>' +
+        '</div>' +
+      '</div>';
+  }
+}
+
+/* ===== 关闭拍摄引导页 ===== */
+function closeCameraGuide() {
+  document.getElementById('cameraPage').classList.remove('show');
+  document.getElementById('vehiclePage').classList.remove('hide');
+  currentSlot = '';
+  updateFlowStep(1);
+}
+
+/* ===== 拍摄 ===== */
+function takePhoto() {
+  var canvas = document.createElement('canvas');
+  canvas.width = 375; canvas.height = 500;
+  var ctx = canvas.getContext('2d');
+
+  // 背景（模拟桌面）
+  ctx.fillStyle = '#e8edf2';
+  ctx.fillRect(0, 0, 375, 500);
+
+  if (currentSlot === 'car') {
+    // 车辆照片
+    drawCarPhoto(ctx);
+  } else if (currentSlot === 'back') {
+    // 行驶证副页
+    drawLicenseBack(ctx);
+  } else {
+    // 行驶证主页
+    drawLicenseFront(ctx);
+  }
+
+  // 模拟角标痕迹
+  ctx.strokeStyle = '#4fc3f7';
+  ctx.lineWidth = 2;
+  var corners = [[57,129],[317,129],[57,311],[317,311]];
+  corners.forEach(function(c, i) {
+    ctx.beginPath();
+    if (i===0) { ctx.moveTo(c[0], c[1]+16); ctx.lineTo(c[0], c[1]); ctx.lineTo(c[0]+16, c[1]); }
+    if (i===1) { ctx.moveTo(c[0]-16, c[1]); ctx.lineTo(c[0], c[1]); ctx.lineTo(c[0], c[1]+16); }
+    if (i===2) { ctx.moveTo(c[0], c[1]-16); ctx.lineTo(c[0], c[1]); ctx.lineTo(c[0]+16, c[1]); }
+    if (i===3) { ctx.moveTo(c[0]-16, c[1]); ctx.lineTo(c[0], c[1]); ctx.lineTo(c[0], c[1]-16); }
+    ctx.stroke();
+  });
+
+  var dataUrl = canvas.toDataURL('image/png');
+  document.getElementById('previewImg').src = dataUrl;
+  document.getElementById('cameraPage').classList.remove('show');
+  document.getElementById('previewPage').classList.add('show');
+  updateFlowStep(3);
+}
+
+/* ===== 绘制行驶证主页 ===== */
+function drawLicenseFront(ctx) {
+  ctx.save();
+  ctx.translate(187, 220);
+  ctx.fillStyle = '#eaf2f8';
+  ctx.shadowColor = 'rgba(0,0,0,.25)';
+  ctx.shadowBlur = 12;
+  ctx.shadowOffsetY = 4;
+  ctx.fillRect(-130, -91, 260, 182);
+  ctx.restore();
+  ctx.shadowColor = 'transparent';
+  // 标题
+  ctx.fillStyle = '#333';
+  ctx.textAlign = 'center';
+  ctx.font = 'bold 12px sans-serif';
+  ctx.fillText('中华人民共和国', 187, 148);
+  ctx.fillText('机动车行驶证', 187, 164);
+  // 车辆照片区
+  ctx.strokeStyle = '#aaa';
+  ctx.lineWidth = 1;
+  ctx.strokeRect(65, 175, 60, 50);
+  ctx.fillStyle = '#bbb';
+  ctx.font = '8px sans-serif';
+  ctx.fillText('照片', 95, 203);
+  // 右侧字段
+  ctx.fillStyle = '#444';
+  ctx.textAlign = 'left';
+  ctx.font = '9px sans-serif';
+  ctx.fillText('号牌号码', 135, 182);
+  ctx.fillText('桂N·GK628', 180, 182);
+  ctx.fillText('车辆类型', 135, 197);
+  ctx.fillText('小型轿车', 180, 197);
+  ctx.fillText('所有人', 135, 212);
+  ctx.fillText('蒙幸基', 180, 212);
+  ctx.fillText('住址', 65, 240);
+  ctx.fillText('广西灵山县新圩镇...', 95, 240);
+  ctx.fillText('使用性质', 65, 255);
+  ctx.fillText('非营运', 110, 255);
+  ctx.fillText('品牌型号', 135, 255);
+  ctx.fillText('丰田牌GTM7251GE', 180, 255);
+  ctx.fillText('车辆识别代号', 65, 270);
+  ctx.fillText('LVGBF53KXEG506464', 130, 270);
+  ctx.fillText('发动机号码', 65, 285);
+  ctx.fillText('H504101', 120, 285);
+  // 底部日期
+  ctx.fillText('注册日期', 70, 300);
+  ctx.fillText('2014-12-26', 110, 300);
+  ctx.fillText('发证日期', 180, 300);
+  ctx.fillText('2021-02-04', 220, 300);
+  // 印章（左下角）
+  ctx.strokeStyle = 'rgba(200,50,50,.4)';
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  ctx.arc(85, 275, 18, 0, Math.PI*2);
+  ctx.stroke();
+  ctx.fillStyle = 'rgba(200,50,50,.3)';
+  ctx.font = '6px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('印章', 85, 277);
+  ctx.fillStyle = '#999';
+  ctx.font = '9px sans-serif';
+  ctx.fillText('（模拟拍摄效果）', 187, 330);
+}
+
+/* ===== 绘制行驶证副页 ===== */
+function drawLicenseBack(ctx) {
+  ctx.save();
+  ctx.translate(187, 220);
+  ctx.fillStyle = '#eaf2f8';
+  ctx.shadowColor = 'rgba(0,0,0,.25)';
+  ctx.shadowBlur = 12;
+  ctx.shadowOffsetY = 4;
+  ctx.fillRect(-130, -91, 260, 182);
+  ctx.restore();
+  ctx.shadowColor = 'transparent';
+  // 标题
+  ctx.fillStyle = '#333';
+  ctx.textAlign = 'center';
+  ctx.font = 'bold 12px sans-serif';
+  ctx.fillText('中华人民共和国', 187, 148);
+  ctx.fillText('机动车行驶证', 187, 164);
+  // 三栏字段
+  ctx.fillStyle = '#444';
+  ctx.textAlign = 'left';
+  ctx.font = '8.5px sans-serif';
+  // 第一列
+  ctx.fillText('号牌号码', 65, 182);
+  ctx.fillText('桂N·GK628', 105, 182);
+  ctx.fillText('核定载人数', 65, 197);
+  ctx.fillText('5人', 120, 197);
+  ctx.fillText('整备质量', 65, 212);
+  ctx.fillText('1490kg', 115, 212);
+  ctx.fillText('外廓尺寸', 65, 227);
+  ctx.fillText('4825×1825', 105, 227);
+  ctx.fillText('×1480mm', 105, 237);
+  // 第二列
+  ctx.fillText('档案编号', 140, 182);
+  ctx.fillText('450721086872', 180, 182);
+  ctx.fillText('总质量', 140, 197);
+  ctx.fillText('2000kg', 175, 197);
+  ctx.fillText('核定载质量', 140, 212);
+  ctx.fillText('--', 195, 212);
+  ctx.fillText('准牵引总质量', 140, 227);
+  ctx.fillText('--', 200, 227);
+  // 第三列 - 检验记录区
+  ctx.strokeStyle = '#aaa';
+  ctx.lineWidth = 1;
+  ctx.strokeRect(225, 175, 50, 40);
+  ctx.fillStyle = '#666';
+  ctx.font = '7px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('检验有效期', 250, 188);
+  ctx.fillText('2022年12月', 250, 200);
+  ctx.fillText('桂N', 250, 212);
+  // 燃料类型
+  ctx.fillStyle = '#444';
+  ctx.textAlign = 'left';
+  ctx.font = '8.5px sans-serif';
+  ctx.fillText('检验记录', 225, 225);
+  ctx.fillText('汽油', 225, 237);
+  // 条形码
+  ctx.fillStyle = '#333';
+  var barX = 290;
+  var bars = [8,4,8,5,7,3,8,5,6,4,8,5,7,3,8,5];
+  var barY = 175;
+  for (var i = 0; i < bars.length; i++) {
+    ctx.fillRect(barX, barY, 1.5, bars[i] + 4);
+    barY += bars[i] + 4 + 1;
+  }
+  ctx.fillStyle = '#999';
+  ctx.font = '7px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('*457002*', 293, 285);
+  ctx.fillText('4811956*', 293, 293);
+  ctx.fillStyle = '#999';
+  ctx.font = '9px sans-serif';
+  ctx.fillText('（模拟拍摄效果）', 187, 320);
+}
+
+/* ===== 绘制车辆照片 ===== */
+function drawCarPhoto(ctx) {
+  ctx.save();
+  ctx.translate(187, 220);
+  ctx.fillStyle = '#d8dde4';
+  ctx.shadowColor = 'rgba(0,0,0,.2)';
+  ctx.shadowBlur = 10;
+  ctx.shadowOffsetY = 3;
+  ctx.fillRect(-130, -70, 260, 140);
+  ctx.restore();
+  ctx.shadowColor = 'transparent';
+  // 车身
+  ctx.fillStyle = '#4a6fa5';
+  ctx.beginPath();
+  ctx.moveTo(100, 260);
+  ctx.lineTo(100, 235);
+  ctx.quadraticCurveTo(100, 220, 115, 215);
+  ctx.lineTo(150, 195);
+  ctx.quadraticCurveTo(160, 185, 180, 185);
+  ctx.lineTo(240, 185);
+  ctx.quadraticCurveTo(260, 185, 270, 195);
+  ctx.lineTo(300, 215);
+  ctx.quadraticCurveTo(310, 220, 310, 235);
+  ctx.lineTo(310, 260);
+  ctx.closePath();
+  ctx.fill();
+  // 车窗
+  ctx.fillStyle = '#b8d4f0';
+  ctx.fillRect(160, 198, 50, 20);
+  ctx.fillRect(220, 198, 40, 20);
+  // 车轮
+  ctx.fillStyle = '#333';
+  ctx.beginPath();
+  ctx.arc(145, 262, 16, 0, Math.PI*2);
+  ctx.arc(265, 262, 16, 0, Math.PI*2);
+  ctx.fill();
+  ctx.fillStyle = '#888';
+  ctx.beginPath();
+  ctx.arc(145, 262, 7, 0, Math.PI*2);
+  ctx.arc(265, 262, 7, 0, Math.PI*2);
+  ctx.fill();
+  ctx.fillStyle = '#999';
+  ctx.font = '10px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('（模拟拍摄效果）', 187, 320);
+}
+
+/* ===== 重拍 ===== */
+function retake() {
+  document.getElementById('previewPage').classList.remove('show');
+  document.getElementById('cameraPage').classList.add('show');
+  updateFlowStep(2);
+}
+
+/* ===== 取消预览 ===== */
+function cancelPreview() {
+  document.getElementById('previewPage').classList.remove('show');
+  document.getElementById('vehiclePage').classList.remove('hide');
+  currentSlot = '';
+  updateFlowStep(1);
+}
+
+/* ===== 确认使用 → 回填到槽位 ===== */
+function confirmPhoto() {
+  var imgSrc = document.getElementById('previewImg').src;
+  var slotEl = document.getElementById(slotElements[currentSlot]);
+
+  // 更新槽位显示照片
+  slotEl.classList.add('has-image');
+  slotEl.innerHTML = '<img class="slot-img" src="' + imgSrc + '" />';
+
+  // 关闭预览页
+  document.getElementById('previewPage').classList.remove('show');
+  document.getElementById('vehiclePage').classList.remove('hide');
+
+  // 模拟 OCR 回填
+  if (currentSlot === 'front') {
+    document.getElementById('carNumField').textContent = '桂N·GK628';
+  }
+
+  updateFlowStep(4);
+
+  // 1秒后恢复步骤1
+  setTimeout(function() {
+    updateFlowStep(1);
+  }, 1500);
+
+  // 提示
+  setTimeout(function() {
+    alert('照片已确认使用\n→ 传入 vehicleLicense' + (currentSlot === 'front' ? 'Front' : currentSlot === 'back' ? 'Back' : 'Car') + 'Handler()\n→ compressFileItem() 压缩\n→ uploadImage() 上传\n→ ocrHandler() OCR识别\n→ 回填表单字段');
+  }, 100);
+}
+
+/* ===== Tab 切换 ===== */
+function switchTab(el, tabId) {
+  var tabs = el.parentElement.querySelectorAll('.tab-btn');
+  for (var i = 0; i < tabs.length; i++) tabs[i].classList.remove('active');
+  el.classList.add('active');
+  var tabIds = ['intro', 'spec', 'flow', 'rules'];
+  for (var j = 0; j < tabIds.length; j++) {
+    document.getElementById('tab-' + tabIds[j]).style.display = 'none';
+  }
+  document.getElementById('tab-' + tabId).style.display = '';
+}
+</script>
+
+
+
+<div class="dark"></div><div data-trae-edit-ui="true"></div></body></html>
\ No newline at end of file
diff --git a/src/store/modules/camera.js b/src/store/modules/camera.js
new file mode 100644
index 00000000..3ad2645b
--- /dev/null
+++ b/src/store/modules/camera.js
@@ -0,0 +1,22 @@
+// 拍摄页与表单页之间的内存中转：blob 无法走路由 query，返回时由表单页取出并清空
+export default {
+  namespaced: true,
+  state: {
+    result: null,   // 拍照确认结果 { type, blob, dataURL }
+    fallback: null  // 相机不可用降级信息 { type, error }
+  },
+  mutations: {
+    setResult(state, payload) {
+      state.result = payload
+      state.fallback = null
+    },
+    setFallback(state, payload) {
+      state.fallback = payload
+      state.result = null
+    },
+    clear(state) {
+      state.result = null
+      state.fallback = null
+    }
+  }
+}
diff --git a/src/views/index/cameraGuide.vue b/src/views/index/cameraGuide.vue
new file mode 100644
index 00000000..2ada9988
--- /dev/null
+++ b/src/views/index/cameraGuide.vue
@@ -0,0 +1,47 @@
+<template>
+  <!-- 独立拍摄页：由 vehicleAdd 跳转进入（query.type = front/back/car），
+       确认/取消/降级后 $router.back() 返回 vehicleAdd -->
+  <camera-guide
+    :visible="show"
+    :type="type"
+    @confirm="onConfirm"
+    @cancel="goBack"
+    @fallback="onFallback"
+  />
+</template>
+
+<script>
+import CameraGuide from "@/components/CameraGuide.vue";
+
+export default {
+  name: 'cameraGuidePage',
+  components: { CameraGuide },
+  data() {
+    return {
+      show: false // 挂载后置 true，触发组件 visible 侦听器启动相机
+    }
+  },
+  computed: {
+    type() {
+      const t = this.$route.query.type
+      return ['front', 'back', 'car'].includes(t) ? t : 'front'
+    }
+  },
+  mounted() {
+    this.show = true
+  },
+  methods: {
+    onConfirm({ blob, dataURL }) {   // 拍照确认：结果存入 store，返回 vehicleAdd 消费
+      this.$store.commit('camera/setResult', { type: this.type, blob, dataURL })
+      this.$router.back()
+    },
+    onFallback(e) {   // 相机不可用：降级信息存入 store，返回 vehicleAdd 走系统选择器
+      this.$store.commit('camera/setFallback', { type: this.type, error: e })
+      this.$router.back()
+    },
+    goBack() {
+      this.$router.back()
+    }
+  }
+}
+</script>