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

frontend/src/components/KeyGate.tsx

@@ -7,6 +7,7 @@ import { api, HttpError } from "../lib/api";
 import * as e2ee from "../lib/e2ee";
 import { Button } from "./ui/Button";
 import { Input } from "./ui/Input";
+import { SURFACE } from "./ui/surfaces";
 
 // Secure-messaging key gate: first-run setup (choose a passphrase) or unlock on this device.
 // Self-contained — on success it updates the shared e2ee unlock state, so any observing view
@@ -95,7 +96,7 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
 
   if (view === "reset")
     return (
-      <div className={`glass rounded-2xl space-y-3 ${compact ? "p-3" : "p-4"}`}>
+      <div className={`${SURFACE.panel} space-y-3 ${compact ? "p-3" : "p-4"}`}>
         <div className="flex items-center gap-2">
           <AlertTriangle className="w-5 h-5 text-danger shrink-0" />
           <div className="font-semibold text-sm">{t("messages.resetTitle")}</div>
@@ -133,7 +134,7 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
     );
 
   return (
-    <div className={`glass rounded-2xl space-y-3 ${compact ? "p-3" : "p-4"}`}>
+    <div className={`${SURFACE.panel} space-y-3 ${compact ? "p-3" : "p-4"}`}>
       <div className="flex items-center gap-2">
         <ShieldCheck className="w-5 h-5 text-accent shrink-0" />
         <div className="font-semibold text-sm">