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/components/StatusBar.tsx

@@ -10,14 +10,11 @@ export function StatusBar({ samples }: StatusBarProps) {
       blocks.push(
         <span
           key={i}
-          className="status-bar-block"
-          style={{ background: sample.up ? "var(--td-success-color)" : "var(--td-error-color)" }}
+          className={`status-bar-block ${sample.up ? "status-bar-block--up" : "status-bar-block--down"}`}
         />,
       );
     } else {
-      blocks.push(
-        <span key={i} className="status-bar-block" style={{ background: "var(--td-bg-color-component-disabled)" }} />,
-      );
+      blocks.push(<span key={i} className="status-bar-block status-bar-block--empty" />);
     }
   }