diff --git a/frontend/src/components/settings/HydrationCard.tsx b/frontend/src/components/settings/HydrationCard.tsx
index 3628f2d..a8d131c 100644
--- a/frontend/src/components/settings/HydrationCard.tsx
+++ b/frontend/src/components/settings/HydrationCard.tsx
@@ -240,7 +240,7 @@ export function HydrationCard() {
                     top: 'calc(100% + 6px)',
                     left: 0,
                     right: 0,
-                    background: 'var(--glass-2)',
+                    background: 'var(--glass-popover)',
                     border: '1px solid var(--glass-edge)',
                     borderRadius: 12,
                     backdropFilter: 'blur(16px)',
@@ -340,7 +340,7 @@ export function HydrationCard() {
                     top: 'calc(100% + 6px)',
                     left: 0,
                     right: 0,
-                    background: 'var(--glass-2)',
+                    background: 'var(--glass-popover)',
                     border: '1px solid var(--glass-edge)',
                     borderRadius: 12,
                     backdropFilter: 'blur(16px)',
diff --git a/frontend/src/components/today/NutritionCalculatorCard.tsx b/frontend/src/components/today/NutritionCalculatorCard.tsx
index ac7ac7c..d139762 100644
--- a/frontend/src/components/today/NutritionCalculatorCard.tsx
+++ b/frontend/src/components/today/NutritionCalculatorCard.tsx
@@ -709,6 +709,7 @@ export function NutritionCalculatorCard({
                           overflowY: 'auto',
                           borderRadius: 10,
                           border: '1px solid var(--glass-edge)',
+                          background: 'var(--glass-popover)',
                         }}
                       >
                         {favMatches.map((fav) => {
@@ -818,6 +819,7 @@ export function NutritionCalculatorCard({
                           color: 'var(--fg-quiet)',
                           borderRadius: 10,
                           border: '1px solid var(--glass-edge)',
+                          background: 'var(--glass-popover)',
                         }}
                       >
                         No results found.
@@ -878,7 +880,7 @@ export function NutritionCalculatorCard({
                           overflowY: 'auto',
                           borderRadius: 12,
                           border: '1px solid var(--glass-edge)',
-                          background: 'var(--glass-2)',
+                          background: 'var(--glass-popover)',
                           backdropFilter: 'blur(16px)',
                           WebkitBackdropFilter: 'blur(16px)',
                           boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
diff --git a/frontend/src/index.css b/frontend/src/index.css
index cab17d7..934c6c2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -108,6 +108,9 @@ layer(base);
     --glass-3: rgba(255, 255, 255, 0.09);
     --glass-edge: rgba(255, 255, 255, 0.12);
     --glass-edge-strong: rgba(255, 255, 255, 0.18);
+    /* Floating menus/popovers: opaque enough to mask content scrolling behind,
+       still frosted under backdrop-filter (bg-2 tint over near-solid base) */
+    --glass-popover: rgba(16, 24, 44, 0.94);
 
     /* Motion — chart/ring entry (BRAND-GUIDE §12) */
     --ease-ring: cubic-bezier(0.2, 0.7, 0.2, 1);
@@ -199,6 +202,7 @@ layer(base);
     --glass-3: rgba(255, 255, 255, 0.88);
     --glass-edge: rgba(15, 23, 42, 0.08);
     --glass-edge-strong: rgba(15, 23, 42, 0.14);
+    --glass-popover: rgba(255, 255, 255, 0.96);
 
     --fg-primary: #0c1426;
     --fg-secondary: rgba(12, 20, 38, 0.78);