refactor(epg): align program-item styling with channel-list aesthetic

Drop the gradient + bevel + drop-shadow chrome from EPG rows so the panel
speaks the same flat-by-default visual language as the channel list. Add
--app-live-color token, tokenise the LIVE badge, tighten typography
(weight 600, text-wrap balance/pretty), and bump the info icon to 32px
for Fitts-compliant hit area.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Entire-Checkpoint: 4cc5371f549e

apps/web/src/m3-theme.scss

@@ -80,6 +80,9 @@ html {
         transparent
     );
 
+    // Live / on-air accent (broadcast indicator)
+    --app-live-color: #d12c2c;
+
     // Content area
     --app-content-shadow: -2px 4px 12px rgba(0, 0, 0, 0.06);
 
@@ -152,6 +155,9 @@ html {
             transparent
         );
 
+        // Live / on-air accent (broadcast indicator)
+        --app-live-color: #ff8f8f;
+
         // Content area
         --app-content-shadow: -4px 8px 20px rgba(0, 0, 0, 0.18);
 

libs/ui/epg/src/lib/epg-list/epg-list-item/epg-list-item.component.scss

@@ -33,9 +33,9 @@
 }
 
 .live {
-    color: #ff8f8f;
-    background: rgba(255, 95, 95, 0.12);
-    border-color: rgba(255, 95, 95, 0.28);
+    color: var(--app-live-color);
+    background: color-mix(in srgb, var(--app-live-color) 14%, transparent);
+    border-color: color-mix(in srgb, var(--app-live-color) 32%, transparent);
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }
@@ -76,18 +76,17 @@
 
 .description-icon {
     margin-inline-start: auto;
-    width: 30px;
-    height: 30px;
+    width: 32px;
+    height: 32px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 9px;
+    border-radius: 10px;
     cursor: pointer;
     opacity: 0.7;
     transition:
         opacity 0.15s ease,
-        background-color 0.15s ease,
-        transform 0.15s ease;
+        background-color 0.15s ease;
 
     mat-icon {
         width: 18px;
@@ -98,6 +97,5 @@
     &:hover {
         opacity: 1;
         background: color-mix(in srgb, currentColor 10%, transparent);
-        transform: translateY(-1px);
     }
 }

libs/ui/epg/src/lib/epg-list/epg-list.component.scss

@@ -49,40 +49,48 @@
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: 10px 10px 14px;
+    padding: 8px 8px 12px;
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 4px;
 }
 
 .program-item {
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    padding: 12px 14px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 14px;
-    background:
-        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
-        rgba(127, 127, 127, 0.045);
-    box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.04),
-        0 10px 20px -20px rgba(0, 0, 0, 0.35);
+    gap: 6px;
+    padding: 10px 12px;
+    border: 1px solid transparent;
+    border-radius: 12px;
+    background: transparent;
     transition:
         background 0.15s ease,
         border-color 0.15s ease,
         box-shadow 0.18s ease,
-        transform 0.18s ease;
+        color 0.15s ease;
     cursor: default;
 
+    &.current-program {
+        background: color-mix(
+            in srgb,
+            var(--app-selection-color) 6%,
+            transparent
+        );
+    }
+
     &.clickable {
         cursor: pointer;
 
         &:hover {
-            background:
-                linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
-                rgba(127, 127, 127, 0.065);
-            transform: translateY(-1px);
+            background: color-mix(in srgb, currentColor 6%, transparent);
+        }
+
+        &.current-program:hover {
+            background: color-mix(
+                in srgb,
+                var(--app-selection-color) 10%,
+                transparent
+            );
         }
     }
 
@@ -112,8 +120,8 @@
 .program-title {
     font-size: 0.94rem;
     line-height: 1.4;
-    font-weight: 560;
-    letter-spacing: 0.005em;
+    font-weight: 600;
+    text-wrap: balance;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -124,7 +132,8 @@
 .epg-item__description {
     font-size: 0.82rem;
     line-height: 1.4;
-    opacity: 0.74;
+    color: var(--app-muted-color);
+    text-wrap: pretty;
     display: -webkit-box;
     overflow: hidden;
     -webkit-line-clamp: 2;
@@ -172,9 +181,9 @@
 .epg-not-available {
     margin: auto 10px;
     padding: 22px;
-    border: 1px dashed rgba(255, 255, 255, 0.12);
-    border-radius: 14px;
+    border: 1px dashed var(--app-separator);
+    border-radius: 12px;
     text-align: center;
     font-size: 0.88rem;
-    opacity: 0.66;
+    color: var(--app-muted-color);
 }