diff --git a/src/renderer/src/features/settings/ui/ThemePickerRow.tsx b/src/renderer/src/features/settings/ui/ThemePickerRow.tsx
index da8202d2..92cda1e6 100644
--- a/src/renderer/src/features/settings/ui/ThemePickerRow.tsx
+++ b/src/renderer/src/features/settings/ui/ThemePickerRow.tsx
@@ -27,6 +27,22 @@ export function ThemePickerRow({ settings, onSelect, onCreate, onEdit, onDelete
     // gap-px over a bg-panel-border parent draws the grid lines as gaps rather
     // than per-cell borders, which keeps the double-border seams out and
     // respects the codebase's no-border-radius rule.
+    //
+    // THE CELLS MUST BE OPAQUE for this to work, and that is not a style
+    // preference — it is what the trick depends on. The parent is painted with
+    // the BORDER colour; only the 1px gaps are meant to show it. Any cell that
+    // is transparent (or semi-transparent) lets that border colour flood the
+    // cell, and the whole picker renders as a grey block with the border colour
+    // used as a fill.
+    //
+    // That is exactly what happened: the cells used `bg-row-bg` and
+    // `bg-row-selected-bg`, and BOTH of those tokens are deliberately
+    // see-through (`transparent`, and a 15% accent mix against `transparent`).
+    // They are correct defaults for an ordinary row sitting on a panel — they
+    // are simply wrong here. So this component names opaque tokens explicitly
+    // rather than depending on tokens whose own definition documents them as
+    // transparent. `bg-row-hover-bg` was always opaque (`--theme-surface-hi`),
+    // which is why hover was the one state that looked right.
     <div className="grid grid-cols-2 gap-px border border-panel-border bg-panel-border">
       {THEME_MODES.map(mode => (
         <button
@@ -35,8 +51,8 @@ export function ThemePickerRow({ settings, onSelect, onCreate, onEdit, onDelete
           onClick={() => onSelect(mode.id)}
           className={`flex items-center justify-between gap-2 px-3 py-2 text-left text-[12px] ${
             settings.mode === mode.id
-              ? 'bg-row-selected-bg text-row-selected-fg'
-              : 'bg-row-bg text-ink-dim hover:bg-row-hover-bg'
+              ? 'bg-row-selected-solid-bg text-row-selected-fg'
+              : 'bg-panel-bg text-ink-dim hover:bg-row-hover-bg'
           }`}
         >
           <span className="min-w-0 truncate">{mode.label}</span>
@@ -51,8 +67,8 @@ export function ThemePickerRow({ settings, onSelect, onCreate, onEdit, onDelete
           key={theme.id}
           className={`group flex items-center justify-between gap-2 px-3 py-2 text-[12px] ${
             settings.mode === theme.id
-              ? 'bg-row-selected-bg text-row-selected-fg'
-              : 'bg-row-bg text-ink-dim hover:bg-row-hover-bg'
+              ? 'bg-row-selected-solid-bg text-row-selected-fg'
+              : 'bg-panel-bg text-ink-dim hover:bg-row-hover-bg'
           }`}
         >
           <button
@@ -92,7 +108,7 @@ export function ThemePickerRow({ settings, onSelect, onCreate, onEdit, onDelete
       <button
         type="button"
         onClick={onCreate}
-        className="flex items-center bg-row-bg px-3 py-2 text-left text-[12px] text-muted hover:bg-row-hover-bg hover:text-ink"
+        className="flex items-center bg-panel-bg px-3 py-2 text-left text-[12px] text-muted hover:bg-row-hover-bg hover:text-ink"
       >
         + New theme…
       </button>
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index 02aa6af1..14568fad 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -73,6 +73,7 @@
   --color-row-bg: var(--theme-row-bg);
   --color-row-hover-bg: var(--theme-row-hover-bg);
   --color-row-selected-bg: var(--theme-row-selected-bg);
+  --color-row-selected-solid-bg: var(--theme-row-selected-solid-bg);
   --color-row-selected-fg: var(--theme-row-selected-fg);
   --color-row-danger-selected-bg: var(--theme-row-danger-selected-bg);
 
@@ -551,6 +552,15 @@
   --theme-row-bg: transparent;
   --theme-row-hover-bg: var(--theme-surface-hi);
   --theme-row-selected-bg: color-mix(in srgb, var(--theme-accent) 15%, transparent);
+  /* Opaque twin of the row-selected tint, for the one layout that cannot use
+     the transparent one: a `gap-px` grid whose PARENT is painted with the
+     border colour so the gaps read as seams. That trick only works while every
+     cell is opaque — a transparent cell lets the parent's border colour flood
+     the whole cell, and a semi-transparent one tints it. Mixing against
+     `--theme-surface` instead of `transparent` gives the identical colour on a
+     surface-coloured panel while remaining safe over any backdrop.
+     See ThemePickerRow.tsx. */
+  --theme-row-selected-solid-bg: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-surface));
   --theme-row-selected-fg: var(--theme-ink);
   --theme-row-danger-selected-bg: var(--theme-danger-soft);