From c1d087f87ce360101ca7949717aaf3feec77cb67 Mon Sep 17 00:00:00 2001
From: Pavel <paveljevstignejev@gmail.com>
Date: Wed, 1 Jul 2026 21:40:03 +0300
Subject: [PATCH 1/2] refactor(web): consolidate shape tokens and improve
 keyboard accessibility

- Migrated hardcoded border-radius values to --app-radius-* tokens
  across ~80 stylesheets in apps/web and libs/*, adding a new
  --app-radius-2xl tier where the existing scale had a gap
- Fixed the two genuinely theme-locked hardcoded colors in
  season-container (thumbnail/placeholder backgrounds) to use
  --app-content-bg / --app-widget-header-bg
- Reverted an incorrect attempt to theme remote-control via --app-*
  tokens: it ships inside apps/remote-control-web, a standalone
  bundle that never loads m3-theme.scss, so those tokens don't
  exist there. It keeps its original self-contained dark palette
  and literal px radii instead
- Added keyboard accessibility: channel-list-item, episode-card and
  episode-list-item were clickable elements with no tabindex/role,
  making them unreachable via keyboard. Added role="button",
  tabindex, Enter/Space activation, :focus-visible rings, and
  aria-label on icon-only buttons that previously relied solely on
  matTooltip
- Added :focus-visible states to remote-control's touchpad/keypad/
  volume buttons
- Added regression tests for the new keyboard activation and
  aria-label behavior on channel-list-item
---
 apps/web/src/_settings-theme.scss             |   8 +-
 ...delete-all-playlists-dialog.component.scss |   4 +-
 .../src/app/settings/settings.component.scss  |  22 +-
 apps/web/src/m3-theme.scss                    |  27 +-
 apps/web/src/nav-list.scss                    |   4 +-
 apps/web/src/styles.scss                      |  10 +-
 .../add-playlist-dialog.component.scss        |   6 +-
 .../file-upload/file-upload.component.scss    |   8 +-
 .../video-player/video-player.component.scss  |   2 +-
 .../playlist-switcher.component.scss          |  14 +-
 .../empty-state/empty-state.component.scss    |   2 +-
 .../empty-state.welcome-dashboard.scss        |   4 +-
 .../empty-state.welcome-sources.scss          |   6 +-
 .../playlist-item.component.scss              |   6 +-
 .../category-content-view.component.scss      |   4 +-
 .../feature/src/lib/downloads.component.scss  |  26 +-
 .../content-rail-shell.component.scss         |   4 +-
 .../favorites-layout.component.scss           |   2 +-
 .../global-favorites-list.component.scss      |   2 +-
 .../grid-list/grid-list.component.scss        |   8 +-
 .../unified-collection-page.component.scss    |   2 +-
 .../unified-grid-tab.component.scss           |   2 +-
 .../lib/navigation/navigation.component.scss  |   4 +-
 .../portal-rail-links.component.scss          |   6 +-
 .../shared/ui/src/lib/styles/_skeleton.scss   |   8 +-
 ...er-collection-channels-list.component.scss |   2 +-
 .../stalker-favorites-button.component.scss   |   2 +-
 .../account-info/account-info.component.scss  |  28 +-
 .../category-management-dialog.component.scss |   4 +-
 .../live-stream-layout.component.scss         |   2 +-
 .../portal-channels-list.component.scss       |   2 +-
 .../recently-added.component.scss             |   4 +-
 .../vod-details-route.component.scss          |   2 +-
 .../all-channels-view.component.scss          |   2 +-
 .../channel-details-dialog.component.scss     |  16 +-
 .../channel-list-container.component.scss     |   2 +-
 .../channel-list-item-skeleton.component.scss |  12 +-
 .../channel-list-item.component.html          |  16 +
 .../channel-list-item.component.scss          |  25 +-
 .../channel-list-item.component.spec.ts       |  25 +
 .../channel-list-item.component.ts            |   5 +
 .../group-management-dialog.component.scss    |   4 +-
 .../groups-view/groups-view.component.scss    |   2 +-
 .../channel-list-loading-state.component.scss |   4 +-
 .../content-hero/content-hero.component.scss  |   6 +-
 .../external-playback-dock.component.scss     |  10 +-
 .../season-container.component.html           |  14 +
 .../season-container.component.scss           |  82 +++-
 .../epg-item-description.component.scss       | 440 ++++++++++--------
 .../epg-list-item.component.scss              |   4 +-
 .../src/lib/epg-list/epg-list.component.scss  |   8 +-
 .../epg-progress-panel.component.scss         |  10 +-
 .../epg-source-status.component.scss          |   2 +-
 .../multi-epg-container.component.scss        |   8 +-
 .../audio-player/audio-player.component.scss  |   8 +-
 .../embedded-mpv-player.component.scss        |  14 +-
 .../portal-inline-player.component.scss       |   4 +-
 ...layback-navigation-controls.component.scss |   2 +-
 .../web-player-view.component.scss            |   8 +-
 .../remote-control.component.scss             |  85 +++-
 .../src/lib/epg-view/epg-view.component.scss  |  10 +-
 .../live-epg-panel.component.scss             |  10 +-
 libs/ui/styles/_content-grid.scss             |   4 +-
 libs/ui/styles/_detail-view-actions.scss      |   2 +-
 libs/ui/styles/_detail-view.scss              |   6 +-
 libs/ui/styles/_panel-header.scss             |   2 +-
 libs/ui/styles/_portal-sidebar.scss           |   2 +-
 .../lib/rails/dashboard-rail.component.scss   |   6 +-
 .../workspace-dashboard-rails.component.scss  |  24 +-
 .../global-favorites-list.component.scss      |   2 +-
 .../playlist-drop-overlay.component.scss      |   4 +-
 .../workspace-command-palette.component.scss  |   2 +-
 ...space-context-category-view.component.scss |   4 +-
 .../workspace-context-panel.component.scss    |  16 +-
 ...e-keyboard-shortcuts-dialog.component.scss |  10 +-
 ...space-shell-context-sidebar.component.scss |  34 ++
 .../workspace-shell-header.component.scss     |   6 +-
 ...kspace-shell-import-overlay.component.scss |   8 +-
 .../workspace-shell-rail-links.component.scss |   4 +-
 .../workspace-shell-rail.component.scss       |  14 +-
 .../workspace-shell.component.scss            |   2 +-
 ...space-sources-filters-panel.component.scss |   2 +-
 82 files changed, 742 insertions(+), 487 deletions(-)

diff --git a/apps/web/src/_settings-theme.scss b/apps/web/src/_settings-theme.scss
index 8a843b60ea..e2cdf20034 100644
--- a/apps/web/src/_settings-theme.scss
+++ b/apps/web/src/_settings-theme.scss
@@ -158,7 +158,7 @@
         flex-direction: column;
         gap: 14px;
         padding: 18px;
-        border-radius: 18px;
+        border-radius: var(--app-radius-2xl);
         border: 1px solid color-mix(in srgb, #ff4d6d 26%, transparent);
         background:
             radial-gradient(
@@ -207,7 +207,7 @@
         justify-content: center;
         width: 44px;
         height: 44px;
-        border-radius: 14px;
+        border-radius: var(--app-radius-xl);
         background: linear-gradient(135deg, #ff4d6d, #ff8b5e);
         color: #fff;
         box-shadow:
@@ -255,7 +255,7 @@
         align-items: center;
         gap: 12px;
         padding: 10px 14px;
-        border-radius: 14px;
+        border-radius: var(--app-radius-xl);
         border: 1px solid transparent;
         text-decoration: none;
         color: #fff;
@@ -288,7 +288,7 @@
         justify-content: center;
         width: 34px;
         height: 34px;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         background: rgba(255, 255, 255, 0.18);
         color: #fff;
         flex: 0 0 auto;
diff --git a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss
index 9178d18065..36292d8537 100644
--- a/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss
+++ b/apps/web/src/app/settings/settings-delete-all-playlists-dialog.component.scss
@@ -44,7 +44,7 @@
     padding: 10px 12px;
     border: 1px solid
         color-mix(in srgb, var(--mat-sys-outline) 46%, transparent);
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     background: color-mix(
         in srgb,
         var(--mat-sys-surface-container) 84%,
@@ -80,7 +80,7 @@
 
 .settings-delete-dialog__hint {
     padding: 12px 14px;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     background: color-mix(
         in srgb,
         var(--app-selection-surface) 32%,
diff --git a/apps/web/src/app/settings/settings.component.scss b/apps/web/src/app/settings/settings.component.scss
index f3b7d22df8..186251f4cb 100644
--- a/apps/web/src/app/settings/settings.component.scss
+++ b/apps/web/src/app/settings/settings.component.scss
@@ -285,7 +285,7 @@
     );
     border: 1px solid
         color-mix(in srgb, var(--mat-sys-outline-variant) 60%, transparent);
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
 }
 
 .theme-switcher__option {
@@ -501,7 +501,7 @@
     padding: 12px 14px;
     border: 1px solid
         color-mix(in srgb, var(--mat-sys-outline-variant) 70%, transparent);
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     background: color-mix(
         in srgb,
         var(--mat-sys-surface-container-low) 88%,
@@ -550,7 +550,7 @@
     justify-content: center;
     width: 40px;
     height: 40px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: color-mix(
         in srgb,
         var(--mat-sys-surface-container-high) 82%,
@@ -623,7 +623,7 @@
 .settings-note {
     margin: 12px 18px 18px;
     padding: 10px 12px;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     font-size: 0.84rem;
     background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);
     border: 1px solid
@@ -642,7 +642,7 @@
     padding: 14px 16px;
     background: var(--settings-item-danger-bg);
     border: 1px solid var(--settings-item-danger-border);
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     grid-template-columns: 1fr;
     gap: 14px;
 }
@@ -672,7 +672,7 @@
     gap: 8px;
     min-height: 34px;
     padding: 4px 6px 4px 12px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: color-mix(
         in srgb,
         var(--mat-sys-surface-container-high) 78%,
@@ -704,7 +704,7 @@
         min-width: 26px;
         height: 22px;
         padding: 0 8px;
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
         background: color-mix(
             in srgb,
             var(--mat-sys-on-surface) 10%,
@@ -773,7 +773,7 @@
     margin-top: 12px;
     margin-bottom: 2px;
     box-shadow: none;
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     padding: 12px;
     border-top: 1px solid var(--settings-action-bar-border);
     justify-content: space-between;
@@ -787,7 +787,7 @@
     color: var(--app-selection-on-color, #fff);
     font-weight: 500;
     padding: 0 20px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     box-shadow: 0 4px 14px
         color-mix(in srgb, var(--app-selection-color) 28%, transparent);
     transition:
@@ -835,7 +835,7 @@
 
     .settings-page-header {
         padding: 12px 14px;
-        border-radius: 16px;
+        border-radius: var(--app-radius-xl);
     }
 
     .setting-item {
@@ -883,7 +883,7 @@
         position: static;
         flex-direction: column-reverse;
         align-items: stretch;
-        border-radius: 16px;
+        border-radius: var(--app-radius-xl);
         box-shadow: none;
         width: 100%;
         margin-left: 0;
diff --git a/apps/web/src/m3-theme.scss b/apps/web/src/m3-theme.scss
index 4f8ac3325c..efca9e87f5 100644
--- a/apps/web/src/m3-theme.scss
+++ b/apps/web/src/m3-theme.scss
@@ -53,6 +53,17 @@ $dark-theme: mat.define-theme(
 html {
     @include mat.all-component-themes($light-theme);
 
+    // ── Shape scale (theme-independent) ───────────────────────────────────
+    // Central radius tokens so surfaces, list rows, inputs and the future
+    // advanced player control panel share one consistent rounding language.
+    --app-radius-xs: 6px;
+    --app-radius-sm: 8px;
+    --app-radius-md: 10px;
+    --app-radius-lg: 12px;
+    --app-radius-xl: 16px;
+    --app-radius-2xl: 20px;
+    --app-radius-pill: 999px;
+
     // ── Light theme design tokens ─────────────────────────────────────────
     --app-shell-bg: #eef0f3;
     --app-rail-bg: #eef0f3;
@@ -92,6 +103,12 @@ html {
     // Content area
     --app-content-shadow: -2px 4px 12px rgba(0, 0, 0, 0.06);
 
+    // Soft elevation scale — modern, low-contrast shadows for cards & panels
+    --app-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04),
+        0 4px 12px rgba(0, 0, 0, 0.05);
+    --app-shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.06),
+        0 6px 16px -8px rgba(0, 0, 0, 0.16);
+
     // Widget surfaces — no borders, layered backgrounds
     --app-widget-bg: #ffffff;
     --app-widget-header-bg: #fafbfc;
@@ -167,6 +184,12 @@ html {
         // Content area
         --app-content-shadow: -4px 8px 20px rgba(0, 0, 0, 0.18);
 
+        // Soft elevation scale — deeper on dark graphite surfaces
+        --app-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25),
+            0 6px 16px rgba(0, 0, 0, 0.28);
+        --app-shadow-raised: 0 3px 8px rgba(0, 0, 0, 0.32),
+            0 10px 24px -10px rgba(0, 0, 0, 0.5);
+
         // Widget surfaces — NO border, surface contrast does the work
         // Widgets sit on content-bg (#161a22), so widget-bg is notably lighter
         --app-widget-bg: #1e2330;
@@ -213,7 +236,7 @@ html {
         --mdc-outlined-text-field-outline-color: var(--app-widget-header-border);
         --mdc-outlined-text-field-hover-outline-color: var(--app-muted-color);
         --mdc-outlined-text-field-focus-outline-color: var(--app-selection-color);
-        --mdc-outlined-text-field-container-shape: 10px;
+        --mdc-outlined-text-field-container-shape: var(--app-radius-md);
         --mdc-outlined-text-field-label-text-color: var(--app-muted-color);
         --mdc-outlined-text-field-input-text-color: var(--app-heading-color);
         --mdc-outlined-text-field-caret-color: var(--app-selection-color);
@@ -227,7 +250,7 @@ html {
     // locked to the light-mode value at html-level inheritance.
     .mat-form-field-appearance-outline .mat-mdc-text-field-wrapper {
         background: color-mix(in srgb, var(--app-widget-bg) 85%, white 7%);
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
     }
 
     .mat-mdc-form-field .mat-mdc-input-element,
diff --git a/apps/web/src/nav-list.scss b/apps/web/src/nav-list.scss
index dfb6df1755..1188211d69 100644
--- a/apps/web/src/nav-list.scss
+++ b/apps/web/src/nav-list.scss
@@ -16,7 +16,7 @@
     gap: 10px;
     padding: 6px 4px;
     border: 1px solid transparent;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     background: transparent;
     color: var(--mat-sys-on-surface-variant);
     text-align: left;
@@ -95,7 +95,7 @@
             top: 7px;
             bottom: 7px;
             width: 2px;
-            border-radius: 999px;
+            border-radius: var(--app-radius-pill);
             background: var(--app-selection-color);
             box-shadow: 0 0 10px var(--app-selection-glow);
         } */
diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index c4d00706e6..cf6379d252 100644
--- a/apps/web/src/styles.scss
+++ b/apps/web/src/styles.scss
@@ -58,7 +58,7 @@
             var(--app-muted-color) 70%,
             transparent
         );
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
         border: 2px solid transparent;
         background-clip: content-box;
         min-height: 32px;
@@ -83,7 +83,7 @@
     color: var(--app-muted-color, #8891a4);
     font-variant-numeric: tabular-nums;
     padding: 2px 8px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: color-mix(
         in srgb,
         var(--app-muted-color, #8891a4) 18%,
@@ -172,7 +172,7 @@ textarea,
 
     ::-webkit-scrollbar-thumb {
         background-color: var(--mat-sys-outline-variant);
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
 
         &:hover {
             background-color: var(--mat-sys-outline);
@@ -199,7 +199,7 @@ textarea,
 .workspace-command-palette-overlay .mat-mdc-dialog-surface {
     background: transparent;
     box-shadow: none;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     padding: 0;
     overflow: visible;
 }
@@ -213,7 +213,7 @@ textarea,
 .workspace-shortcuts-overlay .mat-mdc-dialog-surface {
     background: transparent;
     box-shadow: none;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     padding: 0;
     overflow: visible;
 }
diff --git a/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss
index 799fe67c0b..ca97d6f24b 100644
--- a/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss
+++ b/libs/playlist/import/feature/src/lib/add-playlist-dialog/add-playlist-dialog.component.scss
@@ -65,7 +65,7 @@
     appearance: none;
     background: var(--apd-segment-track);
     border: 1px solid var(--apd-border);
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     padding: 10px 11px 12px;
     display: flex;
     flex-direction: column;
@@ -130,7 +130,7 @@
     height: 32px;
     display: grid;
     place-items: center;
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     background: color-mix(
         in srgb,
         var(--apd-surface-raised) 75%,
@@ -210,7 +210,7 @@
     .cors-note {
         margin: 6px 0 0;
         padding: 10px 12px;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         background: color-mix(
             in srgb,
             var(--apd-surface-raised) 50%,
diff --git a/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss b/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss
index a1f9c6b236..d6d534bc80 100644
--- a/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss
+++ b/libs/playlist/import/feature/src/lib/file-upload/file-upload.component.scss
@@ -15,7 +15,7 @@
     justify-content: center;
     gap: 8px;
     padding: 36px 24px 28px;
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     border: 1.5px dashed
         color-mix(in srgb, var(--app-body-color) 30%, transparent);
     background: color-mix(in srgb, var(--app-shell-bg) 55%, transparent);
@@ -111,7 +111,7 @@
     align-items: center;
     gap: 12px;
     padding: 14px 14px 14px 16px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: color-mix(in srgb, var(--app-shell-bg) 85%, transparent);
     box-shadow: inset 0 0 0 1px var(--app-widget-header-border);
 
@@ -122,7 +122,7 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         background: color-mix(
             in srgb,
             var(--app-selection-color) 16%,
@@ -166,7 +166,7 @@
         background: transparent;
         width: 32px;
         height: 32px;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         display: inline-flex;
         align-items: center;
         justify-content: center;
diff --git a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss
index 2462266350..726eeb5e3d 100644
--- a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss
+++ b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss
@@ -85,7 +85,7 @@
     min-width: 120px;
     padding: 2rem 3rem;
     border: 2px solid rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     background: rgba(0, 0, 0, 0.85);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
     color: #fff;
diff --git a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss
index fdd6f4df91..0f07400e46 100644
--- a/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss
+++ b/libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss
@@ -10,7 +10,7 @@
     width: 100%;
     box-sizing: border-box;
     padding: 4px 8px 4px 4px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     background: color-mix(in srgb, var(--app-on-surface) 5%, transparent);
@@ -52,7 +52,7 @@
 .trigger-icon-container {
     width: 30px;
     height: 30px;
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -179,7 +179,7 @@
         calc(100vw - 24px)
     ) !important;
     margin-top: -1px !important;
-    border-radius: 0 0 12px 12px !important;
+    border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg) !important;
     border: 1px solid var(--mat-sys-outline) !important;
     border-top: 0 !important;
     overflow: hidden !important;
@@ -254,7 +254,7 @@
         var(--app-on-surface) 6%,
         transparent
     );
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     border: 1px solid transparent;
     transition: all 0.2s ease;
 }
@@ -311,7 +311,7 @@
 .type-filter-chip {
     height: 24px;
     padding: 0 10px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     border: 1px solid
         color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
     background: color-mix(
@@ -448,7 +448,7 @@
     justify-content: center;
     width: 36px;
     height: 36px;
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     background: color-mix(
         in srgb,
         var(--app-on-surface) 6%,
@@ -597,7 +597,7 @@
         width: 100%;
         padding: 8px 10px;
         border: none;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         background: transparent;
         color: var(--mat-sys-on-surface-variant);
         font: inherit;
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss
index a6ad6c6393..d2cf8d6b18 100644
--- a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.component.scss
@@ -114,7 +114,7 @@
             color: var(--app-selection-on-color, white);
             font-weight: 500;
             padding: 10px 24px;
-            border-radius: 10px;
+            border-radius: var(--app-radius-md);
             text-transform: none;
             letter-spacing: 0.01em;
             box-shadow: 0 4px 14px var(--app-selection-glow);
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss
index 154d51bba1..89ebe47fb3 100644
--- a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-dashboard.scss
@@ -154,7 +154,7 @@
         font-weight: 500;
         font-size: clamp(0.875rem, 1.8vh, 1rem);
         padding: 10px 28px;
-        border-radius: 12px;
+        border-radius: var(--app-radius-lg);
         box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
         transition:
             transform 0.2s ease,
@@ -204,7 +204,7 @@
             rgba(37, 99, 235, 0.04)
         );
         border: 1px solid rgba(96, 165, 250, 0.18);
-        border-radius: 14px;
+        border-radius: var(--app-radius-xl);
         backdrop-filter: blur(8px);
         transform: rotate(-2deg);
         transform-origin: center;
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss
index 41e01a628a..6071b78852 100644
--- a/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/empty-state/empty-state.welcome-sources.scss
@@ -81,7 +81,7 @@
             rgba(37, 99, 235, 0.04)
         );
         border: 1px solid rgba(96, 165, 250, 0.2);
-        border-radius: 16px;
+        border-radius: var(--app-radius-xl);
         transition:
             transform 0.2s ease,
             box-shadow 0.2s ease,
@@ -143,7 +143,7 @@
         font-size: 0.7rem;
         font-weight: 500;
         padding: 3px 9px;
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
         background: rgba(96, 165, 250, 0.14);
         color: #93c5fd;
         border: 1px solid rgba(96, 165, 250, 0.22);
@@ -159,7 +159,7 @@
         font-weight: 500;
         font-size: 0.875rem;
         padding: 8px 18px;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
         transition:
             transform 0.2s ease,
diff --git a/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
index b963935d62..fc20c3a47a 100644
--- a/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
+++ b/libs/playlist/shared/ui/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
@@ -11,7 +11,7 @@
     gap: 12px;
     padding: 8px 10px 8px 12px;
     border: 1px solid transparent;
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     background: transparent;
     color: inherit;
     cursor: pointer;
@@ -125,7 +125,7 @@
 
 .cdk-drag-preview {
     box-sizing: border-box;
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     box-shadow:
         0 8px 24px rgba(0, 0, 0, 0.25),
         0 4px 12px rgba(0, 0, 0, 0.15),
@@ -162,7 +162,7 @@
     button {
         width: 34px;
         height: 34px;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         color: inherit;
         opacity: 0.76;
         transition:
diff --git a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss
index 36340c7158..5736c5b02a 100644
--- a/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss
+++ b/libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss
@@ -72,7 +72,7 @@
     gap: 6px;
     flex-shrink: 0;
     min-height: 32px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     color: var(--app-body-color, var(--mat-sys-on-surface-variant));
     --mdc-text-button-label-text-color: currentColor;
     --mat-text-button-state-layer-color: currentColor;
@@ -141,7 +141,7 @@
     min-width: 18px;
     height: 18px;
     padding: 0 5px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     font-size: 0.68rem;
     font-weight: 700;
     line-height: 1;
diff --git a/libs/portal/downloads/feature/src/lib/downloads.component.scss b/libs/portal/downloads/feature/src/lib/downloads.component.scss
index 5ffd989e3c..1cd71d6800 100644
--- a/libs/portal/downloads/feature/src/lib/downloads.component.scss
+++ b/libs/portal/downloads/feature/src/lib/downloads.component.scss
@@ -95,7 +95,7 @@
         background: var(--mat-sys-primary);
         color: var(--mat-sys-on-primary);
         padding: 0.125rem 0.5rem;
-        border-radius: 12px;
+        border-radius: var(--app-radius-lg);
         font-size: 0.75rem;
         font-weight: 600;
     }
@@ -112,7 +112,7 @@
             transparent
         );
         border: 1px solid var(--mat-sys-outline-variant);
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         box-shadow: inset 0 1px 0
             color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
 
@@ -209,7 +209,7 @@
         min-width: 0;
         min-height: 124px;
         padding: 1rem;
-        border-radius: 14px;
+        border-radius: var(--app-radius-xl);
         background: color-mix(
             in srgb,
             var(--app-widget-bg, var(--mat-sys-surface-container-high)) 88%,
@@ -223,7 +223,7 @@
         @extend %downloads-skeleton-shimmer;
         width: 64px;
         height: 90px;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         border: 1px solid var(--app-separator, var(--mat-sys-outline-variant));
     }
 
@@ -239,7 +239,7 @@
         @extend %downloads-skeleton-shimmer;
         width: min(70%, 280px);
         height: 13px;
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
 
         &--short {
             width: min(48%, 190px);
@@ -255,7 +255,7 @@
             @extend %downloads-skeleton-shimmer;
             width: 88px;
             height: 20px;
-            border-radius: 999px;
+            border-radius: var(--app-radius-pill);
 
             &:last-child {
                 width: 132px;
@@ -267,7 +267,7 @@
         @extend %downloads-skeleton-shimmer;
         width: 100%;
         height: 6px;
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
         margin-top: 0.05rem;
     }
 
@@ -304,7 +304,7 @@
             --app-widget-bg,
             var(--mat-sys-surface-container-high)
         );
-        border-radius: 14px;
+        border-radius: var(--app-radius-xl);
         border: 1px solid var(--app-separator, var(--mat-sys-outline-variant));
         box-shadow: var(--app-widget-shadow, none);
         transition:
@@ -338,7 +338,7 @@
         &-poster {
             width: 64px;
             height: 90px;
-            border-radius: 10px;
+            border-radius: var(--app-radius-md);
             overflow: hidden;
             flex-shrink: 0;
             background: var(
@@ -408,7 +408,7 @@
             gap: 0.35rem;
             font-weight: 500;
             padding: 2px 8px;
-            border-radius: 12px;
+            border-radius: var(--app-radius-lg);
             background: var(
                 --app-widget-header-bg,
                 var(--mat-sys-surface-container-high)
@@ -450,7 +450,7 @@
                 monospace;
             background: transparent;
             padding: 2px 8px;
-            border-radius: 12px;
+            border-radius: var(--app-radius-lg);
         }
 
         &-error {
@@ -462,7 +462,7 @@
                 transparent
             );
             padding: 2px 8px;
-            border-radius: 12px;
+            border-radius: var(--app-radius-lg);
         }
 
         &-actions {
@@ -517,7 +517,7 @@
         background: var(--mat-sys-primary);
         color: var(--mat-sys-on-primary);
         padding: 0.125rem 0.5rem;
-        border-radius: 6px;
+        border-radius: var(--app-radius-xs);
         font-size: 0.7rem;
         font-weight: 700;
         text-transform: uppercase;
diff --git a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
index 66bb5cffb5..294cd2a06c 100644
--- a/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/content-rail-shell/content-rail-shell.component.scss
@@ -9,7 +9,7 @@
     gap: 12px;
     padding: 12px 0 0;
     border: 1px solid transparent;
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     transition:
         background 0.2s ease,
         border-color 0.2s ease,
@@ -62,7 +62,7 @@
     align-items: center;
     gap: 2px;
     padding: 4px 8px 4px 10px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     font-size: 0.78rem;
     font-weight: 500;
     line-height: 1;
diff --git a/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss
index 232c9e9014..823fc56e87 100644
--- a/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/favorites-layout/favorites-layout.component.scss
@@ -58,7 +58,7 @@
     color: var(--mat-sys-primary);
     background: color-mix(in srgb, var(--mat-sys-primary) 10%, var(--mat-sys-surface-container-high));
     padding: 4px 10px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     box-shadow:
         inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-primary) 30%, transparent),
         0 1px 3px rgba(0, 0, 0, 0.18);
diff --git a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss
index e22cb4a933..f71fde293a 100644
--- a/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/global-favorites-list/global-favorites-list.component.scss
@@ -22,7 +22,7 @@
 }
 
 :host ::ng-deep .search-bar div {
-    border-radius: 20px;
+    border-radius: var(--app-radius-2xl);
 }
 
 :host ::ng-deep .search-bar div[matformfieldlineripple],
diff --git a/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss b/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss
index 4c5c043047..bb30c336c9 100644
--- a/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/grid-list/grid-list.component.scss
@@ -37,7 +37,7 @@ mat-card:hover {
             position: relative;
             width: 100%;
             box-sizing: border-box;
-            border-radius: 10px;
+            border-radius: var(--app-radius-md);
             overflow: hidden;
             aspect-ratio: 2 / 3; // maintain poster ratio
             background: var(--mat-sys-surface-container-high);
@@ -47,7 +47,7 @@ mat-card:hover {
             width: 100%;
             height: 100%;
             object-fit: cover;
-            border-radius: 10px;
+            border-radius: var(--app-radius-md);
             display: block;
             // No hardcoded light bg — uses parent container bg
             background: transparent;
@@ -60,7 +60,7 @@ mat-card:hover {
             display: grid;
             place-items: center;
             color: var(--app-muted-color, var(--mat-sys-on-surface-variant));
-            border-radius: 10px;
+            border-radius: var(--app-radius-md);
 
             mat-icon {
                 width: clamp(28px, 20%, 42px);
@@ -145,7 +145,7 @@ mat-card:hover {
     color: #4ade80; // green-400, readable across themes
     font-size: 0.72rem;
     font-weight: 600;
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss
index 9898557b49..87609b7036 100644
--- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-collection-page.component.scss
@@ -55,7 +55,7 @@
 .toggle-placeholder {
     height: 43px;
     width: 120px;
-    border-radius: 18px;
+    border-radius: var(--app-radius-2xl);
     background: color-mix(in srgb, var(--mat-sys-on-surface) 6%, transparent);
 
     &--scope {
diff --git a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss
index f4c45795d8..7be807fad0 100644
--- a/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss
+++ b/libs/portal/shared/ui/src/lib/components/unified-collection/unified-grid-tab.component.scss
@@ -24,7 +24,7 @@
 }
 
 :host ::ng-deep .search-bar div {
-    border-radius: 20px;
+    border-radius: var(--app-radius-2xl);
 }
 
 :host ::ng-deep .search-bar div[matformfieldlineripple],
diff --git a/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss b/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss
index d12c17c3e9..1b84ad957d 100644
--- a/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss
+++ b/libs/portal/shared/ui/src/lib/navigation/navigation.component.scss
@@ -19,7 +19,7 @@
         min-height: 28px;
         height: 28px;
         padding: 0 !important;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         margin: 2px 0;
         display: flex;
         justify-content: center;
@@ -78,7 +78,7 @@ a.mat-mdc-list-item.mdc-list-item {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     background: var(--mat-sys-surface-container);
     color: var(--mat-sys-on-surface-variant);
     border: 1px solid var(--mat-sys-outline-variant);
diff --git a/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss b/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss
index dda2ea5199..b9fbb54aea 100644
--- a/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss
+++ b/libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.scss
@@ -11,7 +11,7 @@
         min-height: 28px;
         height: 28px;
         padding: 0 !important;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         margin: 2px 0;
         display: flex;
         justify-content: center;
@@ -45,7 +45,7 @@ nav.flex .portal-rail-link {
     height: 44px;
     padding: 0;
     gap: 0;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -88,7 +88,7 @@ nav.flex .portal-rail-link.active::after {
     transform: translateY(-50%);
     width: 4px;
     height: 20px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: var(--app-selection-color);
     box-shadow: 0 0 10px var(--app-selection-glow);
 }
diff --git a/libs/portal/shared/ui/src/lib/styles/_skeleton.scss b/libs/portal/shared/ui/src/lib/styles/_skeleton.scss
index 2ac9351d51..1f4a92e4a1 100644
--- a/libs/portal/shared/ui/src/lib/styles/_skeleton.scss
+++ b/libs/portal/shared/ui/src/lib/styles/_skeleton.scss
@@ -11,7 +11,7 @@
     position: relative;
     width: 100%;
     aspect-ratio: 2 / 3;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     overflow: hidden;
     background: color-mix(
         in srgb,
@@ -32,7 +32,7 @@
     right: 8px;
     width: 34px;
     height: 14px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: color-mix(
         in srgb,
         var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 56%,
@@ -49,7 +49,7 @@
 
 .grid-skeleton-line {
     height: 9px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: color-mix(
         in srgb,
         var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
@@ -95,7 +95,7 @@
 .list-skeleton-avatar {
     width: 40px;
     height: 40px;
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
     flex-shrink: 0;
     background: color-mix(
         in srgb,
diff --git a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
index 1509296611..11017a0ad1 100644
--- a/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
+++ b/libs/portal/stalker/feature/src/lib/stalker-collection-channels-list/stalker-collection-channels-list.component.scss
@@ -31,7 +31,7 @@
     flex: 1;
     width: 100%;
     height: 36px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     border: 1px solid rgba(127, 127, 127, 0.22);
     background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
diff --git a/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss
index 8a45e41415..ddcbceaa5e 100644
--- a/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss
+++ b/libs/portal/stalker/feature/src/lib/stalker-favorites-button/stalker-favorites-button.component.scss
@@ -9,7 +9,7 @@
     background: rgba(109, 109, 110, 0.7);
     color: #fff;
     border: none;
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     cursor: pointer;
     transition: all 0.2s ease;
 
diff --git a/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss
index f553b6fb35..2d582be3df 100644
--- a/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss
+++ b/libs/portal/xtream/feature/src/lib/account-info/account-info.component.scss
@@ -35,7 +35,7 @@
 .account-dialog__eyebrow-mark {
     width: 8px;
     height: 8px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: var(--app-provider-xtream, var(--mat-sys-primary));
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 14%, transparent);
 }
@@ -43,7 +43,7 @@
 .account-dialog__eyebrow-divider {
     width: 3px;
     height: 3px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: currentColor;
     opacity: 0.5;
 }
@@ -84,7 +84,7 @@
     justify-content: center;
     min-height: 28px;
     padding: 0 10px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     border: 1px solid var(--app-separator);
     background: var(--mat-sys-surface-container);
     color: var(--app-body-color, var(--mat-sys-on-surface));
@@ -116,7 +116,7 @@
 
 .account-dialog__message {
     padding: 10px 14px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     border: 1px solid var(--app-separator);
     background: var(--mat-sys-surface-container);
     line-height: 1.5;
@@ -134,7 +134,7 @@
     display: grid;
     gap: 6px;
     padding: 12px 14px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     border: 1px solid var(--app-widget-border, transparent);
     background: var(--app-widget-bg, var(--mat-sys-surface-container));
     box-shadow: var(--app-widget-shadow, none);
@@ -149,7 +149,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     background: color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 12%, transparent);
     color: var(--app-provider-xtream, var(--mat-sys-primary));
 
@@ -179,7 +179,7 @@
     position: relative;
     overflow: hidden;
     height: 4px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: var(--app-separator);
 }
 
@@ -208,7 +208,7 @@
     display: grid;
     gap: 14px;
     padding: 16px;
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     border: 1px solid var(--app-widget-border, transparent);
     background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
     box-shadow: var(--app-widget-shadow, none);
@@ -319,7 +319,7 @@
     align-items: center;
     min-height: 28px;
     padding: 0 10px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     border: 1px solid color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 16%, transparent);
     background: color-mix(in srgb, var(--app-provider-xtream, var(--mat-sys-primary)) 8%, transparent);
     color: var(--app-body-color, var(--mat-sys-on-surface));
@@ -345,7 +345,7 @@
     justify-items: center;
     gap: 12px;
     padding: 36px 20px;
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     border: 1px dashed var(--app-separator);
     background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
     text-align: center;
@@ -369,7 +369,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     background: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);
     color: var(--mat-sys-error);
 }
@@ -382,7 +382,7 @@
 .account-skeleton {
     position: relative;
     overflow: hidden;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: var(--app-separator);
 }
 
@@ -402,7 +402,7 @@
 
 .account-skeleton--stat {
     min-height: 110px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
 }
 
 .account-skeleton--heading {
@@ -431,7 +431,7 @@
 
 .account-dialog__close {
     min-width: 100px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
 }
 
 @keyframes account-dialog-shimmer {
diff --git a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
index 2f1944edf0..36f879ca02 100644
--- a/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
+++ b/libs/portal/xtream/feature/src/lib/category-management-dialog/category-management-dialog.component.scss
@@ -49,7 +49,7 @@
     gap: 8px;
     padding: 0 10px;
     min-height: 36px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
     background: var(--app-search-bg, var(--mat-sys-surface-container));
     cursor: text;
@@ -113,7 +113,7 @@
     min-height: 200px;
     overflow-y: auto;
     border: 1px solid var(--mat-sys-outline-variant);
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
 }
 
 .category-item {
diff --git a/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss
index ee772f77fd..56b4550f9a 100644
--- a/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss
+++ b/libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss
@@ -89,7 +89,7 @@ app-grid-list.live-all-items-grid {
 .archive-unavailable-banner {
     margin: 12px 12px 0;
     padding: 12px 14px;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     border: 1px solid rgba(255, 255, 255, 0.08);
     background:
         linear-gradient(
diff --git a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
index 0df50214bb..23e8a793ca 100644
--- a/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
+++ b/libs/portal/xtream/feature/src/lib/portal-channels-list/portal-channels-list.component.scss
@@ -44,7 +44,7 @@
     flex: 1;
     width: 100%;
     height: 36px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     border: 1px solid rgba(127, 127, 127, 0.22);
     background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
diff --git a/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss
index 1ea7b22f63..0c2044a636 100644
--- a/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss
+++ b/libs/portal/xtream/feature/src/lib/recently-added/recently-added.component.scss
@@ -46,7 +46,7 @@
 .recently-added-page__skeleton-header {
     width: 180px;
     height: 22px;
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
 }
 
 .recently-added-page__skeleton-track {
@@ -60,7 +60,7 @@
     flex: 0 0 var(--cover-rail-width, 160px);
     width: var(--cover-rail-width, 160px);
     aspect-ratio: 2 / 3;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
 }
 
 .recently-added-page__skeleton-header,
diff --git a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss
index c35099222b..71492caed5 100644
--- a/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss
+++ b/libs/portal/xtream/feature/src/lib/vod-details/vod-details-route.component.scss
@@ -20,7 +20,7 @@
         margin-bottom: 4px;
         padding: 14px 16px;
         border: 1px solid color-mix(in srgb, var(--tag-border) 85%, transparent);
-        border-radius: 14px;
+        border-radius: var(--app-radius-xl);
         background: linear-gradient(
             180deg,
             color-mix(in srgb, var(--surface-bg) 86%, transparent) 0%,
diff --git a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss
index e74c10efbe..4d5840d818 100644
--- a/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/all-channels-view/all-channels-view.component.scss
@@ -92,7 +92,7 @@
 }
 
 :host ::ng-deep .search-bar div {
-    border-radius: 20px;
+    border-radius: var(--app-radius-2xl);
 }
 
 :host ::ng-deep .search-bar div[matformfieldlineripple],
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss
index 7b53595d4f..e8e59c6b91 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/channel-details-dialog/channel-details-dialog.component.scss
@@ -35,7 +35,7 @@
 .channel-dialog__eyebrow-mark {
     width: 8px;
     height: 8px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: var(--mat-sys-primary);
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--mat-sys-primary) 14%, transparent);
 }
@@ -57,7 +57,7 @@
 .channel-dialog__logo {
     width: 48px;
     height: 48px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     object-fit: contain;
     background: var(--mat-sys-surface-container);
     border: 1px solid var(--app-separator);
@@ -94,7 +94,7 @@
     justify-content: center;
     min-height: 26px;
     padding: 0 10px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     border: 1px solid var(--app-separator);
     background: var(--mat-sys-surface-container);
     color: var(--app-body-color, var(--mat-sys-on-surface));
@@ -133,7 +133,7 @@
     display: grid;
     gap: 4px;
     padding: 12px 14px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     border: 1px solid var(--app-widget-border, transparent);
     background: var(--app-widget-bg, var(--mat-sys-surface-container));
     box-shadow: var(--app-widget-shadow, none);
@@ -147,7 +147,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent);
     color: var(--mat-sys-primary);
 
@@ -207,7 +207,7 @@
     align-items: flex-start;
     gap: 8px;
     padding: 10px 10px 10px 14px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     border: 1px solid var(--app-separator);
     background: var(--mat-sys-surface-container);
 
@@ -237,7 +237,7 @@
     display: grid;
     gap: 14px;
     padding: 16px;
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     border: 1px solid var(--app-widget-border, transparent);
     background: var(--app-widget-bg, var(--mat-sys-surface-container-low));
     box-shadow: var(--app-widget-shadow, none);
@@ -347,7 +347,7 @@
 
 .channel-dialog__close {
     min-width: 100px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
 }
 
 // ─── Responsive breakpoints ─────────────────────────────────────────────────
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss
index bf3560dc0f..89bd033fb0 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss
@@ -31,7 +31,7 @@
 .empty-source-state__icon-wrapper {
     width: 64px;
     height: 64px;
-    border-radius: 20px;
+    border-radius: var(--app-radius-2xl);
     background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
         rgba(127, 127, 127, 0.1);
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item-skeleton/channel-list-item-skeleton.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-list-item-skeleton/channel-list-item-skeleton.component.scss
index 8deb39f911..1cc0a2a120 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item-skeleton/channel-list-item-skeleton.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item-skeleton/channel-list-item-skeleton.component.scss
@@ -14,7 +14,7 @@
     gap: 12px;
     padding: 8px 10px 8px 12px;
     border: 1px solid transparent;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: transparent;
     box-sizing: border-box;
     overflow: hidden;
@@ -37,7 +37,7 @@
     width: 44px;
     height: 44px;
     flex-shrink: 0;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
 
     .compact & {
         width: 38px;
@@ -56,20 +56,20 @@
 
 .channel-name-skeleton {
     height: 11px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     max-width: 100%;
 }
 
 .epg-title-skeleton {
     height: 9px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     max-width: 100%;
 }
 
 .epg-progress-skeleton {
     height: 6px;
     width: 100%;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
 }
 
 .action-buttons-skeleton {
@@ -83,7 +83,7 @@
 .action-button-skeleton {
     width: 34px;
     height: 34px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
 }
 
 @container (max-width: 360px) {
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
index c215f2cb86..8d4c1a71e8 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
@@ -5,9 +5,15 @@
     [cdkDragDisabled]="!isDraggable()"
     cdkDragPreviewContainer="parent"
     [class.active]="selected()"
+    role="button"
+    tabindex="0"
+    [attr.aria-label]="name()"
+    [attr.aria-pressed]="selected()"
     (click)="onClick($event)"
     (dblclick)="onDoubleClick()"
     (contextmenu)="onContextMenu($event)"
+    (keydown.enter)="onKeydownActivate($event)"
+    (keydown.space)="onKeydownActivate($event)"
     data-test-id="channel-item"
 >
     @if (isDraggable()) {
@@ -77,6 +83,9 @@
                     [matTooltip]="
                         'EPG.PROGRAM_DIALOG.SHOW_PROGRAM_DETAILS' | translate
                     "
+                    [attr.aria-label]="
+                        'EPG.PROGRAM_DIALOG.SHOW_PROGRAM_DETAILS' | translate
+                    "
                     (click)="showProgramDescription(program, $event)"
                 >
                     <mat-icon>info</mat-icon>
@@ -92,6 +101,12 @@
                             : 'CHANNELS.ADD_FAVORITE'
                         ) | translate
                     "
+                    [attr.aria-label]="
+                        (isFavorite()
+                            ? 'CHANNELS.REMOVE_FAVORITE'
+                            : 'CHANNELS.ADD_FAVORITE'
+                        ) | translate
+                    "
                     (click)="onFavoriteClick($event)"
                 >
                     <mat-icon>{{
@@ -104,6 +119,7 @@
                     mat-icon-button
                     class="favorite-button"
                     [matTooltip]="auxActionTooltip()"
+                    [attr.aria-label]="auxActionTooltip()"
                     (click)="onAuxActionClick($event)"
                 >
                     <mat-icon>{{ auxActionIcon() }}</mat-icon>
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
index 4e7430ad3c..339b127c95 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss
@@ -12,7 +12,7 @@
     gap: 12px;
     padding: 8px 10px 8px 12px;
     border: 1px solid transparent;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: transparent;
     color: inherit;
     cursor: pointer;
@@ -27,6 +27,14 @@
 
     &:hover {
         background: color-mix(in srgb, currentColor 8%, transparent);
+        border-color: color-mix(in srgb, currentColor 12%, transparent);
+    }
+
+    &:focus-visible {
+        outline: none;
+        border-color: var(--app-selection-border);
+        box-shadow: 0 0 0 2px
+            color-mix(in srgb, var(--app-selection-color) 45%, transparent);
     }
 
     &.active {
@@ -68,7 +76,7 @@
     width: 44px;
     height: 44px;
     flex-shrink: 0;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     display: grid;
     place-items: center;
     overflow: hidden;
@@ -156,7 +164,7 @@
     width: 100%;
     height: 6px;
     overflow: hidden;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background-color: rgba(127, 127, 127, 0.28);
     background-image: linear-gradient(
         180deg,
@@ -205,18 +213,25 @@
     button {
         width: 32px;
         height: 32px;
-        /* border-radius: 10px; */
+        border-radius: var(--app-radius-sm);
         color: inherit;
         opacity: 0.76;
         transition:
             opacity 0.15s ease,
             background-color 0.15s ease,
+            box-shadow 0.15s ease,
             transform 0.15s ease;
 
         &:hover {
             opacity: 1;
             background: color-mix(in srgb, currentColor 10%, transparent);
-            /* transform: translateY(-1px); */
+        }
+
+        &:focus-visible {
+            outline: none;
+            opacity: 1;
+            box-shadow: 0 0 0 2px
+                color-mix(in srgb, var(--app-selection-color) 45%, transparent);
         }
     }
 
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
index e101df1003..c489ddce76 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
@@ -112,6 +112,31 @@ describe('ChannelListItemComponent', () => {
         expect(activated).toHaveBeenCalledTimes(1);
     });
 
+    it('exposes a keyboard-focusable row with an accessible name', () => {
+        fixture.componentRef.setInput('name', 'Cartoon Network');
+        fixture.detectChanges();
+
+        const row: HTMLElement =
+            fixture.nativeElement.querySelector('.channel-list-item');
+
+        expect(row.getAttribute('role')).toBe('button');
+        expect(row.getAttribute('tabindex')).toBe('0');
+        expect(row.getAttribute('aria-label')).toBe('Cartoon Network');
+    });
+
+    it('activates on Enter/Space keydown like a click', () => {
+        const clicked = jest.fn();
+        fixture.componentInstance.clicked.subscribe(clicked);
+
+        const preventDefault = jest.fn();
+        fixture.componentInstance.onKeydownActivate({
+            preventDefault,
+        } as unknown as KeyboardEvent);
+
+        expect(preventDefault).toHaveBeenCalled();
+        expect(clicked).toHaveBeenCalledTimes(1);
+    });
+
     it('emits a context menu request on right click when details are enabled', () => {
         fixture.componentRef.setInput('name', 'News One');
         fixture.componentRef.setInput('showDetailsContextMenu', true);
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
index 06400bc0ac..207c6d382f 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
@@ -96,6 +96,11 @@ export class ChannelListItemComponent {
         this.clicked.emit();
     }
 
+    onKeydownActivate(event: Event): void {
+        event.preventDefault();
+        this.clicked.emit();
+    }
+
     onDoubleClick(): void {
         this.activated.emit();
     }
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss b/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss
index e4bfd5b2fc..26b7a557c6 100644
--- a/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/group-management-dialog/group-management-dialog.component.scss
@@ -40,7 +40,7 @@
     gap: 8px;
     padding: 0 10px;
     min-height: 36px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
     background: var(--app-search-bg, var(--mat-sys-surface-container));
     cursor: text;
@@ -104,7 +104,7 @@
     min-height: 200px;
     overflow-y: auto;
     border: 1px solid var(--mat-sys-outline-variant);
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
 }
 
 .group-item {
diff --git a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
index 61c8f61b4f..30478e2f01 100644
--- a/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
+++ b/libs/ui/components/src/lib/channel-list-container/groups-view/groups-view.component.scss
@@ -95,7 +95,7 @@
     gap: 8px;
     padding: 0 10px;
     min-height: 36px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
     background: var(--app-search-bg, var(--mat-sys-surface-container));
     cursor: text;
diff --git a/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss
index 3292c762c3..222d35281f 100644
--- a/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss
+++ b/libs/ui/components/src/lib/channel-list-loading-state/channel-list-loading-state.component.scss
@@ -97,7 +97,7 @@
     gap: 10px;
     min-height: 36px;
     padding: 0 10px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: color-mix(
         in srgb,
         var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 88%,
@@ -115,7 +115,7 @@
 .groups-loading-nav__count,
 .groups-loading-content__title,
 .groups-loading-content__subtitle {
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
 }
 
 .groups-loading-nav__label {
diff --git a/libs/ui/components/src/lib/content-hero/content-hero.component.scss b/libs/ui/components/src/lib/content-hero/content-hero.component.scss
index 4b01a2d767..7aff4153f7 100644
--- a/libs/ui/components/src/lib/content-hero/content-hero.component.scss
+++ b/libs/ui/components/src/lib/content-hero/content-hero.component.scss
@@ -225,7 +225,7 @@
         width: 100%;
         aspect-ratio: 2 / 3;
         object-fit: cover;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         box-shadow: var(--poster-shadow);
         background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
         transition: transform 0.3s ease;
@@ -234,7 +234,7 @@
     &__placeholder {
         width: 100%;
         aspect-ratio: 2 / 3;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
         display: flex;
         flex-direction: column;
@@ -436,7 +436,7 @@
         background: #fff;
         color: #141414;
         border: none;
-        border-radius: 16px;
+        border-radius: var(--app-radius-xl);
         cursor: pointer;
         transition: all 0.2s ease;
 
diff --git a/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss
index 29158fd717..b1b4dacb9d 100644
--- a/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss
+++ b/libs/ui/components/src/lib/external-playback-dock/external-playback-dock.component.scss
@@ -36,7 +36,7 @@
     min-height: 48px;
     padding: 8px 10px;
     gap: 10px;
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     box-shadow:
         0 12px 28px rgba(15, 23, 42, 0.16),
         inset 0 1px 0 rgba(255, 255, 255, 0.18);
@@ -44,7 +44,7 @@
     .external-playback-dock__artwork {
         width: 38px;
         height: 38px;
-        border-radius: 12px;
+        border-radius: var(--app-radius-lg);
     }
 
     .external-playback-dock__title {
@@ -61,7 +61,7 @@
     height: 48px;
     padding: 0;
     border: 0;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     overflow: hidden;
     background: color-mix(in srgb, var(--mat-sys-surface-container-highest) 92%, transparent);
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
@@ -113,7 +113,7 @@
     display: inline-flex;
     align-items: center;
     height: 18px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: color-mix(
         in srgb,
         var(--mat-sys-surface-container-highest) 80%,
@@ -175,7 +175,7 @@
 }
 
 .external-playback-dock__button {
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     white-space: nowrap;
 }
 
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.html b/libs/ui/components/src/lib/season-container/season-container.component.html
index 7e7e97ce6a..ecf3a23f5a 100644
--- a/libs/ui/components/src/lib/season-container/season-container.component.html
+++ b/libs/ui/components/src/lib/season-container/season-container.component.html
@@ -95,7 +95,14 @@ <h4 class="empty-state-panel__title">This season is empty</h4>
                         @let episodeInfo = getEpisodeInfo(episode);
                         <article
                             class="episode-card"
+                            role="button"
+                            tabindex="0"
                             (click)="selectEpisode(episode)"
+                            (keydown.enter)="selectEpisode(episode)"
+                            (keydown.space)="
+                                $event.preventDefault();
+                                selectEpisode(episode)
+                            "
                             [class.episode-card--watched]="
                                 isEpisodeWatched(episode)
                             "
@@ -258,7 +265,14 @@ <h4 class="episode-card__title">
                         @let episodeInfo = getEpisodeInfo(episode);
                         <article
                             class="episode-list-item"
+                            role="button"
+                            tabindex="0"
                             (click)="selectEpisode(episode)"
+                            (keydown.enter)="selectEpisode(episode)"
+                            (keydown.space)="
+                                $event.preventDefault();
+                                selectEpisode(episode)
+                            "
                             [class.episode-list-item--watched]="
                                 isEpisodeWatched(episode)
                             "
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.scss b/libs/ui/components/src/lib/season-container/season-container.component.scss
index ae3cf447e6..7fe744c290 100644
--- a/libs/ui/components/src/lib/season-container/season-container.component.scss
+++ b/libs/ui/components/src/lib/season-container/season-container.component.scss
@@ -46,6 +46,12 @@
             border-color: rgba(255, 255, 255, 0.2);
         }
 
+        &:focus-visible {
+            outline: none;
+            color: var(--text-primary);
+            box-shadow: 0 0 0 2px var(--accent-color);
+        }
+
         mat-icon {
             font-size: 18px;
             width: 18px;
@@ -56,7 +62,7 @@
     .view-toggle {
         mat-button-toggle-group {
             border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 6px;
+            border-radius: var(--app-radius-xs);
             overflow: hidden;
             background: rgba(255, 255, 255, 0.03);
 
@@ -120,7 +126,7 @@
     margin: 0 auto;
     padding: 32px 28px;
     border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
         radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 60%);
@@ -194,7 +200,7 @@
     padding: 12px;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
     cursor: pointer;
     transition: all 0.2s ease;
     text-align: left;
@@ -215,6 +221,17 @@
         }
     }
 
+    &:focus-visible {
+        outline: none;
+        border-color: var(--accent-color);
+        box-shadow: 0 0 0 2px var(--accent-color);
+
+        .season-card__arrow {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
     &__progress-ring {
         position: relative;
         width: 42px;
@@ -309,7 +326,7 @@
 // Episode Card
 .episode-card {
     background: rgba(255, 255, 255, 0.03);
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
     overflow: hidden;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -382,10 +399,24 @@
         }
     }
 
+    &:focus-visible {
+        outline: none;
+        border-color: var(--accent-color);
+        box-shadow: 0 0 0 2px var(--accent-color);
+
+        .episode-card__overlay {
+            opacity: 1;
+        }
+
+        .episode-card__play {
+            transform: scale(1);
+        }
+    }
+
     &__thumbnail {
         position: relative;
         aspect-ratio: 16 / 9;
-        background: #000;
+        background: var(--app-content-bg);
         overflow: hidden;
 
         img {
@@ -414,7 +445,11 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
+        background: linear-gradient(
+            135deg,
+            var(--app-widget-header-bg) 0%,
+            var(--app-content-bg) 100%
+        );
         color: var(--text-muted);
 
         mat-icon {
@@ -460,6 +495,13 @@
                 background: rgba(0, 0, 0, 0.8);
             }
 
+            &:focus-visible {
+                outline: none;
+                color: white;
+                background: rgba(0, 0, 0, 0.8);
+                box-shadow: 0 0 0 2px var(--accent-color);
+            }
+
             mat-icon {
                 font-size: 20px;
                 width: 20px;
@@ -485,7 +527,8 @@
         }
     }
 
-    &:hover {
+    &:hover,
+    &:focus-within {
         .episode-card__actions {
             opacity: 1;
         }
@@ -554,7 +597,7 @@
         display: inline-block;
         padding: 1px 6px;
         background: rgba(255, 255, 255, 0.08);
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
     }
 }
 
@@ -572,12 +615,13 @@
     gap: 16px;
     padding: 12px 16px;
     background: rgba(255, 255, 255, 0.02);
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
     cursor: pointer;
     transition: all 0.15s ease;
     border: 1px solid transparent;
 
-    &:hover {
+    &:hover,
+    &:focus-within {
         background: rgba(255, 255, 255, 0.06);
         border-color: rgba(255, 255, 255, 0.08);
 
@@ -586,6 +630,12 @@
         }
     }
 
+    &:focus-visible {
+        outline: none;
+        border-color: var(--accent-color);
+        box-shadow: 0 0 0 2px var(--accent-color);
+    }
+
     &--watched {
         opacity: 0.6;
 
@@ -611,7 +661,7 @@
         min-width: 36px;
         height: 36px;
         background: rgba(255, 255, 255, 0.06);
-        border-radius: 6px;
+        border-radius: var(--app-radius-xs);
         font-size: 0.875rem;
         font-weight: 600;
         color: var(--text-secondary);
@@ -665,7 +715,7 @@
         color: var(--text-muted);
         padding: 2px 8px;
         background: rgba(255, 255, 255, 0.06);
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
     }
 
     &__progress-text {
@@ -674,7 +724,7 @@
         color: var(--mat-sys-primary);
         padding: 2px 8px;
         background: color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
     }
 
     &__description {
@@ -727,6 +777,12 @@
                 background: rgba(255, 255, 255, 0.1);
             }
 
+            &:focus-visible {
+                outline: none;
+                color: var(--text-primary);
+                box-shadow: 0 0 0 2px var(--accent-color);
+            }
+
             &.play-btn {
                 color: var(--accent-color);
 
diff --git a/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss
index 210f93bdb6..9503964db0 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss
+++ b/libs/ui/epg/src/lib/epg-list/epg-item-description/epg-item-description.component.scss
@@ -1,272 +1,300 @@
-// Matches the EPG timeline design system (same tokens + fallbacks).
-$surface-1: var(--surface-1, #0f141c);
-$surface-2: var(--surface-2, #161d28);
-$surface-3: var(--surface-3, #1d2533);
-$text-primary: var(--text-primary, #e7ecf3);
-$text-secondary: var(--text-secondary, #9aa3b2);
-$text-tertiary: var(--text-tertiary, #6b7384);
-$accent-blue: var(--accent-blue, #4f8eff);
-$accent-cyan: var(--accent-cyan, #5cd6ff);
-$line: var(--line, rgba(255, 255, 255, 0.06));
-$line-strong: var(--line-strong, rgba(255, 255, 255, 0.1));
-$font-mono: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
-
-.epg-dialog {
-    box-sizing: border-box;
-    width: 540px;
-    max-width: 100%;
-    background: $surface-1;
+// Broadcast control room palette
+$bg-deep: #0a0a0f;
+$bg-surface: #12121a;
+$bg-elevated: #1a1a24;
+$accent-cyan: #00d4aa;
+$accent-purple: #8b5cf6;
+$text-primary: #f8fafc;
+$text-secondary: rgba(248, 250, 252, 0.7);
+$text-muted: rgba(248, 250, 252, 0.4);
+$border-subtle: rgba(255, 255, 255, 0.08);
+
+.program-dialog {
+    background: linear-gradient(180deg, $bg-surface 0%, $bg-deep 100%);
     color: $text-primary;
-    border: 1px solid $line-strong;
-    border-radius: var(--r-lg, 14px);
+    min-width: 380px;
+    max-width: 800px;
+    border-radius: var(--app-radius-xl);
     overflow: hidden;
-    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
+    position: relative;
 
-    * {
-        box-sizing: border-box;
+    // Ambient glow effect
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 120px;
+        background: radial-gradient(
+            ellipse at top center,
+            rgba($accent-cyan, 0.12) 0%,
+            transparent 70%
+        );
+        pointer-events: none;
     }
 }
 
-/* ── hero ── */
-.epg-dialog__hero {
+// Header with time and channel
+.program-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 24px 24px 16px;
     position: relative;
-    height: 132px;
-    display: grid;
-    place-items: center;
-    border-bottom: 1px solid $line;
-    background:
-        radial-gradient(
-            120% 150% at 78% 22%,
-            rgba(110, 60, 180, 0.4),
-            transparent 60%
-        ),
-        radial-gradient(
-            130% 160% at 18% 18%,
-            rgba(30, 40, 70, 0.55),
-            transparent 55%
-        ),
-        #0b0e16;
-
-}
-
-.epg-dialog__hero-glyph {
-    font-size: 40px;
-    width: 40px;
-    height: 40px;
-    color: rgba(255, 255, 255, 0.16);
+    z-index: 1;
 }
 
-.epg-dialog__logo {
-    max-width: 56%;
-    max-height: 76px;
-    object-fit: contain;
-    /* a soft plate so logos on transparent/white art stay legible on the
-       dark gradient */
-    padding: 8px 12px;
-    border-radius: 10px;
-    background: rgba(8, 11, 17, 0.42);
-    backdrop-filter: blur(2px);
+.time-block {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
 }
 
-.epg-dialog__chan {
-    position: absolute;
-    left: 14px;
-    top: 12px;
-    max-width: calc(100% - 64px);
-    display: inline-flex;
+.time-display {
+    display: flex;
     align-items: center;
-    gap: 7px;
-    padding: 5px 11px;
-    border-radius: 999px;
-    background: rgba(8, 11, 17, 0.72);
-    border: 1px solid $line;
-    font-size: 12px;
-    color: $text-secondary;
-    backdrop-filter: blur(6px);
-
-    mat-icon {
-        font-size: 15px;
-        width: 15px;
-        height: 15px;
-        color: $accent-blue;
-        flex: 0 0 auto;
-    }
-}
+    gap: 8px;
+    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
 
-.epg-dialog__chan-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
+    .time-start {
+        color: $accent-cyan;
+        text-shadow: 0 0 20px rgba($accent-cyan, 0.4);
+    }
 
-.epg-dialog__close {
-    position: absolute;
-    right: 12px;
-    top: 12px;
-    width: 30px;
-    height: 30px;
-    display: grid;
-    place-items: center;
-    border: none;
-    border-radius: 8px;
-    background: rgba(8, 11, 17, 0.72);
-    color: $text-secondary;
-    cursor: pointer;
-    backdrop-filter: blur(6px);
-    transition:
-        color 120ms,
-        background 120ms;
-
-    mat-icon {
-        font-size: 18px;
-        width: 18px;
-        height: 18px;
+    .time-separator {
+        color: $text-muted;
+        font-weight: 300;
     }
 
-    &:hover {
-        color: $text-primary;
-        background: $surface-3;
+    .time-end {
+        color: $text-secondary;
     }
 }
 
-/* ── body ── */
-.epg-dialog__body {
-    padding: 18px 22px 22px;
+.date-display {
+    font-size: 13px;
+    color: $text-muted;
+    letter-spacing: 0.02em;
 }
 
-.epg-dialog__meta {
+.channel-badge {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
     gap: 8px;
-    font-family: $font-mono;
-    font-size: 11.5px;
-    color: $text-tertiary;
-    margin-bottom: 10px;
+    padding: 8px 14px;
+    background: rgba($accent-purple, 0.15);
+    border: 1px solid rgba($accent-purple, 0.3);
+    border-radius: var(--app-radius-2xl);
+    font-size: 13px;
+    font-weight: 500;
+    color: $text-primary;
+
+    .channel-icon {
+        font-size: 14px;
+    }
+
+    .channel-name {
+        max-width: 140px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 
-.epg-dialog__dot {
-    width: 3px;
-    height: 3px;
-    border-radius: 50%;
-    background: currentColor;
-    opacity: 0.55;
+// Title section
+.program-title-section {
+    padding: 0 24px 20px;
+    border-bottom: 1px solid $border-subtle;
 }
 
-.epg-dialog__title {
+.program-title {
     margin: 0 0 12px;
-    font-size: 21px;
+    font-size: 22px;
     font-weight: 600;
-    line-height: 1.25;
-    letter-spacing: -0.01em;
+    line-height: 1.3;
     color: $text-primary;
+    letter-spacing: -0.01em;
+}
+
+.category-tag {
+    display: inline-block;
+    padding: 6px 12px;
+    background: rgba($accent-cyan, 0.1);
+    border: 1px solid rgba($accent-cyan, 0.25);
+    border-radius: var(--app-radius-xs);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: $accent-cyan;
+}
+
+// Content section
+.program-content {
+    padding: 20px 24px;
 }
 
-.epg-dialog__desc {
-    margin: 0 0 18px;
+.program-description {
+    margin: 0 0 24px;
     font-size: 14px;
-    line-height: 1.55;
+    line-height: 1.7;
     color: $text-secondary;
 }
 
-/* ── episode / rating tags ── */
-.epg-dialog__tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin: 0 0 20px;
+// Meta grid
+.meta-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 16px;
 }
 
-.epg-dialog__tag {
-    display: inline-flex;
+.meta-item {
+    display: flex;
     flex-direction: column;
-    gap: 2px;
-    padding: 7px 11px;
-    border-radius: 8px;
-    background: $surface-2;
-    border: 1px solid $line;
-    font-size: 13px;
+    gap: 4px;
+    padding: 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: var(--app-radius-sm);
+    border: 1px solid $border-subtle;
+}
+
+.meta-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: $text-muted;
+}
+
+.meta-value {
+    font-size: 14px;
     font-weight: 500;
     color: $text-primary;
 
-    small {
-        font-family: $font-mono;
-        font-size: 9px;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-        color: $text-tertiary;
-    }
-
-    &--rating {
-        color: $accent-cyan;
+    &.rating {
+        color: $accent-purple;
     }
 }
 
-/* ── actions ── */
-.epg-dialog__actions {
+// Footer
+.program-footer {
+    padding: 16px 24px 24px;
     display: flex;
-    align-items: center;
-    gap: 10px;
+    justify-content: flex-end;
 }
 
-.epg-dialog__spacer {
-    flex: 1;
-}
+.close-button {
+    padding: 10px 24px;
+    background: transparent;
+    border: 1px solid rgba($accent-cyan, 0.4);
+    border-radius: var(--app-radius-sm);
+    font-size: 13px;
+    font-weight: 500;
+    color: $accent-cyan;
+    cursor: pointer;
+    transition: all 0.2s ease;
 
-.epg-dialog__note {
-    font-size: 12.5px;
-    color: $text-tertiary;
+    &:hover {
+        background: rgba($accent-cyan, 0.1);
+        border-color: $accent-cyan;
+        box-shadow: 0 0 20px rgba($accent-cyan, 0.2);
+    }
 }
 
-.epg-dialog__btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    height: 40px;
-    padding: 0 16px;
-    border-radius: 10px;
-    border: 1px solid transparent;
-    font: inherit;
-    font-size: 13.5px;
-    font-weight: 600;
-    cursor: pointer;
+// Override Material dialog styling
+::ng-deep .mat-mdc-dialog-container {
+    --mdc-dialog-container-color: transparent;
+    --mdc-dialog-container-shape: 16px;
 
-    mat-icon {
-        font-size: 18px;
-        width: 18px;
-        height: 18px;
+    .mdc-dialog__surface {
+        background: transparent !important;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6),
+                    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
     }
+}
 
-    &--primary {
-        background: $accent-blue;
-        color: #fff;
+// Light theme adjustments
+::ng-deep .light-theme {
+    .program-dialog {
+        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+        color: #1e293b;
+
+        &::before {
+            background: radial-gradient(
+                ellipse at top center,
+                rgba(#059669, 0.08) 0%,
+                transparent 70%
+            );
+        }
+    }
 
-        &:hover {
-            filter: brightness(1.06);
+    .time-display {
+        .time-start {
+            color: #059669;
+            text-shadow: none;
+        }
+        .time-end {
+            color: #64748b;
         }
     }
 
-    &--ghost {
-        background: transparent;
-        color: $text-primary;
-        border-color: $line-strong;
+    .date-display {
+        color: #94a3b8;
+    }
 
-        &:hover {
-            background: $surface-2;
+    .channel-badge {
+        background: rgba(#7c3aed, 0.08);
+        border-color: rgba(#7c3aed, 0.2);
+        color: #1e293b;
+    }
+
+    .program-title {
+        color: #0f172a;
+    }
+
+    .program-title-section {
+        border-bottom-color: rgba(0, 0, 0, 0.06);
+    }
+
+    .category-tag {
+        background: rgba(#059669, 0.08);
+        border-color: rgba(#059669, 0.2);
+        color: #059669;
+    }
+
+    .program-description {
+        color: #475569;
+    }
+
+    .meta-item {
+        background: rgba(0, 0, 0, 0.02);
+        border-color: rgba(0, 0, 0, 0.06);
+    }
+
+    .meta-label {
+        color: #94a3b8;
+    }
+
+    .meta-value {
+        color: #1e293b;
+
+        &.rating {
+            color: #7c3aed;
         }
     }
-}
 
-/* Let the dialog provide its own surface, border and shadow. */
-::ng-deep .mat-mdc-dialog-container {
-    --mdc-dialog-container-color: transparent;
+    .close-button {
+        border-color: rgba(#059669, 0.4);
+        color: #059669;
 
-    .mat-mdc-dialog-surface,
-    .mdc-dialog__surface {
-        background: transparent !important;
-        box-shadow: none !important;
-        border-radius: var(--r-lg, 14px) !important;
-        overflow: visible;
+        &:hover {
+            background: rgba(#059669, 0.08);
+            border-color: #059669;
+            box-shadow: none;
+        }
     }
 }
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
index 4b5787491c..3bf928e145 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
+++ b/libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss
@@ -23,7 +23,7 @@
     gap: 6px;
     min-width: 42px;
     padding: 2px 8px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     font-size: 0.68rem;
     line-height: 1.35;
     font-weight: 700;
@@ -94,7 +94,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     cursor: pointer;
     opacity: 0.7;
     transition:
diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
index 80928cf8c2..978538f17e 100644
--- a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
+++ b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss
@@ -16,7 +16,7 @@
     gap: 8px;
 
     button {
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         opacity: 0.84;
         transition:
             opacity 0.15s ease,
@@ -62,7 +62,7 @@
     gap: 5px;
     padding: 10px 12px;
     border: 1px solid transparent;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: transparent;
     transition:
         background 0.15s ease,
@@ -142,7 +142,7 @@
             inset-block: 12px;
             inset-inline-start: 0;
             width: 3px;
-            border-radius: 999px;
+            border-radius: var(--app-radius-pill);
             background: var(--app-selection-color);
             opacity: 0.48;
             transform: scaleY(0.68);
@@ -221,7 +221,7 @@
     width: 100%;
     height: 6px;
     overflow: hidden;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background-color: rgba(127, 127, 127, 0.28);
     background-image: linear-gradient(
         180deg,
diff --git a/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss
index f3d46d3c2b..7fb5cedb1d 100644
--- a/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss
+++ b/libs/ui/epg/src/lib/epg-progress-panel/epg-progress-panel.component.scss
@@ -27,7 +27,7 @@
     width: 300px;
     max-width: calc(100vw - 96px);
     background: var(--epg-panel-bg);
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     border: 1px solid var(--epg-separator);
     box-shadow:
         0 1px 2px rgba(0, 0, 0, 0.08),
@@ -94,7 +94,7 @@
         height: 28px;
         padding: 0;
         line-height: 28px;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         color: var(--epg-text-tertiary);
 
         mat-icon {
@@ -164,7 +164,7 @@
             height: 24px;
             padding: 0;
             line-height: 24px;
-            border-radius: 6px;
+            border-radius: var(--app-radius-xs);
             opacity: 0;
             transition:
                 opacity 0.15s ease,
@@ -198,7 +198,7 @@
             min-width: 0;
             height: 26px;
             padding: 0 8px;
-            border-radius: 6px;
+            border-radius: var(--app-radius-xs);
             font-size: 0.72rem;
             line-height: 24px;
             white-space: nowrap;
@@ -307,7 +307,7 @@
     align-items: center;
     gap: 8px;
     padding: 3px 6px;
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
     color: var(--epg-text-tertiary);
 
     .queue-position {
diff --git a/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss b/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss
index c18a19769b..7dea2b6dc7 100644
--- a/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss
+++ b/libs/ui/epg/src/lib/epg-source-status/epg-source-status.component.scss
@@ -16,7 +16,7 @@
     align-items: center;
     gap: 4px;
     padding: 2px 8px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.03em;
diff --git a/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss b/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss
index 94bf9af24c..c266833950 100644
--- a/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss
+++ b/libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.scss
@@ -142,7 +142,7 @@ $gradient-header: linear-gradient(
         padding: 0 12px;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid $border-subtle;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         transition: all 0.2s ease;
 
         &:focus-within {
@@ -245,7 +245,7 @@ $gradient-header: linear-gradient(
         padding: 0 12px;
         background: rgba(255, 255, 255, 0.05);
         border: 1px solid $border-subtle;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         transition: all 0.2s ease;
 
         &:focus-within {
@@ -323,7 +323,7 @@ $gradient-header: linear-gradient(
         overflow-y: auto;
         background: $bg-elevated;
         border: 1px solid $border-medium;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
         z-index: 10000;
 
@@ -418,7 +418,7 @@ $gradient-header: linear-gradient(
         padding: 24px 16px;
         background: $bg-elevated;
         border: 1px solid $border-medium;
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
         z-index: 10000;
         display: flex;
diff --git a/libs/ui/playback/src/lib/audio-player/audio-player.component.scss b/libs/ui/playback/src/lib/audio-player/audio-player.component.scss
index 148235b42e..86c8348db1 100644
--- a/libs/ui/playback/src/lib/audio-player/audio-player.component.scss
+++ b/libs/ui/playback/src/lib/audio-player/audio-player.component.scss
@@ -76,7 +76,7 @@
 .artwork {
     max-width: 220px;
     max-height: 220px;
-    border-radius: 18px;
+    border-radius: var(--app-radius-2xl);
     overflow: hidden;
     background: var(--mat-sys-surface-container);
     box-shadow:
@@ -150,7 +150,7 @@
     text-transform: uppercase;
     color: var(--mat-sys-on-surface-variant);
     padding: 3px 12px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     border: 1px solid var(--mat-sys-outline-variant);
     background: color-mix(in srgb, var(--mat-sys-surface-container) 60%, transparent);
     backdrop-filter: blur(6px);
@@ -278,7 +278,7 @@
     .artwork {
         max-width: 160px;
         max-height: 160px;
-        border-radius: 14px;
+        border-radius: var(--app-radius-xl);
 
         img { max-width: 160px; max-height: 160px; }
     }
@@ -292,7 +292,7 @@
     .artwork {
         max-width: 120px;
         max-height: 120px;
-        border-radius: 12px;
+        border-radius: var(--app-radius-lg);
 
         img { max-width: 120px; max-height: 120px; }
     }
diff --git a/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss b/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss
index 94e4fca2d7..1eeb8743e6 100644
--- a/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss
+++ b/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-player.component.scss
@@ -111,7 +111,7 @@
     padding: 10px 18px;
     color: var(--mat-sys-on-surface);
     background: color-mix(in srgb, #000 65%, transparent);
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     font-size: 0.95rem;
     font-variant-numeric: tabular-nums;
     pointer-events: none;
@@ -153,7 +153,7 @@
     color: var(--mat-sys-on-surface);
     background: var(--embedded-mpv-glass);
     border: 1px solid var(--embedded-mpv-border);
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     backdrop-filter: blur(14px);
     font-size: 0.85rem;
     line-height: 1.4;
@@ -313,7 +313,7 @@
 /* WebKit / Chromium — track shows played portion via linear-gradient. */
 .embedded-mpv-player__slider::-webkit-slider-runnable-track {
     height: 4px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: linear-gradient(
         to right,
         var(--embedded-mpv-accent) var(--slider-progress),
@@ -352,13 +352,13 @@
 /* Firefox — native ::-moz-range-progress for played portion. */
 .embedded-mpv-player__slider::-moz-range-track {
     height: 4px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: var(--embedded-mpv-track);
 }
 
 .embedded-mpv-player__slider::-moz-range-progress {
     height: 4px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: var(--embedded-mpv-accent);
 }
 
@@ -388,7 +388,7 @@
     color: var(--mat-sys-on-surface);
     background: var(--embedded-mpv-glass);
     border: 1px solid var(--embedded-mpv-border);
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
     backdrop-filter: blur(18px);
 }
@@ -465,7 +465,7 @@
     color: var(--mat-sys-on-surface);
     background: transparent;
     border: 0;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     cursor: pointer;
     font: inherit;
     text-align: left;
diff --git a/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss b/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss
index 725e9f6899..0e57b9732b 100644
--- a/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss
+++ b/libs/ui/playback/src/lib/portal-inline-player/portal-inline-player.component.scss
@@ -8,7 +8,7 @@
     gap: 14px;
     padding: 18px;
     margin-top: 8px;
-    border-radius: 18px;
+    border-radius: var(--app-radius-2xl);
     border: 1px solid rgba(20, 20, 20, 0.08);
     background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 250, 245, 0.92)),
@@ -74,7 +74,7 @@
     min-height: 320px;
     max-height: min(70vh, 720px);
     aspect-ratio: 16 / 9;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     background: #000;
 }
 
diff --git a/libs/ui/playback/src/lib/portal-inline-player/series-playback-navigation-controls.component.scss b/libs/ui/playback/src/lib/portal-inline-player/series-playback-navigation-controls.component.scss
index c8fd3ae5aa..db3a78fcb9 100644
--- a/libs/ui/playback/src/lib/portal-inline-player/series-playback-navigation-controls.component.scss
+++ b/libs/ui/playback/src/lib/portal-inline-player/series-playback-navigation-controls.component.scss
@@ -14,7 +14,7 @@
     gap: 6px;
     padding: 5px;
     border: 1px solid var(--mat-sys-outline-variant, rgba(255, 255, 255, 0.16));
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: color-mix(
         in srgb,
         var(--mat-sys-surface, #101010) 76%,
diff --git a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss
index c8ecd4a7c5..0357d7c1fe 100644
--- a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss
+++ b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss
@@ -52,7 +52,7 @@ app-html-video-player {
     gap: 8px;
     padding: 5px 11px;
     border: 1px solid rgb(255 174 66 / 42%);
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
     background: rgb(255 148 35 / 15%);
     color: #ffb24c;
     font-size: 0.78rem;
@@ -109,7 +109,7 @@ app-html-video-player {
     margin-top: 12px;
     padding: 4px 8px;
     border: 1px solid rgb(255 255 255 / 12%);
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
     background: rgb(255 255 255 / 5%);
     color: rgb(255 255 255 / 68%);
     font-size: 0.78rem;
@@ -133,7 +133,7 @@ app-html-video-player {
     gap: 12px;
     padding: 12px 16px;
     border: 1px solid rgb(255 255 255 / 13%);
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     background: rgb(0 0 0 / 22%);
     color: #f5f5f5;
     cursor: pointer;
@@ -273,7 +273,7 @@ app-html-video-player {
     margin: 12px 0 0;
     padding: 12px;
     border: 1px solid rgb(255 255 255 / 10%);
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     background: rgb(255 255 255 / 5%);
     color: rgb(255 255 255 / 68%);
     font-size: 0.78rem;
diff --git a/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss b/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss
index da772cebbc..54ef2d4307 100644
--- a/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss
+++ b/libs/ui/remote-control/src/lib/remote-control/remote-control.component.scss
@@ -1,4 +1,7 @@
 :host {
+    // Self-contained tokens — this component ships inside apps/remote-control-web,
+    // a standalone bundle that never loads apps/web/src/m3-theme.scss, so it has
+    // no --app-* variables to read. Keep a fixed dark "device" skin here instead.
     --bg-0: #0a1016;
     --bg-1: #111c26;
     --bg-2: #1c2d3b;
@@ -24,7 +27,11 @@
     justify-content: center;
     background:
         radial-gradient(circle at 12% 8%, rgba(255, 200, 92, 0.18), transparent 35%),
-        radial-gradient(circle at 85% 0%, rgba(46, 196, 255, 0.28), transparent 45%),
+        radial-gradient(
+            circle at 85% 0%,
+            color-mix(in srgb, var(--accent) 28%, transparent),
+            transparent 45%
+        ),
         linear-gradient(145deg, var(--bg-0), var(--bg-1) 58%, var(--bg-2));
     color: var(--ink);
     font-family: 'Avenir Next', 'Trebuchet MS', 'Segoe UI', sans-serif;
@@ -42,7 +49,7 @@
     height: 8px;
     border-radius: 50%;
     background: var(--danger);
-    box-shadow: 0 0 10px rgba(255, 89, 109, 0.7);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 70%, transparent);
 }
 
 .status-dot.is-active {
@@ -56,8 +63,8 @@
     border: 1px solid var(--line);
     background: linear-gradient(
         155deg,
-        rgba(17, 39, 56, 0.92),
-        rgba(15, 29, 42, 0.86)
+        color-mix(in srgb, var(--bg-2) 92%, transparent),
+        color-mix(in srgb, var(--bg-1) 86%, transparent)
     );
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
@@ -103,14 +110,14 @@
 .now-card__program {
     margin-top: 8px;
     font-size: 13px;
-    color: #b6d5ea;
+    color: var(--ink-dim);
 }
 
 .cluster {
     border: 1px solid var(--line);
     border-radius: 18px;
     padding: 10px;
-    background: rgba(9, 21, 31, 0.72);
+    background: color-mix(in srgb, var(--bg-0) 72%, transparent);
 }
 
 .cluster__title {
@@ -128,9 +135,13 @@
     position: relative;
     border-radius: 50%;
     overflow: hidden;
-    border: 1px solid rgba(97, 166, 214, 0.38);
+    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
     background:
-        radial-gradient(circle at 50% 32%, rgba(46, 196, 255, 0.24), transparent 56%),
+        radial-gradient(
+            circle at 50% 32%,
+            color-mix(in srgb, var(--accent) 24%, transparent),
+            transparent 56%
+        ),
         linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.01));
 }
 
@@ -157,6 +168,12 @@
     opacity: 0.45;
 }
 
+.touchpad__button:focus-visible {
+    outline: none;
+    background: var(--accent-soft);
+    box-shadow: inset 0 0 0 2px var(--accent);
+}
+
 .touchpad__button--up {
     top: 0;
 }
@@ -173,8 +190,8 @@
     width: 72px;
     height: 72px;
     border-radius: 50%;
-    border: 1px solid rgba(167, 218, 255, 0.35);
-    background: rgba(9, 23, 34, 0.9);
+    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
+    background: color-mix(in srgb, var(--bg-0) 90%, transparent);
     display: grid;
     place-items: center;
     font-size: 24px;
@@ -184,13 +201,13 @@
 .digit-display {
     margin-bottom: 8px;
     border-radius: 12px;
-    border: 1px dashed rgba(167, 218, 255, 0.5);
+    border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
     padding: 10px;
     text-align: center;
     font-family: 'Courier New', monospace;
     font-size: 20px;
     letter-spacing: 0.16em;
-    color: #d5eeff;
+    color: var(--ink);
 }
 
 .keypad {
@@ -202,8 +219,8 @@
 .keypad__key {
     height: 46px;
     border-radius: 12px;
-    border: 1px solid rgba(167, 218, 255, 0.34);
-    background: rgba(15, 38, 55, 0.84);
+    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
+    background: color-mix(in srgb, var(--bg-1) 84%, transparent);
     color: var(--ink);
     font-size: 16px;
     font-weight: 700;
@@ -211,20 +228,29 @@
 
 .keypad__key:active:not(:disabled) {
     transform: translateY(1px);
-    background: rgba(29, 67, 94, 0.94);
+    background: color-mix(in srgb, var(--bg-2) 94%, transparent);
 }
 
 .keypad__key:disabled {
     opacity: 0.45;
 }
 
+.keypad__key:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--accent);
+}
+
 .keypad__key--alt {
     font-size: 12px;
     letter-spacing: 0.06em;
 }
 
 .keypad__key--go {
-    background: linear-gradient(140deg, #16a8df, #2ec4ff);
+    background: linear-gradient(
+        140deg,
+        var(--accent),
+        color-mix(in srgb, var(--accent) 70%, white 30%)
+    );
     color: #042130;
 }
 
@@ -237,8 +263,8 @@
 .volume-row__button {
     min-height: 40px;
     border-radius: 10px;
-    border: 1px solid rgba(167, 218, 255, 0.34);
-    background: rgba(15, 38, 55, 0.84);
+    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
+    background: color-mix(in srgb, var(--bg-1) 84%, transparent);
     color: var(--ink);
     font-size: 12px;
     font-weight: 700;
@@ -246,25 +272,34 @@
 }
 
 .volume-row__button--mute {
-    border-color: rgba(255, 129, 143, 0.45);
+    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
 }
 
 .volume-row__button:disabled {
     opacity: 0.45;
 }
 
+.volume-row__button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--accent);
+}
+
 .volume-meter {
     margin-top: 10px;
     height: 10px;
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.1);
+    background: color-mix(in srgb, var(--ink) 10%, transparent);
     overflow: hidden;
 }
 
 .volume-meter__fill {
     height: 100%;
     border-radius: inherit;
-    background: linear-gradient(90deg, #1fa8de, #42e8ff);
+    background: linear-gradient(
+        90deg,
+        var(--accent),
+        color-mix(in srgb, var(--accent) 60%, white 40%)
+    );
     transition: width 180ms ease;
 }
 
@@ -276,16 +311,16 @@
 
 .remote__error {
     border-radius: 12px;
-    border: 1px solid rgba(255, 117, 132, 0.5);
-    background: rgba(78, 12, 24, 0.65);
-    color: #ffd9de;
+    border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent);
+    background: color-mix(in srgb, var(--danger) 18%, var(--bg-1));
+    color: var(--ink);
     font-size: 13px;
     padding: 10px 12px;
 }
 
 .remote__footer {
     text-align: center;
-    color: rgba(213, 238, 255, 0.72);
+    color: var(--ink-dim);
     font-size: 12px;
     padding-bottom: 10px;
 }
diff --git a/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss b/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss
index df8a8aa08c..3ae7d5fcb7 100644
--- a/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss
+++ b/libs/ui/shared-portals/src/lib/epg-view/epg-view.component.scss
@@ -36,7 +36,7 @@
     gap: 10px;
     padding: 10px 14px 16px;
     border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     background:
         linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
         rgba(127, 127, 127, 0.045);
@@ -93,7 +93,7 @@
 
 .epg-item__badge {
     padding: 2px 8px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     font-size: 0.68rem;
     line-height: 1.4;
     font-weight: 700;
@@ -108,7 +108,7 @@
     margin-inline-start: auto;
     width: 34px;
     height: 34px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     color: inherit;
     opacity: 0.76;
     transition:
@@ -149,7 +149,7 @@
     width: 100%;
     height: 6px;
     overflow: hidden;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background-color: rgba(127, 127, 127, 0.28);
     background-image: linear-gradient(
         180deg,
@@ -181,7 +181,7 @@
 .epg-empty {
     padding: 22px;
     border: 1px dashed rgba(255, 255, 255, 0.12);
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     text-align: center;
     font-size: 0.88rem;
     opacity: 0.66;
diff --git a/libs/ui/shared-portals/src/lib/live-epg-panel/live-epg-panel.component.scss b/libs/ui/shared-portals/src/lib/live-epg-panel/live-epg-panel.component.scss
index 42fa6a207a..a463c2cbbe 100644
--- a/libs/ui/shared-portals/src/lib/live-epg-panel/live-epg-panel.component.scss
+++ b/libs/ui/shared-portals/src/lib/live-epg-panel/live-epg-panel.component.scss
@@ -33,7 +33,7 @@
 .live-epg-panel__toggle {
     width: 40px;
     height: 40px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     color: var(--mat-sys-on-surface-variant);
     app-region: no-drag;
 
@@ -99,7 +99,7 @@
     min-width: 0;
     height: 36px;
     padding-inline: 10px 12px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     color: var(--app-selection-color);
     background: color-mix(
         in srgb,
@@ -144,7 +144,7 @@
     button {
         width: 40px;
         height: 40px;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
         color: var(--mat-sys-on-surface-variant);
 
         &:hover:not([disabled]) {
@@ -173,7 +173,7 @@
     max-width: 150px;
     height: 36px;
     padding-inline: 10px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     color: var(--mat-sys-on-surface-variant);
     background: color-mix(in srgb, currentColor 7%, transparent);
     app-region: no-drag;
@@ -201,7 +201,7 @@
     bottom: 5px;
     height: 4px;
     overflow: hidden;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: color-mix(in srgb, var(--mat-sys-on-surface) 14%, transparent);
 }
 
diff --git a/libs/ui/styles/_content-grid.scss b/libs/ui/styles/_content-grid.scss
index 096df6fb9b..4dd30f3423 100644
--- a/libs/ui/styles/_content-grid.scss
+++ b/libs/ui/styles/_content-grid.scss
@@ -16,7 +16,7 @@
 
 @mixin content-card {
     cursor: pointer;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     overflow: hidden;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 
@@ -28,7 +28,7 @@
 
 @mixin thumbnail-wrapper {
     position: relative;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     overflow: hidden;
 
     .poster {
diff --git a/libs/ui/styles/_detail-view-actions.scss b/libs/ui/styles/_detail-view-actions.scss
index 46cfe6e580..13c8d45d17 100644
--- a/libs/ui/styles/_detail-view-actions.scss
+++ b/libs/ui/styles/_detail-view-actions.scss
@@ -44,7 +44,7 @@
     background: rgba(255, 255, 255, 0.08);
     color: var(--text-primary, #fff);
     border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     cursor: pointer;
     transition: all 0.2s ease;
 
diff --git a/libs/ui/styles/_detail-view.scss b/libs/ui/styles/_detail-view.scss
index e4b248f005..7c4713fcaf 100644
--- a/libs/ui/styles/_detail-view.scss
+++ b/libs/ui/styles/_detail-view.scss
@@ -181,7 +181,7 @@
         background-position: 0% 50%;
         color: var(--play-btn-fg);
         border: 1px solid var(--play-btn-border);
-        border-radius: 16px;
+        border-radius: var(--app-radius-xl);
         box-shadow: var(--play-btn-shadow);
         cursor: pointer;
         transition:
@@ -257,7 +257,7 @@
             justify-content: center;
             width: 34px;
             height: 34px;
-            border-radius: 999px;
+            border-radius: var(--app-radius-pill);
             background: var(--play-icon-shell-bg);
             border: 1px solid var(--play-icon-shell-border);
             box-shadow:
@@ -490,7 +490,7 @@
             width: 100%;
             max-width: 560px;
             aspect-ratio: 16 / 9;
-            border-radius: 8px;
+            border-radius: var(--app-radius-sm);
             overflow: hidden;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
diff --git a/libs/ui/styles/_panel-header.scss b/libs/ui/styles/_panel-header.scss
index 0738bf2447..fa4283c401 100644
--- a/libs/ui/styles/_panel-header.scss
+++ b/libs/ui/styles/_panel-header.scss
@@ -55,6 +55,6 @@
     color: $color;
     background: $background;
     padding: $padding;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     flex-shrink: 0;
 }
\ No newline at end of file
diff --git a/libs/ui/styles/_portal-sidebar.scss b/libs/ui/styles/_portal-sidebar.scss
index 44813b4277..51448cfc17 100644
--- a/libs/ui/styles/_portal-sidebar.scss
+++ b/libs/ui/styles/_portal-sidebar.scss
@@ -73,7 +73,7 @@
             color: var(--mat-sys-on-surface-variant);
             background: var(--mat-sys-surface-container);
             padding: 2px 8px;
-            border-radius: 999px;
+            border-radius: var(--app-radius-pill);
         }
     }
 }
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
index b459f7d29a..73eb09e6b7 100644
--- a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
+++ b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss
@@ -2,7 +2,7 @@
     display: block;
     --rail-card-width: var(--cover-rail-width, 172px);
     --rail-gap: var(--cover-gap, 14px);
-    --rail-radius: 12px;
+    --rail-radius: var(--app-radius-lg);
 }
 
 .rail {
@@ -38,7 +38,7 @@
     align-items: center;
     gap: 2px;
     padding: 4px 8px 4px 10px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     font-size: 0.78rem;
     font-weight: 500;
     line-height: 1;
@@ -544,7 +544,7 @@
     flex: 0 0 auto;
     width: 40px;
     height: 40px;
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     background: var(--app-content-bg, #161a22);
     display: flex;
     align-items: center;
diff --git a/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss
index e5af99b7e9..8ff1e3e2dc 100644
--- a/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss
+++ b/libs/workspace/dashboard/feature/src/lib/rails/workspace-dashboard-rails.component.scss
@@ -44,7 +44,7 @@
     padding: 16px;
     text-decoration: none;
     color: inherit;
-    border-radius: 18px;
+    border-radius: var(--app-radius-2xl);
     overflow: hidden;
     isolation: isolate;
     background: var(--app-widget-header-bg, #232840);
@@ -188,7 +188,7 @@
     z-index: 2;
     width: var(--hero-poster-width);
     aspect-ratio: 2 / 3;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     overflow: hidden;
     background: var(--app-widget-bg, #1e2330);
     border: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.1));
@@ -380,7 +380,7 @@
     display: block;
     height: 4px;
     overflow: hidden;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: color-mix(
         in srgb,
         var(--app-on-surface, #e6e1e5) 14%,
@@ -417,7 +417,7 @@
     margin-top: 12px;
     height: 4px;
     width: min(320px, 70%);
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: color-mix(
         in srgb,
         var(--app-on-surface, #e6e1e5) 14%,
@@ -434,7 +434,7 @@
     display: block;
     height: 100%;
     background: var(--app-selection-color, #78adff);
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     transition: width 0.4s ease;
 }
 
@@ -465,7 +465,7 @@
     align-items: center;
     gap: 6px;
     padding: 10px 20px 10px 14px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: var(--app-selection-color, #78adff);
     color: var(--app-selection-on-color, #071225);
     font-size: 0.875rem;
@@ -518,7 +518,7 @@
     grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
     gap: 24px;
     padding: 20px;
-    border-radius: 18px;
+    border-radius: var(--app-radius-2xl);
     background: var(--app-widget-header-bg, #232840);
     border: 1px solid var(--app-widget-header-border, rgba(255, 255, 255, 0.08));
 }
@@ -527,7 +527,7 @@
     @extend %skeleton-shimmer;
     width: 160px;
     aspect-ratio: 2 / 3;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     align-self: center;
 }
 
@@ -543,7 +543,7 @@
     @extend %skeleton-shimmer;
     width: 60%;
     height: 28px;
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
 }
 
 .rails-page__skeleton-hero-title--short {
@@ -562,7 +562,7 @@
     @extend %skeleton-shimmer;
     width: 160px;
     height: 36px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     margin-top: 14px;
 }
 
@@ -578,7 +578,7 @@
     @extend %skeleton-shimmer;
     width: 180px;
     height: 22px;
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
 }
 
 .rails-page__skeleton-track {
@@ -595,7 +595,7 @@
     flex: 0 0 var(--cover-rail-width, 172px);
     width: var(--cover-rail-width, 172px);
     aspect-ratio: 2 / 3;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss
index 6cb095d90c..eae77bd47f 100644
--- a/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss
+++ b/libs/workspace/shell/feature/src/lib/global-favorites/global-favorites-list.component.scss
@@ -24,7 +24,7 @@
 }
 
 :host ::ng-deep .search-bar div {
-    border-radius: 20px;
+    border-radius: var(--app-radius-2xl);
 }
 
 :host ::ng-deep .search-bar div[matformfieldlineripple],
diff --git a/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss
index 7dd81dfe27..9100c269c8 100644
--- a/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss
+++ b/libs/workspace/shell/feature/src/lib/playlist-drop-overlay/playlist-drop-overlay.component.scss
@@ -38,7 +38,7 @@
         rgba(37, 99, 235, 0.08)
     );
     border: 2px dashed rgba(96, 165, 250, 0.55);
-    border-radius: 18px;
+    border-radius: var(--app-radius-2xl);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
     color: #f1f5f9;
     animation: drop-overlay-scale 0.18s ease-out;
@@ -64,7 +64,7 @@
     justify-content: center;
     width: 64px;
     height: 64px;
-    border-radius: 18px;
+    border-radius: var(--app-radius-2xl);
     background: linear-gradient(135deg, #3b82f6, #2563eb);
     box-shadow: 0 8px 22px rgba(59, 130, 246, 0.45);
     margin-bottom: 4px;
diff --git a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss
index d1ac130d1c..dcc6d6af98 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.scss
@@ -10,7 +10,7 @@
     background: var(--app-widget-bg);
     color: var(--mat-sys-on-surface);
     border: 1px solid var(--app-separator);
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     box-shadow:
         0 24px 48px -28px rgba(0, 0, 0, 0.5),
         0 10px 24px -18px rgba(0, 0, 0, 0.35);
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
index 01c9565452..8a6cb4b490 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/components/workspace-context-category-view.component.scss
@@ -13,7 +13,7 @@
 .context-inline-status {
     margin: 0 4px 8px;
     padding: 8px 12px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: color-mix(
         in srgb,
         var(--app-selection-surface, var(--mat-sys-surface-container)) 72%,
@@ -49,7 +49,7 @@
     overflow: hidden;
     width: 22px;
     height: 10px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: color-mix(
         in srgb,
         var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 52%,
diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
index e2e03a3f5c..2802e26eed 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss
@@ -32,6 +32,10 @@
         font-weight: 600;
         letter-spacing: -0.01em;
         color: var(--mat-sys-on-surface);
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 }
 
@@ -71,7 +75,7 @@
     gap: 4px;
     margin-top: 5px;
     padding: 2px 0;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: var(--mat-sys-surface-container);
     color: var(--mat-sys-on-surface-variant);
     font-size: 0.72rem;
@@ -98,7 +102,7 @@
     margin: 0 6px 6px;
     padding: 0 10px;
     min-height: 36px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
     background: var(--app-search-bg, var(--mat-sys-surface-container));
     flex-shrink: 0;
@@ -194,7 +198,7 @@ app-workspace-context-category-view {
     gap: 10px;
     min-height: 36px;
     padding: 0 10px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     background: color-mix(
         in srgb,
         var(--app-widget-header-bg, var(--mat-sys-surface-container-high)) 88%,
@@ -242,19 +246,19 @@ app-workspace-context-category-view {
 .context-skeleton__dot {
     width: 12px;
     height: 12px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
 }
 
 .context-skeleton__label {
     height: 9px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
 }
 
 .context-skeleton__count {
     justify-self: end;
     width: 22px;
     height: 9px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
 }
 
 @keyframes context-skeleton-shimmer {
diff --git a/libs/workspace/shell/feature/src/lib/workspace-keyboard-shortcuts/workspace-keyboard-shortcuts-dialog.component.scss b/libs/workspace/shell/feature/src/lib/workspace-keyboard-shortcuts/workspace-keyboard-shortcuts-dialog.component.scss
index 84943135ca..1926ee7569 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-keyboard-shortcuts/workspace-keyboard-shortcuts-dialog.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-keyboard-shortcuts/workspace-keyboard-shortcuts-dialog.component.scss
@@ -40,7 +40,7 @@
         ),
         var(--shortcut-surface);
     border: 1px solid var(--shortcut-border);
-    border-radius: 16px;
+    border-radius: var(--app-radius-xl);
     box-shadow: 0 22px 70px color-mix(in srgb, black 34%, transparent);
     overflow: hidden;
 }
@@ -71,7 +71,7 @@
     background: color-mix(in srgb, var(--shortcut-accent) 14%, transparent);
     border: 1px solid
         color-mix(in srgb, var(--shortcut-accent) 28%, transparent);
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
 
     mat-icon {
         width: 24px;
@@ -115,7 +115,7 @@
         var(--shortcut-surface) 18%
     );
     border: 1px solid var(--shortcut-border);
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     font-size: 0.76rem;
     font-weight: 650;
     line-height: 1;
@@ -147,7 +147,7 @@
     min-width: 0;
     background: var(--shortcut-panel-bg);
     border: 1px solid var(--shortcut-border);
-    border-radius: 8px;
+    border-radius: var(--app-radius-sm);
     overflow: hidden;
 }
 
@@ -267,7 +267,7 @@
     color: var(--shortcut-text);
     background: var(--shortcut-key-bg);
     border: 1px solid var(--shortcut-border);
-    border-radius: 6px;
+    border-radius: var(--app-radius-xs);
     box-shadow:
         inset 0 -2px 0 var(--shortcut-key-shadow),
         0 1px 0 color-mix(in srgb, white 28%, transparent);
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss
index d71915cd30..19bf9d03c3 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss
@@ -57,3 +57,37 @@
     min-height: 0;
     overflow: hidden;
 }
+
+// ─── Responsive behaviour ──────────────────────────────────────────────────
+// ResizableDirective writes the panel width as an inline style, which a plain
+// `width` rule can never override. `max-width` is NOT set inline, so it still
+// reins the panel in on narrow windows: the sidebar keeps its user-chosen
+// width until the window gets tight, then gracefully shrinks. Padding and gap
+// tighten in step so labels stay readable (nav rows already ellipsis-truncate).
+@media (max-width: 1024px) {
+    .context-panel {
+        max-width: 42vw;
+    }
+}
+
+@media (max-width: 780px) {
+    .context-panel {
+        max-width: 36vw;
+        padding: 10px 8px;
+        gap: 4px;
+    }
+
+    .context-panel--route,
+    .context-panel--sources {
+        padding: 10px 8px 8px 10px;
+    }
+}
+
+@media (max-width: 640px) {
+    // Shell stacks the rail/header/body vertically here; keep the sidebar
+    // usable but compact so the content pane keeps most of the width.
+    .context-panel {
+        max-width: 46vw;
+        padding: 8px;
+    }
+}
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss
index 83c610edcb..d85bf4ca60 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss
@@ -25,7 +25,7 @@
     min-width: 160px;
     max-width: 560px;
     height: 36px;
-    border-radius: 10px;
+    border-radius: var(--app-radius-md);
     border: 1px solid var(--app-search-border, var(--mat-sys-outline-variant));
     background: var(--app-search-bg, var(--mat-sys-surface-container));
     display: flex;
@@ -56,7 +56,7 @@
         max-width: 200px;
         padding: 0 10px;
         height: 24px;
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -171,7 +171,7 @@
     button,
     a {
         color: var(--mat-sys-on-surface-variant);
-        border-radius: 8px;
+        border-radius: var(--app-radius-sm);
         transition:
             color 0.15s ease,
             background 0.15s ease;
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-import-overlay/workspace-shell-import-overlay.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-import-overlay/workspace-shell-import-overlay.component.scss
index 2976f683ac..306ed0b742 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-import-overlay/workspace-shell-import-overlay.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-import-overlay/workspace-shell-import-overlay.component.scss
@@ -25,7 +25,7 @@
     display: grid;
     gap: 14px;
     padding: 24px 24px 20px;
-    border-radius: 24px;
+    border-radius: var(--app-radius-2xl);
     border: 1px solid var(--app-separator, rgba(255, 255, 255, 0.12));
     background:
         linear-gradient(
@@ -60,7 +60,7 @@
     align-items: center;
     justify-content: center;
     padding: 6px 12px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     border: 1px solid rgba(120, 220, 255, 0.24);
     background: rgba(120, 220, 255, 0.08);
     color: rgba(164, 233, 255, 1);
@@ -107,12 +107,12 @@
 .workspace-loading-overlay__action {
     justify-self: center;
     min-width: 180px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
 }
 
 :host ::ng-deep .workspace-loading-overlay__card .mat-mdc-progress-bar {
     overflow: hidden;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
 }
 
 @keyframes workspace-loading-overlay-enter {
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
index 802f2e6689..2f15efa988 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss
@@ -17,7 +17,7 @@
     height: 44px;
     padding: 0;
     gap: 0;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -93,7 +93,7 @@
     transform: translateY(-50%);
     width: 4px;
     height: 20px;
-    border-radius: 999px;
+    border-radius: var(--app-radius-pill);
     background: var(--rail-link-active-icon, var(--app-selection-color));
     box-shadow: 0 0 10px var(--rail-link-active-glow, var(--app-selection-glow));
 }
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
index eb6610c47c..bd06f6bf82 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss
@@ -41,7 +41,7 @@
 .app-rail a {
     width: 44px;
     height: 44px;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -92,7 +92,7 @@
         transform: translateY(-50%);
         width: 3px;
         height: 18px;
-        border-radius: 999px;
+        border-radius: var(--app-radius-pill);
         background: var(--rail-link-active-icon);
         box-shadow: 0 0 10px var(--rail-link-active-glow);
     }
@@ -104,7 +104,7 @@
     color: var(--mat-sys-on-primary-container);
     width: 40px;
     height: 40px;
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -126,7 +126,7 @@
     max-width: 48px;
     padding: 5px 2px;
     margin: 4px 0;
-    border-radius: 14px;
+    border-radius: var(--app-radius-xl);
     background: color-mix(in srgb, var(--app-on-surface) 3%, transparent);
     border: 1px solid color-mix(in srgb, var(--app-on-surface) 4%, transparent);
     position: relative;
@@ -190,7 +190,7 @@
         height: 44px;
         padding: 0;
         gap: 0;
-        border-radius: 14px;
+        border-radius: var(--app-radius-xl);
         position: relative;
         display: inline-flex;
         align-items: center;
@@ -217,7 +217,7 @@
             transform: translateY(-50%);
             width: 4px;
             height: 20px;
-            border-radius: 999px;
+            border-radius: var(--app-radius-pill);
             background: var(--app-selection-color);
             box-shadow: 0 0 10px var(--app-selection-glow);
         }
@@ -248,7 +248,7 @@
         flex-direction: row;
         margin: 0;
         padding: 2px 4px;
-        border-radius: 10px;
+        border-radius: var(--app-radius-md);
 
         &::before {
             display: none;
diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
index 39156e85df..a728277671 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss
@@ -61,7 +61,7 @@ app-workspace-shell-context-sidebar {
     min-height: 0;
     overflow: auto;
     background: var(--app-content-bg, var(--mat-sys-surface));
-    border-radius: 16px 0 0 0;
+    border-radius: var(--app-radius-xl) 0 0 0;
     box-shadow: -4px 8px 20px var(--app-content-shadow, rgba(0, 0, 0, 0.18));
 }
 
diff --git a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss
index 8c0df9dec0..7a4f7e5be5 100644
--- a/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss
+++ b/libs/workspace/shell/feature/src/lib/workspace-sources-filters-panel/workspace-sources-filters-panel.component.scss
@@ -63,7 +63,7 @@
 }
 
 .option-row {
-    border-radius: 12px;
+    border-radius: var(--app-radius-lg);
     transition:
         box-shadow 0.18s ease,
         transform 0.18s ease;

From 9d641acef0a38f02bcf9cb4ffcf20b0a922d977e Mon Sep 17 00:00:00 2001
From: Pavel <paveljevstignejev@gmail.com>
Date: Wed, 1 Jul 2026 22:43:10 +0300
Subject: [PATCH 2/2] fix(web): stop keydown bubbling from triggering row
 activation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enter/Space on channel-list-item and season-container's episode
cards was bound at the row/article level, so the event also fired
when a descendant action button (favorite, info, aux, download,
toggle-watched) had keyboard focus — pressing Space to toggle a
favorite also selected/activated the row underneath it. Guard both
handlers on event.target === event.currentTarget so only the row
itself (not a bubbled child event) triggers activation.

Also switch channel-list-item's aria-pressed to aria-current: the
row isn't a toggle button, it's the current item in a list, and
aria-pressed misleadingly implies it can be un-pressed.

Found by Greptile review on the PR.
---
 .../channel-list-item.component.html          |  2 +-
 .../channel-list-item.component.spec.ts       | 17 ++++++++++++++++
 .../channel-list-item.component.ts            |  6 ++++++
 .../season-container.component.html           | 14 +++++++------
 .../season-container.component.spec.ts        | 20 +++++++++++++++++++
 .../season-container.component.ts             | 12 +++++++++++
 6 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
index 8d4c1a71e8..fcfdbdec3d 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.html
@@ -8,7 +8,7 @@
     role="button"
     tabindex="0"
     [attr.aria-label]="name()"
-    [attr.aria-pressed]="selected()"
+    [attr.aria-current]="selected() || null"
     (click)="onClick($event)"
     (dblclick)="onDoubleClick()"
     (contextmenu)="onContextMenu($event)"
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
index c489ddce76..7b613409e8 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.spec.ts
@@ -137,6 +137,23 @@ describe('ChannelListItemComponent', () => {
         expect(clicked).toHaveBeenCalledTimes(1);
     });
 
+    it('does not activate the row when a keydown bubbles up from a descendant action button', () => {
+        fixture.componentRef.setInput('name', 'Cartoon Network');
+        fixture.componentRef.setInput('showFavoriteButton', true);
+        fixture.detectChanges();
+
+        const clicked = jest.fn();
+        fixture.componentInstance.clicked.subscribe(clicked);
+
+        const favoriteButton: HTMLElement =
+            fixture.nativeElement.querySelector('.favorite-button');
+        favoriteButton.dispatchEvent(
+            new KeyboardEvent('keydown', { key: ' ', bubbles: true })
+        );
+
+        expect(clicked).not.toHaveBeenCalled();
+    });
+
     it('emits a context menu request on right click when details are enabled', () => {
         fixture.componentRef.setInput('name', 'News One');
         fixture.componentRef.setInput('showDetailsContextMenu', true);
diff --git a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
index 207c6d382f..0e356ea76f 100644
--- a/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
+++ b/libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.ts
@@ -97,6 +97,12 @@ export class ChannelListItemComponent {
     }
 
     onKeydownActivate(event: Event): void {
+        if (event.target !== event.currentTarget) {
+            // Ignore Enter/Space bubbling up from a descendant action button
+            // (favorite, info, aux) — it has its own click/keyboard handling.
+            return;
+        }
+
         event.preventDefault();
         this.clicked.emit();
     }
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.html b/libs/ui/components/src/lib/season-container/season-container.component.html
index ecf3a23f5a..837dd2674c 100644
--- a/libs/ui/components/src/lib/season-container/season-container.component.html
+++ b/libs/ui/components/src/lib/season-container/season-container.component.html
@@ -98,10 +98,11 @@ <h4 class="empty-state-panel__title">This season is empty</h4>
                             role="button"
                             tabindex="0"
                             (click)="selectEpisode(episode)"
-                            (keydown.enter)="selectEpisode(episode)"
+                            (keydown.enter)="
+                                onEpisodeKeydownActivate($event, episode)
+                            "
                             (keydown.space)="
-                                $event.preventDefault();
-                                selectEpisode(episode)
+                                onEpisodeKeydownActivate($event, episode)
                             "
                             [class.episode-card--watched]="
                                 isEpisodeWatched(episode)
@@ -268,10 +269,11 @@ <h4 class="episode-card__title">
                             role="button"
                             tabindex="0"
                             (click)="selectEpisode(episode)"
-                            (keydown.enter)="selectEpisode(episode)"
+                            (keydown.enter)="
+                                onEpisodeKeydownActivate($event, episode)
+                            "
                             (keydown.space)="
-                                $event.preventDefault();
-                                selectEpisode(episode)
+                                onEpisodeKeydownActivate($event, episode)
                             "
                             [class.episode-list-item--watched]="
                                 isEpisodeWatched(episode)
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.spec.ts b/libs/ui/components/src/lib/season-container/season-container.component.spec.ts
index 3788fbb4df..3465895d76 100644
--- a/libs/ui/components/src/lib/season-container/season-container.component.spec.ts
+++ b/libs/ui/components/src/lib/season-container/season-container.component.spec.ts
@@ -141,6 +141,26 @@ describe('SeasonContainerComponent', () => {
         ).toBeNull();
     });
 
+    it('does not select the episode when a keydown bubbles up from a descendant action button', () => {
+        const episode = createEpisode();
+        setRequiredInputs({ '1': [episode] });
+        fixture.detectChanges();
+
+        fixture.nativeElement.querySelector('.season-card').click();
+        fixture.detectChanges();
+
+        const episodeClicked = jest.fn();
+        component.episodeClicked.subscribe(episodeClicked);
+
+        const toggleWatchedButton: HTMLElement =
+            fixture.nativeElement.querySelector('.toggle-watched-btn');
+        toggleWatchedButton.dispatchEvent(
+            new KeyboardEvent('keydown', { key: ' ', bubbles: true })
+        );
+
+        expect(episodeClicked).not.toHaveBeenCalled();
+    });
+
     it('clears a stale selected season when the input seasons change', () => {
         const episode = createEpisode();
 
diff --git a/libs/ui/components/src/lib/season-container/season-container.component.ts b/libs/ui/components/src/lib/season-container/season-container.component.ts
index 4c4a25fd01..222acfb327 100644
--- a/libs/ui/components/src/lib/season-container/season-container.component.ts
+++ b/libs/ui/components/src/lib/season-container/season-container.component.ts
@@ -153,6 +153,18 @@ export class SeasonContainerComponent implements OnInit, DoCheck {
         this.episodeClicked.emit(episode);
     }
 
+    onEpisodeKeydownActivate(event: Event, episode: XtreamSerieEpisode): void {
+        if (event.target !== event.currentTarget) {
+            // Ignore Enter/Space bubbling up from a descendant action button
+            // (download, play-local, toggle-watched) — it has its own click
+            // and keyboard handling.
+            return;
+        }
+
+        event.preventDefault();
+        this.selectEpisode(episode);
+    }
+
     toggleWatched(event: Event, episode: XtreamSerieEpisode) {
         event.stopPropagation();
         if (!this.playlistId()) {