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/ProfileEditor.tsx

@@ -6,11 +6,12 @@ import { Lock, Pencil, Plus, Trash2 } from "lucide-react";
 import Modal from "./ui/Modal";
 import { useConfirm } from "./confirmContext";
 import { api, type DownloadProfile, type DownloadSpec } from "../lib/api";
-import { inputCls } from "./ui/form";
 import { Button } from "./ui/Button";
 import SegmentedToggle from "./ui/SegmentedToggle";
 import FilterSelect from "./ui/FilterSelect";
 import { IconButton } from "./ui/IconButton";
+import { CheckRow } from "./ui/NativeControls";
+import { Input } from "./ui/Input";
 
 const HEIGHTS = [null, 2160, 1440, 1080, 720, 480, 360];
 
@@ -36,10 +37,9 @@ function Check({
   onChange: (v: boolean) => void;
 }) {
   return (
-    <label className="flex items-center gap-2 text-sm cursor-pointer select-none">
-      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
+    <CheckRow checked={checked} onChange={onChange} className="text-sm">
       {label}
-    </label>
+    </CheckRow>
   );
 }
 
@@ -152,11 +152,11 @@ export default function ProfileEditor({ onClose }: { onClose: () => void }) {
         <div className="rounded-xl border border-border p-4 space-y-3">
           <div>
             <label className="block text-sm font-medium mb-1">{t("downloads.profiles.name")}</label>
-            <input
+            <Input
+              className="w-full"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder={t("downloads.profiles.namePlaceholder")}
-              className={inputCls}
             />
           </div>
           {/* Mode on its own row: three worded choices need the width a half column lacks on a