refactor: 目标卡片改为垂直三层布局

- 卡片宽度从 280px 调整为 270px，确保 StatusBar 30 个色块完整显示
- 布局从水平两行改为垂直三层：标题行、StatusBar、Sparkline 各占一行
- Sparkline 从固定 80x32px 改为占满宽度（约 238px x 40px）
- 三层之间使用 12px gap 间距
- 类名重构：card-row-1 -> card-header，拆分 card-row-2 为 card-status-bar 和 card-sparkline

openspec/specs/card-dashboard/spec.md

@@ -28,7 +28,7 @@ Dashboard SHALL 使用固定宽度的卡片配合 Flexbox 流动布局，容器
 
 #### Scenario: 卡片固定宽度
 - **WHEN** 页面渲染卡片（包括 Summary Cards 和 Target Cards）
-- **THEN** 每个卡片 SHALL 固定宽度 280px，使用 `flex-shrink: 0` 防止收缩
+- **THEN** 每个卡片 SHALL 固定宽度 270px，使用 `flex-shrink: 0` 防止收缩
 
 #### Scenario: 流动式布局
 - **WHEN** 视口宽度变化
@@ -43,11 +43,11 @@ Dashboard SHALL 使用固定宽度的卡片配合 Flexbox 流动布局，容器
 - **THEN** 两种卡片网格 SHALL 使用相同的 gap 间距（16px）
 
 ### Requirement: 目标卡片内容
-每个目标卡片 SHALL 展示目标名称、当前状态、类型标签、状态条和迷你耗时趋势线。
+每个目标卡片 SHALL 展示目标名称、当前状态、类型标签、状态条和迷你耗时趋势线，采用垂直三层布局。
 
-#### Scenario: 卡片第一行内容
+#### Scenario: 卡片第一层内容
 - **WHEN** 卡片渲染
-- **THEN** 卡片第一行 SHALL 展示状态指示圆点（UP 绿色 / DOWN 红色）、目标名称和类型标签（HTTP / Command）
+- **THEN** 卡片第一层 SHALL 展示状态指示圆点（UP 绿色 / DOWN 红色）、目标名称和类型标签（HTTP / Command）
 
 #### Scenario: 卡片状态指示圆点
 - **WHEN** 目标最近一次拨测 matched=true
@@ -55,13 +55,17 @@ Dashboard SHALL 使用固定宽度的卡片配合 Flexbox 流动布局，容器
 - **WHEN** 目标最近一次拨测 matched=false
 - **THEN** 卡片状态圆点 SHALL 显示为红色
 
-#### Scenario: 卡片状态条可视化
+#### Scenario: 卡片第二层状态条
 - **WHEN** 卡片渲染且 recentSamples 数据可用
-- **THEN** 卡片 SHALL 展示一条 30 方块的状态条，每个采样点为一个色块：UP 显示绿色（#1fbf75），DOWN 显示红色（#e5484d），无数据显示灰色（#e2e8f0）
+- **THEN** 卡片第二层 SHALL 独占一行展示状态条，包含 30 个色块，每个采样点为一个色块：UP 显示绿色（#1fbf75），DOWN 显示红色（#e5484d），无数据显示灰色（#e2e8f0）
 
-#### Scenario: 卡片迷你耗时趋势线
+#### Scenario: 卡片第三层迷你耗时趋势线
 - **WHEN** 卡片渲染且 recentSamples 中有 durationMs 数据
-- **THEN** 卡片 SHALL 展示基于 recharts 的迷你折线图（80x32px），展示最近 30 次检查的耗时趋势
+- **THEN** 卡片第三层 SHALL 独占一行展示基于 recharts 的迷你折线图，宽度占满卡片内容区（约 238px），高度 40px，展示最近 30 次检查的耗时趋势
+
+#### Scenario: 卡片垂直布局间距
+- **WHEN** 卡片渲染
+- **THEN** 卡片三层之间 SHALL 使用 12px 的间距（gap）
 
 ### Requirement: 卡片交互
 卡片 SHALL 支持 hover 效果和点击打开模态框。