refactor: 全面重构前端样式，消除内联 style 和硬编码色值，统一 TDesign 规范

- 重写 styles.css：CSS 变量化可用率色阶、状态色类、工具类、安全选择器
- 组件改造：StatusDot/StatusBar/TargetDetailDrawer/GroupHeader 等改用 CSS 类和 Typography
- color-threshold 移除 getLatencyColor 死代码，保留 getAvailabilityProgressColor 返回 CSS 变量
- target-table-columns 状态列和延迟列切换为 CSS 类
- 新增 css-utility-classes spec，更新 4 个 main specs（probe/card/table/drawer）
- README 和 config.yaml 写入前端样式开发规范

openspec/specs/card-dashboard/spec.md

@@ -5,7 +5,7 @@
 ## Requirements
 
 ### Requirement: 分组卡片布局
-Dashboard SHALL 按 group 字段将目标分组，每个分组包含带统计的分组标题和独立 TDesign PrimaryTable 表格。
+Dashboard SHALL 按 group 字段将目标分组，每个分组包含带统计的分组标题和独立 TDesign PrimaryTable 表格。分组标题使用 TDesign Typography 组件渲染。
 
 #### Scenario: 按分组展示目标
 - **WHEN** 用户打开 Dashboard 页面
@@ -13,7 +13,7 @@ Dashboard SHALL 按 group 字段将目标分组，每个分组包含带统计的
 
 #### Scenario: 分组标题带统计标签
 - **WHEN** 页面渲染某个分组
-- **THEN** 分组标题 SHALL 使用 TDesign Space + Tag 组件显示分组名称和三个标签：总数（theme=primary, variant=light）、正常数（theme=success, variant=light）、异常数（theme=danger, variant=light），标签仅显示数字
+- **THEN**       分组标题 SHALL 使用 CSS flex 布局（`display:flex; align-items:center`）显示分组名称和三个标签：总数（theme=primary, variant=light）、正常数（theme=success, variant=light）、异常数（theme=danger, variant=light），标签仅显示数字。分组名称 SHALL 使用 TDesign Typography.Title 组件（level="h4"）渲染，不使用原生 h2 标签和内联 style。Typography.Title 默认 margin SHALL 通过 CSS 覆盖归零
 
 #### Scenario: 分组统计标签提示
 - **WHEN** 鼠标悬停在分组统计标签上
@@ -23,6 +23,10 @@ Dashboard SHALL 按 group 字段将目标分组，每个分组包含带统计的
 - **WHEN** 分组名称为 "default"
 - **THEN** 分组标题 SHALL 显示 "默认分组"
 
+#### Scenario: 分组标题间距
+- **WHEN** 分组标题渲染
+- **THEN** 标题与表格之间的间距 SHALL 通过 CSS 类控制，不使用内联 style 的 marginBottom
+
 ### Requirement: 响应式卡片网格
 Dashboard SHALL 使用 TDesign PrimaryTable 展示每个分组的目标，表格宽度自适应容器。
 
@@ -70,7 +74,7 @@ Dashboard SHALL 使用 TDesign PrimaryTable 展示每个分组的目标，表格
 - **THEN** 间隔列 SHALL 显示检查间隔（如 "5s"、"30s"），居中对齐，宽度 72px
 
 ### Requirement: 卡片交互
-表格行 SHALL 支持 hover 效果和点击打开 Drawer。
+表格行 SHALL 支持 hover 效果和点击打开 Drawer。cursor 样式通过 CSS 类实现。
 
 #### Scenario: 行 hover 效果
 - **WHEN** 鼠标悬停在表格行上
@@ -79,3 +83,7 @@ Dashboard SHALL 使用 TDesign PrimaryTable 展示每个分组的目标，表格
 #### Scenario: 行点击打开详情
 - **WHEN** 用户点击某个目标表格行
 - **THEN** 系统 SHALL 打开该目标的详情 Drawer
+
+#### Scenario: 行 cursor 样式
+- **WHEN** 表格渲染
+- **THEN** PrimaryTable SHALL 通过 CSS 类 `.clickable-table` 设置 cursor: pointer，不使用内联 style