diff --git a/.gitignore b/.gitignore
index f8fddbd..2502601 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,7 @@ __pycache__/
 deploy/kubeconfig
 all_recipes_extracted.json
 backups/
+
+# Frontend
+frontend/node_modules/
+frontend/dist/
diff --git a/Dockerfile b/Dockerfile
index 6a795ac..de9680c 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,3 +1,11 @@
+FROM node:20-slim AS frontend-build
+
+WORKDIR /build
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm ci
+COPY frontend/ ./
+RUN npm run build
+
 FROM python:3.12-slim
 
 WORKDIR /app
@@ -6,7 +14,7 @@ COPY backend/requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
 COPY backend/ ./backend/
-COPY frontend/ ./frontend/
+COPY --from=frontend-build /build/dist ./frontend/
 
 ENV DB_PATH=/data/oil_calculator.db
 ENV FRONTEND_DIR=/app/frontend
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4e965b5
--- /dev/null
+++ b/README.md
@@ -0,0 +1,86 @@
+# doTERRA 精油配方计算器
+
+精油配方成本计算、配方管理、配方卡片导出工具。
+
+## 功能
+
+- **配方查询** - 搜索配方，按名称/精油/标签筛选，分类浏览
+- **配方编辑** - 可视化编辑精油成分、滴数，自动计算成本
+- **容量换算** - 支持单次/5ml/10ml/30ml 容量，自动稀释比例换算
+- **智能粘贴** - 粘贴文本自动识别精油名称和滴数（支持模糊匹配、同音字纠错）
+- **配方卡片** - 生成精美配方卡片图片，支持中英双语，品牌水印
+- **个人配方** - 保存私人配方，记录使用日记
+- **精油库存** - 标记已有精油，自动推荐可做配方
+- **收藏系统** - 收藏喜欢的配方，快速访问
+- **商业核算** - 项目成本利润分析（企业用户专属）
+- **Excel 导出** - 批量导出配方到 Excel 表格
+- **多角色权限** - 查看者 / 编辑者 / 高级编辑者 / 管理员
+- **Bug 追踪** - 内置问题反馈和追踪系统
+
+## 技术栈
+
+### 前端
+- **Vue 3** (Composition API + `<script setup>`)
+- **Vite** 构建工具
+- **Pinia** 状态管理
+- **Vue Router** 路由
+- **html2canvas** 配方卡片图片生成
+- **ExcelJS** Excel 导出
+
+### 后端
+- **FastAPI** (Python)
+- **SQLite** 数据库
+- **Uvicorn** ASGI 服务器
+
+### 部署
+- **Docker** 多阶段构建
+- **Kubernetes** (k3s)
+- **Traefik** 反向代理 + 自动 TLS
+
+## 快速开始
+
+### 前端开发
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+开发服务器启动在 `http://localhost:5173`，自动代理 `/api` 请求到后端。
+
+### 后端开发
+
+```bash
+pip install -r backend/requirements.txt
+uvicorn backend.main:app --reload --port 8000
+```
+
+### Docker 构建
+
+```bash
+docker build -t oil-calculator .
+docker run -p 8000:8000 -v oil-data:/data oil-calculator
+```
+
+访问 `http://localhost:8000`。
+
+## 项目结构
+
+```
+frontend/src/
+  router/         # 路由配置
+  stores/         # Pinia stores (auth, oils, recipes, diary, ui)
+  composables/    # useApi, useDialog, useSmartPaste, useOilTranslation
+  components/     # 共享组件 (RecipeCard, TagPicker, LoginModal...)
+  views/          # 页面 (RecipeSearch, RecipeManager, Inventory...)
+  assets/         # 全局样式
+
+backend/
+  main.py         # FastAPI 应用 + 所有 API 端点
+  database.py     # SQLite 数据库初始化和迁移
+```
+
+## 部署
+
+详见 [doc/deploy.md](doc/deploy.md)。
diff --git a/doc/deploy.md b/doc/deploy.md
index 430df97..0bc5bb7 100644
--- a/doc/deploy.md
+++ b/doc/deploy.md
@@ -2,7 +2,7 @@
 
 ## 架构
 
-- **前端**: 静态 HTML（由 FastAPI 直接 serve）
+- **前端**: Vue 3 + Vite + Pinia + Vue Router（构建为静态文件，由 FastAPI serve）
 - **后端**: FastAPI + SQLite，端口 8000
 - **部署**: Kubernetes (k3s) on `oci.euphon.net`
 - **域名**: https://oil.oci.euphon.net
@@ -16,20 +16,82 @@
 │   ├── database.py      # SQLite 数据库操作
 │   ├── defaults.json    # 默认精油和配方数据（首次启动时 seed）
 │   └── requirements.txt
-├── frontend/
-│   └── index.html       # 前端页面
+├── frontend/            # Vue 3 + Vite 项目
+│   ├── package.json
+│   ├── vite.config.js
+│   ├── index.html
+│   ├── public/          # 静态资源（favicon、PWA icons）
+│   └── src/
+│       ├── main.js          # 入口文件
+│       ├── App.vue          # 根组件
+│       ├── router/          # Vue Router 路由配置
+│       ├── stores/          # Pinia 状态管理
+│       │   ├── auth.js      # 认证/用户
+│       │   ├── oils.js      # 精油价格
+│       │   ├── recipes.js   # 配方/标签/收藏
+│       │   ├── diary.js     # 个人配方日记
+│       │   └── ui.js        # UI 状态
+│       ├── composables/     # 组合式函数
+│       │   ├── useApi.js    # API 请求封装
+│       │   ├── useDialog.js # 自定义对话框
+│       │   ├── useSmartPaste.js    # 智能粘贴解析
+│       │   └── useOilTranslation.js # 精油中英翻译
+│       ├── components/      # 共享组件
+│       │   ├── RecipeCard.vue
+│       │   ├── RecipeDetailOverlay.vue
+│       │   ├── TagPicker.vue
+│       │   ├── LoginModal.vue
+│       │   ├── UserMenu.vue
+│       │   └── CustomDialog.vue
+│       ├── views/           # 页面组件
+│       │   ├── RecipeSearch.vue     # 配方查询
+│       │   ├── RecipeManager.vue    # 管理配方
+│       │   ├── Inventory.vue        # 个人库存
+│       │   ├── OilReference.vue     # 精油价目
+│       │   ├── Projects.vue         # 商业核算
+│       │   ├── MyDiary.vue          # 我的（日记/品牌/账号）
+│       │   ├── AuditLog.vue         # 操作日志
+│       │   ├── BugTracker.vue       # Bug 追踪
+│       │   └── UserManagement.vue   # 用户管��
+│       └── assets/
+│           └── styles.css   # 全局样式
 ├── deploy/
 │   ├── namespace.yaml
 │   ├── deployment.yaml
 │   ├── service.yaml
 │   ├── pvc.yaml         # 1Gi 持久卷，存放 SQLite 数据库
 │   ├── ingress.yaml
-│   ├── setup-kubeconfig.sh  # 生成受限 kubeconfig 的脚本
-│   └── kubeconfig       # 受限 kubeconfig（仅 oil-calculator namespace）
-├── Dockerfile
+│   ├── setup-kubeconfig.sh
+│   └── kubeconfig
+├── Dockerfile           # 多阶段构建（Node → Python）
 └── doc/deploy.md
 ```
 
+## 本地开发
+
+```bash
+# 前端开发（热更新）
+cd frontend
+npm install
+npm run dev    # 默认 http://localhost:5173，自动代理 /api 到 :8000
+
+# 后端开发
+cd backend
+pip install -r requirements.txt
+uvicorn backend.main:app --reload --port 8000
+```
+
+## 构建
+
+```bash
+# 前端构建
+cd frontend
+npm run build  # 输出到 frontend/dist/
+
+# Docker 构建（多阶段：先构建前端，再打包后端）
+docker build -t oil-calculator .
+```
+
 ## 首次部署
 
 已完成，以下为记录。
@@ -63,8 +125,8 @@ kubectl get secret regcred -n guitar -o yaml | sed 's/namespace: guitar/namespac
 
 ```bash
 # 在本地打包上传
-cd "/Users/hera/Hera DOCS/Projects/Essential Oil Formula Cost Calculator"
-tar czf /tmp/oil-calc.tar.gz Dockerfile backend/ frontend/ deploy/
+cd /path/to/oil
+tar czf /tmp/oil-calc.tar.gz Dockerfile backend/ frontend/ deploy/ --exclude='frontend/node_modules' --exclude='frontend/dist'
 scp /tmp/oil-calc.tar.gz fam@oci.euphon.net:/tmp/
 
 # SSH 到服务器构建并重启
@@ -112,3 +174,21 @@ KUBECONFIG=deploy/kubeconfig kubectl rollout restart deploy/oil-calculator
 | GET | /api/tags | 所有标签 |
 | POST | /api/tags | 新增标签 |
 | DELETE | /api/tags/{name} | 删除标签 |
+| GET | /api/me | 当前用户信息 |
+| POST | /api/login | 登录 |
+| POST | /api/register | 注册 |
+| GET | /api/diary | 个人配方列表 |
+| POST | /api/diary | 创建个人配方 |
+| PUT | /api/diary/{id} | 更新个人配方 |
+| DELETE | /api/diary/{id} | 删除个人配方 |
+| GET | /api/favorites | 收藏列表 |
+| POST | /api/favorites/{id} | 添加收藏 |
+| DELETE | /api/favorites/{id} | 取消收藏 |
+| GET | /api/inventory | 个人库存 |
+| POST | /api/inventory | 更新库存 |
+| GET | /api/projects | 商业项目列表 |
+| GET | /api/audit-log | 操作日志 |
+| GET | /api/users | 用户列表（管理员）|
+| GET | /api/bug-reports | Bug 列表 |
+| GET | /api/notifications | 通知列表 |
+| GET | /api/version | 服务器版本 |
diff --git a/frontend/cypress.config.js b/frontend/cypress.config.js
new file mode 100644
index 0000000..3732a66
--- /dev/null
+++ b/frontend/cypress.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:5173',
+    supportFile: 'cypress/support/e2e.js',
+    specPattern: 'cypress/e2e/**/*.cy.{js,ts}',
+    viewportWidth: 1280,
+    viewportHeight: 800,
+    video: true,
+    videoCompression: false,
+  },
+})
diff --git a/frontend/cypress/e2e/admin-flow.cy.js b/frontend/cypress/e2e/admin-flow.cy.js
new file mode 100644
index 0000000..3474de2
--- /dev/null
+++ b/frontend/cypress/e2e/admin-flow.cy.js
@@ -0,0 +1,50 @@
+describe('Admin Flow', () => {
+  beforeEach(() => {
+    const token = Cypress.env('ADMIN_TOKEN')
+    if (!token) {
+      cy.log('ADMIN_TOKEN not set, skipping admin tests')
+      return
+    }
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('oil_auth_token', token)
+      }
+    })
+    // Wait for app to load with admin privileges
+    cy.get('.nav-tab', { timeout: 10000 }).should('have.length.gte', 6)
+  })
+
+  it('shows admin-only tabs', () => {
+    if (!Cypress.env('ADMIN_TOKEN')) return
+    cy.get('.nav-tab').contains('操作日志').should('be.visible')
+    cy.get('.nav-tab').contains('Bug').should('be.visible')
+    cy.get('.nav-tab').contains('用户管理').should('be.visible')
+  })
+
+  it('can access manage recipes page', () => {
+    if (!Cypress.env('ADMIN_TOKEN')) return
+    cy.get('.nav-tab').contains('管理配方').click()
+    cy.url().should('include', '/manage')
+  })
+
+  it('can access audit log page', () => {
+    if (!Cypress.env('ADMIN_TOKEN')) return
+    cy.get('.nav-tab').contains('操作日志').click()
+    cy.url().should('include', '/audit')
+    cy.contains('操作日志').should('be.visible')
+  })
+
+  it('can access user management page', () => {
+    if (!Cypress.env('ADMIN_TOKEN')) return
+    cy.get('.nav-tab').contains('用户管理').click()
+    cy.url().should('include', '/users')
+    cy.contains('用户管理').should('be.visible')
+  })
+
+  it('can access bug tracker page', () => {
+    if (!Cypress.env('ADMIN_TOKEN')) return
+    cy.get('.nav-tab').contains('Bug').click()
+    cy.url().should('include', '/bugs')
+    cy.contains('Bug').should('be.visible')
+  })
+})
diff --git a/frontend/cypress/e2e/api-crud.cy.js b/frontend/cypress/e2e/api-crud.cy.js
new file mode 100644
index 0000000..f31f6d7
--- /dev/null
+++ b/frontend/cypress/e2e/api-crud.cy.js
@@ -0,0 +1,357 @@
+describe('API CRUD Operations', () => {
+  const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'
+  const authHeaders = { Authorization: `Bearer ${ADMIN_TOKEN}` }
+
+  describe('Oils API', () => {
+    it('creates a new oil', () => {
+      cy.request({
+        method: 'POST',
+        url: '/api/oils',
+        headers: authHeaders,
+        body: { name: 'cypress测试油', bottle_price: 100, drop_count: 200 }
+      }).then(res => {
+        expect(res.status).to.be.oneOf([200, 201])
+      })
+    })
+
+    it('lists oils including the new one', () => {
+      cy.request('/api/oils').then(res => {
+        const found = res.body.find(o => o.name === 'cypress测试油')
+        expect(found).to.exist
+        expect(found.bottle_price).to.eq(100)
+        expect(found.drop_count).to.eq(200)
+      })
+    })
+
+    it('deletes the test oil', () => {
+      cy.request({
+        method: 'DELETE',
+        url: '/api/oils/' + encodeURIComponent('cypress测试油'),
+        headers: authHeaders
+      }).then(res => {
+        expect(res.status).to.eq(200)
+      })
+    })
+
+    it('verifies oil is deleted', () => {
+      cy.request('/api/oils').then(res => {
+        const found = res.body.find(o => o.name === 'cypress测试油')
+        expect(found).to.not.exist
+      })
+    })
+  })
+
+  describe('Recipes API', () => {
+    let testRecipeId
+
+    it('creates a new recipe', () => {
+      cy.request({
+        method: 'POST',
+        url: '/api/recipes',
+        headers: authHeaders,
+        body: {
+          name: 'Cypress测试配方',
+          note: 'E2E测试用',
+          ingredients: [
+            { oil_name: '薰衣草', drops: 5 },
+            { oil_name: '茶树', drops: 3 }
+          ],
+          tags: []
+        }
+      }).then(res => {
+        expect(res.status).to.be.oneOf([200, 201])
+        testRecipeId = res.body.id
+        expect(testRecipeId).to.be.a('number')
+      })
+    })
+
+    it('reads the created recipe', () => {
+      cy.request('/api/recipes').then(res => {
+        const found = res.body.find(r => r.name === 'Cypress测试配方')
+        expect(found).to.exist
+        expect(found.note).to.eq('E2E测试用')
+        expect(found.ingredients).to.have.length(2)
+        testRecipeId = found.id
+      })
+    })
+
+    it('updates the recipe', () => {
+      cy.request('/api/recipes').then(res => {
+        const found = res.body.find(r => r.name === 'Cypress测试配方')
+        cy.request({
+          method: 'PUT',
+          url: `/api/recipes/${found.id}`,
+          headers: authHeaders,
+          body: {
+            name: 'Cypress更新配方',
+            note: '已更新',
+            ingredients: [
+              { oil_name: '薰衣草', drops: 10 },
+              { oil_name: '乳香', drops: 5 }
+            ],
+            tags: []
+          }
+        }).then(res => {
+          expect(res.status).to.eq(200)
+        })
+      })
+    })
+
+    it('verifies the update', () => {
+      cy.request('/api/recipes').then(res => {
+        const found = res.body.find(r => r.name === 'Cypress更新配方')
+        expect(found).to.exist
+        expect(found.note).to.eq('已更新')
+        expect(found.ingredients).to.have.length(2)
+        testRecipeId = found.id
+      })
+    })
+
+    it('deletes the test recipe', () => {
+      cy.request('/api/recipes').then(res => {
+        const found = res.body.find(r => r.name === 'Cypress更新配方')
+        if (found) {
+          cy.request({
+            method: 'DELETE',
+            url: `/api/recipes/${found.id}`,
+            headers: authHeaders
+          }).then(res => {
+            expect(res.status).to.eq(200)
+          })
+        }
+      })
+    })
+  })
+
+  describe('Tags API', () => {
+    it('creates a new tag', () => {
+      cy.request({
+        method: 'POST',
+        url: '/api/tags',
+        headers: authHeaders,
+        body: { name: 'cypress-tag' }
+      }).then(res => {
+        expect(res.status).to.be.oneOf([200, 201])
+      })
+    })
+
+    it('lists tags including the new one', () => {
+      cy.request('/api/tags').then(res => {
+        expect(res.body).to.include('cypress-tag')
+      })
+    })
+
+    it('deletes the test tag', () => {
+      cy.request({
+        method: 'DELETE',
+        url: '/api/tags/cypress-tag',
+        headers: authHeaders
+      }).then(res => {
+        expect(res.status).to.eq(200)
+      })
+    })
+  })
+
+  describe('Diary API', () => {
+    let diaryId
+
+    it('creates a diary entry', () => {
+      cy.request({
+        method: 'POST',
+        url: '/api/diary',
+        headers: authHeaders,
+        body: {
+          name: 'Cypress日记配方',
+          ingredients: [{ oil: '薰衣草', drops: 3 }],
+          note: '测试备注'
+        }
+      }).then(res => {
+        expect(res.status).to.be.oneOf([200, 201])
+        diaryId = res.body.id
+      })
+    })
+
+    it('lists diary entries', () => {
+      cy.request({
+        url: '/api/diary',
+        headers: authHeaders
+      }).then(res => {
+        expect(res.body).to.be.an('array')
+        const found = res.body.find(d => d.name === 'Cypress日记配方')
+        expect(found).to.exist
+        diaryId = found.id
+      })
+    })
+
+    it('deletes the diary entry', () => {
+      cy.request({
+        url: '/api/diary',
+        headers: authHeaders
+      }).then(res => {
+        const found = res.body.find(d => d.name === 'Cypress日记配方')
+        if (found) {
+          cy.request({
+            method: 'DELETE',
+            url: `/api/diary/${found.id}`,
+            headers: authHeaders
+          }).then(res => {
+            expect(res.status).to.eq(200)
+          })
+        }
+      })
+    })
+  })
+
+  describe('Favorites API', () => {
+    it('adds a recipe to favorites', () => {
+      cy.request('/api/recipes').then(res => {
+        const recipe = res.body[0]
+        cy.request({
+          method: 'POST',
+          url: `/api/favorites/${recipe.id}`,
+          headers: authHeaders,
+          body: {}
+        }).then(res => {
+          expect(res.status).to.be.oneOf([200, 201])
+        })
+      })
+    })
+
+    it('lists favorites', () => {
+      cy.request({
+        url: '/api/favorites',
+        headers: authHeaders
+      }).then(res => {
+        expect(res.body).to.be.an('array')
+        expect(res.body.length).to.be.gte(1)
+      })
+    })
+
+    it('removes the favorite', () => {
+      cy.request('/api/recipes').then(res => {
+        const recipe = res.body[0]
+        cy.request({
+          method: 'DELETE',
+          url: `/api/favorites/${recipe.id}`,
+          headers: authHeaders
+        }).then(res => {
+          expect(res.status).to.eq(200)
+        })
+      })
+    })
+  })
+
+  describe('Inventory API', () => {
+    it('adds oil to inventory', () => {
+      cy.request({
+        method: 'POST',
+        url: '/api/inventory',
+        headers: authHeaders,
+        body: { oil_name: '薰衣草' }
+      }).then(res => {
+        expect(res.status).to.be.oneOf([200, 201])
+      })
+    })
+
+    it('reads inventory', () => {
+      cy.request({
+        url: '/api/inventory',
+        headers: authHeaders
+      }).then(res => {
+        expect(res.status).to.eq(200)
+        expect(res.body).to.be.an('array')
+      })
+    })
+  })
+
+  describe('Bug Reports API', () => {
+    let bugId
+
+    it('submits a bug report', () => {
+      cy.request({
+        method: 'POST',
+        url: '/api/bug-report',
+        headers: authHeaders,
+        body: { content: 'Cypress E2E测试Bug', priority: 2 }
+      }).then(res => {
+        expect(res.status).to.be.oneOf([200, 201])
+      })
+    })
+
+    it('lists bug reports', () => {
+      cy.request({
+        url: '/api/bug-reports',
+        headers: authHeaders
+      }).then(res => {
+        expect(res.body).to.be.an('array')
+        const found = res.body.find(b => b.content.includes('Cypress E2E测试Bug'))
+        expect(found).to.exist
+        bugId = found.id
+      })
+    })
+
+    it('deletes the test bug', () => {
+      cy.request({
+        url: '/api/bug-reports',
+        headers: authHeaders
+      }).then(res => {
+        const found = res.body.find(b => b.content.includes('Cypress E2E测试Bug'))
+        if (found) {
+          cy.request({
+            method: 'DELETE',
+            url: `/api/bug-reports/${found.id}`,
+            headers: authHeaders
+          }).then(res => {
+            expect(res.status).to.eq(200)
+          })
+        }
+      })
+    })
+  })
+
+  describe('Users API (admin)', () => {
+    it('lists users', () => {
+      cy.request({
+        url: '/api/users',
+        headers: authHeaders
+      }).then(res => {
+        expect(res.body).to.be.an('array')
+        expect(res.body.length).to.be.gte(1)
+        const admin = res.body.find(u => u.role === 'admin')
+        expect(admin).to.exist
+      })
+    })
+
+    it('cannot access users without auth', () => {
+      cy.request({
+        url: '/api/users',
+        failOnStatusCode: false
+      }).then(res => {
+        expect(res.status).to.eq(403)
+      })
+    })
+  })
+
+  describe('Audit Log API', () => {
+    it('fetches audit log', () => {
+      cy.request({
+        url: '/api/audit-log?limit=10&offset=0',
+        headers: authHeaders
+      }).then(res => {
+        expect(res.status).to.eq(200)
+        expect(res.body).to.be.an('array')
+      })
+    })
+  })
+
+  describe('Notifications API', () => {
+    it('fetches notifications', () => {
+      cy.request({
+        url: '/api/notifications',
+        headers: authHeaders
+      }).then(res => {
+        expect(res.status).to.eq(200)
+      })
+    })
+  })
+})
diff --git a/frontend/cypress/e2e/api-health.cy.js b/frontend/cypress/e2e/api-health.cy.js
new file mode 100644
index 0000000..7f90750
--- /dev/null
+++ b/frontend/cypress/e2e/api-health.cy.js
@@ -0,0 +1,64 @@
+describe('API Health Check', () => {
+  it('GET /api/version returns version', () => {
+    cy.request('/api/version').then(res => {
+      expect(res.status).to.eq(200)
+      expect(res.body).to.have.property('version')
+    })
+  })
+
+  it('GET /api/oils returns oil list', () => {
+    cy.request('/api/oils').then(res => {
+      expect(res.status).to.eq(200)
+      expect(res.body).to.be.an('array')
+      expect(res.body.length).to.be.gte(1)
+      const oil = res.body[0]
+      expect(oil).to.have.property('name')
+      expect(oil).to.have.property('bottle_price')
+      expect(oil).to.have.property('drop_count')
+    })
+  })
+
+  it('GET /api/recipes returns recipe list', () => {
+    cy.request('/api/recipes').then(res => {
+      expect(res.status).to.eq(200)
+      expect(res.body).to.be.an('array')
+      if (res.body.length > 0) {
+        const recipe = res.body[0]
+        expect(recipe).to.have.property('name')
+        expect(recipe).to.have.property('ingredients')
+      }
+    })
+  })
+
+  it('GET /api/tags returns tags array', () => {
+    cy.request('/api/tags').then(res => {
+      expect(res.status).to.eq(200)
+      expect(res.body).to.be.an('array')
+    })
+  })
+
+  it('GET /api/me returns anonymous user without auth', () => {
+    cy.request('/api/me').then(res => {
+      expect(res.status).to.eq(200)
+      expect(res.body.username).to.eq('anonymous')
+      expect(res.body.role).to.eq('viewer')
+    })
+  })
+
+  it('GET /api/me returns authenticated user with valid token', () => {
+    // Use the admin token from env or skip
+    const token = Cypress.env('ADMIN_TOKEN')
+    if (!token) {
+      cy.log('ADMIN_TOKEN not set, skipping auth test')
+      return
+    }
+    cy.request({
+      url: '/api/me',
+      headers: { Authorization: `Bearer ${token}` }
+    }).then(res => {
+      expect(res.status).to.eq(200)
+      expect(res.body.id).to.not.be.null
+      expect(res.body.username).to.not.eq('anonymous')
+    })
+  })
+})
diff --git a/frontend/cypress/e2e/app-load.cy.js b/frontend/cypress/e2e/app-load.cy.js
new file mode 100644
index 0000000..0399b0f
--- /dev/null
+++ b/frontend/cypress/e2e/app-load.cy.js
@@ -0,0 +1,32 @@
+describe('App Loading', () => {
+  it('loads the home page with header and nav', () => {
+    cy.visit('/')
+    cy.get('.app-header').should('be.visible')
+    cy.contains('doTERRA 配方计算器').should('be.visible')
+    cy.get('.nav-tabs').should('be.visible')
+    cy.get('.nav-tab').should('have.length.gte', 4)
+  })
+
+  it('shows the search section by default', () => {
+    cy.visit('/')
+    cy.get('.nav-tab').first().should('have.class', 'active')
+    cy.get('input[placeholder*="搜索"]', { timeout: 8000 }).should('be.visible')
+  })
+
+  it('navigates between public tabs without login', () => {
+    cy.visit('/')
+    cy.get('.nav-tab').contains('精油价目').click()
+    cy.url().should('include', '/oils')
+    cy.contains('精油价目').should('be.visible')
+
+    cy.get('.nav-tab').contains('配方查询').click()
+    cy.url().should('not.include', '/oils')
+  })
+
+  it('prompts login when accessing protected tabs', () => {
+    cy.visit('/')
+    cy.get('.nav-tab').contains('管理配方').click()
+    // Should show login modal or dialog
+    cy.get('[class*="overlay"], [class*="login"], [class*="modal"], [class*="dialog"]', { timeout: 3000 }).should('exist')
+  })
+})
diff --git a/frontend/cypress/e2e/auth-flow.cy.js b/frontend/cypress/e2e/auth-flow.cy.js
new file mode 100644
index 0000000..226bc37
--- /dev/null
+++ b/frontend/cypress/e2e/auth-flow.cy.js
@@ -0,0 +1,81 @@
+describe('Authentication Flow', () => {
+  it('shows login button when not authenticated', () => {
+    cy.visit('/')
+    cy.contains('登录').should('be.visible')
+  })
+
+  it('opens login modal when clicking login', () => {
+    cy.visit('/')
+    cy.contains('登录').click()
+    cy.get('[class*="overlay"], [class*="modal"], [class*="login"]').should('be.visible')
+  })
+
+  it('login modal has username and password fields', () => {
+    cy.visit('/')
+    cy.contains('登录').click()
+    cy.get('input[placeholder*="用户名"], input[type="text"]').should('exist')
+    cy.get('input[type="password"]').should('exist')
+  })
+
+  it('shows error for invalid login', () => {
+    cy.visit('/')
+    cy.contains('登录').click()
+    // Try submitting with invalid credentials
+    cy.get('input[placeholder*="用户名"], input[type="text"]').first().type('nonexistent_user_xyz')
+    cy.get('input[type="password"]').first().type('wrongpassword')
+    cy.contains('button', /登录|确定|提交/).click()
+    // Should show error (alert, toast, or inline message)
+    cy.wait(1000)
+    // The modal should still be visible (login failed)
+    cy.get('[class*="overlay"], [class*="modal"], [class*="login"]').should('exist')
+  })
+
+  it('authenticated user sees their name in header', () => {
+    const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
+      }
+    })
+    cy.get('.app-header', { timeout: 8000 }).should('be.visible')
+    cy.contains('Hera').should('be.visible')
+  })
+
+  it('logout clears auth and shows login button', () => {
+    const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
+      }
+    })
+    cy.contains('Hera', { timeout: 8000 }).should('be.visible')
+    // Click user name to open menu
+    cy.contains('Hera').click()
+    // Click logout
+    cy.contains(/退出|登出|logout/i).click()
+    // Should show login button again
+    cy.contains('登录', { timeout: 5000 }).should('be.visible')
+  })
+
+  it('token from URL param authenticates user', () => {
+    const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'
+    cy.visit('/?token=' + ADMIN_TOKEN)
+    // Should authenticate and show user name
+    cy.contains('Hera', { timeout: 8000 }).should('be.visible')
+    // Token should be removed from URL
+    cy.url().should('not.include', 'token=')
+  })
+
+  it('protected tabs become accessible after login', () => {
+    const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
+      }
+    })
+    cy.get('.nav-tab', { timeout: 10000 }).should('have.length.gte', 6)
+    cy.get('.nav-tab').contains('管理配方').click()
+    // Should navigate to manage page, not show login modal
+    cy.url().should('include', '/manage')
+  })
+})
diff --git a/frontend/cypress/e2e/demo-walkthrough.cy.js b/frontend/cypress/e2e/demo-walkthrough.cy.js
new file mode 100644
index 0000000..aaa6846
--- /dev/null
+++ b/frontend/cypress/e2e/demo-walkthrough.cy.js
@@ -0,0 +1,106 @@
+// Demo walkthrough for video recording
+// Timeline paced to match 90s TTS narration
+
+const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'
+
+describe('doTERRA 精油配方计算器 - 功能演示', () => {
+  it('完整功能演示', { defaultCommandTimeout: 15000 }, () => {
+    // ===== 0:00-0:05 开场：首页加载 =====
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
+      }
+    })
+    cy.get('.app-header').should('be.visible')
+    cy.wait(4500)
+
+    // ===== 0:05-0:09 配方卡片列表 =====
+    cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+    cy.wait(3500)
+
+    // ===== 0:09-0:12 滚动浏览 =====
+    cy.scrollTo(0, 500, { duration: 1200 })
+    cy.wait(1500)
+    cy.scrollTo('top', { duration: 800 })
+    cy.wait(1000)
+
+    // ===== 0:12-0:16 搜索框输入 =====
+    cy.get('input[placeholder*="搜索"]').click()
+    cy.wait(800)
+    cy.get('input[placeholder*="搜索"]').type('薰衣草', { delay: 200 })
+    cy.wait(2500)
+
+    // ===== 0:16-0:20 搜索结果 =====
+    cy.wait(2000)
+    cy.get('input[placeholder*="搜索"]').clear()
+    cy.wait(1500)
+
+    // ===== 0:20-0:24 点击配方卡片 =====
+    cy.get('.recipe-card').first().click()
+    cy.wait(4000)
+
+    // ===== 0:24-0:30 查看详情 =====
+    cy.get('[class*="overlay"], [class*="detail"]').should('be.visible')
+    cy.wait(4500)
+    cy.get('button').contains(/✕|关闭|←/).first().click()
+    cy.wait(1500)
+
+    // ===== 0:30-0:34 切换精油价目 =====
+    cy.get('.nav-tab').contains('精油价目').click()
+    cy.wait(4000)
+
+    // ===== 0:34-0:38 搜索精油 =====
+    cy.get('.oil-card', { timeout: 10000 }).should('have.length.gte', 1)
+    cy.get('input[placeholder*="搜索精油"]').type('薰衣草', { delay: 200 })
+    cy.wait(2500)
+    cy.get('input[placeholder*="搜索精油"]').clear()
+    cy.wait(1000)
+
+    // ===== 0:38-0:42 切换瓶价/滴价 =====
+    cy.contains('滴价').click()
+    cy.wait(2000)
+    cy.contains('瓶价').click()
+    cy.wait(1500)
+
+    // ===== 0:42-0:47 管理配方 =====
+    cy.get('.nav-tab').contains('管理配方').click()
+    cy.wait(4500)
+
+    // ===== 0:47-0:52 管理页面浏览 =====
+    cy.scrollTo(0, 300, { duration: 1000 })
+    cy.wait(2000)
+    cy.scrollTo('top', { duration: 600 })
+    cy.wait(2000)
+
+    // ===== 0:52-0:56 个人库存 =====
+    cy.get('.nav-tab').contains('个人库存').click()
+    cy.wait(4500)
+
+    // ===== 0:56-1:00 库存推荐 =====
+    cy.scrollTo(0, 200, { duration: 600 })
+    cy.wait(2000)
+    cy.scrollTo('top', { duration: 400 })
+    cy.wait(1500)
+
+    // ===== 1:00-1:06 操作日志 =====
+    cy.get('.nav-tab').contains('操作日志').click()
+    cy.wait(3000)
+    cy.scrollTo(0, 200, { duration: 600 })
+    cy.wait(2500)
+
+    // ===== 1:06-1:12 Bug 追踪 =====
+    cy.get('.nav-tab').contains('Bug').click()
+    cy.wait(5500)
+
+    // ===== 1:12-1:18 用户管理 =====
+    cy.get('.nav-tab').contains('用户管理').click()
+    cy.wait(5500)
+
+    // ===== 1:18-1:22 回到首页 =====
+    cy.get('.nav-tab').contains('配方查询').click()
+    cy.wait(3500)
+
+    // ===== 1:22-1:30 结束 =====
+    cy.wait(5000)
+  })
+})
diff --git a/frontend/cypress/e2e/favorites.cy.js b/frontend/cypress/e2e/favorites.cy.js
new file mode 100644
index 0000000..2a44229
--- /dev/null
+++ b/frontend/cypress/e2e/favorites.cy.js
@@ -0,0 +1,87 @@
+describe('Favorites System', () => {
+  const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'
+
+  describe('API Level', () => {
+    let firstRecipeId
+
+    before(() => {
+      cy.request('/api/recipes').then(res => {
+        firstRecipeId = res.body[0].id
+      })
+    })
+
+    it('can add a favorite via API', () => {
+      cy.request({
+        method: 'POST',
+        url: `/api/favorites/${firstRecipeId}`,
+        headers: { Authorization: `Bearer ${ADMIN_TOKEN}` },
+        body: {}
+      }).then(res => {
+        expect(res.status).to.be.oneOf([200, 201])
+      })
+    })
+
+    it('lists the favorite', () => {
+      cy.request({
+        url: '/api/favorites',
+        headers: { Authorization: `Bearer ${ADMIN_TOKEN}` }
+      }).then(res => {
+        expect(res.body).to.include(firstRecipeId)
+      })
+    })
+
+    it('can remove the favorite via API', () => {
+      cy.request({
+        method: 'DELETE',
+        url: `/api/favorites/${firstRecipeId}`,
+        headers: { Authorization: `Bearer ${ADMIN_TOKEN}` }
+      }).then(res => {
+        expect(res.status).to.eq(200)
+      })
+    })
+
+    it('favorite is removed from list', () => {
+      cy.request({
+        url: '/api/favorites',
+        headers: { Authorization: `Bearer ${ADMIN_TOKEN}` }
+      }).then(res => {
+        expect(res.body).to.not.include(firstRecipeId)
+      })
+    })
+  })
+
+  describe('UI Level', () => {
+    it('recipe cards have star buttons for logged-in users', () => {
+      cy.visit('/', {
+        onBeforeLoad(win) {
+          win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
+        }
+      })
+      cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+      // Stars should be present on cards
+      cy.get('.recipe-card').first().within(() => {
+        cy.contains(/★|☆/).should('exist')
+      })
+    })
+
+    it('clicking star toggles favorite state', () => {
+      cy.visit('/', {
+        onBeforeLoad(win) {
+          win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
+        }
+      })
+      cy.get('.recipe-card', { timeout: 10000 }).first().within(() => {
+        cy.contains(/★|☆/).then($star => {
+          const wasFav = $star.text().includes('★')
+          $star.trigger('click')
+          // Star text should have toggled
+          cy.wait(500)
+          cy.contains(/★|☆/).invoke('text').should(text => {
+            if (wasFav) expect(text).to.include('☆')
+            else expect(text).to.include('★')
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/frontend/cypress/e2e/navigation.cy.js b/frontend/cypress/e2e/navigation.cy.js
new file mode 100644
index 0000000..c177dd2
--- /dev/null
+++ b/frontend/cypress/e2e/navigation.cy.js
@@ -0,0 +1,69 @@
+describe('Navigation & Routing', () => {
+  const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'
+
+  it('direct URL /oils loads oil reference page', () => {
+    cy.visit('/oils')
+    cy.contains('精油价目').should('be.visible')
+  })
+
+  it('direct URL / loads search page', () => {
+    cy.visit('/')
+    cy.get('input[placeholder*="搜索"]', { timeout: 8000 }).should('be.visible')
+  })
+
+  it('unknown route still renders the app', () => {
+    cy.visit('/nonexistent-page')
+    cy.get('.app-header').should('be.visible')
+    cy.get('.nav-tabs').should('be.visible')
+  })
+
+  it('back button works between tabs', () => {
+    cy.visit('/')
+    cy.get('.nav-tab').contains('精油价目').click()
+    cy.url().should('include', '/oils')
+    cy.go('back')
+    cy.url().should('not.include', '/oils')
+  })
+
+  it('tab active state tracks after click', () => {
+    cy.visit('/')
+    cy.get('.nav-tab').contains('精油价目').click()
+    cy.get('.nav-tab').contains('精油价目').should('have.class', 'active')
+    cy.get('.nav-tab').contains('配方查询').should('not.have.class', 'active')
+  })
+
+  it('admin tabs only visible when authenticated', () => {
+    cy.visit('/')
+    cy.get('.nav-tab').contains('操作日志').should('not.exist')
+    cy.get('.nav-tab').contains('用户管理').should('not.exist')
+  })
+
+  it('admin tabs appear after login', () => {
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
+      }
+    })
+    cy.get('.nav-tab', { timeout: 10000 }).contains('操作日志').should('be.visible')
+    cy.get('.nav-tab').contains('用户管理').should('be.visible')
+  })
+
+  it('all admin pages are navigable', () => {
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
+      }
+    })
+    const pages = [
+      { tab: '管理配方', url: '/manage' },
+      { tab: '个人库存', url: '/inventory' },
+      { tab: '精油价目', url: '/oils' },
+      { tab: '操作日志', url: '/audit' },
+      { tab: '用户管理', url: '/users' },
+    ]
+    pages.forEach(({ tab, url }) => {
+      cy.get('.nav-tab').contains(tab).click()
+      cy.url().should('include', url)
+    })
+  })
+})
diff --git a/frontend/cypress/e2e/oil-data-integrity.cy.js b/frontend/cypress/e2e/oil-data-integrity.cy.js
new file mode 100644
index 0000000..5620691
--- /dev/null
+++ b/frontend/cypress/e2e/oil-data-integrity.cy.js
@@ -0,0 +1,107 @@
+describe('Oil Data Integrity', () => {
+  it('all oils have valid prices', () => {
+    cy.request('/api/oils').then(res => {
+      res.body.forEach(oil => {
+        expect(oil.name).to.be.a('string').and.not.be.empty
+        expect(oil.bottle_price).to.be.a('number').and.be.gte(0)
+        expect(oil.drop_count).to.be.a('number').and.be.gt(0)
+      })
+    })
+  })
+
+  it('common oils exist in the database', () => {
+    const expected = ['薰衣草', '茶树', '乳香', '柠檬', '椒样薄荷', '椰子油']
+    cy.request('/api/oils').then(res => {
+      const names = res.body.map(o => o.name)
+      expected.forEach(name => {
+        expect(names).to.include(name)
+      })
+    })
+  })
+
+  it('oil price per drop is correctly calculated', () => {
+    cy.request('/api/oils').then(res => {
+      res.body.forEach(oil => {
+        const ppd = oil.bottle_price / oil.drop_count
+        expect(ppd).to.be.a('number')
+        expect(ppd).to.be.gte(0)
+        expect(ppd).to.be.lte(100) // sanity check: no oil costs >100 per drop
+      })
+    })
+  })
+
+  it('drop counts match known volume standards', () => {
+    // Standard doTERRA volumes: 5ml=93, 10ml=186, 15ml=280
+    const validDropCounts = [46, 93, 160, 186, 280, 2146]
+    cy.request('/api/oils').then(res => {
+      const counts = new Set(res.body.map(o => o.drop_count))
+      // At least some should match standard volumes
+      const matching = [...counts].filter(c => validDropCounts.includes(c))
+      expect(matching.length).to.be.gte(1)
+    })
+  })
+})
+
+describe('Recipe Data Integrity', () => {
+  it('all recipes have valid structure', () => {
+    cy.request('/api/recipes').then(res => {
+      expect(res.body.length).to.be.gte(1)
+      res.body.forEach(recipe => {
+        expect(recipe).to.have.property('id')
+        expect(recipe).to.have.property('name').and.not.be.empty
+        expect(recipe).to.have.property('ingredients').and.be.an('array')
+        recipe.ingredients.forEach(ing => {
+          expect(ing).to.have.property('oil_name').and.not.be.empty
+          expect(ing).to.have.property('drops').and.be.a('number').and.be.gt(0)
+        })
+      })
+    })
+  })
+
+  it('recipes reference existing oils', () => {
+    cy.request('/api/oils').then(oilRes => {
+      const oilNames = new Set(oilRes.body.map(o => o.name))
+      cy.request('/api/recipes').then(recipeRes => {
+        let totalMissing = 0
+        recipeRes.body.forEach(recipe => {
+          recipe.ingredients.forEach(ing => {
+            if (!oilNames.has(ing.oil_name)) totalMissing++
+          })
+        })
+        // Allow some missing (discontinued oils), but not too many
+        const totalIngs = recipeRes.body.reduce((s, r) => s + r.ingredients.length, 0)
+        const missingRate = totalMissing / totalIngs
+        expect(missingRate).to.be.lt(0.2) // less than 20% missing
+      })
+    })
+  })
+
+  it('no duplicate recipe names', () => {
+    cy.request('/api/recipes').then(res => {
+      const names = res.body.map(r => r.name)
+      const unique = new Set(names)
+      // Allow some duplicates but flag if many
+      const dupRate = (names.length - unique.size) / names.length
+      expect(dupRate).to.be.lt(0.1) // less than 10% duplicates
+    })
+  })
+
+  it('recipe costs are calculable', () => {
+    cy.request('/api/oils').then(oilRes => {
+      const oilPrices = {}
+      oilRes.body.forEach(o => {
+        oilPrices[o.name] = o.bottle_price / o.drop_count
+      })
+      cy.request('/api/recipes').then(recipeRes => {
+        recipeRes.body.slice(0, 20).forEach(recipe => {
+          let cost = 0
+          recipe.ingredients.forEach(ing => {
+            cost += (oilPrices[ing.oil_name] || 0) * ing.drops
+          })
+          expect(cost).to.be.a('number')
+          expect(cost).to.be.gte(0)
+        })
+      })
+    })
+  })
+})
diff --git a/frontend/cypress/e2e/oil-reference.cy.js b/frontend/cypress/e2e/oil-reference.cy.js
new file mode 100644
index 0000000..92cd865
--- /dev/null
+++ b/frontend/cypress/e2e/oil-reference.cy.js
@@ -0,0 +1,32 @@
+describe('Oil Reference Page', () => {
+  beforeEach(() => {
+    cy.visit('/oils')
+    cy.get('.oil-card, .oils-grid', { timeout: 10000 }).should('exist')
+  })
+
+  it('displays oil grid with items', () => {
+    cy.contains('精油价目').should('be.visible')
+    cy.get('.oil-card').should('have.length.gte', 10)
+  })
+
+  it('shows oil name and price on each chip', () => {
+    cy.get('.oil-card').first().should('contain', '¥')
+  })
+
+  it('filters oils by search', () => {
+    cy.get('.oil-card').then($chips => {
+      const initial = $chips.length
+      cy.get('input[placeholder*="搜索精油"]').type('薰衣草')
+      cy.wait(300)
+      cy.get('.oil-card').should('have.length.lt', initial)
+    })
+  })
+
+  it('toggles between bottle and drop price view', () => {
+    cy.get('.oil-card').first().invoke('text').then(textBefore => {
+      cy.contains('滴价').click()
+      cy.wait(300)
+      cy.get('.oil-card').first().invoke('text').should('not.eq', textBefore)
+    })
+  })
+})
diff --git a/frontend/cypress/e2e/performance.cy.js b/frontend/cypress/e2e/performance.cy.js
new file mode 100644
index 0000000..64e3d99
--- /dev/null
+++ b/frontend/cypress/e2e/performance.cy.js
@@ -0,0 +1,58 @@
+describe('Performance', () => {
+  it('home page loads within 5 seconds', () => {
+    const start = Date.now()
+    cy.visit('/')
+    cy.get('.recipe-card', { timeout: 5000 }).should('have.length.gte', 1)
+    cy.then(() => {
+      const elapsed = Date.now() - start
+      expect(elapsed).to.be.lt(5000)
+    })
+  })
+
+  it('API /api/oils responds within 1 second', () => {
+    const start = Date.now()
+    cy.request('/api/oils').then(() => {
+      expect(Date.now() - start).to.be.lt(1000)
+    })
+  })
+
+  it('API /api/recipes responds within 2 seconds', () => {
+    const start = Date.now()
+    cy.request('/api/recipes').then(() => {
+      expect(Date.now() - start).to.be.lt(2000)
+    })
+  })
+
+  it('search filtering is near-instant', () => {
+    cy.visit('/')
+    cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+    const start = Date.now()
+    cy.get('input[placeholder*="搜索"]').type('薰衣草')
+    cy.wait(300)
+    cy.get('.recipe-card').should('exist')
+    cy.then(() => {
+      expect(Date.now() - start).to.be.lt(2000)
+    })
+  })
+
+  it('oil reference page loads within 3 seconds', () => {
+    const start = Date.now()
+    cy.visit('/oils')
+    cy.get('.oil-card', { timeout: 3000 }).should('have.length.gte', 1)
+    cy.then(() => {
+      expect(Date.now() - start).to.be.lt(3000)
+    })
+  })
+
+  it('handles 250+ recipes without crashing', () => {
+    cy.request('/api/recipes').then(res => {
+      expect(res.body.length).to.be.gte(200)
+    })
+    cy.visit('/')
+    cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 10)
+    // Scroll to trigger lazy loading if any
+    cy.scrollTo('bottom')
+    cy.wait(500)
+    cy.get('.main').should('be.visible')
+  })
+})
diff --git a/frontend/cypress/e2e/recipe-detail.cy.js b/frontend/cypress/e2e/recipe-detail.cy.js
new file mode 100644
index 0000000..1761508
--- /dev/null
+++ b/frontend/cypress/e2e/recipe-detail.cy.js
@@ -0,0 +1,84 @@
+describe('Recipe Detail', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+  })
+
+  it('opens detail overlay when clicking a recipe card', () => {
+    cy.get('.recipe-card').first().click()
+    cy.get('[class*="overlay"], [class*="detail"]').should('be.visible')
+  })
+
+  it('shows recipe name in detail view', () => {
+    // Get recipe name from card, however it's structured
+    cy.get('.recipe-card').first().invoke('text').then(cardText => {
+      cy.get('.recipe-card').first().click()
+      cy.wait(500)
+      // The detail view should show some text from the card
+      cy.get('[class*="overlay"], [class*="detail"]').should('be.visible')
+    })
+  })
+
+  it('shows ingredient info with drops', () => {
+    cy.get('.recipe-card').first().click()
+    cy.wait(500)
+    cy.contains('滴').should('exist')
+  })
+
+  it('shows cost with ¥ symbol', () => {
+    cy.get('.recipe-card').first().click()
+    cy.wait(500)
+    cy.contains('¥').should('exist')
+  })
+
+  it('closes detail overlay when clicking close button', () => {
+    cy.get('.recipe-card').first().click()
+    cy.get('[class*="overlay"], [class*="detail"]').should('be.visible')
+    cy.get('button').contains(/✕|关闭|←/).first().click()
+    cy.get('.recipe-card').should('be.visible')
+  })
+
+  it('shows action buttons in detail', () => {
+    cy.get('.recipe-card').first().click()
+    cy.wait(500)
+    // Should have at least one action button
+    cy.get('[class*="overlay"] button, [class*="detail"] button').should('have.length.gte', 1)
+  })
+
+  it('shows favorite star', () => {
+    cy.get('.recipe-card').first().click()
+    cy.wait(500)
+    cy.contains(/★|☆|收藏/).should('exist')
+  })
+})
+
+describe('Recipe Detail - Editor (Admin)', () => {
+  const ADMIN_TOKEN = 'c86ae7afbe10fabe3c1d5e1a7fee74feaadfd5dc7be2ab62'
+
+  beforeEach(() => {
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        win.localStorage.setItem('oil_auth_token', ADMIN_TOKEN)
+      }
+    })
+    cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+  })
+
+  it('shows edit button for admin', () => {
+    cy.get('.recipe-card').first().click()
+    cy.wait(500)
+    cy.contains(/编辑|✏/).should('exist')
+  })
+
+  it('can switch to editor view', () => {
+    cy.get('.recipe-card').first().click()
+    cy.contains(/编辑|✏/).first().click()
+    cy.get('select, input[type="number"], .oil-select, .drops-input').should('exist')
+  })
+
+  it('editor shows save button', () => {
+    cy.get('.recipe-card').first().click()
+    cy.contains(/编辑|✏/).first().click()
+    cy.contains(/保存|💾/).should('exist')
+  })
+})
diff --git a/frontend/cypress/e2e/recipe-search.cy.js b/frontend/cypress/e2e/recipe-search.cy.js
new file mode 100644
index 0000000..36d7ba8
--- /dev/null
+++ b/frontend/cypress/e2e/recipe-search.cy.js
@@ -0,0 +1,45 @@
+describe('Recipe Search', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    // Wait for recipes to load
+    cy.get('.recipe-card, .empty-state', { timeout: 10000 }).should('exist')
+  })
+
+  it('displays recipe cards in the grid', () => {
+    cy.get('.recipe-card').should('have.length.gte', 1)
+  })
+
+  it('each recipe card shows name and oils', () => {
+    cy.get('.recipe-card').first().within(() => {
+      cy.get('.recipe-card-name').should('not.be.empty')
+      cy.get('.recipe-card-oils').should('not.be.empty')
+    })
+  })
+
+  it('filters recipes by search input', () => {
+    cy.get('.recipe-card').then($cards => {
+      const initialCount = $cards.length
+      cy.get('input[placeholder*="搜索"]').type('薰衣草')
+      // Should filter, possibly fewer results
+      cy.wait(500)
+      cy.get('.recipe-card').should('have.length.lte', initialCount)
+    })
+  })
+
+  it('clears search and restores all recipes', () => {
+    cy.get('input[placeholder*="搜索"]').type('薰衣草')
+    cy.wait(500)
+    cy.get('.recipe-card').then($filtered => {
+      const filteredCount = $filtered.length
+      cy.get('input[placeholder*="搜索"]').clear()
+      cy.wait(500)
+      cy.get('.recipe-card').should('have.length.gte', filteredCount)
+    })
+  })
+
+  it('opens recipe detail when clicking a card', () => {
+    cy.get('.recipe-card').first().click()
+    // Should show detail overlay or panel
+    cy.get('[class*="overlay"], [class*="detail"]', { timeout: 5000 }).should('be.visible')
+  })
+})
diff --git a/frontend/cypress/e2e/responsive.cy.js b/frontend/cypress/e2e/responsive.cy.js
new file mode 100644
index 0000000..21924ed
--- /dev/null
+++ b/frontend/cypress/e2e/responsive.cy.js
@@ -0,0 +1,76 @@
+describe('Responsive Design', () => {
+  describe('Mobile viewport (375x667)', () => {
+    beforeEach(() => {
+      cy.viewport(375, 667)
+    })
+
+    it('loads the app on mobile', () => {
+      cy.visit('/')
+      cy.get('.app-header').should('be.visible')
+      cy.contains('doTERRA').should('be.visible')
+    })
+
+    it('nav tabs are scrollable', () => {
+      cy.visit('/')
+      cy.get('.nav-tabs').should('have.css', 'overflow-x', 'auto')
+    })
+
+    it('recipe cards stack in single column', () => {
+      cy.visit('/')
+      cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+      // On mobile, cards should be full width
+      cy.get('.recipe-card').first().then($card => {
+        const width = $card.outerWidth()
+        expect(width).to.be.gte(300)
+      })
+    })
+
+    it('search input is usable on mobile', () => {
+      cy.visit('/')
+      cy.get('input[placeholder*="搜索"]').should('be.visible')
+      cy.get('input[placeholder*="搜索"]').type('薰衣草')
+      cy.get('input[placeholder*="搜索"]').should('have.value', '薰衣草')
+    })
+
+    it('oil reference page works on mobile', () => {
+      cy.visit('/oils')
+      cy.contains('精油价目').should('be.visible')
+      cy.get('.oil-card').should('have.length.gte', 1)
+    })
+  })
+
+  describe('Tablet viewport (768x1024)', () => {
+    beforeEach(() => {
+      cy.viewport(768, 1024)
+    })
+
+    it('loads and shows recipe grid', () => {
+      cy.visit('/')
+      cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+    })
+
+    it('oil grid shows multiple columns', () => {
+      cy.visit('/oils')
+      cy.get('.oil-card', { timeout: 10000 }).should('have.length.gte', 1)
+    })
+  })
+
+  describe('Wide viewport (1920x1080)', () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080)
+    })
+
+    it('content is centered with max-width', () => {
+      cy.visit('/')
+      cy.get('.main').then($main => {
+        const width = $main.outerWidth()
+        expect(width).to.be.lte(960)
+      })
+    })
+
+    it('recipe grid shows multiple columns', () => {
+      cy.visit('/')
+      cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+    })
+  })
+})
diff --git a/frontend/cypress/e2e/search-advanced.cy.js b/frontend/cypress/e2e/search-advanced.cy.js
new file mode 100644
index 0000000..a88cb6f
--- /dev/null
+++ b/frontend/cypress/e2e/search-advanced.cy.js
@@ -0,0 +1,67 @@
+describe('Advanced Search Features', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
+  })
+
+  it('search input accepts text and app stays stable', () => {
+    cy.get('input[placeholder*="搜索"]').type('酸痛')
+    cy.wait(500)
+    // App should remain functional
+    cy.get('.main').should('be.visible')
+    cy.get('input[placeholder*="搜索"]').should('have.value', '酸痛')
+  })
+
+  it('searches by partial recipe name', () => {
+    cy.get('input[placeholder*="搜索"]').type('安睡')
+    cy.wait(500)
+    cy.get('.recipe-card').should('have.length.gte', 0)
+  })
+
+  it('returns fewer results for nonsense query', () => {
+    cy.get('.recipe-card').then($all => {
+      const total = $all.length
+      cy.get('input[placeholder*="搜索"]').type('xyzabcnonexistent')
+      cy.wait(500)
+      // Should show empty state or fewer results
+      cy.get('.recipe-card').should('have.length.lte', total)
+    })
+  })
+
+  it('search is case-insensitive for latin chars', () => {
+    cy.get('input[placeholder*="搜索"]').type('doterra')
+    cy.wait(500)
+    // Just verify no crash
+    cy.get('.main').should('be.visible')
+  })
+
+  it('handles special characters in search', () => {
+    cy.get('input[placeholder*="搜索"]').type('（）【】')
+    cy.wait(300)
+    cy.get('.main').should('be.visible')
+  })
+
+  it('rapid typing updates results without crash', () => {
+    const input = cy.get('input[placeholder*="搜索"]')
+    input.type('薰')
+    cy.wait(100)
+    input.type('衣')
+    cy.wait(100)
+    input.type('草')
+    cy.wait(300)
+    cy.get('.recipe-card').should('have.length.gte', 0)
+    cy.get('.main').should('be.visible')
+  })
+
+  it('clearing search with button restores all recipes', () => {
+    cy.get('.recipe-card').then($initial => {
+      const count = $initial.length
+      cy.get('input[placeholder*="搜索"]').type('薰衣草')
+      cy.wait(300)
+      // Clear
+      cy.get('input[placeholder*="搜索"]').clear()
+      cy.wait(300)
+      cy.get('.recipe-card').should('have.length', count)
+    })
+  })
+})
diff --git a/frontend/cypress/support/e2e.js b/frontend/cypress/support/e2e.js
new file mode 100644
index 0000000..0f7ee48
--- /dev/null
+++ b/frontend/cypress/support/e2e.js
@@ -0,0 +1,33 @@
+// Ignore uncaught exceptions from the app (API errors during loading, etc.)
+Cypress.on('uncaught:exception', () => false)
+
+// Custom commands for the oil calculator app
+
+// Login as admin via token injection
+Cypress.Commands.add('loginAsAdmin', () => {
+  cy.request('GET', '/api/users').then((res) => {
+    const admin = res.body.find(u => u.role === 'admin')
+    if (admin) {
+      cy.window().then(win => {
+        win.localStorage.setItem('oil_auth_token', admin.token)
+      })
+    }
+  })
+})
+
+// Login with a specific token
+Cypress.Commands.add('loginWithToken', (token) => {
+  cy.window().then(win => {
+    win.localStorage.setItem('oil_auth_token', token)
+  })
+})
+
+// Verify toast message appears
+Cypress.Commands.add('expectToast', (text) => {
+  cy.get('.toast').should('contain', text)
+})
+
+// Navigate via nav tabs
+Cypress.Commands.add('goToSection', (label) => {
+  cy.get('.nav-tab').contains(label).click()
+})
diff --git a/frontend/index.html b/frontend/index.html
index 9a1ecb8..06137fe 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,8441 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh-CN">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-<link rel="icon" href="/favicon.svg" type="image/svg+xml">
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
-<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
-<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-<meta name="apple-mobile-web-app-title" content="doTERRA配方">
-<title>doTERRA 配方计算器</title>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
-<style>
-  :root {
-    --cream: #faf6f0;
-    --warm-white: #fffdf9;
-    --sage: #7a9e7e;
-    --sage-dark: #5a7d5e;
-    --sage-light: #c8ddc9;
-    --sage-mist: #eef4ee;
-    --gold: #c9a84c;
-    --gold-light: #f0e4c0;
-    --brown: #6b4f3a;
-    --brown-light: #c4a882;
-    --text-dark: #2c2416;
-    --text-mid: #5a4a35;
-    --text-light: #9a8570;
-    --border: #e0d4c0;
-    --shadow: 0 4px 20px rgba(90,60,30,0.08);
-    --shadow-hover: 0 8px 32px rgba(90,60,30,0.15);
-  }
-
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-
-  body {
-    font-family: 'Noto Sans SC', sans-serif;
-    background: var(--cream);
-    color: var(--text-dark);
-    min-height: 100vh;
-  }
-
-  /* Header */
-  .app-header {
-    background: linear-gradient(135deg, #3d6b41 0%, #5a7d5e 50%, #7a9e7e 100%);
-    padding: 28px 32px 24px;
-    position: relative;
-    overflow: hidden;
-  }
-  .app-header::before {
-    content: '';
-    position: absolute; inset: 0;
-    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  }
-  .header-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
-  .header-icon { font-size: 40px; }
-  .header-title { color: white; }
-  .header-title h1 { font-family: 'Noto Serif SC', serif; font-size: 24px; font-weight: 600; letter-spacing: 2px; }
-  .header-title p { font-size: 13px; opacity: 0.8; margin-top: 4px; letter-spacing: 1px; }
-
-  /* Nav tabs */
-  .nav-tabs {
-    display: flex;
-    background: white;
-    border-bottom: 1px solid var(--border);
-    padding: 0 24px;
-    gap: 0;
-    overflow-x: auto;
-    position: sticky;
-    top: 0;
-    z-index: 50;
-  }
-  .nav-tab {
-    padding: 14px 20px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--text-light);
-    cursor: pointer;
-    border-bottom: 3px solid transparent;
-    white-space: nowrap;
-    transition: all 0.2s;
-  }
-  .nav-tab:hover { color: var(--sage-dark); }
-  .nav-tab.active { color: var(--sage-dark); border-bottom-color: var(--sage); }
-
-  /* Main content */
-  .main { padding: 24px; max-width: 960px; margin: 0 auto; }
-
-  /* Section */
-  .section { display: none; max-width: 800px; margin-left: auto; margin-right: auto; }
-  .section.active { display: block; }
-  #section-search { max-width: none; }
-  #section-search .search-box,
-  #section-search .recipe-grid,
-  #section-search #personalSection,
-  #section-search #publicLabel,
-  #section-search #fuzzyResults,
-  #section-search #diarySearchResults,
-  #section-search #categoryRelated,
-  #section-search #categoryHeader { max-width: 800px; margin-left: auto; margin-right: auto; }
-
-  /* Search box */
-  .search-box {
-    background: white;
-    border-radius: 16px;
-    padding: 20px 24px;
-    box-shadow: var(--shadow);
-    margin-bottom: 20px;
-  }
-  .search-label { font-size: 13px; color: var(--text-light); margin-bottom: 10px; letter-spacing: 0.5px; }
-  .search-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
-  .search-input {
-    flex: 1; min-width: 200px;
-    padding: 11px 16px;
-    border: 1.5px solid var(--border);
-    border-radius: 10px;
-    font-size: 15px;
-    font-family: inherit;
-    color: var(--text-dark);
-    background: var(--cream);
-    transition: border-color 0.2s;
-    outline: none;
-  }
-  .search-input:focus { border-color: var(--sage); background: white; }
-  .btn {
-    padding: 11px 22px;
-    border-radius: 10px;
-    border: none;
-    font-size: 14px;
-    font-family: inherit;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-    white-space: nowrap;
-  }
-  .btn-primary { background: var(--sage); color: white; }
-  .btn-primary:hover { background: var(--sage-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(90,125,94,0.3); }
-  .btn-gold { background: var(--gold); color: white; }
-  .btn-gold:hover { background: #b8973e; transform: translateY(-1px); }
-  .btn-outline { background: transparent; color: var(--sage-dark); border: 1.5px solid var(--sage); }
-  .btn-outline:hover { background: var(--sage-mist); }
-  .btn-danger { background: transparent; color: #c0392b; border: 1.5px solid #e8b4b0; }
-  .btn-danger:hover { background: #fdf0ee; }
-  .btn-sm { padding: 7px 14px; font-size: 13px; }
-
-  /* Recipe grid */
-  .recipe-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-    gap: 16px;
-    margin-bottom: 24px;
-  }
-  .recipe-card {
-    background: white;
-    border-radius: 14px;
-    padding: 18px;
-    cursor: pointer;
-    box-shadow: var(--shadow);
-    border: 2px solid transparent;
-    transition: all 0.2s;
-    position: relative;
-  }
-  .recipe-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--sage-light); }
-  .recipe-card.selected { border-color: var(--sage); background: var(--sage-mist); }
-  .recipe-card-name {
-    font-family: 'Noto Serif SC', serif;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--text-dark);
-    margin-bottom: 8px;
-  }
-  .recipe-card-oils { font-size: 12px; color: var(--text-light); line-height: 1.7; }
-  .recipe-card-price {
-    margin-top: 12px;
-    font-size: 13px;
-    color: var(--sage-dark);
-    font-weight: 600;
-    display: flex; align-items: center; gap: 6px;
-  }
-
-  /* Detail panel */
-  .detail-panel {
-    background: white;
-    border-radius: 16px;
-    padding: 28px;
-    box-shadow: var(--shadow);
-    margin-bottom: 24px;
-  }
-  .detail-header {
-    display: flex; justify-content: space-between; align-items: flex-start;
-    margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
-  }
-  .detail-title {
-    font-family: 'Noto Serif SC', serif;
-    font-size: 22px; font-weight: 700; color: var(--text-dark);
-  }
-  .detail-note {
-    font-size: 13px; color: var(--text-light);
-    background: var(--gold-light); border-radius: 8px;
-    padding: 6px 12px; margin-top: 6px;
-    display: inline-block;
-  }
-  .detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
-
-  /* Ingredients table */
-  .ingredients-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
-  .ingredients-table th {
-    text-align: center; padding: 10px 14px;
-    font-size: 12px; font-weight: 600;
-    color: var(--text-light); letter-spacing: 0.5px;
-    border-bottom: 2px solid var(--border);
-    text-transform: uppercase;
-  }
-  .ingredients-table td {
-    padding: 12px 14px;
-    border-bottom: 1px solid var(--border);
-    font-size: 14px; vertical-align: middle;
-    text-align: center;
-  }
-  .ingredients-table tr:last-child td { border-bottom: none; }
-  .ingredients-table tr:hover td { background: var(--sage-mist); }
-
-  .drops-input {
-    width: 70px; padding: 6px 10px;
-    border: 1.5px solid var(--border); border-radius: 8px;
-    font-size: 14px; font-family: inherit; text-align: center;
-    outline: none; transition: border-color 0.2s;
-  }
-  .drops-input:focus { border-color: var(--sage); }
-
-  .oil-select {
-    padding: 6px 10px;
-    border: 1.5px solid var(--border); border-radius: 8px;
-    font-size: 13px; font-family: inherit;
-    background: white; outline: none;
-    max-width: 160px;
-  }
-  .oil-select:focus { border-color: var(--sage); }
-
-  .remove-btn {
-    background: none; border: none; cursor: pointer;
-    color: #c0392b; font-size: 18px; padding: 4px 8px;
-    border-radius: 6px; transition: background 0.2s;
-  }
-  .remove-btn:hover { background: #fdf0ee; }
-
-  .total-row {
-    background: var(--sage-mist);
-    border-radius: 12px; padding: 16px 20px;
-    display: flex; justify-content: space-between; align-items: center;
-    margin-top: 16px;
-  }
-  .total-label { font-size: 14px; color: var(--text-mid); font-weight: 500; }
-  .total-price { font-size: 22px; font-weight: 700; color: var(--sage-dark); }
-
-  /* Add ingredient */
-  .add-ingredient-row {
-    display: flex; gap: 10px; align-items: center;
-    margin-top: 12px; flex-wrap: wrap;
-  }
-  .add-ingredient-row select, .add-ingredient-row input {
-    padding: 8px 12px; border: 1.5px solid var(--border);
-    border-radius: 8px; font-size: 13px; font-family: inherit;
-    outline: none;
-  }
-  .add-ingredient-row select:focus, .add-ingredient-row input:focus { border-color: var(--sage); }
-
-  /* Card preview for export */
-  .card-preview-wrapper { margin-top: 20px; }
-  #recipe-card-export {
-    background: linear-gradient(145deg, #faf7f0 0%, #f5ede0 100%);
-    border-radius: 20px;
-    padding: 36px;
-    font-family: 'Noto Serif SC', serif;
-    max-width: 480px;
-    border: 1px solid #e0ccaa;
-    position: relative;
-    overflow: hidden;
-  }
-  #recipe-card-export::before {
-    content: '';
-    position: absolute; top: -40px; right: -40px;
-    width: 180px; height: 180px;
-    background: radial-gradient(circle, rgba(122,158,126,0.15) 0%, transparent 70%);
-    border-radius: 50%;
-  }
-  #recipe-card-export::after {
-    content: '';
-    position: absolute; bottom: -30px; left: -30px;
-    width: 140px; height: 140px;
-    background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
-    border-radius: 50%;
-  }
-  .card-brand {
-    font-size: 11px; letter-spacing: 3px; color: var(--sage);
-    margin-bottom: 8px;
-  }
-  .card-title {
-    font-size: 26px; font-weight: 700; color: var(--text-dark);
-    margin-bottom: 6px; line-height: 1.3;
-  }
-  .card-divider {
-    width: 48px; height: 2px;
-    background: linear-gradient(90deg, var(--sage), var(--gold));
-    border-radius: 2px; margin: 14px 0;
-  }
-  .card-note { font-size: 12px; color: var(--brown-light); margin-bottom: 18px; }
-  .card-ingredients { list-style: none; margin-bottom: 20px; }
-  .card-ingredients li {
-    display: flex; align-items: center;
-    padding: 9px 0; border-bottom: 1px solid rgba(180,150,100,0.15);
-    font-size: 14px;
-  }
-  .card-ingredients li:last-child { border-bottom: none; }
-  .card-oil-name { flex: 1; color: var(--text-dark); font-weight: 500; }
-  .card-oil-drops { width: 60px; text-align: right; color: var(--sage-dark); font-size: 13px; }
-  .card-oil-cost { width: 70px; text-align: right; color: var(--text-light); font-size: 12px; }
-  .card-total {
-    background: linear-gradient(135deg, var(--sage), #5a7d5e);
-    border-radius: 12px; padding: 14px 20px;
-    display: flex; justify-content: space-between; align-items: center;
-    margin-top: 8px;
-  }
-  .card-total-label { color: rgba(255,255,255,0.85); font-size: 13px; letter-spacing: 1px; }
-  .card-total-price { color: white; font-size: 20px; font-weight: 700; }
-  .card-footer {
-    margin-top: 16px; text-align: center;
-    font-size: 11px; color: var(--text-light); letter-spacing: 1px;
-  }
-
-  /* Manage section */
-  .manage-list { display: flex; flex-direction: column; gap: 12px; }
-  .manage-item {
-    background: white; border-radius: 14px; padding: 18px 22px;
-    box-shadow: var(--shadow); display: flex;
-    justify-content: space-between; align-items: center;
-    gap: 12px; flex-wrap: wrap;
-  }
-  .manage-item-left { flex: 1; }
-  .manage-item-name { font-weight: 600; font-size: 16px; color: var(--text-dark); }
-  .manage-item-oils { font-size: 13px; color: var(--text-light); margin-top: 4px; }
-  .manage-item-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
-
-  /* Add recipe form */
-  .form-card {
-    background: white; border-radius: 16px;
-    padding: 28px; box-shadow: var(--shadow); margin-bottom: 24px;
-  }
-  .form-title { font-family: 'Noto Serif SC', serif; font-size: 18px; font-weight: 600; margin-bottom: 20px; color: var(--text-dark); }
-  .form-group { margin-bottom: 16px; }
-  .form-label { font-size: 13px; color: var(--text-mid); margin-bottom: 6px; display: block; font-weight: 500; }
-  .form-control {
-    width: 100%; padding: 10px 14px;
-    border: 1.5px solid var(--border); border-radius: 10px;
-    font-size: 14px; font-family: inherit; outline: none;
-    transition: border-color 0.2s; background: white;
-  }
-  .form-control:focus { border-color: var(--sage); }
-
-  .new-ing-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
-  .new-ing-row {
-    display: flex; gap: 8px; align-items: center;
-  }
-  .new-ing-row select { flex: 1; }
-  .new-ing-row input { width: 80px; }
-
-  /* Oils section */
-  .oils-search { margin-bottom: 16px; }
-  .oils-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 10px;
-  }
-  .oil-chip {
-    background: white; border-radius: 10px; padding: 12px 16px;
-    box-shadow: 0 2px 8px rgba(90,60,30,0.06);
-    display: flex; justify-content: space-between; align-items: center;
-    gap: 8px;
-  }
-  .oil-chip-name { font-size: 14px; color: var(--text-dark); font-weight: 500; }
-  .oil-chip-price { font-size: 13px; color: var(--sage-dark); font-weight: 600; }
-  .oil-chip-actions { display: flex; gap: 4px; }
-  .oil-chip-btn {
-    background: none; border: none; cursor: pointer;
-    font-size: 13px; padding: 3px 6px; border-radius: 6px;
-    transition: background 0.2s; color: var(--text-light);
-  }
-  .oil-chip-btn:hover { background: var(--sage-mist); color: var(--sage-dark); }
-  .oil-chip-btn.del:hover { background: #fdf0ee; color: #c0392b; }
-  .oil-edit-input {
-    width: 90px; padding: 4px 8px; border: 1.5px solid var(--sage);
-    border-radius: 6px; font-size: 13px; font-family: inherit;
-    text-align: center; outline: none;
-  }
-  .add-oil-form {
-    background: white; border-radius: 14px; padding: 16px 20px;
-    box-shadow: var(--shadow); margin-bottom: 16px;
-    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
-  }
-  .add-oil-form input {
-    padding: 9px 14px; border: 1.5px solid var(--border);
-    border-radius: 8px; font-size: 14px; font-family: inherit; outline: none;
-  }
-  .add-oil-form input:focus { border-color: var(--sage); }
-
-  /* Empty state */
-  .empty-state { text-align: center; padding: 60px 20px; color: var(--text-light); }
-  .empty-state-icon { font-size: 48px; margin-bottom: 12px; }
-  .empty-state-text { font-size: 15px; }
-
-  /* Tag */
-  .tag {
-    display: inline-block; padding: 3px 10px;
-    border-radius: 20px; font-size: 12px;
-    background: var(--sage-mist); color: var(--sage-dark);
-    margin: 2px;
-  }
-  .tag-btn {
-    display: inline-flex; align-items: center; gap: 3px;
-    padding: 4px 10px; border-radius: 16px; font-size: 12px;
-    background: var(--sage-mist); color: var(--sage-dark);
-    border: 1.5px solid transparent; cursor: pointer;
-    transition: all 0.2s;
-  }
-  .tag-btn:hover { border-color: var(--sage); }
-  .tag-btn.active { background: var(--sage); color: white; border-color: var(--sage); }
-  .tag-btn .tag-del {
-    font-size: 14px; margin-left: 2px; opacity: 0.5;
-    cursor: pointer; border: none; background: none;
-    color: inherit; padding: 0 2px;
-  }
-  .tag-btn .tag-del:hover { opacity: 1; }
-  /* Tag picker overlay */
-  .tag-picker {
-    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-    background: rgba(0,0,0,0.3); z-index: 999;
-    display: flex; align-items: center; justify-content: center;
-  }
-  .tag-picker-card {
-    background: white; border-radius: 16px; padding: 24px;
-    box-shadow: 0 8px 40px rgba(0,0,0,0.2); max-width: 400px; width: 90%;
-  }
-  .tag-picker-title { font-family: 'Noto Serif SC', serif; font-size: 16px; font-weight: 600; margin-bottom: 14px; }
-  .tag-picker-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
-  .tag-pick {
-    padding: 6px 14px; border-radius: 20px; font-size: 13px;
-    border: 1.5px solid var(--border); background: white;
-    color: var(--text-mid); cursor: pointer; transition: all 0.15s;
-  }
-  .tag-pick:hover { border-color: var(--sage); }
-  .tag-pick.selected { background: var(--sage); color: white; border-color: var(--sage); }
-
-  /* Tooltip / hint */
-  .hint { font-size: 12px; color: var(--text-light); margin-top: 6px; }
-
-  .section-title {
-    font-family: 'Noto Serif SC', serif;
-    font-size: 18px; font-weight: 600; color: var(--text-dark);
-    margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
-  }
-
-  @media (max-width: 600px) {
-    .main { padding: 8px; }
-    .section { max-width: 100%; }
-    .detail-panel { padding: 12px; }
-    .recipe-grid { grid-template-columns: 1fr; }
-    #detailPanel { padding: 6px; max-width: 100vw; }
-    .ingredients-table { font-size: 12px; }
-    .ingredients-table td, .ingredients-table th { padding: 6px 4px; }
-    .oil-select { max-width: 100px; font-size: 11px; }
-    .drops-input { width: 50px; font-size: 12px; }
-    .search-input { padding: 8px 10px; font-size: 14px; }
-    .search-box { padding: 12px; }
-    .search-label { font-size: 12px; margin-bottom: 6px; }
-    .form-card { padding: 16px; }
-    .section-title { font-size: 16px; }
-    .manage-item { padding: 10px 12px; }
-    .nav-tab { padding: 10px 12px; font-size: 13px; }
-    .oil-chip { padding: 10px 12px; }
-    .oils-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
-    .app-header { padding: 20px 16px 18px; }
-    .header-title h1 { font-size: 20px; }
-  }
-</style>
-</head>
-<body>
-
-<div class="app-header" style="position:relative">
-  <div class="header-inner" style="padding-right:80px">
-    <div class="header-icon">🌿</div>
-    <div class="header-title" style="text-align:left;flex:1">
-      <h1 style="display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap">
-        <span style="flex-shrink:0">doTERRA 配方计算器 <span class="requires-admin" style="font-size:10px;font-weight:400;opacity:0.5;vertical-align:top;display:none">v2.2.0</span></span>
-        <span id="headerUserName" style="cursor:pointer;color:white;font-size:13px;font-weight:500;flex-shrink:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif;letter-spacing:0.3px;opacity:0.95" onclick="showUserMenu()"></span>
-      </h1>
-      <p style="display:flex;flex-wrap:wrap;gap:4px 8px;margin:0"><span style="white-space:nowrap">查询配方</span><span style="opacity:0.5">·</span><span style="white-space:nowrap">计算成本</span><span style="opacity:0.5">·</span><span style="white-space:nowrap">自制配方</span><span style="opacity:0.5">·</span><span style="white-space:nowrap">导出卡片</span><span style="opacity:0.5">·</span><span style="white-space:nowrap">精油知识</span></p>
-    </div>
-  </div>
-</div>
-
-<div class="nav-tabs" id="navTabs">
-  <div class="nav-tab active" onclick="_resetSearchHome()">🔍 配方查询</div>
-  <div class="nav-tab" onclick="_requireLogin()?showSection('manage'):0">📋 管理配方</div>
-  <div class="nav-tab" onclick="_requireLogin()?showSection('inventory'):0">📦 个人库存</div>
-  <div class="nav-tab" onclick="showSection('oils')">💧 精油价目</div>
-  <div class="nav-tab requires-business" onclick="showSection('projects')" style="display:none">💼 商业核算</div>
-  <div class="nav-tab requires-admin" onclick="showSection('audit')">📜 操作日志</div>
-  <div class="nav-tab requires-admin" id="bugNavTab" onclick="showSection('bugs')">🐛 Bug</div>
-  <div class="nav-tab requires-admin" onclick="showSection('users')">👥 用户管理</div>
-  <!-- 通知 tab removed — use popup from user menu -->
-</div>
-
-<div class="main" id="mainContent">
-
-  <!-- ========== SEARCH SECTION ========== -->
-  <div class="section active" id="section-search">
-    <!-- Category carousel -->
-    <style>
-      .cat-wrap { position:relative;margin:0 -24px 20px;overflow:hidden; }
-      .cat-track { display:flex;transition:transform 0.4s ease;will-change:transform; }
-      .cat-card {
-        flex:0 0 100%;min-height:200px;position:relative;overflow:hidden;cursor:pointer;
-        background-size:cover;background-position:center;
-      }
-      .cat-card::after {
-        content:'';position:absolute;inset:0;
-        background:linear-gradient(135deg,rgba(0,0,0,0.45),rgba(0,0,0,0.25));
-      }
-      .cat-inner {
-        position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
-        justify-content:center;align-items:center;padding:36px 24px;color:white;text-align:center;
-      }
-      .cat-icon { font-size:48px;margin-bottom:10px;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
-      .cat-name { font-family:'Noto Serif SC',serif;font-size:24px;font-weight:700;letter-spacing:3px;text-shadow:0 2px 8px rgba(0,0,0,0.5); }
-      .cat-sub { font-size:13px;margin-top:6px;opacity:0.9;letter-spacing:1px; }
-      .cat-arrow {
-        position:absolute;top:50%;transform:translateY(-50%);z-index:2;
-        width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.25);
-        border:none;color:white;font-size:18px;cursor:pointer;backdrop-filter:blur(4px);
-        display:flex;align-items:center;justify-content:center;transition:background 0.2s;
-      }
-      .cat-arrow:hover { background:rgba(255,255,255,0.45); }
-      .cat-arrow.left { left:12px; }
-      .cat-arrow.right { right:12px; }
-      .cat-dots { display:flex;justify-content:center;gap:8px;margin-bottom:14px; }
-      .cat-dot { width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;transition:all 0.25s; }
-      .cat-dot.active { background:var(--sage);width:22px;border-radius:4px; }
-    </style>
-    <div class="cat-wrap" id="categoryWrap" style="display:none">
-      <div class="cat-track" id="categoryTrack"></div>
-      <button class="cat-arrow left" onclick="slideCategory(-1)">‹</button>
-      <button class="cat-arrow right" onclick="slideCategory(1)">›</button>
-    </div>
-    <div class="cat-dots" id="categoryDots" style="display:none"></div>
-
-    <div class="search-box">
-      <div class="search-label">搜索配方名称或关键词</div>
-      <div class="search-row">
-        <input type="text" class="search-input" id="searchInput" placeholder="搜索配方或精油…" oninput="filterRecipes()" onkeydown="if(event.key==='Enter')confirmSearch()" style="min-width:0;flex:1">
-        <div style="display:flex;gap:4px;flex-shrink:0">
-          <button onclick="confirmSearch()" style="background:var(--sage);color:white;border:none;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:16px" title="搜索">🔍</button>
-          <button onclick="clearSearch()" style="background:none;border:1px solid var(--border);border-radius:8px;padding:8px 8px;cursor:pointer;font-size:13px;color:var(--text-light)" title="清除">✕</button>
-        </div>
-        <!-- fav filter removed, now in personal section -->
-      </div>
-    </div>
-
-    <!-- Personal recipes + favorites (logged-in only) -->
-    <div id="personalSection">
-      <!-- My recipes -->
-      <div id="myRecipesPreview" style="margin-bottom:16px"></div>
-      <!-- Favorites -->
-      <div id="myFavsPreview" style="margin-bottom:16px"></div>
-    </div>
-
-    <div id="publicLabel" style="font-size:14px;font-weight:600;color:var(--text-mid);margin-bottom:8px"></div>
-    <div id="recipeGrid" class="recipe-grid"></div>
-  </div>
-
-  <!-- ========== MY DIARY SECTION ========== -->
-  <div class="section" id="section-mydiary">
-    <div class="section-title">🙋 我的</div>
-
-    <!-- Sub-tabs: brand + account only -->
-    <div style="display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap">
-      <button class="btn btn-primary btn-sm" id="diaryTabBrand" onclick="showDiaryTab('brand')">🏷 我的品牌</button>
-      <button class="btn btn-outline btn-sm" id="diaryTabAccount" onclick="showDiaryTab('account')">👤 我的账号</button>
-    </div>
-
-    <!-- My recipes (diary) -->
-    <div id="diaryRecipesPanel">
-      <div class="form-card" style="margin-bottom:16px">
-        <div style="font-size:14px;font-weight:600;color:var(--text-mid);margin-bottom:10px">✨ 智能粘贴（添加到我的配方）</div>
-        <div class="form-group">
-          <textarea class="form-control" id="diarySmartPasteInput" rows="4" placeholder="支持多个配方，空行分隔：&#10;头疗，椒样薄荷5，生姜3，迷迭香3&#10;&#10;安睡，薰衣草15，雪松10" style="font-size:13px"></textarea>
-        </div>
-        <div style="display:flex;gap:8px">
-          <button class="btn btn-primary btn-sm" onclick="diarySmartPaste()">🪄 识别并添加</button>
-          <button class="btn btn-outline btn-sm" onclick="createNewDiary()">📝 手动新增</button>
-        </div>
-        <div id="diarySmartPasteResult" style="margin-top:10px"></div>
-      </div>
-      <div id="diaryList" class="manage-list"></div>
-    </div>
-
-    <!-- Favorites -->
-    <div id="diaryFavsPanel" style="display:none">
-      <div id="diaryFavsList" class="recipe-grid"></div>
-    </div>
-
-    <!-- Brand settings -->
-    <div id="diaryBrandPanel" style="display:none">
-      <div class="form-card" style="margin-bottom:16px">
-        <p style="font-size:13px;color:var(--text-light);margin-bottom:16px">分享配方卡片时，二维码、背景图、Logo 会自动展示在卡片上</p>
-        <div style="display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px">
-          <div>
-            <label class="form-label">📱 二维码</label>
-            <p style="font-size:11px;color:var(--text-light);margin-bottom:6px">卡片右上角展示</p>
-            <div id="qrPreview" style="width:100px;height:100px;border:2px dashed var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;background:white" onclick="document.getElementById('qrUpload').click()">
-              <span style="font-size:12px;color:var(--text-light)">点击上传</span>
-            </div>
-            <input type="file" id="qrUpload" accept="image/*" style="display:none" onchange="uploadBrandImage('qr_code', this)">
-            <button class="btn btn-outline btn-sm" onclick="clearBrandImage('qr_code')" style="margin-top:6px;font-size:11px">清除</button>
-          </div>
-          <div>
-            <label class="form-label">🖼 背景图</label>
-            <p style="font-size:11px;color:var(--text-light);margin-bottom:6px">铺满整张卡片，半透明</p>
-            <div id="bgPreview" style="width:100px;height:100px;border:2px dashed var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;background:white" onclick="document.getElementById('bgUpload').click()">
-              <span style="font-size:12px;color:var(--text-light)">点击上传</span>
-            </div>
-            <input type="file" id="bgUpload" accept="image/*" style="display:none" onchange="uploadBrandImage('brand_bg', this, 1000000)">
-            <button class="btn btn-outline btn-sm" onclick="clearBrandImage('brand_bg')" style="margin-top:6px;font-size:11px">清除</button>
-          </div>
-          <div>
-            <label class="form-label">🏷 Logo</label>
-            <p style="font-size:11px;color:var(--text-light);margin-bottom:6px">卡片底部居中水印</p>
-            <div id="logoPreview" style="width:100px;height:100px;border:2px dashed var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;background:white" onclick="document.getElementById('logoUpload').click()">
-              <span style="font-size:12px;color:var(--text-light)">点击上传</span>
-            </div>
-            <input type="file" id="logoUpload" accept="image/*" style="display:none" onchange="uploadBrandImage('brand_logo', this)">
-            <button class="btn btn-outline btn-sm" onclick="clearBrandImage('brand_logo')" style="margin-top:6px;font-size:11px">清除</button>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-label">品牌名称或标语（显示在二维码下方）</label>
-          <textarea class="form-control" id="brandNameInput" rows="2" placeholder="扫码申请成为优惠顾客&#10;我的精油小屋" style="max-width:350px;font-size:13px" onblur="_autoSaveBrand()"></textarea>
-          <div style="display:flex;gap:6px;margin-top:6px">
-            <button class="btn btn-outline btn-sm brand-align-btn" onclick="_setBrandAlign('left')" style="font-size:11px;padding:3px 10px">靠左</button>
-            <button class="btn btn-outline btn-sm brand-align-btn" onclick="_setBrandAlign('center')" style="font-size:11px;padding:3px 10px">居中</button>
-            <button class="btn btn-outline btn-sm brand-align-btn" onclick="_setBrandAlign('right')" style="font-size:11px;padding:3px 10px">靠右</button>
-          </div>
-        </div>
-
-        <!-- Card Preview -->
-        <div style="margin-bottom:16px">
-          <label class="form-label">📋 配方卡片预览</label>
-          <div id="brandCardPreview" style="position:relative;width:280px;height:180px;background:linear-gradient(145deg,#faf7f0,#f5ede0);border-radius:14px;border:1px solid #e0ccaa;overflow:hidden;font-family:'Noto Serif SC',serif;padding:16px">
-            <div style="font-size:8px;letter-spacing:2px;color:var(--sage);margin-bottom:4px">doTERRA · RECIPE CARD</div>
-            <div style="font-size:14px;font-weight:700;color:var(--text-dark)">配方名称</div>
-            <div style="font-size:10px;color:var(--text-light);margin-top:2px">薰衣草 · 乳香 · 茶树</div>
-            <div style="position:absolute;bottom:12px;left:16px;right:16px;height:24px;background:linear-gradient(135deg,var(--sage),#5a7d5e);border-radius:6px;display:flex;align-items:center;justify-content:center">
-              <span style="color:white;font-size:10px">💰 ¥12.50</span>
-            </div>
-          </div>
-        </div>
-
-        <div style="display:flex;gap:8px;align-items:center">
-          <button class="btn btn-primary" onclick="saveBrand()">💾 保存品牌设置</button>
-          <span id="returnToCardBtn"></span>
-        </div>
-        <div id="brandSaveResult" style="margin-top:10px"></div>
-      </div>
-    </div>
-
-    <!-- Account settings -->
-    <div id="diaryAccountPanel" style="display:none">
-      <div class="form-card" style="margin-bottom:16px">
-        <!-- Display name -->
-        <div class="form-group">
-          <label class="form-label">昵称（显示给其他人看）</label>
-          <div style="display:flex;gap:8px;align-items:center">
-            <input type="text" class="form-control" id="myDisplayName" placeholder="你的昵称" style="flex:1;max-width:200px;padding:8px 12px;font-size:14px">
-            <button class="btn btn-primary btn-sm" onclick="saveMyProfile('display_name')">保存</button>
-          </div>
-        </div>
-        <!-- Username -->
-        <div class="form-group">
-          <label class="form-label">用户名（用于登录，唯一）</label>
-          <div style="display:flex;gap:8px;align-items:center">
-            <input type="text" class="form-control" id="myUsername" placeholder="登录用户名" style="flex:1;max-width:200px;padding:8px 12px;font-size:14px">
-            <button class="btn btn-primary btn-sm" onclick="saveMyProfile('username')">保存</button>
-          </div>
-        </div>
-        <!-- Password -->
-        <div class="form-group" style="margin-bottom:0">
-          <label class="form-label">🔑 修改登录密码</label>
-          <div style="display:flex;flex-direction:column;gap:8px;max-width:240px">
-            <input type="password" class="form-control" id="myOldPassword" placeholder="当前密码" style="padding:8px 12px;font-size:14px">
-            <input type="password" class="form-control" id="myNewPassword" placeholder="新密码（至少4位）" style="padding:8px 12px;font-size:14px">
-            <input type="password" class="form-control" id="myNewPassword2" placeholder="确认新密码" style="padding:8px 12px;font-size:14px">
-            <button class="btn btn-primary btn-sm" onclick="saveMyProfile('password')" style="align-self:flex-start">修改密码</button>
-          </div>
-        </div>
-        <div id="accountResult" style="margin-top:10px"></div>
-      </div>
-
-      <!-- Business verification -->
-      <div class="form-card" style="margin-top:16px" id="businessApplyCard">
-        <div style="font-size:14px;font-weight:600;color:var(--text-mid);margin-bottom:8px">🏢 商业用户认证</div>
-        <div id="businessApplyContent"></div>
-      </div>
-    </div>
-
-    <!-- Diary detail (shows when clicking a diary recipe) -->
-    <div id="diaryDetailPanel" style="display:none;margin-top:16px">
-      <div class="detail-panel">
-        <div class="detail-header">
-          <div>
-            <div class="detail-title" id="diaryDetailTitle"></div>
-          </div>
-          <div class="detail-actions">
-            <button class="btn btn-primary btn-sm" onclick="saveDiaryAll()" style="font-size:12px">💾 保存</button>
-            <button class="btn btn-outline btn-sm" onclick="previewDiaryCard()" style="font-size:12px">📷 配方卡片</button>
-            <button class="btn btn-outline btn-sm" onclick="publishDiary()" style="font-size:11px;color:var(--text-light)">📤 共享到公共库</button>
-            <button class="btn btn-outline btn-sm" onclick="closeDiaryDetail()" style="font-size:12px">← 返回</button>
-          </div>
-        </div>
-        <!-- Ingredients (read-only list) -->
-        <div id="diaryIngredients" style="margin-bottom:16px"></div>
-        <!-- Note -->
-        <div style="margin-bottom:16px">
-          <div style="font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:6px">📝 我的备注</div>
-          <textarea id="diaryNoteEdit" class="form-control" rows="2" placeholder="写点备注…" style="font-size:13px" onchange="saveDiaryNote()"></textarea>
-        </div>
-        <!-- Diary entries -->
-        <div style="font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:8px">📖 使用日记</div>
-        <div style="display:flex;gap:8px;margin-bottom:12px">
-          <textarea id="newDiaryEntry" class="form-control" rows="2" placeholder="记录今天的使用感受…" style="flex:1;font-size:13px"></textarea>
-          <button class="btn btn-primary btn-sm" onclick="addDiaryEntry()" style="align-self:flex-end">记录</button>
-        </div>
-        <div id="diaryEntries"></div>
-      </div>
-    </div>
-  </div>
-
-  <!-- ========== INVENTORY SECTION ========== -->
-  <div class="section" id="section-inventory">
-    <div class="section-title">📦 我的精油库存</div>
-    <div class="search-box" style="margin-bottom:16px">
-      <div class="search-label">添加精油到库存（点击下方精油即可添加）</div>
-      <div style="display:flex;gap:8px;align-items:center;margin-top:8px">
-        <input type="text" class="search-input" id="invSearchInput" placeholder="搜索精油名称…" oninput="renderInventoryOilPicker()" style="flex:1">
-      </div>
-      <div id="invOilPicker" style="display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;max-height:200px;overflow-y:auto"></div>
-    </div>
-    <div class="section-title" style="font-size:16px">已有精油 <span id="invCount" style="font-size:13px;font-weight:400;color:var(--text-light)"></span></div>
-    <div id="invList" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px"></div>
-    <div class="section-title" style="font-size:16px;margin-top:24px">可做的配方</div>
-    <div id="invRecipes" class="manage-list"></div>
-  </div>
-
-  <!-- ========== PROJECTS SECTION ========== -->
-  <div class="section" id="section-projects">
-    <div class="section-title">💼 商业核算</div>
-    <p style="font-size:13px;color:var(--text-light);margin-bottom:20px">商业用户专属功能，包含项目核算、成本分析等工具</p>
-
-    <!-- Sub-section: 项目核算 -->
-    <div class="form-card" style="margin-bottom:16px">
-      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
-        <span style="font-size:15px;font-weight:600;color:var(--text-dark)">📊 服务项目成本利润分析</span>
-        <button class="btn btn-primary btn-sm" onclick="createProject()">＋ 新增项目</button>
-      </div>
-
-    <!-- Project list -->
-    <div id="projectList" class="manage-list"></div>
-
-    <!-- Project detail -->
-    <div id="projectDetail" style="display:none;margin-top:16px">
-      <div class="detail-panel">
-        <div class="detail-header">
-          <div class="detail-title" id="projTitle"></div>
-          <div class="detail-actions">
-            <button class="btn btn-outline btn-sm" onclick="loadFromRecipe()">从配方导入</button>
-            <button class="btn btn-primary btn-sm" onclick="saveProject()" style="background:var(--sage-dark)">💾 保存</button>
-            <button class="btn btn-outline btn-sm" onclick="closeProjectDetail()">← 返回</button>
-          </div>
-        </div>
-
-        <!-- Ingredients editor -->
-        <table class="ingredients-table">
-          <thead><tr><th>精油</th><th>单次用量(滴)</th><th>瓶装容量</th><th>单价/滴</th><th></th></tr></thead>
-          <tbody id="projIngBody"></tbody>
-        </table>
-        <button class="btn btn-outline btn-sm" onclick="addProjIng()" style="margin-top:8px">＋ 添加精油</button>
-
-        <!-- Analysis results -->
-        <div id="projAnalysis" style="margin-top:20px"></div>
-
-        <!-- Pricing -->
-        <div style="background:var(--cream);border-radius:12px;padding:16px 20px;margin-top:16px">
-          <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap">
-            <div style="display:flex;align-items:center;gap:6px">
-              <span style="font-size:14px;font-weight:600;color:var(--text-mid)">定价 ¥</span>
-              <input type="number" id="projPricing" class="drops-input" style="width:100px;font-size:16px" min="0" step="1" value="0" oninput="calcProjectProfit()">
-              <span style="font-size:13px;color:var(--text-light)">/次</span>
-            </div>
-            <div id="projProfit" style="font-size:16px;font-weight:700;color:var(--sage-dark)"></div>
-          </div>
-          <div id="projProfitDetail" style="font-size:13px;color:var(--text-mid);margin-top:8px"></div>
-        </div>
-
-        <!-- Note -->
-        <div style="margin-top:16px">
-          <textarea id="projNote" class="form-control" rows="2" placeholder="项目备注…" style="font-size:13px"></textarea>
-        </div>
-      </div>
-    </div>
-    </div><!-- /form-card 项目核算 -->
-
-    <!-- Future business features go here -->
-
-  </div>
-
-  <!-- ========== NOTIFICATIONS SECTION (admin) ========== -->
-  <div class="section requires-notif" id="section-notif">
-    <div class="section-title" style="justify-content:space-between;flex-wrap:wrap">
-      <span>🔔 通知 <button class="btn btn-outline btn-sm" onclick="triggerWeeklyReview()" style="margin-left:12px">手动生成周报</button></span>
-      <button class="btn btn-outline btn-sm" onclick="markAllNotifRead()" style="font-size:12px">✓ 全部已读</button>
-    </div>
-    <div id="notifList" class="manage-list"></div>
-  </div>
-
-  <!-- Detail overlay (appears over the grid) -->
-  <div id="detailOverlay" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:100" onclick="if(event.target===this)closeDetail()">
-    <div style="position:absolute;inset:0;background:rgba(0,0,0,0.25)" onclick="closeDetail()"></div>
-    <div id="detailPanel" style="position:relative;z-index:101;max-width:600px;margin:0 auto;padding:12px;max-height:100vh;overflow-y:auto" onclick="event.stopPropagation()">
-      <!-- Card view (default for everyone) -->
-      <div id="cardViewMode" style="display:none">
-        <div class="detail-panel" style="padding:16px;position:relative">
-          <div style="position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:2">
-            <button id="cardBackToEditBtn" onclick="switchToEditorView()" style="display:none;background:rgba(0,0,0,0.06);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;color:var(--text-light)" title="返回编辑">↩</button>
-            <button onclick="closeDetail()" style="background:rgba(0,0,0,0.06);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;color:var(--text-light)" title="关闭">✕</button>
-          </div>
-          <div id="cardViewActions" style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px"></div>
-          <div id="cardViewContainer"></div>
-        </div>
-      </div>
-      <!-- Editor view -->
-      <div id="editorViewMode" style="display:none">
-      <div class="detail-panel" style="max-width:100%;overflow-x:hidden">
-        <div class="detail-header" style="flex-wrap:wrap;gap:8px">
-          <div style="flex:1;min-width:0">
-            <div class="detail-title" id="detailTitle"></div>
-            <div id="detailNote"></div>
-          </div>
-          <div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">
-            <button class="btn btn-primary btn-sm" onclick="saveAndShowCard()" style="background:var(--sage-dark);font-size:12px">💾 保存</button>
-            <button class="btn btn-outline btn-sm" onclick="_cardViewFromEditor=true;switchToCardView()" style="font-size:12px">👁 预览</button>
-            <button onclick="closeDetail()" style="background:rgba(0,0,0,0.06);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;color:var(--text-light)">✕</button>
-          </div>
-        </div>
-
-        <!-- Tip -->
-        <div style="font-size:11px;color:var(--text-light);margin-bottom:10px;line-height:1.5">💡 推荐按照单次用量（椰子油10~20滴）添加纯精油，然后点击下方「容量与稀释」自动生成相应配方</div>
-
-        <table class="ingredients-table">
-          <thead>
-            <tr>
-              <th>精油</th>
-              <th>滴数</th>
-              <th>单价/滴</th>
-              <th>小计</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody id="ingredientsBody"></tbody>
-        </table>
-
-        <div class="add-ingredient-row" id="addIngRow" style="display:none;background:var(--sage-mist);border:1.5px dashed var(--sage);border-radius:10px;padding:10px 12px;margin-top:6px">
-          <select id="newOilSelect" class="form-control" style="max-width:180px;font-size:13px">
-            <option value="">— 选择精油 —</option>
-          </select>
-          <input type="number" id="newOilDrops" placeholder="滴数" style="width:80px;font-size:13px" class="form-control" min="0.5" step="0.5">
-          <button class="btn btn-primary btn-sm" onclick="confirmAddIngredient()" style="font-size:12px">确认</button>
-          <button class="btn btn-outline btn-sm" onclick="hideAddRow()" style="font-size:12px">取消</button>
-        </div>
-        <button class="btn btn-outline btn-sm" onclick="addIngredientRow()" style="font-size:12px;margin-top:6px;width:100%;border-style:dashed">＋ 添加精油</button>
-
-        <!-- Volume & dilution ratio -->
-        <div style="background:var(--cream);border-radius:12px;padding:16px 20px;margin-top:16px;border:1px solid var(--border)">
-          <!-- Line 1: Volume -->
-          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px">
-            <span style="font-size:13px;font-weight:600;color:var(--text-mid)">容量：</span>
-            <button class="btn btn-primary btn-sm vol-btn" onclick="selectVolume('single')" data-vol="single" style="font-size:12px">单次</button>
-            <button class="btn btn-outline btn-sm vol-btn" onclick="selectVolume('5ml')" data-vol="5ml" style="font-size:12px">5ml</button>
-            <button class="btn btn-outline btn-sm vol-btn" onclick="selectVolume('10ml')" data-vol="10ml" style="font-size:12px">10ml</button>
-            <button class="btn btn-outline btn-sm vol-btn" onclick="selectVolume('30ml')" data-vol="30ml" style="font-size:12px">30ml</button>
-            <button class="btn btn-outline btn-sm vol-btn" onclick="selectVolume('custom')" data-vol="custom" style="font-size:12px">自定义</button>
-            <input type="number" id="customVolInput" class="drops-input" style="width:60px;font-size:12px" value="20" min="1" step="1" onchange="onCustomVolChange()">
-            <select id="customVolUnit" class="form-control" style="width:60px;padding:5px 6px;font-size:12px" onchange="onCustomVolChange()">
-              <option value="drops" selected>滴</option>
-              <option value="ml">ml</option>
-            </select>
-          </div>
-          <!-- Line 2: Ratio -->
-          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px">
-            <span style="font-size:13px;font-weight:600;color:var(--text-mid)">稀释比例：1:</span>
-            <select id="dilutionRatio" class="form-control" style="width:60px;padding:5px 6px;font-size:13px;background:var(--sage-mist);border-color:var(--sage);color:var(--sage-dark);font-weight:600" onchange="onDilutionChange()">
-              <option value="1">1</option><option value="2">2</option><option value="3">3</option>
-              <option value="4">4</option><option value="5">5</option><option value="6">6</option>
-              <option value="7">7</option><option value="8">8</option><option value="9">9</option>
-              <option value="10" selected>10</option><option value="15">15</option><option value="20">20</option>
-            </select>
-            <button class="btn btn-primary btn-sm" onclick="applyVolume()" style="font-size:12px">应用到配方</button>
-          </div>
-          <div style="font-size:10px;color:var(--text-light);margin-bottom:6px">5ml = 100滴 · 10ml = 200滴 · 30ml = 600滴</div>
-          <!-- Line 3: Current status -->
-          <div id="dilutionHint" style="font-size:13px;color:var(--sage-dark);font-weight:500"></div>
-          <!-- Notes -->
-          <div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--border)">
-            <div style="font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:6px">📝 备注</div>
-            <textarea id="detailNoteEdit" class="form-control" rows="2" placeholder="添加备注…" style="font-size:13px" onchange="onNoteChange()"></textarea>
-          </div>
-        </div>
-
-        <!-- Tags -->
-        <div style="margin-top:12px">
-          <div style="font-size:13px;font-weight:600;color:var(--text-mid);margin-bottom:6px">🏷 标签</div>
-          <div id="editorTags" style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px"></div>
-          <div id="editorCandidateTags" style="display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px"></div>
-          <div style="display:flex;gap:6px;align-items:center">
-            <input type="text" id="editorNewTag" class="form-control" placeholder="添加标签…" style="width:120px;padding:5px 10px;font-size:12px" onkeydown="if(event.key==='Enter'){addEditorTag();event.preventDefault()}">
-            <button class="btn btn-outline btn-sm" onclick="addEditorTag()" style="font-size:11px">+ 添加</button>
-          </div>
-        </div>
-
-        <div class="total-row">
-          <div class="total-label">配方总成本</div>
-          <div class="total-price" id="totalPrice">¥ 0.00</div>
-        </div>
-      </div>
-
-      <!-- Card preview removed — use 👁 预览 button instead -->
-    </div>
-    </div><!-- /editorViewMode -->
-  </div><!-- /detailPanel -->
-  </div><!-- /detailOverlay -->
-
-  <!-- ========== MANAGE SECTION ========== -->
-  <div class="section" id="section-manage">
-    <!-- Review bar (admin only) -->
-    <div id="reviewBar" class="search-box requires-admin" style="margin-bottom:16px;display:none">
-      <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px">
-        <div>
-          <span style="font-size:14px;font-weight:600;color:var(--sage-dark)">📥 待审核</span>
-          <span id="reviewCount" style="font-size:13px;color:var(--text-light);margin-left:6px"></span>
-        </div>
-        <div style="display:flex;gap:8px">
-          <button class="btn btn-outline btn-sm" onclick="filterByReview()">筛选待审核</button>
-          <button class="btn btn-primary btn-sm" onclick="adoptSelected()">✅ 批量采纳选中</button>
-          <button class="btn btn-gold btn-sm" onclick="adoptAll()">✅ 全部采纳</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Bug #96: Manage search box -->
-    <div style="margin-bottom:8px">
-      <input id="manageSearchInput" type="text" placeholder="🔍 搜索配方名称..." oninput="_manageSearchQuery=this.value.trim().toLowerCase();renderManage()" style="width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;outline:none;box-sizing:border-box" onfocus="this.style.borderColor='var(--sage)'" onblur="this.style.borderColor='var(--border)'">
-    </div>
-
-    <!-- Recipe list header -->
-    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:4px">
-      <span style="font-size:15px;font-weight:600;color:var(--text-dark)">📋 配方列表 <span id="manageFilterLabel" style="font-size:13px;font-weight:400;color:var(--text-light)"></span></span>
-      <div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">
-        <button class="btn btn-primary btn-sm" onclick="showAddRecipeOverlay()">＋ 新增</button>
-        <button class="btn btn-outline btn-sm" id="selectAllBtn" onclick="toggleSelectAll()">全选/取消</button>
-        <button class="btn btn-outline btn-sm" id="tagFilterToggleBtn" onclick="_toggleTagFilter()">🏷 标签筛选</button>
-        <div style="position:relative;display:inline-block">
-          <button class="btn btn-outline btn-sm" onclick="var m=this.nextElementSibling;m.style.display=m.style.display==='none'?'':'none'">📋 批量操作 ▾</button>
-          <div style="display:none;position:absolute;right:0;top:100%;margin-top:4px;background:white;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,0.15);z-index:50;min-width:160px;overflow:hidden">
-            <div onclick="this.parentElement.style.display='none';batchAddTag()" style="padding:10px 14px;cursor:pointer;font-size:13px;border-bottom:1px solid #f0f0f0" onmouseover="this.style.background='var(--sage-mist)'" onmouseout="this.style.background=''">🏷 批量打标签</div>
-            <div onclick="this.parentElement.style.display='none';batchShareToPublic()" style="padding:10px 14px;cursor:pointer;font-size:13px;border-bottom:1px solid #f0f0f0" onmouseover="this.style.background='var(--sage-mist)'" onmouseout="this.style.background=''">📤 批量分享到公共库</div>
-            <div onclick="this.parentElement.style.display='none';batchExportCards()" style="padding:10px 14px;cursor:pointer;font-size:13px;border-bottom:1px solid #f0f0f0" onmouseover="this.style.background='var(--sage-mist)'" onmouseout="this.style.background=''">🖼 批量导出卡片</div>
-            <div onclick="this.parentElement.style.display='none';batchDelete()" style="padding:10px 14px;cursor:pointer;font-size:13px;color:#c0392b" onmouseover="this.style.background='#fdf0ee'" onmouseout="this.style.background=''">🗑 批量删除</div>
-          </div>
-        </div>
-        <button class="btn btn-gold btn-sm" onclick="exportExcel()">📥 导出 Excel</button>
-      </div>
-    </div>
-    <!-- Tag filter (hidden by default, toggled by button) -->
-    <div id="tagBar" style="display:none;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:10px;padding:8px 0"></div>
-    <!-- Hidden input for new tag (used inside tag editing) -->
-    <input type="text" id="newTagInput" style="display:none">
-    <div id="manageList" class="manage-list"></div>
-  </div>
-
-  <!-- ========== ADD SECTION ========== -->
-  <div class="section" id="section-add">
-    <div class="form-card">
-      <div class="form-title">✨ 智能粘贴</div>
-      <div class="form-group">
-        <label class="form-label">粘贴一个或多个配方，支持多行输入，空行分隔不同配方</label>
-        <textarea class="form-control" id="smartPasteInput" rows="6" placeholder="例：&#10;长高&#10;芳香调理8，永久花10，檀香10，乳香15&#10;&#10;助眠&#10;薰衣草15，雪松10，丝柏5"></textarea>
-        <div class="hint">支持逗号、顿号、换行分隔，也支持连写。空行或「配方名：」开头自动分隔为多个配方。系统会逐个让你校准后再保存。</div>
-      </div>
-      <div style="display:flex; gap:12px;">
-        <button class="btn btn-primary" onclick="smartPaste()">🪄 识别并生成</button>
-        <button class="btn btn-outline" onclick="document.getElementById('smartPasteInput').value=''">清除</button>
-      </div>
-      <div id="smartPasteResult" style="margin-top:12px"></div>
-    </div>
-
-    <div class="form-card">
-      <div class="form-title">➕ 手动新增配方</div>
-      <div class="form-group">
-        <label class="form-label">配方名称 *</label>
-        <input type="text" class="form-control" id="newRecipeName" placeholder="如：淡斑精华、改善睡眠…">
-      </div>
-      <div class="form-group">
-        <label class="form-label">备注说明（可选）</label>
-        <input type="text" class="form-control" id="newRecipeNote" placeholder="如：适合晚间使用，有艾草时可加入">
-      </div>
-      <div class="form-group">
-        <label class="form-label">精油成分 *</label>
-        <div class="new-ing-list" id="newIngList"></div>
-        <button class="btn btn-outline btn-sm" onclick="addNewIngRow()">＋ 添加精油</button>
-      </div>
-      <div style="margin-top: 24px; display:flex; gap:12px;">
-        <button class="btn btn-primary" onclick="saveNewRecipe()">💾 保存配方</button>
-        <button class="btn btn-outline" onclick="clearNewForm()">重置</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- ========== OILS SECTION ========== -->
-  <div class="section" id="section-oils">
-    <div class="section-title">💧 精油价目表 <span style="font-size:14px;font-weight:400;color:var(--text-light)">共 <span id="oilCount"></span> 种精油</span></div>
-    <!-- Quick knowledge cards -->
-    <div style="display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap">
-      <div onclick="showDilutionCard()" style="flex:1;min-width:140px;background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border-radius:14px;padding:16px;cursor:pointer;transition:transform 0.2s" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
-        <div style="font-size:24px;margin-bottom:6px">💧</div>
-        <div style="font-size:14px;font-weight:600;color:#2e7d32">稀释比例</div>
-        <div style="font-size:11px;color:#558b2f;margin-top:4px">不同年龄段的稀释指南</div>
-      </div>
-      <div onclick="showCautionCard()" style="flex:1;min-width:140px;background:linear-gradient(135deg,#fff8e1,#ffecb3);border-radius:14px;padding:16px;cursor:pointer;transition:transform 0.2s" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">
-        <div style="font-size:24px;margin-bottom:6px">⚠️</div>
-        <div style="font-size:14px;font-weight:600;color:#f57f17">使用禁忌</div>
-        <div style="font-size:11px;color:#ff8f00;margin-top:4px">安全使用精油的注意事项</div>
-      </div>
-    </div>
-    <div class="add-oil-form requires-oil-edit">
-      <input type="text" id="newOilName" placeholder="精油名称" style="flex:1;min-width:120px">
-      <input type="number" id="newOilBottlePrice" placeholder="一瓶价格 (¥)" style="width:130px" step="0.01" min="0">
-      <select id="newOilVolume" class="form-control" style="width:110px" onchange="onVolumeChange('new')">
-        <option value="">容量</option>
-        <option value="2.5">2.5ml (46滴)</option>
-        <option value="5">5ml (93滴)</option>
-        <option value="10">10ml (186滴)</option>
-        <option value="15">15ml (280滴)</option>
-        <option value="115">115ml (2146滴)</option>
-        <option value="custom">自定义滴数</option>
-      </select>
-      <input type="number" id="newOilDropCount" placeholder="总滴数" style="width:90px;display:none" step="1" min="1">
-      <button class="btn btn-primary btn-sm" onclick="addNewOil()">➕ 添加精油</button>
-    </div>
-    <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap">
-      <div class="search-box oils-search" style="flex:1;min-width:180px;margin-bottom:0">
-        <input type="text" class="search-input" id="oilSearchInput" placeholder="搜索精油名称…" oninput="filterOils()" style="width:100%">
-      </div>
-      <div style="display:flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;flex-shrink:0">
-        <button id="oilViewBottle" class="btn btn-sm" onclick="_setOilView('bottle')" style="border:none;border-radius:0;font-size:12px;padding:6px 12px;background:var(--sage);color:white">单瓶价</button>
-        <button id="oilViewDrop" class="btn btn-sm" onclick="_setOilView('drop')" style="border:none;border-radius:0;font-size:12px;padding:6px 12px;background:white;color:var(--text-mid)">每滴价</button>
-      </div>
-      <button class="btn btn-gold btn-sm requires-admin" onclick="exportOilsPDF()" style="display:none;font-size:12px">📥 导出PDF</button>
-    </div>
-    <div id="oilsGrid" class="oils-grid"></div>
-  </div>
-
-  <!-- ========== AUDIT LOG SECTION (admin) ========== -->
-  <div class="section requires-admin" id="section-audit">
-    <div class="section-title">📜 操作日志</div>
-    <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px">
-      <button class="btn btn-primary btn-sm audit-filter-btn" data-filter="" onclick="filterAuditLog('')">全部</button>
-      <button class="btn btn-outline btn-sm audit-filter-btn" data-filter="create_recipe" onclick="filterAuditLog('create_recipe')">新增配方</button>
-      <button class="btn btn-outline btn-sm audit-filter-btn" data-filter="update_recipe" onclick="filterAuditLog('update_recipe')">修改配方</button>
-      <button class="btn btn-outline btn-sm audit-filter-btn" data-filter="delete_recipe" onclick="filterAuditLog('delete_recipe')">删除配方</button>
-      <button class="btn btn-outline btn-sm audit-filter-btn" data-filter="adopt_recipe" onclick="filterAuditLog('adopt_recipe')">采纳配方</button>
-      <button class="btn btn-outline btn-sm audit-filter-btn" data-filter="upsert_oil" onclick="filterAuditLog('upsert_oil')">精油变动</button>
-      <button class="btn btn-outline btn-sm audit-filter-btn" data-filter="user" onclick="filterAuditLog('user')">用户管理</button>
-    </div>
-    <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center">
-      <span style="font-size:12px;color:var(--text-light)">按用户：</span>
-      <div id="auditUserFilters" style="display:flex;gap:6px;flex-wrap:wrap"></div>
-    </div>
-    <div id="auditList" class="manage-list"></div>
-    <div style="text-align:center;margin-top:16px">
-      <button class="btn btn-outline btn-sm" onclick="loadMoreAudit()">加载更多</button>
-    </div>
-  </div>
-
-  <!-- ========== USER MANAGEMENT SECTION (admin) ========== -->
-  <!-- ========== BUG TRACKER ========== -->
-  <div class="section requires-admin" id="section-bugs">
-    <div class="section-title" style="justify-content:space-between;flex-wrap:wrap">
-      <span>🐛 Bug 追踪</span>
-      <button class="btn btn-primary btn-sm" onclick="addNewBug()">＋ 新增 Bug</button>
-    </div>
-    <div id="bugListActive" class="manage-list" style="margin-bottom:24px"></div>
-    <div id="bugListResolved"></div>
-  </div>
-
-  <div class="section requires-admin" id="section-users">
-    <div class="section-title">👥 用户管理</div>
-    <!-- Business applications -->
-    <!-- Translation suggestions -->
-    <div id="translationSection" class="form-card" style="margin-bottom:16px;display:none">
-      <div style="font-size:14px;font-weight:600;color:var(--text-mid);margin-bottom:8px">📝 翻译建议审核</div>
-      <div id="translationList"></div>
-    </div>
-    <div id="bizApprovalSection" class="form-card" style="margin-bottom:16px;display:none">
-      <div style="font-size:14px;font-weight:600;color:var(--text-mid);margin-bottom:8px">🏢 商业认证审批</div>
-      <div id="bizApprovalList"></div>
-    </div>
-    <div class="form-card" style="margin-bottom:16px">
-      <div style="font-size:14px;font-weight:600;color:var(--text-mid);margin-bottom:8px">新增用户</div>
-      <div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">
-        <input type="text" class="form-control" id="newUserName" placeholder="用户名" style="width:100px;padding:6px 10px;font-size:13px">
-        <input type="text" class="form-control" id="newUserDisplayName" placeholder="显示名" style="width:100px;padding:6px 10px;font-size:13px">
-        <select class="form-control" id="newUserRole" style="width:100px;padding:6px 8px;font-size:13px">
-          <option value="viewer">查看者</option>
-          <option value="editor">编辑者</option>
-          <option value="senior_editor">高级编辑者</option>
-          <option value="admin">管理员</option>
-        </select>
-        <button class="btn btn-primary btn-sm" onclick="createUser()">创建</button>
-      </div>
-      <div id="newUserResult" style="margin-top:10px"></div>
-    </div>
-    <div style="display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center">
-      <input type="text" class="form-control" id="userSearchInput" placeholder="搜索用户…" oninput="renderUsers()" style="flex:1;min-width:120px;max-width:200px;padding:6px 10px;font-size:13px">
-      <select class="form-control" id="userRoleFilter" onchange="renderUsers()" style="width:100px;padding:6px 8px;font-size:12px">
-        <option value="">全部</option>
-        <option value="admin">管理员</option>
-        <option value="senior_editor">高级编辑者</option>
-        <option value="editor">编辑者</option>
-        <option value="viewer">查看者</option>
-        <option value="business">🏢 企业客户</option>
-      </select>
-    </div>
-    <div id="usersList" class="manage-list"></div>
-  </div>
-
-</div>
-
-<script>
-// ============ CUSTOM DIALOGS (replace native alert/confirm/prompt) ============
-(function() {
-  const _dlgStyle = 'position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;padding:20px';
-  const _boxStyle = 'background:white;border-radius:16px;padding:28px 24px 20px;max-width:340px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,0.2);font-family:inherit';
-  const _msgStyle = 'font-size:14px;color:#333;line-height:1.6;white-space:pre-line;word-break:break-word;margin-bottom:20px;text-align:center';
-  const _btnRow = 'display:flex;gap:10px;justify-content:center';
-  const _btnPrimary = 'flex:1;max-width:140px;padding:10px 0;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;background:linear-gradient(135deg,#7a9e7e,#5a7d5e);color:white';
-  const _btnOutline = 'flex:1;max-width:140px;padding:10px 0;border:1.5px solid #d4cfc7;border-radius:10px;font-size:14px;cursor:pointer;background:white;color:#666';
-
-  function _createOverlay() {
-    const o = document.createElement('div');
-    o.style.cssText = _dlgStyle;
-    return o;
-  }
-
-  window._nativeAlert = window.alert;
-  window.alert = function(msg) {
-    return new Promise(resolve => {
-      const o = _createOverlay();
-      o.innerHTML = '<div style="' + _boxStyle + '">' +
-        '<div style="' + _msgStyle + '">' + String(msg || '').replace(/</g,'&lt;') + '</div>' +
-        '<div style="' + _btnRow + '"><button id="_dlgOk" style="' + _btnPrimary + '">确定</button></div></div>';
-      document.body.appendChild(o);
-      o.querySelector('#_dlgOk').focus();
-      o.querySelector('#_dlgOk').onclick = () => { o.remove(); resolve(); };
-    });
-  };
-
-  window._nativeConfirm = window.confirm;
-  window.confirm = function(msg) {
-    // Must be synchronous for existing code — use native but can't avoid URL
-    // So we build a BLOCKING approach with a sync loop... not possible in JS
-    // Best approach: keep it native but wrap in custom UI via a trick
-    // Actually: we replace with a custom modal and return a value synchronously
-    // by using a blocking technique (not possible without freezing)
-    //
-    // Practical solution: use native confirm but we'll migrate critical ones.
-    // For now, override to show our custom dialog for the MOST COMMON case.
-    //
-    // Since JS doesn't support sync custom UI, we use the approach of
-    // making all confirm calls use _confirm() which returns a Promise.
-    // We keep window.confirm as native fallback for inline onclick handlers.
-    return window._nativeConfirm(msg);
-  };
-
-  // Async versions for use in our code
-  window._confirm = function(msg) {
-    return new Promise(resolve => {
-      const o = _createOverlay();
-      o.innerHTML = '<div style="' + _boxStyle + '">' +
-        '<div style="' + _msgStyle + '">' + String(msg || '').replace(/</g,'&lt;') + '</div>' +
-        '<div style="' + _btnRow + '">' +
-          '<button id="_dlgCancel" style="' + _btnOutline + '">取消</button>' +
-          '<button id="_dlgOk" style="' + _btnPrimary + '">确定</button>' +
-        '</div></div>';
-      document.body.appendChild(o);
-      o.querySelector('#_dlgOk').focus();
-      o.querySelector('#_dlgOk').onclick = () => { o.remove(); resolve(true); };
-      o.querySelector('#_dlgCancel').onclick = () => { o.remove(); resolve(false); };
-    });
-  };
-
-  window._prompt = function(msg, defaultVal) {
-    return new Promise(resolve => {
-      const o = _createOverlay();
-      o.innerHTML = '<div style="' + _boxStyle + '">' +
-        '<div style="' + _msgStyle + '">' + String(msg || '').replace(/</g,'&lt;') + '</div>' +
-        '<input id="_dlgInput" type="text" value="' + (defaultVal || '').replace(/"/g,'&quot;') + '" style="width:100%;padding:10px 14px;border:1.5px solid #d4cfc7;border-radius:10px;font-size:14px;margin-bottom:16px;outline:none;font-family:inherit;box-sizing:border-box">' +
-        '<div style="' + _btnRow + '">' +
-          '<button id="_dlgCancel" style="' + _btnOutline + '">取消</button>' +
-          '<button id="_dlgOk" style="' + _btnPrimary + '">确定</button>' +
-        '</div></div>';
-      document.body.appendChild(o);
-      const inp = o.querySelector('#_dlgInput');
-      inp.focus();
-      inp.select();
-      inp.onkeydown = e => { if (e.key === 'Enter') { o.remove(); resolve(inp.value); } };
-      o.querySelector('#_dlgOk').onclick = () => { o.remove(); resolve(inp.value); };
-      o.querySelector('#_dlgCancel').onclick = () => { o.remove(); resolve(null); };
-    });
-  };
-})();
-
-// ============ DATA SAFETY & AUTO-REFRESH ============
-// 1. Offline detection + pending write queue
-let _isOnline = navigator.onLine;
-const _pendingWrites = [];
-
-function _updatePendingBanner() {
-  // Restore from localStorage to check
-  let count = _pendingWrites.length;
-  try { const saved = JSON.parse(localStorage.getItem('oil_pending_writes') || '[]'); count = Math.max(count, saved.length); } catch(e) {}
-  const existing = document.getElementById('pendingBanner');
-  if (count > 0) {
-    if (!existing) {
-      const b = document.createElement('div');
-      b.id = 'pendingBanner';
-      b.style.cssText = 'position:fixed;bottom:0;left:0;right:0;background:#e65100;color:white;text-align:center;padding:8px 16px;font-size:13px;z-index:9998;display:flex;justify-content:center;align-items:center;gap:10px';
-      document.body.appendChild(b);
-    }
-    const banner = document.getElementById('pendingBanner');
-    banner.innerHTML = _isOnline
-      ? '⏳ 有 ' + count + ' 条数据正在重新发送...'
-      : '⚠️ 网络断开，' + count + ' 条数据等待发送 · 请勿清除浏览器数据';
-  } else if (existing) {
-    existing.remove();
-  }
-}
-
-window.addEventListener('online', () => {
-  _isOnline = true;
-  _updatePendingBanner();
-  _flushPendingWrites();
-});
-window.addEventListener('offline', () => {
-  _isOnline = false;
-  _updatePendingBanner();
-});
-
-// Check pending queue on page load
-setTimeout(_updatePendingBanner, 1000);
-
-async function _flushPendingWrites() {
-  // Also restore from localStorage
-  try {
-    const saved = JSON.parse(localStorage.getItem('oil_pending_writes') || '[]');
-    saved.forEach(w => { if (!_pendingWrites.find(p => p.url === w.url && p.time === w.time)) _pendingWrites.push(w); });
-  } catch(e) {}
-  if (!_pendingWrites.length) return;
-  _showToast('正在保存离线数据...');
-  let ok = 0;
-  while (_pendingWrites.length > 0) {
-    const w = _pendingWrites[0];
-    try {
-      // Refresh auth token in case it changed
-      if (w.options && w.options.headers && _authToken) {
-        w.options.headers['Authorization'] = 'Bearer ' + _authToken;
-      }
-      const r = await fetch(w.url, w.options);
-      if (r.ok || r.status === 400 || r.status === 404) {
-        // Success or client error (won't succeed on retry) — remove from queue
-        _pendingWrites.shift();
-        ok++;
-      } else {
-        // Server error — stop, will retry next time
-        break;
-      }
-    } catch(e) { break; } // Network error — stop
-  }
-  try { localStorage.setItem('oil_pending_writes', JSON.stringify(_pendingWrites)); } catch(x) {}
-  if (ok > 0) _showToast('✅ 已保存 ' + ok + ' 条离线数据');
-  _updatePendingBanner();
-}
-
-// 2. Auto-refresh after deployment
-let _serverVersion = null;
-function _checkVersion() {
-  fetch('/api/version').then(r => r.json()).then(d => {
-    if (_serverVersion && d.version !== _serverVersion) {
-      _showToast('系统已更新，正在刷新...');
-      setTimeout(() => location.reload(), 1500);
-    }
-    _serverVersion = d.version;
-  }).catch(() => {});
-}
-_checkVersion();
-
-// ============ DATA ============
-const DEFAULT_OILS = {"小豆蔻": 2.69, "芹菜籽": 1.11, "芫荽": 0.79, "小茴香": 0.52, "生姜": 1.48, "姜黄": 0.98, "缬草": 1.73, "岩兰草": 1.86, "侧柏": 2.1, "桦木": 5.11, "雪松": 0.46, "斯里兰卡肉桂皮": 2.96, "夏威夷檀香": 6.61, "檀香": 7.69, "古巴香脂": 1.11, "乳香": 2.25, "枫香": 0.86, "没药": 2.09, "罗勒": 0.96, "黑云杉": 1.83, "芫荽叶": 0.82, "香茅": 0.61, "丝柏": 0.55, "道格拉斯冷杉": 2.1, "尤加利": 0.66, "扁柏": 2.47, "柠檬尤加利": 0.43, "柠檬草": 0.41, "马郁兰": 0.7, "香蜂草": 8.71, "麦卢卡": 4.62, "西班牙牛至": 0.8, "广藿香": 0.96, "椒样薄荷": 0.75, "苦橙叶": 0.79, "迷迭香": 0.63, "西伯利亚冷杉": 0.61, "西班牙鼠尾草": 0.82, "绿薄荷": 0.89, "茶树": 0.7, "百里香": 1.0, "冬青": 0.84, "蓝艾菊": 7.53, "快乐鼠尾草": 1.16, "丁香花蕾": 0.61, "天竺葵": 1.38, "永久花": 7.15, "茉莉": 26.3, "薰衣草": 0.82, "罗马洋甘菊": 4.52, "依兰依兰": 1.25, "佛手柑": 1.23, "黑胡椒": 2.04, "圆柚": 0.59, "杜松浆果": 2.04, "柠檬": 0.43, "莱姆": 0.48, "山鸡椒": 0.68, "加州胡椒": 2.04, "红橘": 0.46, "野橘": 0.38, "乐释": 1.25, "赋活呼吸": 0.95, "芳香调理": 0.98, "安定情绪": 0.73, "柑橘清新": 0.68, "柑橘绚烂": 0.82, "温柔呵护": 1.59, "完美修护": 1.14, "舒缓": 3.28, "乐活": 1.09, "顺畅呼吸": 0.8, "愈创木": 0.57, "恬家": 0.79, "安宁神气": 1.2, "椰风香草": 3.33, "清醇薄荷": 0.91, "新瑞活力": 0.86, "保卫": 1.13, "净化清新": 0.73, "花样年华焕肤油": 3.66, "天然防护": 0.39, "西洋蓍草": 1.61, "元气": 0.82, "欢欣": 2.31, "抚慰": 3.6, "宽容": 2.1, "鼓舞": 2.2, "热情": 3.82, "静谧": 3.01, "椰子油": 0.05, "植物空胶囊": 0.2, "玫瑰": 28.82, "玫瑰呵护": 2.53, "茉莉呵护": 2.74, "橙花呵护": 2.31, "桂花呵护": 2.58, "木兰呵护": 2.04, "茶树呵护": 0.67, "特瑞活力": 1.25, "全神贯注": 1.72, "新清肌呵护": 1.4, "新清肌调理": 0.93, "当归": 4.84, "月桂叶": 1.0, "橙花": 12.37, "桂花": 10.54, "穗甘松": 4.84, "玫瑰草": 0.64, "罗文莎叶": 0.89, "甜茴香": 0.64, "五味子": 1.0, "印蒿": 1.14, "柠檬香桃木": 0.89, "蓝睡莲呵护": 2.88, "丝柏呵护": 0.54, "乐活呵护": 1.05, "顺畅呼吸呵护": 0.73, "乳香呵护": 2.15, "永久花呵护": 2.47, "全神贯注呵护": 1.08, "薰衣草呵护": 0.78, "保卫呵护": 1.05, "牛至呵护": 0.83, "舒压呵护": 0.67, "薄荷呵护": 0.75, "仕女呵护": 1.29, "山苍子花": 3.39, "白兰叶": 1.3, "舒缓呵护": 1.85, "麦卢卡呵护": 2.58, "温悦舒释": 1.08, "小野菊呵护": 1.96, "鹅掌柴呵护": 1.96, "栀子花呵护": 1.91, "忍冬花呵护": 2.42};
-const DEFAULT_OILS_META = {"小豆蔻": {"bottlePrice": 250, "dropCount": 93}, "芹菜籽": {"bottlePrice": 310, "dropCount": 280}, "芫荽": {"bottlePrice": 220, "dropCount": 280}, "小茴香": {"bottlePrice": 145, "dropCount": 280}, "生姜": {"bottlePrice": 415, "dropCount": 280}, "姜黄": {"bottlePrice": 275, "dropCount": 280}, "缬草": {"bottlePrice": 485, "dropCount": 280}, "岩兰草": {"bottlePrice": 520, "dropCount": 280}, "侧柏": {"bottlePrice": 195, "dropCount": 93}, "桦木": {"bottlePrice": 475, "dropCount": 93}, "雪松": {"bottlePrice": 130, "dropCount": 280}, "斯里兰卡肉桂皮": {"bottlePrice": 275, "dropCount": 93}, "夏威夷檀香": {"bottlePrice": 615, "dropCount": 93}, "檀香": {"bottlePrice": 715, "dropCount": 93}, "古巴香脂": {"bottlePrice": 310, "dropCount": 280}, "乳香": {"bottlePrice": 630, "dropCount": 280}, "枫香": {"bottlePrice": 240, "dropCount": 280}, "没药": {"bottlePrice": 585, "dropCount": 280}, "罗勒": {"bottlePrice": 270, "dropCount": 280}, "黑云杉": {"bottlePrice": 170, "dropCount": 93}, "芫荽叶": {"bottlePrice": 230, "dropCount": 280}, "香茅": {"bottlePrice": 170, "dropCount": 280}, "丝柏": {"bottlePrice": 155, "dropCount": 280}, "道格拉斯冷杉": {"bottlePrice": 195, "dropCount": 93}, "尤加利": {"bottlePrice": 185, "dropCount": 280}, "扁柏": {"bottlePrice": 230, "dropCount": 93}, "柠檬尤加利": {"bottlePrice": 120, "dropCount": 280}, "柠檬草": {"bottlePrice": 115, "dropCount": 280}, "马郁兰": {"bottlePrice": 195, "dropCount": 280}, "香蜂草": {"bottlePrice": 810, "dropCount": 93}, "麦卢卡": {"bottlePrice": 430, "dropCount": 93}, "西班牙牛至": {"bottlePrice": 225, "dropCount": 280}, "广藿香": {"bottlePrice": 270, "dropCount": 280}, "椒样薄荷": {"bottlePrice": 210, "dropCount": 280}, "苦橙叶": {"bottlePrice": 220, "dropCount": 280}, "迷迭香": {"bottlePrice": 175, "dropCount": 280}, "西伯利亚冷杉": {"bottlePrice": 170, "dropCount": 280}, "西班牙鼠尾草": {"bottlePrice": 230, "dropCount": 280}, "绿薄荷": {"bottlePrice": 250, "dropCount": 280}, "茶树": {"bottlePrice": 195, "dropCount": 280}, "百里香": {"bottlePrice": 280, "dropCount": 280}, "冬青": {"bottlePrice": 235, "dropCount": 280}, "蓝艾菊": {"bottlePrice": 700, "dropCount": 93}, "快乐鼠尾草": {"bottlePrice": 325, "dropCount": 280}, "丁香花蕾": {"bottlePrice": 170, "dropCount": 280}, "天竺葵": {"bottlePrice": 385, "dropCount": 280}, "永久花": {"bottlePrice": 665, "dropCount": 93}, "茉莉": {"bottlePrice": 1210, "dropCount": 46}, "薰衣草": {"bottlePrice": 230, "dropCount": 280}, "罗马洋甘菊": {"bottlePrice": 420, "dropCount": 93}, "依兰依兰": {"bottlePrice": 350, "dropCount": 280}, "佛手柑": {"bottlePrice": 345, "dropCount": 280}, "黑胡椒": {"bottlePrice": 190, "dropCount": 93}, "圆柚": {"bottlePrice": 165, "dropCount": 280}, "杜松浆果": {"bottlePrice": 190, "dropCount": 93}, "柠檬": {"bottlePrice": 120, "dropCount": 280}, "莱姆": {"bottlePrice": 135, "dropCount": 280}, "山鸡椒": {"bottlePrice": 190, "dropCount": 280}, "加州胡椒": {"bottlePrice": 190, "dropCount": 93}, "红橘": {"bottlePrice": 130, "dropCount": 280}, "野橘": {"bottlePrice": 105, "dropCount": 280}, "乐释": {"bottlePrice": 350, "dropCount": 280}, "赋活呼吸": {"bottlePrice": 265, "dropCount": 280}, "芳香调理": {"bottlePrice": 275, "dropCount": 280}, "安定情绪": {"bottlePrice": 205, "dropCount": 280}, "柑橘清新": {"bottlePrice": 190, "dropCount": 280}, "柑橘绚烂": {"bottlePrice": 230, "dropCount": 280}, "温柔呵护": {"bottlePrice": 445, "dropCount": 280}, "完美修护": {"bottlePrice": 320, "dropCount": 280}, "舒缓": {"bottlePrice": 305, "dropCount": 93}, "乐活": {"bottlePrice": 305, "dropCount": 280}, "顺畅呼吸": {"bottlePrice": 225, "dropCount": 280}, "愈创木": {"bottlePrice": 160, "dropCount": 280}, "恬家": {"bottlePrice": 220, "dropCount": 280}, "安宁神气": {"bottlePrice": 335, "dropCount": 280}, "椰风香草": {"bottlePrice": 310, "dropCount": 93}, "清醇薄荷": {"bottlePrice": 255, "dropCount": 280}, "新瑞活力": {"bottlePrice": 240, "dropCount": 280}, "保卫": {"bottlePrice": 315, "dropCount": 280}, "净化清新": {"bottlePrice": 205, "dropCount": 280}, "花样年华焕肤油": {"bottlePrice": 680, "dropCount": 186}, "天然防护": {"bottlePrice": 110, "dropCount": 280}, "西洋蓍草": {"bottlePrice": 450, "dropCount": 280}, "元气": {"bottlePrice": 230, "dropCount": 280}, "欢欣": {"bottlePrice": 215, "dropCount": 93}, "抚慰": {"bottlePrice": 335, "dropCount": 93}, "宽容": {"bottlePrice": 195, "dropCount": 93}, "鼓舞": {"bottlePrice": 205, "dropCount": 93}, "热情": {"bottlePrice": 355, "dropCount": 93}, "静谧": {"bottlePrice": 280, "dropCount": 93}, "椰子油": {"bottlePrice": 115, "dropCount": 2146}, "植物空胶囊": {"bottlePrice": 32.73, "dropCount": 160}, "玫瑰": {"bottlePrice": 2680, "dropCount": 93}, "玫瑰呵护": {"bottlePrice": 470, "dropCount": 186}, "茉莉呵护": {"bottlePrice": 510, "dropCount": 186}, "橙花呵护": {"bottlePrice": 430, "dropCount": 186}, "桂花呵护": {"bottlePrice": 480, "dropCount": 186}, "木兰呵护": {"bottlePrice": 380, "dropCount": 186}, "茶树呵护": {"bottlePrice": 125, "dropCount": 186}, "特瑞活力": {"bottlePrice": 350, "dropCount": 280}, "全神贯注": {"bottlePrice": 320, "dropCount": 186}, "新清肌呵护": {"bottlePrice": 260, "dropCount": 186}, "新清肌调理": {"bottlePrice": 260, "dropCount": 280}, "当归": {"bottlePrice": 450, "dropCount": 93}, "月桂叶": {"bottlePrice": 280, "dropCount": 280}, "橙花": {"bottlePrice": 1150, "dropCount": 93}, "桂花": {"bottlePrice": 980, "dropCount": 93}, "穗甘松": {"bottlePrice": 450, "dropCount": 93}, "玫瑰草": {"bottlePrice": 180, "dropCount": 280}, "罗文莎叶": {"bottlePrice": 250, "dropCount": 280}, "甜茴香": {"bottlePrice": 180, "dropCount": 280}, "五味子": {"bottlePrice": 280, "dropCount": 280}, "印蒿": {"bottlePrice": 320, "dropCount": 280}, "柠檬香桃木": {"bottlePrice": 250, "dropCount": 280}, "蓝睡莲呵护": {"bottlePrice": 535, "dropCount": 186}, "丝柏呵护": {"bottlePrice": 100, "dropCount": 186}, "乐活呵护": {"bottlePrice": 195, "dropCount": 186}, "顺畅呼吸呵护": {"bottlePrice": 135, "dropCount": 186}, "乳香呵护": {"bottlePrice": 400, "dropCount": 186}, "永久花呵护": {"bottlePrice": 460, "dropCount": 186}, "全神贯注呵护": {"bottlePrice": 200, "dropCount": 186}, "薰衣草呵护": {"bottlePrice": 145, "dropCount": 186}, "保卫呵护": {"bottlePrice": 195, "dropCount": 186}, "牛至呵护": {"bottlePrice": 155, "dropCount": 186}, "舒压呵护": {"bottlePrice": 125, "dropCount": 186}, "薄荷呵护": {"bottlePrice": 140, "dropCount": 186}, "仕女呵护": {"bottlePrice": 240, "dropCount": 186}, "山苍子花": {"bottlePrice": 315, "dropCount": 93}, "白兰叶": {"bottlePrice": 365, "dropCount": 280}, "舒缓呵护": {"bottlePrice": 345, "dropCount": 186}, "麦卢卡呵护": {"bottlePrice": 480, "dropCount": 186}, "温悦舒释": {"bottlePrice": 200, "dropCount": 186}, "小野菊呵护": {"bottlePrice": 365, "dropCount": 186}, "鹅掌柴呵护": {"bottlePrice": 365, "dropCount": 186}, "栀子花呵护": {"bottlePrice": 355, "dropCount": 186}, "忍冬花呵护": {"bottlePrice": 450, "dropCount": 186}};
-
-// OILS stores per-drop price for calculations
-// OILS_META stores {bottlePrice, dropCount} for editing
-let OILS = {};
-let OILS_META = {};
-
-function loadOils() {}
-function saveOils() {}
-
-const DEFAULT_RECIPES = [
-  {name:"酸痛包",note:"",ingredients:[{oil:"椒样薄荷",drops:1},{oil:"舒缓",drops:2},{oil:"芳香调理",drops:1},{oil:"冬青",drops:1},{oil:"柠檬草",drops:1},{oil:"生姜",drops:2},{oil:"茶树",drops:1},{oil:"乳香",drops:1},{oil:"椰子油",drops:10}]},
-  {name:"小v脸",note:"",ingredients:[{oil:"丝柏",drops:2},{oil:"乳香",drops:1},{oil:"西洋蓍草",drops:1},{oil:"永久花",drops:1},{oil:"椰子油",drops:10}]},
-  {name:"健脾化湿精油浴",note:"",ingredients:[{oil:"西伯利亚冷杉",drops:3},{oil:"芫荽",drops:3},{oil:"红橘",drops:2},{oil:"椰子油",drops:20}]},
-  {name:"一夜好眠精油浴",note:"",ingredients:[{oil:"安宁神气",drops:1},{oil:"岩兰草",drops:1},{oil:"乐释",drops:1},{oil:"薰衣草",drops:1},{oil:"乳香",drops:1},{oil:"安定情绪",drops:1},{oil:"椰子油",drops:10}]},
-  {name:"生发",note:"",ingredients:[{oil:"椒样薄荷",drops:1},{oil:"茶树",drops:1},{oil:"迷迭香",drops:1},{oil:"丝柏",drops:2},{oil:"生姜",drops:1},{oil:"雪松",drops:2},{oil:"薰衣草",drops:1},{oil:"乳香",drops:2},{oil:"安定情绪",drops:1},{oil:"椰子油",drops:15}]},
-  {name:"湿疹舒缓",note:"",ingredients:[{oil:"广藿香",drops:1},{oil:"绿薄荷",drops:1},{oil:"麦卢卡",drops:1},{oil:"永久花",drops:1},{oil:"蓝艾菊",drops:1},{oil:"椰子油",drops:10}]},
-  {name:"乳腺疏通",note:"",ingredients:[{oil:"乳香",drops:1},{oil:"薰衣草",drops:1},{oil:"丁香花蕾",drops:1},{oil:"柑橘清新",drops:1},{oil:"椰子油",drops:10}]},
-  {name:"缓解酸痛精油刮痧",note:"",ingredients:[{oil:"椒样薄荷",drops:1},{oil:"舒缓",drops:2},{oil:"芳香调理",drops:1},{oil:"冬青",drops:1},{oil:"柠檬草",drops:1},{oil:"生姜",drops:2},{oil:"茶树",drops:1},{oil:"乳香",drops:1},{oil:"椰子油",drops:10}]},
-  {name:"灰指甲",note:"",ingredients:[{oil:"西班牙牛至",drops:1},{oil:"椰子油",drops:6}]},
-  {name:"白发转黑",note:"",ingredients:[{oil:"乳香",drops:2},{oil:"快乐鼠尾草",drops:1},{oil:"依兰依兰",drops:1},{oil:"生姜",drops:1},{oil:"薰衣草",drops:1},{oil:"扁柏",drops:1},{oil:"雪松",drops:1},{oil:"椰子油",drops:10}]},
-  {name:"紫外线修复",note:"有艾草时可加入艾草",ingredients:[{oil:"乳香",drops:1},{oil:"西洋蓍草",drops:1},{oil:"蓝艾菊",drops:1},{oil:"麦卢卡",drops:1},{oil:"侧柏",drops:1},{oil:"椰子油",drops:15}]},
-  {name:"瘦身带脉",note:"",ingredients:[{oil:"丝柏",drops:1},{oil:"圆柚",drops:1},{oil:"新瑞活力",drops:1},{oil:"永久花",drops:1},{oil:"黑胡椒",drops:1},{oil:"姜黄",drops:1},{oil:"柠檬",drops:1},{oil:"乳香",drops:1},{oil:"椰子油",drops:15}]},
-  {name:"私密护理",note:"",ingredients:[{oil:"西洋蓍草",drops:2},{oil:"没药",drops:2},{oil:"快乐鼠尾草",drops:1},{oil:"依兰依兰",drops:1},{oil:"茶树",drops:0.5},{oil:"丝柏",drops:0.5},{oil:"椰子油",drops:8},{oil:"植物空胶囊",drops:1}]},
-  {name:"脚气/头皮屑",note:"",ingredients:[{oil:"茶树",drops:1},{oil:"椰子油",drops:6}]},
-  {name:"痘痘",note:"",ingredients:[{oil:"广藿香",drops:1},{oil:"姜黄",drops:1},{oil:"西洋蓍草",drops:2},{oil:"茶树",drops:1},{oil:"麦卢卡",drops:1},{oil:"椰子油",drops:20}]},
-  {name:"淋巴排毒",note:"",ingredients:[{oil:"乳香",drops:1},{oil:"丝柏",drops:1},{oil:"圆柚",drops:1},{oil:"迷迭香",drops:1},{oil:"杜松浆果",drops:1},{oil:"椰子油",drops:10}]},
-  {name:"驱寒/祛湿精油浴",note:"有艾草时可加入",ingredients:[{oil:"杜松浆果",drops:3},{oil:"广藿香",drops:3},{oil:"生姜",drops:2},{oil:"椰子油",drops:20}]},
-  {name:"荷尔蒙调节/更年期护理精油浴",note:"",ingredients:[{oil:"依兰依兰",drops:2},{oil:"温柔呵护",drops:2},{oil:"天竺葵",drops:2},{oil:"快乐鼠尾草",drops:2},{oil:"岩兰草",drops:1},{oil:"椰子油",drops:10}]},
-  {name:"情绪管理",note:"",ingredients:[{oil:"抚慰",drops:1},{oil:"热情",drops:1},{oil:"欢欣",drops:1},{oil:"鼓舞",drops:1},{oil:"宽容",drops:1},{oil:"静谧",drops:1},{oil:"椰子油",drops:10}]},
-  {name:"发膜",note:"",ingredients:[{oil:"乳香",drops:2},{oil:"茶树",drops:2},{oil:"生姜",drops:2}]},
-{name:"脾胃养护1",note:"",tags:[],ingredients:[{oil:"生姜",drops:10},{oil:"红橘",drops:20},{oil:"乐活",drops:20},{oil:"广藿香",drops:15},{oil:"岩兰草",drops:10}]},
-  {name:"脾胃养护2",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"红橘",drops:10},{oil:"生姜",drops:10},{oil:"乐活",drops:15}]},
-  {name:"招财开运油",note:"",tags:[],ingredients:[{oil:"夏威夷檀香",drops:1},{oil:"岩兰草",drops:1},{oil:"天竺葵",drops:2},{oil:"佛手柑",drops:10},{oil:"野橘",drops:20}]},
-  {name:"植物热玛吉（玫瑰纯油版）",note:"",tags:[],ingredients:[{oil:"西洋蓍草",drops:20},{oil:"玫瑰",drops:5},{oil:"丝柏",drops:10},{oil:"永久花",drops:5},{oil:"乳香",drops:10}]},
-  {name:"植物热玛吉（玫瑰呵护版）",note:"",tags:[],ingredients:[{oil:"西洋蓍草",drops:20},{oil:"玫瑰",drops:5},{oil:"丝柏",drops:10},{oil:"永久花",drops:5},{oil:"乳香",drops:10}]},
-  {name:"十全大补",note:"",tags:[],ingredients:[{oil:"快乐鼠尾草",drops:15},{oil:"花样年华焕肤油",drops:10},{oil:"温柔呵护",drops:8},{oil:"玫瑰呵护",drops:15},{oil:"茉莉呵护",drops:15},{oil:"温柔呵护",drops:10}]},
-  {name:"豪华头疗",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:25},{oil:"丝柏",drops:15},{oil:"夏威夷檀香",drops:10},{oil:"完美修护",drops:20},{oil:"乳香",drops:20},{oil:"生姜",drops:15},{oil:"雪松",drops:15},{oil:"马郁兰",drops:10},{oil:"安定情绪",drops:20},{oil:"依兰依兰",drops:10}]},
-  {name:"酸痛包1",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"舒缓",drops:10},{oil:"芳香调理",drops:5},{oil:"冬青",drops:10},{oil:"柠檬草",drops:5},{oil:"生姜",drops:5},{oil:"西班牙牛至",drops:5},{oil:"乳香",drops:5}]},
-  {name:"酸痛包2",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"舒缓",drops:5},{oil:"芳香调理",drops:5},{oil:"柠檬草",drops:5},{oil:"生姜",drops:5},{oil:"茶树",drops:5},{oil:"乳香",drops:5}]},
-  {name:"明目青睐1",note:"",tags:[],ingredients:[{oil:"柠檬草",drops:6},{oil:"乳香",drops:10},{oil:"永久花",drops:9},{oil:"花样年华焕肤油",drops:10},{oil:"快乐鼠尾草",drops:10}]},
-  {name:"明目青睐2",note:"",tags:[],ingredients:[{oil:"芳香调理",drops:3},{oil:"柠檬草",drops:3},{oil:"快乐鼠尾草",drops:7},{oil:"乳香",drops:7}]},
-  {name:"带脉排毒瘦腰1",note:"",tags:[],ingredients:[{oil:"广藿香",drops:5},{oil:"黑胡椒",drops:10},{oil:"天竺葵",drops:20},{oil:"新瑞活力",drops:30},{oil:"丝柏",drops:30},{oil:"乳香",drops:20},{oil:"杜松浆果",drops:20}]},
-  {name:"带脉瘦腰2",note:"",tags:[],ingredients:[{oil:"杜松浆果",drops:5},{oil:"生姜",drops:5},{oil:"圆柚",drops:10},{oil:"丝柏",drops:10},{oil:"乳香",drops:7},{oil:"天竺葵",drops:5},{oil:"新瑞活力",drops:10}]},
-  {name:"缓解头痛（强）",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:10},{oil:"薰衣草",drops:10},{oil:"罗勒",drops:15},{oil:"马郁兰",drops:15},{oil:"舒缓",drops:50}]},
-  {name:"1清咽止咳（强）",note:"",tags:[],ingredients:[{oil:"没药",drops:10},{oil:"乳香",drops:15},{oil:"尤加利",drops:15},{oil:"小豆蔻",drops:10},{oil:"顺畅呼吸",drops:20},{oil:"西伯利亚冷杉",drops:10}]},
-  {name:"清咽止咳2",note:"",tags:[],ingredients:[{oil:"茶树",drops:5},{oil:"乳香",drops:10},{oil:"保卫",drops:5},{oil:"顺畅呼吸",drops:10}]},
-  {name:"提升免疫（强）",note:"",tags:[],ingredients:[{oil:"西班牙牛至",drops:5},{oil:"侧柏",drops:10},{oil:"百里香",drops:10},{oil:"柠檬草",drops:10},{oil:"乳香",drops:20},{oil:"茶树",drops:10},{oil:"保卫",drops:10}]},
-  {name:"护肝排毒（强）",note:"",tags:[],ingredients:[{oil:"柠檬",drops:20},{oil:"元气",drops:20},{oil:"当归",drops:1},{oil:"芹菜籽",drops:10},{oil:"天竺葵",drops:9},{oil:"迷迭香",drops:15}]},
-  {name:"强心护心（强）",note:"",tags:[],ingredients:[{oil:"百里香",drops:10},{oil:"香蜂草",drops:15},{oil:"古巴香脂",drops:20},{oil:"依兰依兰",drops:15},{oil:"快乐鼠尾草",drops:15}]},
-  {name:"通鼻消炎（强）1",note:"",tags:[],ingredients:[{oil:"茶树",drops:5},{oil:"椒样薄荷",drops:5},{oil:"乳香",drops:10},{oil:"尤加利",drops:10},{oil:"蓝艾菊",drops:5},{oil:"迷迭香",drops:10},{oil:"顺畅呼吸",drops:20}]},
-  {name:"通鼻消炎2",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"茶树",drops:5},{oil:"尤加利",drops:10},{oil:"顺畅呼吸",drops:15}]},
-  {name:"过敏湿疹（强）",note:"",tags:[],ingredients:[{oil:"罗马洋甘菊",drops:10},{oil:"蓝艾菊",drops:20},{oil:"薰衣草",drops:10},{oil:"香蜂草",drops:15},{oil:"绿薄荷",drops:10},{oil:"永久花",drops:10},{oil:"广藿香",drops:15},{oil:"乳香",drops:10}]},
-  {name:"强肾化水（强）",note:"",tags:[],ingredients:[{oil:"茉莉呵护",drops:10},{oil:"檀香",drops:15},{oil:"黑胡椒",drops:10},{oil:"依兰依兰",drops:10},{oil:"古巴香脂",drops:10},{oil:"杜松浆果",drops:20}]},
-  {name:"防疫病毒（强）",note:"",tags:[],ingredients:[{oil:"尤加利",drops:5},{oil:"侧柏",drops:5},{oil:"百里香",drops:5},{oil:"茶树",drops:10},{oil:"保卫",drops:10}]},
-  {name:"消富贵包（强）",note:"",tags:[],ingredients:[{oil:"芳香调理",drops:10},{oil:"永久花",drops:10},{oil:"生姜",drops:10},{oil:"舒缓",drops:5},{oil:"柠檬草",drops:10},{oil:"完美修护",drops:10},{oil:"乳香",drops:10}]},
-  {name:"淋巴排毒（强）",note:"",tags:[],ingredients:[{oil:"柑橘清新",drops:5},{oil:"丁香花蕾",drops:10},{oil:"柠檬草",drops:5},{oil:"没药",drops:20},{oil:"乳香",drops:20}]},
-  {name:"祛湿化滞（强）",note:"",tags:[],ingredients:[{oil:"黑胡椒",drops:8},{oil:"斯里兰卡肉桂皮",drops:6},{oil:"圆柚",drops:9},{oil:"岩兰草",drops:8},{oil:"广藿香",drops:9},{oil:"姜黄",drops:10},{oil:"西洋蓍草",drops:10}]},
-  {name:"肺部结节",note:"",tags:[],ingredients:[{oil:"完美修护",drops:10},{oil:"乳香",drops:10},{oil:"椒样薄荷",drops:5},{oil:"柑橘清新",drops:5},{oil:"赋活呼吸",drops:5},{oil:"天竺葵",drops:10}]},
-  {name:"尿路感染1",note:"",tags:[],ingredients:[{oil:"天竺葵",drops:10},{oil:"杜松浆果",drops:5},{oil:"西班牙牛至",drops:5},{oil:"柠檬草",drops:5},{oil:"罗勒",drops:5},{oil:"保卫",drops:5},{oil:"柠檬",drops:5}]},
-  {name:"尿路感染2",note:"",tags:[],ingredients:[{oil:"西班牙牛至",drops:1},{oil:"柠檬草",drops:1}]},
-  {name:"养前列腺",note:"",tags:[],ingredients:[{oil:"檀香",drops:3},{oil:"杜松浆果",drops:8},{oil:"斯里兰卡肉桂皮",drops:2},{oil:"芳香调理",drops:6},{oil:"茉莉",drops:1},{oil:"快乐鼠尾草",drops:3},{oil:"五味子",drops:15},{oil:"百里香",drops:2}]},
-  {name:"皮外损伤",note:"",tags:[],ingredients:[{oil:"乳香",drops:10},{oil:"茶树",drops:10},{oil:"薰衣草",drops:8},{oil:"没药",drops:4},{oil:"永久花",drops:4}]},
-  {name:"消脂肪肝",note:"",tags:[],ingredients:[{oil:"杜松浆果",drops:5},{oil:"元气",drops:5},{oil:"乳香",drops:2},{oil:"柠檬",drops:3},{oil:"柠檬草",drops:5},{oil:"新瑞活力",drops:10}]},
-  {name:"平衡血糖",note:"",tags:[],ingredients:[{oil:"新瑞活力",drops:10},{oil:"薰衣草",drops:5},{oil:"斯里兰卡肉桂皮",drops:3},{oil:"迷迭香",drops:3},{oil:"芫荽",drops:3},{oil:"山鸡椒",drops:3},{oil:"天竺葵",drops:3}]},
-  {name:"肚痛腹泻",note:"",tags:[],ingredients:[{oil:"乐活",drops:16},{oil:"柠檬草",drops:8},{oil:"生姜",drops:6},{oil:"西班牙牛至",drops:6},{oil:"罗勒",drops:4}]},
-  {name:"韧带扭伤",note:"",tags:[],ingredients:[{oil:"芳香调理",drops:8},{oil:"姜黄",drops:5},{oil:"柠檬草",drops:8},{oil:"西班牙牛至",drops:3},{oil:"永久花",drops:5},{oil:"罗勒",drops:2},{oil:"古巴香脂",drops:6}]},
-  {name:"血脂稳定",note:"",tags:[],ingredients:[{oil:"新瑞活力",drops:10},{oil:"柠檬草",drops:5},{oil:"永久花",drops:5},{oil:"小茴香",drops:5},{oil:"罗勒",drops:5},{oil:"元气",drops:5}]},
-  {name:"尿床尿频",note:"",tags:[],ingredients:[{oil:"杜松浆果",drops:16},{oil:"柠檬草",drops:12},{oil:"侧柏",drops:8},{oil:"檀香",drops:4}]},
-  {name:"冻疮修复",note:"",tags:[],ingredients:[{oil:"乳香",drops:5},{oil:"薰衣草",drops:5},{oil:"黑胡椒",drops:3},{oil:"没药",drops:3},{oil:"迷迭香",drops:5},{oil:"生姜",drops:5},{oil:"天竺葵",drops:10}]},
-  {name:"皮下囊肿",note:"",tags:[],ingredients:[{oil:"西洋蓍草",drops:5},{oil:"乳香",drops:10},{oil:"百里香",drops:5},{oil:"西班牙牛至",drops:5},{oil:"广藿香",drops:10},{oil:"丁香花蕾",drops:5}]},
-  {name:"疏肝解郁",note:"",tags:[],ingredients:[{oil:"天竺葵",drops:5},{oil:"芹菜籽",drops:2},{oil:"岩兰草",drops:5},{oil:"元气",drops:8},{oil:"佛手柑",drops:5},{oil:"罗马洋甘菊",drops:5}]},
-  {name:"大脑抗衰",note:"",tags:[],ingredients:[{oil:"特瑞活力",drops:10},{oil:"完美修护",drops:10},{oil:"乳香",drops:10},{oil:"迷迭香",drops:5},{oil:"乐释",drops:5},{oil:"广藿香",drops:5},{oil:"古巴香脂",drops:5}]},
-  {name:"神经麻木",note:"",tags:[],ingredients:[{oil:"特瑞活力",drops:10},{oil:"完美修护",drops:10},{oil:"永久花",drops:5},{oil:"百里香",drops:5},{oil:"古巴香脂",drops:10},{oil:"马郁兰",drops:5},{oil:"乳香",drops:5}]},
-  {name:"口唇疱疹1",note:"",tags:[],ingredients:[{oil:"薰衣草",drops:5},{oil:"罗马洋甘菊",drops:7},{oil:"茶树",drops:5},{oil:"乳香",drops:5},{oil:"玫瑰草",drops:3},{oil:"没药",drops:5}]},
-  {name:"口唇疱疹2",note:"",tags:[],ingredients:[{oil:"薰衣草",drops:6},{oil:"罗马洋甘菊",drops:6},{oil:"罗文莎叶",drops:6}]},
-  {name:"春季用油",note:"",tags:[],ingredients:[{oil:"黑云杉",drops:3},{oil:"柠檬草",drops:5},{oil:"杜松浆果",drops:5},{oil:"芹菜籽",drops:5},{oil:"天竺葵",drops:5},{oil:"莱姆",drops:10},{oil:"元气",drops:10}]},
-  {name:"夏季用油",note:"",tags:[],ingredients:[{oil:"生姜",drops:5},{oil:"杜松浆果",drops:5},{oil:"丝柏",drops:5},{oil:"圆柚",drops:5},{oil:"斯里兰卡肉桂皮",drops:3},{oil:"西伯利亚冷杉",drops:5},{oil:"广藿香",drops:7},{oil:"乐活",drops:10}]},
-  {name:"秋季用油",note:"",tags:[],ingredients:[{oil:"西伯利亚冷杉",drops:5},{oil:"茶树",drops:5},{oil:"小豆蔻",drops:3},{oil:"丁香花蕾",drops:2},{oil:"迷迭香",drops:3},{oil:"乳香",drops:7},{oil:"顺畅呼吸",drops:10}]},
-  {name:"冬季用油",note:"",tags:[],ingredients:[{oil:"茉莉呵护",drops:10},{oil:"生姜",drops:5},{oil:"雪松",drops:5},{oil:"黑胡椒",drops:2},{oil:"檀香",drops:3},{oil:"五味子",drops:3},{oil:"杜松浆果",drops:5},{oil:"天竺葵",drops:5},{oil:"乳香",drops:5}]},
-  {name:"祛湿丸子",note:"",tags:[],ingredients:[{oil:"斯里兰卡肉桂皮",drops:1},{oil:"圆柚",drops:2},{oil:"姜黄",drops:2},{oil:"黑胡椒",drops:1},{oil:"岩兰草",drops:2},{oil:"广藿香",drops:2},{oil:"西洋蓍草",drops:2}]},
-  {name:"三伏排湿",note:"",tags:[],ingredients:[{oil:"杜松浆果",drops:5},{oil:"芳香调理",drops:5},{oil:"圆柚",drops:5},{oil:"元气",drops:5},{oil:"新瑞活力",drops:5},{oil:"生姜",drops:5},{oil:"广藿香",drops:5}]},
-  {name:"三伏晒背",note:"",tags:[],ingredients:[{oil:"乳香",drops:5},{oil:"薰衣草",drops:5},{oil:"罗马洋甘菊",drops:5},{oil:"永久花",drops:5},{oil:"蓝艾菊",drops:3},{oil:"西洋蓍草",drops:10}]},
-  {name:"三伏百会",note:"",tags:[],ingredients:[{oil:"乳香",drops:10},{oil:"特瑞活力",drops:10},{oil:"古巴香脂",drops:10}]},
-  {name:"三伏八髎",note:"",tags:[],ingredients:[{oil:"生姜",drops:10},{oil:"乳香",drops:10},{oil:"印蒿",drops:3},{oil:"温柔呵护",drops:4},{oil:"完美修护",drops:6},{oil:"花样年华焕肤油",drops:4}]},
-  {name:"三伏大椎",note:"",tags:[],ingredients:[{oil:"斯里兰卡肉桂皮",drops:5},{oil:"檀香",drops:5},{oil:"西洋蓍草",drops:10},{oil:"生姜",drops:5},{oil:"乳香",drops:10},{oil:"广藿香",drops:10}]},
-  {name:"三伏檀中",note:"",tags:[],ingredients:[{oil:"夏威夷檀香",drops:2},{oil:"香蜂草",drops:30}]},
-  {name:"太伏太溪",note:"",tags:[],ingredients:[{oil:"元气",drops:15},{oil:"特瑞活力",drops:15}]},
-  {name:"三伏扶阳",note:"",tags:[],ingredients:[{oil:"乳香",drops:8},{oil:"广藿香",drops:3},{oil:"依兰依兰",drops:3},{oil:"生姜",drops:8},{oil:"檀香",drops:5},{oil:"斯里兰卡肉桂皮",drops:4},{oil:"当归",drops:2},{oil:"黑胡椒",drops:8},{oil:"柠檬草",drops:5},{oil:"杜松浆果",drops:8}]},
-  {name:"三阴交油",note:"",tags:[],ingredients:[{oil:"生姜",drops:6},{oil:"乳香",drops:10},{oil:"杜松浆果",drops:10},{oil:"快乐鼠尾草",drops:4}]},
-  {name:"八虚用油",note:"",tags:[],ingredients:[{oil:"元气",drops:5},{oil:"圆柚",drops:5},{oil:"新瑞活力",drops:5},{oil:"乳香",drops:5},{oil:"柠檬草",drops:5},{oil:"芳香调理",drops:5}]},
-  {name:"冬日小火炉",note:"",tags:[],ingredients:[{oil:"山鸡椒",drops:6},{oil:"生姜",drops:6},{oil:"黑胡椒",drops:6},{oil:"茉莉",drops:2},{oil:"柠檬草",drops:6},{oil:"天竺葵",drops:6},{oil:"温柔呵护",drops:10},{oil:"小茴香",drops:4}]},
-  {name:"女性内分泌",note:"",tags:[],ingredients:[{oil:"薰衣草",drops:5},{oil:"乳香",drops:5},{oil:"依兰依兰",drops:5},{oil:"快乐鼠尾草",drops:5},{oil:"温柔呵护",drops:10},{oil:"温柔呵护",drops:5}]},
-  {name:"提升免疫力",note:"",tags:[],ingredients:[{oil:"乳香",drops:10},{oil:"茶树",drops:20},{oil:"保卫",drops:20}]},
-  {name:"面部精华",note:"",tags:[],ingredients:[{oil:"天竺葵",drops:5},{oil:"丝柏",drops:5},{oil:"雪松",drops:5},{oil:"薰衣草",drops:5},{oil:"乳香",drops:5},{oil:"西洋蓍草",drops:10}]},
-  {name:"日常头疗",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"茶树",drops:5},{oil:"野橘",drops:5},{oil:"丝柏",drops:10},{oil:"生姜",drops:5},{oil:"雪松",drops:10},{oil:"薰衣草",drops:5},{oil:"乳香",drops:7},{oil:"安定情绪",drops:7}]},
-  {name:"肝肾保护",note:"",tags:[],ingredients:[{oil:"天竺葵",drops:5},{oil:"生姜",drops:5},{oil:"杜松浆果",drops:5},{oil:"柠檬",drops:10},{oil:"元气",drops:5},{oil:"柠檬草",drops:5}]},
-  {name:"情绪能量油",note:"",tags:[],ingredients:[{oil:"乳香",drops:1},{oil:"柑橘绚烂",drops:10},{oil:"柑橘清新",drops:10},{oil:"安宁神气",drops:5},{oil:"安定情绪",drops:5}]},
-  {name:"养心宁神",note:"",tags:[],ingredients:[{oil:"依兰依兰",drops:5},{oil:"古巴香脂",drops:10},{oil:"乳香",drops:15}]},
-  {name:"安稳睡眠",note:"",tags:[],ingredients:[{oil:"乳香",drops:10},{oil:"薰衣草",drops:10},{oil:"安定情绪",drops:10}]},
-  {name:"过敏体质",note:"",tags:[],ingredients:[{oil:"罗马洋甘菊",drops:20},{oil:"椒样薄荷",drops:10},{oil:"薰衣草",drops:10},{oil:"柠檬",drops:10}]},
-  {name:"淋巴结节",note:"",tags:[],ingredients:[{oil:"完美修护",drops:7},{oil:"丝柏",drops:5},{oil:"柠檬草",drops:7},{oil:"乳香",drops:10},{oil:"芳香调理",drops:5}]},
-  {name:"甲状腺结节",note:"",tags:[],ingredients:[{oil:"芳香调理",drops:5},{oil:"椒样薄荷",drops:5},{oil:"丁香花蕾",drops:5},{oil:"柠檬草",drops:5},{oil:"完美修护",drops:10},{oil:"乳香",drops:10}]},
-  {name:"皮肤过敏",note:"",tags:[],ingredients:[{oil:"罗马洋甘菊",drops:8},{oil:"西洋蓍草",drops:10},{oil:"雪松",drops:5},{oil:"侧柏",drops:2},{oil:"茶树",drops:5},{oil:"乳香",drops:5}]},
-  {name:"止鼾安睡",note:"",tags:[],ingredients:[{oil:"安宁神气",drops:10},{oil:"罗勒",drops:5},{oil:"丝柏",drops:5},{oil:"道格拉斯冷杉",drops:5},{oil:"百里香",drops:5},{oil:"顺畅呼吸",drops:10}]},
-  {name:"哮喘缓解",note:"",tags:[],ingredients:[{oil:"顺畅呼吸",drops:10},{oil:"蓝艾菊",drops:5},{oil:"柠檬",drops:5},{oil:"薰衣草",drops:5},{oil:"椒样薄荷",drops:5},{oil:"赋活呼吸",drops:10}]},
-  {name:"带状疱疹",note:"",tags:[],ingredients:[{oil:"广藿香",drops:3},{oil:"佛手柑",drops:5},{oil:"天竺葵",drops:5},{oil:"丁香花蕾",drops:5},{oil:"百里香",drops:5},{oil:"香蜂草",drops:3},{oil:"完美修护",drops:7},{oil:"没药",drops:5},{oil:"乳香",drops:7}]},
-  {name:"夏日社痱",note:"",tags:[],ingredients:[{oil:"罗马洋甘菊",drops:8},{oil:"椒样薄荷",drops:8},{oil:"薰衣草",drops:6},{oil:"广藿香",drops:8}]},
-  {name:"耳聋耳鸣",note:"",tags:[],ingredients:[{oil:"薰衣草",drops:5},{oil:"香蜂草",drops:3},{oil:"天竺葵",drops:5},{oil:"罗勒",drops:10},{oil:"永久花",drops:5},{oil:"乳香",drops:10}]},
-  {name:"减脂瘦身",note:"",tags:[],ingredients:[{oil:"天竺葵",drops:5},{oil:"乳香",drops:8},{oil:"杜松浆果",drops:10},{oil:"圆柚",drops:10},{oil:"迷迭香",drops:7},{oil:"丝柏",drops:15},{oil:"新瑞活力",drops:20}]},
-  {name:"痔疮用油",note:"",tags:[],ingredients:[{oil:"没药",drops:10},{oil:"乳香",drops:10},{oil:"天竺葵",drops:10},{oil:"永久花",drops:10},{oil:"丝柏",drops:15},{oil:"茶树",drops:20}]},
-  {name:"静脉曲张1",note:"",tags:[],ingredients:[{oil:"甜茴香",drops:7},{oil:"丝柏",drops:15},{oil:"薰衣草",drops:10},{oil:"柠檬草",drops:8},{oil:"永久花",drops:5},{oil:"芳香调理",drops:5}]},
-  {name:"静脉曲张2",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:3},{oil:"黑胡椒",drops:5},{oil:"永久花",drops:8},{oil:"丝柏",drops:10}]},
-  {name:"痛风缓解",note:"",tags:[],ingredients:[{oil:"柠檬草",drops:8},{oil:"西伯利亚冷杉",drops:5},{oil:"芳香调理",drops:10},{oil:"舒缓",drops:5},{oil:"西班牙牛至",drops:3},{oil:"乳香",drops:5},{oil:"香蜂草",drops:3}]},
-  {name:"滑膜炎症",note:"",tags:[],ingredients:[{oil:"丝柏",drops:5},{oil:"生姜",drops:5},{oil:"椒样薄荷",drops:5},{oil:"罗勒",drops:5},{oil:"冬青",drops:3},{oil:"乳香",drops:10},{oil:"道格拉斯冷杉",drops:5}]},
-  {name:"腱鞘炎症",note:"",tags:[],ingredients:[{oil:"罗勒",drops:5},{oil:"丝柏",drops:5},{oil:"乳香",drops:5},{oil:"薰衣草",drops:5},{oil:"圆柚",drops:5},{oil:"柠檬草",drops:10}]},
-  {name:"腰椎滑脱",note:"",tags:[],ingredients:[{oil:"丝柏",drops:5},{oil:"舒缓",drops:5},{oil:"椒样薄荷",drops:5},{oil:"檀香",drops:5},{oil:"冬青",drops:5},{oil:"马郁兰",drops:5},{oil:"乳香",drops:5}]},
-  {name:"暖宫调经1",note:"",tags:[],ingredients:[{oil:"温柔呵护",drops:10},{oil:"生姜",drops:10},{oil:"黑胡椒",drops:10},{oil:"天竺葵",drops:5},{oil:"温柔呵护",drops:25},{oil:"快乐鼠尾草",drops:15}]},
-  {name:"暖宫调经2",note:"",tags:[],ingredients:[{oil:"温柔呵护",drops:10},{oil:"生姜",drops:6},{oil:"黑胡椒",drops:6},{oil:"天竺葵",drops:3},{oil:"温柔呵护",drops:17},{oil:"快乐鼠尾草",drops:10}]},
-  {name:"经期止痛",note:"",tags:[],ingredients:[{oil:"黑胡椒",drops:5},{oil:"舒缓",drops:10},{oil:"生姜",drops:5},{oil:"乳香",drops:10},{oil:"温柔呵护",drops:10},{oil:"温柔呵护",drops:20},{oil:"薰衣草",drops:10}]},
-  {name:"乳腺增生",note:"",tags:[],ingredients:[{oil:"完美修护",drops:10},{oil:"薰衣草",drops:5},{oil:"迷迭香",drops:5},{oil:"百里香",drops:5},{oil:"丁香花蕾",drops:5},{oil:"柑橘清新",drops:10}]},
-  {name:"丰胸挺拨",note:"",tags:[],ingredients:[{oil:"小茴香",drops:20},{oil:"依兰依兰",drops:10},{oil:"温柔呵护",drops:30},{oil:"西洋蓍草",drops:30},{oil:"快乐鼠尾草",drops:10}]},
-  {name:"私密紧致",note:"",tags:[],ingredients:[{oil:"玫瑰呵护",drops:10},{oil:"茉莉呵护",drops:10},{oil:"丝柏",drops:15},{oil:"依兰依兰",drops:10},{oil:"快乐鼠尾草",drops:15}]},
-  {name:"乳腺结节1",note:"",tags:[],ingredients:[{oil:"完美修护",drops:10},{oil:"柑橘清新",drops:5},{oil:"没药",drops:10},{oil:"姜黄",drops:10},{oil:"丁香花蕾",drops:5},{oil:"乳香",drops:20}]},
-  {name:"乳腺结节2",note:"",tags:[],ingredients:[{oil:"丁香花蕾",drops:10},{oil:"乳香",drops:5},{oil:"柑橘清新",drops:10},{oil:"完美修护",drops:10},{oil:"柠檬草",drops:5}]},
-  {name:"手脚冰凉",note:"",tags:[],ingredients:[{oil:"生姜",drops:20},{oil:"天竺葵",drops:10},{oil:"岩兰草",drops:10},{oil:"柠檬草",drops:10},{oil:"黑胡椒",drops:15},{oil:"野橘",drops:10}]},
-  {name:"修复腹直肌",note:"",tags:[],ingredients:[{oil:"丝柏",drops:10},{oil:"乳香",drops:5},{oil:"永久花",drops:5},{oil:"圆柚",drops:10},{oil:"广藿香",drops:10},{oil:"柠檬草",drops:10}]},
-  {name:"子宫肌瘤1",note:"",tags:[],ingredients:[{oil:"薰衣草",drops:5},{oil:"完美修护",drops:10},{oil:"安定情绪",drops:5},{oil:"西班牙牛至",drops:3},{oil:"姜黄",drops:10},{oil:"天竺葵",drops:5},{oil:"永久花",drops:5},{oil:"乳香",drops:10}]},
-  {name:"子宫肌瘤2",note:"",tags:[],ingredients:[{oil:"乳香",drops:5},{oil:"罗勒",drops:6},{oil:"天竺葵",drops:10}]},
-  {name:"卵巢囊肿1",note:"",tags:[],ingredients:[{oil:"薰衣草",drops:8},{oil:"完美修护",drops:5},{oil:"温柔呵护",drops:50},{oil:"斯里兰卡肉桂皮",drops:5},{oil:"丝柏",drops:8},{oil:"迷迭香",drops:5},{oil:"安定情绪",drops:8},{oil:"乳香",drops:6}]},
-  {name:"卵巢囊肿2",note:"",tags:[],ingredients:[{oil:"乳香",drops:2},{oil:"温柔呵护",drops:2},{oil:"西班牙牛至",drops:1},{oil:"快乐鼠尾草",drops:1}]},
-  {name:"美背",note:"",tags:[],ingredients:[{oil:"夏威夷檀香",drops:10},{oil:"黑云杉",drops:15},{oil:"雪松",drops:10},{oil:"依兰依兰",drops:10},{oil:"佛手柑",drops:15},{oil:"圆柚",drops:10},{oil:"玫瑰呵护",drops:15},{oil:"当归",drops:5},{oil:"乳香",drops:10}]},
-  {name:"减轻妊娠纹",note:"",tags:[],ingredients:[{oil:"永久花",drops:7},{oil:"广藿香",drops:5},{oil:"没药",drops:4},{oil:"乳香",drops:7},{oil:"薰衣草",drops:7},{oil:"完美修护",drops:10},{oil:"花样年华焕肤油",drops:10}]},
-  {name:"更年期症",note:"",tags:[],ingredients:[{oil:"柠檬",drops:10},{oil:"椒样薄荷",drops:8},{oil:"薰衣草",drops:10},{oil:"天竺葵",drops:10},{oil:"温柔呵护",drops:30},{oil:"快乐鼠尾草",drops:20},{oil:"罗马洋甘菊",drops:12}]},
-  {name:"妇科炎症",note:"",tags:[],ingredients:[{oil:"没药",drops:10},{oil:"斯里兰卡肉桂皮",drops:10},{oil:"迷迭香",drops:20},{oil:"完美修护",drops:10},{oil:"杜松浆果",drops:10}]},
-  {name:"备孕调理",note:"",tags:[],ingredients:[{oil:"天竺葵",drops:5},{oil:"生姜",drops:5},{oil:"温柔呵护",drops:10},{oil:"快乐鼠尾草",drops:5},{oil:"温柔呵护",drops:10}]},
-  {name:"抗衰紧致",note:"",tags:[],ingredients:[{oil:"丝柏",drops:5},{oil:"乳香",drops:5},{oil:"夏威夷檀香",drops:5},{oil:"玫瑰",drops:3},{oil:"永久花",drops:5},{oil:"西洋蓍草",drops:20}]},
-  {name:"美白淡斑1",note:"",tags:[],ingredients:[{oil:"玫瑰呵护",drops:5},{oil:"丁香花蕾",drops:2},{oil:"夏威夷檀香",drops:5},{oil:"扁柏",drops:5},{oil:"永久花",drops:5},{oil:"岩兰草",drops:5},{oil:"黑云杉",drops:5},{oil:"芹菜籽",drops:8},{oil:"花样年华焕肤油",drops:10}]},
-  {name:"美白淡斑2",note:"",tags:[],ingredients:[{oil:"广藿香",drops:3},{oil:"芹菜籽",drops:3},{oil:"黑云杉",drops:3},{oil:"西洋蓍草",drops:3},{oil:"橙花呵护",drops:4},{oil:"花样年华焕肤油",drops:3}]},
-  {name:"水油平衡",note:"",tags:[],ingredients:[{oil:"新清肌调理",drops:15},{oil:"天竺葵",drops:3},{oil:"雪松",drops:5},{oil:"椒样薄荷",drops:5},{oil:"永久花",drops:3},{oil:"麦卢卡",drops:3},{oil:"薰衣草",drops:5},{oil:"茶树",drops:5}]},
-  {name:"敏感肌",note:"",tags:[],ingredients:[{oil:"乳香",drops:10},{oil:"夏威夷檀香",drops:2},{oil:"岩兰草",drops:3},{oil:"广藿香",drops:5},{oil:"罗马洋甘菊",drops:10}]},
-  {name:"防晒修复",note:"",tags:[],ingredients:[{oil:"罗马洋甘菊",drops:10},{oil:"乳香",drops:10},{oil:"椒样薄荷",drops:4},{oil:"永久花",drops:8},{oil:"柠檬草",drops:3},{oil:"薰衣草",drops:10},{oil:"夏威夷檀香",drops:5}]},
-  {name:"深层净化排毒",note:"",tags:[],ingredients:[{oil:"茶树呵护",drops:20},{oil:"杜松浆果",drops:10},{oil:"薰衣草",drops:20},{oil:"圆柚",drops:5},{oil:"蓝艾菊",drops:3},{oil:"丝柏",drops:3},{oil:"侧柏",drops:5},{oil:"雪松",drops:10}]},
-  {name:"蓝月光贵妇面霜",note:"",tags:[],ingredients:[{oil:"玫瑰呵护",drops:10},{oil:"芹菜籽",drops:2},{oil:"永久花",drops:2},{oil:"西洋蓍草",drops:10},{oil:"蓝艾菊",drops:5}]},
-  {name:"唇部保养",note:"",tags:[],ingredients:[{oil:"夏威夷檀香",drops:3},{oil:"没药",drops:3},{oil:"薰衣草",drops:5},{oil:"永久花",drops:3},{oil:"麦卢卡",drops:1},{oil:"乳香",drops:5}]},
-  {name:"皱纹推土机",note:"",tags:[],ingredients:[{oil:"花样年华焕肤油",drops:10},{oil:"桂花呵护",drops:6},{oil:"麦卢卡",drops:4},{oil:"永久花",drops:4},{oil:"黑云杉",drops:5},{oil:"夏威夷檀香",drops:5},{oil:"乳香",drops:10},{oil:"穗甘松",drops:6},{oil:"依兰依兰",drops:10}]},
-  {name:"祛除颈纹",note:"",tags:[],ingredients:[{oil:"夏威夷檀香",drops:5},{oil:"薰衣草",drops:5},{oil:"乳香",drops:10},{oil:"依兰依兰",drops:10},{oil:"穗甘松",drops:10}]},
-  {name:"蓝带神仙水",note:"",tags:[],ingredients:[{oil:"乳香",drops:10},{oil:"夏威夷檀香",drops:5},{oil:"蓝艾菊",drops:5},{oil:"永久花",drops:5},{oil:"西洋蓍草",drops:10}]},
-  {name:"全效紧致乳",note:"",tags:[],ingredients:[{oil:"花样年华焕肤油",drops:50},{oil:"橙花呵护",drops:50},{oil:"茉莉呵护",drops:50},{oil:"古巴香脂",drops:5},{oil:"西洋蓍草",drops:5},{oil:"雪松",drops:10},{oil:"玫瑰",drops:5}]},
-  {name:"眼袋黑眼圈",note:"",tags:[],ingredients:[{oil:"快乐鼠尾草",drops:5},{oil:"永久花",drops:2},{oil:"丝柏",drops:15},{oil:"乳香",drops:5},{oil:"西洋蓍草",drops:5}]},
-  {name:"清痘无痕",note:"",tags:[],ingredients:[{oil:"新清肌呵护",drops:20},{oil:"净化清新",drops:10},{oil:"薰衣草",drops:10},{oil:"花样年华焕肤油",drops:10},{oil:"茶树",drops:10}]},
-  {name:"脂肪粒",note:"",tags:[],ingredients:[{oil:"乳香",drops:5},{oil:"永久花",drops:3},{oil:"西班牙牛至",drops:3},{oil:"芫荽",drops:3},{oil:"雪松",drops:3},{oil:"茶树",drops:3},{oil:"罗马洋甘菊",drops:5}]},
-  {name:"植物蜂皮",note:"",tags:[],ingredients:[{oil:"乳香",drops:10},{oil:"橙花呵护",drops:10},{oil:"桂花呵护",drops:10},{oil:"永久花",drops:5},{oil:"没药",drops:3},{oil:"麦卢卡",drops:3},{oil:"花样年华焕肤油",drops:10}]},
-  {name:"植物水光针",note:"",tags:[],ingredients:[{oil:"西洋蓍草",drops:10},{oil:"芹菜籽",drops:5},{oil:"玫瑰",drops:2},{oil:"乳香",drops:5},{oil:"木兰呵护",drops:20}]},
-  {name:"早C精华",note:"",tags:[],ingredients:[{oil:"西洋蓍草",drops:20},{oil:"永久花",drops:5},{oil:"夏威夷檀香",drops:3},{oil:"穗甘松",drops:3},{oil:"乳香",drops:5},{oil:"玫瑰呵护",drops:10}]},
-  {name:"晚A精华",note:"",tags:[],ingredients:[{oil:"花样年华焕肤油",drops:10},{oil:"麦卢卡",drops:3},{oil:"芹菜籽",drops:5},{oil:"天竺葵",drops:5},{oil:"茉莉呵护",drops:10},{oil:"橙花呵护",drops:10},{oil:"雪松",drops:5}]},
-  {name:"消鸡皮肤",note:"",tags:[],ingredients:[{oil:"圆柚",drops:5},{oil:"薰衣草",drops:5},{oil:"枫香",drops:5},{oil:"柠檬香桃木",drops:5},{oil:"安定情绪",drops:5},{oil:"天竺葵",drops:6}]},
-  {name:"解荨麻疹",note:"",tags:[],ingredients:[{oil:"没药",drops:2},{oil:"乳香",drops:4},{oil:"椒样薄荷",drops:4},{oil:"罗马洋甘菊",drops:6},{oil:"薰衣草",drops:4},{oil:"蓝艾菊",drops:6}]},
-  {name:"保湿焕肤",note:"",tags:[],ingredients:[{oil:"永久花",drops:5},{oil:"没药",drops:5},{oil:"薰衣草",drops:5},{oil:"夏威夷檀香",drops:5},{oil:"玫瑰",drops:3},{oil:"天竺葵",drops:5},{oil:"玫瑰草",drops:5}]},
-  {name:"奶油桂花手霜",note:"",tags:[],ingredients:[{oil:"西洋蓍草",drops:10},{oil:"乳香",drops:10},{oil:"桂花",drops:8},{oil:"薰衣草",drops:8},{oil:"天竺葵",drops:8},{oil:"椰风香草",drops:8}]},
-  {name:"养护指甲",note:"",tags:[],ingredients:[{oil:"夏威夷檀香",drops:10},{oil:"罗马洋甘菊",drops:10},{oil:"没药",drops:10}]},
-  {name:"皮肤皲裂/脚后跟干裂",note:"",tags:[],ingredients:[{oil:"天竺葵",drops:10},{oil:"乳香",drops:10},{oil:"薰衣草",drops:8},{oil:"没药",drops:8}]},
-  {name:"黑绷带",note:"",tags:[],ingredients:[{oil:"广藿香",drops:6},{oil:"岩兰草",drops:6},{oil:"穗甘松",drops:6},{oil:"夏威夷檀香",drops:10},{oil:"永久花",drops:10},{oil:"没药",drops:10},{oil:"蓝艾菊",drops:10}]},
-  {name:"眉毛睫毛增长滋养液",note:"",tags:[],ingredients:[{oil:"乳香",drops:10},{oil:"迷迭香",drops:8},{oil:"雪松",drops:8},{oil:"依兰依兰",drops:6},{oil:"薰衣草",drops:8}]},
-  {name:"天鹅颈",note:"",tags:[],ingredients:[{oil:"穗甘松",drops:5},{oil:"柠檬草",drops:5},{oil:"完美修护",drops:10},{oil:"舒缓",drops:10},{oil:"依兰依兰",drops:10},{oil:"丝柏",drops:10},{oil:"芳香调理",drops:10},{oil:"乳香",drops:10}]},
-  {name:"收缩毛孔",note:"",tags:[],ingredients:[{oil:"迷迭香",drops:5},{oil:"依兰依兰",drops:7},{oil:"天竺葵",drops:10},{oil:"丝柏",drops:10}]},
-  {name:"酒糟鼻",note:"",tags:[],ingredients:[{oil:"乳香",drops:7},{oil:"薰衣草",drops:5},{oil:"岩兰草",drops:8},{oil:"罗马洋甘菊",drops:5},{oil:"茶树",drops:8}]},
-  {name:"疤痕修复",note:"",tags:[],ingredients:[{oil:"没药",drops:4},{oil:"乳香",drops:7},{oil:"薰衣草",drops:7},{oil:"永久花",drops:7},{oil:"花样年华焕肤油",drops:10}]},
-  {name:"太阳油",note:"",tags:[],ingredients:[{oil:"依兰依兰",drops:15},{oil:"广藿香",drops:15},{oil:"雪松",drops:15},{oil:"檀香",drops:15},{oil:"杜松浆果",drops:15}]},
-  {name:"月亮油",note:"",tags:[],ingredients:[{oil:"温柔呵护",drops:15},{oil:"茉莉呵护",drops:10},{oil:"玫瑰呵护",drops:10},{oil:"佛手柑",drops:5},{oil:"小茴香",drops:5},{oil:"依兰依兰",drops:7},{oil:"快乐鼠尾草",drops:10}]},
-  {name:"阿育吠陀",note:"",tags:[],ingredients:[{oil:"姜黄",drops:5},{oil:"生姜",drops:5},{oil:"杜松浆果",drops:10},{oil:"苦橙叶",drops:10},{oil:"迷迭香",drops:5},{oil:"柠檬",drops:10},{oil:"圆柚",drops:5}]},
-  {name:"缓解头痛",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"薰衣草",drops:5},{oil:"生姜",drops:5},{oil:"马郁兰",drops:7},{oil:"舒缓",drops:15}]},
-  {name:"白发变黑（女士）",note:"",tags:[],ingredients:[{oil:"乳香",drops:7},{oil:"快乐鼠尾草",drops:10},{oil:"依兰依兰",drops:5},{oil:"生姜",drops:7},{oil:"薰衣草",drops:5}]},
-  {name:"白发变黑（男士）",note:"",tags:[],ingredients:[{oil:"迷迭香",drops:10},{oil:"薰衣草",drops:10},{oil:"雪松",drops:10},{oil:"永久花",drops:5}]},
-  {name:"头屑清爽",note:"",tags:[],ingredients:[{oil:"薰衣草",drops:10},{oil:"雪松",drops:20},{oil:"迷迭香",drops:10},{oil:"丝柏",drops:15},{oil:"茶树",drops:20}]},
-  {name:"口腔溃疡1",note:"",tags:[],ingredients:[{oil:"丁香花蕾",drops:5},{oil:"茶树",drops:10},{oil:"薰衣草",drops:5},{oil:"没药",drops:5},{oil:"乳香",drops:5}]},
-  {name:"口腔溃疡2",note:"",tags:[],ingredients:[{oil:"永久花",drops:5},{oil:"茶树",drops:10},{oil:"麦卢卡",drops:10},{oil:"月桂叶",drops:10},{oil:"佛手柑",drops:20},{oil:"薰衣草",drops:20}]},
-  {name:"扁桃腺炎",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"百里香",drops:5},{oil:"小豆蔻",drops:5},{oil:"尤加利",drops:5},{oil:"保卫",drops:5},{oil:"顺畅呼吸",drops:5}]},
-  {name:"慢性阑尾炎",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"柠檬草",drops:5},{oil:"西班牙牛至",drops:3},{oil:"保卫",drops:3},{oil:"乐活",drops:10},{oil:"新瑞活力",drops:5},{oil:"完美修护",drops:5},{oil:"乳香",drops:10}]},
-  {name:"结石、胆囊炎",note:"",tags:[],ingredients:[{oil:"罗勒",drops:5},{oil:"冬青",drops:5},{oil:"柠檬",drops:10},{oil:"天竺葵",drops:5},{oil:"迷迭香",drops:5},{oil:"圆柚",drops:10},{oil:"莱姆",drops:10},{oil:"椒样薄荷",drops:5},{oil:"乳香",drops:10}]},
-  {name:"脚气、灰指甲",note:"",tags:[],ingredients:[{oil:"香蜂草",drops:3},{oil:"保卫",drops:7},{oil:"茶树",drops:10},{oil:"西班牙牛至",drops:10},{oil:"广藿香",drops:5}]},
-  {name:"甲亢、甲减",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:9},{oil:"丁香花蕾",drops:12},{oil:"柠檬草",drops:15},{oil:"没药",drops:12},{oil:"乳香",drops:12}]},
-  {name:"降压仪式",note:"",tags:[],ingredients:[{oil:"依兰依兰",drops:10},{oil:"香蜂草",drops:8},{oil:"马郁兰",drops:15},{oil:"乳香",drops:15},{oil:"薰衣草",drops:12}]},
-  {name:"伤筋动骨",note:"",tags:[],ingredients:[{oil:"完美修护",drops:10},{oil:"乳香",drops:10},{oil:"生姜",drops:10},{oil:"西班牙牛至",drops:10},{oil:"冬青",drops:15},{oil:"柠檬草",drops:15},{oil:"舒缓",drops:5}]},
-  {name:"干眼症",note:"",tags:[],ingredients:[{oil:"薰衣草",drops:5},{oil:"乳香",drops:5},{oil:"罗马洋甘菊",drops:5},{oil:"快乐鼠尾草",drops:10},{oil:"古巴香脂",drops:5},{oil:"完美修护",drops:5}]},
-  {name:"儿童抚触",note:"",tags:[],ingredients:[{oil:"生姜",drops:3},{oil:"保卫",drops:3},{oil:"西伯利亚冷杉",drops:5},{oil:"乐活",drops:5},{oil:"没药",drops:5},{oil:"乳香",drops:5}]},
-  {name:"儿童脾胃",note:"",tags:[],ingredients:[{oil:"红橘",drops:10},{oil:"小茴香",drops:2},{oil:"生姜",drops:3},{oil:"乐活",drops:5}]},
-  {name:"视力养护",note:"",tags:[],ingredients:[{oil:"乳香",drops:3},{oil:"柠檬草",drops:3},{oil:"永久花",drops:2},{oil:"快乐鼠尾草",drops:5}]},
-  {name:"驱蚊喷雾",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"柠檬尤加利",drops:5},{oil:"尤加利",drops:5},{oil:"香茅",drops:5},{oil:"天竺葵",drops:3},{oil:"薰衣草",drops:10},{oil:"天然防护",drops:20}]},
-  {name:"个子高高",note:"",tags:[],ingredients:[{oil:"檀香",drops:3},{oil:"永久花",drops:3},{oil:"芳香调理",drops:2},{oil:"乳香",drops:5},{oil:"西伯利亚冷杉",drops:5}]},
-  {name:"清咽止咳",note:"",tags:[],ingredients:[{oil:"乳香",drops:5},{oil:"西伯利亚冷杉",drops:3},{oil:"尤加利",drops:3},{oil:"保卫",drops:2},{oil:"顺畅呼吸",drops:5}]},
-  {name:"通鼻消炎",note:"",tags:[],ingredients:[{oil:"茶树",drops:2},{oil:"椒样薄荷",drops:3},{oil:"乳香",drops:3},{oil:"蓝艾菊",drops:1},{oil:"尤加利",drops:3},{oil:"迷迭香",drops:2},{oil:"顺畅呼吸",drops:5}]},
-  {name:"蚊虫叮咬1",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"茶树",drops:3},{oil:"薰衣草",drops:3},{oil:"乳香",drops:2},{oil:"罗勒",drops:3},{oil:"天然防护",drops:5}]},
-  {name:"蚊虫叮咬2",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:5},{oil:"香茅",drops:5},{oil:"柠檬草",drops:5},{oil:"天然防护",drops:10}]},
-  {name:"学霸神助",note:"",tags:[],ingredients:[{oil:"檀香",drops:2},{oil:"完美修护",drops:2},{oil:"椒样薄荷",drops:4},{oil:"全神贯注",drops:8},{oil:"罗勒",drops:2},{oil:"迷迭香",drops:4},{oil:"乳香",drops:4}]},
-  {name:"磨牙安抚",note:"",tags:[],ingredients:[{oil:"佛手柑",drops:5},{oil:"罗勒",drops:5},{oil:"芳香调理",drops:5},{oil:"古巴香脂",drops:5},{oil:"安定情绪",drops:5}]},
-  {name:"免疫助力",note:"",tags:[],ingredients:[{oil:"野橘",drops:5},{oil:"茶树",drops:5},{oil:"侧柏",drops:3},{oil:"姜黄",drops:3},{oil:"保卫",drops:5},{oil:"乳香",drops:5}]},
-  {name:"腺样体肥大",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:3},{oil:"百里香",drops:2},{oil:"茶树",drops:3},{oil:"尤加利",drops:2},{oil:"雪松",drops:3},{oil:"顺畅呼吸",drops:5}]},
-  {name:"退烧方案",note:"",tags:[],ingredients:[{oil:"顺畅呼吸",drops:3},{oil:"保卫",drops:5},{oil:"椒样薄荷",drops:5},{oil:"茶树",drops:3},{oil:"薰衣草",drops:2},{oil:"乳香",drops:5}]},
-  {name:"手足口症",note:"",tags:[],ingredients:[{oil:"茶树",drops:3},{oil:"香蜂草",drops:3},{oil:"丁香花蕾",drops:3},{oil:"月桂叶",drops:3},{oil:"保卫",drops:3},{oil:"古巴香脂",drops:3}]},
-  {name:"湿疹修复",note:"",tags:[],ingredients:[{oil:"蓝艾菊",drops:2},{oil:"茶树",drops:2},{oil:"乳香",drops:3},{oil:"天竺葵",drops:3},{oil:"广藿香",drops:3},{oil:"罗马洋甘菊",drops:5}]},
-  {name:"抽动症",note:"",tags:[],ingredients:[{oil:"罗马洋甘菊",drops:3},{oil:"安定情绪",drops:5},{oil:"雪松",drops:3},{oil:"岩兰草",drops:3},{oil:"乳香",drops:5}]},
-  {name:"头疗生发",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:10},{oil:"茶树",drops:10},{oil:"迷迭香",drops:10},{oil:"丝柏",drops:20},{oil:"生姜",drops:10},{oil:"雪松",drops:20},{oil:"薰衣草",drops:10},{oil:"乳香",drops:14},{oil:"安定情绪",drops:14}]},
-  {name:"1、呼吸系统细胞律动（含香蜂草）",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"茶树",drops:4},{oil:"芳香调理",drops:4},{oil:"顺畅呼吸",drops:4},{oil:"迷迭香",drops:4},{oil:"尤加利",drops:4},{oil:"香蜂草",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"1、呼吸系统细胞律动（不含香蜂草）",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"茶树",drops:4},{oil:"芳香调理",drops:4},{oil:"顺畅呼吸",drops:4},{oil:"迷迭香",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"2、神经系统细胞律动",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"百里香",drops:4},{oil:"丁香花蕾",drops:4},{oil:"芳香调理",drops:4},{oil:"柠檬草",drops:4},{oil:"香蜂草",drops:4},{oil:"广藿香",drops:4},{oil:"佛手柑",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"3、消化系统细胞律动",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"百里香",drops:4},{oil:"芳香调理",drops:4},{oil:"佛手柑",drops:4},{oil:"芫荽",drops:4},{oil:"乐活",drops:4},{oil:"生姜",drops:4},{oil:"天竺葵",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"4、骨骼系统细胞律动（炎症控制）",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"茶树",drops:4},{oil:"冬青",drops:4},{oil:"芳香调理",drops:4},{oil:"柠檬草",drops:4},{oil:"西伯利亚冷杉",drops:4},{oil:"舒缓",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"5、淋巴系统细胞律动",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"迷迭香",drops:4},{oil:"芳香调理",drops:4},{oil:"柠檬草",drops:4},{oil:"新瑞活力",drops:4},{oil:"元气",drops:4},{oil:"柠檬",drops:4},{oil:"圆柚",drops:4},{oil:"生姜",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"6、生殖系统细胞律动",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"西班牙牛至",drops:4},{oil:"茶树",drops:4},{oil:"芳香调理",drops:4},{oil:"薰衣草",drops:4},{oil:"广藿香",drops:4},{oil:"芫荽",drops:4},{oil:"快乐鼠尾草",drops:4},{oil:"檀香",drops:4},{oil:"丁香花蕾",drops:4},{oil:"依兰依兰",drops:4},{oil:"天竺葵",drops:4},{oil:"温柔呵护",drops:4},{oil:"元气",drops:4},{oil:"温柔呵护",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"7、免疫系统细胞律动",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"西班牙牛至",drops:4},{oil:"茶树",drops:4},{oil:"芳香调理",drops:4},{oil:"西伯利亚冷杉",drops:4},{oil:"丝柏",drops:4},{oil:"柠檬",drops:4},{oil:"莱姆",drops:4},{oil:"圆柚",drops:4},{oil:"保卫",drops:4},{oil:"丁香花蕾",drops:4},{oil:"百里香",drops:4},{oil:"元气",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"8、循环系统细胞律动",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"百里香",drops:4},{oil:"芳香调理",drops:4},{oil:"柠檬草",drops:4},{oil:"保卫",drops:4},{oil:"马郁兰",drops:4},{oil:"罗勒",drops:4},{oil:"薰衣草",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"9、内分泌系统细胞律动",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"快乐鼠尾草",drops:4},{oil:"芳香调理",drops:4},{oil:"天竺葵",drops:4},{oil:"保卫",drops:4},{oil:"依兰依兰",drops:4},{oil:"小茴香",drops:4},{oil:"薰衣草",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"10、感冒发烧系统细胞律动",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"西班牙牛至",drops:4},{oil:"百里香",drops:4},{oil:"保卫",drops:4},{oil:"芳香调理",drops:4},{oil:"柠檬草",drops:4},{oil:"尤加利",drops:4},{oil:"茶树",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"11、肌肉系统细胞律动（缓解疼痛）",note:"",tags:[],ingredients:[{oil:"乳香",drops:4},{oil:"生姜",drops:4},{oil:"芳香调理",drops:4},{oil:"冬青",drops:4},{oil:"柠檬草",drops:4},{oil:"西伯利亚冷杉",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"12、芳香调理技术",note:"",tags:[],ingredients:[{oil:"安定情绪",drops:4},{oil:"薰衣草",drops:4},{oil:"茶树",drops:4},{oil:"保卫",drops:4},{oil:"芳香调理",drops:4},{oil:"舒缓",drops:4},{oil:"野橘",drops:4},{oil:"椒样薄荷",drops:4}]},
-  {name:"芳心调理技术（单瓶购买）",note:"",tags:[],ingredients:[{oil:"静谧",drops:4},{oil:"抚慰",drops:4},{oil:"宽容",drops:4},{oil:"热情",drops:4},{oil:"欢欣",drops:4},{oil:"鼓舞",drops:4}]},
-  {name:"芳心调理技术（套装购买）",note:"",tags:[],ingredients:[{oil:"静谧",drops:4},{oil:"抚慰",drops:4},{oil:"宽容",drops:4},{oil:"热情",drops:4},{oil:"欢欣",drops:4},{oil:"鼓舞",drops:4}]},
-  {name:"头疼",note:"",tags:[],ingredients:[{oil:"尤加利",drops:1},{oil:"薰衣草",drops:1},{oil:"冬青",drops:2},{oil:"椒样薄荷",drops:2}]},
-  {name:"痤疮粉刺",note:"",tags:[],ingredients:[{oil:"茶树",drops:1}]},
-  {name:"植物热玛吉",note:"",tags:[],ingredients:[{oil:"玫瑰",drops:5},{oil:"丝柏",drops:10},{oil:"西洋蓍草",drops:20},{oil:"永久花",drops:5},{oil:"乳香",drops:10}]},
-  {name:"近视老花",note:"",tags:[],ingredients:[{oil:"乳香",drops:10},{oil:"快乐鼠尾草",drops:10},{oil:"花样年华焕肤油",drops:10}]},
-  {name:"记忆力",note:"",tags:[],ingredients:[{oil:"罗勒",drops:1},{oil:"迷迭香",drops:2},{oil:"佛手柑",drops:2}]},
-  {name:"皮肤老化",note:"",tags:[],ingredients:[{oil:"花样年华焕肤油",drops:3},{oil:"西洋蓍草",drops:3}]},
-  {name:"生发配方",note:"",tags:[],ingredients:[{oil:"生姜",drops:1},{oil:"迷迭香",drops:1},{oil:"乳香",drops:1},{oil:"雪松",drops:1},{oil:"薰衣草",drops:1},{oil:"扁柏",drops:1}]},
-  {name:"头皮屑",note:"",tags:[],ingredients:[{oil:"茶树",drops:1},{oil:"丝柏",drops:1},{oil:"迷迭香",drops:1}]},
-  {name:"生发2",note:"",tags:[],ingredients:[{oil:"生姜",drops:1},{oil:"薰衣草",drops:2},{oil:"迷迭香",drops:3},{oil:"雪松",drops:4}]},
-  {name:"白发转黑发",note:"",tags:[],ingredients:[{oil:"完美修护",drops:16},{oil:"乳香",drops:16},{oil:"雪松",drops:16},{oil:"薰衣草",drops:16},{oil:"丝柏",drops:16},{oil:"快乐鼠尾草",drops:16},{oil:"生姜",drops:16},{oil:"侧柏",drops:16},{oil:"扁柏",drops:16},{oil:"依兰依兰",drops:16},{oil:"迷迭香",drops:16},{oil:"檀香",drops:10},{oil:"西伯利亚冷杉",drops:10}]},
-  {name:"鼻炎用油",note:"",tags:[],ingredients:[{oil:"香蜂草",drops:4},{oil:"顺畅呼吸",drops:20},{oil:"椒样薄荷",drops:4},{oil:"罗勒",drops:6},{oil:"尤加利",drops:6}]},
-  {name:"中耳炎",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:1},{oil:"罗勒",drops:2},{oil:"茶树",drops:2},{oil:"薰衣草",drops:2}]},
-  {name:"口臭",note:"",tags:[],ingredients:[{oil:"绿薄荷",drops:1}]},
-  {name:"牙龈牙周",note:"",tags:[],ingredients:[{oil:"茶树",drops:1},{oil:"丁香花蕾",drops:1}]},
-  {name:"烧烫伤",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:2},{oil:"茶树",drops:2},{oil:"薰衣草",drops:2}]},
-  {name:"儿童长高",note:"",tags:[],ingredients:[{oil:"西伯利亚冷杉",drops:6},{oil:"乳香",drops:5},{oil:"檀香",drops:3},{oil:"永久花",drops:3},{oil:"芳香调理",drops:2}]},
-  {name:"湿疹",note:"",tags:[],ingredients:[{oil:"绿薄荷",drops:1},{oil:"侧柏",drops:5},{oil:"蓝艾菊",drops:5},{oil:"广藿香",drops:10},{oil:"乳香",drops:10}]},
-  {name:"退烧神器",note:"",tags:[],ingredients:[{oil:"杜松浆果",drops:3},{oil:"椒样薄荷",drops:4},{oil:"永久花",drops:3},{oil:"山鸡椒",drops:3},{oil:"保卫",drops:4},{oil:"柠檬",drops:3},{oil:"乳香",drops:4}]},
-  {name:"感冒咳嗽",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:1},{oil:"柠檬",drops:2},{oil:"乳香",drops:3},{oil:"西班牙牛至",drops:4},{oil:"保卫",drops:5}]},
-  {name:"腹泻",note:"",tags:[],ingredients:[{oil:"西班牙牛至",drops:1},{oil:"乐活",drops:1},{oil:"生姜",drops:1},{oil:"罗勒",drops:1}]},
-  {name:"晕车恶心",note:"",tags:[],ingredients:[{oil:"生姜",drops:1},{oil:"尤加利",drops:1},{oil:"佛手柑",drops:1},{oil:"椒样薄荷",drops:1},{oil:"乐活",drops:1}]},
-  {name:"醉酒",note:"",tags:[],ingredients:[{oil:"乐活",drops:2}]},
-  {name:"鸡眼/疣/痣",note:"",tags:[],ingredients:[{oil:"丁香花蕾",drops:1},{oil:"西班牙牛至",drops:1}]},
-  {name:"脚气",note:"",tags:[],ingredients:[{oil:"茶树",drops:1},{oil:"西班牙牛至",drops:1}]},
-  {name:"灰指甲2",note:"",tags:[],ingredients:[{oil:"茶树",drops:8},{oil:"西班牙牛至",drops:8},{oil:"百里香",drops:8}]},
-  {name:"丰胸挺拔",note:"",tags:[],ingredients:[{oil:"小茴香",drops:6},{oil:"依兰依兰",drops:4},{oil:"温柔呵护",drops:10},{oil:"西洋蓍草",drops:10},{oil:"快乐鼠尾草",drops:3}]},
-  {name:"痛经",note:"",tags:[],ingredients:[{oil:"斯里兰卡肉桂皮",drops:1},{oil:"玫瑰",drops:1},{oil:"丁香花蕾",drops:1},{oil:"薰衣草",drops:2}]},
-  {name:"亲密关系",note:"",tags:[],ingredients:[{oil:"快乐鼠尾草",drops:6},{oil:"茉莉呵护",drops:12},{oil:"檀香",drops:7},{oil:"依兰依兰",drops:6},{oil:"花样年华焕肤油",drops:5},{oil:"玫瑰呵护",drops:12}]},
-  {name:"前列腺养护",note:"",tags:[],ingredients:[{oil:"西班牙牛至",drops:2},{oil:"檀香",drops:3},{oil:"茉莉呵护",drops:4},{oil:"丝柏",drops:3},{oil:"乳香",drops:4},{oil:"永久花",drops:3},{oil:"迷迭香",drops:3},{oil:"快乐鼠尾草",drops:4}]},
-  {name:"手脚冰冷",note:"",tags:[],ingredients:[{oil:"生姜",drops:2},{oil:"圆柚",drops:2}]},
-  {name:"外阴瘙痒",note:"",tags:[],ingredients:[{oil:"茶树",drops:1},{oil:"没药",drops:1},{oil:"玫瑰草",drops:1},{oil:"佛手柑",drops:1}]},
-  {name:"淋巴排毒2",note:"",tags:[],ingredients:[{oil:"乳香",drops:1},{oil:"丝柏",drops:1},{oil:"迷迭香",drops:1},{oil:"柠檬草",drops:1},{oil:"永久花",drops:1},{oil:"新瑞活力",drops:1}]},
-  {name:"痔疮",note:"",tags:[],ingredients:[{oil:"没药",drops:1},{oil:"茶树",drops:1},{oil:"丝柏",drops:2},{oil:"永久花",drops:2}]},
-  {name:"便秘积食",note:"",tags:[],ingredients:[{oil:"乐活",drops:1},{oil:"柠檬",drops:1},{oil:"马郁兰",drops:1},{oil:"椒样薄荷",drops:1}]},
-  {name:"护肝排毒",note:"",tags:[],ingredients:[{oil:"当归",drops:1},{oil:"芫荽",drops:2},{oil:"元气",drops:3},{oil:"天竺葵",drops:3},{oil:"迷迭香",drops:7},{oil:"柠檬",drops:13}]},
-  {name:"痛风",note:"",tags:[],ingredients:[{oil:"百里香",drops:6},{oil:"杜松浆果",drops:8},{oil:"天竺葵",drops:10},{oil:"冬青",drops:10}]},
-  {name:"消除富贵包",note:"",tags:[],ingredients:[{oil:"柠檬草",drops:2},{oil:"乳香",drops:5},{oil:"芳香调理",drops:5},{oil:"生姜",drops:2},{oil:"舒缓",drops:3},{oil:"古巴香脂",drops:2}]},
-  {name:"焦虑",note:"",tags:[],ingredients:[{oil:"野橘",drops:1},{oil:"薰衣草",drops:2},{oil:"天竺葵",drops:2}]},
-  {name:"更年期",note:"",tags:[],ingredients:[{oil:"椒样薄荷",drops:2},{oil:"乳香",drops:3},{oil:"薰衣草",drops:3},{oil:"天竺葵",drops:4},{oil:"温柔呵护",drops:8},{oil:"快乐鼠尾草",drops:10},{oil:"罗马洋甘菊",drops:8}]},
-  {name:"失眠多梦",note:"",tags:[],ingredients:[{oil:"雪松",drops:1},{oil:"野橘",drops:1},{oil:"乳香",drops:1},{oil:"檀香",drops:1},{oil:"橙花",drops:1},{oil:"乐释",drops:1},{oil:"苦橙叶",drops:1},{oil:"薰衣草",drops:1},{oil:"马郁兰",drops:1},{oil:"佛手柑",drops:1},{oil:"岩兰草",drops:1},{oil:"罗马洋甘菊",drops:1}]},
-  {name:"稳定血糖",note:"",tags:[],ingredients:[{oil:"新瑞活力",drops:2},{oil:"斯里兰卡肉桂皮",drops:2},{oil:"芫荽",drops:2},{oil:"迷迭香",drops:2}]},
-  {name:"心脑血管护理",note:"",tags:[],ingredients:[{oil:"乳香",drops:2},{oil:"香蜂草",drops:1}]},
-  {name:"关节疼痛",note:"",tags:[],ingredients:[{oil:"乳香",drops:3},{oil:"舒缓",drops:2},{oil:"道格拉斯冷杉",drops:2},{oil:"柠檬草",drops:1}]},
-  {name:"高血压保健",note:"",tags:[],ingredients:[{oil:"依兰依兰",drops:10},{oil:"薰衣草",drops:10},{oil:"马郁兰",drops:10},{oil:"乳香",drops:10},{oil:"香蜂草",drops:5}]}
-];
-
-// ============ STATE ============
-let recipes = [];
-let currentRecipe = null;
-let currentEditing = [];
-
-function loadRecipes() {}
-function saveRecipes() {}
-
-// ============ UTILS ============
-function calcCost(ingredients) {
-  return ingredients.reduce((sum, ing) => {
-    const ppd = OILS[ing.oil] || 0;
-    return sum + ppd * ing.drops;
-  }, 0);
-}
-
-function fmtPrice(n) { return '¥ ' + n.toFixed(2); }
-
-function showSection(name) {
-  document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
-  document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
-  document.getElementById('section-' + name).classList.add('active');
-  const tabs = document.querySelectorAll('.nav-tab');
-  const map = {search:0, manage:1, add:2, oils:3};
-  tabs[map[name]].classList.add('active');
-
-  if (name === 'oils') renderOils();
-  if (name === 'add') renderNewIngList();
-}
-
-// ============ SEARCH SECTION ============
-function filterRecipes() {
-  const q = document.getElementById('searchInput').value.trim().toLowerCase();
-  const filtered = q ? recipes.filter(r =>
-    r.name.toLowerCase().includes(q) ||
-    r.ingredients.some(i => i.oil.toLowerCase().includes(q) || (oilEn(i.oil)||'').toLowerCase().includes(q)) ||
-    (r.tags || []).some(t => t.toLowerCase().includes(q))
-  ) : recipes;
-  renderGrid(filtered);
-}
-
-function clearSearch() {
-  document.getElementById('searchInput').value = '';
-  _favFilterActive = false;
-  const btn = document.getElementById('favFilterBtn');
-  if (btn) { btn.classList.remove('btn-primary'); btn.classList.add('btn-outline'); btn.style.color = ''; }
-  filterRecipes();
-  closeDetail();
-}
-
-function renderGrid(list) {
-  const grid = document.getElementById('recipeGrid');
-  if (!list.length) {
-    grid.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><div class="empty-state-icon">🔍</div><div class="empty-state-text">没有找到相关配方</div></div>';
-    return;
-  }
-  grid.innerHTML = list.map((r, idx) => {
-    const realIdx = recipes.indexOf(r);
-    const cost = calcCost(r.ingredients);
-    const oilNames = r.ingredients.map(i => i.oil).join('、');
-    const tags = (r.tags || []).map(t => `<span class="tag">${t}</span>`).join(' ');
-    return `<div class="recipe-card" onclick="selectRecipe(${realIdx})">
-      <div class="recipe-card-name">${r.name}</div>
-      ${tags ? '<div style="margin:4px 0">'+tags+'</div>' : ''}
-      <div class="recipe-card-oils">${oilNames}</div>
-      <div style="margin-top:8px">
-        <div class="recipe-card-price" style="margin:0">💰 ${fmtCostWithRetail(r.ingredients)}</div>
-      </div>
-    </div>`;
-  }).join('');
-}
-
-function selectRecipe(idx) {
-  currentRecipe = idx;
-  currentEditing = JSON.parse(JSON.stringify(recipes[idx].ingredients));
-  document.getElementById('detailOverlay').style.display = 'block';
-  document.body.style.overflow = 'hidden';
-  _cardViewFromEditor = false;
-  switchToCardView();
-  document.getElementById('detailPanel').scrollTop = 0;
-
-  // First-time QR prompt
-  if (currentUser.id && !userBrand.qr_code && !localStorage.getItem('qr_prompted')) {
-    localStorage.setItem('qr_prompted', '1');
-    setTimeout(async () => {
-      if (await _confirm('还没有上传你的二维码，上传后配方卡片会自动带上。现在去设置？')) {
-        closeDetail();
-        showSection('mydiary');
-        showDiaryTab('brand');
-      }
-    }, 500);
-  }
-}
-
-let _cardViewFromEditor = false;
-
-function _closeCardView() {
-  if (_cardViewFromEditor) {
-    switchToEditorView();
-  } else {
-    closeDetail();
-  }
-}
-
-function switchToCardView() {
-  document.getElementById('cardViewMode').style.display = '';
-  document.getElementById('editorViewMode').style.display = 'none';
-  const backBtn = document.getElementById('cardBackToEditBtn');
-  if (backBtn) backBtn.style.display = _cardViewFromEditor ? '' : 'none';
-  renderCardView();
-}
-
-function switchToEditorView() {
-  document.getElementById('cardViewMode').style.display = 'none';
-  document.getElementById('editorViewMode').style.display = '';
-  renderDetail();
-}
-
-function saveAndShowCard() {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  r.name = document.getElementById('detailNameInput')?.value || r.name;
-  r.ingredients = JSON.parse(JSON.stringify(currentEditing));
-  r.note = document.getElementById('detailNoteEdit')?.value ?? r.note;
-  r._dirty = true;
-
-  _editSnapshot = null; // Clear snapshot — changes are intentional
-
-  // Save diary recipe to diary API, public recipe to recipes API
-  if (r._diary_id) {
-    _apiFetch('/api/diary/' + r._diary_id, { method: 'PUT', body: JSON.stringify({
-      name: r.name, note: r.note, ingredients: r.ingredients.map(i => ({ oil: i.oil, drops: i.drops }))
-    })}).then(() => { if (!window._writeQueued) _showToast('✅ 已保存'); loadDiary(); }).catch(() => _showToast('保存失败'));
-  } else {
-    if (!_canEdit(r)) { alert('没有权限修改此配方'); return; }
-    _apiSaveRecipes();
-    if (!window._writeQueued) _showToast('✅ 已保存');
-  }
-  _cardViewFromEditor = true;
-  switchToCardView();
-  filterRecipes();
-  renderManage();
-}
-
-let _cardLang = 'cn';
-
-function renderCardView() {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  const canEdit = _canEdit(r);
-  const loggedIn = currentUser.id !== null;
-
-  if (_cardViewFromEditor) {
-    // Preview mode from editor — no action buttons
-    document.getElementById('cardViewActions').innerHTML = '';
-  } else {
-    // Opened from search page — show favorite + save-as-mine buttons
-    let btns = '';
-    if (loggedIn && r._id) {
-      const fav = isFavorite(r);
-      btns += '<button class="btn btn-outline btn-sm" onclick="toggleViewerFav(this)" style="font-size:12px">' + (fav ? '★ 已收藏' : '☆ 收藏') + '</button>';
-      // Only show "存为我的" for public library recipes (has _id, not a diary temp recipe)
-      if (!r._diary_id) {
-        btns += '<button class="btn btn-outline btn-sm" onclick="saveAsMine()" style="font-size:12px">📔 存为我的</button>';
-      }
-    }
-    document.getElementById('cardViewActions').innerHTML = btns;
-  }
-
-  _cardLang = 'cn';
-  _generateCardImage();
-}
-
-function _generateCardImage() {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  const container = document.getElementById('cardViewContainer');
-  container.innerHTML = '<div style="text-align:center;padding:40px;color:var(--text-light)">生成中...</div>';
-
-  // Render card in selected language — both render into cardViewContainer for same width
-  if (_cardLang === 'en') {
-    _renderEnViewerCard(r);
-  } else {
-    renderViewerCard(currentRecipe);
-  }
-
-  const cardEl = document.querySelector('#cardViewContainer > div');
-  if (!cardEl) return;
-
-  html2canvas(cardEl, { scale: 2, backgroundColor: '#faf7f0', useCORS: true }).then(canvas => {
-    const imgUrl = canvas.toDataURL('image/png');
-    const recipeName = r.name;
-    const isEn = _cardLang === 'en';
-
-    container.innerHTML =
-      // Language toggle
-      '<div style="display:flex;justify-content:center;margin-bottom:12px">' +
-        '<div style="display:flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden">' +
-          '<button class="btn btn-sm" onclick="_cardLang=\'cn\';_generateCardImage()" style="border:none;border-radius:0;font-size:12px;padding:6px 16px;' + (!isEn ? 'background:var(--sage);color:white' : 'background:white;color:var(--text-mid)') + '">中文</button>' +
-          '<button class="btn btn-sm" onclick="_cardLang=\'en\';_generateCardImage()" style="border:none;border-radius:0;font-size:12px;padding:6px 16px;' + (isEn ? 'background:var(--sage);color:white' : 'background:white;color:var(--text-mid)') + '">English</button>' +
-        '</div>' +
-      '</div>' +
-      // Card image
-      '<img id="cardImage" src="' + imgUrl + '" style="width:100%;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.1)">' +
-      // QR code prompt if not set
-      (!userBrand.qr_code && currentUser.id ? '<div onclick="_goAddQrFromCard()" style="text-align:center;margin-top:8px;padding:6px 12px;background:var(--cream);border:1px dashed var(--border);border-radius:8px;cursor:pointer;font-size:12px;color:var(--text-mid)">' +
-        '📱 添加二维码，让配方卡片带上你的联系方式</div>' : '') +
-      // Actions
-      '<div style="display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap">' +
-        '<button class="btn btn-primary btn-sm" onclick="_saveCurrentCardImage()" style="font-size:12px">💾 保存图片</button>' +
-        '<button class="btn btn-outline btn-sm" onclick="copyRecipeText()" style="font-size:12px">📋 复制文字</button>' +
-        (isEn && currentUser.id ? '<button class="btn btn-outline btn-sm" onclick="_editTranslation()" style="font-size:12px">✏️ 修改翻译</button>' : '') +
-      '</div>';
-  }).catch(() => { if (tempDiv) tempDiv.remove(); });
-}
-
-function toggleViewerFav(btn) {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  if (!r._id) return;
-  toggleFavorite(r._id, btn);
-}
-
-function renderViewerCard(idx) {
-  const r = recipes[idx];
-
-  const eos = r.ingredients.filter(i => i.oil !== '椰子油');
-  const coconut = r.ingredients.find(i => i.oil === '椰子油');
-  const totalEO = eos.reduce((s, i) => s + i.drops, 0);
-  const cDrops = coconut ? coconut.drops : 0;
-
-  let html = '<div id="recipe-card-export-viewer" style="' +
-    'background:linear-gradient(145deg,#faf7f0 0%,#f5ede0 100%);border-radius:20px;padding:36px;' +
-    'font-family:Noto Serif SC,serif;max-width:480px;border:1px solid #e0ccaa;position:relative;overflow:hidden">';
-  html += '<div style="font-size:11px;letter-spacing:3px;color:var(--sage);margin-bottom:8px">doTERRA · 来自大地的礼物</div>';
-  html += '<div style="font-size:26px;font-weight:700;color:var(--text-dark);margin-bottom:6px;line-height:1.3">' + r.name + '</div>';
-  html += '<div style="width:80px;height:2px;background:linear-gradient(90deg,var(--sage),var(--gold));border-radius:2px;margin:14px 0"></div>';
-
-  html += '<ul style="list-style:none;margin-bottom:20px;padding:0">';
-  eos.forEach(ing => {
-    const ppd = OILS[ing.oil] || 0;
-    const rpd = oilRetailPpd(ing.oil);
-    const sub = ppd * ing.drops;
-    const rsub = rpd * ing.drops;
-    html += '<li style="display:flex;align-items:center;padding:9px 0;border-bottom:1px solid rgba(180,150,100,0.15);font-size:14px">' +
-      '<span style="flex:1;color:var(--text-dark);font-weight:500">' + ing.oil + '</span>' +
-      '<span style="width:50px;text-align:right;color:var(--sage-dark);font-size:13px">' + ing.drops + ' 滴</span>' +
-      '<span style="width:60px;text-align:right;color:var(--text-light);font-size:12px">' + (sub > 0 ? fmtPrice(sub) : '') + '</span>' +
-      (rsub > 0 && rsub !== sub ? '<span style="width:55px;text-align:right;color:var(--text-light);font-size:10px;text-decoration:line-through">' + fmtPrice(rsub) + '</span>' : '') +
-      '</li>';
-  });
-  html += '</ul>';
-
-  if (totalEO > 0) {
-    const totalAll = totalEO + cDrops;
-    const vol = Math.round(totalAll / DROPS_PER_ML);
-    const ratio = cDrops > 0 ? Math.round(cDrops / totalEO) : 0;
-    let desc = '';
-    if (cDrops > 0 && vol >= 5) {
-      desc = '该配方适用于 ' + vol + 'ml 瓶，其中纯精油 ' + totalEO + ' 滴，其余用椰子油填满，稀释比例为 1:' + ratio;
-    } else if (cDrops > 0) {
-      desc = '该配方适用于单次用量（共' + totalAll + '滴），其中纯精油 ' + totalEO + ' 滴，椰子油 ' + cDrops + ' 滴，稀释比例为 1:' + ratio;
-    }
-    if (desc) html += '<div style="padding:10px 14px;background:rgba(180,150,100,0.08);border-radius:10px;font-size:12px;color:var(--text-mid);margin-bottom:12px">' + desc + '</div>';
-  }
-
-  if (r.note) html += '<div style="font-size:12px;color:var(--brown-light);margin-bottom:12px;font-style:italic">📝 ' + r.note + '</div>';
-
-  const total = calcCost(r.ingredients);
-  const retailTotal = calcRetailCost(r.ingredients);
-  html += '<div style="background:linear-gradient(135deg,var(--sage),#5a7d5e);border-radius:12px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center">' +
-    '<span style="color:rgba(255,255,255,0.85);font-size:13px;letter-spacing:1px">配方总成本</span>' +
-    '<span style="color:white;font-size:20px;font-weight:700">' + fmtPrice(total) +
-    (retailTotal > 0 && retailTotal !== total ? ' <span style="text-decoration:line-through;opacity:0.6;font-size:13px">' + fmtPrice(retailTotal) + '</span>' : '') +
-    '</span></div>';
-  html += '<div style="margin-top:16px;text-align:center;font-size:11px;color:var(--text-light);letter-spacing:1px">制作日期：' + new Date().toLocaleDateString('zh-CN') + '</div>';
-
-  // Brand
-  html += _buildBrandHtml();
-
-  html += '</div>';
-
-  document.getElementById('cardViewContainer').innerHTML = html;
-}
-
-function _renderEnViewerCard(r) {
-  const eos = r.ingredients.filter(i => i.oil !== '椰子油');
-  const coconut = r.ingredients.find(i => i.oil === '椰子油');
-  const totalEO = eos.reduce((s, i) => s + i.drops, 0);
-  const cDrops = coconut ? coconut.drops : 0;
-  const total = calcCost(r.ingredients);
-  const retailTotal = calcRetailCost(r.ingredients);
-
-  let html = '<div style="background:linear-gradient(145deg,#faf7f0 0%,#f5ede0 100%);border-radius:20px;padding:36px;font-family:\'Noto Serif SC\',serif;max-width:480px;border:1px solid #e0ccaa;position:relative;overflow:hidden">';
-  html += '<div style="font-size:11px;letter-spacing:3px;color:var(--sage);margin-bottom:8px">doTERRA · Gifts of the Earth</div>';
-  html += '<div style="font-size:26px;font-weight:700;color:var(--text-dark);margin-bottom:6px;line-height:1.3">' + recipeNameEn(r.name) + '</div>';
-  html += '<div style="width:80px;height:2px;background:linear-gradient(90deg,var(--sage),var(--gold));border-radius:2px;margin:14px 0"></div>';
-
-  html += '<ul style="list-style:none;margin-bottom:20px;padding:0">';
-  eos.forEach(ing => {
-    const en = oilEn(ing.oil) || ing.oil;
-    const ppd = OILS[ing.oil] || 0;
-    const rpd = oilRetailPpd(ing.oil);
-    const sub = ppd * ing.drops;
-    const rsub = rpd * ing.drops;
-    html += '<li style="display:flex;align-items:center;padding:9px 0;border-bottom:1px solid rgba(180,150,100,0.15);font-size:14px">' +
-      '<span style="flex:1;color:var(--text-dark);font-weight:500">' + en + '</span>' +
-      '<span style="width:50px;text-align:right;color:var(--sage-dark);font-size:13px">' + ing.drops + ' drops</span>' +
-      '<span style="width:60px;text-align:right;color:var(--text-light);font-size:12px">' + (sub > 0 ? fmtPrice(sub) : '') + '</span>' +
-      (rsub > 0 && rsub !== sub ? '<span style="width:55px;text-align:right;color:var(--text-light);font-size:10px;text-decoration:line-through">' + fmtPrice(rsub) + '</span>' : '') +
-    '</li>';
-  });
-  html += '</ul>';
-
-  if (totalEO > 0) {
-    const _totalAll = totalEO + cDrops;
-    const _vol = Math.round(_totalAll / DROPS_PER_ML);
-    const _ratio = cDrops > 0 ? Math.round(cDrops / totalEO) : 0;
-    let _desc = '';
-    if (cDrops > 0 && _vol >= 5) {
-      _desc = 'For ' + _vol + 'ml bottle: ' + totalEO + ' drops essential oils, fill with coconut oil. Dilution 1:' + _ratio;
-    } else if (cDrops > 0) {
-      _desc = 'Single use (' + _totalAll + ' drops): ' + totalEO + ' drops essential oils + ' + cDrops + ' drops coconut oil. Dilution 1:' + _ratio;
-    }
-    if (_desc) html += '<div style="padding:10px 14px;background:rgba(180,150,100,0.08);border-radius:10px;font-size:12px;color:var(--text-mid);margin-bottom:12px">' + _desc + '</div>';
-  }
-
-  if (r.note) html += '<div style="font-size:12px;color:var(--brown-light);margin-bottom:12px;font-style:italic">📝 ' + r.note + '</div>';
-
-  html += '<div style="background:linear-gradient(135deg,var(--sage),#5a7d5e);border-radius:12px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center">' +
-    '<span style="color:rgba(255,255,255,0.85);font-size:13px;letter-spacing:1px">Total Cost</span>' +
-    '<span style="color:white;font-size:20px;font-weight:700">' + fmtPrice(total) +
-    (retailTotal > 0 && retailTotal !== total ? ' <span style="text-decoration:line-through;opacity:0.6;font-size:13px">' + fmtPrice(retailTotal) + '</span>' : '') +
-    '</span></div>';
-  html += '<div style="margin-top:16px;text-align:center;font-size:11px;color:var(--text-light);letter-spacing:1px">' + new Date().toLocaleDateString('en-US', {year:'numeric',month:'long',day:'numeric'}) + '</div>';
-  html += _buildBrandHtml();
-  html += '</div>';
-
-  document.getElementById('cardViewContainer').innerHTML = html;
-}
-
-function _buildEnCard(r) {
-  const eos = r.ingredients.filter(i => i.oil !== '椰子油');
-  const coconut = r.ingredients.find(i => i.oil === '椰子油');
-  const totalEO = eos.reduce((s, i) => s + i.drops, 0);
-  const cDrops = coconut ? coconut.drops : 0;
-  const total = calcCost(r.ingredients);
-  const retailTotal = calcRetailCost(r.ingredients);
-
-  // Match Chinese card's exact same structure and spacing
-  let html = '<div style="background:linear-gradient(145deg,#faf7f0 0%,#f5ede0 100%);border-radius:20px;padding:36px;font-family:\'Noto Serif SC\',serif;max-width:480px;border:1px solid #e0ccaa;overflow:hidden;position:relative">';
-  html += '<div style="font-size:11px;letter-spacing:3px;color:var(--sage);margin-bottom:8px">doTERRA · Gifts of the Earth</div>';
-  html += '<div style="font-size:26px;font-weight:700;color:var(--text-dark);margin-bottom:6px;line-height:1.3">' + recipeNameEn(r.name) + '</div>';
-  html += '<div style="width:80px;height:2px;background:linear-gradient(90deg,var(--sage),var(--gold));border-radius:2px;margin:14px 0"></div>';
-
-  html += '<ul style="list-style:none;margin-bottom:20px;padding:0">';
-  eos.forEach(ing => {
-    const en = oilEn(ing.oil) || ing.oil;
-    const ppd = OILS[ing.oil] || 0;
-    const rpd = oilRetailPpd(ing.oil);
-    const sub = ppd * ing.drops;
-    const rsub = rpd * ing.drops;
-    html += '<li style="display:flex;align-items:center;padding:9px 0;border-bottom:1px solid rgba(180,150,100,0.15);font-size:14px">' +
-      '<span style="flex:1;color:var(--text-dark);font-weight:500">' + en + '</span>' +
-      '<span style="width:60px;text-align:right;color:var(--sage-dark);font-size:13px">' + ing.drops + ' drops</span>' +
-      '<span style="width:60px;text-align:right;color:var(--text-light);font-size:12px">' + (sub > 0 ? fmtPrice(sub) : '') + '</span>' +
-      (rsub > 0 && rsub !== sub ? '<span style="width:55px;text-align:right;color:var(--text-light);font-size:10px;text-decoration:line-through">' + fmtPrice(rsub) + '</span>' : '') +
-    '</li>';
-  });
-  html += '</ul>';
-
-  if (totalEO > 0) {
-    const _totalAll = totalEO + cDrops;
-    const _vol = Math.round(_totalAll / DROPS_PER_ML);
-    const _ratio = cDrops > 0 ? Math.round(cDrops / totalEO) : 0;
-    let _desc = '';
-    if (cDrops > 0 && _vol >= 5) {
-      _desc = 'For ' + _vol + 'ml bottle: ' + totalEO + ' drops essential oils, fill with coconut oil. Dilution 1:' + _ratio;
-    } else if (cDrops > 0) {
-      _desc = 'Single use (' + _totalAll + ' drops): ' + totalEO + ' drops essential oils + ' + cDrops + ' drops coconut oil. Dilution 1:' + _ratio;
-    }
-    if (_desc) html += '<div style="padding:10px 14px;background:rgba(180,150,100,0.08);border-radius:10px;font-size:12px;color:var(--text-mid);margin-bottom:12px">' + _desc + '</div>';
-  }
-
-  if (r.note) html += '<div style="font-size:12px;color:var(--brown-light);margin-bottom:12px;font-style:italic">📝 ' + r.note + '</div>';
-
-  html += '<div style="background:linear-gradient(135deg,var(--sage),#5a7d5e);border-radius:12px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center">' +
-    '<span style="color:rgba(255,255,255,0.85);font-size:13px;letter-spacing:1px">Total Cost</span>' +
-    '<span style="color:white;font-size:20px;font-weight:700">' + fmtPrice(total) +
-    (retailTotal > 0 && retailTotal !== total ? ' <span style="text-decoration:line-through;opacity:0.6;font-size:13px">' + fmtPrice(retailTotal) + '</span>' : '') +
-    '</span></div>';
-  html += '<div style="margin-top:16px;text-align:center;font-size:11px;color:var(--text-light);letter-spacing:1px">' + new Date().toLocaleDateString('en-US', {year:'numeric',month:'long',day:'numeric'}) + '</div>';
-
-  html += _buildBrandHtml();
-  html += '</div>';
-
-  const div = document.createElement('div');
-  div.style.cssText = 'position:absolute;left:-9999px;top:0';
-  div.innerHTML = html;
-  document.body.appendChild(div);
-  return div;
-}
-
-let _shareLang = 'cn';
-
-function shareRecipe() {
-  if (currentRecipe === null) return;
-  _shareLang = 'cn';
-  _generateShareOverlay();
-}
-
-function _generateShareOverlay() {
-  const r = recipes[currentRecipe];
-  const isEn = _shareLang === 'en';
-
-  // Remove old overlay
-  document.querySelectorAll('[data-share-overlay]').forEach(el => el.remove());
-
-  let cardEl;
-  let tempDiv = null;
-  if (isEn) {
-    tempDiv = _buildEnCard(r);
-    cardEl = tempDiv.firstElementChild;
-  } else {
-    cardEl = document.querySelector('#cardViewContainer > div') || document.getElementById('recipe-card-export');
-  }
-  if (!cardEl) return;
-
-  const overlay = document.createElement('div');
-  overlay.setAttribute('data-share-overlay', '1');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.6);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px';
-  overlay.innerHTML = '<div style="color:white;font-size:15px">生成' + (isEn ? 'English' : '中文') + '卡片中...</div>';
-  document.body.appendChild(overlay);
-
-  html2canvas(cardEl, { scale: 2, backgroundColor: '#faf7f0', useCORS: true }).then(canvas => {
-    if (tempDiv) tempDiv.remove();
-    const imgUrl = canvas.toDataURL('image/png');
-    const fileName = (isEn ? (r.ingredients.map(i => oilEn(i.oil)||i.oil).join('_').substring(0,30)) : r.name);
-
-    overlay.innerHTML = `
-      <div style="background:white;border-radius:16px;max-width:420px;width:100%;max-height:85vh;overflow-y:auto;padding:20px;text-align:center" onclick="event.stopPropagation()">
-        <div style="display:flex;justify-content:center;gap:6px;margin-bottom:12px">
-          <button class="btn ${!isEn?'btn-primary':'btn-outline'} btn-sm" onclick="_shareLang='cn';_generateShareOverlay()">中文</button>
-          <button class="btn ${isEn?'btn-primary':'btn-outline'} btn-sm" onclick="_shareLang='en';_generateShareOverlay()">English</button>
-        </div>
-        <img src="${imgUrl}" style="width:100%;border-radius:12px;border:1px solid #eee;margin-bottom:16px">
-        <div style="font-size:13px;color:var(--text-light);margin-bottom:12px">📱 长按图片 → 保存到相册 → 分享到微信</div>
-        <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap" id="shareBtnRow">
-          <button class="btn btn-primary btn-sm" onclick="downloadShareImage('${imgUrl}','${fileName.replace(/'/g,"\\'")}')">💾 保存图片</button>
-          <button class="btn btn-outline btn-sm" onclick="copyShareText(${isEn})">📋 复制文字</button>
-          <button class="btn btn-outline btn-sm" onclick="this.closest('[data-share-overlay]').remove()">关闭</button>
-        </div>
-      </div>`;
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    // Native share
-    canvas.toBlob(blob => {
-      if (blob && navigator.share && navigator.canShare) {
-        const file = new File([blob], fileName + '.png', { type: 'image/png' });
-        if (navigator.canShare({ files: [file] })) {
-          const shareBtn = document.createElement('button');
-          shareBtn.className = 'btn btn-gold btn-sm';
-          shareBtn.textContent = '📤 分享到...';
-          shareBtn.onclick = (e) => { e.stopPropagation(); navigator.share({ title: r.name, files: [file] }).catch(() => {}); };
-          document.getElementById('shareBtnRow')?.prepend(shareBtn);
-        }
-      }
-    }, 'image/png');
-  }).catch(() => {
-    if (tempDiv) tempDiv.remove();
-    overlay.innerHTML = '<div style="color:white">生成失败</div>';
-    setTimeout(() => overlay.remove(), 1500);
-  });
-}
-
-function downloadShareImage(imgUrl, name) {
-  const a = document.createElement('a');
-  a.href = imgUrl;
-  a.download = name + '_配方卡.png';
-  a.click();
-}
-
-function _showToast(msg) {
-  const t = document.createElement('div');
-  t.style.cssText = 'position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:white;padding:10px 24px;border-radius:20px;font-size:14px;z-index:999;pointer-events:none;transition:opacity 0.3s';
-  t.textContent = msg;
-  document.body.appendChild(t);
-  setTimeout(() => { t.style.opacity = '0'; setTimeout(() => t.remove(), 300); }, 1800);
-}
-
-async function copyRecipeText() {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  const eos = r.ingredients.filter(i => i.oil !== '椰子油');
-  const coconut = r.ingredients.find(i => i.oil === '椰子油');
-  const cost = calcCost(r.ingredients);
-  const retail = calcRetailCost(r.ingredients);
-  let text = '【' + r.name + '】\n';
-  text += eos.map(i => {
-    const ppd = OILS[i.oil] || 0;
-    return i.oil + ' ' + i.drops + '滴 ¥' + (ppd * i.drops).toFixed(2);
-  }).join('\n');
-  if (coconut) {
-    const cml = (coconut.drops / DROPS_PER_ML).toFixed(1);
-    text += '\n椰子油 ' + coconut.drops + '滴（' + cml + 'ml）';
-  }
-  text += '\n\n成本合计：¥' + cost.toFixed(2);
-  if (retail > 0 && retail !== cost) text += '（零售 ¥' + retail.toFixed(2) + '）';
-  if (r.note) text += '\n备注：' + r.note;
-  text += '\n\n—— doTERRA · 来自大地的礼物';
-  navigator.clipboard.writeText(text).then(() => _showToast('✅ 已复制到剪贴板')).catch(async () => await _prompt('复制以下内容：', text));
-}
-
-async function copyShareText(isEn) {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  const eos = r.ingredients.filter(i => i.oil !== '椰子油');
-  const coconut = r.ingredients.find(i => i.oil === '椰子油');
-  const cost = calcCost(r.ingredients);
-  const retail = calcRetailCost(r.ingredients);
-  let text;
-  if (isEn) {
-    text = '【' + r.name + '】\n';
-    text += eos.map(i => (oilEn(i.oil) || i.oil) + ' ' + i.drops + ' drops').join(', ');
-    if (coconut) text += '\nCoconut Oil ' + coconut.drops + ' drops';
-    text += '\nTotal: ¥' + cost.toFixed(2);
-    if (r.note) text += '\nNote: ' + r.note;
-    text += '\n\n—— doTERRA · Gifts of the Earth';
-  } else {
-    text = '【' + r.name + '】\n';
-    text += eos.map(i => i.oil + ' ' + i.drops + '滴').join('，');
-    if (coconut) text += '\n椰子油 ' + coconut.drops + '滴';
-    text += '\n成本：¥' + cost.toFixed(2);
-    if (retail > 0 && retail !== cost) text += '（零售 ¥' + retail.toFixed(2) + '）';
-    if (r.note) text += '\n备注：' + r.note;
-    text += '\n\n—— doTERRA · 来自大地的礼物';
-  }
-  navigator.clipboard.writeText(text).then(() => _showToast('✅ 已复制到剪贴板')).catch(async () => await _prompt('复制以下内容：', text));
-}
-
-function closeDetail() {
-  // Restore unsaved changes
-  if (_editSnapshot && currentRecipe !== null && recipes[currentRecipe]) {
-    recipes[currentRecipe].name = _editSnapshot.name;
-    recipes[currentRecipe].note = _editSnapshot.note;
-    recipes[currentRecipe].ingredients = _editSnapshot.ingredients;
-  }
-  _editSnapshot = null;
-  document.getElementById('detailOverlay').style.display = 'none';
-  document.body.style.overflow = '';
-  currentRecipe = null;
-}
-
-const DROPS_PER_ML = 18.6;
-
-function _getEOs() { return currentEditing.filter(i => i.oil !== '椰子油'); }
-function _getCoconut() { return currentEditing.find(i => i.oil === '椰子油'); }
-
-function toggleEditorFav(btn) {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  if (!r._id) return;
-  toggleFavorite(r._id, null);
-  const fav = isFavorite(r);
-  btn.textContent = fav ? '★ 已收藏' : '☆ 收藏';
-  btn.style.color = fav ? 'var(--gold)' : '';
-}
-
-function renderDetail() {
-  const r = recipes[currentRecipe];
-  document.getElementById('detailTitle').innerHTML = '<input type="text" id="detailNameInput" value="' + (r.name || '').replace(/"/g, '&quot;') + '" class="form-control" style="font-size:20px;font-weight:700;font-family:Noto Serif SC,serif;border:1.5px solid var(--border);border-radius:10px;padding:8px 14px;width:100%" placeholder="配方名称" onchange="if(currentRecipe!==null){recipes[currentRecipe].name=this.value;recipes[currentRecipe]._dirty=true}">';
-  const noteEl = document.getElementById('detailNote');
-  noteEl.innerHTML = '';
-
-  // Set fav button
-  const favBtn = document.getElementById('editorFavBtn');
-  if (favBtn && currentUser.id) {
-    const fav = isFavorite(r);
-    favBtn.textContent = fav ? '★ 已收藏' : '☆ 收藏';
-    favBtn.style.color = fav ? 'var(--gold)' : '';
-  }
-
-  // Move coconut oil to end
-  const cIdx = currentEditing.findIndex(i => i.oil === '椰子油');
-  if (cIdx >= 0 && cIdx < currentEditing.length - 1) {
-    const c = currentEditing.splice(cIdx, 1)[0];
-    currentEditing.push(c);
-  }
-
-  const eos = _getEOs();
-  const coconut = _getCoconut();
-
-  const tbody = document.getElementById('ingredientsBody');
-  tbody.innerHTML = currentEditing.map((ing, i) => {
-    const ppd = OILS[ing.oil] || 0;
-    const sub = ppd * ing.drops;
-    const isCoconut = ing.oil === '椰子油';
-    const oilOptions = Object.keys(OILS).sort((a,b) => a.localeCompare(b,'zh')).map(o =>
-      `<option value="${o}" ${o === ing.oil ? 'selected' : ''}>${o}</option>`
-    ).join('');
-    const dropsCell = `<input type="number" class="drops-input" value="${ing.drops}" min="0.5" step="0.5" onchange="changeDrops(${i}, this.value)">`;
-    return `<tr${isCoconut ? ' style="background:var(--sage-mist)"' : ''}>
-      <td><select class="oil-select" onchange="changeOil(${i}, this.value)">${oilOptions}</select></td>
-      <td>${dropsCell}</td>
-      <td style="color:var(--text-light);font-size:13px">${ppd > 0 ? '¥'+ppd.toFixed(2) : '—'}</td>
-      <td style="font-weight:600;color:var(--sage-dark)">${sub > 0 ? fmtPrice(sub) : '—'}</td>
-      <td><button class="remove-btn" onclick="removeIng(${i})">×</button></td>
-    </tr>`;
-  }).join('');
-
-  // Volume controls — detect from actual recipe data
-  const cDrops = coconut ? coconut.drops : 0;
-  const totalEO = eos.reduce((s, i) => s + i.drops, 0);
-  const totalAllDrops = totalEO + cDrops;
-
-  // Detect volume mode from recipe
-  if (totalAllDrops === 100) currentVolMode = '5ml';
-  else if (totalAllDrops === 200) currentVolMode = '10ml';
-  else if (totalAllDrops === 600) currentVolMode = '30ml';
-  else if (cDrops > 0 && cDrops <= 20 && totalAllDrops <= 40) currentVolMode = 'single';
-  else if (cDrops > 0) currentVolMode = 'custom';
-  else currentVolMode = 'single';
-
-  _highlightVolBtn(currentVolMode);
-
-  // Set dilution ratio selector from actual recipe
-  if (totalEO > 0 && cDrops > 0) {
-    const actualRatio = Math.round(cDrops / totalEO);
-    const ratioSel = document.getElementById('dilutionRatio');
-    if (ratioSel) {
-      const closest = Array.from(ratioSel.options).reduce((best, opt) => Math.abs(parseInt(opt.value) - actualRatio) < Math.abs(parseInt(best.value) - actualRatio) ? opt : best);
-      ratioSel.value = closest.value;
-    }
-  }
-
-  // Update hint line — delegate to shared function
-  updateDilutionHint();
-
-  // Notes
-  document.getElementById('detailNoteEdit').value = r.note || '';
-  renderEditorTags();
-
-  const total = calcCost(currentEditing);
-  const retailTotal = calcRetailCost(currentEditing);
-  document.getElementById('totalPrice').innerHTML = fmtPrice(total) +
-    (retailTotal > 0 && retailTotal !== total ? ' <span style="text-decoration:line-through;color:var(--text-light);font-size:14px">' + fmtPrice(retailTotal) + '</span>' : '');
-
-  // Sync edits back to recipe and refresh grid card
-  if (currentRecipe !== null) {
-    recipes[currentRecipe].ingredients = JSON.parse(JSON.stringify(currentEditing));
-    filterRecipes();
-    // Re-highlight the selected card
-    const cards = document.querySelectorAll('.recipe-card');
-    cards.forEach(c => c.classList.remove('selected'));
-  }
-
-  renderCard();
-  hideAddRow();
-}
-
-// Volume presets in total drops
-const VOL_PRESETS = { single: null, '5ml': 100, '10ml': 200, '30ml': 600 };
-let currentVolMode = '30ml';
-
-function _getTotalDropsForMode(mode) {
-  if (mode === 'single') return null; // special: coconut=10
-  if (mode === 'custom') {
-    const val = parseFloat(document.getElementById('customVolInput').value) || 0;
-    const unit = document.getElementById('customVolUnit').value;
-    return unit === 'ml' ? Math.round(val * 20) : Math.round(val);
-  }
-  return VOL_PRESETS[mode] || 100;
-}
-
-function _highlightVolBtn(mode) {
-  currentVolMode = mode;
-  document.querySelectorAll('.vol-btn').forEach(b => {
-    const match = b.dataset.vol === mode;
-    b.classList.toggle('btn-primary', match);
-    b.classList.toggle('btn-outline', !match);
-    b.style.color = match ? 'white' : '';
-  });
-  const customInput = document.getElementById('customVolInput');
-  const customUnit = document.getElementById('customVolUnit');
-  customInput.style.display = mode === 'custom' ? '' : 'none';
-  customUnit.style.display = mode === 'custom' ? '' : 'none';
-}
-
-function selectVolume(mode) {
-  _highlightVolBtn(mode);
-  if (mode === 'custom') document.getElementById('customVolInput').focus();
-  updateDilutionHint();
-}
-
-function onCustomVolChange() {
-  currentVolMode = 'custom';
-  _highlightVolBtn('custom');
-  updateDilutionHint();
-}
-
-function onDilutionChange() {
-  updateDilutionHint();
-}
-
-function updateDilutionHint() {
-  const eos = _getEOs();
-  const coconut = _getCoconut();
-  const totalEO = eos.reduce((s, i) => s + i.drops, 0);
-  const cDrops = coconut ? coconut.drops : 0;
-  const el = document.getElementById('dilutionHint');
-  if (!el) return;
-  if (totalEO > 0 && cDrops > 0) {
-    const ratio = Math.round(cDrops / totalEO);
-    const isSingle = currentVolMode === 'single';
-    if (isSingle) {
-      const totalAll = totalEO + cDrops;
-      el.textContent = '该配方适用于单次用量（共' + totalAll + '滴），其中纯精油 ' + totalEO + ' 滴，椰子油 ' + cDrops + ' 滴，稀释比例为 1:' + ratio;
-    } else {
-      const volLabel = {
-        '5ml': '5ml', '10ml': '10ml', '30ml': '30ml',
-        'custom': Math.round((totalEO + cDrops) / DROPS_PER_ML) + 'ml'
-      }[currentVolMode] || Math.round((totalEO + cDrops) / DROPS_PER_ML) + 'ml';
-      el.textContent = '该配方适用于 ' + volLabel + ' 瓶，其中纯精油 ' + totalEO + ' 滴，其余用椰子油填满，稀释比例为 1:' + ratio;
-    }
-  } else if (totalEO > 0) {
-    el.innerHTML = '<span style="color:#e65100">配方中无椰子油</span>，选择容量和稀释比例，点「应用到配方」自动添加';
-  } else {
-    el.textContent = '';
-  }
-}
-
-function applyVolume() {
-  const ratio = parseInt(document.getElementById('dilutionRatio').value) || 10;
-  let targetEO, targetCoconut;
-
-  if (currentVolMode === 'single') {
-    // Single use: coconut=10, EO based on ratio
-    targetCoconut = 10;
-    targetEO = Math.round(targetCoconut / ratio);
-  } else {
-    // ml modes: fill to total capacity
-    const totalDrops = _getTotalDropsForMode(currentVolMode);
-    if (!totalDrops || totalDrops <= 0) { alert('请先选择容量'); return; }
-    targetEO = Math.round(totalDrops / (1 + ratio));
-    targetCoconut = totalDrops - targetEO;
-  }
-
-  const eos = _getEOs();
-  const currentTotalEO = eos.reduce((s, i) => s + i.drops, 0);
-  if (currentTotalEO === 0) { alert('请先添加精油'); return; }
-
-  // Scale each EO proportionally
-  const factor = targetEO / currentTotalEO;
-  eos.forEach(ing => {
-    ing.drops = Math.max(0.5, Math.round(ing.drops * factor * 2) / 2);
-  });
-
-  // Set coconut oil and move to end
-  let coconut = _getCoconut();
-  if (!coconut) {
-    currentEditing.push({ oil: '椰子油', drops: targetCoconut });
-  } else {
-    coconut.drops = targetCoconut;
-    // Move coconut to end of list
-    const idx = currentEditing.indexOf(coconut);
-    if (idx >= 0 && idx < currentEditing.length - 1) {
-      currentEditing.splice(idx, 1);
-      currentEditing.push(coconut);
-    }
-  }
-
-  renderDetail();
-}
-
-function onNoteChange() {
-  if (currentRecipe === null) return;
-  recipes[currentRecipe].note = document.getElementById('detailNoteEdit').value;
-}
-
-function renderEditorTags() {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  const tags = r.tags || [];
-  const container = document.getElementById('editorTags');
-  if (!container) return;
-  container.innerHTML = tags.map(t =>
-    '<span style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;font-size:12px;background:var(--sage-mist);color:var(--sage-dark)">' +
-      t +
-      '<button onclick="removeEditorTag(\'' + t.replace(/'/g,"\\'") + '\')" style="background:none;border:none;cursor:pointer;font-size:12px;color:var(--sage-dark);padding:0 2px;opacity:0.6">×</button>' +
-    '</span>'
-  ).join('') || '<span style="font-size:12px;color:var(--text-light)">暂无标签</span>';
-
-  // Show candidate tags (not yet added)
-  const candidates = document.getElementById('editorCandidateTags');
-  if (candidates) {
-    const unused = allTags.filter(t => !tags.includes(t));
-    candidates.innerHTML = unused.map(t =>
-      '<span onclick="addEditorTagDirect(\'' + t.replace(/'/g,"\\'") + '\')" style="display:inline-block;padding:3px 8px;border-radius:12px;font-size:11px;background:#f5f5f5;color:var(--text-light);cursor:pointer;border:1px dashed var(--border)" onmouseover="this.style.background=\'var(--sage-mist)\'" onmouseout="this.style.background=\'#f5f5f5\'">' +
-        '+ ' + t + '</span>'
-    ).join('');
-  }
-}
-
-function addEditorTagDirect(tag) {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  if (!r.tags) r.tags = [];
-  if (!r.tags.includes(tag)) { r.tags.push(tag); r._dirty = true; }
-  renderEditorTags();
-}
-
-function addEditorTag() {
-  if (currentRecipe === null) return;
-  const input = document.getElementById('editorNewTag');
-  const val = input.value.trim();
-  if (!val) return;
-  const tags = val.split(/[,，、]/).map(s => s.trim()).filter(Boolean);
-  const r = recipes[currentRecipe];
-  if (!r.tags) r.tags = [];
-  tags.forEach(t => {
-    if (!r.tags.includes(t)) r.tags.push(t);
-    if (!allTags.includes(t)) { allTags.push(t); _apiFetch('/api/tags', {method:'POST', body:JSON.stringify({name:t})}).catch(()=>{}); }
-  });
-  input.value = '';
-  renderEditorTags();
-}
-
-function removeEditorTag(tag) {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  if (r.tags) r.tags = r.tags.filter(t => t !== tag);
-  renderEditorTags();
-}
-
-function changeOil(i, val) {
-  currentEditing[i].oil = val;
-  renderDetail();
-}
-
-function changeDrops(i, val) {
-  currentEditing[i].drops = parseFloat(val) || 0;
-  renderDetail();
-}
-
-function removeIng(i) {
-  currentEditing.splice(i, 1);
-  renderDetail();
-}
-
-function addIngredientRow() {
-  const row = document.getElementById('addIngRow');
-  row.style.display = 'flex';
-  const sel = document.getElementById('newOilSelect');
-  if (sel.options.length <= 1) {
-    Object.keys(OILS).sort((a,b) => a.localeCompare(b,'zh')).forEach(o => {
-      const opt = document.createElement('option');
-      opt.value = o; opt.textContent = o;
-      sel.appendChild(opt);
-    });
-  }
-  document.getElementById('newOilDrops').value = '1';
-}
-
-function hideAddRow() { document.getElementById('addIngRow').style.display = 'none'; }
-
-function confirmAddIngredient() {
-  const oil = document.getElementById('newOilSelect').value;
-  const drops = parseFloat(document.getElementById('newOilDrops').value) || 1;
-  if (!oil) { alert('请选择精油'); return; }
-  if (currentEditing.some(i => i.oil === oil)) { alert('已有「' + oil + '」，请直接修改滴数'); return; }
-  currentEditing.push({oil, drops});
-  renderDetail();
-}
-
-function saveCurrentEditing() {
-  if (currentRecipe === null) return;
-  recipes[currentRecipe].ingredients = JSON.parse(JSON.stringify(currentEditing));
-  saveRecipes();
-  alert('✅ 配方已保存！');
-}
-
-// ============ CARD ============
-function renderCard() {
-  const r = recipes[currentRecipe];
-  document.getElementById('cardTitle').textContent = r.name;
-  document.getElementById('cardNote').textContent = '';
-  document.getElementById('cardDate').textContent = '制作日期：' + new Date().toLocaleDateString('zh-CN');
-
-  const eos = currentEditing.filter(i => i.oil !== '椰子油');
-  const coconut = currentEditing.find(i => i.oil === '椰子油');
-
-  // EO list (exclude coconut)
-  const ul = document.getElementById('cardIngredients');
-  ul.innerHTML = eos.map(ing => {
-    const ppd = OILS[ing.oil] || 0;
-    const sub = ppd * ing.drops;
-    return `<li>
-      <span class="card-oil-name">${ing.oil}</span>
-      <span class="card-oil-drops">${ing.drops} 滴</span>
-      <span class="card-oil-cost">${sub > 0 ? fmtPrice(sub) : ''}</span>
-    </li>`;
-  }).join('');
-
-  // Coconut oil + ratio
-  const cardCoconut = document.getElementById('cardCoconut');
-  if (coconut && coconut.drops > 0) {
-    const totalEO = eos.reduce((s, i) => s + i.drops, 0);
-    const ml = (coconut.drops / DROPS_PER_ML).toFixed(1);
-    const ratioStr = totalEO > 0 ? `稀释比例 1:${(coconut.drops / totalEO).toFixed(1)}` : '';
-    const cCost = (OILS['椰子油'] || 0) * coconut.drops;
-    cardCoconut.innerHTML = `🥥 椰子油 ${coconut.drops} 滴（${ml}ml）${ratioStr ? ' · ' + ratioStr : ''}${cCost > 0 ? ' · ' + fmtPrice(cCost) : ''}`;
-  } else {
-    cardCoconut.innerHTML = '';
-  }
-
-  // Remarks
-  const note = document.getElementById('detailNoteEdit') ? document.getElementById('detailNoteEdit').value : (r.note || '');
-  document.getElementById('cardRemarks').textContent = note ? '📝 ' + note : '';
-
-  const total = calcCost(currentEditing);
-  const cardRetail = calcRetailCost(currentEditing);
-  document.getElementById('cardTotal').innerHTML = fmtPrice(total) +
-    (cardRetail > 0 && cardRetail !== total ? ' <span style="text-decoration:line-through;opacity:0.6;font-size:14px">' + fmtPrice(cardRetail) + '</span>' : '');
-
-  // Brand
-  const brandEl = document.getElementById('cardBrand');
-  if (brandEl) {
-    brandEl.innerHTML = _buildBrandHtml();
-  }
-}
-
-function _dataURLtoBlob(dataURL) {
-  const parts = dataURL.split(',');
-  const mime = parts[0].match(/:(.*?);/)[1];
-  const raw = atob(parts[1]);
-  const arr = new Uint8Array(raw.length);
-  for (let i = 0; i < raw.length; i++) arr[i] = raw.charCodeAt(i);
-  return new Blob([arr], { type: mime });
-}
-
-let _returnToRecipeIdx = null;
-
-function _goAddQrFromCard() {
-  _returnToRecipeIdx = currentRecipe;
-  closeDetail();
-  _prevShowSection2('mydiary');
-  showDiaryTab('brand');
-  setTimeout(() => {
-    const btn = document.getElementById('returnToCardBtn');
-    if (btn) btn.innerHTML = '<button class="btn btn-outline" onclick="_returnToCard()" style="font-size:13px">← 返回配方卡片</button>';
-  }, 100);
-}
-
-function _returnToCard() {
-  const btn = document.getElementById('returnToCardBtn');
-  if (btn) btn.innerHTML = '';
-  if (_returnToRecipeIdx !== null && recipes[_returnToRecipeIdx]) {
-    showSection('search');
-    selectRecipe(_returnToRecipeIdx);
-  }
-  _returnToRecipeIdx = null;
-}
-
-async function _editTranslation() {
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  const currentEn = recipeNameEn(r.name);
-  const newEn = await _prompt('修改英文翻译：', currentEn || r.name);
-  if (!newEn || newEn === currentEn) return;
-
-  if (currentUser.role === 'admin') {
-    // Admin: directly update the translation map
-    window._customTranslations = window._customTranslations || {};
-    window._customTranslations[r.name] = newEn;
-    // Override recipeNameEn to check custom translations first
-    const origRecipeNameEn = recipeNameEn;
-    recipeNameEn = function(name) {
-      if (window._customTranslations && window._customTranslations[name]) return window._customTranslations[name];
-      return origRecipeNameEn(name);
-    };
-    _showToast('✅ 翻译已更新');
-    _generateCardImage(); // Regenerate card with new translation
-  } else {
-    // Non-admin: submit suggestion for review
-    try {
-      await _apiFetch('/api/translation-suggest', { method: 'POST', body: JSON.stringify({
-        recipe_id: r._id || null, recipe_name: r.name, suggested_en: newEn
-      })});
-      _showToast('✅ 翻译建议已提交，等待管理员审核');
-    } catch(e) { _showToast('提交失败'); }
-  }
-}
-
-function _saveCurrentCardImage() {
-  const img = document.getElementById('cardImage');
-  if (!img || !img.src) return;
-  const name = (currentRecipe !== null ? recipes[currentRecipe].name : 'recipe') + (_cardLang === 'en' ? '_EN' : '');
-  const filename = (name || 'recipe') + '_配方卡.png';
-  const blob = _dataURLtoBlob(img.src);
-
-  // Must stay synchronous from user click — no async/await before a.click()
-  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-
-  if (isMobile && navigator.canShare) {
-    const file = new File([blob], filename, { type: 'image/png' });
-    if (navigator.canShare({ files: [file] })) {
-      navigator.share({ files: [file] }).then(() => _showToast('✅ 图片已保存')).catch(() => {});
-      return;
-    }
-  }
-
-  // Direct download — fully synchronous from click
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = filename;
-  a.style.display = 'none';
-  document.body.appendChild(a);
-  a.click();
-  setTimeout(() => { a.remove(); URL.revokeObjectURL(url); }, 300);
-}
-
-function exportCard() {
-  const el = document.querySelector('#cardViewContainer > div') || document.getElementById('recipe-card-export');
-  if (!el) return;
-  html2canvas(el, {scale: 2, backgroundColor: '#faf7f0', useCORS: true}).then(canvas => {
-    const name = currentRecipe !== null ? recipes[currentRecipe].name : 'recipe';
-    _showSaveImagePopup(canvas, name + '_配方卡');
-  });
-}
-
-function _showSaveImagePopup(canvas, filename) {
-  const imgUrl = canvas.toDataURL('image/png');
-  // Try direct download first
-  const a = document.createElement('a');
-  a.href = imgUrl;
-  a.download = filename + '.png';
-  a.click();
-  // Also show image for long-press (mobile fallback)
-  const pop = document.createElement('div');
-  pop.style.cssText = 'position:fixed;inset:0;z-index:250;background:rgba(0,0,0,0.7);display:flex;flex-direction:column;align-items:center;padding:16px;overflow-y:auto';
-  pop.onclick = () => pop.remove();
-  pop.innerHTML =
-    '<div style="flex-shrink:0;text-align:center;margin:8px 0" onclick="event.stopPropagation()">' +
-      '<div style="font-size:13px;color:rgba(255,255,255,0.8);margin-bottom:8px">📱 图片已下载 · 也可长按下方图片保存到相册</div>' +
-    '</div>' +
-    '<img src="' + imgUrl + '" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.3)" onclick="event.stopPropagation()">' +
-    '<div style="flex-shrink:0;text-align:center;margin-top:12px">' +
-      '<button class="btn btn-outline btn-sm" onclick="this.closest(\'[style*=fixed]\').remove()" style="color:white;border-color:rgba(255,255,255,0.3)">关闭</button>' +
-    '</div>';
-  document.body.appendChild(pop);
-}
-
-// ============ TAG SYSTEM ============
-let allTags = [];
-let manageFilterTag = null; // null = show all
-let selectedRecipes = new Set();
-
-function loadTags() {}
-function saveTags() {}
-
-function addGlobalTag() {
-  const input = document.getElementById('newTagInput');
-  const name = input.value.trim();
-  if (!name) return;
-  // Support multiple separated by comma
-  const newTags = name.split(/[,，、]/).map(s => s.trim()).filter(Boolean);
-  newTags.forEach(t => {
-    if (!allTags.includes(t)) allTags.push(t);
-  });
-  saveTags();
-  input.value = '';
-  renderTagBar();
-}
-
-async function deleteGlobalTag(tag) {
-  if (!await _confirm(`删除标签「${tag}」？\n（已标记此标签的配方不会被删除，只是移除标签）`)) return;
-  allTags = allTags.filter(t => t !== tag);
-  // Remove from all recipes too
-  recipes.forEach(r => {
-    if (r.tags) r.tags = r.tags.filter(t => t !== tag);
-  });
-  saveTags();
-  saveRecipes();
-  renderTagBar();
-  renderManage();
-}
-
-function _toggleTagFilter() {
-  const bar = document.getElementById('tagBar');
-  const btn = document.getElementById('tagFilterToggleBtn');
-  const shown = bar.style.display !== 'none';
-  bar.style.display = shown ? 'none' : 'flex';
-  btn.classList.toggle('btn-primary', !shown);
-  btn.classList.toggle('btn-outline', shown);
-  window._tagFilterVisible = !shown;
-  _saveFoldStates();
-}
-
-function renderTagBar() {
-  const bar = document.getElementById('tagBar');
-  if (!allTags.length) {
-    bar.innerHTML = '<span style="font-size:12px;color:var(--text-light)">暂无标签，添加一个吧</span>';
-    return;
-  }
-  // "All" button
-  let html = `<div class="tag-btn ${manageFilterTag === null ? 'active' : ''}" onclick="filterByTag(null)">全部</div>`;
-  // "Untagged" button
-  html += `<div class="tag-btn ${manageFilterTag === '__other__' ? 'active' : ''}" onclick="filterByTag('__other__')">其他</div>`;
-  allTags.forEach(t => {
-    const count = recipes.filter(r => (r.tags || []).includes(t)).length;
-    html += `<div class="tag-btn ${manageFilterTag === t ? 'active' : ''}" onclick="filterByTag('${t.replace(/'/g, "\\'")}')">
-      ${t} <span style="opacity:0.6;font-size:11px">${count}</span>
-      <button class="tag-del" onclick="event.stopPropagation();deleteGlobalTag('${t.replace(/'/g, "\\'")}')" title="删除标签">×</button>
-    </div>`;
-  });
-  bar.innerHTML = html;
-  // Restore visible/hidden state
-  bar.style.display = window._tagFilterVisible ? 'flex' : 'none';
-  const btn = document.getElementById('tagFilterToggleBtn');
-  if (btn) { btn.classList.toggle('btn-primary', !!window._tagFilterVisible); btn.classList.toggle('btn-outline', !window._tagFilterVisible); }
-}
-
-function filterByTag(tag) {
-  manageFilterTag = tag;
-  reviewFilterActive = false;
-  mineFilterActive = false;
-  const btn = document.getElementById('filterMineBtn');
-  if (btn) { btn.classList.remove('btn-primary'); btn.classList.add('btn-outline'); }
-  selectedRecipes.clear();
-  renderTagBar();
-  renderManage();
-}
-
-// ============ MANAGE SECTION ============
-function renderManage() {
-  const list = document.getElementById('manageList');
-  const label = document.getElementById('manageFilterLabel');
-
-  // Filter by tag
-  let filtered = recipes.map((r, i) => ({ r, i }));
-  if (manageFilterTag === '__other__') {
-    filtered = filtered.filter(({ r }) => !r.tags || r.tags.length === 0);
-    label.textContent = '— 其他';
-  } else if (manageFilterTag) {
-    filtered = filtered.filter(({ r }) => (r.tags || []).includes(manageFilterTag));
-    label.textContent = '— ' + manageFilterTag;
-  } else {
-    label.textContent = '';
-  }
-
-  if (!filtered.length) {
-    list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📋</div><div class="empty-state-text">暂无配方</div></div>';
-    return;
-  }
-  list.innerHTML = filtered.map(({ r, i }) => {
-    const cost = calcCost(r.ingredients);
-    const oilNames = r.ingredients.map(ing => ing.oil).join('、');
-    const tags = (r.tags || []).map(t => `<span class="tag">${t}</span>`).join(' ');
-    const checked = selectedRecipes.has(i) ? 'checked' : '';
-    return `<div class="manage-item">
-      <input type="checkbox" ${checked} onchange="toggleSelect(${i}, this.checked)" style="width:18px;height:18px;accent-color:var(--sage);cursor:pointer">
-      <div class="manage-item-left">
-        <div class="manage-item-name">${r.name} ${tags}</div>
-        <div class="manage-item-oils">${oilNames}</div>
-        <div style="margin-top:6px;font-size:13px;color:var(--sage-dark);font-weight:600">${fmtCostWithRetail(r.ingredients)}</div>
-      </div>
-      <div class="manage-item-actions">
-        <button class="btn btn-outline btn-sm" onclick="editTags(${i})">🏷 标签</button>
-        <button class="btn btn-outline btn-sm" onclick="editFromManage(${i})">✏️ 编辑</button>
-        <button class="btn btn-danger btn-sm" onclick="deleteRecipe(${i})">🗑 删除</button>
-      </div>
-    </div>`;
-  }).join('');
-}
-
-function toggleSelect(i, checked) {
-  if (checked) selectedRecipes.add(i);
-  else selectedRecipes.delete(i);
-  _updateSelectAllBtn();
-}
-
-function toggleSelectAll() {
-  // Get all visible IDs (public recipes + diary)
-  const visibleIds = [];
-  // Public recipes
-  let pubVisible = recipes.map((r, i) => ({ r, i }));
-  if (manageFilterTag === '__other__') pubVisible = pubVisible.filter(({ r }) => !r.tags || r.tags.length === 0);
-  else if (manageFilterTag) pubVisible = pubVisible.filter(({ r }) => (r.tags || []).includes(manageFilterTag));
-  pubVisible.forEach(({ i }) => visibleIds.push(i));
-  // Diary recipes
-  if (currentUser.role === 'admin') {
-    let diaryVisible = userDiary;
-    if (manageFilterTag === '__other__') diaryVisible = diaryVisible.filter(d => !d.tags || d.tags.length === 0);
-    else if (manageFilterTag) diaryVisible = diaryVisible.filter(d => (d.tags || []).includes(manageFilterTag));
-    diaryVisible.forEach(d => visibleIds.push('d' + d.id));
-  }
-
-  const allSelected = visibleIds.length > 0 && visibleIds.every(id => selectedRecipes.has(id));
-  if (allSelected) {
-    visibleIds.forEach(id => selectedRecipes.delete(id));
-  } else {
-    visibleIds.forEach(id => selectedRecipes.add(id));
-  }
-  _updateSelectAllBtn();
-  renderManage();
-}
-
-function _openTagPicker(name, currentTags, onSave) {
-  const overlay = document.createElement('div');
-  overlay.className = 'tag-picker';
-  window._tagPickerSet = new Set(currentTags);
-  window._tagPickerSaveFn = onSave;
-  overlay.innerHTML = '<div class="tag-picker-card">' +
-    '<div class="tag-picker-title">🏷 为「' + name + '」选择标签</div>' +
-    '<div class="tag-picker-tags" id="tagPickerTags"></div>' +
-    '<div style="display:flex;gap:8px;margin-bottom:16px;align-items:center">' +
-      '<input type="text" id="tagPickerNew" class="form-control" placeholder="新标签…" style="flex:1;font-size:13px;padding:8px 12px" onkeydown="if(event.key===\'Enter\'){addTagFromPicker();event.preventDefault()}">' +
-      '<button class="btn btn-outline btn-sm" onclick="addTagFromPicker()">添加</button>' +
-    '</div>' +
-    '<div style="display:flex;gap:10px;justify-content:flex-end">' +
-      '<button class="btn btn-outline btn-sm" onclick="closeTagPicker()">取消</button>' +
-      '<button class="btn btn-primary btn-sm" onclick="_commitTagPicker()">确认</button>' +
-    '</div></div>';
-  document.body.appendChild(overlay);
-  renderTagPicker();
-}
-
-function _commitTagPicker() {
-  if (window._tagPickerSaveFn) window._tagPickerSaveFn([...window._tagPickerSet]);
-  closeTagPicker();
-  renderTagBar();
-  renderManage();
-}
-
-function editTags(i) {
-  const r = recipes[i];
-  if (!r) { _showToast('配方不存在'); return; }
-  _openTagPicker(r.name, r.tags || [], function(tags) {
-    recipes[i].tags = tags;
-    recipes[i]._dirty = true;
-    tags.forEach(t => { if (!allTags.includes(t)) allTags.push(t); });
-    _apiSaveRecipes();
-    saveTags();
-  });
-}
-
-function renderTagPicker() {
-  const container = document.getElementById('tagPickerTags');
-  if (!container) return;
-  const selected = window._tagPickerSet;
-  container.innerHTML = allTags.map(t =>
-    `<div class="tag-pick ${selected.has(t) ? 'selected' : ''}" onclick="toggleTagPick('${t.replace(/'/g, "\\'")}')">${t}</div>`
-  ).join('');
-}
-
-function toggleTagPick(tag) {
-  const s = window._tagPickerSet;
-  if (s.has(tag)) s.delete(tag);
-  else s.add(tag);
-  renderTagPicker();
-}
-
-function addTagFromPicker() {
-  const input = document.getElementById('tagPickerNew');
-  const name = input.value.trim();
-  if (!name) return;
-  const newTags = name.split(/[,，、]/).map(s => s.trim()).filter(Boolean);
-  newTags.forEach(t => {
-    if (!allTags.includes(t)) allTags.push(t);
-    window._tagPickerSet.add(t);
-  });
-  saveTags();
-  input.value = '';
-  renderTagPicker();
-  renderTagBar();
-}
-
-// saveTagPicker removed — use _commitTagPicker via _openTagPicker
-
-function closeTagPicker() {
-  const overlay = document.querySelector('.tag-picker');
-  if (overlay) overlay.remove();
-  window._tagPickerSet = null;
-}
-
-function addRecipeToSheet(ws, r, isFirst, fontTitle, fontHeader, fontBody, fontTotal) {
-  if (!isFirst) ws.addRow([]); // blank row between recipes
-
-  // Title row - merge A:D and add background color
-  const titleRow = ws.addRow([r.name]);
-  const rowNum = titleRow.number;
-  ws.mergeCells(rowNum, 1, rowNum, 4);
-  titleRow.getCell(1).font = fontTitle;
-  titleRow.getCell(1).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFC8DDC9' } };
-  titleRow.getCell(1).alignment = { horizontal: 'center', vertical: 'middle' };
-  titleRow.height = 36;
-
-  const centerAlign = { horizontal: 'center', vertical: 'middle' };
-
-  // Note row
-  if (r.note) {
-    const noteRow = ws.addRow(['备注：' + r.note]);
-    noteRow.eachCell(c => { c.font = fontBody; c.alignment = centerAlign; });
-  }
-
-  // Header row
-  const headerRow = ws.addRow(['精油', '滴数', '单价/滴', '小计']);
-  headerRow.eachCell(c => { c.font = fontHeader; c.alignment = centerAlign; });
-
-  // Separate EOs and coconut oil
-  const eos = r.ingredients.filter(i => i.oil !== '椰子油');
-  const coconut = r.ingredients.find(i => i.oil === '椰子油');
-
-  // Ingredient rows (EOs only)
-  let total = 0;
-  eos.forEach(ing => {
-    const ppd = OILS[ing.oil] || 0;
-    const sub = ppd * ing.drops;
-    total += sub;
-    const row = ws.addRow([ing.oil, ing.drops, '¥' + ppd.toFixed(2), '¥' + sub.toFixed(2)]);
-    row.eachCell(c => { c.font = fontBody; c.alignment = centerAlign; });
-  });
-
-  // Coconut oil row with ml and ratio
-  if (coconut && coconut.drops > 0) {
-    const totalEO = eos.reduce((s, i) => s + i.drops, 0);
-    const ml = (coconut.drops / 18.6).toFixed(1);
-    const ratioStr = totalEO > 0 ? '（1:' + (coconut.drops / totalEO).toFixed(1) + '）' : '';
-    const cPpd = OILS['椰子油'] || 0;
-    const cSub = cPpd * coconut.drops;
-    total += cSub;
-    const cRow = ws.addRow(['🥥 椰子油 ' + ratioStr, coconut.drops + '滴 / ' + ml + 'ml', '¥' + cPpd.toFixed(2), '¥' + cSub.toFixed(2)]);
-    cRow.eachCell(c => { c.font = fontBody; c.alignment = centerAlign; });
-  }
-
-  // Total row
-  const totalRow = ws.addRow(['合计', '', '', '¥' + total.toFixed(2)]);
-  totalRow.eachCell(c => { c.font = fontTotal; c.alignment = centerAlign; });
-}
-
-async function exportExcel() {
-  const indices = selectedRecipes.size > 0 ? [...selectedRecipes].sort((a,b) => a-b) : recipes.map((_, i) => i);
-  if (!indices.length) { alert('没有配方可导出'); return; }
-
-  const wb = new ExcelJS.Workbook();
-  const fontTitle = { size: 20 };
-  const fontHeader = { size: 14 };
-  const fontBody = { size: 12 };
-  const fontTotal = { size: 12, bold: true };
-  const colWidths = [{ width: 20 }, { width: 10 }, { width: 14 }, { width: 14 }];
-
-  // Group recipes by tag
-  const tagGroups = {}; // tag -> [recipe]
-  const untagged = [];
-
-  indices.forEach(idx => {
-    const r = recipes[idx];
-    const tags = r.tags && r.tags.length > 0 ? r.tags : null;
-    if (!tags) {
-      untagged.push(r);
-    } else {
-      tags.forEach(t => {
-        if (!tagGroups[t]) tagGroups[t] = [];
-        tagGroups[t].push(r);
-      });
-    }
-  });
-
-  // Helper: add a summary table sheet with columns: 配方名称, 精油成分, 滴数, 成本, 备注
-  const summaryColWidths = [{ width: 22 }, { width: 36 }, { width: 12 }, { width: 14 }, { width: 28 }];
-  const summaryHeaders = ['配方名称', '精油成分', '滴数', '成本', '备注'];
-  const centerAlign = { horizontal: 'center', vertical: 'middle' };
-  const leftAlign = { horizontal: 'left', vertical: 'middle', wrapText: true };
-
-  function addSummarySheet(sheetName, recs) {
-    const safeName = sheetName.slice(0, 31).replace(/[\\\/\*\?\[\]:]/g, '_');
-    const ws = wb.addWorksheet(safeName);
-    ws.columns = summaryColWidths;
-    const hRow = ws.addRow(summaryHeaders);
-    hRow.eachCell(c => { c.font = { size: 13, bold: true }; c.alignment = centerAlign; c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFC8DDC9' } }; });
-    recs.forEach(r => {
-      const ings = r.ingredients || [];
-      const oilNames = ings.map(i => i.oil).join('、');
-      const totalDrops = ings.reduce((s, i) => s + (i.drops || 0), 0);
-      const totalCost = ings.reduce((s, i) => s + (i.drops || 0) * (OILS[i.oil] || 0), 0);
-      const row = ws.addRow([r.name, oilNames, totalDrops, '¥' + totalCost.toFixed(2), r.note || '']);
-      row.eachCell((c, colNum) => { c.font = { size: 12 }; c.alignment = colNum === 2 || colNum === 5 ? leftAlign : centerAlign; });
-    });
-  }
-
-  // "全部" sheet with detailed per-recipe format (existing style)
-  const wsAll = wb.addWorksheet('全部');
-  wsAll.columns = colWidths;
-  indices.forEach((idx, n) => {
-    addRecipeToSheet(wsAll, recipes[idx], n === 0, fontTitle, fontHeader, fontBody, fontTotal);
-  });
-
-  // Then one summary sheet per tag
-  for (const [tag, recs] of Object.entries(tagGroups)) {
-    addSummarySheet(tag, recs);
-  }
-  // Untagged → "其他" sheet (always create if there are untagged recipes)
-  if (untagged.length) {
-    addSummarySheet('其他', untagged);
-  }
-
-  // Generate and download
-  const buf = await wb.xlsx.writeBuffer();
-  const blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = '精油配方导出_' + new Date().toLocaleDateString('zh-CN').replace(/\//g, '-') + '.xlsx';
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-function _updateSelectAllBtn() {
-  const btn = document.getElementById('selectAllBtn');
-  if (!btn) return;
-  // Count all visible items
-  let totalVisible = 0;
-  let pubVisible = recipes.map((r,i)=>({r,i}));
-  if (manageFilterTag==='__other__') pubVisible=pubVisible.filter(({r})=>!r.tags||r.tags.length===0);
-  else if (manageFilterTag) pubVisible=pubVisible.filter(({r})=>(r.tags||[]).includes(manageFilterTag));
-  totalVisible += pubVisible.length;
-  if (currentUser.role==='admin') {
-    let dv = userDiary;
-    if (manageFilterTag==='__other__') dv=dv.filter(d=>!d.tags||d.tags.length===0);
-    else if (manageFilterTag) dv=dv.filter(d=>(d.tags||[]).includes(manageFilterTag));
-    totalVisible += dv.length;
-  }
-  const allSelected = totalVisible > 0 && selectedRecipes.size >= totalVisible;
-  btn.classList.toggle('btn-primary', allSelected);
-  btn.classList.toggle('btn-outline', !allSelected);
-}
-
-async function batchShareToPublic() {
-  const diaryIds = [...selectedRecipes].filter(id => typeof id === 'string' && id.startsWith('d')).map(id => parseInt(id.slice(1)));
-  if (!diaryIds.length) { alert('请先勾选个人配方'); return; }
-  if (!await _confirm('将 ' + diaryIds.length + ' 个个人配方分享到公共配方库？')) return;
-  let count = 0;
-  let failed = [];
-  for (const did of diaryIds) {
-    const d = userDiary.find(x => x.id === did);
-    if (!d) continue;
-    try {
-      await _apiFetch('/api/recipes', { method: 'POST', body: JSON.stringify({
-        name: d.name, note: d.note || '',
-        ingredients: (d.ingredients || []).map(i => ({ oil_name: i.oil, drops: i.drops })),
-        tags: d.tags || []
-      })});
-      count++;
-    } catch(e) { failed.push(d.name); }
-  }
-  if (count > 0) { await _apiLoadRecipes(); _showToast(currentUser.role === 'admin' ? '✅ 已分享 ' + count + ' 个配方到公共库' : '✅ 已提交 ' + count + ' 个配方，等待管理员审核'); }
-  if (failed.length > 0) { _showToast('⚠️ ' + failed.length + ' 个配方分享失败：' + failed.join('、')); }
-  selectedRecipes.clear(); _updateSelectAllBtn(); renderManage();
-}
-
-async function batchExportCards() {
-  if (selectedRecipes.size === 0) { alert('请先勾选配方'); return; }
-  const allSelected = [];
-  for (const id of selectedRecipes) {
-    if (typeof id === 'string' && id.startsWith('d')) {
-      const did = parseInt(id.slice(1));
-      const d = userDiary.find(x => x.id === did);
-      if (d) allSelected.push({ name: d.name, ingredients: d.ingredients || [], note: d.note || '', tags: d.tags || [] });
-    } else {
-      const r = recipes[id];
-      if (r) allSelected.push(r);
-    }
-  }
-  if (!allSelected.length) { alert('没有选中的配方'); return; }
-
-  _showToast('正在生成 ' + allSelected.length + ' 张卡片，请稍候...');
-  const zip = new JSZip();
-  const container = document.getElementById('cardViewContainer');
-
-  for (let i = 0; i < allSelected.length; i++) {
-    const r = allSelected[i];
-    // Temporarily render the card
-    const tmpIdx = recipes.indexOf(r);
-    if (tmpIdx >= 0) {
-      renderViewerCard(tmpIdx);
-    } else {
-      // Diary recipe — render manually
-      const eos = (r.ingredients || []).filter(x => x.oil !== '椰子油');
-      const coconut = (r.ingredients || []).find(x => x.oil === '椰子油');
-      const cDrops = coconut ? coconut.drops : 0;
-      const totalEO = eos.reduce((s, x) => s + x.drops, 0);
-      let html = '<div style="background:linear-gradient(145deg,#faf7f0,#f5ede0);border-radius:20px;padding:36px;font-family:Noto Serif SC,serif;max-width:480px;border:1px solid #e0ccaa;position:relative;overflow:hidden">';
-      html += '<div style="font-size:11px;letter-spacing:3px;color:var(--sage);margin-bottom:8px">doTERRA · 来自大地的礼物</div>';
-      html += '<div style="font-size:26px;font-weight:700;color:var(--text-dark);margin-bottom:6px;line-height:1.3">' + r.name + '</div>';
-      html += '<div style="width:80px;height:2px;background:linear-gradient(90deg,var(--sage),var(--gold));border-radius:2px;margin:14px 0"></div>';
-      html += '<ul style="list-style:none;margin-bottom:20px;padding:0">';
-      eos.forEach(ing => {
-        const ppd = OILS[ing.oil] || 0;
-        html += '<li style="display:flex;align-items:center;padding:9px 0;border-bottom:1px solid rgba(180,150,100,0.15);font-size:14px"><span style="flex:1;color:var(--text-dark);font-weight:500">' + ing.oil + '</span><span style="width:50px;text-align:right;color:var(--sage-dark);font-size:13px">' + ing.drops + ' 滴</span><span style="width:60px;text-align:right;color:var(--text-light);font-size:12px">' + (ppd > 0 ? fmtPrice(ppd * ing.drops) : '') + '</span></li>';
-      });
-      html += '</ul>';
-      if (totalEO > 0 && cDrops > 0) {
-        const vol = Math.round((totalEO + cDrops) / DROPS_PER_ML);
-        const ratio = Math.round(cDrops / totalEO);
-        html += '<div style="padding:10px 14px;background:rgba(180,150,100,0.08);border-radius:10px;font-size:12px;color:var(--text-mid);margin-bottom:12px">该配方适用于 ' + vol + 'ml 瓶，其中纯精油 ' + totalEO + ' 滴，其余用椰子油填满，稀释比例为 1:' + ratio + '</div>';
-      }
-      if (r.note) html += '<div style="font-size:12px;color:var(--brown-light);margin-bottom:12px;font-style:italic">📝 ' + r.note + '</div>';
-      const total = calcCost(r.ingredients || []);
-      html += '<div style="background:linear-gradient(135deg,var(--sage),#5a7d5e);border-radius:12px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center"><span style="color:rgba(255,255,255,0.85);font-size:13px">配方总成本</span><span style="color:white;font-size:20px;font-weight:700">' + fmtPrice(total) + '</span></div>';
-      html += _buildBrandHtml();
-      html += '</div>';
-      container.innerHTML = html;
-    }
-
-    const cardEl = container.querySelector('div');
-    if (!cardEl) continue;
-    try {
-      const canvas = await html2canvas(cardEl, { scale: 2, backgroundColor: '#faf7f0', useCORS: true });
-      const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
-      zip.file(r.name.replace(/[\/\\:*?"<>|]/g, '_') + '_配方卡.png', blob);
-    } catch(e) { console.error('Export failed for', r.name, e); }
-    // Update progress
-    if (i % 3 === 0) _showToast('正在生成... (' + (i+1) + '/' + allSelected.length + ')');
-  }
-
-  container.innerHTML = '';
-  _showToast('正在打包下载...');
-  const content = await zip.generateAsync({ type: 'blob' });
-  const url = URL.createObjectURL(content);
-  const a = document.createElement('a');
-  a.href = url; a.download = '配方卡片_' + allSelected.length + '张.zip';
-  a.style.display = 'none';
-  document.body.appendChild(a); a.click();
-  setTimeout(() => { a.remove(); URL.revokeObjectURL(url); }, 300);
-  _showToast('✅ 已导出 ' + allSelected.length + ' 张卡片');
-}
-
-async function batchDelete() {
-  if (selectedRecipes.size === 0) { alert('请先勾选配方'); return; }
-  if (!await _confirm('确认删除选中的 ' + selectedRecipes.size + ' 个配方？此操作不可撤回。')) return;
-  for (const id of [...selectedRecipes]) {
-    if (typeof id === 'string' && id.startsWith('d')) {
-      const did = parseInt(id.slice(1));
-      await _apiFetch('/api/diary/' + did, { method: 'DELETE' }).catch(() => {});
-    } else {
-      const r = recipes[id];
-      if (r && r._id) await _apiFetch('/api/recipes/' + r._id, { method: 'DELETE' }).catch(() => {});
-    }
-  }
-  await _apiLoadRecipes();
-  await loadDiary();
-  selectedRecipes.clear(); _updateSelectAllBtn();
-  _showToast('✅ 已删除');
-  renderManage();
-}
-
-async function shareDiaryToPublic(diaryId) {
-  const d = userDiary.find(x => x.id === diaryId);
-  if (!d) return;
-  if (!await _confirm('将「' + d.name + '」分享到公共配方库？\n分享后所有用户都能看到这个配方。')) return;
-  try {
-    const res = await _apiFetch('/api/recipes', { method: 'POST', body: JSON.stringify({
-      name: d.name, note: d.note || '',
-      ingredients: (d.ingredients || []).map(i => ({ oil_name: i.oil, drops: i.drops })),
-      tags: d.tags || []
-    })});
-    if (res.ok) {
-      if (currentUser.role === 'admin') {
-        _showToast('✅ 已分享到公共配方库');
-      } else {
-        _showToast('✅ 已提交，等待管理员审核');
-      }
-      await _apiLoadRecipes();
-      renderManage();
-    } else _showToast('分享失败');
-  } catch(e) { _showToast('分享失败'); }
-}
-
-function showAddRecipeOverlay() {
-  const overlay = document.createElement('div');
-  overlay.id = 'addRecipeOverlay';
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.25);display:flex;justify-content:center;overflow-y:auto;padding:12px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-
-  overlay.innerHTML = '<div style="position:relative;max-width:600px;width:100%;margin:auto" onclick="event.stopPropagation()">' +
-    '<div class="detail-panel" style="max-width:100%;overflow-x:hidden">' +
-      // Close button
-      '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">' +
-        '<span style="font-size:18px;font-weight:700;font-family:Noto Serif SC,serif;color:var(--text-dark)">＋ 新增配方</span>' +
-        '<button onclick="document.getElementById(\'addRecipeOverlay\').remove()" style="background:rgba(0,0,0,0.06);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;color:var(--text-light)">✕</button>' +
-      '</div>' +
-      // Smart paste section
-      '<div class="form-card" style="margin-bottom:16px">' +
-        '<div style="font-size:14px;font-weight:600;color:var(--text-mid);margin-bottom:8px">✨ 智能粘贴</div>' +
-        '<div class="form-group">' +
-          '<textarea class="form-control" id="addSmartPasteInput" rows="4" placeholder="粘贴配方文本，支持多行多配方：&#10;长高，芳香调理8，永久花10&#10;&#10;助眠，薰衣草15，雪松10" style="font-size:13px"></textarea>' +
-        '</div>' +
-        '<button class="btn btn-primary btn-sm" onclick="smartPasteFromAdd()">🪄 识别并生成</button>' +
-        '<div id="addSmartPasteResult" style="margin-top:10px"></div>' +
-      '</div>' +
-      // Manual add section
-      '<div class="form-card">' +
-        '<div style="font-size:14px;font-weight:600;color:var(--text-mid);margin-bottom:8px">📝 手动新增</div>' +
-        '<div class="form-group">' +
-          '<label class="form-label">配方名称</label>' +
-          '<input type="text" class="form-control" id="addRecipeName" placeholder="如：淡斑精华" style="font-size:14px">' +
-        '</div>' +
-        '<button class="btn btn-primary btn-sm" onclick="createEmptyRecipeAndEdit()">创建并编辑</button>' +
-      '</div>' +
-    '</div></div>';
-  document.body.appendChild(overlay);
-}
-
-function smartPasteFromAdd() {
-  const addInput = document.getElementById('addSmartPasteInput');
-  const origInput = document.getElementById('smartPasteInput');
-  if (origInput) origInput.value = addInput.value;
-  smartPaste();
-  // smartPaste now renders into addSmartPasteResult (preferred) or smartPasteResult
-  if (true) {
-  }
-}
-
-async function createEmptyRecipeAndEdit() {
-  const name = document.getElementById('addRecipeName')?.value.trim();
-  if (!name) { alert('请输入配方名称'); return; }
-  // Create in diary (personal) by default
-  try {
-    const res = await _apiFetch('/api/diary', { method: 'POST', body: JSON.stringify({ name, ingredients: [], note: '' }) });
-    if (!res.ok) { alert('创建失败'); return; }
-    const data = await res.json();
-    await loadDiary();
-    document.getElementById('addRecipeOverlay')?.remove();
-    editDiaryFromManage(data.id);
-  } catch(e) { alert('创建失败'); }
-}
-
-let _editSnapshot = null;
-
-function editFromManage(i) {
-  currentRecipe = i;
-  // Save snapshot to restore on cancel
-  _editSnapshot = { name: recipes[i].name, note: recipes[i].note, ingredients: JSON.parse(JSON.stringify(recipes[i].ingredients)) };
-  currentEditing = JSON.parse(JSON.stringify(recipes[i].ingredients));
-  document.getElementById('detailOverlay').style.display = 'block';
-  document.body.style.overflow = 'hidden';
-  switchToEditorView();
-  document.getElementById('detailPanel').scrollTop = 0;
-}
-
-async function deleteRecipe(i) {
-  if (!await _confirm(`确认删除配方「${recipes[i].name}」？`)) return;
-  recipes.splice(i, 1);
-  saveRecipes();
-  renderManage();
-}
-
-async function deleteRecipeFromSearch(i) {
-  if (!await _confirm(`确认删除配方「${recipes[i].name}」？`)) return;
-  recipes.splice(i, 1);
-  saveRecipes();
-  // Hide detail panel if the deleted recipe was selected
-  if (currentRecipe === i) {
-    closeDetail();
-  } else if (currentRecipe > i) {
-    currentRecipe--;
-  }
-  filterRecipes();
-}
-
-// ============ ADD SECTION ============
-let newIngredients = [{oil:'', drops:1}];
-
-function renderNewIngList() {
-  const list = document.getElementById('newIngList');
-  list.innerHTML = newIngredients.map((ing, i) => {
-    const oilOptions = Object.keys(OILS).sort((a,b) => a.localeCompare(b,'zh')).map(o =>
-      `<option value="${o}" ${o === ing.oil ? 'selected' : ''}>${o}</option>`
-    ).join('');
-    return `<div class="new-ing-row">
-      <select class="form-control" style="flex:1" onchange="newIngChange(${i},'oil',this.value)">
-        <option value="">— 选择精油 —</option>${oilOptions}
-      </select>
-      <input type="number" class="form-control" style="width:90px" value="${ing.drops}" min="0.5" step="0.5" placeholder="滴数" onchange="newIngChange(${i},'drops',this.value)">
-      <button class="remove-btn" onclick="removeNewIng(${i})">×</button>
-    </div>`;
-  }).join('');
-}
-
-function newIngChange(i, field, val) {
-  if (field === 'drops') newIngredients[i].drops = parseFloat(val) || 0;
-  else newIngredients[i].oil = val;
-}
-
-function addNewIngRow() {
-  newIngredients.push({oil:'', drops:1});
-  renderNewIngList();
-}
-
-function removeNewIng(i) {
-  if (newIngredients.length <= 1) return;
-  newIngredients.splice(i, 1);
-  renderNewIngList();
-}
-
-// Check if two ingredient lists are the same
-function isSameIngredients(a, b) {
-  if (a.length !== b.length) return false;
-  const sortA = [...a].sort((x, y) => x.oil.localeCompare(y.oil));
-  const sortB = [...b].sort((x, y) => x.oil.localeCompare(y.oil));
-  return sortA.every((ing, i) => ing.oil === sortB[i].oil && ing.drops === sortB[i].drops);
-}
-
-// Check duplicate before saving. Returns true if save should proceed.
-async function checkDuplicateAndSave(name, ingredients, note) {
-  const existing = recipes.filter(r => r.name === name);
-  if (existing.length > 0) {
-    const same = existing.some(r => isSameIngredients(r.ingredients, ingredients));
-    if (same) {
-      alert(`配方「${name}」已存在且内容一致，无需重复保存。`);
-      return false;
-    } else {
-      // Different content, suggest new name
-      let newName = name;
-      let n = 2;
-      while (recipes.some(r => r.name === newName)) {
-        newName = name + n;
-        n++;
-      }
-      const ok = await _confirm(`已有同名配方「${name}」但内容不一致。\n\n是否保存为「${newName}」？`);
-      if (!ok) return false;
-      recipes.push({ name: newName, note: note || '', ingredients: JSON.parse(JSON.stringify(ingredients)) });
-      saveRecipes();
-      alert('✅ 配方「' + newName + '」已保存！');
-      return true;
-    }
-  }
-  // No duplicate
-  recipes.push({ name, note: note || '', ingredients: JSON.parse(JSON.stringify(ingredients)) });
-  saveRecipes();
-  alert('✅ 配方「' + name + '」已保存！');
-  return true;
-}
-
-function saveNewRecipe() {
-  const name = document.getElementById('newRecipeName').value.trim();
-  if (!name) { alert('请输入配方名称'); return; }
-  const ings = newIngredients.filter(i => i.oil && i.drops > 0);
-  if (!ings.length) { alert('请至少添加一种精油'); return; }
-  const note = document.getElementById('newRecipeNote').value.trim();
-  if (checkDuplicateAndSave(name, ings, note)) {
-    clearNewForm();
-  }
-}
-
-function clearNewForm() {
-  document.getElementById('newRecipeName').value = '';
-  document.getElementById('newRecipeNote').value = '';
-  newIngredients = [{oil:'', drops:1}];
-  renderNewIngList();
-}
-
-// ============ SMART PASTE ============
-// Parse a text chunk into [(oilName, drops), ...] pairs
-// Handles: "芳香调理8永久花10檀香10" → [("芳香调理",8), ("永久花",10), ("檀香",10)]
-function _convertToDrops(oil, value, unit) {
-  // If unit is ml/毫升, convert: 5ml = 100 drops (20 drops per ml)
-  if (unit && /^(ml|毫升|ML|mL)$/.test(unit.trim())) {
-    return Math.round(value * 20);
-  }
-  return value;
-}
-
-function parseOilChunk(text, oilNames) {
-  const results = []; // {name, drops, found}
-  const notFound = [];
-
-  // First try: split by numbers + optional unit → [(text, number, unit), ...]
-  const pairs = [];
-  const regex = /([^\d]+?)(\d+\.?\d*)\s*(ml|毫升|ML|mL|滴)?/g;
-  let m;
-  let lastEnd = 0;
-  while ((m = regex.exec(text)) !== null) {
-    pairs.push({ name: m[1].trim(), value: parseFloat(m[2]), unit: m[3] || '' });
-    lastEnd = regex.lastIndex;
-  }
-  // Remaining text after last number (oil with no drops)
-  const remainder = text.slice(lastEnd).trim();
-
-  if (pairs.length > 0) {
-    // Got number-delimited pairs
-    pairs.forEach(p => {
-      if (!p.name) return;
-      // The name might contain multiple oils concatenated: try greedy match from oil list
-      const parsed = greedyMatchOils(p.name, oilNames);
-      if (parsed.length === 0) {
-        // Whole chunk is one oil name
-        const oil = findOil(p.name, oilNames);
-        if (oil) results.push({ oil, drops: _convertToDrops(oil, p.value, p.unit) });
-        else notFound.push(p.name);
-      } else if (parsed.length === 1) {
-        results.push({ oil: parsed[0], drops: _convertToDrops(parsed[0], p.value, p.unit) });
-      } else {
-        // Multiple oils found before this number - last one gets the drops, others get 1
-        parsed.forEach((oil, idx) => {
-          results.push({ oil, drops: idx === parsed.length - 1 ? _convertToDrops(oil, p.value, p.unit) : 1 });
-        });
-      }
-    });
-    if (remainder) {
-      const oil = findOil(remainder, oilNames);
-      if (oil) results.push({ oil, drops: 1 });
-      else notFound.push(remainder);
-    }
-  } else {
-    // No numbers at all, try to find oil names in the text
-    const oil = findOil(text, oilNames);
-    if (oil) results.push({ oil, drops: 1 });
-    else notFound.push(text);
-  }
-
-  return { results, notFound };
-}
-
-// Try to greedily match known oil names from a concatenated string
-// "芳香调理永久花" → ["芳香调理", "永久花"]
-function greedyMatchOils(text, oilNames) {
-  if (!text) return [];
-  // Sort oil names by length descending (prefer longer matches)
-  const sorted = [...oilNames].sort((a, b) => b.length - a.length);
-  const matched = [];
-  let pos = 0;
-
-  while (pos < text.length) {
-    let found = false;
-    // Try exact match at current position
-    for (const name of sorted) {
-      if (text.startsWith(name, pos)) {
-        matched.push(name);
-        pos += name.length;
-        found = true;
-        break;
-      }
-    }
-    if (!found) {
-      // Try fuzzy match: collect chars until we find a match
-      let end = pos + 1;
-      let fuzzyFound = false;
-      while (end <= text.length) {
-        const segment = text.slice(pos, end);
-        const oil = findOil(segment, oilNames);
-        // Check if this segment closely matches an oil (not just substring)
-        if (oil && editDistance(segment, oil) <= Math.max(1, Math.floor(oil.length / 3))) {
-          matched.push(oil);
-          pos = end;
-          fuzzyFound = true;
-          break;
-        }
-        end++;
-      }
-      if (!fuzzyFound) {
-        // Skip one character and try again
-        pos++;
-      }
-    }
-  }
-  return matched;
-}
-
-// ── Smart Paste: split multi-recipe input ───────────────
-function _splitRawIntoBlocks(raw) {
-  // Step 1: split by blank lines or semicolons
-  let blocks = raw.split(/\n\s*\n|[；;]/).map(b => b.trim()).filter(Boolean);
-
-  // Step 2: for each block, split all parts and detect recipe boundaries
-  // A non-oil, non-number word AFTER we've seen at least one oil = new recipe
-  if (blocks.length <= 1) {
-    const oilNames = Object.keys(OILS);
-    const allParts = raw.split(/[,，、;\n\t。．. ]+/).map(s => s.replace(/[:：]$/, '').trim()).filter(Boolean);
-    if (allParts.length >= 2) {
-      const result = [];
-      let current = [];
-      let hasOilInCurrent = false;
-      for (const part of allParts) {
-        const hasNum = /\d/.test(part);
-        const textOnly = part.replace(/\d+\.?\d*/g, '').replace(/\s*(ml|毫升|ML|mL|滴)\s*/gi, '').trim();
-        const isOil = textOnly && findOil(textOnly, oilNames);
-        if (!hasNum && !isOil && textOnly.length >= 1 && hasOilInCurrent) {
-          // This is a new recipe name — boundary
-          result.push(current.join('，'));
-          current = [part];
-          hasOilInCurrent = false;
-        } else {
-          current.push(part);
-          if (isOil || (hasNum && textOnly && findOil(textOnly, oilNames))) hasOilInCurrent = true;
-        }
-      }
-      if (current.length > 0) result.push(current.join('，'));
-      if (result.length > 1) blocks = result;
-    }
-  }
-  return blocks;
-}
-
-function _cleanRecipeName(name) {
-  // Strip surrounding quotes, brackets, parens, colons
-  return name.replace(/^[\s"'"'「」【】《》\[\]()（）]+/, '').replace(/[\s"'"'「」【】《》\[\]()（）:：]+$/, '').trim();
-}
-
-function _parseSingleBlock(raw) {
-  const parts = raw.split(/[,，、;\n\t ]+/).map(s => s.trim()).filter(Boolean);
-  if (parts.length < 1) return null;
-
-  const oilNames = Object.keys(OILS);
-  const oilsSorted = [...oilNames].sort((a, b) => b.length - a.length);
-  let recipeName = '';
-  let startIdx = 0;
-
-  const firstClean = parts[0].replace(/[:：]$/, '').trim();
-  const firstHasNum = /\d/.test(firstClean);
-  const firstIsOil = findOil(firstClean, oilNames);
-  if (!firstHasNum && !firstIsOil) {
-    recipeName = _cleanRecipeName(firstClean);
-    startIdx = 1;
-  } else {
-    const text = parts[0];
-    let firstOilPos = text.length;
-    for (const name of oilsSorted) {
-      const idx = text.indexOf(name);
-      if (idx !== -1 && idx < firstOilPos) firstOilPos = idx;
-    }
-    if (firstOilPos > 0) {
-      recipeName = _cleanRecipeName(text.slice(0, firstOilPos));
-      parts[0] = text.slice(firstOilPos);
-    }
-    if (!recipeName) recipeName = '未命名配方';
-    startIdx = 0;
-  }
-
-  const ingredients = [];
-  const notFound = [];
-  for (let i = startIdx; i < parts.length; i++) {
-    const part = parts[i].trim();
-    if (!part) continue;
-    const { results, notFound: nf } = parseOilChunk(part, oilNames);
-    results.forEach(r => ingredients.push(r));
-    nf.forEach(n => notFound.push(n));
-  }
-  // Deduplicate: keep the first occurrence of each oil
-  const seen = new Set();
-  const deduped = [];
-  for (const ing of ingredients) {
-    if (!seen.has(ing.oil)) { seen.add(ing.oil); deduped.push(ing); }
-  }
-  const ingredients2 = deduped;
-  if (!ingredients2.length) return null;
-  return { name: recipeName, ingredients: ingredients2, notFound };
-}
-
-function smartPaste() {
-  const raw = document.getElementById('smartPasteInput').value.trim();
-  if (!raw) { alert('请输入配方内容'); return; }
-
-  const blocks = _splitRawIntoBlocks(raw);
-  const parsed = blocks.map(b => _parseSingleBlock(b)).filter(Boolean);
-
-  if (parsed.length === 0) {
-    alert('没有识别到任何精油配方');
-    return;
-  }
-
-  // Store all parsed recipes and show wizard
-  window._smartPasteQueue = parsed;
-  window._smartPasteIdx = 0;
-  window._smartPasteSaved = 0;
-  _renderSmartWizard();
-}
-
-function _renderSmartWizard() {
-  const queue = window._smartPasteQueue;
-  const idx = window._smartPasteIdx;
-  const resultDiv = document.getElementById('addSmartPasteResult') || document.getElementById('smartPasteResult');
-  if (!queue || idx >= queue.length) {
-    // All done
-    const saved = window._smartPasteSaved || 0;
-    resultDiv.innerHTML = '<div style="background:var(--sage-mist);border-radius:12px;padding:20px;text-align:center">' +
-      '<div style="font-size:24px;margin-bottom:8px">✅</div>' +
-      '<div style="font-size:15px;font-weight:600;color:var(--sage-dark)">全部完成！共保存 ' + saved + ' 个配方</div>' +
-    '</div>';
-    document.getElementById('smartPasteInput').value = '';
-    window._smartPasteQueue = null;
-    // Expand personal recipes on search page
-    window._myRecipesCollapsed = false;
-    _saveFoldStates();
-    filterRecipes();
-    renderPersonalSection();
-    // If only 1 recipe saved, show its card; otherwise close
-    setTimeout(() => {
-      document.getElementById('addRecipeOverlay')?.remove();
-      if (saved === 1 && userDiary.length > 0) {
-        // Show card preview, then navigate to manage after close
-        const newId = userDiary[0].id;
-        viewDiaryAsCard(newId);
-        // Override closeDetail to go to manage page after
-        const origClose = closeDetail;
-        closeDetail = function() {
-          origClose();
-          closeDetail = origClose;
-          _goToNewRecipes();
-        };
-      } else {
-        _goToNewRecipes();
-      }
-    }, 1000);
-    return;
-  }
-
-  const recipe = queue[idx];
-  const total = queue.length;
-
-  // Build editable wizard card
-  let html = '<div style="background:var(--sage-mist);border-radius:14px;padding:20px;margin-top:8px">';
-
-  // Progress header
-  html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">' +
-    '<div style="font-size:15px;font-weight:700;color:var(--sage-dark)">📋 校准配方 (' + (idx+1) + '/' + total + ')</div>' +
-    '<div style="font-size:12px;color:var(--text-light)">已保存 ' + (window._smartPasteSaved||0) + ' 个</div>' +
-  '</div>';
-
-  // Progress bar
-  html += '<div style="height:4px;background:var(--border);border-radius:2px;margin-bottom:16px;overflow:hidden">' +
-    '<div style="height:100%;background:var(--sage);width:' + ((idx/total)*100) + '%;transition:width 0.3s"></div></div>';
-
-  // Recipe name (editable)
-  html += '<div class="form-group" style="margin-bottom:12px">' +
-    '<label class="form-label" style="font-size:13px">配方名称</label>' +
-    '<input type="text" class="form-control" id="wizardName" value="' + (recipe.name||'').replace(/"/g, '&quot;') + '" style="font-size:14px;font-weight:600">' +
-  '</div>';
-
-  // Ingredients (editable rows, like add recipe page)
-  html += '<div class="form-group" style="margin-bottom:12px">' +
-    '<label class="form-label" style="font-size:13px">精油成分</label>' +
-    '<div id="wizardIngList">';
-
-  recipe.ingredients.forEach((ing, i) => {
-    const cost = (OILS[ing.oil] || 0) * ing.drops;
-    html += '<div style="display:flex;gap:6px;align-items:center;margin-bottom:6px" data-idx="' + i + '">' +
-      '<select class="form-control wiz-oil" style="flex:2;font-size:13px;padding:6px 8px">' +
-        '<option value="">选择精油</option>' +
-        Object.keys(OILS).sort().map(n => '<option value="' + n + '"' + (n === ing.oil ? ' selected' : '') + '>' + n + '</option>').join('') +
-      '</select>' +
-      '<input type="number" class="form-control wiz-drops" value="' + ing.drops + '" min="0.5" step="0.5" style="width:65px;font-size:13px;padding:6px 8px;text-align:center">' +
-      '<span style="font-size:11px;color:var(--text-light);width:50px;text-align:right">¥' + cost.toFixed(2) + '</span>' +
-      '<button onclick="this.parentElement.remove();_updateWizardCost()" style="background:none;border:none;cursor:pointer;font-size:14px;color:var(--text-light);padding:2px">✕</button>' +
-    '</div>';
-  });
-
-  html += '</div>' +
-    '<button class="btn btn-outline btn-sm" onclick="_addWizardIngRow()" style="font-size:12px">＋ 添加精油</button>' +
-  '</div>';
-
-  // Not found warnings
-  if (recipe.notFound && recipe.notFound.length) {
-    html += '<div style="font-size:12px;color:#c0392b;margin-bottom:12px">⚠️ 未识别：' + recipe.notFound.join('、') + '</div>';
-  }
-
-  // Cost display
-  const totalCost = recipe.ingredients.reduce((s, ing) => s + (OILS[ing.oil] || 0) * ing.drops, 0);
-  html += '<div id="wizardCostLine" style="font-size:14px;font-weight:600;color:var(--sage-dark);margin-bottom:14px">总成本：¥' + totalCost.toFixed(2) + '</div>';
-
-  // Action buttons
-  html += '<div style="display:flex;gap:10px;flex-wrap:wrap">' +
-    '<button class="btn btn-primary" onclick="_wizardSaveAndNext()">✅ 保存并' + (idx < total - 1 ? '下一个' : '完成') + '</button>' +
-    (idx < total - 1 ? '<button class="btn btn-outline" onclick="_wizardSkip()">放弃</button>' : '') +
-    '<button class="btn btn-outline" onclick="_wizardCancel()" style="color:var(--text-light)">取消</button>' +
-  '</div>';
-
-  html += '</div>';
-  resultDiv.innerHTML = html;
-
-  // Add live cost updates
-  resultDiv.querySelectorAll('.wiz-oil, .wiz-drops').forEach(el => {
-    el.addEventListener('change', _updateWizardCost);
-    el.addEventListener('input', _updateWizardCost);
-  });
-}
-
-function _addWizardIngRow() {
-  const list = document.getElementById('wizardIngList');
-  if (!list) return;
-  const div = document.createElement('div');
-  div.style.cssText = 'display:flex;gap:6px;align-items:center;margin-bottom:6px';
-  div.innerHTML =
-    '<select class="form-control wiz-oil" style="flex:2;font-size:13px;padding:6px 8px" onchange="_updateWizardCost()">' +
-      '<option value="">选择精油</option>' +
-      Object.keys(OILS).sort().map(n => '<option value="' + n + '">' + n + '</option>').join('') +
-    '</select>' +
-    '<input type="number" class="form-control wiz-drops" value="1" min="0.5" step="0.5" style="width:65px;font-size:13px;padding:6px 8px;text-align:center" oninput="_updateWizardCost()">' +
-    '<span style="font-size:11px;color:var(--text-light);width:50px;text-align:right">¥0.00</span>' +
-    '<button onclick="this.parentElement.remove();_updateWizardCost()" style="background:none;border:none;cursor:pointer;font-size:14px;color:var(--text-light);padding:2px">✕</button>';
-  list.appendChild(div);
-}
-
-function _updateWizardCost() {
-  const list = document.getElementById('wizardIngList');
-  if (!list) return;
-  let total = 0;
-  list.querySelectorAll('[style*="display:flex"]').forEach(row => {
-    const oil = row.querySelector('.wiz-oil')?.value;
-    const drops = parseFloat(row.querySelector('.wiz-drops')?.value) || 0;
-    const cost = (OILS[oil] || 0) * drops;
-    total += cost;
-    const costSpan = row.querySelector('span');
-    if (costSpan) costSpan.textContent = '¥' + cost.toFixed(2);
-  });
-  const costLine = document.getElementById('wizardCostLine');
-  if (costLine) costLine.textContent = '总成本：¥' + total.toFixed(2);
-}
-
-function _getWizardIngredients() {
-  const list = document.getElementById('wizardIngList');
-  if (!list) return [];
-  const ings = [];
-  list.querySelectorAll('[style*="display:flex"]').forEach(row => {
-    const oil = row.querySelector('.wiz-oil')?.value;
-    const drops = parseFloat(row.querySelector('.wiz-drops')?.value) || 0;
-    if (oil && drops > 0) ings.push({ oil, drops });
-  });
-  return ings;
-}
-
-async function _saveToDiary(name, ingredients, note) {
-  // Check for duplicate — same name in diary
-  const existing = userDiary.find(d => d.name === name);
-  if (existing) {
-    // Compare ingredients
-    const oldIngs = (existing.ingredients || []).filter(i => i.oil !== '椰子油').map(i => i.oil + ' ' + i.drops + '滴').join('、');
-    const newIngs = ingredients.filter(i => i.oil !== '椰子油').map(i => i.oil + ' ' + i.drops + '滴').join('、');
-    const isSame = oldIngs === newIngs;
-    if (isSame) {
-      _showToast('「' + name + '」已存在且内容相同，跳过');
-      return true; // treat as success to continue wizard
-    }
-    const msg = '个人配方中已有「' + name + '」\n\n原有配方：' + (oldIngs || '空') + '\n新配方：' + (newIngs || '空') + '\n\n是否覆盖？';
-    if (!await _confirm(msg)) return 'cancel';
-    try {
-      const res = await _apiFetch('/api/diary/' + existing.id, { method: 'PUT', body: JSON.stringify({
-        name, note: note || '', ingredients: ingredients.map(i => ({ oil: i.oil, drops: i.drops }))
-      })});
-      if (res.ok) { await loadDiary(); return true; }
-    } catch(e) {}
-    return false;
-  }
-  try {
-    const res = await _apiFetch('/api/diary', { method: 'POST', body: JSON.stringify({
-      name, ingredients: ingredients.map(i => ({ oil: i.oil, drops: i.drops })), note: note || ''
-    })});
-    if (res.ok) { await loadDiary(); return true; }
-  } catch(e) {}
-  return false;
-}
-
-async function _wizardSaveAndNext() {
-  const name = document.getElementById('wizardName')?.value.trim();
-  if (!name) { alert('请输入配方名称'); return; }
-  const ings = _getWizardIngredients();
-  if (!ings.length) { alert('请至少添加一种精油'); return; }
-
-  const result = await _saveToDiary(name, ings, '');
-  if (result === 'cancel') {
-    // User chose not to overwrite — stay on current step, let them edit name
-    _showToast('可以修改配方名称后重新保存');
-    document.getElementById('wizardName')?.focus();
-    document.getElementById('wizardName')?.select();
-    return;
-  }
-  if (result) {
-    window._smartPasteSaved = (window._smartPasteSaved || 0) + 1;
-  }
-  window._smartPasteIdx++;
-  _renderSmartWizard();
-}
-
-function _wizardSkip() {
-  window._smartPasteIdx++;
-  _renderSmartWizard();
-}
-
-function _wizardCancel() {
-  const addResult = document.getElementById('addSmartPasteResult');
-  if (addResult) addResult.innerHTML = '';
-  const origResult = document.getElementById('smartPasteResult');
-  if (origResult) origResult.innerHTML = '';
-  window._smartPasteQueue = null;
-  // Close the add overlay if open
-  document.getElementById('addRecipeOverlay')?.remove();
-}
-
-function scaleRecipe(ingredients, coconutDrops, ratio) {
-  ratio = ratio || 8;
-  const totalEO = ingredients.reduce((s, ing) => s + ing.drops, 0);
-  const targetEO = coconutDrops / ratio;
-  const factor = targetEO / totalEO;
-
-  let scaled = ingredients.map(ing => ({
-    oil: ing.oil,
-    drops: Math.round(ing.drops * factor * 2) / 2
-  }));
-  scaled = scaled.map(ing => ({ ...ing, drops: Math.max(0.5, ing.drops) }));
-  scaled.push({ oil: '椰子油', drops: coconutDrops });
-  return scaled;
-}
-
-function getScaleParams() {
-  const coconut = parseFloat(document.getElementById('scaleCoconut')?.value) || 10;
-  const ratio = parseInt(document.getElementById('scaleRatio')?.value) || 8;
-  return { coconut, ratio };
-}
-
-function rescalePreview() {
-  const data = window._smartPasteData;
-  if (!data) return;
-  const { coconut, ratio } = getScaleParams();
-  data.scaledIngredients = scaleRecipe(data.ingredients, coconut, ratio);
-  const scaledDiv = document.getElementById('scaledPreviewContent');
-  if (scaledDiv) {
-    scaledDiv.innerHTML = renderRecipePreview('单次用量', data.name, data.scaledIngredients);
-  }
-}
-
-function renderRecipePreview(label, name, ingredients, notFound) {
-  let html = '<div style="font-weight:600;margin-bottom:8px">' + label + '：「' + name + '」</div><div style="font-size:13px;line-height:2">';
-  ingredients.forEach(ing => {
-    const cost = (OILS[ing.oil] || 0) * ing.drops;
-    html += '<span class="tag">' + ing.oil + ' ' + ing.drops + '滴 (¥' + cost.toFixed(2) + ')</span> ';
-  });
-  const total = ingredients.reduce((s, ing) => s + (OILS[ing.oil] || 0) * ing.drops, 0);
-  html += '</div><div style="margin-top:6px;font-size:13px;font-weight:600;color:var(--sage-dark)">总成本：¥' + total.toFixed(2) + '</div>';
-  if (notFound && notFound.length) {
-    html += '<div style="margin-top:6px;font-size:12px;color:#c0392b">⚠️ 未识别：' + notFound.join('、') + '</div>';
-  }
-  return html;
-}
-
-async function confirmSmartPaste(type) {
-  const data = window._smartPasteData;
-  if (!data) return;
-  const ings = type === 'scaled' ? data.scaledIngredients : data.ingredients;
-  const note = type === 'scaled' ? '单次用量（已换算）' : '';
-  const result = await _saveToDiary(data.name, ings, note);
-  if (result === 'cancel') {
-    _showToast('可以修改配方名称后重新保存');
-    return;
-  }
-  if (result) {
-    document.getElementById('smartPasteInput').value = '';
-    document.getElementById('smartPasteResult').innerHTML = '';
-    window._smartPasteData = null;
-    _showToast('✅ 已保存到我的配方');
-  }
-}
-
-function editDistance(a, b) {
-  const m = a.length, n = b.length;
-  const dp = Array.from({length: m+1}, () => Array(n+1).fill(0));
-  for (let i = 0; i <= m; i++) dp[i][0] = i;
-  for (let j = 0; j <= n; j++) dp[0][j] = j;
-  for (let i = 1; i <= m; i++)
-    for (let j = 1; j <= n; j++)
-      dp[i][j] = Math.min(
-        dp[i-1][j] + 1,
-        dp[i][j-1] + 1,
-        dp[i-1][j-1] + (a[i-1] === b[j-1] ? 0 : 1)
-      );
-  return dp[m][n];
-}
-
-// Homophone/pinyin alias map for common misspellings
-const OIL_HOMOPHONES = {
-  '相貌':'香茅','香矛':'香茅','向茅':'香茅','像茅':'香茅',
-  '如香':'乳香','儒香':'乳香',
-  '古巴想':'古巴香脂','古巴香':'古巴香脂','古巴相脂':'古巴香脂',
-  '博荷':'薄荷','薄河':'薄荷',
-  '尤佳利':'尤加利','优加利':'尤加利',
-  '依兰':'依兰依兰',
-  '雪松木':'雪松',
-  '桧木':'扁柏','桧柏':'扁柏',
-  '永久化':'永久花','永久华':'永久花',
-  '罗马洋柑菊':'罗马洋甘菊','洋甘菊':'罗马洋甘菊',
-  '天竹葵':'天竺葵','天竺癸':'天竺葵',
-  '没要':'没药','莫药':'没药',
-  '快乐鼠尾':'快乐鼠尾草',
-  '椒样博荷':'椒样薄荷','椒样薄和':'椒样薄荷',
-  '丝柏木':'丝柏',
-  '柠檬草油':'柠檬草',
-  '茶树油':'茶树',
-  '薰衣草油':'薰衣草',
-  '玫瑰花':'玫瑰',
-};
-
-function findOil(input, oilNames) {
-  if (!input || input.length < 1) return null;
-  // Check homophone alias first
-  if (OIL_HOMOPHONES[input]) return OIL_HOMOPHONES[input];
-  // Exact match
-  if (OILS[input] !== undefined) return input;
-
-  // Substring match (prefer longest): input⊂name or name⊂input
-  let best = null;
-  let bestLen = 0;
-  for (const name of oilNames) {
-    if (name === input) return name;
-    if (name.includes(input) || input.includes(name)) {
-      if (name.length > bestLen) { best = name; bestLen = name.length; }
-    }
-  }
-  if (best) return best;
-
-  // "Missing one char" match: for oils with 3+ chars,
-  // check if input matches the oil name with any single char removed (or vice versa)
-  // e.g. 古巴想 vs 古巴香脂: 古巴香脂 remove '脂' = 古巴香 ≠ 古巴想, but 古巴想 has same length...
-  // Better: check if input and name share all-but-one characters in order
-  if (input.length >= 2) {
-    let bestMissing = null;
-    let bestMissingScore = 0;
-    for (const name of oilNames) {
-      if (name.length < 3) continue;
-      // Input is name minus one char
-      if (input.length === name.length - 1) {
-        for (let i = 0; i < name.length; i++) {
-          if (name.slice(0, i) + name.slice(i + 1) === input) {
-            if (name.length > bestMissingScore) { bestMissing = name; bestMissingScore = name.length; }
-            break;
-          }
-        }
-      }
-      // Name is input minus one char (input has extra char)
-      if (input.length === name.length + 1 && name.length >= 3) {
-        for (let i = 0; i < input.length; i++) {
-          if (input.slice(0, i) + input.slice(i + 1) === name) {
-            if (name.length > bestMissingScore) { bestMissing = name; bestMissingScore = name.length; }
-            break;
-          }
-        }
-      }
-    }
-    if (bestMissing) return bestMissing;
-  }
-
-  // Edit distance fuzzy: for 3+ char names, allow 1 substitution (same-length homophone)
-  // e.g. 古巴想脂 vs 古巴香脂 (one char different, same length)
-  let bestDist = Infinity;
-  let bestFuzzy = null;
-  for (const name of oilNames) {
-    const dist = editDistance(input, name);
-    let maxDist;
-    if (name.length === 2 && input.length === 2) {
-      maxDist = 1; // 2-char: allow one substitution (同音: 如祥→乳香)
-    } else if (name.length < 3) {
-      continue; // 2-char name vs different-length input: skip
-    } else {
-      maxDist = name.length <= 3 ? 1 : Math.ceil(name.length / 3);
-    }
-    if (dist <= maxDist && dist < bestDist) {
-      bestDist = dist;
-      bestFuzzy = name;
-    }
-  }
-  return bestFuzzy;
-}
-
-// ============ OILS SECTION ============
-let editingOil = null;
-
-let _oilViewMode = 'bottle'; // 'bottle' or 'drop'
-function exportOilsPDF() {
-  const today = new Date();
-  const dateStr = today.getFullYear() + String(today.getMonth()+1).padStart(2,'0') + String(today.getDate()).padStart(2,'0');
-  const title = '国内多特瑞精油单价' + dateStr;
-
-  // Build table data sorted by name
-  const entries = Object.entries(OILS_META).sort((a, b) => a[0].localeCompare(b[0], 'zh'));
-
-  let html = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>' + title + '</title>' +
-    '<style>' +
-    'body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;padding:20px;font-size:11px;color:#333}' +
-    'h1{font-size:18px;text-align:center;margin-bottom:4px}' +
-    'p.sub{text-align:center;font-size:11px;color:#888;margin-bottom:16px}' +
-    'table{width:100%;border-collapse:collapse;margin-bottom:20px}' +
-    'th{background:#7a9e7e;color:white;padding:6px 8px;text-align:center;font-size:11px;font-weight:600}' +
-    'td{padding:5px 8px;border-bottom:1px solid #e0e0e0;text-align:center;font-size:11px}' +
-    'tr:nth-child(even){background:#f9f9f9}' +
-    'tr:hover{background:#e8f5e9}' +
-    'td:first-child{text-align:left;font-weight:500}' +
-    '@media print{body{padding:10px}h1{font-size:16px}}' +
-    '</style></head><body>' +
-    '<h1>doTERRA 精油单价表</h1>' +
-    '<p class="sub">' + title + ' · 会员优惠价</p>' +
-    '<table><thead><tr>' +
-    '<th>精油</th><th>每瓶价格（元）</th><th>零售价（元）</th><th>容量</th><th>滴数</th><th>单价（元/滴）</th>' +
-    '</tr></thead><tbody>';
-
-  const volMap = {46:'2.5ml',93:'5ml',160:'160颗',186:'10ml',280:'15ml',2146:'115ml'};
-  entries.forEach(([name, meta]) => {
-    const ppd = OILS[name] || 0;
-    const vol = volMap[meta.dropCount] || (meta.dropCount + '滴');
-    const unit = name === '植物空胶囊' ? '/颗' : '/滴';
-    html += '<tr>' +
-      '<td>' + name + '</td>' +
-      '<td>¥' + (meta.bottlePrice || 0) + '</td>' +
-      '<td>' + (meta.retailPrice ? '¥' + meta.retailPrice : '-') + '</td>' +
-      '<td>' + vol + '</td>' +
-      '<td>' + (meta.dropCount || '-') + '</td>' +
-      '<td>¥' + ppd.toFixed(2) + unit + '</td>' +
-    '</tr>';
-  });
-
-  html += '</tbody></table>' +
-    '<p style="text-align:center;font-size:10px;color:#aaa">共 ' + entries.length + ' 种精油 · doTERRA 配方计算器导出</p>' +
-    '</body></html>';
-
-  // Open in new window for print/save as PDF
-  const win = window.open('', '_blank');
-  win.document.write(html);
-  win.document.close();
-  win.document.title = title;
-  setTimeout(() => { win.print(); }, 500);
-}
-
-function _setOilView(mode) {
-  _oilViewMode = mode;
-  document.getElementById('oilViewBottle').style.cssText = 'border:none;border-radius:0;font-size:12px;padding:6px 12px;' + (mode==='bottle' ? 'background:var(--sage);color:white' : 'background:white;color:var(--text-mid)');
-  document.getElementById('oilViewDrop').style.cssText = 'border:none;border-radius:0;font-size:12px;padding:6px 12px;' + (mode==='drop' ? 'background:var(--sage);color:white' : 'background:white;color:var(--text-mid)');
-  renderOils(document.getElementById('oilSearchInput')?.value || '');
-}
-
-function renderOils(filter='') {
-  document.getElementById('oilCount').textContent = Object.keys(OILS).length;
-  const grid = document.getElementById('oilsGrid');
-  const entries = Object.entries(OILS).filter(([name]) =>
-    !filter || name.includes(filter)
-  ).sort((a, b) => a[0].localeCompare(b[0], 'zh'));
-  grid.innerHTML = entries.map(([name, ppd]) => {
-    const meta = OILS_META[name] || {};
-    if (editingOil === name) {
-      const dc = meta.dropCount || '';
-      const volMap = {46:'2.5', 93:'5', 186:'10', 280:'15', 2146:'115'};
-      const vol = volMap[dc] || 'custom';
-      return `<div class="oil-chip" style="flex-wrap:wrap">
-        <span class="oil-chip-name" style="width:100%;margin-bottom:6px">${name}<br><span style="font-size:11px;color:var(--text-light);font-weight:400">${oilEn(name)}</span></span>
-        <input type="number" class="oil-edit-input" id="editBottlePrice" value="${meta.bottlePrice || ''}" step="0.01" min="0" placeholder="瓶价"
-          onkeydown="if(event.key==='Enter')saveOilEdit('${name}')">
-        <select class="oil-edit-input" id="editVolume" onchange="onVolumeChange('edit')" style="width:110px">
-          <option value="2.5" ${vol==='2.5'?'selected':''}>2.5ml</option>
-          <option value="5" ${vol==='5'?'selected':''}>5ml</option>
-          <option value="10" ${vol==='10'?'selected':''}>10ml</option>
-          <option value="15" ${vol==='15'?'selected':''}>15ml</option>
-          <option value="115" ${vol==='115'?'selected':''}>115ml</option>
-          <option value="custom" ${vol==='custom'?'selected':''}>自定义</option>
-        </select>
-        <input type="number" class="oil-edit-input" id="editDropCount" value="${dc}" step="1" min="1" placeholder="滴数"
-          style="display:${vol==='custom'?'inline-block':'none'}"
-          onkeydown="if(event.key==='Enter')saveOilEdit('${name}')">
-        <div class="oil-chip-actions">
-          <button class="oil-chip-btn" onclick="saveOilEdit('${name}')" title="保存">✓</button>
-          <button class="oil-chip-btn" onclick="cancelOilEdit()" title="取消">✕</button>
-        </div>
-      </div>`;
-    }
-    const canEditOil = currentUser.role === 'admin' || currentUser.role === 'senior_editor';
-    const adminActions = canEditOil ? `
-      <div style="display:flex;flex-direction:column;gap:1px">
-        <button onclick="event.stopPropagation();startOilEdit('${name}')" title="编辑" style="background:none;border:none;cursor:pointer;font-size:11px;padding:2px 4px;border-radius:4px;color:var(--text-light)" onmouseover="this.style.background='var(--sage-mist)'" onmouseout="this.style.background='none'">✏️</button>
-        <button onclick="event.stopPropagation();deleteOil('${name}')" title="删除" style="background:none;border:none;cursor:pointer;font-size:11px;padding:2px 4px;border-radius:4px;color:var(--text-light)" onmouseover="this.style.background='#fdf0ee'" onmouseout="this.style.background='none'">🗑</button>
-      </div>` : '';
-    const hasCard = _getOilCard(name);
-    const isActive = meta.isActive !== false;
-    const chipStyle = !isActive
-      ? 'opacity:0.7;background:#f5f5f5'
-      : hasCard
-        ? 'cursor:pointer;border-left:3px solid var(--sage);background:linear-gradient(90deg,var(--sage-mist),white)'
-        : '';
-    return `<div class="oil-chip" style="${chipStyle}" ${hasCard ? 'onclick="showOilCard(\''+name.replace(/'/g,"\\'")+'\')"' : ''}>
-      <div style="flex:1;min-width:0">
-        <span class="oil-chip-name">${name}${hasCard ? ' <span style="font-size:9px;color:var(--sage);background:var(--sage-mist);padding:1px 5px;border-radius:6px;vertical-align:middle">📖</span>' : ''}<br><span style="font-size:10px;color:var(--text-light);font-weight:400">${oilEn(name)}</span></span>
-      </div>
-      <div style="text-align:right;flex-shrink:0">
-        ${_oilViewMode === 'bottle'
-          ? ('<div style="font-size:13px;color:var(--sage-dark);font-weight:600">¥' + (meta.bottlePrice || (ppd * (meta.dropCount || 280))).toFixed(0) +
-              '<span style="font-size:10px;font-weight:400;color:var(--text-light)">/瓶</span>' +
-              (meta.dropCount ? '<span style="font-size:10px;font-weight:400;color:var(--text-light)"> ' + ({46:'2.5ml',93:'5ml',160:'160颗',186:'10ml',280:'15ml',2146:'115ml'}[meta.dropCount] || '') + '</span>' : '') +
-            '</div>' +
-            (meta.retailPrice ? '<div style="font-size:11px;color:var(--text-light);text-decoration:line-through">¥' + meta.retailPrice + '</div>' : ''))
-          : ('<div style="font-size:13px;color:var(--sage-dark);font-weight:600">¥' + ppd.toFixed(2) + (name==='植物空胶囊'?'/颗':'/滴') + '</div>' +
-            (meta.retailPrice ? '<div style="font-size:11px;color:var(--text-light);text-decoration:line-through">¥' + (meta.retailPrice/meta.dropCount).toFixed(2) + (name==='植物空胶囊'?'/颗':'/滴') + '</div>' : ''))
-        }
-      </div>
-      ${adminActions || ''}
-    </div>`;
-  }).join('');
-}
-
-function filterOils() {
-  renderOils(document.getElementById('oilSearchInput').value.trim());
-}
-
-const VOLUME_DROPS = {'2.5': 46, '5': 93, '10': 186, '15': 280, '115': 2146};
-
-function onVolumeChange(prefix) {
-  const volSelect = document.getElementById(prefix === 'new' ? 'newOilVolume' : 'editVolume');
-  const dropInput = document.getElementById(prefix === 'new' ? 'newOilDropCount' : 'editDropCount');
-  const vol = volSelect.value;
-  if (VOLUME_DROPS[vol]) {
-    dropInput.value = VOLUME_DROPS[vol];
-    dropInput.style.display = 'none';
-  } else if (vol === 'custom') {
-    dropInput.value = '';
-    dropInput.style.display = 'inline-block';
-    dropInput.focus();
-  } else {
-    dropInput.value = '';
-    dropInput.style.display = 'none';
-  }
-}
-
-function getDropCount(prefix) {
-  const volSelect = document.getElementById(prefix === 'new' ? 'newOilVolume' : 'editVolume');
-  const dropInput = document.getElementById(prefix === 'new' ? 'newOilDropCount' : 'editDropCount');
-  const vol = volSelect.value;
-  if (VOLUME_DROPS[vol]) return VOLUME_DROPS[vol];
-  return parseInt(dropInput.value);
-}
-
-async function addNewOil() {
-  const nameInput = document.getElementById('newOilName');
-  const bottlePriceInput = document.getElementById('newOilBottlePrice');
-  const name = nameInput.value.trim();
-  const bottlePrice = parseFloat(bottlePriceInput.value);
-  const dropCount = getDropCount('new');
-  if (!name) { alert('请输入精油名称'); return; }
-  if (isNaN(bottlePrice) || bottlePrice < 0) { alert('请输入有效的瓶价'); return; }
-  if (isNaN(dropCount) || dropCount <= 0) { alert('请选择容量或输入滴数'); return; }
-  if (OILS[name] !== undefined) {
-    const meta = OILS_META[name];
-    if (!await _confirm(`「${name}」已存在（¥${meta.bottlePrice}/${meta.dropCount}滴），要更新吗？`)) return;
-  }
-  OILS[name] = bottlePrice / dropCount;
-  OILS_META[name] = { bottlePrice, dropCount };
-  saveOils();
-  nameInput.value = '';
-  bottlePriceInput.value = '';
-  document.getElementById('newOilVolume').value = '';
-  document.getElementById('newOilDropCount').value = '';
-  document.getElementById('newOilDropCount').style.display = 'none';
-  filterOils();
-}
-
-function startOilEdit(name) {
-  editingOil = name;
-  filterOils();
-  setTimeout(() => {
-    const input = document.getElementById('editOilPrice');
-    if (input) { input.focus(); input.select(); }
-  }, 50);
-}
-
-function saveOilEdit(name) {
-  const bottlePrice = parseFloat(document.getElementById('editBottlePrice').value);
-  const dropCount = getDropCount('edit');
-  if (isNaN(bottlePrice) || bottlePrice < 0) { alert('请输入有效的瓶价'); return; }
-  if (isNaN(dropCount) || dropCount <= 0) { alert('请选择容量或输入滴数'); return; }
-  OILS[name] = bottlePrice / dropCount;
-  OILS_META[name] = { bottlePrice, dropCount };
-  saveOils();
-  editingOil = null;
-  filterOils();
-}
-
-function cancelOilEdit() {
-  editingOil = null;
-  filterOils();
-}
-
-async function deleteOil(name) {
-  if (!await _confirm(`确认删除「${name}」？\n\n注意：已有配方中如果用到此精油，成本将显示为 ¥0`)) return;
-  delete OILS[name];
-  delete OILS_META[name];
-  saveOils();
-  filterOils();
-}
-
-// ============ OIL ENGLISH NAMES ============
-const OIL_EN = {
-"丁香花蕾":"Clove Bud","丝柏":"Cypress","乐活":"DigestZen","乐释":"Adaptiv",
-"乳香":"Frankincense","五味子":"Schisandra","佛手柑":"Bergamot","依兰依兰":"Ylang Ylang",
-"侧柏":"Arborvitae","保卫":"On Guard","元气":"Zendocrine","全神贯注":"Thinker",
-"冬青":"Wintergreen","净化清新":"Purify","加州胡椒":"Pink Pepper","印蒿":"Manuka",
-"古巴香脂":"Copaiba","圆柚":"Grapefruit","夏威夷檀香":"Hawaiian Sandalwood",
-"天然防护":"TerraShield","天竺葵":"Geranium","姜黄":"Turmeric","安宁神气":"Serenity",
-"安定情绪":"Balance","完美修护":"DDR Prime","宽容":"Forgive","小茴香":"Fennel",
-"小豆蔻":"Cardamom","尤加利":"Eucalyptus","山鸡椒":"Litsea","岩兰草":"Vetiver",
-"广藿香":"Patchouli","当归":"Angelica","快乐鼠尾草":"Clary Sage","恬家":"Tamer",
-"愈创木":"Guaiacwood","扁柏":"Hinoki","抚慰":"Console","斯里兰卡肉桂皮":"Cinnamon Bark",
-"新清肌呵护":"HD Clear Touch","新清肌调理":"HD Clear","新瑞活力":"MetaPWR",
-"月桂叶":"Bay Leaf","木兰呵护":"Magnolia Touch","杜松浆果":"Juniper Berry",
-"枫香":"Liquidambar","柑橘清新":"Citrus Bliss","柑橘绚烂":"Sunny Citrus",
-"柠檬":"Lemon","柠檬尤加利":"Lemon Eucalyptus","柠檬草":"Lemongrass",
-"柠檬香桃木":"Lemon Myrtle","桂花":"Osmanthus","桂花呵护":"Osmanthus Touch",
-"丝柏呵护":"Cypress Touch","乐活呵护":"DigestZen Touch","乳香呵护":"Frankincense Touch",
-"仕女呵护":"Soft Talk","保卫呵护":"On Guard Touch","元气焕能":"MetaPWR Advantage",
-"全神贯注呵护":"Thinker Touch","永久花呵护":"Helichrysum Touch","牛至呵护":"Oregano Touch",
-"舒压呵护":"PastTense Touch","艾草":"Mugwort","蓝睡莲呵护":"Blue Lotus Touch",
-"薄荷呵护":"Peppermint Touch","薰衣草呵护":"Lavender Touch","顺畅呼吸呵护":"Breathe Touch",
-"桦木":"Birch","植物空胶囊":"Veggie Cap","椒样薄荷":"Peppermint","椰子油":"Coconut Oil",
-"椰风香草":"Vanilla & Coconut","橙花":"Neroli","橙花呵护":"Neroli Touch",
-"檀香":"Sandalwood","欢欣":"Cheer","永久花":"Helichrysum","没药":"Myrrh",
-"清醇薄荷":"SuperMint","温柔呵护":"ClaryCalm","热情":"Passion","特瑞活力":"DDR Prime",
-"玫瑰":"Rose","玫瑰呵护":"Rose Touch","玫瑰草":"Palmarosa","甜茴香":"Sweet Fennel",
-"生姜":"Ginger","百里香":"Thyme","穗甘松":"Spikenard","红橘":"Tangerine",
-"绿薄荷":"Spearmint","缬草":"Valerian","罗勒":"Basil","罗文莎叶":"Ravensara",
-"罗马洋甘菊":"Roman Chamomile","舒缓":"Deep Blue","芫荽":"Coriander",
-"芫荽叶":"Cilantro","花样年华焕肤油":"Immortelle","芳香调理":"AromaTouch",
-"芹菜籽":"Celery Seed","苦橙叶":"Petitgrain","茉莉":"Jasmine",
-"茉莉呵护":"Jasmine Touch","茶树":"Tea Tree","茶树呵护":"Tea Tree Touch",
-"莱姆":"Lime","蓝艾菊":"Blue Tansy","薰衣草":"Lavender",
-"西伯利亚冷杉":"Siberian Fir","西洋蓍草":"Yarrow|Pom","西班牙牛至":"Oregano",
-"西班牙鼠尾草":"Spanish Sage","赋活呼吸":"Air-X","迷迭香":"Rosemary",
-"道格拉斯冷杉":"Douglas Fir","野橘":"Wild Orange","雪松":"Cedarwood",
-"静谧":"Peace","顺畅呼吸":"Easy Air","香茅":"Citronella","香蜂草":"Melissa",
-"马郁兰":"Marjoram","麦卢卡":"Manuka","黑云杉":"Black Spruce",
-"黑胡椒":"Black Pepper","鼓舞":"Motivate"
-};
-function oilEn(name) { return OIL_EN[name] || ''; }
-// Synonym groups for fuzzy search - any word in a group matches the others
-const SEARCH_SYNONYMS = [
-  ['胸','乳腺','丰胸','乳房'],
-  ['头','头疼','头痛','头疗','头皮','头发','脱发','生发','白发','发膜'],
-  ['睡','失眠','安眠','安睡','睡眠','多梦','助眠'],
-  ['肚','腹','胃','消化','便秘','积食','腹泻','拉肚','脾胃','胀气'],
-  ['瘦','减肥','减脂','瘦身','瘦腰','带脉'],
-  ['痘','痤疮','粉刺','清痘','痘痘'],
-  ['斑','淡斑','美白','祛斑','色斑'],
-  ['皱','抗衰','紧致','皱纹','抗老','焕肤'],
-  ['鼻','鼻炎','通鼻','鼻塞','鼻子'],
-  ['咳','咳嗽','止咳','清咽','嗓子'],
-  ['肩','颈','肩颈','落枕','富贵包','天鹅颈'],
-  ['腰','腰椎','腰痛','腰背'],
-  ['膝','关节','骨','滑膜','腱鞘','扭伤','韧带'],
-  ['经','痛经','月经','调经','暖宫','子宫','卵巢'],
-  ['眼','眼袋','黑眼圈','近视','老花','视力','干眼','明目'],
-  ['湿','祛湿','湿疹','排湿','化湿'],
-  ['寒','驱寒','手脚冰凉','冰冷','暖'],
-  ['敏','过敏','敏感肌','荨麻疹','皮肤过敏'],
-  ['免疫','感冒','发烧','退烧','防疫','保卫'],
-  ['肝','护肝','排毒','肝脏','脂肪肝'],
-  ['肾','强肾','前列腺','尿','泌尿'],
-  ['心','心脑','血管','血压','高血压','心脏'],
-  ['情绪','焦虑','抑郁','安定','放松','压力','失眠'],
-  ['美容','护肤','面部','脸','毛孔','保湿'],
-  ['呼吸','顺畅','哮喘','止鼾','打鼾'],
-  ['糖','血糖','稳定血糖','降糖'],
-  ['疤','疤痕','修复','伤口','烧烫伤'],
-];
-
-function getExpandedQuery(q) {
-  const terms = [q];
-  for (const group of SEARCH_SYNONYMS) {
-    if (group.some(w => q.includes(w) || w.includes(q))) {
-      for (const w of group) { if (!terms.includes(w)) terms.push(w); }
-    }
-  }
-  return terms;
-}
-
-function recipeNameEn(name) {
-  const MAP = {
-    '酸痛包':'Pain Relief','小v脸':'V-Face Lift','健脾化湿精油浴':'Spleen & Dampness Bath',
-    '一夜好眠精油浴':'Deep Sleep Bath','生发':'Hair Growth','湿疹舒缓':'Eczema Relief',
-    '乳腺疏通':'Breast Care','缓解酸痛精油刮痧':'Pain Relief Gua Sha','灰指甲':'Nail Fungus',
-    '白发转黑':'Gray Hair Reversal','紫外线修复':'UV Repair','瘦身带脉':'Slimming Belt',
-    '私密护理':'Intimate Care','痘痘':'Acne Care','淋巴排毒':'Lymph Detox',
-    '情绪管理':'Emotional Balance','发膜':'Hair Mask','脾胃养护':'Digestive Care',
-    '招财开运油':'Prosperity Oil','植物热玛吉':'Plant Thermage','十全大补':'Ultimate Tonic',
-    '豪华头疗':'Luxury Scalp Treatment','明目青睐':'Eye Care','缓解头痛':'Headache Relief',
-    '护肝排毒':'Liver Detox','强心护心':'Heart Support','通鼻消炎':'Sinus Relief',
-    '过敏湿疹':'Allergy & Eczema','肺部结节':'Lung Nodule Care','尿路感染':'UTI Care',
-    '皮外损伤':'Wound Healing','平衡血糖':'Blood Sugar Balance','肚痛腹泻':'Stomach Relief',
-    '韧带扭伤':'Ligament Sprain','血脂稳定':'Cholesterol Balance','冻疮修复':'Frostbite Repair',
-    '皮下囊肿':'Subcutaneous Cyst','疏肝解郁':'Liver Qi Relief','大脑抗衰':'Brain Anti-Aging',
-    '神经麻木':'Nerve Numbness','春季用油':'Spring Blend','夏季用油':'Summer Blend',
-    '秋季用油':'Autumn Blend','冬季用油':'Winter Blend','祛湿丸子':'Dampness Ball',
-    '三伏排湿':'San Fu Dampness','三伏晒背':'San Fu Back Sun','三伏百会':'San Fu Bai Hui',
-    '三伏八髎':'San Fu Ba Liao','三伏大椎':'San Fu Da Zhui','三伏檀中':'San Fu Dan Zhong',
-    '三伏扶阳':'San Fu Yang Support','女性内分泌':'Female Hormones','提升免疫力':'Immune Boost',
-    '面部精华':'Facial Serum','日常头疗':'Daily Scalp Care','肝肾保护':'Liver & Kidney',
-    '情绪能量油':'Emotional Energy','养心宁神':'Heart & Spirit','安稳睡眠':'Steady Sleep',
-    '过敏体质':'Allergy Constitution','淋巴结节':'Lymph Nodule','甲状腺结节':'Thyroid Nodule',
-    '皮肤过敏':'Skin Allergy','止鼾安睡':'Anti-Snore Sleep','哮喘缓解':'Asthma Relief',
-    '带状疱疹':'Shingles Care','耳聋耳鸣':'Tinnitus Care','减脂瘦身':'Fat Burning',
-    '痔疮用油':'Hemorrhoid Care','静脉曲张':'Varicose Veins','痛风缓解':'Gout Relief',
-    '滑膜炎症':'Synovitis Care','腱鞘炎症':'Tendinitis Care','腰椎滑脱':'Lumbar Slip',
-    '暖宫调经':'Warming Womb','经期止痛':'Period Pain Relief','乳腺增生':'Breast Hyperplasia',
-    '丰胸挺拔':'Breast Enhancement','私密紧致':'Intimate Tightening','乳腺结节':'Breast Nodule',
-    '手脚冰凉':'Cold Hands & Feet','修复腹直肌':'Diastasis Recti','子宫肌瘤':'Uterine Fibroid',
-    '卵巢囊肿':'Ovarian Cyst','美背':'Beautiful Back','减轻妊娠纹':'Stretch Mark',
-    '更年期症':'Menopause Support','妇科炎症':'Gynecological Care','备孕调理':'Fertility',
-    '抗衰紧致':'Anti-Aging Firming','美白淡斑':'Whitening & Brightening',
-    '水油平衡':'Oil-Water Balance','敏感肌':'Sensitive Skin','防晒修复':'Sun Repair',
-    '深层净化排毒':'Deep Purifying Detox','唇部保养':'Lip Care','皱纹推土机':'Wrinkle Bulldozer',
-    '祛除颈纹':'Neck Line Removal','植物水光针':'Plant Water Glow',
-    '早C精华':'Morning C Serum','晚A精华':'Night A Serum','消鸡皮肤':'Keratosis Care',
-    '保湿焕肤':'Moisturizing Renewal','养护指甲':'Nail Care','疤痕修复':'Scar Repair',
-    '收缩毛孔':'Pore Minimizer','酒糟鼻':'Rosacea Care','眼袋黑眼圈':'Dark Circle Care',
-    '清痘无痕':'Clear Acne','脂肪粒':'Milia Care','头疼':'Headache','痤疮粉刺':'Acne',
-    '近视老花':'Vision Care','记忆力':'Memory Boost','皮肤老化':'Skin Aging',
-    '头皮屑':'Dandruff','鼻炎用油':'Rhinitis Care','中耳炎':'Otitis Media',
-    '口腔溃疡':'Mouth Ulcer','口臭':'Bad Breath','牙龈牙周':'Gum Care',
-    '烧烫伤':'Burn Care','蚊虫叮咬':'Insect Bite','退烧神器':'Fever Reducer',
-    '感冒咳嗽':'Cold & Cough','腹泻':'Diarrhea','晕车恶心':'Motion Sickness',
-    '醉酒':'Hangover','脚气':'Athlete\'s Foot','痛经':'Period Cramp',
-    '亲密关系':'Intimacy','前列腺养护':'Prostate Care','手脚冰冷':'Cold Extremities',
-    '口唇疱疹':'Cold Sore','外阴瘙痒':'Feminine Itch','便秘积食':'Constipation',
-    '痛风':'Gout','消除富贵包':'Buffalo Hump','焦虑':'Anxiety',
-    '更年期':'Menopause','失眠多梦':'Insomnia','稳定血糖':'Blood Sugar',
-    '心脑血管护理':'Cardiovascular','关节疼痛':'Joint Pain','高血压保健':'Blood Pressure',
-    '儿童长高':'Child Growth','湿疹':'Eczema','驱蚊喷雾':'Mosquito Spray',
-    '学霸神助':'Study Focus','儿童抚触':'Child Touch','儿童脾胃':'Child Digestion',
-    '视力养护':'Vision Support','退烧方案':'Fever Protocol','白发转黑发':'Gray to Black Hair',
-    '生发配方':'Hair Growth Formula','消脂肪肝':'Fatty Liver','尿床尿频':'Bedwetting',
-  };
-  return MAP[name] || name;
-}
-function oilRetailPpd(name) { const m = OILS_META[name]; return m && m.retailPrice ? m.retailPrice / m.dropCount : 0; }
-function calcRetailCost(ingredients) { return ingredients.reduce((s, i) => s + oilRetailPpd(i.oil) * i.drops, 0); }
-function fmtCostWithRetail(ingredients) {
-  const cost = calcCost(ingredients);
-  const retail = calcRetailCost(ingredients);
-  if (retail > 0 && retail !== cost) {
-    return fmtPrice(cost) + ' <span style="text-decoration:line-through;color:var(--text-light);font-size:12px">' + fmtPrice(retail) + '</span>';
-  }
-  return fmtPrice(cost);
-}
-
-// ============ OIL KNOWLEDGE CARDS ============
-const OIL_CARDS = {
-'野橘':{emoji:'🍊',en:'Wild Orange',effects:'安抚镇静、驱散负能量、紧张情绪和压力\n抗氧化、消炎、抗病毒、增强免疫\n提振食欲，刺激胆汁分泌，促进消化\n促进循环',usage:'日常香薰，提振情绪、舒压，营造愉悦氛围\n饮水加入 1至2 滴，护肝抗病毒\n泡澡时滴 3至4 滴，消除疲劳，放松身心\n扫地、拖地时加入 3至5 滴，清新空气\n涂抹腹部促进消化\n涂抹肝区帮助肝脏排毒\n口腔溃疡时加入水中漱口',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹',caution:'轻微光敏，白天涂抹注意防晒'},
-'冬青':{emoji:'🌿',en:'Wintergreen',effects:'强效镇痛（肌肉、关节）\n抗炎、促进循环\n舒缓紧绷肌肉，抗痉挛',usage:'牙疼时加 1 滴到水中漱口\n扭伤、落枕、酸痛（如肩颈酸痛）处稀释涂抹\n运动前后按摩',method:'🔹香薰 ｜🔺涂抹（需 6 倍稀释）',caution:'不可内用、孕期慎用、避免儿童误食'},
-'生姜':{emoji:'🫚',en:'Ginger',effects:'促进消化、暖胃\n活血、改善循环、祛湿\n抗炎、抗氧化、强健免疫\n缓解恶心、晕车\n促进骨骼、肌肉和关节的健康',usage:'胀气、腹冷时，稀释涂抹腹部或喝 1 滴\n手脚冰凉时，稀释涂抹脚底或将1滴加入热饮中\n晕车时，吸闻或滴在手心嗅吸\n祛除风寒可将 2 滴加入热水中泡脚\n痛经时，稀释涂抹于小腹并按摩\n做菜时可加入 1 滴帮助增添风味',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹（需稀释）',caution:''},
-'柠檬草':{emoji:'🍃',en:'Lemongrass',effects:'强效抗菌、抗炎\n驱虫、净化空气\n扩张血管，促进循环，缓解肌肉疼痛',usage:'筋膜紧绷、腿麻或肌肉酸痛时稀释涂抹\n肩周炎时，6 倍稀释后涂抹于肩颈部位并按摩\n做菜时加入 1 滴，增加泰式风味\n加入椰子油中制成家居喷雾，涂抹在裸露肌肤上驱蚊虫\n洗衣时加 3至5 滴祛味杀菌\n日常香薰平衡情绪',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹（需 6 倍稀释）',caution:''},
-'柑橘清新':{emoji:'🍬',en:'Citrus Bliss',effects:'提振精神，改善负面情绪\n净化空间\n降低压力',usage:'日常香薰提升愉悦感，提振精神，净化空间\n拖地时加几滴清新空气\n加入到护手霜中，滋润手部肌肤，享受清新香气',method:'🔹香薰 ｜ 🔺涂抹',caution:'含柑橘类，光敏注意白天涂抹'},
-'芳香调理':{emoji:'🤲',en:'AromaTouch',effects:'放松紧绷肌肉，放松关节\n促进血液循环\n促进淋巴排毒\n提升免疫\n舒缓放松，减少紧张',usage:'稀释涂抹于太阳穴，缓解头痛，改善紧张情绪\n稀释涂抹于僵硬的身体部位如肩颈处并按摩，促进肌肉放松\n日常香薰或加入热水中泡澡，释放压力',method:'🔹香薰 ｜ 🔺涂抹',caution:''},
-'西洋蓍草':{emoji:'🔵',en:'Yarrow | Pom',effects:'改善肌肤老化症状\n美白肌肤，改善瑕疵\n呵护敏感肌肤，对抗炎症\n提升整体免疫',usage:'早晚护肤时，涂抹3至4滴于面部，改善皱纹和细纹，美白肌肤\n每天早晚舌下含服1滴，促进细胞健康，提升免疫',method:'🔸内用 ｜ 🔺涂抹',caution:''},
-'新瑞活力':{emoji:'🌿',en:'MetaPWR',effects:'促进新陈代谢，减肥\n抑制食欲，减少对甜食的渴望\n稳定血糖波动\n提振情绪，激励身心',usage:'饭前喝1至2滴，控制食欲，稳定血糖，提升代谢\n日常香薰可以帮助恢复能量，消除疲乏感\n稀释涂抹与身体需紧致的部位，帮助紧致塑形\n加入饮品中，帮助增添风味\n\n\n\n刺激等级：需稀释',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹（需稀释）',caution:''},
-'安定情绪':{emoji:'🌳',en:'Balance',effects:'促进全身的放松\n减轻焦虑，缓解紧张情绪\n带来宁静和安定感',usage:'日常香薰稳定情绪，放松\n夜间香薰促进睡眠\n涂抹脚底或脊椎放松情绪，放松肌肉\n冥想、瑜伽前涂抹',method:'🔹香薰 ｜ 🔺涂抹',caution:''},
-'安宁神气':{emoji:'😴',en:'Serenity',effects:'促进深度睡眠\n放松身体，缓解焦虑\n平衡情绪\n平衡自律神经系统',usage:'夜间香薰或稀释涂抹脚底促进深度睡眠，释放压力\n稀释涂抹太阳穴或脚底舒缓压力\n吸闻缓解焦虑和紧张情绪',method:'🔹香薰 ｜ 🔺涂抹',caution:''},
-'元气':{emoji:'🔥',en:'Zendocrine',effects:'帮助身体净化，排毒\n维持肝脏和肾脏健康\n平衡情徐',usage:'饭前内用1至2滴帮助代谢\n稀释涂抹肝区或内服3滴帮助养护肝脏\n稀释涂抹后腰脊椎出帮助养护肾脏，排除毒素\n日常香薰消除压力',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹',caution:''},
-'温柔呵护':{emoji:'🌸',en:'Soft Talk',effects:'平衡荷尔蒙\n抚平情绪波动\n调理经期不适\n舒缓压力\n提升女性魅力',usage:'稀释涂抹下腹部帮助平衡荷尔蒙，或进行经期调理\n手心嗅吸帮助舒缓压力，平衡情绪\n2滴直接涂抹于脖颈后侧或手腕动脉处，提升女性魅力',method:'🔹香薰 ｜ 🔺涂抹',caution:''},
-'柠檬':{emoji:'🍋',en:'Lemon',effects:'清洁身体与环境\n强健免疫系统\n帮助肝脏代谢、排毒\n抗氧化\n净化空气、去异味\n蔬果清洗、保鲜（减少果蝇）\n促进循环、提振精神',usage:'添加至护肤品中晚上使用\n添加至牙膏里美白牙齿\n滴入口中或水里喝下，一天三次，每次3至5滴，净化身体\n洗水果和蔬菜时添加 1至2 滴浸泡\n嗓子疼或感冒初期时，含服柠檬1至2滴，做阻截病毒的第一道防线\n日常香薰提振情绪，护肝',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹（夜间）',caution:'光敏性，白天避免涂抹'},
-'薰衣草':{emoji:'💜',en:'Lavender',effects:'镇静安神、改善睡眠、缓解头痛\n舒缓压力、平衡情绪、抗抑郁\n烧烫伤修复、疤痕、痘印\n促进伤口修复、止血\n促进细胞再生，修复结缔组织\n抗炎、抗过敏、止痛\n抗痉挛\n皮肤舒缓止痒，如蚊虫叮咬',usage:'烧伤、烫伤、割伤及任何伤口处涂抹，止血防疤\n夜间香薰助眠，白天香薰舒缓情绪\n鱼刺卡嗓子时滴入口中\n加入护肤品中平衡油脂、改善痘痘、去疤痕',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹（儿童/敏感肌需稀释）',caution:''},
-'椒样薄荷':{emoji:'🌿',en:'Peppermint',effects:'促进健康的呼吸系统\n祛痰、抗粘膜发炎、打开呼吸道\n强肝利胆，促进消化，舒缓各种肠胃疾病\n退热、缓解中暑\n清凉止痒\n提神醒脑、提升专注、缓解头痛',usage:'白天香薰提神醒脑，清新空气\n按摩头部缓解头疼、提神醒脑\n蚊虫叮咬后，涂抹止痒\n混入水中进行漱口，清新口气\n在喷瓶中和水混合，夏天时每次晃匀喷洒于身上，预防中暑\n发烧时，2小时将稀释后的薄荷涂抹于额头、腋下、腹股沟等，帮助身体降温\n打嗝、咳嗽、鼻塞时吸闻\n晕车时吸闻\n消化不良时稀释涂抹于腹部或内用 2 滴\n过敏时使用，吸闻、内用、涂抹均可',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹（儿童/敏感肌需稀释）',caution:'孕期/高血压慎用，晚上少用'},
-'茶树':{emoji:'🌱',en:'Tea Tree',effects:'抗菌、抗病毒、抗真菌\n提升免疫力\n头皮屑护理\n预防化脓\n居家杀菌净化',usage:'各种痤疮处点涂\n加入护肤品中，清洁皮肤，促进皮肤健康\n湿疹、痱子时稀释涂抹\n洗头时加 1 滴到洗头膏，去头皮屑\n洗衣服时加入 3至5 滴，杀菌祛味\n脚气时用茶树泡脚，并和水混合后喷撒于鞋内\n中耳炎时，在睡前滴 1 滴到棉球上，塞入耳道\n眼睛发炎时，稀释涂抹于大眼眶\n阴道炎时，在热水中加入2至3滴，坐浴，或滴于内裤上\n感冒时涂抹，杀菌抗病毒',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹（儿童/敏感肌需稀释）',caution:''},
-'西班牙牛至':{emoji:'🔥',en:'Oregano',effects:'强抗菌、抗病毒、抗顽固性真菌\n成人炎症辅助\n促进消化\n强抗氧化、抗衰老\n免疫力提升',usage:'洗衣服或拖地时加入 3至5 滴，消炎杀菌，自然清香\n吃坏肚子或消化不良时稀释涂抹于腹部或灌于胶囊中内用\n灰指甲时稀释涂抹于患处，每日 1至2 次\n疣、痣、鸡眼等不健康的皮肤组织上稀释涂抹\n关节炎等肌肉骨骼酸痛问题，配合稀释涂抹，消炎止痛\n流感季节时香薰，杀灭空气中微生物\n炒牛肉时用牙签蘸取少许，增添风味',method:'🔹香薰 ｜ 🔸内用（胶囊） ｜ 🔺涂抹（需高倍稀释）',caution:''},
-'保卫':{emoji:'🛡',en:'On Guard',effects:'强化免疫力\n抗氧化\n天然杀菌、净化空气\n维护口腔健康',usage:'日常香熏净化空气，强化免疫力\n流感季节或换季时香薰，阻断病毒传播\n混入水中漱口，保持口气清新\n牙龈炎、牙周炎、拔牙后，混入椰子油中漱口（油漱法）\n日常稀释涂抹于脊椎或脚底，强化免疫力\n感冒时涂抹，抗菌抗病毒',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹（儿童/敏感肌需稀释）',caution:'含肉桂丁香，不宜频繁涂抹'},
-'顺畅呼吸':{emoji:'🌬',en:'Breathe',effects:'帮助缓解鼻炎、感冒等呼吸道不适\n促进呼吸系统健康\n净化空气\n换季时保护呼吸系统',usage:'日常香薰，强健呼吸系统，净化空气\n咳嗽、鼻塞时香薰、吸闻（可滴在口罩内）、涂抹于鼻翼、喉咙或肺部\n乘坐公共交通工具时可滴在口罩内，清新空气\n打鼾、哮喘、鼻炎可日常吸闻，夜间滴在口罩内\n运动前吸闻，扩张呼吸道',method:'🔹香薰 ｜ 🔺涂抹（儿童/敏感肌需稀释）',caution:''},
-'乐活':{emoji:'🍃',en:'DigestZen',effects:'促进消化\n缓解胀气、消化不良、便秘等胃肠不适\n胃肠型感冒改善',usage:'便秘时，稀释涂抹肚脐周围并顺时针揉腹\n喝酒前后各喝2滴，解酒护肝\n晕车、晕船时，吸闻或稀释涂抹于肚脐周围，可缓解恶心，舒缓情绪\n胃肠型感冒时，稀释涂抹肚脐周围并揉腹\n至拉肚子时，喝2滴或稀释涂抹肚脐周围并逆时针揉腹\n可滴入水中泡制卤蛋',method:'🔹熏香 ｜ 🔸内用 ｜ 🔺涂抹（儿童/敏感肌需稀释）',caution:''},
-'舒缓':{emoji:'🌿',en:'Deep Blue',effects:'缓解肌肉酸痛\n抗痉挛，抗炎',usage:'肌肉酸痛、扭伤、挫伤、肩颈紧绷、落枕、关节疼痛、腰背部酸痛、运动损伤时，稀释涂抹于患处',method:'🔺涂抹（需稀释）',caution:''},
-'乳香':{emoji:'👑',en:'Frankincense',effects:'促进伤口愈合，促进细胞健康\n抗氧化、抗发炎、抗衰老、淡纹\n活血行气\n疏通血管\n滋养大脑神经，提高血氧含量',usage:'加入护肤品中，淡斑，抗衰\n稀释后涂抹大眼眶，改善视力\n早晚舌下含服 2 滴，提高血氧含量，缓解头疼，疏通血管\n夜间香薰，滋养大脑，安眠\n任何情况下，想不起来用什么就用乳香',method:'🔹香薰 ｜ 🔸内用 ｜ 🔺涂抹',caution:''}
-};
-
-const OIL_CARD_ALIAS = {
-  '仕女呵护': '温柔呵护',
-  '薄荷呵护': '椒样薄荷',
-  '牛至呵护': '西班牙牛至',
-};
-function _getOilCard(name) {
-  if (OIL_CARDS[name]) return OIL_CARDS[name];
-  // Check alias
-  if (OIL_CARD_ALIAS[name] && OIL_CARDS[OIL_CARD_ALIAS[name]]) return OIL_CARDS[OIL_CARD_ALIAS[name]];
-  // Fallback: 呵护 variant → base oil card
-  const base = name.replace(/呵护$/, '');
-  if (base !== name && OIL_CARDS[base]) return OIL_CARDS[base];
-  return null;
-}
-
-function showOilCard(name) {
-  const card = _getOilCard(name);
-  if (!card) return;
-  const meta = OILS_META[name] || {};
-  const ppd = OILS[name] || 0;
-  const rpd = meta.retailPrice ? (meta.retailPrice / meta.dropCount) : 0;
-  const en = card.en || oilEn(name);
-
-  const fmtList = (text) => {
-    if (!text) return '';
-    return text.replace(/\\n/g, '\n').split('\n').filter(l => l.trim()).map(l =>
-      '<div style="display:flex;gap:8px;margin-bottom:8px;align-items:flex-start">' +
-        '<span style="color:var(--sage);flex-shrink:0;margin-top:3px;font-size:8px">●</span>' +
-        '<span>' + l.trim() + '</span></div>'
-    ).join('');
-  };
-
-  const overlay = document.createElement('div');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-
-  let html = '<div style="position:absolute;inset:0;background:rgba(0,0,0,0.4)" onclick="this.parentElement.remove()"></div>';
-  html += '<div style="position:relative;z-index:1;background:white;border-radius:20px;max-width:460px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 16px 56px rgba(0,0,0,0.25)" onclick="event.stopPropagation()">';
-
-  // Header
-  html += '<div style="background:linear-gradient(135deg,#3d6b41 0%,#5a7d5e 50%,#7a9e7e 100%);border-radius:20px 20px 0 0;padding:28px 24px;color:white;text-align:center;position:relative">';
-  html += '<button onclick="this.closest(\'[style*=fixed]\').remove()" style="position:absolute;top:12px;right:16px;background:rgba(255,255,255,0.2);border:none;color:white;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:16px">×</button>';
-  html += '<div style="font-size:48px;margin-bottom:6px;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.2))">' + card.emoji + '</div>';
-  html += '<div style="font-family:Noto Serif SC,serif;font-size:22px;font-weight:700;letter-spacing:2px">' + name + '</div>';
-  html += '<div style="font-size:13px;opacity:0.85;margin-top:4px;letter-spacing:1px">' + en + '</div>';
-  // Price info
-  html += '<div style="margin-top:12px;display:flex;justify-content:center;gap:12px;font-size:12px;opacity:0.9">';
-  html += '<span>¥' + ppd.toFixed(2) + '/滴</span>';
-  html += '<span>' + (meta.dropCount || '?') + '滴/瓶</span>';
-  html += '<span>¥' + (meta.bottlePrice || '?') + '/瓶</span>';
-  html += '</div>';
-  if (rpd) {
-    html += '<div style="font-size:11px;opacity:0.7;margin-top:4px;text-decoration:line-through">零售 ¥' + rpd.toFixed(2) + '/滴 · ¥' + meta.retailPrice + '/瓶</div>';
-  }
-  html += '</div>';
-
-  // Body
-  html += '<div style="padding:24px">';
-
-  // Method badges
-  if (card.method) {
-    html += '<div style="text-align:center;margin-bottom:16px">';
-    const methods = card.method.split('｜').map(m => m.trim());
-    methods.forEach(m => {
-      let bg = 'var(--sage-mist)'; let color = 'var(--sage-dark)';
-      if (m.includes('内用')) { bg = '#fff3e0'; color = '#e65100'; }
-      if (m.includes('涂抹')) { bg = '#e8f5e9'; color = '#2e7d32'; }
-      if (m.includes('香薰') || m.includes('熏香')) { bg = '#e3f2fd'; color = '#1565c0'; }
-      html += '<span style="display:inline-block;padding:4px 12px;border-radius:16px;font-size:12px;margin:2px;background:' + bg + ';color:' + color + '">' + m + '</span>';
-    });
-    html += '</div>';
-  }
-
-  // Effects
-  html += '<div style="margin-bottom:20px">';
-  html += '<div style="font-size:16px;font-weight:700;color:var(--sage-dark);margin-bottom:12px;letter-spacing:1px;display:flex;align-items:center;gap:6px"><span style="font-size:18px">✨</span> 主要功效</div>';
-  html += '<div style="font-size:13px;color:var(--text-dark);line-height:1.9">' + fmtList(card.effects) + '</div>';
-  html += '</div>';
-
-  // Usage
-  html += '<div style="margin-bottom:20px">';
-  html += '<div style="font-size:16px;font-weight:700;color:var(--sage-dark);margin-bottom:12px;letter-spacing:1px;display:flex;align-items:center;gap:6px"><span style="font-size:18px">📖</span> 使用方法</div>';
-  html += '<div style="font-size:13px;color:var(--text-mid);line-height:1.9">' + fmtList(card.usage) + '</div>';
-  html += '</div>';
-
-  // Caution
-  if (card.caution) {
-    html += '<div style="background:#fff8e1;border-radius:10px;padding:12px 16px;border-left:3px solid #ffc107">';
-    html += '<div style="font-size:12px;font-weight:600;color:#f57f17;margin-bottom:4px">⚠️ 注意事项</div>';
-    html += '<div style="font-size:13px;color:#795548">' + card.caution.replace(/\\n/g, '<br>') + '</div>';
-    html += '</div>';
-  }
-
-  // Brand footer
-  if (userBrand.qr_code || userBrand.brand_logo || userBrand.brand_name) {
-    html += '<div style="display:flex;align-items:center;justify-content:space-between;padding-top:16px;margin-top:16px;border-top:1px solid rgba(180,150,100,0.15);gap:10px">';
-    html += '<div style="display:flex;align-items:center;gap:8px;flex:1">';
-    if (userBrand.brand_logo) html += '<img src="' + userBrand.brand_logo + '" style="height:28px;width:auto;object-fit:contain">';
-    if (userBrand.brand_name) html += '<span style="font-size:11px;color:#8a7a6a">' + userBrand.brand_name + '</span>';
-    html += '</div>';
-    if (userBrand.qr_code) html += '<img src="' + userBrand.qr_code + '" style="width:56px;height:56px;object-fit:cover;border-radius:4px">';
-    html += '</div>';
-  }
-
-  html += '</div>'; // close body padding div
-
-  html += '</div>'; // close card container
-  overlay.innerHTML = html;
-  document.body.appendChild(overlay);
-
-  _autoConvertCardToImage(overlay);
-}
-
-function _autoConvertCardToImage(overlay) {
-  const cardDiv = overlay.querySelector('[style*="max-width"]');
-  if (!cardDiv) return;
-  // Hide buttons during capture
-  const btns = cardDiv.querySelectorAll('button');
-  btns.forEach(b => b.style.display = 'none');
-  setTimeout(() => {
-    html2canvas(cardDiv, { scale: 2, backgroundColor: '#ffffff', useCORS: true }).then(canvas => {
-      const imgUrl = canvas.toDataURL('image/png');
-      overlay.innerHTML = '';
-      overlay.style.cssText = 'position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.7);display:flex;flex-direction:column;align-items:center;padding:16px;overflow-y:auto';
-      overlay.onclick = () => overlay.remove();
-      overlay.innerHTML =
-        '<img src="' + imgUrl + '" style="max-width:100%;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.3);margin-top:16px" onclick="event.stopPropagation()">' +
-        '<div style="text-align:center;margin-top:10px;font-size:13px;color:rgba(255,255,255,0.7)">📱 长按图片保存到相册</div>' +
-        '<button class="btn btn-outline btn-sm" onclick="this.closest(\'[style*=fixed]\').remove()" style="color:white;border-color:rgba(255,255,255,0.3);margin-top:8px">关闭</button>';
-    }).catch(() => { btns.forEach(b => b.style.display = ''); });
-  }, 100);
-}
-
-
-function showDilutionCard() {
-  const overlay = document.createElement('div');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-  overlay.innerHTML = `
-    <div style="position:absolute;inset:0;background:rgba(0,0,0,0.4)" onclick="this.parentElement.remove()"></div>
-    <div style="position:relative;z-index:1;background:white;border-radius:20px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 16px 56px rgba(0,0,0,0.25)" onclick="event.stopPropagation()">
-      <div style="background:linear-gradient(135deg,#2e7d32,#66bb6a);border-radius:20px 20px 0 0;padding:28px 24px;color:white;text-align:center">
-        <div style="font-size:48px;margin-bottom:8px">💧</div>
-        <div style="font-family:Noto Serif SC,serif;font-size:22px;font-weight:700">精油稀释比例指南</div>
-        <div style="font-size:13px;opacity:0.85;margin-top:4px">安全使用，科学稀释</div>
-      </div>
-      <div style="padding:24px">
-        <table style="width:100%;border-collapse:collapse;font-size:14px">
-          <tr style="border-bottom:2px solid #e8f5e9"><th style="text-align:left;padding:10px 8px;color:#2e7d32">适用人群</th><th style="text-align:right;padding:10px 8px;color:#2e7d32">精油 : 椰子油</th></tr>
-          <tr style="border-bottom:1px solid #f0f0f0"><td style="padding:10px 8px">👶 1岁以下</td><td style="text-align:right;padding:10px 8px;font-weight:600">1 : 200</td></tr>
-          <tr style="border-bottom:1px solid #f0f0f0"><td style="padding:10px 8px">🧒 1 至 2 岁</td><td style="text-align:right;padding:10px 8px;font-weight:600">1 : 100</td></tr>
-          <tr style="border-bottom:1px solid #f0f0f0"><td style="padding:10px 8px">👦 2 至 6 岁</td><td style="text-align:right;padding:10px 8px;font-weight:600">1 : 50</td></tr>
-          <tr style="border-bottom:1px solid #f0f0f0"><td style="padding:10px 8px">🧑 6 至 12 岁</td><td style="text-align:right;padding:10px 8px;font-weight:600">1 : 10</td></tr>
-          <tr style="border-bottom:1px solid #f0f0f0"><td style="padding:10px 8px">🧴 成人敏感肌</td><td style="text-align:right;padding:10px 8px;font-weight:600">1 : 5~10</td></tr>
-          <tr><td style="padding:10px 8px">🔥 强刺激精油<br><span style="font-size:11px;color:var(--text-light)">牛至/肉桂/丁香/桂皮等</span></td><td style="text-align:right;padding:10px 8px;font-weight:600">1 : 6~10</td></tr>
-        </table>
-        <div style="margin-top:16px;padding:12px;background:#e8f5e9;border-radius:10px;font-size:12px;color:#2e7d32;text-align:center">
-          💡 稀释比例 = 1滴精油 : N滴椰子油<br>比例越大越温和，新手建议从高稀释比例开始
-        </div>
-      </div>
-      <div style="padding:0 24px 20px;display:flex;gap:8px;justify-content:center">
-      </div>
-    </div>`;
-  document.body.appendChild(overlay);
-  _autoConvertCardToImage(overlay);
-}
-
-function showCautionCard() {
-  const overlay = document.createElement('div');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-  overlay.innerHTML = `
-    <div style="position:absolute;inset:0;background:rgba(0,0,0,0.4)" onclick="this.parentElement.remove()"></div>
-    <div style="position:relative;z-index:1;background:white;border-radius:20px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 16px 56px rgba(0,0,0,0.25)" onclick="event.stopPropagation()">
-      <div style="background:linear-gradient(135deg,#e65100,#ff9800);border-radius:20px 20px 0 0;padding:28px 24px;color:white;text-align:center">
-        <div style="font-size:48px;margin-bottom:8px">⚠️</div>
-        <div style="font-family:Noto Serif SC,serif;font-size:22px;font-weight:700">精油使用禁忌</div>
-        <div style="font-size:13px;opacity:0.85;margin-top:4px">安全第一，正确使用</div>
-      </div>
-      <div style="padding:24px">
-        <div style="display:flex;flex-direction:column;gap:12px">
-          <div style="display:flex;gap:10px;align-items:flex-start">
-            <span style="font-size:20px;flex-shrink:0">🚫</span>
-            <div><div style="font-weight:600;color:var(--text-dark)">不得入眼、耳、鼻腔</div><div style="font-size:12px;color:var(--text-light);margin-top:2px">精油不可直接接触眼睛、耳道和鼻腔内部</div></div>
-          </div>
-          <div style="display:flex;gap:10px;align-items:flex-start">
-            <span style="font-size:20px;flex-shrink:0">🥥</span>
-            <div><div style="font-weight:600;color:var(--text-dark)">误触或刺激 → 用椰子油稀释</div><div style="font-size:12px;color:var(--text-light);margin-top:2px">不可用水冲洗，水会加剧刺激，用椰子油涂抹稀释</div></div>
-          </div>
-          <div style="display:flex;gap:10px;align-items:flex-start">
-            <span style="font-size:20px;flex-shrink:0">🌙</span>
-            <div><div style="font-weight:600;color:var(--text-dark)">柠檬等光敏性精油仅夜间涂抹</div><div style="font-size:12px;color:var(--text-light);margin-top:2px">涂抹后 12 小时内避免阳光直射</div></div>
-          </div>
-          <div style="display:flex;gap:10px;align-items:flex-start">
-            <span style="font-size:20px;flex-shrink:0">🌡️</span>
-            <div><div style="font-weight:600;color:var(--text-dark)">阴凉避光保存，远离儿童</div><div style="font-size:12px;color:var(--text-light);margin-top:2px">避免高温和阳光直射，放在儿童够不到的地方</div></div>
-          </div>
-          <div style="display:flex;gap:10px;align-items:flex-start">
-            <span style="font-size:20px;flex-shrink:0">🧴</span>
-            <div><div style="font-weight:600;color:var(--text-dark)">避免和塑料制品接触</div><div style="font-size:12px;color:var(--text-light);margin-top:2px">精油会腐蚀塑料，请使用玻璃或不锈钢容器</div></div>
-          </div>
-          <div style="display:flex;gap:10px;align-items:flex-start">
-            <span style="font-size:20px;flex-shrink:0">💧</span>
-            <div><div style="font-weight:600;color:var(--text-dark)">少量多次，多喝水</div><div style="font-size:12px;color:var(--text-light);margin-top:2px">使用精油后多补充水分，帮助身体代谢</div></div>
-          </div>
-        </div>
-      </div>
-    </div>`;
-  document.body.appendChild(overlay);
-  _autoConvertCardToImage(overlay);
-}
-
-function saveTipCardImage(overlay, name) {
-  const cardDiv = overlay.querySelector('[style*="max-width:420px"]');
-  if (!cardDiv) return;
-  const btns = cardDiv.querySelectorAll('button');
-  btns.forEach(b => b.style.display = 'none');
-  html2canvas(cardDiv, { scale: 2, backgroundColor: '#ffffff', useCORS: true }).then(canvas => {
-    btns.forEach(b => b.style.display = '');
-    _showSaveImagePopup(canvas, name);
-  }).catch(() => { btns.forEach(b => b.style.display = ''); });
-}
-
-function saveOilCardImage(name) {
-  const overlay = document.querySelector('[style*="z-index: 200"], [style*="z-index:200"]');
-  if (!overlay) { alert('找不到卡片'); return; }
-
-  // The card is the white rounded div inside the overlay
-  const allDivs = overlay.querySelectorAll('div');
-  let cardDiv = null;
-  for (const d of allDivs) {
-    if (d.style.borderRadius && d.style.borderRadius.includes('20px') && d.style.background === 'white') {
-      cardDiv = d; break;
-    }
-  }
-  // Fallback: find the div with the green gradient header
-  if (!cardDiv) {
-    for (const d of allDivs) {
-      if (d.style.maxWidth && d.style.maxWidth.includes('460px')) {
-        cardDiv = d; break;
-      }
-    }
-  }
-  if (!cardDiv) { alert('找不到卡片内容'); return; }
-
-  // Hide buttons and close button during capture
-  const btns = cardDiv.querySelectorAll('button');
-  btns.forEach(b => b.style.display = 'none');
-
-  html2canvas(cardDiv, { scale: 2, backgroundColor: '#ffffff', useCORS: true }).then(canvas => {
-    btns.forEach(b => b.style.display = '');
-    _showSaveImagePopup(canvas, name + '_精油知识卡');
-  }).catch((e) => {
-    btns.forEach(b => b.style.display = '');
-    alert('保存失败：' + e.message);
-  });
-}
-
-// ============ AUTH + API ADAPTER LAYER ============
-
-// Token management
-let _authToken = '';
-let currentUser = { role: 'viewer', username: 'anonymous', display_name: '匿名', id: null };
-
-function _initToken() {
-  const params = new URLSearchParams(window.location.search);
-  const t = params.get('token');
-  if (t) {
-    localStorage.setItem('oil_auth_token', t);
-    _authToken = t;
-    history.replaceState(null, '', window.location.pathname);
-  } else {
-    _authToken = localStorage.getItem('oil_auth_token') || '';
-  }
-}
-
-function _apiFetch(path, opts = {}) {
-  const headers = { 'Content-Type': 'application/json', ...(opts.headers || {}) };
-  if (_authToken) headers['Authorization'] = 'Bearer ' + _authToken;
-  const method = (opts.method || 'GET').toUpperCase();
-  const isWrite = method === 'POST' || method === 'PUT' || method === 'DELETE';
-
-  if (!isWrite) {
-    // Read requests — just fetch, no queue
-    return fetch(path, { ...opts, headers });
-  }
-
-  // Reset queued flag at start of each write call
-  window._writeQueued = false;
-
-  // Write requests — retry on failure, queue if offline
-  const fullOpts = { ...opts, headers };
-  if (!_isOnline) {
-    _pendingWrites.push({ url: path, options: fullOpts, time: Date.now() });
-    try { localStorage.setItem('oil_pending_writes', JSON.stringify(_pendingWrites)); } catch(x) {}
-    window._writeQueued = true;
-    _showToast('⚠️ 离线中，数据已暂存，恢复后自动保存');
-    _updatePendingBanner();
-    // Return a fake ok response so callers don't crash
-    return Promise.resolve(new Response('{"ok":true}', { status: 200, headers: { 'Content-Type': 'application/json' } }));
-  }
-
-  return fetch(path, fullOpts).then(r => {
-    if (!r.ok && r.status >= 500) throw new Error('Server error');
-    return r;
-  }).catch(e => {
-    // Network or server error — queue for retry
-    _pendingWrites.push({ url: path, options: fullOpts, time: Date.now() });
-    try { localStorage.setItem('oil_pending_writes', JSON.stringify(_pendingWrites)); } catch(x) {}
-    window._writeQueued = true;
-    _showToast('⚠️ 保存失败，已暂存，将自动重试');
-    _updatePendingBanner();
-    return new Response('{"ok":true,"queued":true}', { status: 200, headers: { 'Content-Type': 'application/json' } });
-  });
-}
-
-async function _apiLoadMe() {
-  try {
-    const res = await _apiFetch('/api/me');
-    currentUser = await res.json();
-  } catch(e) { currentUser = { role: 'viewer', username: 'anonymous', display_name: '匿名', id: null }; }
-}
-
-function _canEdit(recipe) {
-  if (currentUser.role === 'admin') return true;
-  if (currentUser.role === 'senior_editor') return true;
-  if (currentUser.role === 'editor' && recipe._owner_id === currentUser.id) return true;
-  return false;
-}
-
-function _applyPermissions() {
-  const role = currentUser.role;
-  const canEdit = role === 'editor' || role === 'senior_editor' || role === 'admin';
-  document.querySelectorAll('.requires-editor').forEach(el => {
-    el.style.display = canEdit ? '' : 'none';
-  });
-  document.querySelectorAll('.requires-oil-edit').forEach(el => {
-    el.style.display = (role === 'admin' || role === 'senior_editor') ? '' : 'none';
-  });
-  document.querySelectorAll('.requires-admin').forEach(el => {
-    el.style.display = role === 'admin' ? '' : 'none';
-  });
-  document.querySelectorAll('.requires-notif').forEach(el => {
-    el.style.display = (role === 'admin' || role === 'senior_editor') ? '' : 'none';
-  });
-  // Show user name or login button in header
-  const nameEl = document.getElementById('headerUserName');
-  if (nameEl) {
-    const isImpersonating = !!localStorage.getItem('oil_admin_token_backup');
-    if (currentUser.username !== 'anonymous') {
-      nameEl.innerHTML = '👤 ' + (currentUser.display_name || currentUser.username) +
-        (isImpersonating ? ' <span style="font-size:10px;background:rgba(255,255,255,0.2);padding:1px 6px;border-radius:8px">模拟中 · 点击切回</span>' : ' ▾');
-    } else {
-      nameEl.innerHTML = '<span style="background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:12px">登录</span>';
-    }
-  }
-}
-
-// API data loading
-async function _apiLoadOils() {
-  try {
-    const res = await _apiFetch('/api/oils');
-    const data = await res.json();
-    OILS = {}; OILS_META = {};
-    for (const o of data) {
-      OILS[o.name] = o.bottle_price / o.drop_count;
-      OILS_META[o.name] = { bottlePrice: o.bottle_price, dropCount: o.drop_count, retailPrice: o.retail_price, isActive: o.is_active !== 0 };
-    }
-  } catch(e) { console.error('loadOils failed:', e); }
-}
-
-async function _apiLoadRecipes() {
-  try {
-    const res = await _apiFetch('/api/recipes');
-    const data = await res.json();
-    recipes = data.map(r => ({
-      _id: r.id,
-      _owner_id: r.owner_id,
-      _owner_name: r.owner_name,
-      _version: r.version || 1,
-      name: r.name,
-      note: r.note,
-      tags: r.tags || [],
-      ingredients: r.ingredients.map(i => ({ oil: i.oil_name, drops: i.drops }))
-    }));
-  } catch(e) { console.error('loadRecipes failed:', e); recipes = []; }
-}
-
-async function _apiLoadTags() {
-  try {
-    const res = await _apiFetch('/api/tags');
-    allTags = await res.json();
-  } catch(e) { allTags = []; }
-  recipes.forEach(r => (r.tags || []).forEach(t => { if (!allTags.includes(t)) allTags.push(t); }));
-}
-
-function _apiSaveRecipes() {
-  for (const r of recipes) {
-    if (r._dirty || !r._id) {
-      const body = {
-        name: r.name, note: r.note || '',
-        ingredients: r.ingredients.map(i => ({ oil_name: i.oil, drops: i.drops })),
-        tags: r.tags || [],
-        version: r._version || null
-      };
-      if (r._id) {
-        _apiFetch('/api/recipes/' + r._id, { method: 'PUT', body: JSON.stringify(body) })
-          .then(res => {
-            if (res.status === 409) { _showToast('⚠️ 此配方已被其他人修改，请刷新'); return; }
-            if (!res.ok) { _showToast('⚠️ 保存失败，请重试'); return; }
-            r._dirty = false;
-            r._version = (r._version || 1) + 1;
-          }).catch(() => { _showToast('⚠️ 网络错误，保存失败'); });
-      } else {
-        _apiFetch('/api/recipes', { method: 'POST', body: JSON.stringify(body) })
-          .then(res => { if (!res.ok) throw new Error(); return res.json(); })
-          .then(d => { r._id = d.id; r._owner_id = currentUser.id; r._version = 1; r._dirty = false; })
-          .catch(() => { _showToast('⚠️ 新增配方失败，请重试'); });
-      }
-    }
-  }
-}
-
-// Override original stubs
-saveOils = function() {
-  for (const [name, meta] of Object.entries(OILS_META)) {
-    _apiFetch('/api/oils', {
-      method: 'POST',
-      body: JSON.stringify({ name, bottle_price: meta.bottlePrice, drop_count: meta.dropCount })
-    }).catch(() => _showToast('精油保存失败'));
-  }
-};
-
-saveRecipes = function() { _apiSaveRecipes(); };
-saveTags = function() {
-  // Tags are saved individually when created, no need to batch
-};
-
-// Override deleteOil
-deleteOil = async function(name) {
-  if (!await _confirm(`确认删除「${name}」？\n\n注意：已有配方中如果用到此精油，成本将显示为 ¥0`)) return;
-  _apiFetch('/api/oils/' + encodeURIComponent(name), { method: 'DELETE' }).catch(() => _showToast('删除失败'));
-  delete OILS[name]; delete OILS_META[name];
-  filterOils();
-};
-
-// Override deleteGlobalTag
-deleteGlobalTag = async function(tag) {
-  if (!await _confirm(`删除标签「${tag}」？\n（已标记此标签的配方不会被删除，只是移除标签）`)) return;
-  _apiFetch('/api/tags/' + encodeURIComponent(tag), { method: 'DELETE' }).catch(() => _showToast('删除失败'));
-  allTags = allTags.filter(t => t !== tag);
-  recipes.forEach(r => { if (r.tags) r.tags = r.tags.filter(t => t !== tag); });
-  renderTagBar(); renderManage();
-};
-
-// Override deleteRecipe
-deleteRecipe = async function(i) {
-  if (!await _confirm(`确认删除配方「${recipes[i].name}」？`)) return;
-  if (!_canEdit(recipes[i])) { alert('只能删除自己创建的配方'); return; }
-  const rid = recipes[i]._id;
-  if (rid) _apiFetch('/api/recipes/' + rid, { method: 'DELETE' }).catch(() => _showToast('删除失败'));
-  recipes.splice(i, 1); renderManage();
-};
-
-deleteRecipeFromSearch = async function(i) {
-  if (!await _confirm(`确认删除配方「${recipes[i].name}」？`)) return;
-  if (!_canEdit(recipes[i])) { alert('只能删除自己创建的配方'); return; }
-  const rid = recipes[i]._id;
-  if (rid) _apiFetch('/api/recipes/' + rid, { method: 'DELETE' }).catch(() => _showToast('删除失败'));
-  recipes.splice(i, 1);
-  if (currentRecipe === i) { closeDetail(); }
-  else if (currentRecipe > i) { currentRecipe--; }
-  filterRecipes();
-};
-
-saveCurrentEditing = function() {
-  if (currentRecipe === null) return;
-  if (!_canEdit(recipes[currentRecipe])) { alert('没有权限修改此配方'); return; }
-  recipes[currentRecipe].ingredients = JSON.parse(JSON.stringify(currentEditing));
-  recipes[currentRecipe]._dirty = true;
-  _apiSaveRecipes();
-  alert('✅ 配方已保存！');
-};
-
-// saveTagPicker override removed — handled by _commitTagPicker
-
-checkDuplicateAndSave = async function(name, ingredients, note) {
-  const existing = recipes.filter(r => r.name === name);
-  if (existing.length > 0) {
-    const same = existing.some(r => isSameIngredients(r.ingredients, ingredients));
-    if (same) { alert(`配方「${name}」已存在且内容一致，无需重复保存。`); return false; }
-    let newName = name, n = 2;
-    while (recipes.some(r => r.name === newName)) { newName = name + n; n++; }
-    if (!await _confirm(`已有同名配方「${name}」但内容不一致。\n\n是否保存为「${newName}」？`)) return false;
-    const nr = { name: newName, note: note || '', tags: [], ingredients: JSON.parse(JSON.stringify(ingredients)) };
-    recipes.push(nr); _apiSaveRecipes();
-    alert('✅ 配方「' + newName + '」已保存！'); return true;
-  }
-  const nr = { name, note: note || '', tags: [], ingredients: JSON.parse(JSON.stringify(ingredients)) };
-  recipes.push(nr); _apiSaveRecipes();
-  alert('✅ 配方「' + name + '」已保存！'); return true;
-};
-
-// Override renderGrid to respect permissions
-const _origRenderGrid = renderGrid;
-renderGrid = function(list) {
-  const grid = document.getElementById('recipeGrid');
-  if (!list.length) {
-    // Try symptom fuzzy match
-    _showSymptomSearch(grid);
-    return;
-  }
-  const loggedIn = currentUser.id !== null;
-  grid.innerHTML = list.map((r, idx) => {
-    const realIdx = recipes.indexOf(r);
-    const cost = calcCost(r.ingredients);
-    const oilNames = r.ingredients.map(i => i.oil).join('、');
-    const tags = (r.tags || []).map(t => '<span class="tag">' + t + '</span>').join(' ');
-    const canDel = _canEdit(r);
-    const fav = isFavorite(r);
-    const favBtn = '<button onclick="event.stopPropagation();toggleFavorite('+r._id+',this)" title="'+(fav?'取消收藏':'收藏')+'" style="background:none;border:none;font-size:20px;cursor:pointer;padding:2px 4px;color:'+(fav?'var(--gold)':'var(--border)')+'">'+(fav?'★':'☆')+'</button>';
-    return '<div class="recipe-card" onclick="selectRecipe(' + realIdx + ')">' +
-      '<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:4px">' +
-        '<div class="recipe-card-name" style="flex:1;min-width:0;word-break:break-word;margin-bottom:0">' + r.name + '</div>' + favBtn +
-      '</div>' +
-      (tags ? '<div style="margin:4px 0">' + tags + '</div>' : '') +
-      '<div class="recipe-card-oils">' + oilNames + '</div>' +
-      '<div style="display:flex;justify-content:space-between;align-items:center;margin-top:8px">' +
-        '<div class="recipe-card-price" style="margin:0">💰 ' + fmtCostWithRetail(r.ingredients) + '</div>' +
-      '</div></div>';
-  }).join('');
-};
-
-// Override renderManage to split into my recipes + public recipes
-const _origRenderManage = renderManage;
-
-function _renderManageItem(r, i) {
-  const oilNames = r.ingredients.map(ing => ing.oil).join('、');
-  const tags = (r.tags || []).map(t => '<span class="tag">' + t + '</span>').join(' ');
-  const checked = selectedRecipes.has(i) ? 'checked' : '';
-  const canMod = _canEdit(r);
-  return '<div class="manage-item" style="gap:10px;cursor:pointer" onclick="editFromManage(' + i + ')">' +
-    '<input type="checkbox" ' + checked + ' onclick="event.stopPropagation()" onchange="toggleSelect(' + i + ', this.checked)" style="width:18px;height:18px;accent-color:var(--sage);cursor:pointer;flex-shrink:0">' +
-    '<div class="manage-item-left" style="min-width:0">' +
-      '<div class="manage-item-name" style="word-break:break-word">' + r.name + ' ' + tags + '</div>' +
-      '<div class="manage-item-oils">' + oilNames + '</div>' +
-      '<div style="margin-top:4px;font-size:13px;color:var(--sage-dark);font-weight:600">' + fmtCostWithRetail(r.ingredients) + '</div>' +
-    '</div>' +
-    (canMod ? '<div style="display:flex;gap:2px;flex-shrink:0;align-items:center">' +
-      '<button onclick="event.stopPropagation();editTags(' + i + ')" title="标签" style="background:none;border:none;cursor:pointer;font-size:16px;padding:6px;border-radius:6px;color:var(--text-mid)" onmouseover="this.style.background=\'var(--sage-mist)\'" onmouseout="this.style.background=\'none\'">🏷</button>' +
-      '<button onclick="event.stopPropagation();deleteRecipe(' + i + ')" title="删除" style="background:none;border:none;cursor:pointer;font-size:16px;padding:6px;border-radius:6px;color:var(--text-mid)" onmouseover="this.style.background=\'#fdf0ee\'" onmouseout="this.style.background=\'none\'">🗑</button>' +
-    '</div>' : '') +
-  '</div>';
-}
-
-let _renderManageLock = false;
-let _manageSearchQuery = ''; // Bug #96: manage page search
-renderManage = async function() {
-  if (_renderManageLock) return;
-  _renderManageLock = true;
-  try { await _doRenderManage(); } finally { _renderManageLock = false; }
-};
-async function _doRenderManage() {
-  if (currentUser.id) await loadDiary();
-  if (typeof _updateReviewBar === 'function') _updateReviewBar();
-  const list = document.getElementById('manageList');
-  if (!list) return;
-  const label = document.getElementById('manageFilterLabel');
-  let filtered = recipes.map((r, i) => ({ r, i }));
-
-  // Bug #96: apply manage search query
-  if (_manageSearchQuery) {
-    filtered = filtered.filter(({ r }) => r.name.toLowerCase().includes(_manageSearchQuery));
-  }
-
-  // Review/mine filters
-  if (mineFilterActive && currentUser.id) {
-    filtered = filtered.filter(({ r }) => r._owner_id === currentUser.id);
-    label.textContent = '— 我的';
-  } else if (reviewFilterActive && currentUser.role === 'admin') {
-    filtered = filtered.filter(({ r }) => r._owner_id && r._owner_id !== currentUser.id);
-    label.textContent = '— 待审核';
-  } else if (manageFilterTag === '__other__') { filtered = filtered.filter(({ r }) => !r.tags || r.tags.length === 0); label.textContent = '— 其他'; }
-  else if (manageFilterTag) { filtered = filtered.filter(({ r }) => (r.tags || []).includes(manageFilterTag)); label.textContent = '— ' + manageFilterTag; }
-  else { label.textContent = ''; }
-
-  if (!filtered.length) { list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📋</div><div class="empty-state-text">暂无配方</div></div>'; return; }
-
-  const isAdmin = currentUser.role === 'admin' || currentUser.role === 'senior_editor';
-
-  if (isAdmin) {
-    // Admin: show diary recipes as "我的配方" + recipes table as "公共配方库"
-    let html = '';
-
-    // My recipes from diary
-    if (userDiary.length > 0) {
-      let diaryFiltered = userDiary;
-      if (_manageSearchQuery) diaryFiltered = diaryFiltered.filter(d => d.name.toLowerCase().includes(_manageSearchQuery));
-      if (manageFilterTag === '__other__') diaryFiltered = diaryFiltered.filter(d => !d.tags || d.tags.length === 0);
-      else if (manageFilterTag) diaryFiltered = diaryFiltered.filter(d => (d.tags || []).includes(manageFilterTag));
-
-      if (diaryFiltered.length > 0) {
-        const mc = window._manageMyCollapsed;
-        html += '<div style="margin-bottom:12px">' +
-          '<div onclick="window._manageMyCollapsed=!window._manageMyCollapsed;_saveFoldStates();var b=this.nextElementSibling;b.style.display=window._manageMyCollapsed?\'none\':\'\';this.querySelector(\'span:last-child\').textContent=window._manageMyCollapsed?\'▸\':\'▾\'" style="display:flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer;user-select:none">' +
-            '<span style="font-size:14px;font-weight:600;color:var(--text-dark)">📔 我的配方 (' + diaryFiltered.length + ')</span>' +
-            '<span style="font-size:11px;color:var(--text-light)">' + (mc ? '▸' : '▾') + '</span>' +
-          '</div>' +
-          '<div' + (mc ? ' style="display:none"' : '') + '>' +
-            diaryFiltered.map(d => {
-              const oilNames = (d.ingredients||[]).map(ing => ing.oil).join('、');
-              const dTags = (d.tags||[]).map(t => '<span class="tag">' + t + '</span>').join(' ');
-              const dChecked = selectedRecipes.has('d'+d.id) ? 'checked' : '';
-              const matchedRecipe = recipes.find(r => r.name === d.name);
-              const isShared = !!matchedRecipe;
-              let sharedBadge = '';
-              if (isShared) {
-                // Admin-owned = fully shared; user-owned = pending review
-                const isAdopted = matchedRecipe._owner_id === currentUser.id && currentUser.role === 'admin';
-                const isAdminOwned = matchedRecipe._owner_id !== currentUser.id && currentUser.role === 'admin';
-                if (isAdopted || isAdminOwned) {
-                  sharedBadge = '<span style="font-size:9px;background:#e8f5e9;color:#2e7d32;padding:1px 5px;border-radius:4px;margin-left:4px">已共享</span>';
-                } else {
-                  sharedBadge = '<span style="font-size:9px;background:#fff3e0;color:#e65100;padding:1px 5px;border-radius:4px;margin-left:4px">待审核</span>';
-                }
-              }
-              return '<div class="manage-item" style="gap:10px;cursor:pointer" onclick="editDiaryFromManage('+d.id+')">' +
-                '<input type="checkbox" ' + dChecked + ' onclick="event.stopPropagation()" onchange="toggleSelect(\'d'+d.id+'\', this.checked)" style="width:18px;height:18px;accent-color:var(--sage);cursor:pointer;flex-shrink:0">' +
-                '<div class="manage-item-left" style="min-width:0">' +
-                  '<div class="manage-item-name" style="word-break:break-word">' + d.name + sharedBadge + ' ' + dTags + '</div>' +
-                  '<div class="manage-item-oils">' + oilNames + '</div>' +
-                  '<div style="margin-top:4px;font-size:13px;color:var(--sage-dark);font-weight:600">' + fmtCostWithRetail(d.ingredients || []) + '</div>' +
-                '</div>' +
-                '<div style="display:flex;gap:2px;flex-shrink:0;align-items:center">' +
-                  '<button onclick="event.stopPropagation();editDiaryTags('+d.id+')" title="标签" style="background:none;border:none;cursor:pointer;font-size:16px;padding:6px;border-radius:6px;color:var(--text-mid)" onmouseover="this.style.background=\'var(--sage-mist)\'" onmouseout="this.style.background=\'none\'">🏷</button>' +
-                  '<button onclick="event.stopPropagation();shareDiaryToPublic('+d.id+')" title="分享到公共库" style="background:none;border:none;cursor:pointer;font-size:16px;padding:6px;border-radius:6px;color:var(--text-mid)" onmouseover="this.style.background=\'var(--sage-mist)\'" onmouseout="this.style.background=\'none\'">📤</button>' +
-                  '<button onclick="event.stopPropagation();deleteDiaryRecipe(' + d.id + ')" title="删除" style="background:none;border:none;cursor:pointer;font-size:16px;padding:6px;border-radius:6px;color:var(--text-mid)" onmouseover="this.style.background=\'#fdf0ee\'" onmouseout="this.style.background=\'none\'">🗑</button>' +
-                '</div>' +
-              '</div>';
-            }).join('') +
-          '</div></div>';
-      }
-    }
-
-    // Public recipes
-    if (filtered.length > 0) {
-      const pc = window._managePubCollapsed;
-      html += '<div style="margin-bottom:12px">' +
-        '<div onclick="window._managePubCollapsed=!window._managePubCollapsed;_saveFoldStates();var b=this.nextElementSibling;b.style.display=window._managePubCollapsed?\'none\':\'\';this.querySelector(\'span:last-child\').textContent=window._managePubCollapsed?\'▸\':\'▾\'" style="display:flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer;user-select:none">' +
-          '<span style="font-size:14px;font-weight:600;color:var(--text-dark)">📚 公共配方库 (' + filtered.length + ')</span>' +
-          '<span style="font-size:11px;color:var(--text-light)">' + (pc ? '▸' : '▾') + '</span>' +
-        '</div>' +
-        '<div' + (pc ? ' style="display:none"' : '') + '>' +
-          filtered.map(({ r, i }) => _renderManageItem(r, i)).join('') +
-        '</div></div>';
-    }
-
-    list.innerHTML = html || '<div class="empty-state"><div class="empty-state-icon">📋</div><div class="empty-state-text">暂无配方</div></div>';
-  } else {
-    // Non-admin: show diary recipes + public recipes they own
-    await loadDiary();
-    let html = '';
-
-    // Diary recipes
-    if (userDiary.length > 0) {
-      let diaryFiltered = userDiary;
-      if (_manageSearchQuery) diaryFiltered = diaryFiltered.filter(d => d.name.toLowerCase().includes(_manageSearchQuery));
-      if (manageFilterTag === '__other__') diaryFiltered = diaryFiltered.filter(d => !d.tags || d.tags.length === 0);
-      else if (manageFilterTag) diaryFiltered = diaryFiltered.filter(d => (d.tags || []).includes(manageFilterTag));
-      if (diaryFiltered.length > 0) {
-        const mc = window._manageMyCollapsed;
-        html += '<div style="margin-bottom:12px">' +
-          '<div onclick="window._manageMyCollapsed=!window._manageMyCollapsed;_saveFoldStates();var b=this.nextElementSibling;b.style.display=window._manageMyCollapsed?\'none\':\'\';this.querySelector(\'span:last-child\').textContent=window._manageMyCollapsed?\'▸\':\'▾\'" style="display:flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer;user-select:none">' +
-            '<span style="font-size:14px;font-weight:600;color:var(--text-dark)">📔 我的配方 (' + diaryFiltered.length + ')</span>' +
-            '<span style="font-size:11px;color:var(--text-light)">' + (mc ? '▸' : '▾') + '</span>' +
-          '</div>' +
-          '<div' + (mc ? ' style="display:none"' : '') + '>' +
-            diaryFiltered.map(d => {
-              const oilNames = (d.ingredients||[]).map(ing => ing.oil).join('、');
-              const dTags = (d.tags||[]).map(t => '<span class="tag">' + t + '</span>').join(' ');
-              const dChecked = selectedRecipes.has('d'+d.id) ? 'checked' : '';
-              const matchedRecipe = recipes.find(r => r.name === d.name);
-              const isShared = !!matchedRecipe;
-              let sharedBadge = '';
-              if (isShared) {
-                // For non-admin: recipe owned by themselves = pending; owned by admin = adopted/shared
-                const isPending = matchedRecipe._owner_id === currentUser.id && currentUser.role !== 'admin';
-                if (isPending) {
-                  sharedBadge = '<span style="font-size:9px;background:#fff3e0;color:#e65100;padding:1px 5px;border-radius:4px;margin-left:4px">待审核</span>';
-                } else {
-                  sharedBadge = '<span style="font-size:9px;background:#e8f5e9;color:#2e7d32;padding:1px 5px;border-radius:4px;margin-left:4px">已共享</span>';
-                }
-              }
-              return '<div class="manage-item" style="gap:10px;cursor:pointer" onclick="editDiaryFromManage('+d.id+')">' +
-                '<input type="checkbox" ' + dChecked + ' onclick="event.stopPropagation()" onchange="toggleSelect(\'d'+d.id+'\', this.checked)" style="width:18px;height:18px;accent-color:var(--sage);cursor:pointer;flex-shrink:0">' +
-                '<div class="manage-item-left" style="min-width:0">' +
-                  '<div class="manage-item-name" style="word-break:break-word">' + d.name + sharedBadge + ' ' + dTags + '</div>' +
-                  '<div class="manage-item-oils">' + oilNames + '</div>' +
-                  '<div style="margin-top:4px;font-size:13px;color:var(--sage-dark);font-weight:600">' + fmtCostWithRetail(d.ingredients || []) + '</div>' +
-                '</div>' +
-                '<div style="display:flex;gap:2px;flex-shrink:0;align-items:center">' +
-                  '<button onclick="event.stopPropagation();editDiaryTags('+d.id+')" title="标签" style="background:none;border:none;cursor:pointer;font-size:16px;padding:6px;border-radius:6px;color:var(--text-mid)" onmouseover="this.style.background=\'var(--sage-mist)\'" onmouseout="this.style.background=\'none\'">🏷</button>' +
-                  '<button onclick="event.stopPropagation();shareDiaryToPublic('+d.id+')" title="分享到公共库" style="background:none;border:none;cursor:pointer;font-size:16px;padding:6px;border-radius:6px;color:var(--text-mid)" onmouseover="this.style.background=\'var(--sage-mist)\'" onmouseout="this.style.background=\'none\'">📤</button>' +
-                  '<button onclick="event.stopPropagation();deleteDiaryRecipe(' + d.id + ')" title="删除" style="background:none;border:none;cursor:pointer;font-size:16px;padding:6px;border-radius:6px;color:var(--text-mid)" onmouseover="this.style.background=\'#fdf0ee\'" onmouseout="this.style.background=\'none\'">🗑</button>' +
-                '</div></div>';
-            }).join('') +
-          '</div></div>';
-      }
-    }
-
-    // Public recipes they own (editors only)
-    const mine = filtered.filter(({ r }) => r._owner_id === currentUser.id);
-    if (mine.length > 0) {
-      const pc = window._managePubCollapsed;
-      html += '<div style="margin-bottom:12px">' +
-        '<div onclick="window._managePubCollapsed=!window._managePubCollapsed;_saveFoldStates();var b=this.nextElementSibling;b.style.display=window._managePubCollapsed?\'none\':\'\';this.querySelector(\'span:last-child\').textContent=window._managePubCollapsed?\'▸\':\'▾\'" style="display:flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer;user-select:none">' +
-          '<span style="font-size:14px;font-weight:600;color:var(--text-dark)">📚 我创建的公共配方 (' + mine.length + ')</span>' +
-          '<span style="font-size:11px;color:var(--text-light)">' + (pc ? '▸' : '▾') + '</span>' +
-        '</div>' +
-        '<div' + (pc ? ' style="display:none"' : '') + '>' +
-          mine.map(({ r, i }) => _renderManageItem(r, i)).join('') +
-        '</div></div>';
-    }
-
-    list.innerHTML = html || '<div class="empty-state"><div class="empty-state-icon">📔</div><div class="empty-state-text">还没有个人配方</div></div>';
-  }
-}
-
-// Update showSection to handle new sections
-const _origShowSection = showSection;
-showSection = function(name) {
-  document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
-  document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
-  const sec = document.getElementById('section-' + name);
-  if (sec) sec.classList.add('active');
-  const tabs = document.querySelectorAll('.nav-tab');
-  const tabTexts = Array.from(tabs).map(t => t.textContent);
-  // Bug #94: search tab onclick is _resetSearchHome(), not showSection('search'),
-  // so we need special handling. Also match tabs whose onclick contains the section name.
-  let clickedTab;
-  if (name === 'search') {
-    clickedTab = tabs[0]; // first tab is always search
-  } else {
-    clickedTab = Array.from(tabs).find(t => t.getAttribute('onclick') && t.getAttribute('onclick').includes("'" + name + "'"));
-  }
-  if (clickedTab) clickedTab.classList.add('active');
-  if (name === 'manage') { loadDiary().then(() => { renderTagBar(); renderManage(); }); }
-  if (name === 'oils') renderOils();
-  if (name === 'add') renderNewIngList();
-  if (name === 'audit') renderAuditLog();
-  if (name === 'users') renderUsers();
-};
-
-// ── AUDIT LOG ──────────────────────────────────────────
-let auditOffset = 0;
-async function renderAuditLog() {
-  auditOffset = 0;
-  _auditFilter = '';
-  document.querySelectorAll('.audit-filter-btn').forEach(b => {
-    b.classList.toggle('btn-primary', b.dataset.filter === '');
-    b.classList.toggle('btn-outline', b.dataset.filter !== '');
-  });
-  const list = document.getElementById('auditList');
-  list.innerHTML = '<div style="text-align:center;padding:20px;color:var(--text-light)">加载中...</div>';
-  try {
-    const res = await _apiFetch('/api/audit-log?limit=500&offset=0');
-    _auditData = await res.json();
-    auditOffset = _auditData.length;
-    _buildAuditUserButtons();
-    list.innerHTML = _renderAuditRows(_auditData);
-  } catch(e) { list.innerHTML = '<div style="color:red;padding:20px">加载失败</div>'; }
-}
-
-async function loadMoreAudit() {
-  try {
-    const res = await _apiFetch('/api/audit-log?limit=500&offset=' + auditOffset);
-    const data = await res.json();
-    _auditData = _auditData.concat(data);
-    auditOffset += data.length;
-    filterAuditLog(_auditFilter);
-  } catch(e) {}
-}
-
-let _auditData = [];
-let _auditFilter = '';
-let _auditUserFilter = '';
-
-function filterAuditLog(filter) {
-  _auditFilter = filter;
-  document.querySelectorAll('.audit-filter-btn').forEach(b => {
-    const match = b.dataset.filter === filter;
-    b.classList.toggle('btn-primary', match);
-    b.classList.toggle('btn-outline', !match);
-  });
-  _applyAuditFilters();
-}
-
-function filterAuditByUser(username) {
-  _auditUserFilter = _auditUserFilter === username ? '' : username;
-  document.querySelectorAll('.audit-user-btn').forEach(b => {
-    const match = b.dataset.user === _auditUserFilter;
-    b.classList.toggle('btn-primary', match);
-    b.classList.toggle('btn-outline', !match);
-  });
-  _applyAuditFilters();
-}
-
-function _applyAuditFilters() {
-  let filtered = _auditData;
-  if (_auditFilter) {
-    filtered = filtered.filter(r => {
-      if (_auditFilter === 'user') return r.action.includes('user');
-      return r.action === _auditFilter || r.action === 'undo_' + _auditFilter;
-    });
-  }
-  if (_auditUserFilter) {
-    filtered = filtered.filter(r => (r.user_name || r.username) === _auditUserFilter);
-  }
-  document.getElementById('auditList').innerHTML = _renderAuditRows(filtered);
-}
-
-function viewAuditRecipe(recipeId) {
-  const idx = recipes.findIndex(r => r._id === recipeId);
-  if (idx < 0) { alert('该配方可能已被删除'); return; }
-  // Show card overlay without leaving audit page
-  currentRecipe = idx;
-  currentEditing = JSON.parse(JSON.stringify(recipes[idx].ingredients));
-  document.getElementById('detailOverlay').style.display = 'block';
-  document.body.style.overflow = 'hidden';
-  document.getElementById('cardViewMode').style.display = '';
-  document.getElementById('editorViewMode').style.display = 'none';
-  renderCardView();
-  document.getElementById('detailPanel').scrollTop = 0;
-}
-
-function _buildAuditUserButtons() {
-  const users = {};
-  _auditData.forEach(r => {
-    const name = r.user_name || r.username || '系统';
-    users[name] = (users[name] || 0) + 1;
-  });
-  const container = document.getElementById('auditUserFilters');
-  if (!container) return;
-  container.innerHTML = Object.entries(users).sort((a,b) => b[1] - a[1]).map(([name, count]) =>
-    '<button class="btn btn-outline btn-sm audit-user-btn" data-user="' + name + '" onclick="filterAuditByUser(\'' + name.replace(/'/g,"\\'") + '\')" style="font-size:11px;padding:3px 8px">' + name + ' (' + count + ')</button>'
-  ).join('');
-}
-
-function _renderAuditRows(data) {
-  const actionNames = {
-    create_recipe: '📝 新增配方', update_recipe: '✏️ 修改配方', delete_recipe: '🗑 删除配方',
-    upsert_oil: '💧 更新精油', delete_oil: '🗑 删除精油',
-    create_tag: '🏷 新增标签', delete_tag: '🏷 删除标签',
-    create_user: '👤 创建用户', delete_user: '🗑 删除用户', update_user: '👤 修改用户',
-    adopt_recipe: '✅ 采纳配方',
-    undo_delete_recipe: '↩ 恢复配方', undo_delete_oil: '↩ 恢复精油', undo_delete_user: '↩ 恢复用户'
-  };
-  const undoable = ['delete_recipe', 'delete_oil', 'delete_user'];
-  if (!data.length) return '<div class="empty-state"><div class="empty-state-text">暂无记录</div></div>';
-  return data.map(r => {
-    const who = r.user_name || r.username || '系统';
-    const what = actionNames[r.action] || r.action;
-    const target = r.target_name || r.target_id || '';
-    const time = r.created_at || '';
-    const canUndo = undoable.includes(r.action) && r.detail;
-    const undoBtn = canUndo ? '<button class="btn btn-outline btn-sm" style="margin-left:6px;font-size:11px" onclick="undoAudit(' + r.id + ', this)">↩ 撤销</button>' : '';
-    const isDelete = r.action.startsWith('delete_');
-    const isCreate = r.action === 'create_recipe';
-    const borderColor = isDelete ? '#e8b4b0' : isCreate ? 'var(--sage)' : 'transparent';
-
-    // Detail preview
-    let detailHtml = '';
-    if (r.detail) {
-      try {
-        const d = JSON.parse(r.detail);
-        if (d.ingredients) {
-          const ings = d.ingredients.map(i => (i.oil_name || i.oil) + ' ' + i.drops + '滴').join('，');
-          detailHtml = '<div style="font-size:11px;color:var(--text-light);margin-top:4px;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + ings + '</div>';
-        }
-        if (d.from_user) detailHtml = '<div style="font-size:11px;color:var(--text-light);margin-top:4px">来自：' + d.from_user + '</div>';
-        if (d.role) detailHtml = '<div style="font-size:11px;color:var(--text-light);margin-top:4px">权限：' + d.role + '</div>';
-      } catch(e) {}
-    }
-
-    const isRecipeAction = r.action.includes('recipe') && r.target_id && !isDelete;
-    const clickAttr = isRecipeAction ? 'style="padding:10px 14px;border-left:3px solid ' + borderColor + ';flex-wrap:wrap;cursor:pointer" onclick="viewAuditRecipe(' + r.target_id + ')"' : 'style="padding:10px 14px;border-left:3px solid ' + borderColor + ';flex-wrap:wrap"';
-    return '<div class="manage-item" ' + clickAttr + '>' +
-      '<div style="flex:1;min-width:0">' +
-        '<div><span style="font-weight:600;color:var(--sage-dark);font-size:13px">' + who + '</span> ' +
-        '<span style="color:' + (isDelete ? '#c0392b' : 'var(--text-mid)') + ';font-size:13px">' + what + '</span> ' +
-        '<span style="font-weight:500;font-size:13px">' + target + '</span></div>' +
-        detailHtml +
-      '</div>' +
-      '<div style="display:flex;align-items:center;gap:4px;flex-shrink:0">' +
-        '<span style="font-size:11px;color:var(--text-light);white-space:nowrap">' + time + '</span>' +
-        undoBtn +
-      '</div>' +
-    '</div>';
-  }).join('');
-}
-
-async function undoAudit(logId, btn) {
-  if (!await _confirm('确认撤销此操作？')) return;
-  btn.disabled = true;
-  btn.textContent = '撤销中...';
-  try {
-    const res = await _apiFetch('/api/audit-log/' + logId + '/undo', { method: 'POST', body: '{}' });
-    const text = await res.text();
-    if (!res.ok) {
-      let msg = text;
-      try { msg = JSON.parse(text).detail || text; } catch(e) {}
-      alert('撤销失败：' + msg);
-      btn.disabled = false; btn.textContent = '↩ 撤销';
-      return;
-    }
-    btn.textContent = '✅ 已撤销';
-    btn.classList.remove('btn-outline');
-    btn.style.color = 'var(--sage-dark)';
-    await _apiLoadRecipes();
-    await _apiLoadOils();
-    await _apiLoadTags();
-    alert('✅ 撤销成功，数据已恢复');
-  } catch(e) {
-    alert('撤销失败：' + e.message);
-    btn.disabled = false; btn.textContent = '↩ 撤销';
-  }
-}
-
-// ── USER MANAGEMENT ────────────────────────────────────
-let _usersCache = null;
-async function renderUsers() {
-  const list = document.getElementById('usersList');
-  try {
-    if (!_usersCache) {
-      const res = await _apiFetch('/api/users');
-      _usersCache = await res.json();
-    }
-    let data = _usersCache;
-
-    // Apply search filter
-    const search = (document.getElementById('userSearchInput')?.value || '').trim().toLowerCase();
-    if (search) data = data.filter(u => (u.display_name||'').toLowerCase().includes(search) || u.username.toLowerCase().includes(search));
-
-    // Apply role filter
-    const roleFilter = document.getElementById('userRoleFilter')?.value || '';
-    if (roleFilter === 'business') data = data.filter(u => u.business_verified);
-    else if (roleFilter) data = data.filter(u => u.role === roleFilter);
-
-    const roleNames = {admin:'管理员',editor:'编辑者',senior_editor:'高级编辑者',viewer:'查看者'};
-    list.innerHTML = data.map(u => {
-      const url = window.location.origin + '/?token=' + u.token;
-      const isSelf = u.id === currentUser.id;
-      const isAdmin = u.role === 'admin';
-      const bizBadge = u.business_verified ? '<span style="font-size:9px;background:#e3f2fd;color:#1565c0;padding:1px 5px;border-radius:4px;margin-left:4px">🏢 企业</span>' : '';
-      const bizBtn = (!isAdmin && u.business_verified) ? '<button onclick="revokeBiz(' + u.id + ')" title="取消企业资格" style="background:none;border:none;cursor:pointer;font-size:11px;padding:2px 4px;color:var(--text-light)">🏢✕</button>' : '';
-      return '<div class="manage-item" style="padding:10px 14px;gap:8px">' +
-        '<div style="flex:1;min-width:0;cursor:pointer" onclick="editUserName(' + u.id + ',\'' + (u.display_name||u.username).replace(/'/g,"\\'") + '\')" title="点击修改昵称">' +
-          '<span style="font-weight:600;font-size:14px">' + (u.display_name || u.username) + '</span>' + bizBadge +
-          '<div style="font-size:11px;color:var(--text-light)">@' + u.username + '</div>' +
-        '</div>' +
-        '<select id="role-select-' + u.id + '" class="form-control" style="width:90px;padding:4px 6px;font-size:11px" ' + (isSelf ? 'disabled' : '') + ' onchange="saveUserRole(' + u.id + ')">' +
-          '<option value="admin"' + (u.role === 'admin' ? ' selected' : '') + '>管理员</option>' +
-          '<option value="senior_editor"' + (u.role === 'senior_editor' ? ' selected' : '') + '>高级编辑者</option>' +
-          '<option value="editor"' + (u.role === 'editor' ? ' selected' : '') + '>编辑者</option>' +
-          '<option value="viewer"' + (u.role === 'viewer' ? ' selected' : '') + '>查看者</option>' +
-        '</select>' +
-        '<input type="hidden" id="url-' + u.id + '" value="' + url + '">' +
-        bizBtn +
-        (isAdmin ? '' : '<button onclick="copyUserUrl(' + u.id + ')" title="复制链接" style="background:none;border:none;cursor:pointer;font-size:13px;padding:2px 4px;color:var(--text-light)">📋</button>') +
-        (isSelf ? '' : '<button onclick="deleteUser(' + u.id + ',\'' + u.username.replace(/'/g, "\\'") + '\')" title="删除" style="background:none;border:none;cursor:pointer;font-size:13px;padding:2px 4px;color:var(--text-light)">🗑</button>') +
-      '</div>';
-    }).join('');
-  } catch(e) { list.innerHTML = '<div style="color:red;padding:20px">加载失败</div>'; }
-
-  // Load translation suggestions
-  try {
-    const tRes = await _apiFetch('/api/translation-suggestions');
-    const suggestions = await tRes.json();
-    const tSection = document.getElementById('translationSection');
-    const tList = document.getElementById('translationList');
-    if (suggestions.length > 0) {
-      tSection.style.display = '';
-      tList.innerHTML = suggestions.map(s =>
-        '<div class="manage-item" style="padding:10px;gap:8px">' +
-          '<div style="flex:1;min-width:0">' +
-            '<div style="font-size:13px"><span style="font-weight:600">' + s.recipe_name + '</span> → <span style="color:var(--sage-dark)">' + s.suggested_en + '</span></div>' +
-            '<div style="font-size:11px;color:var(--text-light)">' + (s.display_name || s.username || '') + ' · ' + (s.created_at || '') + '</div>' +
-          '</div>' +
-          '<div style="display:flex;gap:4px;flex-shrink:0">' +
-            '<button class="btn btn-primary btn-sm" onclick="approveTranslation(' + s.id + ',\'' + s.recipe_name.replace(/'/g,"\\'") + '\',\'' + s.suggested_en.replace(/'/g,"\\'") + '\')">✅ 采纳</button>' +
-            '<button class="btn btn-outline btn-sm" onclick="rejectTranslation(' + s.id + ')" style="color:#c0392b">拒绝</button>' +
-          '</div></div>'
-      ).join('');
-    } else {
-      tSection.style.display = 'none';
-    }
-  } catch(e) {}
-
-  // Load business applications
-  try {
-    const bRes = await _apiFetch('/api/business-applications');
-    const apps = await bRes.json();
-    const pending = apps.filter(a => a.status === 'pending');
-    const section = document.getElementById('bizApprovalSection');
-    const bList = document.getElementById('bizApprovalList');
-    if (pending.length > 0) {
-      section.style.display = '';
-      bList.innerHTML = pending.map(a =>
-        '<div class="manage-item" style="padding:12px;gap:10px">' +
-          '<div style="flex:1;min-width:0">' +
-            '<div style="font-size:14px;font-weight:600;color:var(--text-dark)">' + (a.display_name || a.username) + '</div>' +
-            '<div style="font-size:13px;color:var(--text-mid)">商户名：' + a.business_name + '</div>' +
-            (a.document ? '<img src="' + a.document + '" style="max-width:200px;max-height:150px;border-radius:8px;margin-top:6px;border:1px solid var(--border)">' : '<div style="font-size:12px;color:var(--text-light);margin-top:4px">未上传证明文件</div>') +
-            '<div style="font-size:11px;color:var(--text-light);margin-top:4px">' + (a.created_at || '') + '</div>' +
-          '</div>' +
-          '<div style="display:flex;gap:6px;flex-shrink:0">' +
-            '<button class="btn btn-primary btn-sm" onclick="approveBiz(' + a.id + ')">✅ 通过</button>' +
-            '<button class="btn btn-outline btn-sm" onclick="rejectBiz(' + a.id + ')" style="color:#c0392b">拒绝</button>' +
-          '</div>' +
-        '</div>'
-      ).join('');
-    } else {
-      section.style.display = 'none';
-    }
-  } catch(e) {}
-}
-
-async function approveBiz(appId) {
-  try {
-    await _apiFetch('/api/business-applications/' + appId + '/approve', { method: 'POST', body: '{}' });
-    // Mark related notifications as read
-    await _apiFetch('/api/notifications/read-all', { method: 'POST', body: '{}' }).catch(() => {});
-    loadNotifications();
-    _showToast('✅ 已通过');
-    renderUsers();
-  } catch(e) { _showToast('操作失败，请重试'); }
-}
-
-async function rejectBiz(appId) {
-  const reason = await _prompt('拒绝理由（对方会看到）：');
-  if (reason === null) return;
-  try {
-    await _apiFetch('/api/business-applications/' + appId + '/reject', { method: 'POST', body: JSON.stringify({ reason: reason || '' }) });
-    _showToast('已拒绝');
-    renderUsers();
-  } catch(e) { _showToast('操作失败，请重试'); }
-}
-
-async function approveTranslation(sid, recipeName, suggestedEn) {
-  try {
-    await _apiFetch('/api/translation-suggestions/' + sid + '/approve', { method: 'POST', body: '{}' });
-    // Apply the translation locally
-    window._customTranslations = window._customTranslations || {};
-    window._customTranslations[recipeName] = suggestedEn;
-    const origRNE = recipeNameEn;
-    recipeNameEn = function(name) {
-      if (window._customTranslations && window._customTranslations[name]) return window._customTranslations[name];
-      return origRNE(name);
-    };
-    _showToast('✅ 已采纳翻译：' + recipeName + ' → ' + suggestedEn);
-    renderUsers();
-  } catch(e) { _showToast('操作失败，请重试'); }
-}
-
-async function rejectTranslation(sid) {
-  try {
-    await _apiFetch('/api/translation-suggestions/' + sid + '/reject', { method: 'POST', body: '{}' });
-    _showToast('已拒绝');
-    renderUsers();
-  } catch(e) { _showToast('操作失败，请重试'); }
-}
-
-async function revokeBiz(userId) {
-  const reason = await _prompt('取消原因（对方会看到）：');
-  if (reason === null) return;
-  try {
-    await _apiFetch('/api/business-revoke/' + userId, { method: 'POST', body: JSON.stringify({ reason: reason || '' }) });
-    _usersCache = null;
-    _showToast('已取消企业资格');
-    renderUsers();
-  } catch(e) { _showToast('操作失败，请重试'); }
-}
-
-async function editUserName(id, current) {
-  const name = await _prompt('修改昵称：', current);
-  if (!name || name === current) return;
-  try {
-    const res = await _apiFetch('/api/users/' + id, { method: 'PUT', body: JSON.stringify({ display_name: name }) });
-    if (res.ok) { _showToast('✅ 已修改'); renderUsers(); }
-    else _showToast('修改失败');
-  } catch(e) { _showToast('网络错误'); }
-}
-
-async function saveUserRole(id) {
-  const sel = document.getElementById('role-select-' + id);
-  if (!sel) return;
-  try {
-    const res = await _apiFetch('/api/users/' + id, { method: 'PUT', body: JSON.stringify({ role: sel.value }) });
-    if (!res.ok) { alert('保存失败：' + await res.text()); return; }
-    alert('✅ 权限已更新');
-  } catch(e) { alert('保存失败'); }
-}
-
-function copyUserUrl(id) {
-  const input = document.getElementById('url-' + id);
-  if (!input) return;
-  navigator.clipboard.writeText(input.value).then(() => {
-    alert('✅ 链接已复制');
-  }).catch(async () => { await _prompt('复制链接：', input.value); });
-}
-
-async function createUser() {
-  const username = document.getElementById('newUserName').value.trim();
-  const displayName = document.getElementById('newUserDisplayName').value.trim();
-  const role = document.getElementById('newUserRole').value;
-  if (!username) { alert('请输入用户名'); return; }
-  try {
-    const res = await _apiFetch('/api/users', {
-      method: 'POST', body: JSON.stringify({ username, role, display_name: displayName })
-    });
-    if (!res.ok) { alert('创建失败：' + await res.text()); return; }
-    const data = await res.json();
-    const url = window.location.origin + '/?token=' + data.token;
-    document.getElementById('newUserResult').innerHTML =
-      '<div style="background:var(--sage-mist);padding:12px;border-radius:8px;font-size:13px">' +
-      '✅ 用户 <b>' + username + '</b> 已创建<br>' +
-      '分享链接：<input type="text" value="' + url + '" style="width:100%;margin-top:6px;padding:6px;border:1px solid var(--border);border-radius:6px;font-size:12px" onclick="this.select()" readonly>' +
-      '</div>';
-    document.getElementById('newUserName').value = '';
-    document.getElementById('newUserDisplayName').value = '';
-    renderUsers();
-  } catch(e) { alert('创建失败'); }
-}
-
-async function deleteUser(id, username) {
-  if (!await _confirm('确认删除用户「' + username + '」？')) return;
-  try {
-    await _apiFetch('/api/users/' + id, { method: 'DELETE' });
-    renderUsers();
-  } catch(e) { alert('删除失败'); }
-}
-
-// ── RECIPE REVIEW & ADOPT (admin) ──────────────────────
-let reviewFilterActive = false;
-
-function _getPendingRecipes() {
-  if (currentUser.role !== 'admin') return [];
-  return recipes.filter(r => r._owner_id && r._owner_id !== currentUser.id);
-}
-
-function _updateReviewBar() {
-  const bar = document.getElementById('reviewBar');
-  if (!bar || currentUser.role !== 'admin') return;
-  const pending = _getPendingRecipes();
-  document.getElementById('reviewCount').textContent = pending.length > 0 ? pending.length + ' 条待审核' : '无待审核配方';
-}
-
-let mineFilterActive = false;
-
-function filterByMine() {
-  mineFilterActive = !mineFilterActive;
-  reviewFilterActive = false;
-  manageFilterTag = null;
-  const btn = document.getElementById('filterMineBtn');
-  if (btn) { btn.classList.toggle('btn-primary', mineFilterActive); btn.classList.toggle('btn-outline', !mineFilterActive); }
-  renderTagBar();
-  renderManage();
-}
-
-function filterByReview() {
-  reviewFilterActive = !reviewFilterActive;
-  mineFilterActive = false;
-  const btn = document.getElementById('filterMineBtn');
-  if (btn) { btn.classList.remove('btn-primary'); btn.classList.add('btn-outline'); }
-  manageFilterTag = null;
-  renderTagBar();
-  renderManage();
-}
-
-async function adoptRecipe(i) {
-  const r = recipes[i];
-  if (!r._id) return;
-  try {
-    await _apiFetch('/api/recipes/' + r._id + '/adopt', { method: 'POST' });
-    r._owner_id = currentUser.id;
-    r._owner_name = currentUser.display_name || currentUser.username;
-    // If no more pending, exit review filter
-    if (!_getPendingRecipes().length) reviewFilterActive = false;
-    _updateReviewBar();
-    renderManage();
-  } catch(e) { alert('采纳失败'); }
-}
-
-async function adoptSelected() {
-  const ids = [...selectedRecipes].map(i => recipes[i]._id).filter(Boolean);
-  const pending = ids.filter(id => {
-    const r = recipes.find(r => r._id === id);
-    return r && r._owner_id !== currentUser.id;
-  });
-  if (!pending.length) { alert('没有选中待审核的配方'); return; }
-  if (!await _confirm('确认采纳选中的 ' + pending.length + ' 条配方？')) return;
-  try {
-    await _apiFetch('/api/recipes/adopt-batch', { method: 'POST', body: JSON.stringify({ ids: pending }) });
-    pending.forEach(id => {
-      const r = recipes.find(r => r._id === id);
-      if (r) { r._owner_id = currentUser.id; r._owner_name = currentUser.display_name; }
-    });
-    selectedRecipes.clear();
-    reviewFilterActive = false;
-    _updateReviewBar();
-    renderManage();
-    alert('✅ 已采纳 ' + pending.length + ' 条配方');
-  } catch(e) { alert('采纳失败'); }
-}
-
-async function adoptAll() {
-  const pending = _getPendingRecipes();
-  if (!pending.length) { alert('没有待审核的配方'); return; }
-  if (!await _confirm('确认采纳全部 ' + pending.length + ' 条待审核配方？')) return;
-  const ids = pending.map(r => r._id).filter(Boolean);
-  try {
-    await _apiFetch('/api/recipes/adopt-batch', { method: 'POST', body: JSON.stringify({ ids }) });
-    pending.forEach(r => { r._owner_id = currentUser.id; r._owner_name = currentUser.display_name; });
-    reviewFilterActive = false;
-    _updateReviewBar();
-    renderManage();
-    alert('✅ 已采纳 ' + pending.length + ' 条配方');
-  } catch(e) { alert('采纳失败'); }
-}
-
-// Patch: _updateReviewBar is called inside _doRenderManage now
-// (old third override removed — merged into _doRenderManage)
-
-// ── FAVORITES ──────────────────────────────────────────
-let userFavorites = []; // array of recipe _id
-
-async function loadFavorites() {
-  if (!currentUser.id) return;
-  try {
-    const res = await _apiFetch('/api/favorites');
-    userFavorites = await res.json();
-  } catch(e) { userFavorites = []; }
-}
-
-function isFavorite(recipe) {
-  return recipe._id && userFavorites.includes(recipe._id);
-}
-
-async function toggleFavorite(recipeId, btn) {
-  if (!currentUser.id) { showLoginModal(); return; }
-  const isFav = userFavorites.includes(recipeId);
-  if (isFav) {
-    await _apiFetch('/api/favorites/' + recipeId, {method:'DELETE'}).catch(()=>{});
-    userFavorites = userFavorites.filter(id => id !== recipeId);
-  } else {
-    await _apiFetch('/api/favorites/' + recipeId, {method:'POST', body:'{}'}).catch(()=>{});
-    userFavorites.push(recipeId);
-  }
-  if (btn) {
-    btn.textContent = isFav ? '☆' : '★';
-    btn.title = isFav ? '收藏' : '取消收藏';
-    btn.style.color = isFav ? 'var(--text-light)' : 'var(--gold)';
-  }
-  // Refresh grid if we're in favorites filter
-  if (_favFilterActive) filterRecipes();
-}
-
-let _favFilterActive = false;
-function toggleFavFilter() {
-  _favFilterActive = !_favFilterActive;
-  const btn = document.getElementById('favFilterBtn');
-  if (btn) {
-    btn.classList.toggle('btn-primary', _favFilterActive);
-    btn.classList.toggle('btn-outline', !_favFilterActive);
-    btn.style.color = _favFilterActive ? 'white' : '';
-  }
-  filterRecipes();
-}
-
-// ── DIARY (personal recipes + journal) ─────────────────
-let userDiary = [];
-let currentDiaryId = null;
-
-async function loadDiary() {
-  if (!currentUser.id) return;
-  try {
-    const res = await _apiFetch('/api/diary');
-    userDiary = await res.json();
-  } catch(e) { userDiary = []; }
-}
-
-async function saveAsMine() {
-  if (!currentUser.id) { showLoginModal(); return; }
-  if (currentRecipe === null) return;
-  const r = recipes[currentRecipe];
-  const name = await _prompt('保存为我的配方，名称：', r.name);
-  if (!name) return;
-  try {
-    const res = await _apiFetch('/api/diary', { method: 'POST', body: JSON.stringify({
-      name,
-      source_recipe_id: r._id || null,
-      ingredients: r.ingredients.map(i => ({ oil: i.oil, drops: i.drops })),
-      note: r.note || ''
-    })});
-    if (!res.ok) { alert('保存失败'); return; }
-    await loadDiary();
-    alert('✅ 已保存到「我的配方日记」');
-  } catch(e) { alert('保存失败'); }
-}
-
-async function diarySmartPaste() {
-  if (!currentUser.id) { showLoginModal(); return; }
-  const raw = document.getElementById('diarySmartPasteInput')?.value.trim();
-  if (!raw) { _showToast('请输入配方内容'); return; }
-
-  const blocks = _splitRawIntoBlocks(raw);
-  const parsed = blocks.map(b => _parseSingleBlock(b)).filter(Boolean);
-  if (parsed.length === 0) { _showToast('没有识别到精油配方'); return; }
-
-  // Store queue and render wizard in diary area
-  window._diarySmartQueue = parsed;
-  window._diarySmartIdx = 0;
-  window._diarySmartSaved = 0;
-  _renderDiarySmartWizard();
-}
-
-function _renderDiarySmartWizard() {
-  const queue = window._diarySmartQueue;
-  const idx = window._diarySmartIdx;
-  const resultDiv = document.getElementById('diarySmartPasteResult');
-  if (!queue || idx >= queue.length) {
-    const saved = window._diarySmartSaved || 0;
-    resultDiv.innerHTML = '<div style="background:var(--sage-mist);border-radius:12px;padding:16px;text-align:center">' +
-      '<div style="font-size:20px;margin-bottom:6px">✅</div>' +
-      '<div style="font-size:14px;font-weight:600;color:var(--sage-dark)">完成！共保存 ' + saved + ' 个配方</div></div>';
-    document.getElementById('diarySmartPasteInput').value = '';
-    window._diarySmartQueue = null;
-    loadDiary().then(() => { renderDiaryList(); renderPersonalSection(); });
-    return;
-  }
-
-  const recipe = queue[idx];
-  const total = queue.length;
-
-  let html = '<div style="background:var(--sage-mist);border-radius:12px;padding:16px;margin-top:6px">';
-  html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">' +
-    '<div style="font-size:14px;font-weight:600;color:var(--sage-dark)">校准配方 (' + (idx+1) + '/' + total + ')</div>' +
-    '<div style="font-size:11px;color:var(--text-light)">已保存 ' + (window._diarySmartSaved||0) + '</div></div>';
-
-  html += '<div style="height:3px;background:var(--border);border-radius:2px;margin-bottom:12px;overflow:hidden">' +
-    '<div style="height:100%;background:var(--sage);width:' + ((idx/total)*100) + '%"></div></div>';
-
-  html += '<div style="margin-bottom:10px">' +
-    '<label style="font-size:12px;color:var(--text-mid)">配方名称</label>' +
-    '<input type="text" class="form-control" id="diaryWizName" value="' + (recipe.name||'').replace(/"/g,'&quot;') + '" style="font-size:13px;font-weight:600;margin-top:4px">' +
-  '</div>';
-
-  html += '<div style="margin-bottom:10px"><label style="font-size:12px;color:var(--text-mid)">精油成分</label><div id="diaryWizIngList" style="margin-top:4px">';
-  recipe.ingredients.forEach(ing => {
-    const cost = (OILS[ing.oil] || 0) * ing.drops;
-    html += '<div style="display:flex;gap:5px;align-items:center;margin-bottom:5px">' +
-      '<select class="form-control dwiz-oil" style="flex:2;font-size:12px;padding:5px 6px" onchange="_updateDiaryWizCost()">' +
-        '<option value="">选择</option>' +
-        Object.keys(OILS).sort().map(n => '<option value="' + n + '"' + (n===ing.oil?' selected':'') + '>' + n + '</option>').join('') +
-      '</select>' +
-      '<input type="number" class="form-control dwiz-drops" value="' + ing.drops + '" min="0.5" step="0.5" style="width:55px;font-size:12px;padding:5px;text-align:center" oninput="_updateDiaryWizCost()">' +
-      '<span style="font-size:10px;color:var(--text-light);width:44px;text-align:right">¥' + cost.toFixed(2) + '</span>' +
-      '<button onclick="this.parentElement.remove();_updateDiaryWizCost()" style="background:none;border:none;cursor:pointer;font-size:13px;color:var(--text-light);padding:1px">✕</button>' +
-    '</div>';
-  });
-  html += '</div><button class="btn btn-outline btn-sm" onclick="_addDiaryWizIngRow()" style="font-size:11px">＋ 添加</button></div>';
-
-  if (recipe.notFound && recipe.notFound.length) {
-    html += '<div style="font-size:11px;color:#c0392b;margin-bottom:8px">⚠️ 未识别：' + recipe.notFound.join('、') + '</div>';
-  }
-
-  const totalCost = recipe.ingredients.reduce((s, ing) => s + (OILS[ing.oil]||0) * ing.drops, 0);
-  html += '<div id="diaryWizCostLine" style="font-size:13px;font-weight:600;color:var(--sage-dark);margin-bottom:10px">总成本：¥' + totalCost.toFixed(2) + '</div>';
-
-  html += '<div style="display:flex;gap:8px">' +
-    '<button class="btn btn-primary btn-sm" onclick="_diaryWizSave()">✅ 保存' + (idx < total-1 ? '并下一个' : '') + '</button>' +
-    (idx < total-1 ? '<button class="btn btn-outline btn-sm" onclick="_diaryWizSkip()">放弃</button>' : '') +
-    '<button class="btn btn-outline btn-sm" onclick="document.getElementById(\'diarySmartPasteResult\').innerHTML=\'\';window._diarySmartQueue=null" style="color:var(--text-light)">取消</button>' +
-  '</div></div>';
-
-  resultDiv.innerHTML = html;
-}
-
-function _addDiaryWizIngRow() {
-  const list = document.getElementById('diaryWizIngList');
-  if (!list) return;
-  const div = document.createElement('div');
-  div.style.cssText = 'display:flex;gap:5px;align-items:center;margin-bottom:5px';
-  div.innerHTML =
-    '<select class="form-control dwiz-oil" style="flex:2;font-size:12px;padding:5px 6px" onchange="_updateDiaryWizCost()"><option value="">选择</option>' +
-    Object.keys(OILS).sort().map(n => '<option value="' + n + '">' + n + '</option>').join('') +
-    '</select>' +
-    '<input type="number" class="form-control dwiz-drops" value="1" min="0.5" step="0.5" style="width:55px;font-size:12px;padding:5px;text-align:center" oninput="_updateDiaryWizCost()">' +
-    '<span style="font-size:10px;color:var(--text-light);width:44px;text-align:right">¥0.00</span>' +
-    '<button onclick="this.parentElement.remove();_updateDiaryWizCost()" style="background:none;border:none;cursor:pointer;font-size:13px;color:var(--text-light);padding:1px">✕</button>';
-  list.appendChild(div);
-}
-
-function _updateDiaryWizCost() {
-  const list = document.getElementById('diaryWizIngList');
-  if (!list) return;
-  let total = 0;
-  list.querySelectorAll('[style*="display:flex"]').forEach(row => {
-    const oil = row.querySelector('.dwiz-oil')?.value;
-    const drops = parseFloat(row.querySelector('.dwiz-drops')?.value) || 0;
-    const cost = (OILS[oil]||0) * drops;
-    total += cost;
-    const span = row.querySelector('span');
-    if (span) span.textContent = '¥' + cost.toFixed(2);
-  });
-  const cl = document.getElementById('diaryWizCostLine');
-  if (cl) cl.textContent = '总成本：¥' + total.toFixed(2);
-}
-
-async function _diaryWizSave() {
-  const name = document.getElementById('diaryWizName')?.value.trim();
-  if (!name) { _showToast('请输入配方名称'); return; }
-  const list = document.getElementById('diaryWizIngList');
-  const ings = [];
-  list?.querySelectorAll('[style*="display:flex"]').forEach(row => {
-    const oil = row.querySelector('.dwiz-oil')?.value;
-    const drops = parseFloat(row.querySelector('.dwiz-drops')?.value) || 0;
-    if (oil && drops > 0) ings.push({ oil, drops });
-  });
-  if (!ings.length) { _showToast('请至少添加一种精油'); return; }
-  try {
-    const res = await _apiFetch('/api/diary', { method: 'POST', body: JSON.stringify({ name, ingredients: ings, note: '' }) });
-    if (!res.ok) { _showToast('保存失败'); return; }
-    window._diarySmartSaved = (window._diarySmartSaved||0) + 1;
-    _showToast('✅ 已保存「' + name + '」');
-  } catch(e) { _showToast('保存失败'); return; }
-  window._diarySmartIdx++;
-  _renderDiarySmartWizard();
-}
-
-function _diaryWizSkip() {
-  window._diarySmartIdx++;
-  _renderDiarySmartWizard();
-}
-
-async function createNewDiary() {
-  if (!currentUser.id) { showLoginModal(); return; }
-  try {
-    const res = await _apiFetch('/api/diary', { method: 'POST', body: JSON.stringify({
-      name: '未命名配方', ingredients: [], note: ''
-    })});
-    if (!res.ok) { alert('创建失败'); return; }
-    const data = await res.json();
-    await loadDiary();
-    openDiaryDetail(data.id);
-  } catch(e) { alert('创建失败'); }
-}
-
-function showDiaryTab(tab) {
-  // Ensure title and tabs are always visible
-  const title = document.querySelector('#section-mydiary > .section-title');
-  const tabsRow = document.querySelector('#section-mydiary > div:nth-child(2)');
-  if (title) title.style.display = '';
-  if (tabsRow) tabsRow.style.display = '';
-
-  ['Recipes','Favs','Brand','Account'].forEach(t => {
-    const btn = document.getElementById('diaryTab' + t);
-    const panel = document.getElementById('diary' + t + 'Panel');
-    if (btn) { btn.classList.toggle('btn-primary', tab === t.toLowerCase()); btn.classList.toggle('btn-outline', tab !== t.toLowerCase()); }
-    if (panel) panel.style.display = tab === t.toLowerCase() ? '' : 'none';
-  });
-  document.getElementById('diaryDetailPanel').style.display = 'none';
-  if (tab === 'recipes') renderDiaryList();
-  if (tab === 'favs') renderDiaryFavs();
-  if (tab === 'brand') renderBrandUI();
-  if (tab === 'account') renderAccountUI();
-}
-
-function renderDiaryList() {
-  const list = document.getElementById('diaryList');
-  if (!userDiary.length) {
-    list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📔</div><div class="empty-state-text">还没有个人配方<br><span style="font-size:13px;color:var(--text-light)">在配方详情点「📔 存为我的」开始</span></div></div>';
-    return;
-  }
-  // Use recipe-grid card format
-  list.className = 'recipe-grid';
-  list.innerHTML = userDiary.map(d => {
-    const entryCount = d.entries ? d.entries.length : 0;
-    const ings = (d.ingredients || []).filter(i => i.oil !== '椰子油').map(i => i.oil).join('、');
-    const cost = (d.ingredients || []).reduce((s, i) => s + (OILS[i.oil] || 0) * i.drops, 0);
-    return '<div class="recipe-card" onclick="openDiaryDetail(' + d.id + ')">' +
-      '<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:6px">' +
-        '<div class="recipe-card-name" style="flex:1;min-width:0;word-break:break-word;margin-bottom:0">' + d.name + '</div>' +
-        '<button onclick="event.stopPropagation();deleteDiaryRecipe(' + d.id + ')" title="删除" style="background:none;border:none;cursor:pointer;font-size:13px;color:var(--text-light);padding:2px;flex-shrink:0">🗑</button>' +
-      '</div>' +
-      (entryCount ? '<div style="margin:4px 0"><span class="tag">' + entryCount + '篇日记</span></div>' : '') +
-      '<div class="recipe-card-oils">' + ings + '</div>' +
-      '<div style="display:flex;justify-content:space-between;align-items:center;margin-top:8px">' +
-        '<div class="recipe-card-price" style="margin:0">💰 ' + fmtCostWithRetail(d.ingredients || []) + '</div>' +
-      '</div>' +
-    '</div>';
-  }).join('');
-}
-
-function renderDiaryFavs() {
-  const container = document.getElementById('diaryFavsList');
-  const favRecipes = recipes.filter(r => r._id && userFavorites.includes(r._id));
-  if (!favRecipes.length) {
-    container.innerHTML = '<div class="empty-state"><div class="empty-state-icon">★</div><div class="empty-state-text">还没有收藏配方<br><span style="font-size:13px;color:var(--text-light)">在配方卡片上点 ★ 收藏</span></div></div>';
-    return;
-  }
-  container.innerHTML = favRecipes.map(r => {
-    const realIdx = recipes.indexOf(r);
-    const oilNames = r.ingredients.filter(i => i.oil !== '椰子油').map(i => i.oil).join('、');
-    const tags = (r.tags || []).map(t => '<span class="tag">' + t + '</span>').join(' ');
-    const fav = isFavorite(r);
-    return '<div class="recipe-card" onclick="showSection(\'search\');selectRecipe(' + realIdx + ')">' +
-      '<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:4px">' +
-        '<div class="recipe-card-name" style="flex:1;min-width:0;word-break:break-word;margin-bottom:0">' + r.name + '</div>' +
-        '<button onclick="event.stopPropagation();toggleFavorite(' + r._id + ',this)" style="background:none;border:none;font-size:20px;cursor:pointer;padding:2px 4px;color:var(--gold);flex-shrink:0">★</button>' +
-      '</div>' +
-      (tags ? '<div style="margin:4px 0">' + tags + '</div>' : '') +
-      '<div class="recipe-card-oils">' + oilNames + '</div>' +
-      '<div style="display:flex;justify-content:space-between;align-items:center;margin-top:8px">' +
-        '<div class="recipe-card-price" style="margin:0">💰 ' + fmtCostWithRetail(r.ingredients) + '</div>' +
-      '</div>' +
-    '</div>';
-  }).join('');
-}
-
-function editDiaryFromManage(diaryId) {
-  const d = userDiary.find(x => x.id === diaryId);
-  if (!d) return;
-  const tmpRecipe = { _id: null, _diary_id: diaryId, name: d.name, note: d.note || '', tags: [], ingredients: d.ingredients || [], _owner_id: currentUser.id };
-  recipes.push(tmpRecipe);
-  const tmpIdx = recipes.length - 1;
-  currentRecipe = tmpIdx;
-  _editSnapshot = null; // temp recipe, just remove on close
-  currentEditing = JSON.parse(JSON.stringify(d.ingredients || []));
-  document.getElementById('detailOverlay').style.display = 'block';
-  document.body.style.overflow = 'hidden';
-  switchToEditorView();
-  document.getElementById('detailPanel').scrollTop = 0;
-  const origClose = closeDetail;
-  closeDetail = function() { recipes.splice(tmpIdx, 1); currentRecipe = null; origClose(); closeDetail = origClose; };
-}
-
-function editDiaryTags(diaryId) {
-  const d = userDiary.find(x => x.id === diaryId);
-  if (!d) return;
-  _openTagPicker(d.name, d.tags || [], function(tags) {
-    d.tags = tags; // Update immediately so renderManage sees it
-    tags.forEach(t => { if (!allTags.includes(t)) allTags.push(t); });
-    _apiFetch('/api/diary/' + diaryId, { method: 'PUT', body: JSON.stringify({ tags }) })
-      .catch(() => _showToast('保存失败'));
-  });
-}
-
-function viewDiaryAsCard(diaryId) {
-  const d = userDiary.find(x => x.id === diaryId);
-  if (!d) return;
-  // Create a temporary recipe object and use the standard card view
-  const tmpRecipe = { _id: null, name: d.name, note: d.note || '', tags: [], ingredients: d.ingredients || [], _owner_id: currentUser.id };
-  recipes.push(tmpRecipe);
-  const tmpIdx = recipes.length - 1;
-  currentRecipe = tmpIdx;
-  currentEditing = JSON.parse(JSON.stringify(d.ingredients || []));
-  document.getElementById('detailOverlay').style.display = 'block';
-  document.body.style.overflow = 'hidden';
-  switchToCardView();
-  document.getElementById('detailPanel').scrollTop = 0;
-  // Override closeDetail to clean up temp recipe
-  const origClose = closeDetail;
-  closeDetail = function() { recipes.splice(tmpIdx, 1); currentRecipe = null; origClose(); closeDetail = origClose; };
-}
-
-function openDiaryDetail(diaryId) {
-  currentDiaryId = diaryId;
-  const d = userDiary.find(x => x.id === diaryId);
-  if (!d) return;
-
-  document.getElementById('diaryRecipesPanel').style.display = 'none';
-  document.getElementById('diaryDetailPanel').style.display = '';
-
-  document.getElementById('diaryDetailTitle').innerHTML =
-    '<input type="text" value="' + (d.name || '').replace(/"/g,'&quot;') + '" id="diaryNameInput" class="form-control" style="font-size:18px;font-weight:700;font-family:Noto Serif SC,serif;border:none;border-bottom:2px solid var(--border);border-radius:0;padding:4px 0;max-width:300px" placeholder="配方名称">';
-  document.getElementById('diaryNoteEdit').value = d.note || '';
-
-  // Ingredients (editable)
-  const ings = d.ingredients || [];
-  const oilOpts = Object.keys(OILS).sort((a,b) => a.localeCompare(b,'zh')).map(o => '<option value="' + o + '">' + o + '</option>').join('');
-  document.getElementById('diaryIngredients').innerHTML =
-    '<table class="ingredients-table"><thead><tr><th>精油</th><th>滴数</th><th>成本</th><th></th></tr></thead><tbody>' +
-    ings.map((i, idx) => {
-      const ppd = OILS[i.oil] || 0;
-      return '<tr><td><select class="oil-select" onchange="updateDiaryIng(' + idx + ',\'oil\',this.value)" style="font-size:12px">' +
-        Object.keys(OILS).sort((a,b) => a.localeCompare(b,'zh')).map(o => '<option value="' + o + '"' + (o === i.oil ? ' selected' : '') + '>' + o + '</option>').join('') +
-        '</select></td>' +
-        '<td><input type="number" class="drops-input" value="' + i.drops + '" min="0.5" step="0.5" onchange="updateDiaryIng(' + idx + ',\'drops\',this.value)" style="width:55px"></td>' +
-        '<td style="color:var(--sage-dark);font-size:12px">' + (ppd > 0 ? fmtPrice(ppd * i.drops) : '—') + '</td>' +
-        '<td><button onclick="removeDiaryIng(' + idx + ')" style="background:none;border:none;cursor:pointer;color:var(--text-light);font-size:14px">×</button></td></tr>';
-    }).join('') +
-    '</tbody></table>' +
-    '<button class="btn btn-outline btn-sm" onclick="addDiaryIng()" style="margin-top:6px;font-size:12px">＋ 加精油</button>' +
-    '';
-
-  // Entries
-  renderDiaryEntries(d);
-}
-
-function updateDiaryIng(idx, field, val) {
-  const d = userDiary.find(x => x.id === currentDiaryId);
-  if (!d) return;
-  if (field === 'oil') d.ingredients[idx].oil = val;
-  if (field === 'drops') d.ingredients[idx].drops = parseFloat(val) || 0;
-  openDiaryDetail(currentDiaryId);
-}
-
-function removeDiaryIng(idx) {
-  const d = userDiary.find(x => x.id === currentDiaryId);
-  if (!d) return;
-  d.ingredients.splice(idx, 1);
-  openDiaryDetail(currentDiaryId);
-}
-
-function addDiaryIng() {
-  const d = userDiary.find(x => x.id === currentDiaryId);
-  if (!d) return;
-  if (!d.ingredients) d.ingredients = [];
-  d.ingredients.push({ oil: Object.keys(OILS).sort((a,b) => a.localeCompare(b,'zh'))[0], drops: 1 });
-  openDiaryDetail(currentDiaryId);
-}
-
-async function saveDiaryAll() {
-  if (!currentDiaryId) { alert('无法保存：未选择配方'); return; }
-  const d = userDiary.find(x => x.id === currentDiaryId);
-  if (!d) { alert('无法保存：找不到配方数据'); return; }
-  const nameInput = document.getElementById('diaryNameInput');
-  const noteInput = document.getElementById('diaryNoteEdit');
-  const name = nameInput ? nameInput.value.trim() : d.name;
-  const note = noteInput ? noteInput.value : d.note;
-  const ingredients = d.ingredients || [];
-  try {
-    const res = await _apiFetch('/api/diary/' + currentDiaryId, { method: 'PUT', body: JSON.stringify({
-      name: name || '未命名配方', note, ingredients
-    })});
-    if (!res.ok) {
-      const err = await res.text();
-      alert('保存失败：' + err);
-      return;
-    }
-    d.name = name || '未命名配方';
-    d.note = note;
-    alert('✅ 已保存');
-    await loadDiary();
-  } catch(e) { alert('保存失败：' + e.message); }
-}
-
-function previewDiaryCard() {
-  if (!currentDiaryId) return;
-  const d = userDiary.find(x => x.id === currentDiaryId);
-  if (!d) return;
-  const nameInput = document.getElementById('diaryNameInput');
-  const name = nameInput ? nameInput.value.trim() : d.name;
-  if (!d.ingredients || !d.ingredients.length) { alert('请先添加精油'); return; }
-
-  // Build a temporary recipe-like object and reuse renderViewerCard
-  const tmpIdx = recipes.length;
-  const tmpRecipe = {
-    _id: null, name: name || '未命名配方', note: d.note || '',
-    tags: [], ingredients: d.ingredients, _owner_id: currentUser.id
-  };
-  recipes.push(tmpRecipe);
-  const prevRecipe = currentRecipe;
-  currentRecipe = tmpIdx;
-
-  // Show overlay with card
-  document.getElementById('detailOverlay').style.display = 'block';
-  document.body.style.overflow = 'hidden';
-  document.getElementById('cardViewMode').style.display = '';
-  document.getElementById('editorViewMode').style.display = 'none';
-
-  // Actions: just share + download + close
-  document.getElementById('cardViewActions').innerHTML =
-    '<button class="btn btn-outline btn-sm" onclick="shareRecipe()" style="font-size:12px">🔗 分享</button>' +
-    '<button class="btn btn-outline btn-sm" onclick="closeDetail()" style="font-size:12px">✕ 关闭</button>';
-
-  renderViewerCard(tmpIdx);
-  document.getElementById('detailPanel').scrollTop = 0;
-
-  // Cleanup: remove temp recipe when overlay closes
-  const origClose = closeDetail;
-  closeDetail = function() {
-    recipes.splice(tmpIdx, 1);
-    currentRecipe = prevRecipe;
-    origClose();
-    closeDetail = origClose;
-  };
-}
-
-async function publishDiary() {
-  if (!currentDiaryId) return;
-  const d = userDiary.find(x => x.id === currentDiaryId);
-  if (!d) return;
-  const nameInput = document.getElementById('diaryNameInput');
-  const name = nameInput ? nameInput.value.trim() : d.name;
-  if (!name || name === '未命名配方') { alert('请先填写配方名称'); return; }
-  if (!d.ingredients || !d.ingredients.length) { alert('请先添加精油'); return; }
-  if (!await _confirm('确认共享「' + name + '」到共享配方库吗？')) return;
-  try {
-    const res = await _apiFetch('/api/recipes', { method: 'POST', body: JSON.stringify({
-      name, note: d.note || '',
-      ingredients: d.ingredients.map(i => ({ oil_name: i.oil, drops: i.drops })),
-      tags: []
-    })});
-    if (!res.ok) { alert('共享失败'); return; }
-    await _apiLoadRecipes();
-    alert('✅ 已共享到公共配方库');
-  } catch(e) { alert('共享失败'); }
-}
-
-async function saveDiaryIngredients() {
-  if (!currentDiaryId) return;
-  const d = userDiary.find(x => x.id === currentDiaryId);
-  if (!d) return;
-  try {
-    await _apiFetch('/api/diary/' + currentDiaryId, { method: 'PUT', body: JSON.stringify({ ingredients: d.ingredients }) });
-    alert('✅ 配方已保存');
-  } catch(e) { alert('保存失败'); }
-}
-
-function renderDiaryEntries(d) {
-  const entries = d.entries || [];
-  document.getElementById('diaryEntries').innerHTML = entries.length
-    ? entries.map(e =>
-        '<div style="background:white;border-radius:10px;padding:14px 16px;margin-bottom:8px;box-shadow:0 2px 8px rgba(90,60,30,0.06)">' +
-          '<div style="display:flex;justify-content:space-between;align-items:center">' +
-            '<span style="font-size:11px;color:var(--text-light)">' + (e.created_at || '') + '</span>' +
-            '<button style="background:none;border:none;color:var(--text-light);cursor:pointer;font-size:14px" onclick="deleteDiaryEntry(' + e.id + ')">×</button>' +
-          '</div>' +
-          '<div style="font-size:14px;color:var(--text-dark);margin-top:6px;white-space:pre-wrap">' + e.content + '</div>' +
-        '</div>'
-      ).join('')
-    : '<div style="text-align:center;color:var(--text-light);padding:20px;font-size:13px">还没有日记，写下你的第一条感悟吧</div>';
-}
-
-function closeDiaryDetail() {
-  document.getElementById('diaryDetailPanel').style.display = 'none';
-  document.getElementById('diaryRecipesPanel').style.display = '';
-  currentDiaryId = null;
-}
-
-async function saveDiaryNote() {
-  if (!currentDiaryId) return;
-  const note = document.getElementById('diaryNoteEdit').value;
-  try {
-    await _apiFetch('/api/diary/' + currentDiaryId, { method: 'PUT', body: JSON.stringify({ note }) });
-    if (!window._writeQueued) _showToast('✅ 已保存');
-  } catch(e) { _showToast('⚠️ 备注保存失败'); }
-  const d = userDiary.find(x => x.id === currentDiaryId);
-  if (d) d.note = note;
-}
-
-async function addDiaryEntry() {
-  if (!currentDiaryId) return;
-  const textarea = document.getElementById('newDiaryEntry');
-  const content = textarea.value.trim();
-  if (!content) { alert('请写点内容'); return; }
-  try {
-    await _apiFetch('/api/diary/' + currentDiaryId + '/entries', { method: 'POST', body: JSON.stringify({ content }) });
-    textarea.value = '';
-    await loadDiary();
-    const d = userDiary.find(x => x.id === currentDiaryId);
-    if (d) renderDiaryEntries(d);
-  } catch(e) { alert('保存失败'); }
-}
-
-async function deleteDiaryEntry(entryId) {
-  if (!await _confirm('删除这条日记？')) return;
-  await _apiFetch('/api/diary/entries/' + entryId, { method: 'DELETE' }).catch(() => _showToast('删除失败'));
-  await loadDiary();
-  const d = userDiary.find(x => x.id === currentDiaryId);
-  if (d) renderDiaryEntries(d);
-}
-
-async function deleteDiaryRecipe(diaryId) {
-  if (!await _confirm('删除这个个人配方及所有日记？')) return;
-  await _apiFetch('/api/diary/' + diaryId, { method: 'DELETE' }).catch(() => _showToast('删除失败'));
-  await loadDiary();
-  if (currentDiaryId === diaryId) closeDiaryDetail();
-  renderDiaryList();
-}
-
-// ── PROFIT PROJECTS ─────────────────────────────────────
-let allProjects = [];
-let currentProject = null;
-let projIngredients = [];
-
-async function loadProjects() {
-  try {
-    const res = await _apiFetch('/api/projects');
-    allProjects = await res.json();
-  } catch(e) { allProjects = []; }
-}
-
-function renderProjectList() {
-  const list = document.getElementById('projectList');
-  if (!allProjects.length) {
-    list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">💼</div><div class="empty-state-text">还没有项目，点击右上角新增</div></div>';
-    return;
-  }
-  list.innerHTML = allProjects.map(p => {
-    const ings = (p.ingredients || []).map(i => i.oil).join('、');
-    return '<div class="manage-item" style="cursor:pointer" onclick="openProjectDetail(' + p.id + ')">' +
-      '<div class="manage-item-left">' +
-        '<div class="manage-item-name">' + p.name + '</div>' +
-        '<div class="manage-item-oils">' + ings + '</div>' +
-        (p.pricing ? '<div style="font-size:13px;color:var(--sage-dark);font-weight:600;margin-top:4px">定价 ¥' + p.pricing + '/次</div>' : '') +
-      '</div>' +
-      '<div class="manage-item-actions">' +
-        (currentUser.role === 'admin' || currentUser.role === 'senior_editor' ? '<button class="btn btn-danger btn-sm" onclick="event.stopPropagation();deleteProject(' + p.id + ')">删除</button>' : '') +
-      '</div></div>';
-  }).join('');
-}
-
-async function createProject() {
-  const name = await _prompt('项目名称：');
-  if (!name) return;
-  try {
-    const res = await _apiFetch('/api/projects', { method:'POST', body: JSON.stringify({ name, ingredients: [] }) });
-    const data = await res.json();
-    await loadProjects();
-    renderProjectList();
-    openProjectDetail(data.id);
-  } catch(e) { alert('创建失败'); }
-}
-
-async function deleteProject(id) {
-  if (!await _confirm('确认删除此项目？')) return;
-  await _apiFetch('/api/projects/' + id, { method:'DELETE' }).catch(() => _showToast('删除失败'));
-  await loadProjects();
-  if (currentProject === id) closeProjectDetail();
-  renderProjectList();
-}
-
-function openProjectDetail(id) {
-  const p = allProjects.find(x => x.id === id);
-  if (!p) return;
-  currentProject = id;
-  projIngredients = JSON.parse(JSON.stringify(p.ingredients || []));
-
-  document.getElementById('projectList').style.display = 'none';
-  document.getElementById('projectDetail').style.display = '';
-  document.getElementById('projTitle').textContent = p.name;
-  document.getElementById('projPricing').value = p.pricing || 0;
-  document.getElementById('projNote').value = p.note || '';
-
-  renderProjIngredients();
-  calcProjectAnalysis();
-}
-
-function closeProjectDetail() {
-  document.getElementById('projectDetail').style.display = 'none';
-  document.getElementById('projectList').style.display = '';
-  currentProject = null;
-}
-
-function renderProjIngredients() {
-  const tbody = document.getElementById('projIngBody');
-  tbody.innerHTML = projIngredients.map((ing, i) => {
-    const meta = OILS_META[ing.oil] || {};
-    const ppd = OILS[ing.oil] || 0;
-    const bottleInfo = meta.dropCount ? meta.dropCount + '滴/' + (meta.bottlePrice || 0) + '元' : '—';
-    const oilOptions = Object.keys(OILS).sort((a,b) => a.localeCompare(b,'zh')).map(o =>
-      '<option value="' + o + '"' + (o === ing.oil ? ' selected' : '') + '>' + o + '</option>'
-    ).join('');
-    return '<tr>' +
-      '<td><select class="oil-select" onchange="changeProjOil(' + i + ',this.value)">' + oilOptions + '</select></td>' +
-      '<td><input type="number" class="drops-input" value="' + ing.drops + '" min="0.5" step="0.5" onchange="changeProjDrops(' + i + ',this.value)"></td>' +
-      '<td style="font-size:12px;color:var(--text-light)">' + bottleInfo + '</td>' +
-      '<td style="font-size:13px;color:var(--text-light)">¥' + ppd.toFixed(2) + '</td>' +
-      '<td><button class="remove-btn" onclick="removeProjIng(' + i + ')">×</button></td></tr>';
-  }).join('');
-}
-
-function changeProjOil(i, val) { projIngredients[i].oil = val; renderProjIngredients(); calcProjectAnalysis(); }
-function changeProjDrops(i, val) { projIngredients[i].drops = parseFloat(val) || 0; calcProjectAnalysis(); }
-function removeProjIng(i) { projIngredients.splice(i, 1); renderProjIngredients(); calcProjectAnalysis(); }
-function addProjIng() { projIngredients.push({ oil: Object.keys(OILS)[0], drops: 4 }); renderProjIngredients(); calcProjectAnalysis(); }
-
-async function loadFromRecipe() {
-  const name = await _prompt('输入配方名称（精确匹配）：');
-  if (!name) return;
-  const r = recipes.find(x => x.name === name.trim());
-  if (!r) { alert('未找到配方「' + name + '」'); return; }
-  projIngredients = JSON.parse(JSON.stringify(r.ingredients));
-  renderProjIngredients();
-  calcProjectAnalysis();
-}
-
-function calcProjectAnalysis() {
-  const container = document.getElementById('projAnalysis');
-  if (!projIngredients.length) { container.innerHTML = ''; calcProjectProfit(); return; }
-
-  // For each oil: how many services can one bottle provide?
-  const analysis = projIngredients.map(ing => {
-    const meta = OILS_META[ing.oil] || {};
-    const bottleDrops = meta.dropCount || 280;
-    const bottlePrice = meta.bottlePrice || 0;
-    const servicesFromBottle = ing.drops > 0 ? Math.floor(bottleDrops / ing.drops) : 999999;
-    return {
-      oil: ing.oil,
-      dropsPerService: ing.drops,
-      bottleDrops,
-      bottlePrice,
-      servicesFromBottle,
-      ppdCost: (OILS[ing.oil] || 0) * ing.drops
-    };
-  });
-
-  // Bottleneck: oil that runs out first
-  const bottleneck = analysis.reduce((a, b) => a.servicesFromBottle < b.servicesFromBottle ? a : b);
-  const totalServices = bottleneck.servicesFromBottle;
-
-  // For each oil: how many drops & cost used over totalServices
-  const details = analysis.map(a => {
-    const usedDrops = a.dropsPerService * totalServices;
-    const usedBottles = usedDrops / a.bottleDrops;
-    const usedCost = usedBottles * a.bottlePrice;
-    return { ...a, usedDrops, usedBottles, usedCost };
-  });
-
-  const totalCost = details.reduce((s, d) => s + d.usedCost, 0);
-  const costPerService = totalServices > 0 ? totalCost / totalServices : 0;
-
-  // Store for profit calc
-  window._projTotalServices = totalServices;
-  window._projCostPerService = costPerService;
-  window._projTotalCost = totalCost;
-
-  let html = '<div style="font-size:14px;font-weight:600;color:var(--text-mid);margin-bottom:10px">📊 成本分析</div>';
-  html += '<table class="ingredients-table"><thead><tr>' +
-    '<th>精油</th><th>单次用量</th><th>瓶装</th><th>瓶可做次数</th><th>做' + totalServices + '次用量</th><th>消耗瓶数</th><th>成本</th></tr></thead><tbody>';
-  details.forEach(d => {
-    const isBottleneck = d.oil === bottleneck.oil;
-    html += '<tr' + (isBottleneck ? ' style="background:var(--gold-light)"' : '') + '>' +
-      '<td>' + d.oil + (isBottleneck ? ' <span style="font-size:11px;color:var(--brown)">⚡先用完</span>' : '') + '</td>' +
-      '<td>' + d.dropsPerService + '滴</td>' +
-      '<td style="font-size:12px">' + d.bottleDrops + '滴/¥' + d.bottlePrice + '</td>' +
-      '<td style="font-weight:600">' + d.servicesFromBottle + '次</td>' +
-      '<td>' + d.usedDrops + '滴</td>' +
-      '<td>' + d.usedBottles.toFixed(2) + '瓶</td>' +
-      '<td style="font-weight:600;color:var(--sage-dark)">¥' + d.usedCost.toFixed(2) + '</td></tr>';
-  });
-  html += '</tbody></table>';
-
-  html += '<div class="total-row" style="margin-top:12px">' +
-    '<div><span class="total-label">可做服务次数：</span><span style="font-size:18px;font-weight:700;color:var(--sage-dark)">' + totalServices + ' 次</span></div>' +
-    '<div><span class="total-label">总原料成本：</span><span class="total-price">¥' + totalCost.toFixed(2) + '</span></div>' +
-    '<div><span class="total-label">单次成本：</span><span style="font-size:18px;font-weight:700;color:var(--brown)">¥' + costPerService.toFixed(2) + '/次</span></div>' +
-  '</div>';
-
-  container.innerHTML = html;
-  calcProjectProfit();
-}
-
-function calcProjectProfit() {
-  const pricing = parseFloat(document.getElementById('projPricing').value) || 0;
-  const totalServices = window._projTotalServices || 0;
-  const costPerService = window._projCostPerService || 0;
-  const totalCost = window._projTotalCost || 0;
-
-  if (!totalServices || !pricing) {
-    document.getElementById('projProfit').textContent = '';
-    document.getElementById('projProfitDetail').textContent = pricing ? '' : '填写定价后自动计算利润';
-    return;
-  }
-
-  const profitPerService = pricing - costPerService;
-  const totalRevenue = pricing * totalServices;
-  const totalProfit = totalRevenue - totalCost;
-  const margin = (profitPerService / pricing * 100).toFixed(1);
-
-  document.getElementById('projProfit').innerHTML =
-    '单次利润 <span style="color:' + (profitPerService > 0 ? 'var(--sage-dark)' : '#c0392b') + ';font-size:22px">¥' +
-    profitPerService.toFixed(2) + '</span> · 利润率 ' + margin + '%';
-  document.getElementById('projProfitDetail').textContent =
-    totalServices + '次总收入 ¥' + totalRevenue.toFixed(2) + ' − 总成本 ¥' + totalCost.toFixed(2) +
-    ' = 总利润 ¥' + totalProfit.toFixed(2);
-}
-
-async function saveProject() {
-  if (!currentProject) return;
-  const pricing = parseFloat(document.getElementById('projPricing').value) || 0;
-  const note = document.getElementById('projNote').value;
-  try {
-    await _apiFetch('/api/projects/' + currentProject, {
-      method: 'PUT',
-      body: JSON.stringify({ ingredients: projIngredients, pricing, note })
-    });
-    await loadProjects();
-    alert('✅ 已保存');
-  } catch(e) { alert('保存失败'); }
-}
-
-// ── BRAND SETTINGS ─────────────────────────────────────
-let userBrand = { qr_code: null, brand_logo: null, brand_name: '' };
-
-async function loadBrand() {
-  if (!currentUser.id) return;
-  try {
-    const res = await _apiFetch('/api/brand');
-    userBrand = await res.json();
-  } catch(e) {}
-}
-
-function renderAccountUI() {
-  const dnEl = document.getElementById('myDisplayName');
-  const unEl = document.getElementById('myUsername');
-  if (dnEl) dnEl.value = currentUser.display_name || '';
-  if (unEl) unEl.value = currentUser.username || '';
-  // Business verification section
-  const bc = document.getElementById('businessApplyContent');
-  if (!bc) return;
-  if (currentUser.business_verified) {
-    bc.innerHTML = '<div style="display:flex;align-items:center;gap:8px;padding:10px 14px;background:#e8f5e9;border-radius:10px"><span style="font-size:18px">✅</span><span style="font-size:14px;color:#2e7d32;font-weight:600">已认证商业用户</span></div>';
-  } else {
-    // Load last application to pre-fill
-    _apiFetch('/api/my-business-application').then(r => r.json()).then(app => {
-      const prevName = app.business_name || '';
-      const prevDoc = app.document || '';
-      const isPending = app.status === 'pending';
-      const statusMsg = isPending
-        ? '<div style="padding:8px 12px;background:#fff8e1;border-radius:8px;margin-bottom:12px;font-size:13px;color:#f57f17">⏳ 申请审核中，请耐心等待</div>'
-        : (app.status === 'rejected'
-          ? '<div style="padding:8px 12px;background:#fdf0ee;border-radius:8px;margin-bottom:12px;font-size:13px;color:#c62828">上次申请未通过，可修改后重新提交' + (app.reject_reason ? '<div style="margin-top:4px;color:var(--text-mid)">原因：' + app.reject_reason + '</div>' : '') + '</div>'
-          : '');
-      bc.innerHTML =
-        '<p style="font-size:12px;color:var(--text-light);margin-bottom:12px">认证后可使用项目核算等商业功能，请填写商户信息并上传证明文件</p>' +
-        statusMsg +
-        '<div class="form-group"><label class="form-label">商户名称</label>' +
-          '<input type="text" class="form-control" id="bizName" value="' + prevName.replace(/"/g,'&quot;') + '" placeholder="如：XX美容院" style="max-width:250px;font-size:14px"' + (isPending ? ' disabled' : '') + '></div>' +
-        (prevDoc ? '<div class="form-group"><label class="form-label">已上传的证明文件</label><img src="' + prevDoc + '" style="max-width:200px;max-height:150px;border-radius:8px;border:1px solid var(--border);display:block;margin-bottom:8px"></div>' : '') +
-        '<div class="form-group"><label class="form-label">' + (prevDoc ? '更换证明文件' : '证明文件（营业执照/店铺照片等）') + '</label>' +
-          '<input type="file" id="bizDoc" accept="image/*" style="font-size:13px"' + (isPending ? ' disabled' : '') + '></div>' +
-        (isPending ? '' : '<button class="btn btn-primary btn-sm" onclick="submitBusinessApply()">' + (app.status === 'rejected' ? '重新提交' : '提交认证申请') + '</button>') +
-        '<div id="bizApplyResult" style="margin-top:8px"></div>';
-    }).catch(() => {
-      bc.innerHTML =
-        '<p style="font-size:12px;color:var(--text-light);margin-bottom:12px">认证后可使用项目核算等商业功能，请填写商户信息并上传证明文件</p>' +
-        '<div class="form-group"><label class="form-label">商户名称</label>' +
-          '<input type="text" class="form-control" id="bizName" placeholder="如：XX美容院" style="max-width:250px;font-size:14px"></div>' +
-        '<div class="form-group"><label class="form-label">证明文件（营业执照/店铺照片等）</label>' +
-          '<input type="file" id="bizDoc" accept="image/*" style="font-size:13px"></div>' +
-        '<button class="btn btn-primary btn-sm" onclick="submitBusinessApply()">提交认证申请</button>' +
-        '<div id="bizApplyResult" style="margin-top:8px"></div>';
-    });
-  }
-}
-
-async function submitBusinessApply() {
-  const name = document.getElementById('bizName')?.value.trim();
-  if (!name) { document.getElementById('bizApplyResult').innerHTML = '<span style="color:#c0392b">请填写商户名称</span>'; return; }
-  let doc = '';
-  const file = document.getElementById('bizDoc')?.files[0];
-  if (file) {
-    doc = await _compressImage(file, 1500000);
-  } else {
-    const prevImg = document.querySelector('#businessApplyContent img');
-    if (prevImg) doc = prevImg.src;
-  }
-  if (!doc) { document.getElementById('bizApplyResult').innerHTML = '<span style="color:#c0392b">请上传证明文件</span>'; return; }
-  try {
-    const res = await _apiFetch('/api/business-apply', { method: 'POST', body: JSON.stringify({ business_name: name, document: doc }) });
-    if (res.ok) {
-      if (!window._writeQueued) document.getElementById('bizApplyResult').innerHTML = '<span style="color:var(--sage-dark)">✅ 申请已提交，等待管理员审核</span>';
-    } else {
-      const err = await res.json().catch(() => ({}));
-      document.getElementById('bizApplyResult').innerHTML = '<span style="color:#c0392b">' + (err.detail || '提交失败') + '</span>';
-    }
-  } catch(e) { document.getElementById('bizApplyResult').innerHTML = '<span style="color:#c0392b">网络错误</span>'; }
-}
-
-function renderBrandUI() {
-
-  const qrPrev = document.getElementById('qrPreview');
-  const logoPrev = document.getElementById('logoPreview');
-  const bgPrev = document.getElementById('bgPreview');
-  const nameInput = document.getElementById('brandNameInput');
-  if (!qrPrev) return;
-
-  function setPreview(el, src, fit) {
-    if (src) el.innerHTML = '<img src="' + src + '" style="width:100%;height:100%;object-fit:' + fit + '">';
-    else el.innerHTML = '<span style="font-size:12px;color:var(--text-light)">点击上传</span>';
-  }
-  setPreview(qrPrev, userBrand.qr_code, 'cover');
-  setPreview(bgPrev, userBrand.brand_bg, 'cover');
-  setPreview(logoPrev, userBrand.brand_logo, 'contain;padding:4px');
-  if (nameInput) nameInput.value = userBrand.brand_name || '';
-
-  // Highlight current alignment button
-  const align = userBrand.brand_align || 'center';
-  document.querySelectorAll('.brand-align-btn').forEach(b => {
-    const isActive = b.textContent.includes(align === 'left' ? '靠左' : align === 'right' ? '靠右' : '居中');
-    b.classList.toggle('btn-primary', isActive);
-    b.classList.toggle('btn-outline', !isActive);
-  });
-
-  // Update card preview
-  _updateBrandPreview();
-}
-
-function _updateBrandPreview() {
-  const prev = document.getElementById('brandCardPreview');
-  if (!prev) return;
-  // Remove old overlays
-  prev.querySelectorAll('.brand-overlay').forEach(el => el.remove());
-
-  // Background image: cover entire card, low opacity
-  if (userBrand.brand_bg) {
-    const bg = document.createElement('div');
-    bg.className = 'brand-overlay';
-    bg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;background:url(\'' + userBrand.brand_bg + '\') center/cover no-repeat;opacity:0.12;pointer-events:none;z-index:0';
-    prev.insertBefore(bg, prev.firstChild);
-  }
-
-  // Logo: bottom center watermark
-  if (userBrand.brand_logo) {
-    const logo = document.createElement('img');
-    logo.className = 'brand-overlay';
-    logo.src = userBrand.brand_logo;
-    logo.style.cssText = 'position:absolute;bottom:36px;left:50%;transform:translateX(-50%);height:28px;opacity:0.25;pointer-events:none;z-index:1';
-    prev.appendChild(logo);
-  }
-
-  // QR code: top-right
-  if (userBrand.qr_code) {
-    const qr = document.createElement('div');
-    qr.className = 'brand-overlay';
-    qr.style.cssText = 'position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:center;gap:1px;z-index:2';
-    qr.innerHTML = '<img src="' + userBrand.qr_code + '" style="width:32px;height:32px;object-fit:cover;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.1)">' +
-      (userBrand.brand_name ? '<div style="font-size:5px;color:var(--text-light);text-align:center;line-height:1.2;max-width:44px;white-space:pre-line">' + userBrand.brand_name + '</div>' : '');
-    prev.appendChild(qr);
-  }
-}
-
-function _compressImage(file, maxBytes) {
-  return new Promise(resolve => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      if (file.size <= maxBytes) { resolve(reader.result); return; }
-      // Compress via canvas
-      const img = new Image();
-      img.onload = () => {
-        const canvas = document.createElement('canvas');
-        let w = img.width, h = img.height;
-        // Scale down if very large
-        const maxDim = 1200;
-        if (w > maxDim || h > maxDim) {
-          const ratio = Math.min(maxDim / w, maxDim / h);
-          w = Math.round(w * ratio);
-          h = Math.round(h * ratio);
-        }
-        canvas.width = w; canvas.height = h;
-        canvas.getContext('2d').drawImage(img, 0, 0, w, h);
-        let quality = 0.8;
-        let result = canvas.toDataURL('image/jpeg', quality);
-        // Reduce quality until under limit
-        while (result.length > maxBytes * 1.37 && quality > 0.1) {
-          quality -= 0.1;
-          result = canvas.toDataURL('image/jpeg', quality);
-        }
-        _showToast('图片已自动压缩');
-        resolve(result);
-      };
-      img.src = reader.result;
-    };
-    reader.readAsDataURL(file);
-  });
-}
-
-function uploadBrandImage(field, input, maxSize) {
-  const file = input.files[0];
-  if (!file) return;
-  const limit = maxSize || 500000;
-  _compressImage(file, limit).then(dataUrl => {
-    userBrand[field] = dataUrl;
-    renderBrandUI();
-    _autoSaveBrand();
-  });
-}
-
-function clearBrandImage(field) {
-  userBrand[field] = null;
-  renderBrandUI();
-  _autoSaveBrand();
-}
-
-function _setBrandAlign(align) {
-  userBrand.brand_align = align;
-  document.querySelectorAll('.brand-align-btn').forEach(b => {
-    b.classList.toggle('btn-primary', b.textContent.includes(align === 'left' ? '靠左' : align === 'right' ? '靠右' : '居中'));
-    b.classList.toggle('btn-outline', !b.textContent.includes(align === 'left' ? '靠左' : align === 'right' ? '靠右' : '居中'));
-  });
-  _updateBrandPreview();
-  _autoSaveBrand();
-}
-
-function _autoSaveBrand() {
-  userBrand.brand_name = document.getElementById('brandNameInput')?.value || userBrand.brand_name || '';
-  _apiFetch('/api/brand', { method: 'PUT', body: JSON.stringify(userBrand) })
-    .then(res => { if (res.ok && !window._writeQueued) _showToast('✅ 已自动保存'); })
-    .catch(() => _showToast('自动保存失败'));
-}
-
-function _buildBrandHtml() {
-  let bh = '';
-  const align = userBrand.brand_align || 'center';
-  // Background: full cover, low opacity
-  if (userBrand.brand_bg) {
-    bh += '<div style="position:absolute;inset:0;width:100%;height:100%;background:url(\'' + userBrand.brand_bg + '\') center/cover no-repeat;opacity:0.12;pointer-events:none;z-index:0"></div>';
-  }
-  // Logo: bottom center watermark
-  if (userBrand.brand_logo) {
-    bh += '<img src="' + userBrand.brand_logo + '" style="position:absolute;bottom:60px;left:50%;transform:translateX(-50%);height:60px;opacity:0.2;pointer-events:none;z-index:1">';
-  }
-  // QR: top-right corner
-  if (userBrand.qr_code) {
-    bh += '<div style="position:absolute;top:36px;right:24px;display:flex;flex-direction:column;align-items:center;gap:3px;z-index:2">';
-    bh += '<img src="' + userBrand.qr_code + '" style="width:54px;height:54px;object-fit:cover;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.1)">';
-    if (userBrand.brand_name) bh += '<div style="font-size:7px;color:var(--text-light);text-align:' + align + ';line-height:1.3;max-width:68px;white-space:pre-line">' + userBrand.brand_name + '</div>';
-    bh += '</div>';
-  }
-  return bh;
-}
-
-async function saveBrand() {
-  userBrand.brand_name = document.getElementById('brandNameInput')?.value || '';
-  try {
-    const res = await _apiFetch('/api/brand', { method: 'PUT', body: JSON.stringify(userBrand) });
-    if (!res.ok) { alert('保存失败：' + await res.text()); return; }
-    if (!window._writeQueued) {
-      document.getElementById('brandSaveResult').innerHTML = '<span style="color:var(--sage-dark)">✅ 已保存</span>';
-      setTimeout(() => { const el = document.getElementById('brandSaveResult'); if (el) el.innerHTML = ''; }, 2000);
-    }
-  } catch(e) { alert('保存失败'); }
-}
-
-// ── BATCH TAG ──────────────────────────────────────────
-async function batchAddTag() {
-  if (selectedRecipes.size === 0) { alert('请先勾选配方'); return; }
-  // Collect current tags from all selected
-  const allSelected = [];
-  for (const idx of selectedRecipes) {
-    if (typeof idx === 'string' && idx.startsWith('d')) {
-      const did = parseInt(idx.slice(1));
-      const d = userDiary.find(x => x.id === did);
-      if (d) allSelected.push({ type: 'diary', id: did, obj: d });
-    } else {
-      const r = recipes[idx];
-      if (r) allSelected.push({ type: 'recipe', idx, obj: r });
-    }
-  }
-  const commonTags = allSelected.length > 0 ? (allSelected[0].obj.tags || []).filter(t => allSelected.every(s => (s.obj.tags || []).includes(t))) : [];
-
-  _openTagPicker('已选 ' + allSelected.length + ' 个配方', commonTags, function(tags) {
-    let count = 0;
-    for (const s of allSelected) {
-      const oldTags = s.obj.tags || [];
-      const merged = [...new Set([...oldTags, ...tags])];
-      if (merged.length !== oldTags.length) {
-        s.obj.tags = merged;
-        if (s.type === 'recipe') { s.obj._dirty = true; count++; }
-        else { _apiFetch('/api/diary/' + s.id, { method: 'PUT', body: JSON.stringify({ tags: merged }) }).catch(() => {}); count++; }
-      }
-    }
-    tags.forEach(t => { if (!allTags.includes(t)) allTags.push(t); });
-    _apiSaveRecipes();
-    saveTags();
-    _showToast('✅ 已为 ' + count + ' 条配方添加标签');
-  });
-}
-
-// ── CATEGORY MODULES ───────────────────────────────────
-let _catIdx = 0;
-let _catCount = 0;
-
-async function renderCategories() {
-  const wrap = document.getElementById('categoryWrap');
-  const track = document.getElementById('categoryTrack');
-  const dots = document.getElementById('categoryDots');
-  try {
-    const res = await _apiFetch('/api/categories');
-    const cats = await res.json();
-    if (!cats.length) { wrap.style.display = 'none'; dots.style.display = 'none'; return; }
-    _catCount = cats.length;
-    _catIdx = 0;
-    wrap.style.display = '';
-    dots.style.display = '';
-
-    track.innerHTML = cats.map(c => {
-      const bg = c.bg_image
-        ? `background-image:url('${c.bg_image}')`
-        : `background:linear-gradient(135deg,${c.color_from},${c.color_to})`;
-      return `<div class="cat-card" style="${bg}" onclick="filterByCategory('${c.tag_name.replace(/'/g, "\\'")}','${c.name.replace(/'/g, "\\'")}')">
-        <div class="cat-inner">
-          <div class="cat-icon">${c.icon}</div>
-          <div class="cat-name">${c.name}</div>
-          ${c.subtitle ? '<div class="cat-sub">' + c.subtitle + '</div>' : ''}
-        </div>
-      </div>`;
-    }).join('');
-
-    dots.innerHTML = cats.map((_, i) =>
-      `<div class="cat-dot${i === 0 ? ' active' : ''}" onclick="goToCategory(${i})"></div>`
-    ).join('');
-
-    // Touch swipe
-    let startX = 0;
-    wrap.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, {passive:true});
-    wrap.addEventListener('touchend', e => {
-      const diff = startX - e.changedTouches[0].clientX;
-      if (Math.abs(diff) > 40) slideCategory(diff > 0 ? 1 : -1);
-    }, {passive:true});
-
-    // Auto-play
-    // Auto-play with pause on hover/touch
-    let _catPaused = false;
-    wrap.addEventListener('mouseenter', () => _catPaused = true);
-    wrap.addEventListener('mouseleave', () => _catPaused = false);
-    wrap.addEventListener('touchstart', () => _catPaused = true, {passive:true});
-    wrap.addEventListener('touchend', () => { setTimeout(() => _catPaused = false, 3000); }, {passive:true});
-
-    setInterval(() => { if (document.visibilityState === 'visible' && !_catPaused) slideCategory(1); }, 5000);
-  } catch(e) { wrap.style.display = 'none'; dots.style.display = 'none'; }
-}
-
-function slideCategory(dir) {
-  const track = document.getElementById('categoryTrack');
-  const oldIdx = _catIdx;
-  _catIdx = (_catIdx + dir + _catCount) % _catCount;
-
-  // When wrapping around (last→first or first→last), briefly disable transition for seamless feel
-  if (dir > 0 && _catIdx === 0 && oldIdx === _catCount - 1) {
-    // Going forward past last → fade transition instead of slide
-    track.style.transition = 'opacity 0.3s';
-    track.style.opacity = '0';
-    setTimeout(() => {
-      track.style.transition = 'none';
-      track.style.transform = `translateX(0)`;
-      setTimeout(() => {
-        track.style.transition = 'transform 0.4s ease, opacity 0.3s';
-        track.style.opacity = '1';
-      }, 20);
-    }, 300);
-  } else if (dir < 0 && _catIdx === _catCount - 1 && oldIdx === 0) {
-    track.style.transition = 'opacity 0.3s';
-    track.style.opacity = '0';
-    setTimeout(() => {
-      track.style.transition = 'none';
-      track.style.transform = `translateX(-${_catIdx * 100}%)`;
-      setTimeout(() => {
-        track.style.transition = 'transform 0.4s ease, opacity 0.3s';
-        track.style.opacity = '1';
-      }, 20);
-    }, 300);
-  } else {
-    track.style.transition = 'transform 0.4s ease';
-    track.style.transform = `translateX(-${_catIdx * 100}%)`;
-  }
-  document.querySelectorAll('.cat-dot').forEach((d, i) => d.classList.toggle('active', i === _catIdx));
-}
-
-function goToCategory(idx) {
-  const track = document.getElementById('categoryTrack');
-  _catIdx = idx;
-  track.style.transition = 'transform 0.4s ease';
-  track.style.transform = `translateX(-${idx * 100}%)`;
-  document.querySelectorAll('.cat-dot').forEach((d, i) => d.classList.toggle('active', i === idx));
-}
-
-// Related tag mapping for category suggestions
-const _relatedTagMap = {
-  '美容院': ['护肤','美白','淡斑','抗皱','保湿','祛痘','紧致','瘦脸','小v脸','美容','焕肤'],
-  '美发店': ['头疗','头皮','头发','脱发','生发','白发','发膜','头疗','护发'],
-  '艾灸馆': ['疼痛','酸痛','肩颈','腰椎','关节','温经','祛湿','艾灸','理疗','刮痧'],
-  '瑜伽': ['普拉提','瑜伽','拉伸','放松','呼吸','冥想','肌肉','关节','脊柱','骨盆'],
-  '养生馆': ['养生','调理','脾胃','肝胆','肾','排毒','免疫','睡眠','化湿'],
-  '养生': ['养生','调理','脾胃','肝胆','肾','排毒','免疫','睡眠','化湿','精油浴'],
-  '母婴': ['宝宝','儿童','孕妇','哺乳','感冒','发烧','咳嗽','湿疹'],
-  '情绪': ['情绪','焦虑','压力','睡眠','安眠','放松','抑郁','冥想'],
-};
-
-let _activeCategoryTag = null;
-
-function filterByCategory(tag, displayName) {
-  _activeCategoryTag = tag;
-  window._activeCategoryName = displayName || tag;
-  document.getElementById('searchInput').value = '';
-  _hideCategoryCarousel();
-
-  // Hide personal section and public label
-  const ps = document.getElementById('personalSection'); if (ps) ps.style.display = 'none';
-  const pl = document.getElementById('publicLabel'); if (pl) pl.style.display = 'none';
-
-  // Clean up old
-  const oldRel = document.getElementById('categoryRelated'); if (oldRel) oldRel.remove();
-  const oldHdr = document.getElementById('categoryHeader'); if (oldHdr) oldHdr.remove();
-
-  // Find tagged recipes (both public + diary)
-  const exact = recipes.filter(r => (r.tags || []).includes(tag));
-  const diaryExact = userDiary.filter(d => (d.tags || []).includes(tag));
-
-  // Build header
-  const grid = document.getElementById('recipeGrid');
-  const headerHtml = '<div id="categoryHeader" style="margin-bottom:16px">' +
-    '<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px">' +
-      '<button onclick="_exitCategoryView()" style="background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-mid);padding:4px">←</button>' +
-      '<div style="font-family:Noto Serif SC,serif;font-size:22px;font-weight:700;color:var(--text-dark)">' + (window._activeCategoryName || tag) + '</div>' +
-    '</div>' +
-    '<div style="font-size:13px;color:var(--text-light);margin-bottom:4px">🌿 适合' + (window._activeCategoryName || tag) + '的精油配方 (' + (exact.length + diaryExact.length) + ')</div>' +
-  '</div>';
-  grid.insertAdjacentHTML('beforebegin', headerHtml);
-
-  // Render tagged recipes (use original renderGrid to avoid symptom search override)
-  if (exact.length > 0) {
-    _origRenderGrid(exact);
-  } else {
-    grid.innerHTML = '';
-  }
-
-  // Add diary matches if any
-  if (diaryExact.length > 0) {
-    const diaryHtml = diaryExact.map(d => {
-      const ings = (d.ingredients||[]).filter(i=>i.oil!=='椰子油').map(i=>i.oil).join('、');
-      return '<div class="recipe-card" onclick="viewDiaryAsCard('+d.id+')">' +
-        '<div class="recipe-card-name">' + d.name + '</div>' +
-        '<div class="recipe-card-oils">' + ings + '</div>' +
-        '<div style="margin-top:8px"><div class="recipe-card-price">💰 ' + fmtCostWithRetail(d.ingredients || []) + '</div></div></div>';
-    }).join('');
-    grid.insertAdjacentHTML('beforeend', diaryHtml);
-  }
-
-  // Related recipes by keywords
-  const keywords = _relatedTagMap[tag] || [];
-  if (keywords.length > 0) {
-    const exactIds = new Set(exact.map(r => recipes.indexOf(r)));
-    const related = recipes.filter((r, idx) => {
-      if (exactIds.has(idx)) return false;
-      const haystack = (r.name + ' ' + (r.note || '') + ' ' + (r.tags || []).join(' ') + ' ' + r.ingredients.map(i => i.oil).join(' ')).toLowerCase();
-      return keywords.some(k => haystack.includes(k));
-    });
-    if (related.length > 0) {
-      const hasExact = exact.length + diaryExact.length > 0;
-      const relLabel = hasExact ? '💡 类似配方' : '🌿 推荐配方';
-      const relLimit = hasExact ? 12 : 24;
-      const relHtml = '<div id="categoryRelated" style="margin-top:16px;' + (hasExact ? 'border-top:2px solid var(--border);padding-top:12px' : '') + '">' +
-        '<div style="font-size:14px;color:var(--text-mid);margin-bottom:12px">' + relLabel + '</div>' +
-        '<div class="recipe-grid">' + related.slice(0, relLimit).map(r => {
-          const realIdx = recipes.indexOf(r);
-          const oilNames = r.ingredients.filter(i => i.oil !== '椰子油').map(i => i.oil).join('、');
-          return '<div class="recipe-card" onclick="selectRecipe('+realIdx+')">' +
-            '<div class="recipe-card-name">' + r.name + '</div>' +
-            '<div class="recipe-card-oils">' + oilNames + '</div>' +
-            '<div style="margin-top:8px"><div class="recipe-card-price">💰 ' + fmtCostWithRetail(r.ingredients) + '</div></div></div>';
-        }).join('') + '</div></div>';
-      grid.insertAdjacentHTML('afterend', relHtml);
-    }
-  }
-}
-
-function _goToNewRecipes() {
-  window._myRecipesCollapsed = false;
-  window._manageMyCollapsed = false;
-  _saveFoldStates();
-  showSection('manage');
-  renderManage().then(() => {
-    setTimeout(() => {
-      const firstItem = document.querySelector('#manageList .manage-item');
-      if (firstItem) firstItem.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }, 300);
-  });
-}
-
-function _resetSearchHome() {
-  _activeCategoryTag = null;
-  document.getElementById('searchInput').value = '';
-  const oldHdr = document.getElementById('categoryHeader'); if (oldHdr) oldHdr.remove();
-  const oldRel = document.getElementById('categoryRelated'); if (oldRel) oldRel.remove();
-  const oldFuzzy = document.getElementById('fuzzyResults'); if (oldFuzzy) oldFuzzy.remove();
-  const oldDiary = document.getElementById('diarySearchResults'); if (oldDiary) oldDiary.remove();
-  const ps = document.getElementById('personalSection'); if (ps) ps.style.display = '';
-  const pl = document.getElementById('publicLabel'); if (pl) pl.style.display = '';
-  showSection('search');
-  _showCategoryCarousel();
-  renderGrid(recipes);
-  renderPersonalSection();
-}
-
-function _exitCategoryView() {
-  _activeCategoryTag = null;
-  const oldHdr = document.getElementById('categoryHeader'); if (oldHdr) oldHdr.remove();
-  const oldRel = document.getElementById('categoryRelated'); if (oldRel) oldRel.remove();
-  const ps = document.getElementById('personalSection'); if (ps) ps.style.display = '';
-  const pl = document.getElementById('publicLabel'); if (pl) pl.style.display = '';
-  _showCategoryCarousel();
-  filterRecipes();
-}
-
-function _hideCategoryCarousel() {
-  const w = document.getElementById('categoryWrap');
-  const d = document.getElementById('categoryDots');
-  if (w) w.style.display = 'none';
-  if (d) d.style.display = 'none';
-}
-
-function _showCategoryCarousel() {
-  const w = document.getElementById('categoryWrap');
-  const d = document.getElementById('categoryDots');
-  if (w && _catCount > 0) w.style.display = '';
-  if (d && _catCount > 0) d.style.display = '';
-}
-
-// ── INVENTORY ──────────────────────────────────────────
-let userInventory = [];
-
-async function loadInventory() {
-  if (!currentUser.id) return;
-  try {
-    const res = await _apiFetch('/api/inventory');
-    userInventory = await res.json();
-  } catch(e) { userInventory = []; }
-}
-
-function renderInventoryOilPicker() {
-  const q = (document.getElementById('invSearchInput')?.value || '').trim().toLowerCase();
-  const picker = document.getElementById('invOilPicker');
-  const oils = Object.keys(OILS).filter(name => !q || name.toLowerCase().includes(q)).sort((a,b) => a.localeCompare(b,'zh'));
-  picker.innerHTML = oils.map(name => {
-    const has = userInventory.includes(name);
-    return `<div onclick="toggleInventory('${name.replace(/'/g, "\\'")}')" style="
-      padding:6px 12px;border-radius:20px;font-size:13px;cursor:pointer;
-      background:${has ? 'var(--sage)' : 'white'};color:${has ? 'white' : 'var(--text-mid)'};
-      border:1.5px solid ${has ? 'var(--sage)' : 'var(--border)'};transition:all 0.15s;
-    ">${name}</div>`;
-  }).join('');
-}
-
-async function toggleInventory(name) {
-  try {
-    if (userInventory.includes(name)) {
-      await _apiFetch('/api/inventory/' + encodeURIComponent(name), {method:'DELETE'});
-      userInventory = userInventory.filter(n => n !== name);
-    } else {
-      await _apiFetch('/api/inventory', {method:'POST', body: JSON.stringify({oil_name: name})});
-      userInventory.push(name);
-    }
-    renderInventoryUI();
-  } catch(e) { _showToast('操作失败，请重试'); }
-}
-
-function renderInventoryUI() {
-  renderInventoryOilPicker();
-  const list = document.getElementById('invList');
-  document.getElementById('invCount').textContent = userInventory.length ? `（${userInventory.length} 种）` : '';
-  if (!userInventory.length) {
-    list.innerHTML = '<span style="color:var(--text-light);font-size:13px">还没有添加精油，在上方搜索并点击添加</span>';
-    document.getElementById('invRecipes').innerHTML = '';
-    return;
-  }
-  list.innerHTML = userInventory.sort((a,b) => a.localeCompare(b,'zh')).map(name =>
-    `<div style="padding:6px 14px;border-radius:20px;font-size:13px;background:var(--sage);color:white;cursor:pointer;display:flex;align-items:center;gap:4px"
-      onclick="showRecipesForOil('${name.replace(/'/g, "\\'")}')">${name}
-      <span onclick="event.stopPropagation();toggleInventory('${name.replace(/'/g, "\\'")}')" style="opacity:0.7;cursor:pointer;margin-left:2px">×</span>
-    </div>`
-  ).join('');
-  loadInventoryRecipes();
-}
-
-async function loadInventoryRecipes() {
-  const container = document.getElementById('invRecipes');
-  try {
-    const res = await _apiFetch('/api/inventory/recipes');
-    const data = await res.json();
-    if (!data.length) { container.innerHTML = '<div class="empty-state"><div class="empty-state-text">暂无匹配配方</div></div>'; return; }
-    container.innerHTML = data.slice(0, 50).map(r => {
-      const matchPct = Math.round(r.inventory_match / r.inventory_total * 100);
-      const missing = r.inventory_missing || [];
-      return `<div class="manage-item" style="cursor:pointer" onclick="showSection('search');document.getElementById('searchInput').value='${r.name.replace(/'/g,"\\'")}';filterRecipes()">
-        <div class="manage-item-left">
-          <div class="manage-item-name">${r.name}
-            <span style="font-size:12px;padding:2px 8px;border-radius:10px;margin-left:6px;
-              background:${matchPct===100?'var(--sage)':'var(--gold-light)'};color:${matchPct===100?'white':'var(--brown)'}">
-              ${r.inventory_match}/${r.inventory_total} 匹配${matchPct===100?' ✓':''}
-            </span>
-          </div>
-          ${missing.length ? '<div style="font-size:12px;color:var(--text-light);margin-top:4px">缺少：' + missing.join('、') + '</div>' : ''}
-        </div>
-      </div>`;
-    }).join('');
-  } catch(e) { container.innerHTML = '<div style="color:red">加载失败</div>'; }
-}
-
-function showRecipesForOil(name) {
-  showSection('search');
-  document.getElementById('searchInput').value = name;
-  filterRecipes();
-}
-
-// ── SEARCH LOGGING ─────────────────────────────────────
-let _searchLogTimer = null;
-let _recentSearchLogs = {}; // { query: timestamp } for dedup
-function logSearchQuery(query, matchedCount) {
-  // Only called explicitly by search button / Enter, not on every keystroke
-  const q = query.trim();
-  if (!q) return;
-  // Dedup: skip if same query was logged in the last 5 minutes
-  const now = Date.now();
-  const key = q.toLowerCase() + '|' + matchedCount;
-  if (_recentSearchLogs[key] && (now - _recentSearchLogs[key]) < 300000) return;
-  _recentSearchLogs[key] = now;
-  _apiFetch('/api/search-log', {method:'POST', body: JSON.stringify({query: q, matched_count: matchedCount})}).catch(()=>{});
-}
-
-function confirmSearch() {
-  const q = document.getElementById('searchInput').value.trim();
-  filterRecipes();
-  if (q) {
-    const matched = document.querySelectorAll('#recipeGrid .recipe-card').length;
-    logSearchQuery(q, matched);
-  }
-}
-
-// ── NOTIFICATIONS ──────────────────────────────────────
-let _notifUnread = 0;
-async function loadNotifications() {
-  if (!currentUser.id) return;
-  try {
-    const res = await _apiFetch('/api/notifications');
-    const data = await res.json();
-    _notifUnread = data.filter(n => !n.is_read).length;
-    // Admin/senior_editor: show notification tab
-    const tab = document.getElementById('notifTab');
-    if (tab && (currentUser.role === 'admin' || currentUser.role === 'senior_editor')) {
-      tab.textContent = _notifUnread > 0 ? '🔔 通知 (' + _notifUnread + ')' : '🔔 通知';
-      tab.style.display = '';
-    }
-    // Update header badge for ALL users
-    const nameEl = document.getElementById('headerUserName');
-    if (nameEl) {
-      const badge = document.getElementById('notifBadge');
-      if (_notifUnread > 0) {
-        if (badge) badge.textContent = _notifUnread;
-        else {
-          const b = document.createElement('span');
-          b.id = 'notifBadge';
-          b.style.cssText = 'background:#c0392b;color:white;font-size:10px;padding:1px 5px;border-radius:8px;margin-left:4px';
-          b.textContent = _notifUnread;
-          nameEl.appendChild(b);
-        }
-      } else if (badge) {
-        badge.remove();
-      }
-    }
-  } catch(e) {}
-}
-
-async function renderNotifications() {
-  const list = document.getElementById('notifList');
-  try {
-    const res = await _apiFetch('/api/notifications');
-    const data = await res.json();
-    if (!data.length) { list.innerHTML = '<div class="empty-state"><div class="empty-state-text">暂无通知</div></div>'; return; }
-    const unread = data.filter(n => !n.is_read);
-    const read = data.filter(n => n.is_read);
-    const renderItem = n => {
-      const isRead = n.is_read;
-      const isBugTest = n.title && (n.title.includes('待测试') || n.title.includes('已修复，请测试'));
-      let buttons = '';
-      const isBugRelated = n.title && (n.title.includes('Bug') || n.title.includes('bug'));
-      const isBizApply = n.title && (n.title.includes('商业认证申请') || n.title.includes('商业认证未通过'));
-      const bugIdM = (n.body||'').match(/\[bug_id:(\d+)\]/);
-      const bugLink = bugIdM ? '<button class="btn btn-outline btn-sm" onclick="_apiFetch(\'/api/notifications/'+n.id+'/read\',{method:\'POST\',body:\'{}\'});_jumpToBug('+bugIdM[1]+')" style="font-size:11px;margin-left:4px">跳转 Bug</button>' : '';
-      const bizLink = isBizApply ? (currentUser.role === 'admin'
-        ? '<button class="btn btn-outline btn-sm" onclick="_apiFetch(\'/api/notifications/'+n.id+'/read\',{method:\'POST\',body:\'{}\'});showSection(\'users\');setTimeout(loadNotifications,500)" style="font-size:11px;margin-left:4px">去审批</button>'
-        : '<button class="btn btn-outline btn-sm" onclick="_apiFetch(\'/api/notifications/'+n.id+'/read\',{method:\'POST\',body:\'{}\'});_prevShowSection2(\'mydiary\');showDiaryTab(\'account\');setTimeout(function(){var el=document.getElementById(\'businessApplyCard\');if(el)el.scrollIntoView({behavior:\'smooth\',block:\'center\'})},300);setTimeout(loadNotifications,500)" style="font-size:11px;margin-left:4px">再次申请</button>'
-      ) : '';
-      if (!isRead) {
-        if (isBugTest) {
-          var bid = bugIdM ? bugIdM[1] : '0';
-          buttons = '<button class="btn btn-primary btn-sm" onclick="confirmBugFixedTab('+n.id+',\''+bid+'\')">✅ 已测试</button>';
-        } else {
-          buttons = '<button class="btn btn-outline btn-sm" onclick="markNotifRead('+n.id+',this)">已读</button>';
-          if (isBugRelated) buttons += bugLink;
-          if (isBizApply) buttons += bizLink;
-        }
-      } else {
-        buttons = '<button class="btn btn-outline btn-sm" onclick="markNotifUnreadTab('+n.id+')" style="font-size:10px;color:var(--text-light)">标为未读</button>';
-        if (isBugRelated && bugIdM) buttons += bugLink;
-      }
-      return `<div class="manage-item" style="padding:14px 18px;${isRead?'opacity:0.5;background:#fafafa':'border-left:3px solid var(--sage)'}">
-        <div class="manage-item-left">
-          <div class="manage-item-name">${n.title}</div>
-          <div style="font-size:13px;color:var(--text-mid);margin-top:4px">${(n.body || '').replace(/\n?\[bug_id:\d+\]/g,'')}</div>
-          <div style="font-size:11px;color:var(--text-light);margin-top:4px">${n.created_at}</div>
-        </div>
-        ${buttons}
-      </div>`;
-    };
-    let html = unread.map(renderItem).join('');
-    if (unread.length > 0 && read.length > 0) {
-      html += '<div style="padding:8px 18px;font-size:12px;color:var(--text-light);border-top:2px solid var(--border)">── 已读 ──</div>';
-    }
-    html += read.map(renderItem).join('');
-    list.innerHTML = html;
-  } catch(e) { list.innerHTML = '<div style="color:red">加载失败</div>'; }
-}
-
-async function confirmBugFixedTab(notifId, bugIdStr) {
-  const bugId = bugIdStr && bugIdStr !== '0' ? bugIdStr : null;
-  const note = await _prompt('测试备注（通过/未通过/说明）');
-  if (note === null) return;
-  try {
-    if (bugId) {
-      await _apiFetch('/api/bug-reports/' + bugId, { method: 'PUT', body: JSON.stringify({ status: 3, note: note || '' }) });
-    } else {
-      const res = await _apiFetch('/api/bug-reports');
-      const bugs = await res.json();
-      const testingBugs = bugs.filter(b => b.is_resolved === 1);
-      if (testingBugs.length > 0) {
-        await _apiFetch('/api/bug-reports/' + testingBugs[0].id, { method: 'PUT', body: JSON.stringify({ status: 3, note: note || '' }) });
-      }
-    }
-    await _apiFetch('/api/notifications/' + notifId + '/read', { method: 'POST', body: JSON.stringify({ force: true }) });
-    _showToast('✅ 已提交测试反馈');
-    renderNotifications();
-    loadNotifications();
-  } catch(e) { _showToast('操作失败'); }
-}
-
-async function markNotifUnreadTab(id) {
-  await _apiFetch('/api/notifications/' + id + '/unread', { method: 'POST', body: '{}' });
-  renderNotifications();
-  loadNotifications();
-}
-
-async function markNotifRead(id, btn) {
-  await _apiFetch('/api/notifications/' + id + '/read', {method:'POST', body:'{}'});
-  renderNotifications();
-  loadNotifications();
-}
-
-async function _checkBugTestPending() {
-  try {
-    const res = await _apiFetch('/api/notifications');
-    const data = await res.json();
-    return data.some(n => !n.is_read && n.title && n.title.includes('待测试'));
-  } catch(e) { return false; }
-}
-
-async function markAllNotifRead() {
-  if (await _checkBugTestPending()) { alert('还有待测试的 Bug 通知，请先完成测试再全部已读，感谢配合！'); return; }
-  await _apiFetch('/api/notifications/read-all', {method:'POST', body:'{}'});
-  renderNotifications();
-  loadNotifications();
-}
-
-async function markAllNotifReadPopup() {
-  if (await _checkBugTestPending()) { alert('还有待测试的 Bug 通知，请先完成测试再全部已读，感谢配合！'); return; }
-  await _apiFetch('/api/notifications/read-all', {method:'POST', body:'{}'});
-  loadNotifications();
-  const overlay = document.querySelector('[style*="z-index:300"], [style*="z-index: 300"]');
-  if (overlay) { overlay.remove(); showMyNotifications(); }
-}
-
-async function triggerWeeklyReview() {
-  try {
-    const res = await _apiFetch('/api/cron/weekly-review', {method:'POST', body:'{}'});
-    const data = await res.json();
-    alert(`周报已生成：${data.pending_recipes} 条待审核配方，${data.unmatched_queries} 个未匹配搜索`);
-    renderNotifications();
-    loadNotifications();
-  } catch(e) { alert('生成失败'); }
-}
-
-// ── PATCH: add search logging to filterRecipes ─────────
-function _matchesQuery(r, terms) {
-  return terms.some(t =>
-    r.name.toLowerCase().includes(t) ||
-    r.ingredients.some(i => i.oil.toLowerCase().includes(t) || (oilEn(i.oil)||'').toLowerCase().includes(t)) ||
-    (r.tags || []).some(tag => tag.toLowerCase().includes(t))
-  );
-}
-
-const _origFilterRecipes = filterRecipes;
-filterRecipes = function() {
-  const q = document.getElementById('searchInput').value.trim().toLowerCase();
-  const grid = document.getElementById('recipeGrid');
-
-  // Clean up previous fuzzy results
-  const oldFuzzy = document.getElementById('fuzzyResults'); if (oldFuzzy) oldFuzzy.remove();
-
-  if (_favFilterActive && userFavorites.length > 0) {
-    let filtered = recipes.filter(r => r._id && userFavorites.includes(r._id));
-    if (q) { const terms = getExpandedQuery(q); filtered = filtered.filter(r => _matchesQuery(r, terms)); }
-    renderGrid(filtered);
-  } else if (_favFilterActive) {
-    renderGrid([]);
-  } else if (q) {
-    const terms = getExpandedQuery(q);
-
-    if (_activeCategoryTag) {
-      // Search within category first, then show all matches below
-      const catRecipes = recipes.filter(r => (r.tags || []).includes(_activeCategoryTag));
-      const catMatch = catRecipes.filter(r => _matchesQuery(r, terms));
-      const catMatchIds = new Set(catMatch.map(r => recipes.indexOf(r)));
-      const allMatch = recipes.filter(r => _matchesQuery(r, terms) && !catMatchIds.has(recipes.indexOf(r)));
-
-      if (catMatch.length > 0) {
-        renderGrid(catMatch);
-      } else {
-        grid.innerHTML = '<div style="text-align:center;padding:20px 0;grid-column:1/-1"><div style="font-size:28px;margin-bottom:8px">🔍</div><div style="font-size:15px;color:var(--text-mid)">在「' + _activeCategoryTag + '」中没有找到「' + q + '」</div></div>';
-      }
-      if (allMatch.length > 0) {
-        const allHtml = '<div id="fuzzyResults" style="padding:12px 0;margin-top:16px;border-top:2px solid var(--border)">' +
-          '<div style="font-size:14px;color:var(--text-mid);margin-bottom:12px">📚 全部配方库结果</div>' +
-          '<div class="recipe-grid">' + allMatch.map(r => {
-            const realIdx = recipes.indexOf(r);
-            const oilNames = r.ingredients.filter(i=>i.oil!=='椰子油').map(i=>i.oil).join('、');
-            return '<div class="recipe-card" onclick="selectRecipe('+realIdx+')">' +
-              '<div class="recipe-card-name">' + r.name + '</div>' +
-              '<div class="recipe-card-oils">' + oilNames + '</div>' +
-              '<div style="margin-top:8px"><div class="recipe-card-price">💰 ' + fmtCostWithRetail(r.ingredients) + '</div></div></div>';
-          }).join('') + '</div>' +
-          '<div style="text-align:center;padding:16px 0"><div style="font-size:13px;color:var(--text-light);margin-bottom:8px">没有找到想要的？</div>' +
-            '<button class="btn btn-outline btn-sm" onclick="reportMissingRecipe(\'' + q.replace(/'/g,"\\'") + '\')">📢 告诉我们，尽快添加</button></div>' +
-        '</div>';
-        grid.insertAdjacentHTML('afterend', allHtml);
-      } else if (catMatch.length === 0) {
-        // No matches anywhere — show report
-        grid.innerHTML += '<div style="text-align:center;padding:16px 0;grid-column:1/-1"><div style="font-size:13px;color:var(--text-light);margin-bottom:8px">没有找到想要的？</div>' +
-          '<button class="btn btn-outline btn-sm" onclick="reportMissingRecipe(\'' + q.replace(/'/g,"\\'") + '\')">📢 告诉我们，尽快添加</button></div>';
-      }
-    } else {
-      // Normal search
-      const exact = recipes.filter(r => _matchesQuery(r, [q]));
-      const fuzzy = terms.length > 1 ? recipes.filter(r => !_matchesQuery(r, [q]) && _matchesQuery(r, terms)) : [];
-
-      if (exact.length > 0 && fuzzy.length > 0) {
-        renderGrid(exact);
-        const fuzzyHtml = '<div style="padding:12px 0;margin-top:16px;border-top:2px solid var(--border)">' +
-          '<div style="font-size:14px;color:var(--text-mid);margin-bottom:12px">💡 相关配方</div>' +
-          '<div class="recipe-grid">' + fuzzy.map(r => {
-            const realIdx = recipes.indexOf(r);
-            const oilNames = r.ingredients.filter(i=>i.oil!=='椰子油').map(i=>i.oil).join('、');
-            return '<div class="recipe-card" onclick="selectRecipe('+realIdx+')">' +
-              '<div class="recipe-card-name">' + r.name + '</div>' +
-              '<div class="recipe-card-oils">' + oilNames + '</div>' +
-              '<div style="margin-top:8px"><div class="recipe-card-price">💰 ' + fmtCostWithRetail(r.ingredients) + '</div></div></div>';
-          }).join('') + '</div></div>';
-        grid.insertAdjacentHTML('afterend', '<div id="fuzzyResults">' + fuzzyHtml + '</div>');
-      } else if (exact.length > 0) {
-        renderGrid(exact);
-      } else if (fuzzy.length > 0) {
-        renderGrid(fuzzy);
-      } else {
-        renderGrid([]);
-      }
-    }
-  } else {
-    renderGrid(recipes);
-  }
-
-  // Clean up old fuzzy/diary results
-  if (!q) { const old = document.getElementById('fuzzyResults'); if (old) old.remove(); }
-  const oldDiary = document.getElementById('diarySearchResults'); if (oldDiary) oldDiary.remove();
-  const oldCatRel = document.getElementById('categoryRelated'); if (oldCatRel) oldCatRel.remove();
-  if (!_activeCategoryTag) {
-    const oldCatHdr = document.getElementById('categoryHeader'); if (oldCatHdr) { oldCatHdr.remove(); const ps=document.getElementById('personalSection'); if(ps) ps.style.display=''; const pl=document.getElementById('publicLabel'); if(pl) pl.style.display=''; }
-  }
-
-  // Show matching diary recipes when searching
-  if (q && currentUser.id && userDiary.length > 0) {
-    const terms = getExpandedQuery(q);
-    const diaryMatches = userDiary.filter(d => {
-      const name = d.name.toLowerCase();
-      const oils = (d.ingredients || []).map(i => i.oil.toLowerCase()).join(' ');
-      const haystack = name + ' ' + oils + ' ' + (d.note || '').toLowerCase();
-      return terms.some(t => haystack.includes(t));
-    });
-    if (diaryMatches.length > 0) {
-      const diaryHtml = '<div id="diarySearchResults" style="margin-top:16px;border-top:2px solid var(--border);padding-top:12px">' +
-        '<div style="font-size:14px;color:var(--text-mid);margin-bottom:12px">📔 我的配方 (' + diaryMatches.length + ')</div>' +
-        '<div class="recipe-grid">' + diaryMatches.map(d => {
-          const ings = (d.ingredients||[]).filter(i=>i.oil!=='椰子油').map(i=>i.oil).join('、');
-          return '<div class="recipe-card" onclick="viewDiaryAsCard('+d.id+')">' +
-            '<div class="recipe-card-name">' + d.name + '</div>' +
-            '<div class="recipe-card-oils">' + ings + '</div>' +
-            '<div style="margin-top:8px"><div class="recipe-card-price">💰 ' + fmtCostWithRetail(d.ingredients || []) + '</div></div></div>';
-        }).join('') + '</div></div>';
-      // Insert after fuzzy results if present, or after grid
-      const fuzzyEl = document.getElementById('fuzzyResults');
-      (fuzzyEl || grid).insertAdjacentHTML('afterend', diaryHtml);
-    }
-  }
-
-  if (q || _favFilterActive) _hideCategoryCarousel(); else _showCategoryCarousel();
-  renderPersonalSection();
-};
-
-// ── PATCH: showSection to handle new sections ──────────
-const _prevShowSection2 = showSection;
-showSection = function(name) {
-  _prevShowSection2(name);
-  if (name === 'inventory') { renderInventoryUI(); }
-  if (name === 'notif') { renderNotifications(); }
-  if (name === 'bugs') { renderBugList(); }
-  if (name === 'mydiary') { showDiaryTab('brand'); }
-  if (name === 'projects') { renderProjectList(); }
-  // Remember current section for page refresh
-  try { sessionStorage.setItem('oil_current_section', name); } catch(e) {}
-};
-
-// ── PATCH: _applyPermissions to handle logged-in ───────
-const _origApplyPerms = _applyPermissions;
-_applyPermissions = function() {
-  _origApplyPerms();
-  // Business features
-  document.querySelectorAll('.requires-business').forEach(el => {
-    el.style.display = (currentUser.role === 'admin' || currentUser.role === 'senior_editor' || currentUser.business_verified) ? '' : 'none';
-  });
-};
-
-function _requireLogin() {
-  if (currentUser.id) return true;
-  showLoginModal();
-  return false;
-}
-
-// ── LOGIN / USER MENU / IMPERSONATE ─────────────────────
-function showLoginModal() {
-  const overlay = document.createElement('div');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:20px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-  overlay.innerHTML = `
-    <div style="background:white;border-radius:16px;padding:28px;max-width:320px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,0.2)" onclick="event.stopPropagation()">
-      <div style="text-align:center;margin-bottom:20px">
-        <div style="font-size:32px;margin-bottom:8px">🌿</div>
-        <div style="font-family:'Noto Serif SC',serif;font-size:18px;font-weight:600" id="authTitle">登录</div>
-      </div>
-      <div style="margin-bottom:12px">
-        <input type="text" id="loginUsername" class="form-control" placeholder="用户名" style="width:100%;padding:10px 14px;font-size:14px">
-      </div>
-      <div id="regDisplayNameRow" style="margin-bottom:12px;display:none">
-        <input type="text" id="regDisplayName" class="form-control" placeholder="昵称（可选）" style="width:100%;padding:10px 14px;font-size:14px">
-      </div>
-      <div style="margin-bottom:16px">
-        <input type="password" id="loginPassword" class="form-control" placeholder="密码" style="width:100%;padding:10px 14px;font-size:14px" onkeydown="if(event.key==='Enter'){document.getElementById('regDisplayNameRow').style.display==='none'?doLogin():doRegister()}">
-      </div>
-      <button class="btn btn-primary" id="authSubmitBtn" onclick="doLogin()" style="width:100%;padding:10px;font-size:15px">登录</button>
-      <div style="text-align:center;margin-top:12px">
-        <span id="authToggle" style="font-size:13px;color:var(--sage-dark);cursor:pointer" onclick="toggleAuthMode()">没有账号？注册</span>
-      </div>
-      <div id="loginError" style="margin-top:10px;text-align:center;font-size:13px;color:#c0392b"></div>
-    </div>`;
-  document.body.appendChild(overlay);
-  setTimeout(() => document.getElementById('loginUsername')?.focus(), 100);
-}
-
-let _authIsRegister = false;
-function toggleAuthMode() {
-  _authIsRegister = !_authIsRegister;
-  document.getElementById('authTitle').textContent = _authIsRegister ? '注册' : '登录';
-  document.getElementById('regDisplayNameRow').style.display = _authIsRegister ? '' : 'none';
-  document.getElementById('authSubmitBtn').textContent = _authIsRegister ? '注册' : '登录';
-  document.getElementById('authSubmitBtn').onclick = _authIsRegister ? doRegister : doLogin;
-  document.getElementById('authToggle').textContent = _authIsRegister ? '已有账号？登录' : '没有账号？注册';
-  document.getElementById('loginError').textContent = '';
-}
-
-async function doRegister() {
-  const username = document.getElementById('loginUsername')?.value.trim();
-  const password = document.getElementById('loginPassword')?.value.trim();
-  const displayName = document.getElementById('regDisplayName')?.value.trim();
-  if (!username || username.length < 2) { document.getElementById('loginError').textContent = '用户名至少2个字符'; return; }
-  if (!password || password.length < 4) { document.getElementById('loginError').textContent = '密码至少4位'; return; }
-  try {
-    const res = await fetch('/api/register', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ username, password, display_name: displayName }) });
-    if (!res.ok) {
-      const err = await res.json();
-      document.getElementById('loginError').textContent = err.detail || '注册失败';
-      return;
-    }
-    const data = await res.json();
-    localStorage.setItem('oil_auth_token', data.token);
-    _authToken = data.token;
-    document.querySelector('[style*="z-index:300"]')?.remove();
-    location.reload();
-  } catch(e) { document.getElementById('loginError').textContent = '网络错误'; }
-}
-
-async function doLogin() {
-  const username = document.getElementById('loginUsername')?.value.trim();
-  const password = document.getElementById('loginPassword')?.value.trim();
-  if (!username || !password) { document.getElementById('loginError').textContent = '请输入用户名和密码'; return; }
-  try {
-    const res = await fetch('/api/login', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ username, password }) });
-    if (!res.ok) {
-      const err = await res.json();
-      document.getElementById('loginError').textContent = err.detail || '登录失败';
-      return;
-    }
-    const data = await res.json();
-    localStorage.setItem('oil_auth_token', data.token);
-    _authToken = data.token;
-    document.querySelector('[style*="z-index:300"]')?.remove();
-    location.reload();
-  } catch(e) { document.getElementById('loginError').textContent = '网络错误'; }
-}
-
-function showUserMenu() {
-  const hasBackup = !!localStorage.getItem('oil_admin_token_backup');
-  if (currentUser.username === 'anonymous' && !hasBackup) {
-    // Show mini menu with login + bug report
-    const existing = document.getElementById('userMenuPopup');
-    if (existing) { existing.remove(); return; }
-    const el = document.getElementById('headerUserName');
-    const rect = el.getBoundingClientRect();
-    const popup = document.createElement('div');
-    popup.id = 'userMenuPopup';
-    popup.style.cssText = 'position:fixed;top:' + (rect.bottom + 8) + 'px;right:16px;background:white;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:100;min-width:180px;padding:8px 0';
-    popup.innerHTML =
-      '<div onclick="document.getElementById(\'userMenuPopup\')?.remove();showLoginModal()" style="padding:10px 16px;cursor:pointer;font-size:14px">🔑 登录 / 注册</div>' +
-      '<div onclick="document.getElementById(\'userMenuPopup\')?.remove();showBugReport()" style="padding:10px 16px;cursor:pointer;font-size:14px;border-top:1px solid #eee">🐛 反馈问题</div>';
-    document.body.appendChild(popup);
-    setTimeout(() => { document.addEventListener('click', function _c(e) { if (!popup.contains(e.target) && e.target !== el) { popup.remove(); document.removeEventListener('click', _c); } }); }, 10);
-    return;
-  }
-  const existing = document.getElementById('userMenuPopup');
-  if (existing) { existing.remove(); return; }
-
-  const el = document.getElementById('headerUserName');
-  const rect = el.getBoundingClientRect();
-
-  const isImpersonating = !!localStorage.getItem('oil_admin_token_backup');
-
-  let menuHtml = '<div style="padding:8px 0">';
-  menuHtml += '<div style="padding:8px 16px;font-size:13px;color:var(--text-light);border-bottom:1px solid #eee">' + (currentUser.display_name || currentUser.username) + '</div>';
-
-  // Bug #95: Impersonate list in collapsible section
-  if (currentUser.role === 'admin' || isImpersonating) {
-    menuHtml += '<div onclick="var body=this.nextElementSibling;var arrow=this.querySelector(\'._roleArrow\');if(body.style.display===\'none\'){body.style.display=\'\';arrow.textContent=\'▾\'}else{body.style.display=\'none\';arrow.textContent=\'▸\'}" style="padding:10px 16px;cursor:pointer;font-size:14px;border-top:1px solid #eee;margin-top:4px;display:flex;justify-content:space-between;align-items:center;user-select:none" onmouseover="this.style.background=\'var(--sage-mist)\'" onmouseout="this.style.background=\'\'">' +
-      '<span>🔄 切换角色</span><span class="_roleArrow" style="font-size:11px;color:var(--text-light)">▸</span></div>';
-    menuHtml += '<div style="display:none">';
-    // Admin (self) option when impersonating
-    if (isImpersonating) {
-      menuHtml += '<div onclick="doLogout()" style="padding:8px 16px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--sage-dark)" onmouseover="this.style.background=\'var(--sage-mist)\'" onmouseout="this.style.background=\'\'">' +
-        '<span>👤 管理员（我）</span><span style="font-size:11px;color:var(--text-light)">管理员</span></div>';
-    }
-    menuHtml += '<div id="impersonateList" style="max-height:200px;overflow-y:auto"></div>';
-    menuHtml += '</div>'; // end collapsible body
-  }
-
-  menuHtml += '<div onclick="document.getElementById(\'userMenuPopup\')?.remove();showBrandPage()" style="padding:10px 16px;cursor:pointer;font-size:14px;border-top:1px solid #eee;margin-top:4px">🏷 我的品牌 / 二维码</div>';
-  menuHtml += '<div onclick="document.getElementById(\'userMenuPopup\')?.remove();_prevShowSection2(\'mydiary\');showDiaryTab(\'account\')" style="padding:10px 16px;cursor:pointer;font-size:14px;border-top:1px solid #eee">🔑 修改密码</div>';
-  menuHtml += '<div onclick="document.getElementById(\'userMenuPopup\')?.remove();showMyNotifications()" style="padding:10px 16px;cursor:pointer;font-size:14px;border-top:1px solid #eee">🔔 我的通知' + (_notifUnread > 0 ? ' <span style="background:#c0392b;color:white;font-size:10px;padding:1px 6px;border-radius:8px">' + _notifUnread + '</span>' : '') + '</div>';
-  if (!currentUser.business_verified && currentUser.role !== 'admin') {
-    menuHtml += '<div onclick="document.getElementById(\'userMenuPopup\')?.remove();_prevShowSection2(\'mydiary\');showDiaryTab(\'account\');setTimeout(function(){var el=document.getElementById(\'businessApplyCard\');if(el)el.scrollIntoView({behavior:\'smooth\',block:\'center\'})},300)" style="padding:10px 16px;cursor:pointer;font-size:14px;border-top:1px solid #eee">🏢 商业客户认证</div>';
-  }
-  menuHtml += '<div onclick="document.getElementById(\'userMenuPopup\')?.remove();showBugReport()" style="padding:10px 16px;cursor:pointer;font-size:14px;border-top:1px solid #eee">🐛 反馈问题</div>';
-  menuHtml += '<div onclick="doLogout()" style="padding:10px 16px;cursor:pointer;font-size:14px;color:#c0392b;border-top:1px solid #eee">退出登录</div>';
-  menuHtml += '</div>';
-
-  const popup = document.createElement('div');
-  popup.id = 'userMenuPopup';
-  popup.style.cssText = 'position:fixed;top:' + (rect.bottom + 8) + 'px;right:16px;background:white;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.15);z-index:100;min-width:200px';
-  popup.innerHTML = menuHtml;
-  document.body.appendChild(popup);
-
-  // Load impersonate list
-  if (currentUser.role === 'admin' || isImpersonating) {
-    // Use admin token to fetch user list
-    const adminToken = localStorage.getItem('oil_admin_token_backup') || _authToken;
-    fetch('/api/users', { headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + adminToken } })
-      .then(r => r.json()).then(users => {
-      const list = document.getElementById('impersonateList');
-      if (!list) return;
-      const roleNames = {admin:'管理员',senior_editor:'高级编辑者',editor:'编辑者',viewer:'普通用户'};
-      const testUsers = users.filter(u => u.username.startsWith('test_'));
-      // Add anonymous visitor option
-      list.innerHTML = '<div onclick="doImpersonateAnonymous()" style="padding:8px 16px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;align-items:center" onmouseover="this.style.background=\'var(--sage-mist)\'" onmouseout="this.style.background=\'\'">' +
-        '<span>👻 匿名访客</span><span style="font-size:11px;color:var(--text-light)">未登录</span></div>' +
-      testUsers.map(u =>
-        '<div style="padding:6px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px">' +
-          '<span style="font-size:13px;flex:1">' + (u.display_name || u.username) + '</span>' +
-          '<span style="font-size:10px;color:var(--text-light)">' + (roleNames[u.role] || u.role) + '</span>' +
-          '<button onclick="doImpersonate(' + u.id + ')" style="background:none;border:1px solid var(--border);border-radius:6px;padding:2px 8px;cursor:pointer;font-size:11px;color:var(--text-mid)" title="直接切换">切换</button>' +
-          '<button onclick="doSimulateLogin(\'' + u.username + '\')" style="background:none;border:1px solid var(--sage);border-radius:6px;padding:2px 8px;cursor:pointer;font-size:11px;color:var(--sage-dark)" title="模拟完整登录流程">登录</button>' +
-        '</div>'
-      ).join('');
-    }).catch(() => {});
-  }
-
-  // Close on click outside
-  setTimeout(() => {
-    document.addEventListener('click', function _close(e) {
-      if (!popup.contains(e.target) && e.target !== el) {
-        popup.remove();
-        document.removeEventListener('click', _close);
-      }
-    });
-  }, 10);
-}
-
-function _cleanSwitchTo(token) {
-  // Save admin token if not already saved
-  const adminToken = localStorage.getItem('oil_admin_token_backup') || _authToken;
-  // Clear ALL local state for a true clean switch
-  const keysToKeep = ['oil_admin_token_backup'];
-  const backup = adminToken;
-  // Clear everything
-  localStorage.clear();
-  // Restore admin backup
-  localStorage.setItem('oil_admin_token_backup', backup);
-  // Set new token (or nothing for anonymous)
-  if (token) localStorage.setItem('oil_auth_token', token);
-  location.reload();
-}
-
-async function doImpersonate(userId) {
-  try {
-    const adminToken = localStorage.getItem('oil_admin_token_backup') || _authToken;
-    const res = await fetch('/api/impersonate', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + adminToken },
-      body: JSON.stringify({ user_id: userId })
-    });
-    const data = await res.json();
-    _cleanSwitchTo(data.token);
-  } catch(e) { alert('切换失败'); }
-}
-
-function doSimulateLogin(username) {
-  // Save admin token, clear everything, then show login modal pre-filled
-  const adminToken = localStorage.getItem('oil_admin_token_backup') || _authToken;
-  localStorage.clear();
-  localStorage.setItem('oil_admin_token_backup', adminToken);
-  _authToken = '';
-  // Close menu
-  document.getElementById('userMenuPopup')?.remove();
-  // Show login modal with username pre-filled
-  showLoginModal();
-  setTimeout(() => {
-    const input = document.getElementById('loginUsername');
-    if (input) { input.value = username; input.readOnly = true; input.style.background = '#f5f5f5'; }
-    document.getElementById('loginPassword')?.focus();
-  }, 200);
-}
-
-function doImpersonateAnonymous() {
-  // Switch to fully anonymous (no token at all)
-  _cleanSwitchTo(null);
-}
-
-function doLogout() {
-  // If impersonating, switch back to admin (clean)
-  const backup = localStorage.getItem('oil_admin_token_backup');
-  if (backup) {
-    localStorage.clear();
-    localStorage.setItem('oil_auth_token', backup);
-    location.reload();
-    return;
-  }
-  localStorage.clear();
-  _authToken = '';
-  location.reload();
-}
-
-function showPasswordDialog() {
-  const overlay = document.createElement('div');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:20px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-  overlay.innerHTML = `
-    <div style="background:white;border-radius:16px;padding:24px;max-width:320px;width:100%" onclick="event.stopPropagation()">
-      <div style="font-size:16px;font-weight:600;margin-bottom:4px">🔑 修改密码</div>
-      <div style="font-size:12px;color:var(--text-light);margin-bottom:16px">用户名：<b>${currentUser.username}</b></div>
-      <input type="password" id="dialogPassword" class="form-control" placeholder="新密码（至少4位）" style="width:100%;padding:10px 14px;font-size:14px;margin-bottom:12px">
-      <div style="display:flex;gap:8px">
-        <button class="btn btn-primary btn-sm" onclick="saveDialogPassword()" style="flex:1">保存</button>
-        <button class="btn btn-outline btn-sm" onclick="this.closest('[style*=fixed]').remove()">取消</button>
-      </div>
-      <div id="dialogPwResult" style="margin-top:8px;text-align:center"></div>
-    </div>`;
-  document.body.appendChild(overlay);
-  setTimeout(() => document.getElementById('dialogPassword')?.focus(), 100);
-}
-
-async function saveDialogPassword() {
-  const pw = document.getElementById('dialogPassword')?.value.trim();
-  if (!pw || pw.length < 4) { document.getElementById('dialogPwResult').innerHTML = '<span style="color:#c0392b;font-size:13px">密码至少4位</span>'; return; }
-  try {
-    const res = await _apiFetch('/api/me/password', { method: 'PUT', body: JSON.stringify({ password: pw }) });
-    if (res.ok) {
-      document.getElementById('dialogPwResult').innerHTML = '<span style="color:var(--sage-dark);font-size:13px">✅ 密码已设置</span>';
-      setTimeout(() => document.querySelector('[style*="z-index: 300"], [style*="z-index:300"]')?.remove(), 1200);
-    } else {
-      document.getElementById('dialogPwResult').innerHTML = '<span style="color:#c0392b;font-size:13px">设置失败</span>';
-    }
-  } catch(e) { document.getElementById('dialogPwResult').innerHTML = '<span style="color:#c0392b;font-size:13px">网络错误</span>'; }
-}
-
-async function saveMyProfile(field) {
-  const resultEl = document.getElementById('accountResult');
-  const body = {};
-  if (field === 'display_name') {
-    const val = document.getElementById('myDisplayName')?.value.trim();
-    if (!val) { resultEl.innerHTML = '<span style="color:#c0392b">昵称不能为空</span>'; return; }
-    body.display_name = val;
-  } else if (field === 'username') {
-    const val = document.getElementById('myUsername')?.value.trim();
-    if (!val || val.length < 2) { resultEl.innerHTML = '<span style="color:#c0392b">用户名至少2个字符</span>'; return; }
-    body.username = val;
-  } else if (field === 'password') {
-    const oldPw = document.getElementById('myOldPassword')?.value.trim();
-    const newPw = document.getElementById('myNewPassword')?.value.trim();
-    const newPw2 = document.getElementById('myNewPassword2')?.value.trim();
-    if (!oldPw) { resultEl.innerHTML = '<span style="color:#c0392b">请输入当前密码</span>'; return; }
-    if (!newPw || newPw.length < 4) { resultEl.innerHTML = '<span style="color:#c0392b">新密码至少4位</span>'; return; }
-    if (newPw !== newPw2) { resultEl.innerHTML = '<span style="color:#c0392b">两次新密码不一致</span>'; return; }
-    body.old_password = oldPw;
-    body.password = newPw;
-  }
-  try {
-    const res = await _apiFetch('/api/me', { method: 'PUT', body: JSON.stringify(body) });
-    if (res.ok) {
-      if (!window._writeQueued) {
-        resultEl.innerHTML = '<span style="color:var(--sage-dark)">✅ 已保存</span>';
-        setTimeout(() => { if (resultEl) resultEl.innerHTML = ''; }, 2000);
-      }
-      if (field === 'password') { document.getElementById('myOldPassword').value = ''; document.getElementById('myNewPassword').value = ''; document.getElementById('myNewPassword2').value = ''; }
-      if (field === 'display_name') currentUser.display_name = body.display_name;
-      if (field === 'username') currentUser.username = body.username;
-    } else {
-      const err = await res.json().catch(() => ({}));
-      resultEl.innerHTML = '<span style="color:#c0392b">' + (err.detail || '保存失败') + '</span>';
-    }
-  } catch(e) { resultEl.innerHTML = '<span style="color:#c0392b">网络错误</span>'; }
-}
-
-// Legacy alias
-async function setMyPassword() { return saveMyProfile('password'); }
-
-// ── PERSONAL SECTION ON SEARCH PAGE ─────────────────────
-function _togglePersonalFold(which) {
-  if (which === 'my') window._myRecipesCollapsed = !window._myRecipesCollapsed;
-  else window._myFavsCollapsed = !window._myFavsCollapsed;
-  _saveFoldStates();
-  renderPersonalSection();
-}
-
-// Persist and restore ALL fold states
-function _saveFoldStates() {
-  try { localStorage.setItem('oil_fold_state', JSON.stringify({
-    my: !!window._myRecipesCollapsed, fav: !!window._myFavsCollapsed,
-    manMy: !!window._manageMyCollapsed, manPub: !!window._managePubCollapsed,
-    tagFilter: !!window._tagFilterVisible
-  })); } catch(e) {}
-}
-try {
-  const fs = JSON.parse(localStorage.getItem('oil_fold_state') || '{}');
-  window._myRecipesCollapsed = !!fs.my;
-  window._myFavsCollapsed = !!fs.fav;
-  window._manageMyCollapsed = !!fs.manMy;
-  window._managePubCollapsed = !!fs.manPub;
-  window._tagFilterVisible = !!fs.tagFilter;
-} catch(e) {}
-
-function renderPersonalSection() {
-  const q = document.getElementById('searchInput')?.value.trim().toLowerCase() || '';
-  const section = document.getElementById('personalSection');
-  if (!section) return;
-  if (q) { section.style.display = 'none'; return; }
-  section.style.display = '';
-
-  const myDiv = document.getElementById('myRecipesPreview');
-  const favDiv = document.getElementById('myFavsPreview');
-
-  // Anonymous: show login prompts
-  if (!currentUser.id) {
-    myDiv.innerHTML = '<div onclick="showLoginModal()" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;cursor:pointer">' +
-      '<span style="font-size:14px;font-weight:600;color:var(--text-mid)">📔 我的配方</span>' +
-      '<span style="font-size:12px;color:var(--sage-dark)">登录查看 →</span>' +
-    '</div>';
-    favDiv.innerHTML = '<div onclick="showLoginModal()" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;cursor:pointer">' +
-      '<span style="font-size:14px;font-weight:600;color:var(--text-mid)">★ 我的收藏</span>' +
-      '<span style="font-size:12px;color:var(--sage-dark)">登录查看 →</span>' +
-    '</div>';
-    const pubLabel = document.getElementById('publicLabel');
-    if (pubLabel) pubLabel.textContent = '📚 全部配方库';
-    return;
-  }
-
-  // Logged in: show actual data
-  // My recipes (diary) — collapsible (header always visible)
-  if (userDiary.length > 0) {
-    const c = window._myRecipesCollapsed;
-    const headerHtml = '<div onclick="_togglePersonalFold(\'my\')" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:' + (c ? '0' : '8px') + ';cursor:pointer;user-select:none">' +
-      '<span style="font-size:14px;font-weight:600;color:var(--text-mid)">📔 我的配方 (' + userDiary.length + ') <span style="font-size:11px;color:var(--text-light)">' + (c ? '▸' : '▾') + '</span></span>' +
-    '</div>';
-    const bodyHtml = '<div class="fold-body"' + (c ? ' style="display:none"' : '') + '>' +
-    '<div class="recipe-grid">' + userDiary.slice(0, 4).map(d => {
-      const ings = (d.ingredients||[]).filter(i=>i.oil!=='椰子油').map(i=>i.oil).join('、');
-      return '<div class="recipe-card" onclick="viewDiaryAsCard('+d.id+')">' +
-        '<div class="recipe-card-name">' + d.name + '</div>' +
-        '<div class="recipe-card-oils">' + ings + '</div>' +
-        '<div style="margin-top:8px"><div class="recipe-card-price" style="margin:0">💰 ' + fmtCostWithRetail(d.ingredients || []) + '</div></div></div>';
-    }).join('') + '</div></div>';
-    myDiv.innerHTML = headerHtml + bodyHtml;
-  } else {
-    myDiv.innerHTML = '';
-  }
-
-  // Favorites — collapsible
-  const favRecipes = recipes.filter(r => r._id && userFavorites.includes(r._id));
-  if (favRecipes.length > 0) {
-    const c = window._myFavsCollapsed;
-    favDiv.innerHTML = '<div onclick="_togglePersonalFold(\'fav\')" style="display:flex;align-items:center;margin-bottom:' + (c ? '0' : '8px') + ';cursor:pointer;user-select:none">' +
-      '<span style="font-size:14px;font-weight:600;color:var(--text-mid)">★ 我的收藏 (' + favRecipes.length + ') <span style="font-size:11px;color:var(--text-light)">' + (c ? '▸' : '▾') + '</span></span>' +
-    '</div>' +
-    '<div class="fold-body"' + (c ? ' style="display:none"' : '') + '>' +
-    '<div class="recipe-grid">' + favRecipes.slice(0, 4).map(r => {
-      const realIdx = recipes.indexOf(r);
-      const oilNames = r.ingredients.filter(i=>i.oil!=='椰子油').map(i=>i.oil).join('、');
-      return '<div class="recipe-card" onclick="selectRecipe('+realIdx+')">' +
-        '<div class="recipe-card-name">' + r.name + '</div>' +
-        '<div class="recipe-card-oils">' + oilNames + '</div>' +
-        '<div style="margin-top:6px"><div class="recipe-card-price">💰 ' + fmtCostWithRetail(r.ingredients) + '</div></div></div>';
-    }).join('') + '</div></div>';
-  } else {
-    favDiv.innerHTML = '';
-  }
-
-  // Public label
-  const pubLabel = document.getElementById('publicLabel');
-  if (pubLabel) pubLabel.textContent = currentUser.id ? '📚 全部配方库' : '';
-}
-
-// ── SYMPTOM SEARCH ──────────────────────────────────────
-async function _showSymptomSearch(grid) {
-  const q = document.getElementById('searchInput').value.trim();
-  if (!q) { grid.innerHTML = ''; return; }
-
-  // Try fuzzy match via API
-  try {
-    const res = await _apiFetch('/api/symptom-search', { method: 'POST', body: JSON.stringify({ query: q }) });
-    const data = await res.json();
-
-    if (data.exact && data.exact.length > 0) {
-      // Exact matches found - render normally
-      const mapped = data.exact.map(r => {
-        const local = recipes.find(lr => lr._id === r.id);
-        return local || r;
-      }).filter(Boolean);
-      if (mapped.length) { renderGrid(mapped); return; }
-    }
-
-    // Build result outside grid to avoid grid layout issues
-    const catCtx = _activeCategoryTag ? '在「' + _activeCategoryTag + '」中' : '';
-    let html = '';
-
-    // Top: centered no-match message (full width)
-    html += '<div style="text-align:center;padding:20px 0 12px;grid-column:1/-1">' +
-        '<div style="font-size:28px;margin-bottom:8px">🔍</div>' +
-        '<div style="font-size:15px;color:var(--text-mid)">' + catCtx + '没有找到「' + q + '」的配方</div>' +
-      '</div>';
-
-    if (data.related && data.related.length > 0) {
-      const mapped = data.related.map(r => {
-        const local = recipes.find(lr => lr._id === r.id);
-        return local || r;
-      }).filter(Boolean);
-
-      html += '<div style="font-size:14px;color:var(--text-mid);margin-bottom:4px;text-align:center;grid-column:1/-1">以下是一些相关配方：</div>';
-      mapped.forEach((r, idx) => {
-        const realIdx = recipes.indexOf(r);
-        if (realIdx < 0) return;
-        const oilNames = r.ingredients.filter(i=>i.oil!=='椰子油').map(i => i.oil).join('、');
-        html += '<div class="recipe-card" onclick="selectRecipe(' + realIdx + ')">' +
-          '<div class="recipe-card-name">' + r.name + '</div>' +
-          '<div class="recipe-card-oils">' + oilNames + '</div>' +
-          '<div style="margin-top:8px"><div class="recipe-card-price">💰 ' + fmtCostWithRetail(r.ingredients) + '</div></div></div>';
-      });
-    }
-
-    // Bottom: report button (full width)
-    html += '<div style="text-align:center;padding:20px 0;grid-column:1/-1">' +
-      '<div style="font-size:13px;color:var(--text-light);margin-bottom:8px">没有找到想要的？</div>' +
-      '<button class="btn btn-outline btn-sm" onclick="reportMissingRecipe(\'' + q.replace(/'/g,"\\'") + '\')">📢 告诉我们，尽快添加</button>' +
-    '</div>';
-    grid.innerHTML = html;
-  } catch(e) {
-    grid.innerHTML = '<div style="text-align:center;padding:20px;grid-column:1/-1"><div style="font-size:28px;margin-bottom:8px">🔍</div><div style="font-size:15px;color:var(--text-mid)">没有找到相关配方</div></div>';
-  }
-}
-
-async function reportMissingRecipe(query) {
-  try {
-    const ctx = _activeCategoryTag ? '（在' + _activeCategoryTag + '中搜索）' : '';
-    await _apiFetch('/api/symptom-search', { method: 'POST', body: JSON.stringify({ query: query + ctx, report_missing: true }) });
-    _showToast('✅ 已上报，我们会尽快添加相关配方');
-  } catch(e) { _showToast('上报失败'); }
-}
-
-async function showMyNotifications() {
-  const overlay = document.createElement('div');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:16px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-  overlay.innerHTML = '<div style="background:white;border-radius:16px;padding:24px;max-width:420px;width:100%;max-height:80vh;overflow-y:auto" onclick="event.stopPropagation()"><div style="text-align:center;color:var(--text-light)">加载中...</div></div>';
-  document.body.appendChild(overlay);
-
-  try {
-    const res = await _apiFetch('/api/notifications');
-    const data = await res.json();
-    const card = overlay.querySelector('div > div') || overlay.querySelector('div');
-    const container = overlay.querySelector('[style*="max-width"]');
-    const hasUnread = data.some(n => !n.is_read);
-    let html = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">' +
-      '<span style="font-size:16px;font-weight:600">🔔 我的通知</span>' +
-      '<div style="display:flex;gap:8px;align-items:center">' +
-        (hasUnread ? '<button onclick="markAllNotifReadPopup()" style="background:none;border:1px solid var(--border);border-radius:8px;padding:3px 10px;font-size:11px;cursor:pointer;color:var(--text-mid)">全部已读</button>' : '') +
-        '<button onclick="this.closest(\'[style*=fixed]\').remove()" style="background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-light)">✕</button>' +
-      '</div></div>';
-
-    if (!data.length) {
-      html += '<div style="text-align:center;padding:20px;color:var(--text-light)">暂无通知</div>';
-    } else {
-      const unread = data.filter(n => !n.is_read);
-      const read = data.filter(n => n.is_read);
-      const renderPopupItem = n => {
-        const isRead = n.is_read;
-        const isBugTest = n.title && n.title.includes('待测试');
-        const isBugRelated = n.title && (n.title.includes('Bug') || n.title.includes('bug'));
-        const isBizApply = n.title && (n.title.includes('商业认证申请') || n.title.includes('商业认证未通过'));
-        const popupBugIdM = (n.body||'').match(/\[bug_id:(\d+)\]/);
-        const popupBugLink = (isBugRelated && popupBugIdM) ? '<button class="btn btn-outline btn-sm" onclick="_apiFetch(\'/api/notifications/'+n.id+'/read\',{method:\'POST\',body:\'{}\'});this.closest(\'[style*=fixed]\').remove();_jumpToBug('+popupBugIdM[1]+');loadNotifications()" style="font-size:10px">跳转</button>' : '';
-        const popupBizLink = isBizApply ? (currentUser.role === 'admin'
-          ? '<button class="btn btn-outline btn-sm" onclick="_apiFetch(\'/api/notifications/'+n.id+'/read\',{method:\'POST\',body:\'{}\'});this.closest(\'[style*=fixed]\').remove();showSection(\'users\');setTimeout(loadNotifications,500)" style="font-size:10px">去审批</button>'
-          : '<button class="btn btn-outline btn-sm" onclick="_apiFetch(\'/api/notifications/'+n.id+'/read\',{method:\'POST\',body:\'{}\'});this.closest(\'[style*=fixed]\').remove();_prevShowSection2(\'mydiary\');showDiaryTab(\'account\');setTimeout(function(){var el=document.getElementById(\'businessApplyCard\');if(el)el.scrollIntoView({behavior:\'smooth\',block:\'center\'})},300);setTimeout(loadNotifications,500)" style="font-size:10px">再次申请</button>'
-        ) : '';
-        let buttons = '';
-        if (!isRead) {
-          if (isBugTest) {
-            var embeddedBugId = popupBugIdM ? popupBugIdM[1] : '0';
-            buttons = '<button class="btn btn-primary btn-sm" onclick="confirmBugFixedInline(' + n.id + ',this,\'' + embeddedBugId + '\')" style="font-size:11px">✅ 已测试</button>';
-          } else {
-            buttons = '<button class="btn btn-outline btn-sm" onclick="markNotifReadInline(' + n.id + ',this)" style="font-size:11px">已读</button>';
-            if (isBugRelated) buttons += popupBugLink;
-            if (isBizApply) buttons += popupBizLink;
-          }
-        } else {
-          buttons = '<button class="btn btn-outline btn-sm" onclick="markNotifUnreadInline(' + n.id + ',this)" style="font-size:10px;color:var(--text-light)">标为未读</button>';
-          if (isBugRelated && popupBugIdM) buttons += popupBugLink;
-        }
-        return '<div style="padding:10px 0;border-bottom:1px solid #f0f0f0;' + (isRead ? 'opacity:0.45' : '') + '">' +
-          '<div style="font-size:14px;font-weight:' + (isRead ? '400' : '600') + ';color:var(--text-dark)">' + n.title + '</div>' +
-          (n.body ? '<div style="font-size:13px;color:var(--text-mid);margin-top:4px;white-space:pre-line">' + (n.body||'').replace(/\n?\[bug_id:\d+\]/g,'') + '</div>' : '') +
-          '<div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px">' +
-            '<span style="font-size:11px;color:var(--text-light)">' + (n.created_at || '') + '</span>' +
-            '<div style="display:flex;gap:6px">' + buttons + '</div>' +
-          '</div></div>';
-      };
-      html += unread.map(renderPopupItem).join('');
-      if (unread.length > 0 && read.length > 0) {
-        html += '<div style="padding:10px 0;font-size:12px;color:var(--text-light);text-align:center;border-bottom:1px solid #f0f0f0">── 已读 ──</div>';
-      }
-      html += read.map(renderPopupItem).join('');
-    }
-    container.innerHTML = html;
-  } catch(e) {
-    overlay.querySelector('[style*="max-width"]').innerHTML = '<div style="color:red;text-align:center">加载失败</div>';
-  }
-}
-
-async function markNotifReadInline(id, btn) {
-  await _apiFetch('/api/notifications/' + id + '/read', { method: 'POST', body: '{}' });
-  const overlay = btn.closest('[style*="z-index:300"], [style*="z-index: 300"]');
-  if (overlay) { overlay.remove(); showMyNotifications(); }
-  loadNotifications();
-}
-
-async function markNotifUnreadInline(id, btn) {
-  await _apiFetch('/api/notifications/' + id + '/unread', { method: 'POST', body: '{}' });
-  const overlay = btn.closest('[style*="z-index:300"], [style*="z-index: 300"]');
-  if (overlay) { overlay.remove(); showMyNotifications(); }
-  loadNotifications();
-}
-
-async function confirmBugFixedInline(notifId, btn, bugIdStr) {
-  const bugId = bugIdStr && bugIdStr !== '0' ? bugIdStr : null;
-
-  const note = await _prompt('测试备注（通过/未通过/说明）');
-  if (note === null) return;
-  try {
-    if (bugId) {
-      await _apiFetch('/api/bug-reports/' + bugId, { method: 'PUT', body: JSON.stringify({ status: 3, note: note || '' }) });
-    } else {
-      // Fallback: find any testing bug assigned to me
-      const res = await _apiFetch('/api/bug-reports');
-      const bugs = await res.json();
-      const testingBugs = bugs.filter(b => b.is_resolved === 1);
-      if (testingBugs.length > 0) {
-        await _apiFetch('/api/bug-reports/' + testingBugs[0].id, { method: 'PUT', body: JSON.stringify({ status: 3, note: note || '' }) });
-      }
-    }
-    await _apiFetch('/api/notifications/' + notifId + '/read', { method: 'POST', body: JSON.stringify({ force: true }) });
-    _showToast('✅ 已提交测试反馈，已通知管理员');
-    const overlay = btn.closest('[style*="z-index:300"], [style*="z-index: 300"]');
-    if (overlay) { overlay.remove(); showMyNotifications(); }
-    loadNotifications();
-  } catch(e) { _showToast('操作失败'); }
-}
-
-function testerConfirm(bugId) {
-  // Show note input then submit status 3
-  const overlay = document.createElement('div');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:20px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-  overlay.innerHTML = '<div style="background:white;border-radius:16px;padding:24px;max-width:360px;width:100%" onclick="event.stopPropagation()">' +
-    '<div style="font-size:15px;font-weight:600;margin-bottom:12px">✅ 提交测试结果</div>' +
-    '<textarea id="testerNote" class="form-control" rows="3" placeholder="测试结果（通过/未通过/具体说明…）" style="width:100%;font-size:13px;margin-bottom:12px"></textarea>' +
-    '<div style="display:flex;gap:8px">' +
-      '<button class="btn btn-primary btn-sm" onclick="_submitTesterConfirm(' + bugId + ')" style="flex:1">提交</button>' +
-      '<button class="btn btn-outline btn-sm" onclick="this.closest(\'[style*=fixed]\').remove()">取消</button>' +
-    '</div></div>';
-  document.body.appendChild(overlay);
-  setTimeout(() => document.getElementById('testerNote')?.focus(), 100);
-}
-
-async function _submitTesterConfirm(bugId) {
-  const note = document.getElementById('testerNote')?.value.trim() || '';
-  try {
-    await _apiFetch('/api/bug-reports/' + bugId, { method: 'PUT', body: JSON.stringify({ status: 3, note }) });
-    document.querySelector('[style*="z-index: 300"], [style*="z-index:300"]')?.remove();
-    _showToast('✅ 已提交测试反馈');
-    renderBugList();
-  } catch(e) { _showToast('提交失败'); }
-}
-
-function showBrandPage() {
-  // Show mydiary section without triggering the default 'recipes' tab
-  _prevShowSection2('mydiary');
-  showDiaryTab('brand');
-}
-
-// ── BUG REPORT ──────────────────────────────────────────
-function showBugReport() {
-  const overlay = document.createElement('div');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:20px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-  overlay.innerHTML = `
-    <div style="background:white;border-radius:16px;padding:24px;max-width:360px;width:100%" onclick="event.stopPropagation()">
-      <div style="font-size:16px;font-weight:600;margin-bottom:12px">🐛 反馈问题</div>
-      <textarea id="bugContent" class="form-control" rows="4" placeholder="描述你遇到的问题或建议…" style="width:100%;font-size:14px;margin-bottom:12px"></textarea>
-      <div style="display:flex;gap:8px">
-        <button class="btn btn-primary btn-sm" onclick="submitBugReport()" style="flex:1">提交</button>
-        <button class="btn btn-outline btn-sm" onclick="this.closest('[style*=fixed]').remove()">取消</button>
-      </div>
-    </div>`;
-  document.body.appendChild(overlay);
-}
-
-async function submitBugReport() {
-  const content = document.getElementById('bugContent')?.value.trim();
-  if (!content) { _showToast('请输入内容'); return; }
-  try {
-    const res = await _apiFetch('/api/bug-report', { method: 'POST', body: JSON.stringify({ content }) });
-    if (res.ok) {
-      if (!window._writeQueued) _showToast('✅ 感谢反馈，已通知管理员');
-      document.querySelector('[style*="z-index: 300"], [style*="z-index:300"]')?.remove();
-    } else { _showToast('提交失败'); }
-  } catch(e) { _showToast('网络错误'); }
-}
-
-// ── BUG TRACKER ─────────────────────────────────────────
-function _fmtBugTime(t) {
-  if (!t) return '';
-  // Show only MM-DD HH:MM
-  const m = t.match(/(\d{4})-(\d{2})-(\d{2})\s*(\d{2}:\d{2})/);
-  return m ? m[2]+'-'+m[3]+' '+m[4] : t;
-}
-
-const _priColors = ['#c62828','#e65100','#2e7d32','#1565c0'];
-const _priNames = ['紧急','重要','一般','长期待办'];
-
-function _renderBugRow(b) {
-  const statusNames = {0:'待处理', 1:'待测试', 2:'已修复', 3:'已测试'};
-  const statusColors = {0:'#e65100', 1:'var(--gold)', 2:'var(--sage-dark)', 3:'#1565c0'};
-  const status = b.is_resolved || 0;
-  const pri = b.priority ?? 2;
-  const isAdmin = currentUser.role === 'admin';
-  const comments = b.comments || [];
-  const lastComment = comments.slice(-1)[0];
-  const lastNote = lastComment && lastComment.action !== '创建' ? (lastComment.display_name || lastComment.username || '') + ' ' + lastComment.action + (lastComment.content ? '：' + lastComment.content : '') : '';
-
-  // Build action buttons
-  let btns = '';
-  if (isAdmin) {
-    if (status === 0 || status === 1) {
-      btns = '<button class="btn btn-gold btn-sm" onclick="event.stopPropagation();chooseTester(' + b.id + ',' + (b.user_id||'null') + ')" style="font-size:10px;padding:2px 8px">测试</button>' +
-        '<button class="btn btn-primary btn-sm" onclick="event.stopPropagation();setBugStatus(' + b.id + ',2)" style="font-size:10px;padding:2px 8px">修复</button>';
-    } else if (status === 3) {
-      btns = '<button class="btn btn-primary btn-sm" onclick="event.stopPropagation();setBugStatus(' + b.id + ',2)" style="font-size:10px;padding:2px 8px">确认</button>' +
-        '<button class="btn btn-gold btn-sm" onclick="event.stopPropagation();chooseTester(' + b.id + ',' + (b.user_id||'null') + ')" style="font-size:10px;padding:2px 8px">重测</button>';
-    }
-  } else if (status === 1) {
-    btns = '<button class="btn btn-primary btn-sm" onclick="event.stopPropagation();testerConfirm(' + b.id + ')" style="font-size:10px;padding:2px 8px">已测试</button>';
-  }
-
-  return '<div class="bug-row" data-bug-id="' + b.id + '" style="background:white;border-radius:8px;border:1px solid var(--border);margin-bottom:4px;overflow:hidden;border-left:3px solid ' + statusColors[status] + '">' +
-    // Compact header — click to expand
-    '<div onclick="var d=this.nextElementSibling;d.style.display=d.style.display===\'none\'?\'block\':\'none\'" style="padding:8px 10px;cursor:pointer;display:flex;align-items:center;gap:8px">' +
-      // Priority dot
-      (isAdmin ? '<span onclick="event.stopPropagation();cycleBugPriority('+b.id+','+pri+',this)" style="width:9px;height:9px;border-radius:50%;background:'+_priColors[pri]+';flex-shrink:0;cursor:pointer" title="'+_priNames[pri]+'"></span>'
-        : '<span style="width:9px;height:9px;border-radius:50%;background:'+_priColors[pri]+';flex-shrink:0" title="'+_priNames[pri]+'"></span>') +
-      // User feedback badge + content
-      '<div style="flex:1;min-width:0;font-size:13px;color:var(--text-dark);line-height:1.5">' +
-        (isAdmin && b.user_id && b.user_id !== currentUser.id ? '<span style="font-size:9px;background:#e8f5e9;color:#2e7d32;padding:1px 5px;border-radius:4px;margin-right:4px;vertical-align:middle">' + (b.display_name || b.username || '用户') + ' 反馈</span>' : '') +
-        b.content + '</div>' +
-      // Last comment (right side)
-      (lastNote ? '<div style="flex-shrink:0;max-width:40%;font-size:10px;color:var(--text-light);line-height:1.4">' + lastNote + '</div>' : '') +
-      // Status badge + assignee
-      '<span style="font-size:10px;padding:1px 6px;border-radius:6px;white-space:nowrap;flex-shrink:0;background:' + statusColors[status] + ';color:white">' + statusNames[status] + (b.assigned_name && status === 1 ? ' → ' + b.assigned_name : '') + '</span>' +
-    '</div>' +
-    // Expandable detail
-    '<div style="display:none;padding:0 10px 6px;border-top:1px solid var(--border)">' +
-      // Meta line
-      '<div style="font-size:10px;color:var(--text-light);padding:4px 0">' + (b.display_name || b.username || '') + ' · ' + _fmtBugTime(b.created_at) + '</div>' +
-      // Timeline
-      _renderBugTimeline(b) +
-      // Actions
-      '<div style="display:flex;gap:4px;justify-content:flex-end;padding:4px 0">' +
-        btns +
-        '<button class="btn btn-outline btn-sm" onclick="event.stopPropagation();addBugComment(' + b.id + ')" style="font-size:10px;padding:2px 8px">💬</button>' +
-        (isAdmin ? '<button class="btn btn-outline btn-sm" onclick="event.stopPropagation();deleteBug(' + b.id + ')" style="font-size:10px;padding:2px 8px;color:#c0392b">🗑</button>' : '') +
-      '</div>' +
-    '</div>' +
-  '</div>';
-}
-
-function _renderBugTimeline(b) {
-  const comments = b.comments || [];
-  const logEntries = comments.filter((c, i) => i > 0 || c.action !== '创建');
-  if (!logEntries.length) return '';
-  let html = '<div style="padding:2px 0 4px">';
-  logEntries.forEach(c => {
-    const cWho = c.display_name || c.username || '系统';
-    const actionColor = c.action.includes('已测试') ? '#1565c0' : c.action.includes('待测试') ? 'var(--gold)' : c.action.includes('已修复') ? 'var(--sage-dark)' : 'var(--text-mid)';
-    html += '<div style="display:flex;gap:6px;padding:3px 0;font-size:11px;line-height:1.4">' +
-      '<span style="width:6px;height:6px;border-radius:50%;background:' + actionColor + ';margin-top:4px;flex-shrink:0"></span>' +
-      '<div style="flex:1">' +
-        '<span style="font-weight:600;color:var(--text-dark)">' + cWho + '</span> ' +
-        '<span style="color:' + actionColor + '">' + c.action + '</span>' +
-        (c.content ? ' <span style="color:var(--text-mid)">' + c.content + '</span>' : '') +
-        ' <span style="color:var(--text-light);font-size:9px">' + _fmtBugTime(c.created_at) + '</span>' +
-      '</div></div>';
-  });
-  html += '</div>';
-  return html;
-}
-
-async function _jumpToBug(bugId) {
-  showSection('bugs');
-  await renderBugList();
-  setTimeout(() => {
-    const row = document.querySelector('.bug-row[data-bug-id="' + bugId + '"]');
-    if (!row) return;
-    // Expand the detail panel
-    const detail = row.children[1]; // second child is the expandable detail
-    if (detail && detail.style.display === 'none') detail.style.display = 'block';
-    // Also expand parent priority group if collapsed
-    const parentBody = row.closest('div[style*="display:none"]');
-    if (parentBody) parentBody.style.display = '';
-    // Scroll and highlight
-    row.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    row.style.outline = '2px solid var(--sage)';
-    row.style.background = 'var(--sage-mist)';
-    setTimeout(() => { row.style.outline = ''; row.style.background = ''; }, 3000);
-  }, 300);
-}
-
-async function renderBugList() {
-  try {
-    const res = await _apiFetch('/api/bug-reports');
-    const bugs = await res.json();
-
-    const active = bugs.filter(b => b.is_resolved !== 2);
-    // Update bug tab badge
-    const bugTab = document.getElementById('bugNavTab');
-    if (bugTab) bugTab.textContent = active.length > 0 ? '🐛 Bug (' + active.length + ')' : '🐛 Bug';
-    const resolved = bugs.filter(b => b.is_resolved === 2);
-
-    const activeList = document.getElementById('bugListActive');
-    if (active.length) {
-      // Group by priority
-      const groups = [
-        { pri: 0, name: '紧急', color: _priColors[0], items: active.filter(b => (b.priority ?? 2) === 0) },
-        { pri: 1, name: '重要', color: _priColors[1], items: active.filter(b => (b.priority ?? 2) === 1) },
-        { pri: 2, name: '一般', color: _priColors[2], items: active.filter(b => (b.priority ?? 2) === 2) },
-        { pri: 3, name: '长期待办', color: _priColors[3], items: active.filter(b => (b.priority ?? 2) === 3) },
-      ].filter(g => g.items.length > 0);
-
-      activeList.innerHTML = groups.map(g =>
-        '<div class="bug-pri-group" style="margin-bottom:10px">' +
-          '<div onclick="var c=this.nextElementSibling;c.style.display=c.style.display===\'none\'?\'block\':\'none\';this.querySelector(\'span:last-child\').textContent=c.style.display===\'none\'?\'▸\':\'▾\'" style="display:flex;align-items:center;gap:6px;padding:4px 0;cursor:pointer;user-select:none">' +
-            '<span style="width:8px;height:8px;border-radius:50%;background:' + g.color + '"></span>' +
-            '<span style="font-size:12px;font-weight:600;color:var(--text-mid)">' + g.name + ' (' + g.items.length + ')</span>' +
-            '<span style="font-size:11px;color:var(--text-light)">▾</span>' +
-          '</div>' +
-          '<div>' + g.items.map(b => _renderBugRow(b)).join('') + '</div>' +
-        '</div>'
-      ).join('');
-    } else {
-      activeList.innerHTML = '<div style="text-align:center;padding:20px;color:var(--text-light)">🎉 没有待处理的 Bug</div>';
-    }
-
-    const resolvedList = document.getElementById('bugListResolved');
-    if (resolved.length) {
-      resolvedList.innerHTML =
-        '<div onclick="var c=this.nextElementSibling;c.style.display=c.style.display===\'none\'?\'block\':\'none\';this.querySelector(\'span:last-child\').textContent=c.style.display===\'none\'?\'▸\':\'▾\'" style="display:flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer;user-select:none">' +
-          '<span style="width:8px;height:8px;border-radius:50%;background:var(--sage-dark)"></span>' +
-          '<span style="font-size:12px;font-weight:600;color:var(--text-light)">已修复 (' + resolved.length + ')</span>' +
-          '<span style="font-size:11px;color:var(--text-light)">▸</span>' +
-        '</div>' +
-        '<div style="display:none">' + resolved.map(b => _renderBugRow(b)).join('') + '</div>';
-    } else {
-      resolvedList.innerHTML = '';
-    }
-  } catch(e) { document.getElementById('bugListActive').innerHTML = '<div style="color:red">加载失败</div>'; }
-}
-
-let _priDebounce = null;
-async function cycleBugPriority(bugId, current, dot) {
-  const next = (current + 1) % 4;
-  dot.style.background = _priColors[next];
-  dot.title = _priNames[next] + '（点击切换）';
-  dot.setAttribute('onclick', 'event.stopPropagation();cycleBugPriority('+bugId+','+next+',this)');
-  _apiFetch('/api/bug-reports/' + bugId, { method: 'PUT', body: JSON.stringify({ priority: next }) }).catch(() => _showToast('更新失败'));
-  // Debounce: re-sort 2s after last click
-  if (_priDebounce) clearTimeout(_priDebounce);
-  _priDebounce = setTimeout(() => { _priDebounce = null; renderBugList(); }, 2000);
-}
-
-async function deleteBug(bugId) {
-  if (!await _confirm('确认删除这条 Bug？')) return;
-  try {
-    await _apiFetch('/api/bug-reports/' + bugId, { method: 'DELETE' });
-    _showToast('已删除');
-    renderBugList();
-  } catch(e) { _showToast('删除失败'); }
-}
-
-function addBugComment(bugId) {
-  const overlay = document.createElement('div');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:20px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-  overlay.innerHTML = '<div style="background:white;border-radius:16px;padding:24px;max-width:360px;width:100%" onclick="event.stopPropagation()">' +
-    '<div style="font-size:15px;font-weight:600;margin-bottom:12px">💬 添加备注</div>' +
-    '<textarea id="bugCommentInput" class="form-control" rows="3" placeholder="写点备注…" style="width:100%;font-size:14px;margin-bottom:12px"></textarea>' +
-    '<div style="display:flex;gap:8px">' +
-      '<button class="btn btn-primary btn-sm" onclick="submitBugComment(' + bugId + ')" style="flex:1">提交</button>' +
-      '<button class="btn btn-outline btn-sm" onclick="this.closest(\'[style*=fixed]\').remove()">取消</button>' +
-    '</div></div>';
-  document.body.appendChild(overlay);
-  setTimeout(() => document.getElementById('bugCommentInput')?.focus(), 100);
-}
-
-async function submitBugComment(bugId) {
-  const content = document.getElementById('bugCommentInput')?.value.trim();
-  if (!content) { _showToast('请输入内容'); return; }
-  try {
-    const res = await _apiFetch('/api/bug-reports/' + bugId + '/comment', { method: 'POST', body: JSON.stringify({ content }) });
-    if (res.ok) {
-      document.querySelector('[style*="z-index: 300"], [style*="z-index:300"]')?.remove();
-      _showToast('✅ 已添加备注');
-      // Save expanded bug IDs before re-render
-      const expandedIds = new Set();
-      document.querySelectorAll('.bug-row').forEach(row => {
-        const detail = row.querySelector('div:nth-child(2)');
-        if (detail && detail.style.display !== 'none') {
-          expandedIds.add(row.getAttribute('data-bug-id'));
-        }
-      });
-      await renderBugList();
-      // Restore expanded state and scroll to the commented bug
-      expandedIds.forEach(id => {
-        const row = document.querySelector('.bug-row[data-bug-id="' + id + '"]');
-        if (row) {
-          const detail = row.querySelector('div:nth-child(2)');
-          if (detail) detail.style.display = 'block';
-        }
-      });
-      const targetRow = document.querySelector('.bug-row[data-bug-id="' + bugId + '"]');
-      if (targetRow) {
-        const detail = targetRow.querySelector('div:nth-child(2)');
-        if (detail) detail.style.display = 'block';
-        targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }
-    } else { _showToast('添加失败'); }
-  } catch(e) { _showToast('添加失败'); }
-}
-
-async function chooseTester(bugId, reporterUserId) {
-  try {
-    const res = await _apiFetch('/api/users');
-    const users = await res.json();
-    const others = users.filter(u => u.role !== 'admin');
-    const roleNames = {admin:'管理员',senior_editor:'高级编辑者',editor:'编辑者',viewer:'普通用户'};
-    // Find Baolian's id
-    const baolian = users.find(u => u.display_name === 'Baolian' || u.username === '宝莲');
-    const baolianId = baolian ? baolian.id : null;
-
-    const overlay = document.createElement('div');
-    overlay.style.cssText = 'position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:20px';
-    overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-    overlay.innerHTML = '<div style="background:white;border-radius:16px;padding:24px;max-width:320px;width:100%" onclick="event.stopPropagation()">' +
-      '<div style="font-size:15px;font-weight:600;margin-bottom:12px">发送待测试通知</div>' +
-      '<textarea id="testNote" class="form-control" rows="2" placeholder="备注（可选）" style="width:100%;font-size:13px;margin-bottom:12px"></textarea>' +
-      '<div style="font-size:13px;color:var(--text-mid);margin-bottom:8px">发送给：</div>' +
-      others.map(u => {
-        const isReporter = u.id === reporterUserId;
-        const isBaolian = u.id === baolianId;
-        const highlight = isReporter || isBaolian;
-        const badges = [];
-        if (isReporter) badges.push('<span style="font-size:10px;background:var(--gold-light);color:var(--brown);padding:1px 6px;border-radius:8px">反馈人</span>');
-        if (isBaolian && !isReporter) badges.push('<span style="font-size:10px;background:var(--sage-mist);color:var(--sage-dark);padding:1px 6px;border-radius:8px">推荐</span>');
-        return '<div onclick="sendTestNotify(' + bugId + ',' + u.id + ',document.getElementById(\'testNote\').value);this.closest(\'[style*=fixed]\').remove()" style="padding:8px 14px;cursor:pointer;border-radius:8px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center' + (highlight ? ';background:var(--sage-mist)' : '') + '" onmouseover="this.style.background=\'var(--sage-mist)\'" onmouseout="this.style.background=\'' + (highlight ? 'var(--sage-mist)' : '') + '\'">' +
-          '<span>' + (u.display_name || u.username) + ' ' + badges.join(' ') + '</span>' +
-          '<span style="font-size:11px;color:var(--text-light)">' + (roleNames[u.role]||u.role) + '</span>' +
-        '</div>';
-      }).join('') +
-    '</div>';
-    document.body.appendChild(overlay);
-  } catch(e) { setBugStatus(bugId, 1); }
-}
-
-async function sendTestNotify(bugId, userId, note) {
-  try {
-    await _apiFetch('/api/bug-reports/' + bugId, { method: 'PUT', body: JSON.stringify({ status: 1, notify_user_id: userId, note: note || '' }) });
-    _showToast('已标为待测试，已通知');
-    renderBugList();
-  } catch(e) { _showToast('操作失败'); }
-}
-
-async function setBugStatus(bugId, status) {
-  if (status === 2) {
-    // Ask for optional note when marking as resolved
-    const overlay = document.createElement('div');
-    overlay.style.cssText = 'position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:20px';
-    overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-    overlay.innerHTML = '<div style="background:white;border-radius:16px;padding:24px;max-width:360px;width:100%" onclick="event.stopPropagation()">' +
-      '<div style="font-size:15px;font-weight:600;margin-bottom:12px">✅ 标记为已修复</div>' +
-      '<textarea id="resolveNote" class="form-control" rows="2" placeholder="修复备注（可选）" style="width:100%;font-size:13px;margin-bottom:12px"></textarea>' +
-      '<div style="display:flex;gap:8px">' +
-        '<button class="btn btn-primary btn-sm" onclick="_doSetBugStatus(' + bugId + ',2,document.getElementById(\'resolveNote\').value);this.closest(\'[style*=fixed]\').remove()" style="flex:1">确认</button>' +
-        '<button class="btn btn-outline btn-sm" onclick="this.closest(\'[style*=fixed]\').remove()">取消</button>' +
-      '</div></div>';
-    document.body.appendChild(overlay);
-    return;
-  }
-  _doSetBugStatus(bugId, status, '');
-}
-
-async function _doSetBugStatus(bugId, status, note) {
-  // Optimistic: immediately move the bug row
-  const row = document.querySelector('.bug-row[data-bug-id="' + bugId + '"]');
-  if (row && status === 2) {
-    row.style.transition = 'opacity 0.3s';
-    row.style.opacity = '0';
-    setTimeout(() => row.remove(), 300);
-  }
-  _showToast(status === 1 ? '已标为待测试' : '✅ 已修复');
-  // Fire API in background, refresh list after
-  _apiFetch('/api/bug-reports/' + bugId, { method: 'PUT', body: JSON.stringify({ status, note: note || '' }) })
-    .then(() => renderBugList())
-    .catch(() => { _showToast('操作失败'); renderBugList(); });
-}
-
-async function confirmBugFixed(notifId) {
-  // This is called from admin notification tab — for "已测试" notifications
-  // Admin marks as read; actual status change happens on bug page
-  await _apiFetch('/api/notifications/' + notifId + '/read', { method: 'POST', body: '{}' });
-  _showToast('已读，请到 Bug 页面确认修复');
-  renderNotifications();
-  loadNotifications();
-}
-
-function addNewBug() {
-  const overlay = document.createElement('div');
-  overlay.style.cssText = 'position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:20px';
-  overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-  overlay.innerHTML = `
-    <div style="background:white;border-radius:16px;padding:28px;max-width:400px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,0.2)" onclick="event.stopPropagation()">
-      <div style="text-align:center;margin-bottom:20px">
-        <div style="font-size:28px;margin-bottom:8px">🐛</div>
-        <div style="font-family:'Noto Serif SC',serif;font-size:17px;font-weight:600;color:var(--text-dark)">记录一个问题或待办</div>
-        <div style="font-size:12px;color:var(--text-light);margin-top:4px">描述清楚问题或需要改进的地方</div>
-      </div>
-      <textarea id="newBugContent" class="form-control" rows="4" placeholder="例如：手机版配方卡片显示不全…（回车直接添加）" style="width:100%;font-size:14px;margin-bottom:12px" onkeydown="if(event.key==='Enter'&&!event.shiftKey&&!event.isComposing){event.preventDefault();submitNewBug()}"></textarea>
-      <div style="display:flex;gap:12px;align-items:center;margin-bottom:16px">
-        <span style="font-size:13px;color:var(--text-mid)">优先级：</span>
-        <label class="pri-opt" data-pri="0" style="cursor:pointer;font-size:13px"><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#c62828;vertical-align:middle;margin-right:3px;border:2px solid transparent"></span>紧急</label>
-        <label class="pri-opt" data-pri="1" style="cursor:pointer;font-size:13px"><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#e65100;vertical-align:middle;margin-right:3px;border:2px solid transparent"></span>重要</label>
-        <label class="pri-opt" data-pri="2" style="cursor:pointer;font-size:13px"><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#2e7d32;vertical-align:middle;margin-right:3px;border:2px solid transparent"></span>一般</label>
-        <label class="pri-opt" data-pri="3" style="cursor:pointer;font-size:13px"><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#1565c0;vertical-align:middle;margin-right:3px;border:2px solid transparent"></span>长期待办</label>
-        <input type="hidden" id="newBugPriority" value="2">
-      </div>
-      <div style="display:flex;gap:10px;justify-content:center">
-        <button class="btn btn-primary" onclick="submitNewBug()" style="flex:1;max-width:160px">添加</button>
-        <button class="btn btn-outline" onclick="this.closest('[style*=fixed]').remove()" style="flex:1;max-width:120px">取消</button>
-      </div>
-    </div>`;
-  document.body.appendChild(overlay);
-  // Wire up priority selector
-  overlay.querySelectorAll('.pri-opt').forEach(label => {
-    if (label.dataset.pri === '2') label.querySelector('span').style.border = '2px solid var(--text-dark)';
-    label.onclick = () => {
-      document.getElementById('newBugPriority').value = label.dataset.pri;
-      overlay.querySelectorAll('.pri-opt span').forEach(s => s.style.border = '2px solid transparent');
-      label.querySelector('span').style.border = '2px solid var(--text-dark)';
-    };
-  });
-  setTimeout(() => document.getElementById('newBugContent')?.focus(), 100);
-}
-
-async function submitNewBug() {
-  const content = document.getElementById('newBugContent')?.value.trim();
-  if (!content) { _showToast('请输入内容'); return; }
-  const priVal = document.getElementById('newBugPriority')?.value;
-  const priority = priVal !== undefined && priVal !== '' ? parseInt(priVal) : 2;
-  try {
-    const res = await _apiFetch('/api/bug-report', { method: 'POST', body: JSON.stringify({ content, priority }) });
-    if (res.ok) {
-      document.querySelector('[style*="z-index: 300"], [style*="z-index:300"]')?.remove();
-      if (!window._writeQueued) _showToast('✅ 已添加');
-      renderBugList();
-    } else { _showToast('添加失败'); }
-  } catch(e) { _showToast('添加失败'); }
-}
-
-// ── UNSAVED DATA PROTECTION ─────────────────────────────
-window.addEventListener('beforeunload', e => {
-  const hasDirty = recipes.some(r => r._dirty);
-  if (hasDirty) {
-    e.preventDefault();
-    e.returnValue = '你有未保存的修改，确定要离开吗？';
-  }
-});
-
-// ── ONLINE/OFFLINE DETECTION ────────────────────────────
-window.addEventListener('offline', () => _showToast('⚠️ 网络已断开，操作可能无法保存'));
-window.addEventListener('online', () => _showToast('✅ 网络已恢复'));
-
-// ── SWIPE TO SWITCH TABS ────────────────────────────────
-(function() {
-  let startX = 0, startY = 0;
-
-  function getVisibleTabs() {
-    return Array.from(document.querySelectorAll('.nav-tab')).filter(t => t.offsetParent !== null && t.style.display !== 'none');
-  }
-
-  function getCurrentTabIndex(tabs) {
-    return tabs.findIndex(t => t.classList.contains('active'));
-  }
-
-  // Listen on document body to catch swipes on any page
-  let _swipeStartTarget = null;
-  document.addEventListener('touchstart', e => {
-    // Don't intercept if overlay is open
-    if (document.getElementById('detailOverlay')?.style.display === 'block') return;
-    _swipeStartTarget = e.target;
-    startX = e.touches[0].clientX;
-    startY = e.touches[0].clientY;
-  }, { passive: true });
-
-  document.addEventListener('touchend', e => {
-    if (document.getElementById('detailOverlay')?.style.display === 'block') return;
-    // Don't switch tabs if swipe started inside category carousel
-    if (_swipeStartTarget && _swipeStartTarget.closest('.cat-wrap')) return;
-    const dx = startX - e.changedTouches[0].clientX;
-    const dy = startY - e.changedTouches[0].clientY;
-    if (Math.abs(dx) < 80 || Math.abs(dy) > Math.abs(dx)) return;
-
-    const tabs = getVisibleTabs();
-    const idx = getCurrentTabIndex(tabs);
-    if (idx < 0) return;
-
-    if (dx > 0 && idx < tabs.length - 1) {
-      tabs[idx + 1].click();
-      window.scrollTo(0, 0);
-    } else if (dx < 0 && idx > 0) {
-      tabs[idx - 1].click();
-      window.scrollTo(0, 0);
-    }
-  }, { passive: true });
-})();
-
-// ── ASYNC INIT ──────────────────────────────────────────
-_initToken();
-(async function() {
-  try {
-    await _apiLoadMe();
-    _applyPermissions();
-    await _apiLoadOils();
-    await _apiLoadRecipes();
-    await _apiLoadTags();
-    filterRecipes();
-    renderCategories();
-    await loadDiary();
-    loadFavorites().then(() => { filterRecipes(); renderPersonalSection(); });
-    loadBrand();
-    loadProjects();
-    loadInventory();
-    loadNotifications();
-    // Restore last viewed section on refresh
-    try {
-      const saved = sessionStorage.getItem('oil_current_section');
-      if (saved && document.getElementById('section-' + saved)) {
-        showSection(saved);
-      }
-    } catch(e) {}
-    // Poll for new notifications every 30s, and bug list if on bug page
-    function _pollBugs() {
-      if (currentUser.role !== 'admin') return;
-      _apiFetch('/api/bug-reports').then(r => r.json()).then(bugs => {
-        const active = bugs.filter(b => b.is_resolved !== 2);
-        const bugTab = document.getElementById('bugNavTab');
-        if (bugTab) bugTab.textContent = active.length > 0 ? '🐛 Bug (' + active.length + ')' : '🐛 Bug';
-        const bugSection = document.getElementById('section-bugs');
-        // Don't re-render bug list while viewing (it collapses expanded items)
-        // Bug tab count still updates via _pollBugs
-      }).catch(() => {});
-    }
-    _pollBugs();
-
-    setInterval(() => {
-      if (document.visibilityState !== 'visible') return;
-      // Refresh user permissions
-      _apiFetch('/api/me').then(r => r.json()).then(me => {
-        const changed = me.role !== currentUser.role || me.business_verified !== currentUser.business_verified;
-        Object.assign(currentUser, me);
-        if (changed) _applyPermissions();
-      }).catch(() => {});
-      loadNotifications();
-      _pollBugs();
-      _checkVersion();
-      _flushPendingWrites();
-      // Refresh account page if viewing it
-      const accPanel = document.getElementById('diaryAccountPanel');
-      if (accPanel && accPanel.style.display !== 'none') {
-        _apiFetch('/api/me').then(r => r.json()).then(me => {
-          currentUser.business_verified = me.business_verified;
-          renderAccountUI();
-        }).catch(() => {});
-      }
-      // Refresh user management page if viewing it
-      const usersSection = document.getElementById('section-users');
-      if (usersSection && usersSection.classList.contains('active')) {
-        _usersCache = null;
-        renderUsers();
-      }
-    }, 15000);
-  } catch(e) {
-    console.error('Init error:', e);
-    document.querySelector('.main').innerHTML = '<div style="padding:40px;color:red;text-align:center">加载出错: ' + e.message + '<br><pre>' + e.stack + '</pre></div>';
-  }
-})();
-</script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="doTERRA配方" />
+    <title>doTERRA 配方计算器</title>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
 </html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
new file mode 100644
index 0000000..c9fef6d
--- /dev/null
+++ b/frontend/package-lock.json
@@ -0,0 +1,4238 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "frontend",
+      "version": "0.0.0",
+      "dependencies": {
+        "exceljs": "^4.4.0",
+        "html2canvas": "^1.4.1",
+        "pinia": "^2.3.1",
+        "vue": "^3.5.32",
+        "vue-router": "^4.6.4"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.5",
+        "cypress": "^15.13.0",
+        "vite": "^8.0.4"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@cypress/request": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.10.tgz",
+      "integrity": "sha512-hauBrOdvu08vOsagkZ/Aju5XuiZx6ldsLfByg1htFeldhex+PeMrYauANzFsMJeAA0+dyPLbDoX2OYuvVoLDkQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~4.0.4",
+        "http-signature": "~1.4.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "performance-now": "^2.1.0",
+        "qs": "~6.14.1",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "^5.0.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^8.3.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@cypress/xvfb": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz",
+      "integrity": "sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.1.0",
+        "lodash.once": "^4.1.1"
+      }
+    },
+    "node_modules/@cypress/xvfb/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
+      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
+      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@fast-csv/format": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/@fast-csv/format/-/format-4.3.5.tgz",
+      "integrity": "sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0"
+      }
+    },
+    "node_modules/@fast-csv/format/node_modules/@types/node": {
+      "version": "14.18.63",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
+      "license": "MIT"
+    },
+    "node_modules/@fast-csv/parse": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/@fast-csv/parse/-/parse-4.3.6.tgz",
+      "integrity": "sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.groupby": "^4.6.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/@fast-csv/parse/node_modules/@types/node": {
+      "version": "14.18.63",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.2.tgz",
+      "integrity": "sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.122.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.122.0.tgz",
+      "integrity": "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.12.tgz",
+      "integrity": "sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.12.tgz",
+      "integrity": "sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.12.tgz",
+      "integrity": "sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.12.tgz",
+      "integrity": "sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.12.tgz",
+      "integrity": "sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.12.tgz",
+      "integrity": "sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.12.tgz",
+      "integrity": "sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.12.tgz",
+      "integrity": "sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
+      "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "25.5.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.5.2.tgz",
+      "integrity": "sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@types/sinonjs__fake-timers": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
+      "integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.10.tgz",
+      "integrity": "sha512-TC0dmN0K8YcWEAEfiPi5gJP14eJe30TTGjkvek3iM/1NdHHsdCA/Td6GvNndMOo/iSnIsZ4HuuhrYPDAmbxzww==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/tmp": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@types/tmp/-/tmp-0.2.6.tgz",
+      "integrity": "sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.5.tgz",
+      "integrity": "sha512-bL3AxKuQySfk1iGcBsQnoRVexTPJq0Z/ixFVM8OhVJAP6ZXXXLtM7NFKWhLl30Kg7uTBqIaPXbh+nuQCuBDedg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-rc.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.32.tgz",
+      "integrity": "sha512-4x74Tbtqnda8s/NSD6e1Dr5p1c8HdMU5RWSjMSUzb8RTcUQqevDCxVAitcLBKT+ie3o0Dl9crc/S/opJM7qBGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.2",
+        "@vue/shared": "3.5.32",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.32.tgz",
+      "integrity": "sha512-ybHAu70NtiEI1fvAUz3oXZqkUYEe5J98GjMDpTGl5iHb0T15wQYLR4wE3h9xfuTNA+Cm2f4czfe8B4s+CCH57Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.32",
+        "@vue/shared": "3.5.32"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.32.tgz",
+      "integrity": "sha512-8UYUYo71cP/0YHMO814TRZlPuUUw3oifHuMR7Wp9SNoRSrxRQnhMLNlCeaODNn6kNTJsjFoQ/kqIj4qGvya4Xg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.2",
+        "@vue/compiler-core": "3.5.32",
+        "@vue/compiler-dom": "3.5.32",
+        "@vue/compiler-ssr": "3.5.32",
+        "@vue/shared": "3.5.32",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.8",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.32.tgz",
+      "integrity": "sha512-Gp4gTs22T3DgRotZ8aA/6m2jMR+GMztvBXUBEUOYOcST+giyGWJ4WvFd7QLHBkzTxkfOt8IELKNdpzITLbA2rw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.32",
+        "@vue/shared": "3.5.32"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.32.tgz",
+      "integrity": "sha512-/ORasxSGvZ6MN5gc+uE364SxFdJ0+WqVG0CENXaGW58TOCdrAW76WWaplDtECeS1qphvtBZtR+3/o1g1zL4xPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.32"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.32.tgz",
+      "integrity": "sha512-pDrXCejn4UpFDFmMd27AcJEbHaLemaE5o4pbb7sLk79SRIhc6/t34BQA7SGNgYtbMnvbF/HHOftYBgFJtUoJUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.32",
+        "@vue/shared": "3.5.32"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.32.tgz",
+      "integrity": "sha512-1CDVv7tv/IV13V8Nip1k/aaObVbWqRlVCVezTwx3K07p7Vxossp5JU1dcPNhJk3w347gonIUT9jQOGutyJrSVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.32",
+        "@vue/runtime-core": "3.5.32",
+        "@vue/shared": "3.5.32",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.32.tgz",
+      "integrity": "sha512-IOjm2+JQwRFS7W28HNuJeXQle9KdZbODFY7hFGVtnnghF51ta20EWAZJHX+zLGtsHhaU6uC9BGPV52KVpYryMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.32",
+        "@vue/shared": "3.5.32"
+      },
+      "peerDependencies": {
+        "vue": "3.5.32"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.32.tgz",
+      "integrity": "sha512-ksNyrmRQzWJJ8n3cRDuSF7zNNontuJg1YHnmWRJd2AMu8Ij2bqwiiri2lH5rHtYPZjj4STkNcgcmiQqlOjiYGg==",
+      "license": "MIT"
+    },
+    "node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/arch": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
+      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/archiver": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
+      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^2.1.0",
+        "async": "^3.2.4",
+        "buffer-crc32": "^0.2.1",
+        "readable-stream": "^3.6.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^2.2.0",
+        "zip-stream": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/archiver-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
+      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/archiver-utils/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/asn1": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
+      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/aws4": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
+      "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "node_modules/big-integer": {
+      "version": "1.6.52",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
+      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/binary": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
+      "integrity": "sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffers": "~0.1.1",
+        "chainsaw": "~0.1.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/blob-util": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
+      "integrity": "sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/bluebird": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
+      "integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==",
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-indexof-polyfill": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz",
+      "integrity": "sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/buffers": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
+      "integrity": "sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==",
+      "engines": {
+        "node": ">=0.2.0"
+      }
+    },
+    "node_modules/cachedir": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.4.0.tgz",
+      "integrity": "sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/chainsaw": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
+      "integrity": "sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==",
+      "license": "MIT/X11",
+      "dependencies": {
+        "traverse": ">=0.3.0 <0.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-table3": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.1.tgz",
+      "integrity": "sha512-w0q/enDHhPLq44ovMGdQeeDLvwxwavsJX7oQGYt/LrBlYsyaxyDnp6z3QzFut/6kLLKnlcUVJLrpB7KBfgG/RA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": "10.* || >= 12.*"
+      },
+      "optionalDependencies": {
+        "colors": "1.4.0"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+      "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^3.0.0",
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/compress-commons": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
+      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "^0.2.13",
+        "crc32-stream": "^4.0.2",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "license": "MIT"
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc32-stream": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
+      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+      "license": "MIT",
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^3.4.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/cypress": {
+      "version": "15.13.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.13.0.tgz",
+      "integrity": "sha512-hJ9sY++TUC/HlUzHVJpIrDyqKMjlhx5PTXl/A7eA91JNEtUWkJAqefQR5mo9AtLra/9+m+JJaMg2U5Qd0a74Fw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cypress/request": "^3.0.10",
+        "@cypress/xvfb": "^1.2.4",
+        "@types/sinonjs__fake-timers": "8.1.1",
+        "@types/sizzle": "^2.3.2",
+        "@types/tmp": "^0.2.3",
+        "arch": "^2.2.0",
+        "blob-util": "^2.0.2",
+        "bluebird": "^3.7.2",
+        "buffer": "^5.7.1",
+        "cachedir": "^2.3.0",
+        "chalk": "^4.1.0",
+        "ci-info": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-table3": "0.6.1",
+        "commander": "^6.2.1",
+        "common-tags": "^1.8.0",
+        "dayjs": "^1.10.4",
+        "debug": "^4.3.4",
+        "enquirer": "^2.3.6",
+        "eventemitter2": "6.4.7",
+        "execa": "4.1.0",
+        "executable": "^4.1.1",
+        "extract-zip": "2.0.1",
+        "figures": "^3.2.0",
+        "fs-extra": "^9.1.0",
+        "hasha": "5.2.2",
+        "is-installed-globally": "~0.4.0",
+        "listr2": "^3.8.3",
+        "lodash": "^4.17.23",
+        "log-symbols": "^4.0.0",
+        "minimist": "^1.2.8",
+        "ospath": "^1.2.2",
+        "pretty-bytes": "^5.6.0",
+        "process": "^0.11.10",
+        "proxy-from-env": "1.0.0",
+        "request-progress": "^3.0.0",
+        "supports-color": "^8.1.1",
+        "systeminformation": "^5.31.1",
+        "tmp": "~0.2.4",
+        "tree-kill": "1.2.2",
+        "tslib": "1.14.1",
+        "untildify": "^4.0.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "cypress": "bin/cypress"
+      },
+      "engines": {
+        "node": "^20.1.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/cypress/node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cypress/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz",
+      "integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "node_modules/duplexer2/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/duplexer2/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/duplexer2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/enquirer": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
+      "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-colors": "^4.1.1",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/eventemitter2": {
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
+      "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/exceljs": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/exceljs/-/exceljs-4.4.0.tgz",
+      "integrity": "sha512-XctvKaEMaj1Ii9oDOqbW/6e1gXknSY4g/aLCDicOXqBE4M0nRWkUu0PTp++UPNzoFY12BNHMfs/VadKIS6llvg==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver": "^5.0.0",
+        "dayjs": "^1.8.34",
+        "fast-csv": "^4.3.1",
+        "jszip": "^3.10.1",
+        "readable-stream": "^3.6.0",
+        "saxes": "^5.0.1",
+        "tmp": "^0.2.0",
+        "unzipper": "^0.10.11",
+        "uuid": "^8.3.0"
+      },
+      "engines": {
+        "node": ">=8.3.0"
+      }
+    },
+    "node_modules/execa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+      "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "get-stream": "^5.0.0",
+        "human-signals": "^1.1.1",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.0",
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/executable": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
+      "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/fast-csv": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/fast-csv/-/fast-csv-4.3.6.tgz",
+      "integrity": "sha512-2RNSpuwwsJGP0frGsOmTb9oUF+VkFSM4SyLTDgwf2ciHWTarN0lQTC+F2f/t5J9QjW+c65VFIAAu85GsvMIusw==",
+      "license": "MIT",
+      "dependencies": {
+        "@fast-csv/format": "4.3.5",
+        "@fast-csv/parse": "4.3.6"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT"
+    },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "deprecated": "This package is no longer supported.",
+      "license": "ISC",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/global-dirs": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+      "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasha": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz",
+      "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-stream": "^2.0.0",
+        "type-fest": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-signature": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz",
+      "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^2.0.2",
+        "sshpk": "^1.18.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.12.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+      "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-installed-globally": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "global-dirs": "^3.0.0",
+        "is-path-inside": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true,
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsprim": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
+      "integrity": "sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      }
+    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/lazystream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
+    "node_modules/lazystream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/lazystream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/lazystream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/listenercount": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
+      "integrity": "sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==",
+      "license": "ISC"
+    },
+    "node_modules/listr2": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
+      "integrity": "sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cli-truncate": "^2.1.0",
+        "colorette": "^2.0.16",
+        "log-update": "^4.0.0",
+        "p-map": "^4.0.0",
+        "rfdc": "^1.3.0",
+        "rxjs": "^7.5.1",
+        "through": "^2.3.8",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "enquirer": ">= 2.3.0 < 3"
+      },
+      "peerDependenciesMeta": {
+        "enquirer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.escaperegexp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
+      "integrity": "sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.groupby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz",
+      "integrity": "sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnil": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz",
+      "integrity": "sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha512-MXB1is3s899/cD8jheYYE2V9qTHwKvt+npCwpD+1Sxm3Q3cECXCiYHjeHWXNwr6Q0SOBPrYUDxendrO6goVTEA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.union": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
+      "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "license": "MIT"
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
+      "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^4.3.0",
+        "cli-cursor": "^3.1.0",
+        "slice-ansi": "^4.0.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ospath": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
+      "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/pretty-bytes": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
+      "integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pump": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
+      "integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
+      "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.1.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/brace-expansion": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.3.tgz",
+      "integrity": "sha512-MCV/fYJEbqx68aE58kv2cA/kiky1G8vux3OR6/jbS+jIMe/6fJWa0DTzJU7dqijOWYwHi1t29FlfYI9uytqlpA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/minimatch": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/request-progress": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
+      "integrity": "sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "throttleit": "^1.0.0"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.12.tgz",
+      "integrity": "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.122.0",
+        "@rolldown/pluginutils": "1.0.0-rc.12"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.12",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.12",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.12",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.12",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12"
+      }
+    },
+    "node_modules/rolldown/node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.12.tgz",
+      "integrity": "sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/slice-ansi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+      "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sshpk": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
+      "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/systeminformation": {
+      "version": "5.31.5",
+      "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.31.5.tgz",
+      "integrity": "sha512-5SyLdip4/3alxD4Kh+63bUQTJmu7YMfYQTC+koZy7X73HgNqZSD2P4wOZQWtUncvPvcEmnfIjCoygN4MRoEejQ==",
+      "dev": true,
+      "license": "MIT",
+      "os": [
+        "darwin",
+        "linux",
+        "win32",
+        "freebsd",
+        "openbsd",
+        "netbsd",
+        "sunos",
+        "android"
+      ],
+      "bin": {
+        "systeminformation": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "Buy me a coffee",
+        "url": "https://www.buymeacoffee.com/systeminfo"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/throttleit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.1.tgz",
+      "integrity": "sha512-vDZpf9Chs9mAdfY046mcPt8fg5QSZr37hEH4TXYBnDF+izxgrbRGUAAaBvIk/fJm9aOFCGFd1EsNg5AZCbnQCQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tmp": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/traverse": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
+      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
+      "license": "MIT/X11",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
+      "dev": true,
+      "license": "Unlicense"
+    },
+    "node_modules/type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/untildify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/unzipper": {
+      "version": "0.10.14",
+      "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
+      "integrity": "sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==",
+      "license": "MIT",
+      "dependencies": {
+        "big-integer": "^1.6.17",
+        "binary": "~0.3.0",
+        "bluebird": "~3.4.1",
+        "buffer-indexof-polyfill": "~1.0.0",
+        "duplexer2": "~0.1.4",
+        "fstream": "^1.0.12",
+        "graceful-fs": "^4.2.2",
+        "listenercount": "~1.0.1",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "~1.0.4"
+      }
+    },
+    "node_modules/unzipper/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/unzipper/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/unzipper/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "node_modules/verror/node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.5.tgz",
+      "integrity": "sha512-nmu43Qvq9UopTRfMx2jOYW5l16pb3iDC1JH6yMuPkpVbzK0k+L7dfsEDH4jRgYFmsg0sTAqkojoZgzLMlwHsCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.8",
+        "rolldown": "1.0.0-rc.12",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.32.tgz",
+      "integrity": "sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.32",
+        "@vue/compiler-sfc": "3.5.32",
+        "@vue/runtime-dom": "3.5.32",
+        "@vue/server-renderer": "3.5.32",
+        "@vue/shared": "3.5.32"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "license": "MIT"
+    },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "node_modules/zip-stream": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
+      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^3.0.4",
+        "compress-commons": "^4.1.2",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/archiver-utils": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
+      "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^7.2.3",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    }
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..aa2a56e
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
+    "test:e2e": "cypress run"
+  },
+  "dependencies": {
+    "exceljs": "^4.4.0",
+    "html2canvas": "^1.4.1",
+    "pinia": "^2.3.1",
+    "vue": "^3.5.32",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "cypress": "^15.13.0",
+    "vite": "^8.0.4"
+  }
+}
diff --git a/frontend/apple-touch-icon-180.png b/frontend/public/apple-touch-icon-180.png
similarity index 100%
rename from frontend/apple-touch-icon-180.png
rename to frontend/public/apple-touch-icon-180.png
diff --git a/frontend/apple-touch-icon-192.png b/frontend/public/apple-touch-icon-192.png
similarity index 100%
rename from frontend/apple-touch-icon-192.png
rename to frontend/public/apple-touch-icon-192.png
diff --git a/frontend/apple-touch-icon.png b/frontend/public/apple-touch-icon.png
similarity index 100%
rename from frontend/apple-touch-icon.png
rename to frontend/public/apple-touch-icon.png
diff --git a/frontend/favicon.svg b/frontend/public/favicon.svg
similarity index 100%
rename from frontend/favicon.svg
rename to frontend/public/favicon.svg
diff --git a/frontend/icon-192.png b/frontend/public/icon-192.png
similarity index 100%
rename from frontend/icon-192.png
rename to frontend/public/icon-192.png
diff --git a/frontend/public/icons.svg b/frontend/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/frontend/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/frontend/scripts/demo-subtitles.srt b/frontend/scripts/demo-subtitles.srt
new file mode 100644
index 0000000..b7292ba
--- /dev/null
+++ b/frontend/scripts/demo-subtitles.srt
@@ -0,0 +1,75 @@
+1
+00:00:00,500 --> 00:00:04,500
+欢迎使用 doTERRA 精油配方计算器，这是一个功能完整的精油配方管理工具
+
+2
+00:00:05,000 --> 00:00:08,500
+首页展示了所有公共配方，以卡片形式排列
+
+3
+00:00:09,000 --> 00:00:11,500
+可以上下滚动浏览更多配方
+
+4
+00:00:12,000 --> 00:00:15,500
+在搜索框输入关键词，可以快速筛选配方
+
+5
+00:00:16,000 --> 00:00:19,500
+输入"薰衣草"，立即过滤出包含薰衣草的配方
+
+6
+00:00:20,000 --> 00:00:24,000
+点击任意配方卡片，查看配方详情
+
+7
+00:00:24,500 --> 00:00:29,000
+详情页显示精油成分、用量、单价和总成本
+
+8
+00:00:30,000 --> 00:00:34,000
+切换到"精油价目"页面，查看所有精油价格
+
+9
+00:00:34,500 --> 00:00:37,500
+支持按名称搜索精油
+
+10
+00:00:38,000 --> 00:00:41,500
+可以切换"瓶价"和"滴价"两种显示模式
+
+11
+00:00:42,000 --> 00:00:46,500
+"管理配方"页面用于配方的增删改查和批量操作
+
+12
+00:00:47,000 --> 00:00:51,000
+支持标签筛选、批量打标签、批量导出卡片
+
+13
+00:00:52,000 --> 00:00:56,000
+"个人库存"页面标记自己拥有的精油
+
+14
+00:00:56,500 --> 00:00:59,500
+系统会自动推荐你能制作的配方
+
+15
+00:01:00,000 --> 00:01:05,000
+"操作日志"记录所有数据变更，支持按类型和用户筛选
+
+16
+00:01:06,000 --> 00:01:10,500
+内置 Bug 追踪系统，支持优先级、状态流转和评论
+
+17
+00:01:12,000 --> 00:01:17,000
+"用户管理"可以创建用户、分配角色、审核翻译建议
+
+18
+00:01:18,000 --> 00:01:22,000
+最后回到首页，演示到此结束
+
+19
+00:01:22,500 --> 00:01:26,000
+感谢观看！这是基于 Vue 3 + Vite + Pinia 构建的现代化应用
diff --git a/frontend/scripts/generate-demo-video.sh b/frontend/scripts/generate-demo-video.sh
new file mode 100644
index 0000000..5dc6e4d
--- /dev/null
+++ b/frontend/scripts/generate-demo-video.sh
@@ -0,0 +1,67 @@
+#!/bin/bash
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+FRONTEND_DIR="$(dirname "$SCRIPT_DIR")"
+PROJECT_DIR="$(dirname "$FRONTEND_DIR")"
+OUTPUT_DIR="$FRONTEND_DIR/demo-output"
+
+mkdir -p "$OUTPUT_DIR"
+
+echo "=== Step 1: Generate TTS audio ==="
+source "$PROJECT_DIR/.venv/bin/activate"
+python3 "$SCRIPT_DIR/generate-tts.py" "$OUTPUT_DIR"
+
+echo "=== Step 2: Record Cypress demo ==="
+cd "$FRONTEND_DIR"
+npx cypress run --spec "cypress/e2e/demo-walkthrough.cy.js" || true
+
+# Find the recorded video
+VIDEO=$(find cypress/videos -name "demo-walkthrough*" -type f 2>/dev/null | head -1)
+if [ -z "$VIDEO" ]; then
+  echo "ERROR: No video found in cypress/videos/"
+  exit 1
+fi
+echo "Found video: $VIDEO"
+cp "$VIDEO" "$OUTPUT_DIR/raw-screen.mp4"
+
+echo "=== Step 3: Combine video + audio + subtitles ==="
+
+# Get video and audio durations
+VIDEO_DUR=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$OUTPUT_DIR/raw-screen.mp4" | cut -d. -f1)
+AUDIO_DUR=$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$OUTPUT_DIR/narration.mp3" | cut -d. -f1)
+echo "Video: ${VIDEO_DUR}s, Audio: ${AUDIO_DUR}s"
+
+# Use the longer duration, speed-adjust video if needed
+if [ "$VIDEO_DUR" -gt "$AUDIO_DUR" ]; then
+  # Speed up video to match audio length
+  SPEED=$(python3 -c "print(round($VIDEO_DUR / $AUDIO_DUR, 3))")
+  echo "Speeding up video by ${SPEED}x"
+  ffmpeg -y -i "$OUTPUT_DIR/raw-screen.mp4" \
+    -filter:v "setpts=PTS/${SPEED}" \
+    -an "$OUTPUT_DIR/adjusted-screen.mp4" 2>/dev/null
+elif [ "$AUDIO_DUR" -gt "$VIDEO_DUR" ]; then
+  # Slow down video
+  SPEED=$(python3 -c "print(round($VIDEO_DUR / $AUDIO_DUR, 3))")
+  echo "Slowing video to ${SPEED}x"
+  ffmpeg -y -i "$OUTPUT_DIR/raw-screen.mp4" \
+    -filter:v "setpts=PTS/${SPEED}" \
+    -an "$OUTPUT_DIR/adjusted-screen.mp4" 2>/dev/null
+else
+  cp "$OUTPUT_DIR/raw-screen.mp4" "$OUTPUT_DIR/adjusted-screen.mp4"
+fi
+
+# Combine: video + audio + burned-in subtitles
+ffmpeg -y \
+  -i "$OUTPUT_DIR/adjusted-screen.mp4" \
+  -i "$OUTPUT_DIR/narration.mp3" \
+  -vf "subtitles=$SCRIPT_DIR/demo-subtitles.srt:force_style='FontSize=20,FontName=Noto Sans CJK SC,PrimaryColour=&H00FFFFFF,OutlineColour=&H00000000,Outline=2,Shadow=1,MarginV=30'" \
+  -c:v libx264 -preset fast -crf 23 \
+  -c:a aac -b:a 128k \
+  -shortest \
+  "$OUTPUT_DIR/demo-final.mp4" 2>/dev/null
+
+echo ""
+echo "=== Done! ==="
+echo "Output: $OUTPUT_DIR/demo-final.mp4"
+ls -lh "$OUTPUT_DIR/demo-final.mp4"
diff --git a/frontend/scripts/generate-tts.py b/frontend/scripts/generate-tts.py
new file mode 100644
index 0000000..26092e6
--- /dev/null
+++ b/frontend/scripts/generate-tts.py
@@ -0,0 +1,142 @@
+#!/usr/bin/env python3
+"""Generate TTS narration for the demo video using edge-tts.
+Uses XiaoxiaoNeural with natural pacing and SSML prosody control."""
+
+import asyncio
+import sys
+import os
+import struct
+import wave
+
+OUTPUT_DIR = sys.argv[1] if len(sys.argv) > 1 else "demo-output"
+
+# (start_seconds, text, [optional: pause_after_ms])
+# Timeline aligned with demo-subtitles.srt and demo-walkthrough.cy.js
+SEGMENTS = [
+    (0.5,  '欢迎使用 doTERRA 精油配方计算器。这是一个功能完整的精油配方管理工具。'),
+    (5.0,  '首页展示了所有公共配方，以卡片形式排列。'),
+    (9.0,  '可以上下滚动，浏览更多配方。'),
+    (12.0, '在搜索框输入关键词，可以快速筛选配方。'),
+    (16.0, '输入薰衣草，立即过滤出包含薰衣草的配方。'),
+    (20.0, '点击任意配方卡片，查看配方详情。'),
+    (24.5, '详情页显示精油成分、用量、单价、和总成本。'),
+    (30.0, '切换到精油价目页面，查看所有精油价格。'),
+    (34.5, '支持按名称搜索精油。'),
+    (38.0, '可以切换瓶价和滴价两种显示模式。'),
+    (42.0, '管理配方页面，用于配方的增删改查和批量操作。'),
+    (47.0, '支持标签筛选、批量打标签、批量导出卡片。'),
+    (52.0, '个人库存页面，标记自己拥有的精油。'),
+    (56.5, '系统会自动推荐你能制作的配方。'),
+    (60.0, '操作日志记录所有数据变更，支持按类型和用户筛选。'),
+    (66.0, '内置Bug追踪系统，支持优先级、状态流转和评论。'),
+    (72.0, '用户管理可以创建用户、分配角色、审核翻译建议。'),
+    (78.0, '最后回到首页。演示到此结束。'),
+    (82.5, '感谢观看！这是基于Vue 3、Vite和Pinia构建的现代化应用。'),
+]
+
+VOICE = "zh-CN-XiaoxiaoNeural"
+RATE = "+0%"
+PITCH = "+0Hz"
+
+try:
+    import edge_tts
+except ImportError:
+    print("Installing edge-tts...")
+    os.system(f"{sys.executable} -m pip install edge-tts -q")
+    import edge_tts
+
+
+async def generate_segment(text, output_path):
+    """Generate a single TTS segment with natural prosody."""
+    communicate = edge_tts.Communicate(text, VOICE, rate=RATE, pitch=PITCH)
+    await communicate.save(output_path)
+
+
+async def main():
+    os.makedirs(OUTPUT_DIR, exist_ok=True)
+    segment_files = []
+
+    print(f"Generating {len(SEGMENTS)} TTS segments with {VOICE}...")
+
+    for i, (start_sec, text) in enumerate(SEGMENTS):
+        seg_path = os.path.join(OUTPUT_DIR, f"seg_{i:02d}.mp3")
+        print(f"  [{i+1}/{len(SEGMENTS)}] {start_sec:5.1f}s  {text[:40]}...")
+        await generate_segment(text, seg_path)
+        segment_files.append((start_sec, seg_path))
+
+    # Total duration: last segment start + 8s buffer
+    total_duration = SEGMENTS[-1][0] + 8
+
+    print(f"\nAssembling narration track ({total_duration:.0f}s)...")
+
+    # Generate silence base
+    silence_path = os.path.join(OUTPUT_DIR, "silence.mp3")
+    os.system(
+        f'ffmpeg -y -f lavfi -i anullsrc=r=44100:cl=mono '
+        f'-t {total_duration} -c:a libmp3lame -q:a 2 "{silence_path}" 2>/dev/null'
+    )
+
+    # Build ffmpeg complex filter to overlay each segment at its timestamp
+    inputs = [f'-i "{silence_path}"']
+    filter_parts = []
+
+    for i, (start_sec, seg_path) in enumerate(segment_files):
+        inputs.append(f'-i "{seg_path}"')
+        delay_ms = int(start_sec * 1000)
+        # Normalize volume for each segment
+        filter_parts.append(f'[{i+1}]adelay={delay_ms}|{delay_ms},volume=1.5[d{i}]')
+
+    # Mix all
+    mix_inputs = "[0]" + "".join(f"[d{i}]" for i in range(len(segment_files)))
+    n_inputs = len(segment_files) + 1
+    filter_parts.append(
+        f'{mix_inputs}amix=inputs={n_inputs}:duration=longest:dropout_transition=0,'
+        f'volume={n_inputs}[out]'
+    )
+
+    filter_str = ";".join(filter_parts)
+    output_path = os.path.join(OUTPUT_DIR, "narration.mp3")
+
+    cmd = (
+        f'ffmpeg -y {" ".join(inputs)} '
+        f'-filter_complex "{filter_str}" '
+        f'-map "[out]" -c:a libmp3lame -q:a 2 "{output_path}" 2>/dev/null'
+    )
+
+    ret = os.system(cmd)
+    if ret != 0:
+        print("ERROR: ffmpeg narration assembly failed")
+        print("Trying fallback: simple concatenation...")
+        # Fallback: just concatenate with silence gaps
+        concat_list = os.path.join(OUTPUT_DIR, "concat.txt")
+        with open(concat_list, "w") as f:
+            prev_end = 0
+            for start_sec, seg_path in segment_files:
+                gap = start_sec - prev_end
+                if gap > 0:
+                    gap_path = os.path.join(OUTPUT_DIR, f"gap_{prev_end:.0f}.mp3")
+                    os.system(f'ffmpeg -y -f lavfi -i anullsrc=r=44100:cl=mono -t {gap} -c:a libmp3lame -q:a 2 "{gap_path}" 2>/dev/null')
+                    f.write(f"file '{gap_path}'\n")
+                f.write(f"file '{seg_path}'\n")
+                # Estimate segment duration ~3s
+                prev_end = start_sec + 3
+        os.system(f'ffmpeg -y -f concat -safe 0 -i "{concat_list}" -c:a libmp3lame -q:a 2 "{output_path}" 2>/dev/null')
+
+    # Cleanup
+    for _, seg_path in segment_files:
+        try: os.remove(seg_path)
+        except: pass
+    try: os.remove(silence_path)
+    except: pass
+
+    print(f"\nDone! Output: {output_path}")
+    if os.path.exists(output_path):
+        size = os.path.getsize(output_path) / 1024
+        print(f"Size: {size:.0f} KB")
+    else:
+        print("ERROR: Output file not created")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    asyncio.run(main())
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
new file mode 100644
index 0000000..573084e
--- /dev/null
+++ b/frontend/src/App.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="app-header" style="position:relative">
+    <div class="header-inner" style="padding-right:80px">
+      <div class="header-icon">🌿</div>
+      <div class="header-title" style="text-align:left;flex:1">
+        <h1 style="display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap">
+          <span style="flex-shrink:0">doTERRA 配方计算器
+            <span v-if="auth.isAdmin" style="font-size:10px;font-weight:400;opacity:0.5;vertical-align:top">v2.2.0</span>
+          </span>
+          <span
+            style="cursor:pointer;color:white;font-size:13px;font-weight:500;flex-shrink:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif;letter-spacing:0.3px;opacity:0.95"
+            @click="toggleUserMenu"
+          >
+            <template v-if="auth.isLoggedIn">
+              👤 {{ auth.user.display_name || auth.user.username }} ▾
+            </template>
+            <template v-else>
+              <span style="background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:12px">登录</span>
+            </template>
+          </span>
+        </h1>
+        <p style="display:flex;flex-wrap:wrap;gap:4px 8px;margin:0">
+          <span style="white-space:nowrap">查询配方</span>
+          <span style="opacity:0.5">·</span>
+          <span style="white-space:nowrap">计算成本</span>
+          <span style="opacity:0.5">·</span>
+          <span style="white-space:nowrap">自制配方</span>
+          <span style="opacity:0.5">·</span>
+          <span style="white-space:nowrap">导出卡片</span>
+          <span style="opacity:0.5">·</span>
+          <span style="white-space:nowrap">精油知识</span>
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- User Menu Popup -->
+  <UserMenu v-if="showUserMenu" @close="showUserMenu = false" />
+
+  <!-- Nav tabs -->
+  <div class="nav-tabs">
+    <div class="nav-tab" :class="{ active: ui.currentSection === 'search' }" @click="goSection('search')">🔍 配方查询</div>
+    <div class="nav-tab" :class="{ active: ui.currentSection === 'manage' }" @click="requireLogin('manage')">📋 管理配方</div>
+    <div class="nav-tab" :class="{ active: ui.currentSection === 'inventory' }" @click="requireLogin('inventory')">📦 个人库存</div>
+    <div class="nav-tab" :class="{ active: ui.currentSection === 'oils' }" @click="goSection('oils')">💧 精油价目</div>
+    <div v-if="auth.isBusiness" class="nav-tab" :class="{ active: ui.currentSection === 'projects' }" @click="goSection('projects')">💼 商业核算</div>
+    <div v-if="auth.isAdmin" class="nav-tab" :class="{ active: ui.currentSection === 'audit' }" @click="goSection('audit')">📜 操作日志</div>
+    <div v-if="auth.isAdmin" class="nav-tab" :class="{ active: ui.currentSection === 'bugs' }" @click="goSection('bugs')">🐛 Bug</div>
+    <div v-if="auth.isAdmin" class="nav-tab" :class="{ active: ui.currentSection === 'users' }" @click="goSection('users')">👥 用户管理</div>
+  </div>
+
+  <!-- Main content -->
+  <div class="main">
+    <router-view />
+  </div>
+
+  <!-- Login Modal -->
+  <LoginModal v-if="ui.showLoginModal" @close="ui.closeLogin()" />
+
+  <!-- Custom Dialog -->
+  <CustomDialog />
+
+  <!-- Toast messages -->
+  <div v-for="(toast, i) in ui.toasts" :key="i" class="toast">{{ toast }}</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from './stores/auth'
+import { useOilsStore } from './stores/oils'
+import { useRecipesStore } from './stores/recipes'
+import { useUiStore } from './stores/ui'
+import LoginModal from './components/LoginModal.vue'
+import CustomDialog from './components/CustomDialog.vue'
+import UserMenu from './components/UserMenu.vue'
+
+const auth = useAuthStore()
+const oils = useOilsStore()
+const recipeStore = useRecipesStore()
+const ui = useUiStore()
+const router = useRouter()
+const showUserMenu = ref(false)
+
+function goSection(name) {
+  ui.showSection(name)
+  router.push('/' + (name === 'search' ? '' : name))
+}
+
+function requireLogin(name) {
+  if (!auth.isLoggedIn) {
+    ui.openLogin()
+    return
+  }
+  goSection(name)
+}
+
+function toggleUserMenu() {
+  if (!auth.isLoggedIn) {
+    ui.openLogin()
+    return
+  }
+  showUserMenu.value = !showUserMenu.value
+}
+
+onMounted(async () => {
+  await auth.initToken()
+  await Promise.all([
+    oils.loadOils(),
+    recipeStore.loadRecipes(),
+    recipeStore.loadTags(),
+  ])
+  if (auth.isLoggedIn) {
+    await recipeStore.loadFavorites()
+  }
+
+  // Periodic refresh
+  setInterval(async () => {
+    if (document.visibilityState !== 'visible') return
+    try {
+      await auth.loadMe()
+    } catch {}
+  }, 15000)
+})
+</script>
diff --git a/frontend/src/assets/styles.css b/frontend/src/assets/styles.css
new file mode 100644
index 0000000..bfc6aa6
--- /dev/null
+++ b/frontend/src/assets/styles.css
@@ -0,0 +1,501 @@
+:root {
+  --cream: #faf6f0;
+  --warm-white: #fffdf9;
+  --sage: #7a9e7e;
+  --sage-dark: #5a7d5e;
+  --sage-light: #c8ddc9;
+  --sage-mist: #eef4ee;
+  --gold: #c9a84c;
+  --gold-light: #f0e4c0;
+  --brown: #6b4f3a;
+  --brown-light: #c4a882;
+  --text-dark: #2c2416;
+  --text-mid: #5a4a35;
+  --text-light: #9a8570;
+  --border: #e0d4c0;
+  --shadow: 0 4px 20px rgba(90,60,30,0.08);
+  --shadow-hover: 0 8px 32px rgba(90,60,30,0.15);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: 'Noto Sans SC', sans-serif;
+  background: var(--cream);
+  color: var(--text-dark);
+  min-height: 100vh;
+}
+
+/* Header */
+.app-header {
+  background: linear-gradient(135deg, #3d6b41 0%, #5a7d5e 50%, #7a9e7e 100%);
+  padding: 28px 32px 24px;
+  position: relative;
+  overflow: hidden;
+}
+.app-header::before {
+  content: '';
+  position: absolute; inset: 0;
+  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+.header-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
+.header-icon { font-size: 40px; }
+.header-title { color: white; }
+.header-title h1 { font-family: 'Noto Serif SC', serif; font-size: 24px; font-weight: 600; letter-spacing: 2px; }
+.header-title p { font-size: 13px; opacity: 0.8; margin-top: 4px; letter-spacing: 1px; }
+
+/* Nav tabs */
+.nav-tabs {
+  display: flex;
+  background: white;
+  border-bottom: 1px solid var(--border);
+  padding: 0 24px;
+  gap: 0;
+  overflow-x: auto;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+.nav-tab {
+  padding: 14px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-light);
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+.nav-tab:hover { color: var(--sage-dark); }
+.nav-tab.active { color: var(--sage-dark); border-bottom-color: var(--sage); }
+
+/* Main content */
+.main { padding: 24px; max-width: 960px; margin: 0 auto; }
+
+/* Section */
+.section { max-width: 800px; margin-left: auto; margin-right: auto; }
+
+/* Search box */
+.search-box {
+  background: white;
+  border-radius: 16px;
+  padding: 20px 24px;
+  box-shadow: var(--shadow);
+  margin-bottom: 20px;
+}
+.search-label { font-size: 13px; color: var(--text-light); margin-bottom: 10px; letter-spacing: 0.5px; }
+.search-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
+.search-input {
+  flex: 1; min-width: 200px;
+  padding: 11px 16px;
+  border: 1.5px solid var(--border);
+  border-radius: 10px;
+  font-size: 15px;
+  font-family: inherit;
+  color: var(--text-dark);
+  background: var(--cream);
+  transition: border-color 0.2s;
+  outline: none;
+}
+.search-input:focus { border-color: var(--sage); background: white; }
+.btn {
+  padding: 11px 22px;
+  border-radius: 10px;
+  border: none;
+  font-size: 14px;
+  font-family: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+.btn-primary { background: var(--sage); color: white; }
+.btn-primary:hover { background: var(--sage-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(90,125,94,0.3); }
+.btn-gold { background: var(--gold); color: white; }
+.btn-gold:hover { background: #b8973e; transform: translateY(-1px); }
+.btn-outline { background: transparent; color: var(--sage-dark); border: 1.5px solid var(--sage); }
+.btn-outline:hover { background: var(--sage-mist); }
+.btn-danger { background: transparent; color: #c0392b; border: 1.5px solid #e8b4b0; }
+.btn-danger:hover { background: #fdf0ee; }
+.btn-sm { padding: 7px 14px; font-size: 13px; }
+
+/* Recipe grid */
+.recipe-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+.recipe-card {
+  background: white;
+  border-radius: 14px;
+  padding: 18px;
+  cursor: pointer;
+  box-shadow: var(--shadow);
+  border: 2px solid transparent;
+  transition: all 0.2s;
+  position: relative;
+}
+.recipe-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--sage-light); }
+.recipe-card.selected { border-color: var(--sage); background: var(--sage-mist); }
+.recipe-card-name {
+  font-family: 'Noto Serif SC', serif;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin-bottom: 8px;
+}
+.recipe-card-oils { font-size: 12px; color: var(--text-light); line-height: 1.7; }
+.recipe-card-price {
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--sage-dark);
+  font-weight: 600;
+  display: flex; align-items: center; gap: 6px;
+}
+
+/* Detail panel */
+.detail-panel {
+  background: white;
+  border-radius: 16px;
+  padding: 28px;
+  box-shadow: var(--shadow);
+  margin-bottom: 24px;
+}
+.detail-header {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
+}
+.detail-title {
+  font-family: 'Noto Serif SC', serif;
+  font-size: 22px; font-weight: 700; color: var(--text-dark);
+}
+.detail-note {
+  font-size: 13px; color: var(--text-light);
+  background: var(--gold-light); border-radius: 8px;
+  padding: 6px 12px; margin-top: 6px;
+  display: inline-block;
+}
+.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
+
+/* Ingredients table */
+.ingredients-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
+.ingredients-table th {
+  text-align: center; padding: 10px 14px;
+  font-size: 12px; font-weight: 600;
+  color: var(--text-light); letter-spacing: 0.5px;
+  border-bottom: 2px solid var(--border);
+  text-transform: uppercase;
+}
+.ingredients-table td {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border);
+  font-size: 14px; vertical-align: middle;
+  text-align: center;
+}
+.ingredients-table tr:last-child td { border-bottom: none; }
+.ingredients-table tr:hover td { background: var(--sage-mist); }
+
+.drops-input {
+  width: 70px; padding: 6px 10px;
+  border: 1.5px solid var(--border); border-radius: 8px;
+  font-size: 14px; font-family: inherit; text-align: center;
+  outline: none; transition: border-color 0.2s;
+}
+.drops-input:focus { border-color: var(--sage); }
+
+.oil-select {
+  padding: 6px 10px;
+  border: 1.5px solid var(--border); border-radius: 8px;
+  font-size: 13px; font-family: inherit;
+  background: white; outline: none;
+  max-width: 160px;
+}
+.oil-select:focus { border-color: var(--sage); }
+
+.remove-btn {
+  background: none; border: none; cursor: pointer;
+  color: #c0392b; font-size: 18px; padding: 4px 8px;
+  border-radius: 6px; transition: background 0.2s;
+}
+.remove-btn:hover { background: #fdf0ee; }
+
+.total-row {
+  background: var(--sage-mist);
+  border-radius: 12px; padding: 16px 20px;
+  display: flex; justify-content: space-between; align-items: center;
+  margin-top: 16px;
+}
+.total-label { font-size: 14px; color: var(--text-mid); font-weight: 500; }
+.total-price { font-size: 22px; font-weight: 700; color: var(--sage-dark); }
+
+/* Add ingredient */
+.add-ingredient-row {
+  display: flex; gap: 10px; align-items: center;
+  margin-top: 12px; flex-wrap: wrap;
+}
+.add-ingredient-row select, .add-ingredient-row input {
+  padding: 8px 12px; border: 1.5px solid var(--border);
+  border-radius: 8px; font-size: 13px; font-family: inherit;
+  outline: none;
+}
+.add-ingredient-row select:focus, .add-ingredient-row input:focus { border-color: var(--sage); }
+
+/* Card preview for export */
+.card-preview-wrapper { margin-top: 20px; }
+.card-brand {
+  font-size: 11px; letter-spacing: 3px; color: var(--sage);
+  margin-bottom: 8px;
+}
+.card-title {
+  font-size: 26px; font-weight: 700; color: var(--text-dark);
+  margin-bottom: 6px; line-height: 1.3;
+}
+.card-divider {
+  width: 48px; height: 2px;
+  background: linear-gradient(90deg, var(--sage), var(--gold));
+  border-radius: 2px; margin: 14px 0;
+}
+.card-note { font-size: 12px; color: var(--brown-light); margin-bottom: 18px; }
+.card-ingredients { list-style: none; margin-bottom: 20px; }
+.card-ingredients li {
+  display: flex; align-items: center;
+  padding: 9px 0; border-bottom: 1px solid rgba(180,150,100,0.15);
+  font-size: 14px;
+}
+.card-ingredients li:last-child { border-bottom: none; }
+.card-oil-name { flex: 1; color: var(--text-dark); font-weight: 500; }
+.card-oil-drops { width: 60px; text-align: right; color: var(--sage-dark); font-size: 13px; }
+.card-oil-cost { width: 70px; text-align: right; color: var(--text-light); font-size: 12px; }
+.card-total {
+  background: linear-gradient(135deg, var(--sage), #5a7d5e);
+  border-radius: 12px; padding: 14px 20px;
+  display: flex; justify-content: space-between; align-items: center;
+  margin-top: 8px;
+}
+.card-total-label { color: rgba(255,255,255,0.85); font-size: 13px; letter-spacing: 1px; }
+.card-total-price { color: white; font-size: 20px; font-weight: 700; }
+.card-footer {
+  margin-top: 16px; text-align: center;
+  font-size: 11px; color: var(--text-light); letter-spacing: 1px;
+}
+
+/* Manage section */
+.manage-list { display: flex; flex-direction: column; gap: 12px; }
+.manage-item {
+  background: white; border-radius: 14px; padding: 18px 22px;
+  box-shadow: var(--shadow); display: flex;
+  justify-content: space-between; align-items: center;
+  gap: 12px; flex-wrap: wrap;
+}
+.manage-item-left { flex: 1; }
+.manage-item-name { font-weight: 600; font-size: 16px; color: var(--text-dark); }
+.manage-item-oils { font-size: 13px; color: var(--text-light); margin-top: 4px; }
+.manage-item-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
+
+/* Add recipe form */
+.form-card {
+  background: white; border-radius: 16px;
+  padding: 28px; box-shadow: var(--shadow); margin-bottom: 24px;
+}
+.form-title { font-family: 'Noto Serif SC', serif; font-size: 18px; font-weight: 600; margin-bottom: 20px; color: var(--text-dark); }
+.form-group { margin-bottom: 16px; }
+.form-label { font-size: 13px; color: var(--text-mid); margin-bottom: 6px; display: block; font-weight: 500; }
+.form-control {
+  width: 100%; padding: 10px 14px;
+  border: 1.5px solid var(--border); border-radius: 10px;
+  font-size: 14px; font-family: inherit; outline: none;
+  transition: border-color 0.2s; background: white;
+}
+.form-control:focus { border-color: var(--sage); }
+
+.new-ing-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
+.new-ing-row { display: flex; gap: 8px; align-items: center; }
+.new-ing-row select { flex: 1; }
+.new-ing-row input { width: 80px; }
+
+/* Oils section */
+.oils-search { margin-bottom: 16px; }
+.oils-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
+}
+.oil-chip {
+  background: white; border-radius: 10px; padding: 12px 16px;
+  box-shadow: 0 2px 8px rgba(90,60,30,0.06);
+  display: flex; justify-content: space-between; align-items: center;
+  gap: 8px;
+}
+.oil-chip-name { font-size: 14px; color: var(--text-dark); font-weight: 500; }
+.oil-chip-price { font-size: 13px; color: var(--sage-dark); font-weight: 600; }
+.oil-chip-actions { display: flex; gap: 4px; }
+.oil-chip-btn {
+  background: none; border: none; cursor: pointer;
+  font-size: 13px; padding: 3px 6px; border-radius: 6px;
+  transition: background 0.2s; color: var(--text-light);
+}
+.oil-chip-btn:hover { background: var(--sage-mist); color: var(--sage-dark); }
+.oil-chip-btn.del:hover { background: #fdf0ee; color: #c0392b; }
+.oil-edit-input {
+  width: 90px; padding: 4px 8px; border: 1.5px solid var(--sage);
+  border-radius: 6px; font-size: 13px; font-family: inherit;
+  text-align: center; outline: none;
+}
+.add-oil-form {
+  background: white; border-radius: 14px; padding: 16px 20px;
+  box-shadow: var(--shadow); margin-bottom: 16px;
+  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
+}
+.add-oil-form input {
+  padding: 9px 14px; border: 1.5px solid var(--border);
+  border-radius: 8px; font-size: 14px; font-family: inherit; outline: none;
+}
+.add-oil-form input:focus { border-color: var(--sage); }
+
+/* Empty state */
+.empty-state { text-align: center; padding: 60px 20px; color: var(--text-light); }
+.empty-state-icon { font-size: 48px; margin-bottom: 12px; }
+.empty-state-text { font-size: 15px; }
+
+/* Tag */
+.tag {
+  display: inline-block; padding: 3px 10px;
+  border-radius: 20px; font-size: 12px;
+  background: var(--sage-mist); color: var(--sage-dark);
+  margin: 2px;
+}
+.tag-btn {
+  display: inline-flex; align-items: center; gap: 3px;
+  padding: 4px 10px; border-radius: 16px; font-size: 12px;
+  background: var(--sage-mist); color: var(--sage-dark);
+  border: 1.5px solid transparent; cursor: pointer;
+  transition: all 0.2s;
+}
+.tag-btn:hover { border-color: var(--sage); }
+.tag-btn.active { background: var(--sage); color: white; border-color: var(--sage); }
+.tag-btn .tag-del {
+  font-size: 14px; margin-left: 2px; opacity: 0.5;
+  cursor: pointer; border: none; background: none;
+  color: inherit; padding: 0 2px;
+}
+.tag-btn .tag-del:hover { opacity: 1; }
+
+/* Tag picker overlay */
+.tag-picker {
+  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.3); z-index: 999;
+  display: flex; align-items: center; justify-content: center;
+}
+.tag-picker-card {
+  background: white; border-radius: 16px; padding: 24px;
+  box-shadow: 0 8px 40px rgba(0,0,0,0.2); max-width: 400px; width: 90%;
+}
+.tag-picker-title { font-family: 'Noto Serif SC', serif; font-size: 16px; font-weight: 600; margin-bottom: 14px; }
+.tag-picker-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
+.tag-pick {
+  padding: 6px 14px; border-radius: 20px; font-size: 13px;
+  border: 1.5px solid var(--border); background: white;
+  color: var(--text-mid); cursor: pointer; transition: all 0.15s;
+}
+.tag-pick:hover { border-color: var(--sage); }
+.tag-pick.selected { background: var(--sage); color: white; border-color: var(--sage); }
+
+/* Hint */
+.hint { font-size: 12px; color: var(--text-light); margin-top: 6px; }
+
+.section-title {
+  font-family: 'Noto Serif SC', serif;
+  font-size: 18px; font-weight: 600; color: var(--text-dark);
+  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
+}
+
+/* Category carousel */
+.cat-wrap { position: relative; margin: 0 -24px 20px; overflow: hidden; }
+.cat-track { display: flex; transition: transform 0.4s ease; will-change: transform; }
+.cat-card {
+  flex: 0 0 100%; min-height: 200px; position: relative; overflow: hidden; cursor: pointer;
+  background-size: cover; background-position: center;
+}
+.cat-card::after {
+  content: ''; position: absolute; inset: 0;
+  background: linear-gradient(135deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
+}
+.cat-inner {
+  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column;
+  justify-content: center; align-items: center; padding: 36px 24px; color: white; text-align: center;
+}
+.cat-icon { font-size: 48px; margin-bottom: 10px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
+.cat-name { font-family: 'Noto Serif SC', serif; font-size: 24px; font-weight: 700; letter-spacing: 3px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
+.cat-sub { font-size: 13px; margin-top: 6px; opacity: 0.9; letter-spacing: 1px; }
+.cat-arrow {
+  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
+  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.25);
+  border: none; color: white; font-size: 18px; cursor: pointer; backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center; transition: background 0.2s;
+}
+.cat-arrow:hover { background: rgba(255,255,255,0.45); }
+.cat-arrow.left { left: 12px; }
+.cat-arrow.right { right: 12px; }
+.cat-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
+.cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: all 0.25s; }
+.cat-dot.active { background: var(--sage); width: 22px; border-radius: 4px; }
+
+/* Toast */
+.toast {
+  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
+  background: rgba(0,0,0,0.8); color: white; padding: 10px 24px;
+  border-radius: 20px; font-size: 14px; z-index: 999;
+  pointer-events: none; transition: opacity 0.3s;
+}
+
+/* Custom dialog overlay */
+.dialog-overlay {
+  position: fixed; inset: 0; z-index: 9999;
+  background: rgba(0,0,0,0.45);
+  display: flex; align-items: center; justify-content: center; padding: 20px;
+}
+.dialog-box {
+  background: white; border-radius: 16px; padding: 28px 24px 20px;
+  max-width: 340px; width: 100%;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.2); font-family: inherit;
+}
+.dialog-msg {
+  font-size: 14px; color: #333; line-height: 1.6;
+  white-space: pre-line; word-break: break-word;
+  margin-bottom: 20px; text-align: center;
+}
+.dialog-btn-row { display: flex; gap: 10px; justify-content: center; }
+.dialog-btn-primary {
+  flex: 1; max-width: 140px; padding: 10px 0; border: none; border-radius: 10px;
+  font-size: 14px; font-weight: 600; cursor: pointer;
+  background: linear-gradient(135deg, #7a9e7e, #5a7d5e); color: white;
+}
+.dialog-btn-outline {
+  flex: 1; max-width: 140px; padding: 10px 0;
+  border: 1.5px solid #d4cfc7; border-radius: 10px;
+  font-size: 14px; cursor: pointer; background: white; color: #666;
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  .main { padding: 8px; }
+  .section { max-width: 100%; }
+  .detail-panel { padding: 12px; }
+  .recipe-grid { grid-template-columns: 1fr; }
+  .ingredients-table { font-size: 12px; }
+  .ingredients-table td, .ingredients-table th { padding: 6px 4px; }
+  .oil-select { max-width: 100px; font-size: 11px; }
+  .drops-input { width: 50px; font-size: 12px; }
+  .search-input { padding: 8px 10px; font-size: 14px; }
+  .search-box { padding: 12px; }
+  .search-label { font-size: 12px; margin-bottom: 6px; }
+  .form-card { padding: 16px; }
+  .section-title { font-size: 16px; }
+  .manage-item { padding: 10px 12px; }
+  .nav-tab { padding: 10px 12px; font-size: 13px; }
+  .oil-chip { padding: 10px 12px; }
+  .oils-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
+  .app-header { padding: 20px 16px 18px; }
+  .header-title h1 { font-size: 20px; }
+}
diff --git a/frontend/src/components/CustomDialog.vue b/frontend/src/components/CustomDialog.vue
new file mode 100644
index 0000000..b862f5b
--- /dev/null
+++ b/frontend/src/components/CustomDialog.vue
@@ -0,0 +1,120 @@
+<template>
+  <div v-if="dialogState.visible" class="dialog-overlay">
+    <div class="dialog-box">
+      <div class="dialog-msg">{{ dialogState.message }}</div>
+      <input
+        v-if="dialogState.type === 'prompt'"
+        v-model="inputValue"
+        type="text"
+        style="width:100%;padding:10px 14px;border:1.5px solid #d4cfc7;border-radius:10px;font-size:14px;margin-bottom:16px;outline:none;font-family:inherit;box-sizing:border-box"
+        @keydown.enter="submitPrompt"
+        ref="promptInput"
+      />
+      <div class="dialog-btn-row">
+        <button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">取消</button>
+        <button class="dialog-btn-primary" @click="ok">确定</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue'
+import { dialogState, closeDialog } from '../composables/useDialog'
+
+const inputValue = ref('')
+const promptInput = ref(null)
+
+watch(() => dialogState.visible, (v) => {
+  if (v && dialogState.type === 'prompt') {
+    inputValue.value = dialogState.defaultValue || ''
+    nextTick(() => {
+      promptInput.value?.focus()
+      promptInput.value?.select()
+    })
+  }
+})
+
+function ok() {
+  if (dialogState.type === 'alert') closeDialog()
+  else if (dialogState.type === 'confirm') closeDialog(true)
+  else closeDialog(inputValue.value)
+}
+
+function cancel() {
+  if (dialogState.type === 'confirm') closeDialog(false)
+  else closeDialog(null)
+}
+
+function submitPrompt() {
+  closeDialog(inputValue.value)
+}
+</script>
+
+<style scoped>
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog-box {
+  background: #fff;
+  border-radius: 16px;
+  padding: 28px 24px 20px;
+  min-width: 280px;
+  max-width: 360px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+  text-align: center;
+}
+
+.dialog-msg {
+  font-size: 15px;
+  color: #3e3a44;
+  margin-bottom: 18px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.dialog-btn-row {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+.dialog-btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 9px 28px;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.dialog-btn-primary:hover {
+  opacity: 0.9;
+}
+
+.dialog-btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 9px 28px;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.dialog-btn-outline:hover {
+  background: #f8f7f5;
+}
+</style>
diff --git a/frontend/src/components/LoginModal.vue b/frontend/src/components/LoginModal.vue
new file mode 100644
index 0000000..5e1b5fb
--- /dev/null
+++ b/frontend/src/components/LoginModal.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="login-overlay" @click.self="$emit('close')">
+    <div class="login-card">
+      <div class="login-header">
+        <span
+          class="login-tab"
+          :class="{ active: mode === 'login' }"
+          @click="mode = 'login'"
+        >登录</span>
+        <span
+          class="login-tab"
+          :class="{ active: mode === 'register' }"
+          @click="mode = 'register'"
+        >注册</span>
+      </div>
+
+      <div class="login-body">
+        <input
+          v-model="username"
+          type="text"
+          placeholder="用户名"
+          class="login-input"
+          @keydown.enter="submit"
+        />
+        <input
+          v-model="password"
+          type="password"
+          placeholder="密码"
+          class="login-input"
+          @keydown.enter="submit"
+        />
+        <input
+          v-if="mode === 'register'"
+          v-model="displayName"
+          type="text"
+          placeholder="显示名称（可选）"
+          class="login-input"
+          @keydown.enter="submit"
+        />
+
+        <div v-if="errorMsg" class="login-error">{{ errorMsg }}</div>
+
+        <button class="login-submit" :disabled="loading" @click="submit">
+          {{ loading ? '请稍候...' : (mode === 'login' ? '登录' : '注册') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useUiStore } from '../stores/ui'
+
+const emit = defineEmits(['close'])
+
+const auth = useAuthStore()
+const ui = useUiStore()
+
+const mode = ref('login')
+const username = ref('')
+const password = ref('')
+const displayName = ref('')
+const errorMsg = ref('')
+const loading = ref(false)
+
+async function submit() {
+  errorMsg.value = ''
+
+  if (!username.value.trim()) {
+    errorMsg.value = '请输入用户名'
+    return
+  }
+  if (!password.value) {
+    errorMsg.value = '请输入密码'
+    return
+  }
+
+  loading.value = true
+  try {
+    if (mode.value === 'login') {
+      await auth.login(username.value.trim(), password.value)
+      ui.showToast('登录成功')
+    } else {
+      await auth.register(
+        username.value.trim(),
+        password.value,
+        displayName.value.trim() || username.value.trim()
+      )
+      ui.showToast('注册成功')
+    }
+    emit('close')
+    // Reload page data after auth change
+    window.location.reload()
+  } catch (e) {
+    errorMsg.value = e?.message || (mode.value === 'login' ? '登录失败，请检查用户名和密码' : '注册失败，请重试')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 5000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-card {
+  background: #fff;
+  border-radius: 18px;
+  width: 340px;
+  max-width: 90vw;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+  overflow: hidden;
+}
+
+.login-header {
+  display: flex;
+  border-bottom: 1px solid #eee;
+}
+
+.login-tab {
+  flex: 1;
+  text-align: center;
+  padding: 14px 0;
+  font-size: 15px;
+  font-weight: 500;
+  color: #999;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+  border-bottom: 2px solid transparent;
+}
+
+.login-tab.active {
+  color: #4a9d7e;
+  border-bottom-color: #4a9d7e;
+}
+
+.login-body {
+  padding: 24px 24px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.login-input {
+  width: 100%;
+  padding: 11px 14px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+
+.login-input:focus {
+  border-color: #4a9d7e;
+}
+
+.login-error {
+  color: #d9534f;
+  font-size: 13px;
+  text-align: center;
+}
+
+.login-submit {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 11px 0;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+  transition: opacity 0.2s;
+}
+
+.login-submit:hover {
+  opacity: 0.9;
+}
+
+.login-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
diff --git a/frontend/src/components/RecipeCard.vue b/frontend/src/components/RecipeCard.vue
new file mode 100644
index 0000000..b7a4f5b
--- /dev/null
+++ b/frontend/src/components/RecipeCard.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="recipe-card" @click="$emit('click', index)">
+    <div class="card-name">{{ recipe.name }}</div>
+
+    <div v-if="recipe.tags && recipe.tags.length" class="card-tags">
+      <span v-for="tag in recipe.tags" :key="tag" class="card-tag">{{ tag }}</span>
+    </div>
+
+    <div class="card-oils">
+      <span v-for="(ing, i) in recipe.ingredients" :key="i" class="card-oil">
+        {{ ing.oil }}
+      </span>
+    </div>
+
+    <div class="card-bottom">
+      <span class="card-price">
+        {{ priceInfo.cost }}
+        <span v-if="priceInfo.hasRetail" class="card-retail">零售 {{ priceInfo.retail }}</span>
+      </span>
+      <button
+        class="card-star"
+        :class="{ favorited: isFav }"
+        @click.stop="$emit('toggle-fav', recipe._id)"
+        :title="isFav ? '取消收藏' : '收藏'"
+      >
+        {{ isFav ? '★' : '☆' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useOilsStore } from '../stores/oils'
+import { useRecipesStore } from '../stores/recipes'
+
+const props = defineProps({
+  recipe: { type: Object, required: true },
+  index: { type: Number, required: true },
+})
+
+defineEmits(['click', 'toggle-fav'])
+
+const oilsStore = useOilsStore()
+const recipesStore = useRecipesStore()
+
+const priceInfo = computed(() => oilsStore.fmtCostWithRetail(props.recipe.ingredients))
+const isFav = computed(() => recipesStore.isFavorite(props.recipe))
+</script>
+
+<style scoped>
+.recipe-card {
+  background: #fff;
+  border-radius: 14px;
+  padding: 18px 16px 14px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+  transition: box-shadow 0.2s, transform 0.15s;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.recipe-card:hover {
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+.card-name {
+  font-family: 'Noto Serif SC', serif;
+  font-size: 16px;
+  font-weight: 600;
+  color: #3e3a44;
+  line-height: 1.3;
+}
+
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.card-tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 8px;
+  background: #f0ece4;
+  color: #8a7e6b;
+}
+
+.card-oils {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.card-oil {
+  font-size: 12px;
+  color: #6b6375;
+  background: #f8f7f5;
+  padding: 2px 7px;
+  border-radius: 6px;
+}
+
+.card-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: 6px;
+}
+
+.card-price {
+  font-size: 14px;
+  font-weight: 600;
+  color: #4a9d7e;
+}
+
+.card-retail {
+  font-size: 11px;
+  font-weight: 400;
+  color: #999;
+  margin-left: 6px;
+}
+
+.card-star {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  color: #ccc;
+  padding: 2px 4px;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.card-star.favorited {
+  color: #f5a623;
+}
+
+.card-star:hover {
+  color: #f5a623;
+}
+</style>
diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
new file mode 100644
index 0000000..20a4d26
--- /dev/null
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -0,0 +1,636 @@
+<template>
+  <div class="detail-overlay" @click.self="$emit('close')">
+    <div class="detail-panel">
+      <!-- Mode toggle -->
+      <div class="detail-mode-tabs">
+        <button
+          class="mode-tab"
+          :class="{ active: viewMode === 'card' }"
+          @click="viewMode = 'card'"
+        >卡片预览</button>
+        <button
+          class="mode-tab"
+          :class="{ active: viewMode === 'editor' }"
+          @click="viewMode = 'editor'"
+        >编辑</button>
+        <button class="detail-close-btn" @click="$emit('close')">✕</button>
+      </div>
+
+      <!-- Card View -->
+      <div v-if="viewMode === 'card'" class="detail-card-view">
+        <div ref="cardRef" class="export-card">
+          <div class="export-card-name">{{ recipe.name }}</div>
+          <div v-if="recipe.tags && recipe.tags.length" class="export-card-tags">
+            <span v-for="tag in recipe.tags" :key="tag" class="export-card-tag">{{ tag }}</span>
+          </div>
+          <table class="export-card-table">
+            <thead>
+              <tr>
+                <th>精油</th>
+                <th>滴数</th>
+                <th>成本</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(ing, i) in recipe.ingredients" :key="i">
+                <td>{{ ing.oil }}</td>
+                <td>{{ ing.drops }}</td>
+                <td>{{ oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * ing.drops) }}</td>
+              </tr>
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="2" style="text-align:right;font-weight:600">总计</td>
+                <td style="font-weight:600">{{ priceInfo.cost }}</td>
+              </tr>
+              <tr v-if="priceInfo.hasRetail">
+                <td colspan="2" style="text-align:right;color:#999">零售价</td>
+                <td style="color:#999">{{ priceInfo.retail }}</td>
+              </tr>
+            </tfoot>
+          </table>
+          <div v-if="recipe.note" class="export-card-note">{{ recipe.note }}</div>
+        </div>
+
+        <div class="detail-card-actions">
+          <button class="action-btn" @click="exportImage">📤 导出图片</button>
+          <button class="action-btn" @click="$emit('close')">关闭</button>
+        </div>
+      </div>
+
+      <!-- Editor View -->
+      <div v-if="viewMode === 'editor'" class="detail-editor-view">
+        <div class="editor-section">
+          <label class="editor-label">配方名称</label>
+          <input v-model="editName" type="text" class="editor-input" />
+        </div>
+
+        <div class="editor-section">
+          <label class="editor-label">备注</label>
+          <textarea v-model="editNote" class="editor-textarea" rows="2"></textarea>
+        </div>
+
+        <div class="editor-section">
+          <label class="editor-label">标签</label>
+          <div class="editor-tags">
+            <span v-for="tag in editTags" :key="tag" class="editor-tag">
+              {{ tag }}
+              <span class="tag-remove" @click="removeTag(tag)">×</span>
+            </span>
+            <button class="tag-add-btn" @click="showTagPicker = true">+ 标签</button>
+          </div>
+        </div>
+
+        <div class="editor-section">
+          <label class="editor-label">成分</label>
+          <table class="editor-table">
+            <thead>
+              <tr>
+                <th>精油</th>
+                <th>滴数</th>
+                <th>成本</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(ing, i) in editIngredients" :key="i">
+                <td>
+                  <select v-model="ing.oil" class="editor-select">
+                    <option value="">选择精油</option>
+                    <option v-for="name in oilsStore.oilNames" :key="name" :value="name">{{ name }}</option>
+                  </select>
+                </td>
+                <td>
+                  <input v-model.number="ing.drops" type="number" min="1" class="editor-drops" />
+                </td>
+                <td class="ing-cost">
+                  {{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * (ing.drops || 0)) : '-' }}
+                </td>
+                <td>
+                  <button class="remove-row-btn" @click="removeIngredient(i)">✕</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <button class="add-row-btn" @click="addIngredient">+ 添加精油</button>
+        </div>
+
+        <div class="editor-section">
+          <label class="editor-label">容量</label>
+          <div class="volume-controls">
+            <button
+              v-for="(drops, ml) in volumeOptions"
+              :key="ml"
+              class="volume-btn"
+              :class="{ active: selectedVolume === ml }"
+              @click="selectedVolume = ml"
+            >{{ ml }}ml</button>
+          </div>
+        </div>
+
+        <div class="editor-total">
+          总计: {{ editPriceInfo.cost }}
+          <span v-if="editPriceInfo.hasRetail" style="color:#999;font-size:13px;margin-left:8px">
+            零售 {{ editPriceInfo.retail }}
+          </span>
+        </div>
+
+        <div class="editor-actions">
+          <button class="action-btn" @click="$emit('close')">取消</button>
+          <button class="action-btn action-btn-primary" @click="saveRecipe">保存</button>
+        </div>
+      </div>
+
+      <!-- Tag Picker -->
+      <TagPicker
+        v-if="showTagPicker"
+        :name="editName"
+        :current-tags="editTags"
+        :all-tags="recipesStore.allTags"
+        @save="onTagsSaved"
+        @close="showTagPicker = false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import html2canvas from 'html2canvas'
+import { useOilsStore, VOLUME_DROPS } from '../stores/oils'
+import { useRecipesStore } from '../stores/recipes'
+import { useUiStore } from '../stores/ui'
+import TagPicker from './TagPicker.vue'
+
+const props = defineProps({
+  recipeIndex: { type: Number, required: true },
+})
+
+const emit = defineEmits(['close'])
+
+const oilsStore = useOilsStore()
+const recipesStore = useRecipesStore()
+const ui = useUiStore()
+
+const viewMode = ref('card')
+const cardRef = ref(null)
+const showTagPicker = ref(false)
+const selectedVolume = ref('5')
+
+const volumeOptions = VOLUME_DROPS
+
+// Source recipe
+const recipe = computed(() => recipesStore.recipes[props.recipeIndex] || { name: '', ingredients: [], tags: [], note: '' })
+const priceInfo = computed(() => oilsStore.fmtCostWithRetail(recipe.value.ingredients))
+
+// Editable copies
+const editName = ref('')
+const editNote = ref('')
+const editTags = ref([])
+const editIngredients = ref([])
+
+const editPriceInfo = computed(() => oilsStore.fmtCostWithRetail(editIngredients.value.filter(i => i.oil)))
+
+onMounted(() => {
+  const r = recipe.value
+  editName.value = r.name
+  editNote.value = r.note || ''
+  editTags.value = [...(r.tags || [])]
+  editIngredients.value = (r.ingredients || []).map(i => ({ oil: i.oil, drops: i.drops }))
+})
+
+function addIngredient() {
+  editIngredients.value.push({ oil: '', drops: 1 })
+}
+
+function removeIngredient(index) {
+  editIngredients.value.splice(index, 1)
+}
+
+function removeTag(tag) {
+  editTags.value = editTags.value.filter(t => t !== tag)
+}
+
+function onTagsSaved(tags) {
+  editTags.value = tags
+  showTagPicker.value = false
+}
+
+async function saveRecipe() {
+  const ingredients = editIngredients.value.filter(i => i.oil && i.drops > 0)
+  if (!editName.value.trim()) {
+    ui.showToast('请输入配方名称')
+    return
+  }
+  if (ingredients.length === 0) {
+    ui.showToast('请至少添加一种精油')
+    return
+  }
+
+  try {
+    const payload = {
+      ...recipe.value,
+      name: editName.value.trim(),
+      note: editNote.value.trim(),
+      tags: editTags.value,
+      ingredients,
+    }
+    await recipesStore.saveRecipe(payload)
+    ui.showToast('保存成功')
+    emit('close')
+  } catch (e) {
+    ui.showToast('保存失败: ' + (e?.message || '未知错误'))
+  }
+}
+
+async function exportImage() {
+  if (!cardRef.value) return
+  try {
+    const canvas = await html2canvas(cardRef.value, {
+      backgroundColor: '#fff',
+      scale: 2,
+    })
+    const link = document.createElement('a')
+    link.download = `${recipe.value.name || '配方'}.png`
+    link.href = canvas.toDataURL('image/png')
+    link.click()
+    ui.showToast('已导出图片')
+  } catch (e) {
+    ui.showToast('导出失败')
+  }
+}
+</script>
+
+<style scoped>
+.detail-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 5500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.detail-panel {
+  background: #fff;
+  border-radius: 18px;
+  width: 520px;
+  max-width: 100%;
+  max-height: 85vh;
+  overflow-y: auto;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  position: relative;
+}
+
+.detail-mode-tabs {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding: 0 16px;
+  gap: 4px;
+}
+
+.mode-tab {
+  padding: 14px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #999;
+  cursor: pointer;
+  border: none;
+  background: none;
+  border-bottom: 2px solid transparent;
+  font-family: inherit;
+  transition: color 0.2s;
+}
+
+.mode-tab.active {
+  color: #4a9d7e;
+  border-bottom-color: #4a9d7e;
+}
+
+.detail-close-btn {
+  margin-left: auto;
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: #999;
+  cursor: pointer;
+  padding: 8px;
+}
+
+.detail-close-btn:hover {
+  color: #333;
+}
+
+/* Card View */
+.detail-card-view {
+  padding: 20px;
+}
+
+.export-card {
+  background: #fefdfb;
+  border: 1px solid #eee;
+  border-radius: 12px;
+  padding: 24px 20px;
+}
+
+.export-card-name {
+  font-family: 'Noto Serif SC', serif;
+  font-size: 20px;
+  font-weight: 700;
+  color: #3e3a44;
+  margin-bottom: 10px;
+}
+
+.export-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+
+.export-card-tag {
+  font-size: 11px;
+  padding: 2px 10px;
+  border-radius: 8px;
+  background: #f0ece4;
+  color: #8a7e6b;
+}
+
+.export-card-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.export-card-table th {
+  text-align: left;
+  font-weight: 500;
+  color: #999;
+  border-bottom: 1px solid #eee;
+  padding: 8px 6px;
+  font-size: 12px;
+}
+
+.export-card-table td {
+  padding: 7px 6px;
+  color: #3e3a44;
+  border-bottom: 1px solid #f5f5f3;
+}
+
+.export-card-table tfoot td {
+  border-bottom: none;
+  padding-top: 10px;
+}
+
+.export-card-note {
+  font-size: 13px;
+  color: #999;
+  margin-top: 8px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.detail-card-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+/* Editor View */
+.detail-editor-view {
+  padding: 20px;
+}
+
+.editor-section {
+  margin-bottom: 18px;
+}
+
+.editor-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: #999;
+  margin-bottom: 6px;
+}
+
+.editor-input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.editor-input:focus {
+  border-color: #4a9d7e;
+}
+
+.editor-textarea {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+.editor-textarea:focus {
+  border-color: #4a9d7e;
+}
+
+.editor-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.editor-tag {
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 10px;
+  background: #4a9d7e;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tag-remove {
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.tag-remove:hover {
+  opacity: 1;
+}
+
+.tag-add-btn {
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 10px;
+  border: 1.5px dashed #ccc;
+  background: none;
+  color: #999;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.tag-add-btn:hover {
+  border-color: #4a9d7e;
+  color: #4a9d7e;
+}
+
+.editor-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.editor-table th {
+  text-align: left;
+  font-weight: 500;
+  color: #999;
+  padding: 6px 4px;
+  font-size: 12px;
+  border-bottom: 1px solid #eee;
+}
+
+.editor-table td {
+  padding: 5px 4px;
+}
+
+.editor-select {
+  width: 100%;
+  padding: 7px 8px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  background: #fff;
+}
+
+.editor-drops {
+  width: 60px;
+  padding: 7px 8px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 13px;
+  text-align: center;
+  font-family: inherit;
+}
+
+.ing-cost {
+  font-size: 12px;
+  color: #4a9d7e;
+  white-space: nowrap;
+}
+
+.remove-row-btn {
+  background: none;
+  border: none;
+  color: #ccc;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.remove-row-btn:hover {
+  color: #d9534f;
+}
+
+.add-row-btn {
+  margin-top: 8px;
+  background: none;
+  border: 1.5px dashed #ccc;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 13px;
+  color: #999;
+  cursor: pointer;
+  font-family: inherit;
+  width: 100%;
+}
+
+.add-row-btn:hover {
+  border-color: #4a9d7e;
+  color: #4a9d7e;
+}
+
+.volume-controls {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.volume-btn {
+  padding: 6px 16px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.15s;
+}
+
+.volume-btn.active {
+  background: #4a9d7e;
+  color: #fff;
+  border-color: #4a9d7e;
+}
+
+.editor-total {
+  font-size: 16px;
+  font-weight: 600;
+  color: #4a9d7e;
+  padding: 12px 0;
+  border-top: 1px solid #eee;
+  margin-bottom: 4px;
+}
+
+.editor-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+/* Shared action buttons */
+.action-btn {
+  padding: 9px 22px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  color: #6b6375;
+}
+
+.action-btn:hover {
+  background: #f8f7f5;
+}
+
+.action-btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border-color: transparent;
+}
+
+.action-btn-primary:hover {
+  opacity: 0.9;
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+}
+</style>
diff --git a/frontend/src/components/TagPicker.vue b/frontend/src/components/TagPicker.vue
new file mode 100644
index 0000000..f1195fe
--- /dev/null
+++ b/frontend/src/components/TagPicker.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="tagpicker-overlay" @click.self="$emit('close')">
+    <div class="tagpicker-card">
+      <div class="tagpicker-title">为「{{ name }}」选择标签</div>
+
+      <div class="tagpicker-pills">
+        <span
+          v-for="tag in allTags"
+          :key="tag"
+          class="tagpicker-pill"
+          :class="{ selected: selectedTags.has(tag) }"
+          @click="toggleTag(tag)"
+        >
+          {{ tag }}
+        </span>
+      </div>
+
+      <div class="tagpicker-new">
+        <input
+          v-model="newTag"
+          type="text"
+          placeholder="添加新标签..."
+          class="tagpicker-input"
+          @keydown.enter="addNewTag"
+        />
+        <button class="tagpicker-add-btn" @click="addNewTag" :disabled="!newTag.trim()">+</button>
+      </div>
+
+      <div class="tagpicker-actions">
+        <button class="tagpicker-btn-cancel" @click="$emit('close')">取消</button>
+        <button class="tagpicker-btn-confirm" @click="save">确定</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const props = defineProps({
+  name: { type: String, default: '' },
+  currentTags: { type: Array, default: () => [] },
+  allTags: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['save', 'close'])
+
+const selectedTags = reactive(new Set(props.currentTags))
+const newTag = ref('')
+
+function toggleTag(tag) {
+  if (selectedTags.has(tag)) {
+    selectedTags.delete(tag)
+  } else {
+    selectedTags.add(tag)
+  }
+}
+
+function addNewTag() {
+  const tag = newTag.value.trim()
+  if (!tag) return
+  if (!selectedTags.has(tag)) {
+    selectedTags.add(tag)
+  }
+  newTag.value = ''
+}
+
+function save() {
+  emit('save', [...selectedTags])
+}
+</script>
+
+<style scoped>
+.tagpicker-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 6000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tagpicker-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 24px;
+  width: 380px;
+  max-width: 90vw;
+  max-height: 70vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+}
+
+.tagpicker-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 16px;
+}
+
+.tagpicker-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+  min-height: 32px;
+}
+
+.tagpicker-pill {
+  font-size: 13px;
+  padding: 5px 14px;
+  border-radius: 14px;
+  background: #f0ece4;
+  color: #8a7e6b;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  user-select: none;
+}
+
+.tagpicker-pill.selected {
+  background: #4a9d7e;
+  color: #fff;
+}
+
+.tagpicker-pill:hover {
+  opacity: 0.85;
+}
+
+.tagpicker-new {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.tagpicker-input {
+  flex: 1;
+  padding: 9px 12px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  font-size: 13px;
+  outline: none;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.tagpicker-input:focus {
+  border-color: #4a9d7e;
+}
+
+.tagpicker-add-btn {
+  width: 36px;
+  height: 36px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 18px;
+  color: #4a9d7e;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tagpicker-add-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.tagpicker-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.tagpicker-btn-cancel {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 9px 24px;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.tagpicker-btn-cancel:hover {
+  background: #f8f7f5;
+}
+
+.tagpicker-btn-confirm {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 9px 24px;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.tagpicker-btn-confirm:hover {
+  opacity: 0.9;
+}
+</style>
diff --git a/frontend/src/components/UserMenu.vue b/frontend/src/components/UserMenu.vue
new file mode 100644
index 0000000..f6c4b6c
--- /dev/null
+++ b/frontend/src/components/UserMenu.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="usermenu-overlay" @click.self="$emit('close')">
+    <div class="usermenu-card">
+      <div class="usermenu-name">{{ auth.user.display_name || auth.user.username }}</div>
+      <div class="usermenu-role">
+        <span class="role-badge">{{ roleLabel }}</span>
+      </div>
+
+      <div class="usermenu-actions">
+        <button class="usermenu-btn" @click="goMyDiary">
+          📖 我的
+        </button>
+        <button class="usermenu-btn" @click="goNotifications">
+          🔔 通知
+          <span v-if="unreadCount > 0" class="unread-badge">{{ unreadCount }}</span>
+        </button>
+        <button class="usermenu-btn usermenu-btn-logout" @click="handleLogout">
+          🚪 退出登录
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+import { useUiStore } from '../stores/ui'
+
+const emit = defineEmits(['close'])
+
+const auth = useAuthStore()
+const ui = useUiStore()
+const router = useRouter()
+
+const unreadCount = ref(0)
+
+const roleLabel = computed(() => {
+  const map = {
+    admin: '管理员',
+    senior_editor: '高级编辑',
+    editor: '编辑',
+    viewer: '查看者',
+  }
+  return map[auth.user.role] || auth.user.role
+})
+
+function goMyDiary() {
+  emit('close')
+  router.push('/mydiary')
+}
+
+function goNotifications() {
+  emit('close')
+  router.push('/notifications')
+}
+
+function handleLogout() {
+  auth.logout()
+  ui.showToast('已退出登录')
+  emit('close')
+  window.location.reload()
+}
+</script>
+
+<style scoped>
+.usermenu-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 4000;
+}
+
+.usermenu-card {
+  position: absolute;
+  top: 56px;
+  right: 16px;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
+  padding: 18px 20px 14px;
+  min-width: 180px;
+  z-index: 4001;
+}
+
+.usermenu-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 4px;
+}
+
+.usermenu-role {
+  margin-bottom: 14px;
+}
+
+.role-badge {
+  display: inline-block;
+  font-size: 11px;
+  padding: 2px 10px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+  color: #4a9d7e;
+  font-weight: 500;
+}
+
+.usermenu-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.usermenu-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 9px 10px;
+  border: none;
+  background: none;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #3e3a44;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  transition: background 0.15s;
+  position: relative;
+}
+
+.usermenu-btn:hover {
+  background: #f5f3f0;
+}
+
+.usermenu-btn-logout {
+  color: #d9534f;
+  margin-top: 6px;
+  border-top: 1px solid #eee;
+  padding-top: 12px;
+  border-radius: 0 0 8px 8px;
+}
+
+.unread-badge {
+  background: #d9534f;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  min-width: 18px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+  border-radius: 9px;
+  padding: 0 5px;
+  margin-left: auto;
+}
+</style>
diff --git a/frontend/src/composables/useApi.js b/frontend/src/composables/useApi.js
new file mode 100644
index 0000000..06e3cba
--- /dev/null
+++ b/frontend/src/composables/useApi.js
@@ -0,0 +1,44 @@
+const API_BASE = ''  // same origin, uses vite proxy in dev
+
+export function getToken() {
+  return localStorage.getItem('oil_auth_token') || ''
+}
+
+export function setToken(token) {
+  if (token) localStorage.setItem('oil_auth_token', token)
+  else localStorage.removeItem('oil_auth_token')
+}
+
+function buildHeaders(extra = {}) {
+  const headers = { 'Content-Type': 'application/json', ...extra }
+  const token = getToken()
+  if (token) headers['Authorization'] = 'Bearer ' + token
+  return headers
+}
+
+async function request(path, opts = {}) {
+  const headers = buildHeaders(opts.headers)
+  const res = await fetch(API_BASE + path, { ...opts, headers })
+  return res
+}
+
+async function requestJSON(path, opts = {}) {
+  const res = await request(path, opts)
+  if (!res.ok) throw res
+  return res.json()
+}
+
+// api is callable as api(path, opts) → raw Response
+// AND has convenience methods: api.get(), api.post(), api.put(), api.delete()
+function apiFn(path, opts = {}) {
+  return request(path, opts)
+}
+
+apiFn.raw = request
+apiFn.get = (path) => requestJSON(path)
+apiFn.post = (path, body) => requestJSON(path, { method: 'POST', body: JSON.stringify(body) })
+apiFn.put = (path, body) => requestJSON(path, { method: 'PUT', body: JSON.stringify(body) })
+apiFn.del = (path) => requestJSON(path, { method: 'DELETE' })
+apiFn.delete = (path) => requestJSON(path, { method: 'DELETE' })
+
+export const api = apiFn
diff --git a/frontend/src/composables/useDialog.js b/frontend/src/composables/useDialog.js
new file mode 100644
index 0000000..1a43287
--- /dev/null
+++ b/frontend/src/composables/useDialog.js
@@ -0,0 +1,43 @@
+import { reactive } from 'vue'
+
+export const dialogState = reactive({
+  visible: false,
+  type: 'alert', // 'alert', 'confirm', 'prompt'
+  message: '',
+  defaultValue: '',
+  resolve: null
+})
+
+export function showAlert(msg) {
+  return new Promise(resolve => {
+    dialogState.visible = true
+    dialogState.type = 'alert'
+    dialogState.message = msg
+    dialogState.resolve = resolve
+  })
+}
+
+export function showConfirm(msg) {
+  return new Promise(resolve => {
+    dialogState.visible = true
+    dialogState.type = 'confirm'
+    dialogState.message = msg
+    dialogState.resolve = resolve
+  })
+}
+
+export function showPrompt(msg, defaultVal = '') {
+  return new Promise(resolve => {
+    dialogState.visible = true
+    dialogState.type = 'prompt'
+    dialogState.message = msg
+    dialogState.defaultValue = defaultVal
+    dialogState.resolve = resolve
+  })
+}
+
+export function closeDialog(result) {
+  dialogState.visible = false
+  if (dialogState.resolve) dialogState.resolve(result)
+  dialogState.resolve = null
+}
diff --git a/frontend/src/composables/useOilTranslation.js b/frontend/src/composables/useOilTranslation.js
new file mode 100644
index 0000000..0cdcaea
--- /dev/null
+++ b/frontend/src/composables/useOilTranslation.js
@@ -0,0 +1,42 @@
+// Oil English names map
+const OIL_EN = {
+  '薰衣草': 'Lavender', '茶树': 'Tea Tree', '乳香': 'Frankincense',
+  '柠檬': 'Lemon', '椒样薄荷': 'Peppermint', '丝柏': 'Cypress',
+  '尤加利': 'Eucalyptus', '迷迭香': 'Rosemary', '天竺葵': 'Geranium',
+  '依兰依兰': 'Ylang Ylang', '佛手柑': 'Bergamot', '生姜': 'Ginger',
+  '没药': 'Myrrh', '檀香': 'Sandalwood', '雪松': 'Cedarwood',
+  '罗马洋甘菊': 'Roman Chamomile', '永久花': 'Helichrysum',
+  '快乐鼠尾草': 'Clary Sage', '广藿香': 'Patchouli',
+  '百里香': 'Thyme', '牛至': 'Oregano', '冬青': 'Wintergreen',
+  '肉桂': 'Cinnamon', '丁香': 'Clove', '黑胡椒': 'Black Pepper',
+  '葡萄柚': 'Grapefruit', '橙花': 'Neroli', '玫瑰': 'Rose',
+  '岩兰草': 'Vetiver', '马郁兰': 'Marjoram', '芫荽': 'Coriander',
+  '柠檬草': 'Lemongrass', '杜松浆果': 'Juniper Berry', '甜橙': 'Wild Orange',
+  '香茅': 'Citronella', '薄荷': 'Peppermint', '扁柏': 'Arborvitae',
+  '古巴香脂': 'Copaiba', '椰子油': 'Coconut Oil',
+  '芳香调理': 'AromaTouch', '保卫复方': 'On Guard',
+  '乐活复方': 'Balance', '舒缓复方': 'Past Tense',
+  '净化复方': 'Purify', '呼吸复方': 'Breathe',
+  '舒压复方': 'Adaptiv', '多特瑞': 'doTERRA',
+}
+
+export function oilEn(name) {
+  return OIL_EN[name] || ''
+}
+
+export function recipeNameEn(name) {
+  // Try to translate known keywords
+  // Simple approach: return original name for now, user can customize
+  return name
+}
+
+// Custom translations (can be set by admin)
+const customTranslations = {}
+
+export function setCustomTranslation(zhName, enName) {
+  customTranslations[zhName] = enName
+}
+
+export function getCustomTranslation(zhName) {
+  return customTranslations[zhName]
+}
diff --git a/frontend/src/composables/useSmartPaste.js b/frontend/src/composables/useSmartPaste.js
new file mode 100644
index 0000000..a0b9a56
--- /dev/null
+++ b/frontend/src/composables/useSmartPaste.js
@@ -0,0 +1,262 @@
+export const DROPS_PER_ML = 18.6
+
+export const OIL_HOMOPHONES = {
+  '相貌':'香茅','香矛':'香茅','向茅':'香茅','像茅':'香茅',
+  '如香':'乳香','儒香':'乳香',
+  '古巴想':'古巴香脂','古巴香':'古巴香脂','古巴相脂':'古巴香脂',
+  '博荷':'薄荷','薄河':'薄荷',
+  '尤佳利':'尤加利','优加利':'尤加利',
+  '依兰':'依兰依兰',
+  '雪松木':'雪松',
+  '桧木':'扁柏','桧柏':'扁柏',
+  '永久化':'永久花','永久华':'永久花',
+  '罗马洋柑菊':'罗马洋甘菊','洋甘菊':'罗马洋甘菊',
+  '天竹葵':'天竺葵','天竺癸':'天竺葵',
+  '没要':'没药','莫药':'没药',
+  '快乐鼠尾':'快乐鼠尾草',
+  '椒样博荷':'椒样薄荷','椒样薄和':'椒样薄荷',
+  '丝柏木':'丝柏',
+  '柠檬草油':'柠檬草',
+  '茶树油':'茶树',
+  '薰衣草油':'薰衣草',
+  '玫瑰花':'玫瑰',
+}
+
+/**
+ * Levenshtein edit distance between two strings
+ */
+export function editDistance(a, b) {
+  const m = a.length, n = b.length
+  const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0))
+  for (let i = 0; i <= m; i++) dp[i][0] = i
+  for (let j = 0; j <= n; j++) dp[0][j] = j
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (a[i - 1] === b[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1]
+      } else {
+        dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1])
+      }
+    }
+  }
+  return dp[m][n]
+}
+
+/**
+ * Fuzzy match oil name against known list.
+ * Priority: homophone -> exact -> substring -> missing-char -> edit distance
+ * Returns matched oil name or null.
+ */
+export function findOil(input, oilNames) {
+  if (!input || input.length === 0) return null
+  const trimmed = input.trim()
+  if (!trimmed) return null
+
+  // 1. Homophone alias check
+  if (OIL_HOMOPHONES[trimmed]) {
+    const alias = OIL_HOMOPHONES[trimmed]
+    if (oilNames.includes(alias)) return alias
+  }
+
+  // 2. Exact match
+  if (oilNames.includes(trimmed)) return trimmed
+
+  // 3. Substring match (input ⊂ name or name ⊂ input), prefer longest
+  let substringMatches = []
+  for (const name of oilNames) {
+    if (name.includes(trimmed) || trimmed.includes(name)) {
+      substringMatches.push(name)
+    }
+  }
+  if (substringMatches.length > 0) {
+    substringMatches.sort((a, b) => b.length - a.length)
+    return substringMatches[0]
+  }
+
+  // 4. "Missing one char" match - input is one char shorter than an oil name
+  for (const name of oilNames) {
+    if (Math.abs(name.length - trimmed.length) === 1) {
+      const longer = name.length > trimmed.length ? name : trimmed
+      const shorter = name.length > trimmed.length ? trimmed : name
+      // Check if shorter can be formed by removing one char from longer
+      for (let i = 0; i < longer.length; i++) {
+        const candidate = longer.slice(0, i) + longer.slice(i + 1)
+        if (candidate === shorter) return name
+      }
+    }
+  }
+
+  // 5. Edit distance fuzzy match
+  let bestMatch = null
+  let bestDist = Infinity
+  for (const name of oilNames) {
+    const dist = editDistance(trimmed, name)
+    const maxLen = Math.max(trimmed.length, name.length)
+    // Only accept if edit distance is reasonable (less than half the length)
+    if (dist < bestDist && dist <= Math.floor(maxLen / 2)) {
+      bestDist = dist
+      bestMatch = name
+    }
+  }
+  return bestMatch
+}
+
+/**
+ * Greedy longest-match from concatenated string against oil names.
+ * Returns array of matched oil names in order.
+ */
+export function greedyMatchOils(text, oilNames) {
+  const results = []
+  let i = 0
+  while (i < text.length) {
+    let bestMatch = null
+    let bestLen = 0
+    // Try all oil names sorted by length (longest first)
+    const sorted = [...oilNames].sort((a, b) => b.length - a.length)
+    for (const name of sorted) {
+      if (text.substring(i, i + name.length) === name) {
+        bestMatch = name
+        bestLen = name.length
+        break
+      }
+    }
+    // Also check homophones
+    if (!bestMatch) {
+      for (const [alias, canonical] of Object.entries(OIL_HOMOPHONES)) {
+        if (text.substring(i, i + alias.length) === alias) {
+          if (!bestMatch || alias.length > bestLen) {
+            bestMatch = canonical
+            bestLen = alias.length
+          }
+        }
+      }
+    }
+    if (bestMatch) {
+      results.push(bestMatch)
+      i += bestLen
+    } else {
+      i++
+    }
+  }
+  return results
+}
+
+/**
+ * Parse text chunk into [{oil, drops}] pairs.
+ * Handles formats like "芳香调理8永久花10" or "薰衣草 3滴 茶树 2ml"
+ */
+export function parseOilChunk(text, oilNames) {
+  const results = []
+  const regex = /([^\d]+?)(\d+\.?\d*)\s*(ml|毫升|ML|mL|滴)?/g
+  let match
+  while ((match = regex.exec(text)) !== null) {
+    const namePart = match[1].trim()
+    let amount = parseFloat(match[2])
+    const unit = match[3] || ''
+
+    // Convert ml to drops
+    if (unit && (unit.toLowerCase() === 'ml' || unit === '毫升')) {
+      amount = Math.round(amount * 20)
+    }
+
+    // Try greedy match on the name part
+    const matched = greedyMatchOils(namePart, oilNames)
+    if (matched.length > 0) {
+      // Last matched oil gets the drops
+      for (let i = 0; i < matched.length - 1; i++) {
+        results.push({ oil: matched[i], drops: 0 })
+      }
+      results.push({ oil: matched[matched.length - 1], drops: amount })
+    } else {
+      // Try findOil as fallback
+      const found = findOil(namePart, oilNames)
+      if (found) {
+        results.push({ oil: found, drops: amount })
+      } else if (namePart) {
+        results.push({ oil: namePart, drops: amount, notFound: true })
+      }
+    }
+  }
+  return results
+}
+
+/**
+ * Split multi-recipe input by blank lines or semicolons.
+ * Detects recipe boundaries (non-oil text after seeing oils = new recipe).
+ */
+export function splitRawIntoBlocks(raw, oilNames) {
+  // First split by semicolons
+  let parts = raw.split(/[;；]/)
+  // Then split each part by blank lines
+  let blocks = []
+  for (const part of parts) {
+    const subBlocks = part.split(/\n\s*\n/)
+    blocks.push(...subBlocks)
+  }
+  // Filter empty blocks
+  blocks = blocks.map(b => b.trim()).filter(b => b.length > 0)
+  return blocks
+}
+
+/**
+ * Parse one recipe block into {name, ingredients, notFound}.
+ * 1. Split by commas/newlines/etc
+ * 2. First non-oil, non-number part = recipe name
+ * 3. Rest parsed through parseOilChunk
+ * 4. Deduplicate ingredients
+ */
+export function parseSingleBlock(raw, oilNames) {
+  // Split by commas, Chinese commas, newlines, spaces
+  const parts = raw.split(/[,，\n\r]+/).map(s => s.trim()).filter(s => s)
+
+  let name = ''
+  let ingredientParts = []
+  let foundFirstOil = false
+
+  for (const part of parts) {
+    // Check if this part contains oil references
+    const hasNumber = /\d/.test(part)
+    const hasOil = oilNames.some(oil => part.includes(oil)) ||
+                   Object.keys(OIL_HOMOPHONES).some(alias => part.includes(alias))
+
+    if (!foundFirstOil && !hasOil && !hasNumber && !name) {
+      // This is the recipe name
+      name = part
+    } else {
+      foundFirstOil = true
+      ingredientParts.push(part)
+    }
+  }
+
+  // Parse all ingredient parts
+  const allIngredients = []
+  const notFound = []
+  for (const part of ingredientParts) {
+    const parsed = parseOilChunk(part, oilNames)
+    for (const item of parsed) {
+      if (item.notFound) {
+        notFound.push(item.oil)
+      } else {
+        allIngredients.push(item)
+      }
+    }
+  }
+
+  // Deduplicate: merge same oil, sum drops
+  const deduped = []
+  const seen = {}
+  for (const item of allIngredients) {
+    if (seen[item.oil] !== undefined) {
+      deduped[seen[item.oil]].drops += item.drops
+    } else {
+      seen[item.oil] = deduped.length
+      deduped.push({ ...item })
+    }
+  }
+
+  return {
+    name: name || '未命名配方',
+    ingredients: deduped,
+    notFound
+  }
+}
diff --git a/frontend/src/main.js b/frontend/src/main.js
new file mode 100644
index 0000000..7a0895c
--- /dev/null
+++ b/frontend/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+import './assets/styles.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
new file mode 100644
index 0000000..8fcab38
--- /dev/null
+++ b/frontend/src/router/index.js
@@ -0,0 +1,56 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    name: 'RecipeSearch',
+    component: () => import('../views/RecipeSearch.vue'),
+  },
+  {
+    path: '/manage',
+    name: 'RecipeManager',
+    component: () => import('../views/RecipeManager.vue'),
+  },
+  {
+    path: '/inventory',
+    name: 'Inventory',
+    component: () => import('../views/Inventory.vue'),
+  },
+  {
+    path: '/oils',
+    name: 'OilReference',
+    component: () => import('../views/OilReference.vue'),
+  },
+  {
+    path: '/projects',
+    name: 'Projects',
+    component: () => import('../views/Projects.vue'),
+  },
+  {
+    path: '/mydiary',
+    name: 'MyDiary',
+    component: () => import('../views/MyDiary.vue'),
+  },
+  {
+    path: '/audit',
+    name: 'AuditLog',
+    component: () => import('../views/AuditLog.vue'),
+  },
+  {
+    path: '/bugs',
+    name: 'BugTracker',
+    component: () => import('../views/BugTracker.vue'),
+  },
+  {
+    path: '/users',
+    name: 'UserManagement',
+    component: () => import('../views/UserManagement.vue'),
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router
diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js
new file mode 100644
index 0000000..c894d3b
--- /dev/null
+++ b/frontend/src/stores/auth.js
@@ -0,0 +1,103 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { api } from '../composables/useApi'
+
+const DEFAULT_USER = {
+  id: null,
+  role: 'viewer',
+  username: 'anonymous',
+  display_name: '匿名',
+  has_password: false,
+  business_verified: false,
+}
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref(localStorage.getItem('oil_auth_token') || '')
+  const user = ref({ ...DEFAULT_USER })
+
+  // Getters
+  const isLoggedIn = computed(() => user.value.id !== null)
+  const isAdmin = computed(() => user.value.role === 'admin')
+  const canEdit = computed(() =>
+    ['editor', 'senior_editor', 'admin'].includes(user.value.role)
+  )
+  const isBusiness = computed(() => user.value.business_verified)
+
+  // Actions
+  async function initToken() {
+    const params = new URLSearchParams(window.location.search)
+    const urlToken = params.get('token')
+    if (urlToken) {
+      token.value = urlToken
+      localStorage.setItem('oil_auth_token', urlToken)
+      // Clean URL
+      const url = new URL(window.location)
+      url.searchParams.delete('token')
+      window.history.replaceState({}, '', url)
+    }
+    if (token.value) {
+      await loadMe()
+    }
+  }
+
+  async function loadMe() {
+    try {
+      const data = await api.get('/api/me')
+      user.value = {
+        id: data.id,
+        role: data.role,
+        username: data.username,
+        display_name: data.display_name,
+        has_password: data.has_password ?? false,
+        business_verified: data.business_verified ?? false,
+      }
+    } catch {
+      logout()
+    }
+  }
+
+  async function login(username, password) {
+    const data = await api.post('/api/login', { username, password })
+    token.value = data.token
+    localStorage.setItem('oil_auth_token', data.token)
+    await loadMe()
+  }
+
+  async function register(username, password, displayName) {
+    const data = await api.post('/api/register', {
+      username,
+      password,
+      display_name: displayName,
+    })
+    token.value = data.token
+    localStorage.setItem('oil_auth_token', data.token)
+    await loadMe()
+  }
+
+  function logout() {
+    token.value = ''
+    localStorage.removeItem('oil_auth_token')
+    user.value = { ...DEFAULT_USER }
+  }
+
+  function canEditRecipe(recipe) {
+    if (isAdmin.value || user.value.role === 'senior_editor') return true
+    if (user.value.role === 'editor' && recipe._owner_id === user.value.id) return true
+    return false
+  }
+
+  return {
+    token,
+    user,
+    isLoggedIn,
+    isAdmin,
+    canEdit,
+    isBusiness,
+    initToken,
+    loadMe,
+    login,
+    register,
+    logout,
+    canEditRecipe,
+  }
+})
diff --git a/frontend/src/stores/diary.js b/frontend/src/stores/diary.js
new file mode 100644
index 0000000..d56361e
--- /dev/null
+++ b/frontend/src/stores/diary.js
@@ -0,0 +1,56 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { api } from '../composables/useApi'
+
+export const useDiaryStore = defineStore('diary', () => {
+  const userDiary = ref([])
+  const currentDiaryId = ref(null)
+
+  // Actions
+  async function loadDiary() {
+    const data = await api.get('/api/diary')
+    userDiary.value = data
+  }
+
+  async function createDiary(data) {
+    const result = await api.post('/api/diary', data)
+    await loadDiary()
+    return result
+  }
+
+  async function updateDiary(id, data) {
+    const result = await api.put(`/api/diary/${id}`, data)
+    await loadDiary()
+    return result
+  }
+
+  async function deleteDiary(id) {
+    await api.delete(`/api/diary/${id}`)
+    userDiary.value = userDiary.value.filter((d) => (d._id ?? d.id) !== id)
+    if (currentDiaryId.value === id) {
+      currentDiaryId.value = null
+    }
+  }
+
+  async function addEntry(diaryId, content) {
+    const result = await api.post(`/api/diary/${diaryId}/entries`, content)
+    await loadDiary()
+    return result
+  }
+
+  async function deleteEntry(entryId) {
+    await api.delete(`/api/diary/entries/${entryId}`)
+    await loadDiary()
+  }
+
+  return {
+    userDiary,
+    currentDiaryId,
+    loadDiary,
+    createDiary,
+    updateDiary,
+    deleteDiary,
+    addEntry,
+    deleteEntry,
+  }
+})
diff --git a/frontend/src/stores/oils.js b/frontend/src/stores/oils.js
new file mode 100644
index 0000000..d5df3bc
--- /dev/null
+++ b/frontend/src/stores/oils.js
@@ -0,0 +1,106 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { api } from '../composables/useApi'
+
+export const DROPS_PER_ML = 18.6
+
+export const VOLUME_DROPS = {
+  '2.5': 46,
+  '5': 93,
+  '10': 186,
+  '15': 280,
+  '115': 2146,
+}
+
+export const useOilsStore = defineStore('oils', () => {
+  const oils = ref(new Map())
+  const oilsMeta = ref(new Map())
+
+  // Getters
+  const oilNames = computed(() =>
+    [...oils.value.keys()].sort((a, b) => a.localeCompare(b, 'zh'))
+  )
+
+  function pricePerDrop(name) {
+    return oils.value.get(name) || 0
+  }
+
+  function calcCost(ingredients) {
+    return ingredients.reduce((sum, ing) => {
+      return sum + pricePerDrop(ing.oil) * ing.drops
+    }, 0)
+  }
+
+  function calcRetailCost(ingredients) {
+    return ingredients.reduce((sum, ing) => {
+      const meta = oilsMeta.value.get(ing.oil)
+      if (meta && meta.retailPrice && meta.dropCount) {
+        return sum + (meta.retailPrice / meta.dropCount) * ing.drops
+      }
+      return sum + pricePerDrop(ing.oil) * ing.drops
+    }, 0)
+  }
+
+  function fmtPrice(n) {
+    return '¥ ' + n.toFixed(2)
+  }
+
+  function fmtCostWithRetail(ingredients) {
+    const cost = calcCost(ingredients)
+    const retail = calcRetailCost(ingredients)
+    const costStr = fmtPrice(cost)
+    if (retail > cost) {
+      return { cost: costStr, retail: fmtPrice(retail), hasRetail: true }
+    }
+    return { cost: costStr, retail: null, hasRetail: false }
+  }
+
+  // Actions
+  async function loadOils() {
+    const data = await api.get('/api/oils')
+    const newOils = new Map()
+    const newMeta = new Map()
+    for (const oil of data) {
+      const ppd = oil.drop_count ? oil.bottle_price / oil.drop_count : 0
+      newOils.set(oil.name, ppd)
+      newMeta.set(oil.name, {
+        bottlePrice: oil.bottle_price,
+        dropCount: oil.drop_count,
+        retailPrice: oil.retail_price ?? null,
+        isActive: oil.is_active ?? true,
+      })
+    }
+    oils.value = newOils
+    oilsMeta.value = newMeta
+  }
+
+  async function saveOil(name, bottlePrice, dropCount, retailPrice) {
+    await api.post('/api/oils', {
+      name,
+      bottle_price: bottlePrice,
+      drop_count: dropCount,
+      retail_price: retailPrice,
+    })
+    await loadOils()
+  }
+
+  async function deleteOil(name) {
+    await api.delete(`/api/oils/${encodeURIComponent(name)}`)
+    oils.value.delete(name)
+    oilsMeta.value.delete(name)
+  }
+
+  return {
+    oils,
+    oilsMeta,
+    oilNames,
+    pricePerDrop,
+    calcCost,
+    calcRetailCost,
+    fmtPrice,
+    fmtCostWithRetail,
+    loadOils,
+    saveOil,
+    deleteOil,
+  }
+})
diff --git a/frontend/src/stores/recipes.js b/frontend/src/stores/recipes.js
new file mode 100644
index 0000000..8414741
--- /dev/null
+++ b/frontend/src/stores/recipes.js
@@ -0,0 +1,105 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { api } from '../composables/useApi'
+
+export const useRecipesStore = defineStore('recipes', () => {
+  const recipes = ref([])
+  const allTags = ref([])
+  const userFavorites = ref([])
+
+  // Actions
+  async function loadRecipes() {
+    const data = await api.get('/api/recipes')
+    recipes.value = data.map((r) => ({
+      _id: r._id ?? r.id,
+      _owner_id: r._owner_id ?? r.owner_id,
+      _owner_name: r._owner_name ?? r.owner_name ?? '',
+      _version: r._version ?? r.version ?? 1,
+      name: r.name,
+      note: r.note ?? '',
+      tags: r.tags ?? [],
+      ingredients: (r.ingredients ?? []).map((ing) => ({
+        oil: ing.oil ?? ing.name,
+        drops: ing.drops,
+      })),
+    }))
+  }
+
+  async function loadTags() {
+    const data = await api.get('/api/tags')
+    const apiTags = data.map((t) => (typeof t === 'string' ? t : t.name))
+    const recipeTags = recipes.value.flatMap((r) => r.tags)
+    const tagSet = new Set([...apiTags, ...recipeTags])
+    allTags.value = [...tagSet].sort((a, b) => a.localeCompare(b, 'zh'))
+  }
+
+  async function loadFavorites() {
+    try {
+      const data = await api.get('/api/favorites')
+      userFavorites.value = data.map((f) => f._id ?? f.id ?? f.recipe_id ?? f)
+    } catch {
+      userFavorites.value = []
+    }
+  }
+
+  async function saveRecipe(recipe) {
+    if (recipe._id) {
+      const data = await api.put(`/api/recipes/${recipe._id}`, recipe)
+      const idx = recipes.value.findIndex((r) => r._id === recipe._id)
+      if (idx !== -1) {
+        recipes.value[idx] = { ...recipes.value[idx], ...recipe, _version: data._version ?? data.version ?? recipe._version }
+      }
+      return data
+    } else {
+      const data = await api.post('/api/recipes', recipe)
+      await loadRecipes()
+      return data
+    }
+  }
+
+  async function deleteRecipe(id) {
+    await api.delete(`/api/recipes/${id}`)
+    recipes.value = recipes.value.filter((r) => r._id !== id)
+  }
+
+  async function toggleFavorite(recipeId) {
+    if (userFavorites.value.includes(recipeId)) {
+      await api.delete(`/api/favorites/${recipeId}`)
+      userFavorites.value = userFavorites.value.filter((id) => id !== recipeId)
+    } else {
+      await api.post(`/api/favorites/${recipeId}`)
+      userFavorites.value.push(recipeId)
+    }
+  }
+
+  function isFavorite(recipe) {
+    return userFavorites.value.includes(recipe._id)
+  }
+
+  async function createTag(name) {
+    await api.post('/api/tags', { name })
+    if (!allTags.value.includes(name)) {
+      allTags.value = [...allTags.value, name].sort((a, b) => a.localeCompare(b, 'zh'))
+    }
+  }
+
+  async function deleteTag(name) {
+    await api.delete(`/api/tags/${encodeURIComponent(name)}`)
+    allTags.value = allTags.value.filter((t) => t !== name)
+  }
+
+  return {
+    recipes,
+    allTags,
+    userFavorites,
+    loadRecipes,
+    loadTags,
+    loadFavorites,
+    saveRecipe,
+    deleteRecipe,
+    toggleFavorite,
+    isFavorite,
+    createTag,
+    deleteTag,
+  }
+})
diff --git a/frontend/src/stores/ui.js b/frontend/src/stores/ui.js
new file mode 100644
index 0000000..d767041
--- /dev/null
+++ b/frontend/src/stores/ui.js
@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useUiStore = defineStore('ui', () => {
+  const currentSection = ref('search')
+  const showLoginModal = ref(false)
+  const toasts = ref([])
+
+  let toastId = 0
+
+  function showSection(name) {
+    currentSection.value = name
+  }
+
+  function showToast(msg, duration = 1800) {
+    const id = ++toastId
+    toasts.value.push({ id, msg })
+    setTimeout(() => {
+      toasts.value = toasts.value.filter((t) => t.id !== id)
+    }, duration)
+  }
+
+  function openLogin() {
+    showLoginModal.value = true
+  }
+
+  function closeLogin() {
+    showLoginModal.value = false
+  }
+
+  return {
+    currentSection,
+    showLoginModal,
+    toasts,
+    showSection,
+    showToast,
+    openLogin,
+    closeLogin,
+  }
+})
diff --git a/frontend/src/views/AuditLog.vue b/frontend/src/views/AuditLog.vue
new file mode 100644
index 0000000..e4b7a6d
--- /dev/null
+++ b/frontend/src/views/AuditLog.vue
@@ -0,0 +1,380 @@
+<template>
+  <div class="audit-log">
+    <h3 class="page-title">📜 操作日志</h3>
+
+    <!-- Action Type Filters -->
+    <div class="filter-row">
+      <span class="filter-label">操作类型:</span>
+      <button
+        v-for="action in actionTypes"
+        :key="action.value"
+        class="filter-btn"
+        :class="{ active: selectedAction === action.value }"
+        @click="selectedAction = selectedAction === action.value ? '' : action.value"
+      >{{ action.label }}</button>
+    </div>
+
+    <!-- User Filters -->
+    <div class="filter-row" v-if="uniqueUsers.length > 0">
+      <span class="filter-label">用户:</span>
+      <button
+        v-for="u in uniqueUsers"
+        :key="u"
+        class="filter-btn"
+        :class="{ active: selectedUser === u }"
+        @click="selectedUser = selectedUser === u ? '' : u"
+      >{{ u }}</button>
+    </div>
+
+    <!-- Log List -->
+    <div class="log-list">
+      <div v-for="log in filteredLogs" :key="log._id || log.id" class="log-item">
+        <div class="log-header">
+          <span class="log-action" :class="actionClass(log.action)">{{ actionLabel(log.action) }}</span>
+          <span class="log-user">{{ log.user_name || log.username || '系统' }}</span>
+          <span class="log-time">{{ formatTime(log.created_at) }}</span>
+        </div>
+        <div class="log-detail">
+          <span v-if="log.target_type" class="log-target">{{ log.target_type }}: </span>
+          <span class="log-desc">{{ log.description || log.detail || formatDetail(log) }}</span>
+        </div>
+        <div v-if="log.changes" class="log-changes">
+          <pre class="changes-pre">{{ typeof log.changes === 'string' ? log.changes : JSON.stringify(log.changes, null, 2) }}</pre>
+        </div>
+        <button
+          v-if="log.undoable"
+          class="btn-undo"
+          @click="undoLog(log)"
+        >↩ 撤销</button>
+      </div>
+      <div v-if="filteredLogs.length === 0" class="empty-hint">暂无日志记录</div>
+    </div>
+
+    <!-- Load More -->
+    <div v-if="hasMore" class="load-more">
+      <button class="btn-outline" @click="loadMore" :disabled="loading">
+        {{ loading ? '加载中...' : '加载更多' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useUiStore } from '../stores/ui'
+import { api } from '../composables/useApi'
+import { showConfirm } from '../composables/useDialog'
+
+const auth = useAuthStore()
+const ui = useUiStore()
+
+const logs = ref([])
+const loading = ref(false)
+const hasMore = ref(true)
+const page = ref(0)
+const pageSize = 50
+const selectedAction = ref('')
+const selectedUser = ref('')
+
+const actionTypes = [
+  { value: 'create', label: '创建' },
+  { value: 'update', label: '更新' },
+  { value: 'delete', label: '删除' },
+  { value: 'login', label: '登录' },
+  { value: 'approve', label: '审核' },
+  { value: 'export', label: '导出' },
+]
+
+const uniqueUsers = computed(() => {
+  const names = new Set()
+  for (const log of logs.value) {
+    const name = log.user_name || log.username
+    if (name) names.add(name)
+  }
+  return [...names].sort()
+})
+
+const filteredLogs = computed(() => {
+  let result = logs.value
+  if (selectedAction.value) {
+    result = result.filter(l => l.action === selectedAction.value)
+  }
+  if (selectedUser.value) {
+    result = result.filter(l =>
+      (l.user_name || l.username) === selectedUser.value
+    )
+  }
+  return result
+})
+
+function actionLabel(action) {
+  const map = {
+    create: '创建',
+    update: '更新',
+    delete: '删除',
+    login: '登录',
+    approve: '审核',
+    reject: '拒绝',
+    export: '导出',
+    undo: '撤销',
+  }
+  return map[action] || action
+}
+
+function actionClass(action) {
+  return {
+    'action-create': action === 'create',
+    'action-update': action === 'update',
+    'action-delete': action === 'delete' || action === 'reject',
+    'action-login': action === 'login',
+    'action-approve': action === 'approve',
+  }
+}
+
+function formatTime(t) {
+  if (!t) return ''
+  const d = new Date(t)
+  return d.toLocaleString('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+function formatDetail(log) {
+  if (log.target_name) return log.target_name
+  if (log.recipe_name) return log.recipe_name
+  if (log.oil_name) return log.oil_name
+  return ''
+}
+
+async function fetchLogs() {
+  loading.value = true
+  try {
+    const res = await api(`/api/audit-logs?offset=${page.value * pageSize}&limit=${pageSize}`)
+    if (res.ok) {
+      const data = await res.json()
+      const items = Array.isArray(data) ? data : data.logs || data.items || []
+      if (items.length < pageSize) {
+        hasMore.value = false
+      }
+      logs.value.push(...items)
+    }
+  } catch {
+    hasMore.value = false
+  }
+  loading.value = false
+}
+
+function loadMore() {
+  page.value++
+  fetchLogs()
+}
+
+async function undoLog(log) {
+  const ok = await showConfirm('确定撤销此操作？')
+  if (!ok) return
+  try {
+    const id = log._id || log.id
+    const res = await api(`/api/audit-logs/${id}/undo`, { method: 'POST' })
+    if (res.ok) {
+      ui.showToast('已撤销')
+      // Refresh
+      logs.value = []
+      page.value = 0
+      hasMore.value = true
+      await fetchLogs()
+    } else {
+      ui.showToast('撤销失败')
+    }
+  } catch {
+    ui.showToast('撤销失败')
+  }
+}
+
+onMounted(() => {
+  fetchLogs()
+})
+</script>
+
+<style scoped>
+.audit-log {
+  padding: 0 12px 24px;
+}
+
+.page-title {
+  margin: 0 0 16px;
+  font-size: 16px;
+  color: #3e3a44;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
+
+.filter-label {
+  font-size: 13px;
+  color: #6b6375;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.filter-btn {
+  padding: 5px 14px;
+  border-radius: 16px;
+  border: 1.5px solid #e5e4e7;
+  background: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  color: #6b6375;
+  transition: all 0.15s;
+}
+
+.filter-btn.active {
+  background: #e8f5e9;
+  border-color: #7ec6a4;
+  color: #2e7d5a;
+  font-weight: 600;
+}
+
+.filter-btn:hover {
+  border-color: #d4cfc7;
+}
+
+.log-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.log-item {
+  padding: 12px 14px;
+  background: #fff;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 10px;
+  transition: border-color 0.15s;
+}
+
+.log-item:hover {
+  border-color: #d4cfc7;
+}
+
+.log-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.log-action {
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  background: #f0eeeb;
+  color: #6b6375;
+}
+
+.action-create { background: #e8f5e9; color: #2e7d5a; }
+.action-update { background: #e3f2fd; color: #1565c0; }
+.action-delete { background: #ffebee; color: #c62828; }
+.action-login { background: #fff3e0; color: #e65100; }
+.action-approve { background: #f3e5f5; color: #7b1fa2; }
+
+.log-user {
+  font-size: 13px;
+  font-weight: 500;
+  color: #3e3a44;
+}
+
+.log-time {
+  font-size: 11px;
+  color: #b0aab5;
+  margin-left: auto;
+}
+
+.log-detail {
+  font-size: 13px;
+  color: #6b6375;
+  margin-top: 2px;
+}
+
+.log-target {
+  font-weight: 500;
+  color: #3e3a44;
+}
+
+.log-changes {
+  margin-top: 6px;
+}
+
+.changes-pre {
+  font-size: 11px;
+  background: #f8f7f5;
+  padding: 8px 10px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 0;
+  color: #6b6375;
+  font-family: ui-monospace, Consolas, monospace;
+  line-height: 1.5;
+  max-height: 120px;
+}
+
+.btn-undo {
+  margin-top: 8px;
+  padding: 4px 12px;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 8px;
+  background: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  color: #6b6375;
+}
+
+.btn-undo:hover {
+  border-color: #7ec6a4;
+  color: #4a9d7e;
+}
+
+.load-more {
+  text-align: center;
+  margin-top: 16px;
+}
+
+.btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 9px 28px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-outline:hover {
+  background: #f8f7f5;
+}
+
+.btn-outline:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.empty-hint {
+  text-align: center;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 32px 0;
+}
+</style>
diff --git a/frontend/src/views/BugTracker.vue b/frontend/src/views/BugTracker.vue
new file mode 100644
index 0000000..74050f4
--- /dev/null
+++ b/frontend/src/views/BugTracker.vue
@@ -0,0 +1,644 @@
+<template>
+  <div class="bug-tracker">
+    <div class="toolbar">
+      <h3 class="page-title">🐛 Bug Tracker</h3>
+      <button class="btn-primary" @click="showAddBug = true">+ 新增Bug</button>
+    </div>
+
+    <!-- Active Bugs -->
+    <div class="section-header">
+      <span>🔴 活跃 ({{ activeBugs.length }})</span>
+    </div>
+    <div class="bug-list">
+      <div v-for="bug in activeBugs" :key="bug._id || bug.id" class="bug-card" :class="'priority-' + (bug.priority || 'normal')">
+        <div class="bug-header">
+          <span class="bug-priority" :class="'p-' + (bug.priority || 'normal')">{{ priorityLabel(bug.priority) }}</span>
+          <span class="bug-status" :class="'s-' + (bug.status || 'open')">{{ statusLabel(bug.status) }}</span>
+          <span class="bug-date">{{ formatDate(bug.created_at) }}</span>
+        </div>
+        <div class="bug-title">{{ bug.title }}</div>
+        <div v-if="bug.description" class="bug-desc">{{ bug.description }}</div>
+        <div v-if="bug.reporter" class="bug-reporter">报告者: {{ bug.reporter }}</div>
+
+        <!-- Status workflow -->
+        <div class="bug-actions">
+          <template v-if="bug.status === 'open'">
+            <button class="btn-sm btn-status" @click="updateStatus(bug, 'testing')">开始测试</button>
+          </template>
+          <template v-else-if="bug.status === 'testing'">
+            <button class="btn-sm btn-status" @click="updateStatus(bug, 'fixed')">标记修复</button>
+            <button class="btn-sm btn-reopen" @click="updateStatus(bug, 'open')">重新打开</button>
+          </template>
+          <template v-else-if="bug.status === 'fixed'">
+            <button class="btn-sm btn-status" @click="updateStatus(bug, 'tested')">验证通过</button>
+            <button class="btn-sm btn-reopen" @click="updateStatus(bug, 'open')">重新打开</button>
+          </template>
+          <button class="btn-sm btn-delete" @click="removeBug(bug)">删除</button>
+        </div>
+
+        <!-- Comments -->
+        <div class="comments-section" v-if="expandedBugId === (bug._id || bug.id)">
+          <div v-for="comment in (bug.comments || [])" :key="comment._id || comment.id" class="comment-item">
+            <div class="comment-meta">
+              <span class="comment-author">{{ comment.author || comment.user_name || '匿名' }}</span>
+              <span class="comment-time">{{ formatDate(comment.created_at) }}</span>
+            </div>
+            <div class="comment-text">{{ comment.text || comment.content }}</div>
+          </div>
+          <div class="comment-add">
+            <input
+              v-model="newComment"
+              class="form-input"
+              placeholder="添加备注..."
+              @keydown.enter="addComment(bug)"
+            />
+            <button class="btn-primary btn-sm" @click="addComment(bug)" :disabled="!newComment.trim()">发送</button>
+          </div>
+        </div>
+        <button class="btn-toggle-comments" @click="toggleComments(bug)">
+          💬 {{ (bug.comments || []).length }} 条备注
+          {{ expandedBugId === (bug._id || bug.id) ? '▴' : '▾' }}
+        </button>
+      </div>
+      <div v-if="activeBugs.length === 0" class="empty-hint">暂无活跃Bug</div>
+    </div>
+
+    <!-- Resolved Bugs -->
+    <div class="section-header" style="margin-top:20px" @click="showResolved = !showResolved">
+      <span>✅ 已解决 ({{ resolvedBugs.length }})</span>
+      <span class="toggle-icon">{{ showResolved ? '▾' : '▸' }}</span>
+    </div>
+    <div v-if="showResolved" class="bug-list">
+      <div v-for="bug in resolvedBugs" :key="bug._id || bug.id" class="bug-card resolved">
+        <div class="bug-header">
+          <span class="bug-priority" :class="'p-' + (bug.priority || 'normal')">{{ priorityLabel(bug.priority) }}</span>
+          <span class="bug-status s-tested">已解决</span>
+          <span class="bug-date">{{ formatDate(bug.created_at) }}</span>
+        </div>
+        <div class="bug-title">{{ bug.title }}</div>
+        <div class="bug-actions">
+          <button class="btn-sm btn-reopen" @click="updateStatus(bug, 'open')">重新打开</button>
+          <button class="btn-sm btn-delete" @click="removeBug(bug)">删除</button>
+        </div>
+      </div>
+      <div v-if="resolvedBugs.length === 0" class="empty-hint">暂无已解决Bug</div>
+    </div>
+
+    <!-- Add Bug Modal -->
+    <div v-if="showAddBug" class="overlay" @click.self="showAddBug = false">
+      <div class="overlay-panel">
+        <div class="overlay-header">
+          <h3>新增Bug</h3>
+          <button class="btn-close" @click="showAddBug = false">✕</button>
+        </div>
+        <div class="form-group">
+          <label>标题</label>
+          <input v-model="bugForm.title" class="form-input" placeholder="Bug标题" />
+        </div>
+        <div class="form-group">
+          <label>描述</label>
+          <textarea v-model="bugForm.description" class="form-textarea" rows="4" placeholder="Bug描述，复现步骤等..."></textarea>
+        </div>
+        <div class="form-group">
+          <label>优先级</label>
+          <div class="priority-btns">
+            <button
+              v-for="p in priorities"
+              :key="p.value"
+              class="priority-btn"
+              :class="{ active: bugForm.priority === p.value, ['p-' + p.value]: true }"
+              @click="bugForm.priority = p.value"
+            >{{ p.label }}</button>
+          </div>
+        </div>
+        <div class="overlay-footer">
+          <button class="btn-outline" @click="showAddBug = false">取消</button>
+          <button class="btn-primary" @click="createBug" :disabled="!bugForm.title.trim()">提交</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useUiStore } from '../stores/ui'
+import { api } from '../composables/useApi'
+import { showConfirm } from '../composables/useDialog'
+
+const auth = useAuthStore()
+const ui = useUiStore()
+
+const bugs = ref([])
+const showAddBug = ref(false)
+const showResolved = ref(false)
+const expandedBugId = ref(null)
+const newComment = ref('')
+
+const bugForm = reactive({
+  title: '',
+  description: '',
+  priority: 'normal',
+})
+
+const priorities = [
+  { value: 'low', label: '低' },
+  { value: 'normal', label: '中' },
+  { value: 'high', label: '高' },
+  { value: 'critical', label: '紧急' },
+]
+
+const activeBugs = computed(() =>
+  bugs.value.filter(b => b.status !== 'tested' && b.status !== 'closed')
+    .sort((a, b) => {
+      const order = { critical: 0, high: 1, normal: 2, low: 3 }
+      return (order[a.priority] ?? 2) - (order[b.priority] ?? 2)
+    })
+)
+
+const resolvedBugs = computed(() =>
+  bugs.value.filter(b => b.status === 'tested' || b.status === 'closed')
+)
+
+function priorityLabel(p) {
+  const map = { low: '低', normal: '中', high: '高', critical: '紧急' }
+  return map[p] || '中'
+}
+
+function statusLabel(s) {
+  const map = { open: '待处理', testing: '测试中', fixed: '已修复', tested: '已验证', closed: '已关闭' }
+  return map[s] || s
+}
+
+function formatDate(d) {
+  if (!d) return ''
+  return new Date(d).toLocaleString('zh-CN', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function toggleComments(bug) {
+  const id = bug._id || bug.id
+  expandedBugId.value = expandedBugId.value === id ? null : id
+}
+
+async function loadBugs() {
+  try {
+    const res = await api('/api/bugs')
+    if (res.ok) {
+      bugs.value = await res.json()
+    }
+  } catch {
+    bugs.value = []
+  }
+}
+
+async function createBug() {
+  if (!bugForm.title.trim()) return
+  try {
+    const res = await api('/api/bugs', {
+      method: 'POST',
+      body: JSON.stringify({
+        title: bugForm.title.trim(),
+        description: bugForm.description.trim(),
+        priority: bugForm.priority,
+        status: 'open',
+        reporter: auth.user.display_name || auth.user.username,
+      }),
+    })
+    if (res.ok) {
+      showAddBug.value = false
+      bugForm.title = ''
+      bugForm.description = ''
+      bugForm.priority = 'normal'
+      await loadBugs()
+      ui.showToast('Bug已提交')
+    }
+  } catch {
+    ui.showToast('提交失败')
+  }
+}
+
+async function updateStatus(bug, newStatus) {
+  const id = bug._id || bug.id
+  try {
+    const res = await api(`/api/bugs/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify({ status: newStatus }),
+    })
+    if (res.ok) {
+      bug.status = newStatus
+      ui.showToast(`状态已更新: ${statusLabel(newStatus)}`)
+    }
+  } catch {
+    ui.showToast('更新失败')
+  }
+}
+
+async function removeBug(bug) {
+  const ok = await showConfirm(`确定删除 "${bug.title}"？`)
+  if (!ok) return
+  const id = bug._id || bug.id
+  try {
+    const res = await api(`/api/bugs/${id}`, { method: 'DELETE' })
+    if (res.ok) {
+      bugs.value = bugs.value.filter(b => (b._id || b.id) !== id)
+      ui.showToast('已删除')
+    }
+  } catch {
+    ui.showToast('删除失败')
+  }
+}
+
+async function addComment(bug) {
+  if (!newComment.value.trim()) return
+  const id = bug._id || bug.id
+  try {
+    const res = await api(`/api/bugs/${id}/comments`, {
+      method: 'POST',
+      body: JSON.stringify({
+        text: newComment.value.trim(),
+        author: auth.user.display_name || auth.user.username,
+      }),
+    })
+    if (res.ok) {
+      newComment.value = ''
+      await loadBugs()
+      ui.showToast('备注已添加')
+    }
+  } catch {
+    ui.showToast('添加失败')
+  }
+}
+
+onMounted(() => {
+  loadBugs()
+})
+</script>
+
+<style scoped>
+.bug-tracker {
+  padding: 0 12px 24px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 16px;
+  color: #3e3a44;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+
+.toggle-icon {
+  font-size: 12px;
+  color: #999;
+}
+
+.bug-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bug-card {
+  padding: 14px 16px;
+  background: #fff;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 12px;
+  border-left: 4px solid #e5e4e7;
+}
+
+.bug-card.priority-critical { border-left-color: #d32f2f; }
+.bug-card.priority-high { border-left-color: #f57c00; }
+.bug-card.priority-normal { border-left-color: #1976d2; }
+.bug-card.priority-low { border-left-color: #9e9e9e; }
+.bug-card.resolved { opacity: 0.7; }
+
+.bug-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.bug-priority {
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.p-critical { background: #ffebee; color: #c62828; }
+.p-high { background: #fff3e0; color: #e65100; }
+.p-normal { background: #e3f2fd; color: #1565c0; }
+.p-low { background: #f5f5f5; color: #757575; }
+
+.bug-status {
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.s-open { background: #ffebee; color: #c62828; }
+.s-testing { background: #fff3e0; color: #e65100; }
+.s-fixed { background: #e3f2fd; color: #1565c0; }
+.s-tested { background: #e8f5e9; color: #2e7d5a; }
+
+.bug-date {
+  font-size: 11px;
+  color: #b0aab5;
+  margin-left: auto;
+}
+
+.bug-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: #3e3a44;
+  margin-bottom: 4px;
+}
+
+.bug-desc {
+  font-size: 13px;
+  color: #6b6375;
+  line-height: 1.6;
+  margin-bottom: 4px;
+}
+
+.bug-reporter {
+  font-size: 12px;
+  color: #b0aab5;
+  margin-bottom: 6px;
+}
+
+.bug-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+.btn-sm {
+  padding: 5px 14px;
+  font-size: 12px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.btn-status {
+  background: linear-gradient(135deg, #7ec6a4, #4a9d7e);
+  color: #fff;
+}
+
+.btn-reopen {
+  background: #fff3e0;
+  color: #e65100;
+  border: 1.5px solid #ffe0b2;
+}
+
+.btn-delete {
+  background: #fff;
+  color: #ef5350;
+  border: 1.5px solid #ffcdd2;
+}
+
+.btn-toggle-comments {
+  border: none;
+  background: transparent;
+  color: #6b6375;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 6px 0;
+  font-family: inherit;
+  margin-top: 4px;
+}
+
+.btn-toggle-comments:hover {
+  color: #3e3a44;
+}
+
+/* Comments */
+.comments-section {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #f0eeeb;
+}
+
+.comment-item {
+  padding: 8px 10px;
+  background: #f8f7f5;
+  border-radius: 8px;
+  margin-bottom: 6px;
+}
+
+.comment-meta {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+
+.comment-author {
+  font-size: 12px;
+  font-weight: 600;
+  color: #3e3a44;
+}
+
+.comment-time {
+  font-size: 11px;
+  color: #b0aab5;
+}
+
+.comment-text {
+  font-size: 13px;
+  color: #6b6375;
+  line-height: 1.5;
+}
+
+.comment-add {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.form-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.form-input:focus {
+  border-color: #7ec6a4;
+}
+
+/* Overlay */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.overlay-panel {
+  background: #fff;
+  border-radius: 16px;
+  padding: 24px;
+  max-width: 480px;
+  width: 100%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+}
+
+.overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.overlay-header h3 {
+  margin: 0;
+  font-size: 17px;
+  color: #3e3a44;
+}
+
+.overlay-footer {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 18px;
+}
+
+.form-group {
+  margin-bottom: 14px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 6px;
+}
+
+.form-textarea {
+  width: 100%;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.form-textarea:focus {
+  border-color: #7ec6a4;
+}
+
+.priority-btns {
+  display: flex;
+  gap: 6px;
+}
+
+.priority-btn {
+  padding: 6px 16px;
+  border-radius: 8px;
+  border: 1.5px solid #e5e4e7;
+  background: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.15s;
+}
+
+.priority-btn.active {
+  font-weight: 600;
+}
+
+.priority-btn.active.p-low { background: #f5f5f5; border-color: #9e9e9e; color: #616161; }
+.priority-btn.active.p-normal { background: #e3f2fd; border-color: #64b5f6; color: #1565c0; }
+.priority-btn.active.p-high { background: #fff3e0; border-color: #ffb74d; color: #e65100; }
+.priority-btn.active.p-critical { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
+
+/* Buttons */
+.btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-close {
+  border: none;
+  background: #f0eeeb;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b6375;
+}
+
+.empty-hint {
+  text-align: center;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 24px 0;
+}
+</style>
diff --git a/frontend/src/views/Inventory.vue b/frontend/src/views/Inventory.vue
new file mode 100644
index 0000000..2340a20
--- /dev/null
+++ b/frontend/src/views/Inventory.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="inventory-page">
+    <!-- Search -->
+    <div class="search-box">
+      <input
+        class="search-input"
+        v-model="searchQuery"
+        placeholder="搜索精油..."
+      />
+      <button v-if="searchQuery" class="search-clear-btn" @click="searchQuery = ''">✕</button>
+    </div>
+
+    <!-- Oil Picker Grid -->
+    <div class="section-label">点击添加到库存</div>
+    <div class="oil-picker-grid">
+      <div
+        v-for="name in filteredOilNames"
+        :key="name"
+        class="oil-pick-chip"
+        :class="{ owned: ownedSet.has(name) }"
+        @click="toggleOil(name)"
+      >
+        <span class="pick-dot" :class="{ active: ownedSet.has(name) }">{{ ownedSet.has(name) ? '✓' : '+' }}</span>
+        <span class="pick-name">{{ name }}</span>
+      </div>
+      <div v-if="filteredOilNames.length === 0" class="empty-hint">未找到精油</div>
+    </div>
+
+    <!-- Owned Oils Section -->
+    <div class="section-header">
+      <span>🧴 已有精油 ({{ ownedOils.length }})</span>
+      <button v-if="ownedOils.length" class="btn-sm btn-outline" @click="clearAll">清空</button>
+    </div>
+    <div v-if="ownedOils.length" class="owned-grid">
+      <div v-for="name in ownedOils" :key="name" class="owned-chip" @click="toggleOil(name)">
+        {{ name }} ✕
+      </div>
+    </div>
+    <div v-else class="empty-hint">暂未添加精油，点击上方精油添加到库存</div>
+
+    <!-- Matching Recipes Section -->
+    <div class="section-header" style="margin-top:20px">
+      <span>📋 可做的配方 ({{ matchingRecipes.length }})</span>
+    </div>
+    <div v-if="matchingRecipes.length" class="matching-list">
+      <div v-for="r in matchingRecipes" :key="r._id" class="match-card">
+        <div class="match-name">{{ r.name }}</div>
+        <div class="match-ings">
+          <span
+            v-for="ing in r.ingredients"
+            :key="ing.oil"
+            class="match-ing"
+            :class="{ missing: !ownedSet.has(ing.oil) }"
+          >
+            {{ ing.oil }} {{ ing.drops }}滴
+          </span>
+        </div>
+        <div class="match-meta">
+          <span class="match-coverage">覆盖 {{ coveragePercent(r) }}%</span>
+          <span v-if="missingOils(r).length" class="match-missing">
+            缺少: {{ missingOils(r).join(', ') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div v-else class="empty-hint">
+      {{ ownedOils.length ? '暂无完全匹配的配方' : '添加精油后自动推荐配方' }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useOilsStore } from '../stores/oils'
+import { useRecipesStore } from '../stores/recipes'
+import { useUiStore } from '../stores/ui'
+import { api } from '../composables/useApi'
+
+const auth = useAuthStore()
+const oils = useOilsStore()
+const recipeStore = useRecipesStore()
+const ui = useUiStore()
+
+const searchQuery = ref('')
+const ownedOils = ref([])
+const loading = ref(false)
+
+const ownedSet = computed(() => new Set(ownedOils.value))
+
+const filteredOilNames = computed(() => {
+  if (!searchQuery.value.trim()) return oils.oilNames
+  const q = searchQuery.value.trim().toLowerCase()
+  return oils.oilNames.filter(n => n.toLowerCase().includes(q))
+})
+
+const matchingRecipes = computed(() => {
+  if (ownedOils.value.length === 0) return []
+  return recipeStore.recipes
+    .filter(r => {
+      const needed = r.ingredients.map(i => i.oil)
+      const coverage = needed.filter(o => ownedSet.value.has(o)).length
+      return coverage >= Math.ceil(needed.length * 0.5)
+    })
+    .sort((a, b) => {
+      const aCov = coverageRatio(a)
+      const bCov = coverageRatio(b)
+      return bCov - aCov
+    })
+})
+
+function coverageRatio(recipe) {
+  const needed = recipe.ingredients.map(i => i.oil)
+  if (needed.length === 0) return 0
+  return needed.filter(o => ownedSet.value.has(o)).length / needed.length
+}
+
+function coveragePercent(recipe) {
+  return Math.round(coverageRatio(recipe) * 100)
+}
+
+function missingOils(recipe) {
+  return recipe.ingredients
+    .map(i => i.oil)
+    .filter(o => !ownedSet.value.has(o))
+}
+
+async function loadInventory() {
+  loading.value = true
+  try {
+    const res = await api('/api/inventory')
+    if (res.ok) {
+      const data = await res.json()
+      ownedOils.value = data.oils || data || []
+    }
+  } catch {
+    // inventory may not exist yet
+  }
+  loading.value = false
+}
+
+async function saveInventory() {
+  try {
+    await api('/api/inventory', {
+      method: 'PUT',
+      body: JSON.stringify({ oils: ownedOils.value }),
+    })
+  } catch {
+    // silent save
+  }
+}
+
+async function toggleOil(name) {
+  const idx = ownedOils.value.indexOf(name)
+  if (idx >= 0) {
+    ownedOils.value.splice(idx, 1)
+  } else {
+    ownedOils.value.push(name)
+    ownedOils.value.sort((a, b) => a.localeCompare(b, 'zh'))
+  }
+  await saveInventory()
+}
+
+async function clearAll() {
+  ownedOils.value = []
+  await saveInventory()
+  ui.showToast('已清空库存')
+}
+
+onMounted(() => {
+  loadInventory()
+})
+</script>
+
+<style scoped>
+.inventory-page {
+  padding: 0 12px 24px;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  background: #f8f7f5;
+  border-radius: 10px;
+  padding: 2px 8px;
+  border: 1.5px solid #e5e4e7;
+  margin-bottom: 14px;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 8px 6px;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+}
+
+.search-clear-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #999;
+  padding: 4px;
+}
+
+.section-label {
+  font-size: 12px;
+  color: #b0aab5;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+
+.oil-picker-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 20px;
+}
+
+.oil-pick-chip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border-radius: 20px;
+  background: #f8f7f5;
+  border: 1.5px solid #e5e4e7;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+  color: #3e3a44;
+}
+
+.oil-pick-chip:hover {
+  border-color: #d4cfc7;
+  background: #f0eeeb;
+}
+
+.oil-pick-chip.owned {
+  background: #e8f5e9;
+  border-color: #7ec6a4;
+  color: #2e7d5a;
+}
+
+.pick-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #e5e4e7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  color: #999;
+}
+
+.pick-dot.active {
+  background: #4a9d7e;
+  color: #fff;
+}
+
+.pick-name {
+  font-size: 13px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 4px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 8px;
+}
+
+.owned-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.owned-chip {
+  padding: 6px 12px;
+  border-radius: 20px;
+  background: #e8f5e9;
+  border: 1.5px solid #7ec6a4;
+  font-size: 13px;
+  color: #2e7d5a;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.owned-chip:hover {
+  background: #ffebee;
+  border-color: #ef9a9a;
+  color: #c62828;
+}
+
+.matching-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.match-card {
+  padding: 12px 14px;
+  background: #fff;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 12px;
+}
+
+.match-name {
+  font-weight: 600;
+  font-size: 14px;
+  color: #3e3a44;
+  margin-bottom: 6px;
+}
+
+.match-ings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+
+.match-ing {
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: #e8f5e9;
+  font-size: 12px;
+  color: #2e7d5a;
+}
+
+.match-ing.missing {
+  background: #fff3e0;
+  color: #e65100;
+}
+
+.match-meta {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 12px;
+}
+
+.match-coverage {
+  color: #4a9d7e;
+  font-weight: 600;
+}
+
+.match-missing {
+  color: #999;
+}
+
+.btn-sm {
+  padding: 5px 12px;
+  font-size: 12px;
+  border-radius: 8px;
+}
+
+.btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-outline:hover {
+  background: #f8f7f5;
+}
+
+.empty-hint {
+  text-align: center;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 24px 0;
+}
+</style>
diff --git a/frontend/src/views/MyDiary.vue b/frontend/src/views/MyDiary.vue
new file mode 100644
index 0000000..f8ce034
--- /dev/null
+++ b/frontend/src/views/MyDiary.vue
@@ -0,0 +1,872 @@
+<template>
+  <div class="my-diary">
+    <!-- Sub Tabs -->
+    <div class="sub-tabs">
+      <button class="sub-tab" :class="{ active: activeTab === 'diary' }" @click="activeTab = 'diary'">📖 配方日记</button>
+      <button class="sub-tab" :class="{ active: activeTab === 'brand' }" @click="activeTab = 'brand'">🏷️ Brand</button>
+      <button class="sub-tab" :class="{ active: activeTab === 'account' }" @click="activeTab = 'account'">👤 Account</button>
+    </div>
+
+    <!-- Diary Tab -->
+    <div v-if="activeTab === 'diary'" class="tab-content">
+      <!-- Smart Paste -->
+      <div class="paste-section">
+        <textarea
+          v-model="pasteText"
+          class="paste-input"
+          placeholder="粘贴配方文本，智能识别...&#10;例如: 舒缓配方，薰衣草3滴，茶树2滴"
+          rows="3"
+        ></textarea>
+        <button class="btn-primary" @click="handleSmartPaste" :disabled="!pasteText.trim()">智能添加</button>
+      </div>
+
+      <!-- Diary Recipe Grid -->
+      <div class="diary-grid">
+        <div
+          v-for="d in diaryStore.userDiary"
+          :key="d._id || d.id"
+          class="diary-card"
+          :class="{ selected: selectedDiaryId === (d._id || d.id) }"
+          @click="selectDiary(d)"
+        >
+          <div class="diary-name">{{ d.name || '未命名' }}</div>
+          <div class="diary-ings">
+            <span v-for="ing in (d.ingredients || []).slice(0, 3)" :key="ing.oil" class="diary-ing">
+              {{ ing.oil }} {{ ing.drops }}滴
+            </span>
+            <span v-if="(d.ingredients || []).length > 3" class="diary-more">+{{ (d.ingredients || []).length - 3 }}</span>
+          </div>
+          <div class="diary-meta">
+            <span class="diary-cost" v-if="d.ingredients">{{ oils.fmtPrice(oils.calcCost(d.ingredients)) }}</span>
+            <span class="diary-entries">{{ (d.entries || []).length }} 条日志</span>
+          </div>
+        </div>
+        <div v-if="diaryStore.userDiary.length === 0" class="empty-hint">暂无配方日记</div>
+      </div>
+
+      <!-- Diary Detail Panel -->
+      <div v-if="selectedDiary" class="diary-detail">
+        <div class="detail-header">
+          <input v-model="selectedDiary.name" class="detail-name-input" @blur="updateCurrentDiary" />
+          <button class="btn-icon" @click="deleteDiary(selectedDiary)" title="删除">🗑️</button>
+        </div>
+
+        <!-- Ingredients Editor -->
+        <div class="section-card">
+          <h4>成分</h4>
+          <div v-for="(ing, i) in selectedDiary.ingredients" :key="i" class="ing-row">
+            <select v-model="ing.oil" class="form-select" @change="updateCurrentDiary">
+              <option value="">选择精油</option>
+              <option v-for="name in oils.oilNames" :key="name" :value="name">{{ name }}</option>
+            </select>
+            <input
+              v-model.number="ing.drops"
+              type="number"
+              min="0"
+              class="form-input-sm"
+              @change="updateCurrentDiary"
+            />
+            <button class="btn-icon-sm" @click="selectedDiary.ingredients.splice(i, 1); updateCurrentDiary()">✕</button>
+          </div>
+          <button class="btn-outline btn-sm" @click="selectedDiary.ingredients.push({ oil: '', drops: 1 })">+ 添加</button>
+        </div>
+
+        <!-- Notes -->
+        <div class="section-card">
+          <h4>备注</h4>
+          <textarea
+            v-model="selectedDiary.note"
+            class="form-textarea"
+            rows="2"
+            placeholder="配方备注..."
+            @blur="updateCurrentDiary"
+          ></textarea>
+        </div>
+
+        <!-- Journal Entries -->
+        <div class="section-card">
+          <h4>使用日志</h4>
+          <div class="entry-list">
+            <div v-for="entry in (selectedDiary.entries || [])" :key="entry._id || entry.id" class="entry-item">
+              <div class="entry-date">{{ formatDate(entry.created_at) }}</div>
+              <div class="entry-content">{{ entry.content || entry.text }}</div>
+              <button class="btn-icon-sm" @click="removeEntry(entry)">✕</button>
+            </div>
+          </div>
+          <div class="entry-add">
+            <input
+              v-model="newEntryText"
+              class="form-input"
+              placeholder="记录使用感受..."
+              @keydown.enter="addNewEntry"
+            />
+            <button class="btn-primary btn-sm" @click="addNewEntry" :disabled="!newEntryText.trim()">添加</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Brand Tab -->
+    <div v-if="activeTab === 'brand'" class="tab-content">
+      <div class="section-card">
+        <h4>🏷️ 品牌设置</h4>
+
+        <div class="form-group">
+          <label>品牌名称</label>
+          <input v-model="brandName" class="form-input" placeholder="您的品牌名称" @blur="saveBrandSettings" />
+        </div>
+
+        <div class="form-group">
+          <label>二维码链接</label>
+          <input v-model="brandQrUrl" class="form-input" placeholder="https://..." @blur="saveBrandSettings" />
+          <div v-if="brandQrUrl" class="qr-preview">
+            <img :src="'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=' + encodeURIComponent(brandQrUrl)" alt="QR" class="qr-img" />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label>品牌Logo</label>
+          <div class="upload-area" @click="triggerUpload('logo')">
+            <img v-if="brandLogo" :src="brandLogo" class="upload-preview" />
+            <span v-else class="upload-hint">点击上传Logo</span>
+          </div>
+          <input ref="logoInput" type="file" accept="image/*" style="display:none" @change="handleUpload('logo', $event)" />
+        </div>
+
+        <div class="form-group">
+          <label>卡片背景</label>
+          <div class="upload-area" @click="triggerUpload('bg')">
+            <img v-if="brandBg" :src="brandBg" class="upload-preview wide" />
+            <span v-else class="upload-hint">点击上传背景图</span>
+          </div>
+          <input ref="bgInput" type="file" accept="image/*" style="display:none" @change="handleUpload('bg', $event)" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Account Tab -->
+    <div v-if="activeTab === 'account'" class="tab-content">
+      <div class="section-card">
+        <h4>👤 账号设置</h4>
+
+        <div class="form-group">
+          <label>显示名称</label>
+          <input v-model="displayName" class="form-input" />
+          <button class="btn-primary btn-sm" style="margin-top:6px" @click="updateDisplayName">保存</button>
+        </div>
+
+        <div class="form-group">
+          <label>用户名</label>
+          <div class="form-static">{{ auth.user.username }}</div>
+        </div>
+
+        <div class="form-group">
+          <label>角色</label>
+          <div class="form-static role-badge">{{ roleLabel }}</div>
+        </div>
+      </div>
+
+      <div class="section-card">
+        <h4>🔑 修改密码</h4>
+        <div class="form-group">
+          <label>{{ auth.user.has_password ? '当前密码' : '(首次设置密码)' }}</label>
+          <input v-if="auth.user.has_password" v-model="oldPassword" type="password" class="form-input" placeholder="当前密码" />
+        </div>
+        <div class="form-group">
+          <label>新密码</label>
+          <input v-model="newPassword" type="password" class="form-input" placeholder="新密码" />
+        </div>
+        <div class="form-group">
+          <label>确认密码</label>
+          <input v-model="confirmPassword" type="password" class="form-input" placeholder="确认新密码" />
+        </div>
+        <button class="btn-primary" @click="changePassword">修改密码</button>
+      </div>
+
+      <!-- Business Verification -->
+      <div v-if="!auth.isBusiness" class="section-card">
+        <h4>💼 商业认证</h4>
+        <p class="hint-text">申请商业认证后可使用商业核算功能。</p>
+        <div class="form-group">
+          <label>申请说明</label>
+          <textarea v-model="businessReason" class="form-textarea" rows="3" placeholder="请说明您的申请理由..."></textarea>
+        </div>
+        <button class="btn-primary" @click="applyBusiness" :disabled="!businessReason.trim()">提交申请</button>
+      </div>
+      <div v-else class="section-card">
+        <h4>💼 商业认证</h4>
+        <div class="verified-badge">✅ 已认证商业用户</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useOilsStore } from '../stores/oils'
+import { useDiaryStore } from '../stores/diary'
+import { useUiStore } from '../stores/ui'
+import { api } from '../composables/useApi'
+import { showConfirm, showAlert } from '../composables/useDialog'
+import { parseSingleBlock } from '../composables/useSmartPaste'
+
+const auth = useAuthStore()
+const oils = useOilsStore()
+const diaryStore = useDiaryStore()
+const ui = useUiStore()
+
+const activeTab = ref('diary')
+const pasteText = ref('')
+const selectedDiaryId = ref(null)
+const selectedDiary = ref(null)
+const newEntryText = ref('')
+
+// Brand settings
+const brandName = ref('')
+const brandQrUrl = ref('')
+const brandLogo = ref('')
+const brandBg = ref('')
+const logoInput = ref(null)
+const bgInput = ref(null)
+
+// Account settings
+const displayName = ref('')
+const oldPassword = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const businessReason = ref('')
+
+const roleLabel = computed(() => {
+  const roles = {
+    admin: '管理员',
+    senior_editor: '高级编辑',
+    editor: '编辑',
+    viewer: '查看者',
+  }
+  return roles[auth.user.role] || auth.user.role
+})
+
+onMounted(async () => {
+  await diaryStore.loadDiary()
+  displayName.value = auth.user.display_name || ''
+  await loadBrandSettings()
+})
+
+function selectDiary(d) {
+  const id = d._id || d.id
+  selectedDiaryId.value = id
+  selectedDiary.value = {
+    ...d,
+    _id: id,
+    ingredients: (d.ingredients || []).map(i => ({ ...i })),
+    entries: d.entries || [],
+    note: d.note || '',
+  }
+}
+
+async function handleSmartPaste() {
+  const result = parseSingleBlock(pasteText.value, oils.oilNames)
+  try {
+    await diaryStore.createDiary({
+      name: result.name,
+      ingredients: result.ingredients,
+      note: '',
+    })
+    pasteText.value = ''
+    ui.showToast('已添加配方日记')
+    if (result.notFound.length > 0) {
+      ui.showToast(`未识别: ${result.notFound.join(', ')}`)
+    }
+  } catch (e) {
+    ui.showToast('添加失败')
+  }
+}
+
+async function updateCurrentDiary() {
+  if (!selectedDiary.value) return
+  try {
+    await diaryStore.updateDiary(selectedDiary.value._id, {
+      name: selectedDiary.value.name,
+      ingredients: selectedDiary.value.ingredients.filter(i => i.oil),
+      note: selectedDiary.value.note,
+    })
+  } catch {
+    // silent
+  }
+}
+
+async function deleteDiary(d) {
+  const ok = await showConfirm(`确定删除 "${d.name}"？`)
+  if (!ok) return
+  await diaryStore.deleteDiary(d._id)
+  selectedDiary.value = null
+  selectedDiaryId.value = null
+  ui.showToast('已删除')
+}
+
+async function addNewEntry() {
+  if (!newEntryText.value.trim() || !selectedDiary.value) return
+  try {
+    await diaryStore.addEntry(selectedDiary.value._id, {
+      text: newEntryText.value.trim(),
+    })
+    newEntryText.value = ''
+    // Refresh diary to get new entries
+    const updated = diaryStore.userDiary.find(d => (d._id || d.id) === selectedDiary.value._id)
+    if (updated) selectDiary(updated)
+    ui.showToast('已添加日志')
+  } catch {
+    ui.showToast('添加失败')
+  }
+}
+
+async function removeEntry(entry) {
+  const ok = await showConfirm('确定删除此日志？')
+  if (!ok) return
+  try {
+    await diaryStore.deleteEntry(entry._id || entry.id)
+    const updated = diaryStore.userDiary.find(d => (d._id || d.id) === selectedDiary.value._id)
+    if (updated) selectDiary(updated)
+  } catch {
+    ui.showToast('删除失败')
+  }
+}
+
+function formatDate(d) {
+  if (!d) return ''
+  return new Date(d).toLocaleString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+// Brand settings
+async function loadBrandSettings() {
+  try {
+    const res = await api('/api/brand-settings')
+    if (res.ok) {
+      const data = await res.json()
+      brandName.value = data.brand_name || ''
+      brandQrUrl.value = data.qr_url || ''
+      brandLogo.value = data.logo_url || ''
+      brandBg.value = data.bg_url || ''
+    }
+  } catch {
+    // no brand settings yet
+  }
+}
+
+async function saveBrandSettings() {
+  try {
+    await api('/api/brand-settings', {
+      method: 'PUT',
+      body: JSON.stringify({
+        brand_name: brandName.value,
+        qr_url: brandQrUrl.value,
+      }),
+    })
+  } catch {
+    // silent
+  }
+}
+
+function triggerUpload(type) {
+  if (type === 'logo') logoInput.value?.click()
+  else bgInput.value?.click()
+}
+
+async function handleUpload(type, event) {
+  const file = event.target.files[0]
+  if (!file) return
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('type', type)
+  try {
+    const token = localStorage.getItem('oil_auth_token') || ''
+    const res = await fetch('/api/brand-upload', {
+      method: 'POST',
+      headers: token ? { Authorization: 'Bearer ' + token } : {},
+      body: formData,
+    })
+    if (res.ok) {
+      const data = await res.json()
+      if (type === 'logo') brandLogo.value = data.url
+      else brandBg.value = data.url
+      ui.showToast('上传成功')
+    }
+  } catch {
+    ui.showToast('上传失败')
+  }
+}
+
+// Account
+async function updateDisplayName() {
+  try {
+    await api('/api/me/display-name', {
+      method: 'PUT',
+      body: JSON.stringify({ display_name: displayName.value }),
+    })
+    auth.user.display_name = displayName.value
+    ui.showToast('已更新')
+  } catch {
+    ui.showToast('更新失败')
+  }
+}
+
+async function changePassword() {
+  if (newPassword.value !== confirmPassword.value) {
+    await showAlert('两次密码输入不一致')
+    return
+  }
+  if (newPassword.value.length < 4) {
+    await showAlert('密码至少4个字符')
+    return
+  }
+  try {
+    await api('/api/me/password', {
+      method: 'PUT',
+      body: JSON.stringify({
+        old_password: oldPassword.value,
+        new_password: newPassword.value,
+      }),
+    })
+    oldPassword.value = ''
+    newPassword.value = ''
+    confirmPassword.value = ''
+    ui.showToast('密码已修改')
+    await auth.loadMe()
+  } catch {
+    ui.showToast('修改失败')
+  }
+}
+
+async function applyBusiness() {
+  try {
+    await api('/api/business-apply', {
+      method: 'POST',
+      body: JSON.stringify({ reason: businessReason.value }),
+    })
+    businessReason.value = ''
+    ui.showToast('申请已提交，请等待审核')
+  } catch {
+    ui.showToast('提交失败')
+  }
+}
+</script>
+
+<style scoped>
+.my-diary {
+  padding: 0 12px 24px;
+}
+
+.sub-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 16px;
+  background: #f8f7f5;
+  border-radius: 12px;
+  padding: 4px;
+}
+
+.sub-tab {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 10px 8px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  color: #6b6375;
+  transition: all 0.15s;
+  font-weight: 500;
+}
+
+.sub-tab.active {
+  background: #fff;
+  color: #3e3a44;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.tab-content {
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.paste-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.paste-input {
+  width: 100%;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.paste-input:focus {
+  border-color: #7ec6a4;
+}
+
+.diary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.diary-card {
+  padding: 12px 14px;
+  background: #fff;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.diary-card:hover {
+  border-color: #d4cfc7;
+}
+
+.diary-card.selected {
+  border-color: #7ec6a4;
+  background: #f0faf5;
+}
+
+.diary-name {
+  font-weight: 600;
+  font-size: 14px;
+  color: #3e3a44;
+  margin-bottom: 6px;
+}
+
+.diary-ings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+
+.diary-ing {
+  padding: 2px 8px;
+  background: #f0eeeb;
+  border-radius: 10px;
+  font-size: 11px;
+  color: #6b6375;
+}
+
+.diary-more {
+  font-size: 11px;
+  color: #b0aab5;
+}
+
+.diary-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.diary-cost {
+  color: #4a9d7e;
+  font-weight: 500;
+}
+
+.diary-entries {
+  color: #b0aab5;
+}
+
+/* Detail panel */
+.diary-detail {
+  margin-top: 16px;
+  padding: 16px;
+  background: #f8f7f5;
+  border-radius: 14px;
+  border: 1.5px solid #e5e4e7;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.detail-name-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  font-family: inherit;
+  outline: none;
+}
+
+.detail-name-input:focus {
+  border-color: #7ec6a4;
+}
+
+.section-card {
+  margin-bottom: 14px;
+  padding: 12px;
+  background: #fff;
+  border-radius: 10px;
+  border: 1.5px solid #e5e4e7;
+}
+
+.section-card h4 {
+  margin: 0 0 10px;
+  font-size: 13px;
+  color: #3e3a44;
+}
+
+.ing-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.form-select {
+  flex: 1;
+  padding: 8px 10px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  background: #fff;
+}
+
+.form-input-sm {
+  width: 60px;
+  padding: 8px 8px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  text-align: center;
+}
+
+.form-textarea {
+  width: 100%;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.entry-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.entry-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
+  background: #f8f7f5;
+  border-radius: 8px;
+}
+
+.entry-date {
+  font-size: 11px;
+  color: #b0aab5;
+  white-space: nowrap;
+  margin-top: 2px;
+}
+
+.entry-content {
+  flex: 1;
+  font-size: 13px;
+  color: #3e3a44;
+  line-height: 1.5;
+}
+
+.entry-add {
+  display: flex;
+  gap: 6px;
+}
+
+.form-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.form-input:focus {
+  border-color: #7ec6a4;
+}
+
+/* Brand */
+.form-group {
+  margin-bottom: 14px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 6px;
+}
+
+.form-static {
+  padding: 8px 12px;
+  background: #f0eeeb;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #6b6375;
+}
+
+.role-badge {
+  display: inline-block;
+}
+
+.qr-preview {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.qr-img {
+  width: 120px;
+  height: 120px;
+  border-radius: 8px;
+  border: 1.5px solid #e5e4e7;
+}
+
+.upload-area {
+  width: 100%;
+  min-height: 80px;
+  border: 2px dashed #d4cfc7;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: border-color 0.15s;
+  overflow: hidden;
+}
+
+.upload-area:hover {
+  border-color: #7ec6a4;
+}
+
+.upload-preview {
+  max-width: 80px;
+  max-height: 80px;
+  object-fit: contain;
+}
+
+.upload-preview.wide {
+  max-width: 200px;
+  max-height: 100px;
+}
+
+.upload-hint {
+  font-size: 13px;
+  color: #b0aab5;
+}
+
+.hint-text {
+  font-size: 13px;
+  color: #6b6375;
+  margin-bottom: 12px;
+}
+
+.verified-badge {
+  padding: 12px;
+  background: #e8f5e9;
+  border-radius: 10px;
+  color: #2e7d5a;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Buttons */
+.btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-sm {
+  padding: 6px 14px;
+  font-size: 12px;
+  border-radius: 8px;
+}
+
+.btn-icon {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+}
+
+.btn-icon-sm {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px;
+  color: #999;
+}
+
+.empty-hint {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 24px 0;
+}
+
+@media (max-width: 600px) {
+  .diary-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
new file mode 100644
index 0000000..97bfc4b
--- /dev/null
+++ b/frontend/src/views/OilReference.vue
@@ -0,0 +1,788 @@
+<template>
+  <div class="oil-reference">
+    <!-- Knowledge Cards -->
+    <div class="knowledge-cards">
+      <div class="kcard" @click="showDilution = true">
+        <span class="kcard-icon">💧</span>
+        <span class="kcard-title">稀释比例</span>
+        <span class="kcard-arrow">›</span>
+      </div>
+      <div class="kcard" @click="showContra = true">
+        <span class="kcard-icon">⚠️</span>
+        <span class="kcard-title">使用禁忌</span>
+        <span class="kcard-arrow">›</span>
+      </div>
+    </div>
+
+    <!-- Info Overlays -->
+    <div v-if="showDilution" class="info-overlay" @click.self="showDilution = false">
+      <div class="info-panel">
+        <div class="info-header">
+          <h3>💧 稀释比例参考</h3>
+          <button class="btn-close" @click="showDilution = false">✕</button>
+        </div>
+        <div class="info-body">
+          <table class="info-table">
+            <thead>
+              <tr><th>用途</th><th>比例</th><th>每10ml基底油</th></tr>
+            </thead>
+            <tbody>
+              <tr><td>面部护肤</td><td>1%</td><td>2滴精油</td></tr>
+              <tr><td>身体按摩</td><td>2-3%</td><td>4-6滴精油</td></tr>
+              <tr><td>局部疼痛</td><td>3-5%</td><td>6-10滴精油</td></tr>
+              <tr><td>急救用途</td><td>5-10%</td><td>10-20滴精油</td></tr>
+              <tr><td>儿童(2-6岁)</td><td>0.5-1%</td><td>1-2滴精油</td></tr>
+              <tr><td>婴儿(&lt;2岁)</td><td>0.25%</td><td>0.5滴精油</td></tr>
+            </tbody>
+          </table>
+          <p class="info-note">* 1ml 约等于 {{ DROPS_PER_ML }} 滴</p>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showContra" class="info-overlay" @click.self="showContra = false">
+      <div class="info-panel">
+        <div class="info-header">
+          <h3>⚠️ 使用禁忌</h3>
+          <button class="btn-close" @click="showContra = false">✕</button>
+        </div>
+        <div class="info-body">
+          <div class="contra-section">
+            <h4>光敏性精油（涂抹后12小时内避免阳光直射）</h4>
+            <p>柠檬、佛手柑、葡萄柚、莱姆、甜橙、野橘</p>
+          </div>
+          <div class="contra-section">
+            <h4>孕妇慎用</h4>
+            <p>快乐鼠尾草、迷迭香、肉桂、丁香、百里香、牛至、冬青</p>
+          </div>
+          <div class="contra-section">
+            <h4>儿童慎用</h4>
+            <p>椒样薄荷（6岁以下避免）、尤加利（10岁以下慎用）、冬青、肉桂</p>
+          </div>
+          <div class="contra-section">
+            <h4>宠物禁用</h4>
+            <p>茶树、尤加利、肉桂、丁香、百里香、冬青（对猫有毒）</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Add Oil Form (admin/senior_editor) -->
+    <div v-if="auth.canEdit" class="add-oil-form">
+      <h3 class="section-title">添加精油</h3>
+      <div class="form-row">
+        <input v-model="newOilName" class="form-input" placeholder="精油名称" />
+        <input v-model.number="newBottlePrice" class="form-input-sm" type="number" placeholder="瓶价 ¥" />
+        <input v-model.number="newDropCount" class="form-input-sm" type="number" placeholder="滴数" />
+        <input v-model.number="newRetailPrice" class="form-input-sm" type="number" placeholder="零售价 ¥" />
+        <button class="btn-primary" @click="addOil" :disabled="!newOilName.trim()">添加</button>
+      </div>
+    </div>
+
+    <!-- Search & View Toggle -->
+    <div class="toolbar">
+      <div class="search-box">
+        <input
+          class="search-input"
+          v-model="searchQuery"
+          placeholder="搜索精油..."
+        />
+        <button v-if="searchQuery" class="search-clear-btn" @click="searchQuery = ''">✕</button>
+      </div>
+      <div class="view-toggle">
+        <button
+          class="toggle-btn"
+          :class="{ active: viewMode === 'bottle' }"
+          @click="viewMode = 'bottle'"
+        >🧴 瓶价</button>
+        <button
+          class="toggle-btn"
+          :class="{ active: viewMode === 'drop' }"
+          @click="viewMode = 'drop'"
+        >💧 滴价</button>
+      </div>
+    </div>
+
+    <!-- Oil Grid -->
+    <div class="oil-grid">
+      <div
+        v-for="name in filteredOilNames"
+        :key="name"
+        class="oil-card"
+        @click="selectOil(name)"
+      >
+        <div class="oil-name">{{ name }}</div>
+        <div class="oil-price" v-if="viewMode === 'bottle'">
+          {{ getMeta(name)?.bottlePrice != null ? ('¥ ' + getMeta(name).bottlePrice.toFixed(2)) : '--' }}
+          <span class="oil-count" v-if="getMeta(name)?.dropCount">({{ getMeta(name).dropCount }}滴)</span>
+        </div>
+        <div class="oil-price" v-else>
+          {{ oils.pricePerDrop(name) ? ('¥ ' + oils.pricePerDrop(name).toFixed(4)) : '--' }}
+          <span class="oil-unit">/滴</span>
+        </div>
+        <div v-if="getMeta(name)?.retailPrice" class="oil-retail">
+          零售 ¥ {{ getMeta(name).retailPrice.toFixed(2) }}
+        </div>
+        <div class="oil-actions" v-if="auth.isAdmin" @click.stop>
+          <button class="btn-icon-sm" @click="editOil(name)" title="编辑">✏️</button>
+          <button class="btn-icon-sm" @click="removeOil(name)" title="删除">🗑️</button>
+        </div>
+      </div>
+      <div v-if="filteredOilNames.length === 0" class="empty-hint">未找到精油</div>
+    </div>
+
+    <!-- Oil Detail Card -->
+    <div v-if="selectedOilName" class="oil-detail-overlay" @click.self="selectedOilName = null">
+      <div class="oil-detail-panel">
+        <div class="detail-header">
+          <h3>{{ selectedOilName }}</h3>
+          <button class="btn-close" @click="selectedOilName = null">✕</button>
+        </div>
+        <div class="detail-body">
+          <div class="detail-row">
+            <span class="detail-label">瓶价</span>
+            <span class="detail-value">{{ getMeta(selectedOilName)?.bottlePrice != null ? ('¥ ' + getMeta(selectedOilName).bottlePrice.toFixed(2)) : '--' }}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">总滴数</span>
+            <span class="detail-value">{{ getMeta(selectedOilName)?.dropCount || '--' }}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">每滴价格</span>
+            <span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + oils.pricePerDrop(selectedOilName).toFixed(4)) : '--' }}</span>
+          </div>
+          <div class="detail-row" v-if="getMeta(selectedOilName)?.retailPrice">
+            <span class="detail-label">零售价</span>
+            <span class="detail-value">¥ {{ getMeta(selectedOilName).retailPrice.toFixed(2) }}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">每ml价格</span>
+            <span class="detail-value">{{ oils.pricePerDrop(selectedOilName) ? ('¥ ' + (oils.pricePerDrop(selectedOilName) * DROPS_PER_ML).toFixed(2)) : '--' }}</span>
+          </div>
+
+          <h4 style="margin:16px 0 8px">含此精油的配方</h4>
+          <div v-if="recipesWithOil.length" class="detail-recipes">
+            <div v-for="r in recipesWithOil" :key="r._id" class="detail-recipe-item">
+              <span class="dr-name">{{ r.name }}</span>
+              <span class="dr-drops">{{ getDropsForOil(r, selectedOilName) }}滴</span>
+            </div>
+          </div>
+          <div v-else class="empty-hint">暂无使用此精油的配方</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit Oil Overlay -->
+    <div v-if="editingOilName" class="info-overlay" @click.self="editingOilName = null">
+      <div class="info-panel" style="max-width:400px">
+        <div class="info-header">
+          <h3>编辑精油: {{ editingOilName }}</h3>
+          <button class="btn-close" @click="editingOilName = null">✕</button>
+        </div>
+        <div class="info-body">
+          <div class="form-group">
+            <label>瓶价 (¥)</label>
+            <input v-model.number="editBottlePrice" class="form-input" type="number" />
+          </div>
+          <div class="form-group">
+            <label>滴数</label>
+            <input v-model.number="editDropCount" class="form-input" type="number" />
+          </div>
+          <div class="form-group">
+            <label>零售价 (¥)</label>
+            <input v-model.number="editRetailPrice" class="form-input" type="number" />
+          </div>
+          <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:16px">
+            <button class="btn-outline" @click="editingOilName = null">取消</button>
+            <button class="btn-primary" @click="saveEditOil">保存</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useOilsStore, DROPS_PER_ML } from '../stores/oils'
+import { useRecipesStore } from '../stores/recipes'
+import { useUiStore } from '../stores/ui'
+import { showConfirm } from '../composables/useDialog'
+
+const auth = useAuthStore()
+const oils = useOilsStore()
+const recipeStore = useRecipesStore()
+const ui = useUiStore()
+
+const searchQuery = ref('')
+const viewMode = ref('bottle')
+const selectedOilName = ref(null)
+const showDilution = ref(false)
+const showContra = ref(false)
+
+// Add oil form
+const newOilName = ref('')
+const newBottlePrice = ref(null)
+const newDropCount = ref(null)
+const newRetailPrice = ref(null)
+
+// Edit oil
+const editingOilName = ref(null)
+const editBottlePrice = ref(0)
+const editDropCount = ref(0)
+const editRetailPrice = ref(null)
+
+const filteredOilNames = computed(() => {
+  if (!searchQuery.value.trim()) return oils.oilNames
+  const q = searchQuery.value.trim().toLowerCase()
+  return oils.oilNames.filter(n => n.toLowerCase().includes(q))
+})
+
+const recipesWithOil = computed(() => {
+  if (!selectedOilName.value) return []
+  return recipeStore.recipes.filter(r =>
+    r.ingredients.some(i => i.oil === selectedOilName.value)
+  )
+})
+
+function getMeta(name) {
+  return oils.oilsMeta.get(name)
+}
+
+function getDropsForOil(recipe, oilName) {
+  const ing = recipe.ingredients.find(i => i.oil === oilName)
+  return ing ? ing.drops : 0
+}
+
+function selectOil(name) {
+  selectedOilName.value = name
+}
+
+async function addOil() {
+  if (!newOilName.value.trim()) return
+  try {
+    await oils.saveOil(
+      newOilName.value.trim(),
+      newBottlePrice.value || 0,
+      newDropCount.value || 0,
+      newRetailPrice.value || null
+    )
+    ui.showToast(`已添加: ${newOilName.value}`)
+    newOilName.value = ''
+    newBottlePrice.value = null
+    newDropCount.value = null
+    newRetailPrice.value = null
+  } catch (e) {
+    ui.showToast('添加失败: ' + (e.message || ''))
+  }
+}
+
+function editOil(name) {
+  editingOilName.value = name
+  const meta = oils.oilsMeta.get(name)
+  editBottlePrice.value = meta?.bottlePrice || 0
+  editDropCount.value = meta?.dropCount || 0
+  editRetailPrice.value = meta?.retailPrice || null
+}
+
+async function saveEditOil() {
+  try {
+    await oils.saveOil(
+      editingOilName.value,
+      editBottlePrice.value,
+      editDropCount.value,
+      editRetailPrice.value
+    )
+    ui.showToast('已更新')
+    editingOilName.value = null
+  } catch (e) {
+    ui.showToast('更新失败')
+  }
+}
+
+async function removeOil(name) {
+  const ok = await showConfirm(`确定删除精油 "${name}"？`)
+  if (!ok) return
+  try {
+    await oils.deleteOil(name)
+    ui.showToast('已删除')
+  } catch {
+    ui.showToast('删除失败')
+  }
+}
+</script>
+
+<style scoped>
+.oil-reference {
+  padding: 0 12px 24px;
+}
+
+.knowledge-cards {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.kcard {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  background: linear-gradient(135deg, #f8f7f5, #f0eeeb);
+  border: 1.5px solid #e5e4e7;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.kcard:hover {
+  border-color: #7ec6a4;
+  background: linear-gradient(135deg, #f0faf5, #e8f5e9);
+}
+
+.kcard-icon {
+  font-size: 22px;
+}
+
+.kcard-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3e3a44;
+  flex: 1;
+}
+
+.kcard-arrow {
+  color: #b0aab5;
+  font-size: 18px;
+}
+
+/* Info overlay */
+.info-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.info-panel {
+  background: #fff;
+  border-radius: 16px;
+  padding: 24px;
+  max-width: 520px;
+  width: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+}
+
+.info-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.info-header h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #3e3a44;
+}
+
+.info-body {
+  font-size: 14px;
+  color: #3e3a44;
+  line-height: 1.7;
+}
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 12px;
+}
+
+.info-table th,
+.info-table td {
+  padding: 8px 10px;
+  text-align: left;
+  border-bottom: 1px solid #e5e4e7;
+  font-size: 13px;
+}
+
+.info-table th {
+  font-weight: 600;
+  color: #6b6375;
+  background: #f8f7f5;
+}
+
+.info-note {
+  font-size: 12px;
+  color: #b0aab5;
+  margin-top: 8px;
+}
+
+.contra-section {
+  margin-bottom: 14px;
+}
+
+.contra-section h4 {
+  font-size: 14px;
+  margin: 0 0 4px;
+  color: #e65100;
+}
+
+.contra-section p {
+  font-size: 13px;
+  color: #6b6375;
+  margin: 0;
+}
+
+/* Add oil form */
+.add-oil-form {
+  margin-bottom: 16px;
+  padding: 14px;
+  background: #f8f7f5;
+  border-radius: 12px;
+  border: 1.5px solid #e5e4e7;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin: 0 0 10px;
+}
+
+.form-row {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.form-input {
+  flex: 1;
+  min-width: 100px;
+  padding: 8px 12px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.form-input:focus {
+  border-color: #7ec6a4;
+}
+
+.form-input-sm {
+  width: 80px;
+  padding: 8px 10px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 12px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 4px;
+}
+
+/* Toolbar */
+.toolbar {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 14px;
+  align-items: center;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  background: #f8f7f5;
+  border-radius: 10px;
+  padding: 2px 8px;
+  border: 1.5px solid #e5e4e7;
+  flex: 1;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 8px 6px;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+}
+
+.search-clear-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #999;
+  padding: 4px;
+}
+
+.view-toggle {
+  display: flex;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.toggle-btn {
+  border: none;
+  background: #fff;
+  padding: 8px 14px;
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  color: #6b6375;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.toggle-btn.active {
+  background: linear-gradient(135deg, #7ec6a4, #4a9d7e);
+  color: #fff;
+}
+
+/* Oil grid */
+.oil-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 8px;
+}
+
+.oil-card {
+  padding: 12px;
+  background: #fff;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+  position: relative;
+}
+
+.oil-card:hover {
+  border-color: #7ec6a4;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.oil-name {
+  font-weight: 600;
+  font-size: 14px;
+  color: #3e3a44;
+  margin-bottom: 4px;
+}
+
+.oil-price {
+  font-size: 14px;
+  color: #4a9d7e;
+  font-weight: 500;
+}
+
+.oil-count {
+  font-size: 11px;
+  color: #b0aab5;
+  font-weight: 400;
+}
+
+.oil-unit {
+  font-size: 11px;
+  color: #b0aab5;
+}
+
+.oil-retail {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.oil-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.oil-card:hover .oil-actions {
+  opacity: 1;
+}
+
+.btn-icon-sm {
+  border: none;
+  background: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px;
+  border-radius: 6px;
+}
+
+.btn-icon-sm:hover {
+  background: #f0eeeb;
+}
+
+/* Detail overlay */
+.oil-detail-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.oil-detail-panel {
+  background: #fff;
+  border-radius: 16px;
+  padding: 24px;
+  max-width: 440px;
+  width: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.detail-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #3e3a44;
+}
+
+.detail-body h4 {
+  font-size: 14px;
+  color: #3e3a44;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0eeeb;
+  font-size: 14px;
+}
+
+.detail-label {
+  color: #6b6375;
+}
+
+.detail-value {
+  font-weight: 600;
+  color: #3e3a44;
+}
+
+.detail-recipes {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detail-recipe-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background: #f8f7f5;
+  border-radius: 8px;
+  font-size: 13px;
+}
+
+.dr-name {
+  color: #3e3a44;
+}
+
+.dr-drops {
+  color: #4a9d7e;
+  font-weight: 500;
+}
+
+.btn-close {
+  border: none;
+  background: #f0eeeb;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b6375;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 8px 18px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  padding: 8px 18px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.empty-hint {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 24px 0;
+}
+
+@media (max-width: 600px) {
+  .oil-grid {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+  .form-row {
+    flex-direction: column;
+  }
+  .form-input-sm {
+    width: 100%;
+  }
+}
+</style>
diff --git a/frontend/src/views/Projects.vue b/frontend/src/views/Projects.vue
new file mode 100644
index 0000000..41c1621
--- /dev/null
+++ b/frontend/src/views/Projects.vue
@@ -0,0 +1,759 @@
+<template>
+  <div class="projects-page">
+    <!-- Project List -->
+    <div class="toolbar">
+      <h3 class="page-title">💼 商业核算</h3>
+      <button class="btn-primary" @click="createProject">+ 新建项目</button>
+    </div>
+
+    <div v-if="!selectedProject" class="project-list">
+      <div
+        v-for="p in projects"
+        :key="p._id || p.id"
+        class="project-card"
+        @click="selectProject(p)"
+      >
+        <div class="proj-header">
+          <span class="proj-name">{{ p.name }}</span>
+          <span class="proj-date">{{ formatDate(p.updated_at || p.created_at) }}</span>
+        </div>
+        <div class="proj-summary">
+          <span>成分: {{ (p.ingredients || []).length }} 种</span>
+          <span class="proj-cost" v-if="p.ingredients && p.ingredients.length">
+            成本 {{ oils.fmtPrice(oils.calcCost(p.ingredients)) }}
+          </span>
+        </div>
+        <div class="proj-actions" @click.stop>
+          <button class="btn-icon-sm" @click="deleteProject(p)" title="删除">🗑️</button>
+        </div>
+      </div>
+      <div v-if="projects.length === 0" class="empty-hint">暂无项目，点击上方创建</div>
+    </div>
+
+    <!-- Project Detail -->
+    <div v-if="selectedProject" class="project-detail">
+      <div class="detail-toolbar">
+        <button class="btn-back" @click="selectedProject = null">&larr; 返回列表</button>
+        <input
+          v-model="selectedProject.name"
+          class="proj-name-input"
+          @blur="saveProject"
+        />
+        <button class="btn-outline btn-sm" @click="importFromRecipe">📋 从配方导入</button>
+      </div>
+
+      <!-- Ingredients Editor -->
+      <div class="ingredients-section">
+        <h4>🧴 配方成分</h4>
+        <div v-for="(ing, i) in selectedProject.ingredients" :key="i" class="ing-row">
+          <select v-model="ing.oil" class="form-select" @change="saveProject">
+            <option value="">选择精油</option>
+            <option v-for="name in oils.oilNames" :key="name" :value="name">{{ name }}</option>
+          </select>
+          <input
+            v-model.number="ing.drops"
+            type="number"
+            min="0"
+            class="form-input-sm"
+            placeholder="滴数"
+            @change="saveProject"
+          />
+          <span class="ing-cost">{{ ing.oil ? oils.fmtPrice(oils.pricePerDrop(ing.oil) * (ing.drops || 0)) : '--' }}</span>
+          <button class="btn-icon-sm" @click="removeIngredient(i)">✕</button>
+        </div>
+        <button class="btn-outline btn-sm" @click="addIngredient">+ 添加成分</button>
+      </div>
+
+      <!-- Pricing Section -->
+      <div class="pricing-section">
+        <h4>💰 价格计算</h4>
+        <div class="price-row">
+          <span class="price-label">原料成本</span>
+          <span class="price-value cost">{{ oils.fmtPrice(materialCost) }}</span>
+        </div>
+
+        <div class="price-row">
+          <span class="price-label">包装费用</span>
+          <div class="price-input-wrap">
+            <span>¥</span>
+            <input v-model.number="selectedProject.packaging_cost" type="number" class="form-input-inline" @change="saveProject" />
+          </div>
+        </div>
+
+        <div class="price-row">
+          <span class="price-label">人工费用</span>
+          <div class="price-input-wrap">
+            <span>¥</span>
+            <input v-model.number="selectedProject.labor_cost" type="number" class="form-input-inline" @change="saveProject" />
+          </div>
+        </div>
+
+        <div class="price-row">
+          <span class="price-label">其他成本</span>
+          <div class="price-input-wrap">
+            <span>¥</span>
+            <input v-model.number="selectedProject.other_cost" type="number" class="form-input-inline" @change="saveProject" />
+          </div>
+        </div>
+
+        <div class="price-row total">
+          <span class="price-label">总成本</span>
+          <span class="price-value cost">{{ oils.fmtPrice(totalCost) }}</span>
+        </div>
+
+        <div class="price-row">
+          <span class="price-label">售价</span>
+          <div class="price-input-wrap">
+            <span>¥</span>
+            <input v-model.number="selectedProject.selling_price" type="number" class="form-input-inline" @change="saveProject" />
+          </div>
+        </div>
+
+        <div class="price-row">
+          <span class="price-label">批量数量</span>
+          <input v-model.number="selectedProject.quantity" type="number" min="1" class="form-input-inline" @change="saveProject" />
+        </div>
+      </div>
+
+      <!-- Profit Analysis -->
+      <div class="profit-section">
+        <h4>📊 利润分析</h4>
+        <div class="profit-grid">
+          <div class="profit-card">
+            <div class="profit-label">单件利润</div>
+            <div class="profit-value" :class="{ negative: unitProfit < 0 }">{{ oils.fmtPrice(unitProfit) }}</div>
+          </div>
+          <div class="profit-card">
+            <div class="profit-label">利润率</div>
+            <div class="profit-value" :class="{ negative: profitMargin < 0 }">{{ profitMargin.toFixed(1) }}%</div>
+          </div>
+          <div class="profit-card">
+            <div class="profit-label">批量总利润</div>
+            <div class="profit-value" :class="{ negative: batchProfit < 0 }">{{ oils.fmtPrice(batchProfit) }}</div>
+          </div>
+          <div class="profit-card">
+            <div class="profit-label">批量总收入</div>
+            <div class="profit-value">{{ oils.fmtPrice(batchRevenue) }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Notes -->
+      <div class="notes-section">
+        <h4>📝 备注</h4>
+        <textarea
+          v-model="selectedProject.notes"
+          class="notes-textarea"
+          rows="3"
+          placeholder="项目备注..."
+          @blur="saveProject"
+        ></textarea>
+      </div>
+    </div>
+
+    <!-- Import From Recipe Modal -->
+    <div v-if="showImportModal" class="overlay" @click.self="showImportModal = false">
+      <div class="overlay-panel">
+        <div class="overlay-header">
+          <h3>从配方导入</h3>
+          <button class="btn-close" @click="showImportModal = false">✕</button>
+        </div>
+        <div class="recipe-import-list">
+          <div
+            v-for="r in recipeStore.recipes"
+            :key="r._id"
+            class="import-item"
+            @click="doImport(r)"
+          >
+            <span class="import-name">{{ r.name }}</span>
+            <span class="import-count">{{ r.ingredients.length }} 种精油</span>
+            <span class="import-cost">{{ oils.fmtPrice(oils.calcCost(r.ingredients)) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useOilsStore } from '../stores/oils'
+import { useRecipesStore } from '../stores/recipes'
+import { useUiStore } from '../stores/ui'
+import { api } from '../composables/useApi'
+import { showConfirm, showPrompt } from '../composables/useDialog'
+
+const auth = useAuthStore()
+const oils = useOilsStore()
+const recipeStore = useRecipesStore()
+const ui = useUiStore()
+
+const projects = ref([])
+const selectedProject = ref(null)
+const showImportModal = ref(false)
+
+onMounted(async () => {
+  await loadProjects()
+})
+
+async function loadProjects() {
+  try {
+    const res = await api('/api/projects')
+    if (res.ok) {
+      projects.value = await res.json()
+    }
+  } catch {
+    projects.value = []
+  }
+}
+
+async function createProject() {
+  const name = await showPrompt('项目名称:', '新项目')
+  if (!name) return
+  try {
+    const res = await api('/api/projects', {
+      method: 'POST',
+      body: JSON.stringify({
+        name,
+        ingredients: [],
+        packaging_cost: 0,
+        labor_cost: 0,
+        other_cost: 0,
+        selling_price: 0,
+        quantity: 1,
+        notes: '',
+      }),
+    })
+    if (res.ok) {
+      await loadProjects()
+      const data = await res.json()
+      selectedProject.value = projects.value.find(p => (p._id || p.id) === (data._id || data.id)) || null
+      ui.showToast('项目已创建')
+    }
+  } catch {
+    ui.showToast('创建失败')
+  }
+}
+
+function selectProject(p) {
+  selectedProject.value = {
+    ...p,
+    ingredients: (p.ingredients || []).map(i => ({ ...i })),
+    packaging_cost: p.packaging_cost || 0,
+    labor_cost: p.labor_cost || 0,
+    other_cost: p.other_cost || 0,
+    selling_price: p.selling_price || 0,
+    quantity: p.quantity || 1,
+    notes: p.notes || '',
+  }
+}
+
+async function saveProject() {
+  if (!selectedProject.value) return
+  const id = selectedProject.value._id || selectedProject.value.id
+  try {
+    await api(`/api/projects/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(selectedProject.value),
+    })
+    await loadProjects()
+  } catch {
+    // silent save
+  }
+}
+
+async function deleteProject(p) {
+  const ok = await showConfirm(`确定删除项目 "${p.name}"？`)
+  if (!ok) return
+  const id = p._id || p.id
+  try {
+    await api(`/api/projects/${id}`, { method: 'DELETE' })
+    projects.value = projects.value.filter(proj => (proj._id || proj.id) !== id)
+    if (selectedProject.value && (selectedProject.value._id || selectedProject.value.id) === id) {
+      selectedProject.value = null
+    }
+    ui.showToast('已删除')
+  } catch {
+    ui.showToast('删除失败')
+  }
+}
+
+function addIngredient() {
+  if (!selectedProject.value) return
+  selectedProject.value.ingredients.push({ oil: '', drops: 1 })
+}
+
+function removeIngredient(index) {
+  selectedProject.value.ingredients.splice(index, 1)
+  saveProject()
+}
+
+function importFromRecipe() {
+  showImportModal.value = true
+}
+
+function doImport(recipe) {
+  if (!selectedProject.value) return
+  selectedProject.value.ingredients = recipe.ingredients.map(i => ({ ...i }))
+  showImportModal.value = false
+  saveProject()
+  ui.showToast(`已导入 "${recipe.name}" 的配方`)
+}
+
+const materialCost = computed(() => {
+  if (!selectedProject.value) return 0
+  return oils.calcCost(selectedProject.value.ingredients.filter(i => i.oil))
+})
+
+const totalCost = computed(() => {
+  if (!selectedProject.value) return 0
+  return materialCost.value +
+    (selectedProject.value.packaging_cost || 0) +
+    (selectedProject.value.labor_cost || 0) +
+    (selectedProject.value.other_cost || 0)
+})
+
+const unitProfit = computed(() => {
+  if (!selectedProject.value) return 0
+  return (selectedProject.value.selling_price || 0) - totalCost.value
+})
+
+const profitMargin = computed(() => {
+  if (!selectedProject.value || !selectedProject.value.selling_price) return 0
+  return (unitProfit.value / selectedProject.value.selling_price) * 100
+})
+
+const batchProfit = computed(() => {
+  return unitProfit.value * (selectedProject.value?.quantity || 1)
+})
+
+const batchRevenue = computed(() => {
+  return (selectedProject.value?.selling_price || 0) * (selectedProject.value?.quantity || 1)
+})
+
+function formatDate(d) {
+  if (!d) return ''
+  return new Date(d).toLocaleDateString('zh-CN')
+}
+</script>
+
+<style scoped>
+.projects-page {
+  padding: 0 12px 24px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 16px;
+  color: #3e3a44;
+}
+
+.project-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.project-card {
+  padding: 14px 16px;
+  background: #fff;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+  position: relative;
+}
+
+.project-card:hover {
+  border-color: #7ec6a4;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.proj-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.proj-name {
+  font-weight: 600;
+  font-size: 15px;
+  color: #3e3a44;
+}
+
+.proj-date {
+  font-size: 12px;
+  color: #b0aab5;
+}
+
+.proj-summary {
+  display: flex;
+  gap: 12px;
+  font-size: 13px;
+  color: #6b6375;
+}
+
+.proj-cost {
+  color: #4a9d7e;
+  font-weight: 500;
+}
+
+.proj-actions {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.project-card:hover .proj-actions {
+  opacity: 1;
+}
+
+/* Detail */
+.detail-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+
+.btn-back {
+  border: none;
+  background: #f0eeeb;
+  padding: 8px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  color: #6b6375;
+}
+
+.btn-back:hover {
+  background: #e5e4e7;
+}
+
+.proj-name-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  font-family: inherit;
+  outline: none;
+  min-width: 120px;
+}
+
+.proj-name-input:focus {
+  border-color: #7ec6a4;
+}
+
+.ingredients-section,
+.pricing-section,
+.profit-section,
+.notes-section {
+  margin-bottom: 20px;
+  padding: 14px;
+  background: #f8f7f5;
+  border-radius: 12px;
+  border: 1.5px solid #e5e4e7;
+}
+
+.ingredients-section h4,
+.pricing-section h4,
+.profit-section h4,
+.notes-section h4 {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: #3e3a44;
+}
+
+.ing-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.form-select {
+  flex: 1;
+  padding: 8px 10px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  background: #fff;
+}
+
+.form-input-sm {
+  width: 70px;
+  padding: 8px 10px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  text-align: center;
+}
+
+.ing-cost {
+  font-size: 13px;
+  color: #4a9d7e;
+  font-weight: 500;
+  min-width: 60px;
+  text-align: right;
+}
+
+.price-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #eae8e5;
+  font-size: 14px;
+}
+
+.price-row.total {
+  border-top: 2px solid #d4cfc7;
+  border-bottom: 2px solid #d4cfc7;
+  font-weight: 600;
+  padding: 10px 0;
+}
+
+.price-label {
+  color: #6b6375;
+}
+
+.price-value {
+  font-weight: 600;
+  color: #3e3a44;
+}
+
+.price-value.cost {
+  color: #4a9d7e;
+}
+
+.price-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: #3e3a44;
+}
+
+.form-input-inline {
+  width: 80px;
+  padding: 6px 8px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  text-align: right;
+}
+
+.form-input-inline:focus {
+  border-color: #7ec6a4;
+}
+
+.profit-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.profit-card {
+  padding: 12px;
+  background: #fff;
+  border-radius: 10px;
+  text-align: center;
+  border: 1.5px solid #e5e4e7;
+}
+
+.profit-label {
+  font-size: 12px;
+  color: #6b6375;
+  margin-bottom: 4px;
+}
+
+.profit-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: #4a9d7e;
+}
+
+.profit-value.negative {
+  color: #ef5350;
+}
+
+.notes-textarea {
+  width: 100%;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.notes-textarea:focus {
+  border-color: #7ec6a4;
+}
+
+/* Overlay */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.overlay-panel {
+  background: #fff;
+  border-radius: 16px;
+  padding: 24px;
+  max-width: 480px;
+  width: 100%;
+  max-height: 70vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+}
+
+.overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.overlay-header h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #3e3a44;
+}
+
+.recipe-import-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.import-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.import-item:hover {
+  background: #f0faf5;
+}
+
+.import-name {
+  flex: 1;
+  font-weight: 500;
+  font-size: 14px;
+  color: #3e3a44;
+}
+
+.import-count {
+  font-size: 12px;
+  color: #b0aab5;
+}
+
+.import-cost {
+  font-size: 13px;
+  color: #4a9d7e;
+  font-weight: 500;
+}
+
+/* Buttons */
+.btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-outline:hover {
+  background: #f8f7f5;
+}
+
+.btn-sm {
+  padding: 6px 14px;
+  font-size: 12px;
+  border-radius: 8px;
+}
+
+.btn-icon-sm {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px;
+  border-radius: 6px;
+}
+
+.btn-close {
+  border: none;
+  background: #f0eeeb;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b6375;
+}
+
+.empty-hint {
+  text-align: center;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 24px 0;
+}
+
+@media (max-width: 600px) {
+  .profit-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/frontend/src/views/RecipeManager.vue b/frontend/src/views/RecipeManager.vue
new file mode 100644
index 0000000..a102e25
--- /dev/null
+++ b/frontend/src/views/RecipeManager.vue
@@ -0,0 +1,967 @@
+<template>
+  <div class="recipe-manager">
+    <!-- Review Bar (admin only) -->
+    <div v-if="auth.isAdmin && pendingCount > 0" class="review-bar" @click="showPending = !showPending">
+      📝 待审核配方: {{ pendingCount }} 条
+      <span class="toggle-icon">{{ showPending ? '▾' : '▸' }}</span>
+    </div>
+    <div v-if="showPending && pendingRecipes.length" class="pending-list">
+      <div v-for="r in pendingRecipes" :key="r._id" class="pending-item">
+        <span class="pending-name">{{ r.name }}</span>
+        <span class="pending-owner">{{ r._owner_name }}</span>
+        <button class="btn-sm btn-approve" @click="approveRecipe(r)">通过</button>
+        <button class="btn-sm btn-reject" @click="rejectRecipe(r)">拒绝</button>
+      </div>
+    </div>
+
+    <!-- Search & Actions Bar -->
+    <div class="manage-toolbar">
+      <div class="search-box">
+        <input
+          class="search-input"
+          v-model="manageSearch"
+          placeholder="搜索配方..."
+        />
+        <button v-if="manageSearch" class="search-clear-btn" @click="manageSearch = ''">✕</button>
+      </div>
+      <button class="btn-primary" @click="showAddOverlay = true">+ 添加配方</button>
+      <button class="btn-outline" @click="exportExcel">📊 导出Excel</button>
+    </div>
+
+    <!-- Tag Filter Bar -->
+    <div class="tag-filter-bar">
+      <button class="tag-toggle-btn" @click="showTagFilter = !showTagFilter">
+        🏷️ 标签筛选 {{ showTagFilter ? '▾' : '▸' }}
+      </button>
+      <div v-if="showTagFilter" class="tag-list">
+        <span
+          v-for="tag in recipeStore.allTags"
+          :key="tag"
+          class="tag-chip"
+          :class="{ active: selectedTags.includes(tag) }"
+          @click="toggleTag(tag)"
+        >{{ tag }}</span>
+      </div>
+    </div>
+
+    <!-- Batch Operations -->
+    <div v-if="selectedIds.size > 0" class="batch-bar">
+      <span>已选 {{ selectedIds.size }} 项</span>
+      <select v-model="batchAction" class="batch-select">
+        <option value="">批量操作...</option>
+        <option value="tag">添加标签</option>
+        <option value="share">分享</option>
+        <option value="export">导出卡片</option>
+        <option value="delete">删除</option>
+      </select>
+      <button class="btn-sm btn-primary" @click="executeBatch" :disabled="!batchAction">执行</button>
+      <button class="btn-sm btn-outline" @click="clearSelection">取消选择</button>
+    </div>
+
+    <!-- My Recipes Section -->
+    <div class="recipe-section">
+      <h3 class="section-title">📖 我的配方 ({{ myRecipes.length }})</h3>
+      <div class="recipe-list">
+        <div
+          v-for="r in myFilteredRecipes"
+          :key="r._id"
+          class="recipe-row"
+          :class="{ selected: selectedIds.has(r._id) }"
+        >
+          <input
+            type="checkbox"
+            :checked="selectedIds.has(r._id)"
+            @change="toggleSelect(r._id)"
+            class="row-check"
+          />
+          <div class="row-info" @click="editRecipe(r)">
+            <span class="row-name">{{ r.name }}</span>
+            <span class="row-tags">
+              <span v-for="t in r.tags" :key="t" class="mini-tag">{{ t }}</span>
+            </span>
+            <span class="row-cost">{{ oils.fmtPrice(oils.calcCost(r.ingredients)) }}</span>
+          </div>
+          <div class="row-actions">
+            <button class="btn-icon" @click="editRecipe(r)" title="编辑">✏️</button>
+            <button class="btn-icon" @click="removeRecipe(r)" title="删除">🗑️</button>
+          </div>
+        </div>
+        <div v-if="myFilteredRecipes.length === 0" class="empty-hint">暂无个人配方</div>
+      </div>
+    </div>
+
+    <!-- Public Recipes Section -->
+    <div class="recipe-section">
+      <h3 class="section-title">🌿 公共配方库 ({{ publicRecipes.length }})</h3>
+      <div class="recipe-list">
+        <div
+          v-for="r in publicFilteredRecipes"
+          :key="r._id"
+          class="recipe-row"
+          :class="{ selected: selectedIds.has(r._id) }"
+        >
+          <input
+            type="checkbox"
+            :checked="selectedIds.has(r._id)"
+            @change="toggleSelect(r._id)"
+            class="row-check"
+          />
+          <div class="row-info" @click="editRecipe(r)">
+            <span class="row-name">{{ r.name }}</span>
+            <span class="row-owner">{{ r._owner_name }}</span>
+            <span class="row-tags">
+              <span v-for="t in r.tags" :key="t" class="mini-tag">{{ t }}</span>
+            </span>
+            <span class="row-cost">{{ oils.fmtPrice(oils.calcCost(r.ingredients)) }}</span>
+          </div>
+          <div class="row-actions" v-if="auth.canEditRecipe(r)">
+            <button class="btn-icon" @click="editRecipe(r)" title="编辑">✏️</button>
+            <button class="btn-icon" @click="removeRecipe(r)" title="删除">🗑️</button>
+          </div>
+        </div>
+        <div v-if="publicFilteredRecipes.length === 0" class="empty-hint">暂无公共配方</div>
+      </div>
+    </div>
+
+    <!-- Add/Edit Recipe Overlay -->
+    <div v-if="showAddOverlay" class="overlay" @click.self="closeOverlay">
+      <div class="overlay-panel">
+        <div class="overlay-header">
+          <h3>{{ editingRecipe ? '编辑配方' : '添加配方' }}</h3>
+          <button class="btn-close" @click="closeOverlay">✕</button>
+        </div>
+
+        <!-- Smart Paste Section -->
+        <div class="paste-section">
+          <textarea
+            v-model="smartPasteText"
+            class="paste-input"
+            placeholder="粘贴配方文本，支持智能识别...&#10;例如: 薰衣草3滴 茶树2滴"
+            rows="4"
+          ></textarea>
+          <button class="btn-primary" @click="handleSmartPaste" :disabled="!smartPasteText.trim()">
+            智能识别
+          </button>
+        </div>
+
+        <div class="divider-text">或手动输入</div>
+
+        <!-- Manual Form -->
+        <div class="form-group">
+          <label>配方名称</label>
+          <input v-model="formName" class="form-input" placeholder="配方名称" />
+        </div>
+
+        <div class="form-group">
+          <label>成分</label>
+          <div v-for="(ing, i) in formIngredients" :key="i" class="ing-row">
+            <select v-model="ing.oil" class="form-select">
+              <option value="">选择精油</option>
+              <option v-for="name in oils.oilNames" :key="name" :value="name">{{ name }}</option>
+            </select>
+            <input v-model.number="ing.drops" type="number" min="0" class="form-input-sm" placeholder="滴数" />
+            <button class="btn-icon-sm" @click="formIngredients.splice(i, 1)">✕</button>
+          </div>
+          <button class="btn-outline btn-sm" @click="formIngredients.push({ oil: '', drops: 1 })">+ 添加成分</button>
+        </div>
+
+        <div class="form-group">
+          <label>备注</label>
+          <textarea v-model="formNote" class="form-input" rows="2" placeholder="配方备注"></textarea>
+        </div>
+
+        <div class="form-group">
+          <label>标签</label>
+          <div class="tag-list">
+            <span
+              v-for="tag in recipeStore.allTags"
+              :key="tag"
+              class="tag-chip"
+              :class="{ active: formTags.includes(tag) }"
+              @click="toggleFormTag(tag)"
+            >{{ tag }}</span>
+          </div>
+        </div>
+
+        <div class="overlay-footer">
+          <button class="btn-outline" @click="closeOverlay">取消</button>
+          <button class="btn-primary" @click="saveCurrentRecipe">保存</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tag Picker Overlay -->
+    <TagPicker
+      v-if="showTagPicker"
+      :name="tagPickerName"
+      :currentTags="tagPickerTags"
+      :allTags="recipeStore.allTags"
+      @save="onTagPickerSave"
+      @close="showTagPicker = false"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useOilsStore } from '../stores/oils'
+import { useRecipesStore } from '../stores/recipes'
+import { useUiStore } from '../stores/ui'
+import { api } from '../composables/useApi'
+import { showConfirm, showPrompt } from '../composables/useDialog'
+import { parseSingleBlock } from '../composables/useSmartPaste'
+import RecipeCard from '../components/RecipeCard.vue'
+import TagPicker from '../components/TagPicker.vue'
+
+const auth = useAuthStore()
+const oils = useOilsStore()
+const recipeStore = useRecipesStore()
+const ui = useUiStore()
+
+const manageSearch = ref('')
+const selectedTags = ref([])
+const showTagFilter = ref(false)
+const selectedIds = reactive(new Set())
+const batchAction = ref('')
+const showAddOverlay = ref(false)
+const editingRecipe = ref(null)
+const showPending = ref(false)
+const pendingRecipes = ref([])
+const pendingCount = ref(0)
+
+// Form state
+const formName = ref('')
+const formIngredients = ref([{ oil: '', drops: 1 }])
+const formNote = ref('')
+const formTags = ref([])
+const smartPasteText = ref('')
+
+// Tag picker state
+const showTagPicker = ref(false)
+const tagPickerName = ref('')
+const tagPickerTags = ref([])
+
+// Computed lists
+const myRecipes = computed(() =>
+  recipeStore.recipes.filter(r => r._owner_id === auth.user.id)
+)
+
+const publicRecipes = computed(() =>
+  recipeStore.recipes.filter(r => r._owner_id !== auth.user.id)
+)
+
+function filterBySearchAndTags(list) {
+  let result = list
+  const q = manageSearch.value.trim().toLowerCase()
+  if (q) {
+    result = result.filter(r =>
+      r.name.toLowerCase().includes(q) ||
+      r.ingredients.some(ing => ing.oil.toLowerCase().includes(q)) ||
+      (r.tags && r.tags.some(t => t.toLowerCase().includes(q)))
+    )
+  }
+  if (selectedTags.value.length > 0) {
+    result = result.filter(r =>
+      r.tags && selectedTags.value.every(t => r.tags.includes(t))
+    )
+  }
+  return result
+}
+
+const myFilteredRecipes = computed(() => filterBySearchAndTags(myRecipes.value))
+const publicFilteredRecipes = computed(() => filterBySearchAndTags(publicRecipes.value))
+
+function toggleTag(tag) {
+  const idx = selectedTags.value.indexOf(tag)
+  if (idx >= 0) selectedTags.value.splice(idx, 1)
+  else selectedTags.value.push(tag)
+}
+
+function toggleSelect(id) {
+  if (selectedIds.has(id)) selectedIds.delete(id)
+  else selectedIds.add(id)
+}
+
+function clearSelection() {
+  selectedIds.clear()
+  batchAction.value = ''
+}
+
+async function executeBatch() {
+  const ids = [...selectedIds]
+  if (!ids.length || !batchAction.value) return
+
+  if (batchAction.value === 'delete') {
+    const ok = await showConfirm(`确定删除 ${ids.length} 个配方？`)
+    if (!ok) return
+    for (const id of ids) {
+      await recipeStore.deleteRecipe(id)
+    }
+    ui.showToast(`已删除 ${ids.length} 个配方`)
+  } else if (batchAction.value === 'tag') {
+    const tagName = await showPrompt('输入要添加的标签:')
+    if (!tagName) return
+    for (const id of ids) {
+      const recipe = recipeStore.recipes.find(r => r._id === id)
+      if (recipe && !recipe.tags.includes(tagName)) {
+        recipe.tags.push(tagName)
+        await recipeStore.saveRecipe(recipe)
+      }
+    }
+    ui.showToast(`已为 ${ids.length} 个配方添加标签`)
+  } else if (batchAction.value === 'share') {
+    const text = ids.map(id => {
+      const r = recipeStore.recipes.find(rec => rec._id === id)
+      if (!r) return ''
+      const ings = r.ingredients.map(ing => `${ing.oil} ${ing.drops}滴`).join('，')
+      return `${r.name}：${ings}`
+    }).filter(Boolean).join('\n\n')
+    try {
+      await navigator.clipboard.writeText(text)
+      ui.showToast('已复制到剪贴板')
+    } catch {
+      ui.showToast('复制失败')
+    }
+  } else if (batchAction.value === 'export') {
+    ui.showToast('导出卡片功能开发中')
+  }
+  clearSelection()
+}
+
+function editRecipe(recipe) {
+  editingRecipe.value = recipe
+  formName.value = recipe.name
+  formIngredients.value = recipe.ingredients.map(i => ({ ...i }))
+  formNote.value = recipe.note || ''
+  formTags.value = [...(recipe.tags || [])]
+  showAddOverlay.value = true
+}
+
+function closeOverlay() {
+  showAddOverlay.value = false
+  editingRecipe.value = null
+  resetForm()
+}
+
+function resetForm() {
+  formName.value = ''
+  formIngredients.value = [{ oil: '', drops: 1 }]
+  formNote.value = ''
+  formTags.value = []
+  smartPasteText.value = ''
+}
+
+function handleSmartPaste() {
+  const result = parseSingleBlock(smartPasteText.value, oils.oilNames)
+  formName.value = result.name
+  formIngredients.value = result.ingredients.length > 0
+    ? result.ingredients
+    : [{ oil: '', drops: 1 }]
+  if (result.notFound.length > 0) {
+    ui.showToast(`未识别: ${result.notFound.join(', ')}`)
+  }
+}
+
+function toggleFormTag(tag) {
+  const idx = formTags.value.indexOf(tag)
+  if (idx >= 0) formTags.value.splice(idx, 1)
+  else formTags.value.push(tag)
+}
+
+async function saveCurrentRecipe() {
+  const validIngs = formIngredients.value.filter(i => i.oil && i.drops > 0)
+  if (!formName.value.trim()) {
+    ui.showToast('请输入配方名称')
+    return
+  }
+  if (validIngs.length === 0) {
+    ui.showToast('请至少添加一个成分')
+    return
+  }
+
+  const payload = {
+    name: formName.value.trim(),
+    ingredients: validIngs,
+    note: formNote.value,
+    tags: formTags.value,
+  }
+
+  if (editingRecipe.value) {
+    payload._id = editingRecipe.value._id
+    payload._version = editingRecipe.value._version
+  }
+
+  try {
+    await recipeStore.saveRecipe(payload)
+    ui.showToast(editingRecipe.value ? '配方已更新' : '配方已添加')
+    closeOverlay()
+  } catch (e) {
+    ui.showToast('保存失败: ' + (e.message || '未知错误'))
+  }
+}
+
+async function removeRecipe(recipe) {
+  const ok = await showConfirm(`确定删除配方 "${recipe.name}"？`)
+  if (!ok) return
+  try {
+    await recipeStore.deleteRecipe(recipe._id)
+    ui.showToast('已删除')
+  } catch (e) {
+    ui.showToast('删除失败')
+  }
+}
+
+async function approveRecipe(recipe) {
+  try {
+    await api('/api/recipes/' + recipe._id + '/approve', { method: 'POST' })
+    pendingRecipes.value = pendingRecipes.value.filter(r => r._id !== recipe._id)
+    pendingCount.value--
+    ui.showToast('已通过')
+    await recipeStore.loadRecipes()
+  } catch {
+    ui.showToast('操作失败')
+  }
+}
+
+async function rejectRecipe(recipe) {
+  try {
+    await api('/api/recipes/' + recipe._id + '/reject', { method: 'POST' })
+    pendingRecipes.value = pendingRecipes.value.filter(r => r._id !== recipe._id)
+    pendingCount.value--
+    ui.showToast('已拒绝')
+  } catch {
+    ui.showToast('操作失败')
+  }
+}
+
+async function exportExcel() {
+  try {
+    const res = await api('/api/recipes/export-excel')
+    if (!res.ok) throw new Error('Export failed')
+    const blob = await res.blob()
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = '配方导出.xlsx'
+    a.click()
+    URL.revokeObjectURL(url)
+    ui.showToast('导出成功')
+  } catch {
+    ui.showToast('导出失败')
+  }
+}
+
+function onTagPickerSave(tags) {
+  formTags.value = tags
+  showTagPicker.value = false
+}
+
+// Load pending if admin
+if (auth.isAdmin) {
+  api('/api/recipes/pending').then(async res => {
+    if (res.ok) {
+      const data = await res.json()
+      pendingRecipes.value = data
+      pendingCount.value = data.length
+    }
+  }).catch(() => {})
+}
+</script>
+
+<style scoped>
+.recipe-manager {
+  padding: 0 12px 24px;
+}
+
+.review-bar {
+  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
+  padding: 12px 16px;
+  border-radius: 10px;
+  margin-bottom: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #e65100;
+}
+
+.pending-list {
+  margin-bottom: 12px;
+}
+
+.pending-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: #fffde7;
+  border-radius: 8px;
+  margin-bottom: 6px;
+  font-size: 13px;
+}
+
+.pending-name {
+  font-weight: 600;
+  flex: 1;
+}
+
+.pending-owner {
+  color: #999;
+  font-size: 12px;
+}
+
+.manage-toolbar {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  background: #f8f7f5;
+  border-radius: 10px;
+  padding: 2px 8px;
+  border: 1.5px solid #e5e4e7;
+  flex: 1;
+  min-width: 160px;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 8px 6px;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+}
+
+.search-clear-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #999;
+  padding: 4px;
+}
+
+.tag-filter-bar {
+  margin-bottom: 12px;
+}
+
+.tag-toggle-btn {
+  background: #f8f7f5;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 10px;
+  padding: 8px 16px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  color: #3e3a44;
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.tag-chip {
+  padding: 4px 12px;
+  border-radius: 16px;
+  background: #f0eeeb;
+  font-size: 12px;
+  cursor: pointer;
+  color: #6b6375;
+  border: 1.5px solid transparent;
+  transition: all 0.15s;
+}
+
+.tag-chip.active {
+  background: #e8f5e9;
+  border-color: #7ec6a4;
+  color: #2e7d5a;
+  font-weight: 600;
+}
+
+.batch-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: #e8f5e9;
+  border-radius: 10px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  flex-wrap: wrap;
+}
+
+.batch-select {
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1.5px solid #d4cfc7;
+  font-size: 13px;
+  font-family: inherit;
+  background: #fff;
+}
+
+.recipe-section {
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin: 0 0 10px;
+}
+
+.recipe-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.recipe-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #fff;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 10px;
+  transition: all 0.15s;
+}
+
+.recipe-row:hover {
+  border-color: #d4cfc7;
+  background: #fafaf8;
+}
+
+.recipe-row.selected {
+  border-color: #7ec6a4;
+  background: #f0faf5;
+}
+
+.row-check {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: #4a9d7e;
+}
+
+.row-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.row-name {
+  font-weight: 600;
+  font-size: 14px;
+  color: #3e3a44;
+}
+
+.row-owner {
+  font-size: 11px;
+  color: #b0aab5;
+}
+
+.row-tags {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.mini-tag {
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: #f0eeeb;
+  font-size: 11px;
+  color: #6b6375;
+}
+
+.row-cost {
+  font-size: 13px;
+  color: #4a9d7e;
+  font-weight: 500;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.row-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.btn-icon {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+  border-radius: 6px;
+}
+
+.btn-icon:hover {
+  background: #f0eeeb;
+}
+
+/* Overlay */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.overlay-panel {
+  background: #fff;
+  border-radius: 16px;
+  padding: 24px;
+  width: 100%;
+  max-width: 520px;
+  max-height: 85vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+}
+
+.overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.overlay-header h3 {
+  margin: 0;
+  font-size: 17px;
+  color: #3e3a44;
+}
+
+.btn-close {
+  border: none;
+  background: #f0eeeb;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b6375;
+}
+
+.paste-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.paste-input {
+  width: 100%;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-size: 13px;
+  font-family: inherit;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.paste-input:focus {
+  border-color: #7ec6a4;
+}
+
+.divider-text {
+  text-align: center;
+  color: #b0aab5;
+  font-size: 12px;
+  margin: 12px 0;
+  position: relative;
+}
+
+.divider-text::before,
+.divider-text::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 35%;
+  height: 1px;
+  background: #e5e4e7;
+}
+
+.divider-text::before {
+  left: 0;
+}
+
+.divider-text::after {
+  right: 0;
+}
+
+.form-group {
+  margin-bottom: 14px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin-bottom: 6px;
+}
+
+.form-input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  border-color: #7ec6a4;
+}
+
+.ing-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.form-select {
+  flex: 1;
+  padding: 8px 10px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  background: #fff;
+}
+
+.form-input-sm {
+  width: 70px;
+  padding: 8px 10px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  text-align: center;
+}
+
+.btn-icon-sm {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  color: #999;
+  padding: 4px;
+}
+
+.overlay-footer {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 18px;
+}
+
+/* Buttons */
+.btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.btn-outline:hover {
+  background: #f8f7f5;
+}
+
+.btn-sm {
+  padding: 6px 14px;
+  font-size: 12px;
+  border-radius: 8px;
+}
+
+.btn-approve {
+  background: #4a9d7e;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-reject {
+  background: #ef5350;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.empty-hint {
+  text-align: center;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 24px 0;
+}
+
+.toggle-icon {
+  font-size: 12px;
+}
+
+@media (max-width: 600px) {
+  .manage-toolbar {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/frontend/src/views/RecipeSearch.vue b/frontend/src/views/RecipeSearch.vue
new file mode 100644
index 0000000..8ab0976
--- /dev/null
+++ b/frontend/src/views/RecipeSearch.vue
@@ -0,0 +1,398 @@
+<template>
+  <div class="recipe-search">
+    <!-- Category Carousel -->
+    <div class="cat-wrap" v-if="categories.length">
+      <button class="cat-arrow cat-arrow-left" @click="scrollCat(-1)" :disabled="catScrollPos <= 0">&lsaquo;</button>
+      <div class="cat-track" ref="catTrack">
+        <div
+          v-for="cat in categories"
+          :key="cat.name"
+          class="cat-card"
+          :class="{ active: selectedCategory === cat.name }"
+          @click="toggleCategory(cat.name)"
+        >
+          <span class="cat-icon">{{ cat.icon || '📁' }}</span>
+          <span class="cat-label">{{ cat.name }}</span>
+        </div>
+      </div>
+      <button class="cat-arrow cat-arrow-right" @click="scrollCat(1)">&rsaquo;</button>
+    </div>
+
+    <!-- Search Box -->
+    <div class="search-box">
+      <input
+        class="search-input"
+        v-model="searchQuery"
+        placeholder="搜索配方名、精油、标签..."
+        @input="onSearch"
+      />
+      <button v-if="searchQuery" class="search-clear-btn" @click="clearSearch">✕</button>
+      <button class="search-btn" @click="onSearch">🔍</button>
+    </div>
+
+    <!-- Personal Section (logged in) -->
+    <div v-if="auth.isLoggedIn" class="personal-section">
+      <div class="section-header" @click="showMyRecipes = !showMyRecipes">
+        <span>📖 我的配方</span>
+        <span class="toggle-icon">{{ showMyRecipes ? '▾' : '▸' }}</span>
+      </div>
+      <div v-if="showMyRecipes" class="recipe-grid">
+        <RecipeCard
+          v-for="(r, i) in myRecipesPreview"
+          :key="r._id"
+          :recipe="r"
+          :index="findGlobalIndex(r)"
+          @click="openDetail(findGlobalIndex(r))"
+          @toggle-fav="handleToggleFav(r)"
+        />
+        <div v-if="myRecipesPreview.length === 0" class="empty-hint">暂无个人配方</div>
+      </div>
+
+      <div class="section-header" @click="showFavorites = !showFavorites">
+        <span>⭐ 收藏配方</span>
+        <span class="toggle-icon">{{ showFavorites ? '▾' : '▸' }}</span>
+      </div>
+      <div v-if="showFavorites" class="recipe-grid">
+        <RecipeCard
+          v-for="(r, i) in favoritesPreview"
+          :key="r._id"
+          :recipe="r"
+          :index="findGlobalIndex(r)"
+          @click="openDetail(findGlobalIndex(r))"
+          @toggle-fav="handleToggleFav(r)"
+        />
+        <div v-if="favoritesPreview.length === 0" class="empty-hint">暂无收藏配方</div>
+      </div>
+    </div>
+
+    <!-- Fuzzy Search Results -->
+    <div v-if="searchQuery && fuzzyResults.length" class="search-results-section">
+      <div class="section-label">🔍 搜索结果 ({{ fuzzyResults.length }})</div>
+      <div class="recipe-grid">
+        <RecipeCard
+          v-for="(r, i) in fuzzyResults"
+          :key="r._id"
+          :recipe="r"
+          :index="findGlobalIndex(r)"
+          @click="openDetail(findGlobalIndex(r))"
+          @toggle-fav="handleToggleFav(r)"
+        />
+      </div>
+    </div>
+
+    <!-- Public Recipe Grid -->
+    <div v-if="!searchQuery || fuzzyResults.length === 0">
+      <div class="section-label">🌿 公共配方库 ({{ filteredRecipes.length }})</div>
+      <div class="recipe-grid">
+        <RecipeCard
+          v-for="(r, i) in filteredRecipes"
+          :key="r._id"
+          :recipe="r"
+          :index="findGlobalIndex(r)"
+          @click="openDetail(findGlobalIndex(r))"
+          @toggle-fav="handleToggleFav(r)"
+        />
+        <div v-if="filteredRecipes.length === 0" class="empty-hint">暂无配方</div>
+      </div>
+    </div>
+
+    <!-- Recipe Detail Overlay -->
+    <RecipeDetailOverlay
+      v-if="selectedRecipeIndex !== null"
+      :recipeIndex="selectedRecipeIndex"
+      @close="selectedRecipeIndex = null"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, nextTick } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useOilsStore } from '../stores/oils'
+import { useRecipesStore } from '../stores/recipes'
+import { useUiStore } from '../stores/ui'
+import { api } from '../composables/useApi'
+import RecipeCard from '../components/RecipeCard.vue'
+import RecipeDetailOverlay from '../components/RecipeDetailOverlay.vue'
+
+const auth = useAuthStore()
+const oils = useOilsStore()
+const recipeStore = useRecipesStore()
+const ui = useUiStore()
+
+const searchQuery = ref('')
+const selectedCategory = ref(null)
+const categories = ref([])
+const selectedRecipeIndex = ref(null)
+const showMyRecipes = ref(true)
+const showFavorites = ref(true)
+const catScrollPos = ref(0)
+const catTrack = ref(null)
+
+onMounted(async () => {
+  try {
+    const res = await api('/api/category-modules')
+    if (res.ok) {
+      categories.value = await res.json()
+    }
+  } catch {
+    // category modules are optional
+  }
+})
+
+function toggleCategory(name) {
+  selectedCategory.value = selectedCategory.value === name ? null : name
+}
+
+function scrollCat(dir) {
+  if (!catTrack.value) return
+  const scrollAmount = 200
+  catTrack.value.scrollLeft += dir * scrollAmount
+  catScrollPos.value = catTrack.value.scrollLeft + dir * scrollAmount
+}
+
+const filteredRecipes = computed(() => {
+  let list = recipeStore.recipes
+  if (selectedCategory.value) {
+    list = list.filter(r => r.tags && r.tags.includes(selectedCategory.value))
+  }
+  return list
+})
+
+const fuzzyResults = computed(() => {
+  if (!searchQuery.value.trim()) return []
+  const q = searchQuery.value.trim().toLowerCase()
+  return recipeStore.recipes.filter(r => {
+    const nameMatch = r.name.toLowerCase().includes(q)
+    const oilMatch = r.ingredients.some(ing => ing.oil.toLowerCase().includes(q))
+    const tagMatch = r.tags && r.tags.some(t => t.toLowerCase().includes(q))
+    return nameMatch || oilMatch || tagMatch
+  })
+})
+
+const myRecipesPreview = computed(() => {
+  if (!auth.isLoggedIn) return []
+  return recipeStore.recipes
+    .filter(r => r._owner_id === auth.user.id)
+    .slice(0, 6)
+})
+
+const favoritesPreview = computed(() => {
+  if (!auth.isLoggedIn) return []
+  return recipeStore.recipes
+    .filter(r => recipeStore.isFavorite(r))
+    .slice(0, 6)
+})
+
+function findGlobalIndex(recipe) {
+  return recipeStore.recipes.findIndex(r => r._id === recipe._id)
+}
+
+function openDetail(index) {
+  if (index >= 0) {
+    selectedRecipeIndex.value = index
+  }
+}
+
+async function handleToggleFav(recipe) {
+  if (!auth.isLoggedIn) {
+    ui.openLogin()
+    return
+  }
+  await recipeStore.toggleFavorite(recipe._id)
+}
+
+function onSearch() {
+  // fuzzyResults computed handles the filtering reactively
+}
+
+function clearSearch() {
+  searchQuery.value = ''
+  selectedCategory.value = null
+}
+</script>
+
+<style scoped>
+.recipe-search {
+  padding: 0 12px 24px;
+}
+
+.cat-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 4px;
+}
+
+.cat-track {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  flex: 1;
+  padding: 8px 0;
+  scrollbar-width: none;
+}
+
+.cat-track::-webkit-scrollbar {
+  display: none;
+}
+
+.cat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 16px;
+  border-radius: 12px;
+  background: #f8f7f5;
+  cursor: pointer;
+  white-space: nowrap;
+  font-size: 13px;
+  transition: all 0.2s;
+  min-width: 64px;
+  border: 1.5px solid transparent;
+}
+
+.cat-card:hover {
+  background: #f0eeeb;
+}
+
+.cat-card.active {
+  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+  border-color: #7ec6a4;
+  color: #2e7d5a;
+  font-weight: 600;
+}
+
+.cat-icon {
+  font-size: 20px;
+}
+
+.cat-label {
+  font-size: 12px;
+}
+
+.cat-arrow {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 1.5px solid #d4cfc7;
+  background: #fff;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #6b6375;
+}
+
+.cat-arrow:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  background: #f8f7f5;
+  border-radius: 12px;
+  padding: 4px 8px;
+  border: 1.5px solid #e5e4e7;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 10px 8px;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+  color: #3e3a44;
+}
+
+.search-input::placeholder {
+  color: #b0aab5;
+}
+
+.search-btn,
+.search-clear-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  color: #6b6375;
+}
+
+.search-clear-btn:hover,
+.search-btn:hover {
+  background: #eae8e5;
+}
+
+.personal-section {
+  margin-bottom: 20px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: #f8f7f5;
+  border-radius: 10px;
+  cursor: pointer;
+  margin-bottom: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #3e3a44;
+}
+
+.section-header:hover {
+  background: #f0eeeb;
+}
+
+.toggle-icon {
+  font-size: 12px;
+  color: #999;
+}
+
+.section-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3e3a44;
+  padding: 8px 4px;
+  margin-bottom: 8px;
+}
+
+.search-results-section {
+  margin-bottom: 20px;
+}
+
+.recipe-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.empty-hint {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 24px 0;
+}
+
+@media (max-width: 600px) {
+  .recipe-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/frontend/src/views/UserManagement.vue b/frontend/src/views/UserManagement.vue
new file mode 100644
index 0000000..f29f7ca
--- /dev/null
+++ b/frontend/src/views/UserManagement.vue
@@ -0,0 +1,741 @@
+<template>
+  <div class="user-management">
+    <h3 class="page-title">👥 用户管理</h3>
+
+    <!-- Translation Suggestions Review -->
+    <div v-if="translations.length > 0" class="review-section">
+      <h4 class="section-title">🌐 翻译建议</h4>
+      <div class="review-list">
+        <div v-for="t in translations" :key="t._id || t.id" class="review-item">
+          <div class="review-info">
+            <span class="review-original">{{ t.original }}</span>
+            <span class="review-arrow">&rarr;</span>
+            <span class="review-suggested">{{ t.suggested }}</span>
+            <span class="review-user">{{ t.user_name || '匿名' }}</span>
+          </div>
+          <div class="review-actions">
+            <button class="btn-sm btn-approve" @click="approveTranslation(t)">采纳</button>
+            <button class="btn-sm btn-reject" @click="rejectTranslation(t)">拒绝</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Business Application Approval -->
+    <div v-if="businessApps.length > 0" class="review-section">
+      <h4 class="section-title">💼 商业认证申请</h4>
+      <div class="review-list">
+        <div v-for="app in businessApps" :key="app._id || app.id" class="review-item">
+          <div class="review-info">
+            <span class="review-name">{{ app.user_name || app.display_name }}</span>
+            <span class="review-reason">{{ app.reason }}</span>
+          </div>
+          <div class="review-actions">
+            <button class="btn-sm btn-approve" @click="approveBusiness(app)">通过</button>
+            <button class="btn-sm btn-reject" @click="rejectBusiness(app)">拒绝</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- New User Creation -->
+    <div class="create-section">
+      <h4 class="section-title">➕ 创建新用户</h4>
+      <div class="create-form">
+        <input v-model="newUser.username" class="form-input" placeholder="用户名" />
+        <input v-model="newUser.display_name" class="form-input" placeholder="显示名称" />
+        <input v-model="newUser.password" class="form-input" type="password" placeholder="密码 (留空自动生成)" />
+        <select v-model="newUser.role" class="form-select">
+          <option value="viewer">查看者</option>
+          <option value="editor">编辑</option>
+          <option value="senior_editor">高级编辑</option>
+          <option value="admin">管理员</option>
+        </select>
+        <button class="btn-primary" @click="createUser" :disabled="!newUser.username.trim()">创建</button>
+      </div>
+      <div v-if="createdLink" class="created-link">
+        <span>登录链接:</span>
+        <code>{{ createdLink }}</code>
+        <button class="btn-sm btn-outline" @click="copyLink(createdLink)">复制</button>
+      </div>
+    </div>
+
+    <!-- Search & Filter -->
+    <div class="filter-toolbar">
+      <div class="search-box">
+        <input
+          class="search-input"
+          v-model="searchQuery"
+          placeholder="搜索用户..."
+        />
+        <button v-if="searchQuery" class="search-clear-btn" @click="searchQuery = ''">✕</button>
+      </div>
+      <div class="role-filters">
+        <button
+          v-for="r in roles"
+          :key="r.value"
+          class="filter-btn"
+          :class="{ active: filterRole === r.value }"
+          @click="filterRole = filterRole === r.value ? '' : r.value"
+        >{{ r.label }}</button>
+      </div>
+    </div>
+
+    <!-- User List -->
+    <div class="user-list">
+      <div v-for="u in filteredUsers" :key="u._id || u.id" class="user-card">
+        <div class="user-info">
+          <div class="user-name">
+            {{ u.display_name || u.username }}
+            <span class="user-username" v-if="u.display_name">@{{ u.username }}</span>
+          </div>
+          <div class="user-meta">
+            <span class="user-role-badge" :class="'role-' + u.role">{{ roleLabel(u.role) }}</span>
+            <span v-if="u.business_verified" class="biz-badge">💼 商业认证</span>
+            <span class="user-date">注册: {{ formatDate(u.created_at) }}</span>
+          </div>
+        </div>
+        <div class="user-actions">
+          <select
+            :value="u.role"
+            class="role-select"
+            @change="changeRole(u, $event.target.value)"
+          >
+            <option value="viewer">查看者</option>
+            <option value="editor">编辑</option>
+            <option value="senior_editor">高级编辑</option>
+            <option value="admin">管理员</option>
+          </select>
+          <button class="btn-sm btn-outline" @click="copyUserLink(u)" title="复制登录链接">🔗</button>
+          <button class="btn-sm btn-delete" @click="removeUser(u)" title="删除用户">🗑️</button>
+        </div>
+      </div>
+      <div v-if="filteredUsers.length === 0" class="empty-hint">未找到用户</div>
+    </div>
+
+    <div class="user-count">共 {{ users.length }} 个用户</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useUiStore } from '../stores/ui'
+import { api } from '../composables/useApi'
+import { showConfirm } from '../composables/useDialog'
+
+const auth = useAuthStore()
+const ui = useUiStore()
+
+const users = ref([])
+const searchQuery = ref('')
+const filterRole = ref('')
+const translations = ref([])
+const businessApps = ref([])
+const createdLink = ref('')
+
+const newUser = reactive({
+  username: '',
+  display_name: '',
+  password: '',
+  role: 'viewer',
+})
+
+const roles = [
+  { value: 'admin', label: '管理员' },
+  { value: 'senior_editor', label: '高级编辑' },
+  { value: 'editor', label: '编辑' },
+  { value: 'viewer', label: '查看者' },
+]
+
+const filteredUsers = computed(() => {
+  let list = users.value
+  if (searchQuery.value.trim()) {
+    const q = searchQuery.value.trim().toLowerCase()
+    list = list.filter(u =>
+      (u.username || '').toLowerCase().includes(q) ||
+      (u.display_name || '').toLowerCase().includes(q)
+    )
+  }
+  if (filterRole.value) {
+    list = list.filter(u => u.role === filterRole.value)
+  }
+  return list
+})
+
+function roleLabel(role) {
+  const map = { admin: '管理员', senior_editor: '高级编辑', editor: '编辑', viewer: '查看者' }
+  return map[role] || role
+}
+
+function formatDate(d) {
+  if (!d) return '--'
+  return new Date(d).toLocaleDateString('zh-CN')
+}
+
+async function loadUsers() {
+  try {
+    const res = await api('/api/users')
+    if (res.ok) {
+      users.value = await res.json()
+    }
+  } catch {
+    users.value = []
+  }
+}
+
+async function loadTranslations() {
+  try {
+    const res = await api('/api/translation-suggestions')
+    if (res.ok) {
+      translations.value = await res.json()
+    }
+  } catch {
+    translations.value = []
+  }
+}
+
+async function loadBusinessApps() {
+  try {
+    const res = await api('/api/business-applications')
+    if (res.ok) {
+      businessApps.value = await res.json()
+    }
+  } catch {
+    businessApps.value = []
+  }
+}
+
+async function createUser() {
+  if (!newUser.username.trim()) return
+  try {
+    const res = await api('/api/users', {
+      method: 'POST',
+      body: JSON.stringify({
+        username: newUser.username.trim(),
+        display_name: newUser.display_name.trim() || newUser.username.trim(),
+        password: newUser.password || undefined,
+        role: newUser.role,
+      }),
+    })
+    if (res.ok) {
+      const data = await res.json()
+      if (data.token) {
+        const baseUrl = window.location.origin
+        createdLink.value = `${baseUrl}/?token=${data.token}`
+      }
+      newUser.username = ''
+      newUser.display_name = ''
+      newUser.password = ''
+      newUser.role = 'viewer'
+      await loadUsers()
+      ui.showToast('用户已创建')
+    } else {
+      const err = await res.json().catch(() => ({}))
+      ui.showToast('创建失败: ' + (err.error || err.message || ''))
+    }
+  } catch {
+    ui.showToast('创建失败')
+  }
+}
+
+async function changeRole(user, newRole) {
+  const id = user._id || user.id
+  try {
+    const res = await api(`/api/users/${id}/role`, {
+      method: 'PUT',
+      body: JSON.stringify({ role: newRole }),
+    })
+    if (res.ok) {
+      user.role = newRole
+      ui.showToast(`已更新 ${user.display_name || user.username} 的角色`)
+    }
+  } catch {
+    ui.showToast('更新失败')
+  }
+}
+
+async function removeUser(user) {
+  const ok = await showConfirm(`确定删除用户 "${user.display_name || user.username}"？此操作不可撤销。`)
+  if (!ok) return
+  const id = user._id || user.id
+  try {
+    const res = await api(`/api/users/${id}`, { method: 'DELETE' })
+    if (res.ok) {
+      users.value = users.value.filter(u => (u._id || u.id) !== id)
+      ui.showToast('已删除')
+    }
+  } catch {
+    ui.showToast('删除失败')
+  }
+}
+
+async function copyUserLink(user) {
+  try {
+    const id = user._id || user.id
+    const res = await api(`/api/users/${id}/token`)
+    if (res.ok) {
+      const data = await res.json()
+      const link = `${window.location.origin}/?token=${data.token}`
+      await navigator.clipboard.writeText(link)
+      ui.showToast('链接已复制')
+    }
+  } catch {
+    ui.showToast('获取链接失败')
+  }
+}
+
+async function copyLink(link) {
+  try {
+    await navigator.clipboard.writeText(link)
+    ui.showToast('已复制')
+  } catch {
+    ui.showToast('复制失败')
+  }
+}
+
+async function approveTranslation(t) {
+  const id = t._id || t.id
+  try {
+    const res = await api(`/api/translation-suggestions/${id}/approve`, { method: 'POST' })
+    if (res.ok) {
+      translations.value = translations.value.filter(item => (item._id || item.id) !== id)
+      ui.showToast('已采纳')
+    }
+  } catch {
+    ui.showToast('操作失败')
+  }
+}
+
+async function rejectTranslation(t) {
+  const id = t._id || t.id
+  try {
+    const res = await api(`/api/translation-suggestions/${id}/reject`, { method: 'POST' })
+    if (res.ok) {
+      translations.value = translations.value.filter(item => (item._id || item.id) !== id)
+      ui.showToast('已拒绝')
+    }
+  } catch {
+    ui.showToast('操作失败')
+  }
+}
+
+async function approveBusiness(app) {
+  const id = app._id || app.id
+  try {
+    const res = await api(`/api/business-applications/${id}/approve`, { method: 'POST' })
+    if (res.ok) {
+      businessApps.value = businessApps.value.filter(item => (item._id || item.id) !== id)
+      ui.showToast('已通过')
+    }
+  } catch {
+    ui.showToast('操作失败')
+  }
+}
+
+async function rejectBusiness(app) {
+  const id = app._id || app.id
+  try {
+    const res = await api(`/api/business-applications/${id}/reject`, { method: 'POST' })
+    if (res.ok) {
+      businessApps.value = businessApps.value.filter(item => (item._id || item.id) !== id)
+      ui.showToast('已拒绝')
+    }
+  } catch {
+    ui.showToast('操作失败')
+  }
+}
+
+onMounted(() => {
+  loadUsers()
+  loadTranslations()
+  loadBusinessApps()
+})
+</script>
+
+<style scoped>
+.user-management {
+  padding: 0 12px 24px;
+}
+
+.page-title {
+  margin: 0 0 16px;
+  font-size: 16px;
+  color: #3e3a44;
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3e3a44;
+  margin: 0 0 10px;
+}
+
+/* Review sections */
+.review-section {
+  margin-bottom: 18px;
+  padding: 14px;
+  background: #fff8e1;
+  border-radius: 12px;
+  border: 1.5px solid #ffe082;
+}
+
+.review-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.review-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: #fff;
+  border-radius: 8px;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.review-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  flex-wrap: wrap;
+  font-size: 13px;
+}
+
+.review-original {
+  font-weight: 500;
+  color: #3e3a44;
+}
+
+.review-arrow {
+  color: #b0aab5;
+}
+
+.review-suggested {
+  font-weight: 600;
+  color: #4a9d7e;
+}
+
+.review-user,
+.review-reason {
+  font-size: 12px;
+  color: #999;
+}
+
+.review-name {
+  font-weight: 600;
+  color: #3e3a44;
+}
+
+.review-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.btn-approve {
+  background: #4a9d7e;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  border-radius: 8px;
+}
+
+.btn-reject {
+  background: #ef5350;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  border-radius: 8px;
+}
+
+/* Create user */
+.create-section {
+  margin-bottom: 18px;
+  padding: 14px;
+  background: #f8f7f5;
+  border-radius: 12px;
+  border: 1.5px solid #e5e4e7;
+}
+
+.create-form {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.form-input {
+  flex: 1;
+  min-width: 120px;
+  padding: 8px 12px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.form-input:focus {
+  border-color: #7ec6a4;
+}
+
+.form-select {
+  padding: 8px 10px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  background: #fff;
+}
+
+.created-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  padding: 10px 12px;
+  background: #e8f5e9;
+  border-radius: 8px;
+  font-size: 12px;
+  flex-wrap: wrap;
+}
+
+.created-link code {
+  flex: 1;
+  word-break: break-all;
+  font-size: 11px;
+  background: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+/* Filter toolbar */
+.filter-toolbar {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  background: #f8f7f5;
+  border-radius: 10px;
+  padding: 2px 8px;
+  border: 1.5px solid #e5e4e7;
+  flex: 1;
+  min-width: 150px;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 8px 6px;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+}
+
+.search-clear-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #999;
+  padding: 4px;
+}
+
+.role-filters {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.filter-btn {
+  padding: 5px 14px;
+  border-radius: 16px;
+  border: 1.5px solid #e5e4e7;
+  background: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  color: #6b6375;
+  transition: all 0.15s;
+}
+
+.filter-btn.active {
+  background: #e8f5e9;
+  border-color: #7ec6a4;
+  color: #2e7d5a;
+  font-weight: 600;
+}
+
+/* User list */
+.user-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.user-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  background: #fff;
+  border: 1.5px solid #e5e4e7;
+  border-radius: 10px;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.user-card:hover {
+  border-color: #d4cfc7;
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-weight: 600;
+  font-size: 14px;
+  color: #3e3a44;
+  margin-bottom: 4px;
+}
+
+.user-username {
+  font-weight: 400;
+  font-size: 12px;
+  color: #b0aab5;
+  margin-left: 4px;
+}
+
+.user-meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.user-role-badge {
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.role-admin { background: #f3e5f5; color: #7b1fa2; }
+.role-senior_editor { background: #e3f2fd; color: #1565c0; }
+.role-editor { background: #e8f5e9; color: #2e7d5a; }
+.role-viewer { background: #f5f5f5; color: #757575; }
+
+.biz-badge {
+  font-size: 11px;
+  color: #e65100;
+}
+
+.user-date {
+  font-size: 11px;
+  color: #b0aab5;
+}
+
+.user-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.role-select {
+  padding: 5px 8px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 8px;
+  font-size: 12px;
+  font-family: inherit;
+  background: #fff;
+}
+
+.btn-sm {
+  padding: 5px 12px;
+  font-size: 12px;
+  border-radius: 8px;
+}
+
+.btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-outline:hover {
+  background: #f8f7f5;
+}
+
+.btn-delete {
+  background: #fff;
+  color: #ef5350;
+  border: 1.5px solid #ffcdd2;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 9px 20px;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.user-count {
+  text-align: center;
+  font-size: 12px;
+  color: #b0aab5;
+  margin-top: 16px;
+}
+
+.empty-hint {
+  text-align: center;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 24px 0;
+}
+
+@media (max-width: 600px) {
+  .create-form {
+    flex-direction: column;
+  }
+  .create-form .form-input,
+  .create-form .form-select {
+    width: 100%;
+  }
+  .user-card {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .user-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+</style>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..1e15960
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:8000',
+      '/uploads': 'http://localhost:8000'
+    }
+  },
+  build: {
+    outDir: 'dist'
+  }
+})