feat(design): glass surfaces by role, the static Badge, LinkButton, user pickers on the Combobox (E28 S3d1)

frontend/src/components/ui/Combobox.tsx

@@ -7,6 +7,7 @@ import { useAnchoredPopover } from "./anchoredPopoverHooks";
 import { useScrollFade } from "../../lib/useScrollFade";
 import { InnerInput } from "./Input";
 import { fieldClass } from "./fieldStyles";
+import { SURFACE } from "./surfaces";
 
 // The universal combobox: a react-select / Overseerr-style "combi input" — selected values are
 // removable chips that live INSIDE a text field you type into, and a checklist of options opens below.
@@ -240,7 +241,7 @@ export default function Combobox({
       <PopoverSurface
         popover={pop}
         ariaLabel={label}
-        className="glass-menu w-full rounded-xl p-1.5 shadow-lg animate-[popIn_0.16s_ease]"
+        className={`${SURFACE.menu} w-full animate-[popIn_0.16s_ease]`}
       >
         {/* The scroll box owns the height cap AND the scroll-fade mask (ref+style on the same element). */}
         <div ref={fade.ref} style={fade.style} className="max-h-64 overflow-y-auto no-scrollbar">
@@ -262,7 +263,7 @@ export default function Combobox({
                     disabled={o.disabled}
                     onSelect={() => commit(o.value)}
                     label={o.label ?? o.value}
-                    className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition ${
+                    className={`flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition ${
                       on ? "text-fg" : "text-muted"
                     }`}
                   >