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

frontend/src/components/SettingsPanel.tsx

@@ -27,6 +27,7 @@ import { useMe } from "../lib/useMe";
 import { Pressable } from "./ui/Pressable";
 import { Slider } from "./ui/NativeControls";
 import { Input, Textarea } from "./ui/Input";
+import { SURFACE } from "./ui/surfaces";
 
 // The Settings page edits server-persisted preferences. Each change applies locally for instant
 // preview AND auto-saves (debounced) — no draft, no Save button; a small indicator flashes the
@@ -71,7 +72,7 @@ export default function SettingsPanel() {
 
   return (
     <div className="p-4 max-w-3xl w-full mx-auto">
-      <div className="glass rounded-2xl overflow-hidden">
+      <div className={`${SURFACE.panel} overflow-hidden`}>
         <div className="flex flex-col sm:flex-row">
           {/* Tab rail: a scrolling row above the content on a phone, the side rail from `sm` up (see
               Tabs). Active is a clear accent pill. */}