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

frontend/src/components/Scheduler.tsx

@@ -29,6 +29,7 @@ import { notifyActionError } from "../lib/actionErrors";
 import { IconButton } from "./ui/IconButton";
 import { Pressable } from "./ui/Pressable";
 import { Input } from "./ui/Input";
+import { SURFACE } from "./ui/surfaces";
 
 const POLL_MS = 4000;
 // While any job is running, poll faster so short scheduled runs aren't missed between ticks.
@@ -171,7 +172,7 @@ function JobRow({
   }
 
   return (
-    <div className="glass-card rounded-xl p-3 flex items-center gap-3">
+    <div className={`${SURFACE.card} p-3 flex items-center gap-3`}>
       <StatusDot k={statusKey(job)} />
       <div className="min-w-0 flex-1">
         <div className="text-sm font-medium flex items-center gap-1.5 flex-wrap">
@@ -296,7 +297,7 @@ function MaintenanceSettings({
   const dirty = String(m.revalidate_batch) !== val;
 
   return (
-    <div className="glass-card rounded-xl p-4">
+    <div className={`${SURFACE.card} p-4`}>
       <div className="flex items-center gap-2 text-sm flex-wrap">
         <Database className="w-4 h-4 text-muted shrink-0" />
         <Tooltip hint={t("scheduler.maintenance.batchHint")}>
@@ -355,7 +356,7 @@ function Stat({
   sub?: string;
 }) {
   return (
-    <div className="glass-card rounded-xl p-3">
+    <div className={`${SURFACE.card} p-3`}>
       <div className="flex items-center gap-2 text-muted text-xs">
         <Icon className="w-4 h-4 shrink-0" />
         <Tooltip hint={hint ?? ""}>
@@ -485,7 +486,7 @@ export default function Scheduler() {
   return (
     <div className="p-4 max-w-4xl w-full mx-auto space-y-4">
       {/* Status strip */}
-      <div className="glass rounded-2xl p-4 flex flex-wrap items-center gap-3">
+      <div className={`${SURFACE.panel} p-4 flex flex-wrap items-center gap-3`}>
         <Activity className="w-5 h-5 text-accent shrink-0" />
         <div className="min-w-0">
           <div className="font-semibold">{t("scheduler.title")}</div>
@@ -620,7 +621,7 @@ export default function Scheduler() {
         <div className="text-xs uppercase tracking-wide text-muted mb-2">
           {t("scheduler.quotaTitle")}
         </div>
-        <div className="glass-card rounded-xl p-4">
+        <div className={`${SURFACE.card} p-4`}>
           <div className="flex items-center gap-2 text-sm">
             <Gauge className="w-4 h-4 text-muted shrink-0" />
             <span>