feat(theme): CSS 变量重构为暗色/浅色双主题

将 :root 硬编码的深色变量拆分为 [data-theme="light"] 和 [data-theme="dark"]
两套主题块，新增导航栏、骨架屏、Toast 等预留变量，添加页面入场动画。

frontend/src/styles/global.css

@@ -1,4 +1,30 @@
-:root {
+[data-theme="light"] {
+  --bg-primary: #f8f9fa;
+  --bg-secondary: #ffffff;
+  --bg-card: #ffffff;
+  --bg-input: #f1f3f5;
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --text-muted: #adb5bd;
+  --accent: #e94560;
+  --accent-hover: #d63851;
+  --accent-dim: rgba(233, 69, 96, 0.1);
+  --success: #2b8a3e;
+  --warning: #e67700;
+  --error: #c92a2a;
+  --border: #dee2e6;
+  --radius: 8px;
+  --radius-lg: 12px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --nav-bg: #ffffff;
+  --nav-border: #e9ecef;
+  --skeleton-base: #e9ecef;
+  --skeleton-shine: #f8f9fa;
+  --toast-bg: #ffffff;
+}
+
+[data-theme="dark"] {
   --bg-primary: #1a1a2e;
   --bg-secondary: #16213e;
   --bg-card: #0f3460;
@@ -15,6 +41,13 @@
   --border: #2a2a4a;
   --radius: 8px;
   --radius-lg: 12px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --nav-bg: #16213e;
+  --nav-border: #2a2a4a;
+  --skeleton-base: #2a2a4a;
+  --skeleton-shine: #3a3a5a;
+  --toast-bg: #1e1e3a;
 }
 
 *,
@@ -32,11 +65,13 @@ body {
   color: var(--text-primary);
   line-height: 1.6;
   min-height: 100vh;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 a {
   color: var(--accent);
   text-decoration: none;
+  transition: color 0.2s ease;
 }
 
 a:hover {
@@ -60,13 +95,14 @@ select {
   border-radius: var(--radius);
   padding: 10px 14px;
   outline: none;
-  transition: border-color 0.2s;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 input:focus,
 textarea:focus,
 select:focus {
   border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-dim);
 }
 
 button {
@@ -75,7 +111,7 @@ button {
   border-radius: var(--radius);
   padding: 10px 20px;
   font-weight: 600;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
 }
 
 button:disabled {
@@ -92,6 +128,10 @@ button:disabled {
   background: var(--accent-hover);
 }
 
+.btn-primary:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
 .btn-secondary {
   background: transparent;
   color: var(--text-primary);
@@ -101,6 +141,11 @@ button:disabled {
 .btn-secondary:hover:not(:disabled) {
   border-color: var(--accent);
   color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.btn-secondary:active:not(:disabled) {
+  transform: scale(0.97);
 }
 
 .card {
@@ -108,6 +153,8 @@ button:disabled {
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 24px;
+  box-shadow: var(--shadow);
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
 .container {
@@ -115,3 +162,26 @@ button:disabled {
   margin: 0 auto;
   padding: 0 20px;
 }
+
+.table-row-hover {
+  transition: background-color 0.15s ease;
+}
+
+.table-row-hover:hover {
+  background: var(--accent-dim);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.page-enter {
+  animation: fadeIn 0.3s ease forwards;
+}