From 1955fc87ee98af91e564c0719136aa637ce01bba Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 9 Aug 2026 05:05:59 +0200
Subject: [PATCH 1/6] =?UTF-8?q?refactor(glass):=20R10=20S3a=20=E2=80=94=20?=
 =?UTF-8?q?glass-card=20notification=20rows=20+=20perf-aware=20.overlay-ba?=
 =?UTF-8?q?ckdrop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- NotificationsPanel per-row .glass -> glass-card (the rows are cards, not panel surface).
- New .overlay-backdrop recipe (4px blur = backdrop-blur-xs) with a data-perf override that
  DROPS the blur. The viewport-sized modal scrim blur (Modal/PlayerModal/Welcome) was a raw
  backdrop-blur-xs utility that survived perf mode while every .glass had its blur dropped —
  the most expensive blur in the app. Overlays keep their bg-black/NN.
- gotcha: write ONLY the standard backdrop-filter; a manual -webkit- line makes lightningcss
  drop the standard prop (webkit-only output -> no blur in Firefox).
---
 frontend/src/components/Modal.tsx              |  2 +-
 frontend/src/components/NotificationsPanel.tsx |  4 ++--
 frontend/src/components/PlayerModal.tsx        |  2 +-
 frontend/src/components/Welcome.tsx            |  2 +-
 frontend/src/index.css                         | 11 +++++++++++
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 41c5e768..041230a3 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -56,7 +56,7 @@ export default function Modal({
 
   return createPortal(
     <div
-      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/70 backdrop-blur-xs"
+      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/70 overlay-backdrop"
       onMouseDown={(e) => {
         pressedOnBackdrop.current = e.target === e.currentTarget;
       }}
diff --git a/frontend/src/components/NotificationsPanel.tsx b/frontend/src/components/NotificationsPanel.tsx
index 7a731249..aad9cd7d 100644
--- a/frontend/src/components/NotificationsPanel.tsx
+++ b/frontend/src/components/NotificationsPanel.tsx
@@ -255,7 +255,7 @@ function NotificationRow({
   }
   return (
     <div
-      className={`glass rounded-xl p-3.5 flex items-start gap-3 transition ${
+      className={`glass-card rounded-xl p-3.5 flex items-start gap-3 transition ${
         n.read ? "opacity-70" : ""
       }`}
     >
@@ -340,7 +340,7 @@ function ClientActivityRow({
   const access = n.meta?.kind === "access-requests" ? n.meta : null;
   return (
     <div
-      className={`glass rounded-xl p-3.5 flex items-start gap-3 ${needsAction ? "ring-1 ring-accent/30" : ""}`}
+      className={`glass-card rounded-xl p-3.5 flex items-start gap-3 ${needsAction ? "ring-1 ring-accent/30" : ""}`}
     >
       <Icon className={`w-4 h-4 shrink-0 mt-0.5 ${color}`} />
       <div className="min-w-0 flex-1">
diff --git a/frontend/src/components/PlayerModal.tsx b/frontend/src/components/PlayerModal.tsx
index 36259808..bb403baf 100644
--- a/frontend/src/components/PlayerModal.tsx
+++ b/frontend/src/components/PlayerModal.tsx
@@ -889,7 +889,7 @@ export default function PlayerModal({
     <div
       ref={dialogRef}
       data-testid="player-modal"
-      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-xs"
+      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/80 overlay-backdrop"
       onClick={onClose}
       role="dialog"
       aria-modal="true"
diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/components/Welcome.tsx
index 11f20618..1a0057fd 100644
--- a/frontend/src/components/Welcome.tsx
+++ b/frontend/src/components/Welcome.tsx
@@ -258,7 +258,7 @@ function Lightbox({ src, label, onClose }: { src: string; label: string; onClose
   }, [onClose]);
   return (
     <div
-      className="fixed inset-0 z-popover grid place-items-center bg-black/80 backdrop-blur-xs p-4 sm:p-8"
+      className="fixed inset-0 z-popover grid place-items-center bg-black/80 overlay-backdrop p-4 sm:p-8"
       onClick={onClose}
       role="dialog"
       aria-modal="true"
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0b0d04d9..c19ab2cf 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -479,6 +479,17 @@ html[data-perf="1"] body {
   background: var(--bg);
 }
 
+/* Full-viewport modal scrim blur, as a named recipe so perf mode can DROP it. This is the most
+   expensive blur in the app (viewport-sized); as a raw `backdrop-blur-xs` utility on each overlay
+   it survived data-perf while every .glass surface had its blur dropped. Overlays keep their own
+   bg-black/NN; this adds only the (perf-aware) 4px blur, matching backdrop-blur-xs. */
+.overlay-backdrop {
+  backdrop-filter: blur(4px);
+}
+html[data-perf="1"] .overlay-backdrop {
+  backdrop-filter: none;
+}
+
 /* Skip layout/paint for off-screen feed cards so long lists stay smooth while
    scrolling. contain-intrinsic-size reserves an approximate box so the scrollbar
    stays stable; `auto` lets the browser remember each card's real size after it

From 0559e1a50365078e64d839a1947435b2b5366bd9 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 9 Aug 2026 05:16:19 +0200
Subject: [PATCH 2/6] =?UTF-8?q?refactor(input):=20R10=20S3b=20=E2=80=94=20?=
 =?UTF-8?q?one=20input=20recipe,=20ring=20focus=20everywhere?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unify text inputs onto the form.tsx inputCls look (surface bg, rounded-lg, 2px accent
RING focus), replacing the settings-family border-focus style app-wide:
- deleted 3 duplicate local `const inputCls` (KeyGate/SettingsPanel/SetupWizard) → import
  the shared one; a 4th (Welcome, py-2.5) kept local but re-styled to match.
- ~30 inline settings inputs: default full-size fields → inputCls; size variants (pager/
  table-filter/chat textarea/plex/glass-card) keep their width/radius/padding but swap
  bg-card→bg-surface and border-focus→ring-focus. glass-card/bg-transparent bgs left as-is.
- refreshed the form.tsx doc-comment (the old two-style split is gone).

The ring is the more visible / a11y-correct focus cue, matching R9's focus foundation.
---
 frontend/src/components/AddToPlaylist.tsx        |  2 +-
 frontend/src/components/AdminUsers.tsx           |  4 ++--
 frontend/src/components/ChannelTags.tsx          |  2 +-
 frontend/src/components/ChatThread.tsx           |  2 +-
 frontend/src/components/ColumnSortControl.tsx    |  2 +-
 frontend/src/components/ConfigPanel.tsx          |  2 +-
 frontend/src/components/Feed.tsx                 |  6 +++---
 frontend/src/components/KeyGate.tsx              |  4 +---
 frontend/src/components/Messages.tsx             |  3 ++-
 frontend/src/components/Pager.tsx                |  4 ++--
 frontend/src/components/Playlists.tsx            |  2 +-
 frontend/src/components/PlaylistsRail.tsx        |  4 ++--
 frontend/src/components/PlexCollectionEditor.tsx |  4 ++--
 frontend/src/components/PlexPlaylistAdd.tsx      |  2 +-
 frontend/src/components/PlexPlaylistView.tsx     |  2 +-
 frontend/src/components/PlexSidebar.tsx          |  6 +++---
 frontend/src/components/SavedViewsWidget.tsx     |  4 ++--
 frontend/src/components/Scheduler.tsx            |  4 ++--
 frontend/src/components/SettingsPanel.tsx        |  5 +----
 frontend/src/components/SetupWizard.tsx          |  4 +---
 frontend/src/components/ShareDialog.tsx          |  2 +-
 frontend/src/components/Sidebar.tsx              |  4 ++--
 frontend/src/components/TagManager.tsx           |  4 ++--
 frontend/src/components/Welcome.tsx              |  2 +-
 frontend/src/components/tableHeader.tsx          |  2 +-
 frontend/src/components/ui/form.tsx              | 11 ++++++-----
 26 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/AddToPlaylist.tsx b/frontend/src/components/AddToPlaylist.tsx
index 0cfc74c2..b7fb452d 100644
--- a/frontend/src/components/AddToPlaylist.tsx
+++ b/frontend/src/components/AddToPlaylist.tsx
@@ -156,7 +156,7 @@ export default function AddToPlaylist({
                 }
               }}
               placeholder={t("playlists.newPlaylist")}
-              className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent"
+              className="flex-1 min-w-0 bg-surface border border-border rounded-md px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
             />
           </div>
         </div>
diff --git a/frontend/src/components/AdminUsers.tsx b/frontend/src/components/AdminUsers.tsx
index 31e038cc..76e74b0e 100644
--- a/frontend/src/components/AdminUsers.tsx
+++ b/frontend/src/components/AdminUsers.tsx
@@ -347,7 +347,7 @@ function AdminInvites() {
           value={newEmail}
           onChange={(e) => setNewEmail(e.target.value)}
           placeholder={t("settings.invites.addPlaceholder")}
-          className="flex-1 min-w-0 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent"
+          className="flex-1 min-w-0 bg-surface border border-border rounded-xl px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
         />
         <button
           type="submit"
@@ -466,7 +466,7 @@ function AdminDemo() {
           value={newEmail}
           onChange={(e) => setNewEmail(e.target.value)}
           placeholder={t("settings.demo.addPlaceholder")}
-          className="flex-1 min-w-0 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent"
+          className="flex-1 min-w-0 bg-surface border border-border rounded-xl px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
         />
         <button
           type="submit"
diff --git a/frontend/src/components/ChannelTags.tsx b/frontend/src/components/ChannelTags.tsx
index 3b0a9a18..ea6fa675 100644
--- a/frontend/src/components/ChannelTags.tsx
+++ b/frontend/src/components/ChannelTags.tsx
@@ -111,7 +111,7 @@ function TagEditorMenu({
           }}
           maxLength={64}
           placeholder={t("channels.tags.createPlaceholder")}
-          className="flex-1 min-w-0 bg-transparent text-xs px-2 py-1 rounded-md border border-border focus:border-accent outline-hidden"
+          className="flex-1 min-w-0 bg-transparent text-xs px-2 py-1 rounded-md border border-border focus:outline-hidden focus:ring-2 focus:ring-accent/40"
         />
         <button
           type="button"
diff --git a/frontend/src/components/ChatThread.tsx b/frontend/src/components/ChatThread.tsx
index 8f74741d..cb8a488a 100644
--- a/frontend/src/components/ChatThread.tsx
+++ b/frontend/src/components/ChatThread.tsx
@@ -211,7 +211,7 @@ export default function ChatThread({
             }}
             rows={1}
             placeholder={t("messages.writePlaceholder")}
-            className="flex-1 resize-none max-h-28 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent"
+            className="flex-1 resize-none max-h-28 bg-surface border border-border rounded-xl px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
           />
           <button
             onClick={submit}
diff --git a/frontend/src/components/ColumnSortControl.tsx b/frontend/src/components/ColumnSortControl.tsx
index a9971a30..d38d4d13 100644
--- a/frontend/src/components/ColumnSortControl.tsx
+++ b/frontend/src/components/ColumnSortControl.tsx
@@ -40,7 +40,7 @@ export default function ColumnSortControl<T>({
           onChange(key ? { key, dir: active?.key === key ? active.dir : "asc" } : null);
         }}
         aria-label={label}
-        className="bg-card border border-border rounded-lg px-2 py-1.5 text-sm outline-hidden focus:border-accent"
+        className="bg-surface border border-border rounded-lg px-2 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
       >
         <option value="">{defaultLabel}</option>
         {sortable.map((c) => (
diff --git a/frontend/src/components/ConfigPanel.tsx b/frontend/src/components/ConfigPanel.tsx
index c51dd554..8f3cff33 100644
--- a/frontend/src/components/ConfigPanel.tsx
+++ b/frontend/src/components/ConfigPanel.tsx
@@ -366,7 +366,7 @@ function Field({
             max={isNum && item.max != null ? item.max : undefined}
             placeholder={item.secret ? "••••••••" : String(item.default ?? "")}
             aria-label={t(`config.fields.${item.key}.label`, item.key)}
-            className="w-52 bg-card border border-border rounded-xl px-3 py-1.5 text-sm outline-hidden focus:border-accent disabled:opacity-50"
+            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 && (
diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx
index a8a73149..c5dd0c26 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/components/Feed.tsx
@@ -410,7 +410,7 @@ export default function Feed({
                 value={ytCount}
                 onChange={(e) => setYtCount(Number(e.target.value))}
                 title={t("feed.yt.showHint")}
-                className="bg-card border border-border rounded-lg px-2 py-1 text-xs outline-hidden focus:border-accent"
+                className="bg-surface border border-border rounded-lg px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
               >
                 {[20, 40, 60, 100].map((n) => (
                   <option key={n} value={n}>
@@ -603,7 +603,7 @@ export default function Feed({
                   })
                 }
                 title={t("feed.source.tip")}
-                className="bg-card border border-border rounded-lg px-2 py-1 text-xs outline-hidden focus:border-accent"
+                className="bg-surface border border-border rounded-lg px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
               >
                 <option value="organic">{t("feed.source.organic")}</option>
                 <option value="all">{t("feed.source.all")}</option>
@@ -637,7 +637,7 @@ export default function Feed({
               });
             }}
             aria-label={t("feed.sortLabel")}
-            className="bg-card border border-border rounded-lg px-2 py-1.5 text-sm outline-hidden focus:border-accent"
+            className="bg-surface border border-border rounded-lg px-2 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
           >
             {/* Relevance only ranks meaningfully when there's a search term — offer it then. */}
             {(filters.q.trim() ? (["relevance", ...sortKeys] as SortKey[]) : sortKeys).map((k) => (
diff --git a/frontend/src/components/KeyGate.tsx b/frontend/src/components/KeyGate.tsx
index fff42753..fd368157 100644
--- a/frontend/src/components/KeyGate.tsx
+++ b/frontend/src/components/KeyGate.tsx
@@ -5,9 +5,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { AlertTriangle, Lock, ShieldCheck } from "lucide-react";
 import { api, HttpError } from "../lib/api";
 import * as e2ee from "../lib/e2ee";
-
-const inputCls =
-  "w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent";
+import { inputCls } from "./ui/form";
 
 // Secure-messaging key gate: first-run setup (choose a passphrase) or unlock on this device.
 // Self-contained — on success it updates the shared e2ee unlock state, so any observing view
diff --git a/frontend/src/components/Messages.tsx b/frontend/src/components/Messages.tsx
index a41b7973..8fea8113 100644
--- a/frontend/src/components/Messages.tsx
+++ b/frontend/src/components/Messages.tsx
@@ -13,6 +13,7 @@ import { openChat } from "../lib/chatDock";
 import * as e2ee from "../lib/e2ee";
 import Avatar from "./Avatar";
 import KeyGate from "./KeyGate";
+import { inputCls } from "./ui/form";
 import ChatThread from "./ChatThread";
 
 type View =
@@ -224,7 +225,7 @@ function Directory({ onPick, onBack }: { onPick: (u: MessageUser) => void; onBac
         value={filter}
         onChange={(e) => setFilter(e.target.value)}
         placeholder={t("messages.searchPeople")}
-        className="w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent"
+        className={inputCls}
       />
       {q.isError && !q.data ? (
         <StateMessage tone="error" onRetry={() => q.refetch()}>
diff --git a/frontend/src/components/Pager.tsx b/frontend/src/components/Pager.tsx
index e7116833..71670027 100644
--- a/frontend/src/components/Pager.tsx
+++ b/frontend/src/components/Pager.tsx
@@ -87,7 +87,7 @@ export default function Pager({
               onBlur={commitPageInput}
               onKeyDown={(e) => e.key === "Enter" && commitPageInput()}
               aria-label={t("datatable.pager.pageLabel")}
-              className="w-14 bg-card border border-border rounded-md px-1.5 py-1 text-xs text-center tabular-nums outline-hidden focus:border-accent"
+              className="w-14 bg-surface border border-border rounded-md px-1.5 py-1 text-xs text-center tabular-nums focus:outline-hidden focus:ring-2 focus:ring-accent/40"
             />
             {t("datatable.pager.ofTotal", { total: totalPages })}
           </span>
@@ -110,7 +110,7 @@ export default function Pager({
               onSizeChange(Number(e.target.value));
               scrollListToTop();
             }}
-            className="bg-card border border-border rounded-md px-1.5 py-1 text-xs outline-hidden focus:border-accent"
+            className="bg-surface border border-border rounded-md px-1.5 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
           >
             {pageSizeOptions.map((n) => (
               <option key={n} value={n}>
diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index f83545af..95e1fe29 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -590,7 +590,7 @@ export default function Playlists() {
                     if (e.key === "Escape") setRenaming(false);
                   }}
                   aria-label={t("playlists.rename")}
-                  className="text-lg font-semibold bg-card border border-border rounded-md px-2 py-0.5 outline-hidden focus:border-accent"
+                  className="text-lg font-semibold bg-surface border border-border rounded-md px-2 py-0.5 focus:outline-hidden focus:ring-2 focus:ring-accent/40"
                 />
               ) : (
                 <div className="flex items-center gap-2 min-w-0">
diff --git a/frontend/src/components/PlaylistsRail.tsx b/frontend/src/components/PlaylistsRail.tsx
index db3f84fa..e66e6a3b 100644
--- a/frontend/src/components/PlaylistsRail.tsx
+++ b/frontend/src/components/PlaylistsRail.tsx
@@ -154,7 +154,7 @@ export default function PlaylistsRail({
                 value={plSort.key}
                 onChange={(e) => setPlSort({ ...plSort, key: e.target.value as PlSort["key"] })}
                 aria-label={t("playlists.sortLabel")}
-                className="flex-1 min-w-0 bg-card border border-border rounded-md px-1.5 py-1 text-2xs outline-hidden focus:border-accent"
+                className="flex-1 min-w-0 bg-surface border border-border rounded-md px-1.5 py-1 text-2xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
               >
                 <option value="custom">{t("playlists.railSortCustom")}</option>
                 <option value="name">{t("playlists.railSortName")}</option>
@@ -200,7 +200,7 @@ export default function PlaylistsRail({
               onChange={(e) => setNewName(e.target.value)}
               placeholder={t("playlists.newPlaylist")}
               disabled={!canWrite}
-              className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent disabled:opacity-50"
+              className="flex-1 min-w-0 bg-surface border border-border rounded-md px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40 disabled:opacity-50"
             />
           </form>
         </div>
diff --git a/frontend/src/components/PlexCollectionEditor.tsx b/frontend/src/components/PlexCollectionEditor.tsx
index 48c58080..4bb88a97 100644
--- a/frontend/src/components/PlexCollectionEditor.tsx
+++ b/frontend/src/components/PlexCollectionEditor.tsx
@@ -131,7 +131,7 @@ export default function PlexCollectionEditor({
           onChange={(e) => setNewName(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && createNew()}
           placeholder={t("plex.collEditor.newPlaceholder")}
-          className="glass-card min-w-0 flex-1 rounded-lg px-3 py-2 text-sm outline-hidden focus:border-accent"
+          className="glass-card min-w-0 flex-1 rounded-lg px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
         />
         <button
           onClick={createNew}
@@ -149,7 +149,7 @@ export default function PlexCollectionEditor({
           value={q}
           onChange={(e) => setQ(e.target.value)}
           placeholder={t("plex.collEditor.search")}
-          className="glass-card mb-2 w-full rounded-lg px-3 py-1.5 text-sm outline-hidden focus:border-accent"
+          className="glass-card mb-2 w-full rounded-lg px-3 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
         />
       )}
 
diff --git a/frontend/src/components/PlexPlaylistAdd.tsx b/frontend/src/components/PlexPlaylistAdd.tsx
index 1789a307..884f3385 100644
--- a/frontend/src/components/PlexPlaylistAdd.tsx
+++ b/frontend/src/components/PlexPlaylistAdd.tsx
@@ -100,7 +100,7 @@ export default function PlexPlaylistAdd({
           onChange={(e) => setNewName(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && createNew()}
           placeholder={t("plex.playlistAdd.newPlaceholder")}
-          className="glass-card min-w-0 flex-1 rounded-lg px-3 py-2 text-sm outline-hidden focus:border-accent"
+          className="glass-card min-w-0 flex-1 rounded-lg px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
         />
         <button
           onClick={createNew}
diff --git a/frontend/src/components/PlexPlaylistView.tsx b/frontend/src/components/PlexPlaylistView.tsx
index 0945ddbf..d0daae57 100644
--- a/frontend/src/components/PlexPlaylistView.tsx
+++ b/frontend/src/components/PlexPlaylistView.tsx
@@ -532,7 +532,7 @@ export default function PlexPlaylistView({
               onChange={(e) => setName(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && rename()}
               onBlur={rename}
-              className="glass-card min-w-0 flex-1 rounded-lg px-3 py-1.5 text-lg font-bold outline-hidden focus:border-accent"
+              className="glass-card min-w-0 flex-1 rounded-lg px-3 py-1.5 text-lg font-bold focus:outline-hidden focus:ring-2 focus:ring-accent/40"
             />
           ) : (
             <h1 className="min-w-0 flex-1 truncate text-2xl font-bold">{q.data?.title ?? " "}</h1>
diff --git a/frontend/src/components/PlexSidebar.tsx b/frontend/src/components/PlexSidebar.tsx
index c9412729..c332e729 100644
--- a/frontend/src/components/PlexSidebar.tsx
+++ b/frontend/src/components/PlexSidebar.tsx
@@ -171,7 +171,7 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
               onChange={(e) => setNewPlaylist(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && createPlaylist()}
               placeholder={t("plex.playlist.newPlaceholder")}
-              className="glass-card min-w-0 flex-1 rounded-lg px-2 py-1 text-xs outline-hidden focus:border-accent"
+              className="glass-card min-w-0 flex-1 rounded-lg px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
             />
             <button
               onClick={createPlaylist}
@@ -298,7 +298,7 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
             value={collSearch}
             onChange={(e) => setCollSearch(e.target.value)}
             placeholder={t("plex.filter.collectionSearch")}
-            className="mb-1.5 w-full rounded-lg border border-border bg-card px-2 py-1 text-sm focus:border-accent focus:outline-hidden"
+            className="mb-1.5 w-full rounded-lg border border-border bg-surface px-2 py-1 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
           />
           <div
             ref={collFade.ref}
@@ -546,7 +546,7 @@ function NumberInput({
         const n = e.target.value === "" ? null : Number(e.target.value);
         onChange(n != null && Number.isFinite(n) ? n : null);
       }}
-      className="w-20 rounded-lg border border-border bg-card px-2 py-1 text-sm tabular-nums focus:border-accent focus:outline-hidden"
+      className="w-20 rounded-lg border border-border bg-surface px-2 py-1 text-sm tabular-nums focus:outline-hidden focus:ring-2 focus:ring-accent/40"
     />
   );
 }
diff --git a/frontend/src/components/SavedViewsWidget.tsx b/frontend/src/components/SavedViewsWidget.tsx
index f84e3683..03fc6880 100644
--- a/frontend/src/components/SavedViewsWidget.tsx
+++ b/frontend/src/components/SavedViewsWidget.tsx
@@ -172,7 +172,7 @@ export default function SavedViewsWidget({
             }}
             placeholder={t("views.namePlaceholder")}
             maxLength={80}
-            className="flex-1 min-w-0 bg-card border border-border rounded-lg px-2 py-1 text-xs outline-hidden focus:border-accent"
+            className="flex-1 min-w-0 bg-surface border border-border rounded-lg px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
           />
           <button
             onClick={() => void save()}
@@ -256,7 +256,7 @@ function ViewRow({
             if (e.key === "Escape") onCancelRename();
           }}
           maxLength={80}
-          className="flex-1 min-w-0 bg-card border border-border rounded-lg px-2 py-1 text-xs outline-hidden focus:border-accent"
+          className="flex-1 min-w-0 bg-surface border border-border rounded-lg px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
         />
         <button
           onClick={() => onRename(draft)}
diff --git a/frontend/src/components/Scheduler.tsx b/frontend/src/components/Scheduler.tsx
index 0e06e7fe..86fc3116 100644
--- a/frontend/src/components/Scheduler.tsx
+++ b/frontend/src/components/Scheduler.tsx
@@ -172,7 +172,7 @@ function JobRow({
                   if (e.key === "Enter") save();
                   if (e.key === "Escape") setEditing(false);
                 }}
-                className="w-16 bg-card border border-border rounded-sm px-1.5 py-0.5 text-xs outline-hidden focus:border-accent"
+                className="w-16 bg-surface border border-border rounded-sm px-1.5 py-0.5 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
               />
               <span className="text-muted text-xs">{t("scheduler.minutes")}</span>
               <button
@@ -281,7 +281,7 @@ function MaintenanceSettings({
           onChange={(e) => setVal(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && save()}
           aria-label={t("scheduler.maintenance.batchLabel")}
-          className="w-28 bg-card border border-border rounded-sm px-2 py-1 text-sm tabular-nums outline-hidden focus:border-accent"
+          className="w-28 bg-surface border border-border rounded-sm px-2 py-1 text-sm tabular-nums focus:outline-hidden focus:ring-2 focus:ring-accent/40"
         />
         <button
           onClick={save}
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index 3ba3dfbc..3c29718b 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -9,7 +9,7 @@ import { LS, useAccountPersistedState } from "../lib/storage";
 import Avatar from "./Avatar";
 import { notify, type NotifSettings } from "../lib/notifications";
 import Tooltip from "./Tooltip";
-import { Section, SettingRow, Switch } from "./ui/form";
+import { inputCls, Section, SettingRow, Switch } from "./ui/form";
 import { type SaveState } from "./ui/DraftSaveBar";
 import { useConfirm } from "./ConfirmProvider";
 import { useWizard } from "./WizardProvider";
@@ -402,9 +402,6 @@ function SignInMethods({ me }: { me: Me }) {
     }
   };
 
-  const inputCls =
-    "w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent";
-
   // Offer Google only when this instance has Google OAuth configured (or the account is already
   // linked — then we still show its "Connected" status even if the instance creds were removed).
   const showGoogle = me.google_enabled || me.has_google;
diff --git a/frontend/src/components/SetupWizard.tsx b/frontend/src/components/SetupWizard.tsx
index 96ad5f73..7c863756 100644
--- a/frontend/src/components/SetupWizard.tsx
+++ b/frontend/src/components/SetupWizard.tsx
@@ -4,6 +4,7 @@ import { Check, ChevronLeft, ChevronRight, Loader2, Send } from "lucide-react";
 import { api, HttpError } from "../lib/api";
 import { setLanguage, type LangCode } from "../i18n";
 import LanguageSwitcher from "./LanguageSwitcher";
+import { inputCls } from "./ui/form";
 
 // First-run install wizard. Shown by App.tsx while the instance is unconfigured. The one-time
 // setup token comes from the URL the app printed to the container logs (?token=…); every step
@@ -129,9 +130,6 @@ export default function SetupWizard() {
     }
   }
 
-  const inputCls =
-    "w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent";
-
   return (
     <Centered>
       <div className="w-full max-w-lg">
diff --git a/frontend/src/components/ShareDialog.tsx b/frontend/src/components/ShareDialog.tsx
index 804ebc9d..fa9cdbff 100644
--- a/frontend/src/components/ShareDialog.tsx
+++ b/frontend/src/components/ShareDialog.tsx
@@ -211,7 +211,7 @@ function LinkRow({ link, onChanged }: { link: ShareLink; onChanged: () => void }
             placeholder={t(
               link.has_password ? "downloads.share.newPassword" : "downloads.share.setPassword",
             )}
-            className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent"
+            className="flex-1 min-w-0 bg-surface border border-border rounded-md px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
           />
           <button
             onClick={() => savePass.mutate(newPass.trim())}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index add1ce99..ef84b4a5 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -209,7 +209,7 @@ export default function Sidebar({
                         maxAgeDays: undefined,
                       })
                     }
-                    className="bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent"
+                    className="bg-surface border border-border rounded-md px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
                   />
                 </label>
                 <label className="flex items-center justify-between gap-2 text-xs">
@@ -224,7 +224,7 @@ export default function Sidebar({
                         maxAgeDays: undefined,
                       })
                     }
-                    className="bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent"
+                    className="bg-surface border border-border rounded-md px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
                   />
                 </label>
                 {(filters.dateFrom || filters.dateTo) && (
diff --git a/frontend/src/components/TagManager.tsx b/frontend/src/components/TagManager.tsx
index 7b30f721..acb7527c 100644
--- a/frontend/src/components/TagManager.tsx
+++ b/frontend/src/components/TagManager.tsx
@@ -51,7 +51,7 @@ function TagRow({
         onChange={(e) => setName(e.target.value)}
         onBlur={commit}
         onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
-        className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1.5 text-sm outline-hidden focus:border-accent"
+        className="flex-1 min-w-0 bg-surface border border-border rounded-md px-2 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
       />
       <span
         ref={pop.refs.setReference}
@@ -201,7 +201,7 @@ export default function TagManager({
             value={newName}
             onChange={(e) => setNewName(e.target.value)}
             placeholder={t("tagManager.newPlaceholder")}
-            className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1.5 text-sm outline-hidden focus:border-accent"
+            className="flex-1 min-w-0 bg-surface border border-border rounded-md px-2 py-1.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40"
           />
           <button
             type="submit"
diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/components/Welcome.tsx
index 1a0057fd..372d10f9 100644
--- a/frontend/src/components/Welcome.tsx
+++ b/frontend/src/components/Welcome.tsx
@@ -431,7 +431,7 @@ function AuthCard() {
   }
 
   const inputCls =
-    "w-full bg-card border border-border rounded-xl px-3 py-2.5 text-sm outline-hidden focus:border-accent";
+    "w-full bg-surface border border-border rounded-xl px-3 py-2.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40";
   const titleKey = TITLE_KEY[mode];
 
   return (
diff --git a/frontend/src/components/tableHeader.tsx b/frontend/src/components/tableHeader.tsx
index 6d1add2f..9e9f5f6c 100644
--- a/frontend/src/components/tableHeader.tsx
+++ b/frontend/src/components/tableHeader.tsx
@@ -148,7 +148,7 @@ function FilterFunnel<T>({
             value={(value as string) ?? ""}
             onChange={(e) => onApply(col.key, e.target.value)}
             placeholder={col.header}
-            className="w-full bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent"
+            className="w-full bg-surface border border-border rounded-md px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
           />
         )}
         {f.kind === "select" && (
diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
index e3a90c6a..39fc1bf0 100644
--- a/frontend/src/components/ui/form.tsx
+++ b/frontend/src/components/ui/form.tsx
@@ -4,11 +4,12 @@ import Tooltip from "../Tooltip";
 // Shared form/settings primitives, factored out of the many panels that each re-declared
 // them (Settings, Config, Stats, admin pages, Setup wizard). Visual contract unchanged.
 
-/** The standard text/select/number input style (full-width, surface bg, accent focus ring) — the
- * literal string was copy-pasted into DownloadCenter/DownloadDialog/ProfileEditor/ShareDialog/
- * VideoEditor. NOTE: the settings-family panels (Settings/Config/Setup/Welcome) use a DIFFERENT
- * `bg-card rounded-xl focus:border-accent` style; unifying the two is a design call left to the
- * glass-consistency epic, not this DRY extract. */
+/** The ONE text/select/number input recipe (full-width, surface bg, rounded-lg, 2px accent focus
+ * RING). R10 S3 unified every input onto this: the old settings-family border-focus style
+ * (`bg-card rounded-xl focus:border-accent`) and its three copy-pasted local `inputCls` constants
+ * (KeyGate/SettingsPanel/SetupWizard) are gone. Size variants (a small pager/table-filter/chat
+ * input) keep their own width/radius/padding but adopt the same bg-surface + ring-focus look
+ * inline — reach for this const for a default full-size field, match its look for a smaller one. */
 export const inputCls =
   "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40";
 

From 7ea93925fbb69d82e7daf5b0e9cff37cb7934904 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 9 Aug 2026 05:19:39 +0200
Subject: [PATCH 3/6] =?UTF-8?q?fix(ui):=20R10=20S3c=20=E2=80=94=20Banner?=
 =?UTF-8?q?=20action=20buttons=20gain=20hover=20feedback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The accent + warning Banner action buttons had no hover state (flagged during S1 UAT).
Add the house hover:opacity-90 idiom. (The header-pill .glass-chrome consolidation is
deferred — 2 of the 3 pills already share the glass-menu/rounded-2xl look; unifying the
odd one, SyncStatus, needs a visual call on whether it becomes a full-height pill.)
---
 frontend/src/components/Banner.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Banner.tsx b/frontend/src/components/Banner.tsx
index f619538f..888b8f7d 100644
--- a/frontend/src/components/Banner.tsx
+++ b/frontend/src/components/Banner.tsx
@@ -8,12 +8,12 @@ const TONES: Record<BannerTone, { bar: string; icon: string; action: string }> =
   accent: {
     bar: "bg-accent/15 border-accent/30",
     icon: "text-accent",
-    action: "bg-accent text-accent-fg",
+    action: "bg-accent text-accent-fg hover:opacity-90",
   },
   warning: {
     bar: "bg-warn/15 border-warn/30",
     icon: "text-warn",
-    action: "bg-warn text-warn-fg",
+    action: "bg-warn text-warn-fg hover:opacity-90",
   },
 };
 

From 5a26499f1d8fb852e9c1366a1f0dd39e4f5cc3f5 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 9 Aug 2026 05:24:28 +0200
Subject: [PATCH 4/6] =?UTF-8?q?refactor(header):=20R10=20S3c=20=E2=80=94?=
 =?UTF-8?q?=20SyncStatus=20adopts=20the=20shared=20header-pill=20shell?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header row's three pills now share one shell: SyncStatus was glass/rounded-xl while
ModuleName and SearchBar were glass-menu/rounded-2xl/h-11. Aligned it (glass-menu, rounded-2xl,
h-11) so the pill row reads as one system, per user call.
---
 frontend/src/components/SyncStatus.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/SyncStatus.tsx b/frontend/src/components/SyncStatus.tsx
index c0f8cff1..ab396906 100644
--- a/frontend/src/components/SyncStatus.tsx
+++ b/frontend/src/components/SyncStatus.tsx
@@ -115,7 +115,7 @@ export default function SyncStatus({
         // Short label only: the popover already explains the numbers, and the long one overflowed
         // the viewport edge from here.
         title={countsText}
-        className="glass glass-hover relative flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl text-xs text-muted"
+        className="glass-menu glass-hover relative flex items-center gap-1.5 px-2.5 h-11 rounded-2xl text-xs text-muted"
       >
         {active ? (
           <Loader2 className="w-3.5 h-3.5 shrink-0 animate-spin text-accent" />

From 45c95442b63e257c2ec6d8c7ea1e9fe9295023fd Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 9 Aug 2026 06:15:21 +0200
Subject: [PATCH 5/6] =?UTF-8?q?refactor(input):=20R10=20S3=20review=20?=
 =?UTF-8?q?=E2=80=94=20fold=20Welcome's=20local=20inputCls=20into=20the=20?=
 =?UTF-8?q?shared=20recipe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Welcome kept the last local `const inputCls` (rounded-xl, py-2.5) after S3b consolidated
the other three, leaving its auth fields the sole inputs off the unified rounded-lg recipe.
Import the shared inputCls and drop the local const — now every input is truly one recipe.
(Auth fields go rounded-xl→rounded-lg, py-2.5→py-2 to match.)
---
 frontend/src/components/Welcome.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/components/Welcome.tsx
index 372d10f9..0671e38d 100644
--- a/frontend/src/components/Welcome.tsx
+++ b/frontend/src/components/Welcome.tsx
@@ -22,6 +22,7 @@ import { api } from "../lib/api";
 import { HttpError } from "../lib/api";
 import { setLanguage, type LangCode } from "../i18n";
 import LanguageSwitcher from "./LanguageSwitcher";
+import { inputCls } from "./ui/form";
 
 const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
 const PASSWORD_MIN = 10;
@@ -430,8 +431,6 @@ function AuthCard() {
     }
   }
 
-  const inputCls =
-    "w-full bg-surface border border-border rounded-xl px-3 py-2.5 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40";
   const titleKey = TITLE_KEY[mode];
 
   return (

From 84046a2874f769e93ece76608a5c6cf97be6b7db Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sun, 9 Aug 2026 17:44:29 +0200
Subject: [PATCH 6/6] =?UTF-8?q?chore(release):=200.60.8=20=E2=80=94=20VERS?=
 =?UTF-8?q?ION=20bump=20+=20public=20release=20note=20(R10=20S3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 VERSION                          |  2 +-
 frontend/src/lib/releaseNotes.ts | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/VERSION b/VERSION
index cecb5432..600f9d4b 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.60.7
+0.60.8
diff --git a/frontend/src/lib/releaseNotes.ts b/frontend/src/lib/releaseNotes.ts
index 75348aaa..93ced0e5 100644
--- a/frontend/src/lib/releaseNotes.ts
+++ b/frontend/src/lib/releaseNotes.ts
@@ -14,6 +14,18 @@ export interface ReleaseEntry {
 }
 
 export const RELEASE_NOTES: ReleaseEntry[] = [
+  {
+    version: "0.60.8",
+    date: "2026-08-09",
+    fixes: [
+      "Text fields across the app now share one consistent style with a clearer accent focus ring when you tab to them.",
+      "Warning and info banners' action buttons now respond to hover.",
+    ],
+    chores: [
+      "Performance mode now also drops the heavy background blur behind dialogs and the player.",
+      "Consolidated the input, header-pill and modal-backdrop styles onto shared recipes (no behaviour change).",
+    ],
+  },
   {
     version: "0.60.7",
     date: "2026-08-09",