diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index a7d39b67af7..325712fd695 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -1164,11 +1164,11 @@
   background: color-mix(in srgb, var(--sidebar-accent) 40%, transparent);
 }
 
-/* Why: mixing into the concrete sidebar surface keeps selected contrast stable,
-   including when a custom translucent sidebar theme is active. */
+/* Why: the brighter border carries the selected state; a translucent wash keeps
+   card text legible instead of lifting the surface toward the foreground color. */
 [data-worktree-card-surface][data-worktree-card-active='primary'] {
   border-color: color-mix(in srgb, var(--worktree-sidebar-border) 40%, transparent);
-  background: color-mix(in srgb, var(--worktree-sidebar-foreground) 8%, var(--worktree-sidebar));
+  background: color-mix(in srgb, var(--worktree-sidebar-foreground) 8%, transparent);
   box-shadow: 0 1px 2px color-mix(in srgb, var(--worktree-sidebar-foreground) 4%, transparent);
 }
 
@@ -1178,7 +1178,7 @@
     var(--worktree-sidebar-foreground) 18%,
     var(--worktree-sidebar-border)
   );
-  background: color-mix(in srgb, var(--worktree-sidebar-foreground) 16%, var(--worktree-sidebar));
+  background: color-mix(in srgb, var(--worktree-sidebar-foreground) 10%, transparent);
   box-shadow: 0 1px 2px color-mix(in srgb, var(--worktree-sidebar-foreground) 3%, transparent);
 }
 
diff --git a/src/renderer/src/assets/worktree-card-active-style.test.ts b/src/renderer/src/assets/worktree-card-active-style.test.ts
index 3d80531036b..814c7ae55ee 100644
--- a/src/renderer/src/assets/worktree-card-active-style.test.ts
+++ b/src/renderer/src/assets/worktree-card-active-style.test.ts
@@ -14,7 +14,7 @@ function getCssRuleBody(selector: string): string {
 }
 
 describe('worktree card active styling', () => {
-  it('mixes the primary selection into the worktree sidebar surface', () => {
+  it('keeps the primary selection wash translucent so card text stays legible', () => {
     const primary = getCssRuleBody(
       "[data-worktree-card-surface][data-worktree-card-active='primary']"
     )
@@ -22,9 +22,12 @@ describe('worktree card active styling', () => {
       ".dark [data-worktree-card-surface][data-worktree-card-active='primary']"
     )
 
-    expect(primary).toContain('var(--worktree-sidebar-foreground) 8%')
-    expect(primary).toContain('var(--worktree-sidebar)')
-    expect(darkPrimary).toContain('var(--worktree-sidebar-foreground) 16%')
+    expect(primary).toContain(
+      'background: color-mix(in srgb, var(--worktree-sidebar-foreground) 8%, transparent)'
+    )
+    expect(darkPrimary).toContain(
+      'background: color-mix(in srgb, var(--worktree-sidebar-foreground) 10%, transparent)'
+    )
     expect(darkPrimary).toContain('var(--worktree-sidebar-border)')
   })