diff --git a/frontend/src/assets/design.css b/frontend/src/assets/design.css
new file mode 100644
index 0000000..c7bf120
--- /dev/null
+++ b/frontend/src/assets/design.css
@@ -0,0 +1,348 @@
+:root {
+  /* 主色调 */
+  --gg-primary: #6366f1;
+  --gg-primary-light: #818cf8;
+  --gg-primary-dark: #4f46e5;
+  --gg-accent: #a855f7;
+  --gg-accent-light: #c084fc;
+
+  /* 背景色 */
+  --gg-bg: #0f172a;
+  --gg-bg-card: #1e293b;
+  --gg-bg-elevated: #334155;
+  --gg-bg-hover: #334155;
+
+  /* 文字色 */
+  --gg-text: #f1f5f9;
+  --gg-text-secondary: #94a3b8;
+  --gg-text-muted: #64748b;
+
+  /* 边框 */
+  --gg-border: #334155;
+  --gg-border-light: #475569;
+
+  /* 状态色 */
+  --gg-success: #22c55e;
+  --gg-danger: #ef4444;
+  --gg-warning: #f59e0b;
+  --gg-info: #3b82f6;
+
+  /* 圆角 */
+  --gg-radius-sm: 8px;
+  --gg-radius-md: 12px;
+  --gg-radius-lg: 16px;
+  --gg-radius-xl: 20px;
+
+  /* 阴影 */
+  --gg-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  --gg-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
+
+  /* 渐变 */
+  --gg-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+  --gg-gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  --gg-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+
+  /* ── Element Plus 覆盖 ── */
+  --el-color-primary: #6366f1;
+  --el-color-primary-light-3: #818cf8;
+  --el-color-primary-light-5: #a5b4fc;
+  --el-color-primary-light-7: #c7d2fe;
+  --el-color-primary-light-9: #312e81;
+  --el-color-primary-dark-2: #4f46e5;
+
+  --el-color-success: #22c55e;
+  --el-color-warning: #f59e0b;
+  --el-color-danger: #ef4444;
+  --el-color-info: #64748b;
+
+  --el-bg-color: #1e293b;
+  --el-bg-color-page: #0f172a;
+  --el-bg-color-overlay: #1e293b;
+
+  --el-text-color-primary: #f1f5f9;
+  --el-text-color-regular: #e2e8f0;
+  --el-text-color-secondary: #94a3b8;
+  --el-text-color-placeholder: #64748b;
+
+  --el-border-color: #334155;
+  --el-border-color-light: #475569;
+  --el-border-color-lighter: #334155;
+  --el-border-color-extra-light: #1e293b;
+
+  --el-fill-color: #334155;
+  --el-fill-color-light: #1e293b;
+  --el-fill-color-lighter: #0f172a;
+  --el-fill-color-extra-light: #1e293b;
+  --el-fill-color-blank: #1e293b;
+  --el-fill-color-dark: #475569;
+
+  --el-mask-color: rgba(0, 0, 0, 0.6);
+  --el-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+}
+
+/* ── 全局基础 ── */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--gg-bg);
+  color: var(--gg-text);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: var(--gg-primary-light);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--gg-accent);
+}
+
+/* ── Element Plus 组件覆盖 ── */
+
+/* Card */
+.el-card {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+  color: var(--gg-text) !important;
+  border-radius: var(--gg-radius-md) !important;
+}
+.el-card__header {
+  border-color: var(--gg-border) !important;
+  color: var(--gg-text) !important;
+}
+
+/* Dialog */
+.el-dialog {
+  background: var(--gg-bg-card) !important;
+  border: 1px solid var(--gg-border) !important;
+  border-radius: var(--gg-radius-lg) !important;
+}
+.el-dialog__header {
+  color: var(--gg-text) !important;
+}
+.el-dialog__title {
+  color: var(--gg-text) !important;
+}
+
+/* Input */
+.el-input__wrapper {
+  background: var(--gg-bg) !important;
+  box-shadow: 0 0 0 1px var(--gg-border) inset !important;
+  border-radius: var(--gg-radius-sm) !important;
+}
+.el-input__wrapper:hover {
+  box-shadow: 0 0 0 1px var(--gg-border-light) inset !important;
+}
+.el-input__wrapper.is-focus {
+  box-shadow: 0 0 0 1px var(--gg-primary) inset !important;
+}
+.el-input__inner {
+  color: var(--gg-text) !important;
+}
+.el-input__inner::placeholder {
+  color: var(--gg-text-muted) !important;
+}
+.el-textarea__inner {
+  background: var(--gg-bg) !important;
+  color: var(--gg-text) !important;
+  border-color: var(--gg-border) !important;
+}
+
+/* Dropdown */
+.el-dropdown-menu {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+  border-radius: var(--gg-radius-md) !important;
+  padding: 6px !important;
+}
+.el-dropdown-menu__item {
+  color: var(--gg-text) !important;
+  border-radius: var(--gg-radius-sm) !important;
+  padding: 8px 14px !important;
+}
+.el-dropdown-menu__item:hover {
+  background: var(--gg-bg-hover) !important;
+  color: var(--gg-primary-light) !important;
+}
+.el-dropdown-menu__item--divided::before {
+  background: var(--gg-border) !important;
+}
+
+/* Drawer */
+.el-drawer {
+  background: var(--gg-bg-card) !important;
+}
+.el-drawer__header {
+  color: var(--gg-text) !important;
+  border-bottom: 1px solid var(--gg-border);
+  margin-bottom: 0 !important;
+  padding: 16px 20px !important;
+}
+.el-drawer__body {
+  padding: 20px !important;
+}
+
+/* Button */
+.el-button--primary {
+  background: var(--gg-gradient) !important;
+  border: none !important;
+  border-radius: var(--gg-radius-sm) !important;
+}
+.el-button--primary:hover {
+  opacity: 0.9;
+}
+.el-button--default {
+  background: var(--gg-bg-elevated) !important;
+  border-color: var(--gg-border) !important;
+  color: var(--gg-text) !important;
+  border-radius: var(--gg-radius-sm) !important;
+}
+.el-button--default:hover {
+  border-color: var(--gg-primary) !important;
+  color: var(--gg-primary-light) !important;
+}
+
+/* Badge */
+.el-badge__content {
+  background-color: var(--gg-danger) !important;
+  border: none !important;
+}
+
+/* Tag */
+.el-tag {
+  border-radius: 6px !important;
+}
+
+/* Message */
+.el-message {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+  border-radius: var(--gg-radius-md) !important;
+}
+.el-message__content {
+  color: var(--gg-text) !important;
+}
+
+/* Pagination */
+.el-pagination {
+  --el-pagination-button-bg-color: var(--gg-bg-elevated);
+  --el-pagination-hover-color: var(--gg-primary-light);
+}
+.el-pager li {
+  background: var(--gg-bg-elevated) !important;
+  color: var(--gg-text-secondary) !important;
+}
+.el-pager li.is-active {
+  background: var(--gg-gradient) !important;
+  color: white !important;
+}
+
+/* Select */
+.el-select-dropdown {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+}
+.el-select-dropdown__item {
+  color: var(--gg-text) !important;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: var(--gg-bg-hover) !important;
+}
+.el-select-dropdown__item.selected {
+  color: var(--gg-primary-light) !important;
+}
+
+/* Checkbox */
+.el-checkbox {
+  color: var(--gg-text) !important;
+}
+.el-checkbox__label {
+  color: var(--gg-text) !important;
+}
+
+/* Time Picker */
+.el-time-panel {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+}
+
+/* MessageBox */
+.el-message-box {
+  background: var(--gg-bg-card) !important;
+  border-color: var(--gg-border) !important;
+}
+.el-message-box__title {
+  color: var(--gg-text) !important;
+}
+.el-message-box__message {
+  color: var(--gg-text-secondary) !important;
+}
+
+/* Loading */
+.el-loading-mask {
+  background: rgba(15, 23, 42, 0.8) !important;
+}
+
+/* ── 工具类 ── */
+.gg-gradient {
+  background: var(--gg-gradient);
+}
+
+.gg-glow {
+  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
+}
+
+.gg-card {
+  background: var(--gg-bg-card);
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-md);
+  padding: 20px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.gg-card:hover {
+  border-color: var(--gg-primary);
+  box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
+}
+
+.gg-text-gradient {
+  background: var(--gg-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.gg-status-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.gg-status-dot--idle { background: var(--gg-success); box-shadow: 0 0 6px var(--gg-success); }
+.gg-status-dot--working { background: var(--gg-danger); box-shadow: 0 0 6px var(--gg-danger); }
+.gg-status-dot--in_team { background: var(--gg-info); box-shadow: 0 0 6px var(--gg-info); }
+.gg-status-dot--away { background: var(--gg-text-muted); }
+
+/* 滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--gg-border);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--gg-border-light);
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index cd7b801..7c7181a 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,6 +3,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import './assets/design.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import router from './router'