diff --git a/frontend/src/components/layout/FrontLayout.css b/frontend/src/components/layout/FrontLayout.css
index 7c9e9dc..140d629 100644
--- a/frontend/src/components/layout/FrontLayout.css
+++ b/frontend/src/components/layout/FrontLayout.css
@@ -132,7 +132,7 @@
   width: 32px;
   height: 32px;
   border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--color-accent), #8B8DFF);
+  background: linear-gradient(135deg, var(--color-accent), #8185F5);
   color: white;
   display: flex;
   align-items: center;
diff --git a/frontend/src/pages/front/AssetsPage.css b/frontend/src/pages/front/AssetsPage.css
index 19810f9..7f0cc1f 100644
--- a/frontend/src/pages/front/AssetsPage.css
+++ b/frontend/src/pages/front/AssetsPage.css
@@ -207,7 +207,7 @@
 }
 
 .asset-novel-card:hover {
-  border-color: #F59E0B;
+  border-color: #E8922C;
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
 }
@@ -647,7 +647,7 @@
   gap: 4px;
   padding: 2px 6px;
   background: #EEEDFF;
-  color: #6C63FF;
+  color: #5B5FED;
   border-radius: var(--radius-xs);
   font-size: 11px;
   font-weight: 600;
diff --git a/frontend/src/pages/front/AssetsPage.tsx b/frontend/src/pages/front/AssetsPage.tsx
index 8536150..fd1afae 100644
--- a/frontend/src/pages/front/AssetsPage.tsx
+++ b/frontend/src/pages/front/AssetsPage.tsx
@@ -6,7 +6,7 @@ import './AssetsPage.css';
 
 const fileTypeLabels: Record<string, { label: string; bg: string; color: string }> = {
   word: { label: 'Word', bg: '#E8F1FF', color: '#2563EB' },
-  excel: { label: 'Excel', bg: '#E8F8EE', color: '#059669' },
+  excel: { label: 'Excel', bg: '#E8F8EE', color: '#219B5E' },
   ppt: { label: 'PPT', bg: '#FEF2E2', color: '#D97706' },
   pdf: { label: 'PDF', bg: '#FDEBEB', color: '#DC2626' },
   txt: { label: 'TXT', bg: '#F1F3F7', color: '#64748B' },
@@ -424,10 +424,10 @@ const AssetsPage: React.FC = () => {
 
   const DEFAULT_CATEGORIES: AssetCategoryDef[] = [
     { id: 'file', name: '文件', type: 'file', color: '#5B5FED', icon: 'file', isDefault: true },
-    { id: 'image', name: '图片', type: 'image', color: '#10B981', icon: 'image', isDefault: true },
-    { id: 'video', name: '视频', type: 'video', color: '#EF4444', icon: 'video', isDefault: true },
+    { id: 'image', name: '图片', type: 'image', color: '#219B5E', icon: 'image', isDefault: true },
+    { id: 'video', name: '视频', type: 'video', color: '#D9383A', icon: 'video', isDefault: true },
     { id: 'audio', name: '音频', type: 'audio', color: '#8B5CF6', icon: 'audio', isDefault: true },
-    { id: 'novel', name: '小说', type: 'novel', color: '#F59E0B', icon: 'novel', isDefault: true },
+    { id: 'novel', name: '小说', type: 'novel', color: '#E8922C', icon: 'novel', isDefault: true },
     { id: 'other', name: '其他', type: 'other', color: '#64748B', icon: 'other', isDefault: true },
     { id: 'custom', name: '自定义', type: 'custom', color: '#EC4899', icon: 'custom', isDefault: true },
   ];
@@ -521,11 +521,11 @@ const AssetsPage: React.FC = () => {
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
               文件
             </button>
-            <button className={`assets-tab ${activeCategory === 'image' ? 'active' : ''}`} onClick={() => { setActiveCategory('image'); setSubCategory('all'); }} style={activeCategory === 'image' ? { '--tab-color': '#10B981', '--tab-bg': '#10B98118' } as React.CSSProperties : undefined}>
+            <button className={`assets-tab ${activeCategory === 'image' ? 'active' : ''}`} onClick={() => { setActiveCategory('image'); setSubCategory('all'); }} style={activeCategory === 'image' ? { '--tab-color': '#219B5E', '--tab-bg': '#10B98118' } as React.CSSProperties : undefined}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
               图片
             </button>
-            <button className={`assets-tab ${activeCategory === 'video' ? 'active' : ''}`} onClick={() => { setActiveCategory('video'); setSubCategory('all'); }} style={activeCategory === 'video' ? { '--tab-color': '#EF4444', '--tab-bg': '#EF444418' } as React.CSSProperties : undefined}>
+            <button className={`assets-tab ${activeCategory === 'video' ? 'active' : ''}`} onClick={() => { setActiveCategory('video'); setSubCategory('all'); }} style={activeCategory === 'video' ? { '--tab-color': '#D9383A', '--tab-bg': '#EF444418' } as React.CSSProperties : undefined}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 7 12 7 19 23 19 23 7"/></svg>
               视频
             </button>
@@ -533,7 +533,7 @@ const AssetsPage: React.FC = () => {
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
               音频
             </button>
-            <button className={`assets-tab ${activeCategory === 'novel' ? 'active' : ''}`} onClick={() => { setActiveCategory('novel'); setSubCategory('all'); }} style={activeCategory === 'novel' ? { '--tab-color': '#F59E0B', '--tab-bg': '#F59E0B18' } as React.CSSProperties : undefined}>
+            <button className={`assets-tab ${activeCategory === 'novel' ? 'active' : ''}`} onClick={() => { setActiveCategory('novel'); setSubCategory('all'); }} style={activeCategory === 'novel' ? { '--tab-color': '#E8922C', '--tab-bg': '#F59E0B18' } as React.CSSProperties : undefined}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
               小说
             </button>
@@ -576,7 +576,7 @@ const AssetsPage: React.FC = () => {
                 return (
                   <div key={asset.id} className="asset-novel-card" onClick={() => setSelectedAsset(asset)}>
                     <div className="novel-card-cover">
-                      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" style={{ color: '#F59E0B', opacity: 0.6 }}><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
+                      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" style={{ color: '#E8922C', opacity: 0.6 }}><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
                       <span className="novel-card-badge">小说</span>
                     </div>
                     <div className="novel-card-info">
@@ -603,10 +603,10 @@ const AssetsPage: React.FC = () => {
                       </span>
                     )}
                     {asset.category === 'image' && (
-                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10B981" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#219B5E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                     )}
                     {asset.category === 'video' && (
-                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 7 12 7 19 23 19 23 7"/></svg>
+                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#D9383A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 7 12 7 19 23 19 23 7"/></svg>
                     )}
                     {asset.category === 'audio' && (
                       <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#8B5CF6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
diff --git a/frontend/src/pages/front/ChannelPage.css b/frontend/src/pages/front/ChannelPage.css
index 7c32779..7224938 100644
--- a/frontend/src/pages/front/ChannelPage.css
+++ b/frontend/src/pages/front/ChannelPage.css
@@ -67,9 +67,9 @@
   align-items: center;
   gap: var(--space-xl);
   padding: var(--space-2xl);
-  background: linear-gradient(135deg, #F5F3FF 0%, #EEF0FF 100%);
+  background: linear-gradient(135deg, #F6F5FF 0%, #EEEDFF 100%);
   border-radius: var(--radius-xl);
-  border: 1px solid #E3E0FF;
+  border: 1px solid #EEEDFF;
   margin-bottom: var(--space-2xl);
   color: var(--color-accent);
 }
@@ -688,7 +688,7 @@
 .phone-frame {
   width: 320px;
   background: #FFFFFF;
-  border: 3px solid #1A1A1A;
+  border: 3px solid #101214;
   border-radius: 28px;
   overflow: hidden;
   box-shadow: var(--shadow-lg);
@@ -698,18 +698,18 @@
 }
 
 .phone-topbar {
-  background: #F5F5F5;
+  background: #F1F3F7;
   padding: 8px 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-bottom: 1px solid #E5E5E5;
+  border-bottom: 1px solid #E3E6EB;
 }
 
 .phone-notch {
   width: 60px;
   height: 6px;
-  background: #1A1A1A;
+  background: #101214;
   border-radius: 3px;
   margin-bottom: 6px;
 }
@@ -728,7 +728,7 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  background: #F8F8F8;
+  background: #F8F9FB;
 }
 
 .phone-msg {
@@ -763,7 +763,7 @@
 .phone-msg.bot .phone-bubble {
   background: #FFFFFF;
   color: var(--color-text-primary);
-  border: 1px solid #E5E5E5;
+  border: 1px solid #E3E6EB;
   border-bottom-left-radius: 4px;
 }
 
@@ -785,7 +785,7 @@
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border-top: 1px solid #E5E5E5;
+  border-top: 1px solid #E3E6EB;
   background: #FFFFFF;
 }
 
@@ -1040,7 +1040,7 @@
   background: var(--color-error);
 }
 .bind-confirm-btn.danger:hover {
-  background: var(--color-error-hover, #d32f2f);
+  background: var(--color-error-hover, #D9383A);
 }
 
 /* ===== Step Indicator ===== */
@@ -1460,19 +1460,19 @@
 }
 
 .qr-flow-hint.scan-error {
-  color: #EF4444;
+  color: #D9383A;
   font-weight: 500;
   padding: 6px 12px;
-  background: #FEF2F2;
+  background: #FDEBEB;
   border-radius: var(--radius-sm);
   border: 1px solid #FECACA;
 }
 
 .qr-flow-hint.scan-success {
-  color: #059669;
+  color: #219B5E;
   font-weight: 500;
   padding: 6px 12px;
-  background: #ECFDF5;
+  background: #E6F7EE;
   border-radius: var(--radius-sm);
   border: 1px solid #A7F3D0;
 }
@@ -1488,8 +1488,8 @@
 }
 
 .qr-placeholder-error {
-  color: #EF4444;
-  background: #FEF2F2;
+  color: #D9383A;
+  background: #FDEBEB;
   border: 1px dashed #FECACA;
   border-radius: var(--radius-md);
   font-weight: 500;
@@ -1584,7 +1584,7 @@
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
-  background: #333;
+  background: #101214;
   color: #fff;
   padding: 6px 12px;
   border-radius: var(--radius-md);
@@ -1606,7 +1606,7 @@
   left: 50%;
   transform: translateX(-50%);
   border: 5px solid transparent;
-  border-top-color: #333;
+  border-top-color: #101214;
 }
 
 .qwp-tooltip-wrapper:hover .qwp-tooltip-popup {
@@ -1770,7 +1770,7 @@
   bottom: var(--space-sm);
   left: 50%;
   transform: translateX(-50%);
-  background: #F59E0B;
+  background: #E8922C;
   color: white;
   font-size: 11px;
   padding: 2px 8px;
diff --git a/frontend/src/pages/front/EvolutionDashboard.css b/frontend/src/pages/front/EvolutionDashboard.css
index 8f2e1b8..f734cc8 100644
--- a/frontend/src/pages/front/EvolutionDashboard.css
+++ b/frontend/src/pages/front/EvolutionDashboard.css
@@ -14,7 +14,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--space-xl) var(--space-2xl);
-  background: linear-gradient(135deg, #1A1A2E 0%, #252547 100%);
+  background: linear-gradient(135deg, #5B5FED 0%, #4A4ECC 100%);
   color: #FFFFFF;
   flex-shrink: 0;
   gap: var(--space-2xl);
@@ -30,12 +30,12 @@
   width: 44px;
   height: 44px;
   border-radius: var(--radius-lg);
-  background: rgba(91, 95, 237, 0.3);
-  border: 1px solid rgba(91, 95, 237, 0.5);
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.28);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #A78BFA;
+  color: #FFFFFF;
 }
 
 .evo-header-title {
@@ -569,7 +569,7 @@
 }
 
 .evo-rank-num.top {
-  background: linear-gradient(135deg, #5B5FED, #A78BFA);
+  background: linear-gradient(135deg, #5B5FED, #8185F5);
   color: #FFFFFF;
 }
 
@@ -901,8 +901,8 @@
 .evo-suggestion-item svg {
   flex-shrink: 0;
   margin-top: 1px;
-  color: #F59E0B;
-  fill: #F59E0B;
+  color: #E8922C;
+  fill: #E8922C;
 }
 
 /* ===== Shared ===== */
@@ -1187,8 +1187,8 @@
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: #FEF2F2;
-  color: #EF4444;
+  background: #FDEBEB;
+  color: #D9383A;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1592,9 +1592,9 @@
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 }
 
-.evo-toast-success { background: #10B981; }
+.evo-toast-success { background: #219B5E; }
 .evo-toast-info { background: #5B5FED; }
-.evo-toast-error { background: #EF4444; }
+.evo-toast-error { background: #D9383A; }
 
 @keyframes toast-in {
   from { opacity: 0; transform: translateX(100px); }
@@ -1669,7 +1669,7 @@
   padding: 1px 6px;
   border-radius: 10px;
   background: #E6F7EE;
-  color: #10B981;
+  color: #219B5E;
   font-weight: 600;
 }
 
diff --git a/frontend/src/pages/front/EvolutionDashboard.tsx b/frontend/src/pages/front/EvolutionDashboard.tsx
index 545de98..a930820 100644
--- a/frontend/src/pages/front/EvolutionDashboard.tsx
+++ b/frontend/src/pages/front/EvolutionDashboard.tsx
@@ -30,28 +30,28 @@ const panelLabels: Record<string, string> = {
 
 // ==================== Config ====================
 const stateConfig: Record<SkillState, { label: string; color: string; bg: string; dot: string }> = {
-  baby: { label: '萌芽', color: '#E8922C', bg: '#FEF4E8', dot: '#F59E0B' },
-  main: { label: '成熟', color: '#219B5E', bg: '#E6F7EE', dot: '#10B981' },
+  baby: { label: '萌芽', color: '#E8922C', bg: '#FEF4E8', dot: '#E8922C' },
+  main: { label: '成熟', color: '#219B5E', bg: '#E6F7EE', dot: '#219B5E' },
   staging: { label: '验证', color: '#8B5CF6', bg: '#F3F0FF', dot: '#8B5CF6' },
   frozen: { label: '冻结', color: '#8B919E', bg: '#F1F3F7', dot: '#BFC4CE' },
 };
 
 const eventTypeConfig: Record<string, { label: string; color: string; icon: React.ReactNode }> = {
-  created: { label: '诞生', color: '#F59E0B', icon: <Icon size={12}><path d="M12 2L15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></Icon> },
-  promoted: { label: '晋升', color: '#10B981', icon: <Icon size={12}><polyline points="20 6 9 17 4 12"/></Icon> },
-  rejected: { label: '退回', color: '#EF4444', icon: <Icon size={12}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Icon> },
+  created: { label: '诞生', color: '#E8922C', icon: <Icon size={12}><path d="M12 2L15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></Icon> },
+  promoted: { label: '晋升', color: '#219B5E', icon: <Icon size={12}><polyline points="20 6 9 17 4 12"/></Icon> },
+  rejected: { label: '退回', color: '#D9383A', icon: <Icon size={12}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Icon> },
   frozen: { label: '冻结', color: '#8B919E', icon: <Icon size={12}><rect x="3" y="11" width="18" height="11" rx="2"/></Icon> },
   unfrozen: { label: '解冻', color: '#3B82F6', icon: <Icon size={12}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/></Icon> },
   edited: { label: '更新', color: '#5B5FED', icon: <Icon size={12}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/></Icon> },
-  deleted: { label: '删除', color: '#EF4444', icon: <Icon size={12}><polyline points="3 6 5 6 21 6"/></Icon> },
+  deleted: { label: '删除', color: '#D9383A', icon: <Icon size={12}><polyline points="3 6 5 6 21 6"/></Icon> },
   milestone: { label: '里程碑', color: '#8B5CF6', icon: <Icon size={12}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></Icon> },
-  rolled_back: { label: '回滚', color: '#EF4444', icon: <Icon size={12}><polyline points="1 4 1 10 7 10"/><path d="M3.5 17A9 9 0 1 0 2 12"/></Icon> },
+  rolled_back: { label: '回滚', color: '#D9383A', icon: <Icon size={12}><polyline points="1 4 1 10 7 10"/><path d="M3.5 17A9 9 0 1 0 2 12"/></Icon> },
 };
 
 const shareThemes = [
-  { id: 'deep', name: '深空蓝', bg: 'linear-gradient(135deg, #1A1A3E 0%, #2D2D6B 50%, #1A1A2E 100%)', accent: '#A78BFA', text: '#E8E6FF' },
-  { id: 'aurora', name: '极光绿', bg: 'linear-gradient(135deg, #0A2E1F 0%, #0F4A33 50%, #0A2E1F 100%)', accent: '#10B981', text: '#D1FAE5' },
-  { id: 'sunset', name: '暖阳橙', bg: 'linear-gradient(135deg, #3D1F00 0%, #5C2D0E 50%, #3D1F00 100%)', accent: '#F59E0B', text: '#FEF3C7' },
+  { id: 'deep', name: '深空蓝', bg: 'linear-gradient(135deg, #1A1A3E 0%, #2D2D6B 50%, #1A1A2E 100%)', accent: '#8185F5', text: '#E8E6FF' },
+  { id: 'aurora', name: '极光绿', bg: 'linear-gradient(135deg, #0A2E1F 0%, #0F4A33 50%, #0A2E1F 100%)', accent: '#219B5E', text: '#D1FAE5' },
+  { id: 'sunset', name: '暖阳橙', bg: 'linear-gradient(135deg, #3D1F00 0%, #5C2D0E 50%, #3D1F00 100%)', accent: '#E8922C', text: '#FEF3C7' },
 ];
 
 // ==================== Real API version history ====================
@@ -181,7 +181,7 @@ const SkillTreePanel: React.FC<{
               <button className="evo-btn evo-btn-outline evo-btn-sm" onClick={() => { setShowVersionHistory(true); loadVersionHistory(selectedSkill.skill_name); }}>版本历史</button>
               <button className="evo-btn evo-btn-outline evo-btn-sm">来源对话</button>
               {selectedSkill.state === 'main' && (
-                <button className="evo-btn evo-btn-outline evo-btn-sm" style={{ color: '#F59E0B', borderColor: '#F59E0B' }} onClick={() => { setPublishDesc(selectedSkill.description); setPublishPrice(0); setShowPublishModal(true); }}>
+                <button className="evo-btn evo-btn-outline evo-btn-sm" style={{ color: '#E8922C', borderColor: '#E8922C' }} onClick={() => { setPublishDesc(selectedSkill.description); setPublishPrice(0); setShowPublishModal(true); }}>
                   发布到市场
                 </button>
               )}
@@ -231,7 +231,7 @@ const SkillTreePanel: React.FC<{
                           {!isCurrent && (
                             <button
                               className="evo-btn evo-btn-outline evo-btn-sm"
-                              style={{ color: '#EF4444', borderColor: '#EF4444' }}
+                              style={{ color: '#D9383A', borderColor: '#D9383A' }}
                               onClick={() => setShowRollbackConfirm({ version: entryVersion })}
                             >
                               回滚到此版本
@@ -261,7 +261,7 @@ const SkillTreePanel: React.FC<{
             <p>确认回滚到版本 <strong>v{showRollbackConfirm.version}</strong>？当前版本 <strong>v{selectedSkill.version}</strong> 的修改将被撤销。</p>
             <div className="evo-confirm-actions">
               <button className="evo-btn evo-btn-outline" onClick={() => setShowRollbackConfirm(null)}>取消</button>
-              <button className="evo-btn evo-btn-primary" style={{ background: '#EF4444' }} onClick={() => handleRollback(showRollbackConfirm.version)}>确认回滚</button>
+              <button className="evo-btn evo-btn-primary" style={{ background: '#D9383A' }} onClick={() => handleRollback(showRollbackConfirm.version)}>确认回滚</button>
             </div>
           </div>
         </div>
@@ -506,7 +506,7 @@ const StatisticsPanel: React.FC<{ stats: StatisticsData; onViewSkill?: (skillNam
   const maxUse = sortedByUse[0]?.use_count || 1;
   const totalUse = stats.total_use_count;
   const zeroUseSkills = stats.low_use_skills || [];
-  const catColors = ['#5B5FED', '#F59E0B', '#10B981', '#EF4444', '#8B5CF6'];
+  const catColors = ['#5B5FED', '#E8922C', '#219B5E', '#D9383A', '#8B5CF6'];
 
   return (
     <div className="evo-panel-content">
@@ -772,7 +772,7 @@ const ProfilePanel: React.FC<{ profile: EvolutionProfile; skills: EvolutionSkill
                   transform="rotate(-90 80 80)" style={{ transition: 'stroke-dashoffset 1s ease' }} />
                 <defs>
                   <linearGradient id="levelGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-                    <stop offset="0%" stopColor="#5B5FED" /><stop offset="100%" stopColor="#A78BFA" />
+                    <stop offset="0%" stopColor="#5B5FED" /><stop offset="100%" stopColor="#8185F5" />
                   </linearGradient>
                 </defs>
               </svg>
@@ -812,7 +812,7 @@ const ProfilePanel: React.FC<{ profile: EvolutionProfile; skills: EvolutionSkill
           <div className="evo-tag-cloud">
             {profile.tags.map((tag, i) => {
               const sizes = ['evo-tag-sm', 'evo-tag-md', 'evo-tag-lg', 'evo-tag-xl'];
-              const tagColors = ['#5B5FED', '#F59E0B', '#10B981', '#8B5CF6', '#EF4444', '#3B82F6'];
+              const tagColors = ['#5B5FED', '#E8922C', '#219B5E', '#8B5CF6', '#D9383A', '#3B82F6'];
               return <span key={tag} className={`evo-tag ${sizes[Math.min(i, sizes.length - 1)]}`} style={{ color: tagColors[i % 6], borderColor: tagColors[i % 6] }}>{tag}</span>;
             })}
           </div>
@@ -1026,8 +1026,8 @@ const EvolutionDashboard: React.FC = () => {
         </div>
         <div className="evo-header-stats">
           <div className="evo-header-stat"><span className="evo-hs-num">{totalSkills}</span><span className="evo-hs-label">技能总数</span></div>
-          <div className="evo-header-stat"><span className="evo-hs-num" style={{ color: '#10B981' }}>{mainCount}</span><span className="evo-hs-label">已成熟</span></div>
-          <div className="evo-header-stat"><span className="evo-hs-num" style={{ color: '#F59E0B' }}>{babyCount}</span><span className="evo-hs-label">萌芽中</span></div>
+          <div className="evo-header-stat"><span className="evo-hs-num" style={{ color: '#219B5E' }}>{mainCount}</span><span className="evo-hs-label">已成熟</span></div>
+          <div className="evo-header-stat"><span className="evo-hs-num" style={{ color: '#E8922C' }}>{babyCount}</span><span className="evo-hs-label">萌芽中</span></div>
         </div>
       </header>
 
diff --git a/frontend/src/pages/front/KnowledgePage.css b/frontend/src/pages/front/KnowledgePage.css
index a96da6f..a6c6d9e 100644
--- a/frontend/src/pages/front/KnowledgePage.css
+++ b/frontend/src/pages/front/KnowledgePage.css
@@ -444,7 +444,7 @@
 
 .doc-processing-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, #F59E0B, #FBBF24);
+  background: linear-gradient(90deg, #E8922C, #F0A94C);
   border-radius: 3px;
   transition: width 0.8s ease;
 }
diff --git a/frontend/src/pages/front/LandingPage.tsx b/frontend/src/pages/front/LandingPage.tsx
index ffd2634..3039c12 100644
--- a/frontend/src/pages/front/LandingPage.tsx
+++ b/frontend/src/pages/front/LandingPage.tsx
@@ -17,7 +17,7 @@ const appGradients: Record<string, string> = {
   a3: 'linear-gradient(135deg,#5B5FED 0%,#818CF8 100%)',
   a4: 'linear-gradient(135deg,#4F8DF9 0%,#38BDF8 100%)',
   a5: 'linear-gradient(135deg,#6366F1 0%,#7DD3FC 100%)',
-  a6: 'linear-gradient(135deg,#5B5FED 0%,#A78BFA 100%)',
+  a6: 'linear-gradient(135deg,#5B5FED 0%,#8185F5 100%)',
   a7: 'linear-gradient(135deg,#4F8DF9 0%,#818CF8 100%)',
   a8: 'linear-gradient(135deg,#6366F1 0%,#4F8DF9 100%)',
 };
diff --git a/frontend/src/pages/front/LoginPage.css b/frontend/src/pages/front/LoginPage.css
index 0437b58..1da214b 100644
--- a/frontend/src/pages/front/LoginPage.css
+++ b/frontend/src/pages/front/LoginPage.css
@@ -30,7 +30,7 @@
 
 .bg-circle.c2 {
   width: 400px; height: 400px;
-  background: #8B8DFF;
+  background: #8185F5;
   bottom: -100px; left: -50px;
 }
 
@@ -67,7 +67,7 @@
 /* Brand Panel */
 .login-brand-panel {
   width: 400px;
-  background: linear-gradient(135deg, #2D2B55 0%, #1A1A2E 50%, #2D2B55 100%);
+  background: linear-gradient(135deg, #5B5FED 0%, #4A4ECC 50%, #5B5FED 100%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -89,7 +89,7 @@
   position: absolute;
   width: 200px; height: 200px;
   border-radius: 50%;
-  background: radial-gradient(circle, rgba(139,141,255,0.2) 0%, transparent 70%);
+  background: radial-gradient(circle, rgba(129,133,245,0.2) 0%, transparent 70%);
   bottom: -30px; left: -30px;
 }
 
@@ -132,7 +132,7 @@
 }
 
 .bf-icon {
-  color: #6C63FF;
+  color: #FFFFFF;
   font-weight: 700;
   font-size: var(--text-base);
 }
@@ -219,7 +219,7 @@
 
 .login-submit-btn {
   height: 46px;
-  background: linear-gradient(135deg, #5B5FED, #6C63FF);
+  background: linear-gradient(135deg, #5B5FED, #4A4ECC);
   color: white;
   border-radius: var(--radius-lg);
   font-size: var(--text-base);
diff --git a/frontend/src/pages/front/MarketPage.css b/frontend/src/pages/front/MarketPage.css
index c0f6b9f..a0d28c5 100644
--- a/frontend/src/pages/front/MarketPage.css
+++ b/frontend/src/pages/front/MarketPage.css
@@ -1,1637 +1,1637 @@
-/* ===== Market Page ===== */
-.market-page {
-  height: 100%;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  animation: fadeIn var(--transition-normal);
-}
-
-.market-page-inner {
-  padding: var(--space-3xl);
-  flex: 1;
-}
-
-/* Page Header */
-.market-page-header {
-  margin-bottom: var(--space-2xl);
-  flex-shrink: 0;
-}
-
-.market-title {
-  font-size: var(--text-xl);
-  font-weight: 700;
-  color: var(--color-text-primary);
-  letter-spacing: -0.02em;
-  margin-bottom: var(--space-xs);
-}
-
-.market-subtitle {
-  font-size: var(--text-sm);
-  color: var(--color-text-tertiary);
-}
-
-/* Tabs + Toolbar */
-.market-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-3xl);
-  gap: var(--space-lg);
-  flex-wrap: wrap;
-}
-
-.market-tabs {
-  display: flex;
-  gap: var(--space-sm);
-  padding: 4px;
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-lg);
-  width: fit-content;
-}
-
-.market-tab {
-  padding: var(--space-sm) var(--space-lg);
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  transition: all var(--transition-fast);
-  white-space: nowrap;
-}
-
-.market-tab:hover {
-  color: var(--color-text-primary);
-}
-
-.market-tab.active {
-  background: var(--color-bg-secondary);
-  color: var(--color-accent);
-  font-weight: 600;
-  box-shadow: var(--shadow-xs);
-}
-
-/* App Grid */
-.market-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-xl);
-}
-
-@media (max-width: 1200px) {
-  .market-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .market-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Market Card */
-.market-card {
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  padding: var(--space-2xl);
-  cursor: pointer;
-  transition: all var(--transition-normal);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-}
-
-.market-card:hover {
-  border-color: var(--color-accent);
-  box-shadow: var(--shadow-lg);
-  transform: translateY(-3px);
-}
-
-.market-card-top {
-  display: flex;
-  gap: var(--space-md);
-}
-
-.market-card-icon {
-  font-size: var(--text-2xl);
-  width: 48px;
-  height: 48px;
-  border-radius: var(--radius-lg);
-  background: var(--color-accent-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  line-height: 1;
-}
-
-.market-card-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.market-card-name-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-}
-
-.market-card-name {
-  font-size: var(--text-md);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 2px;
-}
-
-.market-card-publisher {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.market-card-desc {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-  flex: 1;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.market-card-bottom {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: var(--space-md);
-  border-top: 1px solid var(--color-border-light);
-}
-
-.market-card-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-.market-card-uninstall-btn {
-  padding: 2px 10px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-danger, #ef4444);
-  background: transparent;
-  border: 1px solid var(--color-danger, #ef4444);
-  border-radius: var(--radius-sm, 4px);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  line-height: 1.5;
-}
-
-.market-card-uninstall-btn:hover {
-  background: var(--color-danger, #ef4444);
-  color: white;
-}
-
-.market-card-install-btn {
-  padding: 2px 10px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-accent, #6C63FF);
-  background: transparent;
-  border: 1px solid var(--color-accent, #6C63FF);
-  border-radius: var(--radius-sm, 4px);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  line-height: 1.5;
-}
-
-.market-card-install-btn:hover {
-  background: var(--color-accent, #6C63FF);
-  color: white;
-}
-
-.market-card-price {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-warning);
-}
-
-.market-card-installs {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  display: flex;
-  align-items: center;
-  gap: 3px;
-}
-
-/* Star Rating */
-.star-rating {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.star-icons {
-  display: flex;
-  gap: 1px;
-  color: #F59E0B;
-}
-
-.star-count {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-}
-
-/* Official Badge */
-.official-badge {
-  display: flex;
-  align-items: center;
-  color: var(--color-accent);
-  flex-shrink: 0;
-}
-
-/* Empty State */
-.market-empty {
-  text-align: center;
-  padding: var(--space-5xl);
-  font-size: var(--text-md);
-  color: var(--color-text-tertiary);
-}
-
-/* ===== Modal ===== */
-.market-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--z-modal);
-  animation: fadeIn var(--transition-fast);
-  padding: var(--space-2xl);
-}
-
-.market-modal {
-  background: var(--color-bg-secondary);
-  border-radius: var(--radius-2xl);
-  width: 100%;
-  max-width: 560px;
-  max-height: 85vh;
-  overflow-y: auto;
-  position: relative;
-  animation: slideUp var(--transition-normal);
-  box-shadow: var(--shadow-xl);
-}
-
-.market-modal-close {
-  position: absolute;
-  top: var(--space-lg);
-  right: var(--space-lg);
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-tertiary);
-  transition: all var(--transition-fast);
-  z-index: 1;
-}
-
-.market-modal-close:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-primary);
-}
-
-/* Modal Body */
-.market-modal-body {
-  padding: var(--space-3xl);
-}
-
-.modal-app-header {
-  display: flex;
-  gap: var(--space-lg);
-  align-items: flex-start;
-  margin-bottom: var(--space-xl);
-}
-
-.modal-app-icon {
-  font-size: var(--text-3xl);
-  width: 64px;
-  height: 64px;
-  border-radius: var(--radius-xl);
-  background: var(--color-accent-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  line-height: 1;
-}
-
-.modal-app-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.modal-app-title-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-sm);
-}
-
-.modal-app-name {
-  font-size: var(--text-xl);
-  font-weight: 700;
-  color: var(--color-text-primary);
-  letter-spacing: -0.02em;
-}
-
-.modal-app-meta {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-.modal-app-type-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 3px 10px;
-  border-radius: var(--radius-full);
-  background: var(--color-accent-light);
-  color: var(--color-accent);
-  font-size: var(--text-xs);
-  font-weight: 600;
-}
-
-.modal-app-publisher {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-}
-
-/* Modal Stats */
-.modal-app-stats {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2xl);
-  padding: var(--space-lg);
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-lg);
-  margin-bottom: var(--space-xl);
-}
-
-.modal-stat {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.modal-stat-label {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-}
-
-.modal-stat-value {
-  font-size: var(--text-md);
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-/* Modal Description */
-.modal-app-desc {
-  margin-bottom: var(--space-xl);
-}
-
-.modal-app-desc h4 {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-sm);
-}
-
-.modal-app-desc p {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  line-height: 1.7;
-}
-
-/* Modal Bottom */
-.modal-app-bottom {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-lg);
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-lg);
-  margin-bottom: var(--space-xl);
-}
-
-.modal-price-area {
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-sm);
-}
-
-.modal-price {
-  font-size: var(--text-lg);
-  font-weight: 700;
-  color: var(--color-warning);
-}
-
-.modal-original-price {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  text-decoration: line-through;
-}
-
-.modal-install-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-md) var(--space-xl);
-  background: var(--color-accent);
-  color: white;
-  border-radius: var(--radius-lg);
-  font-size: var(--text-sm);
-  font-weight: 600;
-  transition: all var(--transition-fast);
-}
-
-.modal-install-btn:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.modal-install-btn.installed {
-  background: var(--color-success-light);
-  color: var(--color-success);
-  cursor: default;
-}
-
-.modal-install-btn.uninstall {
-  background: white;
-  color: var(--color-danger, #ef4444);
-  border: 1px solid var(--color-danger, #ef4444);
-  cursor: pointer;
-}
-
-.modal-install-btn.uninstall:hover:not(:disabled) {
-  background: var(--color-danger, #ef4444);
-  color: white;
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-/* Reviews */
-.modal-reviews {
-  padding-top: var(--space-xl);
-  border-top: 1px solid var(--color-border-light);
-}
-
-.modal-reviews h4 {
-  font-size: var(--text-sm);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-lg);
-}
-
-.reviews-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-}
-
-.review-item {
-  padding: var(--space-lg);
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-lg);
-}
-
-.review-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-sm);
-}
-
-.review-user {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.review-avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius-full);
-  background: linear-gradient(135deg, var(--color-accent), #8B8DFF);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--text-xs);
-  font-weight: 600;
-}
-
-.review-username {
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.review-content {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  line-height: 1.6;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .market-page-inner {
-    padding: var(--space-lg);
-  }
-
-  .market-tabs {
-    width: 100%;
-    overflow-x: auto;
-    flex-wrap: nowrap;
-  }
-
-  .market-modal {
-    max-width: 100%;
-    max-height: 90vh;
-    border-radius: var(--radius-xl);
-  }
-
-  .market-modal-body {
-    padding: var(--space-xl);
-  }
-
-  .modal-app-header {
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  .modal-app-bottom {
-    flex-direction: column;
-    gap: var(--space-md);
-  }
-}
-
-/* ===== Market Actions ===== */
-.market-actions {
-  display: flex;
-  gap: var(--space-sm);
-  flex-shrink: 0;
-}
-
-.action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: var(--space-sm) var(--space-lg);
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  white-space: nowrap;
-}
-
-.action-btn:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: var(--color-accent-subtle);
-}
-
-.action-btn.create-btn {
-  background: var(--color-accent);
-  color: var(--color-text-inverse);
-  border-color: var(--color-accent);
-}
-
-.action-btn.create-btn:hover {
-  background: var(--color-accent-hover);
-}
-
-/* ===== MCP Client Badge ===== */
-.mcp-client-badge {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-md) var(--space-lg);
-  margin-bottom: var(--space-lg);
-  background: var(--color-accent-subtle);
-  border: 1px solid var(--color-accent-light);
-  border-radius: var(--radius-md);
-  font-size: var(--text-xs);
-  color: var(--color-text-secondary);
-}
-
-/* ===== Modal Header ===== */
-.market-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-xl) var(--space-2xl);
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.market-modal-header h2 {
-  font-size: var(--text-lg);
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.market-modal-header .market-modal-close {
-  position: static;
-}
-
-/* ===== Create Tool Form ===== */
-.create-tool-modal {
-  max-width: 600px;
-}
-
-.create-tool-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-}
-
-.form-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-.form-label {
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.form-label .required {
-  color: var(--color-error);
-}
-
-.form-input {
-  padding: var(--space-sm) var(--space-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  color: var(--color-text-primary);
-  background: var(--color-bg-primary);
-  outline: none;
-  transition: border-color var(--transition-fast);
-}
-
-.form-input:focus {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-light);
-}
-
-.form-input:disabled {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-tertiary);
-}
-
-.form-textarea {
-  padding: var(--space-sm) var(--space-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  color: var(--color-text-primary);
-  background: var(--color-bg-primary);
-  outline: none;
-  resize: vertical;
-  font-family: var(--font-sans);
-  transition: border-color var(--transition-fast);
-}
-
-.form-textarea:focus {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-light);
-}
-
-/* Creation Method Tabs */
-.creation-method-tabs {
-  display: flex;
-  gap: var(--space-sm);
-}
-
-.method-tab {
-  flex: 1;
-  padding: var(--space-sm) var(--space-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-bg-primary);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.method-tab:hover {
-  border-color: var(--color-accent-light);
-}
-
-.method-tab.active {
-  border-color: var(--color-accent);
-  background: var(--color-accent-subtle);
-  color: var(--color-accent);
-}
-
-/* Pricing Toggle */
-.pricing-toggle {
-  display: flex;
-  gap: var(--space-xs);
-  padding: 4px;
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-md);
-  width: fit-content;
-}
-
-.toggle-btn {
-  padding: var(--space-xs) var(--space-lg);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.toggle-btn.active {
-  background: var(--color-bg-secondary);
-  color: var(--color-accent);
-  box-shadow: var(--shadow-xs);
-}
-
-.price-input-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  margin-top: var(--space-sm);
-}
-
-.price-input {
-  width: 140px;
-}
-
-.price-unit {
-  font-size: var(--text-sm);
-  color: var(--color-text-tertiary);
-}
-
-/* Checkbox */
-.form-checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-}
-
-.form-checkbox-label input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  accent-color: var(--color-accent);
-}
-
-/* Compliance Notice */
-.compliance-notice {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-sm);
-  padding: var(--space-md);
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-md);
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  line-height: 1.5;
-}
-
-/* Submit Button */
-.form-submit-btn {
-  padding: var(--space-md) var(--space-xl);
-  background: var(--color-accent);
-  color: white;
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  font-weight: 600;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.form-submit-btn:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-}
-
-.form-submit-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Audit Progress */
-.audit-progress {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-xl);
-  padding: var(--space-2xl) 0;
-}
-
-.audit-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--color-border-light);
-  border-top-color: var(--color-accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.audit-spinner.small {
-  width: 20px;
-  height: 20px;
-  border-width: 2px;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.audit-progress h3 {
-  font-size: var(--text-md);
-  color: var(--color-text-primary);
-}
-
-.audit-steps {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-  width: 100%;
-  max-width: 320px;
-}
-
-.audit-step {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  font-size: var(--text-sm);
-  color: var(--color-text-tertiary);
-}
-
-.audit-step.done {
-  color: var(--color-success);
-}
-
-.audit-step.active {
-  color: var(--color-accent);
-  font-weight: 500;
-}
-
-.audit-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--color-accent);
-  animation: pulse 1s ease-in-out infinite;
-}
-
-.audit-dot-empty {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--color-border);
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-/* Audit Done */
-.audit-done {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-2xl) 0;
-  text-align: center;
-}
-
-.audit-done svg {
-  color: var(--color-success);
-  width: 48px;
-  height: 48px;
-}
-
-.audit-done h3 {
-  font-size: var(--text-lg);
-  color: var(--color-text-primary);
-}
-
-.audit-done p {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-}
-
-/* ===== Hub Import Modal ===== */
-.hub-import-modal {
-  max-width: 560px;
-}
-
-.hub-import-desc {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  line-height: 1.6;
-  margin-bottom: var(--space-xl);
-}
-
-.hub-free-note {
-  display: block;
-  margin-top: var(--space-sm);
-  padding: var(--space-sm) var(--space-md);
-  background: var(--color-success-light);
-  color: var(--color-success);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  font-weight: 500;
-}
-
-/* 导入定价字段 */
-.hub-price-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-  margin: var(--space-md) 0;
-  padding: var(--space-md);
-  background: var(--color-bg-subtle, #F8F9FC);
-  border: 1px solid var(--color-border, #E5E7EB);
-  border-radius: var(--radius-sm);
-}
-.hub-price-input {
-  max-width: 200px;
-  padding: 8px 12px;
-  border: 1px solid var(--color-border, #D1D5DB);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-sm);
-  background: #fff;
-  color: var(--color-text, #1A1F36);
-}
-.hub-price-input:focus {
-  outline: none;
-  border-color: var(--color-primary, #6C63FF);
-  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.15);
-}
-.hub-price-hint {
-  font-size: var(--text-xs);
-  color: var(--color-text-muted, #6B7280);
-  line-height: 1.5;
-}
-
-.hub-platforms {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-xl);
-}
-
-.hub-platform-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-md);
-  background: var(--color-bg-tertiary);
-  border: 1px solid var(--color-border-light);
-  border-radius: var(--radius-md);
-  transition: border-color var(--transition-fast);
-}
-
-.hub-platform-card:hover {
-  border-color: var(--color-accent-light);
-}
-
-.hub-platform-info {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-.hub-platform-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: var(--radius-md);
-  background: var(--color-accent-subtle);
-  color: var(--color-accent);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.hub-platform-url {
-  display: block;
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  margin-top: 2px;
-}
-
-.hub-import-btn {
-  padding: var(--space-xs) var(--space-md);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  font-weight: 500;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.hub-import-btn:hover:not(:disabled) {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.hub-import-btn.primary {
-  background: var(--color-accent);
-  color: white;
-  border-color: var(--color-accent);
-  padding: var(--space-sm) var(--space-lg);
-  font-size: var(--text-sm);
-}
-
-.hub-import-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.hub-divider {
-  text-align: center;
-  margin-bottom: var(--space-md);
-  font-size: var(--text-xs);
-  color: var(--color-text-disabled);
-  position: relative;
-}
-
-.hub-divider::before,
-.hub-divider::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  width: 30%;
-  height: 1px;
-  background: var(--color-border-light);
-}
-
-.hub-divider::before { left: 0; }
-.hub-divider::after { right: 0; }
-
-.hub-divider span {
-  background: var(--color-bg-secondary);
-  padding: 0 var(--space-md);
-  position: relative;
-}
-
-.hub-custom-input-row {
-  display: flex;
-  gap: var(--space-sm);
-}
-
-.hub-custom-input-row .form-input {
-  flex: 1;
-}
-
-.hub-importing-status {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-sm);
-  margin-top: var(--space-lg);
-  padding: var(--space-md);
-  color: var(--color-text-secondary);
-  font-size: var(--text-sm);
-}
-
-/* ===== Agent Connect Modal ===== */
-.agent-connect-modal {
-  max-width: 560px;
-}
-
-.agent-platforms {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-.agent-platform-card {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-lg);
-  background: var(--color-bg-tertiary);
-  border: 1px solid var(--color-border-light);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.agent-platform-card:hover {
-  border-color: var(--color-accent-light);
-  background: var(--color-accent-subtle);
-}
-
-.agent-platform-card.connected {
-  border-color: var(--color-success);
-  background: var(--color-success-light);
-}
-
-.agent-platform-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius-md);
-  background: var(--color-accent-subtle);
-  color: var(--color-accent);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.agent-platform-info {
-  flex: 1;
-}
-
-.agent-platform-info strong {
-  display: block;
-  font-size: var(--text-sm);
-  color: var(--color-text-primary);
-  margin-bottom: 2px;
-}
-
-.agent-platform-info span {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-}
-
-.connect-indicator {
-  font-size: var(--text-xs);
-  color: var(--color-accent);
-  font-weight: 500;
-}
-
-.connected-badge {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: var(--text-xs);
-  color: var(--color-success);
-  font-weight: 500;
-}
-
-.agent-config-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-}
-
-.back-btn {
-  align-self: flex-start;
-  padding: var(--space-xs) var(--space-sm);
-  background: none;
-  border: none;
-  color: var(--color-text-tertiary);
-  font-size: var(--text-sm);
-  cursor: pointer;
-  transition: color var(--transition-fast);
-}
-
-.back-btn:hover {
-  color: var(--color-accent);
-}
-
-/* ===== Transport Type Selector ===== */
-.transport-type-selector {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-.transport-option {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.transport-option:hover {
-  border-color: var(--color-accent-light);
-}
-
-.transport-option.active {
-  border-color: var(--color-accent);
-  background: var(--color-accent-subtle);
-}
-
-.transport-option input[type="radio"] {
-  accent-color: var(--color-accent);
-  flex-shrink: 0;
-}
-
-.transport-option-content {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.transport-option-content strong {
-  font-size: var(--text-sm);
-  color: var(--color-text-primary);
-}
-
-.transport-option-content span {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-}
-
-/* ===== AI Chat Redirect Card (修改3) ===== */
-.ai-chat-redirect-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-lg);
-  padding: var(--space-2xl);
-  background: var(--color-accent-subtle);
-  border: 1px solid var(--color-accent-light);
-  border-radius: var(--radius-lg);
-  text-align: center;
-}
-
-.ai-chat-redirect-card svg {
-  color: var(--color-accent);
-}
-
-.ai-chat-redirect-content strong {
-  font-size: var(--text-base);
-  color: var(--color-text-primary);
-}
-
-.ai-chat-redirect-content p {
-  font-size: var(--text-sm);
-  color: var(--color-text-secondary);
-  line-height: 1.6;
-}
-
-/* ===== Skills Content Input ===== */
-.skills-content-input {
-  font-family: var(--font-mono);
-  font-size: 13px;
-  line-height: 1.7;
-  min-height: 160px;
-}
-
-.skills-upload-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-sm);
-  margin-top: var(--space-xs);
-}
-
-.file-upload-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: var(--space-xs) var(--space-md);
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.file-upload-btn:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.format-check-btn {
-  padding: var(--space-xs) var(--space-md);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  font-weight: 500;
-  border: 1px solid var(--color-accent);
-  background: transparent;
-  color: var(--color-accent);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.format-check-btn:hover:not(:disabled) {
-  background: var(--color-accent);
-  color: white;
-}
-
-.format-check-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.skills-file-indicator {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: var(--space-xs) var(--space-sm);
-  font-size: var(--text-xs);
-  color: var(--color-success);
-  background: var(--color-success-light);
-  border-radius: var(--radius-sm);
-}
-
-.format-check-status {
-  padding: var(--space-sm) var(--space-md);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  line-height: 1.5;
-}
-
-.format-check-status.checking {
-  background: var(--color-accent-subtle);
-  color: var(--color-accent);
-}
-
-.format-check-status.pass {
-  background: var(--color-success-light);
-  color: var(--color-success);
-  display: flex;
-  align-items: flex-start;
-  gap: 4px;
-}
-
-.format-check-status.fail {
-  background: var(--color-error-light);
-  color: var(--color-error);
-}
-
-/* ===== Hub Import Steps Guide ===== */
-.hub-import-steps-guide {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-lg);
-  padding: var(--space-md) var(--space-lg);
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-md);
-  flex-wrap: wrap;
-}
-
-.hub-step {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--text-xs);
-  color: var(--color-text-secondary);
-}
-
-.hub-step-num {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--color-accent);
-  color: white;
-  font-size: 11px;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.hub-step-arrow {
-  color: var(--color-text-disabled);
-  font-size: var(--text-xs);
-}
-
-.hub-step-arrow::after {
-  content: '\2192';
-}
-
-/* ===== Hub Platform Card (with visit + import) ===== */
-.hub-platform-actions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-  min-width: 260px;
-}
-
-.hub-visit-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  align-self: flex-end;
-  padding: var(--space-xs) var(--space-md);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  font-weight: 500;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.hub-visit-btn:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: var(--color-accent-subtle);
-}
-
-.hub-import-row {
-  display: flex;
-  gap: var(--space-xs);
-}
-
-.hub-import-col {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-}
-
-.hub-name-preview {
-  font-size: var(--text-xs);
-  color: var(--color-text-secondary);
-  padding: 2px 0;
-}
-
-.hub-name-preview strong {
-  color: var(--color-accent);
-}
-
-.hub-url-input {
-  flex: 1;
-  padding: var(--space-xs) var(--space-sm);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  color: var(--color-text-primary);
-  background: var(--color-bg-primary);
-  outline: none;
-  transition: border-color var(--transition-fast);
-}
-
-.hub-url-input:focus {
-  border-color: var(--color-accent);
-}
-
-.hub-url-input:disabled {
-  background: var(--color-bg-tertiary);
-}
-
-.hub-importing-text {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 10px;
-  white-space: nowrap;
-}
-
-.audit-spinner.tiny {
-  width: 12px;
-  height: 12px;
-  border-width: 2px;
-}
-
-/* ===== Import Progress ===== */
-.hub-import-progress {
-  margin-top: var(--space-lg);
-  padding: var(--space-lg);
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-md);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-}
-
-.import-progress-steps {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-xs);
-}
-
-.import-step {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 10px;
-  color: var(--color-text-disabled);
-}
-
-.import-step.active {
-  color: var(--color-accent);
-}
-
-.import-step.done {
-  color: var(--color-success);
-}
-
-.import-step-dot {
-  display: flex;
-  align-items: center;
-}
-
-.import-step-dot svg {
-  width: 12px;
-  height: 12px;
-}
-
-.import-status-msg {
-  font-size: var(--text-xs);
-  color: var(--color-accent);
-  text-align: center;
-  font-weight: 500;
-}
-
-@media (max-width: 768px) {
-  .hub-platform-card {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  .hub-platform-actions {
-    min-width: auto;
-  }
-}
-
-/* ===== MCP Code Editor ===== */
-.mcp-code-editor {
-  padding: var(--space-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-family: var(--font-mono);
-  font-size: 13px;
-  line-height: 1.6;
-  color: #cdd6f4;
-  background: #1e1e2e;
-  min-height: 200px;
-  resize: vertical;
-  outline: none;
-  transition: border-color var(--transition-fast);
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.mcp-code-editor:focus {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px var(--color-accent-light);
-}
-
-.mcp-code-editor::placeholder {
-  color: #6c7086;
-  opacity: 0.7;
-}
-
-.mcp-code-hint {
-  font-size: var(--text-xs);
-  color: var(--color-text-tertiary);
-}
-
-.hub-code-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-lg);
-  padding: var(--space-lg);
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border-light);
-}
+/* ===== Market Page ===== */
+.market-page {
+  height: 100%;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  animation: fadeIn var(--transition-normal);
+}
+
+.market-page-inner {
+  padding: var(--space-3xl);
+  flex: 1;
+}
+
+/* Page Header */
+.market-page-header {
+  margin-bottom: var(--space-2xl);
+  flex-shrink: 0;
+}
+
+.market-title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  letter-spacing: -0.02em;
+  margin-bottom: var(--space-xs);
+}
+
+.market-subtitle {
+  font-size: var(--text-sm);
+  color: var(--color-text-tertiary);
+}
+
+/* Tabs + Toolbar */
+.market-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3xl);
+  gap: var(--space-lg);
+  flex-wrap: wrap;
+}
+
+.market-tabs {
+  display: flex;
+  gap: var(--space-sm);
+  padding: 4px;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-lg);
+  width: fit-content;
+}
+
+.market-tab {
+  padding: var(--space-sm) var(--space-lg);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.market-tab:hover {
+  color: var(--color-text-primary);
+}
+
+.market-tab.active {
+  background: var(--color-bg-secondary);
+  color: var(--color-accent);
+  font-weight: 600;
+  box-shadow: var(--shadow-xs);
+}
+
+/* App Grid */
+.market-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-xl);
+}
+
+@media (max-width: 1200px) {
+  .market-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .market-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Market Card */
+.market-card {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-2xl);
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.market-card:hover {
+  border-color: var(--color-accent);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-3px);
+}
+
+.market-card-top {
+  display: flex;
+  gap: var(--space-md);
+}
+
+.market-card-icon {
+  font-size: var(--text-2xl);
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-lg);
+  background: var(--color-accent-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.market-card-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.market-card-name-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.market-card-name {
+  font-size: var(--text-md);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 2px;
+}
+
+.market-card-publisher {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.market-card-desc {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.market-card-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: var(--space-md);
+  border-top: 1px solid var(--color-border-light);
+}
+
+.market-card-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.market-card-uninstall-btn {
+  padding: 2px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-danger, #D9383A);
+  background: transparent;
+  border: 1px solid var(--color-danger, #D9383A);
+  border-radius: var(--radius-sm, 4px);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  line-height: 1.5;
+}
+
+.market-card-uninstall-btn:hover {
+  background: var(--color-danger, #D9383A);
+  color: white;
+}
+
+.market-card-install-btn {
+  padding: 2px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-accent);
+  background: transparent;
+  border: 1px solid var(--color-accent);
+  border-radius: var(--radius-sm, 4px);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  line-height: 1.5;
+}
+
+.market-card-install-btn:hover {
+  background: var(--color-accent);
+  color: white;
+}
+
+.market-card-price {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-warning);
+}
+
+.market-card-installs {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+/* Star Rating */
+.star-rating {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.star-icons {
+  display: flex;
+  gap: 1px;
+  color: #E8922C;
+}
+
+.star-count {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* Official Badge */
+.official-badge {
+  display: flex;
+  align-items: center;
+  color: var(--color-accent);
+  flex-shrink: 0;
+}
+
+/* Empty State */
+.market-empty {
+  text-align: center;
+  padding: var(--space-5xl);
+  font-size: var(--text-md);
+  color: var(--color-text-tertiary);
+}
+
+/* ===== Modal ===== */
+.market-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal);
+  animation: fadeIn var(--transition-fast);
+  padding: var(--space-2xl);
+}
+
+.market-modal {
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-2xl);
+  width: 100%;
+  max-width: 560px;
+  max-height: 85vh;
+  overflow-y: auto;
+  position: relative;
+  animation: slideUp var(--transition-normal);
+  box-shadow: var(--shadow-xl);
+}
+
+.market-modal-close {
+  position: absolute;
+  top: var(--space-lg);
+  right: var(--space-lg);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-tertiary);
+  transition: all var(--transition-fast);
+  z-index: 1;
+}
+
+.market-modal-close:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+/* Modal Body */
+.market-modal-body {
+  padding: var(--space-3xl);
+}
+
+.modal-app-header {
+  display: flex;
+  gap: var(--space-lg);
+  align-items: flex-start;
+  margin-bottom: var(--space-xl);
+}
+
+.modal-app-icon {
+  font-size: var(--text-3xl);
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-xl);
+  background: var(--color-accent-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.modal-app-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.modal-app-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-sm);
+}
+
+.modal-app-name {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  letter-spacing: -0.02em;
+}
+
+.modal-app-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.modal-app-type-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: var(--radius-full);
+  background: var(--color-accent-light);
+  color: var(--color-accent);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.modal-app-publisher {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* Modal Stats */
+.modal-app-stats {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xl);
+  padding: var(--space-lg);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-xl);
+}
+
+.modal-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.modal-stat-label {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+}
+
+.modal-stat-value {
+  font-size: var(--text-md);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+/* Modal Description */
+.modal-app-desc {
+  margin-bottom: var(--space-xl);
+}
+
+.modal-app-desc h4 {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-sm);
+}
+
+.modal-app-desc p {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.7;
+}
+
+/* Modal Bottom */
+.modal-app-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-lg);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-xl);
+}
+
+.modal-price-area {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-sm);
+}
+
+.modal-price {
+  font-size: var(--text-lg);
+  font-weight: 700;
+  color: var(--color-warning);
+}
+
+.modal-original-price {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  text-decoration: line-through;
+}
+
+.modal-install-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-xl);
+  background: var(--color-accent);
+  color: white;
+  border-radius: var(--radius-lg);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  transition: all var(--transition-fast);
+}
+
+.modal-install-btn:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.modal-install-btn.installed {
+  background: var(--color-success-light);
+  color: var(--color-success);
+  cursor: default;
+}
+
+.modal-install-btn.uninstall {
+  background: white;
+  color: var(--color-danger, #D9383A);
+  border: 1px solid var(--color-danger, #D9383A);
+  cursor: pointer;
+}
+
+.modal-install-btn.uninstall:hover:not(:disabled) {
+  background: var(--color-danger, #D9383A);
+  color: white;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+/* Reviews */
+.modal-reviews {
+  padding-top: var(--space-xl);
+  border-top: 1px solid var(--color-border-light);
+}
+
+.modal-reviews h4 {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-lg);
+}
+
+.reviews-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.review-item {
+  padding: var(--space-lg);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-lg);
+}
+
+.review-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-sm);
+}
+
+.review-user {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.review-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, var(--color-accent), #8185F5);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.review-username {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.review-content {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .market-page-inner {
+    padding: var(--space-lg);
+  }
+
+  .market-tabs {
+    width: 100%;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+  }
+
+  .market-modal {
+    max-width: 100%;
+    max-height: 90vh;
+    border-radius: var(--radius-xl);
+  }
+
+  .market-modal-body {
+    padding: var(--space-xl);
+  }
+
+  .modal-app-header {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .modal-app-bottom {
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+}
+
+/* ===== Market Actions ===== */
+.market-actions {
+  display: flex;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: var(--space-sm) var(--space-lg);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.action-btn:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: var(--color-accent-subtle);
+}
+
+.action-btn.create-btn {
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+  border-color: var(--color-accent);
+}
+
+.action-btn.create-btn:hover {
+  background: var(--color-accent-hover);
+}
+
+/* ===== MCP Client Badge ===== */
+.mcp-client-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-lg);
+  margin-bottom: var(--space-lg);
+  background: var(--color-accent-subtle);
+  border: 1px solid var(--color-accent-light);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+}
+
+/* ===== Modal Header ===== */
+.market-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-xl) var(--space-2xl);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.market-modal-header h2 {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.market-modal-header .market-modal-close {
+  position: static;
+}
+
+/* ===== Create Tool Form ===== */
+.create-tool-modal {
+  max-width: 600px;
+}
+
+.create-tool-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.form-label {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.form-label .required {
+  color: var(--color-error);
+}
+
+.form-input {
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  background: var(--color-bg-primary);
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+
+.form-input:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.form-input:disabled {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-tertiary);
+}
+
+.form-textarea {
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  background: var(--color-bg-primary);
+  outline: none;
+  resize: vertical;
+  font-family: var(--font-sans);
+  transition: border-color var(--transition-fast);
+}
+
+.form-textarea:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+/* Creation Method Tabs */
+.creation-method-tabs {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.method-tab {
+  flex: 1;
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.method-tab:hover {
+  border-color: var(--color-accent-light);
+}
+
+.method-tab.active {
+  border-color: var(--color-accent);
+  background: var(--color-accent-subtle);
+  color: var(--color-accent);
+}
+
+/* Pricing Toggle */
+.pricing-toggle {
+  display: flex;
+  gap: var(--space-xs);
+  padding: 4px;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  width: fit-content;
+}
+
+.toggle-btn {
+  padding: var(--space-xs) var(--space-lg);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.toggle-btn.active {
+  background: var(--color-bg-secondary);
+  color: var(--color-accent);
+  box-shadow: var(--shadow-xs);
+}
+
+.price-input-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-top: var(--space-sm);
+}
+
+.price-input {
+  width: 140px;
+}
+
+.price-unit {
+  font-size: var(--text-sm);
+  color: var(--color-text-tertiary);
+}
+
+/* Checkbox */
+.form-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+}
+
+.form-checkbox-label input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-accent);
+}
+
+/* Compliance Notice */
+.compliance-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+}
+
+/* Submit Button */
+.form-submit-btn {
+  padding: var(--space-md) var(--space-xl);
+  background: var(--color-accent);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.form-submit-btn:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+}
+
+.form-submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Audit Progress */
+.audit-progress {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-xl);
+  padding: var(--space-2xl) 0;
+}
+
+.audit-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--color-border-light);
+  border-top-color: var(--color-accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.audit-spinner.small {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.audit-progress h3 {
+  font-size: var(--text-md);
+  color: var(--color-text-primary);
+}
+
+.audit-steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  width: 100%;
+  max-width: 320px;
+}
+
+.audit-step {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-size: var(--text-sm);
+  color: var(--color-text-tertiary);
+}
+
+.audit-step.done {
+  color: var(--color-success);
+}
+
+.audit-step.active {
+  color: var(--color-accent);
+  font-weight: 500;
+}
+
+.audit-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  animation: pulse 1s ease-in-out infinite;
+}
+
+.audit-dot-empty {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-border);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* Audit Done */
+.audit-done {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-2xl) 0;
+  text-align: center;
+}
+
+.audit-done svg {
+  color: var(--color-success);
+  width: 48px;
+  height: 48px;
+}
+
+.audit-done h3 {
+  font-size: var(--text-lg);
+  color: var(--color-text-primary);
+}
+
+.audit-done p {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+}
+
+/* ===== Hub Import Modal ===== */
+.hub-import-modal {
+  max-width: 560px;
+}
+
+.hub-import-desc {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  margin-bottom: var(--space-xl);
+}
+
+.hub-free-note {
+  display: block;
+  margin-top: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  background: var(--color-success-light);
+  color: var(--color-success);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  font-weight: 500;
+}
+
+/* 导入定价字段 */
+.hub-price-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  margin: var(--space-md) 0;
+  padding: var(--space-md);
+  background: var(--color-bg-subtle, #F8F9FC);
+  border: 1px solid var(--color-border, #E3E6EB);
+  border-radius: var(--radius-sm);
+}
+.hub-price-input {
+  max-width: 200px;
+  padding: 8px 12px;
+  border: 1px solid var(--color-border, #D1D5DB);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  background: #fff;
+  color: var(--color-text, #1A1F36);
+}
+.hub-price-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgba(91, 95, 237, 0.15);
+}
+.hub-price-hint {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted, #545A65);
+  line-height: 1.5;
+}
+
+.hub-platforms {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-xl);
+}
+
+.hub-platform-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-md);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+  transition: border-color var(--transition-fast);
+}
+
+.hub-platform-card:hover {
+  border-color: var(--color-accent-light);
+}
+
+.hub-platform-info {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.hub-platform-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  background: var(--color-accent-subtle);
+  color: var(--color-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hub-platform-url {
+  display: block;
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  margin-top: 2px;
+}
+
+.hub-import-btn {
+  padding: var(--space-xs) var(--space-md);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.hub-import-btn:hover:not(:disabled) {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.hub-import-btn.primary {
+  background: var(--color-accent);
+  color: white;
+  border-color: var(--color-accent);
+  padding: var(--space-sm) var(--space-lg);
+  font-size: var(--text-sm);
+}
+
+.hub-import-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.hub-divider {
+  text-align: center;
+  margin-bottom: var(--space-md);
+  font-size: var(--text-xs);
+  color: var(--color-text-disabled);
+  position: relative;
+}
+
+.hub-divider::before,
+.hub-divider::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 30%;
+  height: 1px;
+  background: var(--color-border-light);
+}
+
+.hub-divider::before { left: 0; }
+.hub-divider::after { right: 0; }
+
+.hub-divider span {
+  background: var(--color-bg-secondary);
+  padding: 0 var(--space-md);
+  position: relative;
+}
+
+.hub-custom-input-row {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.hub-custom-input-row .form-input {
+  flex: 1;
+}
+
+.hub-importing-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  margin-top: var(--space-lg);
+  padding: var(--space-md);
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+}
+
+/* ===== Agent Connect Modal ===== */
+.agent-connect-modal {
+  max-width: 560px;
+}
+
+.agent-platforms {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.agent-platform-card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.agent-platform-card:hover {
+  border-color: var(--color-accent-light);
+  background: var(--color-accent-subtle);
+}
+
+.agent-platform-card.connected {
+  border-color: var(--color-success);
+  background: var(--color-success-light);
+}
+
+.agent-platform-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  background: var(--color-accent-subtle);
+  color: var(--color-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.agent-platform-info {
+  flex: 1;
+}
+
+.agent-platform-info strong {
+  display: block;
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  margin-bottom: 2px;
+}
+
+.agent-platform-info span {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+}
+
+.connect-indicator {
+  font-size: var(--text-xs);
+  color: var(--color-accent);
+  font-weight: 500;
+}
+
+.connected-badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-xs);
+  color: var(--color-success);
+  font-weight: 500;
+}
+
+.agent-config-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.back-btn {
+  align-self: flex-start;
+  padding: var(--space-xs) var(--space-sm);
+  background: none;
+  border: none;
+  color: var(--color-text-tertiary);
+  font-size: var(--text-sm);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.back-btn:hover {
+  color: var(--color-accent);
+}
+
+/* ===== Transport Type Selector ===== */
+.transport-type-selector {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.transport-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.transport-option:hover {
+  border-color: var(--color-accent-light);
+}
+
+.transport-option.active {
+  border-color: var(--color-accent);
+  background: var(--color-accent-subtle);
+}
+
+.transport-option input[type="radio"] {
+  accent-color: var(--color-accent);
+  flex-shrink: 0;
+}
+
+.transport-option-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.transport-option-content strong {
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+}
+
+.transport-option-content span {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* ===== AI Chat Redirect Card (修改3) ===== */
+.ai-chat-redirect-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-lg);
+  padding: var(--space-2xl);
+  background: var(--color-accent-subtle);
+  border: 1px solid var(--color-accent-light);
+  border-radius: var(--radius-lg);
+  text-align: center;
+}
+
+.ai-chat-redirect-card svg {
+  color: var(--color-accent);
+}
+
+.ai-chat-redirect-content strong {
+  font-size: var(--text-base);
+  color: var(--color-text-primary);
+}
+
+.ai-chat-redirect-content p {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+
+/* ===== Skills Content Input ===== */
+.skills-content-input {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.7;
+  min-height: 160px;
+}
+
+.skills-upload-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  margin-top: var(--space-xs);
+}
+
+.file-upload-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--space-xs) var(--space-md);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.file-upload-btn:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.format-check-btn {
+  padding: var(--space-xs) var(--space-md);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  border: 1px solid var(--color-accent);
+  background: transparent;
+  color: var(--color-accent);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.format-check-btn:hover:not(:disabled) {
+  background: var(--color-accent);
+  color: white;
+}
+
+.format-check-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.skills-file-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--space-xs) var(--space-sm);
+  font-size: var(--text-xs);
+  color: var(--color-success);
+  background: var(--color-success-light);
+  border-radius: var(--radius-sm);
+}
+
+.format-check-status {
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+
+.format-check-status.checking {
+  background: var(--color-accent-subtle);
+  color: var(--color-accent);
+}
+
+.format-check-status.pass {
+  background: var(--color-success-light);
+  color: var(--color-success);
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.format-check-status.fail {
+  background: var(--color-error-light);
+  color: var(--color-error);
+}
+
+/* ===== Hub Import Steps Guide ===== */
+.hub-import-steps-guide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-lg);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  flex-wrap: wrap;
+}
+
+.hub-step {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+}
+
+.hub-step-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  color: white;
+  font-size: 11px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.hub-step-arrow {
+  color: var(--color-text-disabled);
+  font-size: var(--text-xs);
+}
+
+.hub-step-arrow::after {
+  content: '\2192';
+}
+
+/* ===== Hub Platform Card (with visit + import) ===== */
+.hub-platform-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  min-width: 260px;
+}
+
+.hub-visit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  align-self: flex-end;
+  padding: var(--space-xs) var(--space-md);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.hub-visit-btn:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: var(--color-accent-subtle);
+}
+
+.hub-import-row {
+  display: flex;
+  gap: var(--space-xs);
+}
+
+.hub-import-col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+}
+
+.hub-name-preview {
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  padding: 2px 0;
+}
+
+.hub-name-preview strong {
+  color: var(--color-accent);
+}
+
+.hub-url-input {
+  flex: 1;
+  padding: var(--space-xs) var(--space-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  color: var(--color-text-primary);
+  background: var(--color-bg-primary);
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+
+.hub-url-input:focus {
+  border-color: var(--color-accent);
+}
+
+.hub-url-input:disabled {
+  background: var(--color-bg-tertiary);
+}
+
+.hub-importing-text {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.audit-spinner.tiny {
+  width: 12px;
+  height: 12px;
+  border-width: 2px;
+}
+
+/* ===== Import Progress ===== */
+.hub-import-progress {
+  margin-top: var(--space-lg);
+  padding: var(--space-lg);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.import-progress-steps {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-xs);
+}
+
+.import-step {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  color: var(--color-text-disabled);
+}
+
+.import-step.active {
+  color: var(--color-accent);
+}
+
+.import-step.done {
+  color: var(--color-success);
+}
+
+.import-step-dot {
+  display: flex;
+  align-items: center;
+}
+
+.import-step-dot svg {
+  width: 12px;
+  height: 12px;
+}
+
+.import-status-msg {
+  font-size: var(--text-xs);
+  color: var(--color-accent);
+  text-align: center;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .hub-platform-card {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .hub-platform-actions {
+    min-width: auto;
+  }
+}
+
+/* ===== MCP Code Editor ===== */
+.mcp-code-editor {
+  padding: var(--space-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.6;
+  color: #cdd6f4;
+  background: #1e1e2e;
+  min-height: 200px;
+  resize: vertical;
+  outline: none;
+  transition: border-color var(--transition-fast);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.mcp-code-editor:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.mcp-code-editor::placeholder {
+  color: #6c7086;
+  opacity: 0.7;
+}
+
+.mcp-code-hint {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+}
+
+.hub-code-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-lg);
+  padding: var(--space-lg);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-light);
+}
diff --git a/frontend/src/pages/front/MarketPage.tsx b/frontend/src/pages/front/MarketPage.tsx
index 3206920..9f71abf 100644
--- a/frontend/src/pages/front/MarketPage.tsx
+++ b/frontend/src/pages/front/MarketPage.tsx
@@ -96,7 +96,7 @@ const ServerIcon = () => (
 
 // ===== Color palette for avatar icons =====
 const AVATAR_COLORS = [
-  { bg: '#EEEDFF', fg: '#6C63FF' },
+  { bg: '#EEEDFF', fg: '#5B5FED' },
   { bg: '#E6F7EE', fg: '#219B5E' },
   { bg: '#FEF4E8', fg: '#E8922C' },
   { bg: '#EBF2FE', fg: '#3B82F6' },
diff --git a/frontend/src/pages/front/PricingPage.css b/frontend/src/pages/front/PricingPage.css
index 58b2690..fdc575e 100644
--- a/frontend/src/pages/front/PricingPage.css
+++ b/frontend/src/pages/front/PricingPage.css
@@ -156,7 +156,7 @@
 }
 
 .pricing-plan--popular {
-  border-color: #F59E0B;
+  border-color: #E8922C;
 }
 
 /* Popular Ribbon */
@@ -164,7 +164,7 @@
   position: absolute;
   top: 16px;
   right: -32px;
-  background: linear-gradient(135deg, #F59E0B, #EF4444);
+  background: linear-gradient(135deg, #E8922C, #D9383A);
   color: #FFFFFF;
   font-size: 11px;
   font-weight: 700;
@@ -930,7 +930,7 @@
 }
 
 .pricing-modal-form-group label .required {
-  color: #EF4444;
+  color: #D9383A;
 }
 
 .pricing-modal-form-group input,
diff --git a/frontend/src/pages/front/PricingPage.tsx b/frontend/src/pages/front/PricingPage.tsx
index 447f923..4b8cc8f 100644
--- a/frontend/src/pages/front/PricingPage.tsx
+++ b/frontend/src/pages/front/PricingPage.tsx
@@ -116,7 +116,7 @@ interface CouponItem {
 
 const SERVICE_TYPE_CONFIG: Record<string, { label: string; icon: React.ReactNode; color: string; bg: string }> = {
   app_custom: { label: '应用定制', icon: <IconAppCustom />, color: '#4F46E5', bg: '#EEF2FF' },
-  platform_proxy: { label: '平台代理', icon: <IconPlatform />, color: '#059669', bg: '#ECFDF5' },
+  platform_proxy: { label: '平台代理', icon: <IconPlatform />, color: '#219B5E', bg: '#ECFDF5' },
   data_custom: { label: '数据定制', icon: <IconDataCustom />, color: '#D97706', bg: '#FFFBEB' },
   private_project: { label: '私有化项目', icon: <IconPrivateProject />, color: '#7C3AED', bg: '#F5F3FF' },
 };
diff --git a/frontend/src/pages/front/ProfilePage.css b/frontend/src/pages/front/ProfilePage.css
index d951ce5..3b17d85 100644
--- a/frontend/src/pages/front/ProfilePage.css
+++ b/frontend/src/pages/front/ProfilePage.css
@@ -450,7 +450,7 @@
   width: 64px;
   height: 64px;
   border-radius: var(--radius-lg);
-  background: linear-gradient(135deg, var(--color-accent), #8B8DFF);
+  background: linear-gradient(135deg, var(--color-accent), #8185F5);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/pages/front/ProfilePage.tsx b/frontend/src/pages/front/ProfilePage.tsx
index 683299d..f02cc16 100644
--- a/frontend/src/pages/front/ProfilePage.tsx
+++ b/frontend/src/pages/front/ProfilePage.tsx
@@ -244,8 +244,8 @@ const ProfilePage: React.FC = () => {
   const getLevelGradient = (level: number) => {
     const gradients: Record<number, string> = {
       0: 'linear-gradient(135deg, #8B919E, #BFC4CE)',
-      2: 'linear-gradient(135deg, #5B5FED, #8B8DFF)',
-      3: 'linear-gradient(135deg, #F59E0B, #FBBF24)',
+      2: 'linear-gradient(135deg, #5B5FED, #8185F5)',
+      3: 'linear-gradient(135deg, #E8922C, #F0A94C)',
     };
     return gradients[level] || gradients[0];
   };
diff --git a/frontend/src/pages/front/TokenDashboardPage.css b/frontend/src/pages/front/TokenDashboardPage.css
index 8c66384..d85537f 100644
--- a/frontend/src/pages/front/TokenDashboardPage.css
+++ b/frontend/src/pages/front/TokenDashboardPage.css
@@ -74,7 +74,7 @@
 }
 
 .tkd-kpi--blue {
-  background: linear-gradient(135deg, #5B5FED 0%, #8B8DFF 100%);
+  background: linear-gradient(135deg, #5B5FED 0%, #8185F5 100%);
 }
 
 .tkd-kpi--green {
@@ -242,7 +242,7 @@
 }
 
 .tkd-rank-item:nth-child(1) .tkd-rank-item-idx { background: #FEF3C7; color: #D97706; }
-.tkd-rank-item:nth-child(2) .tkd-rank-item-idx { background: #E5E7EB; color: #6B7280; }
+.tkd-rank-item:nth-child(2) .tkd-rank-item-idx { background: #E3E6EB; color: #545A65; }
 .tkd-rank-item:nth-child(3) .tkd-rank-item-idx { background: #FDE8CD; color: #B45309; }
 
 .tkd-rank-item-name {
diff --git a/frontend/src/pages/front/WechatBot.tsx b/frontend/src/pages/front/WechatBot.tsx
index 0718b8e..91dfe59 100644
--- a/frontend/src/pages/front/WechatBot.tsx
+++ b/frontend/src/pages/front/WechatBot.tsx
@@ -164,7 +164,7 @@ const WechatBot: React.FC = () => {
                 <img src={qrcode.qrcode_img} alt="微信扫码" style={{ width: '220px', height: '220px', background: '#fff', borderRadius: '8px', border: '1px solid #E5E7EB' }} />
               ) : (
                 <div style={{ width: '220px', height: '220px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fff', borderRadius: '8px', border: '1px solid #E5E7EB', fontSize: '12px', color: '#9CA3AF', textAlign: 'center', padding: '12px' }}>
-                    二维码图片生成失败，<a href={qrcode.qrcode_img_content} target="_blank" rel="noreferrer" style={{color:'#6C63FF'}}>请点击此处在新标签页打开</a>。
+                    二维码图片生成失败，<a href={qrcode.qrcode_img_content} target="_blank" rel="noreferrer" style={{color:'#5B5FED'}}>请点击此处在新标签页打开</a>。
                 </div>
               )}
               <div style={{ fontSize: '13px', color: polling ? '#f59e0b' : '#6B7280' }}>
@@ -216,7 +216,7 @@ const DetailItem: React.FC<{ label: string; value: any }> = ({ label, value }) =
 );
 
 const primaryBtnStyle: React.CSSProperties = {
-  padding: '8px 20px', background: '#6C63FF', border: 'none', borderRadius: '6px',
+  padding: '8px 20px', background: '#5B5FED', border: 'none', borderRadius: '6px',
   color: '#fff', fontSize: '14px', fontWeight: 500, cursor: 'pointer',
 };
 
diff --git a/frontend/src/pages/front/WechatHistory.tsx b/frontend/src/pages/front/WechatHistory.tsx
index d545a94..4e1b086 100644
--- a/frontend/src/pages/front/WechatHistory.tsx
+++ b/frontend/src/pages/front/WechatHistory.tsx
@@ -74,7 +74,7 @@ const WechatHistory: React.FC = () => {
                   <div style={{
                     padding: '10px 14px', borderRadius: '12px', fontSize: '14px', lineHeight: '1.6',
                     whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-                    background: m.role === 'user' ? '#6C63FF' : '#FFFFFF',
+                    background: m.role === 'user' ? '#5B5FED' : '#FFFFFF',
                     color: m.role === 'user' ? '#fff' : '#1A1F36',
                     border: m.role === 'user' ? 'none' : '1px solid #E5E7EB',
                   }}>{m.content}</div>
@@ -90,7 +90,7 @@ const WechatHistory: React.FC = () => {
 };
 
 const btnStyle: React.CSSProperties = {
-  padding: '8px 20px', background: '#6C63FF', border: 'none', borderRadius: '6px',
+  padding: '8px 20px', background: '#5B5FED', border: 'none', borderRadius: '6px',
   color: '#fff', fontSize: '14px', fontWeight: 500, cursor: 'pointer',
 };