feat(design): the field family, the dropdown trigger, native controls, the no-raw-input lint rule (E28 S3c)

- ui/Input, Textarea, InnerInput + fieldClass (A4): the >= 3:1 edge, a 2px accent
  focus edge, the danger edge for invalid, md/sm/xs/heading rungs, 1rem and 44 on touch
- ui/SelectTrigger (A5): SortControl, FilterSelect, the view switcher and the date
  filter on one trigger, a pill in a toolbar, r8 in a form
- ui/NativeControls (A6): Checkbox, CheckRow, Slider, ColorInput
- every raw input swept (~100 sites); inputCls retired; local/input-primitive
- useReturnFocus: an in-place editor hands the focus back to its trigger on
  Enter/Escape (the playlist and Plex title renames, the priority number);
  the Plex playlist rename gains Escape and an accessible name
- back to top: a round 48 FAB (owner decision); DESIGN.md A2 and the log

frontend/src/components/downloadAdmin.tsx

@@ -7,12 +7,13 @@ import Modal from "./ui/Modal";
 import { useLiveQuery } from "../lib/useLiveQuery";
 import { api } from "../lib/api";
 import { formatBytes } from "../lib/format";
-import { inputCls } from "./ui/form";
 import { Button } from "./ui/Button";
 import { StatusPill } from "./downloadRow";
 import { jobTitle } from "./downloadTitle";
 import { IconButton } from "./ui/IconButton";
 import { Pressable } from "./ui/Pressable";
+import { Input } from "./ui/Input";
+import { CheckRow } from "./ui/NativeControls";
 
 // The admin "System" tab — storage overview, per-user footprint, quota editor, and the global job
 // list. Split out of DownloadCenter (self-contained, admin-only surface).
@@ -80,41 +81,40 @@ function QuotaModal({
         <div className="grid grid-cols-3 gap-3">
           <label className="text-sm">
             {t("downloads.admin.maxBytes")}
-            <input
+            <Input
+              className="w-full"
               type="number"
               value={state.gb}
               onChange={(e) => upd({ gb: Number(e.target.value) })}
-              className={inputCls}
               disabled={state.unlimited}
             />
           </label>
           <label className="text-sm">
             {t("downloads.admin.maxJobs")}
-            <input
+            <Input
+              className="w-full"
               type="number"
               value={state.jobs}
               onChange={(e) => upd({ jobs: Number(e.target.value) })}
-              className={inputCls}
             />
           </label>
           <label className="text-sm">
             {t("downloads.admin.maxConcurrent")}
-            <input
+            <Input
+              className="w-full"
               type="number"
               value={state.conc}
               onChange={(e) => upd({ conc: Number(e.target.value) })}
-              className={inputCls}
             />
           </label>
         </div>
-        <label className="flex items-center gap-2 text-sm cursor-pointer">
-          <input
-            type="checkbox"
-            checked={state.unlimited}
-            onChange={(e) => upd({ unlimited: e.target.checked })}
-          />
+        <CheckRow
+          checked={state.unlimited}
+          onChange={(checked) => upd({ unlimited: checked })}
+          className="text-sm"
+        >
           {t("downloads.admin.unlimited")}
-        </label>
+        </CheckRow>
         <div className="flex justify-between pt-1">
           <Button variant="ghost" size="sm" onClick={() => reset.mutate()}>
             {t("downloads.admin.reset")}
@@ -153,7 +153,8 @@ function QuotaUserPicker({ onPick }: { onPick: (u: { id: number; email: string }
   }, [q, list]);
   return (
     <div className="relative w-full sm:w-72">
-      <input
+      <Input
+        className="w-full"
         value={q}
         onChange={(e) => {
           setQ(e.target.value);
@@ -162,7 +163,6 @@ function QuotaUserPicker({ onPick }: { onPick: (u: { id: number; email: string }
         onFocus={() => setOpen(true)}
         onBlur={() => setTimeout(() => setOpen(false), 150)}
         placeholder={t("downloads.admin.quotaPickPlaceholder")}
-        className={inputCls}
       />
       {open && filtered.length > 0 && (
         <div className="absolute z-base mt-1 w-full rounded-lg glass-menu overflow-hidden">