diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 07b9945c9..419422da0 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1,33 +1,6 @@
 /**
- * V21 全局基础样式
+ * V21 全局重置样式
  */
-:root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
-    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-  line-height: 1.6;
-  font-weight: 400;
-
-  /* V21 颜色系统 */
-  --indigo: #4f46e5;
-  --indigo-dark: #4338ca;
-  --indigo-soft: #eef2ff;
-  --slate: #0f172a;
-  --muted: #64748b;
-  --line: #e2e8f0;
-  --bg: #f8fafc;
-  --green: #10b981;
-  --amber: #f59e0b;
-  --red: #ef4444;
-
-  color-scheme: light;
-  color: var(--slate);
-  background-color: var(--bg);
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 
 * {
   margin: 0;
@@ -35,12 +8,38 @@
   box-sizing: border-box;
 }
 
-body {
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-#root {
+html, body, #root {
   width: 100%;
   min-height: 100vh;
 }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #0f172a;
+  background-color: #f8fafc;
+}
+
+/* 滚动条 - V21 样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.25);
+}
+
+/* 毛玻璃导航栏效果 */
+.navbar-glass {
+  background: rgba(255, 255, 255, 0.86);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index daecd65fa..9824ce5c7 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -1,5 +1,6 @@
 /**
- * V21 设计系统入口
+ * 更新主入口，引入全局样式
+ * V21 设计系统配置
  */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -17,21 +18,72 @@ const queryClient = new QueryClient({
     queries: {
       retry: 1,
       refetchOnWindowFocus: false,
-      staleTime: 5 * 60 * 1000,
-      gcTime: 10 * 60 * 1000,
+      staleTime: 5 * 60 * 1000, // 5 分钟
+      gcTime: 10 * 60 * 1000, // 10 分钟
     },
   },
 });
 
-// V21 Ant Design 主题配置
+// V21 Ant Design 主题配置 - Indigo 主色 / 大圆角
 const theme = {
   token: {
-    // V21 Indigo 主色
+    // 主色调 - Indigo
     colorPrimary: '#4f46e5',
-    // V21 大圆角
+    colorSuccess: '#10b981',
+    colorWarning: '#f59e0b',
+    colorError: '#ef4444',
+    colorInfo: '#4f46e5',
+    
+    // 圆角 - V21 大圆角
     borderRadius: 14,
     borderRadiusLG: 22,
-    borderRadiusSM: 12,
+    borderRadiusSM: 10,
+    
+    // 文字色
+    colorText: '#0f172a',
+    colorTextSecondary: '#64748b',
+    colorTextTertiary: '#94a3b8',
+    
+    // 背景色
+    colorBgContainer: '#ffffff',
+    colorBgLayout: '#f8fafc',
+    
+    // 边框色
+    colorBorder: '#e2e8f0',
+    colorBorderSecondary: '#f1f5f9',
+    
+    // 阴影
+    boxShadow: '0 10px 30px rgba(15, 23, 42, 0.06)',
+    boxShadowSecondary: '0 24px 70px rgba(15, 23, 42, 0.09)',
+  },
+  components: {
+    Button: {
+      // 按钮圆角
+      borderRadius: 14,
+      // 主按钮渐变通过 CSS 实现
+      colorPrimary: '#4f46e5',
+      colorPrimaryHover: '#6366f1',
+      primaryShadow: '0 14px 26px rgba(79, 70, 229, 0.22)',
+    },
+    Card: {
+      borderRadiusLG: 28,
+      paddingLG: 28,
+    },
+    Input: {
+      borderRadius: 14,
+    },
+    Select: {
+      borderRadius: 14,
+    },
+    Modal: {
+      borderRadiusLG: 28,
+    },
+    InputNumber: {
+      borderRadius: 14,
+    },
+    DatePicker: {
+      borderRadius: 14,
+    },
   },
 };
 
diff --git a/apps/web/src/pages/workspace/ProjectAssets.css b/apps/web/src/pages/workspace/ProjectAssets.css
index d230650a9..0fc675d3a 100644
--- a/apps/web/src/pages/workspace/ProjectAssets.css
+++ b/apps/web/src/pages/workspace/ProjectAssets.css
@@ -1,100 +1,22 @@
-/* V21 素材库页面 */
+/* V21 素材库页面 - 9:16 竖屏紧凑卡片 */
+
+/* ========== 布局 ========== */
 .xx-project-assets {
-  max-width: 1200px;
-  margin: 0 auto;
+  padding: var(--space-xl);
+  min-height: 100vh;
 }
 
-/* 页面头部 */
-.xx-page-head {
-  margin-bottom: 32px;
-}
-
-.xx-page-head h2 {
-  font-size: 28px;
-  font-weight: 850;
-  color: var(--slate, #0f172a);
-  margin: 0 0 8px;
-}
-
-.xx-page-head p {
-  font-size: 14px;
-  color: var(--muted, #64748b);
-  margin: 0;
-}
-
-/* V21 大卡片 */
-.xx-card {
-  background: rgba(255,255,255,0.94);
-  border: 1px solid rgba(226,232,240,0.95);
-  border-radius: 28px;
-  box-shadow: 0 24px 70px rgba(15,23,42,0.09);
-  padding: 28px;
-  margin-bottom: 24px;
-  transition: all 0.25s;
-}
-
-.xx-card:hover {
-  box-shadow: 0 26px 64px rgba(15,23,42,0.14);
-  transform: translateY(-2px);
-}
-
-.xx-card h3 {
-  font-size: 18px;
-  font-weight: 850;
-  color: var(--slate, #0f172a);
-  margin: 0 0 16px;
-}
-
-/* 上传区域 */
-.xx-upload-zone {
-  border: 2px dashed var(--line, #e2e8f0);
-  border-radius: 24px;
-  padding: 48px;
-  text-align: center;
-  background: var(--bg, #f8fafc);
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.xx-upload-zone:hover {
-  border-color: var(--indigo, #4f46e5);
-  background: var(--indigo-soft, #eef2ff);
-}
-
-.xx-upload-zone .icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-}
-
-.xx-upload-zone p {
-  color: var(--muted, #64748b);
-  margin: 12px 0;
-  font-size: 14px;
-}
-
-/* V21 上传按钮 */
-.xx-upload-btn {
-  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
-  color: white !important;
-  border: none !important;
-  border-radius: 14px !important;
-  padding: 12px 24px !important;
-  font-weight: 850 !important;
-  box-shadow: 0 14px 26px rgba(79,70,229,0.22) !important;
-  transition: all 0.2s !important;
-  cursor: pointer;
-}
-
-.xx-upload-btn:hover {
-  box-shadow: 0 18px 34px rgba(79,70,229,0.28) !important;
-  transform: translateY(-1px);
-}
-
-/* 素材网格 - 9:16 竖屏卡片 */
+/* ========== 素材网格 - 竖屏卡片 ========== */
 .xx-assets-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-md);
+}
+
+@media (max-width: 1200px) {
+  .xx-assets-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 @media (max-width: 768px) {
@@ -109,100 +31,240 @@
   }
 }
 
-/* V21 素材卡片 - 大圆角 */
+/* ========== 素材卡片 - V21 大圆角 ========== */
 .xx-asset-card {
-  background: white;
-  border: 1px solid var(--line, #e2e8f0);
-  border-radius: 22px;
-  padding: 12px;
-  transition: all 0.25s;
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.94);
+  border-radius: var(--radius-xl);
+  padding: 14px;
+  transition: all 0.25s ease;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .xx-asset-card:hover {
-  border-color: var(--indigo, #4f46e5);
-  box-shadow: 0 26px 64px rgba(15,23,42,0.14);
-  transform: translateY(-4px);
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-3px);
 }
 
-/* 缩略图 - 9:16 竖屏 */
+/* ========== 缩略图 - 9:16 竖屏 ========== */
 .xx-asset-thumb {
   aspect-ratio: 9 / 16;
-  border-radius: 16px;
-  background: linear-gradient(135deg, #6366f1, #0ea5e9, #10b981);
+  border-radius: var(--radius-lg);
+  background: linear-gradient(135deg, #0ea5e9, #312e81);
   position: relative;
   overflow: hidden;
   display: grid;
   place-items: center;
   color: white;
-  font-size: 32px;
   margin-bottom: 12px;
 }
 
-/* 状态标签 - Pill 样式 */
+.xx-asset-thumb video,
+.xx-asset-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 播放按钮 - 毛玻璃效果 */
+.xx-asset-thumb span {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.22);
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  font-size: 18px;
+  transition: all 0.2s ease;
+}
+
+.xx-asset-card:hover .xx-asset-thumb span {
+  background: rgba(255, 255, 255, 0.35);
+  transform: scale(1.1);
+}
+
+/* ========== 素材状态 ========== */
 .xx-asset-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
+  display: inline-block;
   font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--radius-full);
   font-weight: 850;
-  padding: 3px 10px;
-  border-radius: 999px;
-  white-space: nowrap;
+  margin-bottom: 8px;
 }
 
 .xx-asset-status.ready {
-  background: #dcfce7;
+  background: var(--success-soft);
   color: #15803d;
 }
 
 .xx-asset-status.processing {
-  background: #fef3c7;
+  background: var(--warning-soft);
   color: #b45309;
 }
 
 .xx-asset-status.failed {
-  background: #fee2e2;
-  color: #b91c1c;
+  background: var(--error-soft);
+  color: #be123c;
 }
 
+/* 卡片文字 */
 .xx-asset-card b {
   display: block;
-  font-size: 14px;
+  color: var(--text-primary);
   font-weight: 850;
-  color: var(--slate, #0f172a);
-  margin: 8px 0 4px;
+  font-size: 14px;
+  margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .xx-asset-card p {
-  font-size: 12px;
-  color: var(--muted, #64748b);
   margin: 0;
+  color: var(--text-secondary);
+  font-size: 12px;
 }
 
-/* 空状态 */
-.xx-empty-state {
-  text-align: center;
-  padding: 60px 24px;
-  color: var(--muted, #64748b);
+/* ========== 视频卡片（横向） ========== */
+.xx-video-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-md);
 }
 
-.xx-empty-state p {
-  font-size: 16px;
-  margin: 12px 0;
+@media (max-width: 1200px) {
+  .xx-video-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .xx-video-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.xx-video-card {
+  border: 1px solid var(--border-color);
+  background: white;
+  border-radius: var(--radius-xl);
+  padding: 14px;
+  transition: all 0.25s ease;
+}
+
+.xx-video-card:hover {
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+/* 视频封面 */
+.xx-video-thumb {
+  aspect-ratio: 16 / 9;
+  border-radius: var(--radius-lg);
+  background: linear-gradient(135deg, #0ea5e9, #312e81);
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  color: white;
+  margin-bottom: 12px;
 }
 
 /* 加载状态 */
 .xx-loading {
   padding: 60px 24px;
   text-align: center;
-  color: var(--muted, #64748b);
+  color: var(--text-secondary);
 }
 
-/* 隐藏文件输入 */
-input[type="file"] {
-  display: none;
+/* ========== 状态标签 ========== */
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.pill {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--radius-full);
+  font-weight: 850;
+  white-space: nowrap;
+}
+
+.pill.ok {
+  background: var(--success-soft);
+  color: #15803d;
+}
+
+.pill.warn {
+  background: var(--warning-soft);
+  color: #b45309;
+}
+
+.pill.bad {
+  background: var(--error-soft);
+  color: #be123c;
+}
+
+/* ========== 操作按钮 ========== */
+.assist-actions {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+  grid-template-columns: 1fr 1fr;
+}
+
+.assist-actions .btn {
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  font-weight: 850;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+
+.assist-actions .btn.primary {
+  background: var(--gradient-primary);
+  color: white;
+  box-shadow: var(--shadow-primary);
+}
+
+.assist-actions .btn.primary:hover {
+  box-shadow: var(--shadow-hover);
+  transform: translateY(-1px);
+}
+
+.assist-actions .btn.ghost {
+  background: white;
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+
+.assist-actions .btn.ghost:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+/* ========== 空状态 ========== */
+.xx-empty-state {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--text-secondary);
+}
+
+.xx-empty-state p {
+  font-size: 16px;
+  margin: 0;
 }
diff --git a/apps/web/src/pages/workspace/ProjectGeneration.css b/apps/web/src/pages/workspace/ProjectGeneration.css
index b9330ed7f..8303e7681 100644
--- a/apps/web/src/pages/workspace/ProjectGeneration.css
+++ b/apps/web/src/pages/workspace/ProjectGeneration.css
@@ -1,12 +1,28 @@
-/* V21 视频剪辑 - 增强版 */
+/* V21 视频剪辑页面 */
+
+/* ========== 布局 ========== */
 .xx-project-generation {
+  padding: var(--space-xl);
+  min-height: 100vh;
 }
 
-/* 模板网格 */
+.xx-generation-layout {
+  display: grid;
+  grid-template-columns: 1fr 360px;
+  gap: var(--space-lg);
+}
+
+@media (max-width: 1200px) {
+  .xx-generation-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ========== 模板网格 - V21 卡片 ========== */
 .xx-template-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 14px;
+  gap: var(--space-md);
 }
 
 @media (max-width: 1200px) {
@@ -21,465 +37,141 @@
   }
 }
 
-.xx-choice {
+/* ========== 模板选择卡片 ========== */
+.xx-choice-card {
   position: relative;
-  border: 2px solid #e2e8f0;
-  border-radius: 18px;
+  border: 2px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.94);
   padding: 14px;
-  background: white;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.25s ease;
+  overflow: hidden;
 }
 
-.xx-choice:hover {
-  border-color: #4f46e5;
+.xx-choice-card:hover {
+  border-color: var(--primary-color);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
-.xx-choice.selected {
-  border-color: #4f46e5;
+.xx-choice-card.selected {
+  border-color: var(--primary-color);
   box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
 }
 
-.check {
+/* 选中标记 */
+.xx-choice-card .check {
   position: absolute;
-  right: -7px;
-  top: -7px;
-  width: 26px;
-  height: 26px;
+  right: 10px;
+  top: 10px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
-  background: #4f46e5;
+  background: var(--gradient-primary);
   color: white;
   display: grid;
   place-items: center;
   font-weight: 900;
+  font-size: 14px;
+  box-shadow: var(--shadow-primary);
 }
 
-.cover {
-  height: 78px;
-  border-radius: 14px;
+/* 模板封面 - 渐变背景 */
+.xx-template-cover {
+  height: 90px;
+  border-radius: var(--radius-md);
   display: grid;
   place-items: center;
   color: white;
-  font-size: 28px;
-  margin-bottom: 10px;
+  font-size: 32px;
+  font-weight: 850;
+  margin-bottom: 12px;
+  position: relative;
+  overflow: hidden;
 }
 
-.xx-choice b {
+.xx-template-cover::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
+}
+
+/* 渐变预设 */
+.gradient-1 {
+  background: linear-gradient(135deg, #4f46e5, #6366f1);
+}
+
+.gradient-2 {
+  background: linear-gradient(135deg, #10b981, #14b8a6);
+}
+
+.gradient-3 {
+  background: linear-gradient(135deg, #f59e0b, #f97316);
+}
+
+.gradient-4 {
+  background: linear-gradient(135deg, #ec4899, #8b5cf6);
+}
+
+/* 模板信息 */
+.xx-template-info b {
+  display: block;
   font-size: 15px;
   font-weight: 850;
-  color: #0f172a;
-  display: block;
+  color: var(--text-primary);
+  margin-bottom: 4px;
 }
 
-.xx-choice p {
-  margin: 5px 0 0;
-  color: #64748b;
+.xx-template-info p {
+  margin: 0;
+  color: var(--text-secondary);
   font-size: 12px;
   line-height: 1.4;
 }
 
-/* 智能编排面板 */
-.auto-arrange-panel {
-  padding: 16px;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-  border-radius: 12px;
-  border: 1px solid #e2e8f0;
+/* ========== 预览区域 ========== */
+.xx-preview-section {
+  position: sticky;
+  top: var(--space-xl);
 }
 
-.panel-header {
-  margin-bottom: 16px;
+.xx-preview-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-sm);
+  transition: all 0.2s ease;
 }
 
-.panel-header h4 {
-  margin: 0 0 4px;
-  font-size: 16px;
-  color: #1e293b;
+.xx-preview-item:hover {
+  background: var(--primary-soft);
 }
 
-.panel-header p {
-  margin: 0;
-  font-size: 13px;
-  color: #64748b;
-}
-
-/* 模式选择器 */
-.mode-selector-section {
-  margin-bottom: 16px;
-}
-
-.mode-selector-section label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  color: #475569;
-}
-
-.mode-cards {
+.xx-preview-item .icon {
+  font-size: 28px;
+  width: 52px;
+  height: 52px;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs);
 }
 
-@media (max-width: 900px) {
-  .mode-cards {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.mode-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12px 8px;
-  background: white;
-  border: 2px solid #e2e8f0;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.mode-card:hover {
-  border-color: #94a3b8;
-}
-
-.mode-card.selected {
-  border-width: 2px;
-}
-
-.mode-icon {
-  font-size: 24px;
-  margin-bottom: 6px;
-}
-
-.mode-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: #334155;
-}
-
-/* 时长选择器 */
-.duration-selector {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.duration-selector label {
-  font-size: 13px;
-  font-weight: 500;
-  color: #475569;
-}
-
-/* 生成按钮 */
-.generate-btn {
-  width: 100%;
-  height: 40px;
+.xx-preview-item h4 {
   font-size: 14px;
-  font-weight: 600;
-  border: none;
-  margin-bottom: 16px;
+  font-weight: 850;
+  color: var(--text-primary);
+  margin: 0 0 4px;
 }
 
-/* 编排列表 */
-.plans-list {
-  border-top: 1px solid #e2e8f0;
-  padding-top: 16px;
-}
-
-.plans-list h5 {
-  margin: 0 0 12px;
-  font-size: 14px;
-  color: #475569;
-}
-
-.plan-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  background: white;
-  border: 2px solid #e2e8f0;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.2s;
-  margin-bottom: 8px;
-}
-
-.plan-item:hover {
-  border-color: #94a3b8;
-}
-
-.plan-item.selected {
-  border-color: #4f46e5;
-  background: #f5f3ff;
-}
-
-.plan-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.plan-header {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.plan-summary {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1e293b;
-}
-
-.plan-meta {
-  display: flex;
-  gap: 12px;
-  margin-top: 4px;
-  font-size: 12px;
-  color: #64748b;
-}
-
-.plan-actions {
-  display: flex;
-  gap: 4px;
-}
-
-/* 时间轴区域 */
-.timeline-section {
-  margin-top: 20px;
-  padding-top: 20px;
-  border-top: 1px solid #e2e8f0;
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.section-header h4 {
+.xx-preview-item p {
   margin: 0;
-  font-size: 15px;
-  color: #1e293b;
-}
-
-/* 时间轴容器 */
-.timeline-container {
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  padding: 16px;
-}
-
-.timeline-controls {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
   font-size: 13px;
-  color: #64748b;
-}
-
-.timeline-duration {
-  font-weight: 600;
-  color: #334155;
-}
-
-.timeline-clips-count {
-  color: #64748b;
-}
-
-.timeline-wrapper {
-  display: flex;
-  gap: 12px;
-}
-
-.timeline-layers {
-  flex-shrink: 0;
-  width: 70px;
-}
-
-.layer-label {
-  height: 28px;
-  line-height: 28px;
-  font-size: 11px;
-  color: #64748b;
-  text-align: right;
-  padding-right: 8px;
-}
-
-.layer-label.main {
-  color: #4f46e5;
-}
-
-.layer-label.pip {
-  color: #f97316;
-}
-
-.layer-label.broll {
-  color: #10b981;
-}
-
-.timeline-body {
-  flex: 1;
-  min-width: 0;
-}
-
-/* 时间刻度 */
-.timeline-ruler {
-  position: relative;
-  height: 24px;
-  border-bottom: 1px solid #e2e8f0;
-  margin-bottom: 4px;
-}
-
-.timeline-tick {
-  position: absolute;
-  top: 0;
-  transform: translateX(-50%);
-}
-
-.timeline-tick::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  width: 1px;
-  height: 6px;
-  background: #cbd5e1;
-}
-
-.timeline-tick span {
-  font-size: 10px;
-  color: #94a3b8;
-  white-space: nowrap;
-}
-
-/* 轨道 */
-.timeline-tracks {
-  position: relative;
-  height: 88px;
-}
-
-.timeline-track {
-  height: 28px;
-  border-bottom: 1px dashed #f1f5f9;
-}
-
-.timeline-track:last-child {
-  border-bottom: none;
-}
-
-/* 片段 */
-.timeline-clip {
-  position: absolute;
-  height: 24px;
-  top: 2px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 6px;
-  font-size: 10px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-  overflow: hidden;
-  min-width: 30px;
-}
-
-.timeline-clip:hover {
-  opacity: 0.85;
-}
-
-.timeline-clip-main {
-  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
-  color: white;
-}
-
-.timeline-clip-pip {
-  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
-  color: white;
-}
-
-.timeline-clip-broll {
-  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
-  color: white;
-}
-
-.clip-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.clip-duration {
-  flex-shrink: 0;
-  margin-left: 4px;
-  opacity: 0.8;
-}
-
-/* 弹窗样式 */
-.modal-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-/* 剪辑模式选择 */
-.editing-mode-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.editing-mode-group .ant-radio-button-wrapper {
-  flex: 1;
-  min-width: 130px;
-  height: auto !important;
-  padding: 12px !important;
-  border-radius: 8px !important;
-}
-
-.mode-option {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.mode-emoji {
-  font-size: 20px;
-  line-height: 1;
-}
-
-.mode-text {
-  display: flex;
-  flex-direction: column;
-}
-
-.mode-name {
-  font-size: 13px;
-  font-weight: 600;
-  color: #1e293b;
-}
-
-.mode-desc {
-  font-size: 11px;
-  color: #64748b;
-  margin-top: 2px;
-}
-
-/* 选中方案提示 */
-.selected-plan-hint {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-  border-radius: 8px;
-  font-size: 13px;
-  color: #166534;
+  color: var(--text-secondary);
 }
diff --git a/apps/web/src/pages/workspace/ProjectResults.css b/apps/web/src/pages/workspace/ProjectResults.css
index fcbe0d433..2e03fe3bc 100644
--- a/apps/web/src/pages/workspace/ProjectResults.css
+++ b/apps/web/src/pages/workspace/ProjectResults.css
@@ -1,89 +1,79 @@
-/* V21 成片库页面 */
+/* V21 成片库页面 - 9:16 竖屏紧凑卡片 */
+
+/* ========== 布局 ========== */
 .xx-project-results {
-  max-width: 1200px;
-  margin: 0 auto;
+  padding: var(--space-xl);
+  min-height: 100vh;
 }
 
-/* 页面头部 */
-.xx-page-head {
-  margin-bottom: 32px;
-}
-
-.xx-page-head h2 {
-  font-size: 28px;
-  font-weight: 850;
-  color: var(--slate, #0f172a);
-  margin: 0 0 8px;
-}
-
-.xx-page-head p {
-  font-size: 14px;
-  color: var(--muted, #64748b);
-  margin: 0;
-}
-
-/* V21 竖屏成片网格 */
+/* ========== 竖屏卡片网格 ========== */
 .xx-vertical-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 24px;
+  gap: var(--space-md);
+}
+
+.xx-vertical-grid.compact {
+  grid-template-columns: repeat(4, 1fr);
 }
 
 @media (max-width: 1200px) {
   .xx-vertical-grid {
     grid-template-columns: repeat(3, 1fr);
   }
+  
+  .xx-vertical-grid.compact {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 @media (max-width: 768px) {
   .xx-vertical-grid {
     grid-template-columns: repeat(2, 1fr);
   }
-}
-
-@media (max-width: 480px) {
-  .xx-vertical-grid {
+  
+  .xx-vertical-grid.compact {
     grid-template-columns: 1fr;
-    max-width: 300px;
-    margin: 0 auto;
   }
 }
 
-/* V21 竖屏成片卡片 */
+/* ========== 竖屏卡片 - V21 大圆角 ========== */
 .xx-vertical-card {
-  background: white;
-  border: 1px solid var(--line, #e2e8f0);
-  border-radius: 24px;
-  padding: 12px;
-  transition: all 0.3s;
-  cursor: pointer;
+  border: 1px solid var(--border-color);
+  background: rgba(255, 255, 255, 0.94);
+  border-radius: var(--radius-xl);
+  padding: 14px;
+  transition: all 0.25s ease;
+  overflow: hidden;
 }
 
 .xx-vertical-card:hover {
-  border-color: var(--indigo, #4f46e5);
-  box-shadow: 0 26px 64px rgba(15,23,42,0.14);
-  transform: translateY(-4px);
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-3px);
 }
 
-/* 竖屏缩略图 */
+/* ========== 竖屏缩略图 - 9:16 ========== */
 .xx-vertical-thumb {
   aspect-ratio: 9 / 16;
-  border-radius: 18px;
+  border-radius: var(--radius-lg);
+  background: linear-gradient(135deg, #4f46e5, #6366f1);
   position: relative;
   overflow: hidden;
   display: grid;
   place-items: center;
   color: white;
-  font-size: 32px;
   margin-bottom: 12px;
+  cursor: pointer;
 }
 
+/* 缩略图渐变变体 */
 .xx-vertical-thumb.orange {
   background: linear-gradient(135deg, #f97316, #ef4444);
 }
 
-.xx-vertical-thumb.indigo {
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+.xx-vertical-thumb.gray {
+  background: linear-gradient(135deg, #64748b, #334155);
 }
 
 .xx-vertical-thumb.green {
@@ -91,85 +81,124 @@
 }
 
 .xx-vertical-thumb.purple {
-  background: linear-gradient(135deg, #8b5cf6, #ec4899);
+  background: linear-gradient(135deg, #8b5cf6, #a855f7);
 }
 
-/* 播放按钮 */
-.xx-play-btn {
+/* 视频/图片填充 */
+.xx-vertical-thumb video,
+.xx-vertical-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 播放按钮 - 毛玻璃效果 */
+.mini-play {
   width: 52px;
   height: 52px;
   border-radius: 50%;
-  background: rgba(255,255,255,0.2);
-  backdrop-filter: blur(4px);
-  border: 2px solid rgba(255,255,255,0.3);
   display: grid;
   place-items: center;
+  background: rgba(255, 255, 255, 0.22);
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   font-size: 20px;
   color: white;
-  transition: all 0.2s;
+  transition: all 0.2s ease;
 }
 
-.xx-vertical-card:hover .xx-play-btn {
-  background: rgba(255,255,255,0.3);
-  transform: scale(1.1);
+.mini-play:hover {
+  background: rgba(255, 255, 255, 0.35);
+  transform: scale(1.08);
+}
+
+/* 卡片文字 */
+.xx-vertical-card .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
 }
 
-/* 视频信息 */
 .xx-vertical-card b {
   display: block;
-  font-size: 14px;
+  color: var(--text-primary);
   font-weight: 850;
-  color: var(--slate, #0f172a);
-  margin-bottom: 6px;
+  font-size: 14px;
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.xx-vertical-card .meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.xx-vertical-card p {
+  margin: 0;
+  color: var(--text-secondary);
   font-size: 12px;
-  color: var(--muted, #64748b);
 }
 
-.xx-vertical-card .duration {
-  font-weight: 600;
-}
-
-.xx-vertical-card .size {
-  color: var(--green, #10b981);
-}
-
-/* 状态标签 */
-.xx-status-pill {
-  display: inline-block;
+/* ========== 状态标签 ========== */
+.pill {
   font-size: 11px;
-  font-weight: 850;
   padding: 4px 10px;
-  border-radius: 999px;
-  margin-bottom: 8px;
+  border-radius: var(--radius-full);
+  font-weight: 850;
+  white-space: nowrap;
 }
 
-.xx-status-pill.ready {
-  background: #dcfce7;
+.pill.ok {
+  background: var(--success-soft);
   color: #15803d;
 }
 
-.xx-status-pill.processing {
-  background: #fef3c7;
+.pill.warn {
+  background: var(--warning-soft);
   color: #b45309;
 }
 
-/* 空状态 */
-.xx-empty-state {
-  text-align: center;
-  padding: 80px 24px;
-  color: var(--muted, #64748b);
+.pill.bad {
+  background: var(--error-soft);
+  color: #be123c;
 }
 
-.xx-empty-state p {
-  font-size: 16px;
-  margin: 12px 0;
+/* ========== 操作按钮组 ========== */
+.assist-actions {
+  display: grid;
+  gap: 8px;
+  margin-top: 12px;
+  grid-template-columns: 1fr 1fr;
+}
+
+.assist-actions .btn {
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  font-weight: 850;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+
+.assist-actions .btn.primary {
+  background: var(--gradient-primary);
+  color: white;
+  box-shadow: var(--shadow-primary);
+}
+
+.assist-actions .btn.primary:hover {
+  box-shadow: var(--shadow-hover);
+  transform: translateY(-1px);
+}
+
+.assist-actions .btn.ghost {
+  background: white;
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+}
+
+.assist-actions .btn.ghost:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
 }
diff --git a/apps/web/src/pages/workspace/ProjectVoices.css b/apps/web/src/pages/workspace/ProjectVoices.css
index 2e33e764f..2d6d4f6aa 100644
--- a/apps/web/src/pages/workspace/ProjectVoices.css
+++ b/apps/web/src/pages/workspace/ProjectVoices.css
@@ -1,87 +1,61 @@
-/* V21 配音库页面 */
+/* V21 配音库页面 - 波形图样式 */
+
+/* ========== 布局 ========== */
 .xx-project-voices {
-  max-width: 1200px;
-  margin: 0 auto;
+  padding: var(--space-xl);
+  min-height: 100vh;
 }
 
-/* 页面头部 */
-.xx-page-head {
-  margin-bottom: 32px;
-}
-
-.xx-page-head h2 {
-  font-size: 28px;
-  font-weight: 850;
-  color: var(--slate, #0f172a);
-  margin: 0 0 8px;
-}
-
-.xx-page-head p {
-  font-size: 14px;
-  color: var(--muted, #64748b);
-  margin: 0;
-}
-
-/* V21 卡片 */
-.xx-card {
-  background: rgba(255,255,255,0.94);
-  border: 1px solid rgba(226,232,240,0.95);
-  border-radius: 28px;
-  box-shadow: 0 24px 70px rgba(15,23,42,0.09);
-  padding: 28px;
-  margin-bottom: 24px;
-  transition: all 0.25s;
-}
-
-.xx-card h3 {
-  font-size: 18px;
-  font-weight: 850;
-  color: var(--slate, #0f172a);
-  margin: 0 0 20px;
-}
-
-/* 配音网格 - 双列 */
+/* ========== 配音网格 ========== */
 .xx-voice-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--space-md);
+}
+
+@media (max-width: 1200px) {
+  .xx-voice-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
 }
 
 @media (max-width: 768px) {
   .xx-voice-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
-/* V21 配音卡片 */
-.xx-voice-card {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 20px;
-  border: 2px solid var(--line, #e2e8f0);
-  border-radius: 20px;
-  background: white;
+@media (max-width: 480px) {
+  .xx-voice-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ========== 配音卡片 - V21 大圆角 ========== */
+.xx-voice {
+  text-align: center;
+  border: 2px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.94);
+  padding: 18px 14px;
   cursor: pointer;
-  transition: all 0.25s;
+  transition: all 0.25s ease;
   position: relative;
 }
 
-.xx-voice-card:hover {
-  border-color: var(--indigo, #4f46e5);
-  box-shadow: 0 12px 36px rgba(79,70,229,0.12);
+.xx-voice:hover {
+  border-color: var(--primary-color);
   transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
-/* 选中态 */
-.xx-voice-card.selected {
-  border-color: var(--indigo, #4f46e5);
-  background: var(--indigo-soft, #eef2ff);
-  box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
+.xx-voice.selected {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
 }
 
 /* 选中标记 */
-.xx-voice-card.selected::after {
+.xx-voice.selected::after {
   content: '✓';
   position: absolute;
   right: -8px;
@@ -89,79 +63,131 @@
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  background: var(--indigo, #4f46e5);
+  background: var(--gradient-primary);
   color: white;
   display: grid;
   place-items: center;
   font-weight: 900;
   font-size: 14px;
+  box-shadow: var(--shadow-primary);
 }
 
-/* 波形图占位 */
-.xx-voice-waveform {
-  width: 80px;
-  height: 48px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
+/* 音色图标 - 渐变圆形 */
+.voice-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 12px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: white;
+  font-size: 26px;
+  background: var(--gradient-primary);
+  box-shadow: var(--shadow-primary);
+  transition: all 0.2s ease;
+}
+
+.xx-voice:hover .voice-icon {
+  transform: scale(1.08);
+  box-shadow: var(--shadow-hover);
+}
+
+/* ========== 波形图样式 ========== */
+.waveform {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  gap: 3px;
+  height: 32px;
+  margin: 10px 0;
 }
 
-.xx-voice-waveform span {
-  color: white;
-  font-size: 20px;
+.waveform-bar {
+  width: 4px;
+  border-radius: 2px;
+  background: var(--gradient-primary);
+  opacity: 0.7;
+  transition: all 0.2s ease;
 }
 
-/* 音色信息 */
-.xx-voice-info {
-  flex: 1;
+.xx-voice:hover .waveform-bar {
+  opacity: 1;
 }
 
-.xx-voice-info h4 {
-  font-size: 16px;
+.waveform-bar:nth-child(1) { height: 40%; }
+.waveform-bar:nth-child(2) { height: 70%; }
+.waveform-bar:nth-child(3) { height: 100%; }
+.waveform-bar:nth-child(4) { height: 60%; }
+.waveform-bar:nth-child(5) { height: 80%; }
+.waveform-bar:nth-child(6) { height: 50%; }
+.waveform-bar:nth-child(7) { height: 90%; }
+.waveform-bar:nth-child(8) { height: 65%; }
+.waveform-bar:nth-child(9) { height: 45%; }
+.waveform-bar:nth-child(10) { height: 75%; }
+
+/* 播放中波形动画 */
+.waveform.playing .waveform-bar {
+  animation: wave 0.5s ease-in-out infinite alternate;
+}
+
+.waveform-bar:nth-child(1) { animation-delay: 0s; }
+.waveform-bar:nth-child(2) { animation-delay: 0.05s; }
+.waveform-bar:nth-child(3) { animation-delay: 0.1s; }
+.waveform-bar:nth-child(4) { animation-delay: 0.15s; }
+.waveform-bar:nth-child(5) { animation-delay: 0.2s; }
+.waveform-bar:nth-child(6) { animation-delay: 0.25s; }
+.waveform-bar:nth-child(7) { animation-delay: 0.3s; }
+.waveform-bar:nth-child(8) { animation-delay: 0.35s; }
+.waveform-bar:nth-child(9) { animation-delay: 0.4s; }
+.waveform-bar:nth-child(10) { animation-delay: 0.45s; }
+
+@keyframes wave {
+  from { transform: scaleY(0.6); }
+  to { transform: scaleY(1.2); }
+}
+
+/* 文字样式 */
+.xx-voice div:not(.voice-icon):not(.waveform) {
   font-weight: 850;
-  color: var(--slate, #0f172a);
-  margin: 0 0 6px;
+  font-size: 14px;
+  color: var(--text-primary);
 }
 
-.xx-voice-info p {
-  font-size: 13px;
-  color: var(--muted, #64748b);
-  margin: 0;
+.xx-voice small {
+  display: block;
+  color: var(--text-secondary);
+  margin-top: 6px;
+  font-size: 12px;
 }
 
-/* 播放按钮 */
-.xx-voice-play {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  background: rgba(79,70,229,0.1);
-  border: none;
-  cursor: pointer;
+/* ========== 使用记录列表 ========== */
+.xx-voice-usage-list {
   display: grid;
-  place-items: center;
-  font-size: 18px;
-  color: var(--indigo, #4f46e5);
-  transition: all 0.2s;
-  flex-shrink: 0;
+  gap: 12px;
 }
 
-.xx-voice-play:hover {
-  background: var(--indigo, #4f46e5);
-  color: white;
-  transform: scale(1.1);
+.xx-voice-usage-row {
+  border: 1px solid var(--border-color);
+  background: white;
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  transition: all 0.2s ease;
 }
 
-/* 标签 */
-.xx-voice-tag {
-  display: inline-block;
-  font-size: 11px;
+.xx-voice-usage-row:hover {
+  border-color: var(--primary-color);
+  box-shadow: var(--shadow-xs);
+}
+
+.xx-voice-usage-row b {
+  display: block;
+  color: var(--text-primary);
   font-weight: 850;
-  padding: 4px 10px;
-  border-radius: 999px;
-  background: var(--indigo-soft, #eef2ff);
-  color: var(--indigo-dark, #4338ca);
-  margin-top: 8px;
+  margin-bottom: 4px;
+}
+
+.xx-voice-usage-row p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 12px;
 }
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index f9af86683..f16ec9bca 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -1,124 +1,71 @@
 /**
  * V21 设计系统 - 全局样式
+ * 核心设计规范：Indigo 主色 / 大圆角 / 毛玻璃 / 渐变背景
  */
+
 :root {
-  /* 主色调 */
+  /* ========== 主色调 - Indigo ========== */
   --primary-color: #4f46e5;
   --primary-hover: #6366f1;
-  --primary-active: #4338ca;
+  --primary-dark: #4338ca;
   --primary-soft: #eef2ff;
+  --gradient-primary: linear-gradient(135deg, #6366f1, #4f46e5);
 
-  /* 状态色 */
+  /* ========== 状态色 ========== */
   --success-color: #10b981;
+  --success-soft: #dcfce7;
   --warning-color: #f59e0b;
+  --warning-soft: #fef3c7;
   --error-color: #ef4444;
+  --error-soft: #ffe4e6;
   --info-color: #4f46e5;
+  --info-soft: #eef2ff;
 
-  /* 文字色 */
+  /* ========== 文字色 ========== */
   --text-primary: #0f172a;
   --text-secondary: #64748b;
   --text-disabled: #bfbfbf;
 
-  /* 背景色 */
-  --bg-primary: #f8fafc;
-  --bg-secondary: #fafafa;
-  --bg-tertiary: #f5f5f5;
+  /* ========== 背景色 ========== */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f1f5f9;
 
-  /* V21 设计令牌 */
-  --indigo: #4f46e5;
-  --indigo-dark: #4338ca;
-  --indigo-soft: #eef2ff;
-  --gradient-primary: linear-gradient(135deg, #6366f1, #4f46e5);
-  --slate: #0f172a;
-  --muted: #64748b;
-  --line: #e2e8f0;
-  --bg: #f8fafc;
-  --green: #10b981;
-  --amber: #f59e0b;
-  --red: #ef4444;
-
-  /* 边框色 */
-  --border-color: #d9d9d9;
+  /* ========== 边框色 ========== */
+  --border-color: #e2e8f0;
   --divider-color: #f0f0f0;
 
-  /* 间距 */
+  /* ========== 间距 ========== */
   --space-xs: 4px;
   --space-sm: 8px;
   --space-md: 16px;
   --space-lg: 24px;
   --space-xl: 32px;
+  --space-2xl: 48px;
 
-  /* 圆角 - V21 大圆角 */
-  --radius-sm: 12px;
-  --radius-md: 16px;
+  /* ========== 圆角 - V21 大圆角 ========== */
+  --radius-xs: 6px;
+  --radius-sm: 10px;
+  --radius-md: 14px;
   --radius-lg: 22px;
   --radius-xl: 28px;
+  --radius-full: 9999px;
 
-  /* 阴影 - V21 柔和大阴影 */
-  --shadow-sm: 0 10px 30px rgba(15,23,42,0.06);
-  --shadow-md: 0 20px 58px rgba(15,23,42,0.10);
-  --shadow-lg: 0 24px 70px rgba(15,23,42,0.09);
-  --shadow-hover: 0 26px 64px rgba(15,23,42,0.14);
+  /* ========== 阴影 - V21 柔和大阴影 ========== */
+  --shadow-xs: 0 4px 12px rgba(15, 23, 42, 0.04);
+  --shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
+  --shadow-md: 0 20px 58px rgba(15, 23, 42, 0.10);
+  --shadow-lg: 0 30px 90px rgba(15, 23, 42, 0.15);
+  --shadow-hover: 0 18px 34px rgba(79, 70, 229, 0.28);
+  --shadow-card: 0 24px 70px rgba(15, 23, 42, 0.09);
+  --shadow-primary: 0 14px 26px rgba(79, 70, 229, 0.22);
 }
 
-/**
- * V21 按钮样式
- */
-.btn.primary,
-.ant-btn-primary {
-  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
-  color: white !important;
-  border-radius: 14px !important;
-  font-weight: 850 !important;
-  box-shadow: 0 14px 26px rgba(79,70,229,0.22) !important;
-  border: none !important;
-  padding: 12px 22px !important;
-  transition: all 0.2s !important;
+/* ========== 全局背景装饰层 ========== */
+body {
+  position: relative;
 }
 
-.btn.primary:hover,
-.ant-btn-primary:hover {
-  box-shadow: 0 18px 34px rgba(79,70,229,0.28) !important;
-  transform: translateY(-1px);
-  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
-}
-
-.btn.ghost,
-.ant-btn-default {
-  background: white !important;
-  border: 1px solid #dbe3ef !important;
-  border-radius: 14px !important;
-  font-weight: 850 !important;
-  padding: 12px 22px !important;
-  transition: all 0.2s !important;
-}
-
-.btn.ghost:hover,
-.ant-btn-default:hover {
-  border-color: #4f46e5 !important;
-  color: #4f46e5 !important;
-}
-
-/**
- * V21 卡片样式
- */
-.xx-card {
-  background: rgba(255,255,255,0.94);
-  border: 1px solid rgba(226,232,240,0.95);
-  border-radius: 28px;
-  box-shadow: 0 24px 70px rgba(15,23,42,0.09);
-  padding: 28px;
-  transition: all 0.25s;
-}
-
-.xx-card:hover {
-  box-shadow: 0 26px 64px rgba(15,23,42,0.14);
-  transform: translateY(-2px);
-}
-
-/**
- * V21 背景装饰
- */
 body::before {
   content: '';
   position: fixed;
@@ -126,9 +73,9 @@ body::before {
   z-index: 0;
   pointer-events: none;
   background:
-    radial-gradient(circle at 18% 20%, rgba(79,70,229,0.11), transparent 30%),
-    radial-gradient(circle at 86% 14%, rgba(16,185,129,0.08), transparent 28%),
-    radial-gradient(circle at 48% 80%, rgba(99,102,241,0.08), transparent 34%),
+    radial-gradient(circle at 18% 20%, rgba(79, 70, 229, 0.11), transparent 30%),
+    radial-gradient(circle at 86% 14%, rgba(16, 185, 129, 0.08), transparent 28%),
+    radial-gradient(circle at 48% 80%, rgba(99, 102, 241, 0.08), transparent 34%),
     #f8fafc;
 }
 
@@ -138,75 +85,173 @@ body::after {
   inset: 0;
   z-index: 0;
   pointer-events: none;
-  background-image: radial-gradient(circle, rgba(79,70,229,0.1) 1px, transparent 1px);
+  background-image: radial-gradient(circle, rgba(79, 70, 229, 0.1) 1px, transparent 1px);
   background-size: 38px 38px;
   opacity: 0.32;
 }
 
-/* 全局重置 */
-* {
+#root {
+  position: relative;
+  z-index: 1;
+}
+
+/* ========== 页面通用布局 ========== */
+.xx-page {
+  padding: var(--space-xl);
+  min-height: 100vh;
+}
+
+.xx-page-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-xl);
+  padding: var(--space-lg);
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(226, 232, 240, 0.95);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-card);
+}
+
+.xx-page-head h2 {
+  font-size: 26px;
+  font-weight: 850;
+  color: var(--text-primary);
+  margin: 0 0 6px;
+}
+
+.xx-page-head p {
+  color: var(--text-secondary);
   margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+  font-size: 14px;
 }
 
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+/* ========== V21 按钮样式 ========== */
+.xx-primary-btn,
+.ant-btn-primary {
+  background: var(--gradient-primary) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: var(--radius-md) !important;
+  font-weight: 850 !important;
+  box-shadow: var(--shadow-primary) !important;
+  padding: 12px 22px !important;
+  transition: all 0.2s ease !important;
+  height: auto !important;
 }
 
-/* 滚动条 */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+.xx-primary-btn:hover,
+.ant-btn-primary:hover {
+  box-shadow: var(--shadow-hover) !important;
+  transform: translateY(-1px);
+  background: var(--gradient-primary) !important;
 }
 
-::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
+.xx-ghost-btn,
+.ant-btn-default {
+  background: var(--bg-primary) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: var(--radius-md) !important;
+  font-weight: 850 !important;
+  padding: 12px 22px !important;
+  transition: all 0.2s ease !important;
+  color: var(--text-primary) !important;
+  height: auto !important;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
+.xx-ghost-btn:hover,
+.ant-btn-default:hover {
+  border-color: var(--primary-color) !important;
+  color: var(--primary-color) !important;
 }
 
-/* 工具类 */
-.text-center {
+/* Ant Design Button 圆角覆盖 */
+.ant-btn {
+  border-radius: var(--radius-md) !important;
+}
+
+/* ========== V21 卡片样式 ========== */
+.xx-card {
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(226, 232, 240, 0.95);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-card);
+  padding: var(--space-xl);
+  margin-bottom: var(--space-lg);
+  transition: all 0.25s ease;
+}
+
+.xx-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.xx-card h3 {
+  font-size: 20px;
+  font-weight: 850;
+  color: var(--text-primary);
+  margin: 0 0 var(--space-md);
+}
+
+/* ========== 上传区域 ========== */
+.xx-upload-zone {
+  border: 2px dashed var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 48px;
   text-align: center;
+  background: var(--bg-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.text-right {
-  text-align: right;
+.xx-upload-zone:hover {
+  border-color: var(--primary-color);
+  background: var(--primary-soft);
 }
 
-.mt-sm {
-  margin-top: var(--space-sm);
-}
-
-.mt-md {
-  margin-top: var(--space-md);
-}
-
-.mt-lg {
-  margin-top: var(--space-lg);
-}
-
-.mb-sm {
-  margin-bottom: var(--space-sm);
-}
-
-.mb-md {
+.xx-upload-zone .icon {
+  font-size: 48px;
   margin-bottom: var(--space-md);
 }
 
-.mb-lg {
-  margin-bottom: var(--space-lg);
+.xx-upload-zone p {
+  color: var(--text-secondary);
+  margin: var(--space-sm) 0;
+  font-size: 14px;
 }
 
-/* 卡片悬浮效果 */
+.xx-upload-btn {
+  margin-top: var(--space-md);
+}
+
+/* ========== 空状态 ========== */
+.xx-empty-state {
+  text-align: center;
+  padding: 48px;
+  color: var(--text-secondary);
+}
+
+.xx-empty-state .icon {
+  font-size: 64px;
+  margin-bottom: var(--space-md);
+}
+
+/* ========== 工具类 ========== */
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-primary { color: var(--primary-color); }
+.text-muted { color: var(--text-secondary); }
+
+.mt-sm { margin-top: var(--space-sm); }
+.mt-md { margin-top: var(--space-md); }
+.mt-lg { margin-top: var(--space-lg); }
+.mb-sm { margin-bottom: var(--space-sm); }
+.mb-md { margin-bottom: var(--space-md); }
+.mb-lg { margin-bottom: var(--space-lg); }
+
+/* ========== 卡片悬浮效果 ========== */
 .card-hover {
-  transition: all 0.3s;
+  transition: all 0.3s ease;
   cursor: pointer;
 }
 
@@ -215,8 +260,37 @@ body {
   box-shadow: var(--shadow-lg);
 }
 
-/* 选中态 */
-.selected-plan {
+/* ========== 选中态 ========== */
+.selected-plan,
+.selected-item {
   border: 2px solid var(--primary-color) !important;
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-md) !important;
+}
+
+/* ========== 网格布局 ========== */
+.xx-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-md);
+}
+
+.xx-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-md);
+}
+
+.xx-grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-md);
+}
+
+@media (max-width: 1200px) {
+  .xx-grid-4 { grid-template-columns: repeat(3, 1fr); }
+  .xx-grid-3 { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 768px) {
+  .xx-grid-4, .xx-grid-3, .xx-grid-2 { grid-template-columns: 1fr; }
 }