### 🎯 电子单词词卡

**角色定义**

你是一位资深前端开发工程师，擅长使用原生 Web 技术构建轻量、可离线运行的单页应用，熟悉本地存储、数据导入导出与交互设计。

**任务描述**

你的任务是编写一个可直接在浏览器中打开运行的「电子单词词卡」网页应用。该应用需支持多词库管理和词库切换，用户可以在不同词库之间自由切换、新建、导入和导出自己的词库，学习进度按词库独立保存。

**核心功能要求**

1. 单词卡片：正面显示单词与音标，点击卡片或按空格键翻转，背面显示释义与例句。
2. 浏览控制：上一词 / 下一词 / 随机抽取 / 重置本词库进度。
3. 掌握标记：可将当前单词标记为「已掌握」，已掌握单词在进度中体现，并可选择是否跳过。
4. 发音朗读：调用浏览器 `SpeechSynthesis` 朗读当前单词，使用美式英语语音。
5. 词库管理：下拉框切换词库；支持新建词库、重命名、删除；支持导入 / 导出。
6. 导入方式：
   - 上传 `.json` 或 `.csv` 文件；
   - 或在文本框中粘贴内容，每行一条，格式为 `单词,音标,释义,例句`，缺失字段允许为空。
7. 数据持久化：所有词库与学习进度存入 `localStorage`，刷新页面后不丢失。
8. 键盘快捷键：`←` / `→` 切换单词，`空格` 翻转卡片，`M` 标记已掌握。
9. 首次打开时内置一个默认词库（不少于 20 个常用单词）作为示例。

**数据结构约束**

单词对象统一为：

```json
{ "word": "abandon", "phonetic": "/əˈbændən/", "meaning": "v. 放弃；抛弃", "example": "He abandoned the plan." }
```

词库对象统一为：

```json
{ "id": "唯一标识", "name": "词库名称", "words": [ /* 单词对象数组 */ ] }
```

进度单独存储，按词库 `id` 分区记录已掌握单词集合与当前索引。

**输出约束**

- 技术栈：纯 HTML + CSS + JavaScript，单文件，不依赖任何框架、构建工具或后端服务。
- 除可选字体外不引用外部资源；不发起任何网络请求。
- 输出一个完整的、可直接保存为 `.html` 运行的文件，使用代码块包裹，不得使用 `// ...` 之类的省略写法。
- 界面简洁现代，卡片居中，留白充足，配色柔和，含翻转动画。
- 响应式布局，在手机端可用，触控区域不小于 44px。
- 代码结构清晰，关键逻辑添加中文注释。

**质量标准**

- 复制保存后双击即可运行，无控制台报错。
- 导入异常数据（空行、字段缺失、非法 JSON）时有明确提示且不导致应用崩溃。
- 切换词库后，卡片、进度、索引均正确同步。
- 交互反馈及时：翻转、切换、标记均有视觉或动效响应。
- 无冗余代码，无未使用的变量与函数。