## ADDED Requirements

### Requirement: Card containers SHALL use unified spacing values

所有卡片容器必须使用统一的 CSS 变量来定义内边距（padding），确保视觉一致性。

#### Scenario: Standard card padding
- **WHEN** 渲染任何卡片组件
- **THEN** 卡片的 padding 必须使用 `var(--spacing-xl)`（16px）

#### Scenario: Gauge card compact padding
- **WHEN** 渲染仪表盘类型的卡片（gauge card）
- **THEN** 卡片的 padding 可以使用 `var(--spacing-lg)`（12px）以适应紧凑布局

### Requirement: Card containers SHALL use unified border radius

所有卡片容器必须使用统一的 CSS 变量来定义圆角（border-radius），保持设计语言一致。

#### Scenario: Standard card border radius
- **WHEN** 渲染任何卡片组件
- **THEN** 卡片的 border-radius 必须使用 `var(--radius-lg)`（12px）

### Requirement: Card containers SHALL use unified background color

所有卡片容器必须使用统一的背景色变量，确保在明暗模式下自动适配。

#### Scenario: Card background in light mode
- **WHEN** 应用处于明亮模式
- **THEN** 卡片的 background 必须使用 `var(--bg-secondary)`

#### Scenario: Card background in dark mode
- **WHEN** 应用处于暗色模式
- **THEN** 卡片的 background 必须使用 `var(--bg-secondary)` 并自动适配为暗色系背景

### Requirement: Card containers SHALL use unified shadow

所有卡片容器必须使用统一的阴影变量，提供微妙的层次感。

#### Scenario: Standard card shadow
- **WHEN** 渲染任何卡片组件
- **THEN** 卡片的 box-shadow 必须使用 `var(--shadow-sm)`

#### Scenario: Card shadow in dark mode
- **WHEN** 应用处于暗色模式
- **THEN** 卡片的阴影必须根据暗色模式自动调整透明度和颜色

### Requirement: Card spacing SHALL be consistent across pages

页面级别的卡片布局必须使用统一的外边距（margin）和间距（gap），确保三个页面的视觉韵律一致。

#### Scenario: Card bottom margin
- **WHEN** 在页面中垂直排列多个卡片
- **THEN** 卡片之间的间距必须使用 `var(--spacing-xl)`（16px）或通过父容器的 gap 属性设置

#### Scenario: Page container padding
- **WHEN** 渲染包含卡片的页面容器
- **THEN** 容器的左右 padding 必须使用 `var(--spacing-xl)`（16px）
- **AND** 容器的顶部 padding 可以使用 `var(--spacing-md)`（12px）以紧跟 header
- **AND** 容器的底部 padding 应使用 `var(--spacing-3xl)`（24px）以预留安全区域

### Requirement: Hard-coded style values MUST be replaced

现有代码中的硬编码样式值必须被对应的 CSS 变量替换，以便集中管理和未来维护。

#### Scenario: Replace hard-coded padding
- **WHEN** 发现卡片使用硬编码的 `padding: 16px` 或 `padding: 12px`
- **THEN** 必须替换为 `padding: var(--spacing-xl)` 或 `padding: var(--spacing-lg)`

#### Scenario: Replace hard-coded border-radius
- **WHEN** 发现卡片使用硬编码的 `border-radius: 12px`
- **THEN** 必须替换为 `border-radius: var(--radius-lg)`

#### Scenario: Replace hard-coded margins and gaps
- **WHEN** 发现卡片或容器使用硬编码的 `margin-bottom: 12px` 或 `gap: 12px`
- **THEN** 必须替换为 `margin-bottom: var(--spacing-xl)` 或 `gap: var(--spacing-xl)`

### Requirement: Common card class SHALL be consistently applied

所有符合标准卡片样式的元素必须应用 `.common-card` 类或内联使用相同的 CSS 变量组合。

#### Scenario: Apply common-card class
- **WHEN** 创建或修改卡片组件
- **THEN** 卡片的根元素应添加 `class="common-card"` 或在 scoped style 中定义 `.common-card` 样式

#### Scenario: Inline CSS variable usage
- **WHEN** 不使用 `.common-card` 类时
- **THEN** 必须确保使用与 `.common-card` 相同的 CSS 变量组合（background, border-radius, padding, box-shadow）

### Requirement: Visual regression testing MUST verify style consistency

样式统一后必须通过视觉测试验证三个页面的卡片表现一致。

#### Scenario: Test in light mode
- **WHEN** 应用处于明亮模式
- **THEN** 日历、统计、预算页面的卡片样式必须在视觉上保持一致（相同的边距、圆角、阴影）

#### Scenario: Test in dark mode
- **WHEN** 应用处于暗色模式
- **THEN** 日历、统计、预算页面的卡片样式必须在视觉上保持一致（相同的边距、圆角、阴影，且背景色和阴影自动适配）

#### Scenario: Test on different screen sizes
- **WHEN** 在不同移动设备屏幕尺寸上查看（如 iPhone SE, iPhone 14 Pro, iPad mini）
- **THEN** 卡片布局不能出现溢出、内容截断或错位问题