diff --git a/video-gen-app/src/pages/GenerateConver.tsx b/video-gen-app/src/pages/GenerateConver.tsx
index 7483e1f0..9069f221 100644
--- a/video-gen-app/src/pages/GenerateConver.tsx
+++ b/video-gen-app/src/pages/GenerateConver.tsx
@@ -1,7 +1,7 @@
 
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 
-// AI 创作对话框样式优化版 v11：白色极简高级风格，统一参考素材与历史附件展示。
+// AI 创作对话框样式优化版 v12：白色极简高级风格，选项按钮、标题、头像与关键字统一使用 #8b5cf6。
 
 import {
   Layout,
@@ -1276,7 +1276,7 @@ const AIChatPage: React.FC = () => {
                 style={{
                   background: 'rgba(255,255,255,0.7)',
                   backdropFilter: 'blur(16px)',
-                  borderRight: '1px solid rgba(75, 85, 99, 0.08)',
+                  borderRight: '1px solid rgba(139, 92, 246, 0.08)',
                 }}
             >
               <div style={{ padding: 12 }}>
@@ -1313,7 +1313,7 @@ const AIChatPage: React.FC = () => {
                                 borderRadius: 10,
                                 cursor: 'pointer',
                                 background: currentConversationId === conversation.id ? '#FAFBFC' : 'transparent',
-                                border: currentConversationId === conversation.id ? '1px solid #e6e1ea' : 'none',
+                                border: currentConversationId === conversation.id ? '1px solid #ede9fe' : 'none',
                                 transition: 'all 0.2s',
                               }}
                               onMouseEnter={(e) => {
@@ -1371,7 +1371,7 @@ const AIChatPage: React.FC = () => {
                   margin: 0,
                   fontSize: 18,
                   fontWeight: 700,
-                  color: '#4B5563',
+                  color: '#8b5cf6',
                   letterSpacing: 0.4,
                 }}>
                   AI创作
@@ -1406,7 +1406,7 @@ const AIChatPage: React.FC = () => {
                         width: 80,
                         height: 80,
                         borderRadius: 50,
-                        background: 'linear-gradient(135deg, #4B5563 0%, #D6DAE2 100%)',
+                        background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
@@ -1448,7 +1448,7 @@ const AIChatPage: React.FC = () => {
                             disabled={isLoadingMore}
                             style={{
                               fontSize: 12,
-                              color: '#4B5563',
+                              color: '#8b5cf6',
                               background: 'none',
                               border: 'none',
                               cursor: isLoadingMore ? 'not-allowed' : 'pointer',
@@ -1478,7 +1478,7 @@ const AIChatPage: React.FC = () => {
                                   width: 36,
                                   height: 36,
                                   borderRadius: 12,
-                                  background: 'linear-gradient(135deg, #4B5563 0%, #D6DAE2 100%)',
+                                  background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)',
                                   display: 'flex',
                                   alignItems: 'center',
                                   justifyContent: 'center',
@@ -1513,8 +1513,8 @@ const AIChatPage: React.FC = () => {
                                 <div style={{ margin: 4, fontSize: 11, color: '#98a2b3', textAlign: 'left', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
                                   <span>{msg.createdAt?.replace('T', ' ').split('.')[0]}</span>
                                   <span style={{
-                                    background: msg.genType === 'image' ? 'rgba(46, 125, 103, 0.10)' : 'rgba(167, 111, 61, 0.10)',
-                                    color: msg.genType === 'image' ? '#2e7d67' : '#9a6a2f',
+                                    background: msg.genType === 'image' ? 'rgba(139, 92, 246, 0.10)' : 'rgba(139, 92, 246, 0.10)',
+                                    color: msg.genType === 'image' ? '#8b5cf6' : '#8b5cf6',
                                     padding: '2px 8px',
                                     borderRadius: 12,
                                     fontWeight: 500,
@@ -1527,7 +1527,7 @@ const AIChatPage: React.FC = () => {
                                 {/* 附件详情 - 右上角 */}
                                 {msg.mediaReferences && msg.mediaReferences.length > 0 && (
                                     <div style={{ position: 'absolute', top: 8, right: 8, zIndex: 100 }}>
-                                      <span style={{ padding: '4px 12px', borderRadius: 16, color: '#4B5563', cursor: 'pointer', fontWeight: 500, border: '1px solid rgba(75, 85, 99, 0.2)', background: 'rgba(75, 85, 99, 0.04)' }} onClick={(e) => { e.stopPropagation(); const target = e.currentTarget as HTMLElement; const rect = target.getBoundingClientRect(); setAttachmentPopupPosition({ x: rect.left, y: rect.top - 10 }); setAttachmentPopupMessageId(msg.id); setAttachmentPopupVisible(true); }}>附件详情</span>
+                                      <span style={{ padding: '4px 12px', borderRadius: 16, color: '#8b5cf6', cursor: 'pointer', fontWeight: 500, border: '1px solid rgba(139, 92, 246, 0.2)', background: 'rgba(139, 92, 246, 0.04)' }} onClick={(e) => { e.stopPropagation(); const target = e.currentTarget as HTMLElement; const rect = target.getBoundingClientRect(); setAttachmentPopupPosition({ x: rect.left, y: rect.top - 10 }); setAttachmentPopupMessageId(msg.id); setAttachmentPopupVisible(true); }}>附件详情</span>
                                     </div>
                                 )}
                                 {/* 操作按钮 - 右下角 */}
@@ -1569,8 +1569,8 @@ const AIChatPage: React.FC = () => {
                                         padding: '0 10px',
                                         borderRadius: 10,
                                         border: 'none',
-                                        background: 'rgba(75, 85, 99, 0.08)',
-                                        color: '#4B5563',
+                                        background: 'rgba(139, 92, 246, 0.08)',
+                                        color: '#8b5cf6',
                                         cursor: 'pointer',
                                         display: 'flex',
                                         alignItems: 'center',
@@ -1580,10 +1580,10 @@ const AIChatPage: React.FC = () => {
                                         fontSize: 12,
                                       }}
                                       onMouseEnter={(e) => {
-                                        e.currentTarget.style.background = 'rgba(75, 85, 99, 0.15)';
+                                        e.currentTarget.style.background = 'rgba(139, 92, 246, 0.15)';
                                       }}
                                       onMouseLeave={(e) => {
-                                        e.currentTarget.style.background = 'rgba(75, 85, 99, 0.08)';
+                                        e.currentTarget.style.background = 'rgba(139, 92, 246, 0.08)';
                                       }}
                                   >
                                     <ReloadOutlined style={{ fontSize: 12 }} />
@@ -1614,8 +1614,8 @@ const AIChatPage: React.FC = () => {
                                           padding: '0 10px',
                                           borderRadius: 10,
                                           border: 'none',
-                                          background: 'rgba(75, 85, 99, 0.08)',
-                                          color: '#4B5563',
+                                          background: 'rgba(139, 92, 246, 0.08)',
+                                          color: '#8b5cf6',
                                           cursor: 'pointer',
                                           display: 'flex',
                                           alignItems: 'center',
@@ -1629,8 +1629,8 @@ const AIChatPage: React.FC = () => {
                                           e.currentTarget.style.color = '#A45B5B';
                                         }}
                                         onMouseLeave={(e) => {
-                                          e.currentTarget.style.background = 'rgba(75, 85, 99, 0.08)';
-                                          e.currentTarget.style.color = '#4B5563';
+                                          e.currentTarget.style.background = 'rgba(139, 92, 246, 0.08)';
+                                          e.currentTarget.style.color = '#8b5cf6';
                                         }}
                                     >
                                       <DeleteOutlined style={{ fontSize: 12 }} />
@@ -1646,9 +1646,9 @@ const AIChatPage: React.FC = () => {
                               position: 'relative',
                               margin: '8px 0',
                               padding: '12px 16px',
-                              backgroundColor: 'rgba(75, 85, 99, 0.04)',
+                              backgroundColor: 'rgba(139, 92, 246, 0.04)',
                               borderRadius: 10,
-                              border: '1px solid rgba(75, 85, 99, 0.08)',
+                              border: '1px solid rgba(139, 92, 246, 0.08)',
                               fontSize: 13,
                               color: '#475467',
                               lineHeight: 1.6,
@@ -1699,23 +1699,23 @@ const AIChatPage: React.FC = () => {
                                     <div style={{ display: 'flex', gap: 16, marginBottom: 16, marginTop: 16, width: '100%', alignItems: 'flex-start',
 
                                     }}>
-                                      <div style={{ width: '50%', overflow: 'hidden', borderRadius: 12, position: 'relative', height: 220, border: '1px solid #E7EAF0', boxShadow: '0 4px 12px rgba(75, 85, 99, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear-gradient(135deg, #ffffff 0%, #FAFBFC 100%)' }}>
+                                      <div style={{ width: '50%', overflow: 'hidden', borderRadius: 12, position: 'relative', height: 220, border: '1px solid #E7EAF0', boxShadow: '0 4px 12px rgba(139, 92, 246, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear-gradient(135deg, #ffffff 0%, #FAFBFC 100%)' }}>
                                         {msg.status === 'generating' ? (
                                             <>
                                               <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', alignItems: 'center', gap: 8, zIndex: 2 }}>
-                                                {/* <div style={{ width: 20, height: 20, border: '2px solid #D9DEE7', borderTopColor: '#4B5563', borderRadius: '50%', animation: 'spin 1s linear infinite' }} /> */}
+                                                {/* <div style={{ width: 20, height: 20, border: '2px solid #ddd6fe', borderTopColor: '#8b5cf6', borderRadius: '50%', animation: 'spin 1s linear infinite' }} /> */}
                                               </div>
                                               <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%)', animation: 'shimmer 2s infinite' }} />
                                               <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
-                                                <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(75, 85, 99, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 30px rgba(75, 85, 99, 0.2)' }}>
-                                                  <div style={{ width: 48, height: 48, border: '3px solid #D9DEE7', borderTopColor: '#4B5563', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
+                                                <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(139, 92, 246, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 30px rgba(139, 92, 246, 0.2)' }}>
+                                                  <div style={{ width: 48, height: 48, border: '3px solid #ddd6fe', borderTopColor: '#8b5cf6', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
                                                 </div>
-                                                <span style={{ fontSize: 12, color: '#4B5563', fontWeight: 500 }}>生成中...</span>
+                                                <span style={{ fontSize: 12, color: '#8b5cf6', fontWeight: 500 }}>生成中...</span>
 
                                                 {/* <div style={{ display: 'flex', gap: 4 }}>
-                                        <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#4B5563', animation: 'pulse 1.5s ease-in-out infinite' }} />
+                                        <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#8b5cf6', animation: 'pulse 1.5s ease-in-out infinite' }} />
                                         <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#a8a1b6', animation: 'pulse 1.5s ease-in-out 0.2s infinite' }} />
-                                        <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#D6DAE2', animation: 'pulse 1.5s ease-in-out 0.4s infinite' }} />
+                                        <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#ddd6fe', animation: 'pulse 1.5s ease-in-out 0.4s infinite' }} />
                                       </div> */}
                                               </div>
                                             </>
@@ -1750,15 +1750,15 @@ const AIChatPage: React.FC = () => {
                                         </div>
                                         <div style={{ fontSize: 12, color: '#667085', textAlign: 'left', display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', justifyContent: 'space-between',marginBottom: 12 }}>
                                   <span style={{
-                                    // background: 'rgba(75, 85, 99, 0.08)',
-                                    borderRadius: 16, color: '#4B5563', fontWeight: 500 }}>{msg.engineSnapshot.name}</span>
+                                    // background: 'rgba(139, 92, 246, 0.08)',
+                                    borderRadius: 16, color: '#8b5cf6', fontWeight: 500 }}>{msg.engineSnapshot.name}</span>
                                           <span style={{
-                                            // background: 'rgba(75, 85, 99, 0.08)',
+                                            // background: 'rgba(139, 92, 246, 0.08)',
                                             borderRadius: 16, color: '#667085' }}>{msg.genType === 'image' ? `${msg.imageProportion || ''} · ${msg.imagePx || ''} · ${msg.imageSize || ''}` : `${msg.duration || ''}s · ${msg.aspectRatio || ''} · ${msg.resolution || ''}`}</span>
                                           <span style={{
                                             // background: 'rgba(164, 91, 91, 0.08)',
                                             fontSize: 14,
-                                            borderRadius: 16, color: '#8a5f4a', fontWeight: 620 }}>消耗积分：{msg.creditsCost}</span>
+                                            borderRadius: 16, color: '#8b5cf6' }}>消耗积分：{msg.creditsCost}</span>
 
                                         </div>
 
@@ -1917,7 +1917,7 @@ const AIChatPage: React.FC = () => {
                                         </div>
                                       </>
                                   )}
-                                  <span style={{ position: 'absolute', left: 6, top: 6, padding: '2px 6px', borderRadius: 999, background: 'rgba(255,255,255,0.92)', color: '#4B5563', fontSize: 10, fontWeight: 800, boxShadow: '0 4px 10px rgba(31, 41, 55, 0.08)' }}>
+                                  <span style={{ position: 'absolute', left: 6, top: 6, padding: '2px 6px', borderRadius: 999, background: 'rgba(255,255,255,0.92)', color: '#8b5cf6', fontSize: 10, fontWeight: 800, boxShadow: '0 4px 10px rgba(31, 41, 55, 0.08)' }}>
                               {label}
                             </span>
                                 </div>
@@ -1939,7 +1939,7 @@ const AIChatPage: React.FC = () => {
                                         borderRadius: 9,
                                         border: '1px solid #E7EAF0',
                                         background: '#F8FAFC',
-                                        color: '#4B5563',
+                                        color: '#8b5cf6',
                                         fontSize: 11,
                                         fontWeight: 700,
                                         cursor: 'pointer',
@@ -2004,7 +2004,7 @@ const AIChatPage: React.FC = () => {
                         {/* 首帧 */}
                         <div style={{ position: 'relative', flex: 1, minWidth: 0, height: 92, borderRadius: 16, border: '1px solid #E7EAF0', background: '#ffffff', boxShadow: '0 8px 20px rgba(47, 52, 64, 0.045)', overflow: 'hidden' }}>
                           <div style={{ position: 'absolute', top: 8, left: 10, right: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}>
-                            <span style={{ fontSize: 11, fontWeight: 700, color: '#4B5563', lineHeight: 1 }}>首帧</span>
+                            <span style={{ fontSize: 11, fontWeight: 700, color: '#8b5cf6', lineHeight: 1 }}>首帧</span>
                             <span style={{ fontSize: 10, color: '#98A2B3' }}>必传</span>
                           </div>
                           {firstFrame ? (
@@ -2018,7 +2018,7 @@ const AIChatPage: React.FC = () => {
                                       setAttachmentPreviewName(firstFrame.name);
                                       setAttachmentPreviewVisible(true);
                                     }}
-                                    style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(75, 85, 99, 0.2)', boxShadow: '0 4px 12px rgba(47, 52, 64, 0.08)' }}
+                                    style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(139, 92, 246, 0.2)', boxShadow: '0 4px 12px rgba(47, 52, 64, 0.08)' }}
                                 />
                                 <button
                                     onClick={handleRemoveFirstFrame}
@@ -2030,12 +2030,12 @@ const AIChatPage: React.FC = () => {
                           ) : (
                               <Upload accept="image/*" showUploadList={false} beforeUpload={(file) => handleUpload(file, 'first')}>
                                 <div
-                                    style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 54, borderRadius: 10, border: '1px dashed rgba(75, 85, 99, 0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(75, 85, 99, 0.04)', flexDirection: 'column', gap: 3 }}
-                                    onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#6B7280'; e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.08)'; }}
-                                    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.28)'; e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.04)'; }}
+                                    style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 54, borderRadius: 10, border: '1px dashed rgba(139, 92, 246, 0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(139, 92, 246, 0.04)', flexDirection: 'column', gap: 3 }}
+                                    onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#a78bfa'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.08)'; }}
+                                    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.28)'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)'; }}
                                 >
-                                  <PlusOutlined style={{ fontSize: 16, color: '#4B5563' }} />
-                                  <span style={{ fontSize: 11, color: '#4B5563', fontWeight: 600 }}>上传首帧</span>
+                                  <PlusOutlined style={{ fontSize: 16, color: '#8b5cf6' }} />
+                                  <span style={{ fontSize: 11, color: '#8b5cf6', fontWeight: 600 }}>上传首帧</span>
                                 </div>
                               </Upload>
                           )}
@@ -2046,7 +2046,7 @@ const AIChatPage: React.FC = () => {
                             onClick={handleSwapFrames}
                             disabled={!firstFrame || !lastFrame}
                             title="调换首尾帧"
-                            style={{ width: 34, height: 34, alignSelf: 'center', borderRadius: 50, border: '1px solid rgba(231, 234, 240, 0.95)', background: firstFrame && lastFrame ? 'linear-gradient(135deg, #4B5563 0%, #6B7280 100%)' : '#F3F5F8', cursor: firstFrame && lastFrame ? 'pointer' : 'not-allowed', color: firstFrame && lastFrame ? '#fff' : '#98A2B3', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: firstFrame && lastFrame ? '0 8px 18px rgba(75, 85, 99, 0.28)' : 'none', transition: 'all 0.2s ease', flexShrink: 0 }}
+                            style={{ width: 34, height: 34, alignSelf: 'center', borderRadius: 50, border: '1px solid rgba(231, 234, 240, 0.95)', background: firstFrame && lastFrame ? 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)' : '#F3F5F8', cursor: firstFrame && lastFrame ? 'pointer' : 'not-allowed', color: firstFrame && lastFrame ? '#fff' : '#98A2B3', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: firstFrame && lastFrame ? '0 8px 18px rgba(139, 92, 246, 0.28)' : 'none', transition: 'all 0.2s ease', flexShrink: 0 }}
                             onMouseEnter={(e) => { if (firstFrame && lastFrame) e.currentTarget.style.transform = 'scale(1.06)'; }}
                             onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
                         >
@@ -2056,7 +2056,7 @@ const AIChatPage: React.FC = () => {
                         {/* 尾帧 */}
                         <div style={{ position: 'relative', flex: 1, minWidth: 0, height: 92, borderRadius: 16, border: '1px solid #E7EAF0', background: '#ffffff', boxShadow: '0 8px 20px rgba(47, 52, 64, 0.045)', overflow: 'hidden' }}>
                           <div style={{ position: 'absolute', top: 8, left: 10, right: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}>
-                            <span style={{ fontSize: 11, fontWeight: 700, color: '#4B5563', lineHeight: 1 }}>尾帧</span>
+                            <span style={{ fontSize: 11, fontWeight: 700, color: '#8b5cf6', lineHeight: 1 }}>尾帧</span>
                             <span style={{ fontSize: 10, color: '#98A2B3' }}>可选</span>
                           </div>
                           {lastFrame ? (
@@ -2070,7 +2070,7 @@ const AIChatPage: React.FC = () => {
                                       setAttachmentPreviewName(lastFrame.name);
                                       setAttachmentPreviewVisible(true);
                                     }}
-                                    style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(75, 85, 99, 0.2)', boxShadow: '0 4px 12px rgba(47, 52, 64, 0.08)' }}
+                                    style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(139, 92, 246, 0.2)', boxShadow: '0 4px 12px rgba(47, 52, 64, 0.08)' }}
                                 />
                                 <button
                                     onClick={handleRemoveLastFrame}
@@ -2082,12 +2082,12 @@ const AIChatPage: React.FC = () => {
                           ) : (
                               <Upload accept="image/*" showUploadList={false} beforeUpload={(file) => handleUpload(file, 'last')}>
                                 <div
-                                    style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 54, borderRadius: 10, border: '1px dashed rgba(75, 85, 99, 0.24)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(75, 85, 99, 0.04)', flexDirection: 'column', gap: 3 }}
-                                    onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#6B7280'; e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.08)'; }}
-                                    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.24)'; e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.04)'; }}
+                                    style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 54, borderRadius: 10, border: '1px dashed rgba(139, 92, 246, 0.24)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(139, 92, 246, 0.04)', flexDirection: 'column', gap: 3 }}
+                                    onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#a78bfa'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.08)'; }}
+                                    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.24)'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)'; }}
                                 >
-                                  <PlusOutlined style={{ fontSize: 16, color: '#4B5563' }} />
-                                  <span style={{ fontSize: 11, color: '#4B5563', fontWeight: 600 }}>上传尾帧</span>
+                                  <PlusOutlined style={{ fontSize: 16, color: '#8b5cf6' }} />
+                                  <span style={{ fontSize: 11, color: '#8b5cf6', fontWeight: 600 }}>上传尾帧</span>
                                 </div>
                               </Upload>
                           )}
@@ -2173,7 +2173,7 @@ const AIChatPage: React.FC = () => {
                                   );
                                 })}
                                 {currentMedia.length > 4 && (
-                                    <div style={{ position: 'absolute', right: -8, bottom: -4, zIndex: 10, background: '#4B5563', color: '#fff', fontSize: 10, fontWeight: 700, padding: '2px 7px', borderRadius: 999, boxShadow: '0 6px 14px rgba(31, 41, 55, 0.18)' }}>
+                                    <div style={{ position: 'absolute', right: -8, bottom: -4, zIndex: 10, background: '#8b5cf6', color: '#fff', fontSize: 10, fontWeight: 700, padding: '2px 7px', borderRadius: 999, boxShadow: '0 6px 14px rgba(31, 41, 55, 0.18)' }}>
                                       +{currentMedia.length - 4}
                                     </div>
                                 )}
@@ -2409,8 +2409,8 @@ const AIChatPage: React.FC = () => {
                                     transition: 'all 0.15s',
                                   }}
                                   onMouseEnter={(e) => {
-                                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.08)';
-                                    e.currentTarget.style.color = '#4B5563';
+                                    e.currentTarget.style.background = 'rgba(139, 92, 246, 0.08)';
+                                    e.currentTarget.style.color = '#8b5cf6';
                                   }}
                                   onMouseLeave={(e) => {
                                     e.currentTarget.style.background = 'transparent';
@@ -2418,9 +2418,9 @@ const AIChatPage: React.FC = () => {
                                   }}
                               >
                                 {media.type === 'image' ? (
-                                    <PictureOutlined style={{ fontSize: 14, color: '#4B5563' }} />
+                                    <PictureOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                                 ) : (
-                                    <VideoCameraOutlined style={{ fontSize: 14, color: '#4B5563' }} />
+                                    <VideoCameraOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                                 )}
                                 <span>{media.label}</span>
                               </div>
@@ -2451,11 +2451,11 @@ const AIChatPage: React.FC = () => {
                       size="middle"
                   >
                     <Option value="video">
-                      <VideoCameraOutlined style={{ marginRight: 6, fontSize: 14, color: '#4B5563' }} />
+                      <VideoCameraOutlined style={{ marginRight: 6, fontSize: 14, color: '#8b5cf6' }} />
                       <span style={{ fontSize: 13, fontWeight: 650, color: '#475467' }}>视频生成</span>
                     </Option>
                     <Option value="image">
-                      <PictureOutlined style={{ marginRight: 6, fontSize: 14, color: '#4B5563' }} />
+                      <PictureOutlined style={{ marginRight: 6, fontSize: 14, color: '#8b5cf6' }} />
                       <span style={{ fontSize: 13, fontWeight: 650, color: '#475467' }}>图片生成</span>
                     </Option>
                   </Select>
@@ -2490,7 +2490,7 @@ const AIChatPage: React.FC = () => {
                           e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
                         }}
                     >
-                      <SettingOutlined style={{ fontSize: 14, color: '#4B5563' }} />
+                      <SettingOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                       <Text style={{
                         fontSize: 13,
                         fontWeight: 500,
@@ -2498,7 +2498,7 @@ const AIChatPage: React.FC = () => {
                       }}>
                         {mediaType === 'image' ? enginesele.image?.find((e: any) => e.id === countType)?.name : enginesele.video?.find((e: any) => e.id === countType)?.name || '选择引擎'}
                       </Text>
-                      <CaretDownOutlined style={{ fontSize: 10, color: '#4B5563', marginLeft: 'auto' }} />
+                      <CaretDownOutlined style={{ fontSize: 10, color: '#8b5cf6', marginLeft: 'auto' }} />
                     </button>
 
                     {showEngineModal && (
@@ -2565,10 +2565,10 @@ const AIChatPage: React.FC = () => {
                                         minHeight: 48,
                                         borderRadius: 10,
                                         border: countType === engine.id
-                                            ? '1px solid #4B5563'
+                                            ? '1px solid #8b5cf6'
                                             : '1px solid #E7EAF0',
                                         backgroundColor: countType === engine.id
-                                            ? '#F6F7FA'
+                                            ? '#f5f3ff'
                                             : '#ffffff',
                                         cursor: 'pointer',
                                         display: 'flex',
@@ -2583,7 +2583,7 @@ const AIChatPage: React.FC = () => {
                               <span style={{
                                 fontSize: 13,
                                 fontWeight: countType === engine.id ? 600 : 500,
-                                color: countType === engine.id ? '#4B5563' : '#475467',
+                                color: countType === engine.id ? '#8b5cf6' : '#475467',
                                 marginBottom: 2,
                               }}>
                                 {engine.name}
@@ -2632,7 +2632,7 @@ const AIChatPage: React.FC = () => {
                               e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
                             }}
                         >
-                          <PictureOutlined style={{ fontSize: 14, color: '#4B5563' }} />
+                          <PictureOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                           <Text style={{
                             fontSize: 13,
                             fontWeight: 500,
@@ -2640,7 +2640,7 @@ const AIChatPage: React.FC = () => {
                           }}>
                             {referenceMode === 'universal' ? '全能参考' : '首尾帧'}
                           </Text>
-                          <CaretDownOutlined style={{ fontSize: 10, color: '#4B5563', marginLeft: 'auto' }} />
+                          <CaretDownOutlined style={{ fontSize: 10, color: '#8b5cf6', marginLeft: 'auto' }} />
                         </button>
 
                         {referenceModeDropdownVisible && (
@@ -2681,10 +2681,10 @@ const AIChatPage: React.FC = () => {
                                       padding: '10px 14px',
                                       borderRadius: 10,
                                       border: referenceMode === 'universal'
-                                          ? '1px solid rgba(75, 85, 99, 0.3)'
+                                          ? '1px solid rgba(139, 92, 246, 0.3)'
                                           : '1px solid transparent',
                                       backgroundColor: referenceMode === 'universal'
-                                          ? 'rgba(75, 85, 99, 0.08)'
+                                          ? 'rgba(139, 92, 246, 0.08)'
                                           : 'transparent',
                                       cursor: supportsUniversalReference ? 'pointer' : 'not-allowed',
                                       display: 'flex',
@@ -2696,7 +2696,7 @@ const AIChatPage: React.FC = () => {
                                     }}
                                     onMouseEnter={(e) => {
                                       if (supportsUniversalReference && referenceMode !== 'universal') {
-                                        e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.04)';
+                                        e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)';
                                       }
                                     }}
                                     onMouseLeave={(e) => {
@@ -2705,11 +2705,11 @@ const AIChatPage: React.FC = () => {
                                       }
                                     }}
                                 >
-                                  <PictureOutlined style={{ fontSize: 14, color: '#4B5563' }} />
+                                  <PictureOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                                   <span style={{
                                     fontSize: 13,
                                     fontWeight: referenceMode === 'universal' ? 600 : 500,
-                                    color: referenceMode === 'universal' ? '#4B5563' : '#475467',
+                                    color: referenceMode === 'universal' ? '#8b5cf6' : '#475467',
                                     flex: 1,
                                   }}>
                               全能参考
@@ -2726,10 +2726,10 @@ const AIChatPage: React.FC = () => {
                                       padding: '10px 14px',
                                       borderRadius: 10,
                                       border: referenceMode === 'first_last_frame'
-                                          ? '1px solid rgba(75, 85, 99, 0.3)'
+                                          ? '1px solid rgba(139, 92, 246, 0.3)'
                                           : '1px solid transparent',
                                       backgroundColor: referenceMode === 'first_last_frame'
-                                          ? 'rgba(75, 85, 99, 0.08)'
+                                          ? 'rgba(139, 92, 246, 0.08)'
                                           : 'transparent',
                                       cursor: supportsFirstLastFrame ? 'pointer' : 'not-allowed',
                                       display: 'flex',
@@ -2741,7 +2741,7 @@ const AIChatPage: React.FC = () => {
                                     }}
                                     onMouseEnter={(e) => {
                                       if (supportsFirstLastFrame && referenceMode !== 'first_last_frame') {
-                                        e.currentTarget.style.backgroundColor = 'rgba(75, 85, 99, 0.04)';
+                                        e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)';
                                       }
                                     }}
                                     onMouseLeave={(e) => {
@@ -2750,11 +2750,11 @@ const AIChatPage: React.FC = () => {
                                       }
                                     }}
                                 >
-                                  <SwapOutlined style={{ fontSize: 14, color: '#4B5563' }} />
+                                  <SwapOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                                   <span style={{
                                     fontSize: 13,
                                     fontWeight: referenceMode === 'first_last_frame' ? 600 : 500,
-                                    color: referenceMode === 'first_last_frame' ? '#4B5563' : '#475467',
+                                    color: referenceMode === 'first_last_frame' ? '#8b5cf6' : '#475467',
                                     flex: 1,
                                   }}>
                               首尾帧
@@ -2800,7 +2800,7 @@ const AIChatPage: React.FC = () => {
                               e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
                             }}
                         >
-                          <LayoutOutlined style={{ fontSize: 14, color: '#4B5563' }} />
+                          <LayoutOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                           <Text style={{
                             fontSize: 13,
                             fontWeight: 500,
@@ -2808,7 +2808,7 @@ const AIChatPage: React.FC = () => {
                           }}>
                             {selectedRatio === 'auto' ? '智能' : selectedRatio} · {selectedResolution == '2K' ? '2K高清' : '4K超清'} · {width}×{height}
                           </Text>
-                          <CaretDownOutlined style={{ fontSize: 10, color: '#4B5563', marginLeft: 'auto' }} />
+                          <CaretDownOutlined style={{ fontSize: 10, color: '#8b5cf6', marginLeft: 'auto' }} />
                         </button>
 
                         {showImageSettingsModal && (
@@ -2858,10 +2858,10 @@ const AIChatPage: React.FC = () => {
                                             height: 52,
                                             borderRadius: 6,
                                             border: selectedRatio === item.value
-                                                ? '2px solid #4B5563'
+                                                ? '2px solid #8b5cf6'
                                                 : '1px solid #E7EAF0',
                                             backgroundColor: selectedRatio === item.value
-                                                ? '#fff'
+                                                ? '#f5f3ff'
                                                 : '#FFFFFF',
                                             cursor: 'pointer',
                                             display: 'flex',
@@ -2884,7 +2884,7 @@ const AIChatPage: React.FC = () => {
                                             if (h >= w) return maxSize;
                                             return Math.round(maxSize * (h / w));
                                           })(),
-                                          border: `2px solid ${selectedRatio === item.value ? '#4B5563' : '#98a2b3'}`,
+                                          border: `2px solid ${selectedRatio === item.value ? '#8b5cf6' : '#98a2b3'}`,
                                           borderRadius: 2,
                                           marginBottom: 2,
                                           display: 'flex',
@@ -2895,7 +2895,7 @@ const AIChatPage: React.FC = () => {
                                               <span style={{
                                                 fontSize: 7,
                                                 color: selectedRatio === item.value
-                                                    ? '#4B5563'
+                                                    ? '#8b5cf6'
                                                     : '#98a2b3',
                                               }}>
                                       智
@@ -2905,7 +2905,7 @@ const AIChatPage: React.FC = () => {
                                         <span style={{
                                           fontSize: 9,
                                           color: selectedRatio === item.value
-                                              ? '#4B5563'
+                                              ? '#8b5cf6'
                                               : '#667085',
                                           fontWeight: selectedRatio === item.value ? 600 : 400,
                                         }}>
@@ -2940,10 +2940,10 @@ const AIChatPage: React.FC = () => {
                                             height: 42,
                                             borderRadius: 6,
                                             border: selectedResolution === item.value
-                                                ? '2px solid #4B5563'
+                                                ? '2px solid #8b5cf6'
                                                 : '1px solid #E7EAF0',
                                             backgroundColor: selectedResolution === item.value
-                                                ? '#4B5563'
+                                                ? '#8b5cf6'
                                                 : '#FFFFFF',
                                             cursor: 'pointer',
                                             display: 'flex',
@@ -3027,7 +3027,7 @@ const AIChatPage: React.FC = () => {
                                         display: 'flex',
                                         justifyContent: 'center',
                                         alignItems: 'center',
-                                        color: '#4B5563',
+                                        color: '#8b5cf6',
                                       }}
                                   >
                                     <SwapOutlined style={{ fontSize: 10 }} />
@@ -3157,10 +3157,10 @@ const AIChatPage: React.FC = () => {
                                             height: 52,
                                             borderRadius: 6,
                                             border: videoAspectRatio === ratio
-                                                ? '2px solid #4B5563'
+                                                ? '2px solid #8b5cf6'
                                                 : '1px solid #E7EAF0',
                                             backgroundColor: videoAspectRatio === ratio
-                                                ? '#fff'
+                                                ? '#f5f3ff'
                                                 : '#FFFFFF',
                                             cursor: 'pointer',
                                             display: 'flex',
@@ -3183,14 +3183,14 @@ const AIChatPage: React.FC = () => {
                                             if (h >= w) return maxSize;
                                             return Math.round(maxSize * (h / w));
                                           })(),
-                                          border: `2px solid ${videoAspectRatio === ratio ? '#4B5563' : '#98a2b3'}`,
+                                          border: `2px solid ${videoAspectRatio === ratio ? '#8b5cf6' : '#98a2b3'}`,
                                           borderRadius: 2,
                                           marginBottom: 2,
                                         }} />
                                         <span style={{
                                           fontSize: 9,
                                           color: videoAspectRatio === ratio
-                                              ? '#4B5563'
+                                              ? '#8b5cf6'
                                               : '#667085',
                                           fontWeight: videoAspectRatio === ratio ? 600 : 400,
                                         }}>
@@ -3232,7 +3232,7 @@ const AIChatPage: React.FC = () => {
                                       left: 0,
                                       height: 6,
                                       borderRadius: 3,
-                                      background: '#4B5563',
+                                      background: '#8b5cf6',
                                       width: `${((videoDuration - Math.min(...engineOptions.durations)) / (Math.max(...engineOptions.durations) - Math.min(...engineOptions.durations))) * 100}%`,
                                       transform: 'translateY(-50%)',
                                     }} />
@@ -3294,10 +3294,10 @@ const AIChatPage: React.FC = () => {
                                             height: 42,
                                             borderRadius: 6,
                                             border: videoResolution === resolution
-                                                ? '2px solid #4B5563'
+                                                ? '2px solid #8b5cf6'
                                                 : '1px solid #E7EAF0',
                                             backgroundColor: videoResolution === resolution
-                                                ? '#4B5563'
+                                                ? '#8b5cf6'
                                                 : '#FFFFFF',
                                             cursor: 'pointer',
                                             display: 'flex',
@@ -3323,31 +3323,6 @@ const AIChatPage: React.FC = () => {
                         )}
                       </div>
                   )}
-                  <button
-                      type="button"
-                      onClick={() => {
-                        setInputValue(`${inputValue}@`);
-                        setMentionVisible(currentMedia.length > 0 && referenceMode === 'universal');
-                        setTimeout(() => mentionInputRef.current?.focus?.(), 0);
-                      }}
-                      style={{
-                        width: 32,
-                        height: 32,
-                        borderRadius: 11,
-                        border: '1px solid #E7EAF0',
-                        background: '#ffffff',
-                        color: '#2f3440',
-                        fontSize: 16,
-                        fontWeight: 700,
-                        cursor: 'pointer',
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        boxShadow: '0 1px 2px rgba(47, 52, 64, 0.025)',
-                      }}
-                  >
-                    @
-                  </button>
                 </Space>
 
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
@@ -3368,11 +3343,11 @@ const AIChatPage: React.FC = () => {
                         height: 36,
                         borderRadius: '50%',
                         background: composerCanSend
-                            ? 'linear-gradient(135deg, #4B5563 0%, #6B7280 100%)'
+                            ? 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)'
                             : '#E7EAF0',
                         color: '#ffffff',
                         opacity: composerCanSend ? 1 : 0.86,
-                        boxShadow: composerCanSend ? '0 10px 24px rgba(75, 85, 99, 0.28)' : 'inset 0 0 0 1px rgba(75, 85, 99, 0.18)',
+                        boxShadow: composerCanSend ? '0 10px 24px rgba(139, 92, 246, 0.28)' : 'inset 0 0 0 1px rgba(139, 92, 246, 0.18)',
                         cursor: composerCanSend ? 'pointer' : 'not-allowed',
                         transition: 'all 0.2s ease',
                         border: 'none',
@@ -3386,6 +3361,12 @@ const AIChatPage: React.FC = () => {
 
         {/* 自定义CSS动画 - 加载中闪烁效果 */}
         <style>{`
+
+        .ai-create-page {
+          --ai-accent: #8b5cf6;
+          --ai-accent-soft: #f5f3ff;
+          --ai-accent-mid: #a78bfa;
+        }
         @keyframes blink {
           0%, 50% { opacity: 1; }
           51%, 100% { opacity: 0.3; }
@@ -3400,7 +3381,7 @@ const AIChatPage: React.FC = () => {
           width: 8px;
         }
         .ai-create-scroll::-webkit-scrollbar-thumb {
-          background: rgba(75, 85, 99, 0.32);
+          background: rgba(139, 92, 246, 0.32);
           border-radius: 999px;
         }
         .ai-create-scroll::-webkit-scrollbar-track {
@@ -3433,8 +3414,8 @@ const AIChatPage: React.FC = () => {
         }
         .ant-select-dropdown .ant-select-item-option-active,
         .ant-select-dropdown .ant-select-item-option-selected {
-          background: #f5f3f8 !important;
-          color: #344054 !important;
+          background: #f5f3ff !important;
+          color: #8b5cf6 !important;
         }
         .image-settings-popover {
           animation: composerPopoverIn 0.16s ease-out;
@@ -3450,8 +3431,8 @@ const AIChatPage: React.FC = () => {
             open={previewVisible}
             title={
               <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-                <div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #4B5563 0%, #D6DAE2 100%)', borderRadius: 2 }} />
-                <span style={{ fontSize: 16, fontWeight: 700, color: '#4B5563', letterSpacing: 0.4 }}>
+                <div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #8b5cf6 0%, #ddd6fe 100%)', borderRadius: 2 }} />
+                <span style={{ fontSize: 16, fontWeight: 700, color: '#8b5cf6', letterSpacing: 0.4 }}>
               预览
             </span>
               </div>
@@ -3459,12 +3440,12 @@ const AIChatPage: React.FC = () => {
             onCancel={handleClosePreview}
             width={800}
             footer={
-              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(75, 85, 99, 0.08)' }}>
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(139, 92, 246, 0.08)' }}>
                 <Button
                     type="primary"
                     icon={<DownloadOutlined />}
                     onClick={handleDownload}
-                    style={{ borderRadius: 10, background: 'linear-gradient(135deg, #4B5563 0%, #D6DAE2 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)'  }}
+                    style={{ borderRadius: 10, background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)'  }}
                     disabled={isMediaExpired(previewUrl)}
                 >
                   {isMediaExpired(previewUrl) ? '资源已过期' : '下载'}
@@ -3480,7 +3461,7 @@ const AIChatPage: React.FC = () => {
                 justifyContent: 'center',
                 minHeight: '400px',
               },
-              header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(75, 85, 99, 0.08)', padding: '16px 24px' },
+              header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(139, 92, 246, 0.08)', padding: '16px 24px' },
             }}
         >
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
@@ -3510,8 +3491,8 @@ const AIChatPage: React.FC = () => {
             open={attachmentPreviewVisible}
             title={
               <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-                <div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #4B5563 0%, #D6DAE2 100%)', borderRadius: 2 }} />
-                <span style={{ fontSize: 16, fontWeight: 700, color: '#4B5563', letterSpacing: 0.4 }}>
+                <div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #8b5cf6 0%, #ddd6fe 100%)', borderRadius: 2 }} />
+                <span style={{ fontSize: 16, fontWeight: 700, color: '#8b5cf6', letterSpacing: 0.4 }}>
               附件预览
             </span>
               </div>
@@ -3537,7 +3518,7 @@ const AIChatPage: React.FC = () => {
             }}
             width={800}
             footer={
-              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(75, 85, 99, 0.08)' }}>
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(139, 92, 246, 0.08)' }}>
                 <Button
                     type="primary"
                     icon={<DownloadOutlined />}
@@ -3550,7 +3531,7 @@ const AIChatPage: React.FC = () => {
                       link.click();
                       document.body.removeChild(link);
                     }}
-                    style={{ borderRadius: 10, background: 'linear-gradient(135deg, #4B5563 0%, #D6DAE2 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)'  }}
+                    style={{ borderRadius: 10, background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)'  }}
                 >
                   下载
                 </Button>
@@ -3565,7 +3546,7 @@ const AIChatPage: React.FC = () => {
                 justifyContent: 'center',
                 minHeight: '400px',
               },
-              header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(75, 85, 99, 0.08)', padding: '16px 24px' },
+              header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(139, 92, 246, 0.08)', padding: '16px 24px' },
             }}
         >
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>