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>

app/(pages)/explore/loading.tsx

@@ -4,9 +4,12 @@ import { Skeleton } from "@/components/ui/skeleton";
 function TitleRowSkeleton({ withGenreChips }: { withGenreChips?: boolean }) {
   return (
     <div className="space-y-4">
-      <Skeleton className="h-7 w-40" />
+      <div className="flex items-center gap-2">
+        <Skeleton className="size-5 rounded" />
+        <Skeleton className="h-6 w-40" />
+      </div>
       {withGenreChips && (
-        <div className="flex gap-2">
+        <div className="-mx-4 flex gap-2 overflow-x-hidden px-4 sm:-mx-0 sm:flex-wrap sm:px-0">
           {Array.from({ length: 7 }).map((_, i) => (
             <Skeleton
               // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
@@ -16,7 +19,7 @@ function TitleRowSkeleton({ withGenreChips }: { withGenreChips?: boolean }) {
           ))}
         </div>
       )}
-      <div className="flex gap-4">
+      <div className="-mx-4 flex gap-4 overflow-hidden px-4 sm:-mx-0 sm:px-0">
         {Array.from({ length: 6 }).map((_, i) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
           <div key={`card-${i}`} className="w-[140px] shrink-0 sm:w-[160px]">
@@ -31,8 +34,8 @@ function TitleRowSkeleton({ withGenreChips }: { withGenreChips?: boolean }) {
 export default function ExploreLoading() {
   return (
     <div className="space-y-10">
-      {/* Hero skeleton */}
-      <div className="-mx-4 -mt-6 sm:-mx-6">
+      {/* Hero skeleton — full viewport width like the actual HeroBanner */}
+      <div className="-mt-6 mb-4 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)]">
         <Skeleton className="aspect-[21/9] min-h-[280px] max-h-[420px] w-full rounded-none" />
       </div>
 

app/(pages)/settings/loading.tsx

@@ -1,26 +1,48 @@
 import { Skeleton } from "@/components/ui/skeleton";
 
+function SectionSkeleton({
+  headingWidth,
+  children,
+}: {
+  headingWidth: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <div className="mb-3 flex items-center gap-2">
+        <Skeleton className="size-4 rounded" />
+        <Skeleton className={`h-3.5 ${headingWidth}`} />
+      </div>
+      {children}
+    </div>
+  );
+}
+
 export default function SettingsLoading() {
   return (
     <div className="mx-auto max-w-2xl space-y-8">
       {/* Header */}
       <div>
-        <Skeleton className="h-9 w-40" />
-        <Skeleton className="mt-2 h-4 w-64" />
+        <div className="flex items-center gap-2">
+          <Skeleton className="size-5 rounded" />
+          <Skeleton className="h-9 w-40" />
+        </div>
+        <Skeleton className="mt-1 h-4 w-64" />
       </div>
 
       {/* Account card */}
-      <div className="space-y-3">
-        <Skeleton className="h-4 w-20" />
-        <Skeleton className="h-28 w-full rounded-xl" />
-      </div>
+      <SectionSkeleton headingWidth="w-16">
+        <Skeleton className="h-[76px] w-full rounded-xl" />
+      </SectionSkeleton>
 
-      {/* Media server cards */}
-      <div className="space-y-3">
-        <Skeleton className="h-4 w-28" />
-        <Skeleton className="h-16 w-full rounded-xl" />
-        <Skeleton className="h-16 w-full rounded-xl" />
-      </div>
+      {/* Integrations cards */}
+      <SectionSkeleton headingWidth="w-24">
+        <div className="space-y-3">
+          <Skeleton className="h-16 w-full rounded-xl" />
+          <Skeleton className="h-16 w-full rounded-xl" />
+          <Skeleton className="h-16 w-full rounded-xl" />
+        </div>
+      </SectionSkeleton>
     </div>
   );
 }