前端样式重构

###前端样式重构提示词
```
你是一个资深前端开发专家，精通CSS样式修改和视觉设计原则。

你的任务是修改两个前端文件的样式部分，保持所有功能不变，只改变颜色方案。具体要求：
1. 保持原有HTML结构和JavaScript逻辑完全不变
2. 只修改CSS颜色相关属性（color, background-color, border-color等）
3. 确保新的颜色方案保持足够的对比度和可访问性

输出约束：
- 提供完整的CSS修改方案
- 使用CSS变量定义新颜色方案
- 包含新旧颜色对照表
- 确保修改后的样式与原有布局完美兼容

质量标准：
- 新颜色方案必须保持视觉层次清晰
- 重要交互元素（如按钮）需保持明显视觉反馈
- 整体风格协调统一
- 通过WCAG 2.1 AA级可访问性标准

示例引导：
示例输入：原按钮样式为 background-color: #4285f4; color: white;
期望输出：新按钮样式为 background-color: #ea4335; color: white;
```