fix(ui): let the playlist row's cancel action render in the error color

The row's action buttons set `color: inherit`, and the selected row does so
again with more specific selectors. Both beat Material's token-driven icon
color, so the .app-destructive-button cancel action kept the row color
(selection blue on the active row). Pin the cancel button to
--mat-sys-error in both row states.

The large-deletion Electron E2E now checks the cancel color in both themes;
without this rule it reads rgb(47, 123, 255) instead of the error red.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/electron-backend-e2e/src/xtream-responsiveness.e2e.ts

@@ -11,6 +11,7 @@ import {
     waitForXtreamCatalog,
     xtreamMockServer,
 } from './electron-test-fixtures';
+import { applyTheme } from './theme-contrast';
 
 const stressPortalName = 'Stress Xtream Portal';
 const stressXtreamUsername = 'stress';
@@ -304,7 +305,25 @@ test.describe('Electron Xtream Responsiveness', () => {
             await expect(
                 playlistRow.locator('.busy-state__message')
             ).toBeVisible({ timeout: 20000 });
-            await expect(playlistRow.locator('.cancel-btn')).toBeVisible();
+            const cancel = playlistRow.locator('.cancel-btn');
+            await expect(cancel).toBeVisible();
+            // The row's action buttons inherit its color; the cancel action
+            // must still read as destructive on the selected row.
+            for (const theme of ['light', 'dark'] as const) {
+                await applyTheme(app.mainWindow, theme);
+                const error = await app.mainWindow.evaluate(() => {
+                    const probe = document.createElement('div');
+                    probe.style.color = 'var(--mat-sys-error)';
+                    document.body.appendChild(probe);
+                    const color = getComputedStyle(probe).color;
+                    probe.remove();
+                    return color;
+                });
+                expect(
+                    await cancel.evaluate((el) => getComputedStyle(el).color),
+                    `cancel color in ${theme} theme`
+                ).toBe(error);
+            }
 
             await waitForDbOperationEvent(app.mainWindow, {
                 operation: 'delete-playlist',

libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss

@@ -189,6 +189,13 @@
     }
 }
 
+// The action buttons inherit the row color, including the selected row's,
+// which masks the .app-destructive-button token on the cancel action.
+.playlist-item .action-buttons .cancel-btn,
+.playlist-item.selected .action-buttons .cancel-btn {
+    color: var(--mat-sys-error);
+}
+
 .action-spinner {
     display: block;
     margin: 0 auto;