diff --git a/client/src/pages/achievements/achievements.vue b/client/src/pages/achievements/achievements.vue
index 0bd55b8..017111f 100644
--- a/client/src/pages/achievements/achievements.vue
+++ b/client/src/pages/achievements/achievements.vue
@@ -192,8 +192,8 @@ function formatDate(dateStr) {
 // 总览卡片
 .overview-card {
   padding: 16px 18px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   margin-bottom: 20px;
 }
@@ -262,8 +262,8 @@ function formatDate(dateStr) {
   align-items: center;
   gap: 12px;
   padding: 12px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 12px;
 }
 
diff --git a/client/src/pages/chat/chat.vue b/client/src/pages/chat/chat.vue
index 3b3b180..51e62a7 100644
--- a/client/src/pages/chat/chat.vue
+++ b/client/src/pages/chat/chat.vue
@@ -306,8 +306,8 @@ function goShare() {
 
 // 欢迎卡片
 .welcome-card {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   padding: 16px;
   margin-bottom: 16px;
diff --git a/client/src/pages/detail/detail.vue b/client/src/pages/detail/detail.vue
index 8f01955..8c5290d 100644
--- a/client/src/pages/detail/detail.vue
+++ b/client/src/pages/detail/detail.vue
@@ -299,8 +299,8 @@ function goToAI() {
   .content-section,
   .content-block,
   .qa-section {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
     border-radius: 12px;
     padding: 16px;
     margin-bottom: 12px;
@@ -368,15 +368,14 @@ function goToAI() {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    margin-top: 12px;
 
     .qa-option {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px;
-      background: rgba(255, 255, 255, 0.04);
-      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
       border-radius: 10px;
       transition: all 0.3s;
 
diff --git a/client/src/pages/dimension/dimension.vue b/client/src/pages/dimension/dimension.vue
index ca7c142..5b6ead0 100644
--- a/client/src/pages/dimension/dimension.vue
+++ b/client/src/pages/dimension/dimension.vue
@@ -225,8 +225,8 @@ function goDetail(item) {
   border-radius: 14px;
   padding: 16px;
   margin-bottom: 10px;
-  background: rgba(255,255,255,0.03);
-  border: 1px solid rgba(255,255,255,0.05);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   display: flex;
   gap: 14px;
   align-items: flex-start;
diff --git a/client/src/pages/favorites/favorites.vue b/client/src/pages/favorites/favorites.vue
index d250f21..ca8f7fb 100644
--- a/client/src/pages/favorites/favorites.vue
+++ b/client/src/pages/favorites/favorites.vue
@@ -158,8 +158,8 @@ function goHome() {
   flex-direction: column;
   gap: 8px;
   padding: 16px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   backdrop-filter: blur(8px);
 }
diff --git a/client/src/pages/feedback/feedback.vue b/client/src/pages/feedback/feedback.vue
index ddf65c9..1442968 100644
--- a/client/src/pages/feedback/feedback.vue
+++ b/client/src/pages/feedback/feedback.vue
@@ -284,8 +284,8 @@ function goBack() {
 
   .type-btn {
     padding: 10px 6px;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
     border-radius: 10px;
     display: flex;
     flex-direction: column;
@@ -313,8 +313,8 @@ function goBack() {
 .form-input {
   width: 100%;
   height: 44px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 10px;
   padding: 0 14px;
   font-size: 14px;
@@ -327,8 +327,8 @@ function goBack() {
 .form-textarea {
   width: 100%;
   min-height: 100px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 10px;
   padding: 12px 14px;
   font-size: 14px;
@@ -386,8 +386,8 @@ function goBack() {
 }
 
 .my-item {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 10px;
   padding: 10px 14px;
   margin-bottom: 8px;
diff --git a/client/src/pages/leaderboard/leaderboard.vue b/client/src/pages/leaderboard/leaderboard.vue
index 854ef7f..81658c3 100644
--- a/client/src/pages/leaderboard/leaderboard.vue
+++ b/client/src/pages/leaderboard/leaderboard.vue
@@ -194,8 +194,8 @@ function dimDotColor(id) {
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
 }
 
diff --git a/client/src/pages/news/news.vue b/client/src/pages/news/news.vue
index 36e3373..d6605d0 100644
--- a/client/src/pages/news/news.vue
+++ b/client/src/pages/news/news.vue
@@ -257,8 +257,9 @@ onMounted(() => {
   gap: 16px;
   margin: 0 20px 20px;
   padding: 16px;
-  background: rgba(255,255,255,0.02);
+  background: var(--glass-bg);
   border-radius: 12px;
+  border: 1px solid var(--glass-border);
 }
 
 .meta-item {
@@ -323,8 +324,8 @@ onMounted(() => {
 
 .tag-item {
   padding: 6px 12px;
-  background: rgba(255,255,255,0.03);
-  border: 1px solid rgba(255,255,255,0.08);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 20px;
 }
 
@@ -344,8 +345,8 @@ onMounted(() => {
   justify-content: center;
   gap: 8px;
   padding: 14px;
-  background: rgba(255,255,255,0.03);
-  border: 1px solid rgba(255,255,255,0.08);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 12px;
 }
 
diff --git a/client/src/pages/payment/payment.vue b/client/src/pages/payment/payment.vue
index ecab082..d0f7cd4 100644
--- a/client/src/pages/payment/payment.vue
+++ b/client/src/pages/payment/payment.vue
@@ -244,8 +244,8 @@ function goBack() {
 .plan-tag {
   flex: 1;
   padding: 16px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   text-align: center;
   position: relative;
@@ -306,8 +306,8 @@ function goBack() {
 
 // 权益
 .benefits {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   padding: 16px;
   margin-bottom: 20px;
@@ -351,8 +351,8 @@ function goBack() {
 .duration-item {
   flex: 1;
   padding: 12px 8px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 12px;
   text-align: center;
 }
diff --git a/client/src/pages/profile/profile.vue b/client/src/pages/profile/profile.vue
index b9fc531..a65aae8 100644
--- a/client/src/pages/profile/profile.vue
+++ b/client/src/pages/profile/profile.vue
@@ -404,8 +404,8 @@ function goSettings() {
   border-radius: 16px;
   padding: 16px;
   margin-bottom: 20px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
 }
 
 .quota-card-title {
diff --git a/client/src/pages/progress/progress.vue b/client/src/pages/progress/progress.vue
index 07232de..040ea43 100644
--- a/client/src/pages/progress/progress.vue
+++ b/client/src/pages/progress/progress.vue
@@ -344,8 +344,8 @@ function goBack() {
 
 // 维度卡片
 .dim-card {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   margin-bottom: 10px;
   overflow: hidden;
diff --git a/client/src/pages/search/search.vue b/client/src/pages/search/search.vue
index 02b933b..4a2dc0b 100644
--- a/client/src/pages/search/search.vue
+++ b/client/src/pages/search/search.vue
@@ -227,8 +227,8 @@ onUnmounted(() => {
   position: relative;
   margin: 0 20px 16px;
   flex-shrink: 0;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   padding: 10px 44px 10px 14px;
   backdrop-filter: blur(10px);
@@ -317,8 +317,8 @@ onUnmounted(() => {
 }
 
 .result-card {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   padding: 14px 16px;
   margin-bottom: 10px;
diff --git a/client/src/pages/trend/trend.vue b/client/src/pages/trend/trend.vue
index 694d6b4..b58a391 100644
--- a/client/src/pages/trend/trend.vue
+++ b/client/src/pages/trend/trend.vue
@@ -243,8 +243,8 @@ function getSampleData() {
 }
 
 .trend-card {
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   padding: 16px;
   margin-bottom: 12px;