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 写入前端样式开发规范

src/web/constants/color-threshold.ts

@@ -1,24 +1,4 @@
-const AVAILABILITY_COLORS = [
-  "#d54941", // 0-10%
-  "#d96241", // 10-20%
-  "#e37318", // 20-30%
-  "#e89318", // 30-40%
-  "#d9a818", // 40-50%
-  "#b8b020", // 50-60%
-  "#8dba30", // 60-70%
-  "#6dba3f", // 70-80%
-  "#4dba50", // 80-90%
-  "#3dba60", // 90-100%
-];
-
 export function getAvailabilityProgressColor(availability: number): string {
   const index = Math.min(Math.floor(availability / 10), 9);
-  return AVAILABILITY_COLORS[index]!;
-}
-
-
-export function getLatencyColor(ms: number): string {
-  if (ms <= 100) return "var(--td-success-color)";
-  if (ms <= 500) return "var(--td-warning-color)";
-  return "var(--td-error-color)";
+  return `var(--avail-${index})`;
 }

src/web/constants/target-table-columns.tsx

@@ -4,15 +4,15 @@ import type { TargetStatus } from "../../shared/api";
 import { StatusDot } from "../components/StatusDot";
 import { StatusBar } from "../components/StatusBar";
 import { getTargetTypeDisplay } from "./target-type-display";
-import { getAvailabilityProgressColor, getLatencyColor } from "./color-threshold";
+import { getAvailabilityProgressColor } from "./color-threshold";
 import { availabilitySorter, latencySorter, nameSorter } from "./target-table-sorters";
 import { statusFilter, typeFilter } from "./target-table-filters";
 
 export const TARGET_TABLE_COLUMNS: PrimaryTableCol<TargetStatus>[] = [
   {
     colKey: "latestCheck.matched",
-    title: "状态",
-    width: 80,
+    title: "#",
+    width: 60,
     fixed: "left",
     align: "center",
     filter: statusFilter,
@@ -72,9 +72,9 @@ export const TARGET_TABLE_COLUMNS: PrimaryTableCol<TargetStatus>[] = [
     sortType: "all",
     cell: ({ row }: PrimaryTableCellParams<TargetStatus>) => {
       const ms = row.latestCheck?.durationMs;
-      if (ms === null || ms === undefined) return <span style={{ color: "var(--td-text-color-disabled)" }}>-</span>;
-      const color = getLatencyColor(ms);
-      return <span style={{ color, fontVariantNumeric: "tabular-nums" }}>{Math.round(ms)}ms</span>;
+      if (ms === null || ms === undefined) return <span className="text-disabled">-</span>;
+      const colorClass = ms <= 100 ? "latency-ok" : ms <= 500 ? "latency-warn" : "latency-error";
+      return <span className={`${colorClass} tabular-nums`}>{Math.round(ms)}ms</span>;
     },
   },
   {