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

frontend/src/components/downloadRow.tsx

@@ -20,6 +20,7 @@ import { failCopyKeys } from "../lib/downloadFailure";
 import { jobTitle } from "./downloadTitle";
 import { IconButton } from "./ui/IconButton";
 import { Pressable } from "./ui/Pressable";
+import { SURFACE } from "./ui/surfaces";
 
 // Download-row presentation + the small shared primitives (status pill, icon button, usage bar),
 // split out of DownloadCenter (all purely prop-driven, no shared state). Rendered by the queue,
@@ -226,7 +227,7 @@ export function DownloadRow({
   return (
     <div
       {...(navIndex !== undefined && navItemAttrs(navIndex, jobTitle(job)))}
-      className="flex gap-3 p-2.5 rounded-xl glass-card glass-hover transition"
+      className={`${SURFACE.card} flex gap-3 p-2.5 glass-hover transition`}
     >
       <Thumb job={job} />
       <div className="min-w-0 flex-1">
@@ -323,7 +324,7 @@ export function UsageBar() {
   const pct =
     u.unlimited || !u.max_bytes ? 0 : Math.min(100, (u.footprint_bytes / u.max_bytes) * 100);
   return (
-    <div className="rounded-xl glass-card p-3 mb-4">
+    <div className={`${SURFACE.card} p-3 mb-4`}>
       <div className="flex justify-between text-sm mb-1.5">
         <span className="font-medium">{t("downloads.usage.title")}</span>
         <span className="text-muted">