diff --git a/src/components/common/SecondaryScreenShell.module.scss b/src/components/common/SecondaryScreenShell.module.scss
index 23889e6..973dd02 100644
--- a/src/components/common/SecondaryScreenShell.module.scss
+++ b/src/components/common/SecondaryScreenShell.module.scss
@@ -106,17 +106,16 @@
   gap: 8px;
   padding: 10px 12px;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
+  --glass-blur: 12px;
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  border: 1px solid var(--glass-border);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
 }
 
 :global([data-theme='dark']) {
   .floatingActionSurface {
-    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
-    border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
   }
 }
diff --git a/src/components/config/VisualConfigEditor.module.scss b/src/components/config/VisualConfigEditor.module.scss
index d75402a..737b5f8 100644
--- a/src/components/config/VisualConfigEditor.module.scss
+++ b/src/components/config/VisualConfigEditor.module.scss
@@ -395,8 +395,9 @@
   border-radius: 26px;
   border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
   background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
+  --glass-blur: 14px;
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
   box-shadow: 0 24px 56px -34px rgba(0, 0, 0, 0.42);
   -ms-overflow-style: none;
   scrollbar-width: none;
diff --git a/src/components/providers/ProviderNav/ProviderNav.module.scss b/src/components/providers/ProviderNav/ProviderNav.module.scss
index ef062b4..72e3f14 100644
--- a/src/components/providers/ProviderNav/ProviderNav.module.scss
+++ b/src/components/providers/ProviderNav/ProviderNav.module.scss
@@ -17,10 +17,11 @@
   flex-direction: row;
   gap: 6px;
   padding: 10px 12px;
-  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
+  --glass-blur: 12px;
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  border: 1px solid var(--glass-border);
   border-radius: 999px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
   overflow-x: auto;
@@ -104,8 +105,6 @@
 // 暗色主题适配
 :global([data-theme='dark']) {
   .navList {
-    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
-    border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
   }
 
diff --git a/src/pages/AuthFilesPage.module.scss b/src/pages/AuthFilesPage.module.scss
index a3c28be..813e185 100644
--- a/src/pages/AuthFilesPage.module.scss
+++ b/src/pages/AuthFilesPage.module.scss
@@ -659,8 +659,9 @@
   position: relative;
   overflow: hidden;
   background-color: color-mix(in srgb, var(--bg-primary) 85%, transparent);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  --glass-blur: 8px;
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
   border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
   border-radius: 12px;
   padding: 16px;
@@ -1529,8 +1530,9 @@
   border-radius: $radius-lg;
   border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
   background: color-mix(in srgb, var(--bg-primary) 84%, transparent);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  --glass-blur: 12px;
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
   box-shadow: var(--shadow-lg);
 }
 
diff --git a/src/pages/ConfigPage.module.scss b/src/pages/ConfigPage.module.scss
index 9082414..b8b4c1f 100644
--- a/src/pages/ConfigPage.module.scss
+++ b/src/pages/ConfigPage.module.scss
@@ -422,10 +422,11 @@
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
-  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
+  --glass-blur: 12px;
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  border: 1px solid var(--glass-border);
   border-radius: 999px;
   box-shadow: var(--shadow-lg);
   max-width: inherit;
diff --git a/src/pages/DashboardPage.module.scss b/src/pages/DashboardPage.module.scss
index cfd8500..67899a6 100644
--- a/src/pages/DashboardPage.module.scss
+++ b/src/pages/DashboardPage.module.scss
@@ -72,14 +72,15 @@
   gap: $spacing-lg;
   padding: $spacing-2xl $spacing-xl;
   border-radius: $radius-lg;
+  --glass-blur: 12px;
   background: linear-gradient(
     135deg,
     color-mix(in srgb, var(--bg-primary) 92%, transparent),
     color-mix(in srgb, var(--bg-secondary) 80%, transparent)
   );
   border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
   overflow: hidden;
   animation: heroEnter 0.6s ease-out both;
 
@@ -212,10 +213,11 @@
   gap: 6px;
   padding: 5px 12px;
   border-radius: $radius-full;
-  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
-  border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  --glass-blur: 8px;
+  background: var(--glass-bg-secondary);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
   font-size: 12px;
 }
 
diff --git a/src/pages/QuotaPage.module.scss b/src/pages/QuotaPage.module.scss
index 5a07dcd..0d7291a 100644
--- a/src/pages/QuotaPage.module.scss
+++ b/src/pages/QuotaPage.module.scss
@@ -469,7 +469,8 @@
       rgba(255, 237, 158, 0.58) 32%,
       rgba(255, 215, 91, 0) 72%
     );
-    filter: blur(9px);
+    --glass-blur: 9px;
+    filter: var(--glass-filter);
     opacity: 0.75;
     pointer-events: none;
     z-index: -1;
diff --git a/src/pages/UsagePage.module.scss b/src/pages/UsagePage.module.scss
index 73c15fa..9b55336 100644
--- a/src/pages/UsagePage.module.scss
+++ b/src/pages/UsagePage.module.scss
@@ -78,9 +78,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
+  --glass-blur: 6px;
+  background: var(--glass-bg-secondary);
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
 }
 
 .loadingOverlayContent {
diff --git a/src/styles/themes.scss b/src/styles/themes.scss
index 6ccb2ae..80e2f87 100644
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -58,6 +58,14 @@
 
   --radius-md: 8px;
   --accent-tertiary: var(--bg-tertiary);
+
+  // Glass effect (blurred surfaces)
+  --glass-blur: 12px;
+  --glass-backdrop-filter: blur(var(--glass-blur));
+  --glass-filter: blur(var(--glass-blur));
+  --glass-bg: color-mix(in srgb, var(--bg-primary) 82%, transparent);
+  --glass-bg-secondary: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
+  --glass-border: color-mix(in srgb, var(--border-color) 60%, transparent);
 }
 
 // 纯白主题
@@ -173,4 +181,16 @@
 
   --radius-md: 8px;
   --accent-tertiary: var(--bg-tertiary);
+
+  --glass-border: color-mix(in srgb, var(--border-color) 55%, transparent);
+}
+
+@media (max-width: 768px), (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
+  :root {
+    --glass-backdrop-filter: none;
+    --glass-filter: none;
+    --glass-bg: var(--bg-primary);
+    --glass-bg-secondary: var(--bg-secondary);
+    --glass-border: var(--border-color);
+  }
 }