feat(plex): series-page polish — season/episode quick actions + glassy art backdrop

- Season cards (show page) gain a hover Play overlay, a clickable title, a quick
  watched/unwatched toggle (whole season) and an add-whole-season-to-playlist button.
- Episode cards gain a hover watched/unwatched quick toggle (single episode) — in the
  season page and the search Episodes section.
- Series show + season pages now use the same glassy HTPC look as the movie info page:
  a faint fixed art backdrop + a customize menu (toggle the backdrop / hide the cast
  row), factored into a shared lib/plexDetailUi (useDetailPrefs / useArtBackdrop /
  DetailCustomizeMenu), reusing the movie info prefs (plexInfoArtBg/plexInfoCast) so the
  toggle state is consistent across movies and series.

frontend/src/lib/plexDetailUi.tsx

@@ -0,0 +1,126 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { SlidersHorizontal } from "lucide-react";
+import { useDismiss } from "./useDismiss";
+import { api } from "./api";
+
+// Shared "detail page" UI reused by the movie info page (PlexInfo) and the series show/season pages,
+// so they look consistent (the standing glassy/HTPC brief): the faint fixed art backdrop, the two
+// per-user display prefs (art background / cast row — same keys as the movie info page), and the
+// customize menu that toggles them.
+
+export function useDetailPrefs() {
+  const qc = useQueryClient();
+  const prefs = (qc.getQueryData<{ preferences?: Record<string, unknown> }>(["me"])?.preferences ?? {}) as {
+    plexInfoArtBg?: boolean;
+    plexInfoCast?: boolean;
+  };
+  const [artBg, setArtBg] = useState(prefs.plexInfoArtBg !== false);
+  const [showCast, setShowCast] = useState(prefs.plexInfoCast !== false);
+  const save = (patch: Record<string, unknown>) => {
+    api.savePrefs(patch).catch(() => {});
+    qc.setQueryData<{ preferences?: Record<string, unknown> } | undefined>(["me"], (m) =>
+      m ? { ...m, preferences: { ...(m.preferences || {}), ...patch } } : m,
+    );
+  };
+  return {
+    artBg,
+    showCast,
+    toggleArtBg: () => {
+      const next = !artBg;
+      setArtBg(next);
+      save({ plexInfoArtBg: next });
+    },
+    toggleCast: () => {
+      const next = !showCast;
+      setShowCast(next);
+      save({ plexInfoCast: next });
+    },
+  };
+}
+
+// Paint the item's art as a faint FIXED backdrop on the page's <main> scroll container (HTPC-style),
+// so the glass panels float over it. Cleared on unmount / when disabled / when there's no art.
+export function useArtBackdrop(art: string | null | undefined, enabled: boolean) {
+  useLayoutEffect(() => {
+    const main = document.querySelector("main");
+    if (!main) return;
+    const s = main.style;
+    const clear = () => {
+      s.backgroundImage = "";
+      s.backgroundSize = "";
+      s.backgroundPosition = "";
+      s.backgroundRepeat = "";
+      s.backgroundAttachment = "";
+    };
+    if (enabled && art) {
+      s.backgroundImage =
+        `linear-gradient(color-mix(in srgb, var(--bg) 60%, transparent), ` +
+        `color-mix(in srgb, var(--bg) 64%, transparent)), url("${art}")`;
+      s.backgroundSize = "cover";
+      s.backgroundPosition = "center 20%";
+      s.backgroundRepeat = "no-repeat";
+      s.backgroundAttachment = "fixed";
+    } else {
+      clear();
+    }
+    return clear;
+  }, [art, enabled]);
+}
+
+export function DetailCustomizeMenu({
+  artBg,
+  onToggleArtBg,
+  showCast,
+  onToggleCast,
+  hasCast,
+}: {
+  artBg: boolean;
+  onToggleArtBg: () => void;
+  showCast: boolean;
+  onToggleCast: () => void;
+  hasCast: boolean;
+}) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  useDismiss(open, () => setOpen(false), [menuRef, btnRef]);
+  return (
+    <div className="relative shrink-0">
+      <button
+        ref={btnRef}
+        onClick={() => setOpen((v) => !v)}
+        title={t("plex.info.customize")}
+        className="p-1.5 rounded-lg text-muted hover:bg-surface hover:text-fg"
+      >
+        <SlidersHorizontal className="w-4 h-4" />
+      </button>
+      {open && (
+        <div
+          ref={menuRef}
+          className="glass-menu absolute right-0 top-full z-20 mt-1 w-52 rounded-xl p-1.5 text-sm"
+          style={{ background: "color-mix(in srgb, var(--surface) 58%, transparent)" }}
+        >
+          <PrefToggle label={t("plex.info.prefArtBg")} on={artBg} onClick={onToggleArtBg} />
+          {hasCast && <PrefToggle label={t("plex.info.prefCast")} on={showCast} onClick={onToggleCast} />}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PrefToggle({ label, on, onClick }: { label: string; on: boolean; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left hover:bg-surface"
+    >
+      <span>{label}</span>
+      <span className={`relative h-4 w-7 rounded-full transition ${on ? "bg-accent" : "bg-border"}`}>
+        <span className={`absolute top-0.5 h-3 w-3 rounded-full bg-white transition-all ${on ? "left-3.5" : "left-0.5"}`} />
+      </span>
+    </button>
+  );
+}