新增启动页面；修复转发表情包无法索引的问题；修复群回复中消息溢出错误；修复群消息中消息类型判定错误

src/App.scss

@@ -4,6 +4,48 @@
   flex-direction: column;
   background: var(--bg-primary);
   animation: appFadeIn 0.35s ease-out;
+  position: relative;
+  overflow: hidden;
+}
+
+// 繁花如梦：底色层（::before）+ 光晕层（::after）分离，避免 blur 吃掉边缘
+[data-theme="blossom-dream"] .app-container {
+  background: transparent;
+}
+
+// ::before 纯底色，不模糊
+[data-theme="blossom-dream"] .app-container::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: -2;
+  background: var(--bg-primary);
+}
+
+// ::after 光晕层，模糊叠加在底色上
+[data-theme="blossom-dream"] .app-container::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  background:
+    radial-gradient(ellipse 55% 45% at 15% 20%, var(--blossom-pink) 0%, transparent 70%),
+    radial-gradient(ellipse 50% 40% at 85% 75%, var(--blossom-peach) 0%, transparent 65%),
+    radial-gradient(ellipse 45% 50% at 80% 10%, var(--blossom-blue) 0%, transparent 60%);
+  filter: blur(80px);
+  opacity: 0.75;
+}
+
+// 深色模式光晕更克制
+[data-theme="blossom-dream"][data-mode="dark"] .app-container::after {
+  background:
+    radial-gradient(ellipse 55% 45% at 15% 20%, var(--blossom-pink) 0%, transparent 70%),
+    radial-gradient(ellipse 50% 40% at 85% 75%, var(--blossom-purple) 0%, transparent 65%),
+    radial-gradient(ellipse 45% 50% at 80% 10%, var(--blossom-blue) 0%, transparent 60%);
+  filter: blur(100px);
+  opacity: 0.2;
 }
 
 .window-drag-region {

src/components/NotificationToast.scss

@@ -7,10 +7,12 @@
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid var(--border-light);
 
-    // 浅色模式下使用不透明背景，避免透明窗口中通知过于透明
+    // 浅色模式下使用完全不透明背景，并禁用毛玻璃效果
     [data-mode="light"] &,
     :not([data-mode]) & {
         background: rgba(255, 255, 255, 1);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
     }
 
     border-radius: 12px;
@@ -46,10 +48,16 @@
         backdrop-filter: none !important;
         -webkit-backdrop-filter: none !important;
 
-        // 确保背景不透明
-        background: var(--bg-secondary, #2c2c2c);
+        // 确保背景完全不透明（通知是独立窗口，透明背景会穿透）
+        background: var(--bg-secondary-solid, var(--bg-secondary, #2c2c2c));
         color: var(--text-primary, #ffffff);
 
+        // 浅色模式强制完全不透明白色背景
+        [data-mode="light"] &,
+        :not([data-mode]) & {
+            background: #ffffff !important;
+        }
+
         box-shadow: none !important; // NO SHADOW
         border: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
 

src/components/Sidebar.scss

@@ -103,4 +103,31 @@
     background: var(--bg-tertiary);
     color: var(--text-primary);
   }
+}
+
+// 繁花如梦主题：侧边栏毛玻璃 + 激活项用主品牌色
+[data-theme="blossom-dream"] .sidebar {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-right: 1px solid rgba(255, 255, 255, 0.4);
+}
+
+[data-theme="blossom-dream"][data-mode="dark"] .sidebar {
+  background: rgba(34, 30, 36, 0.75);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+// 激活项：主品牌色纵向微渐变
+[data-theme="blossom-dream"] .nav-item.active {
+  background: linear-gradient(180deg, #D4849A 0%, #C4748A 100%);
+}
+
+// 深色激活项：用藕粉色，背景深灰底 + 粉色文字/图标（高阶玩法）
+[data-theme="blossom-dream"][data-mode="dark"] .nav-item.active {
+  background: rgba(209, 158, 187, 0.15);
+  color: #D19EBB;
+  border: 1px solid rgba(209, 158, 187, 0.2);
 }

src/components/TitleBar.scss

@@ -10,6 +10,12 @@
   gap: 8px;
 }
 
+// 繁花如梦：标题栏毛玻璃
+[data-theme="blossom-dream"] .title-bar {
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
 .title-logo {
   width: 20px;
   height: 20px;

src/pages/ChatPage.scss

@@ -2243,6 +2243,18 @@
   .quoted-text {
     color: var(--text-secondary);
     white-space: pre-wrap;
+
+    .quoted-type-label {
+      font-style: italic;
+      opacity: 0.8;
+    }
+
+    .quoted-emoji-image {
+      width: 40px;
+      height: 40px;
+      vertical-align: middle;
+      object-fit: contain;
+    }
   }
 }
 
@@ -2897,7 +2909,6 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 12px;
   color: var(--text-secondary);
   font-size: 13px;
 

src/pages/ChatPage.tsx

@@ -2780,6 +2780,31 @@ const voiceTranscriptCache = new Map<string, string>()
 const senderAvatarCache = new Map<string, { avatarUrl?: string; displayName?: string }>()
 const senderAvatarLoading = new Map<string, Promise<{ avatarUrl?: string; displayName?: string } | null>>()
 
+// 引用消息中的动画表情组件
+function QuotedEmoji({ cdnUrl, md5 }: { cdnUrl: string; md5?: string }) {
+  const cacheKey = md5 || cdnUrl
+  const [localPath, setLocalPath] = useState<string | undefined>(() => emojiDataUrlCache.get(cacheKey))
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    if (localPath || loading || error) return
+    setLoading(true)
+    window.electronAPI.chat.downloadEmoji(cdnUrl, md5).then((result: { success: boolean; localPath?: string }) => {
+      if (result.success && result.localPath) {
+        emojiDataUrlCache.set(cacheKey, result.localPath)
+        setLocalPath(result.localPath)
+      } else {
+        setError(true)
+      }
+    }).catch(() => setError(true)).finally(() => setLoading(false))
+  }, [cdnUrl, md5, cacheKey, localPath, loading, error])
+
+  if (error || (!loading && !localPath)) return <span className="quoted-type-label">[动画表情]</span>
+  if (loading) return <span className="quoted-type-label">[动画表情]</span>
+  return <img src={localPath} alt="动画表情" className="quoted-emoji-image" />
+}
+
 // 消息气泡组件
 function MessageBubble({
   message,
@@ -2901,7 +2926,7 @@ function MessageBubble({
   // 从缓存获取表情包 data URL
   const cacheKey = message.emojiMd5 || message.emojiCdnUrl || ''
   const [emojiLocalPath, setEmojiLocalPath] = useState<string | undefined>(
-    () => emojiDataUrlCache.get(cacheKey)
+    () => emojiDataUrlCache.get(cacheKey) || message.emojiLocalPath
   )
   const imageCacheKey = message.imageMd5 || message.imageDatName || `local:${message.localId}`
   const [imageLocalPath, setImageLocalPath] = useState<string | undefined>(
@@ -3036,10 +3061,15 @@ function MessageBubble({
   // 自动下载表情包
   useEffect(() => {
     if (emojiLocalPath) return
+    // 后端已从本地缓存找到文件（转发表情包无 CDN URL 的情况）
+    if (isEmoji && message.emojiLocalPath && !emojiLocalPath) {
+      setEmojiLocalPath(message.emojiLocalPath)
+      return
+    }
     if (isEmoji && message.emojiCdnUrl && !emojiLoading && !emojiError) {
       downloadEmoji()
     }
-  }, [isEmoji, message.emojiCdnUrl, emojiLocalPath, emojiLoading, emojiError])
+  }, [isEmoji, message.emojiCdnUrl, message.emojiLocalPath, emojiLocalPath, emojiLoading, emojiError])
 
   const requestImageDecrypt = useCallback(async (forceUpdate = false, silent = false) => {
     if (!isImage) return
@@ -3971,11 +4001,13 @@ function MessageBubble({
     // 通话消息
     if (isCall) {
       return (
-        <div className="call-message">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
-          </svg>
-          <span>{message.parsedContent || '[通话]'}</span>
+        <div className="bubble-content">
+          <div className="call-message">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+            </svg>
+            <span>{message.parsedContent || '[通话]'}</span>
+          </div>
         </div>
       )
     }
@@ -4043,11 +4075,39 @@ function MessageBubble({
         const replyText = q('title') || cleanMessageContent(message.parsedContent) || ''
         const referContent = q('refermsg > content') || ''
         const referSender = q('refermsg > displayname') || ''
+        const referType = q('refermsg > type') || ''
+
+        // 根据被引用消息类型渲染对应内容
+        const renderReferContent = () => {
+          // 动画表情：解析嵌套 XML 提取 cdnurl 渲染
+          if (referType === '47') {
+            try {
+              const innerDoc = new DOMParser().parseFromString(referContent, 'text/xml')
+              const cdnUrl = innerDoc.querySelector('emoji')?.getAttribute('cdnurl') || ''
+              const md5 = innerDoc.querySelector('emoji')?.getAttribute('md5') || ''
+              if (cdnUrl) return <QuotedEmoji cdnUrl={cdnUrl} md5={md5} />
+            } catch { /* 解析失败降级 */ }
+            return <span className="quoted-type-label">[动画表情]</span>
+          }
+
+          // 各类型名称映射
+          const typeLabels: Record<string, string> = {
+            '3': '图片', '34': '语音', '43': '视频',
+            '49': '链接', '50': '通话', '10000': '系统消息', '10002': '撤回消息',
+          }
+          if (referType && typeLabels[referType]) {
+            return <span className="quoted-type-label">[{typeLabels[referType]}]</span>
+          }
+
+          // 普通文本或未知类型
+          return <>{renderTextWithEmoji(cleanMessageContent(referContent))}</>
+        }
+
         return (
           <div className="bubble-content">
             <div className="quoted-message">
               {referSender && <span className="quoted-sender">{referSender}</span>}
-              <span className="quoted-text">{renderTextWithEmoji(cleanMessageContent(referContent))}</span>
+              <span className="quoted-text">{renderReferContent()}</span>
             </div>
             <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
           </div>
@@ -4143,6 +4203,22 @@ function MessageBubble({
         </div>
       )
 
+      if (kind === 'quote') {
+        // 引用回复消息（appMsgKind='quote'，xmlType=57）
+        const replyText = message.linkTitle || q('title') || cleanMessageContent(message.parsedContent) || ''
+        const referContent = message.quotedContent || q('refermsg > content') || ''
+        const referSender = message.quotedSender || q('refermsg > displayname') || ''
+        return (
+          <div className="bubble-content">
+            <div className="quoted-message">
+              {referSender && <span className="quoted-sender">{referSender}</span>}
+              <span className="quoted-text">{renderTextWithEmoji(cleanMessageContent(referContent))}</span>
+            </div>
+            <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
+          </div>
+        )
+      }
+
       if (kind === 'red-packet') {
         // 专属红包卡片
         const greeting = (() => {
@@ -4347,6 +4423,44 @@ function MessageBubble({
         console.error('解析 AppMsg 失败:', e)
       }
 
+      // 引用回复消息 (type=57)，防止被误判为链接
+      if (appMsgType === '57') {
+        const replyText = parsedDoc?.querySelector('title')?.textContent?.trim() || cleanMessageContent(message.parsedContent) || ''
+        const referContent = parsedDoc?.querySelector('refermsg > content')?.textContent?.trim() || ''
+        const referSender = parsedDoc?.querySelector('refermsg > displayname')?.textContent?.trim() || ''
+        const referType = parsedDoc?.querySelector('refermsg > type')?.textContent?.trim() || ''
+
+        const renderReferContent2 = () => {
+          if (referType === '47') {
+            try {
+              const innerDoc = new DOMParser().parseFromString(referContent, 'text/xml')
+              const cdnUrl = innerDoc.querySelector('emoji')?.getAttribute('cdnurl') || ''
+              const md5 = innerDoc.querySelector('emoji')?.getAttribute('md5') || ''
+              if (cdnUrl) return <QuotedEmoji cdnUrl={cdnUrl} md5={md5} />
+            } catch { /* 解析失败降级 */ }
+            return <span className="quoted-type-label">[动画表情]</span>
+          }
+          const typeLabels: Record<string, string> = {
+            '3': '图片', '34': '语音', '43': '视频',
+            '49': '链接', '50': '通话', '10000': '系统消息', '10002': '撤回消息',
+          }
+          if (referType && typeLabels[referType]) {
+            return <span className="quoted-type-label">[{typeLabels[referType]}]</span>
+          }
+          return <>{renderTextWithEmoji(cleanMessageContent(referContent))}</>
+        }
+
+        return (
+          <div className="bubble-content">
+            <div className="quoted-message">
+              {referSender && <span className="quoted-sender">{referSender}</span>}
+              <span className="quoted-text">{renderReferContent2()}</span>
+            </div>
+            <div className="message-text">{renderTextWithEmoji(cleanMessageContent(replyText))}</div>
+          </div>
+        )
+      }
+
       // 群公告消息 (type=87)
       if (appMsgType === '87') {
         const announcementText = textAnnouncement || desc || '群公告'
@@ -4579,7 +4693,7 @@ function MessageBubble({
     if (isEmoji) {
       // ... (keep existing emoji logic)
       // 没有 cdnUrl 或加载失败，显示占位符
-      if (!message.emojiCdnUrl || emojiError) {
+      if ((!message.emojiCdnUrl && !message.emojiLocalPath) || emojiError) {
         return (
           <div className="emoji-unavailable">
             <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">

src/pages/HomePage.scss

@@ -29,7 +29,7 @@
 .blob-1 {
   width: 400px;
   height: 400px;
-  background: rgba(139, 115, 85, 0.25);
+  background: rgba(var(--primary-rgb), 0.25);
   top: -100px;
   left: -50px;
   animation-duration: 25s;
@@ -38,7 +38,7 @@
 .blob-2 {
   width: 350px;
   height: 350px;
-  background: rgba(139, 115, 85, 0.15);
+  background: rgba(var(--primary-rgb), 0.15);
   bottom: -50px;
   right: -50px;
   animation-duration: 30s;
@@ -74,7 +74,7 @@
   margin: 0 0 16px;
   color: var(--text-primary);
   letter-spacing: -2px;
-  background: linear-gradient(135deg, var(--text-primary) 0%, rgba(139, 115, 85, 0.8) 100%);
+  background: linear-gradient(135deg, var(--primary) 0%, rgba(var(--primary-rgb), 0.6) 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

src/pages/SettingsPage.tsx

@@ -939,8 +939,16 @@ function SettingsPage() {
       <div className="theme-grid">
         {themes.map((theme) => (
           <div key={theme.id} className={`theme-card ${currentTheme === theme.id ? 'active' : ''}`} onClick={() => setTheme(theme.id)}>
-            <div className="theme-preview" style={{ background: effectiveMode === 'dark' ? 'linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)' : `linear-gradient(135deg, ${theme.bgColor} 0%, ${theme.bgColor}dd 100%)` }}>
-              <div className="theme-accent" style={{ background: theme.primaryColor }} />
+            <div className="theme-preview" style={{
+              background: effectiveMode === 'dark'
+                ? (theme.id === 'blossom-dream' ? 'linear-gradient(150deg, #151316 0%, #1A1620 50%, #131018 100%)' : 'linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)')
+                : (theme.id === 'blossom-dream' ? `linear-gradient(150deg, ${theme.bgColor} 0%, #F8F2F8 45%, #F2F6FB 100%)` : `linear-gradient(135deg, ${theme.bgColor} 0%, ${theme.bgColor}dd 100%)`)
+            }}>
+              <div className="theme-accent" style={{
+                background: theme.accentColor
+                  ? `linear-gradient(135deg, ${theme.primaryColor} 0%, ${theme.accentColor} 100%)`
+                  : theme.primaryColor
+              }} />
             </div>
             <div className="theme-info">
               <span className="theme-name">{theme.name}</span>

src/stores/themeStore.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
-export type ThemeId = 'cloud-dancer' | 'corundum-blue' | 'kiwi-green' | 'spicy-red' | 'teal-water'
+export type ThemeId = 'cloud-dancer' | 'corundum-blue' | 'kiwi-green' | 'spicy-red' | 'teal-water' | 'blossom-dream'
 export type ThemeMode = 'light' | 'dark' | 'system'
 
 export interface ThemeInfo {
@@ -10,6 +10,8 @@ export interface ThemeInfo {
   description: string
   primaryColor: string
   bgColor: string
+  // 可选副色，用于多彩主题的渐变预览
+  accentColor?: string
 }
 
 export const themes: ThemeInfo[] = [
@@ -20,6 +22,14 @@ export const themes: ThemeInfo[] = [
     primaryColor: '#8B7355',
     bgColor: '#F0EEE9'
   },
+  {
+    id: 'blossom-dream',
+    name: '繁花如梦',
+    description: '晨曦花境 · 夜阑幽梦',
+    primaryColor: '#D4849A',
+    bgColor: '#FCF9FB',
+    accentColor: '#FFBE98'
+  },
   {
     id: 'corundum-blue',
     name: '刚玉蓝',

src/styles/main.scss

@@ -153,6 +153,43 @@
   --sent-card-bg: var(--primary);
 }
 
+// 繁花如梦 - 浅色（晨曦花境）
+[data-theme="blossom-dream"][data-mode="light"],
+[data-theme="blossom-dream"]:not([data-mode]) {
+  // 三色定义（供伪元素光晕使用，饱和度提高以便在底色上可见）
+  --blossom-pink: #F0A0B8;
+  --blossom-peach: #FFB07A;
+  --blossom-blue: #90B8E0;
+
+  // 主品牌色：Pantone 粉晶 Rose Quartz
+  --primary: #D4849A;
+  --primary-rgb: 212, 132, 154;
+  --primary-hover: #C4748A;
+  --primary-light: rgba(212, 132, 154, 0.12);
+
+  // 背景三层：主背景最深（相对），面板次之，卡片最白
+  --bg-primary: #F5EDF2;
+  --bg-secondary: rgba(255, 255, 255, 0.82);
+  --bg-tertiary: rgba(212, 132, 154, 0.06);
+  --bg-hover: rgba(212, 132, 154, 0.09);
+
+  // 文字：提高对比度，主色接近纯黑只带微弱紫调
+  --text-primary: #1E1A22;
+  --text-secondary: #6B5F70;
+  --text-tertiary: #9A8A9E;
+  // 边框：粉色半透明，有存在感但不强硬
+  --border-color: rgba(212, 132, 154, 0.18);
+
+  --bg-gradient: linear-gradient(150deg, #F5EDF2 0%, #F0EAF6 50%, #EAF0F8 100%);
+  --primary-gradient: linear-gradient(135deg, #D4849A 0%, #E8A8B8 100%);
+
+  // 卡片：高不透明度白，与背景形成明显层次
+  --card-bg: rgba(255, 255, 255, 0.88);
+  --card-inner-bg: rgba(255, 255, 255, 0.95);
+
+  --sent-card-bg: var(--primary);
+}
+
 // ==================== 深色主题 ====================
 
 // 云上舞白 - 深色
@@ -163,6 +200,7 @@
   --primary-light: rgba(201, 168, 108, 0.15);
   --bg-primary: #1a1816;
   --bg-secondary: rgba(40, 36, 32, 0.9);
+  --bg-secondary-solid: #282420;
   --bg-tertiary: rgba(255, 255, 255, 0.05);
   --bg-hover: rgba(255, 255, 255, 0.08);
   --text-primary: #F0EEE9;
@@ -184,6 +222,7 @@
   --primary-light: rgba(106, 154, 170, 0.15);
   --bg-primary: #141a1c;
   --bg-secondary: rgba(30, 40, 44, 0.9);
+  --bg-secondary-solid: #1e282c;
   --bg-tertiary: rgba(255, 255, 255, 0.05);
   --bg-hover: rgba(255, 255, 255, 0.08);
   --text-primary: #E8EEF0;
@@ -205,6 +244,7 @@
   --primary-light: rgba(154, 186, 124, 0.15);
   --bg-primary: #161a14;
   --bg-secondary: rgba(34, 42, 30, 0.9);
+  --bg-secondary-solid: #222a1e;
   --bg-tertiary: rgba(255, 255, 255, 0.05);
   --bg-hover: rgba(255, 255, 255, 0.08);
   --text-primary: #E8F0E4;
@@ -226,6 +266,7 @@
   --primary-light: rgba(192, 96, 104, 0.15);
   --bg-primary: #1a1416;
   --bg-secondary: rgba(42, 32, 34, 0.9);
+  --bg-secondary-solid: #2a2022;
   --bg-tertiary: rgba(255, 255, 255, 0.05);
   --bg-hover: rgba(255, 255, 255, 0.08);
   --text-primary: #F0E8E8;
@@ -247,6 +288,7 @@
   --primary-light: rgba(122, 186, 170, 0.15);
   --bg-primary: #121a1a;
   --bg-secondary: rgba(28, 42, 42, 0.9);
+  --bg-secondary-solid: #1c2a2a;
   --bg-tertiary: rgba(255, 255, 255, 0.05);
   --bg-hover: rgba(255, 255, 255, 0.08);
   --text-primary: #E4F0F0;
@@ -260,6 +302,43 @@
   --sent-card-bg: var(--primary);
 }
 
+// 繁花如梦 - 深色（夜阑幽梦）
+[data-theme="blossom-dream"][data-mode="dark"] {
+  // 光晕色（供伪元素使用，降低饱和度避免刺眼）
+  --blossom-pink: #C670C3;
+  --blossom-purple: #5F4B8B;
+  --blossom-blue: #3A2A50;
+
+  // 主品牌色：藕粉/烟紫粉，降饱和度不刺眼
+  --primary: #D19EBB;
+  --primary-rgb: 209, 158, 187;
+  --primary-hover: #DDB0C8;
+  --primary-light: rgba(209, 158, 187, 0.15);
+
+  // 背景三层：极深黑灰底（去掉紫薯色），面板略浅，卡片再浅一级
+  --bg-primary: #151316;
+  --bg-secondary: rgba(34, 30, 36, 0.92);
+  --bg-secondary-solid: #221E24;
+  --bg-tertiary: rgba(255, 255, 255, 0.04);
+  --bg-hover: rgba(209, 158, 187, 0.1);
+
+  // 文字
+  --text-primary: #F0EAF4;
+  --text-secondary: #A898AE;
+  --text-tertiary: #6A5870;
+  // 边框：极细白色内发光，剥离层级
+  --border-color: rgba(255, 255, 255, 0.07);
+
+  --bg-gradient: linear-gradient(150deg, #151316 0%, #1A1620 50%, #131018 100%);
+  --primary-gradient: linear-gradient(135deg, #D19EBB 0%, #A878A8 100%);
+
+  // 卡片：比面板更亮一档，用深灰而非紫色
+  --card-bg: rgba(42, 38, 46, 0.92);
+  --card-inner-bg: rgba(52, 48, 56, 0.96);
+
+  --sent-card-bg: var(--primary);
+}
+
 // 重置样式
 * {
   margin: 0;