Enhance dashboard: richer continue watching cards, color-coded stats, styled poster fallback

- Continue Watching cards now show episode still images in 16:9 aspect
  with overlaid episode info, play button, and progress bar
- Stats section uses per-stat color coding (primary/watching/watchlist/completed)
  with icon background pills and tabular-nums alignment
- No-poster fallback replaced with textured gradient + title text overlay
- Updated ContinueWatchingItem interface to include backdropPath, stillPath, overview

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

components/stats-summary.tsx

@@ -21,21 +21,29 @@ const statDefs = [
     key: "moviesThisMonth" as const,
     label: "Movies This Month",
     icon: IconMovie,
+    color: "text-primary",
+    bgColor: "bg-primary/10",
   },
   {
     key: "episodesThisWeek" as const,
     label: "Episodes This Week",
     icon: IconPlayerPlay,
+    color: "text-status-watching",
+    bgColor: "bg-status-watching/10",
   },
   {
     key: "librarySize" as const,
     label: "In Library",
     icon: IconLibrary,
+    color: "text-status-watchlist",
+    bgColor: "bg-status-watchlist/10",
   },
   {
     key: "completed" as const,
     label: "Completed",
     icon: IconCheck,
+    color: "text-status-completed",
+    bgColor: "bg-status-completed/10",
   },
 ];
 
@@ -70,13 +78,17 @@ export function StatsSummary() {
             className="rounded-xl border border-border/30 bg-card/50 p-4"
           >
             <div className="flex items-center gap-2">
-              <Icon size={14} className="text-primary" />
+              <div
+                className={`flex h-6 w-6 items-center justify-center rounded-md ${def.bgColor}`}
+              >
+                <Icon size={13} className={def.color} />
+              </div>
               <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                 {def.label}
               </span>
             </div>
             <motion.p
-              className="mt-2 font-display text-2xl tracking-tight"
+              className={`mt-2 font-display text-2xl tabular-nums tracking-tight ${def.color}`}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ delay: i * 0.08 + 0.2 }}

components/title-card.tsx

@@ -47,8 +47,19 @@ export function TitleCard({
             className="h-full w-full object-cover"
           />
         ) : (
-          <div className="flex h-full items-center justify-center bg-gradient-to-br from-card to-muted text-sm text-muted-foreground">
-            No poster
+          <div className="relative flex h-full items-center justify-center overflow-hidden bg-gradient-to-br from-card via-secondary to-muted">
+            <div
+              className="pointer-events-none absolute inset-0 opacity-[0.06]"
+              style={{
+                backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
+              }}
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-primary/10 via-transparent to-transparent" />
+            <div className="relative px-3 text-center">
+              <p className="font-display text-sm leading-snug tracking-tight text-foreground/70">
+                {title}
+              </p>
+            </div>
           </div>
         )}
         {/* Hover gradient overlay with metadata */}