Fix loading skeletons to match current UI across all pages

- Stats grid: sm:grid-cols-4 → lg:grid-cols-4 to match actual breakpoint
- Continue watching cards: border → ring-1 to match actual card styling
- Continue watching section: add carousel-like margins (-mx-4/px-4)
- Title detail: full-viewport backdrop, responsive poster (120px/220px),
  metadata row + star rating instead of two generic buttons
- Explore hero: full-viewport width matching HeroBanner component
- Explore rows: add icon placeholders, carousel-like margins, genre chip overflow
- Settings: icon+label section headings, 3 integration cards instead of 2
- Dashboard: add icon placeholders to section headings, fix mt-2 → mt-1
- Extract shared SectionHeading helper for icon+text skeleton pattern

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

components/skeletons.tsx

@@ -1,5 +1,14 @@
 import { Skeleton } from "@/components/ui/skeleton";
 
+function SectionHeading({ width = "w-32" }: { width?: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <Skeleton className="size-5 rounded" />
+      <Skeleton className={`h-6 ${width}`} />
+    </div>
+  );
+}
+
 export function TitleCardSkeleton() {
   return (
     <div className="overflow-hidden rounded-xl bg-card ring-1 ring-white/[0.06]">
@@ -14,7 +23,7 @@ export function TitleCardSkeleton() {
 
 export function ContinueWatchingSkeleton() {
   return (
-    <div className="w-[calc(100vw-3rem)] shrink-0 overflow-hidden rounded-xl border border-border/30 bg-card/50 sm:w-72">
+    <div className="w-[calc(100vw-3rem)] shrink-0 overflow-hidden rounded-xl bg-card/50 ring-1 ring-white/[0.06] sm:w-72">
       <Skeleton className="aspect-video w-full rounded-none" />
       <div className="flex items-center gap-3 p-3">
         <div className="min-w-0 flex-1 space-y-2">
@@ -28,12 +37,14 @@ export function ContinueWatchingSkeleton() {
 }
 
 export function StatCardSkeleton() {
-  return <Skeleton className="h-24 w-full rounded-xl" />;
+  return (
+    <Skeleton className="h-[88px] w-full rounded-xl border border-border/30" />
+  );
 }
 
 export function StatsSectionSkeleton() {
   return (
-    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+    <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
       <StatCardSkeleton />
       <StatCardSkeleton />
       <StatCardSkeleton />
@@ -45,8 +56,8 @@ export function StatsSectionSkeleton() {
 export function ContinueWatchingSectionSkeleton() {
   return (
     <div className="space-y-4">
-      <Skeleton className="h-6 w-40" />
-      <div className="flex gap-4 overflow-hidden">
+      <SectionHeading width="w-40" />
+      <div className="-mx-4 flex gap-4 overflow-hidden px-4 sm:-mx-0 sm:px-0">
         <ContinueWatchingSkeleton />
         <ContinueWatchingSkeleton />
         <ContinueWatchingSkeleton />
@@ -59,7 +70,7 @@ export function ContinueWatchingSectionSkeleton() {
 export function TitleGridSectionSkeleton() {
   return (
     <div className="space-y-4">
-      <Skeleton className="h-6 w-32" />
+      <SectionHeading />
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
         <TitleCardSkeleton />
         <TitleCardSkeleton />
@@ -90,20 +101,32 @@ export function RecommendationsSkeleton() {
 export function TitleDetailSkeleton() {
   return (
     <div className="space-y-10">
-      <Skeleton className="-mx-4 -mt-6 h-72 sm:h-96" />
-      <div className="flex flex-col gap-8 sm:flex-row">
-        <Skeleton className="h-[330px] w-[220px] shrink-0 rounded-xl" />
+      <Skeleton className="-mt-6 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)] h-80 rounded-none sm:h-[28rem]" />
+      <div className="flex flex-row gap-4 sm:gap-8">
+        <Skeleton className="h-[180px] w-[120px] shrink-0 rounded-xl sm:h-[330px] sm:w-[220px]" />
         <div className="flex-1 space-y-5">
-          <Skeleton className="h-12 w-2/3" />
-          <Skeleton className="h-5 w-1/3" />
+          <div>
+            <Skeleton className="h-8 w-2/3 sm:h-12" />
+            <div className="mt-2 flex items-center gap-3">
+              <Skeleton className="h-5 w-14 rounded" />
+              <Skeleton className="h-4 w-10" />
+              <Skeleton className="h-4 w-16" />
+            </div>
+          </div>
           <div className="space-y-2">
             <Skeleton className="h-4 w-full" />
             <Skeleton className="h-4 w-5/6" />
             <Skeleton className="h-4 w-4/6" />
           </div>
-          <div className="flex gap-3">
-            <Skeleton className="h-9 w-32 rounded-lg" />
-            <Skeleton className="h-9 w-32 rounded-lg" />
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-9 w-28 rounded-lg" />
+            <Skeleton className="h-6 w-px" />
+            <div className="flex gap-1">
+              {Array.from({ length: 5 }).map((_, i) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton
+                <Skeleton key={i} className="size-5 rounded" />
+              ))}
+            </div>
           </div>
         </div>
       </div>
@@ -116,7 +139,7 @@ export function DashboardSkeleton() {
     <div className="space-y-10">
       <div>
         <Skeleton className="h-9 w-64" />
-        <Skeleton className="mt-2 h-4 w-48" />
+        <Skeleton className="mt-1 h-4 w-48" />
       </div>
       <StatsSectionSkeleton />
       <ContinueWatchingSectionSkeleton />