# 二维码生成器夜间模式完整适配 Spec

## Why
通过逐行审查 CSS 与 TSX 元素的对应关系，发现当前暗色模式存在多处遗漏：hero 区白色径向渐变叠加层在暗色下过亮、粒子效果未适配、hover 阴影过于刺眼、色块选中态边框不协调等问题。

## What Changes
- 修复 `.qr-generator-hero::before` 白色径向渐变叠加层
- 适配 `.qr-hero-icon` 和 `.qr-particle` 暗色透明度
- 降低生成/下载按钮 hover 阴影亮度
- 修复 `.qr-color-swatch.selected` 暗色边框
- 修复 `.qr-beautify-modal .ant-modal-body` 暗色背景确保生效

## Impact
- Affected specs: qrcode-dark-mode, qrcode-logo-and-styles, qrcode-fixes-and-improvements
- Affected code: `src/pages/QRCodeGenerator/QRCodeGenerator.css`

## ADDED Requirements

### Requirement: Hero 区暗色渐变叠加层
系统 SHALL 在暗色模式下降低 hero 区 `::before` 伪元素的白色径向渐变亮度。

#### Scenario: 暗色 Hero 叠加层
- **WHEN** 系统处于暗色模式
- **THEN** `.qr-generator-hero::before` 中的白色径向渐变 `rgba(255,255,255,0.1)` 和 `rgba(255,255,255,0.08)` 应降低至 `rgba(255,255,255,0.04)` 和 `rgba(255,255,255,0.03)`

### Requirement: Hero 图标暗色适配
系统 SHALL 在暗色模式下降低 hero 图标的透明白色背景亮度。

#### Scenario: 暗色 Hero 图标
- **WHEN** 系统处于暗色模式
- **THEN** `.qr-hero-icon` 背景 `rgba(255,255,255,0.2)` → `rgba(255,255,255,0.08)`，边框 `rgba(255,255,255,0.3)` → `rgba(255,255,255,0.15)`

### Requirement: 粒子暗色适配
系统 SHALL 在暗色模式下降低粒子背景亮度。

#### Scenario: 暗色粒子
- **WHEN** 系统处于暗色模式
- **THEN** `.qr-particle` 背景 `rgba(255,255,255,0.12)` → `rgba(255,255,255,0.05)`

### Requirement: 按钮 hover 阴影暗色柔和化
系统 SHALL 在暗色模式下降低自定义按钮 hover 阴影亮度。

#### Scenario: 生成按钮 hover 暗色
- **WHEN** 系统处于暗色模式且 hover 生成按钮
- **THEN** box-shadow `rgba(102,126,234,0.35)` → `rgba(102,126,234,0.18)`

#### Scenario: 下载按钮 hover 暗色
- **WHEN** 系统处于暗色模式且 hover 下载按钮
- **THEN** box-shadow `rgba(16,185,129,0.35)` → `rgba(16,185,129,0.18)`

### Requirement: 色块选中态暗色适配
系统 SHALL 在暗色模式下调整色块选中态的边框和阴影颜色。

#### Scenario: 暗色选中色块
- **WHEN** 系统处于暗色模式且色块被选中
- **THEN** `.qr-color-swatch.selected` box-shadow `rgba(102,126,234,0.25)` → `rgba(99,102,241,0.2)`

### Requirement: 弹窗 body 暗色背景
系统 SHALL 确保弹窗 body 区域在暗色模式下有正确的暗色背景。

#### Scenario: 弹窗 body 暗色
- **WHEN** 系统处于暗色模式且美化弹窗打开
- **THEN** `.ant-modal-body` 背景为 `#1e293b`，`.ant-modal-content` 确保 `overflow: hidden` 不影响背景渲染