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/target-table/spec.md

@@ -24,11 +24,11 @@ Dashboard SHALL 按 group 字段将目标分组，每个分组渲染一个独立
 - **THEN** 分组标题 SHALL 显示 "默认分组"
 
 ### Requirement: 表格列定义
-每个分组的 PrimaryTable SHALL 包含状态、名称、类型、可用率、最近状态条、延迟、间隔 7 列，不含分组列（同组内冗余）。
+每个分组的 PrimaryTable SHALL 包含状态、名称、类型、可用率、最近状态条、延迟、间隔 7 列，不含分组列（同组内冗余）。列渲染不使用内联 style。
 
 #### Scenario: 状态列
 - **WHEN** 表格渲染
-- **THEN** 状态列 SHALL 使用 StatusDot 组件渲染，fixed="left"，宽度 80px，居中对齐，支持筛选（UP/DOWN/全部）
+- **THEN** 状态列 SHALL 使用 StatusDot 组件渲染，标题显示"#"，宽度 60px，fixed="left"，居中对齐，支持筛选（UP/DOWN/全部）。StatusDot SHALL 通过 CSS 类（`.status-dot--up` / `.status-dot--down`）控制颜色，不使用内联 style
 
 #### Scenario: 名称列
 - **WHEN** 表格渲染
@@ -40,15 +40,15 @@ Dashboard SHALL 按 group 字段将目标分组，每个分组渲染一个独立
 
 #### Scenario: 可用率列
 - **WHEN** 表格渲染
-- **THEN** 可用率列 SHALL 使用 TDesign Progress 组件（theme=line, size=small）渲染，颜色按可用率数值每 10% 一档：0-10% 最红（#d54941），每升高 10% 色阶偏移一档，经过橙色区间，90-100% 最绿（#3dba60），label 显示百分比数值，支持排序（升序优先，最差排最前）
+- **THEN** 可用率列 SHALL 使用 TDesign Progress 组件（theme=line, size=small）渲染，颜色通过 CSS 自定义属性 `--avail-N`（基于项目自定义色值）控制，每 10% 一档，label 显示百分比数值，支持排序（升序优先，最差排最前）。color-threshold 函数 SHALL 返回 CSS 自定义属性引用而非硬编码色值
 
 #### Scenario: 最近状态列
 - **WHEN** 表格渲染
-- **THEN** 最近状态列 SHALL 使用 StatusBar 组件渲染 30 格采样色块，宽度 220px，色块使用 flex:1 自适应列宽
+- **THEN** 最近状态列 SHALL 使用 StatusBar 组件渲染 30 格采样色块，宽度 220px。StatusBar SHALL 通过 CSS 类（`.status-bar-block--up` / `.status-bar-block--down` / `.status-bar-block--empty`）控制色块颜色，不使用内联 style
 
 #### Scenario: 延迟列
 - **WHEN** 表格渲染
-- **THEN** 延迟列 SHALL 显示最近一次检查的延迟毫秒数，右对齐，颜色根据阈值变化：≤100ms 使用 --td-success-color、100-500ms 使用 --td-warning-color、>500ms 使用 --td-error-color，无数据显示"-"，支持数值排序
+- **THEN** 延迟列 SHALL 显示最近一次检查的延迟毫秒数，右对齐。颜色 SHALL 通过 CSS 类实现：≤100ms 使用 `.latency-ok`、100-500ms 使用 `.latency-warn`、>500ms 使用 `.latency-error`。无数据 SHALL 使用 `.text-disabled` 类显示 "-"，数值 SHALL 使用 `.tabular-nums` 类等宽显示。不使用内联 style
 
 #### Scenario: 间隔列
 - **WHEN** 表格渲染
@@ -62,11 +62,15 @@ Dashboard SHALL 按 group 字段将目标分组，每个分组渲染一个独立
 - **THEN** 每个分组表格 SHALL 默认按状态降序排列，DOWN 目标排在同组最前面
 
 ### Requirement: DOWN 行视觉强化
-表格中状态为 DOWN 的行 SHALL 具有视觉区分。
+表格中状态为 DOWN 的行 SHALL 具有视觉区分，使用安全 CSS 选择器实现。
 
 #### Scenario: DOWN 行背景色
 - **WHEN** 目标最近一次检查 matched=false
-- **THEN** 该行 SHALL 使用浅红色背景（--td-error-color-light），与正常行形成视觉区分
+- **THEN** 该行 SHALL 通过 `.t-table tr.row-down` CSS 选择器获得浅红色背景（`--td-error-color-light`），不使用 `!important`
+
+#### Scenario: DOWN 行 hover 状态
+- **WHEN** 鼠标悬停在 DOWN 行上
+- **THEN** 行背景 SHALL 通过 `.t-table--hoverable tbody tr.row-down:hover` 选择器显示 hover 状态色，与正常行 hover 效果协调
 
 ### Requirement: 行点击交互
 表格行 SHALL 支持点击打开目标详情 Drawer。