diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0be69e9..c135167 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -32,16 +32,15 @@ body {
 
 /* ===== Liquid-glass surface system (theme-aware, GPU-light) ===== */
 .glass {
-  /* Frosted overlay surface. We lean on opacity (not blur) so it looks right even
-     when the browser has hardware acceleration off, where backdrop-filter is a no-op
-     and a sharp background would otherwise show through. The blur is a bonus that
-     kicks in when GPU compositing is available. */
-  background: color-mix(in srgb, var(--surface) 94%, transparent);
+  /* Frosted overlay surface: translucent enough that the blurred backdrop shows
+     through (the glassy look), opaque enough that the background isn't distracting.
+     The strong blur turns whatever is behind into soft colour, not a sharp image. */
+  background: color-mix(in srgb, var(--surface) 82%, transparent);
   backdrop-filter: blur(30px) saturate(1.8);
   -webkit-backdrop-filter: blur(30px) saturate(1.8);
-  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
   box-shadow:
-    inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent),
+    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
     0 18px 44px -16px rgba(0, 0, 0, 0.6);
 }
 .glass-card {