diff --git a/apps/web/components/country-picker.tsx b/apps/web/components/country-picker.tsx
index 1fc8ce7..e19a40b 100644
--- a/apps/web/components/country-picker.tsx
+++ b/apps/web/components/country-picker.tsx
@@ -111,7 +111,15 @@ export function CountryPicker({
       {open && (
         <div
           role="listbox"
-          className="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-md border border-[--color-border] bg-[--color-bg-elevated] shadow-lg shadow-black/40"
+          // Background + border via inline style for the same reason as UserMenu:
+          // Tailwind v4's `bg-[--color-X]` bracket syntax produces invalid CSS,
+          // so the dropdown was rendering transparent. Frosted glass via
+          // backdrop-blur + 88% elevated-panel fill.
+          className="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-md border shadow-lg shadow-black/40 backdrop-blur-md"
+          style={{
+            backgroundColor: 'color-mix(in oklab, var(--color-bg-elevated) 88%, transparent)',
+            borderColor: 'var(--color-border)',
+          }}
         >
           <div className="flex items-center gap-2 border-b border-[--color-border] px-2.5">
             <Search size={13} className="text-[--color-fg-subtle]" />
diff --git a/apps/web/components/user-menu.tsx b/apps/web/components/user-menu.tsx
index f69c61e..d48cb54 100644
--- a/apps/web/components/user-menu.tsx
+++ b/apps/web/components/user-menu.tsx
@@ -120,7 +120,16 @@ export function UserMenu() {
       {open && (
         <div
           role="menu"
-          className="absolute right-0 top-9 z-50 w-64 overflow-hidden rounded-md border border-[--color-border] bg-[--color-bg-elevated] shadow-lg shadow-black/40"
+          // Background + border via inline style: Tailwind v4's bracket-arbitrary
+          // syntax `bg-[--color-X]` emits invalid CSS (forgets var() wrap), so the
+          // dropdown rendered fully transparent. Inline color-mix with explicit
+          // var() gives the frosted look — 88% elevated panel + backdrop-blur on
+          // top — same pattern as the marketing burger menu.
+          className="absolute right-0 top-9 z-50 w-64 overflow-hidden rounded-md border shadow-lg shadow-black/40 backdrop-blur-md"
+          style={{
+            backgroundColor: 'color-mix(in oklab, var(--color-bg-elevated) 88%, transparent)',
+            borderColor: 'var(--color-border)',
+          }}
         >
           <div className="border-b border-[--color-border] px-3.5 py-3">
             <div className="flex items-center gap-2.5">