refactor: 分離 CSS 為模組化檔案

- 建立 styles 目錄
- 分離 CSS 為 5 個模組：
  * base.css - CSS 變數、Reset、全域樣式
  * layout.css - 容器、Header、模組切換器
  * components.css - 按鈕、表單、卡片、Toast、Modal
  * modules.css - 模組專屬樣式（預留）
  * utilities.css - 工具類別與響應式設計

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

styles/base.css

@@ -0,0 +1,78 @@
+/**
+ * Base Styles - 基礎樣式
+ * 包含 CSS 變數定義、CSS Reset、全域樣式
+ */
+
+/* ==================== CSS Variables ==================== */
+:root {
+    /* 主題色 */
+    --primary: #1a5276;
+    --primary-light: #2980b9;
+    --primary-dark: #0e3a53;
+    --accent: #e67e22;
+    --accent-light: #f39c12;
+    --green: #27ae60;
+    --green-dark: #1e8449;
+
+    /* 背景色 */
+    --bg-main: #f4f6f9;
+    --bg-card: #ffffff;
+    --border: #d5dbdf;
+
+    /* 文字顏色 */
+    --text-primary: #2c3e50;
+    --text-secondary: #5d6d7e;
+
+    /* 語義化顏色 */
+    --success: #27ae60;
+    --warning: #f39c12;
+    --danger: #e74c3c;
+
+    /* 陰影與圓角 */
+    --shadow: 0 4px 20px rgba(26, 82, 118, 0.12);
+    --radius: 8px;
+}
+
+/* ==================== CSS Reset ==================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* ==================== Global Styles ==================== */
+body {
+    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: linear-gradient(135deg, #e8f4fc 0%, #f4f6f9 100%);
+    min-height: 100vh;
+    color: var(--text-primary);
+}
+
+/* ==================== Animations ==================== */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes modalIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}