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/utilities.css

@@ -0,0 +1,56 @@
+/**
+ * Utilities Styles - 工具類別與響應式設計
+ * 包含快速工具類別、響應式斷點
+ */
+
+/* ==================== Utility Classes ==================== */
+/* (可按需添加工具類別，如 .mt-1, .text-center 等) */
+
+/* ==================== Responsive Design ==================== */
+@media (max-width: 768px) {
+    /* Form Grid */
+    .form-grid,
+    .form-grid.three-cols {
+        grid-template-columns: 1fr;
+    }
+
+    /* Form Actions */
+    .form-actions {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .action-buttons {
+        width: 100%;
+        flex-direction: column;
+    }
+
+    .btn {
+        justify-content: center;
+    }
+
+    /* Module Selector */
+    .module-selector {
+        flex-direction: column;
+    }
+
+    .module-btn {
+        min-width: 100%;
+    }
+
+    /* User Info Bar */
+    .user-info-bar {
+        flex-direction: column;
+        gap: 12px;
+        text-align: center;
+    }
+
+    .user-info {
+        justify-content: center;
+    }
+
+    .logout-btn {
+        width: 100%;
+        justify-content: center;
+    }
+}