diff --git a/index.html b/index.html
index 655633e..44f273e 100644
--- a/index.html
+++ b/index.html
@@ -75,14 +75,19 @@
       display: none;
     }
     .pace .pace-progress {
-      background: linear-gradient(90deg, #ff1493, #d946ef);
+      background: linear-gradient(90deg, #ff1493, #ff69b4, #d946ef);
       position: fixed;
       z-index: 9999;
       top: 0;
       right: 100%;
       width: 100%;
-      height: 3px;
-      box-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
+      height: 4px;
+      box-shadow: 0 0 15px rgba(255, 20, 147, 0.6), 0 0 30px rgba(217, 70, 239, 0.4);
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.8; }
     }
 
     /* Fancybox 图片查看器 - 艳粉主色调 */
@@ -98,41 +103,54 @@
        全局伪元素样式（无法用 Tailwind 替代）
        ============================================ */
     
-    /* 自定义滚动条 */
+    /* 自定义滚动条 - 艳粉主题 */
     ::-webkit-scrollbar {
-      width: 10px;
-      height: 10px;
+      width: 12px;
+      height: 12px;
     }
     ::-webkit-scrollbar-track {
-      background: rgba(255, 255, 255, 0.1);
+      background: linear-gradient(to bottom, rgba(255, 179, 217, 0.1), rgba(255, 228, 242, 0.15));
       border-radius: 10px;
+      box-shadow: inset 0 0 5px rgba(255, 20, 147, 0.05);
     }
     .dark ::-webkit-scrollbar-track {
-      background: rgba(30, 41, 59, 0.3);
+      background: linear-gradient(to bottom, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.5));
+      box-shadow: inset 0 0 5px rgba(255, 105, 180, 0.1);
     }
     ::-webkit-scrollbar-thumb {
-      background: linear-gradient(180deg, #ff1493, #d946ef);
+      background: linear-gradient(180deg, #ff1493 0%, #ff69b4 50%, #d946ef 100%);
       border-radius: 10px;
-      transition: background 0.3s ease;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      box-shadow: 0 2px 8px rgba(255, 20, 147, 0.3);
+      transition: all 0.3s ease;
     }
     .dark ::-webkit-scrollbar-thumb {
-      background: linear-gradient(180deg, #ff69b4, #e879f9);
+      background: linear-gradient(180deg, #ff69b4 0%, #ffb3d9 50%, #e879f9 100%);
+      border: 2px solid rgba(255, 105, 180, 0.2);
+      box-shadow: 0 2px 10px rgba(255, 105, 180, 0.4);
     }
     ::-webkit-scrollbar-thumb:hover {
-      background: linear-gradient(180deg, #c71585, #c026d3);
+      background: linear-gradient(180deg, #ff69b4 0%, #ff1493 50%, #d946ef 100%);
+      border-color: rgba(255, 255, 255, 0.5);
+      box-shadow: 0 4px 12px rgba(255, 20, 147, 0.5);
+      transform: scale(1.05);
     }
     .dark ::-webkit-scrollbar-thumb:hover {
-      background: linear-gradient(180deg, #ff1493, #d946ef);
+      background: linear-gradient(180deg, #ffb3d9 0%, #ff69b4 50%, #f0abfc 100%);
+      border-color: rgba(255, 105, 180, 0.4);
+      box-shadow: 0 4px 15px rgba(255, 105, 180, 0.6);
     }
 
     /* 文本选中高亮 - 艳粉主色调 */
     ::selection {
-      background: rgba(255, 20, 147, 0.3);
-      color: inherit;
+      background: linear-gradient(135deg, rgba(255, 20, 147, 0.35), rgba(255, 105, 180, 0.3));
+      color: #1d1b1e;
+      text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
     }
     .dark ::selection {
-      background: rgba(217, 70, 239, 0.4);
-      color: inherit;
+      background: linear-gradient(135deg, rgba(255, 105, 180, 0.4), rgba(232, 121, 249, 0.35));
+      color: #ffffff;
+      text-shadow: 0 0 10px rgba(255, 20, 147, 0.6);
     }
 
     /* ============================================
@@ -199,17 +217,25 @@
       100% { opacity: 1; transform: scale(1) rotate(0deg); }
     }
 
-    /* 背景图层伪元素（默认纹理和遮罩层） - 艳粉主色调 */
+    /* 背景图层伪元素 - 仅在无背景图时显示淡粉色纹理 */
     #background-layer::before {
       content: "";
       position: absolute;
       inset: 0;
-      background: #ffb3d9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23000000' fill-opacity='0.05' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l-2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E") center;
+      background: 
+        radial-gradient(circle at 20% 50%, rgba(255, 20, 147, 0.08), transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(217, 70, 239, 0.08), transparent 50%),
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23ff1493' fill-opacity='0.02' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l-2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E") center;
       z-index: -1;
+      opacity: 0.4;
       transition: opacity 0.8s ease-in-out;
     }
     .dark #background-layer::before {
-      background: rgb(15, 23, 42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l-2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E") center;
+      background: 
+        radial-gradient(circle at 30% 20%, rgba(255, 105, 180, 0.06), transparent 40%),
+        radial-gradient(circle at 70% 70%, rgba(232, 121, 249, 0.05), transparent 40%),
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23ff69b4' fill-opacity='0.015' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l-2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E") center;
+      opacity: 0.3;
     }
     #background-layer.has-image::before {
       opacity: 0;
diff --git a/src/api/search.ts b/src/api/search.ts
index 4b9fc7a..994664f 100644
--- a/src/api/search.ts
+++ b/src/api/search.ts
@@ -18,6 +18,7 @@ export interface SearchResult {
 export interface PlatformResult {
   name: string
   color: 'lime' | 'white' | 'gold' | 'red'
+  url?: string
   items: SearchResult[]
   error: string
 }
@@ -142,15 +143,31 @@ export async function searchGameStream(
             callbacks.onProgress?.(data.progress.completed, data.progress.total)
 
             // 转换为我们的格式，保留 tags 标签信息
+            const items = data.result.items.map((item: any) => ({
+              platform: data.result.name,
+              title: item.name,
+              url: item.url,
+              tags: data.result.tags || [], // 保留平台标签（NoReq, Login, BTmag 等）
+            }))
+
+            // 提取平台URL：优先使用API返回的url/website，否则从第一个结果的URL中提取域名
+            let platformUrl = data.result.url || data.result.website || ''
+            
+            if (!platformUrl && items.length > 0 && items[0].url) {
+              try {
+                const firstUrl = new URL(items[0].url)
+                platformUrl = `${firstUrl.protocol}//${firstUrl.host}`
+              } catch (e) {
+                // URL解析失败，保持为空
+                console.warn(`无法从 ${items[0].url} 提取平台URL`)
+              }
+            }
+
             const platformResult: PlatformResult = {
               name: data.result.name,
               color: data.result.color || 'white',
-              items: data.result.items.map((item: any) => ({
-                platform: data.result.name,
-                title: item.name,
-                url: item.url,
-                tags: data.result.tags || [], // 保留平台标签（NoReq, Login, BTmag 等）
-              })),
+              url: platformUrl,
+              items: items,
               error: data.result.error || '',
             }
 
diff --git a/src/components/CommentsModal.vue b/src/components/CommentsModal.vue
index 1671edb..e6d2ff8 100644
--- a/src/components/CommentsModal.vue
+++ b/src/components/CommentsModal.vue
@@ -24,15 +24,15 @@
       >
         <div
           v-if="searchStore.isCommentsModalOpen"
-          class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-2xl backdrop-saturate-150 rounded-2xl sm:rounded-3xl shadow-2xl w-full max-w-4xl max-h-[90vh] mx-4 flex flex-col overflow-hidden border border-white/40 dark:border-slate-700/40"
+          class="glassmorphism-modal rounded-2xl sm:rounded-3xl shadow-2xl w-full max-w-4xl max-h-[90vh] mx-4 flex flex-col overflow-hidden"
           @click.stop
         >
           <!-- 标题栏 -->
-          <div class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-4 sm:py-5 border-b border-theme-primary/20 dark:border-slate-700">
-            <i class="fas fa-comments text-theme-primary dark:text-theme-accent text-xl sm:text-2xl" />
+          <div class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-4 sm:py-5 border-b border-[#ff1493]/20 dark:border-slate-700">
+            <i class="fas fa-comments text-[#ff1493] dark:text-[#ff69b4] text-xl sm:text-2xl" />
             <h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-slate-100 flex-1">评论区</h2>
             <button
-              class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-theme-primary/10 dark:hover:bg-slate-700 text-gray-500 dark:text-slate-400 hover:text-theme-primary dark:hover:text-theme-accent transition-all duration-200"
+              class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-[#ff1493]/10 dark:hover:bg-slate-700 text-gray-500 dark:text-slate-400 hover:text-[#ff1493] dark:hover:text-[#ff69b4] transition-all duration-200"
               @click="closeModal"
             >
               <i class="fas fa-times text-xl" />
diff --git a/src/components/FloatingButtons.vue b/src/components/FloatingButtons.vue
index cd642c5..62cd714 100644
--- a/src/components/FloatingButtons.vue
+++ b/src/components/FloatingButtons.vue
@@ -173,15 +173,21 @@ onUnmounted(() => {
   width: 44px;
   height: 44px;
   border-radius: 18px;
-  border: none;
+  border: 1.5px solid rgba(255, 20, 147, 0.3);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
-  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4), 0 3px 10px rgba(0, 0, 0, 0.15);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  
+  /* 液态玻璃效果 + 艳粉阴影 */
+  backdrop-filter: blur(15px) saturate(180%);
+  -webkit-backdrop-filter: blur(15px) saturate(180%);
+  box-shadow: 
+    0 6px 20px rgba(255, 20, 147, 0.3),
+    0 3px 10px rgba(255, 105, 180, 0.2),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -191,7 +197,10 @@ onUnmounted(() => {
     height: 52px;
     border-radius: 22px;
     font-size: 22px;
-    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 
+      0 8px 24px rgba(255, 20, 147, 0.35),
+      0 4px 12px rgba(255, 105, 180, 0.25),
+      0 0 0 1px rgba(255, 255, 255, 0.5) inset;
   }
 }
 
@@ -205,38 +214,59 @@ onUnmounted(() => {
 }
 
 .fab-button:hover {
-  box-shadow: 0 12px 36px rgba(236, 72, 153, 0.5), 0 6px 20px rgba(0, 0, 0, 0.2);
+  box-shadow: 
+    0 12px 36px rgba(255, 20, 147, 0.45),
+    0 6px 20px rgba(255, 105, 180, 0.35),
+    0 0 40px rgba(255, 20, 147, 0.25),
+    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
   transform: translateY(-4px) scale(1.08) rotate(5deg);
+  border-color: rgba(255, 20, 147, 0.5);
 }
 
 .fab-button:active {
   transform: translateY(-2px) scale(1.02);
-  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
+  box-shadow: 
+    0 6px 20px rgba(255, 20, 147, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
 }
 
+/* 各按钮特定颜色 - 艳粉主题 */
 .scroll-top-btn {
-  background: linear-gradient(135deg, rgb(99, 102, 241), rgb(79, 70, 229));
+  background: linear-gradient(135deg, rgb(236, 72, 153), rgb(219, 39, 119));
   color: white;
 }
 
 .comments-btn {
-  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
+  background: linear-gradient(135deg, #ff1493, #c71585);
   color: white;
 }
 
 .comments-btn.comments-open {
-  background: linear-gradient(135deg, rgb(156, 163, 175), rgb(107, 114, 128));
+  background: linear-gradient(135deg, rgb(255, 105, 180), rgb(199, 21, 133));
   color: white;
+  border-color: rgba(255, 105, 180, 0.5);
 }
 
 .vndb-btn {
-  background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-dark));
+  background: linear-gradient(135deg, #d946ef, #c026d3);
   color: white;
 }
 
 .vndb-btn.vndb-open {
-  background: linear-gradient(135deg, rgb(156, 163, 175), rgb(107, 114, 128));
+  background: linear-gradient(135deg, rgb(232, 121, 249), rgb(217, 70, 239));
   color: white;
+  border-color: rgba(232, 121, 249, 0.5);
+}
+
+.nav-btn {
+  background: linear-gradient(135deg, rgb(255, 20, 147), rgb(217, 70, 239));
+  color: white;
+}
+
+.nav-btn.nav-open {
+  background: linear-gradient(135deg, rgb(255, 105, 180), rgb(232, 121, 249));
+  color: white;
+  border-color: rgba(255, 105, 180, 0.5);
 }
 
 .fab-button i {
@@ -247,17 +277,7 @@ onUnmounted(() => {
   transform: scale(1.1);
 }
 
-.nav-btn {
-  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
-  color: white;
-}
-
-.nav-btn.nav-open {
-  background: linear-gradient(135deg, rgb(156, 163, 175), rgb(107, 114, 128));
-  color: white;
-}
-
-/* 自定义滚动条 */
+/* 自定义滚动条 - 艳粉主题 */
 .custom-scrollbar::-webkit-scrollbar {
   width: 4px;
 }
@@ -267,14 +287,15 @@ onUnmounted(() => {
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(156, 163, 175, 0.5);
+  background: linear-gradient(180deg, rgba(255, 20, 147, 0.5), rgba(217, 70, 239, 0.5));
   border-radius: 2px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(156, 163, 175, 0.7);
+  background: linear-gradient(180deg, rgba(255, 20, 147, 0.7), rgba(217, 70, 239, 0.7));
 }
 
+/* 站点导航项图标颜色 */
 .item-lime i {
   color: rgb(132, 204, 22);
 }
diff --git a/src/components/SearchHeader.vue b/src/components/SearchHeader.vue
index 292a816..b83d892 100644
--- a/src/components/SearchHeader.vue
+++ b/src/components/SearchHeader.vue
@@ -1,13 +1,17 @@
 <template>
   <div class="container mx-auto w-full px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
     <!-- 主内容区域 - 垂直居中布局 -->
-    <div class="flex flex-col items-center justify-center min-h-[60vh]">
-      <!-- Title with gamepad icon and status -->
+    <div class="flex flex-col items-center justify-center min-h-[65vh] sm:min-h-[70vh]">
+      <!-- Title with gamepad icon and status - 艳粉主题 -->
       <div
-        class="header-title flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 mb-8 sm:mb-12 animate-fade-in-down"
+        class="header-title flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 mb-6 sm:mb-8 animate-fade-in-down"
       >
         <h1
-          class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center text-white drop-shadow-[0_4px_8px_rgba(0,0,0,0.3)]"
+          class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center 
+                 text-white
+                 drop-shadow-[0_2px_8px_rgba(255,20,147,0.6)]
+                 dark:drop-shadow-[0_2px_12px_rgba(255,105,180,0.8)]"
+          style="text-shadow: 0 0 30px rgba(255, 20, 147, 0.4), 0 0 60px rgba(255, 105, 180, 0.2);"
         >
           <span class="whitespace-nowrap">Galgame 聚合搜索</span>
         </h1>
@@ -15,17 +19,24 @@
           href="https://status.searchgal.homes"
           target="_blank"
           rel="noopener noreferrer"
-          class="status-link px-3 sm:px-4 py-1.5 sm:py-2 rounded-full bg-white/70 dark:bg-slate-800/70 backdrop-blur-md flex items-center gap-1.5 sm:gap-2 text-green-600 dark:text-green-400 text-sm sm:text-base font-semibold hover:scale-105 transition-transform shadow-lg"
+          :class="[
+            'status-link px-3 sm:px-4 py-1.5 sm:py-2 rounded-full backdrop-blur-md border border-white/30 dark:border-white/20 flex items-center gap-1.5 sm:gap-2 text-white text-sm sm:text-base font-bold hover:scale-105 transition-all duration-300 shadow-md',
+            statusOnline === null 
+              ? 'bg-gray-500 hover:bg-gray-600 shadow-gray-500/20 hover:shadow-gray-500/30 dark:bg-gray-600 dark:hover:bg-gray-700' 
+              : statusOnline
+                ? 'bg-green-500 hover:bg-green-600 shadow-green-500/20 hover:shadow-green-500/30 dark:bg-green-600 dark:hover:bg-green-700'
+                : 'bg-red-500 hover:bg-red-600 shadow-red-500/20 hover:shadow-red-500/30 dark:bg-red-600 dark:hover:bg-red-700'
+          ]"
         >
-          <i class="fas fa-check-circle" />
-          <span>状态</span>
+          <i :class="statusOnline === null ? 'fas fa-spinner fa-spin' : statusOnline ? 'fas fa-check-circle' : 'fas fa-exclamation-circle'" />
+          <span>{{ statusOnline === null ? '检测中' : statusOnline ? '正常' : '异常' }}</span>
         </a>
       </div>
 
       <!-- 搜索历史 -->
       <SearchHistory
         ref="searchHistoryRef"
-        class="w-full max-w-2xl px-2 sm:px-0 mb-4"
+        class="w-full max-w-2xl px-2 sm:px-0 mb-3 sm:mb-4"
         @select="handleHistorySelect"
       />
 
@@ -35,67 +46,103 @@
         @submit.prevent="handleSearch"
       >
         <div class="flex flex-col gap-4">
-          <!-- Search Input -->
+          <!-- Search Input with Button Inside - 使用 Tailwind -->
           <div class="relative">
-            <i
-              class="fas fa-search absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 text-gray-400 text-lg sm:text-xl pointer-events-none z-10"
-            />
+            <!-- 搜索图标 -->
+            <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-theme-primary/60 dark:text-theme-accent/70 text-xl pointer-events-none z-10" />
+            
+            <!-- 输入框 -->
             <input
               v-model="searchQuery"
               type="search"
               placeholder="游戏或补丁关键字词*"
               required
-              class="w-full pl-10 sm:pl-12 pr-4 py-3 sm:py-4 text-sm sm:text-base rounded-2xl bg-white/50 dark:bg-slate-800/50 text-gray-900 dark:text-slate-100 placeholder:text-gray-400 dark:placeholder:text-slate-400 backdrop-blur-2xl backdrop-saturate-150 shadow-lg focus:shadow-2xl focus:scale-[1.01] transition-all outline-none border border-white/40 dark:border-slate-700/40 focus:border-theme-primary/60 dark:focus:border-theme-accent/60"
+              class="w-full pl-12 pr-32 py-4 text-base rounded-2xl 
+                     bg-white/70 dark:bg-slate-800/70
+                     text-gray-900 dark:text-slate-100 
+                     placeholder:text-gray-400 dark:placeholder:text-slate-400 
+                     backdrop-blur-xl backdrop-saturate-150
+                     border border-white/40 dark:border-slate-700/30
+                     shadow-lg shadow-theme-primary/10 dark:shadow-theme-accent/15
+                     hover:shadow-xl hover:shadow-theme-primary/15 dark:hover:shadow-theme-accent/20
+                     focus:shadow-2xl focus:shadow-theme-primary/20 dark:focus:shadow-theme-accent/25
+                     focus:scale-[1.01]
+                     transition-all duration-300 outline-none font-medium"
+              @keydown.enter.prevent="handleSearch"
             />
-          </div>
-
-          <!-- Search Button and Mode Selector -->
-          <div class="flex flex-col gap-3">
+            
+            <!-- 搜索按钮 - 内嵌在输入框右侧 -->
             <button
               type="submit"
               :disabled="searchStore.searchDisabled"
-              class="search-button w-full py-3 sm:py-4 rounded-2xl bg-gradient-to-r from-theme-primary/70 to-theme-primary-dark/70 dark:from-theme-accent/70 dark:to-theme-accent-dark/70 backdrop-blur-2xl backdrop-saturate-150 text-white font-semibold text-base sm:text-lg shadow-lg hover:shadow-2xl hover:scale-[1.02] active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 border border-white/30"
+              class="absolute right-2 top-1/2 -translate-y-1/2 
+                     px-6 py-2.5 rounded-xl
+                     bg-gradient-pink text-white font-bold text-sm
+                     backdrop-blur-md
+                     border border-white/30 dark:border-white/20
+                     shadow-md shadow-theme-primary/20
+                     hover:shadow-lg hover:shadow-theme-primary/30 hover:scale-105
+                     active:scale-95
+                     disabled:opacity-50 disabled:cursor-not-allowed
+                     transition-all duration-200
+                     flex items-center gap-2 z-10"
+              @click.prevent="handleSearch"
             >
-              <i class="fas fa-search" />
-              <span v-if="!searchStore.isSearching">开始搜索</span>
-              <span v-else>进度: {{ searchStore.searchProgress.current }} /
-                {{ searchStore.searchProgress.total }}</span>
+              <i class="fas fa-search text-sm" />
+              <span v-if="!searchStore.isSearching" class="hidden sm:inline">搜索</span>
+              <span v-else class="hidden sm:inline">{{ searchStore.searchProgress.current }}/{{ searchStore.searchProgress.total }}</span>
             </button>
+          </div>
 
-            <!-- Search Mode Selector - 胶囊开关 -->
-            <div class="flex justify-center">
-              <div class="mode-switch-container relative bg-white/50 dark:bg-slate-700/50 backdrop-blur-2xl backdrop-saturate-150 rounded-full p-1 shadow-lg border border-white/40 dark:border-slate-600/40">
-                <!-- 滑动背景 -->
-                <div
-                  class="mode-slider absolute top-1 bottom-1 rounded-full bg-gradient-to-r from-theme-primary/90 to-theme-primary-dark/90 dark:from-theme-accent/90 dark:to-theme-accent-dark/90 backdrop-blur-md shadow-md transition-all duration-300 ease-out"
-                  :style="{
-                    left: searchMode === 'game' ? '4px' : 'calc(50%)',
-                    width: 'calc(50% - 4px)'
-                  }"
-                />
-                
-                <!-- 游戏按钮 -->
-                <button
-                  type="button"
-                  class="mode-option relative z-10 px-6 py-2 rounded-full font-medium transition-all duration-300 flex items-center gap-2"
-                  :class="searchMode === 'game' ? 'text-white' : 'text-gray-700 dark:text-slate-300'"
-                  @click="searchMode = 'game'"
-                >
-                  <i class="fas fa-gamepad" />
-                  <span>游戏</span>
-                </button>
-                
-                <!-- 补丁按钮 -->
-                <button
-                  type="button"
-                  class="mode-option relative z-10 px-6 py-2 rounded-full font-medium transition-all duration-300 flex items-center gap-2"
-                  :class="searchMode === 'patch' ? 'text-white' : 'text-gray-700 dark:text-slate-300'"
-                  @click="searchMode = 'patch'"
-                >
-                  <i class="fas fa-tools" />
-                  <span>补丁</span>
-                </button>
-              </div>
+          <!-- Search Mode Selector - 使用 Tailwind 胶囊开关 -->
+          <div class="flex justify-center">
+            <div class="relative flex p-1.5 rounded-full
+                        bg-white/60 dark:bg-slate-700/60
+                        backdrop-blur-xl backdrop-saturate-150
+                        border border-white/40 dark:border-slate-600/30
+                        shadow-lg shadow-theme-primary/10 dark:shadow-theme-accent/15">
+              
+              <!-- 滑动背景指示器 -->
+              <div
+                class="absolute top-1.5 bottom-1.5 rounded-full 
+                       bg-gradient-pink
+                       shadow-md shadow-theme-primary/30
+                       transition-all duration-300 ease-out"
+                :style="{
+                  left: searchMode === 'game' ? '6px' : 'calc(50% + 2px)',
+                  width: 'calc(50% - 8px)'
+                }"
+              />
+              
+              <!-- 游戏按钮 -->
+              <button
+                type="button"
+                class="relative z-10 px-6 py-2 rounded-full font-semibold
+                       transition-all duration-300 
+                       flex items-center gap-2 text-sm whitespace-nowrap"
+                :class="searchMode === 'game' 
+                  ? 'text-white drop-shadow-md' 
+                  : 'text-gray-700 dark:text-slate-300 hover:text-theme-primary dark:hover:text-theme-accent'"
+                @click="searchMode = 'game'"
+              >
+                <i class="fas fa-gamepad" />
+                <span>游戏</span>
+              </button>
+              
+              <!-- 补丁按钮 -->
+              <button
+                type="button"
+                class="relative z-10 px-6 py-2 rounded-full font-semibold
+                       transition-all duration-300 
+                       flex items-center gap-2 text-sm whitespace-nowrap"
+                :class="searchMode === 'patch' 
+                  ? 'text-white drop-shadow-md' 
+                  : 'text-gray-700 dark:text-slate-300 hover:text-theme-primary dark:hover:text-theme-accent'"
+                @click="searchMode = 'patch'"
+              >
+                <i class="fas fa-tools" />
+                <span>补丁</span>
+              </button>
             </div>
           </div>
         </div>
@@ -125,15 +172,23 @@
       </Transition>
     </div>
 
-    <!-- Usage Notice - 独立于居中区域 -->
+    <!-- Usage Notice - 独立于居中区域 - 艳粉主题 -->
     <div class="w-full max-w-4xl mx-auto mt-8 sm:mt-12 px-2 sm:px-0 animate-fade-in animation-delay-1000">
       <div
-        class="usage-notice bg-white/50 dark:bg-slate-800/50 backdrop-blur-2xl backdrop-saturate-150 rounded-2xl sm:rounded-3xl shadow-xl p-4 sm:p-6 lg:p-8 border border-white/30 dark:border-slate-700/30"
+        class="usage-notice 
+               bg-white/75 dark:bg-slate-800/75
+               backdrop-blur-xl backdrop-saturate-150 
+               rounded-2xl sm:rounded-3xl 
+               shadow-xl shadow-theme-primary/10 dark:shadow-theme-accent/20
+               p-4 sm:p-6 lg:p-8 
+               border border-white/50 dark:border-slate-700/30"
       >
         <h2
-          class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-slate-100 mb-4 sm:mb-6 flex items-center gap-2"
+          class="text-xl sm:text-2xl font-bold 
+                 text-theme-primary dark:text-theme-accent
+                 mb-4 sm:mb-6 flex items-center gap-2"
         >
-          <i class="fas fa-info-circle text-theme-primary dark:text-theme-accent" />
+          <i class="fas fa-info-circle" />
           使用须知
         </h2>
         <ul class="space-y-3 sm:space-y-4 text-sm sm:text-base text-gray-700 dark:text-slate-300 leading-relaxed">
@@ -142,57 +197,59 @@
             <a
               href="https://saop.cc/"
               target="_blank"
-              class="text-indigo-600 hover:underline font-semibold"
+              class="text-theme-primary dark:text-theme-accent hover:underline font-bold
+                     hover:text-theme-primary-dark dark:hover:text-theme-accent-light
+                     transition-colors duration-200"
             >@Asuna</a>
             大佬提供的服务器和技术支持！没有大佬的魔法，咱可跑不起来！
           </li>
           <li>
             • 本程序纯属
-            <strong>爱发电</strong>，仅供绅士们交流学习使用，务必请大家
-            <strong>支持正版 Galgame</strong>！入正不亏哦！
+            <strong class="text-theme-primary dark:text-theme-accent font-bold">爱发电</strong>，仅供绅士们交流学习使用，务必请大家
+            <strong class="text-theme-primary dark:text-theme-accent font-bold">支持正版 Galgame</strong>！入正不亏哦！
           </li>
           <li>
             • 本站只做互联网内容的
-            <strong>聚合搬运工</strong>，搜索结果均来自第三方站点，下载前请各位自行判断
-            <strong>资源安全性</strong>，以免翻车。
+            <strong class="text-theme-primary dark:text-theme-accent font-bold">聚合搬运工</strong>，搜索结果均来自第三方站点，下载前请各位自行判断
+            <strong class="text-theme-primary dark:text-theme-accent font-bold">资源安全性</strong>，以免翻车。
           </li>
           <li>
-            • 搜索结果会显示不同的<strong>标签</strong>，帮助你快速了解资源特性：
-            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-100 text-green-700 text-xs font-medium ml-1">
+            • 搜索结果会显示不同的<strong class="text-theme-primary dark:text-theme-accent font-bold">标签</strong>，帮助你快速了解资源特性：
+            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs font-medium ml-1">
               <i class="fas fa-check-circle text-[10px]" />直接下载
             </span>
             表示无需登录，
-            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">
+            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium">
               <i class="fas fa-user text-[10px]" />需登录
             </span>
             表示需要账号，
-            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 text-xs font-medium">
+            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-xs font-medium">
               <i class="fas fa-rocket text-[10px]" />不限速
             </span>
             表示高速网盘，
-            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-violet-100 text-violet-700 text-xs font-medium">
+            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 text-xs font-medium">
               <i class="fas fa-magnet text-[10px]" />BT/磁力
             </span>
             表示种子下载等。
           </li>
           <li>
-            • 搜索时请注意关键词长度！<strong>关键词太短</strong>
-            可能搜不全（部分站点只显示首批结果），<strong>太长</strong>
+            • 搜索时请注意关键词长度！<strong class="text-theme-primary dark:text-theme-accent font-bold">关键词太短</strong>
+            可能搜不全（部分站点只显示首批结果），<strong class="text-theme-primary dark:text-theme-accent font-bold">太长</strong>
             则可能无法精准匹配。建议尝试
-            <strong>适当的关键词</strong>，效果更佳~
+            <strong class="text-theme-primary dark:text-theme-accent font-bold">适当的关键词</strong>，效果更佳~
           </li>
           <li>
             •
-            本程序每次查询完毕即断开连接，<strong>严禁任何形式的爆破或恶意爬取</strong>，做个文明的绅士！
+            本程序每次查询完毕即断开连接，<strong class="text-theme-primary dark:text-theme-accent font-bold">严禁任何形式的爆破或恶意爬取</strong>，做个文明的绅士！
           </li>
           <li>
             •
             万一某个站点搜索挂了，先看看自己的魔法是否到位，也可能是站点维护了，或者咱这边的
-            <strong>爬虫失效</strong> 了。
+            <strong class="text-theme-primary dark:text-theme-accent font-bold">爬虫失效</strong> 了。
           </li>
           <li>
             • 为了支持各 Galgame 站点能长久运营，还请各位把浏览器的
-            <strong>广告屏蔽插件</strong>
+            <strong class="text-theme-primary dark:text-theme-accent font-bold">广告屏蔽插件</strong>
             关掉，或将这些站点加入白名单。大家建站不易，小小的支持也是大大的动力！
           </li>
           <li>
@@ -200,17 +257,21 @@
             <a
               href="https://vndb.org/"
               target="_blank"
-              class="text-indigo-600 hover:underline font-semibold"
+              class="text-theme-primary dark:text-theme-accent hover:underline font-bold
+                     hover:text-theme-primary-dark dark:hover:text-theme-accent-light
+                     transition-colors duration-200"
             >VNDB</a>
             提供，由AI大模型翻译，翻译结果不保证准确性，仅作为检索游戏时的参考！
           </li>
-          <li>• 郑重呼吁：请务必支持 Galgame 正版！让爱与梦想延续！</li>
+          <li>• 郑重呼吁：请务必<strong class="text-theme-primary dark:text-theme-accent font-bold">支持 Galgame 正版</strong>！让爱与梦想延续！</li>
           <li>
             • 如果您觉得咱这小工具好用，请移步
             <a
               href="https://github.com/Moe-Sakura"
               target="_blank"
-              class="text-indigo-600 hover:underline font-semibold"
+              class="text-theme-primary dark:text-theme-accent hover:underline font-bold
+                     hover:text-theme-primary-dark dark:hover:text-theme-accent-light
+                     transition-colors duration-200"
             >GitHub</a>
             给本项目点个免费的
             <strong>Star</strong> 吧，秋梨膏！你的支持就是咱最大的动力，比心~
@@ -234,11 +295,41 @@ const searchQuery = ref('')
 const customApi = ref('')
 const searchMode = ref<'game' | 'patch'>('game')
 const searchHistoryRef = ref<InstanceType<typeof SearchHistory> | null>(null)
+const statusOnline = ref<boolean | null>(null) // null=检测中, true=在线, false=离线
 let cleanupURLListener: (() => void) | null = null
 let isUpdatingFromURL = false
+let statusCheckInterval: number | null = null
+
+// 检查状态页面是否在线
+async function checkStatus() {
+  try {
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 5000) // 5秒超时
+    
+    const response = await fetch('https://status.searchgal.homes', {
+      method: 'HEAD',
+      mode: 'no-cors', // 避免CORS问题
+      signal: controller.signal,
+    })
+    
+    clearTimeout(timeoutId)
+    // no-cors模式下，只要请求不报错就认为是在线
+    statusOnline.value = true
+  } catch (error) {
+    statusOnline.value = false
+  }
+}
 
 // 从 URL 或 store 恢复搜索参数
 onMounted(() => {
+  // 立即检查状态
+  checkStatus()
+  
+  // 每30秒检查一次状态
+  statusCheckInterval = window.setInterval(() => {
+    checkStatus()
+  }, 30000)
+  
   // 优先从 URL 读取参数
   const urlParams = getSearchParamsFromURL()
   
@@ -278,6 +369,9 @@ onUnmounted(() => {
   if (cleanupURLListener) {
     cleanupURLListener()
   }
+  if (statusCheckInterval) {
+    clearInterval(statusCheckInterval)
+  }
 })
 
 // 同步到 store 和 URL
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 489d047..49ad516 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -9,20 +9,54 @@
         :class="getCardClass(platformData.color)"
       >
         <div class="p-3 sm:p-4 md:p-6">
-          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-4 mb-3 sm:mb-4">
-            <h3 class="text-lg sm:text-xl font-bold flex items-center gap-2 flex-wrap" :class="getTextColor(platformData.color)">
+          <!-- 站点标题行：网站名称 + 推荐标签 + 资源标签 + 结果数 -->
+          <div class="flex flex-wrap items-center gap-2 sm:gap-3 mb-3 sm:mb-4">
+            <!-- 网站名称（可点击） -->
+            <a
+              v-if="platformData.url"
+              :href="platformData.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-lg sm:text-xl font-bold flex items-center gap-2 hover:opacity-80 hover:underline transition-all cursor-pointer"
+              :class="getTextColor(platformData.color)"
+              :title="`访问 ${platformData.name}`"
+            >
               <i :class="getPlatformIcon(platformData.color)" />
               {{ platformData.name }}
+              <i class="fas fa-external-link-alt text-xs opacity-60" />
+            </a>
+            <div
+              v-else
+              class="text-lg sm:text-xl font-bold flex items-center gap-2"
+              :class="getTextColor(platformData.color)"
+            >
+              <i :class="getPlatformIcon(platformData.color)" />
+              {{ platformData.name }}
+            </div>
+            
+            <!-- 推荐/付费标签 -->
+            <span
+              v-if="getRecommendText(platformData.color)"
+              class="px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs sm:text-sm font-medium flex items-center gap-1"
+              :class="getChipClass(platformData.color)"
+            >
+              <i :class="platformData.color === 'red' ? 'fas fa-times-circle' : 'fas fa-star'" />
+              {{ getRecommendText(platformData.color) }}
+            </span>
+            
+            <!-- 站点的所有标签（去重） -->
+            <template v-for="tag in getUniqueTags(platformData)" :key="tag">
               <span
-                v-if="getRecommendText(platformData.color)"
-                class="px-2 sm:px-3 py-0.5 sm:py-1 rounded-full text-xs sm:text-sm font-medium flex items-center gap-1"
-                :class="getChipClass(platformData.color)"
+                :class="getTagClass(tag)"
+                class="px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1"
               >
-                <i :class="platformData.color === 'red' ? 'fas fa-times-circle' : 'fas fa-star'" />
-                {{ getRecommendText(platformData.color) }}
+                <i :class="getTagIcon(tag)" class="text-[10px]" />
+                <span>{{ getTagLabel(tag) }}</span>
               </span>
-            </h3>
-            <span class="px-2 sm:px-3 py-0.5 sm:py-1 rounded-full bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-200 text-xs sm:text-sm font-medium flex items-center gap-1 shrink-0">
+            </template>
+            
+            <!-- 结果数量 -->
+            <span class="ml-auto px-2 sm:px-3 py-0.5 sm:py-1 rounded-full bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-slate-200 text-xs sm:text-sm font-medium flex items-center gap-1 shrink-0">
               <i class="fas fa-hashtag text-xs" />
               {{ platformData.items.length }}
             </span>
@@ -41,6 +75,7 @@
               :key="index"
               class="result-item p-2 sm:p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors border-b border-gray-100 dark:border-slate-700 last:border-0"
             >
+              <!-- 标题行 -->
               <div class="flex items-start gap-1.5 sm:gap-2">
                 <span class="text-gray-400 dark:text-slate-500 text-xs sm:text-sm mt-0.5 shrink-0">{{ getResultIndex(platformData, index) }}.</span>
                 <a
@@ -52,16 +87,11 @@
                   {{ result.title }}
                 </a>
               </div>
-              <div v-if="result.tags && result.tags.length > 0" class="flex flex-wrap gap-1 mt-1.5 sm:mt-2 ml-4 sm:ml-6">
-                <span
-                  v-for="(tag, tagIndex) in result.tags"
-                  :key="tagIndex"
-                  :class="getTagClass(tag)"
-                  class="px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1"
-                >
-                  <i :class="getTagIcon(tag)" class="text-[10px]" />
-                  <span>{{ getTagLabel(tag) }}</span>
-                </span>
+              
+              <!-- 资源相对路径（从URL中提取） -->
+              <div v-if="result.url" class="flex items-center gap-1.5 sm:gap-2 mt-1 ml-4 sm:ml-6">
+                <i class="fas fa-link text-gray-400 dark:text-slate-500 text-xs" />
+                <span class="text-xs text-gray-500 dark:text-slate-400 break-all">{{ extractPath(result.url) }}</span>
               </div>
             </div>
           </div>
@@ -120,6 +150,29 @@ import type { PlatformData } from '@/stores/search'
 
 const searchStore = useSearchStore()
 
+// 从URL中提取路径
+function extractPath(url: string): string {
+  try {
+    const urlObj = new URL(url)
+    // 返回路径部分（去掉域名）
+    return urlObj.pathname + urlObj.search + urlObj.hash
+  } catch {
+    // 如果URL解析失败，返回完整URL
+    return url
+  }
+}
+
+// 获取站点所有结果的唯一标签
+function getUniqueTags(platformData: PlatformData) {
+  const allTags = new Set<string>()
+  platformData.items.forEach(item => {
+    if (item.tags && item.tags.length > 0) {
+      item.tags.forEach(tag => allTags.add(tag))
+    }
+  })
+  return Array.from(allTags)
+}
+
 function paginatedResults(platformData: PlatformData) {
   const start = (platformData.currentPage - 1) * platformData.itemsPerPage
   const end = start + platformData.itemsPerPage
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index f6880b4..7719718 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,40 +1,25 @@
 <template>
   <!-- 遮罩层 -->
-  <Transition
-    enter-active-class="transition-opacity duration-200 ease-out"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="transition-opacity duration-200 ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div
-      v-if="isOpen"
-      class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
-      @click.self="close"
-    >
+  <Transition enter-active-class="transition-opacity duration-200 ease-out" enter-from-class="opacity-0"
+    enter-to-class="opacity-100" leave-active-class="transition-opacity duration-200 ease-in"
+    leave-from-class="opacity-100" leave-to-class="opacity-0">
+    <div v-if="isOpen" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+      @click.self="close">
       <!-- 对话框 -->
-      <Transition
-        enter-active-class="transition-all duration-200 ease-out"
-        enter-from-class="opacity-0 scale-95"
-        enter-to-class="opacity-100 scale-100"
-        leave-active-class="transition-all duration-200 ease-in"
-        leave-from-class="opacity-100 scale-100"
-        leave-to-class="opacity-0 scale-95"
-      >
-        <div
-          v-if="isOpen"
-          class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-2xl backdrop-saturate-150 rounded-2xl sm:rounded-3xl shadow-2xl w-full max-w-2xl max-h-[90vh] mx-4 flex flex-col overflow-hidden border border-white/40 dark:border-slate-700/40"
-          @click.stop
-        >
+      <Transition enter-active-class="transition-all duration-200 ease-out" enter-from-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100" leave-active-class="transition-all duration-200 ease-in"
+        leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+        <div v-if="isOpen"
+          class="glassmorphism-modal rounded-2xl sm:rounded-3xl shadow-2xl w-full max-w-2xl max-h-[90vh] mx-4 flex flex-col overflow-hidden"
+          @click.stop>
           <!-- 标题栏 -->
-          <div class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-4 sm:py-5 border-b border-gray-200/50 dark:border-slate-700">
+          <div
+            class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-4 sm:py-5 border-b border-gray-200/50 dark:border-slate-700">
             <i class="fas fa-cog text-[#ff1493] dark:text-[#ff69b4] text-xl sm:text-2xl" />
             <h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-slate-100 flex-1">设置</h2>
             <button
               class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-200/50 dark:hover:bg-slate-700/50 text-gray-500 hover:text-[#ff1493] dark:text-slate-400 dark:hover:text-[#ff69b4] transition-all duration-200"
-              @click="close"
-            >
+              @click="close">
               <i class="fas fa-times text-xl" />
             </button>
           </div>
@@ -44,44 +29,37 @@
             <div class="space-y-6">
               <!-- 自定义样式 -->
               <div class="setting-section">
-                <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-3 flex items-center gap-2">
+                <h3
+                  class="text-base sm:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-3 flex items-center gap-2">
                   <i class="fas fa-paint-brush text-[#ff1493] dark:text-[#ff69b4]" />
                   <span>自定义样式</span>
                 </h3>
-                
+
                 <div class="space-y-4">
                   <p class="text-sm text-gray-600 dark:text-slate-400">
-                    自定义 CSS 样式代码，支持 Tailwind CSS 的暗色模式变体（dark:）
+                    输入自定义 CSS 样式代码
                   </p>
-                  
+
                   <!-- CSS 代码编辑器 -->
                   <div class="relative">
-                    <textarea
-                      v-model="localCustomCSS"
-                      placeholder="/* 输入自定义 CSS 代码 */
-.my-custom-class {
-  background: linear-gradient(to right, #ff1493, #d946ef);
-}
-
-.dark .my-custom-class {
-  background: linear-gradient(to right, #ff69b4, #e879f9);
-}"
-                      rows="10"
-                      class="w-full px-4 py-3 text-sm font-mono rounded-xl bg-white dark:bg-slate-700/50 backdrop-blur-md shadow-md focus:shadow-lg focus:scale-[1.01] transition-all outline-none border-2 border-transparent text-gray-900 dark:text-slate-100 placeholder:text-gray-400 dark:placeholder:text-slate-500 resize-none"
-                        @focus="$event.target.style.borderColor = '#ff1493'"
-                      @blur="$event.target.style.borderColor = 'transparent'"
-                    />
+                    <textarea v-model="localCustomCSS" placeholder="*:hover {
+  display: none;
+}" rows="10" class="w-full px-4 py-3 text-sm font-mono rounded-xl bg-white dark:bg-slate-700/50 backdrop-blur-md shadow-md focus:shadow-lg focus:scale-[1.01] transition-all outline-none border-2 border-transparent text-gray-900 dark:text-slate-100 placeholder:text-gray-400 dark:placeholder:text-slate-500 resize-none"
+                      @focus="$event.target.style.borderColor = '#ff1493'"
+                      @blur="$event.target.style.borderColor = 'transparent'" />
                   </div>
-                  
+
                   <!-- 提示信息 -->
-                  <div class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800/50 rounded-xl p-4">
+                  <div
+                    class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800/50 rounded-xl p-4">
                     <div class="flex items-start gap-3">
                       <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 text-lg mt-0.5" />
                       <div class="flex-1 text-sm text-blue-700 dark:text-blue-300">
                         <p class="font-semibold mb-1">使用说明</p>
                         <ul class="list-disc list-inside space-y-1">
                           <li>支持标准 CSS 语法</li>
-                          <li>使用 <code class="px-1 py-0.5 bg-blue-100 dark:bg-blue-900/50 rounded">.dark</code> 选择器定义暗色模式样式</li>
+                          <li>使用 <code class="px-1 py-0.5 bg-blue-100 dark:bg-blue-900/50 rounded">.dark</code>
+                            选择器定义暗色模式样式</li>
                           <li>可以覆盖现有样式或添加新样式</li>
                           <li>修改后点击"保存"即可应用</li>
                         </ul>
@@ -93,11 +71,12 @@
 
               <!-- API 设置 -->
               <div class="setting-section">
-                <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-3 flex items-center gap-2">
+                <h3
+                  class="text-base sm:text-lg font-semibold text-gray-800 dark:text-slate-100 mb-3 flex items-center gap-2">
                   <i class="fas fa-server text-[#ff1493] dark:text-[#ff69b4]" />
                   <span>API 设置</span>
                 </h3>
-                
+
                 <div class="space-y-4">
                   <!-- 自定义 API 地址 -->
                   <div>
@@ -105,15 +84,12 @@
                       自定义 API 地址
                     </label>
                     <div class="relative">
-                      <i class="fas fa-link absolute left-3 sm:left-4 top-3 sm:top-4 text-gray-400 text-lg sm:text-xl pointer-events-none z-10" />
-                      <input
-                        v-model="localCustomApi"
-                        type="url"
-                        placeholder="https://cfapi.searchgal.homes"
+                      <i
+                        class="fas fa-link absolute left-3 sm:left-4 top-3 sm:top-4 text-gray-400 text-lg sm:text-xl pointer-events-none z-10" />
+                      <input v-model="localCustomApi" type="url" placeholder="https://cfapi.searchgal.homes"
                         class="w-full pl-10 sm:pl-12 pr-4 py-3 sm:py-4 text-sm sm:text-base rounded-xl bg-white dark:bg-slate-700/50 backdrop-blur-md shadow-md focus:shadow-lg focus:scale-[1.01] transition-all outline-none border-2 border-transparent text-gray-900 dark:text-slate-100 placeholder:text-gray-400 dark:placeholder:text-slate-400"
                         @focus="$event.target.style.borderColor = '#ff1493'"
-                        @blur="$event.target.style.borderColor = 'transparent'"
-                      />
+                        @blur="$event.target.style.borderColor = 'transparent'" />
                     </div>
                     <p class="text-xs text-gray-500 dark:text-slate-400 mt-2">
                       留空使用默认 API 地址。例如: https://cfapi.searchgal.homes 或 http://127.0.0.1:8787
@@ -121,7 +97,8 @@
                   </div>
 
                   <!-- API 状态 -->
-                  <div class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800/50 rounded-xl p-4">
+                  <div
+                    class="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800/50 rounded-xl p-4">
                     <div class="flex items-start gap-3">
                       <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 text-lg mt-0.5" />
                       <div class="flex-1 text-sm text-blue-700 dark:text-blue-300">
@@ -136,18 +113,17 @@
           </div>
 
           <!-- 底部操作栏 -->
-          <div class="flex items-center justify-end gap-3 px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-slate-700">
+          <div
+            class="flex items-center justify-end gap-3 px-4 sm:px-6 py-4 border-t border-gray-200 dark:border-slate-700">
             <button
               class="px-4 py-2 rounded-xl text-gray-700 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-slate-700 transition-all font-medium"
-              @click="reset"
-            >
+              @click="reset">
               <i class="fas fa-undo mr-2" />
               重置
             </button>
             <button
               class="px-6 py-2 rounded-xl text-white font-semibold shadow-lg hover:shadow-xl hover:scale-105 transition-all bg-gradient-to-r from-[#ff1493] to-[#d946ef]"
-              @click="save"
-            >
+              @click="save">
               <i class="fas fa-check mr-2" />
               保存
             </button>
@@ -210,6 +186,41 @@ function reset() {
 </script>
 
 <style scoped>
+/* 苹果同款液态玻璃效果 */
+.glassmorphism-modal {
+  /* 半透明背景 - 使用渐变增强层次感 */
+  background: linear-gradient(135deg,
+      rgba(255, 255, 255, 0.7) 0%,
+      rgba(255, 255, 255, 0.5) 100%);
+
+  /* 背景模糊 - 苹果级别的模糊效果 */
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+
+  /* 边框 - 使用渐变创建高光效果 */
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  box-shadow:
+    0 8px 32px rgba(255, 20, 147, 0.08),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.9) inset;
+}
+
+/* 暗色模式的液态玻璃 */
+.dark .glassmorphism-modal {
+  background: linear-gradient(135deg,
+      rgba(30, 41, 59, 0.8) 0%,
+      rgba(15, 23, 42, 0.7) 100%);
+
+  backdrop-filter: blur(40px) saturate(150%);
+  -webkit-backdrop-filter: blur(40px) saturate(150%);
+
+  border: 1px solid rgba(255, 105, 180, 0.2);
+  box-shadow:
+    0 8px 32px rgba(255, 105, 180, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
+}
+
 /* 自定义滚动条 */
 .custom-scrollbar::-webkit-scrollbar {
   width: 10px;
@@ -253,10 +264,10 @@ function reset() {
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
 </style>
-
diff --git a/src/components/TopToolbar.vue b/src/components/TopToolbar.vue
index 47309a8..2dfb463 100644
--- a/src/components/TopToolbar.vue
+++ b/src/components/TopToolbar.vue
@@ -192,11 +192,24 @@ async function saveBackgroundImage() {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: white;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border: 2px solid transparent;
+  
+  /* 液态玻璃效果 - 艳粉主题 */
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.85) 0%,
+    rgba(255, 228, 242, 0.7) 100%
+  );
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  
+  /* 艳粉边框和阴影 */
+  border: 1.5px solid rgba(255, 20, 147, 0.2);
+  box-shadow: 
+    0 8px 16px rgba(255, 20, 147, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 1px 0 0 rgba(255, 255, 255, 1) inset;
+  
+  color: rgb(199, 21, 133);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -221,19 +234,50 @@ async function saveBackgroundImage() {
 
 /* 暗色主题 */
 .dark .toolbar-button {
-  background: rgba(31, 41, 55, 0.9);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(
+    135deg,
+    rgba(51, 65, 85, 0.85) 0%,
+    rgba(30, 41, 59, 0.75) 100%
+  );
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+  
+  border: 1.5px solid rgba(255, 105, 180, 0.3);
+  box-shadow: 
+    0 8px 16px rgba(255, 105, 180, 0.2),
+    0 0 0 1px rgba(255, 105, 180, 0.1) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
+  
+  color: rgb(255, 179, 217);
 }
 
 .toolbar-button:hover {
-  transform: scale(1.05);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
-  border-color: rgba(236, 72, 153, 0.5);
+  transform: scale(1.05) translateY(-2px);
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(255, 228, 242, 0.85) 100%
+  );
+  box-shadow: 
+    0 12px 24px rgba(255, 20, 147, 0.25),
+    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
+    0 1px 0 0 rgba(255, 255, 255, 1) inset,
+    0 0 30px rgba(255, 105, 180, 0.2);
+  border-color: rgba(255, 20, 147, 0.35);
 }
 
 .dark .toolbar-button:hover {
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-  border-color: rgba(168, 85, 247, 0.5);
+  background: linear-gradient(
+    135deg,
+    rgba(51, 65, 85, 0.95) 0%,
+    rgba(30, 41, 59, 0.85) 100%
+  );
+  box-shadow: 
+    0 12px 24px rgba(255, 105, 180, 0.3),
+    0 0 0 1px rgba(255, 105, 180, 0.2) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
+    0 0 35px rgba(255, 20, 147, 0.25);
+  border-color: rgba(255, 105, 180, 0.45);
 }
 
 .toolbar-button:active {
@@ -242,41 +286,31 @@ async function saveBackgroundImage() {
 
 /* GitHub 按钮特殊样式 */
 .github-button {
-  color: rgb(31, 41, 55);
   text-decoration: none;
 }
 
-.dark .github-button {
-  color: rgb(226, 232, 240);
-}
-
-.github-button:hover {
-  border-color: rgba(31, 41, 55, 0.5);
-}
-
-.dark .github-button:hover {
-  border-color: rgba(226, 232, 240, 0.5);
-}
-
-/* 主题按钮特殊样式 */
-.theme-button:hover {
-  border-color: rgba(245, 158, 11, 0.5);
-}
-
-/* 保存成功状态 */
+/* 保存成功状态 - 艳粉渐变 */
 .save-success {
-  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105)) !important;
+  background: linear-gradient(135deg, rgb(236, 72, 153), rgb(219, 39, 119)) !important;
   color: white !important;
+  border-color: rgba(236, 72, 153, 0.5) !important;
+  box-shadow: 
+    0 8px 20px rgba(236, 72, 153, 0.4),
+    0 0 30px rgba(236, 72, 153, 0.3) !important;
 }
 
 .save-success i {
   color: white !important;
 }
 
-/* 分享已复制状态 */
+/* 分享已复制状态 - 艳粉渐变 */
 .share-copied {
-  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105)) !important;
+  background: linear-gradient(135deg, rgb(236, 72, 153), rgb(219, 39, 119)) !important;
   color: white !important;
+  border-color: rgba(236, 72, 153, 0.5) !important;
+  box-shadow: 
+    0 8px 20px rgba(236, 72, 153, 0.4),
+    0 0 30px rgba(236, 72, 153, 0.3) !important;
 }
 
 .share-copied i {
diff --git a/src/components/VndbPanel.vue b/src/components/VndbPanel.vue
index 3d13ecf..9cba621 100644
--- a/src/components/VndbPanel.vue
+++ b/src/components/VndbPanel.vue
@@ -10,10 +10,10 @@
   >
     <div
       v-if="searchStore.isVndbPanelOpen && searchStore.vndbInfo"
-      class="fixed inset-x-2 bottom-20 sm:inset-x-auto sm:bottom-24 sm:right-6 sm:w-96 md:w-[28rem] lg:w-[32rem] max-h-[75vh] sm:max-h-[80vh] bg-white/60 dark:bg-slate-800/60 backdrop-blur-2xl backdrop-saturate-150 rounded-2xl sm:rounded-3xl shadow-2xl overflow-hidden z-30 border border-white/40 dark:border-slate-700/40"
+      class="glassmorphism-panel fixed inset-x-2 bottom-20 sm:inset-x-auto sm:bottom-24 sm:right-6 sm:w-96 md:w-[28rem] lg:w-[32rem] max-h-[75vh] sm:max-h-[80vh] rounded-2xl sm:rounded-3xl shadow-2xl overflow-hidden z-30"
     >
       <!-- 标题栏 -->
-      <div class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-3 sm:py-4 bg-gradient-to-r from-theme-accent to-theme-primary text-white">
+      <div class="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-3 sm:py-4 bg-gradient-to-r from-[#d946ef] to-[#ff1493] text-white">
         <i class="fas fa-book text-lg sm:text-xl" />
         <h3 class="text-base sm:text-lg font-bold flex-1">作品介绍</h3>
         <button
@@ -28,7 +28,7 @@
       <div class="overflow-y-auto max-h-[calc(75vh-56px)] sm:max-h-[calc(80vh-64px)] p-3 sm:p-4 md:p-6 custom-scrollbar">
         <!-- 标题 -->
         <h2 class="text-xl font-bold text-gray-800 dark:text-slate-100 mb-2 flex items-center gap-2">
-          <i class="fas fa-gamepad text-theme-primary" />
+          <i class="fas fa-gamepad text-[#ff1493]" />
           {{ searchStore.vndbInfo.mainName }}
         </h2>
 
@@ -57,7 +57,7 @@
         <!-- 别名 -->
         <div v-if="searchStore.vndbInfo.names.length > 1" class="mb-4">
           <p class="text-sm font-semibold text-gray-700 dark:text-slate-200 mb-2 flex items-center gap-1">
-            <i class="fas fa-tag text-theme-accent dark:text-theme-accent" />
+            <i class="fas fa-tag text-[#d946ef] dark:text-[#e879f9]" />
             <span>别名</span>
           </p>
           <div class="flex flex-wrap gap-2">
diff --git a/src/main.ts b/src/main.ts
index cf63d45..e5304d2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,12 @@ import App from './App.vue'
 // 全局基础样式（Tailwind CSS @layer base）
 import './styles/base.css'
 
+// 艳粉主题配色系统
+import './styles/theme.css'
+
+// 苹果同款液态玻璃效果
+import './styles/glassmorphism.css'
+
 // Font Awesome - 高优先级
 import '@fortawesome/fontawesome-free/css/all.min.css'
 
diff --git a/src/stores/search.ts b/src/stores/search.ts
index 72a1589..5e39e68 100644
--- a/src/stores/search.ts
+++ b/src/stores/search.ts
@@ -28,6 +28,7 @@ export interface SearchResult {
 export interface PlatformData {
   name: string
   color: 'lime' | 'white' | 'gold' | 'red'
+  url?: string
   items: SearchResult[]
   error: string
   currentPage: number
diff --git a/src/styles/base.css b/src/styles/base.css
index f350fe9..7c7a2e9 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -25,8 +25,8 @@
     margin: 0;
     padding: 0;
     
-    /* 背景色 - 白天模式（艳粉调） */
-    background: rgb(255, 245, 250);
+    /* 透明背景 - 不遮挡背景图 */
+    background: transparent;
     
     /* 文字颜色 - 白天模式 */
     color: rgb(29, 27, 30);
@@ -35,10 +35,10 @@
     scroll-behavior: smooth;
     
     /* 过渡动画 */
-    transition: background-color 0.3s ease, color 0.3s ease;
+    transition: background 0.3s ease, color 0.3s ease;
   }
 
-  /* 暗色模式 - 透明背景，不遮挡随机图 */
+  /* 暗色模式 - 透明背景 */
   .dark body {
     background: transparent;
     color: rgb(226, 232, 240);
diff --git a/src/styles/glassmorphism.css b/src/styles/glassmorphism.css
new file mode 100644
index 0000000..ecf1fe9
--- /dev/null
+++ b/src/styles/glassmorphism.css
@@ -0,0 +1,545 @@
+/**
+ * 苹果同款液态玻璃效果 - 艳粉主题
+ * Apple-style Glassmorphism with Deep Pink Theme
+ */
+
+/* ========== 搜索输入框玻璃效果 ========== */
+.glassmorphism-input {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.7) 0%,
+    rgba(255, 228, 242, 0.5) 100%
+  );
+  
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  
+  border: 1.5px solid rgba(255, 20, 147, 0.15);
+  box-shadow: 
+    0 8px 24px rgba(255, 20, 147, 0.08),
+    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.95) inset;
+  
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassmorphism-input:hover {
+  border-color: rgba(255, 20, 147, 0.25);
+  box-shadow: 
+    0 10px 28px rgba(255, 20, 147, 0.12),
+    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
+    0 1px 0 0 rgba(255, 255, 255, 1) inset,
+    0 0 30px rgba(255, 105, 180, 0.1);
+}
+
+.glassmorphism-input:focus {
+  border-color: rgba(255, 20, 147, 0.4);
+  box-shadow: 
+    0 12px 32px rgba(255, 20, 147, 0.18),
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 1px 0 0 rgba(255, 255, 255, 1) inset,
+    0 0 40px rgba(255, 20, 147, 0.15);
+  transform: scale(1.01);
+}
+
+.dark .glassmorphism-input {
+  background: linear-gradient(
+    135deg,
+    rgba(30, 41, 59, 0.8) 0%,
+    rgba(51, 65, 85, 0.7) 100%
+  );
+  
+  backdrop-filter: blur(30px) saturate(150%);
+  -webkit-backdrop-filter: blur(30px) saturate(150%);
+  
+  border: 1.5px solid rgba(255, 105, 180, 0.25);
+  box-shadow: 
+    0 8px 24px rgba(255, 105, 180, 0.15),
+    0 0 0 1px rgba(255, 105, 180, 0.08) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
+}
+
+.dark .glassmorphism-input:hover {
+  border-color: rgba(255, 105, 180, 0.35);
+  box-shadow: 
+    0 10px 28px rgba(255, 105, 180, 0.22),
+    0 0 0 1px rgba(255, 105, 180, 0.12) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
+    0 0 35px rgba(255, 20, 147, 0.18);
+}
+
+.dark .glassmorphism-input:focus {
+  border-color: rgba(255, 105, 180, 0.5);
+  box-shadow: 
+    0 12px 32px rgba(255, 105, 180, 0.3),
+    0 0 0 1px rgba(255, 105, 180, 0.18) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
+    0 0 45px rgba(255, 20, 147, 0.25);
+  transform: scale(1.01);
+}
+
+/* ========== 搜索按钮玻璃效果 ========== */
+.glassmorphism-button {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.3) 0%,
+    rgba(255, 228, 242, 0.2) 100%
+  );
+  
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  
+  border: 1.5px solid rgba(255, 20, 147, 0.3);
+  box-shadow: 
+    0 10px 30px rgba(255, 20, 147, 0.25),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
+  
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassmorphism-button:hover:not(:disabled) {
+  border-color: rgba(255, 20, 147, 0.5);
+  box-shadow: 
+    0 14px 40px rgba(255, 20, 147, 0.35),
+    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
+    0 1px 0 0 rgba(255, 255, 255, 1) inset,
+    0 0 50px rgba(255, 105, 180, 0.3);
+  transform: scale(1.02) translateY(-1px);
+}
+
+.glassmorphism-button:active:not(:disabled) {
+  transform: scale(0.98);
+  box-shadow: 
+    0 6px 20px rgba(255, 20, 147, 0.2),
+    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
+}
+
+.glassmorphism-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dark .glassmorphism-button {
+  background: linear-gradient(
+    135deg,
+    rgba(30, 41, 59, 0.5) 0%,
+    rgba(51, 65, 85, 0.4) 100%
+  );
+  
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+  
+  border: 1.5px solid rgba(255, 105, 180, 0.35);
+  box-shadow: 
+    0 10px 30px rgba(255, 105, 180, 0.3),
+    0 0 0 1px rgba(255, 105, 180, 0.1) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.12) inset;
+}
+
+.dark .glassmorphism-button:hover:not(:disabled) {
+  border-color: rgba(255, 105, 180, 0.5);
+  box-shadow: 
+    0 14px 40px rgba(255, 105, 180, 0.4),
+    0 0 0 1px rgba(255, 105, 180, 0.15) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
+    0 0 55px rgba(255, 20, 147, 0.35);
+  transform: scale(1.02) translateY(-1px);
+}
+
+.dark .glassmorphism-button:active:not(:disabled) {
+  transform: scale(0.98);
+  box-shadow: 
+    0 6px 20px rgba(255, 105, 180, 0.25),
+    0 0 0 1px rgba(255, 105, 180, 0.08) inset;
+}
+
+/* ========== 内嵌搜索按钮（输入框内部）========== */
+.glassmorphism-search-button {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.15) 0%,
+    rgba(255, 228, 242, 0.1) 100%
+  );
+  
+  backdrop-filter: blur(15px) saturate(180%);
+  -webkit-backdrop-filter: blur(15px) saturate(180%);
+  
+  border: 1px solid rgba(255, 20, 147, 0.25);
+  box-shadow: 
+    0 4px 12px rgba(255, 20, 147, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
+  
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassmorphism-search-button:hover:not(:disabled) {
+  border-color: rgba(255, 20, 147, 0.4);
+  box-shadow: 
+    0 6px 16px rgba(255, 20, 147, 0.25),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
+    0 0 20px rgba(255, 105, 180, 0.2);
+  transform: translateY(-1px) scale(1.02);
+}
+
+.glassmorphism-search-button:active:not(:disabled) {
+  transform: scale(0.96);
+  box-shadow: 
+    0 2px 8px rgba(255, 20, 147, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
+}
+
+.glassmorphism-search-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dark .glassmorphism-search-button {
+  background: linear-gradient(
+    135deg,
+    rgba(30, 41, 59, 0.3) 0%,
+    rgba(51, 65, 85, 0.2) 100%
+  );
+  
+  backdrop-filter: blur(15px) saturate(150%);
+  -webkit-backdrop-filter: blur(15px) saturate(150%);
+  
+  border: 1px solid rgba(255, 105, 180, 0.3);
+  box-shadow: 
+    0 4px 12px rgba(255, 105, 180, 0.2),
+    0 0 0 1px rgba(255, 105, 180, 0.08) inset;
+}
+
+.dark .glassmorphism-search-button:hover:not(:disabled) {
+  border-color: rgba(255, 105, 180, 0.45);
+  box-shadow: 
+    0 6px 16px rgba(255, 105, 180, 0.3),
+    0 0 0 1px rgba(255, 105, 180, 0.12) inset,
+    0 0 25px rgba(255, 20, 147, 0.25);
+  transform: translateY(-1px) scale(1.02);
+}
+
+.dark .glassmorphism-search-button:active:not(:disabled) {
+  transform: scale(0.96);
+  box-shadow: 
+    0 2px 8px rgba(255, 105, 180, 0.18),
+    0 0 0 1px rgba(255, 105, 180, 0.06) inset;
+}
+
+/* ========== 模式切换器玻璃效果 ========== */
+.glassmorphism-mode-switch {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.6) 0%,
+    rgba(255, 228, 242, 0.45) 100%
+  );
+  
+  backdrop-filter: blur(25px) saturate(180%);
+  -webkit-backdrop-filter: blur(25px) saturate(180%);
+  
+  border: 1.5px solid rgba(255, 20, 147, 0.2);
+  box-shadow: 
+    0 8px 24px rgba(255, 20, 147, 0.12),
+    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.9) inset;
+  
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassmorphism-mode-switch:hover {
+  border-color: rgba(255, 20, 147, 0.3);
+  box-shadow: 
+    0 10px 28px rgba(255, 20, 147, 0.18),
+    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
+    0 1px 0 0 rgba(255, 255, 255, 1) inset,
+    0 0 35px rgba(255, 105, 180, 0.15);
+}
+
+.dark .glassmorphism-mode-switch {
+  background: linear-gradient(
+    135deg,
+    rgba(30, 41, 59, 0.75) 0%,
+    rgba(51, 65, 85, 0.65) 100%
+  );
+  
+  backdrop-filter: blur(25px) saturate(150%);
+  -webkit-backdrop-filter: blur(25px) saturate(150%);
+  
+  border: 1.5px solid rgba(255, 105, 180, 0.28);
+  box-shadow: 
+    0 8px 24px rgba(255, 105, 180, 0.18),
+    0 0 0 1px rgba(255, 105, 180, 0.1) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.12) inset;
+}
+
+.dark .glassmorphism-mode-switch:hover {
+  border-color: rgba(255, 105, 180, 0.38);
+  box-shadow: 
+    0 10px 28px rgba(255, 105, 180, 0.25),
+    0 0 0 1px rgba(255, 105, 180, 0.15) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
+    0 0 40px rgba(255, 20, 147, 0.22);
+}
+
+/* ========== 模态框液态玻璃效果 ========== */
+.glassmorphism-modal {
+  /* 半透明背景 - 使用粉色渐变增强层次感 */
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.75) 0%,
+    rgba(255, 228, 242, 0.6) 50%,
+    rgba(255, 179, 217, 0.5) 100%
+  );
+  
+  /* 背景模糊 - 苹果级别的模糊效果 */
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  
+  /* 边框 - 粉色高光效果 */
+  border: 1.5px solid rgba(255, 20, 147, 0.15);
+  box-shadow: 
+    0 8px 32px rgba(255, 20, 147, 0.12),
+    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.95) inset,
+    0 0 40px rgba(255, 105, 180, 0.08);
+  
+  /* 圆角 */
+  border-radius: 24px;
+  
+  /* 过渡动画 */
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassmorphism-modal:hover {
+  border-color: rgba(255, 20, 147, 0.25);
+  box-shadow: 
+    0 12px 40px rgba(255, 20, 147, 0.18),
+    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
+    0 1px 0 0 rgba(255, 255, 255, 1) inset,
+    0 0 50px rgba(255, 105, 180, 0.15);
+}
+
+/* 暗色模式的液态玻璃 */
+.dark .glassmorphism-modal {
+  background: linear-gradient(
+    135deg,
+    rgba(30, 41, 59, 0.85) 0%,
+    rgba(51, 65, 85, 0.75) 50%,
+    rgba(15, 23, 42, 0.8) 100%
+  );
+  
+  backdrop-filter: blur(40px) saturate(150%);
+  -webkit-backdrop-filter: blur(40px) saturate(150%);
+  
+  border: 1.5px solid rgba(255, 105, 180, 0.25);
+  box-shadow: 
+    0 8px 32px rgba(255, 105, 180, 0.2),
+    0 0 0 1px rgba(255, 105, 180, 0.1) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
+    0 0 50px rgba(255, 20, 147, 0.15);
+}
+
+.dark .glassmorphism-modal:hover {
+  border-color: rgba(255, 105, 180, 0.35);
+  box-shadow: 
+    0 12px 40px rgba(255, 105, 180, 0.3),
+    0 0 0 1px rgba(255, 105, 180, 0.15) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
+    0 0 60px rgba(255, 20, 147, 0.25);
+}
+
+/* ========== 面板液态玻璃效果 ========== */
+.glassmorphism-panel {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 228, 242, 0.65) 50%,
+    rgba(255, 179, 217, 0.55) 100%
+  );
+  
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  
+  border: 1.5px solid rgba(255, 20, 147, 0.18);
+  box-shadow: 
+    0 12px 40px rgba(255, 20, 147, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
+    0 1px 0 0 rgba(255, 255, 255, 1) inset,
+    0 0 50px rgba(255, 105, 180, 0.1);
+  
+  border-radius: 20px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassmorphism-panel:hover {
+  border-color: rgba(255, 20, 147, 0.3);
+  box-shadow: 
+    0 16px 48px rgba(255, 20, 147, 0.22),
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
+    0 1px 0 0 rgba(255, 255, 255, 1) inset,
+    0 0 60px rgba(255, 105, 180, 0.18);
+  transform: translateY(-2px);
+}
+
+.dark .glassmorphism-panel {
+  background: linear-gradient(
+    135deg,
+    rgba(30, 41, 59, 0.9) 0%,
+    rgba(51, 65, 85, 0.8) 50%,
+    rgba(15, 23, 42, 0.85) 100%
+  );
+  
+  backdrop-filter: blur(40px) saturate(150%);
+  -webkit-backdrop-filter: blur(40px) saturate(150%);
+  
+  border: 1.5px solid rgba(255, 105, 180, 0.3);
+  box-shadow: 
+    0 12px 40px rgba(255, 105, 180, 0.25),
+    0 0 0 1px rgba(255, 105, 180, 0.12) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
+    0 0 50px rgba(255, 20, 147, 0.2);
+}
+
+.dark .glassmorphism-panel:hover {
+  border-color: rgba(255, 105, 180, 0.4);
+  box-shadow: 
+    0 16px 48px rgba(255, 105, 180, 0.35),
+    0 0 0 1px rgba(255, 105, 180, 0.18) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.18) inset,
+    0 0 60px rgba(255, 20, 147, 0.3);
+  transform: translateY(-2px);
+}
+
+/* ========== 工具栏按钮玻璃效果 ========== */
+.glassmorphism-toolbar-button {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.4) 0%,
+    rgba(255, 228, 242, 0.3) 100%
+  );
+  
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  
+  border: 1px solid rgba(255, 20, 147, 0.15);
+  box-shadow: 
+    0 4px 12px rgba(255, 20, 147, 0.08),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  
+  border-radius: 12px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassmorphism-toolbar-button:hover {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.6) 0%,
+    rgba(255, 228, 242, 0.5) 100%
+  );
+  border-color: rgba(255, 20, 147, 0.25);
+  box-shadow: 
+    0 6px 16px rgba(255, 20, 147, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
+    0 0 20px rgba(255, 105, 180, 0.1);
+  transform: translateY(-1px);
+}
+
+.glassmorphism-toolbar-button:active {
+  transform: translateY(0);
+  box-shadow: 
+    0 2px 8px rgba(255, 20, 147, 0.12),
+    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
+}
+
+.dark .glassmorphism-toolbar-button {
+  background: linear-gradient(
+    135deg,
+    rgba(30, 41, 59, 0.6) 0%,
+    rgba(51, 65, 85, 0.5) 100%
+  );
+  
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+  
+  border: 1px solid rgba(255, 105, 180, 0.2);
+  box-shadow: 
+    0 4px 12px rgba(255, 105, 180, 0.15),
+    0 0 0 1px rgba(255, 105, 180, 0.08) inset;
+}
+
+.dark .glassmorphism-toolbar-button:hover {
+  background: linear-gradient(
+    135deg,
+    rgba(30, 41, 59, 0.8) 0%,
+    rgba(51, 65, 85, 0.7) 100%
+  );
+  border-color: rgba(255, 105, 180, 0.35);
+  box-shadow: 
+    0 6px 16px rgba(255, 105, 180, 0.25),
+    0 0 0 1px rgba(255, 105, 180, 0.15) inset,
+    0 0 25px rgba(255, 20, 147, 0.2);
+  transform: translateY(-1px);
+}
+
+.dark .glassmorphism-toolbar-button:active {
+  transform: translateY(0);
+  box-shadow: 
+    0 2px 8px rgba(255, 105, 180, 0.18),
+    0 0 0 1px rgba(255, 105, 180, 0.1) inset;
+}
+
+/* ========== 卡片玻璃效果 ========== */
+.glassmorphism-card {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.65) 0%,
+    rgba(255, 228, 242, 0.5) 50%,
+    rgba(255, 179, 217, 0.45) 100%
+  );
+  
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  
+  border: 1px solid rgba(255, 20, 147, 0.12);
+  box-shadow: 
+    0 8px 24px rgba(255, 20, 147, 0.1),
+    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  
+  border-radius: 16px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassmorphism-card:hover {
+  border-color: rgba(255, 20, 147, 0.2);
+  box-shadow: 
+    0 12px 32px rgba(255, 20, 147, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
+    0 0 30px rgba(255, 105, 180, 0.12);
+  transform: translateY(-2px);
+}
+
+.dark .glassmorphism-card {
+  background: linear-gradient(
+    135deg,
+    rgba(30, 41, 59, 0.75) 0%,
+    rgba(51, 65, 85, 0.65) 50%,
+    rgba(15, 23, 42, 0.7) 100%
+  );
+  
+  backdrop-filter: blur(30px) saturate(150%);
+  -webkit-backdrop-filter: blur(30px) saturate(150%);
+  
+  border: 1px solid rgba(255, 105, 180, 0.22);
+  box-shadow: 
+    0 8px 24px rgba(255, 105, 180, 0.18),
+    0 0 0 1px rgba(255, 105, 180, 0.08) inset;
+}
+
+.dark .glassmorphism-card:hover {
+  border-color: rgba(255, 105, 180, 0.32);
+  box-shadow: 
+    0 12px 32px rgba(255, 105, 180, 0.28),
+    0 0 0 1px rgba(255, 105, 180, 0.15) inset,
+    0 0 35px rgba(255, 20, 147, 0.22);
+  transform: translateY(-2px);
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..a6dc07c
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,131 @@
+/**
+ * 艳粉主题配色方案
+ * Deep Pink Color Scheme
+ */
+
+:root {
+  /* ========== 主色调 - 艳粉色系 ========== */
+  --color-primary: #ff1493;           /* DeepPink - 主要色 */
+  --color-primary-light: #ff69b4;     /* HotPink - 浅色 */
+  --color-primary-lighter: #ffb3d9;   /* 更浅的粉色 */
+  --color-primary-dark: #c71585;      /* MediumVioletRed - 深色 */
+  --color-primary-darker: #8b0a50;    /* 更深的粉色 */
+  
+  /* ========== 渐变色 ========== */
+  --gradient-primary: linear-gradient(135deg, #ff1493 0%, #d946ef 100%);
+  --gradient-primary-hover: linear-gradient(135deg, #ff69b4 0%, #e879f9 100%);
+  --gradient-primary-reverse: linear-gradient(135deg, #d946ef 0%, #ff1493 100%);
+  
+  /* ========== 辅助色 ========== */
+  --color-accent: #d946ef;            /* 紫色辅助色 */
+  --color-accent-light: #e879f9;
+  --color-accent-dark: #c026d3;
+  
+  /* ========== 背景色 ========== */
+  --bg-primary: #fff5fa;              /* 浅粉色背景 */
+  --bg-secondary: #ffe4f2;            /* 粉色背景 */
+  --bg-tertiary: #ffb3d9;             /* 更深的粉色背景 */
+  
+  /* ========== 文本色 ========== */
+  --text-primary: #1d1b1e;            /* 主要文本 */
+  --text-secondary: #6b7280;          /* 次要文本 */
+  --text-tertiary: #9ca3af;           /* 第三级文本 */
+  
+  /* ========== 阴影 ========== */
+  --shadow-sm: 0 1px 2px rgba(255, 20, 147, 0.1);
+  --shadow-md: 0 4px 6px rgba(255, 20, 147, 0.15);
+  --shadow-lg: 0 10px 15px rgba(255, 20, 147, 0.2);
+  --shadow-xl: 0 20px 25px rgba(255, 20, 147, 0.25);
+  --shadow-glow: 0 0 20px rgba(255, 20, 147, 0.4);
+  
+  /* ========== 玻璃态效果 ========== */
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.8);
+  --glass-shadow: 0 8px 32px rgba(255, 20, 147, 0.08);
+}
+
+/* 暗色模式 */
+.dark {
+  /* ========== 主色调 ========== */
+  --color-primary: #ff69b4;
+  --color-primary-light: #ffb3d9;
+  --color-primary-lighter: #ffc9e6;
+  --color-primary-dark: #ff1493;
+  --color-primary-darker: #c71585;
+  
+  /* ========== 渐变色 ========== */
+  --gradient-primary: linear-gradient(135deg, #ff69b4 0%, #e879f9 100%);
+  --gradient-primary-hover: linear-gradient(135deg, #ffb3d9 0%, #f0abfc 100%);
+  --gradient-primary-reverse: linear-gradient(135deg, #e879f9 0%, #ff69b4 100%);
+  
+  /* ========== 辅助色 ========== */
+  --color-accent: #e879f9;
+  --color-accent-light: #f0abfc;
+  --color-accent-dark: #d946ef;
+  
+  /* ========== 背景色 ========== */
+  --bg-primary: #0f172a;              /* 深色背景 */
+  --bg-secondary: #1e293b;            /* 次要背景 */
+  --bg-tertiary: #334155;             /* 第三级背景 */
+  
+  /* ========== 文本色 ========== */
+  --text-primary: #e2e8f0;
+  --text-secondary: #94a3b8;
+  --text-tertiary: #64748b;
+  
+  /* ========== 阴影 ========== */
+  --shadow-sm: 0 1px 2px rgba(255, 105, 180, 0.15);
+  --shadow-md: 0 4px 6px rgba(255, 105, 180, 0.2);
+  --shadow-lg: 0 10px 15px rgba(255, 105, 180, 0.25);
+  --shadow-xl: 0 20px 25px rgba(255, 105, 180, 0.3);
+  --shadow-glow: 0 0 25px rgba(255, 105, 180, 0.5);
+  
+  /* ========== 玻璃态效果 ========== */
+  --glass-bg: rgba(30, 41, 59, 0.8);
+  --glass-border: rgba(255, 105, 180, 0.2);
+  --glass-shadow: 0 8px 32px rgba(255, 105, 180, 0.15);
+}
+
+/* ========== Tailwind CSS 主题颜色扩展 ========== */
+@layer utilities {
+  /* 文本渐变 */
+  .text-gradient-pink {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  /* 背景渐变 */
+  .bg-gradient-pink {
+    background: var(--gradient-primary);
+  }
+  
+  .bg-gradient-pink-reverse {
+    background: var(--gradient-primary-reverse);
+  }
+  
+  /* 边框渐变 */
+  .border-gradient-pink {
+    border: 1px solid transparent;
+    background: linear-gradient(white, white) padding-box,
+                var(--gradient-primary) border-box;
+  }
+  
+  /* 阴影 */
+  .shadow-pink-sm { box-shadow: var(--shadow-sm); }
+  .shadow-pink-md { box-shadow: var(--shadow-md); }
+  .shadow-pink-lg { box-shadow: var(--shadow-lg); }
+  .shadow-pink-xl { box-shadow: var(--shadow-xl); }
+  .shadow-pink-glow { box-shadow: var(--shadow-glow); }
+  
+  /* 悬停效果 */
+  .hover-lift {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  .hover-lift:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+  }
+}
+
diff --git a/tailwind.config.js b/tailwind.config.js
index 964b021..f4101eb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,26 +8,119 @@ export default {
   theme: {
     extend: {
       colors: {
-        // 自定义暗色主题颜色
+        // 艳粉主题配色
+        theme: {
+          primary: '#ff1493',           // DeepPink - 主色
+          'primary-light': '#ff69b4',   // HotPink - 浅色
+          'primary-lighter': '#ffb3d9', // 更浅
+          'primary-dark': '#c71585',    // 深色
+          'primary-darker': '#8b0a50',  // 更深
+          
+          accent: '#d946ef',            // 紫色辅助色
+          'accent-light': '#e879f9',    // 浅紫色
+          'accent-dark': '#c026d3',     // 深紫色
+        },
+        
+        // 暗色主题颜色
         dark: {
           bg: {
-            primary: '#0f172a',    // 主背景
-            secondary: '#1e293b',  // 次要背景
-            tertiary: '#334155',   // 第三背景
+            primary: '#0f172a',         // 主背景
+            secondary: '#1e293b',       // 次要背景
+            tertiary: '#334155',        // 第三背景
           },
           text: {
-            primary: '#e2e8f0',    // 主文本
-            secondary: '#cbd5e1',  // 次要文本
-            tertiary: '#94a3b8',   // 第三文本
+            primary: '#e2e8f0',         // 主文本
+            secondary: '#cbd5e1',       // 次要文本
+            tertiary: '#94a3b8',        // 第三文本
           },
           border: {
-            DEFAULT: 'rgba(139, 92, 246, 0.3)',
-            hover: 'rgba(139, 92, 246, 0.5)',
+            DEFAULT: 'rgba(255, 105, 180, 0.3)',  // 粉色边框
+            hover: 'rgba(255, 105, 180, 0.5)',    // 悬停粉色边框
           }
+        },
+        
+        // 艳粉色系扩展
+        'deep-pink': {
+          50: '#fff5fa',
+          100: '#ffe4f2',
+          200: '#ffc9e6',
+          300: '#ffb3d9',
+          400: '#ff94cf',
+          500: '#ff1493',   // 主色
+          600: '#d946ef',
+          700: '#c71585',
+          800: '#a0116b',
+          900: '#8b0a50',
+        },
+        
+        // 粉紫色系
+        'pink-purple': {
+          50: '#fdf4ff',
+          100: '#fae8ff',
+          200: '#f5d0fe',
+          300: '#f0abfc',
+          400: '#e879f9',
+          500: '#d946ef',
+          600: '#c026d3',
+          700: '#a21caf',
+          800: '#86198f',
+          900: '#701a75',
         }
-      }
+      },
+      
+      backgroundImage: {
+        'gradient-pink': 'linear-gradient(135deg, #ff1493 0%, #d946ef 100%)',
+        'gradient-pink-light': 'linear-gradient(135deg, #ff69b4 0%, #e879f9 100%)',
+        'gradient-pink-reverse': 'linear-gradient(135deg, #d946ef 0%, #ff1493 100%)',
+        'gradient-pink-soft': 'linear-gradient(135deg, #ffe4f2 0%, #ffc9e6 100%)',
+      },
+      
+      boxShadow: {
+        'pink-sm': '0 1px 2px rgba(255, 20, 147, 0.1)',
+        'pink-md': '0 4px 6px rgba(255, 20, 147, 0.15)',
+        'pink-lg': '0 10px 15px rgba(255, 20, 147, 0.2)',
+        'pink-xl': '0 20px 25px rgba(255, 20, 147, 0.25)',
+        'pink-glow': '0 0 20px rgba(255, 20, 147, 0.4)',
+        'pink-glow-lg': '0 0 40px rgba(255, 20, 147, 0.6)',
+      },
+      
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-out',
+        'fade-in-up': 'fadeInUp 0.6s ease-out',
+        'fade-in-down': 'fadeInDown 0.6s ease-out',
+        'scale-in': 'scaleIn 0.3s ease-out',
+        'pulse-pink': 'pulsePink 2s ease-in-out infinite',
+      },
+      
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        fadeInUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        fadeInDown: {
+          '0%': { opacity: '0', transform: 'translateY(-20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.9)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        pulsePink: {
+          '0%, 100%': { 
+            boxShadow: '0 0 20px rgba(255, 20, 147, 0.4)',
+            opacity: '1'
+          },
+          '50%': { 
+            boxShadow: '0 0 40px rgba(255, 20, 147, 0.6)',
+            opacity: '0.9'
+          },
+        },
+      },
     },
   },
   plugins: [],
 }
-