fix: desktop homepage responsive polish and nav tweaks

- Banner: scale down and center on desktop (md:max-w-[680px] lg:max-w-[800px])
  so it no longer fills the whole screen.
- Align section widths to one responsive container (820/1080/1180): wrap the
  Official row and match Popular to Latest, fixing left-edge/width mismatches.
- RecommendedCard: stop the carousel card from shrinking back to 246.4px at xl.
- Popular download button now matches the file bubble's filled round
  DownloadCloud button for visual consistency.
- Header nav vertical padding py-1 -> py-0.5; swap Favorites before Popular
  across desktop nav and mobile menu to match the bottom tab order.
- Official carousel: hide the left arrow at the start and the right arrow at
  the end instead of always showing both.

All changes are md/lg/xl-scoped; mobile layout is unchanged.

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

src/components/FigmaBanner.tsx

@@ -301,7 +301,7 @@ export function FigmaBanner() {
   ) : null;
 
   return (
-    <div className="relative">
+    <div className="relative md:mx-auto md:max-w-[680px] lg:max-w-[800px]">
       <div
         ref={scrollerRef}
         onPointerDown={handlePointerDown}

src/components/PopularRankList.tsx

@@ -1,6 +1,5 @@
 import {
   Archive,
-  Download,
   File,
   FileText,
   Image as ImageIcon,
@@ -11,6 +10,7 @@ import {
   Video,
   type LucideIcon,
 } from "lucide-react";
+import { DownloadCloudIcon } from "./icons/DownloadCloudIcon";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { assetUrl, type Category } from "../api";
@@ -173,12 +173,12 @@ function PopularRankRow({
             disabled={isDownloading}
             aria-label={t("download")}
             title={t("download")}
-            className="flex h-9 w-9 items-center justify-center rounded-lg text-neutral-300 outline-none transition hover:bg-white/5 hover:text-ark-gold focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:opacity-60"
+            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
           >
             {isDownloading ? (
-              <LoaderCircle className="h-[18px] w-[18px] animate-spin" />
+              <LoaderCircle className="h-5 w-5 animate-spin" strokeWidth={2.3} />
             ) : (
-              <Download className="h-[18px] w-[18px]" />
+              <DownloadCloudIcon className="h-6 w-6" />
             )}
           </button>
         ) : null}
@@ -224,7 +224,7 @@ export function PopularRankList({
   const placeholderCount = Math.max(0, MAX_ITEMS - items.length);
 
   return (
-    <div className="mx-auto flex max-w-[760px] flex-col gap-2.5 px-4 md:gap-3 md:px-0">
+    <div className="mx-auto flex max-w-full flex-col gap-2.5 px-4 md:max-w-[820px] md:gap-3 md:px-0 lg:max-w-[1080px] xl:max-w-[1180px]">
       {items.map((post, index) => (
         <PopularRankRow
           key={post.id}

src/components/RecommendedCard.tsx

@@ -28,7 +28,7 @@ const CARD_HOVER_SPRING = {
 } as const;
 
 const CARD_CAROUSEL_SIZE_CLASS =
-  "w-[208px] md:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
+  "w-[208px] md:w-[240px] lg:w-[246.4px] min-[1100px]:w-[273px]";
 
 const CARD_GRID_SIZE_CLASS = "w-full max-w-[360px] md:max-w-none";