fix(web): UserMenu + CountryPicker dropdowns frosted (Tailwind v4 bug)

Same Tailwind-v4 bracket-arbitrary issue we hit on the marketing burger
menu: bg-[--color-bg-elevated] compiles to `background-color:
--color-bg-elevated` (no var() wrap → invalid color → transparent).
Both dropdowns were rendering see-through against the dashboard.

Switch both to the proven pattern: backdrop-blur-md class + inline
style for backgroundColor + borderColor using color-mix() and explicit
var(). 88% elevated-panel fill gives a clear frosted-glass look while
keeping the menu items readable.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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]" />

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">