style(frontend): 添加全局样式和 CSS 变量

- 添加 variables.css，定义颜色、字体等 CSS 变量
- 添加 global.css，全局样式重置和通用样式类

设计风格参考原型暗色主题：
- 背景色：#0E1117（深色）、#151922（面板）
- 强调色：#3FE0A5（绿色）
- 字体：IBM Plex Sans + IBM Plex Mono

frontend/src/styles/global.css

@@ -0,0 +1,132 @@
+@import './variables.css';
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg-deep);
+  color: var(--text-hi);
+  font-family: var(--sans);
+  font-size: 14px;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #2A3140;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font-family: var(--sans);
+  cursor: pointer;
+}
+
+/* 通用样式类 */
+.mono {
+  font-family: var(--mono);
+}
+
+/* 状态指示器 */
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 6px;
+}
+
+.dot.ok {
+  background: var(--accent);
+  box-shadow: 0 0 6px #3FE0A599;
+}
+
+.dot.warn {
+  background: var(--warn);
+}
+
+.dot.err {
+  background: var(--err);
+}
+
+.dot.idle {
+  background: var(--text-dim);
+}
+
+/* 状态文本 */
+.status-text {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.status-text.ok {
+  color: var(--accent);
+}
+
+.status-text.warn {
+  color: var(--warn);
+}
+
+.status-text.err {
+  color: var(--err);
+}
+
+.status-text.idle {
+  color: var(--text-dim);
+}
+
+/* 标签 */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--line);
+  color: var(--text-mid);
+}
+
+/* 进度条 */
+.bar-wrap {
+  width: 90px;
+  height: 5px;
+  background: #262C38;
+  border-radius: 3px;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+
+.bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  background: var(--accent);
+}
+
+.bar-fill.warn {
+  background: var(--warn);
+}
+
+.bar-fill.err {
+  background: var(--err);
+}

frontend/src/styles/variables.css

@@ -0,0 +1,31 @@
+:root {
+  /* 背景色 */
+  --bg-deep: #0E1117;
+  --bg-panel: #151922;
+  --bg-panel-2: #1B202B;
+
+  /* 边框色 */
+  --line: #262C38;
+  --line-soft: #1E2330;
+
+  /* 文字色 */
+  --text-hi: #E8EBF1;
+  --text-mid: #9AA3B5;
+  --text-dim: #5C657A;
+
+  /* 强调色 */
+  --accent: #3FE0A5;
+  --accent-dim: #1F6B52;
+
+  /* 状态色 */
+  --warn: #F2B544;
+  --err: #F2554F;
+  --info: #5B9DF2;
+
+  /* 圆角 */
+  --radius: 6px;
+
+  /* 字体 */
+  --mono: 'IBM Plex Mono', monospace;
+  --sans: 'IBM Plex Sans', sans-serif;
+}