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

frontend/src/components/AdminUsers.tsx

@@ -45,6 +45,7 @@ import { useMe } from "../lib/useMe";
 import { notifyActionError, notifyKnownFailure } from "../lib/actionErrors";
 import { Pressable } from "./ui/Pressable";
 import { Input } from "./ui/Input";
+import { SURFACE } from "./ui/surfaces";
 
 // Admin-only user & access management: roles, access requests (the Invite whitelist), and the
 // demo whitelist + reset. Each section is its own tab (persisted across reloads); the Access tab
@@ -231,7 +232,7 @@ function UsersRoles({ me }: { me: Me }) {
           {rows.map((u) => {
             const self = u.id === me.id;
             return (
-              <div key={u.id} className="glass-card flex items-center gap-2.5 p-2.5 rounded-xl">
+              <div key={u.id} className={`${SURFACE.card} flex items-center gap-2.5 p-2.5`}>
                 <Pressable
                   onClick={() => setPanelFor(u)}
                   title={t("users.account.open")}
@@ -429,7 +430,7 @@ function PendingAccessRowView({
 }) {
   const { t } = useTranslation();
   return (
-    <div className="glass-card flex items-center gap-2 p-2.5 rounded-xl">
+    <div className={`${SURFACE.card} flex items-center gap-2 p-2.5`}>
       <div className="min-w-0 flex-1">
         <div className="text-sm truncate">{row.email}</div>
         <div className="text-2xs text-muted flex items-center gap-2 mt-0.5 flex-wrap">
@@ -829,7 +830,7 @@ function AdminDemo() {
       {rows.length > 0 && (
         <div className="space-y-1.5 mb-3">
           {rows.map((r) => (
-            <div key={r.id} className="glass-card flex items-center gap-2 p-2.5 rounded-xl">
+            <div key={r.id} className={`${SURFACE.card} flex items-center gap-2 p-2.5`}>
               <div className="min-w-0 flex-1">
                 <div className="text-sm truncate">{r.email}</div>
                 {r.added_by && (
@@ -916,7 +917,7 @@ function InviteRow({
 }) {
   const { t } = useTranslation();
   return (
-    <div className="glass-card flex items-center gap-2 p-2.5 rounded-xl">
+    <div className={`${SURFACE.card} flex items-center gap-2 p-2.5`}>
       <div className="min-w-0 flex-1">
         <div className="text-sm truncate">{inv.email}</div>
         {inv.requested_at && (