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

frontend/src/components/ProfileEditor.tsx

@@ -12,6 +12,7 @@ import FilterSelect from "./ui/FilterSelect";
 import { IconButton } from "./ui/IconButton";
 import { CheckRow } from "./ui/NativeControls";
 import { Input } from "./ui/Input";
+import { SURFACE } from "./ui/surfaces";
 
 const HEIGHTS = [null, 2160, 1440, 1080, 720, 480, 360];
 
@@ -111,10 +112,7 @@ export default function ProfileEditor({ onClose }: { onClose: () => void }) {
           {t("downloads.profiles.builtin")}
         </div>
         {builtins.map((p) => (
-          <div
-            key={p.id}
-            className="flex items-center gap-2 text-sm px-3 py-1.5 rounded-lg glass-card"
-          >
+          <div key={p.id} className={`${SURFACE.card} flex items-center gap-2 text-sm px-3 py-1.5`}>
             <Lock className="w-3.5 h-3.5 text-muted shrink-0" />
             <span className="flex-1 truncate">{p.name}</span>
           </div>
@@ -125,10 +123,7 @@ export default function ProfileEditor({ onClose }: { onClose: () => void }) {
           </div>
         )}
         {mine.map((p) => (
-          <div
-            key={p.id}
-            className="flex items-center gap-2 text-sm px-3 py-1.5 rounded-lg glass-card"
-          >
+          <div key={p.id} className={`${SURFACE.card} flex items-center gap-2 text-sm px-3 py-1.5`}>
             <span className="flex-1 truncate">{p.name}</span>
             <IconButton onClick={() => startEdit(p)} label={t("downloads.actions.rename")}>
               <Pencil />