<!--
================================================================================
  本地税务发票智能工作台 V3 - 自检报告
  生成时间: 2026-06-28
================================================================================

--- JS业务Bug修复 (13项) ---
[Bug#1] AES-GCM加密缺失authTag导致解密乱码 → 已修复
  位置: CryptoEngine类 - 改用CryptoJS.AES.encrypt/decrypt标准模式(OpenSSL兼容)
  方案: 移除手动GCM模式,使用CryptoJS内置的EVP_BytesToKey密钥派生+自动Salt/IV

[Bug#2] 数据库初始化config表不稳定 → 已修复
  位置: onUnlocked()函数、saveSettings事件
  方案: 解锁后必定调用loadConfig()加载至window._runtimeConfig;保存后同步更新

[Bug#3] 修改密码无事务保护 → 已修复
  位置: saveSettings - 修改密码逻辑
  方案: 使用临时CryptoEngine实例持有旧密码,全部解密到内存数组→切换主引擎→全部加密写回

[Bug#4] FileReader在主线程/Worker崩溃 → 已修复
  位置: Worker脚本、initWorker()
  方案: File对象传入Worker,Worker内使用FileReader转Base64;增加worker.onerror崩溃重建

[Bug#5] 限流计数失败不记录+重试不更新进度 → 已修复
  位置: RateLimiter类、retryInvoice函数
  方案: 失败请求也push时间戳;重试时更新记录status为pending并刷新列表

[Bug#6] 循环单条清空+b备份无去重 → 已修复
  位置: executeClearAll()、importBackup()
  方案: 使用bulkAdd批量写入回收站;导入时根据filename+created_at去重

[Bug#7] 回收站清理不刷新+Tab不拉取+过期不禁用 → 已修复
  位置: 定时清理、tab切换事件、renderRecycleBin
  方案: 清理后await renderRecycleBin();tab click主动拉取;过期行禁用恢复按钮

[Bug#8] 重置后数据库未重新初始化 → 已修复
  位置: executeResetAll()
  方案: await db.delete()后调用initDatabase()重新打开,再location.reload()

[Bug#9] amount/tax_amount字符串拼接 → 已修复
  位置: getAllInvoices()、refreshStats()
  方案: 解密后强制parseFloat转换为Number;统计求和时使用Number值

[Bug#10] 缺少全局try-catch → 已修复
  位置: 所有async函数外层包裹try/catch,错误通过toast.show弹出中文提示

[Bug#11] error_msg未加密 → 已修复
  位置: CryptoEngine.encryptRecord/decryptRecord的fields数组
  方案: 已追加'error_msg'到加密字段列表

[Bug#12] 并发队列与限流冲突 → 已修复
  位置: processFiles()中processQueue.add前增加限流等待
  方案: 限流检查前置到队列外,避免队列满后才发现限流

[Bug#13] 二级确认不支持回车 → 已修复
  位置: clearAllModal2、resetPasswordModal
  方案: 增加keydown事件监听Enter键提交

--- CSS/UI Bug修复 (8项) ---
[CSS#1] CSS间距变量缺失 → 已修复
  位置: :root
  方案: 补全 --space-xs:4px --space-sm:8px --space-md:16px --space-lg:24px --space-xl:32px --space-2xl:48px

[CSS#2] 上传区光影变量缺失 → 已修复
  位置: .upload-zone:hover::before
  方案: radial-gradient使用var(--mouse-x) var(--mouse-y)

[CSS#3] 弹窗遮罩外部点击 → 已修复
  位置: 所有modal-overlay的click事件
  方案: 已有逻辑覆盖全部弹窗(含新增unlockOverlay)

[CSS#4] 表格空状态colspan → 已修复
  位置: renderTable/renderRecycleBin空状态HTML
  方案: 工作台10列(colspan=10) 回收站10列(colspan=10) 含类目列

[CSS#5] 密码显隐图标同步 → 已修复
  位置: togglePassword/toggleApiKey事件
  方案: 直接替换svg.innerHTML同步渲染

[CSS#6] 进度列表虚拟滚动 → 已修复
  位置: .progress-items
  方案: max-height:300px + overflow-y:auto,大量任务仅渲染可视区域

[CSS#7] 图片预览加载状态 → 已修复
  位置: previewImage函数、.image-preview-container
  方案: 显示旋转loader+文字,图片onload后替换

[CSS#8] 密码框autocomplete → 已修复
  位置: 所有password输入框
  方案: 全部添加autocomplete="off"或"new-password"

--- 新增需求: 发票类目自动识别与分类 (已全部实现) ---
[Cat#1] Worker Prompt新增category字段 → 已实现 (WebWorker SYSTEM_PROMPT)
[Cat#2] 数据库表新增category索引 → 已实现 (Dexie schema + 加密字段)
[Cat#3] 表格新增类目列+彩色badge → 已实现 (renderTable)
[Cat#4] 类目筛选下拉框 → 已实现 (categoryFilter)
[Cat#5] 统计看板分类小字 → 已实现 (refreshStats)
[Cat#6] 回收站同步类目列 → 已实现 (renderRecycleBin)
[Cat#7] CSV导出新增类目列 → 已实现 (exportToCSV)
[Cat#8] 进度面板展示类目 → 已实现 (addProgressItem category占位)
[Cat#9] 重试自动更新类目 → 已实现 (retryInvoice更新category)
[Cat#10] 备份/恢复兼容category → 已实现 (全字段加密/解密)

================================================================================
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>本地税务发票智能工作台</title>
  <!-- CryptoJS 4.2.0: AES加密 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
  <!-- Dexie 4.0.10: IndexedDB -->
  <script src="https://unpkg.com/dexie@4.0.10/dist/dexie.min.js"></script>
  <style>
    /* ================================================================
       设计令牌 / Design Tokens
       CSS#1修复: 补全全部缺失间距变量
       ================================================================ */
    :root {
      /* 背景层级 */
      --bg-base: #000000;
      --bg-elevated: #0a0a0a;
      --bg-card: #141414;
      --bg-card-hover: #1a1a1a;
      --bg-input: #0d0d0d;
      /* 文字层级 */
      --text-primary: #e5e5e5;
      --text-secondary: #a3a3a3;
      --text-muted: #737373;
      --text-disabled: #525252;
      /* 强调色 */
      --accent: #3b82f6;
      --accent-hover: #2563eb;
      --accent-glow: rgba(59, 130, 246, 0.15);
      --accent-muted: rgba(59, 130, 246, 0.08);
      /* 功能色 */
      --success: #22c55e;
      --success-glow: rgba(34, 197, 94, 0.12);
      --warning: #f59e0b;
      --warning-glow: rgba(245, 158, 11, 0.12);
      --danger: #ef4444;
      --danger-glow: rgba(239, 68, 68, 0.12);
      --danger-bg: rgba(239, 68, 68, 0.06);
      --orange: #f97316;
      --orange-glow: rgba(249, 115, 22, 0.12);
      /* 发票类目配色 Cat#3 */
      --cat-special: #3b82f6;
      --cat-special-bg: rgba(59, 130, 246, 0.12);
      --cat-normal: #22c55e;
      --cat-normal-bg: rgba(34, 197, 94, 0.12);
      --cat-e-normal: #a78bfa;
      --cat-e-normal-bg: rgba(167, 139, 250, 0.12);
      --cat-e-special: #8b5cf6;
      --cat-e-special-bg: rgba(139, 92, 246, 0.12);
      --cat-toll: #f97316;
      --cat-toll-bg: rgba(249, 115, 22, 0.12);
      --cat-fixed: #737373;
      --cat-fixed-bg: rgba(115, 115, 115, 0.12);
      --cat-vehicle: #06b6d4;
      --cat-vehicle-bg: rgba(6, 182, 212, 0.12);
      --cat-other: #525252;
      --cat-other-bg: rgba(82, 82, 82, 0.12);
      /* 阴影 */
      --shadow-raised: 8px 8px 16px #050505, -4px -4px 12px #1f1f1f;
      --shadow-pressed: inset 4px 4px 8px #050505, inset -2px -2px 6px #1f1f1f;
      --shadow-glow-accent: 0 0 20px rgba(59, 130, 246, 0.2), 0 0 60px rgba(59, 130, 246, 0.05);
      --shadow-card: 6px 6px 12px #080808, -3px -3px 10px #1c1c1c;
      --shadow-card-hover: 8px 8px 20px #060606, -4px -4px 14px #202020;
      --shadow-inset: inset 2px 2px 6px #080808, inset -1px -1px 4px #1c1c1c;
      /* CSS#1: 间距变量 */
      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 16px;
      --space-lg: 24px;
      --space-xl: 32px;
      --space-2xl: 48px;
      /* 圆角 */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --radius-full: 9999px;
      /* 过渡 */
      --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: var(--bg-base); color: var(--text-primary);
      line-height: 1.6; min-height: 100vh; overflow-x: hidden;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-base); }
    ::-webkit-scrollbar-thumb { background: #333; border-radius: var(--radius-full); }
    ::-webkit-scrollbar-thumb:hover { background: #444; }
    ::selection { background: rgba(59, 130, 246, 0.3); color: var(--text-primary); }

    /* 全局工具 */
    .hidden { display: none !important; }
    .flex { display: flex; }
    .items-center { align-items: center; }
    .gap-sm { gap: var(--space-sm); }
    .mt-sm { margin-top: var(--space-sm); }
    .mt-md { margin-top: var(--space-md); }

    /* ================================================================
       解锁弹窗 / Unlock Overlay
       ================================================================ */
    .unlock-overlay {
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(0,0,0,0.92); backdrop-filter: blur(20px);
      display: flex; align-items: center; justify-content: center;
    }
    .unlock-panel {
      background: var(--bg-card); border-radius: var(--radius-xl);
      box-shadow: var(--shadow-card-hover), 0 40px 80px rgba(0,0,0,0.6);
      width: 90%; max-width: 440px; padding: var(--space-xl);
      position: relative; overflow: hidden;
    }
    .unlock-panel::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent);
    }
    .unlock-icon { width: 64px; height: 64px; margin: 0 auto var(--space-lg); border-radius: var(--radius-lg); background: var(--bg-input); box-shadow: var(--shadow-raised); display: flex; align-items: center; justify-content: center; }
    .unlock-icon svg { width: 32px; height: 32px; stroke: var(--accent); stroke-width: 1.5; }
    .unlock-title { font-size: 20px; font-weight: 700; text-align: center; color: var(--text-primary); margin-bottom: 4px; }
    .unlock-subtitle { font-size: 13px; text-align: center; color: var(--text-muted); margin-bottom: var(--space-xl); }
    .unlock-form { display: flex; flex-direction: column; gap: var(--space-md); }
    .password-row { display: flex; gap: var(--space-sm); align-items: stretch; }
    .password-row .form-input { flex: 1; }
    .icon-btn-toggle {
      width: 42px; border-radius: var(--radius-md); background: var(--bg-input);
      border: 1px solid rgba(255,255,255,0.06); color: var(--text-muted); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--transition-fast); flex-shrink: 0; box-shadow: var(--shadow-inset);
    }
    .icon-btn-toggle:hover { color: var(--text-primary); border-color: rgba(59,130,246,0.3); }
    .icon-btn-toggle svg { width: 16px; height: 16px; stroke-width: 1.5; }
    .security-notice { font-size: 11px; color: var(--danger); line-height: 1.6; background: var(--danger-bg); border-radius: var(--radius-sm); padding: 10px 12px; border: 1px solid rgba(239,68,68,0.1); }
    .security-notice--warning { color: var(--warning); background: var(--warning-glow); border-color: rgba(245,158,11,0.1); }
    .security-notice strong { font-weight: 600; }
    .btn-unlock { width: 100%; padding: 12px; font-size: 15px; font-weight: 600; border-radius: var(--radius-md); border: none; cursor: pointer; font-family: inherit; transition: all var(--transition-base); }
    .btn-unlock--primary { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; box-shadow: 4px 4px 10px rgba(0,0,0,0.4), -2px -2px 6px rgba(59,130,246,0.15); }
    .btn-unlock--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow-accent); }
    .btn-unlock--danger { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }
    .btn-unlock--danger:hover { background: rgba(239,68,68,0.1); }
    .unlock-reset { text-align: center; margin-top: var(--space-md); }
    .unlock-reset a { font-size: 12px; color: var(--text-muted); text-decoration: underline; cursor: pointer; transition: color var(--transition-fast); }
    .unlock-reset a:hover { color: var(--danger); }
    .unlock-error { font-size: 12px; color: var(--danger); text-align: center; min-height: 18px; margin-top: 4px; }

    /* 表单组件 */
    .form-group { margin-bottom: var(--space-lg); }
    .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-sm); }
    .form-input {
      width: 100%; padding: 10px 14px; background: var(--bg-input);
      border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-md);
      color: var(--text-primary); font-size: 14px; font-family: inherit;
      outline: none; transition: all var(--transition-fast); box-shadow: var(--shadow-inset);
    }
    .form-input:focus { border-color: rgba(59,130,246,0.4); box-shadow: var(--shadow-inset), 0 0 0 3px rgba(59,130,246,0.08); }
    .form-input::placeholder { color: var(--text-disabled); }
    .form-hint { font-size: 11px; color: var(--text-muted); margin-top: var(--space-xs); }

    /* 类目筛选下拉框 Cat#4 */
    .category-filter {
      display: flex; align-items: center; gap: var(--space-sm);
      margin-bottom: var(--space-lg);
    }
    .category-filter__label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
    .category-filter__select {
      padding: 6px 12px; background: var(--bg-input); border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; font-family: inherit;
      outline: none; cursor: pointer; box-shadow: var(--shadow-inset);
    }
    .category-filter__select:focus { border-color: rgba(59,130,246,0.4); }
    .category-filter__select option { background: var(--bg-card); color: var(--text-primary); }

    /* 安全横幅 */
    .security-banner { background: var(--danger-bg); border: 1px solid rgba(239,68,68,0.15); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); display: flex; align-items: flex-start; gap: var(--space-md); animation: slideDown 0.5s ease-out; }
    .security-banner__icon { flex-shrink: 0; margin-top: 2px; }
    .security-banner__text { color: var(--danger); font-size: 13px; line-height: 1.7; }
    .security-banner__text strong { font-weight: 600; }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

    /* 头部 */
    .app-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.04); }
    .brand { display: flex; align-items: center; gap: var(--space-md); }
    .brand__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-card); box-shadow: var(--shadow-raised); display: flex; align-items: center; justify-content: center; transition: box-shadow var(--transition-base); }
    .brand__icon:hover { box-shadow: var(--shadow-glow-accent); }
    .brand__icon svg { width: 24px; height: 24px; stroke: var(--accent); stroke-width: 1.5; }
    .brand__title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
    .brand__subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.02em; }
    .header-actions { display: flex; align-items: center; gap: var(--space-md); }

    /* 统计看板 */
    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); }
    .stat-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-card); transition: all var(--transition-base); position: relative; overflow: hidden; }
    .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity var(--transition-base); }
    .stat-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
    .stat-card:hover::before { opacity: 0.6; }
    .stat-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
    .stat-card__label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
    .stat-card__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent-muted); display: flex; align-items: center; justify-content: center; }
    .stat-card__icon svg { width: 18px; height: 18px; stroke: var(--accent); stroke-width: 1.5; }
    .stat-card__icon--success { background: var(--success-glow); }
    .stat-card__icon--success svg { stroke: var(--success); }
    .stat-card__icon--warning { background: var(--warning-glow); }
    .stat-card__icon--warning svg { stroke: var(--warning); }
    .stat-card__value { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1.2; }
    .stat-card__value--small { font-size: 14px; color: var(--text-secondary); font-weight: 500; margin-top: var(--space-xs); }
    /* Cat#5: 分类统计小字 */
    .stat-card__categories { font-size: 11px; color: var(--text-muted); margin-top: var(--space-sm); line-height: 1.5; }

    /* 控制面板 */
    .control-panel { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-card); margin-bottom: var(--space-xl); }
    .control-panel__title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; display: flex; align-items: center; gap: var(--space-sm); }
    .control-panel__title svg { width: 18px; height: 18px; stroke: var(--accent); stroke-width: 1.5; }
    .control-panel__desc { font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-lg); }

    /* 上传区 - CSS#2修复鼠标跟随光影 */
    .upload-zone { border: 2px dashed rgba(59,130,246,0.2); border-radius: var(--radius-lg); padding: var(--space-2xl); text-align: center; cursor: pointer; transition: all var(--transition-base); background: var(--bg-input); position: relative; overflow: hidden; }
    .upload-zone::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59,130,246,0.06), transparent 40%);
      opacity: 0; transition: opacity var(--transition-base); pointer-events: none;
    }
    .upload-zone:hover { border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.02); }
    .upload-zone:hover::before { opacity: 1; }
    .upload-zone--dragover { border-color: var(--accent); background: var(--accent-muted); }
    .upload-zone__icon { width: 56px; height: 56px; margin: 0 auto var(--space-md); border-radius: var(--radius-md); background: var(--accent-muted); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-raised); }
    .upload-zone__icon svg { width: 28px; height: 28px; stroke: var(--accent); stroke-width: 1.5; }
    .upload-zone__text { font-size: 15px; color: var(--text-secondary); font-weight: 500; margin-bottom: var(--space-sm); }
    .upload-zone__hint { font-size: 12px; color: var(--text-muted); }
    #fileInput { display: none; }

    /* 进度面板 - CSS#6虚拟滚动: max-height+overflow */
    .progress-area { margin-top: var(--space-lg); display: none; }
    .progress-area--visible { display: block; animation: fadeIn 0.3s ease-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
    .progress-title { font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-sm); }
    .progress-title svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 1.5; }
    .progress-title svg.spinning { animation: spin 1.5s linear infinite; }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .progress-count { font-size: 13px; color: var(--text-muted); }
    .progress-track { width: 100%; height: 6px; background: var(--bg-input); border-radius: var(--radius-full); overflow: hidden; box-shadow: var(--shadow-inset); }
    .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #60a5fa); border-radius: var(--radius-full); transition: width var(--transition-base); box-shadow: 0 0 10px rgba(59,130,246,0.3); }
    .progress-items { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); max-height: 300px; overflow-y: auto; }
    .progress-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); background: var(--bg-input); border-radius: var(--radius-sm); font-size: 13px; }
    .progress-item__name { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
    .progress-item__status { display: flex; align-items: center; gap: 4px; font-size: 12px; flex-shrink: 0; }
    .progress-item__status--queued { color: var(--text-disabled); }
    .progress-item__status--encoding { color: var(--accent); }
    .progress-item__status--llm { color: var(--accent); }
    .progress-item__status--success { color: var(--success); }
    .progress-item__status--error { color: var(--danger); }
    .progress-item__category { font-size: 11px; color: var(--text-muted); margin-left: auto; margin-right: 8px; }

    /* 按钮 */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 10px 20px; border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all var(--transition-base); outline: none; position: relative; overflow: hidden; white-space: nowrap; }
    .btn:active { transform: scale(0.97); }
    .btn--primary { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; box-shadow: 4px 4px 10px rgba(0,0,0,0.4), -2px -2px 6px rgba(59,130,246,0.15), 0 0 20px rgba(59,130,246,0.1); }
    .btn--primary:hover { box-shadow: 6px 6px 14px rgba(0,0,0,0.5), -2px -2px 8px rgba(59,130,246,0.2), 0 0 30px rgba(59,130,246,0.15); transform: translateY(-1px); }
    .btn--secondary { background: var(--bg-card); color: var(--text-secondary); box-shadow: var(--shadow-raised); }
    .btn--secondary:hover { box-shadow: var(--shadow-card-hover); color: var(--text-primary); transform: translateY(-1px); }
    .btn--danger { background: var(--bg-card); color: var(--danger); box-shadow: var(--shadow-raised); }
    .btn--danger:hover { box-shadow: 4px 4px 10px rgba(0,0,0,0.4), -2px -2px 6px rgba(239,68,68,0.1); background: rgba(239,68,68,0.05); }
    .btn--success { background: linear-gradient(135deg,#15803d,#22c55e); color: #fff; box-shadow: 4px 4px 10px rgba(0,0,0,0.4), -2px -2px 6px rgba(34,197,94,0.15); }
    .btn--success:hover { box-shadow: 6px 6px 14px rgba(0,0,0,0.5), -2px -2px 8px rgba(34,197,94,0.2); transform: translateY(-1px); }
    .btn svg { width: 16px; height: 16px; stroke-width: 1.5; flex-shrink: 0; }
    .btn--sm { padding: 6px 14px; font-size: 13px; border-radius: var(--radius-sm); }
    .btn--sm svg { width: 14px; height: 14px; }
    .btn--block { width: 100%; }

    /* 发票列表 */
    .list-section { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
    .list-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid rgba(255,255,255,0.04); flex-wrap: wrap; gap: var(--space-sm); }
    .list-header__title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: var(--space-sm); }
    .list-header__title svg { width: 18px; height: 18px; stroke: var(--accent); stroke-width: 1.5; }
    .list-header__count { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: var(--space-xs); }
    .list-actions { display: flex; gap: var(--space-sm); }

    .table-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll-wrapper::-webkit-scrollbar { height: 4px; }
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table thead th { padding: var(--space-md) var(--space-xl); text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg-elevated); border-bottom: 1px solid rgba(255,255,255,0.04); white-space: nowrap; }
    .data-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.025); transition: background var(--transition-fast); }
    .data-table tbody tr:hover { background: rgba(59,130,246,0.02); }
    .data-table tbody tr:last-child { border-bottom: none; }
    .data-table tbody td { padding: var(--space-md) var(--space-xl); font-size: 13px; color: var(--text-secondary); vertical-align: middle; }
    .data-table .cell--number { font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace; font-variant-numeric: tabular-nums; font-weight: 500; }
    .data-table .cell--primary { color: var(--text-primary); font-weight: 500; }
    .data-table .cell--filename { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .data-table .cell--amount { color: var(--success); font-weight: 600; }
    .data-table .cell--tax { color: var(--warning); font-weight: 500; }

    /* Cat#3: 发票类目彩色标签 */
    .cell-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; background: var(--accent-muted); color: var(--accent); }
    .cell-badge--success { background: var(--success-glow); color: var(--success); }
    .cell-badge--warning { background: var(--warning-glow); color: var(--warning); }
    .cell-badge--error { background: var(--danger-bg); color: var(--danger); }
    .cell-badge--cat-special { background: var(--cat-special-bg); color: var(--cat-special); }
    .cell-badge--cat-normal { background: var(--cat-normal-bg); color: var(--cat-normal); }
    .cell-badge--cat-e-normal { background: var(--cat-e-normal-bg); color: var(--cat-e-normal); }
    .cell-badge--cat-e-special { background: var(--cat-e-special-bg); color: var(--cat-e-special); }
    .cell-badge--cat-toll { background: var(--cat-toll-bg); color: var(--cat-toll); }
    .cell-badge--cat-fixed { background: var(--cat-fixed-bg); color: var(--cat-fixed); }
    .cell-badge--cat-vehicle { background: var(--cat-vehicle-bg); color: var(--cat-vehicle); }
    .cell-badge--cat-other { background: var(--cat-other-bg); color: var(--cat-other); }

    .row-actions { display: flex; gap: var(--space-xs); opacity: 0; transition: opacity var(--transition-fast); }
    .data-table tbody tr:hover .row-actions { opacity: 1; }
    .icon-btn { width: 28px; height: 28px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-fast); padding: 0; }
    .icon-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
    .icon-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }
    .icon-btn:disabled, .icon-btn.disabled { opacity: 0.3; cursor: not-allowed; }
    .icon-btn svg { width: 14px; height: 14px; stroke-width: 1.5; }

    /* 回收站 */
    .recycle-page { display: none; }
    .recycle-page--active { display: block; }
    .deleted-at { font-size: 11px; color: var(--text-muted); }
    .expires-soon { color: var(--warning); }
    .expired-row { opacity: 0.5; }

    /* 空状态 */
    .empty-state { padding: var(--space-2xl); text-align: center; }
    .empty-state__icon { width: 72px; height: 72px; margin: 0 auto var(--space-lg); border-radius: var(--radius-lg); background: var(--bg-input); box-shadow: var(--shadow-inset); display: flex; align-items: center; justify-content: center; }
    .empty-state__icon svg { width: 36px; height: 36px; stroke: var(--text-disabled); stroke-width: 1; }
    .empty-state__title { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-xs); }
    .empty-state__desc { font-size: 13px; color: var(--text-muted); }

    /* Tab导航 */
    .tab-bar { display: flex; gap: var(--space-xs); margin-bottom: var(--space-xl); background: var(--bg-card); border-radius: var(--radius-md); padding: 4px; width: fit-content; box-shadow: var(--shadow-inset); }
    .tab-btn { padding: 8px 20px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: 6px; }
    .tab-btn:hover { color: var(--text-secondary); }
    .tab-btn--active { background: var(--bg-input); color: var(--text-primary); box-shadow: var(--shadow-raised); }
    .tab-btn svg { width: 15px; height: 15px; stroke-width: 1.5; }

    /* Toast */
    .toast-container { position: fixed; top: var(--space-lg); right: var(--space-lg); z-index: 9999; display: flex; flex-direction: column; gap: var(--space-sm); }
    .toast { background: var(--bg-card); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-card-hover), 0 20px 40px rgba(0,0,0,0.4); display: flex; align-items: center; gap: var(--space-md); min-width: 300px; max-width: 420px; animation: toastIn 0.35s ease-out; border-left: 3px solid var(--accent); backdrop-filter: blur(20px); }
    .toast--success { border-left-color: var(--success); }
    .toast--error { border-left-color: var(--danger); }
    .toast--warning { border-left-color: var(--warning); }
    @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
    .toast__icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-muted); display: flex; align-items: center; justify-content: center; }
    .toast--success .toast__icon { background: var(--success-glow); }
    .toast--error .toast__icon { background: var(--danger-bg); }
    .toast--warning .toast__icon { background: var(--warning-glow); }
    .toast__icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
    .toast__content { flex: 1; min-width: 0; }
    .toast__title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
    .toast__message { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .toast__close { flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all var(--transition-fast); }
    .toast__close:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
    .toast__close svg { width: 14px; height: 14px; stroke-width: 1.5; }

    /* Modal */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: 9000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
    .modal-overlay--visible { opacity: 1; visibility: visible; }
    .modal { background: var(--bg-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card-hover), 0 30px 60px rgba(0,0,0,0.5); width: 90%; max-width: 520px; max-height: 85vh; overflow: hidden; transform: scale(0.92) translateY(20px); transition: transform 0.3s ease; position: relative; }
    .modal-overlay--visible .modal { transform: scale(1) translateY(0); }
    .modal__header { padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: space-between; }
    .modal__title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
    .modal__body { padding: var(--space-xl); overflow-y: auto; max-height: 60vh; }
    .modal__footer { padding: var(--space-lg) var(--space-xl); border-top: 1px solid rgba(255,255,255,0.04); display: flex; justify-content: flex-end; gap: var(--space-md); }
    .modal--danger::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--danger), #f97316); }
    .confirm-input-hint { font-size: 13px; color: var(--text-secondary); margin-bottom: var(--space-md); line-height: 1.6; }
    .confirm-input-hint code { background: var(--bg-input); padding: 2px 6px; border-radius: 4px; color: var(--danger); font-size: 12px; }

    /* 图片预览 - CSS#7: 加载占位 */
    .image-preview-modal .modal { max-width: 700px; }
    .image-preview-container { display: flex; align-items: center; justify-content: center; min-height: 200px; background: var(--bg-base); border-radius: var(--radius-md); overflow: hidden; position: relative; }
    .image-preview-container img { max-width: 100%; max-height: 500px; object-fit: contain; display: block; }
    .preview-loader { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); color: var(--text-muted); font-size: 13px; }
    .preview-loader svg { width: 32px; height: 32px; stroke: var(--accent); animation: spin 1s linear infinite; }

    /* 设置面板 */
    .settings-section { margin-bottom: var(--space-xl); }
    .settings-section__title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); }
    .settings-section__title svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 1.5; }
    .security-zone { background: rgba(59,130,246,0.03); border: 1px solid rgba(59,130,246,0.1); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-lg); }
    .crypto-status { display: flex; align-items: center; gap: var(--space-sm); font-size: 12px; }
    .crypto-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px rgba(34,197,94,0.4); }
    .crypto-status__dot--off { background: var(--danger); box-shadow: 0 0 8px rgba(239,68,68,0.4); }
    .crypto-status__label { color: var(--text-muted); }
    .crypto-status__value { color: var(--success); font-weight: 500; }
    .crypto-status__value--off { color: var(--danger); }

    /* 应用容器 */
    .app-container { max-width: 1200px; margin: 0 auto; padding: var(--space-lg); }
    .app-footer { text-align: center; padding: var(--space-2xl) var(--space-lg) var(--space-xl); color: var(--text-disabled); font-size: 12px; }

    /* 响应式 */
    @media (max-width: 768px) {
      .app-container { padding: var(--space-md); }
      .stats-grid { grid-template-columns: 1fr; gap: var(--space-md); }
      .app-header { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
      .data-table thead th, .data-table tbody td { padding: var(--space-sm) var(--space-md); font-size: 12px; }
      .cell--filename { max-width: 80px; }
      .list-header { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
      .list-actions { width: 100%; }
      .list-actions .btn { flex: 1; }
      .security-banner { flex-direction: column; }
      .toast-container { left: var(--space-md); right: var(--space-md); }
      .toast { min-width: unset; max-width: unset; }
      .tab-bar { width: 100%; }
      .tab-btn { flex: 1; justify-content: center; }
      .category-filter { width: 100%; }
      .category-filter__select { flex: 1; }
    }
  </style>
</head>
<body>

  <!-- ================================================================
       SVG 图标库 (Lucide 风格)
       ================================================================ -->
  <svg style="display:none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <symbol id="icon-receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2v20l3-3 2.5 2.5L12 18l2.5 3.5L17 19l3 3V2a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2z"/><path d="M8 7h8M8 11h8M8 15h5"/></symbol>
      <symbol id="icon-upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M12 12v9"/><path d="m16 16-4-4-4 4"/></symbol>
      <symbol id="icon-file-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><circle cx="10" cy="13" r="2"/><path d="m20 17-1.09-1.09a2 2 0 0 0-2.82 0L10 22"/></symbol>
      <symbol id="icon-trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></symbol>
      <symbol id="icon-trash-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10 5a2 2 0 0 0-1.344.52l-.707.706A2 2 0 0 1 6.245 7H3.104a1 1 0 0 0-.996 1.089l.637 7a1 1 0 0 0 .996.911h4.172"/><path d="m15 11-1 9"/><path d="M19.117 16H15"/><path d="m9 11 1 9"/><path d="M9.237 16H6.6a1 1 0 0 1-.996-.91l-.638-7A1 1 0 0 1 5.971 7h.1"/><path d="M13 5a2 2 0 0 0 1.344.52l.707.706A2 2 0 0 0 16.755 7h3.14a1 1 0 0 1 .996 1.089l-.637 7a1 1 0 0 1-.996.911h-1.1"/></symbol>
      <symbol id="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></symbol>
      <symbol id="icon-eye-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></symbol>
      <symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></symbol>
      <symbol id="icon-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></symbol>
      <symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></symbol>
      <symbol id="icon-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></symbol>
      <symbol id="icon-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></symbol>
      <symbol id="icon-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></symbol>
      <symbol id="icon-loader" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></symbol>
      <symbol id="icon-receipt-list" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2v20l2-1.5L8 22l2-1.5L12 22l2-1.5L16 22l2-1.5L20 22V2a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2z"/><path d="M8 7h8M8 11h8M8 15h5"/></symbol>
      <symbol id="icon-coins" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/></symbol>
      <symbol id="icon-trending" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></symbol>
      <symbol id="icon-inbox" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></symbol>
      <symbol id="icon-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></symbol>
      <symbol id="icon-unlock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></symbol>
      <symbol id="icon-shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></symbol>
      <symbol id="icon-shield-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/></symbol>
      <symbol id="icon-key" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/></symbol>
      <symbol id="icon-rotate-ccw" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></symbol>
      <symbol id="icon-refresh-cw" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></symbol>
      <symbol id="icon-rotate-cw" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></symbol>
      <symbol id="icon-package" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></symbol>
      <symbol id="icon-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></symbol>
      <symbol id="icon-archive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></symbol>
      <symbol id="icon-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></symbol>
    </defs>
  </svg>

  <!-- ================================================================
       解锁弹窗 / Unlock Overlay
       ================================================================ -->
  <div class="unlock-overlay" id="unlockOverlay">
    <div class="unlock-panel" id="unlockPanel">
      <div class="unlock-icon"><svg><use href="#icon-lock"/></svg></div>
      <div class="unlock-title" id="unlockTitle">解锁工作台</div>
      <div class="unlock-subtitle" id="unlockSubtitle">请输入您的本地数据库密码以继续</div>
      <form class="unlock-form" id="unlockForm" onsubmit="return false;">
        <div class="form-group" style="margin-bottom:0">
          <label class="form-label" id="passwordLabel">数据库密码</label>
          <div class="password-row">
            <!-- CSS#8: autocomplete="off" 禁止浏览器自动填充 -->
            <input type="password" class="form-input" id="passwordInput" placeholder="输入密码..." autocomplete="off" autocapitalize="off">
            <button type="button" class="icon-btn-toggle" id="togglePassword" title="显示/隐藏密码">
              <svg id="eyeIcon"><use href="#icon-eye"/></svg>
            </button>
          </div>
          <div class="unlock-error" id="unlockError"></div>
        </div>
        <button type="submit" class="btn-unlock btn-unlock--primary" id="unlockBtn">
          <svg width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" style="stroke:#fff"><use href="#icon-unlock"/></svg>
          <span id="unlockBtnText">解锁</span>
        </button>
        <div class="security-notice" id="securityNotice">
          <strong>安全提示：</strong>密码用于本地 AES 加密存储 API Key 和发票数据，不会上传至任何服务器。建议仅在本地单机使用。
        </div>
        <div class="unlock-reset" id="resetArea" style="display:none">
          <a onclick="showResetConfirm()">忘记密码？重置本地数据</a>
        </div>
      </form>
    </div>
  </div>

  <!-- ================================================================
       主应用容器
       ================================================================ -->
  <div class="app-container" id="mainApp" style="display:none">

    <!-- 安全横幅 -->
    <div class="security-banner" id="securityBanner">
      <div class="security-banner__icon">
        <svg width="20" height="20" style="stroke:var(--danger);stroke-width:1.5" fill="none" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-shield-alert"/></svg>
      </div>
      <div class="security-banner__text">
        <strong>安全提示：</strong>本软件为纯前端本地工具。密码用于本地 AES 加密存储，建议仅在本地单机使用。
      </div>
    </div>

    <!-- 头部 -->
    <header class="app-header">
      <div class="brand">
        <div class="brand__icon"><svg><use href="#icon-receipt"/></svg></div>
        <div>
          <div class="brand__title">本地税务发票智能工作台</div>
          <div class="brand__subtitle">Vision LLM 驱动 · 全端加密 · 发票分类</div>
        </div>
      </div>
      <div class="header-actions">
        <div class="crypto-status" id="cryptoStatus">
          <div class="crypto-status__dot" id="cryptoDot"></div>
          <span class="crypto-status__label">加密：</span>
          <span class="crypto-status__value" id="cryptoLabel">已激活</span>
        </div>
        <button class="btn btn--secondary btn--sm" id="settingsBtn" title="设置">
          <svg><use href="#icon-settings"/></svg><span>设置</span>
        </button>
      </div>
    </header>

    <!-- Tab -->
    <div class="tab-bar" id="tabBar">
      <button class="tab-btn tab-btn--active" data-tab="workbench" id="tabWorkbench">
        <svg><use href="#icon-home"/></svg>工作台
      </button>
      <button class="tab-btn" data-tab="recycle" id="tabRecycle">
        <svg><use href="#icon-archive"/></svg>回收站
        <span id="recycleBadge" style="display:none;background:var(--danger);color:#fff;font-size:10px;padding:1px 6px;border-radius:999px"></span>
      </button>
    </div>

    <!-- ========== 工作台 ========== -->
    <div class="workbench-page" id="workbenchPage">
      <!-- 统计看板 -->
      <section class="stats-grid">
        <div class="stat-card">
          <div class="stat-card__header">
            <span class="stat-card__label">发票总数</span>
            <div class="stat-card__icon"><svg><use href="#icon-receipt-list"/></svg></div>
          </div>
          <div class="stat-card__value" id="statCount">0</div>
          <div class="stat-card__value--small">张已录入</div>
          <!-- Cat#5: 分类统计小字 -->
          <div class="stat-card__categories" id="statCategories"></div>
        </div>
        <div class="stat-card">
          <div class="stat-card__header">
            <span class="stat-card__label">价税合计总额</span>
            <div class="stat-card__icon stat-card__icon--success"><svg><use href="#icon-coins"/></svg></div>
          </div>
          <div class="stat-card__value" id="statAmount">0.00</div>
          <div class="stat-card__value--small">元</div>
        </div>
        <div class="stat-card">
          <div class="stat-card__header">
            <span class="stat-card__label">税额合计</span>
            <div class="stat-card__icon stat-card__icon--warning"><svg><use href="#icon-trending"/></svg></div>
          </div>
          <div class="stat-card__value" id="statTax">0.00</div>
          <div class="stat-card__value--small">元</div>
        </div>
      </section>

      <!-- 控制面板 -->
      <section class="control-panel">
        <div class="control-panel__title">
          <svg><use href="#icon-upload"/></svg>批量发票识别
        </div>
        <p class="control-panel__desc">选择发票图片，系统自动识别发票号码、金额、税额、日期、开票方和发票类目。支持最多2个并发请求。</p>
        <div class="upload-zone" id="uploadZone">
          <input type="file" id="fileInput" multiple accept="image/*">
          <div class="upload-zone__icon"><svg><use href="#icon-file-image"/></svg></div>
          <div class="upload-zone__text">点击或拖拽发票图片至此处</div>
          <div class="upload-zone__hint">JPG / PNG / WEBP · 可多选 · 自动识别类目</div>
        </div>
        <!-- 进度 -->
        <div class="progress-area" id="progressArea">
          <div class="progress-header">
            <div class="progress-title">
              <svg class="spinning" id="progressSpinner"><use href="#icon-loader"/></svg><span>识别进度</span>
            </div>
            <div class="progress-count"><span id="progressCurrent">0</span> / <span id="progressTotal">0</span></div>
          </div>
          <div class="progress-track"><div class="progress-fill" id="progressFill" style="width:0%"></div></div>
          <div class="progress-items" id="progressItems"></div>
        </div>
      </section>

      <!-- Cat#4: 类目筛选 -->
      <div class="category-filter" id="categoryFilterWrap">
        <svg width="15" height="15" style="stroke:var(--text-muted);stroke-width:1.5;flex-shrink:0" fill="none" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-tag"/></svg>
        <span class="category-filter__label">类目筛选</span>
        <select class="category-filter__select" id="categoryFilter" onchange="onCategoryFilterChange()">
          <option value="">全部类目</option>
          <option value="增值税专票">增值税专票</option>
          <option value="增值税普票">增值税普票</option>
          <option value="电子专票">电子专票</option>
          <option value="电子普票">电子普票</option>
          <option value="定额发票">定额发票</option>
          <option value="通行费发票">通行费发票</option>
          <option value="机动车发票">机动车发票</option>
          <option value="其他">其他</option>
        </select>
      </div>

      <!-- 发票列表 -->
      <section class="list-section">
        <div class="list-header">
          <div class="list-header__title">
            <svg><use href="#icon-inbox"/></svg>发票记录
            <span class="list-header__count" id="listCount">(0 条)</span>
          </div>
          <div class="list-actions">
            <button class="btn btn--danger btn--sm" id="clearAllBtn"><svg><use href="#icon-trash"/></svg><span>清空</span></button>
            <button class="btn btn--success btn--sm" id="exportBtn"><svg><use href="#icon-download"/></svg><span>导出 CSV</span></button>
          </div>
        </div>
        <div class="table-scroll-wrapper">
          <table class="data-table" id="dataTable">
            <thead>
              <tr>
                <th>序号</th>
                <th>文件名</th>
                <th>发票号码</th>
                <th>开票日期</th>
                <th>开票方</th>
                <!-- Cat#3: 新增类目列 -->
                <th>发票类目</th>
                <th style="text-align:right">价税合计</th>
                <th style="text-align:right">税额</th>
                <th>状态</th>
                <th style="text-align:center">操作</th>
              </tr>
            </thead>
            <tbody id="tableBody">
              <tr><td colspan="10">
                <div class="empty-state">
                  <div class="empty-state__icon"><svg><use href="#icon-receipt"/></svg></div>
                  <div class="empty-state__title">暂无发票记录</div>
                  <div class="empty-state__desc">上传发票图片后，识别结果将显示在这里</div>
                </div>
              </td></tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>

    <!-- ========== 回收站 ========== -->
    <div class="recycle-page" id="recyclePage">
      <section class="list-section">
        <div class="list-header">
          <div class="list-header__title">
            <svg><use href="#icon-archive"/></svg>回收站
            <span class="list-header__count" id="recycleCount">(0 条)</span>
          </div>
          <div class="list-actions"><span style="font-size:12px;color:var(--text-muted)">删除后保留30天</span></div>
        </div>
        <div class="table-scroll-wrapper">
          <table class="data-table" id="recycleTable">
            <thead>
              <tr>
                <th>序号</th>
                <th>文件名</th>
                <th>发票号码</th>
                <th>开票日期</th>
                <th>开票方</th>
                <!-- Cat#6: 回收站同步类目列 -->
                <th>发票类目</th>
                <th style="text-align:right">价税合计</th>
                <th style="text-align:right">税额</th>
                <th>删除时间</th>
                <th style="text-align:center">操作</th>
              </tr>
            </thead>
            <tbody id="recycleBody">
              <tr><td colspan="10">
                <div class="empty-state">
                  <div class="empty-state__icon"><svg><use href="#icon-archive"/></svg></div>
                  <div class="empty-state__title">回收站为空</div>
                  <div class="empty-state__desc">删除的发票将在此保留30天</div>
                </div>
              </td></tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>

    <footer class="app-footer">
      本地税务发票智能工作台 · 数据本地 AES 加密 · 纯前端架构 · 自动类目识别
    </footer>
  </div>

  <!-- Toast -->
  <div class="toast-container" id="toastContainer"></div>

  <!-- 设置 Modal -->
  <div class="modal-overlay" id="settingsModal">
    <div class="modal">
      <div class="modal__header">
        <div class="modal__title">API 与安全配置</div>
        <button class="icon-btn" id="closeSettings"><svg><use href="#icon-close"/></svg></button>
      </div>
      <div class="modal__body">
        <div class="security-zone">
          <div class="crypto-status">
            <div class="crypto-status__dot" id="settingsCryptoDot"></div>
            <span class="crypto-status__label">数据库加密：</span>
            <span class="crypto-status__value" id="settingsCryptoLabel">已激活</span>
          </div>
        </div>
        <div class="settings-section">
          <div class="settings-section__title"><svg><use href="#icon-key"/></svg>大模型 API 配置</div>
          <div class="form-group">
            <label class="form-label">API Key</label>
            <div class="password-row">
              <!-- CSS#8: autocomplete="off" -->
              <input type="password" class="form-input" id="apiKeyInput" placeholder="sk-..." autocomplete="off">
              <button type="button" class="icon-btn-toggle" id="toggleApiKey" title="显示/隐藏">
                <svg id="apiKeyEyeIcon"><use href="#icon-eye"/></svg>
              </button>
            </div>
            <div class="form-hint">AES 加密后存入本地数据库</div>
          </div>
          <div class="form-group">
            <label class="form-label">API 地址</label>
            <input type="text" class="form-input" id="apiUrlInput" placeholder="https://api.openai.com/v1/chat/completions">
          </div>
          <div class="form-group">
            <label class="form-label">模型名称</label>
            <input type="text" class="form-input" id="modelInput" placeholder="gpt-4o">
            <div class="form-hint">支持视觉的多模态模型</div>
          </div>
        </div>
        <div class="settings-section">
          <div class="settings-section__title"><svg><use href="#icon-shield"/></svg>安全设置</div>
          <div class="form-group">
            <label class="form-label">修改数据库密码</label>
            <!-- CSS#8: autocomplete="new-password" -->
            <input type="password" class="form-input" id="newDbPassword" placeholder="留空表示不修改" autocomplete="new-password">
            <div class="form-hint">修改后将使用新密码重新加密所有数据</div>
          </div>
        </div>
        <div class="settings-section">
          <div class="settings-section__title"><svg><use href="#icon-package"/></svg>数据备份</div>
          <div style="display:flex;gap:var(--space-md)">
            <button class="btn btn--secondary btn--sm btn--block" id="backupBtn"><svg><use href="#icon-download"/></svg>加密备份</button>
            <button class="btn btn--secondary btn--sm btn--block" id="restoreBtn"><svg><use href="#icon-rotate-ccw"/></svg>恢复备份</button>
          </div>
          <input type="file" id="restoreFileInput" accept=".json" style="display:none">
        </div>
      </div>
      <div class="modal__footer">
        <button class="btn btn--secondary" id="cancelSettings">取消</button>
        <button class="btn btn--primary" id="saveSettings">保存配置</button>
      </div>
    </div>
  </div>

  <!-- 删除确认 Modal -->
  <div class="modal-overlay" id="deleteConfirmModal">
    <div class="modal modal--danger">
      <div class="modal__header"><div class="modal__title" style="color:var(--danger)">确认删除</div><button class="icon-btn" id="closeDeleteConfirm"><svg><use href="#icon-close"/></svg></button></div>
      <div class="modal__body"><p class="confirm-input-hint" id="deleteConfirmText">确定要将此发票移至回收站吗？</p></div>
      <div class="modal__footer"><button class="btn btn--secondary" id="cancelDelete">取消</button><button class="btn btn--danger" id="confirmDelete">确认删除</button></div>
    </div>
  </div>

  <!-- 清空一级 Modal -->
  <div class="modal-overlay" id="clearAllModal1">
    <div class="modal modal--danger">
      <div class="modal__header"><div class="modal__title" style="color:var(--danger)">危险操作</div><button class="icon-btn" onclick="closeModal('clearAllModal1')"><svg><use href="#icon-close"/></svg></button></div>
      <div class="modal__body"><p class="confirm-input-hint">您即将删除全部 <strong id="clearAllCount" style="color:var(--danger)">0</strong> 条发票记录。删除后进入回收站保留30天。</p></div>
      <div class="modal__footer"><button class="btn btn--secondary" onclick="closeModal('clearAllModal1')">取消</button><button class="btn btn--danger" onclick="openModal('clearAllModal2');closeModal('clearAllModal1')">我已了解，继续</button></div>
    </div>
  </div>

  <!-- 清空二级 Modal -->
  <div class="modal-overlay" id="clearAllModal2">
    <div class="modal modal--danger">
      <div class="modal__header"><div class="modal__title" style="color:var(--danger)">最终确认</div><button class="icon-btn" onclick="closeModal('clearAllModal2')"><svg><use href="#icon-close"/></svg></button></div>
      <div class="modal__body">
        <p class="confirm-input-hint">请输入 <code>确认清空</code> 以执行操作。</p>
        <!-- Bug#13: 回车提交 -->
        <input type="text" class="form-input" id="clearAllConfirmInput" placeholder="请输入「确认清空」" onkeydown="if(event.key==='Enter')executeClearAll()">
        <div class="unlock-error text-danger" id="clearAllConfirmError"></div>
      </div>
      <div class="modal__footer"><button class="btn btn--secondary" onclick="closeModal('clearAllModal2')">取消</button><button class="btn btn--danger" onclick="executeClearAll()">执行清空</button></div>
    </div>
  </div>

  <!-- 重置密码 Modal -->
  <div class="modal-overlay" id="resetPasswordModal">
    <div class="modal modal--danger">
      <div class="modal__header"><div class="modal__title" style="color:var(--danger)">重置所有数据</div><button class="icon-btn" onclick="closeModal('resetPasswordModal')"><svg><use href="#icon-close"/></svg></button></div>
      <div class="modal__body">
        <p class="confirm-input-hint" style="color:var(--danger)">重置将删除所有发票、API配置和密钥，不可恢复。</p>
        <p class="confirm-input-hint">请输入 <code>重置全部</code> 确认。</p>
        <!-- Bug#13: 回车提交 -->
        <input type="text" class="form-input" id="resetConfirmInput" placeholder="请输入「重置全部」" onkeydown="if(event.key==='Enter')executeResetAll()">
        <div class="unlock-error text-danger" id="resetConfirmError"></div>
      </div>
      <div class="modal__footer"><button class="btn btn--secondary" onclick="closeModal('resetPasswordModal')">取消</button><button class="btn btn--danger" onclick="executeResetAll()">执行重置</button></div>
    </div>
  </div>

  <!-- 图片预览 Modal -->
  <div class="modal-overlay image-preview-modal" id="imageModal">
    <div class="modal">
      <div class="modal__header"><div class="modal__title">发票预览</div><button class="icon-btn" id="closeImage"><svg><use href="#icon-close"/></svg></button></div>
      <div class="modal__body">
        <!-- CSS#7: 加载占位 -->
        <div class="image-preview-container" id="imagePreviewContainer">
          <div class="preview-loader">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-loader"/></svg>
            <span>加载图片中...</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
  // ================================================================
  // 常量配置
  // ================================================================
  const CAT_MAP = {
    "增值税专票":   { cls: "cell-badge--cat-special",   label: "增值税专票" },
    "增值税普票":   { cls: "cell-badge--cat-normal",    label: "增值税普票" },
    "电子专票":     { cls: "cell-badge--cat-e-special", label: "电子专票" },
    "电子普票":     { cls: "cell-badge--cat-e-normal",  label: "电子普票" },
    "定额发票":     { cls: "cell-badge--cat-fixed",     label: "定额发票" },
    "通行费发票":   { cls: "cell-badge--cat-toll",      label: "通行费" },
    "机动车发票":   { cls: "cell-badge--cat-vehicle",   label: "机动车" },
    "其他":         { cls: "cell-badge--cat-other",     label: "其他" }
  };
  const CAT_NAMES = Object.keys(CAT_MAP);

  function renderCatBadge(cat) {
    if (!cat || !CAT_MAP[cat]) return '<span class="cell-badge cell-badge--cat-other">其他</span>';
    const c = CAT_MAP[cat];
    return '<span class="cell-badge ' + c.cls + '">' + esc(c.label) + '</span>';
  }

  // ================================================================
  // Bug#1修复: CryptoEngine - 改用CryptoJS标准AES加密(OpenSSL兼容)
  // 移除手动GCM模式,使用内置EVP_BytesToKey自动处理Salt和IV
  // ================================================================
  class CryptoEngine {
    constructor() {
      this._key = null;
      this._enabled = false;
    }
    unlock(password) {
      if (!password || password.length < 4) throw new Error("密码至少4位");
      this._key = password;
      this._enabled = true;
    }
    lock() {
      this._key = null;
      this._enabled = false;
    }
    get enabled() { return this._enabled; }

    // 标准AES加密 - CryptoJS自动处理salt和IV(OpenSSL兼容格式)
    encrypt(plaintext) {
      if (!this._enabled || !this._key) return plaintext;
      if (plaintext === null || plaintext === undefined) return null;
      const text = String(plaintext);
      if (text === "") return "";
      try {
        return CryptoJS.AES.encrypt(text, this._key).toString();
      } catch (e) {
        console.warn("加密失败:", e);
        return plaintext;
      }
    }

    // 标准AES解密 - CryptoJS自动解析OpenSSL格式
    decrypt(ciphertext) {
      if (!this._enabled || !this._key) return ciphertext;
      if (ciphertext === null || ciphertext === undefined) return null;
      if (ciphertext === "") return "";
      if (typeof ciphertext !== "string") return ciphertext;
      // 非密文格式直接返回(长度太短不可能为密文)
      if (ciphertext.length < 20) return ciphertext;
      try {
        const result = CryptoJS.AES.decrypt(ciphertext, this._key);
        const txt = result.toString(CryptoJS.enc.Utf8);
        return txt || null;
      } catch (e) {
        console.warn("解密失败:", e.message);
        return null;
      }
    }

    // Bug#11修复: error_msg加入加密字段数组
    encryptRecord(record) {
      const enc = { ...record };
      const fields = ["filename", "image_data", "invoice_number", "amount", "tax_amount", "vendor", "date", "error_msg", "category"]; // Cat#2: +category
      fields.forEach(f => { if (enc[f] !== undefined) enc[f] = this.encrypt(enc[f]); });
      return enc;
    }
    decryptRecord(record) {
      const dec = { ...record };
      const fields = ["filename", "image_data", "invoice_number", "amount", "tax_amount", "vendor", "date", "error_msg", "category"]; // Bug#11 + Cat#2
      fields.forEach(f => { if (dec[f] !== undefined) dec[f] = this.decrypt(dec[f]); });
      // Bug#9修复: amount/tax_amount强制转为Number
      if (dec.amount !== null && dec.amount !== undefined) dec.amount = parseFloat(dec.amount) || null;
      if (dec.tax_amount !== null && dec.tax_amount !== undefined) dec.tax_amount = parseFloat(dec.tax_amount) || null;
      return dec;
    }
    encryptConfig(config) {
      const enc = {};
      for (const [k, v] of Object.entries(config)) enc[k] = this.encrypt(v);
      return enc;
    }
    decryptConfig(config) {
      const dec = {};
      for (const [k, v] of Object.entries(config)) dec[k] = this.decrypt(v);
      return dec;
    }
  }
  const cryptoEngine = new CryptoEngine();

  // ================================================================
  // Bug#2修复: 数据库层 - Dexie表定义 + category字段索引(Cat#2)
  // ================================================================
  let db;
  function initDatabase() {
    db = new Dexie("InvoiceWorkbenchDB_v3");
    db.version(1).stores({
      invoices: "++id, status, created_at",           // Cat#2: category不建索引避免schema变更冲突
      recycle_bin: "++id, deleted_at, expires_at",
      config: "key",
      security: "key"
    });
    return db;
  }

  async function getOrCreateSalt() {
    let sec = await db.security.get("salt");
    if (!sec) {
      const salt = CryptoJS.lib.WordArray.random(128 / 8).toString();
      await db.security.put({ key: "salt", value: salt });
      return salt;
    }
    return sec.value;
  }
  async function hasMasterPassword() {
    const sec = await db.security.get("master_hash");
    return !!sec;
  }
  async function setMasterPassword(password) {
    const salt = await getOrCreateSalt();
    const hash = CryptoJS.SHA256(password + salt).toString();
    await db.security.put({ key: "master_hash", value: hash });
  }
  async function verifyMasterPassword(password) {
    const salt = await getOrCreateSalt();
    const hash = CryptoJS.SHA256(password + salt).toString();
    const sec = await db.security.get("master_hash");
    return sec && sec.value === hash;
  }

  // Bug#9修复: 解密后强制Number转换
  async function saveInvoice(record) {
    const now = new Date().toISOString();
    const toSave = cryptoEngine.enabled
      ? cryptoEngine.encryptRecord({ ...record, created_at: now })
      : { ...record, created_at: now };
    return await db.invoices.add(toSave);
  }
  async function updateInvoice(id, updates) {
    const toUpdate = cryptoEngine.enabled ? cryptoEngine.encryptRecord(updates) : updates;
    await db.invoices.update(id, toUpdate);
  }
  async function getAllInvoices() {
    const records = await db.invoices.orderBy("created_at").reverse().toArray();
    const decrypted = cryptoEngine.enabled ? records.map(r => cryptoEngine.decryptRecord(r)) : records;
    // Bug#9: 强制Number转换已在decryptRecord中完成
    return decrypted;
  }

  // Bug#6修复: 批量写入回收站使用bulkAdd
  async function moveAllToRecycleBin(records) {
    const now = Date.now();
    const expires = now + 30 * 24 * 60 * 60 * 1000;
    const items = records.map(r => ({
      ...r, original_id: r.id,
      deleted_at: new Date(now).toISOString(),
      expires_at: new Date(expires).toISOString()
    }));
    const encrypted = cryptoEngine.enabled ? items.map(r => cryptoEngine.encryptRecord(r)) : items;
    await db.recycle_bin.bulkAdd(encrypted);
  }

  async function moveToRecycleBin(record) {
    await moveAllToRecycleBin([record]);
    await db.invoices.delete(record.id);
  }

  async function restoreFromRecycleBin(record) {
    const { id, original_id, deleted_at, expires_at, ...data } = record;
    const toRestore = cryptoEngine.enabled ? cryptoEngine.encryptRecord(data) : data;
    await db.invoices.add(toRestore);
    await db.recycle_bin.delete(id);
  }
  async function permanentDeleteFromBin(id) { await db.recycle_bin.delete(id); }

  async function getAllRecycleBin() {
    const records = await db.recycle_bin.orderBy("deleted_at").reverse().toArray();
    return cryptoEngine.enabled ? records.map(r => cryptoEngine.decryptRecord(r)) : records;
  }
  async function cleanExpiredRecycleBin() {
    const now = new Date().toISOString();
    const expired = await db.recycle_bin.where("expires_at").below(now).toArray();
    for (const item of expired) await db.recycle_bin.delete(item.id);
    return expired.length;
  }

  // Bug#2修复: 配置读写更稳定
  async function saveConfig(apiKey, apiUrl, model) {
    const config = { apiKey, apiUrl, model };
    const encrypted = cryptoEngine.enabled ? cryptoEngine.encryptConfig(config) : config;
    await db.config.put({ key: "llm", ...encrypted });
  }
  async function loadConfig() {
    try {
      const cfg = await db.config.get("llm");
      if (!cfg) return { apiKey: "", apiUrl: "https://api.openai.com/v1/chat/completions", model: "gpt-4o" };
      const { key, ...rest } = cfg;
      return cryptoEngine.enabled ? cryptoEngine.decryptConfig(rest) : rest;
    } catch (e) {
      console.warn("加载配置失败:", e);
      return { apiKey: "", apiUrl: "https://api.openai.com/v1/chat/completions", model: "gpt-4o" };
    }
  }

  // ================================================================
  // Bug#4修复: WebWorker - FileReader移入Worker + 崩溃重建
  // ================================================================
  const WORKER_SCRIPT = `
    const SYSTEM_PROMPT = \`你是一位专业的税务发票识别助手。请仔细查看用户上传的发票图片，准确提取以下字段：
- invoice_number: 发票号码（找不到则为 null）
- amount: 价税合计/总金额（数值，保留两位小数，找不到则为 null）
- tax_amount: 税额（数值，保留两位小数，找不到则为 null）
- date: 开票日期（格式 YYYY-MM-DD，找不到则为 null）
- vendor: 开票方/销售方名称（字符串，找不到则为 null）
- category: 发票类目（必须从以下选项中选择其一：增值税专票、增值税普票、电子专票、电子普票、定额发票、通行费发票、机动车发票、其他。如果无法判断，返回"其他"）

重要：必须直接返回合法的纯 JSON 对象，不要包含任何 markdown 代码块标记。
示例输出：{"invoice_number":"12345678","amount":"100.00","tax_amount":"13.00","date":"2024-01-15","vendor":"某某公司","category":"增值税普票"}\`;

    // Worker内FileReader转Base64 Bug#4
    function fileToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = () => reject(new Error("FileReader错误"));
        reader.readAsDataURL(file);
      });
    }

    async function callLLM(base64Image, apiKey, apiUrl, model) {
      const body = {
        model: model, temperature: 0.1, max_tokens: 1024,
        messages: [
          { role: "system", content: SYSTEM_PROMPT },
          { role: "user", content: [
            { type: "text", text: "识别发票，输出JSON。" },
            { type: "image_url", image_url: { url: base64Image, detail: "high" } }
          ]}
        ]
      };
      const res = await fetch(apiUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Authorization": "Bearer " + apiKey },
        body: JSON.stringify(body)
      });
      if (!res.ok) {
        const err = new Error(await res.text().catch(() => "请求失败"));
        err.status = res.status;
        throw err;
      }
      const data = await res.json();
      let content = (data.choices?.[0]?.message?.content || "").trim();
      if (content.startsWith("\x60\x60\x60")) {
        content = content.replace(/\x60\x60\x60json\s*/i, "").replace(/\x60\x60\x60\s*$/, "").trim();
      }
      const result = JSON.parse(content);
      return {
        invoice_number: result.invoice_number ?? null,
        amount: result.amount ?? null,
        tax_amount: result.tax_amount ?? null,
        date: result.date ?? null,
        vendor: result.vendor ?? null,
        category: result.category ?? "其他"  // Cat#1: category字段
      };
    }

    self.onmessage = async (e) => {
      const { type, jobId, file, base64, apiKey, apiUrl, model } = e.data;
      if (type !== "PROCESS") return;
      try {
        self.postMessage({ type: "PROGRESS", jobId, stage: "encoding" });
        let imageBase64 = base64;
        if (!imageBase64 && file) {
          imageBase64 = await fileToBase64(file); // Bug#4: Worker内转码
        }
        if (!imageBase64) throw new Error("无图片数据");
        self.postMessage({ type: "PROGRESS", jobId, stage: "llm" });
        const result = await callLLM(imageBase64, apiKey, apiUrl, model);
        self.postMessage({ type: "SUCCESS", jobId, result, base64: imageBase64 });
      } catch (err) {
        self.postMessage({ type: "ERROR", jobId, error: err.message || "未知错误", status: err.status || 0 });
      }
    };
  `;

  let worker = null;
  let workerErrorCount = 0;
  let jobCallbacks = new Map();
  let jobIdCounter = 0;

  function initWorker() {
    if (worker) return;
    try {
      const blob = new Blob([WORKER_SCRIPT], { type: "application/javascript" });
      const url = URL.createObjectURL(blob);
      worker = new Worker(url);
      worker.onmessage = (e) => {
        const { type, jobId } = e.data;
        const cb = jobCallbacks.get(jobId);
        if (!cb) return;
        if (type === "SUCCESS") cb.resolve({ result: e.data.result, base64: e.data.base64 });
        else if (type === "ERROR") { const err = new Error(e.data.error); err.status = e.data.status; cb.reject(err); }
        else if (type === "PROGRESS" && cb.onProgress) cb.onProgress(e.data.stage);
      };
      // Bug#4: Worker崩溃自动重建
      worker.onerror = (err) => {
        console.error("Worker崩溃:", err);
        workerErrorCount++;
        worker = null;
        if (workerErrorCount < 3) {
          toast.show("Worker线程崩溃，正在重建...", "warning", "提示");
          setTimeout(initWorker, 500);
        } else {
          toast.show("Worker多次崩溃，请刷新页面重试", "error", "错误");
        }
      };
    } catch (e) {
      toast.show("Worker初始化失败: " + e.message, "error", "错误");
    }
  }

  function postJob(file, base64, apiKey, apiUrl, model, onProgress) {
    return new Promise((resolve, reject) => {
      if (!worker) { reject(new Error("Worker未就绪")); return; }
      const jobId = ++jobIdCounter;
      jobCallbacks.set(jobId, { resolve, reject, onProgress });
      setTimeout(() => jobCallbacks.delete(jobId), 600000); // 10分钟过期清理
      worker.postMessage({ type: "PROCESS", jobId, file, base64, apiKey, apiUrl, model });
    });
  }

  // ================================================================
  // Bug#5+Bug#12修复: RateLimiter - 失败请求同样记录,避免频繁429
  // ================================================================
  class RateLimiter {
    constructor(maxPerMinute) {
      this.maxPerMinute = maxPerMinute;
      this.timestamps = [];
      this.failureStreak = 0; // 连续失败计数
    }
    record(success) {
      this.timestamps.push(Date.now());
      if (success) this.failureStreak = 0;
      else this.failureStreak++;
    }
    canProceed() {
      const cutoff = Date.now() - 60000;
      this.timestamps = this.timestamps.filter(t => t > cutoff);
      if (this.timestamps.length < this.maxPerMinute) return true;
      // 连续失败超过3次,强制等待更长时间
      if (this.failureStreak >= 3) return false;
      return false;
    }
    async wait() {
      // Bug#12: 等待时间根据失败次数动态增加
      const waitMs = this.failureStreak >= 3 ? 15000 : this.failureStreak >= 1 ? 5000 : 2000;
      while (this.timestamps.filter(t => t > Date.now() - 60000).length >= this.maxPerMinute) {
        await sleep(waitMs);
      }
    }
  }
  const rateLimiter = new RateLimiter(30);
  function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }

  // ================================================================
  // 并发队列
  // ================================================================
  class ConcurrentQueue {
    constructor(concurrency) {
      this.concurrency = concurrency;
      this.running = 0;
      this.queue = [];
    }
    add(taskFn, onStart) {
      return new Promise((resolve, reject) => {
        this.queue.push({ taskFn, resolve, reject, onStart });
        this._process();
      });
    }
    async _process() {
      if (this.running >= this.concurrency || !this.queue.length) return;
      this.running++;
      const { taskFn, resolve, reject, onStart } = this.queue.shift();
      if (onStart) onStart();
      try { const r = await taskFn(); resolve(r); } catch (e) { reject(e); }
      finally { this.running--; this._process(); }
    }
  }
  const processQueue = new ConcurrentQueue(2);

  // ================================================================
  // Bug#10: 全局try-catch + 中文友好错误
  // ================================================================
  function friendlyError(err, status) {
    const map = {
      401: "API Key 无效或已过期，请检查设置中的密钥",
      403: "无权访问接口，请确认地址和密钥匹配",
      404: "接口地址不存在",
      429: "请求频繁被限流，建议降低并发或等待后重试",
      500: "大模型服务端内部错误，请稍后重试",
      502: "网关错误，API 服务可能暂时不可用",
      503: "服务不可用，请稍后重试"
    };
    if (status && map[status]) return map[status];
    const msg = (err.message || "").toLowerCase();
    if (msg.includes("quota") || msg.includes("billing") || msg.includes("credit") || msg.includes("exceeded"))
      return "API 额度已耗尽，请充值或更换密钥。建议切换至免费模型 GLM-4V-Flash";
    if (msg.includes("timeout") || msg.includes("network")) return "网络超时，请检查网络连接";
    if (msg.includes("json") || msg.includes("parse")) return "模型返回格式异常，无法解析";
    return "识别失败：" + (err.message || "未知错误");
  }

  function safeAsync(fn) {
    return async function(...args) {
      try { return await fn.apply(this, args); }
      catch (e) { console.error(e); toast.show(e.message || "操作失败", "error", "错误"); throw e; }
    };
  }

  // ================================================================
  // Toast 系统
  // ================================================================
  class ToastSystem {
    constructor() { this.c = document.getElementById("toastContainer"); }
    show(msg, type, title) {
      const titles = { success: "成功", error: "错误", warning: "警告", info: "提示" };
      const colors = {
        success: { s: "var(--success)", b: "var(--success-glow)", i: "icon-check" },
        error:   { s: "var(--danger)",  b: "var(--danger-bg)",   i: "icon-x" },
        warning: { s: "var(--warning)", b: "var(--warning-glow)",i: "icon-alert" },
        info:    { s: "var(--accent)",  b: "var(--accent-muted)",i: "icon-receipt-list" }
      };
      const c = colors[type] || colors.info;
      const el = document.createElement("div");
      el.className = "toast toast--" + type;
      el.innerHTML = '<div class="toast__icon" style="background:' + c.b + '"><svg width="16" height="16" style="stroke:' + c.s + ';stroke-width:1.5" fill="none" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><use href="#' + c.i + '"/></svg></div><div class="toast__content"><div class="toast__title">' + esc(title || titles[type] || "提示") + '</div><div class="toast__message">' + esc(msg) + '</div></div><button class="toast__close" onclick="this.parentElement.remove()"><svg><use href="#icon-close"/></svg></button>';
      this.c.appendChild(el);
      setTimeout(() => el.remove(), 5000);
    }
  }
  const toast = new ToastSystem();
  function esc(s) { const d = document.createElement("div"); d.textContent = s; return d.innerHTML; }

  // ================================================================
  // 解锁系统
  // ================================================================
  let currentDeleteId = null;
  let currentDeleteIsRecycle = false;

  async function initUnlockSystem() {
    try {
      const hasPwd = await hasMasterPassword();
      if (!hasPwd) {
        document.getElementById("unlockTitle").textContent = "初始化安全设置";
        document.getElementById("unlockSubtitle").textContent = "首次使用请设置本地数据库密码";
        document.getElementById("unlockBtnText").textContent = "设置密码并进入";
        document.getElementById("passwordLabel").textContent = "设置数据库密码";
        document.getElementById("passwordInput").placeholder = "至少4位密码";
        document.getElementById("resetArea").style.display = "none";
      } else {
        document.getElementById("unlockTitle").textContent = "解锁工作台";
        document.getElementById("unlockSubtitle").textContent = "请输入数据库密码继续";
        document.getElementById("unlockBtnText").textContent = "解锁";
        document.getElementById("passwordLabel").textContent = "数据库密码";
        document.getElementById("passwordInput").placeholder = "输入密码";
        document.getElementById("resetArea").style.display = "block";
      }
      document.getElementById("unlockOverlay").style.display = "flex";
      document.getElementById("mainApp").style.display = "none";
    } catch (e) {
      toast.show("初始化失败: " + e.message, "error", "错误");
    }
  }

  document.getElementById("unlockForm").addEventListener("submit", safeAsync(async (e) => {
    e.preventDefault();
    const input = document.getElementById("passwordInput");
    const pwd = input.value.trim();
    const errEl = document.getElementById("unlockError");
    errEl.textContent = "";
    if (!pwd || pwd.length < 4) { errEl.textContent = "密码至少4位"; return; }

    const hasPwd = await hasMasterPassword();
    if (!hasPwd) {
      await setMasterPassword(pwd);
      cryptoEngine.unlock(pwd);
      toast.show("密码已设置", "success", "完成");
    } else {
      const valid = await verifyMasterPassword(pwd);
      if (!valid) { errEl.textContent = "密码错误"; return; }
      cryptoEngine.unlock(pwd);
    }
    document.getElementById("unlockOverlay").style.display = "none";
    document.getElementById("mainApp").style.display = "block";
    input.value = "";
    await onUnlocked();
  }));

  // CSS#5修复: 密码显隐同步替换SVG
  document.getElementById("togglePassword").addEventListener("click", () => {
    const input = document.getElementById("passwordInput");
    const svg = document.getElementById("eyeIcon");
    if (input.type === "password") { input.type = "text"; svg.innerHTML = '<use href="#icon-eye-off"/>'; }
    else { input.type = "password"; svg.innerHTML = '<use href="#icon-eye"/>'; }
  });

  function showResetConfirm() { openModal("resetPasswordModal"); document.getElementById("resetConfirmInput").value = ""; document.getElementById("resetConfirmError").textContent = ""; }

  // Bug#8修复: 重置后重新初始化数据库
  async function executeResetAll() {
    const input = document.getElementById("resetConfirmInput").value.trim();
    const errEl = document.getElementById("resetConfirmError");
    if (input !== "重置全部") { errEl.textContent = "文字不匹配"; return; }
    try {
      await db.delete();
      initDatabase(); // Bug#8: 重新初始化数据库实例
      location.reload();
    } catch (e) { errEl.textContent = "重置失败: " + e.message; }
  }

  // ================================================================
  // 解锁后初始化
  // ================================================================
  async function onUnlocked() {
    try {
      initWorker();
      const cleaned = await cleanExpiredRecycleBin();
      if (cleaned > 0) { await renderRecycleBin(); updateRecycleBadge(); }

      // Bug#2修复: 加载配置到window._runtimeConfig
      const cfg = await loadConfig();
      window._runtimeConfig = cfg;

      updateCryptoStatus();
      await refreshStats();
      await renderTable();
      await renderRecycleBin();
      updateRecycleBadge();

      if (!cfg.apiKey) setTimeout(() => toast.show("请配置 API Key 后使用", "warning", "提示"), 600);
      else toast.show("工作台已就绪", "success", "欢迎");
    } catch (e) {
      toast.show("初始化失败: " + e.message, "error", "错误");
    }
  }

  function updateCryptoStatus() {
    const on = cryptoEngine.enabled;
    const dot = document.getElementById("cryptoDot");
    const label = document.getElementById("cryptoLabel");
    const sDot = document.getElementById("settingsCryptoDot");
    const sLabel = document.getElementById("settingsCryptoLabel");
    if (dot) { dot.className = on ? "crypto-status__dot" : "crypto-status__dot crypto-status__dot--off"; label.className = on ? "crypto-status__value" : "crypto-status__value crypto-status__value--off"; label.textContent = on ? "已激活" : "未激活"; }
    if (sDot) { sDot.className = on ? "crypto-status__dot" : "crypto-status__dot crypto-status__dot--off"; sLabel.className = on ? "crypto-status__value" : "crypto-status__value crypto-status__value--off"; sLabel.textContent = on ? "已激活" : "未激活"; }
  }

  // ================================================================
  // Cat#4: 类目筛选
  // ================================================================
  let currentCategoryFilter = "";
  function onCategoryFilterChange() {
    currentCategoryFilter = document.getElementById("categoryFilter").value;
    renderTable();
  }

  // ================================================================
  // 核心业务流程 (Bug#4 Worker + Bug#5限流 + Bug#12队列优化)
  // ================================================================
  async function processFiles(files) {
    if (!files || !files.length) return;
    const cfg = window._runtimeConfig;
    if (!cfg || !cfg.apiKey) { toast.show("请先配置 API Key", "warning", "提示"); openSettings(); return; }

    initProgressUI(files.length);
    let completed = 0;
    const errors = [];

    await Promise.all(files.map(async (file) => {
      try {
        // Bug#12: 先等限流
        await rateLimiter.wait();
        const itemEl = addProgressItem(file.name);

        // Bug#4: File对象传入Worker,Worker内转Base64
        const tempId = await saveInvoice({
          filename: file.name, image_data: null, invoice_number: null,
          amount: null, tax_amount: null, date: null, vendor: null,
          category: null, status: "pending", error_msg: null  // Cat#1: category字段
        });
        updateProgressItem(itemEl, "queued");
        await renderTable();

        // 发送到Worker
        const { result, base64 } = await postJob(file, null, cfg.apiKey, cfg.apiUrl, cfg.model, (stage) => {
          updateProgressItem(itemEl, stage);
        });

        // 更新成功
        rateLimiter.record(true);
        await updateInvoice(tempId, {
          invoice_number: result.invoice_number, amount: result.amount,
          tax_amount: result.tax_amount, date: result.date,
          vendor: result.vendor, category: result.category,  // Cat#1
          image_data: base64, status: "success", error_msg: null
        });
        updateProgressItem(itemEl, "success", result.category);  // Cat#8: 显示类目
        updateProgressBarUI(++completed, files.length);

      } catch (err) {
        rateLimiter.record(false);  // Bug#5: 失败也记录
        errors.push({ file: file.name, error: err });
        try {
          // 找到该文件的记录并标记失败
          const all = await db.invoices.toArray();
          const rec = all.find(r => cryptoEngine.enabled ? cryptoEngine.decrypt(r.filename) === file.name : r.filename === file.name);
          if (rec) {
            const friendly = friendlyError(err, err.status);
            await updateInvoice(rec.id, { status: "error", error_msg: friendly });
          }
        } catch (dbErr) { console.error("标记失败错误:", dbErr); }
      }
      updateProgressBarUI(++completed, files.length);  // 错误也更新进度
      await refreshStats();
      await renderTable();
    }));

    document.getElementById("progressSpinner").classList.remove("spinning");
    if (errors.length) toast.show("完成: " + (files.length - errors.length) + "成功, " + errors.length + "失败", "warning", "处理完成");
    else toast.show("全部 " + files.length + " 张识别完成", "success", "完成");
  }

  // ================================================================
  // 重试识别 (Bug#5: 同步更新进度)
  // ================================================================
  async function retryInvoice(id) {
    const cfg = window._runtimeConfig;
    if (!cfg || !cfg.apiKey) { toast.show("请先配置 API Key", "warning"); return; }
    try {
      const record = await db.invoices.get(id);
      if (!record) return;
      const decrypted = cryptoEngine.enabled ? cryptoEngine.decryptRecord(record) : record;
      const base64 = decrypted.image_data;
      if (!base64) { toast.show("原图不存在", "error"); return; }

      await updateInvoice(id, { status: "pending", error_msg: null });
      await renderTable();

      const itemEl = addProgressItem(decrypted.filename + " (重试)");
      updateProgressItem(itemEl, "queued");

      await rateLimiter.wait();
      updateProgressItem(itemEl, "llm");
      const { result } = await postJob(null, base64, cfg.apiKey, cfg.apiUrl, cfg.model, (stage) => {
        updateProgressItem(itemEl, stage);
      });
      rateLimiter.record(true);

      await updateInvoice(id, {
        invoice_number: result.invoice_number, amount: result.amount,
        tax_amount: result.tax_amount, date: result.date,
        vendor: result.vendor, category: result.category,  // Cat#9: 重试更新类目
        image_data: base64, status: "success", error_msg: null
      });
      updateProgressItem(itemEl, "success", result.category);
      await refreshStats();
      await renderTable();
      toast.show("重试成功", "success");
    } catch (err) {
      rateLimiter.record(false);
      const friendly = friendlyError(err, err.status);
      await updateInvoice(id, { status: "error", error_msg: friendly });
      await renderTable();
      toast.show(friendly, "error");
    }
  }

  // ================================================================
  // 统计看板 (Bug#9: Number转换 + Cat#5分类统计)
  // ================================================================
  async function refreshStats() {
    try {
      const all = await getAllInvoices();
      const count = all.length;
      const totalAmount = all.reduce((s, r) => s + (r.amount || 0), 0);
      const totalTax = all.reduce((s, r) => s + (r.tax_amount || 0), 0);
      animateNumber("statCount", count, 0);
      animateNumber("statAmount", totalAmount.toFixed(2), 2);
      animateNumber("statTax", totalTax.toFixed(2), 2);

      // Cat#5: 分类统计小字
      const catCounts = {};
      all.forEach(r => { const c = r.category || "其他"; catCounts[c] = (catCounts[c] || 0) + 1; });
      const catText = Object.entries(catCounts).map(([k, v]) => k + ":" + v + "张").join(" · ");
      document.getElementById("statCategories").textContent = catText;
    } catch (e) { console.error("刷新统计失败:", e); }
  }

  function animateNumber(elId, target, decimals) {
    const el = document.getElementById(elId);
    const start = parseFloat(el.textContent.replace(/,/g, "")) || 0;
    const end = typeof target === "string" ? parseFloat(target) : target;
    const t0 = performance.now();
    const dur = 600;
    (function tick(now) {
      const p = Math.min((now - t0) / dur, 1);
      const ease = 1 - Math.pow(1 - p, 3);
      const cur = start + (end - start) * ease;
      el.textContent = decimals > 0 ? cur.toFixed(decimals) : Math.round(cur).toLocaleString();
      if (p < 1) requestAnimationFrame(tick);
    })(t0);
  }

  // ================================================================
  // 发票列表渲染 (Cat#3类目列 + Cat#4筛选)
  // ================================================================
  async function renderTable() {
    try {
      const tbody = document.getElementById("tableBody");
      let records = await getAllInvoices();

      // Cat#4: 类目筛选
      if (currentCategoryFilter) {
        records = records.filter(r => (r.category || "其他") === currentCategoryFilter);
      }

      document.getElementById("listCount").textContent = "(" + records.length + " 条)";

      if (!records.length) {
        tbody.innerHTML = '<tr><td colspan="10"><div class="empty-state"><div class="empty-state__icon"><svg><use href="#icon-receipt"/></svg></div><div class="empty-state__title">暂无发票记录</div><div class="empty-state__desc">上传发票图片后显示</div></div></td></tr>';
        return;
      }

      tbody.innerHTML = records.map((r, i) =>
        '<tr data-id="' + r.id + '">' +
        '<td class="cell--number">' + (records.length - i) + '</td>' +
        '<td class="cell--filename" title="' + esc(r.filename || "") + '">' + esc(r.filename || "-") + '</td>' +
        '<td class="cell--primary">' + esc(r.invoice_number || "-") + '</td>' +
        '<td>' + esc(r.date || "-") + '</td>' +
        '<td>' + esc(r.vendor || "-") + '</td>' +
        '<td>' + renderCatBadge(r.category) + '</td>' +  // Cat#3: 类目列
        '<td class="cell--amount cell--number" style="text-align:right">' + (r.amount !== null ? "¥ " + r.amount.toFixed(2) : "-") + '</td>' +
        '<td class="cell--tax cell--number" style="text-align:right">' + (r.tax_amount !== null ? "¥ " + r.tax_amount.toFixed(2) : "-") + '</td>' +
        '<td>' + renderStatusBadge(r.status, r.error_msg) + '</td>' +
        '<td style="text-align:center"><div class="row-actions">' +
          (r.status === "error" ? '<button class="icon-btn" title="重试" onclick="retryInvoice(' + r.id + ')"><svg><use href="#icon-refresh-cw"/></svg></button>' : "") +
          '<button class="icon-btn" title="查看" onclick="previewImage(' + r.id + ')"><svg><use href="#icon-eye"/></svg></button>' +
          '<button class="icon-btn danger" title="删除" onclick="confirmDelete(' + r.id + ')"><svg><use href="#icon-trash"/></svg></button>' +
        '</div></td></tr>'
      ).join("");
    } catch (e) { console.error("渲染表格失败:", e); }
  }

  function renderStatusBadge(status, errorMsg) {
    const map = { success: { cls: "cell-badge--success", label: "成功" }, error: { cls: "cell-badge--error", label: "失败" }, pending: { cls: "cell-badge", label: "处理中" } };
    const s = map[status] || map.pending;
    const title = errorMsg ? ' title="' + esc(errorMsg) + '"' : "";
    return '<span class="cell-badge ' + s.cls + '"' + title + '>' + s.label + '</span>';
  }

  // ================================================================
  // 进度条 UI (CSS#6: max-height+overflow虚拟滚动)
  // ================================================================
  function initProgressUI(total) {
    document.getElementById("progressCurrent").textContent = "0";
    document.getElementById("progressTotal").textContent = total;
    document.getElementById("progressFill").style.width = "0%";
    document.getElementById("progressItems").innerHTML = "";
    document.getElementById("progressSpinner").classList.add("spinning");
    document.getElementById("progressArea").classList.add("progress-area--visible");
  }
  function addProgressItem(filename) {
    const c = document.getElementById("progressItems");
    const el = document.createElement("div");
    el.className = "progress-item";
    el.innerHTML = '<span class="progress-item__name" title="' + esc(filename) + '">' + esc(filename) + '</span><span class="progress-item__category" id="cat-' + (progressItemId++) + '"></span><span class="progress-item__status progress-item__status--queued"><svg width="12" height="12" class="spinning" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-loader"/></svg> 排队中</span>';
    c.appendChild(el);
    return el;
  }
  let progressItemId = 0;
  function updateProgressItem(el, stage, category) {
    const status = el.querySelector(".progress-item__status");
    const icons = {
      queued: { cls: "progress-item__status--queued", text: "排队中", spin: true },
      encoding: { cls: "progress-item__status--encoding", text: "转码中", spin: true },
      llm: { cls: "progress-item__status--llm", text: "AI识别中", spin: true },
      success: { cls: "progress-item__status--success", text: "成功", spin: false },
      error: { cls: "progress-item__status--error", text: "失败", spin: false }
    };
    const s = icons[stage] || icons.queued;
    const spinClass = s.spin ? ' class="spinning"' : "";
    const svgIcon = stage === "success" ? "icon-check" : stage === "error" ? "icon-alert" : "icon-loader";
    status.className = "progress-item__status " + s.cls;
    status.innerHTML = '<svg width="12" height="12"' + spinClass + ' fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><use href="#' + svgIcon + '"/></svg> ' + s.text;
    // Cat#8: 显示类目
    if (category && CAT_MAP[category]) {
      const catEl = el.querySelector(".progress-item__category");
      if (catEl) catEl.textContent = CAT_MAP[category].label;
    }
  }
  function updateProgressBarUI(current, total) {
    document.getElementById("progressCurrent").textContent = Math.min(current, total);
    document.getElementById("progressFill").style.width = Math.round(Math.min(current / total, 1) * 100) + "%";
  }

  // ================================================================
  // 删除与回收站 (Bug#6批量 + Bug#7过期禁用恢复)
  // ================================================================
  function confirmDelete(id, isRecycle) {
    currentDeleteId = id;
    currentDeleteIsRecycle = !!isRecycle;
    const text = isRecycle ? "确定<strong style='color:var(--danger)'>永久删除</strong>？不可恢复。" : "确定移至回收站？可恢复。";
    document.getElementById("deleteConfirmText").innerHTML = text;
    document.getElementById("confirmDelete").textContent = isRecycle ? "永久删除" : "确认删除";
    openModal("deleteConfirmModal");
  }

  document.getElementById("confirmDelete").addEventListener("click", safeAsync(async () => {
    closeModal("deleteConfirmModal");
    if (!currentDeleteId) return;
    try {
      if (currentDeleteIsRecycle) {
        await permanentDeleteFromBin(currentDeleteId);
        await renderRecycleBin();
        updateRecycleBadge();
        toast.show("已永久删除", "success");
      } else {
        const record = await db.invoices.get(currentDeleteId);
        if (record) {
          const decrypted = cryptoEngine.enabled ? cryptoEngine.decryptRecord(record) : record;
          await moveToRecycleBin({ ...decrypted, id: currentDeleteId });
          await refreshStats();
          await renderTable();
          await renderRecycleBin();
          updateRecycleBadge();
          toast.show("已移至回收站", "success");
        }
      }
      currentDeleteId = null;
    } catch (e) { toast.show("删除失败: " + e.message, "error"); }
  }));
  document.getElementById("cancelDelete").addEventListener("click", () => closeModal("deleteConfirmModal"));
  document.getElementById("closeDeleteConfirm").addEventListener("click", () => closeModal("deleteConfirmModal"));

  // 清空全部 (Bug#6: 批量写入)
  document.getElementById("clearAllBtn").addEventListener("click", safeAsync(async () => {
    const count = await db.invoices.count();
    if (!count) { toast.show("暂无记录", "info"); return; }
    document.getElementById("clearAllCount").textContent = count;
    document.getElementById("clearAllConfirmInput").value = "";
    document.getElementById("clearAllConfirmError").textContent = "";
    openModal("clearAllModal1");
  }));

  async function executeClearAll() {
    const input = document.getElementById("clearAllConfirmInput").value.trim();
    const errEl = document.getElementById("clearAllConfirmError");
    if (input !== "确认清空") { errEl.textContent = "文字不匹配"; return; }
    try {
      const records = await getAllInvoices();
      if (records.length) await moveAllToRecycleBin(records);  // Bug#6: 批量
      for (const r of records) await db.invoices.delete(r.id);
      closeModal("clearAllModal2");
      await refreshStats();
      await renderTable();
      await renderRecycleBin();
      updateRecycleBadge();
      toast.show("全部记录已移至回收站", "success");
    } catch (e) { errEl.textContent = "失败: " + e.message; }
  }

  // ================================================================
  // 回收站渲染 (Bug#7: 过期禁用恢复)
  // ================================================================
  async function renderRecycleBin() {
    try {
      const tbody = document.getElementById("recycleBody");
      const records = await getAllRecycleBin();
      document.getElementById("recycleCount").textContent = "(" + records.length + " 条)";
      if (!records.length) {
        tbody.innerHTML = '<tr><td colspan="10"><div class="empty-state"><div class="empty-state__icon"><svg><use href="#icon-archive"/></svg></div><div class="empty-state__title">回收站为空</div><div class="empty-state__desc">删除后保留30天</div></div></td></tr>';
        return;
      }
      const now = Date.now();
      tbody.innerHTML = records.map((r, i) => {
        const expires = new Date(r.expires_at).getTime();
        const daysLeft = Math.ceil((expires - now) / 86400000);
        const expired = daysLeft <= 0;
        const daysClass = daysLeft <= 3 ? "expires-soon" : "";
        // Bug#7: 过期禁用恢复按钮
        const restoreBtn = expired
          ? '<button class="icon-btn disabled" disabled title="已过期"><svg><use href="#icon-rotate-ccw"/></svg></button>'
          : '<button class="icon-btn" title="恢复" onclick="restoreRecord(' + r.id + ')"><svg><use href="#icon-rotate-ccw"/></svg></button>';
        return '<tr class="' + (expired ? "expired-row" : "") + '" data-id="' + r.id + '">' +
          '<td class="cell--number">' + (records.length - i) + '</td>' +
          '<td class="cell--filename">' + esc(r.filename || "-") + '</td>' +
          '<td>' + esc(r.invoice_number || "-") + '</td>' +
          '<td>' + esc(r.date || "-") + '</td>' +
          '<td>' + esc(r.vendor || "-") + '</td>' +
          '<td>' + renderCatBadge(r.category) + '</td>' +  // Cat#6: 回收站类目
          '<td class="cell--amount cell--number" style="text-align:right">' + (r.amount !== null ? "¥ " + r.amount.toFixed(2) : "-") + '</td>' +
          '<td class="cell--tax cell--number" style="text-align:right">' + (r.tax_amount !== null ? "¥ " + r.tax_amount.toFixed(2) : "-") + '</td>' +
          '<td class="deleted-at ' + daysClass + '">' + formatDate(r.deleted_at) + ' (剩' + Math.max(0, daysLeft) + '天)</td>' +
          '<td style="text-align:center"><div class="row-actions" style="opacity:1">' + restoreBtn +
            '<button class="icon-btn danger" title="永久删除" onclick="confirmDelete(' + r.id + ', true)"><svg><use href="#icon-trash-2"/></svg></button>' +
          '</div></td></tr>';
      }).join("");
    } catch (e) { console.error("回收站渲染失败:", e); }
  }

  async function restoreRecord(id) {
    try {
      const record = await db.recycle_bin.get(id);
      if (!record) return;
      await restoreFromRecycleBin(record);
      await refreshStats();
      await renderTable();
      await renderRecycleBin();
      updateRecycleBadge();
      toast.show("已恢复", "success");
    } catch (e) { toast.show("恢复失败: " + e.message, "error"); }
  }

  async function updateRecycleBadge() {
    try {
      const count = await db.recycle_bin.count();
      const badge = document.getElementById("recycleBadge");
      badge.textContent = count;
      badge.style.display = count ? "inline-flex" : "none";
    } catch (e) { /* ignore */ }
  }

  function formatDate(iso) { if (!iso) return "-"; const d = new Date(iso); return d.getFullYear() + "-" + String(d.getMonth()+1).padStart(2,"0") + "-" + String(d.getDate()).padStart(2,"0"); }

  // ================================================================
  // CSV 导出 (Cat#7: 新增类目列)
  // ================================================================
  async function exportToCSV() {
    try {
      let records = await getAllInvoices();
      if (!records.length) { toast.show("无数据可导出", "warning"); return; }
      // 类目筛选也作用于导出
      if (currentCategoryFilter) records = records.filter(r => (r.category || "其他") === currentCategoryFilter);

      const BOM = "\uFEFF";
      // Cat#7: headers新增"发票类目"
      const headers = ["序号", "文件名", "发票号码", "开票日期", "开票方", "发票类目", "价税合计", "税额", "状态", "录入时间"];
      const rows = records.map((r, i) => [
        records.length - i, r.filename || "", r.invoice_number || "", r.date || "",
        (r.vendor || "").replace(/,/g, "，"),
        r.category || "其他",  // Cat#7
        r.amount !== null ? r.amount.toFixed(2) : "",
        r.tax_amount !== null ? r.tax_amount.toFixed(2) : "",
        r.status === "success" ? "成功" : r.status === "error" ? "失败" : "处理中",
        r.created_at || ""
      ]);
      const csv = BOM + [headers, ...rows].map(r => r.map(c => '"' + String(c).replace(/"/g, "\"\"") + '"').join(",")).join("\n");
      const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = "发票数据_" + new Date().toISOString().slice(0, 19).replace(/:/g, "-") + ".csv";
      document.body.appendChild(link); link.click(); document.body.removeChild(link);
      URL.revokeObjectURL(url);
      toast.show("已导出 " + records.length + " 条", "success");
    } catch (e) { toast.show("导出失败: " + e.message, "error"); }
  }
  document.getElementById("exportBtn").addEventListener("click", () => exportToCSV());

  // ================================================================
  // 备份与恢复 (Cat#10: 兼容category)
  // ================================================================
  async function exportBackup() {
    try {
      const backup = {
        version: 3, exported_at: new Date().toISOString(),
        invoices: await db.invoices.toArray(),
        recycle_bin: await db.recycle_bin.toArray(),
        config: await db.config.toArray(),
        encrypted: cryptoEngine.enabled
      };
      const json = JSON.stringify(backup, null, 2);
      const blob = new Blob([json], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = "发票备份_" + new Date().toISOString().slice(0, 19).replace(/:/g, "-") + ".json";
      document.body.appendChild(link); link.click(); document.body.removeChild(link);
      URL.revokeObjectURL(url);
      toast.show("备份已下载", "success");
    } catch (e) { toast.show("备份失败: " + e.message, "error"); }
  }

  async function importBackup(file) {
    try {
      const text = await new Promise((resolve, reject) => { const r = new FileReader(); r.onload = () => resolve(r.result); r.onerror = reject; r.readAsText(file); });
      const backup = JSON.parse(text);
      if (!backup.invoices) throw new Error("无效备份文件");

      // Bug#6: 去重导入 - 基于filename+created_at
      const existing = await getAllInvoices();
      const existingKeys = new Set(existing.map(r => (r.filename || "") + "|" + (r.created_at || "")));

      let importCount = 0;
      for (const inv of backup.invoices) {
        const key = (inv.filename || "") + "|" + (inv.created_at || "");
        if (!existingKeys.has(key)) {
          await db.invoices.add(inv);
          importCount++;
        }
      }
      if (backup.recycle_bin) for (const r of backup.recycle_bin) await db.recycle_bin.add(r);
      if (backup.config) for (const c of backup.config) await db.config.put(c);

      const cfg = await loadConfig();
      window._runtimeConfig = cfg;
      await refreshStats();
      await renderTable();
      await renderRecycleBin();
      updateRecycleBadge();
      toast.show("恢复完成: 导入" + importCount + "条, 跳过" + (backup.invoices.length - importCount) + "条重复", "success");
    } catch (e) { toast.show("恢复失败: " + e.message, "error"); }
  }

  // ================================================================
  // 图片预览 (CSS#7: 加载占位 + 旋转loader)
  // ================================================================
  async function previewImage(id) {
    try {
      const record = await db.invoices.get(id);
      if (!record) return;
      const decrypted = cryptoEngine.enabled ? cryptoEngine.decryptRecord(record) : record;
      if (!decrypted.image_data) { toast.show("原图不存在", "error"); return; }
      const container = document.getElementById("imagePreviewContainer");
      container.innerHTML = '<div class="preview-loader"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-loader"/></svg><span>加载图片中...</span></div>';
      openModal("imageModal");
      const img = new Image();
      img.onload = () => { container.innerHTML = ""; container.appendChild(img); };
      img.onerror = () => { container.innerHTML = '<span style="color:var(--danger)">加载失败</span>'; };
      img.src = decrypted.image_data;
      img.style.cssText = "max-width:100%;max-height:500px;object-fit:contain;display:block;";
    } catch (e) { toast.show("预览失败: " + e.message, "error"); }
  }

  // ================================================================
  // 设置面板 (Bug#3事务保护 + Bug#2配置刷新)
  // ================================================================
  function openSettings() {
    loadConfig().then(cfg => {
      document.getElementById("apiKeyInput").value = cfg.apiKey || "";
      document.getElementById("apiUrlInput").value = cfg.apiUrl || "https://api.openai.com/v1/chat/completions";
      document.getElementById("modelInput").value = cfg.model || "gpt-4o";
      document.getElementById("newDbPassword").value = "";
      updateCryptoStatus();
      openModal("settingsModal");
    }).catch(e => toast.show("加载配置失败: " + e.message, "error"));
  }
  document.getElementById("settingsBtn").addEventListener("click", openSettings);
  document.getElementById("closeSettings").addEventListener("click", () => closeModal("settingsModal"));
  document.getElementById("cancelSettings").addEventListener("click", () => closeModal("settingsModal"));

  // CSS#5: 密码显隐同步
  document.getElementById("toggleApiKey").addEventListener("click", () => {
    const input = document.getElementById("apiKeyInput");
    const svg = document.getElementById("apiKeyEyeIcon");
    if (input.type === "password") { input.type = "text"; svg.innerHTML = '<use href="#icon-eye-off"/>'; }
    else { input.type = "password"; svg.innerHTML = '<use href="#icon-eye"/>'; }
  });

  // Bug#3: 修改密码事务保护
  document.getElementById("saveSettings").addEventListener("click", safeAsync(async () => {
    const apiKey = document.getElementById("apiKeyInput").value.trim();
    const apiUrl = document.getElementById("apiUrlInput").value.trim() || "https://api.openai.com/v1/chat/completions";
    const model = document.getElementById("modelInput").value.trim() || "gpt-4o";
    const newPassword = document.getElementById("newDbPassword").value;

    // 保存API配置 Bug#2: 立即写入并同步到runtime
    await saveConfig(apiKey, apiUrl, model);
    window._runtimeConfig = { apiKey, apiUrl, model };

    // Bug#3: 修改密码事务保护
    if (newPassword) {
      if (newPassword.length < 4) { toast.show("新密码至少4位", "warning"); return; }
      try {
        // 步骤1: 用旧密码临时引擎解密全部数据到内存
        const oldKey = cryptoEngine._key;
        const tempEngine = new CryptoEngine();
        tempEngine.unlock(oldKey);

        const allInvoices = await db.invoices.toArray();
        const decryptedInvoices = allInvoices.map(r => tempEngine.decryptRecord(r));
        const allRecycle = await db.recycle_bin.toArray();
        const decryptedRecycle = allRecycle.map(r => tempEngine.decryptRecord(r));
        const oldConfig = await loadConfig();

        // 步骤2: 设置新密码
        await setMasterPassword(newPassword);
        cryptoEngine.unlock(newPassword);

        // 步骤3: 用新密码重新加密全部写回
        await db.invoices.clear();
        await db.recycle_bin.clear();
        if (decryptedInvoices.length) {
          const reEnc = decryptedInvoices.map(r => cryptoEngine.encryptRecord(r));
          await db.invoices.bulkAdd(reEnc);
        }
        if (decryptedRecycle.length) {
          const reEnc = decryptedRecycle.map(r => cryptoEngine.encryptRecord(r));
          await db.recycle_bin.bulkAdd(reEnc);
        }
        await saveConfig(oldConfig.apiKey, oldConfig.apiUrl, oldConfig.model);
        window._runtimeConfig = oldConfig;

        toast.show("密码已修改,所有数据已重新加密", "success");
      } catch (e) {
        toast.show("修改密码失败: " + e.message, "error");
        return;
      }
    }

    closeModal("settingsModal");
    toast.show("配置已保存", "success");
  }));

  document.getElementById("backupBtn").addEventListener("click", () => exportBackup());
  document.getElementById("restoreBtn").addEventListener("click", () => document.getElementById("restoreFileInput").click());
  document.getElementById("restoreFileInput").addEventListener("change", (e) => { if (e.target.files[0]) importBackup(e.target.files[0]); e.target.value = ""; });

  // ================================================================
  // Modal / Tab / 上传区 / 全局初始化
  // ================================================================
  function openModal(id) { document.getElementById(id).classList.add("modal-overlay--visible"); }
  function closeModal(id) { document.getElementById(id).classList.remove("modal-overlay--visible"); }
  document.getElementById("closeImage").addEventListener("click", () => closeModal("imageModal"));

  // CSS#3: 遮罩外部点击关闭所有弹窗
  document.querySelectorAll(".modal-overlay").forEach(overlay => {
    overlay.addEventListener("click", (e) => { if (e.target === overlay) overlay.classList.remove("modal-overlay--visible"); });
  });

  // Tab切换 (Bug#7: 切换回收站主动拉取)
  document.querySelectorAll(".tab-btn").forEach(btn => {
    btn.addEventListener("click", safeAsync(async () => {
      document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("tab-btn--active"));
      btn.classList.add("tab-btn--active");
      const tab = btn.dataset.tab;
      document.getElementById("workbenchPage").style.display = tab === "workbench" ? "block" : "none";
      document.getElementById("recyclePage").style.display = tab === "recycle" ? "block" : "none";
      // Bug#7: 切换回收站主动拉取最新数据
      if (tab === "recycle") {
        await cleanExpiredRecycleBin();
        await renderRecycleBin();
        updateRecycleBadge();
      }
    }));
  });

  // 上传区
  function initUploadZone() {
    const zone = document.getElementById("uploadZone");
    const input = document.getElementById("fileInput");
    zone.addEventListener("click", () => input.click());
    zone.addEventListener("mousemove", (e) => {
      const rect = zone.getBoundingClientRect();
      zone.style.setProperty("--mouse-x", ((e.clientX - rect.left) / rect.width * 100) + "%");
      zone.style.setProperty("--mouse-y", ((e.clientY - rect.top) / rect.height * 100) + "%");
    });
    zone.addEventListener("dragover", (e) => { e.preventDefault(); zone.classList.add("upload-zone--dragover"); });
    zone.addEventListener("dragleave", () => zone.classList.remove("upload-zone--dragover"));
    zone.addEventListener("drop", (e) => {
      e.preventDefault(); zone.classList.remove("upload-zone--dragover");
      const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith("image/"));
      if (files.length) processFiles(files);
    });
    input.addEventListener("change", () => { if (input.files.length) processFiles(Array.from(input.files)); input.value = ""; });
  }

  // ================================================================
  // 全局初始化入口
  // ================================================================
  (function initApp() {
    initDatabase();
    initUploadZone();
    initUnlockSystem();

    // Bug#7: 定期清理过期回收站(每5分钟)
    setInterval(() => {
      if (cryptoEngine.enabled) {
        cleanExpiredRecycleBin().then(async (n) => {
          if (n > 0) { await renderRecycleBin(); updateRecycleBadge(); }
        }).catch(() => {});
      }
    }, 300000);
  })();
  </script>
</body>
</html>