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

@@ -18,6 +18,8 @@ import { DraftSaveBar, type SaveState } from "./ui/DraftSaveBar";
 import { LS, useAccountPersistedState } from "../lib/storage";
 import { notifyActionError } from "../lib/actionErrors";
 import { Button } from "./ui/Button";
+import { CheckRow } from "./ui/NativeControls";
+import { Input } from "./ui/Input";
 
 // Admin Configuration page: edit DB-overridable operational settings (registry-driven from the
 // backend — adding a key there makes it appear here automatically). Edits are drafted and
@@ -283,22 +285,18 @@ export default function ConfigPanel() {
                     <p className="text-2xs text-muted mb-1.5">{t("config.plexPickLibraries")}</p>
                     <div className="flex flex-col gap-1.5">
                       {plexResult.sections.map((s) => (
-                        <label
+                        <CheckRow
                           key={s.key}
-                          className="inline-flex items-center gap-2 text-sm cursor-pointer"
+                          checked={plexLibs.length === 0 || plexLibs.includes(s.key)}
+                          onChange={() => togglePlexLib(s.key)}
+                          className="text-sm"
                         >
-                          <input
-                            type="checkbox"
-                            checked={plexLibs.length === 0 || plexLibs.includes(s.key)}
-                            onChange={() => togglePlexLib(s.key)}
-                            className="accent-accent"
-                          />
                           <span>{s.title}</span>
                           <span className="text-2xs text-muted">
                             {s.type === "movie" ? t("config.plexMovies") : t("config.plexShows")}
                             {s.count != null ? ` · ${s.count}` : ""}
                           </span>
-                        </label>
+                        </CheckRow>
                       ))}
                     </div>
                     <p className="text-2xs text-muted mt-2">{t("config.plexPickHint")}</p>
@@ -393,7 +391,8 @@ function Field({
         ) : item.type === "choice" ? (
           <ChoiceField item={item} label={label} value={value} onChange={onChange} />
         ) : (
-          <input
+          <Input
+            className="w-52"
             type={item.secret ? "password" : isNum ? "number" : "text"}
             value={value}
             disabled={secretDisabled || (item.secret && pendingSecretReset)}
@@ -402,7 +401,6 @@ function Field({
             max={isNum && item.max != null ? item.max : undefined}
             placeholder={item.secret ? "••••••••" : String(item.default ?? "")}
             aria-label={label}
-            className="w-52 bg-surface border border-border rounded-xl px-3 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40 disabled:opacity-50"
           />
         )}
         {showReset && !secretDisabled && (