refactor(multi-epg): match app theme, widen channels, label the now-line

Four UX-audit fixes for the Multi-channel EPG view:

1. Theme harmonization
   - $bg-deep / $bg-surface / $bg-elevated / $bg-hover now resolve through
     --app-content-bg / --app-widget-bg / --app-widget-header-bg /
     --app-card-hover-bg. Multi-EPG was the only screen that switched to
     near-black (#0a0a0f) instead of sitting on the app's dark surface, so
     the audit described it as "visually detaching from the rest of the
     app". It now inherits the same dark graphite chain.
   - Cleaned up 29 remaining hard-coded rgba(139,92,246,…) purples and
     rgba(0,212,170,…) teal accents that survived the earlier color
     unification commit. Purple shadows/glows are gone; the cyan glow
     used by the now-line is now driven by the unified $5cd6ff token.

2. Channel column widened 140px → 180px
   - Long names like "13th Street Universal HD" no longer truncate to 5
     characters. Logo size dropped to 24px so the name actually has room.
     The label allows up to two lines and wraps cleanly on long titles.
   - Responsive breakpoint mirrors the change: 100px → 140px at <768px.

3. Now-line time badge
   - New `currentTimeLabel` computed signal renders an "HH:MM" pill
     pinned to the top of the now-line. Recomputes on the same 60s tick
     as the line position so they always stay in lockstep.

4. "Airing now" program highlight
   - New `isProgramAiringNow(program)` returns true when the now-line's
     x-coordinate falls inside [startPosition, startPosition + width].
     Programs that match get a .is-now class → 1.5px cyan border. Users
     can now see what's on every channel at a glance without tracing the
     line down each row.

Toolbar harmonization (audit item 3 for this screen) intentionally
deferred — that's part of the app-wide toolbar unification work.

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

libs/ui/epg/src/lib/multi-epg/multi-epg-container.component.html

@@ -123,16 +123,16 @@
   <svg id="channels-column" [attr.height]="filteredChannels().length * barHeight + barHeight + 50">
     @for (item of filteredChannels(); track item.id; let i = $index) {
       <g>
-        <!-- channel name -->
+        <!-- channel name (column widened to 180px per UX audit) -->
         <g class="channel" [class.active]="item.id === activeChannelId">
           <rect
-            width="100"
+            width="180"
             [attr.height]="barHeight"
             [attr.y]="barHeight * i + barHeight"
             stroke="black"
             />
           <foreignObject
-            width="100"
+            width="180"
             [attr.height]="barHeight"
             [attr.y]="barHeight * i + barHeight"
             >
@@ -141,7 +141,6 @@
                 <img
                   [src]="getChannelIcon(item)"
                   [alt]="getChannelName(item)"
-                  style="height: 20px; width: 20px; margin-right: 8px;"
                   >
               }
               <span>{{ getChannelName(item) }}</span>
@@ -191,6 +190,7 @@
               [attr.transform]="'translate(' + program.startPosition + ',' + (barHeight * i + barHeight) + ')'"
               class="program"
               [class.highlighted]="highlightedProgramKey() === getProgramKey(program)"
+              [class.is-now]="isProgramAiringNow(program)"
               (click)="showDescription(program)"
               >
               <rect
@@ -209,7 +209,10 @@
         </g>
       }
 
-      <!-- current time line -->
+      <!-- current time line + label badge.
+           The badge sits on top of the time-header row so users can read the
+           current time at a glance — addresses the UX-audit complaint that
+           the now-line was a "decorative gradient" without a time anchor. -->
       <line
         [attr.x1]="currentTimeLine()"
         y1="0"
@@ -217,7 +220,19 @@
         [attr.y2]="filteredChannels().length * barHeight + barHeight"
         stroke="red"
         stroke-width="2"
+        id="current-time-line"
       ></line>
+      <g class="now-label" [attr.transform]="'translate(' + currentTimeLine() + ', ' + (barHeight - 14) + ')'">
+        <rect
+          x="-26"
+          y="-9"
+          width="52"
+          height="18"
+          rx="9"
+          ry="9"
+        ></rect>
+        <text x="0" y="4" text-anchor="middle">{{ currentTimeLabel() }}</text>
+      </g>
     </svg>
   </div>
 </div>